/* InstantPalette - tool (layer 4 of 4: tokens -> base -> site -> tool)
   Palette generator only: app shell, top bar, swatches, seams, action bar, hue scope, tool overlays.
   Generic buttons (.ib, .nav-a, .btn-o, .ghost), the brand mark (.wedge, .wm), dialog shells and toasts live in
   base.css; the page grid, rails, content section and footer live in site.css. */

/* ---------- Tool shell (first screen) ---------- */
.tool {
  position: relative;
  /* --anchor-h: the height of an AdSense bottom anchor ad while one shows (app.watchAnchorAd), so the action bar
     ends above it instead of under a sticky ad */
  height: calc(100vh - var(--anchor-h, 0px));
  height: calc(100svh - var(--anchor-h, 0px));
  min-height: 320px;
  display: grid;
  grid-template-rows: var(--top-h) minmax(0, 1fr) auto;
  container: tool / inline-size;
  background: var(--ground);
}
/* A bottom anchor ad on a short landscape phone (740x360 minus 62px): the tool may drop below 320px, so its action
   bar still ends above the ad */
.anchor-ad .tool { min-height: 240px; }

/* ---------- Top bar ---------- */
.top {
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
  padding: 0 8px 0 16px;
}
.brand { display: flex; align-items: center; gap: 10px; flex: none; padding-right: 6px; }
.brand-t { margin: 0; display: flex; flex-direction: column; font-weight: 400; }
.model { font: 500 13px/16px var(--f-sans); color: var(--ink-2); }

/* Front panel: labelled controls separated by hairlines */
.panel { display: flex; align-self: stretch; min-width: 0; }
.ctl {
  position: relative;
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  padding: 0 12px;
}
.ctl::before {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px;
  width: 1px; background: var(--line);
}
.ctl-l { font: 400 12px/14px var(--f-sans); color: var(--ink-2); white-space: nowrap; }
.l-short, .v-short { display: none; }
.pill {
  height: 30px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 6px 0 7px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--raised);
  font: 500 14px/1 var(--f-sans); white-space: nowrap;
  align-self: flex-start;
  transition: border-color var(--dur-1) var(--ease);
}
/* Every :hover in this file is limited to hover-capable fine pointers (touch browsers keep :hover after a tap) */
@media (hover: hover) and (pointer: fine) { .pill:hover { border-color: var(--ink-3); } }
.pill[aria-expanded="true"] { border-color: var(--ink-1); }
.pill .scope-mini { width: 20px; height: 20px; }
.pill-v.mono { font: 500 12px/1 var(--f-mono); }

/* Stepper: no overflow:hidden, so the focus ring of - and + is never clipped */
.stepper {
  display: inline-flex; align-items: stretch;
  height: 30px; align-self: flex-start;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--raised);
}
.stepper button { width: 30px; display: grid; place-items: center; color: var(--ink-1); }
.stepper button:first-child { border-radius: 5px 0 0 5px; }
.stepper button:last-child { border-radius: 0 5px 5px 0; }
@media (hover: hover) and (pointer: fine) { .stepper button:hover { background: var(--hover); } }
.stepper button:active { background: var(--press); }
/* At 2 or 8 colors the button stays focusable (aria-disabled, not disabled), so keyboard focus is never lost */
.stepper button:disabled,
.stepper button[aria-disabled="true"],
.stepper button[aria-disabled="true"]:hover,
.stepper button[aria-disabled="true"]:active { color: var(--ink-3); cursor: default; background: none; }
.stepper button .i { width: 16px; height: 16px; }
.stepper output {
  min-width: 28px; display: grid; place-items: center;
  font: 500 13px/1 var(--f-mono); font-variant-numeric: tabular-nums;
  border-inline: 1px solid var(--line);
}

.seg {
  display: inline-flex; align-self: flex-start;
  height: 30px; padding: 2px; gap: 2px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--sunken);
}
.seg button {
  padding: 0 7px; border-radius: 4px;
  font: 500 12px/1 var(--f-mono); color: var(--ink-2);
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) { .seg button:hover { color: var(--ink-1); } }
.seg button[aria-checked="true"] { background: var(--raised); color: var(--ink-1); box-shadow: 0 0 0 1px var(--line-2); }
.fmt-pill { display: none; }

/* Settings summary chip (phones, landscape, narrow tool) */
.chip {
  display: none; align-items: center; gap: 8px;
  height: 44px; min-width: 0; max-width: 260px;
  margin-left: auto;
  padding: 0 8px 0 7px;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--raised); text-align: left;
}
@media (hover: hover) and (pointer: fine) { .chip:hover { border-color: var(--ink-3); } }
.chip[aria-expanded="true"] { border-color: var(--ink-1); }
.chip .scope-mini { width: 26px; height: 26px; flex: none; }
.chip-t { display: flex; flex-direction: column; min-width: 0; }
.chip-1 { font: 600 13px/16px var(--f-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-2 { font: 400 12px/15px var(--f-sans); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.top-r { display: flex; align-items: center; gap: 2px; margin-left: auto; flex: none; }
/* Tools menu (site.css .menu-d / .menu-pop): only where the top bar has the room for it. Narrower tools reach
   the suite through the More sheet (phones, landscape) and the footer. */
.top-r .tools-m { display: none; }
@container tool (min-width: 820px) { .top-r .tools-m { display: block; } }

/* Top-bar density steps, measured on the tool column width (not the viewport) */
@container tool (max-width: 1119px) {
  .ctl-fmt .seg { display: none; }
  .fmt-pill { display: inline-flex; }
}
@container tool (max-width: 979px) {
  .l-long, .v-long { display: none; }
  .l-short, .v-short { display: inline; }
  .ctl { padding: 0 10px; }
  .top-r .nav-a { padding-inline: 8px; }
}
@container tool (max-width: 819px) {
  .panel { display: none; }
  .chip { display: inline-flex; }
  .top-r { margin-left: 4px; }
}

/* ---------- Palette ---------- */
.palette {
  position: relative;
  display: flex;
  min-width: 0; min-height: 0;
  overflow: hidden;
  background: var(--ground);
}
.sw {
  --pad: 16px;
  --wdth: 87.5%;
  --adv: var(--adv-87);
  --code-min: 16px;
  --code-max: 34px;
  --avail: calc(100cqi - 2 * var(--pad) - 14px);
  position: relative;
  flex: 1 1 0;
  min-width: 0; min-height: 0;
  background: var(--sw);
  color: var(--ink);
  container: sw / size;
  transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
  transition-delay: calc(var(--i, 0) * 20ms);
}
.sw.is-locked { transition: none; }
.sw ::selection { background: var(--ink); color: var(--sw); }
/* Dual focus ring: visible on every colour */
.sw :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--anti); }

/* Lock tab: always visible; the number is the lock key (1-8) */
.sw-lock {
  position: absolute; top: 12px; left: calc(var(--pad) - 7px);
  height: 32px; min-width: 32px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0 8px 0 6px;
  border-radius: var(--r);
  color: var(--ink);
  font: 500 13px/1 var(--f-mono); font-variant-numeric: tabular-nums;
  z-index: var(--z-tools);
}
.sw-lock .i { width: 17px; height: 17px; }
.sw-lock .lk-w { display: none; font: 600 13px/1 var(--f-sans); }
@media (hover: hover) and (pointer: fine) { .sw-lock:hover { box-shadow: inset 0 0 0 1.5px var(--ink); } }
.sw-lock[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ink); }
.sw-lock[aria-pressed="true"] .lk-w { display: inline; }
@container sw (max-width: 129px) { .sw-lock[aria-pressed="true"] .lk-w { display: none; } }

/* Desktop tool stack (revealed on hover / focus-within, fine pointers only). Opacity only, never visibility,
   so every tool stays in the tab order. */
.sw-tools {
  position: absolute; left: 50%; top: 44%;
  transform: translate(-50%, -50%);
  display: none; flex-direction: column; gap: 8px;
  z-index: var(--z-tools);
}
/* The 40px buttons always take hits, even while the stack is still at opacity 0. A real pointer over a
   .tb is by definition over the .sw, so the stack is already fading in; but a screen-reader user, an
   automation harness or an AI agent clicks the announced button straight from the accessibility tree
   with no hover first, and without this the click falls through to the swatch and nothing happens. */
.tb {
  position: relative;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  pointer-events: auto;
}
@media (hover: hover) and (pointer: fine) { .tb:hover { background: var(--ink); color: var(--sw); } }
.tb:active { transform: translateY(1px); }
.tb[aria-disabled="true"] { border-style: dashed; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) { .tb[aria-disabled="true"]:hover { background: none; color: var(--ink); } }
/* Tooltip for the tool stack (opaque chip, never on the colour) */
.tb[data-tip]::after {
  content: attr(data-tip);
  position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
  padding: 6px 8px; border-radius: var(--r-sm);
  background: var(--ink-1); color: var(--ground);
  font: 500 12px/1.2 var(--f-sans); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-1) var(--ease);
}
.tb[data-tip]:hover::after, .tb[data-tip]:focus-visible::after { opacity: 1; transition-delay: 300ms; }
.tb[data-tip]:focus-visible::after { transition-delay: 0ms; }
.sw.is-last .tb[data-tip]::after { left: auto; right: calc(100% + 8px); }
/* Narrow columns: the 77px seam chips overflow into the column at 50% height, so the stack ends above them */
@container sw (max-width: 150px) { .sw-tools { top: 34%; } }

/* Touch: More is always visible (the lock tab is always visible everywhere) */
.sw-more {
  position: absolute; top: 6px; right: 6px;
  width: 44px; height: 44px;
  display: none; place-items: center;
  border-radius: 10px; color: var(--ink);
  z-index: var(--z-tools);
}
.sw-more .i { width: 22px; height: 22px; }

@media (hover: hover) and (pointer: fine) {
  .sw-tools {
    display: flex; opacity: 0; pointer-events: none;
    transform: translate(-50%, calc(-50% + 6px));
    transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
  }
  .sw:hover .sw-tools,
  .sw:focus-within .sw-tools { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
}
@media (hover: none), (pointer: coarse) {
  .sw-more { display: grid; }
  .sw-lock { top: 6px; left: 6px; height: 44px; min-width: 44px; padding: 0 10px 0 8px; }
  .sw-lock .i { width: 20px; height: 20px; }
  @container sw (max-width: 111px) { .sw-more { top: 54px; left: 6px; right: auto; } }
}

/* Readout block: copy button (code + name), then the legibility readout */
.sw-read {
  position: absolute; left: var(--pad); right: var(--pad); bottom: calc(var(--pad) + 2px);
  display: flex; flex-direction: column; align-items: flex-start;
  min-width: 0;
}
.sw-copy {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  min-height: 44px; min-width: 0;
  max-width: calc(100% + 12px);
  margin: 0 0 0 -6px; padding: 4px 6px 5px;
  border-radius: var(--r-sm);
  color: var(--ink);
  cursor: copy;
}
@media (hover: hover) and (pointer: fine) { .sw-copy:hover { box-shadow: inset 0 0 0 1.5px var(--ink); } }
.sw-code {
  display: inline-flex; flex-wrap: wrap; align-items: baseline;
  column-gap: .42em; row-gap: 0;
  max-width: 100%;
  font-family: var(--f-mono); font-weight: 500;
  font-stretch: var(--wdth);
  font-size: clamp(var(--code-min), calc(var(--avail) / (var(--cc, var(--chars)) * var(--adv))), var(--code-max));
  line-height: 1.12;
  font-variant-numeric: tabular-nums;
}
.sw-code .fn { flex-basis: 100%; font: 500 12px/18px var(--f-mono); font-stretch: 100%; }
.sw-code .p { white-space: nowrap; }
.sw-name {
  margin-top: 3px; max-width: 100%;
  font: 500 14px/18px var(--f-sans);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Copied: in-place swap with a drawn check */
.sw-copy.is-copied .sw-code { font-family: var(--f-sans); font-weight: 600; font-stretch: 100%; align-items: center; }
.sw-copy.is-copied .sw-code .i { width: .9em; height: .9em; stroke-width: 2.25; stroke-dasharray: 24; stroke-dashoffset: 24; animation: draw-check 280ms var(--ease) forwards; }
@keyframes draw-check { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .sw-copy.is-copied .sw-code .i { stroke-dashoffset: 0; } }

/* Legibility readout: "Aa 11.9 AAA" in two faces (sans for Aa and level, mono for the ratio) */
.sw-aa {
  margin: 6px 0 0;
  display: flex; align-items: baseline; gap: 6px;
  white-space: nowrap;
  font: 500 13px/18px var(--f-mono); font-variant-numeric: tabular-nums;
}
.sw-aa b { font: 600 16px/18px var(--f-sans); }
.sw-aa .lv { font: 600 12px/18px var(--f-sans); letter-spacing: .03em; }

@container sw (max-width: 150px) {
  .sw-read, .sw-lock { --pad: 12px; }
  .sw-name { font-size: 13px; }
  .sw-code { --wdth: 75%; --adv: var(--adv-75); }
}
@container sw (max-width: 127px) {
  .sw-aa { display: grid; grid-template-columns: auto auto; justify-content: start; column-gap: 6px; row-gap: 0; }
  .sw-aa .lv { grid-column: 1 / -1; }
}
@container sw (min-width: 260px) {
  .sw-code { --wdth: 100%; --adv: var(--adv-100); }
}
@container sw (min-width: 400px) {
  .sw-code { --code-max: 46px; }
}
/* Multi-part formats: one value per line in narrow columns, the same in every column */
@container sw (max-width: 199px) {
  .sw-code.multi { --cc: var(--chars1); --code-max: 22px; }
  .sw-code.multi .p { flex-basis: 100%; }
}
@container sw (max-width: 329px) {
  .sw-code.long { --cc: var(--chars1); --code-max: 24px; }
  .sw-code.long .p { flex-basis: 100%; }
}

/* View transitions (generate): each unlocked swatch cross-fades; the root never animates */
::view-transition-group(root) { animation: none; }
::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
  animation-duration: 180ms; animation-timing-function: var(--ease);
}

/* ---------- Neighbor seam chips ---------- */
.seams { position: absolute; inset: 0; pointer-events: none; z-index: var(--z-seam); }
/* Flex (not grid) centring: the 77px chip overflows the 28px strip equally on both sides, so it sits on the joint */
.seam {
  position: absolute; top: 22%; bottom: 22%; left: var(--pos);
  width: 28px; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center;
}
.seam-chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 26px; padding: 0 7px 0 8px;
  border-radius: var(--r-sm);
  background: var(--raised); color: var(--ink-1);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-chip);
  font: 500 12px/1 var(--f-mono); font-variant-numeric: tabular-nums;
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-1) var(--ease);
}
.seam-chip .i { width: 14px; height: 14px; stroke-width: 2.4; }
/* Touch: a 44px-tall invisible hit area; the chip itself stays 26px */
@media (hover: none), (pointer: coarse) {
  .seam-chip { position: relative; flex: none; }
  .seam-chip::before { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%); }
}
.seam-chip.fail { border-style: dashed; border-color: var(--ink-3); }
.seam-chip:focus-visible { outline: 2px solid var(--ink-1); outline-offset: 2px; }
.seam-chip:focus-visible,
.palette.filter-on .seam-chip { opacity: 1; pointer-events: auto; }
@media (hover: hover) and (pointer: fine) {
  .seam { pointer-events: auto; }
  .seam:hover .seam-chip { opacity: 1; pointer-events: auto; }
  .seam-chip:hover { border-color: var(--ink-3); }
  .seam-chip.fail:hover { border-color: var(--ink-1); }
}

/* ---------- Action bar ---------- */
.act {
  display: flex; align-items: center; gap: 8px;
  min-height: var(--act-h); min-width: 0;
  padding: 10px 12px 10px 16px;
}
.gen {
  flex: none;
  height: 44px; min-width: 176px;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 0 11px 0 18px;
  border-radius: var(--r);
  background: var(--primary); color: var(--on-primary);
  font: 600 16px/1 var(--f-sans);
  transition: background-color var(--dur-1) var(--ease), transform 80ms;
}
@media (hover: hover) and (pointer: fine) { .gen:hover { background: color-mix(in srgb, var(--primary) 86%, var(--ground)); } }
.gen:active { transform: translateY(1px); }
.gen:focus-visible { outline-offset: 3px; }
.gen kbd {
  background: transparent; color: var(--on-primary);
  border-color: color-mix(in srgb, var(--on-primary) 42%, var(--primary));
}
/* Up to two 18px lines (36px fits the 64px bar), so the remedy at the end of a filter status is never cut off */
.status {
  flex: 1 1 auto; min-width: 0;
  margin: 0 0 0 8px;
  font: 400 13px/18px var(--f-sans); color: var(--ink-2);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; text-wrap: pretty;
}
.status kbd { padding: 2px 5px 1px; }
.status b { color: var(--ink-1); font-weight: 600; }
.acts { display: flex; align-items: center; gap: 2px; flex: none; margin-left: auto; }
.btn {
  height: 40px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 10px;
  border-radius: var(--r);
  font: 500 14px/1 var(--f-sans); color: var(--ink-1);
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--hover); } }
.btn:active { background: var(--press); }
.btn.ic { width: 40px; padding: 0; justify-content: center; }
.btn .i-chev { width: 14px; height: 14px; margin-left: -3px; }
.btn[aria-expanded="true"] { background: var(--sunken); }
.btn[aria-disabled="true"] { color: var(--ink-3); cursor: default; }
.btn[aria-disabled="true"]:hover, .btn[aria-disabled="true"]:active { background: none; }
.sep { width: 1px; height: 24px; background: var(--line); margin: 0 6px; flex: none; }
.m-only { display: none; }
/* Drop the teaching line first, then labels */
@container tool (max-width: 999px) { .status { display: none; } }
@container tool (max-width: 779px) {
  .acts .btn:not(.ic) { width: 40px; padding: 0; justify-content: center; }
  .acts .btn .lbl, .acts .btn .i-chev { display: none; }
}
/* A toast in the bar of a narrow tool (rails at 1280-1760px, tablets): icon-only actions while it shows, so the
   toast fits inside the bar instead of covering the swatch readouts (app.placeToasts toggles .compact) */
.act.compact .acts .btn:not(.ic) { width: 40px; padding: 0; justify-content: center; }
.act.compact .acts .btn .lbl, .act.compact .acts .btn .i-chev { display: none; }
@media (hover: none), (pointer: coarse) {
  .gen kbd { display: none; }
  .gen { justify-content: center; }
  .btn, .btn.ic, .acts .btn:not(.ic) { min-width: 44px; height: 44px; }
}

/* ---------- Phones, portrait: stacked rows ---------- */
@media (max-width: 767.98px) and (orientation: portrait), (max-width: 767.98px) and (min-height: 501px) {
  :root { --top-h: 56px; --act-h: 68px; }
  .top { padding: 0 8px 0 12px; gap: 8px; }
  .brand { gap: 9px; padding-right: 0; }
  .wedge { width: 22px; height: 22px; }
  .wm { font-size: 17px; line-height: 19px; }
  .model { font-size: 12px; line-height: 15px; }
  .top-r { display: none; }
  .panel { display: none; }
  .chip { display: inline-flex; max-width: none; flex: 0 1 auto; padding-right: 10px; }
  .chip .i-chev { display: none; }
  .chip .scope-mini { width: 24px; height: 24px; }

  .palette { flex-direction: column; }
  .sw { --code-min: 14px; --code-max: 22px; --wdth: 100%; --adv: var(--adv-100); --avail: calc(100cqi - 222px); }
  .sw-tools { display: none !important; }
  .sw-more { display: grid; top: 50%; right: 2px; transform: translateY(-50%); }
  .sw-lock {
    top: 50%; left: auto; right: 48px; transform: translateY(-50%);
    width: 44px; height: 44px; padding: 0;
    flex-direction: column; justify-content: center; gap: 1px;
    font-size: 12px;
  }
  .sw-lock .i { width: 18px; height: 18px; }
  .sw-lock .lk-w { display: none !important; }
  .sw-read {
    left: 12px; right: 100px; top: 0; bottom: 0;
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-content: center; align-items: center; column-gap: 8px;
  }
  .sw-copy { grid-column: 1; justify-self: start; margin-left: -6px; }
  .sw-name { font-size: 13px; line-height: 16px; margin-top: 1px; }
  .sw-code.long { --wdth: 75%; --adv: var(--adv-75); }
  .sw-code.multi .p, .sw-code.long .p { flex-basis: auto; }
  .sw-code.multi, .sw-code.long { --cc: var(--chars); }
  .sw-aa {
    grid-column: 2; margin: 0;
    display: grid; grid-template-columns: auto auto; justify-items: end; align-items: baseline;
    column-gap: 5px; row-gap: 0;
  }
  .sw-aa .lv { grid-column: 1 / -1; }
  /* Set on the code itself: the 400px-wide swatch rule above sets --code-max on .sw-code, so a value on .sw
     would never reach it (rows are 360-767px wide). */
  .sw .sw-code { --code-max: 22px; }
  @container sw (min-height: 150px) { .sw .sw-code { --code-max: 26px; } }
  /* Rows under 360px wide (320px phones, large Android display sizes): OKLCH may go down to 12px, so its three
     parts still fit one line beside the readout (17 chars x 0.60 x 12px + gaps = about 128px of the 139px slot) */
  @container sw (max-width: 359.98px) { .sw .sw-code.long { --code-min: 12px; } }
  /* Rows under 60px tall (8 colors on a 568px-tall screen): the "oklch" label goes (the values and the Format
     setting still tell the format), so code + name stay inside the row */
  @container sw (max-height: 59.98px) { .sw-code .fn { display: none; } }

  .seam { top: var(--pos); bottom: auto; left: 0; right: 0; width: auto; height: 28px; transform: translateY(-50%); }

  .act { gap: 0; padding: 8px 4px max(8px, env(safe-area-inset-bottom)) 8px; }
  /* Shrinkable: below 370px (320px phones, large Android display sizes) Generate gives up the width, so More stays on
     screen and the page never gets wider than the device (172px wide at 320) */
  .gen { flex: 1 1 60vw; min-width: 0; height: 52px; justify-content: center; font-size: 17px; border-radius: 10px; margin-right: 4px; }
  .status { display: none; }
  .acts { flex: none; gap: 0; margin-left: 0; }
  .d-only { display: none !important; }
  .m-only { display: inline-flex; }
  .acts .btn, .acts .btn.ic { width: 44px; min-width: 44px; height: 48px; padding: 0; justify-content: center; }
  .acts .btn .lbl { display: none; }
}

/* ---------- Landscape phones: columns + compact bars ---------- */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --top-h: 46px; --act-h: 58px; }
  .top { padding: 0 8px 0 max(12px, env(safe-area-inset-left)); }
  .brand-t { flex-direction: row; align-items: baseline; gap: 10px; }
  .wm { font-size: 16px; line-height: 18px; }
  .model { font-size: 13px; line-height: 16px; }
  .wedge { width: 20px; height: 20px; }
  .top-r { display: none; }
  .panel { display: none; }
  .chip { display: inline-flex; height: 40px; }
  .sw { --pad: 12px; --code-max: 22px; }
  .sw .sw-code, .sw .sw-code.long, .sw .sw-code.multi { --code-max: 22px; }
  .sw-read { --pad: 12px; }
  .sw-name { font-size: 13px; }
  .sw-lock[aria-pressed="true"] .lk-w { display: none; }
  /* Undo left, wide centred Generate, Share + More right */
  .act { gap: 6px; padding: 6px max(8px, env(safe-area-inset-right)) 6px max(8px, env(safe-area-inset-left)); }
  .acts { display: contents; }
  .acts [data-act="undo"] { order: 0; }
  .gen { order: 1; flex: 1 1 auto; height: 44px; min-width: 0; max-width: 640px; margin-inline: auto; justify-content: center; }
  .acts [data-act="share"] { order: 2; }
  #btn-more { order: 3; }
  .status { display: none; }
  .d-only { display: none !important; }
  .m-only { display: inline-flex; }
  .acts .btn { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .acts .btn .lbl { display: none; }
}

/* Touch, narrow and short columns (8 colors on a landscape phone): More sits under the lock (54-98px from the
   swatch top), so the stacked RGB / HSL / OKLCH code must end below it. Smaller, tighter lines keep the copy
   target clear of More; on the shortest swatches the format label goes (the values still tell the format). */
@media (hover: none), (pointer: coarse) {
  @container sw (max-width: 111px) and (max-height: 299px) {
    .sw .sw-code.multi, .sw .sw-code.long { --code-max: 16px; line-height: 1.05; }
    .sw-code .fn { line-height: 14px; }
  }
  @container sw (max-width: 111px) and (max-height: 249px) {
    .sw-code .fn { display: none; }
  }
}

/* ---------- Hue scope (signature) ---------- */
.scope-mini, .scope-full, .ss-scope, .tpl { display: inline-block; flex: none; }
.scope-mini svg, .scope-full svg, .ss-scope svg, .tpl svg { width: 100%; height: 100%; display: block; overflow: visible; }
.sc-ring { fill: none; stroke: var(--ink-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.scope-mini .sc-ring { stroke: var(--ink-1); }
.sc-grat { fill: none; stroke: var(--line-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sc-tick { stroke: var(--ink-3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sc-tick.major { stroke: var(--ink-2); }
.sc-spoke { stroke: var(--ink-1); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 3 3; }
.scope-mini .sc-spoke, .tpl .sc-spoke { stroke-dasharray: none; }
.sc-arc { fill: var(--sunken); stroke: none; }
.sc-node { fill: var(--raised); stroke: var(--ink-1); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.sc-dot { stroke: var(--ink-1); stroke-width: 1.25; vector-effect: non-scaling-stroke; transition: cx var(--dur-3) var(--ease), cy var(--dur-3) var(--ease); }
.sc-dot.locked { stroke-width: 2.5; }
.sc-lbl { font: 500 6.7px var(--f-mono); fill: var(--ink-2); }   /* 6.7 x 216/120 = 12.06px in the full scope */
.sc-center { fill: var(--ink-2); }
.ss-scope .sc-lbl { display: none; }

/* ---------- Harmony / contrast / format popovers ---------- */
.pop-harmony { width: 600px; }
.harm { display: grid; grid-template-columns: 216px 1fr; gap: 8px 18px; padding: 2px 16px 12px; align-items: start; }
.scope-fig { margin: 4px 0 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.scope-full { width: 216px; height: 216px; }
.scope-fig figcaption { font-size: 12px; line-height: 1.45; color: var(--ink-2); text-align: center; max-width: 190px; }
.harm-list, .opt-list { display: flex; flex-direction: column; gap: 2px; }
.opt-list { padding: 0 8px 8px; }
.opt {
  display: grid; grid-template-columns: 28px 1fr auto; align-items: center; column-gap: 10px;
  min-height: 42px; padding: 6px 10px 6px 8px;
  border-radius: var(--r); text-align: left;
}
@media (hover: hover) and (pointer: fine) { .opt:hover { background: var(--hover); } }
.opt[aria-checked="true"] { background: var(--sunken); box-shadow: inset 0 0 0 1px var(--line-2); }
.opt .tpl { width: 28px; height: 28px; grid-row: span 2; align-self: start; margin-top: 2px; }
.opt-n { font: 600 14px/1.25 var(--f-sans); }
.opt-n.mono { font: 500 13px/1.25 var(--f-mono); }
.opt-a { font: 500 12px/1 var(--f-mono); color: var(--ink-2); white-space: nowrap; }
.opt-d { grid-column: 2 / -1; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.opt .radio {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--ink-3); justify-self: center;
}
.opt[aria-checked="true"] .radio { border: 5px solid var(--ink-1); }
.harm-note { margin: 4px 0 0; padding: 0 2px; font-size: 12px; line-height: 1.45; color: var(--ink-2); }
.angles {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 10px 16px 14px; border-top: 1px solid var(--line);
  font: 500 12px/1 var(--f-mono); font-variant-numeric: tabular-nums;
}
.angles .t { font: 500 12px/1 var(--f-sans); color: var(--ink-2); margin-right: 2px; }
.angles .a { display: inline-flex; align-items: center; gap: 6px; }
.angles .dot { width: 12px; height: 12px; border-radius: 3px; background: var(--c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink-1) 25%, transparent); }

/* ---------- Pair details (seam chip): anchored popover on desktop, sheet on phones ---------- */
.pop.pop-pair { width: 344px; }
.pair-bd { padding: 2px 16px 14px; display: flex; flex-direction: column; gap: 12px; }
.sheet .pair-bd { padding: 4px 16px 12px; }
.pair-spec { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pair-spec figure { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
/* Only the "Aa" specimen uses the pair colours (it may be illegible on purpose); its caption is chrome text */
.pair-spec .ps {
  min-height: 64px; padding: 8px 12px;
  display: flex; align-items: center;
  border-radius: var(--r);
  background: var(--bg); color: var(--fg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink-1) 14%, transparent);
}
.pair-spec b { font: 600 20px/1.1 var(--f-sans); }
.pair-spec figcaption { font: 500 12px/1.3 var(--f-sans); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pair-ratio { margin: 0; display: flex; align-items: baseline; gap: 10px; font: 500 20px/1.2 var(--f-mono); font-variant-numeric: tabular-nums; }
.pair-ratio small { font: 400 13px/1.3 var(--f-sans); color: var(--ink-2); }
.pair-rows { list-style: none; margin: 0; padding: 0; }
.pair-rows li {
  display: grid; grid-template-columns: 18px 1fr auto; align-items: center; column-gap: 10px;
  min-height: 40px; border-top: 1px solid var(--line);
  font-size: 14px;
}
.pair-rows li .i { width: 18px; height: 18px; stroke-width: 2.2; }
.pair-rows .v { font: 600 12px/1 var(--f-sans); letter-spacing: .03em; color: var(--ink-2); }

/* ---------- Export: two panes (list + live code preview) ---------- */
.pop-export { width: 640px; }
.xp { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 12px; padding: 0 12px 12px 8px; }
.menu { display: flex; flex-direction: column; padding: 0 8px 8px; }
.xp .menu { padding: 0; }
.menu-h { margin: 0; padding: 10px 8px 6px; font: 500 12px/1 var(--f-sans); color: var(--ink-2); }
.menu-h:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 14px; }
.mi {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; column-gap: 12px;
  min-height: 44px; padding: 6px 8px;
  border-radius: var(--r); text-align: left;
}
@media (hover: hover) and (pointer: fine) { .mi:hover { background: var(--hover); } }
.mi[aria-selected="true"] { background: var(--sunken); box-shadow: inset 0 0 0 1px var(--line-2); }
.mi .i { grid-row: 1 / span 2; color: var(--ink-2); }
.mi-n { font: 500 14px/1.3 var(--f-sans); }
.mi-p { grid-column: 2; font: 500 12px/1.35 var(--f-mono); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mi kbd { grid-row: 1 / span 2; grid-column: 3; color: var(--ink-2); }
.xp-pre { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--ground); border: 1px solid var(--line); border-radius: 10px; }
.xp-pre-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 12px; border-bottom: 1px solid var(--line); font: 600 13px/1 var(--f-sans); }
.xp-pre-h .btn-o { height: 32px; min-height: 32px; padding: 0 10px; font-size: 13px; }
.xp-pre pre { margin: 0; padding: 12px; overflow: auto; max-height: 300px; font: 500 12px/1.65 var(--f-mono); color: var(--ink-1); tab-size: 2; }

/* ---------- Colour editor ---------- */
.pop-editor { width: 348px; }
.ed { padding: 2px 16px 12px; display: flex; flex-direction: column; gap: 12px; }
.ed-prev { display: flex; height: 64px; border-radius: var(--r); overflow: hidden; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink-1) 14%, transparent); }
.ed-prev span { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 6px 10px; }
.ed-prev em { font: 600 12px/1.3 var(--f-sans); font-style: normal; }
.ed-prev small { font: 500 12px/1.3 var(--f-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-row { display: flex; gap: 8px; }
.ed-hex { flex: 1; min-width: 0; position: relative; }
.ed-hex input {
  width: 100%; height: 44px; padding: 0 48px 0 12px;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--ground); color: var(--ink-1);
  font: 500 16px/1 var(--f-mono); text-transform: uppercase; font-variant-numeric: tabular-nums;
}
.ed-hex input:focus-visible { outline: 2px solid var(--ink-1); outline-offset: 1px; }
.ed-hex input[aria-invalid="true"] { border-style: dashed; border-color: var(--ink-1); }
.ed-hex .ed-copy { position: absolute; right: 2px; top: 2px; width: 40px; height: 40px; }
.ed-err { margin: -6px 0 0; font-size: 13px; line-height: 1.4; color: var(--ink-1); }
.ed-err:empty { display: none; }
.ed-tools { display: flex; gap: 8px; }
.ed-tools .btn-o { flex: 1; height: 44px; }
.sliders { display: flex; flex-direction: column; gap: 6px; }
.sl { display: grid; grid-template-columns: 14px 1fr 46px; align-items: center; gap: 10px; }
.sl-k { font: 500 13px/1 var(--f-mono); color: var(--ink-2); }
.sl output { font: 500 13px/1 var(--f-mono); text-align: right; font-variant-numeric: tabular-nums; }
.sl input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; margin: 0; background: transparent; cursor: pointer; }
.sl input[type="range"]::-webkit-slider-runnable-track { height: 12px; border-radius: 6px; background: var(--track); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .14); }
.sl input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -5px; border-radius: 50%;
  background: var(--thumb, #fff);
  border: 2px solid var(--ink-1);
  box-shadow: 0 0 0 2px var(--raised), 0 1px 4px rgb(0 0 0 / .35);
}
.sl input[type="range"]::-moz-range-track { height: 12px; border-radius: 6px; background: var(--track); }
.sl input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--thumb, #fff); border: 2px solid var(--ink-1); box-shadow: 0 0 0 2px var(--raised); }
.sl input[type="range"]:focus-visible { outline: none; }
.sl input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--raised), 0 0 0 4px var(--ink-1); }
.sl input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--raised), 0 0 0 4px var(--ink-1); }
.ed-read { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding-top: 12px; border-top: 1px solid var(--line); font: 500 12px/1.4 var(--f-mono); }
.ed-read dt { color: var(--ink-2); font-family: var(--f-sans); font-size: 12px; }
.ed-read dd { margin: 0; font-variant-numeric: tabular-nums; }
.ed-status { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.ed-status .i { width: 16px; height: 16px; }
.ed-status b { color: var(--ink-1); font-weight: 600; }

/* ---------- Settings sheet (phones) / anchored panel (narrow desktop) ---------- */
.ss-h { margin: 0 0 8px; font: 600 13px/1.2 var(--f-sans); color: var(--ink-1); }
.ss-hrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.ss-hrow .ss-h { margin: 0 0 2px; }
.ss-desc { margin: 0; font-size: 13px; line-height: 1.35; color: var(--ink-2); }
.ss-scope { width: 52px; height: 52px; }
.harm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hchip {
  display: flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 6px 8px;
  border: 1px solid var(--line-2); border-radius: var(--r);
  font: 500 14px/1.2 var(--f-sans); text-align: left;
}
.hchip .tpl { width: 24px; height: 24px; }
.hchip[aria-checked="true"] { border-color: var(--ink-1); box-shadow: inset 0 0 0 1px var(--ink-1); font-weight: 600; }
.ss-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ss-row .ss-h { margin: 0; }
.stepper-lg { height: 48px; }   /* border-box: 46px-tall buttons */
.stepper-lg button { width: 48px; }
.stepper-lg button:first-child { border-radius: 7px 0 0 7px; }
.stepper-lg button:last-child { border-radius: 0 7px 7px 0; }
.stepper-lg button .i { width: 20px; height: 20px; }
.stepper-lg output { min-width: 56px; font-size: 18px; }
/* Size the radios, not the track: every option is a 44px+ target; the 2px rim + 1px border add 6px */
.seg-lg { display: flex; height: auto; width: 100%; }
.seg-lg button { flex: 1; min-height: 44px; font: 500 14px/1 var(--f-sans); display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.seg-lg button .mono { font-size: 12px; color: var(--ink-2); }
.seg-lg[data-seg="format"] button { font: 500 13px/1 var(--f-mono); }
.btn-done { height: 44px; padding: 0 16px; }

/* Settings as an anchored panel (narrow desktop / tablet) */
.sheet.as-pop {
  inset: auto; width: 392px; max-width: calc(100vw - 16px);
  z-index: var(--z-pop);
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop); padding-bottom: 4px;
  animation: pop-in 140ms var(--ease);
}
.sheet.as-pop .grab { display: none; }

/* ---------- More sheet ---------- */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 68px; padding: 8px 4px;
  border: 1px solid var(--line-2); border-radius: var(--r);
  font: 500 13px/1.2 var(--f-sans);
}
@media (hover: hover) and (pointer: fine) { .tile:hover { border-color: var(--ink-3); } }
.tile[aria-disabled="true"] { color: var(--ink-3); }
.tile[aria-pressed="true"] { border-color: var(--ink-1); }
.menu-sheet { padding: 0; margin-top: -8px; }
.ms-dl .menu-h { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 14px; }
.row-link {
  display: flex; align-items: center; gap: 12px; min-height: 48px;
  padding: 0 4px; border-top: 1px solid var(--line);
  text-decoration: none; font: 500 15px/1.2 var(--f-sans);
}
.row-link span { flex: 1; }
.row-link .i:last-child { color: var(--ink-2); }
/* "Open this palette in" (More sheet): three equal outline links, 44px, never filled. The row styles come from
   site.css .openin; app.js keeps each href current through PaletteState.link. */
.ms-open .openin { gap: 8px; flex-wrap: nowrap; }
.ms-open .openin a { flex: 1 1 0; min-width: 0; justify-content: center; padding: 0 8px; }

/* ---------- Per-swatch sheet (touch) ---------- */
.sw-hero {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4px 12px;
  min-height: 104px; padding: 14px 16px;
  border-radius: var(--r-lg);
  background: var(--sw); color: var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink-1) 12%, transparent);
}
.sw-hero .h-code { font: 500 24px/1.1 var(--f-mono); font-variant-numeric: tabular-nums; align-self: start; }
.sw-hero .h-name { font: 500 14px/1.3 var(--f-sans); }
.sw-hero .sw-aa { margin: 0; grid-column: 2; grid-row: 1 / span 2; align-self: end; display: grid; grid-template-columns: auto auto; justify-items: end; column-gap: 5px; }
.sw-hero .sw-aa .lv { grid-column: 1 / -1; }
.rows { display: flex; flex-direction: column; }
.row {
  display: grid; grid-template-columns: 24px 1fr auto; align-items: center; column-gap: 12px;
  min-height: 48px; padding: 4px 4px;
  border-top: 1px solid var(--line); text-align: left;
  font: 500 15px/1.25 var(--f-sans);
}
.row:first-child { border-top: 0; }
.row .v { font: 500 13px/1.3 var(--f-mono); color: var(--ink-2); text-align: right; }
.row .mono { font-size: 15px; }
.sw-actions {
  position: sticky; bottom: calc(-1 * max(12px, env(safe-area-inset-bottom)));
  margin: 0 -16px -12px; padding: 10px 16px max(12px, env(safe-area-inset-bottom));
  background: var(--raised); border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.sw-actions .btn-o { height: 52px; flex-direction: column; gap: 4px; font-size: 13px; }
.sw-actions .btn-o.is-on { border: 2px solid var(--ink-1); }
.sw-actions .btn-o[aria-disabled="true"] { color: var(--ink-3); border-style: dashed; }
.aa-s { width: 24px; height: 24px; border-radius: 5px; display: grid; place-items: center; font: 600 12px/1 var(--f-sans); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink-1) 14%, transparent); }
.aa-pair { width: 24px; height: 24px; border-radius: 5px; background: linear-gradient(90deg, var(--a) 50%, var(--b) 50%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink-1) 14%, transparent); }

/* ---------- Library ---------- */
.tabs { display: flex; gap: 4px; padding: 0 16px; border-bottom: 1px solid var(--line); flex: none; }
.tabs [role="tab"] {
  height: 44px; padding: 0 10px; margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 7px;
  font: 500 14px/1 var(--f-sans); color: var(--ink-2);
  border-bottom: 2px solid transparent;
}
.tabs [aria-selected="true"] { color: var(--ink-1); border-bottom-color: var(--ink-1); font-weight: 600; }
.cnt { font-size: 12px; color: var(--ink-2); }
.lib-list { flex: 1; overflow: auto; padding: 8px 8px; display: flex; flex-direction: column; gap: 2px; }
/* A card is a plain list item: one "Load" button (stretched over the whole card by ::after) and three sibling
   icon buttons above it. No interactive role is nested inside another. */
.cards { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 10px; border-radius: var(--r); }
@media (hover: hover) and (pointer: fine) { .card:hover { background: var(--hover); } }
.card.is-current { box-shadow: inset 0 0 0 1px var(--line-2); }
.card-strip { grid-column: 1 / -1; display: flex; height: 44px; border-radius: var(--r-sm); overflow: hidden; }
.card-strip i { flex: 1; background: var(--c); }
.card-load { grid-column: 1; min-width: 0; text-align: left; cursor: pointer; }
.card-load::after { content: ""; position: absolute; inset: 0; border-radius: var(--r); }
.card-load:focus-visible { outline: none; }
.card-load:focus-visible::after { outline: 2px solid var(--ink-1); outline-offset: -2px; }
.card-b { position: relative; z-index: 1; }
.card-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.card-t { font: 500 14px/1.3 var(--f-sans); }
.card-s { font: 400 13px/1.3 var(--f-sans); color: var(--ink-2); }
.card-s b { font-weight: 600; color: var(--ink-1); }
.card-b { display: flex; gap: 0; align-self: center; }
.card-b .ib { width: 40px; height: 40px; }
.card-b .i { width: 18px; height: 18px; }
.lib-ft { flex: none; border-top: 1px solid var(--line); padding: 12px 16px max(12px, env(safe-area-inset-bottom)); }
.lib-ft p { margin: 0 0 10px; font-size: 13px; color: var(--ink-2); }
.lib-ft-b { display: flex; gap: 8px; flex-wrap: wrap; }
.empty { margin: auto; max-width: 300px; padding: 32px 16px; text-align: center; color: var(--ink-2); font-size: 14px; }
.empty .i { width: 28px; height: 28px; color: var(--ink-3); margin-bottom: 8px; }
.empty strong { display: block; color: var(--ink-1); font-size: 15px; margin-bottom: 4px; }
@media (hover: none), (pointer: coarse) { .card-b .ib { width: 44px; height: 44px; } }
/* Desktop with a right rail: the drawer ends at the tool column, so its cards never sit over the rail ad unit
   (a double-click on a card that loads and closes the drawer must not land on the ad) */
@media (min-width: 1280px) and (min-height: 501px) {
  .page:not(.no-rail-r) ~ .drawer { right: var(--rail-w); border-right: 1px solid var(--line-2); }
}
/* Toasts inside the library get their own row above the footer: they never cover the footer buttons or a card.
   The list gives up the room at its bottom edge, so nothing above it moves. */
.drawer > .toasts { position: static; order: 1; flex: none; transform: none; width: auto; max-width: none; padding: 0 16px; }
.drawer > .toasts:not(:empty) { padding-block: 8px; }
.lib-ft { order: 2; }

/* ---------- Shortcuts dialog ---------- */
.keys { margin: 0; padding: 0 16px 4px; }
.keys div { display: grid; grid-template-columns: 132px 1fr; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.keys dt { display: flex; gap: 4px; align-items: center; font-size: 13px; color: var(--ink-2); }
.keys dd { margin: 0; font-size: 14px; }
.switch { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px 0; font-size: 14px; }
.switch input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink-1); }

/* ---------- Toasts inside the action bar (desktop) ---------- */
/* In the bar the slot runs from the status line (or Generate) to the first action button; a long message wraps
   to two lines inside the bar instead of floating over the swatch labels. */
.toasts.in-bar { transform: none; align-items: flex-start; }
.toasts.in-bar .toast { max-width: 100%; }
.act.has-toast .status { visibility: hidden; }

/* ---------- Content extras (index only) ---------- */
.faq details ul { margin: -4px 0 18px; padding-left: 1.25em; color: var(--ink-2); max-width: 64ch; }
.faq details li { margin: 0 0 6px; }
.faq details li strong, .faq details p strong { color: var(--ink-1); font-weight: 600; }
.faq details a { color: var(--ink-1); text-underline-offset: 3px; }
.faq kbd { padding: 2px 5px 1px; }
.faq details ul + p { margin-top: 0; }
.spec-name { font: 500 14px/1.3 var(--f-sans); margin-top: -4px; }

/* ---------- Phones + landscape: editor and drawer become sheets ---------- */
@media (max-width: 767.98px) and (orientation: portrait), (max-width: 767.98px) and (min-height: 501px), (orientation: landscape) and (max-height: 500px) {
  .pop-editor.as-sheet {
    inset: auto 0 0 0; width: 100%; max-width: 100%;
    max-height: 90vh; max-height: 90svh;
    border: 0; border-radius: var(--r-sheet) var(--r-sheet) 0 0;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    box-shadow: var(--shadow-sheet);
    animation: sheet-in 220ms var(--ease);
  }
  .pop-editor.as-sheet .ib-sm, .sheet .ib, .drawer .ib[data-close] { width: 44px; height: 44px; }
  .drawer {
    inset: auto 0 0 0; width: 100%; height: 90vh; height: 90svh;
    border-left: 0; border-radius: var(--r-sheet) var(--r-sheet) 0 0;
    animation-name: sheet-in;
  }
  .drawer[open] { animation: sheet-in 220ms var(--ease); }
  .drawer .grab { display: block; width: 36px; height: 4px; margin: 8px auto 0; border-radius: 2px; background: var(--line-2); flex: none; }
}

/* Short screens: settings sheet fits without scrolling */
@media (max-height: 700px) {
  .ss-scope { width: 44px; height: 44px; }
  .sheet-bd { gap: 12px; }
  .ss-h { margin-bottom: 6px; }
  .hchip { min-height: 44px; padding-block: 4px; }
  .stepper-lg { height: 46px; }   /* border-box: 44px-tall buttons */
  .stepper-lg button { width: 44px; }
}
/* Touch: 44px targets inside overlays too (spec 11) */
@media (hover: none), (pointer: coarse) {
  .ed-hex .ed-copy { top: 0; right: 0; width: 44px; height: 44px; }
  .xp-pre-h .btn-o { height: 44px; min-height: 44px; }
}

/* Landscape phones: two-column sheets that fit without scrolling. The grab handle is decorative (sheets close
   with Done / x / Esc / backdrop), so it is dropped here to give the content its 12px. */
@media (orientation: landscape) and (max-height: 500px) {
  .sheet { max-height: 94vh; max-height: 94svh; }
  .sheet .grab, .as-sheet .grab, .drawer .grab { display: none; }
  .sheet .pop-hd, .pop-editor.as-sheet .pop-hd, .drawer .pop-hd { padding: 6px 8px 4px 16px; }
  @media (hover: none), (pointer: coarse) { .chip { height: 44px; } }
  #sheet-settings .sheet-bd {
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto 1fr;
    column-gap: 24px; row-gap: 10px; align-items: start;
  }
  #sheet-settings .ss-harm { grid-column: 1; grid-row: 1 / span 3; }
  #sheet-settings .ss-row { grid-column: 2; grid-row: 1; align-self: center; }
  #sheet-settings .ss-row + .ss-blk { grid-column: 2; grid-row: 2; }
  #sheet-settings .ss-blk + .ss-blk { grid-column: 2; grid-row: 3; }
  /* Editor: preview, hex and tools left; sliders and the lock status right; Revert / Done below */
  .pop-editor.as-sheet { max-height: 94vh; max-height: 94svh; }
  .pop-editor.as-sheet .ed { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 8px; padding-bottom: 10px; }
  .pop-editor.as-sheet .ed-prev { grid-column: 1; grid-row: 1; height: 52px; }
  .pop-editor.as-sheet .ed-row { grid-column: 1; grid-row: 2; }
  .pop-editor.as-sheet .ed-tools { grid-column: 1; grid-row: 3; }
  .pop-editor.as-sheet .sliders { grid-column: 2; grid-row: 1 / span 2; }
  .pop-editor.as-sheet .ed-status { grid-column: 2; grid-row: 3; align-self: center; }
  .pop-editor.as-sheet .ed-err { grid-column: 1 / -1; grid-row: 4; margin: 0; }
  .pop-editor.as-sheet .ed-read { display: none; }
  .pop-editor.as-sheet .pop-ft { padding-block: 8px; }

  /* Per-swatch sheet: hero + contrast left, Copy as right, the three actions in the sticky footer */
  #sheet-swatch { padding-bottom: 0; }   /* the sticky footer carries the safe area itself */
  #sheet-swatch .sheet-bd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; row-gap: 6px; align-items: start; }
  #sheet-swatch .sw-hero { grid-column: 1; grid-row: 1; align-self: start; }
  #sheet-swatch .sw-contrast { grid-column: 1; grid-row: 2; }
  #sheet-swatch .sw-copyas { grid-column: 2; grid-row: 1 / span 2; }
  #sheet-swatch .sw-actions { grid-column: 1 / -1; grid-row: 3; bottom: 0; padding-block: 8px max(8px, env(safe-area-inset-bottom)); }
  #sheet-swatch .sw-actions .btn-o { height: 44px; flex-direction: row; gap: 6px; font-size: 14px; }
  #sheet-swatch .sw-copyas .row { min-height: 44px; padding-block: 0; }
  #sheet-swatch .sw-contrast .rows { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; }
  #sheet-swatch .sw-contrast .row {
    grid-template-columns: 24px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; row-gap: 0;
    min-height: 34px; padding: 2px 0; font-size: 13px; line-height: 16px;
  }
  #sheet-swatch .sw-contrast .row:nth-child(2) { border-top: 0; }
  #sheet-swatch .sw-contrast .row > :first-child { grid-row: 1 / span 2; }
  #sheet-swatch .sw-contrast .row .v { grid-column: 2; text-align: left; font-size: 12px; line-height: 15px; font-stretch: 75%; white-space: nowrap; }

  /* More sheet: three columns (tiles + guide | Copy code | Download + Theme) */
  #sheet-more .sheet-bd {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
    column-gap: 20px; row-gap: 8px; align-items: start;
  }
  #sheet-more .tiles { grid-column: 1; grid-row: 1; grid-template-columns: repeat(2, 1fr); }
  #sheet-more .tile { min-height: 56px; padding-block: 6px; }
  #sheet-more .ms-open { grid-column: 1; grid-row: 2; }
  /* The two footer links share one row under the columns, so the sheet still fits a 390px-tall screen */
  #sheet-more .row-link { grid-row: 3; border-top: 0; min-height: 44px; }
  #sheet-more a.row-link:nth-of-type(1) { grid-column: 1; }
  #sheet-more a.row-link:nth-of-type(2) { grid-column: 2; }
  #sheet-more .menu-sheet { display: contents; }
  #sheet-more .ms-copy { grid-column: 2; grid-row: 1 / span 2; }
  #sheet-more .ms-dl { grid-column: 3; grid-row: 1; }
  #sheet-more .ss-blk { grid-column: 3; grid-row: 2; }
  #sheet-more .menu-h, #sheet-more .ms-dl .menu-h { margin: 0; padding: 2px 8px 6px; border-top: 0; }

  /* Library: 94svh, two-column cards, the footer note and buttons on one row */
  .drawer { height: 94vh; height: 94svh; }
  .cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 8px; }
  .card { padding: 8px; }
  .card-strip { height: 32px; }
  .lib-ft { display: flex; align-items: center; gap: 12px; padding-block: 8px max(8px, env(safe-area-inset-bottom)); }
  .lib-ft p { margin: 0; flex: 1 1 auto; min-width: 0; }
  .lib-ft-b { flex: none; flex-wrap: nowrap; }
}