/*
 * Your own board: the editor page in the Customize drawer and its tile in
 * the board picker.
 *
 * The preview itself (`.kf-cb`) is in board-controls.css, which every page
 * loads, because the board menu shows one too. This file is only loaded
 * where there is something to edit.
 */

/* ── The third page ──────────────────────────────────────────
 * One level below the picker, the way the picker is below the settings: the
 * picker yields the same short distance the settings list does. Loaded after
 * customize.css, so these win the tie with its `.is-themes` rules. */
.cz-page--custom {
  padding-top: 0;
  transform: translateX(100%);
  opacity: 0;
}
.cz-drawer.is-custom .cz-page--themes { transform: translateX(-24%); opacity: 0; }
.cz-drawer.is-custom .cz-page--custom { transform: translateX(0); opacity: 1; }

/* Header and preview stick as one block, opaque, with the divider under the
   pair. The header's own sticky setup is undone inside it: two sticky boxes
   at top:0 would stack on each other. */
.cb-sticky {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0 calc(var(--space-5) * -1);
  background: var(--color-surface-card);
  box-shadow: 0 1px 0 var(--color-divider);
}
.cb-sticky .cz-header--sub {
  position: static;
  margin: 0;
  box-shadow: none;
}
.cb-preview-wrap { padding: 0 var(--space-5) var(--space-4); }
.cb-preview {
  border-radius: var(--radius-sm);
  box-shadow:
    inset 0 0 0 1px rgba(23, 10, 2, 0.12),
    0 1px 3px rgba(23, 10, 2, 0.14);
}
/* Short screens (a phone on its side) keep the controls in reach. */
@media (max-height: 560px) {
  .cb-preview { aspect-ratio: 8.5 / 3; }
}

.cb-intro { margin: 0; }
.cb-paste-note { margin: calc(var(--space-2) * -1) 0 0; }

/* ── A part: Standard / Colour / Image ──────────────────────── */
.cz-row .cb-modes {
  flex: 1 1 auto;
  margin-left: 0;
}
.cb-part .cb-when-colour,
.cb-part .cb-when-image { display: none; }
.cb-part[data-mode="colour"] .cb-when-colour,
.cb-part[data-mode="image"] .cb-when-image { display: flex; }

/* A colour: the native picker, drawn as a round swatch, with its value
   beside it. The whole row is the label, so the row opens the picker. */
label.cz-row { cursor: pointer; }
label.cz-row:hover { background: var(--color-surface-overlay); }
.cb-colour {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}
.cb-colour input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.cb-colour input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.cb-colour input[type="color"]::-webkit-color-swatch {
  border: 1px solid rgba(23, 10, 2, 0.18);
  border-radius: 50%;
}
.cb-colour input[type="color"]::-moz-color-swatch {
  border: 1px solid rgba(23, 10, 2, 0.18);
  border-radius: 50%;
}
.cb-colour input[type="color"]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-wood) 60%, transparent);
  outline-offset: 2px;
}
.cb-colour-hex {
  min-width: 7ch;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px;
  color: var(--color-text-secondary);
  text-transform: uppercase;
}

/* ── A link ──────────────────────────────────────────────────
 * The field carries a thumbnail of what loaded on its left and its state on
 * its right, so whether a link worked is answered where it was typed. */
.cz-row.cb-field {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.cb-url {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 40px;
  padding: 0 10px 0 6px;
  background: var(--color-surface-card);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.cb-url:focus-within {
  border-color: color-mix(in srgb, var(--color-wood) 70%, var(--color-divider));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-wood) 22%, transparent);
}
.cb-url[data-state="error"] { border-color: color-mix(in srgb, var(--color-text) 45%, var(--color-divider)); }
.cb-url input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 13px;
  outline: none;
}
.cb-url input::placeholder { color: var(--color-text-tertiary); }
/* The box draws the focus ring (:focus-within above); the global one on the
   input itself would be a second ring inside it. */
.cb-url input:focus,
.cb-url input:focus-visible { outline: none; box-shadow: none; }
/* iOS zooms the page into any field under 16px (see base.css). */
@media (pointer: coarse) {
  .cb-url input { font-size: 16px; }
}
.cb-url-thumb {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background-color: var(--color-surface-overlay);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(23, 10, 2, 0.08);
}
/* Before anything loads: a small picture glyph, drawn so it needs no file. */
.cb-url-thumb:not(.is-set) {
  background-image:
    radial-gradient(circle at 35% 35%, var(--color-text-tertiary) 0 2px, transparent 2.5px),
    linear-gradient(135deg, transparent 55%, color-mix(in srgb, var(--color-text-tertiary) 60%, transparent) 55%);
  background-size: 100% 100%;
  opacity: 0.7;
}
.cb-url-state {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--color-text-tertiary);
}
.cb-url[data-state="loading"] .cb-url-state::before {
  content: "";
  position: absolute;
  inset: 1px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: cb-spin 0.7s linear infinite;
}
/* Loaded: a tick in ink. Not green: success here is the board changing,
   which the reader is already looking at. */
.cb-url[data-state="ok"] .cb-url-state { color: var(--color-text); }
.cb-url[data-state="ok"] .cb-url-state::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.cb-url[data-state="error"] .cb-url-state { color: var(--color-text); }
.cb-url[data-state="error"] .cb-url-state::before {
  content: "!";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
@keyframes cb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .cb-url[data-state="loading"] .cb-url-state::before { animation-duration: 1.6s; }
}
.cb-status {
  font-size: var(--font-size-meta);
  line-height: 1.4;
  color: var(--color-text-secondary);
}
.cb-status:empty { display: none; }
.cb-status[data-kind="error"] { color: var(--color-text); }

/* ── Stone size ─────────────────────────────────────────────*/
.cz-row.cb-size-row { flex-wrap: nowrap; }
.cb-part:not(.has-image) .cb-size-row { display: none; }
.cb-size-row .cz-toggle-label { flex: 0 0 auto; }
.cb-size-value {
  flex: 0 0 auto;
  min-width: 4ch;
  text-align: right;
  font-size: var(--font-size-meta);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary);
}
.cb-fit {
  flex: 0 0 auto;
  font-size: var(--font-size-meta);
  text-transform: none;
  letter-spacing: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--color-divider);
}
.cb-fit[hidden] { display: none; }

.cb-footer {
  display: flex;
  justify-content: center;
  padding-bottom: var(--space-2);
}
.cb-start-over {
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--font-size-meta);
  cursor: pointer;
}
.cb-start-over:hover { color: var(--color-text); background: var(--color-surface-overlay); }
.cb-start-over:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-wood) 60%, transparent);
  outline-offset: 2px;
}

/* ── The tile in the picker ─────────────────────────────────
 * Beside Default. Empty, it's an invitation: a dashed frame and a plus where
 * the picture will be. Set, it's a tile like the rest with a live preview
 * of the reader's board, and a pencil on the picture for editing. */
.cb-tile-wrap {
  position: relative;
  display: flex;
  container-type: inline-size;
}
.cb-tile-wrap > .cz-theme-tile { flex: 1 1 auto; min-width: 0; }
.cb-tile-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--color-surface-overlay);
}
.cb-tile-thumb .kf-cb {
  height: 100%;
  transition: transform var(--dur-medium) var(--ease-out);
}
.cz-theme-tile:hover .cb-tile-thumb .kf-cb { transform: scale(1.04); }
.cb-tile-empty {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  color: var(--color-text-secondary);
  transition: color var(--dur-short) var(--ease-out);
}
.cb-tile-empty::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1.5px dashed color-mix(in srgb, var(--color-text) 22%, transparent);
  border-radius: var(--radius-sm);
}
.cb-tile-empty svg {
  position: relative;
  width: 40px;
  height: 40px;
  padding: 9px;
  border-radius: 50%;
  background: var(--color-surface-card);
  box-shadow: 0 1px 3px rgba(23, 10, 2, 0.14);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  transition: transform var(--dur-short) var(--ease-out);
}
.cb-tile.is-empty .kf-cb { visibility: hidden; }
.cb-tile.is-empty .cb-tile-empty { display: grid; }
.cb-tile.is-empty:hover .cb-tile-empty { color: var(--color-text); }
.cb-tile.is-empty:hover .cb-tile-empty svg { transform: scale(1.08); }
/* An empty tile can't be the board in play, whatever the store says. */
.cb-tile.is-empty .cz-theme-check { display: none; }

.cb-tile-edit {
  position: absolute;
  top: calc(100cqw - 36px);
  right: 8px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-surface-card) 92%, transparent);
  color: var(--color-text);
  box-shadow: 0 1px 3px rgba(23, 10, 2, 0.25);
  cursor: pointer;
  transition: transform var(--dur-short) var(--ease-out), background var(--dur-short) var(--ease-out);
}
.cb-tile-edit[hidden] { display: none; }
.cb-tile-edit:hover { transform: scale(1.08); background: var(--color-surface-card); }
.cb-tile-edit:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-wood) 60%, transparent);
  outline-offset: 2px;
}
.cb-tile-edit svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}