/* Right panel: tabs (Analysis, Games, ⚙ Config, the ✎ Edit toggle), tools row, position editor, analysis (switches, move list, controls), the Config tab (bot strength, time control, picking players, pieces), games browser. */
/* a definite height, so the tab (and the move list in it) scroll inside the panel instead of being clipped by it */
.panel{background:var(--panel);border-radius:8px;overflow:hidden;display:grid;grid-template-rows:auto auto auto minmax(0,1fr);min-height:560px;height:calc(100vh - 90px);position:sticky;top:12px}
@media (max-width:980px){.panel{position:static;height:75vh;min-height:420px}}
.ptabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);border-bottom:1px solid var(--line)}
.ptabs button{padding:10px 6px;color:var(--muted);font-weight:600;display:grid;justify-items:center;gap:2px;font-size:12px}
.ptabs button .ic{font-size:16px}
.ptabs button[aria-selected="true"]{color:var(--text);box-shadow:inset 0 -2px 0 var(--text)}
/* the action row: two labelled groups, Game (draw, resign, Looper's rewind; only with a live game you play in) and Board (edit, flip, new game) */
.actions{display:grid;gap:6px;padding:8px 10px;border-bottom:1px solid var(--line)}
.agrp{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.agrp .albl{flex:none;width:44px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.actions .iconbtn{background:var(--panel2);border:1px solid var(--line);font-size:12px;padding:5px 9px}
.seatopts{display:flex;gap:14px;flex-wrap:wrap;align-items:center;padding:6px 12px;border-bottom:1px solid var(--line);font-size:12px}
/* B1: the rules of the bot you play as (or the army hint), a full-width line of the seat options */
.playas-note{flex-basis:100%;display:flex;flex-direction:column;gap:6px;color:var(--muted);max-height:9em;overflow:auto}
#playas-text{display:flex;flex-direction:column;gap:3px}
.playas-note .sbtn{align-self:flex-start}
.seatlist .fam.rule{background:rgba(127,199,255,.14);color:#7fc7ff}
/* the Analysis tab is a column: the move list takes the free height and scrolls itself; the controls stay at the bottom */
#tab-analysis{display:flex;flex-direction:column;gap:10px}
#tab-analysis>*{flex:none}
.linkbtn{align-self:flex-start;color:var(--accent);font-size:12px;font-weight:700;padding:2px 0}
.linkbtn:hover{text-decoration:underline}
#tab-analysis>.movelist{flex:1 1 auto;min-height:120px;overflow-y:auto;align-content:start}
.timectl{background:var(--panel2);border-radius:5px;padding:6px 10px;font-size:12px}
.timectl summary{cursor:pointer;font-weight:600;list-style:none;display:flex;gap:6px;align-items:center}
.timectl summary::-webkit-details-marker{display:none}
.timectl summary::after{content:"\25B8";margin-left:auto;color:var(--muted)}
.timectl[open] summary::after{content:"\25BE"}
.timectl[open]{display:grid;gap:8px}
.timectl .note{font-weight:400;margin:0}
.ptab{overflow:auto;overflow-x:hidden;min-height:0;min-width:0;padding:10px 12px;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-content:start}
.ptab>*{min-width:0}
.ng-row>*,.field,.botlist,.bot,.bot .body,.bot .body>span{min-width:0}
.field select{width:100%;max-width:100%;text-overflow:ellipsis}

/* analysis */
.switches{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:12px}
.engine-info{margin-left:auto;color:var(--muted);font-size:11px;display:flex;gap:6px;align-items:center}
.opening{display:flex;justify-content:space-between;align-items:center;background:var(--panel2);padding:7px 10px;border-radius:5px;font-size:13px}
.opening .book{opacity:.6}
.movelist{display:grid;grid-template-columns:34px 1fr 1fr;grid-auto-rows:max-content;font-size:13px;font-variant-numeric:tabular-nums;border-radius:5px;overflow:hidden}
.movelist>div{padding:5px 6px}
.movelist .n{color:var(--faint);background:var(--panel2)}
.movelist .m{display:grid;grid-template-columns:1fr 26px;align-items:center;gap:6px;cursor:pointer;font-weight:600}
.movelist .m:hover{background:var(--panel2)}
.movelist .m.cur{background:var(--panel3);border-radius:3px}
.movelist .m .mini{width:26px;height:12px;position:relative;background:var(--loss);border-radius:2px;overflow:hidden}
.movelist .m .mini b{position:absolute;left:0;top:0;bottom:0;width:50%;background:var(--win)}
.movelist .empty{grid-column:2/4;color:var(--faint);padding:8px 6px}
.controls{display:flex;gap:2px;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:8px;margin-top:auto}
.controls .grp{display:flex;gap:2px}
.controls button{padding:6px 8px;border-radius:5px;color:var(--muted);font-size:15px}
.controls button:hover{background:var(--panel2);color:var(--text)}
.controls button[aria-pressed="true"]{color:var(--accent);background:var(--panel2)}
/* bot annotations (B6): move-list badge, current move's key/values, per-game graph of one numeric key */
.movelist .m .ann{font:600 10px var(--mono);font-style:normal;color:var(--muted);background:var(--panel3);border-radius:3px;padding:0 4px;margin-left:5px;vertical-align:1px}
.movelist .m.cur .ann{background:var(--panel2);color:var(--text)}
.movelist .m .fx{font:600 10px var(--mono);font-style:normal;color:#111;background:#ffd400;border-radius:3px;padding:0 4px;margin-left:5px;vertical-align:1px}
.annots{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;background:var(--panel2);padding:6px 10px;border-radius:5px;font-size:12px}
.annots .who{color:var(--muted);font-weight:700;margin-right:2px}
.annots .kv{font:12px var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.annots .kv b{color:var(--muted);font-weight:600}
.annots .kv.g b{color:var(--accent)}
/* per-side views toggle (B2b) */
.viewsel{display:flex;flex-wrap:wrap;gap:4px;align-items:center;background:var(--panel2);padding:6px 8px;border-radius:5px;font-size:12px}
.viewsel button{padding:4px 8px;border-radius:5px;font-weight:600;background:var(--panel3)}
.viewsel button[aria-pressed="true"]{background:var(--fake);color:#fff}
.viewsel .note{flex-basis:100%}
.movelist .m.viewed>span:first-child{text-decoration:underline dotted var(--fake);text-underline-offset:3px}
.anngraph{background:var(--panel2);border-radius:5px;padding:6px 8px 4px;cursor:pointer;display:grid;gap:3px}
.anngraph .gh{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:var(--muted);min-width:0}
.anngraph .gh>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.anngraph .gh b{color:var(--text)}
.anngraph .lg i{display:inline-block;width:10px;height:2px;vertical-align:3px;margin:0 3px 0 6px}
.anngraph .lg i.w,.anngraph path.w{background:var(--accent);stroke:var(--accent)}
.anngraph .lg i.b,.anngraph path.b{background:var(--warn);stroke:var(--warn)}
.anngraph svg{width:100%;height:56px;display:block}
.anngraph path{fill:none;stroke-width:1.6}
.anngraph line.cur{stroke:var(--faint);stroke-width:1;stroke-dasharray:2 2}
.offer{background:var(--panel2);border-radius:6px;padding:8px 10px;display:flex;gap:8px;align-items:center;font-size:13px}
.offer .sbtn{margin-left:auto}

/* time control fields; the seat menu's bot rows (board.css positions the menu) */
.ng-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}
.seg{display:flex;background:var(--panel2);border-radius:6px;padding:3px;gap:3px}
.seg button{flex:1;padding:6px;border-radius:4px;font-weight:600;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--panel3);color:var(--text)}
.ng h3{font-size:13px;margin-top:6px}
.botlist{display:grid;gap:4px}
.bot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:center;border-radius:6px}
.bot:hover{background:var(--panel2)}
.bot .body{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 8px;text-align:left;width:100%;border-radius:6px;cursor:default}
.bot .av{width:36px;height:36px;border-radius:5px;background:var(--panel3);display:grid;place-items:center;font-size:22px;overflow:hidden}
.bot .av.me{background:#c95ad6}
.bot .av svg{width:28px;height:28px}
.bot .nm{font-weight:700;font-size:13px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.bot .ds{color:var(--muted);font-size:11px;line-height:1.3}
.bot .el{font:600 12px var(--mono);color:var(--muted)}
.bot .badge{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:99px;background:var(--accent);color:var(--accent-ink);margin-right:8px;white-space:nowrap}
.bot .badge.top{background:var(--panel3);color:var(--text)}

/* games browser */
.gbar{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.gbar .sbtn{padding:6px 10px}
.gempty-note{margin:4px 2px}
.gbody{display:grid;gap:10px;min-width:0}
.gbody>*{min-width:0}
.gdetail{display:grid;gap:5px;background:var(--panel2);border-radius:6px;padding:8px 10px;font-size:12.5px;box-shadow:inset 3px 0 0 var(--accent)}
.gdetail .facts{display:flex;flex-wrap:wrap;gap:4px}
.gdetail .facts span{background:var(--panel3);border-radius:4px;padding:1px 6px;font-size:11.5px;font-weight:600}
.gdetail .err{color:var(--loss);font-size:11.5px}
.gh{display:grid;gap:4px}
.gh b{font-size:14px}
.gfilters{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.gfilters select{font:inherit;background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:5px;padding:4px 6px;font-size:12px}
.glist{display:grid;gap:3px}
.g{display:grid;grid-template-columns:44px 1fr auto;gap:8px;align-items:center;padding:6px 8px;border-radius:6px;text-align:left;width:100%;font-size:12.5px}
.g:hover{background:var(--panel2)}
.g.cur{background:var(--panel2);box-shadow:inset 0 0 0 2px var(--accent)}
.g .res{font-weight:800;font-size:12px;padding:2px 0;border-radius:4px;text-align:center;color:#111}
.g .res.w{background:var(--win)}.g .res.b{background:var(--loss)}.g .res.d{background:var(--draw)}
.g .sum{color:var(--muted);font-size:11px}
.g .pl{font:600 11px var(--sans);color:var(--faint);white-space:nowrap}
.g .up{font-size:10px;color:var(--warn);font-weight:700;margin-left:6px}
.gempty{color:var(--faint);font-size:12px;padding:10px 4px}
.cfg-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}

.movelist.locked .m{cursor:default;pointer-events:none}
.controls select{font:inherit;font-size:11px;background:var(--panel2);color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:3px 4px}
/* B8 rewinds (their own row: ⟲k and the reason) and B5 shots (K*e5) in the move list */
.movelist .n.rw{color:#8a7cff;font-weight:700}
.movelist .m.rewind{grid-column:2/4;color:#8a7cff;font-style:italic}
.movelist .m.rewind .why{font:500 11px var(--sans);font-style:normal;color:var(--muted);margin-left:8px}
.movelist .m.fire>span:first-child{color:#ff5a1f}
/* Play as Looper: the rewind is the ruleset's whole point, so it leads the row in the accent colour */
.actions #rewindbtn{background:#7c4dff;border-color:#7c4dff;color:#fff;font-weight:600}
.actions #rewindbtn:hover:not(:disabled){background:#9270ff}
.actions #rewindbtn:disabled{background:var(--panel2);border-color:#7c4dff;color:var(--muted);opacity:.8}
/* position editor: the ✎ Edit tab is a toggle (accent while on; "Done" leaves); the tools row and seat options make room */
.ptabs .edtoggle.on{color:var(--accent-ink);background:var(--accent);box-shadow:none}
.ptabs .edtoggle.on .ic{filter:none}
.ptabs .edtoggle:not(.on):hover,.ptabs button:not([aria-selected="true"]):hover{color:var(--text);background:var(--panel2)}
.panel.editing .seatopts{display:none}
.actions #editbtn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}
.editor{display:grid;gap:12px;min-width:0}
.editor .lbl{display:block;margin-bottom:5px}
.ed-hint{text-transform:none;letter-spacing:0;color:var(--faint)}
.ed-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.ed-brushes,.ed-quick,.ed-row,.ed-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ed-quick .sbtn,.ed-row .sbtn{padding:6px 10px}
.editor .pk{border-radius:6px;display:grid;place-items:center;position:relative;background:var(--panel2);min-width:0;padding:0}
.editor .pk:hover{background:var(--panel3)}
.editor .pk[aria-pressed="true"]{outline:2px solid var(--accent);outline-offset:-2px;background:color-mix(in srgb,var(--accent) 22%,var(--panel2))}
.editor .pk.tool{display:inline-flex;gap:6px;padding:6px 10px;font-size:16px;line-height:1}
.editor .pk.tool span{font-size:12px;font-weight:600}
.palette{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;max-width:392px}
.palette .pk{aspect-ratio:1}
.palette .pk svg{width:84%;height:84%;display:block;pointer-events:none}
.palette .pk .ltr{position:absolute;right:2px;bottom:1px;font:800 9px/1 var(--sans);color:var(--muted);pointer-events:none}
.ed-opts{display:flex;gap:12px 20px;flex-wrap:wrap}
.edseg,.edcastle{display:flex;gap:4px;flex-wrap:nowrap}
.edseg label,.edcastle label{position:relative;cursor:pointer}
.edseg input,.edcastle input{position:absolute;opacity:0;width:0;height:0}
.edseg span,.edcastle span{display:inline-block;padding:5px 10px;border-radius:5px;background:var(--panel2);font-size:12px;font-weight:700;color:var(--muted);min-width:34px;text-align:center}
.edcastle span{font-family:var(--mono)}
.edseg input:checked+span,.edcastle input:checked+span{background:var(--accent);color:var(--accent-ink)}
.edseg input:focus-visible+span,.edcastle input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.editor textarea{display:block;width:100%;font:12px/1.35 var(--mono);background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:5px;padding:6px 8px;resize:vertical;min-height:44px;margin-bottom:6px;word-break:break-all}
.ed-actions{border-top:1px solid var(--line);padding-top:12px}
.ed-actions .sbtn{padding:7px 12px;font-size:13px}
.ed-msg{margin:0;min-height:1.2em;font-size:12.5px;font-weight:600;color:var(--loss)}
.ed-msg:empty{display:none}
/* ⚙ Config tab: bot strength in your games (strength.mjs, config.mjs), time control, picking players, pieces */
.cfgtab{gap:12px}
.cfgsec{display:grid;gap:8px;background:var(--panel2);border-radius:6px;padding:10px 12px;font-size:12px}
.cfgsec h3{margin:0;font-size:13px;font-weight:700;display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}
.cfgsec h3 .note{font-weight:500;margin-left:auto}
.cfgsec .note{margin:0;color:var(--muted);font-size:11.5px;line-height:1.4}
.cfgsec .timectl{background:none;padding:0}
.cfgsec .seg{background:var(--panel3);max-width:260px}
.cfgsec .seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.cfgrow{display:flex;gap:10px 14px;flex-wrap:wrap;align-items:center}
.strcap{display:grid;grid-template-columns:minmax(0,1fr) 76px;gap:10px;align-items:center}
.strcap input[type=range]{width:100%;accent-color:var(--accent)}
.strcap input[type=number],.stradd input[type=number]{width:100%;font:600 13px var(--sans);font-variant-numeric:tabular-nums;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:5px;padding:4px 6px}
.strcap.off{opacity:.45}
.strscale{display:flex;justify-content:space-between;gap:6px;color:var(--faint);font-size:10.5px;margin-top:-4px;margin-right:86px}
.strscale #str-anchors{color:var(--muted);text-align:center}
.strover{display:grid;gap:6px;border-top:1px solid var(--line);padding-top:8px}
.strlist{display:grid;gap:4px}
.strlist:empty{display:none}
.strrow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;background:var(--panel3);border-radius:5px;padding:4px 6px 4px 8px}
.strrow .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.strrow b{font-variant-numeric:tabular-nums}
.strrow button{color:var(--muted);padding:0 4px;font-size:14px}
.strrow button:hover{color:var(--loss)}
.stradd{display:grid;grid-template-columns:minmax(0,1fr) 76px auto;gap:6px;align-items:center}
.stradd select{min-width:0;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:5px;padding:4px 6px;font-size:12px}
/* the seat card's cap: "Stockfish (≤ 800)" */
.card .cap{color:#7fc7ff;font-weight:700;cursor:help}