/* estrogenpatchtracker.com: a pharmacy-counter notebook. Warm oat paper, deep plum ink, one berry accent, and three
   status colours (available, limited, short) that the whole site is built around. Young Serif for headings,
   Schibsted Grotesk for text (both OFL, self-hosted). Every text/background pair below is checked for contrast in
   light and dark mode by tests/design.test.ts. */

@font-face { font-family: "Young Serif"; src: url("/fonts/young-serif-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("/fonts/schibsted-grotesk-normal.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }

:root {
  --bg: #f8f3ec;          /* oat paper */
  --band: #f0e8de;
  --card: #fffcf8;
  --text: #24131f;        /* plum ink */
  --muted: #5d4b57;
  --line: #e2d6ca;
  --link: #7a1f4b;        /* berry */
  --tint-bg: #f6e7ee;
  --ink: #2a1426;         /* the dark band, the same in both modes */
  --ink-2: #3a1d35;
  --on-ink: #f7eef3;
  --on-ink-muted: #d3bfcc;
  --btn: #7a1f4b;
  --btn-text: #ffffff;
  --btn-hover: #5c1538;
  /* status: text colour on its own chip background, and a solid mark for meters and dots */
  --ok: #17603a; --ok-bg: #e2f2e7; --ok-mark: #2f8a57;
  --lim: #6f4500; --lim-bg: #fbeccb; --lim-mark: #a26c08;
  --short: #9a1c2a; --short-bg: #fbe3e3; --short-mark: #c6394a;
  --gone: #4d4650; --gone-bg: #ebe5e8; --gone-mark: #8d8490;
  --none: #5d4b57; --none-bg: #f8f3ec;
  --serif: "Young Serif", Georgia, "Times New Roman", serif;
  --sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1218;
    --band: #22171f;
    --card: #2a1d27;
    --text: #f3e9ef;
    --muted: #c4b2bd;
    --line: #42303c;
    --link: #f2a6c8;
    --tint-bg: #35202e;
    --ink: #120b10;
    --ink-2: #24161f;
    --btn: #f2a6c8;
    --btn-text: #2a0d1c;
    --btn-hover: #f8c6dc;
    --ok: #8fe0b0; --ok-bg: #173826; --ok-mark: #4fbf80;
    --lim: #f5cf7a; --lim-bg: #3b2c0f; --lim-mark: #d9a12e;
    --short: #ffaab3; --short-bg: #451820; --short-mark: #e0566a;
    --gone: #d2c8cf; --gone-bg: #352b32; --gone-mark: #9d929a;
    --none: #c4b2bd; --none-bg: #1a1218;
    color-scheme: dark;
  }
}

/* ---------- type ---------- */
body { font-family: var(--sans); font-size: 18px; line-height: 1.65; background: var(--bg); color: var(--text); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.3rem); line-height: 1.08; margin: 0.1em 0 0.35em; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; margin: 1.8em 0 0.5em; }
h3 { font-size: 1.2rem; line-height: 1.3; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 700; }
.wrap { max-width: 1160px; padding: 0 24px; }
@media (max-width: 600px) { .wrap { padding: 0 16px; } body { font-size: 17px; } }
.narrow { max-width: 760px; }
::selection { background: #f2c4d8; color: #24131f; }
.kicker { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.label { font-size: 0.88rem; line-height: 1.5; color: var(--muted); margin: 10px 0 0; }
.muted { color: var(--muted); }
.page-head .lede { font-size: 1.2rem; }

/* ---------- header and footer ---------- */
.site-header { background: var(--bg); border-bottom: 1px solid var(--line); }
.brand { gap: 10px; }
.brand svg.logo-mark { height: 38px; }
.logo-mark .lm-patch { fill: var(--link); }
.logo-mark .lm-flap { fill: #f2c4d8; }
.logo-mark .lm-tick { stroke: var(--bg); }
.wordmark { display: flex; flex-direction: column; line-height: 1; gap: 3px; }
.wm-name { font-family: var(--serif); font-weight: 400; font-size: 1.22rem; color: var(--text); }
.wm-kicker { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--link); }
.main-nav a { font-weight: 550; }
.main-nav .nav-cta { background: var(--btn); color: var(--btn-text); }
.main-nav .nav-cta:hover, .main-nav .nav-cta[aria-current="page"] { background: var(--btn-hover); color: var(--btn-text); }
.site-footer { background: var(--band); margin-top: 0; }
.footer-col h2 { font-family: var(--sans); letter-spacing: 0.08em; }

/* ---------- buttons ---------- */
.btn { background: var(--btn); color: var(--btn-text); border-radius: 999px; font-weight: 700; padding: 12px 22px; }
.btn:hover { background: var(--btn-hover); color: var(--btn-text); }
.btn-quiet { background: transparent; color: var(--link); box-shadow: inset 0 0 0 2px var(--link); }
.btn-quiet:hover { background: var(--tint-bg); color: var(--link); }

/* ---------- status chips: the site's core vocabulary ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 700; line-height: 1.2; padding: 4px 10px 4px 8px; border-radius: 999px; white-space: nowrap; }
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.chip-available { color: var(--ok); background: var(--ok-bg); } .chip-available::before { background: var(--ok-mark); }
.chip-limited { color: var(--lim); background: var(--lim-bg); } .chip-limited::before { background: var(--lim-mark); }
.chip-short { color: var(--short); background: var(--short-bg); } .chip-short::before { background: var(--short-mark); }
.chip-discontinued { color: var(--gone); background: var(--gone-bg); } .chip-discontinued::before { background: var(--gone-mark); }
.chip-unknown { color: var(--none); background: var(--none-bg); box-shadow: inset 0 0 0 1px var(--line); } .chip-unknown::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--gone-mark); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 0.9rem; color: var(--muted); }
.legend li { display: flex; align-items: center; gap: 8px; }

/* ---------- home: hero ---------- */
.hero { padding: 48px 0 56px; background: radial-gradient(120% 90% at 85% 10%, var(--tint-bg) 0%, var(--bg) 60%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.hero h1 em { font-style: normal; color: var(--link); }
.hero-sub { font-size: 1.15rem; margin: 0 0 24px; max-width: 34em; }
.hero-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
.hero-art { position: relative; margin: 0; }
.hero-art img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px; box-shadow: 0 18px 50px rgba(42, 20, 38, 0.18); }
.hero-card {
  position: absolute; left: -28px; bottom: -26px; width: min(300px, 80%); background: var(--card); color: var(--text);
  border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; box-shadow: 0 12px 30px rgba(42, 20, 38, 0.16);
}
.hero-card p { margin: 0; }
.hero-card .hc-num { font-family: var(--serif); font-size: 2.2rem; line-height: 1; color: var(--short); }
.hero-card .hc-text { font-size: 0.95rem; line-height: 1.4; margin-top: 6px; }
.hero-card .hc-date { font-size: 0.8rem; color: var(--muted); margin-top: 8px; }
@media (max-width: 860px) {
  .hero { padding: 28px 0 40px; }
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-art img { aspect-ratio: 1 / 1; max-height: 420px; }
  .hero-card { position: relative; left: auto; bottom: auto; width: auto; margin: -56px 14px 0; }
}

/* ---------- bands ---------- */
.band { padding: 64px 0; }
.band > .wrap > h2:first-child, .band .split > div > h2:first-child { margin-top: 0; }
.band-tint { background: var(--band); }
.band-ink { background: var(--ink); color: var(--on-ink); }
.band-ink h2, .band-ink h3 { color: #ffffff; }
.band-ink a { color: #f6b8d3; }
.band-ink .kicker, .band-ink .label, .band-ink .muted { color: var(--on-ink-muted); }
.section-lede { font-size: 1.1rem; max-width: 40em; margin: 0 0 24px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
@media (max-width: 860px) { .band { padding: 44px 0; } .split { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- strength cards: one per dose, with a meter of how many products are short ---------- */
.strengths { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.strength { display: block; height: 100%; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; color: var(--text); text-decoration: none; }
a.strength:hover { border-color: var(--link); }
.strength .st-dose { font-family: var(--serif); font-size: 1.6rem; line-height: 1.1; }
.strength .st-unit { font-size: 0.85rem; color: var(--muted); display: block; margin-bottom: 12px; }
.meter { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--gone-bg); margin: 0 0 10px; }
.meter span { display: block; height: 100%; }
.meter .m-available { background: var(--ok-mark); }
.meter .m-limited { background: var(--lim-mark); }
.meter .m-short { background: var(--short-mark); }
.meter .m-discontinued, .meter .m-unknown { background: var(--gone-mark); }
.strength .st-sum { font-size: 0.9rem; line-height: 1.45; margin: 0; }

/* ---------- the two official lists ---------- */
.lists { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.list-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.list-card h3 { margin: 0 0 4px; }
.list-card .lc-verdict { font-family: var(--serif); font-size: 1.5rem; line-height: 1.2; margin: 6px 0 10px; }
.list-card .lc-verdict.is-short { color: var(--short); }
.list-card .lc-verdict.is-ok { color: var(--ok); }
.list-card p { margin: 0 0 8px; font-size: 0.97rem; }
@media (max-width: 700px) { .lists { grid-template-columns: 1fr; } }

/* ---------- steps ---------- */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.steps li { counter-increment: step; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.steps li::before { content: counter(step); display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--tint-bg); color: var(--link); font-family: var(--serif); font-size: 1.1rem; margin-bottom: 10px; }
.steps h3 { margin: 0 0 6px; }
.steps p { margin: 0; font-size: 0.97rem; }
.band-ink .steps li { background: var(--ink-2); border-color: #4b2b44; }

/* ---------- status tables ---------- */
.table-scroll { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.status-table { font-size: 0.95rem; }
.status-table th, .status-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); }
.status-table thead th { background: var(--band); font-size: 0.85rem; letter-spacing: 0.02em; }
.status-table tbody th { background: transparent; font-weight: 700; }
.status-table tbody th small { display: block; font-weight: 400; color: var(--muted); font-size: 0.85rem; margin-top: 2px; }
.status-table tr:last-child > * { border-bottom: 0; }
.status-table td.cell { text-align: center; }
.status-table .na { color: var(--muted); }
.status-table td.note { font-size: 0.88rem; color: var(--muted); min-width: 220px; }
.checked-line { font-size: 0.88rem; color: var(--muted); margin: 10px 0 0; }
.product-head { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin: 18px 0; }
.facts div { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.facts dt { font-size: 0.82rem; color: var(--muted); }
.facts dd { margin: 2px 0 0; font-weight: 700; }

/* the status board is wider than the reading column: it runs on into the empty space beside it */
.table-scroll.wide { width: min(1112px, calc(100vw - 48px)); max-width: none; }
@media (max-width: 600px) { .table-scroll.wide { width: calc(100vw - 32px); } }
.facts.key dd { font-weight: 400; font-size: 0.95rem; line-height: 1.5; }

/* ---------- Canada rows ---------- */
.din-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.din-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; background: var(--ink-2); border-radius: 12px; padding: 12px 14px; }
.din-list .dl-name { font-weight: 700; color: #ffffff; }
.din-list .dl-meta { grid-column: 1; font-size: 0.86rem; color: var(--on-ink-muted); }
.din-list .chip { grid-row: 1 / span 2; grid-column: 2; }

/* ---------- timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 2px solid var(--line); }
.timeline li { position: relative; margin: 0 0 22px; }
.timeline li::before { content: ""; position: absolute; left: -29px; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 3px var(--link); }
.timeline li.is-key::before { background: var(--link); }
.timeline time { display: block; font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.timeline p { margin: 2px 0 0; }

/* ---------- sources ---------- */
.sources { margin-top: 2.4em; font-size: 0.9rem; color: var(--muted); }
.sources h2 { font-size: 1.2rem; }
.sources ol { padding-left: 1.3em; }
.sources li { margin: 4px 0; }
.sources a { color: var(--muted); }
.ask-line { font-size: 0.95rem; border-left: 3px solid var(--link); padding: 2px 0 2px 12px; margin: 14px 0; }

/* ---------- equivalence table ---------- */
.eq-table td, .eq-table th { white-space: nowrap; }

/* ---------- patch finder ---------- */
.tool { background: var(--card); border-radius: var(--radius); }
.finder-results { margin-top: 20px; }
.finder-results h3 { margin: 18px 0 8px; }
.finder-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.finder-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: start; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.finder-list .chip { margin-top: 2px; }
.finder-list .fl-name { font-weight: 700; }
.finder-list .fl-meta { display: block; font-weight: 400; font-size: 0.86rem; color: var(--muted); }
.finder-summary { font-family: var(--serif); font-size: 1.35rem; line-height: 1.3; margin: 0 0 6px; }

/* ---------- reader reports ---------- */
.report-form .fields { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.report-form fieldset { border: 0; padding: 0; margin: 16px 0 0; }
.report-form legend { font-weight: 600; font-size: 0.95rem; margin-bottom: 6px; }
.choice { display: inline-flex; align-items: center; gap: 8px; margin: 0 18px 8px 0; font-weight: 500; }
.choice input { width: auto; margin: 0; accent-color: var(--link); }
.report-form .actions { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.report-status { font-weight: 600; margin: 10px 0 0; min-height: 1.2em; }
.report-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.tally { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.tally li { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.tally .t-name { font-weight: 700; display: block; }
.tally .t-count { font-size: 0.9rem; color: var(--muted); }

/* ---------- sign-up ---------- */
.signup-block { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 28px; }
.signup-block h2 { margin-top: 0; }
.signup-block select { font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--text); margin: 4px 0 12px; max-width: 100%; }
.signup-block .field-label { display: block; font-weight: 650; }
.signup input[type="email"] { border-radius: 999px; padding-left: 18px; }

/* ---------- cards ---------- */
.card { background: var(--card); border-radius: var(--radius); }
a.card:hover { border-color: var(--link); }