/* =========================================================
   mbrd - the colour picker (pickColor, ui/color-picker.ts)

   Sat/brightness square, hue slider, and the answer as swatch + hex.
   Dressed as #ask (dialog.css, loaded above). Load order is the cascade.
   ========================================================= */

/* The sheet. Narrower than #compose, wider than #ask: the square needs
   ~300px so that 1% of saturation is at least 1px of travel. */
#pick {
  max-width: min(340px, calc(100vw - 32px));
  padding: 22px 24px 18px;
  border: var(--hairline) solid var(--rule-2);
  border-radius: var(--radius);
  background: var(--paper-card);
  box-shadow: var(--shadow-2);
  color: var(--ink);
  margin: auto;
  animation: ask-in var(--dur-base) var(--ease-back);
  /* A <dialog> is `overflow: auto` in every UA sheet, and nothing in here is
     ever wider than the sheet - so a horizontal bar can only ever be a few
     pixels of something poking out, and it costs both bottom corners: the
     scrollbar's strip is reserved inside the border box and Chromium does not
     round it. Same failure #credits documents in dialog.css, on the other
     axis. `clip` rather than `hidden` so the vertical axis is left alone and
     a short window can still scroll the sheet. */
  overflow-x: clip;
  overflow-y: auto;
}
/* Only when open: unconditional display would override <dialog>'s display:none. */
#pick[open] { display: grid; gap: 12px; }
#pick::backdrop {
  background: color-mix(in srgb, var(--ink) 42%, transparent);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
#pick h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-title);
  font-style: var(--display-italic);
  font-weight: 400;
  color: var(--ink);
}

/* The SB plane. Three CSS layers avoid repainting on hue change.
   touch-action: none prevents the browser from claiming the drag as a scroll. */
#pick-area {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--leaf);
  border: var(--hairline) solid var(--rule-2);
  cursor: crosshair;
  touch-action: none;
  overflow: hidden;
  background:
    linear-gradient(to top, #000, #0000),
    linear-gradient(to right, #fff, #fff0),
    hsl(var(--hue, 0) 100% 50%);
}
#pick-area:focus { outline: none; }
/* Rings drawn inside, not around. Both boxes are the full width of the sheet's
   content, and an outline counts towards scrollable overflow - so a ring that
   sat outside raised the horizontal bar this dialog has no other use for, the
   moment focus landed (which is on the square, as soon as it opens). */
#pick-area:focus-visible {
  outline: var(--sel-line) solid var(--select);
  outline-offset: calc(var(--sel-gap) * -1);
}
/* Two rings so the handle stays visible against both white and black corners. */
#pick-dot {
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #0009, 0 1px 3px #0006;
  background: var(--picked, transparent);
  pointer-events: none;
}

/* Real range input for hue: free keyboard and screen-reader semantics. */
#pick-hue {
  width: 100%;
  height: 16px;
  margin: 0;
  border-radius: var(--radius-pill);
  border: var(--hairline) solid var(--rule-2);
  cursor: pointer;
  touch-action: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  /* Exact sixths: rounding to 17% shifts the hue under the thumb by ~2 deg. */
  background: linear-gradient(to right,
    #f00 0%, #ff0 16.667%, #0f0 33.333%, #0ff 50%,
    #00f 66.667%, #f0f 83.333%, #f00 100%);
}
/* Clear each engine's default track so the gradient on the input shows. */
#pick-hue::-webkit-slider-runnable-track { height: 100%; background: transparent; }
#pick-hue::-moz-range-track { height: 100%; background: transparent; }
#pick-hue:focus { outline: none; }
#pick-hue:focus-visible {
  outline: var(--sel-line) solid var(--select);
  outline-offset: calc(var(--sel-gap) * -1);
}
/* Two vendor thumbs, kept in step: different sizes = different hues.
   `box-sizing` on both: `* { box-sizing: border-box }` in base.css does not
   reach a vendor pseudo-element, so the 2px ring was making an 18px thumb out
   of a 14px one - which Gecko lets hang past the end of the track. */
#pick-hue::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #0009;
  background: transparent;
  cursor: pointer;
}
#pick-hue::-moz-range-thumb {
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #0009;
  background: transparent;
  cursor: pointer;
}

/* Swatch + hex side by side: one fact, both editable. */
.pick-foot { display: flex; align-items: center; gap: 8px; }
#pick-well {
  flex: 0 0 auto;
  width: calc(38px * var(--density));
  height: calc(38px * var(--density));
  border-radius: var(--leaf);
  border: var(--hairline) solid var(--rule-2);
  background: var(--picked, var(--paper));
}
/* Tabular figures: proportional ones twitch as digits change during drag. */
#pick-hex {
  flex: 1 1 auto;
  min-width: 0;
  min-height: calc(38px * var(--density));
  padding: 0 10px;
  border: var(--hairline) solid var(--rule-2);
  border-radius: var(--leaf);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
#pick-hex:focus { outline: none; border-color: var(--accent-text); }

/* Fallback for WebKit below 16.2, which lacks color-mix(). */
@supports not (color: color-mix(in srgb, red, blue)) {
  #pick::backdrop { background: rgb(var(--ink-c) / 42%); }
}