/* Components. Tokens only (no raw colors), logical properties only. docs/DESIGN.md has the spec. */
@layer components {
  /* ------------------------------------------------------------------ icons */
  .icon {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

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

  /* Directional glyphs mirror in RTL. */
  :dir(rtl) .icon--flip {
    transform: scaleX(-1);
  }

  .mark {
    inline-size: 1.75rem;
    block-size: 1.75rem;
    flex: none;
  }

  .mark--lg {
    inline-size: 4rem;
    block-size: 4rem;
  }

  /* ---------------------------------------------------------------- buttons */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-block-size: var(--tap-control);
    padding-inline: var(--s-4);
    border: 1px solid transparent;
    border-radius: var(--r-control);
    background: transparent;
    color: var(--ink);
    font-size: var(--fs-14);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition:
      background-color var(--dur) var(--ease),
      border-color var(--dur) var(--ease),
      color var(--dur) var(--ease),
      transform var(--dur-fast) var(--ease);
  }

  .btn:active:not(:disabled),
  .btn.is-active {
    transform: scale(0.97);
  }

  .btn:disabled,
  .btn[aria-disabled="true"] {
    opacity: 0.45;
  }

  .btn.is-loading {
    cursor: progress;
  }

  .btn--primary {
    background: var(--blue-fill);
    color: var(--ink-on-blue);
  }

  .btn--secondary {
    border-color: var(--line-strong);
  }

  .btn--quiet {
    color: var(--ink-2);
    font-weight: 400;
  }

  /* Secondary actions in a dense row: text only, underlined like a link. */
  .btn--link {
    min-block-size: 2rem;
    padding-inline: var(--s-2);
    color: var(--blue);
    font-weight: 400;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
  }

  /* Something needs this person (brief 3): orange edge, never an orange fill. */
  .btn--attention {
    border-color: var(--orange);
    color: var(--ink);
  }

  @media (hover: hover) and (pointer: fine) {
    .btn--primary:hover:not(:disabled) {
      background: var(--blue-fill-hover);
    }

    .btn--secondary:hover:not(:disabled),
    .btn--quiet:hover:not(:disabled),
    .btn--attention:hover:not(:disabled) {
      background: var(--surface-3);
      color: var(--ink);
    }
  }

  .btn--primary.is-hover {
    background: var(--blue-fill-hover);
  }

  .btn--secondary.is-hover,
  .btn--quiet.is-hover,
  .btn--attention.is-hover {
    background: var(--surface-3);
    color: var(--ink);
  }

  .btn.is-focus {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }

  .btn--sm {
    min-block-size: 2rem;
    padding-inline: var(--s-3);
    font-size: var(--fs-13);
  }

  .btn--touch {
    min-block-size: var(--target);
    font-size: var(--fs-16);
  }

  .btn--lg {
    min-block-size: 3.5rem;
    font-size: var(--fs-18);
  }

  .btn--block {
    inline-size: 100%;
  }

  .icon-btn {
    position: relative;
    display: inline-grid;
    place-items: center;
    inline-size: var(--target);
    block-size: var(--target);
    padding: 0;
    border: 0;
    border-radius: var(--r-control);
    background: transparent;
    color: var(--ink-2);
    transition: background-color var(--dur) var(--ease);
  }

  .icon-btn--sm {
    inline-size: 2rem;
    block-size: 2rem;
  }

  @media (hover: hover) and (pointer: fine) {
    .icon-btn:hover {
      background: var(--surface-3);
      color: var(--ink);
    }
  }

  /* ------------------------------------------------- counts, chips, segments */
  .count {
    display: inline-grid;
    place-items: center;
    min-inline-size: 1.25rem;
    block-size: 1.25rem;
    padding-inline: 0.3rem;
    border-radius: var(--r-cell);
    font-size: var(--fs-12);
    font-weight: 700;
    line-height: 1;
  }

  .count--neutral {
    background: var(--surface-3);
    color: var(--ink);
  }

  .count--attention {
    background: var(--orange);
    color: var(--ink-on-orange);
  }

  /* count sits on the bell's top-start corner, clear of the glyph */
  .bell .count {
    position: absolute;
    inset-block-start: 0.2rem;
    inset-inline-start: 0.15rem;
    min-inline-size: 1rem;
    block-size: 1rem;
    padding-inline: 0.2rem;
    font-size: 0.6875rem;
  }

  .chip {
    display: inline-block;
    padding-inline: 0.4rem;
    border: 1px solid var(--line);
    border-radius: var(--r-cell);
    color: var(--ink-2);
    font-size: var(--fs-12);
    line-height: 1.6;
  }

  .chip--strong {
    border-color: var(--line-strong);
    color: var(--ink);
  }

  .seg {
    display: inline-flex;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-control);
    overflow: hidden;
  }

  .seg__item {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    min-block-size: 2rem;
    padding-inline: var(--s-3);
    border: 0;
    border-inline-start: 1px solid var(--line);
    background: transparent;
    color: var(--ink-2);
    font-size: var(--fs-13);
    text-decoration: none;
    white-space: nowrap;
  }

  .seg__item:first-child {
    border-inline-start: 0;
  }

  .seg__item[aria-pressed="true"],
  .seg__item[aria-current] {
    background: var(--blue-wash);
    color: var(--ink);
    font-weight: 700;
  }

  .seg--icons .seg__item {
    padding-inline: var(--s-2);
  }

  .seg--sm .seg__item {
    min-block-size: 1.75rem;
    padding-inline: var(--s-2);
    font-size: var(--fs-12);
  }

  /* ----------------------------------------------------------- strip cells */
  /* The product's own object (brief 2): tiles set tight like a pitch-side board. Every state has a
     shape cue as well as a color, so the strip reads in grayscale too. */
  .cell {
    position: relative;
    display: grid;
    place-content: center;
    min-inline-size: 0;
    block-size: var(--cell-h-comfortable);
    margin: 0;
    padding: 0;
    border: 1.5px solid transparent;
    border-radius: var(--r-cell);
    background: transparent;
    color: var(--ink-2);
    font-size: var(--fs-12);
    line-height: 1.15;
    text-align: center;
    transition:
      background-color var(--dur) var(--ease),
      border-color var(--dur) var(--ease),
      box-shadow var(--dur) var(--ease);
  }

  .cell__min {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    unicode-bidi: isolate; /* «۹۰+» keeps its order next to any neighbour (D-023) */
  }

  .cell__who {
    overflow: hidden;
    max-inline-size: 100%;
    padding-inline: 1px;
    text-overflow: clip;
    white-space: nowrap;
    font-size: 0.6875rem;
  }

  /* free: no fill, dashed outline; orange when someone is needed above the focus line */
  .cell--free {
    border-style: dashed;
    border-color: var(--st-free);
  }

  .cell--free.is-above {
    border-color: var(--st-free-attention);
    color: var(--orange);
  }

  /* awaiting confirmation: solid outline with a small dot */
  .cell--awaiting {
    border-color: var(--st-awaiting);
  }

  .cell--awaiting::after {
    content: "";
    position: absolute;
    inset-block-end: 3px;
    inset-inline-end: 3px;
    inline-size: 5px;
    block-size: 5px;
    border-radius: 1px;
    background: var(--st-awaiting);
  }

  .cell--queued {
    border-color: var(--st-queued-edge);
    background: var(--st-queued);
    color: var(--st-queued-ink);
  }

  /* in progress: blue, with a thicker leading edge on the side time runs toward */
  .cell--progress {
    border-color: var(--st-progress);
    background: var(--st-progress);
    color: var(--st-progress-ink);
  }

  .cell--progress::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    inline-size: 4px;
    background: var(--st-progress-edge);
  }

  /* half-done: rust with a diagonal hatch */
  .cell--half {
    border-color: var(--st-half);
    background: repeating-linear-gradient(135deg, var(--st-half) 0 4px, var(--st-half-stripe) 4px 7px);
    color: var(--st-half-ink);
  }

  /* done: green with a corner tick on the reading-start corner */
  .cell--done {
    border-color: var(--st-done);
    background: var(--st-done);
    color: var(--st-done-ink);
  }

  .cell--done::after {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 9px;
    block-size: 9px;
    background: var(--st-done-tick);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
  }

  :dir(ltr) .cell--done::after {
    clip-path: polygon(0 0, 100% 0, 0 100%);
  }

  /* problem / blocked: red outline with a notch mark on the top edge */
  .cell--problem {
    border-width: 2px;
    border-color: var(--st-problem);
    color: var(--ink);
  }

  .cell--problem::after {
    content: "";
    position: absolute;
    inset-block-start: -2px;
    inset-inline: 0;
    margin-inline: auto;
    inline-size: 10px;
    block-size: 6px;
    background: var(--st-problem);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
  }

  /* suspended: grey with a horizontal hatch */
  .cell--suspended {
    border-color: var(--st-suspended);
    background: repeating-linear-gradient(180deg, var(--st-suspended) 0 3px, var(--st-suspended-stripe) 3px 6px);
    color: var(--st-suspended-ink);
  }

  /* the operator's own cell; the manager's selection */
  .cell.is-mine {
    box-shadow:
      0 0 0 2px var(--bg),
      0 0 0 4px var(--ink);
  }

  .cell.is-open {
    box-shadow:
      0 0 0 2px var(--bg),
      0 0 0 4px var(--focus);
  }

  .cell.is-selected {
    box-shadow:
      0 0 0 2px var(--bg),
      0 0 0 4px var(--blue);
  }

  button.cell {
    cursor: pointer;
  }

  @media (hover: hover) and (pointer: fine) {
    button.cell:hover {
      box-shadow:
        0 0 0 2px var(--bg),
        0 0 0 3px var(--line-strong);
    }

    button.cell.is-selected:hover {
      box-shadow:
        0 0 0 2px var(--bg),
        0 0 0 4px var(--blue);
    }
  }

  /* One short confirmation when a segment is finished (brief 6). */
  .cell.is-just-done::after {
    animation: tick-in 180ms var(--ease) both;
  }

  @keyframes tick-in {
    from {
      transform: scale(0.4);
      opacity: 0;
    }
  }

  /* ----------------------------------------------------------------- strips */
  .strip {
    display: grid;
    gap: var(--s-2);
  }

  .strip__half {
    display: grid;
    grid-template-columns: 3.75rem minmax(0, 1fr);
    align-items: center;
    gap: var(--s-2);
  }

  .strip__label {
    color: var(--ink-3);
    font-size: var(--fs-12);
  }

  .strip__cells {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--cell-gap);
  }

  .strip--compact {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-3);
  }

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

  .strip--compact .strip__label {
    position: absolute;
    clip-path: inset(50%);
  }

  .strip--compact .cell {
    block-size: var(--cell-h-compact);
    border-width: 1px;
  }

  .strip--compact .cell--done::after {
    inline-size: 6px;
    block-size: 6px;
  }

  .strip--compact .cell--progress::before {
    inline-size: 3px;
  }

  .strip--compact .cell--awaiting::after {
    inset-block-end: 2px;
    inset-inline-end: 2px;
    inline-size: 4px;
    block-size: 4px;
  }

  /* The operator's «الان» strip has no half label: the segment line above says which half. */
  .strip--now .strip__half {
    grid-template-columns: minmax(0, 1fr);
  }

  .strip--now .strip__label {
    position: absolute;
    clip-path: inset(50%);
  }

  /* mini strip: progress indicator on a row */
  .mini {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 1px;
    inline-size: min(100%, 16rem);
  }

  .cell--plain {
    border-color: var(--line);
  }

  /* At mini scale the tick cannot render: the edge carries "done" at 3:1 against the ground. */
  .mini .cell--done {
    border-color: var(--st-done-tick);
  }

  .mini .cell {
    block-size: var(--cell-h-mini);
    border-width: 1px;
    border-radius: 1px;
  }

  .mini .cell::before,
  .mini .cell::after {
    display: none;
  }

  .mini .cell.is-half-start {
    margin-inline-start: 3px;
  }

  /* "Your segment" at mini scale: a solid ink tile, same 1px corner as its neighbours. */
  .mini .cell.is-mine {
    border-color: var(--ink);
    background: var(--ink);
    box-shadow: none;
  }

  /* «امشبِ من»: the operator's own night, in order */
  .night {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-3);
  }

  .night__group {
    display: grid;
    gap: 2px;
  }

  .night__label {
    display: grid;
    color: var(--ink-3);
    font-size: var(--fs-12);
    line-height: 1.35;
    white-space: nowrap;
  }

  /* The half name: the same minute number can occur in both halves (D-023). */
  .night__half {
    color: var(--ink-2);
  }

  .night__cells {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 2.5rem;
    gap: var(--cell-gap);
  }

  .night .cell {
    block-size: 2.25rem;
  }

  .night-end {
    font-size: var(--fs-18);
    font-weight: 700;
  }

  /* ------------------------------------------------------------- focus line */
  .focus-line {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-block: var(--s-2);
    color: var(--orange);
    font-size: var(--fs-13);
    font-weight: 700;
  }

  .focus-line::before {
    content: "";
    inline-size: var(--s-3);
    border-block-start: 2px solid var(--orange-mark);
  }

  .focus-line::after {
    content: "";
    flex: 1;
    border-block-start: 2px solid var(--orange-mark);
  }

  /* ----------------------------------------------------------------- legend */
  .legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1) var(--s-3);
    color: var(--ink-2);
    font-size: var(--fs-12);
  }

  .legend li {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
  }

  .legend .cell {
    inline-size: 1rem;
    block-size: 0.75rem;
    border-width: 1px;
  }

  .legend .cell::after,
  .legend .cell::before {
    transform: scale(0.7);
  }

  /* ------------------------------------------------------ connection & bars */
  .conn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    color: var(--ink-2);
    font-size: var(--fs-13);
  }

  .conn--online .icon {
    color: var(--ok);
  }

  .conn--offline,
  .conn--offline .icon {
    color: var(--danger);
  }

  .conn--reconnecting .icon {
    color: var(--orange);
  }

  /* ---------------------------------------------------------- operator top */
  .op-top {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    gap: var(--s-3);
    block-size: 3.5rem;
    padding-inline: var(--s-4);
    border-block-end: 1px solid var(--line);
    background: var(--bg);
  }

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

  .op-top__end {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-inline-start: auto;
  }

  .shift-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding-block: var(--s-2);
    border-block-end: 1px solid var(--line);
    color: var(--ink-2);
  }

  .shift-line .btn--quiet {
    padding-inline: var(--s-2);
    margin-inline-end: calc(var(--s-2) * -1);
  }

  /* -------------------------------------------------------------- «الان» */
  .now {
    display: grid;
    gap: var(--s-2);
    padding-block: var(--s-5) var(--s-5);
  }

  .now__match {
    font-size: var(--fs-28);
    font-weight: 700;
    line-height: var(--lh-tight);
  }

  .now__segment {
    margin-block-end: var(--s-2);
    font-size: var(--fs-20);
  }

  .now__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1) var(--s-4);
    margin-block-start: var(--s-2);
    color: var(--ink-2);
  }

  .now__facts li {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
  }

  /* one row of three quiet actions, spread across the column */
  .tools {
    display: flex;
    justify-content: space-between;
    gap: var(--s-1);
    margin-block-start: var(--s-2);
    margin-inline: calc(var(--s-1) * -1);
  }

  .tools .btn {
    gap: var(--s-1);
    padding-inline: var(--s-1);
    font-size: var(--fs-14);
  }

  /* ------------------------------------------------- nudge, assignment, empty */
  .nudge,
  .assign {
    display: grid;
    gap: var(--s-2);
    margin-block: var(--s-3);
    padding: var(--s-4);
    border-block-start: 2px solid var(--orange-mark);
    background: var(--orange-wash);
  }

  .nudge {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .nudge__icon {
    margin-block-start: 0.2rem;
    color: var(--orange);
  }

  .nudge__text {
    font-size: var(--fs-18);
    font-weight: 700;
    line-height: var(--lh-tight);
    text-wrap: pretty;
  }

  .nudge__actions,
  .assign__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
  }

  .nudge__actions {
    grid-column: 1 / -1;
  }

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

  .assign__match {
    font-size: var(--fs-20);
    font-weight: 700;
  }

  .assign__what,
  .assign__deadline {
    color: var(--ink-2);
  }

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

  .assign .strip__label {
    position: absolute;
    clip-path: inset(50%);
  }

  .empty {
    padding-block: var(--s-6);
  }

  .empty__text {
    font-size: var(--fs-20);
    font-weight: 700;
    line-height: var(--lh-tight);
  }

  .empty__sub {
    margin-block-start: var(--s-2);
    color: var(--ink-2);
  }

  .empty__next {
    display: grid;
    gap: var(--s-2);
    margin-block-start: var(--s-6);
  }

  .empty__next-title {
    color: var(--ink-2);
  }

  /* No-shift state: the declared hours as a strip of hour tiles */
  .hours-chart {
    display: grid;
    gap: var(--s-2);
    margin: var(--s-2) 0 0;
  }

  .hours {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--cell-gap);
  }

  .hour {
    display: grid;
    place-items: center;
    block-size: 2.25rem;
    border: 1.5px dashed var(--st-free);
    border-radius: var(--r-cell);
    color: var(--ink-3);
    font-size: var(--fs-12);
    font-variant-numeric: tabular-nums;
  }

  .hour.is-on {
    border-style: solid;
    border-color: var(--blue);
    background: var(--blue-wash);
    color: var(--ink);
    font-weight: 700;
  }

  .hours-chart figcaption {
    color: var(--ink-2);
  }

  /* ------------------------------------------------------------- shift form */
  .shift-form {
    display: grid;
    gap: var(--s-3);
    padding-block: var(--s-5);
  }

  .shift-form__title {
    font-size: var(--fs-24);
  }

  .shift-form__hint {
    color: var(--ink-2);
  }

  .shift-form__fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-3);
  }

  .field {
    display: grid;
    gap: var(--s-1);
  }

  .field label {
    font-size: var(--fs-14);
    font-weight: 700;
  }

  .field select,
  .field input {
    min-block-size: var(--target);
    padding-inline: var(--s-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-control);
    background: var(--surface-2);
    color: var(--ink);
    font-size: var(--fs-16);
  }

  .field.is-focus select,
  .field.is-focus input {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }

  .field.is-error select,
  .field.is-error input {
    border-color: var(--danger);
  }

  .field__error {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    color: var(--danger);
    font-size: var(--fs-13);
  }

  .field select:disabled,
  .field input:disabled {
    opacity: 0.45;
  }

  /* --------------------------------------------------------- queue (بعدی‌ها) */
  .qrow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-3);
    padding-block: var(--s-3);
    border-block-start: 1px solid var(--line);
  }

  .qrow:first-child {
    border-block-start: 0;
  }

  .qrow__main {
    display: grid;
    gap: 0.15rem;
  }

  .qrow__match {
    font-weight: 700;
  }

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

  .qrow__work {
    color: var(--ink-3);
    font-size: var(--fs-14);
  }

  .qrow .mini {
    margin-block-start: var(--s-1);
  }

  .qrow__start {
    display: grid;
    justify-items: end;
    text-align: end;
  }

  .qrow__start-label {
    color: var(--ink-3);
    font-size: var(--fs-12);
  }

  .qrow__start time {
    font-size: var(--fs-16);
  }

  /* ------------------------------------------------------ dock & bottom nav */
  .dock {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--z-dock);
    display: grid;
    gap: var(--s-2);
    max-inline-size: var(--op-width, 32rem);
    margin-inline: auto;
    padding: var(--s-2) var(--s-4) max(var(--s-1), env(safe-area-inset-bottom, 0px));
    border-block-start: 1px solid var(--line);
    background: var(--bg);
  }

  .dock.is-static {
    position: relative;
  }

  .bnav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .bnav__item {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 0.15rem;
    min-block-size: 3.25rem;
    color: var(--ink-3);
    font-size: var(--fs-13);
    text-decoration: none;
  }

  .bnav__item[aria-current="page"] {
    color: var(--blue);
    font-weight: 700;
  }

  .bnav__item[aria-current="page"]::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 30%;
    border-block-start: 2px solid var(--blue);
  }

  /* ------------------------------------------------------------------ toast */
  .toast {
    position: fixed;
    inset-inline: var(--s-4);
    inset-block-end: calc(var(--dock-h, 8.25rem) + var(--s-2));
    z-index: var(--z-toast);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--s-2) var(--s-3);
    max-inline-size: calc(var(--op-width, 32rem) - 2 * var(--s-4));
    margin-inline: auto;
    padding: var(--s-3);
    border: 1px solid var(--line-strong);
    background: var(--surface-3);
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.28);
    transition:
      opacity var(--dur) var(--ease),
      transform var(--dur) var(--ease);
  }

  @starting-style {
    .toast {
      opacity: 0;
      transform: translateY(8px);
    }
  }

  .toast.is-static {
    position: relative;
    inset: auto;
  }

  .toast__icon {
    color: var(--ok);
  }

  .toast__text {
    font-size: var(--fs-14);
    line-height: 1.5;
  }

  .toast__timer {
    font-variant-numeric: tabular-nums;
    display: grid;
    place-items: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-cell);
    color: var(--ink-2);
    font-size: var(--fs-13);
  }

  /* ------------------------------------------------------- manager: rail, top */
  .rail {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    padding: var(--s-4) var(--s-3);
    border-inline-end: 1px solid var(--line);
    background: var(--surface-1);
  }

  .rail__brand {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding-inline: var(--s-2);
    font-size: var(--fs-14);
    font-weight: 700;
  }

  .rail__list {
    display: grid;
    gap: 2px;
  }

  .rail__item {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-block-size: 2.5rem;
    padding-inline: var(--s-2);
    border-radius: var(--r-control);
    color: var(--ink-2);
    font-size: var(--fs-14);
    text-decoration: none;
    transition: background-color var(--dur) var(--ease);
  }

  .rail__item[aria-current="page"] {
    background: var(--blue-wash);
    color: var(--ink);
    font-weight: 700;
  }

  .rail__item[aria-current="page"] .icon {
    color: var(--blue);
  }

  @media (hover: hover) and (pointer: fine) {
    .rail__item:hover:not([aria-current]) {
      background: var(--surface-3);
      color: var(--ink);
    }
  }

  .rail__user {
    margin-block-start: var(--s-2);
    padding: var(--s-3) var(--s-2) 0;
    border-block-start: 1px solid var(--line);
  }

  .cr-top {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    min-block-size: 3.5rem;
    padding-inline: var(--s-5);
    border-block-end: 1px solid var(--line);
  }

  .cr-top__mark {
    display: none;
    inline-size: 1.5rem;
    block-size: 1.5rem;
  }

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

  .cr-top__when {
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
    color: var(--ink-2);
    font-size: var(--fs-14);
  }

  .cr-top__clock {
    color: var(--ink);
    font-size: var(--fs-20);
    font-weight: 700;
  }

  .cr-top__end {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-inline-start: auto;
  }

  /* ------------------------------------------------------- exceptions column */
  .xcol__head {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-block-end: var(--s-3);
  }

  .xcol__title {
    font-size: var(--fs-28);
  }

  .xcol__head .seg {
    margin-inline-start: auto;
  }

  .xrow {
    display: grid;
    gap: 0.2rem;
    padding-block: var(--s-3);
    border-block-start: 1px solid var(--line);
  }

  .xrow:first-child {
    border-block-start: 0;
    padding-block-start: 0;
  }

  .xrow__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--s-2);
    line-height: var(--lh-tight);
  }

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

  .xrow__kind {
    color: var(--orange);
    font-size: var(--fs-14);
  }

  .xrow__age {
    margin-inline-start: auto;
    color: var(--ink-2);
    font-size: var(--fs-14);
    font-weight: 400;
  }

  .xrow__phone {
    direction: ltr;
    unicode-bidi: isolate;
    color: var(--ink-2);
    font-weight: 400;
  }

  .xrow__what {
    color: var(--ink-2);
    font-size: var(--fs-14);
    line-height: 1.55;
  }

  .xrow__held {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    color: var(--ink-3);
    font-size: var(--fs-13);
  }

  .xrow__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-1) var(--s-2);
    margin-block-start: var(--s-2);
  }

  .calm {
    padding-block: var(--s-5);
  }

  .calm__text {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-20);
    font-weight: 700;
  }

  .calm__text .icon {
    color: var(--ok);
  }

  .calm__sub {
    margin-block-start: var(--s-2);
    color: var(--ink-2);
    font-size: var(--fs-14);
  }

  /* ---------------------------------------------------------- matches column */
  .mcol__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2) var(--s-3);
    margin-block-end: var(--s-3);
  }

  .mcol__select {
    margin-inline-start: auto;
  }

  /* Closed: one quiet line under the heading. Open: the key pushes the list down, covering nothing. */
  .mcol__head .legend-toggle {
    flex-basis: 100%;
    margin-block-start: calc(var(--s-1) * -1);
    margin-inline-start: calc(var(--s-2) * -1);
  }

  .mcol__select[aria-pressed="true"] {
    background: var(--blue-wash);
    color: var(--ink);
  }

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

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

  .mrow:first-child {
    border-block-start: 0;
    padding-block-start: var(--s-1);
  }

  .focus-line + .mrow {
    border-block-start: 0;
  }

  .mrow__head {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--s-3);
  }

  .mrow__rank {
    color: var(--ink-3);
    font-size: var(--fs-24);
    font-weight: 700;
    line-height: 1.1;
  }

  .mrow__teams {
    font-size: var(--fs-16);
  }

  .mrow__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-1) var(--s-2);
    margin-block-start: 0.15rem;
    color: var(--ink-2);
    font-size: var(--fs-13);
  }

  .mrow__end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: end;
    gap: var(--s-2);
  }

  .mrow__left {
    color: var(--ink-2);
    font-size: var(--fs-14);
  }

  .mrow__mobile {
    display: none;
    align-items: center;
    gap: var(--s-3);
  }

  .mrow__summary {
    color: var(--ink-2);
    font-size: var(--fs-13);
    white-space: nowrap;
  }

  .mrow--quiet .mrow__teams {
    color: var(--ink-2);
    font-weight: 400;
  }

  .mrow--quiet {
    gap: var(--s-2);
    padding-block: var(--s-3);
  }

  .mrow--quiet .mrow__rank {
    font-size: var(--fs-18);
  }

  .mgroup {
    margin-block-start: var(--s-3);
    border-block-start: 1px solid var(--line);
  }

  .mgroup summary {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    min-block-size: 2.75rem;
    color: var(--ink-2);
    font-size: var(--fs-14);
    cursor: pointer;
    list-style: none;
  }

  .mgroup summary::-webkit-details-marker {
    display: none;
  }

  .mgroup__chev {
    transition: transform var(--dur) var(--ease);
  }

  .mgroup[open] .mgroup__chev {
    transform: rotate(180deg);
  }

  /* ------------------------------------------------------------ people column */
  .pcol__section + .pcol__section {
    margin-block-start: var(--s-5);
  }

  .pcol__title {
    margin-block-end: var(--s-2);
    font-size: var(--fs-14);
  }

  .prow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 var(--s-2);
    padding-block: var(--s-2);
    border-block-start: 1px solid var(--line);
    font-size: var(--fs-13);
  }

  .prow__flag {
    color: var(--orange);
    font-size: var(--fs-12);
    font-weight: 700;
  }

  .prow__who {
    font-weight: 700;
  }

  .prow__task {
    grid-column: 1 / -1;
    grid-row: 2;
    color: var(--ink-2);
  }

  .prow__for {
    color: var(--ink-3);
  }

  /* ---------------------------------------------------------------- popover */
  .pop {
    position: fixed;
    z-index: var(--z-popover);
    inline-size: 17.5rem;
    padding: var(--s-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-control);
    background: var(--surface-2);
    box-shadow: 0 10px 30px rgb(0 0 0 / 0.3);
    transform-origin: top center;
    transition:
      opacity var(--dur-fast) var(--ease),
      transform var(--dur-fast) var(--ease);
  }

  @starting-style {
    .pop {
      opacity: 0;
      transform: scale(0.97);
    }
  }

  .pop.is-static {
    position: relative;
  }

  /* Phones: the same details as a bottom sheet (radius role: 14px, top corners only). */
  .pop.is-sheet {
    border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  }

  @media (max-width: 47.99rem) {
    .pop:not(.is-static) {
      inset-inline: 0;
      inset-block: auto 0;
      inline-size: auto;
      padding: var(--s-4) var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom, 0));
      border-radius: var(--r-sheet) var(--r-sheet) 0 0;
      transform-origin: bottom center;
    }

    .pop:not(.is-static) .pop__actions .btn {
      min-block-size: var(--target);
    }
  }

  .pop__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    margin-block-end: var(--s-2);
  }

  .pop__title {
    font-size: var(--fs-14);
    font-weight: 700;
  }

  .pop__facts {
    display: grid;
    gap: var(--s-1);
    font-size: var(--fs-13);
  }

  .pop__facts > div {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr);
  }

  .pop__facts dt {
    color: var(--ink-3);
  }

  .pop__facts dd {
    display: flex;
    align-items: center;
    gap: var(--s-2);
  }

  .pop__facts .cell {
    inline-size: 1.25rem;
    block-size: 0.875rem;
  }

  .pop__actions {
    display: flex;
    gap: var(--s-2);
    margin-block-start: var(--s-3);
  }

  /* ---------------------------------------------------------------- action bar */
  .abar {
    position: sticky;
    inset-block-end: var(--s-4);
    z-index: var(--z-dock);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    margin-block-start: var(--s-4);
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--line-strong);
    border-block-start: 2px solid var(--blue);
    background: var(--surface-3);
  }

  /* The action bar never hides content: the column ends with room for it, and keyboard focus
     scrolls cells clear of it. */
  .mcol.is-selecting {
    padding-block-end: 6rem;
  }

  :root:has(.mcol.is-selecting) {
    scroll-padding-block-end: 6rem;
  }

  .abar .btn:disabled {
    cursor: not-allowed;
  }

  .abar.is-static {
    position: relative;
    inset: auto;
  }

  .abar__count {
    font-size: var(--fs-14);
    font-weight: 700;
  }

  .abar__actions {
    display: flex;
    gap: var(--s-2);
  }

  /* ------------------------------------------- deadline line (committed rows, D-029) */
  .mrow__due {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-1) var(--s-3);
    margin-block-start: var(--s-1);
    color: var(--ink-2);
    font-size: var(--fs-13);
  }

  .mrow__deadline {
    color: var(--ink);
  }

  .mrow__due .icon {
    color: var(--ink-3);
  }

  .mrow__due--unknown .mrow__finish {
    color: var(--ink-2);
  }

  /* At risk: orange text plus the clock mark, never color alone. */
  .mrow__due--risk .mrow__finish {
    color: var(--orange);
    font-weight: 700;
  }

  .mrow__due--risk .icon {
    color: var(--orange-mark);
  }

  /* «کمترین مانده» draws no focus rule; a short neutral rule plus text marks rows below it. */
  .mrow__below {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    color: var(--ink-3);
  }

  .mrow__below::before {
    content: "";
    inline-size: var(--s-3);
    border-block-start: 2px solid var(--line-strong);
  }

  /* ----------------------------------------------- legend behind a quiet control */
  .legend-toggle summary {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    min-block-size: 2rem;
    padding-inline: var(--s-2);
    border-radius: var(--r-control);
    color: var(--ink-2);
    font-size: var(--fs-13);
    cursor: pointer;
    list-style: none;
  }

  .legend-toggle summary::-webkit-details-marker {
    display: none;
  }

  .legend-toggle__chev {
    transition: transform var(--dur) var(--ease);
  }

  .legend-toggle[open] .legend-toggle__chev {
    transform: rotate(180deg);
  }

  .legend-toggle .legend {
    padding: var(--s-2) var(--s-2) var(--s-1);
  }

  @media (hover: hover) and (pointer: fine) {
    .legend-toggle summary:hover {
      background: var(--surface-3);
      color: var(--ink);
    }
  }

  /* ------------------------------------------------------- signed-in person */
  .user {
    display: grid;
    gap: var(--s-2);
  }

  .user__who {
    display: grid;
    line-height: 1.4;
  }

  .user__name {
    font-size: var(--fs-14);
    font-weight: 700;
  }

  .user__role {
    color: var(--ink-3);
    font-size: var(--fs-13);
  }

  .user__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1);
    margin-inline-start: calc(var(--s-2) * -1);
  }

  .cr-user {
    display: none;
  }

  /* ---------------------------------------------------------- operator account */
  .acct__who {
    padding-block: var(--s-5) var(--s-4);
  }

  .acct__name {
    font-size: var(--fs-28);
    line-height: 1.35;
  }

  .acct__facts {
    display: grid;
    gap: var(--s-2);
    margin-block-start: var(--s-3);
  }

  .acct__facts div {
    display: flex;
    gap: var(--s-3);
  }

  .acct__facts dt {
    min-inline-size: 6rem;
    color: var(--ink-3);
  }

  .acct__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
  }

  /* Account theme choice: three equal choices across the column. */
  .seg--touch {
    display: flex;
  }

  .seg--touch .seg__item {
    flex: 1;
    justify-content: center;
    min-block-size: var(--target);
    padding-inline: var(--s-3);
    font-size: var(--fs-14);
  }

  /* ----------------------------------------------------------- prototype chrome */
  .proto-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2) var(--s-3);
    padding: var(--s-2) var(--s-4);
    border-block-end: 1px dashed var(--line-strong);
    background: var(--surface-1);
    font-size: var(--fs-12);
  }

  .proto-bar__label {
    color: var(--ink-3);
  }

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

  /* ---------------------------------------------------------- reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .btn:active:not(:disabled),
    .btn.is-active {
      transform: none;
    }

    .mgroup__chev,
    .legend-toggle__chev {
      transition: none;
    }

    .cell.is-just-done::after {
      animation-name: fade-in;
    }

    @starting-style {
      .toast,
      .pop {
        transform: none;
      }
    }
  }

  @keyframes fade-in {
    from {
      opacity: 0;
    }
  }

  .abar {
    flex-wrap: wrap;
  }
}