/* weave care route stylesheet. Wave 4 / Wave 0 lane A, 2026-09-03.
   Loads AFTER css/tokens.css. Linked from no page yet: Wave 1 links it.

   The content-shape system: on a care page every section carries its copy in
   one of a small set of shapes chosen by what the content IS. The shape table
   and the reason this file exists are in DESIGN.md section 11 and are not
   repeated here. Ledger L34.

   MIGRATION RULE (binding, and the reason this file has no page prefixes).
   A page in a wave drops its inline component block and links this file in the
   SAME commit. A page not yet in a wave keeps its inline block untouched. A
   page never carries both. Nothing here is written to win a specificity fight,
   because by the time a page links this file it has no competing block left.
   If you reach for !important or a page prefix here, the page has not been
   migrated and the fix is the migration, not the selector.

   FLOORS. Every size here is 16px or more (rule 41); targets are 44px (rule
   42). Fills use theme tokens so dark comes for free; the one fixed fill
   declares its dark value at section 13 (L15, L16). Nothing dashed, nothing
   dotted, no left-stripe tinted box, white page ground.
   ========================================================================= */

/* ------------------------------------------------------------ 1. the grids
   One definition for the 7fr 5fr editorial split, under every name the tree
   already uses for it. The gap is the shipped clamp, unchanged. */
.hero-grid,
.split,
.editorial-row,
.copy-grid,
.doorbell,
.practical-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}

/* Alternating rows flip the weight. From the powai block. */
.editorial-row:nth-of-type(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }

/* .copy-grid is a MIGRATION-ONLY shape: the 7fr 5fr split under a second name,
   inherited from the assessment donor. The balance gate flags any section using
   it, because two names for one grid is how a vocabulary rots. New sections use
   .split or .editorial-row; retire .copy-grid with the last sibling rebuild. */
.copy-grid,
.practical-grid { align-items: start; }

/* The assessment shape: prose column plus a fixed art rail. A proportional
   split put the text column at 41 characters, under the 60 to 72 window, so the
   rail is fixed and the copy takes what is left. The modifier exists because one
   class name must not mean two grids. */
.practical-grid--rail {
  grid-template-columns: minmax(0, 1fr) 18rem;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: center;
}

/* --------------------------------------------------------- 2. ledger rows
   Facts with a label. The label floor is 9rem, up from the shipped 7rem: at
   7rem "Psychiatrist" broke mid-word and shipped as "Psychiatri st". The three
   wrap properties are deliberate belt and braces, because the inherited
   overflow-wrap:break-word on body is what allowed the break. */
.practical-list { display: grid; gap: 0; }
.practical-list article {
  display: grid;
  grid-template-columns: minmax(9rem, 3fr) minmax(0, 9fr);
  gap: var(--space-5);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--hairline);
}
.practical-list article:first-of-type { border-top: 1px solid var(--hairline); }
.practical-list h3 {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: 0;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}
.practical-list p { max-width: 66ch; margin: 0; }
.practical-list p + p { margin-top: var(--space-3); }

/* ------------------------------------------------------- 3. sequences, tiles
   Three or four cards on an equal budget. grid-auto-rows 1fr makes every card
   in a row the same height: ruling D-C, balance and consistency. A short card
   beside a long one is the symmetry complaint itself. */
.steps,
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--space-4);
}
.steps--4,
.card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.step,
.card.detail-card { padding: clamp(1.4rem, 3vw, 2rem); }
.step-number {
  display: block;
  margin-bottom: var(--space-4);
  color: var(--thread-sage);
  font-family: var(--font-data);
  font-size: 1rem;
  font-variant-numeric: tabular-nums lining-nums;
}
.card.detail-card ul { margin-bottom: 0; padding-left: 1.2rem; }
.card.detail-card li + li { margin-top: var(--space-2); }
.card.detail-card p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ 4. the measure
   720px lands between 60 and 72 characters at the body size (rule 41).
   .content-width is the older name for the same thing, kept as an alias so a
   migrating page need not rename its markup in the same commit. */
.reading,
.content-width {
  width: min(720px, 100%);
  max-width: 720px;
  margin-inline: auto;
}

/* AN ELEMENT THAT IS BOTH A SHELL AND A MEASURE KEEPS THE SHELL'S GUTTER.
   tokens.css sets `.shell { width: min(1184px, calc(100% - 3rem)) }` at line
   224 and narrows it to `min(100% - 2rem, 680px)` under 768px at line 639.
   The rule above is equally specific (0,1,0) and later in the cascade, so on
   `div.shell.reading` its `min(720px, 100%)` wins and the gutter is gone below
   720px. Measured at 390 before this rule, on all three pages of this wave:
   the reading shell 390 wide at x=0, its H2 at x=-0.32 and its card at x=0,
   while the plain shell above it sat at x=16, 358 wide. After: 358 wide at
   x=16 on all three, the H2 at x=15.68, the card at x=16, the ribbon row above
   unchanged at x=16. These two rules restore the shell's own width at each of
   its breakpoints; the 720px measure is untouched at 1280, where the block
   stays 720 wide at x=280.

   The pair is NOT new to this wave. Twenty-five pages carry it, twenty-two of
   them already on library-build, and every one of them showed the same x=0.
   Re-measured on the tree rebased onto f68b29d: twenty-four of the twenty-five
   are corrected here, all at x=16 and 358 wide at 390, all at x=280 and 720
   wide at 1280. One page is not. `attention-focus-assessment-mumbai` is the
   frozen Wave 1a donor: it links no care.css and sets `.reading` in its own
   page block at 760px, so it keeps the defect at x=0 and 390 wide, and it is
   its lane's to fix. Reported, not reached from here.

   That count moved with the rebase and the older number is kept deliberately.
   Before Wave 2c and Wave 1b landed, FIVE assessment pages carried their own
   `.reading` and none of them linked this sheet. Wave 1b then gave four of
   them the care.css link and dropped their local override, so a rule written
   against a tree measured at one hour reached four more pages at the next. A
   measured claim in a comment has a timestamp whether or not it is written
   down.

   The 767px companion is not decoration. With the base rule alone the pair
   renders 342 wide at x=24 at 390, which is a gutter, but 8px deeper than
   every other shell on the same page, so the passage would sit visibly inset
   from the ribbon directly above it. It mirrors tokens.css line 639 exactly.

   `.content-width` rides along because it is the documented alias, and L55
   read the same pairing from the other side: `learn.css` line 50 states
   `.content-width { width: min(46rem, 100%) }` for its own route. Specificity
   0,2,0 would outrank that 0,1,0 whatever the load order, which is L39's route
   law inverted. It is inert today but no longer distant, and the rebase is
   what moved it: all SIXTEEN learn pages now link care.css (Wave 2c, f68b29d),
   where before this rebase none did. Both sheets now load together on that
   route, and the one thing still keeping the collision dead is markup: no page
   in the tree puts `.shell` and `.content-width` on one element, learn pages
   included. The moment one does, this rule outranks the route. That is L55's
   own warning arriving one step closer, so the fix is the one L55 named: the
   route states its own value at this specificity, in learn.css, which is not
   this lane's file. Flagged rather than reached across. */
.shell.reading,
.shell.content-width { width: min(720px, calc(100% - 3rem)); }
@media (max-width: 767px) {
  .shell.reading,
  .shell.content-width { width: min(720px, 100% - 2rem); }
}
.short-lines p { max-width: 68ch; line-height: 1.55; }
.short-lines p:last-child { margin-bottom: 0; }

/* PROSE THAT SITS DIRECTLY IN A SHELL still needs a measure.
   .reading and .short-lines cap the copy that was put in a column on purpose.
   The defect is the copy that was not: a paragraph parked straight in .shell
   inherits the shell's 1184px and renders at 117.5ch, which cognitive-gate
   reads as p4_measure_over_75 (rule 41 wants 60 to 72, WCAG 1.4.8 caps at 80).
   Measured before this rule: psychiatrist-kanjurmarg 117.5ch on
   `div.shell.sheet-pad > p.reveal.in`, psychiatrist-mumbai the same shape,
   and `p.narrow` at 75.4ch because .narrow is 760px, not a character count.
   Lane C finding 4; plan symmetry rule 4.

   Scoped to main, deliberately. The footer's own .shell > p is
   p.footer__legal, and it is capped in tokens.css at 70ch with the promise
   line, because the footer is a shared partial that reaches every page in the
   site including the ones that never link this file. Capping it twice, at two
   numbers, in two files, is how a rule stops being readable.

   The :not() list is the shapes that already carry a tighter measure and must
   keep it: .eyebrow is a label with its own box, .pull-line is 60ch by design
   (section 11), .lede is 60ch in tokens.css. Cards, ledgers, the FAQ, chips,
   the pair, the fee frame, the crisis block and the doorbell copy column are
   all outside these selectors already, because none of them is a direct child
   of the shell. */
main .shell > p:not(.eyebrow):not(.pull-line):not(.lede),
main .shell > ul:not([class]),
main .shell > ol:not([class]),
main .shell > .reveal > p:not(.eyebrow):not(.pull-line):not(.lede),
main .shell > .reveal > ul:not([class]),
main .shell > .reveal > ol:not([class]),
main .section-head > p:not(.eyebrow) { max-width: 68ch; }

/* The honesty artifact, centred in the reading column. */
.reading .fee-frame,
.fee-frame { max-width: 720px; margin-inline: auto; }
.fee-line,
.fee-footnote { max-width: 68ch; }
.fee-footnote p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- 5. the FAQ
   Open, never an accordion (INVARIANTS). The first sentence takes weight 600
   and stays inline: a scanner gets the answer, a reader gets the paragraph. */
.faq { display: grid; gap: 0; }
.faq__item { padding: var(--space-6) 0; border-bottom: 1px solid var(--hairline); }
.faq__item:first-child { border-top: 1px solid var(--hairline); }
.faq__question { margin: 0 0 var(--space-3); font-size: var(--text-h3); }
.faq__answer p { max-width: 66ch; }
.faq__answer p:last-child { margin-bottom: 0; }
.faq__lead { font-weight: 600; color: var(--ink); }
.faq__answer a { display: inline; padding-block: 0.75rem; }

/* ------------------------------------------------ 6. who it is and is not for
   h3 plus one line per row. Promoted from the adhd-assessment page. */
.not-list { display: grid; }
.not-list article { padding: var(--space-5) 0; border-bottom: 1px solid var(--hairline); }
.not-list article:first-child { border-top: 1px solid var(--hairline); }
.not-list h3 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: 0;
}
.not-list p { max-width: 66ch; margin: 0; }

/* ------------------------------------------------------------- 7. the door */
.doorbell {
  padding-block: var(--space-8);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.doorbell-art { width: min(76%, 20rem); justify-self: center; }

/* The doorbell's art is MOUNTED. The builder wraps it in a .local-plate card,
   so the rule above never reaches the rendered box: section 12's
   `.bc .local-plate` (0,2,0) sizes the plate at min(100%, 30rem) and
   `.bc .local-plate img` (0,2,1) resets the image to width:100% of it. The
   image obeys the plate, and the plate obeys nothing about the doorbell.

   Measured on the six lane D previews at 1280 before this rule: the plate
   rendered 572.24px tall against copy columns of 317 to 435px, so .doorbell
   failed balance-gate two_col_ratio on five of six (1.46, 1.80, 1.65, 1.65,
   1.60; mulund passed at 1.31 only because its copy runs longest). Lane D
   verification ruling 3, 2026-09-03.

   The plate is given the doorbell's own size instead of the image, because the
   plate is the box that lays out. The (0,3,0) selector beats section 12's
   (0,2,0) wherever it appears in the file, and it also beats the identical
   inline block a not-yet-migrated page still carries, which is why this is
   scoped rather than reordered.

   .crisis-block__art is NOT affected and needs no twin rule: it is a bare
   img.crisis-block__art directly inside .crisis-block, never inside a
   .local-plate, so no .bc rule reaches it. Checked in the rendered previews,
   not assumed: its column measured 399.84px on all six pages, identical,
   which is the shared partial doing what it is supposed to do. */
.bc .doorbell .local-plate { width: min(76%, 20rem); }

/* The address card. Background is the THEME token, never a literal white: a
   forced white card inherits the light ink token in dark and measured 1.21:1
   on five elements when that was tried. */
.runwal {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--cloth-card);
}
.runwal strong { display: block; color: var(--ink); font-size: var(--text-h3); }
.runwal p:last-child { margin-bottom: 0; }

/* Care routes carry a larger crisis lantern than the tokens.css default: the
   block sits in a full-width section here, not a sidebar. */
.crisis-block__art {
  width: min(100%, 20rem);
  max-height: 25rem;
  object-fit: contain;
  justify-self: center;
}

/* ------------------------------------------------------- 8. the answer block
   .citable is the marker the intent engine's citability audit reads. It carries
   ONE paragraph of 100 to 180 words whose sentences are wrapped in
   <span class="line">: a human reads ten to twelve short lines, the audit
   reads one passage. The band was 100 to 140 until lane D verification ruling
   1 of 2026-09-03 widened it: the citability audit accepts 100 to 300, the
   real passages run 136 to 162, and prose-gate's CITABLE_MAX_WORDS is 180.
   Eyebrow and H2 sit ABOVE the article, never inside it (IC-066).
   This file supplies only the line break; the card look is untouched. */
.citable .line { display: block; }

/* ---------------------------------------------------------- 9. chips, NEW row
   Short nouns as labels. The .chip rules are copied from the homepage inline
   block so a care page gets chips without carrying that block. A chip is a
   LABEL unless it has an href; only a link takes the hover affordance. */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-6) 0 var(--space-8);
  padding: 0;
  list-style: none;
}
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.55rem 1.05rem;
  border: 2px solid var(--ink);
  border-radius: 6px 12px 7px 11px;
  background: var(--cloth-card);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transform: rotate(-0.8deg);
}
.chip:nth-child(even) { transform: rotate(0.9deg); }
a.chip,
.chip[href] {
  transition: transform var(--duration-ui) var(--ease-settle),
              border-color var(--duration-ui) var(--ease-weave),
              color var(--duration-ui) var(--ease-weave);
}
a.chip:hover,
.chip[href]:hover { border-color: var(--thread-sage); color: var(--thread-sage); transform: rotate(0deg); }

/* ------------------------------------------------------------ 10. pair, NEW
   Two parallel ideas, equal weight, a hairline between. column-rule draws the
   divider, so there is no empty element in the markup and nothing to misalign
   when one column runs longer. */
.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  column-rule: 1px solid var(--hairline);
}
.pair > * { min-width: 0; }
.pair h3 { margin-bottom: var(--space-3); font-family: var(--font-ui); font-size: 1.125rem; font-weight: 650; letter-spacing: 0; }
.pair p { max-width: 46ch; margin-bottom: 0; }

/* ------------------------------------------------------- 11. pull-line, NEW
   A closing thought: one sentence, serif italic, no box, no border, no quote
   marks. The only decorative prose a care page gets, once per page.

   Leading raised 1.45 to 1.55 on 2026-09-03 (F16). A pull-line IS running
   text, so unlike the eyebrow it gets no label exemption from rule 41's 1.5
   floor, and at 1.45 it was the ONLY leading defect left on the six generated
   area previews: 32 findings, all of them this class, 8 per page over two
   viewports and two themes.

   1.55, not the bare 1.5, for two reasons that are worth the extra tenth.
   This is an italic serif set at lede size, where the ascenders and
   descenders of Newsreader italic want more room than an upright UI face at
   body size; and a value sitting exactly on a threshold is one rounding
   change away from flipping, which is not where a rule should live. 1.55 is
   also what .short-lines p already uses in this file, so the two prose
   measures now agree instead of differing by a tenth for no reason. */
.pull-line {
  max-width: 60ch;
  margin-block: var(--space-8);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--text-lede);
  font-style: italic;
  line-height: 1.55;
}

/* --- 12. BRANDCRAFT PAGE LAYER
   Moved here verbatim in behaviour from the block tools/apply-mumbai-shell.py
   pasted, byte-identical (md5 fb901a81), into twelve pages. Origin recorded so
   the next sweep does not paste it again: once a page links care.css,
   apply-mumbai-shell.py must NOT re-add the inline block. Every rule stays
   scoped under .bc exactly as it shipped, because the scope is what makes the
   shell opt-in per page.
   ------------------------------------------------------------------------ */
.bc main { overflow-x: clip; }
.bc .sheet-pad { padding-top: var(--space-section); }
.bc .sheet-white { padding-top: 0; }
.bc .torn--cloth { color: var(--cloth); }
.bc .torn--green { color: var(--paper-green); }
.bc .torn--butter { color: var(--paper-butter); }
.bc .torn--sky { color: var(--paper-sky); }
.bc .torn--terra { color: var(--paper-terra); }
.bc .torn--quiet { color: var(--paper-quiet); }
.bc .torn--white { color: var(--cloth); }
/* Hero: the sheet carries no top padding, the inner wrap clears the nav. */
.bc .hero { padding: 0 0 var(--space-16); }
.bc .hero-grid { padding-top: clamp(7.5rem, 13vw, 10.5rem); }
/* Coloured stocks keep ink copy at full contrast in both themes. */
.bc .sheet-green, .bc .sheet-butter, .bc .sheet-sky, .bc .sheet-terra { color: var(--ink); }
.bc .sheet-green .lede, .bc .sheet-butter .lede, .bc .sheet-sky .lede,
.bc .sheet-terra .lede, .bc .sheet-green p, .bc .sheet-butter p,
.bc .sheet-sky p, .bc .sheet-terra p { color: var(--ink); }
/* Mounted prints. The img/local/ set is pale pencil on white, so its plate is
   white in BOTH themes and never blends. The photograph is untouched. */
.bc .local-plate { width: min(100%, 30rem); margin-inline: auto; justify-self: center; background: #FFFFFF; }
.bc .local-plate img {
  display: block; width: 100%; height: auto; max-height: none; margin: 0;
  object-fit: contain; mix-blend-mode: normal; border-radius: 2px;
}
.bc .hero .local-plate { width: min(100%, 32rem); }
.bc .runwal { --rot: 0deg; background: var(--cloth-card); }
.bc .runwal strong { font-family: var(--font-display); }
.bc .crisis-block { background: var(--cloth-card); }

/* --- 13. DARK
   Mirrors the two selectors tokens.css uses, in the same order, so the toggle
   and the OS preference resolve identically. Token-built fills need nothing and
   are not restated; what IS restated is every fixed value and every hairline
   that measures too faint on the dark ground (L15, L16).
   ------------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bc .local-plate { background: #FFFFFF; }
  :root:not([data-theme="light"]) .pair { column-rule-color: var(--hairline-firm); }
  :root:not([data-theme="light"]) .practical-list article,
  :root:not([data-theme="light"]) .practical-list article:first-of-type,
  :root:not([data-theme="light"]) .not-list article,
  :root:not([data-theme="light"]) .not-list article:first-child,
  :root:not([data-theme="light"]) .faq__item,
  :root:not([data-theme="light"]) .faq__item:first-child,
  :root:not([data-theme="light"]) .doorbell { border-color: var(--hairline-firm); }
}
[data-theme="dark"] .bc .local-plate { background: #FFFFFF; }
[data-theme="dark"] .pair { column-rule-color: var(--hairline-firm); }
[data-theme="dark"] .practical-list article,
[data-theme="dark"] .practical-list article:first-of-type,
[data-theme="dark"] .not-list article,
[data-theme="dark"] .not-list article:first-child,
[data-theme="dark"] .faq__item,
[data-theme="dark"] .faq__item:first-child,
[data-theme="dark"] .doorbell { border-color: var(--hairline-firm); }

/* --- 14. NARROW
   Every grid becomes one column, and the ledger row stacks its label above its
   value rather than squeezing 9rem into a 343px shell. The pair keeps its
   divider as a row border: two ideas separated by nothing read as one idea.
   ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  .hero-grid,
  .split,
  .editorial-row,
  .editorial-row:nth-of-type(even),
  .copy-grid,
  .doorbell,
  .practical-grid,
  .practical-grid--rail,
  .steps,
  .card-grid,
  .steps--4,
  .card-grid--4 { grid-template-columns: 1fr; }
  .steps,
  .card-grid { grid-auto-rows: auto; }
  .practical-list article { grid-template-columns: 1fr; gap: var(--space-2); }
  .pair { grid-template-columns: 1fr; gap: var(--space-6); column-rule: 0; }
  .pair > * + * { padding-top: var(--space-6); border-top: 1px solid var(--hairline); }
  .crisis-block__art { grid-row: 1; width: min(58%, 14rem); max-height: 17rem; }
  .doorbell-art { width: min(68%, 17rem); }
  .bc .hero-grid { padding-top: clamp(6.5rem, 18vw, 8rem); }
  .bc .local-plate { width: min(88%, 22rem); }
  .bc .hero .local-plate { width: min(88%, 24rem); }
  /* The doorbell plate keeps its own narrow size too, for the reason given at
     section 7: the plate lays out, the image only fills it. */
  .bc .doorbell .local-plate { width: min(68%, 17rem); }

  /* STACKED BUTTONS SHARE ONE WIDTH.
     Above the breakpoint a button row is a row and every button is as wide as
     its label, which is right. Below it the row becomes a column, and then the
     label length is setting the width of a stack: measured on the six lane D
     previews at 390, "Message on WhatsApp" rendered 237.58px, "Get directions"
     212.94px and "Use the contact page" 280.47px, so every one of the twelve
     stacked pairs differed by 24.6 or 42.9px. Twelve of twelve failed
     balance-gate button_width. Ragged edges down a column is the symmetry
     complaint itself (lane D verification ruling 3, 2026-09-03).

     display:flex rather than block, because .button is inline-flex above the
     breakpoint and carries an .icon-chip that has to stay centred with the
     label. The desktop row is untouched: this whole block is inside the narrow
     media query. */
  .button-row .button,
  .button-row .btn,
  .care-bridge__actions .button,
  .care-bridge__actions .btn {
    display: flex;
    width: 100%;
    justify-content: center;
  }
}

/* Care bridge actions: a deliberate stack, not a wrap (Wave 1a, 2026-09-03).
   tokens.css lays the bridge out as 7fr / minmax(16rem, 5fr) and lets the two
   buttons wrap. "Explore care" and "WhatsApp +91 7625004229" cannot sit on one
   line inside a 256px minimum, so on every page that links this file they fell
   to two ragged lines of different widths: measured 1 of 3 button rows failing
   on psychiatrist-mumbai and the same on psychiatrist-kanjurmarg, and lane F
   measured it on 12 of the 14 Wave 1 pages.
   Stacking them and stretching to the column width makes the second line
   intentional and the two buttons equal, which is the balance rule the wave is
   built on. Mobile already stacked; this makes the two registers agree. */
.care-bridge__actions {
  flex-direction: column;
  align-items: stretch;
}
.care-bridge__actions .button,
.care-bridge__actions .btn {
  justify-content: center;
}
@media (max-width: 767px) {
  [data-theme="dark"] .pair > * + * { border-top-color: var(--hairline-firm); }
}
@media (max-width: 767px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pair > * + * { border-top-color: var(--hairline-firm); }
}

/* --- 15. REDUCED MOTION
   The care components add one transition, the chip settle, and it goes when the
   OS asks for stillness. tokens.css carries the sitewide block; this is the
   part that belongs to this file, so the file is complete on its own.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  a.chip, .chip[href] { transition: none; }
  a.chip:hover, .chip[href]:hover { transform: rotate(-0.8deg); }
  .chip:nth-child(even):hover { transform: rotate(0.9deg); }
}