@layer reset, tokens, base, components, utilities, overrides;
@layer components.core, components.controls, components.overlays, components.vedic, components.sky, components.tattva, components.abstract, components.site, components.pages;
/* Google Fonts: linked from src/app/layout.tsx (FONTS_CSS), not @import-ed here, so it loads in parallel. */

/* Pandox DS v2 — the one stylesheet. Order: tokens.css (tokens.json compiled into @layer tokens) → this file.
   This file holds, in order: reset, base, utilities, components.core, a few cross-package bridges (Cover lock,
   Masthead theme button, BusinessCard signature, IconButton), the overrides print list, and then — below the
   PACKAGE PARTS marker — every package part (controls, overlays, site, pages, vedic, sky, tattva, …), each in its own
   @layer components.<family>. Layer order comes from the two @layer statements above, not from source order.
   Rules: tokens only; specificity ≤ (0,2,0); logical props; container queries (30/48/64em); no [data-theme];
   !important only in reduced-motion, forced-colors, print (stripping shadows on paper), .pd-visually-hidden, [data-section][hidden].
   Google Fonts imported into layer(base). */

/* ══ reset ══════════════════════════════════════════════════════════════ */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  :where(img, svg, video, canvas, picture) { max-inline-size: 100%; }
  :where(img, video) { block-size: auto; }
  :where(button, input, select, textarea) { font: inherit; letter-spacing: inherit; }
}

/* ══ base ═══════════════════════════════════════════════════════════════ */
@layer base {
  /* the empty-section rule (README §0.4): a section-bound element hidden by the registry is gone, whatever its component's display */
  [data-section][hidden] { display: none !important; }
  html { background: var(--surface); color: var(--text); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { margin: 0; background: var(--surface); color: var(--text); font: var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "kern", "liga", "onum"; }
  :where(a) { color: var(--link); text-decoration-line: underline; text-decoration-thickness: from-font; text-underline-offset: .2em; text-decoration-skip-ink: auto; }
  :where(a):visited { color: var(--link); }
  @media (hover: hover) { :where(a):hover { text-decoration-thickness: 2px; } }
  :focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
  ::selection { background: var(--saffron-100); color: var(--ink-900); }
  :where(:lang(sa), :lang(ne), :lang(hi)):where(:not(:lang(sa-Latn))) { font-family: var(--font-deva); }

  /* Reduced motion: every duration token → 0; loops opt in under no-preference. */
  @media (prefers-reduced-motion: reduce) {
    :root, [data-theme] { --dur-1: 0ms !important; --dur-2: 0ms !important; --dur-3: 0ms !important; --dur-4: 0ms !important; --dur-draw: 0ms !important; --dur-loop: 0ms !important; }
    html { scroll-behavior: auto !important; }
  }

  /* One forced-colors map (Windows contrast themes). Zero specificity: components refine. */
  @media (forced-colors: active) {
    :focus-visible { outline-color: Highlight !important; }
    :where([aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], :checked) { background-color: Highlight !important; color: HighlightText !important; border-color: Highlight !important; }
    :where(:disabled, [aria-disabled="true"]) { color: GrayText !important; border-color: GrayText !important; }
    :where(progress, [role="progressbar"], meter) { accent-color: Highlight; }
    :where(.pd-stroke) { stroke: CanvasText !important; }
  }

  @media print {
    @page { size: A4; margin: 16mm 18mm; }
    /* Paper re-pin: every theme prints as Paper on white. It lives in tokens.css (@layer tokens, generated from
       tokens.json: every themed token at its Paper value, --paper-000 → #ffffff), so no theme primitive is missed. */
    body { font-size: 11pt; }
    :where(.pd-prose) a[href^="http"]::after { content: " (" attr(href) ")"; font: var(--font-meta); color: var(--text-subtle); overflow-wrap: anywhere; }
    :where(.pd-paper, .pd-tag, .pd-status) { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  }
}

/* ══ utilities (beat components by layer order; semantic colours) ══ */
@layer utilities {
  .pd-visually-hidden, .pd-visually-hidden--focusable:not(:focus, :focus-within) {
    position: absolute !important; inline-size: 1px !important; block-size: 1px !important; margin: -1px !important; padding: 0 !important;
    overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important;
  }
  .pd-hit { position: relative; }
  .pd-hit::before { content: ""; position: absolute; inset: 0; margin: auto; inline-size: max(100%, var(--target-min)); block-size: max(100%, var(--target-min)); }
  .pd-skip { position: absolute; inset-block-start: var(--space-2); inset-inline-start: var(--space-2); z-index: var(--z-overlay); display: inline-flex; align-items: center; min-block-size: var(--target-min); padding: var(--space-2) var(--space-4); background: var(--text); color: var(--surface); font: var(--font-label); text-decoration: none; translate: 0 -300%; }
  .pd-skip:focus, .pd-skip:focus-visible { translate: 0 0; }
  .pd-kicker { font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
  .pd-kicker--accent { color: var(--text); }   /* emphatic by weight + tracking only: saffron is reserved for the one bindu per view */
  .pd-kicker--ink { color: var(--text); }
  .pd-num { font: var(--font-numeral); letter-spacing: var(--track-mono); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
  .pd-num--current { color: var(--accent); }
  .pd-meta { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
  .pd-label-micro { font: 500 var(--fs-meta)/1.3 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-subtle); }
  .pd-stroke { fill: none; stroke: currentColor; stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-linecap: square; stroke-linejoin: miter; }
  .pd-stroke--em { stroke-width: 1.5px; }
  .pd-stack > * + * { margin-block-start: var(--pd-stack, var(--space-4)); }
  .pd-rule { border: 0; border-block-start: var(--hairline) solid var(--rule); margin-block: var(--space-6); }
  .pd-rule--strong, .pd-rule--ink { border-block-start-color: var(--rule-strong); }
  /* System bindu = --bindu fill + --bindu-rim hairline (the rim carries 3:1 on Paper). SVG: fill bindu, stroke bindu-rim 1px. Sky: --bindu-on-sky. */
  .pd-bindu { display: inline-block; inline-size: .5em; block-size: .5em; border-radius: var(--radius-pill); background: var(--bindu); box-shadow: inset 0 0 0 max(1px, .1em) var(--bindu-rim); vertical-align: .1em; }
}

/* ══ components.core ═══════════════════════════════════════════════════ */
@layer components.core {
/* Kit kickers share the .pd-kicker type (same declarations as the utility) in this, the first components sub-layer, so a kit's own later-layer overrides (e.g. .pd-callout--warning colour) still win; each kit rule adds only margin/alignment. */
:is(.pd-ch-frame__kicker, .pd-dg__kicker, .pd-reviews__kicker, .pd-callout__kicker, .pd-cover__kicker) { font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }

/* ── Lockup + mark (sprite: engines/mark.js → <use href="#pd-mark">) ── */
.pd-lockup { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--target-min); color: var(--text); text-decoration: none; font-size: var(--fs-body-s); }
.pd-mark { display: block; flex: none; inline-size: 2.4em; block-size: 2.4em; fill: currentColor; }
.pd-mark .pdx { fill: currentColor; }
.pd-lockup__name { font: 600 1.75em/1 var(--font-display); letter-spacing: var(--track-display); white-space: nowrap; }
.pd-lockup__sub { display: block; margin-block-start: var(--space-2); font: 500 .75em/1.3 var(--font-sans); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); text-wrap: balance; }
.pd-lockup--stacked { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.pd-lockup--stacked .pd-mark { inline-size: 4em; block-size: 4em; }
.pd-lockup--reversed { padding: var(--space-4) var(--space-5); background: var(--text); color: var(--surface); --text-muted: var(--surface); }
a.pd-lockup:focus-visible { outline-offset: var(--space-1); }

/* ── Button ── */
.pd-btn {
  --pd-btn-bg: transparent; --pd-btn-fg: var(--text); --pd-btn-bd: var(--border-control); --pd-btn-bd-h: var(--text); --pd-btn-wash: transparent;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-block-size: var(--control-block); min-inline-size: var(--target-min); padding: var(--space-2) var(--control-pad-inline);
  font: var(--font-label); letter-spacing: var(--track-text); white-space: nowrap; text-decoration: none; cursor: pointer;
  color: var(--pd-btn-fg); background-color: var(--pd-btn-bg); background-image: linear-gradient(var(--pd-btn-wash), var(--pd-btn-wash));
  border: var(--hairline) solid var(--pd-btn-bd); border-radius: var(--radius-1); -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard);
}
.pd-btn--primary { --pd-btn-bg: var(--selected-bg); --pd-btn-fg: var(--selected-fg); --pd-btn-bd: var(--selected-bg); --pd-btn-bd-h: var(--selected-bg); }
.pd-btn--accent { --pd-btn-bg: var(--accent-fill); --pd-btn-fg: var(--on-saffron); --pd-btn-bd: var(--text); --pd-btn-bd-h: var(--text); box-shadow: inset 0 0 0 2px var(--accent-ring); }
.pd-btn--ghost, .pd-btn--quiet { --pd-btn-bg: transparent; }
.pd-btn--danger { --pd-btn-fg: var(--danger); --pd-btn-bd: var(--danger); --pd-btn-bd-h: var(--danger); }
.pd-btn--text { --pd-btn-fg: var(--link); min-block-size: auto; min-inline-size: 0; padding: var(--space-1) 0; border: 0; border-block-end: var(--hairline) solid currentColor; border-radius: 0; background-image: none; }
.pd-btn--text::before, .pd-btn--sm::before { content: ""; position: absolute; inset: 0; margin: auto; inline-size: max(100%, var(--target-min)); block-size: max(100%, var(--target-min)); }
.pd-btn--text::after { content: "→"; transition: translate var(--dur-2) var(--ease-out); }
.pd-btn--sm { min-block-size: var(--control-block-s); padding-inline: var(--space-4); }
.pd-btn--lg { min-block-size: 3.25rem; padding-inline: var(--space-6); font-size: var(--fs-body-s); }
.pd-btn--block { inline-size: 100%; }
.pd-btn :where(svg) { inline-size: var(--icon-m); block-size: var(--icon-m); flex: none; fill: currentColor; }
@media (hover: hover) {
  .pd-btn:where(:not(:disabled, [aria-disabled="true"], [aria-busy="true"])):hover { --pd-btn-wash: color-mix(in oklab, currentColor var(--state-hover-mix), transparent); border-color: var(--pd-btn-bd-h); }
  .pd-btn--text:where(:not(:disabled, [aria-disabled="true"])):hover::after { translate: .25em 0; }
}
.pd-btn:where(:not(:disabled, [aria-disabled="true"], [aria-busy="true"])):active { --pd-btn-wash: color-mix(in oklab, currentColor var(--state-press-mix), transparent); }
.pd-btn:where([aria-pressed="true"]) { --pd-btn-bg: var(--selected-bg); --pd-btn-fg: var(--selected-fg); --pd-btn-bd: var(--selected-bg); --pd-btn-bd-h: var(--selected-bg); font-weight: 600; }
.pd-btn:where([aria-pressed="true"])::after { content: ""; inline-size: .375em; block-size: .375em; border-radius: var(--radius-pill); background: currentColor; }
.pd-btn:where(:disabled, [aria-disabled="true"]) { opacity: var(--opacity-disabled); cursor: not-allowed; }
.pd-btn:where([aria-busy="true"]) { cursor: progress; }
.pd-btn:where([aria-busy="true"]) > :where(:not(.pd-btn__busy)) { opacity: 0; }
.pd-btn__busy { position: absolute; inset: 0; display: none; place-items: center; }
.pd-btn:where([aria-busy="true"]) > .pd-btn__busy { display: grid; }
.pd-btn__busy:empty::before { content: ""; grid-area: 1 / 1; inline-size: 1.25em; block-size: 1.25em; border: var(--hairline) solid currentColor; border-radius: var(--radius-pill); }
.pd-btn__busy:empty::after { content: ""; grid-area: 1 / 1; inline-size: .4em; block-size: .4em; border-radius: var(--radius-pill); background: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  .pd-btn__busy:empty::after { animation: pd-btn-pulse 1.2s var(--ease-in-out) 4 alternate; }
}
@keyframes pd-btn-pulse { from { scale: .6; opacity: .5; } to { scale: 1; opacity: 1; } }
@media (forced-colors: active) {
  .pd-btn { border-color: ButtonText; color: ButtonText; }
  .pd-btn--text { border-color: LinkText; color: LinkText; }
}

/* ── Tag: one chassis; the kind is the leading glyph ── */
.pd-tag {
  --pd-tag-glyph: currentColor;
  display: inline-flex; align-items: center; gap: var(--space-2); max-inline-size: 100%; padding: var(--space-1) var(--space-2);
  font: 500 var(--fs-kicker)/1.4 var(--font-sans); letter-spacing: var(--track-text); white-space: nowrap; text-decoration: none;
  color: var(--text); background: transparent; border: var(--hairline) solid var(--border-control); border-radius: var(--radius-1);
}
.pd-tag:where(.pd-tag--work, .pd-tag--research, .pd-tag--understanding, .pd-tag--craft, .pd-tag--image, .pd-tag--sound, .pd-tag--learning, .pd-tag--practice, .pd-tag--teaching, .pd-tag--views, .pd-tag--review, .pd-tag--experience)::before {
  content: ""; flex: none; inline-size: .625em; block-size: .625em; border: .125em solid var(--pd-tag-glyph); background: transparent;
}
.pd-tag--work::before { background: var(--pd-tag-glyph); }
.pd-tag--research::before { border-radius: var(--radius-pill); }
.pd-tag--understanding::before { border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--pd-tag-glyph) 50%, transparent 50%); }
.pd-tag--craft::before { inline-size: .5em; block-size: .5em; margin-inline: .0625em; background: var(--pd-tag-glyph); rotate: 45deg; }
.pd-tag--image::before { background: radial-gradient(circle, var(--pd-tag-glyph) 0 32%, transparent 34%); }
.pd-tag--learning::before { border-width: .09375em; }
.pd-tag--practice::before { border-radius: var(--radius-pill); background: radial-gradient(circle, var(--pd-tag-glyph) 0 30%, transparent 32%); }
.pd-tag--experience::before { inline-size: .75em; block-size: .125em; border: 0; background: var(--pd-tag-glyph); }
.pd-tag--sound::before { inline-size: .5em; block-size: .75em; border: 0; background: linear-gradient(90deg, var(--pd-tag-glyph) 0 30%, transparent 30% 70%, var(--pd-tag-glyph) 70%); }
.pd-tag--teaching::before { inline-size: .5625em; block-size: .6875em; border: 0; background: var(--pd-tag-glyph); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.pd-tag--views::before { background: linear-gradient(180deg, transparent 50%, var(--pd-tag-glyph) 50%); }
.pd-tag--review::before { inline-size: .5em; block-size: .5em; margin-inline: .0625em; border-width: .1em; rotate: 45deg; }
.pd-tag__label { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
.pd-tag--dense { max-inline-size: 12em; }
a.pd-tag { position: relative; }
a.pd-tag::after { content: ""; position: absolute; inset: 0; margin: auto; inline-size: max(100%, var(--target-min)); block-size: max(100%, var(--target-min)); }
@media (hover: hover) { a.pd-tag:hover { border-color: var(--text); background: color-mix(in oklab, currentColor var(--state-hover-mix), transparent); } }
a.pd-tag:active { background: color-mix(in oklab, currentColor var(--state-press-mix), transparent); }
@media (forced-colors: active) { .pd-tag { border-color: CanvasText; } .pd-tag::before { forced-color-adjust: none; border-color: CanvasText; } .pd-tag--work::before, .pd-tag--craft::before, .pd-tag--experience::before, .pd-tag--teaching::before { background: CanvasText; } .pd-tag--sound::before { background: linear-gradient(90deg, CanvasText 0 30%, Canvas 30% 70%, CanvasText 70%); } .pd-tag--views::before { background: linear-gradient(180deg, Canvas 50%, CanvasText 50%); } }

/* ── SectionHead (flex-wrap; no query) ──
   Kit block heads are aliases of SectionHead --s: .pd-ck-head (casekit), .pd-rk-head (researchkit), .pd-td-sec (techdocs);
   __num → __num in the --row-lead column, __title → --s title, __meta / .pd-td-sec__aside → __aside. */
.pd-section-head, :where(*).pd-ck-head, :where(*).pd-rk-head, :where(*).pd-td-sec { container: pd-section-head / inline-size; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) 0; padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule-strong); font-size: var(--fs-body-s); }
.pd-section-head__num, :where(*).pd-ck-head__num, :where(*).pd-rk-head__num, :where(*).pd-td-sec__num { flex: 0 0 var(--label-col); font: var(--font-numeral); letter-spacing: var(--track-mono); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.pd-section-head__title, :where(*).pd-ck-head__title, :where(*).pd-rk-head__title, :where(*).pd-td-sec__title { flex: 1 1 16rem; margin: 0; font: var(--font-headline); color: var(--text); text-wrap: balance; }
.pd-section-head__title em { font-style: italic; font-weight: 400; color: var(--text); }
.pd-section-head__aside, :where(*).pd-ck-head__meta, :where(*).pd-rk-head__meta, :where(*).pd-td-sec__aside { position: relative; margin-inline-start: auto; padding-inline-start: var(--space-5); font: var(--font-label); color: var(--text-muted); }
.pd-section-head--rule-bottom { padding-block-end: var(--space-3); border-block-end: var(--hairline) solid var(--rule); }
.pd-section-head--s .pd-section-head__num, :where(*).pd-ck-head__num, :where(*).pd-rk-head__num, :where(*).pd-td-sec__num { flex-basis: var(--row-lead); }
.pd-section-head--s .pd-section-head__title, :where(*).pd-ck-head__title, :where(*).pd-rk-head__title, :where(*).pd-td-sec__title { font: var(--font-title); }
.pd-section-head--specimen { justify-content: space-between; gap: var(--space-2) var(--space-4); margin-block-end: var(--space-5); }
.pd-section-head--specimen .pd-section-head__num { flex-basis: auto; }
.pd-section-head--specimen .pd-section-head__title { flex: 0 1 auto; font: var(--font-title); }
.pd-section-head--sub { margin-block-start: var(--space-8); border-block-start-color: var(--rule); }
/* Narrow: the aside (meta or link) drops to its own line, left-aligned with the text column, never floating right. */
@container pd-section-head (inline-size < 36em) {
  .pd-section-head__aside, :where(*).pd-ck-head__meta, :where(*).pd-rk-head__meta, :where(*).pd-td-sec__aside { flex-basis: 100%; margin-inline-start: 0; padding-inline-start: 0; text-align: start; }
  .pd-section-head--s > .pd-section-head__num ~ .pd-section-head__aside, .pd-ck-head__num ~ .pd-ck-head__meta, .pd-rk-head__num ~ .pd-rk-head__meta, .pd-td-sec__num ~ .pd-td-sec__aside { margin-inline-start: var(--row-lead); flex-basis: calc(100% - var(--row-lead)); }
}

/* ── Masthead + primary nav (disclosure, never a menu) ── */
.pd-masthead { container: pd-masthead / inline-size; position: relative; background: var(--surface); color: var(--text); border-block-end: var(--hairline) solid var(--rule); font-size: var(--fs-body-s); }
.pd-masthead--sticky { position: sticky; inset-block-start: 0; z-index: var(--z-sticky); }
.pd-masthead--raised { border-block-end-color: var(--rule-strong); }
.pd-masthead__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); max-inline-size: var(--page-max); margin-inline: auto; padding: var(--space-2) var(--gutter); }
.pd-masthead__brand { font-size: var(--fs-label); }
.pd-masthead__tools { display: flex; align-items: center; gap: var(--space-2); }
.pd-masthead__menu { display: inline-flex; }
.pd-masthead__stamp > * { display: inline-flex; }
.pd-masthead__menu svg { inline-size: var(--icon-m); block-size: var(--icon-m); }
.pd-masthead__sheet { padding: 0 var(--gutter) var(--space-4); }
.pd-masthead__sheet[hidden] { display: none; }
.pd-masthead__sheet ol { margin: 0; padding: 0; list-style: none; border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-masthead__sheet a { display: flex; gap: var(--space-4); align-items: baseline; min-block-size: var(--target-min); padding-block: var(--space-2); border-block-end: var(--hairline) solid var(--rule); color: var(--text); text-decoration: none; font: var(--font-title); }
.pd-masthead__sheet a[aria-current="page"] { text-decoration: underline 2px var(--rule-strong); text-underline-offset: .3em; }
.pd-masthead__stamp { display: none; }
.pd-nav { display: none; }
.pd-nav__list { display: flex; align-items: center; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.pd-nav__link, .pd-nav__toggle { display: inline-flex; align-items: center; gap: var(--space-1); min-block-size: var(--target-min); padding-inline: var(--space-2); font: var(--font-label); color: var(--text-muted); text-decoration: none; background: none; border: 0; cursor: pointer; white-space: nowrap; }
.pd-nav__link[aria-current="page"] { color: var(--text); text-decoration: underline 2px var(--rule-strong); text-underline-offset: .5em; }
.pd-nav__link[aria-current="page"]::after { content: ""; inline-size: .375em; block-size: .375em; border-radius: var(--radius-pill); background: currentColor; box-shadow: none; }
.pd-nav__toggle::after { content: ""; inline-size: .4em; block-size: .4em; border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor; rotate: 45deg; translate: 0 -.15em; transition: rotate var(--dur-2) var(--ease-standard); }
.pd-nav__toggle[aria-expanded="true"] { color: var(--text); }
.pd-nav__toggle[aria-expanded="true"]::after { rotate: 225deg; translate: 0 .1em; }
.pd-nav__more { position: relative; display: none; }
.pd-nav__panel { position: absolute; inset-block-start: 100%; inset-inline-end: 0; z-index: var(--z-overlay); min-inline-size: 12rem; margin: 0; padding: var(--space-2) 0; list-style: none; background: var(--surface); border: var(--hairline) solid var(--rule-strong); box-shadow: var(--shadow-2); }
.pd-nav__panel[hidden] { display: none; }
.pd-nav__panel .pd-nav__link { display: flex; padding-inline: var(--space-4); }
@media (hover: hover) { .pd-nav__link:hover, .pd-nav__toggle:hover { color: var(--text); text-decoration: underline var(--hairline); text-underline-offset: .5em; } .pd-nav__link[aria-current="page"]:hover { text-decoration-thickness: 2px; } }
@container pd-masthead (inline-size >= 52em) {
  .pd-nav { display: block; }
  .pd-nav__more { display: block; }
  .pd-nav__item--extra, .pd-masthead__menu, .pd-masthead__sheet { display: none; }
}
@container pd-masthead (inline-size >= 64em) {
  .pd-masthead__stamp { display: inline-flex; }
}
@container pd-masthead (inline-size >= 90em) {
  .pd-nav__item--extra { display: list-item; }
  .pd-nav__more-extra { display: none; }
}
@media (forced-colors: active) { .pd-nav__link[aria-current="page"] { text-decoration-color: CanvasText; } .pd-nav__link[aria-current="page"]::after { forced-color-adjust: none; background: CanvasText; } }

/* ── Rows: one row list for entries, the section index and work (aliases: .pd-entry--row, .pd-index) ── */
.pd-rows, .pd-index { container: pd-rows / inline-size; font-size: var(--fs-body-s); margin: 0; padding: 0; list-style: none; border-block-end: var(--hairline) solid var(--rule); }
.pd-rows__item, .pd-entry--row, .pd-index__item {
  position: relative; display: grid; grid-template-columns: minmax(0, var(--pd-rows-lead, var(--row-lead))) minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-1) var(--space-5);
  padding: var(--row-pad); border-block-start: var(--hairline) solid var(--rule); color: var(--text); text-decoration: none;
}
.pd-rows__lead { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.pd-rows__main { display: grid; gap: var(--space-1); min-inline-size: 0; }
.pd-rows__title, .pd-entry--row .pd-entry__title { margin: 0; font: var(--font-title); color: var(--text); text-wrap: pretty; }
.pd-rows__link { color: inherit; text-decoration: none; }
.pd-rows__link::after { content: ""; position: absolute; inset: 0; z-index: var(--z-raised); }
.pd-rows__link:focus-visible { outline: 0; }
.pd-rows__link:focus-visible::after { outline: var(--focus-width) solid var(--focus); outline-offset: calc(-1 * var(--focus-width)); }
.pd-rows__dek { margin: 0; font: italic 400 var(--fs-body-s)/1.5 var(--font-text); color: var(--text-muted); max-inline-size: var(--measure); }
.pd-rows__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-block-start: var(--space-1); }
.pd-rows__end, .pd-index__count { justify-self: end; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); white-space: nowrap; }
.pd-rows__name, .pd-index__name { display: inline-block; font: 500 var(--fs-pullquote)/1.1 var(--font-display); letter-spacing: var(--track-display); transition: translate var(--dur-2) var(--ease-out); }
.pd-rows__name em, .pd-index__name em { margin-inline-start: var(--space-2); font: italic 400 var(--fs-body-s)/1.4 var(--font-text); color: var(--text-subtle); }
.pd-rows--index .pd-rows__lead, .pd-index__item > .pd-num { font: var(--font-numeral); }
.pd-rows--entry, .pd-entry--row { --pd-rows-lead: 8em; }
.pd-rows--work .pd-rows__item { grid-template-columns: minmax(0, var(--row-lead)) minmax(0, 1fr) minmax(0, var(--label-col)) 7em; }
.pd-rows__role { font: var(--font-label); color: var(--text-muted); }
@media (hover: hover) {
  .pd-rows__item:hover .pd-rows__title, .pd-entry--row:hover .pd-entry__title { text-decoration: underline var(--hairline); text-underline-offset: .2em; }
  .pd-rows__item:hover .pd-rows__name, .pd-index__item:hover .pd-index__name { translate: var(--space-2) 0; }
}
@container pd-rows (inline-size < 30em) {
  .pd-rows__item, .pd-entry--row, .pd-index__item, .pd-rows--work .pd-rows__item { grid-template-columns: minmax(0, 1fr) auto; }
  :where(.pd-rows__item, .pd-entry--row, .pd-index__item) > * { grid-column: 1 / -1; }
  :where(.pd-entry--row) > .pd-tag { justify-self: start; }
  :where(.pd-rows__item, .pd-entry--row, .pd-index__item) > :where(.pd-rows__lead, .pd-num, .pd-meta:first-child) { grid-column: 1; grid-row: 1; }
  :where(.pd-rows__item, .pd-entry--row, .pd-index__item) > :where(.pd-rows__end, .pd-index__count) { grid-column: 2; grid-row: 1; }
  .pd-rows__name, .pd-index__name { font-size: var(--fs-title); }
}

/* ── Card (alias .pd-entry): hairline + title link ── */
.pd-card, .pd-entry:not(.pd-entry--row) { container: pd-card / inline-size; position: relative; display: grid; align-content: start; gap: var(--space-3); padding-block-start: var(--space-4); border-block-start: var(--hairline) solid var(--rule-strong); color: var(--text); text-decoration: none; }
.pd-card__media { order: -1; margin-block-end: var(--space-2); overflow: hidden; }
.pd-card__title, .pd-entry__title { margin: 0; font: var(--font-title); color: var(--text); text-wrap: balance; }
.pd-card--lg .pd-card__title { font: var(--font-headline); }
.pd-card__link { color: inherit; text-decoration: none; }
.pd-card__link::after { content: ""; position: absolute; inset: 0; z-index: var(--z-raised); }
.pd-card__link:focus-visible { outline: 0; }
.pd-card__link:focus-visible::after { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
.pd-card__dek, .pd-entry__dek { margin: 0; font: italic 400 var(--fs-body-s)/1.55 var(--font-text); color: var(--text-muted); max-inline-size: var(--measure); }
.pd-card__foot, .pd-entry__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-block-start: var(--space-1); }
.pd-card__more { font: var(--font-label); color: var(--link); }
.pd-card__more::after { content: "→"; display: inline-block; margin-inline-start: .3em; transition: translate var(--dur-2) var(--ease-out); }
@media (hover: hover) {
  .pd-card:hover .pd-card__title, .pd-entry:hover .pd-entry__title { text-decoration: underline var(--hairline); text-underline-offset: .15em; }
  .pd-card:hover .pd-card__more::after { translate: .25em 0; }
}
.pd-cards { display: grid; align-items: start; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: var(--space-7) var(--gutter); }

/* ── Facts: one fact schema (Venture, Role, Year, Scope, Fields, Status, Place, Outcome) ── */
.pd-facts, .pd-case__facts { display: grid; grid-template-columns: minmax(0, var(--label-col)) minmax(0, 1fr); align-content: start; margin: 0; font-size: var(--fs-body-s); border-block-end: var(--hairline) solid var(--rule); }
.pd-facts__row { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; }
.pd-facts__row:has(> dd:empty) { display: none; }
.pd-facts :where(dt, dd), .pd-case__facts :where(dt, dd) { margin: 0; padding: var(--space-3) 0; border-block-start: var(--hairline) solid var(--rule); }
.pd-facts dt, .pd-case__facts dt { padding-inline-end: var(--space-4); font: 500 var(--fs-meta)/1.5 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-subtle); }
.pd-facts dd, .pd-case__facts dd { min-inline-size: 0; font: var(--font-label); color: var(--text); overflow-wrap: anywhere; }
.pd-facts dd .pd-exif { white-space: normal; }

/* ── Case (CaseStudy composes it as its head) ── */
.pd-case { container: pd-case / inline-size; display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-7); padding-block-start: var(--space-4); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-case__head { flex: 2 1 26rem; display: grid; align-content: start; gap: var(--space-3); min-inline-size: 0; }
.pd-case > .pd-facts, .pd-case > .pd-case__facts { flex: 1 1 16rem; }
.pd-case__title { margin: 0; font: 500 clamp(var(--fs-headline), 9cqi, var(--fs-display-l))/1 var(--font-display); letter-spacing: var(--track-display); text-wrap: balance; }
.pd-case__summary { margin: 0; font: var(--font-lede); color: var(--text-muted); max-inline-size: var(--measure); }

/* ── Placeholder ── */
.pd-ph { --pd-ph-ratio: 3 / 2; position: relative; display: grid; place-items: center; inline-size: 100%; min-inline-size: 0; aspect-ratio: var(--pd-ph-ratio); color: var(--text-subtle); border: var(--hairline) dashed var(--border-control); background-image: repeating-linear-gradient(135deg, transparent 0 .5625rem, var(--rule) .5625rem .625rem); }
.pd-ph--1x1 { --pd-ph-ratio: 1; } .pd-ph--4x5 { --pd-ph-ratio: 4 / 5; } .pd-ph--2x3 { --pd-ph-ratio: 2 / 3; } .pd-ph--16x9 { --pd-ph-ratio: 16 / 9; } .pd-ph--fill { aspect-ratio: auto; block-size: 100%; }
.pd-ph__label { max-inline-size: calc(100% - 2 * var(--space-2)); padding: var(--space-1) var(--space-2); font: var(--font-meta); letter-spacing: var(--track-mono); text-align: center; background: var(--surface); overflow-wrap: anywhere; }
span.pd-ph-text, .pd-ph-text { color: var(--text-subtle); }
/* sample-data flag: marks a block whose figures or quotes are placeholders ("Sample data") */
.pd-ph-flag { display: inline-flex; align-items: center; gap: var(--space-2); justify-self: start; inline-size: fit-content; padding: var(--space-1) var(--space-2); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); border: var(--hairline) dashed var(--border-control); }
@media (forced-colors: active) { .pd-ph { border-color: CanvasText; } }

/* ── Figure + quote ── */
.pd-figure { margin: 0; display: grid; gap: var(--space-3); }
.pd-figure > :where(img, svg, video) { display: block; inline-size: 100%; }
.pd-figure > .pd-ph { inline-size: 100%; } /* keeps .pd-ph's grid centring: the label sits in the middle, as everywhere else */
.pd-figure__cap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-1) var(--space-4); font: var(--font-caption); color: var(--text-muted); max-inline-size: var(--measure); }
.pd-figure__num { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-figure--wide { max-inline-size: var(--measure-wide); }
.pd-figure--wide .pd-figure__cap { max-inline-size: none; }
.pd-quote, .pd-pullquote { margin: var(--space-6) 0; padding-block: var(--space-4); border-block-start: var(--hairline) solid var(--rule-strong); border-block-end: var(--hairline) solid var(--rule); font: var(--font-pullquote); color: var(--text); text-wrap: balance; }
.pd-quote :where(p) { margin: 0; }
.pd-quote blockquote { margin: 0; padding: 0; }
.pd-quote__cite, .pd-quote cite, .pd-pullquote cite { display: block; margin-block-start: var(--space-3); font: var(--font-meta); font-style: normal; letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-quote--inline { padding-block: 0; padding-inline-start: var(--space-5); border: 0; font: italic 400 var(--fs-body)/1.55 var(--font-text); }
.pd-quote--inline .pd-quote__cite { margin-block-start: var(--space-2); }

/* ── Note (sidenote, footnotes) + Aside ── */
.pd-aside, .pd-margin-note { padding-block-start: var(--space-4); border-block-start: var(--hairline) solid var(--rule-strong); font: var(--font-ui); color: var(--text-muted); }
.pd-aside > * + * { margin-block-start: var(--space-2); }
.pd-aside > .pd-kicker { display: block; }
.pd-aside :where(p) { margin: 0; }
.pd-note { display: block; margin-block: var(--space-4); padding-block-start: var(--space-2); border-block-start: var(--hairline) solid var(--rule); font: 400 var(--fs-caption)/1.5 var(--font-sans); color: var(--text-muted); }
.pd-note__num { margin-inline-end: var(--space-1); font: var(--font-meta); color: var(--text-subtle); }
.pd-note__ref, .pd-prose sup a, .pd-fnref { font: 500 var(--fs-meta)/1 var(--font-mono); letter-spacing: var(--track-mono); color: var(--link); text-decoration: none; vertical-align: super; padding-inline: var(--space-1); }
.pd-note__ref:focus-visible { outline-offset: 0; }
.pd-note__ref, .pd-note__back { position: relative; }
:where(.pd-note__ref, .pd-note__back, a.pd-section-head__aside)::after { content: ""; position: absolute; inset: 0; margin: auto; inline-size: max(100%, 24px); block-size: max(100%, 24px); }
a.pd-section-head__aside::after { block-size: max(100%, var(--target-min)); }
.pd-note--foot, .pd-footnotes { margin-block-start: var(--space-7); padding-block-start: var(--space-4); border-block-start: var(--hairline) solid var(--rule); font: var(--font-body-s); color: var(--text-muted); }
.pd-note--foot ol, .pd-footnotes ol { margin: 0; padding-inline-start: 1.75em; }
.pd-note--foot li + li, .pd-footnotes li + li { margin-block-start: var(--space-2); }
.pd-note--foot li::marker, .pd-footnotes li::marker { font: var(--font-meta); color: var(--text-subtle); }
.pd-note__back { margin-inline-start: var(--space-1); font: var(--font-meta); text-decoration: none; }
.pd-note--foot li:target, .pd-footnotes li:target { text-decoration: underline 2px var(--rule-strong); text-underline-offset: .3em; }
.pd-page { container: pd-page / inline-size; max-inline-size: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); font-size: var(--fs-body-s); }
@container pd-prose (inline-size >= 30em) {
  .pd-note--side { float: inline-end; clear: inline-end; inline-size: var(--label-col); margin-block: var(--space-1) var(--space-3); margin-inline: var(--space-5) 0; }
}
@container pd-page (inline-size >= 64em) {
  .pd-note--side { margin-block-start: 0; margin-inline: var(--space-6) calc(-1 * (var(--label-col) + var(--space-7))); }
}

/* ── Status: word + mark shape ── */
.pd-status { display: inline-flex; align-items: center; gap: var(--space-2); font: 500 var(--fs-caption)/1.3 var(--font-sans); color: var(--text-muted); white-space: nowrap; }
.pd-status::before { content: ""; flex: none; inline-size: .75em; block-size: .75em; border: .125em solid var(--text); border-radius: var(--radius-pill); }
.pd-status--half::before { background: linear-gradient(90deg, var(--text) 50%, transparent 50%); }
.pd-status--full::before { background: var(--text); }
.pd-status--dashed::before { border-style: dashed; border-width: .1em; }
.pd-status--crossed { color: var(--text-muted); }
.pd-status--crossed::before { background: linear-gradient(45deg, transparent calc(50% - .07em), var(--text) calc(50% - .07em) calc(50% + .07em), transparent calc(50% + .07em)), linear-gradient(-45deg, transparent calc(50% - .07em), var(--text) calc(50% - .07em) calc(50% + .07em), transparent calc(50% + .07em)); }
.pd-status--boxed { min-block-size: 1.75rem; padding: 0 var(--space-3); border: var(--hairline) solid var(--border-control); border-radius: var(--radius-1); color: var(--text); }
@media (forced-colors: active) { .pd-status::before { forced-color-adjust: none; border-color: CanvasText; } .pd-status--full::before { background: CanvasText; } .pd-status--half::before { background: linear-gradient(90deg, CanvasText 50%, transparent 50%); } .pd-status--crossed::before { background: linear-gradient(45deg, transparent calc(50% - .07em), CanvasText calc(50% - .07em) calc(50% + .07em), transparent calc(50% + .07em)), linear-gradient(-45deg, transparent calc(50% - .07em), CanvasText calc(50% - .07em) calc(50% + .07em), transparent calc(50% + .07em)); } .pd-status--boxed { border-color: CanvasText; } }

/* ── Prose ── */
.pd-prose { container: pd-prose / inline-size; max-inline-size: var(--measure); font: var(--font-body); color: var(--text); hanging-punctuation: first; }
.pd-prose > * + * { margin-block-start: var(--space-4); }
.pd-prose :where(p) { margin: 0; }
.pd-prose :where(p + p) { margin-block-start: 0; text-indent: 1.5em; }
.pd-prose :where(h2) { margin-block: var(--space-5) 0; font: var(--font-headline); text-wrap: balance; }
.pd-prose :where(h3) { margin-block: var(--space-5) 0; font: var(--font-title); }
.pd-prose :where(h2, h3) + * { margin-block-start: var(--space-3); text-indent: 0; }
.pd-prose :where(ul, ol) { margin-block-end: 0; padding-inline-start: 1.25em; }
.pd-prose :where(li + li) { margin-block-start: var(--space-2); }
.pd-prose :where(code) { padding-inline: var(--space-1); font: .875em/1 var(--font-mono); border: var(--hairline) solid var(--rule); border-radius: var(--radius-1); }
.pd-prose > blockquote { margin-inline: 0; padding-inline-start: var(--space-5); font-style: italic; }
.pd-prose :where(.pd-lede + p, .pd-dropcap, h2 + p, h3 + p) { text-indent: 0; }
.pd-prose .pd-lede + p { margin-block-start: var(--space-4); }
.pd-prose :where(i[lang="sa-Latn"], em[lang="sa-Latn"]) { font-style: italic; }
.pd-lede, .pd-prose .pd-lede { margin: 0; font: var(--font-lede); color: var(--text-muted); }
.pd-dropcap::first-letter { float: inline-start; margin-block-start: .06em; padding-inline-end: var(--space-2); font: 500 4.5em/.8 var(--font-display); color: var(--text); }
@supports (initial-letter: 3) { .pd-dropcap::first-letter { float: none; margin: 0; initial-letter: 3; font-size: inherit; line-height: inherit; } }

/* ── Verse ── */
.pd-verse { margin: 0 auto; max-inline-size: var(--measure-wide); padding-block: var(--space-6); text-align: center; color: var(--text); border-block: var(--hairline) solid var(--rule-strong); }
.pd-verse + .pd-verse { border-block-start: 0; }
.pd-verse__deva { margin: 0; font: var(--font-devanagari); }
.pd-verse__iast { margin: var(--space-3) 0 0; font: var(--font-iast); color: var(--text-muted); }
.pd-verse__trans { margin: var(--space-5) auto 0; max-inline-size: 30em; font: var(--font-body); color: var(--text); }
.pd-verse__src { display: block; margin-block-start: var(--space-5); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }

/* ── Gallery + plate (captions share a baseline row via subgrid) ── */
.pd-gallery { container: pd-gallery / inline-size; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6) var(--gutter); align-items: end; }
.pd-plate { margin: 0; display: grid; grid-column: span 12; grid-row: span 2; grid-template-rows: subgrid; row-gap: var(--space-3); align-items: end; min-inline-size: 0; }
.pd-plate__frame, .pd-plate__link { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 2; color: inherit; }
.pd-plate--portrait :where(.pd-plate__frame, .pd-plate__link) { aspect-ratio: 4 / 5; }
.pd-plate--square :where(.pd-plate__frame, .pd-plate__link) { aspect-ratio: 1; }
.pd-plate :where(.pd-plate__frame, .pd-plate__link) > :where(img, .pd-ph, .pd-plate__frame) { inline-size: 100%; block-size: 100%; aspect-ratio: auto; object-fit: cover; }
.pd-plate :where(.pd-plate__frame, .pd-plate__link) > :where(img) { display: block; }
.pd-plate__link:focus-visible { outline-offset: calc(-1 * var(--focus-width)); }
.pd-plate__cap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-1) var(--space-4); align-self: start; }
.pd-plate__title { font: var(--font-caption); color: var(--text); }
.pd-plate__title b { font-weight: 600; }
.pd-exif { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pd-plate__link img, .pd-plate__link .pd-ph { transition: scale var(--dur-4) var(--ease-out); }
  .pd-plate__link:hover img, .pd-plate__link:hover .pd-ph { scale: 1.02; }
}
@container pd-gallery (inline-size >= 30em) { .pd-plate { grid-column: span 6; } .pd-plate--wide, .pd-plate--full { grid-column: 1 / -1; } }
@container pd-gallery (inline-size >= 48em) { .pd-plate { grid-column: span 4; } .pd-plate--wide { grid-column: span 8; } .pd-plate--full { grid-column: 1 / -1; } }

/* ── Subscribe (SiteFooterMega composes it) ── */
.pd-subscribe { container: pd-subscribe / inline-size; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); align-items: end; gap: var(--space-5) var(--space-7); padding: var(--pad-panel); background: var(--surface-sunken); }
.pd-subscribe__head { display: grid; gap: var(--space-2); }
.pd-subscribe__title { margin: 0; font: 500 var(--fs-headline)/1.1 var(--font-display); letter-spacing: var(--track-display); }
.pd-subscribe__text { margin: 0; font: var(--font-body-s); color: var(--text-muted); max-inline-size: var(--measure); }
.pd-subscribe__form { display: grid; gap: var(--space-2); }
.pd-subscribe__row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pd-subscribe__row > :where(input, .pd-input) { flex: 1 1 12rem; min-inline-size: 0; }
.pd-subscribe__msg { margin: 0; font: var(--font-caption); color: var(--text-muted); }
.pd-subscribe__msg--error { display: flex; gap: var(--space-2); color: var(--danger); }
.pd-subscribe__msg--error::before { content: "!"; display: inline-grid; place-items: center; flex: none; inline-size: 1.25em; block-size: 1.25em; font: 600 var(--fs-kicker)/1 var(--font-sans); border: 1.5px solid currentColor; border-radius: var(--radius-pill); }
.pd-subscribe__done { margin: 0; font: italic 400 var(--fs-title)/1.3 var(--font-text); }
.pd-subscribe__done:focus { outline: 0; }
.pd-subscribe__done:focus-visible { outline: var(--focus-width) solid var(--focus); }

/* ── Print objects: .pd-paper re-pins Paper (or mono) tokens; children only use var() ── */
.pd-paper {
  --paper-000: #f8f5ee; --paper-100: #f0ebdf; --ink-900: #17201c; --ink-700: #3c4741; --ink-500: #5f6a63; --line-100: #ddd5c4; --line-300: #727d75;
  --jade-700: #1e5a48; --saffron-500: #e68a1a; --saffron-700: #9a4f06; --sindoor-600: #a8321c; --paper-200: #e5ddcc;
  --pd-paper-ink-fg: #f8f5ee; /* text on an ink-filled sheet (BusinessCard back); mono pins it to white */
  --surface: var(--paper-000); --text: var(--ink-900); --text-muted: var(--ink-700); --text-subtle: var(--ink-500); --rule: var(--line-100); --rule-strong: var(--ink-900); --link: var(--jade-700); --bindu: var(--saffron-500); --bindu-rim: var(--saffron-700); --bindu-on-paper: var(--saffron-500); --accent: var(--saffron-700);
  --danger: var(--sindoor-600); --focus: var(--saffron-700); --surface-sunken: var(--paper-100); --border-control: var(--line-300);
  --accent-fill: var(--saffron-500); --selected-bg: var(--jade-700); --on-jade: var(--paper-000); --selected-fg: var(--on-jade);
  background: var(--paper-000); color: var(--ink-900); box-shadow: var(--shadow-print); color-scheme: light;
}
.pd-paper--mono { --paper-000: #ffffff; --paper-100: #f4f4f4; --ink-900: #000000; --ink-700: #333333; --ink-500: #5e5e5e; --line-100: #000000; --line-300: #000000; --jade-700: #000000; --saffron-500: #000000; --saffron-700: #000000; --sindoor-600: #000000; --paper-200: #e6e6e6; --pd-paper-ink-fg: #ffffff; }
.pd-paper .pd-mark { fill: var(--ink-900); }

.pd-letterhead { inline-size: 37.2em; max-inline-size: 100%; aspect-ratio: 210 / 297; padding: 3.2em 3.4em 2.4em; display: grid; grid-template-rows: auto auto 1fr auto; font-family: var(--font-text); font-size: 16px; }
.pd-letterhead__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1em; padding-block-end: 1.1em; border-block-end: 1px solid var(--ink-900); }
.pd-letterhead__head .pd-mark { inline-size: 3.2em; block-size: 3.2em; }
.pd-letterhead__name { margin-block-start: .35em; font: 500 1.7em/1 var(--font-display); }
.pd-letterhead__nick { margin-block-start: .5em; font: 500 .62em/1.2 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-700); }
.pd-letterhead__contact { text-align: end; font: .62em/1.7 var(--font-mono); letter-spacing: .04em; color: var(--ink-700); }
.pd-letterhead__ref { display: flex; justify-content: space-between; margin-block-start: 2.2em; font: .62em/1.4 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-500); }
.pd-letterhead__body { margin-block-start: 2em; max-inline-size: 34em; font-size: .8em; line-height: 1.62; color: var(--ink-900); }
.pd-letterhead__body p { margin: 0 0 .9em; }
.pd-letterhead__sign { margin-block-start: 1.8em; font: italic 500 1.5em/1.1 var(--font-display); color: var(--ink-900); }
.pd-letterhead__foot { display: flex; justify-content: space-between; align-items: center; padding-block-start: .9em; border-block-start: 1px solid var(--line-100); font: 500 .58em/1.2 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-700); }
.pd-letterhead__foot i { inline-size: .7em; block-size: .7em; border-radius: var(--radius-pill); background: var(--bindu); box-shadow: inset 0 0 0 1px var(--bindu-rim); }

.pd-bcard { position: relative; inline-size: 21.25em; max-inline-size: 100%; aspect-ratio: 85 / 55; padding: 1.5em; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; font-size: 16px; border-radius: var(--radius-2); }
.pd-bcard .pd-mark { inline-size: 2.2em; block-size: 2.2em; margin-block-end: .6em; }
.pd-bcard--back { --paper-000: var(--ink-900); --bindu-rim: var(--saffron-500); background: var(--ink-900); color: var(--pd-paper-ink-fg); align-items: flex-start; box-shadow: 0 0 0 var(--hairline) var(--pd-bcard-edge); } /* token edge: keeps the 85×55 boundary on a void (black) ground */
.pd-paper--mono.pd-bcard--back { outline: var(--hairline) solid var(--pd-bcard-edge); }
/* The card edge is the page theme's --rule-strong, resolved where the theme is set (:root / [data-theme]) so the
   .pd-paper re-pin (--rule-strong = ink) does not swallow it; custom properties inherit the resolved value. */
:root, [data-theme] { --pd-bcard-edge: var(--rule-strong); }
.pd-bcard--back .pd-mark { fill: currentColor; }
.pd-bcard__name { font: 500 1.75em/1 var(--font-display); }
.pd-bcard__role { margin-block-start: .6em; font: 500 .62em/1.35 var(--font-sans); letter-spacing: .16em; text-wrap: balance; text-transform: uppercase; color: var(--ink-700); }
.pd-bcard__lines { font: .64em/1.7 var(--font-mono); color: var(--ink-900); }
.pd-bcard__rule { display: block; align-self: stretch; border-block-start: 1px solid var(--line-100); }

.pd-printlabel { inline-size: 20em; max-inline-size: 100%; padding: 1.25em 1.4em; display: grid; gap: .6em; font-size: 16px; }
.pd-printlabel__no { display: flex; justify-content: space-between; gap: 1em; font: .7em/1.4 var(--font-mono); letter-spacing: .04em; color: var(--ink-500); white-space: nowrap; }
.pd-printlabel__title { margin: 0; font: 500 1.5em/1.05 var(--font-display); }
.pd-printlabel__title em { font-weight: 400; }
.pd-printlabel__place { font: .78em/1.4 var(--font-sans); color: var(--ink-700); }
.pd-printlabel__exif { display: grid; gap: .25em; padding-block-start: .6em; border-block-start: 1px solid var(--line-100); font: .7em/1.4 var(--font-mono); letter-spacing: .04em; color: var(--ink-500); }
.pd-printlabel__exif > span { display: block; block-size: 1.4em; white-space: nowrap; }

/* ── Cover: flat blocks on a hairline grid + one pattern (jāla); HamsaMark --stack is the sign, its monogram bindu the one saffron ── */
.pd-cover { container: pd-cover / inline-size; inline-size: 100%; color: var(--text); background: var(--surface); }
.pd-cover__frame { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto repeat(2, minmax(7rem, auto)); gap: var(--hairline); background: var(--rule-strong); border: var(--hairline) solid var(--rule-strong); }
.pd-cover__text { grid-column: 1 / -1; min-inline-size: 0; display: grid; align-content: space-between; gap: var(--space-7); padding: var(--space-5); background: var(--surface); }
.pd-cover__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-4); margin: 0; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-cover__kicker { margin: 0 0 var(--space-3); } /* type: shared .pd-kicker rule */
.pd-cover__line { margin: 0; max-inline-size: 16em; font: 400 clamp(var(--fs-title), 7.5cqi, var(--fs-display-m))/1.08 var(--font-display); letter-spacing: var(--track-display); color: var(--text); text-wrap: balance; }
.pd-cover__line span { white-space: nowrap; }
.pd-cover__sep { color: var(--text-subtle); }
.pd-cover__emblem { grid-column: 1 / -1; display: grid; place-items: center; padding: var(--space-6) var(--space-5); background: var(--surface-sunken); }
.pd-cover__lock { font-size: clamp(2.75rem, 16cqi, 4.5rem); }
.pd-cover__sky { display: grid; align-content: space-between; gap: var(--space-2); padding: var(--space-4); background: var(--sky-900); color: var(--on-sky); }
.pd-cover__word { font: italic 400 clamp(var(--fs-title), 7cqi, var(--fs-headline))/1 var(--font-text); }
.pd-cover__skymeta { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--on-sky); }
.pd-cover__jala { background-color: var(--surface); background-image: repeating-linear-gradient(45deg, var(--line-300) 0 1px, transparent 1px 14px), repeating-linear-gradient(-45deg, var(--line-300) 0 1px, transparent 1px 14px); }
@container pd-cover (inline-size >= 48em) {
  .pd-cover__frame { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(10rem, auto)); aspect-ratio: 16 / 6; }
  .pd-cover__text { grid-column: 1 / span 6; grid-row: 1 / span 2; padding: var(--space-6) var(--space-7); }
  .pd-cover__line { font-size: clamp(var(--fs-headline), 3.6cqi, var(--fs-display-m)); }
  .pd-cover__emblem { grid-column: 7 / span 4; grid-row: 1 / span 2; }
  .pd-cover__lock { font-size: clamp(3rem, 6.4cqi, 6rem); }
  .pd-cover__word { font-size: clamp(var(--fs-title), 2.4cqi, var(--fs-headline)); }
  .pd-cover__sky { grid-column: 11 / span 2; grid-row: 1; }
  .pd-cover__jala { grid-column: 11 / span 2; grid-row: 2; }
}
@media (forced-colors: active) { .pd-cover__frame { background: CanvasText; } .pd-cover__sky { forced-color-adjust: none; } }

} /* end components.core */

/* ── Cover × signature: the stacked portrait lockup (LogoUsage: portrait mark + "Pandox", name and domain in mono)
   on the sunken emblem cell. Lives in components.site so it sits beside the lockup's own rules (parts/logo.css). ── */
@layer components.site {
.pd-cover__lock { margin: 0; font-size: clamp(1.1rem, 6cqi, 1.75rem); font-weight: 400; text-wrap: initial; }
.pd-cover__lock .pd-mark { inline-size: 1em; block-size: 1em; }
@container pd-cover (inline-size >= 48em) { .pd-cover__lock { font-size: clamp(1.2rem, 2.4cqi, 2.4rem); } }
} /* end components.site (Cover × signature) */

/* ── Masthead theme cycle button (.pd-masthead__theme). Lives in components.site so it wins over the
   ThemeSwitcher reset (.pd-themes { border:0; padding:0 }) when legacy markup still carries
   class="pd-themes pd-themes--compact" on the <button>. New markup: <button class="pd-masthead__theme">. ── */
@layer components.site {
.pd-masthead__theme, :where(.pd-masthead) button.pd-themes { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); box-sizing: border-box; min-block-size: var(--target-min); min-inline-size: var(--target-min); margin: 0; padding: 0 var(--space-3); font: var(--font-label); color: var(--text-muted); background: none; border: var(--hairline) solid var(--border-control); border-radius: var(--radius-1); cursor: pointer; white-space: nowrap; -webkit-appearance: none; appearance: none; transition: color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard), background-color var(--dur-2) var(--ease-standard); }
.pd-masthead__theme::before, :where(.pd-masthead) button.pd-themes::before { content: ""; flex: none; inline-size: .875em; block-size: .875em; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 var(--hairline) currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
@media (hover: hover) { .pd-masthead__theme:hover, :where(.pd-masthead) button.pd-themes:hover { color: var(--text); border-color: var(--rule-strong); background: color-mix(in oklab, currentColor var(--state-hover-mix), transparent); } }
.pd-masthead__theme:active, :where(.pd-masthead) button.pd-themes:active { background: color-mix(in oklab, currentColor var(--state-press-mix), transparent); }
.pd-masthead__theme:focus-visible, :where(.pd-masthead) button.pd-themes:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
@container pd-masthead (inline-size < 30em) { .pd-masthead__theme, :where(.pd-masthead) button.pd-themes { padding-inline: var(--space-2); } }
@media (prefers-reduced-motion: reduce) { .pd-masthead__theme, :where(.pd-masthead) button.pd-themes { transition: none; } }
@media (forced-colors: active) { .pd-masthead__theme, :where(.pd-masthead) button.pd-themes { border-color: ButtonText; color: ButtonText; } .pd-masthead__theme::before, :where(.pd-masthead) button.pd-themes::before { forced-color-adjust: none; box-shadow: inset 0 0 0 1px ButtonText; background: linear-gradient(90deg, ButtonText 50%, Canvas 50%); } }
} /* end components.site (Masthead theme button) */

/* ── BusinessCard (.pd-bcard): the signature (portrait mark + "Pandox") on the front; the portrait alone on the ink back, with the Haṃsa motto at the foot ── */
@layer components.site {
.pd-bcard__sig { font-size: 0.78em; margin-block-end: 0.7em; }
.pd-bcard__sig .pd-mark { inline-size: 1em; block-size: 1em; margin: 0; }
.pd-bcard__portrait { inline-size: 4.2em; block-size: 4.2em; margin: 0; }
.pd-bcard__motto { font: 400 0.62em/1.5 var(--font-sans); letter-spacing: 0.02em; color: inherit; }
.pd-bcard__motto::before { content: ""; display: inline-block; inline-size: 0.45em; block-size: 0.45em; margin-inline-end: 0.6em; border-radius: var(--radius-pill); background: var(--bindu); box-shadow: 0 0 0 1px var(--bindu-rim); vertical-align: 0.1em; }
.pd-paper--mono .pd-bcard__motto::before { background: currentColor; box-shadow: none; }
} /* end components.site (BusinessCard) */

/* ── Button × icon (.pd-btn--icon): lives with .pd-btn here, in components.controls (moved from parts/controls.css) ── */
@layer components.controls {
/* ── Icon button (modifier of .pd-btn; geometry only) ────────────────────── */
.pd-btn--icon { box-sizing: border-box; display: inline-grid; place-content: center; inline-size: var(--control-block); min-inline-size: var(--target-min); block-size: var(--control-block); padding: 0; gap: 0; }
.pd-btn--icon > svg { inline-size: var(--icon-l); block-size: var(--icon-l); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; overflow: visible; pointer-events: none; }
.pd-btn--icon:where(.pd-btn--sm) { inline-size: var(--control-block-s); block-size: var(--control-block-s); min-inline-size: 0; min-block-size: 0; }
.pd-btn--icon:where(.pd-btn--sm) > svg { inline-size: var(--icon-m); block-size: var(--icon-m); }
/* bare (no colour modifier): no boundary at rest; foundations supplies the hover wash and the pressed fill */
.pd-btn--icon:where(:not(.pd-btn--primary, .pd-btn--accent, .pd-btn--ghost, .pd-btn--danger)) { --pd-btn-bd: transparent; --pd-btn-bd-h: transparent; }
.pd-btn--icon:where([aria-pressed="true"])::after { position: absolute; inset-block-end: var(--space-1); inset-inline-end: var(--space-1); inline-size: .3em; block-size: .3em; }
} /* end components.controls (IconButton) */

/* ══ overrides: print hide list ══ */
@layer overrides {
  @media print {
    :where(.pd-masthead, .pd-masthead__theme, .pd-skip, .pd-toast, dialog:not([open]), [popover], .pd-progress, .pd-cmdk, .pd-themes, .pd-sheet-trigger, .pd-btn__busy, .pd-tip) { display: none; }
    .pd-paper { box-shadow: none; }
    .pd-letterhead { inline-size: 210mm; block-size: 297mm; padding: 18mm 20mm 14mm; font-size: 4.3mm; }
  }
}

/* ══ PACKAGE PARTS — generated by gen/bundlelib.py merge from scratchpad/parts/*.css (C-locale sorted). Do not edit below this line: edit the part and re-run the merge. ══ */

/* ── part: abstract.css ── */
@layer components.abstract {
/* ══ Pandox DS v2 — package: abstract (Symbols) ════════════════════════════════════════════════
   One symbol family on one grid: viewBox 96 (24-unit module, 12-unit margin), strokes 1px or 1.5px
   non-scaling, bindu r = figure width / 24 (4 on a 96 tile), miter joins, square caps, radius-0 frames.
   Every emblem is MONO by default (ink solid | outline). --duo (Śiva | Śakti via --duo-a/--duo-b/--duo-b-fill)
   and --lit (saffron bindu) are opt-ins; in mono/void the semantic tokens make --duo solid | outline by
   themselves. No theme selectors. Owner of: pd-abs*, pd-absg*, pd-grad*, pd-infinity*, pd-ss*,
   pd-duality*, pd-divider*, pd-disc*, pd-spanda*, pd-pv*, pd-bnk*, pd-ornament*, pd-pattern* (pd-grain retired → pd-pattern--grain).
   Glyph-level marks (disc, infinity, spanda, ornament, ss) are sized in em and are NOT containers
   (container-type would collapse an inline glyph); every layout root is. */

/* ── 0. Family paint model (private custom properties) ─────────────────────────────────────── */
:where(.pd-abs, .pd-disc:not(.pd-ss > .pd-disc), .pd-ss, .pd-infinity, .pd-spanda, .pd-pv, .pd-bnk, .pd-ornament, .pd-duality, .pd-divider) {
  --_pd-sym-a: currentColor;            /* Śiva / primary: solid */
  --_pd-sym-b: currentColor;            /* Śakti / second: its outline */
  --_pd-sym-bf: transparent;            /* Śakti fill: none in mono */
  --_pd-sym-ground: var(--pd-ground, var(--surface));
  --_pd-sym-bindu: currentColor;        /* ink until --lit */
  --_pd-sym-rim: transparent;
  --_pd-sym-lit: var(--bindu);
  --_pd-sym-litrim: var(--bindu-rim);   /* saffron-500 is 2.2–2.4:1 on Paper: the bindu-rim (saffron-700) carries the 3:1 */
}
:where(.pd-abs--duo, .pd-disc--duo, .pd-ss--duo, .pd-infinity--duo) { --_pd-sym-a: var(--duo-a); --_pd-sym-b: var(--duo-b); --_pd-sym-bf: var(--duo-b-fill); }
:where(.pd-abs--sky, .pd-disc--sky, .pd-ss--sky, .pd-infinity--sky, .pd-spanda--sky, .pd-ornament--sky) { --_pd-sym-ground: var(--sky-900); --_pd-sym-lit: var(--bindu-on-sky); --_pd-sym-litrim: transparent; }
:where(.pd-disc--sky, .pd-ss--sky, .pd-infinity--sky, .pd-spanda--sky, .pd-ornament--sky) { color: var(--on-sky); }
:where(.pd-abs--lit, .pd-disc--lit, .pd-ss--lit, .pd-infinity--lit, .pd-spanda--lit, .pd-pv--lit, .pd-bnk--lit, .pd-ornament--lit, .pd-divider--lit, .pd-duality--lit) { --_pd-sym-bindu: var(--_pd-sym-lit); --_pd-sym-rim: var(--_pd-sym-litrim); }

/* Shared mark vocabulary: every SVG in the family paints with these (one rule each, many owners' elements) */
.pd-abs__fill, .pd-disc__a, .pd-ss__a, .pd-infinity__a, .pd-ornament__fill { fill: var(--_pd-sym-a); }
.pd-abs__fill-b, .pd-disc__b, .pd-ss__b, .pd-infinity__b { fill: var(--_pd-sym-bf); stroke: var(--_pd-sym-b); stroke-width: 1.5px; vector-effect: non-scaling-stroke; stroke-linejoin: miter; }
.pd-abs__line, .pd-ss__line, .pd-spanda__ring, .pd-pv__line, .pd-bnk__form, .pd-ornament__line {
  fill: none; stroke: var(--_pd-sym-a); stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-linecap: square; stroke-linejoin: miter;
}
.pd-abs__line--em, .pd-bnk__form--em { stroke-width: 1.5px; }
.pd-abs__line--faint { stroke-opacity: var(--opacity-muted); }
.pd-abs__grid, .pd-bnk__grid { fill: none; stroke: var(--rule); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.pd-abs__cut { fill: var(--_pd-sym-ground); }
.pd-abs__bindu, .pd-disc__bindu, .pd-ss__bindu, .pd-infinity__bindu, .pd-spanda__bindu, .pd-pv__bindu, .pd-bnk__bindu, .pd-ornament__bindu {
  fill: var(--_pd-sym-bindu); stroke: var(--_pd-sym-rim); stroke-width: 1px; vector-effect: non-scaling-stroke;
}
/* Halo: a bindu that sits on a seam or a solid half is cut free by a ground ring drawn under it */
.pd-disc__halo, .pd-ss__halo, .pd-infinity__halo { fill: var(--_pd-sym-ground); }

@media (forced-colors: active) {
  :where(.pd-abs__art, .pd-absg, .pd-disc, .pd-ss__svg, .pd-infinity, .pd-spanda, .pd-pv__art, .pd-bnk__art, .pd-ornament) {
    forced-color-adjust: none; --_pd-sym-a: CanvasText; --_pd-sym-b: CanvasText; --_pd-sym-bf: Canvas; --_pd-sym-ground: Canvas; --_pd-sym-bindu: CanvasText; --_pd-sym-rim: Canvas; color: CanvasText;
  }
}

/* ── 1. Abstract tiles (pd-abs) ────────────────────────────────────────────────────────────── */
.pd-abs { --_pd-sym-ground: var(--pd-ground, var(--surface-sunken)); margin: 0; display: grid; align-content: start; gap: var(--space-3); min-inline-size: 0; color: var(--text); font-size: var(--fs-body-s); }
.pd-abs__art { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 1; background: var(--_pd-sym-ground); color: var(--_pd-sym-ink, var(--text)); }
.pd-abs--sky { --_pd-sym-ink: var(--on-sky); --_pd-sym-ground: var(--sky-900); }
.pd-abs--bare { --_pd-sym-ground: transparent; }
.pd-abs__star { fill: var(--_pd-sym-a); }
.pd-abs__star--2 { fill-opacity: var(--opacity-star-2); }
.pd-abs__star--1 { fill-opacity: var(--opacity-star-1); }
.pd-abs__label { display: flex; align-items: baseline; gap: var(--space-2); padding-block-start: var(--space-2); border-block-start: var(--hairline) solid var(--rule-strong); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text); min-inline-size: 0; }
.pd-abs__num { color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.pd-abs__name { font-weight: 500; text-transform: uppercase; }
.pd-abs__gloss { margin-inline-start: auto; color: var(--text-subtle); text-align: end; }
.pd-abs-set { container-type: inline-size; }
.pd-abs-set__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); margin: 0; padding: 0; list-style: none; }
@container (inline-size >= 30em) { .pd-abs-set__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6) var(--gutter); } }
@container (inline-size >= 48em) { .pd-abs-set__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pd-abs-set--6 .pd-abs-set__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* Lit set (pd-absg): a token field under a transparent SVG, inside figure.pd-abs */
.pd-absg { position: relative; display: block; inline-size: 100%; aspect-ratio: 1; overflow: hidden; background: var(--_pd-sym-ground); color: var(--text); }
.pd-absg > * { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; display: block; }
.pd-absg--sky { color: var(--on-sky); }
.pd-absg__field--bindu { background-image: var(--grad-bindu); }
.pd-absg__field--dawn { background-image: var(--grad-dawn); }
.pd-absg__field--nebula { background-image: var(--grad-nebula); }
.pd-absg__field--jade { background-image: var(--grad-jade); }
/* Candra: lit with saffron-100 → saffron-500 only, cut to a crescent (horns up) by an alpha mask */
.pd-absg__field--candra {
  background-image: linear-gradient(200deg, var(--saffron-100) 10%, var(--saffron-500) 90%);
  -webkit-mask: var(--_pd-absg-crescent) center / 100% 100% no-repeat; mask: var(--_pd-absg-crescent) center / 100% 100% no-repeat;
  --_pd-absg-crescent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cpath fill='black' d='M18.61 42A30 30 0 1 0 77.39 42A30 30 0 0 1 18.61 42Z'/%3E%3C/svg%3E");
}
.pd-absg__mark { fill: currentColor; }
.pd-absg__mark--2 { fill-opacity: var(--opacity-star-2); }
.pd-absg__mark--1 { fill-opacity: var(--opacity-star-1); }
.pd-absg__line { fill: none; stroke: currentColor; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.pd-absg__line--faint { stroke-opacity: var(--opacity-muted); }
.pd-absg__sun { fill: var(--on-sky); stroke: var(--dawn-0); stroke-width: 1px; vector-effect: non-scaling-stroke; }

/* ── 2. GradientField (pd-grad) ─── one field per page; text only in the flat end ───────────── */
.pd-grad {
  --_pd-grad: var(--grad-dawn); --_pd-grad-ink: var(--on-sky); --_pd-grad-meta: var(--on-sky);
  container-type: inline-size; position: relative; isolation: isolate; display: block; margin: 0;
  min-block-size: var(--pd-grad-h, 20em); padding: var(--space-6);
  font-size: var(--fs-body-s); color: var(--_pd-grad-ink);
  background-color: var(--sky-900); background-image: var(--_pd-grad);
  outline: var(--hairline) solid var(--rule); outline-offset: calc(-1 * var(--hairline));
}
.pd-grad--dawn { --_pd-grad: var(--grad-dawn); }
.pd-grad--nebula { --_pd-grad: var(--grad-nebula); }
.pd-grad--jade { --_pd-grad: var(--grad-jade); --_pd-grad-ink: var(--text); --_pd-grad-meta: var(--text-muted); background-color: var(--surface-sunken); }
.pd-grad--bindu { --_pd-grad: var(--grad-bindu); --_pd-grad-ink: var(--text); --_pd-grad-meta: var(--text-muted); background-color: var(--surface-sunken); }
.pd-grad--candra { --_pd-grad: radial-gradient(70% 80% at 50% 0%, var(--saffron-100) 0%, color-mix(in oklab, var(--saffron-100) 40%, var(--surface)) 46%, var(--surface) 100%); --_pd-grad-ink: var(--text); --_pd-grad-meta: var(--text-muted); background-color: var(--surface); }
.pd-grad--mono { --_pd-grad: var(--grad-mono); }
/* Stars: six offset lattices with co-prime periods, so no repeat reads as a grid */
.pd-grad--nebula::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(circle at 18% 27%, var(--on-sky) 0 .7px, transparent 1.3px),
    radial-gradient(circle at 71% 63%, color-mix(in oklab, var(--on-sky) 70%, transparent) 0 .6px, transparent 1.1px),
    radial-gradient(circle at 44% 82%, color-mix(in oklab, var(--on-sky) 50%, transparent) 0 .5px, transparent 1px),
    radial-gradient(circle at 87% 12%, var(--on-sky) 0 .9px, transparent 1.7px),
    radial-gradient(circle at 33% 58%, color-mix(in oklab, var(--on-sky) 60%, transparent) 0 .55px, transparent 1px),
    radial-gradient(circle at 62% 21%, color-mix(in oklab, var(--on-sky) 80%, transparent) 0 .75px, transparent 1.3px);
  background-size: 97px 89px, 131px 113px, 59px 67px, 337px 283px, 173px 151px, 211px 199px;
  background-position: 0 0, 41px 17px, 13px 29px, 71px 43px, 89px 7px, 23px 101px;
}
.pd-grad--grain::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grain-image); background-size: 180px 180px; mix-blend-mode: var(--grain-blend); opacity: var(--grain-opacity);
}
.pd-grad--band { min-block-size: 0; block-size: var(--space-5); padding: 0; background-image: linear-gradient(90deg, var(--dawn-0) 0%, var(--dawn-1) 34%, var(--dawn-2) 72%, var(--dawn-3) 100%); }
.pd-grad--band.pd-grad--mono { background-image: var(--grad-mono); }
.pd-grad--hero { --pd-grad-h: 32em; display: grid; align-content: start; padding: var(--space-7) var(--space-6); }
/* Hold: the dawn hero keeps its night flat behind the copy (top 52%), then lets the dawn rise; text never meets the light band */
.pd-grad--hero.pd-grad--dawn { background-image: linear-gradient(180deg, var(--dawn-0) 0 var(--pd-grad-hold, 52%), transparent calc(var(--pd-grad-hold, 52%) + 22%)), var(--grad-dawn); }
@container (inline-size < 30em) { .pd-grad__inner { gap: var(--space-2); } }
.pd-grad__inner { display: grid; align-content: start; gap: var(--space-3); max-inline-size: var(--measure); }
.pd-grad__meta { font: var(--font-meta); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--_pd-grad-meta); font-variant-numeric: tabular-nums; }
.pd-grad__title { margin: 0; font: var(--font-display-m); font-size: clamp(var(--fs-headline), 7cqi, var(--fs-display-l)); letter-spacing: var(--track-display); color: var(--_pd-grad-ink); text-wrap: balance; }
.pd-grad__title em { font-style: italic; font-weight: 400; }
.pd-grad__dek { margin: 0; font: var(--font-body); color: var(--_pd-grad-ink); max-inline-size: 28em; text-wrap: pretty; }
/* Gradient display text: once per page, display sizes only; solid ink first */
.pd-grad-text { color: var(--text); }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .pd-grad-text { background-image: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
}
@media (forced-colors: active) { .pd-grad-text { -webkit-text-fill-color: CanvasText; background-image: none; } .pd-grad::before, .pd-grad::after { display: none; } }
.pd-grad-set { container-type: inline-size; }
.pd-grad-set__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6) var(--gutter); }
@container (inline-size >= 30em) { .pd-grad-set__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (inline-size >= 48em) { .pd-grad-set__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pd-grad-tile { margin: 0; display: grid; align-content: start; gap: var(--space-3); min-inline-size: 0; }
.pd-grad-tile > .pd-grad { min-block-size: 0; min-inline-size: 0; inline-size: 100%; aspect-ratio: 4 / 3; padding: 0; }
.pd-grad-tile__cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); padding-block-start: var(--space-2); border-block-start: var(--hairline) solid var(--rule-strong); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text); }
.pd-grad-tile__num { color: var(--text-subtle); }
.pd-grad-tile__name { font-weight: 500; text-transform: uppercase; }
.pd-grad-tile__note { flex-basis: 100%; color: var(--text-subtle); }

/* ── 3. Disc (pd-disc) — THE shared split disc: Śiva | Śakti + bindu ───────────────────────── */
.pd-disc { display: inline-block; flex: none; inline-size: var(--pd-disc-size, 2em); block-size: var(--pd-disc-size, 2em); vertical-align: middle; overflow: visible; }
.pd-disc--xs { --pd-disc-size: 1em; } .pd-disc--s { --pd-disc-size: 1.5em; } .pd-disc--m { --pd-disc-size: 3em; } .pd-disc--l { --pd-disc-size: 6em; } .pd-disc--xl { --pd-disc-size: 12em; }
.pd-disc__ring { display: none; fill: none; stroke: currentColor; stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.pd-disc--outline { --_pd-sym-a: transparent; --_pd-sym-bf: transparent; --_pd-sym-b: currentColor; }
.pd-disc--outline .pd-disc__ring { display: inline; }
/* CSS-only form for tiny inline use (Tag, meta lines): <span class="pd-disc pd-disc--css" aria-hidden="true"></span> */
.pd-disc--css { position: relative; border: 1.5px solid var(--_pd-sym-b); border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--_pd-sym-a) 50%, var(--_pd-sym-bf) 50%); }
.pd-disc--css::after { content: ""; position: absolute; inset: 0; margin: auto; inline-size: 14%; block-size: 14%; min-inline-size: 2px; min-block-size: 2px; border-radius: var(--radius-pill); background: var(--_pd-sym-bindu); outline: 1.5px solid var(--_pd-sym-ground); }
.pd-disc--css.pd-disc--outline { background: linear-gradient(90deg, transparent calc(50% - .75px), var(--_pd-sym-b) calc(50% - .75px) calc(50% + .75px), transparent 0); }

/* ── 4. ShivaShakti emblems (pd-ss) ────────────────────────────────────────────────────────── */
.pd-ss { display: inline-grid; justify-items: center; align-content: start; gap: var(--space-3); margin: 0; color: var(--text); }
.pd-ss__svg, .pd-ss > .pd-disc { display: block; inline-size: var(--pd-ss-size, 7.5em); block-size: var(--pd-ss-size, 7.5em); overflow: visible; }
.pd-ss--sky { color: var(--on-sky); }
.pd-ss--s { --pd-ss-size: 2.5em; } .pd-ss--l { --pd-ss-size: 12em; }
.pd-ss__ring { fill: none; stroke: var(--_pd-sym-a); stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-opacity: var(--opacity-muted); }
.pd-ss__dot { fill: var(--_pd-sym-b); }
.pd-ss__label { display: grid; justify-items: center; gap: var(--space-1); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); text-align: center; }
.pd-ss__label b { font-weight: 500; color: var(--text); text-transform: uppercase; }
.pd-ss__label i { font: var(--font-caption); font-family: var(--font-text); font-style: italic; font-size: var(--fs-body-s); color: var(--text-muted); }
.pd-ss-set { container-type: inline-size; padding-block: var(--space-5); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-ss-set + .pd-ss-set { border-block-start-color: var(--rule); }
.pd-ss-set__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); justify-items: center; }
.pd-ss-set .pd-ss { --pd-ss-size: min(7.5em, 34cqi); }
@container (inline-size >= 40em) { .pd-ss-set__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pd-ss-set .pd-ss { --pd-ss-size: min(7.5em, 18cqi); } }

/* ── 5. Infinity (pd-infinity) — ananta: Śiva lobe solid | Śakti lobe outline, bindu at the crossing */
.pd-infinity { display: inline-block; flex: none; inline-size: 2em; block-size: 1em; vertical-align: -.125em; overflow: visible; }
.pd-infinity__a { stroke: var(--_pd-sym-a); stroke-width: 1.5px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.pd-infinity--line .pd-infinity__a, .pd-infinity--line .pd-infinity__b { fill: none; stroke: currentColor; stroke-width: 1px; }
.pd-infinity-stack { display: inline-grid; justify-items: center; gap: var(--space-3); color: var(--text); font-size: var(--fs-body-s); }
.pd-infinity-stack > .pd-infinity { font-size: 3em; }
.pd-infinity-stack__label { font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); padding-inline-start: var(--track-caps); }
.pd-infinity-stack__deva { margin-block-start: calc(-1 * var(--space-2)); font-family: var(--font-deva); font-size: var(--fs-body-s); line-height: 1.4; color: var(--text-subtle); }
/* Draw: the bindu lands, then both lobes unfold from it (scale only; --dur-draw), once. Reduced motion: --dur-* are 0 → static. */
.pd-infinity--draw :where(.pd-infinity__a, .pd-infinity__b) { transform-box: fill-box; animation: pd-inf-unfold var(--dur-draw, 900ms) var(--ease-in-out) var(--dur-2, 180ms) backwards; }
.pd-infinity--draw .pd-infinity__a { transform-origin: 100% 50%; }
.pd-infinity--draw .pd-infinity__b { transform-origin: 0% 50%; }
.pd-infinity--draw :where(.pd-infinity__bindu, .pd-infinity__halo) { animation: pd-inf-land var(--dur-2, 180ms) var(--ease-out) backwards; }
@keyframes pd-inf-unfold { from { scale: 0 1; } }
@keyframes pd-inf-land { from { opacity: 0; } }

/* ── 6. Duality (pd-duality) — titles and terms are ink; only the emblem carries Śiva | Śakti ── */
.pd-duality { container-type: inline-size; inline-size: 100%; max-inline-size: var(--measure-wide); margin-inline: auto; color: var(--text); }
.pd-duality__emblem { display: flex; justify-content: center; margin-block-end: var(--space-5); }
.pd-duality__emblem > .pd-disc { --pd-disc-size: 3.5em; }
.pd-duality__grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--hairline) minmax(0, 1fr); column-gap: var(--space-4); margin: 0; }
.pd-duality__spine { grid-column: 2; grid-row: 1 / span 12; background: var(--rule-strong); }
.pd-duality__cell { margin: 0; padding-block: var(--space-4); border-block-start: var(--hairline) solid var(--rule); min-inline-size: 0; }
.pd-duality__cell--l { grid-column: 1; text-align: end; }
.pd-duality__cell--r { grid-column: 3; text-align: start; }
.pd-duality__cell--head { border-block-start: 0; padding-block: 0 var(--space-4); }
.pd-duality__title { margin: 0; font: var(--font-headline); font-family: var(--font-display); color: var(--text); }
.pd-duality__deva { display: block; margin-block-start: var(--space-1); font-family: var(--font-deva); font-size: var(--fs-body-s); line-height: 1.5; color: var(--text-muted); }
.pd-duality__term { display: block; font: var(--font-meta); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-subtle); }
.pd-duality__word { display: block; margin-block-start: var(--space-1); font-family: var(--font-text); font-style: italic; font-size: var(--fs-body); line-height: 1.3; color: var(--text); }
.pd-duality__body { display: block; margin-block-start: var(--space-2); font: var(--font-body-s); font-family: var(--font-text); color: var(--text-muted); text-wrap: pretty; }
.pd-duality__close { margin: 0; padding-block-start: var(--space-5); border-block-start: var(--hairline) solid var(--rule-strong); text-align: center; font: var(--font-title); font-style: italic; font-weight: 400; color: var(--text); }
.pd-duality__close::after { content: ""; display: block; inline-size: .25em; block-size: .25em; margin: var(--space-3) auto 0; border-radius: var(--radius-pill); background: var(--_pd-sym-bindu); outline: 1px solid var(--_pd-sym-rim); }
@container (inline-size >= 30em) {
  .pd-duality__grid { column-gap: var(--space-6); }
  .pd-duality__title { font: var(--font-display-m); }
  .pd-duality__word { font-size: var(--fs-title); }
  .pd-duality__body { font: var(--font-body); font-family: var(--font-text); }
  .pd-duality__close { font: var(--font-pullquote); }
}

/* ── 7. Divider (pd-divider) — one hairline, one centred mark ───────────────────────────────── */
.pd-divider { display: flex; align-items: center; gap: var(--space-4); margin-block: var(--space-6); color: var(--text); font-size: var(--fs-body-s); line-height: 1; }
.pd-divider::before, .pd-divider::after { content: ""; flex: 1 1 0; border-block-start: var(--hairline) solid var(--rule); }
.pd-divider--strong::before, .pd-divider--strong::after { border-block-start-color: var(--rule-strong); }
.pd-divider--start::before { flex: 0 0 var(--space-6); }
.pd-divider--short::before, .pd-divider--short::after { flex: 0 1 6em; }
.pd-divider--short { justify-content: center; }
.pd-divider__orn { flex: none; display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text); }
.pd-divider--bindu .pd-divider__orn::before { content: ""; inline-size: .5em; block-size: .5em; border-radius: var(--radius-pill); background: var(--_pd-sym-bindu); outline: 1px solid var(--_pd-sym-rim); }
.pd-divider--verse .pd-divider__orn { font-family: var(--font-deva); font-size: var(--fs-title); color: var(--text-subtle); }
.pd-divider__stars { display: block; inline-size: 4em; block-size: 1.5em; overflow: visible; }
.pd-divider__stars line { stroke: var(--text-subtle); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.pd-divider__stars circle { fill: currentColor; }
.pd-divider__stars .pd-divider__dim { fill-opacity: var(--opacity-star-2); }
.pd-divider__orn > .pd-infinity { font-size: 1em; }
.pd-divider__orn > .pd-ornament { inline-size: 6em; block-size: 1.5em; }
@media (forced-colors: active) { .pd-divider::before, .pd-divider::after { border-block-start-color: CanvasText; } .pd-divider--bindu .pd-divider__orn::before { background: CanvasText; } }

/* ── 8. Spanda (pd-spanda) — the throb that does not move ──────────────────────────────────── */
.pd-spanda { display: inline-block; flex: none; inline-size: var(--pd-spanda-size, 4em); block-size: var(--pd-spanda-size, 4em); vertical-align: middle; overflow: visible; }
.pd-spanda--s { --pd-spanda-size: 2em; } .pd-spanda--l { --pd-spanda-size: 8em; }
.pd-spanda--wave { block-size: calc(var(--pd-spanda-size, 4em) / 2); }
.pd-spanda__ring--3 { stroke-opacity: var(--opacity-star-3); }
.pd-spanda__ring--2 { stroke-opacity: var(--opacity-star-2); }
.pd-spanda__ring--1 { stroke-opacity: var(--opacity-star-1); }
.pd-spanda__ring--0 { stroke-opacity: var(--opacity-ghost); }
.pd-spanda__wave { fill: none; stroke: var(--_pd-sym-a); stroke-width: 1px; vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  /* one ≤5s run on load (3 × 1.6s) or one ripple per interaction ([data-pulse] set by the consumer, or hover/focus of a parent link) */
  .pd-spanda--pulse .pd-spanda__wave { animation: pd-spanda-ripple 1.6s var(--ease-out) 3; }
  :where(.pd-spanda[data-pulse]) .pd-spanda__wave { animation: pd-spanda-ripple 1.6s var(--ease-out) 1; }
  @media (hover: hover) { :where(a:hover, button:hover) :where(.pd-spanda--hover) .pd-spanda__wave { animation: pd-spanda-ripple 1.6s var(--ease-out) 1; } }
  :where(a:focus-visible, button:focus-visible) :where(.pd-spanda--hover) .pd-spanda__wave { animation: pd-spanda-ripple 1.6s var(--ease-out) 1; }
}
@keyframes pd-spanda-ripple { from { opacity: var(--opacity-star-3); scale: .1; } to { opacity: 0; scale: 1; } }

/* ── 9. PrakashaVimarsha (pd-pv) — light and its mirror ────────────────────────────────────── */
.pd-pv { container-type: inline-size; margin: 0; display: grid; gap: var(--space-3); color: var(--text); max-inline-size: var(--measure-wide); }
.pd-pv__art { --_pd-pv-at: 21% 50%; display: block; inline-size: 100%; block-size: auto; aspect-ratio: 2; color: var(--text); background: radial-gradient(closest-side circle at var(--_pd-pv-at), var(--saffron-100), color-mix(in oklab, var(--saffron-100) 30%, var(--surface)) 55%, transparent) var(--surface); outline: var(--hairline) solid var(--rule); outline-offset: calc(-1 * var(--hairline)); }
.pd-pv--v { max-inline-size: 16em; }
.pd-pv--v .pd-pv__art { --_pd-pv-at: 50% 21%; aspect-ratio: 1 / 2; }
.pd-pv__axis { fill: none; stroke: var(--rule-strong); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.pd-pv__meet { fill: var(--_pd-sym-a); }
.pd-pv__mirror { opacity: var(--opacity-muted); }
.pd-pv__mirror .pd-pv__bindu { fill: currentColor; stroke: none; }
.pd-pv__cap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2) var(--space-4); padding-block-start: var(--space-2); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-pv--v .pd-pv__cap { grid-template-columns: minmax(0, 1fr); }
.pd-pv__term { display: grid; gap: var(--space-1); align-content: start; }
.pd-pv__term--r { text-align: end; }
.pd-pv--v .pd-pv__term--r { text-align: start; }
.pd-pv__iast { font-family: var(--font-text); font-style: italic; font-size: var(--fs-title); line-height: 1.2; }
.pd-pv__deva { font-family: var(--font-deva); font-size: var(--fs-body-s); line-height: 1.4; color: var(--text-muted); }
.pd-pv__gloss { font: var(--font-caption); color: var(--text-muted); }
.pd-pv__cite { grid-column: 1 / -1; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
@container (inline-size < 30em) { .pd-pv__iast { font-size: var(--fs-body); } }

/* ── 10. BinduNadaKala (pd-bnk) — point → line → wave → crescent → ring ────────────────────── */
.pd-bnk { container-type: inline-size; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; display: flex; overflow-x: clip; color: var(--text); }
.pd-bnk__step { flex: 1 1 0; display: grid; align-content: start; gap: var(--space-1); min-inline-size: 0; padding-block-end: var(--space-3); color: inherit; text-decoration: none; }
.pd-bnk__art { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 1; max-block-size: var(--pd-bnk-art, 9em); margin-block-end: var(--space-2); overflow: visible; }
.pd-bnk__text { display: grid; gap: var(--space-1); padding-inline-end: var(--space-3); }
.pd-bnk__num { font: var(--font-numeral); letter-spacing: var(--track-mono); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.pd-bnk__name { font-family: var(--font-text); font-style: italic; font-size: var(--fs-title); line-height: 1.15; justify-self: start; margin-block-end: var(--space-2); }
.pd-bnk__deva { font-family: var(--font-deva); font-size: var(--fs-body-s); line-height: 1.4; color: var(--text-muted); }
.pd-bnk__gloss { font: var(--font-caption); color: var(--text-muted); }
.pd-bnk__origin { fill: var(--_pd-sym-a); }
:where(.pd-bnk__step)[aria-current] .pd-bnk__name { text-decoration: underline 2px; text-underline-offset: .5em; text-decoration-color: var(--rule-strong); }
a.pd-bnk__step { min-block-size: var(--target-min); }
@media (hover: hover) { :where(a.pd-bnk__step:hover) .pd-bnk__name { text-decoration: underline 1px; text-underline-offset: .5em; } }
a.pd-bnk__step:focus-visible { outline-offset: calc(-1 * var(--focus-width)); }
@container (inline-size < 30em) {
  .pd-bnk--5 .pd-bnk__step { flex-basis: 100%; grid-template-columns: var(--row-lead) minmax(0, 1fr); align-items: center; gap: var(--space-4); padding-block: var(--space-3); border-block-end: var(--hairline) solid var(--rule); }
  .pd-bnk--5 .pd-bnk__art { margin: 0; overflow: hidden; }
  .pd-bnk__name { font-size: var(--fs-body); }
}
@media (prefers-reduced-motion: no-preference) {
  :where(.pd-bnk--reveal[data-play]) .pd-bnk__step { animation: pd-bnk-in var(--dur-4, 600ms) var(--ease-out) backwards; }
  :where(.pd-bnk--reveal[data-play]) .pd-bnk__step:nth-child(2) { animation-delay: calc(var(--dur-4, 600ms) * 1); }
  :where(.pd-bnk--reveal[data-play]) .pd-bnk__step:nth-child(3) { animation-delay: calc(var(--dur-4, 600ms) * 2); }
  :where(.pd-bnk--reveal[data-play]) .pd-bnk__step:nth-child(4) { animation-delay: calc(var(--dur-4, 600ms) * 3); }
  :where(.pd-bnk--reveal[data-play]) .pd-bnk__step:nth-child(5) { animation-delay: calc(var(--dur-4, 600ms) * 4); }
}
@keyframes pd-bnk-in { from { opacity: 0; translate: 0 var(--space-2); } }

/* ── 11. Ornament (pd-ornament) — generative section mark, seeded by fixed section number 01–10, Experience 11 ────────────────────── */
.pd-ornament { display: inline-block; flex: none; inline-size: var(--pd-ornament-size, 6em); block-size: calc(var(--pd-ornament-size, 6em) / 4); vertical-align: middle; overflow: visible; }
.pd-ornament--s { --pd-ornament-size: 4em; } .pd-ornament--l { --pd-ornament-size: 12em; }

/* ── 12. Pattern (pd-pattern) — CSS-only grounds at --opacity-ghost, one per page ──────────── */
.pd-pattern { --_pd-pat-c: var(--text); --_pd-pat-o: var(--opacity-ghost); --_pd-pat-s: var(--pd-pattern-size, var(--gutter)); position: relative; isolation: isolate; }
.pd-pattern::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--_pd-pat-o); }
.pd-pattern--grid::before { background-image: linear-gradient(90deg, var(--_pd-pat-c) var(--hairline), transparent var(--hairline)), linear-gradient(180deg, var(--_pd-pat-c) var(--hairline), transparent var(--hairline)); background-size: var(--_pd-pat-s) var(--_pd-pat-s); }
.pd-pattern--dots::before { background-image: radial-gradient(circle, var(--_pd-pat-c) 0 1px, transparent 1.5px); background-size: var(--_pd-pat-s) var(--_pd-pat-s); background-position: calc(var(--_pd-pat-s) / 2) calc(var(--_pd-pat-s) / 2); }
.pd-pattern--baseline::before { background-image: linear-gradient(180deg, transparent calc(100% - var(--hairline)), var(--_pd-pat-c) 0); background-size: 100% var(--pd-pattern-lh, 1lh); background-position: 0 var(--pd-pattern-offset, 0); }
.pd-pattern--grain::before { opacity: min(var(--grain-opacity), var(--_pd-pat-o)); background-image: var(--grain-image); background-size: 180px 180px; mix-blend-mode: var(--grain-blend); }
/* 36 tattva ticks: a minor tick per tattva, a full tick at each group's first tattva (1 · 6 · 12 · 14 · 17 · 22 · 27 · 32) and at 36 */
.pd-pattern--ticks::before {
  inset-block-start: auto; block-size: var(--space-4);
  --_t: linear-gradient(var(--_pd-pat-c), var(--_pd-pat-c));
  background:
    var(--_t) 0% 100% / var(--hairline) 100% no-repeat, var(--_t) calc(5 / 35 * 100%) 100% / var(--hairline) 100% no-repeat,
    var(--_t) calc(11 / 35 * 100%) 100% / var(--hairline) 100% no-repeat, var(--_t) calc(13 / 35 * 100%) 100% / var(--hairline) 100% no-repeat,
    var(--_t) calc(16 / 35 * 100%) 100% / var(--hairline) 100% no-repeat, var(--_t) calc(21 / 35 * 100%) 100% / var(--hairline) 100% no-repeat,
    var(--_t) calc(26 / 35 * 100%) 100% / var(--hairline) 100% no-repeat, var(--_t) calc(31 / 35 * 100%) 100% / var(--hairline) 100% no-repeat,
    var(--_t) 100% 100% / var(--hairline) 100% no-repeat,
    linear-gradient(90deg, var(--_pd-pat-c) var(--hairline), transparent var(--hairline)) 0 100% / calc((100% - var(--hairline)) / 35) 40% repeat-x,
    linear-gradient(var(--_pd-pat-c), var(--_pd-pat-c)) 0 100% / 100% var(--hairline) no-repeat;
}
/* Standalone tick rule (nothing sits on it): a mark, so it may rise to the 3:1 border token */
.pd-pattern--rule { display: block; block-size: var(--space-4); margin-block: var(--space-5); --_pd-pat-o: 1; --_pd-pat-c: var(--border-control); }
.pd-pattern--fine { --pd-pattern-size: var(--space-4); }
.pd-pattern--wide { --pd-pattern-size: var(--space-7); }
@media (forced-colors: active) { .pd-pattern:not(.pd-pattern--rule)::before { display: none; } .pd-pattern--rule::before { --_pd-pat-c: CanvasText; } }

@media print {
  :where(.pd-grad, .pd-absg, .pd-abs__art, .pd-pv__art, .pd-disc, .pd-ss__svg) { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pd-grad--grain::after, .pd-pattern--grain::before { display: none; }
}
}

/* ── part: brandkit.css ── */
/* ── PART: brandkit ──────────────────────────────────────────────────────────
   Pandox DS v2 · package "brandkit" · the kit for showing brands designed for clients (01 Work).
   .pd-bk-color   ColorSpecimen — swatch cards (role, name, HEX / RGB / OKLCH computed from --sw, print refs,
                  usage, share) with contrast badges computed in JS, plus a pairings matrix
   .pd-bk-type    TypeSpecimen — hero glyph, family facts, live sample + weight control, size waterfall,
                  weights, glyph set (incl. IAST) with an inspector
   .pd-bk-mock    MockupFrame — abstract, non-photographic frames: browser, phone, poster, cards, box,
                  social, billboard. Geometry is CSS only; the slot takes any image or a .pd-ph
   .pd-bk-strip   BrandStrip — "Selected brands": hairline cells of typographic client names, logo-file toggle
   .pd-bk-show    BrandSystemShowcase — a case-study section: logo panels on brand colours, palette bar,
                  type pairing, voice words, applications grid (uses .pd-bk-mock)
   .pd-bk-guide   BrandGuideTemplate — a printable multi-page brand-guideline document (A4 landscape)
   Client colours are content, not theme: the consumer passes them as custom properties on the element
   (--sw on a swatch; --bk-c1…--bk-c6 on a showcase or guide). JS reads them, writes the readable on-colour
   (--sw-on / --bk-on) and the computed values. Every hairline around a client colour uses --rule-strong,
   so a swatch that matches the page still has a 3:1 edge in all five themes. */
@layer components.site {

/* ══ Shared atoms ══════════════════════════════════════════════════════════ */
.pd-bk-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); margin: 0; padding: var(--space-2) var(--space-3); border: var(--hairline) dashed var(--border-control); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); }
.pd-bk-note b { font-weight: 500; color: var(--text); text-transform: uppercase; letter-spacing: var(--track-caps); }
.pd-bk-label { margin: 0; font: var(--font-meta); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-subtle); }
.pd-bk-badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: .25em .5em .25em .25em; border: var(--hairline) solid var(--rule-strong); border-radius: var(--radius-1); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pd-bk-badge__s { display: inline-grid; place-items: center; inline-size: 1.75em; block-size: 1.5em; border-radius: var(--radius-0); font: 600 var(--fs-meta)/1 var(--font-sans); letter-spacing: 0; }
.pd-bk-badge__g { font-weight: 600; }
.pd-bk-badge--fail { color: var(--text-muted); border-style: solid; border-color: var(--rule); }
.pd-bk-badge--fail .pd-bk-badge__g { font-weight: 400; text-decoration: line-through; text-decoration-thickness: var(--hairline); }

/* ══ ColorSpecimen ═════════════════════════════════════════════════════════ */
.pd-bk-color { container: pd-bk-color / inline-size; display: grid; gap: var(--space-6); }
.pd-bk-color__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: var(--gutter); margin: 0; padding: 0; list-style: none; }
.pd-bk-swatch { display: grid; grid-template-rows: auto 1fr; min-inline-size: 0; border: var(--hairline) solid var(--rule-strong); background: var(--surface); }
.pd-bk-swatch__chip { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-2); aspect-ratio: 4 / 3; padding: var(--space-4); background: var(--sw, var(--surface-sunken)); color: var(--sw-on, var(--text)); border-block-end: var(--hairline) solid var(--rule-strong); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.pd-bk-swatch__role { margin: 0; font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; }
.pd-bk-swatch__aa { align-self: end; margin: 0; font: 400 var(--fs-display-m)/.9 var(--font-display); letter-spacing: var(--track-display); }
.pd-bk-swatch__share { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font: var(--font-meta); letter-spacing: var(--track-mono); font-variant-numeric: tabular-nums; }
.pd-bk-swatch__body { display: grid; align-content: start; gap: var(--space-3); padding: var(--space-4); }
.pd-bk-swatch__name { margin: 0; font: var(--font-title); color: var(--text); }
.pd-bk-swatch__vals { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-3); margin: 0; font: var(--font-meta); letter-spacing: var(--track-mono); font-variant-numeric: tabular-nums; }
.pd-bk-swatch__vals dt { color: var(--text-subtle); text-transform: uppercase; }
.pd-bk-swatch__vals dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.pd-bk-swatch__use { margin: 0; padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule); font: var(--font-caption); color: var(--text-muted); }
.pd-bk-swatch__checks { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.pd-bk-swatch__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.pd-bk-swatch--placeholder .pd-bk-swatch__chip::after { content: "[Placeholder]"; position: absolute; inset-block-start: var(--space-4); inset-inline-end: var(--space-4); font: var(--font-meta); letter-spacing: var(--track-mono); opacity: .8; }
@container pd-bk-color (min-width: 60em) { .pd-bk-color__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pd-bk-swatch--lead { grid-row: span 2; } }
@container pd-bk-color (min-width: 48em) {
  .pd-bk-swatch--lead { grid-column: span 2; }
  .pd-bk-swatch--lead .pd-bk-swatch__chip { aspect-ratio: auto; min-block-size: 100%; }
  .pd-bk-swatch--lead { grid-template-columns: 1.2fr 1fr; grid-template-rows: none; }
  .pd-bk-swatch--lead .pd-bk-swatch__chip { border-block-end: 0; border-inline-end: var(--hairline) solid var(--rule-strong); }
  .pd-bk-swatch--lead .pd-bk-swatch__aa { font-size: var(--fs-display-l); }
}
@container pd-bk-color (min-width: 60em) {
  .pd-bk-swatch--lead { grid-template-columns: none; grid-template-rows: 1fr auto; }
  .pd-bk-swatch--lead .pd-bk-swatch__chip { min-block-size: 0; border-inline-end: 0; border-block-end: var(--hairline) solid var(--rule-strong); }
  .pd-bk-swatch--lead .pd-bk-swatch__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-6); }
  .pd-bk-swatch--lead :where(.pd-bk-swatch__name, .pd-bk-swatch__use, .pd-bk-swatch__foot) { grid-column: 1 / -1; }
}
/* Compact list: one row per colour */
.pd-bk-color--list .pd-bk-color__grid { grid-template-columns: 1fr; gap: 0; border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-bk-color--list .pd-bk-swatch { grid-template-columns: 5rem 1fr; grid-template-rows: none; border-width: 0 0 var(--hairline); }
.pd-bk-color--list .pd-bk-swatch__chip { aspect-ratio: auto; padding: var(--space-2); border-block-end: 0; border-inline-end: var(--hairline) solid var(--rule-strong); }
.pd-bk-color--list :where(.pd-bk-swatch__role, .pd-bk-swatch__share, .pd-bk-swatch--placeholder .pd-bk-swatch__chip)::after { content: none; }
.pd-bk-color--list .pd-bk-swatch__aa { font-size: var(--fs-headline); }
.pd-bk-color--list .pd-bk-swatch__role { display: none; }

/* Pairings matrix */
.pd-bk-matrix { display: grid; gap: var(--space-3); }
.pd-bk-matrix__scroll { overflow-x: auto; }
.pd-bk-matrix__scroll:focus-visible { outline-offset: var(--focus-offset); }
.pd-bk-matrix__tbl { inline-size: 100%; border-collapse: collapse; font: var(--font-meta); letter-spacing: var(--track-mono); font-variant-numeric: tabular-nums; }
.pd-bk-matrix__tbl th { padding: var(--space-2); font-weight: 500; text-align: start; color: var(--text-subtle); text-transform: uppercase; white-space: nowrap; }
.pd-bk-matrix__tbl td { padding: 0; border: var(--hairline) solid var(--rule-strong); }
.pd-bk-matrix__cell { display: grid; gap: .15em; min-inline-size: 5.5rem; padding: var(--space-2) var(--space-3); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.pd-bk-matrix__cell b { font: 400 var(--fs-title)/1 var(--font-display); }
.pd-bk-matrix__cell[data-pass="false"] b { opacity: .55; }
.pd-bk-matrix__cell span { opacity: .9; }

/* ══ TypeSpecimen ══════════════════════════════════════════════════════════ */
.pd-bk-type { --pd-bk-face: var(--bk-face, var(--font-display)); --pd-bk-wt: 400; container: pd-bk-type / inline-size; display: grid; gap: var(--space-7); }
.pd-bk-type__hero { display: grid; gap: var(--space-6); padding-block: var(--space-5); border-block: var(--hairline) solid var(--rule-strong); }
.pd-bk-type__aa { margin: 0; font-family: var(--pd-bk-face); font-weight: var(--pd-bk-wt); font-size: clamp(var(--fs-display-xl), 30cqi, 15rem); line-height: .8; letter-spacing: var(--track-display); color: var(--text); }
.pd-bk-type__aa span { color: var(--text-subtle); }
.pd-bk-type__name { margin: 0 0 var(--space-4); font: var(--font-headline); color: var(--text); }
.pd-bk-type__facts { display: grid; grid-template-columns: minmax(7rem, auto) 1fr; margin: 0; }
.pd-bk-type__facts :where(dt, dd) { margin: 0; padding-block: var(--space-2); border-block-start: var(--hairline) solid var(--rule); }
.pd-bk-type__facts dt { font: var(--font-meta); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-subtle); }
.pd-bk-type__facts dd { font: var(--font-body-s); color: var(--text); }
@container pd-bk-type (min-width: 44em) { .pd-bk-type__hero { grid-template-columns: 1.3fr 1fr; align-items: end; } }

.pd-bk-type__tools { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-4) var(--space-6); }
.pd-bk-type__input { display: grid; flex: 1 1 18rem; gap: var(--space-2); font: var(--font-label); color: var(--text-muted); }
.pd-bk-type__input input { min-block-size: var(--target-min); padding-inline: var(--space-3); border: var(--hairline) solid var(--border-control); border-radius: var(--radius-1); background: var(--surface); color: var(--text); font: var(--font-body); }
.pd-bk-type__input input:focus-visible { outline-offset: var(--focus-offset); }
.pd-bk-type__weights-ctl { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; border: 0; }
.pd-bk-type__weights-ctl legend { margin-block-end: var(--space-2); padding: 0; font: var(--font-label); color: var(--text-muted); }

.pd-bk-type__water { display: grid; margin: 0; padding: 0; list-style: none; }
.pd-bk-type__row { display: grid; grid-template-columns: var(--row-lead) 1fr; gap: var(--space-4); align-items: baseline; padding-block: var(--space-3); border-block-start: var(--hairline) solid var(--rule); }
.pd-bk-type__row .pd-meta { white-space: nowrap; }
.pd-bk-type__line { min-inline-size: 0; margin: 0; overflow: hidden; font-family: var(--pd-bk-face); font-weight: var(--pd-bk-wt); line-height: 1.2; color: var(--text); white-space: nowrap; text-overflow: ellipsis; }
.pd-bk-type__line--xl { font-size: var(--fs-display-xl); line-height: 1.12; }
.pd-bk-type__line--l { font-size: var(--fs-display-l); }
.pd-bk-type__line--m { font-size: var(--fs-display-m); }
.pd-bk-type__line--h { font-size: var(--fs-headline); }
.pd-bk-type__line--t { font-size: var(--fs-title); }
.pd-bk-type__line--b { font-size: var(--fs-body); white-space: normal; }
.pd-bk-type__line--c { font-size: var(--fs-caption); white-space: normal; }
@container pd-bk-type (max-width: 32em) { .pd-bk-type__row { grid-template-columns: 1fr; gap: var(--space-1); } .pd-bk-type__line--xl { font-size: var(--fs-display-l); } .pd-bk-type__line--l { font-size: var(--fs-display-m); } }

.pd-bk-type__wts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-block: var(--hairline) solid var(--rule-strong); }
.pd-bk-type__wt { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-3) var(--space-4) 0; }
.pd-bk-type__wt b { font-family: var(--pd-bk-face); font-size: var(--fs-display-m); line-height: 1; color: var(--text); }
.pd-bk-type__wt span { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); }

.pd-bk-type__set { display: grid; gap: var(--space-6); }
@container pd-bk-type (min-width: 52em) { .pd-bk-type__set { grid-template-columns: 1fr 15rem; align-items: start; } }
.pd-bk-type__groups { display: grid; gap: var(--space-5); min-inline-size: 0; }
.pd-bk-type__group { display: grid; gap: var(--space-2); }
.pd-bk-type__glyphs { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--target-min), 1fr)); margin: 0; padding: 0; list-style: none; border-block-start: var(--hairline) solid var(--rule); border-inline-start: var(--hairline) solid var(--rule); }
.pd-bk-type__glyph { display: grid; place-items: center; inline-size: 100%; aspect-ratio: 1; min-block-size: var(--target-min); padding: 0; border: 0; border-block-end: var(--hairline) solid var(--rule); border-inline-end: var(--hairline) solid var(--rule); background: transparent; color: var(--text); font-family: var(--pd-bk-face); font-weight: var(--pd-bk-wt); font-size: var(--fs-title); cursor: pointer; }
.pd-bk-type__glyph:hover { background: var(--surface-sunken); }
.pd-bk-type__glyph:focus-visible { outline-offset: calc(-1 * var(--focus-width)); position: relative; z-index: 1; }
.pd-bk-type__glyph[aria-pressed="true"] { background: var(--selected-bg); color: var(--selected-fg); }
@container pd-bk-type (min-width: 40em) { .pd-bk-type__glyphs { grid-template-columns: repeat(13, minmax(0, 1fr)); } }
.pd-bk-type__glyphs--iast .pd-bk-type__glyph { font-size: var(--fs-headline); }
.pd-bk-type__inspect { position: sticky; inset-block-start: var(--space-5); display: grid; gap: var(--space-3); padding: var(--space-4); border: var(--hairline) solid var(--rule-strong); background: var(--surface); }
.pd-bk-type__big { display: grid; place-items: center; aspect-ratio: 1; margin: 0; background-image: linear-gradient(var(--rule), var(--rule)), linear-gradient(var(--rule), var(--rule)), linear-gradient(var(--rule), var(--rule)); background-size: 100% var(--hairline); background-position: 0 28%, 0 70%, 0 78%; background-repeat: no-repeat; font-family: var(--pd-bk-face); font-weight: var(--pd-bk-wt); font-size: var(--fs-display-xl); line-height: 1; color: var(--text); }
.pd-bk-type__cp { margin: 0; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); }
.pd-bk-type__cp b { display: block; font: var(--font-label); color: var(--text); letter-spacing: 0; }

.pd-bk-type__para { display: grid; gap: var(--space-5); padding-block-start: var(--space-5); border-block-start: var(--hairline) solid var(--rule); }
@container pd-bk-type (min-width: 44em) { .pd-bk-type__para { grid-template-columns: 1fr 1fr; } }
.pd-bk-type__para p { margin: 0; max-inline-size: var(--measure); font-family: var(--pd-bk-face); font-weight: var(--pd-bk-wt); color: var(--text); }
.pd-bk-type__para .pd-bk-type__lede { font-size: var(--fs-lede); line-height: 1.35; }
.pd-bk-type__para .pd-bk-type__body { font-size: var(--fs-body); line-height: 1.6; color: var(--text-muted); }
.pd-bk-type--compact { gap: var(--space-5); }
.pd-bk-type--compact .pd-bk-type__aa { font-size: clamp(var(--fs-display-l), 18cqi, var(--fs-display-xl)); }

/* ══ MockupFrame ═══════════════════════════════════════════════════════════ */
.pd-bk-mock { --pd-bk-stage: var(--bk-stage, var(--surface-sunken)); container: pd-bk-mock / inline-size; display: grid; align-content: start; gap: var(--space-2); min-inline-size: 0; margin: 0; }
.pd-bk-mock__stage { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; padding: 8cqi; background: var(--pd-bk-stage); border: var(--hairline) solid var(--rule); }
.pd-bk-mock__slot { position: relative; display: grid; overflow: hidden; background: var(--surface); }
.pd-bk-mock__slot > :where(img, video, picture, svg, .pd-ph) { grid-area: 1 / 1; inline-size: 100%; block-size: 100%; aspect-ratio: auto; object-fit: cover; }
.pd-bk-mock__slot > .pd-ph { border: 0; }
.pd-bk-mock__cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-3); font: var(--font-caption); color: var(--text-muted); }
.pd-bk-mock__cap b { font-weight: 500; color: var(--text); }
.pd-bk-mock__cap .pd-meta { white-space: nowrap; }

/* Browser */
.pd-bk-mock--browser .pd-bk-mock__stage { aspect-ratio: 16 / 11; padding: 6cqi 6cqi 0; place-items: end center; }
.pd-bk-mock__window { display: grid; grid-template-rows: auto 1fr; inline-size: 100%; block-size: 100%; border: var(--hairline) solid var(--rule-strong); border-block-end: 0; border-start-start-radius: var(--radius-2); border-start-end-radius: var(--radius-2); background: var(--surface); box-shadow: var(--shadow-2); overflow: hidden; }
.pd-bk-mock__bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 3cqi; padding: 1.6cqi 2.4cqi; border-block-end: var(--hairline) solid var(--rule); }
.pd-bk-mock__dots { display: flex; gap: 1cqi; }
.pd-bk-mock__dots i { inline-size: 1.4cqi; min-inline-size: 5px; aspect-ratio: 1; border: var(--hairline) solid var(--rule-strong); border-radius: var(--radius-pill); }
.pd-bk-mock__url { justify-self: center; inline-size: min(100%, 26em); padding: .35em 1em; border-radius: var(--radius-pill); background: var(--surface-sunken); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-bk-mock__bar::after { content: ""; inline-size: 4.2cqi; }
@container pd-bk-mock (max-width: 22em) { .pd-bk-mock__url { font-size: var(--fs-caption); padding-block: .15em; } }

/* Phone */
.pd-bk-mock--phone .pd-bk-mock__stage { aspect-ratio: 4 / 5; padding: 7cqi; }
.pd-bk-mock__phone { position: relative; display: grid; block-size: 100%; aspect-ratio: 9 / 19.5; padding: 2.2cqi; border: calc(var(--hairline) * 2) solid var(--rule-strong); border-radius: 13% / 6%; background: var(--surface); box-shadow: var(--shadow-2); }
.pd-bk-mock__phone .pd-bk-mock__slot { border-radius: 10% / 4.6%; }
.pd-bk-mock__phone::before { content: ""; position: absolute; z-index: 1; inset-block-start: 3.6cqi; inset-inline: 0; margin-inline: auto; inline-size: 28%; block-size: 2.4cqi; border-radius: var(--radius-pill); background: var(--text); opacity: .85; }

/* Poster on a wall */
.pd-bk-mock--poster .pd-bk-mock__stage { padding: 7cqi 0 12cqi; background-image: linear-gradient(to top, color-mix(in oklab, var(--text) 6%, var(--pd-bk-stage)) 0 9cqi, var(--rule-strong) 9cqi calc(9cqi + 1px), transparent 0); }
.pd-bk-mock__poster { position: relative; block-size: 100%; aspect-ratio: 2 / 3; border: var(--hairline) solid var(--rule-strong); box-shadow: var(--shadow-3); }
.pd-bk-mock__poster .pd-bk-mock__slot { block-size: 100%; }
.pd-bk-mock__poster::before, .pd-bk-mock__poster::after { content: ""; position: absolute; z-index: 1; inset-block-start: -1.2cqi; inline-size: 7cqi; block-size: 2.4cqi; background: color-mix(in oklab, var(--surface) 70%, transparent); border: var(--hairline) solid var(--rule); }
.pd-bk-mock__poster::before { inset-inline-start: 8%; rotate: -4deg; }
.pd-bk-mock__poster::after { inset-inline-end: 8%; rotate: 5deg; }

/* Business-card stack (85 × 55 mm) */
.pd-bk-mock--cards .pd-bk-mock__stage { padding: 0; }
.pd-bk-mock__cards { position: relative; inline-size: 62%; aspect-ratio: 85 / 55; }
.pd-bk-mock__card { position: absolute; inset: 0; display: grid; background: var(--surface); border: var(--hairline) solid var(--rule); box-shadow: var(--shadow-1); }
.pd-bk-mock__card:nth-child(1) { translate: -9% 14%; rotate: -9deg; background: var(--bk-card-back, var(--surface)); }
.pd-bk-mock__card:nth-child(2) { translate: 7% 6%; rotate: 6deg; }
.pd-bk-mock__card:nth-child(3) { translate: -1% -10%; rotate: -2deg; box-shadow: var(--shadow-2); }
.pd-bk-mock__card .pd-bk-mock__slot { block-size: 100%; }

/* Packaging box — CSS 3D, faces sized in container units */
.pd-bk-mock--box .pd-bk-mock__stage { --bw: 32cqi; --bh: 40cqi; --bd: 22cqi; padding: 0; perspective: 160cqi; background-image: radial-gradient(ellipse 34cqi 7cqi at 50% 80%, color-mix(in oklab, var(--text) 16%, transparent), transparent 70%); }
.pd-bk-mock__box { position: relative; inline-size: var(--bw); block-size: var(--bh); transform-style: preserve-3d; transform: translateY(2cqi) rotateX(-24deg) rotateY(-36deg); }
.pd-bk-mock__face { position: absolute; inset: 0; margin: auto; display: grid; border: max(1px, var(--hairline)) solid var(--rule-strong); background: var(--surface); backface-visibility: hidden; }
.pd-bk-mock__face--front { inline-size: var(--bw); block-size: var(--bh); transform: translateZ(calc(var(--bd) / 2)); }
.pd-bk-mock__face--side { inline-size: var(--bd); block-size: var(--bh); transform: rotateY(90deg) translateZ(calc(var(--bw) / 2)); background: color-mix(in oklab, var(--text) 10%, var(--bk-box-side, var(--surface))); }
.pd-bk-mock__face--top { inline-size: var(--bw); block-size: var(--bd); transform: rotateX(90deg) translateZ(calc(var(--bh) / 2)); background: color-mix(in oklab, var(--text) 4%, var(--bk-box-side, var(--surface))); }
.pd-bk-mock__face--side::after { content: ""; align-self: center; justify-self: center; inline-size: 40%; block-size: 60%; border-block: var(--hairline) solid var(--rule-strong); }

/* Social post */
.pd-bk-mock--social .pd-bk-mock__stage { aspect-ratio: 4 / 5; padding: 8cqi 19cqi; }
.pd-bk-mock__post { display: grid; grid-template-rows: auto auto auto auto; inline-size: 100%; border: var(--hairline) solid var(--rule-strong); border-radius: var(--radius-2); background: var(--surface); box-shadow: var(--shadow-2); overflow: hidden; font-size: clamp(var(--fs-meta), 3.4cqi, var(--fs-body-s)); }
.pd-bk-mock__who { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6em; padding: .6em .8em; }
.pd-bk-mock__avatar { inline-size: 2.1em; aspect-ratio: 1; border-radius: var(--radius-pill); border: var(--hairline) solid var(--rule-strong); background: var(--surface-sunken); }
/* block (not grid) so the handle text line can ellipsize; the [City] span drops to its own line */
.pd-bk-mock__handle { display: block; min-inline-size: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1.25; color: var(--text); font-family: var(--font-sans); font-weight: 600; }
.pd-bk-mock__handle span { display: block; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-mono); font-weight: 400; font-size: .85em; color: var(--text-subtle); }
.pd-bk-mock__more { letter-spacing: .1em; color: var(--text-muted); }
.pd-bk-mock__post .pd-bk-mock__slot { aspect-ratio: 4 / 5; }
.pd-bk-mock__acts { display: flex; gap: .9em; padding: .6em .8em .2em; color: var(--text); }
.pd-bk-mock__acts svg { inline-size: 1.35em; block-size: 1.35em; fill: none; stroke: currentColor; stroke-width: 1.5; }
.pd-bk-mock__acts svg:last-child { margin-inline-start: auto; }
.pd-bk-mock__text { margin: 0; padding: .2em .8em .8em; font-family: var(--font-sans); line-height: 1.4; color: var(--text-muted); }
.pd-bk-mock__text b { color: var(--text); }

/* Landscape stage: any frame on a 4:3 board, so mixed frames line up in a row */
.pd-bk-mock--landscape .pd-bk-mock__stage { aspect-ratio: 4 / 3; }
.pd-bk-mock--landscape.pd-bk-mock--social .pd-bk-mock__stage { padding: 5cqi; }
.pd-bk-mock--landscape .pd-bk-mock__post { grid-template-rows: auto minmax(0, 1fr) auto auto; inline-size: auto; block-size: 100%; aspect-ratio: 5 / 8; font-size: clamp(var(--fs-meta), 2.6cqi, var(--fs-caption)); }
.pd-bk-mock--landscape .pd-bk-mock__post .pd-bk-mock__slot { aspect-ratio: auto; }
.pd-bk-mock--landscape.pd-bk-mock--phone .pd-bk-mock__stage { padding: 5cqi; }

/* Billboard */
.pd-bk-mock--billboard:not(.pd-bk-mock--landscape) .pd-bk-mock__stage { aspect-ratio: 16 / 9; }
.pd-bk-mock--billboard .pd-bk-mock__stage { padding: 0; background-image: linear-gradient(to top, color-mix(in oklab, var(--text) 8%, var(--pd-bk-stage)) 0 17%, var(--rule-strong) 17% calc(17% + 1px), transparent 0); }
.pd-bk-mock__bill { position: absolute; inset-inline: 0; inset-block-end: 17%; margin-inline: auto; display: grid; justify-items: center; inline-size: 72%; }
.pd-bk-mock__board { inline-size: 100%; aspect-ratio: 3 / 1; padding: 1.2cqi; background: var(--text); box-shadow: var(--shadow-2); }
.pd-bk-mock__board .pd-bk-mock__slot { block-size: 100%; }
.pd-bk-mock__walk { inline-size: 104%; block-size: 1.2cqi; border-block: var(--hairline) solid var(--rule-strong); background: var(--surface); }
.pd-bk-mock__posts { display: flex; justify-content: space-between; inline-size: 56%; block-size: 14cqi; }
.pd-bk-mock__posts i { inline-size: 2cqi; block-size: 100%; background: var(--rule-strong); }

/* Brand stage: render any frame on a client colour */
.pd-bk-mock--on-brand .pd-bk-mock__stage { border-color: var(--rule-strong); print-color-adjust: exact; -webkit-print-color-adjust: exact; }

/* ══ BrandStrip ════════════════════════════════════════════════════════════ */
.pd-bk-strip { container: pd-bk-strip / inline-size; display: grid; gap: var(--space-5); }
.pd-bk-strip__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-3) var(--space-6); padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-bk-strip__titles { display: grid; gap: var(--space-2); }
.pd-bk-strip__title { margin: 0; font: var(--font-headline); color: var(--text); }
.pd-bk-strip__title em { font-style: italic; font-weight: 400; }
.pd-bk-strip__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.pd-bk-strip__count { margin: 0; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-bk-strip__list { display: grid; grid-template-columns: repeat(var(--pd-bk-cols, 6), minmax(0, 1fr)); gap: var(--hairline); margin: 0; padding: var(--hairline) 0; list-style: none; background: var(--rule); }
.pd-bk-strip__cell { position: relative; display: grid; grid-template-rows: 1fr auto; gap: var(--space-3); min-block-size: 9.5rem; padding: var(--space-4); background: var(--surface); }
.pd-bk-strip__mark { display: grid; align-content: center; justify-items: center; gap: var(--space-3); text-align: center; }
.pd-bk-strip__slot { display: none; inline-size: min(100%, 8.5rem); --pd-ph-ratio: 5 / 2; }
.pd-bk-strip--logos .pd-bk-strip__slot { display: grid; }
.pd-bk-strip__name { margin: 0; color: var(--text); text-wrap: balance; overflow-wrap: anywhere; }
.pd-bk-strip__name--serif { font: 500 var(--fs-title)/1.05 var(--font-display); }
.pd-bk-strip__name--italic { font: italic 400 var(--fs-title)/1.05 var(--font-display); }
.pd-bk-strip__name--caps { font: 600 var(--fs-body-s)/1.2 var(--font-sans); letter-spacing: var(--track-caps); text-transform: uppercase; }
.pd-bk-strip__name--sans { font: 700 var(--fs-body)/1.1 var(--font-sans); letter-spacing: -.01em; }
.pd-bk-strip__name--mono { font: 500 var(--fs-body-s)/1.2 var(--font-mono); letter-spacing: var(--track-mono); }
.pd-bk-strip__name--light { font: 300 var(--fs-title)/1.05 var(--font-text); letter-spacing: .04em; }
.pd-bk-strip__meta { display: flex; justify-content: space-between; gap: var(--space-2); margin: 0; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-bk-strip__link { color: inherit; text-decoration: none; }
.pd-bk-strip__link::before { content: ""; position: absolute; inset: 0; }
.pd-bk-strip__link:focus-visible { outline: none; }
.pd-bk-strip__cell:has(.pd-bk-strip__link:focus-visible) { outline: var(--focus-width) solid var(--focus); outline-offset: calc(-1 * var(--focus-width)); z-index: 1; }
.pd-bk-strip__cell:has(.pd-bk-strip__link)::after { content: "↗"; position: absolute; inset-block-start: var(--space-3); inset-inline-end: var(--space-3); font: var(--font-meta); color: var(--text-subtle); }
.pd-bk-strip__cell:has(.pd-bk-strip__link:hover) { background: var(--surface-sunken); }
a.pd-bk-strip__link:hover { text-decoration: underline var(--hairline); text-underline-offset: .2em; }
.pd-bk-strip__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); font: var(--font-caption); color: var(--text-muted); }
.pd-bk-strip--grid { --pd-bk-cols: 4; }
.pd-bk-strip--grid .pd-bk-strip__cell { min-block-size: 11rem; }
.pd-bk-strip--dense .pd-bk-strip__cell { min-block-size: 6rem; grid-template-rows: 1fr; padding: var(--space-3); }
.pd-bk-strip--dense .pd-bk-strip__meta { display: none; }
@container pd-bk-strip (max-width: 56em) { .pd-bk-strip__list { --pd-bk-cols: 3; } }
@container pd-bk-strip (max-width: 34em) { .pd-bk-strip__list { --pd-bk-cols: 2; } .pd-bk-strip__cell { min-block-size: 7.5rem; padding: var(--space-3); } }

/* ══ BrandSystemShowcase ═══════════════════════════════════════════════════ */
.pd-bk-show { --pd-bk-c1: var(--bk-c1, var(--text)); --pd-bk-c2: var(--bk-c2, var(--surface)); container: pd-bk-show / inline-size; display: grid; gap: var(--space-8); }
.pd-bk-show__intro { display: grid; gap: var(--space-5); }
.pd-bk-show__intro .pd-bk-note { margin-block-start: var(--space-5); }
@container pd-bk-show (min-width: 52em) { .pd-bk-show__intro { grid-template-columns: var(--label-col) 1.4fr 1fr; align-items: start; } .pd-bk-show__intro > :first-child { grid-column: 2; } }
.pd-bk-show__facts { display: grid; grid-template-columns: auto 1fr; margin: 0; }
.pd-bk-show__facts :where(dt, dd) { margin: 0; padding-block: var(--space-2); border-block-start: var(--hairline) solid var(--rule); }
.pd-bk-show__facts dt { padding-inline-end: var(--space-4); font: var(--font-meta); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-subtle); }
.pd-bk-show__facts dd { font: var(--font-body-s); color: var(--text); }
.pd-bk-show__block { display: grid; gap: var(--space-4); }
@container pd-bk-show (min-width: 52em) { .pd-bk-show__block { grid-template-columns: var(--label-col) 1fr; column-gap: 0; } .pd-bk-show__block > :not(.pd-bk-show__lab) { grid-column: 2; } }
.pd-bk-show__lab { display: flex; gap: var(--space-3); align-items: baseline; margin: 0; padding-block-start: var(--space-2); }
.pd-bk-show__h { margin: 0; font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text); }
@container pd-bk-show (min-width: 52em) { .pd-bk-show__lab { flex-direction: column; gap: var(--space-1); grid-row: span 3; } }

/* Logo panels: local tokens re-scoped to the brand colour so .pd-ph stays legible */
.pd-bk-show__logos { display: grid; grid-template-columns: 1fr; gap: var(--gutter); }
@container pd-bk-show (min-width: 40em) { .pd-bk-show__logos { grid-template-columns: 1.4fr 1fr; } .pd-bk-show__panel--wide { grid-row: span 2; } }
.pd-bk-panel { --pd-bk-bg: var(--bk-panel, var(--surface-sunken)); --pd-bk-on: var(--bk-on, var(--text)); --surface: var(--pd-bk-bg); --text: var(--pd-bk-on); --text-subtle: var(--pd-bk-on); --text-muted: var(--pd-bk-on); --rule: color-mix(in oklab, var(--pd-bk-on) 22%, transparent); --border-control: color-mix(in oklab, var(--pd-bk-on) 60%, transparent); position: relative; display: grid; place-items: center; min-block-size: 12rem; padding: var(--space-7) var(--space-6); background: var(--pd-bk-bg); color: var(--pd-bk-on); border: var(--hairline) solid var(--rule-strong); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.pd-bk-panel .pd-ph { inline-size: min(100%, 22rem); --pd-ph-ratio: 3 / 1; }
.pd-bk-panel--mark .pd-ph { inline-size: min(60%, 8rem); --pd-ph-ratio: 1; }
.pd-bk-panel__tag { position: absolute; inset-block-end: var(--space-3); inset-inline-start: var(--space-3); margin: 0; font: var(--font-meta); letter-spacing: var(--track-mono); }
.pd-bk-panel__tag + .pd-bk-panel__tag { inset-inline-start: auto; inset-inline-end: var(--space-3); }

/* Palette bar */
.pd-bk-bar { display: flex; min-block-size: 11rem; margin: 0; padding: 0; list-style: none; border: var(--hairline) solid var(--rule-strong); }
.pd-bk-bar__seg { display: grid; align-content: space-between; flex: var(--share, 1) 1 0; min-inline-size: 0; padding: var(--space-3); background: var(--sw); color: var(--sw-on, var(--text)); font: var(--font-meta); letter-spacing: var(--track-mono); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.pd-bk-bar__seg + .pd-bk-bar__seg { border-inline-start: var(--hairline) solid var(--rule-strong); }
.pd-bk-bar__seg b { font: 500 var(--fs-body-s)/1.2 var(--font-sans); letter-spacing: 0; }
.pd-bk-bar__seg span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container pd-bk-show (max-width: 36em) { .pd-bk-bar { flex-direction: column; min-block-size: 0; } .pd-bk-bar__seg { flex: none; grid-template-columns: 1fr auto; min-block-size: calc(2.5rem + var(--share, 10) * .06rem); align-content: center; } .pd-bk-bar__seg + .pd-bk-bar__seg { border-inline-start: 0; border-block-start: var(--hairline) solid var(--rule-strong); } }
.pd-bk-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: var(--space-3) var(--gutter); margin: 0; padding: 0; list-style: none; }
.pd-bk-legend li { display: grid; grid-template-columns: 1.25rem 1fr; gap: 0 var(--space-2); font: var(--font-caption); color: var(--text-muted); }
.pd-bk-legend i { grid-row: span 2; inline-size: 1.25rem; block-size: 1.25rem; background: var(--sw); border: var(--hairline) solid var(--rule-strong); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.pd-bk-legend b { font-weight: 500; color: var(--text); }

/* Type pairing */
.pd-bk-pair { display: grid; gap: var(--hairline); padding: var(--hairline) 0; background: var(--rule); }
@container (min-width: 40em) { .pd-bk-pair { grid-template-columns: 1fr 1fr; } }
.pd-bk-pair__cell { display: grid; align-content: space-between; gap: var(--space-5); min-block-size: 14rem; padding: var(--space-5) var(--space-5) var(--space-5) 0; background: var(--surface); }
.pd-bk-pair__cell + .pd-bk-pair__cell { padding-inline-start: var(--space-5); }
@container (max-width: 40em) { .pd-bk-pair__cell + .pd-bk-pair__cell { padding-inline-start: 0; } }
.pd-bk-pair__aa { margin: 0; font-family: var(--bk-face-display, var(--font-display)); font-size: var(--fs-display-xl); line-height: .85; color: var(--text); }
.pd-bk-pair__aa--text { font-family: var(--bk-face-text, var(--font-sans)); font-weight: 600; }
.pd-bk-pair__sample { margin: 0; color: var(--text); }
.pd-bk-pair__sample--display { font: 400 var(--fs-display-m)/1 var(--bk-face-display, var(--font-display)); text-wrap: balance; }
.pd-bk-pair__sample--text { font: 400 var(--fs-body)/1.55 var(--bk-face-text, var(--font-sans)); color: var(--text-muted); max-inline-size: 34em; }
.pd-bk-pair__id { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-bk-pair__id b { font: 500 var(--fs-body-s)/1.3 var(--font-sans); letter-spacing: 0; color: var(--text); }

/* Voice words */
.pd-bk-voice { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 0 var(--gutter); margin: 0; padding: 0; list-style: none; }
.pd-bk-voice li { display: grid; align-content: start; gap: var(--space-2); padding-block: var(--space-4); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-bk-voice__word { margin: 0; font: italic 400 var(--fs-display-m)/1 var(--font-display); color: var(--text); }
.pd-bk-voice__not { margin: 0; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-bk-voice__def { margin: 0; font: var(--font-body-s); color: var(--text-muted); }
.pd-bk-voice__line { margin: 0; padding: var(--space-5) 0 0; font: var(--font-lede); color: var(--text); max-inline-size: var(--measure); }

/* Applications grid */
.pd-bk-apps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-6) var(--gutter); }
.pd-bk-apps > * { grid-column: span 2; }
.pd-bk-apps > .pd-bk-apps__wide { grid-column: span 4; }
.pd-bk-apps > .pd-bk-apps__half { grid-column: span 3; }
@container pd-bk-show (max-width: 52em) { .pd-bk-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pd-bk-apps > *, .pd-bk-apps > .pd-bk-apps__half { grid-column: span 1; } .pd-bk-apps > .pd-bk-apps__wide { grid-column: 1 / -1; } }
@container pd-bk-show (max-width: 30em) { .pd-bk-apps { grid-template-columns: 1fr; } .pd-bk-apps > * { grid-column: 1 / -1; } }
.pd-bk-show__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6); padding-block-start: var(--space-4); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-bk-show__foot p { margin: 0; font: var(--font-caption); color: var(--text-muted); }
.pd-bk-show__links { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }

/* ══ BrandGuideTemplate ════════════════════════════════════════════════════ */
.pd-bk-guide { container: pd-bk-guide / inline-size; display: grid; gap: var(--space-7); }
.pd-bk-guide__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); padding: var(--space-3) 0; border-block: var(--hairline) solid var(--rule-strong); }
.pd-bk-guide__bar p { margin: 0; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); }
.pd-bk-guide__pages { display: grid; gap: var(--space-7); }
.pd-bk-page { container: pd-bk-page / inline-size; display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-6); padding: var(--space-6); background: var(--surface); border: var(--hairline) solid var(--rule-strong); box-shadow: var(--shadow-1); scroll-margin-block-start: var(--space-5); }
@container pd-bk-guide (min-width: 56em) { .pd-bk-page { min-block-size: calc(100cqi * 210 / 297); padding: var(--space-7) var(--space-8); } }
.pd-bk-page__run, .pd-bk-page__folio { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-4); margin: 0; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-bk-page__run { padding-block-end: var(--space-3); border-block-end: var(--hairline) solid var(--rule); }
.pd-bk-page__folio { padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule); font-variant-numeric: tabular-nums; }
.pd-bk-page__body { display: grid; gap: var(--space-6); align-content: start; min-inline-size: 0; }
@container pd-bk-page (min-width: 50em) { .pd-bk-page__body { grid-template-columns: 15rem 1fr; column-gap: var(--space-8); } }
.pd-bk-page__lab { display: grid; align-content: start; gap: var(--space-3); }
.pd-bk-page__num { margin: 0; font: 500 var(--fs-display-l)/.9 var(--font-display); color: var(--text-subtle); font-variant-numeric: lining-nums tabular-nums; }
.pd-bk-page__h { margin: 0; font: var(--font-headline); color: var(--text); }
.pd-bk-page__intro { margin: 0; font: var(--font-body-s); color: var(--text-muted); }
.pd-bk-page__main { display: grid; gap: var(--space-6); align-content: start; min-inline-size: 0; }
.pd-bk-page__sub { margin: 0 0 var(--space-3); font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text); }

/* Cover */
.pd-bk-page--cover .pd-bk-page__body { grid-template-columns: 1fr; align-content: space-between; }
.pd-bk-cover__title { margin: 0; font: 400 clamp(var(--fs-display-l), 11cqi, calc(var(--fs-display-xl) * 1.5))/.9 var(--font-display); letter-spacing: var(--track-display); color: var(--text); }
.pd-bk-cover__title em { display: block; font-style: italic; color: var(--text-muted); }
.pd-bk-cover__row { display: grid; gap: var(--space-5); align-items: end; }
@container pd-bk-page (min-width: 50em) { .pd-bk-cover__row { grid-template-columns: 1fr auto; } }
.pd-bk-cover__logo { inline-size: min(100%, 18rem); --pd-ph-ratio: 3 / 1; }
.pd-bk-cover__by { display: flex; align-items: center; gap: var(--space-3); margin: 0; font: var(--font-caption); color: var(--text-muted); }
.pd-bk-cover__by .pd-mark { inline-size: 2rem; block-size: 2rem; color: var(--text); }
.pd-bk-cover__by b { font: var(--font-title); color: var(--text); }
.pd-bk-cover__by small { display: block; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); }
.pd-bk-cover__band { display: flex; block-size: var(--space-4); margin: 0; padding: 0; list-style: none; border: var(--hairline) solid var(--rule-strong); }
.pd-bk-cover__band li { flex: var(--share, 1) 1 0; background: var(--sw); print-color-adjust: exact; -webkit-print-color-adjust: exact; }

/* Contents */
.pd-bk-toc { display: grid; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.pd-bk-toc li { border-block-start: var(--hairline) solid var(--rule); }
.pd-bk-toc a { display: grid; grid-template-columns: 3rem 1fr auto; gap: var(--space-3); align-items: baseline; min-block-size: var(--target-min); padding-block: var(--space-3); color: var(--text); text-decoration: none; font: var(--font-title); }
.pd-bk-toc a:hover span:nth-child(2) { text-decoration: underline var(--hairline); text-underline-offset: .2em; }
.pd-bk-toc a:focus-visible { outline-offset: var(--focus-offset); }
.pd-bk-toc a > span:first-child, .pd-bk-toc a > span:last-child { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.pd-bk-toc small { display: block; font: var(--font-caption); color: var(--text-muted); }

/* Logo sheet */
.pd-bk-logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--gutter); }
.pd-bk-logos .pd-bk-panel { min-block-size: 9rem; padding: var(--space-6) var(--space-4) var(--space-7); }

/* Clear space & minimum size */
.pd-bk-clear { display: grid; gap: var(--space-6); }
@container pd-bk-page (min-width: 56em) { .pd-bk-clear { grid-template-columns: 1.3fr 1fr; align-items: start; } }
.pd-bk-clear__zone { --x: clamp(1.75rem, 7cqi, 3.5rem); position: relative; display: grid; padding: var(--x); background: color-mix(in oklab, var(--accent) 10%, var(--surface)); border: var(--hairline) solid var(--accent); }
.pd-bk-clear__zone .pd-ph { --pd-ph-ratio: 3 / 1; background-color: var(--surface); }
.pd-bk-clear__x { position: absolute; display: grid; place-items: center; font: italic 400 var(--fs-body)/1 var(--font-display); color: var(--accent); }
.pd-bk-clear__x--t { inset-block-start: 0; inset-inline: 0; block-size: var(--x); }
.pd-bk-clear__x--b { inset-block-end: 0; inset-inline: 0; block-size: var(--x); }
.pd-bk-clear__x--s { inset-block: 0; inset-inline-start: 0; inline-size: var(--x); }
.pd-bk-clear__x--e { inset-block: 0; inset-inline-end: 0; inline-size: var(--x); }
.pd-bk-clear__x::before { content: ""; position: absolute; background: var(--accent); }
.pd-bk-clear__x--t::before, .pd-bk-clear__x--b::before { inline-size: var(--hairline); block-size: 100%; inset-block-start: 0; inset-inline-start: calc(50% - .9em); }
.pd-bk-clear__x--s::before, .pd-bk-clear__x--e::before { block-size: var(--hairline); inline-size: 100%; inset-inline-start: 0; inset-block-start: calc(50% - .9em); }
.pd-bk-sizes { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.pd-bk-sizes li { display: grid; gap: var(--space-2); }
.pd-bk-sizes .pd-ph { inline-size: var(--w, 6rem); --pd-ph-ratio: 3 / 1; }
.pd-bk-sizes .pd-ph__label { display: none; }

/* Misuse */
.pd-bk-misuse { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: var(--gutter); margin: 0; padding: 0; list-style: none; }
.pd-bk-misuse li { display: grid; gap: var(--space-2); }
.pd-bk-misuse__frame { display: grid; place-items: center; aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface-sunken); border: var(--hairline) solid var(--rule); }
.pd-bk-misuse__frame .pd-ph { inline-size: 70%; --pd-ph-ratio: 3 / 1; background-color: var(--surface); }
.pd-bk-misuse__frame .pd-ph__label { font-size: var(--fs-meta); }
.pd-bk-misuse__frame--stretch .pd-ph { scale: 1.3 .7; }
.pd-bk-misuse__frame--rotate .pd-ph { rotate: -14deg; }
.pd-bk-misuse__frame--fade .pd-ph { opacity: .35; }
.pd-bk-misuse__frame--outline .pd-ph { outline: calc(var(--hairline) * 3) solid var(--text); outline-offset: .375rem; }
.pd-bk-misuse__frame--shadow .pd-ph { box-shadow: var(--shadow-3), 0 0 0 .75rem color-mix(in oklab, var(--text) 8%, transparent); }
.pd-bk-misuse__frame--busy { background-image: repeating-linear-gradient(45deg, var(--rule-strong) 0 2px, transparent 2px 9px); }
.pd-bk-misuse p { display: flex; gap: var(--space-2); align-items: baseline; margin: 0; font: var(--font-caption); color: var(--text); }
.pd-bk-misuse p::before { content: "✕"; flex: none; font: 600 var(--fs-caption)/1 var(--font-sans); color: var(--danger); }

/* Type hierarchy table */
.pd-bk-scale { inline-size: 100%; border-collapse: collapse; }
.pd-bk-scale th { padding: 0 var(--space-3) var(--space-2) 0; font: var(--font-meta); font-weight: 500; letter-spacing: var(--track-mono); text-transform: uppercase; text-align: start; color: var(--text-subtle); white-space: nowrap; }
.pd-bk-scale td { padding: var(--space-3) var(--space-3) var(--space-3) 0; border-block-start: var(--hairline) solid var(--rule); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); vertical-align: baseline; white-space: nowrap; }
.pd-bk-scale td:first-child { min-inline-size: 12rem; color: var(--text); letter-spacing: 0; white-space: normal; }
.pd-bk-scale__s { margin: 0; color: var(--text); }
.pd-bk-scale__s--d { font: var(--font-display-l); }
.pd-bk-scale__s--h { font: var(--font-headline); }
.pd-bk-scale__s--t { font: var(--font-title); }
.pd-bk-scale__s--b { font: var(--font-body); }
.pd-bk-scale__s--c { font: var(--font-caption); color: var(--text-muted); }
.pd-bk-scroll { overflow-x: auto; }
.pd-bk-scroll:focus-visible { outline-offset: var(--focus-offset); }

/* Imagery */
.pd-bk-imgs { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--gutter); }
.pd-bk-imgs > :first-child { grid-row: span 2; }
@container pd-bk-page (max-width: 36em) { .pd-bk-imgs { grid-template-columns: 1fr 1fr; } .pd-bk-imgs > :first-child { grid-column: 1 / -1; grid-row: auto; } }
.pd-bk-rules { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--space-4) var(--gutter); margin: 0; padding: 0; list-style: none; }
.pd-bk-rules li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-3); padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule); font: var(--font-body-s); color: var(--text-muted); }
.pd-bk-rules li::before { content: "✓"; font: 600 var(--fs-caption)/1.6 var(--font-sans); color: var(--link); }
.pd-bk-rules--dont li::before { content: "✕"; color: var(--danger); }
.pd-bk-rules b { display: block; font-weight: 500; color: var(--text); }

/* Voice table */
.pd-bk-vt { display: grid; gap: var(--hairline); padding: var(--hairline) 0; background: var(--rule); }
@container pd-bk-page (min-width: 40em) { .pd-bk-vt { grid-template-columns: 1fr 1fr; } }
.pd-bk-vt__col { display: grid; align-content: start; gap: var(--space-3); padding: var(--space-4) var(--space-4) var(--space-4) 0; background: var(--surface); }
.pd-bk-vt__col + .pd-bk-vt__col { padding-inline-start: var(--space-4); }
.pd-bk-vt ul { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font: italic 400 var(--fs-title)/1.15 var(--font-display); color: var(--text); }
.pd-bk-vt__col--not ul { color: var(--text-muted); text-decoration: line-through; text-decoration-thickness: var(--hairline); }
.pd-bk-say { display: grid; gap: var(--space-4); margin: 0; }
@container pd-bk-page (min-width: 40em) { .pd-bk-say { grid-template-columns: 1fr 1fr; } }
.pd-bk-say figure { display: grid; gap: var(--space-2); margin: 0; padding: var(--space-4); border: var(--hairline) solid var(--rule-strong); }
.pd-bk-say figure + figure { border-color: var(--rule); }
.pd-bk-say blockquote { margin: 0; font: var(--font-lede); color: var(--text); }
.pd-bk-say figure + figure blockquote { color: var(--text-muted); }
.pd-bk-say figcaption { font: var(--font-meta); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-subtle); }

/* Applications on a page */
.pd-bk-gapps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--space-5) var(--gutter); }

/* Contact & files */
.pd-bk-files { inline-size: 100%; border-collapse: collapse; }
.pd-bk-files :where(th, td) { padding: var(--space-2) var(--space-3) var(--space-2) 0; border-block-start: var(--hairline) solid var(--rule); text-align: start; vertical-align: baseline; }
.pd-bk-files th { font: var(--font-meta); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-subtle); border-block-start-color: var(--rule-strong); }
.pd-bk-files td { font: var(--font-body-s); color: var(--text); }
.pd-bk-files td + td { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); }
.pd-bk-contact { display: grid; gap: var(--space-5); }
@container pd-bk-page (min-width: 44em) { .pd-bk-contact { grid-template-columns: 1fr 1fr; } }
.pd-bk-contact dl { display: grid; grid-template-columns: auto 1fr; margin: 0; }
.pd-bk-contact :where(dt, dd) { margin: 0; padding-block: var(--space-2); border-block-start: var(--hairline) solid var(--rule); }
.pd-bk-contact dt { padding-inline-end: var(--space-4); font: var(--font-meta); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-subtle); }
.pd-bk-contact dd { font: var(--font-body-s); color: var(--text); }

@media (prefers-reduced-motion: reduce) { .pd-bk-page { scroll-margin-block-start: 0; } }
@media (forced-colors: active) {
  .pd-bk-swatch__chip, .pd-bk-bar__seg, .pd-bk-legend i, .pd-bk-cover__band li, .pd-bk-panel { forced-color-adjust: none; }
  .pd-bk-type__glyph[aria-pressed="true"] { outline: 2px solid Highlight; }
}

@media print {
  @page pd-bk-guide { size: A4 landscape; margin: 12mm 14mm; }
  .pd-bk-guide { page: pd-bk-guide; display: block; }
  .pd-bk-guide__bar, .pd-bk-strip__tools .pd-btn, .pd-bk-type__tools, .pd-bk-swatch__foot .pd-copy { display: none; }
  .pd-bk-guide__pages { display: block; }
  /* black ink on white paper; brand colours (swatches, panels, bars) keep their own fills via print-color-adjust */
  .pd-bk-guide { --text: #000; --text-muted: #000; --text-subtle: #000; --link: #000; --accent: #000; --surface: #fff; --surface-sunken: #fff; --rule: #b3b3b3; --rule-strong: #000; --border-control: #000; color: #000; background: #fff; }
  /* one sheet per page: fixed to the 186 mm printable height, body scaled to fit beneath the running head and above the folio */
  .pd-bk-page { block-size: 186mm; min-block-size: 0; padding: 0; gap: 4mm; border: 0; box-shadow: none; background: #fff; break-after: page; break-inside: avoid; }
  .pd-bk-page__body { zoom: .8; }
  .pd-bk-gapps { grid-template-columns: repeat(2, minmax(0, 1fr)); max-inline-size: 72%; }
  .pd-bk-page:last-child { break-after: auto; }
  .pd-bk-page__body { grid-template-columns: 52mm 1fr; column-gap: 10mm; }
  .pd-bk-swatch, .pd-bk-mock, .pd-bk-misuse li, .pd-bk-type__row, .pd-bk-strip__cell { break-inside: avoid; }
  :where(.pd-bk-mock__window, .pd-bk-mock__phone, .pd-bk-mock__poster, .pd-bk-mock__card, .pd-bk-mock__post, .pd-bk-mock__board, .pd-bk-page) { box-shadow: none; }
  .pd-bk-type__inspect { position: static; }
  .pd-bk-toc a::after { content: none; }
}
}

/* ── part: casekit.css ── */
/* ── PART: casekit ───────────────────────────────────────────────────────────
   Pandox DS v2 · package "casekit" · group "Work". The case-study kit for 01 Work entries.
   .pd-ck-hero   CaseStudyHero      — client slot, display title, outcome line, tags, full-bleed media, facts row
   .pd-ck-ca     ChallengeApproach  — Context · Challenge · Approach, numbered Swiss columns + margin note
   .pd-ck-proc   ProcessTimeline    — Discover → Define → Design → Build → Launch, artefacts per phase
   .pd-ck-ba     BeforeAfter        — comparison slider (role="slider") over two frames
   .pd-ck-out    OutcomeMetrics     — 3–4 metric tiles, each with how-measured / over-what-period
   .pd-ck-dlv    DeliverablesGrid   — deliverables by type (mono type codes)
   .pd-ck-cred   CreditsRoles       — who did what; "My role" carries the bindu
   .pd-ck-next   NextProject        — the large next-case pager
   .pd-ck-media  ProjectMedia       — full / 2-up / 3-up / offset layouts; screen, device, print frames
   Colours via tokens only · sizes in em/rem · no [data-theme] selectors · one saffron moment per block. */
@layer components.site {

/* ══ shared ═══════════════════════════════════════════════════════════════ */
:where(.pd-ck-hero, .pd-ck-ca, .pd-ck-proc, .pd-ck-ba, .pd-ck-out, .pd-ck-dlv, .pd-ck-cred, .pd-ck-next, .pd-ck-media) {
  color: var(--text); font-size: 1rem; min-inline-size: 0;
}
:where(.pd-ck-hero, .pd-ck-ca, .pd-ck-proc, .pd-ck-ba, .pd-ck-out, .pd-ck-dlv, .pd-ck-cred, .pd-ck-next, .pd-ck-media) :where(h1, h2, h3, p, ol, ul, dl, dd, figure) { margin: 0; }
:where(.pd-ck-ca, .pd-ck-proc, .pd-ck-out, .pd-ck-dlv, .pd-ck-cred) :where(ol, ul) { padding: 0; list-style: none; }
:where(figure, dl).pd-ck-ba, :where(figure).pd-ck-media, :where(figure).pd-ck-media__item, .pd-ck-cred dl { margin: 0; }

/* section head shared by every block: number · title ……… meta. Layout, numeral column and title are SectionHead --s
   (the selectors are listed on the core .pd-section-head rules in bundle.css); only the meta type stays here. */
.pd-ck-head__meta { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }

/* the bindu: one saffron dot, ringed so it reads on any ground (3:1 via the ink ring) */
.pd-ck-bindu {
  display: inline-block; flex: none; inline-size: .625em; block-size: .625em; border-radius: var(--radius-pill);
  background: var(--bindu-on-paper); box-shadow: 0 0 0 .125em var(--surface), 0 0 0 calc(.125em + 1px) var(--text);
  vertical-align: .05em;
}

/* placeholder frames used inside the kit take the shared .pd-ph; this adds a second hatch for "after" */
.pd-ph.pd-ck-ph--alt { background-image: repeating-linear-gradient(45deg, transparent 0 .5625rem, var(--rule) .5625rem .625rem); }
.pd-ph.pd-ck-ph--sunken { background-color: var(--surface-sunken); }

/* ══ CaseStudyHero ═════════════════════════════════════════════════════════ */
.pd-ck-hero { container: pd-ck-hero / inline-size; display: grid; gap: var(--space-6); }
.pd-ck-hero__inner { display: grid; gap: var(--space-6); padding-inline: var(--gutter); }
.pd-ck-hero__bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-2) var(--space-4);
  padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule-strong);
}
.pd-ck-hero__count { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.pd-ck-hero__main { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); align-items: end; }
.pd-ck-hero__copy { display: grid; gap: var(--space-4); }
.pd-ck-hero__title {
  font: var(--font-display-l); font-size: clamp(var(--fs-headline), 10cqi, var(--fs-display-l)); line-height: .98;
  letter-spacing: var(--track-display); text-wrap: balance;
}
.pd-ck-hero__outcome { max-inline-size: 38ch; font: var(--font-lede); color: var(--text-muted); text-wrap: pretty; }
.pd-ck-hero__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; margin: 0; list-style: none; }

/* client slot: a typographic wordmark, never a drawn logo */
.pd-ck-client { display: grid; gap: var(--space-2); justify-items: start; }
.pd-ck-client__mark {
  display: grid; place-items: center; min-inline-size: 11rem; min-block-size: 5.5rem; padding: var(--pad-panel-s);
  border: var(--hairline) dashed var(--border-control); background: var(--surface-sunken);
}
.pd-ck-client__name { font: 500 1.75rem/1 var(--font-display); letter-spacing: var(--track-display); color: var(--text-muted); white-space: nowrap; }
.pd-ck-client__cap { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }

.pd-ck-hero__media { display: grid; gap: var(--space-2); }
.pd-ck-hero__media > .pd-ph { --pd-ph-ratio: 16 / 9; border-inline: 0; }
.pd-ck-hero__media > figcaption {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-4);
  padding-inline: var(--gutter); font: var(--font-caption); color: var(--text-muted);
}

.pd-ck-hero__facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding-inline: var(--gutter);
}
.pd-ck-hero__fact { display: grid; gap: var(--space-1); align-content: start; padding-block: var(--space-3); border-block-start: var(--hairline) solid var(--rule); min-inline-size: 0; }
.pd-ck-hero__fact dt { font: 500 var(--fs-meta)/1.5 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-subtle); }
.pd-ck-hero__fact dd { margin: 0; font: var(--font-label); overflow-wrap: anywhere; }
.pd-ck-hero__fact:has(> dd:empty) { display: none; }
.pd-ck-hero__fact:nth-child(odd of :not(:has(> dd:empty))):nth-last-child(1 of :not(:has(> dd:empty))) { grid-column: 1 / -1; }

@container pd-ck-hero (min-width: 48em) {
  .pd-ck-hero__main { grid-template-columns: minmax(0, 1fr) auto; }
  .pd-ck-hero__media > .pd-ph { --pd-ph-ratio: 21 / 9; }
  .pd-ck-hero__facts { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--space-5); border-block-end: var(--hairline) solid var(--rule); }
  .pd-ck-hero__fact:nth-child(odd of :not(:has(> dd:empty))):nth-last-child(1 of :not(:has(> dd:empty))) { grid-column: auto; }
  .pd-ck-hero__fact { padding-block: var(--space-4); border-block-start-color: var(--rule-strong); }
}

/* ══ ChallengeApproach ═════════════════════════════════════════════════════ */
.pd-ck-ca { container: pd-ck-ca / inline-size; display: grid; gap: var(--space-6); }
.pd-ck-ca__grid { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); }
.pd-ck-ca__col { display: grid; gap: var(--space-3); align-content: start; padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule); }
.pd-ck-ca__label { display: flex; align-items: baseline; gap: var(--space-3); font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
.pd-ck-ca__label .pd-num { font-size: var(--fs-meta); }
.pd-ck-ca__col--challenge .pd-ck-ca__label { color: var(--accent); }
.pd-ck-ca__lead { font: var(--font-lede); text-wrap: pretty; }
.pd-ck-ca__body { font: var(--font-body); color: var(--text-muted); text-wrap: pretty; }
.pd-ck-ca__points { display: grid; gap: 0; font: var(--font-body-s); }
.pd-ck-ca__points li { display: grid; grid-template-columns: 2.5em minmax(0, 1fr); padding-block: var(--space-2); border-block-start: var(--hairline) solid var(--rule); }
.pd-ck-ca__points li > span:first-child { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); padding-block-start: .2em; }
.pd-ck-ca__note {
  display: grid; gap: var(--space-2); align-content: start; padding: var(--space-3) 0 var(--space-3) var(--space-4);
  border-inline-start: 2px solid var(--rule-strong); font: var(--font-caption); color: var(--text-muted);
}
.pd-ck-ca__note b { font: var(--font-meta); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-subtle); font-weight: 500; }
@container pd-ck-ca (min-width: 40em) { .pd-ck-ca__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-5); } .pd-ck-ca__note { grid-column: 1 / -1; max-inline-size: var(--measure); } }
@container pd-ck-ca (min-width: 64em) {
  .pd-ck-ca__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(11rem, .7fr); }
  .pd-ck-ca__note { grid-column: auto; margin-block-start: var(--space-7); }
}

/* ══ ProcessTimeline ═══════════════════════════════════════════════════════ */
.pd-ck-proc { container: pd-ck-proc / inline-size; display: grid; gap: var(--space-6); }
.pd-ck-proc__list { display: grid; grid-template-columns: minmax(0, 1fr); counter-reset: none; }
.pd-ck-proc__phase {
  --pd-ck-node: 1rem;
  position: relative; display: grid; grid-template-columns: var(--pd-ck-node) minmax(0, 1fr); column-gap: var(--space-4);
  padding-block-end: var(--space-6);
}
/* the vertical track */
.pd-ck-proc__phase::before {
  content: ""; position: absolute; inset-block: calc(var(--pd-ck-node) + .375rem) 0; inset-inline-start: calc(var(--pd-ck-node) / 2 - .5px);
  inline-size: 1px; background: var(--rule-strong);
}
.pd-ck-proc__phase:last-child::before { display: none; }
.pd-ck-proc__phase:last-child { padding-block-end: 0; }
/* Status marks share the Stepper / Timeline vocabulary: done = filled square, now = ring + bindu, next = open ring. */
.pd-ck-proc__node {
  position: relative; grid-row: 1 / span 2; margin-block-start: .1875rem; inline-size: var(--pd-ck-node); block-size: var(--pd-ck-node); border-radius: 0;
  border: 2px solid var(--text); background: var(--text); box-sizing: border-box;
}
.pd-ck-proc__phase--launch .pd-ck-proc__node { border-radius: var(--radius-pill); background: var(--surface); }
.pd-ck-proc__phase--launch .pd-ck-proc__node::after { content: ""; position: absolute; inset: 0; margin: auto; inline-size: .375rem; block-size: .375rem; border-radius: var(--radius-pill); background: var(--bindu-on-paper); }
.pd-ck-proc__phase--planned .pd-ck-proc__node { border-radius: var(--radius-pill); background: var(--surface); }
.pd-ck-proc__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); }
.pd-ck-proc__num { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-ck-proc__name { font: var(--font-title); }
.pd-ck-proc__when { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pd-ck-proc__detail { grid-column: 2; display: grid; gap: var(--space-3); margin-block-start: var(--space-2); }
.pd-ck-proc__desc { font: var(--font-body-s); color: var(--text-muted); text-wrap: pretty; }
.pd-ck-proc__arts { display: grid; gap: 0; }
.pd-ck-proc__arts li {
  display: flex; gap: var(--space-2); padding-block: var(--space-2); border-block-start: var(--hairline) solid var(--rule);
  font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text);
}
.pd-ck-proc__arts li::before { content: "↳"; color: var(--text-subtle); }
.pd-ck-proc__arts-h { font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-subtle); }
.pd-ck-proc__legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font: var(--font-caption); color: var(--text-muted); }
.pd-ck-proc__legend span { display: inline-flex; align-items: center; gap: var(--space-2); }
.pd-ck-proc__legend i { position: relative; inline-size: .75rem; block-size: .75rem; border-radius: var(--radius-pill); border: 2px solid var(--text); box-sizing: border-box; }
.pd-ck-proc__legend .is-done { border-radius: 0; background: var(--text); }
.pd-ck-proc__legend .is-launch::after { content: ""; position: absolute; inset: 0; margin: auto; inline-size: .25rem; block-size: .25rem; border-radius: var(--radius-pill); background: var(--bindu-on-paper); }

@container pd-ck-proc (min-width: 52em) {
  .pd-ck-proc__list { grid-template-columns: repeat(var(--pd-ck-phases, 5), minmax(0, 1fr)); column-gap: var(--space-4); }
  .pd-ck-proc__phase { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; row-gap: var(--space-3); padding-block-end: 0; }
  .pd-ck-proc__phase::before { inset-block: auto; inset-block-start: calc(var(--pd-ck-node) / 2 - .5px); inset-inline: calc(var(--pd-ck-node) + .375rem) calc(-1 * var(--space-4) + .375rem); inline-size: auto; block-size: 1px; }
  .pd-ck-proc__node { grid-row: auto; margin-block-start: 0; }
  .pd-ck-proc__top { flex-direction: column; gap: var(--space-1); }
  .pd-ck-proc__detail { grid-column: 1; margin-block-start: 0; }
}

/* ══ BeforeAfter ═══════════════════════════════════════════════════════════ */
.pd-ck-ba { container: pd-ck-ba / inline-size; display: grid; gap: var(--space-4); }
.pd-ck-ba__stage {
  --pd-ck-pos: 50%;
  position: relative; display: grid; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  border: var(--hairline) solid var(--rule-strong);
}
.pd-ck-ba__stage > .pd-ck-ba__layer { grid-area: 1 / 1; position: relative; min-inline-size: 0; }
.pd-ck-ba__layer > .pd-ph { --pd-ph-ratio: 16 / 9; border: 0; }
.pd-ck-ba__layer--after { clip-path: inset(0 0 0 var(--pd-ck-pos)); }
/* labels sit away from the seam so the handle never covers them */
.pd-ck-ba__layer--before > .pd-ph { justify-items: start; padding-inline-start: var(--space-4); }
.pd-ck-ba__layer--after > .pd-ph { justify-items: end; padding-inline-end: var(--space-4); }
.pd-ck-ba__layer > .pd-ph { box-sizing: border-box; }
.pd-ck-ba__tag {
  position: absolute; inset-block-start: var(--space-3); z-index: 1; padding: var(--space-1) var(--space-2);
  font: 500 var(--fs-meta)/1.4 var(--font-mono); letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--text); background: var(--surface); border: var(--hairline) solid var(--rule-strong);
}
.pd-ck-ba__tag--before { inset-inline-start: var(--space-3); }
.pd-ck-ba__tag--after { inset-inline-end: var(--space-3); }
.pd-ck-ba__handle {
  position: absolute; inset-block: 0; inset-inline-start: var(--pd-ck-pos); z-index: 2; inline-size: 2.75rem; translate: -50% 0;
  display: grid; place-items: center; cursor: ew-resize; outline: none;
}
.pd-ck-ba__handle::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: calc(50% - 1px); inline-size: 2px; background: var(--text); box-shadow: 0 0 0 1px var(--surface); }
.pd-ck-ba__grip {
  position: relative; display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--radius-pill);
  background: var(--surface); border: 2px solid var(--text); font: 500 .875rem/1 var(--font-mono); color: var(--text); letter-spacing: 0;
}
.pd-ck-ba__handle:focus-visible .pd-ck-ba__grip { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
.pd-ck-ba__handle:active .pd-ck-ba__grip, .pd-ck-ba__stage.is-dragging .pd-ck-ba__grip { background: var(--surface-sunken); }
.pd-ck-ba__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-2) var(--space-4); font: var(--font-caption); color: var(--text-muted); }
.pd-ck-ba__hint { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-ck-ba__pos { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text); font-variant-numeric: tabular-nums; }
/* static side-by-side variant: no script, also the print and no-JS fallback */
.pd-ck-ba--split .pd-ck-ba__stage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); border: 0; overflow: visible; }
.pd-ck-ba--split .pd-ck-ba__stage > .pd-ck-ba__layer { grid-area: auto; clip-path: none; }
.pd-ck-ba--split .pd-ck-ba__layer > .pd-ph { --pd-ph-ratio: 4 / 3; justify-items: center; padding: 0; border: var(--hairline) dashed var(--border-control); }
.pd-ck-ba--split .pd-ck-ba__handle { display: none; }
.pd-ck-ba--split .pd-ck-ba__tag--after { inset-inline: var(--space-3) auto; }
@container pd-ck-ba (max-width: 30em) { :where(.pd-ck-ba:not(.pd-ck-ba--split) .pd-ck-ba__layer) .pd-ph__label { display: none; } .pd-ck-ba__layer > .pd-ph { --pd-ph-ratio: 4 / 3; } .pd-ck-ba--split .pd-ck-ba__stage { grid-template-columns: minmax(0, 1fr); } .pd-ck-ba--split .pd-ck-ba__layer > .pd-ph { --pd-ph-ratio: 4 / 3; } }
@media (forced-colors: active) { .pd-ck-ba__handle::before { background: CanvasText; } .pd-ck-ba__grip { border-color: CanvasText; } }

/* ══ OutcomeMetrics ════════════════════════════════════════════════════════ */
.pd-ck-out { container: pd-ck-out / inline-size; display: grid; gap: var(--space-5); }
.pd-ck-out__grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; row-gap: 0; border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-ck-out__tile {
  display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: var(--space-2); min-inline-size: 0; align-content: start;
  padding: var(--space-5) 0; border-block-end: var(--hairline) solid var(--rule);
}
.pd-ck-out__tile:has(.pd-ck-out__value:empty) { display: none; }
.pd-ck-out__idx { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-ck-out__value {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .15em; font: 500 clamp(2.5rem, 7cqi, var(--fs-display-m))/1 var(--font-display);
  letter-spacing: var(--track-display); font-variant-numeric: lining-nums tabular-nums; color: var(--text);
}
.pd-ck-out__value .pd-todo { text-decoration-thickness: 1px; }
.pd-ck-out__unit { font: var(--font-ui); color: var(--text-muted); }
.pd-ck-out__label { font: var(--font-label); color: var(--text); text-wrap: pretty; }
.pd-ck-out__ctx { align-self: start; display: grid; gap: var(--space-1); padding-block-start: var(--space-3); border-block-start: var(--hairline) dotted var(--rule-strong); font: var(--font-caption); color: var(--text-muted); }
.pd-ck-out__ctx dt { display: inline; font: 500 var(--fs-meta)/1.5 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-subtle); }
.pd-ck-out__ctx dd { display: inline; margin: 0; }
.pd-ck-out__ctx div { margin: 0; }
.pd-ck-out__tile--words .pd-ck-out__value { font: italic 500 clamp(1.5rem, 4cqi, var(--fs-headline))/1.1 var(--font-display); }
.pd-ck-out__note { display: flex; gap: var(--space-3); align-items: baseline; max-inline-size: var(--measure); font: var(--font-caption); color: var(--text-muted); }
@container pd-ck-out (min-width: 34em) {
  .pd-ck-out__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-ck-out__tile { padding-inline: var(--space-5); border-inline-start: var(--hairline) solid var(--rule); }
  .pd-ck-out__tile:nth-child(odd) { padding-inline-start: 0; border-inline-start: 0; }
}
@container pd-ck-out (min-width: 60em) {
  .pd-ck-out__grid { grid-template-columns: repeat(var(--pd-ck-tiles, 4), minmax(0, 1fr)); }
  .pd-ck-out__tile:nth-child(odd) { padding-inline-start: var(--space-5); border-inline-start: var(--hairline) solid var(--rule); }
  .pd-ck-out__tile:first-child { padding-inline-start: 0; border-inline-start: 0; }
}

/* ══ DeliverablesGrid ══════════════════════════════════════════════════════ */
.pd-ck-dlv { container: pd-ck-dlv / inline-size; display: grid; gap: var(--space-5); }
.pd-ck-dlv__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--hairline); background: var(--rule); border: var(--hairline) solid var(--rule); }
.pd-ck-dlv__item { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--space-3); padding: var(--space-5); background: var(--surface); min-inline-size: 0; }
.pd-ck-dlv__type { display: flex; align-items: center; gap: var(--space-3); }
.pd-ck-dlv__code {
  display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; flex: none;
  font: 500 var(--fs-meta)/1 var(--font-mono); letter-spacing: var(--track-mono); color: var(--text); border: var(--hairline) solid var(--text);
}
.pd-ck-dlv__kind { font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
.pd-ck-dlv__title { font: var(--font-title); }
.pd-ck-dlv__desc { font: var(--font-body-s); color: var(--text-muted); text-wrap: pretty; }
.pd-ck-dlv__specs { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-ck-dlv__specs > * + *::before { content: "·"; margin-inline-end: var(--space-3); }
.pd-ck-dlv__item > a.pd-ck-dlv__link { justify-self: start; }
@container pd-ck-dlv (min-width: 34em) { .pd-ck-dlv__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container pd-ck-dlv (min-width: 56em) { .pd-ck-dlv__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ══ CreditsRoles ══════════════════════════════════════════════════════════ */
.pd-ck-cred { container: pd-ck-cred / inline-size; display: grid; gap: var(--space-5); }
.pd-ck-cred__groups { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); }
.pd-ck-cred__group { display: grid; gap: 0; align-content: start; }
.pd-ck-cred__gh { padding-block-end: var(--space-2); font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); border-block-end: var(--hairline) solid var(--rule-strong); }
.pd-ck-cred__row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-1) var(--space-4); align-items: baseline;
  padding-block: var(--space-3); border-block-end: var(--hairline) solid var(--rule);
}
.pd-ck-cred__name { font: var(--font-label); }
.pd-ck-cred__role { font: var(--font-body-s); color: var(--text-muted); }
.pd-ck-cred__row--me { position: relative; padding-inline: var(--space-3); margin-inline: calc(-1 * var(--space-3)); background: var(--surface-sunken); }
.pd-ck-cred__row--me .pd-ck-cred__name { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; }
.pd-ck-cred__row--me .pd-ck-cred__role { color: var(--text); }
.pd-ck-cred__me { display: block; font: 500 var(--fs-meta)/1.5 var(--font-mono); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
.pd-ck-cred__foot { font: var(--font-caption); color: var(--text-muted); max-inline-size: var(--measure); }
@container pd-ck-cred (min-width: 44em) { .pd-ck-cred__groups { grid-template-columns: repeat(var(--pd-ck-groups, 3), minmax(0, 1fr)); column-gap: var(--space-6); } }
@container pd-ck-cred (max-width: 24em) { .pd-ck-cred__row { grid-template-columns: minmax(0, 1fr); } }

/* ══ NextProject ═══════════════════════════════════════════════════════════ */
.pd-ck-next { container: pd-ck-next / inline-size; display: grid; gap: var(--space-4); }
.pd-ck-next__link {
  position: relative; display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr);
  padding-block: var(--space-5) var(--space-6); color: inherit; text-decoration: none;
  border-block: 2px solid var(--rule-strong) ;
}
.pd-ck-next__link:focus-visible { outline-offset: var(--focus-offset); }
.pd-ck-next__copy { display: grid; grid-template-rows: auto 1fr auto auto; gap: var(--space-3); min-inline-size: 0; }
.pd-ck-next__dir { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--link); }
.pd-ck-next__arrow { display: inline-block; transition: translate var(--dur-3) var(--ease-out); }
.pd-ck-next__count { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); text-transform: none; }
.pd-ck-next__title {
  font: 500 clamp(var(--fs-headline), 8cqi, var(--fs-display-l))/1 var(--font-display); letter-spacing: var(--track-display); text-wrap: balance;
  text-decoration: underline transparent; text-decoration-thickness: 2px; text-underline-offset: .12em; transition: text-decoration-color var(--dur-2) var(--ease-out);
}
/* the gap above the title lives on the small kicker row: em spacing on the display title would scale with its size */
.pd-ck-next__dir { padding-block-end: var(--space-5); }
.pd-ck-next__copy > .pd-ck-next__title { align-self: end; }
.pd-ck-next__tags { padding-block-start: var(--space-3); }
.pd-ck-next__dek { font: var(--font-lede); color: var(--text-muted); max-inline-size: 36ch; }
.pd-ck-next__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pd-ck-next__media { overflow: hidden; }
.pd-ck-next__media > .pd-ph { --pd-ph-ratio: 16 / 10; transition: scale var(--dur-4) var(--ease-out); }
.pd-ck-next__link:hover .pd-ck-next__title, .pd-ck-next__link:focus-visible .pd-ck-next__title { text-decoration-color: currentColor; }
.pd-ck-next__link:hover .pd-ck-next__arrow { translate: .375em 0; }
:where(.pd-ck-next__link:hover) .pd-ck-next__media > .pd-ph { scale: 1.02; }
.pd-ck-next__more { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); align-items: center; }
.pd-ck-next__prev { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--target-min); font: var(--font-ui); color: var(--text-muted); text-decoration: none; }
.pd-ck-next__prev:hover { color: var(--text); text-decoration: underline; text-underline-offset: .2em; }
.pd-ck-next__prev b { font-weight: 500; color: var(--text); }
@container pd-ck-next (min-width: 48em) { .pd-ck-next__link { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: var(--space-7); } }
@media (prefers-reduced-motion: reduce) { .pd-ck-next__arrow, .pd-ck-next__media > .pd-ph, .pd-ck-next__title { transition: none; } :where(.pd-ck-next__link:hover) .pd-ck-next__media > .pd-ph { scale: none; } }

/* ══ ProjectMedia ══════════════════════════════════════════════════════════ */
.pd-ck-media { container: pd-ck-media / inline-size; display: grid; gap: var(--space-3); }
.pd-ck-media__row { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); align-items: start; }
.pd-ck-media__item { display: grid; gap: var(--space-2); min-inline-size: 0; }
.pd-ck-media__cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-4); font: var(--font-caption); color: var(--text-muted); }
.pd-ck-media__cap .pd-figure__num, .pd-ck-media__fig { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-ck-media--captioned .pd-ck-media__row { align-items: end; }
.pd-ck-media__aside { display: grid; gap: var(--space-2); align-content: end; font: var(--font-caption); color: var(--text-muted); padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-ck-media__aside b { font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text); font-weight: 500; }
@container pd-ck-media (min-width: 36em) {
  .pd-ck-media--2up .pd-ck-media__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-ck-media--3up .pd-ck-media__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pd-ck-media--offset .pd-ck-media__row { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .pd-ck-media--offset .pd-ck-media__item:nth-child(2) { margin-block-start: var(--space-9); }
  .pd-ck-media--captioned .pd-ck-media__row { grid-template-columns: minmax(0, 3fr) minmax(12rem, 1fr); gap: var(--space-6); }
}
.pd-ck-media--full .pd-ck-media__cap { padding-inline: 0; }

/* frames: screen (browser chrome) · device (phone) · print (sheet on a ground) */
.pd-ck-frame { position: relative; display: grid; min-inline-size: 0; }
.pd-ck-frame > .pd-ph { border: 0; }
.pd-ck-frame--screen { border: var(--hairline) solid var(--rule-strong); border-radius: var(--radius-2); overflow: hidden; background: var(--surface); }
.pd-ck-frame__bar {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3);
  border-block-end: var(--hairline) solid var(--rule-strong); background: var(--surface-sunken);
}
.pd-ck-frame__dots { display: flex; gap: .375rem; }
.pd-ck-frame__dots i { inline-size: .5rem; block-size: .5rem; border-radius: var(--radius-pill); border: 1px solid var(--text-subtle); }
.pd-ck-frame__url { flex: 1; min-inline-size: 0; padding: .125rem var(--space-2); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); background: var(--surface); border: var(--hairline) solid var(--rule); border-radius: var(--radius-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-ck-media__row:has(.pd-ck-frame--device) { container: pd-ck-devrow / inline-size; }
.pd-ck-media--3up .pd-ck-media__row:has(.pd-ck-frame--device) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.pd-ck-frame--device {
  justify-self: center; inline-size: min(100%, 17rem); padding: clamp(.25rem, 1.6cqi, .625rem); border: 2px solid var(--text); border-radius: clamp(.875rem, 5cqi, 1.75rem); background: var(--surface);
}
.pd-ck-media__item:has(> .pd-ck-frame--device) { justify-items: center; }
.pd-ck-media__item:has(> .pd-ck-frame--device) > .pd-ck-media__cap { inline-size: min(100%, 17rem); }
.pd-ck-frame--device > .pd-ph { --pd-ph-ratio: 9 / 19; border-radius: clamp(.625rem, 3.6cqi, 1.25rem); overflow: hidden; border: var(--hairline) solid var(--rule); }
.pd-ck-frame--device::before { content: ""; position: absolute; inset-block-start: clamp(.5rem, 2.6cqi, 1.1rem); inset-inline-start: 50%; translate: -50% 0; z-index: 1; inline-size: 28%; block-size: clamp(.375rem, 2cqi, .875rem); border-radius: var(--radius-pill); background: var(--text); }
.pd-ck-frame--print { padding: clamp(1.25rem, 6cqi, 3rem); background: var(--surface-sunken); border: var(--hairline) solid var(--rule); }
.pd-ck-frame--print > .pd-ph { --pd-ph-ratio: 1 / 1.414; justify-self: center; inline-size: min(100%, 18rem); background-color: var(--surface); box-shadow: var(--shadow-2); }
/* crop marks on the sheet */
.pd-ck-frame--print::after {
  content: ""; position: absolute; inset: clamp(.5rem, 3cqi, 1.5rem); pointer-events: none;
  background:
    linear-gradient(var(--text-subtle), var(--text-subtle)) top left / .75rem 1px no-repeat,
    linear-gradient(var(--text-subtle), var(--text-subtle)) top left / 1px .75rem no-repeat,
    linear-gradient(var(--text-subtle), var(--text-subtle)) top right / .75rem 1px no-repeat,
    linear-gradient(var(--text-subtle), var(--text-subtle)) top right / 1px .75rem no-repeat,
    linear-gradient(var(--text-subtle), var(--text-subtle)) bottom left / .75rem 1px no-repeat,
    linear-gradient(var(--text-subtle), var(--text-subtle)) bottom left / 1px .75rem no-repeat,
    linear-gradient(var(--text-subtle), var(--text-subtle)) bottom right / .75rem 1px no-repeat,
    linear-gradient(var(--text-subtle), var(--text-subtle)) bottom right / 1px .75rem no-repeat;
}
@media (forced-colors: active) { .pd-ck-frame--device, .pd-ck-frame--screen { border-color: CanvasText; } .pd-ck-frame--device::before { background: CanvasText; } }

/* ══ print: the kit prints as a case-study document (A4, black ink, no shadows) ══ */
/* CaseStudyPage: one saffron moment, the Process "Launch" node (+ its legend swatch). Challenge label and Credits dot go to ink there. */
.pd-cspage :where(.pd-ck-ca__col--challenge) .pd-ck-ca__label { color: var(--text); }
.pd-cspage .pd-ck-bindu { background: var(--text); }

@media print {
  @page { size: A4; margin: 16mm 14mm 18mm; }
  /* black ink: re-point the semantic tokens inside the kit so every muted/subtle/accent text prints black on white */
  :where(.pd-ck-hero, .pd-ck-ca, .pd-ck-proc, .pd-ck-ba, .pd-ck-out, .pd-ck-dlv, .pd-ck-cred, .pd-ck-next, .pd-ck-media) {
    --text: #000; --text-muted: #000; --text-subtle: #000; --link: #000; --accent: #000;
    --surface: #fff; --surface-sunken: #fff; --rule: #b3b3b3; --rule-strong: #000; --border-control: #000; /* rule stays a light black tint so hatches do not flood the sheet */
    color: #000; background: #fff;
  }
  :where(.pd-ck-hero, .pd-ck-ca, .pd-ck-proc, .pd-ck-ba, .pd-ck-out, .pd-ck-dlv, .pd-ck-cred, .pd-ck-next, .pd-ck-media) * { box-shadow: none !important; text-shadow: none !important; } /* documented !important exception: print */
  .pd-ck-head, .pd-ck-hero__bar, .pd-ck-next__link { border-color: #000; }
  :where(.pd-ck-out__tile, .pd-ck-dlv__item, .pd-ck-cred__group, .pd-ck-proc__phase, .pd-ck-media__item, .pd-ck-ca__col, .pd-ck-ba) { break-inside: avoid; }
  .pd-ck-hero__inner, .pd-ck-hero__facts, .pd-ck-hero__media > figcaption { padding-inline: 0; }
  .pd-ck-hero__media > .pd-ph { border-inline: var(--hairline) dashed #000; }
  .pd-ck-hero__facts { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 4mm; }
  /* the comparison slider prints side by side, whole */
  .pd-ck-ba__stage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4mm; border: 0; }
  .pd-ck-ba__stage > .pd-ck-ba__layer { grid-area: auto; clip-path: none; }
  .pd-ck-ba__tag--after { inset-inline: var(--space-3) auto; }
  .pd-ck-ba__handle, .pd-ck-ba__hint, .pd-ck-ba__pos { display: none; }
  .pd-ck-next__media, .pd-ck-next__more { display: none; }
  .pd-ck-next__link::after { content: " " attr(href); font: 9pt/1.4 var(--font-mono); }
  .pd-ck-dlv__grid { background: #000; border-color: #000; }
  .pd-ck-cred__row--me { background: none; outline: 1px solid #000; }
  .pd-ck-frame--print { background: none; }
  .pd-ck-bindu, .pd-ck-proc__phase--launch .pd-ck-proc__node, .pd-ck-proc__phase--launch .pd-ck-proc__node::after { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}
}

/* ── part: charts.css ── */
/* ── PART: charts ────────────────────────────────────────────────────────────
   Pandox DS v2 · package "charts" · the Data kit: ChartFrame, BarChart, LineChart, ScatterPlot,
   Histogram, Sparkline, StatTile. SVG is drawn by engines/charts.js; every stroke and fill here is a
   class bound to a token, so a chart re-themes without re-rendering.
   .pd-ch-frame     figure shell: kicker · title · one-line message · Sample-data tag · key · plot ·
                    source note · actions (data table <details> + Download CSV)
   .pd-ch-plot      the drawing surface (position:relative for the tooltip)
   .pd-ch-c1…c5     categorical slots → --c. Order is fixed: duo-a, duo-b, jade-700, saffron-700, ink-500.
                    Each slot also has its own texture (bars: solid · hatched · open · cross-hatched · dotted)
                    and marker (circle · square · triangle · diamond · cross), so Mono and Void read fully.
   .pd-ch-hi        the one saffron moment: a single highlighted bar (--bindu, --bindu-rim edge).
   .pd-ch-spark     word-sized inline trend; .pd-ch-stat KPI tile.
   Notation shared with the Diagram kit: solid = measured, dashed = projected / modelled (trend, projection),
   dotted = reference (median), hairline = grid. Mono labels throughout. No entrance animation. */
@layer components.site {

/* ══ Series slots ══════════════════════════════════════════════════════════ */
.pd-ch-frame, .pd-ch-plot, .pd-ch-stat {
  --pd-ch-1: var(--duo-a); --pd-ch-2: var(--duo-b); --pd-ch-3: var(--jade-700); --pd-ch-4: var(--saffron-700); --pd-ch-5: var(--ink-500);
  --pd-ch-tint: 22%;
}
.pd-ch-c1 { --c: var(--pd-ch-1); } .pd-ch-c2 { --c: var(--pd-ch-2); } .pd-ch-c3 { --c: var(--pd-ch-3); }
.pd-ch-c4 { --c: var(--pd-ch-4); } .pd-ch-c5 { --c: var(--pd-ch-5); }

/* ══ Frame ═════════════════════════════════════════════════════════════════ */
.pd-ch-frame {
  container: pd-ch / inline-size;
  display: grid; gap: var(--space-4); margin: 0; min-inline-size: 0;
  padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule-strong);
  font-family: var(--font-sans); color: var(--text);
}
.pd-ch-frame__head { display: grid; gap: var(--space-2); }
.pd-ch-frame__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.pd-ch-frame__kicker { margin: 0; } /* type: shared .pd-kicker rule (bundle.css) */
.pd-ch-frame__kicker .pd-ch-frame__num { font: var(--font-meta); letter-spacing: var(--track-mono); text-transform: none; color: var(--text-subtle); margin-inline-end: .6em; }
.pd-ch-frame__sample {
  display: inline-flex; align-items: center; gap: .45em; padding: .1em .55em;
  border: var(--hairline) dashed var(--border-control); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); white-space: nowrap;
}
.pd-ch-frame__sample::before { content: ""; inline-size: .45em; block-size: .45em; border: var(--hairline) solid currentColor; }
.pd-ch-frame__title { margin: 0; font: var(--font-title); text-wrap: balance; }
.pd-ch-frame__msg { margin: 0; max-inline-size: var(--measure); font: var(--font-body-s); color: var(--text-muted); text-wrap: pretty; }
.pd-ch-frame__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-5); padding-block-start: var(--space-2); border-block-start: var(--hairline) solid var(--rule); }
.pd-ch-frame__note { margin: 0; max-inline-size: var(--measure-wide); font: var(--font-caption); color: var(--text-muted); }
.pd-ch-frame__note b { font-weight: 600; color: var(--text); }
.pd-ch-frame__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* data table toggle: native <details>, summary styled as a quiet control */
.pd-ch-frame__data[hidden], .pd-ch-frame [data-ch-csv][hidden] { display: none; }
.pd-ch-frame__data { border-block-end: var(--hairline) solid var(--rule); }
/* the summary takes the shared text-alternative recipe (.pd-alt__sum in diagrams.css lists this selector) */
.pd-ch-frame__data > summary:hover [data-ch-toggle-label] { text-decoration: underline; text-underline-offset: .2em; }
.pd-ch-frame__data > summary .pd-ch-frame__count { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-ch-frame__tablewrap { overflow-x: auto; padding-block: var(--space-2) var(--space-4); }
.pd-ch-frame__tablewrap:focus-visible { outline-offset: var(--focus-offset); }

.pd-ch-table { inline-size: 100%; border-collapse: collapse; font: var(--font-caption); font-size: var(--fs-label); font-variant-numeric: tabular-nums; color: var(--text); }
.pd-ch-table th, .pd-ch-table td { padding: var(--space-2) var(--space-3) var(--space-2) 0; text-align: start; border-block-end: var(--hairline) solid var(--rule); white-space: nowrap; }
.pd-ch-table thead th { font: var(--font-label); letter-spacing: normal; text-transform: none; color: var(--text-muted); border-block: var(--hairline) solid var(--rule-strong); } /* DataTable header recipe */
.pd-ch-table tbody th { font-weight: 500; }
.pd-ch-table .pd-ch-table__num { text-align: end; padding-inline: var(--space-3) 0; }

/* key (legend): only for ≥ 2 series; swatches repeat the texture / marker */
.pd-ch-key { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); }
.pd-ch-key[hidden] { display: none; }
.pd-ch-key__item { display: inline-flex; align-items: center; gap: .55em; }
.pd-ch-sw { flex: none; overflow: visible; }

/* ══ Plot ══════════════════════════════════════════════════════════════════ */
.pd-ch-plot { position: relative; min-inline-size: 0; inline-size: 100%; }
.pd-ch-svg { display: block; overflow: visible; max-inline-size: 100%; block-size: auto; font-variant-numeric: tabular-nums; }
.pd-ch-t { font: var(--font-meta); letter-spacing: var(--track-mono); fill: var(--text-muted); }
span.pd-ch-t { color: var(--text-muted); }
.pd-ch-tick { fill: var(--text-subtle); }
.pd-ch-axis-lbl { fill: var(--text-muted); }
.pd-ch-cat { fill: var(--text); }
.pd-ch-val { fill: var(--text); }
.pd-ch-val--hi { font-weight: 600; }
.pd-ch-val--zero { fill: var(--text-subtle); }
.pd-ch-val--halo { stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; paint-order: stroke; }
.pd-ch-end { fill: var(--text); }
.pd-ch-grid { stroke: var(--rule); stroke-width: 1; fill: none; shape-rendering: crispEdges; }
.pd-ch-zero { stroke: var(--rule-strong); stroke-width: 1; fill: none; shape-rendering: crispEdges; }
.pd-ch-tickmark { stroke: var(--rule-strong); stroke-width: 1; shape-rendering: crispEdges; }
.pd-ch-leader { stroke: var(--text-subtle); stroke-width: 1; fill: none; }

/* bars: texture per slot; a 2px surface gap between neighbours */
.pd-ch-bar { fill: var(--c); stroke: var(--surface); stroke-width: 1; paint-order: stroke; cursor: default; }
.pd-ch-bar--3 { fill: color-mix(in srgb, var(--c) 10%, var(--surface)); stroke: var(--c); stroke-width: 1.5; }
.pd-ch-pat { fill: color-mix(in srgb, var(--c) var(--pd-ch-tint), var(--surface)); }
.pd-ch-pat-ln { stroke: var(--c); stroke-width: 2; fill: none; }
.pd-ch-pat-dot { fill: var(--c); }
.pd-ch-bar.pd-ch-dim { fill: color-mix(in srgb, var(--c) 50%, var(--surface)); }
.pd-ch-bar.pd-ch-hi { fill: var(--bindu); stroke: var(--bindu-rim); stroke-width: 1.5; }
.pd-ch-bar.is-on { stroke: var(--text); stroke-width: 2; }
.pd-ch-bar:focus { outline: none; }
.pd-ch-bar:focus-visible { stroke: var(--focus); stroke-width: 3; }

/* lines + markers */
.pd-ch-line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pd-ch-line--proj { stroke-dasharray: 5 4; stroke-width: 1.75; }
.pd-ch-dot { fill: var(--c); stroke: var(--surface); stroke-width: 1.5; paint-order: stroke; }
.pd-ch-dot--5 { fill: none; stroke: var(--c); stroke-width: 2; }
.pd-ch-dot--proj { fill: var(--surface); stroke: var(--c); stroke-width: 1.5; }
.pd-ch-dot--on { stroke: var(--text); stroke-width: 1.5; paint-order: normal; }
.pd-ch-dot--5.pd-ch-dot--on { stroke: var(--text); stroke-width: 2.5; }
.pd-ch-zone { fill: var(--surface-sunken); }
.pd-ch-zone-lbl { fill: var(--text-subtle); }
.pd-ch-cross { stroke: var(--rule-strong); stroke-width: 1; shape-rendering: crispEdges; pointer-events: none; }
.pd-ch-focus { pointer-events: none; }
.pd-ch-hit { fill: transparent; }
.pd-ch-hit:focus { outline: none; }
.pd-ch-hit:focus-visible { fill: color-mix(in srgb, var(--focus) 10%, transparent); stroke: var(--focus); stroke-width: 2; }

/* scatter */
.pd-ch-pt { fill: color-mix(in srgb, var(--c) 55%, var(--surface)); stroke: var(--c); stroke-width: 1.25; }
.pd-ch-pt--5 { fill: none; stroke-width: 2; }
.pd-ch-pt--out { fill: var(--text); stroke: var(--surface); stroke-width: 1.5; paint-order: stroke; }
.pd-ch-pt.is-on { stroke: var(--text); stroke-width: 2.5; }
.pd-ch-pt:focus { outline: none; }
.pd-ch-pt:focus-visible { stroke: var(--focus); stroke-width: 3; }
.pd-ch-out-lbl { fill: var(--text); }
.pd-ch-trend { stroke: var(--text-muted); stroke-width: 1.5; stroke-dasharray: 6 4; fill: none; }
.pd-ch-trend-lbl { fill: var(--text-muted); }

/* histogram reference line (median): dotted = reference */
.pd-ch-ref { stroke: var(--text); stroke-width: 1.5; stroke-dasharray: 1.5 3; stroke-linecap: round; fill: none; }
.pd-ch-ref-lbl { fill: var(--text); }

/* Data tooltip: the one recipe for every hover on a data mark (charts .pd-ch-tip, diagrams .pd-dx__tip, hardware
   .pd-hw-tip): a surface plate, hairline --rule-strong, shadow-1, mono meta. The inverted ink bubble (.pd-tip__bubble)
   is for UI controls only. Each family keeps only its own placement rules. */
.pd-ch-tip, :where(*).pd-dx__tip, :where(*).pd-hw-tip {
  position: absolute; z-index: var(--z-raised); max-inline-size: 16rem; padding: var(--space-2) var(--space-3);
  background: var(--surface); color: var(--text); border: var(--hairline) solid var(--rule-strong); border-radius: 0; box-shadow: var(--shadow-1);
  font: var(--font-meta); letter-spacing: var(--track-mono); pointer-events: none;
}
.pd-ch-tip { min-inline-size: 9rem; }
.pd-ch-tip[hidden] { display: none; }
.pd-ch-tip__h { margin-block-end: .35em; padding-block-end: .3em; border-block-end: var(--hairline) solid var(--rule); color: var(--text); font-weight: 600; }
.pd-ch-tip__row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6em; }
.pd-ch-tip__row:not(:has(svg)) { grid-template-columns: 1fr auto; }
.pd-ch-tip__k { color: var(--text-muted); }
.pd-ch-tip__v { color: var(--text); font-variant-numeric: tabular-nums; text-align: end; }

.pd-ch-empty { display: grid; place-items: center; min-block-size: 10rem; margin: 0; padding: var(--space-5); border: var(--hairline) dashed var(--rule-strong); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); text-align: center; }

/* ══ Sparkline ═════════════════════════════════════════════════════════════ */
.pd-ch-spark { display: inline-block; vertical-align: -.18em; line-height: 0; color: var(--text-muted); }
.pd-ch-spark__svg { display: block; overflow: visible; }
.pd-ch-spark__line { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.pd-ch-spark__base { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 1 2; }
.pd-ch-spark__min { fill: var(--surface); stroke: var(--text); stroke-width: 1.25; }
.pd-ch-spark__max { fill: var(--text); }
.pd-ch-spark__last { fill: var(--text); }
.pd-ch-spark__none { font: var(--font-meta); letter-spacing: var(--track-mono); line-height: 1.2; color: var(--text-subtle); }
.pd-ch-spark-key { display: inline-flex; flex-wrap: wrap; gap: .3em 1.1em; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); }
.pd-ch-spark-key > span { display: inline-flex; align-items: center; gap: .4em; }
.pd-ch-spark-key i { display: inline-block; inline-size: .42em; block-size: .42em; }
.pd-ch-spark-key .k-min { border-radius: 50%; border: 1.25px solid var(--text); }
.pd-ch-spark-key .k-max { border-radius: 50%; background: var(--text); }
.pd-ch-spark-key .k-last { background: var(--text); }

/* ══ StatTile ══════════════════════════════════════════════════════════════ */
.pd-ch-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-ch-stat {
  display: grid; align-content: start; gap: var(--space-2); margin: 0; padding: var(--space-4) var(--space-4) var(--space-5);
  border-block-end: var(--hairline) solid var(--rule); border-inline-end: var(--hairline) solid var(--rule);
  font-family: var(--font-sans); color: var(--text); min-inline-size: 0;
}
.pd-ch-stat--solo { border: 0; border-block-start: var(--hairline) solid var(--rule-strong); padding-inline: 0; max-inline-size: 18rem; }
.pd-ch-stat__label { margin: 0; font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
.pd-ch-stat__value { margin: 0; font: 500 var(--fs-display-m)/1 var(--font-display); letter-spacing: var(--track-display); font-variant-numeric: lining-nums tabular-nums; overflow-wrap: anywhere; }
.pd-ch-stat__value small { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); margin-inline-start: .35em; }
.pd-ch-stat__value--ph { font-size: var(--fs-headline); color: var(--text-muted); }
.pd-ch-stat__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); }
.pd-ch-stat__delta { display: block; flex: 1 1 10em; margin: 0; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text); }
.pd-ch-stat__arrow { font-size: .85em; margin-inline-end: .4em; }
.pd-ch-stat__delta[data-dir="flat"] { color: var(--text-muted); }
.pd-ch-stat__period { margin: 0; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-ch-stat .pd-ch-spark { color: var(--text-muted); }
.pd-ch-stat--bindu .pd-ch-stat__value::after { content: ""; display: inline-block; inline-size: .14em; block-size: .14em; margin-inline-start: .08em; border-radius: 50%; background: var(--bindu); box-shadow: 0 0 0 1px var(--bindu-rim); vertical-align: .1em; }
.pd-ch-stat--empty .pd-ch-stat__value { color: var(--text-subtle); }

@media (forced-colors: active) {
  .pd-ch-bar, .pd-ch-dot, .pd-ch-pt, .pd-ch-line { forced-color-adjust: none; }
  .pd-ch-line, .pd-ch-trend, .pd-ch-ref { stroke: CanvasText; }
  .pd-ch-bar:not(.pd-ch-bar--3) { stroke: Canvas; }
  .pd-ch-bar:focus-visible, .pd-ch-pt:focus-visible, .pd-ch-hit:focus-visible { stroke: Highlight; }
}
@media print {
  .pd-ch-tip, .pd-ch-frame__actions { display: none; }
  .pd-ch-frame__data:not([open]) > :not(summary) { display: block; }
}
}

/* ── part: controls.css ── */
/* ── PART: controls ─────────────────────────────────────────────────────────
   Pandox DS v2 · package "controls" · single authoritative source for:
   .pd-field .pd-input .pd-textarea .pd-field-group .pd-errsum .pd-select .pd-listbox .pd-combo
   .pd-menu .pd-check .pd-radio .pd-radio-group(--segmented) .pd-switch .pd-slider .pd-toggle-group
   .pd-btn-group .pd-split .pd-link(--quiet/--nav/--external) .pd-kbd
   .pd-tabs .pd-accordion .pd-filter(__chip) .pd-contact
   One input dialect: surface ground, 1px border-control, radius-1, 44px block, 2px focus outline.
   State is always shape + tone, so Ink and Void read without hue. Engine: engines/roving.js. */
@layer components.controls {

/* ── Field: label, hint, error, control ─────────────────────────────────── */
.pd-field { container-type: inline-size; display: grid; gap: var(--space-2); font-family: var(--font-sans); font-size: 1rem; line-height: 1.45; color: var(--text); }
.pd-field__label { font-size: var(--fs-label); font-weight: 500; line-height: 1.3; color: var(--text); }
.pd-field__req, .pd-field__opt { font-weight: 400; color: var(--text-subtle); }
.pd-field__hint { font-size: var(--fs-caption); line-height: 1.45; color: var(--text-muted); }
.pd-field__error { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--fs-caption); font-weight: 500; line-height: 1.45; color: var(--danger); }
.pd-field__error:empty { display: none; }
.pd-field__error::before, .pd-errsum__title::before { content: "!" / ""; flex: none; display: inline-grid; place-content: center; inline-size: 1.25em; block-size: 1.25em; border: 1.5px solid currentColor; border-radius: var(--radius-1); font-family: var(--font-sans); font-weight: 600; line-height: 1; translate: 0 .2em; }
.pd-field__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-4); }
.pd-field__count { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); font-feature-settings: "tnum"; white-space: nowrap; }

.pd-input, .pd-textarea, .pd-select__control {
  box-sizing: border-box; inline-size: 100%; min-block-size: var(--control-block); margin: 0;
  padding-block: var(--space-2); padding-inline: var(--space-3);
  font: inherit; font-family: var(--font-sans); font-size: 1rem; line-height: 1.45; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-control); border-radius: var(--radius-1);
  transition: border-color var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard);
}
.pd-input::placeholder, .pd-textarea::placeholder { color: var(--text-subtle); opacity: 1; }
@media (hover: hover) {
  .pd-input:where(:hover:not(:disabled, :read-only, :focus)), .pd-select__control:where(:hover:not(:disabled)) { border-color: var(--rule-strong); }
}
.pd-input:where(:focus-visible), .pd-select__control:where(:focus-visible) { outline-offset: var(--focus-offset); border-color: var(--rule-strong); }
.pd-input:where(:read-only:not(select, :disabled)) { border-style: dashed; background: transparent; }
.pd-input:where(:disabled), .pd-select__control:where(:disabled) { opacity: var(--opacity-disabled); cursor: not-allowed; }
.pd-input:where([aria-invalid="true"], :user-invalid), .pd-select__control:where([aria-invalid="true"], :user-invalid) { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
/* deprecated alias, one release: .pd-field--error */
.pd-field--error .pd-input { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.pd-field--error .pd-field__hint { color: var(--danger); }

.pd-textarea { display: block; min-block-size: 9.5em; resize: vertical; font-family: var(--font-text); font-size: var(--fs-body); line-height: 1.55; padding-block: var(--space-3); }

.pd-field-group { container-type: inline-size; margin: 0; padding: 0; border: 0; min-inline-size: 0; display: grid; gap: var(--space-2); font-family: var(--font-sans); color: var(--text); }
.pd-field-group__legend { padding: 0; margin-block-end: var(--space-2); font-size: var(--fs-label); font-weight: 500; line-height: 1.3; }
.pd-field-group--nested { padding-inline-start: calc(1.125em + var(--space-3)); gap: 0; }

/* Error summary: the one local live region. 2px danger frame, the word first, links to every field. */
.pd-errsum { display: grid; gap: var(--space-2); padding: var(--pad-panel-s); border: 2px solid var(--danger); border-radius: var(--radius-0); background: var(--surface); font-family: var(--font-sans); font-size: var(--fs-label); line-height: 1.45; color: var(--text); }
.pd-errsum:where([hidden]) { display: none; }
.pd-errsum:where(:focus) { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
.pd-errsum__title { display: flex; align-items: baseline; gap: var(--space-2); margin: 0; font-weight: 600; color: var(--danger); }
.pd-errsum__list { margin: 0; padding: 0; padding-inline-start: calc(1.25em + var(--space-2)); list-style: none; display: grid; }
.pd-errsum__list a { display: inline-flex; align-items: center; min-block-size: var(--target-min); color: var(--text); text-decoration-thickness: 1px; text-underline-offset: .18em; }

/* ── Select (native + base-select) ──────────────────────────────────────── */
.pd-select { position: relative; display: grid; align-items: center; }
.pd-select::after { content: ""; position: absolute; inset-inline-end: var(--space-4); inline-size: .45em; block-size: .45em; border-inline-end: 1.5px solid var(--text-muted); border-block-end: 1.5px solid var(--text-muted); rotate: 45deg; translate: 0 -.15em; pointer-events: none; }
.pd-select__control { appearance: none; -webkit-appearance: none; padding-inline-end: calc(var(--space-4) * 2 + .5em); cursor: pointer; }
.pd-select__control:where(:has(option[value=""]:checked)) { color: var(--text-subtle); }
.pd-select__control option { color: var(--text); background: var(--surface); }
.pd-select--inline { display: inline-grid; }
.pd-select--inline .pd-select__control { inline-size: auto; }
@supports (appearance: base-select) {
  .pd-select__control, .pd-select__control::picker(select) { appearance: base-select; }
  .pd-select__control::picker-icon { display: none; }
  .pd-select__control::picker(select) { margin-block: var(--space-1); padding-block: var(--space-1); border: 1px solid var(--border-control); border-radius: var(--radius-1); background: var(--surface); color: var(--text); box-shadow: var(--shadow-2); }
  .pd-select__control option { display: flex; align-items: center; gap: var(--space-3); min-block-size: var(--target-min); padding-inline: var(--space-4); }
  .pd-select__control option::checkmark { content: ""; order: -1; inline-size: .3em; block-size: .6em; border: solid currentColor; border-width: 0 2px 2px 0; rotate: 45deg; translate: 0 -.1em; }
  .pd-select__control option:where(:not(:checked))::before { content: ""; order: -1; inline-size: .3em; }
  .pd-select__control option:where(:checked) { font-weight: 600; }
  .pd-select__control option:where(:hover, :focus-visible) { background: color-mix(in oklab, currentColor var(--state-hover-mix), transparent); outline: var(--focus-width) solid var(--focus); outline-offset: calc(var(--focus-width) * -1); }
  .pd-select__control option:where(:hover:not(:focus-visible)) { outline: 0; }
}

/* ── Listbox (custom multi-select, roving) ──────────────────────────────── */
.pd-listbox { margin: 0; padding: 0; list-style: none; max-block-size: 18em; overflow-y: auto; border: 1px solid var(--border-control); border-radius: var(--radius-1); background: var(--surface); font-family: var(--font-sans); font-size: 1rem; color: var(--text); }
.pd-listbox__option { display: grid; grid-template-columns: 1.125em 1fr auto; align-items: center; gap: var(--space-3); min-block-size: var(--target-min); padding-inline: var(--space-4); cursor: pointer; }
.pd-listbox__option + .pd-listbox__option { border-block-start: 1px solid var(--rule); }
.pd-listbox__option::before { content: ""; grid-area: 1 / 1; box-sizing: border-box; inline-size: 1.125em; block-size: 1.125em; border: 1px solid var(--border-control); border-radius: var(--radius-1); background: var(--surface); }
.pd-listbox__option:where([aria-selected="true"])::before { background: var(--selected-bg); border-color: var(--selected-bg); box-shadow: inset 0 0 0 .2em var(--selected-bg); }
.pd-listbox__option::after { content: ""; grid-area: 1 / 1; justify-self: center; inline-size: .3em; block-size: .6em; border: solid var(--selected-fg); border-width: 0 .14em .14em 0; rotate: 45deg; translate: 0 -.06em; scale: 0; transition: scale var(--dur-2) var(--ease-out); }
.pd-listbox__option:where([aria-selected="true"])::after { scale: 1; }
@media (hover: hover) { .pd-listbox__option:where(:hover) { background: color-mix(in oklab, currentColor var(--state-hover-mix), transparent); } }
.pd-listbox__option:where(:focus-visible) { outline-offset: calc(var(--focus-width) * -1); }
.pd-listbox__option:where([aria-disabled="true"]) { opacity: var(--opacity-disabled); cursor: not-allowed; }
.pd-listbox__meta { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); font-feature-settings: "tnum"; }
@media (hover: hover) { .pd-listbox__option:where(:hover) .pd-listbox__meta { color: var(--text-muted); } }

/* ── Combobox (input + listbox popover, aria-activedescendant) ──────────── */
.pd-combo { container-type: inline-size; anchor-scope: --pd-combo; display: grid; gap: var(--space-2); font-family: var(--font-sans); color: var(--text); }
.pd-combo__box { position: relative; display: grid; align-items: center; anchor-name: --pd-combo; }
.pd-combo__input { padding-inline-end: calc(var(--target-min) + var(--space-1)); }
.pd-combo__toggle { position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: var(--target-min); display: grid; place-content: center; margin: 0; padding: 0; border: 0; background: none; color: var(--text-muted); cursor: pointer; }
.pd-combo__toggle::before { content: ""; inline-size: .45em; block-size: .45em; border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor; rotate: 45deg; translate: 0 -.15em; transition: rotate var(--dur-2) var(--ease-standard); }
.pd-combo__toggle:where([aria-expanded="true"])::before { rotate: 225deg; translate: 0 .1em; }
.pd-combo__list { box-sizing: border-box; margin: 0; padding: var(--space-1) 0; list-style: none; inset: auto; max-block-size: min(22em, 60vh); overflow-y: auto; border: 1px solid var(--border-control); border-radius: var(--radius-1); background: var(--surface); color: var(--text); box-shadow: var(--shadow-2); font-family: var(--font-sans); font-size: 1rem; }
.pd-combo__list:where(:not([popover])) { position: absolute; z-index: var(--z-overlay); inset-inline: 0; }
.pd-combo__group { margin: 0; padding: 0; list-style: none; }
.pd-combo__group + .pd-combo__group { border-block-start: 1px solid var(--rule); margin-block-start: var(--space-1); padding-block-start: var(--space-1); }
.pd-combo__group-label { padding: var(--space-2) var(--space-4) var(--space-1); font-size: var(--fs-kicker); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-subtle); }
.pd-combo__option { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-4); min-block-size: var(--target-min); padding-inline: var(--space-4); border-inline-start: 2px solid transparent; cursor: pointer; }
.pd-combo__option:where([hidden]), .pd-listbox__option:where([hidden]) { display: none; }
.pd-combo__option:where([aria-selected="true"]) { background: color-mix(in oklab, currentColor var(--state-hover-mix), transparent); border-inline-start-color: var(--rule-strong); }
@media (hover: hover) { .pd-combo__option:where(:hover) { background: color-mix(in oklab, currentColor var(--state-hover-mix), transparent); } }
.pd-combo__meta { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
/* on the hover/selected wash --text-subtle drops under 4.5:1 in Paper; step up to --text-muted */
.pd-combo__option:where([aria-selected="true"]) .pd-combo__meta { color: var(--text-muted); }
@media (hover: hover) { .pd-combo__option:where(:hover) .pd-combo__meta { color: var(--text-muted); } }
.pd-combo__mark { background: none; color: inherit; font-weight: 600; text-decoration: underline 1px; text-underline-offset: .2em; }
.pd-combo__empty { margin: 0; padding: var(--space-3) var(--space-4); font-size: var(--fs-label); color: var(--text-muted); }
@supports (position-area: block-end) {
  .pd-combo__list:where([popover]) { position-anchor: --pd-combo; position-area: block-end span-inline-end; position-try-fallbacks: flip-block; margin-block: var(--space-1); }
}

/* ── Menu (menu button, [popover=auto], anchor positioned) ──────────────── */
.pd-menu { box-sizing: border-box; margin: 0; inset: auto; min-inline-size: 14em; max-inline-size: min(22em, calc(100vw - 2 * var(--gutter))); padding: var(--space-1) 0; border: 1px solid var(--border-control); border-radius: var(--radius-1); background: var(--surface); color: var(--text); box-shadow: var(--shadow-2); font-family: var(--font-sans); font-size: var(--fs-label); line-height: 1.3; opacity: 1;
  transition: opacity var(--dur-2) var(--ease-out), translate var(--dur-2) var(--ease-out), display var(--dur-2) allow-discrete, overlay var(--dur-2) allow-discrete; }
.pd-menu:where([popover]:not(:popover-open)) { opacity: 0; }
@starting-style { .pd-menu:where(:popover-open) { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .pd-menu:where([popover]:not(:popover-open)) { translate: 0 -.25rem; }
  @starting-style { .pd-menu:where(:popover-open) { translate: 0 -.25rem; } }
}
@supports (position-area: block-end) {
  .pd-menu { position-area: block-end span-inline-end; position-try-fallbacks: flip-block, flip-inline; margin-block: var(--space-1); }
  .pd-menu--end { position-area: block-end span-inline-start; }
}
.pd-menu__item { box-sizing: border-box; display: grid; grid-template-columns: 1.25em 1fr auto; align-items: center; gap: var(--space-3); inline-size: 100%; min-block-size: var(--target-min); margin: 0; padding-block: 0; padding-inline: var(--space-3) var(--space-4); border: 0; background: none; font: inherit; color: inherit; text-align: start; text-decoration: none; cursor: pointer; }
.pd-menu__item::before { content: ""; justify-self: center; }
.pd-menu__item:where([role="menuitemcheckbox"][aria-checked="true"])::before { inline-size: .3em; block-size: .6em; border: solid currentColor; border-width: 0 2px 2px 0; rotate: 45deg; translate: 0 -.1em; }
.pd-menu__item:where([role="menuitemradio"][aria-checked="true"])::before { inline-size: .45em; block-size: .45em; border-radius: var(--radius-pill); background: currentColor; }
.pd-menu__item:where(:focus-visible) { outline-offset: calc(var(--focus-width) * -1); background: color-mix(in oklab, currentColor var(--state-hover-mix), transparent); }
@media (hover: hover) { .pd-menu__item:where(:hover) { background: color-mix(in oklab, currentColor var(--state-hover-mix), transparent); } }
.pd-menu__item:where(:active) { background: color-mix(in oklab, currentColor var(--state-press-mix), transparent); }
.pd-menu__item:where([aria-disabled="true"]) { opacity: var(--opacity-disabled); cursor: not-allowed; }
.pd-menu__item--danger { color: var(--danger); }
.pd-menu__hint { justify-self: end; }
.pd-menu__group { display: grid; }
.pd-menu__label { padding: var(--space-2) var(--space-4) var(--space-1) calc((var(--space-3) * 2 + 1.25em) * 7 / 6); /* item inset at .875rem, restated at .75rem */ font-size: var(--fs-kicker); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-subtle); }
.pd-menu__sep { block-size: 1px; margin-block: var(--space-1); border: 0; background: var(--rule); }
.pd-menu__caret { inline-size: .45em; block-size: .45em; border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor; rotate: 45deg; translate: 0 -.15em; transition: rotate var(--dur-2) var(--ease-standard); }
.pd-menu__caret:where([aria-expanded="true"] > *) { rotate: 225deg; translate: 0 .1em; }

/* ── Checkbox + Radio (native, 44px label rows) ─────────────────────────── */
.pd-check, .pd-radio { display: grid; grid-template-columns: 1.125em 1fr; align-content: center; align-items: start; column-gap: var(--space-3); min-block-size: var(--target-min); font-family: var(--font-sans); font-size: 1rem; line-height: 1.45; color: var(--text); cursor: pointer; }
.pd-check__box, .pd-radio__dot { appearance: none; -webkit-appearance: none; box-sizing: border-box; display: grid; place-content: center; inline-size: 1.125em; block-size: 1.125em; margin: .1625em 0 0; border: 1px solid var(--border-control); background: var(--surface); color: var(--selected-fg); cursor: inherit; transition: background-color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard); }
.pd-check__box { border-radius: var(--radius-1); }
.pd-check__box::before { content: ""; inline-size: .3em; block-size: .6em; border: solid currentColor; border-width: 0 .14em .14em 0; rotate: 45deg; translate: 0 -.06em; scale: 0; transition: scale var(--dur-2) var(--ease-out); }
.pd-check__box:where(:checked, :indeterminate) { background: var(--selected-bg); border-color: var(--selected-bg); }
.pd-check__box:where(:checked)::before { scale: 1; }
.pd-check__box:where(:indeterminate)::before { inline-size: .55em; block-size: .14em; border: 0; background: currentColor; rotate: 0deg; translate: 0; scale: 1; }
.pd-radio__dot { border-radius: var(--radius-pill); }
.pd-radio__dot::before { content: ""; inline-size: .5em; block-size: .5em; border-radius: var(--radius-pill); background: var(--selected-bg); scale: 0; transition: scale var(--dur-2) var(--ease-out); }
.pd-radio__dot:where(:checked) { border-color: var(--selected-bg); }
.pd-radio__dot:where(:checked)::before { scale: 1; }
@media (hover: hover) { .pd-check:where(:hover) > .pd-check__box:where(:not(:checked, :indeterminate, :disabled)), .pd-radio:where(:hover) > .pd-radio__dot:where(:not(:checked, :disabled)) { border-color: var(--rule-strong); } }
.pd-check__box:where(:focus-visible), .pd-radio__dot:where(:focus-visible) { outline-offset: var(--focus-offset); }
.pd-check:where(:has(:disabled)), .pd-radio:where(:has(:disabled)) { opacity: var(--opacity-disabled); cursor: not-allowed; }
.pd-check__box:where([aria-invalid="true"], :user-invalid), .pd-radio__dot:where([aria-invalid="true"], :user-invalid) { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.pd-check--error .pd-check__box { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); } /* deprecated alias */
.pd-check__text, .pd-radio__text { min-inline-size: 0; }
.pd-check__hint { grid-column: 2; }
.pd-check__hint:where(:not(.pd-field__error)) { font-size: var(--fs-caption); color: var(--text-muted); }

.pd-radio-group { container-type: inline-size; margin: 0; padding: 0; border: 0; min-inline-size: 0; display: grid; gap: var(--space-1); font-family: var(--font-sans); color: var(--text); }
.pd-radio-group__legend { padding: 0; margin-block-end: var(--space-1); font-size: var(--fs-label); font-weight: 500; line-height: 1.3; }
.pd-radio-group__row { display: flex; flex-wrap: wrap; gap: 0 var(--space-6); }

/* Segmented: native radios, visually joined; value choice, never views. */
.pd-radio-group--segmented .pd-radio-group__row { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; max-inline-size: 100%; overflow-x: auto; scrollbar-width: none; padding: calc(var(--focus-width) + var(--focus-offset)); margin: calc((var(--focus-width) + var(--focus-offset)) * -1); } /* room for the whole ring inside the scroller */
.pd-radio-group__seg { position: relative; display: grid; place-items: center; min-block-size: var(--control-block); padding-inline: var(--space-4); border: 1px solid var(--border-control); font-size: var(--fs-label); font-weight: 500; line-height: 1.2; white-space: nowrap; text-align: center; color: var(--text); cursor: pointer; transition: background-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard); }
.pd-radio-group__seg + .pd-radio-group__seg { margin-inline-start: -1px; }
.pd-radio-group__seg:first-child { border-start-start-radius: var(--radius-1); border-end-start-radius: var(--radius-1); }
.pd-radio-group__seg:last-child { border-start-end-radius: var(--radius-1); border-end-end-radius: var(--radius-1); }
@media (hover: hover) { .pd-radio-group__seg:where(:hover:not(:has(:checked, :disabled))) { background: color-mix(in oklab, currentColor var(--state-hover-mix), transparent); } }
.pd-radio-group__seg:where(:has(:checked)) { z-index: var(--z-raised); background: var(--selected-bg); border-color: var(--selected-bg); color: var(--selected-fg); font-weight: 600; }
.pd-radio-group__seg:where(:has(:focus-visible)) { z-index: var(--z-raised); outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
.pd-radio-group__seg:where(:has(:disabled)) { opacity: var(--opacity-disabled); cursor: not-allowed; }

/* ── Switch (native checkbox[switch], role=switch) ──────────────────────── */
.pd-switch { --pd-switch-dir: 1; display: inline-grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--space-3); min-block-size: var(--target-min); font-family: var(--font-sans); font-size: 1rem; line-height: 1.3; color: var(--text); cursor: pointer; }
.pd-switch:where(:dir(rtl)) { --pd-switch-dir: -1; }
.pd-switch--block { display: grid; inline-size: 100%; }
.pd-switch__control { appearance: none; -webkit-appearance: none; position: relative; box-sizing: border-box; inline-size: 2.75em; block-size: 1.5em; margin: 0; border: 1px solid var(--border-control); border-radius: var(--radius-1); background: var(--surface); color: var(--selected-bg); cursor: inherit; transition: background-color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard); }
.pd-switch__control::before { content: ""; position: absolute; inset-block-start: .1875em; inset-inline-start: .1875em; inline-size: calc(1.125em - 2px); block-size: calc(1.125em - 2px); border-radius: var(--radius-1); background: var(--text-muted); transition: translate var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-standard); }
.pd-switch__control::after { content: ""; position: absolute; inset-block-start: calc(.1875em + (1.125em - 2px) / 2 - .32em); inset-inline-start: calc(1.4375em + (1.125em - 2px) / 2 - .13em); inline-size: .26em; block-size: .5em; border: solid currentColor; border-width: 0 .12em .12em 0; rotate: 45deg; opacity: 0; transition: opacity var(--dur-2) var(--ease-standard); }
.pd-switch__control:where(:checked) { background: var(--selected-bg); border-color: var(--selected-bg); }
.pd-switch__control:where(:checked)::before { translate: calc(1.25em * var(--pd-switch-dir)) 0; background: var(--selected-fg); }
.pd-switch__control:where(:checked)::after { opacity: 1; }
@media (hover: hover) { .pd-switch:where(:hover) > .pd-switch__control:where(:not(:checked, :disabled)) { border-color: var(--rule-strong); } }
.pd-switch__control:where(:focus-visible) { outline-offset: var(--focus-offset); }
.pd-switch:where(:has(:disabled)) { opacity: var(--opacity-disabled); cursor: not-allowed; }
.pd-switch__state { min-inline-size: 2em; font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-subtle); }
.pd-switch__state::before { content: "Off"; }
.pd-switch__state:where(:checked ~ *)::before { content: "On"; }
.pd-switch__state:where(:checked ~ *) { color: var(--text); }
.pd-switch__hint { grid-column: 1 / -1; margin-block-start: calc(var(--space-2) * -1); font-size: var(--fs-caption); color: var(--text-muted); }

/* ── Slider (native range, single and dual) ─────────────────────────────── */
.pd-slider { --pd-slider-ratio: .5; --pd-slider-lo: 0; --pd-slider-hi: 1; container-type: inline-size; display: grid; gap: 0; font-family: var(--font-sans); color: var(--text); }
.pd-slider__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-1) var(--space-4); }
.pd-slider__label { font-size: var(--fs-label); font-weight: 500; }
.pd-slider__output { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--track-mono); color: var(--text); font-feature-settings: "tnum"; }
.pd-slider__input { appearance: none; -webkit-appearance: none; display: block; box-sizing: border-box; inline-size: 100%; block-size: var(--target-min); margin: 0; padding: 0; background: none; cursor: pointer; }
.pd-slider__input:where(:focus-visible) { outline: 0; }
.pd-slider__input::-webkit-slider-runnable-track { block-size: 2px; border: 0; background:
  linear-gradient(var(--selected-bg), var(--selected-bg)) 12px 0 / calc(10px + (100% - 44px) * var(--pd-slider-ratio)) 100% no-repeat,
  linear-gradient(var(--border-control), var(--border-control)) 12px 0 / calc(100% - 24px) 100% no-repeat; }
.pd-slider__input::-moz-range-track { block-size: 2px; border: 0; background:
  linear-gradient(var(--selected-bg), var(--selected-bg)) 12px 0 / calc(10px + (100% - 44px) * var(--pd-slider-ratio)) 100% no-repeat,
  linear-gradient(var(--border-control), var(--border-control)) 12px 0 / calc(100% - 24px) 100% no-repeat; }
.pd-slider__input::-webkit-slider-thumb { -webkit-appearance: none; box-sizing: border-box; inline-size: 44px; block-size: 44px; margin-block-start: -21px; padding: 2px; border: 12px solid transparent; border-radius: 0; background: linear-gradient(var(--surface), var(--surface)) content-box, linear-gradient(var(--rule-strong), var(--rule-strong)) padding-box; cursor: grab; }
.pd-slider__input::-moz-range-thumb { box-sizing: border-box; inline-size: 44px; block-size: 44px; padding: 2px; border: 12px solid transparent; border-radius: 0; background: linear-gradient(var(--surface), var(--surface)) content-box, linear-gradient(var(--rule-strong), var(--rule-strong)) padding-box; cursor: grab; }
.pd-slider__input::-moz-range-progress { background: none; }
.pd-slider__input:where(:focus-visible)::-webkit-slider-thumb { outline: var(--focus-width) solid var(--focus); outline-offset: -10px; }
.pd-slider__input:where(:focus-visible)::-moz-range-thumb { outline: var(--focus-width) solid var(--focus); outline-offset: -10px; }
.pd-slider__input:where(:active)::-webkit-slider-thumb { cursor: grabbing; background: linear-gradient(var(--selected-bg), var(--selected-bg)) content-box, linear-gradient(var(--rule-strong), var(--rule-strong)) padding-box; }
.pd-slider:where(:has(:disabled)) { opacity: var(--opacity-disabled); }
.pd-slider__input:where(:disabled) { cursor: not-allowed; }
.pd-slider__ticks { display: flex; justify-content: space-between; margin: calc(var(--space-3) * -1) 0 0; padding: 0 calc(22px - .5em); list-style: none; font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); font-feature-settings: "tnum"; }
.pd-slider__tick { display: grid; justify-items: center; inline-size: 1em; white-space: nowrap; }
.pd-slider__tick::before { content: ""; inline-size: 1px; block-size: .5em; margin-block-end: var(--space-1); background: var(--border-control); }
.pd-slider__tick:where(:not(:first-child, :last-child)) > * { visibility: var(--pd-slider-mid-labels, visible); }
.pd-slider--range .pd-slider__track { position: relative; display: grid; }
.pd-slider--range .pd-slider__input { grid-area: 1 / 1; pointer-events: none; }
.pd-slider--range .pd-slider__input::-webkit-slider-runnable-track { background: none; }
.pd-slider--range .pd-slider__input::-moz-range-track { background: none; }
.pd-slider--range .pd-slider__input::-webkit-slider-thumb { pointer-events: auto; }
.pd-slider--range .pd-slider__input::-moz-range-thumb { pointer-events: auto; }
.pd-slider__rail { --pd-a: calc(10px + (100% - 20px) * var(--pd-slider-lo)); --pd-b: calc(10px + (100% - 20px) * var(--pd-slider-hi)); grid-area: 1 / 1; align-self: center; block-size: 2px; margin-inline: 12px; background: linear-gradient(90deg, transparent var(--pd-a), var(--selected-bg) 0, var(--selected-bg) var(--pd-b), transparent 0), var(--border-control); }
.pd-slider__rail:where(:dir(rtl)) { scale: -1 1; }
.pd-slider__input:where(:dir(rtl))::-webkit-slider-runnable-track { background-position: right 12px top 0, right 12px top 0; }
@container (inline-size < 30em) { .pd-slider__ticks { --pd-slider-mid-labels: hidden; } }

/* ── Toggle group (aria-pressed buttons; toolbar mode roves) ─────────────── */
.pd-toggle-group { display: flex; flex-wrap: wrap; gap: var(--space-2); font-family: var(--font-sans); }
.pd-toggle-group__btn { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--control-block); margin: 0; padding-block: 0; padding-inline: var(--space-3) var(--space-4); border: var(--hairline) solid var(--border-control); border-radius: var(--radius-1); background: transparent; font: inherit; font-size: var(--fs-label); font-weight: 500; line-height: 1.2; color: var(--text); cursor: pointer; transition: background-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard); }
.pd-toggle-group__btn::before { content: ""; box-sizing: border-box; flex: none; display: grid; inline-size: .875em; block-size: .875em; border: 1px solid currentColor; border-radius: var(--radius-1); }
.pd-toggle-group__btn:where([aria-pressed="true"]) { background: var(--selected-bg); border-color: var(--selected-bg); color: var(--selected-fg); }
.pd-toggle-group__btn:where([aria-pressed="true"])::before { inline-size: .3em; block-size: .6em; margin-inline: .29em; border-width: 0 .14em .14em 0; border-radius: 0; rotate: 45deg; translate: 0 -.08em; }
@media (hover: hover) { .pd-toggle-group__btn:where(:hover:not([aria-pressed="true"], [aria-disabled="true"])) { background: color-mix(in oklab, currentColor var(--state-hover-mix), transparent); border-color: var(--rule-strong); } }
.pd-toggle-group__btn:where(:active) { background: color-mix(in oklab, currentColor var(--state-press-mix), transparent); }
.pd-toggle-group__btn:where([aria-pressed="true"]:active) { background: var(--selected-bg); }
.pd-toggle-group__btn:where(:focus-visible) { outline-offset: var(--focus-offset); }
.pd-toggle-group__btn:where(:disabled, [aria-disabled="true"]) { opacity: var(--opacity-disabled); cursor: not-allowed; }


/* ── Button group (layout only; shared hairlines) ────────────────────────── */
.pd-btn-group { container-type: inline-size; display: flex; flex-wrap: wrap; align-items: stretch; }
.pd-btn-group > .pd-btn { flex: none; border-radius: 0; }
.pd-btn-group > :where(.pd-btn + .pd-btn) { margin-inline-start: -1px; }
.pd-btn-group > .pd-btn:where(:first-child) { border-start-start-radius: var(--radius-1); border-end-start-radius: var(--radius-1); }
.pd-btn-group > .pd-btn:where(:last-child) { border-start-end-radius: var(--radius-1); border-end-end-radius: var(--radius-1); }
.pd-btn-group > .pd-btn:where(:hover, :focus-visible, [aria-pressed="true"]) { position: relative; z-index: var(--z-raised); }
@container (inline-size < 30em) {
  .pd-btn-group--stack > .pd-btn { flex: 1 1 100%; border-radius: 0; }
  .pd-btn-group--stack > :where(.pd-btn + .pd-btn) { margin-inline-start: 0; margin-block-start: -1px; }
  .pd-btn-group--stack > .pd-btn:where(:first-child) { border-start-start-radius: var(--radius-1); border-start-end-radius: var(--radius-1); }
  .pd-btn-group--stack > .pd-btn:where(:last-child) { border-end-start-radius: var(--radius-1); border-end-end-radius: var(--radius-1); }
}

/* ── Split button (primary action + menu trigger) ───────────────────────── */
.pd-split { display: inline-flex; align-items: stretch; anchor-name: --pd-split; anchor-scope: --pd-split; }
.pd-split > .pd-btn:where(:first-child) { border-start-end-radius: 0; border-end-end-radius: 0; }
.pd-split > :where(.pd-btn + .pd-btn) { border-start-start-radius: 0; border-end-start-radius: 0; margin-inline-start: -1px; }
.pd-split__more { inline-size: var(--control-block); min-inline-size: var(--target-min); padding: 0; justify-content: center; border-inline-start-color: color-mix(in oklab, currentColor 55%, transparent); }
.pd-split > .pd-btn:where(:hover, :focus-visible) { position: relative; z-index: var(--z-raised); }
@supports (position-area: block-end) { .pd-split > .pd-menu { position-anchor: --pd-split; position-area: block-end span-inline-start; } }

/* ── Link modifiers (base :where(a) lives in foundations) ────────────────── */
.pd-link { color: var(--link); text-decoration-line: underline; text-decoration-thickness: from-font; text-underline-offset: .18em; text-decoration-skip-ink: auto; }
@media (hover: hover) { .pd-link:where(:hover) { text-decoration-thickness: 2px; } }
.pd-link:where(:focus-visible) { outline-offset: var(--focus-offset); }
.pd-link--quiet { color: var(--text); text-decoration-line: none; }
@media (hover: hover) { .pd-link--quiet:where(:hover) { text-decoration-line: underline; text-decoration-thickness: 1px; } }
.pd-link--nav { display: inline-flex; align-items: center; min-block-size: var(--target-min); color: var(--text-muted); font-family: var(--font-sans); font-size: var(--fs-label); font-weight: 500; text-decoration-line: none; }
@media (hover: hover) { .pd-link--nav:where(:hover) { color: var(--text); text-decoration-line: underline; text-decoration-thickness: 1px; text-decoration-color: var(--border-control); text-underline-offset: .5em; } }
.pd-link--nav:where([aria-current]:not([aria-current="false"])) { color: var(--text); text-decoration-line: underline; text-decoration-thickness: 2px; text-decoration-color: var(--rule-strong); text-underline-offset: .5em; }
.pd-link--external::after { content: "\2197" / ""; display: inline-block; margin-inline-start: .2em; font-family: var(--font-sans); font-size: .8em; text-decoration: none; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .pd-link--external:where(:hover)::after { translate: .1em -.1em; transition: translate var(--dur-2) var(--ease-out); } }

/* ── Kbd ────────────────────────────────────────────────────────────────── */
.pd-kbd { display: inline-block; box-sizing: border-box; min-inline-size: 1.75em; padding: .1em .45em; border: 1px solid var(--border-control); border-block-end-width: 2px; border-radius: var(--radius-1); background: transparent; font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: 500; line-height: 1.5; letter-spacing: 0; text-align: center; color: var(--text); white-space: nowrap; vertical-align: .1em; }
.pd-kbd:where(:has(> kbd)) { display: inline-flex; align-items: baseline; gap: .3em; min-inline-size: 0; padding: 0; border: 0; color: var(--text-subtle); }
.pd-kbd:where(:has(> kbd)) > kbd { color: var(--text); }

/* ── Tabs (APG, automatic activation, roving) ───────────────────────────── */
.pd-tabs { container-type: inline-size; font-family: var(--font-sans); font-size: 1rem; color: var(--text); }
.pd-tabs__list { --tabs-bleed: calc(var(--focus-width) + var(--space-2)); display: flex; gap: var(--space-4); padding-inline: var(--focus-width); margin-inline: calc(var(--tabs-bleed) * -1); padding-block-start: var(--focus-width); overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; scroll-padding-inline: var(--space-4); background: linear-gradient(var(--rule), var(--rule)) 50% 100% / calc(100% - 2 * var(--tabs-bleed)) 1px no-repeat; } /* tabs bleed by their ring padding; the hairline stays on the column */
.pd-tabs__list::-webkit-scrollbar { display: none; }
.pd-tabs__tab { flex: none; display: inline-flex; align-items: baseline; gap: var(--space-2); min-block-size: var(--target-min); margin: 0; padding-block: var(--space-3) var(--space-4); padding-inline: var(--space-2); border: 0; background: none; font: inherit; font-size: var(--fs-label); font-weight: 500; line-height: 1.3; white-space: nowrap; color: var(--text-muted); cursor: pointer; transition: color var(--dur-2) var(--ease-standard); }
.pd-tabs__label { text-decoration-line: underline; text-decoration-thickness: 2px; text-decoration-color: transparent; text-underline-offset: .5em; transition: text-decoration-color var(--dur-2) var(--ease-standard); }
@media (hover: hover) { .pd-tabs__tab:where(:hover) { color: var(--text); } .pd-tabs__tab:where(:hover:not([aria-selected="true"])) > .pd-tabs__label { text-decoration-color: var(--border-control); text-decoration-thickness: 1px; } }
.pd-tabs__tab:where([aria-selected="true"]) { color: var(--text); }
.pd-tabs__tab:where([aria-selected="true"]) > .pd-tabs__label { text-decoration-color: var(--rule-strong); }
.pd-tabs__tab:where(:focus-visible) { outline-offset: calc(var(--focus-width) * -1); } /* the list scrolls, so the ring sits inside */
.pd-tabs__tab:where(:disabled, [aria-disabled="true"]) { opacity: var(--opacity-disabled); cursor: not-allowed; }
.pd-tabs__num, .pd-tabs__count { flex: none; }
.pd-tabs__panel { padding-block-start: var(--space-5); }
.pd-tabs__panel:where([hidden]) { display: none; }
.pd-tabs__panel:where(:focus-visible) { outline-offset: var(--space-1); }
.pd-tabs--lg .pd-tabs__tab { font-family: var(--font-display); font-size: var(--fs-title); font-weight: 500; letter-spacing: var(--track-display); line-height: 1.1; padding-block: var(--space-2) var(--space-3); }
.pd-tabs--lg .pd-tabs__list { font-size: var(--fs-title); gap: var(--space-4); } /* list em = tab em, so the bleed matches the tab padding */
.pd-tabs--lg .pd-tabs__label { text-underline-offset: .35em; }
@container (inline-size < 30em) {
  .pd-tabs__list { gap: var(--space-3); scroll-snap-type: x mandatory; }
  .pd-tabs__tab { scroll-snap-align: start; }
  .pd-tabs--lg .pd-tabs__list { gap: var(--space-3); }
}

/* ── Accordion (native details; grid-rows reveal) ───────────────────────── */
.pd-accordion { container-type: inline-size; margin: 0; padding: 0; max-inline-size: var(--measure-wide); border-block: 1px solid var(--rule-strong); border-block-end-color: var(--rule); font-family: var(--font-text); font-size: var(--fs-body); color: var(--text); } /* one em for question and answer, so the answer column lines up */
.pd-accordion__item + .pd-accordion__item { border-block-start: 1px solid var(--rule); }
.pd-accordion__q { list-style: none; display: grid; grid-template-columns: var(--row-lead) 1fr 1.25em; align-items: baseline; column-gap: var(--space-4); min-block-size: var(--target-min); padding: var(--row-pad); cursor: pointer; }
.pd-accordion__q::-webkit-details-marker { display: none; }
.pd-accordion__q::marker { content: ""; }
.pd-accordion__q:where(:focus-visible) { outline-offset: var(--focus-offset); }
.pd-accordion__num { color: var(--text-subtle); }
.pd-accordion__num:where([open] > summary *) { color: var(--text); }
.pd-accordion__title { font-size: var(--fs-title); font-weight: 400; line-height: 1.3; text-decoration-line: underline; text-decoration-thickness: 1px; text-decoration-color: transparent; text-underline-offset: .2em; transition: text-decoration-color var(--dur-2) var(--ease-standard); }
@media (hover: hover) { .pd-accordion__q:where(:hover) > .pd-accordion__title { text-decoration-color: var(--rule-strong); } }
.pd-accordion__icon { position: relative; align-self: center; justify-self: end; inline-size: 1em; block-size: 1em; color: var(--text); }
.pd-accordion__icon::before, .pd-accordion__icon::after { content: ""; position: absolute; inset-inline: 0; inset-block-start: calc(50% - .75px); block-size: 1.5px; background: currentColor; transition: rotate var(--dur-3) var(--ease-out), scale var(--dur-3) var(--ease-out); }
.pd-accordion__icon::after { rotate: 90deg; }
.pd-accordion__icon:where([open] > summary *)::after { rotate: 90deg; scale: 0 1; }
.pd-accordion__a { display: grid; gap: var(--space-3); min-block-size: 0; overflow: hidden; max-inline-size: calc(var(--measure) + var(--row-lead) + var(--space-4)); padding-block: 0 var(--space-5); padding-inline: calc(var(--row-lead) + var(--space-4)) calc(1.25em + var(--space-4)); font-size: var(--fs-body); line-height: 1.6; color: var(--text-muted); }
.pd-accordion__a > * { margin: 0; }
.pd-accordion__item::details-content { display: grid; grid-template-rows: 1fr; }
@media (prefers-reduced-motion: no-preference) {
  .pd-accordion__item::details-content { grid-template-rows: 0fr; transition: grid-template-rows var(--dur-3) var(--ease-out), content-visibility var(--dur-3) allow-discrete; }
  .pd-accordion__item:where([open])::details-content { grid-template-rows: 1fr; }
}
.pd-accordion--plain .pd-accordion__q { grid-template-columns: 1fr 1.25em; }
.pd-accordion--plain .pd-accordion__a { padding-inline-start: 0; }
@container (inline-size < 30em) {
  .pd-accordion__q { grid-template-columns: var(--space-7) 1fr 1.25em; column-gap: var(--space-3); }
  .pd-accordion__a { padding-inline: 0; }
  .pd-accordion__title { font-size: var(--fs-body); font-weight: 500; }
}

/* ── FilterBar (section chips, sort, count) ─────────────────────────────── */
.pd-filter { container-type: inline-size; display: grid; gap: var(--space-3); padding-block: var(--space-4); border-block: 1px solid var(--rule-strong); border-block-end-color: var(--rule); font-family: var(--font-sans); font-size: 1rem; color: var(--text); }
.pd-filter__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-5); }
.pd-filter__chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; padding: 0; min-inline-size: 0; }
.pd-filter__label { flex: none; min-inline-size: var(--label-col); margin-inline-end: var(--space-2); }
.pd-filter__chip { box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--control-block); margin: 0; padding-block: 0; padding-inline: var(--space-3) var(--space-4); border: var(--hairline) solid var(--border-control); border-radius: var(--radius-1); background: transparent; font: inherit; font-size: var(--fs-label); font-weight: 500; line-height: 1.2; color: var(--text); cursor: pointer; transition: background-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard); }
.pd-filter__chip::before { content: ""; box-sizing: border-box; flex: none; inline-size: .75em; block-size: .75em; border: 1px solid currentColor; border-radius: var(--radius-1); }
.pd-filter__chip:where([aria-pressed="true"]) { background: var(--selected-bg); border-color: var(--selected-bg); color: var(--selected-fg); }
.pd-filter__chip:where([aria-pressed="true"])::before { inline-size: .28em; block-size: .58em; margin-inline: .235em; border-width: 0 .14em .14em 0; border-radius: 0; rotate: 45deg; translate: 0 -.08em; }
@media (hover: hover) { .pd-filter__chip:where(:hover:not([aria-pressed="true"])) { background: color-mix(in oklab, currentColor var(--state-hover-mix), transparent); border-color: var(--rule-strong); } }
.pd-filter__chip:where(:active:not([aria-pressed="true"])) { background: color-mix(in oklab, currentColor var(--state-press-mix), transparent); }
.pd-filter__chip:where(:focus-visible) { outline-offset: var(--focus-offset); }
.pd-filter__chip:where(:disabled, [aria-disabled="true"]) { opacity: var(--opacity-disabled); cursor: not-allowed; }
.pd-filter__n { font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: 400; letter-spacing: var(--track-mono); color: var(--text-muted); font-feature-settings: "tnum"; }
.pd-filter__chip:where([aria-pressed="true"]) .pd-filter__n { color: inherit; } /* on --selected-bg the count takes --selected-fg; never dim text with opacity */
.pd-filter__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); }
.pd-filter__sort { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--fs-label); font-weight: 500; color: var(--text-muted); }
.pd-filter__count { margin: 0; font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: var(--track-mono); color: var(--text-muted); font-feature-settings: "tnum"; }
.pd-filter__count b { font-weight: 500; color: var(--text); }
.pd-filter__clear { display: inline-flex; align-items: center; min-block-size: var(--target-min); margin: 0; padding: 0; border: 0; background: none; font: inherit; font-size: var(--fs-label); font-weight: 500; color: var(--text); text-decoration: underline 1px; text-underline-offset: .3em; cursor: pointer; }
.pd-filter__clear:where([hidden]) { display: none; }
@media (hover: hover) { .pd-filter__clear:where(:hover) { text-decoration-thickness: 2px; } }
.pd-filter__clear:where(:focus-visible) { outline-offset: var(--focus-offset); }
@container (inline-size < 48em) { .pd-filter__label { flex-basis: 100%; min-inline-size: 0; } }
/* --quiet: the section-landing look — no chip boxes or fill; the leading box/check still carries state, plus a 2px current underline */
.pd-filter--quiet { padding-block: 0; border-block-start: 0; }
.pd-filter--quiet .pd-filter__chips { gap: 0 var(--space-4); }
.pd-filter--quiet .pd-filter__chip { padding-inline: 0; border-color: transparent; color: var(--text-muted); text-underline-offset: .5em; }
.pd-filter--quiet .pd-filter__chip:where([aria-pressed="true"]) { background: transparent; border-color: transparent; color: var(--text); text-decoration: underline 2px var(--rule-strong); }
@media (hover: hover) { .pd-filter--quiet .pd-filter__chip:where(:hover:not([aria-pressed="true"])) { background: transparent; border-color: transparent; color: var(--text); text-decoration: underline var(--hairline); } }
.pd-filter--quiet .pd-filter__chip:where(:active:not([aria-pressed="true"])) { background: transparent; }

/* ── ContactForm (composes Field, Check, Radio, Button) ─────────────────── */
.pd-contact { container-type: inline-size; font-family: var(--font-sans); font-size: 1rem; color: var(--text); border-block-start: 1px solid var(--rule-strong); padding-block-start: var(--space-5); }
.pd-contact__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-7) var(--gutter); }
.pd-contact__intro { display: grid; align-content: start; gap: var(--space-4); }
.pd-contact__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-display-m); font-weight: 500; line-height: 1.04; letter-spacing: var(--track-display); color: var(--text); }
.pd-contact__title em { font-style: italic; }
.pd-contact__lede { margin: 0; max-inline-size: 24em; font-family: var(--font-text); font-size: var(--fs-body); line-height: 1.55; color: var(--text-muted); }
.pd-contact__form { display: grid; gap: var(--space-5); align-content: start; }
.pd-contact__form:where([hidden]) { display: none; }
.pd-contact__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-4); }
.pd-contact__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); padding-block-start: var(--space-5); border-block-start: 1px solid var(--rule); }
.pd-contact__note { margin: 0; font-family: var(--font-sans); font-size: var(--fs-caption); color: var(--text-muted); }
.pd-contact__done { display: grid; gap: var(--space-4); align-content: start; padding-block: var(--space-5) 0; border-block-start: 1px solid var(--rule-strong); }
.pd-contact__done:where([hidden]) { display: none; }
.pd-contact__done:where(:focus) { outline: none; }
.pd-contact__done:where(:focus-visible) { outline-offset: var(--focus-offset); }
.pd-contact__done-mark { display: inline-flex; align-items: center; gap: var(--space-3); }
.pd-contact__done-mark::before { content: ""; box-sizing: border-box; inline-size: .35em; block-size: .7em; border: solid currentColor; border-width: 0 2px 2px 0; rotate: 45deg; translate: 0 -.12em; margin-inline: .2em .1em; }
.pd-contact__done-title { margin: 0; font-family: var(--font-display); font-size: var(--fs-headline); font-weight: 500; line-height: 1.1; }
.pd-contact__done > p { margin: 0; max-inline-size: 30em; font-family: var(--font-text); font-size: var(--fs-body); line-height: 1.55; color: var(--text-muted); }
.pd-contact__done > .pd-btn { justify-self: start; }
.pd-contact__intro > .pd-facts, .pd-contact__done > .pd-facts { margin-block-start: var(--space-3); }
.pd-contact--compact { border-block-start: 0; padding-block-start: 0; }
.pd-contact--compact .pd-contact__grid { grid-template-columns: 1fr; gap: var(--space-5); }
@container (inline-size < 48em) {
  .pd-contact__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .pd-contact__title { font-size: var(--fs-headline); }
}
@container (inline-size < 30em) { .pd-contact__row { grid-template-columns: 1fr; } }

/* ── Forced colours: state never rides on author colour ─────────────────── */
@media (forced-colors: active) {
  .pd-tabs__list { border-block-end: 1px solid CanvasText; }
  .pd-input, .pd-textarea, .pd-select__control, .pd-listbox, .pd-combo__list, .pd-menu { border-color: CanvasText; }
  .pd-check__box, .pd-radio__dot, .pd-switch__control, .pd-listbox__option::before { forced-color-adjust: none; background: Canvas; border-color: CanvasText; color: HighlightText; }
  .pd-check__box:where(:checked, :indeterminate), .pd-switch__control:where(:checked) { background: Highlight; border-color: Highlight; }
  .pd-radio__dot:where(:checked) { border-color: Highlight; }
  .pd-radio__dot::before { background: Highlight; }
  .pd-switch__control::before { background: CanvasText; }
  .pd-switch__control:where(:checked)::before { background: HighlightText; }
  .pd-switch__control::after { border-color: Highlight; }
  .pd-listbox__option:where([aria-selected="true"])::before { background: Highlight; border-color: Highlight; box-shadow: none; }
  .pd-listbox__option::after { border-color: HighlightText; }
  .pd-check:where(:has(:disabled)), .pd-radio:where(:has(:disabled)), .pd-switch:where(:has(:disabled)) { color: GrayText; }
  .pd-radio-group__seg:where(:has(:checked)), .pd-toggle-group__btn:where([aria-pressed="true"]), .pd-filter__chip:where([aria-pressed="true"]) { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .pd-combo__option:where([aria-selected="true"]), .pd-menu__item:where(:focus-visible) { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .pd-slider__input { forced-color-adjust: none; }
  .pd-slider__input::-webkit-slider-runnable-track { background: linear-gradient(Highlight, Highlight) 12px 0 / calc(10px + (100% - 44px) * var(--pd-slider-ratio)) 100% no-repeat, linear-gradient(GrayText, GrayText) 12px 0 / calc(100% - 24px) 100% no-repeat; }
  .pd-slider__input::-webkit-slider-thumb { background: linear-gradient(Canvas, Canvas) content-box, linear-gradient(ButtonText, ButtonText) padding-box; }
  .pd-slider__rail { forced-color-adjust: none; background: linear-gradient(90deg, transparent var(--pd-a), Highlight 0, Highlight var(--pd-b), transparent 0), GrayText; }
  .pd-tabs__tab:where([aria-selected="true"]) > .pd-tabs__label, .pd-link--nav:where([aria-current]:not([aria-current="false"])) { text-decoration-color: CanvasText; }
  .pd-input:where(:disabled), .pd-select__control:where(:disabled), .pd-toggle-group__btn:where(:disabled, [aria-disabled="true"]), .pd-filter__chip:where(:disabled, [aria-disabled="true"]) { color: GrayText; border-color: GrayText; }
  .pd-errsum, .pd-field__error { border-color: CanvasText; }
}

/* ── Print ──────────────────────────────────────────────────────────────── */
@media print {
  .pd-menu, .pd-combo__list, .pd-combo__toggle, .pd-filter, .pd-slider__input { display: none; }
  .pd-check__box, .pd-radio__dot, .pd-switch__control, .pd-radio-group__seg { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .pd-accordion__icon { display: none; }
  .pd-tabs__panel:where([hidden]) { display: block; }
  .pd-tabs__list { display: none; }
  .pd-contact__actions { display: none; }
}

}

/* ── part: diagrams.css ── */
/* ── PART: diagrams ──────────────────────────────────────────────────────────
   Pandox DS v2 · package "diagrams" · the Diagram kit for technical writing (Craft, Research, Teaching,
   Review): one notation shared by every diagram, drawn as inline SVG by engines/diagram.js.
   .pd-dg          figure shell: head (Fig. number + kind) · optional step-through bar · scroll frame ·
                   numbered key · notation strip · caption · <details> text alternative
   .pd-dg__svg     the drawing; every stroke and fill is a class bound to a token, arrowheads are
                   markers in currentColor, strokes are non-scaling so a scaled SVG stays crisp
   .pd-dg__stack   ArchitectureDiagram on narrow containers: the layers as a stacked list
   .pd-dg-legend   SystemLegend: the notation (compact strip under a diagram, or the full reference)
   Meaning is carried by shape, stroke style (solid · dashed · thick · dotted · hairline) and words; colour
   never carries it alone, so Ink and Void read completely. The one saffron moment is the current step's
   badge during step-through (--bindu fill, --on-saffron numeral). Nothing in the static diagram is saffron. */
@layer components.site {

/* ══ Figure shell ══════════════════════════════════════════════════════════ */
.pd-dg {
  --pd-dg-pad: var(--space-5);
  --pd-dg-minscale: .8;
  container: pd-dg / inline-size;
  display: grid; gap: var(--space-4); margin: 0; min-inline-size: 0;
  padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule-strong);
  font-family: var(--font-sans); color: var(--text);
}
.pd-dg__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-5); }
.pd-dg__kicker { margin: 0; } /* type: shared .pd-kicker rule (bundle.css) */
.pd-dg__kicker .pd-dg__num { font: var(--font-meta); letter-spacing: var(--track-mono); text-transform: none; color: var(--text-subtle); margin-inline-end: .6em; }
.pd-dg__title { margin: 0; flex-basis: 100%; font: var(--font-title); letter-spacing: 0; text-wrap: balance; }

/* Step-through bar: Prev · count · Next · All. Buttons are core .pd-btn--sm. */
.pd-dg__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.pd-dg__count { min-inline-size: 9.5em; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: center; }
.pd-dg__hint { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-dg__hint kbd { font: inherit; padding: 0 .35em; border: var(--hairline) solid var(--border-control); border-radius: var(--radius-1); color: var(--text-muted); }

/* Slots hold engine output (prerendered or filled by hydrate); they never add a box. */
.pd-dg__slot { display: contents; }
.pd-dg__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6); }

/* Frame: hairline plate that scrolls sideways rather than shrinking text below legibility. */
.pd-dg__frame {
  position: relative; overflow-x: auto; overscroll-behavior-inline: contain;
  padding: var(--pd-dg-pad); border: var(--hairline) solid var(--rule); background: var(--surface);
  scrollbar-width: thin; scrollbar-color: var(--border-control) transparent;
  /* Scroll cue: an edge shade appears only on a side that has more drawing to scroll to
     (surface covers travel with the content, shades stay with the frame). */
  background:
    linear-gradient(to right, var(--surface) 45%, transparent) left / 2.5em 100% no-repeat local,
    linear-gradient(to left, var(--surface) 45%, transparent) right / 2.5em 100% no-repeat local,
    linear-gradient(to right, var(--rule-strong), transparent) left / 7px 100% no-repeat scroll,
    linear-gradient(to left, var(--rule-strong), transparent) right / 7px 100% no-repeat scroll,
    var(--surface);
}
.pd-dg__frame:focus-visible { outline-offset: var(--focus-offset); }

/* ══ The drawing ═══════════════════════════════════════════════════════════ */
.pd-dg__svg {
  display: block; inline-size: 100%; block-size: auto; max-inline-size: calc(var(--pd-dg-w, 960) * 1px); margin-inline: auto;
  min-inline-size: calc(var(--pd-dg-w, 960) * var(--pd-dg-minscale) * 1px);
  color: var(--text); overflow: visible; shape-rendering: geometricPrecision; text-rendering: geometricPrecision;
}
.pd-dg__svg :is(path, rect, circle) { vector-effect: non-scaling-stroke; }
.pd-dg__shape, :where(*).pd-td-dia__node, :where(*).pd-td-dia__store { fill: var(--surface); stroke: currentColor; stroke-width: var(--dg-shape); }
.pd-dg__shape--heavy { stroke-width: var(--dg-heavy); }
.pd-dg__line { fill: none; stroke: currentColor; stroke-width: 1; }
.pd-dg__line--soft { stroke: var(--border-control); stroke-width: .75; }
.pd-dg__dot, .pd-dg__solid { fill: currentColor; stroke: none; }
.pd-dg__hit { fill: transparent; stroke: none; }
.pd-dg__plate, .pd-dg__knock-fill { fill: var(--surface); stroke: none; }
.pd-dg__knock-fill { stroke: currentColor; }

/* Text: sans for names, mono for everything technical (labels, types, routes). Sizes are user units. */
.pd-dg__svg text { fill: var(--text); font-kerning: normal; }
.pd-dg__t, :where(*).pd-td-dia__name { font: 500 13px/1 var(--font-sans); }
.pd-dg__t--entity { font: 600 13.5px/1 var(--font-sans); }
.pd-dg__ts, :where(*).pd-td-dia__sub { font: 400 10.5px/1 var(--font-mono); letter-spacing: .01em; }
.pd-dg__svg .pd-dg__ts { fill: var(--text-muted); }
.pd-dg__svg .pd-dg__ts--note { fill: var(--text); }
.pd-dg__tn { font: 600 11.5px/1 var(--font-sans); }
.pd-dg__te, :where(*).pd-td-dia__elabel { font: 400 11px/1 var(--font-mono); }
.pd-dg__tg { font: italic 400 10.5px/1 var(--font-mono); }
.pd-dg__svg .pd-dg__lbl--ret .pd-dg__te { fill: var(--text-muted); }
.pd-dg__svg .pd-dg__tg { fill: var(--text-muted); }
.pd-dg__tz, :where(*).pd-td-dia__zlabel, :where(*).pd-hw-net__zone-t, .pd-hw-zone + .pd-hw-t--caps { font: 600 10px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.pd-dg__svg .pd-dg__tz { fill: var(--text-muted); }
.pd-dg__tk { font: 500 10px/1 var(--font-mono); letter-spacing: .04em; }
.pd-dg__svg .pd-dg__tk { fill: var(--text-subtle); }
.pd-dg__tl { font: 600 10px/1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; }
.pd-dg__svg .pd-dg__tl { fill: var(--text-muted); }
.pd-dg__tf { font: 400 11.5px/1 var(--font-mono); }
.pd-dg__tf--pk { font-weight: 600; }
.pd-dg__ty { font: 400 11px/1 var(--font-mono); }
.pd-dg__svg .pd-dg__ty { fill: var(--text-muted); }
.pd-dg__tc { font: 500 10px/1 var(--font-mono); }
.pd-dg__svg .pd-dg__tc { fill: var(--text-muted); }

/* Zones: dashed hairline with a caps label sitting in a notch of the border. */
.pd-dg__zone-box, :where(*).pd-td-dia__zone { fill: none; stroke: var(--text-subtle); stroke-width: 1; stroke-dasharray: var(--dg-dash-zone); }
/* Fragments (sequence alt / loop): solid hairline box with a pentagon tab. */
.pd-dg__frag-box { fill: none; stroke: var(--text-subtle); stroke-width: 1; }
.pd-dg__frag-tab { fill: var(--surface); stroke: var(--text-subtle); stroke-width: 1; }
.pd-dg__frag-else { fill: none; stroke: var(--text-subtle); stroke-width: 1; stroke-dasharray: 2 3; }
.pd-dg__lifeline { fill: none; stroke: var(--text-subtle); stroke-width: 1; stroke-dasharray: 2 4; }
.pd-dg__act { fill: var(--surface-sunken); stroke: currentColor; stroke-width: 1; }

/* Edges: the stroke IS the type. */
.pd-dg__edge, :where(*).pd-td-dia__edge { fill: none; stroke: currentColor; stroke-width: var(--dg-edge); stroke-linejoin: round; }
.pd-dg__edge--async, :where(*).pd-td-dia__edge--async { stroke-dasharray: var(--dg-dash-async); }
.pd-dg__edge--data     { stroke-width: var(--dg-data); }
.pd-dg__edge--optional { stroke-width: var(--dg-optional-w); stroke-dasharray: var(--dg-dash-optional); stroke-linecap: round; }
.pd-dg__edge--return   { stroke-width: 1; }
.pd-dg__edge--anchor   { stroke: var(--text-subtle); stroke-width: 1; stroke-dasharray: 1 3; }
.pd-dg__edge--relation { stroke-width: 1.25; }
/* Failure path (Postmortem extension): thick dotted, round caps; always named in the legend and the text table. */
.pd-dg__edge--fail     { stroke-width: 2.25; stroke-dasharray: 1.5 4; stroke-linecap: round; }

/* Step badges: square, never circular. Ink square, paper numeral; the current one is the bindu. */
.pd-dg__badge rect { fill: currentColor; stroke: none; }
.pd-dg__svg .pd-dg__badge text { font: 600 10px/1 var(--font-mono); fill: var(--surface); letter-spacing: 0; }
.pd-dg__badge--key rect { fill: var(--surface); stroke: currentColor; stroke-width: 1.1; }
.pd-dg__svg .pd-dg__badge--key text { fill: var(--text); }
.pd-dg__badge.is-current rect { fill: var(--bindu); stroke: var(--bindu-rim); stroke-width: 1; }
.pd-dg__svg .pd-dg__badge.is-current text { fill: var(--on-saffron); }

/* ER keys: PK filled, FK outlined, UK dashed outline; the letters always printed. */
.pd-dg__key rect { fill: none; stroke: currentColor; stroke-width: 1; }
.pd-dg__svg .pd-dg__key text { font: 600 8.5px/1 var(--font-mono); letter-spacing: .02em; fill: var(--text); }
.pd-dg__key--pk rect { fill: currentColor; }
.pd-dg__svg .pd-dg__key--pk text { fill: var(--surface); }
.pd-dg__key--uk rect { stroke-dasharray: 2 1.5; }

/* ── Step-through: dim what is not on the current step ─────────────────── */
.pd-dg__edge, .pd-dg__node, .pd-dg__lbl, .pd-dg__act { transition: opacity var(--dur-2) var(--ease-standard); }
:where(.pd-dg[data-dg-active] .pd-dg__frame) .pd-dg__edge:not(.is-on), :where(.pd-dg[data-dg-active] .pd-dg__frame) .pd-dg__node:not(.is-on), :where(.pd-dg[data-dg-active] .pd-dg__frame) .pd-dg__lbl:not(.is-on) { opacity: .22; }
:where(.pd-dg[data-dg-active] .pd-dg__frame) .pd-dg__act { opacity: .4; }
:where(.pd-dg[data-dg-active] .pd-dg__frame) .pd-dg__edge.is-on { stroke-width: 2.4; }
:where(.pd-dg[data-dg-active] .pd-dg__frame) .pd-dg__edge--data.is-on { stroke-width: 3.5; }
:where(.pd-dg[data-dg-active] .pd-dg__frame) .pd-dg__node.is-on .pd-dg__shape { stroke-width: 2.25; }
:where(.pd-dg[data-dg-active]) .pd-dg__stack [data-dg-steps]:not(.is-on) { opacity: .45; }

/* ══ Numbered key (visible) ════════════════════════════════════════════════ */
.pd-dg__steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--space-3) var(--space-6); margin: 0; padding: 0; list-style: none; counter-reset: none; }
.pd-dg__step { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: baseline; padding-block-start: var(--space-2); border-block-start: var(--hairline) solid var(--rule); font: var(--font-caption); font-size: var(--fs-body-s); line-height: 1.45; color: var(--text-muted); }
.pd-dg__step-n { display: inline-grid; place-items: center; min-inline-size: 1.7em; block-size: 1.7em; padding-inline: .3em; border: var(--hairline) solid currentColor; font: 600 var(--fs-meta)/1 var(--font-mono); color: var(--text); font-variant-numeric: tabular-nums; translate: 0 -.1em; }
.pd-dg__step-t code { font: .92em var(--font-mono); color: var(--text); }
.pd-dg__steps:has(.pd-dg__step) .pd-dg__step { cursor: default; }
.pd-dg:has(.pd-dg__bar) .pd-dg__step { cursor: pointer; }
.pd-dg__step[aria-current="step"] { color: var(--text); border-block-start-color: var(--rule-strong); }
.pd-dg__step[aria-current="step"] .pd-dg__step-n { background: var(--text); color: var(--surface); border-color: var(--text); }
:where(.pd-dg[data-dg-active]) .pd-dg__step:not([aria-current]) { color: var(--text-subtle); }

/* ══ Caption ═══════════════════════════════════════════════════════════════ */
.pd-dg__cap, :where(*).pd-td-dia__cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-5); font: var(--font-caption); color: var(--text-muted); max-inline-size: var(--measure-wide); }
.pd-dg__cap > :first-child { max-inline-size: var(--measure); }
.pd-dg__cap .pd-dg__num { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); white-space: nowrap; }

/* ══ Text alternative ══════════════════════════════════════════════════════ */
.pd-dg__alt { border-block: var(--hairline) solid var(--rule); }
.pd-dg__alt-sum, .pd-alt__sum, .pd-td-dia__alt > summary, .pd-ch-frame__data > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4); min-block-size: var(--target-min); padding-block: var(--space-3); cursor: pointer; list-style: none; font: var(--font-label); color: var(--text); }
.pd-dg__alt-sum::-webkit-details-marker, .pd-alt__sum::-webkit-details-marker, .pd-td-dia__alt > summary::-webkit-details-marker, .pd-ch-frame__data > summary::-webkit-details-marker { display: none; }
.pd-dg__alt-sum::before, .pd-alt__sum::before, .pd-td-dia__alt > summary::before, .pd-ch-frame__data > summary::before { content: ""; flex: none; inline-size: .5em; block-size: .5em; border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor; rotate: -45deg; translate: 0 -.1em; transition: rotate var(--dur-1) var(--ease-standard); }
details[open] > .pd-dg__alt-sum::before, details[open] > .pd-alt__sum::before, .pd-td-dia__alt[open] > summary::before, .pd-ch-frame__data[open] > summary::before { rotate: 45deg; }
.pd-dg__alt-sum:focus-visible, .pd-alt__sum:focus-visible, .pd-td-dia__alt > summary:focus-visible, .pd-ch-frame__data > summary:focus-visible { outline-offset: var(--focus-offset); }
.pd-dg__alt-body { display: grid; gap: var(--space-5); padding-block: var(--space-2) var(--space-5); overflow-x: auto; }
.pd-dg__alt-lead { margin: 0; max-inline-size: var(--measure); font: var(--font-body-s); color: var(--text); }
.pd-dg__alt-h { margin: 0; font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
.pd-dg__alt-list { display: grid; gap: var(--space-2); margin: 0; padding-inline-start: 2.2em; font: var(--font-caption); font-size: var(--fs-body-s); line-height: 1.45; color: var(--text); }
.pd-dg__alt-list ol { display: grid; gap: var(--space-1); margin-block: var(--space-2) 0; padding-inline-start: 1.4em; }
.pd-dg__alt-k { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); }
.pd-dg__alt-n { display: inline-grid; place-items: center; min-inline-size: 1.6em; block-size: 1.6em; padding-inline: .25em; border: var(--hairline) solid currentColor; font: 600 var(--fs-meta)/1 var(--font-mono); }
.pd-dg__table { inline-size: 100%; border-collapse: collapse; font: var(--font-caption); color: var(--text); font-variant-numeric: tabular-nums; }
.pd-dg__table caption { padding-block-end: var(--space-2); text-align: start; font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
.pd-dg__table :is(th, td) { padding: var(--space-2) var(--space-3) var(--space-2) 0; border-block-end: var(--hairline) solid var(--rule); text-align: start; vertical-align: baseline; }
.pd-dg__table thead th { font: var(--font-label); letter-spacing: normal; text-transform: none; color: var(--text-muted); border-block: var(--hairline) solid var(--rule-strong); } /* DataTable header recipe */
.pd-dg__table tbody th { font-weight: 500; }
.pd-dg__table code { font: .95em var(--font-mono); }

/* ══ Stacked layer list (ArchitectureDiagram, narrow) ══════════════════════ */
.pd-dg__stack-note { display: none; margin: 0; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); }
.pd-dg__stack { display: none; margin: 0; padding: 0; list-style: none; }
.pd-dg__stack-layer { display: grid; gap: var(--space-2); padding-block: var(--space-3); border-block-start: var(--hairline) solid var(--rule); }
.pd-dg__stack-layer + .pd-dg__stack-layer { position: relative; }
.pd-dg__stack-layer + .pd-dg__stack-layer::before { content: ""; position: absolute; inset-block-start: calc(-1 * var(--space-3)); inset-inline-start: .95rem; block-size: var(--space-3); border-inline-start: 1.4px solid var(--text); }
.pd-dg__stack-k { font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
.pd-dg__stack ul { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.pd-dg__stack-node { display: grid; grid-template-columns: 30px 1fr; gap: var(--space-3); align-items: start; font: var(--font-label); color: var(--text); }
.pd-dg__stack-node b { font-weight: 500; }
.pd-dg__stack-sub { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); }
.pd-dg__stack-zone { font: 600 var(--fs-meta)/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); padding: .15em .4em; border: var(--hairline) dashed var(--text-subtle); white-space: nowrap; }
@container pd-dg (inline-size < 36em) {
  .pd-dg--stackable .pd-dg__frame { display: none; }
  .pd-dg--stackable .pd-dg__stack { display: grid; }
  .pd-dg--stackable .pd-dg__stack-note { display: block; }
  .pd-dg--stackable .pd-dg__bar-keys { display: none; }
}
@container pd-dg (inline-size < 30em) {
  .pd-dg { --pd-dg-pad: var(--space-4); }
  .pd-dg__count { min-inline-size: 0; }
  .pd-dg__hint { display: none; }
}

/* ══ SystemLegend ══════════════════════════════════════════════════════════ */
.pd-dg-legend, :where(*).pd-td-dia__legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; }
.pd-dg-legend__item, .pd-td-dia__legend li { display: inline-flex; align-items: center; gap: var(--space-2); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); }
.pd-dg-legend__item .pd-dg__glyph { flex: none; }
.pd-dg__glyph { display: block; inline-size: auto; min-inline-size: 0; max-inline-size: none; margin: 0; }
.pd-dg__glyph--s { inline-size: 30px; block-size: 20px; }
.pd-dg-legend--full { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: 0 var(--space-6); }
.pd-dg-legend--full .pd-dg-legend__item { display: grid; grid-template-columns: 64px 1fr; grid-template-areas: "g n" "g s" "g d"; gap: .15em var(--space-4); align-items: start; padding-block: var(--space-3); border-block-start: var(--hairline) solid var(--rule); font: var(--font-caption); color: var(--text-muted); }
.pd-dg-legend--full .pd-dg__glyph { grid-area: g; align-self: center; }
.pd-dg-legend--full .pd-dg-legend__name { grid-area: n; font: var(--font-label); color: var(--text); }
.pd-dg-legend--full .pd-dg-legend__shape { grid-area: s; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-dg-legend--full .pd-dg-legend__desc { grid-area: d; }
.pd-dg-legend__group { display: grid; gap: var(--space-3); }
.pd-dg-legend__group + .pd-dg-legend__group { margin-block-start: var(--space-6); }
.pd-dg-legend__rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 0 var(--space-6); margin: 0; }
.pd-dg-legend__rules > div { display: grid; gap: var(--space-1); padding-block: var(--space-3) var(--space-4); border-block-start: var(--hairline) solid var(--rule); }
.pd-dg-legend__rules dt { font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
.pd-dg-legend__rules dd { margin: 0; font: var(--font-body-s); line-height: 1.5; color: var(--text); max-inline-size: var(--measure); }
.pd-dg-legend__h { margin: 0; font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }

/* ══ Motion, forced colours, print ═════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .pd-dg__svg *, .pd-dg__alt-sum::before, .pd-alt__sum::before, .pd-td-dia__alt > summary::before, .pd-ch-frame__data > summary::before { transition: none !important; }
}
@media (forced-colors: active) {
  .pd-dg__svg { color: CanvasText; forced-color-adjust: none; }
  .pd-dg__svg text, .pd-dg__svg .pd-dg__ts, .pd-dg__svg .pd-dg__tg { fill: CanvasText; }
  .pd-dg__shape, .pd-dg__plate, .pd-dg__knock-fill, .pd-dg__act, .pd-dg__frag-tab { fill: Canvas; }
  .pd-dg__badge rect { fill: CanvasText; } .pd-dg__svg .pd-dg__badge text { fill: Canvas; }
  .pd-dg__badge.is-current rect { fill: Highlight; } .pd-dg__svg .pd-dg__badge.is-current text { fill: HighlightText; }
}
@media print {
  .pd-dg__bar { display: none; }
  .pd-dg__frame { overflow: visible; border: 0; padding: 0; }
  .pd-dg__svg { min-inline-size: 0; }
  :where(.pd-dg[data-dg-active] .pd-dg__frame) .pd-dg__edge, :where(.pd-dg[data-dg-active] .pd-dg__frame) .pd-dg__node, :where(.pd-dg[data-dg-active] .pd-dg__frame) .pd-dg__lbl, :where(.pd-dg[data-dg-active] .pd-dg__frame) .pd-dg__act { opacity: 1; }
}
}

/* ── part: hamsa.css ── */
/* ── PART: hamsa ─────────────────────────────────────────────────────────────
   Pandox DS · package "hamsa" (Identity) · single authoritative source for:
   .pd-hamsa (HamsaMark: wordmark Haṃ·sa, monogram, favicon, lockups)
   .pd-breath (HamsaBreath: 4 s in / 4 s out breathing visual)
   .pd-pair  (BinduPair: the one-in-two pattern for any pair of terms)
   Geometry: haṃ = in-breath = SOLID band (duo-a / shiva-500); sa = out-breath =
   OUTLINED band (duo-b / shakti-500); bindu = saffron. Stroke vs fill carries the
   meaning, so every mark reads in Ink and Void (B&W) without hue.
   Sizes in em; colours only via tokens; no [data-theme] selectors. */

@layer components.vedic {

/* ══ HamsaMark ═══════════════════════════════════════════════════════════ */
.pd-hamsa {
  --pd-hamsa-ground: var(--surface);
  display: inline-grid; justify-items: start; align-content: start; gap: 0.12em;
  margin: 0; color: var(--text); text-decoration: none;
  font-family: var(--font-display); font-size: var(--fs-display-m); line-height: 1;
}
a.pd-hamsa { color: var(--text); border-radius: var(--radius-1); }
a.pd-hamsa:focus-visible { outline-offset: var(--focus-offset); }

/* Wordmark: Haṃ · sa — the dot is the bindu, the one inside the two. */
.pd-hamsa__word {
  display: inline-block; white-space: nowrap;
  font-family: var(--font-display); font-weight: 500; font-size: 1em; line-height: 1;
  letter-spacing: var(--track-display); color: var(--text);
  font-feature-settings: "kern", "liga";
}
.pd-hamsa__bindu {
  display: inline-block; inline-size: 0.165em; block-size: 0.165em; border-radius: 50%;
  margin-inline: 0.085em 0.075em; vertical-align: 0.155em;
  background: var(--bindu-on-paper);
  /* hairline rim in the deep saffron: lifts the mark past 3:1 on Paper without changing its hue */
  box-shadow: inset 0 0 0 max(1px, 0.014em) var(--saffron-700);
}
.pd-hamsa__deva {
  font-family: var(--font-deva); font-size: 0.34em; line-height: 1.3; font-weight: 400;
  color: var(--text-muted); letter-spacing: 0;
}
.pd-hamsa__meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25em 0.9em;
  font-family: var(--font-sans); font-size: max(0.2em, 0.8125rem); line-height: 1.35;
  letter-spacing: 0; color: var(--text);
}
.pd-hamsa__name { font-weight: 500; }
.pd-hamsa__url { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: var(--track-mono); color: var(--text-muted); }
.pd-hamsa__tag {
  max-inline-size: 34ch; font-family: var(--font-text); font-style: italic; font-size: max(0.22em, 1rem);
  line-height: 1.45; color: var(--text-muted); letter-spacing: 0;
}

/* Monogram (viewBox 0 36 120 52): two mirrored half-arcs meeting at the bindu. */
.pd-hamsa__mark { display: block; block-size: 0.86em; inline-size: auto; aspect-ratio: 120 / 52; overflow: visible; flex: none; }
.pd-hamsa__ham { fill: var(--duo-a-fill); }
.pd-hamsa__sa { fill: none; stroke: var(--duo-b); stroke-width: 2; stroke-linejoin: miter; }
.pd-hamsa__gap { fill: var(--pd-hamsa-ground, var(--surface)); }
.pd-hamsa__dot { fill: var(--bindu-on-paper); stroke: var(--saffron-700); stroke-width: 0.9; }
/* Favicon geometry (viewBox 0 0 32 32): weight contrast replaces stroke-vs-fill at 16 px. */
.pd-hamsa__fav { display: block; inline-size: 1em; block-size: 1em; }
.pd-hamsa__fav-ham { fill: none; stroke: var(--duo-a); stroke-width: 3.6; stroke-linecap: butt; }
.pd-hamsa__fav-sa { fill: none; stroke: var(--duo-b); stroke-width: 1.6; stroke-linecap: butt; }
/* Tab drawing (≤ 24 px): tighter arcs, a heavy haṃ and a 3-unit sa band so sa survives at 16 px, larger bindu. */
.pd-hamsa__fav--tab .pd-hamsa__fav-ham { stroke-width: 4.6; }
.pd-hamsa__fav--tab .pd-hamsa__fav-sa { stroke-width: 3; }
.pd-hamsa__fav--tab .pd-hamsa__dot { stroke-width: 0.6; }

/* Ink: force B&W in any theme (print, embossing, single-colour use). */
.pd-hamsa--ink .pd-hamsa__ham { fill: var(--text); }
.pd-hamsa--ink .pd-hamsa__sa, .pd-hamsa--ink .pd-hamsa__fav-sa, .pd-hamsa--ink .pd-hamsa__fav-ham { stroke: var(--text); }
.pd-hamsa--ink .pd-hamsa__dot { fill: var(--text); stroke: none; }
.pd-hamsa--ink .pd-hamsa__bindu { background: var(--text); box-shadow: none; }
/* Quiet: all-ink mark for site chrome (masthead, footer, menus, hero top row). Arcs and bindu in --text;
   solid vs open still tells haṃ from sa. Chrome repeats on every view, so it spends no hue at all. */
.pd-hamsa--quiet .pd-hamsa__ham { fill: var(--text); }
.pd-hamsa--quiet .pd-hamsa__sa, .pd-hamsa--quiet .pd-hamsa__fav-sa, .pd-hamsa--quiet .pd-hamsa__fav-ham { stroke: var(--text); }
.pd-hamsa--quiet .pd-hamsa__dot { fill: var(--text); stroke: none; }
.pd-hamsa--quiet .pd-hamsa__bindu { background: var(--text); box-shadow: none; }
/* Print: arcs in ink, bindu stays saffron (rimmed) — for .pd-paper objects, which re-pin Paper tokens
   but not the themed duo tones. In .pd-paper--mono the saffron pins to #000, so it goes B&W by itself. */
.pd-hamsa--print .pd-hamsa__ham { fill: var(--text); }
.pd-hamsa--print .pd-hamsa__sa, .pd-hamsa--print .pd-hamsa__fav-sa, .pd-hamsa--print .pd-hamsa__fav-ham { stroke: var(--text); }
/* Compact: the monogram + wordmark only, sized for a 44 px bar (masthead, sheet head). Arcs in ink: a
   bar-sized mark is chrome, not the subject. The bindu stays saffron unless --quiet/--ink also apply. */
.pd-hamsa--compact { font-size: var(--fs-title); min-block-size: var(--target-min); align-content: center; }
.pd-hamsa--compact .pd-hamsa__ham { fill: var(--text); }
.pd-hamsa--compact .pd-hamsa__sa { stroke: var(--text); }
.pd-hamsa--compact .pd-hamsa__meta { font-size: var(--fs-kicker); }
.pd-hamsa--compact .pd-hamsa__mark { block-size: 0.95em; }
/* At chrome size (mark under ~28 px tall) the 2-unit sa outline drops below 1 px; thicken it. */
.pd-hamsa--compact .pd-hamsa__sa, .pd-hamsa--xs .pd-hamsa__sa { stroke-width: 3.4; }

/* Lockups */
.pd-hamsa--row { grid-template-columns: auto auto; justify-content: start; align-items: center; column-gap: 0.3em; }
.pd-hamsa--row .pd-hamsa__mark { block-size: 0.8em; margin-block-start: -0.08em; }
.pd-hamsa__text { display: grid; gap: 0.16em; justify-items: start; }
.pd-hamsa--stack { justify-items: center; text-align: center; gap: 0.16em; }
.pd-hamsa--stack .pd-hamsa__mark { block-size: 0.78em; margin-block-end: 0.18em; }
.pd-hamsa--stack .pd-hamsa__meta { justify-content: center; margin-block-start: 0.32em; padding-block-start: 0.32em; border-block-start: var(--hairline) solid var(--rule); }
.pd-hamsa--hero { font-size: clamp(var(--fs-display-l), 15vw, calc(var(--fs-display-xl) * 1.5)); gap: 0.06em; }
.pd-hamsa--hero .pd-hamsa__word { font-weight: 500; letter-spacing: -0.025em; }
.pd-hamsa--hero .pd-hamsa__deva { font-size: 0.24em; margin-block-start: 0.1em; }
.pd-hamsa--hero .pd-hamsa__tag { margin-block-start: 0.45em; font-size: clamp(1.125rem, 0.15em, var(--fs-lede)); }

/* Size steps (set on .pd-hamsa; everything inside is em) */
.pd-hamsa--xs { font-size: 1rem; }
.pd-hamsa--s  { font-size: var(--fs-title); }
.pd-hamsa--m  { font-size: var(--fs-display-m); }
.pd-hamsa--l  { font-size: var(--fs-display-xl); }

/* Construction figure */
.pd-hamsa__build { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-6); align-items: center; margin: 0; font-size: 1rem; }
.pd-hamsa__build svg { display: block; inline-size: 100%; block-size: auto; overflow: visible; }
.pd-hamsa__guide { fill: none; stroke: var(--line-300); stroke-width: 0.35; stroke-dasharray: 1.4 1.4; }
.pd-hamsa__axis { fill: none; stroke: var(--line-300); stroke-width: 0.35; }
.pd-hamsa__pt { fill: var(--text-subtle); }
.pd-hamsa__key { display: grid; gap: 0; margin: 0; font-family: var(--font-sans); font-size: var(--fs-caption); line-height: 1.45; }
.pd-hamsa__key > div { display: grid; grid-template-columns: 2.25rem 1fr; gap: var(--space-3); align-items: start; padding-block: var(--space-3); border-block-start: var(--hairline) solid var(--rule); }
.pd-hamsa__key > div:last-child { border-block-end: var(--hairline) solid var(--rule); }
.pd-hamsa__key dt { margin: 0; padding-block-start: 0.2em; }
.pd-hamsa__key dt svg { inline-size: 2.25rem; block-size: auto; }
.pd-hamsa__key dd { margin: 0; color: var(--text-muted); }
.pd-hamsa__key b { display: block; font-family: var(--font-text); font-style: italic; font-weight: 400; font-size: 1.35em; color: var(--text); }

/* Favicon tiles (how the mark sits in a browser tab / app icon) */
.pd-hamsa__tile {
  display: inline-grid; place-items: center; inline-size: 1.5em; block-size: 1.5em;
  background: var(--paper-100); border: var(--hairline) solid var(--rule); border-radius: var(--radius-1);
  --pd-hamsa-ground: var(--paper-100);
}

@media (max-width: 30em) {
  .pd-hamsa__build { grid-template-columns: 1fr; gap: var(--space-4); }
  .pd-hamsa--row { column-gap: 0.26em; }
}
@media (forced-colors: active) {
  /* doubled class beats the --ink overrides, which would otherwise keep the theme's ink (invisible on a forced light Canvas) */
  .pd-hamsa__ham.pd-hamsa__ham, .pd-hamsa__dot.pd-hamsa__dot { fill: CanvasText; stroke: none; }
  .pd-hamsa__sa.pd-hamsa__sa, .pd-hamsa__fav-ham.pd-hamsa__fav-ham, .pd-hamsa__fav-sa.pd-hamsa__fav-sa { stroke: CanvasText; }
  .pd-hamsa__gap.pd-hamsa__gap { fill: Canvas; }
  .pd-hamsa__bindu.pd-hamsa__bindu { background: CanvasText; box-shadow: none; forced-color-adjust: none; }
}

/* ══ HamsaBreath ═════════════════════════════════════════════════════════ */
.pd-breath {
  --pd-breath-in: 4s; --pd-breath-out: 4s; --pd-breath-low: 0.32;
  --pd-breath-ground: var(--surface);
  display: grid; justify-items: center; gap: var(--space-4); margin: 0;
  font-size: 1rem; color: var(--text);
}
.pd-breath__stage { position: relative; inline-size: min(100%, 22em); }
.pd-breath__svg { display: block; inline-size: 100%; block-size: auto; overflow: visible; }
.pd-breath__base { fill: none; stroke: var(--line-300); stroke-width: 0.6; }
.pd-breath__guide { fill: none; stroke: var(--line-300); stroke-width: 0.6; stroke-dasharray: 2 3; }
.pd-breath__tick { fill: none; stroke: var(--line-300); stroke-width: 0.6; }
.pd-breath__arc { transform-box: view-box; transform-origin: 120px 100px; }
.pd-breath__ham { fill: var(--duo-a-fill); }
.pd-breath__sa { fill: none; stroke: var(--duo-b); stroke-width: 2; stroke-linejoin: miter; vector-effect: non-scaling-stroke; }
.pd-breath__gap { fill: var(--pd-breath-ground); }
.pd-breath__dot { fill: var(--bindu-on-paper); stroke: var(--saffron-700); stroke-width: 1; }

.pd-breath__labels { display: grid; grid-template-columns: 1fr 1fr; inline-size: 100%; margin-block-start: var(--space-2); }
.pd-breath__label { display: grid; justify-items: center; gap: 0.15em; padding-block-start: var(--space-2); }
.pd-breath__syl { font-family: var(--font-text); font-style: italic; font-size: var(--fs-title); line-height: 1.1; color: var(--text); }
.pd-breath__phase { font: var(--font-meta); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-subtle); }
.pd-breath__bar { display: block; inline-size: 3.5em; block-size: 2px; background: var(--rule); position: relative; overflow: hidden; }
.pd-breath__bar::after { content: ""; position: absolute; inset: 0; background: var(--text); transform: scaleX(1); transform-origin: left center; }
.pd-breath__label--sa .pd-breath__bar::after { transform-origin: right center; }

.pd-breath__caption { max-inline-size: 32ch; text-align: center; font-family: var(--font-text); font-size: var(--fs-body-s); line-height: 1.55; color: var(--text-muted); }
.pd-breath__caption i { color: var(--text); }

/* The pause control is a Button (.pd-btn.pd-btn--ghost.pd-btn--sm[aria-pressed]); .pd-breath__toggle is only the hook for the script and the hide rules below. */
.pd-breath__icon { display: inline-block; inline-size: 0.7em; block-size: 0.8em; border-inline: 0.22em solid currentColor; box-sizing: border-box; }
.pd-breath__toggle:where([aria-pressed="true"]) .pd-breath__icon { border-inline: 0; border-block: 0.4em solid transparent; border-inline-start: 0.62em solid currentColor; inline-size: 0.62em; }


/* Aside: framed for a sidebar / meditation note */
.pd-breath--aside { padding: var(--space-5) var(--space-4); border-block: var(--hairline) solid var(--rule-strong); inline-size: 100%; box-sizing: border-box; max-inline-size: 24em; }
.pd-breath__kicker { font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); justify-self: stretch; text-align: center; }
/* IAST stays lower-case italic inside an uppercase kicker */
.pd-breath__kicker i { font-family: var(--font-text); font-size: 1.2em; font-style: italic; letter-spacing: 0; text-transform: none; }

/* Motion is opt-in. Without it the component IS the static diagram: arcs at full breath, both phases shown. */
@media (prefers-reduced-motion: no-preference) {
  .pd-breath:not(.pd-breath--static) .pd-breath__arc {
    animation: pd-breath-swell calc(var(--pd-breath-in) + var(--pd-breath-out)) var(--ease-in-out) infinite both;
  }
  .pd-breath:where(:not(.pd-breath--static)) :where(.pd-breath__label--ham) .pd-breath__bar::after { animation: pd-breath-fill-in calc(var(--pd-breath-in) + var(--pd-breath-out)) linear infinite both; }
  .pd-breath:where(:not(.pd-breath--static)) :where(.pd-breath__label--sa) .pd-breath__bar::after { animation: pd-breath-fill-out calc(var(--pd-breath-in) + var(--pd-breath-out)) linear infinite both; }
  .pd-breath:where(:not(.pd-breath--static)) :where(.pd-breath__label--ham) .pd-breath__syl { animation: pd-breath-lead-in calc(var(--pd-breath-in) + var(--pd-breath-out)) steps(1, end) infinite both; }
  .pd-breath:where(:not(.pd-breath--static)) :where(.pd-breath__label--sa) .pd-breath__syl { animation: pd-breath-lead-out calc(var(--pd-breath-in) + var(--pd-breath-out)) steps(1, end) infinite both; }
  .pd-breath.is-paused:where(:not(.pd-breath--static)) .pd-breath__arc,
  .pd-breath.is-paused:where(:not(.pd-breath--static)) .pd-breath__syl,
  .pd-breath.is-paused:where(:not(.pd-breath--static)) .pd-breath__bar::after { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .pd-breath__toggle { display: none; }
}
.pd-breath--static .pd-breath__toggle { display: none; }

/* 0–4 % rest at the bindu · 4–46 % in (haṃ) · 46–54 % full · 54–96 % out (sa) · 96–100 % rest */
@keyframes pd-breath-swell {
  0%, 4% { transform: scale(var(--pd-breath-low)); }
  46%, 54% { transform: scale(1); }
  96%, 100% { transform: scale(var(--pd-breath-low)); }
}
@keyframes pd-breath-fill-in { 0%, 4% { transform: scaleX(0); } 46%, 54% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } }
@keyframes pd-breath-fill-out { 0%, 54% { transform: scaleX(0); } 96% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes pd-breath-lead-in { 0% { color: var(--text); } 50% { color: var(--text-subtle); } }
@keyframes pd-breath-lead-out { 0% { color: var(--text-subtle); } 50% { color: var(--text); } }

@media (forced-colors: active) {
  .pd-breath__ham, .pd-breath__dot { fill: CanvasText; stroke: none; }
  .pd-breath__sa { stroke: CanvasText; }
  .pd-breath__gap { fill: Canvas; }
  .pd-breath__bar::after { background: CanvasText; }
}

/* ══ BinduPair ═══════════════════════════════════════════════════════════ */
.pd-pair { font: inherit; color: inherit; white-space: nowrap; }
.pd-pair__a, .pd-pair__b { white-space: nowrap; }
.pd-pair__bindu {
  display: inline-block; inline-size: 0.2em; block-size: 0.2em; border-radius: 50%;
  margin-inline: -0.07em; vertical-align: 0.17em;
  background: var(--bindu-on-paper); box-shadow: inset 0 0 0 max(1px, 0.016em) var(--saffron-700);
}
/* Quiet: in running text and anywhere the view's saffron is already spent */
.pd-pair--quiet .pd-pair__bindu { background: currentColor; box-shadow: none; inline-size: 0.16em; block-size: 0.16em; vertical-align: 0.19em; }
/* Duo: the two poles carry their hue (Śiva / Śakti tones), the bindu stays the one */
.pd-pair--duo .pd-pair__a { color: var(--shiva-700); }
.pd-pair--duo .pd-pair__b { color: var(--shakti-700); }
.pd-pair--italic .pd-pair__a, .pd-pair--italic .pd-pair__b { font-style: italic; }

/* Block: a centred, mirrored figure — a leans in from the left, b from the right */
.pd-pair--block {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: var(--space-4);
  inline-size: 100%; margin: 0; white-space: normal;
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-display-m); line-height: 1.05; letter-spacing: var(--track-display); color: var(--text);
}
.pd-pair--block .pd-pair__side { display: grid; gap: 0.2em; min-inline-size: 0; }
.pd-pair--block .pd-pair__side--a { justify-items: end; text-align: end; }
.pd-pair--block .pd-pair__side--b { justify-items: start; text-align: start; }
.pd-pair--block .pd-pair__a, .pd-pair--block .pd-pair__b { white-space: normal; }
.pd-pair--block .pd-pair__bindu { inline-size: 0.24em; block-size: 0.24em; margin: 0; vertical-align: 0; align-self: center; }
.pd-pair--block.pd-pair--has-gloss .pd-pair__bindu { align-self: start; margin-block-start: 0.4em; }
.pd-pair__gloss { font-family: var(--font-sans); font-weight: 400; font-size: max(0.27em, 0.8125rem); line-height: 1.4; letter-spacing: 0; color: var(--text-muted); }
.pd-pair__gloss:lang(sa), .pd-pair__gloss:lang(ne) { font-family: var(--font-deva); font-size: max(0.42em, 1rem); line-height: 1.3; }

/* Divider: rule — a · b — rule. Section breaks between two halves of a page. */
.pd-pair--divider {
  display: grid; grid-template-columns: minmax(var(--space-4), 1fr) auto minmax(var(--space-4), 1fr); align-items: center; column-gap: var(--space-4);
  inline-size: 100%; margin: var(--space-3) 0; white-space: nowrap;
  font-family: var(--font-text); font-style: italic; font-size: var(--fs-body); line-height: 1.2; color: var(--text-muted);
}
.pd-pair--divider::before, .pd-pair--divider::after { content: ""; block-size: 0; border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-pair--divider > .pd-pair__inner { color: var(--text); }
.pd-pair--divider .pd-pair__bindu { inline-size: 0.24em; block-size: 0.24em; vertical-align: 0.16em; }

/* Stack: a above, bindu, b below — narrow columns, spines, print labels */
.pd-pair--stack { display: inline-grid; justify-items: center; row-gap: 0.18em; white-space: normal; text-align: center; }
.pd-pair--stack { line-height: 1.15; }
.pd-pair--stack .pd-pair__bindu { display: block; margin: 0.06em 0; vertical-align: 0; }

@media (max-width: 30em) {
  .pd-pair--block { font-size: var(--fs-headline); column-gap: var(--space-3); }
}
@media (forced-colors: active) {
  .pd-pair__bindu.pd-pair__bindu { background: CanvasText; box-shadow: none; forced-color-adjust: none; }
  .pd-pair--divider::before, .pd-pair--divider::after { border-color: CanvasText; }
}

} /* end components.vedic · hamsa */

/* ── part: hardware.css ── */
/* ── PART: hardware ──────────────────────────────────────────────────────────
   Pandox DS v2 · package "hardware" · engineering docs for 04 Craft builds.
   .pd-hw            shared: figure shell, scrolling canvas, SVG ink classes, edge notation, legend, tooltip
   .pd-hw-block*     BlockDiagram — power, SBC/MCU, sensors, display, comms; buses labelled
   .pd-hw-sym*       SchematicSymbol — symbol library (1px leads, 1.5px bodies, currentColor)
   .pd-hw-wire*      WiringDiagram — header → peripherals, wire colour NAMES + dash patterns
   .pd-hw-pin*       Pinout — 2×20 header, function pills told apart by outline shape
   .pd-hw-bom*       BillOfMaterials — BOM table rows, DNP rows, CSV export
   .pd-hw-ds*        DatasheetHeader — datasheet cover
   .pd-hw-layer*     PCBLayers — layer stack legend with patterned swatches
   .pd-hw-net*       NetworkTopology — internet → router → switch → VLAN zones, tailnet overlay
   .pd-hw-rack*      RackElevation — 42U front elevation
   .pd-hw-log*       BuildLog — dated build entries
   Edge notation matches the diagram kit (diagrams.css, .pd-dg__edge): solid 1.4 = sync / signal,
   dashed 6 4 = async, thick 3 = data, dotted 0 4.5 = optional; zones dashed 5 4. Domain extensions (SystemLegend):
   power rail = thick 3 + long dash 10 3; VPN / tailnet overlay = dash-dot 10 3 2 3 at 1.5. Neither reuses the async dash. Every edge also carries a mono text label, so no line is
   read by hue. The saffron bindu is used once per view: the selected or "live" thing. */
@layer components.site {

/* ══ Shared shell ══════════════════════════════════════════════════════════ */
.pd-hw { position: relative; display: grid; gap: var(--space-4); margin: 0; color: var(--text); }
.pd-hw__canvas { --pd-hw-w: 760; position: relative; overflow-x: auto; overscroll-behavior-x: contain; padding-block: var(--space-2); }
.pd-hw__canvas:focus-visible { outline-offset: var(--focus-offset); }
.pd-hw__svg { display: block; inline-size: 100%; max-inline-size: calc(var(--pd-hw-w) * 1px); min-inline-size: calc(var(--pd-hw-w) * 0.78px); block-size: auto; overflow: visible; color: var(--text); }
.pd-hw__cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-4); padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule); font: var(--font-caption); color: var(--text-muted); }
.pd-hw__cap > :first-child { max-inline-size: var(--measure); }
.pd-hw__num { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); white-space: nowrap; }
.pd-hw__sample { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }

/* Text alternative: a quiet <details> holding a table or list */
.pd-hw__alt { border-block-start: var(--hairline) solid var(--rule); }
/* Text-alternative summary: the shared .pd-alt__sum recipe (SystemLegend › Text alternative). */
.pd-hw__alt > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4); min-block-size: var(--target-min); padding-block: var(--space-3); cursor: pointer; list-style: none; font: var(--font-label); letter-spacing: normal; text-transform: none; color: var(--text); }
.pd-hw__alt > summary::-webkit-details-marker { display: none; }
.pd-hw__alt > summary::before { content: ""; flex: none; inline-size: .5em; block-size: .5em; border: 0; border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor; rotate: -45deg; translate: 0 -.1em; transition: rotate var(--dur-1) var(--ease-standard); }
.pd-hw__alt[open] > summary::before { content: ""; rotate: 45deg; }
.pd-hw__alt > summary:focus-visible { outline-offset: var(--focus-offset); }
@media (prefers-reduced-motion: reduce) { .pd-hw__alt > summary::before { transition: none; } }
.pd-hw__alt > :where(:not(summary)) { margin-block: var(--space-3) var(--space-5); }

/* Tables inside the kit sit on .pd-table; .pd-hw-table adds header padding and mono cells */
.pd-hw-table.pd-hw-table :where(thead th) { padding: var(--space-2) var(--space-3) var(--space-2) 0; }
.pd-hw-table.pd-hw-table :where(thead th:last-child, tbody td:last-child, tfoot td:last-child) { padding-inline-end: 0; }
.pd-hw-table.pd-hw-table :where(.pd-hw-bom__ph) { color: var(--text-subtle); }
.pd-hw-table.pd-hw-table :where(.pd-hw-bom__mono) { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); }
.pd-hw-table--fit.pd-hw-table :where(table) { min-inline-size: 0; }
.pd-hw-table.pd-hw-table :where(tbody th, tbody td) { padding-block: var(--space-2); vertical-align: middle; }

/* ── SVG ink classes (all currentColor / tokens; strokes never scale) ── */
.pd-hw-ink { fill: none; stroke: currentColor; stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-linecap: square; stroke-linejoin: miter; }
.pd-hw-ink--em { stroke-width: 1.5px; }
.pd-hw-ink--muted { stroke: var(--text-subtle); }
.pd-hw-fill { fill: currentColor; stroke: none; }
/* Core diagram notation (diagrams.css .pd-dg): ink boxes at --dg-shape, ink edges, ink arrowheads, plain-text edge labels on a borderless surface plate. */
.pd-hw-box { fill: var(--surface); stroke: currentColor; stroke-width: var(--dg-shape); vector-effect: non-scaling-stroke; }
.pd-hw-box--em { stroke-width: var(--dg-heavy); }
.pd-hw-box--sunken { fill: var(--surface-sunken); stroke: var(--border-control); }
.pd-hw-zone { fill: none; stroke: var(--text-subtle); stroke-width: 1px; stroke-dasharray: var(--dg-dash-zone); vector-effect: non-scaling-stroke; }
.pd-hw-t { font: 500 var(--fs-meta)/1 var(--font-mono); letter-spacing: var(--track-mono); fill: var(--text-muted); }
.pd-hw-t--title { font: 500 var(--fs-label)/1 var(--font-sans); letter-spacing: 0; fill: var(--text); }
.pd-hw-t--caps { text-transform: uppercase; fill: var(--text-subtle); }
.pd-hw-zone + .pd-hw-t--caps { fill: var(--text-muted); } /* zone label: type is .pd-dg__tz (diagrams.css) */
.pd-hw-t--ink { fill: var(--text); }
.pd-hw-t--end { text-anchor: end; }
.pd-hw-t--mid { text-anchor: middle; }
/* Edge notation */
.pd-hw-edge { fill: none; stroke: currentColor; stroke-width: var(--dg-edge); vector-effect: non-scaling-stroke; stroke-linejoin: round; transition: stroke var(--dur-1) var(--ease-standard), stroke-width var(--dur-1) var(--ease-standard), opacity var(--dur-1) var(--ease-standard); }
.pd-hw-edge--data { stroke-width: var(--dg-data); }
.pd-hw-edge--async { stroke-dasharray: var(--dg-dash-async); }
.pd-hw-edge--power { stroke-width: var(--dg-data); stroke-dasharray: 10 3; stroke-linecap: butt; }
.pd-hw-edge--overlay { stroke-dasharray: 10 3 2 3; }
.pd-hw-edge--optional { stroke-dasharray: var(--dg-dash-optional); stroke-linecap: round; stroke-width: var(--dg-optional-w); }
.pd-hw-edge--overlay { stroke: var(--text); stroke-width: 1.5px; }
.pd-hw-arrow { fill: currentColor; stroke: none; }
/* Edge label: plain mono text on a borderless surface plate (as .pd-dg__plate) so the line breaks around it */
.pd-hw-tag rect { fill: var(--surface); stroke: none; }
.pd-hw-tag text { font: 500 var(--fs-meta)/1 var(--font-mono); letter-spacing: var(--track-mono); fill: var(--text); text-anchor: middle; dominant-baseline: central; }
/* Square step badge (diagram-kit notation) */
.pd-hw-badge rect { fill: var(--text); }
.pd-hw-badge text { font: 600 10px/1 var(--font-mono); letter-spacing: 0; fill: var(--surface); text-anchor: middle; dominant-baseline: central; }
/* The one saffron moment */
.pd-hw-bindu { fill: var(--bindu); stroke: var(--bindu-rim); stroke-width: 1px; vector-effect: non-scaling-stroke; }

/* Interactive nodes (focusable <g>) */
.pd-hw-node { cursor: default; outline: none; }
.pd-hw-node:focus-visible .pd-hw-box, .pd-hw-node:where(.is-on) .pd-hw-box { stroke: var(--focus); stroke-width: 2px; }
:where(.pd-hw.is-tracing .pd-hw__svg) .pd-hw-edge:not(.is-on) { opacity: var(--opacity-faint); }
:where(.pd-hw.is-tracing .pd-hw__svg) .pd-hw-tag:not(.is-on) { opacity: var(--opacity-muted); }
.pd-hw-edge:where(.is-on) { stroke: var(--text); }

/* Tooltip shared by every diagram: positioned from --x / --y (px, set by script) */
/* Data tooltip: surface plate recipe shared with .pd-ch-tip (charts.css); only placement lives here. */
.pd-hw-tip { inset-block-start: 0; inset-inline-start: 0; translate: calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px); }
.pd-hw-tip[hidden] { display: none; }
.pd-hw-tip b { display: block; margin-block-end: .2em; font-weight: 600; color: var(--text); }

/* Legend: line samples drawn in SVG, words beside them */
.pd-hw-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); }
.pd-hw-legend > li { display: inline-flex; align-items: center; gap: var(--space-2); }
.pd-hw-legend svg { flex: none; inline-size: 2.25rem; block-size: 0.75rem; overflow: visible; }

/* Toolbar of toggles above a diagram */
.pd-hw-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.pd-hw-bar__label { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); text-transform: uppercase; }
/* DEPRECATED alias of ToggleGroup .pd-toggle-group__btn (same size, face and check mark) for old markup; new markup uses .pd-toggle-group__btn. */
.pd-hw-toggle { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--control-block); padding-block: 0; padding-inline: var(--space-3) var(--space-4); border: var(--hairline) solid var(--border-control); border-radius: var(--radius-1); font: 500 var(--fs-label)/1.2 var(--font-sans); letter-spacing: normal; color: var(--text); background: transparent; cursor: pointer; position: relative; }
.pd-hw-toggle::after { content: ""; position: absolute; inset: 0; margin: auto; inline-size: max(100%, var(--target-min)); block-size: max(100%, var(--target-min)); }
.pd-hw-toggle::before { content: ""; box-sizing: border-box; flex: none; inline-size: .875em; block-size: .875em; border: 1px solid currentColor; border-radius: var(--radius-1); } /* = ToggleGroup recipe: box at rest, check when pressed */
.pd-hw-toggle[aria-pressed="true"] { background: var(--selected-bg); border-color: var(--selected-bg); color: var(--selected-fg); }
.pd-hw-toggle[aria-pressed="true"]::before { inline-size: .3em; block-size: .6em; margin-inline: .29em; border-width: 0 .14em .14em 0; border-radius: 0; rotate: 45deg; translate: 0 -.08em; }
.pd-hw-toggle:focus-visible { outline-offset: var(--focus-offset); }
@media (hover: hover) { .pd-hw-toggle:where(:not([aria-pressed="true"])):hover { color: var(--text); border-color: var(--rule-strong); background: color-mix(in oklab, currentColor var(--state-hover-mix), transparent); } }

/* Compact mono key/value list */
.pd-hw-kv { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-4); margin: 0; font: var(--font-meta); letter-spacing: var(--track-mono); }
.pd-hw-kv dt { color: var(--text-subtle); text-transform: uppercase; }
.pd-hw-kv dd { margin: 0; color: var(--text); font-variant-numeric: tabular-nums; }

/* ══ BlockDiagram ══════════════════════════════════════════════════════════ */
/* Core diagram notation (diagrams.css .pd-dg): ink boxes at --dg-shape, ink edges, engine fill arrowheads,
   plain-text edge labels on a borderless surface plate. A trace is a thicker ink stroke and the rest dims to --opacity-faint;
   only :focus-visible uses --focus, so a traced block never looks focused. */
.pd-hw-block .pd-hw-legend svg { color: var(--text); }
.pd-hw-block .pd-hw-node.is-on .pd-hw-box { stroke: var(--text); stroke-width: 2.25px; }
.pd-hw-block .pd-hw-node:focus-visible .pd-hw-box { stroke: var(--focus); stroke-width: var(--focus-width); }
:where(.pd-hw-block.is-tracing .pd-hw__svg) .pd-hw-tag:not(.is-on) { opacity: var(--opacity-faint); }
:where(.pd-hw-block.is-tracing .pd-hw__svg) .pd-hw-edge.is-on { stroke-width: 2.4px; }
:where(.pd-hw-block.is-tracing .pd-hw__svg) .pd-hw-edge--data.is-on, :where(.pd-hw-block.is-tracing .pd-hw__svg) .pd-hw-edge--power.is-on { stroke-width: 3.5px; }

/* ══ SchematicSymbol ═══════════════════════════════════════════════════════ */
.pd-hw-sym { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-hw-sym__item { display: grid; grid-template-rows: auto auto auto; align-content: start; gap: var(--space-1); padding: var(--space-4) var(--space-3) var(--space-4) 0; border-block-end: var(--hairline) solid var(--rule); }
.pd-hw-sym__art { display: block; inline-size: 100%; max-inline-size: 6rem; block-size: auto; aspect-ratio: 2 / 1; color: var(--text); overflow: visible; }
.pd-hw-sym__name { font: var(--font-label); color: var(--text); }
.pd-hw-sym__ref { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-hw-sym__pin { font: 500 var(--fs-meta)/1 var(--font-mono); fill: var(--text-subtle); }
.pd-hw-sym__dot { fill: currentColor; }
.pd-hw-sym__glow { fill: none; stroke: var(--bindu-rim); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.pd-hw-sym--lg .pd-hw-sym__art { max-inline-size: 15rem; }
.pd-hw-sym__spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-4) var(--gutter); }

/* ══ WiringDiagram ═════════════════════════════════════════════════════════ */
.pd-hw-wire .pd-hw__canvas { --pd-hw-w: 760; }
.pd-hw-wire__path { fill: none; stroke: var(--text); stroke-width: 2px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; transition: opacity var(--dur-1) var(--ease-standard), stroke-width var(--dur-1) var(--ease-standard); }
.pd-hw-wire__path--red { stroke-width: 3px; }
.pd-hw-wire__path--orange { stroke-dasharray: 14 4; }
.pd-hw-wire__path--black { stroke-width: 3px; stroke-dasharray: 8 2 2 2; stroke-linecap: butt; }
.pd-hw-wire__path--yellow { stroke-dasharray: 6 3; stroke-linecap: butt; }
.pd-hw-wire__path--blue { stroke-dasharray: 0.5 4; }
.pd-hw-wire__path--green { stroke-dasharray: 12 3 3 3; stroke-linecap: butt; }
.pd-hw-wire__path--white { stroke: var(--text-muted); stroke-dasharray: 4 2; stroke-linecap: butt; }
.pd-hw-wire__label { font: 500 var(--fs-meta)/1 var(--font-mono); letter-spacing: var(--track-mono); fill: var(--text); text-anchor: middle; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.pd-hw-wire__pno { font: 600 0.75rem/1 var(--font-mono); fill: var(--text); text-anchor: middle; dominant-baseline: central; }
.pd-hw-wire__pad--sq + .pd-hw-wire__pno { fill: var(--surface); }
.pd-hw-wire__hit { fill: none; stroke: transparent; stroke-width: 14px; vector-effect: non-scaling-stroke; pointer-events: stroke; }
.pd-hw-wire__g { outline: none; cursor: default; }
.pd-hw-wire:where(.is-tracing) .pd-hw-wire__g:not(.is-on) { opacity: var(--opacity-faint); }
.pd-hw-wire__g:where(.is-on) .pd-hw-wire__path { stroke-width: 3.5px; }
.pd-hw-wire__g:focus-visible .pd-hw-wire__path { stroke: var(--focus); }
.pd-hw-wire__pad { fill: var(--surface); stroke: var(--rule-strong); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.pd-hw-wire__pad--sq { fill: var(--text); }
/* Wire key table: the swatch is the dash pattern itself */
.pd-hw-wire__key svg { display: block; inline-size: 3rem; block-size: 0.75rem; overflow: visible; }
.pd-hw-wire__key :where(tbody tr.is-on) { background: var(--surface-sunken); }

/* ══ Pinout ════════════════════════════════════════════════════════════════ */
.pd-hw-pin { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
@media (min-width: 52em) { .pd-hw-pin { grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); align-items: start; } }
/* Board view: the header as it sits on the board, 2 rows × 20 */
.pd-hw-pin__board { display: grid; grid-template-columns: repeat(20, minmax(0, 0.75rem)); grid-auto-flow: column; grid-template-rows: repeat(2, 0.75rem); gap: 0.1875rem; padding: var(--space-2); inline-size: max-content; max-inline-size: 100%; border: var(--hairline) solid var(--rule-strong); background: var(--surface-sunken); }
.pd-hw-pin__pad { border: 1.5px solid var(--text-muted); border-radius: var(--radius-pill); background: var(--surface); }
.pd-hw-pin__pad:where(.is-pin1) { border-radius: 0; border-color: var(--text); }
.pd-hw-pin__pad:where(.is-sel) { background: var(--text); border-color: var(--text); }
.pd-hw-pin__pad:where(.is-dim) { opacity: var(--opacity-faint); }
.pd-hw-pin__boardcap { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
/* Header grid: name · odd pin · even pin · name */
.pd-hw-pin__grid { display: grid; grid-template-columns: minmax(0, 1fr) 2.75rem 2.75rem minmax(0, 1fr); gap: 0.75rem 0; margin: 0; padding: 0; list-style: none; } /* 2rem buttons + 0.75rem gap = a 44px pitch, so the hit areas below never overlap */
.pd-hw-pin__row { display: contents; }
.pd-hw-pin__btn { position: relative; display: flex; align-items: center; gap: var(--space-2); min-block-size: 2rem; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: start; }
.pd-hw-pin__btn::before { content: ""; position: absolute; inset: 0; margin: auto; inline-size: max(100%, var(--target-min)); block-size: max(100%, var(--target-min)); } /* hit area ≥ --target-min */
.pd-hw-pin__btn:focus-visible { outline-offset: var(--focus-offset); }
.pd-hw-pin__btn--odd { grid-column: 1 / span 2; justify-content: flex-end; }
.pd-hw-pin__btn--even { grid-column: 3 / span 2; flex-direction: row-reverse; justify-content: flex-end; }
.pd-hw-pin__no { position: relative; display: inline-grid; place-items: center; flex: none; inline-size: 2.25rem; block-size: 2rem; font: 500 var(--fs-meta)/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-muted); border-inline: var(--hairline) solid var(--rule); }
.pd-hw-pin__btn:where([aria-pressed="true"]) .pd-hw-pin__no { color: var(--text); font-weight: 600; }
.pd-hw-pin__btn:where([aria-pressed="true"]) .pd-hw-pin__no::after { content: ""; position: absolute; inset-block-end: -0.1875rem; inset-inline-start: calc(50% - 0.25rem); inline-size: 0.5rem; block-size: 0.5rem; border-radius: var(--radius-pill); background: var(--bindu); box-shadow: 0 0 0 1px var(--bindu-rim); }
.pd-hw-pin__btn:where(.is-dim) { opacity: var(--opacity-faint); }
/* Function pills: told apart by outline shape, not hue */
.pd-hw-pill { display: inline-flex; align-items: center; min-block-size: 1.5rem; max-inline-size: 100%; padding: 0 var(--space-2); font: 500 var(--fs-meta)/1.15 var(--font-mono); letter-spacing: var(--track-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); border: var(--hairline) solid var(--text-muted); border-radius: var(--radius-pill); background: var(--surface); }
.pd-hw-pill--power { color: var(--surface); background: var(--text); border-color: var(--text); border-radius: var(--radius-1); }
.pd-hw-pill--gnd { border-color: var(--text); border-radius: var(--radius-1); background-image: repeating-linear-gradient(135deg, transparent 0 0.25rem, var(--rule) 0.25rem 0.3125rem); }
.pd-hw-pill--gpio { border-color: var(--text-subtle); }
.pd-hw-pill--i2c { border: 3px double var(--text); }
.pd-hw-pill--spi { border: 1.5px solid var(--text); border-radius: 0; }
.pd-hw-pill--uart { border: 1.5px dotted var(--text); }
.pd-hw-pill--id { border: var(--hairline) dashed var(--text); border-radius: 0; }
/* Pin detail */
.pd-hw-pin__detail { display: grid; gap: var(--space-3); padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-hw-pin__dtitle { margin: 0; font: var(--font-title); }
.pd-hw-pin__key { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; font: var(--font-caption); color: var(--text-muted); }
.pd-hw-pin__key li { display: flex; align-items: center; gap: var(--space-2); }
.pd-hw-pin__key .pd-hw-pill { flex: none; }

/* ══ BillOfMaterials ═══════════════════════════════════════════════════════ */
.pd-hw-bom { display: grid; gap: var(--space-3); }
.pd-hw-bom__ref { font: 500 var(--fs-meta)/1.3 var(--font-mono); letter-spacing: var(--track-mono); color: var(--text); white-space: nowrap; }
.pd-hw-bom__mono { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); white-space: nowrap; }
.pd-hw-bom__ph { color: var(--text-subtle); }
.pd-hw-bom :where(tr.pd-hw-bom__dnp) :where(td, th) { color: var(--text-subtle); }
.pd-hw-bom :where(tr.pd-hw-bom__dnp) .pd-hw-bom__ref { text-decoration: line-through var(--hairline); }
.pd-hw-bom__flag { display: inline-block; margin-inline-start: var(--space-2); padding: 0 var(--space-1); font: 600 0.75rem/1.4 var(--font-mono); letter-spacing: var(--track-caps); border: var(--hairline) dashed currentColor; text-decoration: none; }
.pd-hw-bom__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }

/* ══ DatasheetHeader ═══════════════════════════════════════════════════════ */
.pd-hw-ds { container: pd-hw-ds / inline-size; display: grid; gap: var(--space-6); padding: var(--pad-panel); border: var(--hairline) solid var(--rule-strong); background: var(--surface); }
.pd-hw-ds__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-2) var(--space-4); padding-block-end: var(--space-3); border-block-end: var(--hairline) solid var(--rule-strong); }
.pd-hw-ds__name { display: flex; align-items: baseline; gap: var(--space-2); margin: 0; font: var(--font-display-m); letter-spacing: var(--track-display); text-wrap: balance; }
.pd-hw-ds__name svg { flex: none; inline-size: 0.5rem; block-size: 0.5rem; }
.pd-hw-ds__dek { margin: var(--space-2) 0 0; max-inline-size: var(--measure); font: var(--font-lede); color: var(--text-muted); }
.pd-hw-ds__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); gap: 0; margin: 0; border-block-start: var(--hairline) solid var(--rule); }
.pd-hw-ds__meta > div { padding: var(--space-3) var(--space-3) var(--space-3) 0; border-block-end: var(--hairline) solid var(--rule); }
.pd-hw-ds__meta dt { font: var(--font-meta); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-subtle); }
.pd-hw-ds__meta dd { margin: var(--space-1) 0 0; font: var(--font-label); color: var(--text); }
.pd-hw-ds__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6) var(--gutter); }
@container pd-hw-ds (min-width: 46rem) { .pd-hw-ds__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }
.pd-hw-ds__h { margin: 0 0 var(--space-3); padding-block-start: var(--space-2); border-block-start: var(--hairline) solid var(--rule-strong); font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
.pd-hw-ds__feat { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font: var(--font-ui); }
.pd-hw-ds__feat li { display: grid; grid-template-columns: 0.75rem 1fr; gap: var(--space-2); }
.pd-hw-ds__feat li::before { content: ""; inline-size: 0.375rem; block-size: 0.375rem; margin-block-start: 0.55em; background: var(--text); }
.pd-hw-ds__warn { margin: var(--space-3) 0 0; font: var(--font-caption); color: var(--text-muted); max-inline-size: var(--measure); }
.pd-hw-ds__warn b { color: var(--danger); font-weight: 600; }
.pd-hw-ds__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-4); padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
@media (max-width: 30em) { .pd-hw-ds { padding: var(--space-4); } }

/* ══ PCBLayers ═════════════════════════════════════════════════════════════ */
.pd-hw-layer { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6) var(--gutter); }
@media (min-width: 52em) { .pd-hw-layer { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; } }
.pd-hw-layer__stack { margin: 0; padding: 0; list-style: none; border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-hw-layer__row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-4); padding-block: var(--space-2); border-block-end: var(--hairline) solid var(--rule); }
.pd-hw-layer__sw { display: block; inline-size: 4.5rem; block-size: var(--pd-hw-h, 1.25rem); color: var(--text); border: var(--hairline) solid var(--rule-strong); }
.pd-hw-layer__sw svg { display: block; inline-size: 100%; block-size: 100%; }
.pd-hw-layer__name { font: var(--font-label); color: var(--text); }
.pd-hw-layer__role { display: block; font: var(--font-caption); color: var(--text-muted); }
.pd-hw-layer__ext { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); text-align: end; white-space: nowrap; }
.pd-hw-layer__row:where(.is-off) .pd-hw-layer__sw { opacity: var(--opacity-faint); }
.pd-hw-layer__row:where(.is-off) .pd-hw-layer__name { color: var(--text-subtle); text-decoration: line-through var(--hairline); }
.pd-hw-layer__g { transition: opacity var(--dur-2) var(--ease-standard); }
.pd-hw-layer__g:where(.is-off) { opacity: 0; }
.pd-hw-layer__check { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--target-min); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); cursor: pointer; }
.pd-hw-layer__check input { inline-size: 1rem; block-size: 1rem; margin: 0; accent-color: var(--text); }

/* ══ NetworkTopology ═══════════════════════════════════════════════════════ */
.pd-hw-net .pd-hw__canvas { --pd-hw-w: 820; }
.pd-hw-net__ip { font: 400 var(--fs-meta)/1 var(--font-mono); letter-spacing: var(--track-mono); fill: var(--text-subtle); }
.pd-hw-net__zone-t { fill: var(--text-muted); } /* type: the diagram zone label .pd-dg__tz (diagrams.css) */
.pd-hw-net__overlay { transition: opacity var(--dur-2) var(--ease-standard); }
.pd-hw-net:where(.is-no-overlay) .pd-hw-net__overlay { opacity: 0; visibility: hidden; }

/* ══ RackElevation ═════════════════════════════════════════════════════════ */
.pd-hw-rack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6) var(--gutter); }
@media (min-width: 52em) { .pd-hw-rack { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); align-items: start; } }
.pd-hw-rack__frame { --u: 1.125rem; display: grid; grid-template-columns: 2rem minmax(0, 1fr) 2rem; grid-template-rows: repeat(42, var(--u)); padding-block: var(--space-2); border: 1.5px solid var(--rule-strong); border-block-width: 0.5rem; background: var(--surface-sunken); max-inline-size: 22rem; }
.pd-hw-rack__u { display: grid; place-items: center; font: 400 0.75rem/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-subtle); border-block-end: var(--hairline) solid var(--rule); }
.pd-hw-rack__u--r { grid-column: 3; }
.pd-hw-rack__slot { grid-column: 2; border-block-end: var(--hairline) dashed var(--rule); }
.pd-hw-rack__dev { grid-column: 2; position: relative; z-index: 1; display: flex; align-items: center; gap: var(--space-2); min-block-size: 0; margin: 1px 0; padding: 0 var(--space-2); font: 500 0.75rem/1 var(--font-mono); letter-spacing: var(--track-mono); color: var(--text); text-align: start; background: var(--surface); border: 1.5px solid var(--text); border-radius: var(--radius-1); cursor: pointer; overflow: hidden; }
.pd-hw-rack__dev:focus-visible { outline-offset: var(--focus-offset); }
.pd-hw-rack__name { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-hw-rack__h { flex: none; color: var(--text-subtle); }
.pd-hw-rack__led { flex: none; inline-size: 0.4375rem; block-size: 0.4375rem; border: 1px solid var(--text-muted); border-radius: var(--radius-pill); }
.pd-hw-rack__dev:where([aria-pressed="true"]) { box-shadow: inset 0 0 0 1px var(--text); }
.pd-hw-rack__dev:where([aria-pressed="true"]) .pd-hw-rack__led { background: var(--bindu); border-color: var(--bindu-rim); }
/* Kinds: outline and texture, not hue */
.pd-hw-rack__dev--network { border-width: var(--hairline); }
.pd-hw-rack__dev--compute { background-image: repeating-linear-gradient(90deg, transparent 0 0.375rem, var(--rule) 0.375rem 0.4375rem); background-position: right; background-size: 40% 100%; background-repeat: no-repeat; }
.pd-hw-rack__dev--storage { background-image: repeating-linear-gradient(0deg, var(--surface) 0 0.5rem, var(--border-control) 0.5rem 0.5625rem); background-size: 45% 100%; background-position: right; background-repeat: no-repeat; }
.pd-hw-rack__dev--power { background-image: repeating-linear-gradient(135deg, transparent 0 0.3125rem, var(--border-control) 0.3125rem 0.375rem); }
.pd-hw-rack__dev--blank { border: var(--hairline) dashed var(--text-subtle); color: var(--text-subtle); cursor: default; }
.pd-hw-rack__dev--blank .pd-hw-rack__led { visibility: hidden; }
.pd-hw-rack__dev--shelf { border-block-end-width: 3px; }
.pd-hw-rack__dev :where(.pd-hw-rack__name, .pd-hw-rack__h) { background: var(--surface); padding-inline: 0.15em; }
.pd-hw-rack__sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr)); gap: 0; margin: 0; border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-hw-rack__sum > div { padding: var(--space-3) var(--space-3) var(--space-3) 0; border-block-end: var(--hairline) solid var(--rule); }
.pd-hw-rack__sum dt { font: var(--font-meta); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-subtle); }
.pd-hw-rack__sum dd { margin: var(--space-1) 0 0; font: 500 var(--fs-title)/1.1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text); }
.pd-hw-rack__side { display: grid; gap: var(--space-5); align-content: start; }
.pd-hw-rack__key { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font: var(--font-caption); color: var(--text-muted); }
.pd-hw-rack__key li { display: flex; align-items: center; gap: var(--space-3); }
.pd-hw-rack__key .pd-hw-rack__dev { inline-size: 2.5rem; block-size: 1.125rem; margin: 0; padding: 0; cursor: default; flex: none; }

/* ══ BuildLog ══════════════════════════════════════════════════════════════ */
.pd-hw-log { display: grid; gap: var(--space-5); }
.pd-hw-log__sum { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); padding-block: var(--space-3); border-block: var(--hairline) solid var(--rule-strong); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); }
.pd-hw-log__sum b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.pd-hw-log__list { display: grid; margin: 0; padding: 0; list-style: none; }
.pd-hw-log__entry { position: relative; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0 var(--space-4); padding-block-end: var(--space-7); }
.pd-hw-log__entry::before { content: ""; position: absolute; inset-block: 1.75rem 0; inset-inline-start: 0.75rem; border-inline-start: var(--hairline) dashed var(--border-control); }
.pd-hw-log__entry:last-child::before { display: none; }
/* Step badge (Utilities › Numerals, role 2): the .pd-dg__step-n recipe; the latest entry is filled. */
.pd-hw-log__badge { position: relative; display: inline-grid; place-items: center; box-sizing: border-box; min-inline-size: 1.7em; block-size: 1.7em; padding-inline: .3em; border: var(--hairline) solid currentColor; font: 600 var(--fs-meta)/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text); background: var(--surface); }
.pd-hw-log__badge:where(.is-latest) { background: var(--text); color: var(--surface); border-color: var(--text); }
.pd-hw-log__badge:where(.is-latest)::after { content: ""; position: absolute; inset-block-start: -0.25rem; inset-inline-end: -0.25rem; inline-size: 0.5rem; block-size: 0.5rem; border-radius: var(--radius-pill); background: var(--bindu); box-shadow: 0 0 0 1px var(--bindu-rim), 0 0 0 2.5px var(--surface); }
.pd-hw-log__body { display: grid; gap: var(--space-4); min-inline-size: 0; }
.pd-hw-log__head { display: grid; gap: var(--space-1); }
.pd-hw-log__date { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-hw-log__title { margin: 0; font: var(--font-title); color: var(--text); text-wrap: balance; }
.pd-hw-log__photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 13rem)); gap: var(--space-3); margin: 0; }
.pd-hw-log__photos figcaption { margin-block-start: var(--space-1); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-hw-log__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--space-4) var(--gutter); }
.pd-hw-log__h { margin: 0 0 var(--space-2); font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
.pd-hw-log__parts { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin: 0; padding: 0; list-style: none; }
.pd-hw-log__parts li { padding: 0.15em 0.5em; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text); border: var(--hairline) solid var(--border-control); }
.pd-hw-log__issues { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.pd-hw-log__issue { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: var(--space-1) var(--space-2); font: var(--font-caption); color: var(--text); }
.pd-hw-log__issue :where(b) { font: 600 0.75rem/1.6 var(--font-mono); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-subtle); }
.pd-hw-log__issue :where(b.is-open) { color: var(--danger); }
.pd-hw-log__next { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; font: var(--font-caption); }
.pd-hw-log__next li { display: grid; grid-template-columns: 1.25rem 1fr; gap: var(--space-2); }
.pd-hw-log__next li::before { content: ""; inline-size: 0.75rem; block-size: 0.75rem; margin-block-start: 0.2em; border: var(--hairline) solid var(--text); }
.pd-hw-log__next li::before { content: "" / "To do: "; }
.pd-hw-log__next li:where(.is-done)::before { content: "" / "Done: "; background: linear-gradient(135deg, transparent 45%, var(--text) 45% 55%, transparent 55%), linear-gradient(45deg, transparent 45%, var(--text) 45% 55%, transparent 55%); }
.pd-hw-log__next li:where(.is-done) { color: var(--text-subtle); text-decoration: line-through var(--hairline); }
.pd-hw-log__readings { margin: 0; font: var(--font-meta); }

/* ── Reduced motion · forced colours · print ── */
@media (prefers-reduced-motion: reduce) {
  .pd-hw-edge, .pd-hw-wire__path, .pd-hw-layer__g, .pd-hw-net__overlay { transition: none; }
}
@media (forced-colors: active) {
  .pd-hw-box, .pd-hw-edge, .pd-hw-zone, .pd-hw-wire__path, .pd-hw-ink, .pd-hw-wire__pad { stroke: CanvasText; }
  .pd-hw-t, .pd-hw-tag text, .pd-hw-net__ip, .pd-hw-net__zone-t, .pd-hw-sym__pin { fill: CanvasText; }
  .pd-hw-bindu, .pd-hw-arrow, .pd-hw-fill { fill: Highlight; }
  .pd-hw-pill, .pd-hw-rack__dev { border-color: CanvasText; forced-color-adjust: none; color: CanvasText; background: Canvas; }
  .pd-hw-toggle[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
}
@media print {
  .pd-hw__canvas { overflow: visible; }
  .pd-hw__svg { min-inline-size: 0; }
  .pd-hw-bar, .pd-hw-tip { display: none; }
  .pd-hw__alt { display: none; }
}
}

/* ── part: logo.css ── */
/* LogoUsage — logo usage guide: the portrait mark is the logo, beside the name "Pandox" (no wordmark); Haṃsa is the footer motto only. Prefix pd-logo. */
@layer components.site {
  .pd-logo { display: grid; gap: var(--space-8); color: var(--text); }
  .pd-logo__sec { display: grid; gap: var(--space-5); padding-block-start: var(--space-4); border-block-start: var(--hairline) solid var(--rule-strong); }
  .pd-logo__head { display: grid; grid-template-columns: 3.5em 1fr; gap: var(--space-4); align-items: baseline; }
  .pd-logo__num { font: var(--font-numeral); letter-spacing: var(--track-mono); color: var(--text-subtle); }
  .pd-logo__title { margin: 0; font: var(--font-headline); }
  .pd-logo__lede { grid-column: 2; margin: 0; max-inline-size: var(--measure); font: var(--font-body-s); color: var(--text-muted); }
  .pd-logo__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--gutter); }
  .pd-logo__grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
  .pd-logo__grid--6 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
  .pd-logo__tile { display: grid; gap: var(--space-3); margin: 0; min-inline-size: 0; }
  .pd-logo__stage { display: grid; place-items: center; min-block-size: 11rem; padding: var(--space-5); overflow: hidden; background: var(--surface-sunken); border: var(--hairline) solid var(--rule); color: var(--text); }
  .pd-logo__stage--tall { min-block-size: 15rem; }
  .pd-logo__stage { container-type: inline-size; } /* specimens scale to the stage instead of clipping */
  .pd-logo__fit { font-size: min(var(--pd-logo-fit, 1.1rem), 7cqi); } /* the widest specimen (horizontal + name line) */
  .pd-logo__stage .pd-logo__sub { white-space: normal; } /* the fixed-size name line wraps in a narrow stage rather than clipping */
  .pd-logo__cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); font: var(--font-caption); color: var(--text-muted); }
  .pd-logo__cap b { font-weight: 600; color: var(--text); }
  .pd-logo__cap code, .pd-logo__meta { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }

  .pd-logo__motto { margin: 0; max-inline-size: 40em; font: var(--font-caption); color: var(--text-muted); text-wrap: pretty; } /* the Haṃsa line: plain muted text, bottom of pages/documents only */
  .pd-logo__stage .pd-logo__motto { max-inline-size: 22em; text-align: center; }
  .pd-logo__motto::before { content: ""; display: inline-block; inline-size: .4em; block-size: .4em; margin-inline-end: .6em; border-radius: var(--radius-pill); background: var(--bindu); box-shadow: 0 0 0 1px var(--bindu-rim); vertical-align: .1em; }

  /* the portrait mark at usage sizes */
  .pd-logo .pd-mark { inline-size: 1em; block-size: 1em; }
  .pd-logo__mark-xl { font-size: 7rem; }
  .pd-logo__mark-l  { font-size: 4.5rem; }

  /* lockups */
  .pd-logo__lock { display: inline-flex; align-items: center; gap: .42em; color: inherit; text-decoration: none; }
  .pd-logo__lock .pd-mark { font-size: 2.6em; inline-size: 1em; block-size: 1em; } /* self-contained: overrides the core .pd-mark 2.4em box */
  /* size steps for consumers (the lockup scales with font-size: name = 2em, portrait = 2.6em) */
  .pd-logo__lock--s { font-size: .625rem; min-block-size: var(--target-min); } /* masthead, mobile menu, hero top bar, 404 — name 1.25rem */
  .pd-logo__lock--m { font-size: .8125rem; } /* footer — with the name line */
  .pd-logo__lock--print { font-size: 1.2em; } /* paper: em of the sheet */
  .pd-logo__lock--print .pd-logo__sub { font-size: .38em; }
  .pd-logo__lock-text { display: grid; gap: .25em; }
  .pd-logo__word { font-family: var(--font-display); font-weight: 500; font-size: 2em; line-height: .9; letter-spacing: -.01em; white-space: nowrap; }
  .pd-logo__word i { display: inline-block; inline-size: .17em; block-size: .17em; margin-inline: .06em; border-radius: var(--radius-pill); background: var(--bindu); box-shadow: 0 0 0 1px var(--bindu-rim); vertical-align: .22em; }
  .pd-logo__sub { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); white-space: nowrap; }
  .pd-logo__ground--jade .pd-logo__sub, .pd-logo__ground--sky .pd-logo__sub, .pd-logo__og .pd-logo__sub { color: inherit; opacity: var(--opacity-muted, .72); }
  .pd-logo__lock--stack { flex-direction: column; text-align: center; gap: .35em; }
  .pd-logo__lock--stack .pd-mark { font-size: 3.6em; }
  .pd-logo__lock--stack .pd-logo__lock-text { justify-items: center; }

  /* grounds — each stage pins one theme */
  .pd-logo__ground { display: grid; place-items: center; min-block-size: 9rem; padding: var(--space-5); background: var(--surface); color: var(--text); border: var(--hairline) solid var(--rule); overflow: hidden; }
  .pd-logo__ground--jade { background: var(--jade-700); color: var(--on-jade); border-color: transparent; }
  .pd-logo__ground--sky { background: var(--sky-900); color: var(--on-sky); border-color: transparent; }
  .pd-logo__ground--sky .pd-logo__word i { background: var(--bindu-on-sky); box-shadow: 0 0 0 1px var(--bindu-rim-on-sky); }
  .pd-logo__ground--saffron { background: var(--saffron-100); }

  /* clear space construction */
  .pd-logo__build { position: relative; display: inline-grid; place-items: center; padding: .25em; font-size: 8rem; outline: 1px dashed var(--border-control); outline-offset: 0; }
  .pd-logo__build::before { content: ""; position: absolute; inset: .25em; border: 1px solid var(--rule); pointer-events: none; }
  .pd-logo__build-x { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: .25em; block-size: .25em; background: color-mix(in oklab, var(--accent-fill) 22%, transparent); }
  .pd-logo__sizes { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-5) var(--space-6); }
  .pd-logo__sizes figure { margin: 0; display: grid; gap: var(--space-2); justify-items: center; }

  /* applications */
  .pd-logo__app-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); inline-size: 100%; padding: .9em 1.1em; background: var(--surface); border-block-end: var(--hairline) solid var(--rule); font-size: .8rem; }
  .pd-logo__app-bar nav { display: flex; flex-wrap: wrap; gap: .4em 1.2em; font: var(--font-label); color: var(--text-muted); }
  .pd-logo__icon { display: grid; place-items: center; inline-size: 4.5rem; block-size: 4.5rem; background: var(--jade-700); color: var(--on-jade); border-radius: var(--radius-2); font-size: 3.4rem; }
  .pd-logo__icon--ink { background: var(--ink-900); color: var(--paper-000); }
  .pd-logo__tab { display: inline-flex; align-items: center; gap: .5em; padding: .45em .8em; background: var(--surface); border: var(--hairline) solid var(--rule); border-block-end: 0; font: var(--font-caption); font-size: .8rem; }
  .pd-logo__tab .pd-mark { font-size: 16px; }
  .pd-logo__og { display: grid; align-content: space-between; inline-size: 100%; aspect-ratio: 1200 / 630; padding: 1.1em; background: var(--sky-900); color: var(--on-sky); font-size: .8rem; }
  .pd-logo__og-title { font-family: var(--font-display); font-size: 1.6em; line-height: 1.05; }

  /* don'ts */
  .pd-logo__dont .pd-logo__stage { position: relative; }
  .pd-logo__dont .pd-logo__stage::after { content: ""; position: absolute; inset: var(--space-3); border: 1px solid var(--danger); background: linear-gradient(to top right, transparent calc(50% - .5px), var(--danger) 50%, transparent calc(50% + .5px)); opacity: .55; pointer-events: none; }
  .pd-logo__dont .pd-logo__cap b { color: var(--danger); }
  .pd-logo__x-stretch { transform: scaleX(1.45); }
  .pd-logo__x-rotate { transform: rotate(-14deg); }
  .pd-logo__x-recolour { color: var(--shakti-500); }
  .pd-logo__x-shadow { filter: drop-shadow(0 6px 6px color-mix(in oklab, var(--ink-900) 55%, transparent)); }
  .pd-logo__x-circle { display: grid; place-items: center; inline-size: 1.4em; block-size: 1.4em; border-radius: var(--radius-pill); border: 2px solid currentColor; }
  .pd-logo__x-title { display: grid; justify-items: center; gap: .4em; }
  .pd-logo__x-title small { font: var(--font-meta); color: var(--text-muted); }

  @media (forced-colors: active) {
    .pd-logo .pd-mark, .pd-logo__lock .pd-mark { fill: CanvasText; }
    .pd-logo__word i { forced-color-adjust: none; background: CanvasText; box-shadow: none; }
  }
}

/* ── part: moredgm.css ── */
/* ── PART: moredgm ───────────────────────────────────────────────────────────
   Pandox DS v2 · package "moredgm" · more diagrams, built on the Diagram kit shell (.pd-dg head, frame,
   caption, text alternative, tables) and its SVG text classes (.pd-dg__t, __ts, __tz, __tk, __tg).
   .pd-dx           modifier on .pd-dg: shared drawing parts (halo labels, grid, markers, tooltip, bindu)
   .pd-dx-mm        MindMap          .pd-dx-net   NetworkGraph       .pd-dx-road  Roadmap
   .pd-dx-jr        UserJourney      .pd-dx-wf-*  WireframeKit       .pd-dx-tree  file tree
   .pd-dx-org       hierarchy tree   (Venn, Quadrant, Gantt, ConceptMap use only the shared parts)
   Notation follows SystemLegend: solid = sync / proposition, dashed = async / cross-link, square badges,
   mono labels. Series are told apart by shape, dash, hatch angle and direct labels; the categorical slots
   --pd-dx-c1..c5 come from duo-a, duo-b, jade-700, saffron-700, ink-500 and collapse to ink in Mono/Void
   without losing meaning. Saffron (--bindu) appears once per figure: the chosen / current / lowest point. */
@layer components.site {

/* ══ Shared ════════════════════════════════════════════════════════════════ */
.pd-dx {
  --pd-dx-c1: var(--duo-a); --pd-dx-c2: var(--duo-b); --pd-dx-c3: var(--jade-700); --pd-dx-c4: var(--saffron-700); --pd-dx-c5: var(--ink-500);
}
.pd-dx__s1 { color: var(--pd-dx-c1); } .pd-dx__s2 { color: var(--pd-dx-c2); } .pd-dx__s3 { color: var(--pd-dx-c3); }
.pd-dx__s4 { color: var(--pd-dx-c4); } .pd-dx__s5 { color: var(--pd-dx-c5); }
.pd-dx__frame { position: relative; }
.pd-dx__svg .pd-dx__ts-ink, .pd-dx__svg .pd-dx__tk-ink, .pd-dx__svg .pd-dx__tg-ink { fill: var(--text); }
.pd-dx__svg .pd-dx__tz-ink { fill: var(--text); }
.pd-dx__t-s { font-size: 12.5px; }
/* Label halo: a surface-coloured stroke behind the glyphs so labels read over lines and hatches. */
.pd-dx__halo { paint-order: stroke fill; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.pd-dx__grid { stroke: var(--rule); stroke-width: .75; }
.pd-dx__mid { stroke: var(--rule-strong); stroke-width: 1; stroke-dasharray: 4 3; }
.pd-dx__axis-box { fill: none; stroke: var(--rule-strong); stroke-width: 1; }
.pd-dx__plate-line { stroke: var(--text); stroke-width: 1; }
.pd-dx__chosen { fill: none; stroke: var(--text); stroke-width: 1.25; }
.pd-dx__bindu { fill: var(--bindu); stroke: var(--bindu-rim); stroke-width: 1; }
.pd-dx__bindu-dot { display: inline-block; flex: none; inline-size: .5em; block-size: .5em; margin-inline-end: .5em; border-radius: 50%; background: var(--bindu); box-shadow: 0 0 0 1px var(--bindu-rim); vertical-align: .12em; }
.pd-dx__defs { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
.pd-dx__glyph { overflow: visible; }
.pd-dx__glyph text { fill: var(--text); }
.pd-dx-legend { align-items: center; }
.pd-dx .pd-dg__foot { align-items: center; }

/* Markers: filled in the series colour, outlined in --text so shape reads in every theme. */
.pd-dx__mk { fill: currentColor; stroke: var(--text); stroke-width: 1; }

/* Focusable points: a ring that only appears on hover / focus. */
.pd-dx__pt { cursor: default; outline: none; }
.pd-dx__ring { fill: transparent; stroke: none; }
.pd-dx__pt:hover .pd-dx__ring { stroke: var(--text-subtle); stroke-width: 1; }
.pd-dx__pt:focus-visible .pd-dx__ring, .pd-dx__net-node:focus-visible .pd-dx__ring { stroke: var(--focus); stroke-width: 2; }
.pd-dx__pt:focus-visible > rect.pd-dx__gt-bar { stroke: var(--focus); stroke-width: 2; }
.pd-dx__pt:focus-visible > .pd-dx__gt-ms { stroke: var(--focus); stroke-width: 2; }

/* Tooltip: placed by the points script above the target (or below near the top edge). */
.pd-dx__tip { /* surface recipe: .pd-ch-tip (charts.css) */
  inline-size: max-content; display: grid; gap: .15em;
  translate: -50% calc(-100% - .6em);
}
.pd-dx__tip.is-below { translate: -50% .6em; }
.pd-dx__tip[hidden] { display: none; }
.pd-dx__tip b { font: 500 var(--fs-label)/1.3 var(--font-sans); letter-spacing: 0; }
.pd-dx__tip span { color: var(--text-muted); }

/* Hatches (Venn): pattern content inherits colour from the pattern element. */
.pd-dx__hatch line { stroke: currentColor; stroke-width: 1.1; }
.pd-dx__hatch circle { fill: currentColor; }
.pd-dx__hatch { opacity: .6; }
.pd-dx__set { stroke: none; }
.pd-dx__set-line { stroke: var(--text); stroke-width: 1.5; }
.pd-dx__set-line--b { stroke-dasharray: 7 4; }
.pd-dx__set-line--c { stroke-dasharray: 1.5 3.5; stroke-linecap: round; stroke-width: 2; }
/* Region label plate: a translucent surface card so mono labels read over dense hatches (Void, Mono). */
.pd-dx__vplate { fill: var(--surface); opacity: .86; }

/* ══ MindMap ═══════════════════════════════════════════════════════════════ */
.pd-dx__mm-br { fill: none; stroke: var(--text); stroke-width: 1.25; }
.pd-dx__mm-lf { fill: none; stroke: var(--text-subtle); stroke-width: .75; }
.pd-dx-mm__outline { display: none; }
.pd-dx-mm__root { display: flex; align-items: center; margin: 0 0 var(--space-3); padding: var(--space-3) var(--space-4); border: 2px solid var(--text); font: 600 var(--fs-label)/1.3 var(--font-sans); }
.pd-dx-mm__outline > ul { display: grid; gap: var(--space-3); margin: 0; padding: 0 0 0 var(--space-4); list-style: none; border-inline-start: 1.25px solid var(--text); }
.pd-dx-mm__outline > ul > li { position: relative; font: 500 var(--fs-label)/1.3 var(--font-sans); }
.pd-dx-mm__outline > ul > li::before { content: ""; position: absolute; inset-inline-start: calc(-1 * var(--space-4)); inset-block-start: .65em; inline-size: calc(var(--space-4) - .35em); border-block-start: 1.25px solid var(--text); }
.pd-dx-mm__outline ul ul { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: var(--space-1) 0 0; padding: 0; list-style: none; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); }
@container pd-dg (inline-size < 36em) {
  .pd-dx-mm .pd-dx__frame { display: none; }
  .pd-dx-mm .pd-dx-mm__outline { display: block; }
}

/* ══ NetworkGraph ══════════════════════════════════════════════════════════ */
.pd-dx-net { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr) 14rem; align-items: start; }
.pd-dx__net-e { stroke: var(--text); stroke-linecap: round; transition: opacity var(--dur-2) var(--ease-standard); }
.pd-dx__net-e--1 { stroke-width: 1; stroke: var(--text-subtle); }
.pd-dx__net-e--2 { stroke-width: 2.25; }
.pd-dx__net-e--3 { stroke-width: 4.5; }
.pd-dx__net-head { fill: var(--text); }
.pd-dx__net-head--s { fill: var(--text-subtle); }
.pd-dx__net-node { cursor: pointer; outline: none; transition: opacity var(--dur-2) var(--ease-standard); }
.pd-dx__net-node .pd-dg__shape { stroke-width: 1.5; }
.pd-dx__svg .pd-dx__net-deg { fill: var(--text); font-weight: 600; }
.pd-dx__net-w { transition: opacity var(--dur-2) var(--ease-standard); }
:where(.pd-dx__svg.is-focusing) .pd-dx__net-e:not(.is-on), :where(.pd-dx__svg.is-focusing) .pd-dx__net-w:not(.is-on), :where(.pd-dx__svg.is-focusing) .pd-dx__net-node:not(.is-near) { opacity: .2; }
.pd-dx__net-node.is-sel .pd-dg__shape { fill: var(--bindu); stroke: var(--bindu-rim); }
.pd-dx__svg :where(.pd-dx__net-node.is-sel) .pd-dx__net-deg { fill: var(--on-saffron); }
.pd-dx__net-node:where(.is-near:not(.is-sel)) .pd-dg__shape { stroke-width: var(--dg-heavy); }
.pd-dx-net__panel { display: grid; gap: var(--space-2); padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-dx-net__panel p { margin: 0; }
.pd-dx-net__k { font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
.pd-dx-net__name { font: var(--font-title); }
.pd-dx-net__meta { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); }
.pd-dx-net__list { display: grid; margin: 0; padding: 0; list-style: none; font: var(--font-meta); letter-spacing: var(--track-mono); }
.pd-dx-net__list li { padding-block: var(--space-2); border-block-end: var(--hairline) solid var(--rule); }
@container pd-dg (inline-size < 48em) { .pd-dx-net { grid-template-columns: minmax(0, 1fr); } }

/* ══ GanttChart ════════════════════════════════════════════════════════════ */
.pd-dx__gt-col { fill: none; stroke: none; }
.pd-dx__gt-col--alt { fill: var(--surface-sunken); }
.pd-dx__gt-bar { fill: var(--surface); stroke: var(--text); stroke-width: 1; }
.pd-dx__gt-done { fill: var(--text); stroke: none; }
.pd-dx__gt-ms { fill: var(--text); stroke: var(--text); stroke-width: 1; }
.pd-dx__gt-dep { stroke-width: 1; stroke: var(--text-muted); }
.pd-dx__today { stroke: var(--text); stroke-width: 1.25; stroke-dasharray: 3 3; }

/* ══ Roadmap ═══════════════════════════════════════════════════════════════ */
.pd-dx-road { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--space-5) var(--space-6); }
.pd-dx-road__col { display: grid; align-content: start; gap: var(--space-3); min-inline-size: 0; }
.pd-dx-road__head { display: grid; gap: var(--space-1); padding-block: var(--space-2); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-dx-road__col--next .pd-dx-road__head { border-block-start-style: dashed; border-block-start-width: 1.5px; }
.pd-dx-road__col--later .pd-dx-road__head { border-block-start: 1.5px dotted var(--text); }
.pd-dx-road__name { display: flex; align-items: center; margin: 0; font: 500 var(--fs-title)/1.15 var(--font-text); }
.pd-dx-road__when { margin: 0; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); }
.pd-dx-road__list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.pd-dx-road__item { display: grid; gap: var(--space-2); padding: var(--space-4); background: var(--surface); border: var(--hairline) solid var(--rule-strong); }
.pd-dx-road__col--later .pd-dx-road__item { border-style: dashed; border-color: var(--border-control); }
.pd-dx-road__item p, .pd-dx-road__title { margin: 0; }
.pd-dx-road__status { display: flex; align-items: center; gap: .5em; font: 600 var(--fs-meta)/1 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text); }
.pd-dx-road__glyph { font-size: 1.05em; inline-size: 1em; text-align: center; letter-spacing: 0; }
.pd-dx-road__item--x .pd-dx-road__status { color: var(--danger); }
.pd-dx-road__item--p .pd-dx-road__status, .pd-dx-road__item--e .pd-dx-road__status, .pd-dx-road__item--i .pd-dx-road__status { color: var(--text-muted); }
.pd-dx-road__title { margin: 0; font: 500 var(--fs-label)/1.3 var(--font-sans); text-wrap: balance; }
.pd-dx-road__desc { font: var(--font-caption); color: var(--text-muted); }
.pd-dx-road__key { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: 0; }
.pd-dx-road__key div { display: flex; gap: var(--space-2); align-items: baseline; }
.pd-dx-road__key dt { font: 600 var(--fs-meta)/1.3 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text); }
.pd-dx-road__key dd { margin: 0; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); }

/* ══ UserJourney ═══════════════════════════════════════════════════════════ */
.pd-dx-jr__frame { padding: 0; }
.pd-dx-jr { display: grid; min-inline-size: calc(var(--jr-lane) + 5 * var(--jr-col)); }
.pd-dx-jr__row { display: grid; grid-template-columns: var(--jr-lane) repeat(5, minmax(var(--jr-col), 1fr)); border-block-end: var(--hairline) solid var(--rule); }
.pd-dx-jr__row:last-child { border-block-end: 0; }
.pd-dx-jr__row--head { border-block-end: var(--hairline) solid var(--rule-strong); }
.pd-dx-jr__corner, .pd-dx-jr__lane { position: sticky; inset-inline-start: 0; z-index: 1; display: grid; align-content: start; gap: var(--space-1); padding: var(--space-3); background: var(--surface); border-inline-end: var(--hairline) solid var(--rule-strong); font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
.pd-dx-jr__lane .pd-meta { text-transform: none; letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-dx-jr__stage { display: grid; gap: .2em; padding: var(--space-3); border-inline-start: var(--hairline) solid var(--rule); font: var(--font-label); }
.pd-dx-jr__stage b { font-weight: 500; }
/* Step badge (Utilities › Numerals, role 2): the .pd-dg__step-n recipe. */
.pd-dx-jr__n { display: inline-grid; place-items: center; box-sizing: border-box; inline-size: max-content; min-inline-size: 1.7em; block-size: 1.7em; padding-inline: .3em; border: var(--hairline) solid currentColor; color: var(--text); font: 600 var(--fs-meta)/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.pd-dx-jr__cell { padding: var(--space-3); border-inline-start: var(--hairline) solid var(--rule); font: var(--font-caption); color: var(--text); text-wrap: pretty; }
.pd-dx-jr__cell--thought { font-style: italic; color: var(--text-muted); }
.pd-dx-jr__cell--pain:not(.is-empty)::before { content: "! "; font: 700 1em/1 var(--font-mono); }
.pd-dx-jr__cell--opp:not(.is-empty)::before { content: "→ "; font: 600 1em/1 var(--font-mono); }
.pd-dx-jr__none { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-dx-jr__emo { grid-column: 2 / -1; position: relative; min-block-size: 150px; }
.pd-dx-jr__svg { display: block; overflow: visible; }
/* Points and labels are HTML at the same % as the stage columns, so they stay aligned at any width. */
.pd-dx-jr__tick { position: absolute; inset-inline-start: 4px; inset-block-start: var(--y); translate: 0 -50%; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-dx-jr__pt { position: absolute; inset-inline-start: var(--x); inset-block-start: var(--y); inline-size: 24px; block-size: 24px; translate: -50% -50%; }
.pd-dx-jr__mk { display: block; overflow: visible; }
.pd-dx-jr__pl { position: absolute; inset-inline-start: 50%; translate: -50% 0; white-space: nowrap; padding-inline: .3em; background: var(--surface); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text); }
.pd-dx-jr__pl--above { inset-block-end: calc(100% - 2px); }
.pd-dx-jr__pl--below { inset-block-start: calc(100% - 2px); }
.pd-dx__emo { fill: none; stroke: var(--text); stroke-width: 2; stroke-linejoin: round; }
.pd-dx__emo-pt { fill: var(--surface); stroke: var(--text); stroke-width: 1.5; }
.pd-dx-jr__persona { margin: 0; font: var(--font-caption); color: var(--text); }
.pd-dx-jr__persona .pd-dg__tk { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); margin-inline-end: .4em; }
.pd-dx-jr__persona .pd-dg__tk + .pd-dg__tk, .pd-dx-jr__persona .pd-dg__tk:not(:first-child) { margin-inline-start: .6em; }

/* ══ WireframeKit ══════════════════════════════════════════════════════════
   Greyscale only: --wf-line (strokes), --wf-fill (blocks), --wf-ink (labels). No accent, no saffron. */
.pd-dx-wf { --wf-line: var(--text-subtle); --wf-fill: var(--surface-sunken); --wf-ink: var(--text-muted); --wf-bar: color-mix(in srgb, var(--text-subtle) 45%, transparent); color: var(--wf-ink); }
.pd-dx-wf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr)); gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.pd-dx-wf-spec { display: grid; grid-template-rows: 1fr auto; gap: var(--space-2); }
.pd-dx-wf-spec__stage { display: grid; align-content: center; min-block-size: 9.5rem; padding: var(--space-4); border: var(--hairline) dashed var(--rule-strong); }
.pd-dx-wf-spec__name { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); margin: 0; font: var(--font-label); color: var(--text); }
.pd-dx-wf-spec__name b { font-weight: 500; }
.pd-dx-wf-spec__name code { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-dx-wf-line { display: block; inline-size: var(--w, 100%); block-size: .45em; background: var(--wf-bar); border-radius: 0; }
.pd-dx-wf-line--meta { block-size: .35em; opacity: .7; }
.pd-dx-wf-line--head { block-size: .7em; background: var(--wf-line); }
.pd-dx-wf-line--title { block-size: 1.1em; background: var(--wf-line); }
.pd-dx-wf-stack { display: grid; gap: .5em; min-inline-size: 0; }
.pd-dx-wf-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pd-dx-wf-box { display: grid; place-items: center; border: var(--hairline) solid var(--wf-line); background: var(--wf-fill); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--wf-ink); }
.pd-dx-wf-box--logo { inline-size: 3.2em; block-size: 1.9em; }
.pd-dx-wf-box--thumb { inline-size: 2.4em; block-size: 2.4em; }
.pd-dx-wf-img {
  position: relative; display: grid; place-items: center; inline-size: 100%; border: var(--hairline) solid var(--wf-line);
  background:
    linear-gradient(to top right, transparent calc(50% - .5px), var(--wf-line) 50%, transparent calc(50% + .5px)),
    linear-gradient(to bottom right, transparent calc(50% - .5px), var(--wf-line) 50%, transparent calc(50% + .5px)),
    var(--wf-fill);
}
.pd-dx-wf-img--16x9 { aspect-ratio: 16 / 9; } .pd-dx-wf-img--4x3 { aspect-ratio: 4 / 3; }
.pd-dx-wf-img > span { padding: .15em .45em; background: var(--surface); border: var(--hairline) solid var(--wf-line); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--wf-ink); }
.pd-dx-wf-btn { display: inline-grid; place-items: center; inline-size: max-content; min-block-size: 2.2em; padding-inline: 1em; border: 1px solid var(--wf-line); background: var(--surface); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text); }
.pd-dx-wf-btn--primary { background: var(--wf-ink); border-color: var(--wf-ink); color: var(--surface); }
.pd-dx-wf-btn--text { border-color: transparent; text-decoration: underline; text-underline-offset: .2em; }
.pd-dx-wf-btn--s { min-block-size: 1.9em; padding-inline: .7em; }
.pd-dx-wf-browser { display: grid; border: 1px solid var(--wf-line); background: var(--surface); min-inline-size: 0; }
.pd-dx-wf-browser__bar { display: flex; align-items: center; gap: var(--space-3); padding: .45em .6em; border-block-end: var(--hairline) solid var(--wf-line); background: var(--wf-fill); }
.pd-dx-wf-browser__dots { display: flex; gap: .3em; }
.pd-dx-wf-browser__dots i { inline-size: .5em; block-size: .5em; border: 1px solid var(--wf-line); border-radius: 50%; }
.pd-dx-wf-browser__url { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: .15em .6em; border: var(--hairline) solid var(--wf-line); background: var(--surface); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--wf-ink); }
.pd-dx-wf-browser__body { display: grid; gap: .6em; padding: var(--space-4); }
.pd-dx-wf-nav { display: flex; align-items: center; gap: var(--space-4); padding: .5em .6em; border: var(--hairline) solid var(--wf-line); }
.pd-dx-wf-nav__links { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 3em)); gap: .8em; justify-content: end; }
.pd-dx-wf-card { display: grid; gap: .55em; padding: .7em; border: var(--hairline) solid var(--wf-line); background: var(--surface); }
.pd-dx-wf-card--mini { padding: .6em; }
.pd-dx-wf-list { display: grid; margin: 0; padding: 0; list-style: none; border-block-start: var(--hairline) solid var(--wf-line); }
.pd-dx-wf-list li { display: grid; grid-template-columns: auto 1fr; gap: .7em; align-items: center; padding-block: .55em; border-block-end: var(--hairline) solid var(--wf-line); }
.pd-dx-wf-form { display: grid; gap: .35em; }
.pd-dx-wf-label { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--wf-ink); }
.pd-dx-wf-input { display: block; block-size: 1.9em; border: 1px solid var(--wf-line); background: var(--surface); margin-block-end: .3em; }
.pd-dx-wf-input--area { block-size: 3.6em; }
.pd-dx-wf-form .pd-dx-wf-btn { margin-block-start: .2em; }
/* Annotated screen */
.pd-dx-wf-screen { max-inline-size: 56rem; }
.pd-dx-wf-page { gap: var(--space-5); padding: var(--space-5); }
.pd-dx-wf-head { display: grid; gap: .6em; max-inline-size: 36rem; }
.pd-dx-wf-cols { display: grid; grid-template-columns: minmax(0, 1fr) 13rem; gap: var(--space-6); align-items: start; }
.pd-dx-wf-cols > .pd-dx-wf-stack .pd-dx-wf-img { margin-block: .6em; }
.pd-dx-wf-side { display: grid; gap: .55em; padding-inline-start: var(--space-4); border-inline-start: var(--hairline) solid var(--wf-line); }
.pd-dx-wf-side .pd-dx-wf-label:not(:first-of-type) { margin-block-start: .6em; }
.pd-dx-wf-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4); border: var(--hairline) dashed var(--wf-line); }
.pd-dx-wf-cta > .pd-dx-wf-stack { flex: 1 1 14rem; }
.pd-dx-wf-anno { position: relative; }
.pd-dx-wf-pin { position: absolute; z-index: 1; inset-block-start: -.7em; inset-inline-start: -.7em; display: grid; place-items: center; min-inline-size: 1.55em; block-size: 1.55em; background: var(--text); color: var(--surface); font: 600 var(--fs-meta)/1 var(--font-mono); }
@container pd-dg (inline-size < 40em) {
  .pd-dx-wf-cols { grid-template-columns: minmax(0, 1fr); }
  .pd-dx-wf-side { padding-inline-start: 0; padding-block-start: var(--space-4); border-inline-start: 0; border-block-start: var(--hairline) solid var(--wf-line); }
  .pd-dx-wf-page { padding: var(--space-4); }
  .pd-dx-wf-nav__links { grid-template-columns: repeat(2, minmax(0, 2.4em)); }
  .pd-dx-wf-nav__links > :nth-child(n+3) { display: none; }
}

/* ══ TreeDiagram — file tree ═══════════════════════════════════════════════ */
.pd-dx-tree, .pd-dx-tree ul { margin: 0; padding: 0; list-style: none; }
.pd-dx-tree { --tr-ind: 1.35rem; --tr-row: 2rem; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text); }
.pd-dx-tree ul { padding-inline-start: var(--tr-ind); }
.pd-dx-tree ul > li { position: relative; }
/* Elbow: vertical from the parent's stem, then across to the row. */
.pd-dx-tree ul > li::before { content: ""; position: absolute; inset-inline-start: calc(-1 * var(--tr-ind) + .55rem); inset-block-start: 0; block-size: calc(var(--tr-row) / 2); inline-size: calc(var(--tr-ind) - .65rem); border-inline-start: 1px solid var(--rule-strong); border-block-end: 1px solid var(--rule-strong); }
.pd-dx-tree ul > li:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: calc(-1 * var(--tr-ind) + .55rem); inset-block: calc(var(--tr-row) / 2) 0; border-inline-start: 1px solid var(--rule-strong); }
.pd-dx-tree [role="treeitem"] { outline: none; }
.pd-dx-tree__row { display: flex; align-items: center; gap: .45em; min-block-size: var(--tr-row); padding-inline-end: var(--space-3); cursor: default; }
.pd-dx-tree :where([aria-expanded]) > .pd-dx-tree__row { cursor: pointer; }
:where(.pd-dx-tree [role="treeitem"]):focus-visible > .pd-dx-tree__row { outline: var(--focus-width) solid var(--focus); outline-offset: calc(-1 * var(--focus-width)); }
.pd-dx-tree__row:hover { background: var(--surface-sunken); }
.pd-dx-tree__tw { position: relative; flex: none; inline-size: 1.1rem; block-size: 1.1rem; display: grid; place-items: center; border: var(--hairline) solid var(--border-control); background: var(--surface); }
.pd-dx-tree__tw::before, .pd-dx-tree__tw::after { content: ""; position: absolute; inline-size: .5rem; border-block-start: 1.25px solid var(--text); }
.pd-dx-tree__tw::after { rotate: 90deg; }
[aria-expanded="true"] > * > .pd-dx-tree__tw::after { display: none; }
.pd-dx-tree__tw--leaf { border-color: transparent; background: none; }
.pd-dx-tree__tw--leaf::before, .pd-dx-tree__tw--leaf::after { display: none; }
.pd-dx-tree__ic { flex: none; inline-size: 1rem; block-size: 1rem; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linejoin: round; color: var(--text-muted); }
:where(.pd-dx-tree [aria-expanded] > .pd-dx-tree__row) .pd-dx-tree__ic { fill: var(--surface-sunken); }
.pd-dx-tree__name { white-space: nowrap; }
:where(.pd-dx-tree [aria-expanded] > .pd-dx-tree__row) .pd-dx-tree__name { font-weight: 600; }
.pd-dx-tree__meta { margin-inline-start: auto; padding-inline-start: var(--space-5); color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-dx-tree__wrap { max-inline-size: 34rem; overflow-x: auto; padding: var(--space-3) var(--space-4); border: var(--hairline) solid var(--rule); background: var(--surface); }
[role="tree"] [role="group"][hidden] { display: none; }
@container pd-dg (inline-size < 30em) { .pd-dx-tree__meta { display: none; } .pd-dx-tree__wrap { padding-inline: var(--space-3); } }

/* ══ TreeDiagram — hierarchy (top-down, then a list under each branch) ════ */
.pd-dx-org { --org-gap: 1.5rem; display: flex; justify-content: center; inline-size: max-content; min-inline-size: 100%; margin: 0; padding: 0; list-style: none; font-family: var(--font-sans); }
.pd-dx-org ul { position: relative; display: flex; justify-content: center; margin: 0; padding: var(--org-gap) 0 0; list-style: none; }
.pd-dx-org li { position: relative; display: flex; flex-direction: column; align-items: center; padding: var(--org-gap) .5rem 0; outline: none; }
.pd-dx-org > li { padding-block-start: 0; }
/* Connectors: each child draws half the bus on both sides plus its own drop. */
.pd-dx-org ul > li::before, .pd-dx-org ul > li::after { content: ""; position: absolute; inset-block-start: 0; inline-size: 50%; block-size: var(--org-gap); border-block-start: 1px solid var(--text); }
.pd-dx-org ul > li::before { inset-inline-end: 50%; }
.pd-dx-org ul > li::after { inset-inline-start: 50%; border-inline-start: 1px solid var(--text); }
.pd-dx-org ul > li:first-child::before, .pd-dx-org ul > li:last-child::after { border-block-start: 0; }
.pd-dx-org ul > li:last-child::before { border-inline-end: 1px solid var(--text); }
.pd-dx-org ul > li:only-child::before { display: none; }
.pd-dx-org ul > li:only-child::after { border-block-start: 0; }
.pd-dx-org ul::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 50%; block-size: var(--org-gap); border-inline-start: 1px solid var(--text); }
.pd-dx-org__node { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: .5em; min-inline-size: 9.5rem; padding: .55em .75em; border: 1.25px solid var(--text); background: var(--surface); text-align: start; cursor: pointer; }
.pd-dx-org__node b { font: 500 var(--fs-label)/1.25 var(--font-sans); }
.pd-dx-org__node .pd-meta { grid-column: 2; }
.pd-dx-org__node .pd-dx-tree__tw { grid-row: span 2; }
.pd-dx-org__node--root { grid-template-columns: auto auto 1fr; border-width: 2.5px; }
.pd-dx-org__node--root .pd-meta { grid-column: 3; }
.pd-dx-org__node--root .pd-dx__bindu-dot { grid-row: span 2; margin: 0; }
:where(.pd-dx-org li[role="treeitem"]):focus-visible > .pd-dx-org__node { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
.pd-dx-org__node:hover { background: var(--surface-sunken); }
/* Leaf lists: under a branch whose children are all leaves, stack them with left elbows. */
.pd-dx-org__li--leafy > ul { flex-direction: column; align-items: stretch; align-self: stretch; padding: 0 0 0 1.1rem; margin-inline-start: 1.15rem; }
.pd-dx-org__li--leafy > ul::before { inset-inline-start: 0; inset-block: 0 auto; block-size: .6rem; }
.pd-dx-org__li--leafy > ul > li { align-items: stretch; padding: .6rem 0 0; }
.pd-dx-org__li--leafy > ul > li::before { inset-inline: -1.1rem auto; inset-block-start: 0; inline-size: 1.1rem; block-size: calc(.6rem + 1.15em); border: 0; border-inline-start: 1px solid var(--rule-strong); border-block-end: 1px solid var(--rule-strong); }
.pd-dx-org__li--leafy > ul > li:not(:last-child)::after { inset-inline: -1.1rem auto; inset-block: 0; inline-size: 0; block-size: auto; border: 0; border-inline-start: 1px solid var(--rule-strong); }
.pd-dx-org__li--leafy > ul > li:last-child::after { display: none; }
.pd-dx-org__li--leafy > ul::before { display: none; }
.pd-dx-org__li--leafy > ul > li:first-child::before { block-size: calc(.6rem + 1.15em); }
.pd-dx-org__li--leafy > ul { border-inline-start: 0; }
.pd-dx-org__node--leaf { min-inline-size: 8rem; border-width: 1px; border-color: var(--rule-strong); cursor: default; grid-template-columns: 1fr; }
.pd-dx-org__node--leaf .pd-meta { grid-column: 1; }

/* ══ ConceptMap ════════════════════════════════════════════════════════════ */
/* Secondary-domain concept (psychology): solid hairline box + a filled corner notch.
   Not dashed: a dashed box means a zone, a dashed line means async (SystemLegend). */
.pd-dx__cm-notch { fill: var(--text); stroke: none; }

/* ══ Motion, forced colours, print ═════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) { .pd-dx__net-e, .pd-dx__net-node, .pd-dx__net-w { transition: none; } }
@media (forced-colors: active) {
  .pd-dx__bindu, .pd-dx__net-node.is-sel .pd-dg__shape { fill: Highlight; stroke: CanvasText; }
  .pd-dx__bindu-dot { background: Highlight; forced-color-adjust: none; }
  .pd-dx__mk, .pd-dx__gt-done, .pd-dx__gt-ms { fill: CanvasText; }
  .pd-dx-wf-line, .pd-dx-wf-pin { forced-color-adjust: none; background: CanvasText; color: Canvas; }
}
@media print {
  .pd-dx__tip, .pd-dx-net__panel { display: none; }
  .pd-dx-jr__frame { overflow: visible; }
  [role="tree"] [role="group"][hidden] { display: block; }
}
}

/* ── part: overlays.css ── */
/* ── PART: overlays ─────────────────────────────────────────────────────────
   Pandox DS v2 · package "overlays" · single authoritative source for:
   .pd-dialog(--palette/--lightbox/--inline/--drawer) .pd-sheet(alias) .pd-sheet-trigger .pd-popover(--glossary)
   .pd-tip .pd-toast .pd-badge .pd-avatar .pd-chips .pd-date .pd-steps .pd-progress(--ring/--page/--loop; alias
   .pd-progress-loop) .pd-spinner .pd-drop .pd-copy .pd-lightbox .pd-cmdk.
   Floating UI lives in the top layer (<dialog>.showModal, [popover]); no z-index ladder except the in-flow toast
   region and the reading bar. One dialect: surface ground, 1px border-control, radius-0 panels, radius-1 controls,
   44px targets, state by shape + tone so Ink and Void read without hue. No saffron by default; one opt-in each.
   Engines: announce.js, layer.js, dialog.js, copy.js, bs.js (+ foundations mark.js, controls roving.js). */
@layer components.overlays {

/* ══ Shared: the close / remove "×" (44px) ═════════════════════════════════ */
.pd-dialog__close, .pd-popover__close, .pd-toast__close, .pd-drop__remove {
  flex: none; display: inline-grid; place-content: center; box-sizing: border-box;
  inline-size: var(--target-min); block-size: var(--target-min); margin: 0; padding: 0;
  color: var(--text-muted); background: none; border: 1px solid transparent; border-radius: var(--radius-1); cursor: pointer;
  transition: color var(--dur-2) var(--ease-standard), background-color var(--dur-2) var(--ease-standard);
}
:where(.pd-dialog__close, .pd-popover__close, .pd-toast__close, .pd-drop__remove) > svg {
  inline-size: var(--icon-m); block-size: var(--icon-m); fill: none; stroke: currentColor; stroke-width: 1.5; pointer-events: none;
}
@media (hover: hover) {
  :where(.pd-dialog__close, .pd-popover__close, .pd-toast__close, .pd-drop__remove):hover { color: var(--text); background: color-mix(in oklab, currentColor var(--state-hover-mix), transparent); }
}
:where(.pd-dialog__close, .pd-popover__close, .pd-toast__close, .pd-drop__remove):active { background: color-mix(in oklab, currentColor var(--state-press-mix), transparent); }

/* ══ Dialog (native <dialog>, top layer) ══════════════════════════════════ */
:where(.pd-dialog, .pd-sheet) {
  --pd-dialog-from: 0 .5rem;
  container-type: inline-size; box-sizing: border-box;
  inline-size: min(36rem, 100% - 2 * var(--space-4)); max-inline-size: none;
  max-block-size: min(44rem, 100dvh - 2 * var(--space-6));
  margin: auto; padding: 0; overflow: hidden;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border-control); border-radius: var(--radius-0);
  font: var(--font-ui); opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out), translate var(--dur-3) var(--ease-out),
    overlay var(--dur-3) allow-discrete, display var(--dur-3) allow-discrete;
}
:where(.pd-dialog, .pd-sheet):where([open], .pd-dialog--inline) { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; opacity: 1; translate: 0 0; }
@starting-style { :where(.pd-dialog, .pd-sheet):where([open]) { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  :where(.pd-dialog, .pd-sheet):where(:not([open])) { translate: var(--pd-dialog-from); }
  @starting-style { :where(.pd-dialog, .pd-sheet):where([open]) { translate: var(--pd-dialog-from); } }
}
:where(.pd-dialog, .pd-sheet)::backdrop {
  background: var(--scrim); opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out), overlay var(--dur-3) allow-discrete, display var(--dur-3) allow-discrete;
}
:where(.pd-dialog, .pd-sheet):where([open])::backdrop { opacity: 1; }
@starting-style { :where(.pd-dialog, .pd-sheet):where([open])::backdrop { opacity: 0; } }
.pd-dialog:where([role="alertdialog"]) { inline-size: min(32rem, 100% - 2 * var(--space-4)); }

.pd-dialog__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding-block: var(--space-3); padding-inline: var(--space-5) var(--space-3);
  border-block-end: 1px solid var(--rule);
}
.pd-dialog__heading { display: grid; gap: var(--space-1); min-inline-size: 0; }
.pd-dialog__title { margin: 0; font: var(--font-title); letter-spacing: var(--track-text); color: var(--text); text-wrap: balance; }
.pd-dialog__body { min-block-size: 0; overflow: auto; overscroll-behavior: contain; padding: var(--space-5); font: var(--font-body-s); color: var(--text); }
.pd-dialog__body > :first-child { margin-block-start: 0; }
.pd-dialog__body > :last-child { margin-block-end: 0; }
.pd-dialog__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-block-start: 1px solid var(--rule); }
.pd-dialog__note { margin-block: 0; margin-inline: 0 auto; font: var(--font-caption); color: var(--text-muted); }
@container (inline-size < 30em) {
  .pd-dialog__head { padding-inline-start: var(--space-4); }
  .pd-dialog__body { padding: var(--space-4); }
  .pd-dialog__foot { flex-direction: column; align-items: stretch; padding-inline: var(--space-4); }
  .pd-dialog__note { margin: 0; }
}

/* Palette: top-weighted, for CommandSearch. */
.pd-dialog--palette { inline-size: min(40rem, 100% - 2 * var(--space-4)); max-block-size: min(36rem, 100dvh - 2 * var(--space-4)); margin-block: 12dvh auto; }
/* Lightbox: the whole viewport, no frame. */
.pd-dialog--lightbox { inline-size: 100%; max-inline-size: 100%; block-size: 100dvh; max-block-size: 100dvh; margin: 0; border: 0; }

/* Drawer (= .pd-sheet alias): from the inline end, or data-edge="block-end" for a bottom sheet. */
:where(.pd-dialog--drawer, .pd-sheet) {
  --pd-dialog-from: 100% 0;
  inline-size: min(28rem, 100%); max-inline-size: 100%; block-size: 100dvh; max-block-size: 100dvh;
  margin-block: 0; margin-inline: auto 0;
  border: 0; border-inline-start: 1px solid var(--rule-strong);
  padding-block: env(safe-area-inset-top) env(safe-area-inset-bottom); padding-inline-end: env(safe-area-inset-right);
}
:where(.pd-dialog--drawer, .pd-sheet):dir(rtl) { --pd-dialog-from: -100% 0; }
:where(.pd-dialog--drawer, .pd-sheet):where([data-edge="block-end"]) {
  --pd-dialog-from: 0 100%;
  inline-size: 100%; block-size: fit-content; max-block-size: 85dvh; margin: auto 0 0;
  border-inline-start: 0; border-block-start: 1px solid var(--rule-strong);
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
}
.pd-dialog__handle { order: -1; display: grid; place-items: center; block-size: var(--space-4); }
/* The handle sits on the open (top) edge whatever its source order; a fourth row keeps body as the 1fr track. */
:where(.pd-dialog, .pd-sheet):where(:has(> .pd-dialog__handle)):where([open], .pd-dialog--inline) { grid-template-rows: auto auto minmax(0, 1fr) auto; }
.pd-dialog__handle::before { content: ""; inline-size: 2.5em; block-size: 3px; border-radius: var(--radius-1); background: var(--border-control); }

/* Inline: the same panel in flow, for static documentation and in-page previews. Last, so it wins. */
.pd-dialog--inline { position: relative; inset: auto; z-index: auto; inline-size: 100%; block-size: auto; max-inline-size: 100%; max-block-size: none; margin: 0; translate: none; }
.pd-dialog--lightbox:where(.pd-dialog--inline) { border: 1px solid var(--rule); }

/* MobileMenu trigger. */
.pd-sheet-trigger {
  display: inline-flex; align-items: center; gap: var(--space-2); box-sizing: border-box;
  min-block-size: var(--control-block); min-inline-size: var(--target-min); padding: 0 var(--space-4);
  font: var(--font-label); color: var(--text); background: transparent; cursor: pointer;
  border: 1px solid var(--border-control); border-radius: var(--radius-1);
  transition: border-color var(--dur-2) var(--ease-standard), background-color var(--dur-2) var(--ease-standard);
}
.pd-sheet-trigger__bars { display: inline-grid; gap: .25em; inline-size: 1.125em; }
.pd-sheet-trigger__bars::before, .pd-sheet-trigger__bars::after { content: ""; block-size: 1.5px; background: currentColor; }
.pd-sheet-trigger__bars::after { inline-size: 70%; }
@media (hover: hover) { .pd-sheet-trigger:hover { border-color: var(--rule-strong); background: color-mix(in oklab, currentColor var(--state-hover-mix), transparent); } }
.pd-sheet-trigger:where(:active, [aria-expanded="true"]) { border-color: var(--rule-strong); background: color-mix(in oklab, currentColor var(--state-press-mix), transparent); }

/* MobileMenu content inside the drawer. */
.pd-sheet__nav { display: grid; gap: var(--space-5); }
.pd-sheet__list { margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var(--rule-strong); }
.pd-sheet__item { border-block-end: 1px solid var(--rule); }
.pd-sheet__link { display: grid; grid-template-columns: 2.5em minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-3); min-block-size: var(--target-min); padding-block: var(--space-2); color: var(--text); text-decoration: none; }
.pd-sheet__link:focus-visible { outline-offset: calc(-1 * var(--focus-width)); }
.pd-sheet__name { font: 500 var(--fs-headline)/1.1 var(--font-display); white-space: nowrap; letter-spacing: var(--track-display); text-decoration: underline 1px transparent; text-underline-offset: .5rem; }
.pd-sheet__arrow { font: var(--font-ui); color: var(--text-subtle); transition: translate var(--dur-2) var(--ease-out); }
@media (hover: hover) {
  .pd-sheet__link:hover .pd-sheet__name { text-decoration-color: currentColor; }
  .pd-sheet__link:hover .pd-sheet__arrow { translate: .25em 0; color: var(--text); }
}
.pd-sheet__link:where([aria-current="page"]) .pd-sheet__name { text-decoration: underline 2px var(--rule-strong); text-underline-offset: .5rem; }
.pd-sheet__link:where([aria-current="page"]) .pd-sheet__name::after { content: ""; display: inline-block; inline-size: .14em; block-size: .14em; margin-inline-start: .12em; border-radius: var(--radius-pill); background: var(--bindu-on-paper); box-shadow: inset 0 0 0 1px var(--saffron-700); }
.pd-sheet__purpose { grid-column: 2 / -1; margin-block-start: calc(-1 * var(--space-1)); font: var(--font-caption); color: var(--text-muted); text-wrap: pretty; }
.pd-sheet__link:where([aria-current="page"]) .pd-sheet__arrow { visibility: hidden; }
.pd-sheet__links { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); margin: 0; padding: 0; list-style: none; }
.pd-sheet__links a { display: inline-flex; align-items: center; min-block-size: var(--target-min); font: 400 var(--fs-title)/1.2 var(--font-text); color: var(--text); text-decoration: underline 1px transparent; text-underline-offset: .3em; }
@media (hover: hover) { .pd-sheet__links a:hover { text-decoration-color: currentColor; } }
.pd-sheet__links a:where([aria-current="page"]) { text-decoration: underline 2px var(--rule-strong); }
.pd-sheet__foot { display: grid; gap: var(--space-4); padding: var(--space-4) var(--space-5) var(--space-5); border-block-start: 1px solid var(--rule-strong); }
.pd-sheet__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.pd-sheet__mail { display: inline-flex; align-items: center; min-block-size: var(--target-min); font: var(--font-label); }
.pd-sheet__where { margin: 0; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
@container (inline-size >= 30em) { .pd-sheet__name { font-size: var(--fs-display-m); line-height: 1; } }

/* ══ Popover ([popover=auto], anchored, light dismiss) ═════════════════════ */
.pd-popover {
  box-sizing: border-box; inline-size: max-content; max-inline-size: min(20rem, 100vw - 2 * var(--space-4));
  margin: 0; inset: auto; padding: var(--space-4) var(--space-5);
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border-control); border-radius: var(--radius-0); box-shadow: var(--shadow-2);
  font: var(--font-ui); text-align: start; opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out), translate var(--dur-3) var(--ease-out),
    overlay var(--dur-3) allow-discrete, display var(--dur-3) allow-discrete;
}
.pd-popover:where(:popover-open, :not([popover])) { opacity: 1; translate: 0 0; }
@starting-style { .pd-popover:where(:popover-open) { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .pd-popover:where([popover]:not(:popover-open)) { translate: 0 -.25rem; }
  @starting-style { .pd-popover:where(:popover-open) { translate: 0 -.25rem; } }
}
@supports (position-area: block-end) {
  .pd-popover:where([popover]) { position-area: block-end span-inline-end; position-try-fallbacks: flip-block, flip-inline; margin-block: var(--space-2); }
  .pd-popover:where([data-side="block-start"]) { position-area: block-start span-inline-end; }
}
.pd-popover:where(:not([popover])) { position: static; display: block; }
.pd-popover__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-block: calc(-1 * var(--space-2)) var(--space-3); margin-inline: 0 calc(-1 * var(--space-3)); padding-block-end: var(--space-1); border-block-end: 1px solid var(--rule); }
.pd-popover__title { margin: 0; font: 600 var(--fs-label)/1.3 var(--font-sans); color: var(--text); }
.pd-popover__body { margin: 0; font: var(--font-ui); color: var(--text-muted); }
.pd-popover__foot { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-4); }
/* Glossary skin: Devanāgarī, IAST, gloss, one link. */
.pd-popover--glossary { display: grid; gap: var(--space-2); inline-size: min(18rem, 100vw - 2 * var(--space-4)); }
.pd-popover--glossary:where([popover]:not(:popover-open)) { display: none; }
.pd-popover__deva { font: 400 var(--fs-title)/1.4 var(--font-deva); color: var(--text); }
.pd-popover__iast { font: var(--font-iast); color: var(--text); }
.pd-popover__gloss { margin: 0; font: var(--font-body-s); color: var(--text-muted); }
.pd-popover__more { justify-self: start; display: inline-flex; align-items: center; min-block-size: var(--target-min); font: var(--font-label); color: var(--link); }
/* The inline term that opens a glossary popover. Inline in prose: the WCAG 2.5.8 inline exception applies. */
.pd-popover__term {
  margin: 0; padding: 0; font: inherit; font-style: italic; color: inherit; background: none; border: 0; cursor: pointer;
  text-decoration: underline dotted 1.5px var(--border-control); text-underline-offset: .22em;
}
@media (hover: hover) { .pd-popover__term:hover { text-decoration-color: var(--rule-strong); } }
.pd-popover__term:where([aria-expanded="true"]) { text-decoration-style: solid; text-decoration-color: var(--rule-strong); }

/* ══ Tooltip (hover/focus text only; [popover=manual] via layer.js) ════════ */
.pd-tip { display: inline-grid; justify-items: center; gap: var(--space-2); vertical-align: bottom; }
.pd-tip__trigger {
  margin: 0; padding: 0; font: inherit; color: inherit; background: none; border: 0; cursor: help;
  text-decoration: underline dotted 1.5px var(--border-control); text-underline-offset: .22em;
}
@media (hover: hover) { .pd-tip__trigger:hover { text-decoration-color: var(--rule-strong); } }
.pd-tip__bubble {
  box-sizing: border-box; inline-size: max-content; max-inline-size: min(16rem, 100vw - 2 * var(--space-4));
  margin: 0; inset: auto; padding: var(--space-2) var(--space-3);
  color: var(--surface); background: var(--text); border: 1px solid transparent; border-radius: var(--radius-1);
  font: var(--font-caption); text-align: start; opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out), overlay var(--dur-2) allow-discrete, display var(--dur-2) allow-discrete;
}
.pd-tip__bubble:where(:popover-open, :not([popover])) { opacity: 1; }
@starting-style { .pd-tip__bubble:where(:popover-open) { opacity: 0; } }
@supports (position-area: block-end) {
  .pd-tip__bubble:where([popover]) { position-area: block-start; position-try-fallbacks: flip-block; margin: var(--space-2); }
}
.pd-tip__bubble:where(:not([popover])) { position: static; display: block; order: -1; }
.pd-tip__bubble kbd { padding: 0 .3em; font: 500 var(--fs-meta)/1.3 var(--font-mono); border: 1px solid currentColor; border-radius: var(--radius-1); }

/* ══ Toast ═════════════════════════════════════════════════════════════════ */
.pd-toast-region {
  position: fixed; inset-inline-start: var(--gutter); inset-block-end: var(--gutter); z-index: var(--z-toast);
  display: grid; gap: var(--space-3); inline-size: min(25rem, 100vw - 2 * var(--gutter));
  margin: 0; padding: 0; list-style: none; pointer-events: none;
}
.pd-toast-region--inline { position: static; inline-size: min(25rem, 100%); }
.pd-toast {
  pointer-events: auto; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--space-3);
  align-items: start; padding-block: var(--space-2) var(--space-3); padding-inline: var(--space-4) var(--space-2);
  color: var(--text); background: var(--surface); border: 1px solid var(--border-control); border-radius: var(--radius-0); box-shadow: var(--shadow-2);
  font: var(--font-ui); transition: opacity var(--dur-3) var(--ease-out), translate var(--dur-3) var(--ease-out);
}
@starting-style { .pd-toast { opacity: 0; } }
.pd-toast:where([data-leaving]) { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  @starting-style { .pd-toast { translate: 0 .5rem; } }
  .pd-toast:where([data-leaving]) { translate: 0 .35rem; }
}
.pd-toast__mark {
  display: inline-grid; place-content: center; box-sizing: border-box; inline-size: 1.125rem; block-size: 1.125rem; margin-block-start: .8rem;
  color: var(--text-muted); border: 1.5px solid currentColor; border-radius: var(--radius-pill); font: 600 var(--fs-meta)/1 var(--font-sans);
}
.pd-toast--success .pd-toast__mark { color: var(--surface); background: var(--text); border-color: var(--text); border-radius: var(--radius-1); }
.pd-toast--success .pd-toast__mark::before { content: "✓" / ""; }
.pd-toast--error .pd-toast__mark { color: var(--danger); border-radius: var(--radius-1); }
.pd-toast--error .pd-toast__mark::before { content: "!" / ""; }
.pd-toast__body { display: grid; gap: var(--space-1); min-inline-size: 0; padding-block-start: var(--space-3); }
.pd-toast__title { margin: 0; font: 600 var(--fs-label)/1.35 var(--font-sans); color: var(--text); }
.pd-toast--error .pd-toast__title { color: var(--danger); }
.pd-toast__text { margin: 0; font: var(--font-caption); color: var(--text-muted); overflow-wrap: anywhere; }
.pd-toast__actions { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }
.pd-toast__action {
  display: inline-flex; align-items: center; justify-content: center; min-block-size: var(--target-min); min-inline-size: var(--target-min); margin: 0; padding: 0;
  font: 500 var(--fs-caption)/1 var(--font-sans); color: var(--link); background: none; border: 0; cursor: pointer;
  text-decoration: underline 1px; text-underline-offset: .3em;
}
@media (hover: hover) { .pd-toast__action:hover { text-decoration-thickness: 2px; } }
.pd-toast--error .pd-toast__action { color: var(--text); }
.pd-toast__timer { position: absolute; inset-inline: -1px; inset-block-end: -1px; border-block-end: 2px solid var(--rule-strong); transform-origin: 0 50%; animation: pd-toast-timer var(--pd-toast-ms, 6s) linear forwards; }
.pd-toast__timer:dir(rtl) { transform-origin: 100% 50%; }
.pd-toast:where(:hover, :focus-within, [data-paused]) .pd-toast__timer { animation-play-state: paused; }
@keyframes pd-toast-timer { from { scale: 1 1; } to { scale: 0 1; } }
@media (prefers-reduced-motion: reduce) { .pd-toast__timer { display: none; } }

/* ══ Badge / counter (static, never interactive) ═══════════════════════════ */
.pd-badge {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); box-sizing: border-box;
  padding: .0625em var(--space-2); font: 500 var(--fs-kicker)/1.45 var(--font-sans); letter-spacing: var(--track-text);
  white-space: nowrap; vertical-align: .125em; color: var(--text-muted);
  border: var(--hairline) solid var(--border-control); border-radius: var(--radius-1);
}
.pd-badge--solid { color: var(--surface); background: var(--text); border-color: var(--text); }
.pd-badge--danger { color: var(--danger); border-color: var(--danger); }
.pd-badge--count { min-inline-size: 1.75em; padding-inline: .375em; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text); }
.pd-badge--dot { inline-size: .5em; block-size: .5em; min-inline-size: 0; padding: 0; border-color: var(--text); border-radius: var(--radius-pill); background: var(--text); vertical-align: .1em; }
@media (prefers-reduced-motion: no-preference) {
  .pd-badge:where([data-tick]) { animation: pd-badge-tick var(--dur-2) var(--ease-out); }
}
@keyframes pd-badge-tick { from { scale: 1.12; } }

/* ══ Avatar (image → initials → portrait mark / neutral bindu) ═════════════ */
.pd-avatar {
  --pd-avatar: 2.5rem;
  position: relative; display: inline-grid; place-items: center; flex: none; box-sizing: border-box;
  inline-size: var(--pd-avatar); block-size: var(--pd-avatar); overflow: hidden; vertical-align: middle;
  color: var(--text); background: var(--surface-sunken); border: 1px solid var(--rule); border-radius: var(--radius-0);
  font: 600 var(--fs-body-s)/1 var(--font-sans); letter-spacing: .02em; user-select: none;
}
.pd-avatar > * { grid-area: 1 / 1; }
.pd-avatar__img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; forced-color-adjust: none; }
@media (prefers-reduced-motion: no-preference) {
  .pd-avatar__img { transition: opacity var(--dur-3) var(--ease-out); }
  @starting-style { .pd-avatar__img { opacity: 0; } }
}
.pd-avatar__initials { line-height: 1; }
.pd-avatar__mark { inline-size: 62%; block-size: 62%; fill: currentColor; }
.pd-avatar__glyph { inline-size: 46%; aspect-ratio: 1; border: 1px solid currentColor; border-radius: var(--radius-pill); background: radial-gradient(circle, currentColor 0 17%, transparent 19%); }
.pd-avatar--s { --pd-avatar: 2rem; font-size: var(--fs-caption); }
.pd-avatar--l { --pd-avatar: 4rem; font-size: var(--fs-title); }
.pd-avatar--xl { --pd-avatar: 6rem; font-size: var(--fs-headline); }
.pd-avatar--circle { border-radius: var(--radius-pill); }
.pd-avatar--ring { outline: 2px solid var(--rule-strong); outline-offset: 2px; }
.pd-avatar--mono .pd-avatar__img { filter: grayscale(1); }
.pd-avatar-stack { display: inline-flex; padding-inline-start: var(--space-2); }
.pd-avatar-stack > .pd-avatar { margin-inline-start: calc(-1 * var(--space-2)); box-shadow: 0 0 0 2px var(--surface); }

/* ══ ChipInput (.pd-combo + .pd-tag chassis + 44px remove) ═════════════════ */
.pd-chips { container-type: inline-size; display: grid; gap: var(--space-2); font: var(--font-ui); color: var(--text); }
.pd-chips__box {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); box-sizing: border-box;
  min-block-size: var(--control-block); padding: 0 var(--space-2);
  background: var(--surface); border: 1px solid var(--border-control); border-radius: var(--radius-1); cursor: text;
  transition: border-color var(--dur-2) var(--ease-standard);
}
@media (hover: hover) { .pd-chips__box:hover { border-color: var(--rule-strong); } }
.pd-chips__box:where(:has(.pd-chips__input:focus-visible)) { border-color: var(--rule-strong); outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
.pd-chips__box:where(:has([aria-invalid="true"])) { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.pd-chips__list { display: contents; }
.pd-chips__chip { gap: var(--space-1); padding-block: 0; padding-inline-end: 0; min-block-size: 2em; font-size: var(--fs-label); }
.pd-chips__chip:where(:not(:has(.pd-chips__remove))) { padding-inline-end: var(--space-2); }
.pd-chips__remove { position: relative; display: inline-grid; place-content: center; inline-size: 1.75em; block-size: 1.75em; margin: 0; padding: 0; color: var(--text-muted); background: none; border: 0; border-radius: var(--radius-1); cursor: pointer; }
.pd-chips__remove::before { content: ""; position: absolute; inset: 0; margin: auto; inline-size: max(100%, var(--target-min)); block-size: max(100%, var(--target-min)); }
.pd-chips__remove > svg { inline-size: .75em; block-size: .75em; fill: none; stroke: currentColor; stroke-width: 1.75; }
@media (hover: hover) { .pd-chips__remove:hover { color: var(--text); background: color-mix(in oklab, currentColor var(--state-hover-mix), transparent); } }
.pd-chips__remove:focus-visible { outline-offset: 0; }
.pd-chips__input {
  flex: 1 1 8em; min-inline-size: 8em; box-sizing: border-box; min-block-size: var(--control-block); margin: 0; padding: 0 var(--space-1);
  font: inherit; font-size: 1rem; color: var(--text); background: none; border: 0; border-radius: 0;
}
.pd-chips__input:focus-visible { outline: 0; }
.pd-chips__input::placeholder { color: var(--text-subtle); opacity: 1; }
.pd-chips__input:disabled { cursor: not-allowed; }
.pd-chips:where([aria-disabled="true"]) .pd-chips__box { opacity: var(--opacity-disabled); cursor: not-allowed; }
.pd-chips:where([data-full]) .pd-chips__input { flex-basis: 0; min-inline-size: 4em; }
.pd-chips__combo { gap: 0; }

/* ══ DatePicker (BS + AD; memorable fields + calendar dialog) ══════════════ */
.pd-date { container-type: inline-size; display: grid; gap: var(--space-2); max-inline-size: 26rem; font: var(--font-ui); color: var(--text); }
.pd-date__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); }
.pd-date__echo { margin: 0; min-block-size: 1.45em; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); }
.pd-date__memo { display: grid; gap: var(--space-2); margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.pd-date__memo > legend { padding: 0; margin-block-end: var(--space-2); }
.pd-date__memo > .pd-radio-group { inline-size: min(100%, 14rem); }
.pd-date__parts { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); }
.pd-date__part { display: grid; gap: var(--space-1); font: var(--font-label); }
.pd-date__field { inline-size: 4.5em; }
.pd-date__field--year { inline-size: 6em; }
.pd-date__field--month { inline-size: 9em; }
.pd-date__dialog { inline-size: min(25rem, 100% - 2 * var(--space-4)); }
.pd-date__nav { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); padding: var(--space-3); border-block-end: 1px solid var(--rule); }
.pd-date__heading { display: grid; justify-items: center; gap: .125em; text-align: center; }
.pd-date__title { margin: 0; font: var(--font-title); color: var(--text); }
.pd-date__sub { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-date__modes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4) 0; }
.pd-date__mode { flex: none; inline-size: 8em; }
.pd-date__panel { display: grid; gap: var(--space-2); padding: var(--space-2) var(--space-3) var(--space-3); overflow: auto; }
.pd-date__grid { inline-size: 100%; min-inline-size: calc(7 * var(--target-min)); border-collapse: collapse; table-layout: fixed; }
.pd-date__grid th { padding-block: var(--space-2); font: 500 var(--fs-meta)/1.2 var(--font-mono); letter-spacing: var(--track-mono); text-align: center; color: var(--text-subtle); }
.pd-date__grid th:where(:last-child) { color: var(--text); font-weight: 600; }
.pd-date__cell { padding: 1px; text-align: center; }
.pd-date__day {
  position: relative; display: inline-grid; justify-items: center; align-content: center; gap: .125em; box-sizing: border-box;
  inline-size: 100%; min-inline-size: var(--target-min); block-size: 3.25rem; margin: 0; padding: 0;
  font: 400 var(--fs-body-s)/1 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--text);
  background: none; border: 1px solid transparent; border-radius: var(--radius-1); cursor: pointer;
}
.pd-date__n { display: grid; place-items: center; box-sizing: border-box; inline-size: 1.875em; block-size: 1.875em; border: 1px solid transparent; border-radius: var(--radius-pill); }
.pd-date__alt { font: 400 var(--fs-meta)/1 var(--font-mono); color: var(--text-subtle); white-space: nowrap; }
.pd-date__cell:where(:last-child) .pd-date__n { font-weight: 600; text-decoration: underline 1px; text-underline-offset: .2em; }
@media (hover: hover) { .pd-date__day:where(:not([aria-disabled="true"])):hover { background: color-mix(in oklab, currentColor var(--state-hover-mix), transparent); } }
.pd-date__day:active { background: color-mix(in oklab, currentColor var(--state-press-mix), transparent); }
.pd-date__day:focus-visible { outline-offset: calc(-1 * var(--focus-width)); }
.pd-date__day:where([aria-current="date"]) .pd-date__n { border-color: currentColor; }
.pd-date__cell:where([aria-selected="true"]) .pd-date__day { color: var(--selected-fg); background: var(--selected-bg); font-weight: 600; }
.pd-date__cell:where([aria-selected="true"]) .pd-date__alt { color: var(--selected-fg); }
.pd-date__day:where([aria-disabled="true"]) { opacity: var(--opacity-disabled); cursor: not-allowed; }
.pd-date__day:where([aria-disabled="true"]) .pd-date__n { text-decoration: line-through; }
.pd-date__note { margin: 0; font: var(--font-caption); color: var(--text-muted); }
.pd-date :where([data-numerals="deva"]) .pd-date__n, .pd-date__dialog:where([data-numerals="deva"]) .pd-date__n { font-family: var(--font-deva); }
@media (prefers-reduced-motion: no-preference) {
  .pd-date__grid tbody { transition: opacity var(--dur-2) var(--ease-standard); }
  @starting-style { .pd-date__grid tbody { opacity: 0; } }
}
@container (inline-size < 22em) { .pd-date__alt { font-size: var(--fs-meta); letter-spacing: 0; } }

/* ══ Stepper (.pd-steps) ═══════════════════════════════════════════════════ */
.pd-steps { container-type: inline-size; font: var(--font-ui); color: var(--text); }
.pd-steps__list { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.pd-steps__item {
  position: relative; flex: 1 1 100%; display: grid; grid-template-columns: 1.5em minmax(0, 1fr); grid-template-areas: "mark meta" "mark label";
  column-gap: var(--space-3); row-gap: .125em; padding-block-end: var(--space-5);
}
.pd-steps__item::before { content: ""; position: absolute; inset-inline-start: calc(.75em - .5px); inset-block: 1.75em .25em; border-inline-start: 1px solid var(--border-control); }
.pd-steps__item:last-child { padding-block-end: 0; }
.pd-steps__item:last-child::before { content: none; }
.pd-steps__item:where([data-state="complete"])::before { border-color: var(--rule-strong); }
.pd-steps__mark { grid-area: mark; position: relative; display: grid; place-items: center; inline-size: 1.5em; block-size: 1.5em; }
.pd-steps__mark::before { content: ""; box-sizing: border-box; inline-size: .875em; block-size: .875em; border: 1.5px solid var(--border-control); border-radius: var(--radius-pill); }
.pd-steps__item:where([data-state="complete"]) .pd-steps__mark::before { inline-size: .75em; block-size: .75em; border-color: var(--rule-strong); border-radius: 0; background: var(--text); }
.pd-steps__item:where([aria-current="step"]) .pd-steps__mark::before { inline-size: 1.25em; block-size: 1.25em; border-color: var(--rule-strong); }
.pd-steps__item:where([aria-current="step"]) .pd-steps__mark::after { content: ""; position: absolute; inline-size: .375em; block-size: .375em; border-radius: var(--radius-pill); background: var(--text); }
.pd-steps__meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 0 var(--space-2); align-items: baseline; padding-block-start: .125em; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-steps__num { font-variant-numeric: tabular-nums; }
.pd-steps__label { grid-area: label; font: var(--font-label); color: var(--text-muted); }
.pd-steps__item:where([data-state="complete"]) .pd-steps__label { color: var(--text); }
.pd-steps__item:where([aria-current="step"]) .pd-steps__label { color: var(--text); font-weight: 600; text-decoration: underline 2px var(--rule-strong); text-underline-offset: .5em; }
.pd-steps__item:where([aria-current="step"]) .pd-steps__meta { color: var(--text); }
.pd-steps__link { display: inline-flex; align-items: center; min-block-size: var(--target-min); margin-block: calc((var(--target-min) - 1.3em) / -2); color: var(--link); }
@container (inline-size >= 48em) {
  .pd-steps__item { flex: 1 1 0; grid-template-columns: minmax(0, 1fr); grid-template-areas: "mark" "meta" "label"; row-gap: var(--space-2); padding-block-end: 0; padding-inline-end: var(--space-4); }
  .pd-steps__item::before { inset-inline: 1.75em .25em; inset-block: .75em auto; border-inline-start: 0; border-block-start: 1px solid var(--border-control); }
  .pd-steps__item:where([data-state="complete"])::before { border-color: var(--rule-strong); }
  .pd-steps__mark { justify-self: start; }
}
@media (prefers-reduced-motion: no-preference) {
  .pd-steps__item::before { transition: border-color var(--dur-3) var(--ease-out); }
}

/* ══ Progress (bar · ring · page · loop) ═══════════════════════════════════ */
.pd-progress { display: grid; align-content: start; gap: var(--space-2); font: var(--font-ui); color: var(--text); }
.pd-progress__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-4); }
.pd-progress__label { font: var(--font-label); color: var(--text); }
.pd-progress__value { font: 500 var(--fs-meta)/1.2 var(--font-mono); letter-spacing: var(--track-mono); font-variant-numeric: tabular-nums; color: var(--text-muted); }
.pd-progress__rail { position: relative; display: block; overflow: hidden; }
progress.pd-progress__bar {
  appearance: none; -webkit-appearance: none; display: block; box-sizing: border-box; inline-size: 100%; block-size: .25rem; margin: 0;
  color: var(--text); background: var(--rule); border: 0; border-radius: 0;
}
progress.pd-progress__bar::-webkit-progress-bar { background: var(--rule); }
progress.pd-progress__bar::-webkit-progress-value { background: currentColor; }
progress.pd-progress__bar::-moz-progress-bar { background: currentColor; }
progress.pd-progress__bar:indeterminate { background: repeating-linear-gradient(-45deg, color-mix(in oklab, currentColor 35%, transparent) 0 1px, transparent 1px 5px); }
progress.pd-progress__bar:indeterminate::-webkit-progress-bar { background: repeating-linear-gradient(-45deg, color-mix(in oklab, currentColor 35%, transparent) 0 1px, transparent 1px 5px); }
.pd-progress__rail:where(:has(> :indeterminate))::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 30%; background: currentColor; translate: -100% 0; }
@media (prefers-reduced-motion: no-preference) {
  .pd-progress__rail:where(:has(> :indeterminate))::after { animation: pd-progress-sweep 1.6s var(--ease-in-out) 3; }
}
@keyframes pd-progress-sweep { from { translate: -100% 0; } to { translate: 340% 0; } }
.pd-progress__hint { margin: 0; font: var(--font-caption); color: var(--text-muted); }

/* Ring: SVG circle, pathLength 100, value text centred. */
.pd-progress--ring { --pd-progress: 0; display: inline-grid; place-items: center; inline-size: 3.5em; block-size: 3.5em; gap: 0; }
.pd-progress--ring > * { grid-area: 1 / 1; }
.pd-progress__ring { inline-size: 100%; block-size: 100%; rotate: -90deg; overflow: visible; }
.pd-progress__ring:dir(rtl) { scale: 1 -1; }
.pd-progress__ring-track { fill: none; stroke: var(--rule); stroke-width: 3; }
.pd-progress__ring-fill { fill: none; stroke: currentColor; stroke-width: 3; stroke-dasharray: calc(var(--pd-progress) * 100) 100; }
.pd-progress--ring .pd-progress__value { color: var(--text); }
.pd-progress--ring.pd-progress--l { inline-size: 6em; block-size: 6em; }
.pd-progress--l .pd-progress__value { font-size: var(--fs-label); }

/* Page: the fixed reading bar. Decorative (aria-hidden); the loop or text carries the value. */
.pd-progress--page { --pd-progress: 0; position: fixed; inset-block-start: 0; inset-inline: 0; z-index: var(--z-progress); display: block; block-size: 2px; pointer-events: none; }
.pd-progress--page .pd-progress__bar { display: block; inline-size: 100%; block-size: 100%; background: var(--text); transform-origin: 0 50%; scale: var(--pd-progress) 1; }
.pd-progress--page .pd-progress__bar:dir(rtl) { transform-origin: 100% 50%; }
.pd-progress--track { background: var(--rule); }
@supports (animation-timeline: scroll()) {
  .pd-progress--scroll .pd-progress__bar { animation: pd-progress-grow linear both; animation-timeline: scroll(root block); }
}
@keyframes pd-progress-grow { from { scale: 0 1; } to { scale: 1 1; } }
.pd-progress--inline { position: relative; inset: auto; z-index: auto; }

/* Loop: the ananta traced lobe by lobe (A 0–50 %, B 50–100 %); the bindu lands at the end. Mono by default. */
.pd-progress--loop, .pd-progress-loop { --pd-progress: 0; display: inline-flex; align-items: center; gap: var(--space-3); color: var(--text); font: var(--font-ui); }
.pd-progress__loop { inline-size: 3.5em; block-size: 1.7em; overflow: visible; }
.pd-progress__lobe { fill: none; stroke: var(--border-control); stroke-width: 2.5; stroke-linejoin: round; }
.pd-progress__fill { fill: none; stroke: currentColor; stroke-width: 4.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1 1; }
.pd-progress__fill--a { stroke-dashoffset: clamp(0, calc(1 - var(--pd-progress) * 2), 1); }
.pd-progress__fill--b { stroke-dashoffset: clamp(0, calc(2 - var(--pd-progress) * 2), 1); }
.pd-progress__bindu { fill: currentColor; stroke: var(--surface); stroke-width: 2.5; opacity: 0; scale: .4; transform-box: fill-box; transform-origin: center; transition: opacity var(--dur-3) var(--ease-out), scale var(--dur-3) var(--ease-out); }
:where(.pd-progress--loop, .pd-progress-loop):where([data-done]) .pd-progress__bindu { opacity: 1; scale: 1; }
.pd-progress--accent .pd-progress__bindu { fill: var(--accent-fill); }
.pd-progress--duo .pd-progress__fill--a { stroke: var(--duo-a); }
.pd-progress--duo .pd-progress__fill--b { stroke: var(--duo-b); }
:where(.pd-progress__text, .pd-progress-loop__text) { display: grid; gap: .125em; line-height: 1.2; }
.pd-progress--loop .pd-progress__value, .pd-progress-loop .pd-progress-loop__pct { font: 500 var(--fs-caption)/1.2 var(--font-mono); letter-spacing: var(--track-mono); font-variant-numeric: tabular-nums; color: var(--text); }
:where(.pd-progress__left, .pd-progress-loop__left) { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-progress--float, .pd-progress-loop--float {
  position: fixed; inset-inline-end: var(--gutter); inset-block-end: var(--gutter); z-index: var(--z-progress);
  padding-block: var(--space-2); padding-inline: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border-control);
}
.pd-progress--loop.pd-progress--l .pd-progress__loop { inline-size: 7em; block-size: 3.4em; }

/* ══ Spinner (bindu pulse in a hairline ring) ══════════════════════════════ */
.pd-spinner { display: inline-flex; align-items: center; gap: var(--space-2); vertical-align: middle; color: var(--text); font: var(--font-caption); }
.pd-spinner__ring { display: inline-grid; place-items: center; flex: none; box-sizing: border-box; inline-size: 1.5em; block-size: 1.5em; border: 1px solid var(--border-control); border-radius: var(--radius-pill); }
.pd-spinner__bindu { inline-size: .5em; block-size: .5em; border-radius: var(--radius-pill); background: currentColor; }
.pd-spinner--accent .pd-spinner__bindu { background: var(--bindu-on-paper); box-shadow: inset 0 0 0 1px var(--saffron-700); }
.pd-spinner--l .pd-spinner__ring { inline-size: 3em; block-size: 3em; }
.pd-spinner--l .pd-spinner__bindu { inline-size: 1em; block-size: 1em; }
.pd-spinner__label { color: var(--text-muted); }
@media (prefers-reduced-motion: no-preference) {
  .pd-spinner__bindu { animation: pd-spinner-pulse 1.6s var(--ease-in-out) 3 alternate both; }
}
@keyframes pd-spinner-pulse { from { scale: .6; opacity: .5; } to { scale: 1; opacity: 1; } }

/* ══ FileUpload (.pd-drop: native input inside a labelled zone) ════════════ */
.pd-drop { container-type: inline-size; display: grid; gap: var(--space-3); font: var(--font-ui); color: var(--text); }
.pd-drop__zone {
  position: relative; display: grid; justify-items: start; align-content: center; gap: var(--space-2); box-sizing: border-box;
  min-block-size: 8em; padding: var(--space-5); background: var(--surface);
  border: 1px solid var(--border-control); border-radius: var(--radius-1);
  transition: border-color var(--dur-2) var(--ease-standard);
}
.pd-drop__title { font: 600 var(--fs-label)/1.3 var(--font-sans); color: var(--text); }
.pd-drop__hint { font: var(--font-caption); color: var(--text-muted); }
.pd-drop__or { font: var(--font-caption); color: var(--text-muted); }
.pd-drop__droptext { display: none; font: 600 var(--fs-label)/1.3 var(--font-sans); }
.pd-drop__input { max-inline-size: 100%; font: var(--font-caption); color: var(--text-muted); }
.pd-drop__input::file-selector-button {
  box-sizing: border-box; min-block-size: var(--control-block); margin-inline-end: var(--space-3); padding: 0 var(--control-pad-inline);
  font: var(--font-label); color: var(--text); background: var(--surface); cursor: pointer;
  border: 1px solid var(--border-control); border-radius: var(--radius-1);
}
@media (hover: hover) { .pd-drop__input:hover::file-selector-button { border-color: var(--rule-strong); background: color-mix(in oklab, currentColor var(--state-hover-mix), var(--surface)); } }
.pd-drop__zone:where([data-drag]) { border-color: var(--rule-strong); outline: 1px solid var(--rule-strong); outline-offset: -2px; }
.pd-drop__zone:where([data-drag]) .pd-drop__droptext { display: block; }
.pd-drop__zone:where([data-drag]) .pd-drop__title { display: none; }
.pd-drop__zone:where(:has(.pd-drop__input:disabled)) { opacity: var(--opacity-disabled); cursor: not-allowed; }
.pd-drop__zone:where(:has(.pd-drop__input[aria-invalid="true"])) { border-color: var(--danger); outline: 1px solid var(--danger); outline-offset: -2px; }
@media (pointer: coarse) { .pd-drop__or { display: none; } }
.pd-drop__files { margin: 0; padding: 0; list-style: none; }
.pd-drop__files:empty { display: none; }
.pd-drop__file { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0 var(--space-4); padding-block: var(--space-1); border-block-end: 1px solid var(--rule); }
.pd-drop__file:first-child { border-block-start: 1px solid var(--rule); }
.pd-drop__name { min-inline-size: 0; font: var(--font-label); color: var(--text); overflow-wrap: anywhere; }
.pd-drop__size { font: var(--font-meta); letter-spacing: var(--track-mono); font-variant-numeric: tabular-nums; color: var(--text-subtle); white-space: nowrap; }
.pd-drop__status { grid-column: 1 / 3; padding-block-end: var(--space-2); font: var(--font-caption); color: var(--text-muted); }
.pd-drop__status:empty { display: none; }
.pd-drop__file .pd-drop__remove { grid-column: 3; grid-row: 1 / span 2; }
.pd-drop__file:where([aria-invalid="true"]) .pd-drop__name { color: var(--danger); }
.pd-drop__file:where([aria-invalid="true"]) .pd-drop__status { color: var(--danger); }
.pd-drop__file:where([data-done]) .pd-drop__status::before { content: "✓ " / ""; color: var(--text); }

/* ══ CopyButton (.pd-copy on the .pd-btn chassis; fixed-width label slot) ══ */
.pd-copy__slot { display: inline-grid; justify-items: center; }
.pd-copy__slot > * { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: var(--space-2); }
.pd-copy :where(svg) { inline-size: var(--icon-s); block-size: var(--icon-s); fill: none; stroke: currentColor; stroke-width: 1.5; }
.pd-copy__done, .pd-copy__fail { visibility: hidden; }
.pd-copy:where([data-copied]) .pd-copy__idle, .pd-copy:where([data-failed]) .pd-copy__idle { visibility: hidden; }
.pd-copy:where([data-copied]) .pd-copy__done, .pd-copy:where([data-failed]) .pd-copy__fail { visibility: visible; }

/* ══ Lightbox (pd-dialog--lightbox) ════════════════════════════════════════ */
.pd-lightbox { --pd-lb-info: 20rem; }
.pd-lightbox__where { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4); min-inline-size: 0; }
.pd-lightbox__count { font: var(--font-numeral); letter-spacing: var(--track-mono); font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.pd-lightbox__count span { color: var(--text-subtle); }
.pd-lightbox__tools { display: flex; align-items: center; gap: var(--space-2); }
.pd-lightbox__body { display: grid; grid-template-columns: minmax(0, 1fr) var(--pd-lb-info); min-block-size: 0; }
.pd-lightbox__body:where(:has(> .pd-lightbox__info[hidden])) { grid-template-columns: minmax(0, 1fr); }
.pd-lightbox__stage { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); min-block-size: 0; padding: var(--space-5); }
.pd-lightbox__frame > :not(figcaption) { justify-self: center; inline-size: auto; max-inline-size: 100%; block-size: min(100dvh - 14rem, 32rem); }
.pd-lightbox__frame { display: grid; gap: var(--space-3); justify-self: center; inline-size: 100%; max-inline-size: 54rem; min-block-size: 0; margin: 0; }
.pd-lightbox__frame > .pd-ph { block-size: auto; inline-size: min(100%, calc(min(100dvh - 14rem, 32rem) * (var(--pd-ph-ratio)))); }
.pd-lightbox__img { display: block; object-fit: contain; background: var(--surface-sunken); }
.pd-lightbox__cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-4); font: var(--font-caption); color: var(--text-muted); }
.pd-lightbox__cap b { font-weight: 600; color: var(--text); }
.pd-lightbox__nav { inline-size: 3rem; block-size: 3rem; }
.pd-lightbox__info { display: grid; align-content: start; gap: var(--space-5); padding: var(--space-5); border-inline-start: 1px solid var(--rule); overflow-y: auto; overscroll-behavior: contain; }
.pd-lightbox__title { margin: var(--space-2) 0 0; font: 500 var(--fs-headline)/1.1 var(--font-display); letter-spacing: var(--track-display); color: var(--text); }
.pd-lightbox__line { margin: 0; font: var(--font-caption); color: var(--text-muted); }
.pd-lightbox__edition { margin: 0; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-lightbox__keys { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); margin: 0; padding: var(--space-3) var(--space-5); list-style: none; border-block-start: 1px solid var(--rule); font: var(--font-caption); color: var(--text-muted); }
.pd-lightbox__keys li { display: inline-flex; align-items: center; gap: var(--space-2); }
@container (inline-size < 48em) {
  .pd-lightbox__body { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
  .pd-lightbox__info { border-inline-start: 0; border-block-start: 1px solid var(--rule); overflow: visible; }
  .pd-lightbox__stage { grid-template-columns: 1fr 1fr; align-items: start; gap: var(--space-2); padding: var(--space-4); }
  .pd-lightbox__frame { grid-column: 1 / -1; grid-row: 1; }
  .pd-lightbox__frame > :not(figcaption) { inline-size: 100%; block-size: auto; max-block-size: 60dvh; }
  .pd-lightbox__frame > .pd-ph { inline-size: min(100%, calc(60dvh * (var(--pd-ph-ratio)))); max-block-size: none; }
  .pd-lightbox__body > * { min-block-size: auto; }
  .pd-lightbox__nav { grid-row: 2; }
  .pd-lightbox__nav--next { justify-self: end; }
  .pd-lightbox__keys { display: none; }
}

/* ══ CommandSearch (pd-dialog--palette + .pd-combo) ════════════════════════ */
.pd-cmdk-trigger {
  display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-5); box-sizing: border-box;
  min-inline-size: min(14em, 100%); min-block-size: var(--control-block); padding-block: 0; padding-inline: var(--space-3) var(--space-2);
  font: var(--font-ui); color: var(--text-muted); background: var(--surface); cursor: pointer;
  border: 1px solid var(--border-control); border-radius: var(--radius-1);
  transition: border-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard);
}
.pd-cmdk-trigger__text { display: inline-flex; align-items: center; gap: var(--space-2); }
.pd-cmdk-trigger svg, .pd-cmdk__glyph { inline-size: var(--icon-m); block-size: var(--icon-m); fill: none; stroke: currentColor; stroke-width: 1.5; flex: none; }
@media (hover: hover) { .pd-cmdk-trigger:hover { color: var(--text); border-color: var(--rule-strong); } }
.pd-cmdk__combo { display: contents; container-type: normal; }
.pd-cmdk__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding-inline: var(--space-5) var(--space-3); border-block-end: 1px solid var(--rule-strong); }
.pd-cmdk__head:where(:focus-within) { outline: var(--focus-width) solid var(--focus); outline-offset: calc(-1 * var(--focus-width)); }
.pd-cmdk__input {
  box-sizing: border-box; inline-size: 100%; min-inline-size: 0; min-block-size: 3.5rem; margin: 0; padding: 0;
  font: 400 var(--fs-title)/1.3 var(--font-text); color: var(--text); background: none; border: 0; border-radius: 0; box-shadow: none;
}
.pd-cmdk__input::placeholder { font-style: italic; color: var(--text-subtle); opacity: 1; }
.pd-cmdk__input:focus-visible { outline: 0; }
.pd-cmdk__input::-webkit-search-cancel-button { appearance: none; }
.pd-cmdk__scope { inline-size: auto; max-inline-size: 11em; }
.pd-cmdk__list { position: static; min-block-size: 0; max-block-size: none; margin: 0; padding: var(--space-2) 0; overflow-y: auto; overscroll-behavior: contain; background: none; border: 0; border-radius: 0; box-shadow: none; }
.pd-cmdk__option { grid-template-columns: minmax(0, 1fr) auto; row-gap: .125em; padding-block: var(--space-2); padding-inline: var(--space-5); color: var(--text); text-decoration: none; }
.pd-cmdk__title { min-inline-size: 0; font: 500 var(--fs-body-s)/1.3 var(--font-text); color: var(--text); }
.pd-cmdk__sub { grid-column: 1; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); overflow-wrap: anywhere; }
.pd-cmdk__tags { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: var(--space-3); }
.pd-cmdk__go { font: var(--font-label); color: var(--text); visibility: hidden; }
.pd-cmdk__option:where([aria-selected="true"]) .pd-cmdk__go { visibility: visible; }
.pd-cmdk__empty { padding: var(--space-6) var(--space-5); font-style: italic; }
.pd-cmdk__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-5); border-block-start: 1px solid var(--rule); font: var(--font-caption); color: var(--text-muted); }
.pd-cmdk__hints { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; }
.pd-cmdk__hints li { display: inline-flex; align-items: center; gap: var(--space-2); }
.pd-cmdk__count { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); font-variant-numeric: tabular-nums; }
@container (inline-size < 30em) {
  .pd-cmdk__head { padding-inline-start: var(--space-4); grid-template-columns: auto minmax(0, 1fr); }
  .pd-cmdk__scope { grid-column: 1 / -1; max-inline-size: none; inline-size: 100%; margin-block-end: var(--space-3); }
  .pd-cmdk__option { padding-inline: var(--space-4); }
  .pd-cmdk__tag { display: none; }
  .pd-cmdk__hints li:nth-child(n+3) { display: none; }
}

/* ══ Forced colours ════════════════════════════════════════════════════════ */
@media (forced-colors: active) {
  :where(.pd-dialog, .pd-sheet, .pd-popover, .pd-toast, .pd-tip__bubble) { border: 1px solid CanvasText; }
  :where(.pd-dialog, .pd-sheet)::backdrop { background: Canvas; opacity: .7; }
  .pd-tip__bubble { color: CanvasText; background: Canvas; }
  .pd-toast__timer, .pd-steps__item::before { border-color: CanvasText; }
  .pd-steps__item:where([data-state="complete"]) .pd-steps__mark::before, .pd-steps__item:where([aria-current="step"]) .pd-steps__mark::after,
  .pd-badge--dot, .pd-spinner__bindu, .pd-toast--success .pd-toast__mark { background: CanvasText; forced-color-adjust: none; }
  .pd-date__cell:where([aria-selected="true"]) .pd-date__day { color: HighlightText; background: Highlight; forced-color-adjust: none; }
  .pd-date__day:where([aria-current="date"]) .pd-date__n { border: 2px solid CanvasText; }
  .pd-date__day:where([aria-disabled="true"]) { color: GrayText; }
  progress.pd-progress__bar { border: 1px solid CanvasText; }
  progress.pd-progress__bar::-webkit-progress-value { background: Highlight; }
  .pd-progress--page .pd-progress__bar, .pd-progress__rail::after { background: Highlight; forced-color-adjust: none; }
  .pd-progress__ring-fill, .pd-progress__fill { stroke: Highlight; }
  .pd-progress__lobe, .pd-progress__ring-track { stroke: GrayText; }
  .pd-progress__bindu { fill: CanvasText; }
  .pd-cmdk__option:where([aria-selected="true"]) { color: HighlightText; background: Highlight; forced-color-adjust: none; }
  .pd-drop__zone:where([data-drag]) { outline-color: Highlight; }
  .pd-sheet__link:where([aria-current="page"]) .pd-sheet__name::after { background: CanvasText; box-shadow: none; }
}

/* ══ Print: floating and feedback UI never prints ══════════════════════════ */
@media print {
  .pd-dialog:not(.pd-dialog--inline), .pd-sheet, .pd-sheet-trigger, .pd-popover, .pd-tip__bubble, .pd-toast-region, .pd-spinner,
  .pd-progress--page, .pd-progress--float, .pd-progress-loop--float, .pd-cmdk-trigger, .pd-copy, .pd-drop__zone, .pd-chips__remove { display: none; }
  .pd-steps__item { break-inside: avoid; }
}

}

/* ── part: pages.css ── */
@layer components.pages {
/* Pandox DS v2 — package "pages": glue for the page templates. Owns only the page prefixes:
   .pd-home · .pd-workpage · .pd-secpage · .pd-nowpage · .pd-cosmospage · .pd-tattvapage · .pd-styleguide, .pd-soundpage, .pd-reviewspage, .pd-teachpage, .pd-viewspage, .pd-learnpage.
   Every visible part of a page is an existing component; this file only places them on the 12-column grid,
   sets the vertical rhythm between bands, and aligns full-bleed components to --page-max. */

/* ── shared frame ───────────────────────────────────────────────────────── */
.pd-home, .pd-workpage, .pd-secpage, .pd-nowpage, .pd-cosmospage, .pd-tattvapage, .pd-styleguide, .pd-soundpage, .pd-reviewspage, .pd-teachpage, .pd-viewspage, .pd-learnpage {
  container: pd-page / inline-size; display: flow-root; min-block-size: 100vh; background: var(--surface); color: var(--text);
}
:where(.pd-home, .pd-workpage, .pd-secpage, .pd-nowpage, .pd-cosmospage, .pd-tattvapage, .pd-styleguide, .pd-soundpage, .pd-reviewspage, .pd-teachpage, .pd-viewspage, .pd-learnpage) > main { display: block; }
:where(.pd-home, .pd-workpage, .pd-secpage, .pd-nowpage, .pd-cosmospage, .pd-tattvapage, .pd-styleguide, .pd-soundpage, .pd-reviewspage, .pd-teachpage, .pd-viewspage, .pd-learnpage) > main:focus { outline: 0; }
.pd-home__wrap, .pd-workpage__wrap, .pd-secpage__wrap, .pd-nowpage__wrap, .pd-cosmospage__wrap, .pd-tattvapage__wrap, .pd-styleguide__wrap, .pd-soundpage__wrap, .pd-reviewspage__wrap, .pd-teachpage__wrap, .pd-viewspage__wrap, .pd-learnpage__wrap {
  box-sizing: border-box; inline-size: 100%; max-inline-size: var(--page-max); margin-inline: auto; padding-inline: var(--gutter);
}
/* one band = one subject; bands are separated by air, the section head carries the rule */
.pd-home__band, .pd-workpage__band, .pd-secpage__band, .pd-nowpage__band, .pd-cosmospage__band, .pd-tattvapage__band, .pd-styleguide__band, .pd-soundpage__band, .pd-reviewspage__band, .pd-teachpage__band, .pd-viewspage__band, .pd-learnpage__band {
  display: grid; gap: var(--space-6); padding-block-start: var(--space-9); min-inline-size: 0;
}
:where(.pd-home__band, .pd-workpage__band, .pd-secpage__band, .pd-nowpage__band, .pd-cosmospage__band, .pd-tattvapage__band, .pd-styleguide__band, .pd-soundpage__band, .pd-reviewspage__band, .pd-teachpage__band, .pd-viewspage__band, .pd-learnpage__band)[hidden] { display: none; }
:where(.pd-home, .pd-workpage, .pd-secpage, .pd-nowpage, .pd-cosmospage, .pd-tattvapage, .pd-styleguide, .pd-soundpage, .pd-reviewspage, .pd-teachpage, .pd-viewspage, .pd-learnpage) > main { padding-block-end: var(--space-10); }
:where(.pd-home, .pd-workpage, .pd-secpage, .pd-nowpage, .pd-cosmospage, .pd-tattvapage, .pd-styleguide, .pd-soundpage, .pd-reviewspage, .pd-teachpage, .pd-viewspage, .pd-learnpage) [data-section][hidden] { display: none; }

/* ── HomePage ──────────────────────────────────────────────────────────── */
/* The hero carries the signature only: the masthead, the 00 Index band and the footer list 01–10, so the hero does not. */
.pd-home__hero { min-block-size: min(38rem, 80vh); }
.pd-home__hero .pd-hero__inner { box-sizing: border-box; max-inline-size: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }
.pd-home__split { display: grid; gap: var(--space-6) var(--gutter); }
.pd-home__intro { display: grid; align-content: start; gap: var(--space-4); max-inline-size: var(--measure); }
.pd-home__lede { margin: 0; font: var(--font-lede); color: var(--text); text-wrap: pretty; }
.pd-home__note { margin: 0; font: var(--font-body); color: var(--text-muted); text-wrap: pretty; }
/* hero sign: HamsaMark --hero is the h1; the name sits on the lockup's second line with हंस */
.pd-home__sign { margin: 0; font-size: clamp(calc(var(--fs-display-l, 4rem) * .42), 6.5cqi, calc(var(--fs-display-xl, 6rem) * .62)); } /* portrait + "Pandox" signature (pd-logo__lock) */
.pd-home__sign .pd-logo__word { font-weight: 500; letter-spacing: -.02em; }
.pd-home__sign .pd-logo__sub { font-size: var(--fs-body-s, 1rem); white-space: normal; }
.pd-home__feature { display: grid; gap: var(--space-7) var(--gutter); }
.pd-home__side { display: grid; align-content: start; gap: var(--space-7); }
.pd-home__duo { gap: var(--space-8) var(--gutter); }
.pd-home__duo > * { display: grid; align-content: start; gap: var(--space-4); min-inline-size: 0; }
.pd-home__latestgrid { display: grid; gap: var(--space-8) var(--gutter); }
.pd-home__latestrows { min-inline-size: 0; }
.pd-home__verse { display: grid; justify-items: stretch; align-content: start; min-inline-size: 0; text-align: center; }
.pd-home__verse .pd-verse { max-inline-size: none; margin: 0; margin-inline: 0; } /* rules run to the grid's right edge */
.pd-home__quad { display: grid; gap: var(--space-6) var(--gutter); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.pd-home__cell { display: grid; min-inline-size: 0; }
.pd-home__nowband { gap: var(--space-8) var(--gutter); }
.pd-home__aside { display: grid; align-content: start; gap: var(--space-7); min-inline-size: 0; }

/* home: sound strip, Vedic stamp, latest stream */
.pd-home__sound { display: grid; gap: var(--space-7) var(--gutter); min-inline-size: 0; }
.pd-home__player, .pd-home__tracks { min-inline-size: 0; }
.pd-home__stamp .pd-vstamp__part { display: inline-block; white-space: nowrap; } /* keep "Kṛṣṇa Dvādaśī" (pakṣa + tithi) on one line */
.pd-home__stamp { display: grid; gap: var(--space-2); margin: 0; padding-block: var(--space-4); border-block: var(--hairline) solid var(--rule); }
/* one saffron moment per view: in the Sound + Now viewport the player playhead keeps it;
   the page demotes the secondary indicators (tracklist progress, Now "last updated") to ink. */
.pd-home__tracks .pd-tracks__prog::after { background: var(--text); box-shadow: 0 0 0 2px var(--surface); }
.pd-home__nowband .pd-now__live::before { background: var(--text); box-shadow: none; }
/* Image band: shared row heights so every row of plates starts and ends on one line and
   captions share a baseline (frames crop with object-fit: cover; the Gallery's aspect classes
   still pick span). Height = a 4:5 plate at 4 of 12 columns (3-up) or a 1:1 plate at 6 (2-up). */
.pd-home__imgband { container: pd-homeimg / inline-size; }
/* Phone: one lead plate plus a 2-up row of two; plates 4 and 5 wait behind "All images". */
@container pd-homeimg (inline-size < 30em) {
  .pd-home__imgband .pd-plate { grid-column: span 6; }
  .pd-home__imgband .pd-plate:first-child { grid-column: 1 / -1; }
  .pd-home__imgband .pd-plate:not(:first-child) :where(.pd-plate__link) { aspect-ratio: 4 / 5; }
  .pd-home__imgband .pd-plate:nth-child(n + 4) { display: none; }
}
@container pd-homeimg (inline-size >= 30em) {
  .pd-home__imgband .pd-gallery { grid-auto-rows: calc((100cqi - var(--gutter)) / 2) auto; }
  .pd-home__imgband .pd-plate__link { aspect-ratio: auto; block-size: 100%; align-self: stretch; }
}
@container pd-homeimg (inline-size >= 48em) {
  .pd-home__imgband .pd-gallery { grid-auto-rows: calc((100cqi - 2 * var(--gutter)) / 3 * 1.25) auto; }
}

@container pd-page (min-width: 56em) {
  .pd-home__split { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .pd-home__intro { grid-column: 1 / span 5; position: sticky; inset-block-start: var(--space-9); align-self: start; }
  .pd-home__split > nav { grid-column: 7 / -1; }
  .pd-home__feature { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .pd-home__lead { grid-column: 1 / span 8; }
  .pd-home__side { grid-column: 9 / -1; }
  .pd-home__duo { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--gutter) * 2); }
  .pd-home__nowband { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .pd-home__nowband > .pd-now { grid-column: 1 / span 7; }
  .pd-home__aside { grid-column: 9 / -1; padding-block-start: 0; } /* first rule level with the section-head rule */
  .pd-home__sound { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .pd-home__player { grid-column: 1 / span 7; }
  .pd-home__tracks { grid-column: 9 / -1; }
  .pd-home__latestgrid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .pd-home__latestrows { grid-column: 1 / span 8; }
  .pd-home__verse { grid-column: 10 / -1; position: sticky; inset-block-start: var(--space-9); }
}
@container pd-page (min-width: 72em) {
  .pd-home__hero .pd-hero__index { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* Home hero: date/place said once. The masthead carries the tithi; the place/time meta is a
   wide-screen detail and steps aside on small screens so the signature owns the first screen. */
@container (inline-size < 48em) { .pd-home__hero .pd-hero__meta { display: none; } }
/* Mobile: the Index band and the Menu sheet carry navigation, so the hero does not repeat 01–10. */
@container (inline-size < 48em) { .pd-home__hero .pd-hero__index { display: none; } }
/* Mobile: no fixed hero height and no 1fr middle row, so the signature starts near the top of the first screen. */
@container (inline-size < 48em) {
  .pd-home__hero { min-block-size: auto; }
  .pd-home__hero .pd-hero__inner { grid-template-rows: auto; padding-block: var(--space-8) var(--space-7); }
}
/* Full-bleed hero: no box. The Sky outline (meant for Void) is dropped here; only the bottom edge
   is held, in the page's own rule colour (invisible against Paper/Ink, holds the edge in Void). */
.pd-home__hero.pd-sky { outline: 0; border-block-end: var(--hairline) solid var(--line-100); }
.pd-home__hero .pd-logo__sub { text-wrap: balance; }
@container (inline-size < 30em) { .pd-home__hero .pd-logo__sub { white-space: nowrap; font-size: var(--fs-meta); } }
/* Home hero: keep the index band fully calm — the Moon and planets fade out before the index rule. */
.pd-home__hero .pd-hero__sky {
  -webkit-mask-image: linear-gradient(to top, transparent 26%, var(--sky-900) 52%), radial-gradient(ellipse 62% 36% at 38% 58%, var(--_pd-hero-calm) 55%, var(--sky-900) 100%);
  mask-image: linear-gradient(to top, transparent 26%, var(--sky-900) 52%), radial-gradient(ellipse 62% 36% at 38% 58%, var(--_pd-hero-calm) 55%, var(--sky-900) 100%); }
.pd-home__hero .pd-hero__sky:dir(rtl) {
  -webkit-mask-image: linear-gradient(to top, transparent 26%, var(--sky-900) 52%), radial-gradient(ellipse 62% 36% at 62% 58%, var(--_pd-hero-calm) 55%, var(--sky-900) 100%);
  mask-image: linear-gradient(to top, transparent 26%, var(--sky-900) 52%), radial-gradient(ellipse 62% 36% at 62% 58%, var(--_pd-hero-calm) 55%, var(--sky-900) 100%); }
@container (inline-size < 30em) {
  .pd-home__hero .pd-hero__sky { -webkit-mask-image: linear-gradient(to top, transparent 22%, var(--_pd-hero-calm) 42%, var(--_pd-hero-calm) 62%, var(--sky-900) 85%); mask-image: linear-gradient(to top, transparent 22%, var(--_pd-hero-calm) 42%, var(--_pd-hero-calm) 62%, var(--sky-900) 85%); }
}
/* Home hero index: each cell carries its own top and bottom rule (overlapping by one hairline
   between rows), so a hidden section's empty cell draws no rule. */
.pd-home__hero .pd-hero__index { border-block-end: 0; }
.pd-home__hero .pd-hero__index li { border-block: var(--hairline) solid var(--rule); margin-block-start: calc(var(--hairline) * -1); }
/* Work band: the lead plate at 16:10 so its card ends level with the side column. */
.pd-home__feature > :first-child .pd-ph { aspect-ratio: 16 / 10; }
/* Now band: the lede sits under the title, past the numeral gutter. */
.pd-home__nowlede { display: flex; margin-block: var(--space-4) var(--space-5); }
.pd-home__nowlede::before { content: ""; flex: 0 0 var(--label-col); font: var(--font-numeral); } /* same em base as .pd-section-head__num */
@container pd-now (inline-size < 30em) { .pd-home__nowlede::before { content: none; } }
/* Image band: placeholder labels inside plate links are labels, not links. */
.pd-home__imgband .pd-plate__link { text-decoration: none; }

/* ── WorkPage ──────────────────────────────────────────────────────────── */
.pd-workpage__crumbs, .pd-secpage__crumbs, .pd-tattvapage__crumbs, .pd-nowpage__crumbs, .pd-cosmospage__crumbs { padding-block: var(--space-5) var(--space-6); }
.pd-workpage__featured { display: grid; gap: var(--space-6) var(--gutter); margin-block: var(--space-9) var(--space-8); }
.pd-workpage__media { margin: 0; min-inline-size: 0; }
.pd-workpage__case { min-inline-size: 0; }
/* Index of names (D) and Capabilities (E) open with the same SectionHead --s row as groups A–C, never a second display title. */
.pd-workpage :where(.pd-brands, .pd-cap) > .pd-section-head { margin-block-end: var(--space-5); }
.pd-workpage__lede { max-inline-size: var(--measure); margin: calc(-1 * var(--space-2)) 0 var(--space-5); font: var(--font-body-s); color: var(--text-muted); }
@container pd-page (min-width: 56em) {
  .pd-workpage__featured { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .pd-workpage__media { grid-column: 1 / span 7; }
  .pd-workpage__case { grid-column: 9 / -1; }
}

/* ── SectionPage ───────────────────────────────────────────────────────── */
.pd-secpage__feature { display: grid; gap: var(--space-6) var(--gutter); }
.pd-secpage__media { margin: 0; min-inline-size: 0; }
.pd-secpage__abstract { display: grid; align-content: start; gap: var(--space-4); min-inline-size: 0; position: relative; }
.pd-secpage__title { margin: 0; font: var(--font-headline); letter-spacing: var(--track-display); color: var(--text); text-wrap: balance; }
.pd-secpage__dek { margin: 0; font: var(--font-lede); color: var(--text-muted); text-wrap: pretty; }
.pd-secpage__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-block-start: var(--space-2); }
.pd-secpage__years { display: grid; gap: var(--space-8) var(--gutter); }
.pd-secpage__year { display: grid; align-content: start; gap: var(--space-3); min-inline-size: 0; }
@container pd-page (min-width: 56em) {
  .pd-secpage__feature { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .pd-secpage__media { grid-column: 1 / span 7; }
  .pd-secpage__abstract { grid-column: 9 / -1; }
}

/* ── NowPage ───────────────────────────────────────────────────────────── */
.pd-nowpage__top { padding-block-start: var(--space-8); }
.pd-sectionland__num.pd-nowpage__kind { font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; padding-block-start: var(--space-3); }
.pd-nowpage__time { display: grid; gap: var(--space-8) var(--gutter); align-items: start; }
.pd-nowpage__clock, .pd-nowpage__day { min-inline-size: 0; }
.pd-nowpage__sky { display: grid; gap: var(--space-6) var(--gutter); align-items: start; }
.pd-nowpage__map { min-inline-size: 0; }
.pd-nowpage__skynote { display: grid; justify-items: start; gap: var(--space-4); max-inline-size: var(--measure); }
.pd-nowpage__skynote > p { margin: 0; }
.pd-nowpage__lede { font: var(--font-lede); color: var(--text-muted); text-wrap: pretty; }
/* N.1 and N.2 band heads sit inside NowBlock / WhereNow: give them the band gap */
.pd-nowpage :where(.pd-now, .pd-where) > .pd-section-head { margin-block-end: var(--space-6); }
/* one bindu per page: the clock-dial dot (.pd-vclock__bindu). The map pin and the "Last updated" dot go to ink; the month title steps down to headline so "Now" is the one display heading */
.pd-nowpage .pd-where__bindu { fill: var(--text); stroke: var(--surface); stroke-width: 2px; paint-order: stroke; }
.pd-nowpage .pd-now__live::before { background: var(--text); box-shadow: none; }
.pd-nowpage .pd-pagehead__title { font: var(--font-headline); }
@container pd-page (min-width: 56em) {
  .pd-nowpage__time { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .pd-nowpage__clock { grid-column: 1 / span 7; }
  .pd-nowpage__day { grid-column: 8 / -1; }
  .pd-nowpage__sky { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .pd-nowpage__map { grid-column: 1 / span 7; }
  .pd-nowpage__skynote { grid-column: 9 / -1; align-self: start; padding-block-start: var(--space-7); }
}

/* ── CosmosPage ────────────────────────────────────────────────────────── */
.pd-cosmospage .pd-mark { inline-size: 1em; block-size: 1em; }
.pd-cosmospage .pd-megafoot__motto { margin: 0; font: var(--font-caption); color: var(--text-muted); }
.pd-cosmospage .pd-megafoot__motto::before { content: ""; display: inline-block; inline-size: .4em; block-size: .4em; margin-inline-end: .6em; border-radius: var(--radius-pill); background: var(--text-muted); vertical-align: .1em; }
.pd-cosmospage__head { margin-block: var(--space-8) var(--space-6); }
.pd-cosmospage__hero { min-inline-size: 0; }
.pd-cosmospage__wheel { display: grid; gap: var(--space-7) var(--gutter); align-items: start; }
.pd-cosmospage__ringcol, .pd-cosmospage__list { display: grid; gap: var(--space-3); min-inline-size: 0; }
.pd-cosmospage__ring { display: grid; gap: var(--space-4); margin: 0; }
.pd-cosmospage__ringplot { position: relative; inline-size: 100%; max-inline-size: 34rem; aspect-ratio: 1; margin-inline: auto; }
.pd-cosmospage__ringsvg { display: block; inline-size: 100%; block-size: 100%; overflow: visible; }
.pd-cosmospage__ticks { stroke: var(--text-subtle); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.pd-cosmospage__seg { fill: transparent; stroke: var(--rule-strong); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.pd-cosmospage__seg.is-moon { fill: var(--text); stroke: var(--text); }
.pd-cosmospage__segnum { fill: var(--text-muted); font: 500 13px/1 var(--font-mono); letter-spacing: var(--track-mono); text-anchor: middle; dominant-baseline: central; font-variant-numeric: tabular-nums; }
.pd-cosmospage__segnum.is-moon { fill: var(--surface); }
.pd-cosmospage__hub { fill: none; stroke: var(--rule); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.pd-cosmospage__moondot { fill: var(--text); }
.pd-cosmospage__ringcentre { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--space-2); padding: 30%; text-align: center; pointer-events: none; }
.pd-cosmospage__ringcentre :where(.pd-meta) { color: var(--text-subtle); }
.pd-cosmospage__ringname { font: 500 clamp(var(--fs-title), 6.5vw, var(--fs-display-m))/1 var(--font-display); letter-spacing: var(--track-display); color: var(--text); white-space: nowrap; }
.pd-cosmospage__ringdeva { font: var(--font-lede); color: var(--text-muted); }
.pd-cosmospage__moon[hidden] { display: none; }
@media (forced-colors: active) { .pd-cosmospage__seg.is-moon, .pd-cosmospage__moondot { fill: CanvasText; } .pd-cosmospage__segnum.is-moon { fill: Canvas; } }
.pd-cosmospage__cap { margin: 0; color: var(--text-subtle); }
.pd-cosmospage__naks :where(.pd-rows__end) { display: inline-flex; flex-wrap: wrap; justify-content: end; align-items: baseline; gap: var(--space-2); }
/* the meta sits under the name (never beside it), so a long name like Pūrvabhādrapadā can never run into its degrees */
.pd-cosmospage__naks .pd-rows__name { max-inline-size: 100%; }
@container pd-rows (inline-size >= 30em) {
  .pd-cosmospage__naks .pd-rows__item { grid-template-columns: minmax(0, var(--pd-rows-lead, var(--row-lead))) minmax(0, 1fr); row-gap: var(--space-1); }
  .pd-cosmospage__naks .pd-rows__end { grid-column: 2; justify-self: start; justify-content: start; white-space: normal; }
}
.pd-cosmospage__methodband { display: grid; gap: var(--space-6); }
.pd-cosmospage__method { display: grid; gap: var(--space-6) var(--gutter); align-items: start; }
.pd-cosmospage__methodtext { display: grid; gap: var(--space-3); max-inline-size: var(--measure); }
.pd-cosmospage__methodtext > :where(p, h2) { margin: 0; }
@media (min-width: 48em) { .pd-cosmospage__method { grid-template-columns: repeat(12, minmax(0, 1fr)); } .pd-cosmospage__methodtext { grid-column: 1 / span 6; } .pd-cosmospage__facts { grid-column: 8 / -1; } }
.pd-cosmospage__big { font: 500 var(--fs-display-m)/1 var(--font-display); letter-spacing: var(--track-display); }
.pd-cosmospage__small { font: var(--font-body-s); }
@container pd-page (min-width: 56em) {
  /* hero: the map on 8 columns, the controls in a 4-column rail beside it (no blank half-page) */
  .pd-cosmospage__hero .pd-livesky { inline-size: 100%; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-4) var(--gutter); align-items: start; }
  .pd-cosmospage__hero .pd-livesky__figure { grid-column: 1 / span 8; }
  .pd-cosmospage__hero .pd-livesky__controls { grid-column: 9 / -1; position: sticky; inset-block-start: var(--space-9); }
  .pd-cosmospage__wheel { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .pd-cosmospage__ringcol { grid-column: 1 / span 6; position: sticky; inset-block-start: var(--space-9); }
  .pd-cosmospage__list { grid-column: 8 / -1; }
}

/* ── TattvaPage ────────────────────────────────────────────────────────── */
.pd-tattvapage__intro { display: grid; gap: var(--space-7) var(--gutter); align-items: start; }
.pd-tattvapage__prose { max-inline-size: var(--measure); }
.pd-tattvapage__svara { display: grid; gap: var(--space-4); }
.pd-tattvapage__cap { margin: 0; max-inline-size: var(--measure-wide); color: var(--text-subtle); }
@container pd-page (min-width: 56em) {
  .pd-tattvapage__intro { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .pd-tattvapage__intro > .pd-verse { grid-column: 1 / span 5; }
  .pd-tattvapage__prose { grid-column: 7 / -1; }
}

/* ── StyleguidePage ────────────────────────────────────────────────────── */
.pd-styleguide__head { margin-block-start: var(--space-8); }
.pd-styleguide__tok { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text); overflow-wrap: anywhere; }
.pd-styleguide__use { font: var(--font-caption); color: var(--text-muted); }
.pd-styleguide__val { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.pd-styleguide__dek { font: var(--font-caption); color: var(--text-muted); }
.pd-styleguide__identity { display: grid; gap: var(--space-7) var(--gutter); align-items: start; }
.pd-styleguide__locks { display: grid; gap: var(--space-5); justify-items: start; }
.pd-styleguide__say { margin: 0; font: var(--font-body); color: var(--text-muted); max-inline-size: var(--measure); }
.pd-styleguide__locks > .pd-facts { inline-size: 100%; }
.pd-styleguide__sub { display: grid; gap: var(--space-4); padding-block-start: var(--space-6); }
.pd-styleguide__swatches, .pd-styleguide__els, .pd-styleguide__tgs, .pd-styleguide__grads, .pd-styleguide__themes, .pd-styleguide__types, .pd-styleguide__spaces, .pd-styleguide__scale { margin: 0; padding: 0; list-style: none; }
.pd-styleguide__swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); gap: var(--space-5) var(--gutter); }
.pd-styleguide__swatch { display: grid; gap: var(--space-1); min-inline-size: 0; }
.pd-styleguide__chip { block-size: 4.5rem; margin-block-end: var(--space-2); background: var(--pd-sg); border: var(--hairline) solid var(--rule); }
.pd-styleguide__themes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--gutter); }
.pd-styleguide__theme { display: grid; gap: var(--space-2); padding: var(--space-4); background: var(--surface); color: var(--text); border: var(--hairline) solid var(--rule); }
.pd-styleguide__tname { font: var(--font-title); }
.pd-styleguide__tdots { display: flex; gap: var(--space-2); }
.pd-styleguide__tdots > span { inline-size: 1.25rem; block-size: 1.25rem; border-radius: var(--radius-pill); background: var(--pd-sg); border: var(--hairline) solid var(--rule); }
.pd-styleguide__tline { font: 500 var(--fs-headline)/1 var(--font-display); }
.pd-styleguide__els { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--space-5) var(--gutter); }
.pd-styleguide__el { display: grid; gap: var(--space-2); justify-items: start; padding-block-start: var(--space-3); border-block-start: 2px solid var(--pd-sg); }
.pd-styleguide__el .pd-elglyph { inline-size: 3rem; block-size: 3rem; }
.pd-styleguide__elname { font: var(--font-title); }
.pd-styleguide__elname [lang="sa"] { font-family: var(--font-deva); font-size: var(--fs-label); color: var(--text-muted); }
.pd-styleguide__tgs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: var(--space-2); }
.pd-styleguide__tg { display: grid; gap: var(--space-1); padding: var(--space-3); background: var(--pd-sg); color: var(--pd-sg-on); min-block-size: 4.5rem; align-content: space-between; }
.pd-styleguide__tgname { font: var(--font-label); }
.pd-styleguide__tgrange { font: var(--font-meta); letter-spacing: var(--track-mono); }
.pd-styleguide__scale { display: grid; grid-template-columns: repeat(36, minmax(0, 1fr)); gap: 1px; }
.pd-styleguide__scale > li { display: grid; align-items: end; block-size: 3.5rem; padding: var(--space-1) 0; background: var(--pd-sg); }
.pd-styleguide__scale > li > span { justify-self: center; font: var(--font-meta); color: var(--text); background: var(--surface); padding-inline: .15em; }
.pd-styleguide__scale > li:nth-child(odd) > span { visibility: hidden; }
.pd-styleguide__grads { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--gutter); }
.pd-styleguide__grad { display: grid; gap: var(--space-2); }
.pd-styleguide__gchip { block-size: 6rem; background: var(--pd-sg); }
.pd-styleguide__types { display: grid; }
.pd-styleguide__type { display: grid; gap: var(--space-2) var(--gutter); padding-block: var(--space-4); border-block-start: var(--hairline) solid var(--rule); min-inline-size: 0; }
.pd-styleguide__type:last-child { border-block-end: var(--hairline) solid var(--rule); }
.pd-styleguide__sample { color: var(--text); overflow-wrap: anywhere; min-inline-size: 0; }
.pd-styleguide__spacegrid { display: grid; gap: var(--space-7) var(--gutter); align-items: start; }
.pd-styleguide__spaces { display: grid; gap: var(--space-2); font-size: 1rem; }
.pd-styleguide__space { display: grid; grid-template-columns: 7rem minmax(0, 1fr) 4rem; align-items: center; gap: var(--space-4); }
.pd-styleguide__bar { block-size: .75rem; inline-size: var(--pd-sg); background: var(--text); }
.pd-styleguide__index { display: grid; gap: var(--space-7) calc(var(--gutter) * 2); align-items: start; }
.pd-styleguide__group { display: grid; gap: var(--space-2); min-inline-size: 0; break-inside: avoid; }
.pd-styleguide__comps { margin: 0; }
.pd-styleguide__comps > .pd-rows__item { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: var(--space-1) var(--space-4); align-items: baseline; }
@container pd-page (min-width: 56em) {
  .pd-styleguide__identity { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .pd-styleguide__identity > .pd-styleguide__sign { grid-column: 1 / span 7; position: sticky; top: calc(var(--masthead-h, 4rem) + var(--space-5)); min-block-size: 26rem; } /* holds its column beside the specimen stack */
  .pd-styleguide__locks { grid-column: 9 / -1; }
  .pd-styleguide__type { grid-template-columns: 12rem minmax(0, 1fr); align-items: baseline; }
  .pd-styleguide__spacegrid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .pd-styleguide__spaces { grid-column: 1 / span 7; }
  .pd-styleguide__layout { grid-column: 9 / -1; }
  .pd-styleguide__index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (forced-colors: active) {
  .pd-styleguide__chip, .pd-styleguide__tg, .pd-styleguide__scale > li, .pd-styleguide__gchip, .pd-styleguide__tdots > span { forced-color-adjust: none; }
}

/* ── crumbs + landing on every section page ───────────────────────────────── */
.pd-soundpage__crumbs, .pd-reviewspage__crumbs, .pd-teachpage__crumbs, .pd-viewspage__crumbs, .pd-learnpage__crumbs { padding-block: var(--space-5) var(--space-6); }


/* ── SoundPage ─────────────────────────────────────────────────────────── */
.pd-soundpage__player, .pd-soundpage__reviews, .pd-soundpage__listen { display: grid; gap: var(--space-7) var(--gutter); }
.pd-soundpage__player > *, .pd-soundpage__reviews > *, .pd-soundpage__strip, .pd-soundpage__log { min-inline-size: 0; }
/* One saffron moment per view: on /sound the 06.1 player thumb is the bindu, so every other playhead/live dot goes to ink. */
.pd-soundpage .pd-listen__dot { background: var(--text); box-shadow: 0 0 0 2px var(--surface); }
.pd-soundpage .pd-tracks__prog::after { background: var(--text); box-shadow: 0 0 0 2px var(--surface); }
.pd-soundpage .pd-wave__head::after { background: var(--text); box-shadow: 0 0 0 2px var(--surface); }
@media (forced-colors: active) { .pd-soundpage .pd-listen__dot, .pd-soundpage .pd-tracks__prog::after, .pd-soundpage .pd-wave__head::after { background: CanvasText; box-shadow: none; } }
@container pd-page (min-width: 56em) {
  .pd-soundpage__player, .pd-soundpage__reviews { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .pd-soundpage__player > * { grid-column: 1 / span 8; }
  .pd-soundpage__reviews > * { grid-column: span 6; }
  .pd-soundpage__listen { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .pd-soundpage__strip { grid-column: 1 / span 4; position: sticky; inset-block-start: var(--space-9); }
  .pd-soundpage__log { grid-column: 6 / -1; }
}

/* ── ReviewsPage ───────────────────────────────────────────────────────── */
.pd-reviewspage__feature { display: grid; gap: var(--space-7) var(--gutter); }
.pd-reviewspage__lead, .pd-reviewspage__side { min-inline-size: 0; }
.pd-reviewspage__side { display: grid; align-content: start; gap: var(--space-6); }
@container pd-page (min-width: 64em) {
  .pd-reviewspage__feature { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .pd-reviewspage__lead { grid-column: 1 / span 8; }
  .pd-reviewspage__side { grid-column: 10 / -1; }
}
/* One heading system: the page's section heads (—.1, —.2) replace the index's own display head; the verdict legend stays. */
.pd-reviewspage .pd-reviews__head > :where(.pd-reviews__kicker, .pd-reviews__title, .pd-reviews__lede) { display: none; }
.pd-reviewspage .pd-reviews__head { padding-block-start: 0; border-block-start: 0; }
.pd-reviewspage .pd-reviews__legend { margin-block-start: 0; }
/* Featured art fills its frame edge to edge, like Gallery and Figure (no plate inside a plate). */
.pd-reviewspage .pd-review--featured .pd-review__media { padding: 0; background: none; }
.pd-reviewspage .pd-review--featured .pd-review__media > :where(img, .pd-ph, svg) { inline-size: 100%; block-size: 100%; max-block-size: none; aspect-ratio: auto; }

/* ── TeachingPage ──────────────────────────────────────────────────────── */
.pd-teachpage__syllabus, .pd-teachpage__lesson { min-inline-size: 0; max-inline-size: none; }
/* Full measure on the page: blocks end on the same right edge as the section rules above them (12-col: 8 + 4). */
.pd-teachpage .pd-syllabus, .pd-teachpage .pd-lesson { max-inline-size: none; }
@container pd-syllabus (min-width: 48em) { .pd-teachpage__syllabus .pd-syllabus__grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } }
.pd-teachpage .pd-lesson-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.pd-teachpage__lesson { margin-block-start: var(--space-8); }

/* ── ViewsPage ─────────────────────────────────────────────────────────── */
/* Both blocks run the full page measure so their right edges meet the section-head rule. */
.pd-viewspage__view, .pd-viewspage__list { max-inline-size: none; min-inline-size: 0; }
.pd-viewspage__view > .pd-view { max-inline-size: none; }
.pd-viewspage__note { margin: 0; max-inline-size: var(--measure); color: var(--text-subtle); }

/* ── LearningPage ──────────────────────────────────────────────────────── */
.pd-learnpage__map, .pd-learnpage__skill, .pd-learnpage__log { min-inline-size: 0; }
.pd-learnpage__skill { max-inline-size: 72rem; }

/* SectionLanding as page opener: air before the first band when it carries no filter/rows */
.pd-home__landing, .pd-workpage__landing, .pd-secpage__landing, .pd-nowpage__landing, .pd-cosmospage__landing, .pd-tattvapage__landing, .pd-styleguide__landing, .pd-soundpage__landing, .pd-reviewspage__landing, .pd-teachpage__landing, .pd-viewspage__landing, .pd-learnpage__landing { margin-block-end: var(--space-8); }
/* Rhythm: a band's own padding-block-start (--space-9) is the one gap between blocks, so a landing followed by a band adds no margin of its own. */
:is(.pd-secpage__landing, .pd-viewspage__landing):has(+ :is(.pd-secpage__band, .pd-viewspage__band)) { margin-block-end: 0; }

/* styleguide: identity marks, duality, motion */
.pd-styleguide__marks { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-6) var(--space-7); padding-block-end: var(--space-5); border-block-end: var(--hairline) solid var(--rule); }
.pd-styleguide__sign { display: grid; justify-items: start; font-size: clamp(1.125rem, 3.2vw, 2.5rem); } /* the stacked signature at display size (LogoUsage .pd-logo__lock--stack) */
.pd-styleguide__sign.pd-logo__stage { justify-items: center; align-content: center; padding: var(--space-7) var(--space-5); } /* the hero signature on the sunken LogoUsage stage, centred */
.pd-styleguide__sign .pd-logo__lock--stack { text-align: start; }
.pd-styleguide__sign .pd-logo__lock--stack .pd-logo__lock-text { justify-items: start; }
.pd-styleguide__sign .pd-logo__lock { flex-direction: column; align-items: flex-start; }
.pd-styleguide__lock { font-size: .8125rem; min-block-size: var(--target-min); }
.pd-styleguide__fav { display: grid; place-items: center; inline-size: 3.5rem; block-size: 3.5rem; font-size: 2.6rem; background: var(--jade-700); color: var(--on-jade); border-radius: var(--radius-2); }
.pd-styleguide__fav .pd-mark { inline-size: 1em; block-size: 1em; }
.pd-styleguide__mk { display: grid; justify-items: start; gap: var(--space-2); margin: 0; }
.pd-styleguide__avatar { inline-size: 3.5rem; block-size: 3.5rem; color: var(--text); }
.pd-styleguide__duo { display: grid; gap: var(--space-6) var(--gutter); align-items: center; }
.pd-styleguide__duo > .pd-pair--block { font-size: var(--fs-display-m); }
.pd-styleguide__breath { min-inline-size: 0; }
@container pd-page (min-width: 56em) {
  .pd-styleguide__duo { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .pd-styleguide__duo > .pd-pair--block { grid-column: 1 / span 6; }
  .pd-styleguide__duo > .pd-styleguide__say { grid-column: 8 / -1; }
  .pd-styleguide__spacegrid > .pd-styleguide__breath { grid-column: 1 / span 5; grid-row: 1; min-inline-size: 20rem; }
  .pd-styleguide__spacegrid:has(> .pd-styleguide__breath) > .pd-styleguide__layout { grid-column: 7 / -1; }
}

/* ── AboutPage (.pd-aboutpage): the same site frame as every page (masthead, main, SiteFooterMega) around article.pd-about ── */
.pd-aboutpage { container: pd-page / inline-size; display: flow-root; min-block-size: 100vh; background: var(--surface); color: var(--text); }
.pd-aboutpage > main { display: block; padding-block-end: var(--space-10); }
.pd-aboutpage > main:focus { outline: 0; }
.pd-aboutpage__wrap { box-sizing: border-box; inline-size: 100%; max-inline-size: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }
.pd-aboutpage__crumbs { padding-block: var(--space-5) var(--space-6); }
.pd-aboutpage [data-section][hidden] { display: none; }
}

/* ── part: pro.css ── */
/* ══ pro — Professional package ══════════════════════════════════════════════════════════════════
   Owns the prefix .pd-pro-*:
   documents  .pd-pro-doc .pd-pro-sheet .pd-pro-sig .pd-pro-head .pd-pro-foot .pd-pro-motto .pd-pro-h .pd-pro-table
              .pd-pro-cv  (ResumeCV) · .pd-pro-prop (ProposalTemplate) · .pd-pro-inv (InvoiceTemplate)
   screen     .pd-pro-svc (ServicesEngagement) · .pd-pro-inq (InquiryForm) · .pd-pro-press (PressKit)
              .pd-pro-quote (CollaboratorQuote) · .pd-pro-avail (AvailabilityBadge)
   Documents are set in em off one base size, so the same markup is an on-screen page, an A4 sheet
   preview and an exact A4 print. Sheets sit on .pd-paper (Paper re-pinned); print is black ink on white.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
@layer components.site {

/* ── Document base ── */
.pd-pro-doc {
  container: pd-pro-doc / inline-size; box-sizing: border-box; display: grid; align-content: start; gap: 1.5em;
  font-size: var(--pd-pro-em, 25px); font-family: var(--font-text); line-height: 1.5; color: var(--text);
  font-variant-numeric: tabular-nums; hanging-punctuation: first;
}
.pd-pro-doc :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote) { margin: 0; }
.pd-pro-doc :where(ul, ol) { padding: 0; list-style: none; }
/* A4 sheet: 37.2em wide = 210 mm; the base size is the scale. */
.pd-paper.pd-pro-sheet, .pd-pro-sheet {
  --surface-sunken: var(--paper-100); --border-control: var(--line-300); --text-subtle: var(--ink-500);
  inline-size: 37.2em; max-inline-size: 100%; min-block-size: calc(37.2em * 297 / 210); grid-template-rows: auto 1fr auto; gap: 1.4em;
  padding: 2.5em 2.75em 1.75em; font-size: var(--pd-pro-sheet-em, min(20px, calc((100vw - 2.5rem) / 37.2)));
  page: pd-pro-a4;
}
.pd-pro-doc > .pd-pro-body { display: grid; align-content: start; gap: 1.5em; min-block-size: 0; }
.pd-pro-sheet--cover > .pd-pro-body { align-content: space-between; }
.pd-pro-stack { display: grid; justify-items: center; gap: 2rem; }
.pd-pro-noprint { }

/* Signature: portrait mark + "Pandox", optional mono line beneath */
.pd-pro-sig { display: inline-flex; align-items: center; gap: .55em; min-inline-size: 0; color: var(--text); text-decoration: none; }
.pd-pro-sig .pd-mark { inline-size: 2.5em; block-size: 2.5em; fill: currentColor; }
.pd-pro-sig__name { display: block; font: 500 1.5em/1 var(--font-display); letter-spacing: -.01em; color: var(--text); }
.pd-pro-sig--sm { font-size: .7em; }
.pd-pro-sig__sub { display: block; margin-block-start: .4em; font: .54em/1.3 var(--font-mono); letter-spacing: .04em; color: var(--text-muted); white-space: nowrap; }

.pd-pro-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: .8em 1.5em; padding-block-end: .9em; border-block-end: 1px solid var(--rule-strong); }
.pd-pro-head__meta { margin: 0; font: normal .54em/1.75 var(--font-mono); letter-spacing: var(--track-mono); color: var(--text-muted); text-align: end; }
@container pd-pro-doc (inline-size < 30em) { .pd-pro-head__meta { text-align: start; } }
.pd-pro-head__meta a { color: inherit; text-decoration: none; }
.pd-pro-head__meta a:hover { text-decoration: underline; }

.pd-pro-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .3em 1.2em; padding-block-start: .8em; border-block-start: 1px solid var(--rule); font: .5em/1.5 var(--font-mono); letter-spacing: .04em; color: var(--text-subtle); }
.pd-pro-motto { display: inline; font: italic 400 1.25em/1.3 var(--font-text); letter-spacing: 0; color: var(--text-muted); text-wrap: pretty; }
.pd-pro-motto .pd-pro-bindu { margin-inline-start: .35em; vertical-align: .08em; }
.pd-pro-motto--page { display: block; margin: 0; font-size: var(--fs-caption); }
.pd-pro-bindu { flex: none; display: inline-block; inline-size: .5em; block-size: .5em; border-radius: var(--radius-pill); background: var(--bindu); box-shadow: inset 0 0 0 1px var(--bindu-rim); }
.pd-pro-sheet .pd-pro-bindu { background: var(--saffron-500); box-shadow: inset 0 0 0 1px var(--saffron-700); }
.pd-paper--mono .pd-pro-bindu { background: var(--ink-900); box-shadow: none; }

/* Section heading inside a document */
.pd-pro-h { display: flex; align-items: baseline; gap: .7em; padding-block-start: .55em; border-block-start: 1px solid var(--rule-strong); font: 600 .54em/1.3 var(--font-sans); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text); }
.pd-pro-h__n { font: 400 1em/1 var(--font-mono); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-pro-sec { display: grid; gap: .8em; align-content: start; break-inside: avoid; }
.pd-pro-p { font-size: .66em; line-height: 1.6; color: var(--text); text-wrap: pretty; max-inline-size: 38em; }
.pd-pro-p--note { font-size: .56em; color: var(--text-subtle); }
.pd-pro-p--lede { font: italic 400 .86em/1.45 var(--font-text); color: var(--text-muted); max-inline-size: 30em; }
.pd-pro-kicker { font: 600 .52em/1.3 var(--font-sans); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }

/* Key/value pairs in a document */
.pd-pro-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .45em 1.2em; font-size: .6em; line-height: 1.45; }
.pd-pro-kv dt { font: 500 .86em/1.6 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--text-subtle); }
.pd-pro-kv dd { margin: 0; color: var(--text); }

/* Table inside a document */
.pd-pro-table { inline-size: 100%; border-collapse: collapse; font-size: .6em; line-height: 1.45; }
.pd-pro-table caption { caption-side: top; text-align: start; padding-block-end: .5em; font: italic 400 1em/1.4 var(--font-text); color: var(--text-muted); }
.pd-pro-table th { padding: .5em .8em .5em 0; font: 500 .82em/1.3 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; text-align: start; vertical-align: bottom; color: var(--text-subtle); border-block-end: var(--hairline) solid var(--rule-strong); } /* print modifier of the DataTable chassis */
.pd-pro-table td { padding: .6em .8em .6em 0; vertical-align: top; color: var(--text); border-block-end: var(--hairline) solid var(--rule); }
.pd-pro-table :where(th, td):last-child { padding-inline-end: 0; }
.pd-pro-table :is(th, td).pd-pro-num { text-align: end; white-space: nowrap; font-family: var(--font-mono); font-size: .92em; }
.pd-pro-table :where(.pd-pro-no) { inline-size: 2.4em; font-family: var(--font-mono); font-size: .92em; color: var(--text-subtle); }
.pd-pro-table td b { font-weight: 600; }
.pd-pro-table tfoot td { border-block-end: 0; }

/* Narrow screens: the sheet reflows to a readable page (no A4 aspect, no scaling) */
@media screen and (max-width: 40rem) {
  .pd-paper.pd-pro-sheet, .pd-pro-sheet { --pd-pro-sheet-em: 22px; inline-size: 100%; min-block-size: 0; padding: 1.3em 1em 1.1em; }
}

/* ── ResumeCV ── */
.pd-pro-cv__intro { display: grid; gap: .55em; }
.pd-pro-cv__name { font: 500 2.4em/1 var(--font-display); letter-spacing: -.015em; color: var(--text); }
.pd-pro-cv__summary { font: 400 .78em/1.5 var(--font-text); color: var(--text-muted); max-inline-size: 34em; text-wrap: pretty; }
.pd-pro-cv__cols { display: grid; gap: 1.5em; align-items: start; }
.pd-pro-cv__main, .pd-pro-cv__side { display: grid; gap: 1.4em; align-content: start; min-inline-size: 0; }
.pd-pro-cv__list { display: grid; gap: .1em; }
.pd-pro-cv__item { display: grid; grid-template-columns: 5.6em minmax(0, 1fr); gap: .2em .9em; padding-block: .55em; border-block-end: 1px solid var(--rule); }
.pd-pro-cv__item:last-child { border-block-end: 0; }
.pd-pro-cv__when { padding-block-start: .2em; font: .52em/1.5 var(--font-mono); letter-spacing: .03em; color: var(--text-subtle); white-space: nowrap; }
.pd-pro-cv__role { font: 600 .66em/1.35 var(--font-sans); color: var(--text); }
.pd-pro-cv__org { font: italic 400 .74em/1.35 var(--font-text); color: var(--text-muted); }
.pd-pro-cv__pts { display: grid; gap: .2em; margin-block-start: .3em; font-size: .62em; line-height: 1.5; color: var(--text); }
.pd-pro-cv__pts li { position: relative; padding-inline-start: 1em; }
.pd-pro-cv__pts li::before { content: "–"; position: absolute; inset-inline-start: 0; color: var(--text-subtle); }
.pd-pro-cv__side .pd-pro-cv__item { grid-template-columns: minmax(0, 1fr); }
.pd-pro-cv__skills { display: grid; gap: .55em; }
.pd-pro-cv__skill { display: grid; gap: .15em; padding-block-end: .5em; border-block-end: 1px solid var(--rule); }
.pd-pro-cv__skill:last-child { border-block-end: 0; }
.pd-pro-cv__skill dt { font: 600 .6em/1.35 var(--font-sans); color: var(--text); }
.pd-pro-cv__skill dd { margin: 0; font-size: .6em; line-height: 1.5; color: var(--text-muted); }
.pd-pro-cv__works { display: grid; gap: .1em; counter-reset: pd-pro-w; }
.pd-pro-cv__work { display: grid; grid-template-columns: 1.8em minmax(0, 1fr) auto; gap: .8em; align-items: baseline; padding-block: .45em; border-block-end: 1px solid var(--rule); font-size: .64em; counter-increment: pd-pro-w; }
.pd-pro-cv__work::before { content: counter(pd-pro-w, decimal-leading-zero); font: .82em/1 var(--font-mono); color: var(--text-subtle); }
.pd-pro-cv__work b { font-weight: 600; font-family: var(--font-sans); font-size: .96em; }
.pd-pro-cv__work span:last-child { font: .82em/1.3 var(--font-mono); color: var(--text-subtle); white-space: nowrap; }
@container pd-pro-doc (inline-size >= 30em) {
  .pd-pro-cv__cols { grid-template-columns: minmax(0, 1fr) 10.5em; gap: 2em; }
  .pd-pro-cv__side { padding-inline-start: 1.2em; border-inline-start: 1px solid var(--rule); }
}
.pd-pro-cv-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); inline-size: 100%; padding-block: var(--space-3); border-block: var(--hairline) solid var(--rule); }
.pd-pro-cv-bar__acts { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ── ProposalTemplate ── */
.pd-pro-prop__cover { display: grid; gap: .8em; padding-block: 3em 1em; }
.pd-pro-prop__title { font: 400 3em/1 var(--font-display); letter-spacing: -.02em; color: var(--text); text-wrap: balance; max-inline-size: 11em; }
.pd-pro-prop__title em { font-style: italic; }
.pd-pro-prop__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9em, 1fr)); border-block-start: 1px solid var(--rule-strong); }
.pd-pro-prop__fact { display: grid; gap: .25em; padding: .7em .8em .7em 0; border-block-end: 1px solid var(--rule); }
.pd-pro-prop__fact dt { font: 500 .5em/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-subtle); }
.pd-pro-prop__fact dd { margin: 0; font-size: .66em; line-height: 1.4; color: var(--text); }
.pd-pro-gantt { display: grid; grid-template-columns: 7em repeat(12, minmax(0, 1fr)); font-size: .58em; border-block-end: 1px solid var(--rule); }
.pd-pro-gantt__head { display: contents; }
.pd-pro-gantt__head span { padding-block: .4em; font: .86em/1 var(--font-mono); color: var(--text-subtle); border-block-end: 1px solid var(--rule-strong); text-align: center; }
.pd-pro-gantt__head span:first-child { text-align: start; }
.pd-pro-gantt__head .pd-pro-gantt__dates { grid-column: 2 / -1; display: flex; justify-content: space-between; gap: 1em; }
.pd-pro-gantt__dates span { padding: 0; border: 0; }
.pd-pro-gantt__row { display: contents; }
.pd-pro-gantt__name { grid-column: 1; padding: .55em .6em .55em 0; font-weight: 600; font-family: var(--font-sans); border-block-start: 1px solid var(--rule); }
.pd-pro-gantt__name small { display: block; font: 400 .9em/1.3 var(--font-mono); color: var(--text-subtle); }
.pd-pro-gantt__track { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; border-block-start: 1px solid var(--rule); background-image: repeating-linear-gradient(90deg, transparent 0 calc(100% / 12 - 1px), var(--rule) calc(100% / 12 - 1px) calc(100% / 12)); }
.pd-pro-gantt__bar { grid-column: var(--s) / var(--e); block-size: .9em; background: var(--text); }
.pd-pro-gantt__bar--soft { background: repeating-linear-gradient(135deg, var(--text) 0 1px, transparent 1px 4px); box-shadow: inset 0 0 0 1px var(--text); }
.pd-pro-prop__terms { display: grid; gap: .45em; counter-reset: pd-pro-t; font-size: .62em; line-height: 1.5; }
.pd-pro-prop__terms li { display: grid; grid-template-columns: 2em minmax(0, 1fr); counter-increment: pd-pro-t; }
.pd-pro-prop__terms li::before { content: counter(pd-pro-t, decimal-leading-zero); font: .86em/1.7 var(--font-mono); color: var(--text-subtle); }
.pd-pro-prop__terms b { font-weight: 600; font-family: var(--font-sans); }
.pd-pro-signs { display: grid; grid-template-columns: repeat(auto-fit, minmax(12em, 1fr)); gap: 1.2em 2em; }
.pd-pro-sign { display: grid; gap: .8em; align-content: start; }
.pd-pro-sign__who { font: 600 .56em/1.3 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
.pd-pro-sign__line { display: grid; gap: .3em; padding-block-start: 1.8em; border-block-end: 1px solid var(--rule-strong); }
.pd-pro-sign__line span { order: 2; padding-block: .3em; font: .5em/1.3 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--text-subtle); }
.pd-pro-sign__lines { display: grid; gap: 0; }
.pd-pro-sign__lines > div { display: grid; grid-template-columns: 5em minmax(0, 1fr); align-items: end; min-block-size: 2.2em; border-block-end: 1px solid var(--rule-strong); }
.pd-pro-sign__lines dt { padding-block: .4em; font: .5em/1.3 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--text-subtle); }
.pd-pro-sign__lines dd { margin: 0; padding-block: .3em; font-size: .64em; color: var(--text); }
.pd-pro-sign__script { font: italic 500 1.2em/1 var(--font-display); }
.pd-pro-total { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 1em; padding-block: .7em .5em; border-block: 1px solid var(--rule-strong); }
.pd-pro-total dt { font: 600 .56em/1.3 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; }
.pd-pro-total dd { margin: 0; font: 500 1.2em/1 var(--font-display); }
.pd-pro-total__cur { font: .5em/1 var(--font-mono); letter-spacing: .03em; }

/* ── InvoiceTemplate ── */
.pd-pro-tpl { display: flex; flex-wrap: wrap; align-items: center; gap: .4em .9em; padding: .55em .8em; border: 1px dashed var(--rule-strong); font: .52em/1.45 var(--font-mono); letter-spacing: .03em; color: var(--text); }
.pd-pro-tpl b { padding: .15em .55em; font: 700 1em/1.3 var(--font-sans); letter-spacing: .18em; color: var(--surface); background: var(--text); }
.pd-pro-inv__top { display: grid; gap: 1.2em; align-items: start; }
.pd-pro-inv__title { font: 400 2.8em/.95 var(--font-display); letter-spacing: -.02em; color: var(--text); }
.pd-pro-inv__parties { display: grid; gap: 1.2em; }
.pd-pro-party { display: grid; gap: .4em; align-content: start; padding-block-start: .5em; border-block-start: 1px solid var(--rule); }
.pd-pro-party address { font: normal .62em/1.6 var(--font-text); color: var(--text); }
.pd-pro-party address b { font: 600 1em/1.4 var(--font-sans); }
.pd-pro-inv__sum { display: grid; gap: 0; inline-size: min(100%, 17em); margin-inline-start: auto; }
.pd-pro-inv__sum > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1em; padding-block: .45em; border-block-end: 1px solid var(--rule); font-size: .6em; }
.pd-pro-inv__sum dt { color: var(--text-muted); }
.pd-pro-inv__sum dd { margin: 0; font-family: var(--font-mono); text-align: end; }
.pd-pro-inv__sum .pd-pro-total dd { font-family: var(--font-display); text-align: end; }
.pd-pro-inv__sum .pd-pro-total { font-size: 1em; border-block-end: 1px solid var(--rule-strong); }
.pd-pro-inv__pay { display: grid; gap: 1em; padding: .9em 1em; border: 1px solid var(--rule-strong); }
.pd-pro-inv__note { font-size: .58em; line-height: 1.55; color: var(--text-muted); max-inline-size: 36em; }
.pd-pro-stamp { display: inline-flex; align-items: center; gap: .45em; padding: .3em .7em; border: 1.5px solid currentColor; font: 700 .54em/1.2 var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--text); }
.pd-pro-stamp::before { content: ""; inline-size: .8em; block-size: .8em; border: .14em solid currentColor; border-radius: var(--radius-pill); box-sizing: border-box; }
.pd-pro-stamp[data-state="sent"]::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.pd-pro-stamp[data-state="paid"]::before { background: currentColor; }
.pd-pro-stamp[data-state="overdue"] { color: var(--danger); }
.pd-pro-stamp[data-state="overdue"]::before { border-radius: 0; rotate: 45deg; inline-size: .7em; block-size: .7em; }
.pd-pro-stamp[data-state="template"] { border-style: dashed; }
.pd-pro-stamps { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: 20px; }
@container pd-pro-doc (inline-size >= 30em) {
  .pd-pro-inv__top { grid-template-columns: minmax(0, 1fr) auto; }
  .pd-pro-inv__parties { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pd-pro-inv__pay { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}

/* ── ServicesEngagement ── */
.pd-pro-svc { container: pd-pro-svc / inline-size; display: grid; gap: var(--space-7); color: var(--text); }
.pd-pro-svc .pd-pagehead { margin-block-end: 0; }
.pd-pro-svc__grid { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-pro-svc__item { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: var(--space-3); align-content: start; padding: var(--space-5) 0 var(--space-6); border-block-end: var(--hairline) solid var(--rule); }
.pd-pro-svc__num { font: var(--font-numeral); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-pro-svc__name { margin: 0; font: var(--font-headline); color: var(--text); }
.pd-pro-svc__name em { font-style: italic; font-weight: 400; }
.pd-pro-svc__lede { margin: 0; font: var(--font-body-s); color: var(--text-muted); max-inline-size: 30em; text-wrap: pretty; }
.pd-pro-svc__incl { display: grid; gap: var(--space-2); align-content: start; }
.pd-pro-svc__incl ul { margin: 0; padding: 0; list-style: none; display: grid; font: var(--font-body-s); }
.pd-pro-svc__incl li { position: relative; padding: var(--space-2) 0 var(--space-2) 1.25em; border-block-start: var(--hairline) solid var(--rule); }
.pd-pro-svc__incl li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: calc(var(--space-2) + .6em); inline-size: .45em; block-size: .45em; background: var(--text); }
.pd-pro-svc__price { display: grid; gap: var(--space-1); padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-pro-svc__price b { font: 500 var(--fs-title)/1.15 var(--font-display); font-weight: 500; color: var(--text); }
.pd-pro-svc__price b .pd-pro-svc__per { font: var(--font-body-s); color: var(--text-muted); }
.pd-pro-svc__cta { justify-self: start; margin-block-start: var(--space-2); }
.pd-pro-svc .pd-facts { --label-col: 7.5rem; }
.pd-pro-svc__steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: pd-pro-s; border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-pro-svc__step { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-1) var(--space-3); padding-block: var(--space-4); border-block-end: var(--hairline) solid var(--rule); counter-increment: pd-pro-s; align-content: start; }
.pd-pro-svc__steps-h { margin: 0; }
.pd-pro-svc__step::before { content: counter(pd-pro-s, decimal-leading-zero); grid-row: span 2; font: var(--font-numeral); letter-spacing: var(--track-mono); color: var(--text-subtle); padding-block-start: .3em; }
.pd-pro-svc__step b { font: var(--font-title); font-weight: 500; }
.pd-pro-svc__step span { font: var(--font-body-s); color: var(--text-muted); }
.pd-pro-svc__close { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-6); padding: var(--space-6) 0; border-block: var(--hairline) solid var(--rule-strong); }
.pd-pro-svc__close h3 { margin: 0; font: var(--font-headline); }
.pd-pro-svc__close p { margin: var(--space-2) 0 0; font: var(--font-body-s); color: var(--text-muted); max-inline-size: 34em; }
.pd-pro-svc__close-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.pd-pro-svc--closed .pd-pro-svc__cta { display: none; }
@container pd-pro-svc (inline-size >= 40rem) {
  .pd-pro-svc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0; }
  .pd-pro-svc__item { padding-inline: var(--space-5); }
  .pd-pro-svc__item:nth-child(odd) { padding-inline-start: 0; }
  .pd-pro-svc__item:nth-child(even) { border-inline-start: var(--hairline) solid var(--rule); }
  .pd-pro-svc__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pd-pro-svc__step { grid-template-columns: minmax(0, 1fr); padding-inline-end: var(--space-4); border-block-end: 0; }
  .pd-pro-svc__steps-h { margin: 0; }
.pd-pro-svc__step::before { grid-row: auto; }
  .pd-pro-svc__step + .pd-pro-svc__step { padding-inline-start: var(--space-4); border-inline-start: var(--hairline) solid var(--rule); }
}
@container pd-pro-svc (inline-size >= 68rem) {
  .pd-pro-svc__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pd-pro-svc__item:nth-child(odd) { padding-inline-start: var(--space-5); }
  .pd-pro-svc__item:first-child { padding-inline-start: 0; }
  .pd-pro-svc__item + .pd-pro-svc__item { border-inline-start: var(--hairline) solid var(--rule); }
  .pd-pro-svc__item:last-child { padding-inline-end: 0; }
}

/* ── AvailabilityBadge ── */
.pd-pro-avail { --pd-pro-avail-dot: .625rem; display: inline-flex; align-items: center; gap: var(--space-2); box-sizing: border-box; min-block-size: 2rem; margin: 0; padding: var(--space-1) var(--space-3) var(--space-1) var(--space-3); font: var(--font-label); color: var(--text); text-decoration: none; white-space: nowrap; border: var(--hairline) solid var(--border-control); border-radius: var(--radius-pill); background: var(--surface); }
.pd-pro-avail__dot { position: relative; flex: none; box-sizing: border-box; inline-size: var(--pd-pro-avail-dot); block-size: var(--pd-pro-avail-dot); border-radius: var(--radius-pill); border: 1.5px solid var(--text); }
.pd-pro-avail[data-state="open"] .pd-pro-avail__dot { border: 0; background: var(--bindu); box-shadow: inset 0 0 0 1.5px var(--bindu-rim); }
.pd-pro-avail[data-state="booked"] .pd-pro-avail__dot { background: linear-gradient(90deg, var(--text) 50%, transparent 50%); }
.pd-pro-avail[data-state="closed"] .pd-pro-avail__dot::after { content: ""; position: absolute; inset: 50% -2px auto; block-size: 1.5px; background: var(--text); rotate: -45deg; translate: 0 -50%; }
/* --echo: a repeat of the availability pill further down the page; ink dot, so the page keeps one bindu (the first pill) */
.pd-pro-avail--echo[data-state="open"] .pd-pro-avail__dot { background: var(--text); box-shadow: none; }
.pd-pro-avail__state { font-weight: 600; }
.pd-pro-avail__meta { padding-inline-start: var(--space-2); margin-inline-start: var(--space-1); border-inline-start: var(--hairline) solid var(--rule); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-pro-avail--quiet { min-block-size: 0; padding: 0; border: 0; background: none; }
.pd-pro-avail--lg { --pd-pro-avail-dot: .75rem; min-block-size: var(--target-min); padding-inline: var(--space-4); font: 500 var(--type-ui-size)/1.3 var(--font-sans); }
/* Never wider than its column: the large badge wraps its meta onto a second line on phones (base/--quiet stay one line). */
.pd-pro-avail { max-inline-size: 100%; }
.pd-pro-avail--lg { flex-wrap: wrap; row-gap: var(--space-1); white-space: normal; text-wrap: balance; padding-block: var(--space-2); }
@media (max-width: 29.99em) { .pd-pro-avail--lg .pd-pro-avail__meta { flex-basis: 100%; margin-inline-start: 0; border-inline-start: 0; padding-inline-start: calc(var(--pd-pro-avail-dot) + var(--space-2)); } }
a.pd-pro-avail { position: relative; min-block-size: var(--target-min); transition: border-color var(--dur-2) var(--ease-standard), background-color var(--dur-2) var(--ease-standard); }
a.pd-pro-avail::after { content: "→"; color: var(--link); transition: translate var(--dur-2) var(--ease-out); }
@media (hover: hover) { a.pd-pro-avail:hover { border-color: var(--rule-strong); background: color-mix(in oklab, currentColor var(--state-hover-mix), var(--surface)); } a.pd-pro-avail:hover::after { translate: .2em 0; } }
a.pd-pro-avail:focus-visible { outline-offset: var(--focus-offset); }
.pd-pro-sheet .pd-pro-avail { font-size: .56em; }

/* ── InquiryForm ── */
.pd-pro-inq { container: pd-pro-inq / inline-size; color: var(--text); }
.pd-pro-inq :where(input, select, textarea, button), .pd-pro-inq__states :where(input, select, textarea, button) { font-family: var(--font-sans); }
.pd-pro-inq__grid { display: grid; gap: var(--space-7); }
.pd-pro-inq__intro { display: grid; gap: var(--space-4); align-content: start; justify-items: start; padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-pro-inq__intro > :where(ol, dl) { justify-self: stretch; }
.pd-pro-inq__title { margin: 0; font: 500 clamp(var(--fs-headline), 6cqi, var(--fs-display-m))/1.02 var(--font-display); letter-spacing: var(--track-display); }
.pd-pro-inq__title em { font-style: italic; font-weight: 400; }
.pd-pro-inq__lede { margin: 0; font: var(--font-lede); color: var(--text-muted); max-inline-size: 26em; text-wrap: pretty; }
.pd-pro-inq__next { margin: 0; padding: 0; list-style: none; display: grid; counter-reset: pd-pro-n; border-block-start: var(--hairline) solid var(--rule); }
.pd-pro-inq__next li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-3); padding-block: var(--space-3); border-block-end: var(--hairline) solid var(--rule); font: var(--font-body-s); color: var(--text-muted); counter-increment: pd-pro-n; }
.pd-pro-inq__next li::before { content: counter(pd-pro-n, decimal-leading-zero); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); padding-block-start: .25em; }
.pd-pro-inq__next b { color: var(--text); font-weight: 600; }
.pd-pro-inq__form { font-family: var(--font-sans); display: grid; gap: var(--space-7); min-inline-size: 0; }
.pd-pro-inq__set { display: grid; gap: var(--space-5); min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.pd-pro-inq__legend { display: flex; align-items: baseline; gap: var(--space-3); inline-size: 100%; margin: 0 0 var(--space-5); padding: var(--space-3) 0 0; border-block-start: var(--hairline) solid var(--rule-strong); font: var(--font-title); color: var(--text); }
.pd-pro-inq__legend span { font: var(--font-numeral); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-pro-inq__row { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.pd-pro-inq__types { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 0 var(--space-5); }
.pd-pro-inq__group { font-family: var(--font-sans); margin: 0; padding: 0; border: 0; min-inline-size: 0; display: grid; gap: var(--space-2); }
.pd-pro-inq__opt { font: var(--font-label); }
.pd-pro-inq__states textarea { min-block-size: 5em; }
.pd-pro-inq__group > legend { padding: 0; margin-block-end: var(--space-2); font: 500 var(--fs-label)/1.3 var(--font-sans); color: var(--text); }
.pd-pro-inq__group[aria-invalid="true"] .pd-check__box { border-color: var(--danger); }
.pd-pro-inq__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); padding-block-start: var(--space-5); border-block-start: var(--hairline) solid var(--rule); }
.pd-pro-inq__note { margin: 0; font: var(--font-caption); color: var(--text-muted); }
.pd-pro-inq__done { display: grid; gap: var(--space-4); align-content: start; padding: var(--pad-panel); border: var(--hairline) solid var(--rule-strong); }
.pd-pro-inq__done:where([hidden]) { display: none; }
.pd-pro-inq__done:focus { outline: 0; }
.pd-pro-inq__done:focus-visible { outline-offset: var(--focus-offset); }
.pd-pro-inq__done-title { margin: 0; font: italic 400 var(--fs-headline)/1.15 var(--font-display); }
.pd-pro-inq__done p { margin: 0; font: var(--font-body-s); color: var(--text-muted); max-inline-size: 34em; }
.pd-pro-inq__done-mark { display: inline-flex; align-items: center; gap: var(--space-2); font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text); }
.pd-pro-inq__done-mark::before { content: ""; inline-size: .75rem; block-size: .75rem; border-radius: var(--radius-pill); background: var(--text); }
@container pd-pro-inq (inline-size >= 52rem) {
  .pd-pro-inq__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); }
  .pd-pro-inq__intro { position: sticky; inset-block-start: var(--space-5); }
}

/* ── PressKit ── */
.pd-pro-press { container: pd-pro-press / inline-size; display: grid; gap: var(--space-8); color: var(--text); }
.pd-pro-press .pd-pagehead { margin-block-end: 0; }
.pd-pro-press__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.pd-pro-press__sec { display: grid; gap: var(--space-5); }
.pd-pro-press__bio { display: grid; gap: var(--space-4); }
.pd-pro-press__biotext { margin: 0; max-inline-size: var(--measure); font: var(--font-body); color: var(--text); text-wrap: pretty; }
.pd-pro-press__biotext + .pd-pro-press__biotext { margin-block-start: var(--space-3); }
.pd-pro-press__biobar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule); }
.pd-pro-press__marks, .pd-pro-press__portraits { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.pd-pro-press__portraits { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.pd-pro-press__mark { display: grid; gap: var(--space-3); align-content: start; }
.pd-pro-press__tile { display: grid; place-items: center; aspect-ratio: 4 / 3; border: var(--hairline) solid var(--rule); background: var(--surface); color: var(--text); }
.pd-pro-press__tile .pd-pro-sig { font-size: 1rem; }
.pd-pro-press__name { margin: 0; font: var(--font-title); }
.pd-pro-press__files { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; padding: 0; list-style: none; font: var(--font-label); }
.pd-pro-press__files a { display: inline-flex; align-items: center; min-block-size: var(--target-min); color: var(--link); text-underline-offset: .2em; text-decoration-thickness: 1px; }
.pd-pro-press__files small { margin-inline-start: var(--space-2); font: var(--font-meta); color: var(--text-subtle); }
.pd-pro-press__portrait { display: grid; gap: var(--space-2); margin: 0; }
.pd-pro-press__portrait figcaption { display: grid; gap: var(--space-1); font: var(--font-caption); color: var(--text-muted); }
.pd-pro-press__cols { display: grid; gap: var(--space-7); }
.pd-pro-press__contact { align-self: start; display: grid; gap: var(--space-4); align-content: start; padding: var(--pad-panel); border: var(--hairline) solid var(--rule-strong); }
.pd-pro-press__contact .pd-facts { --label-col: 5.5rem; }
.pd-pro-press__contact h3 { margin: 0; font: var(--font-headline); }
.pd-pro-press__contact p { margin: 0; font: var(--font-body-s); color: var(--text-muted); }
.pd-pro-press__rules { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font: var(--font-body-s); }
.pd-pro-press__rules li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-3); padding-block: var(--space-2); border-block-start: var(--hairline) solid var(--rule); }
.pd-pro-press__rules b { font: var(--font-meta); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-subtle); padding-block-start: .2em; }
@container pd-pro-press (inline-size >= 42rem) { .pd-pro-press__portraits { grid-template-columns: repeat(3, minmax(0, 18rem)); } }
@container pd-pro-press (inline-size >= 52rem) { .pd-pro-press__cols { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-8); } }

/* ── CollaboratorQuote ── */
.pd-pro-quote { position: relative; display: grid; gap: var(--space-5); align-content: start; margin: 0; padding: var(--space-6) 0 var(--space-5); color: var(--text); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-pro-quote__text { margin: 0; padding: 0; }
.pd-pro-quote__text p { margin: 0; font: var(--font-pullquote); color: var(--text); text-wrap: balance; max-inline-size: 26em; }
.pd-pro-quote__text p::before { content: "\201C"; padding-inline-end: .05em; color: var(--text-subtle); }
.pd-pro-quote__text p::after { content: "\201D"; color: var(--text-subtle); }
.pd-pro-quote__by { display: flex; align-items: center; gap: var(--space-3); font: var(--font-body-s); }
.pd-pro-quote__face { flex: none; inline-size: 3rem; overflow: hidden; border-radius: var(--radius-pill); }
.pd-pro-quote__face .pd-ph { border-radius: var(--radius-pill); }
.pd-pro-quote__face .pd-ph__label { display: none; }
.pd-pro-quote__name { display: block; font: 600 var(--fs-label)/1.3 var(--font-sans); color: var(--text); }
.pd-pro-quote__role { display: block; font: var(--font-caption); color: var(--text-muted); }
.pd-pro-quote__on { display: block; margin-block-start: var(--space-1); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-pro-quote__on a { color: var(--link); text-underline-offset: .2em; text-decoration-thickness: 1px; }
.pd-pro-quote__flag { display: inline-flex; align-items: center; gap: var(--space-2); justify-self: start; padding: var(--space-1) var(--space-2); font: var(--font-meta); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-muted); border: var(--hairline) dashed var(--border-control); }
.pd-pro-quote--placeholder { padding-inline: var(--space-5); border: var(--hairline) dashed var(--border-control); background-image: repeating-linear-gradient(135deg, transparent 0 .5625rem, color-mix(in oklab, var(--rule) 55%, transparent) .5625rem .625rem); }
.pd-pro-quote--placeholder .pd-pro-quote__text p, .pd-pro-quote--placeholder :where(.pd-pro-quote__name, .pd-pro-quote__role) { color: var(--text-subtle); }
.pd-pro-quote--placeholder .pd-pro-quote__text p { background: var(--surface); box-shadow: 0 0 0 .15em var(--surface); box-decoration-break: clone; -webkit-box-decoration-break: clone; display: inline; }
.pd-pro-quote--placeholder .pd-pro-quote__text { max-inline-size: 26em; }
.pd-pro-quote--placeholder .pd-pro-quote__by > span:last-child { background: var(--surface); box-shadow: 0 0 0 .25em var(--surface); }
.pd-pro-quote--pull .pd-pro-quote__text p { font-size: clamp(var(--fs-pullquote), 4.2cqi + 1rem, var(--fs-display-m)); line-height: 1.15; max-inline-size: 20em; }
.pd-pro-quote--pull { container: pd-pro-quote / inline-size; padding-block: var(--space-7) var(--space-6); }
.pd-pro-quote--card { gap: var(--space-4); padding-block: var(--space-5) var(--space-4); }
.pd-pro-quote--card .pd-pro-quote__text p { font-size: var(--fs-title); line-height: 1.35; }
/* Inline: there is no --inline here; an inline collaborator quote is the Figure quote .pd-quote--inline (no border,
   README §11) carrying this component's byline parts. */
.pd-pro-quote__flag:where(.pd-quote > *) { margin-block-end: var(--space-3); }
.pd-pro-quote__by:where(.pd-quote > *) { margin-block-start: var(--space-3); }
.pd-pro-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--space-5); margin: 0; padding: 0; list-style: none; }

/* ── Motion, forced colours ── */
@media (prefers-reduced-motion: reduce) { a.pd-pro-avail, a.pd-pro-avail::after { transition: none; } }
@media (forced-colors: active) {
  .pd-pro-bindu, .pd-pro-avail[data-state="open"] .pd-pro-avail__dot { forced-color-adjust: none; background: CanvasText; box-shadow: none; }
  .pd-pro-avail[data-state="booked"] .pd-pro-avail__dot { forced-color-adjust: none; border-color: CanvasText; background: linear-gradient(90deg, CanvasText 50%, Canvas 50%); }
  .pd-pro-avail__dot { border-color: CanvasText; }
  .pd-pro-avail[data-state="closed"] .pd-pro-avail__dot::after { forced-color-adjust: none; background: CanvasText; }
  .pd-pro-gantt__bar { forced-color-adjust: none; background: CanvasText; }
  .pd-pro-svc__incl li::before, .pd-pro-inq__done-mark::before { forced-color-adjust: none; background: CanvasText; }
  .pd-pro-tpl b { forced-color-adjust: none; background: CanvasText; color: Canvas; }
}

/* ── Print: exact A4, black ink, no chrome ── */
@page pd-pro-a4 { size: A4; margin: 0; }
@media print {
  .pd-pro-noprint, .pd-pro-cv-bar { display: none; }
  .pd-pro-stack { display: block; }
  .pd-paper.pd-pro-sheet, .pd-pro-sheet, .pd-pro-doc.pd-pro-cv:not(.pd-pro-noprint) {
    --paper-000: #fff; --paper-100: #fff; --ink-900: #000; --ink-700: #222; --ink-500: #444; --line-100: #999; --line-300: #000; --jade-700: #000; --saffron-500: #000; --saffron-700: #000;
    --surface: #fff; --surface-sunken: #fff; --text: #000; --text-muted: #222; --text-subtle: #444; --rule: #999; --rule-strong: #000; --link: #000; --danger: #000; --bindu: #000; --bindu-rim: #000;
    --pd-pro-em: 5.645mm; --pd-pro-sheet-em: 5.645mm; font-size: 5.645mm;
    inline-size: 210mm; max-inline-size: none; block-size: 297mm; min-block-size: 0; margin: 0; padding: 14mm 15.5mm 10mm; overflow: hidden;
    background: #fff; color: #000; box-shadow: none; border: 0; page: pd-pro-a4; break-after: page; break-inside: avoid;
    grid-template-rows: auto 1fr auto; print-color-adjust: exact; -webkit-print-color-adjust: exact;
  }
  .pd-pro-sheet:last-child { break-after: auto; }
  .pd-pro-sheet a { color: inherit; text-decoration: none; }
  .pd-pro-sheet .pd-pro-bindu { background: #000; box-shadow: none; }
  .pd-pro-sec, .pd-pro-cv__item, .pd-pro-table tr { break-inside: avoid; }
}

} /* end components.site (pro) */

/* ── part: productreview.css ── */
/* ── PART: productreview ─────────────────────────────────────────────────────
   Pandox DS v2 · package "productreview" · the kit for reviewing products, tools, apps and gear.
   Builds on parts/reviews.css (shares .pd-review__verdict and .pd-review__bindu). Prefix pd-pr-*.
   Components: ProductReviewHeader ProsCons VerdictBox SpecSheet TestedHow ScoreBreakdown UseCaseFit AlternativesList ReviewTimeline (see each README).
   Meaning = word + shape/count, never hue alone. Saffron bindu: one per view (header kicker, or VerdictBox--bindu). */
@layer components.site {

/* == Shared */
:where(.pd-pr-head, .pd-pr-pc, .pd-pr-verdict, .pd-pr-spec, .pd-pr-method, .pd-pr-score, .pd-pr-fit, .pd-pr-alts, .pd-pr-tl) {
  box-sizing: border-box; min-inline-size: 0; font-family: var(--font-sans); color: var(--text);
}
:where(.pd-pr-pc, .pd-pr-spec, .pd-pr-method, .pd-pr-score, .pd-pr-fit, .pd-pr-alts, .pd-pr-tl) {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); margin: 0;
  padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule-strong);
}
.pd-pr-hd { display: grid; gap: var(--space-2); }
.pd-pr-hd__k { margin: 0; font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
.pd-pr-hd__t { margin: 0; font: var(--font-headline); letter-spacing: var(--track-display); font-family: var(--font-display); font-weight: 400; text-wrap: balance; }
.pd-pr-hd__d { margin: 0; max-inline-size: var(--measure); font: var(--font-body-s); color: var(--text-muted); text-wrap: pretty; }
:where(.pd-pr-head__fact dt, .pd-pr-spec__tbl thead th, .pd-pr-method__facts dt, .pd-pr-method__tbl thead th, .pd-pr-disc__k, .pd-pr-fit__tbl thead th) { font: 500 var(--fs-meta)/1.5 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-subtle); }
.pd-pr-foot { margin: 0; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-pr-foot b { font-weight: 500; color: var(--text); }
.pd-pr-link { color: var(--link); text-decoration: underline; text-decoration-thickness: var(--hairline); text-underline-offset: .2em; }
.pd-pr-link:hover { text-decoration-thickness: 2px; }
.pd-pr-link:focus-visible, .pd-pr-alts__name a:focus-visible, .pd-pr-alts__more:focus-visible { outline-offset: var(--focus-offset); border-radius: 1px; }

/* Level shapes shared by UseCaseFit and ReviewTimeline marks */
.pd-pr-mark { display: inline-flex; align-items: center; gap: .5em; white-space: nowrap; }
.pd-pr-mark::before { content: ""; flex: none; box-sizing: border-box; inline-size: .75em; block-size: .75em; border: .1em solid currentColor; border-radius: var(--radius-pill); }
.pd-pr-mark--best::before { background: currentColor; }
.pd-pr-mark--good::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.pd-pr-mark--ok::before { background: transparent; }
.pd-pr-mark--no { color: var(--text-muted); }
.pd-pr-mark--no::before, .pd-pr-verdict__yn--no::before { background: linear-gradient(135deg, transparent 44%, currentColor 44% 56%, transparent 56%); }
.pd-pr-mark--na { color: var(--text-subtle); }
.pd-pr-mark--na::before { border-style: dashed; }

/* == ProductReviewHeader */
.pd-pr-head { container: pd-pr-head / inline-size; display: block; padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-pr-head__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.pd-pr-head__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2) var(--space-4); margin: 0; font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
.pd-pr-head__bar .pd-review__bindu { inline-size: .5rem; block-size: .5rem; background: var(--bindu-on-paper); box-shadow: 0 0 0 1px var(--saffron-700); vertical-align: .08em; }
.pd-pr-head--quiet .pd-pr-head__bar .pd-review__bindu { inline-size: .375rem; block-size: .375rem; background: currentColor; box-shadow: none; color: var(--text-subtle); vertical-align: .14em; }
.pd-pr-head__bar time { font: var(--font-meta); letter-spacing: var(--track-mono); text-transform: none; color: var(--text-subtle); }
.pd-pr-head__text { display: grid; align-content: start; gap: var(--space-3); min-inline-size: 0; }
.pd-pr-head__title { margin: 0; font: var(--font-display-l); letter-spacing: var(--track-display); text-wrap: balance; overflow-wrap: anywhere; }
.pd-pr-head__by { margin: calc(-1 * var(--space-1)) 0 0; font: italic 400 var(--fs-title)/1.3 var(--font-display); color: var(--text-muted); }
.pd-pr-head__dek { margin: 0; max-inline-size: var(--measure); font: var(--font-lede); color: var(--text-muted); text-wrap: pretty; }
.pd-pr-head__verdict { display: grid; gap: var(--space-2); margin: var(--space-2) 0 0; padding-block: var(--space-4); border-block: var(--hairline) solid var(--rule); }
.pd-pr-head__vl { margin: 0; font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-subtle); }
.pd-pr-head__verdict .pd-review__verdict { font-size: var(--fs-headline); white-space: normal; }
.pd-pr-head__why { margin: 0; max-inline-size: var(--measure); font: var(--font-body); color: var(--text); text-wrap: pretty; }
.pd-pr-head__frame { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); margin: 0; }
.pd-pr-head__plate { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 7%; background: var(--surface-sunken); overflow: hidden; }
.pd-pr-head__plate > :where(img, .pd-ph, svg) { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; aspect-ratio: auto; }
.pd-pr-head__plate > .pd-ph { background-color: var(--surface); }
.pd-pr-head__cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-4); font: var(--font-caption); color: var(--text-muted); }
.pd-pr-head__cap span:last-child { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
/* Key facts: a strip of hairline cells, mono labels above values */
.pd-pr-head__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4); margin: 0; border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-pr-head__fact { min-inline-size: 0; padding: var(--space-3) 0; border-block-end: var(--hairline) solid var(--rule); }

.pd-pr-head__fact dd { margin: var(--space-1) 0 0; font: var(--font-label); color: var(--text); overflow-wrap: anywhere; }
.pd-pr-price { font-variant-numeric: tabular-nums; white-space: nowrap; }
@container pd-pr-head (min-inline-size: 44rem) {
  .pd-pr-head__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "bar bar" "text frame" "facts facts"; column-gap: var(--space-7); }
  .pd-pr-head__bar { grid-area: bar; }
  .pd-pr-head__text { grid-area: text; }
  .pd-pr-head__frame { grid-area: frame; align-self: start; }
  .pd-pr-head__facts { grid-area: facts; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
  .pd-pr-head--compact .pd-pr-head__in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "bar" "text" "facts"; }
}
.pd-pr-head--compact .pd-pr-head__frame { display: none; }

/* == ProsCons */
.pd-pr-pc { container: pd-pr-pc / inline-size; }
.pd-pr-pc__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.pd-pr-pc__col { display: grid; align-content: start; gap: 0; min-inline-size: 0; }
.pd-pr-pc__h { display: flex; align-items: center; gap: var(--space-3); margin: 0; padding-block-end: var(--space-3); border-block-end: var(--hairline) solid var(--rule-strong); font: var(--font-title); font-family: var(--font-display); font-weight: 400; }
.pd-pr-pc__n { margin-inline-start: auto; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.pd-pr-pc__list { display: grid; margin: 0; padding: 0; list-style: none; }
.pd-pr-pc__item { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--space-1) var(--space-3); padding-block: var(--space-3); border-block-end: var(--hairline) solid var(--rule); }
.pd-pr-pc__item > :not(.pd-pr-pc__g) { grid-column: 2; }
.pd-pr-pc__item > .pd-pr-pc__g { margin-block-start: -.05rem; }
.pd-pr-pc__g, .pd-pr-pc__h .pd-pr-pc__g { grid-row: 1 / span 2; display: grid; place-items: center; box-sizing: border-box; inline-size: 1.5rem; block-size: 1.5rem; border: var(--hairline) solid currentColor; font: 500 1rem/1 var(--font-mono); color: var(--text); }
.pd-pr-pc__col--pro .pd-pr-pc__g { background: var(--text); color: var(--surface); border-color: var(--text); }
.pd-pr-pc__t { margin: 0; font: var(--font-label); font-weight: 500; color: var(--text); }
.pd-pr-pc__d { margin: 0; font: var(--font-body-s); color: var(--text-muted); text-wrap: pretty; }
.pd-pr-pc__flag { display: inline-block; margin-inline-start: var(--space-2); padding: 0 .4em; border: var(--hairline) solid var(--text); font: 500 var(--fs-meta)/1.5 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text); vertical-align: .1em; white-space: nowrap; }
.pd-pr-pc__item--minor .pd-pr-pc__t { font-weight: 400; color: var(--text-muted); }
.pd-pr-pc__item--minor .pd-pr-pc__g { border-style: dashed; background: none; color: var(--text); }
.pd-pr-pc__empty { margin: 0; padding-block: var(--space-3); font: var(--font-body-s); font-style: italic; color: var(--text-subtle); border-block-end: var(--hairline) solid var(--rule); }
@container pd-pr-pc (min-inline-size: 36rem) {
  .pd-pr-pc__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); }
}

/* == VerdictBox */
.pd-pr-verdict { container: pd-pr-verdict / inline-size; display: grid; gap: var(--space-5); margin: 0; padding: var(--space-6) var(--space-5); background: var(--surface-sunken); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-pr-verdict__top { display: grid; gap: var(--space-3) var(--space-6); align-items: baseline; }
.pd-pr-verdict__k { margin: 0; font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); display: flex; align-items: center; gap: var(--space-2); }
.pd-pr-verdict--bindu .pd-pr-verdict__k::before { content: ""; inline-size: .5rem; block-size: .5rem; border-radius: var(--radius-pill); background: var(--bindu-on-paper); box-shadow: 0 0 0 1px var(--saffron-700); }
.pd-pr-verdict__word .pd-review__verdict { font-size: var(--fs-display-m); line-height: 1; }
.pd-pr-verdict__line { margin: 0; max-inline-size: var(--measure); font: var(--font-lede); color: var(--text); text-wrap: pretty; }
.pd-pr-verdict__who { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); margin: 0; }
.pd-pr-verdict__grp { min-inline-size: 0; padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-pr-verdict__grp > h3 { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text); }
.pd-pr-verdict__grp > h3 span[aria-hidden] { display: grid; place-items: center; inline-size: 1.25rem; block-size: 1.25rem; box-sizing: border-box; border: var(--hairline) solid currentColor; font: 500 .8125rem/1 var(--font-mono); letter-spacing: 0; }
.pd-pr-verdict__grp--for > h3 span[aria-hidden] { background: var(--text); color: var(--surface-sunken); border-color: var(--text); }
.pd-pr-verdict__grp ul { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font: var(--font-body-s); color: var(--text); }
.pd-pr-verdict__grp li { position: relative; padding-inline-start: 1.5em; }
.pd-pr-verdict__grp li::before { content: "—"; position: absolute; inset-inline-start: 0; color: var(--text-subtle); }
.pd-pr-verdict__again { display: grid; grid-template-columns: minmax(0, 1fr); align-items: baseline; gap: var(--space-1) var(--space-4); margin: 0; padding-block: var(--space-4); border-block: var(--hairline) solid var(--rule-strong); }
.pd-pr-verdict__again dt { font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
.pd-pr-verdict__again dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); font: var(--font-body-s); color: var(--text-muted); }
.pd-pr-verdict__yn { display: inline-flex; align-items: center; gap: .4em; font: italic 400 var(--fs-title)/1 var(--font-display); color: var(--text); }
.pd-pr-verdict__yn::before { content: ""; box-sizing: border-box; inline-size: .55em; block-size: .55em; border: .09em solid currentColor; border-radius: var(--radius-pill); }
.pd-pr-verdict__yn--yes { color: var(--link); }
.pd-pr-verdict__yn--yes::before { background: currentColor; }
.pd-pr-verdict__bottom { margin: 0; max-inline-size: var(--measure); font: var(--font-body); color: var(--text); text-wrap: pretty; }
.pd-pr-verdict__bottom strong { font-weight: 600; }
@container pd-pr-verdict (min-inline-size: 40rem) {
  .pd-pr-verdict { padding: var(--space-7) var(--space-7); }
  .pd-pr-verdict__top { grid-template-columns: auto minmax(0, 1fr); }
  .pd-pr-verdict__k { grid-column: 1 / -1; }
  .pd-pr-verdict__again { grid-template-columns: auto minmax(0, 1fr); }
  .pd-pr-verdict__who { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
}

/* == SpecSheet — LEGACY ALIAS. SpecSheet is now .pd-td-kv.pd-td-kv--sourced (techdocs-ref.css).
   /* legacy */ .pd-pr-spec* is no longer used by any page (ProductReviewPage now uses .pd-td-kv--sourced); kept one release for
   old markup, then delete. Do not use it in new work.
   The source marks (.pd-pr-src*) below are shared by both and stay canonical. */
.pd-pr-spec { container: pd-pr-spec / inline-size; }
.pd-pr-spec__key { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; font: var(--font-caption); color: var(--text-muted); }
.pd-pr-spec__tbl { inline-size: 100%; border-collapse: collapse; font: var(--font-body-s); }
.pd-pr-spec__tbl caption { text-align: start; }
.pd-pr-spec__tbl thead th { padding: 0 var(--space-3) var(--space-2) 0; border-block-end: var(--hairline) solid var(--rule-strong); text-align: start; vertical-align: bottom; }
.pd-pr-spec__grp th { padding: var(--space-5) 0 var(--space-2); border-block-end: var(--hairline) solid var(--rule-strong); font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text); text-align: start; }
.pd-pr-spec__tbl tbody tr:not(.pd-pr-spec__grp) > * { padding: var(--space-3) var(--space-3) var(--space-3) 0; border-block-end: var(--hairline) solid var(--rule); vertical-align: top; text-align: start; }
.pd-pr-spec__tbl tbody th[scope="row"] { inline-size: 32%; font: var(--font-label); font-weight: 400; color: var(--text-muted); }
.pd-pr-spec__v { font: var(--font-label); font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pd-pr-spec__v code, .pd-pr-spec__v .pd-pr-num { font-family: var(--font-mono); font-size: .9375em; letter-spacing: 0; }
.pd-pr-spec__note { display: block; margin-block-start: var(--space-1); font: var(--font-caption); font-weight: 400; color: var(--text-muted); }
.pd-pr-spec__src { white-space: nowrap; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); }
.pd-pr-src { display: inline-flex; align-items: center; gap: .45em; white-space: nowrap; }
.pd-pr-src::before { content: ""; flex: none; box-sizing: border-box; inline-size: .6875rem; block-size: .6875rem; border: 1.5px solid currentColor; rotate: 45deg; scale: .8; }
.pd-pr-src--measured { color: var(--text); }
.pd-pr-src--measured::before { background: currentColor; }
.pd-pr-src--claimed::before { background: transparent; }
.pd-pr-src--unverified { color: var(--text-subtle); }
.pd-pr-src--unverified::before { border-style: dashed; }
.pd-pr-spec__tbl tbody tr:not(.pd-pr-spec__grp) > td:last-child { padding-inline-end: 0; }
.pd-pr-spec__tbl tbody tr.pd-pr-spec__row--diff > * { border-block-end: 2px solid var(--rule-strong); }
@container pd-pr-spec (max-inline-size: 34rem) {
  .pd-pr-spec__tbl thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pd-pr-spec__tbl, .pd-pr-spec__tbl tbody { display: block; }
  .pd-pr-spec__tbl tbody tr:not(.pd-pr-spec__grp) { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); padding-block: var(--space-3); border-block-end: var(--hairline) solid var(--rule); }
  .pd-pr-spec__tbl tbody tr:not(.pd-pr-spec__grp) > * { padding: 0; border: 0; }
  .pd-pr-spec__tbl tbody th[scope="row"] { inline-size: auto; grid-column: 1; }
  .pd-pr-spec__tbl tbody .pd-pr-spec__src { grid-column: 2; grid-row: 1; justify-self: end; }
  .pd-pr-spec__tbl tbody .pd-pr-spec__v { grid-column: 1 / -1; }
  .pd-pr-spec__tbl tbody tr.pd-pr-spec__row--diff { border-block-end: 2px solid var(--rule-strong); }
  .pd-pr-spec__tbl tbody tr.pd-pr-spec__row--diff > * { border: 0; }
  .pd-pr-spec__grp { display: block; }
  .pd-pr-spec__grp th { display: block; }
}

/* == TestedHow */
.pd-pr-method { container: pd-pr-method / inline-size; gap: var(--space-6); }
.pd-pr-method__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4); margin: 0; border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-pr-method__facts > div { min-inline-size: 0; padding: var(--space-3) 0; border-block-end: var(--hairline) solid var(--rule); }

.pd-pr-method__facts dd { margin: var(--space-1) 0 0; font: var(--font-label); color: var(--text); overflow-wrap: anywhere; }
.pd-pr-method__sub { margin: 0 0 var(--space-3); font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text); }
/* Flow diagram */
.pd-pr-flow { display: grid; gap: var(--space-3); margin: 0; }
.pd-pr-flow__svg { display: block; inline-size: 100%; block-size: auto; overflow: visible; color: var(--text); font-family: var(--font-sans); }
.pd-pr-flow__svg--tall { display: none; max-inline-size: 22rem; }
/* .pd-pr-flow__* are aliases of the pd-dg notation (DiagramNotation): shape = .pd-dg__shape, out = .pd-dg__shape--heavy, edge = .pd-dg__edge, loop = .pd-dg__edge--async, labels = .pd-dg__tn / __t / __ts. */
.pd-pr-flow__node { fill: var(--surface); stroke: currentColor; stroke-width: var(--dg-shape); }
.pd-pr-flow__node--out { stroke-width: var(--dg-heavy); }
.pd-pr-flow__n { fill: var(--text-subtle); font: 400 10.5px/1 var(--font-mono); letter-spacing: .01em; }
.pd-pr-flow__t { fill: var(--text); font: 500 13px/1 var(--font-sans); }
.pd-pr-flow__s { fill: var(--text-muted); font: 400 10.5px/1 var(--font-mono); letter-spacing: .01em; }
.pd-pr-flow__edge { fill: none; stroke: currentColor; stroke-width: var(--dg-edge); stroke-linejoin: round; }
.pd-pr-flow__edge--loop { stroke-dasharray: var(--dg-dash-async); color: var(--text-muted); }
.pd-pr-flow__el { fill: var(--text-muted); font: 400 10.5px/1 var(--font-mono); letter-spacing: .01em; }
.pd-pr-flow__elbg { fill: var(--surface); }
.pd-pr-flow__cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-5); font: var(--font-caption); color: var(--text-muted); }
.pd-pr-flow__cap .pd-pr-flow__num { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); white-space: nowrap; }
.pd-pr-flow__legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); }
.pd-pr-flow__legend li { display: inline-flex; align-items: center; gap: var(--space-2); }
.pd-pr-flow__legend svg { inline-size: 1.75rem; block-size: .75rem; color: var(--text); overflow: visible; }
.pd-pr-alt { font: var(--font-body-s); color: var(--text-muted); border-block: var(--hairline) solid var(--rule); }
/* Text-alternative summary: the shared .pd-alt__sum recipe (SystemLegend › Text alternative). */
.pd-pr-alt > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4); min-block-size: var(--target-min); padding-block: var(--space-3); cursor: pointer; list-style: none; font: var(--font-label); letter-spacing: normal; text-transform: none; color: var(--text); }
.pd-pr-alt > summary::-webkit-details-marker { display: none; }
.pd-pr-alt > summary::before { content: ""; flex: none; inline-size: .5em; block-size: .5em; border: 0; border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor; rotate: -45deg; translate: 0 -.1em; transition: rotate var(--dur-1) var(--ease-standard); }
.pd-pr-alt[open] > summary::before { content: ""; rotate: 45deg; }
.pd-pr-alt > summary:focus-visible { outline-offset: var(--focus-offset); }
@media (prefers-reduced-motion: reduce) { .pd-pr-alt > summary::before { transition: none; } }
.pd-pr-alt__body { display: grid; gap: var(--space-3); padding-block-end: var(--space-4); }
.pd-pr-alt__body h4 { margin: 0; font: var(--font-meta); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-subtle); }
.pd-pr-alt__body ol, .pd-pr-alt__body ul { margin: 0; padding-inline-start: 1.5em; display: grid; gap: var(--space-1); }
.pd-pr-alt__body b { font-weight: 500; color: var(--text); }
/* Measures table */
.pd-pr-method__tbl { inline-size: 100%; border-collapse: collapse; font: var(--font-body-s); }
.pd-pr-method__tbl th, .pd-pr-method__tbl td { padding: var(--space-3) var(--space-3) var(--space-3) 0; border-block-end: var(--hairline) solid var(--rule); text-align: start; vertical-align: top; }
.pd-pr-method__tbl thead th { padding-block-start: 0; border-block-end-color: var(--rule-strong); }
.pd-pr-method__tbl tbody th { font: var(--font-label); font-weight: 500; color: var(--text); }
.pd-pr-method__tbl td { font: var(--font-label); color: var(--text-muted); }
.pd-pr-method__tbl td code { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text); }
.pd-pr-method__tbl :is(th, td):last-child { padding-inline-end: 0; }
@container pd-pr-method (max-inline-size: 34rem) {
  .pd-pr-method__tbl thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .pd-pr-method__tbl, .pd-pr-method__tbl tbody, .pd-pr-method__tbl tr { display: block; }
  .pd-pr-method__tbl tr { padding-block: var(--space-3); border-block-end: var(--hairline) solid var(--rule); }
  .pd-pr-method__tbl :is(th, td) { display: block; padding: 0; border: 0; }
  .pd-pr-method__tbl td::before { content: attr(data-label) " · "; font: var(--font-meta); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-subtle); }
  .pd-pr-method__tbl td { margin-block-start: var(--space-1); }
  .pd-pr-flow__svg--wide { display: none; }
  .pd-pr-flow__svg--tall { display: block; }
}
/* Disclosures + limits */
.pd-pr-method__two { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.pd-pr-disc { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-pr-disc li { display: grid; grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr); gap: var(--space-1) var(--space-4); padding-block: var(--space-3); border-block-end: var(--hairline) solid var(--rule); font: var(--font-label); color: var(--text); }

.pd-pr-disc__v b { font-weight: 500; }
.pd-pr-limits { margin: 0; padding: 0; list-style: none; display: grid; border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-pr-limits li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: var(--space-3); padding-block: var(--space-3); border-block-end: var(--hairline) solid var(--rule); font: var(--font-label); color: var(--text-muted); }
.pd-pr-limits li::before { content: "×"; display: grid; place-items: center; box-sizing: border-box; inline-size: 1.25rem; block-size: 1.25rem; border: var(--hairline) dashed currentColor; font: 500 .8125rem/1 var(--font-mono); color: var(--text); }
@container pd-pr-method (min-inline-size: 44rem) {
  .pd-pr-method__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pd-pr-method__two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); }
}

/* == ScoreBreakdown */
.pd-pr-score { container: pd-pr-score / inline-size; }
.pd-pr-score__scale { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); }
.pd-pr-score__scale li { display: inline-flex; align-items: center; gap: var(--space-2); }
.pd-pr-score__scale .pd-pr-bar { --seg: .5rem; --seg-gap: 2px; }
.pd-pr-score__list { display: grid; margin: 0; padding: 0; list-style: none; border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-pr-score__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name level" "bar bar" "note note"; align-items: baseline; gap: var(--space-2) var(--space-4); padding-block: var(--space-4); border-block-end: var(--hairline) solid var(--rule); }
.pd-pr-score__name { grid-area: name; margin: 0; font: var(--font-label); font-weight: 500; color: var(--text); }
.pd-pr-score__w { margin-inline-start: var(--space-2); font: var(--font-meta); font-weight: 400; letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-pr-score__level { grid-area: level; margin: 0; font: italic 400 var(--fs-title)/1 var(--font-display); color: var(--text); white-space: nowrap; }
.pd-pr-score__row .pd-pr-bar { grid-area: bar; }
.pd-pr-score__note { grid-area: note; margin: 0; max-inline-size: var(--measure); font: var(--font-body-s); color: var(--text-muted); text-wrap: pretty; }
/* Segmented bar: 4 segments; filled count = level. Empty segments keep a 3:1 outline. */
.pd-pr-bar { --seg: 100%; --seg-gap: 3px; display: grid; grid-template-columns: repeat(4, var(--seg)); gap: var(--seg-gap); inline-size: 100%; margin: 0; padding: 0; list-style: none; color: var(--text); }
.pd-pr-bar:where(:not(.pd-pr-score__scale *)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pd-pr-bar > i { display: block; box-sizing: border-box; block-size: .625rem; border: 1px solid var(--text-subtle); background: transparent; }
.pd-pr-score__scale .pd-pr-bar { inline-size: auto; }
.pd-pr-score__scale .pd-pr-bar > i { inline-size: var(--seg); block-size: .5rem; }
.pd-pr-bar[data-level="1"] > i:nth-child(-n+1),
.pd-pr-bar[data-level="2"] > i:nth-child(-n+2),
.pd-pr-bar[data-level="3"] > i:nth-child(-n+3),
.pd-pr-bar[data-level="4"] > i:nth-child(-n+4) { background: currentColor; border-color: currentColor; }
.pd-pr-bar[data-level="4"] { color: var(--link); }
.pd-pr-bar[data-level="0"] > i { border-style: dashed; }
.pd-pr-score__row--pending .pd-pr-score__level { color: var(--text-subtle); }
.pd-pr-score__sum { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-2) var(--space-4); margin: 0; font: var(--font-body-s); color: var(--text-muted); }
@container pd-pr-score (min-inline-size: 40rem) {
  .pd-pr-score__row { grid-template-columns: minmax(10rem, 2fr) minmax(8rem, 2fr) 7.5rem minmax(0, 4fr); grid-template-areas: "name bar level note"; align-items: center; gap: var(--space-5); }
  .pd-pr-score__level { font-size: var(--fs-body); }
  .pd-pr-score--compact .pd-pr-score__row { grid-template-columns: minmax(10rem, 1fr) minmax(8rem, 1fr) 7.5rem; grid-template-areas: "name bar level"; }
}
.pd-pr-score--compact .pd-pr-score__note { display: none; }

/* == UseCaseFit */
.pd-pr-fit { container: pd-pr-fit / inline-size; }
.pd-pr-fit__key { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; font: var(--font-label); color: var(--text); }
.pd-pr-fit__key li { display: inline-flex; gap: var(--space-2); align-items: baseline; }
.pd-pr-fit__key small { font: var(--font-caption); color: var(--text-muted); }
.pd-pr-fit__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pd-pr-fit__scroll:focus-visible { outline-offset: var(--focus-offset); }
.pd-pr-fit__tbl { inline-size: 100%; border-collapse: collapse; font: var(--font-body-s); }
.pd-pr-fit__tbl th, .pd-pr-fit__tbl td { padding: var(--space-3) var(--space-4) var(--space-3) 0; border-block-end: var(--hairline) solid var(--rule); text-align: start; vertical-align: top; }
.pd-pr-fit__tbl :is(th, td):last-child { padding-inline-end: 0; }
.pd-pr-fit__tbl thead th { padding-block-start: 0; border-block-end-color: var(--rule-strong); vertical-align: bottom; }
.pd-pr-fit__tbl thead th.pd-pr-fit__this { color: var(--text); }
.pd-pr-fit__tbl tbody th { font: var(--font-label); font-weight: 500; color: var(--text); min-inline-size: 9rem; }
.pd-pr-fit__tbl tbody th small { display: block; margin-block-start: var(--space-1); font: var(--font-caption); font-weight: 400; color: var(--text-muted); }
.pd-pr-fit__tbl td { color: var(--text-muted); }
.pd-pr-fit__tbl td .pd-pr-mark { font: var(--font-label); font-weight: 500; color: var(--text); }
.pd-pr-fit__tbl td .pd-pr-mark--no { color: var(--text-muted); font-weight: 400; }
.pd-pr-fit__tbl td .pd-pr-mark--na { color: var(--text-subtle); font-weight: 400; }
.pd-pr-fit__tbl td.pd-pr-fit__this { background: var(--surface-sunken); padding-inline: var(--space-3); }
.pd-pr-fit__tbl thead th.pd-pr-fit__this { padding-inline: var(--space-3); box-shadow: inset 0 2px 0 var(--rule-strong); background: var(--surface-sunken); padding-block-start: var(--space-2); }
.pd-pr-fit--compare .pd-pr-fit__tbl { min-inline-size: 36rem; }
@container pd-pr-fit (max-inline-size: 34rem) {
  .pd-pr-fit__tbl--stack thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .pd-pr-fit__tbl--stack, .pd-pr-fit__tbl--stack :is(tbody, tr) { display: block; }
  .pd-pr-fit__tbl--stack tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-3); padding-block: var(--space-3); border-block-end: var(--hairline) solid var(--rule); }
  .pd-pr-fit__tbl--stack :is(th, td) { padding: 0; border: 0; min-inline-size: 0; }
  .pd-pr-fit__tbl--stack .pd-pr-fit__lvl { grid-column: 2; grid-row: 1; }
  .pd-pr-fit__tbl--stack .pd-pr-fit__note { grid-column: 1 / -1; }
  .pd-pr-fit__tbl td.pd-pr-fit__this { background: transparent; padding-inline: 0; }
}

/* == AlternativesList */
.pd-pr-alts { container: pd-pr-alts / inline-size; }
.pd-pr-alts__list { display: grid; margin: 0; padding: 0; list-style: none; counter-reset: pd-pr-alt; border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-pr-alts__item { counter-increment: pd-pr-alt; display: grid; grid-template-columns: 2rem minmax(0, 1fr); grid-template-areas: "n name" "n meta" "n cmp" "n foot"; gap: var(--space-1) var(--space-3); padding-block: var(--space-4); border-block-end: var(--hairline) solid var(--rule); }
.pd-pr-alts__item::before { content: counter(pd-pr-alt, decimal-leading-zero); grid-area: n; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); padding-block-start: .3em; }
.pd-pr-alts__name { grid-area: name; margin: 0; font: var(--font-title); }
.pd-pr-alts__name a { color: var(--text); text-decoration: underline; text-decoration-color: var(--border-control); text-decoration-thickness: var(--hairline); text-underline-offset: .18em; }
.pd-pr-alts__name a:hover { text-decoration-color: currentColor; }
.pd-pr-alts__meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 0 .4em; margin: 0; font: var(--font-label); color: var(--text-muted); }
.pd-pr-alts__meta > :not(:last-child)::after { content: "·"; margin-inline-start: .4em; color: var(--text-subtle); }
.pd-pr-alts__cmp { grid-area: cmp; margin: var(--space-1) 0 0; max-inline-size: var(--measure); font: var(--font-body-s); color: var(--text); text-wrap: pretty; }
.pd-pr-alts__rel { display: inline-block; margin-inline-end: var(--space-2); padding: 0 .45em; border: var(--hairline) solid var(--border-control); font: 500 var(--fs-meta)/1.6 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-muted); vertical-align: .08em; white-space: nowrap; }
.pd-pr-alts__foot { grid-area: foot; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-1) var(--space-4); margin-block-start: var(--space-1); }
.pd-pr-alts__foot .pd-review__verdict { font-size: var(--fs-body); }
.pd-pr-alts__nr { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-pr-alts__more { display: inline-flex; align-items: center; gap: var(--space-1); min-block-size: var(--target-min); font: var(--font-label); color: var(--link); text-decoration: none; }
.pd-pr-alts__more:hover span { text-decoration: underline; text-underline-offset: .2em; }
.pd-pr-alts__more svg { inline-size: .875em; block-size: .875em; fill: none; stroke: currentColor; stroke-width: 1.5; }
@container pd-pr-alts (min-inline-size: 44rem) {
  .pd-pr-alts__item { grid-template-columns: 2.5rem minmax(0, 4fr) minmax(0, 6fr) minmax(0, 3fr); grid-template-areas: "n name cmp foot" "n meta cmp foot"; gap: var(--space-1) var(--space-5); align-items: start; }
  .pd-pr-alts__cmp { margin: 0; padding-block-start: .3em; }
  .pd-pr-alts__foot { flex-direction: column; align-items: flex-end; justify-content: flex-start; margin: 0; padding-block-start: .3em; }
  .pd-pr-alts__more { min-block-size: auto; padding-block: var(--space-2); }
}

/* == ReviewTimeline */
.pd-pr-tl { container: pd-pr-tl / inline-size; }
.pd-pr-tl__list { display: grid; margin: 0; padding: 0; list-style: none; }
.pd-pr-tl__item { position: relative; display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--space-1) var(--space-4); padding-block-end: var(--space-6); }
.pd-pr-tl__item::before { content: ""; position: absolute; inset-block: 1.1rem 0; inset-inline-start: calc(.75rem - .5px); border-inline-start: var(--hairline) solid var(--rule-strong); }
.pd-pr-tl__item:last-child { padding-block-end: 0; }
.pd-pr-tl__item:last-child::before { content: none; }
.pd-pr-tl__item--planned::before { border-inline-start-style: dashed; border-color: var(--text-subtle); }
.pd-pr-tl__item:has(+ .pd-pr-tl__item--planned)::before { border-inline-start-style: dashed; border-color: var(--text-subtle); }
.pd-pr-tl__dot { grid-row: 1 / span 4; justify-self: center; box-sizing: border-box; inline-size: .75rem; block-size: .75rem; margin-block-start: .35rem; border: 1.5px solid var(--text); border-radius: var(--radius-pill); background: var(--surface); position: relative; z-index: 1; }
.pd-pr-tl__item--first .pd-pr-tl__dot { background: var(--text); }
.pd-pr-tl__item--changed .pd-pr-tl__dot { border-radius: 0; rotate: 45deg; background: var(--text); inline-size: .6875rem; block-size: .6875rem; }
.pd-pr-tl__item--planned .pd-pr-tl__dot { border-style: dashed; border-color: var(--text-subtle); }
.pd-pr-tl__when { margin: 0; font: var(--font-title); font-family: var(--font-display); font-weight: 400; color: var(--text); }
.pd-pr-tl__date { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.pd-pr-tl__ver { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); }
.pd-pr-tl__state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); margin: var(--space-1) 0 0; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); }
.pd-pr-tl__state .pd-review__verdict { font-size: var(--fs-body); }
.pd-pr-tl__arrow { font: var(--font-meta); color: var(--text-muted); }
.pd-pr-tl__chg { padding: 0 .45em; border: var(--hairline) solid var(--text); font: 500 var(--fs-meta)/1.6 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text); }
.pd-pr-tl__same { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-pr-tl__note { margin: var(--space-2) 0 0; max-inline-size: var(--measure); font: var(--font-body); color: var(--text); text-wrap: pretty; }
.pd-pr-tl__item--planned .pd-pr-tl__when { color: var(--text-muted); font-style: italic; }
.pd-pr-tl__item--planned .pd-pr-tl__note { color: var(--text-subtle); font: var(--font-body-s); }
.pd-pr-tl__wear { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: var(--space-2) 0 0; padding: 0; list-style: none; font: var(--font-caption); color: var(--text-muted); }
.pd-pr-tl__wear li::before { content: "› "; color: var(--text-subtle); }
@container pd-pr-tl (min-inline-size: 44rem) {
  .pd-pr-tl__item { grid-template-columns: 9rem 1.5rem minmax(0, 1fr); column-gap: var(--space-5); }
  .pd-pr-tl__item::before { inset-inline-start: calc(9rem + var(--space-5) + .75rem - .5px); }
  .pd-pr-tl__side { grid-column: 1; grid-row: 1 / span 4; display: grid; align-content: start; gap: var(--space-1); text-align: end; padding-block-start: .3rem; }
  .pd-pr-tl__dot { grid-column: 2; }
  .pd-pr-tl__item > :not(.pd-pr-tl__side, .pd-pr-tl__dot) { grid-column: 3; }
}
@container pd-pr-tl (max-inline-size: 43.99rem) {
  .pd-pr-tl__side { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
  .pd-pr-tl__item > :not(.pd-pr-tl__dot) { grid-column: 2; }
}

/* == Forced colours + print + motion */
@media (forced-colors: active) {
  .pd-pr-bar > i { border-color: CanvasText; }
  .pd-pr-bar[data-level] > i:nth-child(-n+4) { forced-color-adjust: none; }
  .pd-pr-bar[data-level="1"] > i:nth-child(-n+1), .pd-pr-bar[data-level="2"] > i:nth-child(-n+2), .pd-pr-bar[data-level="3"] > i:nth-child(-n+3), .pd-pr-bar[data-level="4"] > i:nth-child(-n+4) { background: CanvasText; }
  .pd-pr-mark::before, .pd-pr-src::before, .pd-pr-tl__dot, .pd-pr-pc__g { forced-color-adjust: none; border-color: CanvasText; }
  .pd-pr-mark--best::before, .pd-pr-src--measured::before, .pd-pr-pc__col--pro .pd-pr-pc__g { background: CanvasText; color: Canvas; }
  .pd-pr-flow__node { fill: Canvas; stroke: CanvasText; } .pd-pr-flow__t, .pd-pr-flow__s, .pd-pr-flow__n, .pd-pr-flow__el { fill: CanvasText; }
}
@media print {
  .pd-pr-verdict, .pd-pr-fit__tbl td.pd-pr-fit__this { background: none; }
  .pd-pr-alt:not([open]) > .pd-pr-alt__body { display: grid; }
  :where(.pd-pr-alts__item, .pd-pr-score__row, .pd-pr-tl__item, .pd-pr-pc__item) { break-inside: avoid; }
}
:where(.pd-pr-score, .pd-pr-alts) > :where(.pd-pr-score__list, .pd-pr-alts__list):first-child { border-block-start: 0; margin-block-start: calc(-1 * var(--space-3)); }
.pd-pr-fit--compare .pd-pr-fit__tbl { table-layout: fixed; }
.pd-pr-fit__tbl .pd-pr-fit__this + * { padding-inline-start: var(--space-4); }
.pd-pr-fit--compare .pd-pr-fit__tbl thead th:first-child { inline-size: 28%; }
@container pd-pr-method (max-inline-size: 34rem) { .pd-pr-disc li { grid-template-columns: minmax(0, 1fr); } }
}

/* ── part: researchkit.css ── */
/* PART researchkit · group Research · 02 Research kit. Blocks: .pd-rk-abs AbstractBox · .pd-rk-hyp HypothesisCard · .pd-rk-proto MethodProtocol · .pd-rk-ds DatasetCard · .pd-rk-lit LiteratureMatrix · .pd-rk-refs CitationList · .pd-rk-find FindingsSummary · .pd-rk-poster ResearchPoster · .pd-rk-peer PeerNotes.
 Diagram notation as the diagram kit: solid sync · dashed async · thick data · dotted optional; square badges; mono labels. */
@layer components.site {
/* shared */
:where(.pd-rk-abs, .pd-rk-hyp, .pd-rk-hyps, .pd-rk-proto, .pd-rk-ds, .pd-rk-lit, .pd-rk-refs, .pd-rk-find, .pd-rk-poster, .pd-rk-peer) {
 color: var(--text); font-size: 1rem; min-inline-size: 0;
 --pd-rk-hl: var(--hairline) solid var(--rule); --pd-rk-hs: var(--hairline) solid var(--rule-strong);
}
:where(.pd-rk-abs, .pd-rk-hyp, .pd-rk-hyps, .pd-rk-proto, .pd-rk-ds, .pd-rk-lit, .pd-rk-refs, .pd-rk-find, .pd-rk-poster, .pd-rk-peer) :where(h1, h2, h3, h4, p, ol, ul, dl, dd, figure, blockquote, pre){margin:0;}
:where(.pd-rk-abs, .pd-rk-hyp, .pd-rk-hyps, .pd-rk-proto, .pd-rk-ds, .pd-rk-lit, .pd-rk-refs, .pd-rk-find, .pd-rk-poster, .pd-rk-peer) :where(ol, ul){padding:0;list-style:none;}
/* block head: number · title ……… meta = SectionHead --s (selectors listed on the core .pd-section-head rules in bundle.css) */
/* mono micro label (dt, column heads, row keys) */
.pd-rk-lbl{text-transform:uppercase;color:var(--text-subtle);}
/* the bindu: one saffron dot per view, ringed in ink so it holds 3:1 on any ground */
.pd-rk-bindu {
 display: inline-block; flex: none; inline-size: .625em; block-size: .625em; border-radius: var(--radius-pill);
 background: var(--bindu-on-paper); box-shadow: 0 0 0 .125em var(--surface), 0 0 0 calc(.125em + 1px) var(--bindu-rim);
 vertical-align: .05em;
}
/* verdict: the shape carries the state, the word says it */
/* LEGACY alias of Status (.pd-status --full/--half/--crossed/--ring): same ring, vertical half and X. New markup uses .pd-status. */
.pd-rk-verdict {
 display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap;
 font: 500 var(--fs-caption)/1.3 var(--font-sans); color: var(--text);
}
.pd-rk-verdict::before {
 content: ""; flex: none; inline-size: .75em; block-size: .75em; border: .125em solid var(--text); border-radius: var(--radius-pill);
}
.pd-rk-verdict--supported::before{background:var(--text);}
.pd-rk-verdict--partly::before{background:linear-gradient(90deg, var(--text) 50%, transparent 50%);}
.pd-rk-verdict--rejected::before {
 background: linear-gradient(45deg, transparent calc(50% - .07em), var(--text) calc(50% - .07em) calc(50% + .07em), transparent calc(50% + .07em)),
 linear-gradient(-45deg, transparent calc(50% - .07em), var(--text) calc(50% - .07em) calc(50% + .07em), transparent calc(50% + .07em));
}
.pd-rk-verdict--open{color:var(--text-muted);}
/* open = empty ring, as Status --ring */
/* confidence: three rising bars, filled to the level, plus the word */
.pd-rk-conf{display:inline-flex;align-items:center;gap:var(--space-2);white-space:nowrap;font:500 var(--fs-caption)/1.3 var(--font-sans);color:var(--text-muted);}
.pd-rk-conf__m{display:inline-flex;align-items:flex-end;gap:.125em;block-size:.875em;}
.pd-rk-conf__m i{display:block;inline-size:.3125em;border:1px solid var(--text);box-sizing:border-box;}
.pd-rk-conf__m i:nth-child(1){block-size:40%;}
.pd-rk-conf__m i:nth-child(2){block-size:70%;}
.pd-rk-conf__m i:nth-child(3){block-size:100%;}
.pd-rk-conf--high i, .pd-rk-conf--moderate i:nth-child(-n+2), .pd-rk-conf--low i:nth-child(1){background:var(--text);}
.pd-rk-conf--tentative i{border-style:dashed;border-color:var(--text-muted);}
.pd-rk-conf b{font-weight:600;color:var(--text);}
/* hairline table; scrolls inside its own region */
.pd-rk-tbl{max-inline-size:100%;overflow-x:auto;}
.pd-rk-tbl:focus-visible{ outline-offset:var(--focus-offset);}
.pd-rk-tbl :where(table){inline-size:100%;border-collapse:collapse;font:var(--font-ui);font-size:var(--fs-label);font-variant-numeric:tabular-nums;}
.pd-rk-tbl :where(caption){padding-block-end:var(--space-3);text-align:start;caption-side:top;}
.pd-rk-tbl :where(th, td){padding:var(--space-3) var(--space-4) var(--space-3) 0;border-block-end:var(--pd-rk-hl);text-align:start;vertical-align:top;}
.pd-rk-tbl :where(thead th){font: var(--font-label);letter-spacing: normal;text-transform: none;color: var(--text-muted);border-block: var(--hairline) solid var(--rule-strong);vertical-align:bottom;} /* DataTable header recipe */
.pd-rk-tbl :where(tbody th){font-weight:500;}
.pd-rk-tbl :where(code){font:var(--font-meta);font-size:var(--fs-label);color:var(--text);}
.pd-rk-tbl :where(.pd-rk-num){text-align:end;}
/* DEPRECATED alias: .pd-rk-seg (aria-pressed segmented switch). New markup uses SegmentedControl (.pd-radio-group--segmented). Kept so older markup renders. */
.pd-rk-seg{display:inline-flex;flex-wrap:wrap;border:var(--hairline) solid var(--border-control);}
.pd-rk-seg button {
 min-block-size: var(--target-min); padding: 0 var(--space-4); border: 0; border-inline-start: var(--hairline) solid var(--border-control);
 background: transparent; color: var(--text-muted); font: var(--font-ui); font-size: var(--fs-label); cursor: pointer;
}
.pd-rk-seg button:first-child{border-inline-start:0;}
.pd-rk-seg button:hover{color:var(--text);background:color-mix(in srgb, var(--text) var(--state-hover-mix), transparent);}
.pd-rk-seg button[aria-pressed="true"]{background:var(--text);color:var(--surface);}
.pd-rk-seg button:focus-visible{ outline-offset:var(--focus-offset);position:relative;z-index:1;}
/* charts: ink plots, hairline grid, mono ticks; series differ by shape and dash */
.pd-rk-chart{position:relative;}
.pd-rk-chart svg{display:block;inline-size:100%;block-size:auto;overflow:visible;}
/* Forest-plot classes (FindingsSummary, ResearchPaperPage). Grid, zero and tick are aliases of the Data kit's .pd-ch-grid / .pd-ch-zero / .pd-ch-t; bar and line charts use .pd-ch-* directly. */
.pd-rk-c-grid{stroke:var(--rule);stroke-width:1;vector-effect:non-scaling-stroke;}
.pd-rk-c-axis{stroke:var(--text);stroke-width:1;vector-effect:non-scaling-stroke;}
.pd-rk-c-zero{stroke:var(--rule-strong);stroke-width:1;fill:none;vector-effect:non-scaling-stroke;}
.pd-rk-c-tick{font-family:var(--font-mono);font-size:var(--fs-meta);letter-spacing:var(--track-mono);fill:var(--text-subtle);}
.pd-rk-c-lab{font-family:var(--font-mono);font-size:var(--fs-caption);fill:var(--text);}
.pd-rk-c-lab--muted{fill:var(--text-muted);}
.pd-rk-c-ci{stroke:var(--text);stroke-width:1.5;vector-effect:non-scaling-stroke;}
.pd-rk-c-ci--dash{stroke-dasharray:3 2;}
.pd-rk-c-pt{fill:var(--text);stroke:var(--surface);stroke-width:1.5;cursor:pointer;}
.pd-rk-c-pt--open{fill:var(--surface);stroke:var(--text);}
.pd-rk-chart :where([tabindex]):focus{outline:none;}
.pd-rk-chart :where([tabindex]):focus-visible + .pd-rk-c-ring, .pd-rk-chart [data-active] + .pd-rk-c-ring{opacity:1;}
.pd-rk-c-ring{fill:none;stroke:var(--focus);stroke-width:2;opacity:0;pointer-events:none;}
.pd-rk-tip {
 position: absolute; z-index: var(--z-raised); inset-block-start: 0; inset-inline-start: 0; translate: -50% calc(-100% - .5rem);
 padding: var(--space-2) var(--space-3); background: var(--surface); border: var(--pd-rk-hs); box-shadow: var(--shadow-1);
 font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text); white-space: nowrap; pointer-events: none;
}
.pd-rk-tip[hidden]{display:none;}
.pd-rk-tip b{display:block;font-weight:600;}
.pd-rk-chart__help{margin-block-start:var(--space-2);}
/* text alternative under every visual */
.pd-rk-alt{margin-block-start:var(--space-3);border-block-start:var(--pd-rk-hl);}
/* Text-alternative summary: the shared .pd-alt__sum recipe (SystemLegend › Text alternative). */
.pd-rk-alt > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4); min-block-size: var(--target-min); padding-block: var(--space-3); cursor: pointer; list-style: none; font: var(--font-label); letter-spacing: normal; text-transform: none; color: var(--text); }
.pd-rk-alt > summary::-webkit-details-marker { display: none; }
.pd-rk-alt > summary::before { content: ""; flex: none; inline-size: .5em; block-size: .5em; border: 0; border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor; rotate: -45deg; translate: 0 -.1em; transition: rotate var(--dur-1) var(--ease-standard); }
.pd-rk-alt[open] > summary::before { content: ""; rotate: 45deg; }
.pd-rk-alt > summary:focus-visible { outline-offset: var(--focus-offset); }
@media (prefers-reduced-motion: reduce) { .pd-rk-alt > summary::before { transition: none; } }
/* note strip (Note · text) */
.pd-rk-note{display:flex;gap:var(--space-3);margin-block-start:var(--space-4);font:var(--font-body-s);font-size:var(--fs-caption);color:var(--text-muted);}
.pd-rk-note > :first-child{flex:none;}
/* shared type groups */
.pd-rk-lbl, .pd-rk-head__meta, .pd-rk-chart__help, .pd-rk-hyp__null b, .pd-rk-lit__sortlbl, .pd-rk-lit__src > span, .pd-rk-ref__type, .pd-rk-ref__used, .pd-rk-para__n > span, .pd-rk-msg__who span, .pd-rk-thread__done, .pd-rk-abs__id, .pd-rk-proto__mat li > span:last-child, .pd-rk-key, .pd-rk-ethics dl, .pd-rk-ds__sum, .pd-rk-ds__bias li > span:last-child, .pd-rk-ds__log li > span:not(:last-child), .pd-rk-lit__legend, .pd-rk-find__tally, .pd-rk-find__lead, .pd-rk-peer__count, .pd-rk-hyp__ev a, .pd-rk-find__ev a, .pd-rk-vtype, .pd-rk-ds__ver, .pd-rk-thread__anchor{font:var(--font-meta);letter-spacing:var(--track-mono);}
.pd-rk-head__meta, .pd-rk-chart__help, .pd-rk-hyp__null b, .pd-rk-lit__sortlbl, .pd-rk-lit__src > span, .pd-rk-ref__type, .pd-rk-ref__used, .pd-rk-para__n > span, .pd-rk-msg__who span, .pd-rk-thread__done{color:var(--text-subtle);}
.pd-rk-abs__id, .pd-rk-proto__mat li > span:last-child, .pd-rk-key, .pd-rk-ethics dl, .pd-rk-ds__sum, .pd-rk-ds__bias li > span:last-child, .pd-rk-ds__log li > span:not(:last-child), .pd-rk-lit__legend, .pd-rk-find__tally, .pd-rk-find__lead, .pd-rk-peer__count{color:var(--text-muted);}
.pd-rk-hyp__null, .pd-rk-hyp__dl dd, .pd-rk-proto__mat li, .pd-rk-proto__crit li, .pd-rk-step__d, .pd-rk-ethics p, .pd-rk-ds__sec > p, .pd-rk-ds__bias li, .pd-rk-ds__log li, .pd-rk-find__scope, .pd-rk-thread__q, .pd-rk-msg p, .pd-rk-peer__empty{font:var(--font-body-s);font-size:var(--fs-label);}
/* AbstractBox */
.pd-rk-abs{container:pd-rk-abs / inline-size;padding:var(--pad-panel);background:var(--surface-sunken);max-inline-size:var(--measure-wide);}
.pd-rk-abs__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2) var(--space-4);padding-block-end:var(--space-3);border-block-end:var(--pd-rk-hs);}
.pd-rk-abs__top > :last-child{margin-inline-start:auto;}
.pd-rk-abs__title{font:var(--font-headline);letter-spacing:var(--track-display);margin-block:var(--space-4) var(--space-2);}
.pd-rk-abs__by{font:var(--font-ui);font-size:var(--fs-label);color:var(--text-muted);}
.pd-rk-abs__dl{margin-block-start:var(--space-5);}
.pd-rk-abs__row{display:grid;gap:var(--space-1) var(--space-5);padding-block:var(--space-3);border-block-start:var(--pd-rk-hl);}
.pd-rk-abs__row dt{display:flex;align-items:baseline;gap:var(--space-2);}
.pd-rk-abs__row dd{margin:0;font:var(--font-body-s);max-inline-size:var(--measure);}
.pd-rk-abs__row--key dd{font-weight:500;color:var(--text);}
.pd-rk-abs__foot{display:grid;gap:var(--space-3);margin-block-start:var(--space-4);padding-block-start:var(--space-4);border-block-start:var(--pd-rk-hs);}
.pd-rk-abs__keys{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);}
.pd-rk-abs__id{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);}
.pd-rk-abs__id a{color:var(--link);text-underline-offset:.2em;overflow-wrap:anywhere;}
.pd-rk-abs--plain .pd-rk-abs__dl{display:none;}
.pd-rk-abs__plain{margin-block-start:var(--space-5);font:var(--font-body-s);max-inline-size:var(--measure);}
@container pd-rk-abs (min-width: 34em) {
 .pd-rk-abs__row{grid-template-columns:9em 1fr;}
}
/* HypothesisCard */
.pd-rk-hyps{container:pd-rk-hyps / inline-size;}
.pd-rk-hyps__grid{display:grid;gap:0 var(--space-6);margin-block-start:var(--space-2);}
@container pd-rk-hyps (min-width: 46em) { .pd-rk-hyps__grid { grid-template-columns: 1fr 1fr; } }
.pd-rk-hyps__tally{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);margin-block-start:var(--space-4);}
.pd-rk-hyp{display:grid;gap:var(--space-4);align-content:start;padding-block:var(--space-5);border-block-end:var(--pd-rk-hl);}
.pd-rk-hyp__top{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;}
.pd-rk-hyp__id {
 display: inline-grid; place-items: center; min-inline-size: 2.75em; block-size: 2.75em; padding-inline: var(--space-2);
 border: var(--pd-rk-hs); font: var(--font-numeral); letter-spacing: var(--track-mono); color: var(--text);
}
.pd-rk-hyp__top :where(.pd-status, .pd-rk-verdict){margin-inline-start:auto;}
.pd-rk-hyp__stmt{font:var(--font-title);letter-spacing:var(--track-text);max-inline-size:30em;}
.pd-rk-hyp__null{color:var(--text-muted);}
.pd-rk-hyp__null b{margin-inline-end:var(--space-2);font-weight:400;}
.pd-rk-hyp__dl{display:grid;gap:0;}
.pd-rk-hyp__dl > div{display:grid;grid-template-columns:6.5em 1fr;gap:var(--space-4);padding-block:var(--space-2);border-block-start:var(--pd-rk-hl);}
.pd-rk-hyp__dl dd{margin:0;}
.pd-rk-hyp__dl dt{padding-block-start:.15em;}
.pd-rk-hyp__ev{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3);}
.pd-rk-hyp__ev a, .pd-rk-find__ev a{color:var(--link);text-underline-offset:.2em;}
.pd-rk-hyp--open .pd-rk-hyp__stmt{color:var(--text-muted);}
.pd-rk-hyp--rejected .pd-rk-hyp__stmt{text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:var(--text-subtle);}
/* MethodProtocol */
.pd-rk-proto{container:pd-rk-proto / inline-size;display:grid;gap:var(--space-7);}
.pd-rk-proto__sum{display:grid;grid-template-columns:repeat(auto-fit, minmax(10em, 1fr));border-block-end:var(--pd-rk-hl);}
.pd-rk-proto__sum > div{display:grid;gap:var(--space-1);padding:var(--space-4) var(--space-4) var(--space-4) 0;}
.pd-rk-proto__sum dd{margin:0;font:var(--font-ui);font-size:var(--fs-label);}
.pd-rk-proto__sec{display:grid;gap:var(--space-4);}
.pd-rk-proto__h{display:flex;align-items:baseline;gap:var(--space-3);font:var(--font-kicker);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-muted);padding-block-end:var(--space-2);border-block-end:var(--pd-rk-hs);}
.pd-rk-proto__h span{font:var(--font-numeral);letter-spacing:var(--track-mono);color:var(--text-subtle);text-transform:none;}
.pd-rk-proto__two{display:grid;gap:var(--space-7);}
@container pd-rk-proto (min-width: 48em) { .pd-rk-proto__two { grid-template-columns: 1fr 1fr; } }
.pd-rk-proto__mat li{display:grid;grid-template-columns:1fr auto;gap:var(--space-3);padding-block:var(--space-2);border-block-end:var(--pd-rk-hl);}
.pd-rk-proto__n{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-3);font:var(--font-body-s);}
.pd-rk-proto__n b{white-space:nowrap;font:500 var(--fs-headline)/1 var(--font-display);font-variant-numeric:lining-nums tabular-nums;}
.pd-rk-proto__crit{display:grid;gap:var(--space-3);}
.pd-rk-proto__crit li{display:grid;grid-template-columns:1.25em 1fr;gap:var(--space-2);}
.pd-rk-proto__crit li::before{content:"+";font:var(--font-meta);color:var(--text);}
.pd-rk-proto__crit li.is-ex::before{content:"−";}
/* procedure: square step badges joined by a spine; the spine's dash says how steps connect */
.pd-rk-steps{counter-reset:pd-rk-step;}
.pd-rk-step{position:relative;display:grid;grid-template-columns:2.25em 1fr;gap:var(--space-4);padding-block-end:var(--space-5);}
.pd-rk-step::after {
 content: ""; position: absolute; inset-block: 2.25em 0; inset-inline-start: calc(1.125em - 1px);
 border-inline-start: 2px solid var(--text);
}
.pd-rk-step:last-child::after{display:none;}
.pd-rk-step--wait::after{border-inline-start-style:dashed;}
.pd-rk-step--opt::after{border-inline-start-style:dotted;}
.pd-rk-step__badge {
 display: grid; place-items: center; inline-size: 2.25em; block-size: 2.25em; box-sizing: border-box;
 border: 1.5px solid var(--text); background: var(--surface); font: var(--font-numeral); color: var(--text);
}
.pd-rk-step--opt .pd-rk-step__badge{border-style:dotted;}
.pd-rk-step__body{display:grid;gap:var(--space-1);padding-block-start:.3em;}
.pd-rk-step__t{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2) var(--space-3);font:var(--font-ui);font-weight:600;}
.pd-rk-step__t .pd-rk-lbl{font-weight:400;}
.pd-rk-step__d{color:var(--text-muted);max-inline-size:var(--measure);}
.pd-rk-step__d code{font:var(--font-meta);color:var(--text);}
.pd-rk-key{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);}
.pd-rk-key span{display:inline-flex;align-items:center;gap:var(--space-2);}
.pd-rk-key span::before{content:"";inline-size:1.75em;border-block-start:2px solid var(--text);}
.pd-rk-key .is-wait::before{border-block-start-style:dashed;}
.pd-rk-key .is-opt::before{border-block-start-style:dotted;}
.pd-rk-vtype{display:inline-flex;align-items:center;gap:var(--space-2);white-space:nowrap;}
.pd-rk-vtype::before{content:"";inline-size:.625em;block-size:.625em;border:1.5px solid var(--text);box-sizing:border-box;}
.pd-rk-vtype--iv::before{background:var(--text);}
.pd-rk-vtype--dv::before{border-radius:var(--radius-pill);}
.pd-rk-vtype--cv::before{border-style:dashed;}
.pd-rk-ethics{display:grid;grid-template-columns:auto 1fr;gap:var(--space-2) var(--space-4);padding-block:var(--space-4);border-block:var(--pd-rk-hs);}
.pd-rk-ethics svg{inline-size:1.25em;block-size:1.25em;fill:none;stroke:var(--text);stroke-width:1.5;}
.pd-rk-ethics p{max-inline-size:var(--measure-wide);}
.pd-rk-ethics dl{grid-column:2;display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-5);}
.pd-rk-ethics dl div{display:flex;gap:var(--space-2);}
.pd-rk-ethics dd{margin:0;color:var(--text);}
/* DatasetCard */
.pd-rk-ds{container:pd-rk-ds / inline-size;display:grid;gap:var(--space-6);}
.pd-rk-ds__name{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2) var(--space-4);margin-block-start:var(--space-4);}
.pd-rk-ds__name h2{font:var(--font-headline);letter-spacing:var(--track-display);}
.pd-rk-ds__ver{padding:.2em .5em;border:var(--pd-rk-hs);}
.pd-rk-ds__dek{font:var(--font-body-s);color:var(--text-muted);max-inline-size:var(--measure-wide);margin-block-start:var(--space-2);}
.pd-rk-ds__facts{display:grid;grid-template-columns:repeat(auto-fill, minmax(12em, 1fr));border-block-start:var(--pd-rk-hl);}
.pd-rk-ds__facts > div{display:grid;gap:var(--space-1);padding:var(--space-3) var(--space-4) var(--space-3) 0;border-block-end:var(--pd-rk-hl);}
.pd-rk-ds__facts dd{margin:0;font:var(--font-ui);font-size:var(--fs-label);overflow-wrap:anywhere;}
.pd-rk-ds__facts a{color:var(--link);}
.pd-rk-ds__get{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);}
.pd-rk-ds__sum{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;}
.pd-rk-ds__sum code{color:var(--text);overflow-wrap:anywhere;}
.pd-rk-ds__two{display:grid;gap:var(--space-6);}
@container pd-rk-ds (min-width: 48em) { .pd-rk-ds__two { grid-template-columns: 1fr 1fr; } }
.pd-rk-ds__sec{display:grid;gap:var(--space-3);align-content:start;}
.pd-rk-ds table{min-inline-size:40rem;}
.pd-rk-ds__sec > p{max-inline-size:var(--measure);}
.pd-rk-ds__bias li{display:grid;grid-template-columns:1fr auto;gap:var(--space-1) var(--space-3);padding-block:var(--space-3);border-block-end:var(--pd-rk-hl);}
.pd-rk-ds__log li{display:grid;grid-template-columns:5.5em 9em 1fr;gap:var(--space-3);padding-block:var(--space-2);border-block-end:var(--pd-rk-hl);}
.pd-rk-ds__log li:first-child > span:first-child{color:var(--text);font-weight:600;}
.pd-rk-ds__null{font:var(--font-meta);color:var(--text-subtle);}
/* LiteratureMatrix */
.pd-rk-lit{container:pd-rk-lit / inline-size;display:grid;gap:var(--space-4);}
.pd-rk-lit__bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-5);}
.pd-rk-lit__legend{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);}
.pd-rk-lit__legend li{display:inline-flex;align-items:center;gap:var(--space-2);}
.pd-rk-lit table{min-inline-size:44rem;}
.pd-rk-lit thead th{min-inline-size:6.5em;vertical-align:middle;}
/* column sort = an alias of DataTable's .pd-table__sort + .pd-table__arrow (same chevron, same focus token); no glyphs */
.pd-rk-lit__sort {
 display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--target-min); margin: 0; padding: 0 var(--space-3) 0 0; border: 0; background: none; cursor: pointer;
 font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; text-align: inherit;
}
.pd-rk-lit__sort:focus-visible{ outline-offset:calc(-1 * var(--focus-width));}
@media (hover: hover) { .pd-rk-lit__sort:hover { color: var(--text); text-decoration: underline var(--hairline); text-underline-offset: .3em; } }
.pd-rk-lit__sort::after{content:"";flex:none;inline-size:.6em;block-size:.6em;border-inline-end:1px solid var(--border-control);border-block-end:1px solid var(--border-control);rotate:45deg;translate:0 -.15em;opacity:var(--opacity-faint);}
:where([aria-sort="ascending"], [aria-sort="descending"]) > .pd-rk-lit__sort{color:var(--text);font-weight:600;}
:where([aria-sort="ascending"], [aria-sort="descending"]) > .pd-rk-lit__sort::after{border-color:var(--text);opacity:1;}
[aria-sort="ascending"] > .pd-rk-lit__sort::after{rotate:225deg;translate:0 .15em;}
@media (forced-colors: active) { .pd-rk-lit__sort::after { border-color: CanvasText; } }
.pd-rk-lit__sortbar{margin:0;container-type:normal;} /* a SegmentedControl inside the flex bar: size to its content */
.pd-rk-lit__src{display:grid;gap:.15em;min-inline-size:11em;}
.pd-rk-lit__src b{font-weight:600;}
.pd-rk-lit__src > span{font-weight:400;}
.pd-rk-lit__cell{display:grid;grid-template-columns:auto 1fr;gap:var(--space-2);align-items:baseline;color:var(--text-muted);font-size:var(--fs-caption);}
.pd-rk-lit__gap{display:inline-flex;align-items:center;gap:var(--space-2);}
.pd-rk-lit col.is-gap, .pd-rk-lit td.is-gap{background:color-mix(in srgb, var(--text) 4%, transparent);}
/* markers: filled · half · ring · dash */
.pd-rk-mk{display:inline-block;flex:none;inline-size:.75em;block-size:.75em;border:.125em solid var(--text);border-radius:var(--radius-pill);box-sizing:border-box;translate:0 .08em;}
.pd-rk-mk--central{background:var(--text);}
.pd-rk-mk--partial{background:linear-gradient(90deg, var(--text) 50%, transparent 50%);}
.pd-rk-mk--none{border:0;border-radius:0;block-size:2px;background:var(--text-subtle);translate:0 -.3em;}
@container pd-rk-lit (max-width: 40em) {
 .pd-rk-lit table{min-inline-size:0;}
 .pd-rk-lit :where(table, tbody, tr, th, td){display:block;}
 .pd-rk-lit thead{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);}
 .pd-rk-lit tbody tr{padding-block:var(--space-4);border-block-end:var(--pd-rk-hs);}
 .pd-rk-lit tbody :where(th, td){padding:var(--space-1) 0;border:0;}
 .pd-rk-lit tbody td{display:grid;grid-template-columns:8.5em 1fr;gap:var(--space-3);text-align:start;}
 .pd-rk-lit tbody td::before{content:attr(data-label);font:var(--font-meta);letter-spacing:var(--track-mono);text-transform:uppercase;color:var(--text-subtle);padding-block-start:.1em;}
 .pd-rk-lit tbody th{padding-block-end:var(--space-2);}
}
/* CitationList */
.pd-rk-refs{container:pd-rk-refs / inline-size;display:grid;gap:var(--space-4);max-inline-size:var(--measure-wide);}
.pd-rk-refs__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3);}
.pd-rk-refs__bar > .pd-radio-group{margin:0;container-type:normal;} /* SegmentedControl sizes to its content inside the flex bar (as .pd-rk-peer__bar) */
.pd-rk-refs__list{counter-reset:pd-rk-ref;}
.pd-rk-ref{counter-increment:pd-rk-ref;position:relative;padding-block:var(--space-3);border-block-end:var(--pd-rk-hl);}
.pd-rk-ref__text{padding-inline-start:2em;text-indent:-2em;font:var(--font-body-s);overflow-wrap:anywhere;}
.pd-rk-ref__text cite{font-style:italic;}
.pd-rk-ref__text a{color:var(--link);font:var(--font-meta);letter-spacing:0;text-underline-offset:.2em;}
.pd-rk-ref__acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-4);padding-inline-start:2em;margin-block-start:var(--space-1);}
.pd-rk-ref__used a{color:var(--text-muted);}
.pd-rk-ref__bib{flex-basis:100%;}
.pd-rk-ref__bib > summary {
 display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--target-min); cursor: pointer; list-style: none;
 font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text);
}
.pd-rk-ref__bib > summary::-webkit-details-marker{display:none;}
.pd-rk-ref__bib > summary::before{content:"{ }";color:var(--text-subtle);}
.pd-rk-ref__bib > summary:focus-visible{ outline-offset: var(--focus-offset);}
.pd-rk-ref__bib[open] > summary{text-decoration:underline;text-underline-offset:.25em;}
.pd-rk-ref__box{border:var(--pd-rk-hs);margin-block-end:var(--space-2);}
.pd-rk-ref__boxbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-1) var(--space-1) var(--space-1) var(--space-3);border-block-end:var(--pd-rk-hl);}
.pd-rk-ref__box pre{padding:var(--space-3);overflow-x:auto;font:var(--font-meta);letter-spacing:0;line-height:1.6;color:var(--text-muted);white-space:pre;}
.pd-rk-ref__box pre:focus-visible{ outline-offset: calc(-1 * var(--focus-width));}
.pd-rk-ref:target{background:color-mix(in srgb, var(--text) 4%, transparent);}
.pd-rk-ref:target .pd-rk-ref__text{text-decoration:underline 2px;text-decoration-color:var(--text);text-underline-offset:.3em;}
/* numbered style: the [n] sits in the hanging indent */
.pd-rk-refs__list--num .pd-rk-ref__text{padding-inline-start:2.75em;text-indent:0;}
.pd-rk-refs__list--num .pd-rk-ref__acts{padding-inline-start:2.75em;}
.pd-rk-refs__list--num .pd-rk-ref::before {
 content: "[" counter(pd-rk-ref) "]"; position: absolute; inset-inline-start: 0; inset-block-start: calc(var(--space-3) + .2em);
 font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle);
}
/* FindingsSummary */
.pd-rk-find{container:pd-rk-find / inline-size;display:grid;gap:var(--space-6);}
.pd-rk-head + .pd-rk-find__tally{margin-block-start:var(--space-3);}
.pd-rk-find__tally{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);}
.pd-rk-find__item{display:grid;grid-template-columns:3em 1fr;gap:var(--space-2) var(--space-4);padding-block:var(--space-5);border-block-end:var(--pd-rk-hl);}
/* List numeral (Utilities › Numerals, role 1): the .pd-num recipe. */
.pd-rk-find__n{font:var(--font-numeral);letter-spacing:var(--track-mono);font-variant-numeric:tabular-nums;color:var(--text-subtle);display:flex;align-items:baseline;gap:var(--space-2);}
.pd-rk-find__body{display:grid;gap:var(--space-2);min-inline-size:0;}
.pd-rk-find__stmt{font:var(--font-title);font-size:var(--fs-body);line-height:1.4;max-inline-size:34em;}
.pd-rk-find__item--lead .pd-rk-find__stmt{font:var(--font-title);}
.pd-rk-find__scope{color:var(--text-muted);max-inline-size:var(--measure);}
.pd-rk-find__meta{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-5);margin-block-start:var(--space-1);}
.pd-rk-find__ev{display:inline-flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3);}
.pd-rk-find__lead{display:inline-flex;align-items:center;gap:var(--space-2);}
@container pd-rk-find (min-width: 50em) {
 .pd-rk-find__item{grid-template-columns:4em 1fr 13em;}
 .pd-rk-find__meta{grid-column:3;grid-row:1;flex-direction:column;align-items:flex-start;margin:0;padding-block-start:.3em;}
}
/* ══ ResearchPoster ══════════════════════════════════════════════════════
 All sizes in --pd-rk-u (1% of the poster width), so a 600px preview and an 841mm print share one layout. */
.pd-rk-poster-frame{container:pd-rk-frame / inline-size;}
.pd-rk-poster {
 --pd-rk-u: 1cqi; container: pd-rk-poster / inline-size;
 display: grid; grid-template-rows: auto auto 1fr auto; aspect-ratio: 841 / 1189; box-sizing: border-box; inline-size: 100%;
 padding: calc(var(--pd-rk-u)*4); background: var(--surface); color: var(--text);
 border: var(--pd-rk-hs); box-shadow: var(--shadow-2); overflow: hidden;
 font-size: calc(var(--pd-rk-u)*1.85);
}
.pd-rk-poster__band{display:grid;grid-template-columns:1fr auto;gap:calc(var(--pd-rk-u)*3);align-items:end;padding-block-end:calc(var(--pd-rk-u)*2.4);border-block-end:calc(var(--pd-rk-u)*.35) solid var(--rule-strong);}
.pd-rk-poster__kick{font-family:var(--font-sans);font-size:calc(var(--pd-rk-u)*1.2);font-weight:600;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-muted);}
.pd-rk-poster__title{margin-block-start:calc(var(--pd-rk-u)*1.2);font-family:var(--font-display);font-weight:500;font-size:calc(var(--pd-rk-u)*5.6);line-height:1.02;letter-spacing:var(--track-display);}
.pd-rk-poster__title em{font-style:italic;color:var(--text-muted);}
.pd-rk-poster__qr{display:grid;justify-items:center;gap:calc(var(--pd-rk-u)*.6);inline-size:calc(var(--pd-rk-u)*12);}
.pd-rk-poster__qr svg{inline-size:100%;block-size:auto;}
.pd-rk-poster__qr span{font-family:var(--font-mono);font-size:calc(var(--pd-rk-u)*.9);color:var(--text-subtle);text-align:center;}
.pd-rk-qr-cell{fill:var(--text);}
.pd-rk-qr-hole{fill:var(--surface);}
.pd-rk-poster__people{display:flex;flex-wrap:wrap;justify-content:space-between;gap:calc(var(--pd-rk-u)*1) calc(var(--pd-rk-u)*3);padding-block:calc(var(--pd-rk-u)*1.6);border-block-end:var(--pd-rk-hl);font-family:var(--font-sans);font-size:calc(var(--pd-rk-u)*1.5);}
.pd-rk-poster__people b{font-weight:600;}
.pd-rk-poster__people sup, .pd-rk-poster__aff sup{font-family:var(--font-mono);font-size:.65em;}
.pd-rk-poster__aff{font-family:var(--font-mono);font-size:calc(var(--pd-rk-u)*1.05);color:var(--text-muted);}
.pd-rk-poster__cols{display:grid;grid-template-columns:repeat(3, 1fr);gap:0 calc(var(--pd-rk-u)*3);padding-block-start:calc(var(--pd-rk-u)*2.4);min-block-size:0;}
.pd-rk-poster__col{display:grid;align-content:start;gap:calc(var(--pd-rk-u)*2.4);min-inline-size:0;}
.pd-rk-poster__col + .pd-rk-poster__col{padding-inline-start:calc(var(--pd-rk-u)*3);border-inline-start:var(--pd-rk-hl);margin-inline-start:calc(var(--pd-rk-u)*-1.5);}
.pd-rk-poster__sec{display:grid;gap:calc(var(--pd-rk-u)*1);}
.pd-rk-poster__h{display:flex;align-items:baseline;gap:calc(var(--pd-rk-u)*1);padding-block-start:calc(var(--pd-rk-u)*.8);border-block-start:calc(var(--pd-rk-u)*.2) solid var(--rule-strong);font-family:var(--font-text);font-size:calc(var(--pd-rk-u)*2.6);font-weight:500;line-height:1.15;}
.pd-rk-poster__h span{font-family:var(--font-mono);font-size:.5em;color:var(--text-subtle);letter-spacing:var(--track-mono);}
.pd-rk-poster__sec p, .pd-rk-poster__sec li{font-family:var(--font-text);font-size:1em;line-height:1.45;color:var(--text);}
.pd-rk-poster__sec ol{display:grid;gap:calc(var(--pd-rk-u)*.7);counter-reset:pd-rk-pf;}
.pd-rk-poster__sec ol > li{display:grid;grid-template-columns:2.2em 1fr;counter-increment:pd-rk-pf;}
.pd-rk-poster__sec ol > li::before{content:counter(pd-rk-pf, decimal-leading-zero);font-family:var(--font-mono);font-size:.8em;color:var(--text-subtle);padding-block-start:.15em;}
.pd-rk-poster__sec .pd-rk-poster__big{font-family:var(--font-display);font-size:1.6em;line-height:1.15;}
.pd-rk-poster__fig{display:grid;gap:calc(var(--pd-rk-u)*.6);}
.pd-rk-poster__fig figcaption{font-family:var(--font-sans);font-size:calc(var(--pd-rk-u)*1.25);line-height:1.4;color:var(--text-muted);}
.pd-rk-poster__fig figcaption b{color:var(--text);font-family:var(--font-mono);font-weight:400;}
.pd-rk-poster :is(.pd-rk-c-tick, .pd-ch-t){font-size:calc(var(--pd-rk-u)*1.25);}
.pd-rk-poster .pd-rk-c-lab{font-size:calc(var(--pd-rk-u)*1.4);}
.pd-rk-poster .pd-rk-alt{margin-block-start:calc(var(--pd-rk-u)*.4);}
.pd-rk-poster .pd-rk-alt > summary{min-block-size:0;padding-block:0;font-size:calc(var(--pd-rk-u)*.95);}
.pd-rk-poster .pd-rk-tbl table{font-size:calc(var(--pd-rk-u)*1.05);}
.pd-rk-poster .pd-rk-tbl :where(th, td){padding:.3em .8em .3em 0;}
.pd-rk-poster__refs li{font-family:var(--font-sans);font-size:calc(var(--pd-rk-u)*1.25);color:var(--text-muted);}
.pd-rk-poster__foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:calc(var(--pd-rk-u)*2);padding-block-start:calc(var(--pd-rk-u)*1.4);border-block-start:var(--pd-rk-hs);font-family:var(--font-mono);font-size:calc(var(--pd-rk-u)*1);letter-spacing:var(--track-mono);color:var(--text-subtle);}
.pd-rk-poster__foot > span{display:inline-flex;align-items:center;gap:.6em;}
.pd-rk-poster .pd-rk-bindu{inline-size:.8em;block-size:.8em;}
/* flow diagram on the poster: drawn with the Diagram kit (.pd-dg__zone-box, __shape, __edge(--async|--data|--optional), __badge and
   diagram.js's marker geometry at poster scale). Only the poster's type sizes and the optional-box dash are local. */
.pd-rk-flow{color:var(--text);}
.pd-rk-flow .pd-dg__edge{vector-effect:non-scaling-stroke;}
.pd-rk-flow-optbox{stroke-width:1.6;stroke-dasharray:0 4.5;stroke-linecap:round;}
.pd-rk-flow-t{font-family:var(--font-mono);fill:var(--text);}
.pd-rk-flow-t--muted{fill:var(--text-muted);}
.pd-rk-flow-badge-t{font-family:var(--font-mono);fill:var(--surface);}
@container pd-rk-frame (max-width: 30em) {
 .pd-rk-poster{aspect-ratio:auto;font-size:calc(var(--pd-rk-u)*4.4);padding:calc(var(--pd-rk-u)*5);}
 .pd-rk-poster__cols{grid-template-columns:1fr;gap:calc(var(--pd-rk-u)*5);}
 .pd-rk-poster__col + .pd-rk-poster__col{padding-inline-start:0;border-inline-start:0;margin-inline-start:0;}
 .pd-rk-poster__title{font-size:calc(var(--pd-rk-u)*9);}
 .pd-rk-poster__kick, .pd-rk-poster__people, .pd-rk-poster__fig figcaption, .pd-rk-poster__foot, .pd-rk-poster .pd-rk-alt > summary, .pd-rk-poster .pd-rk-tbl table, .pd-rk-poster__refs li, .pd-rk-poster__aff, .pd-rk-poster__qr span{font-size:calc(var(--pd-rk-u)*3.4);}
 .pd-rk-poster__h{font-size:calc(var(--pd-rk-u)*6.4);}
 .pd-rk-poster :is(.pd-rk-c-tick, .pd-ch-t){font-size:calc(var(--pd-rk-u)*3.2);}
 .pd-rk-poster .pd-rk-c-lab{font-size:calc(var(--pd-rk-u)*3.4);}
 .pd-rk-poster__band{grid-template-columns:1fr;}
 .pd-rk-poster__qr{inline-size:calc(var(--pd-rk-u)*18);justify-self:start;justify-items:start;}
 .pd-rk-poster__col, .pd-rk-poster__sec{gap:calc(var(--pd-rk-u)*3);}
}
.pd-rk-poster--a1{page:pd-rk-a1;}
@media print {
 @page { size: A0 portrait; margin: 0; }
 @page pd-rk-a1 { size: A1 portrait; margin: 0; }
 .pd-rk-poster{inline-size:841mm;block-size:1189mm;aspect-ratio:auto;border:0;box-shadow:none;--pd-rk-u:8.41mm;print-color-adjust:exact;break-inside:avoid;}
 .pd-rk-poster--a1{inline-size:594mm;block-size:841mm;--pd-rk-u:5.94mm;}
 .pd-rk-poster .pd-rk-alt, .pd-rk-chart__help, .pd-rk-tip{display:none;}
}
/* PeerNotes */
.pd-rk-peer{container:pd-rk-peer / inline-size;display:grid;gap:var(--space-5);}
.pd-rk-peer__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3);}
/* the filter is the canonical SegmentedControl; its count is meta type in the segment's own ink (--selected-fg when checked), never --text-subtle on the jade fill */
.pd-rk-peer__bar > .pd-radio-group{margin:0;container-type:normal;} /* size to its content inside the flex bar (as .pd-rk-lit__sortbar) */
.pd-rk-peer__n{font:var(--font-meta);letter-spacing:var(--track-mono);font-variant-numeric:tabular-nums;color:inherit;}
.pd-rk-peer__grid{display:grid;gap:var(--space-7);}
@container pd-rk-peer (min-width: 52em) { .pd-rk-peer__grid { grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--space-7); } .pd-rk-peer__side { position: sticky; inset-block-start: var(--space-4); align-self: start; } }
.pd-rk-peer__doc{display:grid;gap:var(--space-1);align-content:start;}
.pd-rk-para{display:grid;grid-template-columns:3.25em 1fr;gap:var(--space-3);padding-block:var(--space-3);padding-inline-end:var(--space-3);border-inline-start:2px solid transparent;}
.pd-rk-para__n{display:grid;align-content:start;justify-items:start;gap:var(--space-1);padding-inline-start:var(--space-2);}
.pd-rk-para__n > span{padding-block-start:.3em;}
.pd-rk-para__c {
 display: inline-flex; align-items: center; justify-content: center; gap: .25em; min-inline-size: var(--target-min); min-block-size: 1.75em; padding: 0 .4em;
 border: var(--hairline) solid var(--text); background: var(--surface); color: var(--text); font: var(--font-meta); text-decoration: none; position: relative;
}
.pd-rk-para__c::after{content:"";position:absolute;inset:-.5em -.1em;}
.pd-rk-para__c--done{border-style:dashed;border-color:var(--text-subtle);color:var(--text-subtle);}
.pd-rk-para__c:focus-visible{ outline-offset: var(--focus-offset);}
.pd-rk-para p{font:var(--font-body);max-inline-size:var(--measure);}
.pd-rk-para mark{background:transparent;color:inherit;text-decoration:underline 2px;text-decoration-color:var(--text-subtle);text-underline-offset:.25em;}
.pd-rk-para[data-active]{border-inline-start-color:var(--text);background:color-mix(in srgb, var(--text) 4%, transparent);}
.pd-rk-para[data-active] mark{text-decoration-color:var(--text);}
.pd-rk-peer__side{display:grid;gap:var(--space-4);}
.pd-rk-thread{display:grid;gap:var(--space-3);padding:var(--space-4);border:var(--pd-rk-hl);background:var(--surface);scroll-margin-block:var(--space-6);}
.pd-rk-thread[data-active]{border-color:var(--text);box-shadow:inset 0 var(--hairline) 0 var(--rule-strong);}
.pd-rk-thread[hidden]{display:none;}
.pd-rk-thread__top{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;}
.pd-rk-thread__anchor{color:var(--text);padding:.15em .45em;border:var(--pd-rk-hs);text-decoration:none;}
.pd-rk-thread__anchor:hover{background:color-mix(in srgb, var(--text) var(--state-hover-mix), transparent);}
.pd-rk-thread__anchor:focus-visible{ outline-offset: var(--focus-offset);}
.pd-rk-thread__state{margin-inline-start:auto;display:inline-flex;align-items:center;gap:var(--space-2);font:500 var(--fs-caption)/1.3 var(--font-sans);color:var(--text);}
.pd-rk-thread__state::before{content:"";inline-size:.7em;block-size:.7em;border:.125em solid var(--text);border-radius:var(--radius-pill);box-sizing:border-box;}
.pd-rk-thread[data-state="resolved"] .pd-rk-thread__state{color:var(--text-muted);}
.pd-rk-thread[data-state="resolved"] .pd-rk-thread__state::before{background:var(--text-muted);border-color:var(--text-muted);}
.pd-rk-thread__q{padding-inline-start:var(--space-4);border:0;font-style:italic;color:var(--text-muted);}
.pd-rk-thread__msgs{display:grid;gap:var(--space-3);}
.pd-rk-msg{display:grid;gap:var(--space-1);}
.pd-rk-msg + .pd-rk-msg{padding-block-start:var(--space-3);border-block-start:var(--pd-rk-hl);}
.pd-rk-msg__who{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-1) var(--space-3);font:var(--font-ui);font-size:var(--fs-label);font-weight:600;}
.pd-rk-msg__who span{font-weight:400;}
.pd-rk-msg__who .pd-rk-msg__kind{padding:0 .4em;border:var(--pd-rk-hs);color:var(--text-muted);text-transform:uppercase;}
.pd-rk-thread__acts{display:flex;flex-wrap:wrap;gap:var(--space-2);}
.pd-rk-thread[data-state="resolved"]{border-style:dashed;background:transparent;}
.pd-rk-thread[data-state="resolved"] :where(.pd-rk-thread__msgs, .pd-rk-thread__q){display:none;}
.pd-rk-thread[data-state="resolved"][data-expanded] :where(.pd-rk-thread__msgs, .pd-rk-thread__q){display:grid;}
.pd-rk-thread[data-state="open"] :where(.pd-rk-thread__done, [data-act="expand"]), .pd-rk-thread[data-state="resolved"] [data-act="reply"]{display:none;}
.pd-rk-peer__empty{padding:var(--space-5) 0;border-block:var(--pd-rk-hl);color:var(--text-muted);}
@media (forced-colors: active) {
 .pd-rk-verdict::before, .pd-rk-mk, .pd-rk-conf__m i, .pd-rk-vtype::before, .pd-rk-thread__state::before{forced-color-adjust:none;border-color:CanvasText;}
 .pd-rk-verdict--supported::before, .pd-rk-mk--central, .pd-rk-conf--high i, .pd-rk-vtype--iv::before{background:CanvasText;}
 .pd-rk-bindu{forced-color-adjust:none;background:Highlight;}
}
}

/* ── part: researchpages.css ── */
@layer components.site {
/* Pandox DS — package "researchpages": glue for three page templates. Owns only the page prefixes
   .pd-rpage (ResearchPaperPage) · .pd-hwpage (HardwareDocPage) · .pd-planpage (ProjectPlanPage).
   Every visible part is an existing component: research kit (.pd-rk-*), Data kit (.pd-ch-*), hardware kit
   (.pd-hw-*), diagram kits (.pd-dg, .pd-dx-*), tech-writing section heads (.pd-td-sec, .pd-td-spec), Masthead,
   Breadcrumbs, TableOfContents, Prose, SiteFooterMega. This file places them, sets band rhythm and aligns columns
   to --page-max. It adds nothing visible of its own and no colour: every value is a semantic token. */

/* ── shared frame ─────────────────────────────────────────────────────────── */
.pd-rpage, .pd-hwpage, .pd-planpage {
  --pd-rp-sticky: calc(var(--space-6) + 3.5rem); /* sticky rails and in-page targets sit below the sticky masthead bar */
  container: pd-page / inline-size; display: flow-root; min-block-size: 100vh; background: var(--surface); color: var(--text);
}
:where(.pd-rpage, .pd-hwpage, .pd-planpage) > main { display: block; padding-block-end: var(--space-10); }
:where(.pd-rpage, .pd-hwpage, .pd-planpage) > main:focus { outline: 0; }
:where(.pd-rpage, .pd-hwpage, .pd-planpage) [data-section][hidden] { display: none; }
:where(.pd-rpage, .pd-hwpage, .pd-planpage) :where([id]) { scroll-margin-block-start: var(--pd-rp-sticky); }
.pd-rpage__wrap, .pd-hwpage__wrap, .pd-planpage__wrap {
  box-sizing: border-box; inline-size: 100%; max-inline-size: var(--page-max); margin-inline: auto; padding-inline: var(--gutter);
}
.pd-rpage__crumbs, .pd-hwpage__crumbs, .pd-planpage__crumbs { padding-block: var(--space-5) var(--space-6); }

/* Rail + main column: a TableOfContents rail (compact disclosure above the content on narrow pages,
   sticky beside it from 64em; --pd-toc-compact is the TOC's own switch) and one article column. */
.pd-rpage__body, .pd-hwpage__body, .pd-planpage__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding-block-start: var(--space-8); }
/* doubled class: outranks the TOC's own --rail default, which loads after this part */
.pd-rpage__toc.pd-rpage__toc, .pd-hwpage__toc.pd-hwpage__toc, .pd-planpage__toc.pd-planpage__toc { --pd-toc-compact: 1; }
@container pd-page (min-width: 64em) {
  .pd-rpage__body, .pd-hwpage__body, .pd-planpage__body { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-8); align-items: start; }
  .pd-rpage__toc.pd-rpage__toc, .pd-hwpage__toc.pd-hwpage__toc, .pd-planpage__toc.pd-planpage__toc { --pd-toc-compact: -1; inset-block-start: var(--pd-rp-sticky); max-block-size: calc(100dvh - var(--pd-rp-sticky) - var(--space-6)); }
}
@container pd-page (max-width: 63.99em) {
  .pd-rpage__toc.pd-rpage__toc, .pd-hwpage__toc.pd-hwpage__toc, .pd-planpage__toc.pd-planpage__toc { position: static; max-block-size: none; }
}
.pd-rpage__main, .pd-hwpage__main, .pd-planpage__main { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-9); min-inline-size: 0; }
:where(.pd-rpage__main, .pd-hwpage__main, .pd-planpage__main) > * { min-inline-size: 0; margin-block: 0; }

/* one numbered band = a head (component head or .pd-td-sec) + its content */
.pd-rpage__sec, .pd-hwpage__sec, .pd-planpage__sec { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); min-inline-size: 0; }
:where(.pd-rpage__sec, .pd-hwpage__sec, .pd-planpage__sec) > * { min-inline-size: 0; margin-block: 0; }
.pd-hwpage__sec > .pd-td-sec, .pd-planpage__sec > .pd-td-sec { margin-block-end: 0; } /* the band's gap spaces it */
.pd-rpage__sec > .pd-rk-head { margin-block-end: 0; }
.pd-rpage__prose, .pd-hwpage__prose, .pd-planpage__prose { max-inline-size: var(--measure-wide); }
:where(.pd-rpage__prose, .pd-hwpage__prose, .pd-planpage__prose) > :first-child { margin-block-start: 0; }
:where(.pd-rpage__prose, .pd-hwpage__prose, .pd-planpage__prose) > :last-child { margin-block-end: 0; }
.pd-rpage__lead, .pd-hwpage__lead, .pd-planpage__lead { max-inline-size: var(--measure-wide); font: var(--font-body); color: var(--text-muted); }

/* the Haṃsa motto is the last line of SiteFooterMega (.pd-logo__motto.pd-megafoot__motto); pages add none of their own */

/* ── ResearchPaperPage ────────────────────────────────────────────────────── */
/* the AbstractBox is the title block: full measure under the crumbs, its title is the page h1 */
.pd-rpage__abs { max-inline-size: 64rem; }
/* two figures side by side once each can be ≥ 26rem; one column below */
.pd-rpage__pair { display: grid; gap: var(--space-8) var(--space-7); grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); align-items: start; }
.pd-rpage__cite { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; font: var(--font-caption); color: var(--text-muted); }

/* ── HardwareDocPage ──────────────────────────────────────────────────────── */
.pd-hwpage__head { max-inline-size: 64rem; }

/* ── ProjectPlanPage ──────────────────────────────────────────────────────── */
.pd-planpage__head { max-inline-size: 64rem; }

@media print {
  :where(.pd-rpage, .pd-hwpage, .pd-planpage) :where(.pd-masthead, .pd-megafoot, .pd-rpage__toc, .pd-hwpage__toc, .pd-planpage__toc, .pd-crumbs, .pd-skip) { display: none; }
  .pd-rpage__body, .pd-hwpage__body, .pd-planpage__body { display: block; padding-block-start: 0; }
  .pd-rpage__main, .pd-hwpage__main, .pd-planpage__main { row-gap: var(--space-7); }
  .pd-rpage__wrap, .pd-hwpage__wrap, .pd-planpage__wrap { max-inline-size: none; padding-inline: 0; }
}

  /* ProjectPlanPage: Roadmap key uses the Status atom, so the key's mono-caps dt styling is neutralised here. */
  .pd-planpage .pd-dx-road__key dt { font: inherit; letter-spacing: normal; text-transform: none; }
  /* Visible scroll cue for wide figures (Gantt, journey) on narrow screens; the frame's edge shade stays as well. */
  .pd-planpage__scrollhint { display: none; margin: 0; color: var(--text-muted); text-align: end; }
  @media (max-width: 47.99em) { .pd-planpage__scrollhint { display: block; } }
}

/* ── part: reviews.css ── */
/* ── PART: reviews ───────────────────────────────────────────────────────────
   Pandox DS v2 · package "reviews" · the Review content kind: art, books, music, films, tools.
   .pd-review     ReviewCard — kind kicker, image slot, title of the work, creator · year · medium,
                  two-line dek, one-word verdict in the display italic, "Would revisit", date reviewed
   .pd-reviewart  ReviewArticle — review page header, facts table, body hooks for Prose,
                  "What stays with me", closing verdict, related reviews
   .pd-reviews    ReviewIndex — /reviews: kind filters (aria-pressed), sort, dense list / grid toggle
   No stars, no numbers. A verdict is a word plus a shape (Essential ● · Worth it ◐ · Mixed ⊖ · Skip ⊘),
   so it reads in Ink and Void without hue. The saffron bindu is one moment per view: the dot in the
   kicker of a featured card, or the mark beside "What stays with me" on the review page. */
@layer components.site {

/* ══ Verdict (shared by all three) ═════════════════════════════════════════ */
.pd-review__verdict { display: inline-flex; align-items: center; gap: .45em; margin: 0; font: italic 400 var(--fs-title)/1.1 var(--font-display); letter-spacing: 0; color: var(--text); white-space: nowrap; }
.pd-review__verdict::before { content: ""; flex: none; box-sizing: border-box; inline-size: .5em; block-size: .5em; border: .09em solid currentColor; border-radius: var(--radius-pill); background: transparent; translate: 0 .04em; }
.pd-review__verdict--essential { color: var(--link); }
.pd-review__verdict--essential::before { background: currentColor; }
.pd-review__verdict--worth::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.pd-review__verdict--mixed::before { background: linear-gradient(currentColor, currentColor) center / 100% .09em no-repeat; }
.pd-review__verdict--skip { color: var(--text-muted); }
.pd-review__verdict--skip::before { background: linear-gradient(135deg, transparent calc(50% - .05em), currentColor calc(50% - .05em) calc(50% + .05em), transparent calc(50% + .05em)); }
.pd-review__verdict--pending { color: var(--text-subtle); }
.pd-review__verdict--pending::before { border-style: dashed; }
.pd-review__revisit { margin: 0; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); white-space: nowrap; }
.pd-review__revisit b { font-weight: 500; color: var(--text); }

/* Bindu in the kicker: "Review·Book". Ink by default; saffron only on a featured card. */
.pd-review__bindu { display: inline-block; inline-size: .375rem; block-size: .375rem; margin-inline: .45em; border-radius: var(--radius-pill); background: currentColor; vertical-align: .14em; }

/* ══ ReviewCard ════════════════════════════════════════════════════════════ */
.pd-review {
  --pd-review-w: 62%; --pd-review-r: 1;
  position: relative; display: flex; flex-direction: column; gap: var(--space-3); min-inline-size: 0; margin: 0;
  padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule-strong);
  font-family: var(--font-sans); color: var(--text);
}
.pd-review--art   { --pd-review-w: 66%;  --pd-review-r: 4 / 5; }
.pd-review--book  { --pd-review-w: 52%;  --pd-review-r: 2 / 3; }
.pd-review--music { --pd-review-w: 70%;  --pd-review-r: 1; }
.pd-review--film  { --pd-review-w: 100%; --pd-review-r: 16 / 9; }
.pd-review--tool  { --pd-review-w: 58%;  --pd-review-r: 1; }

.pd-review__kicker { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-1) var(--space-3); margin: 0; font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
.pd-review__kind { white-space: nowrap; }
:where(.pd-review:not(.pd-review--row, .pd-review--text, .pd-review--featured)) .pd-review__kicker { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.pd-review__kind .pd-review__bindu { color: var(--text-subtle); }
.pd-review__date { font: var(--font-meta); letter-spacing: var(--track-mono); text-transform: none; color: var(--text-subtle); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Image slot: a square sunken plate; the work sits inside at its own proportion. Square corners. */
.pd-review__media { display: grid; place-items: center; margin: 0; aspect-ratio: 1; padding: 8%; background: var(--surface-sunken); border-radius: var(--radius-0); overflow: hidden; }
.pd-review__media > :where(img, .pd-ph, svg) { display: block; inline-size: var(--pd-review-w); max-block-size: 100%; aspect-ratio: var(--pd-review-r); --pd-ph-ratio: var(--pd-review-r); object-fit: cover; border-radius: var(--radius-0); }
.pd-review__media > .pd-ph { background-color: var(--surface); transition: border-color var(--dur-1) var(--ease-standard); }

.pd-review__title { margin: 0; font: var(--font-title); text-wrap: balance; }
.pd-review__title cite { font-style: normal; }
.pd-review__title a { color: inherit; text-decoration: none; }
.pd-review__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pd-review__title a:focus-visible { outline: none; }
.pd-review__title a:focus-visible::after { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
.pd-review__by { display: flex; flex-wrap: wrap; gap: 0 .4em; margin: calc(-1 * var(--space-2)) 0 0; font: var(--font-label); color: var(--text-muted); }
.pd-review__by > :not(:last-child)::after { content: "·"; margin-inline-start: .4em; color: var(--text-subtle); }
.pd-review__dek { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin: 0; font: var(--font-body-s); color: var(--text-muted); }
.pd-review__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-2) var(--space-4); margin-block-start: auto; padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule); }

@media (hover: hover) {
  .pd-review:hover .pd-review__title a { text-decoration: underline; text-decoration-thickness: var(--hairline); text-underline-offset: .15em; }
  :where(.pd-review:hover) .pd-review__media > .pd-ph { border-color: var(--text-subtle); }
}
:where(.pd-review:has(.pd-review__title a:focus-visible)) .pd-review__title a { text-decoration: underline; text-decoration-thickness: var(--hairline); text-underline-offset: .15em; }

/* Row: thumbnail beside the text — related lists and narrow columns */
.pd-review--row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); grid-template-areas: "kick kick" "media title" "media by" "media foot"; align-content: start; align-items: start; gap: var(--space-2) var(--space-4); }
.pd-review--row .pd-review__kicker { grid-area: kick; }
.pd-review--row .pd-review__media { grid-area: media; padding: 10%; }
.pd-review--row .pd-review__title { grid-area: title; font-size: var(--fs-body); }
.pd-review--row .pd-review__by { grid-area: by; margin: 0; }
.pd-review--row .pd-review__dek, .pd-review--row .pd-ph__label { display: none; }
.pd-review--row .pd-review__foot { grid-area: foot; margin: 0; padding: var(--space-2) 0 0; }
.pd-review--row .pd-review__verdict { font-size: var(--fs-body); }

/* Text: no image slot */
.pd-review--text .pd-review__media { display: none; }

/* Featured: wider, image beside text at ≥40rem of the parent; the one saffron bindu */
.pd-review--featured .pd-review__kind .pd-review__bindu { inline-size: .5rem; block-size: .5rem; background: var(--bindu-on-paper); color: var(--bindu-on-paper); box-shadow: 0 0 0 1px var(--saffron-700); vertical-align: .08em; }
.pd-review--featured .pd-review__title { font-size: var(--fs-headline); }
.pd-review--featured .pd-review__dek { font: var(--font-body); -webkit-line-clamp: 3; line-clamp: 3; }
.pd-review--featured .pd-review__verdict { font-size: var(--fs-headline); }
.pd-review__wrap { container: pd-review / inline-size; }
@container pd-review (min-inline-size: 40rem) {
  .pd-review--featured { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "kick kick" "media title" "media by" "media dek" "media foot"; grid-template-rows: auto auto auto auto 1fr; gap: var(--space-3) var(--space-6); }
  .pd-review--featured .pd-review__kicker { grid-area: kick; }
  .pd-review--featured .pd-review__media { grid-area: media; }
  .pd-review--featured .pd-review__title { grid-area: title; margin-block-start: var(--space-2); }
  .pd-review--featured .pd-review__by { grid-area: by; margin: 0; }
  .pd-review--featured .pd-review__dek { grid-area: dek; }
  .pd-review--featured .pd-review__foot { grid-area: foot; align-self: end; }
}

/* ══ ReviewArticle ═════════════════════════════════════════════════════════ */
.pd-reviewart { container: pd-reviewart / inline-size; display: grid; gap: var(--space-7); grid-template-columns: minmax(0, 1fr); max-inline-size: var(--page-max); font-family: var(--font-sans); color: var(--text); }
.pd-reviewart__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-reviewart__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2) var(--space-4); margin: 0; font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
.pd-reviewart__bar .pd-review__bindu { color: var(--text-subtle); }
.pd-reviewart__back { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--target-min); font: var(--font-label); letter-spacing: 0; text-transform: none; color: var(--link); text-decoration: none; }
.pd-reviewart__back svg { inline-size: 1em; block-size: 1em; fill: none; stroke: currentColor; stroke-width: 1.5; }
.pd-reviewart__back:hover span { text-decoration: underline; text-underline-offset: .2em; }
.pd-reviewart__back:focus-visible { outline-offset: var(--focus-offset); }
.pd-reviewart__title { margin: 0; font: var(--font-display-l); letter-spacing: var(--track-display); text-wrap: balance; }
.pd-reviewart__title cite { font-style: normal; }
.pd-reviewart__by { margin: calc(-1 * var(--space-2)) 0 0; font: italic 400 var(--fs-title)/1.3 var(--font-display); color: var(--text-muted); }
.pd-reviewart__dek { margin: 0; max-inline-size: var(--measure); font: var(--font-lede); color: var(--text-muted); text-wrap: pretty; }
.pd-reviewart__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: 0; padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-reviewart__meta time { color: var(--text); }
.pd-reviewart__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }

/* Plate + facts */
.pd-reviewart__top { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.pd-reviewart__plate { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.pd-reviewart__plate .pd-review__media { --pd-review-w: 62%; --pd-review-r: 1; aspect-ratio: 4 / 3; padding: 7%; }
.pd-reviewart--art   .pd-reviewart__plate .pd-review__media { --pd-review-w: auto; --pd-review-r: 4 / 5; }
.pd-reviewart--book  .pd-reviewart__plate .pd-review__media { --pd-review-w: auto; --pd-review-r: 2 / 3; }
.pd-reviewart--music .pd-reviewart__plate .pd-review__media { --pd-review-w: auto; --pd-review-r: 1; }
.pd-reviewart--film  .pd-reviewart__plate .pd-review__media { --pd-review-w: 100%; --pd-review-r: 16 / 9; }
.pd-reviewart--tool  .pd-reviewart__plate .pd-review__media { --pd-review-w: auto; --pd-review-r: 1; }
.pd-reviewart__plate .pd-review__media > :where(img, .pd-ph, svg) { block-size: 100%; inline-size: auto; max-inline-size: 100%; }
.pd-reviewart--film .pd-reviewart__plate .pd-review__media > :where(img, .pd-ph, svg) { inline-size: 100%; block-size: auto; }
.pd-reviewart__cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-4); font: var(--font-caption); color: var(--text-muted); }
.pd-reviewart__cap span:last-child { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-reviewart__facts { display: grid; align-content: start; gap: var(--space-3); }
.pd-reviewart__facts > h2 { margin: 0; font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
.pd-reviewart__facts .pd-facts { --label-col: 9.5em; }
.pd-reviewart__facts .pd-facts dd cite { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--fs-body); line-height: 1.3; }
.pd-reviewart__facts .pd-facts dd .pd-review__verdict { font-size: var(--fs-title); }
.pd-reviewart__facts .pd-facts__row--verdict :where(dt, dd) { border-block-start-color: var(--rule-strong); padding-block: var(--space-4); }

/* Body: hooks for Prose. The stays block can sit inside .pd-prose or after it. */
.pd-reviewart__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.pd-reviewart__body > .pd-prose { max-inline-size: var(--measure); }
.pd-reviewart__stays { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: var(--space-3) var(--space-4); margin: var(--space-2) 0; padding-block: var(--space-5); border-block: var(--hairline) solid var(--rule-strong); max-inline-size: var(--measure-wide); text-indent: 0; }
.pd-reviewart__stays-label { grid-column: 1 / -1; margin: 0; font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
.pd-reviewart__stays-mark { justify-self: center; inline-size: .75rem; block-size: .75rem; margin-block-start: .85rem; border-radius: var(--radius-pill); background: var(--bindu-on-paper); box-shadow: inset 0 0 0 1px var(--saffron-700), 0 0 0 .3125rem var(--surface), 0 0 0 calc(.3125rem + var(--hairline)) var(--text-subtle); }
.pd-reviewart__stays blockquote { margin: 0; padding: 0; font: var(--font-pullquote); font-style: italic; color: var(--text); text-wrap: balance; }
.pd-reviewart__stays blockquote p { margin: 0; text-indent: 0; }
.pd-reviewart__stays figcaption { grid-column: 2; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }

/* Closing verdict: the one-word answer, then the reason */
.pd-reviewart__close { display: grid; gap: var(--space-3) var(--space-6); padding: var(--space-6) var(--space-5); background: var(--surface-sunken); max-inline-size: var(--measure-wide); }
.pd-reviewart__close > h2 { margin: 0; font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
.pd-reviewart__close .pd-review__verdict { font-size: var(--fs-display-m); line-height: 1; }
.pd-reviewart__close .pd-review__verdict::before { inline-size: .32em; block-size: .32em; border-width: .045em; }
.pd-reviewart__why { margin: 0; font: var(--font-body); color: var(--text); max-inline-size: var(--measure); }
.pd-reviewart__close .pd-review__revisit { font-size: var(--fs-label); white-space: normal; }

/* Related */
.pd-reviewart__related { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.pd-reviewart__related > header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-2) var(--space-4); }
.pd-reviewart__related h2 { margin: 0; font: var(--font-headline); }
.pd-reviewart__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--space-6) var(--space-5); margin: 0; padding: 0; list-style: none; }

@container pd-reviewart (min-inline-size: 48rem) {
  .pd-reviewart__top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-7); }
  .pd-reviewart__close { grid-template-columns: auto minmax(0, 1fr); align-items: center; padding: var(--space-6); }
  .pd-reviewart__close > h2 { grid-column: 1 / -1; }
  .pd-reviewart__close .pd-review__revisit { grid-column: 2; }
}
@container pd-reviewart (max-inline-size: 30rem) {
  .pd-reviewart__title { font: var(--font-display-m); }
  .pd-reviewart__stays blockquote { font-size: var(--fs-title); }
  .pd-reviewart__close .pd-review__verdict { font-size: var(--fs-headline); }
  .pd-reviewart__facts .pd-facts { --label-col: 7.5em; }
}

/* ══ ReviewIndex ═══════════════════════════════════════════════════════════ */
.pd-reviews { container: pd-reviews / inline-size; display: grid; gap: var(--space-5); font-family: var(--font-sans); color: var(--text); }
.pd-reviews__head { display: grid; gap: var(--space-3); padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-reviews__kicker { margin: 0; } /* type: shared .pd-kicker rule (bundle.css) */
.pd-reviews__kicker .pd-review__bindu { color: var(--text-subtle); }
.pd-reviews__title { margin: 0; font: var(--font-display-l); letter-spacing: var(--track-display); }
.pd-reviews__title em { font-family: var(--font-display); font-weight: 400; color: var(--link); }
.pd-reviews__lede { margin: 0; max-inline-size: var(--measure); font: var(--font-lede); color: var(--text-muted); }
.pd-reviews__legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.pd-reviews__legend .pd-review__verdict { font-size: var(--fs-body); }

/* Toolbar */
.pd-reviews__bar { display: grid; gap: var(--space-3) var(--space-5); padding-block: var(--space-3); border-block: var(--hairline) solid var(--rule); }
.pd-reviews__group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.pd-reviews__label { margin-inline-end: var(--space-2); font: 500 var(--fs-meta)/1.3 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-subtle); }
/* Kind chips, Clear and the List/Grid switch use FilterBar (.pd-filter__chip, .pd-filter__n, .pd-filter__clear) and ToggleGroup (.pd-toggle-group__btn); no review-only chip recipe. */
.pd-reviews__select:focus-visible { outline-offset: var(--focus-offset); }
.pd-reviews__tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3) var(--space-5); }
.pd-reviews__sort { display: inline-flex; align-items: center; gap: var(--space-2); }
.pd-reviews__select { min-block-size: var(--target-min); padding: 0 2rem 0 var(--space-3); font: var(--font-label); color: var(--text); background: var(--surface) linear-gradient(135deg, transparent 50%, currentColor 50%) no-repeat right .95rem center / .35rem .35rem; border: var(--hairline) solid var(--border-control); border-radius: var(--radius-1); appearance: none; -webkit-appearance: none; cursor: pointer; }
.pd-reviews__select option { color: var(--text); background: var(--surface); }
.pd-reviews__views { flex-wrap: nowrap; }
.pd-reviews__count { margin: 0; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.pd-reviews__count b { font-weight: 500; color: var(--text); }

/* Shared list root */
.pd-reviews__list { container: pd-reviews-list / inline-size; margin: 0; padding: 0; list-style: none; }
.pd-reviews__item[hidden] { display: none; }
.pd-review__num { display: none; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); font-variant-numeric: tabular-nums; }

/* Grid view */
.pd-reviews--grid .pd-reviews__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: var(--space-7) var(--space-5); }
.pd-reviews--grid .pd-reviews__item:not([hidden]) { display: flex; }
.pd-reviews--grid .pd-review { flex: 1; }

/* List view: the same card markup, set as a dense Swiss row */
.pd-reviews--list .pd-reviews__cols { display: grid; }
.pd-reviews__cols { display: none; grid-template-columns: 3rem 5.5rem minmax(0, 1fr) 8.5rem 4.5rem 7.5rem; gap: var(--space-4); padding-block: var(--space-2); font: 500 var(--fs-meta)/1.3 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-subtle); border-block-end: var(--hairline) solid var(--rule-strong); }
.pd-reviews--list .pd-review {
  display: grid; grid-template-columns: 3rem 5.5rem minmax(0, 1fr) 8.5rem 4.5rem 7.5rem;
  grid-template-areas: "num kind title verdict revisit date" "num kind by verdict revisit date";
  align-items: baseline; gap: var(--space-1) var(--space-4); padding-block: var(--space-3); border-block-start: 0; border-block-end: var(--hairline) solid var(--rule);
}
.pd-reviews--list .pd-review__num { display: block; grid-area: num; }
.pd-reviews--list :where(.pd-review__kicker, .pd-review__foot) { display: contents; }
.pd-reviews--list .pd-review__kind { grid-area: kind; font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
.pd-reviews--list .pd-review__kind :where(.pd-review__bindu, .pd-review__kword) { display: none; }
.pd-reviews--list .pd-review__date { grid-area: date; text-align: end; }
.pd-reviews--list :where(.pd-review__media, .pd-review__dek) { display: none; }
.pd-reviews--list .pd-review__title { grid-area: title; font-size: var(--fs-body); line-height: 1.2; }
.pd-reviews--list .pd-review__by { grid-area: by; margin: 0; font: var(--font-caption); }
.pd-reviews--list .pd-review__verdict { grid-area: verdict; font-size: var(--fs-body); }
.pd-reviews--list .pd-review__revisit { grid-area: revisit; }
.pd-reviews--list .pd-review__rl { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (hover: hover) { .pd-reviews--list .pd-review:hover { background: var(--surface-sunken); } }
.pd-reviews--list .pd-review__title a:focus-visible::after { outline-offset: calc(-1 * var(--focus-width)); }

@container pd-reviews-list (max-inline-size: 44rem) {
  .pd-reviews--list .pd-review { grid-template-columns: 2.25rem minmax(0, 1fr) auto; grid-template-areas: "num kind date" "num title title" "num by by" "num verdict revisit"; row-gap: var(--space-2); }
  .pd-reviews--list .pd-review__title { font-size: var(--fs-body); }
  .pd-reviews--list .pd-review__revisit { text-align: end; }
  /* Column heads are hidden when stacked, so the "Would revisit" label comes back beside Yes/No. */
  .pd-reviews--list .pd-review__rl { position: static; inline-size: auto; block-size: auto; overflow: visible; clip-path: none; }
}
@container pd-reviews (max-inline-size: 44rem) { .pd-reviews--list .pd-reviews__cols { display: none; } .pd-reviews__title { font: var(--font-display-m); } }

.pd-reviews__empty { display: grid; justify-items: start; gap: var(--space-3); padding: var(--space-6) var(--space-5); background: var(--surface-sunken); }
.pd-reviews__empty[hidden] { display: none; }
.pd-reviews__empty p { margin: 0; font: var(--font-body); color: var(--text-muted); }
.pd-reviews__empty strong { display: block; font: italic 400 var(--fs-title)/1.2 var(--font-display); color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .pd-review__media > .pd-ph { transition: none; }
}
@media (forced-colors: active) {
  .pd-review__verdict::before { forced-color-adjust: none; border-color: CanvasText; }
  .pd-review__verdict--essential::before { background: CanvasText; }
}
}

/* ── part: site.css ── */
/* Pandox DS v2 — package "site": editorial pages, knowledge, work, identity, navigation aids.
   Built from scratchpad/site-src/NN-*.css by site-src/build.sh. Single authoritative source for:
   .pd-pagehead .pd-work .pd-brands .pd-cs .pd-cap .pd-research .pd-learn .pd-essay .pd-sectionland .pd-where .pd-about
   .pd-megafoot(--compact) .pd-colophon(alias) .pd-timeline .pd-now .pd-shelf .pd-garden .pd-code .pd-callout .pd-table
   .pd-profile .pd-og(-frame) .pd-themes(--compact) .pd-crumbs .pd-pager .pd-toc .pd-empty .pd-404 .pd-skel .pd-responses
   Composes (never restyles): foundations .pd-rows .pd-case .pd-facts .pd-status .pd-ph .pd-figure .pd-quote .pd-aside .pd-note
   .pd-prose .pd-dropcap .pd-section-head .pd-kicker .pd-num .pd-tag .pd-subscribe .pd-mark sprite; overlays .pd-copy .pd-avatar
   .pd-progress, PandoxUI.announce; controls .pd-filter .pd-field .pd-input; sky .pd-sky; abstract .pd-disc; tattva .pd-elglyph.
   Contract: colours via semantic tokens only; selectors ≤ (0,2,0) with context in :where(); logical properties; container
   queries (30em s · 48em m · 64em l, plus the 40em stack point named in the site brief); no [data-theme]; motion tokens;
   hover inside (hover:hover); one saffron element per view. */
@layer components.site {

/* ── Shared: page head (kicker → display → lede, meta at the end). Every site page opens with it. ── */
.pd-pagehead { container: pd-pagehead / inline-size; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4) var(--space-7); margin-block-end: var(--space-7); padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-pagehead__main { flex: 1 1 28rem; display: grid; gap: var(--space-3); min-inline-size: 0; }
.pd-pagehead__title { margin: 0; font: 500 clamp(var(--fs-display-m) * .8, 7.5cqi, var(--fs-display-m))/1.02 var(--font-display); letter-spacing: var(--track-display); color: var(--text); text-wrap: balance; }
.pd-pagehead__title :where(em) { font-style: italic; font-weight: 400; color: var(--text); }
.pd-pagehead--l .pd-pagehead__title { font-size: clamp(var(--fs-display-m), 8cqi, var(--fs-display-l)); line-height: .98; }
.pd-pagehead__lede { margin: 0; max-inline-size: 32em; font: var(--font-lede); color: var(--text-muted); text-wrap: pretty; }
.pd-pagehead__meta { flex: 0 1 auto; margin: 0; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.pd-pagehead__meta :where(b) { font-weight: 500; color: var(--text); }

/* ── Shared: placeholder text inside site components ([Bracketed], same face, ink-500, dotted hairline) ── */
.pd-todo, .pd-cs__todo { color: var(--text-subtle); font: inherit; text-decoration: underline dotted var(--hairline); text-decoration-color: var(--border-control); text-underline-offset: .25em; }

/* ══ Work family ══════════════════════════════════════════════════════ */

/* ── WorkIndex (.pd-work): composes .pd-pagehead, .pd-filter, .pd-section-head--s, .pd-rows--work, .pd-tag, .pd-status, .pd-ph ── */
.pd-work { container: pd-work / inline-size; color: var(--text); font-size: var(--fs-body-s); }
.pd-work > .pd-filter { margin-block-end: var(--space-7); }
.pd-work__group { margin-block-end: var(--space-8); }
.pd-work__group:where([hidden]) { display: none; }
.pd-work__group > .pd-section-head { padding-block-end: var(--space-3); }
.pd-work__item { min-block-size: calc(var(--fs-pullquote) * 2.2 + 2 * var(--space-4)); }
.pd-work__item:where([hidden]) { display: none; }
.pd-work__tags { flex-wrap: wrap; }
.pd-work__more { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pd-work__who { display: grid; justify-items: start; align-content: start; gap: var(--space-2); }
.pd-work__arrow { align-self: center; font: var(--font-title); color: var(--link); transition: translate var(--dur-2) var(--ease-out); }
@media (hover: hover) { :where(.pd-work__item:hover) .pd-work__arrow { translate: var(--space-1) 0; } }
:where(.pd-work__item:focus-within) .pd-work__arrow { translate: var(--space-1) 0; }
.pd-work__frames { display: none; grid-column: 2 / -1; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-2); margin-block-start: var(--space-3); }
.pd-work__item--expanded .pd-work__frames { display: grid; }
.pd-work__frames > .pd-ph { --pd-ph-ratio: auto; block-size: 5.5rem; }
@container pd-rows (inline-size < 48em) {
  .pd-work__frames { grid-template-columns: 1fr 1fr; }
  .pd-work__frames > :where(.pd-ph:nth-child(n + 3)) { display: none; }
}
@container pd-rows (inline-size < 30em) {
  .pd-work__who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
  .pd-work__frames { grid-column: 1 / -1; }
}

/* ── BrandWall (.pd-brands): typographic wordmarks in system type, optional "logo file" slot ── */
.pd-brands { container: pd-brands / inline-size; color: var(--text); font-size: var(--fs-body-s); }
.pd-brands__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6); margin-block-end: var(--space-5); }
.pd-brands__legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pd-brands__legend :where(b) { margin-inline-end: var(--space-1); font-weight: 500; color: var(--text); }
.pd-brands__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--hairline); margin: 0; padding: 0; list-style: none; background: var(--rule); border-block: var(--hairline) solid var(--rule-strong); border-block-end-color: var(--rule); }
.pd-brands__cell { display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-4); min-block-size: 12.5em; min-inline-size: 0; padding: var(--space-4) var(--space-5) var(--space-5); background: var(--surface); }
.pd-brands__cell--wide { grid-column: span 2; }
.pd-brands__top { display: flex; justify-content: space-between; gap: var(--space-3); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.pd-brands__mark { display: grid; align-content: end; justify-items: start; gap: var(--space-3); min-inline-size: 0; }
.pd-brands__slot { display: none; inline-size: 9.5em; max-inline-size: 100%; --pd-ph-ratio: 3 / 1; }
.pd-brands--logos .pd-brands__slot { display: grid; }
.pd-brands__name { margin: 0; color: var(--text); overflow-wrap: anywhere; text-wrap: balance; }
.pd-brands__name--serif { font: 500 var(--fs-headline)/1 var(--font-display); letter-spacing: var(--track-display); }
.pd-brands__name--italic { font: italic 400 var(--fs-headline)/1.02 var(--font-display); }
.pd-brands__name--text { font: 500 var(--fs-title)/1.1 var(--font-text); }
.pd-brands__name--sans { font: 600 var(--fs-title)/1.05 var(--font-sans); letter-spacing: var(--track-text); }
.pd-brands__name--caps { font: 600 var(--fs-body)/1.1 var(--font-sans); letter-spacing: var(--track-caps); text-transform: uppercase; }
.pd-brands__name--light { font: 400 var(--fs-title)/1.05 var(--font-sans); }
.pd-brands__name--mono { font: 500 var(--fs-body)/1.15 var(--font-mono); letter-spacing: var(--track-mono); }
.pd-brands__cell--wide :where(.pd-brands__name--serif, .pd-brands__name--italic) { font-size: var(--fs-display-m); }
.pd-brands__sub { display: block; margin-block-start: var(--space-1); font: italic 400 var(--fs-body-s)/1.4 var(--font-text); letter-spacing: var(--track-text); text-transform: none; color: var(--text-muted); }
.pd-brands__cat { margin: 0; padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule); font: var(--font-meta); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-muted); }
.pd-brands__cell--cta .pd-brands__name { font: italic 400 var(--fs-title)/1.2 var(--font-display); }
@container pd-brands (inline-size < 60em) { .pd-brands__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container pd-brands (inline-size < 40em) {
  .pd-brands__cell { min-block-size: auto; padding: var(--space-5) var(--space-3); }
  .pd-brands__cell :where(.pd-brands__name) { font-size: var(--fs-title); }
  .pd-brands__cell--wide :where(.pd-brands__name--serif, .pd-brands__name--italic) { font-size: var(--fs-headline); }
}

/* ── CaseStudy (.pd-cs): head IS .pd-case; frames .pd-ph; pull-quote .pd-quote; body .pd-prose ── */
.pd-cs { container: pd-cs / inline-size; display: grid; gap: var(--space-8); color: var(--text); font-size: var(--fs-body-s); }
.pd-cs__crumb { margin-block-end: calc(-1 * var(--space-6)); }
.pd-cs__cover { --pd-ph-ratio: 21 / 9; }
.pd-cs__sec { display: grid; grid-template-columns: minmax(0, var(--label-col)) minmax(0, 1fr); column-gap: var(--space-7); row-gap: var(--space-6); padding-block-start: var(--space-4); border-block-start: var(--hairline) solid var(--rule); }
.pd-cs__label { display: grid; align-content: start; gap: var(--space-2); }
.pd-cs__h { margin: 0; font: var(--font-title); color: var(--text); text-wrap: balance; }
.pd-cs__body { min-inline-size: 0; }
.pd-cs__wide { grid-column: 2 / -1; min-inline-size: 0; }
.pd-cs__sec--bare { border-block-start: 0; padding-block-start: 0; }
.pd-cs__sec--bare > .pd-quote { margin: 0; max-inline-size: 22em; }
.pd-cs__did { margin: 0; padding: 0; list-style: none; max-inline-size: var(--measure-wide); border-block: var(--hairline) solid var(--rule-strong); border-block-end-color: var(--rule); }
.pd-cs__did :where(li) { display: grid; grid-template-columns: var(--row-lead) minmax(0, 1fr) auto; gap: var(--space-4); align-items: baseline; padding: var(--row-pad); font: var(--font-ui); }
.pd-cs__did :where(li + li) { border-block-start: var(--hairline) solid var(--rule); }
.pd-cs__plates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6) var(--gutter); }
.pd-cs__plates > .pd-figure { min-inline-size: 0; }
.pd-cs__plate--wide { grid-column: span 2; }
.pd-cs__plate--tall { grid-row: span 2; }
.pd-cs__plate--tall > .pd-ph, .pd-cs__plate--wide > .pd-ph { aspect-ratio: auto; block-size: 100%; min-block-size: 10rem; }
.pd-cs__plate--tall, .pd-cs__plate--wide { grid-template-rows: 1fr auto; }
.pd-cs__end { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--space-6) var(--gutter); }
@container pd-cs (inline-size < 48em) {
  .pd-cs { gap: var(--space-7); }
  .pd-cs__sec { grid-template-columns: minmax(0, 1fr); }
  .pd-cs__wide { grid-column: 1; }
  .pd-cs__plates { grid-template-columns: 1fr 1fr; }
  .pd-cs__plate--tall { grid-row: auto; }
  .pd-cs__plate--tall > .pd-ph { aspect-ratio: 4 / 3; block-size: auto; }
}
@container pd-cs (inline-size < 30em) {
  .pd-cs__plates { grid-template-columns: minmax(0, 1fr); }
  .pd-cs__plate--wide { grid-column: auto; }
  .pd-cs__plate--wide > .pd-ph { aspect-ratio: 4 / 3; block-size: auto; }
  .pd-cs__did :where(li) { grid-template-columns: 2.5em minmax(0, 1fr); }
  .pd-cs__did :where(li) > :where(.pd-meta:last-child) { grid-column: 2; }
}

/* ── Capabilities (.pd-cap) ── */
.pd-cap { container: pd-cap / inline-size; color: var(--text); font-size: var(--fs-body-s); }
.pd-cap__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hairline); margin: 0; padding: 0; list-style: none; background: var(--rule); border-block: var(--hairline) solid var(--rule-strong); border-block-end-color: var(--rule); }
.pd-cap__item { display: grid; grid-template-rows: auto auto auto auto 1fr; align-content: start; gap: var(--space-3); min-inline-size: 0; padding: var(--space-5) var(--space-5) var(--space-6); background: var(--surface); }
.pd-cap__name { margin: 0; font: var(--font-title); color: var(--text); text-wrap: balance; }
.pd-cap__scope { margin: 0; font: var(--font-ui); color: var(--text-muted); }
.pd-cap__where { margin: 0; color: var(--text-subtle); letter-spacing: var(--track-mono); }
.pd-cap__ex { margin: var(--space-2) 0 0; padding: 0; list-style: none; border-block-start: var(--hairline) solid var(--rule); font: var(--font-body-s); }
.pd-cap__ex :where(li) { display: grid; grid-template-columns: 1.25em minmax(0, 1fr); padding: var(--space-2) 0; border-block-end: var(--hairline) solid var(--rule); }
.pd-cap__ex :where(li)::before { content: "–"; color: var(--text-subtle); }
.pd-cap__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-6); margin-block-start: var(--space-7); padding-block: var(--space-6); border-block: var(--hairline) solid var(--rule-strong); border-block-end-color: var(--rule); }
.pd-cap__cta-main { flex: 1 1 22rem; min-inline-size: 0; }
.pd-cap__cta-title { margin: 0; font: var(--font-headline); color: var(--text); }
.pd-cap__cta-title :where(em) { font-style: italic; font-weight: 400; color: var(--text); }
.pd-cap__cta-text { margin: var(--space-3) 0 0; max-inline-size: 30em; font: var(--font-body); color: var(--text-muted); }
.pd-cap__cta-act { display: grid; justify-items: start; gap: var(--space-2); }
@container pd-cap (inline-size < 60em) { .pd-cap__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container pd-cap (inline-size < 40em) {
  .pd-cap__grid { grid-template-columns: minmax(0, 1fr); }
  .pd-cap__item { padding-inline: 0; }
}
@media print { :where(.pd-work) > .pd-filter, .pd-work__frames, .pd-brands__tools .pd-btn { display: none; } }

/* ══ Knowledge family ═════════════════════════════════════════════════ */

/* ── ResearchArticle (.pd-research): pagehead · AbstractBox (plain) + facts · rail TOC + prose · ChartFrame figures · CitationList refs + cite ── */
.pd-research { container: pd-research / inline-size; color: var(--text); font-size: var(--fs-body-s); max-inline-size: var(--page-max); }
.pd-research :where(svg) { overflow: visible; }
.pd-research__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); }
.pd-research__front { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-6) var(--space-7); align-items: start; }
.pd-research__body { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: var(--space-7); margin-block-start: var(--space-8); }
.pd-research__body > .pd-toc { align-self: start; }
.pd-research__main { min-inline-size: 0; max-inline-size: var(--measure-wide); }
.pd-research__sec { max-inline-size: var(--measure-wide); }
.pd-research__sec + .pd-research__sec { margin-block-start: var(--space-7); }
.pd-research__h { display: flex; align-items: baseline; gap: var(--space-3); margin: 0; padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule); font: var(--font-headline); color: var(--text); }
.pd-research__findings { margin: 0; padding: 0; list-style: none; border-block-end: var(--hairline) solid var(--rule); }
.pd-research__findings :where(li) { display: grid; grid-template-columns: var(--row-lead) minmax(0, 1fr); padding: var(--row-pad); border-block-start: var(--hairline) solid var(--rule); font: var(--font-body); }
.pd-research__findings :where(li) > :where(:first-child) { font: var(--font-numeral); letter-spacing: var(--track-mono); color: var(--text-subtle); padding-block-start: .35em; }
/* figures: ChartFrame (.pd-ch-frame + engines/charts.js) or Figure (.pd-figure); this class only spaces them */
.pd-research__fig { margin-block: var(--space-6); }
.pd-research__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); margin-block-start: var(--space-6); }
.pd-research__pair > .pd-research__fig { margin: 0; }
/* references + cite: CitationList (.pd-rk-refs) */
.pd-research__refs, .pd-research__cite { margin-block-start: var(--space-8); } /* CitationList (.pd-rk-refs) carries its own head rule */
.pd-research__ref { font: 500 var(--fs-meta)/1 var(--font-mono); letter-spacing: var(--track-mono); color: var(--link); text-decoration: none; vertical-align: super; padding-inline: var(--space-1); }
.pd-research__ref:focus-visible { outline-offset: 0; }
@container pd-research (inline-size < 48em) {
  .pd-research__front, .pd-research__body, .pd-research__pair { grid-template-columns: minmax(0, 1fr); }
}

/* ── LearningLog (.pd-learn): study log per subject ── */
.pd-learn { container: pd-learn / inline-size; color: var(--text); font-size: var(--fs-body-s); }
.pd-learn + .pd-learn { margin-block-start: var(--space-9); }
.pd-learn__progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 2fr); gap: var(--space-4) var(--gutter); margin: 0; padding-block: var(--space-4); border-block: var(--hairline) solid var(--rule); }
.pd-learn__stat { display: grid; align-content: start; gap: var(--space-1); margin: 0; }
.pd-learn__stat :where(dt) { font: var(--font-meta); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-subtle); }
.pd-learn__stat :where(dd) { margin: 0; font: var(--font-label); color: var(--text); font-variant-numeric: tabular-nums; }
.pd-learn__meter { min-inline-size: 0; }
.pd-learn__meter-label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-3); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-learn__bar { display: grid; grid-template-columns: repeat(var(--pd-learn-n, 8), minmax(0, 1fr)); gap: 3px; block-size: .75rem; margin-block-start: var(--space-3); align-items: center; }
.pd-learn__bar > :where(i) { position: relative; display: block; block-size: 0; border-block-start: var(--hairline) solid var(--border-control); }
.pd-learn__bar > :where(i[data-state="done"]) { border-block-start: 3px solid var(--text); }
.pd-learn__bar > :where(i[data-state="current"])::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: -2px; inline-size: var(--pd-learn-part, 40%); border-block-start: 3px solid var(--text); }
.pd-learn__bar > :where(i[data-state="current"])::after { content: ""; position: absolute; inset-inline-start: var(--pd-learn-part, 40%); inset-block-start: -.3rem; inline-size: .5rem; block-size: .5rem; margin-inline-start: -.25rem; border-radius: var(--radius-pill); background: var(--text); box-shadow: 0 0 0 2px var(--surface); }
.pd-learn__scale { display: grid; grid-template-columns: repeat(var(--pd-learn-n, 8), minmax(0, 1fr)); gap: 3px; margin-block-start: var(--space-1); font: var(--font-meta); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.pd-learn__layout { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: var(--space-7); margin-block-start: var(--space-6); }
.pd-learn__h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-1) var(--space-3); margin: 0 0 var(--space-3); padding-block-end: var(--space-2); border-block-end: var(--hairline) solid var(--rule-strong); font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text); }
.pd-learn__h :where(.pd-meta) { text-transform: none; }
.pd-learn__now { margin-block-end: var(--space-7); }
.pd-learn__now :where(p) { margin: 0; max-inline-size: var(--measure); font: var(--font-body); }
.pd-learn__now :where(p + p) { margin-block-start: var(--space-3); }
.pd-learn__entries { margin: 0; padding: 0; list-style: none; }
.pd-learn__entry { display: grid; grid-template-columns: minmax(0, var(--label-col)) minmax(0, 1fr) auto; gap: var(--space-2) var(--space-5); padding: var(--row-pad); border-block-end: var(--hairline) solid var(--rule); }
.pd-learn__date { display: grid; align-content: start; gap: var(--space-1); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pd-learn__date :where(span) { color: var(--text-subtle); }
.pd-learn__entry-title { margin: 0; font: var(--font-title); font-size: var(--fs-body); }
.pd-learn__entry :where(p) { margin: var(--space-1) 0 0; max-inline-size: var(--measure); font: var(--font-body-s); color: var(--text-muted); }
.pd-learn__ref { display: inline-block; margin-block-start: var(--space-2); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-learn__entry > .pd-elglyph { align-self: start; }
.pd-learn__sources { margin: 0 0 var(--space-7); padding: 0; list-style: none; }
.pd-learn__src { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); padding-block: var(--space-3); border-block-end: var(--hairline) solid var(--rule); }
.pd-learn__src-title { font: var(--font-body-s); color: var(--text); }
.pd-learn__src-title :where(cite) { font-style: italic; }
.pd-learn__src-meta { grid-column: 1; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-learn__src > .pd-status { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
/* the term card speaks the aside language: ink hairline, kicker, no fill */
.pd-learn__term { margin: 0; }
.pd-learn__term-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.pd-learn__deva { margin: var(--space-3) 0 0; font: 400 var(--fs-pullquote)/1.45 var(--font-deva); color: var(--text); }
.pd-learn__iast { margin: 0; font: italic 400 var(--fs-title)/1.35 var(--font-text); color: var(--text); }
.pd-learn__gloss { margin: var(--space-2) 0 0; font: var(--font-body-s); color: var(--text-muted); }
.pd-learn__parse { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-3); margin: var(--space-3) 0 0; padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule); font: var(--font-ui); }
.pd-learn__parse :where(dt) { font-family: var(--font-text); font-style: italic; color: var(--text); }
.pd-learn__parse :where(dd) { margin: 0; color: var(--text-muted); }
@container pd-learn (inline-size < 48em) {
  .pd-learn__progress { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pd-learn__meter { grid-column: 1 / -1; }
  .pd-learn__layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}
@container pd-learn (inline-size < 30em) {
  .pd-learn__entry { grid-template-columns: minmax(0, 1fr) auto; }
  .pd-learn__entry > :where(.pd-learn__date) { grid-column: 1 / -1; display: flex; gap: var(--space-3); }
  .pd-learn__progress { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (forced-colors: active) { .pd-learn__bar > :where(i) { forced-color-adjust: none; border-color: CanvasText; } .pd-learn__bar > :where(i)::before { border-color: Highlight; } .pd-learn__bar > :where(i)::after { background: Highlight; } }

/* ── UnderstandingEssay (.pd-essay): head · margin column (.pd-note) + .pd-prose · .pd-figure with .pd-disc · related ── */
.pd-essay { container: pd-essay / inline-size; color: var(--text); font-size: var(--fs-body-s); }
.pd-essay__byline { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-block-start: var(--space-5); padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule); font: var(--font-caption); color: var(--text-muted); }
.pd-essay__byline :where(b) { font-weight: 500; color: var(--text); }
.pd-essay__body { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, var(--measure)); justify-content: start; column-gap: var(--space-7); row-gap: var(--space-4); }
.pd-essay__row { display: contents; }
.pd-essay__text { grid-column: 2; }
.pd-essay__text.pd-prose { max-inline-size: none; }
.pd-essay__margin { grid-column: 1; display: grid; align-content: start; gap: var(--space-4); }
.pd-essay__margin > :where(.pd-note) { margin: 0; }
.pd-essay__gloss { display: grid; gap: var(--space-1); }
.pd-essay__gloss-deva { font: 400 var(--fs-title)/1.4 var(--font-deva); color: var(--text); }
.pd-essay__gloss-iast { font: italic 400 var(--fs-body)/1.3 var(--font-text); color: var(--text); }
.pd-essay__fig { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, var(--measure-wide)); column-gap: var(--space-7); margin-block: var(--space-6); }
.pd-essay__fig > .pd-essay__art { grid-column: 2; }
.pd-essay__fig > .pd-figure__cap { grid-column: 1; grid-row: 1; align-self: end; display: block; padding-block-start: var(--space-2); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-essay__art { position: relative; display: grid; place-items: center; aspect-ratio: 2 / 1; background: var(--surface-sunken); }
.pd-essay__art > .pd-disc { --pd-disc-size: 9em; }
.pd-essay__lbl { position: absolute; inset-block-start: 50%; translate: 0 -150%; font: var(--font-meta); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-muted); }
.pd-essay__lbl--a { inset-inline-start: var(--space-5); }
.pd-essay__lbl--b { inset-inline-end: var(--space-5); }
.pd-essay__related { margin-block-start: var(--space-9); }
.pd-essay__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6) var(--gutter); margin: var(--space-5) 0 0; padding: 0; list-style: none; }
@container pd-essay (inline-size < 48em) {
  .pd-essay__body, .pd-essay__fig { grid-template-columns: minmax(0, 1fr); }
  .pd-essay__row { display: grid; gap: var(--space-4); }
  .pd-essay__text, .pd-essay__margin, .pd-essay__fig > .pd-essay__art, .pd-essay__fig > .pd-figure__cap { grid-column: 1; grid-row: auto; }
  .pd-essay__margin { order: 2; }
  .pd-essay__links { grid-template-columns: minmax(0, 1fr); }
}

/* ── SectionLanding (.pd-sectionland): one section's front door ── */
.pd-sectionland { container: pd-sectionland / inline-size; color: var(--text); font-size: var(--fs-body-s); }
.pd-sectionland + .pd-sectionland { margin-block-start: var(--space-9); }
.pd-sectionland__top { display: grid; grid-template-columns: minmax(0, var(--label-col)) minmax(0, 1fr) 11rem; gap: var(--space-4) var(--space-6); padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-sectionland__num { font: 500 var(--fs-title)/1 var(--font-mono); letter-spacing: var(--track-mono); color: var(--text-subtle); font-variant-numeric: tabular-nums; padding-block-start: var(--space-2); }
.pd-sectionland__main { display: grid; align-content: start; gap: var(--space-3); min-inline-size: 0; }
.pd-sectionland__count { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); }
.pd-sectionland__name { margin: 0; font: 500 clamp(var(--fs-display-m), 11cqi, var(--fs-display-xl))/.92 var(--font-display); letter-spacing: var(--track-display); color: var(--text); }
.pd-sectionland__def { margin: 0; max-inline-size: 26em; font: var(--font-lede); color: var(--text-muted); }
.pd-sectionland__glyph { display: grid; place-items: center; inline-size: 100%; aspect-ratio: 1; background: var(--surface-sunken); color: var(--text); }
.pd-sectionland__glyph > :where(svg) { inline-size: 62%; block-size: 62%; overflow: visible; }
.pd-sectionland__glyph :where(.pd-stroke) { stroke: currentColor; }
.pd-sectionland__glyph :where(.pd-sectionland__fill) { fill: currentColor; }
.pd-sectionland__nav { margin-block-start: var(--space-6); }
.pd-sectionland__filter { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); margin: 0 0 var(--space-4); padding: 0; list-style: none; border-block-end: var(--hairline) solid var(--rule); }
.pd-sectionland__tab { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--target-min); padding: 0; font: var(--font-label); color: var(--text-muted); background: none; border: 0; cursor: pointer; text-underline-offset: .5em; }
@media (hover: hover) { .pd-sectionland__tab:hover { color: var(--text); text-decoration: underline var(--hairline); } }
.pd-sectionland__tab:where([aria-pressed="true"]) { color: var(--text); text-decoration: underline 2px var(--rule-strong); }
.pd-sectionland__tab :where(span) { font: var(--font-meta); color: var(--text-subtle); }
.pd-sectionland__more { display: inline-flex; align-items: center; min-block-size: var(--target-min); margin-block-start: var(--space-3); font: var(--font-label); color: var(--link); }
@container pd-sectionland (inline-size < 48em) {
  .pd-sectionland__top { grid-template-columns: minmax(0, 1fr) 6rem; }
  .pd-sectionland__num { grid-column: 1 / -1; }
  .pd-sectionland__glyph { grid-column: 2; grid-row: 2; align-self: start; }
  .pd-sectionland__main { grid-column: 1; grid-row: 2; }
}
/* Phone: the sigil moves up beside the number at 3rem and the lede runs full width. */
@container pd-sectionland (inline-size < 30rem) {
  .pd-sectionland__top { grid-template-columns: minmax(0, 1fr) 3rem; align-items: center; row-gap: var(--space-3); }
  .pd-sectionland__num { grid-column: 1; grid-row: 1; padding-block-start: 0; }
  .pd-sectionland__glyph { grid-column: 2; grid-row: 1; align-self: center; }
  .pd-sectionland__glyph > :where(svg) { inline-size: 78%; block-size: 78%; }
  .pd-sectionland__main { grid-column: 1 / -1; grid-row: 2; }
  .pd-sectionland__def { max-inline-size: none; }
  .pd-sectionland__nav { margin-block-start: var(--space-5); }
}
/* Route kicker: wrap "rpandox.com/x · " in .pd-sectionland__route; it hides itself when the page already carries breadcrumbs. */
:where(body, main):has(.pd-crumbs) .pd-sectionland__route { display: none; }
@media (forced-colors: active) { .pd-sectionland__tab:where([aria-pressed="true"]) { text-decoration-color: CanvasText; } .pd-sectionland__glyph { forced-color-adjust: none; background: Canvas; color: CanvasText; } }
@media print { .pd-research__cite .pd-copy, .pd-sectionland__filter { display: none; } :where(.pd-sectionland__glyph, .pd-essay__art) { print-color-adjust: exact; -webkit-print-color-adjust: exact; } }

.pd-sectionland__bindu { fill: currentColor; }
.pd-sectionland__glyph--lit .pd-sectionland__bindu { fill: var(--bindu-on-paper); stroke: var(--saffron-700); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.pd-sectionland__tab:where([aria-current]) { color: var(--text); text-decoration: underline 2px var(--rule-strong); }

:where(.pd-sectionland__nav) .pd-rows__item > .pd-tag { justify-self: start; }

/* Featured-block rule (SectionLanding): a featured block on a landing page is either full width
   (12 of 12 columns) or 8 columns plus a 4-column aside rail (meta, related, purpose line). Never 8 + nothing.
   Below 64em the rail drops under the main block on its own hairline. */
.pd-sectionland__feature { container: pd-slfeature / inline-size; display: grid; gap: var(--space-6) var(--gutter); align-items: start; }
.pd-sectionland__feature-main { min-inline-size: 0; }
.pd-sectionland__feature-main > * { max-inline-size: none; }
.pd-sectionland__feature-aside { display: grid; align-content: start; gap: var(--space-4); min-inline-size: 0; padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule); font-size: var(--fs-body-s); color: var(--text-muted); }
.pd-sectionland__feature-purpose { margin: 0; font: var(--font-lede); color: var(--text-muted); }
.pd-sectionland__feature-meta { display: grid; gap: var(--space-2); margin: 0; }
.pd-sectionland__feature-meta > div { display: grid; grid-template-columns: minmax(0, 7em) minmax(0, 1fr); gap: var(--space-3); padding-block-end: var(--space-2); border-block-end: var(--hairline) solid var(--rule); }
.pd-sectionland__feature-meta dt { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-sectionland__feature-meta dd { margin: 0; color: var(--text); }
.pd-sectionland__feature-related { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.pd-sectionland__feature-related a { display: flex; align-items: center; min-block-size: var(--target-min); color: var(--link); border-block-end: var(--hairline) solid var(--rule); }
@media (min-width: 64em) {
  .pd-sectionland__feature { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .pd-sectionland__feature-main { grid-column: 1 / span 8; }
  .pd-sectionland__feature-aside { grid-column: 9 / -1; }
  .pd-sectionland__feature--full > .pd-sectionland__feature-main { grid-column: 1 / -1; }
}

/* ══ Navigation aids ══════════════════════════════════════════════════ */

/* ── Breadcrumbs (.pd-crumbs) ── */
.pd-crumbs { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); }
.pd-crumbs__list { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.pd-crumbs__item { display: inline-flex; align-items: center; min-inline-size: 0; }
.pd-crumbs__item:where([hidden]) { display: none; }
/* the separator trails the previous item, so a wrapped trail always breaks after a "/" and no line starts with one */
.pd-crumbs__item:where(:not(:last-child))::after { content: "/" / ""; padding-inline: var(--space-2); color: var(--text-subtle); }
.pd-crumbs__link { display: inline-flex; align-items: center; min-block-size: var(--target-min); color: var(--text-muted); text-decoration: underline var(--hairline) transparent; text-underline-offset: .35em; transition: color var(--dur-2) var(--ease-standard), text-decoration-color var(--dur-2) var(--ease-standard); }
@media (hover: hover) { .pd-crumbs__link:hover { color: var(--text); text-decoration-color: currentColor; } }
.pd-crumbs__link:focus-visible { outline-offset: calc(-1 * var(--focus-width)); }
.pd-crumbs__home, .pd-crumbs__current { color: var(--text); font-weight: 500; }
.pd-crumbs__current { display: inline-flex; align-items: center; min-block-size: var(--target-min); }
.pd-crumbs__more { display: inline-grid; place-items: center; min-inline-size: var(--target-min); min-block-size: var(--target-min); margin: 0; padding: 0 var(--space-2); font: inherit; color: var(--text-muted); background: transparent; border: 0; border-radius: var(--radius-1); cursor: pointer; }
.pd-crumbs__more > :where(span) { padding: 0 var(--space-2); border: var(--hairline) solid var(--border-control); border-radius: var(--radius-1); }
@media (hover: hover) { .pd-crumbs__more:hover > :where(span) { border-color: var(--rule-strong); color: var(--text); } }
.pd-crumbs__more:focus-visible { outline-offset: calc(-1 * var(--focus-width)); }
.pd-crumbs--rule { border-block-end: var(--hairline) solid var(--rule); }
.pd-crumbs--truncate .pd-crumbs__list { flex-wrap: nowrap; }
.pd-crumbs--truncate :where(.pd-crumbs__item:last-child) { flex: 0 1 auto; min-inline-size: 0; }
.pd-crumbs--truncate .pd-crumbs__current { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: var(--target-min); }
@media (forced-colors: active) { .pd-crumbs__more > :where(span) { border-color: ButtonText; } }

/* ── Pagination (.pd-pager): numbered bar and prev/next cards ── */
.pd-pager { container: pd-pager / inline-size; color: var(--text); font-size: var(--fs-body-s); }
.pd-pager__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: var(--hairline) solid var(--rule-strong); border-block-end-color: var(--rule); }
.pd-pager__card { position: relative; display: grid; align-content: start; gap: var(--space-2); padding: var(--space-5) var(--space-5) var(--space-6) 0; color: inherit; text-decoration: none; }
.pd-pager__card--next { grid-column: 2; padding: var(--space-5) 0 var(--space-6) var(--space-5); justify-items: end; text-align: end; border-inline-start: var(--hairline) solid var(--rule); }
.pd-pager__card:focus-visible { outline-offset: calc(-1 * var(--focus-width)); }
.pd-pager__dir { display: inline-flex; align-items: center; gap: var(--space-2); margin-block-end: var(--space-2); font: var(--font-label); color: var(--link); }
.pd-pager__arrow { display: inline-block; transition: translate var(--dur-2) var(--ease-out); }
.pd-pager__title { max-inline-size: 18em; font: var(--font-title); color: var(--text); text-wrap: balance; }
.pd-pager__dek { max-inline-size: 26em; font: italic 400 var(--fs-body-s)/1.45 var(--font-text); color: var(--text-muted); text-wrap: pretty; }
@media (hover: hover) {
  :where(.pd-pager__card:hover) .pd-pager__title { text-decoration: underline var(--hairline); text-underline-offset: .2em; }
  :where(.pd-pager__card:hover) .pd-pager__arrow { translate: var(--space-1) 0; }
  :where(.pd-pager__card[rel="prev"]:hover) .pd-pager__arrow { translate: calc(-1 * var(--space-1)) 0; }
}
.pd-pager__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding-block: var(--space-2); border-block: var(--hairline) solid var(--rule); font: var(--font-meta); letter-spacing: var(--track-mono); }
.pd-pager__pages { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.pd-pager__page { display: inline-grid; place-items: center; min-inline-size: var(--target-min); min-block-size: var(--target-min); padding-inline: var(--space-1); color: var(--text-muted); text-decoration: none; font-variant-numeric: tabular-nums; text-underline-offset: .5em; }
@media (hover: hover) { .pd-pager__page:hover { color: var(--text); text-decoration: underline var(--hairline); } }
.pd-pager__page:where([aria-current="page"]) { color: var(--text); font-weight: 500; text-decoration: underline 2px var(--rule-strong); }
.pd-pager__page:focus-visible { outline-offset: calc(-1 * var(--focus-width)); }
.pd-pager__gap { display: inline-grid; place-items: center; min-inline-size: var(--space-6); color: var(--text-subtle); }
.pd-pager__step { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--target-min); min-inline-size: var(--target-min); padding-inline: var(--space-2); font: var(--font-label); color: var(--link); text-decoration: none; }
@media (hover: hover) {
  .pd-pager__step:hover { text-decoration: underline var(--hairline); text-underline-offset: .3em; }
  :where(.pd-pager__step:hover) .pd-pager__arrow { translate: var(--space-1) 0; }
  :where(.pd-pager__step[rel="prev"]:hover) .pd-pager__arrow { translate: calc(-1 * var(--space-1)) 0; }
}
.pd-pager__step:where([aria-disabled="true"]) { color: var(--text-subtle); opacity: var(--opacity-disabled); cursor: not-allowed; pointer-events: none; }
.pd-pager__of { color: var(--text-subtle); }
.pd-pager__end { display: inline-flex; align-items: center; gap: var(--space-4); }
@container pd-pager (inline-size < 30em) {
  .pd-pager__cards { grid-template-columns: minmax(0, 1fr); }
  .pd-pager__card--next { grid-column: 1; padding-inline-start: 0; border-inline-start: 0; border-block-start: var(--hairline) solid var(--rule); }
  :where(.pd-pager__pages li:has(> .pd-pager__page:not([aria-current]), > .pd-pager__gap)) { display: none; }
  .pd-pager__of { display: none; }
}
@media (forced-colors: active) { .pd-pager__page:where([aria-current="page"]) { text-decoration-color: CanvasText; } }

/* ── TableOfContents (.pd-toc): dot rail; current = ink-filled dot; compact = a disclosure ── */
.pd-toc { container: pd-toc / inline-size; --pd-toc-compact: 0; color: var(--text); font-size: var(--fs-body-s); }
.pd-toc--compact { --pd-toc-compact: 1; }
.pd-toc--rail { --pd-toc-compact: -1; }
.pd-toc--sticky { position: sticky; inset-block-start: var(--space-6); max-block-size: calc(100dvh - 2 * var(--space-6)); overflow-y: auto; }
.pd-toc__disc { margin: 0; }
.pd-toc__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-block-size: var(--target-min); padding-block-end: var(--space-2); border-block-end: var(--hairline) solid var(--rule-strong); list-style: none; cursor: pointer; }
.pd-toc__summary::-webkit-details-marker { display: none; }
.pd-toc__summary:focus-visible { outline-offset: calc(-1 * var(--focus-width)); }
.pd-toc__now, .pd-toc__chev { display: none; }
.pd-toc__list { position: relative; margin: 0; padding: var(--space-2) 0 0; list-style: none; }
.pd-toc__list::before { content: ""; position: absolute; inset-inline-start: .3em; inset-block: calc(var(--target-min) / 2 + var(--space-2)) calc(var(--target-min) / 2); border-inline-start: var(--hairline) solid var(--border-control); }
.pd-toc__link { position: relative; display: grid; grid-template-columns: 1.25em 2.25em minmax(0, 1fr) auto; align-items: center; gap: 0 var(--space-2); min-block-size: var(--target-min); padding-block: var(--space-1); color: var(--text-muted); text-decoration: none; font: var(--font-body-s); line-height: 1.3; }
.pd-toc__link::before { content: ""; grid-column: 1; inline-size: .625em; block-size: .625em; border: var(--hairline) solid var(--border-control); border-radius: var(--radius-pill); background: var(--surface); }
.pd-toc__num { grid-column: 2; font: var(--font-numeral); letter-spacing: var(--track-mono); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.pd-toc__label { grid-column: 3; text-wrap: pretty; }
.pd-toc__time { grid-column: 4; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); white-space: nowrap; }
@media (hover: hover) { :where(.pd-toc__link:hover) .pd-toc__label { color: var(--text); text-decoration: underline var(--hairline); text-underline-offset: .2em; } }
.pd-toc__link:focus-visible { outline-offset: calc(-1 * var(--focus-width)); }
.pd-toc__link:where([data-read])::before { background: var(--text-subtle); border-color: var(--text-subtle); scale: .6; }
.pd-toc__link:where([aria-current]) { color: var(--text); font-weight: 500; }
.pd-toc__link:where([aria-current])::before { background: var(--text); border-color: var(--text); box-shadow: 0 0 0 .2em var(--surface); }
.pd-toc__link:where([aria-current]) .pd-toc__num { color: var(--text); }
.pd-toc__sub { margin: 0 0 var(--space-1); padding: 0 0 0 calc(3.5em + 2 * var(--space-2)); list-style: none; }
.pd-toc__sublink { display: flex; align-items: center; min-block-size: var(--target-min); font: var(--font-caption); font-family: var(--font-text); font-size: var(--fs-body-s); color: var(--text-muted); text-decoration: none; }
@media (hover: hover) { .pd-toc__sublink:hover { color: var(--text); text-decoration: underline var(--hairline); text-underline-offset: .2em; } }
.pd-toc__sublink:where([aria-current]) { color: var(--text); text-decoration: underline 2px var(--rule-strong); text-underline-offset: .3em; }
.pd-toc__sublink:focus-visible { outline-offset: calc(-1 * var(--focus-width)); }
.pd-toc__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-block-start: var(--space-2); border-block-start: var(--hairline) solid var(--rule); }
.pd-toc__foot :where(a) { display: inline-flex; align-items: center; min-block-size: var(--target-min); font: var(--font-label); color: var(--link); }
/* Compact: one selector set, applied when the TOC is narrow (< 30em, unless --rail) or forced by --compact (style queries). */
@container pd-toc ((inline-size < 30em) and (not style(--pd-toc-compact: -1))) or style(--pd-toc-compact: 1) {
  .pd-toc__summary { padding-block: var(--space-2); border-block: var(--hairline) solid var(--rule-strong); border-block-end-color: var(--rule); }
  .pd-toc__total { display: none; }
  .pd-toc__now { display: block; flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--font-body-s); color: var(--text); }
  .pd-toc__now :where(b) { margin-inline-end: var(--space-2); font: var(--font-numeral); letter-spacing: var(--track-mono); color: var(--text); }
  .pd-toc__chev { display: inline-block; color: var(--text-muted); transition: rotate var(--dur-2) var(--ease-standard); }
  :where(.pd-toc__disc[open]) .pd-toc__chev { rotate: 180deg; }
  .pd-toc__list { padding-block-end: var(--space-2); border-block-end: var(--hairline) solid var(--rule); }
  .pd-toc__time, .pd-toc__sub { display: none; }
  .pd-toc__link { grid-template-columns: 1.25em 2.25em minmax(0, 1fr); }
}
@media (forced-colors: active) {
  .pd-toc__link::before { forced-color-adjust: none; border-color: CanvasText; background: Canvas; }
  .pd-toc__link:where([aria-current])::before { background: Highlight; border-color: Highlight; }
}
@media print { .pd-toc, .pd-pager { display: none; } }

/* ══ Content family ═══════════════════════════════════════════════════ */

/* ── Timeline (.pd-timeline): Experience — when | axis | body on the row rhythm ── */
.pd-timeline { container: pd-timeline / inline-size; color: var(--text); font-size: var(--fs-body-s); }
.pd-timeline__list { margin: 0; padding: 0; list-style: none; }
.pd-timeline__item { display: grid; grid-template-columns: minmax(0, var(--label-col)) 1.5rem minmax(0, 1fr); column-gap: var(--space-4); }
.pd-timeline__when { margin: 0; padding-block: var(--space-4); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pd-timeline__when :where(span) { display: block; color: var(--text-subtle); }
.pd-timeline__axis { position: relative; display: grid; justify-items: center; }
.pd-timeline__axis::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 50%; border-inline-start: var(--hairline) solid var(--rule-strong); }
.pd-timeline__item:where(:last-child) .pd-timeline__axis::before { inset-block-end: auto; block-size: calc(var(--space-4) + .6em); }
.pd-timeline__node { position: relative; margin-block-start: calc(var(--space-4) + .2em); inline-size: .75rem; block-size: .75rem; border: 1.5px solid var(--text); background: var(--surface); }
.pd-timeline__item--milestone .pd-timeline__node { background: var(--text); }
.pd-timeline__item--now .pd-timeline__node { border-radius: var(--radius-pill); background: var(--text); box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--text); }
.pd-timeline__body { min-inline-size: 0; padding: var(--row-pad); border-block-start: var(--hairline) solid var(--rule); }
.pd-timeline__item:where(:first-child) .pd-timeline__body { border-block-start: 0; }
.pd-timeline__title { margin: 0; font: var(--font-title); color: var(--text); text-wrap: balance; }
.pd-timeline__place { margin: var(--space-1) 0 0; font: var(--font-label); color: var(--text-muted); }
.pd-timeline__note { margin: var(--space-2) 0 0; max-inline-size: var(--measure); font: var(--font-body-s); color: var(--text-muted); }
.pd-timeline__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.pd-timeline__key { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: var(--space-5) 0 0; padding: var(--space-3) 0 0; list-style: none; border-block-start: var(--hairline) solid var(--rule); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); }
.pd-timeline__key :where(li) { display: inline-flex; align-items: center; gap: var(--space-2); }
.pd-timeline__key :where(li)::before { content: ""; inline-size: .625rem; block-size: .625rem; border: 1.5px solid var(--text); }
.pd-timeline__key :where(li:nth-child(1))::before { background: var(--text); }
.pd-timeline__key :where(li:nth-child(3))::before { border-radius: var(--radius-pill); background: var(--text); }
@container pd-timeline (inline-size < 40em) {
  .pd-timeline__item { grid-template-columns: 1.5rem minmax(0, 1fr); }
  .pd-timeline__when { grid-column: 2; grid-row: 1; padding-block: var(--space-4) 0; }
  .pd-timeline__axis { grid-column: 1; grid-row: 1 / span 2; }
  .pd-timeline__body { grid-column: 2; border-block-start: 0; padding-block-start: var(--space-1); }
  :where(.pd-timeline__item + .pd-timeline__item) .pd-timeline__when { border-block-start: var(--hairline) solid var(--rule); }
}
@media (forced-colors: active) { .pd-timeline__node { forced-color-adjust: none; border-color: CanvasText; background: Canvas; } .pd-timeline__item--milestone .pd-timeline__node, .pd-timeline__item--now .pd-timeline__node { background: CanvasText; } }

/* ── NowBlock (.pd-now) ── */
.pd-now { container: pd-now / inline-size; color: var(--text); font-size: var(--fs-body-s); }
.pd-now__rows { margin: 0; border-block-end: var(--hairline) solid var(--rule); }
.pd-now__row { display: grid; grid-template-columns: minmax(0, var(--label-col)) minmax(0, 1fr); gap: var(--space-2) var(--space-5); padding: var(--row-pad); border-block-start: var(--hairline) solid var(--rule); }
.pd-now__row :where(dt) { display: flex; align-items: baseline; gap: var(--space-3); font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text); }
.pd-now__row :where(dd) { display: grid; gap: var(--space-3); margin: 0; }
.pd-now__item { margin: 0; font: var(--font-body); color: var(--text); }
.pd-now__aside { display: block; margin-block-start: var(--space-1); font: var(--font-caption); color: var(--text-muted); }
.pd-now__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-5); margin-block-start: var(--space-3); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-now__live { display: inline-flex; align-items: center; gap: var(--space-2); }
.pd-now__live::before { content: ""; inline-size: .5em; block-size: .5em; border-radius: var(--radius-pill); background: var(--bindu-on-paper); box-shadow: 0 0 0 1px var(--saffron-700); }
@container pd-now (inline-size < 30em) { .pd-now__row { grid-template-columns: minmax(0, 1fr); } }

/* ── Bookshelf (.pd-shelf): spines are aria-pressed buttons; the card shows the pressed book ── */
.pd-shelf { container: pd-shelf / inline-size; color: var(--text); font-size: var(--fs-body-s); }
.pd-shelf__legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.pd-shelf__row { display: flex; align-items: flex-end; gap: var(--space-1); margin: 0; padding: 0 0 0 var(--space-1); list-style: none; overflow-x: auto; overscroll-behavior-x: contain; border-block-end: 2px solid var(--rule-strong); scrollbar-width: thin; }
.pd-shelf__row > :where(li) { flex: none; display: flex; }
.pd-shelf__spine { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: var(--space-3); inline-size: var(--pd-shelf-w, 2.75rem); min-inline-size: var(--target-min); block-size: var(--pd-shelf-h, 14rem); margin: 0; padding: var(--space-4) 0 var(--space-3); color: var(--text); background: var(--surface-sunken); border: var(--hairline) solid var(--border-control); border-block-end: 0; border-radius: var(--radius-1) var(--radius-1) 0 0; cursor: pointer; font: inherit; transition: translate var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-standard); }
.pd-shelf__spine::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: .5rem; background: var(--text); }
.pd-shelf__spine:where([data-status="reading"])::before { background: linear-gradient(90deg, var(--text) 50%, transparent 50%); border-block-end: 1px solid var(--text); }
.pd-shelf__spine:where([data-status="to-read"]) { border-style: dashed; background: transparent; }
.pd-shelf__spine:where([data-status="to-read"])::before { background: transparent; border-block-end: 1px dashed var(--text); }
.pd-shelf__spine-title { writing-mode: vertical-rl; rotate: 180deg; font: 500 var(--fs-body-s)/1.1 var(--font-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-block-size: calc(var(--pd-shelf-h, 14rem) - 5.5rem); }
.pd-shelf__spine-title:where([lang="sa"]) { font-family: var(--font-deva); font-weight: 400; }
.pd-shelf__spine-author { writing-mode: vertical-rl; rotate: 180deg; font: 500 var(--fs-kicker)/1 var(--font-mono); letter-spacing: var(--track-mono); color: var(--text-muted); white-space: nowrap; }
@media (hover: hover) { .pd-shelf__spine:where(:not([aria-pressed="true"])):hover { translate: 0 calc(-1 * var(--space-2)); } }
.pd-shelf__spine:where([aria-pressed="true"]) { translate: 0 calc(-1 * var(--space-3)); background: var(--selected-bg); color: var(--selected-fg); border-color: var(--selected-bg); }
:where(.pd-shelf__spine[aria-pressed="true"]) .pd-shelf__spine-author { color: var(--selected-fg); }
.pd-shelf__spine:where([aria-pressed="true"])::after { content: ""; position: absolute; inset-block-end: calc(-1 * var(--space-3)); inset-inline: 30%; block-size: 2px; background: var(--text); }
.pd-shelf__spine:focus-visible { outline-offset: var(--focus-offset); }
.pd-shelf__card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-5); margin-block-start: var(--space-6); padding-block-start: var(--space-4); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-shelf__card:where([hidden]) { display: none; }
.pd-shelf__title { margin: 0; font: var(--font-title); color: var(--text); }
.pd-shelf__author { margin: var(--space-1) 0 0; font: var(--font-label); color: var(--text-muted); }
.pd-shelf__card > .pd-status { align-self: start; }
.pd-shelf__note, .pd-shelf__meta { grid-column: 1 / -1; margin: 0; }
.pd-shelf__note { max-inline-size: var(--measure); font: var(--font-body); color: var(--text); }
.pd-shelf__close { grid-column: 1 / -1; justify-self: start; }
@media (forced-colors: active) { .pd-shelf__spine { border-color: ButtonText; } .pd-shelf__spine::before { forced-color-adjust: none; background: CanvasText; } }

/* ── GardenNote (.pd-garden): cards whose parts align across columns via subgrid ── */
.pd-garden__grid { container: pd-garden / inline-size; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: var(--space-7) var(--gutter); }
.pd-garden { position: relative; display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: var(--space-3); padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule-strong); color: var(--text); }
.pd-garden__stage { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
.pd-garden__glyph { inline-size: 1.25rem; block-size: 1.25rem; overflow: visible; color: var(--text); }
.pd-garden__glyph :where(.pd-garden__fill) { fill: currentColor; }
.pd-garden__title { margin: 0; font: var(--font-title); text-wrap: balance; }
.pd-garden__title :where(a) { color: var(--text); text-decoration: none; }
.pd-garden__title :where(a)::after { content: ""; position: absolute; inset: 0; z-index: var(--z-raised); }
.pd-garden__title :where(a):focus-visible { outline: 0; }
.pd-garden__title :where(a):focus-visible::after { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
@media (hover: hover) { :where(.pd-garden:hover) .pd-garden__title :where(a) { text-decoration: underline var(--hairline); text-underline-offset: .2em; } }
.pd-garden__excerpt { margin: 0; font: var(--font-body-s); color: var(--text-muted); }
.pd-garden__dates { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-garden__dates :where(b) { font-weight: 500; color: var(--text); }
.pd-garden__links { position: relative; z-index: calc(var(--z-raised) + 1); padding-block-start: var(--space-2); border-block-start: var(--hairline) solid var(--rule); }
.pd-garden__links-label { margin: 0; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-garden__links :where(ul) { margin: 0; padding: 0; list-style: none; }
.pd-garden__links :where(a) { display: flex; align-items: center; min-block-size: var(--target-min); font: var(--font-label); color: var(--link); }

/* ── CodeBlock (.pd-code): monochrome syntax from semantic tokens; copy via .pd-copy ── */
.pd-code { container: pd-code / inline-size; margin: 0; color: var(--text); border: var(--hairline) solid var(--border-control); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-code__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-1) var(--space-1) var(--space-1) var(--space-4); border-block-end: var(--hairline) solid var(--rule); }
.pd-code__tab { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text); min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-code__side { display: inline-flex; align-items: center; gap: var(--space-3); }
.pd-code__lang { font: var(--font-meta); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-subtle); }
.pd-code__pre { margin: 0; padding: var(--space-4) var(--space-4) var(--space-4) 0; overflow-x: auto; font: 400 var(--fs-caption)/1.7 var(--font-mono); tab-size: 2; counter-reset: pd-line; background: var(--surface-sunken); }
.pd-code__pre:focus-visible { outline-offset: calc(-1 * var(--focus-width)); }
.pd-code__pre :where(code) { display: grid; min-inline-size: max-content; font: inherit; }
.pd-code__line { display: block; min-block-size: 1.7em; padding-inline-start: 3.5em; position: relative; counter-increment: pd-line; white-space: pre; }
.pd-code__line::before { content: counter(pd-line, decimal-leading-zero); position: absolute; inset-inline-start: 0; inline-size: 2.5em; text-align: end; color: var(--text-subtle); }
.pd-code__line--mark { background: color-mix(in oklab, var(--text) var(--state-hover-mix), transparent); }
.pd-code__line--mark::before { content: "▸ " counter(pd-line, decimal-leading-zero); color: var(--text); font-weight: 500; }
.pd-code__k { font-weight: 600; color: var(--text); }
.pd-code__f { color: var(--text); text-decoration: underline var(--hairline) var(--border-control); text-underline-offset: .25em; }
.pd-code__s { color: var(--text-muted); font-style: italic; }
.pd-code__n { color: var(--text); font-variant-numeric: tabular-nums; }
.pd-code__c { color: var(--text-subtle); font-style: italic; }
.pd-code__p { color: var(--text-subtle); }
.pd-code__cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-4); padding: var(--space-3) var(--space-4); border-block-start: var(--hairline) solid var(--rule); font: var(--font-caption); color: var(--text-muted); }

/* ── Callout (.pd-callout): the aside language — ink hairline, kicker, glyph, no fill ── */
.pd-callout { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: var(--space-2) var(--space-3); max-inline-size: var(--measure); padding-block: var(--space-4) 0; border-block-start: var(--hairline) solid var(--rule-strong); color: var(--text); }
.pd-callout + .pd-callout { margin-block-start: var(--space-6); }
.pd-callout__glyph { inline-size: 1.25rem; block-size: 1.25rem; overflow: visible; color: var(--text); }
.pd-callout__glyph :where(.pd-callout__fill) { fill: currentColor; }
.pd-callout__kicker { align-self: center; margin: 0; } /* type: shared .pd-kicker rule (bundle.css) */
.pd-callout__body { grid-column: 2; font: var(--font-body); color: var(--text); }
.pd-callout__body > :where(*) { margin: 0; }
.pd-callout__body > :where(* + *) { margin-block-start: var(--space-2); }
.pd-callout--warning .pd-callout__kicker, .pd-callout--warning .pd-callout__glyph { color: var(--danger); }
.pd-callout--sloka { padding-block-end: var(--space-4); border-block-end: var(--hairline) solid var(--rule-strong); }
.pd-callout__deva { font: var(--font-devanagari); color: var(--text); }
.pd-callout__iast { font: var(--font-iast); color: var(--text-muted); }
.pd-callout__src { display: block; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }

/* ── DataTable (.pd-table): scrolls inside its own region; sortable 44px headers ── */
.pd-table { container: pd-table / inline-size; max-inline-size: 100%; overflow-x: auto; color: var(--text); font-size: var(--fs-body-s); }
.pd-table:focus-visible { outline-offset: var(--focus-offset); }
.pd-table :where(table) { inline-size: 100%; min-inline-size: 34rem; border-collapse: collapse; font: var(--font-ui); font-variant-numeric: tabular-nums; }
.pd-table :where(caption) { padding-block-end: var(--space-4); text-align: start; caption-side: top; }
.pd-table :where(caption) > * { display: block; position: sticky; inset-inline-start: 0; max-inline-size: 100cqi; }
.pd-table :where(caption) > * + * { margin-block-start: var(--space-2); }
.pd-table__title { font: var(--font-title); color: var(--text); }
.pd-table__dek { font: var(--font-caption); color: var(--text-muted); }
.pd-table :where(thead th), .pd-td-table :where(thead th) { padding: 0; border-block: var(--hairline) solid var(--rule-strong); font: var(--font-label); text-align: start; color: var(--text-muted); }
.pd-table :where(tbody th, tbody td, tfoot th, tfoot td), .pd-td-table :where(tbody th, tbody td, tfoot th, tfoot td) { padding: var(--space-3) var(--space-3) var(--space-3) 0; border-block-end: var(--hairline) solid var(--rule); text-align: start; font-weight: 400; vertical-align: baseline; }
.pd-table :where(tbody th) { font: italic 400 var(--fs-body)/1.3 var(--font-text); color: var(--text); }
.pd-table :where(tfoot th, tfoot td), .pd-td-table :where(tfoot th, tfoot td) { border-block: var(--hairline) solid var(--rule-strong); font-weight: 500; color: var(--text); }
.pd-table__num { text-align: end; }
.pd-table :where(td.pd-table__num) { text-align: end; }
.pd-table :where(th.pd-table__num) .pd-table__sort { justify-content: flex-end; }
.pd-table__sort { display: inline-flex; align-items: center; gap: var(--space-2); inline-size: 100%; min-block-size: var(--target-min); margin: 0; padding: 0 var(--space-3) 0 0; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: inherit; }
.pd-table__sort:focus-visible { outline-offset: calc(-1 * var(--focus-width)); }
@media (hover: hover) { .pd-table__sort:hover { color: var(--text); text-decoration: underline var(--hairline); text-underline-offset: .3em; } }
.pd-table__arrow { inline-size: .6em; block-size: .6em; border-inline-end: 1px solid var(--border-control); border-block-end: 1px solid var(--border-control); rotate: 45deg; translate: 0 -.15em; opacity: var(--opacity-faint); }
:where(.pd-table th[aria-sort]) .pd-table__sort { color: var(--text); font-weight: 600; }
:where(.pd-table th[aria-sort]) .pd-table__arrow { border-color: var(--text); opacity: 1; }
:where(.pd-table th[aria-sort="ascending"]) .pd-table__arrow { rotate: 225deg; translate: 0 .15em; }
.pd-table__note { margin: var(--space-3) 0 0; }
/* a header with no sort button (static tables, the --tech alias) gets the cell rhythm; the last column sits flush */
.pd-table :where(thead th:not(:has(> .pd-table__sort))), .pd-td-table :where(thead th) { padding: var(--space-2) var(--space-3) var(--space-2) 0; }
.pd-table :where(th, td):where(:last-child), .pd-td-table :where(th, td):where(:last-child) { padding-inline-end: 0; }
/* The one table chassis. Header recipe (shared by every kit table: .pd-rk-tbl, .pd-ch-table, .pd-dg__table): font-label, --text-muted, a strong hairline above and below.
   --tech: the only mono-caps header (API params, timelines, specs) = .pd-label-micro values; row headers upright 500 sans. .pd-td-table is its true alias (listed in every rule above and below). */
.pd-table--tech :where(thead th), .pd-td-table :where(thead th) { font: 500 var(--fs-meta)/1.3 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-subtle); white-space: nowrap; }
.pd-table--tech :where(tbody th), .pd-td-table :where(tbody th) { font: 500 var(--fs-body-s)/1.4 var(--font-sans); color: var(--text); }
/* .pd-td-table (TechDocs): the --tech alias. Its own wrapper and table box (no 34rem minimum; --wide sets 40rem); cells, headers and totals are listed in the .pd-table rules above */
.pd-td-table { position: relative; max-inline-size: 100%; overflow-x: auto; }
.pd-td-table--wide :where(table) { min-inline-size: 40rem; }
.pd-td-table:focus-visible { outline-offset: var(--focus-offset); }
.pd-td-table :where(table) { inline-size: 100%; border-collapse: collapse; font: var(--font-ui); font-size: var(--fs-body-s); color: var(--text); font-variant-numeric: tabular-nums; }
.pd-td-table :where(code) { font: 400 .875em/1.3 var(--font-mono); }
@media (forced-colors: active) { .pd-table__arrow { border-color: CanvasText; } }
@media print { .pd-code__bar .pd-copy, .pd-shelf__close { display: none; } .pd-code__pre { white-space: pre-wrap; } .pd-table { overflow: visible; } }

/* ══ Site states: EmptyState · NotFound · Skeleton · Responses ═════════ */

/* ── EmptyState (.pd-empty) ── */
.pd-empty { container: pd-empty / inline-size; display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--space-4) var(--space-6); align-items: start; padding-block: var(--space-6); border-block: var(--hairline) solid var(--rule-strong); border-block-end-color: var(--rule); color: var(--text); }
.pd-empty + .pd-empty { border-block-start: 0; }
.pd-empty:where([hidden]) { display: none; }
.pd-empty__glyph { inline-size: 100%; aspect-ratio: 1; overflow: visible; color: var(--text); }
.pd-empty__glyph :where(.pd-empty__dash) { stroke-dasharray: 3 4; }
.pd-empty__glyph :where(.pd-empty__fill) { fill: currentColor; }
.pd-empty__body { display: grid; justify-items: start; gap: var(--space-3); min-inline-size: 0; }
.pd-empty__title { margin: 0; font: var(--font-title); color: var(--text); text-wrap: balance; }
.pd-empty__title :where(em) { font-style: italic; font-weight: 400; color: var(--text); }
.pd-empty__text { margin: 0; max-inline-size: var(--measure); font: var(--font-body-s); color: var(--text-muted); }
.pd-empty__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); font: var(--font-ui); }
.pd-empty__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); }
.pd-empty--compact { grid-template-columns: 2.5rem minmax(0, 1fr); padding-block: var(--space-4); }
.pd-empty--compact .pd-empty__title { font: var(--font-body); }
.pd-empty:where(:not(:has(.pd-empty__glyph))) { grid-template-columns: minmax(0, 1fr); }
@container pd-empty (inline-size < 30em) { .pd-empty__glyph { inline-size: 3rem; } }

/* ── NotFound (.pd-404): a .pd-sky plate; everything inside reads the remapped semantic tokens ── */
.pd-404 { container: pd-404 / inline-size; position: relative; display: grid; align-content: space-between; gap: var(--space-7); min-block-size: 36rem; padding: var(--space-6) var(--gutter); overflow: hidden; }
.pd-404__field { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; pointer-events: none; }
.pd-404__inner { position: relative; display: grid; justify-items: start; gap: var(--space-4); max-inline-size: 38rem; }
.pd-404__meta, .pd-404__foot { position: relative; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); }
.pd-404__foot { justify-content: space-between; }
.pd-404__code { margin: 0; font: 500 clamp(var(--fs-display-l), 26cqi, calc(var(--fs-display-xl) * 2))/.85 var(--font-display); letter-spacing: var(--track-display); color: var(--text); font-variant-numeric: lining-nums; }
.pd-404__line { margin: 0; font: var(--font-headline); color: var(--text); text-wrap: balance; }
.pd-404__line :where(em) { font-style: italic; font-weight: 400; color: var(--text); }
.pd-404__hint { margin: 0; max-inline-size: 32em; font: var(--font-body); color: var(--text-muted); }
.pd-404__search { display: flex; flex-wrap: wrap; gap: var(--space-2); inline-size: 100%; }
.pd-404__search > .pd-input { flex: 1 1 14rem; min-inline-size: 0; }
.pd-404__actions { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.pd-404__sections { inline-size: 100%; padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule); }
.pd-404__sections ol { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); margin: 0; padding: 0; list-style: none; }
.pd-404__sections a { display: inline-flex; align-items: baseline; gap: var(--space-2); min-block-size: var(--target-min); padding-block: var(--space-2); font: var(--font-label); color: var(--text); text-decoration: underline 1px transparent; text-underline-offset: .3em; }
@media (hover: hover) { .pd-404__sections a:hover { text-decoration-color: currentColor; } }
.pd-404__foot { align-items: center; }

/* ── Skeleton (.pd-skel): placeholders shaped like the loaded state ── */
.pd-skel { --pd-skel-ink: color-mix(in oklab, var(--text) calc(var(--opacity-ghost) * 100%), transparent); position: relative; color: var(--text); }
.pd-skel__bar { display: block; block-size: .75em; inline-size: 100%; background: var(--pd-skel-ink); border-radius: var(--radius-1); }
.pd-skel__bar--title { block-size: 1.1em; inline-size: 72%; }
.pd-skel__bar--mid { inline-size: 60%; }
.pd-skel__bar--short { inline-size: 32%; }
.pd-skel__bar--meta { inline-size: 6em; block-size: .6em; }
.pd-skel__chip { display: inline-block; inline-size: 5.5em; block-size: 1.5em; border: var(--hairline) solid var(--pd-skel-ink); border-radius: var(--radius-1); }
.pd-skel__frame { display: block; inline-size: 100%; block-size: 100%; background: var(--pd-skel-ink); }
/* rows: date | title | tag on hairlines (mirrors .pd-rows--entry) */
.pd-skel--rows { container: pd-skel-rows / inline-size; margin: 0; padding: 0; list-style: none; border-block-end: var(--hairline) solid var(--rule); }
.pd-skel--rows > :where(li) { display: grid; grid-template-columns: minmax(0, 8em) minmax(0, 1fr) auto; align-items: center; gap: var(--space-1) var(--space-5); padding: var(--row-pad); border-block-start: var(--hairline) solid var(--rule); }
@container pd-skel-rows (inline-size < 30em) { .pd-skel--rows > :where(li) { grid-template-columns: minmax(0, 1fr) auto; } .pd-skel--rows :where(.pd-skel__bar--title) { grid-column: 1 / -1; grid-row: 2; } }
/* gallery: plates (mirrors .pd-gallery / .pd-plate) */
.pd-skel--gallery { display: grid; align-items: end; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: var(--space-6) var(--gutter); }
.pd-skel--gallery > :where(div) { display: grid; align-content: end; gap: var(--space-3); min-inline-size: 0; }
.pd-skel--gallery :where(.pd-skel__frame) { block-size: auto; aspect-ratio: 3 / 2; }
.pd-skel--gallery :where(.pd-skel__frame--portrait) { aspect-ratio: 4 / 5; }
/* prose: measure-wide lines (mirrors .pd-prose) */
.pd-skel--prose { display: grid; gap: .8em; max-inline-size: var(--measure); font: var(--font-body); }
.pd-skel--prose > :where(.pd-skel__gap) { block-size: var(--space-2); }
@media (prefers-reduced-motion: no-preference) {
  .pd-skel:where([aria-busy="true"]) .pd-skel__bar, .pd-skel:where([aria-busy="true"]) .pd-skel__frame { animation: pd-skel-pulse calc(var(--dur-loop) * .9) var(--ease-in-out) 1 both; }
}
@keyframes pd-skel-pulse { 0%, 100% { opacity: 1; } 25%, 75% { opacity: .5; } 50% { opacity: 1; } }
@media (forced-colors: active) { .pd-skel__bar, .pd-skel__frame { background: transparent; border: 1px solid GrayText; } .pd-skel__chip { border-color: GrayText; } }

/* ── Responses (.pd-responses): replies, mentions and the reply form ── */
.pd-responses { container: pd-responses / inline-size; max-inline-size: var(--measure-wide); color: var(--text); font-size: var(--fs-body-s); }
.pd-responses__list, .pd-responses__children { margin: 0; padding: 0; list-style: none; }
.pd-responses__list { border-block-end: var(--hairline) solid var(--rule); }
.pd-responses__item { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-2) var(--space-4); padding: var(--row-pad); border-block-start: var(--hairline) solid var(--rule); }
.pd-responses__item:where(:target) .pd-responses__text { text-decoration: underline 2px var(--rule-strong); text-underline-offset: .3em; }
.pd-responses__children { grid-column: 2; }
.pd-responses__children > :where(.pd-responses__item:first-child) { margin-block-start: var(--space-2); }
.pd-responses__main { display: grid; gap: var(--space-2); min-inline-size: 0; }
.pd-responses__by { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); font: var(--font-label); }
.pd-responses__name { font-weight: 600; color: var(--text); }
.pd-responses__kind { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-responses__date { margin-inline-start: auto; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); text-decoration: none; }
.pd-responses__text { margin: 0; max-inline-size: var(--measure); font: var(--font-body); color: var(--text); }
.pd-responses__actions { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.pd-responses__item--mention { grid-template-columns: 2.5rem minmax(0, 1fr) auto; align-items: baseline; }
.pd-responses__item--mention .pd-responses__text { font: var(--font-body-s); color: var(--text-muted); }
.pd-responses__mark { justify-self: center; inline-size: .75rem; block-size: .75rem; border: 1.5px solid var(--text); border-radius: var(--radius-pill); }
.pd-responses__compose { display: grid; gap: var(--space-6); margin-block-start: var(--space-7); padding-block-start: var(--space-4); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-responses__form { display: grid; gap: var(--space-4); }
.pd-responses__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-4); }
.pd-responses__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); }
.pd-responses__wm-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pd-responses__wm-row > .pd-input { flex: 1 1 14rem; min-inline-size: 0; }
@container pd-responses (inline-size < 30em) {
  .pd-responses__item { grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-2) var(--space-3); }
  .pd-responses__children { grid-column: 1 / -1; padding-inline-start: var(--space-5); }
  .pd-responses__date { margin-inline-start: 0; }
}
@media (forced-colors: active) { .pd-responses__mark { forced-color-adjust: none; border-color: CanvasText; } }
@media print { .pd-404__search, .pd-responses__compose, .pd-responses__actions { display: none; } }

/* ══ Identity family ══════════════════════════════════════════════════ */

/* ── WhereNow (.pd-where): place, live Nepal Time, open-to rows, abstract map; --compact strip ── */
.pd-where { container: pd-where / inline-size; color: var(--text); font-size: var(--fs-body-s); }
.pd-where__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-7); }
.pd-where__info { display: flex; flex-direction: column; gap: var(--space-5); min-inline-size: 0; }
.pd-where__coords { margin: 0; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pd-where__clock { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: var(--space-1) var(--space-4); padding-block: var(--space-4); border-block: var(--hairline) solid var(--rule); }
.pd-where__time { grid-row: span 2; font: 500 var(--fs-display-m)/.86 var(--font-display); letter-spacing: var(--track-display); font-variant-numeric: lining-nums tabular-nums; color: var(--text); }
.pd-where__phase { display: inline-flex; align-items: center; gap: var(--space-2); font: var(--font-label); color: var(--text); }
.pd-where__zone { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); }
.pd-where__glyph { display: none; flex: none; inline-size: var(--icon-m); block-size: var(--icon-m); color: var(--text-muted); }
.pd-where__glyph :where(.pd-where__fill) { fill: currentColor; stroke: none; }
:where([data-daypart="day"]) .pd-where__glyph--sun, :where([data-daypart="night"]) .pd-where__glyph--moon { display: block; }
.pd-where__rows { margin: 0; border-block-end: var(--hairline) solid var(--rule); }
.pd-where__row { display: grid; grid-template-columns: minmax(0, var(--label-col)) minmax(0, 1fr); gap: var(--space-4); padding: var(--row-pad); border-block-start: var(--hairline) solid var(--rule); }
.pd-where__row :where(dt) { font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); padding-block-start: .3em; }
.pd-where__row :where(dd) { margin: 0; font: var(--font-body-s); color: var(--text); }
.pd-where__row :where(dd span) { display: block; margin-block-start: var(--space-1); font: var(--font-caption); color: var(--text-muted); }
.pd-where__map { container: pd-where-map / inline-size; margin: 0; display: grid; align-content: start; gap: var(--space-3); min-inline-size: 0; }
.pd-where__svg { display: block; inline-size: 100%; block-size: auto; background: var(--surface-sunken); border: var(--hairline) solid var(--rule); }
.pd-where__grat { fill: none; stroke: var(--rule); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.pd-where__c { fill: none; stroke: var(--border-control); stroke-width: .6px; opacity: var(--opacity-muted); }
.pd-where__c--index { stroke: var(--text-subtle); stroke-width: .8px; }
.pd-where__pt { fill: var(--surface); stroke: var(--text); stroke-width: 1.25px; }
.pd-where__ring { fill: none; stroke: var(--text); stroke-width: 1px; }
.pd-where__ring--far { stroke: var(--text-subtle); stroke-dasharray: 1 3; }
.pd-where__bindu { fill: var(--bindu-on-paper); stroke: var(--text); stroke-width: 1px; }
.pd-where__north { fill: var(--text); }
.pd-where__scale { fill: none; stroke: var(--text); stroke-width: 1px; }
/* SVG labels: ≥ 11px rendered, with a paint-order halo in the map ground */
.pd-where__lbl, .pd-where__gl { paint-order: stroke; stroke: var(--surface-sunken); stroke-width: 3px; stroke-linejoin: round; }
.pd-where__lbl { font: 500 11px var(--font-sans); fill: var(--text); }
.pd-where__lbl--sub { font: 400 11px var(--font-mono); fill: var(--text-muted); }
.pd-where__lbl--city { font: 500 18px var(--font-display); }
.pd-where__gl { font: 400 11px var(--font-mono); fill: var(--text-subtle); }
@container pd-where-map (inline-size < 30em) {
  .pd-where__lbl, .pd-where__lbl--sub, .pd-where__gl { font-size: 16px; }
  .pd-where__lbl--city { font-size: 22px; }
  .pd-where__lbl--sub { display: none; }
}
.pd-where__legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); margin: 0; padding: 0; list-style: none; font: var(--font-caption); color: var(--text-muted); }
.pd-where__legend :where(li) { display: grid; grid-template-columns: 2.5em minmax(0, 1fr); gap: var(--space-2); padding-block: var(--space-2); border-block-start: var(--hairline) solid var(--rule); }
.pd-where__legend :where(b) { font-weight: 600; color: var(--text); }
.pd-where__n { font: var(--font-numeral); color: var(--text-subtle); }
.pd-where--compact { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6); padding-block: var(--space-3); border-block: var(--hairline) solid var(--rule-strong); border-block-end-color: var(--rule); font: var(--font-label); }
.pd-where--compact > :where(p) { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; }
.pd-where--compact .pd-where__time { font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: var(--track-mono); }
.pd-where__dot { flex: none; inline-size: .5em; block-size: .5em; border-radius: var(--radius-pill); background: var(--text); box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--text); margin-inline: .25em .2em; }
.pd-where__place { font-weight: 600; color: var(--text); }
.pd-where__open :where(a) { display: inline-flex; align-items: center; min-block-size: var(--target-min); }
@container pd-where (inline-size < 48em) {
  .pd-where__grid { grid-template-columns: minmax(0, 1fr); }
  .pd-where__legend { grid-template-columns: minmax(0, 1fr); }
}
@container pd-where (inline-size < 30em) { .pd-where__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); } }
@media (forced-colors: active) { .pd-where__svg { forced-color-adjust: none; } .pd-where__dot { forced-color-adjust: none; background: CanvasText; } }

/* ── Profile (.pd-profile): portrait plate (.pd-sky + mark sprite + constellation) | name · nick · bio · facts · links ── */
.pd-profile { container: pd-profile / inline-size; display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-7); align-items: flex-start; color: var(--text); font-size: var(--fs-body-s); }
.pd-profile__portrait { position: relative; flex: 2 1 14rem; display: grid; place-items: center; margin: 0; aspect-ratio: 4 / 5; max-block-size: 30rem; overflow: hidden; }
.pd-profile__portrait > .pd-sky__svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.pd-profile__portrait > .pd-mark { position: relative; inline-size: auto; block-size: 44%; aspect-ratio: 1; color: var(--text); fill: currentColor; }
.pd-profile__portrait > .pd-hamsa { position: relative; font-size: clamp(2rem, 9cqi, 3.25rem); color: var(--_pd-sky-ink); --text: var(--_pd-sky-ink); --text-muted: var(--_pd-sky-muted); --pd-hamsa-ground: var(--_pd-sky-bg); }
.pd-profile__cap { position: absolute; inset-inline: var(--space-4); inset-block-end: var(--space-3); display: flex; justify-content: space-between; gap: var(--space-3); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); }
.pd-profile__body { flex: 3 1 20rem; display: grid; align-content: start; gap: var(--space-4); min-inline-size: 0; }
.pd-profile__name { margin: 0; font: 500 clamp(var(--fs-headline), 8cqi, var(--fs-display-m))/1 var(--font-display); letter-spacing: var(--track-display); color: var(--text); }
.pd-profile__nick { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4); margin: 0; font: italic 400 var(--fs-title)/1.2 var(--font-display); color: var(--text); }
.pd-profile__bio { margin: 0; max-inline-size: var(--measure); font: var(--font-body); color: var(--text); }
.pd-profile__links { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); margin: 0; padding: 0; list-style: none; }
.pd-profile__links :where(a) { display: inline-flex; align-items: center; min-block-size: var(--target-min); font: var(--font-label); color: var(--link); }
.pd-profile--compact { flex-wrap: nowrap; gap: var(--space-4) var(--space-5); padding-block-start: var(--space-4); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-profile--compact .pd-profile__portrait { flex: 0 0 4.5rem; aspect-ratio: 1; }
.pd-profile--compact .pd-profile__body { flex: 1 1 0; }
.pd-profile--compact .pd-profile__name { font: var(--font-title); }
.pd-profile--compact .pd-profile__bio { font: var(--font-body-s); color: var(--text-muted); }

/* ── AboutPage (.pd-about): composes .pd-profile for the hero, then numbered sections on the label column ── */
.pd-about { container: pd-about / inline-size; display: grid; gap: var(--space-8); color: var(--text); font-size: var(--fs-body-s); }
.pd-about__sec { display: grid; grid-template-columns: minmax(0, var(--label-col)) minmax(0, 1fr); gap: var(--space-4) var(--space-7); padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule-strong); }
/* the hero portrait keeps a true 4:5 (flex-grow would widen it past its capped height) */
.pd-about > .pd-profile > .pd-profile__portrait { flex: 0 1 24rem; max-inline-size: 24rem; max-block-size: none; }
/* every section's second column starts on the same line: Education's dl uses the list lead (--row-lead), not --label-col */
.pd-about__sec > .pd-facts { grid-template-columns: minmax(0, var(--row-lead)) minmax(0, 1fr); }
.pd-about__sec-head { display: grid; align-content: start; gap: var(--space-2); }
.pd-about__sec-title { margin: 0; font: var(--font-title); color: var(--text); }
.pd-about__list { margin: 0; padding: 0; list-style: none; border-block-end: var(--hairline) solid var(--rule); }
.pd-about__list :where(li) { display: grid; grid-template-columns: var(--row-lead) minmax(0, 1fr); padding: var(--row-pad); border-block-start: var(--hairline) solid var(--rule); }
.pd-about__list :where(li:first-child) { border-block-start: 0; padding-block-start: 0; }
.pd-about__list :where(b) { display: block; font: var(--font-title); font-size: var(--fs-body); }
.pd-about__list :where(small) { display: block; margin-block-start: var(--space-1); font: var(--font-caption); color: var(--text-muted); }
.pd-about__venture { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); }
.pd-about__logo { --pd-ph-ratio: 1; inline-size: 3rem; }
.pd-about__logo > .pd-ph__label { max-inline-size: none; padding-inline: var(--space-1); font-size: var(--fs-meta); white-space: nowrap; }
.pd-about__vname { display: block; font: var(--font-title); font-size: var(--fs-body); color: var(--text); }
.pd-about__vdesc { display: block; font: var(--font-caption); color: var(--text-muted); }
.pd-about__vmeta { display: grid; justify-items: end; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-about__links { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: 0 var(--space-6); margin: 0; padding: 0; list-style: none; }
.pd-about__links :where(li) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--space-3); border-block-end: var(--hairline) solid var(--rule); }
.pd-about__links :where(a) { display: inline-flex; align-items: center; min-block-size: var(--target-min); font: var(--font-label); color: var(--link); }
.pd-about__links :where(span) { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-about__note { margin: var(--space-4) 0 0; font: var(--font-caption); color: var(--text-muted); }
.pd-about__sign { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-5) var(--space-7); }
.pd-about__sign > .pd-logo__lock { font-size: 1.1rem; }
.pd-about__sign .pd-mark { inline-size: 1em; block-size: 1em; }
.pd-about__motto { margin: 0; padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule); max-inline-size: var(--measure); font: var(--font-caption); color: var(--text-muted); }
.pd-about__sign-text { display: grid; gap: var(--space-3); max-inline-size: var(--measure); }
.pd-about__sign-text :where(p) { margin: 0; font: var(--font-body-s); color: var(--text-muted); }
.pd-about__sign-text :where(i) { font-style: italic; color: var(--text); }
@container pd-about (inline-size < 48em) {
  .pd-about__sec { grid-template-columns: minmax(0, 1fr); }
  .pd-about__venture { grid-template-columns: 3rem minmax(0, 1fr); }
  .pd-about__logo { inline-size: 3rem; }
  .pd-about__logo > .pd-ph__label { max-inline-size: none; padding: 0 2px; letter-spacing: 0; overflow-wrap: normal; word-break: keep-all; }
  .pd-about__vmeta { grid-column: 2; justify-items: start; display: flex; gap: var(--space-3); }
  .pd-about__sign { grid-template-columns: minmax(0, 1fr); justify-items: start; }
}

/* ── SiteFooterMega (.pd-megafoot): brand + .pd-subscribe, sitemap of the 10 sections (registry-driven) + Experience/Now/About/Contact, WhereNow strip, base. --compact = the Colophon strip (alias .pd-colophon) ── */
.pd-megafoot, .pd-colophon { container: pd-megafoot / inline-size; color: var(--text); background: var(--surface); border-block-start: var(--hairline) solid var(--rule-strong); font-size: var(--fs-body-s); }
.pd-megafoot__inner { display: grid; gap: var(--space-7); max-inline-size: var(--page-max); margin-inline: auto; padding: var(--space-7) var(--gutter) var(--space-5); }
.pd-megafoot__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6) var(--space-7); align-items: start; }
.pd-megafoot__brand { display: grid; justify-items: start; gap: var(--space-4); padding-block-start: var(--space-6); }
.pd-megafoot .pd-where--compact { border-block-end: 0; }
.pd-megafoot__tagline { margin: 0; max-inline-size: 24em; font: var(--font-lede); font-size: var(--fs-title); color: var(--text-muted); }
.pd-megafoot__nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6) var(--gutter); padding-block-start: var(--space-5); border-block-start: var(--hairline) solid var(--rule); }
.pd-megafoot__h { margin: 0 0 var(--space-3); font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
.pd-megafoot__list { margin: 0; padding: 0; list-style: none; }
.pd-megafoot__list :where(li) { border-block-start: var(--hairline) solid var(--rule); }
.pd-megafoot__list :where(a) { display: grid; grid-template-columns: 2.25em minmax(0, 1fr); align-items: baseline; gap: 0 var(--space-2); min-block-size: var(--target-min); padding-block: var(--space-2); color: var(--text); text-decoration: none; }
.pd-megafoot__plain :where(a) { display: flex; align-items: center; color: var(--link); font: var(--font-label); }
.pd-megafoot__n { font: var(--font-numeral); color: var(--text-subtle); }
.pd-megafoot__name { font: var(--font-label); font-weight: 600; color: var(--text); }
.pd-megafoot__dek { grid-column: 2; font: var(--font-caption); color: var(--text-muted); }
@media (hover: hover) { :where(.pd-megafoot__list a:hover) .pd-megafoot__name { text-decoration: underline var(--hairline); text-underline-offset: .25em; } }
.pd-megafoot__list :where(a):focus-visible { outline-offset: calc(-1 * var(--focus-width)); }
.pd-megafoot__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: var(--space-6); row-gap: var(--space-2); padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-megafoot__base :where(a) { display: inline-flex; align-items: center; min-block-size: var(--target-min); color: var(--link); }
.pd-megafoot--compact .pd-megafoot__inner { gap: var(--space-4); padding-block: var(--space-5) var(--space-3); }
.pd-megafoot__strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-6); }
.pd-megafoot__strip > .pd-megafoot__list { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
.pd-megafoot__strip > .pd-megafoot__list :where(li) { border: 0; }
.pd-megafoot__strip > .pd-megafoot__list :where(a) { display: inline-flex; gap: var(--space-1); }
/* Colophon (compact) signature + motto — the portrait lockup (LogoUsage) and the Haṃsa line at the very bottom */
.pd-megafoot__sig { font-size: 0.8rem; min-block-size: var(--target-min); }
.pd-megafoot__sig .pd-mark { inline-size: 1em; block-size: 1em; }
.pd-megafoot--compact .pd-megafoot__motto { margin: 0; font: var(--font-caption); color: var(--text-muted); }
.pd-megafoot--compact .pd-megafoot__motto::before { content: ""; display: inline-block; inline-size: .4em; block-size: .4em; margin-inline-end: .6em; border-radius: var(--radius-pill); background: var(--bindu); box-shadow: 0 0 0 1px var(--bindu-rim); vertical-align: .1em; }
@container pd-megafoot (inline-size < 64em) { .pd-megafoot__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container pd-megafoot (inline-size < 48em) { .pd-megafoot__top { grid-template-columns: minmax(0, 1fr); } .pd-megafoot__brand { padding-block-start: 0; } }
@container pd-megafoot (inline-size < 30em) { .pd-megafoot__nav { grid-template-columns: minmax(0, 1fr); } }
@media print { .pd-megafoot :where(.pd-subscribe, .pd-where--compact), .pd-megafoot__nav { display: none; } }

/* ── SocialCard (.pd-og): a 1200 × 630 canvas scaled into .pd-og-frame (no overflow at any width) ── */
.pd-og-frame { container: pd-og / inline-size; position: relative; inline-size: 100%; aspect-ratio: 1200 / 630; overflow: hidden; outline: var(--hairline) solid var(--rule); outline-offset: calc(-1 * var(--hairline)); }
.pd-og { --pd-og-k: tan(atan2(100cqi, 1200px)); position: absolute; inset-block-start: 0; inset-inline-start: 0; display: grid; grid-template-rows: auto 1fr auto; inline-size: 1200px; block-size: 630px; padding: 56px 64px; transform-origin: 0 0; scale: var(--pd-og-k); color: var(--text); background: var(--surface); font-size: 1rem; }
.pd-og > .pd-sky__svg, .pd-og__field { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.pd-og__top, .pd-og__main, .pd-og__foot { position: relative; }
.pd-og__top { display: flex; justify-content: space-between; gap: var(--space-5); font: 600 var(--fs-body)/1.2 var(--font-sans); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
.pd-og__no { font: 400 var(--fs-body)/1.2 var(--font-mono); letter-spacing: var(--track-mono); text-transform: none; }
.pd-og__main { align-self: center; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 48px; }
.pd-og__title { margin: 0; max-inline-size: 11em; font: 500 var(--fs-display-xl)/.95 var(--font-display); letter-spacing: var(--track-display); color: var(--text); text-wrap: balance; }
.pd-og__title :where(em) { font-style: italic; font-weight: 400; color: var(--text); }
.pd-og__dek { margin: 24px 0 0; max-inline-size: 26em; font: italic 400 var(--fs-pullquote)/1.3 var(--font-text); color: var(--text-muted); }
.pd-og__main > .pd-disc { --pd-disc-size: 15rem; }
.pd-og__foot { display: flex; justify-content: space-between; align-items: end; gap: var(--space-5); padding-block-start: 20px; border-block-start: 1px solid var(--rule-strong); }
.pd-og__brand { display: flex; align-items: center; gap: 16px; font: 600 var(--fs-pullquote)/1 var(--font-display); }
.pd-og__brand > .pd-mark { inline-size: 3.5rem; block-size: 3.5rem; }
.pd-og__brand > .pd-logo__lock { font-size: 1.5rem; font-weight: 400; } /* signature: portrait 3.9rem + "Pandox" 3rem on the 1200px canvas */
.pd-og__brand .pd-logo__sub { font-size: 1.125rem; }
.pd-og__by { font: 400 var(--fs-body)/1.4 var(--font-mono); letter-spacing: var(--track-mono); color: var(--text-muted); text-align: end; }

/* ── ThemeSwitcher (.pd-themes): five themes as a radio group; --compact for Masthead / MobileMenu ── */
.pd-themes { margin: 0; padding: 0; border: 0; min-inline-size: 0; color: var(--text); }
.pd-themes__legend { padding: 0; margin-block-end: var(--space-2); font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
.pd-themes__list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pd-themes__opt { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--target-min); min-inline-size: var(--target-min); padding: 0 var(--space-3) 0 var(--space-2); font: var(--font-label); color: var(--text); border: var(--hairline) solid var(--border-control); border-radius: var(--radius-1); cursor: pointer; transition: background-color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard); }
.pd-themes__opt > :where(input) { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
@media (hover: hover) { .pd-themes__opt:where(:not(:has(:checked))):hover { border-color: var(--rule-strong); background: color-mix(in oklab, currentColor var(--state-hover-mix), transparent); } }
.pd-themes__opt:has(:checked) { background: var(--selected-bg); border-color: var(--selected-bg); color: var(--selected-fg); font-weight: 600; }
.pd-themes__opt:has(:checked)::after { content: ""; inline-size: .3em; block-size: .6em; margin-inline-start: var(--space-1); border: solid currentColor; border-width: 0 .14em .14em 0; rotate: 45deg; translate: 0 -.1em; }
.pd-themes__opt:has(:focus-visible) { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
.pd-themes__swatch { display: grid; place-items: center; flex: none; inline-size: 1.5rem; block-size: 1.5rem; border-radius: var(--radius-1); background: var(--surface); color: var(--text); border: var(--hairline) solid var(--rule-strong); forced-color-adjust: none; font: 600 var(--fs-meta)/1 var(--font-display); }
.pd-themes__swatch::after { content: "Aa"; }
.pd-themes--compact .pd-themes__list { gap: var(--space-1); }
.pd-themes--compact .pd-themes__opt { justify-content: center; padding: 0; }
.pd-themes--compact .pd-themes__name { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:where(.pd-themes--compact) .pd-themes__opt:has(:checked)::after { position: absolute; inset-block-end: 3px; inset-inline: 30%; inline-size: auto; block-size: 2px; margin: 0; border: 0; rotate: 0deg; translate: 0 0; background: currentColor; }
@media (forced-colors: active) { .pd-themes__opt:has(:checked) { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; } }

} /* end components.site */

/* ── part: sky.css ── */
/* ── PART: sky ─────────────────────────────────────────────────────────────────────────────────────
   Package sky. Owns .pd-sky (shared star vocabulary), .pd-livesky, .pd-skystrip, .pd-starfield, .pd-hero.
   Engines: stars-data.js + sky.js (positions) → sky-view.js (canvas/SVG renderers, LiveSkyMap controller).
   Retired: .pd-t1/.pd-t2/.pd-t3 → .pd-sky__star--1/2/3 · .pd-starfield__tier--n → .pd-sky__star--n ·
            .pd-starfield--light → .pd-sky--paper (alias kept) · .pd-hero__glyph (split disc) → .pd-lockup mark.
   Private sky tokens are --_pd-sky-*; they derive from semantic tokens so every theme resolves without
   [data-theme] selectors. sky-view.js reads them with getComputedStyle and re-reads on a theme change. */
@layer components.sky {

/* ══ .pd-sky — the ground every star sky stands on ═══════════════════════════════════════════════ */
.pd-sky {
  /* private sky tokens (read by sky-view.js; numbers are alphas) */
  --_pd-sky-bg: var(--sky-900);
  --_pd-sky-ink: var(--on-sky);
  --_pd-sky-muted: color-mix(in srgb, var(--on-sky) 74%, var(--sky-900));
  --_pd-sky-bindu: var(--bindu-on-sky);
  --_pd-sky-accent: var(--bindu-on-sky);
  --_pd-sky-focus: var(--focus-on-sky);
  --_pd-sky-planet: var(--on-sky);
  --_pd-sky-star-a: var(--sky-star-a, var(--on-sky));
  --_pd-sky-star-b: var(--sky-star-b, var(--on-sky));
  --_pd-sky-star-g: var(--sky-star-g, color-mix(in srgb, var(--on-sky) 92%, var(--bindu-on-sky)));
  --_pd-sky-star-k: var(--sky-star-k, color-mix(in srgb, var(--on-sky) 80%, var(--bindu-on-sky)));
  --_pd-sky-star-m: var(--sky-star-m, color-mix(in srgb, var(--on-sky) 68%, var(--bindu-on-sky)));
  --_pd-sky-ring: color-mix(in srgb, var(--on-sky) 60%, var(--sky-900));
  --_pd-sky-grid: color-mix(in srgb, var(--on-sky) 22%, var(--sky-900));
  --_pd-sky-ecliptic: color-mix(in srgb, var(--on-sky) 55%, var(--sky-900));
  --_pd-sky-line: var(--on-sky);
  --_pd-sky-line-a: .25; --_pd-sky-line-hover-a: .6; --_pd-sky-grid-a: .22; --_pd-sky-ring-a: .75; --_pd-sky-ecliptic-a: .55; --_pd-sky-tick-a: .7;
  /* semantic remap: anything composed inside (buttons, links, kickers, lockups) reads on the sky */
  --surface: var(--sky-900);
  --surface-sunken: color-mix(in srgb, var(--on-sky) 8%, var(--sky-900));
  --text: var(--on-sky);
  --text-muted: color-mix(in srgb, var(--on-sky) 82%, var(--sky-900));
  --text-subtle: color-mix(in srgb, var(--on-sky) 70%, var(--sky-900));
  --rule: color-mix(in srgb, var(--on-sky) 22%, var(--sky-900));
  --rule-strong: var(--on-sky);
  --border-control: color-mix(in srgb, var(--on-sky) 58%, var(--sky-900));
  --link: var(--on-sky);
  --focus: var(--focus-on-sky);
  --accent: var(--bindu-on-sky);
  --accent-fill: var(--bindu-on-sky);
  --bindu-on-paper: var(--bindu-on-sky);
  --bindu: var(--bindu-on-sky);
  --bindu-rim: var(--bindu-rim-on-sky);
  --selected-bg: var(--on-sky);
  --selected-fg: var(--sky-900);
  background-color: var(--_pd-sky-bg);
  color: var(--_pd-sky-ink);
  outline: var(--hairline) solid var(--rule); outline-offset: calc(-1 * var(--hairline)); /* holds the edge in Void, where sky and page are both black */
}
/* Paper ground: stars as ink points. Also the print and static-SVG skin. */
.pd-sky--paper, .pd-starfield--light {
  --surface: inherit; --surface-sunken: inherit; --text: inherit; --text-muted: inherit; --text-subtle: inherit; --rule: inherit; --rule-strong: inherit;
  --border-control: inherit; --link: inherit; --focus: inherit; --accent: inherit; --accent-fill: inherit; --bindu-on-paper: inherit; --bindu: inherit; --bindu-rim: inherit; --selected-bg: inherit; --selected-fg: inherit;
  --_pd-sky-bg: var(--surface); --_pd-sky-ink: var(--text); --_pd-sky-muted: var(--text-subtle);
  --_pd-sky-bindu: var(--bindu); --_pd-sky-bindu-rim: var(--bindu-rim); --_pd-sky-accent: var(--accent); --_pd-sky-focus: var(--focus); --_pd-sky-planet: var(--text);
  --_pd-sky-star-a: var(--text); --_pd-sky-star-b: var(--text); --_pd-sky-star-g: var(--text); --_pd-sky-star-k: var(--text); --_pd-sky-star-m: var(--text);
  --_pd-sky-ring: var(--text); --_pd-sky-grid: var(--text-subtle); --_pd-sky-ecliptic: var(--text-subtle); --_pd-sky-line: var(--text);
  --_pd-sky-line-a: .4; --_pd-sky-ring-a: 1;
  background-color: var(--surface); color: var(--text); outline: 0;
}

/* Shared vocabulary for SVG skies (StarField, Profile, SocialCard, NotFound, static exports) */
.pd-sky__svg { display: block; inline-size: 100%; block-size: auto; overflow: visible; }
.pd-sky__star { fill: currentColor; opacity: var(--opacity-star-2, .55); }
.pd-sky__star--1 { opacity: var(--opacity-star-1, .3); }
.pd-sky__star--3 { opacity: var(--opacity-star-3, .95); }
:where(.pd-sky__star--1):not([r]) { r: .6px; }
:where(.pd-sky__star--2):not([r]) { r: 1px; }
:where(.pd-sky__star--3):not([r]) { r: 1.5px; }
.pd-sky__line { fill: none; stroke: var(--_pd-sky-line, currentColor); stroke-opacity: var(--_pd-sky-line-a, .25); stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; transition: stroke-opacity var(--dur-2, 180ms) var(--ease-standard); }
@media (hover: hover) { .pd-sky__line:hover, :where(.pd-sky__asterism:hover) .pd-sky__line { stroke-opacity: var(--_pd-sky-line-hover-a, .6); } }
.pd-sky__bindu { fill: var(--_pd-sky-bindu, var(--bindu-on-sky)); stroke: var(--_pd-sky-bindu-rim, transparent); stroke-width: 1px; vector-effect: non-scaling-stroke; }
:where(div, span).pd-sky__bindu { display: inline-block; inline-size: .25em; block-size: .25em; border-radius: var(--radius-pill); background: var(--_pd-sky-bindu, var(--bindu-on-sky)); box-shadow: inset 0 0 0 max(1px, .1em) var(--_pd-sky-bindu-rim, transparent); }
/* the one permitted glow: a single quiet radial, sky ground only, never on paper */
.pd-sky__glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(closest-side circle at var(--_pd-glow-x, 72%) var(--_pd-glow-y, 38%), color-mix(in srgb, var(--on-sky) 7%, transparent), transparent); }
:where(.pd-sky--paper) .pd-sky__glow { display: none; }
.pd-sky__ring { stroke-width: 1px; }
.pd-sky__label, .pd-sky__nak, .pd-sky__cardinal, .pd-sky__chip { paint-order: stroke; stroke: var(--_pd-sky-bg, var(--sky-900)); stroke-width: 3px; stroke-linejoin: round; }
.pd-sky__planet { fill: var(--_pd-sky-planet, currentColor); stroke: var(--_pd-sky-bg, var(--sky-900)); stroke-width: 1.5px; }
.pd-sky__moon-disc { fill: currentColor; fill-opacity: .16; stroke: currentColor; stroke-opacity: .5; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.pd-sky__moon-lit { fill: currentColor; }
.pd-sky__accent { stroke: var(--_pd-sky-accent, var(--accent)); }

/* Twinkle: one ≤ 4.8 s run, then still (WCAG 2.2.2). data-twinkle="on" (the toggle) runs it until paused. */
@media (prefers-reduced-motion: no-preference) {
  :where(.pd-sky--twinkle) .pd-sky__star--tw { animation: pd-sky-twinkle 2.4s var(--ease-in-out) 2; }
  :where(.pd-sky--twinkle) .pd-sky__star--tw:nth-of-type(3n) { animation-duration: 1.6s; animation-iteration-count: 3; }
  :where([data-twinkle="on"]) .pd-sky__star--tw { animation: pd-sky-twinkle 2.4s var(--ease-in-out) infinite; }
  :where([data-twinkle="on"]) .pd-sky__star--tw:nth-of-type(3n) { animation-duration: 3.4s; animation-delay: -1.1s; }
  :where([data-twinkle="off"]) .pd-sky__star--tw { animation: none; }
}
@keyframes pd-sky-twinkle { 50% { opacity: var(--opacity-star-1, .3); } }

/* Twinkle toggle: a .pd-btn with aria-pressed; this only places it */
.pd-sky__toggle { position: absolute; inset-block-start: var(--space-3); inset-inline-end: var(--space-3); z-index: var(--z-raised); }
@media (prefers-reduced-motion: reduce) { .pd-sky__toggle { display: none; } }

@media (forced-colors: active) {
  .pd-sky { --_pd-sky-bg: Canvas; --_pd-sky-ink: CanvasText; --_pd-sky-muted: CanvasText; --_pd-sky-accent: Highlight; --_pd-sky-focus: Highlight; --_pd-sky-planet: CanvasText; --_pd-sky-bindu: CanvasText;
    --_pd-sky-star-a: CanvasText; --_pd-sky-star-b: CanvasText; --_pd-sky-star-g: CanvasText; --_pd-sky-star-k: CanvasText; --_pd-sky-star-m: CanvasText; --_pd-sky-line: CanvasText; --_pd-sky-ring: CanvasText;
    background-color: Canvas; color: CanvasText; }
  .pd-sky__star, .pd-sky__moon-lit, .pd-sky__planet { fill: CanvasText; }
  .pd-sky__bindu { forced-color-adjust: none; fill: CanvasText; }
}

/* ══ LiveSkyMap (.pd-livesky) ═══════════════════════════════════════════════════════════════════ */
.pd-livesky { container-type: inline-size; display: grid; gap: var(--space-4); inline-size: min(100%, 40rem); margin: 0; color: var(--text); font-family: var(--font-sans); }
.pd-livesky__figure { position: relative; display: grid; gap: var(--space-3); margin: 0; min-inline-size: 0; }
.pd-livesky__stage { position: relative; inline-size: 100%; aspect-ratio: 1; overflow: hidden; touch-action: manipulation; }
.pd-livesky__canvas { display: block; inline-size: 100%; block-size: 100%; }
.pd-livesky__hit { position: absolute; inset: 0; z-index: var(--z-raised); cursor: crosshair; }
.pd-livesky__hit:focus-visible { outline: var(--focus-width, 2px) solid var(--focus); outline-offset: calc(-1 * var(--focus-width, 2px)); }
.pd-livesky__list { margin: 0; padding: 0; list-style: none; }
.pd-livesky__card { position: absolute; z-index: var(--z-overlay, 80); inline-size: min(17rem, 100% - 2 * var(--space-3)); pointer-events: none; }
.pd-livesky__card[hidden] { display: none; }
:where(.pd-livesky[data-pinned]) .pd-livesky__card { pointer-events: auto; }
.pd-livesky__pop { max-inline-size: none; inline-size: 100%; padding: var(--space-4); }
.pd-livesky__card-title { margin: 0; font: 500 var(--fs-title, 1.5rem)/1.15 var(--font-display); letter-spacing: var(--track-display); color: var(--text); }
.pd-livesky__card-sub { margin: var(--space-1) 0 0; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-livesky__card-rows { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-1) var(--space-4); margin: var(--space-3) 0 0; padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule); font-size: var(--fs-caption); line-height: 1.4; }
.pd-livesky__card-rows dt { font: 500 var(--fs-meta)/1.5 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-subtle); }
.pd-livesky__card-rows dd { margin: 0; color: var(--text); font-variant-numeric: tabular-nums; }
.pd-livesky__card-rows :lang(sa) { font-family: var(--font-deva); color: var(--text-muted); }
.pd-livesky__caption { display: flex; align-items: baseline; gap: var(--space-2); margin: 0; font: var(--font-caption, 400 .8125rem/1.45 var(--font-sans)); color: var(--text-muted); }
.pd-livesky__live { flex: none; inline-size: .5em; block-size: .5em; border-radius: var(--radius-pill); border: var(--hairline) solid currentColor; translate: 0 -.05em; }
:where(.pd-livesky[data-live]) .pd-livesky__live { background: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  :where(.pd-livesky[data-live]) .pd-livesky__live { animation: pd-livesky-pulse 1.6s var(--ease-in-out) 3; }
}
@keyframes pd-livesky-pulse { 50% { opacity: var(--opacity-faint, .4); } }
.pd-livesky__controls { display: grid; gap: var(--space-4); padding-block-start: var(--space-4); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-livesky__row { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3) var(--space-4); }
.pd-livesky__mode { flex: none; inline-size: 10.5rem; } /* container-type children need a definite size */
.pd-livesky__placefield { min-inline-size: 10rem; }
.pd-livesky__now::before { content: ""; inline-size: .5em; block-size: .5em; border-radius: var(--radius-pill); border: var(--hairline) solid currentColor; }
.pd-livesky__now:where([aria-pressed="true"])::after { display: none; }
.pd-livesky__now:where([aria-pressed="true"])::before { background: currentColor; }
/* Play keeps one label; aria-pressed (fill + dot from .pd-btn) is the only state signal. A legacy "Pause" span is never shown. */
.pd-livesky__play-on { display: none; }
.pd-livesky__hint { margin: 0; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-livesky__print { display: none; }
@container (inline-size < 30em) {
  .pd-livesky__card { position: static; inline-size: auto; pointer-events: auto; }
  .pd-livesky__row { align-items: stretch; }
  .pd-livesky__row > * { flex: 1 1 auto; }
  .pd-livesky__placefield { min-inline-size: 0; flex-basis: 100%; }
}
@media print {
  .pd-livesky__controls, .pd-livesky__hit, .pd-livesky__card, .pd-livesky__canvas { display: none; }
  .pd-livesky__print { display: block; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .pd-livesky__stage { aspect-ratio: auto; }
}
@media (forced-colors: active) {
  .pd-livesky__live { forced-color-adjust: none; border-color: CanvasText; }
  :where(.pd-livesky[data-live]) .pd-livesky__live { background: Highlight; }
}

/* ══ SkyStrip (.pd-skystrip) ═══════════════════════════════════════════════════════════════════ */
.pd-skystrip { container-type: inline-size; display: grid; gap: var(--space-2); margin: 0; padding-block: var(--space-3); color: var(--text); border-block: var(--hairline) solid var(--rule); }
.pd-skystrip:where(.pd-sky) { padding-inline: var(--space-4); border-block: 0; }
.pd-skystrip__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-1) var(--space-4); }
.pd-skystrip__title { margin: 0; }
.pd-skystrip__now-text { margin: 0; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pd-skystrip__plot { position: relative; block-size: 6.5rem; min-inline-size: 0; }
@container (inline-size >= 48em) { .pd-skystrip__plot { block-size: 8rem; } }
.pd-skystrip__svg { display: block; inline-size: 100%; block-size: 100%; overflow: visible; }
.pd-skystrip__svg text { font-size: var(--fs-meta, .75rem); }
.pd-skystrip__ecl { fill: none; stroke: var(--rule); stroke-width: 1px; }
.pd-skystrip__up { fill: none; stroke: var(--rule-strong); stroke-width: 1px; }
.pd-skystrip__accent { fill: none; stroke: var(--accent); stroke-width: 3px; }
.pd-skystrip__tick { fill: none; stroke: var(--text-subtle); stroke-width: 1px; }
.pd-skystrip__ruler { fill: none; stroke: var(--rule); stroke-width: 1px; }
.pd-skystrip--quiet { --accent: var(--text); } /* a second strip in one view gives the accent back */
.pd-skystrip__num { font-family: var(--font-mono); fill: var(--text-subtle); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.pd-skystrip__num--moon { fill: var(--text); font-weight: 500; }
.pd-skystrip__body { font-family: var(--font-sans); fill: var(--text-muted); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.pd-skystrip__sun { fill: none; stroke: var(--text); stroke-width: 1.25px; }
.pd-skystrip__dot { fill: var(--text); stroke: 0; }
.pd-skystrip__sep { fill: none; stroke: var(--rule); stroke-width: 1px; }
.pd-skystrip__night { fill: none; stroke: var(--text-subtle); stroke-width: 1px; }
.pd-skystrip__hour { fill: none; stroke: var(--text-subtle); stroke-width: 1px; }
.pd-skystrip__now { fill: none; stroke: var(--text); stroke-width: 2px; }
.pd-skystrip__moonmark { fill: var(--text-muted); }
.pd-skystrip__time { font-family: var(--font-mono); fill: var(--text-subtle); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.pd-skystrip__time--now { fill: var(--text); font-weight: 500; }
.pd-skystrip .pd-sky__moon { color: var(--text); }
.pd-skystrip .pd-sky__planet { fill: var(--text); stroke: var(--surface); }
.pd-skystrip .pd-sky__star { fill: var(--text); }
.pd-skystrip__legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); margin: 0; padding: 0; list-style: none; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-skystrip__legend li { display: inline-flex; align-items: center; gap: var(--space-2); }
.pd-skystrip__key { display: inline-block; inline-size: 1.5em; border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-skystrip__key--accent { border-block-start: 3px solid var(--accent); }
.pd-skystrip__key--faint { border-block-start-color: var(--rule); }
@container (inline-size < 30em) { .pd-skystrip__legend li:nth-child(n+3) { display: none; } }
@media (forced-colors: active) { .pd-skystrip__accent { stroke: Highlight; } .pd-skystrip__key--accent { border-color: Highlight; } }

/* ══ StarField (.pd-starfield) ═════════════════════════════════════════════════════════════════ */
.pd-starfield { container-type: inline-size; position: relative; display: block; margin: 0; overflow: hidden; isolation: isolate; font-size: 1rem; }
.pd-starfield__sky, .pd-starfield__real { position: absolute; inset: 0; z-index: 0; display: block; inline-size: 100%; block-size: 100%; pointer-events: none; }
.pd-starfield__real canvas { display: block; }
.pd-starfield__figure { fill: currentColor; }
.pd-starfield__label { fill: currentColor; fill-opacity: var(--opacity-muted, .72); font-family: var(--font-mono); letter-spacing: .16em; text-transform: uppercase; }
.pd-starfield__content { position: relative; z-index: var(--z-raised); }
.pd-starfield__caption { position: absolute; z-index: var(--z-raised); inset-inline: var(--space-5); inset-block-end: var(--space-4); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-4); margin: 0; font: var(--font-meta); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pd-starfield--panel { inline-size: 100%; aspect-ratio: 16 / 9; min-block-size: 15rem; } /* 16:9, but never shorter than a phone-width 4:3 (a container can't query its own size) */
/* a scrim of the sky ground under the caption, so mono text never sits on a bright star or a line */
.pd-starfield--panel::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 7rem; z-index: 0; pointer-events: none; background: linear-gradient(to top, var(--_pd-sky-bg, var(--sky-900)) 45%, transparent); }
.pd-starfield--band { block-size: var(--pd-starfield-band, 7.5rem); }
.pd-starfield--band .pd-starfield__caption { inset-block: 0; align-items: center; }
@container (inline-size < 30em) {
  .pd-starfield__figure { display: none; } /* the asterism needs room: at phone width it would cross the title */
  .pd-starfield__caption { inset-inline: var(--space-4); inset-block-end: var(--space-3); }
}
@media print {
  .pd-starfield, .pd-hero:where(.pd-sky) { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* ══ Hero (.pd-hero) ═══════════════════════════════════════════════════════════════════════════
   Default: the Swiss editorial home hero on paper. --cosmos: the same grid over a live sky (compose .pd-sky). */
.pd-hero { container-type: inline-size; position: relative; isolation: isolate; color: var(--text); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-hero__inner { position: relative; z-index: var(--z-raised); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6) var(--gutter); padding-block: var(--space-5) var(--space-7); }
.pd-hero__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; gap: var(--space-4) var(--space-6); }
.pd-hero__meta { display: grid; grid-template-columns: max-content max-content; gap: var(--space-1) var(--space-4); margin: 0; font: var(--font-meta); letter-spacing: var(--track-mono); font-variant-numeric: tabular-nums; color: var(--text); }
.pd-hero__meta dt { text-transform: uppercase; color: var(--text-subtle); }
.pd-hero__meta dd { margin: 0; }
.pd-hero__title { display: grid; gap: var(--space-4); max-inline-size: 52rem; }
.pd-hero__name { margin: 0; font: 500 clamp(var(--fs-display-m, 3rem), 11.5cqi, var(--fs-display-xl, 6rem))/.92 var(--font-display); letter-spacing: var(--track-display); color: var(--text); text-wrap: balance; }
.pd-hero__nick { display: flex; align-items: baseline; gap: var(--space-3); margin: 0; font: italic 400 var(--fs-title, 1.5rem)/1.1 var(--font-display); color: var(--text); }
.pd-hero__nick::before { content: ""; align-self: center; inline-size: 2.25em; border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-hero__bindu { display: inline-block; inline-size: .2em; block-size: .2em; margin-inline: .08em .07em; vertical-align: .16em; border-radius: var(--radius-pill); background: var(--bindu-on-paper); box-shadow: inset 0 0 0 max(1px, .02em) var(--saffron-700); }
.pd-sky .pd-hero__bindu { box-shadow: none; }
.pd-hero__deva { font: 400 .8em/1.2 var(--font-deva); font-style: normal; color: var(--text-muted); }
/* Sign-led title (default): the HamsaMark wordmark at hero size, byline हंस · name beneath. Same as HomePage.
   Sized to the hero container (cqi), not the viewport, so it never overruns a narrower column. */
.pd-hero__sign { margin: 0; font-size: clamp(calc(var(--fs-display-l, 4rem) * .42), 6.5cqi, calc(var(--fs-display-xl, 6rem) * .62)); } /* the portrait + "Pandox" signature (pd-logo__lock): name = 2em, portrait = 2.6em */
.pd-hero__sign .pd-logo__word { font-weight: 500; letter-spacing: -.02em; }
.pd-hero__sign .pd-logo__sub { font-size: var(--fs-body-s, 1rem); white-space: normal; }
.pd-hero__tagline { margin: 0; max-inline-size: 30em; font: italic 400 var(--fs-lede, 1.5rem)/1.35 var(--font-text); color: var(--text-muted); text-wrap: pretty; }
.pd-hero__dateline { margin: 0; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pd-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.pd-hero__index { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--gutter); margin: 0; padding: 0; list-style: none; border-block-end: var(--hairline) solid var(--rule); }
.pd-hero__index li { border-block-start: var(--hairline) solid var(--rule); min-inline-size: 0; }
.pd-hero__link { display: flex; align-items: baseline; gap: var(--space-3); min-block-size: var(--target-min, 44px); padding-block: var(--space-3); color: var(--text); text-decoration: none; font: 400 var(--fs-body, 1.1875rem)/1.25 var(--font-text); }
.pd-hero__num { flex: none; min-inline-size: 2ch; }
.pd-hero__label { text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: .5em; transition: text-decoration-color var(--dur-2, 180ms) var(--ease-standard); }
@media (hover: hover) { :where(.pd-hero__link:hover) .pd-hero__label { text-decoration-color: currentColor; } }
.pd-hero__link:where([aria-current]) .pd-hero__label { text-decoration-color: currentColor; }
.pd-hero__link:focus-visible { outline-offset: calc(-1 * var(--focus-width, 2px)); }

@container (inline-size >= 26em) {
  .pd-hero__index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (inline-size >= 48em) {
  .pd-hero__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: var(--space-7); padding-block: var(--space-6) var(--space-8); }
  .pd-hero__top, .pd-hero__nav { grid-column: 1 / -1; }
  .pd-hero__title { grid-column: 1 / span 10; }
}
@container (inline-size >= 60em) {
  .pd-hero__index { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@container (inline-size >= 64em) {
  .pd-hero__title { grid-column: 1 / span 9; }
}

/* --cosmos: the grid over a live sky. Compose with .pd-sky so tokens remap; the canvas is pd-hero__sky. */
.pd-hero--cosmos { min-block-size: 36rem; border-block-start: 0; }
.pd-hero--cosmos .pd-hero__inner { min-block-size: inherit; grid-template-rows: auto 1fr auto; padding-inline: var(--space-5); }
.pd-hero__sky { position: absolute; inset: 0; z-index: 0; overflow: hidden;
  /* calm zone: an ellipse of near-empty ground behind the name and tagline, and a fade under the index */
  --_pd-hero-calm: color-mix(in srgb, var(--sky-900) 16%, transparent);
  -webkit-mask-image: linear-gradient(to top, transparent 12%, var(--sky-900) 45%), radial-gradient(ellipse 62% 36% at 38% 58%, var(--_pd-hero-calm) 55%, var(--sky-900) 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to top, transparent 12%, var(--sky-900) 45%), radial-gradient(ellipse 62% 36% at 38% 58%, var(--_pd-hero-calm) 55%, var(--sky-900) 100%);
  mask-composite: intersect; }
.pd-hero__sky:dir(rtl) { -webkit-mask-image: linear-gradient(to top, transparent 12%, var(--sky-900) 45%), radial-gradient(ellipse 62% 36% at 62% 58%, var(--_pd-hero-calm) 55%, var(--sky-900) 100%); mask-image: linear-gradient(to top, transparent 12%, var(--sky-900) 45%), radial-gradient(ellipse 62% 36% at 62% 58%, var(--_pd-hero-calm) 55%, var(--sky-900) 100%); }
@container (inline-size < 30em) {
  .pd-hero__sky { -webkit-mask-image: linear-gradient(to top, transparent 12%, var(--_pd-hero-calm) 40%, var(--_pd-hero-calm) 62%, var(--sky-900) 85%); mask-image: linear-gradient(to top, transparent 12%, var(--_pd-hero-calm) 40%, var(--_pd-hero-calm) 62%, var(--sky-900) 85%); }
}
.pd-hero__sky canvas { display: block; }
.pd-hero--cosmos .pd-hero__title { align-self: end; }
@container (inline-size >= 48em) {
  .pd-hero--cosmos .pd-hero__inner { padding-inline: var(--space-7); }
  .pd-hero--cosmos .pd-hero__title { grid-row: 2; }
}
@media (forced-colors: active) {
  .pd-hero__bindu { forced-color-adjust: none; background: CanvasText; box-shadow: none; }
  .pd-hero__label { text-decoration-color: transparent; }
  .pd-hero__link:where([aria-current]) .pd-hero__label { text-decoration-color: LinkText; }
}
}

/* ── part: sound.css ── */
/* ── PART: sound ─────────────────────────────────────────────────────────────
   Pandox DS v2 · package "sound" · 06 Sound: beats, music, listening.
   .pd-wave   Waveform — seeded SVG bars, played / unplayed, hover marker, mini variant
   .pd-player TrackPlayer — play/pause, scrubber (rail or waveform), time, BPM/key, cover slot, volume, download/share
   .pd-tracks Tracklist — numbered tracks with BPM, key, length, tags; the current row
   .pd-listen ListeningLog — what I am listening to; the "now playing" strip for the Now page
   State is always word + shape + tone, so Ink and Void read without hue. The saffron bindu is the
   playhead: one per view. Motion is optional and stops under reduced motion. */
@layer components.site {

/* ══ Waveform ══════════════════════════════════════════════════════════════ */
.pd-wave { --p: 0; --h: 0; --wave-h: 4rem; position: relative; display: block; block-size: var(--wave-h); min-block-size: var(--target-min); color: var(--border-control); touch-action: none; cursor: pointer; user-select: none; -webkit-user-select: none; }
.pd-wave__base, .pd-wave__played { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; display: block; overflow: visible; pointer-events: none; }
.pd-wave__base { fill: var(--border-control); }
.pd-wave__played { fill: var(--link); clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0); }
/* Playhead: a hairline in ink and the bindu on the centre line */
.pd-wave__head { position: absolute; inset-block: 0; inset-inline-start: calc(var(--p) * 100%); inline-size: 0; border-inline-start: var(--hairline) solid var(--rule-strong); pointer-events: none; }
.pd-wave__head::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: -0.4375rem; inline-size: 0.875rem; block-size: 0.875rem; margin-block-start: -0.4375rem; border-radius: var(--radius-pill); background: var(--bindu-on-paper); box-shadow: inset 0 0 0 1px var(--saffron-700), 0 0 0 2px var(--surface); }
/* Hover marker: a dashed rule with the time above it */
.pd-wave__hover { position: absolute; inset-block: -0.25rem; inset-inline-start: calc(var(--h) * 100%); inline-size: 0; border-inline-start: var(--hairline) dashed var(--text-muted); opacity: 0; pointer-events: none; transition: opacity var(--dur-1) var(--ease-standard); }
.pd-wave__tip { position: absolute; inset-block-end: 100%; inset-inline-start: 0; translate: -50% -0.25rem; padding: 0.15em 0.45em; font: var(--font-meta); font-weight: 500; line-height: 1.3; letter-spacing: var(--track-mono); font-feature-settings: "tnum"; white-space: nowrap; color: var(--surface); background: var(--text); border-radius: var(--radius-1); }
.pd-wave:where(.is-hover) .pd-wave__hover { opacity: 1; }
.pd-wave:focus-visible { outline-offset: var(--focus-offset); }
/* Scale under a full waveform: start, quarter marks, end — mono */
.pd-wave__scale { display: flex; justify-content: space-between; margin-block-start: var(--space-2); padding-block-start: var(--space-1); border-block-start: var(--hairline) solid var(--rule); font: var(--font-meta); line-height: 1.3; letter-spacing: var(--track-mono); font-feature-settings: "tnum"; color: var(--text-subtle); }
/* Baseline variant: bars rise from a ruled floor instead of mirroring */
.pd-wave--baseline { border-block-end: var(--hairline) solid var(--ink-900); }
.pd-wave--baseline .pd-wave__head::after { inset-block-start: auto; inset-block-end: -0.4375rem; margin-block-start: 0; }
/* Mini: row-height, decorative or a slider in tight places */
.pd-wave--mini { --wave-h: 1.75rem; min-block-size: var(--wave-h); }
.pd-wave--mini .pd-wave__head { border-inline-start-color: transparent; }
.pd-wave--mini .pd-wave__head::after { inline-size: 0.5rem; block-size: 0.5rem; inset-inline-start: -0.25rem; margin-block-start: -0.25rem; box-shadow: 0 0 0 1.5px var(--surface); }
.pd-wave--mini .pd-wave__hover { display: none; }
/* A mini used as a slider keeps a 44px hit area around its 28px bars */
.pd-wave--mini:where([role="slider"])::after { content: ""; position: absolute; inset-inline: 0; inset-block: calc((var(--target-min) - var(--wave-h)) / -2); }
.pd-wave:where([aria-hidden="true"]) { cursor: default; }
.pd-wave--mini:where([aria-hidden="true"]) .pd-wave__head { display: none; }
/* Loading: a hairline centre rule, no bars yet */
.pd-wave:where([data-state="loading"]) .pd-wave__base, .pd-wave:where([data-state="loading"]) .pd-wave__played, .pd-wave:where([data-state="loading"]) .pd-wave__head { visibility: hidden; }
.pd-wave:where([data-state="loading"])::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 50%; border-block-start: var(--hairline) dashed var(--border-control); }

/* ══ TrackPlayer ═══════════════════════════════════════════════════════════ */
.pd-player { --pl-cover: 9rem; container: pd-player / inline-size; display: block; padding-block: var(--space-5); border-block-start: var(--hairline) solid var(--rule-strong); border-block-end: var(--hairline) solid var(--rule); font-family: var(--font-sans); color: var(--text); background: var(--surface); }
.pd-player__in { display: grid; grid-template-columns: var(--pl-cover) minmax(0, 1fr); grid-template-areas: "cover head" "cover transport" "cover tools"; grid-template-rows: auto auto 1fr; column-gap: var(--space-6); row-gap: var(--space-4); }
.pd-player__in > * { min-inline-size: 0; }
.pd-player audio { display: none; }

/* Cover slot: an abstract record until the cover file exists */
.pd-player__cover { grid-area: cover; position: relative; align-self: start; aspect-ratio: 1; margin: 0; background: var(--surface-sunken); border: var(--hairline) solid var(--rule); overflow: hidden; }
.pd-player__cover img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.pd-player__disc { display: block; inline-size: 100%; block-size: 100%; fill: none; stroke: var(--border-control); stroke-width: 0.6; }
.pd-player__disc .pd-player__arc { stroke: var(--link); stroke-width: 2.4; transform-origin: 50px 50px; }
.pd-player__disc .pd-player__hole { fill: var(--text); stroke: none; }
.pd-player__cover-label { position: absolute; inset-inline-start: var(--space-2); inset-block-end: var(--space-2); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); background: var(--surface-sunken); padding: 0.1em 0.3em; }

.pd-player__head { grid-area: head; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-4); row-gap: var(--space-1); align-items: start; }
.pd-player__head > .pd-kicker { margin: 0; grid-column: 1; }
.pd-player__title { grid-column: 1; margin: 0; font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem); font-weight: 500; line-height: 1.02; letter-spacing: -0.01em; color: var(--text); text-wrap: balance; }
.pd-player__title em { font-style: italic; }
.pd-player__meta { grid-column: 1; display: flex; flex-wrap: wrap; gap: 0 var(--space-4); margin: var(--space-1) 0 0; padding: 0; list-style: none; font: var(--font-meta); letter-spacing: var(--track-mono); font-feature-settings: "tnum"; color: var(--text-muted); }
.pd-player__meta abbr { text-decoration: none; color: var(--text-subtle); }
.pd-player__meta li + li::before { content: "·"; margin-inline-end: var(--space-4); color: var(--text-subtle); }

/* Status: the canonical Status atom (span/p.pd-status.pd-status--boxed, role="status"); the player only places it.
   The modifier follows data-state: idle --ring (none), paused --half, buffering --dashed, playing --full, error --crossed. */
.pd-player__status { grid-column: 2; grid-row: 1 / span 2; justify-self: end; align-self: start; margin: 0; }

/* Transport: play button + scrubber */
.pd-player__transport { grid-area: transport; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--space-5); }
.pd-player__play { position: relative; display: inline-grid; place-items: center; inline-size: 3.5rem; block-size: 3.5rem; padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--selected-bg); color: var(--on-jade); cursor: pointer; transition: background-color var(--dur-2) var(--ease-standard); }
@media (hover: hover) { .pd-player__play:hover { background: var(--jade-500); } }
.pd-player__play:focus-visible { outline-offset: var(--focus-offset); }
.pd-player__play svg { grid-area: 1 / 1; inline-size: 1.25rem; block-size: 1.25rem; fill: currentColor; }
.pd-player__play .pd-player__i-pause { display: none; }
.pd-player__play:where([aria-pressed="true"]) .pd-player__i-play { display: none; }
.pd-player__play:where([aria-pressed="true"]) .pd-player__i-pause { display: block; }
/* Buffering ring around the button: dashed, turning slowly */
.pd-player__play::after { content: ""; position: absolute; inset: -5px; border-radius: var(--radius-pill); border: var(--hairline) dashed var(--link); opacity: 0; }
.pd-player:where([data-state="buffering"]) .pd-player__play::after { opacity: 1; }

.pd-player__scrub { --p: 0; position: relative; display: block; block-size: var(--target-min); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.pd-player__scrub:focus-visible { outline-offset: var(--focus-offset); }
.pd-player__rail { position: absolute; inset-inline: 0; inset-block-start: 50%; block-size: 2px; margin-block-start: -1px; background: var(--border-control); }
.pd-player__fill { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: calc(var(--p) * 100%); background: var(--selected-bg); }
.pd-player__thumb { position: absolute; inset-block-start: 50%; inset-inline-start: calc(var(--p) * 100%); inline-size: 0.875rem; block-size: 0.875rem; translate: -50% -50%; border-radius: var(--radius-pill); background: var(--bindu-on-paper); box-shadow: inset 0 0 0 1px var(--saffron-700), 0 0 0 2px var(--surface); transition: scale var(--dur-1) var(--ease-standard); }
.pd-player__scrub:where(:hover, :focus-visible, .is-drag) .pd-player__thumb { scale: 1.25; }
.pd-player__scrub.pd-wave { block-size: var(--wave-h); }
.pd-player:where([data-state="error"]) .pd-player__rail { background: none; border-block-start: 2px dashed var(--border-control); }
.pd-player:where([data-state="error"]) .pd-player__fill, .pd-player:where([data-state="error"]) .pd-player__thumb { visibility: hidden; }

/* Tools row: time on the left, volume and actions on the right */
.pd-player__tools { grid-area: tools; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding-inline-start: calc(3.5rem + var(--space-5)); }
.pd-player__time { margin: 0; font: var(--font-meta); font-size: var(--fs-caption); letter-spacing: var(--track-mono); font-feature-settings: "tnum"; color: var(--text-subtle); white-space: nowrap; }
.pd-player__cur { color: var(--text); }
.pd-player__actions { display: flex; align-items: center; gap: var(--space-1); }
.pd-player__vol { --p: 0.8; position: relative; inline-size: 5.5rem; block-size: var(--target-min); margin-inline: var(--space-1) var(--space-3); cursor: pointer; touch-action: none; }
.pd-player__vol:focus-visible { outline-offset: var(--focus-offset); }
.pd-player__vol .pd-player__rail { block-size: 1px; margin-block-start: 0; background: var(--border-control); }
.pd-player__vol .pd-player__fill { background: var(--text); }
.pd-player__vol .pd-player__knob { position: absolute; inset-block-start: 50%; inset-inline-start: calc(var(--p) * 100%); inline-size: 0.5rem; block-size: 0.875rem; translate: -50% -50%; background: var(--text); border-radius: var(--radius-1); }
/* Mute / download / share are .pd-btn.pd-btn--icon (Button); .pd-player__btn is only the icon-swap hook. */
.pd-player__btn .pd-player__i-muted { display: none; }
.pd-player__btn:where([aria-pressed="true"]) .pd-player__i-vol { display: none; }
.pd-player__btn:where([aria-pressed="true"]) .pd-player__i-muted { display: block; }

/* Error message */
.pd-player__msg { grid-column: 2 / -1; display: none; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); margin: 0; padding-inline-start: calc(3.5rem + var(--space-5)); font: var(--font-label); font-weight: 400; line-height: 1.45; color: var(--sindoor-600); }
.pd-player__msg strong { font-weight: 600; }
/* Retry is .pd-btn.pd-btn--text (Button) */
.pd-player__retry.pd-btn { margin-inline-start: var(--space-1); vertical-align: baseline; }
.pd-player:where([data-state="error"]) .pd-player__msg { display: block; }
.pd-player:where([data-state="error"]) .pd-player__time { color: var(--text-subtle); }

.pd-player__demo { margin: var(--space-2) 0 0; font: var(--font-meta); color: var(--text-subtle); }

/* Compact: one row, for embedding a beat in an essay */
.pd-player--compact { padding-block: var(--space-3); }
.pd-player--compact .pd-player__in { grid-template-columns: auto minmax(0, 1fr) minmax(8rem, 1.4fr) auto; grid-template-areas: "transport head scrub tools"; grid-template-rows: auto; align-items: center; column-gap: var(--space-4); row-gap: var(--space-2); }
.pd-player--compact .pd-player__cover { display: none; }
.pd-player--compact .pd-player__transport { display: contents; }
.pd-player--compact .pd-player__play { grid-area: transport; inline-size: var(--control-block); block-size: var(--control-block); }
.pd-player--compact .pd-player__play svg { inline-size: 1rem; block-size: 1rem; }
.pd-player--compact .pd-player__scrub { grid-area: scrub; }
.pd-player--compact .pd-player__head { grid-template-columns: minmax(0, 1fr); }
.pd-player--compact .pd-player__title { font-family: var(--font-text); font-size: 1.125rem; font-weight: 500; line-height: 1.2; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-player--compact .pd-player__meta { margin: 0; font-size: var(--fs-meta); }
.pd-player--compact .pd-player__status { grid-column: 1; grid-row: auto; justify-self: start; position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pd-player--compact .pd-player__tools { padding: 0; flex-wrap: nowrap; }
.pd-player--compact .pd-player__msg { grid-column: 1 / -1; padding-inline-start: calc(var(--control-block) + var(--space-4)); }
.pd-player--compact:where([data-state="buffering"], [data-state="error"]) .pd-player__status { position: static; inline-size: auto; block-size: auto; overflow: visible; clip-path: none; }

/* Narrow container: cover beside the title, transport full width */
@container pd-player (max-width: 34rem) {
  .pd-player__in { grid-template-columns: 4.5rem minmax(0, 1fr); grid-template-areas: "cover head" "transport transport" "tools tools"; grid-template-rows: auto; column-gap: var(--space-4);
  }
  .pd-player__msg { grid-column: 1 / -1; }
  .pd-player__cover-label { display: none; }
  .pd-player__head { grid-template-columns: minmax(0, 1fr); }
  .pd-player__status { grid-column: 1; grid-row: auto; justify-self: start; margin-block-start: var(--space-2); }
  .pd-player__title { font-size: 1.5rem; }
  .pd-player__tools, .pd-player__msg { padding-inline-start: 0; }
  .pd-player--compact .pd-player__in { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "transport head tools" "scrub scrub scrub"; }
  .pd-player--compact .pd-player__msg { padding-inline-start: 0; }
  .pd-player--compact .pd-player__actions { display: none; }
}
@container pd-player (max-width: 24rem) {
  .pd-player__vol { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .pd-player:where([data-state="playing"]) .pd-player__arc { animation: pd-player-turn 9s linear infinite; }
  .pd-player:where([data-state="buffering"]) .pd-player__play::after { animation: pd-player-turn 4s linear infinite; }
  .pd-player:where([data-state="buffering"]) .pd-player__thumb, .pd-player:where([data-state="buffering"]) .pd-wave__head::after { animation: pd-sound-pulse 1.2s var(--ease-in-out) infinite; }
}
@keyframes pd-player-turn { to { rotate: 1turn; } }
@keyframes pd-sound-pulse { 0%, 100% { box-shadow: inset 0 0 0 1px var(--saffron-700), 0 0 0 2px var(--surface), 0 0 0 2px var(--accent-fill); } 50% { box-shadow: inset 0 0 0 1px var(--saffron-700), 0 0 0 2px var(--surface), 0 0 0 7px transparent; } }
@media (forced-colors: active) {
  .pd-player__thumb, .pd-wave__head::after, .pd-player__fill, .pd-player__vol .pd-player__knob { forced-color-adjust: none; background: Highlight; }
  .pd-player__rail { background: CanvasText; }
  .pd-player__play { border: 2px solid ButtonText; }
  .pd-wave__base { fill: GrayText; } .pd-wave__played { fill: Highlight; }
}
}

@layer components.site {
/* ══ Tracklist ═════════════════════════════════════════════════════════════ */
.pd-tracks { container: pd-tracks / inline-size; font-family: var(--font-sans); color: var(--text); }
.pd-tracks__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-2) var(--space-6); padding-block-end: var(--space-4); }
.pd-tracks__head .pd-kicker { margin: 0 0 var(--space-2); }
.pd-tracks__name { margin: 0; font-family: var(--font-display); font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); font-weight: 500; line-height: 1; letter-spacing: -0.01em; }
.pd-tracks__sum { margin: 0; font: var(--font-meta); letter-spacing: var(--track-mono); font-feature-settings: "tnum"; color: var(--text-muted); }
.pd-tracks__cols, .pd-tracks__row { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) 4.5rem 5.5rem 4rem; column-gap: 1rem; align-items: center; }
.pd-tracks__cols { padding-block: var(--space-2); border-block: var(--hairline) solid var(--rule-strong); border-block-end-color: var(--rule); font: var(--font-kicker); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-subtle); }
.pd-tracks__cols > span:first-child { padding-inline-start: 0.75rem; }
.pd-tracks__cols > span:nth-child(n+3), .pd-tracks__bpm, .pd-tracks__key, .pd-tracks__len { text-align: end; }
.pd-tracks__list { margin: 0; padding: 0; list-style: none; }
.pd-tracks__row { position: relative; min-block-size: 3.75rem; padding-block: var(--space-2); border-block-end: var(--hairline) solid var(--rule); }
@media (hover: hover) { .pd-tracks__row:hover { background: var(--surface-sunken); } }
.pd-tracks__info { display: contents; }
.pd-tracks__bpm, .pd-tracks__key, .pd-tracks__len { font: var(--font-meta); font-size: var(--fs-caption); line-height: 1.3; letter-spacing: var(--track-mono); font-feature-settings: "tnum"; color: var(--text-muted); white-space: nowrap; }
.pd-tracks__len { color: var(--text); }
/* Number cell is the play button: number at rest, play icon on hover / focus, bars when current */
.pd-tracks__play { position: relative; display: inline-grid; place-items: center; inline-size: var(--target-min); block-size: var(--target-min); padding: 0; border: var(--hairline) solid transparent; border-radius: var(--radius-pill); background: transparent; color: var(--text); cursor: pointer; font: 400 0.8125rem/1 var(--font-mono); font-feature-settings: "tnum"; }
.pd-tracks__play:focus-visible { outline-offset: 0; }
.pd-tracks__play > * { grid-area: 1 / 1; }
.pd-tracks__n { color: var(--text-subtle); }
.pd-tracks__ico { inline-size: 1rem; block-size: 1rem; fill: currentColor; visibility: hidden; }
.pd-tracks__i-pause { display: none; }
@media (hover: hover) { :where(.pd-tracks__row:hover) .pd-tracks__n { visibility: hidden; } :where(.pd-tracks__row:hover) .pd-tracks__i-play { visibility: visible; } }
:where(.pd-tracks__play:focus-visible) .pd-tracks__n { visibility: hidden; }
:where(.pd-tracks__play:focus-visible) .pd-tracks__i-play { visibility: visible; }
.pd-tracks__play:where([aria-disabled="true"]) { cursor: not-allowed; }
.pd-tracks__main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); min-inline-size: 0; }
.pd-tracks__title { font-family: var(--font-text); font-size: 1.125rem; line-height: 1.25; color: var(--text); text-decoration: none; }
a.pd-tracks__title { display: inline-block; padding-block: 0.75rem; margin-block: -0.75rem; background: linear-gradient(currentColor 0 0) 0 100% / 0 var(--hairline) no-repeat; background-origin: content-box; background-clip: content-box; transition: background-size var(--dur-2) var(--ease-standard); }
@media (hover: hover) { a.pd-tracks__title:hover { background-size: 100% var(--hairline); } }
a.pd-tracks__title:focus-visible { outline-offset: var(--focus-offset); }
.pd-tracks__tags { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); }
.pd-tracks__tags .pd-tag { font-size: var(--fs-meta); }
.pd-tracks__note { flex-basis: 100%; margin: 0; font: 400 0.8125rem/1.4 var(--font-sans); color: var(--text-muted); }
/* Equaliser mark: three bars; moves only while playing and only without reduced motion */
.pd-tracks__eq { display: none; inline-size: 0.875rem; block-size: 0.875rem; align-items: end; justify-content: space-between; }
.pd-tracks__eq i { inline-size: 2px; block-size: 100%; background: currentColor; transform-origin: 50% 100%; }
.pd-tracks__eq i:nth-child(1) { scale: 1 0.55; } .pd-tracks__eq i:nth-child(2) { scale: 1 1; } .pd-tracks__eq i:nth-child(3) { scale: 1 0.35; }
/* Current row */
.pd-tracks__row:where([aria-current="true"]) { background: var(--jade-100); border-block-end-color: transparent; }
.pd-tracks__row:where([aria-current="true"]) .pd-tracks__title { color: var(--link); font-weight: 500; }
.pd-tracks__row:where([aria-current="true"]) .pd-tracks__play { color: var(--link); border-color: currentColor; }
.pd-tracks__row:where([aria-current="true"]) .pd-tracks__n { display: none; }
.pd-tracks__row:where([aria-current="true"]) .pd-tracks__eq { display: flex; }
/* Current but paused: the play triangle shows instead of the bars */
.pd-tracks__row:where([aria-current="true"]) .pd-tracks__play:where([aria-pressed="false"]) .pd-tracks__eq { display: none; }
.pd-tracks__row:where([aria-current="true"]) .pd-tracks__play:where([aria-pressed="false"]) .pd-tracks__i-play { visibility: visible; }
.pd-tracks__play:where([aria-pressed="true"]) .pd-tracks__i-play { display: none; }
.pd-tracks__play:where([aria-pressed="true"]) .pd-tracks__i-pause { display: block; }
@media (hover: hover) { :where(.pd-tracks__row:hover) .pd-tracks__eq { visibility: hidden; } :where(.pd-tracks__row:hover) .pd-tracks__i-pause { visibility: visible; } }
:where(.pd-tracks__play:focus-visible) .pd-tracks__eq { visibility: hidden; }
:where(.pd-tracks__play:focus-visible) .pd-tracks__i-pause { visibility: visible; }
/* Progress along the foot of the current row, with the bindu at the playhead */
.pd-tracks__prog { --p: 0; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 2px; background: var(--border-control); pointer-events: none; }
.pd-tracks__prog::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: calc(var(--p) * 100%); background: var(--selected-bg); }
.pd-tracks__prog::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: calc(var(--p) * 100%); inline-size: 0.625rem; block-size: 0.625rem; translate: -50% -50%; border-radius: var(--radius-pill); background: var(--bindu-on-paper); box-shadow: inset 0 0 0 1px var(--saffron-700), 0 0 0 2px var(--jade-100); }
/* Unavailable */
.pd-tracks__row:where(.is-unavailable) :where(.pd-tracks__title, .pd-tracks__len, .pd-tracks__bpm, .pd-tracks__key) { color: var(--text-subtle); }
.pd-tracks__soon { font: var(--font-meta); font-weight: 500; line-height: 1.2; letter-spacing: var(--track-mono); color: var(--text-muted); padding: 0.25em 0.5em; border: var(--hairline) dashed var(--border-control); border-radius: var(--radius-1); }
.pd-tracks__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-4); margin: 0; padding-block: var(--space-3); font: 400 0.75rem/1.45 var(--font-mono); color: var(--text-subtle); }
.pd-tracks__foot a { display: inline-flex; align-items: center; min-block-size: var(--target-min); margin-block: -0.75rem; color: var(--link); text-underline-offset: 0.2em; }
.pd-tracks__foot a:focus-visible { outline-offset: var(--focus-offset); }
@container pd-tracks (max-width: 36rem) {
  .pd-tracks__cols { display: none; }
  .pd-tracks__list { border-block-start: var(--hairline) solid var(--rule-strong); }
  .pd-tracks__row { grid-template-columns: var(--target-min) minmax(0, 1fr) auto; grid-template-areas: "play main len" "play info info"; column-gap: var(--space-3); row-gap: 0.15rem; align-items: start; padding-block: var(--space-3); }
  .pd-tracks__play { grid-area: play; align-self: center; }
  .pd-tracks__main { grid-area: main; }
  .pd-tracks__len { grid-area: len; padding-block-start: 0.2rem; }
  .pd-tracks__info { grid-area: info; display: flex; gap: 0.5em; }
  .pd-tracks__bpm, .pd-tracks__key { font-size: 0.75rem; color: var(--text-muted); text-align: start; }
  .pd-tracks__bpm::after { content: " BPM"; color: var(--text-subtle); }
  .pd-tracks__key::before { content: "· "; color: var(--text-subtle); }
}
/* Compact: no tags or notes, tighter rows — for sidebars and the Now page */
.pd-tracks--compact .pd-tracks__row { min-block-size: var(--target-min); padding-block: var(--space-1); }
.pd-tracks--compact .pd-tracks__title { font-size: 1rem; }
.pd-tracks--compact .pd-tracks__tags, .pd-tracks--compact .pd-tracks__note { display: none; }

/* ══ ListeningLog ══════════════════════════════════════════════════════════ */
.pd-listen { container: pd-listen / inline-size; font-family: var(--font-sans); color: var(--ink-900); }
.pd-listen__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-2) var(--space-6); padding-block-end: var(--space-4); border-block-end: var(--hairline) solid var(--ink-900); }
.pd-listen__head .pd-kicker { margin: 0 0 var(--space-2); }
.pd-listen__title { margin: 0; font-family: var(--font-display); font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); font-weight: 500; line-height: 1; letter-spacing: -0.01em; }
.pd-listen__title em { font-style: italic; }
.pd-listen__updated { margin: 0; font: 400 0.75rem/1.45 var(--font-mono); color: var(--ink-500); }
.pd-listen__list { margin: 0; padding: 0; list-style: none; }
.pd-listen__item { display: grid; grid-template-columns: 6.5rem 6rem minmax(0, 1fr); grid-template-areas: "date sleeve body"; column-gap: var(--space-5); padding-block: var(--space-5); border-block-end: var(--hairline) solid var(--line-100); }
.pd-listen__date { grid-area: date; margin: 0; padding-block-start: 0.2rem; font: var(--font-meta); letter-spacing: var(--track-mono); font-feature-settings: "tnum"; color: var(--ink-700); }
.pd-listen__sleeve { grid-area: sleeve; position: relative; display: block; aspect-ratio: 1; margin: 0; background: var(--paper-100); border: var(--hairline) solid var(--line-100); overflow: hidden; }
.pd-listen__sleeve img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.pd-listen__sleeve svg { display: block; inline-size: 100%; block-size: 100%; fill: none; stroke: var(--ink-700); stroke-width: 1; }
.pd-listen__sleeve .pd-listen__fill { fill: var(--jade-700); stroke: none; }
.pd-listen__sleeve .pd-listen__ink { fill: var(--ink-900); stroke: none; }
.pd-listen__body { grid-area: body; min-inline-size: 0; max-inline-size: var(--measure); }
.pd-listen__kind { margin: 0 0 var(--space-1); font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-700); }
.pd-listen__kind span { font-family: var(--font-mono); font-weight: 400; letter-spacing: var(--track-mono); text-transform: none; color: var(--ink-500); }
.pd-listen__name { margin: 0; font-family: var(--font-text); font-size: 1.375rem; font-weight: 500; line-height: 1.2; }
.pd-listen__name cite { font-style: italic; }
.pd-listen__artist { margin: 0.1rem 0 0; font-family: var(--font-text); font-size: 1.0625rem; line-height: 1.35; color: var(--ink-700); }
.pd-listen__note { margin: var(--space-2) 0 0; font-family: var(--font-text); font-size: 1.0625rem; line-height: 1.5; color: var(--ink-900); }
.pd-listen__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: var(--space-3) 0 0; }
.pd-listen__mode { display: inline-flex; align-items: center; gap: 0.45em; font: var(--font-meta); line-height: 1.2; letter-spacing: var(--track-mono); color: var(--ink-700); }
.pd-listen__mode::before { content: ""; inline-size: 0.625rem; block-size: 0.625rem; box-sizing: border-box; border-radius: var(--radius-pill); border: 1.5px solid currentColor; }
.pd-listen__mode--repeat::before { background: currentColor; }
.pd-listen__mode--return::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.pd-listen__review { display: inline-flex; align-items: center; gap: 0.5em; min-block-size: var(--target-min); font: var(--font-label); color: var(--jade-700); text-decoration: none; }
.pd-listen__review span { border-block-end: var(--hairline) solid currentColor; }
.pd-listen__review svg { inline-size: 0.875rem; block-size: 0.875rem; fill: none; stroke: currentColor; stroke-width: 1.5; transition: translate var(--dur-2) var(--ease-standard); }
@media (hover: hover) { .pd-listen__review:hover svg { translate: 0.2em 0; } }
.pd-listen__review:focus-visible { outline-offset: var(--focus-offset); }
.pd-listen__more { display: inline-flex; align-items: center; min-block-size: var(--target-min); font: var(--font-label); color: var(--jade-700); text-underline-offset: 0.25em; }
.pd-listen__more:focus-visible { outline-offset: var(--focus-offset); }
@container pd-listen (max-width: 36rem) {
  .pd-listen__item { grid-template-columns: 4.5rem minmax(0, 1fr); grid-template-areas: "sleeve date" "sleeve body"; column-gap: var(--space-4); row-gap: var(--space-1); }
  .pd-listen__date { padding: 0; }
  .pd-listen__sleeve { align-self: start; }
  .pd-listen__name { font-size: 1.25rem; }
}
/* Grid: a shelf of sleeves, for the /sound/listening index */
.pd-listen--grid .pd-listen__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: var(--space-6) var(--space-5); padding-block-start: var(--space-5); }
.pd-listen--grid .pd-listen__item { align-content: start; grid-template-columns: minmax(0, 1fr); grid-template-areas: "sleeve" "date" "body"; row-gap: var(--space-2); padding: 0; border: 0; }
.pd-listen--grid .pd-listen__date { padding-block-start: var(--space-1); }
.pd-listen--grid .pd-listen__note { font-size: 1rem; }

/* Now-playing strip: one row for the Now page */
.pd-listen--strip { padding: 0; }
.pd-listen__strip { display: grid; grid-template-columns: auto 3rem minmax(0, 1fr) minmax(5rem, 9rem) auto; grid-template-areas: "live sleeve np wave more"; align-items: center; column-gap: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--paper-100); border-block: var(--hairline) solid var(--line-100); }
.pd-listen__live { grid-area: live; display: inline-flex; align-items: center; gap: 0.55em; margin: 0; font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-700); white-space: nowrap; }
.pd-listen__dot { inline-size: 0.5rem; block-size: 0.5rem; border-radius: var(--radius-pill); background: var(--bindu-on-paper); box-shadow: inset 0 0 0 1px var(--saffron-700); }
.pd-listen__strip .pd-listen__sleeve { grid-area: sleeve; }
.pd-listen__np { grid-area: np; margin: 0; min-inline-size: 0; font-family: var(--font-text); font-size: 1.0625rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-listen__np cite { font-style: italic; font-weight: 500; }
.pd-listen__np span { color: var(--ink-700); }
.pd-listen__strip .pd-wave { grid-area: wave; }
.pd-listen__strip .pd-listen__more { grid-area: more; }
@container pd-listen (max-width: 36rem) {
  .pd-listen__strip { grid-template-columns: 3rem minmax(0, 1fr) auto; grid-template-areas: "sleeve live more" "sleeve np np"; row-gap: 0.15rem; column-gap: var(--space-3); }
  .pd-listen__strip .pd-listen__more { justify-self: end; margin-block: -0.75rem; }
  .pd-listen__strip .pd-wave { display: none; }
  .pd-listen--grid .pd-listen__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
  .pd-listen--grid .pd-listen__name { font-size: 1.125rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .pd-tracks__play:where([aria-pressed="true"]) .pd-tracks__eq i { animation: pd-tracks-eq 0.9s var(--ease-in-out) infinite alternate; }
  .pd-tracks__play:where([aria-pressed="true"]) .pd-tracks__eq i:nth-child(2) { animation-duration: 0.7s; }
  .pd-tracks__play:where([aria-pressed="true"]) .pd-tracks__eq i:nth-child(3) { animation-duration: 1.1s; }
}
@keyframes pd-tracks-eq { from { scale: 1 0.25; } to { scale: 1 1; } }
@media (forced-colors: active) {
  .pd-tracks__row:where([aria-current="true"]) { outline: 2px solid Highlight; outline-offset: -2px; }
  .pd-tracks__prog::before, .pd-tracks__prog::after, .pd-listen__dot { forced-color-adjust: none; background: Highlight; }
  .pd-listen__mode::before { forced-color-adjust: none; border-color: CanvasText; }
}
}

/* ── part: tattva.css ── */
@layer components.tattva {
/* Pandox DS v2 — package: tattva. Kashmir Śaiva structure diagrams.
   Owns: .pd-tladder · .pd-tmandala · .pd-elements · .pd-elglyph · .pd-tcard · .pd-trika · .pd-kancuka. Engine: engines/tattvas.js.
   Colour: tattva-01…36, tg-* with on-tg-*, el-* with el-*-ink are CONTENT colours (palette.md §4–5): never status, never texture.
   Colour is never the only carrier: every band carries its numeral or name in on-tg-*, every element its shape.
   Hooks: data-tg="<token>" sets --pd-tg/--pd-on-tg · data-el="<key>" sets --pd-el/--pd-el-ink · style="--pd-t:var(--tattva-NN)". */

/* ── shared hooks ─────────────────────────────────────────────────────────── */
:where([data-tg="shuddha"]) { --pd-tg: var(--tg-shuddha); --pd-on-tg: var(--on-tg-shuddha); }
:where([data-tg="maya"]) { --pd-tg: var(--tg-maya); --pd-on-tg: var(--on-tg-maya); }
:where([data-tg="purusha-prakriti"]) { --pd-tg: var(--tg-purusha-prakriti); --pd-on-tg: var(--on-tg-purusha-prakriti); }
:where([data-tg="antahkarana"]) { --pd-tg: var(--tg-antahkarana); --pd-on-tg: var(--on-tg-antahkarana); }
:where([data-tg="jnanendriya"]) { --pd-tg: var(--tg-jnanendriya); --pd-on-tg: var(--on-tg-jnanendriya); }
:where([data-tg="karmendriya"]) { --pd-tg: var(--tg-karmendriya); --pd-on-tg: var(--on-tg-karmendriya); }
:where([data-tg="tanmatra"]) { --pd-tg: var(--tg-tanmatra); --pd-on-tg: var(--on-tg-tanmatra); }
:where([data-tg="bhuta"]) { --pd-tg: var(--tg-bhuta); --pd-on-tg: var(--on-tg-bhuta); }
:where([data-el="prithvi"]) { --pd-el: var(--el-prithvi); --pd-el-ink: var(--el-prithvi-ink); }
:where([data-el="jala"]) { --pd-el: var(--el-jala); --pd-el-ink: var(--el-jala-ink); }
:where([data-el="agni"]) { --pd-el: var(--el-agni); --pd-el-ink: var(--el-agni-ink); }
:where([data-el="vayu"]) { --pd-el: var(--el-vayu); --pd-el-ink: var(--el-vayu-ink); }
:where([data-el="akasha"]) { --pd-el: var(--el-akasha); --pd-el-ink: var(--el-akasha-ink); }
:where(.pd-tladder, .pd-tmandala, .pd-elements, .pd-tcard, .pd-trika, .pd-kancuka) :where([lang="sa"]) { font-family: var(--font-deva); font-style: normal; font-weight: 400; }

/* ── ElementGlyph: inline element form (engine: PandoxTattvas.glyph) ───────── */
.pd-elglyph { display: inline-grid; place-items: center; inline-size: var(--icon-s, 1em); block-size: var(--icon-s, 1em); vertical-align: -.125em; color: var(--pd-el-ink); }
.pd-elglyph__svg { inline-size: 100%; block-size: 100%; overflow: visible; fill: var(--pd-el); stroke: var(--pd-el-ink); stroke-width: 1px; }
.pd-elglyph--m { inline-size: var(--icon-m); block-size: var(--icon-m); }
.pd-elglyph--l { inline-size: var(--icon-l); block-size: var(--icon-l); }
/* margin mark for 07 Learning / 08 Practice entries: one element per entry, 2px rule in the element colour above the bīja */
.pd-elglyph--mark { display: inline-grid; grid-template-columns: auto; justify-items: start; align-content: start; gap: var(--space-2); inline-size: auto; block-size: auto; padding-block-start: var(--space-2); border-block-start: 2px solid var(--pd-el); vertical-align: top; }
.pd-elglyph--mark > .pd-elglyph__svg { inline-size: var(--icon-l); block-size: var(--icon-l); }
.pd-elglyph__label { font: italic 400 var(--fs-caption)/1.3 var(--font-text); color: var(--pd-el-ink); }
.pd-elglyph__label [lang="sa"] { font-size: var(--fs-label); }

/* ── TattvaLadder ─────────────────────────────────────────────────────────── */
.pd-tladder { container: pd-tladder / inline-size; font-size: var(--fs-body-s); display: grid; gap: var(--space-5); color: var(--text); font-family: var(--font-text); }
.pd-tladder__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4); padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-tladder__titles { display: grid; gap: var(--space-2); }
.pd-tladder__titles > * { margin: 0; }
.pd-tladder__title { font: var(--font-headline); text-wrap: balance; }
.pd-tladder__note { font: var(--font-caption); color: var(--text-muted); max-inline-size: var(--measure); }
.pd-tladder__tools { display: grid; gap: var(--space-2); min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.pd-tladder__tools > .pd-label-micro { margin: 0; }
.pd-tladder__grid {
  --pd-tl-row: var(--control-block);
  display: grid; grid-template-rows: repeat(36, auto);
  grid-template-columns: [axis] 2.25rem [label] minmax(0, 9.5rem) [band] 2rem [num] 3.25rem [sw] 2.5rem [name] minmax(0, 1.25fr) [gloss] minmax(0, 1fr) [mark] 2rem [anda] auto [kala] auto [end];
  border-block: var(--hairline) solid var(--rule-strong);
}
.pd-tladder__axis { grid-column: axis; grid-row: 1 / -1; position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding-block: var(--space-3); }
.pd-tladder__axis::before { content: ""; position: absolute; inset-block: var(--space-3); inset-inline-start: 50%; border-inline-start: var(--hairline) solid var(--border-control); }
.pd-tladder__dir { position: relative; writing-mode: vertical-rl; padding-block: var(--space-2); background: var(--surface); font: 500 var(--fs-meta)/1.2 var(--font-sans); letter-spacing: var(--track-mono); color: var(--text-muted); white-space: nowrap; }
.pd-tladder__dir--up { rotate: 180deg; }
.pd-tladder__list { grid-column: label / anda; grid-row: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; margin: 0; padding: 0; list-style: none; }
.pd-tladder__group { grid-column: 1 / -1; grid-row: span var(--n, 1); display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }
.pd-tladder__group + .pd-tladder__group { border-block-start: var(--hairline) solid var(--border-control); }
.pd-tladder__glabel { grid-column: 1; grid-row: 1 / -1; align-self: start; display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-3) var(--space-3) 0; }
.pd-tladder__gname { font: 600 var(--fs-kicker)/1.3 var(--font-sans); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text); }
.pd-tladder__gdeva { font-size: var(--fs-body-s); line-height: 1.4; color: var(--text-muted); }
.pd-tladder__grange { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-tladder__band { grid-column: 2; grid-row: 1 / -1; display: grid; place-items: start center; padding-block: var(--space-3); background: var(--pd-tg); border: var(--hairline) solid transparent; box-shadow: inset 0 0 0 var(--hairline) color-mix(in oklab, var(--pd-on-tg) 18%, transparent); }
.pd-tladder__btext { writing-mode: vertical-rl; font: 500 var(--fs-meta)/1 var(--font-mono); letter-spacing: var(--track-mono); color: var(--pd-on-tg); white-space: nowrap; }
.pd-tladder__btext--name { display: none; font-family: var(--font-sans); letter-spacing: 0; }
.pd-tladder__steps { grid-column: 3 / -1; grid-row: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; margin: 0; padding: 0; list-style: none; }
.pd-tladder__step { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; min-block-size: var(--pd-tl-row); }
.pd-tladder__step + .pd-tladder__step { border-block-start: var(--hairline) solid var(--rule); }
.pd-tladder__num { padding-inline-start: var(--space-3); font: var(--font-numeral); letter-spacing: var(--track-mono); font-variant-numeric: tabular-nums; color: var(--text-subtle); }
.pd-tladder__sw { inline-size: 1.75rem; block-size: .75rem; background: var(--pd-t); border: var(--hairline) solid var(--border-control); }
.pd-tladder__name { grid-column: name / mark; display: grid; grid-template-columns: subgrid; align-items: baseline; min-inline-size: 0; }
.pd-tladder__nm { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-3); padding-block: var(--space-2); padding-inline-end: var(--space-3); min-inline-size: 0; }
.pd-tladder__link { font: 500 var(--fs-body)/1.3 var(--font-text); color: var(--text); text-decoration: none; }
.pd-tladder__link::after { content: ""; position: absolute; inset: 0; z-index: var(--z-raised); }
.pd-tladder__link:focus-visible { outline: none; }
.pd-tladder__link:focus-visible::after { outline: var(--focus-width) solid var(--focus); outline-offset: calc(var(--focus-width) * -1); }
.pd-tladder__deva { font-size: var(--fs-body-s); line-height: 1.5; color: var(--text-muted); }
.pd-tladder__sub { padding-block: var(--space-2); padding-inline-end: var(--space-3); font: italic 400 var(--fs-body-s)/1.35 var(--font-text); color: var(--text-muted); min-inline-size: 0; }
.pd-tladder__more { display: none; grid-column: 1 / -1; margin: 0; padding-block-end: var(--space-2); font: 400 var(--fs-body-s)/1.45 var(--font-text); color: var(--text-muted); max-inline-size: var(--measure); }
.pd-tladder__mark { display: grid; place-items: center; font-size: var(--fs-body); }
@media (hover: hover) { .pd-tladder__step:where(:hover) { background: color-mix(in oklab, currentColor var(--state-hover-mix), transparent); } }
.pd-tladder__step:where(:active) { background: color-mix(in oklab, currentColor var(--state-press-mix), transparent); }
.pd-tladder__step:where(:has([aria-current="true"], [aria-current="page"])) .pd-tladder__num { color: var(--text); font-weight: 600; }
.pd-tladder__link:where([aria-current="true"], [aria-current="page"]) { text-decoration: underline 2px var(--rule-strong); text-underline-offset: .3em; }
/* overlays: aṇḍa and kalā brackets, shown by a pressed toggle or a checked native checkbox */
.pd-tladder__ov { grid-row: 1 / -1; display: none; grid-template-rows: subgrid; margin: 0; padding: 0; list-style: none; }
.pd-tladder__ov--anda { grid-column: anda; }
.pd-tladder__ov--kala { grid-column: kala; }
:where(.pd-tladder:has([data-overlay="anda"]:is([aria-pressed="true"], :checked))) .pd-tladder__ov--anda,
:where(.pd-tladder:has([data-overlay="kala"]:is([aria-pressed="true"], :checked))) .pd-tladder__ov--kala { display: grid; }
.pd-tladder__span { display: grid; align-content: start; gap: var(--space-1); min-inline-size: 8.5rem; margin-block: var(--space-2); margin-inline-start: var(--space-3); padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2); border: var(--hairline) solid var(--border-control); border-inline-end: 0; }
.pd-tladder__span--none { border-style: none; border-inline-start: var(--hairline) solid var(--border-control); }
.pd-tladder__sname { font: 500 var(--fs-label)/1.3 var(--font-text); color: var(--text); }
.pd-tladder__srange { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-tladder__key { display: none; margin: 0; }
/* variants */
.pd-tladder--full .pd-tladder__name { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-3); }
.pd-tladder--full :where(.pd-tladder__nm, .pd-tladder__sub) { padding-block: 0; }
.pd-tladder--full .pd-tladder__more { display: block; padding-block-start: var(--space-1); }
.pd-tladder--full .pd-tladder__link { font: var(--font-title); }
.pd-tladder--full .pd-tladder__grid { grid-template-columns: [axis] 2.25rem [label] minmax(0, 9.5rem) [band] 2rem [num] 3.25rem [sw] 2.5rem [name] minmax(0, 1fr) [gloss] 0 [mark] 2.5rem [anda] auto [kala] auto [end]; }
.pd-tladder--full .pd-tladder__step { align-items: start; }
.pd-tladder--full :where(.pd-tladder__num, .pd-tladder__sw, .pd-tladder__mark) { margin-block-start: var(--space-5); }
.pd-tladder--bare .pd-tladder__grid { grid-template-columns: [axis] 0 [label] 0 [band] 2rem [num] 3.25rem [sw] 2.5rem [name] minmax(0, 1.25fr) [gloss] minmax(0, 1fr) [mark] 2rem [anda] auto [kala] auto [end]; }
.pd-tladder--bare :where(.pd-tladder__axis, .pd-tladder__glabel) { display: none; }
/* medium: drop the separate label column; the band carries the group name */
@container pd-tladder (inline-size < 52em) {
  .pd-tladder__grid, .pd-tladder--full .pd-tladder__grid, .pd-tladder--bare .pd-tladder__grid { grid-template-columns: [axis] 0 [label] 0 [band] 1.75rem [num] 2.75rem [sw] 2.25rem [name] minmax(0, 1fr) [gloss] minmax(0, .9fr) [mark] 2rem [anda] auto [kala] auto [end]; }
  .pd-tladder--full .pd-tladder__grid { grid-template-columns: [axis] 0 [label] 0 [band] 1.75rem [num] 2.75rem [sw] 2.25rem [name] minmax(0, 1fr) [gloss] 0 [mark] 2rem [anda] auto [kala] auto [end]; }
  .pd-tladder__axis, .pd-tladder__glabel { display: none; }
  .pd-tladder__btext { display: none; }
  .pd-tladder__btext--name { display: block; }
  .pd-tladder__span { min-inline-size: 0; }
}
/* narrow: two columns of content (band + numeral | name over gloss); overlays become numeral brackets + a key */
@container pd-tladder (inline-size < 30em) {
  .pd-tladder__grid, .pd-tladder--full .pd-tladder__grid, .pd-tladder--bare .pd-tladder__grid { grid-template-columns: [axis] 0 [label] 0 [band] 1.75rem [num] 2.5rem [sw] 0 [name] minmax(0, 1fr) [gloss] 0 [mark] 1.75rem [anda] auto [kala] auto [end]; }
  .pd-tladder__sw { display: none; }
  .pd-tladder__num { display: grid; gap: var(--space-1); padding-inline-start: var(--space-2); }
  .pd-tladder__num::after { content: ""; inline-size: 1.25rem; block-size: .375rem; background: var(--pd-t); border: var(--hairline) solid var(--border-control); }
  .pd-tladder__name { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-2); }
  .pd-tladder__nm { gap: 0 var(--space-2); padding-block: 0; padding-inline-end: var(--space-2); }
  .pd-tladder__sub { padding-block: 0; }
  .pd-tladder__span { margin-inline-start: var(--space-1); padding-inline: var(--space-1) 0; }
  .pd-tladder__sname { display: none; }
  .pd-tladder__srange { writing-mode: vertical-rl; white-space: nowrap; }
  :where(.pd-tladder:has([data-overlay="anda"]:is([aria-pressed="true"], :checked))) .pd-tladder__key--anda,
  :where(.pd-tladder:has([data-overlay="kala"]:is([aria-pressed="true"], :checked))) .pd-tladder__key--kala { display: block; font: var(--font-caption); color: var(--text-muted); }
}

/* ── TattvaMandala ────────────────────────────────────────────────────────── */
.pd-tmandala { container: pd-tmandala / inline-size; font-size: var(--fs-body-s); --pd-tm-fs: 2.5px; --pd-tm-bindu: var(--text); display: grid; gap: var(--space-6); color: var(--text); }
.pd-tmandala--bindu { --pd-tm-bindu: var(--bindu-on-paper); }
.pd-tmandala__layout { display: grid; gap: var(--space-6); align-items: start; }
@container pd-tmandala (inline-size >= 48em) { .pd-tmandala__layout { grid-template-columns: minmax(0, 1.25fr) minmax(16rem, 1fr); } }
@container pd-tmandala (inline-size < 30em) { .pd-tmandala__svg { --pd-tm-fs: 3.3px; } }
.pd-tmandala__fig { margin: 0; display: grid; gap: var(--space-3); }
.pd-tmandala__svg { display: block; inline-size: 100%; block-size: auto; max-inline-size: 40rem; margin-inline: auto; overflow: visible; touch-action: manipulation; }
.pd-tmandala__svg:focus-visible { outline-offset: var(--focus-offset); }
.pd-tmandala__ring { fill: none; stroke: var(--border-control); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.pd-tmandala__arc { fill: none; stroke: var(--pd-tg); stroke-width: 3px; vector-effect: non-scaling-stroke; stroke-linecap: butt; }
.pd-tmandala__lead { stroke: var(--rule); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.pd-tmandala__node { fill: var(--text-muted); }
.pd-tmandala__bindu { fill: var(--pd-tm-bindu); }
.pd-tmandala__num { font-family: var(--font-mono); font-size: var(--pd-tm-fs); font-weight: 500; letter-spacing: 0; fill: var(--text-muted); text-anchor: middle; dominant-baseline: central; font-variant-numeric: tabular-nums; }
.pd-tmandala__halo { fill: none; stroke: none; stroke-width: var(--focus-width); vector-effect: non-scaling-stroke; }
.pd-tmandala__sel { fill: none; stroke: none; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.pd-tmandala__hit { fill: transparent; stroke: none; }
.pd-tmandala__tick { cursor: pointer; outline: none; }
@media (hover: hover) {
  .pd-tmandala__tick:where(:hover) .pd-tmandala__num { fill: var(--text); }
  .pd-tmandala__tick:where(:hover) .pd-tmandala__lead { stroke: var(--text-subtle); }
}
.pd-tmandala__tick:where(:focus-visible) .pd-tmandala__halo { stroke: var(--focus); }
.pd-tmandala__tick:where([aria-selected="true"]) .pd-tmandala__num { fill: var(--text); font-weight: 600; }
.pd-tmandala__tick:where([aria-selected="true"]) .pd-tmandala__sel { stroke: var(--rule-strong); }
.pd-tmandala__tick:where([aria-selected="true"]) .pd-tmandala__lead { stroke: var(--rule-strong); }
.pd-tmandala__tick:where([aria-selected="true"]) .pd-tmandala__node { fill: var(--text); }
.pd-tmandala__cap { font: var(--font-caption); color: var(--text-muted); max-inline-size: var(--measure); }
.pd-tmandala__key { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0 var(--space-5); margin: 0; padding: 0; list-style: none; border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-tmandala__key > li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-block: var(--space-2); border-block-end: var(--hairline) solid var(--rule); font: var(--font-caption); color: var(--text-muted); }
.pd-tmandala__ring-n { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); min-inline-size: 1.5rem; }
.pd-tmandala__list { margin: 0; }
/* Text-alternative summary: the shared .pd-alt__sum recipe (SystemLegend › Text alternative). */
.pd-tmandala__list > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4); min-block-size: var(--target-min); padding-block: var(--space-3); cursor: pointer; list-style: none; font: var(--font-label); letter-spacing: normal; text-transform: none; color: var(--text); }
.pd-tmandala__list > summary::-webkit-details-marker { display: none; }
.pd-tmandala__list > summary::before { content: ""; flex: none; inline-size: .5em; block-size: .5em; border: 0; border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor; rotate: -45deg; translate: 0 -.1em; transition: rotate var(--dur-1) var(--ease-standard); }
.pd-tmandala__list[open] > summary::before { content: ""; rotate: 45deg; }
.pd-tmandala__list > summary:focus-visible { outline-offset: var(--focus-offset); }
@media (prefers-reduced-motion: reduce) { .pd-tmandala__list > summary::before { transition: none; } }
.pd-tmandala__list ol { columns: 14rem; column-gap: var(--space-6); margin: 0; padding: 0; list-style: none; font: var(--font-caption); color: var(--text-muted); }
.pd-tmandala__list li { padding-block: var(--space-1); break-inside: avoid; }
.pd-tmandala__panel { position: sticky; inset-block-start: var(--space-4); }

/* ── ElementYantras: element forms (after the Śiva Svarodaya) ─────────────── */
.pd-elements { container: pd-elements / inline-size; font-size: var(--fs-body-s); display: grid; gap: var(--space-5); color: var(--text); }
.pd-elements__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); margin: 0; padding: 0; list-style: none; }
.pd-elements__item { display: grid; align-content: start; gap: var(--space-3); padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-elements__plate { display: grid; place-items: center; aspect-ratio: 1; border: var(--hairline) solid var(--rule); }
.pd-elements__plate > svg { inline-size: 82%; block-size: auto; overflow: visible; }
.pd-elements__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.pd-elements__n { font: var(--font-numeral); letter-spacing: var(--track-mono); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.pd-elements__form { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); text-align: end; }
.pd-elements__name { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); font: var(--font-title); color: var(--pd-el-ink); }
.pd-elements__name [lang="sa"] { font-size: var(--fs-body); color: var(--text-muted); }
.pd-elements__bija { margin: 0; display: flex; align-items: baseline; gap: var(--space-2); font: italic 400 var(--fs-title)/1.2 var(--font-text); color: var(--text); }
.pd-elements__bija [lang="sa"] { font-size: var(--fs-title); }
.pd-elements__bija > .pd-label-micro { font-style: normal; }
.pd-elements__facts { display: grid; margin: 0; font-size: var(--fs-caption); }
.pd-elements__facts :where(dt, dd) { margin: 0; }
.pd-elements__facts dt { padding-block-start: var(--space-2); border-block-start: var(--hairline) solid var(--rule); font: 500 var(--fs-meta)/1.6 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-subtle); }
.pd-elements__facts dd { padding-block-end: var(--space-1); font: 400 var(--fs-caption)/1.5 var(--font-sans); color: var(--text); }
.pd-elements__dur { display: grid; gap: var(--space-1); }
.pd-elements__bar { display: block; inline-size: calc(var(--m) / 20 * 100%); block-size: .5rem; background: var(--pd-el); border: var(--hairline) solid var(--pd-el-ink); }
.pd-elements__mins { font: var(--font-meta); overflow-wrap: normal; letter-spacing: var(--track-mono); color: var(--text); font-variant-numeric: tabular-nums; }
.pd-elements__mins > span { white-space: nowrap; }
.pd-elements__cap { margin: 0; padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule); font: italic 400 var(--fs-body-s)/1.45 var(--font-text); color: var(--text-muted); max-inline-size: var(--measure-wide); }
.pd-elements__src { border-block-start: var(--hairline) solid var(--rule); }
/* Text-alternative summary: the shared .pd-alt__sum recipe (SystemLegend › Text alternative). */
.pd-elements__src > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4); min-block-size: var(--target-min); padding-block: var(--space-3); cursor: pointer; list-style: none; font: var(--font-label); letter-spacing: normal; text-transform: none; color: var(--text); }
.pd-elements__src > summary::-webkit-details-marker { display: none; }
.pd-elements__src > summary::before { content: ""; flex: none; inline-size: .5em; block-size: .5em; border: 0; border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor; rotate: -45deg; translate: 0 -.1em; transition: rotate var(--dur-1) var(--ease-standard); }
.pd-elements__src[open] > summary::before { content: ""; rotate: 45deg; }
.pd-elements__src > summary:focus-visible { outline-offset: var(--focus-offset); }
@media (prefers-reduced-motion: reduce) { .pd-elements__src > summary::before { transition: none; } }
.pd-elements__table { inline-size: 100%; border-collapse: collapse; font: var(--font-caption); }
.pd-elements__table :where(th, td) { padding: var(--space-2) var(--space-3) var(--space-2) 0; border-block-start: var(--hairline) solid var(--rule); text-align: start; vertical-align: top; }
.pd-elements__table th { font: 500 var(--fs-meta)/1.5 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-subtle); }
/* compact row variant: one line per element */
.pd-elements--rows .pd-elements__list { grid-template-columns: 1fr; gap: 0; }
.pd-elements--rows .pd-elements__item { grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1fr) 10rem; align-items: center; gap: var(--space-4); padding-block: var(--space-3); border-block-start-color: var(--rule); }
.pd-elements--rows .pd-elements__item:where(:first-child) { border-block-start-color: var(--rule-strong); }
.pd-elements--rows :where(.pd-elements__facts, .pd-elements__top) { display: none; }
@container pd-elements (inline-size < 52em) { .pd-elements__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container pd-elements (inline-size < 40em) {
  .pd-elements__list { grid-template-columns: 1fr; gap: 0; }
  .pd-elements__item { grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: var(--space-4); padding-block: var(--space-4); }
  .pd-elements__item > .pd-elements__plate { grid-row: 1 / span 4; align-self: start; }
  .pd-elements__item > :not(.pd-elements__plate) { grid-column: 2; }
  .pd-elements--rows .pd-elements__item { grid-template-columns: 3rem minmax(0, 1fr); }
  .pd-elements--rows :where(.pd-elements__item) > .pd-elements__plate { grid-row: 1 / span 3; }
}

/* ── TattvaCard ───────────────────────────────────────────────────────────── */
.pd-tcard { container: pd-tcard / inline-size; font-size: var(--fs-body-s); display: grid; align-content: start; gap: var(--space-4); padding-block-start: var(--space-4); border-block-start: var(--hairline) solid var(--rule-strong); color: var(--text); }
.pd-tcard__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-4); align-items: start; }
.pd-tcard__titles { display: grid; gap: var(--space-1); min-inline-size: 0; }
.pd-tcard__titles > * { margin: 0; }
.pd-tcard__num { font: 500 var(--fs-title)/1 var(--font-mono); letter-spacing: var(--track-mono); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.pd-tcard__name { font: var(--font-display-m); letter-spacing: var(--track-display); color: var(--text); overflow-wrap: anywhere; }
.pd-tcard__deva { font-size: var(--fs-title); line-height: 1.4; color: var(--text-muted); }
.pd-tcard__gloss { font: italic 400 var(--fs-body)/1.4 var(--font-text); color: var(--text-muted); }
.pd-tcard__form { display: grid; justify-items: center; gap: var(--space-1); }
.pd-tcard__form > svg { inline-size: 3.5rem; block-size: 3.5rem; overflow: visible; }
.pd-tcard__form > span { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-tcard__scale { display: grid; grid-template-columns: repeat(36, minmax(0, 1fr)); align-items: end; gap: 1px; block-size: 1.25rem; margin: 0; padding: 0; list-style: none; }
.pd-tcard__scale > li { block-size: .625rem; background: var(--pd-t); box-shadow: inset 0 0 0 var(--hairline) color-mix(in oklab, var(--border-control) 45%, transparent); }
.pd-tcard__scale > li:where([aria-current="true"]) { block-size: 1.25rem; box-shadow: inset 0 0 0 var(--hairline) var(--rule-strong); border-block-end: 2px solid var(--rule-strong); }
.pd-tcard__meaning { margin: 0; font: var(--font-body); color: var(--text); max-inline-size: var(--measure); }
.pd-tcard__chips { margin: 0; }
.pd-tcard__nav { display: flex; justify-content: space-between; gap: var(--space-4); padding-block-start: var(--space-2); border-block-start: var(--hairline) solid var(--rule); }
.pd-facts + .pd-tcard__nav { border-block-start: 0; }
.pd-tcard__step { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--target-min); font: var(--font-label); color: var(--link); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; }
.pd-tcard__step--next { margin-inline-start: auto; text-align: end; }
@media (hover: hover) { .pd-tcard__step:where(:hover:not([aria-disabled="true"])) { text-decoration: underline; text-underline-offset: .18em; } }
.pd-tcard__step:where(:focus-visible) { outline-offset: var(--focus-offset); }
.pd-tcard__step:where([aria-disabled="true"], :disabled) { opacity: var(--opacity-disabled); cursor: not-allowed; color: var(--text-muted); }
.pd-tcard__empty { margin: 0; font: italic 400 var(--fs-body)/1.4 var(--font-text); color: var(--text-subtle); }
/* group chip: "Antaḥkaraṇa · 14–16" in tg-* fill with on-tg-* text (palette.md §4) */
.pd-tcard--group { display: inline-flex; align-items: center; gap: .5em; inline-size: auto; padding: .25em .625em; border: var(--hairline) solid color-mix(in oklab, var(--pd-on-tg) 45%, transparent); border-radius: var(--radius-1); background: var(--pd-tg); color: var(--pd-on-tg); font: 600 var(--fs-kicker)/1.3 var(--font-sans); letter-spacing: .04em; white-space: nowrap; vertical-align: .1em; }
.pd-tcard--group > [lang="sa"] { font-size: var(--fs-caption); line-height: 1; }
.pd-tcard--group > .pd-tcard__range { font: 500 var(--fs-meta)/1 var(--font-mono); letter-spacing: var(--track-mono); }
/* inline tattva chip for essays */
.pd-tcard--chip { display: inline-flex; align-items: baseline; gap: .375em; inline-size: auto; padding: 0; border: 0; color: var(--text); text-decoration: none; border-block-end: var(--hairline) solid var(--border-control); white-space: nowrap; }
.pd-tcard--chip::before { content: ""; align-self: center; inline-size: .625em; block-size: .625em; background: var(--pd-t); border: var(--hairline) solid var(--border-control); }
.pd-tcard--chip > .pd-tcard__num { font: 500 .75em/1 var(--font-mono); }
.pd-tcard--chip > [lang="sa"] { font-size: .85em; color: var(--text-muted); }
@media (hover: hover) { .pd-tcard--chip:where(a:hover) { border-block-end-color: var(--rule-strong); background: color-mix(in oklab, currentColor var(--state-hover-mix), transparent); } }
.pd-tcard--chip:where(a:focus-visible) { outline-offset: var(--focus-offset); }
.pd-tcard--chip:where([aria-current="true"]) { border-block-end: 2px solid var(--rule-strong); }
@container pd-tcard (inline-size < 22em) {
  .pd-tcard__name { font: var(--font-headline); }
  .pd-tcard .pd-facts { grid-template-columns: minmax(0, 6.5em) minmax(0, 1fr); }
}

/* ── TrikaTriad ───────────────────────────────────────────────────────────── */
.pd-trika { container: pd-trika / inline-size; font-size: var(--fs-body-s); --pd-tk-dot: .75rem; display: grid; gap: var(--space-6); color: var(--text); }
.pd-trika__triad { display: grid; gap: var(--space-4); margin: 0; }
.pd-trika__label { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-trika__label > .pd-kicker { margin: 0; }
.pd-trika__label > .pd-meta { margin-inline-start: auto; }
.pd-trika__row { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.pd-trika__row::before { content: ""; position: absolute; inset-inline: calc(100% / 6); inset-block-start: calc(var(--pd-tk-dot) / 2); border-block-start: var(--hairline) solid var(--border-control); }
.pd-trika__item { position: relative; display: grid; justify-items: center; align-content: start; gap: var(--space-1); text-align: center; }
.pd-trika__item::before { content: ""; inline-size: var(--pd-tk-dot); block-size: var(--pd-tk-dot); margin-block-end: var(--space-4); border-radius: var(--radius-pill); background: var(--text); }
.pd-trika__iast { margin: 0; font: var(--font-title); color: var(--text); }
.pd-trika__deva { font-size: var(--fs-title); line-height: 1.4; color: var(--text-muted); }
.pd-trika__gloss { font: italic 400 var(--fs-body-s)/1.4 var(--font-text); color: var(--text-muted); }
.pd-trika__level { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-trika__corr { font: var(--font-caption); color: var(--text-muted); }
.pd-trika__note { margin: 0; font: var(--font-caption); color: var(--text-muted); max-inline-size: var(--measure); }
/* form: three equal bars on one line (no connecting rule) */
.pd-trika--bars .pd-trika__row::before { display: none; }
.pd-trika--bars .pd-trika__item::before { inline-size: min(5rem, 70%); block-size: .375rem; border-radius: 0; }
/* form: a triangle of points (three dots, no lines; never a trident) */
.pd-trika--points .pd-trika__row { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--space-6); }
.pd-trika--points .pd-trika__row::before { display: none; }
.pd-trika--points .pd-trika__item:where(:nth-child(1)) { grid-column: 2 / span 2; }
.pd-trika--points .pd-trika__item:where(:nth-child(2)) { grid-column: 1 / span 2; }
.pd-trika--points .pd-trika__item:where(:nth-child(3)) { grid-column: 3 / span 2; }
.pd-trika--s { --pd-tk-dot: .5rem; }
.pd-trika--s .pd-trika__iast { font: 500 var(--fs-body)/1.3 var(--font-text); }
.pd-trika--s .pd-trika__deva { font-size: var(--fs-body-s); }
/* native switcher: show one triad at a time when a .pd-trika__pick radio group is present */
:where(.pd-trika:has(.pd-trika__pick)) .pd-trika__triad { display: none; }
:where(.pd-trika:has(.pd-trika__pick [value="trika"]:checked)) .pd-trika__triad--trika,
:where(.pd-trika:has(.pd-trika__pick [value="shakti"]:checked)) .pd-trika__triad--shakti,
:where(.pd-trika:has(.pd-trika__pick [value="nara"]:checked)) .pd-trika__triad--nara { display: grid; }
@container pd-trika (inline-size < 30em) {
  .pd-trika__row, .pd-trika--points .pd-trika__row { grid-template-columns: 1fr; gap: var(--space-5); }
  .pd-trika__row::before { display: none; }
  .pd-trika__item:where(:not(:last-child))::after { content: ""; position: absolute; inset-inline-start: calc(var(--pd-tk-dot) / 2); inset-block: calc(.55em + var(--pd-tk-dot) / 2) calc(-1 * var(--space-5) - .55em - var(--pd-tk-dot) / 2); border-inline-start: var(--hairline) solid var(--border-control); }
  .pd-trika--bars .pd-trika__item::after { display: none; }
  .pd-trika__item, .pd-trika--points .pd-trika__item { grid-column: 1; grid-template-columns: var(--pd-tk-dot) minmax(0, 1fr); justify-items: start; column-gap: var(--space-4); text-align: start; }
  .pd-trika__item::before { grid-row: 1 / span 5; margin-block: .55em 0; }
  .pd-trika__item > * { grid-column: 2; }
  .pd-trika--bars .pd-trika__item { grid-template-columns: 3rem minmax(0, 1fr); }
  .pd-trika--bars .pd-trika__item::before { inline-size: 3rem; }
}

/* ── KancukaVeils ─────────────────────────────────────────────────────────── */
.pd-kancuka { container: pd-kancuka / inline-size; font-size: var(--fs-body-s); --pd-kc-bindu: var(--bindu-on-paper); --pd-kc-rim: var(--saffron-700); display: grid; gap: var(--space-5); color: var(--text); }
.pd-kancuka--ink { --pd-kc-bindu: var(--text); --pd-kc-rim: transparent; }
.pd-kancuka__layout { display: grid; gap: var(--space-6); align-items: start; }
@container pd-kancuka (inline-size >= 48em) { .pd-kancuka__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.pd-kancuka__fig { margin: 0; display: grid; gap: var(--space-3); justify-items: center; }
.pd-kancuka__svg { display: block; inline-size: 100%; max-inline-size: 26rem; block-size: auto; overflow: visible; }
.pd-kancuka__veil { fill: var(--surface); fill-opacity: var(--opacity-ghost); stroke: color-mix(in oklab, var(--text-subtle) calc(100% - var(--i) * 20%), var(--border-control)); stroke-width: 1px; vector-effect: non-scaling-stroke; transform-box: view-box; transform-origin: 50% 50%; }
.pd-kancuka__bindu { fill: var(--pd-kc-bindu); stroke: var(--pd-kc-rim); stroke-width: 1; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; }
.pd-kancuka__vn { font-family: var(--font-mono); font-size: var(--pd-kc-fs, 2.75px); fill: var(--text-muted); text-anchor: middle; dominant-baseline: central; paint-order: stroke; stroke: var(--surface); stroke-width: 1.2px; stroke-linejoin: round; }
.pd-kancuka__list { display: grid; margin: 0; padding: 0; list-style: none; border-block: var(--hairline) solid var(--rule-strong); }
.pd-kancuka__item { display: grid; grid-template-columns: var(--row-lead) minmax(0, 1fr); gap: var(--space-1) var(--space-3); padding: var(--row-pad); }
.pd-kancuka__item + .pd-kancuka__item { border-block-start: var(--hairline) solid var(--rule); }
.pd-kancuka__n { grid-row: 1 / span 3; display: grid; align-content: start; gap: var(--space-2); font: var(--font-numeral); letter-spacing: var(--track-mono); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.pd-kancuka__n::after { content: ""; inline-size: 2rem; border-block-start: 2px solid color-mix(in oklab, var(--text-subtle) calc(100% - var(--i) * 20%), var(--border-control)); }
.pd-kancuka__name { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-3); font: 500 var(--fs-body)/1.3 var(--font-text); }
.pd-kancuka__name [lang="sa"] { font-size: var(--fs-body-s); color: var(--text-muted); }
.pd-kancuka__gloss { margin: 0; font: italic 400 var(--fs-body-s)/1.4 var(--font-text); color: var(--text-muted); }
.pd-kancuka__limit { margin: 0; font: var(--font-caption); color: var(--text-muted); }
.pd-kancuka__limit > i { color: var(--text); }
.pd-kancuka__cap { margin: 0; font: italic 400 var(--fs-body-s)/1.45 var(--font-text); color: var(--text-muted); text-align: center; max-inline-size: 26rem; }
.pd-kancuka__seen { display: none; }
.pd-kancuka__toggle { justify-self: start; }
/* removed: by a checked switch or a pressed button carrying .pd-kancuka__toggle */
:where(.pd-kancuka:has(.pd-kancuka__toggle:is(:checked, [aria-pressed="true"]), .pd-kancuka__toggle :checked)) .pd-kancuka__veil { fill-opacity: 0; stroke-opacity: var(--opacity-faint); scale: 1.12; }
:where(.pd-kancuka:has(.pd-kancuka__toggle:is(:checked, [aria-pressed="true"]), .pd-kancuka__toggle :checked)) .pd-kancuka__bindu { scale: 1.5; }
:where(.pd-kancuka:has(.pd-kancuka__toggle:is(:checked, [aria-pressed="true"]), .pd-kancuka__toggle :checked)) .pd-kancuka__veiled { display: none; }
:where(.pd-kancuka:has(.pd-kancuka__toggle:is(:checked, [aria-pressed="true"]), .pd-kancuka__toggle :checked)) .pd-kancuka__seen { display: inline; }
@media (prefers-reduced-motion: no-preference) {
  .pd-kancuka__veil { transition: fill-opacity var(--dur-4) var(--ease-in-out), stroke-opacity var(--dur-4) var(--ease-in-out), scale var(--dur-4) var(--ease-out); transition-delay: calc(var(--i) * 60ms); }
  .pd-kancuka__bindu { transition: scale var(--dur-4) var(--ease-out); }
}
@container pd-kancuka (inline-size < 30em) { .pd-kancuka__svg { --pd-kc-fs: 3.25px; } .pd-kancuka__item { grid-template-columns: 3rem minmax(0, 1fr); } }

/* ── forced colours: meaning-bearing marks keep their shape; bands and chips get a frame ── */
@media (forced-colors: active) {
  .pd-tladder__band, .pd-tcard--group, .pd-tladder__sw, .pd-tcard__scale > li { border: 1px solid CanvasText; }
  .pd-tladder__btext, .pd-tcard--group { color: CanvasText; }
  .pd-elglyph__svg, .pd-elements__plate > svg, .pd-tcard__form > svg, .pd-elements__bar { forced-color-adjust: none; }
  .pd-tmandala__ring, .pd-tmandala__lead, .pd-tmandala__arc, .pd-kancuka__veil { stroke: CanvasText; }
  .pd-tmandala__num, .pd-tmandala__node, .pd-tmandala__bindu, .pd-kancuka__bindu, .pd-kancuka__vn { fill: CanvasText; }
  .pd-tmandala__tick:where([aria-selected="true"]) .pd-tmandala__sel, .pd-tmandala__tick:where(:focus-visible) .pd-tmandala__halo { stroke: Highlight; }
  .pd-trika__item::before { background: CanvasText; forced-color-adjust: none; }
  .pd-tladder__link:focus-visible::after { outline-color: Highlight; }
}
}

/* ── part: teaching-skills.css ── */
/* ── PART: teaching-skills ───────────────────────────────────────────────────
   Pandox DS v2 · package "teaching" (second file, split from teaching.css for the 40 KB part budget).
   .pd-skill     SkillTracker  — a new skill: started, 12-week practice heatmap + table, level, milestone
   .pd-skill-list SkillTracker list — compact rows with a 12-week sparkline
   .pd-topics    TopicMap      — constellation of explored domains, sized by entries, hairline links, list fallback
   Same rules as teaching.css: word + shape for state, one saffron bindu per view, colours only via tokens. */
@layer components.site {

/* ══ SkillTracker ═══════════════════════════════════════════════════════════ */
.pd-skill { --pd-skill-cell: 1fr; container: pd-skill / inline-size; display: grid; gap: var(--space-5); max-inline-size: 60rem; color: var(--text); font-size: 1rem; padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-skill__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.pd-skill__name { margin: 0; font: var(--font-headline); font-size: clamp(1.75rem, 6cqi, var(--fs-headline)); text-wrap: balance; }
.pd-skill__dek { margin: var(--space-2) 0 0; max-inline-size: var(--measure); font: var(--font-body-s); color: var(--text-muted); }
.pd-skill__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9em), 1fr)); margin: 0; border-block: var(--hairline) solid var(--rule); }
.pd-skill__facts > div { display: grid; align-content: start; gap: var(--space-1); padding: var(--space-3) var(--space-3) var(--space-3) 0; }
.pd-skill__facts dt { font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
.pd-skill__facts dd { margin: 0; font: var(--font-numeral); letter-spacing: var(--track-mono); line-height: 1.45; font-variant-numeric: tabular-nums; }
/* level ladder: four words; reached = filled, current = bold + filled + marker */
.pd-skill__level { display: grid; gap: var(--space-2); }
.pd-skill__h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin: 0; font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
.pd-skill__h .pd-meta { text-transform: none; letter-spacing: var(--track-mono); }
.pd-skill__ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin: 0; padding: 0; list-style: none; }
.pd-skill__rung { display: grid; gap: var(--space-2); font: var(--font-caption); color: var(--text-subtle); }
.pd-skill__rung::before { content: ""; block-size: .625em; border: var(--hairline) solid var(--border-control); }
.pd-skill__rung.is-reached { color: var(--text-muted); }
.pd-skill__rung.is-reached::before { background: var(--text); border-color: var(--text); }
.pd-skill__rung[aria-current="step"] { color: var(--text); font-weight: 600; }
/* heatmap: 12 week columns × 7 day rows; intensity = jade into the surface, outlined so empty days still read */
.pd-skill__heat { display: grid; gap: var(--space-2); margin: 0; }
.pd-skill__heatwrap { display: grid; grid-template-columns: 2.25em minmax(0, 1fr); gap: var(--space-2); }
.pd-skill__days { display: grid; grid-template-rows: repeat(7, 1fr); gap: 3px; margin: 0; padding: 0; list-style: none; font: var(--font-meta); font-size: .75rem; color: var(--text-subtle); }
.pd-skill__days li { display: flex; align-items: center; }
.pd-skill__grid { display: grid; grid-template-columns: repeat(12, var(--pd-skill-cell)); grid-template-rows: repeat(7, auto); grid-auto-flow: column; gap: 3px; max-inline-size: 26rem; }
.pd-skill__grid i { aspect-ratio: 1; min-block-size: 1.125em; border-radius: 2px; border: var(--hairline) solid var(--line-300); background: transparent; border-color: color-mix(in oklab, var(--line-300) 55%, var(--surface)); }
.pd-skill__grid i[data-l="1"] { background: color-mix(in oklab, var(--jade-700) 22%, var(--surface)); border-color: color-mix(in oklab, var(--jade-700) 45%, var(--surface)); }
.pd-skill__grid i[data-l="2"] { background: color-mix(in oklab, var(--jade-700) 45%, var(--surface)); border-color: color-mix(in oklab, var(--jade-700) 60%, var(--surface)); }
.pd-skill__grid i[data-l="3"] { background: color-mix(in oklab, var(--jade-700) 72%, var(--surface)); border-color: color-mix(in oklab, var(--jade-700) 80%, var(--surface)); }
.pd-skill__grid i[data-l="4"] { background: var(--jade-700); border-color: var(--jade-700); }
.pd-skill__grid i[data-l="x"] { border-style: dashed; border-color: var(--rule); background: transparent; }
.pd-skill__grid i.is-today { position: relative; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--text); }
.pd-skill__grid i.is-today::after { content: ""; position: absolute; inset: 0; margin: auto; inline-size: 40%; block-size: 40%; border-radius: var(--radius-pill); background: var(--bindu-on-paper); box-shadow: inset 0 0 0 1px var(--saffron-700), 0 0 0 1px var(--surface); }
.pd-skill__weeks { display: grid; grid-template-columns: repeat(12, var(--pd-skill-cell)); gap: 3px; max-inline-size: 26rem; grid-column: 2; margin: 0; padding: 0; list-style: none; font: var(--font-meta); font-size: .75rem; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.pd-skill__legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); font: var(--font-caption); color: var(--text-muted); }
.pd-skill__scale { display: inline-flex; align-items: center; gap: 3px; }
.pd-skill__scale i { inline-size: .875em; block-size: .875em; border-radius: 2px; border: var(--hairline) solid color-mix(in oklab, var(--line-300) 55%, var(--surface)); background: transparent; }
.pd-skill__scale i:nth-child(3) { background: color-mix(in oklab, var(--jade-700) 22%, var(--surface)); border-color: color-mix(in oklab, var(--jade-700) 45%, var(--surface)); }
.pd-skill__scale i:nth-child(4) { background: color-mix(in oklab, var(--jade-700) 45%, var(--surface)); border-color: color-mix(in oklab, var(--jade-700) 60%, var(--surface)); }
.pd-skill__scale i:nth-child(5) { background: color-mix(in oklab, var(--jade-700) 72%, var(--surface)); border-color: color-mix(in oklab, var(--jade-700) 80%, var(--surface)); }
.pd-skill__scale i:nth-child(6) { background: var(--jade-700); border-color: var(--jade-700); }
.pd-skill__scale span { margin-inline: var(--space-1); }
.pd-skill__table { margin: 0; }
.pd-skill__tscroll { overflow-x: auto; border-block: var(--hairline) solid var(--rule); }
.pd-skill__tscroll:focus-visible { outline-offset: var(--focus-offset); }
.pd-skill__tscroll table { inline-size: 100%; border-collapse: collapse; font: var(--font-meta); font-variant-numeric: tabular-nums; }
.pd-skill__tscroll th, .pd-skill__tscroll td { padding: var(--space-2) var(--space-2); text-align: end; border-block-end: var(--hairline) solid var(--rule); white-space: nowrap; }
.pd-skill__tscroll th { font-weight: 500; color: var(--text-muted); }
.pd-skill__tscroll th[scope="row"], .pd-skill__tscroll thead th:first-child { text-align: start; }
.pd-skill__tscroll caption { padding: var(--space-2) 0; text-align: start; font: var(--font-caption); color: var(--text-muted); }
.pd-skill__milestone { display: grid; gap: var(--space-3); padding: var(--pad-panel-s); background: var(--surface-sunken); border: var(--hairline) solid var(--rule); border-radius: var(--radius-1); }
.pd-skill__goal { margin: 0; font: var(--font-title); font-size: 1.1875rem; text-wrap: balance; }
.pd-skill__checks { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.pd-skill__checks li { display: grid; grid-template-columns: 1.5em 1fr; gap: var(--space-2); font: var(--font-body-s); }
.pd-skill__checks li::before { content: ""; inline-size: .875em; block-size: .875em; margin-block-start: .3em; border: 1.5px solid var(--text-muted); border-radius: 2px; }
.pd-skill__checks li.is-done { color: var(--text-muted); }
.pd-skill__checks li.is-done::before { border-color: var(--text); background: linear-gradient(var(--text), var(--text)) center / 55% 55% no-repeat; }
.pd-skill__h + .pd-skill__res { margin-block-start: var(--space-2); }
.pd-skill__res { margin: 0; padding: 0; list-style: none; }
.pd-skill__res li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--space-3); padding: 0 0 var(--space-3); border-block-start: var(--hairline) solid var(--rule); font: var(--font-body-s); align-items: center; }
.pd-skill__res li > span:last-child { font: var(--font-caption); color: var(--text-muted); grid-column: 1 / -1; }
.pd-skill__kind { font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
.pd-skill__res a { display: inline-flex; align-items: center; min-block-size: var(--target-min); color: var(--text); text-decoration-color: var(--rule-strong); }
.pd-skill__side { display: grid; gap: var(--space-5); align-content: start; }
.pd-skill__main { display: grid; gap: var(--space-5); align-content: start; min-inline-size: 0; }
@container pd-skill (min-width: 48em) {
  .pd-skill__body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-7); align-items: start; }
}
@container pd-skill (max-width: 30em) {
  .pd-skill__milestone { padding: var(--space-4); }
  .pd-skill__rung { font-size: .75rem; }
}
/* compact row for a list of skills (Now, Learning index) */
.pd-skill-list { container: pd-skill-list / inline-size; margin: 0; padding: 0; list-style: none; border-block-start: var(--hairline) solid var(--rule-strong); color: var(--text); font-size: 1rem; }
.pd-skill-list__row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name spark" "meta level"; gap: var(--space-1) var(--space-4); align-items: center; padding: var(--space-3) 0; border-block-end: var(--hairline) solid var(--rule); }
.pd-skill-list__name { grid-area: name; margin: 0; font: 500 1.1875rem/1.3 var(--font-text); }
.pd-skill-list__name a { color: var(--text); text-decoration: none; }
.pd-skill-list__name a::after { content: ""; position: absolute; inset: 0; }
.pd-skill-list__name a:focus-visible { outline: none; }
.pd-skill-list__row:has(a:focus-visible) { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
@media (hover: hover) { .pd-skill-list__row:hover .pd-skill-list__name a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; } }
.pd-skill-list__meta { grid-area: meta; font: var(--font-meta); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.pd-skill-list__level { grid-area: level; justify-self: end; font: var(--font-caption); color: var(--text); font-weight: 600; }
.pd-skill-list__spark { grid-area: spark; justify-self: end; display: grid; grid-template-columns: repeat(12, .375em); gap: 2px; align-items: end; block-size: 1.5em; }
.pd-skill-list__spark i { display: block; block-size: calc(12% + var(--v, 0) * 22%); background: var(--text-muted); border-radius: 1px; }
.pd-skill-list__spark i[style*="--v:0"] { background: var(--rule-strong); }
@container pd-skill-list (min-width: 40em) {
  .pd-skill-list__row { grid-template-columns: minmax(0, 1fr) 11em 7em 9em; grid-template-areas: "name meta spark level"; }
}
@media (forced-colors: active) {
  .pd-skill__grid i, .pd-skill__scale i, .pd-skill__rung::before { forced-color-adjust: none; border-color: CanvasText; }
  .pd-skill__grid i[data-l="3"], .pd-skill__grid i[data-l="4"], .pd-skill__rung.is-reached::before { background: CanvasText; }
}

/* ══ TopicMap ═══════════════════════════════════════════════════════════════
   Positions are --x / --y in % of the field; links are an aria-hidden SVG in the same 0–100 space
   (preserveAspectRatio none + non-scaling strokes), so one set of coordinates serves every aspect ratio.
   Star radius = sqrt(entries): --r is set per node in em. Default ground is paper with ink points;
   --sky puts the map on sky-900 and re-points the semantic tokens it reads. */
.pd-topics {
  --pd-t-ground: var(--surface); --pd-t-ink: var(--text); --pd-t-muted: var(--text-muted); --pd-t-line: var(--line-300); --pd-t-dim: var(--rule);
  --pd-t-bindu: var(--bindu-on-paper); --pd-t-focus: var(--focus);
  container: pd-topics / inline-size; display: grid; gap: var(--space-4); margin: 0; color: var(--text); font-size: 1rem;
}
.pd-topics--sky { --pd-t-ground: var(--sky-900); --pd-t-ink: var(--on-sky); --pd-t-muted: color-mix(in oklab, var(--on-sky) 78%, var(--sky-900)); --pd-t-line: color-mix(in oklab, var(--on-sky) 52%, var(--sky-900)); --pd-t-dim: color-mix(in oklab, var(--on-sky) 22%, var(--sky-900)); --pd-t-bindu: var(--bindu-on-sky); --pd-t-focus: var(--focus-on-sky); }
.pd-topics__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-topics__title { margin: 0; font: var(--font-headline); font-size: clamp(1.625rem, 5cqi, var(--fs-headline)); }
.pd-topics__field { position: relative; aspect-ratio: 16 / 10; min-block-size: 22rem; background: var(--pd-t-ground); color: var(--pd-t-ink); border: var(--hairline) solid var(--rule); border-radius: var(--radius-1); overflow: hidden; }
.pd-topics--sky .pd-topics__field { border-color: var(--pd-t-ground); }
.pd-topics__links { position: absolute; inset: 7% 8% 13% 8%; inline-size: 84%; block-size: 80%; overflow: visible; pointer-events: none; }
.pd-topics__links line { stroke: var(--pd-t-line); stroke-width: 1px; vector-effect: non-scaling-stroke; transition: stroke var(--dur-2) var(--ease-standard), stroke-width var(--dur-2) var(--ease-standard); }
.pd-topics__links line.is-tentative { stroke-dasharray: 3 4; }
:where(.pd-topics__field.is-tracing) .pd-topics__links line { stroke: var(--pd-t-dim); }
:where(.pd-topics__field.is-tracing) .pd-topics__links line.is-lit { stroke: var(--pd-t-ink); stroke-width: 1.5px; }
.pd-topics__dust { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; pointer-events: none; fill: var(--pd-t-line); opacity: .8; display: none; }
.pd-topics--sky .pd-topics__dust { display: block; }
.pd-topics__nodes { position: absolute; inset: 7% 8% 13% 8%; margin: 0; padding: 0; list-style: none; }
.pd-topics__node { position: absolute; inset-inline-start: calc(var(--x) * 1%); inset-block-start: calc(var(--y) * 1%); translate: -50% -50%; }
.pd-topics__star {
  position: relative; display: grid; justify-items: center; gap: .3em; min-inline-size: var(--target-min); min-block-size: var(--target-min);
  padding: calc((var(--target-min) - var(--r, .5em)) / 2 - 2px) 2px 2px; color: var(--pd-t-ink); text-decoration: none; border-radius: var(--radius-1);
  outline: 0; -webkit-tap-highlight-color: transparent;
}
.pd-topics__dot { inline-size: var(--r, .5em); block-size: var(--r, .5em); border-radius: var(--radius-pill); background: var(--pd-t-ink); box-shadow: 0 0 0 3px var(--pd-t-ground); transition: scale var(--dur-2) var(--ease-out); }
.pd-topics__label { position: absolute; inset-block-start: calc(50% + var(--r, .5em) / 2 + .25em); inset-inline-start: 50%; translate: -50% 0; inline-size: max-content; max-inline-size: 8.5em; text-align: center; font: 500 .8125rem/1.2 var(--font-sans); letter-spacing: var(--track-text); color: var(--pd-t-ink); text-wrap: balance; padding: .125em .25em; background: var(--pd-t-ground); border-radius: var(--radius-1); }
.pd-topics__count { display: block; white-space: nowrap; font: var(--font-meta); font-size: .75rem; color: var(--pd-t-muted); }
.pd-topics__node--new .pd-topics__dot { background: var(--pd-t-bindu); box-shadow: 0 0 0 3px var(--pd-t-ground), 0 0 0 4px var(--pd-t-ink); }
.pd-topics__node--new .pd-topics__label { font-style: italic; }
.pd-topics__star:focus-visible .pd-topics__label, .pd-topics__star.is-active .pd-topics__label { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.pd-topics__star:focus-visible::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius-1); outline: var(--focus-width) solid var(--pd-t-focus); outline-offset: 0; }
:where(.pd-topics__star:is(:focus-visible, .is-active)) .pd-topics__dot { scale: 1.25; }
:where(.pd-topics__field.is-tracing) .pd-topics__star:not(.is-active, .is-near) { --pd-t-ink: var(--pd-t-muted); }
@media (hover: hover) { .pd-topics__star:hover .pd-topics__dot { scale: 1.25; } }
.pd-topics__compass { position: absolute; inset-inline: var(--space-4); inset-block-end: var(--space-3); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); font: var(--font-meta); font-size: .75rem; letter-spacing: var(--track-mono); color: var(--pd-t-muted); pointer-events: none; }
.pd-topics__readout { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4); min-block-size: 3em; margin: 0; padding-block: var(--space-2); border-block-end: var(--hairline) solid var(--rule); font: var(--font-body-s); color: var(--text-muted); }
.pd-topics__readout strong { font: var(--font-title); font-size: 1.1875rem; color: var(--text); }
.pd-topics__legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; font: var(--font-caption); color: var(--text-muted); }
.pd-topics__legend li { display: inline-flex; align-items: center; gap: var(--space-2); }
.pd-topics__key { display: inline-block; flex: none; border-radius: var(--radius-pill); background: var(--text); }
.pd-topics__key--s { inline-size: .375em; block-size: .375em; }
.pd-topics__key--l { inline-size: .875em; block-size: .875em; }
.pd-topics__key--line { inline-size: 1.5em; block-size: 0; border-radius: 0; background: none; border-block-start: 1px solid var(--border-control); }
.pd-topics__key--dash { inline-size: 1.5em; block-size: 0; border-radius: 0; background: none; border-block-start: 1px dashed var(--border-control); }
.pd-topics__key--new { inline-size: .625em; block-size: .625em; background: var(--text-muted); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--text); }
/* list fallback: the same topics as plain links, grouped */
.pd-topics__index { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13em), 1fr)); gap: 0 var(--space-5); }
.pd-topics__group { margin: 0; }
.pd-topics__group h4 { margin: 0; padding: var(--space-3) 0 var(--space-2); border-block-start: var(--hairline) solid var(--rule-strong); font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
.pd-topics__group ul { margin: 0; padding: 0; list-style: none; }
.pd-topics__group li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); border-block-start: var(--hairline) solid var(--rule); }
.pd-topics__group a { display: flex; align-items: center; min-block-size: var(--target-min); color: var(--text); font: var(--font-body-s); text-decoration-color: var(--rule-strong); text-decoration-thickness: 1px; }
.pd-topics__group a:hover { text-decoration-color: currentColor; }
.pd-topics__group li > span { font: var(--font-meta); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
@container pd-topics (max-width: 36em) {
  .pd-topics__field { aspect-ratio: 3 / 4.6; min-block-size: 0; }
  .pd-topics__links, .pd-topics__nodes { inset: 6% 13% 12% 13%; inline-size: 74%; block-size: 82%; }
  .pd-topics__label { max-inline-size: 6.5em; font-size: .75rem; }
  /* size already encodes count; the readout repeats it. Keep it in the accessible name only. */
  .pd-topics__count { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@container pd-topics (min-width: 60em) {
  .pd-topics__label { max-inline-size: 10em; font-size: .875rem; }
}
@media (prefers-reduced-motion: reduce) { .pd-topics__dot, .pd-topics__links line { transition: none; } }
@media (forced-colors: active) {
  .pd-topics__dot, .pd-topics__key { forced-color-adjust: none; background: CanvasText; box-shadow: none; }
  .pd-topics__links line { stroke: CanvasText; }
  .pd-topics__star:focus-visible::before { outline-color: Highlight; }
}
@media print { .pd-topics--sky { --pd-t-ground: var(--surface); --pd-t-ink: var(--text); --pd-t-muted: var(--text-muted); --pd-t-line: var(--border-control); } }

} /* end components.site · teaching-skills */

/* ── part: teaching.css ── */
/* ── PART: teaching ──────────────────────────────────────────────────────────
   Pandox DS v2 · package "teaching" · group "Learning & Teaching".
   .pd-syllabus  TeachingSyllabus — a course outline: audience, prerequisites, modules → lessons, outcomes, why
   .pd-lesson    LessonCard       — one lesson: objective, three key ideas, exercise, reading, prev / next
   .pd-view      ViewsCard        — a position for 10 Views: "I think…", confidence, what would change my mind
   .pd-view-list ViewsCard list   — the compact index of positions
   SkillTracker (.pd-skill) and TopicMap (.pd-topics) live in teaching-skills.css.
   State is always word + shape (filled / half / outlined / struck), so Ink and Void read without hue.
   One saffron bindu per view: the module in progress, the lesson numeral, the current confidence step,
   today's practice cell, the newest topic. Colours only via tokens; sizes in em; no [data-theme] selectors. */
@layer components.site {

/* ══ shared glyph: status by shape (planned ○ · drafted ◐ · in progress ● saffron · done ●) ═══════════ */
.pd-syllabus__st, .pd-lesson__st {
  display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap;
  font: var(--font-caption); letter-spacing: var(--track-text); color: var(--text-muted);
}
.pd-syllabus__st::before, .pd-lesson__st::before {
  content: ""; flex: none; inline-size: .75em; block-size: .75em; border-radius: var(--radius-pill);
  border: .125em solid var(--text-muted); background: transparent;
}
.pd-syllabus__st--drafted::before, .pd-lesson__st--drafted::before { background: linear-gradient(90deg, var(--text-muted) 50%, transparent 50%); }
.pd-syllabus__st--taught, .pd-lesson__st--taught { color: var(--text); }
.pd-syllabus__st--taught::before, .pd-lesson__st--taught::before { border-color: var(--text); background: var(--text); }
.pd-syllabus__st--now { color: var(--text); font-weight: 600; }
.pd-syllabus__st--now::before { border-color: var(--text); background: var(--bindu-on-paper); box-shadow: 0 0 0 .1875em var(--surface), 0 0 0 calc(.1875em + 1px) var(--text); }

/* ══ TeachingSyllabus ═══════════════════════════════════════════════════════ */
.pd-syllabus { container: pd-syllabus / inline-size; display: grid; gap: var(--space-6); max-inline-size: var(--page-max); color: var(--text); font-size: 1rem; }
.pd-syllabus__head { display: grid; gap: var(--space-3); padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-syllabus__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.pd-syllabus__title { margin: 0; font: var(--font-display-m); letter-spacing: var(--track-display); text-wrap: balance; }
.pd-syllabus__title em { font-style: italic; font-weight: 400; }
.pd-syllabus__dek { margin: 0; max-inline-size: var(--measure); font: var(--font-lede); color: var(--text-muted); text-wrap: pretty; }
.pd-syllabus__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11em), 1fr)); margin: 0; border-block: var(--hairline) solid var(--rule); }
.pd-syllabus__fact { display: grid; align-content: start; gap: var(--space-1); padding: var(--space-3) var(--space-4) var(--space-3) 0; border-block-end: var(--hairline) solid var(--rule); margin-block-end: -1px; }
.pd-syllabus__fact dt { font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
.pd-syllabus__fact dd { margin: 0; font: var(--font-body-s); }
.pd-syllabus__fact .pd-syllabus__mono { font: var(--font-numeral); letter-spacing: var(--track-mono); font-variant-numeric: tabular-nums; line-height: 1.5; }
.pd-syllabus__why { display: grid; gap: var(--space-3); margin: 0; padding: var(--space-5) 0; border-block: var(--hairline) solid var(--rule-strong); }
.pd-syllabus__why-label { margin: 0; font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
.pd-syllabus__why p { margin: 0; max-inline-size: 30em; font: var(--font-pullquote); font-size: clamp(1.375rem, 4.5cqi, var(--fs-pullquote)); text-wrap: pretty; }
.pd-syllabus__why footer { font: var(--font-caption); color: var(--text-muted); }
.pd-syllabus__h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin: 0 0 var(--space-3); font: var(--font-title); }
.pd-syllabus__h .pd-meta { font: var(--font-meta); }
.pd-syllabus__legend .pd-syllabus__st--now::before { background: var(--text-muted); }
.pd-syllabus__legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.pd-syllabus__modules { margin: 0; padding: 0; list-style: none; border-block-start: var(--hairline) solid var(--rule-strong); counter-reset: pd-mod; }
.pd-syllabus__module { border-block-end: var(--hairline) solid var(--rule); }
.pd-syllabus__module > details > summary { list-style: none; }
.pd-syllabus__module > details > summary::-webkit-details-marker { display: none; }
.pd-syllabus__sum {
  display: grid; grid-template-columns: 3em minmax(0, 1fr) auto; grid-template-areas: "num title chev" "num meta meta";
  align-items: baseline; gap: var(--space-1) var(--space-3); min-block-size: var(--target-min); padding: var(--space-4) 0; cursor: pointer;
}
.pd-syllabus__num { grid-area: num; font: var(--font-numeral); letter-spacing: var(--track-mono); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.pd-syllabus__mtitle { grid-area: title; font: var(--font-title); font-size: clamp(1.1875rem, 3.6cqi, var(--fs-title)); text-wrap: balance; }
.pd-syllabus__mmeta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-5); }
.pd-syllabus__dur { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.pd-syllabus__chev { grid-area: chev; align-self: start; margin-block-start: .55em; inline-size: .625em; block-size: .625em; border-inline-end: 1.5px solid var(--text-muted); border-block-end: 1.5px solid var(--text-muted); rotate: 45deg; translate: 0 -.2em; transition: rotate var(--dur-2) var(--ease-standard); }
.pd-syllabus__module > details[open] .pd-syllabus__chev { rotate: 225deg; translate: 0 .15em; }
@media (hover: hover) { .pd-syllabus__sum:hover .pd-syllabus__mtitle { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; } }
.pd-syllabus__sum:focus-visible { outline-offset: var(--focus-offset); }
.pd-syllabus__body { display: grid; gap: var(--space-3); padding: 0 0 var(--space-5) 3.75em; }
.pd-syllabus__body > p { margin: 0; max-inline-size: var(--measure); font: var(--font-body-s); color: var(--text-muted); }
.pd-syllabus__lessons { margin: 0; padding: 0; list-style: none; }
.pd-syllabus__lesson { display: grid; grid-template-columns: 3em minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: 0; border-block-start: var(--hairline) solid var(--rule); font: var(--font-body-s); }
.pd-syllabus__lesson > span:not(.pd-syllabus__dur) { display: flex; align-items: center; min-block-size: var(--target-min); }
.pd-syllabus__lesson > span:first-child { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.pd-syllabus__lesson a { display: flex; align-items: center; min-block-size: var(--target-min); color: var(--text); text-decoration-color: var(--rule-strong); }
.pd-syllabus__lesson a:hover { text-decoration-color: currentColor; }
.pd-syllabus__grid { display: grid; gap: var(--space-6); }
.pd-syllabus__total { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); padding-block: var(--space-3); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.pd-syllabus__outcomes { margin: 0; padding: 0; list-style: none; counter-reset: pd-out; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17em), 1fr)); gap: 0 var(--space-6); }
.pd-syllabus__outcomes li { counter-increment: pd-out; display: grid; grid-template-columns: 2.5em 1fr; gap: var(--space-2); padding: var(--space-3) 0; border-block-start: var(--hairline) solid var(--rule); font: var(--font-body-s); text-wrap: pretty; }
.pd-syllabus__outcomes li::before { content: counter(pd-out, decimal-leading-zero); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); line-height: 1.9; }
.pd-syllabus__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); padding-block-start: var(--space-4); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-syllabus__foot .pd-meta { font: var(--font-meta); }
.pd-syllabus__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@container pd-syllabus (min-width: 48em) {
  .pd-syllabus__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-7); align-items: start; }
  .pd-syllabus__sum { grid-template-columns: 4em minmax(0, 1fr) auto auto; grid-template-areas: "num title meta chev"; }
  .pd-syllabus__mmeta { justify-content: end; gap: var(--space-5); }
  .pd-syllabus__body { padding-inline-start: 4.75em; }
  .pd-syllabus__outcomes { grid-template-columns: 1fr; }
}
@container pd-syllabus (max-width: 30em) {
  .pd-syllabus__body { padding-inline-start: 0; }
  .pd-syllabus__lesson { grid-template-columns: 2.75em minmax(0, 1fr) auto; }
}
@media print { .pd-syllabus__module > details:not([open]) > .pd-syllabus__body { display: grid; } .pd-syllabus__chev, .pd-syllabus__actions { display: none; } }
@media (forced-colors: active) { .pd-syllabus__st::before, .pd-lesson__st::before { forced-color-adjust: none; border-color: CanvasText; } .pd-syllabus__st--taught::before, .pd-syllabus__st--now::before, .pd-lesson__st--taught::before { background: CanvasText; } }

/* ══ LessonCard ═════════════════════════════════════════════════════════════ */
.pd-lesson { container: pd-lesson / inline-size; display: grid; gap: var(--space-5); max-inline-size: 60rem; padding: var(--space-5) 0; color: var(--text); border-block: var(--hairline) solid var(--rule-strong); font-size: 1rem; }
.pd-lesson__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-5); align-items: start; }
.pd-lesson__numeral { grid-row: span 3; margin: 0; font: 500 clamp(3rem, 14cqi, 5.5rem)/.85 var(--font-display); letter-spacing: var(--track-display); font-variant-numeric: lining-nums tabular-nums; color: var(--text); }
.pd-lesson__numeral::after { content: ""; display: inline-block; inline-size: .12em; block-size: .12em; margin-inline-start: .05em; border-radius: var(--radius-pill); background: var(--bindu-on-paper); box-shadow: inset 0 0 0 max(1px, .012em) var(--saffron-700); }
.pd-lesson__of { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); align-items: baseline; }
.pd-lesson__of a { display: inline-flex; align-items: center; min-block-size: var(--target-min); margin-block: calc((var(--target-min) - 1.2em) / -2); color: var(--text-muted); font: var(--font-caption); }
.pd-lesson__title { margin: 0; font: var(--font-headline); font-size: clamp(1.625rem, 5.5cqi, var(--fs-headline)); text-wrap: balance; }
.pd-lesson__title em { font-style: italic; }
.pd-lesson__meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); align-items: center; margin: 0; }
.pd-lesson__meta > span { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.pd-lesson__objective { display: grid; gap: var(--space-2); margin: 0; padding: var(--space-4) 0; border-block: var(--hairline) solid var(--rule); }
.pd-lesson__objective p { margin: 0; max-inline-size: var(--measure); font: var(--font-lede); text-wrap: pretty; }
.pd-lesson__label + .pd-lesson__ideas { margin-block-start: var(--space-3); }
.pd-lesson__label + .pd-lesson__reading { margin-block-start: var(--space-2); }
.pd-lesson__label { margin: 0; font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
.pd-lesson__ideas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14em), 1fr)); gap: 0 var(--space-5); margin: 0; padding: 0; list-style: none; counter-reset: pd-idea; }
.pd-lesson__idea { counter-increment: pd-idea; display: grid; align-content: start; gap: var(--space-2); padding: var(--space-3) 0 var(--space-4); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-lesson__idea::before { content: counter(pd-idea, decimal-leading-zero); font: var(--font-numeral); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-lesson__idea h4 { margin: 0; font: 500 1.1875rem/1.3 var(--font-text); text-wrap: balance; }
.pd-lesson__idea p { margin: 0; font: var(--font-body-s); color: var(--text-muted); text-wrap: pretty; }
.pd-lesson__term { font: var(--font-iast); font-size: 1em; }
.pd-lesson__term-deva { font-family: var(--font-deva); font-style: normal; color: var(--text-muted); }
.pd-lesson__exercise { display: grid; gap: var(--space-3); padding: var(--space-5); background: var(--surface-sunken); border: var(--hairline) solid var(--rule); border-radius: var(--radius-1); }
.pd-lesson__exercise-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-2) var(--space-4); }
.pd-lesson__exercise-head h3 { margin: 0; font: var(--font-title); font-size: 1.1875rem; }
.pd-lesson__exercise ol { margin: 0; padding-inline-start: 1.5em; display: grid; gap: var(--space-2); font: var(--font-body-s); }
.pd-lesson__exercise ol li::marker { font: var(--font-meta); color: var(--text-subtle); }
.pd-lesson__exercise > p { margin: 0; font: var(--font-caption); color: var(--text-muted); }
.pd-lesson__reading { margin: 0; padding: 0; list-style: none; }
.pd-lesson__read { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-4); align-items: baseline; padding: var(--space-3) 0; border-block-start: var(--hairline) solid var(--rule); }
.pd-lesson__read cite { font: italic 400 1rem/1.4 var(--font-text); }
.pd-lesson__read > span:last-child { grid-column: 1 / -1; font: var(--font-caption); color: var(--text-muted); }
.pd-lesson__req { font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
.pd-lesson__req--yes { color: var(--text); }
.pd-lesson__nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); padding-block-start: var(--space-4); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-lesson__step { display: grid; gap: var(--space-1); min-block-size: var(--target-min); padding-block: var(--space-2); color: var(--text); text-decoration: none; border-radius: var(--radius-1); }
.pd-lesson__step > span:first-child { font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
.pd-lesson__step > span:last-child { font: 500 1rem/1.35 var(--font-text); text-decoration: underline; text-decoration-color: var(--rule-strong); text-decoration-thickness: 1px; text-underline-offset: .22em; }
.pd-lesson__step--next { text-align: end; justify-items: end; }
.pd-lesson__step--next > span:first-child::after { content: " →"; }
.pd-lesson__step--prev > span:first-child::before { content: "← "; }
@media (hover: hover) { .pd-lesson__step:hover > span:last-child { text-decoration-color: currentColor; } }
.pd-lesson__step[aria-disabled="true"] { color: var(--text-subtle); pointer-events: none; }
.pd-lesson__step[aria-disabled="true"] > span:last-child { text-decoration: none; }
.pd-lesson__body { display: grid; gap: var(--space-5); }
@container pd-lesson (min-width: 48em) {
  .pd-lesson__body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
}
@container pd-lesson (max-width: 30em) {
  .pd-lesson__head { grid-template-columns: minmax(0, 1fr); }
  .pd-lesson__numeral { grid-row: auto; }
  .pd-lesson__exercise { padding: var(--space-4); }
}
/* compact: one lesson in a grid of the course */
.pd-lesson-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 0 var(--space-5); margin: 0; padding: 0; list-style: none; }
.pd-lesson--compact { position: relative; grid-template-rows: auto auto 1fr auto; gap: var(--space-2); padding: var(--space-4) 0; border-block-width: 0 var(--hairline); border-block-start: var(--hairline) solid var(--rule-strong); border-block-end: 0; }
.pd-lesson--compact .pd-lesson__cnum { display: flex; justify-content: space-between; font: var(--font-numeral); letter-spacing: var(--track-mono); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.pd-lesson--compact .pd-lesson__ctitle { margin: 0; font: 500 1.1875rem/1.25 var(--font-text); text-wrap: balance; }
.pd-lesson--compact .pd-lesson__ctitle a { color: var(--text); text-decoration: none; }
.pd-lesson--compact .pd-lesson__ctitle a::after { content: ""; position: absolute; inset: 0; }
.pd-lesson--compact .pd-lesson__ctitle a:focus-visible { outline: none; }
.pd-lesson--compact:has(a:focus-visible) { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
@media (hover: hover) { .pd-lesson--compact:hover .pd-lesson__ctitle a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; } }
.pd-lesson--compact p { margin: 0; font: var(--font-body-s); color: var(--text-muted); text-wrap: pretty; }
.pd-lesson--compact .pd-lesson__cfoot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); align-items: center; padding-block-start: var(--space-2); }
.pd-lesson--compact .pd-lesson__cfoot > span:first-child { font: var(--font-meta); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.pd-lesson--current .pd-lesson__cnum > span:first-child::after { content: ""; display: inline-block; inline-size: .5em; block-size: .5em; margin-inline-start: .4em; border-radius: var(--radius-pill); background: var(--text); }

/* ══ ViewsCard ══════════════════════════════════════════════════════════════ */
.pd-view { container: pd-view / inline-size; display: grid; gap: var(--space-5); max-inline-size: 56rem; color: var(--text); font-size: 1rem; padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-view__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.pd-view__statement { display: grid; gap: var(--space-2); margin: 0; }
.pd-view__frame { margin: 0; font: var(--font-iast); font-style: italic; color: var(--text-muted); }
.pd-view__claim { margin: 0; max-inline-size: 22em; font: var(--font-display-m); font-size: clamp(2rem, 7cqi, var(--fs-display-m)); letter-spacing: var(--track-display); text-wrap: balance; }
.pd-view__claim em { font-style: italic; font-weight: 400; }
.pd-view__band { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-4); border-block: var(--hairline) solid var(--rule); }
.pd-view__dates { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin: 0; }
.pd-view__dates > div { display: grid; gap: var(--space-1); }
.pd-view__dates dt { font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
.pd-view__dates dd { margin: 0; font: var(--font-numeral); letter-spacing: var(--track-mono); font-variant-numeric: tabular-nums; line-height: 1.45; }
/* confidence: three steps, filled up to the current one; the current word is bold; one saffron bindu marks it */
.pd-view__conf { display: grid; gap: var(--space-2); margin: 0; min-inline-size: min(100%, 20em); }
.pd-view__conf-label { font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
.pd-view__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin: 0; padding: 0; list-style: none; }
.pd-view__step { display: grid; gap: var(--space-2); font: var(--font-caption); color: var(--text-subtle); }
.pd-view__step::before { content: ""; block-size: .625em; border: var(--hairline) solid var(--border-control); background: transparent; }
.pd-view__step:first-child::before { border-start-start-radius: var(--radius-pill); border-end-start-radius: var(--radius-pill); }
.pd-view__step:last-child::before { border-start-end-radius: var(--radius-pill); border-end-end-radius: var(--radius-pill); }
.pd-view__step.is-reached { color: var(--text-muted); }
.pd-view__step.is-reached::before { background: var(--text); border-color: var(--text); }
.pd-view__step[aria-current="step"] { color: var(--text); font-weight: 600; }
.pd-view__step[aria-current="step"] > span { display: inline-flex; align-items: center; gap: var(--space-2); }
.pd-view__step[aria-current="step"] > span::before { content: ""; inline-size: .5em; block-size: .5em; border-radius: var(--radius-pill); background: var(--bindu-on-paper); box-shadow: 0 0 0 1px var(--text); }
.pd-view__sections { display: grid; gap: var(--space-5); align-items: start; }
.pd-view__sec { display: grid; align-content: start; gap: var(--space-2); }
.pd-view__h { margin: 0; font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
.pd-view__sec p { margin: 0; max-inline-size: var(--measure); font: var(--font-body); text-wrap: pretty; }
.pd-view__change { padding: var(--pad-panel-s); background: var(--surface-sunken); border: var(--hairline) solid var(--rule); border-radius: var(--radius-1); }
.pd-view__change ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.pd-view__change li { display: grid; grid-template-columns: 1.25em 1fr; gap: var(--space-2); font: var(--font-body-s); text-wrap: pretty; }
.pd-view__change li::before { content: ""; inline-size: .625em; block-size: .625em; margin-block-start: .45em; border: 1.5px solid var(--text-muted); border-radius: var(--radius-pill); }
.pd-view__history { margin: 0; padding: 0; list-style: none; }
.pd-view__history li { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: var(--space-3); padding: var(--space-2) 0; border-block-start: var(--hairline) solid var(--rule); font: var(--font-body-s); }
.pd-view__history time { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); line-height: 1.9; font-variant-numeric: tabular-nums; }
.pd-view__related { margin: 0; padding: 0; list-style: none; }
.pd-view__related li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding: var(--space-1) 0; border-block-start: var(--hairline) solid var(--rule); }
.pd-view__related a { display: inline-flex; align-items: center; min-block-size: var(--target-min); font: 500 1rem/1.35 var(--font-text); color: var(--text); text-decoration-color: var(--rule-strong); text-decoration-thickness: 1px; }
.pd-view__related a:hover { text-decoration-color: currentColor; }
@container pd-view (min-width: 44em) {
  .pd-view__band { grid-template-columns: minmax(0, 1fr) minmax(16em, 22em); align-items: end; }
  .pd-view__sections { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: var(--space-7); }
}
@container pd-view (max-width: 30em) {
  .pd-view__related li { flex-wrap: wrap; }
  .pd-view__history li { grid-template-columns: 1fr; gap: 0; }
  .pd-view__change { padding: var(--space-4); }
}
/* withdrawn: I no longer think this — claim struck, a note says why */
.pd-view--withdrawn .pd-view__claim { color: var(--text-muted); text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: var(--text-muted); }
.pd-view__withdrawn { margin: 0; padding: var(--space-3) 0; border-block: var(--hairline) solid var(--rule-strong); font: var(--font-body-s); }
.pd-view__withdrawn strong { font-weight: 600; }

/* ── ViewsCard · compact list ── */
/* a Rows variant (§19 "the one row list"): same lead column, title font, hairline rules and stretched link as .pd-rows--entry, plus a confidence slot that reuses the .pd-view__steps meter */
.pd-view-list { container: pd-view-list / inline-size; margin: 0; padding: 0; list-style: none; border-block-start: var(--hairline) solid var(--rule-strong); color: var(--text); font-size: 1rem; }
.pd-view-list__row { position: relative; display: grid; grid-template-columns: minmax(0, var(--row-lead)) minmax(0, 1fr); grid-template-areas: "num claim" "num meta" "num conf"; gap: var(--space-1) var(--space-3); align-items: baseline; padding: var(--space-4) 0; border-block-end: var(--hairline) solid var(--rule); }
.pd-view-list__num { grid-area: num; font: var(--font-numeral); letter-spacing: var(--track-mono); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.pd-view-list__claim { grid-area: claim; margin: 0; font: var(--font-title); color: var(--text); text-wrap: pretty; }
.pd-view-list__claim a { color: var(--text); text-decoration: none; }
.pd-view-list__claim a::after { content: ""; position: absolute; inset: 0; }
.pd-view-list__claim a:focus-visible { outline: none; }
.pd-view-list__row:has(a:focus-visible) { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
@media (hover: hover) { .pd-view-list__row:hover .pd-view-list__claim a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; } }
.pd-view-list__meta { grid-area: meta; white-space: nowrap; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.pd-view-list__conf { grid-area: conf; display: inline-flex; align-items: center; gap: var(--space-2); margin-block-start: var(--space-1); font: var(--font-caption); color: var(--text-muted); }
.pd-view-list__bars { display: inline-grid; grid-template-columns: repeat(3, 1.5em); gap: 3px; }
/* same glyph as .pd-view__step::before: .625em cells, pill ends, ink when reached */
.pd-view-list__bars i { block-size: .625em; border: var(--hairline) solid var(--border-control); }
.pd-view-list__bars i:first-child { border-start-start-radius: var(--radius-pill); border-end-start-radius: var(--radius-pill); }
.pd-view-list__bars i:last-child { border-start-end-radius: var(--radius-pill); border-end-end-radius: var(--radius-pill); }
.pd-view-list__bars i.is-on { background: var(--text); border-color: var(--text); }
.pd-view-list__row--withdrawn .pd-view-list__claim a { color: var(--text-muted); text-decoration: line-through; text-decoration-thickness: 1px; }
@container pd-view-list (min-width: 44em) {
  .pd-view-list__row { grid-template-columns: minmax(0, var(--row-lead)) minmax(0, 1fr) max-content 10em; column-gap: var(--space-5); grid-template-areas: "num claim meta conf"; align-items: baseline; }
  .pd-view-list__conf { margin: 0; justify-self: end; }
}

@media (forced-colors: active) {
  .pd-view__step::before, .pd-view-list__bars i { forced-color-adjust: none; border-color: CanvasText; }
  .pd-view__step.is-reached::before, .pd-view-list__bars i.is-on { background: CanvasText; }
}

} /* end components.site · teaching */

/* ── part: techdocs-ref.css ── */
/* ── PART: techdocs (reference half) ───────────────────────────────────────
   Pandox DS v2 · package "techdocs" · split from parts/techdocs.css for the 40 KB part budget.
   Needs techdocs.css (shared atoms .pd-td-label .pd-td-pill .pd-td-mark .pd-td-method .pd-td-sec; .pd-td-table is in site.css).
   .pd-td-api APIReference · .pd-td-log Changelog · .pd-td-bench BenchmarkTable ·
   .pd-td-matrix ComparisonMatrix · .pd-td-kv KeyValueSpec (+ --sourced = SpecSheet) */
@layer components.site {

/* ══ APIReference (.pd-td-api) ═════════════════════════════════════════════ */
.pd-td-api { container: pd-td-api / inline-size; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); max-inline-size: 64rem; margin: 0; color: var(--text); font-size: 1rem; }
.pd-td-api__head { display: grid; gap: var(--space-3); padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-td-api__name { margin: 0; font: var(--font-title); text-wrap: balance; }
.pd-td-api__line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0; }
.pd-td-api__path { min-inline-size: 0; font: 500 var(--fs-body-s)/1.5 var(--font-mono); color: var(--text); overflow-wrap: anywhere; }
.pd-td-api__path :where(var) { font-style: normal; font-weight: 600; color: var(--text); padding: 0 .15em; border-block-end: 2px solid var(--rule-strong); }
.pd-td-api__path :where(.pd-td-api__base) { color: var(--text-subtle); font-weight: 400; }
.pd-td-api__desc { margin: 0; max-inline-size: var(--measure-wide); font: var(--font-body); color: var(--text); }
.pd-td-api__auth { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: var(--space-1) var(--space-3); align-items: start; max-inline-size: var(--measure-wide); padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule); font: var(--font-ui); font-size: var(--fs-body-s); color: var(--text); }
.pd-td-api__auth svg { inline-size: 1.25rem; block-size: 1.25rem; color: var(--text); }
.pd-td-api__auth p { margin: 0; }
.pd-td-api__auth code { font: 400 .875em/1.3 var(--font-mono); }
.pd-td-api__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6) var(--gutter); }
.pd-td-api__pname { font: 600 var(--fs-caption)/1.45 var(--font-mono); letter-spacing: var(--track-mono); color: var(--text); white-space: nowrap; }
.pd-td-api__ptype { display: block; font: 400 var(--fs-meta)/1.4 var(--font-mono); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-td-api__req { display: inline-block; margin-block-start: var(--space-1); font: 600 var(--fs-meta)/1.3 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text); }
.pd-td-api__req::before { content: "* "; }
.pd-td-api__opt { display: inline-block; margin-block-start: var(--space-1); font: 400 var(--fs-meta)/1.3 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-subtle); }
.pd-td-api__codes { margin: 0; padding: 0; list-style: none; font: var(--font-ui); font-size: var(--fs-body-s); }
.pd-td-api__codes > li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: baseline; gap: var(--space-3); padding-block: var(--space-2); border-block-end: var(--hairline) solid var(--rule); }
.pd-td-api__code { display: inline-flex; align-items: center; gap: var(--space-2); font: 600 var(--fs-caption)/1.45 var(--font-mono); color: var(--text); white-space: nowrap; }
.pd-td-api__code::before { content: ""; flex: none; box-sizing: border-box; inline-size: .7em; block-size: .7em; border: .125em solid currentColor; border-radius: var(--radius-pill); background: currentColor; }
.pd-td-api__code--4xx::before { background: transparent; }
.pd-td-api__code--5xx { color: var(--danger); }
.pd-td-api__code--5xx::before { border-radius: 0; background: transparent; rotate: 45deg; scale: .85; }
.pd-td-api__codes p { margin: 0; color: var(--text-muted); }
.pd-td-api__codes b { font-weight: 500; color: var(--text); }
.pd-td-api .pd-code__pre { padding-inline-start: var(--space-4); }
.pd-td-api__main { display: grid; gap: var(--space-6); min-inline-size: 0; }
.pd-td-api .pd-code .pd-tabs__list { margin-inline: 0; padding-inline: var(--space-4) var(--focus-width); background-size: 100% 1px; }
.pd-td-api .pd-code .pd-tabs__panel { padding: 0; }
.pd-td-api .pd-code .pd-tabs__tab { font-size: var(--fs-caption); }
.pd-td-api .pd-code__line { padding-inline-start: 0; }
.pd-td-api .pd-code__line::before { content: none; }
@container pd-td-api (inline-size >= 56em) {
  .pd-td-api__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
  .pd-td-api__examples { position: sticky; inset-block-start: var(--space-4); }
}

/* ══ Changelog (.pd-td-log) ════════════════════════════════════════════════ */
.pd-td-log { container: pd-td-log / inline-size; max-inline-size: 60rem; margin: 0; padding: 0; list-style: none; color: var(--text); font-size: 1rem; }
.pd-td-log__rel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-4) var(--space-7); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-td-log__body { display: grid; gap: var(--space-4); min-inline-size: 0; }
.pd-td-log__head { display: grid; gap: var(--space-2); align-content: start; }
.pd-td-log__ver { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0; font: 500 var(--fs-title)/1.1 var(--font-mono); letter-spacing: 0; color: var(--text); font-variant-numeric: tabular-nums; }
.pd-td-log__ver a { color: inherit; text-decoration: none; }
.pd-td-log__ver a:hover { text-decoration: underline var(--hairline); text-underline-offset: .2em; }
.pd-td-log__date { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-td-log__flags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
.pd-td-log__flag { display: inline-flex; align-items: center; gap: var(--space-2); padding: .125rem var(--space-2); border: var(--hairline) solid var(--rule-strong); border-radius: var(--radius-1); font: 600 var(--fs-meta)/1.3 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text); white-space: nowrap; }
.pd-td-log__flag--breaking { color: var(--danger); border-color: var(--danger); }
.pd-td-log__flag--breaking::before { content: "!"; }
.pd-td-log__sum { margin: 0; max-inline-size: var(--measure); font: var(--font-body); color: var(--text); }
.pd-td-log__groups { display: grid; gap: var(--space-4); }
.pd-td-log__group { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.pd-td-log__gname { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font: 600 var(--fs-meta)/1.3 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text); }
.pd-td-log__gname::before { display: inline-grid; place-content: center; inline-size: 1.25rem; block-size: 1.25rem; border: var(--hairline) solid var(--rule-strong); border-radius: var(--radius-1); font-weight: 600; }
.pd-td-log__group--added .pd-td-log__gname::before { content: "+"; }
.pd-td-log__group--changed .pd-td-log__gname::before { content: "~"; }
.pd-td-log__group--fixed .pd-td-log__gname::before { content: "✓"; }
.pd-td-log__group--removed .pd-td-log__gname::before { content: "−"; }
.pd-td-log__group--security .pd-td-log__gname::before { content: "!"; }
.pd-td-log__group--deprecated .pd-td-log__gname::before { content: "↓"; }
.pd-td-log__group ul { margin: 0; padding: 0; list-style: none; font: var(--font-ui); font-size: var(--fs-body-s); }
.pd-td-log__group li { padding-block: var(--space-1); }
.pd-td-log__group li + li { border-block-start: var(--hairline) solid var(--rule); }
.pd-td-log__group code { font: 400 .875em/1.3 var(--font-mono); }
.pd-td-log__ref { margin-inline-start: .35em; font: var(--font-meta); letter-spacing: var(--track-mono); }
.pd-td-log__links { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); margin: 0; padding: 0; list-style: none; font: var(--font-caption); }
.pd-td-log__links a { display: inline-flex; align-items: center; min-block-size: var(--target-min); }
@container pd-td-log (inline-size >= 40em) {
  .pd-td-log__rel { grid-template-columns: 12rem minmax(0, 1fr); gap: var(--space-4) var(--gutter); }
  .pd-td-log__group { grid-template-columns: 8.5rem minmax(0, 1fr); align-items: baseline; }
}

/* ══ BenchmarkTable (.pd-td-bench) ═════════════════════════════════════════ */
.pd-td-bench { container: pd-td-bench / inline-size; max-inline-size: 64rem; margin: 0; color: var(--text); font-size: 1rem; }
.pd-td-bench__head { display: grid; gap: var(--space-2); margin-block-end: var(--space-4); padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-td-bench__title { margin: 0; font: var(--font-title); }
.pd-td-bench__dek { margin: 0; max-inline-size: var(--measure-wide); font: var(--font-caption); font-size: var(--fs-body-s); color: var(--text-muted); }
.pd-td-bench__scroll { position: relative; max-inline-size: 100%; overflow-x: auto; }
.pd-td-bench__scroll:focus-visible { outline-offset: var(--focus-offset); }
.pd-td-bench table { inline-size: 100%; min-inline-size: 40rem; border-collapse: collapse; font: var(--font-ui); font-size: var(--fs-body-s); font-variant-numeric: tabular-nums; }
.pd-td-bench th, .pd-td-bench td { padding: var(--space-3) var(--space-4) var(--space-3) 0; border-block-end: var(--hairline) solid var(--rule); text-align: start; vertical-align: middle; }
.pd-td-bench :where(th, td):last-child { padding-inline-end: 0; }
.pd-td-bench thead th { padding-block: 0 var(--space-1); border-block-end: 0; font: 600 var(--fs-caption)/1.3 var(--font-sans); color: var(--text); vertical-align: bottom; }
.pd-td-bench thead tr + tr th { padding-block: 0 var(--space-2); border-block-end: var(--hairline) solid var(--rule-strong); font: 400 var(--fs-meta)/1.3 var(--font-mono); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-td-bench tbody th { font-weight: 500; }
.pd-td-bench tbody th small { display: block; font: 400 var(--fs-meta)/1.4 var(--font-mono); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-td-bench__num { text-align: end; }
.pd-td-bench td.pd-td-bench__num, .pd-td-bench th.pd-td-bench__num { text-align: end; }
.pd-td-bench__cell { display: grid; grid-template-columns: minmax(2.5rem, 1fr) auto; align-items: center; gap: var(--space-3); }
.pd-td-bench__val { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--space-2); min-inline-size: 5ch; font: 400 var(--fs-caption)/1.3 var(--font-mono); letter-spacing: 0; color: var(--text); }
.pd-td-bench__bar { --v: .5; position: relative; block-size: .5rem; background: linear-gradient(var(--rule), var(--rule)) 0 50% / 100% 1px no-repeat; }
.pd-td-bench__bar::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: max(2px, calc(var(--v) * 100%)); background: var(--text-muted); }
.pd-td-bench__best .pd-td-bench__val { font-weight: 700; }
.pd-td-bench__best .pd-td-bench__bar::after { background: var(--text); }
.pd-td-bench__best .pd-td-bench__val::before { content: ""; flex: none; inline-size: .4375rem; block-size: .4375rem; border-radius: var(--radius-pill); background: var(--text); }
.pd-td-bench__best--bindu .pd-td-bench__val::before { background: var(--bindu); box-shadow: 0 0 0 1px var(--bindu-rim); }
.pd-td-bench__base th, .pd-td-bench__base td { border-block-end-style: dashed; }
.pd-td-bench__note { display: grid; gap: var(--space-2); margin-block-start: var(--space-4); max-inline-size: var(--measure-wide); font: var(--font-caption); color: var(--text-muted); }
.pd-td-bench__note p { margin: 0; }
.pd-td-bench__legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); margin: 0; padding: 0; list-style: none; font: var(--font-caption); color: var(--text-muted); }
.pd-td-bench__legend li { display: inline-flex; align-items: center; gap: var(--space-2); }
.pd-td-bench__key { display: inline-block; flex: none; inline-size: .4375rem; block-size: .4375rem; border-radius: var(--radius-pill); background: var(--text); }
.pd-td-bench__key--bar { inline-size: 1.5rem; block-size: .5rem; border-radius: 0; background: var(--text-muted); }

/* ══ ComparisonMatrix (.pd-td-matrix) ══════════════════════════════════════ */
.pd-td-matrix { container: pd-td-matrix / inline-size; max-inline-size: 64rem; margin: 0; color: var(--text); font-size: 1rem; }
.pd-td-matrix__head { display: grid; gap: var(--space-2); margin-block-end: var(--space-5); padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-td-matrix__title { margin: 0; font: var(--font-title); }
.pd-td-matrix__dek { margin: 0; max-inline-size: var(--measure-wide); font: var(--font-caption); font-size: var(--fs-body-s); color: var(--text-muted); }
.pd-td-matrix__scroll { position: relative; max-inline-size: 100%; max-block-size: var(--pd-td-matrix-max, 42rem); overflow: auto; overscroll-behavior: contain; }
.pd-td-matrix__scroll:focus-visible { outline-offset: var(--focus-offset); }
.pd-td-matrix table { inline-size: 100%; min-inline-size: 40rem; border-collapse: separate; border-spacing: 0; font: var(--font-ui); font-size: var(--fs-body-s); }
.pd-td-matrix th, .pd-td-matrix td { padding: var(--space-3) var(--space-4) var(--space-3) 0; border-block-end: var(--hairline) solid var(--rule); text-align: start; vertical-align: top; background: var(--surface); }
.pd-td-matrix thead th { position: sticky; inset-block-start: 0; z-index: 2; padding-block: var(--space-3); border-block-end: var(--hairline) solid var(--rule-strong); vertical-align: bottom; }
.pd-td-matrix thead th:first-child { inset-inline-start: 0; z-index: 3; }
.pd-td-matrix tbody th { position: sticky; inset-inline-start: 0; z-index: 1; inline-size: 30%; font-weight: 500; }
.pd-td-matrix tbody th small { display: block; font: var(--font-caption); color: var(--text-muted); font-weight: 400; }
.pd-td-matrix__opt { display: grid; gap: var(--space-1); font: 600 var(--fs-body-s)/1.3 var(--font-sans); color: var(--text); }
.pd-td-matrix__opt small { font: 400 var(--fs-meta)/1.3 var(--font-mono); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-td-matrix__pick { display: inline-flex; align-items: center; gap: var(--space-2); font: 600 var(--fs-meta)/1.3 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text); }
.pd-td-matrix .pd-td-matrix__col--pick { box-shadow: inset 2px 0 0 var(--rule-strong); padding-inline-start: var(--space-3); }
.pd-td-matrix__group th { padding-block: var(--space-4) var(--space-2); border-block-end-color: var(--rule-strong); font: 500 var(--fs-meta)/1.3 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-subtle); }
.pd-td-matrix__note { display: block; margin-block-start: var(--space-1); font: var(--font-caption); color: var(--text-muted); }
.pd-td-matrix__foot { margin: var(--space-4) 0 0; font: var(--font-caption); color: var(--text-muted); }
.pd-td-matrix__legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
@container pd-td-matrix (inline-size < 36em) {
  .pd-td-matrix__scroll { max-block-size: none; overflow: visible; }
  .pd-td-matrix table, .pd-td-matrix tbody, .pd-td-matrix tr, .pd-td-matrix th, .pd-td-matrix td { display: block; min-inline-size: 0; inline-size: auto; }
  .pd-td-matrix thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pd-td-matrix tbody tr:not(.pd-td-matrix__group) { display: grid; grid-template-columns: minmax(0, 1fr); padding: var(--space-3) 0 var(--space-4); border-block-end: var(--hairline) solid var(--rule); }
  .pd-td-matrix tbody th, .pd-td-matrix tbody td { position: static; padding: 0; border: 0; background: none; }
  .pd-td-matrix tbody tr:not(.pd-td-matrix__group) > th { inline-size: auto; padding-block-end: var(--space-2); font-size: var(--fs-body); }
  .pd-td-matrix__note { grid-column: 2; margin-block-start: 0; }
  .pd-td-matrix tbody td, .pd-td-matrix .pd-td-matrix__col--pick { display: grid; padding-inline-start: 0; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-3); padding-block: var(--space-2); border-block-start: var(--hairline) solid var(--rule); box-shadow: none; }
  .pd-td-matrix tbody td::before { content: attr(data-label); font: 500 var(--fs-caption)/1.3 var(--font-sans); color: var(--text); }
  .pd-td-matrix tbody td.pd-td-matrix__col--pick::before { content: attr(data-label) " · pick"; }
  .pd-td-matrix__group th { padding-block: var(--space-5) var(--space-2); border-block-end: var(--hairline) solid var(--rule-strong); }
}

/* ══ KeyValueSpec (.pd-td-kv) ══════════════════════════════════════════════ */
.pd-td-kv { container: pd-td-kv / inline-size; max-inline-size: 64rem; margin: 0; color: var(--text); font-size: 1rem; }
.pd-td-kv__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-5); margin-block-end: var(--space-5); padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-td-kv__title { margin: 0; font: var(--font-title); }
.pd-td-kv__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6) var(--gutter); }
.pd-td-kv__group { min-inline-size: 0; margin: 0; }
.pd-td-kv__gname { display: flex; justify-content: space-between; gap: var(--space-3); margin: 0; padding-block-end: var(--space-2); border-block-end: var(--hairline) solid var(--rule-strong); font: 600 var(--fs-meta)/1.3 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text); }
.pd-td-kv__gname span { font-weight: 400; color: var(--text-subtle); }
.pd-td-kv__list { margin: 0; }
.pd-td-kv__row { display: grid; grid-template-columns: minmax(7rem, 2fr) minmax(0, 3fr); gap: var(--space-1) var(--space-4); padding-block: var(--space-2); border-block-end: var(--hairline) solid var(--rule); }
.pd-td-kv__row dt { font: var(--font-ui); font-size: var(--fs-body-s); color: var(--text-muted); }
.pd-td-kv__row dd { margin: 0; font: var(--font-ui); font-size: var(--fs-body-s); color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pd-td-kv__v { font: 500 var(--fs-caption)/1.45 var(--font-mono); letter-spacing: 0; color: var(--text); }
.pd-td-kv__u { margin-inline-start: .3em; font: 400 var(--fs-meta)/1.45 var(--font-mono); letter-spacing: var(--track-mono); color: var(--text-subtle); text-decoration: none; }
.pd-td-kv__sub { display: block; font: var(--font-caption); color: var(--text-muted); }
.pd-td-kv__row--key dd .pd-td-kv__v { font-weight: 700; }
.pd-td-kv__note { margin: var(--space-5) 0 0; max-inline-size: var(--measure-wide); font: var(--font-caption); color: var(--text-muted); }
@container pd-td-kv (inline-size >= 48em) {
  .pd-td-kv__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-td-kv--single .pd-td-kv__grid { grid-template-columns: minmax(0, 1fr); }
}
/* --sourced: KeyValueSpec + a source column (SpecSheet). One column of groups; each row is
   key · value · source. The source is a second <dd> carrying the ◆ measured / ◇ claimed / dashed ◇
   unverified mark (.pd-pr-src). A heavy rule under a row = my figure differs from the maker's. */
.pd-td-kv--sourced .pd-td-kv__grid { grid-template-columns: minmax(0, 1fr); }
.pd-td-kv__key { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0 0 var(--space-5); padding: 0; list-style: none; font: var(--font-caption); color: var(--text-muted); }
.pd-td-kv--sourced .pd-td-kv__row { grid-template-columns: minmax(7rem, 2fr) minmax(0, 3fr) minmax(7.5rem, auto); }
.pd-td-kv__row dd.pd-td-kv__src { justify-self: start; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); white-space: nowrap; }
.pd-td-kv__row--differs { border-block-end: calc(var(--hairline) * 2) solid var(--rule-strong); }
.pd-td-kv__row--differs .pd-td-kv__sub b { font-weight: 600; color: var(--text); }
@container pd-td-kv (inline-size < 34rem) {
  .pd-td-kv--sourced .pd-td-kv__row { grid-template-columns: minmax(0, 1fr) auto; }
  .pd-td-kv--sourced .pd-td-kv__row dt { grid-column: 1; grid-row: 1; }
  .pd-td-kv--sourced .pd-td-kv__row dd.pd-td-kv__src { grid-column: 2; grid-row: 1; justify-self: end; }
  .pd-td-kv--sourced .pd-td-kv__row dd:not(.pd-td-kv__src) { grid-column: 1 / -1; grid-row: 2; }
}

@media (forced-colors: active) {
  .pd-td-api__code::before, .pd-td-bench__bar::after, .pd-td-bench__best .pd-td-bench__val::before { forced-color-adjust: none; border-color: CanvasText; }
  .pd-td-bench__bar::after { background: CanvasText; }
}
@media print {
  .pd-td-matrix__scroll { max-block-size: none; overflow: visible; }
}
}

/* ── part: techdocs.css ── */
/* ── PART: techdocs ──────────────────────────────────────────────────────────
   Pandox DS v2 · package "techdocs" · the tech-writing kit for reports, specs, RFCs, ADRs,
   postmortems, tutorials, API docs, release notes, benchmarks, comparisons and spec sheets.
   Shared atoms
   .pd-td-pill     DEPRECATED alias for old markup only: new documents use Status
                   `.pd-status.pd-status--boxed` (draft → --dashed · review → --half · accepted → --full ·
                   superseded / rejected → --crossed). Every mark is a ring; never colour alone.
   .pd-td-method   HTTP method badge: word + shape (GET ring · POST filled square · PUT half square ·
                   PATCH corner · DELETE struck square)
   .pd-td-mark     Yes ● / Partial ◐ / No ⊘ / n/a – with the word
   .pd-td-label    mono caps label; .pd-td-sec section head inside a document
   .pd-td-dia      DEPRECATED alias of the core Diagram notation: tech-writing diagrams use .pd-dg (SystemLegend,
                   parts/diagrams.css). The .pd-td-dia__* selectors are listed on the .pd-dg rules; kept here only:
                   client title bar, failure path (heavy dotted), failure cross and the opt-in bindu
   Components (this file)  .pd-td-spec TechSpecHeader · .pd-td-adr DecisionRecord · .pd-td-pm Postmortem ·
                           .pd-td-howto HowToSteps · .pd-td-term TerminalBlock
   Reference half (parts/techdocs-ref.css, same package, load both):
                           .pd-td-api APIReference · .pd-td-log Changelog · .pd-td-bench BenchmarkTable ·
                           .pd-td-matrix ComparisonMatrix · .pd-td-kv KeyValueSpec
   The one saffron moment per view is opt-in: .pd-td-bindu (a dot) placed once by the author. */
@layer components.site {

/* ══ Shared atoms ═════════════════════════════════════════════════════════ */
.pd-td-label { margin: 0; font: 500 var(--fs-meta)/1.3 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-subtle); }
.pd-td-bindu { display: inline-block; flex: none; inline-size: .4375rem; block-size: .4375rem; border-radius: var(--radius-pill); background: var(--bindu); box-shadow: 0 0 0 1px var(--bindu-rim); vertical-align: .12em; }
.pd-td-id { display: inline-flex; align-items: center; gap: .5em; font: var(--font-numeral); letter-spacing: var(--track-mono); color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Section head inside a long tech document: mono number + title + hairline */
/* .pd-td-sec = SectionHead --s (layout, numeral column, title: core .pd-section-head rules in bundle.css); kept here: spacing and aside type */
.pd-td-sec { margin: 0 0 var(--space-4); }
.pd-td-sec__aside { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }

.pd-td-body { max-inline-size: var(--measure); font: var(--font-body); color: var(--text); }
.pd-td-body > :where(*) { margin: 0; }
.pd-td-body > :where(* + *) { margin-block-start: var(--space-3); }
.pd-td-body :where(code) { font: 400 .875em/1 var(--font-mono); padding: .1em .3em; border: var(--hairline) solid var(--rule); border-radius: var(--radius-1); }
.pd-td-body :where(ul, ol) { padding-inline-start: 1.2em; }
.pd-td-body :where(li + li) { margin-block-start: var(--space-1); }

/* DEPRECATED: document status pill — alias of .pd-status.pd-status--boxed for old markup. Rings only. */
.pd-td-pill { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: 1.75rem; padding: 0 var(--space-3); border: var(--hairline) solid var(--border-control); border-radius: var(--radius-1); font: 500 var(--fs-caption)/1.2 var(--font-sans); color: var(--text); white-space: nowrap; }
.pd-td-pill::before { content: ""; flex: none; box-sizing: border-box; inline-size: .75em; block-size: .75em; border: .125em solid currentColor; border-radius: var(--radius-pill); }
.pd-td-pill--draft { color: var(--text-muted); border-style: dashed; }
.pd-td-pill--draft::before { border-style: dashed; border-width: .1em; }
.pd-td-pill--review::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.pd-td-pill--accepted { border-color: var(--rule-strong); }
.pd-td-pill--accepted::before { background: currentColor; }
.pd-td-pill--superseded { color: var(--text-muted); text-decoration: line-through var(--hairline); text-decoration-color: var(--text-subtle); }
.pd-td-pill--superseded::before { background: linear-gradient(135deg, transparent calc(50% - .06em), currentColor calc(50% - .06em) calc(50% + .06em), transparent calc(50% + .06em)); }
.pd-td-pill--rejected { color: var(--text-muted); }
.pd-td-pill--rejected::before { border-radius: var(--radius-pill); background: linear-gradient(45deg, transparent calc(50% - .06em), currentColor calc(50% - .06em) calc(50% + .06em), transparent calc(50% + .06em)), linear-gradient(135deg, transparent calc(50% - .06em), currentColor calc(50% - .06em) calc(50% + .06em), transparent calc(50% + .06em)); }
.pd-td-pill--sev::before { border-radius: 0; rotate: 45deg; scale: .85; background: currentColor; }

/* Yes / Partial / No marks: glyph + word */
.pd-td-mark { display: inline-flex; align-items: center; gap: var(--space-2); font: 500 var(--fs-caption)/1.3 var(--font-sans); color: var(--text); white-space: nowrap; }
.pd-td-mark::before { content: ""; flex: none; box-sizing: border-box; inline-size: .8125em; block-size: .8125em; border: .125em solid currentColor; border-radius: var(--radius-pill); }
.pd-td-mark--yes::before { background: currentColor; }
.pd-td-mark--partial::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.pd-td-mark--no { color: var(--text-muted); }
.pd-td-mark--no::before { background: linear-gradient(135deg, transparent calc(50% - .07em), currentColor calc(50% - .07em) calc(50% + .07em), transparent calc(50% + .07em)); }
.pd-td-mark--na { color: var(--text-subtle); font-weight: 400; }
.pd-td-mark--na::before { border: 0; border-radius: 0; block-size: .125em; background: currentColor; }

/* HTTP method badge — mono word + shape */
.pd-td-method { display: inline-flex; align-items: center; gap: .5em; min-block-size: 1.75rem; padding: 0 .625em; border: var(--hairline) solid var(--rule-strong); border-radius: var(--radius-1); font: 600 var(--fs-meta)/1 var(--font-mono); letter-spacing: var(--track-mono); color: var(--text); white-space: nowrap; }
.pd-td-method::before { content: ""; flex: none; box-sizing: border-box; inline-size: .75em; block-size: .75em; border: .125em solid currentColor; }
.pd-td-method--get::before { border-radius: var(--radius-pill); }
.pd-td-method--post::before { background: currentColor; }
.pd-td-method--put::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.pd-td-method--patch::before { background: linear-gradient(135deg, currentColor 50%, transparent 50%); }
.pd-td-method--delete { color: var(--danger); border-color: var(--danger); }
.pd-td-method--delete::before { background: linear-gradient(135deg, transparent calc(50% - .07em), currentColor calc(50% - .07em) calc(50% + .07em), transparent calc(50% + .07em)); }

/* Two-up lists with + / − glyphs (scope in/out, pros/cons, went well/poorly) */
.pd-td-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--space-5) var(--gutter); margin: 0; }
.pd-td-pair__col { min-inline-size: 0; padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule); }
.pd-td-pair__col > .pd-td-label { margin-block-end: var(--space-3); }
.pd-td-list { margin: 0; padding: 0; list-style: none; font: var(--font-ui); color: var(--text); }
.pd-td-list > li { position: relative; padding-inline-start: 1.5em; }
.pd-td-list > li + li { margin-block-start: var(--space-2); }
.pd-td-list > li::before { content: "·"; position: absolute; inset-inline-start: 0; inline-size: 1em; font: 500 1rem/1.45 var(--font-mono); color: var(--text-subtle); text-align: center; }
.pd-td-list--plus > li::before { content: "+"; color: var(--text); }
.pd-td-list--minus > li::before { content: "−"; color: var(--text); }
.pd-td-list--check > li::before { content: "✓"; color: var(--text); }
.pd-td-list--cross > li::before { content: "×"; color: var(--text); }
.pd-td-list--num { counter-reset: pd-td-n; }
.pd-td-list--num > li { counter-increment: pd-td-n; padding-inline-start: 2.25em; }
.pd-td-list--num > li::before { content: counter(pd-td-n, decimal-leading-zero); inline-size: 1.75em; font: var(--font-meta); line-height: 1.95; text-align: start; }

/* Key/value facts row used in headers (authors, version, dates) */
.pd-td-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: var(--space-4) var(--gutter); margin: 0; }
.pd-td-facts > div { min-inline-size: 0; padding-block-start: var(--space-2); border-block-start: var(--hairline) solid var(--rule); }
.pd-td-facts dt { margin: 0 0 var(--space-1); font: 500 var(--fs-meta)/1.3 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-subtle); }
.pd-td-facts dd { margin: 0; font: var(--font-ui); color: var(--text); overflow-wrap: anywhere; }
.pd-td-facts dd :where(time, data) { font-variant-numeric: tabular-nums; }

/* Generic doc table (timeline, action items, params) = alias of DataTable .pd-table--tech (mono-caps header = .pd-label-micro, upright 500 row headers). Scrolls in its own region. */
/* .pd-td-table (scroll wrapper, table box and cells) lives in site.css beside .pd-table, as its --tech alias */
.pd-td-mono { font: 400 var(--fs-caption)/1.45 var(--font-mono); letter-spacing: var(--track-mono); color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ══ Diagram (.pd-td-dia) ═════════════════════════════════════════════════
   An inline SVG drawn on a 4px grid, every stroke and label from tokens. The svg sets
   color: var(--text) so markers (fill="currentColor") follow the theme. */
.pd-td-dia { min-inline-size: 0; margin: 0; color: var(--text); }
.pd-td-dia__canvas { position: relative; overflow-x: auto; padding-block: var(--space-3); border-block: var(--hairline) solid var(--rule); }
.pd-td-dia__canvas:focus-visible { outline-offset: calc(-1 * var(--focus-width)); }
.pd-td-dia__canvas > svg { display: block; inline-size: 100%; min-inline-size: 38rem; block-size: auto; overflow: visible; color: var(--text); font-family: var(--font-sans); }
/* DEPRECATED parallel notation: .pd-td-dia__* is an alias of the core Diagram notation (.pd-dg, parts/diagrams.css).
   node/store → .pd-dg__shape · edge → .pd-dg__edge · name → .pd-dg__t · sub → .pd-dg__ts · elabel → .pd-dg__te ·
   zone → .pd-dg__zone-box · zlabel → .pd-dg__tz · legend → .pd-dg-legend · cap → .pd-dg__cap · alt > summary → .pd-alt__sum.
   Those selectors are listed on the .pd-dg rules; only colour fills and kit extensions stay here. New tech-writing
   diagrams use .pd-dg (SystemLegend). */
.pd-td-dia__node { vector-effect: non-scaling-stroke; }
.pd-td-dia__node--client { rx: 3; }
.pd-td-dia__tbar { fill: none; stroke: currentColor; stroke-width: 1; }
.pd-td-dia__tdot { fill: currentColor; }
.pd-td-dia__node--fail { stroke-width: var(--dg-heavy); }
.pd-td-dia__node--chosen { stroke-width: var(--dg-heavy); }
.pd-td-dia__edge--fail { stroke-width: 2.25; stroke-dasharray: 1.5 4; stroke-linecap: round; }
.pd-td-dia__edge--ret { stroke-width: 1; color: var(--text-muted); }
.pd-td-dia__name { fill: var(--text); }
.pd-td-dia__sub { fill: var(--text-muted); }
.pd-td-dia__elabel { fill: var(--text-muted); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.pd-td-dia__tag { fill: var(--text); font: 600 11px/1 var(--font-mono); letter-spacing: var(--track-mono); }
.pd-td-dia__x { fill: none; stroke: var(--danger); stroke-width: 2; stroke-linecap: square; }
.pd-td-dia__xt { fill: var(--danger); font: 600 11px/1 var(--font-mono); letter-spacing: .06em; }
.pd-td-dia__bindu { fill: var(--bindu); stroke: var(--bindu-rim); stroke-width: 1; }
.pd-td-dia__zlabel { fill: var(--text-muted); }
.pd-td-dia__legend { margin-block-start: var(--space-3); }
.pd-td-dia__legend svg { inline-size: 2rem; block-size: .75rem; flex: none; color: var(--text); overflow: visible; }
.pd-td-dia__cap { margin-block-start: var(--space-3); }
.pd-td-dia__alt { margin-block-start: var(--space-2); font: var(--font-caption); color: var(--text-muted); }
.pd-td-dia__alt > summary { letter-spacing: normal; text-transform: none; }
.pd-td-dia__alt :where(ol, ul) { margin: var(--space-2) 0 0; padding-inline-start: 1.4em; color: var(--text); }
.pd-td-dia__alt :where(li + li) { margin-block-start: var(--space-1); }
.pd-td-dia__alt :where(table) { margin-block-start: var(--space-2); }

/* ══ TechSpecHeader (.pd-td-spec) ══════════════════════════════════════════ */
.pd-td-spec { container: pd-td-spec / inline-size; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); max-inline-size: 60rem; margin: 0; color: var(--text); font-size: 1rem; }
.pd-td-spec__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-td-spec__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: 0; }
.pd-td-spec__title { margin: 0; font: var(--font-display-m); letter-spacing: var(--track-display); color: var(--text); text-wrap: balance; }
.pd-td-spec__dek { margin: calc(-1 * var(--space-3)) 0 0; max-inline-size: var(--measure-wide); font: var(--font-lede); font-size: var(--fs-title); color: var(--text-muted); text-wrap: pretty; }
.pd-td-spec__tldr { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4) var(--space-5) var(--space-5); border: var(--hairline) solid var(--rule-strong); }
.pd-td-spec__tldr > .pd-td-label { color: var(--text); }
.pd-td-spec__tldr :where(p) { margin: 0; max-inline-size: var(--measure-wide); font: var(--font-body); }
.pd-td-spec__tldr :where(ul) { margin: 0; }
.pd-td-spec__tldr :where(code) { font: 400 .875em/1 var(--font-mono); padding: .1em .3em; border: var(--hairline) solid var(--rule); border-radius: var(--radius-1); }
.pd-td-spec__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; font: var(--font-caption); }
.pd-td-spec__links a { display: inline-flex; align-items: center; min-block-size: var(--target-min); }
.pd-td-spec__toc { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 0 var(--gutter); font: var(--font-ui); font-size: var(--fs-body-s); counter-reset: pd-td-toc; }
.pd-td-spec__toc li { counter-increment: pd-td-toc; display: flex; gap: var(--space-3); align-items: baseline; padding-block: var(--space-2); border-block-end: var(--hairline) solid var(--rule); }
.pd-td-spec__toc li::before { content: counter(pd-td-toc, decimal-leading-zero); font: var(--font-meta); color: var(--text-subtle); }
.pd-td-spec__toc a { color: var(--text); text-decoration: none; }
.pd-td-spec__toc a:hover { text-decoration: underline var(--hairline); text-underline-offset: .25em; }
.pd-td-spec--compact .pd-td-spec__title { font: var(--font-headline); }

/* ══ DecisionRecord (.pd-td-adr) ═══════════════════════════════════════════ */
.pd-td-adr { container: pd-td-adr / inline-size; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); max-inline-size: 60rem; margin: 0; color: var(--text); font-size: 1rem; }
.pd-td-adr__head { display: grid; gap: var(--space-4); padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-td-adr__title { margin: 0; font: var(--font-headline); color: var(--text); text-wrap: balance; }
.pd-td-adr__line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); margin: 0; font: var(--font-caption); color: var(--text-muted); }
.pd-td-adr__line a { display: inline-flex; align-items: center; min-block-size: var(--target-min); }
.pd-td-adr__options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--space-5) var(--gutter); margin: 0; padding: 0; list-style: none; counter-reset: pd-td-opt; }
.pd-td-adr__opt { counter-increment: pd-td-opt; display: grid; align-content: start; gap: var(--space-3); min-inline-size: 0; padding: var(--space-4); border: var(--hairline) solid var(--rule); }
.pd-td-adr__opt--chosen { border: 2px solid var(--rule-strong); padding: calc(var(--space-4) - 1px); }
.pd-td-adr__opthead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.pd-td-adr__optname { margin: 0; font: var(--font-title); font-size: var(--fs-body); font-family: var(--font-sans); font-weight: 600; color: var(--text); }
.pd-td-adr__optname::before { content: "Option " counter(pd-td-opt, upper-alpha) " · "; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-td-adr__chosen { display: inline-flex; align-items: center; gap: var(--space-2); font: 600 var(--fs-meta)/1.3 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text); }
.pd-td-adr__opt :where(p) { margin: 0; font: var(--font-caption); font-size: var(--fs-body-s); color: var(--text-muted); }
.pd-td-adr__opt .pd-td-list { font-size: var(--fs-body-s); }
/* the aside recipe (Callout): ink hairline on top, kicker, content — no left bar */
.pd-td-adr__decision { display: grid; gap: var(--space-3); max-inline-size: var(--measure-wide); padding: var(--space-3) 0 var(--space-4); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-td-adr__decision > .pd-kicker { margin: 0; }
.pd-td-adr__decision > p:not(.pd-kicker) { margin: 0; font: var(--font-lede); font-style: normal; font-size: var(--fs-title); color: var(--text); }
.pd-td-adr__conseq { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-5) var(--gutter); }

/* ══ Postmortem (.pd-td-pm) ════════════════════════════════════════════════ */
.pd-td-pm { container: pd-td-pm / inline-size; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); max-inline-size: 64rem; margin: 0; color: var(--text); font-size: 1rem; }
.pd-td-pm__head { display: grid; gap: var(--space-4); padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-td-pm__title { margin: 0; font: var(--font-headline); color: var(--text); text-wrap: balance; }
.pd-td-pm__tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0; }
.pd-td-pm__blameless { margin: 0; font: var(--font-caption); color: var(--text-muted); }
.pd-td-pm__impact { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--space-4) var(--gutter); margin: 0; }
.pd-td-pm__impact > div { padding-block-start: var(--space-2); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-td-pm__impact dt { font: 500 var(--fs-meta)/1.3 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-subtle); }
.pd-td-pm__impact dd { margin: var(--space-1) 0 0; font: var(--font-headline); font-variant-numeric: tabular-nums lining-nums; color: var(--text); }
.pd-td-pm__impact dd small { font: var(--font-caption); color: var(--text-muted); margin-inline-start: .25em; }
.pd-td-pm__time { inline-size: 6.5em; }
.pd-td-pm__phase { display: inline-flex; align-items: center; gap: var(--space-2); font: 500 var(--fs-meta)/1.3 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.pd-td-pm__phase::before { content: ""; flex: none; box-sizing: border-box; inline-size: .75em; block-size: .75em; border: .125em solid currentColor; }
.pd-td-pm__phase--start::before { border-radius: var(--radius-pill); }
.pd-td-pm__phase--detect { color: var(--text); }
.pd-td-pm__phase--detect::before { rotate: 45deg; scale: .85; }
.pd-td-pm__phase--mitigate::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.pd-td-pm__phase--resolve { color: var(--text); }
.pd-td-pm__phase--resolve::before { background: currentColor; }
.pd-td-pm__row--key :where(td, th) { font-weight: 600; }
.pd-td-pm__cause { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.pd-td-pm__cause > :where(p, ol) { max-inline-size: var(--measure-wide); }
.pd-td-pm__cause > p { margin: 0; font: var(--font-body); }
.pd-td-pm__cause > .pd-td-label { margin-block-start: var(--space-3); }
.pd-td-pm__why { margin: 0; padding: 0; list-style: none; counter-reset: pd-td-why; }
.pd-td-pm__why > li { counter-increment: pd-td-why; display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: var(--space-3); padding-block: var(--space-2); border-block-end: var(--hairline) solid var(--rule); font: var(--font-ui); }
.pd-td-pm__why > li::before { content: "Why " counter(pd-td-why); font: var(--font-meta); letter-spacing: var(--track-mono); line-height: 1.95; color: var(--text-subtle); }
.pd-td-pm__why > li:last-child { border-block-end-color: var(--rule-strong); }
.pd-td-pm__why > li:last-child::before { content: "Root"; color: var(--text); font-weight: 600; }

/* ══ HowToSteps (.pd-td-howto) ═════════════════════════════════════════════ */
.pd-td-howto { container: pd-td-howto / inline-size; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); max-inline-size: 48rem; margin: 0; color: var(--text); font-size: 1rem; }
.pd-td-howto__head { display: grid; gap: var(--space-3); padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-td-howto__title { margin: 0; font: var(--font-headline); text-wrap: balance; }
.pd-td-howto__meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); margin: 0; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-td-howto__prereq { display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-5); border: var(--hairline) solid var(--rule); }
.pd-td-howto__progress { position: sticky; inset-block-start: 0; z-index: var(--z-raised); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); padding-block: var(--space-3); background: var(--surface); border-block-end: var(--hairline) solid var(--rule); }
.pd-td-howto__count { margin: 0; font: 500 var(--fs-caption)/1.3 var(--font-mono); letter-spacing: var(--track-mono); color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pd-td-howto__count span { color: var(--text-subtle); }
.pd-td-howto__ticks { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; margin: 0; padding: 0; list-style: none; }
.pd-td-howto__ticks li { block-size: .375rem; border: 1px solid var(--text-muted); background: transparent; }
.pd-td-howto__ticks li:where([data-done]) { background: var(--text); border-color: var(--text); }
.pd-td-howto__ticks li:where([aria-current]) { border-color: var(--text); border-width: 2px; }
.pd-td-howto__done { margin: 0; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); white-space: nowrap; }
.pd-td-howto__steps { margin: 0; padding: 0; list-style: none; counter-reset: pd-td-step; }
.pd-td-howto__step:first-child { border-block-start: 0; }
.pd-td-howto__step { counter-increment: pd-td-step; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-3) var(--space-4); padding-block: var(--space-5); border-block-start: var(--hairline) solid var(--rule); scroll-margin-block-start: 4rem; }
/* Step badge (Utilities › Numerals, role 2): the .pd-dg__step-n recipe. Filled when current. */
.pd-td-howto__step::before { content: counter(pd-td-step, decimal-leading-zero); grid-row: 1; grid-column: 1; justify-self: start; align-self: start; display: inline-grid; place-items: center; box-sizing: border-box; min-inline-size: 1.7em; block-size: 1.7em; padding-inline: .3em; border: var(--hairline) solid currentColor; font: 600 var(--fs-meta)/1 var(--font-mono); color: var(--text); font-variant-numeric: tabular-nums; }
.pd-td-howto__step:where([aria-current="step"])::before { background: var(--text); color: var(--surface); border-color: var(--text); }
.pd-td-howto__step:where([data-done])::before { content: "✓"; color: var(--text); }
.pd-td-howto__step > * { grid-column: 2; min-inline-size: 0; }
.pd-td-howto__step > .pd-td-howto__shead { grid-row: 1; }
.pd-td-howto__shead { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.pd-td-howto__stitle { flex: 1 1 9rem; margin: 0; padding-block-start: .125rem; font: var(--font-title); color: var(--text); text-wrap: balance; }
.pd-td-howto__step:where([data-done]) .pd-td-howto__stitle { color: var(--text-muted); }
.pd-td-howto__check { flex: none; font-size: var(--fs-label); color: var(--text-muted); }
.pd-td-howto__step > p { margin: 0; max-inline-size: var(--measure); font: var(--font-body); }
.pd-td-howto__step :where(p code) { font: 400 .875em/1 var(--font-mono); padding: .1em .3em; border: var(--hairline) solid var(--rule); border-radius: var(--radius-1); }
.pd-td-howto__expect { display: grid; gap: var(--space-2); padding-inline-start: var(--space-4); border-inline-start: var(--hairline) solid var(--rule-strong); }
.pd-td-howto__expect > p:not(.pd-td-label) { margin: 0; font: var(--font-ui); font-size: var(--fs-body-s); color: var(--text-muted); }
.pd-td-howto__expect pre { margin: 0; overflow-x: auto; font: 400 var(--fs-caption)/1.6 var(--font-mono); color: var(--text); }
.pd-td-howto__step .pd-callout { max-inline-size: none; }
.pd-td-howto__step .pd-callout__body { font: var(--font-ui); }
.pd-td-howto__nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); padding-block-start: var(--space-4); border-block-start: var(--hairline) solid var(--rule-strong); }
@container pd-td-howto (inline-size < 30em) {
  .pd-td-howto__step { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .pd-td-howto__step::before { font-size: var(--fs-meta); }
  .pd-td-howto__step > :not(.pd-td-howto__shead) { grid-column: 1 / -1; }
  .pd-td-howto__progress { grid-template-columns: auto minmax(0, 1fr); }
  .pd-td-howto__done { grid-column: 1 / -1; }
}

/* ══ TerminalBlock (.pd-td-term) ═══════════════════════════════════════════ */
.pd-td-term { container: pd-td-term / inline-size; margin: 0; color: var(--text); border: var(--hairline) solid var(--border-control); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-td-term__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-1) var(--space-1) var(--space-1) var(--space-4); border-block-end: var(--hairline) solid var(--rule); }
.pd-td-term__name { display: inline-flex; align-items: center; gap: var(--space-2); min-inline-size: 0; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-td-term__name::before { content: ">_"; font-weight: 600; color: var(--text-subtle); }
.pd-td-term__side { display: inline-flex; align-items: center; gap: var(--space-3); }
.pd-td-term .pd-tabs__list { margin-inline: 0; padding-inline: var(--space-4) var(--focus-width); gap: var(--space-3); background-size: 100% 1px; }
.pd-td-term .pd-tabs__tab { font-size: var(--fs-caption); padding-block: var(--space-2) var(--space-3); }
.pd-td-term .pd-tabs__panel { padding: 0; }
.pd-td-term__body { position: relative; display: grid; background: var(--surface-sunken); }
.pd-td-term__body > .pd-td-term__pre { grid-row: 1; grid-column: 1; }
.pd-td-term__pre { margin: 0; padding: var(--space-4); overflow-x: auto; font: 400 var(--fs-caption)/1.75 var(--font-mono); background: var(--surface-sunken); color: var(--text); tab-size: 2; }
.pd-td-term__pre:focus-visible { outline-offset: calc(-1 * var(--focus-width)); }
.pd-td-term__pre :where(code) { display: grid; min-inline-size: max-content; font: inherit; }
.pd-td-term__line { display: block; white-space: pre; }
.pd-td-term__cmd { font-weight: 500; color: var(--text); }
.pd-td-term__ps { font-weight: 600; color: var(--text-subtle); user-select: none; -webkit-user-select: none; }
.pd-td-term__ps::after { content: " "; }
.pd-td-term__out { color: var(--text-muted); }
.pd-td-term__ok { color: var(--text); }
.pd-td-term__ok::before { content: "✓ "; font-weight: 600; }
.pd-td-term__err { color: var(--danger); }
.pd-td-term__err::before { content: "! "; font-weight: 600; }
.pd-td-term__cmt { color: var(--text-subtle); font-style: italic; }
.pd-td-term__copy { grid-row: 1; grid-column: 1; align-self: start; justify-self: end; margin: var(--space-2); }
@container pd-td-term (inline-size < 34em) {
  .pd-td-term__copy { margin-block-end: 0; }
  .pd-td-term__body > .pd-td-term__pre { grid-row: 2; }
}
.pd-td-term__cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-4); padding: var(--space-3) var(--space-4); border-block-start: var(--hairline) solid var(--rule); font: var(--font-caption); color: var(--text-muted); }
.pd-td-term--bare { border-inline: 0; border-block-end: 0; }

@media (forced-colors: active) {
  .pd-td-pill::before, .pd-td-mark::before, .pd-td-method::before, .pd-td-pm__phase::before, .pd-td-howto__ticks li { forced-color-adjust: none; border-color: CanvasText; }
  .pd-td-howto__ticks li:where([data-done]) { background: CanvasText; }
}
@media print {
  .pd-td-term__copy, .pd-td-howto__check, .pd-td-howto__nav { display: none; }
  .pd-td-dia__canvas { overflow: visible; }
}
}

/* ── part: techpages.css ── */
@layer components.site {
/* Pandox DS — package "techpages": glue for three page templates. Owns only the page prefixes
   .pd-techpage (TechReportPage) · .pd-reviewpage (ProductReviewPage) · .pd-docspage (DocsPage).
   Every visible part is an existing component: tech-writing kit (.pd-td-*), diagram kit (.pd-dg),
   product-review kit (.pd-pr-*), research kit references (.pd-rk-refs), Masthead, Breadcrumbs,
   TableOfContents, Prose, CodeBlock, Callout, Pagination cards, SiteFooterMega. This file places them on the page,
   sets band rhythm, aligns columns to --page-max and owns the one new piece: the DocsPage sidebar navigation.
   No colour of its own: every value is a semantic token. */

/* ── shared frame ─────────────────────────────────────────────────────────── */
.pd-techpage, .pd-reviewpage, .pd-docspage {
  --pd-tp-sticky: calc(var(--space-6) + 3.5rem); /* sticky rails sit below the sticky masthead bar */
  container: pd-page / inline-size; display: flow-root; min-block-size: 100vh; background: var(--surface); color: var(--text);
}
:where(.pd-techpage, .pd-reviewpage, .pd-docspage) > main { display: block; padding-block-end: var(--space-10); }
:where(.pd-techpage, .pd-reviewpage, .pd-docspage) > main:focus { outline: 0; }
:where(.pd-techpage, .pd-reviewpage, .pd-docspage) [data-section][hidden] { display: none; }
.pd-techpage__wrap, .pd-reviewpage__wrap, .pd-docspage__wrap {
  box-sizing: border-box; inline-size: 100%; max-inline-size: var(--page-max); margin-inline: auto; padding-inline: var(--gutter);
}
.pd-techpage__crumbs, .pd-reviewpage__crumbs, .pd-docspage__crumbs { padding-block: var(--space-5) var(--space-6); }
/* in-page targets land below the sticky masthead */
:where(.pd-techpage, .pd-reviewpage, .pd-docspage) :where([id]) { scroll-margin-block-start: var(--pd-tp-sticky); }

/* Rail + main column. The rail is a TableOfContents (or the docs nav): a compact disclosure above the
   content on narrow pages, a sticky rail beside it from 64em. --pd-toc-compact is the TOC's own switch. */
.pd-techpage__body, .pd-reviewpage__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding-block-start: var(--space-8); }
.pd-techpage__toc, .pd-reviewpage__toc { --pd-toc-compact: 1; }
@container pd-page (min-width: 64em) {
  .pd-techpage__body, .pd-reviewpage__body { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-8); align-items: start; }
  .pd-techpage__toc, .pd-reviewpage__toc { --pd-toc-compact: -1; inset-block-start: var(--pd-tp-sticky); max-block-size: calc(100dvh - var(--pd-tp-sticky) - var(--space-6)); }
}
@container pd-page (max-width: 63.99em) {
  .pd-techpage__toc, .pd-reviewpage__toc { position: static; max-block-size: none; }
}
.pd-techpage__main, .pd-reviewpage__main { display: grid; grid-template-columns: minmax(0, 1fr); min-inline-size: 0; }
.pd-techpage__main > *, .pd-reviewpage__main > * { min-inline-size: 0; }

/* the Haṃsa motto is the last line of SiteFooterMega (.pd-logo__motto.pd-megafoot__motto); pages add none of their own */

/* ── TechReportPage ───────────────────────────────────────────────────────── */
.pd-techpage__head { max-inline-size: 64rem; }
/* one numbered section = one band; the section head (.pd-td-sec) carries the rule */
.pd-techpage__sec { display: grid; gap: var(--space-6); padding-block-start: var(--space-9); }
.pd-techpage__sec:first-child { padding-block-start: 0; }
.pd-techpage__sec > .pd-td-sec { margin-block-end: 0; }
.pd-techpage__prose { max-inline-size: var(--measure-wide); }
.pd-techpage__prose > :first-child { margin-block-start: 0; }
.pd-techpage__prose > :last-child { margin-block-end: 0; }
.pd-techpage__sec > .pd-callout { max-inline-size: var(--measure-wide); }
.pd-techpage__adr, .pd-techpage__howto { max-inline-size: none; }
/* an embedded record (ADR, how-to) sits under its numbered section head, which already draws the rule */
.pd-techpage__adr > .pd-td-adr__head, .pd-techpage__howto > .pd-td-howto__head { padding-block-start: 0; border-block-start: 0; }

.pd-techpage__qs { max-inline-size: var(--measure-wide); }
.pd-techpage__refs { padding-block-start: var(--space-9); }

/* ── ProductReviewPage ────────────────────────────────────────────────────── */
.pd-reviewpage__head { padding-block-end: 0; }
.pd-reviewpage__band { display: grid; gap: var(--space-6); padding-block-start: var(--space-9); min-inline-size: 0; }
.pd-reviewpage__band:first-child { padding-block-start: 0; }
.pd-reviewpage__band--verdict { padding-block-start: var(--space-10); }

/* ── DocsPage ─────────────────────────────────────────────────────────────── */
/* Three columns from 72em: docs nav · article · "On this page". Two from 56em (nav · article, the page
   TOC becomes a compact disclosure at the top of the article). One below: the nav is a disclosure. */
.pd-docspage__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding-block-start: var(--space-6); }
.pd-docspage__article { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); min-inline-size: 0; }
.pd-docspage__article > * { min-inline-size: 0; }
.pd-docspage__toc { --pd-toc-compact: 1; }
@container pd-page (min-width: 56em) {
  .pd-docspage__layout { grid-template-columns: 15rem minmax(0, 1fr); column-gap: var(--space-8); align-items: start; }
  .pd-docspage__side { grid-column: 1; grid-row: 1 / span 2; position: sticky; inset-block-start: var(--pd-tp-sticky); max-block-size: calc(100dvh - var(--pd-tp-sticky) - var(--space-4)); overflow-y: auto; }
  .pd-docspage__toc, .pd-docspage__article { grid-column: 2; }
}
@container pd-page (min-width: 72em) {
  .pd-docspage__layout { grid-template-columns: 15rem minmax(0, 1fr) 13rem; }
  .pd-docspage__side { grid-row: 1; }
  .pd-docspage__toc { --pd-toc-compact: -1; grid-column: 3; grid-row: 1; position: sticky; inset-block-start: var(--pd-tp-sticky); max-block-size: calc(100dvh - var(--pd-tp-sticky) - var(--space-4)); }
  .pd-docspage__article { grid-column: 2; grid-row: 1; }
}
@container pd-page (max-width: 71.99em) { .pd-docspage__toc { position: static; max-block-size: none; } }

.pd-docspage__sec { display: grid; gap: var(--space-5); }
.pd-docspage__sec > .pd-td-sec { margin-block-end: 0; }
.pd-docspage__sec > :where(p, .pd-callout) { max-inline-size: var(--measure-wide); margin: 0; }
.pd-docspage__feedback { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); padding-block: var(--space-4); border-block: var(--hairline) solid var(--rule); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); }
.pd-docspage__feedback > div { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Docs nav — the one new piece. A product label, a version line, then groups of links.
   Current page: ink text + a 2px ink bar at the inline start (shape, not colour). Narrow: a disclosure
   button (aria-expanded) opens the list in place; from 56em the list is always shown and the button hides. */
.pd-docspage__side { container: pd-docsnav / inline-size; font-size: var(--fs-body-s); }
.pd-docspage__product { display: grid; gap: var(--space-1); padding-block-end: var(--space-3); border-block-end: var(--hairline) solid var(--rule-strong); }
.pd-docspage__product > * { margin: 0; }
.pd-docspage__pname { font: var(--font-title); color: var(--text); }
.pd-docspage__ver { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-docspage__navbtn { display: flex; align-items: center; justify-content: space-between; inline-size: 100%; min-block-size: var(--target-min); margin: 0; padding: 0; border: 0; border-block-end: var(--hairline) solid var(--rule); background: none; color: var(--text); font: var(--font-label); cursor: pointer; text-align: start; }
.pd-docspage__navbtn > span:last-child { font: var(--font-meta); color: var(--text-subtle); transition: rotate var(--dur-2) var(--ease-standard); }
.pd-docspage__navbtn[aria-expanded="true"] > span:last-child { rotate: 180deg; }
.pd-docspage__navbtn:focus-visible { outline-offset: calc(-1 * var(--focus-width)); }
.pd-docspage__navlist { display: none; }
.pd-docspage__side[data-open] .pd-docspage__navlist { display: block; }
@container pd-page (min-width: 56em) {
  .pd-docspage__navbtn { display: none; }
  .pd-docspage__navlist { display: block; }
}
.pd-docspage__group { margin: 0; padding-block: var(--space-4) 0; }
.pd-docspage__gname { margin: 0 0 var(--space-1); font: var(--font-meta); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-subtle); }
.pd-docspage__links { margin: 0; padding: 0; list-style: none; }
.pd-docspage__link { position: relative; display: flex; align-items: center; gap: var(--space-2); min-block-size: calc(var(--target-min) - .25rem); padding-inline: var(--space-3) 0; color: var(--text-muted); text-decoration: none; font: var(--font-body-s); line-height: 1.3; border-inline-start: var(--hairline) solid var(--rule); }
.pd-docspage__link[aria-current="page"] { color: var(--text); font-weight: 500; border-inline-start: 2px solid var(--text); padding-inline-start: calc(var(--space-3) - 1px); }
@media (hover: hover) { .pd-docspage__link:hover { color: var(--text); text-decoration: underline var(--hairline); text-underline-offset: .2em; } }
.pd-docspage__link:focus-visible { outline-offset: calc(-1 * var(--focus-width)); }
.pd-docspage__link .pd-td-method { margin-inline-start: auto; }
.pd-docspage__sidefoot { display: grid; gap: var(--space-1); margin-block-start: var(--space-5); padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-docspage__sidefoot a { color: var(--link); }
.pd-docspage__pager { padding-block-start: var(--space-4); }

@media (prefers-reduced-motion: reduce) { .pd-docspage__navbtn > span:last-child { transition: none; } }
@media (forced-colors: active) { .pd-docspage__link[aria-current="page"] { border-inline-start-color: CanvasText; } }
@media print {
  :where(.pd-techpage, .pd-reviewpage, .pd-docspage) :where(.pd-masthead, .pd-megafoot, .pd-techpage__toc, .pd-reviewpage__toc, .pd-docspage__side, .pd-docspage__toc) { display: none; }
  .pd-techpage__body, .pd-reviewpage__body, .pd-docspage__layout { display: block; }
}
}

/* ── part: vedic.css ── */
@layer components.vedic {
/* Pandox DS v2 · package "vedic": MoonPhase (.pd-moon*), VedicClock (.pd-vclock), VedicStamp (.pd-vstamp),
   Panchanga (.pd-panchanga), MuhurtaTimeline (.pd-muhurta), SvaraClock (.pd-svara).
   Live for Kathmandu via engines/vedic.js. Semantic tokens only; no [data-theme] selectors.
   Night ground = sky-900 55% in ink (≥ 3:1 against paper in light, dark, mono, cosmos; outlined in --rule-strong so
   it also reads in void at 2.8:1); text on it uses --on-sky (≥ 5:1 in every theme).
   Saffron appears once per view: the clock bindu, the timeline now-bindu, or an active Viṣṭi note. */

/* ── MoonPhase (.pd-moon) ─────────────────────────────────────────────
   Lit limb = --text (ink-900 on paper; light on night themes), so Pūrṇimā is a solid disc and Amāvāsyā an open
   ring in every theme. The rim is a 3:1 control border. --sky sets the glyph on a sky-900 chip. */
.pd-moon { --moon-lit: var(--text); --moon-dark: var(--surface); --moon-rim: var(--border-control); display: inline-block; flex: none; inline-size: 1em; block-size: 1em; vertical-align: -0.15em; overflow: visible; }
.pd-moon__disc { fill: var(--moon-dark); stroke: var(--moon-rim); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.pd-moon__lit { fill: var(--moon-lit); }
.pd-moon--waning .pd-moon__lit { transform: scaleX(-1); transform-box: view-box; transform-origin: 50% 50%; }
.pd-moon--sky { --moon-lit: var(--on-sky); --moon-dark: var(--sky-900); --moon-rim: var(--on-sky); }

.pd-moon-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-2) var(--space-4); padding-block-start: var(--space-3); margin-block-end: var(--space-5); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-moon-head__title { margin: 0; font: var(--font-title); color: var(--text); }
.pd-moon-phases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 5rem), 1fr)); gap: var(--space-5) var(--space-4); }
.pd-moon-phases__item { display: grid; justify-items: start; align-content: start; gap: var(--space-2); padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule); }
.pd-moon-phases__item > .pd-moon { font-size: var(--fs-display-m); }
.pd-moon-phases__item:where([aria-current]) { border-block-start: 2px solid var(--rule-strong); }
.pd-moon-phases__name { font: italic 400 var(--fs-body-s)/1.2 var(--font-text); color: var(--text); }
.pd-moon-phases__meta { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); font-variant-numeric: tabular-nums; }

.pd-moon-stamp { display: inline-grid; grid-template-columns: auto auto; align-items: center; column-gap: var(--space-5); padding: var(--space-4) var(--space-6) var(--space-4) var(--space-5); border: var(--hairline) solid var(--rule-strong); border-radius: var(--radius-0); background: var(--surface); color: var(--text); }
.pd-moon-stamp > .pd-moon { font-size: var(--fs-display-m); }
.pd-moon-stamp__body { display: grid; gap: var(--space-1); }
.pd-moon-stamp__date { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.pd-moon-stamp__tithi { font: italic 500 var(--fs-title)/1.1 var(--font-display); color: var(--text); }
.pd-moon-stamp__masa { font: var(--font-kicker); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
.pd-moon-stamp--sky { background: var(--sky-900); border-color: var(--sky-900); }
.pd-moon-stamp--sky .pd-moon { --moon-lit: var(--on-sky); --moon-dark: var(--sky-900); --moon-rim: var(--on-sky); }
.pd-moon-stamp--sky :where(.pd-moon-stamp__tithi, .pd-moon-stamp__date, .pd-moon-stamp__masa) { color: var(--on-sky); }
.pd-moon-stamp--rule { border-inline-width: 0; background: transparent; padding-inline: 0 var(--space-2); }
.pd-moon-stamp--compact { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); padding: 0; border: 0; background: transparent; }
.pd-moon-stamp--compact > .pd-moon { font-size: var(--fs-body); }
.pd-moon-stamp--compact .pd-moon-stamp__tithi { font: var(--font-label); color: var(--text-muted); }
.pd-moon-stamp--compact > :where(:not(:first-child, .pd-moon-stamp__date))::before { content: "·"; margin-inline-end: var(--space-3); color: var(--text-subtle); font: 400 var(--fs-label)/1 var(--font-mono); letter-spacing: 0; }

/* ── VedicClock (.pd-vclock) ──────────────────────────────────────── */
.pd-vclock { --vd-night: color-mix(in oklab, var(--sky-900) 55%, var(--text)); container: pd-vclock / inline-size; margin: 0; color: var(--text); }
.pd-vclock__face { position: relative; display: grid; inline-size: min(100%, 36rem); margin-inline: auto; container-type: inline-size; }
.pd-vclock__face > * { grid-area: 1 / 1; }
.pd-vclock__dial { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 1; overflow: visible; }
.pd-vclock__center { place-self: center; display: grid; justify-items: center; gap: var(--space-1); max-inline-size: 34cqi; text-align: center; pointer-events: none; }
.pd-vclock__center > .pd-kicker { max-inline-size: 26cqi; text-wrap: balance; }
.pd-vclock__num { display: flex; align-items: baseline; font-family: var(--font-display); font-weight: 500; font-size: clamp(var(--fs-headline), 9cqi, var(--fs-display-m)); line-height: 1; letter-spacing: var(--track-display); font-variant-numeric: lining-nums tabular-nums; }
.pd-vclock__sep { margin-inline: .14em; color: var(--text-subtle); }
.pd-vclock__vipala, .pd-vclock__civil { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.pd-vclock__muh { font: italic 400 var(--fs-body-s)/1.25 var(--font-text); color: var(--text); }
.pd-vclock__muh > [lang="sa"], .pd-vclock__mname--deva { font-family: var(--font-deva); font-style: normal; }
/* SVG parts */
.pd-vclock__dial :where(path, circle) { vector-effect: non-scaling-stroke; }
.pd-vclock__dial :where(text) { font-family: var(--font-mono); fill: var(--text-subtle); }
.pd-vclock__edge { fill: none; stroke: var(--rule-strong); stroke-width: 1px; }
.pd-vclock__tick { fill: none; stroke: var(--text-subtle); stroke-width: 1px; }
.pd-vclock__tick--major { stroke: var(--text); stroke-width: 1.5px; }
.pd-vclock__gnum { fill: var(--text-muted); }
.pd-vclock__seg { fill: transparent; stroke: var(--border-control); stroke-width: 1px; }
.pd-vclock__seg--quiet { stroke: var(--rule-strong); stroke-opacity: var(--opacity-faint); }
.pd-vclock__mname { font-family: var(--font-text); font-style: italic; fill: var(--text); }
.pd-vclock__mnum { display: none; }
.pd-vclock__htext, .pd-vclock__ptext { fill: var(--text-muted); }
.pd-vclock__m:where([data-now]) .pd-vclock__seg { fill: var(--text); stroke: var(--text); }
.pd-vclock__m:where([data-now]) :where(text) { fill: var(--surface); }
.pd-vclock__m:where([data-now]) .pd-vclock__dot { fill: var(--surface); }
.pd-vclock__h:where([data-now]) text, .pd-vclock__p:where([data-now]) text { fill: var(--text); font-weight: 500; }
.pd-vclock__mark { fill: none; stroke: var(--text); stroke-width: 3px; }
.pd-vclock__dot { fill: var(--text); }
.pd-vclock__day { fill: var(--surface-sunken); stroke: var(--rule-strong); stroke-width: 1px; }
.pd-vclock__night { fill: var(--vd-night); stroke: var(--rule-strong); stroke-width: 1px; }
.pd-vclock__limit { fill: none; stroke: var(--text); stroke-width: 2.5px; }
.pd-vclock__moon { stroke: var(--text); stroke-width: 1.5px; }
.pd-vclock__moon--rise { fill: var(--surface); }
.pd-vclock__moon--set { fill: var(--text); stroke: var(--surface); }
.pd-vclock__rahu { fill: none; stroke: var(--text-muted); stroke-width: 2px; }
.pd-vclock__palatrack { fill: none; stroke: var(--rule); stroke-width: 1px; }
.pd-vclock__pala { fill: none; stroke: var(--text); stroke-width: 2px; }
.pd-vclock__needle { fill: none; stroke: var(--text); stroke-width: 1.5px; }
.pd-vclock--quiet { --vd-bindu: var(--text); --vd-bindu-rim: var(--text); }
.pd-vclock__bindu { fill: var(--vd-bindu, var(--bindu)); stroke: var(--vd-bindu-rim, var(--bindu-rim)); stroke-width: 1px; vector-effect: non-scaling-stroke; paint-order: stroke; filter: drop-shadow(0 0 1.5px var(--surface)) drop-shadow(0 0 1px var(--surface)); }
/* names along the ring need a full 36rem dial; smaller dials show ordinals */
@container pd-vclock (inline-size < 36rem) {
  .pd-vclock__mname { display: none; }
  .pd-vclock__mnum { display: inline; }
}
@container pd-vclock (inline-size < 30rem) {
  .pd-vclock__ring--hora, .pd-vclock__ring--prahara { display: none; }
}
/* the hub shrinks with the dial: keep the centre stack inside the pala circle */
@container (inline-size < 36rem) {
  .pd-vclock__center { gap: 0; max-inline-size: 38cqi; }
  .pd-vclock__center > .pd-kicker { max-inline-size: 30cqi; }
  .pd-vclock__vara { display: none; }
}
@container (inline-size < 30rem) {
  .pd-vclock__center { max-inline-size: 42cqi; }
  .pd-vclock__center > .pd-kicker { max-inline-size: 34cqi; }
  .pd-vclock__muh { font-size: var(--fs-meta, .8125rem); }
}
.pd-vclock__caption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); margin-block-start: var(--space-5); padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule); }
.pd-vclock__legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; font: var(--font-caption); color: var(--text-muted); }
.pd-vclock__legend > li { display: inline-flex; align-items: center; gap: var(--space-2); }
.pd-vclock__key { inline-size: var(--icon-m); block-size: var(--icon-m); flex: none; overflow: visible; }
.pd-vclock__status { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pd-vclock__where { inline-size: 100%; margin: 0; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }

/* ── VedicStamp (.pd-vstamp) ──────────────────────────────────────── */
.pd-vstamp--inline { font: inherit; color: inherit; font-variant-numeric: lining-nums; }
.pd-vstamp--inline[lang="sa"] { font-family: var(--font-deva); }
/* Each part is an unbreakable unit; the separator trails its part, so a wrap never starts a line with "·". */
.pd-vstamp__part { display: inline-block; white-space: nowrap; }
.pd-vstamp__part:not(:last-child)::after { content: "·"; margin-inline: .4em; color: var(--text-subtle); font-style: normal; }
.pd-vstamp--chip { position: relative; display: inline-flex; container-type: normal; }
.pd-vstamp__btn {
  position: relative; display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--target-min); min-inline-size: var(--target-min);
  padding: var(--space-1) var(--space-4); font: var(--font-label); color: var(--text); white-space: nowrap; cursor: pointer;
  background: transparent; background-image: linear-gradient(var(--vd-wash, transparent), var(--vd-wash, transparent));
  border: var(--hairline) solid var(--border-control); border-radius: var(--radius-1); -webkit-tap-highlight-color: transparent;
  transition: border-color var(--dur-2, 180ms) var(--ease-standard), background-color var(--dur-2, 180ms) var(--ease-standard);
}
.pd-vstamp__btn > .pd-moon { font-size: var(--icon-m); }
.pd-vstamp__tithi { font-style: italic; font-family: var(--font-text); font-size: var(--fs-body-s); }
.pd-vstamp__ghati { padding-inline-start: var(--space-2); border-inline-start: var(--hairline) solid var(--rule); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pd-vstamp__unit { color: var(--text-subtle); }
@media (hover: hover) { .pd-vstamp__btn:hover { --vd-wash: color-mix(in oklab, currentColor var(--state-hover-mix), transparent); border-color: var(--text); } }
.pd-vstamp__btn:active { --vd-wash: color-mix(in oklab, currentColor var(--state-press-mix), transparent); }
.pd-vstamp__btn:focus-visible { outline-offset: var(--focus-offset); }
.pd-vstamp__btn:where([aria-expanded="true"]) { border-color: var(--text); box-shadow: inset 0 -2px 0 var(--text); }
.pd-vstamp__btn:where(:disabled) { opacity: var(--opacity-disabled); cursor: not-allowed; }
.pd-vstamp__pop { inline-size: min(22rem, calc(100vw - 2 * var(--space-4))); }

/* ── Panchanga (.pd-panchanga) ─────────────────────────────────────── */
.pd-panchanga { container-type: inline-size; color: var(--text); padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-panchanga__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--space-1) var(--space-4); margin-block-end: var(--space-4); }
.pd-panchanga__head > .pd-kicker { grid-column: 1; margin: 0; }
.pd-panchanga__title { grid-column: 1; margin: 0; font: var(--font-title); color: var(--text); }
.pd-panchanga__sub { grid-column: 1; margin: 0; font: var(--font-label); color: var(--text-muted); }
.pd-panchanga__script { grid-column: 2; grid-row: 1 / span 3; align-self: start; font-family: var(--font-deva); }
.pd-panchanga__val { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); font: var(--font-body); color: var(--text); }
.pd-panchanga__q { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.pd-panchanga__deva { display: none; font-family: var(--font-deva); }
.pd-panchanga:where([data-script="deva"]) .pd-panchanga__deva { display: inline; }
.pd-panchanga:where([data-script="deva"]) .pd-panchanga__iast { display: none; }
.pd-panchanga__limb > dd { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-2) var(--space-4); }
.pd-panchanga__limb .pd-panchanga__val { flex: 1 1 auto; }
.pd-panchanga__until { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pd-panchanga__bar { order: 3; flex: 1 0 100%; position: relative; display: block; block-size: 3px; background: linear-gradient(var(--rule), var(--rule)) 0 50% / 100% 1px no-repeat; }
.pd-panchanga__bar::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: calc(var(--f, 0) * 100%); background: var(--text); }
.pd-panchanga__limb:where([data-vishti]) .pd-panchanga__q { color: var(--accent); }
.pd-panchanga__limb:where([data-vishti]) .pd-panchanga__bar::before { background: var(--accent); }
.pd-panchanga__note { display: flex; gap: var(--space-3); align-items: baseline; margin: var(--space-3) 0 0; font: var(--font-caption); color: var(--text-muted); max-inline-size: var(--measure); }
.pd-panchanga__mark { flex: none; inline-size: .6em; block-size: .6em; border: .125em solid var(--accent); border-radius: var(--radius-pill); }
.pd-panchanga__more { margin-block-start: var(--space-4); }
.pd-panchanga__summary { display: flex; align-items: center; gap: var(--space-2); min-block-size: var(--target-min); font: var(--font-label); color: var(--link); cursor: pointer; list-style: none; }
.pd-panchanga__summary::-webkit-details-marker { display: none; }
.pd-panchanga__summary::before { content: ""; inline-size: .45em; block-size: .45em; border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor; rotate: -45deg; transition: rotate var(--dur-2, 180ms) var(--ease-standard); }
.pd-panchanga__more:where([open]) > .pd-panchanga__summary::before { rotate: 45deg; }
.pd-panchanga__summary:focus-visible { outline-offset: var(--focus-offset); }
@media (hover: hover) { .pd-panchanga__summary:hover { text-decoration: underline; text-underline-offset: .25em; } }
.pd-panchanga__facts { margin-block-start: var(--space-2); }
.pd-panchanga__badge { align-self: center; }
.pd-panchanga__src { margin: var(--space-3) 0 0; font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-panchanga--mini { padding-block-start: 0; border-block-start: 0; }
.pd-panchanga--mini .pd-panchanga__head { margin-block-end: var(--space-2); }
.pd-panchanga--mini .pd-panchanga__title { font: var(--font-body); font-weight: 500; }
.pd-panchanga--mini .pd-facts { --label-col: 6.5em; }
/* narrow and mini: value on its own line, so every limb stacks the same way (value · bar · until) */
.pd-panchanga--mini .pd-panchanga__limb .pd-panchanga__val { flex-basis: 100%; }
@container (inline-size < 30em) {
  .pd-panchanga .pd-facts { --label-col: 6.5em; }
  .pd-panchanga__head { grid-template-columns: minmax(0, 1fr); }
  .pd-panchanga__script { grid-column: 1; grid-row: auto; justify-self: start; }
  .pd-panchanga__limb .pd-panchanga__val { flex-basis: 100%; }
}

/* ── MuhurtaTimeline (.pd-muhurta) ─────────────────────────────────── */
.pd-muhurta { --vd-night: color-mix(in oklab, var(--sky-900) 55%, var(--text)); --label-col: 8rem; container-type: inline-size; color: var(--text); padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-muhurta__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-2) var(--space-5); margin-block-end: var(--space-4); }
.pd-muhurta__head > .pd-kicker { margin: 0; }
.pd-muhurta__read { margin: 0; min-block-size: 1.5em; font: var(--font-label); color: var(--text); font-variant-numeric: tabular-nums; }
.pd-muhurta__scroll { overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; scrollbar-width: thin; }
.pd-muhurta__grid { position: relative; display: grid; --vd-track-min: calc(var(--vd-seg-min, 1.5rem) * 15 / var(--vd-minf, .5)); min-inline-size: calc(var(--label-col) + var(--vd-track-min)); grid-template-columns: var(--label-col) minmax(var(--vd-track-min), 1fr); row-gap: 0; padding-block: var(--space-2); }
.pd-muhurta__label { position: sticky; inset-inline-start: 0; z-index: calc(var(--z-raised, 1) + 2); display: flex; align-items: center; align-self: stretch; padding-inline-end: var(--space-3); font: 500 var(--fs-meta)/1.3 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-subtle); background: var(--surface); }
.pd-muhurta__track { position: relative; block-size: 1.75rem; margin-block: var(--space-1); }
.pd-muhurta__track > * { position: absolute; inset-block: 0; inset-inline-start: calc(var(--s) * 100%); inline-size: calc(var(--w, 0) * 100%); }
.pd-muhurta__track--scale { block-size: 1.25rem; border-block-end: var(--hairline) solid var(--rule); }
.pd-muhurta__tick { inline-size: 0; border-inline-start: var(--hairline) solid var(--rule-strong); inset-block-start: 70%; }
.pd-muhurta__tick--label:where([data-end]) { translate: -100% 0; padding-inline: 0 var(--space-1); border-inline: 0 var(--hairline) solid var(--rule-strong); }
.pd-muhurta__tick--label { z-index: calc(var(--z-raised, 1) + 1); inline-size: max-content; inset-block-start: 0; padding-inline-start: var(--space-1); background: var(--surface); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pd-muhurta__track--ground > * { z-index: calc(var(--z-raised, 1) + 1); display: flex; align-items: center; padding-inline: var(--space-2); font: var(--font-meta); letter-spacing: var(--track-mono); white-space: nowrap; overflow: hidden; }
.pd-muhurta__day { color: var(--text-muted); background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--rule-strong); }
.pd-muhurta__night { color: var(--on-sky); background: var(--vd-night); box-shadow: inset 0 0 0 1px var(--rule-strong); }
.pd-muhurta__track--segs { block-size: var(--target-min); }
.pd-muhurta__seg {
  z-index: calc(var(--z-raised, 1) + 1);
  display: grid; place-items: center; margin: 0; padding: 0; scroll-snap-align: start;
  font: 500 var(--fs-meta)/1 var(--font-mono); color: var(--text-muted); font-variant-numeric: tabular-nums; cursor: pointer;
  background: var(--surface); background-image: linear-gradient(var(--vd-wash, transparent), var(--vd-wash, transparent));
  border: var(--hairline) solid var(--border-control); border-inline-start-width: 0; border-radius: 0; -webkit-tap-highlight-color: transparent;
}
.pd-muhurta__seg:first-child { border-inline-start-width: var(--hairline); }
.pd-muhurta__seg:where([data-night]) { border-block-end: 3px solid var(--vd-night); }
@media (hover: hover) { .pd-muhurta__seg:hover { --vd-wash: color-mix(in oklab, currentColor var(--state-hover-mix), transparent); color: var(--text); } }
.pd-muhurta__seg:active { --vd-wash: color-mix(in oklab, currentColor var(--state-press-mix), transparent); }
.pd-muhurta__seg:focus-visible { z-index: var(--z-raised); outline-offset: calc(-1 * var(--focus-width)); }
.pd-muhurta__seg:where([aria-current]) { color: var(--surface); background-color: var(--text); border-color: var(--text); }
.pd-muhurta__dot { position: absolute; inset-block-start: 4px; inset-inline-start: 50%; inline-size: 5px; block-size: 5px; margin-inline-start: -2.5px; border-radius: var(--radius-pill); background: currentColor; }
.pd-muhurta__track--win { block-size: 1.5rem; border-block-end: var(--hairline) solid var(--rule); }
.pd-muhurta__win { display: flex; align-items: center; inset-block: 3px; min-inline-size: 2px; }
.pd-muhurta__win--kala { border: 1.5px solid var(--text-muted); }
.pd-muhurta__win--muhurta { background: var(--text-subtle); }
.pd-muhurta__win:where([data-active]) { border-color: var(--text); border-width: 2px; }
.pd-muhurta__wt { position: absolute; z-index: calc(var(--z-raised, 1) + 1); inset-inline-start: calc(100% + var(--space-2)); padding-inline: var(--space-1); margin-inline: calc(-1 * var(--space-1)); background: var(--surface); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pd-muhurta__win:where([data-flip]) .pd-muhurta__wt { inset-inline: auto calc(100% + var(--space-2)); }
.pd-muhurta__now { position: absolute; inset-block: 0; inset-inline-start: calc(var(--label-col) + var(--s) * (100% - var(--label-col))); inline-size: 0; border-inline-start: 1.5px solid var(--text); pointer-events: none; z-index: var(--z-raised, 1); }
.pd-muhurta__bindu { position: absolute; inset-block-start: 0; inset-inline-start: -5px; inline-size: 8px; block-size: 8px; border-radius: var(--radius-pill); background: var(--vd-bindu, var(--bindu)); box-shadow: inset 0 0 0 1px var(--vd-bindu-rim, var(--bindu-rim)), 0 0 0 2px var(--surface); }
.pd-muhurta--quiet { --vd-bindu: var(--text); --vd-bindu-rim: var(--text); }
.pd-muhurta__legend { margin: var(--space-3) 0 0; max-inline-size: var(--measure); font: var(--font-caption); color: var(--text-muted); }
@container (inline-size < 48em) { .pd-muhurta__grid { --vd-seg-min: var(--target-min); --label-col: 7rem; } }
@media (pointer: coarse) { .pd-muhurta__grid { --vd-seg-min: var(--target-min); } }

/* ── SvaraClock (.pd-svara) ──────────────────────────────────────── */
.pd-svara { container-type: inline-size; color: var(--text); padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule-strong); }
.pd-svara__head { margin-block-end: var(--space-5); }
.pd-svara__head > .pd-kicker { margin: 0 0 var(--space-2); }
.pd-svara__title { margin: 0; font: var(--font-headline); color: var(--text); }
.pd-svara__title [lang="sa"], .pd-svara__lname [lang="sa"], .pd-svara__tname [lang="sa"], .pd-svara__bija [lang="sa"] { font-family: var(--font-deva); font-style: normal; }
.pd-svara__side { font: var(--font-label); color: var(--text-muted); }
.pd-svara__sub { margin: var(--space-2) 0 0; font: var(--font-label); color: var(--text-muted); max-inline-size: var(--measure); }
.pd-svara__flow { position: relative; display: grid; gap: var(--space-2); padding-block-end: var(--space-5); }
.pd-svara__lane { display: grid; grid-template-columns: var(--label-col) minmax(0, 1fr); align-items: center; }
.pd-svara__lname { display: grid; font: var(--font-label); color: var(--text-muted); }
.pd-svara__lside { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); }
.pd-svara__lane:where([data-now]) .pd-svara__lname { color: var(--text); font-weight: 600; }
.pd-svara__cells { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); block-size: 1.5rem; border-block: var(--hairline) solid var(--rule); }
.pd-svara__cell:where([data-flow]) { background: var(--text-subtle); box-shadow: inset 1px 0 0 var(--surface); }
.pd-svara__cell:where([data-now]) { background: var(--text); }
.pd-svara__scale { position: relative; block-size: 1rem; margin-inline-start: var(--label-col); }
.pd-svara__scale > span { z-index: 1; padding-inline: var(--space-1); background: var(--surface); font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); font-variant-numeric: tabular-nums; position: absolute; inset-inline-start: calc(var(--s) * 100%); translate: -50% 0; }
.pd-svara__scale > span:first-child { translate: 0 0; }
.pd-svara__scale > span:last-child { translate: -100% 0; }
.pd-svara__now { position: absolute; z-index: 0; inset-block: 0 var(--space-5); inset-inline-start: calc(var(--label-col) + var(--s) * (100% - var(--label-col))); border-inline-start: 1.5px solid var(--text); }
.pd-svara__udaya { padding-block-start: var(--space-4); border-block-start: var(--hairline) solid var(--rule); }
.pd-svara__ukicker { margin: 0 0 var(--space-3); font: 500 var(--fs-meta)/1.3 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-subtle); }
.pd-svara__bar { position: relative; display: flex; block-size: .75rem; margin-block-end: var(--space-4); }
.pd-svara__seg { flex: var(--w) 1 0; box-shadow: inset -1px 0 0 var(--surface); }
.pd-svara__seg--vayu { background: var(--el-vayu); }
.pd-svara__seg--agni { background: var(--el-agni); }
.pd-svara__seg--prithvi { background: var(--el-prithvi); }
.pd-svara__seg--jala { background: var(--el-jala); }
.pd-svara__seg--akasha { background: var(--el-akasha); }
.pd-svara__pin { position: absolute; inset-block: -4px; inset-inline-start: calc(var(--s) * 100%); border-inline-start: 2px solid var(--text); }
.pd-svara__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.pd-svara__tattva { display: grid; align-content: start; gap: var(--space-1); padding-block-end: var(--space-2); }
.pd-svara__tattva:where([aria-current]) { box-shadow: inset 0 -2px 0 var(--text); }
.pd-svara__glyph { display: block; inline-size: 3rem; block-size: 3rem; margin-block-end: var(--space-1); }
.pd-svara__glyph > svg { display: block; inline-size: 100%; block-size: 100%; overflow: visible; }
.pd-svara__ring { fill: none; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.pd-svara__tattva--vayu { --vd-el: var(--el-vayu); --vd-ink: var(--el-vayu-ink); }
.pd-svara__tattva--agni { --vd-el: var(--el-agni); --vd-ink: var(--el-agni-ink); }
.pd-svara__tattva--prithvi { --vd-el: var(--el-prithvi); --vd-ink: var(--el-prithvi-ink); }
.pd-svara__tattva--jala { --vd-el: var(--el-jala); --vd-ink: var(--el-jala-ink); }
.pd-svara__tattva--akasha { --vd-el: var(--el-akasha); --vd-ink: var(--el-akasha-ink); }
.pd-svara__tattva .pd-svara__form { fill: var(--vd-el); stroke: var(--vd-el); }
.pd-svara__tname { font: var(--font-label); font-weight: 600; color: var(--vd-ink); }
.pd-svara__bija { font: italic 400 var(--fs-body-s)/1.3 var(--font-text); color: var(--text); }
.pd-svara__dur { font: var(--font-meta); letter-spacing: var(--track-mono); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.pd-svara__caption { margin: var(--space-5) 0 0; padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule-strong); font: italic 400 var(--fs-body-s)/1.4 var(--font-text); color: var(--text-muted); }
@container (inline-size < 48em) {
  .pd-svara__list { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
  .pd-svara__flow { --label-col: 6.5rem; }
}
/* phone width: one row per tattva, form beside its name, so five never leave an orphan */
@container (inline-size < 30em) {
  .pd-svara__list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pd-svara__tattva { grid-template-columns: 3rem minmax(0, 1fr); column-gap: var(--space-4); row-gap: 0; padding-block: var(--space-2); border-block-end: var(--hairline) solid var(--rule); }
  .pd-svara__glyph { grid-row: 1 / span 3; align-self: center; margin: 0; }
}

/* ── Motion, forced colours, print ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pd-panchanga__summary::before, .pd-vstamp__btn { transition: none !important; }
}
@media (forced-colors: active) {
  .pd-moon, .pd-vclock__dial, .pd-svara__glyph, .pd-svara__bar { forced-color-adjust: none; }
  .pd-moon { --moon-lit: CanvasText; --moon-dark: Canvas; --moon-rim: CanvasText; }
  .pd-vclock__dial :where(text) { fill: CanvasText; }
  .pd-vclock__dial :where(.pd-vclock__edge, .pd-vclock__tick, .pd-vclock__seg, .pd-vclock__limit, .pd-vclock__needle, .pd-vclock__mark, .pd-vclock__rahu, .pd-vclock__pala, .pd-vclock__palatrack) { stroke: CanvasText; }
  .pd-vclock__day { fill: Canvas; stroke: CanvasText; }
  .pd-vclock__night, .pd-vclock__dot, .pd-vclock__moon--set { fill: CanvasText; stroke: CanvasText; }
  .pd-vclock__m:where([data-now]) .pd-vclock__seg, .pd-vclock__bindu { fill: Highlight; stroke: Highlight; }
  .pd-vclock__m:where([data-now]) :where(text) { fill: HighlightText; }
  .pd-muhurta__seg:where([aria-current]) { background: Highlight; color: HighlightText; border-color: Highlight; }
  .pd-muhurta__night, .pd-muhurta__win--muhurta, .pd-muhurta__bindu, .pd-svara__cell:where([data-flow]) { background: CanvasText; color: Canvas; }
  .pd-svara__cell:where([data-now]), .pd-panchanga__bar::before { background: Highlight; }
  .pd-svara__form { fill: CanvasText; stroke: CanvasText; }
  .pd-svara__bar > .pd-svara__seg { background: CanvasText; box-shadow: inset -2px 0 0 Canvas; }
  .pd-svara__pin { border-color: Highlight; }
  .pd-panchanga__bar { background: linear-gradient(CanvasText, CanvasText) 0 50% / 100% 1px no-repeat; }
}
@media print {
  .pd-moon-stamp, .pd-vclock__dial, .pd-svara__bar { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .pd-moon-stamp, .pd-panchanga, .pd-vclock { break-inside: avoid; }
  .pd-vclock__caption .pd-btn, .pd-panchanga__script { display: none; }
}
}

/* ── part: workpages.css ── */
@layer components.site {
/* Pandox DS — package "workpages": glue for four Work page templates. Owns only the page prefixes
   .pd-cspage (CaseStudyPage) · .pd-brandpage (BrandWorkPage) · .pd-cvpage (CVPage) · .pd-servicespage (ServicesPage).
   Every visible part is an existing component (case kit .pd-ck-*, brand kit .pd-bk-*, professional kit .pd-pro-*,
   Masthead, SiteFooterMega). This file only places them on the page, sets band rhythm and aligns full-bleed parts
   to --page-max. No colour, type or ornament of its own; print rules for the CV and the case study live at the end. */

/* ── shared frame ─────────────────────────────────────────────────────────── */
.pd-cspage, .pd-brandpage, .pd-cvpage, .pd-servicespage {
  container: pd-page / inline-size; display: flow-root; min-block-size: 100vh; background: var(--surface); color: var(--text);
}
:where(.pd-cspage, .pd-brandpage, .pd-cvpage, .pd-servicespage) > main { display: block; padding-block-end: var(--space-10); }
:where(.pd-cspage, .pd-brandpage, .pd-cvpage, .pd-servicespage) > main:focus { outline: 0; }
:where(.pd-cspage, .pd-brandpage, .pd-cvpage, .pd-servicespage) [data-section][hidden] { display: none; }
.pd-cspage__wrap, .pd-brandpage__wrap, .pd-cvpage__wrap, .pd-servicespage__wrap {
  box-sizing: border-box; inline-size: 100%; max-inline-size: var(--page-max); margin-inline: auto; padding-inline: var(--gutter);
}
.pd-cspage__crumbs, .pd-brandpage__crumbs, .pd-cvpage__crumbs, .pd-servicespage__crumbs { padding-block: var(--space-5) var(--space-6); }
/* one band = one subject; air between bands, the component head carries the rule */
.pd-cspage__band, .pd-brandpage__band, .pd-cvpage__band, .pd-servicespage__band {
  display: grid; gap: var(--space-7); padding-block-start: var(--space-9); min-inline-size: 0;
}
:where(.pd-cspage__band, .pd-brandpage__band, .pd-cvpage__band, .pd-servicespage__band)[hidden] { display: none; }
:where(.pd-cspage__band, .pd-brandpage__band, .pd-cvpage__band, .pd-servicespage__band) > * { min-inline-size: 0; }
/* a media band follows its chapter closely: images belong to the text above them */
.pd-cspage__band--media, .pd-brandpage__band--media { padding-block-start: var(--space-7); }
.pd-cspage__band--next, .pd-brandpage__band--next { padding-block-start: var(--space-10); }

/* full-bleed heroes (CaseStudyHero): the media runs edge to edge, copy and facts sit on the page grid */
.pd-cspage__hero .pd-ck-hero__inner, .pd-cspage__hero .pd-ck-hero__facts,
.pd-brandpage__hero .pd-ck-hero__inner, .pd-brandpage__hero .pd-ck-hero__facts {
  box-sizing: border-box; inline-size: 100%; max-inline-size: var(--page-max); margin-inline: auto;
}
.pd-cspage__hero .pd-ck-hero__media > figcaption, .pd-brandpage__hero .pd-ck-hero__media > figcaption {
  box-sizing: border-box; inline-size: 100%; max-inline-size: var(--page-max); margin-inline: auto;
}
/* the hero's first rule sits under the breadcrumbs, not on top of them */
.pd-cspage__hero, .pd-brandpage__hero { padding-block-start: 0; }

/* pull quote: set in from the left on wide pages, on the case study's reading line */
.pd-cspage__band--quote > *, .pd-brandpage__band--quote > * { max-inline-size: 60rem; }
@container pd-page (min-width: 64em) {
  .pd-cspage__band--quote, .pd-brandpage__band--quote { padding-inline-start: calc((100% - var(--gutter) * 11) / 12 * 3 + var(--gutter) * 3); }
}

/* ── CaseStudyPage ────────────────────────────────────────────────────────── */
/* (all bands are full measure; the kit's own containers lay out columns) */

/* ── BrandWorkPage ────────────────────────────────────────────────────────── */
.pd-brandpage__intro { display: grid; gap: var(--space-4); }
/* applications grid (MockupFrame figures) on the page's 12 columns */
.pd-brandpage__apps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7) var(--gutter); align-items: start; }
@container pd-page (min-width: 40em) {
  .pd-brandpage__apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-brandpage__apps > .pd-brandpage__wide { grid-column: 1 / -1; }
}
@container pd-page (min-width: 64em) {
  .pd-brandpage__apps { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .pd-brandpage__apps > * { grid-column: span 4; }
  .pd-brandpage__apps > .pd-brandpage__wide { grid-column: span 8; }
  .pd-brandpage__apps > .pd-brandpage__full { grid-column: 1 / -1; }
}
.pd-brandpage__apps > .pd-brandpage__full { grid-column: 1 / -1; }
/* specimen heads on this page read like the case-kit heads: number · title ……… meta (alignment only) */
.pd-brandpage .pd-section-head--specimen { justify-content: flex-start; }
.pd-brandpage .pd-section-head--specimen > .pd-meta { margin-inline-start: auto; }

/* ── CVPage ───────────────────────────────────────────────────────────────── */
.pd-cvpage__wrap { max-inline-size: calc(72rem + var(--gutter) * 2); }
.pd-cvpage__doc { display: grid; gap: var(--space-5); }
/* the ServicesEngagement close block stands alone here, so its h3 is promoted to h2: same face as the component's h3 */
.pd-cvpage .pd-pro-svc__close h2 { margin: 0; font: var(--font-headline); }

/* ── ServicesPage ─────────────────────────────────────────────────────────── */
.pd-servicespage__band:first-of-type { padding-block-start: 0; }
/* the "How an engagement starts" group inside ServicesEngagement: kicker over the step row */
.pd-servicespage__steps { display: grid; gap: var(--space-5); }

/* ── print ────────────────────────────────────────────────────────────────── */
@media print {
  /* the documents print on A4 with real margins (a named page, so other parts' @page rules cannot zero them) */
  @page pd-workdoc { size: A4; margin: 16mm 14mm 18mm; }
  .pd-cspage, .pd-brandpage, .pd-servicespage { page: pd-workdoc; }
  /* chrome never prints: masthead, footer, skip link, the CV action bar */
  :where(.pd-cspage, .pd-brandpage, .pd-cvpage, .pd-servicespage) :where(.pd-masthead, .pd-megafoot, .pd-crumbs) { display: none; }
  :where(body:has(> .pd-cspage, > .pd-brandpage, > .pd-cvpage, > .pd-servicespage)) > .pd-skip { display: none; }
  .pd-cspage, .pd-brandpage, .pd-cvpage, .pd-servicespage { min-block-size: 0; background: #fff; color: #000; }
  :where(.pd-cspage, .pd-brandpage, .pd-cvpage, .pd-servicespage) > main { padding: 0; }
  .pd-cspage__wrap, .pd-brandpage__wrap, .pd-cvpage__wrap, .pd-servicespage__wrap { max-inline-size: none; padding-inline: 0; }
  .pd-cspage__band, .pd-brandpage__band, .pd-servicespage__band { padding-block-start: 8mm; }
  /* CVPage prints the CV sheet alone, on A4 in black ink (ResumeCV's own print rules size the sheet) */
  .pd-cvpage__band { display: none; }
  .pd-cvpage__doc { display: block; max-inline-size: none; }
  /* case study: interactive and navigational parts drop out; the comparison prints side by side (case kit) */
  .pd-cspage__band--next, .pd-brandpage__band--next { display: none; }
  .pd-cspage__band--quote, .pd-brandpage__band--quote { padding-inline-start: 0; }
}
}