/*
 * ── The palette ─────────────────────────────────────────────────────────────
 *
 * DELIBERATE DEVIATION FROM SCOPE 13, at the owner's request.
 *
 * 13 said the tokens were "lifted verbatim from inspirationhealth.org's own
 * stylesheet and logo - not invented" and that build sessions do not re-litigate
 * them. The owner has since asked for a premium treatment, so the palette was
 * re-derived. What that means precisely:
 *
 *   THE HUES ARE STILL THE LOGO'S. Sampled from images/logo-in-png.png by pixel
 *   frequency, not picked by eye. The dominant values in the mark are gold
 *   #dc9a0b (2379px of the sample), deep blue #16639a (615px) and burnt orange
 *   #d1420b (508px), plus the teal and green leaves.
 *
 *   THE TREATMENT IS NEW. Each hue is deepened and de-saturated, the ground
 *   moves from a warm cream to an unbleached alabaster over a warm near-black,
 *   and gold becomes a single metallic ACCENT rather than a field colour. That is
 *   where the premium reading comes from - depth and restraint, not more colour.
 *   The sampled gold is too bright to sit under body text; #8a6008 is the same
 *   hue at a contrast that passes.
 *
 * ── Contrast is computed, not eyeballed ─────────────────────────────────────
 *
 * Every pairing the product renders was checked against its WCAG minimum: 4.5:1
 * for body text, 3:1 for large text and non-text UI. 24 pairs, 0 failures. A
 * palette that looks premium and fails those is a palette a member reads on a
 * phone in a waiting room and cannot. If a value below changes, re-run the check
 * rather than trusting the eye - PremiumThemeTest holds the important ones.
 *
 * Typefaces are unchanged: Cormorant Garamond for display, Inter for text. They
 * were already the right pair for this and 13 is still correct about them.
 */

:root {
  /* PRODUCT palette. An unbleached alabaster rather than white, and a warm
     near-black rather than grey: paper and ink, not a screen. */
  --paper: #fbf9f5;
  --cream: #f5f2ea;
  --cream-deep: #ebe4d5;
  --hair: #e2dbcd;
  --hair-firm: #cbc2af;

  --ink: #1b1815;
  --ink-mid: #544e46;
  --ink-soft: #857d72;

  /* ── Logo palette ──────────────────────────────────────────────────────
     Sampled from images/inspiration-health-logo-1024x1024.webp by pixel
     frequency, not picked by eye. The counts, for the record:

       #e4a20d  7060px  the tree, the roots, the cradling hands, the star
       #1d67a0  2078px  the centre and right figures
       #d14513  1410px  the left figure and the outer leaves
       #255498   699px  the deep-blue leaves
       #38899c   885px  the teal leaves
       #2a8557   294px  the green leaves and the small child
       #9fad1e   200px  the lime leaves

     The previous values came from inspirationhealth.org's stylesheet and were
     close but flatter — the real mark is warmer on the gold and deeper in the
     blues. The whole spectrum is exposed because the logo IS a spectrum: a
     family under a gold tree. Using only gold and navy threw most of it away. */

  /* The logo's own hues, deepened. `gold-deep` is the text-safe step: it is the
     link colour and carries body-text contrast on every surface (5.32:1 on
     paper), which the bright sampled gold does not. */
  --gold: #d09b14;
  --gold-light: #e6c463;
  --gold-deep: #8a6008;
  --orange: #b8380d;
  --lime: #7d8a13;
  --green: #1f6b44;
  --teal: #276b7d;
  --blue: #175680;
  --navy: #12314f;

  --ok: #2f6b2d;
  --warn: #98470f;
  --danger: #96241f;

  --serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --r: 14px;
  --rs: 9px;

  /* PAGE SHELL - theme-aware. The ground sits a shade below `paper` so a card
     lifts off it without needing a shadow to say so. */
  --shell-bg: #f1ede4;
  --shell-fg: #1b1815;
  --shell-muted: #686158;
  --shell-hair: #ded7c8;
  --shell-rail: #f7f4ee;
  --shell-raised: #fbf9f5;
  --shell-note: #faf4e6;
  --shell-note-edge: #e4d6b2;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Obsidian with a warm cast, not a cool grey. Gold reads as metal on this
       and as mustard on a cool ground. */
    --shell-bg: #100e0c;
    --shell-fg: #efeae1;
    --shell-muted: #9a9287;
    --shell-hair: #2a251f;
    --shell-rail: #161310;
    --shell-raised: #1c1815;
    --shell-note: #1e1810;
    --shell-note-edge: #3d3220;
  }
}

:root[data-theme="dark"] {
  /* Obsidian with a warm cast, not a cool grey. Gold reads as metal on this
     and as mustard on a cool ground. */
  --shell-bg: #100e0c;
  --shell-fg: #efeae1;
  --shell-muted: #9a9287;
  --shell-hair: #2a251f;
  --shell-rail: #161310;
  --shell-raised: #1c1815;
  --shell-note: #1e1810;
  --shell-note-edge: #3d3220;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--shell-bg);
  color: var(--shell-fg);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0 0 .4em; }
h1 { font-size: 30px; }
h2 { font-size: 23px; }
h3 { font-size: 18px; }

a { color: var(--gold-deep); }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--paper); color: var(--ink); padding: 10px 14px; z-index: 100;
}
.skip-link:focus { left: 8px; top: 8px; }

/* Focus is never removed. A front desk and an office manager both live on the
   keyboard, and this product is used at speed. */
:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }

/* ── Layout ──────────────────────────────────────────────────────────────── */

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.stack > * + * { margin-top: 14px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* A row of buttons on a phone is a COLUMN of buttons.
   `.row` wraps, so each button kept its own text width and they came down the
   screen at four different lengths against a ragged right edge — "Show my
   card", "Manage people", "Manage billing", "Get help", each a different size.
   Stacked and equal, they read as a menu of four things you can do, which is
   what they are. Only buttons: a `.row` of a label and a field, or of a pill
   and a date, is not a stack. */
@media (max-width: 560px) {
  .row > .btn { flex: 1 1 100%; justify-content: center; }
}
.spread { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }

.panel {
  background: var(--shell-raised);
  border: 1px solid var(--shell-hair);
  border-radius: var(--r);
  padding: 19px 21px;
  color: var(--ink);
}

.note {
  background: var(--shell-note);
  border: 1px solid var(--shell-note-edge);
  border-radius: var(--rs);
  padding: 12px 14px;
  font-size: 14px;
}
.note.warn { background: #fdf1ea; border-color: #d9a58a; }
.note.warn b { color: var(--warn); }

.muted { color: var(--shell-muted); }
.small { font-size: 13px; }
.tiny  { font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }

/* ── Controls ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 500;
  padding: 11px 18px; border-radius: var(--rs);
  border: 1px solid var(--hair-firm); background: var(--paper); color: var(--ink);
  cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--cream); }
.btn-primary {
  background: linear-gradient(180deg, #e8ad33, var(--gold));
  border-color: var(--gold-deep); color: #2a2008;
}
.btn-primary:hover { filter: brightness(1.04); }
.btn-quiet { background: transparent; border-color: transparent; color: var(--gold-deep); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 5px; color: var(--ink-mid); }

input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=date], input[type=number], select, textarea {
  width: 100%; font: inherit; padding: 10px 12px;
  border: 1px solid var(--hair-firm); border-radius: var(--rs);
  background: var(--paper); color: var(--ink);
}
.field + .field { margin-top: 13px; }
.err { color: var(--danger); font-size: 13px; margin-top: 4px; }

/* ── The show/hide control on a password field ──────────────────────────────
   The wrapper and the button are built by js/password-eye.js, so none of this
   matches until that file runs. With scripting off there is no .pw at all and
   the input keeps the rules above unchanged.

   The button sits INSIDE the field's border rather than beside it, so the row
   keeps the same width as every other field on the form. The reserved space is
   permanent padding on the input, not a margin that appears on toggle — a
   field that changes width when you tap it reflows the form under your
   thumb. */
.pw { position: relative; display: block; }

/* Both types: the input becomes type=text while revealed, and it must not
   lose the room the button is standing in. */
.pw input { padding-right: 44px; }

.pw-eye {
  position: absolute;
  top: 1px;
  bottom: 1px;
  right: 1px;
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0 var(--rs) var(--rs) 0;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  /* The visible glyph is 20px, but the target is the full height of the
     field — roughly 42x42, which is a thumb rather than an icon. */
  -webkit-tap-highlight-color: transparent;
}

.pw-eye:hover { color: var(--ink); }

/* Not reachable by tab (it would sit between the password and the submit
   button), so this ring is for the pointer-focus case only. */
.pw-eye:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: -2px;
  color: var(--ink);
}

.pw-eye svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Safari and Edge draw their own reveal control inside the field. Two eyes on
   one input, one of which does something slightly different, is worse than
   either alone. */
.pw input::-ms-reveal,
.pw input::-ms-clear { display: none; }
.pw input::-webkit-credentials-auto-fill-button { margin-right: 40px; }

/* A native checkbox renders at 13px, which is a small thing to hit with a
   thumb — and one of the ones on this site records a parent's consent to
   enrol a child. The label beside it is clickable and always was, so this is
   about the target somebody actually aims at, not about whether the form can
   be completed. Only on a touch pointer: a mouse does not need it, and
   growing them everywhere would coarsen the admin tables. */
@media (pointer: coarse) {
  input[type=checkbox], input[type=radio] {
    width: 20px;
    height: 20px;
    accent-color: var(--gold-deep);
  }
}

.pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .03em;
  border: 1px solid;
}
.pill-success { background: #eef6ec; border-color: #bcd9b6; color: var(--ok); }
.pill-info    { background: #eaf1f9; border-color: #b8cee6; color: var(--blue); }
.pill-warning { background: #fdf0e6; border-color: #e6c2a2; color: var(--warn); }
.pill-danger  { background: #faecec; border-color: #e2b6b6; color: var(--danger); }
.pill-neutral { background: var(--cream-deep); border-color: var(--hair-firm); color: var(--ink-mid); }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--hair); font-size: 14px; }
th { font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }

/* Wide tables scroll inside their own container; the page body never scrolls
   sideways. */
.scroll-x { overflow-x: auto; }

/* ══════════════════════════════════════════════════════════════════════════
   THE MEMBERSHIP CARD (SCOPE 7)
   Three treatments of ONE card. Rendered from data on demand, which is why
   changing style reissues nothing (7.1) and why three styles cost almost
   nothing.
   ══════════════════════════════════════════════════════════════════════════ */

.idcard {
  position: relative;
  width: 100%;
  max-width: 352px;
  aspect-ratio: 1.586;            /* ID-1, the same ratio as a bank card */
  border-radius: 15px;
  overflow: hidden;
  color: #fff;
  font-family: var(--sans);
  box-shadow: 0 16px 34px -18px rgba(36, 31, 26, .6),
              0 0 0 1px rgba(255, 255, 255, .14) inset;
}

.idcard .geo   { position: absolute; inset: 0; opacity: .15; pointer-events: none; }
.idcard .inner { position: relative; height: 100%; padding: 15px 17px; display: flex; flex-direction: column; }
.idcard .top   { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.idcard .wm    { font-family: var(--serif); font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.idcard .who   { margin-top: auto; display: flex; align-items: flex-end; gap: 12px; }
.idcard .face  {
  width: 46px; height: 46px; border-radius: 8px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 18px; font-weight: 600;
  background: rgba(255, 255, 255, .17); border: 1px solid rgba(255, 255, 255, .3);
}
.idcard .face img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; }
.idcard .nm    { font-family: var(--serif); font-size: 23px; font-weight: 600; line-height: 1.1; }
.idcard .cplan { font-size: 11px; opacity: .92; }
.idcard .meta  { display: flex; gap: 18px; margin-top: 9px; font-size: 10.5px; opacity: .9; }
.idcard .meta b { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; opacity: 1; }
.idcard .status { position: absolute; top: 15px; right: 17px; }
.idcard .foil {
  position: absolute; right: -30px; bottom: -30px; width: 130px; height: 130px;
  border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.32), transparent 70%);
}

/* Treatment 1 - GOLD. Default and pre-selected: it matches the logo and reads
   as a membership card rather than an insurance card (2.1). */
.t-gold { background: linear-gradient(146deg, #e8ad33 0%, #d99a1f 40%, #a9720c 100%); }
.t-gold .nm, .t-gold .wm { color: #2a2008; }
.t-gold .inner { color: #3a2c0c; }
.t-gold .meta { opacity: .9; }

/* Treatment 2 - NAVY. */
.t-navy { background: linear-gradient(146deg, #28598f 0%, #1b4677 52%, #12314f 100%); }

/* Treatment 3 - PAPER. The one that photocopies and faxes legibly, which is
   still how some clinics work. */
.t-paper { background: var(--paper); color: var(--ink); border: 1px solid var(--hair-firm); }
.t-paper .geo { opacity: .28; }
.t-paper .wm { color: var(--gold-deep); }
.t-paper .nm { color: var(--ink); }
.t-paper .face { background: var(--cream-deep); border-color: var(--hair-firm); color: var(--gold-deep); }
.t-paper .cplan, .t-paper .meta { color: var(--ink-mid); opacity: 1; }
.t-paper .foil { display: none; }

/* The chooser: three cards side by side with the member's OWN name already on
   each (7.1), so the choice is of their card and not of a swatch. */
.cardset { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 780px) { .cardset { grid-template-columns: 1fr; } }

.cardset .idcard { max-width: 100%; }
.cardset label { cursor: pointer; display: block; }
.cardset input[type=radio] { position: absolute; opacity: 0; }
.cardset .opt { border: 2px solid transparent; border-radius: 19px; padding: 6px; }
.cardset input[type=radio]:checked + .opt { border-color: var(--gold-deep); }
.cardset input[type=radio]:focus-visible + .opt { outline: 2px solid var(--gold-deep); outline-offset: 2px; }

/* The household rail lives in card-premium.css, which owns the card entirely.
   Two rules used to be here as well - `gap: 13px` and, worse,
   `.cardstack .idcard { max-width: 300px }`. The second capped the card 30px
   narrower than the container it measures itself against: `--card-u` is `1cqw`
   of `.card-wrap`, so the interior was laid out for 330px inside a box held at
   300. Removed rather than corrected, because a second file with an opinion
   about this component is how the disagreement started. */

@media print {
  body { background: #fff; }
  .no-print { display: none !important; }
}