
:root{
  --bg:#EAF0F2; --surface:#FFFFFF; --ink:#13283A; --muted:#4F6272; --line:#C9D5DC;
  --bubble:#DDF2E4; --bubble-ink:#13283A; --accent:#0F5C7A; --accent-ink:#FFFFFF;
  --true:#1D6B45; --true-bg:#E1F3E8; --false:#B3261E; --false-bg:#FBE7E5;
  --unv:#8A5A00; --unv-bg:#FFF1D1; --alert:#7A1C14; --alert-bg:#FFE3DE;
  --focus:#0F5C7A;
  color-scheme: light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E1A22; --surface:#15252F; --ink:#E6EEF2; --muted:#9FB2BE; --line:#2C4250;
    --bubble:#1C3A2B; --bubble-ink:#E6EEF2; --accent:#6CC3E0; --accent-ink:#06202B;
    --true:#7FD8A6; --true-bg:#123323; --false:#FF9C93; --false-bg:#3A1714;
    --unv:#F5C562; --unv-bg:#352708; --alert:#FFB4A8; --alert-bg:#3A1714;
    --focus:#6CC3E0; color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1A22; --surface:#15252F; --ink:#E6EEF2; --muted:#9FB2BE; --line:#2C4250;
  --bubble:#1C3A2B; --bubble-ink:#E6EEF2; --accent:#6CC3E0; --accent-ink:#06202B;
  --true:#7FD8A6; --true-bg:#123323; --false:#FF9C93; --false-bg:#3A1714;
  --unv:#F5C562; --unv-bg:#352708; --alert:#FFB4A8; --alert-bg:#3A1714;
  --focus:#6CC3E0; color-scheme: dark;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:1.0625rem;line-height:1.55}
.wrap{max-width:40rem;margin:0 auto;padding:1.5rem 1.15rem 3rem}
h1,h2,h3,.stamp{font-family:"Bricolage Grotesque","Arial Narrow",system-ui,sans-serif}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}

.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:1rem;color:var(--muted);margin-bottom:1.75rem}
.brand svg{width:28px;height:28px;flex:none}
h1{font-size:clamp(2rem,7vw,2.9rem);line-height:1.05;font-weight:800;margin:0 0 .75rem;letter-spacing:-.02em}
.lede{margin:0 0 1.75rem;color:var(--muted);max-width:34rem}

/* the forwarded-message bubble */
.bubble{position:relative;background:var(--bubble);color:var(--bubble-ink);border-radius:18px 18px 18px 4px;padding:.8rem 1rem 1rem;margin-left:10px}
.bubble::before{content:"";position:absolute;left:-10px;bottom:0;width:14px;height:16px;background:var(--bubble);clip-path:polygon(100% 0,100% 100%,0 100%)}
.fwd{display:flex;align-items:center;gap:.35rem;font-style:italic;font-size:.9rem;color:var(--muted);margin-bottom:.35rem}
label.fwd{cursor:pointer}
textarea{width:100%;min-height:7rem;resize:vertical;border:0;background:transparent;color:inherit;font:inherit;font-size:1.1rem;line-height:1.5;padding:0}
textarea::placeholder{color:var(--muted);opacity:.85}
textarea:focus{outline:none}
.bubble:focus-within{box-shadow:0 0 0 3px var(--focus)}
.actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem;align-items:center}
button{font:inherit;cursor:pointer}
.btn{background:var(--accent);color:var(--accent-ink);border:0;border-radius:999px;padding:.75rem 1.4rem;font-weight:700;font-size:1.05rem}
.btn:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line);border-radius:999px;padding:.6rem 1rem;font-weight:700}
.hint{font-size:.9rem;color:var(--muted);margin:.4rem 0 0}

.examples{margin-top:1.5rem}
.examples h2{font-size:1rem;font-weight:500;margin:0 0 .5rem;color:var(--muted);font-family:inherit}
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:.4rem .8rem;font-size:.92rem;text-align:left}
.chip:hover{border-color:var(--accent)}

/* result */
#result{margin-top:2rem}
.card{background:var(--surface);border-radius:14px;padding:1.25rem 1.2rem 1.35rem;border:1px solid var(--line)}
.stamp-row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:.9rem}
.stamp{display:inline-block;font-weight:800;font-size:2rem;letter-spacing:.02em;padding:.15rem .7rem;border:4px solid currentColor;border-radius:8px;transform:rotate(-4deg);line-height:1.1}
.v-TRUE .stamp{color:var(--true);background:var(--true-bg)}
.v-FALSE .stamp{color:var(--false);background:var(--false-bg)}
.v-UNVERIFIED .stamp{color:var(--unv);background:var(--unv-bg)}
.stamp-meaning{font-size:.95rem;color:var(--muted);flex:1;min-width:12rem}
.animate .stamp{animation:thump .35s cubic-bezier(.2,1.4,.4,1) both}
@keyframes thump{from{transform:rotate(-4deg) scale(1.6);opacity:0}to{transform:rotate(-4deg) scale(1);opacity:1}}
@media (prefers-reduced-motion: reduce){.animate .stamp{animation:none}}
.matched{font-size:.95rem;color:var(--muted);margin:0 0 .6rem}
.matched strong{color:var(--ink)}
.card h3{font-size:1.05rem;margin:1.1rem 0 .4rem}
.card p{margin:.4rem 0}
.note{font-size:.95rem;background:var(--unv-bg);color:var(--ink);border-radius:8px;padding:.6rem .8rem;margin:.75rem 0}
.sources{list-style:none;padding:0;margin:.3rem 0 0}
.sources li{padding:.55rem 0;border-top:1px solid var(--line)}
.sources li:first-child{border-top:0}
.sources a{font-weight:700;word-break:break-word}
.sources small{display:block;color:var(--muted)}
.doctor{display:flex;gap:.7rem;align-items:flex-start;margin-top:1.1rem;padding:.85rem 1rem;border-radius:10px;background:var(--bg);font-weight:700}
.doctor svg{flex:none;width:24px;height:24px;margin-top:1px}
.doctor span{font-weight:400;display:block;color:var(--muted);font-size:.93rem}
.share{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.share a,.share button{display:inline-flex;align-items:center;text-decoration:none}
.related{display:flex;flex-direction:column;gap:.4rem;margin-top:.4rem}
.related .chip{border-radius:10px}
.emergency{background:var(--alert-bg);color:var(--alert);border-radius:12px;padding:1rem 1.1rem;margin-bottom:1rem;font-weight:700}
.emergency p{margin:.3rem 0;font-weight:400;color:var(--ink)}
.emergency a{color:var(--alert)}

/* library + about */
section.more{margin-top:3rem}
section.more h2{font-size:1.5rem;font-weight:800;margin:0 0 .4rem;letter-spacing:-.01em}
section.more > p{color:var(--muted);margin:0 0 1rem}
.filter{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.8rem}
.filter button{background:var(--surface);border:1px solid var(--line);color:var(--ink);border-radius:999px;padding:.35rem .85rem;font-size:.92rem}
.filter button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.lib{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.lib li{border-bottom:1px solid var(--line)}
.lib button{width:100%;display:flex;gap:.75rem;align-items:baseline;background:none;border:0;color:var(--ink);padding:.8rem 0;text-align:left;font-size:1rem}
.tag{flex:none;font-weight:700;font-size:.8rem;border-radius:4px;padding:.1rem .4rem;min-width:6.4rem;text-align:center}
.tag.TRUE{background:var(--true-bg);color:var(--true)}
.tag.FALSE{background:var(--false-bg);color:var(--false)}
.tag.UNVERIFIED{background:var(--unv-bg);color:var(--unv)}
.how{counter-reset:s;list-style:none;padding:0;margin:0}
.how li{counter-increment:s;position:relative;padding:0 0 1rem 2.4rem}
.how li::before{content:counter(s);position:absolute;left:0;top:0;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-weight:700;display:grid;place-items:center;font-size:.9rem}
details.gate{margin-top:.5rem}
details.gate summary{cursor:pointer;font-weight:700;color:var(--accent);padding:.5rem 0}
.reviewline{font-size:.88rem;color:var(--muted);margin:.6rem 0 0}
.mini{border:1px solid var(--line);border-radius:10px;padding:.75rem .9rem;margin-top:.5rem}
.mini p{margin:.35rem 0}
.badge{display:inline-block;font-size:.85rem;font-weight:700;border-radius:999px;padding:.15rem .65rem;background:var(--bg);color:var(--muted);margin:0 0 .6rem}
.badge.ai-b{background:var(--unv-bg);color:var(--unv)}
.ai{margin-top:1.1rem;border:1.5px dashed var(--line);border-radius:10px;padding:.8rem .95rem}
.ai-head{font-weight:700;display:flex;align-items:center;gap:.5rem}
.ai p{margin:.35rem 0;font-size:.97rem}
.dot{width:.6rem;height:.6rem;border-radius:50%;background:var(--accent);flex:none;animation:pulse 1s ease-in-out infinite alternate}
@keyframes pulse{from{opacity:.25}to{opacity:1}}
@media (prefers-reduced-motion: reduce){.dot{animation:none}}
a.chip{text-decoration:none;display:inline-block}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.75rem}
.topbar .brand{margin:0}
.gear{display:inline-flex;align-items:center;gap:.4rem;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:.45rem .85rem;font-weight:700;font-size:.92rem}
.gear svg{width:18px;height:18px}
.ai-pill{font-size:.78rem;border-radius:999px;padding:.05rem .45rem;background:var(--true-bg);color:var(--true)}
dialog{border:0;border-radius:16px;padding:0;width:min(34rem,calc(100% - 1.5rem));background:var(--surface);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.35)}
dialog::backdrop{background:rgba(5,15,22,.55)}
.dlg{padding:1.25rem 1.2rem 1.3rem}
.dlg h2{font-size:1.35rem;font-weight:800;margin:0 0 .35rem}
.dlg p{margin:.35rem 0;color:var(--muted);font-size:.95rem}
.field{margin-top:1rem}
.field label{display:block;font-weight:700;margin-bottom:.3rem}
.field select,.field input[type=text],.field input[type=password]{width:100%;font:inherit;font-size:1rem;padding:.6rem .7rem;border-radius:10px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink)}
.field small{display:block;color:var(--muted);margin-top:.3rem;font-size:.85rem}
.check{display:flex;gap:.5rem;align-items:flex-start;margin-top:1rem;font-size:.95rem}
.check input{margin-top:.25rem;width:1.1rem;height:1.1rem}
.dlg .actions{margin-top:1.2rem}
.status{margin-top:.8rem;font-size:.93rem;min-height:1.2em}
.status.ok{color:var(--true)} .status.err{color:var(--false)}
.warnbox{background:var(--unv-bg);color:var(--ink);border-radius:10px;padding:.65rem .8rem;font-size:.9rem;margin-top:1rem}
footer{margin-top:3rem;padding-top:1.25rem;border-top:1px solid var(--line);font-size:.9rem;color:var(--muted)}
footer p{margin:.4rem 0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- App shell ---------- */
.nav{display:flex;gap:.35rem;align-items:center;flex-wrap:wrap}
.nav a,.nav button{font:inherit;font-size:.92rem;font-weight:700;color:var(--ink);text-decoration:none;background:none;border:0;padding:.4rem .65rem;border-radius:999px;cursor:pointer}
.nav a[aria-current="page"]{background:var(--surface);border:1px solid var(--line)}
.nav .btn-sm{background:var(--accent);color:var(--accent-ink)}
.topbar{flex-wrap:wrap}
.view[hidden]{display:none}
.loading{display:flex;gap:.6rem;align-items:center}
.muted{color:var(--muted)}
.small{font-size:.9rem}
/* forms */
.form .field input,.form .field select,.form .field textarea{width:100%;font:inherit;font-size:1rem;padding:.6rem .7rem;border-radius:10px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink)}
.form .field textarea{min-height:5rem;resize:vertical}
.tabs{display:flex;gap:.3rem;margin-bottom:.8rem;flex-wrap:wrap}
.tabs button{font:inherit;font-weight:700;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:.4rem .9rem;cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
/* history */
.hist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.hist li{border-bottom:1px solid var(--line);display:flex;gap:.6rem;align-items:flex-start;padding:.7rem 0}
.hist .open{flex:1;background:none;border:0;text-align:left;color:var(--ink);font:inherit;cursor:pointer;padding:0}
.hist .when{display:block;font-size:.82rem;color:var(--muted);margin-top:.15rem}
.iconbtn{background:none;border:1px solid var(--line);color:var(--muted);border-radius:8px;padding:.25rem .5rem;cursor:pointer;font:inherit;font-size:.85rem}
.empty{padding:1.5rem 0;color:var(--muted)}
/* admin */
.wide{max-width:64rem}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.6rem;margin-bottom:1rem}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:.8rem}
.stat b{display:block;font-size:1.6rem;font-family:"Bricolage Grotesque",system-ui,sans-serif}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:.93rem}
th,td{text-align:left;padding:.55rem .7rem;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.82rem;color:var(--muted);font-weight:700}
tr:last-child td{border-bottom:0}
.row-actions{display:flex;gap:.3rem;flex-wrap:wrap}
.toolbar{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-bottom:.7rem}
.toolbar input,.toolbar select{font:inherit;padding:.45rem .65rem;border-radius:10px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink)}
.pill-origin{font-size:.75rem;border-radius:999px;padding:.05rem .45rem;background:var(--bg);color:var(--muted);white-space:nowrap}
.toast{position:fixed;left:50%;bottom:calc(1rem + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:.6rem 1rem;border-radius:999px;font-weight:700;z-index:50;max-width:90vw}
dialog.big{width:min(44rem,calc(100% - 1.5rem))}
.channels{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:.7rem;margin-top:1.75rem}
.channel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1rem}
.channel h3{margin:0 0 .3rem;font-size:1.05rem}
.channel p{margin:.2rem 0;font-size:.95rem;color:var(--muted)}
.channel a.btn{display:inline-block;margin-top:.5rem;text-decoration:none;font-size:.95rem;padding:.55rem 1rem}
.statline{font-size:.9rem;color:var(--muted);margin-top:.5rem}
