/*
 * ── THE APP SHELL'S OWN LAYOUT, IN A FILE (28 Sep) ────────────────────────────────────────────
 *
 * WHAT WENT WRONG. app-shell-2026-09-11.css does not lay the shell out. Read its own comment: it
 * CORRECTS things a page already drew -- safe-area insets, an injected #notifBell -- with
 * !important, because "a page writes these as #authGate / #app". The grid itself, the sidebar,
 * the footer and .main live in a ~105-line <style> block copied into all 31 shell pages.
 *
 * So a new page can link every stylesheet the others link, pass every gate, serve a 200 for each
 * asset -- and render as raw HTML, because the layout was never in any of them. contractor-job.html
 * shipped exactly that way: #app computed display:block, the sidebar was 968px wide and the
 * mount never got its box. Nothing caught it, because nothing was looking for a rule rather than
 * for a file.
 *
 * WHY A FILE AND NOT A THIRTY-SECOND COPY. Copying inherits whatever the source page's block has
 * drifted to, including palette aliases that have since been deprecated, and adds another place
 * the shell has to be changed. This is the chrome only -- the parts every shell page draws
 * identically. Page furniture (.shift-card, .doc-card, the clock) stays on the pages that own it.
 *
 * NOT NAMED app-shell-*.css, and that is load-bearing: tools/shellcheck.py globs that pattern,
 * requires exactly ONE match, and runs its content assertions against whichever it finds. A
 * second file matching it leaves the gate unable to say which sheet those rules are about, and
 * it failed the 28 Sep deep for exactly that. This is the shell's CHROME; app-shell-2026-09-11
 * is the corrections sheet those rules belong to. Two different jobs, two names.
 *
 * The other 31 pages are NOT changed here. They work, and rewriting them is its own job with its
 * own --deep; tools/shellcsscheck.py now fails either way -- inline or linked -- so a page cannot
 * ship without the layout again.
 */
* { box-sizing: border-box; }
body { margin:0; font-family:'Inter',system-ui,sans-serif; background:var(--paper); color:var(--heading); }

#authGate { min-height:100vh; display:flex; align-items:center; justify-content:center;
            flex-direction:column; gap:14px; }
#authGate a { color:var(--teal); text-decoration:none; font-weight:600; }

/* display:none until the page proves a session and adds .active -- the reveal every page does. */
#app { display:none; min-height:100vh; grid-template-columns:250px 1fr; }
#app.active { display:grid; }

.sidebar { background:linear-gradient(190deg,var(--navy) 0%,var(--navy-2) 100%); color:white;
           padding:26px 20px; display:flex; flex-direction:column; position:sticky; top:0;
           height:100vh; overflow-y:auto; }
.brand { display:flex; align-items:center; gap:10px; font-family:'Sora',sans-serif; font-weight:700;
         font-size:20px; padding:0 6px; margin-bottom:36px; }
.torvi-mark { flex-shrink:0; display:block; }
.nav-label { font-size:10.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
             color:rgba(255,255,255,0.38); padding:0 12px; margin-bottom:8px; }
.nav-list { list-style:none; margin:0 0 24px; padding:0; display:flex; flex-direction:column; gap:2px; }
.nav-item { display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:9px;
            font-size:14px; font-weight:500; color:var(--navy-text); text-decoration:none;
            border-left:3px solid transparent; }
.nav-icon { font-size:15px; width:18px; text-align:center; }
.nav-item.active { background:var(--navy-2); color:var(--card); font-weight:600;
                   border-left:3px solid var(--teal-bright); border-top-left-radius:0;
                   border-bottom-left-radius:0; }
.nav-item:hover { background:var(--navy-2); }
.nav-item.disabled { color:rgba(184,194,230,0.45); pointer-events:none; }
.soon-pill { margin-left:auto; font-size:9px; font-weight:700; text-transform:uppercase;
             padding:2px 6px; border-radius:20px; background:rgba(255,255,255,0.08);
             color:rgba(255,255,255,0.5); }
.sidebar-footer { margin-top:auto; border-top:1px solid rgba(255,255,255,0.1); padding-top:16px; }
.who { font-size:12.5px; color:rgba(255,255,255,0.55); margin-bottom:10px; padding:0 4px; }
.who b { color:white; display:block; font-size:13.5px; margin-top:2px; }
.signout { width:100%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12);
           color:white; padding:9px 14px; font-size:13px; border-radius:9px; cursor:pointer; }
.signout:hover { background:rgba(255,255,255,0.12); }

/*
 * THE WIDTH IS NOT HERE ANY MORE (5 Oct). This file is linked by fourteen pages; the other
 * thirty-one are not, so a width written here was a width only the Training and contractor pages
 * had -- which is exactly why they were the narrow ones at 920px while the roster ran to 1300.
 * One rule for every page, in app-shell-2026-09-11.css, which all forty-five link.
 */

/* The one piece of page furniture the chrome itself uses: every shell page has a hint line. */
.field-hint { font-size:12px; color:var(--muted); margin:4px 0 8px; line-height:1.5; }