/* Application layout on top of the unmodified Gobierno Digital framework. */
@font-face {
  font-family: "Roboto";
  src: url("fonts/roboto-latin-wght-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Slab";
  src: url("fonts/roboto-slab-latin-wght-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --gob-primary: #006fb3;
  --gob-primary-hover: #00578d;
  --gob-secondary: #fe6565;
  --gob-navy: #0a132d;
  --gob-text: #111111;
  --gob-body: #4a4a4a;
  --gob-muted: #626262;
  --gob-disabled: #8a8a8a;
  --gob-border: #a8b7c7;
  --gob-rule: #dedede;
  --gob-neutral: #eeeeee;
  --gob-surface: #ffffff;
  --gob-success: #2d717c;
  --gob-error: #a52a2a;
  --gob-focus: #0a132d;
  --gob-control-bg: #ffffff;
  --gob-control-border: #8a8a8a;
}
/* The notice bar is stuck 8px from the top while it stays in view: what the browser scrolls to,
   and the page a key turns to, keeps its height and a margin clear of it. The bar and what is in
   it have the same distance, negative, or going into the bar from far down the page would scroll
   the page to make room above it. */
html {
  --notice-cap: min(35vh, 16rem);
  scroll-padding-top: calc(var(--notice-height, 0px) + 24px);
}
.notice-bar,
.notice-bar * {
  scroll-margin-top: calc(-1 * (var(--notice-height, 0px) + 24px));
}
body {
  margin: 0;
  background: var(--gob-surface);
  color: var(--gob-text);
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
[hidden] {
  display: none !important;
}
a {
  color: var(--gob-primary);
  text-underline-offset: 3px;
}
a:hover {
  color: var(--gob-primary-hover);
}
h1,
h2,
h3 {
  font-family: "Roboto Slab", serif;
  font-weight: 400;
  color: var(--gob-text);
}
h1 {
  font-size: 2.4rem;
  line-height: 1.25;
  margin: 0 0 16px;
}
h2 {
  font-size: 1.6875rem;
  line-height: 1.3;
  margin: 0 0 16px;
}
h3 {
  font-size: 1.4375rem;
  line-height: 1.35;
}
p {
  color: var(--gob-body);
  line-height: 1.5;
  margin: 0 0 16px;
}
button,
input,
select {
  font: inherit;
}
.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  border-radius: 0;
  padding-left: 24px;
  padding-right: 24px;
  max-width: 100%;
}
.btn:disabled {
  cursor: not-allowed;
}
.btn .cl {
  display: inline-block;
  text-decoration: none;
}
.btn-link {
  color: var(--gob-primary);
}
.btn-link:hover {
  color: var(--gob-primary-hover);
}
.text-button {
  padding: 8px;
  min-height: 40px;
  font-size: 0.875rem;
}
:focus-visible,
.btn:focus-visible,
.form-control:focus-visible {
  outline: 3px solid var(--gob-focus);
  outline-offset: 3px;
  box-shadow: none;
}
.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 10;
  padding: 12px 24px;
  color: var(--gob-surface);
  background: var(--gob-navy);
}
.skip-link:focus {
  top: 8px;
  color: var(--gob-surface);
}
.masthead {
  border-bottom: 1px solid var(--gob-rule);
  background: var(--gob-surface);
}
.masthead-inner,
.footer-inner {
  max-width: 1204px;
  margin: auto;
  padding: 24px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 32px;
  color: var(--gob-text);
  text-decoration: none;
}
.brand:hover {
  color: var(--gob-text);
  text-decoration: none;
}
/* The logos have a height of whole pixels: with a fraction in the header, the pager's button
   that is brought into the window ends a hair below it. */
.brand img {
  flex-shrink: 0;
  width: 200px;
  height: 63px;
}
.brand-title {
  display: block;
  font:
    400 1.5rem/1.3 "Roboto Slab",
    serif;
  padding-left: 32px;
  border-left: 1px solid var(--gob-border);
}
.brand-title > span {
  display: block;
  font:
    400 0.875rem/1.5 "Roboto",
    sans-serif;
  color: var(--gob-body);
  margin-top: 4px;
}
#identity {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.875rem;
  color: var(--gob-body);
}
.app-main {
  width: 100%;
  max-width: 1204px;
  min-height: 0;
  margin: 0 auto;
  padding: 0 32px 48px;
  flex: 1;
}
.workspace-nav {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0 32px;
  border-bottom: 1px solid var(--gob-border);
  margin-bottom: 40px;
}
.workspace-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 20px 0;
  font-size: 1rem;
  color: var(--gob-primary);
  text-decoration: none;
}
.workspace-nav a:hover {
  text-decoration: underline;
}
.workspace-nav #agent-access {
  margin-left: auto;
}
.heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 32px;
}
.heading > div > :last-child {
  margin-bottom: 0;
}
.eyebrow {
  font-size: 0.75rem;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gob-body);
  margin-bottom: 8px;
}
.card {
  border: 1px solid var(--gob-border);
  border-radius: 0;
  box-shadow: none;
  background: var(--gob-surface);
}
.step-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-family: "Roboto", sans-serif;
  font-size: 1.25rem;
  font-weight: 500;
  margin: 0;
}
.step-number {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: var(--gob-primary);
  color: var(--gob-surface);
  font:
    500 1rem/1 "Roboto",
    sans-serif;
}
.context {
  padding: 24px;
}
.context-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  margin-top: 24px;
}
label {
  display: block;
  color: var(--gob-text);
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 8px;
}
.optional {
  color: var(--gob-muted);
  font-weight: 400;
}
.form-control {
  min-height: 48px;
  height: auto;
  padding: 12px 16px;
  border: 1px solid var(--gob-control-border);
  background: var(--gob-control-bg);
  color: var(--gob-text);
  border-radius: 0;
}
.form-control::placeholder {
  color: var(--gob-muted);
  opacity: 1;
}
.form-control:focus {
  border-color: var(--gob-primary);
  box-shadow: none;
}
select.form-control {
  padding-right: 32px;
}
.organization-label {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--gob-navy);
  margin: 0;
  padding: 8px 0;
}
.footnote {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--gob-muted);
  margin: 8px 0 0;
}
.field-error {
  color: var(--gob-error);
}
.form-control[aria-invalid="true"] {
  border-color: var(--gob-error);
}
.dropzone {
  margin: 32px 0;
}
.dropzone-body {
  margin-top: 16px;
  padding: 24px 32px 32px;
  text-align: center;
  border: 2px dashed var(--gob-border);
  background: var(--gob-surface);
}
.dropzone-icon {
  display: inline-block;
  color: var(--gob-primary);
  font-size: 40px;
  margin-bottom: 12px;
}
.dropzone.dragging .dropzone-body {
  border-color: var(--gob-primary);
  background: var(--gob-neutral);
}
.dropzone h3 {
  margin: 0 0 12px;
}
.dropzone p {
  margin-bottom: 16px;
}
.dropzone .footnote {
  max-width: 760px;
  margin: 20px auto 0;
}
.actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.dropzone .actions {
  justify-content: center;
}
.ledger {
  overflow: hidden;
}
.ledger-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
}
#queue-count {
  font:
    400 0.875rem/1.5 "Roboto",
    sans-serif;
  color: var(--gob-muted);
}
.summary {
  padding: 0 24px 20px;
  color: var(--gob-body);
  font-size: 0.875rem;
}
progress {
  display: block;
  width: 100%;
  height: 4px;
  border: 0;
  background: var(--gob-neutral);
  accent-color: var(--gob-primary);
}
progress::-webkit-progress-bar {
  background: var(--gob-neutral);
}
progress::-webkit-progress-value {
  background: var(--gob-primary);
}
progress::-moz-progress-bar {
  background: var(--gob-primary);
}
#resume-help {
  padding: 8px 24px 16px;
}
.table-scroll {
  position: relative;
  overflow-x: auto;
}
.table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.875rem;
  margin: 0;
}
.table thead th {
  font-weight: 500;
  color: var(--gob-body);
  padding: 16px 24px;
  border: 0;
  border-bottom: 1px solid var(--gob-border);
  background: var(--gob-neutral);
}
.table td {
  padding: 16px 24px;
  border: 0;
  border-bottom: 1px solid var(--gob-rule);
  vertical-align: middle;
}
.table td:first-child {
  width: 48%;
  max-width: 560px;
}
.table td:nth-child(2) {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--gob-muted);
}
.filename {
  display: block;
  overflow-wrap: anywhere;
  font-weight: 500;
}
.reference {
  display: block;
  font:
    400 0.75rem/1.6 "Roboto",
    sans-serif;
  color: var(--gob-muted);
  margin-top: 4px;
  overflow-wrap: anywhere;
}
.status {
  display: inline-block;
  font-size: 0.875rem;
  color: var(--gob-body);
}
.empty td {
  text-align: center;
  padding: 40px 24px;
  color: var(--gob-muted);
}
.ledger-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  font-size: 0.875rem;
  color: var(--gob-muted);
}
.confirm {
  padding: 16px 24px 20px;
  border-top: 1px solid var(--gob-border);
  background: var(--gob-neutral);
  color: var(--gob-body);
}
.confirm p {
  margin: 0 0 12px;
}
.received {
  margin-top: 32px;
  padding: 32px;
}
.document-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  border-top: 1px solid var(--gob-rule);
  margin-top: 16px;
  padding-top: 16px;
  font-size: 0.875rem;
  color: var(--gob-muted);
}
.received-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.received-count {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--gob-success);
  margin: 0 0 16px;
  text-align: right;
}
.received > .footnote {
  margin-top: 0;
  margin-bottom: 16px;
}
.received article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--gob-rule);
}
.received article > div {
  min-width: 0;
}
.received article strong {
  font-weight: 500;
  overflow-wrap: anywhere;
}
.received article .actions {
  flex-shrink: 0;
}
.received > button {
  margin-top: 24px;
}
.info-note {
  padding: 16px 20px;
  border-left: 4px solid var(--gob-primary);
  background: var(--gob-neutral);
  font-size: 0.875rem;
  margin: 24px 0 16px;
}
.site-footer {
  height: auto;
  min-height: 0;
  overflow: visible;
  padding: 0;
  border-top: 1px solid var(--gob-border);
  margin-top: auto;
  background: var(--gob-navy);
  color: var(--gob-surface);
}
.footer-inner {
  align-items: center;
  padding-top: 32px;
  padding-bottom: 40px;
}
/* The black logo, shown white on the navy. */
.site-footer-logo {
  flex-shrink: 0;
  width: 200px;
  height: 63px;
  filter: invert(1);
}
.footer-inner p {
  margin: 0;
  flex: 1;
  font-weight: 500;
  color: var(--gob-surface);
}
.footer-inner p span {
  display: block;
  font-weight: 400;
  font-size: 0.875rem;
  margin-top: 4px;
  color: var(--gob-border);
}
.footer-inner a {
  display: inline-block;
  width: auto;
  height: auto;
  padding: 0;
  overflow: visible;
  white-space: normal;
  font-size: 0.875rem;
  color: var(--gob-surface);
}
.footer-inner a:hover {
  color: var(--gob-surface);
  text-decoration: underline;
}
.welcome {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: 64px;
  padding: 72px 0;
}
.welcome .lead {
  font-size: 1.125rem;
  line-height: 1.6;
  margin: 24px 0 32px;
  max-width: 480px;
}
.welcome .btn {
  display: inline-flex;
}
.welcome .footnote {
  max-width: 440px;
  margin-top: 16px;
}
.welcome-guide {
  border-left: 1px solid var(--gob-border);
  padding-left: 40px;
}
.welcome-guide h2 {
  font-size: 1.25rem;
  margin-bottom: 32px;
}
.journey {
  list-style: none;
  margin: 0;
  padding: 0;
}
.journey li {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}
.journey li:last-child {
  margin-bottom: 0;
}
.journey strong {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  margin: 4px 0 8px;
}
.journey p {
  font-size: 0.875rem;
  margin: 0;
}
.auth-main {
  width: 100%;
  max-width: 744px;
  min-height: 0;
  margin: 0 auto;
  padding: 32px 32px 64px;
  flex: 1;
}
.back-link {
  display: inline-block;
  margin-bottom: 24px;
}
.auth-panel {
  padding: 32px;
}
.auth-panel h1 {
  font-size: 2rem;
}
.auth-panel form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  margin-top: 24px;
}
.auth-panel form + form {
  border-top: 1px solid var(--gob-border);
  padding-top: 24px;
}
.auth-panel p,
.auth-panel code {
  overflow-wrap: anywhere;
}
.auth-panel code {
  color: var(--gob-body);
}
/* Stays in view wherever the page is scrolled to: what it says is about what was just done. */
.notice-bar {
  position: sticky;
  top: 8px;
  z-index: 30;
}
.notice-bar:not(.empty) {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 8px 8px 8px 20px;
  border-left: 4px solid var(--gob-primary);
  background: var(--gob-neutral);
  box-shadow: 0 2px 10px rgb(0 0 0 / 16%);
  margin: 24px 0;
  color: var(--gob-body);
}
#notice {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
/* A text longer than the cap scrolls inside the bar, with the button that closes it in view.
   The cap is the text's alone, and never less than two lines of it; the buttons are on top. */
.notice-bar:not(.empty) #notice {
  padding: 8px 0;
  max-height: max(calc(3rem + 16px), calc(var(--notice-cap) - 16px));
  overflow-y: auto;
}
.notice-bar .btn {
  flex-shrink: 0;
}
/* On a narrow window the buttons go under the text, whose height gives them their row. */
@media (max-width: 767px) {
  .notice-bar.with-action:not(.empty) {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .notice-bar.with-action:not(.empty) #notice {
    flex-basis: 100%;
    max-height: max(calc(3rem + 16px), calc(var(--notice-cap) - 64px));
  }
}
/* Two lines of text with the buttons under them are 11rem of bar, which a window this small
   cannot spare: a notice with a button scrolls with the page, shows its text whole, and only
   the usual margin is kept clear of it. One without a button stays in view. */
@media (max-width: 27.5rem) and (max-height: 27.5rem) {
  .notice-bar.with-action {
    position: static;
  }
  .notice-bar.with-action:not(.empty) #notice {
    max-height: none;
    overflow: visible;
  }
}
@media (max-width: 991px) {
  .workspace-nav {
    gap: 0 24px;
  }
  .workspace-nav a:last-child {
    margin-left: 0;
  }
  .ledger-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .welcome {
    gap: 32px;
  }
  .welcome-guide {
    padding-left: 24px;
  }
  .received article .actions {
    flex-shrink: 1;
  }
}
@media (max-width: 767px) {
  .masthead-inner {
    padding: 16px;
    gap: 16px;
    flex-wrap: wrap;
  }
  .brand {
    gap: 16px;
  }
  .brand img {
    width: 132px;
    height: 42px;
  }
  .brand-title {
    font-size: 1.25rem;
    padding-left: 16px;
  }
  .brand-title > span {
    font-size: 0.75rem;
  }
  #identity {
    width: 100%;
    justify-content: space-between;
    border-top: 1px solid var(--gob-rule);
    padding-top: 8px;
  }
  #identity:empty {
    display: none;
  }
  .app-main {
    padding: 0 16px 32px;
  }
  .workspace-nav {
    gap: 0;
    margin-bottom: 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .workspace-nav a {
    font-size: 0.875rem;
    padding: 12px 8px 12px 0;
  }
  .heading {
    display: block;
    margin-bottom: 24px;
  }
  h1 {
    font-size: 1.875rem;
  }
  h2 {
    font-size: 1.4375rem;
  }
  h3 {
    font-size: 1.25rem;
  }
  .context {
    padding: 20px;
  }
  .context-fields {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .dropzone {
    margin: 24px 0;
  }
  .dropzone-body {
    padding: 24px 16px;
  }
  .actions {
    gap: 8px;
  }
  .btn {
    padding-left: 16px;
    padding-right: 16px;
  }
  .dropzone .actions > .btn {
    flex: 1 1 auto;
  }
  .step-heading {
    font-size: 1.125rem;
  }
  .ledger-heading {
    padding: 20px;
    gap: 20px;
  }
  .ledger-heading .actions {
    width: 100%;
  }
  .summary {
    padding-left: 20px;
    padding-right: 20px;
  }
  .ledger-footer {
    align-items: flex-start;
    flex-direction: column;
  }
  .table-scroll table,
  .table-scroll tbody {
    display: block;
  }
  .table-scroll thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .table-scroll tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 16px 20px;
    border-bottom: 1px solid var(--gob-rule);
  }
  .table-scroll td {
    display: block;
    padding: 0;
    border: 0;
  }
  .table-scroll td:first-child {
    grid-column: 1 / -1;
    width: auto;
    max-width: none;
    padding-bottom: 8px;
  }
  .table-scroll td:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }
  .table-scroll td:nth-child(3) {
    grid-column: 1;
    grid-row: 3;
    margin-top: 4px;
  }
  .table-scroll td:last-child:not(:first-child) {
    grid-column: 2;
    grid-row: 2 / span 2;
  }
  .received {
    margin-top: 24px;
    padding: 20px;
  }
  .received-heading,
  .received article {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
  .received-count {
    text-align: left;
    font-size: 1rem;
    margin-bottom: 16px;
  }
  .footer-inner {
    padding: 24px 16px;
    gap: 24px;
    flex-wrap: wrap;
  }
  .site-footer-logo {
    width: 144px;
    height: 45px;
  }
  .footer-inner p {
    flex: 1 1 180px;
  }
  .welcome {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    padding: 40px 0;
  }
  .welcome-guide {
    border-left: 0;
    border-top: 1px solid var(--gob-border);
    padding: 32px 0 0;
  }
  .welcome .btn {
    min-width: 0;
    width: 100%;
  }
  .auth-main {
    padding: 24px 16px 40px;
  }
  .auth-panel {
    padding: 24px 20px;
  }
  .auth-panel h1 {
    font-size: 1.75rem;
  }
}
/* Signs: one small drawing per state, so that no state is told by colour alone. */
.sign-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.sign {
  position: relative;
  display: inline-block;
  flex: 0 0 1.25rem;
  width: 1.25rem;
  height: 1.25rem;
}
/* Two layers: what stays, and the part that moves. Each is a box of its own, so the browser
   moves it without painting it again. */
.sign svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* Everything that moves does so by `transform` and `opacity` alone, and only while its row is
   in the window. Motion starts 400 ms into a state: one that is over sooner is never seen to
   move. */
.in-view .sign[data-sign="ring"] .sign-part {
  animation: sign-turn 1.2s linear 0.4s infinite;
}
.in-view .sign[data-sign="up"] .sign-part {
  animation: sign-rise 1.6s cubic-bezier(0.4, 0, 0.2, 1) 0.4s infinite;
}
.in-view .sign.landed {
  animation: sign-land 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
@keyframes sign-turn {
  to {
    transform: rotate(360deg);
  }
}
/* The arrow is there for most of its way up: the sign never reads as empty. */
@keyframes sign-rise {
  0% {
    transform: translateY(3px);
    opacity: 0;
  }
  14% {
    opacity: 1;
  }
  80% {
    transform: translateY(-1.5px);
    opacity: 1;
  }
  100% {
    transform: translateY(-3px);
    opacity: 0;
  }
}
@keyframes sign-land {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
/* A row's state: one line, or two when what has been done and what comes next differ. */
.status-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--gob-body);
}
.status-line + .status-line {
  margin-top: 6px;
}
/* The line's tone decides the colour and the weight, whatever class the words keep. */
.status-line > .status-text {
  display: block;
  min-width: 0;
  color: inherit;
  font-weight: inherit;
  overflow-wrap: anywhere;
}
.status-line[data-tone="active"] {
  color: var(--gob-primary);
}
.status-line[data-tone="done"] {
  color: var(--gob-success);
  font-weight: 500;
}
.status-line[data-tone="attention"] {
  color: var(--gob-error);
}
.status-line[data-tone="note"] {
  color: var(--gob-muted);
}
/* A line with no sign is set under the words of the line above it. */
.status-line[data-tone="note"] > .status-text {
  margin-left: calc(1.25rem + 8px);
  font-size: 0.75rem;
  line-height: 1.6;
}
/* How far a long state has got. The figure in the words says the same. */
.row-bar {
  display: block;
  height: 3px;
  max-width: 15rem;
  margin: 8px 0 2px calc(1.25rem + 8px);
  overflow: hidden;
  background: var(--gob-rule);
  color: var(--gob-primary);
}
/* A transfer that waits: what is stored stays, in grey. */
.row-bar[data-held] {
  color: var(--gob-muted);
}
.row-bar-fill {
  display: block;
  height: 100%;
  background: currentColor;
  transform-origin: 0 50%;
  transform: scaleX(var(--progress, 0));
}
/* It grows between two looks at the queue, while its row is in view. */
.in-view .row-bar-fill {
  transition: transform 0.5s linear;
}
@media (max-width: 767px) {
  .row-bar {
    max-width: none;
  }
}
@media (max-width: 22.5rem) {
  .row-bar,
  .status-line[data-tone="note"] > .status-text {
    margin-left: 0;
  }
}
/* ── The delivery panel: where the run stands, in words, and the way from here to there ─── */
.delivery {
  margin: 0 24px 20px;
  padding: 20px 24px 20px 20px;
  border-left: 4px solid var(--gob-primary);
  background: var(--gob-neutral);
  color: var(--gob-body);
}
.delivery[data-tone="done"] {
  border-left-color: var(--gob-success);
}
.delivery[data-tone="attention"] {
  border-left-color: var(--gob-error);
}
.delivery[data-tone="wait"] {
  border-left-color: var(--gob-muted);
}
.delivery-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 32px;
}
.delivery-words {
  flex: 1 1 16rem;
  min-width: 0;
}
.delivery .eyebrow {
  margin-bottom: 4px;
}
.delivery-title {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  overflow-wrap: anywhere;
}
/* The title's sign has the colour of what it says, whatever the panel is at. */
.delivery-title .sign {
  flex-basis: 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.2em;
  color: var(--gob-primary);
}
.delivery-title .sign[data-sign="done"],
.delivery-title .sign[data-sign="had"] {
  color: var(--gob-success);
}
.delivery-title .sign[data-sign="alert"] {
  color: var(--gob-error);
}
.delivery-title .sign[data-sign="wait"],
.delivery-title .sign[data-sign="pause"] {
  color: var(--gob-body);
}
.delivery-help {
  max-width: 44rem;
  margin: 8px 0 0;
  font-size: 0.875rem;
}
.delivery-figure {
  margin: 0;
  font:
    400 2.4rem/1.1 "Roboto Slab",
    serif;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--gob-text);
}
.delivery-figure:empty {
  display: none;
}

/* The way: this computer on the left, the reception desk on the right. Sheets cross it while
   files are on their way and stand still while they wait; a bar sweeps the end that is at work. */
.lane {
  display: flex;
  align-items: center;
  margin-top: 20px;
  color: var(--gob-primary);
  /* How long a sheet takes to cross: a long way is crossed at a walk too. */
  --lane-pace: 9s;
}
.lane-node {
  position: relative;
  flex: 0 0 2.75rem;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px solid currentColor;
  background: var(--gob-surface);
}
.lane-node .cl {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 1.5rem;
  line-height: 1.5rem;
}
.lane-node[data-busy]::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50%;
  height: 4px;
  background: currentColor;
}
.delivery.in-view .lane-node[data-busy]::after {
  animation: node-sweep 1.1s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
@keyframes node-sweep {
  from {
    transform: translateX(-10%);
  }
  to {
    transform: translateX(110%);
  }
}
.lane-track {
  position: relative;
  flex: 1 1 auto;
  min-width: 1.5rem;
  height: 2.75rem;
  overflow: hidden;
}
/* The line, and the head that says which way it goes. */
.lane-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 6px;
  top: calc(50% - 1px);
  height: 2px;
  background: currentColor;
}
.lane-track::after {
  content: "";
  position: absolute;
  right: 0;
  top: calc(50% - 5px);
  border: solid transparent;
  border-width: 5px 0 5px 7px;
  border-left-color: currentColor;
}
/* Nothing on its way: the line is there, grey. Waiting: grey and broken. */
.lane[data-flow="off"] .lane-track,
.lane[data-flow="held"] .lane-track {
  color: var(--gob-muted);
}
.lane[data-flow="held"] .lane-track::before {
  background: repeating-linear-gradient(
    90deg,
    currentColor 0 6px,
    transparent 6px 12px
  );
}
.lane[data-flow="sent"] .lane-track,
.lane[data-flow="done"] .lane-track {
  color: var(--gob-success);
}
/* A sheet is carried by a box as wide as the way, so that it can cross all of it by a
   transform that asks nothing of the layout. */
.lane-sheet {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.lane-sheet svg {
  position: absolute;
  left: 0;
  top: calc(50% - 9px);
  width: 14px;
  height: 18px;
  overflow: visible;
}
/* Six sheets, each a sixth of the way behind the one before. */
.delivery.in-view .lane[data-flow="on"] .lane-sheet,
.delivery.in-view .lane[data-flow="held"] .lane-sheet {
  animation-name: lane-cross;
  animation-duration: var(--lane-pace);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: calc(var(--lane-pace) * var(--lane-place, 0) * -1);
}
/* Held where they are, and going on from there: as the transfer does. */
.lane[data-flow="held"] .lane-sheet {
  animation-play-state: paused;
}
.lane[data-flow="held"] .lane-sheet svg {
  color: var(--gob-muted);
}
.lane-sheet:nth-child(2) {
  --lane-place: 0.1667;
}
.lane-sheet:nth-child(3) {
  --lane-place: 0.3333;
}
.lane-sheet:nth-child(4) {
  --lane-place: 0.5;
}
.lane-sheet:nth-child(5) {
  --lane-place: 0.6667;
}
.lane-sheet:nth-child(6) {
  --lane-place: 0.8333;
}
@keyframes lane-cross {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  100% {
    transform: translateX(calc(100% - 20px));
    opacity: 0;
  }
}
/* A file that goes in smaller sends: smaller sheets. */
.lane[data-pieces] .lane-sheet svg {
  left: 2px;
  top: calc(50% - 6px);
  width: 9px;
  height: 12px;
}
/* The two ends as the run closes: what is received is on the right, and what still needs the
   person stays on the left. */
.lane-node[data-end="received"] {
  border-color: var(--gob-success);
  background: var(--gob-success);
  color: var(--gob-surface);
}
.lane-node[data-end="clear"] {
  color: var(--gob-muted);
}
.lane-node[data-end="attention"] {
  color: var(--gob-error);
}
.lane-ends {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 8px 0 0;
}
.lane-end {
  min-width: 0;
}
.lane-end dt {
  font-size: 0.75rem;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gob-body);
}
.lane-end dd {
  margin: 0;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: var(--gob-text);
}
.lane-end-to {
  text-align: right;
}
.lane-end dd[data-tone="attention"] {
  color: var(--gob-error);
}
/* The first rows that need the person, named where the run's end is said. */
.delivery-list {
  margin: 16px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--gob-border);
  list-style: none;
  font-size: 0.875rem;
}
.delivery-list li {
  margin-bottom: 8px;
  overflow-wrap: anywhere;
}
.delivery-list li:last-child {
  margin-bottom: 0;
}
.delivery-list strong {
  font-weight: 500;
  color: var(--gob-text);
}

@media (max-width: 767px) {
  .delivery {
    margin: 0 20px 20px;
    padding: 16px 16px 16px 12px;
  }
  /* The figure goes up beside the line over the title, which keeps clear of it. */
  .delivery {
    position: relative;
  }
  .delivery-figure {
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 1.5rem;
  }
  .delivery .eyebrow {
    padding-right: 4.5rem;
  }
  /* A short way: four sheets, a quarter of it apart. */
  .lane {
    --lane-pace: 4.5s;
  }
  .lane-sheet:nth-child(2) {
    --lane-place: 0.25;
  }
  .lane-sheet:nth-child(3) {
    --lane-place: 0.5;
  }
  .lane-sheet:nth-child(4) {
    --lane-place: 0.75;
  }
  .lane-sheet:nth-child(n + 5) {
    display: none;
  }
}
/* A window narrower than a phone held upright, as at 200 % zoom on one: the panel takes the
   card's whole width and the figure goes back into the text. */
@media (max-width: 22.5rem) {
  .delivery {
    margin: 0 0 20px;
    padding: 12px 12px 12px 10px;
  }
  .delivery-figure {
    position: static;
    flex-basis: 100%;
  }
  .delivery .eyebrow {
    padding-right: 0;
  }
  .delivery-title {
    display: block;
  }
  .delivery-title .sign {
    margin: 0 6px 0 0;
    vertical-align: -0.2em;
  }
  .lane-ends {
    gap: 8px;
  }
  .lane-end dt {
    letter-spacing: 0.04em;
  }
}
/* The way's line is a background, which a forced palette would take away: it is drawn with
   borders there. */
@media (forced-colors: active) {
  .lane-track::before {
    height: 0;
    background: none;
    border-top: 2px solid currentColor;
  }
  .lane[data-flow="held"] .lane-track::before {
    border-top-style: dashed;
  }
}
/* ── The reception stamp: the close of a run in which everything was received ───────────── */
.receipt-stamp {
  position: relative;
  flex: 0 0 auto;
  display: inline-grid;
  justify-items: center;
  max-width: 100%;
  margin: 6px 10px 6px 6px;
  padding: 9px 18px 8px;
  border: 3px solid currentColor;
  outline: 1px solid currentColor;
  outline-offset: 3px;
  color: var(--gob-success);
  font:
    700 0.6875rem/1.5 "Roboto",
    sans-serif;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-4deg);
}
.receipt-stamp strong {
  font:
    700 clamp(1rem, 6vw, 1.5rem) / 1.15 "Roboto Slab",
    serif;
  letter-spacing: 0.14em;
  /* The tracking after the last letter would set the word off centre. */
  margin-right: -0.14em;
}
/* In its place and unseen until the person can see it land. */
.receipt-stamp.waiting {
  opacity: 0;
}
.in-view .receipt-stamp.landing {
  animation: stamp-land 0.44s both;
}
.in-view .receipt-stamp.landing::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 2px solid currentColor;
  animation: stamp-ring 0.5s ease-out 0.2s both;
}
@keyframes stamp-land {
  0% {
    transform: rotate(-11deg) scale(1.7);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.4);
  }
  45% {
    transform: rotate(-4deg) scale(0.94);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  72% {
    transform: rotate(-4deg) scale(1.03);
  }
  100% {
    transform: rotate(-4deg) scale(1);
    opacity: 1;
  }
}
@keyframes stamp-ring {
  from {
    transform: scale(1);
    opacity: 0.55;
  }
  to {
    transform: scale(1.16);
    opacity: 0;
  }
}

/* ── The notice that closes a run takes the run's tone and sign ─────────────────────────── */
.notice-bar[data-tone="done"]:not(.empty) {
  border-left-color: var(--gob-success);
}
.notice-bar[data-tone="attention"]:not(.empty) {
  border-left-color: var(--gob-error);
}
.notice-bar .sign {
  margin-top: 10px;
}
.notice-bar[data-tone="done"] .sign {
  color: var(--gob-success);
}
.notice-bar[data-tone="attention"] .sign {
  color: var(--gob-error);
}

@media (max-width: 767px) {
  /* Beside the sign, with the buttons under both. */
  .notice-bar[data-tone].with-action:not(.empty) #notice {
    flex-basis: calc(100% - 1.25rem - 16px);
  }
}
/* A window narrower than a phone held upright, as at 200 % zoom on one: the stamp is set
   smaller, and the notice that closes a run puts its button under its words, as a notice with
   an action already does on a phone. */
@media (max-width: 22.5rem) {
  .receipt-stamp {
    margin: 6px 8px 6px 4px;
    padding: 6px 8px 5px;
    font-size: 0.625rem;
    letter-spacing: 0.06em;
  }
  .receipt-stamp strong {
    font-size: clamp(0.8125rem, 6vw, 1.5rem);
    letter-spacing: 0.06em;
    margin-right: -0.06em;
  }
  .notice-bar[data-tone]:not(.empty) {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .notice-bar[data-tone]:not(.empty) #notice {
    flex-basis: calc(100% - 1.25rem - 16px);
    max-height: max(calc(3rem + 16px), calc(var(--notice-cap) - 64px));
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
  /* Nothing moves; every state keeps its sign, its words and its place on the way. */
  .sign,
  .sign-part,
  .lane-sheet,
  .lane-node::after,
  .receipt-stamp,
  .receipt-stamp::after {
    animation: none !important;
  }
  /* Files on their way: sheets standing along the line, towards the arrow. Waiting: the same
     sheets, grey, on a broken line. */
  .lane[data-flow="on"] .lane-sheet,
  .lane[data-flow="held"] .lane-sheet {
    opacity: 1;
  }
  .lane-sheet {
    transform: translateX(calc((100% - 20px) * (var(--lane-place, 0) + 0.08)));
  }
  /* The end that is at work: a bar across its foot, not one that sweeps. */
  .lane-node[data-busy]::after {
    width: 100%;
  }
  /* The stamp is there as soon as the run ends: nothing lands. */
  .receipt-stamp.waiting {
    opacity: 1;
  }
}

.unread {
  margin-top: 0.25rem;
  font-size: 0.875rem;
}
.unread summary {
  cursor: pointer;
}
.unread ul {
  margin: 0.25rem 0;
  padding-left: 1.25rem;
}
.unread p {
  margin: 0.25rem 0 0;
}