/* Rules only the home page and the risk-checker page ever use.
   Split out so the other 22 pages stop downloading the checker and the
   scroll-driven walk in order to render a privacy policy. */
/* The language switcher sits at the end of the header. */
.chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-soft);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 650;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.chip-btn:hover { background: var(--surface-hi); border-color: var(--line-hi); color: var(--text); }
.chip-btn .icon { width: 16px; height: 16px; }

/* ---------- three-beat night ---------- */

.beats { display: grid; gap: 14px; counter-reset: beat; }
@media (min-width: 780px) { .beats { grid-template-columns: repeat(3, 1fr); } }
.beat {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 20px 22px;
}
.beat::before {
  counter-increment: beat;
  content: counter(beat);
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: var(--primary);
  font-weight: 800;
  font-size: 0.9rem;
}
.beat .eyebrow { margin: 0 0 3px; }
.beat h3 { margin: 0 0 6px; font-size: 1.06rem; font-weight: 730; }
.beat p { margin: 0; font-size: 0.95rem; color: var(--text-dim); }

/* ---------- the walk ----------

   One phone, five screens, changing as you read past them. It has three
   layouts, chosen by how much room the screen has to give it:

     wide          the phone sticks beside the words, two columns
     upright       the phone pins above the words, one column
     anything else the phone is printed with each step, no pinning at all

   The third is not a punishment layout. A pinned phone has to be sized to the
   height it is given, so on a screen wider than it is tall it comes out
   absurdly small: a 900x700 window produced a 151px phone in a 900px column.
   Anything on its side, or too short to hold a phone and a sentence at once,
   is better served by the printed sequence, where each phone is 268px. Someone
   asking for reduced data gets that layout too, because there every screen is
   a labelled placeholder rather than a picture, and five placeholders each
   carrying their own step's caption say more than one repeating the heading. */

.walk-step .phone { margin-bottom: 18px; }
.walk-step .eyebrow { margin: 0 0 6px; }
.walk-step p { margin: 0; }
.copy-done { color: var(--mint); font-size: 0.85rem; margin-left: 6px; }

.walk-scroll { position: relative; }
.walk-scroll .inner { max-width: 1140px; }
.walk-scroll .track { display: grid; gap: 0; }
.walk-scroll .stage { display: none; }

/* ---------- wide: the phone beside the words ---------- */

@media (min-width: 940px) {
  .walk-scroll .track { grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
  .walk-scroll .stage {
    position: sticky;
    top: 0;
    height: 100svh;
    display: grid;
    place-items: center;
  }
  .walk-scroll .beats-col { padding: 8vh 0; }
  .walk-scroll .walk-step {
    min-height: 84svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0.3;
    transition: opacity 0.4s ease;
  }
  .walk-scroll .walk-step.is-active { opacity: 1; }
  .walk-scroll .walk-step .phone { display: none; }
}

/* ---------- upright: the phone above the words ---------- */

@media (max-width: 939px) and (orientation: portrait) and (min-height: 640px) {
  .walk-scroll {
    /* The two numbers everything else here is derived from. The stage takes
       just under half the screen, which on the shortest phone this layout
       runs on leaves 300px for the words: enough for a heading and a short
       paragraph, which is all a step is. */
    --stage-h: 47svh;
    /* Where the phone stops. Nothing is above it by default; the sub-nav is
       put there by a script, and with that script blocked the bar never
       appears and the gap would be a strip of text sliding past above the
       phone. It only claims the room once the bar is actually in it, which
       happens far higher up the page than this chapter, so the phone is never
       pinned at the moment the value changes. */
    --stage-top: 0px;
  }
  body:has(.subnav.is-shown) .walk-scroll { --stage-top: 62px; }

  /* Both children are put in the same grid cell, so the stage's containing
     block is the whole track instead of its own height. Without this a sticky
     item in a single-column grid has nowhere to travel and simply never
     pins, which is the trap this layout exists inside of. */
  .walk-scroll .track > .stage,
  .walk-scroll .track > .beats-col { grid-column: 1; grid-row: 1; }

  .walk-scroll .stage {
    display: grid;
    place-items: center;
    position: sticky;
    top: var(--stage-top);
    /* A stretched grid item is exactly as tall as its area and therefore has
       no room to move either. */
    align-self: start;
    height: var(--stage-h);
    z-index: 2;
    /* Opaque on purpose: the words pass behind it, not beside it. */
    background: var(--bg-1);
  }

  /* They do not vanish at a hard edge, though. The last centimetre of their
     travel is a fade, so a sentence leaves the way it arrived. */
  .walk-scroll .stage::after {
    content: "";
    position: absolute;
    inset: 100% 0 auto;
    height: 44px;
    background: linear-gradient(var(--bg-1), transparent);
    pointer-events: none;
  }

  /* Sized from the height it has to fit inside, rather than the width it
     would like. The screen is 1206x2622 inside a 9px shell, so this is that
     ratio run backwards, with the vw cap for a wide, short window. */
  .walk-scroll .stage-phone {
    width: min(58vw, calc((var(--stage-h) - 40px) / 2.174 + 18px));
  }

  /* No padding under the last step. A sticky element is released by the
     bottom of its container, so every pixel added here is a pixel of the
     phone hanging over an empty screen after the last sentence has gone. The
     step's own lower half already leaves it about 140px to let go in. */
  .walk-scroll .beats-col {
    padding-top: var(--stage-h);
    padding-bottom: 0;
  }
  .walk-scroll .walk-step {
    min-height: 62svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0.28;
    transition: opacity 0.4s ease;
  }
  .walk-scroll .walk-step.is-active { opacity: 1; }
  .walk-scroll .walk-step .phone { display: none; }
}

/* Reduced data replaces every screenshot with a hatched box carrying the
   caption the picture would have had. Five of those, each with its own step's
   caption, tell a reader more than one pinned box repeating the chapter
   heading, so this layout stands down and the printed sequence comes back. */
@media (max-width: 939px) and (prefers-reduced-data: reduce) {
  .walk-scroll .stage { display: none; }
  .walk-scroll .beats-col { padding-top: 0; padding-bottom: 0; }
  .walk-scroll .walk-step { min-height: 0; display: block; opacity: 1; }
  .walk-scroll .walk-step .phone { display: block; }
}

.stage-phone {
  width: 340px;
  transform-style: preserve-3d;
  will-change: transform;
  transform:
    perspective(1600px)
    rotateY(var(--ry, 0deg))
    rotateX(var(--rx, 0deg))
    translate3d(0, var(--ty, 0px), 0)
    scale(var(--sc, 1));
}
.stage-phone .phone { max-width: none; }
.stage-phone .phone-screen img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.stage-phone .phone-screen img.is-shown { opacity: 1; }

/* Nothing carries `is-shown` until the script picks a screen, and a stage that
   is laid out but undriven is an empty black rectangle where the phone should
   be. Two ways to reach that: the script is blocked, or the stylesheet has
   switched layouts and the script has not caught up yet, which is what a
   rotation between the two sticky layouts does.

   So the condition is the state itself, not a guess at the cause: if no screen
   is showing, show the first one. The moment one is picked this stops
   matching, and it never fights the script for control. */
.stage-phone .phone-screen:not(:has(img.is-shown)) picture:first-child img { opacity: 1; }

/* ---------- the playable risk checker ---------- */

.demo { display: grid; gap: 24px; }
@media (min-width: 900px) { .demo { grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; } }

.demo-picker { display: flex; flex-wrap: wrap; gap: 9px; }
.demo-chip {
  font: inherit;
  font-size: 0.95rem;
  font-weight: 650;
  padding: 10px 17px;
  border-radius: 999px;
  border: 1px solid var(--line-hi);
  background: var(--surface);
  color: var(--text-soft);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.demo-chip:hover { background: var(--surface-hi); color: var(--text); }
.demo-chip[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--btn-a), var(--btn-b));
  border-color: transparent;
  color: var(--on-primary);
  transform: translateY(-1px);
}
.demo-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; align-items: center; }

.demo-out { min-height: 210px; }
.verdict {
  border-radius: 22px;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 20px 22px;
  margin-bottom: 12px;
}
.verdict + .verdict { margin-top: 0; }
.verdict .tag {
  display: inline-block;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: 0.2px;
  margin-bottom: 11px;
  color: #fff;
}
.verdict p { margin: 0; max-width: none; color: var(--text-soft); font-size: 1rem; }
.verdict--critical { border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: color-mix(in srgb, var(--danger) 9%, transparent); }
.verdict--critical .tag { background: var(--danger); }
.verdict--serious  { border-color: color-mix(in srgb, var(--amber) 45%, transparent); background: color-mix(in srgb, var(--amber) 9%, transparent); }
.verdict--serious .tag { background: var(--amber); color: #2a1c00; }
.verdict--caution  { border-color: color-mix(in srgb, var(--primary) 38%, transparent); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.verdict--caution .tag { background: var(--primary); color: #0b1022; }
.verdict--none .tag { background: var(--surface-hi); color: var(--text-soft); }
.verdict--empty { border-style: dashed; color: var(--text-dim); }
.verdict--empty p { color: var(--text-dim); }

/* ---------- exhibition tweaks to shared components ---------- */

.exhibition .beats { gap: clamp(16px, 2vw, 26px); }
.exhibition .beat { background: var(--surface); border-color: var(--line); border-radius: 24px; padding: clamp(22px, 2.6vw, 32px); }

/* The demo took the room the feature grid gave up. */
@media (min-width: 900px) {
  .demo--wide { grid-template-columns: 0.85fr 1.15fr; gap: 52px; }
}
.demo--wide .demo-out { min-height: 280px; }
.demo--wide .verdict p { font-size: 1.05rem; }

/* ---------- demo: medication, timing, standing checks ---------- */

.demo-input {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--line-hi);
  background: var(--surface-hi);
  color: var(--text);
}
.demo-input::placeholder { color: var(--text-dim); }

.meds-out { margin: 8px 0 0; font-size: 0.92rem; color: var(--text-dim); min-height: 1.4em; }
.meds-out.is-hit { color: var(--amber); font-weight: 650; }

.assessments { display: grid; gap: 9px; margin-top: 14px; }
.assess {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 13px 15px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.assess b { display: block; color: var(--text); font-size: 0.98rem; }
.assess span:last-child { color: var(--text-dim); font-size: 0.9rem; }
.assess-tag {
  flex: none;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 750;
  white-space: nowrap;
}
.assess--lower .assess-tag { background: color-mix(in srgb, var(--mint) 20%, transparent); color: var(--mint); }
.assess--caution .assess-tag { background: color-mix(in srgb, var(--amber) 22%, transparent); color: var(--amber); }
.assess--high .assess-tag { background: var(--danger); color: #fff; }
.assess--high { border-color: color-mix(in srgb, var(--danger) 38%, transparent); }

/* Printing a combination is a way to hand it to someone. */
@media print {
  .demo-picker, .demo-actions, .demo-input, .subnav { display: none !important; }
  .demo { display: block !important; }
  .verdict, .assess { break-inside: avoid; border: 1px solid #999 !important; background: none !important; }
}

/* ---------- the static combination table ----------

   The interactive checker sits above this; the table is what a crawler, a
   reader with JavaScript off, and anyone who just wants to scan all thirty at
   once actually gets. Worst first, because that is the order they matter in. */
.combos { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.combos caption { text-align: left; color: var(--text-dim); font-size: 0.84rem; padding-bottom: 12px; }
.combos th, .combos td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); }
.combos thead th { color: var(--text-dim); font-size: 0.78rem; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 650; }
.combos tbody th { color: var(--text); font-weight: 680; white-space: nowrap; }
.combos td:last-child { color: var(--text-soft); min-width: 24ch; }

.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 650; white-space: nowrap; }
.pill--critical { background: rgba(255, 105, 120, 0.16); color: #ff9aa6; }
.pill--serious  { background: rgba(255, 176, 80, 0.16);  color: #ffc07a; }
.pill--caution  { background: rgba(111, 227, 180, 0.14); color: #8fe6c2; }

.med-groups { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 10px; }
.med-groups li { display: grid; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.med-groups b { color: var(--text); font-weight: 680; }
.med-groups span { color: var(--text-dim); font-size: 0.88rem; }
@media (min-width: 760px) {
  .med-groups { grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 3vw, 48px); }
  .med-groups li { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); align-items: baseline; }
}