/* DENSE APP: the one place that sets how big things are on a phone. Loaded LAST on the app page (index.html), so it wins over app.css, gary-app.css and every
   per-feature stylesheet without editing them. To change density, change a number in the :root block below and nothing else.
   Law: 393px phone first; dense; no control over 40px; text 13-16px; 24px minimum tap area. Checked by tools/density-gate.js (limits in tools/density-limits.json).
   Pure CSS: no behavior, route or wording is touched. Delete the <link> in index.html to go back to the old look. */
:root{
  --d-body:14px;        /* normal reading text */
  --d-small:13px;       /* smallest text anywhere (notes, hints, chips, meta) */
  --d-label:13px;       /* form labels */
  --d-h1:20px;          /* screen title */
  --d-h2:15px;          /* section heading */
  --d-input-h:34px;     /* text fields, selects */
  --d-btn-h:34px;       /* buttons */
  --d-cta-h:40px;       /* the one big primary button on a screen (sign in, save) */
  --d-pad:10px;         /* card / section padding (never over 12) */
  --d-gap:8px;          /* space between stacked blocks */
  --d-row-h:40px;       /* list rows (a one-line row over 40px counts as an oversized control) */
  --d-tab-h:40px;       /* each tab in the bottom bar */
  --d-radius:8px;
  --d-tap:28px;         /* small icon buttons */
}
html,body{font-size:var(--d-body);line-height:1.38}
#app{padding-bottom:calc(120px + env(safe-area-inset-bottom))} /* room under the last control for the tab bar (40px) and a toast above it */
.boot{padding:20px 0;font-size:var(--d-body)}
h1{font-size:var(--d-h1);margin:10px 0 6px}
h2{font-size:var(--d-h2);margin:12px 0 5px}
p{margin:5px 0}
.small{font-size:var(--d-small)}
.card{padding:var(--d-pad);margin:var(--d-gap) 0;border-radius:var(--d-radius)}
.pill{font-size:var(--d-small);padding:1px 8px}
.empty{padding:20px 12px}.empty strong{font-size:16px;margin-bottom:3px}
.err{padding:6px 10px;margin:8px 0;font-size:var(--d-small)}
.sheet{padding:var(--d-pad);margin:var(--d-gap) 0}
.offline{padding:5px 10px;margin-top:6px;font-size:var(--d-small)}
.mono{font-size:var(--d-small)}
.kv{grid-template-columns:110px 1fr;gap:3px 8px;margin:5px 0}
.back{margin-top:6px;min-height:var(--d-tap);line-height:var(--d-tap);font-size:var(--d-body);display:inline-flex;align-items:center}

/* forms: labels 13px, fields 34px, buttons 34px, one primary 40px. Fields stay 14px (not 16px) so they match the gate; see the report about iOS zoom. */
label{font-size:var(--d-label);margin:8px 0 3px}
input,select,textarea{min-height:var(--d-input-h);font-size:var(--d-body);border-width:1px;border-radius:var(--d-radius);padding:5px 10px}
input[type=checkbox],input[type=radio]{min-height:24px;width:24px;height:24px;padding:0;flex:none}
textarea{min-height:72px;max-height:80px;padding:6px 10px}
input[type=time],input[type=date],input[type=datetime-local]{min-width:0;max-width:100%}
button,.btn{min-height:var(--d-btn-h);min-width:var(--d-tap);font-size:var(--d-body);padding:5px 14px;border-radius:var(--d-radius)}
button.ghost,.btn.ghost{border-width:1px}
button.full{margin-top:10px;min-height:var(--d-cta-h)}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline-width:2px;outline-offset:1px}

/* bottom tab bar: compact, all tabs fit at 360 (More no longer hangs off the edge), the round mic button is a normal-size tab */
.tabs{padding:2px 4px calc(2px + env(safe-area-inset-bottom))}
.tabs nav{gap:0;align-items:stretch}
.tabs a{flex:1 1 0;min-width:0;min-height:var(--d-tab-h);border-radius:var(--d-radius);font-size:var(--d-small);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tabs a .ic{font-size:18px;line-height:1.1}
.tabs a.mic{flex:0 0 52px}
.tabs a.mic .ic{width:30px;height:30px;margin-top:0;font-size:16px;box-shadow:none}

/* old Inbox / Vault (.gv) and the shared bottom sheet */
.gv{font-size:var(--d-body)}
.gv h1{font-size:var(--d-h1);margin:6px 0 3px}
.gv h2{font-size:var(--d-small);margin:8px 0 3px}
.gv .meta,.gv-row .l2,.gv-chip,.gv .mono{font-size:var(--d-small)}
.gv-kv,.gv-quote{font-size:var(--d-small)}
.gv label{font-size:var(--d-label)}
.gv-btn,.gv input[type=text],.gv input[type=search],.gv select{font-size:var(--d-body)}
.gs-title{font-size:var(--d-body)}
.gs-panel{max-height:60vh}

/* new screens (.m): same 13px floor, compact padding, rows 44px or less */
#app .m{font-size:var(--d-body);line-height:1.35}
.m-top{min-height:40px}
.m-top h1{font-size:var(--d-h1);line-height:24px}
.m-top .sub,.m-muted,.m-row .t span,.m-row .ri,.m-chip,.m-lbl,.m-quote,.m-tl span,.m-strip small{font-size:var(--d-small)}
.m-sec h2{font-size:var(--d-small)}
.m-lbl{margin:6px 0 2px}
.m-h3{font-size:var(--d-h2)}
.m-stack{gap:var(--d-gap);padding-bottom:10px}
#app .m .card,.m-card{padding:var(--d-pad)}
.m-row{min-height:var(--d-row-h);padding:4px var(--d-pad)}
.m-row .t.wrap b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;white-space:normal}
.m-row .t.wrap span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;white-space:normal}
.m-chip{min-height:22px;white-space:normal;max-width:100%}
summary{min-height:24px;display:list-item}
button.m-chip{min-height:var(--d-tap)}
.m-btn{min-height:var(--d-btn-h);font-size:var(--d-body)}
.m .m-in,.m-sheet-body .m-in,.m-in{min-height:var(--d-input-h);height:var(--d-input-h);font-size:var(--d-body)}
textarea.m-in{height:auto;min-height:64px;max-height:80px}
.m-err{font-size:var(--d-small);padding:6px 10px}
.m-empty,.m-empty strong{font-size:var(--d-body)}
.m-toast{bottom:calc(64px + env(safe-area-inset-bottom,0px));padding:5px 10px;font-size:var(--d-small)}
.m-sheet-body{font-size:var(--d-body);gap:8px}

/* Sophia's morning-briefing prompt: a one-line strip above the tab bar (title, Set time, Close) that opens to the text and ONE row (Time, Save, Not now). Only on Today, once a day (staff-push.js). Its base styles are inline, so !important. */
.sp-intro{left:6px!important;right:6px!important;bottom:calc(env(safe-area-inset-bottom,0px) + var(--d-tab-h) + 8px)!important;padding:4px 8px!important;max-width:none!important;display:flex!important;flex-direction:column!important;gap:4px!important;border-radius:var(--d-radius)!important;font-size:var(--d-small)!important;box-shadow:0 1px 6px rgba(0,0,0,.2)!important}
.sp-intro .sp-hd{display:flex;align-items:center;gap:8px;min-height:32px}
.sp-intro .sp-hd>h2{flex:1;min-width:0;margin:0!important;font-size:var(--d-body)!important;line-height:1.15}
.sp-intro>p{margin:0!important;font-size:var(--d-small)!important;line-height:1.25}
.sp-intro>p.sp-note:empty{display:none}
.sp-intro .sp-ctl{display:flex;align-items:center;gap:8px}
.sp-intro label{margin:0!important;font-size:var(--d-label)!important}
.sp-intro input#sp-intro-time{min-height:32px!important;height:32px;min-width:0!important;width:100px!important;font-size:var(--d-body)!important;padding:2px 2px 2px 8px!important}
.sp-intro button{min-height:32px!important;margin:0!important;padding:2px 12px!important;font-size:var(--d-small)!important;border:1px solid currentColor!important;border-radius:var(--d-radius)!important;background:transparent!important;color:#111!important;font-weight:600;outline:0}
.sp-intro button:focus-visible{outline:2px solid #1F3A68;outline-offset:1px}
.sp-intro button.sp-x{min-width:32px!important;padding:2px 6px!important}
.sp-intro button.sp-link{border:0!important;text-decoration:underline;padding:2px 4px!important;font-weight:500}
.sp-intro.sp-collapsed>p,.sp-intro.sp-collapsed .sp-ctl,.sp-intro.sp-collapsed .sp-link{display:none!important}
.sp-intro:not(.sp-collapsed) .sp-set{display:none!important}
.sp-row input[type=time],.sp-row input[type=number],.sp-row select,.sp-panel input[type=time]{min-height:var(--d-input-h);font-size:var(--d-body);width:auto;max-width:130px}
.sp-btn{min-height:var(--d-btn-h)}
.sp-note{font-size:var(--d-small)}
.sp-panel{font-size:var(--d-body)}

/* small print raised to the 13px floor (feature stylesheets set 11-12px) */
.nt-hint,.kp-hint,.kp-hint b,.gpq-small,.gpq-err,.gx-p,.lc-ai,.so-ai,.so-hint,.sc-explain,.sl-sub,.sl-count,.sl-msg,.sl-chk,.sl-top,.sl-q,.sl-angle,.sl-q b,.sl-angle b,.sl-niche,.sl-state{font-size:var(--d-small)}
.so-stage>.so-status,.so-status{font-size:var(--d-small)}
.so-stage>.so-x{font-size:var(--d-body)}
.sv-banner{font-size:var(--d-small)}
body:has(.sv-banner) #app{padding-top:52px}

/* ghost buttons (Times, Open Found, Bring chat back, Clear chat from view...) look like buttons: a thin accent border, never bare text */
.m-btn.ghost{border:1px solid var(--accent);background:var(--surface);color:var(--accent)}
.m-btn.ghost.dng{border-color:var(--bad);color:var(--bad)}

/* Sophia office (clean look). The status line sits on its own row BELOW the Close / menu / speaker buttons (full width between 12px margins, two lines at most, centred, never under a button, never cut mid-word), dark text with a white halo on the white veil. The office stays a full sheet (100%); only this text moves. The chip row, scrim and pills are left to sophia-live.css. */
#sophia-office[data-clean="1"] .so-stage>.so-status{top:48px;left:12px;right:12px;font-size:var(--d-small);font-weight:600;line-height:1.25;overflow-wrap:normal;word-break:normal;hyphens:none;color:var(--so-ink,#0f1b24);text-shadow:0 0 4px var(--so-card-solid,#fff),0 0 8px var(--so-card-solid,#fff),0 0 2px var(--so-card-solid,#fff)}