/* platform.css — layout helpers for generated pages.
   Composes from theme.css primitives; introduces NO new palette/font/radius. */

.skip-link{position:absolute;left:-9999px;top:0;background:var(--paper);color:var(--ink);
  padding:.6em 1em;border:var(--rule-bold) solid var(--claret);z-index:100}
.skip-link:focus{left:.5rem;top:.5rem}

.masthead__inner{gap:var(--sp-3)}
.type-toggle{margin-left:var(--sp-6);appearance:none;cursor:pointer;background:transparent;
  /* The large-type control is the page's own accessibility affordance — it has
     no business being the smallest target on the masthead. 44px (WCAG 2.5.5). */
  display:inline-flex;align-items:center;min-height:44px;
  border:var(--rule) solid var(--line);border-radius:var(--radius);
  font-family:var(--font-mono);font-size:var(--fs-mono-xs);text-transform:uppercase;
  letter-spacing:.08em;color:var(--ink-soft);padding:.4em .7em}
.type-toggle[aria-pressed="true"]{box-shadow:inset 0 0 0 var(--rule) var(--brass);color:var(--ink)}

/* ---- generic layout ---- */
.lede{font-size:var(--fs-md);color:var(--ink-soft);max-width:var(--maxw-read)}
.section-head{margin:var(--sp-12) 0 var(--sp-6)}
.grid{display:grid;gap:var(--sp-6)}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}
.eyebrow{font-family:var(--font-mono);font-size:var(--fs-mono-xs);text-transform:uppercase;
  letter-spacing:.14em;color:var(--brass-text);margin:0 0 var(--sp-2)}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.card h3{margin-bottom:var(--sp-2)}
.card__meta{font-family:var(--font-mono);font-size:var(--fs-mono-xs);text-transform:uppercase;
  letter-spacing:.08em;color:var(--ink-faint-text)}
.arrow-link{font-family:var(--font-mono);font-size:var(--fs-sm);letter-spacing:.04em;color:var(--claret)}
.arrow-link::after{content:" →"}

/* ---- home hero ---- */
.hero{padding:var(--sp-8) 0 var(--sp-6)}
.hero h1{font-size:var(--fs-display);max-width:16ch}
.volumes{display:grid;gap:var(--sp-6);grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.volume{position:relative;overflow:hidden}
.volume__num{font-family:var(--font-display);font-weight:900;font-size:var(--fs-2xl);line-height:1;
  color:var(--brass-text);letter-spacing:-.02em}
.volume--claret .volume__num{color:var(--claret)}
.volume--green .volume__num{color:var(--green)}
.entry-cards{display:grid;gap:var(--sp-6);grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}

/* ---- module pages ---- */
.module-numeral{font-family:var(--font-display);font-weight:900;
  font-size:clamp(5rem,10vw,9rem);line-height:.85;letter-spacing:-.04em;color:var(--brass-text);opacity:.9}
.module--claret .module-numeral{color:var(--claret)}
.module--green .module-numeral{color:var(--green)}

/* ---- curriculum prose (module volumes + templates) ---- */
.prose{max-width:var(--maxw-read)}
.prose>p,.prose>ul,.prose>ol,.prose>blockquote,.prose .tablewrap{margin:0 0 var(--sp-6)}
.prose>h3,.prose>h4,.prose>h5{font-family:var(--font-display);line-height:1.15;
  margin:var(--sp-8) 0 var(--sp-3)}
.prose>h3{font-size:var(--fs-lg)}
.prose>h4{font-size:var(--fs-md)}
.prose>ul,.prose>ol{padding-left:var(--sp-6)}
.prose>ul>li,.prose>ol>li{margin:.3rem 0}
.volume-prose{margin:var(--sp-8) 0}
.templates-cta{margin:var(--sp-8) 0}
/* first heading of a volume shouldn't push a big top gap under the eyebrow */
.volume-prose .prose>h3:first-child{margin-top:var(--sp-3)}
.template-doc{border-top:var(--rule) solid var(--line);padding-top:var(--sp-6)}
.template-doc .part__head p.eyebrow{margin-bottom:.15rem}

.index-rows{border-top:var(--rule) solid var(--line)}
.index-row{display:flex;gap:var(--sp-6);align-items:baseline;justify-content:space-between;
  padding:var(--sp-3) 0;border-bottom:var(--rule) solid var(--line-soft)}
.index-row__main{flex:1}
.index-row__code{font-family:var(--font-mono);font-size:var(--fs-mono-xs);color:var(--ink-faint-text);
  letter-spacing:.08em;text-transform:uppercase}

/* ---- skills browser ---- */
.skill-card{margin:var(--sp-3) 0;scroll-margin-top:5rem}
.skill-card summary{cursor:pointer;list-style:none;display:flex;gap:var(--sp-3);align-items:baseline;
  flex-wrap:wrap}
.skill-card summary::-webkit-details-marker{display:none}
.skill-card summary::before{content:"▸";color:var(--brass-text);font-family:var(--font-mono);
  transition:transform var(--dur) var(--ease);display:inline-block}
.skill-card[open] summary::before{transform:rotate(90deg)}
.skill-card__name{font-family:var(--font-display);font-size:var(--fs-md);font-weight:600;flex:1;min-width:12rem}
.skill-id{font-family:var(--font-mono);font-size:var(--fs-mono-xs);color:var(--ink-faint-text);letter-spacing:.08em}
.task-block{margin:var(--sp-3) 0 var(--sp-3) var(--sp-6);padding-left:var(--sp-3);
  border-left:var(--rule) solid var(--line)}
.task-name{font-weight:600}
.subtask{margin-left:var(--sp-6);color:var(--ink-soft);font-size:var(--fs-sm)}
.ext-header{border-left:var(--rule-bold) solid var(--claret);padding-left:var(--sp-3);
  margin:var(--sp-12) 0 var(--sp-6);background:var(--claret-wash)}
.chip--conf-exact{border-left-color:var(--green);color:var(--green)}
.chip--conf-near{border-left-color:var(--brass-text);color:var(--ink)}
.chip--conf-parent{border-left-color:var(--ink-faint-text);color:var(--ink-faint-text)}
.chip--noeq{border-left-color:var(--claret);color:var(--claret)}
.chip--skill{border-left-color:var(--brass-text);color:var(--ink);cursor:pointer}
.chip--matter{border-left-color:var(--claret);color:var(--claret)}
.bloom{font-family:var(--font-mono);font-size:var(--fs-mono-xs);text-transform:uppercase;
  letter-spacing:.08em;color:var(--ink-faint-text)}

/* ---- matter library ---- */
.lib-toolbar{display:flex;flex-wrap:wrap;gap:var(--sp-6);align-items:center;
  justify-content:space-between;margin:var(--sp-6) 0}
.shape-row{display:grid;grid-template-columns:1fr;gap:var(--sp-6);margin:var(--sp-6) 0;
  padding-top:var(--sp-6);border-top:var(--rule) solid var(--line)}
.shape-row__label{font-family:var(--font-display);font-weight:600;font-size:var(--fs-lg)}
.shape-row__cards{display:grid;gap:var(--sp-6);grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.matter-card__caption{font-family:var(--font-display);font-weight:600;font-size:var(--fs-md);margin:var(--sp-2) 0}
.matter-card__premise{font-size:var(--fs-sm);color:var(--ink-soft)}
.tier-hidden{display:none !important}
.split-rule{height:var(--rule);background:var(--line);margin:var(--sp-3) 0}

/* ---- packet ---- */
.packet-layout{display:grid;grid-template-columns:1fr;gap:var(--sp-8)}
@media(min-width:60rem){.packet-layout{grid-template-columns:12rem minmax(0,1fr)}}
.packet-body{max-width:var(--maxw-read);min-width:0}
.part{margin:var(--sp-12) 0;scroll-margin-top:5rem}
.part__num{font-family:var(--font-display);font-weight:900;font-size:var(--fs-2xl);color:var(--brass-text);
  line-height:1;letter-spacing:-.02em}
.part__head{display:flex;gap:var(--sp-3);align-items:baseline;margin-bottom:var(--sp-3)}
.doc-card{margin:var(--sp-6) 0}
.doc-card h3,.doc-card h4,.doc-card h5{font-family:var(--font-display)}
.instructor-note{color:var(--ink-faint-text);font-style:italic;border-left:var(--rule) solid var(--line);
  padding-left:var(--sp-3);margin:var(--sp-6) 0}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin:var(--sp-3) 0}
.btn{display:inline-flex;align-items:center;gap:.4em;font-family:var(--font-mono);
  font-size:var(--fs-sm);letter-spacing:.06em;text-transform:uppercase;
  padding:.7em 1.1em;min-height:48px;border-radius:var(--radius);border:var(--rule) solid var(--brass);
  background:var(--brass-wash);color:var(--ink);cursor:pointer}
.btn--claret{border-color:var(--claret);background:var(--claret-wash);color:var(--claret)}
.btn--ghost{border-color:var(--line);background:transparent;color:var(--ink-soft)}
.persona-line{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;
  padding:var(--sp-3) 0;border-bottom:var(--rule) solid var(--line-soft)}
.persona-line__name{font-weight:600;min-width:12rem}
.tablewrap{overflow-x:auto}
.md-table td,.md-table th{white-space:nowrap}
.md-quote{border-left:var(--rule-bold) solid var(--brass);padding-left:var(--sp-6);
  color:var(--ink-soft);font-style:italic;margin:var(--sp-6) 0}
details.side-conf{margin:var(--sp-3) 0;border:var(--rule) solid var(--line);border-radius:var(--radius);
  padding:var(--sp-3) var(--sp-6);background:var(--paper-3)}
details.side-conf summary{cursor:pointer;font-family:var(--font-mono);font-size:var(--fs-mono-xs);
  text-transform:uppercase;letter-spacing:.08em;color:var(--claret)}

/* ---- firm dashboard / viz ---- */
.viz-filter{display:flex;flex-wrap:wrap;gap:var(--sp-6);align-items:center;margin:var(--sp-6) 0;
  padding:var(--sp-3) 0;border-top:var(--rule) solid var(--line);border-bottom:var(--rule) solid var(--line)}
.viz-filter .label{margin-right:var(--sp-2)}
.viz-note{font-size:var(--fs-sm);color:var(--ink-faint-text);font-style:italic}
.viz-grid{display:grid;gap:var(--sp-6);grid-template-columns:1fr}
@media(min-width:52rem){.viz-grid--2{grid-template-columns:1fr 1fr}}
.viz-card{background:var(--paper-2);border:var(--rule) solid var(--line);border-radius:var(--radius-card);
  padding:var(--sp-6);box-shadow:inset 0 0 0 var(--rule) var(--paper-edge)}
.viz-card__head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3)}
.viz-card__title{font-size:var(--fs-md);margin:0}
.viz-card__caption{font-size:var(--fs-sm);color:var(--ink-soft);margin:.2rem 0 var(--sp-3)}
.viz-toggle{appearance:none;cursor:pointer;background:transparent;border:var(--rule) solid var(--line);
  display:inline-flex;align-items:center;min-height:44px;
  border-radius:var(--radius);font-family:var(--font-mono);font-size:var(--fs-mono-xs);
  text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);padding:.35em .6em}
.viz-toggle[aria-expanded="true"]{box-shadow:inset 0 0 0 var(--rule) var(--brass);color:var(--ink)}
.viz-chart{margin-top:var(--sp-2)}
.viz-table{margin-top:var(--sp-3)}
.chart-svg text{font-family:var(--font-mono)}
.chart-lbl{font-size:11px;fill:var(--ink-soft)}
.chart-val{font-size:11px;fill:var(--ink);font-weight:600}
.chart-anno{font-size:10px;fill:var(--ink-faint)}
.chart-axis{stroke:var(--line);stroke-width:1}
.legend{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin:var(--sp-3) 0 0;
  font-family:var(--font-mono);font-size:var(--fs-mono-xs);text-transform:uppercase;letter-spacing:.06em}
.legend span{display:inline-flex;align-items:center;gap:.4em;color:var(--ink-soft)}
.legend i{width:.85em;height:.85em;border-radius:2px;display:inline-block}
.kpi-hero .kpi-tile__value{font-size:var(--fs-display)}
@media(min-width:64rem){.wrap .kpi-row{grid-template-columns:repeat(3,1fr)}}
.kpi-tile__spark{margin-top:var(--sp-3)}
.kpi-tile__chip{font-family:var(--font-mono);font-size:var(--fs-mono-xs);letter-spacing:.06em;
  text-transform:uppercase;padding:.2em .5em;border-radius:var(--radius);border-left:var(--rule-bold) solid var(--ok)}
.kpi-tile__chip.is-warn{border-left-color:var(--warn);color:var(--warn)}
.downloads{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6)}
.dl-chip{font-family:var(--font-mono);font-size:var(--fs-mono-xs);text-transform:uppercase;
  display:inline-flex;align-items:center;min-height:44px;
  letter-spacing:.08em;padding:.5em .8em;border:var(--rule) solid var(--brass);border-radius:var(--radius);
  color:var(--ink);background:var(--brass-wash)}

/* ---- viz interaction: focusable marks, shared tooltip, patterns ---- */
.viz-mark{outline:none}
.viz-mark:focus-visible{outline:var(--rule-bold) solid var(--brass);outline-offset:1px}
.viz-tip{position:fixed;left:0;top:0;z-index:80;pointer-events:none;max-width:min(24rem,86vw);
  display:flex;align-items:baseline;gap:.5em;background:var(--ink);color:var(--ink-invert);
  font-family:var(--font-mono);font-size:var(--fs-mono-xs);line-height:1.35;
  padding:.45em .6em;border-radius:var(--radius);box-shadow:0 6px 20px rgba(0,0,0,.30)}
.viz-tip[hidden]{display:none}
.viz-tip__sw{flex:none;width:.78em;height:.78em;border-radius:2px;align-self:center}
.viz-tip__v{font-weight:700;white-space:nowrap}
.viz-tip__l{opacity:.82}
/* Pattern overlays: off by default, revealed by the PATTERNS toggle. The
   forced-colors media query auto-reveals them even without JS, so series stay
   distinguishable when the OS collapses the palette. */
.viz-pat{opacity:0}
.patterns-on .viz-pat{opacity:1}
@media (forced-colors: active){ .viz-pat{opacity:1} }

@media print{
  .type-toggle,.viz-toggle,.viz-filter,.lib-toolbar,.cta-row,.skip-link,.downloads{display:none !important}
  .viz-tip{display:none !important}          /* tooltips never print */
  .viz-table[hidden]{display:block !important}
  .viz-card,.card{break-inside:avoid}
  /* packet prints as one full-width column (TOC rail is hidden by theme.css) */
  .packet-layout{display:block !important}
  .packet-body{max-width:100% !important}
  .instructor-note{display:none !important}   /* mirror theme's .instructor-notes rule */
}