/* u1chess alap-stiluslap (web spec 10.1): tervezesi tokenek + komponensek, mobil-elso.
   Alap = keskeny kijelzo; a media query csak szelesit. */
:root {
  --fg: #1b1b1b; --bg: #fff; --muted: #666; --line: #ddd; --accent: #2a5db0;
  --ok: #2e7d32; --warn: #b26a00; --bad: #b00020;
  --surface: #f6f6f6; --tap: 2.5rem;           /* minimalis erintofelulet */
  --board-max: 36rem;
}
@media (prefers-color-scheme: dark) {
  :root { --fg: #e8e8e8; --bg: #121212; --muted: #999; --line: #333; --accent: #7aa7ff; --surface: #1e1e1e; }
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.45 system-ui, sans-serif; color: var(--fg); background: var(--bg); }
header { display: flex; gap: .6rem 1rem; align-items: center; padding: .6rem 1rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
header .brand { font-weight: 700; text-decoration: none; color: var(--fg); }
header nav { display: flex; flex-wrap: wrap; gap: .2rem .8rem; }
header nav a { min-height: var(--tap); display: inline-flex; align-items: center; }
header form { margin-left: auto; display: flex; gap: .4rem; align-items: center; }
main { max-width: 64rem; margin: 0 auto; padding: 1rem; }
footer { max-width: 64rem; margin: 2rem auto 0; padding: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .85em; }
a { color: var(--accent); }
h1 { font-size: 1.4rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.muted { color: var(--muted); }
.badge { display: inline-block; padding: .05rem .5rem; border-radius: .6rem; border: 1px solid var(--line); font-size: .85em; }
.badge.queued { border-color: var(--accent); } .badge.done { border-color: var(--ok); }
.badge.cancelled, .badge.failed { border-color: var(--bad); }
.badge.running, .badge.assigned { border-color: var(--warn); } .badge.aborted { border-color: var(--bad); }
.badge.online { border-color: var(--ok); } .badge.draining, .badge.maintenance, .badge.pending { border-color: var(--warn); } .badge.offline { border-color: var(--bad); }
.messages { padding: 0; } .messages li { padding: .5rem .8rem; border: 1px solid var(--line); border-radius: .4rem; margin: .3rem 0; list-style: none; }
form.stack p { margin: .5rem 0; } form.stack label { display: block; font-weight: 600; }
form.stack input:not([type=checkbox]):not([type=radio]), form.stack select, form.stack textarea { width: 100%; max-width: 40rem; padding: .45rem; font: inherit; }
.errorlist { color: var(--bad); margin: .2rem 0; padding-left: 1rem; }
button, .btn { min-height: var(--tap); padding: .4rem .9rem; border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: .3rem; cursor: pointer; text-decoration: none; font: inherit; display: inline-flex; align-items: center; justify-content: center; }
.btn.secondary, button.secondary { background: transparent; color: var(--accent); }
.btn.small, button.small { min-height: 2rem; padding: .2rem .6rem; font-size: .9em; }
code, pre { font-family: ui-monospace, monospace; font-size: .9em; }
details pre { white-space: pre-wrap; }
.ok { color: var(--ok); } .warn { color: var(--warn); }
code.fen { font-size: .8em; word-break: break-all; }
svg.graph { display: block; max-width: 40rem; margin: .5rem 0; }
svg.graph .axis { stroke: var(--line); stroke-width: 1; } svg.graph .eval { fill: none; stroke: var(--accent); stroke-width: 2; }
.count { background: var(--accent); color: #fff; border-radius: 1rem; padding: 0 .45rem; font-size: .8em; }
.choices { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; } .choices label { font-weight: 400; display: inline-flex; align-items: center; gap: .3rem; min-height: var(--tap); }
.hidden { display: none !important; }

/* --- tabla + jatszmalap + lepesfa elrendezes (web spec 10.2): keskenyen egymas alatt,
       szelesen tabla | jatszmalap, alattuk a fa teljes szelessegben --- */
.analysis-layout { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.board-col { max-width: var(--board-max); width: 100%; margin: 0 auto; }
.board-controls { display: flex; gap: .4rem; justify-content: center; margin: .5rem 0; flex-wrap: wrap; }
.board-controls button { min-width: var(--tap); }
.eval-bar { text-align: center; font-weight: 700; min-height: 1.5rem; }
.sheet { position: relative; max-height: 16rem; overflow-y: auto; border: 1px solid var(--line); border-radius: .4rem; background: var(--surface); }
@media (min-width: 50rem) {
  .analysis-layout { grid-template-columns: minmax(0, var(--board-max)) minmax(14rem, 1fr); align-items: start; }
  .board-col { margin: 0; }
  .sheet { max-height: calc(var(--board-max) + 2rem); }
  .tree { grid-column: 1 / -1; }
}

/* --- lepes-gomb: a fa es a jatszmalap kozos eleme --- */
.mv { all: unset; cursor: pointer; padding: .3rem .35rem; border-radius: .3rem; min-height: var(--tap); display: inline-flex; align-items: center; gap: .2rem; box-sizing: border-box; }
.mv:hover { background: var(--line); }
.mv.current { background: var(--accent); color: var(--bg); }  /* sotet modban sotet betu a vilagos kieken */
.mv.current .ev { color: inherit; border-color: currentColor; }
.mv .ev { font-size: .75em; color: var(--muted); padding: 0 .25rem; border: 1px solid var(--line); border-radius: .5rem; }
.mv .flag-best { color: var(--ok); } .mv .flag-not-best { color: var(--warn); }
.mv[data-alts]::after { content: attr(data-alts); font-size: .65em; vertical-align: super; color: var(--muted); align-self: flex-start; } /* ennyi alternativa a faban */

/* --- jatszmalap (web spec 10.2) --- */
.score { width: 100%; border-collapse: collapse; }
.score td { padding: 0 .15rem; border: 0; vertical-align: middle; width: 46%; }
.score td.num { width: 8%; color: var(--muted); text-align: right; padding-right: .3rem; font-size: .9em; white-space: nowrap; }
.score .mv { width: 100%; }

/* --- lepesfa (fajlkezelo-szeru; web spec 10.2) --- */
.tree { font-size: 1rem; line-height: 1.3; }
.tree .row { display: flex; align-items: flex-start; gap: .1rem; min-height: var(--tap); }
.tree .line { flex: 1; min-width: 0; }
.tree .ply { display: inline-flex; align-items: center; white-space: nowrap; }  /* lepesszam + lepes egy egyseg */
.tree .num { color: var(--muted); font-size: .9em; padding: 0 .1rem 0 .15rem; }
.tree .tg { all: unset; cursor: pointer; width: var(--tap); min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; color: var(--muted); flex: none; }
.tree .tg:hover { color: var(--fg); }
.tree .more { padding: 0 .3rem; font-size: .9em; }
.tree .comment { font-style: italic; color: var(--muted); padding: .1rem .3rem; }
.tree .kids { margin-left: .8rem; }
.tree .branch { --guide: var(--line); position: relative; }
.tree .kids > .branch { padding-left: 1rem; }
.tree .kids > .branch::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: 2px solid var(--guide); }   /* │ */
.tree .kids > .branch:last-child::before { bottom: auto; height: 1.25rem; }                                                              /* └ */
.tree .kids > .branch::after { content: ""; position: absolute; left: 0; top: 1.25rem; width: .9rem; border-top: 2px solid var(--guide); } /* ├ */
.tree .branch.d1 { --guide: var(--accent); } .tree .branch.d2 { --guide: var(--warn); } .tree .branch.d3 { --guide: var(--ok); }
.tree .branch.deep > .kids { margin-left: 0; }   /* 3 szint felett nem no a beljebbezes */

/* --- allasszerkeszto (web spec 10.1) --- */
.editor { display: grid; gap: .6rem; }
.palette { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center; }
.palette .tool { width: var(--tap); height: var(--tap); border: 1px solid var(--line); border-radius: .3rem; background: var(--sq-light); color: var(--sq-ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; } /* a tema vilagos mezoje: a babuk arra keszultek, sotet modban is latszanak */
.palette .tool.active { outline: 3px solid var(--accent); }
.palette .tool .pc { width: 2.2rem; height: 2.2rem; }
.editor-flags { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; }
.editor-flags label { display: inline-flex; align-items: center; gap: .3rem; font-weight: 400; min-height: var(--tap); }
.editor-status { min-height: 1.4rem; }