/* GeoClear Health — MedStar demo. Brand Standard v1.0 §4.1/§4.2/§6: cool white/slate clinical
   surface (NOT dark/cyber), deep-ocean navy headings, AA deep-teal accents. Status semantics:
   green=verified, amber=human review, blue=system hold, slate=isolation-by-design, red=safety/tamper. */
:root {
  --gh-surface:#FFFFFF; --gh-surface-2:#F4F7F8; --gh-line:#D8DEE0;
  --gh-heading:#0B1F3B; --gh-text:#1A2B3C; --gh-muted-text:#53616A;
  --gh-teal-bright:#00C2B8; --gh-teal-deep:#0C6B6B;
  --gh-verified:#1F7A5C; --gh-verified-bg:#EAF7F1;
  --gh-review:#B7791F; --gh-review-bg:#FFF3D6;
  --gh-system-hold:#0B57D0; --gh-system-hold-bg:#EAF2FE;
  --gh-isolation:#475569; --gh-isolation-bg:#F1F5F9;
  --gh-safety:#9B2C2C; --gh-safety-bg:#FCEEEE;
  --gh-neutral:#64748B; --gh-neutral-bg:#F8FAFC;
  /* aliases */
  --bg:var(--gh-surface); --panel:var(--gh-surface); --panel2:var(--gh-surface-2); --ink:var(--gh-text);
  --muted:var(--gh-muted-text); --line:var(--gh-line); --green:var(--gh-verified); --amber:var(--gh-review);
  --red:var(--gh-safety); --blue:var(--gh-system-hold); --accent:var(--gh-teal-deep);
  --radius:14px; --shadow:0 1px 2px rgba(11,31,59,.04),0 6px 20px rgba(11,31,59,.06);
  font-synthesis: none; -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: linear-gradient(180deg,#f6fbfc 0%,var(--gh-surface) 320px);
  color: var(--gh-text); font: 15px/1.55 Inter,-apple-system,BlinkMacSystemFont,"system-ui","Segoe UI",Roboto,sans-serif;
  min-height: 100vh; padding-bottom: env(safe-area-inset-bottom); -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--gh-teal-deep); outline-offset: 2px; border-radius: 6px; }
#synthetic-banner {
  position: sticky; top: 0; z-index: 40; text-align: center; font-weight: 700; font-size: 12.5px;
  letter-spacing: .02em; padding: 7px 14px; color: #5a3b00; border-bottom: 1px solid var(--gh-line);
  background: repeating-linear-gradient(45deg,#FFF3D6,#FFF3D6 16px,#FBE8BC 16px,#FBE8BC 32px);
}
header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 16px 20px 0; max-width: 1080px; margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 12px; }
.logo { font-size: 28px; color: var(--gh-teal-bright); }
.title { font-weight: 800; font-size: 20px; letter-spacing: -.01em; color: var(--gh-heading); }
.subtitle { color: var(--gh-muted-text); font-size: 12.5px; }
nav { display: flex; gap: 6px; flex-wrap: wrap; }
nav button {
  background: var(--gh-surface); color: var(--gh-text); border: 1px solid var(--gh-line); border-radius: 999px;
  padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; transition: .15s;
}
nav button:hover { color: var(--gh-heading); border-color: var(--gh-teal-deep); }
nav button.active { background: var(--gh-teal-deep); color: #fff; border-color: var(--gh-teal-deep); }
main { max-width: 1080px; margin: 18px auto; padding: 0 20px 60px; }
.loading { color: var(--gh-muted-text); padding: 40px; text-align: center; }
h2.section { font-size: 18px; margin: 4px 0 2px; color: var(--gh-heading); letter-spacing:-.01em; }
p.lede { color: var(--gh-muted-text); margin: 0 0 16px; max-width: 70ch; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.card {
  background: var(--gh-surface); border: 1px solid var(--gh-line);
  border-radius: var(--radius); padding: 17px 16px 18px; box-shadow: var(--shadow); position:relative; overflow:hidden;
}
.card::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,var(--gh-teal-bright),rgba(0,194,184,0))}
.card h3 { margin: 0 0 8px; font-size: 15px; display: flex; align-items: center; gap: 8px; color: var(--gh-heading); }
.row { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 13.5px; border-bottom:1px solid var(--gh-line); }
.row:last-child{border-bottom:none}
.row .k { color: var(--gh-muted-text); } .row .v { font-weight: 600; text-align: right; word-break: break-word; color:var(--gh-text); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; border:1px solid transparent; }
.pill.green { background: var(--gh-verified-bg); color: var(--gh-verified); border-color:rgba(31,122,92,.25); }
.pill.amber { background: var(--gh-review-bg); color: #8a5a10; border-color:rgba(183,121,31,.3); }
.pill.red { background: var(--gh-safety-bg); color: var(--gh-safety); border-color:rgba(155,44,44,.28); }
.pill.blue { background: var(--gh-system-hold-bg); color: var(--gh-system-hold); border-color:rgba(11,87,208,.22); }
.pill.slate { background: var(--gh-isolation-bg); color: var(--gh-isolation); border-color:rgba(71,85,105,.28); }
.pill.neutral { background: var(--gh-neutral-bg); color: var(--gh-neutral); border-color:rgba(100,116,139,.25); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
button.json {
  margin-top: 10px; background: transparent; color: var(--gh-teal-deep); border: 1px solid var(--gh-line);
  border-radius: 10px; padding: 7px 11px; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
button.json:hover { border-color: var(--gh-teal-deep); }
button.primary {
  background: var(--gh-teal-deep); color: #fff; border: none; border-radius: 11px; padding: 11px 18px;
  font-size: 14px; font-weight: 700; cursor: pointer;
}
button.primary:hover{ background:#0a5a5a; }
button.ghost { background: #fff; color: var(--gh-heading); border: 1px solid var(--gh-line); border-radius: 11px; padding: 11px 16px; font-weight: 700; cursor: pointer; }
button.ghost:hover{ border-color:var(--gh-teal-deep); color:var(--gh-teal-deep); }
.mode-flow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 14px; }
.mode { padding: 9px 13px; border-radius: 11px; border: 1px solid var(--gh-line); font-weight: 700; font-size: 13px; }
.mode.a { background: var(--gh-verified-bg); color: var(--gh-verified); }
.mode.r { background: var(--gh-review-bg); color: #8a5a10; }
.mode.active { outline: 2px solid currentColor; }
.arrow { color: var(--gh-muted-text); font-size: 18px; }
.verify-stage { text-align: center; padding: 22px; }
.verdict { font-size: 26px; font-weight: 800; margin: 12px 0; }
.verdict.ok { color: var(--gh-verified); } .verdict.bad { color: var(--gh-safety); }
.chain { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.link { display: flex; align-items: center; gap: 10px; background: var(--gh-surface-2); border: 1px solid var(--gh-line); border-radius: 11px; padding: 10px 12px; font-size: 13px; }
.link .hash { font-family: ui-monospace, "SF Mono", Menlo, monospace; color: var(--gh-muted-text); font-size: 11.5px; word-break: break-all; }
.safety-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 7px; }
.safety-list li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; }
.check { color: var(--gh-verified); font-weight: 800; }
.asof { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0 14px; }
.asof input[type=range] { accent-color: var(--gh-teal-deep); }
.note { color: var(--gh-muted-text); font-size: 12px; margin-top: 6px; }
.shield { border-left:3px solid var(--gh-teal-deep); background:rgba(12,107,107,.05); padding:9px 12px; border-radius:0 8px 8px 0; color:var(--gh-text); font-size:13px; margin-top:8px; }
.drawer {
  position: fixed; right: 0; top: 0; height: 100vh; width: min(560px, 94vw); z-index: 60;
  background: #0d1426; border-left: 1px solid var(--gh-line); box-shadow: -10px 0 40px rgba(11,31,59,.25);
  display: flex; flex-direction: column;
}
.drawer[hidden] { display: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #28324f; font-weight: 700; color:#e9eefb; }
.drawer-head button { background: none; border: none; color: #93a0c0; font-size: 18px; cursor: pointer; }
#json-body { margin: 0; padding: 16px; overflow: auto; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; color: #cfe0ff; }
#drawer-scrim { position: fixed; inset: 0; background: rgba(11,31,59,.4); z-index: 55; }
footer { max-width: 1080px; margin: 0 auto; padding: 14px 20px 30px; color: var(--gh-muted-text); font-size: 12px; }
@media (max-width: 560px) { header { gap: 10px; } .title { font-size: 18px; } main { margin-top: 12px; } }
@media (prefers-reduced-motion: reduce){ *{animation:none !important;transition:none !important} }