/* sites/vet-safety.css — the cat-safety guide on vet.billubnb.in: /plants, /plants/<slug>, /foods, /foods/<slug>.
   Phone-first (base rules = 390 px). The danger red and the level colours are NEW tokens (--vs-*, defined once in sites/vet.css)
   measured with scripts/contrast.py. Everything else comes from tokens.css. Danger content stays plain:
   no wobble, no puns, words + colour (never colour alone). */
/* tokens (--vs-*) live in sites/vet.css — loaded before this file on every guide page and on the vet home */

@layer sections {
  /* ---- level → colour (one place) ------------------------------------------------------------------------------- */
  .vs-page { --lv: var(--vs-unk); --lv-soft: var(--vs-unk-soft); --lv-ink: var(--vs-unk-ink); }
  .vs-lv-deadly, [class*="--deadly"] { --lv: var(--vs-danger); --lv-soft: var(--vs-danger-soft); --lv-ink: var(--vs-danger-ink); }
  .vs-lv-severe, [class*="--severe"] { --lv: var(--vs-sev); --lv-soft: var(--vs-sev-soft); --lv-ink: var(--vs-sev-ink); }
  .vs-lv-moderate, [class*="--moderate"] { --lv: var(--vs-mod); --lv-soft: var(--vs-mod-soft); --lv-ink: var(--vs-mod-ink); }
  .vs-lv-mild, [class*="--mild"] { --lv: var(--vs-mild); --lv-soft: var(--vs-mild-soft); --lv-ink: var(--vs-mild-ink); }
  .vs-lv-unknown, [class*="--unknown"] { --lv: var(--vs-unk); --lv-soft: var(--vs-unk-soft); --lv-ink: var(--vs-unk-ink); }
  .vs-lv-safe, [class*="--safe"] { --lv: var(--vs-safe); --lv-soft: var(--vs-safe-soft); --lv-ink: var(--vs-safe-ink); }

  [lang="hi"] { font-family: var(--vs-font-hi), var(--font-text); font-size: 1.04em; font-weight: 600; letter-spacing: 0; }
  .vs-bot { font-style: italic; color: var(--ink-3); }
  [data-tx-card][hidden], [data-tx-group][hidden], [data-tx-search][hidden] { display: none !important; }

  /* ---- badge + meter ---------------------------------------------------------------------------------------------- */
  .vs-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .62rem .2rem .5rem; border-radius: var(--r-pill);
    background: var(--lv-soft); color: var(--lv-ink); font-size: .8rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase;
    line-height: 1.25; white-space: nowrap; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lv) 35%, transparent); }
  .vs-badge .i { width: 15px; height: 15px; stroke-width: 2.4; }
  .vs-badge b { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--lv-ink); color: var(--paper-3); font-size: .72rem; }
  .vs-badge--deadly { background: var(--vs-danger); color: var(--vs-on-danger); box-shadow: none; }
  .vs-badge--sm { font-size: .72rem; padding: .12rem .5rem .12rem .4rem; }
  .vs-meter { display: inline-flex; gap: 3px; vertical-align: middle; }
  .vs-meter i { width: 14px; height: 8px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 12%, transparent); }
  .vs-meter i.on { background: var(--lv); }
  .vs-meter--unknown i { background: none; box-shadow: inset 0 0 0 1.5px var(--vs-unk); border-radius: 3px; opacity: .75; }

  /* ---- hero -------------------------------------------------------------------------------------------------------- */
  .vs-hero { padding-bottom: calc(var(--space-6) + var(--sheet-r)); }
  /* the decorative sunbeam is sized in % of the hero, so a one-line re-wrap at the font swap "moved" this huge element (CLS ≈ .1);
     fixed px geometry keeps it still — the hero clips it anyway */
  .vs-hero .hero__beam { top: -240px; height: 1500px; }
  .vs-hero__inner { display: grid; gap: var(--space-5); align-items: start; }
  .vs-hero__copy { min-width: 0; }
  .vs-hero h1 { font-size: clamp(1.95rem, 1.35rem + 2.6vw, 3.3rem); max-width: 16em; line-height: 1.06; text-wrap: balance; }
  .vs-hero h1 em { font-style: normal; background: linear-gradient(transparent 60%, color-mix(in srgb, var(--sun) 70%, transparent) 60% 92%, transparent 92%); }
  .vs-hero .lead { font-size: clamp(1.02rem, .98rem + .3vw, 1.2rem); }
  .vs-hero__facts { display: flex; flex-wrap: wrap; gap: .4rem; margin: var(--space-4) 0 0; padding: 0; }
  .vs-hero__facts span { display: inline-flex; gap: .3rem; align-items: baseline; padding: .3rem .75rem; border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--paper-3) 85%, transparent); border: 1px solid var(--line); font-size: .9rem; font-weight: 700; color: var(--ink-2); }
  .vs-hero__facts strong { color: var(--ink); font-size: 1rem; }
  .vs-jump { display: flex; gap: .35rem; margin-top: var(--space-4); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .vs-jump::-webkit-scrollbar { display: none; }
  .vs-jump a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: .25rem .9rem; border-radius: var(--r-pill);
    border: 1.5px solid var(--line-strong); color: var(--ink); font-weight: 750; font-size: .93rem; text-decoration: none; white-space: nowrap; }
  .vs-jump a:hover { background: var(--paper-3); border-color: var(--ink-2); }
  .vs-hero__meta { min-width: 0; }
  .vs-hero__now { display: none; }
  @media (min-width: 720px) { .vs-jump { flex-wrap: wrap; overflow: visible; } }
  @media (min-width: 1000px) {
    .vs-jump__todo { display: none !important; }      /* the 'If it already happened' box links there; keeps the row on one line in both fonts */
    .vs-hero__now { display: block; margin-top: var(--space-5); padding: var(--space-4) var(--space-5); border-radius: var(--r-md);
      background: color-mix(in srgb, var(--paper-3) 88%, transparent); border: 1px solid var(--line); border-left: 5px solid var(--vs-danger); max-width: 40rem; }
    .vs-hero__now h2 { display: flex; gap: .45rem; align-items: center; margin: 0 0 .5rem; font-size: 1.15rem; }
    .vs-hero__now h2 .i { width: 22px; height: 22px; color: var(--vs-danger-ink); }
    .vs-hero__now ol { margin: 0; padding-left: 1.3rem; display: grid; gap: .3rem; font-size: .97rem; line-height: 1.45; }
    .vs-hero__now a { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; margin-top: .3rem; font-weight: 800; color: var(--vs-danger-ink); }
    .vs-hero__now a .i { width: 16px; height: 16px; }
  }
  .vs-hero__meta .vs-hero__facts { margin-top: 0; }
  @media (min-width: 1000px) {
    .vs-hero__inner { grid-template-columns: minmax(0, 1fr) 460px; grid-template-rows: auto 1fr; gap: var(--space-5) var(--space-7); }   /* a FIXED track: a content-sized one re-wrapped the H1 while the page settled (CLS) */
    .vs-hero__copy { grid-column: 1; grid-row: 1; }
    .vs-hero h1 { font-size: 2.75rem; max-width: none; }   /* measured: wraps the same in Fraunces, its fallback and raw Georgia (no font-swap CLS) */
    .vs-hero__meta { grid-column: 1; grid-row: 2; align-self: start; }
    .vs-hero .vs-danger { grid-column: 2; grid-row: 1 / span 2; }
  }

  /* ---- the red box -------------------------------------------------------------------------------------------------- */
  .vs-danger { position: relative; border-radius: var(--r-lg); background: var(--vs-danger); color: var(--vs-on-danger); padding: var(--space-5) var(--space-4) var(--space-4);
    box-shadow: 0 2px 6px rgba(80, 10, 6, .18), 0 26px 50px -28px rgba(80, 10, 6, .55); }
  .vs-danger__title { display: flex; gap: .55rem; align-items: flex-start; margin: 0 0 var(--space-3); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.55rem);
    line-height: 1.2; color: var(--vs-on-danger); }
  .vs-danger__title .i { flex: none; width: 26px; height: 26px; margin-top: .05rem; }
  .vs-danger__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-radius: var(--r-md); overflow: hidden; }
  .vs-danger__a { display: grid; gap: .1rem; padding: .62rem .85rem; min-height: 44px; background: var(--vs-danger-row); color: var(--vs-on-danger); text-decoration: none; }
  .vs-danger__a:hover { background: var(--vs-danger-press); }
  .vs-danger__a:focus-visible { outline: 3px solid var(--vs-on-danger); outline-offset: -3px; }
  .vs-danger__name { font-weight: 850; font-size: 1.05rem; line-height: 1.25; }
  .vs-danger__name::after { content: " ›"; font-weight: 700; }
  .vs-danger__hi { font-weight: 600; color: var(--vs-on-danger-2); }
  .vs-danger__why { font-size: .93rem; line-height: 1.4; color: var(--vs-on-danger-2); }
  .vs-danger__text { margin: var(--space-4) 0 0; font-size: 1rem; line-height: 1.45; }
  .vs-danger__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: var(--space-4) 0 0; }
  .vs-btn-light { --bg: var(--vs-on-danger); --fg: var(--vs-danger-ink); background: var(--vs-on-danger); color: var(--vs-danger-ink); }
  .vs-btn-light:hover { background: #FFFFFF; }
  .vs-danger__wa { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; color: var(--vs-on-danger); font-weight: 800; font-size: .95rem; }
  .vs-danger__wa .i { width: 18px; height: 18px; }
  .vs-btn-danger { --bg: var(--vs-danger); --fg: var(--vs-on-danger); background: var(--vs-danger); color: var(--vs-on-danger); }
  .vs-btn-danger:hover { background: var(--vs-danger-press); }

  /* ---- filter -------------------------------------------------------------------------------------------------------- */
  .vs-filter { display: grid; gap: var(--space-3); margin-bottom: var(--space-5); }
  .vs-search__label { display: block; font-weight: 800; font-size: .95rem; margin-bottom: .35rem; }
  .vs-search__box { position: relative; display: flex; align-items: center; max-width: 34rem; }
  .vs-search__box > .i { position: absolute; left: .9rem; width: 20px; height: 20px; color: var(--ink-3); pointer-events: none; }
  .vs-search input { width: 100%; min-height: 50px; padding: .6rem 3rem .6rem 2.7rem; border-radius: var(--r-pill); border: 1.5px solid var(--line-strong);
    background: var(--paper-3); color: var(--ink); font: 600 1rem/1.3 var(--font-text); }
  .vs-search input::placeholder { color: var(--ink-3); }
  .vs-search input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--ink-2); }
  .vs-search__clear { position: absolute; right: .3rem; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer; }
  .vs-search__clear .i { width: 18px; height: 18px; }
  .vs-chips { position: sticky; top: calc(var(--header-h) + 4px); z-index: 3; display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding: .45rem var(--gutter); background: color-mix(in srgb, var(--paper) 94%, transparent);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .vs-chips::-webkit-scrollbar { display: none; }
  .vs-chip { flex: none; display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .3rem .55rem .3rem .85rem;
    border-radius: var(--r-pill); border: 1.5px solid var(--line-strong); background: var(--paper-3); color: var(--ink); font-weight: 800; font-size: .93rem;
    text-decoration: none; white-space: nowrap; }
  .vs-chip::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--lv); }
  .vs-chip--all::before { display: none; }
  .vs-chip--all { --lv: var(--sage-deep); }
  .vs-chip b { min-width: 1.6rem; padding: .05rem .4rem; border-radius: var(--r-pill); background: var(--paper-2); font-size: .82rem; text-align: center; }
  .vs-chip:hover { border-color: var(--ink-2); }
  .vs-chip[aria-pressed="true"] { background: var(--lv-soft, var(--paper-2)); border-color: var(--lv); box-shadow: inset 0 0 0 1px var(--lv); }
  .vs-chip--all[aria-pressed="true"] { background: var(--sage-deep); border-color: var(--sage-deep); color: var(--on-deep); box-shadow: none; }
  .vs-chip--all[aria-pressed="true"] b { background: color-mix(in srgb, var(--on-deep) 18%, transparent); }
  .vs-count { margin: 0; min-height: 1.2em; font-size: .92rem; font-weight: 700; color: var(--ink-2); }
  .vs-empty { margin: 0; padding: var(--space-4); border-radius: var(--r-md); background: var(--paper-3); border: 1.5px dashed var(--line-strong); }
  .vs-empty a { color: var(--ink); font-weight: 800; }

  /* ---- level groups + cards ------------------------------------------------------------------------------------------ */
  .vs-group { margin-top: var(--space-6); scroll-margin-top: calc(var(--header-h) + 70px); }
  .vs-lvl-head { display: grid; gap: .3rem; margin-bottom: var(--space-4); padding-left: var(--space-3); border-left: 5px solid var(--lv); }
  .vs-lvl-head h3 { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; font-size: 1.1rem; }
  .vs-lvl-head .vs-badge { font-size: .9rem; padding: .3rem .8rem .3rem .6rem; }
  .vs-lvl-head__n { font-family: var(--font-text); font-weight: 750; font-size: .95rem; color: var(--ink-2); }
  .vs-lvl-head p { margin: 0; color: var(--ink-2); font-size: .95rem; }
  .vs-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
  .vs-card { min-width: 0; }
  .vs-card__a { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: .25rem var(--space-3); align-content: start; height: 100%;
    padding: var(--space-3) 2.4rem var(--space-3) var(--space-3);
    border-radius: var(--r-md); background: var(--paper-3); color: var(--ink); border: 1px solid var(--line); border-left: 5px solid var(--lv);
    text-decoration: none; box-shadow: var(--shadow-1); transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
  .vs-card__a:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
  .vs-card__a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
  .vs-thumb { grid-column: 1; grid-row: 1; display: block; width: 76px; aspect-ratio: 4 / 5; border-radius: 999px 999px 12px 12px; overflow: hidden; background: var(--lv-soft); }
  .vs-thumb__img, .vs-thumb .vs-art { width: 100%; height: 100%; object-fit: cover; background-size: cover; display: block; }
  .vs-card__body { display: contents; }
  .vs-card__head { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: .3rem; min-width: 0; align-self: start; }
  .vs-card__top { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; align-self: start; }
  .vs-card__name { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 700; font-size: 1.2rem; line-height: 1.15; }
  .vs-card__names { display: flex; flex-wrap: wrap; gap: 0 .6rem; font-size: .93rem; color: var(--ink-2); line-height: 1.35; align-self: start; }
  .vs-card__why { grid-column: 1 / -1; margin-top: .35rem; font-size: .95rem; line-height: 1.42; color: var(--ink); }
  .vs-card__where { grid-column: 1 / -1; display: flex; gap: .35rem; align-items: flex-start; font-size: .9rem; line-height: 1.38; color: var(--ink-2); }
  .vs-card__where .i { flex: none; width: 15px; height: 15px; margin-top: .15rem; color: var(--ink-3); }
  .vs-card__chev { position: absolute; right: .7rem; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
    background: var(--lv-soft); color: var(--lv-ink); transition: transform var(--dur-2) var(--ease-out); }
  .vs-card__chev .i { width: 16px; height: 16px; rotate: -90deg; stroke-width: 2.4; }
  .vs-card__a:hover .vs-card__chev { transform: translateX(3px); }
  .vs-hi__lat { color: var(--ink-2); font-weight: 600; }
  .vs-art { display: grid !important; place-items: center; background: linear-gradient(160deg, var(--lv-soft), color-mix(in srgb, var(--lv-soft) 60%, var(--paper-3))); color: var(--lv-ink); }
  .vs-art .i { width: 42%; height: 42%; stroke-width: 1.6; }
  /* phones: below "severe" a card folds into a compact row — photo + names; the level is the group heading (and the coloured edge) */
  @media (max-width: 719px) {
    :is(.vs-card--moderate, .vs-card--mild, .vs-card--unknown) .vs-card__a { align-items: center; padding-block: .55rem; box-shadow: none; }
    :is(.vs-card--moderate, .vs-card--mild, .vs-card--unknown) .vs-thumb { width: 52px; }
    :is(.vs-card--moderate, .vs-card--mild, .vs-card--unknown) .vs-card__head { align-self: center; gap: .1rem; }
    :is(.vs-card--moderate, .vs-card--mild, .vs-card--unknown) .vs-card__a { grid-template-columns: 52px minmax(0, 1fr); row-gap: .1rem; }
    .vs-card__where > span { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
    :is(.vs-card--moderate, .vs-card--mild, .vs-card--unknown) :is(.vs-card__top, .vs-card__why, .vs-card__where) { display: none; }
    :is(.vs-card--moderate, .vs-card--mild, .vs-card--unknown) .vs-card__name { font-size: 1.1rem; }
    .vs-cards { gap: var(--space-2); }
    .vs-card--deadly + .vs-card--deadly, .vs-card--severe + .vs-card--severe { margin-top: var(--space-1); }
  }
  @media (min-width: 720px) {
    .vs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
    .vs-card__a { padding: var(--space-4) 2.6rem var(--space-4) var(--space-4); grid-template-columns: 92px minmax(0, 1fr); }
    .vs-thumb { width: 92px; }
  }
  @media (min-width: 1100px) { .vs-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  /* compact cards (safe lists, related) */
  .vs-minis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .vs-mini { min-width: 0; }
  .vs-mini__a { display: flex; gap: .6rem; align-items: center; height: 100%; min-height: 64px; padding: .45rem .55rem;
    border-radius: var(--r-md); background: var(--paper-3); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
  .vs-mini__a:hover { border-color: var(--lv); box-shadow: var(--shadow-1); }
  .vs-mini__a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
  .vs-thumb--mini { width: 42px; border-radius: 999px 999px 9px 9px; }
  .vs-mini__body { display: flex; flex-direction: column; gap: .05rem; min-width: 0; line-height: 1.25; }
  .vs-mini__name { font-weight: 850; font-size: .98rem; overflow-wrap: anywhere; }
  .vs-hi--sm { font-size: .9rem; color: var(--ink-2); }
  .vs-hi--sm .vs-hi__lat { display: none; }
  .vs-mini__body .vs-bot { display: none; font-size: .86rem; }
  .vs-mini__lvl { margin-top: .2rem; }
  .vs-safe .vs-mini__lvl { display: none; }
  @media (min-width: 640px) {
    .vs-mini__a { gap: var(--space-3); padding: .55rem .75rem; min-height: 72px; }
    .vs-thumb--mini { width: 56px; border-radius: 999px 999px 10px 10px; }
    .vs-mini__body .vs-bot { display: block; }
    .vs-hi--sm .vs-hi__lat { display: inline; }
    .vs-mini__name { font-size: 1.02rem; }
  }
  @media (min-width: 1000px) { .vs-minis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .vs-minis--related { margin-bottom: var(--space-5); }

  .vs-safe { margin-top: var(--space-8); padding: var(--space-5) var(--space-4); border-radius: var(--r-lg); background: var(--vs-safe-soft); }
  .vs-safe__head { margin-bottom: var(--space-4); }
  .vs-safe__head h2 { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: var(--step-2); }
  .vs-safe__head h2 .i { flex: none; width: 30px; height: 30px; padding: 5px; border-radius: 50%; background: var(--vs-safe); color: var(--paper-3); stroke-width: 2.6; }
  .vs-safe__head p { margin: .5rem 0 0; color: var(--ink); max-width: 46rem; }
  @media (min-width: 720px) { .vs-safe { padding: var(--space-6); } }

  /* foods: shelves */
  .vs-shelf { margin-top: var(--space-7); }
  .vs-shelf__head { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-4); }
  .vs-shelf__head .pebble { flex: none; }
  .vs-shelf__head h3 { margin: 0; font-size: var(--step-1); }
  .vs-shelf__n { font-family: var(--font-text); font-size: .9rem; font-weight: 800; padding: .1rem .55rem; border-radius: var(--r-pill); background: var(--paper-2); color: var(--ink-2); vertical-align: middle; }
  .vs-shelf__head p { margin: .2rem 0 0; color: var(--ink-2); }

  /* ---- places + name traps (card sets: swipe rows on phones — mobile.css .swipe; grids from 720 px) + tags ---------------- */
  .vs-place-grid, .vs-traps__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
  .vs-place, .vs-trap { display: flex; flex-direction: column; gap: .3rem; padding: var(--space-4); border-radius: var(--r-md); background: var(--paper-3); border: 1px solid var(--line); }
  .vs-place h3 { margin: 0; font-size: 1.15rem; }
  .vs-place p { margin: 0 0 var(--space-2); color: var(--ink-2); font-size: .95rem; }
  .vs-trap h3 { margin: 0; font-size: 1.25rem; line-height: 1.2; }
  .vs-trap p { margin: 0; line-height: 1.45; color: var(--ink-2); font-size: .97rem; }
  .vs-trap__k { display: block; font-family: var(--font-text); font-size: .76rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); }
  .vs-trap__not { margin-bottom: var(--space-2) !important; }
  .vs-trap .vs-tags { margin-top: auto; }
  .vs-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
  .vs-tag { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: .2rem .75rem; border-radius: var(--r-pill);
    background: var(--paper); border: 1px solid var(--line-strong); color: var(--ink); font-weight: 700; font-size: .92rem; text-decoration: none; }
  .vs-tag i { width: 9px; height: 9px; border-radius: 50%; background: var(--lv); flex: none; }
  .vs-tag:hover { border-color: var(--lv); background: var(--lv-soft); }
  @media (min-width: 720px) { .vs-place-grid, .vs-traps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1100px) { .vs-place-grid, .vs-traps__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  /* ---- what to do (emergency box) + legend -------------------------------------------------------------------------- */
  .vs-todo__inner { display: grid; gap: var(--space-5); align-items: start; }
  @media (min-width: 960px) { .vs-todo__inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-7); } }
  .vs-sos { scroll-margin-top: calc(var(--header-h) + 20px); padding: var(--space-5) var(--space-4); border-radius: var(--r-lg); background: var(--paper-3);
    border: 1px solid var(--line); border-top: 6px solid var(--vs-danger); box-shadow: var(--shadow-1); }
  .vs-sos__title { display: flex; gap: .55rem; align-items: flex-start; margin: 0; font-size: clamp(1.3rem, 1.15rem + .6vw, 1.7rem); line-height: 1.2; }
  .vs-sos__title .i { flex: none; width: 28px; height: 28px; color: var(--vs-danger-ink); margin-top: .05rem; }
  .vs-sos__lead { margin: var(--space-3) 0 0; color: var(--ink-2); }
  .vs-sos__steps { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: .55rem; counter-reset: s; }
  .vs-sos__steps li { counter-increment: s; position: relative; padding-left: 2.6rem; min-height: 2rem; line-height: 1.45; font-weight: 650; }
  .vs-sos__steps li::before { content: counter(s); position: absolute; left: 0; top: -.1rem; display: grid; place-items: center; width: 1.9rem; height: 1.9rem;
    border-radius: 50%; background: var(--vs-danger-soft); color: var(--vs-danger-ink); font: 850 .95rem var(--font-text); }
  .vs-sos__clinics { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--r-md); background: var(--vs-safe-soft); }
  .vs-sos__clinics h3 { margin: 0 0 .3rem; font-size: 1rem; }
  .vs-sos__clinics ul { margin: 0; padding-left: 1.1rem; }
  .vs-sos__clinics a { color: var(--ink); font-weight: 800; }
  .vs-sos__note { margin: var(--space-4) 0 0; padding: .7rem .9rem; border-radius: var(--r-sm); background: var(--paper-2); font-size: .95rem; line-height: 1.45; }
  .vs-sos__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-4) 0 0; }
  .vs-legend { padding: var(--space-5) var(--space-4); border-radius: var(--r-lg); background: color-mix(in srgb, var(--paper-3) 70%, transparent); border: 1px solid var(--line); }
  .vs-legend h2 { margin: 0 0 var(--space-3); font-size: var(--step-1); }
  .vs-legend ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
  .vs-legend li { display: grid; grid-template-columns: auto 1fr; gap: .25rem .6rem; align-items: center; }
  .vs-legend li > span:last-child { grid-column: 1 / -1; font-size: .93rem; color: var(--ink-2); line-height: 1.4; }
  .vs-legend .fine { margin: var(--space-4) 0 0; color: var(--ink-2); }

  /* ---- sources + review + next ---------------------------------------------------------------------------------------- */
  .vs-sources__inner, .vs-cite__inner { display: grid; gap: var(--space-6); }
  .vs-sources h2, .vs-cite h2, .vs-share h2 { font-size: var(--step-2); margin: 0 0 var(--space-3); }
  .vs-sources p a, .vs-sources-list a, .vs-review a { color: var(--ink); font-weight: 750; text-decoration: underline; text-decoration-color: var(--sun-deep); text-underline-offset: .18em; }
  .vs-review { margin-top: var(--space-5); display: grid; gap: .5rem; padding: var(--space-4); border-radius: var(--r-md); background: var(--paper-2); }
  .vs-review p { margin: 0; font-size: .93rem; line-height: 1.5; color: var(--ink-2); }
  .vs-review__when { display: flex; gap: .45rem; align-items: center; font-weight: 800; color: var(--ink) !important; }
  .vs-review__when .i { width: 18px; height: 18px; flex: none; }
  .vs-next { display: grid; gap: var(--space-3); align-content: start; }
  .vs-next__card { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3); align-items: center; min-height: 72px; padding: var(--space-4);
    border-radius: var(--r-md); background: var(--paper-3); border: 1px solid var(--line); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-1); }
  .vs-next__card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
  .vs-next__card strong { display: block; font-size: 1.05rem; }
  .vs-next__card small { display: block; color: var(--ink-2); font-size: .9rem; line-height: 1.35; margin-top: .15rem; }
  .vs-next__card > .i { width: 20px; height: 20px; }
  @media (min-width: 960px) { .vs-sources__inner, .vs-cite__inner { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-8); } }

  /* ---- myths ----------------------------------------------------------------------------------------------------------- */
  .vs-myth-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
  @media (min-width: 720px) { .vs-myth-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1100px) { .vs-myth-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .vs-myth { display: grid; gap: .6rem; align-content: start; padding: var(--space-4); border-radius: var(--r-md); background: var(--paper-3); border: 1px solid var(--line); }
  .vs-myth p { margin: 0; line-height: 1.45; }
  .vs-myth__belief { font-weight: 750; font-size: 1.02rem; }
  .vs-myth__fact { color: var(--ink-2); font-size: .96rem; }
  .vs-myth__k { display: inline-block; margin-right: .5rem; padding: .08rem .5rem; border-radius: var(--r-pill); font-size: .74rem; font-weight: 900;
    letter-spacing: .08em; text-transform: uppercase; vertical-align: .1em; }
  .vs-myth__k--myth { background: var(--vs-danger-soft); color: var(--vs-danger-ink); }
  .vs-myth__k--fact { background: var(--vs-safe-soft); color: var(--vs-safe-ink); }
  .vs-myth__more { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; font-weight: 800; color: var(--ink); }
  .vs-myth__more .i { width: 16px; height: 16px; }

  /* foods: cats vs dogs */
  .vs-honesty__grid { display: grid; gap: var(--space-4); }
  @media (min-width: 900px) { .vs-honesty__grid { grid-template-columns: 1fr 1fr; } }
  .vs-honesty__col { padding: var(--space-5) var(--space-4); border-radius: var(--r-lg); background: var(--paper-3); border: 1px solid var(--line); }
  .vs-honesty__col--worse { border-top: 6px solid var(--vs-danger); }
  .vs-honesty__col h3 { display: flex; gap: .5rem; align-items: center; margin: 0 0 var(--space-3); font-size: 1.2rem; }
  .vs-honesty__col h3 .i { width: 22px; height: 22px; color: var(--vs-danger-ink); }
  .vs-honesty__col ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .5rem; }
  .vs-honesty__col a { color: var(--ink); display: inline-block; padding: .55rem 0; }
  .vs-honesty__col .fine { margin: var(--space-3) 0 0; color: var(--ink-2); }

  /* ---- detail page ------------------------------------------------------------------------------------------------------- */
  .vs-detail { display: grid; gap: var(--space-5); align-items: start; }
  .vs-detail__copy { min-width: 0; display: grid; gap: var(--space-3); }
  .vs-detail__copy > * { margin: 0; }
  .vs-detail__q { font-size: clamp(1.9rem, 1.35rem + 2.4vw, 3.1rem) !important; max-width: 15em !important; }
  .vs-answer { padding: var(--space-4); border-radius: var(--r-md); background: var(--paper-3); border: 1px solid var(--line); border-left: 6px solid var(--lv); box-shadow: var(--shadow-1); }
  .vs-answer p { margin: 0; }
  .vs-answer__lvl { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .7rem; }
  .vs-answer__lvl .vs-badge { font-size: .92rem; padding: .3rem .85rem .3rem .65rem; }
  .vs-answer__lvl .vs-meter i { width: 18px; height: 10px; }
  .vs-answer__ev { font-size: .88rem; font-weight: 750; color: var(--ink-2); }
  .vs-answer__text { margin-top: var(--space-3) !important; font-size: clamp(1.08rem, 1rem + .4vw, 1.28rem); line-height: 1.45; color: var(--ink); font-weight: 600; }
  .vs-answer__why { margin-top: var(--space-3) !important; font-size: .97rem; color: var(--ink-2); line-height: 1.45; }
  .vs-answer__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4) !important; }
  .vs-figure { margin: 0; display: grid; gap: .5rem; }
  .vs-figure__frame { border-radius: 160px 160px 18px 18px; overflow: hidden; background: var(--lv-soft); box-shadow: var(--shadow-1); }
  .vs-figure__img { display: block; width: 100%; height: auto; background-size: cover; }
  .vs-figure__frame .vs-art { aspect-ratio: 4 / 3; }
  .vs-credit { display: flex; gap: .4rem; align-items: flex-start; font-size: .9rem; line-height: 1.4; color: var(--ink-2); }
  .vs-credit .i { flex: none; width: 15px; height: 15px; margin-top: .12rem; }
  .vs-credit a { color: var(--ink); font-weight: 750; }
  .vs-credit--none { color: var(--ink-3); }
  @media (min-width: 900px) {
    .vs-detail { grid-template-columns: minmax(0, 1fr) 400px; gap: var(--space-7); }
    .vs-figure { position: sticky; top: calc(var(--header-h) + var(--space-4)); }
  }
  .vs-names { display: grid; gap: var(--space-3); margin: 0 0 var(--space-5); }
  .vs-names > div { padding: var(--space-3) var(--space-4); border-radius: var(--r-md); background: var(--paper-3); border: 1px solid var(--line); min-width: 0; }
  .vs-names dt { font-size: .78rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); }
  .vs-names dd { margin: .2rem 0 0; font-size: 1.05rem; line-height: 1.4; }
  .vs-names__also { display: block; font-size: .9rem; color: var(--ink-2); }
  .vs-hi--lg [lang="hi"] { font-size: 1.25em; }
  .vs-regional { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
  .vs-regional li { padding: .2rem .65rem; border-radius: var(--r-pill); background: var(--paper-2); font-size: .93rem; }
  .vs-regional__l { font-size: .78rem; font-weight: 850; color: var(--ink-2); margin-right: .35rem; text-transform: uppercase; letter-spacing: .06em; }
  @media (min-width: 720px) { .vs-names { grid-template-columns: repeat(3, minmax(0, 1fr)); } .vs-names__wide { grid-column: 1 / -1; } }
  .vs-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
  .vs-facts li { padding: var(--space-4); border-radius: var(--r-md); background: var(--paper-2); }
  .vs-facts h2 { display: flex; gap: .45rem; align-items: center; margin: 0 0 .3rem; font-family: var(--font-text); font-size: .86rem; font-weight: 850;
    letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
  .vs-facts h2 .i { width: 17px; height: 17px; }
  .vs-facts p { margin: 0; line-height: 1.5; }
  @media (min-width: 720px) { .vs-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1100px) { .vs-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .vs-body__grid { display: grid; gap: var(--space-6); align-items: start; }
  .vs-body__main { display: grid; gap: var(--space-6); min-width: 0; }
  @media (min-width: 1000px) {
    .vs-body__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-7); }
    .vs-body__side { position: sticky; top: calc(var(--header-h) + var(--space-4)); }
  }
  .vs-block h2 { margin: 0 0 var(--space-3); font-size: var(--step-2); }
  .vs-block h3 { font-size: 1.1rem; margin: var(--space-4) 0 var(--space-2); }
  .vs-list-clues { margin: 0; padding: 0; }
  .vs-symptoms { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
  .vs-symptoms li { padding: .4rem .8rem; border-radius: var(--r-md); background: var(--paper-3); border: 1px solid var(--line); font-weight: 650; line-height: 1.35; }
  .vs-onset { display: flex; gap: .45rem; align-items: flex-start; margin: var(--space-3) 0 0; color: var(--ink-2); line-height: 1.45; }
  .vs-onset .i { width: 18px; height: 18px; flex: none; margin-top: .15rem; }
  .vs-todo-block { padding: var(--space-5) var(--space-4); border-radius: var(--r-lg); background: var(--paper-3); border: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 20px); }
  .vs-todo-block--deadly, .vs-todo-block--severe { background: var(--vs-danger-soft); border-color: color-mix(in srgb, var(--vs-danger) 30%, transparent); }
  .vs-todo-block .prose strong { color: var(--ink); }
  .vs-myth--solo { padding: var(--space-4); }
  .vs-swap { display: flex; gap: .55rem; align-items: flex-start; margin: 0; padding: var(--space-4); border-radius: var(--r-md); background: var(--vs-safe-soft); line-height: 1.45; }
  .vs-swap .i { flex: none; width: 20px; height: 20px; color: var(--vs-safe-ink); margin-top: .1rem; }
  .vs-sources-list { margin: 0; padding-left: 1.4rem; display: grid; gap: 0; font-size: .95rem; line-height: 1.4; }
  .vs-sources-list a { display: block; padding: .62rem 0; }
  .vs-share p { margin: 0 0 var(--space-3); color: var(--ink-2); }
  .vs-share__row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
  .vs-related__more { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; }

  @media (prefers-reduced-motion: reduce) {
    .vs-card__a, .vs-card__a:hover, .vs-next__card:hover { transition: none; transform: none; }
  }
}