/**
 * image-picker.css
 * -----------------------------------------------------------------------
 * Styles for /image-picker only. Loaded by that one page and by nothing
 * else, the same arrangement colors.css and palettes.css use.
 *
 * VISUAL REDESIGN PASS: this page is meant to read as a dedicated tool
 * (Coolors' Image Picker is the interaction reference — layout and feel
 * only, no copied styles/assets/branding), not as another BPOZZ content
 * page. Concretely: no eyebrow/breadcrumb, a slim heading instead of the
 * site's big editorial hero, a compact control rail, and a large image
 * workspace with a designed standby state instead of a bare "no image"
 * rectangle.
 *
 * Reuses only the site-wide primitives from styles.css (--action /
 * --action-hover / --paper / --card / --radius / --sans / --grid-line /
 * --text / --text-muted, .wrap, .sr-only, .toast). It defines no new
 * site-level token and overrides nothing in :root.
 *
 * TWO RULES THIS FILE IS HELD TO, BEYOND THE USUAL SCOPING ONE:
 *
 *   1. NO MONOSPACE ANYWHERE. Every font-family in this file is
 *      var(--sans) or inherited from it — including the HEX values, which
 *      get tabular-nums for alignment instead of a mono face switch.
 *   2. NO --ink AND NO HARDCODED EQUIVALENT OF #0F2A52. Every accent here
 *      is var(--action) / var(--action-hover); every shadow/scrim is a
 *      neutral rgba(0,0,0,…) or rgba(255,255,255,…), never
 *      rgba(15,42,82,…) — that triplet is #0F2A52 decomposed to RGB, which
 *      is exactly the "hardcoded equivalent" this page may not use. (See
 *      src/client/image-picker.js's ringColorFor() for the matching note.)
 *
 * The swatch plate's inline custom properties (--ip-hex / --ip-label /
 * --ip-veil / --ip-ring) are emitted per swatch by src/client/image-picker.js
 * from a WCAG contrast calculation, the same arrangement colors.css
 * documents for --color-hex etc. Nothing in this file assigns a color per
 * swatch.
 * -----------------------------------------------------------------------
 */

/* Page-scoped, not site tokens: the soft-gray card surface, the slightly
   darker gray for controls sitting on it (slider track, +/−, Browse), and
   the two corner radii (cards 16px, controls/strip 12px). */
.image-picker-page {
  --ip-radius: 12px;
  --ip-radius-lg: 16px;
  --ip-surface: #f5f5f5;
  --ip-control: #e7e7e7;
  --ip-control-hover: #dcdcdc;
  --ip-ease: cubic-bezier(0.2, 0.6, 0.3, 1);
}

/* .guides-main ships 44px of padding-top for the site's editorial hero,
   which is close enough to what this page's own large hero wants that no
   override is needed on top; a little extra breathing room below it
   before the workspace starts. */
.image-picker-page .guides-main.ip-main {
  padding-top: 36px;
  padding-bottom: 40px;
}

/* ---------- hero header ---------- */
/* No eyebrow, no breadcrumb: the heading and subtitle ARE the header.
   Sized on the site-wide page-intro scale (--intro-* in styles.css) so
   this tool opens with the same title / description / whitespace rhythm
   as /palettes, /colors and the category pages. */
.ip-head {
  padding-top: var(--intro-space-top);
  margin-bottom: clamp(36px, 4vw + 12px, 72px);
}
.ip-head h1 {
  margin: 0;
  font-size: var(--intro-title-hero);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text);
  font-family: var(--sans);
  overflow-wrap: break-word;
  text-wrap: balance;
}
.ip-head__subtitle {
  margin: var(--intro-title-gap) 0 0;
  max-width: 800px;
  font-family: var(--sans);
  font-size: var(--intro-dek);
  font-weight: 400;
  line-height: 1.45;
  color: var(--text-muted);
}

/* ---------- layout: control card left, large image card right ---------- */
/* 450px controls + 34px gap + 844px image = 1328px of content, which is
   wider than the site-wide .wrap (1160px). Widened on this page only; the
   extra 64px is .guides-main's own 32px side padding on each side. The
   image card is 844px = 800px of image + 22px padding each side, so the
   3:2 standby photo lands at 800 x 533.

   The columns are 450fr / 844fr rather than a fixed 450px, so below full
   width both cards shrink in that same ratio (the controls never go under
   300px) instead of the image card absorbing all of it. */
.image-picker-page .guides-main.ip-main {
  max-width: 1392px;
}

.image-picker {
  display: grid;
  grid-template-columns: minmax(300px, 450fr) minmax(0, 844fr);
  gap: clamp(20px, 2.6vw, 34px);
  align-items: stretch;
}

@media (max-width: 900px) {
  .image-picker {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- control card ---------- */
.ip-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  background: var(--ip-surface);
  border-radius: var(--ip-radius-lg);
  padding: 34px;
}

@media (max-width: 640px) {
  .ip-panel {
    padding: 24px 20px;
    gap: 28px;
  }
}

.ip-panel__section {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.ip-panel__label {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text);
}

/* ---------- variation slider ---------- */
/* Its <label> is visually hidden (.sr-only in the markup): the design shows
   only the "Picked palettes" heading, and the label still names the slider
   for assistive tech. */
.ip-variation {
  display: flex;
  flex-direction: column;
}
.ip-variation__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.ip-variation__slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: var(--ip-control);
}
.ip-variation__slider::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--ip-control);
}
.ip-variation__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.1),
    0 2px 6px rgba(0, 0, 0, 0.18);
}
.ip-variation__slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.1),
    0 2px 6px rgba(0, 0, 0, 0.18);
}
.ip-variation__slider:focus-visible {
  outline-offset: 4px;
  border-radius: 999px;
}
.ip-variation__slider:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------- palette strip + size controls ---------- */
.ip-palette-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* + stacked over −, together exactly the strip's 52px (2 x 24px + 4px
   gap). 24px is the WCAG 2.2 minimum target size. */
.ip-count {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ip-count__btn {
  appearance: none;
  width: 24px;
  height: 24px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: var(--ip-control);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s var(--ip-ease);
}
.ip-count__btn:hover:not(:disabled) {
  background: var(--ip-control-hover);
}
.ip-count__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* One continuous rounded strip of equal-width segments. The corners are
   rounded on the end segments rather than with overflow: hidden on the
   list, so a segment's HEX tooltip can still render above the strip. */
.ip-swatches {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  height: 52px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ip-swatch {
  flex: 1 1 0;
  min-width: 0;
}
.ip-swatch:first-child .ip-swatch__plate {
  border-radius: var(--ip-radius) 0 0 var(--ip-radius);
}
.ip-swatch:last-child .ip-swatch__plate {
  border-radius: 0 var(--ip-radius) var(--ip-radius) 0;
}
.ip-swatch:only-child .ip-swatch__plate {
  border-radius: var(--ip-radius);
}

.ip-swatch__plate {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--ip-hex);
  cursor: pointer;
}
.ip-swatch__plate:focus-visible {
  z-index: 1;
  outline-offset: -3px;
}

/* HEX value: a small tooltip above the segment on hover / keyboard focus
   (at 8 colors a segment is too narrow to hold the label inline). The
   accessible name — "Copy #XXXXXX, color N" — is on the button itself. */
.ip-swatch__hex {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 2;
  transform: translate(-50%, 4px);
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.15s var(--ip-ease),
    transform 0.15s var(--ip-ease);
}
.ip-swatch__plate:focus-visible .ip-swatch__hex {
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (hover: hover) and (pointer: fine) {
  .ip-swatch__plate:hover .ip-swatch__hex {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* "Copied" state: a check mark over the segment. The word itself is
   dropped visually (font-size: 0) since a segment can be ~35px wide; the
   copy is still announced through #ip-status. */
.ip-swatch__copied {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background: var(--ip-veil, rgba(0, 0, 0, 0.45));
  color: var(--ip-label);
  font-size: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s var(--ip-ease);
}
.ip-swatch__copied svg {
  width: 18px;
  height: 18px;
  flex: none;
}
.ip-swatch__plate[data-copied="true"] .ip-swatch__copied {
  opacity: 1;
}
.ip-swatch__plate[data-copied="true"] .ip-swatch__hex {
  opacity: 0;
}

/* ---------- panel actions: browse + export ---------- */
/* margin-top: auto pins the two buttons to the bottom of the card when it
   stretches to the image card's height. */
.ip-panel__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
}

.ip-btn {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  height: 52px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--ip-radius);
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s var(--ip-ease);
}
.ip-btn__icon {
  width: 22px;
  height: 22px;
  flex: none;
}
.ip-btn--secondary {
  background: var(--ip-control);
  color: var(--text);
}
.ip-btn--secondary:hover:not(:disabled) {
  background: var(--ip-control-hover);
}
.ip-btn--primary {
  padding-right: 0;
  background: var(--action);
  color: #fff;
}
.ip-btn--primary:hover:not(:disabled) {
  background: var(--action-hover);
}
/* The chevron sits in its own divided area at the button's right end. */
.ip-btn__chevron {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  flex: none;
  border-left: 1px solid rgba(255, 255, 255, 0.28);
}
.ip-btn__chevron svg {
  width: 20px;
  height: 20px;
}
.ip-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ---------- image card ---------- */
.ip-canvas-wrap {
  min-width: 0;
}

.ip-canvas-frame {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  border-radius: var(--ip-radius-lg);
  background: var(--ip-surface);
  overflow: hidden;
}

@media (max-width: 900px) {
  .ip-canvas-frame {
    min-height: 0;
  }
}
@media (max-width: 640px) {
  .ip-canvas-frame {
    padding: 14px;
  }
}

/* Shrink-wraps the canvas so .ip-points (inset: 0) covers exactly the
   image. The canvas keeps its own aspect ratio rather than object-fit:
   cover — the click handler maps the canvas's box straight onto its
   pixels, so cropping would sample (and mark) the wrong spot. */
.ip-canvas-stage {
  position: relative;
  max-width: 100%;
  line-height: 0;
}

.ip-canvas {
  display: block;
  max-width: 100%;
  max-height: min(78vh, 760px);
  width: auto;
  height: auto;
  border-radius: var(--ip-radius);
  cursor: crosshair;
}
.ip-canvas[hidden] {
  display: none;
}

/* Small overlay pill, not a paragraph above the workspace — the sampling
   hint costs no extra vertical layout space this way, only shown once an
   image is loaded (before that, "click to sample" has nothing to act on). */
.ip-canvas-tip {
  position: absolute;
  left: 50%;
  bottom: 14px;
  line-height: 1.2;
  transform: translateX(-50%);
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
}
.ip-canvas-tip[hidden] {
  display: none;
}

/* No empty-state rules: a local standby photo loads automatically on init
   (see image-picker/index.html and src/client/image-picker.js), so the
   workspace never has an unfilled state to style. */

/* ---------- sampling points ---------- */
/* Decorative and non-interactive (aria-hidden on the container in the
   markup): the accessible interface to the palette is the swatch list,
   which is fully keyboard-operable. Manual re-sampling is a pointer/touch
   affordance layered on top, the same way it is in the reference
   interaction this feature takes its concept from. */
.ip-points {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* White ring drawn as a border (inside the 24px box) so the marker stays
   centred on its point; the hairline + soft shadow keep it legible on
   light areas of the photo without looking heavy. */
.ip-point {
  position: absolute;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  margin-top: -12px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--ip-point-hex);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.12),
    0 2px 6px rgba(0, 0, 0, 0.22);
}

/* =========================================================================
   EXPORT PALETTE — modal dialog (replaces the earlier dropdown menu)
   ========================================================================= */

.ip-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.5);
}
.ip-modal-backdrop[hidden] {
  display: none;
}

.ip-modal {
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--card);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  padding: 18px;
}

.ip-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.ip-modal__title {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.ip-modal__close {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border: 1px solid var(--grid-line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--text);
  cursor: pointer;
  transition:
    border-color 0.15s var(--ip-ease),
    color 0.15s var(--ip-ease);
}
.ip-modal__close:hover {
  border-color: var(--action);
  color: var(--action);
}
.ip-modal__close svg {
  width: 16px;
  height: 16px;
}

.ip-modal__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 420px) {
  .ip-modal__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ip-modal__item {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 72px;
  padding: 10px 4px;
  border: 1px solid var(--grid-line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color 0.15s var(--ip-ease),
    background 0.15s var(--ip-ease),
    color 0.15s var(--ip-ease);
}
.ip-modal__item:hover {
  border-color: var(--action);
  background: var(--card);
  color: var(--action);
}
.ip-modal__icon {
  width: 20px;
  height: 20px;
}

/* Placeholder tiles (URL, PDF, ASE, Embed — see image-picker.js): visually
   present, honestly marked as not-yet-available rather than silently doing
   nothing or faking an export. Dimmed, not hidden — hiding a grid item
   would misrepresent the 4x3 layout as having fewer options. */
.ip-modal__item[data-coming-soon="true"] {
  opacity: 0.55;
}