/* PlantPOP — plant care page.
   The view that opens when you tap a stake, so it is a full-bleed stack of
   alternating panels rather than the home page's floating cards: photo → cream
   → forest → warm closer, edge to edge.

   Every colour, size and radius resolves to a token. There are no raw hex
   values in this file.

   The four product requirements this page has to meet, and where each is held:

   1. Body copy is 18px minimum. --size-care-body, used by every prose rule
      below. These pages get read on a phone, outdoors, in bright sun.
   2. Body copy is --pp-ink on --pp-page, 11.4:1. --pp-ink-soft is 5.8:1 and is
      confined to UI chrome — the accordion glyph and nothing else.
   3. Colour never carries meaning alone, which on this palette is not a
      caution but the mechanism: there is no alert hue left to lean on. The
      signal rows carry a glyph, the care scale distinguishes filled from empty
      by shape, and the one urgent flag is stated in words on an ink ground.
   4. Every interactive element has a visible focus state — see § Focus.

   Rank, before colour. Every section names one primary and builds the rest to
   lose to it:

     hero      the plant's name and its voice line  · light chip, photo second
                                                    · botanical name, traits,
                                                      badge third
     care      the four answers                     · the metric labels second
                                                    · discs and scales third
     fact      the one-line fact                    · the paragraph second
     signals   the three symptoms                   · the answers second
                                                    · glyphs, +/− marks third
     closer    the heading and Add to cart          · the line under it second

   Above the phone width every block on the page lines up on one spine — the
   reading measure. The care grid and the fact card used to spend the extra
   room the shell gave them while the signals held the measure, so the page had
   three right edges and never settled.

   Repointed onto the colour system locked 20 Aug 2026 — see COLOR-SYSTEM.md.
   Devices spent on this page, so the rules stay countable:
   - Exactly one tint field on the page: the hero photo band, which declares
     the plant's light level and is named in words beside it. Every other card
     is white or the page ground, so no field on a care page can be mistaken
     for a light claim.
   - Two deep green bands, one in each half of the page — care at a glance and
     read the room — with the light sections between and around them, so the
     page alternates rather than running light for three sections and then
     turning green for the rest (COLOR-SYSTEM A7). Two green grounds never
     touch: the wave carries the colour across each join.
   - Green and pink arrive together and arrive early: the hero sticker is the
     pink fill with an ink label, the light chip under the title is the ink
     fill with a cream label, and every green ground carries its pink — the
     band eyebrows, and the marker on each signal row.
   - The functional trio (skip / check / likely) is not on this page. It
     belongs to the watering rows on plants/*.html.
   - Saturation, by rank (COLOR-SYSTEM A12): the page ground and the hero tint
     are GROUND, the two green bands are the one MASS value, and pink appears
     only as a MARK — the hero sticker and the eyebrows. The clay dot in the
     light chip and the lollipop's head are the page's only DOT-rank values;
     both depict the stake, which is what licenses clay on screen at all (A5).
   - No dividing rules. The dashed rule inside the care card is gone; the gap
     it sat in the middle of is what separates the rating from the answer.
   - Shadow: --shadow-sm at rest, --shadow-md on the accordions on hover.
   - Motion: hover lifts and a staggered scroll reveal, both inside a
     prefers-reduced-motion guard. */

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-subtle);
  font-family: var(--pp-font-body);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }

/* ── Shell ─────────────────────────────────────────────────────────────────
   390px is the width the plant page was designed at. The shell stops at 430
   so the page still reads as the phone view it is; the ground around it is
   what the tap view sits on when it is opened on anything larger. */

.pp-page { min-height: 100vh; }

.pp-shell {
  max-width: 430px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--surface-background);
  color: var(--text-primary);
}

/* ── Panels ──────────────────────────────────────────────────────────────
   Section padding is 44px on mobile, 60px on desktop. */

.pp-panel {
  position: relative;
  overflow: hidden;
  padding: var(--pp-panel-y) var(--pp-gutter);
}

.pp-panel--cream { background: var(--surface-background); }

/* The one full-bleed dark section. Class name kept; the ground is now forest —
   the new system has no saturated teal panel. */
/* The brief gives a panel --radius-lg. Not applied here: this one is full-bleed
   inside the shell and its top edge is already the wave, which covers the top
   30px — the rounding would fall entirely behind it. */
.pp-panel--teal {
  background: var(--surface-brand);
  color: var(--text-inverse);
}

/* The closer band. It ran on the warm tint until the pivot; on a care page a
   tint reads as a light level, so the buy band is white and the hero photo
   keeps the page's only tint. */
.pp-panel--butter { background: var(--surface); }

/* Sections that follow another cream panel keep their own bottom rhythm but
   drop the doubled top padding. */
.pp-panel--flush { padding-top: 0; }

/* The reading measure — and, above the phone width, the page's only content
   edge. The grid sections used to be free to spend the extra room, which meant
   the care grid ran to 695px, the fact card to 695px and the signals to 620px:
   three different right edges down one narrow column, so the page never
   settled on a spine. Everything lines up on the measure now. */
.pp-panel__measure {
  position: relative;
  z-index: 2;
  max-width: var(--measure-care);
}

/* A band is a panel plus the wave that separates it from the field above. The
   wave is filled with the colour of the section above it, never over a photo. */
.pp-band { position: relative; }

.pp-wave {
  position: absolute;
  top: -1px;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 30px;
}

.pp-band .pp-panel { padding-top: var(--space-8); }

/* ── Hero ──────────────────────────────────────────────────────────────── */

.pp-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 190px;
  background: var(--surface-subtle);
}

/* The photo band IS this page's light-level declaration — cool tint = shade,
   warm tint = sun — and the chip below the title says which in words. The
   stake in the box is the matching clay. */
.pp-media--low    { background: var(--field-light-low); }
.pp-media--medium { background: var(--field-light-medium); }
.pp-media--bright { background: var(--field-light-bright); }

.pp-media__hatch {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* The placeholder label — the quietest tier in the repo, naming art that does
   not exist yet. components.css sets .pp-card__placeholder for the same job and
   its comment says the two are the same setting; they were not. This one ran at
   the eyebrow step under 0.04em of tracking — a sixth tracking value, on no rung
   of the ladder the other five sit on — while the card's ran at the caption step
   with none. Caption and untracked, which is what the card already does. */
.pp-media__label {
  position: relative;
  font-size: var(--size-caption);
  color: var(--text-secondary);
}

/* The floating badge on the placeholder. The badge itself is the shared
   .pp-sticker (components.css); this page says where it floats and the markup
   names the pink fill it takes — 6.2:1, the pairing the accent button uses,
   and the page's pink in its first screen. */
.pp-media .pp-sticker {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
}

.pp-intro { padding: var(--space-4) var(--pp-gutter) var(--space-6); }

/* Light level in words, directly under the title, so the tint above is never
   the only thing declaring it. Required on every plant page. */
/* The declaration is a green chip rather than a muted line: it is the one
   fixed statement in the introduction, and it is where the green enters the
   top of the page. Cream on ink, 10.9:1.

   Sized down from 14px in a wide pill to a caption in a tight one. The chip
   was the same visual weight as the title above it and wrapped to two lines on
   a phone, so the first thing the eye landed on in the introduction was the
   light declaration rather than the plant's name. It stays deep green — this
   is still where green enters the top of the page (COLOR-SYSTEM A7) — it just
   stops competing for first read. */
.pp-light {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--size-caption);
  font-weight: var(--pp-weight-body-bold);
  letter-spacing: var(--pp-ls-button);
  line-height: var(--pp-lh-tight);
  text-transform: uppercase;
  color: var(--text-inverse);
  background: var(--surface-brand);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  margin-top: var(--space-3);
}

/* The clay this plant's stake ships in — the physical half of the same
   encoding. A swatch depicts the product, which is the one screen use clay
   has; it is never a field or a type colour. */
/* The hairline is the cream alpha here: an ink alpha on the green chip is
   invisible, and the cream clay needs an edge to read as a swatch at all. */
.pp-light__clay {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--border-on-brand);
}

.pp-light--low .pp-light__clay    { background: var(--stake-light-low); }
.pp-light--medium .pp-light__clay { background: var(--stake-light-medium); }
.pp-light--bright .pp-light__clay { background: var(--stake-light-bright); }

/* ── The lollipop ──────────────────────────────────────────────────────────
   The corner mark on the introduction, across from "meet your plant". It was
   a three-stroke spark: generic decoration that said sparkle rather than
   PlantPOP. A stake is a clay disc on a stick, which is a lollipop, which is
   the thing the brand is named after — so the mark is the product now.

   The head is the clay this plant's stake ships in, which is A5's one licensed
   screen use of clay: a drawing depicting the stake you receive. It takes the
   same --low / --medium / --bright modifier the light chip takes, so the two
   cannot disagree. Ring, swirl and stick are ink — cream clay is 1.03:1 on
   this panel and the outline is what makes the disc a disc. */

.pp-lolly {
  position: absolute;
  top: var(--space-3);
  right: var(--pp-gutter);
}

.pp-lolly__stick,
.pp-lolly__swirl {
  fill: none;
  stroke: var(--pp-ink);
}

.pp-lolly__head { stroke: var(--pp-ink); }

.pp-lolly--low .pp-lolly__head    { fill: var(--stake-light-low); }
.pp-lolly--medium .pp-lolly__head { fill: var(--stake-light-medium); }
.pp-lolly--bright .pp-lolly__head { fill: var(--stake-light-bright); }

/* ── Type ──────────────────────────────────────────────────────────────────
   Headings are always forest, never pure black. The care-page h1 is a sentence
   rather than a label — the plant is talking — so the scale has to hold a
   6–10 word line, which is what the clamp is for. */

.pp-display {
  font-family: var(--pp-font-display);
  font-weight: var(--pp-weight-display);
  font-size: var(--size-h1);
  line-height: var(--pp-lh-display);
  letter-spacing: var(--pp-ls-display-xl);
  color: var(--text-primary);
  margin-top: var(--space-4);
}

/* The closer carries the one action on the page, so its line is not an
   ordinary h2 — it steps up towards the title and back down from it. */
.pp-display--closer {
  font-size: clamp(var(--size-h2), 8vw, 2.75rem);
  letter-spacing: var(--pp-ls-display);
  margin-top: 0;
}

/* A heading that follows an eyebrow takes the gap the eyebrow does not carry.
   The closer's heading zeroes its own top margin, so it needs this by name. */
.pp-eyebrow + .pp-display--closer { margin-top: var(--space-3); }

/* The scribble tracks the title it sits under. It was a fixed 150px, drawn
   when the h1 was smaller; at the larger display size it stopped short of the
   word and read as a misplaced rule rather than an underline. */
.pp-underline {
  display: block;
  width: clamp(150px, 45vw, 230px);
  height: auto;
  margin-top: 2px;
}

.pp-heading {
  font-family: var(--pp-font-display);
  font-weight: var(--pp-weight-display);
  font-size: var(--size-h2);
  line-height: var(--pp-lh-heading);
  letter-spacing: var(--pp-ls-heading);
  color: var(--text-primary);
}

.pp-heading--stacked { margin-bottom: var(--space-4); }

/* A heading that follows an eyebrow needs the gap the eyebrow does not carry —
   the same rule home.css states, and the same step, so a section head has one
   rhythm across the two templates.

   Without it the care band's head ran at zero: "The basics" sat flush on the
   baseline box of "Care at a glance" with nothing between them. It was the only
   head on either page that did, and it was invisible in review because the
   three other heads on this page each got the gap from somewhere else —
   .pp-display's own top margin in the introduction, .pp-fact__line's in the
   fact card, .pp-heading--on-teal's shorthand in the signals band. A plain
   .pp-heading was the one case nothing covered.

   Declared before --on-teal so that modifier's margin shorthand still wins;
   the two agree on the top step anyway. */
.pp-eyebrow + .pp-heading { margin-top: var(--space-3); }

/* The underline on a green band. Pink at 6.2:1, and it carries the gap the
   heading's --stacked modifier used to, so the head of the band keeps its
   rhythm with the mark in it rather than under it. */
.pp-underline--on-teal { margin-bottom: var(--space-4); }

/* Any heading on a green band is cream. --on-teal below adds the signals
   band's own measure and rhythm on top of that. */
.pp-panel--teal .pp-heading { color: var(--text-inverse); }

.pp-heading--on-teal {
  color: var(--text-inverse);
  max-width: 15ch;
  margin: var(--space-3) 0 var(--space-4);
}

/* Every section opens with a small uppercase muted eyebrow above its heading.
   This is the main rhythm device of the system. */
.pp-eyebrow {
  font-size: var(--size-eyebrow);
  font-weight: var(--pp-weight-body-bold);
  letter-spacing: var(--pp-ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Green carries two type colours and this is the second: pink at 6.2:1, the
   one ground pink is legal on. Body on the panel stays cream. */
.pp-eyebrow--on-teal { color: var(--text-inverse-accent); }

/* Botanical name: italic, sentence case. It ran at the 18px floor in full ink,
   which made the two words directly under the title as loud as the sentence
   that actually introduces the plant. A species name is a label, not care
   prose — the floor governs copy you read outdoors, not the caption on the
   title — so it takes the tag size and the secondary tone and gets out of the
   way of the voice line below it. */
.pp-latin {
  font-size: var(--size-tag);
  line-height: var(--pp-lh-tight);
  font-style: italic;
  color: var(--text-secondary);
  margin-top: var(--space-1);
}

/* Plant voice — first person, and only on this page. This is the one sentence
   the page exists to deliver, so it takes the lede step: the level between the
   title and body copy that the scale did not have before. Everything under it
   — the trait tags, the metric cards — is now demonstrably smaller than it. */
.pp-voice {
  font-size: var(--size-lede);
  line-height: var(--pp-lh-body);
  color: var(--text-primary);
  max-width: 34ch;
  margin-top: var(--space-4);
}

/* The 25ch cap this rule used to carry was tuned for 15px on a 390px phone; at
   18px it produces a ~225px ribbon. The measure now governs instead. */
.pp-body {
  font-size: var(--size-care-body);
  line-height: var(--pp-lh-body);
  color: var(--text-primary);
  max-width: 36ch;
  margin: var(--space-3) 0 var(--space-5);
}

/* ── The trait row ─────────────────────────────────────────────────────────
   Care traits are tags, not care prose: three fragments that support the voice
   line above them. At the 18px floor they were the same size as that sentence
   and heavier than it, which made the bottom of the introduction louder than
   the top. They take the shared .pp-pill (components.css), which sits at
   --size-tag — the step the typography file scopes to exactly this job — and
   they still wrap rather than shrink. The one that warns you takes
   .pp-pill--flag and the ink fill.

   This row is the page's, because the rhythm above it is. */

.pp-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* ── Care at a glance ──────────────────────────────────────────────────── */

/* On the measure, like everything else on the page. Below the phone width the
   shell is narrower than the measure and this does nothing. */
.pp-care {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pp-gap-card);
  max-width: var(--measure-care);
}

/* The card is a two-column grid so the disc can share the label's line
   instead of owning the first line of the card by itself. Markup order is
   untouched — disc, metric, answer — so the reading order is the same one a
   screen reader gets. Everything below the label spans both columns. */
.pp-care__card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  align-content: start;
  column-gap: var(--space-2);
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4) var(--space-4) var(--space-5);
}

.pp-care__card > .pp-care__disc { grid-column: 1; grid-row: 1; }
.pp-care__card > .pp-care__title { grid-column: 2; grid-row: 1; }
.pp-care__card > .pp-care__note,
.pp-care__card > .pp-scale,
.pp-care__card > .pp-care__flag { grid-column: 1 / -1; }
.pp-care__card > .pp-care__flag { justify-self: start; }

/* The flag card used to take a 5px ink border on its left edge, inherited from
   the old system where that border was an accent hue. Under this palette it is
   ink on a card sitting on an ink panel: the border does not render at all, it
   just eats five pixels off that one card and walks it out of the grid, so the
   second row of the care grid no longer lined up with the first.

   Nothing replaces it. The flag pill below — ink fill, cream type, the word —
   is already the loudest thing in the grid, and a border repeating it would be
   the same signal twice. */

/* Ring and dot — the system's stand-in until the hand-drawn icon set exists.
   These stay decorative: each card already names its metric in the title above,
   so the disc is not carrying meaning that the colour would have to hold alone.

   One field across all four. Four different tints on four cards of a care page
   would read as a light scale, which is the one thing a tint means here.

   It was 34px and sat alone on the first line of every card, which handed the
   most prominent position in the card to the one element carrying no
   information. It is 24px now and rides on the label's line, so the first
   thing read in a card is what the card is about. */
.pp-care__disc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface-subtle);
}

.pp-care__disc::after {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.pp-care__disc::after { background: var(--pp-ink); }

/* Label and answer, the right way round.

   The card used to set its metric name in 16.8px display and its answer in
   18px body — the label physically larger in weight, the answer larger in
   size, and both in full ink at the same tone. Nothing led, so all four cards
   read as one grey block and "Bright, indirect" — the thing you opened the
   page for — had to be hunted for.

   Now the metric name is chrome: a small tracked uppercase label in the
   secondary tone, the same device the eyebrows use. The answer takes the
   display face at --size-h4, which the scale now puts above the 18px body. The
   answer is the biggest, darkest thing in the card. */
.pp-care__title {
  font-family: var(--pp-font-body);
  font-weight: var(--pp-weight-body-bold);
  font-size: var(--size-body-s);
  line-height: var(--pp-lh-tight);
  letter-spacing: var(--pp-ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.pp-care__note {
  text-wrap: balance;
  font-family: var(--pp-font-display);
  font-weight: var(--pp-weight-display-soft);
  font-size: var(--size-h4);
  line-height: var(--pp-lh-heading);
  letter-spacing: var(--pp-ls-heading);
  color: var(--text-primary);
  margin-top: var(--space-2);
}

/* The flag is the loudest thing on the page, and it is loud by weight rather
   than by hue: ink fill, cream type, and the word still there.

   nowrap because a pill that breaks across two lines stops reading as a pill —
   the same rule the eyebrow chip was held to. In a half-width card on a phone
   "Mildly toxic" was wrapping, which turned the page's one urgency flag into a
   lumpy two-line slab. */
.pp-care__flag {
  display: inline-block;
  font-size: var(--size-caption);
  font-weight: var(--pp-weight-body-bold);
  letter-spacing: var(--pp-ls-button);
  line-height: var(--pp-lh-tight);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-inverse);
  background: var(--surface-brand);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  margin-top: var(--space-4);
}

/* Five-dot scale. A step of whitespace separates it from the note above —
   it was a dashed rule, which drew a line inside a card whose two halves are
   already a heading and a rating and need no help telling each other apart.
   The gap is the same 32px the rule and its two paddings added up to, so the
   card's rhythm is unchanged and one less mark is doing the work. Filled dots
   are discs, empty dots are rings, so the rating survives without colour
   vision.

   The dots went up two pixels and the ring went to a full 2px: at 11px with a
   1.5px hairline the difference between "on" and "off" was the finest
   distinction on the page, sitting at the foot of the card where the eye
   arrives last and least attentively. */
.pp-scale {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-5);
}

.pp-scale__dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--scale-dot-off);
}

/* Filled is a disc, empty is a ring. That was already the mechanism; with one
   ink fill behind every scale it is now the only mechanism, which is why the
   per-metric colour classes have nothing left to resolve to. */
.pp-scale__dot.is-on { background: var(--scale-dot-on); box-shadow: none; }

/* ── Feel-good fact ────────────────────────────────────────────────────────
   A white card on the page ground, held by the hairline. It used to sit on the
   olive tint — the old palette's good news — and there is no good-news hue in
   this one. */

.pp-fact {
  max-width: var(--measure-care);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4) var(--space-6);
}

.pp-fact__line {
  font-family: var(--pp-font-display);
  font-weight: var(--pp-weight-display);
  font-size: var(--size-h3);
  line-height: var(--pp-lh-heading);
  letter-spacing: var(--pp-ls-heading);
  color: var(--text-primary);
  margin-top: var(--space-3);
}

.pp-fact__body {
  font-size: var(--size-care-body);
  line-height: var(--pp-lh-body);
  color: var(--text-primary);
  margin-top: var(--space-3);
}

/* The eyebrow inside the fact card is the quietest label on the page, so it
   keeps its distance from the line it introduces rather than crowding it. */
.pp-fact .pp-eyebrow { display: block; margin-bottom: var(--space-1); }

/* ── Read the room ─────────────────────────────────────────────────────────
   Real accordions: <details> rows, so the symptom answers itself with no
   JavaScript. Closed, the row is a white card on the forest panel — the same
   card stock as the care grid two bands up.

   It was --surface-background, the page ground, which made this the one card
   in the repo not drawn on --surface. On the green band the two are a point
   apart and nobody could see the difference, which is exactly why it survived:
   a second card surface that costs nothing to look at still costs the system
   its one answer to "what is a card". */

.pp-signals {
  display: flex;
  flex-direction: column;
  gap: var(--pp-gap-stack);
}

.pp-signal {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--motion-hover), transform var(--motion-hover);
}

.pp-signal:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(var(--lift-hover));
}

.pp-signal__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--pp-hit-comfort);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  list-style: none;
}

.pp-signal__head::-webkit-details-marker { display: none; }

/* Severity marker. The glyph states the urgency on its own now — there are no
   three hues left to say it first — on one ink disc across all three rows. The
   span is aria-hidden: the glyph is drawn by CSS and adds nothing to the
   accessible name, and the label beside it already reads the symptom out. */
.pp-signal__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: var(--size-caption);
  font-weight: var(--pp-weight-body-bold);
  line-height: 1;
  background: var(--surface-brand);
  color: var(--text-inverse);
}

.pp-signal__dot--sky::after { content: "\0021"; }      /* ! — act now */
.pp-signal__dot--yellow::after { content: "\003F"; }   /* ? — easy fix */
.pp-signal__dot--seafoam::after { content: "\2713"; }  /* ✓ — nothing wrong */

.pp-signal__label {
  flex: 1;
  font-size: var(--size-care-body);
  line-height: var(--pp-lh-body);
  font-weight: var(--pp-weight-body-bold);
  color: var(--text-primary);
}

/* The open/closed glyph. UI chrome, not copy — the one place --pp-ink-soft
   appears on this page, at 5.9:1 on the card it sits on. It was written as a
   bare 20px, the last raw type size in any stylesheet here; --size-lede is that
   size and answers the reader's text setting, which a px never does. */
.pp-signal__mark {
  font-size: var(--size-lede);
  line-height: 1;
  color: var(--text-secondary);
}

.pp-signal__mark::after { content: "+"; }
.pp-signal[open] .pp-signal__mark::after { content: "\2212"; }

.pp-signal__body {
  font-size: var(--size-care-body);
  line-height: var(--pp-lh-body);
  color: var(--text-primary);
  padding: 0 var(--space-4) var(--space-4);
  margin-left: 38px; /* aligns the answer with its label past the marker */
}

/* ── The one action on the page ──────────────────────────────────────────
   The button is components.css: pill, uppercase 14px label, lifting 2px onto
   the deeper shadow. Nothing about it is declared here any more.

   The closer takes --chunky and --block, so it is the tall pill at full width.
   It used to reach that height through .pp-btn--primary, which meant primary
   was 52px on the home page and 60px here — one class, two buttons — and it
   also rested on --shadow-md, which made its own hover shadow a no-op: the
   deeper shadow was already there, so hovering only moved it. It lifts onto
   that shadow now, like every other button in the system. Against an ink fill
   on a butter panel there was nothing for the resting shadow to separate. */

/* ── Leaf blobs — decoration bleeding off a panel corner ───────────────────
   The pair's geometry is components.css, where it now sits once rather than
   once per page stylesheet. What is left here is the corner each pair bleeds
   from and the fill it takes: one step off whatever ground that is — a lighter
   green on the dark panel, a tint field on the white closer. */

.pp-blobs--teal {
  right: -40px;
  top: 56px;
}

.pp-blobs--cool {
  right: -38px;
  bottom: -40px;
}

.pp-blobs--teal .pp-blobs__a,
.pp-blobs--teal .pp-blobs__b { background: var(--surface-brand-elevated); }
.pp-blobs--cool .pp-blobs__a,
.pp-blobs--cool .pp-blobs__b { background: var(--surface-subtle); }

/* ── Focus ─────────────────────────────────────────────────────────────────
   Every interactive element keeps a visible focus state.

   The ring is 3px ink at 3px offset, with a page-coloured halo one pixel
   outside it. Ink is 11.4:1 on the page and 9.8:1 on the tint field, so the
   ring carries itself; the halo is what keeps it legible where the ring lands
   on a dark or busy edge. Check-amber was the old ring colour and is a
   watering-zone colour now — an amber ring would fire that signal on every
   tab press. */

a:focus-visible,
button:focus-visible,
summary:focus-visible,
details:focus-visible,
[tabindex]:focus-visible {
  outline: var(--state-focus-width) solid var(--state-focus-ring);
  outline-offset: var(--state-focus-offset);
  box-shadow: 0 0 0 calc(var(--state-focus-offset) + var(--state-focus-width) + 1px)
    var(--state-focus-halo);
}

/* The ink ring is invisible against the green panel, so on that ground it
   flips to cream and drops the halo — the panel is the contrast. */
.pp-panel--teal a:focus-visible,
.pp-panel--teal button:focus-visible,
.pp-panel--teal summary:focus-visible,
.pp-panel--teal [tabindex]:focus-visible {
  outline-color: var(--state-focus-ring-on-brand);
  box-shadow: none;
}

/* Except inside the accordion rows, which are light cards sitting on that
   panel — there the ink ring and its halo are correct again. */
.pp-panel--teal .pp-signal a:focus-visible,
.pp-panel--teal .pp-signal summary:focus-visible,
.pp-panel--teal .pp-signal [tabindex]:focus-visible {
  outline-color: var(--state-focus-ring);
  box-shadow: 0 0 0 calc(var(--state-focus-offset) + var(--state-focus-width) + 1px)
    var(--state-focus-halo);
}

/* ── Scroll reveal ─────────────────────────────────────────────────────────
   Sections rise 16px as they arrive, staggered.

   The hidden state is scoped to .js-reveal, which only assets/js/reveal.js
   sets. With JavaScript off or blocked the class never lands and every section
   renders normally — nothing on this page is ever hidden behind a script. */

[data-reveal] {
  transition: opacity var(--motion-reveal), transform var(--motion-reveal);
}

.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(var(--motion-reveal-shift));
}

.js-reveal [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* ── Wider than the phone ──────────────────────────────────────────────────
   The tap view is a phone view first. Above 760px the shell widens, the photo
   sits beside the introduction and the care grid goes four across. Nothing
   changes but the arrangement: the type scale, the colour fields and the radii
   are the same tokens at every width. */

@media (min-width: 760px) {
  .pp-shell { max-width: 760px; }

  .pp-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }

  .pp-media { height: 100%; min-height: 320px; }

  .pp-intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--pp-panel-y) var(--space-6);
  }

  .pp-lolly { right: var(--space-6); }

  .pp-panel { padding: var(--pp-panel-y-wide) var(--space-6); }

  /* The photo column ends level with the introduction, so the section below it
     needs its own top rhythm back — on the phone the introduction's own bottom
     padding was doing that job. */
  .pp-panel--flush { padding-top: var(--space-6); }
  .pp-band .pp-panel { padding-top: var(--space-8); }

  /* The care grid stays two across. It went four across when the note under
     each title was 13.5px; at the 18px floor four columns inside this shell
     leave ~133px of text width, which wraps "Bright, indirect" to three lines.
     Two columns is what the larger type will hold. */
  .pp-care { grid-template-columns: repeat(2, 1fr); }

  /* Buttons stop being full-bleed once there is room beside them. */
  .pp-btn--block {
    display: inline-flex;
    width: auto;
    padding: 0 var(--space-6);
  }
}