/* Station kiosk (Intake SR-01 · rack intake, Station SMT-2 · rack pick) · page layout only. The frame, type scale, controls and parts are the kit's (data-scale="station"). */
@layer page {
  /* Head: the rack and the clock on the left; Preview, Get help and the person on the right. */
  .k-top { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5); min-width: 0; }
  .k-id { display: flex; flex: none; align-items: center; gap: var(--s3); min-width: 0; }
  .k-id__t { font-family: var(--font-brand); font-size: var(--t-title); font-weight: 450; letter-spacing: -.015em; line-height: 1; white-space: nowrap; }
  .k-id__t b { font-weight: 500; }
  #k-rack-name, .k-id__p { color: var(--text-2); }
  .k-id__p { font-family: var(--font-ui); font-size: var(--t-section); font-weight: 500; letter-spacing: 0; }
  .k-top > :is(.k-id + *) { padding-left: var(--s5); border-left: 1px solid var(--line-2); }
  /* Narrow: the purpose word yields to the Working as chip, which says it too. */
  @media (max-width: 420px) { .k-id__p { display: none; } }
  @media (max-width: 760px) { #k-rack-name { display: none; } .k-top > :is(.k-id + *) { padding-left: 0; border-left: 0; } }
  /* A phone-width kiosk: the rack, the clock and the person on one row; Get help and Working as on the next. */
  @media (max-width: 560px) {
    .k-top { gap: var(--s2) var(--s3); }
    .k-sp { display: none; }
    #k-whobox { order: 2; margin-left: auto; }
    .k-help { order: 3; }
    #k-as { order: 4; flex: 1 1 0; min-width: 0; }
    #k-as > * { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  }

  /* Home is the kit's stationHome() (rack → focus → folds → start). The head's purpose word yields to the Working as
     chip whenever the chip is shown: it says the same. */
  .k-top:has(#k-as:not([hidden])) .k-id__p { display: none; }
  .k-tilen { font-size: var(--t-section); color: var(--text-2); white-space: nowrap; }
  .k-tilen b { font: 450 var(--t-title)/1 var(--font-brand); color: var(--text); font-variant-numeric: tabular-nums; }

  /* A task screen: the instruction in the main column, the rack or the receipt beside it (7 : 5). */
  .k-task { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s6) var(--s10); align-items: start; }
  .k-task--solo { grid-template-columns: minmax(0, 1fr); max-width: 64rem; }
  .k-main, .k-side { min-width: 0; }
  @media (max-width: 1100px) { .k-task { grid-template-columns: minmax(0, 1fr); } }
  /* The kicker: verb · object on the left, where the movement is on the right. */
  .k-kick { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s6); min-height: var(--target-min); }
  .k-kick__t { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: 0; font-size: var(--t-lead); font-weight: 500; color: var(--text-2); }
  .k-code { color: var(--text-2); }
  /* One line of consequence under the instruction: where the reels go. Must-read at 2 m (NFR-E3), the station's step
     scale (≥ 64 px on the 1280 × 800 reference). */
  .k-then { margin: 0; font-family: var(--font-brand); font-size: var(--t-step-lg); font-weight: 450; line-height: 1.1; letter-spacing: -.02em; }
  .k-then__k { display: inline-flex; align-items: center; gap: var(--s2); margin-right: var(--s3); vertical-align: -.08em; color: var(--text-2); }
  .k-then__more { color: var(--text-2); }
  /* A pick's one physical instruction ("Take out all 3"; the order is free, said in the status line): must-read at 2 m (NR13). */
  .k-instr { margin: 0; font: 450 var(--t-step-lg)/1.05 var(--font-brand); letter-spacing: -.02em; }
  .k-instr:empty { display: none; }
  .k-figs { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s4) var(--s10); }
  .k-where { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: 0; font-size: var(--t-lead); }
  /* The bay a finished step names is must-read too (NFR-E3): the instrument face at the station's step scale. */
  .k-where > b { font: 450 var(--t-step-lg)/1 var(--font-brand); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
  /* Whose task a taken reel is: read before the instruction under it. */
  .k-lead2 { margin: 0; font-size: var(--t-step); line-height: 1.2; }
  .k-rk { margin: 0; font-size: var(--t-section); }
  /* The pick batch under the task, across the station's width. */
  .k-pickrow { margin-top: var(--s5); }
  .k-map { min-width: 0; }
  /* The scanner's state in the thumb bar: the scan glyph and one line. */
  .k-ready { display: flex; align-items: center; gap: var(--s3); color: var(--accent-text); }
  .k-ready__t { display: block; font-size: var(--t-section); font-weight: 650; line-height: 1.25; color: var(--text); }
  .k-ready__s { display: block; font-size: var(--t-small); color: var(--text-2); }
  .k-wait { font-family: var(--font-brand); font-size: var(--t-num-lg); font-weight: 400; line-height: 1; }

  /* Free placement: the one instruction is the rack, not a bay (must-read, the kit's .display); how many are free under it. */
  .k-free { display: grid; gap: var(--s2); }
  /* Next in: the reels waiting at this section, first in first out; the numeral is the order the sensor takes them. */
  .k-next__n { display: grid; place-items: center; width: var(--target-min); height: var(--target-min); border-radius: var(--r2); background: var(--sheet-sunk); font: 500 var(--t-title)/1 var(--font-brand); }
  .k-next [aria-current] .k-next__n { background: var(--accent); color: var(--accent-fg, var(--sheet)); }

  /* Put back in: the reel drawn 1 : 1 on the station's 15.6″ panel, to hold the reel against. */
  .k-glass { position: relative; min-height: min(560px, calc(100dvh - 240px)); padding: var(--s5); border-radius: var(--r5); background: var(--sheet-sunk); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; align-content: space-between; }
  .k-reel { justify-self: center; overflow: visible; }
  .k-reel__flange, .k-reel__hole { fill: none; stroke: var(--line-2); stroke-width: 2; }
  .k-reel__tape { fill: color-mix(in oklab, var(--sky-500) 22%, transparent); stroke: var(--sky-300); stroke-width: 3; }
  .k-reel__hub { fill: var(--navy-950); stroke: var(--line-2); stroke-width: 2; }
  .k-reel__pcs { fill: var(--sky-100); font: 650 18px var(--font-ui); }
  @media (max-width: 1180px) { .k-glass { min-height: 360px; } }

  /* Show me: three frames of a put-in, the last touching the back stop. */
  .k-frame { display: block; width: 100%; height: auto; border-radius: var(--r3); background: var(--sheet-sunk); }
  .k-frame__bay { fill: none; stroke: var(--line-2); stroke-width: 2; }
  .k-frame__stop { fill: var(--line-2); }
  .k-frame__stop--lit { fill: var(--led-green); }
  .k-frame__reel { fill: color-mix(in oklab, var(--sky-500) 30%, transparent); stroke: var(--sky-300); stroke-width: 2; }
  .k-frame__hub { fill: var(--navy-950); stroke: var(--sky-300); }
}