*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0}
/* The page behind the dashboard, seen when scrolling past either end (rubber-band overscroll):
   the same background as the dashboard in each theme, and dark scrollbars in the dark theme */
/* The left 76px are the menu's colors with its 1px right border, so the menu reaches the bottom of the
   window also where the page itself ends (scrolling past the end, short pages) */
html{background:linear-gradient(to right,#FFFFFF 75px,#E4E7EC 75px 76px,#F4F5F7 76px) #F4F5F7}
html:has(.dash[data-theme="dark"]){background:linear-gradient(to right,#12151C 75px,#232835 75px 76px,#0B0D12 76px) #0B0D12;color-scheme:dark}

/* ---------- Theme tokens: one block per theme ---------- */
.dash{--bg:#F4F5F7;--surface:#FFFFFF;--panel:#FAFBFC;--line:#E4E7EC;--grid:rgba(16,24,40,.07);--text:#101828;--muted:#5D6676;
  --chip:#ECEEF2;--chip-strong:#DCE0E7;--chip-on:#101828;--chip-on-text:#FFFFFF;
  --win:#0B8BE0;--loss:#E5492A;--draw:#A3AAB6;--bar:#868F9D;--pred:#3D78C9;--tt:#80C83A;--line-hover:#BCC3CE;--panel-inverse:#161A22;--pie-base:#7A8391;--pie-base-hover:#9CABC1;--pred-hover:var(--pred);
  --ring:#0B8BE0;--shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.04);
  --tip-bg:#101828;--tip-text:#F2F4F7;--tip-muted:#AEB6C4;--hover-filter:brightness(1.3) saturate(1.25)}
.dash[data-theme="dark"]{--bg:#0B0D12;--surface:#12151C;--panel:#161A22;--line:#232835;--grid:rgba(255,255,255,.06);--text:#E8ECF3;--muted:#98A2B3;
  --chip:#1C212B;--chip-strong:#2C3340;--chip-on:#E8ECF3;--chip-on-text:#0B0D12;
  --win:#38A8F5;--loss:#FF6A48;--draw:#6B7383;--bar:#6E7A90;--pred:#3A9AD6;--tt:#9ED654;--line-hover:#4B5468;--panel-inverse:#FAFBFC;--pie-base:#5F6A7E;--pie-base-hover:#788AAC;--pred-hover:#A3D9F7;
  --ring:#38A8F5;--shadow:none;--tip-bg:#2A303C;--hover-filter:saturate(1.3) brightness(1.3)}

.dash{display:flex;min-height:100vh;min-width:max-content;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,'Segoe UI','Noto Sans','Helvetica Neue',sans-serif;transition:background-color .2s,color .2s}
.dash button{font:inherit;color:inherit;border:none;cursor:pointer}
.dash button:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.mono{font-family:ui-monospace,'SF Mono','Cascadia Mono',Consolas,monospace;color:var(--text)}

/* ---------- Layout: left menu, main column, sticky header ---------- */
.rail{flex:none;width:76px;position:sticky;top:0;z-index:31;height:100vh;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 0 14px;background:var(--surface);border-right:1px solid var(--line)}
.rail-logo{flex:none;align-self:stretch;position:relative;height:75px;margin-bottom:6px;display:grid;place-items:center}
.rail-logo img{width:52px;height:52px;object-fit:contain;image-rendering:pixelated}
.rail-logo::after{content:"";position:absolute;bottom:0;left:50%;width:36px;height:1px;margin-left:-18px;background:var(--line)}
.opp .initial{font-size:22px;font-weight:650;line-height:1}
/* No sideways scroll box (it would clip tooltips): a narrow window scrolls the whole page instead,
   and the main column keeps the charts' minimum width, so the sticky header always spans the content */
.main{flex:1 1 auto;min-width:1096px;padding:20px 28px 40px;display:flex;flex-direction:column;gap:18px}
.top{position:sticky;top:0;z-index:30;min-height:75px;margin:-20px -28px 0;padding:14px 28px;background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.top-left{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.top-right{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.top h1{margin:0;font-size:30px;font-weight:650;letter-spacing:-.02em}
.ratings{display:flex;flex-wrap:wrap;gap:2px}
.seg.wide button{width:34px}
/* "Connect to Claude": a chat icon in a one-button group, like the theme switch, with the same quick hint */
.seg .ask-claude{position:relative;width:34px;height:30px;display:grid;place-items:center;border-radius:8px;color:var(--muted);text-decoration:none;transition:color .15s,background-color .15s}
.seg .ask-claude:hover{color:var(--text);background:var(--surface);box-shadow:0 1px 2px rgba(16,24,40,.12)}
.seg .ask-claude:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.seg .ask-claude[data-hint]::after{content:attr(data-hint);position:absolute;z-index:40;top:calc(100% + 8px);right:0;white-space:nowrap;padding:6px 9px;border-radius:8px;background:var(--tip-bg);color:var(--tip-text);font-size:12px;font-weight:500;line-height:1.3;box-shadow:0 8px 20px rgba(16,24,40,.2);pointer-events:none;opacity:0;transition:opacity .1s}
.seg .ask-claude[data-hint]:hover::after{opacity:1;transition-delay:.15s}
.charts{min-width:1040px;display:flex;flex-direction:column;gap:18px}
.results-switch{align-self:center}

/* ---------- Empty state ---------- */
.empty-state{padding:56px 24px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.empty-state svg{color:var(--muted)}
.empty-state h2{margin:0;font-size:18px;font-weight:600}
.empty-state p{margin:0;font-size:14px;color:var(--muted)}
/* While the data is loading: a quiet spinning ring, then the heading */
.empty-state.loading h2{font-weight:500;color:var(--muted)}
.spinner{width:28px;height:28px;border-radius:50%;border:3px solid var(--chip-strong);border-top-color:var(--muted);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:3s}}

/* ---------- Selected state lives in CSS, keyed on aria-pressed / aria-selected ---------- */
/* Opponents: one line icon each; the chosen one in the text color with the ring, the others muted */
.dash .opp{width:52px;height:52px;padding:0;border-radius:12px;display:grid;place-items:center;background:transparent;color:var(--muted);transition:box-shadow .15s,color .15s}
.dash .opp:hover{color:var(--text)}
/* Contact link at the bottom of the left rail; its hint opens to the right of the rail */
.dash .contact{position:relative;margin-top:auto;flex:none;text-decoration:none}
.dash .contact[data-hint]::after{content:attr(data-hint);position:absolute;z-index:40;left:calc(100% + 18px);top:50%;transform:translateY(-50%);white-space:nowrap;padding:6px 9px;border-radius:8px;background:var(--tip-bg);color:var(--tip-text);font-size:12px;font-weight:500;line-height:1.3;box-shadow:0 8px 20px rgba(16,24,40,.2);pointer-events:none;opacity:0;transition:opacity .1s}
.dash .contact[data-hint]:hover::after,.dash .contact[data-hint]:focus-visible::after{opacity:1;transition-delay:.15s}
.opp svg{display:block}
.dash .opp[aria-pressed="true"]{color:var(--text);background:var(--surface);box-shadow:0 0 0 2px var(--surface),0 0 0 6px var(--ring)}
.rating{height:30px;padding:0 12px;border-radius:15px;font-size:14px;font-weight:500;font-variant-numeric:tabular-nums;background:transparent;color:var(--muted)!important}
.rating[aria-pressed="true"]{background:var(--chip-strong);color:var(--text)!important;font-weight:650}
.tabs{display:flex;gap:4px;padding:4px;border-radius:14px;background:var(--chip)}
.tab{height:38px;padding:0 20px;border-radius:10px;font-size:15px;font-weight:600;background:transparent;color:var(--muted)!important}
.tab[aria-selected="true"]{background:var(--chip-on);color:var(--chip-on-text)!important;box-shadow:0 1px 3px rgba(16,24,40,.18)}
.seg{display:flex;gap:2px;padding:3px;border-radius:11px;background:var(--chip);width:max-content}
.seg.col{flex-direction:column}
.seg button{width:32px;height:30px;display:grid;place-items:center;border-radius:8px;background:transparent;color:var(--muted)!important}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--text)!important;box-shadow:0 1px 2px rgba(16,24,40,.12)}
/* Quick hints for icon buttons (the browser's title tooltip waits about a second) */
.seg button{position:relative}
.seg button[data-hint]::after{content:attr(data-hint);position:absolute;z-index:40;white-space:nowrap;padding:6px 9px;border-radius:8px;background:var(--tip-bg);color:var(--tip-text);font-size:12px;font-weight:500;line-height:1.3;box-shadow:0 8px 20px rgba(16,24,40,.2);pointer-events:none;opacity:0;transition:opacity .1s}
.seg button[data-hint]:hover::after{opacity:1;transition-delay:.15s}
.seg.col button[data-hint]::after{left:calc(100% + 10px);top:50%;transform:translateY(-50%)}
.seg.below button[data-hint]::after{top:calc(100% + 8px);right:0}

/* ---------- Cards, axes, panels ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px 22px 22px;box-shadow:var(--shadow)}
.card-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:24px}
.card-head h2{margin:0;font-size:16px;font-weight:600}
/* Series date and time after the results heading, in the legend font */
.card-head h2 .series{margin-left:8px;font-size:13px;font-weight:400;color:var(--muted)}
.card-head h2 .series::before{content:"|";margin-right:8px;color:var(--line-hover)}
/* Series dropdown when there are several files for the same opponent and rating: looks like the plain
   date with a calendar icon; the whole of it, icon included, opens the native list */
.series.pick{position:relative}
.series.pick .cal{position:absolute;right:0;top:50%;transform:translateY(-50%);pointer-events:none}   /* clicks go through to the list */
.series-select{-webkit-appearance:none;appearance:none;margin:0;padding:0 20px 0 0;border:0;background:transparent;font:inherit;color:inherit;cursor:pointer}
.series.pick:hover{color:var(--text)}
.series-select:focus,.series-select:focus-visible{outline:none}   /* no focus frame left on the date after picking */
.dash[data-theme="dark"] .series-select{color-scheme:dark}
.legend{display:flex;flex-wrap:wrap;gap:16px;font-size:13px;color:var(--muted)}
.legend>span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:3px;background:var(--c)}
.legend i.round{border-radius:50%}
/* Columns are listed one by one, like in the hover rules below: a repeat() here would not animate back */
.chart-grid{display:grid;grid-template-columns:38px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);column-gap:12px;transition:grid-template-columns .25s ease;
  contain:inline-size;   /* the grid's width comes from the page only, never from its content (pies, tooltips) */
  --rest-col:var(--col-w,120px);--rest-game:calc((var(--rest-col) - 12px) / var(--n, 10))}
/* --col-w (set by app.js from the grid's width, in px: much cheaper to lay out than container query units)
   is a level column at rest. --rest-col and --rest-game are a level column and a game slot at rest (equal widths): marks are sized from
   them, so widening a column only spreads the marks apart, it doesn't make them bigger */
/* A click on a level makes its column 3× wider in every chart (the others share the rest); a second click restores it */
/* The 12px gap between columns is split between the neighbors: each level area reaches 6px into it,
   so the mouse is always over some level and a click in between still picks a level */
[data-lv]::before{content:"";position:absolute;top:0;bottom:0;left:-6px;right:-6px}
.dash[data-wide="1"] .chart-grid{grid-template-columns:38px minmax(0,3fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}
.dash[data-wide="2"] .chart-grid{grid-template-columns:38px minmax(0,1fr) minmax(0,3fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}
.dash[data-wide="3"] .chart-grid{grid-template-columns:38px minmax(0,1fr) minmax(0,1fr) minmax(0,3fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}
.dash[data-wide="4"] .chart-grid{grid-template-columns:38px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,3fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}
.dash[data-wide="5"] .chart-grid{grid-template-columns:38px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,3fr) minmax(0,1fr) minmax(0,1fr)}
.dash[data-wide="6"] .chart-grid{grid-template-columns:38px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,3fr) minmax(0,1fr)}
.dash[data-wide="7"] .chart-grid{grid-template-columns:38px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,3fr)}
/* Chart height: --ph is 200px when the chart fits in the window below the header, 100px otherwise */
.axis{position:relative;height:var(--ph,200px);transition:height .35s ease}
/* Whatever the charts lose by collapsing is added back below them, with the same timing,
   so the page length never changes and the scroll position is never pushed back */
.main{padding-bottom:calc(40px + var(--collapsed,0px))!important;transition:padding-bottom .35s ease}
.tick{position:absolute;right:0;transform:translateY(50%);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.panel{position:relative;height:var(--ph,200px);border-radius:12px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);display:flex;padding:0 6px}
/* Level panel under the mouse: darker frame in light theme, lighter frame with glow in dark */
.panel{transition:box-shadow .15s,height .35s ease}
.panel:hover{box-shadow:inset 0 0 0 1px #BCC3CE}
.dash[data-theme="dark"] .panel:hover{z-index:1;box-shadow:inset 0 0 0 1px #4B5468,inset 0 0 16px rgba(130,155,215,.08),0 0 8px rgba(130,155,215,.22)}
.gridline{position:absolute;left:0;right:0;height:1px;background:var(--grid)}
.col{position:relative;flex:1 1 0}
/* "Level X" badge on the top edge of the panel under the mouse */
.panel-badge{position:absolute;top:0;left:50%;z-index:2;transform:translate(-50%,-50%);padding:5px 14px 6px;border-radius:999px;background:var(--panel);box-shadow:inset 0 0 0 1px #BCC3CE;font-size:12px;font-weight:600;line-height:1.3;color:var(--text);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s}
.dash[data-theme="dark"] .panel-badge{box-shadow:inset 0 0 0 1px #4B5468,0 0 8px rgba(130,155,215,.22)}
.panel:hover .panel-badge{opacity:1}
.gap-top{margin-top:32px}

/* ---------- Marks: color comes from data-o through --c ---------- */
[data-o="W"]{--c:var(--win)}[data-o="D"]{--c:var(--draw)}[data-o="L"]{--c:var(--loss)}[data-o="N"]{--c:var(--line-hover)}   /* no result (the game broke off) */
[data-o="ok"]{--c:var(--bar)}[data-o="over"]{--c:var(--loss)}
.mark.pred{--c:var(--pred)}.mark.tt{--c:var(--tt)}
.mark{background:var(--c);transition:filter .12s}
.hit.tip-host{position:absolute;left:0;right:0;bottom:0}
/* Dot size follows the game slot (12px with 10 games a level, down to 8px with many), its center stays on the value */
.dot{--dot:clamp(8px,calc(var(--rest-game) * 1.6),12px);--ring-w:clamp(1px,calc(var(--dot) / 6),2px);position:absolute;left:50%;top:calc(6px - var(--dot) / 2);width:var(--dot);height:var(--dot);margin-left:calc(var(--dot) / -2);border-radius:50%;box-shadow:0 0 0 var(--ring-w) var(--panel)}
.dot .mark{position:absolute;inset:0;border-radius:50%}
/* Hovered dot (and its linked game): its panel-colored outline takes the panel color of the other theme */
.tip-host:hover .dot,.hl .dot{box-shadow:0 0 0 var(--ring-w) var(--panel-inverse)}
.bar{display:block;position:relative;width:min(11px,calc(var(--rest-game) * .58));height:100%;margin:0 auto}
.bar .mark{position:absolute;inset:0;border-radius:4px 4px 1px 1px}
.pair{display:flex;justify-content:center;align-items:flex-end;gap:1px}
.pair .mark{width:min(6px,calc(var(--rest-game) * .38));border-radius:3px 3px 1px 1px}
/* Hover and linked hover (.hl) share one rule; dark-theme blue gets its own lighter color */
.tip-host:hover .mark,.hl .mark{filter:var(--hover-filter)}
.dash[data-theme="dark"] :is(.tip-host:hover,.hl) .mark.pred{filter:none;--c:var(--pred-hover)}

/* ---------- Tooltips ---------- */
.tip-host{position:relative;cursor:default}
.tip-host:hover{z-index:20}
.tip{display:none;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);width:max-content;max-width:260px;padding:10px 12px;border-radius:10px;background:var(--tip-bg);color:var(--tip-muted);font-size:12px;line-height:1.55;text-align:left;white-space:pre-line;box-shadow:0 10px 28px rgba(16,24,40,.22);pointer-events:none}
.tip b{display:block;margin-bottom:2px;color:var(--tip-text);font-weight:600}
.tip-host:hover .tip{display:block}
/* The shared game tooltip: fixed to the window, placed by app.js next to the cursor */
.tip.shared{display:block;position:fixed;z-index:50;top:0;left:0;bottom:auto;transform:none;will-change:transform}
.tip.shared[hidden]{display:none}
/* Chart tooltips sit below the cursor (--my, set on mouse move) and flip above it near
   the bottom of the window (--flip = 1); horizontally they stay on the game's column */
.tip.follow{bottom:auto;top:calc(var(--my,0px) + 24px);--ty:calc(var(--flip,0) * (-100% - 48px));transform:translate(calc(-50% - 12px),var(--ty))}
.tip.follow[data-align="left"]{left:0;transform:translate(-12px,var(--ty))}
.tip.follow[data-align="right"]{left:auto;right:0;transform:translate(-12px,var(--ty))}

/* ---------- Donut: animatable shares drive a CSS conic-gradient ---------- */
@property --w{syntax:'<percentage>';inherits:false;initial-value:0%}
@property --d{syntax:'<percentage>';inherits:false;initial-value:0%}
@property --g{syntax:'<percentage>';inherits:false;initial-value:0%}
.donut{justify-self:center;position:relative;width:76px;height:76px;user-select:none}
.ring{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(transparent 0 var(--g),var(--win) var(--g) calc(var(--w) - var(--g)),transparent calc(var(--w) - var(--g)) calc(var(--w) + var(--g)),var(--draw) calc(var(--w) + var(--g)) calc(var(--w) + var(--d) - var(--g)),transparent calc(var(--w) + var(--d) - var(--g)) calc(var(--w) + var(--d) + var(--g)),var(--loss) calc(var(--w) + var(--d) + var(--g)) calc(100% - var(--g)),transparent calc(100% - var(--g)));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 11px),#000 calc(100% - 10px));mask:radial-gradient(farthest-side,transparent calc(100% - 11px),#000 calc(100% - 10px));
  transition:--w .6s ease,--d .6s ease,--g .6s ease}
.ring.empty{background:var(--chip)}

/* ---------- Budget pies: gray circle = budget, lime sector = moves over budget ---------- */
/* The whole level cell reacts to the mouse but has no frame or background of its own */
/* Pie area is a square as tall as the pie (up to 120px), so no empty band above and below */
.chart-grid{--pie-size:min(120px,calc(var(--rest-col) - 12px))}
.budget-cell{display:flex;align-items:center;justify-content:center;height:var(--pie-size);padding:0 6px}
.budget-cell.none{visibility:hidden}
.pie{width:min(var(--pie-size),100%);aspect-ratio:1}
.pie svg{display:block;width:100%;height:100%;overflow:visible}
.pie-base{fill:var(--pie-base)}
/* The card-colored outline under the fill cuts a thin gap into the gray circle along the radii */
.pie-under{fill:var(--loss)}
/* Level by move: one translucent line per game in its outcome color; overlaps add up, so common paths look darker */
/* Same height as the pies, so switching views keeps the block height; 0 at the bottom edge, 7 at the top */
.trace-panel{height:var(--pie-size);padding:0}
.fixed-panel{height:var(--pie-size)}   /* prediction bars at the block's fixed height */
/* Left column of the block: the view switch, level with the top of the charts */
.budget-side{align-self:start}
/* Lines are clipped to the rounded panel, just inside its 1px frame */
.trace-clip{position:absolute;inset:1px;border-radius:11px;overflow:hidden}
.traces{display:block;width:100%;height:100%}
.traces polyline{fill:none;stroke:var(--c);stroke-opacity:.1;stroke-width:1.5;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.traces polyline.hl-line{stroke-opacity:1;stroke-width:2}
/* Hover strip on each game's end line: picks that game (tooltip, highlight in every chart) */
.trace-hit.tip-host{position:absolute;top:0;bottom:0;width:6px;margin-left:-3px}
.pie-over{fill:var(--tt);stroke:var(--surface);stroke-width:3;stroke-linejoin:round;paint-order:stroke}
/* Hover lightens only the gray circle. Browsers ignore CSS filters on shapes inside an SVG, so the
   lighter gray is a color of its own: the same result as the bars' hover filter */
.pie-base{transition:fill .12s}
.budget-cell:hover .pie-base{fill:var(--pie-base-hover)}
/* The tooltip is centered under the pie, without the cursor offset the game charts use */
.budget-cell .tip.follow{transform:translate(-50%,var(--ty))}
.donut-score{position:absolute;inset:0;display:grid;place-items:center;font-size:22px;font-weight:500;font-variant-numeric:tabular-nums}
.donut-score.long{font-size:18px}   /* "52.5" and the like fit inside the ring */
@media (prefers-reduced-motion:reduce){.ring,.mark,.axis,.panel,.main,.chart-grid{transition:none!important}}

/* ---------- "Discuss with Claude" instructions: a native popover (opens and closes without script,
   closes on Esc or a click outside), under the header at the right ---------- */
.claude-help{position:fixed;inset:auto;top:78px;right:20px;margin:0;width:min(452px,calc(100vw - 32px));max-height:calc(100vh - 98px);overflow:auto;box-sizing:border-box;
  padding:22px 22px 16px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--text);
  box-shadow:0 18px 48px rgba(16,24,40,.28);font-size:13.5px;line-height:1.5}
.claude-help::backdrop{background:transparent}
.ch-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.ch-head h2{margin:0;font-size:16px;font-weight:650}
.dash .ch-close{flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:transparent;color:var(--muted)}
.dash .ch-close:hover{background:var(--chip);color:var(--text)}
.ch-intro{margin:0 0 14px;color:var(--muted)}
.ch-steps{list-style:none;margin:0;padding:0;counter-reset:step;display:flex;flex-direction:column;gap:12px}
.ch-steps li{counter-increment:step;position:relative;padding-left:34px;display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.ch-steps li::before{content:counter(step);position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;box-sizing:border-box;border:1.5px solid currentColor;background:transparent;color:var(--text);font-size:12px;font-weight:650}
.ch-steps b{font-weight:600}
.ch-steps span{color:var(--muted)}
.ch-steps .ui,.ch-steps b .ui{display:inline-block;padding:0 6px;border-radius:5px;background:var(--chip);color:var(--text);font-weight:500;line-height:1.55}
.ch-steps .mono{font-size:12px;color:var(--text)}
.ch-tag{font-style:normal;font-weight:500;padding:0 6px;border-radius:5px}
.ch-tag.red{color:#E5484D;background:rgba(229,72,77,.14)}
.ch-tag.amber{color:#C98A12;background:rgba(214,152,32,.16)}
.dash[data-theme="dark"] .ch-tag.red{color:#FF8B8B}
.dash[data-theme="dark"] .ch-tag.amber{color:#F0B44C}
.dash .ch-go{display:inline-flex;align-items:center;gap:6px;margin:4px 0 2px;height:34px;padding:0 14px;border-radius:10px;background:#0A78C2;color:#FFFFFF;font-weight:600;text-decoration:none;transition:background-color .15s}
.dash .ch-go:hover,.dash .ch-go:focus-visible{background:#000000;color:#FFFFFF}
.dash[data-theme="dark"] .ch-go:hover{box-shadow:inset 0 0 0 1px var(--line-hover)}   /* keeps the black button visible on the dark panel */
.ch-foot{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
/* While the instructions are open, the icon's hint stays hidden (it would cover the panel's top edge) */
.dash:has(.claude-help:popover-open) .ask-claude[data-hint]::after{display:none}

.ch-link{color:var(--text);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--line-hover)}
.ch-link:hover{text-decoration-color:currentColor}
.ch-head{position:absolute;top:12px;right:12px;margin:0!important}   /* only the close button is left there */
.ch-steps{padding-right:24px!important}