/* ── StateProof design system · Phase 1 mockups ───────────────────────────────
   Extends the tokens already in the production workspace rather than inventing
   a second language, so implementation is a re-skin, not a rewrite.

   Colour discipline: the brand is navy + one blue accent. Green/amber/red are
   RESERVED for access status and never used decoratively — if an operator sees
   green anywhere it means "we can search this here". That is the whole point of
   the access-mode system, and it breaks the moment green becomes a button.
─────────────────────────────────────────────────────────────────────────────── */
:root{
  --ink:#131c2b; --ink2:#28344a; --muted:#66717f; --faint:#8a94a4;
  --line:#dfe4ec; --line2:#eceff4; --soft:#f6f8fb; --paper:#fff; --shell:#eef1f6;
  --navy:#111a2a; --navy2:#1a2437; --blue:#2456a6; --blue2:#183c78; --blue-soft:#eef3fb;
  /* access modes — one meaning each, everywhere in the product */
  --live:#2f9e6e; --live-bg:#e6f4ec; --live-ink:#1f6b4a;
  --public:#5b87bb; --public-bg:#eaf1f9; --public-ink:#2c5b90;
  --acct:#d8952f; --acct-bg:#fdf3e2; --acct-ink:#8f5f18;
  --paid:#c65f56; --paid-bg:#fbeceb; --paid-ink:#9c3f37;
  --off:#aab3c0; --off-bg:#f1f3f7; --off-ink:#697485;
  --r:9px; --shadow:0 5px 20px #26364e0d;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--shell);color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0;letter-spacing:-.025em}

/* ── shell ─────────────────────────────────────────────────────────────── */
.hdr{background:var(--navy);color:#fff;border-bottom:3px solid #2f5697}
.hdr-in{max-width:1440px;margin:0 auto;padding:0 26px;height:64px;display:flex;align-items:center;gap:26px}
.brand{display:flex;align-items:center;gap:9px;font-size:16.5px;font-weight:750;letter-spacing:-.03em;white-space:nowrap}
.brand .mk{display:grid;place-items:center;width:27px;height:27px;border-radius:7px;
  background:linear-gradient(160deg,#3a6cb5,#22406f);color:#dce8fa;font-size:12.5px;font-weight:800}
.nav{display:flex;gap:2px;margin-left:8px}
.nav a{padding:7px 13px;border-radius:7px;color:#a8b5c9;font-size:12.5px;font-weight:650}
.nav a:hover{color:#e8eef7;background:#1b2740;text-decoration:none}
.nav a.on{background:#2f5697;color:#fff}
.hdr-r{margin-left:auto;display:flex;align-items:center;gap:10px}
.cov-pill{display:flex;align-items:center;gap:7px;padding:6px 11px;border:1px solid #33405a;border-radius:999px;
  color:#c3cede;font-size:11px;white-space:nowrap}
.cov-pill i{width:7px;height:7px;border-radius:50%;background:var(--live)}
.gov-note{background:#0c1421;color:#8895a9;font-size:10.5px;text-align:center;padding:5px 20px;line-height:1.5}
.gov-note b{color:#b9c5d6;font-weight:650}
.wrap{max-width:1440px;margin:0 auto;padding:20px 26px 40px}
.foot{max-width:1440px;margin:0 auto;padding:22px 26px 40px;color:var(--faint);font-size:11px;line-height:1.65}
.foot b{color:var(--muted)}

/* ── primitives ────────────────────────────────────────────────────────── */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.card-h{padding:16px 18px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fff,#fafbfd)}
.card-b{padding:16px 18px}
.eyebrow{display:block;margin-bottom:5px;color:var(--blue);font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.sub{color:var(--muted);font-size:11.5px;line-height:1.55;margin:5px 0 0}
label,.lbl{display:block;color:#57626f;font-size:9.5px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;margin-bottom:5px}
input,select{width:100%;height:38px;padding:0 10px;border:1px solid #cfd6e0;border-radius:6px;background:#fff;
  color:var(--ink);font:12.5px inherit;outline:none}
input:focus,select:focus{border-color:var(--blue);box-shadow:0 0 0 3px #2456a614}
input::placeholder{color:#a7b0bd}
.btn{height:38px;padding:0 16px;border:1px solid #cbd2dc;border-radius:6px;background:#fff;color:#5b6675;
  font:700 12px inherit;cursor:pointer;display:inline-flex;align-items:center;gap:6px;justify-content:center}
.btn.pri{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.pri:hover{background:var(--blue2)}
.btn.ghost{background:var(--blue-soft);border-color:#b9c6dd;color:#255ba5}
.seg{display:inline-flex;gap:3px;background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:3px}
.seg button{border:0;border-radius:999px;padding:6px 15px;background:transparent;color:#5d6879;font:750 11.5px inherit;cursor:pointer}
.seg button.on{background:var(--blue);color:#fff}

/* access-mode badges — the product's core vocabulary */
.am{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
  font-size:8.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.am i{width:7px;height:7px;border-radius:50%}
.am.live{background:var(--live-bg);color:var(--live-ink)}      .am.live i{background:var(--live)}
.am.public{background:var(--public-bg);color:var(--public-ink)} .am.public i{background:var(--public)}
.am.acct{background:var(--acct-bg);color:var(--acct-ink)}       .am.acct i{background:var(--acct)}
.am.paid{background:var(--paid-bg);color:var(--paid-ink)}       .am.paid i{background:var(--paid)}
.am.off{background:var(--off-bg);color:var(--off-ink)}          .am.off i{background:var(--off)}
.st{padding:2px 7px;border-radius:999px;font-size:8.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.st.active{background:var(--live-bg);color:var(--live-ink)}
.st.inactive{background:var(--paid-bg);color:var(--paid-ink)}
.tag{padding:2px 7px;border-radius:999px;font-size:8.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.tag.liveq{background:var(--live-bg);color:var(--live-ink)}
.tag.fallback{background:var(--acct-bg);color:var(--acct-ink)}
.ex{display:inline-block;padding:1px 6px;border:1px dashed #c9d2e0;border-radius:4px;
  color:#8a94a4;font-size:8.5px;font-weight:750;letter-spacing:.05em;text-transform:uppercase}

/* ── tables ────────────────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse}
th{text-align:left;padding:9px 12px;background:var(--soft);border-bottom:1px solid var(--line);
  color:#5d6879;font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
td{padding:10px 12px;border-bottom:1px solid var(--line2);font-size:12px;color:var(--ink2);vertical-align:middle}
tr:hover td{background:#fbfcfe}
.st-name{display:flex;align-items:center;gap:9px;font-weight:650;color:var(--ink)}
.st-ab{display:grid;place-items:center;width:24px;height:24px;border-radius:6px;background:var(--blue-soft);
  color:#2c5b90;font-size:9.5px;font-weight:800}

/* ── generic layout helpers ────────────────────────────────────────────── */
.row{display:flex;align-items:center;gap:10px}.wrapf{flex-wrap:wrap}.gap6{gap:6px}.mt10{margin-top:10px}.mt16{margin-top:16px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kv{display:grid;grid-template-columns:112px 1fr;gap:5px 10px;font-size:11.5px}
.kv .k{color:var(--faint);font-size:8.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding-top:2px}
.kv .v{color:var(--ink2);word-break:break-word}
.note{color:var(--muted);font-size:11px;line-height:1.6}
.hint{color:var(--faint);font-size:10px;line-height:1.5}
/* Workspace-specific layout, shared by the empty, populated and mobile mockups. */
.ws-h{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;margin:20px 0 13px}
.ws-h h1{font-size:22px}
.ws-hr{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.ws-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
.step{display:flex;flex-direction:column}
.step .card-h h3{font-size:15px}
.step .card-h p.sub{min-height:32px}
.sform{padding:14px 16px;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(96px,.8fr);gap:10px;
  border-bottom:1px solid var(--line)}
.sactions{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;gap:8px}
/* Compact, informative empty panel — replaces the tall blank block. */
.stub{display:flex;align-items:flex-start;gap:10px;padding:13px 16px;background:var(--soft);font-size:11.5px;
  color:var(--ink2);line-height:1.55}
.stub b{color:var(--ink)}
.stub .hint{display:block;margin-top:3px}
.stub-ic{display:grid;place-items:center;width:26px;height:26px;flex-shrink:0;border-radius:50%;background:#fff;
  border:1px solid var(--line);color:#7c8798;font-size:13px}
.stub-x{padding:10px 16px;border-top:1px dashed var(--line);background:#fff;color:#6f7b8e;font-size:10px;line-height:1.55}
.stub-x b{color:#2f5a96}
.ext{padding:14px 16px;background:var(--soft);flex:1;display:flex;flex-direction:column;gap:11px}
.ext-why{background:#fff;border:1px solid var(--line);border-radius:7px;padding:11px 12px}
.ext-why p{margin:7px 0 0;color:var(--muted);font-size:10.5px;line-height:1.6}
.ext-why b{color:var(--ink2)}
.ws-maps{margin-top:12px}
.mh{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap}
.mh h3{font-size:15px}
.arow{display:grid;grid-template-columns:104px minmax(0,1fr) 158px 40px;gap:9px;align-items:end;margin-bottom:9px}
.ak{height:38px;display:flex;align-items:center;padding:0 11px;border:1px solid #cfd6e0;border-radius:6px;
  background:var(--blue-soft);color:#255ba5;font-size:11px;font-weight:750}
.ak.biz{background:#e6edfa;color:#2456a6}
.xrm{width:40px;padding:0;border-color:#dcc4c4;color:#b6423c}
.abtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
/* the slim replacement for two blank panes + a grey map box */
.prompt{margin-top:13px;display:flex;align-items:flex-start;gap:10px;padding:13px 14px;border:1px dashed #cbd5e3;
  border-radius:8px;background:#fff;font-size:11.5px;color:var(--ink2);line-height:1.55}
.prompt b{color:var(--ink)}
.prompt .hint{display:block;margin-top:3px}

/* ── populated ─────────────────────────────────────────────────────────── */
.mlay{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:12px;margin-top:13px}
.mcol{min-width:0;display:flex;flex-direction:column;gap:9px}
.aitem{background:#fff;border:1px solid var(--line);border-left:4px solid #ccc;border-radius:8px;padding:10px 12px}
.aitem .at{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:750;color:var(--ink)}
.aitem .sw{width:11px;height:11px;border-radius:50%;flex-shrink:0}
.aitem .asrc{margin-left:auto;color:var(--faint);font-size:8.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.aitem .anorm{margin-top:5px;color:var(--ink2);font-size:11px;line-height:1.45}
.aitem .ameta{margin-top:7px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cls{padding:2px 8px;border-radius:999px;font-size:8.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.cls.exact{background:var(--live-bg);color:var(--live-ink)}
.cls.near{background:var(--acct-bg);color:var(--acct-ink)}
.cls.diff{background:var(--paid-bg);color:var(--paid-ink)}
.cls.bizc{background:#e6edfa;color:#2456a6}
.dist{color:var(--muted);font-size:9.5px}
.rt{padding:2px 8px;border-radius:999px;background:var(--blue-soft);color:#255ba5;font-size:8.5px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase}
.svt{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#e9edf3;min-width:0}
.svh{display:flex;align-items:center;gap:7px;padding:7px 10px;background:#fff;border-bottom:1px solid var(--line)}
.svk{font-size:8.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#57626f;flex-shrink:0}
.sva{color:var(--ink2);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svp{height:150px;display:grid;place-items:center;color:#7d8798;font-size:10.5px;
  background:linear-gradient(135deg,#dfe6ee,#eef2f7)}
.rmap{height:190px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;
  background:linear-gradient(135deg,#e6ecf3,#f2f5f9);color:#7d8798;font-size:10.5px}
.bizc-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px 13px}
.bizc-card h4{font-size:13px}
.bizc-card .cat{color:var(--faint);font-size:10px}
.bizc-card .rate{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:var(--ink2)}
.stars{color:#e0a33d;letter-spacing:1px;font-size:12px}
.revs{margin-top:10px;border-top:1px dashed var(--line2);padding-top:8px;display:flex;flex-direction:column;gap:8px}
.rev{font-size:10.5px;line-height:1.45}
.rev .rvt{display:flex;align-items:center;gap:6px;color:var(--ink);font-weight:650}
.rev .rvw{margin-left:auto;color:var(--faint);font-size:9px;font-weight:450}
.rev .rvx{margin-top:3px;color:var(--muted)}
.attr{margin-top:9px;color:#a2abb9;font-size:8.5px}

@media(max-width:1080px){
  .ws-grid{grid-template-columns:1fr}
  .mlay{grid-template-columns:1fr}
  .arow{grid-template-columns:1fr 1fr}
  .arow>div:nth-child(2){grid-column:1/-1}
  .step .card-h p.sub{min-height:0}
}

/* ── mobile shell: the header must wrap, and the nav must stay reachable ──
   At 390px a fixed-height 64px bar with four nav items overflows and clips the
   last item, which silently hides a whole product area. */
@media(max-width:860px){
  .hdr-in{height:auto;min-height:56px;padding:10px 14px;flex-wrap:wrap;gap:10px}
  .brand{font-size:15px}
  .nav{margin-left:0;order:3;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .nav a{white-space:nowrap;padding:7px 11px;font-size:12px}
  .hdr-r{margin-left:auto}
  .cov-pill{font-size:10px;padding:5px 9px}
  .wrap{padding:14px 14px 30px}
  .gov-note{font-size:10px;text-align:left;padding:7px 14px}
  .grid3,.grid2{grid-template-columns:1fr}
  .kv{grid-template-columns:96px 1fr}
}