/* ── phone.css — Going Concern: the desk on a phone and a tablet held upright (900 px and
   under). Tokens from desk.css. Loaded after every other sheet of the desk, and every rule
   sits inside a width query, so nothing above 900 px changes.
   The strip becomes three rows (the bank and the decisions; the clock; the vitals as a row
   of whole tiles that scrolls sideways), the panes never scroll sideways (a table wider than
   its box scrolls inside itself with its first column held, see phone.js), the dialogs fill
   the screen with a margin and scroll, and everything a thumb presses is 40 units high. ── */

@media (max-width:900px){
  :root{ --h-touch:calc(40 * var(--u)); --gc-tw-bg:var(--bg); }

  /* ═══ the strip: three rows ═══ */
  #strip{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; height:auto; }
  #strip > *{ min-height:var(--h-touch); padding:0 var(--sp-3); border-right:0; }
  #strip .s-brand{ grid-column:1; grid-row:1; padding-right:var(--sp-2); }
  #strip .s-who{ grid-column:2; grid-row:1; display:block; max-width:none; min-width:0; padding:0 var(--sp-2) 0 0; line-height:var(--h-touch); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #strip .s-who .s-ceo{ display:none; }
  #strip .s-decide{ grid-column:3; grid-row:1; border-left:1px solid var(--line); }
  #strip .s-clock{ grid-column:1 / -1; grid-row:2; gap:var(--sp-1); padding:var(--sp-1) var(--sp-3); border-top:1px solid var(--line); }
  #strip .s-clock #tb-date{ min-width:0; flex:none; margin-right:var(--sp-1); }
  #strip .s-clock .spd, #strip .s-clock #btn-step{ flex:1 1 auto; min-width:0; min-height:var(--h-touch); padding:0 var(--sp-1); letter-spacing:0; display:inline-flex; align-items:center; justify-content:center; }
  #strip .s-vitals{ grid-column:1 / -1; grid-row:3; order:0; width:auto; display:flex; padding:0 !important; border-top:1px solid var(--line); overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity; scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
  #strip .vital{ flex:1 0 auto; min-width:max-content; height:auto; min-height:var(--h-touch); padding:var(--sp-1h) var(--sp-3); overflow:visible; scroll-snap-align:start; }
  #strip .vital .v-label{ white-space:nowrap; letter-spacing:.08em; }
  #strip .vital .v-val{ white-space:nowrap; }
  #strip .vital .v-sub{ display:inline; overflow:visible; }
  #strip .vital:last-child{ border-right:0; }

  /* ═══ the command line and the bar ═══ */
  #cmd-in, .c-prompt{ height:var(--h-touch); line-height:var(--h-touch); }
  .dept, .fn{ min-height:var(--h-touch); display:inline-flex; align-items:center; }
  .fn-row{ padding:0; }

  /* ═══ the queue ═══ */
  .qi{ min-height:var(--h-touch); }
  .qi-top{ align-items:baseline; }
  .qi-kind, .qi-due{ white-space:nowrap; flex:none; }
  .qi-top > span:nth-child(2){ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* ═══ a pane ═══ */
  .pane-head{ height:var(--h-touch); }
  .ph-status{ max-width:40%; }
  .ph-acts button{ width:var(--h-touch); height:var(--h-touch); }
  .pane .winbody{ overflow-wrap:break-word; }
  .winbody img, .winbody svg:not(.gc-ico){ max-width:100%; }
  .winbody img{ height:auto; }
  .winbody input:not([type=checkbox]):not([type=radio]), .winbody select, .winbody textarea{ max-width:100%; }
  .row label{ min-width:calc(110 * var(--u)); }
  /* a legend in the flow, its first line on the border as before, so a long one wraps above the content instead of over it */
  .fieldset > .legend{ position:static; display:block; width:fit-content; max-width:100%; margin:calc(-1 * var(--sp-3) - var(--sp-2)) 0 var(--sp-1h) calc(-1 * var(--sp-0)); line-height:var(--lh-2); }
  .mail-row{ grid-template-columns:minmax(0,2fr) minmax(0,3fr) auto; }

  /* a table wider than its box scrolls inside itself, its first column held (phone.js adds .gc-tw) */
  table.gc-tw{ display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table.gc-tw tr > :first-child{ position:sticky; left:0; z-index:1; background:var(--gc-tw-bg); box-shadow:inset -1px 0 0 var(--line); }
  .victory-box, .gc-pal-box, .scn-box, #queue{ --gc-tw-bg:var(--panel); }
  .doc, .memo{ --gc-tw-bg:var(--paper); }

  /* the handbook: the list above the article */
  .hb{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); height:auto; }
  .hb-side{ border-right:0; border-bottom:1px solid var(--line); padding:0 0 var(--sp-2); max-height:calc(220 * var(--u)); }
  .hb-article.doc{ margin:var(--sp-2) 0 0; padding:var(--sp-5) var(--sp-4); }
  .hb-sandbox .row label{ min-width:0; }
  .hb-sandbox input[type=range]{ width:100%; }

  /* paper in a pane */
  .reg-letter, .doc.cv{ padding:var(--sp-5) var(--sp-4); }
  .art-ar-cover{ margin:calc(-1 * var(--sp-5)) calc(-1 * var(--sp-4)) var(--sp-4); }
  .art-ar-title{ padding:var(--sp-3) 0 0; }
  .art-frame, .art-cv, .art-chair{ float:none; margin:0 0 var(--sp-3); }
  .art-plaque{ max-width:100%; }
  .memo-t td:first-child{ width:calc(100 * var(--u)); }

  /* ═══ dialogs: the screen with a margin, scrolling inside ═══ */
  .victory-overlay{ padding:var(--sp-2h); }
  .victory-box{ max-width:100%; max-height:100%; }
  .victory-box .content, .ar-content{ padding:var(--sp-3) var(--sp-3h); overflow-wrap:break-word; }
  .victory-box > .btn, .victory-box > .row{ margin:0 var(--sp-3h) var(--sp-3); }
  .dx-head{ padding:var(--sp-3) var(--sp-3h) var(--sp-2); }
  .dx-body{ padding:0 var(--sp-3h) var(--sp-2h); overflow-wrap:break-word; }
  .dx-acts{ padding:var(--sp-2h) var(--sp-3h) var(--sp-3); }
  .victory-box .btn, .crisis-acts .btn, .notice .btn, .gc-ed .btn, .scn-box .btn, .doc .btn{ min-height:var(--h-touch); }
  .victory-box .titlebar{ height:var(--h-touch); padding-right:0; }
  .tb-btn{ width:var(--h-touch); height:var(--h-touch); border-width:0 0 0 1px; }
  .crisis-stats{ flex-wrap:wrap; } .crisis-stats > div{ flex:1 1 40%; }
  .notice-overlay{ padding:var(--sp-2h); align-items:flex-start; }
  .notice{ max-height:none; padding:var(--sp-6) var(--sp-4); margin:auto 0; }
  /* the keyboard sheet: icons.css's .gc-sheet (the icon grid on SET) also matches this dialog's overlay */
  .victory-overlay.gc-sheet{ display:flex; gap:0; }
  .victory-overlay.gc-sheet .victory-box{ display:flex; flex-direction:column; align-items:stretch; gap:0; padding:0; border:1px solid var(--line-2); font:var(--fs-4)/var(--lh-3) var(--sans); color:var(--text); }
  .victory-overlay.gc-sheet .victory-box .titlebar{ display:flex; align-items:center; gap:var(--sp-2); padding:0 0 0 var(--sp-3); border:0; border-bottom:1px solid var(--line); font:600 var(--fs-1) var(--mono); color:var(--muted); }
  .victory-overlay.gc-sheet .victory-box .content{ display:block; padding:var(--sp-3) var(--sp-3h); border:0; font:inherit; color:inherit; }
  .gc-sheet-t .gc-sheet-k{ width:auto; white-space:normal; }

  /* the palette */
  .gc-pal{ padding:var(--sp-2h); }
  .gc-pal-box{ max-height:100%; }
  .gc-pal-row{ grid-template-columns:calc(56 * var(--u)) minmax(0,1fr) auto; min-height:var(--h-touch); align-items:center; }
  .gc-pal-foot{ display:none; }

  /* the scene: the full screen, the buttons a thumb's height */
  .scn-foot{ flex-wrap:wrap; padding:var(--sp-2) var(--sp-3h); }
  .scn-main{ padding:var(--sp-3) var(--sp-3h); gap:var(--sp-3); }
  .scn-pfoot{ flex-wrap:wrap; }

  /* the appointment */
  #login{ padding:var(--sp-4) var(--sp-2h); }
  .doc{ padding:var(--sp-5) var(--sp-4); }
  .login-buttons .btn{ min-height:var(--h-touch); }
  .linkbtn{ min-height:var(--h-touch); text-align:left; }
}

/* a narrow phone (380 px and under): the clock's words without their icons, so all six fit */
@media (max-width:380px){
  #strip .s-clock .gc-ico{ display:none; }
}

/* a phone held upright (600 px and under): the tiles in two columns, the appointment's form stacked */
@media (max-width:600px){
  .kpi-strip{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); }
  .kpi-box{ min-width:0; }
  .kpi-box:last-child:nth-child(odd){ grid-column:1 / -1; }
  .login-form td, .login-form td:first-child{ display:block; width:auto; padding:var(--sp-0) 0; }
  .login-form td:first-child{ padding-top:var(--sp-2h); }
  .appt .mast{ flex-wrap:wrap; gap:var(--sp-1) var(--sp-3); }
}