/* ============================================================
   RGS Game Analysis Console — design system (v2)
   Desoul brand pull: pure-black canvas, sharp corners, no shadow,
   uppercase display headers, one unified 5-state status scale.
   Mapped from the Claude Design "03 Console Prototype" handoff.
   ============================================================ */
:root{
  /* canvas + surfaces (pure black, flat) */
  --black:#F7F5F0; --bg:#F7F5F0; --s1:#F7F5F0; --s2:#FFFEFB; --s3:#E6E1D5;  /* canvas lifted off pure #F7F5F0; widened surface ramp for real elevation */
  --rule:#E6E1D5; --rule-2:#E6E1D5; --rule-3:#D8D2C4;
  --text:#1F1D18; --text-2:#5C584C; --text-3:#8A8578;  /* text-3 lifted #A39D8D→#8A8578 for AA contrast on small labels */
  --accent:#2F6B4F; --accent-dim:#2fa01f; --accent-2:#3E6B8A;
  /* unified 5-state status scale (ok/warn/crit/idle/na) — glyph + color */
  --st-ok:#2F6B4F;   --st-ok-bg:rgba(68,214,44,.10);
  --st-warn:#8A5A10; --st-warn-bg:rgba(232,179,57,.12);
  --st-crit:#B3402F; --st-crit-bg:rgba(200,50,60,.14);
  --st-idle:#A39D8D; --st-idle-bg:#F7F5F0;
  --st-na:#D8D2C4;
  /* back-compat aliases (old names still used across templates) */
  --good:var(--st-ok); --bad:var(--st-crit); --watch:var(--st-warn);
  --good-bg:var(--st-ok-bg); --bad-bg:var(--st-crit-bg); --watch-bg:var(--st-warn-bg);
  --display:"Baloo 2","Source Sans 3","Segoe UI",system-ui,sans-serif;
  --body:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --sb:248px; --radius:4px; --radius-sm:3px;  /* shape-lock: pills = full radius; cards/chips/inputs = 3-6px; nothing in between */
  --shadow:none;
  --glow:0 0 0 1px rgba(68,214,44,.5),0 0 18px -6px rgba(68,214,44,.5);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;color:var(--text);font-family:var(--body);font-size:15px;line-height:1.55;
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
a:hover{color:#5cf043}
::selection{background:rgba(68,214,44,.28)}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:.03em;text-transform:uppercase;margin:0}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--text-3)}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}

/* ---- unified status system: .st-{ok,warn,crit,idle,na} × shapes ---- */
.st-ok{--stc:var(--st-ok);--stbg:var(--st-ok-bg)}
.st-warn{--stc:var(--st-warn);--stbg:var(--st-warn-bg)}
.st-crit{--stc:var(--st-crit);--stbg:var(--st-crit-bg)}
.st-idle{--stc:var(--st-idle);--stbg:var(--st-idle-bg)}
.st-na{--stc:var(--st-na);--stbg:transparent}
.st-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--stc)}
.st-chip,.st-pill{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);
  font-size:12px;padding:3px 8px;border-radius:var(--radius-sm);color:var(--stc);background:var(--stbg)}
.st-chip::before,.st-pill::before{content:var(--stglyph,"●")}
.st-cell{color:var(--stc);background:var(--stbg)}
.st-ok::before{--stglyph:"●"} .st-warn::before{--stglyph:"◐"}
.st-crit::before{--stglyph:"✕"} .st-idle::before{--stglyph:"○"} .st-na::before{--stglyph:"–"}

/* ---- app shell ---- */
.app{display:grid;grid-template-columns:var(--sb) 1fr;min-height:100vh}
.sidebar{
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:4px;
  padding:18px 14px;border-right:1px solid var(--rule);
  background:linear-gradient(180deg,var(--s1),var(--bg));
}
.logo-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:14px 8px 18px;border-bottom:1px solid var(--rule);margin-bottom:14px}
.logo-wrap .logo{height:56px;width:auto;display:block;filter:drop-shadow(0 0 12px rgba(68,214,44,.4))}
.logo-text{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.logo-text b{color:var(--text);font-weight:800}
.nav{display:flex;flex-direction:column;gap:2px}
.nav-label{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);padding:16px 10px 6px}
.nav-item{
  display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--radius-sm);
  color:var(--text-2);font-weight:600;font-size:14.5px;position:relative;transition:.13s;
}
.nav-item .ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.nav-item:hover{background:var(--s2);color:var(--text)}
.nav-item.active{background:var(--s3);color:var(--text)}
.nav-item.active::before{content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.nav-item.active .ic{stroke:var(--accent);opacity:1}
.nav-item.sm{padding:6px 11px;font-size:12.5px;font-weight:600;color:var(--text-3)}
.nav-item.sm:hover{color:var(--text)}
.nav-item.sm.active{color:var(--text)}
.games{overflow-y:auto;flex:1;min-height:40px}
.dot{width:7px;height:7px;border-radius:50%;flex:none}
.dot.on{background:var(--accent);box-shadow:0 0 8px var(--accent)}
.dot.off{background:var(--text-3)}
.palette-btn{
  margin-top:8px;display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  padding:9px 12px;border:1px solid var(--rule);border-radius:var(--radius-sm);background:var(--s2);
  color:var(--text-3);font-family:var(--body);font-size:13.5px;cursor:pointer;transition:.13s}
.palette-btn:hover{border-color:var(--rule-2);color:var(--text-2)}
.palette-btn kbd{font-family:var(--mono);font-size:11px;background:var(--s3);border:1px solid var(--rule-2);border-radius:4px;padding:2px 6px;color:var(--text-3)}
.srv-stamp{margin-top:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;color:var(--text-3);text-align:center}
.srv-stamp::first-letter{color:var(--accent)}

/* ---- main / topbar ---- */
.main{display:flex;flex-direction:column;min-width:0}
.topbar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;
  height:58px;padding:0 30px;border-bottom:1px solid var(--rule);
  background:var(--bg)}  /* solid — dropped glassmorphism blur (inappropriate for dashboards) */
.crumbs{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;font-size:18px}
.crumbs .sep{color:var(--text-3);font-weight:400}
.crumbs .crumb.dim{color:var(--text-3);font-weight:600;font-size:15px}
.crumbs a.crumb{color:var(--text-2)}
.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.content{padding:30px;max-width:1500px;width:100%}
/* wiki/docs pages use the full width — long-form reading, no wasted right margin */
.content:has(.wiki){max-width:none;padding-right:40px}

/* ---- typographic page intro ---- */
.page-head{margin-bottom:26px}
.page-head h1{font-size:28px;font-weight:800}
.page-head p{color:var(--text-2);margin:6px 0 0;max-width:70ch}

/* ---- panels / cards ---- */
.panel{background:linear-gradient(180deg,var(--s1),var(--bg));border:1px solid var(--rule);border-radius:var(--radius);box-shadow:var(--shadow)}
.card{background:var(--s1);border:1px solid var(--rule);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);transition:border-color .15s,background .15s}
.card.link:hover{border-color:var(--rule-3);background:var(--s2)}  /* flat + border elevation language — no big drop shadow / no lift */
.card h3{font-size:16px;margin-bottom:3px}
.grid{display:grid;gap:16px}
.grid.cols-2{grid-template-columns:repeat(auto-fill,minmax(420px,1fr))}
.grid.cols-3{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
.section{margin-top:34px}
.section-head{display:flex;align-items:baseline;gap:12px;margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--rule)}
.section-head h2{font-size:18px}
.section-head .eyebrow{margin-left:auto}

/* ---- stat / KPI ---- */
.stat{display:flex;flex-direction:column;gap:2px}
.stat .v{font-family:var(--mono);font-size:24px;font-weight:600;color:var(--text)}
.stat .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}

/* ---- pills / badges ---- */
.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;font-weight:500;
  padding:3px 9px;border-radius:100px;border:1px solid var(--rule-2);color:var(--text-2)}
.pill .pdot{width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.good{color:var(--st-ok);background:var(--st-ok-bg);border-color:transparent}
.pill.bad{color:var(--st-crit);background:var(--st-crit-bg);border-color:transparent}
.pill.watch{color:var(--st-warn);background:var(--st-warn-bg);border-color:transparent}
.pill.na{color:var(--text-3)}
/* verdict pills (BI Integration) carry the unified glyph + color */
.pill.v-done{color:var(--st-ok);background:var(--st-ok-bg);border-color:transparent}
.pill.v-done::before{content:"● "}
.pill.v-progress{color:var(--st-warn);background:var(--st-warn-bg);border-color:transparent}
.pill.v-progress::before{content:"◐ "}
.pill.v-blocked{color:var(--st-crit);background:var(--st-crit-bg);border-color:transparent}
.pill.v-blocked::before{content:"✕ "}
.pill.v-todo{color:var(--st-idle);background:var(--st-idle-bg);border-color:transparent}
.pill.v-na{color:var(--text-3);border-color:transparent}

/* ---- stage chips (unified 5-state: glyph + color, never color alone) ---- */
.stages{display:flex;flex-wrap:wrap;gap:6px}
.stage{font-family:var(--mono);font-size:12px;font-weight:500;padding:4px 8px;border-radius:var(--radius-sm);
  border:1px solid var(--rule-2);color:var(--text-3);display:inline-flex;gap:5px;align-items:center;line-height:1}
.stage::before{content:"○";font-size:11px}
.stage.done{color:var(--st-ok);background:var(--st-ok-bg);border-color:transparent}.stage.done::before{content:"●"}
.stage.progress{color:var(--st-warn);background:var(--st-warn-bg);border-color:transparent}.stage.progress::before{content:"◐"}
.stage.blocked{color:var(--st-crit);background:var(--st-crit-bg);border-color:transparent}.stage.blocked::before{content:"✕"}
.stage.todo{color:var(--st-idle);border-color:var(--rule-2)}.stage.todo::before{content:"○"}
.stage.na{color:var(--st-na);border-color:var(--rule);opacity:.7}.stage.na::before{content:"–"}
.progressbar{height:5px;border-radius:var(--radius-sm);background:var(--s3);overflow:hidden}
.progressbar>i{display:block;height:100%;background:linear-gradient(90deg,var(--accent-dim),var(--accent))}

/* ---- tables ---- */
table{border-collapse:collapse;width:100%;font-size:14.5px}
thead th{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);
  text-align:left;padding:9px 12px;border-bottom:1px solid var(--rule)}
tbody td{padding:10px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
tbody tr:hover{background:var(--s1)}
table.tight td,table.tight th{padding:6px 10px}

/* ---- forms ---- */
input,select,textarea{
  font-family:var(--mono);font-size:13px;color:var(--text);background:var(--s2);
  border:1px solid var(--rule-2);border-radius:6px;padding:9px 11px;outline:none;
  transition:border-color .13s,box-shadow .13s}
input:hover:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled){border-color:var(--rule-3)}
input:focus,select:focus,textarea:focus{border-color:var(--accent-dim);box-shadow:0 0 0 2px rgba(68,214,44,.16)}
input[type=date]{color-scheme:dark}
select{color-scheme:dark;cursor:pointer;-webkit-appearance:none;appearance:none;padding-right:30px;
  background-repeat:no-repeat;background-position:right 11px center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
select option{background:var(--s2);color:var(--text)}
input::placeholder,textarea::placeholder{color:var(--text-3)}
label.field{display:flex;flex-direction:column;gap:5px;font-size:13px}
label.field .lab{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--body);font-weight:600;font-size:13.5px;
  padding:8px 14px;border-radius:var(--radius-sm);border:1px solid var(--rule-2);background:var(--s2);
  color:var(--text);cursor:pointer;transition:.13s;text-decoration:none}
.btn:hover{border-color:var(--rule-2);background:var(--s3)}
.btn.primary{border-color:var(--accent-dim);color:var(--accent)}
.btn.primary:hover{background:rgba(68,214,44,.12);box-shadow:var(--glow)}
.btn.paid{border-color:rgba(240,180,41,.5);color:var(--watch)}
.btn.paid:hover{background:var(--watch-bg)}
.btn.claude{border-color:rgba(40,170,220,.5);color:var(--accent-2)}
.btn.claude:hover{background:rgba(40,170,220,.12)}
.btn.sm{padding:5px 10px;font-size:13px}

/* ---- empty state ---- */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:64px 24px;text-align:center;color:var(--text-3);border:1px dashed var(--rule-2);border-radius:var(--radius)}
.empty .big{font-family:var(--display);font-size:17px;color:var(--text-2)}

/* ---- filter controls (labeled dark fields) ---- */
.filter-field{margin-bottom:13px}
.filter-label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.07em;color:var(--text-3);margin-bottom:5px}
.filter-control{width:100%;box-sizing:border-box;background:#FFFEFB;color:var(--text);
  border:1px solid #E6E1D5;border-radius:6px;padding:9px 11px;
  font-family:var(--mono);font-size:13px;line-height:1.2;transition:border-color .13s,box-shadow .13s;
  -webkit-appearance:none;appearance:none}
.filter-control:hover:not(:disabled){border-color:#A39D8D}
.filter-control:focus{outline:none;border-color:var(--st-ok);box-shadow:0 0 0 2px rgba(68,214,44,.16)}
.filter-control:disabled{opacity:.4;cursor:not-allowed}
select.filter-control{cursor:pointer;padding-right:30px;background-repeat:no-repeat;background-position:right 11px center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}

/* ---- sparkline ---- */
.spark{display:inline-flex;gap:2px;align-items:flex-end;height:26px}
.spark i{width:4px;border-radius:1px;background:linear-gradient(180deg,var(--accent),var(--accent-dim));opacity:.85;display:block}

/* ---- audit grid ---- */
.audit-grid{border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}
.audit-grid table{font-size:13.5px}
.audit-grid td.cell{text-align:center;cursor:pointer;font-family:var(--mono);font-size:12px}
.cell.ok{color:var(--good)}.cell.warn{color:var(--watch)}.cell.bad{color:var(--bad)}.cell.none{color:var(--text-3)}

/* ---- run bar ---- */
.runbar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.log{font-family:var(--mono);font-size:13px;background:#F7F5F0;border:1px solid var(--rule);border-radius:var(--radius-sm);
  padding:12px 14px;white-space:pre-wrap;max-height:320px;overflow:auto;color:var(--text-2)}

/* ---- wiki (docs/catalog) ---- */
.wiki{display:grid;grid-template-columns:266px 1fr;gap:24px;align-items:start}
.wiki-nav{position:sticky;top:78px;max-height:calc(100vh - 110px);overflow-y:auto;font-size:13.5px;padding-right:6px}
.wiki-nav a{display:block;padding:4px 9px;border-radius:5px;color:var(--text-2);border-left:2px solid transparent}
.wiki-nav a:hover{background:var(--s1);color:var(--text)}
.wiki-nav a.cur{background:var(--s2);color:var(--accent);border-left-color:var(--accent)}
.wiki-nav details{margin:2px 0}
.wiki-nav summary{cursor:pointer;color:var(--text-3);font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;padding:7px 9px 4px;list-style:none}
.wiki-nav summary::-webkit-details-marker{display:none}
.wiki-nav summary::before{content:"▸ ";color:var(--text-3)}
.wiki-nav details[open]>summary::before{content:"▾ "}
/* Docs group titles (top-level manifest groups): bold + Desoul green */
.docs-nav>details>summary{color:var(--accent);font-weight:800;font-size:12px;letter-spacing:.1em}
.docs-nav>details>summary::before{color:var(--accent)}
.wiki-body{min-width:0}
.wiki-body .prose{max-width:none}
.wiki-frame{width:100%;height:calc(100vh - 130px);border:1px solid var(--rule);border-radius:var(--radius);background:#1F1D18}

/* ---- prose (rendered markdown) ---- */
.prose{max-width:80ch;font-size:15px;line-height:1.7;color:var(--text-2)}
.prose h1,.prose h2,.prose h3,.prose h4{color:var(--text);margin:1.6em 0 .5em;line-height:1.25}
.prose h1{font-size:27px;font-weight:800;letter-spacing:-.02em;margin-top:0}
.prose h2{font-size:21px;padding-bottom:.3em;border-bottom:1px solid var(--rule)}
.prose h3{font-size:17px}
.prose p{margin:.85em 0}
.prose a{color:var(--accent);border-bottom:1px solid rgba(68,214,44,.3)}
.prose ul,.prose ol{padding-left:1.4em;margin:.7em 0}
.prose li{margin:.3em 0}
.prose code{font-family:var(--mono);font-size:.86em;background:var(--s2);border:1px solid var(--rule);border-radius:4px;padding:1px 5px;color:#cfeecb}
.prose pre{background:#F7F5F0;border:1px solid var(--rule);border-radius:var(--radius);padding:16px;overflow:auto;margin:1em 0}
.prose pre code{background:none;border:none;padding:0;color:var(--text-2)}
.prose blockquote{margin:1em 0;padding:.4em 1em;border-left:3px solid var(--accent-dim);background:var(--s1);color:var(--text-2);border-radius:0 6px 6px 0}
.prose table{margin:1.2em 0;font-size:14.5px}
.prose th{color:var(--text-2)}
.prose hr{border:none;border-top:1px solid var(--rule);margin:1.8em 0}
.prose .mermaid{background:var(--s1);border:1px solid var(--rule);border-radius:var(--radius);padding:18px;margin:1.2em 0;text-align:center;cursor:zoom-in;position:relative}
.prose .mermaid svg{max-width:100%}
.prose .mermaid::after{content:"⤢ zoom";position:absolute;top:6px;right:8px;font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);opacity:.7}
/* mermaid zoom lightbox: full-screen, wheel-zoom + drag-pan */
.mmd-lightbox{position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:grab}
.mmd-lightbox.drag{cursor:grabbing}
.mmd-lightbox svg{max-width:none;transform-origin:center center;will-change:transform}
.mmd-lightbox .mmd-close{position:fixed;top:14px;right:18px;font-family:var(--mono);font-size:13px;color:var(--text-2);background:var(--s2);border:1px solid var(--rule-2);border-radius:var(--radius-sm);padding:6px 12px;cursor:pointer;z-index:401}
.mmd-lightbox .mmd-hint{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--text-3);z-index:401}
.prose img{max-width:100%}

/* ---- updates feed / bulletins ---- */
.feed{display:flex;flex-direction:column;gap:0}
.feed .item{display:flex;gap:14px;padding:11px 0;border-bottom:1px solid var(--rule)}
.feed .when{font-family:var(--mono);font-size:12px;color:var(--text-3);white-space:nowrap;padding-top:2px;min-width:78px}
.bulletins{list-style:none;padding:0;margin:0}
.bulletins .day{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin:16px 0 6px}
.bulletins li.item{display:flex;gap:10px;padding:5px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.bulletins .tag{font-family:var(--mono);font-size:11px;color:var(--accent-2);white-space:nowrap;min-width:54px;display:inline-block}
.bulletins .tag.tag-global{color:var(--text-3)}
/* game chips use a NON-status hue family — red/amber/green stay reserved for health status */
.bulletins .tag.tag-emberfall{color:#3E6B8A}
.bulletins .tag.tag-lanternwood{color:#f472b6}
.bulletins .tag.tag-stormhold{color:#5eead4}
.bulletins .tag.tag-tidebreak{color:#9aa5b1}
.bulletins .tag.tag-nightmarket{color:#7dd3fc}

/* ---- activity filter chips ---- */
.filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.fbtn{
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 11px;border-radius:100px;border:1px solid var(--rule-2);background:var(--s2);
  color:var(--text-3);cursor:pointer;transition:.13s}
.fbtn:hover{border-color:var(--rule-2);color:var(--text-2);background:var(--s3)}
.fbtn.on{border-color:currentColor;background:transparent}
.fbtn.on-all{color:var(--text-2)}
.fbtn[data-game="emberfall"]{}.fbtn[data-game="emberfall"].on{color:#3E6B8A}
.fbtn[data-game="lanternwood"]{}.fbtn[data-game="lanternwood"].on{color:#2F6B4F}
.fbtn[data-game="stormhold"]{}.fbtn[data-game="stormhold"].on{color:#f0b429}
.fbtn[data-game="tidebreak"]{}.fbtn[data-game="tidebreak"].on{color:#b07cff}
.fbtn[data-game="nightmarket"]{}.fbtn[data-game="nightmarket"].on{color:#ec4858}
.fbtn[data-game="global"]{}.fbtn[data-game="global"].on{color:var(--text-3)}

/* ---- catalog / kv ---- */
.kv{display:grid;grid-template-columns:120px 1fr;gap:6px 14px;font-size:13.5px;margin-top:10px}
.kv .lab{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);padding-top:3px}
.kv .val{color:var(--text-2);word-break:break-word}
.cbt-input{max-width:160px}
.chips span{font-family:var(--mono);font-size:12px;margin-right:10px}
.chip-ok{color:var(--good)}.chip-bad{color:var(--bad)}.chip-na{color:var(--text-3)}

/* ---- notebook tab ---- */
.nb-frame{width:100%;height:calc(100vh - 58px);border:0;background:#1F1D18;display:block}
.content:has(.nb-frame){max-width:none;padding:0}

/* Hamburger — only shown when the sidebar collapses (narrow webview / editor tab) */
.menu-btn{display:none;background:var(--s2);border:1px solid var(--rule-2);color:var(--text-2);
  border-radius:var(--radius-sm);padding:4px 10px;font-size:15px;line-height:1;cursor:pointer;margin-right:4px}
.menu-btn:hover{color:var(--text)}

/* in-page confirm modal (native confirm() is blocked in the VS Code webview) */
.modal-ov{position:fixed;inset:0;background:rgba(0,0,0,.62);display:flex;align-items:center;justify-content:center;z-index:200}
.modal{background:var(--s1);border:1px solid var(--rule-2);border-radius:var(--radius);max-width:460px;width:90%;box-shadow:var(--shadow);overflow:hidden}
.modal-h{padding:14px 18px;font-family:var(--display);font-weight:700;color:var(--watch);border-bottom:1px solid var(--rule)}
.modal-b{padding:16px 18px;color:var(--text-2);font-size:14.5px;line-height:1.55}
.modal-f{display:flex;justify-content:flex-end;gap:10px;padding:12px 18px;border-top:1px solid var(--rule)}

/* Keep the sidebar visible down to narrow widths (the VS Code editor tab is often < 980px).
   Below 700px it becomes a slide-in drawer toggled by the hamburger. */
@media(max-width:700px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;z-index:60;transform:translateX(-100%);transition:transform .18s ease}
  .app.nav-open .sidebar{transform:translateX(0);box-shadow:0 0 40px rgba(0,0,0,.75)}
  .menu-btn{display:inline-flex}
  .wiki{grid-template-columns:1fr}.wiki-nav{position:static;max-height:none}
}

/* ── BI Integration Checklist tab ─────────────────────────────────────────── */
.checklist-grid{width:100%;border-collapse:separate;border-spacing:0}
.checklist-grid th{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);text-align:center;padding:6px 4px;font-weight:600}
.checklist-grid th:first-child{text-align:left;padding-left:12px}
.cl-row{cursor:pointer;transition:.12s}
.cl-row td{text-align:center;padding:7px 4px;border-top:1px solid var(--rule)}
.cl-row:hover{background:var(--s1)}
.cl-game{text-align:left!important;padding-left:12px!important;font-weight:600;color:var(--text)}
.cl-detail td{padding:0 12px 14px}
.cl-steps{display:flex;flex-direction:column;gap:2px;padding:8px 0}
.cl-step{display:flex;align-items:flex-start;gap:12px;padding:9px 12px;border-radius:var(--radius-sm);background:var(--s1);border:1px solid var(--rule)}
.cl-step-main{flex:1;min-width:0}
.cl-step-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cl-step-head b{color:var(--text);font-weight:600}
.cl-summary{color:var(--text-2);font-size:12.5px;margin-top:3px}
.cl-ev{margin-top:5px}
.cl-ev summary{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);cursor:pointer}
.cl-ev ul{margin:5px 0 0;padding-left:18px;color:var(--text-3);font-size:13px}
.cl-ev li{margin:2px 0;word-break:break-word}
.cl-step-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.btn.sm{padding:4px 10px;font-size:13px}
.pill.v-done{color:var(--good);background:var(--good-bg);border-color:transparent}
.pill.v-progress{color:var(--watch);background:var(--watch-bg);border-color:transparent}
.pill.v-blocked{color:var(--bad);background:var(--bad-bg);border-color:transparent}
.pill.v-todo{color:var(--text-3);background:var(--s3);border-color:transparent}
.pill.v-na{opacity:.5}
.creds-row{display:flex;gap:10px;flex-wrap:wrap;padding:4px 0}

/* ════════════════════════════════════════════════════════════════════════
   Phase-2 structural components — faithful to the Claude Design
   "03 Console Prototype" handoff. Attention rail, segmented stagebar,
   refined game cards, action deck, glyph health grid, BI master-detail.
   ════════════════════════════════════════════════════════════════════════ */

/* ── attention rail (NEEDS ATTENTION / ACTION QUEUE banner) ── */
.attn-rail{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:1px solid rgba(200,50,60,.4);
  background:rgba(200,50,60,.07);border-radius:var(--radius-sm);padding:8px 14px;margin-bottom:18px;
  font-family:var(--mono);font-size:12px}
.attn-rail .lbl{font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--st-crit);flex:none}
.attn-rail .attn{color:var(--text-2);text-decoration:none}
.attn-rail a.attn{cursor:pointer}
.attn-rail .attn b{color:var(--text)}
.attn-rail .attn .step{color:var(--text-3)}
.attn-rail .vd{font-family:var(--mono);font-size:11px;font-weight:600;padding:1px 5px;border-radius:2px}

/* ── eyebrow line above a grid/section ── */
.eyebrow-line{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:12px}

/* ── segmented stagebar (8 thin segments coloured by status) ── */
.stagebar{display:grid;grid-template-columns:repeat(8,1fr);gap:3px}
.stagebar .seg{height:8px;border-radius:1px;background:var(--rule-2);display:block}
.stagebar .seg.s-done{background:var(--st-ok)}
.stagebar .seg.s-progress{background:var(--st-warn)}
.stagebar .seg.s-blocked{background:var(--st-crit)}
.stagebar .seg.s-todo,.stagebar .seg.s-unknown{background:var(--rule-2)}
.stagebar .seg.s-na{background:var(--rule)}
.stagebar.sm{gap:2px}.stagebar.sm .seg{height:5px}
.stagebar.lg .seg{height:9px}

/* ── count badge (done/total) coloured by worst state ── */
.cnt{font-family:var(--mono);font-size:16px;font-weight:600;color:var(--text-2)}
.cnt.c-ok{color:var(--st-ok)} .cnt.c-warn{color:var(--st-warn)} .cnt.c-crit{color:var(--st-crit)}

/* ── refined Home game cards ── */
.gcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:11px}
.gcard{background:var(--s1);border:1px solid var(--rule-2);border-radius:var(--radius);padding:14px;
  cursor:pointer;transition:border-color .13s,background .13s;display:block;color:inherit;text-decoration:none}
.gcard:hover{border-color:var(--rule-3);background:var(--s2)}
.gcard-head{display:flex;align-items:baseline;gap:8px;margin-bottom:11px}
.gcard-head .short{font-family:var(--display);font-weight:800;font-size:14px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text)}
.gcard-head .glabel{font-size:13px;color:var(--text-2);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gcard .gmeta{font-family:var(--mono);font-size:11px;color:var(--text-3);margin:9px 0 8px}
.gcard .cats{display:flex;flex-wrap:wrap;gap:4px}

/* ── Audit: scope tabs + action deck ── */
.scope-tabs{display:flex;gap:4px;flex-wrap:wrap}
.scope-tab{font-family:var(--mono);font-size:12px;padding:4px 10px;border-radius:var(--radius-sm);
  border:1px solid var(--rule-2);background:var(--s2);color:var(--text-3);cursor:pointer;transition:.12s}
.scope-tab:hover{color:var(--text-2)}
.scope-tab.on{border-color:var(--accent-dim);color:var(--accent);background:rgba(68,214,44,.08)}
.deck{border:1px solid var(--rule-2);border-radius:var(--radius);overflow:hidden;overflow-x:auto;margin-bottom:18px}
.deck-head,.deck-row{display:grid;grid-template-columns:26px 1fr 86px 64px 104px 132px;gap:12px;
  align-items:center;min-width:560px}
.deck-head{padding:7px 14px;background:var(--s3);font-family:var(--mono);font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3)}
.deck-row{padding:10px 14px;border-top:1px solid var(--rule)}
.deck-row:hover{background:var(--s1)}
.deck-glyph{font-family:var(--mono);font-size:13.5px;text-align:center}
.deck-row .lbl{font-weight:600;font-size:13.5px;color:var(--text)}
.deck-row .sc,.deck-row .last{font-family:var(--mono);font-size:11.5px;color:var(--text-3)}
.deck-row .cost{font-family:var(--mono);font-size:11.5px;color:var(--text-2)}
.deck-row .btn{justify-self:end}

/* ── Audit: glyph source-health grid ── */
.health-grid{border:1px solid var(--rule-2);border-radius:var(--radius);overflow:hidden;overflow-x:auto}
.health-grid table{font-size:13px;min-width:400px}
.health-grid th{text-align:center}
.health-grid th:first-child{text-align:left}
.health-grid td.hcat{font-family:var(--mono);font-size:11px;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em}
.health-grid td.hcell{text-align:center;padding:3px 4px;cursor:pointer}
.health-grid td.hcell .g{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:var(--radius-sm);font-size:13px}

/* ── BI Integration: master list + detail split ── */
.bi-split{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.bi-list{display:flex;flex-direction:column;gap:3px;width:216px;flex:none}
.bi-list .hd{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);padding:0 4px;margin-bottom:5px}
.bi-gm{border:1px solid var(--rule);border-radius:var(--radius-sm);background:var(--s1);padding:8px 10px;
  cursor:pointer;display:flex;flex-direction:column;gap:6px;transition:.12s}
.bi-gm:hover{border-color:var(--rule-2)}
.bi-gm.on{border-color:var(--accent-dim);background:var(--s2)}
.bi-gm .top{display:flex;align-items:center;gap:7px}
.bi-gm .top .short{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--text)}
.bi-gm .top .cnt{margin-left:auto;font-size:13px}
.bi-detail{flex:1;min-width:300px;border:1px solid var(--rule-2);border-radius:var(--radius);overflow:hidden}
.bi-detail.hidden{display:none}
.bi-detail-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--rule-2);
  background:var(--s2);flex-wrap:wrap}
.bi-detail-head .short{font-family:var(--display);font-size:13.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--text)}
.bi-detail-head .glabel{font-size:12.5px;color:var(--text-2)}
.bi-detail-head .btn{margin-left:auto}
.bi-steps{display:flex;flex-direction:column;background:#F7F5F0}
.bi-step{display:flex;align-items:flex-start;gap:10px;padding:9px 13px;border-bottom:1px solid var(--rule)}
.bi-step:last-child{border-bottom:none}
.bi-step.attn,.stage-row.attn{background:rgba(200,50,60,.05)}
.bi-step-main{flex:1;min-width:0}
.bi-step-head{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:2px}
.bi-step-head b{font-size:12.5px;color:var(--text)}
.bi-step-head .when{font-family:var(--mono);font-size:11px;color:var(--text-3)}
.bi-step .summ{font-size:13px;color:var(--text-2);margin-bottom:3px}
.bi-step-act{display:flex;align-items:center;gap:5px;flex:none}
.bi-ev summary{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-3);cursor:pointer}
.bi-ev ul{margin:4px 0 0;padding-left:18px;color:var(--text-3);font-size:12.5px;line-height:1.7}
.bi-ev li{word-break:break-word}

/* ---- reduced-motion: respect the OS setting (no transform lifts, near-instant transitions) ---- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  .card.link:hover,.gcard:hover{transform:none}
}