/* vib-agent webapp — shared stylesheet (ui-v1).
   Adapted verbatim from vib-agent-ui-design-reference.html. IBM Plex is
   self-hosted (SIL OFL 1.1) under /fonts — no third-party font CDN, so no
   visitor IP leaks to Google, consistent with the privacy page. */

/* ── self-hosted IBM Plex (subset of weights the design uses) ─────────── */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/IBMPlexSans-Regular.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;
  src:url("/fonts/IBMPlexSans-Medium.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url("/fonts/IBMPlexSans-SemiBold.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/IBMPlexMono-Regular.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("/fonts/IBMPlexMono-Medium.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans Condensed";font-style:normal;font-weight:600;font-display:swap;
  src:url("/fonts/IBMPlexSansCondensed-SemiBold.woff2") format("woff2")}

:root{
  --paper:#F6F7F5; --card:#FFFFFF; --ink:#101816; --mut:#5A6662;
  --line:#D8DCD7; --brand:#1B4640; --brand-ink:#F2F5F3;
  --trace:#0B63C5; --zoneA:#2E7D46; --zoneC:#8A5A12; --zoneD:#B3372B;
  --r:6px;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{transition:none !important; animation:none !important}}
body{
  background:var(--paper); color:var(--ink);
  font:400 16px/1.55 "IBM Plex Sans",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--trace); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--trace); outline-offset:2px; border-radius:3px}
.wrap{max-width:880px; margin:0 auto; padding:0 20px}

/* ── masthead ─────────────────────────────────────────── */
header{border-bottom:1px solid var(--line); background:var(--card)}
.mast{display:flex; align-items:baseline; justify-content:space-between; padding:18px 0 10px}
.mark{font:600 20px/1 "IBM Plex Sans Condensed",sans-serif; letter-spacing:.12em}
.mark span{color:var(--mut); font:500 12px/1 "IBM Plex Mono",monospace; letter-spacing:.08em; margin-left:10px}
nav{display:flex; gap:18px; font:500 13px/1 "IBM Plex Sans",sans-serif}
nav a{color:var(--ink)}
/* signature: the spectrum strip */
.spectrum{display:block; width:100%; height:64px; margin-bottom:-1px}

/* ── hero ─────────────────────────────────────────────── */
.hero{padding:40px 0 8px}
h1{font:600 34px/1.15 "IBM Plex Sans Condensed",sans-serif; letter-spacing:.005em; max-width:22ch}
.sub{color:var(--mut); max-width:62ch; margin:14px 0 18px}
.sub b{color:var(--ink); font-weight:600}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:34px}
.chip{font:500 12px/1 "IBM Plex Mono",monospace; letter-spacing:.02em;
      border:1px solid var(--line); background:var(--card); color:var(--mut);
      padding:7px 10px; border-radius:999px}
.chip a{color:inherit}

/* ── card / form ──────────────────────────────────────── */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
      padding:26px 26px 22px; margin-bottom:26px}
.eyebrow{font:500 11px/1 "IBM Plex Mono",monospace; letter-spacing:.14em; color:var(--mut);
         text-transform:uppercase; display:block; margin-bottom:14px}
fieldset{border:0; padding:0; margin:0 0 22px}
legend{padding:0}
label{display:block; font:500 13px/1.3 "IBM Plex Sans",sans-serif; margin-bottom:6px}
.help{font:400 12px/1.4 "IBM Plex Sans",sans-serif; color:var(--mut); margin-top:5px}
input[type=text],input[type=number],select{
  width:100%; font:400 15px/1.2 "IBM Plex Sans",sans-serif; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:10px 12px;
}
input[type=file]{font:400 13px/1.3 "IBM Plex Sans",sans-serif; color:var(--mut); width:100%}
input::placeholder{color:var(--mut)}  /* AA contrast on --paper (was #9AA39F, 2.4:1) */
.grid{display:grid; grid-template-columns:1fr 1fr; gap:14px 16px}
.grid .full{grid-column:1/-1}
.drop{
  border:1.5px dashed var(--line); border-radius:var(--r); background:var(--paper);
  padding:22px 18px; text-align:center;
}
.drop label{display:block; cursor:pointer}
.drop .f{font:500 13px/1 "IBM Plex Mono",monospace; color:var(--mut); margin-top:8px; letter-spacing:.02em}
.drop .alt{margin-top:8px; font-size:12px; color:var(--mut)}
.drop input[type=file]{margin-top:12px}
.consent{display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--mut)}
.consent input{margin-top:3px; width:auto}
.cta{
  font:600 15px/1 "IBM Plex Sans",sans-serif; color:var(--brand-ink);
  background:var(--brand); border:0; border-radius:var(--r);
  padding:13px 22px; cursor:pointer;
}
.cta:hover{background:#153B36}
.cta:disabled{opacity:.55; cursor:progress}
.cta-row{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:6px}
.cta-row .note{font:400 12px/1.4 "IBM Plex Sans",sans-serif; color:var(--mut); max-width:44ch}

/* ── states ───────────────────────────────────────────── */
.state-tag{font:500 10px/1 "IBM Plex Mono",monospace; letter-spacing:.14em; color:var(--card);
           background:var(--mut); border-radius:3px; padding:4px 7px; display:inline-block; margin-bottom:12px}
.meter{height:4px; background:var(--paper); border-radius:2px; overflow:hidden; margin:14px 0 10px}
.meter i{display:block; height:100%; background:var(--trace); transition:width .4s ease}
.stepline{display:flex; gap:0; font:500 11px/1.35 "IBM Plex Mono",monospace; letter-spacing:.04em; color:var(--mut)}
.stepline b{color:var(--ink)}
.stepline .s{flex:1; padding:8px 8px 0 0; border-top:2px solid var(--line)}
.stepline .s:last-child{padding-right:0}
.stepline .on{border-top-color:var(--trace); color:var(--ink)}
/* mobile: the 5-segment stepline is too tight; a single current-phase line
   reads cleanly and the meter still carries progress. */
.phase-now{display:none; font:500 12px/1.4 "IBM Plex Mono",monospace; color:var(--ink);
           letter-spacing:.02em; margin-bottom:2px}
.kv{font:400 14px/1.6 "IBM Plex Sans",sans-serif}
.kv code{font:500 13px "IBM Plex Mono",monospace; background:var(--paper); padding:1px 6px; border-radius:4px}
.ok{color:var(--zoneA)} .warn{color:var(--zoneC)} .stop{color:var(--zoneD)}
.dl{display:inline-block; font:600 14px/1 "IBM Plex Sans",sans-serif; color:var(--brand-ink);
    background:var(--brand); border-radius:var(--r); padding:12px 18px; margin-top:12px}
.dl:hover{background:#153B36; text-decoration:none}
ul.plain{padding-left:18px; color:var(--mut); font-size:14px}
ul.plain li{margin:4px 0}

/* ── how it works ─────────────────────────────────────── */
.how{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:6px 0 30px}
.how .step{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:18px}
.how .n{font:500 12px/1 "IBM Plex Mono",monospace; color:var(--mut); letter-spacing:.1em}
.how h3{font:600 16px/1.3 "IBM Plex Sans Condensed",sans-serif; margin:8px 0 6px}
.how p{font-size:13px; color:var(--mut)}
.creed{font:500 13px/1.5 "IBM Plex Mono",monospace; color:var(--mut); letter-spacing:.01em;
       border-left:3px solid var(--brand); padding-left:12px; margin:0 0 44px}

footer{border-top:1px solid var(--line); padding:22px 0 40px; margin-top:20px;
       font:400 13px/1.6 "IBM Plex Sans",sans-serif; color:var(--mut)}
footer .row{display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:space-between}

/* ── document view (privacy prose, /validation record) ── */
.prose{padding:34px 0 10px}
.prose h1{margin-bottom:6px}
.prose h2{font:600 17px/1.3 "IBM Plex Sans Condensed",sans-serif; margin:26px 0 6px}
.prose p{max-width:66ch; margin:8px 0; color:var(--ink)}
.prose p.lead{color:var(--mut)}
.doc-note{font:400 13px/1.5 "IBM Plex Sans",sans-serif; color:var(--mut); margin:0 0 16px}
pre.doc{
  font:400 13px/1.6 "IBM Plex Mono",monospace; color:var(--ink);
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:20px 22px; margin:8px 0 20px; overflow-x:auto; white-space:pre; -webkit-overflow-scrolling:touch;
}

@media (max-width:640px){
  h1{font-size:27px}
  .grid{grid-template-columns:1fr}
  .how{grid-template-columns:1fr}
  .mast{flex-direction:column; gap:10px; align-items:flex-start}
  .cta-row{flex-direction:column; align-items:stretch}
  .cta{width:100%}
  pre.doc{font-size:12px; padding:14px 14px}
  .stepline{display:none}
  .phase-now{display:block}
}