/* =========================================================
   A11y Component Lab
   Palette:  ink #0f172a · parchment #f6f8fc · card #ffffff
             hairline #e2e8f0 · slate #64748b
   Status:   sage #10b981 (pass) · amber #f59e0b (warn) · rust #ef4444 (fail)
   Brand:    four pillars of an accessible component, each its own hue -
             Keyboard (pink) · ARIA (red) · Focus (purple) · WCAG (magenta) -
             blended together wherever the site wants to show that all four
             have to overlap for a component to actually be accessible.
   Type:     Inter (display/body) / JetBrains Mono (code/numerals)
   ========================================================= */

:root{
  --ink:#0f172a;
  --ink-soft:#334155;
  --ink-deep:#07111f;
  --parchment:#f6f8fc;
  --card:#ffffff;
  --card-alt:#f8fafc;
  --brass:#6366f1;
  --brass-deep:#4f46e5;
  --brass-soft:#818cf8;
  --hairline:#e2e8f0;
  --slate:#64748b;
  --slate-soft:#94a3b8;
  --sage:#10b981;
  --sage-bg:#ecfdf5;
  --amber:#f59e0b;
  --amber-bg:#fffbeb;
  --rust:#ef4444;
  --rust-bg:#fef2f2;

  /* four pillars */
  --p-keyboard:#FF4FA3;
  --p-keyboard-bg:#FFF0F7;
  --p-aria:#F5365C;
  --p-aria-bg:#FFF0F3;
  --p-focus:#8B3DFF;
  --p-focus-bg:#F5F0FF;
  --p-wcag:#E026C6;
  --p-wcag-bg:#FDF0FB;
  --brand-gradient: linear-gradient(90deg, var(--p-keyboard), var(--p-aria), var(--p-focus), var(--p-wcag));
  --brand-gradient-soft: linear-gradient(90deg, var(--p-keyboard-bg), var(--p-aria-bg), var(--p-focus-bg), var(--p-wcag-bg));
  --focus-ring-color: var(--p-focus);

  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:24px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.05),0 4px 12px rgba(15,23,42,.04);
  --shadow-md:0 10px 30px rgba(15,23,42,.08),0 2px 8px rgba(15,23,42,.04);
  --shadow-lg:0 24px 60px rgba(15,23,42,.12);
  --font-display:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-body:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;

  /* actual rendered height of the sticky header, kept in sync with
     .header-inner's min-height/padding below so anchor scrolling
     (#keyboard, #aria, #focus, #wcag, #faq) doesn't land content
     underneath it. Bumped in the mobile media queries where the nav
     wraps onto a second row and the header gets taller. */
  --header-h: 85px;
}

*{ box-sizing: border-box; }
.visually-hidden{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
:focus-visible{ outline: 3px solid var(--focus-ring-color); outline-offset: 2px; border-radius: 2px; }
html{ }

body{
  margin: 0;
  background:
    radial-gradient(900px 500px at 100% 0%,rgba(99,102,241,.08),transparent 60%),
    var(--parchment);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap{ max-width: 1180px; margin: 0 auto; padding: 0 24px; }
a{ color: inherit; }
h1,h2,h3{ font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.muted{ color: var(--slate-soft); }
.hidden{ display: none !important; }

/* ---------- header ---------- */

.app-header{
  border-bottom: 1px solid var(--hairline);
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  position: sticky; top: 0; z-index: 30;
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; min-height:68px; }
.logo-group{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.logo-icon{
  background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
  font-size: 1.3rem; filter: drop-shadow(0 2px 5px rgba(139,61,255,.25));
}
.logo-text{ font-family: var(--font-display); font-weight:600; font-size:1.15rem; }
.header-tagline{ font-family: var(--font-mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color: var(--slate-soft); }
.site-nav{ display:flex; gap:24px; }
.site-nav a{
  text-decoration:none; font-size:.88rem; font-weight:600; color:var(--slate);
  border-bottom:1px solid transparent; padding-bottom:2px; position:relative;
}
.site-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  border-radius:2px; background:var(--brass); transition:right .2s ease;
}
.site-nav a:hover{ color:var(--ink); border-color:transparent; }
.site-nav a:hover::after{ right:0; }

/* ---------- hero ---------- */

.hero{
  padding: 72px 0 44px;
  background:
    radial-gradient(800px 360px at 86% 0%,rgba(255,79,163,.10),transparent 65%),
    radial-gradient(600px 300px at 5% 20%,rgba(139,61,255,.08),transparent 70%);
}
.eyebrow{
  font-family: var(--font-mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.14em;
  color: var(--brass-deep); margin: 0 0 12px;
}
.hero h1{ font-size: clamp(2.1rem,5vw,3.7rem); line-height:1.02; letter-spacing:-.04em; max-width: 22ch; margin-bottom: 14px; }
.lede{ max-width: 60ch; color: var(--slate); font-size: 1.05rem; margin-bottom: 30px; }

/* ---------- four-pillar intersection graphic ---------- */

.pillar-venn{ max-width: 420px; margin: 0 auto 4px; }
.pillar-venn-svg{ width: 100%; height: auto; display: block; }
.pv-circle{ mix-blend-mode: multiply; fill-opacity: .78; }
.pv-keyboard{ fill: var(--p-keyboard); }
.pv-aria{ fill: var(--p-aria); }
.pv-focus{ fill: var(--p-focus); }
.pv-wcag{ fill: var(--p-wcag); }
.pv-label{
  font-family: var(--font-mono); font-size: 15px; font-weight: 600;
  fill: var(--ink); text-transform: uppercase; letter-spacing: .04em;
}
.pv-center-label{
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  fill: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.pillar-venn-caption{
  max-width: 46ch; margin: 10px auto 34px; text-align: center;
  color: var(--slate); font-size: .92rem; line-height: 1.5;
}

/* ---------- component grid (landing) ---------- */

.component-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 36px;
}
.component-card{
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  background: rgba(255,255,255,.88);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 22px 20px;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.component-card::before{
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--brand-gradient); opacity: 0; transition: opacity .18s;
}
.component-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.component-card:hover::before{ opacity: 1; }
.card-icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: var(--brand-gradient-soft); color: var(--p-focus);
  font-family: var(--font-display); font-weight: 700; font-size: 1.2rem;
  margin-bottom: 4px;
}
.card-name{ font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--ink); }
.card-role{ font-family: var(--font-mono); font-size: .72rem; color: var(--slate-soft); }

/* ---------- demo section ---------- */

.demo-section{ padding: 8px 0 32px; }
.demo-section h2{
  font-size: clamp(1.35rem,2.6vw,1.8rem);
  margin-bottom: 6px;
}
.demo-frame{
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 40px;
  min-height: 200px;
  box-shadow: var(--shadow-sm);
  display: flex; align-items: flex-start; justify-content: flex-start;
}
.demo-placeholder{ color: var(--slate-soft); font-family: var(--font-mono); font-size:.85rem; }

/* ---------- info sections ---------- */

.info-section{ padding: 36px 0; border-top: 1px solid var(--hairline); }
.info-section h2{
  font-size: 1.4rem; margin-bottom: 18px;
}
.info-section h2, .demo-section h2{ display: flex; align-items: center; }
.pillar-dot{
  width: 12px; height: 12px; border-radius: 50%; display: inline-block; margin-right: 10px; flex-shrink: 0;
}
.demo-section, .info-section, .faq{ scroll-margin-top: var(--header-h); }
.pillar-keyboard{ border-top: 4px solid var(--p-keyboard); }
.pillar-keyboard .pillar-dot{ background: var(--p-keyboard); }
.pillar-aria{ border-top: 4px solid var(--p-aria); }
.pillar-aria .pillar-dot{ background: var(--p-aria); }
.pillar-focus{ border-top: 4px solid var(--p-focus); }
.pillar-focus .pillar-dot{ background: var(--p-focus); }
.pillar-wcag{ border-top: 4px solid var(--p-wcag); }
.pillar-wcag .pillar-dot{ background: var(--p-wcag); }

/* keyboard table */

.keyboard-table{ display: flex; flex-direction: column; gap: 8px; }
.kb-row{
  display: grid; grid-template-columns: 140px 1fr; gap: 16px;
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: var(--radius-sm); padding: 12px 16px;
  box-shadow: var(--shadow-sm);
}
.kb-key{
  font-family: var(--font-mono); font-weight: 600; font-size: .82rem;
  color: var(--brass-deep); background: #eef2ff;
  border-radius: 6px; padding: 4px 10px; text-align: center;
  display: inline-flex; align-items: center; justify-content: center;
  height: fit-content; white-space: nowrap;
}
.kb-desc{ font-size: .9rem; color: var(--ink-soft); }

/* aria table */

.aria-table{ display: flex; flex-direction: column; gap: 8px; }
.aria-row{
  display: grid; grid-template-columns: 200px 1fr; gap: 16px;
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: var(--radius-sm); padding: 12px 16px;
  box-shadow: var(--shadow-sm);
}
.aria-attr{
  font-family: var(--font-mono); font-weight: 600; font-size: .82rem;
  color: var(--brass-deep); background: #eef2ff;
  border-radius: 6px; padding: 4px 10px; text-align: center;
  display: inline-flex; align-items: center; justify-content: center;
  height: fit-content; white-space: nowrap;
}
.aria-desc{ font-size: .9rem; color: var(--ink-soft); }

/* code block */

.code-tabs{ display: flex; gap: 4px; margin-bottom: 0; }
.code-tab{
  background: var(--card-alt); border: 1px solid var(--hairline);
  border-bottom: none; border-radius: 8px 8px 0 0;
  padding: 8px 18px; font-family: var(--font-mono); font-weight: 600;
  font-size: .82rem; color: var(--slate); cursor: pointer;
}
.code-tab.active{ background: var(--ink); color: var(--parchment); border-color: var(--ink); }
.code-block-wrap{ position: relative; }
.code-block{
  background: var(--ink-deep); border: 1px solid var(--ink);
  border-radius: 0 var(--radius-md) var(--radius-md) var(--radius-md);
  padding: 20px 24px; margin: 0; overflow-x: auto;
  font-family: var(--font-mono); font-size: .82rem; line-height: 1.6;
  color: #e2e8f0; max-height: 500px;
}
.code-block code{ color: inherit; font-family: inherit; }
.copy-btn{
  position: absolute; top: 12px; right: 12px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  color: #e2e8f0; border-radius: 6px; padding: 6px 14px;
  font-family: var(--font-mono); font-size: .75rem; font-weight: 600;
  cursor: pointer; transition: background .15s;
}
.copy-btn:hover{ background: rgba(255,255,255,.2); }
.copy-btn.copied{ background: var(--sage); border-color: var(--sage); color: #fff; }

/* wcag checklist */

.wcag-checklist{ display: flex; flex-direction: column; gap: 8px; }
.wcag-item{
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: var(--radius-sm); padding: 12px 16px;
  box-shadow: var(--shadow-sm);
}
.wcag-check{
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: var(--sage-bg); border: 2px solid var(--sage);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--sage); font-size: .8rem; font-weight: 700;
}
.wcag-text{ font-size: .9rem; color: var(--ink-soft); }
.wcag-text strong{ color: var(--ink); font-weight: 600; }

/* mistakes */

.mistakes-list{ display: flex; flex-direction: column; gap: 8px; }
.mistake-item{
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--rust-bg); border: 1px solid #fecaca;
  border-radius: var(--radius-sm); padding: 12px 16px;
  box-shadow: var(--shadow-sm);
}
.mistake-icon{
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: var(--rust); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700;
}
.mistake-text{ font-size: .9rem; color: #7f1d1d; }
.mistake-text strong{ color: #450a0a; }

/* related components */

.related-components{ padding: 36px 0; border-top: 1px solid var(--hairline); }
.related-components h2{ font-size: 1.4rem; margin-bottom: 18px; }
.related-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.related-card{
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: var(--radius-sm); padding: 16px 18px;
  text-decoration: none; box-shadow: var(--shadow-sm);
  transition: transform .18s, border-color .18s;
}
.related-card:hover{ transform: translateY(-2px); border-color: var(--brass-soft); }
.related-card .rc-name{ font-weight: 600; font-size: .92rem; color: var(--ink); }
.related-card .rc-role{ font-family: var(--font-mono); font-size: .7rem; color: var(--slate-soft); }

/* ---------- faq ---------- */

.faq{ padding: 52px 0 64px; border-top: 1px solid var(--hairline); }
.faq h2{ font-size: 1.4rem; margin-bottom: 22px; }
.faq-list{ margin:0; display:flex; flex-direction:column; gap:20px; }
.faq-item dt{ font-family: var(--font-display); font-weight:600; font-size:1rem; margin-bottom:5px; }
.faq-item dd{ margin:0; color: var(--slate); max-width: 68ch; }

/* ---------- footer ---------- */

.app-footer{ border-top: 1px solid var(--hairline); padding: 24px 0 36px; background: rgba(255,255,255,.45); }
.footer-inner{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; align-items:center; }
.footer-inner p{ font-size:.8rem; color: var(--slate-soft); margin:0; }
.footer-links a{ text-decoration:none; color: var(--slate); }
.footer-links a:hover{ color: var(--brass-deep); }
.footer-links{ display:flex; gap:14px; }

/* ---------- demo component styles ---------- */

/* modal */
.demo-modal-trigger{
  background: var(--ink); color: var(--parchment); border: none;
  border-radius: var(--radius-sm); padding: 12px 24px;
  font-family: var(--font-body); font-weight: 600; font-size: .92rem;
  cursor: pointer; box-shadow: 0 6px 16px rgba(15,23,42,.16);
}
.demo-modal-trigger:hover{ background: var(--ink-soft); }
.demo-modal-overlay{
  position: fixed; inset: 0; background: rgba(15,23,42,.5);
  display: flex; align-items: center; justify-content: center; z-index: 100;
  backdrop-filter: blur(4px);
}
.demo-modal{
  background: var(--card); border-radius: var(--radius-lg);
  padding: 28px 32px; max-width: 440px; width: 90%;
  box-shadow: var(--shadow-lg);
}
.demo-modal h3{ font-size: 1.2rem; margin-bottom: 8px; }
.demo-modal p{ color: var(--slate); margin-bottom: 20px; }
.demo-modal-close{
  background: var(--ink); color: var(--parchment); border: none;
  border-radius: var(--radius-sm); padding: 8px 20px;
  font-family: var(--font-body); font-weight: 600; font-size: .85rem;
  cursor: pointer;
}

/* tabs */
.demo-tabs{ width: 100%; max-width: 500px; }
.demo-tablist{ display: flex; gap: 2px; }
.demo-tab{
  background: var(--card-alt); border: 1px solid var(--hairline);
  border-bottom: none; border-radius: 8px 8px 0 0;
  padding: 10px 18px; font-family: var(--font-body); font-weight: 500;
  font-size: .88rem; color: var(--slate); cursor: pointer;
}
.demo-tab[aria-selected="true"]{ background: var(--card); color: var(--ink); border-bottom: 1px solid var(--card); }
.demo-tab:focus-visible{ outline: 3px solid var(--focus-ring-color); outline-offset: -2px; }
.demo-tabpanel{
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: 0 8px 8px 8px; padding: 20px 24px;
  min-height: 80px; font-size: .9rem; color: var(--ink-soft);
}

/* accordion */
.demo-accordion{ width: 100%; max-width: 500px; display: flex; flex-direction: column; gap: 8px; }
.demo-acc-item{ border: 1px solid var(--hairline); border-radius: var(--radius-sm); overflow: hidden; }
.demo-acc-header{ margin: 0; }
.demo-acc-trigger{
  width: 100%; background: var(--card); border: none;
  padding: 14px 18px; text-align: left; font-family: var(--font-body);
  font-weight: 600; font-size: .92rem; color: var(--ink); cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
}
.demo-acc-trigger:focus-visible{ outline: 3px solid var(--focus-ring-color); outline-offset: -2px; }
.demo-acc-icon{ font-size: 1.1rem; color: var(--slate); transition: transform .2s; }
.demo-acc-trigger[aria-expanded="true"] .demo-acc-icon{ transform: rotate(45deg); }
.demo-acc-panel{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .25s ease;
}
.demo-acc-panel.is-open{ grid-template-rows: 1fr; }
.demo-acc-panel-inner{
  overflow: hidden; min-height: 0;
  padding: 0 18px; font-size: .88rem; color: var(--slate);
  transition: padding .25s ease;
}
.demo-acc-panel.is-open .demo-acc-panel-inner{ padding: 0 18px 14px; }

/* combobox */
.demo-combobox{ max-width: 400px; position: relative; }
.demo-combobox-label{ font-size: .82rem; font-weight: 600; color: var(--slate); margin-bottom: 6px; display: block; }
.demo-combobox-input{
  width: 100%; font-family: var(--font-body); font-size: .92rem;
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: var(--radius-sm); padding: 10px 14px;
}
.demo-combobox-input:focus{ outline: 3px solid var(--focus-ring-color); outline-offset: 1px; }
.demo-listbox{
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px;
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  max-height: 200px; overflow-y: auto; z-index: 10; list-style: none; padding: 4px;
}
.demo-listbox[hidden]{ display: none; }
.demo-option{
  padding: 8px 12px; font-size: .88rem; cursor: pointer; border-radius: 6px;
}
.demo-option[aria-selected="true"]{ background: #eef2ff; color: var(--brass-deep); }

/* dropdown menu */
.demo-menu-wrap{ position: relative; display: inline-block; }
.demo-menu-trigger{
  background: var(--ink); color: var(--parchment); border: none;
  border-radius: var(--radius-sm); padding: 10px 20px;
  font-family: var(--font-body); font-weight: 600; font-size: .88rem; cursor: pointer;
}
.demo-menu{
  position: absolute; top: 100%; left: 0; margin: 4px 0 0;
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  padding: 6px; min-width: 180px;
  list-style: none;
}
.demo-menu li{ margin: 0; padding: 0; }
.demo-menu[hidden]{ display: none; }
.demo-menuitem{
  display: block; padding: 8px 14px; font-size: .88rem; color: var(--ink);
  text-decoration: none; border-radius: 6px; cursor: pointer; border: none;
  background: none; width: 100%; text-align: left; font-family: var(--font-body);
}
.demo-menuitem:hover{ background: #eef2ff; color: var(--brass-deep); }
.demo-menuitem:focus-visible{ background: #eef2ff; color: var(--brass-deep); outline: 3px solid var(--focus-ring-color); outline-offset: -2px; }

/* tooltip */
.demo-tooltip-area{ position: relative; display: inline-flex; align-items: center; gap: 8px; }
.demo-tooltip-trigger{
  background: var(--card-alt); border: 1px solid var(--hairline);
  border-radius: 50%; width: 36px; height: 36px;
  font-size: 1rem; color: var(--slate); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.demo-tooltip-trigger:focus-visible{ outline: 3px solid var(--focus-ring-color); outline-offset: 2px; }
.demo-tooltip{
  position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--parchment);
  padding: 6px 12px; border-radius: 6px; font-size: .78rem;
  white-space: nowrap; pointer-events: none; z-index: 10;
}
.demo-tooltip[hidden]{ display: none; }
.demo-tooltip::after{
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--ink);
}

/* toast */
.demo-toast-trigger{
  background: var(--brass); color: #fff; border: none;
  border-radius: var(--radius-sm); padding: 10px 20px;
  font-family: var(--font-body); font-weight: 600; font-size: .88rem; cursor: pointer;
}
.demo-toast{
  position: fixed; bottom: 24px; right: 24px;
  background: var(--ink); color: var(--parchment);
  border-radius: var(--radius-sm); padding: 14px 20px;
  font-size: .88rem; box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 10px; z-index: 200;
}
.demo-toast[hidden]{ display: none; }

/* disclosure */
.demo-disclosure{ width: 100%; max-width: 500px; }
.demo-disclosure-trigger{
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: var(--radius-sm); padding: 12px 18px;
  width: 100%; text-align: left; font-family: var(--font-body);
  font-weight: 600; font-size: .92rem; color: var(--ink); cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
}
.demo-disclosure-trigger:focus-visible{ outline: 3px solid var(--focus-ring-color); outline-offset: -2px; }
.demo-disclosure-icon{ font-size: 1.1rem; color: var(--slate); transition: transform .2s; }
.demo-disclosure-trigger[aria-expanded="true"] .demo-disclosure-icon{ transform: rotate(180deg); }
.demo-disclosure-panel{
  padding: 14px 18px; font-size: .88rem; color: var(--slate);
  border: 1px solid var(--hairline); border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

/* alert dialog (reuses .demo-modal-overlay/.demo-modal from modal) */
.demo-danger-trigger{ background: var(--rust); }
.demo-danger-trigger:hover{ background: #dc2626; }
.demo-alert-actions{ display: flex; gap: 10px; }
.demo-alert-actions .demo-modal-close{ background: var(--card-alt); color: var(--ink); border: 1px solid var(--hairline); }
.demo-danger-btn{ background: var(--rust) !important; color: #fff !important; border-color: var(--rust) !important; }
.demo-danger-btn:hover{ background: #dc2626 !important; }

/* radio group */
.demo-radiogroup{ display: flex; flex-direction: column; gap: 10px; }
.demo-radiogroup-label{ font-family: var(--font-body); font-weight: 600; font-size: .85rem; color: var(--slate); }
.demo-radio-row{ display: flex; gap: 8px; flex-wrap: wrap; }
.demo-radio{
  padding: 10px 20px; border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  background: var(--card); font-family: var(--font-body); font-weight: 500; font-size: .9rem;
  color: var(--ink); cursor: pointer;
}
.demo-radio[aria-checked="true"]{ background: var(--p-focus); color: #fff; border-color: var(--p-focus); }
.demo-radio:focus-visible{ outline: 3px solid var(--focus-ring-color); outline-offset: 2px; }

/* switch */
.demo-switch{
  display: flex; align-items: center; gap: 12px; background: none; border: none;
  cursor: pointer; font-family: var(--font-body); font-weight: 500; font-size: .92rem; color: var(--ink);
  padding: 4px;
}
.demo-switch-track{
  width: 44px; height: 24px; border-radius: 12px; background: var(--hairline);
  position: relative; transition: background .15s; flex-shrink: 0;
}
.demo-switch-thumb{
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  position: absolute; top: 3px; left: 3px; transition: left .15s;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.demo-switch[aria-checked="true"] .demo-switch-track{ background: var(--sage); }
.demo-switch[aria-checked="true"] .demo-switch-thumb{ left: 23px; }
.demo-switch:focus-visible{ outline: 3px solid var(--focus-ring-color); outline-offset: 2px; border-radius: var(--radius-sm); }

/* breadcrumb */
.demo-breadcrumb-list{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: .92rem;
}
.demo-breadcrumb-list li{ margin: 0; padding: 0; display: flex; align-items: center; gap: 6px; }
.demo-breadcrumb-list li:not(:last-child)::after{ content: "/"; color: var(--slate-soft); }
.demo-breadcrumb-link{ color: var(--p-focus); text-decoration: none; }
.demo-breadcrumb-link:hover{ text-decoration: underline; }
.demo-breadcrumb-current{ color: var(--slate); font-weight: 600; }

/* ---------- responsive ---------- */

@media (max-width: 900px){
  .component-grid{ grid-template-columns: repeat(2, 1fr); }
  .related-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 780px){
  :root{ --header-h: 132px; }
  .header-tagline{ display: none; }
  .hero{ padding-top: 52px; }
  .kb-row, .aria-row{ grid-template-columns: 1fr; gap: 8px; }
  .header-inner{ flex-wrap: wrap; min-height: auto; padding: 12px 0; gap: 8px; }
  .logo-group{ order: 1; }
  .logo-text{ font-size: 1rem; }
  .site-nav{ order: 2; width: 100%; justify-content: flex-start; gap: 16px; flex-wrap: wrap; padding-top: 4px; border-top: 1px solid var(--hairline); }
  .site-nav a{ font-size: .82rem; }
}
@media (max-width: 560px){
  .wrap{ padding: 0 16px; }
  .hero{ padding: 44px 0 32px; }
  .hero h1{ font-size: 2.25rem; }
  .component-grid{ grid-template-columns: 1fr; }
  .related-grid{ grid-template-columns: 1fr; }
  .demo-frame{ padding: 24px 16px; }
  .code-block{ font-size: .75rem; padding: 16px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ animation: none !important; transition: none !important; }
}