/* Device composition: fixed desktop geometry follows the approved first screen. */
.device { position:relative; justify-self:end; width:840px; padding-left:80px }
.laptop { position:relative; z-index:1; width:760px }
.lid { position:relative; background:var(--c-bg); color:var(--c-text); border:1px solid var(--c-border); border-radius:var(--r-card) var(--r-card) var(--r-edge) var(--r-edge); padding:13px 12px 14px; box-shadow:var(--shadow-lid) }
.lid::before { content:""; position:absolute; top:5px; left:50%; width:4px; height:4px; border-radius:var(--r-round); background:var(--c-dot); transform:translateX(-50%) }
.screen { position:relative; aspect-ratio:16/10; border:1px solid var(--c-line-soft); border-radius:var(--r-edge); overflow:hidden; background:linear-gradient(152deg,var(--c-wash-blue) 0%,var(--c-wash-mist) 54%,var(--c-panel) 100%); color:var(--c-text) }
.base { position:relative; width:820px; height:16px; margin-left:-30px; border-radius:var(--r-base); background:linear-gradient(var(--c-panel-2),var(--c-border)); color:var(--c-text); box-shadow:var(--shadow-base) }
.base::before { content:""; position:absolute; top:0; left:50%; width:128px; height:6px; border-radius:0 0 var(--r-ctl) var(--r-ctl); background:var(--c-notch); transform:translateX(-50%) }
.win { position:absolute; top:34px; left:112px; width:588px; height:386px; display:flex; flex-direction:column; background:var(--c-bg); color:var(--c-text); border:1px solid var(--c-border); border-radius:var(--r-card); box-shadow:var(--shadow-win); overflow:hidden; font-size:12px; line-height:1.4 }
.win-bar { flex:none; height:34px; display:grid; grid-template-columns:80px 1fr 80px; align-items:center; padding-inline:12px; background:var(--c-panel); color:var(--c-text); border-bottom:1px solid var(--c-line-soft) }
.win-dots { display:flex; gap:6px }
.win-dots i { width:10px; height:10px; border-radius:var(--r-round); background:var(--c-dot) }
.win-title { text-align:center; font-weight:600; font-size:12px; color:var(--c-muted); letter-spacing:.01em }
.win-menu { flex:none; height:31px; display:flex; align-items:stretch; gap:20px; padding-inline:16px; border-bottom:1px solid var(--c-line-soft) }
.win-menu span { position:relative; display:flex; align-items:center; color:var(--c-text) }
.win-menu .on { color:var(--c-accent-dark); font-weight:600 }
.win-menu .on::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; border-radius:var(--r-line); background:var(--c-accent) }
.win-body { flex:1; min-height:0; display:grid; grid-template-columns:152px 1fr }
.win-side { background:var(--c-panel); color:var(--c-text); border-right:1px solid var(--c-line-soft); padding:12px 8px }
.win-side-key { padding:0 9px 8px; font-size:11px; font-weight:600; color:var(--c-muted); letter-spacing:.02em }
.win-side ul { list-style:none; margin:0; padding:0 }
.win-side li { position:relative; padding:7px 10px 7px 12px; border-radius:var(--r-ctl); color:var(--c-muted) }
.win-side li.on { background:var(--c-bg); color:var(--c-text); font-weight:600; box-shadow:var(--shadow-tab) }
.win-side li.on::before { content:""; position:absolute; left:4px; top:8px; bottom:8px; width:2px; border-radius:var(--r-line); background:var(--c-accent) }
.win-main { display:flex; flex-direction:column; padding:14px 20px 12px; min-width:0 }
.win-h { font-size:13px; font-weight:700; letter-spacing:-.005em; padding-bottom:6px }
.win-row { display:flex; align-items:center; justify-content:space-between; height:32px; border-bottom:1px solid var(--c-line-soft) }
.field { display:inline-flex; align-items:center; justify-content:space-between; gap:6px; min-width:78px; height:22px; padding-inline:8px; border:1px solid var(--c-border); border-radius:var(--r-ctl); background:var(--c-bg); color:var(--c-text); font-family:var(--font-mono); font-size:11px }
.field svg { width:9px; height:9px; color:var(--c-muted) }
.win-actions { margin-top:auto; display:flex; justify-content:flex-end; gap:8px }
.mini-btn { display:inline-flex; align-items:center; height:24px; padding-inline:14px; border-radius:var(--r-ctl); border:1px solid var(--c-border); background:var(--c-bg); color:var(--c-text); font-size:11.5px }
.mini-btn.ok { background:var(--c-accent); color:var(--c-on-accent); border-color:var(--c-accent); font-weight:600 }
.win-status { flex:none; height:28px; display:flex; align-items:center; gap:20px; padding-inline:14px; background:var(--c-panel); color:var(--c-muted); border-top:1px solid var(--c-line-soft); font-size:11px }
.win-status span { display:inline-flex; align-items:center; gap:6px }
.win-status b { font-weight:600; color:var(--c-text) }
.st-dot { width:6px; height:6px; flex-shrink:0; border-radius:var(--r-round); background:var(--c-success) }
.sw { position:relative; flex:none; width:28px; height:16px; border-radius:var(--r-pill); border:1px solid var(--c-border); background:var(--c-panel-2); color:var(--c-text) }
.sw::after { content:""; position:absolute; top:1px; left:1px; width:12px; height:12px; border-radius:var(--r-round); background:var(--c-bg); box-shadow:var(--shadow-knob) }
.sw.on { background:var(--c-accent); border-color:var(--c-accent) }
.sw.on::after { transform:translateX(12px) }
.phone { position:absolute; left:0; bottom:-28px; z-index:3; width:196px; height:408px; padding:7px; background:var(--c-bg); color:var(--c-text); border:1px solid var(--c-border); border-radius:var(--r-phone); box-shadow:var(--shadow-phone); animation:device-drift 8s ease-in-out infinite }
.p-screen { position:relative; height:100%; display:flex; flex-direction:column; border:1px solid var(--c-line-soft); border-radius:var(--r-phone-screen); background:var(--c-bg); color:var(--c-text); overflow:hidden }
.p-status { position:relative; flex:none; height:24px; display:flex; align-items:center; justify-content:space-between; padding-inline:13px; font-family:var(--font-mono); font-size:9.5px; font-weight:600; color:var(--c-text) }
.p-status::after { content:""; position:absolute; top:8px; left:50%; width:7px; height:7px; border-radius:var(--r-round); background:var(--c-text); transform:translateX(-50%) }
.p-status svg { width:38px; height:9px }
.p-bar { flex:none; height:40px; display:flex; align-items:center; gap:10px; padding-inline:12px; border-bottom:1px solid var(--c-line-soft); font-size:14px; font-weight:700; letter-spacing:-.01em }
.p-bar svg { width:15px; height:15px }
.p-cat { padding:9px 14px 3px; font-size:10px; font-weight:600; color:var(--c-accent-dark); letter-spacing:.02em }
.p-row { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:40px; padding:5px 14px; border-bottom:1px solid var(--c-line-soft) }
.p-t { display:block; font-size:11.5px; font-weight:500; line-height:1.3; color:var(--c-text) }
.p-s { display:block; margin-top:1px; font-size:9.5px; line-height:1.3; color:var(--c-muted) }
.p-row > svg { flex:none; width:11px; height:11px; color:var(--c-muted) }
.p-home { position:absolute; left:50%; bottom:7px; width:62px; height:4px; border-radius:var(--r-pill); background:var(--c-text); transform:translateX(-50%) }
@keyframes device-drift { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-6px) } }

/* Tabs retain usable, visible panels when JavaScript is unavailable. */
.tabs { min-width:0 }
.tab-list,[role="tablist"] { display:flex; align-items:center; gap:8px; max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; padding-bottom:8px }
.tab-list [role="tab"] { flex-shrink:0; min-height:44px; padding:10px 18px; border:1px solid var(--c-border); border-radius:var(--r-ctl); background:var(--c-bg); color:var(--c-muted); font-weight:700 }
.tab-list [role="tab"][aria-selected="true"] { border-color:var(--c-accent); background:var(--c-bg); color:var(--c-accent-dark); box-shadow:var(--shadow-tab) }
.tab-panel { min-width:0; margin-top:32px }
.feature-tabs { display:grid; grid-template-columns:220px minmax(0,1fr); gap:80px }
.feature-tabs > .tab-list { display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:14px; overflow:visible }
.feature-tabs > .tab-list [role="tab"] { position:relative; border:0; border-radius:var(--r-line); padding:12px 20px; text-align:left; background:var(--c-panel); color:var(--c-muted); font-size:20px }
.feature-tabs > .tab-list [aria-selected="true"] { color:var(--c-text); box-shadow:none }
.feature-tabs > .tab-list [aria-selected="true"]::before { content:""; position:absolute; left:0; top:12px; bottom:12px; width:2px; background:var(--c-accent) }
.feature-tabs .tab-panel { margin-top:0 }
.feature-detail h3 { font-size:var(--size-h2); font-weight:800 }
.feature-detail > p { margin-top:24px; max-width:740px; color:var(--c-muted); line-height:1.9 }
.settings-fragment { margin-top:40px; padding:24px; border:1px solid var(--c-border); border-radius:var(--r-card); background:var(--c-bg); color:var(--c-text); box-shadow:var(--shadow-win) }
.settings-fragment h4 { font-size:14px; margin-bottom:12px }
.setting-line { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:14px; border-bottom:1px solid var(--c-line-soft); font-size:14px }
.setting-line:last-child { border-bottom:0 }
.setting-choice { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px }
.setting-choice span { padding:6px 12px; border:1px solid var(--c-border); border-radius:var(--r-ctl); color:var(--c-muted) }
.setting-choice .selected { border-color:var(--c-accent); color:var(--c-accent-dark) }
.feature-accordion { display:none }
.feature-accordion summary { min-height:48px; padding-block:12px; cursor:pointer; font-weight:700 }
.toc { position:sticky; top:16px; z-index:10; align-self:start; min-width:0; padding:16px; background:var(--c-bg); color:var(--c-text); border:1px solid var(--c-border); border-radius:var(--r-card); box-shadow:var(--shadow-tab) }
.toc ul { display:flex; flex-wrap:wrap; gap:8px 20px; list-style:none; margin:0; padding:0 }
.toc a { display:block; padding-block:8px; font-size:14px; color:var(--c-muted); text-decoration:none }
.toc a:hover,.toc a[aria-current] { color:var(--c-accent-dark) }
.faq-item { border-bottom:1px solid var(--c-border) }
.faq-item summary { position:relative; min-height:64px; padding:20px 40px 20px 0; list-style:none; cursor:pointer; font-weight:600 }
.faq-item summary::-webkit-details-marker { display:none }
.faq-item summary::after { content:"+"; position:absolute; top:18px; right:8px; font-family:var(--font-mono); font-size:20px; color:var(--c-accent-dark) }
.faq-item[open] summary::after { content:"−" }
.faq-answer { max-width:850px; padding-bottom:24px; color:var(--c-muted); line-height:1.9 }
.term-card { border-top:2px solid var(--c-accent) }
.term-card .term-category { display:block; margin-bottom:16px; font-size:13px; color:var(--c-muted) }
.term-card p { color:var(--c-muted); line-height:1.85 }
.term-card .term-links { display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:24px; font-size:14px }
.client-card { position:relative }
.client-head { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-bottom:24px }
.client-head img { width:56px; height:56px; flex-shrink:0 }
.client-head h3 { margin-bottom:4px }
.client-meta { font-size:13px; color:var(--c-muted) }
.client-card p { color:var(--c-muted) }
.download-options { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px }
.badge-row { display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px }
.badge { display:inline-flex; align-items:center; gap:6px; max-width:100%; padding:4px 9px; border:1px solid var(--c-border); border-radius:var(--r-ctl); background:var(--c-panel); color:var(--c-text); font-size:12px; font-weight:600; line-height:1.5; overflow-wrap:anywhere }
.badge-featured { border-color:var(--c-accent); background:var(--c-bg); color:var(--c-accent-dark) }
.badge-recommended::before { content:""; width:5px; height:5px; flex-shrink:0; border-radius:var(--r-round); background:var(--c-accent) }
.badge-retired { border-color:var(--c-border); background:var(--c-panel-2); color:var(--c-text) }
.article-card { display:flex; flex-direction:column }
.article-card h3 { margin-top:20px }
.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); line-height:1.85 }
.article-meta { display:flex; flex-wrap:wrap; align-items:center; gap:12px; font-size:13px; color:var(--c-muted) }
.article-card .article-link { display:inline-block; margin-top:auto; padding-top:28px; font-size:14px; font-weight:600 }
.callout { padding:24px 28px; border:1px solid var(--c-border); border-left:2px solid var(--c-accent); border-radius:var(--r-ctl); background:var(--c-panel); color:var(--c-text); line-height:1.85 }
.callout p + p { margin-top:12px }
.callout-warning { border-left-color:var(--c-warn) }
.callout-error { border-left-color:var(--c-error) }
.table-scroll { width:100%; max-width:100%; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; border:1px solid var(--c-border); border-radius:var(--r-card) }
.data-table { width:100%; border-collapse:collapse; font-size:14px; text-align:left; background:var(--c-bg); color:var(--c-text) }
.data-table th,.data-table td,.prose table th,.prose 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 { background:var(--c-panel); color:var(--c-text); font-weight:600 }
.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; background:var(--c-bg); color:var(--c-text); overscroll-behavior-x:contain }
.prose table code,.data-table code { overflow-wrap:anywhere; white-space:normal }
.article-download { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px; margin-top:64px; padding:32px; border:1px solid var(--c-border); border-radius:var(--r-card); background:var(--c-panel); color:var(--c-text) }
.article-download p { margin-top:8px; color:var(--c-muted) }
.dl-fab { position:fixed; right:24px; bottom:24px; z-index:18; display:flex; align-items:center; gap:12px; max-width:calc(100% - 40px); min-height:58px; padding:12px 18px; border:1px solid var(--c-accent); border-radius:var(--r-card); background:var(--c-bg); color:var(--c-accent-dark); box-shadow:var(--shadow-win); text-decoration:none }
.dl-fab svg { width:22px; height:22px; flex-shrink:0 }
.dl-fab strong { display:block; font-size:14px }
.dl-fab small { display:block; font-size:12px; color:var(--c-muted) }
.dl-fab:hover { border-color:var(--c-accent-dark); text-decoration:none }
body.has-dl-fab .footer { padding-bottom:110px }

/* Preview-only furniture uses the same tokens as production components. */
.swatch-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px }
.swatch { min-width:0; border:1px solid var(--c-border); border-radius:var(--r-ctl); background:var(--c-bg); color:var(--c-text); overflow:hidden }
.swatch-color { height:72px; border-bottom:1px solid var(--c-border) }
.swatch code { display:block; padding:12px; font-size:12px }
.swatch-bg { background:var(--c-bg); color:var(--c-text) }
.swatch-panel { background:var(--c-panel); color:var(--c-text) }
.swatch-panel-2 { background:var(--c-panel-2); color:var(--c-text) }
.swatch-border { background:var(--c-border); color:var(--c-text) }
.swatch-accent { background:var(--c-accent); color:var(--c-text) }
.swatch-accent-dark { background:var(--c-accent-dark); color:var(--c-on-accent) }
.swatch-text { background:var(--c-text); color:var(--c-bg) }
.swatch-muted { background:var(--c-muted); color:var(--c-bg) }
.swatch-success { background:var(--c-success); color:var(--c-text) }
.swatch-warn { background:var(--c-warn); color:var(--c-text) }
.swatch-error { background:var(--c-error); color:var(--c-on-accent) }
.swatch-on-accent { background:var(--c-on-accent); color:var(--c-text) }
.swatch-line { background:var(--c-line-soft); color:var(--c-text) }
.swatch-dot { background:var(--c-dot); color:var(--c-text) }
.swatch-notch { background:var(--c-notch); color:var(--c-text) }
.swatch-blue { background:var(--c-wash-blue); color:var(--c-text) }
.swatch-mist { background:var(--c-wash-mist); color:var(--c-text) }
.button-specimen { display:flex; flex-wrap:wrap; gap:16px; align-items:center }
.preview-language { position:relative; list-style:none }
.preview-language > summary { list-style:none; cursor:pointer }
.preview-language > summary::-webkit-details-marker { display:none }
.preview-language .language-menu { z-index:4 }
@media (max-width:1360px) {
  .device { justify-self:center }
}
@media (max-width:960px) {
  .device { width:auto; padding:0; display:flex; justify-content:center }
  .laptop { display:none }
  .phone { position:relative; left:auto; bottom:auto }
  .feature-tabs { grid-template-columns:180px minmax(0,1fr); gap:40px }
  .swatch-grid { grid-template-columns:repeat(3,minmax(0,1fr)) }
}
@media (max-width:640px) {
  .feature-tabs { display:block }
  .feature-tabs > .tab-list { flex-direction:row; overflow-x:auto; gap:4px; margin-bottom:28px }
  .feature-tabs > .tab-list [role="tab"] { padding:10px 14px; font-size:15px; white-space:nowrap }
  .feature-tabs.is-enhanced .feature-accordion { display:block; margin-top:24px; border-top:1px solid var(--c-border) }
  .settings-fragment { padding:20px }
  .swatch-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .article-download { padding:24px }
  .dl-fab { right:20px; bottom:16px; padding:10px 14px }
  .callout { padding:20px }
}
@media (prefers-reduced-motion:reduce) {
  .phone { animation:none }
}