/* 📰 CARD STYLE: COVER STAR — "the dog is the issue" (docs/plans/CARD-STYLES-2026-09-27.md §5).
   The cover is a glossy magazine cover: the dog's name is the masthead, the day is the cover lines, one foil
   roundel is the only thing that moves (components/card-styles/signatures/coverStar.ts). Inside is the magazine:
   numbered departments, hairlines instead of shadows, a drop cap on the diary, the sweet bit as a pull quote.

   Rules this sheet keeps (§3): every selector starts at [data-card-style="cover-star"] and reaches only through a
   [data-sec] or [data-el] hook, so the booking, payment, tip and visit sheets (which render inside the card's shell)
   are never touched. Colour is the theme's tokens only. Photos are never moved, cropped, tinted or filtered; the
   cover's two legibility shades are the card's own. Motion plays once and rests. */

/* The faces, cut to what this card draws (scripts/card-styles/blender/cover-star-fonts.py: 58 KB for all four). The
   masthead's Didone is the ONE face the cover waits for (preloaded with the page; its optical-size axis gives the
   90 px masthead razor hairlines and the 13 px numbers sturdy ones). The others swap in over system stand-ins measured
   to the same width and line box, so nothing moves when they land. Oswald is cut to capitals: every line set in it
   here is uppercase. */
@font-face { font-family: "CS Bodoni"; src: url("/card-styles/cover-star/bodoni-moda-900-opsz.woff2") format("woff2"); font-weight: 800 900; font-display: block; }
@font-face { font-family: "CS Instrument"; src: url("/card-styles/cover-star/instrument-serif.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "CS Instrument"; src: url("/card-styles/cover-star/instrument-serif-italic.woff2") format("woff2"); font-style: italic; font-display: swap; }
@font-face { font-family: "CS Oswald"; src: url("/card-styles/cover-star/oswald-500-caps.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "CS Instrument Fallback"; src: local("Times New Roman"), local("TimesNewRomanPSMT"); size-adjust: 84.5%; ascent-override: 117.2%; descent-override: 36.7%; line-gap-override: 0%; }
@font-face { font-family: "CS Instrument Fallback"; src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"); font-style: italic; size-adjust: 88.8%; ascent-override: 111.4%; descent-override: 34.9%; line-gap-override: 0%; }
@font-face { font-family: "CS Oswald Fallback"; src: local("Avenir Next Condensed Medium"), local("AvenirNextCondensed-Medium"); font-weight: 500; size-adjust: 106.4%; ascent-override: 112.2%; descent-override: 27.2%; line-gap-override: 0%; }
@font-face { font-family: "CS Oswald Narrow"; src: local("Arial Narrow"), local("ArialNarrow"); font-weight: 500; size-adjust: 92.6%; ascent-override: 128.8%; descent-override: 31.2%; line-gap-override: 0%; }

/* ───────────── The house: one set of names for the whole issue ───────────── */
[data-card-style="cover-star"] {
  /* The Didone draws at its own optical size (the masthead's razor hairlines); a figure or an initial set smaller
     than it looks asks for a sturdier cut ("opsz" 14–30), so a 4's diagonal and a W's thin strokes never vanish. */
  --cs-didone: "CS Bodoni", "Bodoni 72", Didot, "Times New Roman", serif;
  --cs-serif: "CS Instrument", "CS Instrument Fallback", Georgia, serif;
  --cs-caps: "CS Oswald", "CS Oswald Fallback", "CS Oswald Narrow", sans-serif;
  --cs-paper: var(--surface);
  --cs-ink: var(--ink);
  --cs-soft: var(--ink-soft);
  --cs-kick: var(--primary-deep);
  --cs-spot: var(--primary);
  --cs-rule: color-mix(in srgb, var(--ink) 14%, transparent);
  --cs-rule-ink: color-mix(in srgb, var(--ink) 78%, transparent);
  --cs-tint: color-mix(in srgb, var(--primary) 7%, transparent);
  /* The cover's ink: the theme's colour pressed almost to white, on a studio shadow in the theme's own deep colour. */
  --cs-mast: color-mix(in srgb, var(--primary) 12%, #fff);
  --cs-scrim: color-mix(in oklab, var(--primary-deep) 50%, #000);
}
/* A neon theme's "deep" colour is its BRIGHT one (inverted for the dark void), so its shadow takes a breath of the
   neon in near-black instead: the cover shades, it never fogs. */
[data-card-style="cover-star"][data-theme^="tron"] { --cs-scrim: color-mix(in oklab, var(--primary) 18%, #000); }

/* ═════════════════════════════════ THE COVER ═════════════════════════════════ */

/* The theme's floating emoji are the classic cover's ornament; on a magazine cover the type is the ornament. */
[data-card-style="cover-star"] [data-el="motif"] { display: none; }

/* The two legibility shades, deepened into a studio vignette so white type holds on a pale backdrop: measured, the
   issue line ≥ 4.5:1 and the masthead ≥ 3:1 on every pack cover (a pale pink wall and a bright window included). */
[data-card-style="cover-star"] [data-el="cover-shade"]:has(+ [data-el="cover-shade"]) {
  height: 44% !important;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--cs-scrim) 72%, transparent) 0%,
    color-mix(in srgb, var(--cs-scrim) 60%, transparent) 40%,
    color-mix(in srgb, var(--cs-scrim) 44%, transparent) 56%,
    color-mix(in srgb, var(--cs-scrim) 18%, transparent) 74%,
    transparent 100%) !important;
}
[data-card-style="cover-star"] [data-el="cover-shade"] + [data-el="cover-shade"] {
  height: 46% !important;
  background: linear-gradient(0deg,
    color-mix(in srgb, var(--cs-scrim) 88%, transparent) 0%,
    color-mix(in srgb, var(--cs-scrim) 66%, transparent) 30%,
    color-mix(in srgb, var(--cs-scrim) 26%, transparent) 64%,
    transparent 100%) !important;
}

/* The shop fronts its own card as a publisher does: its mark and name as the imprint at the head of the cover (no box),
   and Share as the cover's one control, a quiet glass capsule. */
[data-card-style="cover-star"] [data-el="cover-top"] { padding: 14px 16px 12px 18px !important; }
[data-card-style="cover-star"] [data-el="cover-lockup"] {
  background: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none !important; padding: 0 !important;
}
[data-card-style="cover-star"] [data-el="cover-lockup"] > span { gap: 9px !important; }
[data-card-style="cover-star"] [data-el="cover-lockup"] > span > span:first-child {
  width: 26px !important; height: 26px !important; border-radius: 999px !important; font-size: 14px !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), 0 2px 10px rgba(0, 0, 0, .28);
}
[data-card-style="cover-star"] [data-el="cover-lockup"] > span > span:last-child,
[data-card-style="cover-star"] [data-el="cover-share"] {
  font-family: var(--cs-caps) !important; font-weight: 500 !important; font-size: 11.5px !important;
  letter-spacing: .2em; text-transform: uppercase; color: #fff !important; text-shadow: 0 1px 8px rgba(0, 0, 0, .3);
}
[data-card-style="cover-star"] [data-el="cover-share"] {
  padding: 9px 14px 9px 15px !important; border-radius: 999px !important;
  background: color-mix(in srgb, #fff 16%, transparent) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .36) !important;
}

/* The plain title steps aside VISUALLY only: the masthead and cover lines say it, a screen reader still reads it. */
[data-card-style="cover-star"] [data-el="cover-title"] {
  clip-path: inset(50%); position: absolute; width: 1px; height: 1px; overflow: hidden; white-space: nowrap;
}
[data-card-style="cover-star"] [data-el="cover-caption"] { text-align: left !important; padding: 0 104px 15px 18px !important; }
[data-card-style="cover-star"] [data-el="cover-sub"] {
  font-family: var(--cs-caps) !important; font-weight: 500 !important; font-size: 10px !important; line-height: 1.35;
  letter-spacing: .2em; text-transform: uppercase; margin: 0 !important; opacity: .8 !important; text-shadow: none !important;
}

/* The furniture is the cover's grid: the issue line, the masthead under it, then the cover lines sunk to the foot. */
[data-card-style="cover-star"] [data-el="cover-furniture"] {
  container-type: size;
  display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: auto auto 1fr auto auto;
  column-gap: 10px; padding: 50px 18px 44px;
}
[data-card-style="cover-star"] [data-el="cover-mast"] {
  display: block; grid-column: 1 / -1; grid-row: 2;
  font-family: var(--cs-didone); font-weight: 900; text-transform: uppercase; text-align: center;
  font-size: min(23cqw, 17.4cqh); line-height: .8; letter-spacing: -.025em; white-space: nowrap;
  color: var(--cs-mast);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .14), 0 3px 18px color-mix(in srgb, var(--cs-scrim) 50%, transparent), 0 8px 34px rgba(0, 0, 0, .22);
  font-kerning: normal; padding-top: .02em;
}
[data-card-style="cover-star"] [data-el="cover-mast"][data-len="mid"] { font-size: min(14.6cqw, 10.6cqh); }
[data-card-style="cover-star"] [data-el="cover-mast"][data-len="long"] { font-size: min(9.4cqw, 7cqh); line-height: .9; white-space: normal; text-wrap: balance; }

/* The issue line, above the name: Nº 7 ——— the grooming day issue ——— SEP 2026 */
[data-card-style="cover-star"] :is([data-el="cover-visit"], [data-el="cover-kicker"], [data-el="cover-noun"]) {
  display: flex; align-items: center; grid-row: 1; margin-bottom: 12px; color: #fff; white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .3);
}
[data-card-style="cover-star"] [data-el="cover-visit"] { grid-column: 1; }
[data-card-style="cover-star"] [data-el="cover-noun"] { grid-column: 2; font: italic 400 15px/1 var(--cs-serif); letter-spacing: .01em; }
[data-card-style="cover-star"] [data-el="cover-kicker"] { grid-column: 3; justify-content: flex-end; }
[data-card-style="cover-star"] [data-el="cover-noun"]::before { content: "the\a0"; }
[data-card-style="cover-star"] [data-el="cover-noun"]::after { content: "\a0issue"; }
[data-card-style="cover-star"] :is([data-el="cover-visit-n"], [data-el="cover-month"]) {
  font: 500 10.5px/1 var(--cs-caps); letter-spacing: .22em; text-transform: uppercase;
}
[data-card-style="cover-star"] [data-el="cover-visit-n"]::before { content: "N\BA\a0"; }
[data-card-style="cover-star"] :is([data-el="cover-visit-label"], [data-el="cover-shop"]) { display: none; }
[data-card-style="cover-star"] [data-el="cover-visit"]::after,
[data-card-style="cover-star"] [data-el="cover-kicker"]::before {
  content: ""; flex: 1; height: 1px; min-width: 12px; background: rgba(255, 255, 255, .55);
}
[data-card-style="cover-star"] [data-el="cover-visit"]::after { margin-left: 10px; }
[data-card-style="cover-star"] [data-el="cover-kicker"]::before { margin-right: 10px; }

/* The cover lines: the verdict as the headline, two highlights as the strap. (The moods stay off the cover: the roundel
   carries the lead one, and the verdict's grid, the first thing inside, carries them all.) */
[data-card-style="cover-star"] [data-el="cover-lines"] {
  display: flex; flex-direction: column; gap: 7px; grid-row: 5; grid-column: 1 / -1; max-width: 64%;
  list-style: none; margin: 0; padding: 0; color: #fff;
}
[data-card-style="cover-star"] [data-el="cover-line"] {
  font: 500 11.5px/1.25 var(--cs-caps); letter-spacing: .17em; text-transform: uppercase;
  display: flex; align-items: baseline; gap: 9px; text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}
[data-card-style="cover-star"] [data-el="cover-line"]::before {
  content: ""; flex: none; width: 14px; height: 2px; transform: translateY(-3px); background: var(--accent);
}
[data-card-style="cover-star"] [data-el="cover-line"]:first-child {
  display: block; margin-bottom: 4px; font: italic 400 min(9.6cqw, 42px)/.98 var(--cs-serif);
  letter-spacing: -.01em; text-transform: none; text-wrap: balance; text-shadow: 0 2px 18px rgba(0, 0, 0, .4);
}
[data-card-style="cover-star"] [data-el="cover-line"]:first-child::before { content: none; }

/* The barcode: the code's digits under a strip of bars, on a white label in the corner. */
[data-card-style="cover-star"] [data-el="cover-code"] {
  display: block; position: absolute; right: 16px; bottom: 14px; width: 71px; padding: 25px 4px 3px;
  background: #fff linear-gradient(90deg,#111 0px 1px,#0000 1px 2px,#111 2px 4px,#0000 4px 5px,#111 5px 6px,#0000 6px 8px,#111 8px 11px,#0000 11px 12px,#111 12px 13px,#0000 13px 14px,#111 14px 16px,#0000 16px 18px,#111 18px 19px,#0000 19px 20px,#111 20px 23px,#0000 23px 24px,#111 24px 26px,#0000 26px 27px,#111 27px 28px,#0000 28px 30px,#111 30px 31px,#0000 31px 34px,#111 34px 36px,#0000 36px 37px,#111 37px 38px,#0000 38px 39px,#111 39px 41px,#0000 41px 43px,#111 43px 46px,#0000 46px 47px,#111 47px 48px,#0000 48px 49px,#111 49px 51px,#0000 51px 52px,#111 52px 53px,#0000 53px 55px,#111 55px 56px,#0000 56px 57px,#111 57px 60px,#0000 60px 61px,#111 61px 63px) 4px 4px / 63px 19px no-repeat;
  font: 500 6.5px/1 var(--cs-caps); letter-spacing: .1em; color: #111; text-align: center; white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25); text-transform: uppercase;
}

/* The roundel's stage (the signature draws into it; until then it is empty, so nothing half-drawn ever shows). */
[data-card-style="cover-star"] [data-el="cover-stage"] {
  display: block; position: absolute; right: 4px; bottom: 58px; width: 138px; height: 138px; pointer-events: none;
}
[data-card-style="cover-star"] [data-el="cover-stage"] canvas { display: block; width: 100%; height: 100%; }

/* 📸 With the Living Cover on (§7) the dog's head rises in front of its own name — the magazine's own move. The folio
   steps above the name and the name comes down to meet the head (the module measures how far: --lc-mast-drop, set with
   [data-living~="mast"] by components/card-styles/living/livingCover.ts). Down in the photo the pale name needs a
   deeper halo to hold on a pale backdrop. */
[data-card-style="cover-star"][data-living~="mast"] :is([data-el="cover-visit"], [data-el="cover-kicker"], [data-el="cover-noun"]) { grid-row: 1; margin: 0 0 14px; }
[data-card-style="cover-star"][data-living~="mast"] [data-el="cover-mast"] {
  grid-row: 2; margin-top: var(--lc-mast-drop, 0px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 6px 22px color-mix(in srgb, var(--cs-scrim) 55%, transparent), 0 14px 48px color-mix(in srgb, var(--cs-scrim) 45%, transparent);
}

/* A short cover (a landscape photo) has no top band to spare: the dog's head is up there. So the name moves down to the
   foot, where the card's own title sits (clear of the stage in the corner), the verdict stays under it, and the folio,
   the strap and the barcode step back. */
@container (max-height: 520px) {
  [data-card-style="cover-star"] [data-sec="cover"]:has(> img) [data-el="cover-mast"] {
    grid-row: 4; text-align: left; margin: 0 0 6px; padding-right: 96px; font-size: min(19cqw, 17cqh);
  }
  [data-card-style="cover-star"] [data-sec="cover"]:has(> img) [data-el="cover-mast"][data-len="mid"] { font-size: min(10.5cqw, 12cqh); }
  [data-card-style="cover-star"] [data-sec="cover"]:has(> img) [data-el="cover-mast"][data-len="long"] { font-size: min(7cqw, 8.5cqh); text-wrap: balance; }
  [data-card-style="cover-star"] [data-sec="cover"]:has(> img) :is([data-el="cover-visit"], [data-el="cover-kicker"], [data-el="cover-noun"], [data-el="cover-code"]),
  [data-card-style="cover-star"] [data-sec="cover"]:has(> img) [data-el="cover-line"]:not(:first-child) { display: none; }
  [data-card-style="cover-star"] [data-sec="cover"]:has(> img) [data-el="cover-line"]:first-child { font-size: min(6.4cqw, 26px); }
  [data-card-style="cover-star"] [data-sec="cover"]:has(> img) [data-el="cover-stage"] { width: 96px; height: 96px; right: 6px; bottom: 30px; }
}

/* 🎨 THE ISSUE'S VOICE, ON EVERY SECTION (17 Oct 2026). Every card part draws with the app's tokens (its type, its
   corners, its soft fill), so ONE rule that names no section re-voices every part, the next one included: the serif is
   the body and the display face, everything squares up, the fills go to a whisper of the theme. Instrument has one
   weight, so a bold asks for nothing the browser would fake. test/cardStylesDressEverySection + e2e/card-buttons. */
[data-card-style="cover-star"] [data-sec]:not([data-sec="body"], [data-sec="cover"]) {
  --font-display: var(--cs-serif); --font-body: var(--cs-serif); --font-fredoka: var(--cs-serif); --font-nunito: var(--cs-serif);
  font-family: var(--cs-serif); font-synthesis: none;
  --secondary-soft: var(--cs-tint);
  --radius-card: 0px; --radius-xl: 3px; --radius-lg: 3px; --radius-base: 2px; --radius-sm: 2px; --radius-xs: 2px; --radius-tile: 3px;
}
/* 🔎 THE TEXT CUT (17 Oct 2026, the critique of #3563). Instrument is a display serif, and its small x-height read light
   in the card's 11.5 to 12.5 px utility lines (Settle up's "Pay … in a tap", "Apple Pay, Google Pay or card.", the tip's
   and the asks' sublines). A foundry answers small type with a text cut; this is ours: the same two files drawn 8%
   larger (one step: 12 px reads as 13), worn by the body token and by every line that takes the section's face. The
   issue's own lines name the display cut (`var(--cs-serif)`) in their `font:`, and `.font-display` draws the display
   token, so the departments, headlines, buttons and amounts keep their size. The line box is the CSS size's, so
   nothing moves but a line that now wraps. */
@font-face { font-family: "CS Instrument Text"; src: url("/card-styles/cover-star/instrument-serif.woff2") format("woff2"); size-adjust: 108%; font-display: swap; }
@font-face { font-family: "CS Instrument Text"; src: url("/card-styles/cover-star/instrument-serif-italic.woff2") format("woff2"); font-style: italic; size-adjust: 108%; font-display: swap; }
@font-face { font-family: "CS Instrument Text Fallback"; src: local("Times New Roman"), local("TimesNewRomanPSMT"); size-adjust: 91.3%; ascent-override: 117.2%; descent-override: 36.7%; line-gap-override: 0%; }
@font-face { font-family: "CS Instrument Text Fallback"; src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"); font-style: italic; size-adjust: 95.9%; ascent-override: 111.4%; descent-override: 34.9%; line-gap-override: 0%; }
[data-card-style="cover-star"] [data-sec]:not([data-sec="body"]):not([data-sec="cover"]) {
  --cs-text: "CS Instrument Text", "CS Instrument Text Fallback", Georgia, serif;
  --font-body: var(--cs-text); --font-nunito: var(--cs-text); font-family: var(--cs-text);
}
/* No photo: a typographic cover. The name stands in the middle of the theme's own colour field, deepened by the
   studio shade so pale ink holds on every theme (a neon one included). */
[data-card-style="cover-star"] [data-sec="cover"]:not(:has(> img)) {
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--cs-scrim) 34%, transparent), color-mix(in oklab, var(--cs-scrim) 66%, transparent)),
    radial-gradient(120% 70% at -8% -10%, var(--wash-a, transparent), transparent 58%),
    linear-gradient(160deg, var(--primary), var(--primary-deep)) !important;
}
/* …and on a neon theme, whose "deep" colour is its bright one, the field is the theme's own night with the neon glowing
   behind the name, so the pale masthead keeps its contrast (a cyan field under near-white type read ~2.8:1). */
[data-card-style="cover-star"][data-theme^="tron"] [data-sec="cover"]:not(:has(> img)) {
  background:
    radial-gradient(90% 58% at 50% 36%, color-mix(in oklab, var(--primary) 32%, transparent), transparent 72%),
    radial-gradient(110% 64% at 108% 112%, color-mix(in oklab, var(--accent) 24%, transparent), transparent 58%),
    var(--bg) !important;
}
[data-card-style="cover-star"] [data-sec="cover"]:not(:has(> img)) [data-el="cover-furniture"] { grid-template-rows: 1fr auto auto 1fr auto auto; }
[data-card-style="cover-star"] [data-sec="cover"]:not(:has(> img)) [data-el="cover-mast"] { grid-row: 3; }
[data-card-style="cover-star"] [data-sec="cover"]:not(:has(> img)) :is([data-el="cover-visit"], [data-el="cover-kicker"], [data-el="cover-noun"]) { grid-row: 2; }
[data-card-style="cover-star"] [data-sec="cover"]:not(:has(> img)) [data-el="cover-lines"] { grid-row: 6; }

/* ═════════════════════════════════ THE ISSUE ═════════════════════════════════ */

[data-card-style="cover-star"] [data-sec="body"] {
  background: var(--cs-paper) !important; color: var(--cs-ink);
  padding: 8px 22px 30px !important; gap: 0 !important; counter-reset: cs-dept;
}

/* Every department: flat on the paper, a hairline above, room to breathe. */
[data-card-style="cover-star"] :is([data-sec="verdict"], [data-sec="look"], [data-sec="glowup"], [data-sec="photos"], [data-sec="day"],
  [data-sec="health"], [data-sec="loyalty"], [data-sec="gallery"], [data-sec="share"], [data-sec="links"], [data-sec="checkin"], [data-sec="keepsake-pdf"],
  [data-sec="combo"], [data-sec="stay"], [data-sec="settle"], [data-sec="routine"], [data-sec="timeline"], [data-sec="route"],
  [data-sec="vibe"], [data-sec="metrics"], [data-sec="progress"], [data-sec="friends"], [data-sec="activities"], [data-sec="checkout"],
  :is([data-sec="packages"], [data-sec="pay"])),
[data-card-style="cover-star"] :is([data-sec="review"], :is([data-sec="tips"], [data-sec="groomer"]), [data-sec="pick"], [data-sec="chat"], [data-sec="ask-email"], [data-sec="ask-birthday"]) > :first-child {
  background: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important;
  border-top: 1px solid var(--cs-rule) !important; padding: 26px 0 28px !important; color: var(--cs-ink);
}
[data-card-style="cover-star"] [data-sec="body"] > :first-child { border-top: 0 !important; }

/* The kicker: every section's one title, numbered like a department. */
[data-card-style="cover-star"] [data-sec] [data-el="title"] {
  counter-increment: cs-dept; display: flex; align-items: baseline; gap: 0;
  font-family: var(--cs-caps) !important; font-weight: 500 !important; font-size: 11px !important; line-height: 1.3;
  letter-spacing: .22em; text-transform: uppercase; color: var(--cs-kick) !important; text-align: left !important;
  margin: 0 0 18px !important;
}
[data-card-style="cover-star"] [data-sec] [data-el="title"]::before {
  content: counter(cs-dept, decimal-leading-zero) "\2002\2014\2002";
  font: 800 13px/1 var(--cs-didone); letter-spacing: .04em; color: var(--cs-spot); white-space: pre;
}
[data-card-style="cover-star"] [data-sec] :not([data-sec]):has(> [data-el="title"]) { align-items: center !important; margin-bottom: 18px !important; }
[data-card-style="cover-star"] [data-sec] :not([data-sec]) > [data-el="title"] { margin: 0 !important; }
[data-card-style="cover-star"] [data-sec] :not([data-sec]):has(> [data-el="title"]) > .pill {
  font: 500 10px/1 var(--cs-caps) !important; letter-spacing: .18em; text-transform: uppercase;
  background: none !important; color: var(--cs-kick) !important; box-shadow: inset 0 0 0 1px currentColor; padding: 6px 8px 5px !important;
}

/* 01 · How the day went — the verdict is the headline, the moods its caption. */
[data-card-style="cover-star"] [data-sec="verdict"] { text-align: center; padding-top: 30px !important; }
[data-card-style="cover-star"] [data-sec="verdict"] [data-el="title"] { justify-content: center; }
[data-card-style="cover-star"] [data-sec="verdict"] > [data-el="title"] + div {
  font: italic 400 44px/1 var(--cs-serif) !important; letter-spacing: -.015em; color: var(--cs-ink) !important;
  margin: 0 0 24px !important; text-wrap: balance;
}
[data-card-style="cover-star"] [data-sec="verdict"] .pill {
  background: none !important; box-shadow: inset 0 0 0 1px var(--cs-rule-ink); color: var(--cs-kick) !important;
  font: 500 10.5px/1.2 var(--cs-caps) !important; letter-spacing: .18em; text-transform: uppercase; padding: 8px 12px 7px !important;
}
[data-card-style="cover-star"] [data-sec="verdict"] [data-mood-grid] > div { column-gap: 0 !important; }
[data-card-style="cover-star"] [data-sec="verdict"] [data-mood-grid] > div > * + * { box-shadow: inset 1px 0 0 var(--cs-rule); }
[data-card-style="cover-star"] [data-sec="verdict"] [data-mood-grid] .dm-act {
  background: none !important; width: 40px !important; height: 40px !important; font-size: 30px !important;
}
[data-card-style="cover-star"] [data-sec="verdict"] [data-mood-grid] .dm-act + span {
  font-family: var(--cs-caps) !important; font-weight: 500 !important; font-size: 10.5px !important; line-height: 1.35;
  letter-spacing: .16em; text-transform: uppercase; color: var(--cs-soft) !important; margin-top: 8px !important;
}

/* A headline in the magazine's voice wherever a section leads with one line. */
[data-card-style="cover-star"] :is([data-sec="settle"] > [data-el="title"] + div, [data-sec="vibe"] > .mb-3 > div:first-child,
  [data-sec="look"] > div:has(> .flex-1) .flex-1 > div:first-child, [data-sec="loyalty"] > div:first-child > div:first-child) {
  font: italic 400 30px/1.05 var(--cs-serif) !important; letter-spacing: -.01em; color: var(--cs-ink) !important;
}

/* 02 · The new look — a fashion credit: the style's name set like a headline, the label above it. */
[data-card-style="cover-star"] [data-sec="look"] > div:has(> .flex-1) { background: none !important; padding: 2px 0 6px !important; gap: 14px !important; }
[data-card-style="cover-star"] [data-sec="look"] > div:has(> .flex-1) > span:first-child { font-size: 34px !important; }
[data-card-style="cover-star"] [data-sec="look"] .flex-1 { display: flex; flex-direction: column-reverse; gap: 6px; }
[data-card-style="cover-star"] [data-sec="look"] .flex-1 > div:last-child,
[data-card-style="cover-star"] :is([data-sec="look"], [data-sec="settle"], [data-sec="vibe"]) :is(.text-\[11px\], .text-\[11\.5px\]) {
  font-family: var(--cs-caps) !important; font-weight: 500 !important; font-size: 10px !important; letter-spacing: .18em; text-transform: uppercase;
}

/* 03 · The glow-up, 04 · More moments — captions in small caps under the photos, a tighter grid. */
[data-card-style="cover-star"] [data-sec="glowup"] .grid > div > div:last-child {
  font-family: var(--cs-caps) !important; font-weight: 500 !important; font-size: 10px !important; letter-spacing: .24em;
  text-transform: uppercase; margin-top: 9px !important; color: var(--cs-soft) !important;
}
[data-card-style="cover-star"] [data-sec="glowup"] .grid > div:last-child > div:last-child { color: var(--cs-kick) !important; }
/* Before and after are a matched pair: the same hairline frame on both, the captions under them in small caps. */
[data-card-style="cover-star"] [data-sec="glowup"] .glory-frame,
[data-card-style="cover-star"] [data-sec="glowup"] .grid > div:first-child > div:first-child { background: var(--cs-rule-ink); box-shadow: none; padding: 1px; border-radius: 3px; }
[data-card-style="cover-star"] [data-sec="glowup"] .relative.overflow-hidden { border-radius: 2px !important; }
[data-card-style="cover-star"] [data-sec="glowup"] > div:last-child > div:last-child,
[data-card-style="cover-star"] [data-sec="gallery"] .text-\[13\.5px\] {
  font: italic 400 15px/1.35 var(--cs-serif) !important; color: var(--cs-soft) !important;
}
[data-card-style="cover-star"] [data-sec="photos"] [data-mosaic] { gap: 6px !important; }

/* The reactions and the two keepsake buttons: small, centred, quiet. */
[data-card-style="cover-star"] [data-sec="reactions"] > :first-child { justify-content: center; padding: 6px 0 18px; }
[data-card-style="cover-star"] [data-sec="reactions"] > :first-child > div:first-child { font: italic 400 16px/1.2 var(--cs-serif) !important; color: var(--cs-soft) !important; }
[data-card-style="cover-star"] [data-sec="reactions"] .reaction-pill { background: none; box-shadow: inset 0 0 0 1px var(--cs-rule); }
[data-card-style="cover-star"] [data-sec="keepsake"] { margin: 0 auto 26px !important; }
[data-card-style="cover-star"] [data-sec="keepsake"] button {
  font-family: var(--cs-caps) !important; font-weight: 500 !important; font-size: 11.5px !important; letter-spacing: .18em; text-transform: uppercase;
}

/* 05 · The day — an editorial list, then the diary set as the feature with a drop cap. */
[data-card-style="cover-star"] [data-sec="day"] > div > div:first-child:has(+ ul) {
  font-family: var(--cs-caps) !important; font-weight: 500 !important; font-size: 10px !important; letter-spacing: .2em !important; margin-bottom: 6px !important; text-transform: uppercase;
}
[data-card-style="cover-star"] [data-sec="day"] ul { gap: 0 !important; }
[data-card-style="cover-star"] [data-sec="day"] li { padding: 9px 0; }
[data-card-style="cover-star"] [data-sec="day"] li + li { box-shadow: inset 0 1px 0 var(--cs-rule); }
[data-card-style="cover-star"] [data-sec="day"] li .dm-act { background: none !important; box-shadow: inset 0 0 0 1px var(--cs-rule); }
[data-card-style="cover-star"] [data-sec="day"] li > span:last-child { font: 400 19px/1.25 var(--cs-serif) !important; color: var(--cs-ink) !important; }
[data-card-style="cover-star"] [data-sec="day"] > div:not(:has(ul)):not([data-el]) {
  background: none !important; border-radius: 0 !important; padding: 22px 0 0 !important; margin-top: 18px !important;
  box-shadow: inset 0 1px 0 var(--cs-rule-ink);
}
[data-card-style="cover-star"] [data-sec="day"] > div:not(:has(ul)):not([data-el]) > div:first-child {
  font-family: var(--cs-caps) !important; font-weight: 500 !important; font-size: 10px !important; letter-spacing: .22em !important; margin-bottom: 12px !important; text-transform: uppercase;
}
[data-card-style="cover-star"] [data-sec="day"] > div:not(:has(ul)):not([data-el]) > div:nth-child(2) {
  font: 400 19px/1.5 var(--cs-serif) !important; color: var(--cs-ink) !important;
}
[data-card-style="cover-star"] [data-sec="day"] > div:not(:has(ul)):not([data-el]) > div:nth-child(2)::first-letter {
  float: left; font: 900 64px/.76 var(--cs-didone); font-variation-settings: "opsz" 30; color: var(--cs-spot); margin: 6px 10px 0 0; padding-top: 2px;
}
[data-card-style="cover-star"] [data-sec="day"] > div:not(:has(ul)):not([data-el]) > div:nth-child(2) > span:first-child {
  font-family: var(--cs-caps); font-weight: 500; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--cs-ink) !important;
}
[data-card-style="cover-star"] [data-sec="day"] > div:not(:has(ul)):not([data-el]) > div:nth-child(3) { font: italic 400 15px/1.3 var(--cs-serif) !important; margin-top: 12px !important; }
[data-card-style="cover-star"] [data-sec="day"] > div:not(:has(ul)):not([data-el]) > div:nth-child(3) > span { font: inherit !important; color: var(--cs-kick) !important; }

/* The sweet bit — the pull quote. */
[data-card-style="cover-star"] [data-sec="note"] {
  background: none !important; box-shadow: none !important; border-radius: 0 !important; text-align: center;
  padding: 58px 8px 34px !important; border-top: 1px solid var(--cs-rule-ink); border-bottom: 1px solid var(--cs-rule-ink); margin: 6px 0 30px;
}
[data-card-style="cover-star"] [data-sec="note"] > span:first-child { display: none; }
[data-card-style="cover-star"] [data-sec="note"]::before {
  content: "\201C"; position: absolute; left: 0; right: 0; top: 14px; font: 900 76px/.7 var(--cs-didone); color: var(--cs-spot);
  font-variation-settings: "opsz" 16; /* a text cut's sturdy quote mark: at display size its tails thin to hairlines and it reads as two dots */
}
[data-card-style="cover-star"] [data-sec="note"] > div:nth-child(2) {
  font-family: var(--cs-caps) !important; font-weight: 500 !important; font-size: 10.5px !important; letter-spacing: .24em !important;
  color: var(--cs-kick) !important; margin-bottom: 14px !important; text-transform: uppercase;
}
[data-card-style="cover-star"] [data-sec="note"] > div:nth-child(3) {
  font: italic 400 25px/1.28 var(--cs-serif) !important; color: var(--cs-ink) !important; letter-spacing: -.005em; text-wrap: pretty;
}
[data-card-style="cover-star"] [data-sec="note"] > div:nth-child(4) { justify-content: center; margin-top: 18px !important; }
[data-card-style="cover-star"] [data-sec="note"] > div:nth-child(4) > span:last-child {
  font-family: var(--cs-caps) !important; font-weight: 500 !important; font-size: 11px !important; letter-spacing: .2em; text-transform: uppercase; color: var(--cs-soft) !important;
}

/* The collectible: an insert with a cut line, the card art inside untouched. */
[data-card-style="cover-star"] [data-sec="trading"] {
  background: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 16px 14px !important;
  border: 1px dashed color-mix(in srgb, var(--ink) 34%, transparent) !important; margin: 6px 0 22px;
}
[data-card-style="cover-star"] [data-sec="trading"] .flex-1 > div:first-child { font: italic 400 19px/1.15 var(--cs-serif) !important; }
[data-card-style="cover-star"] [data-sec="trading"] .flex-1 > div:nth-child(2) { font: 400 15px/1.3 var(--cs-serif) !important; color: var(--cs-soft) !important; margin-top: 4px !important; }
[data-card-style="cover-star"] [data-sec="trading"] .flex-1 + span {
  font-family: var(--cs-caps) !important; font-weight: 500 !important; font-size: 10.5px !important; letter-spacing: .16em; text-transform: uppercase;
}

/* Tables: the health check, the training skills, the day's routine — rows ruled like a spec sheet. */
[data-card-style="cover-star"] :is([data-sec="health"] .grid, [data-sec="progress"] .flex-col) { gap: 0 14px !important; }
[data-card-style="cover-star"] :is([data-sec="health"] .grid > div, [data-sec="progress"] .flex-col > div) {
  background: none !important; border-radius: 0 !important; padding: 10px 0 !important; box-shadow: inset 0 -1px 0 var(--cs-rule);
}
[data-card-style="cover-star"] :is([data-sec="health"] .grid > div, [data-sec="progress"] .flex-col > div) > span:first-child {
  font: 400 17px/1.2 var(--cs-serif) !important; color: var(--cs-ink) !important;
}
[data-card-style="cover-star"] :is([data-sec="health"], [data-sec="progress"], [data-sec="routine"], [data-sec="activities"], [data-sec="vibe"], [data-sec="combo"], [data-sec="route"]) .pill {
  font-family: var(--cs-caps) !important; font-weight: 500 !important; font-size: 10px !important; letter-spacing: .14em; text-transform: uppercase;
}

/* The stay, day by day: the days numbered in the Didone like a contents page, the dates as datelines, the rail a hairline. */
[data-card-style="cover-star"] [data-sec="timeline"] .flex-col > .flex > .flex-none:first-child > span:first-child {
  background: none !important; box-shadow: inset 0 0 0 1px var(--cs-kick); color: var(--cs-kick) !important; font: 800 12px/1 var(--cs-didone) !important;
}
[data-card-style="cover-star"] [data-sec="timeline"] .flex-col > .flex > .flex-none:first-child > span + span { background: var(--cs-rule) !important; width: 1px !important; }
[data-card-style="cover-star"] [data-sec="timeline"] .items-baseline > span + span {
  font: 500 10px/1 var(--cs-caps) !important; letter-spacing: .2em; text-transform: uppercase;
}
[data-card-style="cover-star"] [data-sec="timeline"] > .flex:nth-child(2) > div { font: italic 400 15px/1.3 var(--cs-serif) !important; }
[data-card-style="cover-star"] [data-sec="timeline"] .items-baseline + .text-\[13\.5px\] { font: 400 17.5px/1.4 var(--cs-serif) !important; color: var(--cs-ink) !important; margin-top: 4px !important; }
[data-card-style="cover-star"] [data-sec="timeline"] > .font-display {
  background: none !important; border: 0 !important; border-radius: 0 !important; font: italic 400 22px/1.2 var(--cs-serif) !important;
  box-shadow: inset 0 1px 0 var(--cs-rule), inset 0 -1px 0 var(--cs-rule); padding: 14px 0 !important;
}
/* The routine: a ruled checklist, like the health table — the tick in the theme's colour, the item in the serif. */
[data-card-style="cover-star"] [data-sec="routine"] [data-el="title"] + div { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 14px !important; }
[data-card-style="cover-star"] [data-sec="routine"] [data-el="title"] + div > .pill {
  background: none !important; border-radius: 0 !important; box-shadow: inset 0 -1px 0 var(--cs-rule); padding: 11px 0 10px !important; gap: 9px !important;
  font: 400 17px/1.2 var(--cs-serif) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--cs-ink) !important; align-items: baseline !important;
}
[data-card-style="cover-star"] [data-sec="routine"] [data-el="title"] + div > .pill > span { color: var(--cs-spot); font-size: 13px !important; }
/* The walk's and the day's tags: light outline tags, never tinted blocks. */
[data-card-style="cover-star"] :is([data-sec="activities"], [data-sec="vibe"]) .pill {
  background: none !important; box-shadow: inset 0 0 0 1px var(--cs-rule); color: var(--cs-kick) !important; padding: 9px 12px 8px !important;
}

/* The friends: a contributors' strip — round portraits, names in small caps, the hint in the italic. */
[data-card-style="cover-star"] [data-sec="friends"] .flex-wrap > * > span:last-child {
  font: 500 10px/1.3 var(--cs-caps) !important; letter-spacing: .16em; text-transform: uppercase; color: var(--cs-ink) !important; margin-top: 9px !important;
}
[data-card-style="cover-star"] [data-sec="friends"] .flex-wrap + div { font: italic 400 15.5px/1.35 var(--cs-serif) !important; margin-top: 16px !important; }

/* A note to take home (training's homework, a stay's feeding and meds): a sidebar with a rule down its side. */
[data-card-style="cover-star"] :is([data-sec="progress"], [data-sec="stay"]) > div:has(> .flex-1 > .uppercase:first-child) {
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: inset 2px 0 0 var(--accent);
  padding: 2px 0 2px 16px !important; margin-top: 22px !important;
}
[data-card-style="cover-star"] :is([data-sec="progress"], [data-sec="stay"]) > div:has(> .flex-1 > .uppercase:first-child) .uppercase {
  font: 500 10.5px/1.4 var(--cs-caps) !important; letter-spacing: .22em !important; color: var(--cs-kick) !important; text-transform: uppercase;
}
[data-card-style="cover-star"] :is([data-sec="progress"], [data-sec="stay"]) > div:has(> .flex-1 > .uppercase:first-child) .uppercase + div {
  font: italic 400 17px/1.4 var(--cs-serif) !important; color: var(--cs-ink) !important; margin-top: 5px !important;
}

/* Numbers set big, like a feature's stat box. */
[data-card-style="cover-star"] :is([data-sec="metrics"], [data-sec="checkout"]) .grid { gap: 0 !important; }
[data-card-style="cover-star"] :is([data-sec="metrics"], [data-sec="checkout"]) .grid > div { background: none !important; border-radius: 0 !important; }
[data-card-style="cover-star"] :is([data-sec="metrics"], [data-sec="checkout"]) .grid > div + div { box-shadow: inset 1px 0 0 var(--cs-rule); }
[data-card-style="cover-star"] [data-sec="metrics"] .grid > div:nth-child(3n + 1):not(:first-child) { box-shadow: inset 0 1px 0 var(--cs-rule); }
[data-card-style="cover-star"] [data-sec="metrics"] .grid > div:nth-child(n + 5):not(:nth-child(3n + 1)) { box-shadow: inset 1px 0 0 var(--cs-rule), inset 0 1px 0 var(--cs-rule); }
[data-card-style="cover-star"] [data-sec="metrics"] .grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr) !important; }
[data-card-style="cover-star"] [data-sec="metrics"] .grid:has(> :nth-child(4):last-child) > :nth-child(3) { box-shadow: inset 0 1px 0 var(--cs-rule); }
[data-card-style="cover-star"] [data-sec="metrics"] .grid:has(> :nth-child(4):last-child) > :nth-child(4) { box-shadow: inset 1px 0 0 var(--cs-rule), inset 0 1px 0 var(--cs-rule); }
[data-card-style="cover-star"] [data-sec="metrics"] .grid > div { padding: 16px 4px 18px !important; }
[data-card-style="cover-star"] :is([data-sec="metrics"], [data-sec="checkout"]) .grid > div > span:nth-child(2) {
  font: 800 34px/1 var(--cs-didone) !important; font-variation-settings: "opsz" 14 !important; color: var(--cs-spot) !important; margin-top: 8px !important;
}
[data-card-style="cover-star"] [data-sec="checkout"] { color: var(--cs-ink) !important; }
[data-card-style="cover-star"] :is([data-sec="metrics"], [data-sec="checkout"]) .grid > div > span:last-child {
  font: 500 10px/1.35 var(--cs-caps) !important; letter-spacing: .2em; text-transform: uppercase; color: var(--cs-soft) !important; margin-top: 9px !important;
}
[data-card-style="cover-star"] [data-sec="checkout"] > div:last-child:not(.grid) { font: italic 400 17px/1.4 var(--cs-serif) !important; margin-top: 18px !important; }
[data-card-style="cover-star"] [data-sec="checkout"] > div:first-child { font-family: var(--cs-caps) !important; font-weight: 500 !important; font-size: 11px !important; letter-spacing: .22em !important; color: var(--cs-kick); opacity: 1 !important; text-transform: uppercase; }
[data-card-style="cover-star"] [data-sec="checkout"] > div:nth-child(2) { font: italic 400 30px/1.05 var(--cs-serif) !important; }

/* The loyalty meter: a hairline with the theme's colour running along it. */
[data-card-style="cover-star"] [data-sec="loyalty"] > div:first-child > div:last-child { font-family: var(--cs-caps) !important; font-weight: 500 !important; letter-spacing: .18em; text-transform: uppercase; }
[data-card-style="cover-star"] [data-sec="loyalty"] > div:nth-child(2) { height: 5px !important; }
[data-card-style="cover-star"] [data-sec="loyalty"] > div:last-child { font: italic 400 16px/1.3 var(--cs-serif) !important; }

/* Next issue: the rebook runs full-bleed, the one page of colour in the issue. */
[data-card-style="cover-star"] [data-sec="rebook"] {
  margin: 8px -22px 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 36px 26px 30px !important;
}
[data-card-style="cover-star"] [data-sec="rebook"] > div:first-child {
  font-family: var(--cs-caps) !important; font-weight: 500 !important; font-size: 10.5px !important; letter-spacing: .24em !important; text-transform: uppercase;
}
[data-card-style="cover-star"] [data-sec="rebook"] > div:first-child::before { content: "Next issue\2002\2014\2002"; }
[data-card-style="cover-star"] [data-sec="rebook"] > div:nth-child(2) { font: italic 400 34px/1.02 var(--cs-serif) !important; margin-top: 12px !important; letter-spacing: -.01em; text-wrap: balance; }
[data-card-style="cover-star"] [data-sec="rebook"] :is(button, a, .pill),
[data-card-style="cover-star"] :is([data-sec="share"], [data-sec="keepsake-pdf"], [data-sec="packages"]) :is(button, a):not([data-link-preview] *) , [data-card-style="cover-star"] [data-sec] [data-el="send"]{
  font-family: var(--cs-caps) !important; font-weight: 500 !important; font-size: 12.5px !important; letter-spacing: .16em; text-transform: uppercase;
}

/* The review ask: the Google mark stays Google's; the rest speaks the issue's two voices. */
[data-card-style="cover-star"] [data-sec="review"] > :first-child > a:first-child .pill {
  background: none !important; box-shadow: inset 0 0 0 1px currentColor; color: var(--cs-kick) !important;
  font: 500 11px/1 var(--cs-caps) !important; letter-spacing: .18em; text-transform: uppercase; padding: 11px 12px 10px !important;
}
[data-card-style="cover-star"] [data-sec="review"] > :first-child > a:first-child b { font: 800 19px/1 var(--cs-didone) !important; font-variation-settings: "opsz" 14 !important; }
[data-card-style="cover-star"] [data-sec="review"] > :first-child > a:nth-child(2) {
  background: none !important; border-radius: 0 !important; padding: 16px 0 2px !important; margin-top: 16px !important; box-shadow: inset 0 1px 0 var(--cs-rule);
}
[data-card-style="cover-star"] [data-sec="review"] > :first-child > a:nth-child(2) > span:last-child { font: italic 400 16.5px/1.4 var(--cs-serif) !important; color: var(--cs-ink) !important; }
[data-card-style="cover-star"] [data-sec="review"] > :first-child > a:nth-child(2) > span:last-child > span:last-child {
  font: 500 10.5px/1 var(--cs-caps) !important; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap;
}
[data-card-style="cover-star"] [data-sec="review"] > :first-child > button {
  font: 500 10.5px/1 var(--cs-caps) !important; letter-spacing: .2em; text-transform: uppercase; color: var(--cs-kick) !important;
  border-top-color: var(--cs-rule) !important; padding-top: 16px !important; margin-top: 16px !important;
}

/* The route's way out: a ruled caps button, like every other one in the issue. */
[data-card-style="cover-star"] [data-sec="route"] > a:last-child {
  background: none !important; box-shadow: inset 0 0 0 1px var(--cs-rule-ink); border-radius: 2px !important; color: var(--cs-kick) !important;
  font: 500 11.5px/1 var(--cs-caps) !important; letter-spacing: .18em; text-transform: uppercase; padding: 16px 0 15px !important;
}

/* The next issue's dek, under its headline. */
[data-card-style="cover-star"] [data-sec="rebook"] > .font-display + .text-\[13px\] { font: italic 400 17px/1.3 var(--cs-serif) !important; margin-top: 10px !important; }
[data-card-style="cover-star"] [data-sec="rebook"] .uppercase { font: 500 10px/1.4 var(--cs-caps) !important; letter-spacing: .22em !important; text-transform: uppercase; }
[data-card-style="cover-star"] [data-sec="rebook"] > .text-\[11\.5px\].font-bold { font: italic 400 15px/1.35 var(--cs-serif) !important; }

/* The share moment, right after the sweet bit: one quiet strap under the pull quote, never a box. */
[data-card-style="cover-star"] [data-sec="share-nudge"] {
  background: none !important; box-shadow: none !important; border-radius: 0 !important; border-bottom: 1px solid var(--cs-rule) !important;
  padding: 0 0 26px !important; margin: -6px 0 28px; gap: 14px !important;
}
[data-card-style="cover-star"] [data-sec="share-nudge"] div.font-display { font: italic 400 20px/1.15 var(--cs-serif) !important; }
[data-card-style="cover-star"] [data-sec="share-nudge"] .font-display + div { font: italic 400 15px/1.35 var(--cs-serif) !important; margin-top: 3px; }
[data-card-style="cover-star"] [data-sec="share-nudge"] button {
  border-radius: 2px !important; font: 500 11.5px/1 var(--cs-caps) !important; letter-spacing: .2em; text-transform: uppercase;
}

/* The stickers staff put on a photo stay exactly where they were put: still, like a print (a page never wobbles); the
   walk's paw trail is printed on its map rather than looping across it. */
[data-card-style="cover-star"] [data-sec] .anim-floaty { animation: none !important; }
[data-card-style="cover-star"] [data-sec="route"] .paw-step { animation: none !important; opacity: .9 !important; transform: translate(-50%, -50%); }

/* Pills square up to tags; avatars (the same token) stay round. */
[data-card-style="cover-star"] [data-sec]:not([data-sec="cover"]) .pill { border-radius: 3px !important; }
[data-card-style="cover-star"] [data-sec="keepsake"] button { border-radius: 3px !important; }
/* The theme's accent is a fill, not an ink: on paper it is too pale to read, so text set in it takes the kicker's colour. */
[data-card-style="cover-star"] [data-sec] :is([style*="color: var(--accent)"], [style*="color:var(--accent)"]) { color: var(--cs-kick) !important; }
/* A status reads as a coloured word with a dot, never a block: good, keep an eye, noted (each in its own ink). */
[data-card-style="cover-star"] :is([data-sec="health"] .grid, [data-sec="progress"] .flex-col) .pill {
  background: none !important; padding: 4px 0 4px 2px !important; display: inline-flex; align-items: center; gap: 7px;
}
[data-card-style="cover-star"] :is([data-sec="health"] .grid, [data-sec="progress"] .flex-col) .pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
[data-card-style="cover-star"] :is([data-sec="health"] .grid, [data-sec="progress"] .flex-col) .pill[style*="--good"] { color: var(--good-ink) !important; }
[data-card-style="cover-star"] :is([data-sec="health"] .grid, [data-sec="progress"] .flex-col) .pill[style*="--watch"] { color: var(--watch-ink) !important; }
[data-card-style="cover-star"] :is([data-sec="health"] .grid, [data-sec="progress"] .flex-col) .pill[style*="--note"] { color: var(--note-ink) !important; }
[data-card-style="cover-star"] :is([data-sec="health"] .grid, [data-sec="progress"] .flex-col) .pill[style*="--primary"] { color: var(--cs-kick) !important; }
/* The back pages speak the issue's two voices too: headlines in the serif, labels in condensed caps. */
[data-card-style="cover-star"] [data-sec="stay"] .font-display:not(a):not(a *),
[data-card-style="cover-star"] [data-sec="timeline"] .flex-1 .font-display {
  font-family: var(--cs-serif) !important; font-weight: 400 !important; font-size: 19px !important; line-height: 1.15;
}
[data-card-style="cover-star"] [data-sec="look"] > .text-\[12\.5px\] { font: italic 400 16px/1.35 var(--cs-serif) !important; }

/* ─────────── The back pages: quieter surfaces, smaller type, every field still there (§3.8) ─────────── */
[data-card-style="cover-star"] :is([data-sec="ask-email"], [data-sec="ask-birthday"], :is([data-sec="tips"], [data-sec="groomer"])) > :first-child button {
  font-family: var(--cs-caps) !important; font-weight: 500 !important; font-size: 12px !important; letter-spacing: .16em; text-transform: uppercase;
}
[data-card-style="cover-star"] [data-sec="door"] > :first-child {
  background: none !important; color: var(--cs-ink) !important; box-shadow: inset 0 0 0 1px var(--cs-rule) !important;
  animation: none !important; margin: 26px 0; padding: 12px 14px !important;
}
[data-card-style="cover-star"] [data-sec="door"] > :first-child::after { animation: none !important; opacity: 0 !important; }
[data-card-style="cover-star"] [data-sec="door"] > :first-child > span:first-child { font-size: 26px !important; }
[data-card-style="cover-star"] [data-sec="door"] > :first-child .font-display + span { font: italic 400 15px/1.35 var(--cs-serif) !important; color: var(--cs-soft) !important; }
[data-card-style="cover-star"] [data-sec="share"] .cta-glow { animation: none; box-shadow: none; }
[data-card-style="cover-star"] [data-sec="share"] .cta-glow::after { animation: none; opacity: 0; }
[data-card-style="cover-star"] [data-sec="share"] [data-link-preview] { border-radius: 3px !important; }
[data-card-style="cover-star"] :is([data-sec="share"], [data-sec="combo"]) .uppercase { font-family: var(--cs-caps); font-weight: 500; font-size: 10px !important; letter-spacing: .2em !important; text-transform: uppercase; }
[data-card-style="cover-star"] [data-sec="fact"] {
  box-shadow: none !important; border-radius: 0 !important; margin: 26px 0; padding: 16px 16px 17px !important;
}
[data-card-style="cover-star"] [data-sec="fact"] > div { font: italic 400 16px/1.4 var(--cs-serif) !important; }
[data-card-style="cover-star"] [data-sec="fact"] b {
  display: block; font: 500 10px/1.6 var(--cs-caps); letter-spacing: .22em; text-transform: uppercase; color: var(--cs-kick); font-style: normal;
}
[data-card-style="cover-star"] [data-sec="links"] [data-el="title"] + div { gap: 0 !important; box-shadow: inset 0 -1px 0 var(--cs-rule); }
[data-card-style="cover-star"] [data-sec="links"] [data-el="title"] + div > a {
  aspect-ratio: auto !important; background: none !important; border-radius: 0 !important; padding: 17px 6px 15px !important; gap: 9px !important;
  box-shadow: inset 0 1px 0 var(--cs-rule), inset 1px 0 0 var(--cs-rule);
}
[data-card-style="cover-star"] [data-sec="links"] [data-el="title"] + div > a:nth-child(3n + 1) { box-shadow: inset 0 1px 0 var(--cs-rule); }
[data-card-style="cover-star"] [data-sec="links"] a > span:last-child {
  font-family: var(--cs-caps) !important; font-weight: 500 !important; font-size: 10px !important; letter-spacing: .14em; text-transform: uppercase;
}
[data-card-style="cover-star"] [data-sec="milestone"] { border-radius: 0 !important; box-shadow: none !important; padding: 22px 18px !important; margin: 18px 0 8px; }
[data-card-style="cover-star"] [data-sec="milestone"] > div:first-child { font: italic 400 28px/1.05 var(--cs-serif) !important; }
[data-card-style="cover-star"] [data-sec="dogs"] button { font-family: var(--cs-caps); letter-spacing: .12em; text-transform: uppercase; }

/* The colophon: the last page signs off. */
[data-card-style="cover-star"] [data-sec="ending"] { padding: 34px 0 6px !important; border-top: 1px solid var(--cs-rule); margin-top: 26px; }
[data-card-style="cover-star"] [data-sec="ending"]::before { content: ""; display: block; width: 7px; height: 7px; margin: 0 auto 20px; background: var(--cs-spot); }
[data-card-style="cover-star"] [data-sec="ending"] > div:first-child { font: italic 400 32px/1.05 var(--cs-serif) !important; margin-bottom: 12px !important; }
[data-card-style="cover-star"] [data-sec="ending"] > div:nth-child(2) {
  font-family: var(--cs-caps) !important; font-weight: 500 !important; font-size: 10.5px !important; letter-spacing: .22em; text-transform: uppercase; color: var(--cs-soft) !important;
}

/* ═════════════════════════════════ MOTION ═════════════════════════════════
   Each department rises once as it scrolls in; the cover's print never moves (the roundel is its one motion). */
@media (prefers-reduced-motion: no-preference) {
  [data-card-style="cover-star"][data-motion="on"] [data-await]:not([data-seen]) { opacity: 0; }
  [data-card-style="cover-star"][data-motion="on"] [data-await][data-seen] { animation: cs-cover-rise var(--cs-dur) var(--cs-ease) both; }
}
@keyframes cs-cover-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  [data-card-style="cover-star"] [data-sec], [data-card-style="cover-star"] [data-sec] [data-el="title"]::before { animation: none !important; transition: none !important; transform: none !important; }
}

/* 🩷 A TAP CHOICE (the note to the groomer's answers, 16 Oct 2026; by its own hook since 17 Oct, components/cards/CardCheckin
   `data-el="choice"`): it copies this style's own tile (the shop-links tile: its face and its corners), so the biggest
   block on the note speaks the card's language, never the app's. */
[data-card-style="cover-star"] [data-sec] [data-el="choice"] { font-family: var(--cs-caps); font-weight: 400 !important; letter-spacing: .02em; }
/* ✍️ A FIELD (the note's words, the email ask, the birthday; `data-el="field"`): a line to write on, as a magazine's
   reply card prints one. 17 px: an iPhone zooms into any field under 16. */
[data-card-style="cover-star"] [data-sec] [data-el="field"] {
  background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--cs-rule-ink) !important; border-radius: 0 !important;
  font: 400 17px/1.4 var(--cs-serif) !important; color: var(--cs-ink) !important; padding-left: 0 !important;
}

/* 🔠 ROW TITLES (17 Oct 2026): the heading of a tap row (Say thanks, Chat, Loved the visit?, the asks, the Dogdoor),
   one rule by its own hook (components/cards/CardTitle `row`), never by naming sections. test/cardHeadingHook.test.ts. */
[data-card-style="cover-star"] [data-sec] [data-el="row-title"] { font-family: var(--cs-serif) !important; font-weight: 400 !important; font-size: 19px !important; line-height: 1.15 !important; }

/* 🏅 THE GRADUATION (components/graduates/GraduationBlock; test/cardStylesDressEverySection): a graduation card's medal,
   class and certificate button, in this style's own feature box: flat, ruled, the magazine's own tint. Its look is the block's `--grad-*` tokens, re-pointed here; its
   headline is a row title (this style's hook dresses it) and its button a link dressed as this style's buttons are. */
[data-card-style="cover-star"] [data-sec="graduation"] {
  --grad-bg: var(--cs-mast); --grad-fg: var(--cs-ink); --grad-border: 0 solid transparent; --grad-shadow: none;
  --grad-kicker: var(--cs-kick); --grad-cta-bg: var(--cs-spot); --grad-cta-fg: var(--on-primary, #fff); --grad-medal-shadow: drop-shadow(0 8px 10px rgba(0, 0, 0, .22));
  border-radius: 0; border-top: 2px solid var(--cs-rule-ink); border-bottom: 1px solid var(--cs-rule); padding: 18px 16px;
}
[data-card-style="cover-star"] [data-sec="graduation"] [data-el="grad-kicker"] { font-family: var(--cs-caps); font-weight: 600; letter-spacing: .16em; }
[data-card-style="cover-star"] [data-sec="graduation"] [data-el="row-title"] { font-size: 23px !important; font-style: italic; }
[data-card-style="cover-star"][data-theme^="tron"] [data-sec="graduation"] { --grad-bg: var(--surface); --grad-cta-fg: #04121a; }
[data-card-style="cover-star"] [data-sec="graduation"] [data-el="grad-open"] { font-family: var(--cs-caps); font-weight: 500; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; border-radius: 0; }
/* the headline never leaves a word alone on its last line; the medal's ribbon is never cut by the block's edge */
[data-card-style="cover-star"] [data-sec="graduation"] { overflow: visible; }
[data-card-style="cover-star"] [data-sec="graduation"] [data-el="row-title"] { text-wrap: balance; }