/* Toa Health, base layer: reset, type scale, and the primitives every
 * surface reuses (button, field, card, chip, deck).
 *
 * Same split Savage Ops uses: one stylesheet owns the shared vocabulary,
 * the per-surface sheets only position things. If a button looks
 * different on the landing page than in the app, that is a bug here,
 * not something to patch downstream.
 */

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

/* Several components below set display on themselves, which quietly
   beats the hidden attribute. Everything in this build that toggles
   visibility does it with [hidden], so [hidden] has to win. */
[hidden] { display: none !important; }

html {
  height: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  min-height: 100%;
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; }

/* ------------------------------------------------------------- type */

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  line-height: 1.18;
  letter-spacing: -0.021em;
  font-weight: 620;
  text-wrap: balance;
}

h1 { font-size: clamp(34px, 5.2vw, 56px); letter-spacing: -0.028em; }
h2 { font-size: clamp(26px, 3.4vw, 38px); }
h3 { font-size: clamp(19px, 2vw, 22px); letter-spacing: -0.014em; }
h4 { font-size: 16px; letter-spacing: -0.008em; }

p { margin: 0 0 var(--s4); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-dk); }

strong { font-weight: 620; color: var(--ink); }

.lede {
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.62;
  color: var(--ink-2);
}

/* The eyebrow is the one place uppercase letterspacing survives from
   Savage Ops. Kept small and warm-gray rather than mono and glowing. */
.eyebrow {
  display: inline-block;
  margin: 0 0 var(--s4);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.muted { color: var(--ink-3); }
.fine  { font-size: 13.5px; line-height: 1.55; color: var(--ink-3); }

/* Screen-reader-only, used for section landmarks and chart summaries. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--s4); top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: var(--r-sm);
  background: var(--ink); color: var(--ink-on-dark); text-decoration: none;
}
.skip-link:focus { top: var(--s4); }

/* --------------------------------------------------------- focus ring */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ----------------------------------------------------------- layout */

.page { width: min(100% - 2 * var(--s5), var(--page)); margin-inline: auto; }
.page-narrow { width: min(100% - 2 * var(--s5), 760px); margin-inline: auto; }

.section { padding-block: clamp(56px, 8vw, var(--s9)); }
.section-head { margin-bottom: var(--s7); }
.section-head p { margin-bottom: 0; }

/* The 12-column deck, carried straight over from Savage Ops. Children
   claim a span; the two breakpoints below do the collapsing so no
   component has to know about widths. */
.deck {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
}
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }

@media (max-width: 1020px) {
  .span-3 { grid-column: span 6; }
  .span-4, .span-5, .span-7, .span-8 { grid-column: span 12; }
  .span-6 { grid-column: span 12; }
}
@media (max-width: 640px) {
  .deck > * { grid-column: span 12 !important; }
}

/* ----------------------------------------------------------- button */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font: inherit; font-size: 15px; font-weight: 560;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 160ms var(--ease), border-color 160ms var(--ease),
              box-shadow 160ms var(--ease), transform 160ms var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--accent-dk); color: #fff; box-shadow: var(--shadow); }

.btn-secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border-2);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover { background: var(--surface-2); color: var(--ink); border-color: var(--ink-3); }

.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }

.btn-lg { padding: 16px 30px; font-size: 16.5px; }
.btn-sm { padding: 8px 14px; font-size: 13.5px; }
.btn-block { width: 100%; }

/* ------------------------------------------------------------ field */

.field { display: block; margin-bottom: var(--s4); }
.field > label {
  display: block; margin-bottom: 6px;
  font-size: 14px; font-weight: 560; color: var(--ink-2);
}

.input, .select, .textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit; font-size: 15px;
  transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}
.input::placeholder, .textarea::placeholder { color: #a89c90; }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.textarea { min-height: 92px; resize: vertical; }

/* Errors are announced in text. Red on the border is the echo, not the
   message, since a red outline alone tells a colorblind user nothing. */
.field[data-invalid="true"] .input { border-color: var(--high); }
.field-error {
  display: none;
  margin-top: 6px;
  font-size: 13.5px; color: var(--high-ink);
}
.field[data-invalid="true"] .field-error { display: block; }

.field-hint { margin-top: 6px; font-size: 13px; color: var(--ink-3); }

/* ------------------------------------------------------------ brand */

/* Shared by the site header, the auth screens and the app sidebar. It
   lived in landing.css once, which left the app's copy inheriting the
   anchor colour and rendering the wordmark in terracotta. */
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
  color: var(--ink);
}
.brand:hover { color: var(--ink); }
.brand-mark { display: block; width: 32px; height: 32px; flex: none; }
.brand-text { font-size: 18px; font-weight: 620; letter-spacing: -0.02em; color: var(--ink); }

/* ------------------------------------------------------------- card */

/* Same head / body / foot skeleton as the Savage Ops .panel. The
   brackets, the glow and the 3px radius are gone; the structure is not. */
.card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 200ms var(--ease), border-color 200ms var(--ease);
}
.card-hover:hover { box-shadow: var(--shadow); border-color: var(--border-2); }

.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--border);
}
.card-head h2, .card-head h3 { font-size: 17px; letter-spacing: -0.01em; }

.card-body { padding: var(--s5); flex: 1; }
.card-foot {
  padding: var(--s3) var(--s5);
  border-top: 1px solid var(--border);
  font-size: 13.5px; color: var(--ink-3);
}

.card-soft {
  background: var(--surface-2);
  border-color: transparent;
  box-shadow: none;
}

/* ------------------------------------------------------------- chip */

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px 4px 9px;
  border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 560; line-height: 1.5;
  white-space: nowrap;
  background: var(--surface-2); color: var(--ink-2);
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.chip .ico { font-size: 12px; line-height: 1; }

.chip-good  { background: var(--good-tint);  color: var(--good-ink); }
.chip-watch { background: var(--watch-tint); color: var(--watch-ink); }
.chip-high  { background: var(--high-tint);  color: var(--high-ink); }
.chip-accent{ background: var(--accent-tint); color: var(--accent-dk); }
.chip-sage  { background: var(--sage-tint); color: var(--sage); }

/* Sample-data marker. Straight port of the one rule Savage Ops refuses
   to bend: anything that is not real must be impossible to mistake for
   something that is. This whole shell runs on mock data, so the marker
   sits in the app chrome once rather than on every tile. */
.chip-sample {
  background: repeating-linear-gradient(
    -45deg,
    var(--watch-tint), var(--watch-tint) 5px,
    #fbf3e4 5px, #fbf3e4 10px);
  color: var(--watch-ink);
  border: 1px solid rgba(196, 136, 31, 0.3);
}

/* ------------------------------------------------------------ misc */

.stack   > * + * { margin-top: var(--s4); }
.stack-s > * + * { margin-top: var(--s2); }
.stack-l > * + * { margin-top: var(--s5); }

.row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }

.list-plain { list-style: none; margin: 0; padding: 0; }

.divider { height: 1px; background: var(--border); border: 0; margin: var(--s5) 0; }

.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: var(--s3);
  color: var(--ink-2);
}
.check-list li::before {
  content: "";
  position: absolute; left: 2px; top: 8px;
  width: 13px; height: 8px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
  border-radius: 1px;
}