/* ============================================================
   Hairmony — INGREDIENT GLOSSARY styles
   Layered ON TOP of article.css. Every glossary page links both:
     ../assets/css/article.css   (tokens, nav, footer, body type, FAQ, share…)
     ../assets/css/ingredient.css (this file — the glossary-only components)
   Nothing here re-declares a token or a component article.css owns.

   The glossary answers one query shape: "is <ingredient> bad for my hair?"
   So the page is a VERDICT first and an essay second. Every component below
   exists to get a reader from the headline to a defensible answer without
   scrolling, then to let them keep reading if they want the reasoning.
   ============================================================ */

/* ── Verdict palette ────────────────────────────────────────
   Four tiers, set on a wrapper as data-verdict and consumed through three
   local vars, so a card never hard-codes a colour: change the tier on the
   element and the rail, meter, chip and icon all follow.
   Teal + purple + pink already exist in the brand; amber is the one addition,
   picked to sit between them without reading as an error state.
   Ink values are the AA-contrast variants — they carry small bold text.  */
:root {
  --v-ink:#52698F; --v-bg:rgba(45,66,100,0.07); --v-line:rgba(45,66,100,0.18); --v-fill:var(--med);
  --amber:#E09E3E; --rose:#D97D91;
}
[data-verdict="low"]     { --v-ink:#1F7A6A; --v-bg:rgba(107,195,179,0.16); --v-line:rgba(107,195,179,0.55); --v-fill:var(--accent); }
[data-verdict="mixed"]   { --v-ink:#6A4480; --v-bg:rgba(123,81,145,0.11);  --v-line:rgba(123,81,145,0.42); --v-fill:var(--primary); }
[data-verdict="caution"] { --v-ink:#96601A; --v-bg:rgba(224,158,62,0.16);  --v-line:rgba(224,158,62,0.55); --v-fill:var(--amber); }
[data-verdict="high"]    { --v-ink:#A8455A; --v-bg:rgba(217,125,145,0.16); --v-line:rgba(217,125,145,0.60); --v-fill:var(--rose); }

/* ── Entry masthead ─────────────────────────────────────────
   No hero photograph. A glossary that scales to hundreds of entries cannot
   depend on sourcing an image per ingredient, and a stock photo of shampoo
   tells a reader nothing. The INCI name does — so the type IS the hero. */
.inci { display:block; font-family:var(--font-body); font-weight:700; font-size:.82rem; letter-spacing:.09em; text-transform:uppercase; color:var(--soft); margin:0 0 10px; }
.inci .aka { text-transform:none; letter-spacing:0; font-weight:600; }

/* Function chip row under the standfirst (what family the ingredient is in) */
.fn-chips { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px; }
.fn-chip { display:inline-flex; align-items:center; gap:7px; background:var(--white); border:1px solid var(--divider); color:var(--med-text); font-size:.8rem; font-weight:700; padding:6px 14px; border-radius:50px; }
.fn-chip .dot { width:6px; height:6px; border-radius:50%; background:var(--accent); flex-shrink:0; }

/* ── The verdict card ───────────────────────────────────────
   The single most important block on the page: it is the answer, above the
   fold, in one sentence. A hexagon lattice sits behind it at 4% — enough to
   read as "lab note" rather than "blog post", not enough to fight the text. */
.verdict {
  position:relative; overflow:hidden;
  background:var(--white);
  border:1px solid var(--divider); border-left:6px solid var(--v-fill);
  border-radius:var(--radius-md);
  padding:26px 28px 24px;
  margin:0 0 32px;
  box-shadow:var(--shadow-card);
}
.verdict::after {
  content:""; position:absolute; right:-30px; top:-30px; width:190px; height:190px; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='48' viewBox='0 0 56 48'%3E%3Cg fill='none' stroke='%232D4264' stroke-width='2'%3E%3Cpath d='M14 4l10 6v12l-10 6-10-6V10z'/%3E%3Cpath d='M42 4l10 6v12l-10 6-10-6V10z'/%3E%3Cpath d='M28 28l10 6v12l-10 6-10-6V34z'/%3E%3C/g%3E%3C/svg%3E");
}
.verdict-top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.verdict-eyebrow { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-size:.7rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--v-ink); }
.verdict-eyebrow svg { width:15px; height:15px; flex-shrink:0; }

/* Concern meter: five segments, filled to --level. A number would invite
   false precision ("3.5/5 harmful"); five blocks read as a band, which is
   what the evidence actually supports. Announced to AT via the label. */
.meter { display:flex; align-items:center; gap:9px; }
.meter-label { font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--soft); }
.meter-bars { display:flex; gap:3px; }
.meter-bars i { display:block; width:16px; height:7px; border-radius:2px; background:rgba(45,66,100,0.12); }
.meter-bars i.on { background:var(--v-fill); }

.verdict h2 { font-family:var(--font-head); font-weight:600; font-size:clamp(1.35rem, 1.1rem + 1.1vw, 1.7rem); line-height:1.2; color:var(--dark); margin:0 0 8px; text-wrap:balance; }
.verdict p { font-size:1.02rem; line-height:1.6; color:#36486A; margin:0; }
.verdict p + p { margin-top:10px; }
.verdict .tier { display:inline-block; background:var(--v-bg); border:1px solid var(--v-line); color:var(--v-ink); font-size:.74rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:4px 12px; border-radius:50px; margin-bottom:14px; }

/* ── Spec sheet ─────────────────────────────────────────────
   The facts a label-reader came for, in the order they'd ask them. A dl,
   not a table: these are term/definition pairs, and a table would promise
   a comparison across rows that does not exist. */
.spec { background:var(--card); border:1px solid var(--divider); border-radius:var(--radius-md); padding:6px 24px; margin:0 0 34px; }
.spec div { display:grid; grid-template-columns:150px 1fr; gap:6px 20px; padding:14px 0; border-top:1px solid var(--divider); }
.spec div:first-child { border-top:none; }
.spec dt { font-size:.78rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--soft); padding-top:2px; }
.spec dd { margin:0; font-size:.97rem; line-height:1.55; color:#36486A; font-weight:500; }
.spec dd b { color:var(--dark); font-weight:700; }
.spec dd .muted { color:var(--soft); font-weight:600; }

/* ── Catalog class badge ────────────────────────────────────
   Mirrors CatalogCategory from the app's ingredientCatalog.ts, so the
   glossary and the engine describe an ingredient with the same vocabulary.
   Today every entry is 'active' (the ingredients people search about are
   exactly the ones the engine scores) — the class only becomes a useful
   filter once the glossary covers chelators, thickeners and colorants, so
   the discriminating information is the "scored for" row underneath. */
.cat-badge { display:inline-flex; align-items:center; gap:8px; background:var(--white); border:1px solid var(--divider); border-radius:50px; padding:5px 14px 5px 9px; font-size:.82rem; font-weight:800; color:var(--dark); box-shadow:var(--shadow-soft); }
.cat-badge .gl { font-size:1rem; line-height:1; filter:saturate(.9); }
.spec dd .cat-note { display:block; margin-top:7px; font-size:.88rem; font-weight:500; color:var(--soft); line-height:1.5; }

/* Need dimensions the scoring engine ties this ingredient to. Plus and
   minus are carried by colour AND by the leading sign, so the distinction
   survives greyscale and colour-blindness. */
.needs { display:flex; flex-wrap:wrap; gap:6px; }
.needs span { display:inline-flex; align-items:center; gap:5px; font-family:var(--font-body); font-size:.78rem; font-weight:700; padding:4px 11px; border-radius:50px; border:1px solid; }
.needs .plus  { background:rgba(107,195,179,0.14); border-color:rgba(107,195,179,0.5); color:#1F7A6A; }
.needs .minus { background:rgba(217,125,145,0.13); border-color:rgba(217,125,145,0.5); color:#A8455A; }
.needs b { font-weight:900; }

/* ── Suits / avoid pair ─────────────────────────────────────
   Two columns because the answer is almost never universal — it is
   "yes for this hair, no for that hair", which is the whole premise of
   the app this glossary feeds. */
.suit { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:0 0 12px; }
.suit-card { background:var(--white); border:1px solid var(--divider); border-top:3px solid var(--v-fill); border-radius:var(--radius-md); padding:18px 20px; box-shadow:var(--shadow-soft); }
.suit-card h3 { display:flex; align-items:center; gap:9px; font-family:var(--font-head); font-weight:600; font-size:1rem; color:var(--v-ink); margin:0 0 12px; }
.suit-card h3 svg { width:19px; height:19px; flex-shrink:0; }
.suit-card ul { list-style:none; margin:0; padding:0; }
.suit-card li { position:relative; font-size:.92rem; line-height:1.5; font-weight:500; color:#36486A; padding:7px 0 7px 18px; border-top:1px solid var(--divider); }
.suit-card li:first-child { border-top:none; }
.suit-card li::before { content:""; position:absolute; left:0; top:15px; width:6px; height:6px; border-radius:50%; background:var(--v-fill); }

/* ── Evidence panel ─────────────────────────────────────────
   Claims about safety need to show their working, so the sources sit in the
   page rather than in a footnote nobody opens. */
.evidence { background:var(--white); border:1px solid var(--divider); border-left:4px solid var(--primary); border-radius:var(--radius-md); padding:20px 24px; margin:28px 0; box-shadow:var(--shadow-soft); }
.evidence h3 { font-family:var(--font-head); font-weight:600; font-size:1rem; color:var(--primary); margin:0 0 10px; }
.evidence ul { list-style:none; margin:0; padding:0; }
.evidence li { font-size:.92rem; line-height:1.55; color:#36486A; font-weight:500; padding:8px 0; border-top:1px solid var(--divider); }
.evidence li:first-child { border-top:none; }
.evidence a { color:var(--primary); font-weight:700; border-bottom:1px solid rgba(123,81,145,0.35); }
.evidence a:hover { border-bottom-color:var(--primary); }

/* ── Label-scan strip ───────────────────────────────────────
   "Where in the list does it sit?" is the question people ask holding a
   bottle. The strip mimics an INCI list with the entry highlighted. */
.label-scan { margin:26px 0; }
.label-scan-title { font-size:.74rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--soft); margin:0 0 9px; }
.label-strip { background:var(--dark); border-radius:var(--radius-md); padding:16px 20px; font-size:.85rem; line-height:1.75; color:rgba(255,255,255,0.62); font-weight:500; overflow-wrap:break-word; }
.label-strip mark { background:var(--v-fill); color:var(--dark); font-weight:800; padding:2px 7px; border-radius:5px; }
.label-scan figcaption { font-size:.82rem; color:var(--soft); margin-top:9px; }

/* ── Sideways links to other entries ────────────────────────
   A glossary earns its keep on internal linking: every entry should exit
   into two or three others rather than dead-ending at the CTA. */
.also { margin-top:50px; }
.also > h2 { font-family:var(--font-head); font-weight:600; font-size:var(--h2); color:var(--dark); margin-bottom:16px; }
.also-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.also-card { display:block; background:var(--white); border:1px solid var(--divider); border-left:4px solid var(--v-fill); border-radius:var(--radius-md); padding:15px 18px; box-shadow:var(--shadow-soft); transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.also-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.also-card .n { display:block; font-family:var(--font-head); font-weight:600; font-size:1.02rem; color:var(--dark); line-height:1.25; }
.also-card .v { display:block; font-size:.78rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--v-ink); margin-top:5px; }

/* ── Glossary index (ingredients.html) ──────────────────────
   Same card language as the entry pages: rail + tier chip + meter, so a
   reader who has seen one entry can read the whole grid at a glance. */
.gl-header { padding:150px 0 34px; text-align:center; }
.gl-header h1 { margin:16px 0 14px; }
.gl-header p.sub { font-size:1.12rem; color:var(--med-text); max-width:620px; margin:0 auto; }

.gl-legend { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; margin:26px auto 0; max-width:760px; }
.gl-legend span { display:inline-flex; align-items:center; gap:8px; font-size:.82rem; font-weight:700; color:var(--med-text); }
.gl-legend i { width:22px; height:8px; border-radius:3px; background:var(--v-fill); }

/* Search + verdict filter. Kept here rather than inline on the hub so the
   glossary has exactly one stylesheet to edit, the way the articles do. */
.gl-toolbar { padding:8px 0 26px; }
.gl-search-wrap { position:relative; max-width:560px; margin:0 auto 20px; }
.gl-search-wrap svg { position:absolute; left:20px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:var(--soft); pointer-events:none; }
#gl-search { width:100%; font-family:var(--font-body); font-size:1rem; font-weight:500; color:var(--dark); background:var(--white); border:1.5px solid var(--divider); border-radius:50px; padding:16px 22px 16px 52px; box-shadow:var(--shadow-soft); transition:border-color .2s, box-shadow .2s; }
#gl-search::placeholder { color:var(--soft); font-weight:500; }
#gl-search:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgba(123,81,145,0.12); }

.gl-pills { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
/* Each filter pill carries its own tier colour, so the control itself
   teaches the legend rather than needing one printed above it. */
.gl-pill { font-family:var(--font-body); font-size:.85rem; font-weight:700; color:var(--v-ink); background:var(--white); border:1.5px solid var(--v-line); border-radius:50px; padding:8px 18px; display:inline-flex; align-items:center; gap:8px; transition:background .18s ease, color .18s ease, box-shadow .2s ease, transform .18s ease; }
.gl-pill i { width:8px; height:8px; border-radius:50%; background:var(--v-fill); }
.gl-pill:hover { transform:translateY(-1px); box-shadow:var(--shadow-soft); }
.gl-pill.active { background:var(--v-fill); border-color:var(--v-fill); color:var(--white); box-shadow:var(--shadow-soft); }
.gl-pill.active i { background:rgba(255,255,255,0.85); }
.gl-pill[data-v="all"] { --v-fill:var(--primary); --v-ink:var(--primary); --v-line:rgba(123,81,145,0.4); }
.gl-pill[data-v="caution"].active { color:#5C3B08; }

.gl-main { padding:26px 0 110px; }
.gl-meta { text-align:center; color:var(--soft); font-size:.9rem; font-weight:600; margin-bottom:26px; }
.gl-empty { display:none; text-align:center; padding:60px 20px; }
.gl-empty.show { display:block; }
.gl-empty img { width:130px; margin:0 auto 20px; opacity:.9; }
.gl-empty h3 { font-family:var(--font-head); font-size:1.4rem; margin-bottom:8px; color:var(--dark); }
.gl-empty p { max-width:400px; margin:0 auto; color:var(--med-text); }

.gl-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }
.gl-card { display:flex; flex-direction:column; background:var(--white); border:1px solid var(--divider); border-top:4px solid var(--v-fill); border-radius:var(--radius-lg); padding:24px 24px 22px; box-shadow:var(--shadow-card); transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.gl-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lift); }
.gl-card .fam { font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--soft); }
.gl-card h3 { font-family:var(--font-head); font-weight:600; font-size:1.22rem; line-height:1.25; color:var(--dark); margin:7px 0 4px; }
.gl-card .alias { font-size:.8rem; font-weight:600; color:var(--soft); margin-bottom:12px; }
.gl-card .line { font-size:.93rem; line-height:1.55; color:var(--med-text); margin:0 0 18px; }
.gl-card .foot { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.gl-card .tier { background:var(--v-bg); border:1px solid var(--v-line); color:var(--v-ink); font-size:.72rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:4px 11px; border-radius:50px; white-space:nowrap; }

@media (max-width:900px) { .gl-grid { grid-template-columns:repeat(2, 1fr); } }

@media (max-width:600px) {
  .verdict { padding:22px 20px; }
  .spec { padding:4px 18px; }
  .spec div { grid-template-columns:1fr; gap:3px; padding:12px 0; }
  .suit { grid-template-columns:1fr; }
  .also-grid { grid-template-columns:1fr; }
  .gl-grid { grid-template-columns:1fr; }
  .gl-header { padding:120px 0 26px; }
  .evidence { padding:18px 20px; }
  .label-strip { padding:14px 16px; }
}

/* On the wide layout the entry keeps article.css's sticky-TOC grid, so
   these blocks must stay direct children of .article to land in column 2.
   Nothing to override — this note exists so they are not moved. */

/* Screen-reader-only label for the glossary search input. The magnifier icon
   is decorative, so the field needs a real label that never renders. */
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }