/* Shared prototype page styling -- motion + link-cards + page frame
 *
 * The CMS copy of the prototypes' `_shared/` stylesheets, consolidated into ONE resource,
 * in the load order the prototypes use: motion.css -> cards.css -> page-shared.css.
 * Reference it from the FIRST block of any migrated page:
 *     <link rel="stylesheet" href="/r/24?v=N">
 * Bump `?v=` on every edit -- resources are live-on-save.
 *
 * GENERATED by build_shared.py from prototypes/_shared/. Do not hand-edit: the next sync
 * overwrites it. Change the prototype source, then re-run the build.
 *
 * THREE DELIBERATE DIFFERENCES from the prototype originals. Each is a CMS-vs-prototype fact,
 * not a redesign.
 *
 * 1. `fa-swap.css` is NOT included. It re-declares Font Awesome's own @font-face pointing at
 *    `/prototypes/_assets/webfonts/...`, which do not exist here -- including it would override
 *    the layout's locally-served FA Pro and blank every icon on the site.
 *
 * 2. The `@media (prefers-reduced-motion: reduce)` block that UN-GATES the design system's
 *    reduce rules is NOT included (prototype-only, owner 2026-08-19).
 *
 * 3. The first-section top-pad selector is rewritten for the CMS DOM (see its own comment).
 */

/* prototypes/_shared/motion.css — the ambient-motion layer the reference pages carry
 *
 * DEV-ONLY, like everything in this directory: never scanned, never shipped. Loaded by every
 * page prototype alongside `tailwind.css` and the page's own `page.css`.
 *
 * WHY THIS FILE EXISTS. The 2026-08 package drives five ambient behaviours from each page's
 * inline component script: reveal-on-scroll, parallax, count-up, a sticky-stacking hero and a
 * scroll cue. Only the first of those exists in the design system today (`components/reveal.css`
 * + `reveal_controller.js`), and a prototype cannot run Stimulus, so without this file a
 * prototype is a still photograph of a page that moves. That made the ports look faithful when
 * measured and unfaithful when scrolled.
 *
 * SHAPE. Every value lives here; `motion.js` only sets a custom property or toggles a class —
 * the same split @ai-docs/frontend-rules.md requires of a real controller, so these rules are
 * the blueprint if any of this graduates into the design system.
 *
 * The reveal classes are NOT redeclared here — they are real design-system CSS and arrive in
 * `tailwind.css`. `motion.js` mirrors the controller's contract so the prototype shows exactly
 * what production will do.
 */

/* ── Parallax ───────────────────────────────────────────────────────────────────────────────
 * A decorative layer drifting against the scroll. The package sets `transform` inline on every
 * scroll event; here JS writes one number and CSS owns the transform. */
[data-parallax] {
  transform: translateY(var(--px-parallax-y, 0px));
  will-change: transform;
}

/* ── Sticky stacking ────────────────────────────────────────────────────────────────────────
 * A pinned element stays put while later content slides up over it.
 *
 * WHICH ELEMENTS PIN IS A PER-PAGE DECISION, and the package treats it as one — five pages
 * stack, with four different rules between them: Meet Emma pins the hero and shadows the section
 * after it; Homepage v6 pins five named sections; Secondary and Sixth Forms pin their first two
 * groups plus one named group; FE Colleges pins one group only. So this carries no policy at
 * all — the markup says `data-pin` on whatever pins, and `data-pin-shadow` on the one element
 * that casts onto it.
 *
 * `--px-stack-top` is `min(0, viewport - height)`, so anything taller than the viewport finishes
 * scrolling before it pins. Set from JS because it depends on rendered height, and because with
 * JS off the page must simply scroll normally. */
[data-pin] {
  position: sticky;
  top: var(--px-stack-top, 0px);
  z-index: var(--px-z, 1);
}

/* Unpinned content rides above every pinned element, not just the one before it — which is why
 * this is an explicit z and not simply document order. */
[data-pin-over] {
  position: relative;
  z-index: var(--px-z, 20);
}

/* Reduced motion un-sticks everything, and drops the stacking z-index with it. Dropping the z
 * matters even though nothing overlaps at that point: JS never writes `--px-z` under reduced
 * motion, so the fallback would leave a pinned section positioned at z-index 1 above later
 * siblings sitting at `auto` — an ordering that is invisible here only because the boxes no longer
 * intersect. Leaving a latent paint order in place to be discovered later is not worth one line. */

/* WHATEVER SLIDES OVER A PINNED ELEMENT MUST BE OPAQUE, and ours are not by default.
 *
 * A normal section needs no background — the body's `bg-background` shows through and the page
 * looks right. Stack one section on another and that stops being true: the pinned hero reads
 * straight through the section covering it, headline and all. Every section in the reference
 * sets `background: var(--sand)` explicitly, which is why it never had this problem.
 *
 * Later `[data-pin]` groups also slide over earlier pins (Sixth Forms pins the problem group
 * and the grader after the hero). Those never get `data-pin-over`, so they need the same fill.
 *
 * `:where()` so this is a FALLBACK at zero specificity — a section carrying `bg-paper`, or a
 * background from its page stylesheet, still wins. */
:where([data-pin]),
:where([data-pin-over]) {
  background-color: var(--color-page-bg);
}

[data-pin-shadow] {
  box-shadow: 0 -30px 60px rgba(255, 255, 255, 0.88);
}

/* First-section top pad MOVED OUT (2026-08-24) → `_shared/page-shared.css` §1, and raised
   104px → 128px there. It lived here only because motion.css was the first shared file; a
   padding is not motion, and page-shared.css is now the home for set-wide frame rules. */

/* Hero lede: ink-deep at 60%. Page `.dc-lede` rules set ink-soft at 0,2,0 and beat a
   lone utility; #top raises specificity so the HTML class `text-ink-deep/60` is what you
   see. Same color-mix as the Tailwind /60 token. */
#top :is(.dc-lede, [class^="dc-lede-"], [class*=" dc-lede-"]) {
  color: color-mix(in srgb, var(--color-ink-deep) 60%, transparent);
}

/* Section headlines: line-height 1 (`leading-none`). Page `.dc-t-*` rules set 1.0–1.06 at
   0,2,0 and beat a lone utility; this selector matches the HTML class. Card h3s are left alone. */
body.app .section :is(h1, h2).leading-none {
  line-height: 1;
}

/* Hero glob + wash (home-v6 treatment). Canvas is painted by glob.js on `[data-glob]`.
   Do NOT set `#top { position: relative }` here — Meet Emma pins `#top` and an ID rule
   would beat `[data-pin] { position: sticky }`. Pages add `relative overflow-hidden`
   on the section themselves. */
.dc-hero-glob {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--color-page-bg);
}
.dc-hero-glob-canvas { display: block; width: 100%; height: 100%; }
.dc-hero-wash {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 1;
  width: 120vw;
  height: 120vw;
  max-width: 960px;
  max-height: 960px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.64) 40%, rgba(255, 255, 255, 0) 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Left-aligned heroes (owner, 2026-08-24). The base wash is centred on the viewport, which is
   right for a centred hero (home-v6, Meet Emma) and wrong for the nine heroes whose text sits in
   the left column - there the bright core lands ~300px to the RIGHT of the headline and the copy
   gets no lift at all. This modifier re-anchors it to the container, and is a MODIFIER: it keeps
   `.dc-hero-wash`, so the z-index guard below still matches it.

   Two geometry changes beyond the anchor, both forced by the shape of a left column:
   - An ELLIPSE, not a circle. The visible disc of the base wash is ~672px across; a left-aligned
     h1 measure is ~604px and its copy runs below - a circle wide enough to cover that would also
     be tall enough to bleach the whole band.
   - `closest-side`, so the stops map to the box's own edges rather than to a circle sized off its
     corners. The alpha stops are the base rule's, unchanged - this is a repositioning, not a
     stronger wash.

   The anchor reads as: centre 300px right of the container's left content edge (which is where a
   604px headline's own centre falls at 1440) and 170px down (its first line). `min(..., 50%)`
   collapses the anchor back to centred on narrow viewports, where the hero is one full-bleed
   column and there is no left column to sit under - so no media query is needed. */
.dc-hero-wash-left {
  left: min(calc(max(24px, (100% - 1200px) / 2) + 300px), 50%);
  top: 170px;
  width: min(1180px, 160vw);
  height: min(760px, 115vw);
  max-width: none;
  max-height: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.64) 40%, rgba(255, 255, 255, 0) 70%);
}

#top > :not(.dc-hero-glob):not(.dc-hero-wash) { z-index: 1; }
#top > .page-container,
#top > .dc-hero-inner,
#top > .dc-container-1100,
#top > [class*="dc-measure"] { position: relative; }

/* ── Scroll cue ─────────────────────────────────────────────────────────────────────────────
 * The nudging arrow under a hero, which fades out once the hero is behind you. */
[data-scroll-cue] {
  opacity: var(--px-cue-opacity, 1);
  transition: opacity 0.4s ease;
}

[data-scroll-cue][data-cue-hidden] {
  pointer-events: none;
}

/* The cue's own look, identical on all 19 pages that carry one, so it lives here rather than in
 * nineteen page stylesheets. Measured: fixed 26px from the right, 24px from the bottom, a 38px
 * hit area, a 17px chevron in ink-mute, nudging 7px on a 2s loop. */
.dc-scroll-cue {
  position: fixed;
  right: 26px;
  bottom: 24px;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  text-decoration: none;
}

.dc-scroll-cue i {
  font-size: 17px;
  color: var(--color-ink-mute);
  animation: px-cue-nudge 2s ease-in-out infinite;
}

@keyframes px-cue-nudge {
  0%, 100% { transform: translateY(0); opacity: 0.9; }
  50%      { transform: translateY(7px); opacity: 0.45; }
}

/* ── Underline draw ─────────────────────────────────────────────────────────────────────────
 * A hand-drawn underline SVG that draws itself once, in place of counting. The dash offset is
 * seeded by JS from the path's own length, so any path works. */
[data-uline] path {
  transition: stroke-dashoffset 1.1s ease 0.35s;
}

/* prototypes/_shared/cards.css — reusable link cards and MIS integration layout
 *
 * DEV-ONLY. Loaded by every page prototype (after motion.css, before page.css).
 * Page.css keeps only deltas unique to that page (grid columns, a paper fill, an extra link).
 *
 * `.dc-linkcard` is the sand card used on Home v6 Solutions, Meet Emma Who she works for,
 * and Platform The whole platform. Icon above the title, bare duotone glyph, 22px title,
 * 15px ink-mute desc, equal 22px pad, hover is scale 1.02 only (no lift, no extra shadow).
 *
 * Markup:
 *   <a class="dc-linkcard" href="…">
 *     <i class="fa-duotone fa-graduation-cap" aria-hidden="true"></i>
 *     <span>
 *       <span class="dc-t-22 block text-ink-deep">Title</span>
 *       <span class="dc-body-15 block mt-1">Lede</span>
 *     </span>
 *     <span class="dc-add-more">See it <i class="fa-solid fa-angle-right"></i></span>
 *   </a>
 *
 * Modifiers:
 *   .dc-linkcard-paper  — white card, no shadow (Platform product grid)
 *   .dc-linkcard-ink    — on the <i>, navy duotone instead of coral
 *
 * MIS markup:
 *   <div class="dc-mis-grid">
 *     <div>
 *       <span class="dc-mis-eyebrow font-medium">Integration</span>
 *       <h2 class="dc-mis-heading font-bold">The ultimate partner for your MIS.</h2>
 *       <p class="dc-mis-copy">Copy</p>
 *     </div>
 *     <div class="dc-mis-logos">
 *       <div class="card dc-mis-cell"><img class="dc-mis-mark" …></div>
 *     </div>
 *   </div>
 *
 * MIS modifier:
 *   .dc-mis-logos-6 — three logo columns for six supported systems (Platform)
 */

/* `body.app` so these beat page-scoped type/icon rules (0,2,0) without !important. */
body.app .dc-linkcard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
  background: var(--color-page-bg);
  border-radius: var(--radius-4);
  padding: 22px;
  transition: transform .36s cubic-bezier(.2, .8, .2, 1);
}
body.app a.dc-linkcard:hover {
  transform: scale(1.02);
}

body.app .dc-linkcard-paper {
  background: var(--color-paper);
  box-shadow: none;
  padding: 26px;
}

body.app .dc-linkcard > i,
body.app .dc-linkcard > .dc-tile {
  margin-bottom: 18px;
}
body.app .dc-linkcard > i,
body.app .dc-linkcard .dc-tile i {
  font-size: 28px;
  color: var(--color-coral-500);
  --fa-primary-color: currentColor;
  --fa-secondary-color: currentColor;
  --fa-secondary-opacity: 0.4;
}
body.app .dc-linkcard > i.dc-linkcard-ink {
  color: var(--color-ink-deep);
}

body.app .dc-linkcard .dc-t-22,
body.app .dc-linkcard .dc-h-16 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0 0 10px;
}
body.app .dc-linkcard .dc-body-15 {
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-ink-mute);
  margin: 0;
}

body.app .dc-linkcard .dc-add-more {
  margin-top: auto;
  padding-top: 14px;
  color: var(--color-coral-500);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  line-height: normal;
}

body.app .dc-linkcard .dc-add-more i { font-size: 9px; }

/* MIS integration split — promoted from Platform and shared by product/audience prototypes.
 * Copy sits left; supported-system marks sit in DS cards right. Keep the number of marks honest:
 * the base is two columns for two/four marks, while `.dc-mis-logos-6` makes Platform's 3×2 grid. */
body.app .dc-mis-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
body.app .dc-mis-eyebrow {
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-label);
  font-size: 12.5px;
  line-height: var(--line-height-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-coral-500);
}
body.app .dc-mis-heading {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--color-ink-deep);
}
body.app .dc-mis-copy {
  margin-top: 12px;
  margin-bottom: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-ink-soft);
}
body.app .dc-mis-logos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
body.app .dc-mis-logos-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.app .dc-mis-cell {
  height: 76px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.app .dc-mis-cell img { max-width: 82%; object-fit: contain; }
body.app .dc-mis-mark { width: auto; height: 34px; }
body.app .dc-mis-30 { width: auto; height: 30px; }
body.app .dc-mis-68 { height: 68px; }
body.app .dc-mis-24 { width: auto; height: 24px; }
body.app .dc-mis-46 { width: auto; height: 46px; }

@media (max-width: 1080px) {
  body.app .dc-mis-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  body.app .dc-mis-logos-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* prototypes/_shared/page-shared.css — shared page-frame rules
 *
 * DEV-ONLY. Loaded by every page prototype (after cards.css, before page.css).
 * The home for rules that are the SAME on every page and would otherwise be copied into all
 * 31 page.css files. Add to it whenever a value turns out to be set-wide rather than per-page.
 *
 * Contents:
 *   1. First-section top pad
 *   2. Page geometry — container width + section gutter
 *   3. Compact feature blocks — shared benefit/value cards
 *   4. Unwrapped capability grid — Meet Emma treatment
 *   5. Audience toolkit — shared rail, add-ons + panel card
 *   6. Audience admissions audit — Home v6 treatment
 *   7. Flagship report resources — shared publication feature
 */

/* ── 1 · First-section top pad ─────────────────────────────────────────────────────────────
 * Owner, 2026-08-18 (104px) → 2026-08-24 (128px). One value for every page.
 *
 * The package mixed 40px (Webinars / Events / Customer Success) with 124–148px (audience /
 * product / legal) so a future sticky site-header (~61–77px: py-4 + logo/btn + hairline) would
 * clear. 104px was the first attempt at one number; 128px is the settled one — the same
 * clearance with the air the taller pages had.
 *
 * This rule OWNS the hero's top pad; the bottom is either a page-local reference value or one of
 * the DS per-side variants. Ten product/audience heroes moved from their local 24px override to
 * `section-pb-sm` on 2026-08-25 (64 / 48 / 40px), while the remaining page-local class names keep
 * the reference measurements as provenance.
 *
 * Specificity is 0,3,1 against a page rule's 0,2,0, so this wins wherever a page still declares
 * its own `padding-top` — but no page should: delete it there rather than fighting it here.
 *
 * The selector is the first section after the shared header, which `site-chrome.js` inserts
 * asynchronously — `[data-site-header]` is the static slot, so this holds before the fetch and
 * with JS off. Later stack groups must NOT inherit it, hence `:first-child` on the group form.
 * Moved here from `_shared/motion.css` (2026-08-24): a padding is not motion. */
/* The CMS DOM is not the prototype DOM: blocks render with no per-block wrapper, concatenated
 * inside <main>, so `body.app > X` never matches -- sections are grandchildren of body.app. A
 * page that wraps its sections in a page-scope div is one level deeper again. Hence BOTH forms:
 * `main > .section` for an unwrapped page, `main > div > .section` for a wrapped one.
 * `:first-of-type` counts by tag, and the only other element children of <main> are the chrome's
 * <header>/<footer>/<link>/<script>, so the first <section> is the hero either way. */
body.app main > .section:first-of-type,
body.app main > div > .section:first-of-type {
  padding-top: 128px;
}

/* ── 2 · Page geometry ─────────────────────────────────────────────────────────────────────
 * The package's own numbers, and they are a PAIR: a 1200px container inside a flat 24px
 * gutter. 1200 is exactly `1224 − 24` — the DS container with the package's gutter folded in,
 * which is why moving one without the other would not reproduce the reference.
 *
 * This was 60 identical declarations, one `.section` rule on all 31 pages and one
 * `.page-container` rule on 29 (About and Integrations size their own wrappers and never use
 * the class, so the rule is inert on them and the set stays uniform). No page qualified either
 * value at a breakpoint — there was not one media query touching them — so the pair is flat,
 * exactly as the reference has it.
 *
 * DELIBERATELY NOT THE DESIGN SYSTEM'S VALUES. The DS ships `.section { px-8 max-md:px-4 }`
 * (32px → 16px) and `.page-container { max-width: 1224px }`, and that difference was measured
 * and settled the DS's way on 2026-08-17 (`docs/AVAILABLE_COMPONENTS.md` → Usage Recipes): the
 * package's flat gutter is *narrower* on a phone, so it works against the mobile-overflow work
 * rather than with it. The prototypes keep the package's pair for fidelity; the design system
 * keeps its own. Aligning the prototypes to the DS is a live question, not an oversight —
 * it moves every section on all 31 pages by 16–24px. */
body.app .section { padding-left: 24px; padding-right: 24px; }
body.app .page-container { max-width: 1200px; }

/* ── 3 · Compact feature blocks ───────────────────────────────────────────────────────────
 * Shared by the About values, Integrations outcomes and Partnerships benefits grids. The
 * variant preserves the base feature block's surface and typography while making the content
 * rhythm intentionally tighter and allowing Font Awesome icons to use their natural box. */
.feature-block.feature-block-compact {
  gap: 8px;
  padding: 24px;
}

.feature-block.feature-block-compact > * {
  margin-block: 0;
}

.feature-block.feature-block-compact .feature-block-icon {
  width: auto;
  height: auto;
  justify-content: flex-start;
  margin-bottom: 4px;
}

.feature-block.feature-block-compact .feature-block-icon i {
  font-size: 28px;
  line-height: 1;
}

/* ── 4 · Unwrapped capability grid ────────────────────────────────────────────────────────
 * Shared by Meet Emma's “What she does” grid, Sixth Forms' “All year round” features,
 * Secondary Schools' faith features and Faith Schools' capability row. The cards have no
 * surface or padding: spacing lives
 * between the columns, while a bare duotone icon, compact heading and body copy establish the
 * internal rhythm. */
body.app .dc-grid-cap {
  column-gap: 56px;
  row-gap: 74px;
}

body.app .dc-tile-icon {
  display: inline-flex;
  flex: none;
}

body.app .dc-tile-icon i {
  --fa-primary-color: var(--color-ink-royal);
  --fa-secondary-color: var(--color-coral-500);
  --fa-secondary-opacity: 0.85;
  color: var(--color-ink-royal);
  font-size: 30px;
  line-height: 1;
}

body.app .dc-t-20c {
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: wrap;
}

body.app .dc-body-145t {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: 14.5px;
  line-height: 1.5;
}

/* ── 5 · Audience toolkit ─────────────────────────────────────────────────────────────────
 * Shared by the six Audience pages that use the "Everything the journey runs on" tabbed
 * toolkit. Faith Schools has a different journey rail; Local Authorities has no toolkit.
 *
 * `.prototype-toolkit` is deliberately required at the root. Several pages use the same
 * historic `dc-rail` / `dc-tool-panel` names elsewhere, so an unscoped rule would restyle
 * unrelated journey steppers. The inner names remain in place until the prototypes are fully
 * migrated, while this file owns the repeated layout and visual treatment. */
.prototype-toolkit {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: clamp(20px, 2.5vw, 36px);
  align-items: start;
  padding: clamp(16px, 2vw, 24px);
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-4\.5);
  box-shadow: 0 20px 60px rgb(15 26 79 / 0.07);
}

body.app .prototype-toolkit :is(.dc-rail, .dc-rail-tabs) {
  display: flex;
  flex-direction: column;
}

body.app .prototype-toolkit .tab.dc-rail-item {
  width: 100%;
  justify-content: flex-start;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  text-align: left;
}

body.app .prototype-toolkit .dc-rail-label {
  color: inherit;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  line-height: normal;
}

body.app .prototype-toolkit .dc-rail-item > i {
  flex: none;
  width: 20px;
  color: var(--color-ink-mute);
  font-size: 15px;
  text-align: center;
}

body.app .prototype-toolkit .dc-rail-item > i:last-child:not(:first-child),
body.app .prototype-toolkit .dc-rail-item .dc-rail-chevron {
  width: auto;
  margin-left: auto;
  font-size: 11px;
}

body.app .prototype-toolkit .dc-rail-addons {
  display: grid;
  gap: 6px;
  margin-top: 6px;
}

body.app .prototype-toolkit .dc-rail-addon {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  color: var(--color-ink-deep);
  text-align: left;
  text-decoration: none;
  background: var(--color-page-bg-soft, var(--color-background));
  border: 0;
  border-radius: var(--radius-3\.5);
  box-shadow: none;
}

body.app .prototype-toolkit .dc-rail-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

body.app .prototype-toolkit .dc-rail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body.app .prototype-toolkit .dc-rail-tag {
  flex: none;
  padding: 3px 8px;
  color: var(--color-ink-mute);
  font-family: var(--font-label);
  font-size: 8.5px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-full);
}

body.app .prototype-toolkit .dc-rail-tag-coral {
  color: var(--color-coral-500);
  background: var(--color-coral-100);
}

body.app .prototype-toolkit :is(.dc-card-tool, .dc-tool-panel, .dc-tk-panel) {
  padding-block: 20px;
  padding-right: 24px;
  padding-left: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body.app .prototype-toolkit :is(.dc-tool-emma, .dc-emma-note) {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 24px 0 0;
  padding: 13px 17px;
  color: var(--color-ink-deep);
  background: var(--color-page-bg);
  border: 0;
  border-radius: var(--radius-3);
}

body.app .prototype-toolkit :is(.dc-tool-emma, .dc-emma-note) > span:last-child {
  color: var(--color-ink-deep);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.45;
}

@media (max-width: 640px) {
  .prototype-toolkit {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  body.app .prototype-toolkit :is(.dc-card-tool, .dc-tool-panel, .dc-tk-panel) {
    padding: 20px 0 0;
  }
}

/* ── 6 · Audience admissions audit ─────────────────────────────────────────────────────────
 * Home v6's current royal-panel audit, reused by Independent Schools and Sixth Forms. The
 * `.prototype-audit` marker keeps the sizeable mock vocabulary away from unrelated grade cards. */
body.app .section.prototype-audit { padding-bottom: 0; }

.prototype-audit .dc-panel-audit {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 80px) clamp(28px, 5vw, 72px);
  color: var(--color-paper);
  background: var(--color-ink-royal);
  border-radius: var(--radius-5\.5) var(--radius-5\.5) 0 0;
  overflow: visible;
}

.prototype-audit .dc-grid-audit {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

.prototype-audit .dc-pill-dark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  color: var(--dc-on-dark-bright, var(--color-paper));
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: var(--radius-full);
}

.prototype-audit .dc-live-dot {
  width: 7px;
  height: 7px;
  flex: none;
  background: var(--color-ok-green-bright);
  border-radius: 50%;
}

.prototype-audit .dc-search {
  display: flex;
  max-width: 540px;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  padding: 7px 7px 7px 16px;
  background-color: color-mix(in srgb, var(--color-paper) 16%, transparent);
  border-radius: var(--radius-2\.5);
}

.prototype-audit .dc-search-field {
  position: relative;
  display: flex;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.prototype-audit .dc-search input {
  min-width: 0;
  flex: 1;
  color: var(--color-paper);
  font-family: var(--font-sans);
  font-size: 15px;
  background: transparent;
  border: 0;
  outline: none;
}

.prototype-audit .dc-search input::placeholder { color: var(--color-paper); opacity: 1; }

.prototype-audit .dc-search-rot {
  position: absolute;
  top: 50%;
  left: 0;
  max-width: 100%;
  color: var(--color-paper);
  font-family: var(--font-sans);
  font-size: 15px;
  white-space: nowrap;
  pointer-events: none;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: translateY(-50%);
  transition: opacity 250ms ease;
}

.prototype-audit .dc-search-rot.is-fading { opacity: 0; }
.prototype-audit .dc-search-rot[hidden] { display: none; }

.prototype-audit .dc-ap-frame {
  position: relative;
  min-width: 0;
  background: var(--color-paper);
  border-radius: var(--radius-4\.5);
  box-shadow: var(--dc-shadow-audit), 0 0 0 1px color-mix(in srgb, var(--color-ink-deep) 6%, transparent);
  overflow: hidden;
}

.prototype-audit .dc-ap {
  --dc-g-a: #2BAE5E;
  --dc-g-b: #4BB573;
  --dc-g-c: #E8852B;
  --dc-g-d: #DD5F2A;
  --dc-g-f: #D14040;
  --dc-ap-surface: #F2F5FB;
  position: relative;
  width: 100%;
  padding: 1.571em 1.714em 1.714em;
  color: var(--color-ink-deep);
  font-family: var(--font-sans);
  font-size: 13px;
  background: var(--dc-ap-surface);
  aspect-ratio: 1.4;
  overflow: hidden;
}

.prototype-audit .dc-ap::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 8.767em;
  content: "";
  background-image: linear-gradient(0deg, var(--dc-ap-surface), transparent);
}

.prototype-audit .dc-ap-head { position: relative; margin-bottom: 0.543em; }
.prototype-audit .dc-ap-eyebrow {
  margin-bottom: 0.571em;
  color: var(--color-ink-mute);
  font-family: var(--font-heading);
  font-size: 0.75em;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.prototype-audit .dc-ap-name {
  margin: 0 0 0.182em;
  color: var(--color-ink-deep);
  font-family: var(--font-heading);
  font-size: 1.571em;
  font-weight: 700;
  letter-spacing: -0.02em;
  transition: opacity 250ms ease;
}

.prototype-audit .dc-ap-meta {
  position: absolute;
  right: 0;
  bottom: 0;
  margin-bottom: 0.615em;
  color: var(--color-ink-mute);
  font-size: 0.929em;
  transition: opacity 250ms ease;
}

.prototype-audit .dc-ap-dot { margin: 0 0.462em; opacity: 0.5; }
.prototype-audit .dc-ap-mis { color: #1F9D55; font-weight: 600; }
.prototype-audit .dc-ap-meta-muted { letter-spacing: 0.08em; opacity: 0.55; }

.prototype-audit :is(.dc-ap-name, .dc-ap-meta, .dc-ap-badge, .dc-ap-score-title, .dc-ap-grade).is-fading {
  opacity: 0;
}

.prototype-audit .dc-ap-grid {
  display: grid;
  grid-template-columns: 20em minmax(0, 1fr);
  gap: 1.143em;
  align-items: start;
}

.prototype-audit .dc-ap-score {
  margin-bottom: 0.714em;
  padding: 1.286em 1.143em;
  text-align: center;
  background: var(--color-paper);
  border-radius: 1em;
  box-shadow: 0 0.071em 0 rgb(15 26 79 / 0.04);
}

.prototype-audit .dc-ap-score-label {
  margin-bottom: 1.091em;
  color: var(--color-ink-mute);
  font-family: var(--font-heading);
  font-size: 0.786em;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.prototype-audit .dc-ap-badge {
  display: inline-flex;
  width: 1.778em;
  height: 1.778em;
  align-items: center;
  justify-content: center;
  color: var(--color-paper);
  font-family: var(--font-heading);
  font-size: 2.571em;
  font-weight: 700;
  border-radius: 0.444em;
  transition: opacity 250ms ease;
}

.prototype-audit .dc-ap-score-title {
  margin-top: 0.625em;
  color: var(--color-ink-deep);
  font-family: var(--font-heading);
  font-size: 1.143em;
  font-weight: 700;
  transition: opacity 250ms ease;
}

.prototype-audit .dc-ap-score-desc { margin-top: 0.5em; color: var(--color-ink-mute); font-size: 0.857em; line-height: 1.4; }
.prototype-audit .dc-ap-dims { display: flex; flex-direction: column; gap: 0.129em; }

.prototype-audit .dc-ap-dim {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.649em 0.923em;
  color: var(--color-ink-deep);
  font-size: 0.929em;
  background: var(--color-paper);
  border-radius: 0.769em;
  box-shadow: 0 0.077em 0 rgb(15 26 79 / 0.03);
}

.prototype-audit .dc-ap-grade {
  display: inline-flex;
  width: 2em;
  height: 2em;
  align-items: center;
  justify-content: center;
  color: var(--color-paper);
  font-family: var(--font-heading);
  font-size: 0.846em;
  font-weight: 700;
  border-radius: 0.545em;
  transition: opacity 250ms ease;
}

.prototype-audit .dc-ap-g-a { background: var(--dc-g-a); }
.prototype-audit .dc-ap-g-b { background: var(--dc-g-b); }
.prototype-audit .dc-ap-g-c { background: var(--dc-g-c); }
.prototype-audit .dc-ap-g-d { background: var(--dc-g-d); }
.prototype-audit .dc-ap-g-f { background: var(--dc-g-f); }
.prototype-audit .dc-ap-badge.dc-ap-g-a { background: linear-gradient(135deg, #2BAE5E, #1E8A48); box-shadow: 0 0.167em 0.389em -0.111em rgb(30 138 72 / 0.4); }
.prototype-audit .dc-ap-badge.dc-ap-g-b { background: linear-gradient(135deg, #4BB573, #358F58); box-shadow: 0 0.167em 0.389em -0.111em rgb(53 143 88 / 0.4); }
.prototype-audit .dc-ap-badge.dc-ap-g-c { background: linear-gradient(135deg, #E8852B, #C9651A); box-shadow: 0 0.167em 0.389em -0.111em rgb(201 101 26 / 0.4); }
.prototype-audit .dc-ap-badge.dc-ap-g-d { background: linear-gradient(135deg, #DD5F2A, #BC4818); box-shadow: 0 0.167em 0.389em -0.111em rgb(188 72 24 / 0.4); }
.prototype-audit .dc-ap-badge.dc-ap-g-f { background: linear-gradient(135deg, #D14040, #A82D2D); box-shadow: 0 0.167em 0.389em -0.111em rgb(168 45 45 / 0.4); }

.prototype-audit .dc-ap-panels { min-width: 0; }
.prototype-audit .dc-ap-panel {
  margin-bottom: 0.257em;
  padding: 1em 1.286em;
  background: var(--color-paper);
  border-radius: 1em;
  box-shadow: 0 0.071em 0 rgb(15 26 79 / 0.04);
}
.prototype-audit .dc-ap-panel:last-child { margin-bottom: 0; }
.prototype-audit .dc-ap-panel h4 {
  display: flex;
  align-items: center;
  gap: 0.571em;
  margin: 0 0 0.229em;
  color: var(--color-ink-deep);
  font-family: var(--font-heading);
  font-size: 1em;
  font-weight: 700;
}
.prototype-audit .dc-ap-panel p { margin: 0; color: var(--color-ink-mute); font-size: 0.857em; line-height: 1.4; }

@media (min-width: 901px) {
  .prototype-audit .dc-ap-frame {
    align-self: end;
    margin-right: calc(-1 * (clamp(28px, 5vw, 72px) + 96px));
    margin-bottom: calc(-1 * clamp(48px, 6vw, 80px));
    border-radius: var(--radius-4\.5) var(--radius-4\.5) 0 0;
    box-shadow: -28px 0 56px -20px rgb(4 8 24 / 0.45), 0 0 0 1px color-mix(in srgb, var(--color-ink-deep) 6%, transparent);
  }
}

@media (max-width: 900px) {
  .prototype-audit .dc-ap { font-size: 1.9vw; }
}

@media (max-width: 640px) {
  .prototype-audit .dc-grid-audit { grid-template-columns: minmax(0, 1fr); }
  .prototype-audit .dc-search { align-items: stretch; flex-wrap: wrap; }
  .prototype-audit .dc-search-field { min-height: 40px; align-items: center; }
  .prototype-audit .dc-search .btn { width: 100%; justify-content: center; }
  .prototype-audit .dc-ap { font-size: 1.9vw; }
}

/* ── 7 · Flagship report resources ─────────────────────────────────────────────────────────
 * Shared by Sixth Forms, Secondary Schools, Nursery and Primary, and MAT Management. The
 * report leads at two-thirds width, with two supporting resource cards stacked beside it. The
 * publication cover is HTML/CSS artwork so every page gets the same finished asset treatment. */
body.app .prototype-report-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

body.app .prototype-report-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
  height: 100%;
  gap: 28px;
  padding: 22px 28px;
  color: var(--color-paper);
  background-color: var(--color-ink-royal);
  border: 0;
  transition-property: box-shadow, transform;
  transition-duration: 200ms, 150ms;
  transition-timing-function: cubic-bezier(.2, .8, .2, 1), ease;
}

body.app .prototype-report-card:hover {
  border-color: transparent;
  box-shadow: 0 16px 40px rgb(4 8 24 / 0.35);
  transform: translateY(-2px);
}

body.app .prototype-report-copy {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

body.app .prototype-report-copy .btn { align-self: flex-start; }

body.app .prototype-report-copy > .dc-eyebrow {
  display: block;
  color: var(--color-coral-500);
  font-family: var(--font-label);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.app .prototype-report-stack {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 10px;
}

body.app .prototype-report-stack .dc-res { flex: none; }

body.app .prototype-report-cover {
  position: relative;
  flex: none;
  width: 176px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background-color: var(--color-paper);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-dark);
}

body.app .prototype-report-cover-spine {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 8px;
  background-color: var(--color-ink-deep);
}

body.app .prototype-report-cover-band {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  height: 6px;
  background-color: var(--color-coral-500);
}

body.app .prototype-report-cover-inner {
  display: flex;
  height: 100%;
  flex-direction: column;
  padding: 22px 14px 14px 20px;
}

body.app .prototype-report-cover-mark {
  color: var(--color-coral-500);
  font-family: var(--font-label);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body.app .prototype-report-cover-kicker {
  margin-block-start: 14px;
  color: var(--color-ink-mute);
  font-family: var(--font-label);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body.app .prototype-report-cover-title {
  margin-block-start: 6px;
  color: var(--color-ink-deep);
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

body.app .prototype-report-cover-rule {
  width: 28px;
  height: 3px;
  margin-block-start: 12px;
  background-color: var(--color-coral-500);
  border-radius: var(--radius-full);
}

body.app .prototype-report-cover-foot {
  margin-block-start: auto;
  color: var(--color-ink-mute);
  font-family: var(--font-label);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  body.app .prototype-report-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  body.app .prototype-report-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 26px 24px;
  }

  body.app .prototype-report-cover { width: 140px; }
}