@layer pages {
  .breadcrumb {
    margin-block-end: var(--space-4);
  }

  .back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: var(--touch-target);
    padding-inline: var(--space-2);
    margin-inline-start: calc(var(--space-2) * -1);
    border-radius: var(--radius-md);
    color: var(--slate-700);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
  }

  .back-link:hover {
    background: var(--slate-100);
    color: var(--slate-900);
  }

  /* Identity header */
  .identity {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
  }

  .identity::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 4px;
    background: var(--type-fg, var(--slate-300));
  }

  .identity__main {
    display: grid;
    gap: var(--space-2);
    min-inline-size: 0;
    flex: 1 1 22rem;
  }

  .identity__title {
    color: var(--color-heading);
    font-size: clamp(var(--text-xl), 1.6vw + 0.9rem, var(--text-2xl));
    overflow-wrap: anywhere;
  }

  .identity__summary {
    color: var(--color-text-muted);
  }

  .identity__ids {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    margin-block-start: var(--space-1);
  }

  .identity__ids > div {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
  }

  .identity__ids dt {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .identity__ids dd {
    color: var(--slate-900);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: 500;
    direction: ltr;
    unicode-bidi: isolate;
  }

  .identity__status {
    display: grid;
    justify-items: end;
    gap: var(--space-2);
  }

  /* Compact bar that keeps identity and status visible while scrolling */
  .identity-bar {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 25;
    display: flex;
    align-items: center;
    min-block-size: var(--identity-bar-height);
    border-block-end: 1px solid var(--color-border);
    background: var(--color-surface-translucent);
    backdrop-filter: saturate(1.4) blur(8px);
    box-shadow: var(--shadow-md);
    transform: translateY(-110%);
    transition: transform var(--duration-slow) var(--ease-out);
  }

  .identity-bar--visible {
    transform: translateY(0);
  }

  .identity-bar__inner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    inline-size: 100%;
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .identity-bar__title {
    flex: 1;
    min-inline-size: 0;
    overflow: hidden;
    color: var(--color-heading);
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .identity-bar__id {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    direction: ltr;
    unicode-bidi: isolate;
  }

  /* Workspace grid */
  .details {
    display: grid;
    gap: var(--space-5);
  }

  .details__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22.5rem;
    grid-template-areas: "main side";
    gap: var(--space-5);
    align-items: start;
  }

  /* One column that may be narrower than its content. With the default auto track, a wide tab panel
     (the history table) widened the column and ran under the side panels instead of scrolling. */
  .details__main {
    grid-area: main;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    min-inline-size: 0;
  }

  .details__side {
    grid-area: side;
    display: grid;
    gap: var(--space-4);
  }

  @media (min-width: 1024px) and (min-height: 700px) {
    .details__side {
      position: sticky;
      inset-block-start: calc(var(--identity-bar-height) + var(--space-4));
    }
  }

  .info-list {
    display: grid;
    gap: var(--space-3);
  }

  .info-list > div {
    display: grid;
    grid-template-columns: minmax(7.5rem, 40%) 1fr;
    gap: var(--space-3);
    padding-block-end: var(--space-3);
    border-block-end: 1px solid var(--slate-150);
  }

  .info-list > div:last-child {
    border-block-end: 0;
    padding-block-end: 0;
  }

  .info-list dt {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .info-list dd {
    color: var(--slate-900);
    font-size: var(--text-sm);
    font-weight: 600;
    overflow-wrap: anywhere;
  }

  .info-panel__time-zone {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    margin-block-start: var(--space-4);
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
  }

  .info-panel__time-zone .icon {
    inline-size: 0.95rem;
    block-size: 0.95rem;
  }

  .info-list__remarks {
    grid-template-columns: 1fr !important;
    gap: var(--space-2) !important;
  }

  .info-list__remarks dd {
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--blue-50);
    font-weight: 500;
    white-space: pre-line;
  }

  .info-sub {
    display: block;
    color: var(--color-text-subtle);
    font-weight: 500;
    font-size: var(--text-xs);
  }

  .term-help {
    display: inline-flex;
    vertical-align: middle;
    margin-inline-start: var(--space-1);
    inline-size: 1.75rem;
    block-size: 1.75rem;
  }

  .term-help .icon {
    inline-size: 1rem;
    block-size: 1rem;
  }

  .term-help__text {
    grid-column: 1 / -1;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--slate-50);
    color: var(--slate-700);
    font-size: var(--text-sm);
  }

  /* Decision area (outside the voucher document) */
  .decision-panel {
    border-color: var(--color-decision-border);
  }

  .decision-panel__intro {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .decision-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    margin-block-start: var(--space-4);
  }

  .decision-note {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    margin-block-start: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .decision-note .icon {
    margin-block-start: 0.15em;
  }

  .decision-result {
    display: grid;
    gap: var(--space-3);
    justify-items: start;
  }

  .decision-result__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-md);
  }

  .decision-result__title:focus {
    outline: none;
  }

  .decision-result--approved .decision-result__title {
    color: var(--green-700);
  }

  .decision-result--rejected .decision-result__title {
    color: var(--red-800);
  }

  .decision-result__meta {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  /* Voucher viewer */
  .viewer {
    display: grid;
    gap: var(--space-3);
  }

  /*
   * The document is cross-origin to this page, so the portal cannot measure it. The stage is a
   * constrained container (SRS 9) and the document scrolls inside it, keeping its own controls
   * reachable at the top of the frame.
   */
  .viewer__stage {
    position: relative;
    min-block-size: 24rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-viewer-stage);
    overflow: hidden;
  }

  .viewer__frame {
    display: block;
    inline-size: 100%;
    block-size: min(80vh, 46rem);
    border: 0;
    background: transparent;
  }

  .viewer__frame--loading {
    visibility: hidden;
  }

  .viewer__loading {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: start;
    gap: var(--space-4);
    padding: var(--space-6);
    background: var(--color-surface);
  }

  .viewer__loading-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .viewer__state {
    padding: var(--space-5);
  }

  .viewer__state .state {
    border: 0;
  }

  .viewer__note {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
  }

  .viewer__note .icon {
    inline-size: 1rem;
    block-size: 1rem;
  }

  /*
   * History is laid out for the width it actually has beside the side panels, not for the viewport:
   * the table where its eight columns fit, the timeline where they would not. Column widths come from
   * the content; the table's own container scrolls if a value is wider than anything planned for.
   */
  .history {
    container: history / inline-size;
  }

  .history-table-wrap {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  .history-table-wrap:focus-visible {
    outline-offset: 2px;
  }

  .history-table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
  }

  .history-table th,
  .history-table td {
    padding: var(--space-3) 0.625rem;
  }

  .history-table :is(th, td):first-child {
    padding-inline-start: var(--space-4);
  }

  .history-table :is(th, td):last-child {
    padding-inline-end: var(--space-4);
  }

  /* Headings may wrap between words; they sit on the bottom line so the columns still read across. */
  .history-table th {
    background: var(--color-surface-muted);
    border-block-end: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: 650;
    text-align: start;
    vertical-align: bottom;
  }

  .history-table td {
    border-block-end: 1px solid var(--slate-150);
    vertical-align: top;
  }

  .history-table tr:last-child td {
    border-block-end: 0;
  }

  /* Date and time each stay whole, so a narrow column puts the time under the date; a duration (at
     most two units) never splits a number from its unit. */
  .history-when > span,
  .history-duration,
  .history-table .history-user__you {
    white-space: nowrap;
  }

  .history-table__current {
    background: var(--blue-50);
  }

  .history-user {
    display: grid;
    gap: 0.15rem;
    font-weight: 600;
  }

  .history-user__you {
    color: var(--blue-700);
    font-size: var(--text-xs);
    font-weight: 600;
  }

  .history-table .history-user > .ltr-value {
    overflow-wrap: break-word;
  }

  /* Remarks wrap, but never into a column too narrow to read. */
  .history-remark {
    display: block;
    min-inline-size: 7rem;
    max-inline-size: 22rem;
    color: var(--slate-800);
    white-space: pre-line;
    overflow-wrap: break-word;
  }

  .history-empty {
    color: var(--color-text-subtle);
  }

  /* The timeline is the narrow layout: its tracks may be narrower than their content, and a value
     longer than the whole width (an unbroken user name or reference) wraps rather than widening it. */
  .timeline {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .timeline__item {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
    padding-block: 0 var(--space-5);
    padding-inline-start: var(--space-7);
  }

  .timeline__item::before {
    content: "";
    position: absolute;
    inset-block: 1.4rem 0;
    inset-inline-start: 0.7rem;
    inline-size: 2px;
    background: var(--slate-200);
  }

  .timeline__item:last-child::before {
    display: none;
  }

  .timeline__dot {
    position: absolute;
    inset-block-start: 0.15rem;
    inset-inline-start: 0;
    display: grid;
    place-items: center;
    inline-size: 1.45rem;
    block-size: 1.45rem;
    border-radius: 50%;
    background: var(--slate-100);
    color: var(--slate-600);
  }

  .timeline__dot .icon {
    inline-size: 0.85rem;
    block-size: 0.85rem;
  }

  .timeline__dot--approved {
    background: var(--green-100);
    color: var(--green-700);
  }

  .timeline__dot--rejected {
    background: var(--red-100);
    color: var(--red-700);
  }

  .timeline__dot--pending {
    background: var(--blue-100);
    color: var(--blue-700);
  }

  .timeline__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }

  .timeline__user {
    min-inline-size: 0;
    font-weight: 650;
    overflow-wrap: anywhere;
  }

  .timeline__meta {
    display: grid;
    gap: 0.15rem;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .timeline__remark {
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--slate-50);
    font-size: var(--text-sm);
    white-space: pre-line;
    overflow-wrap: anywhere;
  }

  .timeline__remark-label {
    display: block;
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
    font-weight: 600;
  }

  .history-order-note {
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
    margin-block-end: var(--space-3);
  }

  .history-timeline-host {
    display: none;
  }

  /* 50rem is the narrowest the eight columns go with typical values (IDs, badges and dates whole). */
  @container history (inline-size < 50rem) {
    .history-table-host {
      display: none;
    }

    .history-timeline-host {
      display: block;
    }
  }

  @media (max-width: 1023px) {
    .details__layout {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas:
        "info"
        "main"
        "decision";
    }

    .details__side {
      display: contents;
    }

    .info-panel {
      grid-area: info;
    }

    .decision-panel {
      grid-area: decision;
    }

    .viewer__frame {
      block-size: min(75vh, 34rem);
    }
  }

  /* Sticky decision bar on narrow screens, only when the viewport is tall enough (zoom safe) */
  @media (max-width: 1023px) and (min-height: 500px) {
    html:has(.decision-panel--active) {
      scroll-padding-block-end: 6rem;
    }

    .decision-panel--active {
      position: sticky;
      inset-block-end: 0;
      z-index: 20;
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
      margin-inline: calc(var(--gutter) * -1);
      border-inline: 0;
      border-block-end: 0;
      box-shadow: 0 -8px 24px -12px var(--color-shadow-strong);
    }

    .decision-panel--active .panel__body {
      padding-block: var(--space-3);
    }

    .decision-panel--active .decision-panel__intro,
    .decision-panel--active .panel__header {
      display: none;
    }

    .decision-panel--active .decision-actions {
      margin-block-start: 0;
    }
  }

  @media (max-width: 599px) {
    .identity {
      padding: var(--space-4);
      border-radius: var(--radius-lg);
    }

    .identity__status {
      justify-items: start;
    }

    .info-list > div {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .viewer__frame {
      block-size: min(70vh, 28rem);
    }
  }
}