/* Tabs keep their own namespace; header navigation uses .nav-list. */
.tab-set { min-width:0 }
.tab-list,[role="tablist"] {
  display:flex; align-items:center; flex-wrap:wrap; gap:6px;
  padding:6px; border:1px solid var(--line); border-radius:var(--r-card);
  background:var(--panel-2); color:var(--text); max-width:100%;
}
[role="tab"] {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:10px 18px; border:1px solid var(--clear);
  border-radius:var(--r-btn); background:var(--clear); color:var(--text);
  font-size:var(--fs-sm); font-weight:500;
}
[role="tab"]:hover { background:var(--bg); color:var(--text) }
[role="tab"][aria-selected="true"] {
  background:var(--panel); color:var(--text); border-color:var(--line);
  font-weight:600; box-shadow:var(--shadow-xs);
}
[role="tabpanel"] { min-width:0; padding-top:24px }
[role="tabpanel"]:focus-visible { outline-offset:6px }
.toc {
  display:flex; flex-wrap:wrap; gap:8px; padding:12px;
  border:1px solid var(--line); border-radius:var(--r-card);
  background:var(--bg); color:var(--text); margin-bottom:32px;
}
.toc a {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:8px 12px; border-radius:var(--r-chip);
  font-size:var(--fs-sm); border:1px solid var(--clear);
}
.toc a:hover,.toc a[aria-current] { background:var(--panel); color:var(--text); border-color:var(--line) }
.toc-sticky { position:sticky; top:12px; z-index:10 }
.faq-list { display:grid; gap:12px }
.faq-item {
  border:1px solid var(--line); border-radius:var(--r-card);
  background:var(--panel); color:var(--text); box-shadow:var(--shadow-xs);
}
.faq-item summary {
  position:relative; cursor:pointer; list-style:none; padding:20px 52px 20px 22px;
  font-size:15px; font-weight:600; overflow-wrap:break-word;
}
.faq-item summary::-webkit-details-marker { display:none }
.faq-item summary::after { content:"+"; position:absolute; right:22px; top:18px; font-family:var(--f-mono); font-size:20px; color:var(--muted) }
.faq-item[open] summary::after { content:"−" }
.faq-answer { padding:0 22px 22px; font-size:14.5px; color:var(--muted); line-height:1.85 }
.faq-answer > * + * { margin-top:12px }
.term-card { scroll-margin-top:24px }
.term-card dt { font-family:var(--f-display); font-size:20px; font-weight:800; line-height:1.4 }
.term-card dd { margin:12px 0 0; color:var(--muted); font-size:14.5px; line-height:1.85 }
.term-card .term-key { display:block; margin-top:6px; font-family:var(--f-mono); font-size:12px; color:var(--muted) }
.client-card { display:flex; flex-direction:column; gap:20px }
.client-head { display:flex; align-items:flex-start; gap:16px; min-width:0 }
.client-head > div { min-width:0 }
.client-head h3 { margin-top:0 }
.client-icon { width:56px; height:56px; flex-shrink:0 }
.client-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px }
.client-rev:empty,[data-rev]:empty { display:none }
.client-rev { font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--muted) }
.client-card .actions { margin-top:auto }
.client-card .actions .btn { max-width:100%; white-space:normal; overflow-wrap:anywhere }
.badge-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center }
.label,.tag,.client-badge {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  max-width:100%; padding:3px 9px; font-size:12px; line-height:1.5;
  border:1px solid var(--line); border-radius:var(--r-pill);
  background:var(--panel-3); color:var(--text);
  white-space:normal; overflow-wrap:anywhere;
}
.badge-primary { background:var(--accent); color:var(--on-accent); border-color:var(--accent) }
.badge-recommended { background:var(--panel-2); color:var(--text); border-color:var(--line-strong) }
.badge-archived { background:var(--bg); color:var(--text); border-style:dashed }
.post-card { display:flex; flex-direction:column; align-items:flex-start; gap:16px }
.post-card h3 { margin:0; font-size:20px }
.post-card h3 a:hover { text-decoration:underline; text-underline-offset:4px }
.post-card p { margin:0 }
.post-meta { display:flex; flex-wrap:wrap; align-items:center; gap:12px; font-size:12px; color:var(--muted) }
.post-meta time { font-family:var(--f-mono) }
.post-card .text-link { margin-top:auto }
.callout {
  padding:20px 22px; border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--r-btn); background:var(--panel-3); color:var(--text);
  font-size:14.5px; line-height:1.8;
}
.callout p + p { margin-top:10px }
.callout-title { display:block; font-weight:700; margin-bottom:8px }
.callout-warn { border-left-color:var(--warn) }
.callout-error { border-left-color:var(--error) }
.callout-success { border-left-color:var(--success) }
.table-scroll { max-width:100%; min-width:0; overflow-x:auto; overscroll-behavior-inline:contain; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:var(--r-btn); background:var(--panel); color:var(--text) }
.data-table { width:100%; border-collapse:collapse; font-size:14px; text-align:left }
.data-table th,.data-table td,.prose table th,.prose table td,.article-body table th,.article-body table td {
  min-width:7em; padding:14px 16px; border-bottom:1px solid var(--line);
  vertical-align:top; overflow-wrap:normal; word-break:normal;
}
.data-table th,.prose table th,.article-body table th { background:var(--panel-3); color:var(--text); font-weight:600 }
.data-table tr:last-child td { border-bottom:0 }
.prose table,.article-body table {
  display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior-inline:contain; max-width:100%; min-width:0;
  border-collapse:collapse; font-size:14px; text-align:left;
}
.prose table code,.article-body table code,.data-table code { overflow-wrap:anywhere }
.dl-fab {
  position:fixed; right:24px; bottom:24px; z-index:20;
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  max-width:calc(100% - 48px); min-height:56px; padding:12px 18px;
  border:1px solid var(--accent); border-radius:var(--r-card);
  background:var(--accent); color:var(--on-accent); box-shadow:var(--shadow-card);
  font-size:14px; font-weight:600;
}
.dl-fab svg { width:22px; height:22px; flex-shrink:0 }
.dl-fab small { display:block; font-size:11px; font-weight:400 }
.dl-fab:hover { background:var(--accent-dark); color:var(--on-accent) }
.article-download { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px; margin-top:48px }
.article-download h2 { margin:0; font-size:24px }
.article-download p { margin-top:8px; color:var(--muted); font-size:14px }
.article-download .btn { flex-shrink:0 }
.bento { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:20px; margin-top:40px }
.bento > * { min-width:0 }
.feature-card { grid-column:span 7; display:flex; flex-direction:column; align-items:flex-start; padding:32px }
.feature-card:nth-child(2),.feature-card:nth-child(3) { grid-column:span 5 }
.feature-card h3 { font-weight:800; font-size:24px }
.feature-card p { font-size:14.5px; line-height:1.85 }
.feature-card .eyebrow { background:var(--panel-2); color:var(--text); box-shadow:none }
.feature-strip { grid-column:1/-1; padding:20px 28px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; font-family:var(--f-mono); font-size:13px }
.feature-demo { width:100%; margin-top:auto; padding-top:28px }
.demo-stage { padding:20px; border:1px solid var(--line); border-radius:var(--r-btn); background:var(--panel-3); color:var(--text); min-width:0 }
.demo-stage .seg { margin:0 }
.demo-field { display:grid; gap:8px; font-size:12px; color:var(--muted) }
.demo-field + .demo-field { margin-top:14px }
.demo-input {
  display:block; width:100%; padding:10px 12px; border:1px solid var(--line);
  border-radius:var(--r-chip); background:var(--panel); color:var(--text);
  font-family:var(--f-mono); font-size:12px; overflow-wrap:anywhere;
}
.demo-stage .btn { margin-top:12px; font-size:12px; min-height:38px }
.rule-demo { display:grid; grid-template-columns:minmax(0,1fr) 68px; gap:16px; align-items:center }
.rule-demo-lines { display:grid; gap:14px; min-width:0 }
.rule-demo-lines code { position:relative; display:block; padding-right:8px; font-size:11px; line-height:1.7 }
.rule-demo-lines code::after { content:""; display:block; border-bottom:1px dashed var(--line-strong); margin-top:6px }
.rule-exits { display:grid; gap:20px }
.rule-exits span { display:grid; place-items:center; min-height:44px; border:1px solid var(--line-strong); border-radius:var(--r-chip); background:var(--panel); color:var(--text); font-family:var(--f-mono); font-size:10px }
.setting-row { display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:13px }
.setting-row + .setting-row { margin-top:20px }
.switch-demo { position:relative; width:36px; height:22px; flex-shrink:0; border-radius:var(--r-pill); background:var(--accent); color:var(--on-accent) }
.switch-demo::after { content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:var(--r-round); background:var(--panel); color:var(--text) }
.switch-demo.is-on::after { transform:translateX(14px) }
.preview-block { margin-top:40px }
.preview-swatches { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:32px }
.swatch { padding:12px; border:1px solid var(--line); border-radius:var(--r-btn); background:var(--panel); color:var(--text); min-width:0; font-size:12px }
.swatch code { display:block; margin-top:8px }
.swatch-color { height:48px; border:1px solid var(--line); border-radius:var(--r-chip); color:var(--text) }
.sw-bg { background:var(--bg) }
.sw-panel { background:var(--panel) }
.sw-panel-2 { background:var(--panel-2) }
.sw-panel-3 { background:var(--panel-3) }
.sw-line { background:var(--line) }
.sw-line-strong { background:var(--line-strong) }
.sw-accent { background:var(--accent); color:var(--on-accent) }
.sw-accent-dark { background:var(--accent-dark); color:var(--on-accent) }
.sw-text { background:var(--text); color:var(--on-accent) }
.sw-muted { background:var(--muted); color:var(--on-accent) }
.sw-muted-2 { background:var(--muted-2) }
.sw-on-accent { background:var(--on-accent) }
.sw-dot-1 { background:var(--dot-1) }
.sw-dot-2 { background:var(--dot-2) }
.sw-dot-3 { background:var(--dot-3) }
.sw-success { background:var(--success); color:var(--on-accent) }
.sw-warn { background:var(--warn); color:var(--on-accent) }
.sw-error { background:var(--error); color:var(--on-accent) }
.sw-clear { background:var(--clear) }
.sw-veil { background:var(--veil) }
.type-display { font-family:var(--f-display); font-weight:800; font-size:var(--fs-h1); line-height:1.14; letter-spacing:-.02em }
.type-caption { font-family:var(--f-mono); font-size:12px; color:var(--muted) }
.preview-states { display:flex; flex-wrap:wrap; gap:16px; align-items:center }
.preview-static-drawer { display:none }
@media (max-width:860px) {
  .bento { grid-template-columns:minmax(0,1fr) }
  .feature-card,.feature-card:nth-child(2),.feature-card:nth-child(3),.feature-strip { grid-column:1 }
  .preview-swatches { grid-template-columns:repeat(3,minmax(0,1fr)) }
}
@media (max-width:640px) {
  .feature-card { padding:22px }
  .feature-card h3 { font-size:22px }
  .demo-stage { padding:14px }
  .preview-swatches { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .dl-fab { right:16px; bottom:16px; max-width:calc(100% - 32px) }
  .article-download { align-items:flex-start }
  .article-download .btn { width:100% }
  [role="tab"] { flex:1 1 auto; padding-inline:12px }
  .toc { position:static }
  .type-display { font-size:30px }
}