/* Admin page. Builds on the personal site's tokens in site.css. */

.admin-top { position: static; padding-bottom: 14px; }
.admin-bar { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.admin-bar .tagline { margin-bottom: 0; }
main.wrap { padding-top: 24px; padding-bottom: 56px; }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow);
}
.card + .card { margin-top: 16px; }
h2 { font-family: var(--serif); font-size: 22px; margin: 0 0 12px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.error { color: #c0392b; font-size: 14px; min-height: 1.2em; margin: 8px 0 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 15px var(--sans); color: var(--ink); text-decoration: none;
  background: transparent; border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 14px; cursor: pointer;
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.danger { color: #c0392b; }
.btn.danger:hover { border-color: #c0392b; }
.btn:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

input[type="text"], input[type="password"] {
  width: 100%; font: 16px var(--sans); color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
}

.login { max-width: 420px; margin: 40px auto; }
.login h1 { font-size: 28px; }
.field { display: grid; gap: 6px; margin: 16px 0; font-weight: 600; font-size: 14px; }

.dash { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 820px) { .dash { grid-template-columns: minmax(0, 1fr); } }

.create { display: grid; gap: 8px; margin-bottom: 14px; }
.room-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.room-list button {
  width: 100%; text-align: left; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px;
  background: transparent; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  font: inherit; color: var(--ink); cursor: pointer;
}
.room-list button:hover { border-color: var(--accent); }
.room-list button[aria-current="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.room-list .c { font: 700 18px ui-monospace, Menlo, Consolas, monospace; grid-row: span 2; align-self: center; }
.room-list .n { font-weight: 600; }
.room-list .m { font-size: 13px; color: var(--muted); }
.room-list .closed .c { text-decoration: line-through; color: var(--muted); }

.empty p { margin: 0; color: var(--muted); }

.room-head { display: grid; grid-template-columns: auto 1fr; gap: 10px 24px; align-items: center; }
@media (max-width: 640px) { .room-head { grid-template-columns: 1fr; } }
.eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 700; }
.code { font: 700 clamp(44px, 8vw, 64px) ui-monospace, Menlo, Consolas, monospace; letter-spacing: .12em; line-height: 1.05; }
.room-actions { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: flex-end; }
@media (max-width: 640px) { .room-actions { justify-content: flex-start; } }
.toggle { display: inline-flex; gap: 8px; align-items: center; min-height: 36px; font-size: 14px; color: var(--muted); cursor: pointer; }
.toggle input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.join { grid-column: 1 / -1; margin: 0; font-size: 14px; }
.join code { font-size: 14px; color: var(--ink); }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.tile { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.tile .v { font: 700 24px var(--sans); font-variant-numeric: tabular-nums; }
.tile .k { font-size: 13px; color: var(--muted); line-height: 1.3; }

.game-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: -4px 0 14px; border-bottom: 1px solid var(--line); }
.game-tabs button {
  background: none; border: 0; border-bottom: 3px solid transparent; padding: 8px 12px;
  font: 600 15px var(--sans); color: var(--muted); cursor: pointer;
}
.game-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
th, td { padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
th:nth-child(2), td:nth-child(2) { text-align: left; }
td:first-child { color: var(--muted); }
tr.top td { font-weight: 700; }
td.none { color: var(--muted); }

/* ------------------------------------------------------- learning panel */

/* Series colours: the validated categorical steps for each mode. */
.learn {
  --s-prior: #1baf7a; --s-likelihood: #2a78d6; --s-posterior: #eb6834;
  --s-class: #2a78d6; --s-cpu: #eb6834;
  --s-a: #2a78d6; --s-b: #eb6834; --s-c: #1baf7a; --s-d: #eda100;
  --heat-class: 235, 104, 52; --heat-cpu: 42, 120, 214;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .learn {
    --s-prior: #199e70; --s-likelihood: #3987e5; --s-posterior: #d95926;
    --s-class: #3987e5; --s-cpu: #d95926;
    --s-a: #3987e5; --s-b: #d95926; --s-c: #199e70; --s-d: #c98500;
    --heat-class: 217, 89, 38; --heat-cpu: 57, 135, 229;
  }
}
:root[data-theme="dark"] .learn {
  --s-prior: #199e70; --s-likelihood: #3987e5; --s-posterior: #d95926;
  --s-class: #3987e5; --s-cpu: #d95926;
  --s-a: #3987e5; --s-b: #d95926; --s-c: #199e70; --s-d: #c98500;
  --heat-class: 217, 89, 38; --heat-cpu: 57, 135, 229;
}

.learn h3 { font-size: 16px; margin: 22px 0 6px; }
.learn-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: flex-start; }
.learn-head p { margin: 0; max-width: 62ch; }
.player { display: flex; align-items: center; gap: 10px; }
.player input[type="range"] { width: 200px; height: 32px; accent-color: var(--accent); }
.player .mono { font: 600 13px ui-monospace, Menlo, Consolas, monospace; color: var(--muted); min-width: 9em; }
@media (max-width: 640px) { .player { width: 100%; } .player input[type="range"] { flex: 1; width: auto; } }

.learn-body { margin-top: 14px; }
.maps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 640px) { .maps { grid-template-columns: minmax(0, 1fr); } }
.maps figure { margin: 0; }
.maps figcaption { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.maps figcaption small { display: block; font-weight: 400; color: var(--muted); }
.heat { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 2px; max-width: 320px; }
.heat div { aspect-ratio: 1; border-radius: 3px; background: color-mix(in srgb, var(--ink) 5%, transparent); transition: background-color .3s ease; }
.ramp-key { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin-top: 6px; max-width: 320px; }
.ramp-key span.bar { flex: 1; height: 8px; border-radius: 4px; }

.big-number { font: 700 34px var(--sans); font-variant-numeric: tabular-nums; }

/* The shared line chart (linechart.js), in the site's colours. */
.bs-slice { position: relative; }
.bs-slice svg { display: block; width: 100%; height: auto; overflow: visible; }
.bs-slice .grid { stroke: var(--line); stroke-width: 1; }
.bs-slice .tick { fill: var(--muted); font: 11px ui-monospace, Menlo, Consolas, monospace; }
.bs-slice .tick.here { fill: var(--ink); font-weight: 700; }
.bs-slice .band { fill: color-mix(in srgb, var(--ink) 7%, transparent); }
.bs-slice .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.bs-slice .dot { stroke: var(--surface); stroke-width: 2; }
.bs-slice .cross { stroke: var(--muted); stroke-width: 1; }
.bs-tip {
  position: absolute; pointer-events: none; z-index: 3; white-space: nowrap;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 9px; font-size: 12px; line-height: 1.45; box-shadow: var(--shadow);
}
.bs-tip b { font-family: ui-monospace, Menlo, Consolas, monospace; }
.key { display: inline-block; width: 16px; height: 0; vertical-align: middle; margin-right: 6px; border-top: 2px solid; }
.key.prior { border-top: 2px dashed var(--s-prior); }
.key.likelihood { border-color: var(--s-likelihood); }
.key.posterior { border-color: var(--s-posterior); }
.key.class { border-color: var(--s-class); }
.key.cpu { border-color: var(--s-cpu); }
.key.a { border-color: var(--s-a); } .key.b { border-color: var(--s-b); }
.key.c { border-color: var(--s-c); } .key.d { border-color: var(--s-d); }
.curve-keys { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--muted); margin: 4px 0; }

.patterns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
@media (max-width: 760px) { .patterns { grid-template-columns: minmax(0, 1fr); } }
.patterns figure { margin: 0; min-width: 0; }
.patterns figcaption { font-weight: 600; font-size: 15px; margin: 10px 0 2px; }
.patterns figcaption small { display: block; font-weight: 400; color: var(--muted); font-size: 13px; }
.bs-slice .bar { transition: d .3s ease; }