.tab-set { min-width: 0; }
.tab-list, [role="tablist"].platform-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  overflow-x: auto;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--bg-panel);
  color: var(--text);
  scrollbar-width: thin;
}
[role="tab"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-shrink: 0;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--clear);
  border-radius: var(--r-btn);
  background: var(--clear);
  color: var(--text-muted);
  text-align: left;
}
[role="tab"] svg { width: 18px; height: 18px; }
[role="tab"]:hover { color: var(--text); }
[role="tab"][aria-selected="true"] { border-color: var(--border); background: var(--bg-panel-2); color: var(--text); box-shadow: inset 0 1px 0 var(--hl); }
[role="tabpanel"] { min-width: 0; scroll-margin-top: 32px; }
.tab-panel { padding-top: 28px; }
.command-panel { padding: 0; overflow: hidden; }
.command-title { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 18px 24px; border-bottom: 1px solid var(--border); color: var(--text-muted); font: 13px var(--font-mono); }
.command-title svg { width: 18px; height: 18px; }
.command-body { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.command-body > * { min-width: 0; }
.command-list { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-right: 1px solid var(--border); }
.command-list [role="tab"] { position: relative; width: 100%; justify-content: flex-start; }
.command-list [role="tab"][aria-selected="true"]::before { content: ""; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 2px; border-radius: var(--r-indicator); background: var(--accent); }
.command-list kbd { margin-left: auto; }
.command-detail { padding: 32px; }
.command-detail h3 { margin: 0 0 16px; }
.command-detail p { color: var(--text-muted); line-height: 1.9; }
.command-detail pre { margin-bottom: 0; }
.command-foot { padding: 12px 24px; border-top: 1px solid var(--border); color: var(--text-muted); font: 11px/1.6 var(--font-mono); }

.content-layout { display: grid; grid-template-columns: minmax(0, 740px) minmax(200px, 240px); justify-content: center; gap: 64px; align-items: start; }
.toc { position: sticky; top: 24px; padding: 20px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--bg-panel); color: var(--text); box-shadow: var(--shadow-panel); max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain; }
.toc-title { margin: 0 0 12px; font: 12px var(--font-mono); color: var(--text-muted); }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc a { display: block; min-height: 40px; padding: 9px 0; color: var(--text-muted); font-size: 13px; line-height: 1.6; }
.toc a:hover, .toc a[aria-current="location"] { color: var(--text); }
.jump-nav { display: flex; gap: 8px; overflow-x: auto; max-width: 100%; padding-top: 8px; padding-bottom: 8px; }
.jump-nav a { flex-shrink: 0; padding: 10px 16px; min-height: 44px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--bg-panel); color: var(--text-muted); font-size: 13px; }
.jump-nav a:hover { color: var(--text); border-color: var(--text-dim); }
.jump-nav.is-sticky { position: sticky; top: 0; z-index: 5; background: var(--bg); color: var(--text); }
.faq-item { margin-bottom: 12px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--bg-panel); color: var(--text); box-shadow: inset 0 1px 0 var(--hl); }
.faq-item summary { position: relative; padding: 20px 52px 20px 24px; list-style: none; cursor: pointer; font-weight: 500; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 24px; top: 20px; color: var(--text-muted); font-family: var(--font-mono); }
.faq-item[open] summary::after { content: "−"; }
.faq-answer { padding: 0 24px 24px; color: var(--text-muted); line-height: 1.9; }
.faq-answer p:last-child { margin: 0; }
.term-card { border-radius: var(--r-card); padding: 24px; border: 1px solid var(--border); background: var(--bg-panel); color: var(--text); box-shadow: var(--shadow-panel); }
.term-card h3 { margin: 0 0 8px; font-family: var(--font-mono); }
.term-category { color: var(--text-muted); font-size: 12px; }
.term-card p { margin-top: 16px; margin-bottom: 0; color: var(--text-muted); line-height: 1.8; }
.client-card { padding: 28px; border: 1px solid var(--border); border-radius: var(--r-container); background: var(--bg-panel); color: var(--text); box-shadow: var(--shadow-panel); }
.client-card.is-primary { border-color: rgb(var(--accent-rgb) / .48); box-shadow: inset 0 1px 0 var(--hl), 0 0 32px -20px rgb(var(--accent-rgb) / .45); }
.client-head { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
.client-head > div { min-width: 0; }
.client-head h3 { margin: 0 0 4px; }
.client-icon { width: 56px; height: 56px; flex-shrink: 0; }
.client-version { font: 12px var(--font-mono); color: var(--text-muted); }
.client-card p { color: var(--text-muted); line-height: 1.8; }
.client-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.client-secondary { margin-top: 16px; font-size: 13px; color: var(--text-muted); }
.client-secondary a { text-decoration: underline; text-underline-offset: 4px; }
.tag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tag { display: inline-block; max-width: 100%; overflow: hidden; overflow-wrap: anywhere; vertical-align: middle; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--bg-panel-2); color: var(--text-muted); font: 11px/1.6 var(--font-mono); }
.tag-primary { border-color: rgb(var(--accent-rgb) / .4); background: var(--bg-panel-2); color: var(--accent); }
.tag-recommended { color: var(--text); }
.tag-retired { border-style: dashed; color: var(--text-muted); }
.tag-success { color: var(--success); }
.tag-warn { color: var(--warn); }
.tag-error { color: var(--error); }
.article-card { display: block; padding: 28px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--bg-panel); color: var(--text); box-shadow: var(--shadow-panel); transition: border-color var(--speed) ease; }
.article-card:hover { border-color: var(--text-dim); }
.article-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; color: var(--text-muted); font: 11px/1.6 var(--font-mono); }
.article-card h3 { margin: 18px 0 14px; font-size: 21px; }
.article-card p { color: var(--text-muted); line-height: 1.8; margin-bottom: 0; }
.article-more { display: inline-block; margin-top: 24px; font-size: 13px; }
.callout { margin: 28px 0; padding: 22px 24px; border: 1px solid var(--border); border-left: 2px solid var(--accent); border-radius: var(--r-btn); background: var(--bg-panel-2); color: var(--text); box-shadow: inset 0 1px 0 var(--hl); }
.callout p { color: var(--text-muted); line-height: 1.8; }
.callout p:last-child { margin-bottom: 0; }
.callout-title { display: block; margin-bottom: 8px; font-weight: 500; }
.callout-warn { border-left-color: var(--warn); }

.table-scroll { max-width: 100%; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--r-card); }
.data-table { width: 100%; border-collapse: collapse; text-align: left; background: var(--bg-panel); color: var(--text); }
.data-table th, .data-table td, .prose table th, .prose table td {
  min-width: 7em;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  overflow-wrap: normal;
  word-break: normal;
  vertical-align: top;
  line-height: 1.7;
}
.data-table th, .prose table th { background: var(--bg-panel-2); color: var(--text); font-weight: 500; }
.data-table td, .prose table td { background: var(--bg-panel); color: var(--text-muted); }
.data-table tr:last-child td { border-bottom: 0; }
.prose table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; min-width: 0; border-collapse: collapse; text-align: left; }
.prose table code, .data-table code { overflow-wrap: anywhere; white-space: normal; }
.prose div, .prose section, .prose figure { min-width: 0; max-width: 100%; }

.dl-fab { position: fixed; z-index: 15; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; max-width: calc(100% - 40px); padding: 14px 18px; border: 1px solid rgb(var(--accent-rgb) / .55); border-radius: var(--r-card); background: var(--bg-panel-2); color: var(--text); box-shadow: var(--shadow-float), 0 0 28px -12px rgb(var(--accent-rgb) / .35); }
.dl-fab svg { width: 20px; height: 20px; color: var(--accent); }
.dl-fab strong { display: block; font-size: 13px; }
.dl-fab small { display: block; margin-top: 3px; color: var(--text-muted); font-size: 11px; }
.article-download { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 56px; padding: 28px; border: 1px solid var(--border); border-radius: var(--r-container); background: var(--bg-panel); color: var(--text); box-shadow: var(--shadow-panel); }
.article-download > div { min-width: 0; }
.article-download h2 { margin: 0 0 10px; font-size: 24px; }
.article-download p { margin: 0; color: var(--text-muted); }

.palette-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.swatch { min-width: 0; border: 1px solid var(--border); border-radius: var(--r-btn); overflow: hidden; background: var(--bg-panel); color: var(--text); }
.swatch-chip { height: 68px; border-bottom: 1px solid var(--border); }
.swatch-label { display: block; padding: 12px; font: 11px/1.7 var(--font-mono); overflow-wrap: anywhere; }
.swatch-bg { background: var(--bg); }
.swatch-panel { background: var(--bg-panel); }
.swatch-panel2 { background: var(--bg-panel-2); }
.swatch-raise { background: var(--bg-raise); }
.swatch-border { background: var(--border); }
.swatch-soft { background: var(--border-soft); }
.swatch-accent { background: var(--accent); }
.swatch-dark { background: var(--accent-dark); }
.swatch-text { background: var(--text); }
.swatch-muted { background: var(--text-muted); }
.swatch-dim { background: var(--text-dim); }
.swatch-success { background: var(--success); }
.swatch-warn { background: var(--warn); }
.swatch-error { background: var(--error); }
.swatch-white { background: var(--white); }
.swatch-dot { background: var(--chrome-dot); }
.swatch-hl { background: var(--hl); }
.swatch-hlstrong { background: var(--hl-strong); }
.swatch-tint { background: var(--tint); }
.swatch-shade { background: rgb(var(--shade-rgb)); }
.swatch-clear { background: var(--clear); }
.preview-note { color: var(--text-muted); font: 12px/1.8 var(--font-mono); }
.preview-type h1 { margin-top: 0; }
.preview-states { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 8px; padding-bottom: 8px; }
.preview-header .desktop-nav { display: block; }
.preview-header .tabs { overflow-x: auto; scrollbar-width: none; }
.preview-header .topbar { max-width: 1240px; }
.preview-header .brand { flex-shrink: 0; }

@media (max-width: 1000px) {
  .content-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .content-layout .toc { position: static; grid-row: 1; max-height: none; }
}
@media (max-width: 768px) {
  .command-body { grid-template-columns: minmax(0, 1fr); }
  .command-list { flex-direction: row; overflow-x: auto; max-width: 100%; border-right: 0; border-bottom: 1px solid var(--border); }
  .command-list [role="tab"] { width: auto; white-space: nowrap; border-radius: var(--r-pill); }
  .command-list kbd { display: none; }
  .command-list [role="tab"][aria-selected="true"]::before { display: none; }
  .command-detail { padding: 24px; }
  .palette-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .article-download { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .palette-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .client-card, .article-card, .term-card { padding: 20px; }
  .client-actions { align-items: stretch; flex-direction: column; }
  .client-actions .btn { width: 100%; }
  .faq-item summary { padding-left: 20px; }
  .faq-answer { padding-inline: 20px; }
  .dl-fab { right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); max-width: calc(100% - 32px); padding: 12px 14px; }
  .dl-fab small { display: none; }
  .preview-header .topbar { gap: 8px; }
  .preview-header .desktop-nav { min-width: 0; margin-left: 0; }
  .preview-header .header-tools { margin-left: auto; }
  .preview-header .tabs a { padding-inline: 10px; }
}