/* Design wave polish (dw-polish, 11 Oct 2026): one control and focus language on every page.
   Loaded after coach.css and wayfinding.css (scripts/render-chrome.js), so it aligns the older
   layers without editing them. Void Deck Playground tokens only; nothing here moves layout. */

/* Fields. Time, month, URL and password fields match the tool fields: 3px ink, 12px corners, 48px. */
input[type=time],input[type=month],input[type=week],input[type=datetime-local],input[type=url],input[type=password]{box-sizing:border-box;min-height:48px;padding:10px 12px;border:3px solid var(--field-border);border-radius:var(--radius-field);background:var(--card);color:var(--ink);font:inherit;font-size:1rem;font-weight:700;font-variant-numeric:tabular-nums}
input[type=time]::-webkit-calendar-picker-indicator,input[type=date]::-webkit-calendar-picker-indicator{width:20px;height:20px;padding:4px;margin-left:6px;border-radius:8px;cursor:pointer}
input[type=time]::-webkit-calendar-picker-indicator:hover,input[type=date]::-webkit-calendar-picker-indicator:hover{background:var(--soft)}
input[type=date]{box-sizing:border-box;padding:10px 12px;font-weight:700;font-variant-numeric:tabular-nums}
/* A select never breaks a word across lines; a long option is cut off with an ellipsis instead. */
select{white-space:nowrap;text-overflow:ellipsis;overflow-wrap:normal;word-break:normal}

/* Unavailable fields (for example sign-up while new accounts are paused) use the dashed line the
   site already uses for "not available", in full contrast, instead of a faded grey box. */
:is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea):disabled{opacity:1;border-style:dashed;border-color:var(--outline);background:var(--soft);color:var(--muted);cursor:not-allowed;-webkit-text-fill-color:var(--muted)}
:is(input,textarea):disabled::placeholder{color:var(--muted)}

/* Tick boxes and radio dots in the same ink outline. :where() keeps this at zero specificity, so
   any sized control and every visually hidden radio (segmented switches, chips) keeps its own rules. */
:where(input[type=checkbox],input[type=radio]){-webkit-appearance:none;appearance:none;display:inline-grid;place-content:center;flex:0 0 auto;box-sizing:border-box;width:1.5rem;height:1.5rem;margin:0;padding:0;border:3px solid var(--field-border);border-radius:6px;background:var(--card);color:var(--card);font-size:1rem;vertical-align:middle;cursor:pointer}
:where(input[type=radio]){border-radius:50%}
:where(input[type=checkbox])::before{content:"";box-sizing:border-box;width:.4em;height:.72em;margin-top:-.14em;border:solid currentColor;border-width:0 3px 3px 0;transform:rotate(45deg) scale(0);transition:transform .12s ease-out}
:where(input[type=checkbox]):checked{border-color:var(--ink);background:var(--ink)}
:where(input[type=checkbox]):checked::before{transform:rotate(45deg) scale(1)}
:where(input[type=radio]):checked{border-color:var(--ink);background:var(--ink);box-shadow:inset 0 0 0 4px var(--card)}
:where(input[type=checkbox],input[type=radio]):hover:not(:disabled){border-color:var(--ink)}
:where(input[type=checkbox],input[type=radio]):disabled{border-style:dashed;border-color:var(--outline);background:var(--soft);cursor:not-allowed}
:where(input[type=checkbox],input[type=radio]):focus-visible{outline:3px solid var(--focus);outline-offset:3px}
@media (forced-colors:active){:where(input[type=checkbox],input[type=radio]){-webkit-appearance:auto;appearance:auto}:where(input[type=checkbox])::before{content:none}}

/* Focus. One ring: 3px of --focus (blue by day, yellow at night) standing 3px clear of the control.
   A field fills that gap with a tint of the same colour, so the ring never merges into the 3px ink
   border. On rubber bands (header, heroes, tab bar, footer) the ring stays white; light surfaces
   inside the header (menu panels, the account menu) and the rubber cards that sit on concrete use
   --focus, because a white ring there disappears into the ground. */
input:not([type=checkbox]):not([type=radio]):focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--focus);outline-offset:3px;box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 28%,transparent)}
.site-header .nav-panel :focus-visible,.site-header .member-account-menu :focus-visible,.next-card:focus-visible,.next-guide:focus-visible{outline-color:var(--focus)}
.next-card:focus-visible,.next-guide:focus-visible{outline-offset:3px}

/* Labels. Small labels above content are not shouted: no capitals or tracking, Rubik like the
   other labels. (Wording and casing change in the later sentence case pass, not here.) */
.eyebrow{text-transform:none;letter-spacing:0;font-family:var(--font-head);font-weight:800}

/* Hero intros sit on the solid stage bands, so they carry more weight than body copy (500 to 600). */
.coach-hero .hero-description,.coach-hero>p:not(.eyebrow),.goal-hero p:not(.eyebrow),body[data-tool] .intro>p:not(.tool-official-name):not(.tool-guide-top):not(.path-strip){font-weight:600}

/* Header. Sign In stays on one line, and on its own page keeps the white pill (the brand-red
   current-page border vanished on the red header). */
.site-header .member-login-link{white-space:nowrap}
.site-header .member-login-link[aria-current=page]{border-color:var(--stage-band-on)}