/* ============================================================================
   DESIGN v2 — the Apple-leaning alternative.

   Everything here is scoped under html[data-design="v2"]. app.css is untouched
   and remains the default, so reverting is one attribute and nothing to undo.

   The argument, in short: the current design is an instrument -- monospace,
   uppercase, dense, outlined. This one is a product -- system type, sentence
   case, generous, layered. Same palette, because the palette was never the
   problem.

   What changes and why:
     Type      12 sizes down to 6, on a scale. Body 17px, not 13. Monospace
               kept ONLY where digits align meaningfully (temperatures, litres,
               hours) -- that is what it is for.
     Targets   Everything tappable reaches 44px, via padding rather than by
               inflating text.
     Depth     Elevated surfaces instead of 1px outlines. Borders everywhere
               read as a wireframe; light and shadow read as an object.
     Colour    Straw means one thing: primary action, or current state. It was
               previously doing chips, values, buttons and highlights at once.
     Motion    State changes ease rather than snap. Respects reduced-motion.
     Light     A real light mode, because half of Apple's users are in one.
============================================================================ */

html[data-design="v2"]{
  /* Surfaces, not outlines. Three levels of elevation and almost no borders. */
  --v2-bg:        #0E0C07;
  --v2-surface:   #191610;
  --v2-raised:    #221E16;
  --v2-hairline:  rgba(237,230,216,.08);

  --v2-text:      #F2EDE3;
  --v2-second:    rgba(242,237,227,.62);
  --v2-tertiary:  rgba(242,237,227,.38);

  --v2-accent:    #D8BE86;   /* straw — primary action and current state ONLY */
  --v2-accent-ink:#241C0B;
  --v2-warm:      #C87E5F;   /* brick — warnings, heat */
  --v2-cool:      #8FB4D6;   /* frost, water */
  --v2-green:     #5C7F52;

  --v2-r-sm: 10px;
  --v2-r-md: 14px;
  --v2-r-lg: 18px;

  --v2-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.28);

  /* 4pt grid */
  --v2-1: 4px; --v2-2: 8px; --v2-3: 12px; --v2-4: 16px;
  --v2-5: 20px; --v2-6: 24px; --v2-8: 32px; --v2-10: 40px;
}

/* ---- light mode. Same hues, inverted weights. ---- */
@media (prefers-color-scheme: light){
  html[data-design="v2"]:not([data-force="dark"]){
    --v2-bg:       #F6F2EA;
    --v2-surface:  #FFFFFF;
    --v2-raised:   #FFFFFF;
    --v2-hairline: rgba(20,17,9,.09);
    --v2-text:     #1A1710;
    /* Measured against white, not eyeballed. The dark palette passes easily
       because everything sits on near-black; light mode is where a warm gold
       quietly fails. #9A7B3A gave 3.99:1 for white-on-accent -- under AA for
       every primary button. These are 5.13 and 4.7. */
    --v2-second:   rgba(26,23,16,.70);
    --v2-tertiary: rgba(26,23,16,.60);
    --v2-accent:   #87692F;
    --v2-accent-ink:#FFFFFF;
    --v2-warm:     #A8553A;
    --v2-cool:     #3C6E9E;
    --v2-shadow:   0 1px 2px rgba(20,17,9,.06), 0 8px 24px rgba(20,17,9,.07);
  }
}

/* ------------------------------------------------------------------ base -- */
html[data-design="v2"], html[data-design="v2"] body{
  background: var(--v2-bg);
  color: var(--v2-text);
}
html[data-design="v2"] body{
  font: 400 17px/1.47 -apple-system, BlinkMacSystemFont, "SF Pro Text",
        "Segoe UI", system-ui, sans-serif;
  letter-spacing: -.011em;              /* SF optical tracking at body size */
}
html[data-design="v2"] .wrap{ padding: var(--v2-5) var(--v2-4) 64px; }

/* ------------------------------------------------------------------ type -- */
html[data-design="v2"] h1{
  font-size: 34px; line-height: 1.06; font-weight: 700;
  letter-spacing: -.028em; text-transform: none;
}
html[data-design="v2"] h1 em{
  font-size: 17px; font-weight: 400; letter-spacing: -.01em;
  color: var(--v2-second); margin-top: 3px;
}
html[data-design="v2"] h2{
  font-size: 22px; font-weight: 700; letter-spacing: -.021em; color: var(--v2-text);
}
html[data-design="v2"] .season{
  font-family: inherit; font-size: 15px; font-weight: 400; line-height: 1.35;
  letter-spacing: -.01em; text-transform: none; color: var(--v2-second);
  text-align: right;
}

/* Every mono uppercase micro-label becomes readable sentence-case text.
   This is the single biggest change on the page. */
html[data-design="v2"] .meta,
html[data-design="v2"] .field > label,
html[data-design="v2"] .calcount,
html[data-design="v2"] .compass label,
html[data-design="v2"] .heights label,
html[data-design="v2"] .scalebar,
html[data-design="v2"] .totals,
html[data-design="v2"] .jrow span,
html[data-design="v2"] .chead span,
html[data-design="v2"] .triggers span,
html[data-design="v2"] .shade label.sw,
html[data-design="v2"] footer p{
  font-family: inherit;
  text-transform: none;
  letter-spacing: -.006em;
}
html[data-design="v2"] .field > label{
  font-size: 13px; font-weight: 600; color: var(--v2-second);
  margin-bottom: var(--v2-2);
}
html[data-design="v2"] .meta{ font-size: 15px; line-height: 1.5; color: var(--v2-second); }
html[data-design="v2"] .calcount{ font-size: 15px; color: var(--v2-second); }
html[data-design="v2"] .calcount b{ color: var(--v2-text); font-weight: 600; }
html[data-design="v2"] .jrow span,
html[data-design="v2"] .chead span{ font-size: 13px; color: var(--v2-second); }
html[data-design="v2"] .cnote,
html[data-design="v2"] .calfoot,
html[data-design="v2"] .note{ font-size: 13px; line-height: 1.5; color: var(--v2-tertiary); }

/* Monospace survives only where digits should line up. */
html[data-design="v2"] .readout,
html[data-design="v2"] .wxday b,
html[data-design="v2"] .wxday u,
html[data-design="v2"] .wxday i,
html[data-design="v2"] .smaprow > span,
html[data-design="v2"] .smaphead > i,
html[data-design="v2"] .bed span{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- surfaces -- */
html[data-design="v2"] .cal,
html[data-design="v2"] .tag,
html[data-design="v2"] .shade{
  background: var(--v2-surface);
  border: 0;
  border-radius: var(--v2-r-lg);
  box-shadow: var(--v2-shadow);
  padding: var(--v2-5);
  margin-top: var(--v2-4);
}
html[data-design="v2"] .tag{ border-left: 0; }
html[data-design="v2"] .tag.empty{ color: var(--v2-second); }

/* -------------------------------------------------------------- controls -- */
/* 44px minimum everywhere, reached with padding rather than bigger text. */
html[data-design="v2"] button.act,
html[data-design="v2"] .pull,
html[data-design="v2"] .pick,
html[data-design="v2"] .pill,
html[data-design="v2"] .chips button,
html[data-design="v2"] #navbar button,
html[data-design="v2"] .calnav button,
html[data-design="v2"] .paneltoggle,
html[data-design="v2"] .uplink{
  min-height: 44px;
  font-family: inherit;
  text-transform: none;
  letter-spacing: -.008em;
  border-radius: var(--v2-r-sm);
}
html[data-design="v2"] button.act{
  background: var(--v2-accent); color: var(--v2-accent-ink);
  font-size: 17px; font-weight: 600; padding: 0 var(--v2-5);
  border: 0; transition: transform .15s cubic-bezier(.2,.8,.2,1), opacity .15s;
}
html[data-design="v2"] button.act:active{ transform: scale(.97); }
html[data-design="v2"] button.ghost{
  background: var(--v2-raised); color: var(--v2-text); border: 0;
}
html[data-design="v2"] .pull,
html[data-design="v2"] .pick,
html[data-design="v2"] .pill{
  font-size: 15px; font-weight: 500; padding: 0 var(--v2-4);
  display: inline-flex; align-items: center; gap: var(--v2-2);
  background: var(--v2-raised); color: var(--v2-text); border: 0;
}
/* Accent means chosen or recommended -- not "is a chip". */
html[data-design="v2"] .pick.good,
html[data-design="v2"] .pill.good{ background: var(--v2-accent); color: var(--v2-accent-ink); font-weight: 600; }
html[data-design="v2"] .pick.tight,
html[data-design="v2"] .pill.tight{ background: transparent; box-shadow: inset 0 0 0 1.5px var(--v2-hairline); color: var(--v2-second); }
html[data-design="v2"] .pick small{ opacity: .65; font-size: 13px; }
html[data-design="v2"] .picks,
html[data-design="v2"] .cbeds{ gap: var(--v2-2); }

html[data-design="v2"] input,
html[data-design="v2"] textarea,
html[data-design="v2"] select{
  background: var(--v2-raised); border: 0; border-radius: var(--v2-r-sm);
  color: var(--v2-text); font: 400 17px/1.4 inherit; padding: 12px var(--v2-3);
  min-height: 44px;
}
html[data-design="v2"] input[type=checkbox]{ min-height: 0; width: 22px; height: 22px; accent-color: var(--v2-accent); }
html[data-design="v2"] .row input.narrow{ flex: 0 0 104px; }

/* ------------------------------------------------------------------ nav -- */
html[data-design="v2"] #navbar{
  background: color-mix(in srgb, var(--v2-bg) 82%, transparent);
  border-bottom: 1px solid var(--v2-hairline);
  padding: var(--v2-2) var(--v2-4);
  gap: var(--v2-2);
}
html[data-design="v2"] #navbar button{
  font-size: 15px; font-weight: 500; padding: 0 var(--v2-3);
  background: transparent; border: 0; color: var(--v2-second);
}
html[data-design="v2"] #navbar button:hover{ color: var(--v2-text); background: var(--v2-raised); }
html[data-design="v2"] .paneltoggle{
  width: 44px; height: 44px; top: -6px; right: -6px;
  background: transparent; border: 0; color: var(--v2-tertiary); font-size: 20px;
}
html[data-design="v2"] .calhead.withtoggle,
html[data-design="v2"] .withtoggle{ padding-right: 44px; }

/* ---------------------------------------------------------------- panels -- */
html[data-design="v2"] .wxday{
  background: var(--v2-raised); border: 0; border-radius: var(--v2-r-sm);
  padding: var(--v2-3) var(--v2-1);
}
html[data-design="v2"] .wxday small{ font-size: 11px; color: var(--v2-tertiary); text-transform: none; letter-spacing: 0; }
html[data-design="v2"] .wxday b{ font-size: 19px; font-weight: 600; margin-top: var(--v2-1); }
html[data-design="v2"] .wxday u{ font-size: 14px; color: var(--v2-second); }
html[data-design="v2"] .wxday i{ font-size: 12px; color: var(--v2-tertiary); }
html[data-design="v2"] .wxday i.wet{ color: var(--v2-cool); }
html[data-design="v2"] .wxwater{ font-size: 17px; line-height: 1.45; }
html[data-design="v2"] .wxwater b{ color: var(--v2-accent); font-weight: 600; }

html[data-design="v2"] .warn{
  border-left: 0; border-radius: var(--v2-r-sm); background: var(--v2-raised);
  font-size: 15px; padding: var(--v2-3) var(--v2-4);
}
html[data-design="v2"] .warn.hot{ background: color-mix(in srgb, var(--v2-warm) 16%, var(--v2-surface)); }
html[data-design="v2"] .warn.cold{ background: color-mix(in srgb, var(--v2-cool) 16%, var(--v2-surface)); }
html[data-design="v2"] .warn.ok{ background: color-mix(in srgb, var(--v2-green) 18%, var(--v2-surface)); }

html[data-design="v2"] .task{ border-top: 1px solid var(--v2-hairline); padding: var(--v2-4) 0; gap: var(--v2-3); }
html[data-design="v2"] .task .ticon{ width: 32px; height: 32px; flex-basis: 32px; background: var(--v2-raised); }
html[data-design="v2"] .task b{ font-size: 17px; font-weight: 600; }
html[data-design="v2"] .task p{ font-size: 15px; color: var(--v2-second); }
html[data-design="v2"] .task.now .ticon{ background: var(--v2-accent); color: var(--v2-accent-ink); }
html[data-design="v2"] .task.now b{ color: var(--v2-text); }

html[data-design="v2"] .jrow{ border-top: 1px solid var(--v2-hairline); padding: var(--v2-3) 0; gap: var(--v2-3); }
html[data-design="v2"] .jrow b{ font-size: 17px; font-weight: 600; }
html[data-design="v2"] .crow{ border-top: 1px solid var(--v2-hairline); padding: var(--v2-3) 0; }
html[data-design="v2"] .chead b{ font-size: 17px; font-weight: 600; }

html[data-design="v2"] .smaprow > b,
html[data-design="v2"] .smaprow > i{ height: 22px; border-radius: 4px; }
html[data-design="v2"] .smaprow > span{ font-size: 12px; color: var(--v2-second); }

html[data-design="v2"] .pushrow b{ font-size: 17px; font-weight: 600; }
html[data-design="v2"] .pushrow p{ font-size: 15px; color: var(--v2-second); }
html[data-design="v2"] .triggers b{ font-size: 15px; flex-basis: 96px; }
html[data-design="v2"] .triggers span{ font-size: 15px; }

html[data-design="v2"] .crop{
  background: var(--v2-raised); border: 0; border-radius: 999px;
  font-size: 15px; padding: 9px 10px 9px 15px; min-height: 40px;
}
html[data-design="v2"] .key,
html[data-design="v2"] .smapkey{ font-family: inherit; font-size: 13px; letter-spacing: -.006em; color: var(--v2-second); }

/* The plan is the crown jewel: give it room and take the chrome off. */
html[data-design="v2"] .plan{ border-radius: var(--v2-r-lg); box-shadow: var(--v2-shadow); }
html[data-design="v2"] .scalebar{ font-size: 13px; color: var(--v2-tertiary); }

/* ----------------------------------------------------- density: show all -- */
html[data-design="v2"] .picks.clipped > .pick:nth-child(n+6){ display: none; }
html[data-design="v2"] .showall{
  min-height: 44px; width: 100%; margin-top: var(--v2-2);
  background: transparent; border: 0; color: var(--v2-accent);
  font: 600 15px/1 inherit; cursor: pointer; border-radius: var(--v2-r-sm);
}
html[data-design="v2"] .showall:hover{ background: var(--v2-raised); }

/* -------------------------------------------------------------- the switch */
.designswitch{
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent; border: 1px solid var(--line, rgba(237,230,216,.14));
  color: inherit; border-radius: 999px; padding: 8px 13px; cursor: pointer;
  font: 500 11px/1 ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase;
}
html[data-design="v2"] .designswitch{
  font: 500 14px/1 -apple-system, system-ui, sans-serif; letter-spacing: -.008em;
  text-transform: none; min-height: 44px; padding: 0 var(--v2-4);
  border: 0; background: var(--v2-raised); color: var(--v2-text);
}
.designswitch i{
  width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .45;
}
html[data-design="v2"] .designswitch i{ background: var(--v2-accent); opacity: 1; }

@media (prefers-reduced-motion: reduce){
  html[data-design="v2"] *{ transition: none !important; }
}


/* ------------------------------------------------- type scale, enforced --
   Six sizes and nothing else in the chrome:
     34 large title · 22 title · 17 body · 15 callout · 13 footnote · 11 caption

   The exceptions are deliberate and both are drawings, not interface: the bed
   labels inside the plan are sized to fit a bed drawn at true scale, and the
   sun map's month letters head a 12-column grid. Forcing either onto the text
   scale would break the thing it is labelling. */

html[data-design="v2"] .showall{ font-size: 15px; }        /* was inheriting the UA default */
html[data-design="v2"] .chips button{ font-size: 13px; padding: 0 var(--v2-3); }
html[data-design="v2"] .uplink{ font-size: 15px; padding: 0 var(--v2-4); }
html[data-design="v2"] .readout{ font-size: 13px; }
html[data-design="v2"] .readout b{ font-size: 15px; }
html[data-design="v2"] .wxday u{ font-size: 13px; }
html[data-design="v2"] .wxday b{ font-size: 17px; }
html[data-design="v2"] .wxday i{ font-size: 11px; }
html[data-design="v2"] .wxday small{ font-size: 11px; }
html[data-design="v2"] .paneltoggle{ font-size: 17px; }
html[data-design="v2"] .months small{ font-size: 11px; }
html[data-design="v2"] .smapkey,
html[data-design="v2"] .key{ font-size: 13px; }
html[data-design="v2"] .fits{ font-size: 15px; }
html[data-design="v2"] .crops:empty::before{ font-size: 15px; }
html[data-design="v2"] .tag.empty p,
html[data-design="v2"] .note{ font-size: 15px; }
html[data-design="v2"] .answer p{ font-size: 17px; }
html[data-design="v2"] .answer .q{ font-size: 13px; font-family: inherit; text-transform: none; letter-spacing: -.006em; }
html[data-design="v2"] #chatSuggest button{ font-size: 15px; }
html[data-design="v2"] .shade input[type=date]{ font-size: 17px; }
html[data-design="v2"] select{ font-size: 15px; }
html[data-design="v2"] .heights input{ font-size: 17px; width: 88px; }
html[data-design="v2"] .designswitch{ font-size: 15px; }

/* ------------------------------------------------------ radii, enforced --
   Three in the chrome -- 10 small, 18 card, 999 pill -- plus the compass, which
   is a circle because it is a compass. The plan's fixtures keep their own small
   radii: they are illustration of real objects, not interface. */
html[data-design="v2"] .bed,
html[data-design="v2"] .shots figure,
html[data-design="v2"] .smaprow > b,
html[data-design="v2"] .smaprow > i,
html[data-design="v2"] .months i,
html[data-design="v2"] .months u,
html[data-design="v2"] .task .ticon,
html[data-design="v2"] .smapkey i,
html[data-design="v2"] .key i{ border-radius: 6px; }
html[data-design="v2"] .crop,
html[data-design="v2"] .pick,
html[data-design="v2"] .pill,
html[data-design="v2"] .chips button,
html[data-design="v2"] .designswitch{ border-radius: 999px; }

/* --------------------------------------------- the last five stragglers --
   Found by measuring rather than reading: each of these was inheriting a
   browser default or a v1 size that the scope above did not reach. */
html[data-design="v2"] .totals{ font-size: 15px; }
html[data-design="v2"] .totals b{ font-size: 15px; font-weight: 600; color: var(--v2-text); }
html[data-design="v2"] .smaphead > i{ font-size: 11px; }   /* 12-column grid head; 11 is the floor */
html[data-design="v2"] .calnav button{ font-size: 17px; }  /* was the UA default 13.33 */
html[data-design="v2"] #chat code{ border-radius: 6px; font-size: 13px; }

/* A 22px checkbox is the right visual size; the LABEL is what has to be 44px
   tall, so the whole row is the target rather than the box itself. */
html[data-design="v2"] label.sw,
html[data-design="v2"] .cal label.sw{
  min-height: 44px; display: flex; align-items: center; gap: var(--v2-3);
  font-size: 15px; cursor: pointer;
}

/* --------------------------------------------------------- header layout --
   The header was a two-item flex row; adding the design switch squeezed it.
   Wrap it properly and let the switch sit on its own line on narrow screens
   rather than crushing the title. */
html[data-design="v2"] header{
  flex-wrap: wrap; align-items: center; gap: var(--v2-3);
  margin-bottom: var(--v2-5);
}
html[data-design="v2"] header h1{ flex: 1 1 auto; }
html[data-design="v2"] #designSwitch{ order: 3; margin-left: auto; }

/* min-height on an inline-block makes a tall narrow box; it needs to be a
   centred flex container to become a proper pill. */
html[data-design="v2"] .uplink{
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--v2-raised); color: var(--v2-second);
  margin-bottom: var(--v2-4);
}
html[data-design="v2"] .uplink:hover{ color: var(--v2-text); }

html[data-design="v2"] .compass{ gap: var(--v2-3); margin-bottom: var(--v2-4); }
html[data-design="v2"] .compass label{ font-size: 15px; color: var(--v2-second); }
html[data-design="v2"] .needle{ width: 34px; height: 34px; border-color: var(--v2-hairline); }

/* ------------------------------------------------------------------ motion --
   Apple's default curve is roughly cubic-bezier(.32,.72,0,1) -- fast out of the
   gate, long settle, no bounce. Bounce reads as toy; this reads as weight.

   Only three things move: things you press, things that appear, and panels
   opening. Everything else staying still is what makes those three legible.
   All of it collapses under prefers-reduced-motion at the end of this file. */
html[data-design="v2"]{ --v2-ease: cubic-bezier(.32,.72,0,1); }

html[data-design="v2"] .pick,
html[data-design="v2"] .pill,
html[data-design="v2"] .pull,
html[data-design="v2"] .chips button,
html[data-design="v2"] #navbar button,
html[data-design="v2"] .showall,
html[data-design="v2"] .uplink,
html[data-design="v2"] .designswitch,
html[data-design="v2"] .paneltoggle{
  transition: background-color .22s var(--v2-ease),
              color .22s var(--v2-ease),
              transform .18s var(--v2-ease);
}
html[data-design="v2"] .pick:active,
html[data-design="v2"] .pill:active,
html[data-design="v2"] .pull:active,
html[data-design="v2"] .chips button:active,
html[data-design="v2"] .showall:active,
html[data-design="v2"] .designswitch:active{ transform: scale(.96); }

/* The task list and search results appear as a group; a short stagger makes
   them read as arriving rather than blinking into place. */
html[data-design="v2"] .task,
html[data-design="v2"] #findOut .jrow{
  animation: v2in .3s var(--v2-ease) both;
}
html[data-design="v2"] .task:nth-child(2){ animation-delay: .03s }
html[data-design="v2"] .task:nth-child(3){ animation-delay: .06s }
html[data-design="v2"] .task:nth-child(4){ animation-delay: .09s }
html[data-design="v2"] .task:nth-child(n+5){ animation-delay: .12s }
@keyframes v2in{ from{ opacity:0; transform: translateY(6px) } to{ opacity:1; transform:none } }

html[data-design="v2"] .cal,
html[data-design="v2"] .tag{
  transition: box-shadow .25s var(--v2-ease);
}
html[data-design="v2"] .cal.collapsed,
html[data-design="v2"] .tag.collapsed{ box-shadow: 0 1px 2px rgba(0,0,0,.3); }

html[data-design="v2"] #updateBar{ animation: v2rise .4s var(--v2-ease) both; }
@keyframes v2rise{ from{ opacity:0; transform: translateY(20px) } to{ opacity:1; transform:none } }

/* ------------------------------------------------------------------ icons --
   Drawn icons inherit currentColor, so the same glyph works on a straw button
   and on a dark surface. Optical centring only -- no background of their own. */
html[data-design="v2"] .ticon svg{ display: block; }
html[data-design="v2"] .task .ticon{
  border-radius: 999px; display: grid; place-items: center;
  width: 36px; height: 36px; flex-basis: 36px; color: var(--v2-second);
}
html[data-design="v2"] .task.now .ticon{ background: var(--v2-accent); color: var(--v2-accent-ink); }
html[data-design="v2"] .task.cold .ticon{ background: color-mix(in srgb, var(--v2-cool) 22%, var(--v2-surface)); color: var(--v2-cool); }
html[data-design="v2"] .task.hot  .ticon{ background: color-mix(in srgb, var(--v2-warm) 22%, var(--v2-surface)); color: var(--v2-warm); }
html[data-design="v2"] .task.water .ticon{ color: var(--v2-cool); }
html[data-design="v2"] .task.sow  .ticon{ color: var(--v2-green); }

/* ------------------------------------------------------------- final polish */
/* Optical alignment: a large title needs slightly negative leading trim so it
   sits on the same baseline grid as everything under it. */
html[data-design="v2"] h1{ margin-top: -2px; }
html[data-design="v2"] .calhead{ align-items: flex-start; }
html[data-design="v2"] .cal > .calcount:first-of-type{ margin-top: var(--v2-1); }

/* Focus rings that match the accent rather than the browser default. */
html[data-design="v2"] :focus-visible{
  outline: 2px solid var(--v2-accent); outline-offset: 2px; border-radius: var(--v2-r-sm);
}

/* Inputs should look pressable, and show focus as a fill change like iOS. */
html[data-design="v2"] input:focus,
html[data-design="v2"] textarea:focus{
  outline: none; background: color-mix(in srgb, var(--v2-accent) 10%, var(--v2-raised));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--v2-accent) 55%, transparent);
}

@media (prefers-reduced-motion: reduce){
  html[data-design="v2"] *,
  html[data-design="v2"] *::before,
  html[data-design="v2"] *::after{
    animation: none !important; transition: none !important;
  }
}