/* Build 41 · the phone layout. Every rule is scoped to html.hos-phone, which phone-shell.js sets at 700px wide or
   less, so the desktop layout is untouched. The desk is the navigation; pages keep their content and lose their
   chrome. Text at least 12px, tap targets at least 44px. */

/* ── the shared phone system (docs/PHONE-UI.md). Every phone surface, Claude's or Astra's, reads these; nobody
   hard-codes a bar height or a layer number. ── */
:root {
  --ph-header-h: 56px;
  --ph-bar-h: 76px;
  --ph-bar-space: calc(var(--ph-bar-h) + env(safe-area-inset-bottom, 0px));
  --ph-z-header: 60; --ph-z-bar: 70; --ph-z-sheet: 75; --ph-z-file: 80; --ph-z-menu: 90; --ph-z-modal: 95; --ph-z-turn: 120;
}
html.hos-phone { --hos-world-bottom-offset: var(--ph-bar-space); }

/* ── chrome that the desk replaces ── */
html.hos-phone .hp-header,
html.hos-phone .hp-turn,
html.hos-phone .hp-sidebar,
html.hos-phone .hp-footer,
html.hos-phone .hx-medallion-wrap { display: none !important; }
html.hos-phone body { overflow-x: hidden; }
html.hos-phone .hos-places { padding-bottom: calc(var(--ph-bar-space) + 22px); }
html.hos-phone .hp-shell { display: block !important; }
html.hos-phone .hp-content { padding: 0 !important; margin: 0 !important; width: auto !important; max-width: 100vw; }

/* ── the one-line header (new look: docs/new-look/mockups/gen.cjs, phead()) ── */
.ph-header { position: sticky; top: 0; z-index: var(--ph-z-header); background: var(--nl-ink); color: var(--nl-snow); padding-top: env(safe-area-inset-top);
  font-family: var(--nl-sans); }
.ph-header-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 4px 0 16px; font-size: 14px; white-space: nowrap; overflow: hidden; }
.ph-header-row > span, .ph-header-row > svg { flex: 0 0 auto; }
.ph-crest { color: var(--nl-snow); }
html.hos-phone .hos-places .ph-header button { border: 0; background: none; color: inherit; box-shadow: none; border-radius: 0; text-align: left; }
.ph-q { font-family: var(--nl-mono); font-size: 12px; letter-spacing: .01em; color: var(--nl-snow); }
.ph-cash { font-weight: 700; font-variant-numeric: tabular-nums; }
.ph-more { margin-left: auto; min-height: 44px; min-width: 44px; padding: 0 12px !important; border: 0; background: none; color: var(--nl-pale); font: inherit; font-size: 14px; cursor: pointer; }
.ph-back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 6px 0 0 !important; margin-left: -4px; border: 0; background: none; color: inherit; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
.ph-back span { font-size: 22px; line-height: 1; }
.ph-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 0; padding: 4px 16px 14px; border-top: 1px solid var(--nl-night-line); }
.ph-stats div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--nl-night-line); padding-bottom: 6px; }
.ph-stats dt { font-size: 12px; color: var(--nl-pale); }
.ph-stats dd { margin: 0; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 380px) { .ph-header-row { gap: 8px; padding-left: 12px; } .ph-crest { display: none; } }

/* ── the bottom bar (new look, pbar()): ink, the Waterfront outlined, the one primary button filling the rest ── */
.ph-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--ph-z-bar); display: flex; flex-direction: column; gap: 2px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--nl-ink); border-top: 0; font-family: var(--nl-sans); }
.ph-bar-row { display: flex; gap: 10px; }
html.hos-phone .hos-places .ph-bar button { box-shadow: none; transition: none; border-radius: 0; font-family: var(--nl-sans); text-align: center; }
html.hos-phone .hos-places .ph-bar .ph-depts { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 18px;
  border: 1.5px solid #6f8790; background: transparent; color: var(--nl-snow); font-size: 15px; font-weight: 600; }
html.hos-phone .hos-places .ph-bar .ph-primary { flex: 1 1 auto; min-height: 52px; padding: 0 12px; border: 1.5px solid var(--nl-snow); background: var(--nl-snow); color: var(--nl-ink);
  font-size: 16px; font-weight: 600; }
html.hos-phone .hos-places .ph-bar .ph-primary.ph-sun { background: var(--nl-sun); border-color: var(--nl-sun); }
html.hos-phone .hos-places .ph-bar .ph-primary:disabled { opacity: .5; }
html.hos-phone .hos-places .ph-bar .ph-secondary { min-height: 44px; padding: 0; border: 0; background: none; color: var(--nl-pale); font-size: 14px; text-decoration: underline; }
html.hos-phone .hos-places .ph-bar .ph-depts:hover:not(:disabled) { border-color: var(--nl-snow); background: transparent; }
html.hos-phone .hos-places .ph-bar .ph-primary:hover:not(:disabled) { background: var(--nl-snow); border-color: var(--nl-snow); }
html.hos-phone .hos-places .ph-bar .ph-primary.ph-sun:hover:not(:disabled) { background: var(--nl-sun); border-color: var(--nl-sun); }
html.hos-phone .hos-places .ph-bar button:focus-visible { outline: 2px solid var(--nl-sun); outline-offset: 2px; }

/* ── the departments sheet ── */
.ph-sheet { position: fixed; inset: 0; z-index: var(--ph-z-menu); display: flex; flex-direction: column; background: #e7eced; color: #11232c;
  padding-top: env(safe-area-inset-top); font-family: 'IBM Plex Sans', system-ui, sans-serif; }
.ph-sheet-head { display: flex; align-items: center; min-height: 56px; padding: 0 8px 0 16px; border-bottom: 1px solid #c7d2d3; }
.ph-sheet-head h1 { margin: 0; font-family: 'PT Serif', Georgia, serif; font-size: 24px; }
.ph-x { margin-left: auto; width: 44px; height: 44px; border: 0; background: none; color: #11232c; font-size: 28px; line-height: 1; cursor: pointer; }
.ph-sheet-body { flex: 1 1 auto; overflow-y: auto; padding: 0 16px calc(24px + env(safe-area-inset-bottom)); }
.ph-sheet-body h2 { margin: 18px 0 4px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: #4a5f69; }
.ph-row { display: flex; align-items: center; width: 100%; min-height: 48px; padding: 0; border: 0; border-bottom: 1px solid #c7d2d3;
  background: none; color: #11232c; font: inherit; font-size: 17px; text-align: left; cursor: pointer; }
.ph-row em { margin-left: auto; font-style: normal; font-size: 14px; color: #4a5f69; }
.ph-row em.req { color: #8f2230; }

html.hos-phone .hos-places .ph-sheet .ph-row { border: 0; border-bottom: 1px solid #c7d2d3; border-radius: 0; background: none; color: #11232c; padding: 0; }
html.hos-phone .hos-places .ph-sheet .ph-x { border: 0; background: none; color: #11232c; padding: 0; }
html.hos-phone .hos-places .ph-sheet h1 { letter-spacing: 0; text-transform: none; color: #11232c; }

/* ── the phone desk ── */
.ph-desk { padding: 16px 16px 0; display: flex; flex-direction: column; gap: 12px; font-family: 'IBM Plex Sans', system-ui, sans-serif; color: #11232c; }
.ph-desk-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ph-desk-head h1 { margin: 0; font-family: 'PT Serif', Georgia, serif; font-size: 30px; line-height: 1.1; }
.ph-desk-head span { font-size: 14px; color: #4a5f69; }
.ph-focus { border: 1px solid #6f8790; }
.ph-focus, .ph-clear { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; background: #11232c; color: #e7eced; }
.ph-focus b, .ph-clear b { font-size: 16px; }
.ph-focus span, .ph-clear span { font-size: 14px; line-height: 1.4; color: #c9d4d6; }
.ph-cards { display: flex; flex-direction: column; gap: 10px; }
.ph-card.ph-first > .dk-item { outline: 3px solid #11232c; outline-offset: 3px; }
html.hos-phone .ph-card .dk-item { display: flex !important; flex-direction: column; align-items: stretch; gap: 4px; width: 100% !important; min-height: 64px;
  height: auto !important; margin: 0 !important; padding: 12px 14px !important; transform: none !important; border-radius: 12px; text-align: left; box-sizing: border-box; }
html.hos-phone .ph-card .dk-item .dk-head { display: flex; align-items: center; gap: 8px; font-size: 12px; }
html.hos-phone .ph-card .dk-item .dk-title { font-size: 16px; font-weight: 600; line-height: 1.3; }
html.hos-phone .ph-card .dk-item .dk-line,
html.hos-phone .ph-card .dk-item .dk-cost,
html.hos-phone .ph-card .dk-item .dk-ifleft { font-size: 14px; line-height: 1.4; }
.ph-done { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; border-radius: 12px; border: 1px dashed #c7d2d3; color: #4a5f69; font-size: 14px; }
.ph-done span { color: #2f7d4e; }
.ph-more { border-top: 1px solid #c7d2d3; }
.ph-more > summary { min-height: 48px; display: flex; align-items: center; font-size: 16px; font-weight: 500; cursor: pointer; }
.ph-more[open] > summary { margin-bottom: 8px; }

/* ── a file opened from the desk: full screen ── */
html.hos-phone .dk-portal { position: fixed !important; inset: 0 !important; top: 0 !important; width: auto !important; max-width: none !important;
  height: 100% !important; max-height: none !important; margin: 0 !important; border-radius: 0 !important; z-index: var(--ph-z-file); overflow-y: auto;
  padding: calc(8px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)) !important; box-sizing: border-box; transform: none !important; }
html.hos-phone .ph-portal-back { color: #11232c; margin-bottom: 6px; }
html.hos-phone .dk-portal .dk-option,
html.hos-phone .dk-portal .dk-portal-foot button,
html.hos-phone .dk-portal .dk-job-acts button,
html.hos-phone .dk-portal .dk-link { min-height: 48px; font-size: 15px; }
html.hos-phone .dk-portal .dk-options { display: flex; flex-direction: column; gap: 8px; }
html.hos-phone .dk-portal .dk-portal-foot { display: flex; flex-direction: column; gap: 8px; }
html.hos-phone .dk-modal-back { align-items: flex-end; padding: 0 !important; z-index: var(--ph-z-modal) !important; }
html.hos-phone .dk-modal > * { flex-shrink: 0; }
html.hos-phone .dk-modal { width: 100% !important; max-width: none !important; max-height: 92vh !important; overflow-y: auto !important; padding-left: 16px !important; padding-right: 16px !important; border-radius: 16px 16px 0 0 !important; margin: 0 !important;
  padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important; }
html.hos-phone .dk-modal-acts { display: flex; flex-direction: column; gap: 8px; }
html.hos-phone .dk-modal-acts button { min-height: 48px; }

/* ── department pages: content first ── */
html.hos-phone .hx-workspace { width: auto !important; max-width: 100vw; }
html.hos-phone .hx-banner { display: block !important; padding: 14px 16px 10px !important; min-height: 0 !important; }
html.hos-phone .hx-banner .hx-crest,
html.hos-phone .hx-banner .hx-banner-meta,
html.hos-phone .hx-banner .hx-banner-copy > p,
html.hos-phone .hx-banner .hx-crumbs { display: none !important; }
html.hos-phone .hx-banner h1 { font-size: 26px !important; line-height: 1.15; margin: 0 !important; }
html.hos-phone .hx-body { display: block !important; }
html.hos-phone .hx-rail { position: static !important; width: auto !important; max-width: none !important; min-height: 0 !important; height: auto !important;
  padding: 0 0 4px !important; border: 0 !important; background: none !important; }
html.hos-phone .hx-rail > .hx-search,
html.hos-phone .hx-rail > .hx-rail-fill,
html.hos-phone .hx-rail > .hx-rail-lead,
html.hos-phone .hx-rail > .dk-rail { display: none !important; }
html.hos-phone .hx-sections { display: flex !important; flex-direction: row !important; gap: 8px; overflow-x: auto; padding: 4px 16px 8px; scrollbar-width: none; }
html.hos-phone .hx-sections::-webkit-scrollbar { display: none; }
html.hos-phone .hx-sections button { flex: 0 0 auto; width: auto !important; min-height: 44px; padding: 0 14px !important; border-radius: 22px !important;
  border: 1px solid #c7d2d3 !important; white-space: nowrap; font-size: 15px !important; }
html.hos-phone .hx-sections button.active { background: #11232c !important; color: #e7eced !important; border-color: #11232c !important; }
html.hos-phone .hx-sections button > b,
html.hos-phone .hx-sections button > svg { display: none; }
html.hos-phone .hx-center,
html.hos-phone .hx-right { width: auto !important; max-width: 100vw; padding: 0 16px 16px !important; margin: 0 !important; box-sizing: border-box; }
html.hos-phone .hx-right { position: static !important; border: 0 !important; }
html.hos-phone .hx-center img,
html.hos-phone .hx-center svg,
html.hos-phone .hx-center canvas { max-width: 100%; height: auto; }
html.hos-phone .gd-strip { margin: 0 0 10px !important; padding-left: 16px !important; padding-right: 16px !important; }
html.hos-phone .gd-strip-compact { display: flex !important; flex-wrap: wrap; gap: 8px; }
html.hos-phone .gd-strip-compact .gd-compact-now { flex: 1 1 100%; }
html.hos-phone .gd-strip-toggle { min-height: 44px; }

/* ── type and touch floors on every page ── */
html.hos-phone .hos-places small,
html.hos-phone .hos-places .hp-muted,
html.hos-phone .hos-places [class*="-label"],
html.hos-phone .hos-places .hx-foot { font-size: max(12px, 1em) !important; }
html.hos-phone .hos-places button,
html.hos-phone .hos-places select,
html.hos-phone .hos-places summary { min-height: 44px; }
html.hos-phone .hos-places input[type="search"],
html.hos-phone .hos-places input[type="text"],
html.hos-phone .hos-places select { font-size: 16px; } /* iOS zooms into anything smaller */
html.hos-phone table { display: block; max-width: 100%; overflow-x: auto; }

/* ── Build 42 · the phone desk: what needs you, then what is optional ── */
.ph-group { margin: 4px 0 -2px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: #9fb2b8; }
.ph-also > summary { padding: 10px 0; }
.ph-also > summary > span { display: flex; flex-direction: column; gap: 2px; }
.ph-also > summary small { font-size: 13px; font-weight: 400; color: #9fb2b8; }
.ph-also[open] > .ph-cards { margin-bottom: 8px; }
.ph-now h2 { color: #8f2230; }
.ph-term { align-self: flex-start; min-height: 36px !important; padding: 4px 12px !important; border-radius: 18px !important; border: 1px solid #6f8790 !important; background: transparent !important; color: #e7eced !important; font-size: 14px; }
.ph-term.lost { border-color: #c97a84 !important; }
.ph-intro { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; background: #f5f8f8; color: #11232c; }
.ph-intro b { font-size: 16px; }
.ph-intro ol { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.45; }
html.hos-phone .hos-places .ph-intro button { align-self: flex-end; min-height: 44px; padding: 0 18px; border-radius: 10px; border: 0 !important; background: #11232c !important; color: #f5f8f8 !important; font-weight: 600; }

html.hos-phone #root { scroll-padding: calc(var(--ph-header-h) + 8px) 0 calc(var(--ph-bar-space) + 24px); }
/* the 12px floor on the phone desk, for the small labels its parts bring with them */
html.hos-phone .ph-desk :is(.dk-dept, .dk-tag, .dk-slip-head *, .dk-slip-acts button, .cal-acts button, .dk-brief-title, .cal-when, .cal-owed, .cal-gain, .wf-head em, .cal-aide, .cal-due-h, small) { font-size: 12px !important; }