/* Page chrome for demo.html. The board brings its own styles; this is only the
   scaffolding around it. Colors come from the --ui-* block in theme.css. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ui-bg);
  color: var(--ui-text);
  font: 0.875rem/1.5 var(--ui-font); /* 14px */
}

.bar {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.625rem 1.125rem;
  background: var(--ui-panel);
  border-bottom: 1px solid var(--ui-line);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand { font-weight: 700; letter-spacing: 0.14em; font-size: 0.8125rem; /* 13px */ }
.grow { flex: 1; }

.inline {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--ui-dim);
  cursor: pointer;
  user-select: none;
}

/* The whole layout is driven by --board-size. Flex-wrap rather than a grid so
   that when the board grows past what leaves room for the panel, the panel
   drops below it on its own — no breakpoint has to know the board's size. */
.layout {
  display: flex;
  flex-wrap: wrap;
  gap: 1.625rem;
  padding: 1.375rem;
  margin: 0 auto;
  max-width: 87.5rem;
  align-items: flex-start;
}

.boardcol {
  flex: 0 0 auto;
  /* min() so a board wider than the window still fits on screen. */
  width: min(var(--board-size), 100%);
}

.side {
  flex: 1 1 20rem;
  min-width: min(18.75rem, 100%);
}

/* ── resize grip ────────────────────────────────────────────────────────── */

.boardwrap { position: relative; }

/* The grip has to out-rank the board it overhangs. .cb-squares carries
   z-index: 1 and .boardwrap is positioned but sets no z-index of its own, so
   the two share a stacking context and the squares painted straight over the
   grip: elementsFromPoint at the grip's own centre returned .cb-square first,
   every pointerdown landed on the board, and no board in the app could
   actually be dragged to a new size. Above .cb-piece.cb-dragging (20) so a
   piece cannot cover it mid-drag either. */
.grip {
  position: absolute;
  z-index: 30;
  right: -0.3125rem;
  bottom: -0.3125rem;
  width: 1.25rem;
  height: 1.25rem;
  cursor: nwse-resize;
  border-radius: 0 0 var(--board-radius) 0;
  /* Two diagonal strokes — the conventional resize-corner hatching. */
  background:
    linear-gradient(135deg, transparent 45%, var(--ui-dim) 45%, var(--ui-dim) 55%, transparent 55%),
    linear-gradient(135deg, transparent 70%, var(--ui-dim) 70%, var(--ui-dim) 80%, transparent 80%);
  opacity: 0.55;
  touch-action: none;
}

.grip:focus-visible { opacity: 1; outline: none; }
@media (hover: hover) { .grip:hover { opacity: 1; outline: none; } }
.grip:focus-visible { box-shadow: 0 0 0 2px var(--ui-accent); }

/* While dragging the grip, stop the pointer selecting text or turning into an
   I-beam every time it crosses a label. */
body.cb-resizing { cursor: nwse-resize; user-select: none; }
body.cb-resizing * { cursor: nwse-resize !important; }

.controls {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.75rem;
}

.status {
  margin-top: 0.625rem;
  color: var(--ui-dim);
  font-variant-numeric: tabular-nums;
}

.ply {
  color: var(--ui-dim);
  font-family: var(--ui-mono);
  font-size: 0.75rem;
}

/* ── panels ─────────────────────────────────────────────────────────────── */

.panel {
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  padding: 0.875rem;
  margin-bottom: 0.875rem;
}

.panel h2 {
  margin: 0 0 0.625rem;
  font-size: max(0.6875rem, var(--text-min)); /* 11px */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ui-dim);
  font-weight: 700;
}

.row {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  margin-top: 0.5rem;
}

.row.wrap { flex-wrap: wrap; }

.hint {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--ui-dim);
  min-height: 1em;
}

.hint.err { color: var(--learn-wrong); }

/* ── controls ───────────────────────────────────────────────────────────── */

.btn {
  background: var(--ui-btn);
  color: var(--ui-text);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  padding: 0.375rem 0.6875rem;
  font: inherit;
  font-size: 0.8125rem; /* 13px */
  cursor: pointer;
}

@media (hover: hover) { .btn:hover { background: var(--ui-btn-hover); } }
.btn:active { transform: translateY(1px); }

.btn.primary {
  background: var(--ui-accent);
  color: var(--ui-accent-text);
  border-color: transparent;
  font-weight: 600;
}

@media (hover: hover) { .btn.primary:hover { filter: brightness(1.08); } }

textarea, input.sq, select {
  width: 100%;
  background: var(--ui-input-bg);
  color: var(--ui-text);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  padding: 0.5rem;
  font: 0.75rem/1.5 var(--ui-mono);
  resize: vertical;
}

input.sq { width: 3.25rem; text-align: center; text-transform: lowercase; }

select {
  width: auto;
  font-family: var(--ui-font);
  font-size: 0.8125rem; /* 13px */
  padding: 0.375rem 0.5rem;
}

textarea:focus, input:focus, select:focus {
  outline: 2px solid var(--ui-accent);
  outline-offset: -1px;
}

/* ── move list ──────────────────────────────────────────────────────────── */

.moves {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.1875rem;
  max-height: 13.75rem;
  overflow-y: auto;
}

.moves .empty { color: var(--ui-dim); font-size: 0.75rem; }

.mv {
  background: none;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  color: var(--ui-text);
  font: 0.8125rem/1 var(--ui-mono); /* 13px */
  padding: 0.3125rem 0.4375rem;
  cursor: pointer;
}

@media (hover: hover) { .mv:hover { background: var(--ui-btn); } }

.mv.on {
  background: var(--ui-accent);
  color: var(--ui-accent-text);
  font-weight: 700;
}

.mv .num { color: var(--ui-dim); margin-right: 0.25rem; }
.mv.on .num { color: var(--ui-accent-text); opacity: 0.7; }

/* ── toolbar tab link ───────────────────────────────────────────────────── */

.tab {
  color: var(--ui-dim);
  text-decoration: none;
  font-size: 0.8125rem; /* 13px */
  padding: 0.25rem 0.5625rem;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
}

@media (hover: hover) { .tab:hover { color: var(--ui-text); background: var(--ui-btn); } }

/* The controls row wraps rather than overflowing when the board is narrow. */
.controls { flex-wrap: wrap; }

/* ── opening name ───────────────────────────────────────────────────────── */

/* Sits under the status line. Empty when the position is not in the book, and
   an empty element must take no space, or the board jumps as you step. */
.opening {
  font-size: 0.8125rem; /* 13px */
  color: var(--ui-accent);
  margin-top: 2px;
  min-height: 0;
  line-height: 1.4;
}
.opening:empty { display: none; }

/* ── compact position panel ─────────────────────────────────────────────── */

/* FEN and PGN used to be two panels with five rows of textarea between them.
   They are one panel and two short boxes now — the board is the thing worth
   the space. */
.minilabel {
  display: block;
  font-size: max(0.6875rem, var(--text-min)); /* 11px */
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ui-dim);
  margin: 0.375rem 0 0.1875rem;
}

.minilabel .live {
  letter-spacing: 0;
  text-transform: none;
  color: var(--ui-accent);
  opacity: 0.75;
  font-size: max(0.625rem, var(--text-min)); /* 10px */
}

.side textarea { font-family: var(--ui-mono); font-size: 0.75rem; }

/* The database panel's move list. Same list as .moves, but each row carries a
   second, dimmer line saying which database contributed what — an aggregate
   share with no provenance is the thing this whole feature exists to replace. */
/* .dbmoves and .dbwhere were here — the move list the old Board tab drew for
   "what the databases say". Both panels are tables on the Build screen now
   (.postable in build.css) and no page has produced these since. */

/* "due" in your own database panel — the one number on that list that is a
   call to action rather than a fact. */
/* .minedue went with them — the due count beside one of those moves. */