/* ─────────────────────────────────────────────────────────────────────────
   mend.rest portal — shared surface.

   THE HONESTY LAYER, adapted from assets/surfaces-ledger/ledger.html.
   That file is the design seed and is never edited; this is its portal-sized
   descendant. The colour law travels with it, unchanged:

     --estate teal  = verified / receipt-backed / observed-good
     --mind  amber  = attention / unverified / UNKNOWN / ABSENT
                      (absence is never red — an absent receipt is unobserved,
                       not didn't-happen)
     --flag  red    = refuted / failed / tampered / BLOCKED  ONLY.
                      Never decorative, and never used for "we could not look".

   One extra rule this surface needs and the ledger did not: it talks to a
   network. An error of OBSERVATION (transport failure, refused credential,
   timeout) is amber — it means we could not learn. Only a VERDICT of
   refutation is red.
   ───────────────────────────────────────────────────────────────────────── */
:root{
  --bg:#0A0E0D; --panel:#0F1514; --panel-2:#131B19; --panel-3:#182220;
  --line:#1F2C29; --line-soft:#17211F;
  --ink:#E7EFEC; --ink-dim:#93A6A0; --ink-faint:#647672;
  --estate:#1D9E75; --estate-wash:rgba(29,158,117,.13); --estate-edge:rgba(29,158,117,.42);
  --mind:#E0A33E;   --mind-wash:rgba(224,163,62,.13);   --mind-edge:rgba(224,163,62,.42);
  --flag:#E0473C;   --flag-wash:rgba(224,71,60,.13);    --flag-edge:rgba(224,71,60,.45);
  --shadow:0 1px 0 rgba(255,255,255,.02), 0 10px 30px rgba(0,0,0,.35);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#F6F8F7; --panel:#FFFFFF; --panel-2:#F1F5F3; --panel-3:#E9EFEC;
    --line:#DBE4E0; --line-soft:#E7EDEA;
    --ink:#0E1E1A; --ink-dim:#51625C; --ink-faint:#7A8C86;
    --estate:#12785A; --estate-wash:rgba(18,120,90,.10); --estate-edge:rgba(18,120,90,.34);
    --mind:#9A6206;   --mind-wash:rgba(154,98,6,.10);    --mind-edge:rgba(154,98,6,.34);
    --flag:#B92E24;   --flag-wash:rgba(185,46,36,.10);   --flag-edge:rgba(185,46,36,.34);
    --shadow:0 1px 0 rgba(0,0,0,.02), 0 10px 26px rgba(16,40,34,.08);
  }
}
:root[data-theme="light"]{
  --bg:#F6F8F7; --panel:#FFFFFF; --panel-2:#F1F5F3; --panel-3:#E9EFEC;
  --line:#DBE4E0; --line-soft:#E7EDEA;
  --ink:#0E1E1A; --ink-dim:#51625C; --ink-faint:#7A8C86;
  --estate:#12785A; --estate-wash:rgba(18,120,90,.10); --estate-edge:rgba(18,120,90,.34);
  --mind:#9A6206;   --mind-wash:rgba(154,98,6,.10);    --mind-edge:rgba(154,98,6,.34);
  --flag:#B92E24;   --flag-wash:rgba(185,46,36,.10);   --flag-edge:rgba(185,46,36,.34);
  --shadow:0 1px 0 rgba(0,0,0,.02), 0 10px 26px rgba(16,40,34,.08);
}
:root[data-theme="dark"]{
  --bg:#0A0E0D; --panel:#0F1514; --panel-2:#131B19; --panel-3:#182220;
  --line:#1F2C29; --line-soft:#17211F;
  --ink:#E7EFEC; --ink-dim:#93A6A0; --ink-faint:#647672;
  --estate:#1D9E75; --estate-wash:rgba(29,158,117,.13); --estate-edge:rgba(29,158,117,.42);
  --mind:#E0A33E;   --mind-wash:rgba(224,163,62,.13);   --mind-edge:rgba(224,163,62,.42);
  --flag:#E0473C;   --flag-wash:rgba(224,71,60,.13);    --flag-edge:rgba(224,71,60,.45);
  --shadow:0 1px 0 rgba(255,255,255,.02), 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; padding-bottom:48px;
}
.mono{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace}
h1,h2,h3{margin:0; font-weight:600; letter-spacing:-.01em}
p{margin:0 0 12px}
a{color:var(--estate)}
a:hover{text-decoration:underline}
::selection{background:var(--estate-wash)}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer}
.wrap{max-width:1180px; margin:0 auto; padding:0 22px}
.prose{max-width:76ch}
.dim{color:var(--ink-dim)}
.faint{color:var(--ink-faint)}
.hidden{display:none !important}
/* spacing utilities — the CSP forbids inline style attributes, so every
   one-off margin lives here as a class instead */
.mt-0{margin-top:0}
.mt-s{margin-top:14px}
.mt-m{margin-top:16px}
.mt-l{margin-top:30px}
.ph-split{border-top:1px solid var(--line)}

/* ── header ───────────────────────────────────────────────────────────── */
header.top{border-bottom:1px solid var(--line); background:var(--panel)}
.topin{display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:16px 0 14px}
.mark{display:flex; align-items:baseline; gap:10px}
.mark .dot{width:9px;height:9px;border-radius:50%;background:var(--mind); display:inline-block; transform:translateY(-1px)}
.mark h1{font-size:17px}
.mark .sub{color:var(--ink-faint); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase}
.grow{flex:1 1 auto}
.ctl{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
nav.site{display:flex; gap:2px; flex-wrap:wrap}
nav.site a{
  color:var(--ink-dim); text-decoration:none; padding:12px 14px 10px;
  font-size:13px; letter-spacing:.09em; text-transform:uppercase; font-weight:600;
  border-bottom:2px solid transparent;
}
nav.site a:hover{color:var(--ink); text-decoration:none}
nav.site a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--estate)}

/* the standing status line — every page carries it, verbatim */
.statusline{
  border-bottom:1px solid var(--line); background:var(--mind-wash);
  color:var(--mind); font-size:12.5px; line-height:1.5;
}
.statusline .wrap{padding-top:9px; padding-bottom:9px}
.statusline b{font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:11px}

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn{
  background:var(--panel-2); border:1px solid var(--line); color:var(--ink);
  border-radius:8px; padding:7px 12px; font-size:13px; line-height:1.2;
}
.btn:hover{border-color:var(--estate-edge)}
.btn:disabled{opacity:.5; cursor:not-allowed; border-color:var(--line)}
.btn.primary{border-color:var(--estate-edge); background:var(--estate-wash); color:var(--estate); font-weight:600}
.btn.danger{border-color:var(--flag-edge); background:var(--flag-wash); color:var(--flag)}
.btn.small{padding:5px 9px; font-size:12px}

/* ── sections ─────────────────────────────────────────────────────────── */
main{padding-top:26px}
section.block{margin:0 0 34px}
.viewhead{margin-bottom:14px}
.viewhead h2{font-size:20px; margin-bottom:5px}
.viewhead .sub{color:var(--ink-dim); font-size:13.5px; max-width:80ch; margin:0}
.sect{font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 8px}

/* ── stat tiles (every number carries a label) ────────────────────────── */
.stats{display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 6px}
.stat{border:1px solid var(--line); background:var(--panel); border-radius:10px; padding:9px 13px; min-width:108px}
.stat .k{display:block; font-size:10.5px; letter-spacing:.075em; text-transform:uppercase; color:var(--ink-faint)}
.stat .v{display:block; font-size:19px; font-weight:600; margin-top:3px; font-variant-numeric:tabular-nums; word-break:break-all}
.stat.amber{border-color:var(--mind-edge); background:var(--mind-wash)} .stat.amber .v{color:var(--mind)}
.stat.teal{border-color:var(--estate-edge); background:var(--estate-wash)} .stat.teal .v{color:var(--estate)}
.stat.red{border-color:var(--flag-edge); background:var(--flag-wash)} .stat.red .v{color:var(--flag)}

/* ── chips ────────────────────────────────────────────────────────────── */
.chip{
  display:inline-flex; align-items:center; gap:5px; border:1px solid var(--line);
  border-radius:999px; padding:2px 9px; font-size:11px; line-height:1.6; white-space:nowrap;
  background:var(--panel); color:var(--ink-dim);
}
.chip.teal{border-color:var(--estate-edge); background:var(--estate-wash); color:var(--estate)}
.chip.amber{border-color:var(--mind-edge); background:var(--mind-wash); color:var(--mind)}
.chip.red{border-color:var(--flag-edge); background:var(--flag-wash); color:var(--flag); font-weight:600}
.chip.heavy{font-weight:700; letter-spacing:.05em; text-transform:uppercase; border-width:2px}
.chip.square{border-radius:5px}

/* ── panels ───────────────────────────────────────────────────────────── */
.panelbox{border:1px solid var(--line); border-radius:12px; background:var(--panel); overflow:hidden; margin-top:14px}
.panelbox .ph{padding:12px 15px; border-bottom:1px solid var(--line); background:var(--panel-2); display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.panelbox .ph h3{font-size:13.5px}
.panelbox .ph .cnt{font-size:11px; color:var(--ink-faint); letter-spacing:.05em; text-transform:uppercase}
.panelbox .pb{padding:14px 15px}
.caption{padding:12px 15px; font-size:12px; line-height:1.5; color:var(--ink-dim); border-top:1px solid var(--line); background:var(--panel-2)}
.caption b{color:var(--mind)}
.emptystate{padding:22px 16px; font-size:13px; color:var(--ink-dim); line-height:1.55}
.emptystate .eh{font-weight:600; color:var(--ink); display:block; margin-bottom:4px}
.emptystate.amber{border-left:3px solid var(--mind)}

/* ── key/value rows ───────────────────────────────────────────────────── */
.kv{display:flex; gap:10px; align-items:baseline; padding:4px 0; font-size:12.5px; border-bottom:1px solid var(--line-soft)}
.kv:last-child{border-bottom:0}
.kv .k{flex:0 0 168px; color:var(--ink-faint); font-size:11px; letter-spacing:.05em; text-transform:uppercase}
.kv .v{flex:1 1 auto; word-break:break-all; font-variant-numeric:tabular-nums; min-width:0}
.kv .v.teal{color:var(--estate)} .kv .v.amber{color:var(--mind)} .kv .v.red{color:var(--flag); font-weight:600}
@media (max-width:620px){ .kv{flex-direction:column; gap:2px} .kv .k{flex:none} }

/* ── verdict ──────────────────────────────────────────────────────────── */
.verdict{border-radius:10px; padding:12px 14px; font-size:13px; line-height:1.5; border:1px solid var(--line); background:var(--panel-2)}
.verdict.teal{border-color:var(--estate-edge); background:var(--estate-wash)}
.verdict.amber{border-color:var(--mind-edge); background:var(--mind-wash)}
.verdict.red{border-color:var(--flag-edge); background:var(--flag-wash)}
.verdict .vh{font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:11px; margin-bottom:5px}
.verdict.teal .vh{color:var(--estate)} .verdict.amber .vh{color:var(--mind)} .verdict.red .vh{color:var(--flag)}
.verdict .vw{color:var(--ink-dim); font-size:12px; margin-top:6px}

/* ── the river ────────────────────────────────────────────────────────── */
.river{
  display:flex; align-items:stretch; overflow-x:auto; overflow-y:hidden;
  border:1px solid var(--line); border-radius:12px; background:var(--panel);
  padding:24px 18px 32px; margin-top:14px; scrollbar-width:thin; box-shadow:var(--shadow);
}
.river::-webkit-scrollbar{height:9px}
.river::-webkit-scrollbar-thumb{background:var(--line); border-radius:9px}
.rcard{
  flex:0 0 246px; border:1px solid var(--line); border-radius:11px; background:var(--panel-2);
  padding:12px 13px 11px; text-align:left; color:inherit; position:relative;
  display:flex; flex-direction:column; gap:8px; font:inherit;
}
.rcard:hover{border-color:var(--estate-edge)}
.rcard[aria-pressed="true"]{border-color:var(--estate); box-shadow:0 0 0 1px var(--estate-edge)}
.rcard .seq{font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint)}
.rcard .seq b{color:var(--ink-dim); font-weight:600}
.rcard .kind{font-size:14.5px; font-weight:600; letter-spacing:-.01em; word-break:break-word}
.rcard .row{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.rcard .ts{font-size:11px; color:var(--ink-faint); margin-top:auto; font-variant-numeric:tabular-nums}
.link{flex:0 0 52px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; position:relative}
.link .ln{position:absolute; left:0; right:0; top:50%; height:1px; background:var(--line)}
.link .pip{position:relative; width:9px; height:9px; border-radius:50%; background:var(--panel); border:1.5px solid var(--line)}
.link .lb{position:relative; font-size:9px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint); background:var(--panel); padding:1px 3px; text-align:center; line-height:1.25}
.link.ok .pip{border-color:var(--estate); background:var(--estate)}
.link.ok .lb{color:var(--estate)}
.link.unknown .pip{border-color:var(--mind); background:var(--mind-wash)}
.link.unknown .lb{color:var(--mind)}
.gap-block{
  flex:0 0 176px; border:1.5px dashed var(--mind-edge); border-radius:11px; margin:0 8px;
  background:repeating-linear-gradient(135deg,var(--mind-wash),var(--mind-wash) 7px,transparent 7px,transparent 14px);
  padding:12px; display:flex; flex-direction:column; gap:6px; justify-content:center;
}
.gap-block .gt{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--mind); font-weight:700}
.gap-block .gs{font-size:12.5px; font-weight:600}
.gap-block .gm{font-size:11px; color:var(--ink-dim); line-height:1.35}

/* ── detail ───────────────────────────────────────────────────────────── */
.detail{margin-top:16px; border:1px solid var(--line); border-radius:12px; background:var(--panel); overflow:hidden}
.detail .dhead{display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:13px 16px; border-bottom:1px solid var(--line); background:var(--panel-2)}
.detail .dhead h3{font-size:15px}
.detail .dbody{padding:15px 16px}
.detail .empty{padding:26px 18px; color:var(--ink-dim); font-size:13.5px}
pre.json{
  margin:0; padding:12px; background:var(--bg); border:1px solid var(--line); border-radius:9px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:11.5px; line-height:1.5;
  overflow:auto; max-height:420px; color:var(--ink-dim); white-space:pre;
}

/* ── the credential desk ──────────────────────────────────────────────── */
.desk{border:1px solid var(--mind-edge); border-radius:12px; background:var(--panel); overflow:hidden; margin-top:14px}
.desk .warn{padding:12px 15px; background:var(--mind-wash); color:var(--mind); font-size:12.5px; line-height:1.55; border-bottom:1px solid var(--mind-edge)}
.desk .warn b{font-weight:700}
.desk .fields{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; padding:15px}
.field{display:flex; flex-direction:column; gap:5px; min-width:0}
.field label{font-size:10.5px; letter-spacing:.075em; text-transform:uppercase; color:var(--ink-faint)}
.field .hint{font-size:11.5px; color:var(--ink-dim); line-height:1.45}
.field input{
  background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:8px 10px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12.5px; width:100%; min-width:0;
}
.field input:focus{outline:none; border-color:var(--estate-edge)}
.deskctl{display:flex; gap:9px; align-items:center; flex-wrap:wrap; padding:0 15px 15px}
.deskctl .keep{display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--ink-dim)}
.deskctl input[type=checkbox]{width:15px; height:15px; accent-color:var(--mind)}

/* ── log ──────────────────────────────────────────────────────────────── */
.log{margin-top:14px; border:1px solid var(--line); border-radius:10px; background:var(--panel); overflow:hidden}
.log .lr{display:flex; gap:10px; align-items:baseline; padding:7px 14px; border-bottom:1px solid var(--line-soft); font-size:12px}
.log .lr:last-child{border-bottom:0}
.log .lt{flex:0 0 96px; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; font-weight:700}
.log .lr.ok .lt{color:var(--estate)}
.log .lr.warn .lt{color:var(--mind)}
.log .lr.fail .lt{color:var(--flag)}
.log .lm{color:var(--ink-dim); word-break:break-word; min-width:0}

/* ── limits strip (every surface states its own limit) ────────────────── */
.limits{margin-top:30px; border-top:1px solid var(--line); padding-top:14px; font-size:12px; color:var(--ink-dim); line-height:1.6; max-width:96ch}
.limits .lh{font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:5px}
.limits b{color:var(--mind)}
.limits ul{margin:8px 0 0; padding-left:18px}
.limits li{margin-bottom:5px}

/* ── generic lists ────────────────────────────────────────────────────── */
ul.plain{margin:0; padding-left:18px}
ul.plain li{margin-bottom:6px; color:var(--ink-dim); font-size:13px}
ul.verbatim{margin:0; padding-left:18px}
ul.verbatim li{margin-bottom:5px; font-size:12.5px; color:var(--ink-dim); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; line-height:1.5; word-break:break-word}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.9em; background:var(--panel-2); border:1px solid var(--line-soft); border-radius:4px; padding:1px 5px}