/* A11y (WCAG 1.4.4): font sizes here are in rem, not px, so the shared
   "Larger text" toggle in core/displayOptions.js — which scales the ROOT
   font size — actually reaches this dialog. In px these ignored it, so a
   pupil who turned Larger text on got bigger buttons around the same
   small labels. 1rem = 16px, so the default rendering is unchanged. */
/**
 * colourPicker.css — the shared colour picker's appearance.
 *
 * Structure only, the way css/modals.css is structure only: every colour and
 * size here reads a custom property with a fallback, so an app that defines
 * its tokens gets its own palette and one that defines none still looks
 * deliberate. The tokens read are listed under "Tokens" below; nothing breaks
 * if an app defines none of them.
 *
 * Load AFTER core/modals.css and BEFORE the app's own stylesheets, so the
 * app's :root tokens override these fallbacks.
 *
 * WHY THE SWATCHES CARRY AN INSET SHADOW RATHER THAN A BORDER
 * ──────────────────────────────────────────────────────────────────────────
 * WCAG 1.4.11 wants a non-text control to be distinguishable from its
 * background. A white swatch on a white panel is invisible without help, and
 * a border would change every swatch's size by two pixels — which, across a
 * grid of 180, is a visibly different grid. An inset shadow sits inside the
 * box and costs no space.
 *
 * Tokens
 * ──────────────────────────────────────────────────────────────────────────
 *   --panel        the dialog's background          (#ffffff)
 *   --text         its text                         (#1f2430)
 *   --muted        the readout's numbers            (#5a6072)
 *   --line         hairlines between sections       (#e6e8ef)
 *   --accent       the focus ring                   (#3b82f6)
 *   --radius       corner rounding                  (14px)
 */

:where(dialog.sc-dialog) {
  padding: 0;
  border: none;
  border-radius: var(--radius, 14px);
  background: var(--panel, #ffffff);
  color: var(--text, #1f2430);
  /* ── THE GRID'S ARITHMETIC, STATED ONCE ──────────────────────────────────
     The dialog's width is worked out from these four numbers, and the grid
     and the body read the same four, so the width cannot drift away from what
     it has to hold.

       --sc-swatch     the smallest a swatch may be: a 44px pointer target
       --sc-gap        the space between swatches
       --sc-pad        the body's padding, each side
       --sc-scrollbar  room for a classic scrollbar. When the dialog is
                       shorter than its content the body scrolls, and a
                       classic scrollbar takes 15–17px of its width (Windows,
                       ChromeOS, Linux). macOS overlay scrollbars take none,
                       and there this just lets each swatch grow a pixel.
                       It must stay under one swatch plus one gap (50px), or
                       the grid would find room for an extra column.

     N columns need  N x (swatch + gap) - gap  across, plus the padding and
     the scrollbar: eighteen come to 946px. It used to be written as the bare
     numbers `x 49px + 38px` (920px for eighteen), which was 6px short of what
     eighteen 44px swatches, 6px gaps and 16px padding need — so the grid
     wrapped at seventeen, the hue columns stopped lining up and the last row
     was ragged. `_core/test/colourPicker.test.mjs` checks this sum.

     The calc is a calc, not a constant, because this dialog is not only
     School Draw's: School Data can show twelve colours in four columns and
     School Robots nine in three, and a dialog sized for 180 around twelve
     swatches would be mostly empty panel. The min-width below stops a
     three-column palette making a dialog too narrow for the readout line. */
  --sc-swatch: 44px;
  --sc-gap: 6px;
  --sc-pad: 16px;
  --sc-scrollbar: 20px;
  width: min(
    92vw,
    calc(
      var(--sc-cols, 18) * (var(--sc-swatch) + var(--sc-gap)) - var(--sc-gap) +
        2 * var(--sc-pad) + var(--sc-scrollbar)
    )
  );
  min-width: min(92vw, 360px);
  max-width: 92vw;
  max-height: 90dvh;
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.28);
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  overflow: hidden;
}
dialog.sc-dialog[open] {
  display: flex;
  flex-direction: column;
}
.sc-dialog::backdrop {
  background: rgb(0 0 0 / 0.5);
  backdrop-filter: blur(3px);
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.sc-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line, #e6e8ef);
  flex: 0 0 auto;
}
.sc-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  flex: 1;
}
.sc-close {
  appearance: none;
  border: 1px solid var(--line, #e6e8ef);
  background: transparent;
  color: inherit;
  border-radius: 10px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sc-close svg {
  width: 18px;
  height: 18px;
}

/* ── Body ───────────────────────────────────────────────────────────────── */
.sc-body {
  padding: var(--sc-pad);
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* Preserve 44px choices and adapt the row count to the available width. The
   numbers come from the dialog, which sized itself from the same ones. */
.sc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--sc-swatch), 1fr));
  justify-content: center;
  gap: var(--sc-gap);
}
.sc-swatch {
  appearance: none;
  border: none;
  padding: 0;
  aspect-ratio: 1;
  min-width: 0;
  border-radius: 6px;
  cursor: pointer;
  /* A solid boundary remains visible around pale and dark swatches. */
  box-shadow: inset 0 0 0 1px #595959;
  transition: transform 0.15s ease;
}
.sc-swatch:hover {
  transform: scale(1.15);
  box-shadow:
    inset 0 0 0 1px #595959,
    0 4px 8px rgb(0 0 0 / 0.15);
  z-index: 1;
}
.sc-swatch:active {
  transform: scale(1.05);
}
.sc-swatch[aria-pressed="true"] {
  box-shadow:
    inset 0 0 0 2px var(--panel, #ffffff),
    0 0 0 2px var(--accent, #3b82f6);
}
.sc-swatch:focus-visible {
  outline: 2px solid var(--accent, #3b82f6);
  outline-offset: 2px;
  z-index: 2;
}

/* ── Readout ────────────────────────────────────────────────────────────── */
.sc-readout {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line, #e6e8ef);
}
.sc-chip {
  width: 44px;
  height: 28px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px #595959;
}
.sc-lines {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 0.8125rem;
  color: var(--muted, #5a6072);
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    monospace;
}
.sc-name {
  font-weight: 700;
  color: var(--text, #1f2430);
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.sc-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--line, #e6e8ef);
  flex: 0 0 auto;
}
.sc-btn {
  appearance: none;
  border: 1px solid var(--line, #e6e8ef);
  background: var(--panel, #ffffff);
  color: var(--text, #1f2430);
  border-radius: 10px;
  padding: 8px 14px;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
}
.sc-btn:hover {
  background: rgb(0 0 0 / 0.04);
}
.sc-btn:focus-visible {
  outline: 2px solid var(--accent, #3b82f6);
  outline-offset: 2px;
}
/* Random sits at the far left, leaving Close where it is. `margin-right: auto`
   rather than space-between on the footer, so a third button added later
   lands next to Close instead of moving Close under a different finger. */
.sc-random {
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sc-random span {
  display: inline-block;
  transition: transform 0.2s ease;
}
.sc-random:hover span {
  transform: rotate(-12deg) scale(1.15);
}

/* ── The inline field ─────────────────────────────────────────────────────
   A button now, not a dropdown: it shows the swatch and the colour's NAME and
   opens the same grid as everywhere else. The name is not decoration — the
   block it sits on reads as a sentence, "set wheel light to ▮red", and the
   word is what a child who cannot tell the hues apart is reading.

   Deliberately unstyled beyond layout: the app it sits inside owns its look,
   which for School Robots is `.pe-colour-wrap` in css/pubbo-editor.css. */
.sc-field {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
  appearance: none;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  padding: 0;
  cursor: pointer;
  /* WCAG 2.5.8 asks 24px of a control this size. */
  min-height: 24px;
}
.sc-field:focus-visible {
  outline: 2px solid var(--accent, #3b82f6);
  outline-offset: 2px;
  border-radius: 4px;
}
.sc-field-name {
  white-space: nowrap;
}
.sc-field-swatch {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.35);
  flex: 0 0 auto;
}
/* Not a colour — School Robots' "random". A rainbow, because showing one of
   the nine would be a lie about what the robot is going to do. */
.sc-field-swatch.is-extra {
  background: conic-gradient(
    #ff0000,
    #ff8000,
    #ffff00,
    #00ff00,
    #00ffff,
    #0000ff,
    #ff00ff,
    #ff0000
  );
}
/* A tile in the grid that is not a colour — see .sc-field-swatch.is-extra
   above for why it is a rainbow rather than one of the palette's colours. */
.sc-swatch-extra,
.sc-chip-extra {
  background: conic-gradient(
    #ff0000,
    #ff8000,
    #ffff00,
    #00ff00,
    #00ffff,
    #0000ff,
    #ff00ff,
    #ff0000
  );
}

/* ── The confirmation ───────────────────────────────────────────────────── */
/* Announced, not shown. Three of the six apps already have a toast of their
   own and they do not agree about where it sits or how long it stays, so this
   file does not grow a fourth — it speaks and gets out of the way. */
.sc-announce {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Dark ───────────────────────────────────────────────────────────────── */
/* Four of the six apps offer a dark theme through core/displayOptions.js,
   which stamps data-theme="dark" on <html>. :where() so an app that defines
   its own tokens still wins with a plain selector. */
:where(html[data-theme="dark"]) .sc-dialog {
  --panel: #1f2937;
  --text: #f3f4f6;
  --muted: #9ca3af;
  --line: #374151;
}
:where(html[data-theme="dark"]) .sc-swatch,
:where(html[data-theme="dark"]) .sc-chip {
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.28);
}
:where(html[data-theme="dark"]) .sc-btn:hover {
  background: rgb(255 255 255 / 0.08);
}

/* ── Touch ──────────────────────────────────────────────────────────────── */
@media (pointer: coarse) {
  /* Footer actions keep the same minimum target size as palette choices. */
  .sc-btn,
  .sc-close {
    min-height: 44px;
    min-width: 44px;
  }
  .sc-swatch:hover {
    transform: none;
  }
}

/* ── High contrast ──────────────────────────────────────────────────────── */
@media (prefers-contrast: high) {
  .sc-dialog {
    border: 2px solid currentColor;
  }
  .sc-swatch {
    box-shadow: inset 0 0 0 2px currentColor;
  }
  .sc-btn,
  .sc-close {
    border-width: 2px;
  }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sc-swatch,
  .sc-random span {
    transition: none;
  }
  .sc-swatch:hover,
  .sc-random:hover span {
    transform: none;
  }
}

/* Every palette choice remains a full pointer target at all viewport sizes. */
.sc-swatch { min-width: 44px; min-height: 44px; outline-offset: 2px; }
.sc-close, .sc-btn, .sc-field { min-width: 44px; min-height: 44px; }
.sc-body { overflow: auto; min-height: 0; }
.sc-header, .sc-footer { flex-shrink: 0; }
.sc-swatch:focus-visible { outline: 3px solid var(--focus, #7a2e00); }
.sc-swatch:hover { transform: none; }
@media (forced-colors: active) { .sc-swatch { forced-color-adjust: none; border: 2px solid CanvasText; } .sc-swatch:focus-visible { outline-color: Highlight; } }