/* sunscreenfilters.com: a lab label on a beach towel. Warm sand paper, deep sea-green ink, one teal accent, a sun-yellow
   mark, and three flag colours (within, depends on use, above) that carry the table. Instrument Serif for headings, Plus
   Jakarta Sans for text, DM Mono for every percentage (all 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: "Instrument Serif"; src: url("/fonts/instrument-serif-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("/fonts/plus-jakarta-sans-normal.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("/fonts/dm-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("/fonts/dm-mono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --bg: #fbf6ec;          /* sand */
  --band: #f3ead9;
  --card: #fffdf8;
  --text: #0f2a30;        /* sea ink */
  --muted: #4b5f63;
  --line: #e2d5bf;
  --link: #0b5c63;        /* teal */
  --tint-bg: #e3f1ef;
  --ink: #0f2f36;         /* the dark band */
  --ink-2: #173d45;
  --on-ink: #f6f1e6;
  --on-ink-muted: #c3d4d1;
  --btn: #0b5c63;
  --btn-text: #ffffff;
  --btn-hover: #08464c;
  --sun: #f2b33d;
  /* flags: text on its own chip background, and a solid mark for bars and dots */
  --ok: #1b6438; --ok-bg: #e0f1e3; --ok-mark: #3a9a5f;
  --dep: #714400; --dep-bg: #fbeac4; --dep-mark: #ad7410;
  --hi: #9c2518; --hi-bg: #fbe1da; --hi-mark: #d9533f;
  --none: #4b5f63; --none-bg: #efe7d8;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "DM Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;
  --radius: 12px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c1d21;
    --band: #11272c;
    --card: #152f34;
    --text: #eef3ef;
    --muted: #a8bdbb;
    --line: #2a464b;
    --link: #82d5d0;
    --tint-bg: #15373a;
    --ink: #071518;
    --ink-2: #0f262a;
    --btn: #82d5d0;
    --btn-text: #062226;
    --btn-hover: #a8e5e1;
    --ok: #96e2b0; --ok-bg: #163824; --ok-mark: #4fbf7d;
    --dep: #f5cf7a; --dep-bg: #3a2b0e; --dep-mark: #d9a12e;
    --hi: #ffb4a6; --hi-bg: #461f19; --hi-mark: #e8705d;
    --none: #a8bdbb; --none-bg: #11272c;
    color-scheme: dark;
  }
}

/* ---------- type ---------- */
body { font-family: var(--sans); font-size: 17.5px; line-height: 1.65; background: var(--bg); color: var(--text); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.005em; }
h1 { font-size: clamp(2.3rem, 5.4vw, 3.7rem); line-height: 1.04; margin: 0.1em 0 0.35em; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.15rem); line-height: 1.15; margin: 1.7em 0 0.5em; }
h3 { font-size: 1.3rem; line-height: 1.25; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 700; }
.num, .actives .num { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.wrap { max-width: 1180px; padding: 0 24px; }
@media (max-width: 600px) { .wrap { padding: 0 16px; } body { font-size: 16.5px; } }
.narrow { max-width: 780px; }
::selection { background: #f2b33d; color: #0f2a30; }
.kicker { font-family: var(--mono); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.label { font-size: 0.88rem; line-height: 1.5; color: var(--muted); margin: 10px 0 0; }
.muted { color: var(--muted); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.page-head .lede { font-size: 1.15rem; }

/* ---------- header and footer ---------- */
.site-header { background: var(--bg); border-bottom: 1px solid var(--line); }
.brand { gap: 10px; }
.brand svg.logo-mark { height: 36px; width: 36px; }
.logo-mark .lm-sun { fill: var(--sun); }
.logo-mark .lm-lines { stroke: var(--bg); }
.wordmark { display: flex; flex-direction: column; line-height: 1; gap: 3px; }
.wm-name { font-family: var(--serif); font-size: 1.35rem; color: var(--text); }
.wm-kicker { font-family: var(--mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--link); }
.main-nav a { font-weight: 600; }
.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(--mono); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- buttons ---------- */
.btn { background: var(--btn); color: var(--btn-text); border-radius: 10px; font-weight: 700; padding: 12px 20px; }
.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); }

/* ---------- the keep-using line, on every page ---------- */
.keep-line { display: flex; gap: 10px; align-items: baseline; font-size: 0.97rem; line-height: 1.5; margin: 0 0 1.2em; }
.keep-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 3px var(--tint-bg); transform: translateY(1px); }
.ask-line { font-size: 0.95rem; border-left: 3px solid var(--link); padding: 2px 0 2px 12px; margin: 1.6em 0; }

/* ---------- chips, flags and tags ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; 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-within { color: var(--ok); background: var(--ok-bg); } .chip-within::before { background: var(--ok-mark); }
.chip-conditional { color: var(--dep); background: var(--dep-bg); } .chip-conditional::before { background: var(--dep-mark); }
.chip-above { color: var(--hi); background: var(--hi-bg); } .chip-above::before { background: var(--hi-mark); }
.chip-unknown { color: var(--none); background: var(--none-bg); } .chip-unknown::before { background: var(--muted); }
.flag { display: inline-block; font-size: 0.86rem; line-height: 1.35; padding: 3px 9px; border-radius: 8px; margin: 2px 6px 2px 0; }
.flag-within { color: var(--ok); background: var(--ok-bg); }
.flag-conditional { color: var(--dep); background: var(--dep-bg); }
.flag-above { color: var(--hi); background: var(--hi-bg); }
.flag-unknown { color: var(--none); background: var(--none-bg); }
.flag .flag-name { font-weight: 700; }
.tag { display: inline-block; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--link); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; margin-left: 4px; vertical-align: 1px; white-space: nowrap; }
.tag-review { color: var(--hi); border-color: var(--hi-mark); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 0.88rem; color: var(--muted); }
.legend li { display: flex; align-items: center; gap: 8px; }
.none { color: var(--muted); font-size: 0.88rem; }

/* ---------- home: hero ---------- */
.hero { padding: 52px 0 60px; background:
  radial-gradient(60% 80% at 92% 8%, rgba(242, 179, 61, 0.28) 0%, transparent 60%),
  repeating-linear-gradient(90deg, transparent 0 46px, rgba(11, 92, 99, 0.045) 46px 92px), var(--bg); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); gap: 52px; align-items: center; }
.hero h1 em { font-style: italic; color: var(--link); }
.hero-sub { font-size: 1.12rem; margin: 0 0 20px; max-width: 36em; }
.hero-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }
/* the stat card is drawn as the back of a sunscreen tube: dashed border, mono figures */
.hero-card { background: var(--card); border: 2px dashed var(--line); border-radius: 18px; padding: 24px 24px 20px; box-shadow: 0 18px 40px rgba(15, 42, 48, 0.12); position: relative; }
.hero-card::before { content: "ACTIVE INGREDIENTS"; position: absolute; top: -11px; left: 20px; background: var(--card); padding: 0 8px; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--muted); }
.hero-card p { margin: 0; }
.hc-big { font-size: 1.15rem; color: var(--muted); }
.hc-big .num { font-size: 3.4rem; line-height: 1; color: var(--hi); margin-right: 6px; }
.hc-text { font-size: 1rem; line-height: 1.4; margin-top: 4px !important; font-weight: 600; }
.hc-list { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; font-size: 0.93rem; line-height: 1.4; }
.hc-list .num { font-size: 1.05rem; color: var(--link); }
.hc-date { font-size: 0.8rem; color: var(--muted); margin-top: 14px !important; }
@media (max-width: 900px) {
  .hero { padding: 30px 0 40px; }
  .hero-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* ---------- bands ---------- */
.band { padding: 64px 0; }
.band > .wrap > h2:first-child, .band .split > div > h2:first-child, .band .signup-block h2 { margin-top: 0; }
.band-tint { background: var(--band); }
.section-lede { font-size: 1.07rem; max-width: 44em; margin: 0 0 22px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 52px; align-items: start; }
@media (max-width: 860px) { .band { padding: 44px 0; } .split { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- the table ---------- */
.table-tools { display: grid; gap: 12px; margin: 0 0 16px; }
.table-tools .search input { width: 100%; font: inherit; font-size: 1.05rem; padding: 13px 16px; border: 2px solid var(--line); border-radius: 12px; background: var(--card); color: var(--text); }
.table-tools .search input:focus { outline: none; border-color: var(--link); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; border: 0; margin: 0; padding: 0; }
.chip-toggle { position: relative; cursor: pointer; }
.chip-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-toggle span { display: inline-block; font-size: 0.9rem; font-weight: 600; padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); color: var(--text); }
.chip-toggle input:checked + span { background: var(--link); border-color: var(--link); color: var(--btn-text); }
.chip-toggle input:focus-visible + span { outline: 3px solid var(--sun); outline-offset: 2px; }
.tools-count { font-size: 0.88rem; color: var(--muted); margin: 0; }
.table-scroll { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.ss-table, .options, .actives-table, .filters-table, .brands-table { width: 100%; font-size: 0.93rem; border-collapse: collapse; }
.ss-table th, .ss-table td, .options th, .options td, .actives-table th, .actives-table td, .filters-table th, .filters-table td, .brands-table th, .brands-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.ss-table thead th, .options thead th, .actives-table thead th, .filters-table thead th, .brands-table thead th { background: var(--band); font-family: var(--mono); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.ss-table tbody th { font-weight: 700; min-width: 220px; }
.ss-table tbody th small { display: block; font-weight: 400; color: var(--muted); font-size: 0.84rem; margin-top: 3px; }
.ss-table tr:last-child > *, .options tr:last-child > *, .actives-table tr:last-child > * { border-bottom: 0; }
.t-actives { min-width: 240px; }
.t-flag { white-space: nowrap; }
.ss-table .flag { margin: 0; }
th.num, td.num { text-align: right; white-space: nowrap; }
.options tbody th small { display: block; font-weight: 400; font-size: 0.8rem; color: var(--muted); }
.actives-table tr.is-reviewed th { color: var(--hi); }
.actives .active { white-space: nowrap; }
.actives .active.is-reviewed { color: var(--hi); font-weight: 600; }
.more-row { text-align: center; margin: 16px 0 0; }
/* phones: each row becomes a card */
@media (max-width: 760px) {
  .ss-table thead { display: none; }
  .ss-table, .ss-table tbody, .ss-table tr, .ss-table th, .ss-table td { display: block; }
  .ss-table tr { padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .ss-table th, .ss-table td { padding: 0; border: 0; min-width: 0; }
  .ss-table td { margin-top: 6px; }
  .ss-table td.t-flag:has(.none) { display: none; }
  .t-flag { white-space: normal; }
}

/* ---------- product lists ---------- */
.plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.plist li { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; display: grid; gap: 3px; }
.plist .pl-name { font-weight: 700; }
.plist .pl-meta { font-size: 0.86rem; color: var(--muted); }
.plist .actives { font-size: 0.92rem; }
.brand-head { margin: 1.4em 0 0.5em; }

/* ---------- cards ---------- */
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.card { display: grid; gap: 4px; height: 100%; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 16px; color: var(--text); text-decoration: none; }
a.card:hover { border-color: var(--link); }
.card .c-num { font-size: 2rem; line-height: 1; color: var(--link); }
.card .c-title { font-family: var(--serif); font-size: 1.35rem; line-height: 1.2; }
.card .c-text { font-size: 0.92rem; color: var(--muted); }

/* ---------- option bars ---------- */
.obars { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.obars li { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 4px 14px; align-items: center; }
.ob-label { font-weight: 700; font-size: 0.92rem; }
.ob-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--none-bg); }
.ob-bar span { display: block; height: 100%; }
.ob-above { background: var(--hi-mark); } .ob-conditional { background: var(--dep-mark); } .ob-within { background: var(--ok-mark); } .ob-unknown { background: var(--muted); }
.ob-text { grid-column: 2; font-size: 0.85rem; color: var(--muted); }
@media (max-width: 600px) { .obars li { grid-template-columns: 1fr; } .ob-text { grid-column: 1; } }

/* ---------- 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 20px; }
.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 li.is-future::before { background: var(--sun); box-shadow: inset 0 0 0 3px var(--sun); }
.timeline time { display: block; font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }
.timeline p { margin: 2px 0 0; }
.wording { margin: 12px 0; font-size: 0.93rem; }
.wording summary { cursor: pointer; font-weight: 600; color: var(--link); }

/* ---------- sign-up ---------- */
.signup-block { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 26px; margin: 2em 0; }
.band .signup-block { margin: 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; }

/* ---------- changes ---------- */
.changes { list-style: none; padding: 0; display: grid; gap: 10px; }
.changes time { font-family: var(--mono); font-size: 0.85rem; color: var(--muted); }

/* ---------- the homosalate chart ---------- */
.chart { margin: 0; }
.chart svg { display: block; width: 100%; height: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.chart .bar-low { fill: var(--ok-mark); }
.chart .bar-above { fill: var(--hi-mark); }
.chart .bar-n, .chart .tick, .chart .limit-label { fill: var(--muted); font-family: var(--mono); font-size: 12px; }
.chart .bar-n, .chart .tick { text-anchor: middle; }
.chart .axis { stroke: var(--line); stroke-width: 1.5; }
.chart .limit { stroke: var(--text); stroke-width: 1.5; stroke-dasharray: 4 4; }
.chart figcaption { font-size: 0.86rem; color: var(--muted); margin-top: 8px; }
.chart-split { align-items: center; }
.page-body .chart { margin: 1.5em 0; }
@media (max-width: 900px) { .hero { background: radial-gradient(90% 60% at 100% 0%, rgba(242, 179, 61, 0.24) 0%, transparent 60%), var(--bg); } }