.tabs { min-width: 0; }
.tablist, [role="tablist"].feature-tray {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 32px;
}
.tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 12px 22px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-panel);
  color: var(--c-muted);
  font-weight: var(--weight-bold);
  text-align: center;
  transition: transform var(--time-fast) var(--ease), box-shadow var(--time-fast) ease;
}
.tab:hover { background: var(--c-panel-2); color: var(--c-text); }
.tab[aria-selected="true"] { background: var(--c-accent-dark); color: var(--c-white); box-shadow: var(--shadow-accent); }
.tab svg { width: 20px; height: 20px; }
[role="tabpanel"] { min-width: 0; scroll-margin-top: 24px; }
.feature-tray { gap: 24px !important; padding-top: 12px; padding-bottom: 12px; }
.feature-tab {
  width: 126px;
  padding: 0;
  border: 0;
  background: var(--c-clear);
  color: var(--c-muted);
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
}
.feature-tab__tile {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin: 0 auto 16px;
  border-radius: var(--r-tile);
  background: linear-gradient(155deg, var(--c-white), var(--c-panel-2));
  color: var(--c-accent-dark);
  box-shadow: inset 0 2px 0 var(--hl-white), inset 0 0 0 1px var(--hl-edge), 0 8px 18px -10px var(--shadow-ink), 0 16px 28px -18px var(--glow-sky);
  transition: transform var(--time-fast) var(--ease), box-shadow var(--time-fast) ease;
}
.feature-tab__tile svg { width: 42px; height: 42px; }
.feature-tab[aria-selected="true"] { color: var(--c-text); }
.feature-tab[aria-selected="true"] .feature-tab__tile { transform: translateY(-8px); box-shadow: inset 0 2px 0 var(--hl-white), 0 0 0 3px var(--c-focus), var(--shadow-lift); }
.feature-tab:hover .feature-tab__tile { transform: translateY(-5px); }
.detail-panel { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; padding: 48px; border-radius: var(--r-panel); background: var(--c-white); color: var(--c-text); box-shadow: var(--shadow-soft); }
.detail-panel h3 { margin-top: 0; }
.detail-panel p { line-height: 1.9; color: var(--c-muted); }
.client-fragment { padding: 24px; border-radius: var(--r-card); background: var(--c-panel); color: var(--c-text); box-shadow: inset 0 1px 0 var(--hl-white), var(--shadow-soft); }
.client-fragment__title { font-weight: var(--weight-heading); margin-bottom: 20px; }
.client-fragment__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 15px; border-bottom: 1px solid var(--c-border); font-size: var(--text-label); }
.client-fragment__row:last-child { border: 0; }
.client-fragment__value { color: var(--c-accent-dark); font-weight: var(--weight-label); text-align: right; }
.toc { position: sticky; top: 16px; z-index: 8; display: flex; flex-wrap: wrap; gap: 8px; padding: 16px; margin-bottom: 40px; border-radius: var(--r-card); background: var(--c-panel); color: var(--c-text); box-shadow: var(--shadow-soft); }
.toc a { display: block; padding: 10px 15px; min-height: 44px; border-radius: var(--r-pill); color: var(--c-muted); font-size: var(--text-label); text-decoration: none; }
.toc a:hover, .toc a[aria-current="location"] { background: var(--c-white); color: var(--c-accent-dark); }
.toc--flow { position: static; }
.faq { border-radius: var(--r-card); background: var(--c-white); color: var(--c-text); box-shadow: var(--shadow-soft); margin-bottom: 16px; }
.faq summary { position: relative; min-height: 64px; padding: 22px 60px 22px 28px; cursor: pointer; list-style: none; font-weight: var(--weight-bold); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 26px; top: 20px; color: var(--c-accent-dark); font-size: var(--text-h3); line-height: 1; }
.faq[open] summary::after { content: "−"; }
.faq__body { padding: 0 28px 26px; color: var(--c-muted); line-height: 1.85; }
.faq__body p:last-child { margin-bottom: 0; }
.term-card { padding: 28px; border-radius: var(--r-card); background: var(--c-white); color: var(--c-text); box-shadow: var(--shadow-soft); }
.term-card__category { color: var(--c-muted); font-size: var(--text-sm); }
.term-card h3 { margin: 12px 0; }
.term-card__name { font-family: var(--font-mono); color: var(--c-accent-dark); font-size: var(--text-label); }
.term-card p { margin-bottom: 0; color: var(--c-muted); }
.download-card { padding: 36px; border-radius: var(--r-panel); background: var(--c-white); color: var(--c-text); box-shadow: var(--shadow-soft); }
.download-card__head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 24px; }
.download-card__head h3 { margin: 0; }
.download-card__logo { width: 56px; height: 56px; flex-shrink: 0; }
.download-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; color: var(--c-muted); font-size: var(--text-label); }
.download-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-block: 24px; }
.download-card__note { color: var(--c-muted); font-size: var(--text-label); }
.badge--first { background: var(--c-accent-dark); color: var(--c-white); box-shadow: var(--shadow-accent); }
.badge--recommended { background: var(--c-panel); color: var(--c-accent-dark); box-shadow: none; }
.badge--retired { background: var(--c-panel-2); color: var(--c-muted); box-shadow: none; }
.article-card { display: flex; flex-direction: column; min-width: 0; padding: 32px; border-radius: var(--r-card); background: var(--c-white); color: var(--c-text); box-shadow: var(--shadow-soft); }
.article-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: var(--text-sm); color: var(--c-muted); }
.article-card h3 { margin: 20px 0 14px; font-size: var(--text-subtitle); }
.article-card h3 a { color: var(--c-text); text-decoration: none; }
.article-card h3 a:hover { color: var(--c-accent-dark); }
.article-card p { color: var(--c-muted); }
.article-card__more { margin-top: auto; font-size: var(--text-label); font-weight: var(--weight-bold); }
.tag { display: inline-block; max-width: 100%; overflow: hidden; padding: 5px 10px; border-radius: var(--r-pill); background: var(--c-panel); color: var(--c-muted); font-size: var(--text-xs); overflow-wrap: anywhere; vertical-align: middle; }
.callout { position: relative; margin: 28px 0; padding: 26px 28px; border-radius: var(--r-card); background: var(--c-panel); color: var(--c-text); box-shadow: inset 4px 0 0 var(--c-accent); }
.callout p:last-child { margin-bottom: 0; }
.callout__title { display: block; margin-bottom: 8px; font-weight: var(--weight-heading); color: var(--c-text); }
.callout--warn { box-shadow: inset 4px 0 0 var(--c-warn); }
.callout--error { box-shadow: inset 4px 0 0 var(--c-error); }
.callout--success { box-shadow: inset 4px 0 0 var(--c-success); }
.table-scroll { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; border-radius: var(--r-setting); }
.data-table { width: 100%; border-collapse: collapse; text-align: left; font-size: var(--text-label); background: var(--c-white); color: var(--c-text); }
.data-table th, .data-table td,
.prose table th, .prose table td,
.article-body table th, .article-body table td {
  min-width: 7em;
  padding: 16px 20px;
  border-bottom: 1px solid var(--c-border);
  overflow-wrap: normal;
  word-break: normal;
  vertical-align: top;
}
.data-table th, .prose table th, .article-body table th { background: var(--c-panel); color: var(--c-text); font-weight: var(--weight-bold); }
.prose table, .article-body table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  min-width: 0;
  border-collapse: collapse;
  text-align: left;
  background: var(--c-white);
  color: var(--c-text);
}
.data-table code, .prose table code, .article-body table code { overflow-wrap: anywhere; }
.article-download { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; margin-block: 48px; padding: 32px; border-radius: var(--r-card); background: var(--c-panel); color: var(--c-text); box-shadow: var(--shadow-soft); }
.article-download__copy { flex: 1 1 240px; min-width: 0; }
.article-download h2 { margin: 0 0 12px; font-size: var(--text-h3); }
.article-download p { margin: 0; color: var(--c-muted); }
.dl-fab { position: fixed; right: 24px; bottom: 24px; z-index: 20; display: inline-flex; align-items: center; gap: 12px; max-width: calc(100% - 32px); min-height: 56px; padding: 14px 24px; border-radius: var(--r-pill); background: var(--c-accent-dark); color: var(--c-white); box-shadow: var(--shadow-accent); font-size: var(--text-label); font-weight: var(--weight-bold); text-decoration: none; transition: transform var(--time-fast) ease; }
.dl-fab svg { width: 22px; height: 22px; flex-shrink: 0; }
.dl-fab:hover { transform: translateY(-3px); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 28px; font-size: var(--text-sm); color: var(--c-muted); }
.breadcrumb a { color: var(--c-muted); }
.preview-heading { margin-bottom: 32px; }
.preview-type-display { font-family: var(--font-display); font-size: var(--text-h1); font-weight: var(--weight-display); line-height: 1.15; }
.preview-type-subtitle { font-size: var(--text-subtitle); font-weight: var(--weight-heading); }
.preview-swatch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 18px; }
.swatch { min-width: 0; padding: 12px; border-radius: var(--r-setting); background: var(--c-white); color: var(--c-text); box-shadow: var(--shadow-soft); }
.swatch__paint { height: 64px; border-radius: var(--r-chip); margin-bottom: 10px; background: var(--paint); color: var(--c-text); box-shadow: inset 0 0 0 1px var(--shade-in); }
.swatch code { font-size: var(--text-xs); }
.swatch--bg { --paint: var(--c-bg); }
.swatch--panel { --paint: var(--c-panel); }
.swatch--panel2 { --paint: var(--c-panel-2); }
.swatch--border { --paint: var(--c-border); }
.swatch--sep { --paint: var(--c-sep); }
.swatch--accent { --paint: var(--c-accent); }
.swatch--light { --paint: var(--c-accent-light); }
.swatch--dark { --paint: var(--c-accent-dark); }
.swatch--text { --paint: var(--c-text); }
.swatch--muted { --paint: var(--c-muted); }
.swatch--success { --paint: var(--c-success); }
.swatch--ring { --paint: var(--c-success-ring); }
.swatch--warn { --paint: var(--c-warn); }
.swatch--error { --paint: var(--c-error); }
.swatch--yellow { --paint: var(--c-yellow); }
.swatch--white { --paint: var(--c-white); }
.swatch--focus { --paint: var(--c-focus); }
.swatch--clear { --paint: var(--c-clear); }
.swatch--veil { --paint: var(--c-veil); }
.swatch--sky-a { --paint: var(--tile-sky-a); }
.swatch--sky-b { --paint: var(--tile-sky-b); }
.swatch--lime-a { --paint: var(--tile-lime-a); }
.swatch--lime-b { --paint: var(--tile-lime-b); }
.swatch--sun-a { --paint: var(--tile-sun-a); }
.swatch--sun-b { --paint: var(--tile-sun-b); }
.swatch--coral-a { --paint: var(--tile-coral-a); }
.swatch--coral-b { --paint: var(--tile-coral-b); }
.swatch--glow-sky { --paint: var(--glow-sky); }
.swatch--glow-lime { --paint: var(--glow-lime); }
.swatch--glow-sun { --paint: var(--glow-sun); }
.swatch--glow-coral { --paint: var(--glow-coral); }
.swatch--hl-white { --paint: var(--hl-white); }
.swatch--hl-edge { --paint: var(--hl-edge); }
.swatch--sheen { --paint: var(--sheen); }
.swatch--shade { --paint: var(--shade-in); }
.swatch--frost { --paint: var(--frost); }
.swatch--frost-edge { --paint: var(--frost-edge); }
.swatch--ink { --paint: var(--shadow-ink); }
.swatch--ink-soft { --paint: var(--shadow-ink-soft); }
.preview-fab { position: static; }
.preview-only .tile { animation: none; }
.preview-only .mobile-nav { position: static; max-height: none; box-shadow: none; }
@media (max-width: 860px) {
  .detail-panel { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 28px; }
  .feature-tray { gap: 12px !important; }
  .feature-tab { width: 108px; }
}
@media (max-width: 640px) {
  .feature-tray { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px !important; align-items: start !important; }
  .feature-tab { width: 100%; font-size: var(--text-xs); }
  .feature-tab__tile { width: 100%; height: auto; aspect-ratio: 1; margin-bottom: 10px; }
  .feature-tab__tile svg { width: 26px; height: 26px; }
  .detail-panel, .download-card, .article-card, .term-card { padding: 24px; }
  .client-fragment { padding: 18px; }
  .toc { position: static; padding: 12px; gap: 4px; }
  .toc a { padding: 10px 12px; }
  .faq summary { padding-left: 24px; }
  .faq__body { padding-inline: 24px; }
  .callout { padding: 24px; }
  .dl-fab { right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); padding-inline: 20px; }
  .article-download { padding: 24px; }
}