/* ==========================================================================
   Fonts — self-hosted variable woff2 (see fonts/README.md). Split into latin
   and latin-ext the way Google Fonts does it, so an ASCII-only page fetches
   one file per family. The weight ranges let the 450 body weight resolve to a
   true instance rather than a faux-bold of 400.
   ========================================================================== */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   Manzat — styling modelled on the SciFlow design language:
   square corners (radius 0), 1px hairline rules, IBM Plex Sans + JetBrains
   Mono, uppercase letter-spaced micro-labels, fast cubic-bezier motion.
   Dark is the default; [data-theme="light"] overrides the tokens.
   ========================================================================== */

:root {
  /* --- surfaces & ink (dark) --- */
  --surface-canvas: #0e0e0e;
  --surface-raised: #161616;
  --surface-selected: #1c1c1c;
  --ink-primary: #e5e5e5;
  --ink-secondary: #888888;
  --ink-tertiary: #555555;
  --rule: #2a2a2a;
  --rule-strong: #3a3a3a;

  /* --- accents (dark) --- */
  --accent-teal: #6dc7c8;
  --accent-green: #61ca6e;
  --accent-purple: #b579cf;
  --accent-mustard: #cdc37c;
  --accent-coral: #ce6a68;

  --w-body: 450;
  --on-accent: #0e0e0e;

  /* --- type --- */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --size-display: 32px;
  --size-title: 21px;
  --size-subhead: 16px;
  --size-row: 15px;
  --size-body: 14px;
  --size-caption: 12px;
  --size-micro: 11px;

  /* --- space --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 32px;

  /* --- motion --- */
  --ease: cubic-bezier(.2, 0, .2, 1);
  --dur-arrive: .14s;
  --dur-fade: 90ms;
  --dur-hover-out: 80ms;

  --bar-h: 52px;
}

[data-theme="light"] {
  --surface-canvas: #f7f7f6;
  --surface-raised: #ededec;
  --surface-selected: #e4e4e2;
  --ink-primary: #1a1a1a;
  --ink-secondary: #5f5f5c;
  --ink-tertiary: #8e8e8a;
  --rule: #dcdcd8;
  --rule-strong: #bfbfba;

  --accent-teal: #067778;
  --accent-green: #007c21;
  --accent-purple: #8d52a5;
  --accent-mustard: #766b24;
  --accent-coral: #ad4c4c;

  --w-body: 400;
  --on-accent: #f7f7f6;
}

* { box-sizing: border-box; }

/* Class rules below set display on .modal/.pop/.menu__list, which would
   otherwise out-specify the `hidden` attribute's UA display:none and leave
   invisible overlays swallowing every click. */
[hidden] { display: none !important; }

html, body { height: 100%; margin: 0; }

body {
  background: var(--surface-canvas);
  color: var(--ink-primary);
  font-family: var(--font-sans);
  font-weight: var(--w-body);
  font-size: var(--size-body);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  border: 1px solid currentColor;
  opacity: .55;
  padding: 1px 4px;
  margin-left: 2px;
}

.label {
  font-size: var(--size-micro);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-secondary);
  font-weight: 500;
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--accent-teal);
  outline-offset: 2px;
}

/* ==================== Top bar ==================== */

.bar {
  flex: 0 0 auto;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0 var(--space-4);
  background: var(--surface-canvas);
  border-bottom: 1px solid var(--rule);
  position: relative;
  z-index: 30;
}

.bar__brand { display: flex; align-items: center; gap: var(--space-2); }

.brand__mark {
  display: grid;
  grid-template-columns: repeat(2, 7px);
  grid-template-rows: repeat(2, 7px);
  gap: 2px;
}
.brand__mark i { display: block; }
.brand__mark i:nth-child(1) { background: var(--accent-teal); }
.brand__mark i:nth-child(2) { background: var(--accent-green); }
.brand__mark i:nth-child(3) { background: var(--accent-mustard); }
.brand__mark i:nth-child(4) { background: var(--accent-coral); }

.brand__name {
  font-size: var(--size-micro);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 600;
}

.bar__actions { display: flex; align-items: center; gap: var(--space-1); }

.bar__sep {
  width: 1px;
  height: 18px;
  background: var(--rule);
  margin: 0 var(--space-2);
}

.act {
  font-family: var(--font-sans);
  font-size: var(--size-micro);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 500;
  color: var(--ink-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0;
  padding: 7px 11px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: color var(--dur-hover-out) var(--ease),
              background var(--dur-hover-out) var(--ease),
              border-color var(--dur-hover-out) var(--ease);
}

.act:hover { color: var(--ink-primary); background: var(--surface-raised); }

.act--primary {
  color: var(--ink-primary);
  border-color: var(--rule-strong);
}
.act--primary:hover {
  background: var(--accent-teal);
  border-color: var(--accent-teal);
  color: var(--on-accent);
}

.act--accent { color: var(--accent-teal); }
.act--accent:hover { background: var(--accent-teal); color: var(--on-accent); }

.act--icon { padding: 7px; width: 30px; height: 30px; justify-content: center; }
.act--icon svg { width: 16px; height: 16px; }

.act[aria-expanded="true"] { color: var(--ink-primary); background: var(--surface-selected); }

.act:disabled, .act:disabled:hover {
  opacity: .35;
  cursor: not-allowed;
  background: transparent;
  color: var(--ink-secondary);
  border-color: var(--rule);
}

/* theme toggle icon swap */
.i-sun { display: none; }
[data-theme="dark"] .i-sun { display: block; }
[data-theme="dark"] .i-moon { display: none; }
[data-theme="light"] .i-sun { display: none; }
[data-theme="light"] .i-moon { display: block; }

/* ==================== Palette-size stepper ==================== */

.stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--rule-strong);
  height: 30px;
}

.stepper__btn {
  width: 28px;
  height: 100%;
  padding: 8px;
  border: 0;
  background: transparent;
  color: var(--ink-secondary);
  cursor: pointer;
  transition: color var(--dur-hover-out) var(--ease), background var(--dur-hover-out) var(--ease);
}
.stepper__btn:hover:not(:disabled) { color: var(--on-accent); background: var(--accent-teal); }
.stepper__btn:disabled,
.stepper__value:disabled { opacity: .3; cursor: not-allowed; }

.stepper__value {
  width: 34px;
  height: 100%;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--size-caption);
  color: var(--ink-primary);
  background: transparent;
  border: 0;
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  border-radius: 0;
  padding: 0;
  cursor: text;
}
.stepper__value:focus {
  outline: none;
  background: var(--surface-raised);
  color: var(--accent-teal);
}
/* Our own -/+ buttons stand in for the native spinners. */
.stepper__value::-webkit-outer-spin-button,
.stepper__value::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper__value { -moz-appearance: textfield; appearance: textfield; }

/* ==================== Export menu ==================== */

.menu { position: relative; display: inline-flex; }

.menu__list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: var(--surface-raised);
  border: 1px solid var(--rule-strong);
  display: flex;
  flex-direction: column;
  z-index: 40;
  animation: arrive var(--dur-arrive) var(--ease);
}

.menu__list button {
  font-family: var(--font-sans);
  font-size: var(--size-caption);
  color: var(--ink-primary);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  padding: 10px var(--space-3);
  cursor: pointer;
}
.menu__list button:last-child { border-bottom: 0; }
.menu__list button:hover { background: var(--surface-selected); color: var(--accent-teal); }

@keyframes arrive {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* ==================== Palette board ==================== */

.board {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

.swatch {
  flex: 1 1 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 11vh;
  min-width: 0;
  /* Size the labels against the swatch's own width, not the viewport — at 16
     colours a viewport-scaled hex overflows its column and drags the page
     sideways. Also the last line of defence against any child spilling out. */
  container-type: inline-size;
  overflow: hidden;
  transition: transform var(--dur-arrive) var(--ease);
}

.swatch.is-dragging {
  z-index: 5;
  transition: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18), 0 18px 40px rgba(0, 0, 0, .35);
}

.swatch__tools {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;               /* narrow columns wrap the row rather than overflow */
  gap: 2px;
  max-width: 100%;
  padding: 0 var(--space-1);
  margin-bottom: var(--space-4);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur-fade) var(--ease), transform var(--dur-fade) var(--ease);
}

.swatch:hover .swatch__tools,
.swatch:focus-within .swatch__tools { opacity: 1; transform: none; }

.tool {
  width: var(--tool-size, 30px);
  height: var(--tool-size, 30px);
  padding: 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: .72;
  transition: opacity var(--dur-hover-out) var(--ease), background var(--dur-hover-out) var(--ease);
}
.tool:hover { opacity: 1; background: rgba(127, 127, 127, .22); }
.tool--locked { opacity: 1; }
.tool--drag { cursor: grab; touch-action: none; }
.tool--drag:active { cursor: grabbing; }

.swatch__hex {
  font-family: var(--font-mono);
  font-size: clamp(11px, 15cqw, 20px);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: var(--space-2);
  max-width: 100%;
  white-space: nowrap;
  transition: opacity var(--dur-hover-out) var(--ease);
}
.swatch__hex:hover { opacity: .62; }

.swatch__name {
  font-family: inherit;
  font-size: var(--size-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: inherit;
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 2px 4px;
  margin-top: 2px;
  cursor: pointer;
  opacity: .55;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity var(--dur-hover-out) var(--ease),
              border-color var(--dur-hover-out) var(--ease);
}
.swatch__name:hover { opacity: 1; border-bottom-color: currentColor; }

/* A label the user has written outranks the automatic colour name. */
.swatch__name--labelled { opacity: .95; font-weight: 500; }

/* Narrow columns (long palettes): tighten the tracking that letter-spacing
   adds, and drop the colour name rather than let it crowd the hex. */
@container (max-width: 150px) {
  .swatch__hex { letter-spacing: .04em; padding: var(--space-2) 2px; }
  .swatch__name { font-size: 9px; letter-spacing: .04em; }
}
@container (max-width: 105px) {
  .swatch__name { display: none; }
}

/* Add a tone to the left / right of this swatch. Inset inside the swatch (not
   straddling the boundary) so it is unambiguous which colour it branches from. */
.swatch__add {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0;
  z-index: 4;
  transition: opacity var(--dur-fade) var(--ease);
}
.swatch__add--before { left: 5px; }
.swatch__add--after { right: 5px; }

.swatch:hover .swatch__add,
.swatch:focus-within .swatch__add { opacity: .5; }
.swatch__add:hover, .swatch__add:focus-visible { opacity: 1; }

.swatch__add span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  background: rgba(127, 127, 127, .22);
  color: inherit;
}
.swatch__add:hover span { background: rgba(127, 127, 127, .38); }
.swatch__add svg { width: 12px; height: 12px; }

/* ==================== Footer: hint + credit ==================== */

.foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-4);
  background: var(--surface-canvas);
  border-top: 1px solid var(--rule);
  font-size: var(--size-micro);
  letter-spacing: .06em;
  color: var(--ink-tertiary);
}

.hint {
  flex: 1 1 auto;
  margin: 0;
  padding: 9px 0;
  text-align: center;
}

/* Studio credit. The mark is the logo's alpha used as a mask over the current
   ink colour, so it follows the theme instead of sitting as a black blob on
   the dark canvas. */
.credit {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 0;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-hover-out) var(--ease);
}
.credit b { font-weight: 600; color: var(--ink-secondary); transition: color var(--dur-hover-out) var(--ease); }
.credit:hover, .credit:hover b { color: var(--ink-primary); }

.credit__mark {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  background: currentColor;
  /* The mask is inlined rather than linked: a CSS mask image is a CORS fetch,
     which file:// refuses, and the page must work straight from disk. It is
     the greyscale of assets/better3-mark.png (96px); regenerate from there. */
  -webkit-mask: url("data:image/png;base64,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") center / contain no-repeat;
  mask: url("data:image/png;base64,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") center / contain no-repeat;
  mask-mode: luminance;
  -webkit-mask-source-type: luminance;
}

/* ==================== Scrim / drawer ==================== */

.scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 45;
  animation: fade var(--dur-fade) var(--ease);
}
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(360px, 92vw);
  background: var(--surface-canvas);
  border-left: 1px solid var(--rule-strong);
  transform: translateX(100%);
  /* visibility (not just a translate) takes the closed drawer out of the tab
     order; the transition lets it stay visible while it slides shut. */
  visibility: hidden;
  transition: transform var(--dur-arrive) var(--ease),
              visibility 0s linear var(--dur-arrive);
  z-index: 50;
  display: flex;
  flex-direction: column;
}
.drawer.is-open { transform: none; visibility: visible; transition-delay: 0s; }

.drawer__head {
  flex: 0 0 auto;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-3) 0 var(--space-4);
  border-bottom: 1px solid var(--rule);
}

.drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.saved {
  border: 1px solid var(--rule);
  background: var(--surface-raised);
  cursor: pointer;
  transition: border-color var(--dur-hover-out) var(--ease);
}
.saved:hover { border-color: var(--accent-teal); }

.saved__strip { display: flex; height: 46px; }
.saved__strip span { flex: 1 1 0; }

.saved__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--rule);
}
.saved__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-secondary);
}
.saved__legend-item i { width: 8px; height: 8px; flex: 0 0 auto; }

.saved__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--rule);
}

.saved__name {
  font-size: var(--size-caption);
  color: var(--ink-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saved__date {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-tertiary);
  letter-spacing: .04em;
}

.saved__del {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  padding: 5px;
  border: 0;
  background: transparent;
  color: var(--ink-tertiary);
  cursor: pointer;
}
.saved__del:hover { color: var(--accent-coral); }

.empty {
  color: var(--ink-tertiary);
  font-size: var(--size-caption);
  line-height: 1.6;
  padding: var(--space-4) var(--space-2);
}

/* ==================== Modal ==================== */

.modal {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: rgba(0, 0, 0, .5);
  animation: fade var(--dur-fade) var(--ease);
}

.modal__panel {
  width: min(520px, 100%);
  background: var(--surface-canvas);
  border: 1px solid var(--rule-strong);
  animation: arrive var(--dur-arrive) var(--ease);
}

.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--bar-h);
  padding: 0 var(--space-3) 0 var(--space-4);
  border-bottom: 1px solid var(--rule);
}

.drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-4);
  padding: var(--space-6) var(--space-4);
  border: 1px dashed var(--rule-strong);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--dur-hover-out) var(--ease), background var(--dur-hover-out) var(--ease);
}
.drop:hover, .drop.is-over { border-color: var(--accent-teal); background: var(--surface-raised); }

.drop__icon { width: 30px; height: 30px; color: var(--ink-tertiary); }
.drop__title { font-size: var(--size-row); color: var(--ink-primary); }
.drop__note { font-size: var(--size-caption); color: var(--ink-tertiary); }

.modal__preview {
  display: block;
  width: calc(100% - var(--space-4) * 2);
  margin: 0 var(--space-4) var(--space-4);
  max-height: 190px;
  object-fit: cover;
  border: 1px solid var(--rule);
}

/* ==================== Dialog ==================== */

.dialog__body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* A strip of the palette being saved, so the dialog shows what it is about. */
.dialog__swatches {
  display: flex;
  height: 40px;
  border: 1px solid var(--rule);
}
.dialog__swatches span { flex: 1 1 0; min-width: 0; }

.dialog__message {
  margin: 0;
  font-size: var(--size-row);
  line-height: 1.5;
  color: var(--ink-primary);
}
.dialog__message b { font-weight: 500; }

.dialog__field { display: flex; flex-direction: column; gap: var(--space-2); }

.dialog__copy {
  width: 100%;
  min-height: 132px;
  max-height: 40vh;
  resize: vertical;
  line-height: 1.55;
  white-space: pre;
  overflow: auto;
}

.dialog__foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--rule);
}
.dialog__foot .act { justify-content: center; min-width: 96px; }
.dialog__foot .act:not(.act--primary):not(.act--danger) { border-color: var(--rule-strong); }

.act--danger {
  color: var(--accent-coral);
  border-color: var(--accent-coral);
}
.act--danger:hover {
  background: var(--accent-coral);
  border-color: var(--accent-coral);
  color: var(--on-accent);
}

/* ==================== Colour popover ==================== */

.pop {
  position: fixed;
  z-index: 60;
  width: 252px;
  background: var(--surface-canvas);
  border: 1px solid var(--rule-strong);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  animation: arrive var(--dur-arrive) var(--ease);
}

.pop__preview { height: 40px; border: 1px solid var(--rule); }

.pop__field { display: flex; flex-direction: column; gap: 5px; }

.pop__hexrow { display: grid; grid-template-columns: 1fr 34px; gap: var(--space-2); }
.pop__triple { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }

.input {
  font-family: var(--font-sans);
  font-size: var(--size-caption);
  color: var(--ink-primary);
  background: var(--surface-raised);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 7px var(--space-2);
  width: 100%;
  min-width: 0;
}
.input--mono { font-family: var(--font-mono); letter-spacing: .04em; }
.input:focus { border-color: var(--accent-teal); outline: none; }

.input--native {
  width: 34px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--rule);
  background: var(--surface-raised);
  cursor: pointer;
}

.pop__error {
  margin: 0;
  font-size: var(--size-micro);
  color: var(--accent-coral);
}

/* ==================== Diagnostics ==================== */

body.is-checking main { padding-right: 340px; }

.diag {
  position: fixed;
  top: var(--bar-h);
  right: 0;
  bottom: 0;
  width: 340px;
  z-index: 50;
  background: var(--surface-canvas);
  border-left: 1px solid var(--rule-strong);
  display: flex;
  flex-direction: column;
}

.diag__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 var(--space-2) 0 var(--space-4);
  border-bottom: 1px solid var(--rule);
}

.diag__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* --- headline score --- */

.verdict {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--rule);
}

.verdict__score {
  font-family: var(--font-mono);
  font-size: var(--size-display);
  line-height: 1;
  font-weight: 500;
}
.verdict__of { font-family: var(--font-mono); font-size: var(--size-caption); color: var(--ink-tertiary); }
.verdict__label {
  margin-left: auto;
  font-size: var(--size-micro);
  text-transform: uppercase;
  letter-spacing: .12em;
}

.tallies {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.tally {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--size-caption);
  color: var(--ink-secondary);
}
.tally b {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--ink-primary);
}

/* --- sections --- */

.diag__section { display: flex; flex-direction: column; gap: var(--space-2); }
.diag__section > .label { margin-bottom: var(--space-1); }

/* --- one colour's card --- */

.card { border: 1px solid var(--rule); }

.card__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--rule);
}
.card__chip { width: 20px; height: 20px; flex: 0 0 auto; }
.card__hex {
  font-family: var(--font-mono);
  font-size: var(--size-caption);
  letter-spacing: .08em;
}
.card__name {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
}

/* --- a metric row, as in the reference --- */

.row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px var(--space-3);
  background: var(--surface-raised);
  border-bottom: 1px solid var(--rule);
}
.row:last-child { border-bottom: 0; }

.row__label { font-size: var(--size-caption); color: var(--ink-primary); }

.row__value {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--size-micro);
  color: var(--ink-secondary);
  white-space: nowrap;
}

.badge {
  flex: 0 0 auto;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 6px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.badge--5 { color: var(--accent-green); }
.badge--4 { color: var(--accent-teal); }
.badge--3 { color: var(--accent-mustard); }
.badge--2 { color: var(--accent-coral); }
.badge--1 { color: var(--accent-coral); background: var(--surface-selected); }

/* --- colour-blindness collisions --- */

.clash {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--accent-mustard);
  font-size: var(--size-caption);
  color: var(--ink-secondary);
}
.clash__pair { display: flex; flex: 0 0 auto; }
.clash__pair span { width: 16px; height: 16px; }
.clash__text { line-height: 1.45; }
.clash__text b { color: var(--ink-primary); font-weight: 500; }

.diag__ok {
  font-size: var(--size-caption);
  color: var(--ink-secondary);
  line-height: 1.5;
}

.diag__note {
  font-size: var(--size-micro);
  color: var(--ink-tertiary);
  line-height: 1.6;
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
}

/* ==================== Adjust palette ==================== */

/* Squeeze the board so the panel sits beside it rather than over it — the
   whole point is watching the colours change while you drag. */
body.is-adjusting main { padding-right: 300px; }

.adjust {
  position: fixed;
  top: var(--bar-h);
  right: 0;
  bottom: 0;
  width: 300px;
  z-index: 50;
  background: var(--surface-canvas);
  border-left: 1px solid var(--rule-strong);
  display: flex;
  flex-direction: column;
}

.adjust__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 var(--space-2) 0 var(--space-4);
  border-bottom: 1px solid var(--rule);
}

.adjust__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.adjust__foot {
  flex: 0 0 auto;
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--rule);
}
.adjust__foot .act { flex: 1 1 0; justify-content: center; }
.adjust__foot .act:not(.act--primary) { border-color: var(--rule-strong); }

.adjust__reset {
  align-self: flex-start;
  padding-left: 0;
  color: var(--ink-tertiary);
}
.adjust__reset:hover { background: transparent; color: var(--accent-coral); }

/* --- sliders --- */

.slider { display: flex; flex-direction: column; gap: var(--space-2); }

.slider__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.slider__val {
  font-family: var(--font-mono);
  font-size: var(--size-caption);
  color: var(--ink-primary);
}

.slider__track { position: relative; height: 16px; display: flex; align-items: center; }

.slider__grad {
  display: block;
  width: 100%;
  height: 6px;
}
.slider__grad--hue {
  background: linear-gradient(90deg,#ff0000,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000);
}
.slider__grad--sat { background: linear-gradient(90deg,#8a8a8a,#c86464,#ff0000); }
.slider__grad--bri { background: linear-gradient(90deg,#000000,#808080,#ffffff); }
.slider__grad--tmp { background: linear-gradient(90deg,#4a7fd4,#c9c9c9,#e8a04a); }

/* the neutral (no change) mark */
.slider__zero {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--surface-canvas);
  opacity: .85;
  pointer-events: none;
}

.slider input[type="range"] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 16px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.slider input[type="range"]:focus { outline: none; }
.slider input[type="range"]:focus-visible { outline: 2px solid var(--accent-teal); outline-offset: 3px; }

.slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 16px;
  background: var(--surface-canvas);
  border: 1px solid var(--ink-primary);
  cursor: grab;
}
.slider input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 16px;
  border-radius: 0;
  background: var(--surface-canvas);
  border: 1px solid var(--ink-primary);
  cursor: grab;
}

/* --- the split before/after board --- */

.split {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  overflow: hidden;
}

.split__half {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.split__hex {
  font-family: var(--font-mono);
  font-size: clamp(10px, 13cqw, 16px);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.split__tag {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .6;
}

/* ==================== Shades panel ==================== */

.shades {
  position: fixed;
  z-index: 60;
  width: 232px;
  background: var(--surface-canvas);
  border: 1px solid var(--rule-strong);
  display: flex;
  flex-direction: column;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  animation: arrive var(--dur-arrive) var(--ease);
}

.shades__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--rule);
}

.shades__list { display: flex; flex-direction: column; }

.shade {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 32px;
  padding: 0 var(--space-3);
  border: 0;
  background: transparent;   /* row colour is set inline */
  cursor: pointer;
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--size-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  position: relative;
}

.shade:hover { filter: brightness(1.08); }
[data-theme="light"] .shade:hover { filter: brightness(.94); }

/* the swatch you clicked, marked in place */
.shade--original { font-weight: 500; }
.shade--original::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: currentColor;
}

.shade__tag {
  margin-left: auto;
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: .14em;
  opacity: .7;
}

.shades__full {
  margin: var(--space-2);
  justify-content: center;
}

/* ==================== Toast ==================== */

.toast {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  background: var(--surface-raised);
  border: 1px solid var(--rule-strong);
  color: var(--ink-primary);
  font-size: var(--size-caption);
  letter-spacing: .04em;
  padding: 10px var(--space-4);
  animation: arrive var(--dur-arrive) var(--ease);
}

/* ==================== Responsive ==================== */

@media (max-width: 860px) {
  .brand__name { display: none; }
  .bar__sep { display: none; }
  .act { padding: 7px 8px; }
  .act kbd { display: none; }
}

/* Below ~800px the action row (≈750px) no longer fits beside the brand mark
   on one line, and the body clips overflow — so the stacked layout, which
   lets the bar wrap, has to begin here rather than at phone width. */
@media (max-width: 800px) {
  body { overflow: auto; }

  /* No room for a side panel: dock it to the bottom of the screen. */
  body.is-adjusting main { padding-right: 0; padding-bottom: 296px; }
  body.is-checking main { padding-right: 0; padding-bottom: 60vh; }
  .diag {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: 60vh;
    border-left: 0;
    border-top: 1px solid var(--rule-strong);
  }
  .adjust {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: 296px;
    border-left: 0;
    border-top: 1px solid var(--rule-strong);
  }
  .split { flex-direction: row; }

  /* Let the action row wrap onto a second line instead of pushing the page
     wider than the viewport. */
  .bar {
    height: auto;
    min-height: var(--bar-h);
    flex-wrap: wrap;
    padding: var(--space-2) var(--space-3);
  }
  .bar__actions { flex-wrap: wrap; }

  .board { flex-direction: column; min-height: 0; }

  .swatch {
    flex: 1 0 84px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--space-4);
  }

  .swatch__tools { opacity: 1; transform: none; margin-bottom: 0; order: 2; }
  .swatch__hex { order: 1; font-size: 15px; }
  .swatch__name { display: none; }

  /* Stacked layout: "before" reads as above, "after" as below. Centred so
     they clear the hex on the left and the tool row on the right. */
  .swatch__add {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 44px;
    height: 18px;
    opacity: .5;
  }
  .swatch__add--before { top: 0; bottom: auto; }
  .swatch__add--after { top: auto; bottom: 0; }
  .swatch__add span { width: 44px; height: 18px; }

  .hint { display: none; }
  .foot { justify-content: center; }
  .credit { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}