/* BridgeSpeak look: Inter, warm off-white, ink navy, teal. Kept calm on purpose: no motion, no flashing. */
@font-face { font-family: "Inter"; font-weight: 100 900; font-style: normal; font-display: swap;
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2"); }

:root { --bg:#f9f7f4; --ink:#1a1a2e; --muted:#4a5568; --card:#ffffff; --line:#dcd8d0;
  --teal:#0f9b8e; --btn:#0b7f74; --btn-fg:#ffffff; --bright:#14c6b5; --navy:#131c2e; --navy2:#1b2a40;
  --me:#e2f3f0; --bot:#ffffff; --fs:18px; --radius:12px;
  --g-bg:#dcf3e3; --g-bd:#2f9e57; --b-bg:#dcebfb; --b-bd:#2f76c7; --a-bg:#fdefd2; --a-bd:#c98a12; --n-bg:#efedea; --n-bd:#9a958c;
  --adv-bg:#efe5fb; --adv-bd:#7c4fc4; --care-bg:#fde3e1; --care-bd:#c9372c; }
body[data-theme="night"]    { --bg:#0f1726; --ink:#f2f5f8; --muted:#b9c3d0; --card:#182236; --line:#2b3a52;
  --teal:#14c6b5; --btn:#14c6b5; --btn-fg:#0b1220; --me:#16333a; --bot:#182236;
  --g-bg:#173a27; --g-bd:#4fcf82; --b-bg:#16304f; --b-bd:#5aa2ef; --a-bg:#3d3013; --a-bd:#e3ac3d; --n-bg:#222c3d; --n-bd:#7d8898;
  --adv-bg:#2c2044; --adv-bd:#a887ea; --care-bg:#48211f; --care-bd:#f0736a; }
body[data-theme="contrast"] { --bg:#000; --ink:#fff; --muted:#fff; --card:#000; --line:#fff;
  --teal:#14c6b5; --btn:#14c6b5; --btn-fg:#000; --me:#000; --bot:#000;
  --g-bg:#000; --g-bd:#5dff9a; --b-bg:#000; --b-bd:#6db8ff; --a-bg:#000; --a-bd:#ffc94d; --n-bg:#000; --n-bd:#fff;
  --adv-bg:#000; --adv-bd:#d6b3ff; --care-bg:#000; --care-bd:#ff8b82; }
body[data-size="s"]  { --fs:16px; } body[data-size="m"] { --fs:18px; }
body[data-size="l"]  { --fs:21px; } body[data-size="xl"]{ --fs:25px; }

* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:400 var(--fs)/1.6 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
#app { max-width:46rem; transition:none; margin:0 auto; padding:0 1rem 3rem; }
h1, h2 { font-weight:800; letter-spacing:-.01em; line-height:1.15; margin:.2em 0 .5em; }
h2 { font-size:1.3rem; }
p { margin:.5rem 0; }

.wordmark { margin:0; font-weight:800; font-size:1.35rem; letter-spacing:-.02em; display:flex; align-items:baseline; gap:0; flex-wrap:wrap; }
.wordmark span:first-child { color:var(--teal); } .wordmark span:nth-child(2) { color:var(--ink); }
.wordmark small { font-weight:600; font-size:.6em; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-left:.7rem; }
header.top { display:flex; justify-content:space-between; align-items:center; gap:.75rem; flex-wrap:wrap; padding:1rem 0; border-bottom:1px solid var(--line); margin-bottom:1rem; }
.bar { display:flex; gap:.5rem; flex-wrap:wrap; }

/* Sign-in hero mirrors the site hero: deep navy, big teal accent word */
#signin { min-height:100vh; background:radial-gradient(1200px 500px at 80% -10%, #1d3a4a 0%, transparent 60%), var(--navy); color:#fff; display:flex; align-items:center; }
.hero { max-width:38rem; margin:0 auto; padding:2.5rem 1.25rem; }
.hero .wordmark { font-size:1.6rem; margin-bottom:2rem; } .hero .wordmark span:nth-child(2) { color:#fff; } .hero .wordmark span:first-child { color:var(--bright); }
.hero h1 { font-size:clamp(2.4rem, 8vw, 3.6rem); color:#fff; } .hero h1 em { color:var(--bright); font-style:normal; }
.lead { font-size:1.1rem; color:#d5dde6; max-width:32rem; margin:1rem 0 1.75rem; }
.note.on-dark { color:#c5d0dc; }

.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem 1.25rem; margin:1rem 0; }
.btn { font:inherit; font-weight:600; font-size:.9em; color:var(--ink); background:transparent; border:2px solid var(--line); border-radius:8px; padding:.55rem 1rem; cursor:pointer; }
.btn.primary { background:var(--btn); color:var(--btn-fg); border-color:var(--btn); }
.btn.big { font-size:1rem; padding:.8rem 1.4rem; }
.btn[disabled] { opacity:.5; cursor:not-allowed; }
#signin .btn.primary { background:var(--bright); border-color:var(--bright); color:#08222a; }
.btn:focus-visible, textarea:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible { outline:3px solid var(--bright); outline-offset:2px; }
textarea, select { font:inherit; color:var(--ink); background:var(--card); border:2px solid var(--line); border-radius:10px; padding:.65rem .75rem; }
textarea { width:100%; resize:vertical; } select { margin-left:.4rem; padding:.3rem .5rem; }
label { display:block; margin:.55rem 0; } label.check { display:flex; gap:.6rem; align-items:flex-start; }
input[type=checkbox], input[type=radio] { accent-color:var(--btn); width:1.15em; height:1.15em; margin-top:.25em; }
hr { border:0; border-top:1px solid var(--line); margin:1rem 0; }
ul.plain { padding-left:1.2rem; margin:.5rem 0 .75rem; } ul.plain li { margin:.3rem 0; }
.note { color:var(--muted); font-size:.85em; }
.row { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin-top:.6rem; }

fieldset.mode { border:0; padding:0; margin:0 0 .5rem; display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
fieldset.mode legend { float:left; margin-right:.6rem; padding:0; font-weight:600; font-size:.9em; color:var(--muted); }
.pill { display:inline-flex; gap:.45rem; align-items:center; margin:0; border:2px solid var(--line); border-radius:999px; padding:.3rem .9rem; cursor:pointer; font-size:.9em; font-weight:500; }
.pill:has(input:checked) { border-color:var(--btn); background:var(--me); font-weight:600; }
.pill input { margin:0; }

.log { list-style:none; padding:0; margin:1rem 0; display:flex; flex-direction:column; gap:.9rem; }
.log > li { padding:.85rem 1.05rem; border-radius:var(--radius); border:1px solid var(--line); overflow-wrap:anywhere; max-width:94%; }
.log > li.me { background:var(--me); align-self:flex-end; white-space:pre-wrap; }
.log > li.bot { background:var(--bot); align-self:flex-start; border-left:5px solid var(--teal); }
.log li small.who { display:block; color:var(--muted); font-size:.72em; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:.2rem; }
.sec { margin:.55rem 0; } .sec b { display:block; font-size:.78em; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-bottom:.1rem; }
.chip { display:inline-block; background:var(--me); border:1px solid var(--line); border-radius:999px; padding:.05rem .7rem; font-size:.85em; font-weight:600; margin:0 .3rem .3rem 0; }
.help { border:2px solid var(--teal); border-radius:10px; padding:.6rem .8rem; }

.fb { margin-top:.8rem; padding-top:.8rem; border-top:1px dashed var(--line); }
.fb h3 { font-size:1rem; margin:.1rem 0 .3rem; }
.fb fieldset { border:0; padding:0; margin:.6rem 0; } .fb legend { padding:0; font-weight:600; }
.fb .opt { display:inline-flex; gap:.4rem; align-items:center; margin:.2rem .9rem .2rem 0; }
.sr, .skip:not(:focus) { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.skip:focus { position:static; padding:.5rem; }
[hidden] { display:none !important; }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; scroll-behavior:auto !important; } }

.tabs { display:flex; gap:.5rem; margin:.25rem 0 1rem; }
.tab { font:inherit; font-weight:700; font-size:.95em; color:var(--muted); background:transparent; border:0; border-bottom:4px solid transparent; padding:.5rem .9rem; cursor:pointer; }
.tab[aria-pressed="true"] { color:var(--ink); border-bottom-color:var(--teal); }
.tab:focus-visible { outline:3px solid var(--bright); outline-offset:2px; }
.badge { display:inline-block; min-width:1.5em; text-align:center; background:var(--btn); color:var(--btn-fg); border-radius:999px; font-size:.75em; padding:0 .45em; margin-left:.3rem; }
ul.people { list-style:none; padding:0; margin:.5rem 0 1rem; display:flex; flex-direction:column; gap:.5rem; }
ul.people button { width:100%; text-align:left; display:flex; justify-content:space-between; align-items:center; font:inherit; font-weight:600; background:var(--card); color:var(--ink); border:2px solid var(--line); border-radius:10px; padding:.7rem 1rem; cursor:pointer; }
ul.people button:focus-visible { outline:3px solid var(--bright); outline-offset:2px; }
input#my-name { font:inherit; color:var(--ink); background:var(--card); border:2px solid var(--line); border-radius:10px; padding:.45rem .7rem; }
.row.between { justify-content:space-between; } .row.between h2 { margin:0; }
.reading { margin-top:.6rem; padding-top:.6rem; border-top:1px solid var(--line); font-size:.95em; }
.reading .wait { color:var(--muted); font-style:italic; }
.reading .btn { margin-top:.3rem; }
details.fb { margin-top:.7rem; border-top:1px dashed var(--line); padding-top:.5rem; }
details.fb summary { cursor:pointer; font-weight:600; font-size:.92em; }
details.fb textarea { margin:.25rem 0 .5rem; }


/* ---- role tabs, timeline ---- */
body.wide #app { max-width:74rem; }
.tabs { flex-wrap:wrap; align-items:center; }
.flow-toggle { margin-left:auto; padding:.3rem .8rem; }
.layout { display:grid; grid-template-columns:minmax(0,1fr); gap:1.25rem; align-items:start; }
body.wide .layout.with-flow { grid-template-columns:minmax(0,1fr) 22rem; }
.flow { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:.9rem 1rem; }
body.wide .flow { position:sticky; top:1rem; max-height:calc(100vh - 2rem); overflow:auto; }
.flow h2 { margin:0 0 .2rem; font-size:1.05rem; }
.legend { list-style:none; padding:0; margin:.5rem 0; display:flex; flex-wrap:wrap; gap:.35rem; font-size:.72em; font-weight:600; }
.legend li { padding:.1rem .6rem; border-radius:999px; border-width:2px; border-style:solid; }
.flow-log { list-style:none; padding:0; margin:.6rem 0 0; display:flex; flex-direction:column; gap:.5rem; }
.flow-log li { padding:.5rem .7rem; border-radius:10px; border-width:2px; border-style:solid; overflow-wrap:anywhere; font-size:.88em; white-space:pre-wrap; }
.flow-log .meta { display:flex; justify-content:space-between; gap:.5rem; font-size:.78em; font-weight:700; letter-spacing:.03em; margin-bottom:.15rem; color:var(--ink); }
.flow-log .meta time { font-weight:600; color:var(--muted); }
.flow-log .tag { display:block; margin-top:.25rem; font-size:.72em; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.t-green { background:var(--g-bg); border-color:var(--g-bd); } .t-blue { background:var(--b-bg); border-color:var(--b-bd); }
.t-amber { background:var(--a-bg); border-color:var(--a-bd); } .t-grey  { background:var(--n-bg); border-color:var(--n-bd); }
.t-advice { background:var(--adv-bg); border-color:var(--adv-bd); } .t-care { background:var(--care-bg); border-color:var(--care-bd); }
.t-pending { background:transparent; border-style:dashed !important; border-color:var(--n-bd); }
.log > li.advice { background:var(--adv-bg); border:2px solid var(--adv-bd); align-self:center; max-width:100%; white-space:pre-wrap; }

ul.cases, ul.rows { list-style:none; padding:0; margin:.5rem 0 1rem; display:flex; flex-direction:column; gap:.5rem; }
ul.cases button { width:100%; text-align:left; font:inherit; background:var(--card); color:var(--ink); border:2px solid var(--line); border-radius:10px; padding:.7rem 1rem; cursor:pointer; }
ul.cases button:focus-visible { outline:3px solid var(--bright); outline-offset:2px; }
ul.rows li { display:flex; justify-content:space-between; align-items:center; gap:.6rem; flex-wrap:wrap; padding:.4rem .2rem; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.btn.danger { border-color:var(--care-bd); }
.chip.care { background:var(--care-bg); border-color:var(--care-bd); }
#view-admin input { font:inherit; color:var(--ink); background:var(--card); border:2px solid var(--line); border-radius:10px; padding:.45rem .7rem; flex:1 1 14rem; }
.case-msg .meta { display:flex; justify-content:space-between; gap:.5rem; }
.log > li.case-msg { border-width:2px; max-width:100%; align-self:stretch; white-space:pre-wrap; }
.log > li.case-msg.t-green { border-color:var(--g-bd); } .log > li.case-msg.t-blue { border-color:var(--b-bd); }
.log > li.case-msg.t-amber { border-color:var(--a-bd); } .log > li.case-msg.t-grey { border-color:var(--n-bd); }
.log > li.case-msg.t-care { border-color:var(--care-bd); } .log > li.case-msg.t-advice { border-color:var(--adv-bd); }
.log > li.case-msg .tag { display:block; font-size:.72em; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-top:.3rem; }