:root {
  color-scheme: dark;
  font-family: Arial, Helvetica, sans-serif;
  --bg: #0d1115; --panel: #151b21; --line: #2a343e; --text: #e8edf2; --muted: #91a0ad; --accent: #d8ad58;
  --played: #e8a33d; --better: #4caf7d; --engine: #5b9bd5; --masters: #b58ee0; --neutral: #9aa6b2;
  --tabbar: #0f1419; --tab-on: #151b21;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); display: flex; flex-direction: column; overflow: hidden; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }

/* ---- top bar and menus ------------------------------------------------- */
.bar { flex: none; display: flex; align-items: center; gap: 16px; padding: 8px 14px; border-bottom: 1px solid var(--line); background: #0b0f13; flex-wrap: wrap; }
.brand { font-weight: 800; letter-spacing: -.03em; font-size: 1.1rem; }
.pageLink { color: var(--muted); text-decoration: none; font-size: .9rem; padding: 6px 10px; border: 1px solid transparent; border-radius: 6px; }
.pageLink:hover { color: var(--text); background: #1a222b; border-color: var(--line); }
.menubar { display: flex; gap: 2px; }
.menu { position: relative; }
.menuBtn { background: transparent; color: var(--text); border: 1px solid transparent; padding: 6px 10px; font-weight: 500; border-radius: 6px; }
.menuBtn:hover, .menuBtn[aria-expanded="true"] { background: #1a222b; border-color: var(--line); }
.menuList[hidden] { display: none; }
.menuList { position: absolute; top: 100%; left: 0; z-index: 1000; min-width: 220px; margin-top: 4px; padding: 6px; background: #161d24; border: 1px solid #35424d; border-radius: 8px; box-shadow: 0 12px 30px rgba(0,0,0,.5); display: flex; flex-direction: column; }
.menuItem { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: transparent; color: var(--text); border: 0; padding: 7px 10px; border-radius: 6px; font-weight: 500; }
.menuItem:hover { background: #24303b; }
.menuItem .check { display: inline-block; width: 1em; color: var(--accent); }
.menuSep { height: 1px; background: var(--line); margin: 5px 4px; }
.account { display: flex; gap: 8px; }
.account-status { color: var(--muted); font-size: .9rem; flex: 1; min-width: 220px; }
.account-status b { color: var(--text); }

input, button { font: inherit; border-radius: 10px; border: 1px solid #35424d; padding: 8px 12px; }
input { background: #0e1419; color: #eef4f8; }
button { background: var(--accent); color: #17130a; border-color: var(--accent); font-weight: 700; cursor: pointer; }
button.ghost { background: transparent; color: var(--text); border-color: #35424d; }
button.ghost:hover { border-color: var(--accent); }
button:disabled { opacity: .5; cursor: wait; }

/* ---- dock ----------------------------------------------------------------- */
.dock { flex: 1; min-height: 0; position: relative; overflow: hidden; padding: 6px; display: flex; }
.dock > .dock-split, .dock > .dock-leaf { flex: 1; min-width: 0; min-height: 0; }
.dock-split { display: flex; min-width: 0; min-height: 0; }
.dock-split.dir-row { flex-direction: row; }
.dock-split.dir-col { flex-direction: column; }
.dock-split > .dock-split, .dock-split > .dock-leaf { min-width: 0; min-height: 0; }
.dock-splitter { flex: none; background: transparent; position: relative; z-index: 2; touch-action: none; }
.dock-splitter.dir-row { width: 6px; cursor: col-resize; margin: 0 -1px; }
.dock-splitter.dir-col { height: 6px; cursor: row-resize; margin: -1px 0; }
.dock-splitter::after { content: ''; position: absolute; inset: 0; border-radius: 3px; background: transparent; transition: background .12s; }
.dock-splitter:hover::after, body.dock-resizing-row .dock-splitter.dir-row::after, body.dock-resizing-col .dock-splitter.dir-col::after { background: var(--accent); opacity: .6; }
body.dock-resizing-row, body.dock-resizing-row * { cursor: col-resize !important; user-select: none; }
body.dock-resizing-col, body.dock-resizing-col * { cursor: row-resize !important; user-select: none; }
body.dock-dragging, body.dock-dragging * { cursor: grabbing !important; user-select: none; }

.dock-leaf, .dock-float { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; min-width: 0; min-height: 0; }
.dock-float { position: absolute; resize: both; box-shadow: 0 16px 40px rgba(0,0,0,.55); min-width: 220px; min-height: 140px; }
.dock-tabs { flex: none; display: flex; align-items: stretch; background: var(--tabbar); border-bottom: 1px solid var(--line); user-select: none; overflow: hidden; }
.dock-float > .dock-tabs { cursor: move; }
.dock-tab { display: flex; align-items: center; gap: 6px; padding: 5px 6px 5px 12px; font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); border-right: 1px solid var(--line); cursor: grab; white-space: nowrap; touch-action: none; }
.dock-tab:hover { color: var(--text); }
.dock-tab.on { color: var(--text); background: var(--tab-on); box-shadow: inset 0 2px 0 var(--accent); }
.dock-tabs:has(.dock-tab:only-of-type) .dock-tab { border-right: 0; }
.dock-close, .dock-tool { background: transparent; color: var(--muted); border: 0; border-radius: 4px; padding: 0 5px; line-height: 1.1; font-size: 1rem; font-weight: 400; cursor: pointer; }
.dock-close:hover, .dock-tool:hover { color: var(--text); background: #2a3540; }
.dock-tools { margin-left: auto; display: flex; align-items: center; padding: 0 4px; }
.dock-tool { font-size: .85rem; }
.dock-body { flex: 1; min-height: 0; overflow: auto; position: relative; }
.dock-target[hidden] { display: none; }
.dock-target { position: absolute; z-index: 50; pointer-events: none; background: rgba(216, 173, 88, .18); border: 2px solid var(--accent); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--accent); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .8rem; }
.dock-ghost { position: fixed; z-index: 2000; pointer-events: none; background: #1d2731; color: var(--text); border: 1px solid var(--accent); border-radius: 8px; padding: 6px 12px; font-size: .85rem; font-weight: 600; box-shadow: 0 8px 20px rgba(0,0,0,.5); }
.dock-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.dock-stacked { overflow: auto; gap: 8px; }
.dock-stacked > .dock-leaf { flex: none; height: 75vh; }

/* ---- panels -------------------------------------------------------------- */
.panel { padding: 12px; min-height: 100%; }
.panel[hidden] { display: none !important; }
.panel.fill { height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.boardPanel { padding: 10px; }
.boardWrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.boardWrap { container-type: size; }
.board { width: min(100cqw, 100cqh); }
.controls { flex: none; display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.controls button { padding: 6px 10px; font-size: .9rem; }
.legend { flex: none; display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: .78rem; color: var(--muted); }
.legend i { display: inline-block; width: 18px; height: 4px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.c-played { background: var(--played); } .c-better { background: var(--better); } .c-engine { background: var(--engine); } .c-masters { background: var(--masters); }

.paneHead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.openingName { font-size: 1.1rem; font-weight: 700; margin: 2px 0; }
.findingHere { margin: 8px 0; padding: 8px 10px; border-left: 3px solid var(--played); font-size: .9rem; }
.findingHere button { margin-left: 8px; padding: 3px 8px; font-size: .8rem; }
.tableWrap { overflow-x: auto; margin-top: 8px; }
.moveTable { table-layout: fixed; }
.moveTable td, .moveTable th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 5px 6px; }
.moveTable th:first-child, .moveTable td:first-child { width: 40%; }
.moveTable tbody tr { cursor: pointer; }
.moveTable tbody tr:hover { background: #1c2630; }
.moveTable .san { font-weight: 700; }
.moveTable .sub { color: var(--muted); font-size: .78rem; }
.moveTable .pbar { display: block; height: 3px; border-radius: 2px; background: var(--engine); margin-top: 3px; opacity: .7; }
.moveTable td.mine { color: var(--played); }
.moveTable td.empty { color: #4b5866; }
.notes { margin-top: 8px; color: var(--text); font-size: .95rem; line-height: 1.6; white-space: pre-wrap; }
.notes.empty { color: var(--muted); font-style: italic; }
.moves.line { min-height: 1.8em; }

.caption { margin-top: 10px; line-height: 1.55; font-size: 1rem; }
.caption h2 { margin: 0 0 4px; font-size: 1.15rem; }
.caption .meta { color: var(--muted); font-size: .85rem; margin: 0 0 8px; }
.moves { color: var(--muted); font-size: .9rem; margin-top: 6px; font-family: Arial, Helvetica, sans-serif; line-height: 1.8; }
.moves .mv { cursor: pointer; border-radius: 4px; padding: 0 3px; }
.moves .mv:hover { background: #1f2a33; }
.moves .on { color: var(--text); font-weight: 700; background: #243240; }
.moves .bad { color: var(--played); }
.moves.path { margin-top: 2px; }
.slip { margin-top: 8px; padding: 8px 10px; border-left: 3px solid var(--played); }
table { border-collapse: collapse; margin-top: 10px; font-size: .9rem; width: 100%; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; }
caption { text-align: left; color: var(--muted); font-size: .85rem; padding-bottom: 4px; }
.gameref { margin-top: 8px; font-size: .9rem; color: var(--muted); }
.gameref a, .panel a { color: var(--accent); }
.prompt { margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--accent); border-radius: 10px; }

.status { color: #92c79c; font-size: .92rem; min-height: 22px; margin: 0 0 10px; overflow-wrap: anywhere; }
.status.error { color: #ef8b8b; }
.row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.explorer .row { margin-top: 10px; }

.findings { display: flex; flex-direction: column; gap: 8px; }
.card { display: block; width: 100%; text-align: left; background: #10161c; border: 1px solid var(--line); color: var(--text); border-radius: 12px; padding: 11px 13px; cursor: pointer; font-weight: 500; }
.card:hover { border-color: var(--accent); }
.card .k { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.card .t { font-size: 1rem; margin: 2px 0; }
.card .d { color: var(--muted); font-size: .84rem; }
.card .gap { color: var(--played); } .card .ok { color: var(--better); }
.group { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; margin: 10px 0 2px; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.chips button { padding: 6px 10px; font-size: .8rem; border-radius: 999px; }
.chips button.on { background: var(--text); color: #0d1115; border-color: var(--text); }
.questions button { border-color: var(--accent); color: var(--accent); }

.chat { flex: 1; min-height: 0; overflow: auto; padding: 6px; display: flex; flex-direction: column; gap: 12px; }
.message { max-width: 92%; padding: 12px 14px; border-radius: 14px; line-height: 1.5; }
.message.user { align-self: flex-end; background: #253649; white-space: pre-wrap; }
.message.assistant { align-self: flex-start; background: #20272e; border: 1px solid #303b44; }
.message.assistant p { margin: 0 0 .6em; } .message.assistant p:last-child { margin: 0; }
.message.assistant h3 { margin: .6em 0 .3em; font-size: 1rem; }
.message.assistant ul, .message.assistant ol { margin: .2em 0 .6em 1.2em; padding: 0; }
.message.assistant pre { white-space: pre-wrap; margin: 0; color: var(--muted); font-size: .85rem; }
.evidence { font-size: .78rem; color: #8796a3; margin-top: 8px; }
.ask { flex: none; display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 10px; }
.ask + .status { flex: none; margin: 6px 0 0; min-height: 0; }

/* ---- opening jump box ------------------------------------------------------ */
.jump { position: relative; flex: 1 1 260px; max-width: 420px; }
.jump input { width: 100%; }
.results { position: absolute; top: 100%; left: 0; right: 0; z-index: 1000; margin-top: 4px; max-height: 60vh; overflow: auto; background: #161d24; border: 1px solid #35424d; border-radius: 8px; box-shadow: 0 12px 30px rgba(0,0,0,.5); padding: 4px; }
.results[hidden] { display: none; }
.result { display: grid; grid-template-columns: 3.2em 1fr; gap: 8px; align-items: baseline; width: 100%; text-align: left; background: transparent; color: var(--text); border: 0; padding: 6px 8px; border-radius: 6px; font-weight: 500; cursor: pointer; }
.result:hover, .result.on { background: #24303b; }
.result .eco { color: var(--accent); font-weight: 700; font-size: .8rem; }
.result .name { font-size: .9rem; }
.result .pgn { color: var(--muted); font-size: .76rem; font-family: Arial, Helvetica, sans-serif; grid-column: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.results .none { color: var(--muted); padding: 8px 10px; font-size: .85rem; }

/* ---- board menu ------------------------------------------------------------- */
.boardMenu { min-width: 300px; }
.menuTitle { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; padding: 6px 10px 2px; }
.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px 6px 6px; }
.swatch { display: flex; flex-direction: column; align-items: stretch; gap: 3px; background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 4px; cursor: pointer; }
.swatch:hover { background: #24303b; }
.swatch.on { border-color: var(--accent); background: #24303b; }
.swatch i { display: block; height: 10px; border-radius: 2px; }
.swatch i:first-child { border-radius: 3px 3px 0 0; }
.swatch i + i { border-radius: 0 0 3px 3px; margin-top: -3px; }
.swatch span { color: var(--text); font-size: .72rem; font-weight: 500; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- lesson panel ------------------------------------------------------------- */
.lessonPanel { padding: 12px; }
.lessonEmpty { padding: 8px 0; line-height: 1.5; }
.libraryHead { margin: 14px 0 6px; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.library { display: flex; flex-direction: column; gap: 6px; }
.library .libraryItem { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 8px 10px; }
.library .kind { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.library .title { font-weight: 600; }
.jumpNote { color: #f4cc85; font-size: .85rem; margin: 4px 0 8px; }
.libraryStatus { line-height: 1.5; }
.libraryStatus.error, .lessonNotice.error { color: #f0a0a0; }
.lessonNotice { font-size: .85rem; margin: 4px 0 8px; padding: 6px 8px; border-left: 3px solid #d6a450; background: #1c2129; }
.lessonView { display: flex; flex-direction: column; min-height: 0; height: 100%; gap: 8px; }
.lessonHead { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.lessonTitle { font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
.lessonTools { display: flex; gap: 6px; flex: none; }
.lessonTools button.on { border-color: var(--accent); color: var(--accent); }
.lessonNav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lessonText { flex: 1; min-height: 120px; overflow: auto; padding: 12px 14px; background: #10161c; border: 1px solid var(--line); border-radius: 12px; }
.lessonText h3 { margin: 0 0 6px; font-size: 1rem; color: var(--accent); }
.lessonText .say { margin: 0 0 10px; font-size: 1.02rem; line-height: 1.65; }
.lessonText .gameref { margin: 0 0 8px; }
.lessonText table { margin-top: 6px; }
.chips.steps { max-height: 92px; overflow: auto; }
.chips.steps button { font-size: .74rem; padding: 4px 8px; }
/* Contents entries carry their measured duration and show the keyboard where
   it is; the active chapter is also marked with aria-current="step". */
.stepItem .stepTime { margin-left: 6px; opacity: .65; font-variant-numeric: tabular-nums; }
.stepItem.on .stepTime { opacity: .8; }
.chips button:focus-visible, .lessonProgress:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.lessonLinks { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 6px 0 2px; }
.lessonLinks button { padding: 4px 9px; font-size: .8rem; border-color: var(--accent); color: var(--accent); }

.chart { margin: 8px 0 4px; }
.chartTitle { color: var(--muted); font-size: .85rem; margin-bottom: 4px; }
.chartLegend { display: flex; gap: 12px; flex-wrap: wrap; font-size: .78rem; color: var(--muted); margin-bottom: 6px; }
.chartLegend i { display: inline-block; width: 12px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.chartNote { color: var(--muted); font-size: .72rem; margin-top: 4px; }
.chartRows { display: flex; flex-direction: column; gap: 5px; }
.chartRow { display: grid; grid-template-columns: 3.6em 1fr; gap: 8px; align-items: center; }
.chartRow .lbl { color: var(--muted); font-size: .8rem; text-align: right; }
.chartRow .bars { display: flex; flex-direction: column; gap: 2px; }
.chartRow .bars i { display: block; height: 6px; border-radius: 3px; min-width: 2px; opacity: .9; }

/* ---- presentation transport ------------------------------------------------ */
.lessonTransport { display: flex; align-items: center; gap: 6px; }
.lessonTransport .play { padding: 7px 16px; font-weight: 800; }
.lessonTransport .play.on { background: #2b3a4a; color: var(--text); border-color: var(--accent); }
.lessonTransport select { background: transparent; color: var(--text); border: 1px solid #35424d; border-radius: 10px; padding: 6px 8px; font: inherit; font-size: .8rem; }
.lessonProgress { height: 6px; background: #1c2630; border-radius: 3px; overflow: hidden; cursor: pointer; }
.lessonProgress:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.lessonBar { height: 100%; width: 0; background: var(--accent); transition: width .12s linear; }
.lessonLabel { margin-top: -2px; }
.lessonText .transcript { margin: 4px 0 10px; }
.lessonText .cue { margin: 0 0 10px; font-size: 1.05rem; line-height: 1.7; }
.lessonText .cue .w { color: #4f5d6b; transition: color .15s; }
.lessonText .cue .w.on { color: var(--text); }
.lessonText .cue.current .w.on:last-of-type { color: var(--text); }
.lessonText .cue:not(.current) .w.on { color: #b7c2cc; }

.moves .mv.skipped { opacity: .45; }
.volume { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); white-space: nowrap; }
.volume input[type=range] { width: 90px; accent-color: #e8a33d; }
.volume output { min-width: 3.2em; font-variant-numeric: tabular-nums; }