/* Caverio synthesis · direction 5 "setup" · 2026-09-17. Palette + type from caverio.css.
   Green only on observed inflow, rose only on observed outflow or an observed exit. Unknown = hatch. */
:root{--cv-unknown-hatch:repeating-linear-gradient(135deg,rgba(233,237,231,.42) 0 1px,transparent 1px 4px)}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
.num{font-family:var(--cv-font-data);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
a{color:inherit}
.shell{max-width:1360px;margin:0 auto;padding:0 28px}
.topbar{display:flex;align-items:center;justify-content:space-between;height:66px;border-bottom:1px solid var(--line);gap:20px}
.nav{display:flex;gap:22px;font-size:13px;color:var(--muted);align-self:stretch;align-items:stretch}
.nav span{display:flex;align-items:center;border-bottom:2px solid transparent}
.nav span.active{color:var(--ink);border-bottom-color:var(--ink)}
.intro{margin:26px 0 14px;display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}
.intro h1{font-size:30px;font-weight:500;letter-spacing:-.02em;margin:0 0 2px}
.intro p{margin:0;color:var(--muted);font-size:14px;max-width:720px}
.intro .status{font-family:var(--cv-font-data);font-size:12px;color:var(--cv-bone-40);letter-spacing:.06em;text-align:right}
.footer{margin:40px 0 44px;font-size:12px;color:var(--cv-bone-40);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.k{font-family:var(--cv-font-data);font-size:12px;letter-spacing:.06em;color:var(--cv-bone-62)}
.k small{font-size:12px;letter-spacing:0;color:var(--cv-bone-40)}
.dim{color:var(--cv-bone-40)}
.small{font-size:12px}
.unk{color:var(--cv-bone-62)}
.in{color:var(--cv-green)}.out{color:var(--cv-rose)}

/* board */
.board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--cv-radius-card);padding:16px 18px 14px;display:flex;flex-direction:column;gap:10px;min-width:0;cursor:pointer;position:relative}
.card:hover{border-color:var(--cv-bone-18)}
.card:focus{outline:1px solid var(--cv-bone-40);outline-offset:2px}
.card.pinned{border-color:var(--cv-ochre-line)}

/* header (constant) */
.hd{display:flex;justify-content:space-between;align-items:center;gap:10px;min-width:0}
.ident{display:flex;align-items:baseline;gap:8px;min-width:0}
.sym{font-size:16px;font-weight:600;letter-spacing:.01em;white-space:nowrap}
.ident .ctx{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr{display:flex;align-items:center;gap:6px;flex-shrink:0}
.stage{font-size:12px;color:var(--cv-bone-70);border:1px solid var(--cv-bone-18);border-radius:var(--cv-radius-chip);padding:2px 7px;white-space:nowrap}
.ic{background:transparent;border:1px solid transparent;color:var(--cv-bone-62);border-radius:4px;padding:3px 4px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;line-height:0;font:inherit}
.ic:hover{color:var(--ink);border-color:var(--cv-bone-18)}
.ic.done{color:var(--cv-green)}
.ic.pin.on{color:var(--cv-ochre)}
.ic .addr{font-size:12px;line-height:1;color:var(--cv-bone-62)}
.last{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--cv-bone-70);border-bottom:1px solid var(--line);padding-bottom:8px}
.last .num{color:var(--cv-bone-62);font-size:12px;white-space:nowrap}

/* cap block (constant) */
.capb{display:flex;flex-direction:column;gap:2px}
.capl1,.capl2{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.since{font-size:12px;color:var(--cv-bone-62);text-align:right}
.since b{font-size:14px;color:var(--ink);font-weight:500;margin-right:5px}
.since b.unk{font-size:12px;color:var(--cv-bone-62);font-weight:400}
.capbig{font-size:30px;font-weight:500;line-height:1.1;margin:2px 0 4px}
.chart{height:54px;width:100%}
.chart .capsvg{width:100%;height:100%;display:block}
.capl{fill:none;stroke:var(--cv-bone-70);stroke-width:1.4;vector-effect:non-scaling-stroke}
.basel{stroke:var(--cv-bone-18);stroke-width:1;stroke-dasharray:2 3;vector-effect:non-scaling-stroke}
.capd{fill:var(--cv-bone)}.capd0{fill:var(--cv-bone-40)}
.axt{font-family:var(--cv-font-data);font-size:11px;fill:var(--cv-bone-40)}
.nochart{height:100%;display:flex;align-items:center;font-size:12px;color:var(--cv-bone-62);background:var(--cv-unknown-hatch);padding:0 8px;border-radius:3px}
.capl2 .k{font-size:12px;letter-spacing:.02em;color:var(--cv-bone-40)}
.pl{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--cv-bone-62);margin-top:6px;padding-top:8px;border-top:1px solid var(--line)}
.pl b{color:var(--ink);font-weight:500}

/* flow (constant) */
.flowb{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px 0}
.flowl{display:flex;align-items:center;gap:12px}
.flowl .k{flex:0 0 112px;line-height:1.3;white-space:nowrap}
.fb{flex:1;min-width:0;height:34px}
.fb .flowsvg{width:100%;height:100%;display:block}
.fmid{stroke:var(--cv-bone-18);stroke-width:1;vector-effect:non-scaling-stroke}
.fin{fill:var(--cv-green)}.fout{fill:var(--cv-rose)}.fnone{fill:var(--cv-bone-18)}.funp{stroke:var(--cv-bone-18);stroke-width:.5}
.latest{flex:0 0 auto;text-align:right;display:flex;flex-direction:column;line-height:1.2}
.latest b{font-size:14px;font-weight:500;color:var(--ink)}
.latest.in b{color:var(--cv-green)}.latest.out b{color:var(--cv-rose)}.latest.unk b{color:var(--cv-bone-62)}
.latest small{font-family:var(--cv-font-data);font-size:12px;color:var(--cv-bone-40)}
.noflow{display:flex;align-items:center;gap:8px;height:100%;font-size:12px;color:var(--cv-bone-62)}
.noflow .hatch{display:inline-block;width:40px;height:10px;background:var(--cv-unknown-hatch);border:1px solid var(--cv-bone-12);border-radius:2px;flex-shrink:0}

/* the setup sheet: the synthesis */
.sheet{display:flex;flex-direction:column;gap:6px;font-family:var(--cv-font-editorial);font-size:15px;line-height:1.35;letter-spacing:-.003em}
.sheet .lab,.ppwrap .lab,.attn .lab,.unks .lab{font-family:var(--cv-font-data);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--cv-bone-62);flex:0 0 92px;padding-top:3px;line-height:1.2}
.sheet .row{display:flex;gap:8px;align-items:flex-start;min-width:0}
.sheet .row .txt{flex:1;min-width:0;color:var(--ink)}
.sheet .row.ctx .txt{color:var(--ink)}
.sheet .grp{display:flex;gap:8px;align-items:flex-start}
.sheet .grp .rows{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.sheet .sub{font-family:var(--font);font-size:13px;color:var(--cv-bone-62);margin-right:6px}
.sheet .sub::after{content:":"}
.sheet .row.st-waiting .txt{color:var(--cv-bone-70)}
.sheet .row.st-unknown .txt{color:var(--cv-bone-62)}
.sheet .row.st-clear .txt{color:var(--cv-bone-70)}
.sheet .row.st-seen.rose .txt{color:var(--cv-rose)}
.sheet .row.risk .txt{color:var(--cv-bone-70);font-family:var(--font);font-size:13px;padding-top:2px}
.sheet .under{color:var(--cv-bone-62)}
.unkin{display:inline-flex;align-items:center;gap:5px}
.detail{display:block;font-family:var(--font);font-size:13px;color:var(--cv-bone-62);margin-top:2px}
/* glyphs: filled square = in place, hollow = waiting, hatch = unknown, struck square = seen against, hollow ring = not seen */
.g{display:inline-block;width:13px;height:13px;border-radius:2px;flex-shrink:0;margin-top:4px;border:1px solid var(--cv-bone-70);position:relative}
.g-have{background:var(--cv-bone);border-color:var(--cv-bone)}
.g-wait{background:transparent;border-color:var(--cv-bone-40)}
.g-unk{background:repeating-linear-gradient(135deg,rgba(233,237,231,.55) 0 1px,transparent 1px 3.5px);border-color:var(--cv-bone-40)}
.g-seen{background:transparent;border-color:var(--cv-bone-70)}
.g-seen::before,.g-seen::after{content:"";position:absolute;left:1px;right:1px;top:50%;height:1.5px;background:var(--cv-bone-70);transform:rotate(45deg)}
.g-seen::after{transform:rotate(-45deg)}
.rose .g-seen{border-color:var(--cv-rose)}.rose .g-seen::before,.rose .g-seen::after{background:var(--cv-rose)}
.g-clear{border-radius:50%;border-color:var(--cv-bone-40)}

.ft{display:flex;gap:8px;align-items:flex-start;border-top:1px solid var(--line);padding-top:8px;margin-top:auto;font-size:13px;line-height:1.4}
.ft .k{flex:0 0 92px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding-top:2px}
.ft .txt{color:var(--cv-bone-70)}
.open{display:flex;justify-content:flex-end;font-size:12px}
.open a{color:var(--cv-bone-62);text-decoration:none}
.card:hover .open a{color:var(--ink)}

/* situation */
.sit{margin-top:8px;display:flex;flex-direction:column;gap:12px}
.sit .hd .sym{font-size:24px}
.sit .last{font-size:14px}
.cols{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px;align-items:start}
.colL,.colR{display:flex;flex-direction:column;gap:14px;min-width:0}
.sit .capbig{font-size:40px}
.sit .chart{height:150px}
.sit .fb{height:90px}
.sit .flowl .k{flex-basis:130px}
.tot{display:flex;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--cv-bone-70);align-items:baseline}
.tot span:first-child{font-family:var(--cv-font-data);font-size:12px;letter-spacing:.06em;color:var(--cv-bone-62)}
.attn{display:flex;gap:8px;align-items:flex-start;font-family:var(--cv-font-editorial);font-size:15px;line-height:1.35;border-top:1px solid var(--line);padding-top:10px}
.attn .txt{color:var(--cv-bone-70)}
.sit .sheet{gap:12px;font-size:17px;background:var(--panel);border:1px solid var(--line);border-radius:var(--cv-radius-panel);padding:18px 20px}
.sit .sheet .grp .rows{gap:8px}
.ppwrap{display:flex;flex-direction:column;gap:8px}
.ppwrap .lab,.unks .lab{flex-basis:auto}
.flowax{display:flex;justify-content:space-between;gap:8px;margin-top:4px}
.flowax .k{font-size:12px;color:var(--cv-bone-40);letter-spacing:.02em}
.ppl{width:100%;border-collapse:collapse;font-size:13px}
.ppl th{text-align:left;font-family:var(--cv-font-data);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--cv-bone-40);font-weight:400;padding:4px 8px 6px 0;border-bottom:1px solid var(--line)}
.ppl td{padding:7px 8px 7px 0;border-bottom:1px solid var(--cv-bone-06);vertical-align:top;color:var(--cv-bone-70)}
.ppl td.h{color:var(--ink);white-space:nowrap}
.ppl td.rose{color:var(--cv-rose)}.ppl td.unk{color:var(--cv-bone-62)}
.empty{font-size:13px;color:var(--cv-bone-62)}
.ft.big{font-size:15px;font-family:var(--cv-font-editorial)}
.ft.big .txt{color:var(--ink)}
.unks ul{margin:4px 0 0;padding-left:18px;font-size:13px;color:var(--cv-bone-62)}
.clocks{font-size:12px;color:var(--cv-bone-40);letter-spacing:.02em}
.sitnav{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0 6px;font-size:13px}
.sitnav a{text-decoration:none;color:var(--cv-bone-62);border:1px solid var(--line);border-radius:var(--cv-radius-chip);padding:3px 9px}
.sitnav a.on{color:var(--ink);border-color:var(--cv-bone-40)}
.sitnav a.back{border:0;padding-left:0;color:var(--cv-bone-70)}

/* phone: one column, nothing wider than the viewport */
@media(max-width:700px){
  .shell{padding:0 12px}
  .topbar{height:58px}.nav span:not(.active){display:none}.nav span.active{padding:19px 0}
  .intro h1{font-size:24px}.intro .status{text-align:left}
  .board{grid-template-columns:1fr;gap:14px}
  .card{padding:14px 14px 12px}
  .sheet{font-size:15px}
  .sheet .lab,.ft .k{flex-basis:80px}
  .sheet .grp .rows .row .lab{min-width:0}
  .cols{grid-template-columns:1fr;gap:16px}
  .sit .capbig{font-size:34px}
  .sit .chart{height:110px}.sit .fb{height:64px}
  .sit .sheet{padding:14px;font-size:15px}
  .ppl{display:block;overflow-x:auto;max-width:100%}
  .ppl th,.ppl td{font-size:12px;padding-right:10px}
  .ic .addr{display:none}
  .flowl{flex-wrap:wrap;gap:6px 10px}
  .flowl .k{flex:0 0 100%;white-space:normal}
  .flowl .k br{display:none}
  .flowl .k small::before{content:" · "}
  .fb{flex:1 1 0;height:40px}
}