/* UDB Lite page (udb-demo.html). Shared header, menu, section nav, buttons, FAQ, closing band and footer come from
   styles.css; tokens from tokens.css. This file loads after themes.css, so its light rules sit at the end.
   The lite.js switch ([data-lite-pending] / [data-lite-live] with [hidden]) is guarded in styles.css:
   nothing here sets display on those elements in a way that beats [hidden]. */
.demo-page {
  --demo-panel: #19231c;
  --chip-included: var(--green); --chip-included-bg: #233221; --chip-included-line: #42593a;
  --chip-limited: #dfc28f; --chip-limited-bg: #2d291f; --chip-limited-line: #61543c;
  --chip-preview: #b9c9b6; --chip-preview-bg: #243029; --chip-preview-line: #46574a;
}
.demo-page main { overflow-x: clip; }

/* ---------- Hero ---------- */
.demo-page .demo-hero { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: var(--s-9); padding-top: var(--s-9); }
.demo-status { margin: 0 0 var(--s-6); }
.demo-status .status-dot { margin-right: 0; }
.demo-hero h1 { font-size: clamp(2.75rem, 1.5rem + 5.6vw, 6rem); font-weight: 400; line-height: 1.04; margin: 0 0 var(--s-6); }
.demo-lead { max-width: 36em; font-size: var(--step-1); line-height: 1.6; color: var(--paper-text); margin: 0; }
.demo-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-6); }
.demo-notes { margin-top: var(--s-4); }
.demo-publication-note { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-4); max-width: 36em; margin: 0; color: var(--muted); font-size: var(--step--1); line-height: 1.6; }
.demo-publication-note > .demo-note-text { color: inherit; }
.demo-publication-note .text-link { font-size: var(--step--1); font-weight: 500; color: var(--white); gap: var(--s-1); }

/* The compact fact panel */
.demo-edition-note { align-self: start; margin-top: var(--s-1); padding: var(--s-5); background: var(--surface-1); border: 1px solid var(--frame-line); border-radius: var(--radius-2); box-shadow: var(--shadow-2); }
.demo-edition-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); }
.demo-edition-title { margin: 0; font-size: var(--step--1); font-weight: 600; color: var(--paper-heading); }
.demo-edition-mark { color: var(--green); font-size: 28px; line-height: 1; transform: rotate(-10deg); }
.demo-edition-word { font-size: clamp(2.25rem, 1.9rem + 1vw, 2.75rem); font-weight: 400; line-height: 1.08; letter-spacing: var(--track-display); color: var(--white); margin: var(--s-5) 0 var(--s-4); }
.demo-edition-text { margin: 0; color: var(--muted); font-size: var(--step--1); line-height: 1.65; }
.demo-edition-facts { margin: var(--s-5) 0 var(--s-2); padding: var(--s-4) 0; border-block: 1px solid var(--line); display: grid; gap: var(--s-3); }
.demo-edition-facts dt { color: var(--muted); font-size: var(--step--1); line-height: 1.5; }
.demo-edition-facts dd { margin: 2px 0 0; color: var(--paper-heading); font-size: var(--step-0); font-weight: 500; line-height: 1.4; }
.demo-edition-note .text-link { font-size: var(--step--1); }

/* Scope strip: four plain facts, no glyphs */
.demo-scope-strip { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: var(--s-8) 0 0; padding: 0; border-top: 1px solid var(--line); }
.demo-scope-strip li { padding: var(--s-5) var(--s-4) var(--s-5) 0; font-size: var(--step--1); line-height: 1.5; color: var(--text-soft); }
.demo-scope-strip li + li { padding-left: var(--s-4); border-left: 1px solid var(--line); }

/* ---------- Shared bits ---------- */
.demo-section-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); align-items: end; gap: var(--s-8); }
.demo-section-heading .eyebrow { color: var(--accent-soft); margin-bottom: var(--s-5); }
.demo-section-heading > p { font-size: var(--step-0); color: var(--paper-muted); line-height: 1.65; margin: 0; }
.demo-section-note { max-width: var(--measure); font-size: var(--step--1); color: var(--muted); line-height: 1.65; margin: var(--s-5) 0 0; }
.demo-state { display: inline-block; width: fit-content; padding: 3px 8px; border: 1px solid var(--dark-line); border-radius: var(--radius-1); font: 400 var(--label)/1.5 var(--mono); letter-spacing: .02em; color: var(--muted); }
.demo-state.included { color: var(--chip-included); background: var(--chip-included-bg); border-color: var(--chip-included-line); }
.demo-state.limited { color: var(--chip-limited); background: var(--chip-limited-bg); border-color: var(--chip-limited-line); }
.demo-state.preview { color: var(--chip-preview); background: var(--chip-preview-bg); border-color: var(--chip-preview-line); }

/* ---------- What's included ---------- */
.demo-included { background: var(--paper); padding: var(--s-9) 0 var(--s-7); border-block: 1px solid var(--line); }
.demo-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-7); }
.demo-feature-grid article { display: flex; flex-direction: column; align-items: flex-start; padding: var(--s-5); background: var(--paper-panel); border: 1px solid var(--dark-line); border-radius: var(--radius-2); }
.demo-feature-grid h3 { margin: var(--s-4) 0 var(--s-2); font-size: var(--step-1); font-weight: 500; letter-spacing: -.01em; line-height: 1.25; color: var(--paper-heading); }
.demo-feature-grid p { margin: 0; color: var(--paper-muted); font-size: var(--step--1); line-height: 1.65; }
.demo-limits { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: var(--s-7); background: var(--demo-panel); border: 1px solid var(--dark-line); border-radius: var(--radius-2); margin-top: var(--s-6); padding: var(--s-6); }
.demo-limits h3 { font-size: var(--step-3); font-weight: 400; line-height: 1.15; letter-spacing: var(--track-h2); margin: 0; color: var(--paper-heading); }
.demo-limits > div:last-child { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
.demo-limits h4 { font-size: var(--step-0); font-weight: 500; margin: var(--s-4) 0 var(--s-2); line-height: 1.4; color: var(--paper-heading); }
.demo-limits p { font-size: var(--step--1); line-height: 1.65; color: var(--paper-muted); margin: 0; }

/* ---------- Previews: click the lock ---------- */
.demo-previews { padding-block: var(--s-9); }
.demo-preview-intro { display: flex; align-items: center; gap: var(--s-5); margin: var(--s-7) 0 0; padding: var(--s-5) 0; border-top: 1px solid var(--line); }
.demo-preview-intro .demo-state { flex-shrink: 0; }
.demo-preview-intro p { font-size: var(--step--1); line-height: 1.65; color: var(--paper-text); margin: 0; max-width: var(--measure); }
.demo-preview-list { border-top: 1px solid var(--line); }
.demo-lock { border-bottom: 1px solid var(--line); }
.demo-lock > summary { justify-content: flex-start; gap: var(--s-4); padding: var(--s-5) 0; font-weight: 400; }
.demo-lock h3 { margin: 0; font-size: var(--step-2); font-weight: 400; line-height: 1.25; letter-spacing: -.015em; color: var(--white); }
.demo-lock-icon { flex: none; display: block; width: 44px; height: 44px; padding: 10px; overflow: visible; border: 1px solid var(--line-strong); border-radius: var(--radius-2); color: var(--muted); fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: color var(--dur-in) var(--ease-ui), border-color var(--dur-in) var(--ease-ui), background-color var(--dur-in) var(--ease-ui); }
.demo-lock-shackle { transform-box: fill-box; transform-origin: 100% 100%; transition: transform var(--dur-in) var(--ease-ui); }
.demo-lock[open] .demo-lock-icon { color: var(--green); border-color: var(--green-40); background: var(--hover-fill); }
.demo-lock[open] .demo-lock-shackle { transform: translateY(-2px) rotate(22deg); }
@media (hover: hover) and (pointer: fine) {
  .demo-lock > summary:hover .demo-lock-icon { color: var(--green); border-color: var(--green-40); }
}
.demo-lock > summary:focus-visible .demo-lock-icon { color: var(--green); border-color: var(--green-40); }
.demo-lock-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: var(--s-6); padding: 0 0 var(--s-6) 60px; }
.demo-lock-panel p { max-width: var(--measure); margin: 0; font-size: var(--step-0); line-height: 1.65; color: var(--muted); }
.demo-lock-panel .demo-lock-label { margin: 0 0 var(--s-2); font-size: var(--step--1); font-weight: 600; line-height: 1.4; color: var(--paper-heading); }
.demo-preview-boundary { padding-left: var(--s-5); border-left: 1px solid var(--line); }
.demo-preview-boundary .demo-lock-label { color: var(--accent-soft); }
@keyframes demo-fade { from { opacity: 0; } }
.demo-lock[open] > .demo-lock-panel, .demo-faq details[open] > p { animation: demo-fade var(--dur-in) var(--ease-ui); }
.demo-preview-footnotes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); padding: var(--s-5) 0 0; margin-top: var(--s-6); border-top: 1px solid var(--line); }
.demo-preview-footnotes p { max-width: var(--measure); font-size: var(--step--1); line-height: 1.65; color: var(--muted); margin: 0; }
.demo-preview-footnotes strong { color: var(--paper-heading); font-weight: 500; }

/* ---------- Comparison: a table, stacked cards under 640px ---------- */
.demo-comparison { padding: var(--s-9) 0 var(--s-7); background: var(--paper); border-block: 1px solid var(--line); }
.demo-table-wrap { margin-top: var(--s-7); }
.demo-comparison-table { border-collapse: collapse; table-layout: fixed; width: 100%; text-align: left; }
.demo-comparison-table caption { text-align: left; padding: 0 0 var(--s-5); color: var(--muted); font-size: var(--step--1); }
.demo-comparison-table th, .demo-comparison-table td { border-top: 1px solid var(--dark-line); padding: var(--s-5); vertical-align: top; }
.demo-comparison-table th:first-child { padding-left: 0; width: 26%; }
.demo-comparison-table thead th { font-size: var(--step-2); font-weight: 500; letter-spacing: -.015em; line-height: 1.2; color: var(--paper-heading); }
.demo-comparison-table thead th:first-child { font-size: var(--step--1); font-weight: 500; letter-spacing: 0; color: var(--muted); vertical-align: bottom; }
.demo-comparison-table thead span { display: block; margin-top: var(--s-2); font-size: var(--step--1); font-weight: 400; letter-spacing: 0; color: var(--muted); }
.demo-comparison-table td:nth-child(2), .demo-comparison-table thead th:nth-child(2) { background: var(--demo-panel); }
.demo-comparison-table tbody th { font-size: var(--step-0); font-weight: 500; line-height: 1.5; color: var(--paper-heading); }
.demo-comparison-table td { font-size: var(--step--1); line-height: 1.65; color: var(--paper-muted); }
.demo-comparison-table td .demo-state { display: block; margin-bottom: var(--s-3); }
.demo-comparison-table tbody tr:last-child > * { border-bottom: 1px solid var(--dark-line); }
.demo-compare-footer { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-7); padding-top: var(--s-6); }
.demo-compare-footer > p { color: var(--muted); font-size: var(--step--1); line-height: 1.65; max-width: 60ch; margin: 0; }
.demo-compare-footer .button { flex-shrink: 0; }

/* ---------- Getting started (a real sequence, so it keeps its numbers) ---------- */
.demo-start { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-9); padding-block: var(--s-9) var(--s-8); }
.demo-start h2 { font-size: var(--step-4); }
.demo-start-intro > p { font-size: var(--step-0); line-height: 1.65; color: var(--muted); max-width: 42ch; margin: var(--s-5) 0 var(--s-4); }
.demo-start-steps { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.demo-start-steps li { display: flex; gap: var(--s-5); border-bottom: 1px solid var(--line); padding: var(--s-5) 0; }
.demo-start-steps li > span { flex: none; min-width: 2ch; font: 500 var(--step--1)/1.4 var(--mono); color: var(--green); padding-top: 2px; }
.demo-start-steps h3 { font-size: var(--step-1); font-weight: 500; margin: 0 0 var(--s-2); line-height: 1.3; color: var(--paper-heading); }
.demo-start-steps p { font-size: var(--step--1); line-height: 1.65; color: var(--muted); margin: 0; }
.demo-start-steps strong { font-weight: 500; color: var(--paper-heading); }
.demo-start-steps .demo-path { font-family: var(--mono); font-size: .95em; overflow-wrap: anywhere; }
.demo-docs-note { grid-column: 1 / -1; border-left: 2px solid var(--dark-line); padding: 3px 0 3px var(--s-4); font-size: var(--step--1); line-height: 1.65; color: var(--muted); margin: 0; max-width: var(--measure); }

/* ---------- FAQ and closing band (shared .faq-section / .closing-section) ---------- */
.demo-page .demo-faq { padding-top: var(--s-5); }
.demo-closing .closing-inner > div:last-child p { margin: var(--s-2) 0 0; font-size: var(--step--1); line-height: 1.6; color: var(--muted); }

/* ---------- Responsive ---------- */
@media (max-width: 1099.98px) {
  .demo-page .demo-hero { grid-template-columns: minmax(0, 1fr) 270px; column-gap: var(--s-7); }
  .demo-section-heading { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: var(--s-6); }
  .demo-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo-limits { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: var(--s-6); padding: var(--s-5); }
  .demo-limits > div:last-child { gap: var(--s-5); }
  .demo-start { column-gap: var(--s-8); }
}
@media (max-width: 899.98px) {
  .demo-page .demo-hero { grid-template-columns: minmax(0, 1fr); padding-top: var(--s-7); }
  .demo-edition-note { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-6); margin-top: var(--s-7); }
  .demo-edition-top { grid-column: 1 / -1; }
  .demo-edition-word { grid-column: 1; margin: var(--s-4) 0 var(--s-3); }
  .demo-edition-text { grid-column: 1; }
  .demo-edition-facts { grid-column: 2; grid-row: 2 / 4; align-self: start; margin: var(--s-4) 0 0; padding: 0 0 0 var(--s-5); border-block: 0; border-left: 1px solid var(--line); }
  .demo-edition-note .text-link { grid-column: 1 / -1; justify-self: start; margin-top: var(--s-3); }
  .demo-scope-strip { margin-top: var(--s-7); }
}
@media (max-width: 799.98px) {
  .demo-included, .demo-comparison { padding-block: var(--s-8) var(--s-6); }
  .demo-previews { padding-block: var(--s-8); }
  .demo-section-heading { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .demo-section-heading > p { max-width: var(--measure); }
  .demo-feature-grid { margin-top: var(--s-6); }
  .demo-limits { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .demo-preview-intro { flex-direction: column; align-items: flex-start; gap: var(--s-3); margin-top: var(--s-6); }
  .demo-lock-panel { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); padding-left: 60px; }
  .demo-preview-boundary { padding-left: var(--s-4); }
  .demo-preview-footnotes { gap: var(--s-5); }
  .demo-compare-footer { display: block; }
  .demo-compare-footer .button { margin-top: var(--s-5); }
  .demo-start { grid-template-columns: minmax(0, 1fr); padding-block: var(--s-8) var(--s-7); }
  .demo-page .demo-faq { padding-top: 0; }
}
@media (max-width: 639.98px) {
  .demo-hero-actions .button { width: 100%; }
  .demo-scope-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo-scope-strip li { padding: var(--s-4) var(--s-3) var(--s-4) 0; }
  .demo-scope-strip li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .demo-scope-strip li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .demo-feature-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .demo-limits > div:last-child, .demo-preview-footnotes { grid-template-columns: minmax(0, 1fr); }
  .demo-lock-panel { padding-left: 0; }
  .demo-compare-footer .button { width: 100%; }

  /* Comparison table as stacked cards: each row is a card, its row header is the title. */
  .demo-comparison-table, .demo-comparison-table tbody, .demo-comparison-table tr, .demo-comparison-table th, .demo-comparison-table td { display: block; width: auto; }
  .demo-comparison-table caption { display: block; }
  .demo-comparison-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .demo-comparison-table tbody tr { margin-bottom: var(--s-3); background: var(--paper-panel); border: 1px solid var(--dark-line); border-radius: var(--radius-2); overflow: hidden; }
  .demo-comparison-table tbody tr:last-child { margin-bottom: 0; }
  .demo-comparison-table tbody th, .demo-comparison-table tbody th:first-child { width: auto; border-top: 0; padding: var(--s-4); font-size: var(--step-1); line-height: 1.3; }
  .demo-comparison-table td { border-top: 1px solid var(--dark-line); padding: var(--s-4); }
  .demo-comparison-table tbody tr:last-child > * { border-bottom: 0; }
  .demo-comparison-table td::before { content: attr(data-label); content: attr(data-label) / ""; display: block; margin-bottom: var(--s-2); font-size: var(--step--1); font-weight: 600; color: var(--paper-heading); }
}
@media (max-width: 479.98px) {
  .demo-edition-note { grid-template-columns: minmax(0, 1fr); }
  .demo-edition-facts { grid-column: 1; grid-row: auto; margin-top: var(--s-4); padding: var(--s-4) 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .demo-lock > summary { gap: var(--s-3); }
  .demo-limits { padding: var(--s-4); }
}

/* ---------- Light theme ---------- */
:root[data-theme="light"] .demo-page {
  --demo-panel: #e0e5d8;
  --chip-included: var(--accent-soft); --chip-included-bg: #d4e2c9; --chip-included-line: #a4ba97;
  --chip-limited: #6c5522; --chip-limited-bg: #ede4cd; --chip-limited-line: #c6b58b;
  --chip-preview: #47624d; --chip-preview-bg: #e1e8dc; --chip-preview-line: #b5c4b1;
}
/* The preview icon is an eye (store-safe wording: previews, not locks). On open the pupil grows instead of a shackle lifting. */
.demo-lock-shackle { transform-origin: 50% 50%; }
.demo-lock[open] .demo-lock-shackle { transform: scale(1.3); }