/* Console class layer — shell, panels, rows, terminal. All values from tokens. */
*{box-sizing:border-box}
html,body{margin:0;height:100%}
.wd-mono{font-family:var(--font-mono);font-size:var(--text-mono)}
.wd-eyebrow{font-size:var(--text-eyebrow);font-weight:var(--w-medium);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--text-dim)}
.wd-tag{font-size:9px;font-weight:var(--w-medium);letter-spacing:var(--track-tag);text-transform:uppercase;color:var(--text-dim)}
.wd-wordmark{font-family:var(--font-mono);font-weight:var(--w-medium);letter-spacing:var(--track-wordmark);text-transform:lowercase;color:var(--text-heading)}
/* shell */
.wd-app{display:flex;height:100vh;overflow:hidden;background:var(--surface-page)}
.wd-side{width:var(--rail-sidebar);flex:none;display:flex;flex-direction:column;background:var(--surface-card);border-right:var(--border-hair) solid var(--border-default)}
.wd-main{flex:1;display:flex;flex-direction:column;min-width:0}
.wd-topbar{flex:none;display:flex;align-items:center;gap:var(--space-3);height:var(--h-topbar);padding:0 var(--space-5);background:var(--surface-card);border-bottom:var(--border-hair) solid var(--border-default)}
.wd-topbar h1{margin:0;font-size:var(--text-page);font-weight:var(--w-semibold)}
.wd-topbar .sub{color:var(--text-dim);font-size:var(--text-small)}
.wd-scroll{flex:1;overflow-y:auto;padding:var(--pad-page);scrollbar-width:thin}
.wd-page{max-width:var(--w-content-max);margin:0 auto;display:flex;flex-direction:column;gap:var(--gap-panel)}
.wd-cols{display:grid;grid-template-columns:minmax(0,1fr) var(--rail-context);gap:var(--gap-panel);align-items:start}
.wd-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:var(--gap-panel)}
.wd-grid2>*,.wd-cols>*{min-width:0}
@media (max-width:980px){.wd-cols{grid-template-columns:1fr}}
/* nav */
.wd-navgroup{padding:10px var(--space-2) 2px}
.wd-navgroup h5{margin:0 0 var(--space-1);padding:0 10px;font-size:var(--text-eyebrow);font-weight:var(--w-medium);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--text-dim)}
.wd-navitem{display:flex;align-items:center;gap:9px;padding:6px 10px;border-radius:var(--radius-field);color:var(--text-body);cursor:pointer;border:none;background:none;width:100%;text-align:left;font:var(--w-regular) var(--text-base)/1.45 var(--font-ui)}
.wd-navitem:hover{background:var(--surface-hover);color:var(--text-heading)}
.wd-navitem.active{background:var(--accent-soft);color:var(--accent);font-weight:var(--w-medium)}
.wd-navitem .count{margin-left:auto;font-size:var(--text-micro);color:var(--text-dim);background:var(--surface-sunken);border-radius:9px;padding:0 7px;line-height:17px}
.wd-navitem .count.hot{color:#fff;background:var(--state-bad)}
/* buttons */
.wd-btn{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--radius-control);border:var(--border-hair) solid transparent;background:var(--accent);color:#fff;font-weight:var(--w-semibold);font-size:var(--text-small);cursor:pointer;font-family:var(--font-ui);line-height:18px}
.wd-btn:hover{filter:brightness(1.08)}
.wd-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.wd-btn[disabled]{opacity:.45;cursor:not-allowed;filter:none}
.wd-btn.ghost{background:transparent;border-color:var(--border-default);color:var(--text-body);font-weight:var(--w-medium)}
.wd-btn.ghost:hover{background:var(--surface-hover);color:var(--text-heading);filter:none}
.wd-btn.danger{background:transparent;border-color:var(--state-bad);color:var(--state-bad)}
.wd-btn.sm{padding:2px 8px;font-size:var(--text-micro)}
.wd-tab{border:none;background:none;font:var(--w-regular) var(--text-small)/1.45 var(--font-ui);color:var(--text-body);padding:5px 10px;border-radius:var(--radius-control);cursor:pointer}
.wd-tab.active{background:var(--accent-soft);color:var(--accent);font-weight:var(--w-medium)}
/* panels */
.wd-panel{background:var(--surface-card);border:var(--border-hair) solid var(--border-default);border-radius:var(--radius-panel);box-shadow:var(--shadow-card)}
.wd-panel-head{display:flex;align-items:center;gap:10px;padding:var(--pad-panel-head);border-bottom:var(--border-hair) solid var(--border-soft)}
.wd-panel-head h2{margin:0;font-size:var(--text-panel);font-weight:var(--w-semibold);flex:1}
.wd-panel-head .hint{font-size:var(--text-micro);color:var(--text-dim)}
.wd-panel-body{padding:var(--pad-panel)}
/* chips + badges */
.wd-chip{display:inline-block;font-family:var(--font-mono);font-size:10.5px;padding:1px 7px;border-radius:var(--radius-chip);background:var(--surface-sunken);border:var(--border-hair) solid var(--border-default);color:var(--text-body);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wd-chip.pr{color:var(--state-good);border-color:color-mix(in oklab,var(--state-good) 40%,transparent);background:color-mix(in oklab,var(--state-good) 8%,transparent)}
.wd-badge{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-micro);font-weight:var(--w-medium);padding:1px 8px;border-radius:10px;border:var(--border-hair) solid var(--border-default);color:var(--text-body);white-space:nowrap}
.wd-dot{width:7px;height:7px;border-radius:50%;flex:none}
.wd-dot.pulse{animation:wd-pulse var(--pulse-duration) ease-in-out infinite}
.wd-spin{width:10px;height:10px;border-radius:50%;border:2px solid var(--accent);border-top-color:transparent;animation:wd-spin var(--spin-duration) linear infinite;flex:none}
@keyframes wd-pulse{50%{opacity:.35}}
@keyframes wd-spin{to{transform:rotate(360deg)}}
/* rows */
.wd-group-head{display:flex;align-items:center;gap:var(--space-2);padding:7px var(--space-3);background:var(--surface-sunken);border-bottom:var(--border-hair) solid var(--border-soft);font-size:var(--text-small);font-weight:var(--w-semibold)}
.wd-row{display:grid;align-items:center;gap:10px;padding:var(--pad-row);border-bottom:var(--border-hair) solid var(--border-soft);cursor:pointer;grid-template-columns:26px 76px minmax(120px,1fr) minmax(90px,130px) 60px 60px minmax(70px,90px) 92px}
.wd-row:hover{background:var(--surface-hover)}
.wd-row:last-child{border-bottom:none}
.wd-row>*{min-width:0}
.wd-row .title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wd-row .title b{font-weight:var(--w-medium)}
.wd-row .meta{color:var(--text-dim);font-size:var(--text-small);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wd-row .num{text-align:right;font-family:var(--font-mono);font-size:11.5px;color:var(--text-body)}
.wd-row .actions{display:flex;gap:var(--space-1);justify-content:flex-end;opacity:0;transition:opacity var(--motion-fast) var(--motion-ease)}
.wd-row:hover .actions{opacity:1}
.wd-row.header{cursor:default;background:var(--surface-card);border-bottom-color:var(--border-default);padding:9px 12px;font-size:10.5px;font-weight:var(--w-medium);letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim)}
/* attention */
.wd-attn{display:flex;align-items:center;gap:var(--space-3);padding:9px 14px;background:var(--surface-card);border:var(--border-hair) solid var(--border-default);border-left:3px solid var(--state-bad);border-radius:0 var(--radius-panel) var(--radius-panel) 0}
.wd-attn.warn{border-left-color:var(--state-warn)}
.wd-attn.gold{border-left-color:var(--state-gold)}
.wd-attn .what{flex:1;min-width:0}
.wd-attn .why{color:var(--text-body);font-size:var(--text-small);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* stats */
.wd-statrow{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--border-default);border:var(--border-hair) solid var(--border-default);border-radius:var(--radius-panel);overflow:hidden}
.wd-statrow .cell{background:var(--surface-card);padding:12px 16px}
.wd-stat{display:flex;flex-direction:column;gap:2px}
.wd-stat b{font-size:var(--text-stat);font-weight:var(--w-semibold);line-height:var(--lh-tight)}
.wd-stat span{font-size:var(--text-micro);color:var(--text-dim)}
@media (max-width:900px){.wd-statrow{grid-template-columns:repeat(3,1fr)}}
.wd-hbar{display:grid;grid-template-columns:110px 1fr 30px;align-items:center;gap:10px;font-size:var(--text-small);color:var(--text-body);margin:5px 0}
.wd-hbar .track{height:6px;border-radius:3px;background:var(--surface-sunken);overflow:hidden}
.wd-hbar .fill{height:100%;border-radius:3px}
.wd-hbar b{text-align:right;font-weight:var(--w-medium);color:var(--text-heading);font-size:11.5px}
/* stepper + beam */
.wd-stages{display:flex;align-items:center}
.wd-stage{display:flex;align-items:center;flex:1}
.wd-stage:last-child{flex:none}
.wd-stage .node{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--border-default);display:grid;place-items:center;font-size:var(--text-eyebrow);color:var(--text-dim);background:var(--surface-card);flex:none}
.wd-stage.done .node{background:var(--state-good);border-color:var(--state-good);color:#fff}
.wd-stage.now .node{border-color:var(--accent);color:var(--accent)}
.wd-stage.fail .node{background:var(--state-bad);border-color:var(--state-bad);color:#fff}
.wd-stage .bar{height:1.5px;background:var(--border-default);flex:1}
.wd-stage.done .bar{background:var(--state-good)}
.wd-stage:last-child .bar{display:none}
.wd-stage-labels{display:grid;margin-top:6px}
.wd-stage-labels span{font-size:var(--text-eyebrow);color:var(--text-dim)}
.wd-stage-labels span.now{color:var(--accent);font-weight:var(--w-medium)}
.wd-beam{display:flex;align-items:flex-start}
.wd-beam .seg{display:flex;flex-direction:column;flex:1;min-width:0}
.wd-beam .seg:last-child{flex:none}
.wd-beam .lane{display:flex;align-items:center}
.wd-beam .node{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--border-default);display:grid;place-items:center;font-size:var(--text-micro);color:var(--text-dim);background:var(--surface-card);flex:none}
.wd-beam .seg.done .node{border-color:var(--state-good);color:var(--state-good)}
.wd-beam .seg.now .node{border-color:var(--accent);color:var(--accent)}
.wd-beam .bar{height:2px;flex:1;background:var(--border-default);margin:0 6px;border-radius:1px}
.wd-beam .seg.done .bar{background:var(--accent)}
.wd-beam .lbl{margin-top:7px;font-size:11.5px;color:var(--text-dim);font-weight:var(--w-medium)}
.wd-beam .seg.now .lbl{color:var(--accent)}
.wd-beam .seg.done .lbl{color:var(--text-heading)}
/* terminal */
.wd-term{background:var(--wd-term-bg);color:var(--wd-term-fg);border:var(--border-hair) solid var(--wd-term-line);border-radius:var(--radius-field);font-family:var(--font-mono);font-size:11.5px;line-height:var(--lh-term);padding:12px 14px;overflow:auto}
.wd-term .t{color:var(--wd-term-mute);margin-right:10px}
.wd-term .ok{color:var(--state-good)}.wd-term .er{color:var(--state-bad)}.wd-term .wa{color:var(--state-warn)}.wd-term .ac{color:var(--wd-term-blue)}
/* drawer */
.wd-scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:60}
.wd-drawer{position:fixed;top:0;right:0;bottom:0;width:var(--w-drawer);max-width:92vw;background:var(--surface-card);border-left:var(--border-hair) solid var(--border-default);z-index:61;display:flex;flex-direction:column;box-shadow:var(--shadow-drawer);animation:wd-slide var(--motion-base) var(--motion-ease)}
@keyframes wd-slide{from{transform:translateX(30px);opacity:0}}
@media (prefers-reduced-motion:reduce){.wd-drawer{animation:none}}
.wd-drawer-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:var(--border-hair) solid var(--border-default)}
.wd-drawer-head h2{margin:0;font-size:14px;font-weight:var(--w-semibold);flex:1}
.wd-drawer-body{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:16px}
.wd-drawer-foot{padding:12px 18px;border-top:var(--border-hair) solid var(--border-default);display:flex;gap:var(--space-2)}
/* fields */
.wd-field h4{margin:0 0 6px;font-size:var(--text-small);font-weight:var(--w-semibold);color:var(--text-heading)}
.wd-field p{margin:5px 0 0;font-size:11.5px;color:var(--text-dim)}
.wd-input{width:100%;background:var(--surface-sunken);border:var(--border-hair) solid var(--border-default);border-radius:var(--radius-field);padding:7px 10px;font-family:var(--font-ui);font-size:var(--text-small);color:var(--text-heading)}
.wd-input:focus{outline:none;box-shadow:var(--focus-ring);border-color:var(--accent)}
.wd-input::placeholder{color:var(--text-dim)}
.wd-choice{display:flex;gap:10px;padding:10px 12px;border:var(--border-hair) solid var(--border-default);border-radius:7px;cursor:pointer}
.wd-choice.sel{border-color:var(--accent);background:var(--accent-soft)}
.wd-choice b{font-weight:var(--w-medium);font-size:var(--text-small);display:block;color:var(--text-heading)}
.wd-choice span{font-size:11.5px;color:var(--text-body)}
.wd-search{display:flex;align-items:center;gap:7px;background:var(--surface-card);border:var(--border-hair) solid var(--border-default);border-radius:var(--radius-field);padding:5px 10px;color:var(--text-dim);font-size:var(--text-small);min-width:220px}
.wd-empty{padding:22px;text-align:center;color:var(--text-dim);font-size:var(--text-small)}

/* brand + daemon footer */
.wd-brand{display:flex;align-items:center;gap:9px;padding:14px 16px 12px}
.wd-brand .wd-wordmark{font-size:14px}
.wd-brand small{font-size:10px;color:var(--text-dim);font-weight:400}
.wd-side-foot{margin-top:auto;padding:10px 12px;border-top:var(--border-hair) solid var(--border-default);display:flex;flex-direction:column;gap:var(--space-2)}
.wd-opstate{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-small);color:var(--text-body)}
.wd-opstate b{font-weight:var(--w-medium);color:var(--text-heading)}
/* popover */
.wd-menu{position:relative}
.wd-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:40;width:280px;background:var(--surface-card);border:var(--border-hair) solid var(--border-default);border-radius:var(--radius-panel);box-shadow:var(--shadow-float);padding:var(--space-2)}
.wd-pop h6{margin:2px 8px 6px;font-size:var(--text-eyebrow);text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);font-weight:var(--w-medium)}
.wd-pop label{display:flex;align-items:center;gap:var(--space-2);padding:5px 8px;border-radius:var(--radius-control);font-size:var(--text-small);cursor:pointer}
.wd-pop label:hover{background:var(--surface-hover)}
.wd-pop label .updown{margin-left:auto;opacity:.6}
/* key-value + misc grids */
.wd-kv{display:grid;grid-template-columns:150px minmax(0,1fr);gap:7px var(--space-4);font-size:var(--text-small)}
.wd-kv b{font-weight:var(--w-medium);color:var(--text-body)}
.wd-kv span{font-family:var(--font-mono);font-size:11.5px;color:var(--text-heading);overflow-wrap:anywhere;min-width:0}
.wd-grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--gap-panel)}
.wd-grid3>*{min-width:0}
.wd-filterbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
/* pro row */
.wd-row.pro{grid-template-columns:26px 76px minmax(140px,1fr) minmax(90px,130px) 52px 60px 76px 44px 64px minmax(80px,110px) 92px}
.wd-row.pro .num{font-size:var(--text-micro)}
@media (max-width:900px){.wd-row{grid-template-columns:26px 76px minmax(120px,1fr) 60px 92px}.wd-row>:nth-child(4),.wd-row>:nth-child(6),.wd-row>:nth-child(7){display:none}}
