/*
 * Squishless base styles and components
 * ------------------------------------------------------------------
 * Requires tokens.css first. Everything here reads tokens, so themes and
 * reduced motion work automatically. Live examples: /styleguide.html
 *
 * Fonts (self-hosted, SIL OFL, licences in /assets/fonts/):
 *   DynaPuff (display, variable wght 400-700) and Figtree (text, wght 300-900,
 *   upright + italic). Latin subset, 78 KB for all three files.
 *   Optional preload for the hero font:
 *   <link rel="preload" href="/assets/fonts/dynapuff-latin-var.woff2" as="font" type="font/woff2" crossorigin>
 *
 * CLASS INDEX
 *   Layout ...... .container  .container--narrow  .section  .stack (+ --tight/--loose)
 *                 .cluster  .grid-auto  .center-text  .visually-hidden  .skip-link
 *   Type ........ h1-h4 (or .h1-.h4)  .display  .lead  .muted  .small  .prose
 *                 code  kbd/.kbd  .tabular  .center-text
 *   Brand ....... .brand (mark + name lockup: <a class="brand"><img src="/assets/img/mark.svg" alt=""><span>Squishless</span></a>)
 *   Buttons ..... .btn + .btn--primary | .btn--secondary | .btn--ghost | .btn--danger
 *                 sizes .btn--sm | .btn--lg ; .btn--icon (square, needs aria-label) ; .btn--block
 *                 states: [disabled], [aria-pressed="true"], [aria-busy="true"] (shows spinner)
 *                 Note: buttons draw a 4px "lip" (box-shadow) under their box; keep >= 6px
 *                 of space below a button row so the lip is not clipped.
 *   Forms ....... .field > .label + (.input | .textarea | .select) + .hint | .error-text
 *                 .input-group (input with a unit suffix: <span class="input-group__addon">px</span>)
 *                 .range  (input[type=range]; set --range-pct from JS for the fill in
 *                          Chromium/Safari: el.style.setProperty('--range-pct', pct + '%');
 *                          Firefox fills natively)
 *                 .check  (input[type=checkbox] or radio, wrapped in <label class="check-row">)
 *                 .switch (input[type=checkbox][role=switch])
 *                 .segmented (radio group: <div class="segmented" role="radiogroup">
 *                             <label><input type="radio" name=".."><span>Text</span></label>...)
 *   Chips ....... .chip (button with aria-pressed, or label wrapping a checkbox/radio)
 *                 .chip-row (scrollable row) ; .badge (+ --accent|--success|--warning|--danger)
 *   Surfaces .... .card (+ --raised | --flat | --interactive) ; .well ; .divider
 *   Tooltip ..... [data-tooltip="Text"] on any focusable element (+ data-tooltip-pos="bottom")
 *   Toast ....... .toast-region (fixed, aria-live="polite") > .toast (+ --success|--danger|--warning)
 *                 .toast__body, .toast__action, .toast__close
 *   Dialog ...... <dialog class="dialog"> > .dialog__header (.dialog__title, .dialog__close)
 *                 + .dialog__body + .dialog__footer ; .dialog--sheet (bottom sheet on phones)
 *   Progress .... <progress class="progress" value max> (indeterminate without value)
 *                 .progress--sm ; .spinner (aria-hidden, pair with text)
 *   Loading ..... .skeleton (shimmer block; add --text | --circle | --image)
 *   Drop zone ... .dropzone (+ .is-dragover)
 *   Compare ..... .compare* (rendered by /assets/js/compare.js; see that file)
 *   Theme ....... .theme-toggle (a .btn--icon with [data-theme-toggle], wired by theme.js)
 */

/* ===================== Fonts ===================== */
@font-face {
  font-family: "DynaPuff";
  src: url("/assets/fonts/dynapuff-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  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: "Figtree";
  src: url("/assets/fonts/figtree-latin-var.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  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: "Figtree";
  src: url("/assets/fonts/figtree-italic-latin-var.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
  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;
}
/* Metric-matched fallbacks (measured against Arial) to limit layout shift while fonts load */
@font-face {
  font-family: "Squishless Display Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 111.6%;
  ascent-override: 86.5%;
  descent-override: 21%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Squishless Text Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 100.5%;
  ascent-override: 94.5%;
  descent-override: 24.9%;
  line-gap-override: 0%;
}

/* ===================== Reset ===================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-padding-top: var(--space-7);
}
@media (prefers-reduced-motion: no-preference) {
  html:focus-within { scroll-behavior: smooth; }
}
body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-text);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:where(button, [role="button"], label, summary) { touch-action: manipulation; }
p, h1, h2, h3, h4, h5, h6, li, dd, figcaption { overflow-wrap: break-word; }
h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }
::selection { background: var(--color-accent); color: var(--color-accent-ink); }

/* ===================== Typography ===================== */
h1, h2, h3, h4, .h1, .h2, .h3, .h4, .display {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-text);
}
.display { font-size: var(--text-4xl); font-weight: var(--weight-bold); line-height: 1; }
h1, .h1 { font-size: var(--text-3xl); }
h2, .h2 { font-size: var(--text-2xl); }
h3, .h3 { font-size: var(--text-xl); line-height: var(--leading-snug); }
h4, .h4 { font-size: var(--text-lg); line-height: var(--leading-snug); }
.lead { font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--color-muted); max-width: 40ch; }
.muted { color: var(--color-muted); }
.small, small { font-size: var(--text-sm); }
.tabular { font-variant-numeric: tabular-nums; }
.center-text { text-align: center; }
strong, b { font-weight: var(--weight-bold); }
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--space-4); }
.prose > :is(h2, h3) { margin-top: var(--space-6); }
.prose ul, .prose ol { padding-left: 1.25em; }
code { font-family: var(--font-mono); font-size: 0.9em; }
code { background: var(--color-sunken); padding: 0.1em 0.35em; border-radius: var(--radius-xs); }
kbd, .kbd {
  /* inline (not inline-block) so the keycap never stretches the line height */
  display: inline;
  padding: 0.1em 0.45em;
  border: 1.5px solid var(--color-border-strong);
  border-bottom-width: 3px;
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-text);
  font-weight: var(--weight-bold);
  font-size: 0.8em;
  white-space: nowrap;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ===================== Links and focus ===================== */
a { color: var(--color-accent-text); text-decoration-thickness: 0.09em; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 0.16em; }
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}
.skip-link {
  position: absolute; left: var(--space-4); top: var(--space-4); z-index: var(--z-tooltip);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm);
  background: var(--color-text); color: var(--color-bg); font-weight: var(--weight-bold);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ===================== Layout ===================== */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - 2 * var(--gutter), var(--container-narrow)); margin-inline: auto; }
.section { padding-block: var(--space-section); }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack--tight { gap: var(--space-2); }
.stack--loose { gap: var(--space-6); }
.stack > :where(.btn, .badge, .chip) { align-self: flex-start; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.grid-auto { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.divider { border: 0; border-top: var(--border-width) solid var(--color-border); margin-block: var(--space-5); }
.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important;
}

/* ===================== Brand lockup ===================== */
.brand {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--text-lg); letter-spacing: -0.01em;
  color: var(--color-text); text-decoration: none;
}
.brand img, .brand svg { width: 1.7em; height: 1.7em; flex: none; transition: transform var(--duration-slow) var(--ease-spring); }
.brand:hover img, .brand:hover svg { transform: rotate(-8deg) scale(1.06); }

/* ===================== Buttons ===================== */
.btn {
  --btn-bg: var(--color-surface);
  --btn-fg: var(--color-text);
  --btn-border: var(--color-text);
  --btn-lip: var(--color-text);
  --btn-h: var(--control-md);
  --btn-pad: var(--space-5);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--btn-h);
  padding: 0 var(--btn-pad);
  border: var(--border-width) solid var(--btn-border);
  border-radius: var(--radius-md);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-text);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  box-shadow: 0 4px 0 0 var(--btn-lip);
  transform: translateY(0);
  transition:
    transform var(--duration-base) var(--ease-bounce),
    box-shadow var(--duration-base) var(--ease-bounce),
    background-color var(--duration-fast) ease,
    color var(--duration-fast) ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 0 var(--btn-lip); }
.btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 0 var(--btn-lip);
  transition-duration: var(--duration-instant);
}
.btn svg { width: 1.25em; height: 1.25em; flex: none; }
.btn--primary {
  --btn-bg: var(--color-accent);
  --btn-fg: var(--color-accent-ink);
  --btn-border: var(--color-accent-edge);
  --btn-lip: var(--color-accent-edge);
}
.btn--primary:hover { --btn-bg: var(--color-accent-hover); }
.btn--primary:active { --btn-bg: var(--color-accent-press); }
.btn--secondary { /* the defaults: surface with an ink outline and lip */ }
.btn--secondary:hover { --btn-bg: var(--color-accent-soft); }
.btn--danger { --btn-bg: var(--color-danger); --btn-fg: var(--color-on-status); --btn-border: var(--color-text); --btn-lip: var(--color-text); }
.btn--ghost {
  --btn-bg: transparent;
  --btn-border: transparent;
  --btn-lip: transparent;
  box-shadow: none;
}
.btn--ghost:hover { --btn-bg: var(--color-sunken); transform: none; box-shadow: none; }
.btn--ghost:active { transform: scale(0.96); box-shadow: none; }
.btn--sm { --btn-h: var(--control-sm); --btn-pad: var(--space-3); font-size: var(--text-sm); border-radius: var(--radius-sm); }
.btn--lg { --btn-h: var(--control-lg); --btn-pad: var(--space-6); font-size: var(--text-lg); border-radius: var(--radius-lg); }
.btn--block { display: flex; width: 100%; }
.btn--icon { --btn-pad: 0; width: var(--btn-h); flex: none; }
.btn--icon.btn--sm { width: var(--control-sm); }
.btn--icon.btn--lg { width: var(--control-lg); }
.btn[aria-pressed="true"] { --btn-bg: var(--color-accent-soft); transform: translateY(3px); box-shadow: 0 1px 0 0 var(--btn-lip); }
.btn--ghost[aria-pressed="true"] { --btn-bg: var(--color-accent-soft); --btn-fg: var(--color-accent-text); transform: none; box-shadow: none; }
.btn:disabled, .btn[aria-disabled="true"] {
  cursor: not-allowed; opacity: 0.5; transform: translateY(3px); box-shadow: 0 1px 0 0 var(--btn-lip);
}
.btn--ghost:disabled { transform: none; box-shadow: none; }
.btn[aria-busy="true"] { color: transparent; pointer-events: none; }
.btn[aria-busy="true"]::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 1.2em; height: 1.2em; border-radius: 50%;
  border: 3px solid var(--btn-fg); border-right-color: transparent;
  animation: sq-spin 0.7s linear infinite;
}
@media (hover: none) {
  .btn:hover { transform: none; box-shadow: 0 4px 0 0 var(--btn-lip); }
  .btn--ghost:hover { box-shadow: none; }
}

/* ===================== Form fields ===================== */
.field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.label { font-weight: var(--weight-medium); font-size: var(--text-sm); color: var(--color-text); }
.hint { font-size: var(--text-sm); color: var(--color-muted); }
.error-text { font-size: var(--text-sm); color: var(--color-danger); font-weight: var(--weight-medium); }
.input, .textarea, .select {
  width: 100%;
  min-height: var(--control-md);
  padding: 0 var(--space-3);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: max(16px, var(--text-md)); /* 16px+ stops iOS zooming on focus */
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}
.textarea { padding-block: var(--space-2); min-height: 6rem; resize: vertical; line-height: var(--leading-normal); }
.input::placeholder, .textarea::placeholder { color: var(--color-subtle); opacity: 1; }
.input:hover, .textarea:hover, .select:hover { border-color: var(--color-text); }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible {
  outline: none;
  border-color: var(--color-text);
  box-shadow: 0 0 0 3px var(--color-focus-halo), 0 0 0 6px var(--color-focus);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--color-danger); }
.input:disabled, .select:disabled, .textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.input[type="number"] { font-variant-numeric: tabular-nums; }
.input-group { display: flex; align-items: stretch; }
.input-group .input { border-top-right-radius: 0; border-bottom-right-radius: 0; min-width: 0; }
.input-group__addon {
  display: inline-flex; align-items: center; padding: 0 var(--space-3);
  border: var(--border-width) solid var(--color-border-strong); border-left: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--color-sunken); color: var(--color-muted); font-size: var(--text-sm); font-weight: var(--weight-medium);
}
.select {
  appearance: none; -webkit-appearance: none;
  padding-right: calc(var(--space-3) + 1.5rem);
  cursor: pointer;
  /* chevron drawn with gradients so it follows currentColor (no image request) */
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 52%, calc(100% - 0.8rem) 52%;
  background-size: 0.36rem 0.36rem, 0.36rem 0.36rem;
  background-repeat: no-repeat;
}
.select option { background: var(--color-surface); color: var(--color-text); }

/* ----- Range slider (cross-browser) ----- */
.range {
  --range-pct: 0%;
  --range-track: 10px;
  --range-thumb: 26px;
  appearance: none; -webkit-appearance: none;
  width: 100%;
  height: var(--control-md);
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}
.range:focus-visible { outline: none; }
.range::-webkit-slider-runnable-track {
  height: var(--range-track);
  border-radius: var(--radius-pill);
  background: linear-gradient(to right, var(--color-accent) 0 var(--range-pct), var(--color-sunken) var(--range-pct) 100%);
  box-shadow: inset 0 0 0 1.5px var(--color-border-strong);
}
.range::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: var(--range-thumb); height: var(--range-thumb);
  margin-top: calc((var(--range-track) - var(--range-thumb)) / 2);
  border-radius: 50%;
  border: 3px solid var(--color-text);
  background: var(--color-surface);
  box-shadow: 0 3px 0 0 var(--color-text);
  transition: transform var(--duration-base) var(--ease-bounce);
}
.range:hover::-webkit-slider-thumb { transform: scale(1.08); }
.range:active::-webkit-slider-thumb { transform: scale(1.18); }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--color-focus-halo), 0 0 0 6px var(--color-focus); }
.range::-moz-range-track {
  height: var(--range-track); border-radius: var(--radius-pill);
  background: var(--color-sunken); box-shadow: inset 0 0 0 1.5px var(--color-border-strong);
}
.range::-moz-range-progress { height: var(--range-track); border-radius: var(--radius-pill); background: var(--color-accent); }
.range::-moz-range-thumb {
  width: var(--range-thumb); height: var(--range-thumb); box-sizing: border-box;
  border-radius: 50%; border: 3px solid var(--color-text); background: var(--color-surface);
  box-shadow: 0 3px 0 0 var(--color-text);
  transition: transform var(--duration-base) var(--ease-bounce);
}
.range:hover::-moz-range-thumb { transform: scale(1.08); }
.range:active::-moz-range-thumb { transform: scale(1.18); }
.range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--color-focus-halo), 0 0 0 6px var(--color-focus); }
.range:disabled { opacity: 0.5; cursor: not-allowed; }

/* ----- Checkbox / radio ----- */
.check-row { display: inline-flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; line-height: var(--leading-snug); padding-block: var(--space-2); }
.check {
  appearance: none; -webkit-appearance: none;
  flex: none;
  width: 1.375rem; height: 1.375rem;
  margin: 0;
  border: var(--border-width) solid var(--color-text);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  display: inline-grid; place-content: center;
  cursor: pointer;
  transition: background-color var(--duration-fast) ease, transform var(--duration-base) var(--ease-bounce);
}
.check[type="radio"] { border-radius: 50%; }
.check::before {
  content: ""; width: 0.75rem; height: 0.75rem;
  background: var(--color-accent-ink);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transition: transform var(--duration-base) var(--ease-bounce);
}
.check[type="radio"]::before { clip-path: circle(50%); width: 0.6rem; height: 0.6rem; }
.check:checked { background: var(--color-accent); }
.check:checked::before { transform: scale(1); }
.check:active { transform: scale(0.9); }
.check:disabled { opacity: 0.5; cursor: not-allowed; }

/* ----- Switch ----- */
.switch {
  appearance: none; -webkit-appearance: none;
  position: relative; flex: none;
  width: 3.25rem; height: 1.875rem; margin: 0;
  border: var(--border-width) solid var(--color-text);
  border-radius: var(--radius-pill);
  background: var(--color-sunken);
  cursor: pointer;
  transition: background-color var(--duration-base) ease;
}
.switch::before {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 1.375rem; height: 1.375rem; border-radius: 50%;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-text);
  box-sizing: border-box;
  transition: transform var(--duration-slow) var(--ease-spring), width var(--duration-fast) ease;
}
.switch:active::before { width: 1.7rem; }
.switch:checked { background: var(--color-accent); }
.switch:checked::before { transform: translateX(1.375rem); }
.switch:checked:active::before { transform: translateX(1.05rem); }
.switch:disabled { opacity: 0.5; cursor: not-allowed; }

/* ----- Segmented control ----- */
.segmented {
  display: inline-flex; flex-wrap: nowrap; gap: 2px; max-width: 100%; overflow-x: auto;
  padding: 3px;
  border: var(--border-width) solid var(--color-text);
  border-radius: var(--radius-md);
  background: var(--color-sunken);
  scrollbar-width: none;
}
.segmented label { position: relative; flex: 1 0 auto; display: flex; }
.segmented input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.segmented span, .segmented button {
  display: flex; align-items: center; justify-content: center; gap: var(--space-1);
  width: 100%;
  min-height: calc(var(--control-md) - 10px);
  padding: 0 var(--space-4);
  border-radius: calc(var(--radius-md) - 5px);
  font-weight: var(--weight-bold); font-size: var(--text-sm);
  color: var(--color-muted);
  white-space: nowrap;
  transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease, transform var(--duration-base) var(--ease-bounce);
}
.segmented label:hover span, .segmented button:hover { color: var(--color-text); }
.segmented input:checked + span, .segmented button[aria-pressed="true"], .segmented button[aria-selected="true"] {
  background: var(--color-surface); color: var(--color-text);
  box-shadow: 0 0 0 1.5px var(--color-text), 0 2px 0 1.5px var(--color-text);
}
.segmented input:active + span, .segmented button:active { transform: scale(0.95); }
.segmented input:focus-visible + span { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.segmented--sm span, .segmented--sm button { min-height: calc(var(--control-sm) - 10px); padding: 0 var(--space-3); }

/* ===================== Chips and badges ===================== */
.chip-row { display: flex; gap: var(--space-2); overflow-x: auto; padding-block: 2px 6px; scrollbar-width: thin; }
.chip {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--space-2); flex: none;
  min-height: var(--control-sm);
  padding: 0 var(--space-4);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--duration-base) var(--ease-bounce), background-color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}
.chip:hover { border-color: var(--color-text); }
.chip:active { transform: scale(0.94); }
.chip svg { width: 1.1em; height: 1.1em; }
.chip > input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip[aria-pressed="true"], .chip:has(> input:checked) {
  background: var(--color-accent-soft); border-color: var(--color-accent-text); color: var(--color-text);
  font-weight: var(--weight-bold);
}
.chip:has(> input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 0.1em 0.6em;
  border-radius: var(--radius-pill);
  background: var(--color-sunken); color: var(--color-text);
  font-size: var(--text-xs); font-weight: var(--weight-bold); line-height: 1.6;
}
.badge--accent { background: var(--color-accent); color: var(--color-accent-ink); }
.badge--success { background: var(--color-success-soft); color: var(--color-success); }
.badge--warning { background: var(--color-warning-soft); color: var(--color-warning); }
.badge--danger { background: var(--color-danger-soft); color: var(--color-danger); }

/* ===================== Cards ===================== */
.card {
  position: relative;
  padding: var(--space-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-1);
}
.card--raised { background: var(--color-raised); box-shadow: var(--shadow-3); border-color: transparent; }
.card--flat { box-shadow: none; background: var(--color-sunken); border-color: transparent; }
.card--interactive {
  cursor: pointer;
  transition: transform var(--duration-slow) var(--ease-spring), box-shadow var(--duration-base) ease, border-color var(--duration-fast) ease;
}
.card--interactive:hover { transform: translateY(-3px) rotate(-0.4deg); box-shadow: var(--shadow-2); border-color: var(--color-text); }
.card--interactive:active { transform: scale(0.985); }
.well { padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-sunken); }

/* ===================== Tooltip ===================== */
/* Hidden tooltips are display:none so they never widen the page. Near the
   right edge add data-tooltip-align="end" (or "start" near the left edge). */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  display: none;
  position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: var(--z-tooltip);
  width: max-content; max-width: min(16rem, 80vw);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-text); color: var(--color-bg);
  font-family: var(--font-text); font-size: var(--text-sm); font-weight: var(--weight-medium);
  line-height: var(--leading-snug); white-space: normal; text-align: center;
  pointer-events: none;
  --tt-x: -50%;
  transform: translate(var(--tt-x), 0) scale(1);
  transform-origin: 50% 100%;
  transition: opacity var(--duration-fast) ease, transform var(--duration-base) var(--ease-bounce);
}
[data-tooltip-align="end"]::after { left: auto; right: 0; --tt-x: 0; transform-origin: 100% 100%; }
[data-tooltip-align="start"]::after { left: 0; --tt-x: 0; transform-origin: 0 100%; }
[data-tooltip-pos="bottom"]::after { bottom: auto; top: calc(100% + 10px); transform-origin: 50% 0; }
[data-tooltip]:focus-visible::after,
[data-tooltip]:hover::after { display: block; }
@media (hover: hover) {
  [data-tooltip]:hover::after { animation: sq-tooltip-in var(--duration-base) var(--ease-bounce) 350ms both; }
}
[data-tooltip]:focus-visible::after { animation: sq-tooltip-in var(--duration-base) var(--ease-bounce) both; }
@media (hover: none) { [data-tooltip]:hover:not(:focus-visible)::after { display: none; } }
@keyframes sq-tooltip-in { from { opacity: 0; transform: translate(var(--tt-x), 4px) scale(0.92); } }

/* ===================== Toast ===================== */
.toast-region {
  position: fixed; z-index: var(--z-toast);
  left: 50%; bottom: max(var(--space-4), env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex; flex-direction: column-reverse; align-items: center; gap: var(--space-2);
  width: min(100% - 2 * var(--space-4), 28rem);
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-text);
  border-radius: var(--radius-md);
  background: var(--color-raised); color: var(--color-text);
  box-shadow: 0 4px 0 0 var(--color-text), var(--shadow-3);
  pointer-events: auto;
  animation: sq-pop-in var(--duration-slow) var(--ease-spring) both;
}
.toast.is-leaving { animation: sq-pop-out var(--duration-base) var(--ease-in-out) both; }
.toast::before {
  content: ""; flex: none; width: 0.75rem; height: 0.75rem; border-radius: 50%;
  background: var(--color-accent); box-shadow: 0 0 0 2px var(--color-text);
}
.toast--success::before { background: var(--color-success); }
.toast--warning::before { background: var(--color-highlight); }
.toast--danger::before { background: var(--color-danger); }
.toast__body { flex: 1; min-width: 0; font-weight: var(--weight-medium); line-height: var(--leading-snug); }
.toast__action { flex: none; }
.toast__close { flex: none; }

/* ===================== Dialog ===================== */
.dialog {
  width: min(100% - 2 * var(--space-4), 32rem);
  max-height: min(90dvh, 48rem);
  margin: auto;
  padding: 0;
  border: var(--border-width) solid var(--color-text);
  border-radius: var(--radius-xl);
  background: var(--color-raised); color: var(--color-text);
  box-shadow: 0 6px 0 0 var(--color-text), var(--shadow-3);
  overflow: auto;
  overscroll-behavior: contain;
}
.dialog[open] { animation: sq-pop-in var(--duration-slow) var(--ease-spring) both; }
.dialog::backdrop { background: var(--color-overlay); animation: sq-fade-in var(--duration-base) ease both; }
.dialog__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-5) var(--space-5) 0; }
.dialog__title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-display); line-height: var(--leading-snug); }
.dialog__body { padding: var(--space-4) var(--space-5); color: var(--color-text); }
.dialog__footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); padding: 0 var(--space-5) var(--space-5); }
@media (max-width: 479.98px) {
  .dialog--sheet {
    width: 100%; max-width: 100%; margin: auto 0 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0; border-bottom: 0;
    box-shadow: var(--shadow-3);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .dialog--sheet[open] { animation: sq-sheet-in var(--duration-slow) var(--ease-out) both; }
  .dialog__footer > .btn { flex: 1; }
}

/* ===================== Progress ===================== */
.progress {
  appearance: none; -webkit-appearance: none;
  display: block; width: 100%; height: 0.875rem;
  border: var(--border-width) solid var(--color-text);
  border-radius: var(--radius-pill);
  background: var(--color-sunken);
  color: var(--color-accent);
  overflow: hidden;
}
.progress--sm { height: 0.5rem; border-width: 1.5px; }
.progress::-webkit-progress-bar { background: var(--color-sunken); border-radius: var(--radius-pill); }
.progress::-webkit-progress-value {
  background: var(--color-accent);
  border-radius: var(--radius-pill);
  transition: width var(--duration-base) var(--ease-out);
}
.progress::-moz-progress-bar { background: var(--color-accent); border-radius: var(--radius-pill); }
.progress:indeterminate,
.progress:indeterminate::-webkit-progress-bar {
  background:
    repeating-linear-gradient(-45deg, var(--color-accent) 0 10px, var(--color-accent-soft) 10px 20px);
  background-size: 28.28px 100%;
  animation: sq-stripes 0.6s linear infinite;
}
.progress:indeterminate::-moz-progress-bar { background: transparent; }
.spinner {
  display: inline-block; width: 1.25em; height: 1.25em; flex: none;
  border-radius: 50%; border: 3px solid currentColor; border-right-color: transparent;
  animation: sq-spin 0.7s linear infinite; vertical-align: -0.2em;
}

/* ===================== Skeleton ===================== */
.skeleton {
  display: block;
  border-radius: var(--radius-sm);
  background:
    linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--color-surface) 70%, transparent) 50%, transparent 70%)
    color-mix(in srgb, var(--color-text) 9%, var(--color-bg));
  background-size: 250% 100%;
  animation: sq-shimmer 1.4s ease-in-out infinite;
  color: transparent;
  user-select: none;
}
.skeleton--text { height: 1em; margin-block: 0.25em; border-radius: var(--radius-xs); }
.skeleton--circle { border-radius: 50%; aspect-ratio: 1; }
.skeleton--image { border-radius: var(--radius-lg); aspect-ratio: 3 / 2; }

/* ===================== Drop zone ===================== */
.dropzone {
  display: grid; place-items: center; gap: var(--space-3);
  padding: var(--space-7) var(--space-5);
  border: 3px dashed var(--color-border-strong);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  text-align: center;
  transition: border-color var(--duration-fast) ease, background-color var(--duration-fast) ease, transform var(--duration-slow) var(--ease-spring);
}
.dropzone:hover { border-color: var(--color-text); }
.dropzone.is-dragover {
  border-color: var(--color-accent-text); border-style: solid;
  background: var(--color-accent-soft);
  transform: scale(1.015);
}

/* ===================== Theme toggle ===================== */
.theme-toggle[aria-pressed] { --btn-bg: transparent; --btn-fg: var(--color-text); }
.theme-toggle:hover { --btn-bg: var(--color-sunken); }
.theme-toggle .theme-toggle__sun, .theme-toggle .theme-toggle__moon { transition: transform var(--duration-slow) var(--ease-spring), opacity var(--duration-fast) ease; }
:root[data-resolved-theme="dark"] .theme-toggle__sun { opacity: 0; transform: rotate(-90deg) scale(0.4); position: absolute; }
:root:not([data-resolved-theme="dark"]) .theme-toggle__moon { opacity: 0; transform: rotate(90deg) scale(0.4); position: absolute; }

/* ===================== Compare component (compare.js) ===================== */
.compare {
  --compare-pos: 50%;
  --compare-ar: 3 / 2;
  position: relative;
  width: 100%;
  container-type: inline-size;
}
.compare__frame {
  position: relative;
  width: min(100%, calc(var(--compare-max-h, 70vh) * var(--compare-ar-num, 1.5)));
  aspect-ratio: var(--compare-ar);
  margin-inline: auto;
  border-radius: var(--radius-lg);
  background: var(--color-sunken);
  overflow: hidden;
  user-select: none; -webkit-user-select: none;
  touch-action: pan-y pinch-zoom;
  cursor: ew-resize;
  isolation: isolate;
}
.compare__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.compare__canvas--before { clip-path: inset(0 calc(100% - var(--compare-pos)) 0 0); }
.compare.is-loading .compare__frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--color-surface) 60%, transparent) 50%, transparent 70%);
  background-size: 250% 100%;
  animation: sq-shimmer 1.4s ease-in-out infinite;
}
.compare__divider {
  position: absolute; top: 0; bottom: 0; left: var(--compare-pos); z-index: 2;
  width: 44px; margin-left: -22px;
  display: grid; place-items: center;
  cursor: ew-resize;
  touch-action: none;
}
.compare__divider::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 4px; margin-left: -2px;
  background: #fff;
  box-shadow: 0 0 0 1.5px rgb(30 12 20 / 0.55);
}
.compare__divider:focus-visible { outline: none; }
.compare__handle {
  position: relative;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 3px solid var(--plum-950);
  background: var(--raspberry-500);
  color: var(--plum-950);
  box-shadow: 0 3px 0 0 var(--plum-950), 0 6px 16px rgb(30 12 20 / 0.35);
  transition: transform var(--duration-slow) var(--ease-spring);
}
.compare__handle svg { width: 24px; height: 24px; }
.compare__divider:hover .compare__handle { transform: scale(1.08); }
.compare.is-dragging .compare__handle { transform: scale(1.16, 0.9); }
.compare__divider:focus-visible .compare__handle { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--color-focus); }
.compare__label {
  position: absolute; top: var(--space-3); z-index: 1;
  padding: 0.2em 0.7em;
  border-radius: var(--radius-pill);
  background: var(--color-scrim-label); color: var(--color-on-scrim);
  font-size: var(--text-sm); font-weight: var(--weight-bold);
  pointer-events: none;
  transition: opacity var(--duration-fast) ease;
}
.compare__label--before { left: var(--space-3); }
.compare__label--after { right: var(--space-3); }
.compare__label.is-hidden { opacity: 0; }
/* Side by side */
.compare--side .compare__frame { cursor: default; touch-action: auto; display: none; }
.compare__side { display: none; }
.compare--side .compare__side {
  display: grid; gap: var(--space-3);
  grid-template-columns: 1fr 1fr;
}
.compare--side.is-stacked .compare__side { grid-template-columns: 1fr; }
.compare__panel { position: relative; min-width: 0; }
.compare__panel-frame {
  position: relative; width: 100%;
  aspect-ratio: var(--compare-ar);
  border-radius: var(--radius-md);
  background: var(--color-sunken);
  overflow: hidden;
}
.compare--side.is-stacked .compare__panel-frame { width: min(100%, calc(var(--compare-max-h, 70vh) / 2 * var(--compare-ar-num, 1.5))); margin-inline: auto; }
.compare__panel .compare__label { top: var(--space-2); left: var(--space-2); right: auto; }
.compare__dims { position: absolute; bottom: var(--space-2); left: var(--space-2); }

/* ===================== Keyframes ===================== */
@keyframes sq-spin { to { transform: rotate(1turn); } }
@keyframes sq-shimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }
@keyframes sq-stripes { to { background-position: 28.28px 0; } }
@keyframes sq-fade-in { from { opacity: 0; } }
@keyframes sq-pop-in { from { opacity: 0; transform: translateY(10px) scale(0.92); } }
@keyframes sq-pop-out { to { opacity: 0; transform: translateY(6px) scale(0.95); } }
@keyframes sq-sheet-in { from { transform: translateY(100%); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  /* keep loading indicators meaningful without movement */
  .skeleton, .compare.is-loading .compare__frame::after { animation: none !important; }
  .spinner, .btn[aria-busy="true"]::after { animation: sq-spin 1.6s linear infinite !important; }
}

@media (forced-colors: active) {
  .btn, .chip, .switch, .check, .segmented, .progress, .card, .toast, .dialog { border-color: CanvasText; }
  .switch:checked, .check:checked { background: Highlight; }
  .compare__divider::before { background: CanvasText; }

  /* Forced colors drop box-shadow and authored backgrounds, which is how the selected
     segment and every custom focus ring are drawn. Use system colors and outlines. */
  .segmented input:checked + span, .segmented button[aria-pressed="true"], .segmented button[aria-selected="true"] {
    forced-color-adjust: none;
    background: Highlight; color: HighlightText;
    outline: 2px solid Highlight; outline-offset: 1px;
  }
  .segmented input:focus-visible + span { outline: 3px solid CanvasText; outline-offset: 3px; }

  /* range: visible track with a border, Highlight fill and thumb, outline when focused */
  .range { forced-color-adjust: none; }
  .range::-webkit-slider-runnable-track {
    background: linear-gradient(to right, Highlight 0 var(--range-pct), Canvas var(--range-pct) 100%);
    border: 1px solid CanvasText;
  }
  .range::-webkit-slider-thumb { background: Canvas; border-color: CanvasText; }
  .range::-moz-range-track { background: Canvas; border: 1px solid CanvasText; }
  .range::-moz-range-progress { background: Highlight; }
  .range::-moz-range-thumb { background: Canvas; border-color: CanvasText; }
  .range:focus-visible::-webkit-slider-thumb { background: Highlight; outline: 3px solid Highlight; outline-offset: 2px; }
  .range:focus-visible::-moz-range-thumb { background: Highlight; outline: 3px solid Highlight; outline-offset: 2px; }
  .range:disabled::-webkit-slider-thumb, .range:disabled::-moz-range-thumb { border-color: GrayText; }

  /* drag handles: the compare divider (design system), the app's crop handles and the
     landing demo handle draw focus with box-shadow only */
  .compare__divider:focus-visible .compare__handle,
  .handle:focus-visible .handle__grip,
  .demo-handle:focus-visible .demo-handle__grip {
    outline: 3px solid Highlight; outline-offset: 3px;
  }
}