/* Medence design system — rebrand 2026-08 over Product Spec v1 §27.
   Hybrid light theme: warm off-white page, white surfaces, deep navy type,
   restrained electric-blue accent, colored pillar accents, rounded cards. */
:root {
  --page:#F7F6F3; --card:#FFFFFF; --ink:#0C1B3A; --muted:#62708A;
  --line:#E7E5E0; --blue:#2563EB; --blue-soft:#E7EEFF;
  --purple:#7C3AED; --purple-soft:#F1EAFE;
  --green:#16A34A; --green-soft:#E6F6EC;
  --coral:#E11D48; --coral-soft:#FDECEF;
  --amber:#B45309; --amber-soft:#Fdf1e3;
  --navy:#101E45;
  --shadow:0 1px 3px rgba(15,30,69,.07), 0 4px 14px rgba(15,30,69,.05);
  --r:16px;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html, body { margin:0; }
body { background:var(--page); color:var(--ink);
  font:16px/1.55 -apple-system, "Segoe UI", Roboto, sans-serif; }
.app { max-width:46rem; margin:0 auto; padding:0 1.1rem calc(5.6rem + env(safe-area-inset-bottom)); }

/* header */
header.top { display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.8rem 0 .5rem; }
.brand { display:flex; align-items:center; gap:.6rem; }
.logo { width:46px; height:46px; color:var(--blue); flex:0 0 auto; }
.brand-name { font-weight:800; font-size:1.02rem; letter-spacing:.07em; color:var(--navy); }
.brand-name .ence { color:var(--blue); }
.brand-sub { font-size:.68rem; color:var(--muted); letter-spacing:.02em; margin-top:-2px; }
#user { max-width:11.5rem; border-radius:999px; padding:.45rem .8rem .45rem 2rem; font-size:.85rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8.2' r='3.4' fill='none' stroke='%230C1B3A' stroke-width='1.8'/%3E%3Cpath d='M5 20c.9-3.6 3.8-5.4 7-5.4s6.1 1.8 7 5.4' fill='none' stroke='%230C1B3A' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:.6rem center; background-size:1.05rem; }

/* controls */
input, select, textarea, button {
  font:inherit; color:var(--ink); background:var(--card);
  border:1px solid var(--line); border-radius:12px; padding:.65rem .85rem;
}
input, select, textarea { width:100%; }
textarea { min-height:5rem; resize:vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline:2px solid var(--blue); outline-offset:1px; }
button { cursor:pointer; width:auto; }
button.primary { background:var(--blue); color:#fff; border-color:var(--blue);
  font-weight:600; width:100%; padding:.8rem; margin-top:.7rem; border-radius:12px; }
button.primary.slim { width:auto; margin-top:0; padding:.65rem 1.1rem; }
button.primary:disabled { opacity:.55; }
button.secondary { background:var(--blue-soft); color:var(--blue); border-color:transparent;
  font-weight:600; width:100%; padding:.7rem; margin-top:.6rem; border-radius:12px; }
.row { display:flex; gap:.5rem; align-items:center; }
.row > input { flex:1; }
.row > button { flex:0 0 auto; }
.stack { display:flex; flex-direction:column; gap:.55rem; }
.lbl { display:block; font-size:.76rem; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.06em; margin:.95rem 0 .3rem; }
.muted { color:var(--muted); font-size:.9rem; margin:.25rem 0 .7rem; }
.status { color:var(--muted); font-size:.85rem; margin:.5rem 0 0; min-height:1.2em; }
.err { color:var(--coral); }
.page-title { font-size:1.45rem; font-weight:800; letter-spacing:-.01em; margin:.4rem 0 .2rem; }
.h3 { font-size:1.02rem; font-weight:700; margin:1.4rem 0 .5rem; }

/* gate */
.gate { padding:2.2rem 0; }
.gate h2 { font-size:1.6rem; margin:0 0 .2rem; }

/* home — sized to fit ONE phone viewport, no scrolling */
.greet-wrap { position:relative; margin-top:.4rem; }
.greet-decor { position:absolute; top:-.8rem; right:-1.1rem; width:min(60%, 19rem);
  height:8rem; pointer-events:none; }
.greet-word { font-size:1.1rem; font-weight:500; color:var(--ink); margin:0; position:relative; }
.greet-name { font-size:clamp(2.3rem, 12vw, 2.8rem); font-weight:800; letter-spacing:-.03em;
  line-height:1.04; margin:.02rem 0 .35rem; position:relative; }
.greet-bar { width:2.8rem; height:4px; border-radius:99px; background:var(--blue); margin:0 0 .4rem; }
.greet-sub { font-size:.95rem; margin:0 0 .15rem; position:relative; }
.pillars { display:flex; flex-direction:column; gap:.5rem; margin-top:.55rem; }
.pillar { display:flex; align-items:center; gap:.8rem; text-align:left; position:relative;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:.62rem .8rem .62rem 1rem; box-shadow:var(--shadow); overflow:hidden; }
.pillar::before { content:""; position:absolute; left:0; top:0; bottom:0; width:5px; }
.p-blue::before { background:var(--blue); }
.p-purple::before { background:var(--purple); }
.p-green::before { background:var(--green); }
.p-coral::before { background:var(--coral); }
.pillar .chev { width:34px; height:34px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:1.3rem; font-weight:400; flex:0 0 auto; }
.p-blue .chev { background:var(--blue-soft); color:var(--blue); }
.p-purple .chev { background:var(--purple-soft); color:var(--purple); }
.p-green .chev { background:var(--green-soft); color:var(--green); }
.p-coral .chev { background:var(--coral-soft); color:var(--coral); }
.pillar:active { transform:scale(.99); }
.picon { width:44px; height:44px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; }
.picon svg { width:23px; height:23px; }
.picon.blue { background:var(--blue-soft); color:var(--blue); }
.picon.purple { background:var(--purple-soft); color:var(--purple); }
.picon.green { background:var(--green-soft); color:var(--green); }
.picon.coral { background:var(--coral-soft); color:var(--coral); }
.ptext { flex:1; display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.ptitle { font-weight:800; font-size:1.02rem; }
.blue-t { color:var(--blue); } .purple-t { color:var(--purple); }
.green-t { color:var(--green); } .coral-t { color:var(--coral); }
.pdesc { color:var(--muted); font-size:.78rem; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.chev { color:var(--muted); font-size:1.5rem; font-weight:300; }
.justask { display:flex; align-items:center; gap:.55rem; background:var(--navy);
  border:none; border-radius:18px; box-shadow:0 8px 24px rgba(14,27,61,.28);
  padding:.45rem .45rem .45rem 1rem; margin-top:.8rem; }
.justask.small { margin-top:1.6rem; }
.justask input { border:none; padding:.4rem 0; background:transparent; color:#fff; }
.justask input::placeholder { color:rgba(255,255,255,.75); }
.justask input:focus { outline:none; }
.spark { width:20px; height:20px; color:#9DB8FF; flex:0 0 auto; }
.micbtn { width:44px; height:44px; border-radius:50%; background:var(--blue);
  color:#fff; border:none; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.micbtn svg { width:20px; height:20px; }
.micbtn.listening { background:var(--coral); }
.lockline { display:flex; align-items:center; justify-content:center; gap:.35rem;
  color:var(--muted); font-size:.74rem; margin:.55rem 0 0; }
.lockic { width:14px; height:14px; }

/* chips */
.chips { display:flex; gap:.45rem; overflow-x:auto; padding:.2rem 0 .7rem; -webkit-overflow-scrolling:touch; }
.chips.wrap { flex-wrap:wrap; overflow:visible; }
.chip { flex:0 0 auto; font-size:.79rem; background:var(--blue-soft); color:var(--blue);
  border:none; border-radius:999px; padding:.4rem .75rem; font-weight:600; }

/* cards + markdown */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:1rem 1.15rem; margin-top:.9rem; box-shadow:var(--shadow); overflow-wrap:break-word; }
.md h3 { font-size:.76rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--blue); margin:1rem 0 .25rem; }
.md h3:first-child { margin-top:0; }
.md p { margin:.4rem 0; }
.md ul { margin:.3rem 0; padding-left:1.2rem; }
.md li { margin:.22rem 0; }

/* segmented control */
.seg { display:flex; background:#E9EEF6; border-radius:12px; padding:4px; gap:4px; margin:.6rem 0 .9rem; }
.seg button { flex:1; border:none; background:transparent; color:var(--muted);
  font-weight:700; font-size:.85rem; padding:.5rem .3rem; border-radius:9px; }
.seg button.on { background:var(--card); color:var(--ink); box-shadow:var(--shadow); }

/* chat */
.chat { display:flex; flex-direction:column; gap:.55rem; padding:.8rem 0; }
.bubble { max-width:86%; padding:.65rem .9rem; border-radius:16px; white-space:pre-wrap; }
.bubble.persona { background:var(--card); border:1px solid var(--line); align-self:flex-start; border-bottom-left-radius:5px; box-shadow:var(--shadow); }
.bubble.rep { background:var(--blue); color:#fff; align-self:flex-end; border-bottom-right-radius:5px; }
.bubble.thinking { color:var(--muted); font-style:italic; background:transparent; border:none; box-shadow:none; }

/* quiz */
.quiz-progress { font-size:.76rem; font-weight:700; color:var(--muted); letter-spacing:.05em; text-transform:uppercase; margin:0 0 .3rem; }
.quiz-q { font-weight:700; margin:.2rem 0 .7rem; }
.qopt { text-align:left; width:100%; }
.qopt.correct { background:var(--green-soft); border-color:var(--green); color:var(--green); font-weight:600; }
.qopt.wrong { background:var(--coral-soft); border-color:var(--coral); color:var(--coral); font-weight:600; }

/* territory */
.sigcard { background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:.95rem 1.05rem; margin-top:.7rem; box-shadow:var(--shadow); }
.sighead { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:.3rem; }
.sigentity { font-weight:800; font-size:.95rem; }
.sigcat { font-size:.68rem; font-weight:700; letter-spacing:.04em; padding:.18rem .55rem; border-radius:999px; }
.sigheadline { font-weight:600; margin:.15rem 0 .3rem; }
.sigwhy { font-size:.88rem; color:var(--muted); margin:.25rem 0; }
.sigdo { font-size:.88rem; margin:.35rem 0 0; padding:.5rem .7rem; background:var(--blue-soft); border-radius:10px; }
.sigsrc { font-size:.74rem; color:var(--muted); margin-top:.45rem; }
.follow-row { display:flex; align-items:center; gap:.6rem; padding:.6rem 0; border-bottom:1px solid var(--line); }
.follow-row .fname { flex:1; font-weight:600; font-size:.92rem; }
.follow-row .fkind { color:var(--muted); font-size:.75rem; }
.followbtn { font-size:.75rem; font-weight:700; padding:.35rem .8rem; border-radius:999px; }
.followbtn.on { background:var(--blue); color:#fff; border-color:var(--blue); }

/* manager pulse */
.pulse-head { display:flex; align-items:center; justify-content:space-between; }
.livechip { font-size:.72rem; font-weight:700; color:var(--green); background:var(--green-soft);
  padding:.3rem .7rem; border-radius:999px; }
.stats { display:grid; grid-template-columns:repeat(2, 1fr); gap:.7rem; margin:.8rem 0; }
.stat { background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:.85rem .95rem; box-shadow:var(--shadow); }
.stat .sv { font-size:1.5rem; font-weight:800; letter-spacing:-.02em; }
.stat .sl { font-size:.76rem; color:var(--muted); font-weight:600; }
.stat .sd { font-size:.72rem; font-weight:700; margin-top:.2rem; }
.sd.up { color:var(--green); } .sd.flat { color:var(--muted); }
table.grid { border-collapse:collapse; width:100%; font-size:.85rem; font-variant-numeric:tabular-nums; }
table.grid th { text-align:left; font-size:.68rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted); border-bottom:2px solid var(--line); padding:.35rem .5rem .3rem 0; }
table.grid td { border-bottom:1px solid var(--line); padding:.5rem .5rem .5rem 0; }
.tblwrap { overflow-x:auto; }
.avatar { display:inline-flex; width:26px; height:26px; border-radius:50%; background:var(--blue-soft);
  color:var(--blue); font-size:.68rem; font-weight:800; align-items:center; justify-content:center; margin-right:.45rem; }
.gapbar { display:flex; align-items:center; gap:.6rem; margin:.45rem 0; }
.gapbar .gl { flex:0 0 11rem; font-size:.85rem; font-weight:600; }
.gapbar .gtrack { flex:1; height:8px; background:#EDF1F7; border-radius:99px; overflow:hidden; }
.gapbar .gfill { height:100%; border-radius:99px; }
.gapbar .gpct { flex:0 0 3rem; text-align:right; font-size:.8rem; font-weight:700; }
.qrow { display:flex; align-items:baseline; gap:.6rem; padding:.5rem 0; border-bottom:1px solid var(--line); }
.qrow:last-child { border-bottom:none; }
.qrow .qt { flex:1; font-size:.9rem; }
.qrow .qwho { color:var(--muted); font-size:.74rem; white-space:nowrap; }
.themechips { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.6rem; }
.themechip { font-size:.74rem; font-weight:700; background:var(--blue-soft); color:var(--blue);
  padding:.3rem .65rem; border-radius:999px; }

/* admin doc rows */
.doc-row { display:flex; align-items:center; gap:.55rem; padding:.5rem 0; border-bottom:1px solid var(--line); font-size:.85rem; }
.doc-row:last-child { border-bottom:none; }
.doc-row .id { font-weight:700; color:var(--blue); flex:0 0 5.2rem; }
.doc-row .t { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.doc-row button { font-size:.72rem; padding:.3rem .65rem; border-radius:999px; }
.pill { font-size:.66rem; font-weight:700; letter-spacing:.04em; padding:.18rem .55rem; border-radius:999px; white-space:nowrap; }
.pill.approved { background:var(--green-soft); color:var(--green); }
.pill.superseded { background:var(--amber-soft); color:var(--amber); }

/* voice conversation overlay */
#voice-overlay { position:fixed; inset:0; z-index:40; background:var(--page);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:2rem 1.5rem calc(2rem + env(safe-area-inset-bottom)); text-align:center; }
.vo-persona { font-weight:800; font-size:1.15rem; margin:0 0 2.2rem; }
.vo-orb-wrap { position:relative; width:11rem; height:11rem; display:flex;
  align-items:center; justify-content:center; }
.vo-orb { width:8.5rem; height:8.5rem; border-radius:50%; border:none; cursor:pointer;
  background:radial-gradient(circle at 32% 30%, #7fb3ff, var(--blue) 62%, #16327f);
  box-shadow:0 10px 40px rgba(36,86,224,.35); transition:transform .25s ease;
  overflow:hidden; padding:0; position:relative; }
.vo-orb img { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
#voice-overlay.listening .vo-orb { box-shadow:0 10px 40px rgba(36,86,224,.35), 0 0 0 6px var(--blue-soft); }
#voice-overlay.speaking .vo-orb { box-shadow:0 10px 44px rgba(36,86,224,.45), 0 0 0 9px var(--blue-soft); }
.chat .pavatar { width:30px; height:30px; border-radius:50%; object-fit:cover;
  flex:0 0 auto; margin:.15rem .45rem 0 0; }
.prow { display:flex; align-items:flex-start; max-width:92%; }
.vo-orb:focus-visible { outline:3px solid var(--blue); outline-offset:6px; }
#voice-overlay.listening .vo-orb { animation:vo-breathe 1.6s ease-in-out infinite; }
#voice-overlay.thinking .vo-orb { animation:vo-spin-pulse 1.1s ease-in-out infinite; opacity:.85; }
#voice-overlay.speaking .vo-orb { animation:vo-talk .45s ease-in-out infinite; }
@keyframes vo-breathe { 0%,100% { transform:scale(1); } 50% { transform:scale(1.09); } }
@keyframes vo-spin-pulse { 0%,100% { transform:scale(.96); } 50% { transform:scale(1.02); } }
@keyframes vo-talk { 0%,100% { transform:scale(1); } 50% { transform:scale(1.06); } }
@media (prefers-reduced-motion: reduce) {
  #voice-overlay .vo-orb { animation:none !important; }
}
.vo-state { color:var(--muted); font-weight:600; font-size:.95rem; margin:1.6rem 0 .4rem; min-height:1.3em; }
.vo-transcript { color:var(--ink); font-size:1.02rem; line-height:1.5; min-height:3em;
  max-width:34rem; margin:.2rem 0 1.4rem; }
.vo-exit { max-width:20rem; }

/* tab bar — floating rounded container */
nav.tabs { position:fixed; bottom:calc(.6rem + env(safe-area-inset-bottom));
  left:.75rem; right:.75rem; display:flex; max-width:44.5rem; margin:0 auto;
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  box-shadow:0 8px 28px rgba(15,30,69,.14);
  padding:.4rem .5rem; z-index:10; }
nav.tabs button { flex:1; border:none; background:none; color:var(--muted);
  font-size:.68rem; font-weight:700; padding:.35rem .2rem .45rem; border-radius:10px;
  display:flex; flex-direction:column; align-items:center; gap:.15rem; position:relative; }
nav.tabs button svg { width:22px; height:22px; }
nav.tabs button.on { color:var(--blue); }
nav.tabs button.on::after { content:""; position:absolute; bottom:.1rem;
  width:1.4rem; height:3px; border-radius:99px; background:var(--blue); }

/* desktop foundation (spec §30): wider layouts breathe, stats go 4-up */
@media (min-width: 900px) {
  .app { max-width:60rem; }
  .stats { grid-template-columns:repeat(4, 1fr); }
  .pillars { display:grid; grid-template-columns:1fr 1fr; }
}
/* shorter phones: shrink the home composition further */
@media (max-height: 720px) {
  .greet-name { font-size:2.2rem; }
  .greet-decor { height:6.5rem; }
  .pdesc { -webkit-line-clamp:1; }
  .pillar { padding:.5rem .7rem .5rem .9rem; }
  .picon { width:38px; height:38px; }
}
@media (prefers-reduced-motion: no-preference) {
  .bubble { animation: pop .15s ease-out; }
  @keyframes pop { from { transform:translateY(4px); opacity:.4; } }
}