/* Helpwell app — shared design kit.
   Every app page links this. Page-specific rules go in the page's own <style>.
   Keep the tokens in sync with the marketing site's palette.

   ── Sea-blue palette ──────────────────────────────────────────────────────
   Three tones carry the whole design:
     DEEP OCEAN  #0A4B5C  structure, primary buttons, poster backgrounds
     MID TEAL    #117E96  accents, links, focus rings, data
     PALE FOAM   #F2F8FA  page ground; #D3EAF0 tinted surfaces

   Every text/background pair below was checked against WCAG AA. The muted ink
   is #4A6B7B, NOT #5A7C8C — the lighter one measured 4.47:1 on white, just
   under the 4.5 minimum. Same reason the amber is #8F5210 (3.91 -> 5.70).
   Do not lighten those two without re-checking contrast. */

:root {
  --bg: #F2F8FA;
  --surface: #FFFFFF;
  --surface-elevated: #F7FBFC;
  --ink: #0B2330;
  --ink-soft: #2E5468;
  --ink-muted: #4A6B7B;
  --sage: #117E96;
  --sage-deep: #0A4B5C;
  --sage-pale: #D3EAF0;
  --sage-glow: rgba(17, 126, 150, 0.12);
  --line: #D2E4EB;
  --amber: #8F5210;
  --amber-pale: #FDF4E7;

  /* Energy, sleep and stress. Learned on the check-in page, reused on the
     dashboard, so the colour means the same thing everywhere. */
  --energy-tone: #2A722E;
  --sleep-tone:  #1F5FA8;
  --stress-tone: #C1351B;
  --energy-wash: #EAF4EA;
  --sleep-wash:  #E8F0FA;
  --stress-wash: #FBEBE7;
  /* the three tones, named, for the monthly cards and gradients */
  --ocean: #0A4B5C;
  --tide: #117E96;
  --foam: #BFE0E8;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --shadow-sm: 0 2px 8px rgba(11, 35, 48, 0.05);
  --shadow-md: 0 12px 32px -8px rgba(11, 35, 48, 0.12);

  /* ── motion and depth ────────────────────────────────────────────────────
     Three durations and two curves, for the same reason there are three tones.

     Before this there were SEVEN transition timings in the app — 0.14s, 0.15s,
     0.18s, 0.2s, 0.3s, 0.4s, 0.5s — each chosen in the moment, so nothing quite
     matched anything else and the interface felt assembled rather than designed.
     The differences were too small to name and large enough to feel.

     --dur-1  a press, a hover. Must feel instant, so it is barely a transition.
     --dur-2  the default: a panel opening, a card lifting.
     --dur-3  something arriving on its own, like a revealed list.                    */
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 420ms;
  --ease-out: cubic-bezier(0.22, 0.68, 0.32, 1);   /* starts fast, settles */
  --ease-in-out: cubic-bezier(0.45, 0.05, 0.35, 1);

  /* Depth as a scale rather than a pile of one-off values. Eleven different
     shadows were in use; these three cover every case they were reaching for.
     Shadow colour is the ink tone, never pure black — black shadows on a sea
     palette read as grey dirt. */
  --lift-1: 0 1px 2px rgba(11, 35, 48, 0.05), 0 2px 6px rgba(11, 35, 48, 0.05);
  --lift-2: 0 4px 10px rgba(11, 35, 48, 0.07), 0 12px 26px -8px rgba(11, 35, 48, 0.12);
  --lift-3: 0 10px 22px rgba(11, 35, 48, 0.10), 0 26px 50px -14px rgba(11, 35, 48, 0.22);
}

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

/* ── touch ────────────────────────────────────────────────────────────────
   All three of these matter only on a phone, and all three were missing.

   tap-highlight: the grey flash the browser paints over a tapped element. It
   arrives after the press and looks like a rendering fault beside the press
   states in the interaction layer, which are the feedback now.

   touch-action: stops a quick double-tap on a button being read as a zoom
   gesture. On a page people use one-handed, that is the difference between a
   button and a coin toss.

   text-size-adjust: iOS inflates body text in landscape unless told not to,
   which silently breaks any layout measured against a fixed line height. */
html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
button, a, .btn-primary, .btn-quiet, [role="button"], summary, input[type="range"] {
  touch-action: manipulation;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'IBM Plex Sans', -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2 { font-family: 'Newsreader', Georgia, serif; font-weight: 500; line-height: 1.2; }
a { color: var(--sage-deep); }

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── chrome ─────────────────────────────────────────────────────────── */
.crisis-bar {
  background: var(--amber-pale);
  border-bottom: 1px solid rgba(196, 130, 50, 0.2);
  font-size: 0.84rem;
  color: #5C3E18;
  padding: 10px 0;
  text-align: center;
}
.crisis-bar a { color: #5C3E18; font-weight: 600; }

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 28px; width: 100%; }

/* ══════════════════════════════════════════════════════════════════════════
   Thumb-sized controls.
   ══════════════════════════════════════════════════════════════════════════
   A deliberate pass at 390px wide on 2026-10-11, after four separate "it does
   not work on a phone" bugs turned up in one session. Layouts held up — nothing
   scrolled sideways on any page, including the ones with tables — but a lot of
   things were built to the thickness of their text rather than to the thickness
   of a thumb.

   44px is the usual floor. It is not a guideline for its own sake: below it,
   people miss, and the things people miss here are the three sliders that ARE
   the product, the Assistant toggle, and a close button. */

/* Every button in this app is a control somebody has to hit with a thumb, so the
   rule is on the element rather than on a list of classes I have to keep adding
   to. `<a>` dressed as a button still needs naming, which is the other half. */
button,
input[type="submit"],
.btn-primary,
.btn-quiet,
.btn-danger {
  min-height: 44px;
}

/* The three sliders, which ARE the product. They were 16-30px tall.
   Deliberately min-height and nothing else: the pages style these with
   `accent-color` and the native thumb, which is already a good thumb on a phone.
   Restyling the track and thumb here would strip the colour that tells energy
   from sleep from stress — a worse outcome than the small target it fixes.
   Height on the INPUT is the tap area; the track stays as drawn. */
input[type="range"] {
  min-height: 44px;
  width: 100%;
}

/* Icon-only close buttons were 17-21px, which is a coin toss with a thumb. */
[id$="-x"], [id$="-close"], .side-close, .x {
  min-width: 44px;
  min-height: 44px;
}

/* The crisis number. It is an inline link in a sentence, which is why it was
   exempt from the usual rule — but this is the one link on the site somebody may
   be trying to hit while upset, and 15px of text is not a target.

   inline-flex with a real 44px box, and a negative vertical margin so the banner
   does not grow to accommodate it: the target gets bigger, the layout does not. */
.crisis-bar a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  margin: -13px 0;
}

/* 988 appears in body copy too, not only in the banner — on the peer page it is
   the link a member reaches for mid-sentence. Same treatment as the banner one:
   a real target with negative margins so the paragraph does not grow. */
a[href="tel:988"] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 6px;
  margin: -13px 0;
}

/* The wordmark is a link home on every page. 35px tall is close enough that it
   only needed a little padding rather than a redesign. */
header.site .brand, .logo {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Tables scroll inside their own box rather than dragging the page sideways —
   the standard mobile treatment, and the reason no page h-scrolls. */
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }


header.site { padding: 22px 0; }
.brand {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
}
.brand span { color: var(--sage); }

main {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 28px 0 64px;
}

/* ── card ───────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 34px 32px;
  width: 100%;
  max-width: 440px;
}
.eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--sage);
  display: inline-block;
}
.card h1 { font-size: 1.85rem; margin: 14px 0 6px; }
.sub { color: var(--ink-soft); font-size: 0.94rem; margin-bottom: 22px; }

/* ── forms ──────────────────────────────────────────────────────────── */
.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 5px;
}
.field input {
  width: 100%;
  padding: 11px 13px;
  font-size: 1rem;
  font-family: inherit;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-elevated);
}
.field input:focus { outline: 2px solid var(--sage); border-color: transparent; }
.field .hint { font-size: 0.75rem; color: var(--ink-muted); margin-top: 4px; }

.btn-primary {
  background: var(--sage-deep);
  color: #F2F8FA;
  border: none;
  cursor: pointer;
  padding: 14px 28px;
  font-size: 0.96rem;
  font-weight: 500;
  font-family: inherit;
  border-radius: var(--radius-sm);
  /* No transition here on purpose: .btn-primary is in the transition set down in
     the interaction layer, and a second declaration would be a second truth. It
     read `background 0.15s` — one of the seven timings that layer replaced. */
}
.btn-primary:hover:not(:disabled) { background: var(--sage); transform: translateY(-1px); }
.btn-primary:disabled { opacity: 0.55; cursor: default; }
.btn-block { width: 100%; text-align: center; margin-top: 6px; }
.btn-quiet {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 11px 20px;
  font-family: inherit;
  font-size: 0.9rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

/* ── messages ───────────────────────────────────────────────────────── */
.msg {
  margin-top: 16px;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  display: none;
}
.msg.show { display: block; }
.msg.error { background: #FDF2F2; border: 1px solid #F3D2D2; color: #8C2F2F; }
.msg.ok { background: var(--sage-glow); border: 1px solid var(--sage-pale); color: var(--sage-deep); }

.foot { margin-top: 20px; font-size: 0.85rem; color: var(--ink-muted); text-align: center; }
.privacy-line { margin-top: 14px; font-size: 0.78rem; color: var(--ink-muted); text-align: center; }

/* ── signed-in / anonymous code ─────────────────────────────────────── */
/* A button styled as a link: same tap target, none of the visual weight.
   Sign out should not compete with starting a check-in. */
/* Caps Lock. Amber rather than red: it is a helpful nudge, not a failure,
   and it appears while somebody is mid-type. */
.caps-warn {
  margin-top: 6px; font-size: 0.82rem; color: var(--amber);
  display: flex; align-items: center; gap: 6px;
}
.caps-warn::before { content: "\21EA"; font-size: 0.95em; }

.linklike {
  background: none; border: none; padding: 12px 4px; margin: 0;
  font: inherit; color: var(--sage-deep); text-decoration: underline;
  cursor: pointer; min-height: 44px;
}
.linklike:hover { color: var(--sage); }

.anon-code-box {
  background: var(--sage-glow);
  border: 1px dashed var(--sage);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
  margin: 16px 0;
}
.anon-code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--sage-deep);
  word-break: break-all;
  user-select: all;
}
.meta { font-size: 0.85rem; color: var(--ink-soft); }
.meta strong { color: var(--ink); font-weight: 600; }

.hidden { display: none !important; }

/* ── mobile ─────────────────────────────────────────────────────────────
   Checked against a 320px-wide screen — the narrowest phone still in use. */
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }

  .crisis-bar { font-size: 0.76rem; line-height: 1.45; padding: 8px 14px; }

  header.site { padding: 16px 0; }
  .brand { font-size: 1.2rem; }

  main { padding: 18px 0 44px; }

  .card { padding: 22px 18px; border-radius: var(--radius-md); }
  .card h1 { font-size: 1.5rem; }
  .sub { font-size: 0.9rem; margin-bottom: 18px; }

  .btn-primary { padding: 13px 20px; }
  .btn-quiet { padding: 10px 16px; }

  /* 16px is deliberate: iOS Safari zooms the whole page when a smaller input
     receives focus, which then breaks the layout — and it does not zoom back out,
     so the page stays wrong until it is reloaded.

     This used to be `.field input, textarea`, which missed any text field not
     wrapped in a .field — the promo code box on the check-in page was exactly
     that, and so is anything added later. It is by input TYPE now, so a new field
     is covered by existing rather than by somebody remembering this comment. */
  .field input,
  textarea,
  select,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="date"],
  input[type="time"] { font-size: 16px; }

  .anon-code-box { padding: 14px 12px; }
  .anon-code { font-size: 0.82rem; letter-spacing: 0.03em; }

  .foot, .privacy-line { font-size: 0.8rem; }
}

@media (max-width: 380px) {
  .card { padding: 18px 14px; }
  .card h1 { font-size: 1.35rem; }
  .eyebrow { font-size: 0.68rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   The interaction layer.
   ══════════════════════════════════════════════════════════════════════════
   Everything here is one of two things: making the interface answer when it is
   touched, and making sure it can be used without a mouse.

   The focus ring is the load-bearing part. Before this there was exactly ONE
   :focus-visible rule in the whole app, on the dashboard tiles — so somebody
   navigating by keyboard could tab from the top of a page to the bottom with
   nothing on screen telling them where they were. That is not a style gap, it is
   a defect, and it is invisible to anyone using a mouse.

   The rule uses `outline`, not `box-shadow`, on purpose: outline follows
   border-radius in every current browser, it is drawn outside the box so it
   cannot be clipped by an overflow container, and it costs no layout.          */

:where(a, button, summary, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Inputs already have a border to sit against, so the ring hugs them. */
:where(input, select, textarea):focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 1px;
}

/* On the dark buttons the tide colour would be a ring on near-black. Use the
   pale end instead, and keep the offset so it reads as a ring and not a border. */
.btn-primary:focus-visible,
.btn-danger:focus-visible,
.header-signin:focus-visible {
  outline-color: var(--sage-pale);
}

/* Nothing that moves here is load-bearing: every transition below is decoration,
   and every one of them is off for somebody who asked for that. This is not a
   courtesy — vestibular disorders are real and a page that ignores the setting is
   a page some people cannot use. */
.btn-primary,
.btn-quiet,
.btn-danger,
.header-signin,
.linklike,
.tile,
.summary,
.row-del,
.side-toggle,
.sandbox-toggle,
.tab-toggle,
.circle-link,
.hero-card,
.disclosure > summary {
  transition: background-color var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out),
              transform var(--dur-1) var(--ease-out);
}

/* A press should be felt. One pixel and a hair of scale — enough that a thumb
   gets an answer, small enough that nothing visibly moves. */
.btn-primary:active:not(:disabled),
.btn-quiet:active:not(:disabled),
.btn-danger:active:not(:disabled),
.header-signin:active,
.row-del:active,
.linklike:active {
  transform: translateY(1px) scale(0.995);
}

button:disabled,
.btn-primary:disabled,
.btn-quiet:disabled {
  transform: none;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* The blanket rule above is deliberately blunt: it is far easier to prove that
     nothing animates than to audit every element for one that was missed. */
}