/* =========================================================================
   colorlab.css — the studio colour lab popover (js/colorlab.mjs).

   RIDES BOTH STUDIO THEMES, so it is written ENTIRELY in the core role
   vocabulary theme.css puts on every page (--fg, --bg, --surface, --edge*,
   --accent, the --lift elevations, color-mix() for every alpha). No literals,
   no donor names, no invented fonts — the house-look gate holds page sheets
   to exactly that, and this sheet is a page sheet.

   THE ONE THEME NUANCE LIVES WHERE THE THEME DOES. On the lab page the
   chamber buttons rewrite --accent, and the lab's law pins control chrome to
   jade — so studiolab.css (the exempt theme sheet) re-points this popover's
   accent and seats the row opener in its grid. This sheet stays theme-blind.

   ★ NO backdrop-filter, NO mix-blend-mode. The popover sits over a live 3D
   canvas; both force the compositor to re-sample it every frame (the
   studiolab.css performance law, kept here).

   ★ THE THUMBS WEAR A DOUBLE RING (--fg over --bg). They travel over the SV
   plane, which contains every colour including both ring colours — only the
   opposed pair stays visible on all of it, and it adapts to a light-ink
   owner for free.

   `--clab-def` (the species-default chip's fill) is written inline by
   colorlab.mjs from live data — the --cp / --card-glow precedent. */

.clab-pop {
  --clab-accent: var(--accent);

  position: fixed; z-index: 340; width: 282px;
  padding: 12px;
  color: var(--fg);
  /* ground, hairline and lift are the SURFACE REGISTER's word
     (terminal.css section 6b) - this sheet speaks geometry only */
  border: 1px solid;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.clab-pop[hidden] { display: none !important; }

.clab-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px; }
.clab-title {
  font: inherit; font-size: var(--tm-h-micro); letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
}
.clab-x {
  font: inherit; font-size: 16px; line-height: 1; cursor: pointer;
  color: var(--ink-3); background: transparent; border: 0; padding: 2px 4px;
}
.clab-x:hover { color: var(--fg); }

/* ---- the field: SV plane + hue rail -------------------------------- */
.clab-field-row { display: grid; grid-template-columns: minmax(0, 1fr) 18px; gap: 10px; }
.clab-sv {
  position: relative; height: 150px; cursor: crosshair;
  border: 1px solid; touch-action: none;
}
.clab-dot {
  position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; border: 2px solid var(--fg); pointer-events: none;
  box-shadow: 0 0 0 1px var(--bg), 0 1px 3px var(--veil-strong);
}
.clab-hue {
  position: relative; cursor: pointer; touch-action: none;
  border: 1px solid;
  /* the rail's ground is DATA - the hue circle itself - and rides as an
     inline style from colorlab.mjs, exactly like the SV plane's */
}
.clab-hue-thumb {
  position: absolute; left: -3px; right: -3px; height: 6px; margin-top: -3px;
  border: 2px solid var(--fg); border-radius: 0; pointer-events: none;
  box-shadow: 0 0 0 1px var(--bg);
}
.clab-sv:focus-visible, .clab-hue:focus-visible {
  outline: 2px solid var(--clab-accent); outline-offset: 2px;
}

/* ---- the value row -------------------------------------------------- */
.clab-out { display: flex; align-items: center; gap: 7px; margin-top: 11px; }
.clab-swatch {
  flex: 0 0 auto; width: 30px; height: 30px;
  border: 1px solid var(--edge-hair);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}
.clab-hex {
  flex: 1 1 auto; min-width: 0; width: 8ch; height: 30px; padding: 0 8px;
  font: inherit; font-size: 12px; letter-spacing: .04em; text-transform: lowercase;
  font-variant-numeric: tabular-nums;
  color: var(--fg); background: var(--veil-strong);
  border: 1px solid var(--edge-hair); border-radius: 0; outline: 0;
}
.clab-hex:focus { border-color: var(--clab-accent); }
.clab-n {
  display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  font: inherit; font-size: 9px; letter-spacing: .12em; color: var(--ink-3);
  text-transform: uppercase;
}
.clab-n input {
  width: 4.4ch; height: 26px; padding: 0 3px; text-align: center;
  font: inherit; font-size: 11px; font-variant-numeric: tabular-nums;
  color: var(--fg); background: var(--veil-strong);
  border: 1px solid var(--edge-hair); border-radius: 0; outline: 0;
  -moz-appearance: textfield; appearance: textfield;
}
.clab-n input::-webkit-outer-spin-button,
.clab-n input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.clab-n input:focus { border-color: var(--clab-accent); }

/* ---- tools ----------------------------------------------------------- */
.clab-tools { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.clab-default, .clab-eye {
  font: inherit; font-size: 10.5px; letter-spacing: .02em; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px; padding: 4px 9px; border-radius: 0;
  color: var(--ink-2);
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  border: 1px solid var(--edge-hair);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.clab-default::before {
  content: ''; width: 11px; height: 11px; background: var(--clab-def, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 35%, transparent);
}
.clab-default:hover, .clab-eye:hover { color: var(--fg); border-color: var(--clab-accent); }
.clab-default[hidden], .clab-eye[hidden] { display: none !important; }

/* ---- recent ---------------------------------------------------------- */
.clab-recent { display: flex; gap: 5px; margin-top: 10px; }
.clab-recent[hidden] { display: none !important; }
.clab-chip {
  width: 22px; height: 22px; padding: 0; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--fg) 22%, transparent);
  border-radius: 0;
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}
.clab-chip:hover { border-color: var(--clab-accent); }

/* ---- the row's own opener (rendered by studio.mjs into .channel-io) -- */
.clab-open {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 24px; padding: 0; cursor: pointer;
  color: var(--ink-3);
  background: transparent; border: 1px solid transparent; border-radius: 0;
}
.clab-open:hover, .clab-open:focus-visible {
  color: var(--fg); border-color: var(--clab-accent);
}
.clab-open svg { display: block; }

/* ---- phones: a bottom sheet, never a bubble the thumb covers --------- */
.clab-pop.clab-sheet {
  width: auto; max-width: none;
  clip-path: none; border-left: 0; border-right: 0; border-bottom: 0;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
.clab-pop.clab-sheet .clab-sv { height: 132px; }

@media (prefers-reduced-motion: no-preference) {
  .clab-pop { animation: clab-in .16s cubic-bezier(.2, .9, .3, 1); }
  @keyframes clab-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
  }
}