/* SMART CAT — shared design-polish layer (elevation · motion · hierarchy · account chip).
   Linked AFTER each page's inline <style>, so it only ADDS depth/transitions — no token conflicts.
   Loaded on Vault / Cockpit / Chat (not the login page). CSP: same-origin stylesheet. */

/* subtle page depth (a faint top glow, not a flat slab) */
body{ background-image: radial-gradient(1100px 520px at 50% -260px, rgba(255,255,255,.035), transparent 70%); background-attachment: fixed; }
html[data-theme=light] body{ background-image: radial-gradient(1100px 520px at 50% -260px, rgba(40,30,20,.035), transparent 70%); }

/* elevated, consistent, sticky header across every surface */
header{ box-shadow: 0 1px 0 rgba(0,0,0,.22), 0 8px 22px rgba(0,0,0,.16); position: sticky; top: 0; z-index: 40; }
html[data-theme=light] header{ box-shadow: 0 1px 0 rgba(30,25,20,.06), 0 8px 22px rgba(30,25,20,.05); }

/* elevation on primary surfaces (not deeply-nested ones — keeps it clean, not busy) */
.card, .kpi, .file, .pkgbox, .pal, .lane{ box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 6px 16px rgba(0,0,0,.10); }
html[data-theme=light] .card, html[data-theme=light] .kpi, html[data-theme=light] .file, html[data-theme=light] .pkgbox, html[data-theme=light] .lane{ box-shadow: 0 1px 2px rgba(30,25,20,.06), 0 6px 16px rgba(30,25,20,.05); }

/* purposeful micro-motion */
.btn, .chip, .step, .acts a, .acts button, .seg a, .seg button, .file, .finding{ transition: transform .12s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease, color .12s ease; }
.btn:hover:not(:disabled), .step:not(.disabled):hover{ transform: translateY(-1px); }
.card{ transition: box-shadow .16s ease; }

/* crisper accessible focus (belt-and-suspenders with the inline rule) */
:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }

/* account chip — replaces the bare email string in the header */
#email, #whoami{ padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel2, rgba(127,127,127,.08)); color: var(--soft); font-weight: 600; font-size: 12.5px; }
#email:empty, #whoami:empty{ display: none; }

/* larger, more comfortable tap targets on small screens */
@media (max-width: 640px){
  .btn, .seg a, .seg button, .acts a, .acts button{ min-height: 40px; display: inline-flex; align-items: center; }
}

/* ── Shared design tokens + components (single source; promoted from updates.html per HQ-design
   convergence, 2026-07-01). Loaded AFTER each page's inline <style>, so these override any inline
   duplicates — every surface (vault/cockpit/chat/updates/founder) inherits ONE definition.
   --*-tx = accessible text ink for accent-on-tint (light theme was failing WCAG-AA at ~1.5–2:1). ── */
:root{ --ok-tx:#4fb56a; --gold-tx:#F0C030; --warn-tx:#e0a63a; --dismiss-tx:#ff7a7a; }
html[data-theme=light]{ --ok-tx:#1c6b38; --gold-tx:#6b5200; --warn-tx:#8a5a00; --dismiss-tx:#a11212; }

/* skeleton loader — usage: el.innerHTML = '<div class="skel"></div>'.repeat(n) */
.skel{height:120px;border-radius:14px;border:1px solid var(--line);margin-bottom:14px;background:linear-gradient(100deg,var(--panel) 30%,var(--panel2) 50%,var(--panel) 70%);background-size:200% 100%;animation:sk 1.2s ease-in-out infinite}
@keyframes sk{to{background-position:-200% 0}}

/* toast — pairs with toast() in app-polish.js */
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--panel);border:1px solid var(--gold-dp);color:var(--text);padding:11px 18px;border-radius:10px;font-size:13px;box-shadow:0 12px 30px rgba(0,0,0,.4);opacity:0;transition:opacity .2s;pointer-events:none;z-index:80}
#toast.show{opacity:1}

/* themed modal — pairs with modal() in app-polish.js (JS injects the #modal element; no page markup needed) */
#modal{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.55);padding:20px}
#modal.show{display:flex}
.mdl{width:min(440px,94vw);background:var(--panel);border:1px solid var(--gold-dp);border-radius:14px;padding:20px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.mdl h3{margin:0 0 8px;font-size:16px;font-weight:800;color:var(--text)}
.mdl p{margin:0 0 14px;font-size:13.5px;color:var(--soft);line-height:1.5}
.mdl input{width:100%;padding:11px;font-size:16px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;color:var(--text);margin-bottom:14px}
.mrow{display:flex;gap:10px;justify-content:flex-end}
.mbtn{font:700 13px system-ui;border-radius:8px;padding:10px 16px;min-height:44px;cursor:pointer;border:1px solid var(--line);background:var(--panel2);color:var(--text)}
.mbtn.ok{border-color:var(--gold-dp);background:var(--gold);color:#1a1206}
.mbtn.danger{border-color:#5a2222;color:var(--dismiss-tx)}

@media (prefers-reduced-motion: reduce){ *{ transition: none !important; animation: none !important; } }