/* Colour tokens and general look follow multiverse-star-battle. */
:root {
  color-scheme: light;
  --primary-blue: #1976d2;
  --color-solved: #2e7d32;
  --color-progress: #f9a825;
  --color-error: #c62828;

  --bg-white: #fff;
  --bg-light: #f8f9fa;
  --border-light: #e0e0e0;
  --border-subtle: #eee;
  --primary-blue-hover-bg: #f0f6ff;
  --border-input: #ddd;
  --border-strong: #bbb;
  --text-primary: #111;
  --text-secondary: #666;
  --text-muted: #888;

  --cell-bg: #fff;
  --cell-border: #ccc;
  --blocked-bg: var(--text-primary); /* same as star battle's void cells */
  --tile-bg: rgba(0, 114, 178, 0.2);        /* a selected shape chip */
  --tile-bad-bg: rgba(224, 146, 90, 0.1);
  --bad: #d9732a;                          /* wrong marks and regions (vermillion; hatched, so not only a colour) */
  --bad-hatch: #e0925a;                    /* the hatching itself, a little softer than the marks */
  --line-color: #111;                      /* the lines you draw: the frame's colour and width, so a line meets the frame and the blocked cells (which have the same colour) without a seam */
  --cell-hover: rgba(0, 0, 0, 0.09);       /* cell under the mouse (desktop) */
  --drag-bg: rgba(0, 0, 0, 0.18);          /* cells traced so far, not yet the tile shape */
  --drag-ok-bg: rgba(0, 114, 178, 0.38);   /* traced cells form the tile: release to draw it */
  --hint-yellow: #f4ec9c;
  --hint-blue: rgba(0, 0, 0, 0.1);         /* the tiles a hint talks about: grey, so it is never read as a shape color */
  --hint-line: #444;
  --frame: #111;
  /* Colors for the allowed shapes (puzzles with several shapes), from the Okabe-Ito colour-blind-safe set. Each has
     --shape-N     the header picture's outline,
     --shape-N-bg  the fill of a finished tile,
     --shape-N-drag the drag preview once the cells form that shape. */
  --shape-0: #0072b2; --shape-0-bg: #bdd8ea;
  --shape-1: #e69f00; --shape-1-bg: #f2e0b6;
  --shape-2: #cc79a7; --shape-2-bg: #ebcfdf;
  --shape-3: #009e73; --shape-3-bg: #b9e0d2;
  --shape-0-drag: rgba(0, 114, 178, 0.38);
  --shape-1-drag: rgba(230, 159, 0, 0.42);
  --shape-2-drag: rgba(204, 121, 167, 0.45);
  --shape-3-drag: rgba(0, 158, 115, 0.4);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --primary-blue: #64b5f6;
  --color-solved: #66bb6a;
  --color-progress: #ffca28;
  --color-error: #ef5350;

  --bg-white: #1a1a1a;
  --bg-light: #1e1e1e;
  --border-light: #3a3a3a;
  --border-subtle: #333;
  --primary-blue-hover-bg: #1a2a3a;
  --border-input: #444;
  --border-strong: #555;
  --text-primary: #e8e8e8;
  --text-secondary: #aaa;
  --text-muted: #888;

  --cell-bg: #2a2a2a;
  --cell-border: #444;
  --tile-bg: rgba(86, 180, 233, 0.25);
  --tile-bad-bg: rgba(255, 143, 77, 0.12);
  --bad: #e8905f;
  --bad-hatch: #e08a5e;
  --line-color: #e8e8e8;
  --cell-hover: rgba(255, 255, 255, 0.14);
  --drag-bg: rgba(255, 255, 255, 0.22);
  --drag-ok-bg: rgba(86, 180, 233, 0.42);
  --hint-yellow: rgba(240, 228, 66, 0.5);
  --hint-blue: rgba(200, 200, 200, 0.22);
  --hint-line: #ddd;
  --frame: #e8e8e8;
  --shape-0: #56b4e9; --shape-0-bg: rgba(86, 180, 233, 0.26);
  --shape-1: #e69f00; --shape-1-bg: rgba(230, 159, 0, 0.26);
  --shape-2: #cc79a7; --shape-2-bg: rgba(204, 121, 167, 0.32);
  --shape-3: #2fc79a; --shape-3-bg: rgba(0, 158, 115, 0.34);
  --shape-0-drag: rgba(86, 180, 233, 0.45);
  --shape-1-drag: rgba(230, 159, 0, 0.45);
  --shape-2-drag: rgba(204, 121, 167, 0.5);
  --shape-3-drag: rgba(0, 158, 115, 0.5);
}

* { box-sizing: border-box; }

body {
  font-family: sans-serif;
  margin: 0;
  background-color: var(--bg-white);
  color: var(--text-primary);
}

#game-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 16px 32px;
  min-height: 100vh;
}

/* Everything above the board shares one column width. */
.column { width: 100%; max-width: max(24em, var(--board-w, 32em)); }   /* lines up with the board's edges */

h1 { margin: 0; font-size: 1.25rem; }
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.topbar-actions { display: flex; gap: 8px; }

button, select, input[type="number"] {
  font: inherit;
  color: var(--text-primary);
}

button {
  padding: 6px 10px;
  cursor: pointer;
  background: var(--border-light);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  transition: background 0.2s;
}
button:not(:disabled):hover { background: var(--border-input); }
button.ghost { background: transparent; border-color: var(--border-light); color: var(--text-secondary); }
button.ghost:not(:disabled):hover { background: var(--bg-light); color: var(--text-primary); }
button:disabled {
  background: var(--bg-light);
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.6;
}

select, input[type="number"] {
  padding: 7px 8px;
  background: var(--bg-white);
  border: 1px solid var(--border-input);
  border-radius: 4px;
}

/* Row 1: book + pager */
.nav { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.nav select { min-width: 0; text-overflow: ellipsis; }
/* the book button shows the current book and opens the book picker (modal) */
.book-btn {
  flex: 1 1 100%; min-width: 0; display: flex; align-items: center; gap: 8px;   /* its own row: the board size must stay readable */
  text-align: left; padding: 7px 12px; font-weight: 600;
}
.book-btn .book-btn-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.book-btn::after { content: '▾'; flex-shrink: 0; color: var(--text-secondary); }
.pager { display: flex; align-items: center; gap: 4px; flex-shrink: 0; color: var(--text-secondary); }
.pager input { width: 3.2em; text-align: center; padding: 6px 4px; }
.step-btn { padding: 4px 10px; font-size: 1.2rem; line-height: 1.1; }

/* Row 2: tile shape (left), progress (right) */
.infobar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  min-height: 28px;
  margin-bottom: 10px;
}
.tile-info { display: inline-flex; align-items: center; gap: 8px; }
.tile-info-name { font-size: 0.95rem; font-weight: 600; }
.tile-swatches { display: inline-flex; align-items: flex-end; gap: 10px; flex-shrink: 0; }
.status { font-size: 0.9rem; color: var(--text-secondary); text-align: right; }
.status.solved { color: var(--color-solved); font-weight: 600; }
.status.error { flex: 1 1 100%; color: var(--color-error); text-align: left; }
.link-btn { padding: 2px 8px; margin-left: 6px; font-size: 0.85rem; }

/* Row 3: board actions (left), check + hint (right) */
.controls { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.btn-group { display: flex; gap: 6px; }
.controls button { padding: 6px 9px; font-size: 0.95rem; }   /* both groups fit a 6x6 board's width */
.label-short { display: none; }
@media (max-width: 480px) {
  .label-long { display: none; }
  .label-short { display: inline; }
  .controls { flex-wrap: nowrap; gap: 6px; }
  .controls button { padding: 6px 9px; }
  .btn-group { gap: 4px; }
}

/* --- Board --------------------------------------------------------------- */
#board {
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation; /* no double-tap zoom while tapping edges */
}

.board-svg {
  --cell-size: min(64px, 88vw / var(--grid-cols), (100vh - 250px) / var(--grid-rows));
  display: block;
  touch-action: none; /* drags on the board must not scroll the page */
  width: calc(var(--cell-size) * var(--grid-cols) * 1.0);
  height: calc(var(--cell-size) * var(--grid-rows) * 1.0);
  /* viewBox includes a small pad for the frame stroke */
  overflow: visible;
}

.cell { fill: var(--cell-bg); }
.cell.blocked { fill: var(--blocked-bg); stroke: var(--blocked-bg); stroke-width: 0.08; }
/* the oversize stroke has round joins on the hex and triangle grids: a mitered 60 degree corner is a spike (a nub past the frame at the board's edge, and two spikes at the point where two blocked triangles meet); round is a 0.04 bulge the frame covers */
.board-svg:not(.topo-square) .cell.blocked { stroke-linejoin: round; }   /* a little oversized, like a tile's thick walls: it then meets the board's frame (also 0.08) without a step */
.cell.outside { fill: none; pointer-events: none; }   /* outside a shaped board (a plus sign...): not drawn */
.cell.tile-ok { fill: var(--shape-fill, var(--shape-0-bg)); }   /* finished tile: its shape's color (--shape-fill, set below) */
.cell.shape-1 { --shape-fill: var(--shape-1-bg); }
.cell.shape-2 { --shape-fill: var(--shape-2-bg); }
.cell.shape-3 { --shape-fill: var(--shape-3-bg); }
.cell.tile-bad { fill: var(--tile-bad-bg); fill: url(#bad-hatch) var(--tile-bad-bg); }   /* hatched: not confusable with the shape tints */
.hatch-bg { fill: var(--tile-bad-bg); }
.hatch-line { stroke: var(--bad-hatch); stroke-width: 0.05; opacity: 0.8; }

.dash {
  stroke: var(--cell-border);
  stroke-width: 0.025;
  stroke-dasharray: 0.07 0.06;
}

.seg {
  stroke: var(--line-color);
  stroke-width: 0.08;           /* as thick as the frame (and a blocked cell's oversize) */
  stroke-linecap: round;
  opacity: 0;
  pointer-events: none;
}
.seg.hover { opacity: 0.28; }
.seg.on { opacity: 1; }
.seg.cross { opacity: 0; }
.seg.bad { stroke: var(--bad); opacity: 1; }
.seg.given { stroke: var(--blocked-bg); stroke-width: 0.13; }          /* pre-drawn edges look like the blocked cells */

.xmark line {
  stroke: var(--text-secondary);
  stroke-width: 0.045;
  stroke-linecap: round;
  pointer-events: none;
}

.xmark.given line { stroke: var(--blocked-bg); stroke-width: 0.09; }
.xmark.bad line { stroke: var(--bad); stroke-width: 0.075; }

/* Hint highlights (the board's marks are never changed by a hint). Later
   rules win, so target > tile when cells overlap. */
.cell.hint-tile { fill: var(--hint-blue); }
.cell.hint-target { fill: var(--hint-yellow); }

/* Drag-to-draw preview (drag across cells to trace a tile). It comes AFTER the hint highlights so it wins
   on cells a hint has coloured: you always see what you are tracing (the hint's dashed lines and ✕ stay). */
.cell-hover { fill: var(--cell-hover); pointer-events: none; }
.cell.drag { fill: var(--drag-bg); }
.cell.drag-ok { fill: var(--drag-fill, var(--drag-ok-bg)); }   /* cells form a tile: that shape's color (--drag-fill, set below) */
.cell.drag-shape-0 { --drag-fill: var(--shape-0-drag); }
.cell.drag-shape-1 { --drag-fill: var(--shape-1-drag); }
.cell.drag-shape-2 { --drag-fill: var(--shape-2-drag); }
.cell.drag-shape-3 { --drag-fill: var(--shape-3-drag); }
.hint-line {
  stroke: var(--hint-line);
  stroke-width: 0.1;
  stroke-linecap: round;
  stroke-dasharray: 0.14 0.12;
  pointer-events: none;
}
.hint-marker circle { fill: var(--bad); stroke: #fff; stroke-width: 0.04; }
.hint-marker text { fill: #fff; font-weight: 700; font-family: sans-serif; }
.hint-marker { pointer-events: none; }
.hint-unknown circle { fill: #f0e442; stroke: var(--hint-line); stroke-width: 0.05; }   /* yellow, like the cells a hint points at */
.hint-unknown text { fill: #333; font-weight: 700; font-family: sans-serif; }
.hint-unknown { pointer-events: none; }
.hint-x line {
  stroke: var(--hint-line);
  stroke-width: 0.07;
  stroke-linecap: round;
  pointer-events: none;
}

.frame {
  fill: none;
  stroke: var(--frame);
  stroke-width: 0.08;           /* about a drawn line (0.1): lines along the board's edge are clipped to the board, so half of one shows inside the frame, and a placed tile then looks no thicker there. --frame is the blocked cells' colour, so a blocked cell on the edge joins the frame without a seam */
  pointer-events: none;
}
/* A solved board keeps its frame and gets a green glow round it: a wider, blurred green stroke under the frame. (A green frame
   did not meet the dark lines and the black cells cleanly where they touch it.) */
.frame-glow { display: none; fill: none; pointer-events: none; }
.board-svg.solved .frame-glow { display: inline; stroke: var(--color-solved); stroke-width: 0.26; opacity: 0.85; filter: blur(0.07px); }   /* (lengths in a filter on an SVG element are in the board's cell units, not screen pixels) */





/* --- Icon buttons (settings, help) and modals (same look as multiverse-star-battle) -------- */
.icon-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 1.3rem;
  line-height: 1;
  border-radius: 50%;
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon-btn:not(:disabled):hover {
  background: var(--primary-blue-hover-bg);
  border-color: var(--primary-blue);
  color: var(--primary-blue);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  transition: opacity 0.2s;
}
.modal-hidden { opacity: 0; pointer-events: none; }

.modal-box {
  background: var(--bg-white);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  max-width: 480px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  /* stays put while the box scrolls, so the close button is always reachable (long lists on phones) */
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-white);
}
.modal-header h2 { margin: 0; font-size: 1.2rem; }
.modal-header button {
  background: none;
  border: none;
  font-size: 1.2rem;
  padding: 4px 8px;
  color: var(--text-secondary);
}
.modal-header button:not(:disabled):hover { background: var(--border-light); border-radius: 4px; }
.modal-body { padding: 16px 20px; line-height: 1.6; }

.settings-list { display: flex; flex-direction: column; }
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
}
.settings-row:last-child { border-bottom: none; }
.settings-row-text { display: flex; flex-direction: column; gap: 2px; }
.settings-label { font-weight: 600; font-size: 0.95rem; color: var(--text-primary); }
.settings-desc { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.35; }

.toggle-switch { flex-shrink: 0; position: relative; }
.toggle-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-track {
  display: block;
  width: 44px;
  height: 24px;
  background: var(--border-strong);
  border-radius: 12px;
  position: relative;
  transition: background 0.2s;
  cursor: pointer;
}
.toggle-switch input:checked + .toggle-track { background: var(--primary-blue); }
.toggle-switch input:focus-visible + .toggle-track { outline: 2px solid var(--primary-blue); outline-offset: 2px; }
.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: var(--bg-white);
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.toggle-switch input:checked + .toggle-track .toggle-thumb { transform: translateX(20px); }

/* --- Toast (same look as multiverse-star-battle) ----------------------------- */
#toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 500px;
  white-space: normal;
  text-align: center;
  line-height: 1.4;
  color: white;
  padding: 12px 20px;
  border-radius: 25px;
  z-index: 3000; /* above the settings modal */
  transition: opacity 0.3s, transform 0.3s;
  cursor: pointer;
}
#toast.toast-top { bottom: auto; top: 12px; }
.toast-hidden {
  opacity: 0;
  transform: translate(-50%, -20px) !important;
  pointer-events: none;
}
.toast-info, .toast-hint { background-color: var(--primary-blue); }
.toast-success { background-color: var(--color-solved); }
.toast-error { background-color: var(--color-error); }
:root[data-theme="dark"] .toast-info,
:root[data-theme="dark"] .toast-hint,
:root[data-theme="dark"] .toast-success,
:root[data-theme="dark"] .toast-error { color: #111; }

/* --- Tile shape picture (next to its name in the info row) ---------------- */
.tile-shape-svg {
  --unit: 14px;
  width: calc(var(--unit) * var(--tile-cols));
  height: calc(var(--unit) * var(--tile-rows));
  flex-shrink: 0;
}
/* cells are separated by a thin gap in the page background */
/* the picture matches a finished tile (same fill), outlined in the shape's colour */
.tile-shape-svg.shape-1 :is(rect, polygon) { fill: var(--shape-1-bg); stroke: var(--shape-1); }
.tile-shape-svg.shape-2 :is(rect, polygon) { fill: var(--shape-2-bg); stroke: var(--shape-2); }
.tile-shape-svg.shape-3 :is(rect, polygon) { fill: var(--shape-3-bg); stroke: var(--shape-3); }
.tile-shape-svg :is(rect, polygon) {
  fill: var(--shape-0-bg);
  stroke: var(--shape-0);
  stroke-width: 0.08;
}
.pat-cell { fill: var(--cell-bg); }   /* the cell's own color under the (translucent) hatching of a wrong region */




.modal-box--wide { max-width: 560px; width: 94%; max-height: 85vh; }
.modal-body h3 { margin: 18px 0 6px; font-size: 1rem; }
.modal-body h3:first-child { margin-top: 0; }
.modal-body p { margin: 0 0 8px; }
.modal-body ul { margin: 4px 0 8px; padding-left: 1.25em; }
.modal-body li { margin: 6px 0; }

.settings-row button { white-space: nowrap; flex-shrink: 0; }

/* Destructive button with a two-step confirm (first click turns it solid red) */
.settings-row .danger-btn {
  border: 1.5px solid #d9534f; background: transparent; color: #d9534f; font-weight: 600;
}
.settings-row .danger-btn:hover, .settings-row .danger-btn.danger-btn--confirm {
  background: #d9534f; color: #fff; border-color: #d9534f;
}

/* --- Puzzle tier (stars + word) ------------------------------------------------ */
.tier-info { font-size: 0.85rem; color: var(--text-secondary); white-space: nowrap; }
.tier-stars { letter-spacing: 1px; margin-right: 4px; }
.tier-stars .on { color: #f9a825; }
.tier-stars .off { color: var(--border-strong); }

/* --- Browse puzzles modal (like multiverse star battle's) ------------------------ */
.browse-btn { padding: 4px 10px; font-size: 0.85rem; margin-left: 4px; }
.browse-modal-body { padding: 12px 16px 20px; }
.browse-summary { font-weight: 600; margin-bottom: 8px; }
.browse-filter { margin-bottom: 12px; }
.browse-filter[hidden] { display: none; }
.browse-filter-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 0.85rem; color: var(--text-secondary); }
.browse-filter-label { font-weight: 600; color: var(--text-primary); }
.browse-filter-hint { font-weight: 400; color: var(--text-secondary); }
.browse-filter-head .link-btn { margin-left: 0; }
.browse-filter-head .link-btn[hidden] { display: inline-block; visibility: hidden; }   /* keeps its space, so the dialog doesn't jump */
.shape-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.shape-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; min-height: 32px;
  background: var(--bg-white); border: 1px solid var(--border-strong); border-radius: 16px;
}
.shape-chip .tile-shape-svg { --unit: 8px; }
.shape-chip .tile-shape-svg :is(rect, polygon) { fill: var(--text-muted); }
.shape-chip-count { font-size: 0.75rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.shape-chip[aria-pressed="true"] { background: var(--tile-bg); border-color: var(--primary-blue); }
.shape-chip[aria-pressed="true"] .tile-shape-svg :is(rect, polygon) { fill: var(--primary-blue); }
.shape-chip[aria-pressed="true"] .shape-chip-count { color: var(--text-primary); font-weight: 600; }
.shape-chip:focus-visible { outline: 2px solid var(--primary-blue); outline-offset: 2px; }
.browse-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.browse-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 0.8rem; color: var(--text-secondary); }
.legend-dot { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; margin-right: 2px; }
.legend-solved { background: var(--color-solved); }
.legend-in-progress { background: var(--color-progress); }
.legend-current { background: var(--primary-blue); }
.legend-unsolved { background: var(--border-light); border: 1px solid var(--border-strong); }
.browse-jump-btn { font-size: 0.82rem; padding: 5px 10px; white-space: nowrap; }
.browse-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px;
  max-height: 55vh; overflow-y: auto; padding: 2px;
}
.browse-tile {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700; border-radius: 6px; cursor: pointer; padding: 0; min-width: 0;
  border: 2px solid transparent; background: var(--border-light); color: var(--text-primary);
}
.browse-tile:hover { filter: brightness(0.93); }
.browse-tile.bt-solved { background: var(--color-solved); color: #fff; }
.browse-tile.bt-in-progress { background: var(--color-progress); color: #3a2a00; }
.browse-tile.bt-current { border-color: var(--primary-blue); box-shadow: 0 0 0 2px var(--primary-blue); }
.browse-tier-header {
  grid-column: 1 / -1; padding: 8px 2px 2px; margin-bottom: 2px; border-bottom: 1px solid var(--border-light);
}
.browse-tier-name { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-secondary); }

/* --- Print puzzles modal ----------------------------------------------------------- */
.print-form { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; margin: 8px 0; }
.print-form input[type="text"], .print-form select { min-width: 0; }
.print-form input[type="checkbox"] { justify-self: start; width: 18px; height: 18px; }
.print-error { color: var(--color-error); font-size: 0.85rem; margin: 6px 0; }
.print-summary { color: var(--text-secondary); font-size: 0.85rem; min-height: 1.3em; }
.print-actions { display: flex; justify-content: flex-end; }

/* --- Printing: #print-root (see js/print.js) is the only thing printed ------------- */
#print-root { display: none; }
#print-root, #print-root * { box-sizing: border-box; }
#print-root .print-page {
  display: flex; flex-direction: column; gap: 5mm; color: #111; background: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; break-after: page;
}
#print-root .print-page:last-child { break-after: auto; }
#print-root .print-head { display: flex; align-items: center; gap: 4mm; border-bottom: 0.4mm solid #111; padding-bottom: 2mm; }
#print-root .print-brand { font-weight: 700; font-size: 5mm; }
#print-root .print-name, #print-root .print-url { color: inherit; text-decoration: none; }
#print-root .print-url { font-size: 3.2mm; color: #555; }
#print-root .print-book { margin-left: auto; font-size: 3.6mm; color: #333; }
/* the number of columns is --cols (js/print.js: as many boards as fit at the chosen cell size); the gaps match PAGE there */
#print-root .print-grid { display: grid; grid-template-columns: repeat(var(--cols, 1), max-content); gap: 6mm 5mm; justify-content: center; justify-items: center; align-content: start; }
#print-root .print-item { margin: 0; text-align: center; }
#print-root .print-caption { font-weight: 600; font-size: 3.6mm; margin-bottom: 1.5mm; text-align: left; display: flex; align-items: center; gap: 2mm; }
#print-root .print-board { display: block; height: auto; }        /* (its width is set per board from the cell size) */
@media print {
  @page { margin: 12mm; }
  body.printing-booklet { background: #fff !important; }
  body.printing-booklet > *:not(#print-root) { display: none !important; }
  body.printing-booklet #print-root { display: block; }
}

/* --- Book picker modal --------------------------------------------------------------- */
.bp-body { padding: 8px 16px 20px; }
.bp-section h3 {
  margin: 16px 0 2px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--text-secondary);
}
.bp-more { margin-top: 14px; border-top: 1px solid var(--border-light); }
.bp-more-summary { cursor: pointer; padding: 10px 0 6px; font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); }
.bp-multi { margin: 4px 0 6px; }
.bp-sizes { display: flex; gap: 6px; }
.bp-size {
  flex: 1 1 0; min-width: 0; min-height: 40px; padding: 8px 4px; font-size: 0.9rem; font-weight: 600; font-variant-numeric: tabular-nums;
  border: 1px solid var(--border-light); border-radius: 8px; background: transparent; color: var(--text-primary);
}
.bp-size:hover { border-color: var(--border-strong); }
.bp-size.bp-current { background: var(--primary-blue-hover-bg); border-color: var(--primary-blue); }
.bp-size-done { color: var(--color-solved); }
.bp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 4px 0 6px; }
.bp-tile {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; min-height: 52px; padding: 6px 10px; text-align: left;
  border: 1px solid var(--border-light); border-radius: 8px; background: transparent; color: var(--text-primary);
}
.bp-tile:hover { border-color: var(--border-strong); }
.bp-tile.bp-current { background: var(--primary-blue-hover-bg); border-color: var(--primary-blue); }
.bp-tile-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.bp-blurb { margin: 0 0 6px; font-size: 0.8rem; color: var(--text-muted); line-height: 1.35; }
.bp-book {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px; padding: 6px 12px; margin: 4px 0; text-align: left;
  border: 1px solid var(--border-light); border-radius: 8px; background: transparent;
}
.bp-book:hover { border-color: var(--border-strong); }
.bp-book.bp-current { background: var(--primary-blue-hover-bg); border-color: var(--primary-blue); }
.bp-book-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bp-book-title { font-weight: 600; font-size: 0.95rem; }
.bp-stars { color: #e0a100; letter-spacing: 1px; }
.bp-book-blurb { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.3; }
.bp-count { flex-shrink: 0; font-size: 0.8rem; color: var(--text-secondary); white-space: nowrap; }
.bp-count-done { color: var(--color-solved); font-weight: 600; }

.tier-beyond { color: var(--text-muted); font-size: 0.8rem; white-space: nowrap; }