/*
  Lumen on a phone (the owner, 2026-10-07: "Your next punch list is the mobile view for the site.
  It's super hard to navigate. It looks like it's just the desktop version, but on mobile … the
  sidebar should be collapsible, but bigger and you know more legible. And then once you make a
  selection on the sidebar, it would collapse the sidebar and take you to the screen … generally
  make most things more drop downs. Make the scrolling a little more dynamic. I noticed that the
  bottom right hand corner lumen button and the chat button were kind of cut off. Some screens, if
  the spreadsheet was too big, it was too hard to navigate them").

  Everything here hangs off `html.phone`, which `index.html` sets before the first paint and
  `web/phone.js` keeps true: Android, an iPhone, an iPad, or a window 900px wide or narrower. A
  laptop never has the class, so nothing below touches it; the `max-width: 900px` rules in
  `style.css` keep working under it, and these come last so they win where both speak.

  The page on a phone is a shell the height of the screen (`100dvh`, which follows the browser's own
  bars as they come and go): the ribbon and the toolbar at the top, the bottom bar at the foot, and
  between them ONE thing that scrolls — a sheet in its own box, or `main` where the page has no
  sheet. The document itself never scrolls, so a sheet is never fighting the page under it and a
  pull on its first row is never the browser's pull-to-refresh.
*/

/* The wrapper around the rail draws nothing on a laptop: the rail and the page are the frame's two columns as ever. */
.drawer { display: contents; }
.drawerhead { display: none; }
/* Feature request is words on a laptop and an icon on a phone (`mountTicketButton`). */
.ticketbutton .ticketicon { display: none; }
/* Settings' one-button list is a phone's (`adminpick` in web/admin.js). */
.adminpick { display: none; }
/* The phone's corner chip (`cornerChip` in web/phone.js) is not drawn on a laptop. */
.cornerchip { display: none; }

@media screen {

html.phone {
  /* The bottom bar, and the room it takes from every box that sits above it: the screen's own safe area is part of it. */
  --bar-h: calc(34px + env(safe-area-inset-bottom, 0px));
  --drawer-w: min(calc(100vw - 28px), max(300px, 85vw));
  --row: 32px;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}

/* ---- the shell: one screen, one scroller --------------------------------------------------- */
html.phone, html.phone body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html.phone body {
  height: 100vh; height: 100dvh; max-width: 100vw;
  display: flex; flex-direction: column; padding: 0 0 var(--bar-h);
}
html.phone .titlebar, html.phone .toolbar, html.phone .previewbanner { flex: 0 0 auto; }
html.phone .frame { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
html.phone main {
  flex: 1 1 0; min-height: 0; max-width: 100%; padding: 8px 8px 16px;
  overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
/* A page that is one sheet runs to the bar: the sheet is the scroller, `main` has nothing of its own to scroll. */
html.phone main:has(.sheetframe) { padding: 4px 4px 0; }
/* The footer's who-and-when is in the drawer on a phone; a strip fixed along the foot only covers the sheet. */
html.phone .footer { display: none; }

/* ---- the ribbon, thin: the mark and the menus, then the shows ------------------------------- */
html.phone .titlebar .platetop { height: auto; min-height: 38px; flex-wrap: nowrap; align-items: stretch; }
html.phone .titlebar .mark { padding: 0 10px 0 12px; flex: none; }
html.phone .titlebar .mark b { font-size: 14px; }
html.phone .titlebar .menubar { height: 38px; flex: 1 1 auto; min-width: 0; overflow: visible; }
html.phone .titlebar .menubar .menu { padding: 0 11px; font-size: 14px; }
/* A menu opens as a list the width of the screen under the ribbon, whichever menu it is: at its button's edge a list 240px wide ran off the right of the screen, and a bar that scrolled sideways cut it off at its own foot. */
html.phone .menupanel {
  position: fixed; left: 8px; right: 8px; top: 38px; z-index: 96; min-width: 0; max-height: calc(100dvh - 38px - var(--bar-h) - 8px);
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
html.phone .menupanel button { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 44px; padding: 8px 16px; font-size: 15px; white-space: normal; }
html.phone .menupanel button em { margin: 0; font-size: 12px; line-height: 1.3; white-space: normal; }
html.phone .menupanel hr { margin: 0; }
html.phone .menupanel .aboutcard { padding: 8px 16px 12px; }
html.phone .menupanel .aboutcard p { font-size: 13px; }
/* A screen as narrow as an iPhone SE's: the five menus still fit beside the mark, none of them half off the edge. */
@media (max-width: 359px) {
  html.phone .titlebar .mark { padding: 0 8px 0 10px; }
  html.phone .titlebar .menubar .menu { padding: 0 8px; font-size: 13px; }
}
/* The apps and the modes are the drawer's (its head); the ribbon keeps only what asks to be seen (a new build, the open tickets). */
html.phone .titlebar .appswitch, html.phone .titlebar .modeswitch, html.phone .titlebar .lamp, html.phone .titlebar .screw { display: none; }
html.phone .titlebar .plate-right { margin-left: 0; padding: 0 6px; gap: 6px; flex: none; }
html.phone .titlebar .plate-right:not(:has(.newbuild, .ticketcount)) { display: none; }
html.phone .shows { height: 38px; overflow-x: auto; scrollbar-width: none; padding-left: 4px; }
html.phone .shows::-webkit-scrollbar { display: none; }
html.phone .show-tab { padding: 0 12px; }
html.phone .show-tab b { font-size: 13px; }
html.phone .show-add, html.phone .show-share { min-width: 44px; font-size: 15px; }

/* ---- the toolbar: ☰, the page's name, ⋯ ------------------------------------------------------ */
html.phone .toolbar {
  position: relative; z-index: 40; flex-wrap: wrap; align-items: stretch; gap: 0; min-height: 36px; background: var(--panel);
  border-bottom: 1px solid var(--seam-bright);
}
html.phone .toolbar > .railtoggle { order: 0; flex: none; width: 44px; height: 36px; font-size: 20px; color: var(--ink); background: var(--panel); border-right: 1px solid var(--seam); }
html.phone .toolbar > .where { order: 1; flex: 1 1 0; min-width: 0; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 6px; height: 36px; padding: 0 10px; overflow: hidden; background: var(--panel); }
html.phone .toolbar > .where::before { content: attr(data-app) " \00b7"; flex: none; font: 600 10px/1 var(--chrome); letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }
html.phone .toolbar > .where b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 15px/1 var(--chrome); letter-spacing: .03em; text-transform: none; }
html.phone .toolbar > .where span { display: none; }
html.phone .toolbar > .phonemore { order: 2; flex: none; position: relative; }
html.phone .toolbar > .phonemore > .phonemorebtn {
  width: 48px; height: 36px; padding: 0; border: 0; border-left: 1px solid var(--seam); background: var(--panel); color: var(--amber);
  font: 700 26px/1 var(--chrome); cursor: pointer;
}
html.phone .toolbar > .phonemore > .phonemorebtn[aria-expanded="true"] { color: var(--ground); background: var(--metal); }
/* Home has no toolbar to draw: nothing in it, so no strip of the page's room. */
html.phone .toolbar:empty { display: none; }
/* Open, the toolbar is over the corner's buttons, which would otherwise float over the foot of its list. */
html.phone .toolbar:has(.phonemenu:not([hidden])) { z-index: 94; }
/* The status lines the toolbar carries — the patch, the review, the order — on a row of their own, only when there is one. */
html.phone .toolbar > .reviewpill { display: none !important; }
html.phone .toolbar > .patchpill, html.phone .toolbar > .orderpill {
  order: 3; flex: 1 0 100%; min-height: 34px; padding: 6px 12px; font-size: 13px; line-height: 1.3; text-align: left; white-space: normal; border-top: 1px solid var(--seam);
}
html.phone .toolbar > .patchpill[hidden], html.phone .toolbar > .writtenpill { display: none; }

/* The ⋯ list: the page's own strips, drawn as rows of a list the width of the screen. */
html.phone .phonemenu {
  position: fixed; left: 8px !important; right: 8px; top: 96px; z-index: 60; display: flex; flex-direction: column;
  max-height: calc(100dvh - var(--bar-h) - 110px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  background: var(--panel); border: 1px solid var(--seam-bright); box-shadow: 0 18px 44px rgba(0,0,0,.7);
}
/* Shut, nothing of it shows or takes a touch — but a command's form and result, which its button put inside it, stay (below). */
html.phone .phonemenu[hidden] {
  display: block; visibility: hidden; position: fixed; left: 0 !important; top: 0; width: 0; height: 0; max-height: 0; overflow: hidden; border: 0; box-shadow: none; pointer-events: none;
}
html.phone .phonemenu[hidden] :is(.commandform, .cmdresult) { visibility: visible; pointer-events: auto; }
/* A row the page hid (Freeze where there is no sheet, a view that is not offered) stays hidden: the rules below set `display`, which would draw it. */
html.phone .phonemenu :is(.modes, .commands, .toggles, .modeactions, .toolrow, .titlecmds, .phonegroup, button, a, label, span, div, input, select)[hidden] { display: none !important; }
html.phone .phonemenu :is(.modes, .commands, .toggles, .modeactions, .toolrow, .titlecmds, .phonegroup) {
  display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0; margin: 0; padding: 0; border: 0; background: transparent; position: static;
}
/* Every row the width of the list, whatever a laptop's rule did to centre or push it. */
html.phone .phonemenu :is(.modes, .commands, .toggles, .modeactions, .toolrow, .titlecmds, .phonegroup) > * { align-self: stretch; margin-left: 0; margin-right: 0; }
html.phone .phonemenu .modes[data-group]::before, html.phone .phonemenu .phonegroup .phonehead, html.phone .phonemenu .cmdsep {
  display: block; padding: 10px 16px 4px; font: 700 11px/1.2 var(--chrome); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); background: transparent; border: 0; margin: 0;
}
html.phone .phonemenu .modes[data-group]::before { content: attr(data-group); }
html.phone .phonemenu :is(button, a.cmd, .phoneitem, .livetoggle) {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; margin: 0; padding: 0 16px; border: 0; border-bottom: 1px solid var(--seam); border-radius: 0;
  background: transparent; color: var(--ink); font: 500 16px/1.25 var(--chrome); letter-spacing: 0; text-transform: none; text-align: left; text-decoration: none; white-space: normal; cursor: pointer;
}
html.phone .phonemenu :is(button, a.cmd, .phoneitem, .livetoggle):active { background: var(--panel-hi); }
html.phone .phonemenu .phoneitem em { margin-left: auto; font: 400 13px/1.2 var(--data); font-style: normal; color: var(--ink-dim); text-align: right; }
html.phone .phonemenu .phoneitem:disabled { color: var(--ink-faint); }
html.phone .phonemenu .cmd.printcmd, html.phone .phonemenu .cmd.dismiss { color: var(--ink); }
/* A view is a row with a tick where it is the one in front. */
html.phone .phonemenu .modes > button[data-mode]::before { content: ''; flex: none; width: 18px; color: var(--amber-hi); font-weight: 700; }
html.phone .phonemenu .modes > button[data-mode][aria-current="true"] { color: var(--amber-hi); }
html.phone .phonemenu .modes > button[data-mode][aria-current="true"]::before { content: '\2713'; }
html.phone .phonemenu .modes button:not(.cmd):not([data-mode]) { color: var(--ink); }
/* A tick or a switch keeps its word beside it. */
html.phone .phonemenu .livetoggle { justify-content: flex-start; max-width: none; }
html.phone .phonemenu .livetoggle input { width: 22px; height: 22px; flex: none; }
html.phone .phonemenu .livetoggle b { color: var(--ink); font-size: 16px; }
html.phone .phonemenu .livetoggle .livesaid { margin-left: auto; font-size: 13px; color: var(--ink-dim); max-width: 55%; }
html.phone .phonemenu .focustoggle, html.phone .phonemenu .zoomctl { width: 100%; }
html.phone .phonemenu .zoomctl { display: flex; align-items: center; gap: 10px; padding: 0 16px; min-height: 46px; margin: 0; font-size: 14px; color: var(--ink-dim); }
html.phone .phonemenu .zoomctl button { width: 46px; min-height: 40px; padding: 0; justify-content: center; border: 1px solid var(--seam); font-size: 20px; flex: none; }
html.phone .phonemenu .zoomctl b { flex: 1; text-align: center; }
html.phone .phonemenu .rolepill { padding: 10px 16px; font: 600 12px/1.2 var(--chrome); color: var(--ink-dim); background: transparent; }
/* A list of its own, opened by one of these (Freeze, Columns, Cable Tools): inline, under its button, the way an accordion opens. */
html.phone .phonemenu .commands.cabletools { display: flex; flex-direction: column; }
html.phone .phonemenu .cabletoolsmenu {
  position: static; display: flex; flex-direction: column; min-width: 0; width: 100%; padding: 0 0 0 14px; background: #0e1114; border: 0; border-bottom: 1px solid var(--seam-bright); box-shadow: none;
}
html.phone .phonemenu .cabletoolsmenu[hidden] { display: none; }
/* EXCHANGE's Refresh and its ▾ side by side, Replace… opening under both. */
html.phone .phonemenu .refreshgroup { display: flex; flex-wrap: wrap; }
html.phone .phonemenu .refreshgroup > .cmd:first-child { flex: 1; }
html.phone .phonemenu .refreshgroup > .cabletoolsmenu { flex-basis: 100%; }
html.phone .phonemenu .cabletoolsitem { min-height: 44px; font-size: 15px; color: var(--ink); }
html.phone .phonemenu .freezelist .freezetitle { flex-wrap: wrap; padding: 8px 16px; }
html.phone .phonemenu .freezelist .freezetitle b { font-size: 12px; }
html.phone .phonemenu .freezelist .freezetitle span { white-space: normal; font-size: 12px; }
html.phone .phonemenu .freezelist .freezehead { padding: 10px 16px 4px; font-size: 11px; }
html.phone .phonemenu .freezelist .freezenote { margin: 8px 16px; font-size: 13px; }
html.phone .phonemenu .columnslist .columnsitem { min-height: 46px; padding: 0 16px; }
html.phone .phonemenu .columnslist .columnsitem input { width: 22px; height: 22px; }
html.phone .phonemenu input[type="text"], html.phone .phonemenu input[type="search"], html.phone .phonemenu select { width: calc(100% - 32px); margin: 6px 16px; min-height: 44px; font-size: 16px; }
/* A command's form is a sheet over the page, from the bottom, whatever strip it was made in; its result is a box above the bar. */
html.phone .commandform {
  position: fixed !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: var(--bar-h) !important; z-index: 97; width: auto !important; max-width: none !important; max-height: 78dvh;
  display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 10px; overflow: auto; padding: 14px 14px 18px; border-radius: 16px 16px 0 0; border-width: 2px 0 0; border-color: var(--amber-lo);
  text-transform: none; letter-spacing: normal;
}
html.phone .commandform input, html.phone .commandform select { width: 100%; min-height: 44px; font-size: 16px; }
html.phone .commandform .go, html.phone .commandform button { min-height: 44px; font-size: 13px; }
html.phone .cmdresult { left: 10px; right: 64px; max-width: none; bottom: calc(var(--bar-h) + 40px); font-size: 13px; z-index: 92; }
html.phone .cmdresult { padding-right: 40px; }
html.phone .cmdresult .cmdclose { width: 32px; height: 32px; font-size: 20px; }

/* ---- the rail: a drawer, bigger and legible ---------------------------------------------------- */
html.phone .drawer {
  display: flex; flex-direction: column; position: fixed; left: 0; top: 0; bottom: var(--bar-h); width: var(--drawer-w); z-index: 92;
  background: #0c0e11; transform: translateX(-105%); visibility: hidden; transition: transform .2s ease-out, visibility 0s linear .2s;
}
html.phone body.railopen .drawer { transform: none; visibility: visible; transition: transform .2s ease-out, visibility 0s; box-shadow: 0 0 44px rgba(0,0,0,.75); }
html.phone .drawerhead {
  display: flex; flex-direction: column; flex: none; gap: 8px; padding: 8px 10px 10px; background: #14171c; border-bottom: 1px solid var(--seam-bright);
}
html.phone .drawerhead .drawertitle { display: flex; align-items: center; gap: 8px; min-height: 40px; }
html.phone .drawerhead .drawertitle b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 16px/1.2 var(--chrome); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
html.phone .drawerhead .drawerclose { flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.07); color: var(--ink); font: 400 22px/1 var(--chrome); cursor: pointer; }
html.phone .drawerhead .drawerseg { display: flex; gap: 1px; background: var(--seam); border: 1px solid var(--seam); }
html.phone .drawerhead .drawerapps { display: grid; grid-template-columns: 1fr 1fr; }
html.phone .drawerhead .drawerseg button { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 4px; border: 0; background: var(--panel); color: var(--ink-dim); font: 700 13px/1.1 var(--chrome); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
html.phone .drawerhead .drawermodes button { min-height: 40px; font-size: 12px; letter-spacing: .04em; }
html.phone .drawerhead .drawerseg button[aria-current="true"] { background: var(--metal); color: var(--ground); }
html.phone .drawerhead .drawerseg[hidden], html.phone .drawerhead .drawerseg button[hidden] { display: none; }
html.phone .drawerhead .drawerwho { display: flex; flex-direction: column; gap: 1px; font: 11px/1.35 var(--data); color: var(--ink-faint); }
html.phone .drawerhead .drawerwho span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The corner's buttons go under the drawer and its shade while it is open: floating over it they hid the entries beneath. */
html.phone body.railopen :is(.assistwidget, .chatwidget, .ticketbutton) { z-index: 89; }
html.phone .drawer .rail, html.phone body.railshut .drawer .rail {
  display: block; position: static; flex: 1 1 0; min-height: 0; width: auto; transform: none; transition: none; box-shadow: none; border: 0;
  padding: 0 0 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: transparent;
}
html.phone .rail::before { display: none; }
html.phone .rail .grabber { display: none; }
html.phone .rail .railgroup { border-bottom: 1px solid #1b1e23; padding-bottom: 4px; }
html.phone .rail h3 {
  display: flex; align-items: center; min-height: 42px; margin: 0; padding: 0 16px 0 28px; font: 700 13px/1.2 var(--chrome); letter-spacing: .12em; color: var(--ink-dim); cursor: pointer;
}
html.phone .rail h3::before { width: auto; margin: 0 8px 0 -16px; font-size: 12px; }
html.phone .rail h3.sub { margin: 0; padding-left: 40px; }
/* Inventory stands out in the drawer as on the laptop's rail (the owner, 2026-10-30). */
html.phone .rail .railgroup[data-key="inventory"] > h3 { color: var(--amber); font-size: 14px; }
html.phone .rail button {
  min-height: 46px; padding: 0 16px 0 20px; align-items: center; font-size: 16px; line-height: 1.25; letter-spacing: .01em; color: var(--ink); border-left-width: 4px;
}
html.phone .rail button.sub { padding-left: 36px; font-size: 16px; color: var(--ink); }
html.phone .rail button.sub2 { padding-left: 52px; }
html.phone .rail button:active { background: #191d23; }
html.phone .rail button[aria-current="true"] { background: #1c2027; color: var(--amber-hi); border-left-color: var(--amber); font-weight: 700; }
html.phone .rail button em { font-size: 13px; }
html.phone .railshade { display: none; position: fixed; inset: 0; z-index: 91; background: rgba(0,0,0,.55); touch-action: none; cursor: pointer; }
html.phone body.railopen .railshade { display: block; }

/* ---- the bottom bar --------------------------------------------------------------------------- */
html.phone .titlebar .quicknav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; margin: 0; gap: 0; align-self: auto; flex-wrap: nowrap; justify-content: space-around;
  height: var(--bar-h); padding: 0 0 env(safe-area-inset-bottom, 0px); background: var(--plate); border-top: 1px solid var(--seam-bright); box-shadow: 0 -10px 30px rgba(0,0,0,.45);
}
html.phone .titlebar .quicknav[hidden] { display: none; }
html.phone .quicknav button { flex: 1 1 0; flex-direction: row; justify-content: center; align-items: center; gap: 5px; height: 100%; padding: 0 2px; border: 0; border-top: 2px solid transparent; font-size: 11px; letter-spacing: .04em; color: var(--ink-dim); }
html.phone .quicknav button i { display: block; font-size: 15px; }
html.phone .quicknav button[aria-current="true"], html.phone .quicknav button.on { border-top-color: var(--amber); background: transparent; color: var(--amber-hi); }
html.phone .quicknav button.phone { display: inline-flex; }
html.phone .quicknav button em { position: static; margin: 0 0 0 2px; font-size: 11px; }
html.phone .quicknav button[hidden] { display: none; }

/* ---- the corner: Lumen, Chat and Feature request, above the bar and inside the screen ---------- */
html.phone .assistwidget { right: 10px; bottom: calc(var(--bar-h) + 56px); z-index: 93; }
html.phone .chatwidget { right: calc(10px + var(--assist-w, 0px)); bottom: calc(var(--bar-h) + 56px); z-index: 93; }
html.phone .ticketbutton {
  right: calc(10px + var(--assist-w, 0px) + var(--chat-w, 0px)); bottom: calc(var(--bar-h) + 56px); z-index: 93;
  display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; max-width: none; padding: 0; line-height: 1;
}
html.phone .ticketbutton .tickettext { display: none; }
html.phone .ticketbutton .ticketicon { display: inline-flex; }
html.phone .assistfab, html.phone .chatfab { gap: 8px; padding: 5px 14px 5px 5px; font-size: 11px; min-height: 46px; }
html.phone .assistfabicon, html.phone .chatfabicon { width: 34px; height: 34px; }
/* Open, Lumen's and Chat's panels are the whole screen, as high as the part of it the keyboard leaves (`--vv-h`, `--vv-top`), each with its own close. */
html.phone .assistwidgetpanel, html.phone .chatwidgetpanel {
  position: fixed; left: 0; right: 0; bottom: auto; top: var(--vv-top, 0px); width: auto; max-width: none; height: var(--vv-h, 100vh); height: var(--vv-h, 100dvh); max-height: none;
  border-radius: 0; border-width: 0 0 2px 0; z-index: 98;
}
/* A widget with its panel open is above the other two and the bar: the panel's own z-index counts only inside its widget. */
html.phone .assistwidget:has(> .assistwidgetpanel:not([hidden])), html.phone .chatwidget:has(> .chatwidgetpanel:not([hidden])) { z-index: 98; }
html.phone .assistwidgethead { padding: 8px 10px 8px 14px; min-height: 56px; }
html.phone .assistwidgetclose { width: 44px; height: 44px; font-size: 24px; line-height: 44px; }
html.phone .assistwidgetpanel .labor { padding: 8px 12px 12px; }
html.phone .assistwidgetpanel .assistantthread { max-height: none; }
/* One chip, bottom-right, opens on a tap to the three buttons (`cornerChip` in web/phone.js) and closes on a tap or a pick. A widget whose panel is open stays. */
html.phone .cornerchip {
  position: fixed; right: 10px; bottom: calc(var(--bar-h) + 8px); z-index: 94; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; border-radius: 20px; border: 2px solid var(--amber); background: var(--plate); color: var(--amber-hi); font: 700 18px/1 var(--chrome); cursor: pointer;
}
html.phone body.corneropen .cornerchip { background: var(--amber); color: var(--ground); }
html.phone body:not(.corneropen) :is(.assistwidget:not(:has(> .assistwidgetpanel:not([hidden]))), .chatwidget:not(:has(> .chatwidgetpanel:not([hidden]))), .ticketbutton) { visibility: hidden; pointer-events: none; }
/* The boxes the corner stacks above the pills. */
html.phone .renderpill, html.phone .printsaid, html.phone .casefull { left: 10px; right: 64px; max-width: none; bottom: calc(var(--bar-h) + 8px); white-space: normal; z-index: 92; }
/* The selection's figures on a phone: above the bar at the left, clear of the corner chip; the boxes above stack over it (`stackCorner`). */
html.phone .selstats {
  left: 10px; right: auto; bottom: calc(var(--bar-h) + 8px); z-index: 92; height: 32px; max-width: calc(100vw - 74px);
  padding: 0 12px; border: 1px solid var(--seam-bright); border-radius: 16px; font-size: 13px;
}
html.phone .selstats .selstatslabel { font-size: 11px; }
html.phone .renderpill { padding: 3px 8px; font-size: 10px; line-height: 1.3; }

/* ---- a pop-up fills the phone between its top and the bar --------------------------------------- */
/* Said here too, not left to style.css's rules for 900px and below: an iPad, or any window wider that a phone's agent opens, gets this layout at any width. */
html.phone .askbox, html.phone .askbox.askwizard {
  left: 8px; right: 8px; top: 8px; bottom: calc(var(--bar-h) + 8px); width: auto; max-width: none; max-height: none; transform: none;
  overflow-y: auto; -webkit-overflow-scrolling: touch; align-content: flex-start; padding: 14px 12px;
}
html.phone .askbox .askrow { position: sticky; bottom: -14px; margin: 0 -12px -14px; padding: 8px 12px 10px; background: var(--panel); border-top: 1px solid var(--seam); flex: 1 0 100%; }
html.phone .askbox input, html.phone .askbox select, html.phone .askbox textarea { font-size: 16px; }
html.phone .findall, html.phone .folderpick, html.phone .dialog { bottom: calc(var(--bar-h) + 8px); }
html.phone .previewer { inset: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }

/* A field anywhere is 16px or more: smaller, and a phone's browser zooms the page in on it and leaves it zoomed — the right-hand corner then sits off the edge. */
html.phone input:not([type="checkbox"]):not([type="radio"]), html.phone select, html.phone textarea { font-size: 16px; }
html.phone .grid .colfilter, html.phone .cellbar .barvalue, html.phone .grid .cell-edit { font-size: 16px; }

/* ---- a sheet on a phone ------------------------------------------------------------------------- */
html.phone .sheetframe { border: 0; background: transparent; }
html.phone .gridwrap { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: thin; }
html.phone .cellbar { min-height: 38px; }
html.phone .cellbar .addr { min-width: 0; max-width: 42%; padding: 0 8px; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .08em; }
html.phone .cellbar .barvalue { height: 38px; padding: 0 10px; }
html.phone .grid tbody td { height: 32px; padding: 0 8px; font-size: 13px; line-height: 1.2; }
html.phone .sheetframe[data-rowh] .grid tbody td { height: var(--row); line-height: 15px; }
html.phone .grid thead th { padding: 6px 8px; font-size: 10px; }
html.phone .grid th.rownum { width: 38px; padding: 0 6px 0 0; font-size: 11px; cursor: pointer; }
html.phone .grid thead th .caret { padding: 8px 5px; }
html.phone .grid thead tr.filterrow { display: none; }
html.phone body.phonefilters .grid thead tr.filterrow { display: table-row; }
/* The sheet's own Format bar is a row of its own, one line, sideways — kept away until Format cells is asked for. */
html.phone .sheetframe > .formatbar { display: none; }
html.phone body.phoneformat .sheetframe > .formatbar { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
html.phone body.phoneformat .sheetframe > .formatbar > * { flex: none; }
/* What fights a finger scrolling: the fill handle, the row's drag handle and its height grip, the headings' resize grips and drag handles. */
html.phone .fillhandle, html.phone .rowhandle, html.phone .rowgrip, html.phone .grid thead .grip, html.phone .grid thead .handle { display: none; }
/* An iPhone still wants the prefixed word: without it a long press on a cell selects its text and raises the system's copy bubble over the menu. */
html.phone .grid { touch-action: manipulation; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
html.phone .grid .cell-edit, html.phone .grid input, html.phone .grid textarea { -webkit-user-select: text; user-select: text; }
/* A heading is its words and the caret's room: the caret is the way into Sort and Filter on a screen with no hover. */
html.phone .grid thead th[data-c] { padding-right: 22px; letter-spacing: .04em; }
html.phone .grid thead th .caret { position: absolute; right: 0; top: 0; bottom: 0; transform: none; display: flex; align-items: center; padding: 0 7px; font-size: 11px; opacity: .7; }

/* The menu and the lists a sheet opens — a long press's menu, a drop-down's list, a column's filter: rows a finger can land on, above the bottom bar, scrolling inside themselves. */
html.phone .cellmenu { z-index: 99; min-width: min(260px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
html.phone .cellmenu button { min-height: 44px; padding: 0 14px; font-size: 15px; }
html.phone .cellmenu button em { font-size: 11px; }
html.phone .cellmenu hr { margin: 0; }
html.phone .cellpicker { z-index: 99; max-height: 46dvh; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
html.phone .cellpicker:not(.cellcalendar) button { display: flex; align-items: center; min-height: 44px; padding: 0 14px; font-size: 15px; }
html.phone .cellpicker.detailed button { align-items: baseline; padding: 8px 14px; }
html.phone .cellpicker .optdetail { font-size: 12px; }

/* A document in a list (Paperwork, Label sheets): its name and what is wrong with it on a line, what it is under it, its buttons on a line of their own — across, they ran off the screen. */
html.phone .sheet { flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 12px; }
html.phone .sheets.one .sheet { padding: 10px 12px; gap: 6px 10px; }
html.phone .sheet b { flex: 1 1 0; min-width: 0; font-size: 15px; letter-spacing: .02em; overflow-wrap: anywhere; }
html.phone .sheet .stalemark { order: 2; }
html.phone .sheet > span { order: 3; flex: 1 0 100%; margin-left: 0; font-size: 12px; line-height: 1.4; }
html.phone .sheet .rowprint, html.phone .sheets.one .sheet .rowprint { order: 4; margin-left: 0; min-height: 40px; padding: 0 14px; font-size: 11px; }

/* Settings: the list of tables is one button — the table in front and a caret — that opens the list over the pane and closes on a pick; the pane has the whole width. */
html.phone .adminsplit { grid-template-columns: minmax(0, 1fr); align-items: stretch; background: transparent; border: 0; gap: 8px; }
html.phone .adminpick {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--seam-bright); background: var(--panel);
  color: var(--amber); font: 700 14px/1.2 var(--chrome); letter-spacing: .08em; text-transform: uppercase; text-align: left; cursor: pointer;
}
html.phone .adminpickword { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.phone .adminpick[aria-expanded="true"] { background: #1c2027; }
html.phone .adminsplit:not(.listopen) .adminlistwrap { display: none; }
html.phone .adminlistwrap { border: 1px solid var(--seam); background: var(--panel); padding: 8px; }
html.phone .adminlist { position: static; max-height: none; overflow: visible; }
html.phone .adminlist button { min-height: 44px; padding: 8px 14px; }
html.phone .adminlist button b { font-size: 15px; }
html.phone .adminlist .admingroup { min-height: 44px; font-size: 12px; letter-spacing: .12em; }
html.phone .adminlist .admingrouprows button { padding: 8px 14px 8px 28px; }
html.phone .adminlist .admingrouprows button b { font-size: 15px; }
html.phone .adminsearch { min-height: 44px; font-size: 16px; }
html.phone .adminglobal { display: flex; align-items: center; min-height: 44px; }

/* A setting is its label over its control, wrapping where it has more than one (a list and its hint, a box and a button): beside each other they ran past the pane. */
html.phone .scalarfield { flex-wrap: wrap; gap: 6px 10px; padding: 8px 10px 12px; }
html.phone .scalarfield > span:first-child { flex: 1 0 100%; min-width: 0; }
html.phone .scalarfield > span:first-child:empty { display: none; }
html.phone .scalarfield select, html.phone .scalarfield input.scalar, html.phone .scalarfield textarea { flex: 1 1 0; min-width: 0; max-width: 100%; min-height: 44px; }
html.phone .scalarfield button, html.phone .scalarfield .cmd { min-height: 44px; }

/* Truck pack: the tally and the sheet stack in a column that can shrink, the tally scrolling in its own box (a bare 1fr track is as wide as the widest table in it). */
html.phone .truckbody { grid-template-columns: minmax(0, 1fr); }
html.phone .truckbody > * { min-width: 0; }

/* A bar of buttons with a path box (the Order page's Bill of materials and Order sheet): the buttons wrap under the box instead of running off the screen. */
html.phone .importbar { flex-wrap: wrap; gap: 6px 8px; }
html.phone .importbar .bompath { flex: 1 1 100%; min-width: 0; font-size: 16px; }
html.phone .importbar .cmd, html.phone .importbar button { min-height: 40px; }
/* The folder a publish goes to is a line of its own, whole, where it was one box cut to its first letter beside its buttons. */
html.phone .publishpath { flex: 1 1 100%; white-space: normal; overflow-wrap: anywhere; font-size: 12px; }

/* Above a page's one sheet: its bars and notes, folded under one line (`foldAboveSheet` in web/phone.js). */
html.phone main:not(.phoneabove-open) .phoneabove { display: none !important; }
html.phone .phonefold {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 42px; margin: 0 0 6px; padding: 0 14px; border: 1px solid var(--seam-bright);
  background: var(--panel); color: var(--amber); font: 700 12px/1 var(--chrome); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; text-align: left;
}
html.phone .phonefold[aria-expanded="true"] { background: #1c2027; }

/* ---- a row as a card ------------------------------------------------------------------------------ */
html.phone .askbox.rowcard {
  display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; padding: 0; overflow: hidden; align-content: stretch;
}
html.phone .rowcardhead { flex: none; padding: 12px 14px 10px; border-bottom: 1px solid var(--seam-bright); background: #14171c; }
html.phone .rowcardtitle { display: block; font: 700 12px/1.2 var(--chrome); letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
html.phone .rowcardplace { display: block; margin-top: 3px; font: 14px/1.3 var(--data); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.phone .rowcardbody { flex: 1 1 0; min-height: 0; padding: 4px 14px 12px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
html.phone .rowcardfield { display: flex; flex-direction: column; gap: 5px; padding: 10px 0 11px; border-bottom: 1px solid var(--seam); }
html.phone .rowcardlabel { font: 700 11px/1.2 var(--chrome); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }
html.phone .rowcardhint { font: 12px/1.35 var(--data); color: var(--ink-faint); }
html.phone .rowcardnote { font: 12.5px/1.35 var(--data); color: var(--ink-dim); white-space: pre-wrap; }
html.phone .rowcardinput, html.phone .rowcardselect {
  box-sizing: border-box; width: 100%; min-height: 46px; padding: 8px 12px; background: #0e1114; color: var(--ink); border: 1px solid var(--seam-bright); border-radius: 8px;
  font: 16px/1.3 var(--data); appearance: none; -webkit-appearance: none;
}
html.phone .rowcardselect { background-image: linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%), linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
html.phone .rowcardinput:focus, html.phone .rowcardselect:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber-lo); }
html.phone .rowcardvalue.locked { min-height: 24px; padding: 6px 0; font: 16px/1.3 var(--data); color: var(--ink-faint); word-break: break-word; }
html.phone .rowcardcheck { width: 30px; height: 30px; margin: 2px 0; accent-color: var(--amber); }
html.phone .rowcardpicker .pickchip { min-height: 36px; font-size: 14px; }
html.phone .rowcardpicker .pickchip .scopetoggle { min-width: 32px; min-height: 32px; }
html.phone .rowcardpicker .pickoption { min-height: 44px; align-items: center; font-size: 16px; }
html.phone .rowcardpick { width: 100%; min-height: 46px; justify-content: flex-start; text-align: left; text-transform: none; letter-spacing: 0; font: 16px/1.3 var(--data); color: var(--ink); background: #0e1114; border: 1px solid var(--seam-bright); border-radius: 8px; padding: 8px 12px; }
html.phone .rowcardinput.saving, html.phone .rowcardselect.saving, html.phone .rowcardpick.saving { border-color: #c9932e; }
html.phone .rowcardinput.saved, html.phone .rowcardselect.saved, html.phone .rowcardpick.saved { border-color: #2a8a3a; }
html.phone .rowcardinput.failed, html.phone .rowcardselect.failed, html.phone .rowcardpick.failed { border-color: #c0392b; background: #2a1215; }
html.phone .rowcardsaid { flex: none; display: block; min-height: 0; padding: 0 14px; font: 13px/1.4 var(--data); font-style: normal; color: var(--amber-hi); }
html.phone .rowcardsaid:not(:empty) { padding: 6px 14px; }
html.phone .rowcardsaid.bad { color: #ff8f9b; }
html.phone .askbox.rowcard .askrow.rowcardfoot {
  position: static; flex: none; display: flex; flex-wrap: nowrap; gap: 8px; margin: 0; padding: 10px 12px calc(10px + 0px); background: var(--panel); border-top: 1px solid var(--seam-bright);
}
html.phone .rowcardfoot .cmd { flex: 1 1 0; min-width: 0; min-height: 46px; padding: 0 6px; font-size: 12px; letter-spacing: .06em; display: flex; align-items: center; justify-content: center; }
html.phone .rowcardfoot .cmd:disabled { opacity: .4; }

/* ---- a tablet: the phone's layout, at a phone's widths --------------------------------------------- */
/* An iPad, an Android tablet or a window dragged wide that a phone's agent opened keeps this layout, but not the screen's whole width: the drawer, the list under the ⋯, the menus, a pop-up and the two panels stay as wide as a phone's. */
@media (min-width: 700px) {
  html.phone { --drawer-w: 380px; }
  html.phone .phonemenu { left: auto !important; right: 8px; width: 420px; }
  html.phone .menupanel { left: 8px; right: auto; width: 420px; }
  html.phone .askbox, html.phone .askbox.askwizard {
    left: 50%; right: auto; top: calc(50% - var(--bar-h) / 2); bottom: auto; width: min(680px, calc(100vw - 32px));
    max-height: calc(100dvh - var(--bar-h) - 24px); transform: translate(-50%, -50%);
  }
  /* The row card is as tall as the room, its fields scrolling inside it. */
  html.phone .askbox.rowcard { top: 8px; bottom: calc(var(--bar-h) + 8px); max-height: none; transform: translateX(-50%); }
  html.phone .assistwidgetpanel, html.phone .chatwidgetpanel { left: auto; width: min(480px, 100vw); border-width: 0 0 0 2px; }
  html.phone .cmdresult, html.phone .renderpill, html.phone .printsaid, html.phone .casefull { left: auto; width: 380px; }
  html.phone .commandform { left: auto !important; right: 0 !important; width: min(520px, 100vw) !important; border-radius: 16px 0 0 0; }
}

/* ---- the ribbon and the show tabs wait for a swipe down from the top edge (`swipeChrome` in web/phone.js) ---- */
html.phone:not(.chromeshown) .titlebar .platetop, html.phone:not(.chromeshown) .titlebar .shows > :not(.quicknav) { display: none !important; }
html.phone:not(.chromeshown) .titlebar .shows { height: 0; min-height: 0; padding: 0; border: 0; overflow: visible; }
html.phone.chromeshown .titlebar .platetop { position: fixed; left: 0; right: 0; top: 0; z-index: 97; background: var(--plate); box-shadow: 0 8px 24px rgba(0,0,0,.5); }
html.phone.chromeshown .titlebar .shows { position: fixed; left: 0; right: 0; top: 38px; z-index: 97; height: auto; background: var(--plate); box-shadow: 0 8px 24px rgba(0,0,0,.5); }

/* Where there is no bottom bar to leave room for (Home, a page of no show), the room is not left. */
html.phone:has(.titlebar .quicknav[hidden]) { --bar-h: env(safe-area-inset-bottom, 0px); }

/* ---- a phone turned on its side ---------------------------------------------------------------- */
/* The window is barely 350px high: the bars keep what is needed — the menus, the toolbar and a thinner bottom bar — and the show's tabs wait for the phone to be turned upright. */
@media (max-height: 500px) {
  /* The strip is no height at all, not `display: none`: the bottom bar is a child of it, fixed to the foot. */
  html.phone .titlebar .shows { height: 0; min-height: 0; padding: 0; border: 0; overflow: visible; }
  html.phone .quicknav button { flex-direction: row; gap: 8px; border-top-width: 2px; }
  html.phone .quicknav button i { font-size: 17px; }
  html.phone .quicknav button em { position: static; margin: 0 0 0 2px; }
  html.phone .toolbar > .railtoggle, html.phone .toolbar > .phonemore > .phonemorebtn { height: 44px; }
  html.phone .toolbar { min-height: 44px; }
  html.phone .assistwidgethead { min-height: 48px; }
}

}
/* The summary row under a sheet, as tall as a row and in the rows' type; its count in the frozen first column's cell. */
html.phone .grid tfoot.summaryfoot td, html.phone .grid tfoot.summaryfoot th { height: 32px; font-size: 13px; }
html.phone .grid tfoot.summaryfoot th.summarycorner { width: 38px; padding: 0 6px 0 0; }

/* The keyboard shortcut list on a phone (a keyboard attached): a key over what it does, one column. */
html.phone .shortcutsgroup dl { grid-template-columns: 1fr; gap: 0 0; }
html.phone .shortcutsgroup dt { white-space: normal; margin-top: 6px; }
/* A record's comments (wave 3, 2026-10-14): the row card's Comments beside the row's name; the thread fills the screen as every pop-up does. */
html.phone .rowcardhead:has(.rowcardcomments) { display: flex; align-items: center; gap: 10px; }
html.phone .askbox.commentsbox .commentlist { max-height: none; flex: 1 1 auto; }
html.phone .askbox.commentsbox .commentbox { font-size: 16px; }
/* The Timeline layout on a phone (wave 4, 2026-10-14): a vertical agenda, a day at a time, in place of the bars; a tap opens the record. */
html.phone .tl .tlscroll { display: none; }
html.phone .tl .tlf-end, html.phone .tl .tlf-startTime, html.phone .tl .tlf-endTime, html.phone .tl .tlf-labelBy { display: none; }
html.phone .tl .tlzooms, html.phone .tl .tltoday { display: none; }
html.phone .tl .tlfield { width: calc(33vw - 14px); }
html.phone .tl .tlpick { font-size: 16px; }
html.phone .tl .tlagenda { display: block; flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 0 12px; }
html.phone .tl .tladay h3 { position: sticky; top: 0; margin: 0; padding: 8px 12px; font-size: 14px; background: var(--panel); color: var(--amber); z-index: 1; }
html.phone .tl .tladay.today h3 { color: var(--amber-hi); }
html.phone .tl .tlaitem { display: flex; gap: 10px; width: 100%; min-height: 48px; padding: 8px 12px; text-align: left; font: 15px var(--chrome); color: var(--sheet-ink);
  background: var(--sheet); border: none; border-bottom: 1px solid var(--sheet-line); border-left: 4px solid var(--sheet-rule); }
html.phone .tl .tlaitem.goingon { color: var(--sheet-dim); }
html.phone .tl .tlatime { flex: none; width: 74px; font-variant-numeric: tabular-nums; color: var(--sheet-dim); }
html.phone .tl .tlawords { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html.phone .tl .tlawords small { font-size: 12px; color: var(--sheet-dim); }
html.phone .tl .tlempty { padding: 16px; color: var(--sheet-dim); }

/* The Kanban layout on a phone: one column at a time, picked from the bar's Column list, the full width. */
html.phone .kanbanbar { gap: 6px 10px; padding: 6px; }
html.phone .kanbanpick { font-size: 16px; }
html.phone .kanbanlanes { padding: 6px; overflow-x: hidden; }
html.phone .kanbanlane { flex: 1 1 auto; width: auto; min-width: 0; }
html.phone .kanbancard { cursor: pointer; }
html.phone .kanbancardtitle { font-size: 15px; }
/* Gallery on a phone: one column of cards the width of the screen; the page scrolls and the cards follow it (`web/sheet-layout-gallery.js`). */
html.phone .gallerybox { min-height: 0; }
html.phone .gallerybar { padding: 0 8px; }
html.phone .gallerytick { width: 22px; height: 22px; }
/* A shared view's read-only link pop-up on a phone (wave 4, 2026-10-14). */
html.phone .askbox.askviewlink .viewlinkrow { flex-direction: column; align-items: stretch; }
html.phone .askbox.askviewlink .viewlinkaddress { font-size: 16px; }
html.phone .askbox.askviewlink .viewlinkqr { align-self: center; }
html.phone .askbox.bulkshare { min-width: 0; max-width: none; }
/* Rules (#21): the editor's lines stack, a field and its value each a whole line; the log scrolls in its own box. */
html.phone .askbox.rulebox, html.phone .askbox.rulesheetbox { min-width: 0; max-width: none; width: auto; }
html.phone .ruleline select, html.phone .ruleline input { flex: 1 1 100%; font-size: 16px; }
html.phone .rulerow { flex-direction: column; }
html.phone .rulespanel { overflow-x: auto; }
html.phone .askbox.rulebox .askrow, html.phone .askbox.rulesheetbox .askrow { flex: 0 0 auto; }
/* A sheet's form maker on a phone: one column, the address over its QR, type large enough not to zoom. */
html.phone .askbox.askform { max-width: calc(100vw - 32px); }
html.phone .askbox.askform .formdetail { padding-left: 0; }
html.phone .askbox.askform .asktext, html.phone .askbox.askform select { font-size: 16px; }
html.phone .askbox.askform .viewlinkrow { flex-direction: column; align-items: stretch; }
html.phone .askbox.askform .viewlinkqr { align-self: center; }

/* The Labor and Management home pages' cards stack one to a row on a phone (2026-10-16). */
html.phone .tocgrid { grid-template-columns: 1fr; gap: 10px; }
html.phone .tocrow { padding: 10px 12px; min-height: 44px; }

/* Ask Lumen to fill… (`web/fill-column.js`): the review a row a line in the screen's width, the proposal under what it holds. */
html.phone .askbox.bulkedit.fillcolumn { width: calc(100vw - 16px); max-width: calc(100vw - 16px); }
html.phone .askbox.bulkedit .fillreview { max-height: none; }
/* The shared sticky foot's `flex: 1 0 100%` would be the whole height of a column pop-up. */
html.phone .askbox.bulkedit.fillcolumn > .askrow { flex: 0 0 auto; margin-top: auto; }
html.phone .askbox.bulkedit .filltable th:first-child, html.phone .askbox.bulkedit .filltable td.fillrow { width: 30px; padding: 3px 2px; }
html.phone .askbox.bulkedit .filltable th:last-child, html.phone .askbox.bulkedit .filltable td.filltickcell { width: 40px; padding: 3px 4px; }
html.phone .askbox.bulkedit .filltable .fillvalue { min-width: 0; }
html.phone .askbox.bulkedit .filltable .filltick { width: 22px; height: 22px; }
html.phone .askbox.bulkedit .fillask { margin-left: 0; }
html.phone .askbox { resize: none; }

/* A document's Layout in its Page setup: the fields over the sample page. */
html.phone .layoutedit { grid-template-columns: 1fr; }

/* Lumen assist on a phone: the width of the screen above the bottom bar (`web/cable-dictate.js`). */
html.phone .dictatepanel { left: 8px; right: 8px; width: auto; top: auto; bottom: calc(var(--bar-h, 0px) + 8px); max-height: 60vh; }
html.phone .dictatepanel .dictatetype { font-size: 16px; }

/* Management › Crew letter on a phone: the cards over the text, every row one control wide. */
html.phone .crewletter { grid-template-columns: minmax(0, 1fr); }
html.phone .crewletter .clsections, html.phone .crewletter .clside { max-height: none; overflow: visible; padding-right: 0; }
html.phone .crewletter .clfield, html.phone .crewletter .clhospital { grid-template-columns: minmax(0, 1fr); }
html.phone .crewletter .clinput { font-size: 16px; }

/* Distribute from the call sheet: a filter's name over its two controls on a phone. */
html.phone .askbox.askcalldist .calldistfilter { grid-template-columns: 1fr; }
/* Shares fixture cases with: the drop-down's list opens in place under its box, inside the pop-up's own scroll (2026-10-28). */
html.phone .sharespick .picklist { position: static; margin-top: 2px; box-shadow: none; }