@layer components {
  /* ---------- Status families ---------- */
  .fam-amber {
    --fam-fg: var(--amber-fg);
    --fam-tint: var(--amber-tint);
  }
  .fam-blue {
    --fam-fg: var(--blue-fg);
    --fam-tint: var(--blue-tint);
  }
  .fam-teal {
    --fam-fg: var(--teal-fg);
    --fam-tint: var(--teal-tint);
  }
  .fam-green {
    --fam-fg: var(--green-fg);
    --fam-tint: var(--green-tint);
  }
  .fam-red {
    --fam-fg: var(--red-fg);
    --fam-tint: var(--red-tint);
  }
  .fam-grey {
    --fam-fg: var(--grey-fg);
    --fam-tint: var(--grey-tint);
  }

  .glyph {
    flex: none;
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;

    & .glyph__solid {
      fill: currentColor;
      stroke: none;
    }

    & .glyph__knockout {
      stroke: var(--surface);
      stroke-width: 1.8;
    }
  }

  .glyph--16 {
    width: 16px;
    height: 16px;
  }

  .glyph--18 {
    width: 18px;
    height: 18px;
  }

  .icon {
    flex: none;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* ---------- Buttons: only Primary is violet, one per view ---------- */
  .btn {
    --btn-bg: var(--surface);
    --btn-fg: var(--accent-text);
    --btn-border: var(--line-strong);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--target-panel);
    padding: 7px var(--space-4);
    border: 1px solid var(--btn-border);
    border-radius: var(--radius-control);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font: var(--type-interface);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition:
      background-color 120ms ease-out,
      border-color 120ms ease-out,
      color 120ms ease-out;

    &:hover {
      text-decoration: none;
    }

    &:disabled,
    &[aria-disabled="true"] {
      --btn-bg: var(--surface-sunk);
      --btn-fg: var(--text-3);
      --btn-border: var(--line);
      cursor: not-allowed;
    }
  }

  .btn--lg {
    min-height: var(--target-public);
    padding: 11px var(--space-5);
    font: 600 16px / 20px var(--font-body);
  }

  .btn--block {
    display: flex;
    width: 100%;
  }

  .btn--primary {
    --btn-bg: var(--accent-fill);
    --btn-fg: var(--on-accent);
    --btn-border: var(--accent-fill);

    &:hover:not(:disabled),
    &:active:not(:disabled) {
      --btn-bg: var(--accent-fill-hover);
      --btn-border: var(--accent-fill-hover);
    }
  }

  .btn--ink {
    --btn-bg: var(--ink-fill);
    --btn-fg: var(--ink-label);
    --btn-border: var(--ink-fill);

    &:hover:not(:disabled) {
      --btn-bg: var(--ink-fill-hover);
      --btn-border: var(--ink-fill-hover);
    }
  }

  .btn--outline:hover:not(:disabled) {
    --btn-bg: var(--accent-tint);
    --btn-border: var(--accent-text);
  }

  .btn--text {
    --btn-bg: transparent;
    --btn-border: transparent;
    padding-inline: var(--space-1);

    &:hover:not(:disabled) {
      text-decoration: underline;
      text-underline-offset: 0.18em;
    }
  }

  .btn--destructive {
    --btn-fg: var(--red-fg);
    --btn-border: var(--red-fg);

    &:hover:not(:disabled) {
      --btn-bg: var(--red-tint);
    }
  }

  .btn--on-band {
    --btn-bg: var(--brand-violet);
    --btn-fg: var(--band-text);
    --btn-border: var(--brand-violet);

    &:hover:not(:disabled) {
      --btn-bg: var(--accent-fill-hover);
      --btn-border: var(--accent-fill-hover);
    }
  }

  .btn--band-secondary {
    --btn-bg: transparent;
    --btn-fg: var(--band-text);
    --btn-border: var(--band-text);

    &:hover:not(:disabled) {
      --btn-bg: rgb(255 255 255 / 8%);
    }
  }

  .btn--band-text {
    --btn-bg: transparent;
    --btn-fg: var(--band-text);
    --btn-border: transparent;
    padding-inline: 0;
    text-decoration: underline;
    text-underline-offset: 0.18em;
  }

  .band :focus-visible {
    outline-color: var(--band-text);
  }

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

  /* ---------- Form fields ---------- */
  .field {
    display: grid;
    gap: 6px;
    min-width: 0;
  }

  .field__label {
    font: var(--type-label);
    color: var(--text-1);
  }

  .field__optional {
    font-weight: 500;
    color: var(--text-3);
  }

  .field__hint {
    font: var(--type-micro);
    color: var(--text-3);
  }

  .field__error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font: var(--type-micro);
    color: var(--red-fg);

    & .glyph {
      margin-top: 1px;
    }
  }

  .input,
  .select,
  .textarea {
    display: block;
    width: 100%;
    min-height: var(--target-public);
    padding: 0 var(--space-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--text-1);
    font: var(--type-body);
    transition:
      border-color 120ms ease-out,
      box-shadow 120ms ease-out;

    &::placeholder {
      color: var(--text-3);
      opacity: 1;
    }

    &:focus-visible {
      outline: none;
      border-color: var(--accent-text);
      box-shadow: 0 0 0 1px var(--accent-text);
    }

    &:disabled,
    &[readonly] {
      background: var(--surface-sunk);
      border-color: var(--line);
      color: var(--text-2);
    }

    &[aria-invalid="true"] {
      border-color: var(--red-fg);
      box-shadow: 0 0 0 1px var(--red-fg);
    }
  }

  .textarea {
    min-height: 120px;
    padding: 10px var(--space-3);
    resize: vertical;
  }

  .select {
    appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5170' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
  }

  .input--compact,
  .select--compact {
    min-height: var(--target-panel);
    font: var(--type-interface);
  }

  .check {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    font: var(--type-interface);
    color: var(--text-1);
    cursor: pointer;

    & input {
      flex: none;
      width: 20px;
      height: 20px;
      margin: 0;
      accent-color: var(--accent-text);
    }
  }

  .phone {
    display: grid;
    grid-template-columns: minmax(112px, 136px) 1fr;

    & .select {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    & .input {
      margin-left: -1px;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    & .select:focus-visible,
    & .input:focus-visible {
      position: relative;
      z-index: 1;
    }
  }

  .file-input {
    width: 100%;
    padding: var(--space-3);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--text-2);
    font: var(--type-interface);

    &::file-selector-button {
      margin-right: var(--space-3);
      min-height: var(--target-panel);
      padding: 7px var(--space-4);
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-control);
      background: var(--surface);
      color: var(--accent-text);
      font: var(--type-interface);
      font-weight: 600;
      cursor: pointer;
    }

    &:hover::file-selector-button {
      background: var(--accent-tint);
      border-color: var(--accent-text);
    }

    &:focus-visible {
      outline: 2px solid var(--accent-text);
      outline-offset: 2px;
    }

    &[aria-invalid="true"] {
      border: 2px solid var(--red-fg);
    }
  }

  /* Invisible to people and to screen readers; bots that fill every field trip it. */
  .honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  .error-summary {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--red-fg);
    border-radius: var(--radius-card);
    background: var(--surface);

    &:focus-visible {
      outline-offset: 3px;
    }

    & h2 {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      font: var(--type-subsection);
      font-size: 16px;
      color: var(--red-fg);
    }

    & ul {
      display: grid;
      gap: var(--space-1);
      padding-left: 26px;
      font: var(--type-interface);
    }
  }

  /* ---------- Access / Four-digit code field: one input drawn as four boxes ---------- */
  .code-field {
    display: grid;
    gap: var(--space-2);
  }

  .code-field__control {
    --code-gap: 12px;
    --code-box: calc((100cqw - 3 * var(--code-gap)) / 4);
    position: relative;
    container-type: inline-size;
    height: 56px;
  }

  .code-field__boxes {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--code-gap);
    pointer-events: none;
  }

  .code-field__box {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-control);
    background: var(--surface);
    transition:
      border-color 120ms ease-out,
      box-shadow 120ms ease-out;
  }

  .code-field__clip {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: var(--radius-control);
  }

  .code-field__input {
    position: relative;
    display: block;
    width: calc(100% + var(--code-box) + var(--code-gap));
    height: 56px;
    margin: 0;
    padding: 0 0 0 calc((var(--code-box) - 1ch) / 2);
    border: 0;
    background: transparent;
    color: var(--text-1);
    font: 500 24px / 32px var(--font-mono);
    letter-spacing: calc(var(--code-box) + var(--code-gap) - 1ch);
    caret-color: var(--accent-text);
    outline: none;

    &:-webkit-autofill {
      -webkit-text-fill-color: var(--text-1);
      transition: background-color 600000s 0s;
    }
  }

  .code-field__control:focus-within .code-field__box {
    border-color: var(--accent-text);
    box-shadow: 0 0 0 1px var(--accent-text);
  }

  .code-field--invalid .code-field__box {
    border-color: var(--red-fg);
    box-shadow: 0 0 0 1px var(--red-fg);
  }

  .code-field__input:disabled {
    color: var(--text-3);
    cursor: not-allowed;
  }

  .code-field__control:has(.code-field__input:disabled) .code-field__box {
    background: var(--surface-sunk);
    border-color: var(--line);
  }

  /* ---------- Status pill and route gauge ---------- */
  .pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    max-width: 100%;
    padding: 5px var(--space-3) 5px 10px;
    border-radius: var(--radius-capsule);
    background: var(--fam-tint);
    color: var(--fam-fg);
    font: var(--type-label);
    white-space: nowrap;
    vertical-align: middle;
  }

  .pill__label {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pill .gauge {
    width: 70px;
    margin-left: var(--space-1);
  }

  .gauge {
    flex: none;
    width: 97px;
    height: auto;
    overflow: visible;

    & path {
      vector-effect: non-scaling-stroke;
      stroke-width: 1;
    }

    & .gauge__seg--done {
      fill: var(--text-1);
    }

    & .gauge__seg--current {
      fill: var(--fam-fg, var(--accent-fill));
    }

    & .gauge__seg--future {
      fill: none;
      stroke: var(--line-strong);
    }

    & .gauge__seg--closed {
      fill: none;
      stroke: var(--line-strong);
      stroke-dasharray: 2 2;
    }
  }

  .pill .gauge .gauge__seg--future {
    stroke: var(--fam-fg);
  }

  /* ---------- Full route: the current stop is the violet slanted marker ---------- */
  .route {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .route__stop {
    position: relative;
    display: grid;
    grid-template-columns: 16px 1fr;
    gap: 14px;
    padding-bottom: var(--space-5);

    &:not(:last-child)::before {
      content: "";
      position: absolute;
      top: 24px;
      bottom: 4px;
      left: 7px;
      width: 2px;
      border-radius: 1px;
      background: var(--line);
    }

    &:last-child {
      padding-bottom: 0;
    }
  }

  .route__marker {
    display: flex;
    justify-content: center;
    padding-top: 1px;

    & svg {
      width: 12px;
      height: 18px;
      overflow: visible;
    }

    & path {
      fill: var(--surface);
      stroke: var(--line-strong);
      stroke-width: 1.25;
      stroke-linejoin: round;
    }
  }

  .route__text {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .route__label {
    font: var(--type-interface);
    font-weight: 600;
    color: var(--text-1);
  }

  .route__meta {
    font: var(--type-micro);
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
  }

  .route__here {
    font: var(--type-micro);
    font-weight: 600;
    color: var(--accent-text);
  }

  .route__note {
    margin-top: var(--space-1);
    font: var(--type-interface);
    font-weight: 400;
    color: var(--text-2);
  }

  .route__new {
    justify-self: start;
    margin-top: var(--space-1);
    padding: 2px var(--space-2);
    border-radius: var(--radius-capsule);
    background: var(--accent-tint);
    color: var(--accent-text);
    font: var(--type-micro);
    font-weight: 600;
  }

  .route__stop--done {
    &:not(:last-child)::before {
      background: var(--text-1);
    }

    & .route__marker path {
      fill: var(--text-1);
      stroke: var(--text-1);
    }
  }

  .route__stop--current {
    & .route__marker svg {
      width: 14px;
      height: 20px;
    }

    & .route__marker path {
      fill: var(--accent-fill);
      stroke: var(--accent-fill);
    }

    &[data-arrived] .route__marker svg {
      animation: marker-arrive var(--step-duration) var(--ease-out);
    }
  }

  .route__stop--future .route__label {
    font-weight: 500;
    color: var(--text-2);
  }

  .route__stop--skipped {
    & .route__marker path {
      fill: none;
      stroke-dasharray: 2.5 2;
    }

    & .route__label {
      font-weight: 500;
      color: var(--text-3);
    }
  }

  @keyframes marker-arrive {
    from {
      transform: translateY(-28px);
      opacity: 0.4;
    }
  }

  /* ---------- Flash strip and the in-place status line ---------- */
  .flash {
    --flash-bg: var(--surface-sunk);
    --flash-glyph: var(--text-1);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-control);
    background: var(--flash-bg);
    color: var(--text-1);
    font: var(--type-interface);

    & .glyph {
      margin-top: 1px;
      color: var(--flash-glyph);
    }
  }

  .flash--success {
    --flash-bg: var(--green-tint);
    --flash-glyph: var(--green-fg);
  }

  .flash--warning {
    --flash-bg: var(--amber-tint);
    --flash-glyph: var(--amber-fg);
  }

  .flash--error {
    --flash-bg: var(--red-tint);
    --flash-glyph: var(--red-fg);
  }

  .flashes {
    display: grid;
    gap: var(--space-2);
  }

  /* ---------- Page heads, cards, wells, empty states ---------- */
  .page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
  }

  .page-head__title {
    font: var(--type-panel-title);
  }

  .page-head__intro {
    margin-top: var(--space-1);
    font: var(--type-interface);
    font-weight: 400;
    color: var(--text-2);
  }

  .card {
    display: grid;
    align-content: start;
    gap: var(--space-4);
    min-width: 0;
    padding: var(--space-6);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface);
  }

  .card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-3);
  }

  .card__title {
    font: var(--type-subsection);
  }

  .card__intro {
    font: var(--type-interface);
    font-weight: 400;
    color: var(--text-2);
  }

  .well {
    padding: var(--space-4);
    border-radius: var(--radius-card);
    background: var(--surface-sunk);
  }

  .raised {
    border: 1px solid var(--line);
    border-radius: var(--radius-dialog);
    background: var(--surface-raised);
    box-shadow: var(--shadow-raised);
  }

  .empty {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    padding: var(--space-12) var(--space-8);
    border-radius: var(--radius-card);
    background: var(--wash);
    text-align: center;
  }

  .empty__title {
    font: var(--type-subsection);
  }

  .empty__body {
    max-width: 52ch;
    font: var(--type-interface);
    font-weight: 400;
    color: var(--text-2);
  }

  .empty .btn {
    margin-top: var(--space-3);
  }

  /* ---------- Pagination ---------- */
  .pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding-top: var(--space-6);
  }

  .pagination__note {
    font: var(--type-micro);
    color: var(--text-3);
  }

  /* ---------- Tables ---------- */
  .table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface);
  }

  .table {
    width: 100%;
    font: var(--type-interface);
    font-weight: 400;
    font-variant-numeric: tabular-nums;

    & th {
      height: 48px;
      padding: 0 var(--space-3);
      background: var(--surface-sunk);
      font: var(--type-label);
      color: var(--text-2);
      text-align: left;
      white-space: nowrap;
    }

    & td {
      padding: 10px var(--space-3);
      border-top: 1px solid var(--line);
      vertical-align: top;
    }

    & tr[aria-selected="true"] td {
      background: var(--accent-tint);
    }

    & .table__num {
      text-align: right;
    }
  }

  /* ---------- Chips, badges, references, tiles ---------- */
  .chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--target-panel);
    padding: 7px 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-capsule);
    background: var(--surface);
    color: var(--text-1);
    font: var(--type-interface);
    text-decoration: none;

    &:hover {
      border-color: var(--accent-text);
      text-decoration: none;
    }

    & .icon {
      width: 14px;
      height: 14px;
    }
  }

  .chip--selected,
  .chip[aria-pressed="true"] {
    border-color: var(--accent-text);
    background: var(--accent-tint);
    color: var(--accent-text);
    font-weight: 600;
  }

  .agency-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px var(--space-2);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-note);
    background: var(--surface);
    font: var(--type-micro);
    font-weight: 600;
    color: var(--text-1);
    white-space: nowrap;
  }

  .ref {
    font: var(--type-reference);
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .ref--lg {
    font: var(--type-reference-large);
    letter-spacing: 0.04em;
  }

  .avatar {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--wash);
    color: var(--text-1);
    font: var(--type-micro);
    font-weight: 600;
  }

  .logo-tile,
  .monogram {
    display: grid;
    place-items: center;
    flex: none;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-card);
    overflow: hidden;
  }

  .logo-tile {
    padding: var(--space-2);
    border: 1px solid var(--line);
    background: var(--surface);

    & img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }

  .monogram {
    background: var(--wash);
    color: var(--text-1);
    font: 600 22px / 28px var(--font-display);
  }

  .logo {
    display: block;
    width: auto;
    height: 40px;
  }

  /* ---------- Navigation items (panel sidebar) ---------- */
  .nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 40px;
    padding: 0 var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    color: var(--text-1);
    font: var(--type-interface);
    text-decoration: none;

    & .icon {
      color: var(--text-2);
    }

    &:hover {
      background: var(--surface-sunk);
      text-decoration: none;
    }

    &[aria-current="page"] {
      border-color: var(--accent-text);
      background: var(--accent-tint);
      color: var(--accent-text);
      font-weight: 600;

      & .icon {
        color: var(--accent-text);
      }
    }
  }

  .nav-item__label {
    flex: 1;
    min-width: 0;
  }

  .nav-item__count {
    font: var(--type-micro);
    font-weight: 600;
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
  }

  /* ---------- The band material ---------- */
  .band {
    background: var(--band-background);
    color: var(--band-text);

    & a:not(.btn) {
      color: var(--band-text);
    }
  }

  .portal-tag {
    display: inline-flex;
    padding: var(--space-1) 10px;
    border: 1px solid var(--band-line);
    border-radius: var(--radius-note);
    color: var(--band-text);
    font: var(--type-micro);
    font-weight: 600;
  }

  /* ---------- Access / Desktop shell ---------- */
  .access {
    display: grid;
    grid-template-columns: 560px minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--page);
  }

  .access__band {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: var(--space-12) var(--space-14);
  }

  .access__brand {
    display: flex;
    align-items: center;
    gap: 14px;

    & .logo {
      height: 44px;
    }
  }

  .access__message {
    display: grid;
    gap: var(--space-5);
    margin-block: auto;
  }

  .access__kicker {
    font: var(--type-interface);
    font-weight: 600;
    color: var(--band-highlight);
  }

  .access__headline {
    max-width: 14ch;
    font: 600 36px / 44px var(--font-display);
    color: var(--band-text);
  }


  .access__foot {
    display: grid;
    gap: var(--space-4);
    font: 500 13px / 20px var(--font-body);
    color: var(--band-text-2);
  }

  .access__main {
    display: grid;
    place-items: center;
    padding: var(--space-12) var(--space-6);
  }

  .access__form {
    display: grid;
    gap: var(--space-6);
    width: min(440px, 100%);
  }

  .access__fields {
    display: grid;
    gap: var(--space-6);
  }

  .access__head {
    display: grid;
    gap: var(--space-2);
  }

  .access__title {
    font: 600 24px / 32px var(--font-body);
  }

  .access__intro {
    font: 400 14px / 21px var(--font-body);
    color: var(--text-2);
  }

  .access__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    font: var(--type-interface);
  }

  .access__fine {
    font: var(--type-micro);
    color: var(--text-3);
  }

  .access__facts {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface);

    & dt {
      font: var(--type-micro);
      color: var(--text-3);
    }

    & dd {
      font: var(--type-interface);
      color: var(--text-1);
      overflow-wrap: anywhere;
    }
  }

  @media (max-width: 1023px) {
    .access {
      grid-template-columns: 1fr;
      grid-template-rows: auto 1fr;
    }

    .access__band {
      gap: var(--space-4);
      padding: var(--space-6) var(--space-4);
    }

    .access__message,
    .access__foot {
      display: none;
    }

    .access__main {
      place-items: start center;
      padding: var(--space-8) var(--space-4);
    }
  }

  /* ---------- Error pages ---------- */
  .error-page {
    display: grid;
    place-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: var(--space-8) var(--space-4);
  }

  .error-page__panel {
    display: grid;
    gap: var(--space-4);
    width: min(520px, 100%);
  }

  .error-page__code {
    font: var(--type-reference);
    color: var(--text-3);
  }

  .error-page__title {
    font: var(--type-page-title);
  }

  .error-page__body {
    font: var(--type-body);
    color: var(--text-2);
  }

  .error-page .logo {
    height: 36px;
    margin-bottom: var(--space-6);
  }
}