/* =========================================================
   Higher Education AI Documentation Framework
   Shared design system + institutional site styles
   ========================================================= */

:root, [data-theme="light"] {
  --color-bg:#f6f5f0;
  --color-surface:#ffffff;
  --color-surface-2:#faf9f5;
  --color-surface-offset:#f0eee7;
  --color-border:#dcd8cf;
  --color-border-strong:#c9c4b8;
  --color-divider:#e4e1d9;
  --color-text:#23201a;
  --color-text-muted:#65625b;
  --color-text-faint:#9c988f;
  --color-text-inverse:#f9f8f4;
  --color-primary:#01696f;
  --color-primary-hover:#0a4c52;
  --color-primary-soft:#d9e6e2;
  --color-primary-tint:#eef4f1;
  --color-accent:#964219;
  --color-accent-soft:#f1e2d6;

  --radius-sm:.4rem; --radius-md:.65rem; --radius-lg:1rem; --radius-xl:1.4rem; --radius-full:9999px;
  --shadow-sm:0 1px 2px rgba(26,24,20,.06);
  --shadow-md:0 12px 34px rgba(26,24,20,.09);
  --shadow-lg:0 28px 64px rgba(26,24,20,.13);

  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.25rem;
  --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem; --space-16:4rem; --space-20:5rem; --space-24:6rem;

  --text-xs:clamp(.75rem,.71rem + .18vw,.84rem);
  --text-sm:clamp(.875rem,.83rem + .22vw,.97rem);
  --text-base:clamp(1rem,.96rem + .2vw,1.1rem);
  --text-lg:clamp(1.18rem,1.05rem + .55vw,1.45rem);
  --text-xl:clamp(1.5rem,1.2rem + 1.2vw,2.2rem);
  --text-2xl:clamp(2rem,1.4rem + 2.2vw,3.2rem);
  --text-3xl:clamp(2.6rem,1.5rem + 4vw,4.6rem);

  --font-display:'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --font-body:'Work Sans', system-ui, -apple-system, sans-serif;
  --font-mono:ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --header-h:72px;
  --maxw:1200px;
}

[data-theme="dark"] {
  --color-bg:#15140f;
  --color-surface:#1c1b16;
  --color-surface-2:#211f19;
  --color-surface-offset:#26241d;
  --color-border:#36342c;
  --color-border-strong:#454338;
  --color-divider:#2a2821;
  --color-text:#e8e5dd;
  --color-text-muted:#a3a094;
  --color-text-faint:#6e6b60;
  --color-text-inverse:#1a1914;
  --color-primary:#5aa3ad;
  --color-primary-hover:#74b8c1;
  --color-primary-soft:#26332f;
  --color-primary-tint:#1f2723;
  --color-accent:#c2733f;
  --color-accent-soft:#33271d;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 12px 34px rgba(0,0,0,.38);
  --shadow-lg:0 28px 64px rgba(0,0,0,.5);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 1.5rem); }
body {
  margin:0;
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:1.62;
  color:var(--color-text);
  background:var(--color-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img { max-width:100%; display:block; }
a { color:var(--color-primary); text-decoration:none; }
a:hover { color:var(--color-primary-hover); }
h1,h2,h3,h4 { text-wrap:balance; }
p { text-wrap:pretty; }

.skip-link { position:absolute; left:-9999px; top:auto; }
.skip-link:focus { left:1rem; top:1rem; background:var(--color-surface); padding:.7rem 1rem; border-radius:var(--radius-sm); z-index:1200; box-shadow:var(--shadow-md); }

:focus-visible { outline:2px solid var(--color-primary); outline-offset:2px; border-radius:var(--radius-sm); }

.container { width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:clamp(1.25rem, 4vw, 3rem); }

/* ---------- Site header ---------- */
.site-header {
  position:sticky; top:0; z-index:1000;
  height:var(--header-h);
  background:color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--color-divider);
}
.site-header .container { height:100%; display:flex; align-items:center; gap:var(--space-6); }
.wordmark { display:flex; align-items:center; gap:.7rem; color:var(--color-text); flex-shrink:0; }
.wordmark:hover { color:var(--color-text); }
.wordmark .mark {
  width:38px; height:38px; border-radius:11px; flex-shrink:0;
  display:grid; place-items:center;
  background:linear-gradient(150deg, var(--color-primary-soft), var(--color-surface-offset));
  color:var(--color-primary); border:1px solid var(--color-border);
}
.wordmark .mark svg { width:22px; height:22px; }
.wordmark .wm-text { display:flex; flex-direction:column; line-height:1.05; }
.wordmark .wm-title { font:500 1.12rem/1.05 var(--font-display); letter-spacing:.01em; white-space:nowrap; }
.wordmark .wm-sub { font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--color-text-faint); font-weight:600; margin-top:2px; white-space:nowrap; }

.primary-nav { margin-left:auto; }
.primary-nav ul { list-style:none; display:flex; gap:.1rem; margin:0; padding:0; }
.primary-nav a {
  display:block; padding:.48rem .68rem; border-radius:var(--radius-md);
  color:var(--color-text-muted); font-size:.88rem; font-weight:500; white-space:nowrap;
  transition:background .15s, color .15s;
}
.primary-nav a:hover { background:var(--color-surface-2); color:var(--color-text); }
.primary-nav a[aria-current="page"] { color:var(--color-primary); background:var(--color-primary-tint); }

.header-actions { display:flex; align-items:center; gap:.5rem; flex-shrink:0; }
.icon-btn {
  width:40px; height:40px; border-radius:var(--radius-full); border:1px solid var(--color-border);
  background:var(--color-surface); color:var(--color-text); cursor:pointer;
  display:grid; place-items:center; transition:background .15s, border-color .15s;
}
.icon-btn:hover { background:var(--color-surface-2); border-color:var(--color-border-strong); }
.icon-btn svg { width:19px; height:19px; }
.theme-toggle .sun { display:none; }
[data-theme="dark"] .theme-toggle .sun { display:block; }
[data-theme="dark"] .theme-toggle .moon { display:none; }

.nav-toggle { display:none; }

/* mobile drawer */
.mobile-nav {
  position:fixed; inset:var(--header-h) 0 0; z-index:999;
  background:var(--color-bg);
  padding:var(--space-6) clamp(1.25rem,4vw,3rem) var(--space-12);
  transform:translateY(-8px); opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s; overflow-y:auto;
}
.mobile-nav.open { opacity:1; transform:none; pointer-events:auto; }
.mobile-nav ul { list-style:none; margin:0; padding:0; display:grid; gap:.25rem; }
.mobile-nav a { display:block; padding:.9rem .5rem; font-size:1.15rem; color:var(--color-text); border-bottom:1px solid var(--color-divider); }
.mobile-nav a[aria-current="page"] { color:var(--color-primary); }

/* ---------- Hero ---------- */
.hero {
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--color-divider);
  background:
    radial-gradient(120% 90% at 88% -10%, color-mix(in srgb, var(--color-primary-soft) 75%, transparent), transparent 55%),
    radial-gradient(80% 70% at 0% 110%, color-mix(in srgb, var(--color-accent-soft) 55%, transparent), transparent 60%);
}
.hero .container { padding-block:clamp(3.5rem, 7vw, 6.5rem); }
.hero-grid { display:grid; grid-template-columns:1.25fr .85fr; gap:var(--space-12); align-items:center; }
.eyebrow {
  display:inline-flex; align-items:center; gap:.5rem;
  text-transform:uppercase; letter-spacing:.14em; color:var(--color-primary);
  font-size:var(--text-xs); font-weight:700;
}
.eyebrow::before { content:""; width:1.6rem; height:1px; background:currentColor; }
.hero h1 { font:500 var(--text-3xl)/1.0 var(--font-display); margin:1rem 0 1.4rem; letter-spacing:-.01em; }
.hero .lead { font-size:var(--text-lg); color:var(--color-text-muted); max-width:54ch; margin:0 0 var(--space-8); line-height:1.5; }
.hero-cta { display:flex; flex-wrap:wrap; gap:.75rem; }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; gap:.55rem;
  border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-text);
  padding:.8rem 1.3rem; border-radius:var(--radius-full); font-size:.95rem; font-weight:600;
  cursor:pointer; transition:transform .12s, box-shadow .15s, background .15s, border-color .15s;
}
.btn:hover { transform:translateY(-1px); box-shadow:var(--shadow-sm); color:var(--color-text); }
.btn svg { width:18px; height:18px; }
.btn.primary { background:var(--color-primary); color:var(--color-text-inverse); border-color:transparent; }
.btn.primary:hover { background:var(--color-primary-hover); color:var(--color-text-inverse); box-shadow:var(--shadow-md); }
.btn.ghost { background:transparent; }

/* ---------- Generic surfaces ---------- */
.panel {
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); padding:var(--space-6); box-shadow:var(--shadow-sm);
}
.badge {
  display:inline-flex; align-items:center; gap:.45rem; padding:.4rem .8rem; border-radius:var(--radius-full);
  background:var(--color-primary-tint); color:var(--color-primary); font-size:var(--text-xs);
  font-weight:700; letter-spacing:.05em; text-transform:uppercase;
}
.kicker { color:var(--color-primary); font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.13em; font-weight:700; }
.mini { font-size:var(--text-sm); color:var(--color-text-muted); }

/* hero side panel */
.hero-panel { display:grid; gap:var(--space-4); }
.hero-panel .panel-row { display:flex; gap:.9rem; align-items:flex-start; }
.hero-panel .panel-row .ic {
  width:2.4rem; height:2.4rem; border-radius:var(--radius-md); flex-shrink:0; display:grid; place-items:center;
  background:var(--color-primary-tint); color:var(--color-primary); border:1px solid var(--color-border);
}
.hero-panel .panel-row .ic svg { width:20px; height:20px; }
.hero-panel .panel-row strong { display:block; font-size:1.02rem; }
.hero-panel .panel-row .mini { margin:.15rem 0 0; }

/* ---------- Stats band ---------- */
.statband { border-bottom:1px solid var(--color-divider); background:var(--color-surface-2); }
.statband .container { padding-block:var(--space-8); }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-8); }
.stat { display:flex; flex-direction:column; gap:.2rem; }
.stat strong { font:500 var(--text-2xl)/1 var(--font-display); color:var(--color-primary); }
.stat span { color:var(--color-text-muted); font-size:var(--text-sm); }
.stat + .stat { border-left:1px solid var(--color-divider); padding-left:var(--space-8); }

/* ---------- Section scaffolding ---------- */
.section { padding-block:clamp(3rem, 6vw, 5.5rem); }
.section.alt { background:var(--color-surface-2); border-block:1px solid var(--color-divider); }
.section-head { max-width:64ch; margin-bottom:var(--space-10); }
.section-head .kicker { margin-bottom:.7rem; }
.section-head h2 { font:500 var(--text-2xl)/1.04 var(--font-display); margin:0 0 .8rem; }
.section-head .lead { color:var(--color-text-muted); font-size:var(--text-lg); line-height:1.5; margin:0; }

/* ---------- Card grids ---------- */
.grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-6); }
.grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-6); }

.feature-card {
  display:flex; flex-direction:column; gap:.55rem;
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); padding:var(--space-6);
}
.feature-card h3 { margin:0; font:500 var(--text-lg)/1.2 var(--font-display); }
.feature-card p { margin:0; color:var(--color-text-muted); }
.feature-card ul { margin:.2rem 0 0; padding-left:1.1rem; color:var(--color-text-muted); display:grid; gap:.4rem; }
.feature-card ul li { padding-left:.15rem; }

/* nav cards (home: explore framework) */
.nav-card {
  position:relative; display:flex; flex-direction:column; gap:.6rem;
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); padding:var(--space-6); color:var(--color-text);
  transition:transform .15s, box-shadow .18s, border-color .15s;
  overflow:hidden;
}
.nav-card::after {
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:var(--color-primary); transform:scaleX(0); transform-origin:left; transition:transform .25s;
}
.nav-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--color-border-strong); color:var(--color-text); }
.nav-card:hover::after { transform:scaleX(1); }
.nav-card .nc-num { font:500 1.1rem/1 var(--font-display); color:var(--color-text-faint); }
.nav-card h3 { margin:0; font:500 1.3rem/1.15 var(--font-display); }
.nav-card p { margin:0; color:var(--color-text-muted); font-size:var(--text-sm); flex:1; }
.nav-card .nc-go { display:inline-flex; align-items:center; gap:.4rem; color:var(--color-primary); font-weight:600; font-size:.9rem; margin-top:.3rem; }
.nav-card .nc-go svg { width:16px; height:16px; transition:transform .2s; }
.nav-card:hover .nc-go svg { transform:translateX(3px); }

/* ---------- Page header (sub pages) ---------- */
.page-header { border-bottom:1px solid var(--color-divider); background:var(--color-surface-2); }
.page-header .container { padding-block:clamp(2.5rem, 5vw, 4rem); }
.breadcrumb { display:flex; align-items:center; gap:.5rem; font-size:var(--text-sm); color:var(--color-text-faint); margin-bottom:var(--space-5); flex-wrap:wrap; }
.breadcrumb a { color:var(--color-text-muted); }
.breadcrumb a:hover { color:var(--color-primary); }
.breadcrumb .sep { color:var(--color-text-faint); }
.page-header h1 { font:500 var(--text-2xl)/1.02 var(--font-display); margin:.2rem 0 .9rem; max-width:18ch; }
.page-header .lead { font-size:var(--text-lg); color:var(--color-text-muted); max-width:62ch; margin:0; line-height:1.5; }

/* ---------- Page layout with TOC ---------- */
.page-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.toc { position:sticky; top:calc(var(--header-h) + 2rem); align-self:start; }
.toc .toc-label { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.13em; font-weight:700; color:var(--color-text-faint); margin-bottom:var(--space-4); }
.toc ul { list-style:none; margin:0; padding:0; display:grid; gap:.1rem; border-left:1px solid var(--color-divider); }
.toc a { display:block; padding:.45rem .9rem; margin-left:-1px; border-left:2px solid transparent; color:var(--color-text-muted); font-size:.9rem; line-height:1.35; }
.toc a:hover { color:var(--color-text); }
.toc a.active { color:var(--color-primary); border-left-color:var(--color-primary); font-weight:600; }
.page-body { min-width:0; }
.page-body > .block + .block { margin-top:clamp(2.5rem,5vw,4rem); }
.block h2 { font:500 var(--text-xl)/1.1 var(--font-display); margin:0 0 .4rem; scroll-margin-top:calc(var(--header-h) + 1.5rem); }
.block > .lead { color:var(--color-text-muted); font-size:var(--text-lg); max-width:64ch; margin:0 0 var(--space-6); line-height:1.5; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x:auto; border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
table { width:100%; border-collapse:collapse; background:var(--color-surface); min-width:640px; }
th, td { text-align:left; vertical-align:top; padding:.95rem 1.1rem; border-bottom:1px solid var(--color-divider); font-size:var(--text-sm); }
th { color:var(--color-text-muted); font-weight:600; background:var(--color-surface-2); position:sticky; top:0; white-space:nowrap; }
td:first-child { font-weight:600; color:var(--color-text); }
tr:last-child td { border-bottom:none; }
tbody tr { transition:background .12s; }
tbody tr:hover { background:var(--color-primary-tint); }

/* ---------- Visibility pills ---------- */
.vpill { display:inline-flex; align-items:center; gap:.35rem; padding:.22rem .6rem; border-radius:var(--radius-full); font-size:.78rem; font-weight:600; white-space:nowrap; border:1px solid transparent; }
.vpill::before { content:""; width:.5rem; height:.5rem; border-radius:50%; background:currentColor; }
.vpill.public { color:#1f7a4d; background:color-mix(in srgb,#1f7a4d 12%, var(--color-surface)); border-color:color-mix(in srgb,#1f7a4d 25%, transparent); }
.vpill.inst { color:#01696f; background:color-mix(in srgb,#01696f 12%, var(--color-surface)); border-color:color-mix(in srgb,#01696f 25%, transparent); }
.vpill.restricted { color:#9a6312; background:color-mix(in srgb,#9a6312 12%, var(--color-surface)); border-color:color-mix(in srgb,#9a6312 25%, transparent); }
.vpill.conf { color:#964219; background:color-mix(in srgb,#964219 12%, var(--color-surface)); border-color:color-mix(in srgb,#964219 25%, transparent); }
[data-theme="dark"] .vpill.public { color:#5fc08c; }
[data-theme="dark"] .vpill.inst { color:#5aa3ad; }
[data-theme="dark"] .vpill.restricted { color:#d6a24f; }
[data-theme="dark"] .vpill.conf { color:#d18a5c; }

/* ---------- Callout ---------- */
.callout {
  display:flex; gap:var(--space-4); padding:var(--space-5) var(--space-6);
  background:var(--color-primary-tint); border:1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
  border-radius:var(--radius-lg);
}
.callout .ic { flex-shrink:0; width:2.2rem; height:2.2rem; border-radius:var(--radius-md); display:grid; place-items:center; background:var(--color-surface); color:var(--color-primary); border:1px solid var(--color-border); }
.callout .ic svg { width:18px; height:18px; }
.callout p { margin:0; }
.callout strong { color:var(--color-text); }

/* ---------- Details / accordion ---------- */
.accordion { display:grid; gap:var(--space-3); }
details.acc {
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); overflow:hidden; transition:border-color .15s, box-shadow .15s;
}
details.acc[open] { border-color:var(--color-border-strong); box-shadow:var(--shadow-sm); }
details.acc summary {
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:var(--space-4);
  padding:var(--space-5) var(--space-6); font-weight:600;
}
details.acc summary::-webkit-details-marker { display:none; }
details.acc .acc-num {
  flex-shrink:0; width:2.2rem; height:2.2rem; border-radius:var(--radius-full); display:grid; place-items:center;
  background:var(--color-primary-tint); color:var(--color-primary); font:500 1.05rem/1 var(--font-display); border:1px solid var(--color-border);
}
details.acc .acc-title { flex:1; font-size:var(--text-lg); font-weight:600; }
details.acc .acc-chev { flex-shrink:0; color:var(--color-text-faint); transition:transform .2s; }
details.acc[open] .acc-chev { transform:rotate(180deg); }
details.acc .acc-body { padding:0 var(--space-6) var(--space-6) calc(var(--space-6) + 2.2rem + var(--space-4)); color:var(--color-text-muted); }
details.acc .acc-body p { margin:0 0 .8rem; }
details.acc .acc-body p:last-child { margin-bottom:0; }
details.acc .acc-tags { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.8rem; }

.tag { padding:.3rem .65rem; background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:var(--radius-full); font-size:var(--text-xs); color:var(--color-text-muted); }

/* ---------- Code / metadata block ---------- */
pre.meta-block {
  white-space:pre-wrap; font-family:var(--font-mono); font-size:.86rem; line-height:1.7;
  background:var(--color-surface-2); border:1px solid var(--color-border);
  padding:var(--space-5); border-radius:var(--radius-md); color:var(--color-text); overflow-x:auto; margin:0;
}
pre.meta-block .mk { color:var(--color-primary); }

/* ---------- Numbered process ---------- */
ol.process { list-style:none; counter-reset:step; margin:0; padding:0; display:grid; gap:var(--space-4); }
ol.process li { counter-increment:step; display:grid; grid-template-columns:auto 1fr; gap:var(--space-4); align-items:start; }
ol.process li::before {
  content:counter(step); grid-row:1; width:2.2rem; height:2.2rem; border-radius:var(--radius-full);
  display:grid; place-items:center; background:var(--color-primary); color:var(--color-text-inverse);
  font-weight:700; font-size:.95rem;
}
ol.process li .step-text { padding-top:.35rem; }

/* legend */
.legend { display:grid; gap:var(--space-3); }
.legend-row { display:flex; gap:var(--space-4); align-items:flex-start; padding:var(--space-3) 0; border-bottom:1px solid var(--color-divider); }
.legend-row:last-child { border-bottom:none; }
.legend-row .vpill { flex-shrink:0; margin-top:.1rem; }
.legend-row span.def { color:var(--color-text-muted); font-size:var(--text-sm); }

/* ---------- Prev / next ---------- */
.page-nav { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); margin-top:clamp(3rem,6vw,4.5rem); border-top:1px solid var(--color-divider); padding-top:var(--space-8); }
.page-nav a {
  display:flex; flex-direction:column; gap:.25rem; padding:var(--space-5) var(--space-6);
  border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface);
  color:var(--color-text); transition:border-color .15s, transform .12s;
}
.page-nav a:hover { border-color:var(--color-primary); transform:translateY(-2px); color:var(--color-text); }
.page-nav a.next { text-align:right; align-items:flex-end; }
.page-nav .pn-label { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.1em; color:var(--color-text-faint); font-weight:700; }
.page-nav .pn-title { font:500 var(--text-lg)/1.15 var(--font-display); }
.page-nav a.disabled { opacity:.4; pointer-events:none; }

/* ---------- CTA strip ---------- */
.cta-strip { background:var(--color-primary); color:var(--color-text-inverse); border-radius:var(--radius-xl); padding:clamp(2.5rem,5vw,3.5rem); display:flex; flex-wrap:wrap; gap:var(--space-6); align-items:center; justify-content:space-between; }
.cta-strip h2 { font:500 var(--text-xl)/1.1 var(--font-display); margin:0 0 .5rem; color:var(--color-text-inverse); }
.cta-strip p { margin:0; color:color-mix(in srgb, var(--color-text-inverse) 82%, transparent); max-width:48ch; }
.cta-strip .btn { background:var(--color-text-inverse); color:var(--color-primary); border-color:transparent; }
.cta-strip .btn:hover { background:#fff; color:var(--color-primary); }

/* ---------- Footer ---------- */
.site-footer { border-top:1px solid var(--color-divider); background:var(--color-surface-2); margin-top:var(--space-4); }
.site-footer .container { padding-block:var(--space-12) var(--space-8); }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:var(--space-10); }
.footer-brand .wordmark { margin-bottom:var(--space-4); }
.footer-brand p { color:var(--color-text-muted); font-size:var(--text-sm); max-width:42ch; margin:0; }
.footer-col h4 { margin:0 0 var(--space-4); font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.12em; color:var(--color-text-faint); font-weight:700; }
.footer-col ul { list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.footer-col a { color:var(--color-text-muted); font-size:var(--text-sm); }
.footer-col a:hover { color:var(--color-primary); }
.footer-base { margin-top:var(--space-6); padding-top:var(--space-6); border-top:1px solid var(--color-divider); display:flex; flex-wrap:wrap; gap:var(--space-4); justify-content:space-between; color:var(--color-text-faint); font-size:var(--text-sm); }

.footer-credit { margin-top:var(--space-10); padding-top:var(--space-8); border-top:1px solid var(--color-divider); }
.footer-credit .credit-line { margin:0 0 var(--space-3); font-size:var(--text-base); color:var(--color-text); font-weight:600; }
.footer-credit .credit-line a { color:var(--color-primary); }
.footer-credit .disclaimer { margin:0; font-size:var(--text-sm); color:var(--color-text-muted); max-width:78ch; line-height:1.55; }
.footer-credit .license-line { display:flex; align-items:flex-start; gap:.75rem; flex-wrap:wrap; margin:var(--space-5) 0 0; font-size:var(--text-sm); color:var(--color-text-muted); max-width:82ch; line-height:1.55; }
.footer-credit .license-line > span { flex:1; min-width:14rem; }
.cc-badge { display:inline-flex; align-items:center; gap:.4rem; padding:.34rem .7rem; border:1px solid var(--color-border); border-radius:var(--radius-full); background:var(--color-surface); color:var(--color-text); font-size:var(--text-xs); font-weight:700; letter-spacing:.03em; white-space:nowrap; flex-shrink:0; }
.cc-badge:hover { border-color:var(--color-primary); color:var(--color-primary); }
.cc-badge svg { display:block; }

/* ============================================================
   EXAMPLE / "IN PRACTICE" — fictional institution demonstration
   ============================================================ */

/* fictional-institution notice */
.demo-banner { display:flex; align-items:flex-start; gap:.75rem; padding:.9rem 1.1rem; background:var(--color-accent-soft); border:1px solid color-mix(in srgb, var(--color-accent) 30%, transparent); border-radius:var(--radius-md); font-size:var(--text-sm); color:var(--color-text); line-height:1.5; }
.demo-banner .ic { color:var(--color-accent); flex-shrink:0; display:grid; place-items:center; margin-top:1px; }
.demo-banner .ic svg { width:18px; height:18px; }
.demo-banner strong { color:var(--color-accent); }

/* example institution wordmark / crest */
.inst-id { display:flex; align-items:center; gap:1rem; margin-bottom:var(--space-6); }
.inst-crest { width:56px; height:56px; border-radius:14px; flex-shrink:0; display:grid; place-items:center; background:linear-gradient(150deg, var(--color-primary), var(--color-primary-hover)); color:var(--color-text-inverse); font:500 1.5rem/1 var(--font-display); box-shadow:var(--shadow-sm); }
.inst-name { font:500 var(--text-lg)/1.1 var(--font-display); }
.inst-tagline { color:var(--color-text-muted); font-size:var(--text-sm); }

/* filter bar */
.filter-bar { display:flex; flex-wrap:wrap; gap:var(--space-6); padding:var(--space-5) var(--space-6); background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:var(--radius-lg); margin-bottom:var(--space-6); }
.filter-group { display:flex; flex-direction:column; gap:.55rem; }
.filter-group .fg-label { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.11em; color:var(--color-text-faint); font-weight:700; }
.chips { display:flex; flex-wrap:wrap; gap:.4rem; }
.chip { padding:.42rem .85rem; border:1px solid var(--color-border); background:var(--color-surface); border-radius:var(--radius-full); font-size:var(--text-sm); font-family:inherit; color:var(--color-text-muted); cursor:pointer; transition:background .12s, color .12s, border-color .12s; }
.chip:hover { border-color:var(--color-border-strong); color:var(--color-text); }
.chip.active { background:var(--color-primary); color:var(--color-text-inverse); border-color:transparent; }
.catalog-meta { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-5); flex-wrap:wrap; }
.catalog-count { font-size:var(--text-sm); color:var(--color-text-muted); }
.catalog-count strong { color:var(--color-text); }

/* catalog grid */
.catalog-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(310px, 1fr)); gap:var(--space-5); }
.svc-card { display:flex; flex-direction:column; gap:.85rem; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-5); transition:transform .14s, box-shadow .16s, border-color .14s; }
.svc-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--color-border-strong); }
.svc-card .svc-head { display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; }
.svc-card .svc-cat { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.09em; color:var(--color-primary); font-weight:700; }
.svc-card h3 { margin:.25rem 0 0; font:500 1.22rem/1.15 var(--font-display); }
.svc-card .svc-desc { margin:0; color:var(--color-text-muted); font-size:var(--text-sm); flex:1; }
.svc-meta { display:grid; gap:.4rem; font-size:var(--text-sm); border-top:1px solid var(--color-divider); padding-top:.85rem; }
.svc-meta .row { display:flex; justify-content:space-between; gap:.75rem; align-items:baseline; }
.svc-meta .row .k { color:var(--color-text-faint); white-space:nowrap; }
.svc-meta .row .v { color:var(--color-text); text-align:right; }
.svc-foot { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:.25rem; }
.svc-link { display:inline-flex; align-items:center; gap:.35rem; color:var(--color-primary); font-weight:600; font-size:var(--text-sm); }
.svc-link svg { width:15px; height:15px; transition:transform .18s; }
.svc-link:hover svg { transform:translateX(3px); }
.svc-doc-state { font-size:var(--text-xs); color:var(--color-text-faint); }
.svc-card.is-hidden { display:none; }
.no-results { padding:var(--space-12); text-align:center; color:var(--color-text-muted); border:1px dashed var(--color-border); border-radius:var(--radius-lg); }
.no-results.is-hidden { display:none; }

/* stack flow (trace one service through the layers) */
.stack-flow { display:grid; gap:.65rem; }
.sf-item { display:grid; grid-template-columns:auto 1fr auto; gap:var(--space-4); align-items:center; padding:var(--space-4) var(--space-5); border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); }
.sf-item .sf-tier { width:2.6rem; height:2.6rem; border-radius:var(--radius-full); display:grid; place-items:center; background:var(--color-primary-tint); color:var(--color-primary); font:500 1.1rem/1 var(--font-display); border:1px solid var(--color-border); flex-shrink:0; }
.sf-item .sf-body strong { display:block; font-size:var(--text-base); }
.sf-item .sf-body span { color:var(--color-text-muted); font-size:var(--text-sm); }
.sf-arrow { display:grid; place-items:center; color:var(--color-text-faint); height:.5rem; }
.sf-arrow svg { width:20px; height:20px; }

/* service card detail (spec grid + sections) */
.card-doc { display:grid; gap:0; }
.card-section { padding-block:var(--space-8); border-top:1px solid var(--color-divider); }
.card-section:first-child { border-top:none; padding-top:0; }
.card-section-head { display:flex; align-items:center; gap:.85rem; flex-wrap:wrap; margin-bottom:var(--space-5); }
.card-section-head h2 { margin:0; font:500 var(--text-xl)/1.1 var(--font-display); }
.card-tier-tag { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.09em; font-weight:700; color:var(--color-primary); padding:.25rem .65rem; border:1px solid var(--color-border); border-radius:var(--radius-full); background:var(--color-surface-2); }
.spec-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:var(--space-3); }
.spec { padding:var(--space-4); background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:var(--radius-md); }
.spec .spec-k { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.08em; color:var(--color-text-faint); font-weight:700; margin-bottom:.35rem; }
.spec .spec-v { font-size:var(--text-base); line-height:1.4; }
.def-list { display:grid; gap:var(--space-4); }
.def-list .def-item { display:grid; grid-template-columns:200px 1fr; gap:var(--space-4); padding-bottom:var(--space-4); border-bottom:1px solid var(--color-divider); }
.def-list .def-item:last-child { border-bottom:none; padding-bottom:0; }
.def-list .def-k { font-weight:600; color:var(--color-text); }
.def-list .def-v { color:var(--color-text-muted); }
.bul { margin:0; padding-left:1.15rem; display:grid; gap:.45rem; color:var(--color-text-muted); }
.bul li { padding-left:.1rem; }

@media (max-width: 720px) {
  .filter-bar { flex-direction:column; gap:var(--space-4); }
  .catalog-grid { grid-template-columns:1fr; }
  .def-list .def-item { grid-template-columns:1fr; gap:.35rem; }
  .sf-item { grid-template-columns:auto 1fr; }
  .sf-item .vpill { display:none; }
}

/* ============================================================
   CARD ASSOCIATION MAP — service → system → models (sandbox)
   Adapts to page accent via var(--color-primary).
   ============================================================ */
.cardmap { margin:0; }
.cardmap figcaption { font-size:var(--text-sm); color:var(--color-text-muted); text-align:center; margin-bottom:var(--space-6); }
.cardmap-flow { display:flex; flex-direction:column; align-items:center; }
.cm-node { width:100%; max-width:440px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-4) var(--space-5); display:flex; flex-direction:column; gap:.3rem; align-items:center; text-align:center; box-shadow:var(--shadow-sm); }
.cm-kind { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.1em; font-weight:700; color:var(--color-primary); }
.cm-title { font:500 1.18rem/1.15 var(--font-display); }
.cm-note { font-size:var(--text-sm); color:var(--color-text-muted); }
.cm-node .vpill { margin-top:.4rem; }
.cm-service, .cm-system { border-top:3px solid var(--color-primary); }
.cm-conn { height:2.6rem; position:relative; display:flex; align-items:center; justify-content:center; }
.cm-conn::before { content:""; position:absolute; top:0; bottom:0; left:50%; border-left:2px solid var(--color-border-strong); }
.cm-rel { position:relative; background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-full); padding:.22rem .75rem; font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--color-text-muted); white-space:nowrap; }
.cm-models { width:100%; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.8rem; position:relative; padding-top:1.9rem; }
.cm-models::before { content:""; position:absolute; top:0; left:12.5%; right:12.5%; border-top:2px solid var(--color-border-strong); }
.cm-model { position:relative; max-width:none; padding:var(--space-4) var(--space-3); gap:.3rem; }
.cm-model::before { content:""; position:absolute; top:-1.9rem; left:50%; height:1.9rem; border-left:2px solid var(--color-border-strong); }
.cm-model .cm-kind { font-size:.58rem; }
.cm-model .cm-mtitle { font-weight:600; font-size:.84rem; line-height:1.2; }
@media (max-width:760px){
  .cm-models { grid-template-columns:1fr 1fr; padding-top:0; gap:var(--space-3); }
  .cm-models::before, .cm-model::before { display:none; }
}
@media (max-width:430px){ .cm-models { grid-template-columns:1fr; } }

/* ============================================================
   MICROSITE — Meridian State University AI Hub (portal chrome)
   ============================================================ */
.microsite-bar { position:sticky; top:var(--header-h); z-index:900; background:var(--color-surface); border-bottom:1px solid var(--color-divider); box-shadow:var(--shadow-sm); }
.microsite-bar .container { display:flex; align-items:center; gap:1.1rem; min-height:60px; }
.ms-brand { display:flex; align-items:center; gap:.6rem; color:var(--color-text); flex-shrink:0; }
.ms-brand:hover { color:var(--color-text); }
.ms-crest { width:32px; height:32px; border-radius:9px; flex-shrink:0; display:grid; place-items:center; background:linear-gradient(150deg, var(--color-primary), var(--color-primary-hover)); color:var(--color-text-inverse); font:500 1.05rem/1 var(--font-display); }
.ms-brand-text { display:flex; flex-direction:column; line-height:1.06; }
.ms-name { font-weight:600; font-size:.94rem; white-space:nowrap; }
.ms-sub { font-size:.66rem; letter-spacing:.11em; text-transform:uppercase; color:var(--color-primary); font-weight:700; white-space:nowrap; }
.ms-demo-tag { font-size:.64rem; letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:var(--color-accent); background:var(--color-accent-soft); border:1px solid color-mix(in srgb, var(--color-accent) 28%, transparent); padding:.25rem .55rem; border-radius:var(--radius-full); flex-shrink:0; white-space:nowrap; }
.ms-nav { margin-left:auto; display:flex; gap:.1rem; overflow-x:auto; scrollbar-width:none; }
.ms-nav::-webkit-scrollbar { display:none; }
.ms-nav a { padding:.45rem .72rem; border-radius:var(--radius-md); color:var(--color-text-muted); font-size:.88rem; font-weight:500; white-space:nowrap; }
.ms-nav a:hover { background:var(--color-surface-2); color:var(--color-text); }
.ms-nav a[aria-current="page"] { color:var(--color-primary); background:var(--color-primary-tint); }

/* The microsite carries its own primary hue (indigo) so it reads as a distinct
   property from the teal framework. Every example page references --color-primary*,
   so remapping these four tokens recolors the whole microsite at once. */
body:has(.microsite-bar) {
  --color-primary:#3c4c9a;
  --color-primary-hover:#2d3a7c;
  --color-primary-soft:#dde1f3;
  --color-primary-tint:#eceefa;
}
[data-theme="dark"] body:has(.microsite-bar) {
  --color-primary:#93a1e4;
  --color-primary-hover:#aab5ee;
  --color-primary-soft:#2a3052;
  --color-primary-tint:#212641;
}

/* offset anchors + sticky TOC for the taller header stack on microsite pages */
html:has(.microsite-bar) { scroll-padding-top: calc(var(--header-h) + 61px + 1.5rem); }
@media (min-width: 1001px) { body:has(.microsite-bar) .toc { top: calc(var(--header-h) + 61px + 2rem); } }
.block h2[id], .card-section[id] { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
html:has(.microsite-bar) .card-section[id] { scroll-margin-top: calc(var(--header-h) + 61px + 1.5rem); }

/* portal home */
.portal-hero { position:relative; overflow:hidden; border-bottom:1px solid var(--color-divider);
  background:radial-gradient(120% 100% at 85% -20%, color-mix(in srgb, var(--color-primary-soft) 70%, transparent), transparent 55%); }
.portal-hero .container { padding-block:clamp(2.75rem, 5vw, 4.5rem); }
.portal-hero .eyebrow { margin-bottom:.85rem; }
.portal-hero h1 { font:500 var(--text-2xl)/1.03 var(--font-display); margin:0 0 1rem; max-width:18ch; }
.portal-hero .lead { font-size:var(--text-lg); color:var(--color-text-muted); max-width:60ch; margin:0 0 var(--space-8); line-height:1.5; }

.role-tiles { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--space-4); }
.role-tile { display:flex; flex-direction:column; gap:.5rem; padding:var(--space-5); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); color:var(--color-text); transition:transform .14s, box-shadow .16s, border-color .14s; }
.role-tile:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--color-border-strong); color:var(--color-text); }
.role-tile .rt-ic { width:2.4rem; height:2.4rem; border-radius:var(--radius-md); display:grid; place-items:center; background:var(--color-primary-tint); color:var(--color-primary); border:1px solid var(--color-border); }
.role-tile .rt-ic svg { width:20px; height:20px; }
.role-tile strong { font:500 1.12rem/1.1 var(--font-display); }
.role-tile span { color:var(--color-text-muted); font-size:var(--text-sm); }

/* quick links row */
.quick-links { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); gap:.75rem; }
.quick-link { display:flex; align-items:center; gap:.65rem; padding:.95rem 1.1rem; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); color:var(--color-text); font-weight:500; font-size:var(--text-sm); transition:border-color .14s, color .14s; }
.quick-link:hover { border-color:var(--color-primary); color:var(--color-primary); }
.quick-link svg { width:18px; height:18px; flex-shrink:0; color:var(--color-primary); }

/* announcements */
.ann-list { display:grid; }
.ann-item { display:grid; grid-template-columns:130px 1fr; gap:var(--space-5); padding:var(--space-5) 0; border-bottom:1px solid var(--color-divider); }
.ann-item:first-child { padding-top:0; }
.ann-item:last-child { border-bottom:none; }
.ann-date { color:var(--color-text-faint); font-size:var(--text-sm); font-variant-numeric:tabular-nums; }
.ann-tag { display:inline-block; margin-top:.35rem; font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--color-primary); }
.ann-item h4 { margin:0 0 .3rem; font-size:var(--text-lg); }
.ann-item p { margin:0; color:var(--color-text-muted); font-size:var(--text-sm); max-width:70ch; }

/* documentation status indicator */
.doc-status { display:inline-flex; align-items:center; gap:.4rem; font-size:var(--text-xs); font-weight:700; letter-spacing:.02em; }
.doc-status::before { content:""; width:.55rem; height:.55rem; border-radius:50%; }
.doc-status.done { color:#1f7a4d; }
.doc-status.done::before { background:#1f7a4d; }
.doc-status.wip { color:#9a6312; }
.doc-status.wip::before { background:#9a6312; }
[data-theme="dark"] .doc-status.done { color:#5fc08c; }
[data-theme="dark"] .doc-status.done::before { background:#5fc08c; }
[data-theme="dark"] .doc-status.wip { color:#d6a24f; }
[data-theme="dark"] .doc-status.wip::before { background:#d6a24f; }

/* contact / support cards */
.contact-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:var(--space-5); }
.contact-card { padding:var(--space-5); border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); }
.contact-card h3 { margin:0 0 .4rem; font:500 var(--text-lg)/1.15 var(--font-display); }
.contact-card p { margin:0 0 .5rem; color:var(--color-text-muted); font-size:var(--text-sm); }
.contact-card a { font-weight:600; font-size:var(--text-sm); }

@media (max-width: 880px) {
  .role-tiles { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .ms-name { display:none; }
  .ms-demo-tag { display:none; }
  .role-tiles { grid-template-columns:1fr; }
  .ann-item { grid-template-columns:1fr; gap:.35rem; }
}

/* ============================================================
   DOCUMENT VIEW — printable card "templates" (Service/System/Model)
   ============================================================ */
.doc-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:var(--space-6); }
.doc-toolbar .dt-meta { display:flex; align-items:center; gap:.6rem; color:var(--color-text-muted); font-size:var(--text-sm); }
.doc-stage { background:var(--color-surface-offset); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:clamp(1rem, 3vw, 2.5rem); display:flex; justify-content:center; }

/* The sheet is fixed "paper" — it stays light in dark mode so it reads as a real
   document on a darkened desk, with its own self-contained color tokens. */
.doc-sheet {
  --ds-bg:#fbfaf7; --ds-text:#23201a; --ds-muted:#5f5c52; --ds-faint:#8d897c;
  --ds-border:#dcd8cf; --ds-rule:#23201a; --ds-accent:#3c4c9a; --ds-accent-soft:#eceefa; --ds-band:#f2f0ea;
  background:var(--ds-bg); color:var(--ds-text); width:100%; max-width:790px;
  padding:clamp(1.5rem, 4vw, 3.25rem); box-shadow:var(--shadow-lg); border-radius:3px;
  font-size:.93rem; line-height:1.6;
}
.doc-sheet a { color:var(--ds-accent); }

.doc-head { border-bottom:2px solid var(--ds-rule); padding-bottom:1.1rem; margin-bottom:1.6rem; }
.doc-org { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.4rem; flex-wrap:wrap; }
.doc-inst { display:flex; align-items:center; gap:.6rem; }
.doc-crest { width:30px; height:30px; border-radius:7px; background:var(--ds-accent); color:#fff; display:grid; place-items:center; font:500 1rem/1 var(--font-display); flex-shrink:0; }
.doc-inst-name { font-weight:700; font-size:.86rem; letter-spacing:.01em; color:var(--ds-text); line-height:1.15; }
.doc-inst-name span { display:block; font-weight:600; font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ds-accent); }
.doc-classification { font-size:.66rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; padding:.32rem .6rem; border:1.5px solid var(--ds-accent); color:var(--ds-accent); border-radius:3px; white-space:nowrap; }
.doc-classification.restricted { border-color:#9a6312; color:#9a6312; }
.doc-classification.conf { border-color:#964219; color:#964219; }
.doc-doctype { font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; color:var(--ds-accent); font-weight:700; }
.doc-title { font:500 1.85rem/1.08 var(--font-display); margin:.35rem 0 0; color:var(--ds-text); }

.doc-meta-table { width:100%; border-collapse:collapse; margin:0 0 1.9rem; font-size:.8rem; }
.doc-meta-table td { padding:.5rem .75rem; border:1px solid var(--ds-border); vertical-align:top; }
.doc-meta-table td.k { background:var(--ds-band); font-weight:700; color:var(--ds-muted); width:30%; text-transform:uppercase; letter-spacing:.04em; font-size:.68rem; white-space:nowrap; }

.doc-sec { margin-bottom:1.5rem; }
.doc-sec h3 { font-size:.92rem; font-weight:700; color:var(--ds-text); margin:0 0 .6rem; padding-bottom:.4rem; border-bottom:1px solid var(--ds-border); display:flex; gap:.55rem; align-items:baseline; }
.doc-sec h3 .num { color:var(--ds-accent); font-variant-numeric:tabular-nums; }
.doc-sec p { margin:0 0 .6rem; }
.doc-sec p:last-child { margin-bottom:0; }
.doc-sec ul { margin:.2rem 0 .6rem; padding-left:1.2rem; }
.doc-sec li { margin-bottom:.32rem; }
.doc-sec li::marker { color:var(--ds-accent); }

.doc-fieldrow { display:grid; grid-template-columns:180px 1fr; gap:1rem; padding:.45rem 0; border-bottom:1px dotted var(--ds-border); }
.doc-fieldrow:last-child { border-bottom:none; }
.doc-fk { font-weight:700; color:var(--ds-muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; padding-top:.05rem; }
.doc-fv { color:var(--ds-text); }

.doc-note { background:var(--ds-accent-soft); border-left:3px solid var(--ds-accent); padding:.75rem 1rem; font-size:.85rem; border-radius:0 4px 4px 0; margin:.2rem 0 .6rem; }

.doc-approve { margin-top:2.2rem; padding-top:1.1rem; border-top:2px solid var(--ds-rule); }
.doc-approve-title { font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700; color:var(--ds-muted); margin-bottom:1rem; }
.doc-sign-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.75rem 2.5rem; }
.doc-sign .sline { border-bottom:1.5px solid var(--ds-rule); height:1.7rem; margin-bottom:.35rem; }
.doc-sign .slabel { font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ds-muted); }

.doc-footer { margin-top:1.9rem; padding-top:.75rem; border-top:1px solid var(--ds-border); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.66rem; color:var(--ds-faint); letter-spacing:.02em; }

/* card-type chooser strip */
.doc-switch { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:var(--space-6); }
.doc-switch a { display:inline-flex; align-items:center; gap:.45rem; padding:.55rem .9rem; border:1px solid var(--color-border); border-radius:var(--radius-full); font-size:var(--text-sm); font-weight:600; color:var(--color-text-muted); background:var(--color-surface); }
.doc-switch a:hover { border-color:var(--color-primary); color:var(--color-primary); }
.doc-switch a[aria-current="page"] { background:var(--color-primary); color:var(--color-text-inverse); border-color:transparent; }

@media (max-width: 600px) {
  .doc-fieldrow { grid-template-columns:1fr; gap:.15rem; }
  .doc-sign-grid { grid-template-columns:1fr; }
  .doc-meta-table td.k { width:42%; }
}

@media print {
  .site-header, .microsite-bar, .site-footer, .doc-toolbar, .doc-switch, .skip-link, .breadcrumb { display:none !important; }
  body { background:#fff; }
  .section { padding:0 !important; }
  .container { padding:0 !important; max-width:none; }
  .doc-stage { border:none; padding:0; background:#fff; }
  .doc-sheet { box-shadow:none; max-width:none; border-radius:0; padding:0; }
  .doc-sec, .doc-approve { break-inside:avoid; }
}

/* ---------- Framework figure (embedded diagram, light frame in both themes) ---------- */
.framework-figure { margin:0; background:#f7f6f2; border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:clamp(.6rem,1.6vw,1rem); box-shadow:var(--shadow-sm); }
.framework-figure img { width:100%; height:auto; display:block; border-radius:6px; }
.framework-figure figcaption { font-size:var(--text-sm); color:#65625b; margin-top:.75rem; text-align:center; }

/* ---------- Reveal ----------
   Entrance animations are intentionally omitted (the preview environment
   freezes CSS animations at frame 0); content is always shown in its resting
   state. The .reveal class is kept as a harmless hook. */
.reveal { opacity:1; }

/* ---------- Responsive ---------- */
@media (max-width: 1120px) {
  .primary-nav { display:none; }
  .nav-toggle { display:grid; }
}
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns:1fr; gap:var(--space-8); }
  .page-layout { grid-template-columns:1fr; }
  .toc { display:none; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-brand { grid-column:1 / -1; }
}
@media (max-width: 720px) {
  .grid-2, .grid-3 { grid-template-columns:1fr; }
  .stats { grid-template-columns:1fr; gap:var(--space-5); }
  .stat + .stat { border-left:none; padding-left:0; border-top:1px solid var(--color-divider); padding-top:var(--space-5); }
  .page-nav { grid-template-columns:1fr; }
  .cta-strip { flex-direction:column; align-items:flex-start; }
  .footer-grid { grid-template-columns:1fr; gap:var(--space-8); }
  .wordmark .wm-sub { display:none; }
}