/* MediWatch "Thread" design system: core.
 *
 * Tokens, type, the site chrome (header and footer) and shared components.
 * Loaded on every page. Everything is prefixed th- and nothing here styles
 * bare elements, so legacy page bodies keep their own look until they are
 * redesigned. Pages built fully in Thread add class="th-page" to <body>.
 * Brand record: docs/brand/BRAND.md
 */

/* A local fallback tuned to Figtree's metrics (Arial is within 0.3% of its
   average width), so the swap when Figtree arrives moves nothing. */
@font-face {
  font-family: "Figtree Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Roboto");
  font-weight: 100 549;
  size-adjust: 100.3%;
  ascent-override: 94.71%;
  descent-override: 24.92%;
  line-gap-override: 0%;
}
/* Bold text gets real Arial Bold, sized to Figtree 700 (the headline), so no
   engine has to fake a bold of its own width while Figtree loads. */
@font-face {
  font-family: "Figtree Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), local("Roboto Bold"), local("Roboto-Bold");
  font-weight: 550 900;
  size-adjust: 96.4%;
  ascent-override: 98.55%;
  descent-override: 25.93%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree-variable-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --th-font: "Figtree", "Figtree Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* surfaces */
  --th-white: #ffffff;
  --th-wash: #f2faf8;
  --th-mint: #e3f6f1;
  --th-line: #dcebe7;
  --th-line-strong: #cfe2dd;
  --th-field: #6f8f89;          /* form borders, 3.3:1 on white */

  /* ink */
  --th-ink-900: #0c2b28;        /* headings, 15.1:1 */
  --th-ink-700: #33504c;        /* body, 8.8:1 */
  --th-ink-500: #5a716d;        /* secondary, 5.2:1 */
  --th-ill-ink: #123f3a;        /* illustration outlines */

  /* brand */
  --th-teal-700: #0a7468;       /* links, primary buttons (white text 5.7:1) */
  --th-teal-800: #075a51;
  --th-teal-600: #0f8f80;
  --th-turq-500: #19c3b1;       /* the thread starts here; graphics only */
  --th-turq-300: #7fdccd;
  --th-turq-200: #bdefe4;
  --th-green-500: #27b26c;      /* the thread ends here; graphics only */
  --th-green-100: #dcf4e6;

  /* status: text on tint is AA; dots always sit next to a word */
  --th-short-ink: #b3261e;   --th-short-bg: #fff0ee;   --th-short-line: #f6cfc9;   --th-short-dot: #e5483b;
  --th-limited-ink: #8f4a00; --th-limited-bg: #fff4e0; --th-limited-line: #f3dbab; --th-limited-dot: #e8920f;
  --th-maybe-ink: #17663e;   --th-maybe-bg: #e8f7ee;   --th-maybe-line: #c3e8d1;   --th-maybe-dot: #22a562;

  --th-shadow-sm: 0 1px 2px rgba(12, 43, 40, .06), 0 2px 8px -2px rgba(12, 43, 40, .06);
  --th-shadow-md: 0 2px 6px rgba(12, 43, 40, .05), 0 14px 34px -14px rgba(12, 43, 40, .24);
  --th-shadow-lg: 0 4px 14px rgba(12, 43, 40, .06), 0 34px 70px -32px rgba(12, 43, 40, .34);

  --th-radius-sm: 10px;
  --th-radius-md: 14px;
  --th-radius-lg: 22px;
  --th-radius-xl: 32px;

  --th-ease-out: cubic-bezier(.2, .75, .2, 1);
  --th-ease-spring: cubic-bezier(.3, 1.4, .5, 1);
  --th-dur-fast: 180ms;
  --th-dur-ui: 420ms;

  --th-wrap: 1200px;
  --th-gutter: 40px;
  --th-header-h: 72px;
}
@media (max-width: 1100px) { :root { --th-gutter: 32px; } }
@media (max-width: 760px) { :root { --th-gutter: 20px; --th-header-h: 64px; } }

/* Anchors and focused fields land below the sticky header, not under it. */
html { scroll-padding-top: calc(var(--th-header-h) + 12px); }

/* ── pages built fully in Thread ─────────────────────────────── */
.th-page {
  margin: 0;
  background: var(--th-white);
  color: var(--th-ink-700);
  font: 400 17px/1.6 var(--th-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}
/* :where() keeps these at element strength, so any component class wins. */
:where(.th-page) *, :where(.th-page) *::before, :where(.th-page) *::after { box-sizing: border-box; }
:where(.th-page) :where(h1, h2, h3) { color: var(--th-ink-900); margin: 0; font-weight: 680; letter-spacing: -.022em; }
:where(.th-page) p { margin: 0; }
:where(.th-page) a { color: var(--th-teal-700); text-underline-offset: 3px; }
:where(.th-page) :where(button, input, select) { font: inherit; color: inherit; }
:where(.th-page) :where(img, svg) { display: block; }
:where(.th-page) :focus-visible { outline: 3px solid var(--th-teal-700); outline-offset: 3px; border-radius: 6px; }
.th-page [hidden] { display: none !important; }

/* ── utilities ───────────────────────────────────────────────── */
.th-wrap { box-sizing: border-box; width: 100%; max-width: calc(var(--th-wrap) + 2 * var(--th-gutter)); margin: 0 auto; padding: 0 var(--th-gutter); }
.th-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.th-skip {
  position: absolute; left: 16px; top: -60px; z-index: 2000;
  background: var(--th-ink-900); color: #fff; padding: 10px 16px; border-radius: 10px;
  font: 650 15px/1.2 var(--th-font); text-decoration: none;
}
.th-skip:focus { top: 12px; }
.th-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── buttons ─────────────────────────────────────────────────── */
.th-btn {
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 20px; border-radius: 12px; border: 0; margin: 0;
  font: 650 15.5px/1 var(--th-font); letter-spacing: -.005em; text-decoration: none; white-space: nowrap;
  cursor: pointer; position: relative;
  transition: transform var(--th-dur-fast) var(--th-ease-out), background-color var(--th-dur-fast), box-shadow var(--th-dur-fast), color var(--th-dur-fast);
}
.th-btn svg { width: 18px; height: 18px; flex: none; transition: transform .25s var(--th-ease-out); }
@media (hover: hover) { .th-btn:hover svg { transform: translateX(3px); } }
.th-btn:active { transform: scale(.975); }
.th-btn:focus-visible { outline: 3px solid var(--th-teal-700); outline-offset: 3px; }
.th-btn-primary { background: var(--th-teal-700); color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 18px -10px rgba(10,116,104,.75); }
@media (hover: hover) { .th-btn-primary:hover { background: var(--th-teal-800); transform: translateY(-1px); } }
.th-btn-primary:active { transform: translateY(0) scale(.975); }
.th-btn-ghost { background: #fff; color: var(--th-teal-700) !important; box-shadow: inset 0 0 0 1.5px var(--th-teal-700); }
@media (hover: hover) { .th-btn-ghost:hover { background: var(--th-wash); } }
.th-btn-sm { height: 40px; padding: 0 16px; font-size: 14.5px; border-radius: 11px; }
.th-btn-lg { height: 56px; padding: 0 26px; font-size: 17px; border-radius: 14px; }

/* ── status chips ────────────────────────────────────────────── */
.th-chip {
  box-sizing: border-box;
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  height: 26px; padding: 0 11px 0 9px; border-radius: 999px;
  font: 650 13px/1 var(--th-font); letter-spacing: 0; white-space: nowrap;
  border: 1px solid transparent;
}
.th-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; box-sizing: border-box; }
.th-chip-short { color: var(--th-short-ink); background: var(--th-short-bg); border-color: var(--th-short-line); }
.th-chip-short::before { background: var(--th-short-dot); }
.th-chip-limited { color: var(--th-limited-ink); background: var(--th-limited-bg); border-color: var(--th-limited-line); }
.th-chip-limited::before { border: 1.6px solid var(--th-limited-dot); background: linear-gradient(90deg, var(--th-limited-dot) 50%, transparent 50%); }
.th-chip-maybe { color: var(--th-maybe-ink); background: var(--th-maybe-bg); border-color: var(--th-maybe-line); }
.th-chip-maybe::before { border: 1.8px solid var(--th-maybe-dot); background: transparent; }

/* ── form fields ─────────────────────────────────────────────── */
.th-field label { display: block; font: 650 14.5px/1.3 var(--th-font); color: var(--th-ink-900); margin-bottom: 8px; }
.th-field input, .th-field select {
  box-sizing: border-box; width: 100%; height: 54px; padding: 0 16px; border-radius: 13px; border: 0; background: #fff; outline: 0;
  font: 520 16.5px/1.2 var(--th-font); color: var(--th-ink-900); box-shadow: inset 0 0 0 1.5px var(--th-field); transition: box-shadow .2s;
}
.th-field input::placeholder { color: var(--th-ink-500); opacity: 1; }
.th-field input:focus, .th-field select:focus { box-shadow: inset 0 0 0 1.5px var(--th-teal-700), 0 0 0 5px rgba(25,195,177,.18); }
.th-field input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--th-short-ink); }
.th-field-err { margin: 6px 0 0; font: 560 13.5px/1.4 var(--th-font); color: var(--th-short-ink); }

/* ── chrome isolation ────────────────────────────────────────────
   Legacy pages ship global rules for bare nav, footer, p, a, ul, li and
   headings (Webflow export, generator templates). Pin the chrome so it
   looks the same on every page. */
.th-header, .th-footer {
  font: 400 16px/1.5 var(--th-font); color: var(--th-ink-700);
  letter-spacing: normal; text-transform: none; text-align: left; font-style: normal;
}
.th-header nav, .th-header .th-nav {
  position: static; top: auto; z-index: auto; display: block; margin: 0; padding: 0;
  background: none; border: 0; box-shadow: none; height: auto; width: auto;
}
.th-header p, .th-footer p { padding: 0; color: inherit; font: inherit; line-height: inherit; }
.th-header ul, .th-footer ul { margin: 0; padding: 0; list-style: none; overflow: visible; background: none; border-radius: 0; font: inherit; }
.th-header li, .th-footer li { margin: 0; padding: 0; font: inherit; line-height: inherit; list-style: none; }
.th-header li::before, .th-footer li::before, .th-header li::marker, .th-footer li::marker { content: none; }
.th-header a, .th-footer a { font-family: var(--th-font); font-style: normal; text-transform: none; letter-spacing: normal; }
.th-header h2, .th-header h3, .th-footer h2, .th-footer h3 { padding: 0; font-style: normal; text-transform: none; }
.th-header svg, .th-footer svg { max-width: none; overflow: visible; }
.th-header button, .th-footer button { font-family: var(--th-font); text-transform: none; letter-spacing: normal; }

/* ── header ──────────────────────────────────────────────────── */
.th-header {
  box-sizing: border-box;
  position: sticky; top: 0; z-index: 1000; height: var(--th-header-h);
  background: rgba(255,255,255,.88);
  -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
  font-family: var(--th-font);
  transition: border-color .25s, box-shadow .25s;
}
.th-header *, .th-header *::before, .th-header *::after { box-sizing: border-box; }
.th-header.th-scrolled, .th-header.th-solid { border-bottom-color: var(--th-line); box-shadow: 0 6px 24px -20px rgba(12,43,40,.35); }
.th-header-inner { height: 100%; display: flex; align-items: center; gap: 22px; }
.th-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-right: auto; text-decoration: none !important; color: var(--th-ink-900) !important; border-radius: 10px; }
.th-brand-mark { width: 30px; height: 30px; display: block; transition: transform .5s var(--th-ease-spring); }
@media (hover: hover) { .th-brand:hover .th-brand-mark { transform: rotate(-20deg) scale(1.06); } }
.th-brand-word { font: 760 20px/1 var(--th-font); letter-spacing: -.025em; }
.th-nav-list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.th-nav-list a {
  position: relative; display: block; padding: 8px 11px; border-radius: 10px;
  color: var(--th-ink-700) !important; font: 560 15.5px/1.2 var(--th-font); text-decoration: none !important; transition: color .2s, background-color .2s;
}
.th-nav-list a::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: 3px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--th-turq-500), var(--th-green-500));
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--th-ease-out);
}
@media (hover: hover) { .th-nav-list a:hover { color: var(--th-ink-900) !important; } }
.th-nav-list a:focus-visible::after, .th-nav-list a[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) { .th-nav-list a:hover::after { transform: scaleX(1); } }
.th-nav-list a[aria-current="page"] { color: var(--th-ink-900) !important; }
.th-nav-list a:focus-visible { outline: 3px solid var(--th-teal-700); outline-offset: 2px; }
.th-nav-account a { display: inline-flex; align-items: center; gap: 8px; }
.th-avatar {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--th-teal-700); color: #fff; font: 760 11.5px/1 var(--th-font); letter-spacing: .02em;
}
.th-nav-toggle { display: none; }
.th-nav-extra, .th-nav-backdrop { display: none; }
.th-header-cta { flex: none; }

/* ── footer ──────────────────────────────────────────────────── */
.th-footer {
  box-sizing: border-box; position: relative; z-index: 2;
  padding: 56px 0 40px; border-top: 1px solid var(--th-line); background: #fff;
  color: var(--th-ink-500); font: 400 15.5px/1.6 var(--th-font); text-align: left;
}
.th-footer *, .th-footer *::before, .th-footer *::after { box-sizing: border-box; }
.th-footer p { margin: 0; }
.th-footer-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 48px; }
.th-footer-mark-wrap { position: relative; display: inline-block; }
.th-footer-mark { width: 44px; height: 44px; display: block; transition: transform .7s var(--th-ease-spring); }
.th-footer.th-arrived .th-footer-mark { transform: scale(1.08); }
.th-footer .th-footer-word { margin: 12px 0 0; font: 760 22px/1.2 var(--th-font); letter-spacing: -.025em; color: var(--th-ink-900); }
.th-footer .th-footer-tag { margin: 4px 0 0; color: var(--th-ink-500); }
.th-footer .th-footer-legal > p { margin: 0; }
.th-footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.th-footer-cols h2, .th-footer-cols h3 { margin: 0; font: 700 13.5px/1.3 var(--th-font); letter-spacing: .05em; text-transform: uppercase; color: var(--th-ink-500); }
.th-footer-cols ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; }
.th-footer-cols a { display: inline-block; padding: 5px 0; overflow-wrap: anywhere; color: var(--th-ink-700) !important; text-decoration: none !important; font-weight: 540; border-radius: 6px; }
@media (hover: hover) { .th-footer-cols a:hover { color: var(--th-teal-700) !important; text-decoration: underline !important; } }
.th-footer-cols a:focus-visible { outline: 3px solid var(--th-teal-700); outline-offset: 2px; }
.th-footer-legal { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--th-line); font-size: 14px; color: var(--th-ink-500); }
.th-footer-legal > p { max-width: 64em; }
.th-footer-legal a { color: var(--th-ink-700) !important; }
.th-footer-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 18px; }
.th-footer-meta > span { display: inline-flex; align-items: center; gap: 8px; }
.th-footer-fresh { display: inline-flex; align-items: center; gap: 8px; }
.th-footer-fresh p { margin: 0 !important; }
.th-port { position: absolute; width: 0; height: 0; pointer-events: none; }
.th-fresh-dot { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--th-green-500); flex: none; }
.th-motion-toggle { display: none; }
.th-has-motion .th-motion-toggle {
  display: inline-flex; align-items: center; gap: 10px; border: 0; background: none; padding: 4px 2px; margin: 0; cursor: pointer;
  font: 600 14px/1.2 var(--th-font); color: var(--th-ink-700); border-radius: 8px;
}
.th-motion-toggle:focus-visible { outline: 3px solid var(--th-teal-700); outline-offset: 2px; }
.th-mt-track { position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--th-teal-700); transition: background-color .25s; }
.th-mt-knob { position: absolute; top: 3px; left: 19px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .3s var(--th-ease-spring); }
.th-motion-toggle[aria-checked="false"] .th-mt-track { background: #8aa29d; }
.th-motion-toggle[aria-checked="false"] .th-mt-knob { left: 3px; }

/* ── phone ───────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .th-header-cta { display: none; }
}
@media (max-width: 860px) {
  /* A solid header: backdrop-filter is costly on phones and would trap the fixed sheet. */
  .th-header { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .th-nav-toggle {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 0; margin: 0; padding: 0; background: #fff; cursor: pointer;
    box-shadow: inset 0 0 0 1px var(--th-line-strong); color: var(--th-ink-900); touch-action: manipulation;
  }
  .th-nav-toggle svg { width: 22px; height: 22px; }
  .th-nav-toggle:focus-visible { outline: 3px solid var(--th-teal-700); outline-offset: 2px; }
  /* The menu is a bottom sheet: every link sits where a thumb reaches. */
  .th-nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 1001; background: rgba(12, 43, 40, .34);
    opacity: 0; visibility: hidden; transition: opacity .22s, visibility .22s;
  }
  /* .th-header prefix: outranks the chrome's own ul/li reset above. */
  .th-header .th-nav-list {
    position: fixed; left: 8px; right: 8px; bottom: 8px; top: auto; z-index: 1002;
    flex-direction: column; align-items: stretch; gap: 2px;
    max-height: calc(100dvh - 80px); overflow-y: auto; overscroll-behavior: contain;
    padding: 6px 10px calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff; border-radius: 22px; box-shadow: inset 0 0 0 1px var(--th-line), 0 -10px 40px -12px rgba(12, 43, 40, .35);
    opacity: 0; visibility: hidden; transform: translateY(28px);
    transition: opacity .22s, transform .32s var(--th-ease-out), visibility .22s;
  }
  .th-nav.th-open .th-nav-backdrop { opacity: 1; visibility: visible; }
  .th-nav.th-open .th-nav-list { opacity: 1; visibility: visible; transform: none; }
  .th-nav-list a { display: flex; align-items: center; min-height: 52px; padding: 12px 14px; font-size: 17px; border-radius: 12px; }
  .th-nav-list a::after { display: none; }
  @media (hover: hover) { .th-nav-list a:hover { background: var(--th-wash); } }
  .th-nav-extra { display: block; }
  .th-header .th-nav-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 4px 6px 14px; }
  .th-nav-title { font: 700 13.5px/1 var(--th-font); letter-spacing: .06em; text-transform: uppercase; color: var(--th-ink-500); }
  .th-nav-close {
    display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--th-wash);
    color: var(--th-ink-900); cursor: pointer; touch-action: manipulation;
  }
  .th-nav-close svg { width: 20px; height: 20px; }
  .th-nav-list .th-nav-cta { margin-top: 6px; width: 100%; height: 54px; font-size: 16.5px; color: #fff !important; justify-content: center; }
  .th-footer-top { grid-template-columns: 1fr; gap: 32px; }
  .th-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Touch: every footer link is a full 44px target. */
@media (max-width: 1024px), (pointer: coarse) {
  .th-footer-cols ul { gap: 0; }
  .th-footer-cols a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 4px 0; }
  .th-motion-toggle { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .th-header, .th-header *, .th-footer, .th-footer *, .th-btn, .th-chip { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}