/* Donna — Hall design tokens (copy into the build as-is) */
:root{
  --paper:#f6f4ef;        /* page background */
  --surface:#ffffff;      /* cards on paper */
  --ink:#18202e;          /* primary text */
  --muted:#5b6575;        /* secondary text */
  --line:#ddd7c9;         /* hairlines on paper */
  --navy:#0d1420;         /* app chrome / device frames */
  --navy-2:#111a2a;       /* app background */
  --navy-3:#1b2942;       /* app cards & panels */
  --nav-line:#2a3c5e;     /* hairlines in app */
  --nav-muted:#93a3bd;    /* secondary text in app */
  --amber:#f2a93b;        /* THE accent — actions, progress, Donna */
  --amber-deep:#b96a00;   /* accent on light surfaces */
  --good:#35c26e; --warn:#ffd98a; --bad:#f0563b;
  --radius:14px;          /* cards */
  --font-display:"Archivo",sans-serif;  /* headings, numbers */
  --font-body:system-ui,sans-serif;     /* body */
  --font-mono:"IBM Plex Mono",monospace;/* addresses, codes */
}
/* Avatars: circular, initials, one gradient per person.
   Priority: High = red pill, Med = amber pill, Low = blue pill.
   Motion: 300–600ms ease; bars glide; feed items slide in.
   Always honor prefers-reduced-motion. */

/* ---------- Phase 6 build on the tokens above. The app is navy chrome; nothing below adds a colour family. ---------- */
/* Fills used inside the app, taken from the prototype's app screens. */
:root{--well:#0b111f;--row:#16233a;--rail:#0e1626;--on-amber:#1a1200;--text:#e8edf6;--text-2:#c9d4e8;--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:var(--navy-2);color:var(--text);font:15px/1.5 var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--font-display);color:#fff;line-height:1.15;letter-spacing:-.01em}
h1{font-size:24px;font-weight:800;margin:4px 0 14px}
h2{font-size:18px;font-weight:800;margin:22px 0 10px}
h3{font-size:15px;font-weight:700;margin:0 0 8px}
p{margin:.35rem 0}
a{color:var(--amber)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.muted,.meta,.src{color:var(--nav-muted)}
.meta{font-size:12px;margin-top:4px}.src{font-size:12px;overflow-wrap:anywhere}
code,.mono{font-family:var(--font-mono)}

/* ---------- Shell: side rail (desktop), icon rail (tablet), bottom bar (phone) ---------- */
.shell{display:grid;grid-template-columns:212px minmax(0,1fr);min-height:100vh}
.signed-out .shell{grid-template-columns:minmax(0,1fr)}
.side{position:sticky;top:0;height:100vh;overflow-y:auto;background:var(--rail);border-right:1px solid var(--nav-line);padding:16px 12px;display:flex;flex-direction:column;gap:12px}
.brand{font-family:var(--font-display);font-weight:800;letter-spacing:.06em;font-size:13px;text-transform:uppercase;color:#fff;text-decoration:none;padding:4px 10px}
.side nav{display:flex;flex-direction:column;gap:2px}
.side nav a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;color:var(--text-2);text-decoration:none;font-size:13.5px;font-weight:600;transition:background .3s ease}
.side nav a svg{width:17px;height:17px;flex:none;fill:none;stroke:#7e8ea9;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.side nav a:hover{background:var(--navy-3)}
.side nav a.on{background:var(--amber);color:var(--on-amber)}
.side nav a.on svg{stroke:var(--on-amber)}
.mainwrap{min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:12px;padding:10px 20px;border-bottom:1px solid var(--nav-line);background:var(--navy-2);position:sticky;top:0;z-index:5}
.topbar .brand{display:none}
.signed-out .topbar .brand{display:inline}
.who{display:flex;gap:8px;align-items:center;margin-left:auto;font-size:13.5px}
.who form{display:inline}
main{width:100%;max-width:1200px;margin:0 auto;padding:20px;flex:1;animation:slideIn .4s ease}
footer{color:var(--nav-muted);font-size:12px;text-align:center;padding:20px 16px 28px}
.signed-out main{max-width:560px;padding-top:48px}

/* ---------- Avatars and Donna's orb ---------- */
.av{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none;font-family:var(--font-display);font-weight:800;font-size:12px;color:#fff;background:linear-gradient(135deg,hsl(var(--h,215) 55% 42%),hsl(var(--h,215) 60% 26%))}
.av.s36{width:36px;height:36px;font-size:13px}
.orb{display:inline-block;width:14px;height:14px;border-radius:50%;flex:none;vertical-align:-2px;margin-right:6px;background:radial-gradient(circle at 35% 32%,var(--warn),var(--amber) 55%,#9c5c00);animation:pulse 2.6s ease-out infinite}
figure.pa{margin:0;text-align:center;width:96px;flex:none}
figure.pa img{width:96px;height:96px;border-radius:50%;border:3px solid var(--amber);background:var(--paper)}
figure.pa figcaption{font-size:13px;color:var(--warn);font-weight:700;margin-top:4px}
.presence img{width:140px;height:140px;animation:presence 5s ease-in-out infinite}
.hero{display:flex;gap:18px;align-items:center;margin:4px 0 16px}
.hero.small{margin:2px 0 10px}

/* ---------- Cards, panels, tiles ---------- */
.card{background:var(--navy-3);border:1px solid var(--nav-line);border-radius:var(--radius);padding:14px 16px;margin:0 0 12px}
.card h2,.card h3{margin:.1rem 0 .5rem}
.card.task{display:block;margin:8px 0;padding:11px 12px;background:var(--row);text-decoration:none;color:var(--text);transition:border-color .3s ease}
.card.task:hover{border-color:var(--amber)}
.task .latest{font-size:13px;color:var(--text-2);margin:.3rem 0}
.task .count{font-size:12.5px;color:var(--nav-muted);margin-left:auto}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid2{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:14px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.tile{background:var(--navy-3);border:1px solid var(--nav-line);border-radius:12px;padding:13px;text-decoration:none;color:var(--nav-muted);display:flex;flex-direction:column;font-size:12.5px;transition:border-color .3s ease}
.tile:hover{border-color:var(--amber)}
.tile .n{font-family:var(--font-display);font-weight:800;font-size:26px;color:#fff;line-height:1.1}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:.3rem 0}
.acu{border-style:dashed}
.approve{border-color:var(--amber)}
.card.dev,.devbar{background:#3d3413;border-color:#6b5518;color:var(--warn)}
.devbar{border-bottom:2px solid #6b5518;padding:6px 16px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px}
.devbar form{display:inline-flex;gap:6px}
.card.viewonly{background:#14253c;border-color:#2f5480}

/* ---------- Progress ---------- */
.bar{height:7px;background:var(--well);border-radius:99px;overflow:hidden;margin:6px 0}
.bar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--amber),var(--warn));transition:width .6s var(--ease)}

/* ---------- Pills: status is colour plus words; priority High red, Med amber, Low blue ---------- */
.chip,.badge{display:inline-flex;align-items:center;font-size:11px;font-weight:800;letter-spacing:.03em;border-radius:999px;padding:2px 9px;border:0;white-space:nowrap;background:#26334a;color:var(--text-2);vertical-align:1px}
.badge{font-size:12px}
.chip.p-urgent{background:#5a1f17;color:#ffb3a6;box-shadow:inset 0 0 0 1px var(--bad)}
.chip.p-high{background:#4a1f1a;color:#ff9a8a}
.chip.p-normal{background:#3d3413;color:var(--warn)}
.chip.p-low{background:#1d3448;color:#9cc7ee}
.chip.st-pending{background:#26334a;color:var(--text-2)}
.chip.st-in-progress{background:#3d3413;color:var(--warn)}
.chip.st-blocked{background:#4a1f1a;color:#ff9a8a}
.chip.st-done{background:#173d2a;color:#7fe0a8}
.chip.st-sent-back{background:#3d3413;color:var(--warn)}
.chip.ok{background:#173d2a;color:#7fe0a8}
.chip.warn,.chip.approx{background:#3d3413;color:var(--warn)}
.chip.off{background:#1f2a3c;color:var(--nav-muted)}
.chip.test{background:#3d3413;color:var(--warn);box-shadow:inset 0 0 0 1px #6b5518}
.chip.w2{background:#2a2645;color:#c9c2ff}
.chip.viewonly{background:#1d3448;color:#9cc7ee}
.chip.role{background:var(--well);color:var(--nav-muted);box-shadow:inset 0 0 0 1px var(--nav-line)}
.chip.pa-name{background:var(--well);color:var(--warn);box-shadow:inset 0 0 0 1px #6b5518;font-size:12px;padding:3px 10px}
.chip.proj{background:color-mix(in srgb,var(--c,#5b6ee1) 22%,var(--navy-3));color:#fff;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c,#5b6ee1) 60%,transparent)}
.overdue{color:#ff9a8a;font-weight:700}

/* ---------- Buttons and fields ---------- */
.btn,button{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:9px;background:var(--amber);color:var(--on-amber);font:inherit;font-weight:800;font-size:13px;padding:8px 14px;cursor:pointer;text-decoration:none;transition:transform .3s ease}
.btn:active,button:active{transform:translateY(1px)}
button.secondary,.btn.secondary{background:var(--well);color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber)}
.primary{background:var(--amber);color:var(--on-amber)}
button[disabled]{opacity:.5;cursor:not-allowed}
button.link{background:none;color:var(--amber);padding:0;font-weight:600;text-decoration:underline}
input,select,textarea{font:inherit;font-size:14px;background:var(--well);color:#fff;border:1px solid var(--nav-line);border-radius:9px;padding:8px 11px;max-width:100%;min-width:0}
input::placeholder,textarea::placeholder{color:#7e8ea9}
textarea{display:block;width:100%;min-height:70px;margin:6px 0}
label{color:var(--text-2);font-size:13.5px}
.filters{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 14px}
.inline,form.inline{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;margin:.25rem 0}
form.stack{display:flex;flex-direction:column;gap:10px;max-width:520px}
form.stack label,.formgrid label{display:flex;flex-direction:column;gap:4px}
.formgrid{display:grid;gap:12px;max-width:720px}
.formgrid label.check{flex-direction:row;align-items:center}
.formgrid fieldset{border:1px solid var(--nav-line);border-radius:9px;padding:8px 12px;display:flex;flex-wrap:wrap;gap:6px 16px}
.composer{display:flex;gap:8px;margin:8px 0}
.composer input{flex:1}

/* ---------- Tables ---------- */
.tablewrap{overflow-x:auto;border-radius:12px}
table{width:100%;border-collapse:collapse;background:var(--navy-3);border:1px solid var(--nav-line);border-radius:12px;font-size:13.5px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--nav-line);vertical-align:top}
th{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--nav-muted);font-weight:700}
tr:last-child td{border-bottom:0}
tr.total td{font-weight:800;color:#fff}
td a,.card a:not(.btn){color:#fff;text-decoration-color:var(--nav-line)}
td a:hover,.card a:not(.btn):hover{color:var(--amber)}
dl{display:grid;grid-template-columns:max-content 1fr;gap:4px 12px;margin:0}dt{color:var(--nav-muted)}dd{margin:0;min-width:0;overflow-wrap:anywhere}

/* ---------- Kanban ---------- */
.board{display:grid;grid-template-columns:repeat(5,minmax(220px,1fr));gap:10px;overflow-x:auto;padding-bottom:6px}
.col{background:#101b30;border:1px solid var(--nav-line);border-radius:11px;padding:10px;min-width:220px}
.col h2,.col h3{font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;margin:0 0 9px}

/* ---------- Phase 6 views: progress meter, project rows, kanban, who-has-what ---------- */
.card h3 .right{margin-left:auto;float:right;font-size:12px;font-weight:700;text-decoration:none;color:var(--amber)!important}
.gauge-wrap{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.gauge-side{flex:1;min-width:180px}
.gauge{width:118px;height:118px;flex:none}
.g-track,.g-fill{fill:none;stroke-width:10}
.g-track{stroke:var(--well)}
.g-fill{stroke:var(--amber);stroke-linecap:round;transform:rotate(-90deg);transform-origin:59px 59px;transition:stroke-dasharray .6s var(--ease)}
.gnum{font-family:var(--font-display);font-weight:800;font-size:26px;fill:#fff;text-anchor:middle}
.glab{font-size:9.5px;fill:var(--nav-muted);letter-spacing:.08em;text-anchor:middle}
.proj-row{display:flex;gap:12px;align-items:center;padding:11px 4px;border-bottom:1px solid var(--nav-line);border-radius:8px;text-decoration:none;color:var(--text)}
.proj-row:last-child{border-bottom:0}
.card .proj-row{color:var(--text)}
.proj-row:hover{background:rgba(255,255,255,.03)}
.proj-row .pi{flex:1;min-width:0}
.proj-row b{font-size:14px;color:#fff;margin-right:6px}
.proj-row .pct{font-family:var(--font-display);font-weight:800;color:#fff;font-size:15px}
.grid>.card .proj-row{border-bottom:0;padding:0}
.chip.priv{background:#3a2140;color:#d9a7ee}
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);gap:10px;overflow-x:auto;padding-bottom:6px;margin-bottom:8px}
.kcol{background:#101b30;border:1px solid var(--nav-line);border-radius:11px;padding:10px;min-width:240px}
.kcol>h3{font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;margin:0 0 9px}
.kcol .card.task{margin:0 0 8px}
.team-row{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--nav-line);font-size:13.5px}
.team-row:last-child{border-bottom:0}
.team-row .wl{margin-left:auto;text-align:right}
.team-row .wl b{color:#fff;font-size:12.5px}
.team-row .wl small{display:block;color:var(--nav-muted);font-size:11px}
ul.plain{list-style:none;padding:0;margin:0 0 8px}ul.plain li{padding:6px 0;border-bottom:1px solid var(--nav-line)}
/* Phase 6 step 4b — task rows and controls (prototype .task-row, .tick (renamed from .check: label.check is the app's checkbox label), .task-ctl, .sel, .mini-btn) */
.task-row{display:flex;flex-wrap:wrap;gap:11px;align-items:flex-start;background:var(--row);border:1px solid var(--nav-line);border-radius:11px;padding:11px 12px;margin-bottom:8px}
.task-row.is-done{opacity:.55}
.task-row.is-done .tt{text-decoration:line-through}
.task-row .ti{flex:1;min-width:180px}
.task-row .tt{font-size:13.5px;font-weight:600;color:#fff;text-decoration:none}
.task-row .tt:hover{color:var(--amber)}
.task-row .tm{font-size:12px;color:var(--nav-muted);margin-top:4px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
form.ck{display:inline;margin:0}
.tick{width:22px;height:22px;border-radius:7px;border:2px solid #4a5f86;background:none;cursor:pointer;flex:none;margin-top:1px;padding:0;color:var(--on-amber);font-weight:900;font-size:13px;display:inline-flex;align-items:center;justify-content:center;transition:border-color .15s ease,background .15s ease}
.tick:hover,.tick:focus-visible{border-color:var(--amber)}
.tick.on{background:var(--amber);border-color:var(--amber);cursor:default}
.tick.off{border-style:dashed;opacity:.5;cursor:default}
.task-ctl{display:flex;gap:10px 14px;flex-wrap:wrap;align-items:center}
.task-ctl form.ctl,.task-ctl p.ctl{display:flex;gap:6px;align-items:center;margin:0}
.task-ctl label{display:flex;gap:6px;align-items:center;font-size:12.5px;color:var(--text-2)}
.sel{background:var(--well);color:#dbe5f5;border:1px solid var(--nav-line);border-radius:8px;font-size:12.5px;padding:6px 7px;cursor:pointer;width:auto}
.mini-btn{background:var(--well);color:#dbe5f5;border:1px solid var(--nav-line);border-radius:8px;font-size:12.5px;padding:6px 10px;cursor:pointer;font-weight:600}
.mini-btn:hover,.mini-btn:focus-visible{border-color:var(--amber);color:var(--amber)}
.card.task form.ck{display:block;margin-top:8px}

/* ---------- Comments, notes, connections ---------- */
.comments{list-style:none;padding:0;margin:0}
.comments li{background:var(--row);border:1px solid var(--nav-line);border-radius:10px;padding:10px 12px;margin-bottom:8px;font-size:13.5px}
.c-conflict{border-left:3px solid var(--bad)!important}
.c-sent-back{border-left:3px solid var(--amber)!important}
.conn{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--nav-line)}.conn span:first-child{min-width:240px}
.results>li{margin:10px 0}
.inbox{padding-left:18px}.inbox .note{margin:6px 0}

/* ---------- Chat ---------- */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 12px}
.tabs a{background:var(--well);color:var(--text-2);border:1px solid var(--nav-line);border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:700;text-decoration:none}
.tabs a.on{background:var(--amber);color:var(--on-amber);border-color:var(--amber)}
.chat{display:flex;flex-direction:column;gap:9px;margin-top:10px}
.msg{max-width:760px;background:var(--row);border:1px solid var(--nav-line);border-radius:13px;border-bottom-left-radius:4px;padding:9px 12px;font-size:14px;align-self:flex-start;animation:feedIn .4s ease}
.msg b{font-size:12px;color:#fff}
/* The prototype's own bubble is white on amber-deep (4.1:1, under AA for body text); amber + dark ink is 9.3:1. */
.msg.user{align-self:flex-end;background:var(--amber);border-color:var(--amber);color:var(--on-amber);border-radius:13px;border-bottom-right-radius:4px}
.msg.user b{color:var(--on-amber)}
.msg.pa{background:linear-gradient(180deg,#2a2110,var(--navy-3));border-color:#6b5518}
.msg.kirby{border-left:3px solid var(--good)}
.chatlist .msg{max-width:none}
.draft{display:flex;flex-direction:column;gap:6px;margin-top:8px;padding:10px;border:1px dashed #6b5518;border-radius:10px}
/* Phase 6 step 4c — chat box, team-chat bubbles, email rows (prototype .chan, .bubble, .mail-row, .ai-box) */
.chan{display:flex;flex-direction:column;gap:9px;max-height:460px;overflow-y:auto;padding:2px 4px 2px 8px;margin:0 0 10px}
.chan .msg,.chatlist .msg{width:fit-content}
.chan .msg{max-width:86%}
.msg p{margin:3px 0 0}
.chatlist{display:flex;flex-direction:column;gap:8px;margin:8px 0}
.chatlist .msg{max-width:86%}
.msg.me{align-self:flex-end;background:var(--amber);border-color:var(--amber);color:var(--on-amber);border-radius:13px;border-bottom-right-radius:4px}
.msg.me b{color:var(--on-amber)}
.quick{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin:4px 0 6px}
a.mini-btn{text-decoration:none;display:inline-block}
.inbox-brief{display:flex;gap:14px;align-items:flex-start}
.inbox-brief .pa{flex:none;margin:0;width:auto}.inbox-brief .pa-img{width:52px;height:52px}.inbox-brief figcaption{display:none}
.inbox-brief p{margin:6px 0}
details.mail-row{border-bottom:1px solid var(--nav-line);padding:4px 0}
details.mail-row:last-child{border-bottom:0}
details.mail-row>summary{display:flex;gap:11px;align-items:flex-start;padding:9px 4px;cursor:pointer;list-style:none;border-radius:8px}
details.mail-row>summary::-webkit-details-marker{display:none}
details.mail-row>summary:hover{background:rgba(255,255,255,.03)}
details.mail-row>summary:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
details.mail-row .mi{flex:1;min-width:0}
details.mail-row b{font-size:13.5px;color:#fff}
details.mail-row .ms{font-size:12.5px;color:var(--nav-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
details.mail-row[open] .ms:last-child{display:none}
.ai-box{background:linear-gradient(180deg,#2a2110,var(--navy-3));border:1px solid #6b5518;border-radius:11px;padding:13px;margin:4px 0 10px}
.ai-box h4{margin:12px 0 6px;color:var(--warn);font-size:13px}
.ai-box p,.ai-box li{font-size:13px;color:var(--text)}
.ai-box ol{margin:6px 0;padding-left:19px}.ai-box li{margin:4px 0}
.ai-box p.muted{color:var(--text-2)}
/* Phase 6 step 4d — costs and site media empty states */
.costs .tiles{grid-template-columns:repeat(4,minmax(0,1fr));margin:8px 0}
@media(max-width:640px){.costs .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.costs .tile .n{color:var(--nav-muted)}
.media .empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:150px;border:1px dashed var(--nav-line);border-radius:11px;padding:16px;text-align:center;color:var(--nav-muted);font-size:13px}
.media .empty svg{width:34px;height:34px;stroke:var(--nav-muted)}
.media .empty p{margin:0;max-width:300px}
/* Phase 6 step 4e — sign-in page (prototype hero + "How each person gets in") */
.signin{text-align:center;margin-bottom:14px}
.signin-av{width:84px;height:84px;border-radius:50%;border:3px solid var(--amber);background:var(--paper);object-fit:cover}
.signin h1{margin:12px 0 6px}
.signin .lede{color:var(--text-2);font-size:15px;margin:0 auto 16px;max-width:420px}
.signin .card{text-align:center}
button.ms{background:#fff;color:#1b1b1b;font-weight:700;gap:10px;padding:10px 16px}
.ms-logo{width:18px;height:18px;flex:none}
ol.steps{list-style:none;padding:0;margin:0;display:grid;gap:10px}
ol.steps li{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;background:var(--row);border:1px solid var(--nav-line);border-radius:11px}
ol.steps .sn{font-family:var(--font-mono);font-weight:700;color:var(--amber);font-size:13px;padding-top:2px}
ol.steps b{color:#fff;font-size:14px}
ol.steps p{margin:3px 0 0;font-size:13px;color:var(--text-2)}
ol.steps .mono{color:var(--amber)}
/* Phase 6 step 5 — meeting recording: red banner for everyone on the page, Record button */
.rec-banner{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:#4a1f1a;border:1px solid var(--bad);color:#ffd2ca;border-radius:11px;padding:10px 14px;margin:0 0 12px}
[hidden]{display:none!important}  /* button/flex rules must never show a hidden element */
input[type=checkbox]{width:18px;height:18px;padding:0;accent-color:var(--amber);flex:none}
.rec label.check{display:flex;gap:8px;align-items:center;margin:10px 0 4px;color:var(--text)}
.rec-banner b{color:#fff}
.rec-dot{width:12px;height:12px;border-radius:50%;background:var(--bad);flex:none;animation:recPulse 1.2s ease-in-out infinite}
@keyframes recPulse{50%{transform:scale(.7)}}
button.recbtn{background:var(--bad);color:#fff}
.rec .row{gap:10px;align-items:center;margin:10px 0}
.rec audio{width:100%;max-width:420px;margin-top:6px}
/* Phase 6 step 6 — transcripts */
.recitem{padding:10px 0;border-bottom:1px solid var(--nav-line)}
.recitem .chip{margin-left:4px}
blockquote.excerpt{margin:8px 0 4px;padding:8px 12px;border-left:3px solid var(--amber);background:var(--well);border-radius:0 9px 9px 0;font-size:13.5px;color:var(--text)}
ol.segments{list-style:none;padding:0;margin:0}
ol.segments li{padding:6px 0;border-bottom:1px solid var(--nav-line);font-size:14px}
ol.segments .mono{color:var(--amber);margin-right:8px;font-size:12.5px}
/* Phase 6 step 7 — meeting summary */
#summary h3{margin:14px 0 6px;font-size:14px;color:var(--warn)}
ul.sumlist{margin:0;padding-left:20px}
ul.sumlist li{margin:5px 0;font-size:14px}
ul.sumlist q{display:block;margin-top:3px;font-size:12.5px;color:var(--text-2)}
.draft label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--text-2)}
.draft input,.draft textarea{width:100%}
.draft button{align-self:flex-start}

/* ---------- Motion (300–600ms ease, quiet) ---------- */
/* Entrance motion moves only: content is never hidden waiting for an animation (paused tabs, print, thumbnails). */
@keyframes slideIn{from{transform:translateY(6px)}to{transform:none}}
@keyframes feedIn{from{transform:translateX(-6px)}to{transform:none}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(242,169,59,.55)}100%{box-shadow:0 0 0 8px rgba(242,169,59,0)}}
@keyframes presence{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- Tablet: icon rail ---------- */
@media (max-width:1000px){
  .shell{grid-template-columns:60px minmax(0,1fr)}
  .side{padding:14px 8px}
  .side .brand,.side nav .nl{display:none}
  .side nav a{justify-content:center;padding:10px 6px}
  .side nav a svg{width:19px;height:19px}
  .grid2{grid-template-columns:minmax(0,1fr)}
}
/* ---------- Phone: bottom bar, one column ---------- */
@media (max-width:640px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;inset:auto 0 0 0;top:auto;height:auto;z-index:10;padding:0;border-right:0;border-top:1px solid var(--nav-line);overflow:visible}
  .side nav{flex-direction:row;gap:0;overflow-x:auto;scrollbar-width:none;padding-bottom:env(safe-area-inset-bottom)}
  .side nav::-webkit-scrollbar{display:none}
  .side nav a{flex:1 0 64px;flex-direction:column;gap:3px;padding:9px 2px 10px;border-radius:0;font-size:10.5px;font-weight:700;color:var(--nav-muted)}
  .side nav a .nl{display:block;white-space:nowrap}
  .side nav a.on{background:none;color:var(--amber)}
  .side nav a.on svg{stroke:var(--amber)}
  .signed-in .mainwrap{padding-bottom:64px}
  .topbar{padding:10px 16px;flex-wrap:wrap}
  .topbar .brand{display:inline;padding:4px 0}
  .who .wn{display:none}
  main{padding:16px}
  h1{font-size:21px}
  .hero{flex-direction:column;align-items:flex-start}
  .composer{flex-direction:column}
  .board{grid-template-columns:repeat(5,minmax(200px,85vw))}
  .kanban{grid-auto-columns:minmax(240px,85vw)}
  table{display:block;overflow-x:auto}
}