/* Page layouts. Operator: one column, thumb zone at the bottom. Manager: rail + three columns,
   exceptions first in reading order (brief 5). */
@layer layouts {
  /* ------------------------------------------------------------------ operator */
  .page-op {
    --op-width: 32rem;
    --dock-h: 8.25rem; /* primary 56 + gap 8 + nav 52 + padding */
  }

  .op__main {
    max-inline-size: var(--op-width);
    margin-inline: auto;
    padding-inline: var(--s-4);
    padding-block-end: calc(var(--dock-h) + var(--s-6));
  }

  /* While the undo toast is up it must not cover the last row. */
  .op__main.has-toast {
    padding-block-end: calc(var(--dock-h) + 7rem);
  }

  .op-top {
    max-inline-size: var(--op-width);
    margin-inline: auto;
  }

  .op-section {
    display: grid;
    gap: var(--s-3);
    padding-block: var(--s-4);
    border-block-start: 1px solid var(--line);
  }

  .op-section__title {
    font-size: var(--fs-20);
  }

  .op-section__note {
    color: var(--ink-2);
  }

  @media (min-width: 48rem) {
    .page-op {
      background: var(--surface-1);
    }

    .op {
      max-inline-size: var(--op-width);
      min-block-size: 100dvh;
      margin-inline: auto;
      border-inline: 1px solid var(--line);
      background: var(--bg);
    }

    .dock {
      border-inline: 1px solid var(--line);
    }
  }

  /* An operator on a laptop: «الان» and the night on the start side, the queue beside it. */
  @media (min-width: 64rem) {
    .page-op {
      --op-width: 62rem;
    }

    .op__cols {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 0 var(--s-6);
      align-items: start;
    }

    .op__side .op-section:first-child {
      border-block-start: 0;
      padding-block-start: var(--s-5);
    }

    .dock {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      align-items: center;
      gap: var(--s-6);
      padding-inline: var(--s-4);
    }

    /* No primary on this page (account, nothing to do): the nav keeps its usual place. */
    .dock > .bnav:only-child {
      grid-column: 2;
    }
  }

  /* ------------------------------------------------------------- control room */
  .cr {
    display: grid;
    grid-template-columns: 13.5rem minmax(0, 1fr);
    min-block-size: 100dvh;
  }

  .cr__body {
    display: grid;
    grid-template-rows: auto 1fr;
    min-inline-size: 0;
  }

  .cr__cols {
    display: grid;
    grid-template-columns: 25rem minmax(0, 1fr) 17rem;
    align-items: start;
  }

  .xcol,
  .mcol,
  .pcol {
    min-inline-size: 0;
    padding: var(--s-5);
  }

  .xcol {
    align-self: stretch;
    border-inline-end: 1px solid var(--line);
    background: var(--surface-1);
  }

  .pcol {
    align-self: stretch;
    border-inline-start: 1px solid var(--line);
  }

  @media (max-width: 85rem) {
    .cr__cols {
      grid-template-columns: 22rem minmax(0, 1fr);
    }

    .pcol {
      grid-column: 1 / -1;
      border-inline-start: 0;
      border-block-start: 1px solid var(--line);
    }
  }

  /* Phone: exceptions first, then a simplified match list (mini strip + counts); the rail becomes a
     labelled bottom bar (brief 9B). */
  @media (max-width: 47.99rem) {
    .cr {
      grid-template-columns: minmax(0, 1fr);
      padding-block-end: 4.5rem;
    }

    .rail {
      position: fixed;
      inset-inline: 0;
      inset-block-end: 0;
      z-index: var(--z-dock);
      flex-direction: row;
      padding: 0 0 env(safe-area-inset-bottom, 0);
      border-inline-end: 0;
      border-block-start: 1px solid var(--line);
    }

    .rail__brand,
    .rail__user {
      display: none;
    }

    /* Phones: the rail is a bottom bar, so the user block sits at the end of the page. */
    .cr-user {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--s-4);
      border-block-start: 1px solid var(--line);
    }

    .rail__list {
      grid-template-columns: repeat(5, minmax(0, 1fr));
      inline-size: 100%;
    }

    .rail__item {
      flex-direction: column;
      justify-content: center;
      gap: 2px;
      min-block-size: 3.75rem;
      padding: var(--s-1) 2px;
      border-radius: 0;
      font-size: var(--fs-12);
      line-height: 1.25;
      text-align: center;
    }

    .pcol,
    .cr-top__when span,
    .mcol__select,
    .mgroup {
      display: none;
    }

    .cr-top {
      flex-wrap: wrap;
      gap: var(--s-2);
      padding: var(--s-2) var(--s-4);
    }

    .cr-top__mark {
      display: block;
    }

    .cr-top__title {
      font-size: var(--fs-18);
    }

    .cr-top__end {
      flex-basis: 100%;
      margin-inline-start: 0;
    }

    .cr-top__end .seg {
      margin-inline-start: auto;
    }

    .cr__cols {
      grid-template-columns: minmax(0, 1fr);
    }

    .xcol,
    .mcol {
      padding: var(--s-4);
    }

    .xcol {
      border-inline-end: 0;
      border-block-end: 1px solid var(--line);
    }

    /* one-tap actions on a phone: full touch targets */
    .xrow__actions .btn {
      min-block-size: var(--target);
    }

    .mrow__head {
      grid-template-columns: 1.5rem minmax(0, 1fr);
    }

    .mrow__end {
      grid-column: 2;
      justify-content: start;
    }

    .mrow .strip {
      display: none;
    }

    .mrow__mobile {
      display: flex;
      padding-inline-start: 2.25rem;
    }

    .mrow__mobile .mini {
      inline-size: 100%;
    }

    .proto-bar {
      flex-wrap: nowrap;
    }

    .proto-bar__label {
      display: none;
    }
  }

  @media (max-width: 47.99rem) {
    .proto-bar .seg {
      flex-wrap: nowrap;
      max-inline-size: 100%;
      overflow-x: auto;
    }
  }

  /* --------------------------------------------------------------- placeholder */
  .placeholder {
    max-inline-size: 40rem;
    margin-inline: auto;
    padding: var(--s-7) var(--s-4);
  }

  .placeholder h1 {
    margin-block: var(--s-4) var(--s-2);
    font-size: var(--fs-24);
  }

  .placeholder p {
    color: var(--ink-2);
  }
}