/* reset.css - Modern CSS reset for Alongside
   06 Oct 2026 v1
   v1 - D-12 PROGRESS-FIT. The root is the browser's own size (100%). It
   was calc(16px * var(--user-text-scale)), and every text token in
   variables.css multiplies by the same setting, so the setting was applied
   twice: 1.45 drew text at 2.1x, 1.6 at 2.56x, and screens ran off the
   side of the phone. The tokens alone carry it now (verify-disp1 TEST 3,
   verify-text-fit 5). Spacing in rem no longer grows with the text, which
   leaves the words the room. body: overflow-wrap break-word, so a web or
   email address too long for a line breaks rather than running off the
   phone (it changes nothing that fits). First dated header. */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
  overflow-x: hidden;
  overflow-wrap: break-word;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

/* Remove iOS input styling.
   
   🔴 GATE-BOX, 16 Sep 2026. THIS RULE MADE EVERY CHECKBOX IN THE APP
   INVISIBLE, AND HAD DONE SINCE IT WAS WRITTEN.

   `appearance: none` on a checkbox does not restyle the box, it removes
   it. There was nothing to tick, nothing to show a tick, and any
   accent-color had no control left to colour. Found on device by Graeme
   on the safety gate -- "it was really hard to say I agree, not sure
   what I did correctly other than keep tapping" -- but the gate was the
   NEWEST of four:

     - onboarding/thread.js  "I have read and agree to the Privacy
                              Policy and Terms of Service"  <- consent
     - session-builder-ui.js  equipment selection
     - conditions-update.js   recommendation checkboxes
     - safety-gate.js         the acknowledgement

   The consent one matters beyond usability: every account created so far
   agreed to the terms by tapping a box they could not see. Logged for
   the Foot Anstey bundle.

   The fix is scoped to the controls that need stripping rather than
   applied to `input` wholesale. Checkboxes and radios keep their native
   appearance, because for those the native appearance IS the control. */
input:not([type="checkbox"]):not([type="radio"]), textarea {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}

/* Remove spinner from number inputs */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

/* Make sure placeholder text is visible */
::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

/* Selection color */
::selection {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

/* Focus visible only for keyboard navigation */
:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.hidden {
  display: none !important;
}

/* .sr-only is an ALIAS, added 12 Aug 2026 (DISP-1, finding A11Y-3).
   Seven elements across index.html and five view files already carried
   class="sr-only" and it was never defined anywhere in this codebase.
   The two in index.html are empty live regions, so no visible effect.
   The other five hold text that was written to be heard and not seen,
   and has therefore been visible on screen all along:
     js/views/noticing.js:177          <h1>Noticing</h1>
     js/views/reflect.js:334           <h1>A thought before you go</h1>
     js/views/prescribed.js:298        "N sessions completed this week"
     js/views/onboarding/plan-select.js:122  "Choose your training plan"
     js/views/onboarding/frequency.js:77     "Select number of training days per week"

   Aliased rather than renamed in five files: one rule, no touch risk,
   and it also catches any future use of the more common name. If any of
   those five is actually wanted VISIBLE, the fix is to give that one a
   real heading class -- not to remove this rule.

   NOTE: this makes those five elements disappear from screen. That is
   what the markup always asked for, but it is a visible change and is
   flagged in the master schedule for eyeballing. */
.sr-only,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.no-scroll {
  overflow: hidden;
}

/* Safe area padding for notched phones */
@supports (padding-top: env(safe-area-inset-top)) {
  .safe-area-top {
    padding-top: env(safe-area-inset-top);
  }
  
  .safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }
}