/* ═══ PHONE ADMIN COMMAND POST ══════════════════════════════════════════════════════════════════ * Styles for the #g-adm sub-app (admin-phone.js). SCOPED under #g-adm for exactly the reason * supervisor.css is scoped under #g-sup: all three shells (#g-app, #g-sup, #g-adm) share ONE * document, so an unscoped rule here would repaint the officer app. * * Tokens are declared ON #g-adm, not :root — guard.css owns the globals and stays authoritative. * The dark half is written at the same time as the light half (see the DARK THEME block at the * bottom), not retrofitted: #g-sup shipped light-only and spent a release as a bright island * inside a dark app, and this file exists to not repeat that. * * MOTION. guard.css does not define --t-fast/--t-med/--ease on this base (grepped: they live in * the platform styles.css, which this shell never loads), so the durations below are the house * literals — 150ms / 200ms / cubic-bezier(.2,.7,.3,1) — expressed through var() fallbacks so that * the day those tokens DO reach guard.css this file starts consuming them with no edit. Every * transition is inside @media (prefers-reduced-motion: no-preference); CSS only, no JS animation. * * TOUCH. --tap (44px, from guard.css :root) is the floor for every control here. This app is used * one-handed, at night, by someone who has just been woken up. * ============================================================================================== */ #g-adm{ --navy:#032b49;--navy-2:#005080;--red:#e11d2a;--green:#0f9d58;--amber:#e08600; --line:#e4eaf1;--muted:#5f7288;--bg:#eaf0f6;--ink:#16222f;--surface:#fff;--surface-2:#eef1f6; --blue:#0a6bb0;--blue-bright:#1a86d0; --grad-primary:linear-gradient(90deg,#005080,#0a6bb0); --grad-head:linear-gradient(165deg,#04213a,#0a4470); --a-fast:var(--t-fast,150ms); --a-med:var(--t-med,200ms); --a-ease:var(--ease,cubic-bezier(.2,.7,.3,1)); background:var(--bg);color:var(--ink);min-height:100vh; padding-bottom:calc(66px + env(safe-area-inset-bottom)); } /* Catch-all icon size. An inline with no width/height attribute has NO intrinsic size, so a browser resolves it to the containing block's width — measured at 375px it came out 320x320, five of them stacked down the More tab. Every icon in this file is authored that way (it is the house idiom, so `stroke:currentColor` inherits), which makes a default the only safe answer rather than remembering a rule per surface. Specificity is (1,0,1), so each of the (1,1,1) rules below — header, buttons, nav, section headings, empty states — still wins. */ #g-adm svg{width:16px;height:16px;flex:0 0 auto;vertical-align:-2px} /* ---- header ---------------------------------------------------------------------------------- */ #g-adm .ahead{position:sticky;top:0;z-index:50;background:var(--grad-head);color:#fff; padding:11px 12px;display:flex;align-items:center;gap:8px} #g-adm .ahead .attl{flex:1;min-width:0;font-family:var(--font-display,inherit);font-weight:800;font-size:16px;line-height:1.15} #g-adm .ahead .attl small{display:block;font-weight:500;font-size:11px;opacity:.78;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #g-adm .ahb{flex:0 0 auto;min-width:var(--tap,44px);min-height:var(--tap,44px);border:none;border-radius:12px; background:rgba(255,255,255,.14);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0 10px; font-family:inherit;font-size:12.5px;font-weight:800} #g-adm .ahb svg{width:20px;height:20px} @media (prefers-reduced-motion:no-preference){ #g-adm .ahb{transition:background var(--a-fast) var(--a-ease),transform var(--a-fast) var(--a-ease)} #g-adm .ahb:active{transform:scale(.94);background:rgba(255,255,255,.26)} } /* Live pill — says the data on screen is fresh, and how fresh. */ #g-adm .alive{font-size:11px;color:var(--muted);margin:0 2px 10px;display:flex;align-items:center;gap:6px} #g-adm .alive i{width:7px;height:7px;border-radius:50%;background:var(--green);flex:0 0 auto} @media (prefers-reduced-motion:no-preference){ #g-adm .alive i{animation:a-beat 2.4s ease-in-out infinite} @keyframes a-beat{0%,100%{opacity:1}50%{opacity:.35}} } /* ---- views + bottom nav ----------------------------------------------------------------------- */ #g-adm .aview{display:none;padding:13px 13px 22px} #g-adm .aview.on{display:block} #g-adm .anav{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;background:var(--surface); border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)} #g-adm .anav button{flex:1;border:none;background:none;padding:8px 0 6px;font-size:10.5px;font-weight:700; color:#8ea0b3;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px; min-height:var(--tap,44px);position:relative;font-family:inherit} #g-adm .anav button.on{color:var(--blue);font-weight:800} #g-adm .anav button svg{width:21px;height:21px} #g-adm .anav .bdg{position:absolute;top:4px;left:50%;transform:translateX(4px);background:var(--red);color:#fff; font-size:9px;font-weight:800;border-radius:99px;min-width:16px;height:16px;display:flex;align-items:center; justify-content:center;padding:0 4px} @media (prefers-reduced-motion:no-preference){ #g-adm .anav button{transition:color var(--a-fast) var(--a-ease)} #g-adm .anav button svg{transition:transform var(--a-med) var(--a-ease)} #g-adm .anav button.on svg{transform:translateY(-1px) scale(1.08)} } /* ---- section headings + empties ---------------------------------------------------------------- */ #g-adm .asec{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:17px 0 8px; display:flex;align-items:center;gap:7px} #g-adm .asec:first-child{margin-top:2px} #g-adm .asec svg{width:14px;height:14px;flex:0 0 auto} #g-adm .aempty{background:var(--surface);border:1px dashed var(--line);border-radius:13px;padding:20px 14px; text-align:center;color:var(--muted);font-size:13.5px;line-height:1.55} #g-adm .aempty svg{width:26px;height:26px;opacity:.6;vertical-align:middle} #g-adm .ahint{font-size:12px;color:var(--muted);margin:6px 2px;line-height:1.5} #g-adm a{color:var(--blue);text-decoration:none;font-weight:600} /* ---- the three triage count cards -------------------------------------------------------------- Buttons, not divs: the whole point is that each one opens the list behind it, and a tappable thing that is not a