/* Her app. Big type, big targets (≥64px, most 76px+), high contrast, one thing
   at a time. Colors mirror src/ui/tokens.ts; selection is never color alone
   (a thicker border and a ✓). */

@font-face { font-family: "Atkinson Hyperlegible"; src: url(/fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url(/fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --paper: #FAF8F4; --card: #FFFFFF; --rule: #E3DED3; --control: #837E72;
  --ink: #1D2A2E; --soft: #566468; --on-ink: #FBF9F5;
  --action: #1F4F9C; --action-dark: #173D7A; --action-tint: #E4ECF8;
  --clear: #0B6B5D; --clear-tint: #DDEFEA;
  --watch-tint: #FBF0D4; --watch-rule: #EBD397;
  --urgent: #8E2A22; --urgent-tint: #FAEAE8;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Atkinson Hyperlegible", system-ui, -apple-system, sans-serif; font-size: 24px; line-height: 1.35; }
main { max-width: 620px; margin: 0 auto; padding: max(10px, env(safe-area-inset-top)) 16px calc(108px + env(safe-area-inset-bottom)); min-height: 100vh; outline: none; }
@media (min-width: 900px) { main { max-width: 760px; } body { font-size: 26px; } }

h1 { font-size: 34px; line-height: 1.2; margin: 6px 0 10px; font-weight: 700; outline: none; }
p { margin: 0 0 14px; }
.sub { font-size: 23px; color: var(--soft); margin: 0 0 20px; }
.small { font-size: 19px; color: var(--soft); }
.center { text-align: center; }
.loading, .noscript { font-size: 26px; padding: 48px 0; text-align: center; }

/* top: back, progress, read aloud */
.top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; }
.progress { font-size: 18px; color: var(--soft); }
.bar { height: 8px; background: var(--rule); border-radius: 4px; overflow: hidden; margin: 2px 0 12px; }
.bar > span { display: block; height: 100%; background: var(--action); border-radius: 4px; }
.back { border: none; background: none; font: inherit; font-size: 21px; color: var(--action); min-height: 52px; min-width: 64px; padding: 0 6px; cursor: pointer; white-space: nowrap; text-align: left; }
.say { border: 2px solid transparent; background: none; font-size: 28px; min-width: 56px; min-height: 56px; border-radius: 14px; cursor: pointer; }
.say[aria-pressed="true"] { background: var(--action-tint); border-color: var(--action); }

/* buttons */
button { font: inherit; color: inherit; }
.btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 76px; padding: 14px 18px; border-radius: 18px; border: 3px solid var(--control); background: var(--card); font-size: 26px; font-weight: 700; line-height: 1.2; cursor: pointer; text-align: center; text-decoration: none; color: var(--ink); -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.btn:focus-visible, .field:focus-visible, .say:focus-visible, .back:focus-visible { outline: 4px solid var(--action); outline-offset: 3px; }
.btn:active { transform: scale(0.985); }
.btn.primary { background: var(--action); border-color: var(--action); color: var(--on-ink); }
.btn.primary:active { background: var(--action-dark); }
.btn.quiet { border-color: var(--rule); font-weight: 400; font-size: 22px; min-height: 64px; }
.btn[disabled] { opacity: 0.45; cursor: default; }
.btn .emoji, .btn .icon { font-size: 38px; line-height: 1; }
.btn.unwell { border-color: var(--urgent); color: var(--urgent); font-size: 22px; min-height: 64px; background: var(--card); box-shadow: 0 -2px 12px rgba(29, 42, 46, 0.08); }
.stack > * + * { margin-top: 14px; }
.row { display: flex; gap: 12px; }
.row > * { flex: 1; }

/* faces and choices */
.choices { display: grid; gap: 12px; }
.choices .btn { justify-content: flex-start; text-align: left; }

/* picture tiles */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
@media (min-width: 900px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tile { flex-direction: column; min-height: 124px; font-size: 21px; font-weight: 400; padding: 12px 10px; position: relative; }
.tile[aria-pressed="true"] { background: var(--action-tint); border-color: var(--action); border-width: 5px; font-weight: 700; }
.tile[aria-pressed="true"]::after { content: "✓"; position: absolute; top: 4px; right: 10px; font-size: 28px; font-weight: 700; color: var(--action); }

/* months */
.months { grid-template-columns: repeat(3, 1fr); }
.month { min-height: 84px; font-size: clamp(16px, 4.8vw, 23px); padding: 6px 4px; }
.month.done, .month.done[disabled] { background: var(--clear-tint); border-color: var(--clear); color: var(--clear); opacity: 1; }
.month.miss { animation: shake 0.3s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .month.miss { animation: none; border-color: var(--urgent); } .btn:active { transform: none; } }

/* number entry */
.fields { display: grid; gap: 12px; margin-bottom: 16px; }
.field { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 88px; padding: 8px 18px; border: 3px solid var(--control); border-radius: 18px; background: var(--card); font-size: 22px; text-align: left; cursor: pointer; }
.field[aria-current="true"] { border-color: var(--action); border-width: 5px; }
.field .value { font-size: 46px; font-weight: 700; font-variant-numeric: tabular-nums; }
.field .value .unit { font-size: 24px; font-weight: 400; color: var(--soft); margin-left: 4px; }
.field .value.empty { color: var(--rule); }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.key { min-height: 76px; font-size: 36px; padding: 4px; }
/* two or three numbers side by side (blood pressure and pulse) */
.fields.cols2 { grid-template-columns: 1fr 1fr; }
.fields.cols3 { grid-template-columns: 1fr 1fr 1fr; }
.fields.cols2 .field, .fields.cols3 .field { flex-direction: column; justify-content: center; gap: 0; padding: 8px 4px; min-height: 100px; font-size: 18px; text-align: center; }
.fields.cols3 .field .value { font-size: 38px; }
.pair { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }
@media (max-width: 420px), (max-height: 860px) {
  h1 { font-size: 29px; margin-bottom: 6px; }
  .sub { font-size: 21px; margin-bottom: 12px; }
  .key { min-height: 60px; font-size: 32px; }
  .keypad { gap: 8px; margin-bottom: 12px; }
  .field { min-height: 76px; }
  .fields.cols2 .field, .fields.cols3 .field { min-height: 88px; }
  .tile { min-height: 104px; }
  .btn.unwell { min-height: 58px; }
}
.code { display: flex; gap: 8px; justify-content: center; margin: 10px 0 18px; }
.code span { width: 48px; height: 66px; border: 3px solid var(--control); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: 700; background: var(--card); }
.code span.on { border-color: var(--action); }

/* steppers, cups, swatches */
.stepper { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 8px 0 22px; }
.stepper .btn { width: 100px; min-height: 100px; font-size: 52px; flex: none; }
.stepper .count { font-size: 76px; font-weight: 700; min-width: 2.2ch; text-align: center; font-variant-numeric: tabular-nums; }
.cups { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.cup { flex-direction: column; gap: 2px; min-height: 88px; font-size: 20px; padding: 4px; }
.cup .icon { font-size: 30px; }
.cup[aria-pressed="true"] { background: var(--action-tint); border-color: var(--action); border-width: 4px; }
.cup.goal { box-shadow: inset 0 -6px 0 var(--clear); }
.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 8px; }
.swatch { min-height: 100px; border-radius: 18px; font-size: 22px; font-weight: 700; border: 3px solid var(--control); cursor: pointer; }
.swatch[aria-pressed="true"] { outline: 6px solid var(--action); outline-offset: 2px; }
.swatch-labels { display: flex; justify-content: space-between; font-size: 19px; color: var(--soft); margin-bottom: 18px; }

/* cards */
.card { background: var(--card); border: 2px solid var(--rule); border-radius: 18px; padding: 16px 18px; margin-bottom: 16px; }
.card.message { background: var(--watch-tint); border-color: var(--watch-rule); }
.card.told { background: var(--clear-tint); border-color: var(--clear); }
.card.call-now { background: var(--urgent-tint); border: 3px solid var(--urgent); }
/* An urgent check-in, said calmly: no red, and 911 last, under its own sentence. */
.card.help { background: var(--action-tint); border-color: var(--action); }
.card.help .if-bad { margin: 22px 0 10px; }
.card h2 { font-size: 26px; margin: 0 0 8px; }
.done-check { font-size: 96px; line-height: 1; text-align: center; color: var(--clear); margin: 12px 0 4px; }
textarea { width: 100%; min-height: 170px; font: inherit; font-size: 24px; border: 3px solid var(--control); border-radius: 18px; padding: 14px; margin-bottom: 14px; background: var(--card); color: var(--ink); }
textarea:focus { outline: 4px solid var(--action); outline-offset: 2px; }
.mic[aria-pressed="true"] { background: var(--urgent-tint); border-color: var(--urgent); }

/* the bar along the bottom */
.bottom { position: fixed; left: 0; right: 0; bottom: 0; padding: 16px 16px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(rgba(250, 248, 244, 0), var(--paper) 35%); }
.bottom .inner { max-width: 620px; margin: 0 auto; }
@media (min-width: 900px) { .bottom .inner { max-width: 760px; } }

.toast { position: fixed; left: 16px; right: 16px; top: max(14px, env(safe-area-inset-top)); max-width: 588px; margin: 0 auto; background: var(--ink); color: var(--on-ink); border-radius: 16px; padding: 16px 18px; font-size: 22px; z-index: 10; }

/* ==== LOOK 2 ============================================================================
   A clearer set of screens, for people whose settings say look 2. Their page has
   data-look="2" on <html>, and every rule from here to the end of this file
   starts with that, so for look 1 not one of them applies. Nothing above this
   line may change for look 2's sake (src/worker/checkin/look2.test.ts checks both).

   The whole scale, written once:
     type     numerals 48 · question 30 bold · button 26 bold · sentence 24 · label 20
              (in rem, so the browser's text-size setting works), and no other size
     targets  nothing tappable under 60 high · number-pad keys 64 · answers 72 · the forward button 68
     space    12 between like things · 24 before anything with a different consequence
     shape    one radius, 16 · a 3px edge in --control on everything tappable
     words    every sentence in ink; no grey helper text
     chosen   the action colour on the edge, the tint, and a tick; never a change of size
     focus    a 4px ring
     motion   one soft beat, and none for anyone who has asked for less
   Colours are the custom properties at the top of this file and nothing else. */
html[data-look="2"] {
  --t-num: 3rem; --t-ask: 1.875rem; --t-btn: 1.625rem; --t-say: 1.5rem; --t-label: 1.25rem;
  --like: 12px; --apart: 24px; --r: 16px; --edge: 3px; --beat: 0.2s;
}

/* the page */
html[data-look="2"] body { font-size: var(--t-say); }
html[data-look="2"] main { max-width: 620px; padding: max(8px, env(safe-area-inset-top)) 16px calc(106px + env(safe-area-inset-bottom)); }
html[data-look="2"] h1 { font-size: var(--t-ask); line-height: 1.2; margin: 0 0 var(--like); }
html[data-look="2"] p { margin: 0 0 var(--like); }
html[data-look="2"] .hello { font-size: var(--t-say); color: var(--ink); margin: 0 0 var(--like); }
html[data-look="2"] .sub { font-size: var(--t-say); color: var(--ink); margin: 0 0 var(--like); }
html[data-look="2"] .small { font-size: var(--t-label); color: var(--ink); }
html[data-look="2"] .loading, html[data-look="2"] .noscript { font-size: var(--t-say); }
html[data-look="2"] .body { margin-top: var(--like); }
html[data-look="2"] [hidden] { display: none !important; }

/* the top bar: Back, the name over the count of screens, Read aloud */
html[data-look="2"] .top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--like); min-height: 60px; margin-bottom: var(--like); }
html[data-look="2"] .back, html[data-look="2"] .say { min-height: 60px; min-width: 60px; padding: 4px 12px; border: var(--edge) solid var(--control); border-radius: var(--r); background: var(--card); color: var(--ink); font-size: var(--t-label); font-weight: 700; line-height: 1.2; text-align: center; cursor: pointer; }
html[data-look="2"] .say { display: flex; flex-direction: column; align-items: center; justify-content: center; }
html[data-look="2"] .say .state { font-weight: 400; }
html[data-look="2"] .say[aria-pressed="true"] { background: var(--action-tint); border-color: var(--action); }
html[data-look="2"] .mid { min-width: 0; text-align: center; font-size: var(--t-label); line-height: 1.2; }
html[data-look="2"] .who { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 var(--like); font-weight: 700; }
html[data-look="2"] .name { overflow-wrap: anywhere; }
html[data-look="2"] .practice { padding: 0 8px; border: 2px solid var(--ink); border-radius: var(--r); font-weight: 400; }
html[data-look="2"] .count { display: block; }

/* buttons */
html[data-look="2"] .btn { gap: var(--like); min-height: 72px; padding: 8px 16px; border: var(--edge) solid var(--control); border-radius: var(--r); font-size: var(--t-btn); font-weight: 700; line-height: 1.15; transition: background-color var(--beat), border-color var(--beat); }
html[data-look="2"] .btn:active { transform: none; background: var(--action-tint); }
html[data-look="2"] .btn.primary { background: var(--action); border-color: var(--action); color: var(--on-ink); }
html[data-look="2"] .btn.primary:active { background: var(--action-dark); border-color: var(--action-dark); }
html[data-look="2"] .btn.quiet { min-height: 60px; border-color: var(--control); font-size: var(--t-say); font-weight: 400; }
html[data-look="2"] .btn .emoji, html[data-look="2"] .btn .icon { font-size: var(--t-ask); }
html[data-look="2"] .stack > * + * { margin-top: var(--like); }
html[data-look="2"] .stack > span:empty + * { margin-top: 0; }
html[data-look="2"] .body > * + .stack, html[data-look="2"] .body > * + .apart { margin-top: var(--apart); }
html[data-look="2"] .row { gap: var(--like); }

/* answers: one tap, a tick, then on */
html[data-look="2"] .choices { gap: var(--like); }
html[data-look="2"] .choices .btn { position: relative; padding-right: 56px; }
html[data-look="2"] .btn[aria-pressed="true"] { background: var(--action-tint); border-color: var(--action); }
html[data-look="2"] .choices .btn[aria-pressed="true"]::after, html[data-look="2"] .row .btn[aria-pressed="true"]::after { content: "✓"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--action); font-size: var(--t-btn); font-weight: 700; line-height: 1; animation: look2-in var(--beat) ease-out; }
html[data-look="2"] .row .btn { position: relative; padding: 8px 4px 28px; }
html[data-look="2"] .row .btn[aria-pressed="true"]::after { right: 0; left: 0; top: auto; bottom: 4px; transform: none; text-align: center; font-size: var(--t-label); }
@keyframes look2-in { from { opacity: 0; } }

/* picture tiles */
html[data-look="2"] .tiles { gap: var(--like); margin-bottom: 0; }
html[data-look="2"] .tile { min-height: 104px; padding: 12px 8px; font-size: var(--t-label); font-weight: 400; line-height: 1.2; }
html[data-look="2"] .tile[aria-pressed="true"] { border-width: var(--edge); font-weight: 400; }
html[data-look="2"] .tile[aria-pressed="true"]::after { top: 6px; right: 8px; font-size: var(--t-btn); line-height: 1; animation: look2-in var(--beat) ease-out; }

/* months: the same grid of the same tiles, in this look's type */
html[data-look="2"] .months { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html[data-look="2"] .month { min-height: 72px; padding: 4px 0; font-size: var(--t-label); font-weight: 400; }

/* number entry */
html[data-look="2"] .fields { gap: var(--like); margin-bottom: var(--like); }
html[data-look="2"] .field { min-height: 80px; padding: 4px 16px; border: var(--edge) solid var(--control); border-radius: var(--r); color: var(--ink); font-size: var(--t-label); line-height: 1.2; }
html[data-look="2"] .field[aria-current="true"] { border-width: var(--edge); border-color: var(--action); background: var(--action-tint); }
html[data-look="2"] .field .value { font-size: var(--t-num); line-height: 1.1; }
html[data-look="2"] .field .value .unit { font-size: var(--t-label); color: var(--ink); }
html[data-look="2"] .field .value.empty { color: var(--control); }
html[data-look="2"] .fields.cols2 .field, html[data-look="2"] .fields.cols3 .field { min-height: 80px; padding: 4px 2px; font-size: var(--t-label); }
html[data-look="2"] .fields.cols3 .field .value { font-size: var(--t-num); }
html[data-look="2"] .keypad { gap: var(--like); margin-bottom: 0; }
html[data-look="2"] .key { min-height: 64px; padding: 0; font-size: var(--t-num); line-height: 1; }
html[data-look="2"] .card.check { margin: 0; border: var(--edge) solid var(--ink); }

/* steppers, cups, swatches */
html[data-look="2"] .stepper { gap: var(--apart); margin: 0 0 var(--apart); }
html[data-look="2"] .stepper .btn { width: 88px; min-height: 88px; padding: 0; font-size: var(--t-num); line-height: 1; }
html[data-look="2"] .stepper .count { font-size: var(--t-num); }
html[data-look="2"] .cups { gap: var(--like); margin-bottom: 0; }
html[data-look="2"] .cup { position: relative; gap: 0; min-height: 76px; padding: 4px; font-size: var(--t-btn); }
html[data-look="2"] .cup .icon { font-size: var(--t-say); }
html[data-look="2"] .cup[aria-pressed="true"] { border-width: var(--edge); }
html[data-look="2"] .cup.picked::after { content: "✓"; position: absolute; top: 4px; right: 6px; color: var(--action); font-size: var(--t-label); font-weight: 700; line-height: 1; animation: look2-in var(--beat) ease-out; }
html[data-look="2"] .swatches { gap: var(--like); margin-bottom: var(--like); }
html[data-look="2"] .swatch { position: relative; min-height: 96px; border: var(--edge) solid var(--control); border-radius: var(--r); }
html[data-look="2"] .swatch[aria-pressed="true"] { outline: none; border-color: var(--action); box-shadow: inset 0 0 0 4px var(--action-tint); }
html[data-look="2"] .swatch[aria-pressed="true"]::after { content: "✓"; position: absolute; top: 8px; right: 8px; padding: 2px 6px; border-radius: var(--r); background: var(--action-tint); color: var(--action); font-size: var(--t-label); font-weight: 700; line-height: 1.2; animation: look2-in var(--beat) ease-out; }
html[data-look="2"] .swatch-labels { margin-bottom: 0; color: var(--ink); font-size: var(--t-label); }

/* cards, the note, the finished screen */
html[data-look="2"] .card { margin-bottom: var(--like); padding: 16px; border-radius: var(--r); }
html[data-look="2"] .card > p:last-child { margin-bottom: 0; }
html[data-look="2"] .card.message { background: var(--card); border-color: var(--rule); }
html[data-look="2"] .card .from { font-size: var(--t-label); font-weight: 700; }
html[data-look="2"] .card h2 { font-size: var(--t-btn); margin: 0 0 var(--like); }
html[data-look="2"] .done-check { display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; margin: var(--apart) 0; border-radius: var(--r); background: var(--clear); color: var(--on-ink); font-size: var(--t-num); font-weight: 700; }
html[data-look="2"] .close { margin-top: var(--apart); font-weight: 700; }
html[data-look="2"] main[data-pane="end"] { padding-bottom: calc(var(--apart) + env(safe-area-inset-bottom)); }
html[data-look="2"] textarea { min-height: 160px; margin-bottom: var(--like); padding: 12px; border: var(--edge) solid var(--control); border-radius: var(--r); font-size: var(--t-say); }
html[data-look="2"] .mic[aria-pressed="true"] { background: var(--urgent-tint); border-color: var(--urgent); }
html[data-look="2"] .toast { border-radius: var(--r); padding: 16px; font-size: var(--t-say); }

/* the bottom bar: solid, one row. "I don't feel well" on the left, the one forward button on the right */
html[data-look="2"] .bottom { padding: var(--like) 16px calc(var(--like) + env(safe-area-inset-bottom)); border-top: 2px solid var(--rule); background: var(--paper); }
html[data-look="2"] .bottom .inner { display: flex; align-items: stretch; gap: var(--like); max-width: 588px; }
html[data-look="2"] .bottom .btn { width: auto; min-height: 68px; padding: 0 12px; line-height: 1.1; }
html[data-look="2"] .btn.unwell { flex: 0 1 auto; max-width: 44%; border-color: var(--control); background: var(--card); box-shadow: none; color: var(--ink); font-size: var(--t-btn); font-weight: 700; }
html[data-look="2"] .btn.forward { flex: 1 1 0; margin-left: auto; font-size: var(--t-btn); }
html[data-look="2"] .btn.forward.quiet { font-weight: 400; }

/* a wide screen (a laptop, or a tablet on its side): the question on the left, the answers on the right */
@media (min-width: 900px) {
  html[data-look="2"] body { font-size: var(--t-say); }
  html[data-look="2"] main { max-width: 960px; padding: 12px 24px 112px; }
  html[data-look="2"] main > :not(.top):not(.bottom) { max-width: 620px; }
  html[data-look="2"] main[data-pane] { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto auto auto auto auto auto 1fr; grid-template-areas: "top top" "alert alert" "tick body" "hello body" "ask body" "help body" ". body"; column-gap: 48px; align-content: start; }
  html[data-look="2"] main[data-pane] > :not(.top):not(.bottom) { max-width: none; }
  html[data-look="2"] main[data-pane] > .top { grid-area: top; }
  html[data-look="2"] main[data-pane] > .card { grid-area: alert; }
  html[data-look="2"] main[data-pane] > .done-check { grid-area: tick; }
  html[data-look="2"] main[data-pane] > .hello { grid-area: hello; }
  html[data-look="2"] main[data-pane] > h1 { grid-area: ask; }
  html[data-look="2"] main[data-pane] > .sub { grid-area: help; }
  html[data-look="2"] main[data-pane] > .body { grid-area: body; margin-top: 0; }
  html[data-look="2"] main[data-pane="end"] > .body { margin-top: var(--apart); }
  html[data-look="2"] main[data-pane="two"] .tiles { grid-template-columns: 1fr 1fr; }
  html[data-look="2"] main[data-pane="two"] .months { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html[data-look="2"] main[data-pane="two"] .tile:not(.month) { flex-direction: row; justify-content: flex-start; min-height: 72px; padding: 8px 44px 8px 12px; text-align: left; }
  html[data-look="2"] .bottom { padding-left: 24px; padding-right: 24px; }
  html[data-look="2"] .bottom .inner { max-width: 912px; }
  html[data-look="2"] .btn.unwell { max-width: none; }
  html[data-look="2"] .btn.forward { flex: 0 1 360px; }
}

/* focus: a 4px ring on everything that can take it */
html[data-look="2"] button:focus-visible, html[data-look="2"] a:focus-visible, html[data-look="2"] textarea:focus-visible, html[data-look="2"] .swatch[aria-pressed="true"]:focus-visible { outline: 4px solid var(--action); outline-offset: 3px; }

/* motion: one soft beat, and none for anyone who has asked for less */
@media (prefers-reduced-motion: reduce) {
  html[data-look="2"] *, html[data-look="2"] *::after { animation: none !important; transition: none !important; }
}