/* ==========================================================================
   Restyle This Room: the app pages (/try, /start, /s/:token, not found).
   Same identity as the landing (funnels/E4/assets/site.css): limewash walls, deep fern green for action,
   clay for small marks, Avenir-style display type, paint-chip dots on the style chips.
   The token block mirrors the landing's; every value below it references a token.
   No inline styles (strict CSP); scripts only set CSSOM properties.
   ========================================================================== */

:root {
  /* Colour (contrast ratios on --color-wall unless noted) */
  --color-wall: #F3EEE6;
  --color-wall-deep: #E8E0D2;
  --color-surface: #FBF9F5;
  --color-ink: #1F1D1A;                /* 14.6:1 */
  --color-ink-muted: #57514A;          /* 6.8:1 */
  --color-rule: #DDD3C4;
  --color-rule-strong: #9A8C78;        /* 2.8:1, non-text borders on controls */
  --color-fern: #2F4A3A;               /* 8.4:1; the action colour */
  --color-fern-hover: #263D30;
  --color-fern-active: #1E3127;
  --color-fern-soft: #DCE4DA;          /* fern on it: 6.9:1 */
  --color-on-fern: #F6F2EA;            /* 8.7:1 on fern */
  --color-clay: #9C4A2B;               /* 5.3:1; small marks */
  --color-warn: #8A3B12;               /* 6.9:1 on warn-soft */
  --color-warn-soft: #FBEEE4;
  --color-danger: #9B1C1C;             /* 7.4:1 on surface */
  --color-danger-hover: #7F1616;
  --color-danger-soft: #FBE9E7;        /* danger on it: 6.8:1 */
  --color-on-danger: #FBF9F5;
  --color-focus: #1F5FA6;              /* 5.6:1 */
  --color-focus-on-dark: #F2D27A;
  --color-scrim: 31 29 26;             /* ink as an rgb triplet, for overlays */
  --color-shadow: 60 44 28;

  /* Paint chips: each style's three colours (decor only, as on the landing) */
  --chip-japandi-1: #D9CBB5;   --chip-japandi-2: #8C7A64;   --chip-japandi-3: #2E2B27;
  --chip-midcentury-1: #C9772E; --chip-midcentury-2: #2F5D5A; --chip-midcentury-3: #E7C66A;
  --chip-scandi-1: #F1EEE8;    --chip-scandi-2: #C8CCC6;    --chip-scandi-3: #B89B74;
  --chip-coastal-1: #DCE6E8;   --chip-coastal-2: #7FA3B4;   --chip-coastal-3: #E8DCC4;
  --chip-farmhouse-1: #F2EFE9; --chip-farmhouse-2: #3A3A38; --chip-farmhouse-3: #A88B6A;
  --chip-industrial-1: #6E6A66; --chip-industrial-2: #3B302A; --chip-industrial-3: #9B5A3C;
  --chip-boho-1: #C47A4F;      --chip-boho-2: #E4C9A5;      --chip-boho-3: #6E7B4F;
  --chip-minimal-1: #F4F3F0;   --chip-minimal-2: #D8D6D1;   --chip-minimal-3: #1E1E1C;
  --chip-traditional-1: #7A2E2A; --chip-traditional-2: #C9A86A; --chip-traditional-3: #3E4F3A;
  --chip-deco-1: #1F3B36;      --chip-deco-2: #C6A15B;      --chip-deco-3: #1B1B1E;
  --chip-moody-1: #2C3138;     --chip-moody-2: #4B3B47;     --chip-moody-3: #8F6B4A;
  --chip-plants-1: #4E7A4A;    --chip-plants-2: #A7C08F;    --chip-plants-3: #C9A27A;

  /* Type */
  --font-display: "Avenir Next", Avenir, "Segoe UI Variable Display", "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, Menlo, monospace;
  --text-sm: 1rem;                                          /* 16, the floor for reading */
  --text-md: clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem);  /* 17-18, body */
  --text-lg: clamp(1.1875rem, 1.12rem + 0.3vw, 1.3125rem);  /* 19-21 */
  --text-xl: clamp(1.375rem, 1.25rem + 0.6vw, 1.625rem);    /* 22-26 */
  --text-2xl: clamp(1.75rem, 1.45rem + 1.4vw, 2.375rem);    /* 28-38 */
  --text-numeral: clamp(2rem, 1.8rem + 1vw, 2.5rem);
  --text-price: clamp(3rem, 2.6rem + 2vw, 4rem);
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-body: 1.55;
  --tracking-caps: 0.12em;
  --tracking-display: -0.02em;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Space: 4px grid */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --gutter: clamp(var(--space-4), 0.5rem + 3vw, var(--space-6));

  /* Size */
  --page: 35rem;
  --tap: 3.5rem;                       /* 56 */
  --tap-sm: 3rem;                      /* 48 */
  --tap-min: 2.75rem;                  /* 44, the floor */
  --chip-dot: 0.875rem;
  --switch-w: 3.25rem;
  --switch-h: 1.875rem;
  --knob: 2.75rem;
  --spinner: 1.25rem;
  --rule-width: 1px;
  --rule-heavy: 2px;
  --focus-width: 3px;

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgb(var(--color-shadow) / 0.08), 0 20px 40px -24px rgb(var(--color-shadow) / 0.35);
  --shadow-knob: 0 1px 6px rgb(var(--color-shadow) / 0.45);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-spin: 1s;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-wall);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }
[hidden] { display: none !important; }
h1, h2, h3 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  overflow-wrap: break-word;
  text-wrap: balance;
}
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
p { margin: 0 0 var(--space-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a { color: var(--color-fern); text-underline-offset: 0.2em; }
:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-width); border-radius: var(--radius-sm); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* ---------- Page frame ---------- */
.wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter) var(--space-8); }
.top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding-block: var(--space-2); margin-bottom: var(--space-5);
  border-bottom: var(--rule-width) solid var(--color-rule);
}
.brand {
  display: inline-flex; align-items: center; gap: var(--space-3);
  min-height: var(--tap-sm);
  color: var(--color-ink); text-decoration: none; white-space: nowrap;
  font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-md); letter-spacing: var(--tracking-display);
}
.brand__mark { width: var(--space-5); height: var(--space-6); flex: none; }
.mark__a { fill: var(--chip-japandi-1); }
.mark__b { fill: var(--color-clay); }
.mark__c { fill: var(--color-fern); }
.top__where { font-size: var(--text-sm); color: var(--color-ink-muted); white-space: nowrap; }

.lead { font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--color-ink-muted); }
.small { font-size: var(--text-sm); color: var(--color-ink-muted); }
.eyebrow {
  display: block; margin-bottom: var(--space-2);
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-clay);
}
.label { display: block; margin: var(--space-5) 0 var(--space-1); font-weight: var(--weight-semibold); }
.label .small { font-weight: var(--weight-regular); }

.card {
  margin: 0 0 var(--space-4); padding: var(--space-5) var(--space-4);
  background: var(--color-surface);
  border: var(--rule-width) solid var(--color-rule);
  border-radius: var(--radius-lg);
}
.card > :last-child { margin-bottom: 0; }
@media (min-width: 26rem) { .card { padding: var(--space-5); } }
.note { margin-top: var(--space-5); }

/* ---------- Buttons ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  width: 100%; min-height: var(--tap);
  padding: var(--space-3) var(--space-5);
  border: var(--rule-heavy) solid var(--color-fern); border-radius: var(--radius-pill);
  background: var(--color-fern); color: var(--color-on-fern);
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: var(--leading-snug);
  text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:active { background: var(--color-fern-active); transform: translateY(1px); }
.btn.secondary { background: var(--color-surface); color: var(--color-fern); }
.btn.danger { background: var(--color-danger); border-color: var(--color-danger); color: var(--color-on-danger); }
.btn.danger-outline { background: var(--color-surface); border-color: var(--color-danger); color: var(--color-danger); }
.btn.quiet-danger { width: auto; min-height: var(--tap-min); padding: var(--space-2) var(--space-3); border-color: transparent; background: transparent; color: var(--color-danger); font-size: var(--text-sm); }
.btn.quiet-danger[data-armed="1"] { border-color: var(--color-danger); background: var(--color-danger-soft); }
.btn.small { min-height: var(--tap-sm); padding: var(--space-2) var(--space-3); font-size: var(--text-md); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: default; transform: none; }
.row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.stack { display: grid; gap: var(--space-3); }

/* ---------- Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0 0; }
.chip {
  display: inline-flex; align-items: center; gap: var(--space-3);
  min-height: var(--tap-sm); padding: var(--space-2) var(--space-4);
  background: var(--color-surface); color: var(--color-ink);
  border: var(--rule-width) solid var(--color-rule-strong); border-radius: var(--radius-pill);
  font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: var(--leading-snug); text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.chip[aria-pressed="true"] { border-color: var(--color-fern); box-shadow: inset 0 0 0 var(--rule-width) var(--color-fern); background: var(--color-fern-soft); color: var(--color-fern); font-weight: var(--weight-semibold); }
.chips.styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chips.styles .chip { flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-2); min-height: var(--tap); padding: var(--space-3); border-radius: var(--radius-md); }
.chips[aria-disabled="true"] .chip { opacity: 0.5; cursor: progress; }
.chip__dots { display: inline-flex; flex: none; }
.chip__dots::before, .chip__dots::after, .chip__dots span {
  content: ""; display: block; width: var(--chip-dot); height: var(--chip-dot);
  border-radius: var(--radius-pill); box-shadow: 0 0 0 var(--rule-heavy) var(--color-surface);
}
.chip__dots::before { background: var(--t1); }
.chip__dots span { background: var(--t2); margin-left: calc(var(--space-1) * -1); }
.chip__dots::after { background: var(--t3); margin-left: calc(var(--space-1) * -1); }
.tone--japandi      { --t1: var(--chip-japandi-1); --t2: var(--chip-japandi-2); --t3: var(--chip-japandi-3); }
.tone--midcentury   { --t1: var(--chip-midcentury-1); --t2: var(--chip-midcentury-2); --t3: var(--chip-midcentury-3); }
.tone--scandi       { --t1: var(--chip-scandi-1); --t2: var(--chip-scandi-2); --t3: var(--chip-scandi-3); }
.tone--coastal      { --t1: var(--chip-coastal-1); --t2: var(--chip-coastal-2); --t3: var(--chip-coastal-3); }
.tone--farmhouse    { --t1: var(--chip-farmhouse-1); --t2: var(--chip-farmhouse-2); --t3: var(--chip-farmhouse-3); }
.tone--industrial   { --t1: var(--chip-industrial-1); --t2: var(--chip-industrial-2); --t3: var(--chip-industrial-3); }
.tone--boho         { --t1: var(--chip-boho-1); --t2: var(--chip-boho-2); --t3: var(--chip-boho-3); }
.tone--minimal      { --t1: var(--chip-minimal-1); --t2: var(--chip-minimal-2); --t3: var(--chip-minimal-3); }
.tone--traditional  { --t1: var(--chip-traditional-1); --t2: var(--chip-traditional-2); --t3: var(--chip-traditional-3); }
.tone--deco         { --t1: var(--chip-deco-1); --t2: var(--chip-deco-2); --t3: var(--chip-deco-3); }
.tone--moody        { --t1: var(--chip-moody-1); --t2: var(--chip-moody-2); --t3: var(--chip-moody-3); }
.tone--plants       { --t1: var(--chip-plants-1); --t2: var(--chip-plants-2); --t3: var(--chip-plants-3); }

/* ---------- "Keep my furniture" switch (a real checkbox, drawn as a switch) ---------- */
.toggle {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: var(--tap); padding-block: var(--space-2);
  font-weight: var(--weight-semibold); cursor: pointer;
}
.toggle .small { display: block; font-weight: var(--weight-regular); }
.switch {
  appearance: none; -webkit-appearance: none; position: relative; flex: none; margin: 0;
  width: var(--switch-w); height: var(--switch-h);
  border-radius: var(--radius-pill); background: var(--color-rule-strong); cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-out);
}
.switch::after {
  content: ""; position: absolute; top: var(--space-1); left: var(--space-1);
  width: calc(var(--switch-h) - var(--space-2)); height: calc(var(--switch-h) - var(--space-2));
  border-radius: var(--radius-pill); background: var(--color-surface);
  transition: transform var(--dur-base) var(--ease-out);
}
.switch:checked { background: var(--color-fern); }
.switch:checked::after { transform: translateX(calc(var(--switch-w) - var(--switch-h))); }
.switch:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-width); }

/* ---------- Photo picker, thumbnails, status lines ---------- */
.picker {
  display: grid; gap: var(--space-2); justify-items: center;
  padding: var(--space-6) var(--space-4);
  border: var(--rule-heavy) dashed var(--color-rule-strong); border-radius: var(--radius-lg);
  background: var(--color-wall); text-align: center; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.picker:focus-within { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-width); }
.picker strong { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--color-fern); }
.picker input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.picker.is-off { opacity: 0.55; cursor: default; }
.thumb { display: block; width: 100%; border-radius: var(--radius-md); background: var(--color-wall-deep); }
.photo-box { display: grid; gap: var(--space-3); }
.status {
  display: flex; gap: var(--space-3); align-items: center;
  margin: var(--space-3) 0; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md); background: var(--color-fern-soft); color: var(--color-fern);
  font-weight: var(--weight-semibold); line-height: var(--leading-snug);
}
.photo-box .status { margin: 0; }
.status.warn { background: var(--color-warn-soft); color: var(--color-warn); }
.status.bad { background: var(--color-danger-soft); color: var(--color-danger); }
.spin {
  flex: none; width: var(--spinner); height: var(--spinner); border-radius: var(--radius-pill);
  border: var(--focus-width) solid currentColor; border-right-color: transparent;
  animation: spin var(--dur-spin) linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Before/after compare ---------- */
.compare { position: relative; width: 100%; overflow: hidden; border-radius: var(--radius-md); background: var(--color-wall-deep); touch-action: pan-y; user-select: none; }
.compare img { display: block; width: 100%; height: auto; pointer-events: none; }
.compare .after { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.compare .bar { position: absolute; top: 0; bottom: 0; width: var(--space-1); margin-left: calc(var(--space-1) / -2); background: var(--color-surface); pointer-events: none; }
.compare .knob {
  position: absolute; top: 50%; left: 50%; width: var(--knob); height: var(--knob);
  transform: translate(-50%, -50%); border-radius: var(--radius-pill);
  background: var(--color-surface); box-shadow: var(--shadow-knob);
}
.compare .knob::before, .compare .knob::after {
  content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: calc(var(--space-2) * -1);
  border-block: var(--space-2) solid transparent;
}
.compare .knob::before { left: var(--space-2); border-right: var(--space-2) solid var(--color-fern); }
.compare .knob::after { right: var(--space-2); border-left: var(--space-2) solid var(--color-fern); }
.compare .tag {
  position: absolute; top: var(--space-2); padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill); background: rgb(var(--color-scrim) / 0.78); color: var(--color-on-fern);
  font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: var(--leading-snug);
  pointer-events: none;
}
.compare .tag.l { left: var(--space-2); white-space: nowrap; }
.compare .tag.r { right: var(--space-2); max-width: calc(100% - var(--space-8) * 2 - var(--space-4)); text-align: right; }
.compare input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.compare:focus-within { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-width); }

/* The AI disclosure: the landing's clay-ruled note, at reading size. */
.disclosure {
  margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-3);
  border-left: var(--focus-width) solid var(--color-clay);
  font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--color-ink);
}

/* ---------- Paywall (the landing's price card) ---------- */
.paywall { margin-top: var(--space-5); padding: var(--space-6) var(--space-5); border-color: var(--color-rule-strong); box-shadow: var(--shadow-card); }
.price { display: flex; align-items: baseline; gap: var(--space-3); margin: var(--space-2) 0 var(--space-4); }
.price__now { font-family: var(--font-display); font-size: var(--text-price); font-weight: var(--weight-semibold); line-height: 1; letter-spacing: var(--tracking-display); }
.price__unit { color: var(--color-ink-muted); }
.ticks { list-style: none; display: grid; gap: var(--space-3); margin: 0 0 var(--space-5); padding: var(--space-4) 0; border-block: var(--rule-width) solid var(--color-rule); }
.ticks li { position: relative; padding-left: var(--space-6); line-height: var(--leading-snug); }
.ticks li::before {
  content: ""; position: absolute; left: var(--space-1); top: 0.3em;
  width: var(--space-4); height: var(--space-2);
  border-left: var(--rule-heavy) solid var(--color-fern); border-bottom: var(--rule-heavy) solid var(--color-fern);
  transform: rotate(-45deg);
}
.closed { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-wall-deep); font-weight: var(--weight-semibold); }
.paywall .small { margin-top: var(--space-4); }

/* ---------- Studio ---------- */
.counters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-4); }
.counter { padding: var(--space-3) var(--space-4); background: var(--color-surface); border: var(--rule-width) solid var(--color-rule); border-radius: var(--radius-lg); }
.counter b { display: block; font-family: var(--font-display); font-size: var(--text-numeral); font-weight: var(--weight-semibold); line-height: var(--leading-tight); color: var(--color-clay); }
.counter span { font-size: var(--text-sm); color: var(--color-ink-muted); }
.results { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.results:empty { display: none; }
.result { overflow: hidden; border: var(--rule-width) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-wall); }
.result img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--color-wall-deep); }
.result .meta { display: grid; gap: var(--space-3); padding: var(--space-3); }
.result .disclosure { margin: 0; }
.result .head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.result .head b { display: block; font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
.del-room { margin-top: var(--space-5); }
.linkbox {
  margin: var(--space-3) 0; padding: var(--space-3);
  border-radius: var(--radius-md); background: var(--color-wall-deep);
  font-family: var(--font-mono); font-size: var(--text-sm); line-height: var(--leading-snug); word-break: break-all;
}
.save { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-warn-soft); color: var(--color-warn); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
.confirm { display: grid; gap: var(--space-3); }

/* The compare sheet: full screen, over a dark scrim. */
.sheet { position: fixed; inset: 0; z-index: 10; overflow-y: auto; display: flex; flex-direction: column; justify-content: center; padding: var(--space-4) var(--gutter); background: rgb(var(--color-scrim) / 0.95); color: var(--color-on-fern); }
.sheet .inner { width: 100%; max-width: var(--page); margin: 0 auto; }
.sheet h2 { color: var(--color-on-fern); }
.sheet .disclosure { margin-bottom: var(--space-5); color: var(--color-on-fern); }
.sheet :focus-visible, .sheet .compare:focus-within { outline-color: var(--color-focus-on-dark); }
.sheet .btn.secondary { background: transparent; border-color: var(--color-on-fern); color: var(--color-on-fern); }
.sheet .btn:not(.secondary) { background: var(--color-on-fern); border-color: var(--color-on-fern); color: var(--color-fern); }

/* ---------- Footer ---------- */
footer { display: flex; justify-content: center; gap: var(--space-5); margin-top: var(--space-6); }
footer a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap-min); min-width: var(--tap-min); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Hover only where there is a real pointer, so a tap never leaves a chip looking selected. */
@media (hover: hover) {
  a:hover { color: var(--color-fern-hover); }
  a.brand:hover { color: var(--color-ink); }
  .btn:hover { background: var(--color-fern-hover); border-color: var(--color-fern-hover); color: var(--color-on-fern); }
  .btn.secondary:hover { background: var(--color-fern-soft); color: var(--color-fern-hover); }
  .btn.danger:hover { background: var(--color-danger-hover); border-color: var(--color-danger-hover); }
  .btn.danger-outline:hover, .btn.quiet-danger:hover { background: var(--color-danger-soft); color: var(--color-danger-hover); }
  .chip:hover { border-color: var(--color-fern); background: var(--color-fern-soft); }
  .picker:hover { border-color: var(--color-fern); background: var(--color-fern-soft); }
  .sheet .btn.secondary:hover { background: rgb(var(--color-shadow) / 0.6); }
}