/*
 * dam.css - The DAM of Whole Truth. One token set, two surfaces (dark default, light opt-in).
 * Lifted verbatim from the approved mock (TJ picked the dark direction 2026-10-20) so the
 * shipped page and the approved artefact cannot drift. Every state colour is specified
 * TWICE, once per surface - that doubling is the standing cost of the surface switch.
 */
/* ============================================================
   TOKENS — one set, two surfaces. No page-local hex anywhere (I1).
   Every state colour is validated against ITS OWN surface for 4.5:1 (G1).
   ============================================================ */
:root, :root[data-theme="dark"]{
  color-scheme:dark;
  --wine:#D4669A; --wine-2:#AB406C; --plum:#6F1D46;
  --bg:#141216; --bg-2:#1C1920; --bg-3:#252129; --bg-4:#2F2A35;
  --line:#332E39; --line-2:#433C4A;
  --ink:#F4F0F5; --ink-2:#B5AEBC; --ink-3:#8E8694;
  --pink-2:#FFCAF1; --butter:#FFD987; --lilac:#E2CCF7; --lime:#C1FE64;
  --glyph-1:#E8A0C2; --glyph-2:#FFD987; --glyph-3:#E2CCF7; --glyph-4:#C1FE64;
  --st-none:#A49CAE; --st-part:#F0B342; --st-done:#4ED88B; --st-find:#FF8E7C;
  --sel-bg:rgba(171,64,108,.24);
  --chip-bg:var(--bg-3);
  --scrim:rgba(0,0,0,.62);
  --shadow:none;
}
:root[data-theme="light"]{
  color-scheme:light;
  --wine:#93385D; --wine-2:#AB406C; --plum:#6F1D46;
  --bg:#FBF8F6; --bg-2:#FFFFFF; --bg-3:#F5F0F3; --bg-4:#EBE3E8;
  --line:#E7E0E4; --line-2:#D3CAD1;
  --ink:#1A181E; --ink-2:#514B57; --ink-3:#736C7A;
  --pink-2:#C2578C; --butter:#8A6210; --lilac:#6E4E9B; --lime:#4F7016;
  --glyph-1:#B4537D; --glyph-2:#A9790F; --glyph-3:#7B59A8; --glyph-4:#5C7F1C;
  --st-none:#6E6876; --st-part:#9A6A10; --st-done:#1F6B44; --st-find:#B3302A;
  --sel-bg:#FBEAF2;
  --chip-bg:#F5F0F3;
  --scrim:rgba(255,255,255,.82);
  --shadow:0 1px 2px rgba(26,24,30,.05), 0 6px 18px rgba(26,24,30,.05);
}
:root{
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --r1:5px; --r2:8px; --r3:12px; --r-pill:999px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:Montserrat,"Segoe UI",system-ui,sans-serif;
  font-size:13.5px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
.mono{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace}
:focus-visible{outline:2px solid var(--wine); outline-offset:2px; border-radius:var(--r1)}
/* G7 — motion behind the preference, and nothing over 200ms */
@media (prefers-reduced-motion: no-preference){
  body, .asset, .btn, .tree li, .insp, .top, .rail{transition:background-color .16s linear, color .16s linear, border-color .16s linear}
}

/* ---------- app chrome ---------- */
.top{background:var(--bg-2); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20}
.top-in{display:flex; align-items:center; gap:var(--s4); min-height:54px; padding:var(--s2) var(--s4); flex-wrap:wrap}
.brand{display:flex; align-items:baseline; gap:7px; font-weight:800; letter-spacing:-.025em; font-size:16px; white-space:nowrap}
.brand .the{font-weight:600; color:var(--ink-2)}
.brand .mk{color:var(--wine)}
.brand .dam{
  color:var(--ink); font-weight:800;
  border-bottom:3px solid var(--wine); padding-bottom:1px;
}
.top nav{display:flex; gap:2px}
.top nav a{
  color:var(--ink-2); text-decoration:none; font-size:12.5px; font-weight:600;
  padding:7px 13px; border-radius:var(--r1); min-height:34px; display:flex; align-items:center;
}
.top nav a[aria-current]{background:var(--bg-4); color:var(--ink)}
.top .right{margin-left:auto; display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap}
.srch{
  min-width:230px; min-height:34px; padding:7px 12px; font:inherit; font-size:12.5px;
  background:var(--bg); border:1px solid var(--line-2); border-radius:var(--r1); color:var(--ink);
}
.srch::placeholder{color:var(--ink-3)}
.btn{
  font:inherit; font-weight:700; font-size:12.5px; cursor:pointer; border-radius:var(--r1);
  min-height:34px; padding:7px 15px; display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--line-2); background:var(--bg-3); color:var(--ink);
}
.btn.primary{background:var(--wine-2); border-color:var(--wine-2); color:#fff}
.btn.ghost{background:transparent; color:var(--ink-2)}
.btn:hover{filter:brightness(1.12)}
:root[data-theme="light"] .btn:hover{filter:brightness(.97)}
/* Surface switch — a real toggle, not a glyph.
   The ◐/◑ pair it replaced was ambiguous: a half-filled circle does not say whether it shows the
   CURRENT surface or the one you would get by clicking (TJ, 2026-10-20: "the icon of dark light is
   confusing"). A switch has a position, and a position can only be read one way.
   G2 — it still carries a WORD beside the colour; the word names the surface you are ON. */
.surface{
  display:inline-flex; align-items:center; gap:9px; font:inherit; font-weight:700; font-size:12px;
  min-height:34px; padding:5px 13px 5px 7px; cursor:pointer; color:var(--ink-2);
  background:transparent; border:1px solid var(--line-2); border-radius:var(--r-pill);
}
.surface:hover{border-color:var(--wine); color:var(--ink)}
.surface .sw{
  position:relative; flex:none; width:40px; height:22px; border-radius:var(--r-pill);
  background:var(--bg-4); border:1px solid var(--line-2); display:block;
}
.surface .knob{
  position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%;
  background:var(--wine); display:grid; place-items:center;
}
/* The knob sits LEFT on dark and RIGHT on light — the same direction as the labels, so the
   control reads as a position on a scale rather than as a state badge. */
:root[data-theme="light"] .surface .knob{left:auto; right:2px}
@media (prefers-reduced-motion: no-preference){
  .surface .knob{transition:left .14s ease, right .14s ease}
}
.surface .lbl{white-space:nowrap}
:root[data-theme="dark"] .surface .lbl.lt{display:none}
:root[data-theme="light"] .surface .lbl.dk{display:none}

.crumb{padding:var(--s3) var(--s4) 0; font-size:11.5px; color:var(--ink-3)}
.crumb a{color:var(--ink-2); text-decoration:none}
.crumb span{margin:0 6px; color:var(--line-2)}

.head{padding:var(--s2) var(--s4) var(--s4); display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5); align-items:flex-end; border-bottom:1px solid var(--line)}
.head h1{font-size:22px; font-weight:800; letter-spacing:-.025em; margin:0}
.ctx{display:flex; flex-wrap:wrap; gap:4px 16px; font-size:11.5px; color:var(--ink-2); margin-left:auto}
.ctx b{color:var(--ink)}
.ctx .asof{color:var(--ink-3)}

/* ---------- 3-pane layout, fixed breakpoints (B3) ---------- */
.app{display:grid; grid-template-columns:1fr}
@media(min-width:1100px){ .app{grid-template-columns:232px minmax(0,1fr)} }
@media(min-width:1500px){ .app{grid-template-columns:232px minmax(0,1fr) 372px} }

.rail{border-right:1px solid var(--line); padding:var(--s4); display:grid; gap:var(--s4); align-content:start}
.axis h3{
  margin:0 0 var(--s2); font-size:10px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3); display:flex; align-items:center; gap:7px;
}
.axis h3 .n{width:16px; height:16px; border-radius:3px; background:var(--bg-4); color:var(--wine); display:grid; place-items:center; font-size:9.5px; letter-spacing:0}
.tree{list-style:none; margin:0; padding:0; font-size:12px}
.tree li{display:flex; justify-content:space-between; gap:8px; padding:5px 7px; border-radius:var(--r1); color:var(--ink-2); cursor:pointer; min-height:30px; align-items:center}
.tree li:hover{background:var(--bg-3)}
.tree li.sel{background:var(--sel-bg); color:var(--ink); font-weight:700; box-shadow:inset 2px 0 0 var(--wine)}
.tree li .cnt{color:var(--ink-3); font-weight:500; font-size:11px}
.tree .d2{padding-left:19px} .tree .d3{padding-left:31px} .tree .d4{padding-left:43px}
.fld{margin-bottom:var(--s2)}
.fld label{display:block; font-size:11px; font-weight:600; color:var(--ink-2); margin-bottom:3px}
.fld select{
  width:100%; min-height:32px; padding:5px 9px; font:inherit; font-size:12px; color:var(--ink);
  background:var(--bg); border:1px solid var(--line-2); border-radius:var(--r1);
}

.main{padding:var(--s4); min-width:0}
.bar{display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center; margin-bottom:var(--s3)}
.count{font-size:12px; color:var(--ink-2)} .count b{color:var(--ink)}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:var(--s4)}
.chip{
  display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600;
  background:var(--chip-bg); color:var(--ink); border:1px solid var(--line-2);
  border-radius:var(--r1); padding:4px 5px 4px 9px;
}
.chip .ax{font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--wine)}
.chip button{border:0; background:var(--bg-4); color:var(--ink-2); cursor:pointer; width:18px; height:18px; border-radius:3px; font-size:11px; line-height:1}

.grid{display:grid; gap:var(--s3); grid-template-columns:1fr}
@media(min-width:620px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1000px){ .grid{grid-template-columns:repeat(3,1fr)} }
@media(min-width:1700px){ .grid{grid-template-columns:repeat(4,1fr)} }

.asset{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r2); overflow:hidden; cursor:pointer; box-shadow:var(--shadow)}
.asset.on{border-color:var(--wine); box-shadow:0 0 0 1px var(--wine)}
/* 🔴 The asset canvas stays DARK on both surfaces — it is a viewing surround, not chrome. */
.thumb{aspect-ratio:1/1; position:relative; display:grid; place-items:center; background:#0D0B0F}
.thumb .glyph{font-size:30px; font-weight:800; letter-spacing:-.04em; opacity:.55}
.t1 .glyph{color:#E8A0C2} .t2 .glyph{color:#FFD987} .t3 .glyph{color:#E2CCF7} .t4 .glyph{color:#C1FE64}
.thumb .kind{position:absolute; top:7px; left:7px; font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; background:rgba(0,0,0,.66); color:#F4F0F5; padding:3px 7px; border-radius:3px}
.badge{position:absolute; top:7px; right:7px; font-size:10px; font-weight:700; padding:3px 7px; border-radius:3px; background:rgba(0,0,0,.66); display:flex; align-items:center; gap:5px}
.badge.ok{color:#4ED88B} .badge.warn{color:#F0B342} .badge.bad{color:#FF8E7C} .badge.off{color:#A49CAE}
.badge::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.thumb .strip{position:absolute; left:0; right:0; bottom:0; height:3px; background:#4ED88B}
.strip.warn{background:#F0B342} .strip.bad{background:#FF8E7C} .strip.off{background:#A49CAE}
.asset-b{padding:var(--s3)}
.asset-b .nm{font-size:12.5px; font-weight:700; line-height:1.35; margin-bottom:4px}
.asset-b .path{font-size:10px; color:var(--ink-3); margin-bottom:7px; word-break:break-all}
.asset-b .fc{display:flex; justify-content:space-between; font-size:10.5px; color:var(--ink-3)}

.insp{border-left:1px solid var(--line); background:var(--bg-2); padding:var(--s4); display:grid; gap:var(--s4); align-content:start}
.insp .hero{aspect-ratio:4/3; background:#0D0B0F; border:1px solid var(--line); border-radius:var(--r2); display:grid; place-items:center; position:relative}
.insp .hero .glyph{font-size:38px; font-weight:800; color:#E8A0C2; opacity:.55; letter-spacing:-.04em}
.insp .hero .surroundnote{position:absolute; bottom:7px; left:7px; font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:#8E8694}
.insp h2{margin:0; font-size:15px; font-weight:800; letter-spacing:-.02em; line-height:1.3}
.insp .sub{font-size:11px; color:var(--ink-3); margin-top:3px}
.axblk{border-top:1px solid var(--line); padding-top:var(--s3)}
.axblk h4{margin:0 0 var(--s2); font-size:9.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); display:flex; align-items:center; gap:7px}
.axblk h4 .n{width:15px; height:15px; border-radius:3px; background:var(--bg-4); color:var(--wine); display:grid; place-items:center; font-size:9px; letter-spacing:0}
.axblk h4 .src{margin-left:auto; text-transform:none; letter-spacing:.03em; font-size:9.5px; color:var(--ink-3); font-weight:600}
.crumbs{font-size:11.5px; color:var(--ink-2); line-height:1.65}
.crumbs .sep{color:var(--wine); margin:0 4px}
.crumbs .leaf{color:var(--ink); font-weight:700}
.lvl{font-size:9.5px; color:var(--ink-3); margin-top:3px}
.kv{display:grid; grid-template-columns:auto 1fr; gap:5px var(--s3); font-size:11.5px; align-items:baseline}
.kv dt{color:var(--ink-3); font-size:11px; white-space:nowrap}
.kv dd{margin:0; font-weight:600}
.dep{display:grid; gap:5px}
.dep .row{display:flex; align-items:center; gap:8px; font-size:11.5px; padding:6px 8px; background:var(--bg-3); border-radius:var(--r1); min-height:32px}
.dep .row .pl{color:var(--ink-3); margin-left:auto; font-size:10.5px}
.dot{display:inline-flex; align-items:center; gap:5px; font-weight:700; font-size:10.5px}
.dot::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.dot.live{color:var(--st-done)} .dot.plan{color:var(--st-part)} .dot.ret{color:var(--st-none)}
.guard{border:1px solid var(--st-find); background:var(--bg-3); border-left:4px solid var(--st-find); border-radius:var(--r2); padding:var(--s3)}
.guard p{margin:0 0 4px; font-size:11.5px; font-weight:700; color:var(--st-find)}
.guard small{color:var(--ink-2); font-size:10.5px; line-height:1.55; display:block}
.acts{display:flex; gap:var(--s2); flex-wrap:wrap}
.legend{display:flex; flex-wrap:wrap; gap:var(--s4); font-size:10.5px; color:var(--ink-3); padding:var(--s4); border-top:1px solid var(--line)}
.legend span{display:inline-flex; align-items:center; gap:6px}
.legend i{width:9px; height:9px; border-radius:2px}