/* aerobis document shell
Layout and components for long-form documents: sidebar, hero, sections,
cards, callouts, tables, figures, calculators. Requires aerobis-tokens.css.
Load order:
*/
/* ---------- progress bar ---------- */
#progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent);z-index:60;transition:width .1s linear}
/* ---------- layout ---------- */
.app{display:grid;grid-template-columns:288px 1fr;min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;background:var(--bg-elev-1);border-right:1px solid var(--border);overflow-y:auto;padding:24px 16px 40px;z-index:20}
.main{padding:32px 56px 140px;max-width:1080px}
/* ---------- brand ---------- */
/* The wordmark is one shared SVG, pulled in as a CSS mask so it takes the
current text colour and follows the theme without a second file. */
.brand{display:block;margin-bottom:22px;text-decoration:none;color:var(--accent);transition:opacity .15s}
.brand:hover{opacity:.75}
.brand .logo{display:block;width:132px;height:33px;background-color:currentColor;
-webkit-mask:url(/assets/logo.svg?v=202608042120) no-repeat center/contain;
mask:url(/assets/logo.svg?v=202608042120) no-repeat center/contain}
.brand-text .t2{font-size:10.5px;color:var(--text-dim);letter-spacing:1.6px;text-transform:uppercase;display:block;margin-top:7px;font-weight:600}
.mobile-brand{margin-bottom:0;flex:none}
.mobile-brand .logo{width:92px;height:23px}
.mb-sub{font-size:10px;color:var(--text-dim);letter-spacing:1.4px;text-transform:uppercase;font-weight:600}
/* ---------- search ---------- */
.search-wrap{position:relative;margin-bottom:8px}
.search-wrap input{width:100%;background:var(--bg-elev-2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);padding:9px 12px 9px 34px;font-size:13px;font-family:inherit;outline:none;transition:border-color .15s}
.search-wrap input:focus{border-color:var(--accent)}
.search-wrap svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--text-dim);pointer-events:none}
.search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:16px;line-height:1;padding:2px 5px;display:none}
#searchResults{margin:4px 0 12px;border-radius:var(--radius-sm);overflow:hidden;display:none}
#searchResults .sr{display:block;padding:8px 10px;border-bottom:1px solid var(--border);text-decoration:none;background:var(--bg-elev-2)}
#searchResults .sr:last-child{border-bottom:none}
#searchResults .sr:hover{background:var(--bg-elev-3)}
#searchResults .sr-t{font-size:12.5px;color:var(--text);font-weight:600;display:block}
#searchResults .sr-c{font-size:11.5px;color:var(--text-dim);display:block;margin-top:2px;line-height:1.4}
#searchResults .sr-c mark{background:var(--accent-soft);color:var(--accent);padding:0 1px;border-radius:2px}
#searchResults .sr-none{padding:10px;font-size:12px;color:var(--text-dim);background:var(--bg-elev-2)}
/* ---------- nav ---------- */
.nav-group-title{font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--text-dim);margin:20px 0 6px 10px;font-weight:600}
.nav-link{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;text-decoration:none;color:var(--text-muted);font-size:13px;transition:color .15s,background .15s;cursor:pointer}
.nav-link:hover{color:var(--text);background:var(--bg-elev-2)}
.nav-link.active{color:var(--accent);background:var(--accent-soft);font-weight:600}
.nav-link .num{font-family:var(--mono);font-size:10.5px;color:var(--text-dim);background:var(--bg-elev-3);border-radius:4px;padding:2px 5px;flex:none;min-width:23px;text-align:center}
.nav-link.active .num{color:var(--accent);background:var(--accent-soft)}
/* ---------- sidebar footer ---------- */
.sidebar-footer{margin-top:26px;padding-top:18px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:10px}
.sb-row{display:flex;gap:8px}
.ctrl{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;background:var(--bg-elev-2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-muted);padding:7px 9px;font-size:12px;font-family:inherit;cursor:pointer;transition:.15s}
.ctrl:hover{color:var(--text);border-color:var(--border-strong)}
select.ctrl{appearance:none;text-align:center;text-align-last:center}
.sb-note{font-size:11px;color:var(--text-dim);line-height:1.5}
/* ---------- mobile ---------- */
.mobile-bar{display:none;position:sticky;top:0;z-index:30;background:var(--bg-elev-1);border-bottom:1px solid var(--border);padding:10px 16px;align-items:center;gap:11px}
.burger{background:var(--bg-elev-2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);padding:7px 10px;cursor:pointer;font-size:15px;line-height:1}
.scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:19}
/* ---------- hero ---------- */
.hero{padding:40px 0 8px;border-bottom:1px solid var(--border);margin-bottom:8px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-soft);border-radius:100px;padding:4px 11px;font-weight:600}
.hero h1{font-size:clamp(30px,4.6vw,50px);line-height:1.1;letter-spacing:-1.4px;font-weight:800;margin:18px 0 16px;max-width:19ch}
.hero .lead{font-size:18px;color:var(--text-muted);max-width:62ch}
.hero-stats{display:flex;gap:36px;flex-wrap:wrap;margin:30px 0 34px}
.stat .v{font-size:26px;font-weight:800;letter-spacing:-.6px;display:block;color:var(--accent)}
.stat .l{font-size:11.5px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1.1px;margin-top:2px;display:block}
/* ---------- sections ---------- */
section.doc{padding:56px 0 8px;border-bottom:1px solid var(--border);scroll-margin-top:16px}
section.doc:last-of-type{border-bottom:none}
.section-index{font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:2px;margin-bottom:10px;display:block}
h2{font-size:clamp(24px,3.1vw,33px);line-height:1.2;letter-spacing:-.9px;font-weight:800;margin-bottom:14px;max-width:24ch}
h3{font-size:17px;font-weight:700;letter-spacing:-.2px;margin:30px 0 10px}
h4{font-size:14px;font-weight:700;letter-spacing:-.1px;margin:20px 0 7px}
p{color:var(--text-muted);margin-bottom:14px;max-width:72ch}
p.lead{font-size:17.5px;color:var(--text);margin-bottom:20px;max-width:68ch}
strong{color:var(--text);font-weight:650}
em{font-style:normal;color:var(--accent)}
/* ---------- lists ---------- */
ul.clean{list-style:none;margin:0 0 16px;max-width:72ch}
ul.clean li{position:relative;padding-left:20px;margin-bottom:8px;color:var(--text-muted)}
ul.clean li::before{content:"";position:absolute;left:2px;top:10px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
/* ---------- cards & grids ---------- */
.card{background:var(--bg-elev-1);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px;margin:18px 0}
.card h4{margin-top:0}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:18px 0}
.grid-2>.card,.grid-3>.card{margin:0}
/* ---------- callouts ---------- */
.callout{display:flex;gap:13px;background:var(--accent-soft);border:1px solid var(--accent-soft);border-left:3px solid var(--accent);border-radius:var(--radius-sm);padding:14px 17px;margin:18px 0;max-width:76ch}
.callout .ico{color:var(--accent);flex:none;margin-top:2px}
.callout strong{display:block;margin-bottom:3px;color:var(--text)}
.callout p{margin:0;font-size:14.5px;color:var(--text-muted)}
.callout.warn{background:rgba(245,184,0,.09);border-color:rgba(245,184,0,.2);border-left-color:var(--warning)}
.callout.warn .ico{color:var(--warning)}
.callout.plant{background:var(--plant-soft);border-color:var(--plant-soft);border-left-color:var(--plant)}
.callout.plant .ico{color:var(--plant)}
/* ---------- myth check ---------- */
.myth{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin:22px 0;max-width:76ch}
.myth-head{background:var(--bg-elev-2);padding:8px 16px;font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-dim);font-weight:700;border-bottom:1px solid var(--border)}
.myth-row{display:grid;grid-template-columns:112px 1fr;gap:0;border-bottom:1px solid var(--border)}
.myth-row:last-child{border-bottom:none}
.myth-tag{padding:14px 16px;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;font-weight:700;background:var(--bg-elev-1);border-right:1px solid var(--border);display:flex;align-items:flex-start}
.myth-row.old .myth-tag{color:var(--danger)}
.myth-row.new .myth-tag{color:var(--success)}
.myth-body{padding:14px 18px;font-size:14.5px;color:var(--text-muted)}
.myth-row.new .myth-body{color:var(--text)}
.myth-body p{margin:0;max-width:none;font-size:14.5px}
/* ---------- do this ---------- */
.dothis{background:linear-gradient(160deg,var(--accent-soft),transparent 70%);border:1px solid var(--border-strong);border-radius:var(--radius);padding:22px 24px;margin:28px 0 8px;max-width:76ch}
.dothis-title{display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:14px}
.dothis ol{list-style:none;counter-reset:d;margin:0}
.dothis ol li{counter-increment:d;position:relative;padding-left:32px;margin-bottom:11px;color:var(--text);font-size:15px}
.dothis ol li:last-child{margin-bottom:0}
.dothis ol li::before{content:counter(d);position:absolute;left:0;top:1px;width:21px;height:21px;border-radius:6px;background:var(--accent);color:#000;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;font-family:var(--mono)}
html[data-theme="light"] .dothis ol li::before{color:#fff}
/* ---------- steps ---------- */
.steps{list-style:none;counter-reset:s;margin:18px 0;max-width:74ch}
.steps li{counter-increment:s;position:relative;padding-left:44px;margin-bottom:18px}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:29px;height:29px;border-radius:9px;background:var(--bg-elev-3);border:1px solid var(--border-strong);color:var(--accent);font-family:var(--mono);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.steps li .title{font-weight:650;color:var(--text);display:block;margin-bottom:3px}
.steps li p{margin:0;font-size:14.5px}
/* ---------- tables ---------- */
.tbl-wrap{overflow-x:auto;margin:18px 0;border:1px solid var(--border);border-radius:var(--radius)}
table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:480px}
th,td{text-align:left;padding:11px 16px;border-bottom:1px solid var(--border);color:var(--text-muted);vertical-align:top}
thead th{background:var(--bg-elev-2);color:var(--text);font-weight:650;font-size:12px;letter-spacing:.4px;text-transform:uppercase;white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
td:first-child{color:var(--text);font-weight:600}
td .sub{display:block;font-size:12.5px;color:var(--text-dim);font-weight:400;margin-top:2px}
.num{font-family:var(--mono);font-size:13.5px;white-space:nowrap}
.pill{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.5px;padding:2px 8px;border-radius:100px;text-transform:uppercase}
.pill.ok{background:rgba(62,207,142,.14);color:var(--success)}
.pill.mid{background:rgba(245,184,0,.14);color:var(--warning)}
.pill.low{background:rgba(255,77,79,.13);color:var(--danger)}
.pill.plant{background:var(--plant-soft);color:var(--plant)}
.pill.omni{background:var(--accent-soft);color:var(--accent)}
/* ---------- figures ---------- */
figure{margin:24px 0;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-elev-1);padding:24px;max-width:76ch}
figure svg{width:100%;height:auto;display:block}
figcaption{font-size:12.5px;color:var(--text-dim);margin-top:16px;line-height:1.55;text-align:center}
/* ---------- key number ---------- */
.keynums{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0}
.keynum{background:var(--bg-elev-1);border:1px solid var(--border);border-radius:var(--radius);padding:18px}
.keynum .k{font-size:24px;font-weight:800;color:var(--accent);letter-spacing:-.7px;display:block;font-family:var(--mono)}
.keynum .d{font-size:13px;color:var(--text-muted);margin-top:5px;display:block;line-height:1.45}
/* ---------- cta ---------- */
.cta{background:var(--bg-elev-1);border:1px solid var(--border-strong);border-radius:var(--radius);padding:28px 30px;margin:34px 0;max-width:76ch;box-shadow:var(--shadow)}
.cta h3{margin-top:0}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#000;border:none;border-radius:var(--radius-sm);padding:11px 20px;font-size:14px;font-weight:700;font-family:inherit;text-decoration:none;cursor:pointer;transition:.15s}
html[data-theme="light"] .btn{color:#fff}
.btn:hover{filter:brightness(1.1)}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--border-strong)}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
/* ---------- calculators ---------- */
.calc{border:1px solid var(--border-strong);border-radius:var(--radius);margin:26px 0;overflow:hidden;max-width:76ch;background:var(--bg-elev-1);box-shadow:var(--shadow)}
.calc-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 20px;background:var(--bg-elev-2);border-bottom:1px solid var(--border);flex-wrap:wrap}
.calc-head h4{margin:0;font-size:15.5px;display:flex;align-items:center;gap:9px}
.calc-head h4 svg{color:var(--accent);flex:none}
.unit-toggle{display:flex;background:var(--bg-elev-3);border-radius:100px;padding:3px;gap:2px}
.unit-toggle button{background:none;border:none;color:var(--text-dim);font-family:inherit;font-size:11.5px;font-weight:700;letter-spacing:.4px;padding:5px 13px;border-radius:100px;cursor:pointer;transition:.15s}
.unit-toggle button.active{background:var(--accent);color:#000}
html[data-theme="light"] .unit-toggle button.active{color:#fff}
.calc-body{padding:20px}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.fld{display:flex;flex-direction:column;gap:5px}
.fld.wide{grid-column:1 / -1}
.fld label{font-size:11.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--text-dim);font-weight:650}
.fld .inrow{display:flex;gap:8px;align-items:stretch}
.fld input,.fld select{width:100%;background:var(--bg-elev-2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);padding:10px 12px;font-size:15px;font-family:inherit;outline:none;transition:border-color .15s;min-width:0}
.fld input:focus,.fld select:focus{border-color:var(--accent)}
.fld input[type=number]{font-family:var(--mono);-moz-appearance:textfield}
.fld input::-webkit-outer-spin-button,.fld input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.fld .suf{display:flex;align-items:center;padding:0 12px;background:var(--bg-elev-3);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:12.5px;color:var(--text-dim);font-family:var(--mono);white-space:nowrap}
.fld .hint{font-size:11.5px;color:var(--text-dim);line-height:1.45}
.calc-out{margin-top:20px;padding-top:18px;border-top:1px dashed var(--border)}
.calc-out.waiting .res .rv{color:var(--text-dim);opacity:.45}
.calc-out.waiting .scale{opacity:.35}
.calc-btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#000;border:none;border-radius:var(--radius-sm);padding:10px 18px;font-size:13.5px;font-weight:700;font-family:inherit;cursor:pointer;margin-top:16px;transition:.15s}
html[data-theme="light"] .calc-btn{color:#fff}
.calc-btn:hover{filter:brightness(1.1)}
.calc-btn:disabled{opacity:.4;cursor:not-allowed}
.res-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.res{background:var(--bg-elev-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:13px 15px}
.res .rv{font-family:var(--mono);font-size:21px;font-weight:800;color:var(--accent);letter-spacing:-.6px;display:block;line-height:1.2}
.res .rl{font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.8px;margin-top:4px;display:block}
.res.big .rv{font-size:27px}
.res-note{font-size:13px;color:var(--text-muted);line-height:1.55;margin:0}
.calc-err{color:var(--danger);font-size:13.5px;margin:0}
/* scale bar */
.scale{margin:6px 0 14px}
.scale-track{position:relative;height:34px;border-radius:8px;overflow:hidden;display:flex;border:1px solid var(--border)}
.scale-seg{flex:1 0 0;display:flex;min-width:0;overflow:hidden;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-dim)}
.scale-seg.s1{background:var(--bg-elev-2)}
.scale-seg.s2{background:rgba(0,181,247,.10)}
.scale-seg.s3{background:rgba(0,181,247,.20)}
.scale-seg.s4{background:rgba(0,181,247,.34);color:var(--accent)}
.scale-marker{position:absolute;top:-4px;bottom:-4px;width:3px;background:var(--text);border-radius:2px;transition:left .35s cubic-bezier(.4,0,.2,1);box-shadow:0 0 0 3px var(--bg-elev-1)}
.scale-labels{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;color:var(--text-dim);margin-top:6px}
/* ---------- technique ---------- */
.tech{border:1px solid var(--border);border-radius:var(--radius);margin:20px 0;overflow:hidden;max-width:76ch}
.tech-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 20px;background:var(--bg-elev-2);border-bottom:1px solid var(--border);flex-wrap:wrap}
.tech-head h4{margin:0;font-size:15.5px}
.tech-dose{font-family:var(--mono);font-size:12px;color:var(--accent);background:var(--accent-soft);border-radius:100px;padding:4px 11px;white-space:nowrap}
.tech-body{padding:18px 20px}
.tech-body p:last-child,.tech-body ol:last-child,.tech-body ul:last-child{margin-bottom:0}
.tech-body ol{margin:0 0 12px 0;padding-left:18px}
.tech-body ol li{color:var(--text-muted);margin-bottom:6px;font-size:14.5px}
.evid{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:2px 8px;border-radius:100px;margin-left:2px}
.evid.strong{background:rgba(62,207,142,.14);color:var(--success)}
.evid.good{background:var(--accent-soft);color:var(--accent)}
.evid.mixed{background:rgba(245,184,0,.14);color:var(--warning)}
/* ---------- refs ---------- */
sup.ref{font-size:10.5px;font-family:var(--mono);color:var(--accent);vertical-align:super;line-height:0;padding-left:1px}
sup.ref a{text-decoration:none}
ol.reflist{margin:18px 0 0 0;padding-left:0;list-style:none;counter-reset:r}
ol.reflist li{counter-increment:r;position:relative;padding-left:34px;margin-bottom:9px;font-size:13px;color:var(--text-dim);line-height:1.55;max-width:82ch}
ol.reflist li::before{content:"[" counter(r) "]";position:absolute;left:0;top:0;font-family:var(--mono);font-size:11px;color:var(--accent)}
ol.reflist li a{color:var(--text-muted)}
/* ---------- footer ---------- */
.docfooter{margin-top:60px;padding-top:26px;border-top:1px solid var(--border);font-size:12.5px;color:var(--text-dim);line-height:1.7}
.docfooter a{color:var(--text-muted)}
/* ---------- search highlight ---------- */
mark.hit{background:var(--accent-soft);color:var(--accent);border-radius:2px;padding:0 1px}
/* ---------- responsive ---------- */
@media(max-width:1000px){
.app{grid-template-columns:1fr}
.sidebar{position:fixed;top:0;left:0;width:288px;transform:translateX(-100%);transition:transform .22s ease}
.sidebar.open{transform:translateX(0)}
.scrim.show{display:block}
.mobile-bar{display:flex}
.main{padding:24px 20px 100px}
.grid-2,.grid-3,.keynums,.calc-grid,.res-row{grid-template-columns:1fr}
.hero{padding-top:24px}
.hero-stats{gap:24px}
.myth-row{grid-template-columns:1fr}
.myth-tag{border-right:none;border-bottom:1px solid var(--border);padding-bottom:0}
figure{padding:18px 14px}
}
@media print{
.sidebar,.mobile-bar,.scrim,#progress,.calc{display:none!important}
.app{display:block}
.main{max-width:none;padding:0}
body{background:#fff;color:#000;font-size:11pt}
section.doc{page-break-inside:avoid;padding:20px 0}
}
/* ---------------------------------------------------------------------------
Interactive manual components
---------------------------------------------------------------------------
Used by product manuals: device diagrams with hotspots, button explainers,
tabs, FAQ accordions, mode toggles, unit cyclers and the troubleshooting
picker. The guide does not use these, but they cost nothing when unused and
keeping them here is what makes every manual look identical.
--------------------------------------------------------------------------- */
.hero-grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 40px;
align-items: center;
}
.section-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
/* Tables */
table.specs {
width: 100%;
border-collapse: collapse;
margin: 12px 0;
font-size: 14px;
}
table.specs th, table.specs td {
padding: 12px 14px;
text-align: left;
border-bottom: 1px solid var(--border);
}
table.specs th {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1.2px;
color: var(--text-dim);
font-weight: 500;
}
table.specs td:first-child { color: var(--text); font-weight: 500; width: 38%; }
table.specs td:last-child { color: var(--text-muted); }
/* Button explainer */
.button-demo {
background: var(--bg-elev-1);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 28px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
align-items: center;
}
.btn-list { display: flex; flex-direction: column; gap: 10px; }
.btn-item {
padding: 14px 16px;
background: var(--bg-elev-2);
border: 1px solid var(--border);
border-radius: 10px;
cursor: pointer;
transition: all .15s;
display: flex; align-items: center; gap: 12px;
}
.btn-item:hover { border-color: var(--border-strong); }
.btn-item .key {
font-family: var(--mono);
font-size: 12px;
background: var(--bg);
border: 1px solid var(--border-strong);
border-radius: 6px;
padding: 4px 10px;
color: var(--text);
font-weight: 600;
}
.btn-item .label { font-weight: 600; color: var(--text); font-size: 14px; }
.btn-item .desc { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.btn-visual {
background: #0a0a0c;
border-radius: 14px;
padding: 28px;
border: 1px solid var(--border);
min-height: 260px;
display: flex; align-items: center; justify-content: center;
text-align: center;
}
.btn-visual h4 { color: var(--accent); margin: 8px 0 6px; font-size: 14px; text-transform: uppercase; letter-spacing: 1.4px; }
.btn-visual p { color: #cfcfd6; font-size: 14px; margin: 0; }
.btn-visual .action-chip {
display: inline-block;
margin-top: 12px;
padding: 6px 12px;
font-family: var(--mono);
font-size: 12px;
background: var(--accent-soft);
color: var(--accent);
border-radius: 6px;
}
/* Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.tab-btn {
background: transparent;
border: none;
padding: 10px 14px;
color: var(--text-muted);
cursor: pointer;
font-size: 13px;
font-weight: 500;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: all .15s;
}
.tab-btn:hover { color: var(--text); }
.tab-panel { display: none; }
/* FAQ Accordion */
details.faq {
background: var(--bg-elev-1);
border: 1px solid var(--border);
border-radius: 10px;
margin-bottom: 8px;
overflow: hidden;
}
details.faq summary {
padding: 14px 18px;
font-weight: 600;
cursor: pointer;
list-style: none;
display: flex; justify-content: space-between; align-items: center;
color: var(--text);
font-size: 14px;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
content: "+";
font-size: 20px;
color: var(--accent);
transition: transform .2s;
}
details.faq[open] summary::after { content: "−"; }
details.faq .answer {
padding: 0 18px 16px;
color: var(--text-muted);
font-size: 14px;
}
details.faq .answer p { color: var(--text-muted); }
/* App screen mockup */
.phone {
width: 260px;
aspect-ratio: 9 / 19;
background: #000;
border: 10px solid #1a1a20;
border-radius: 36px;
padding: 18px 14px;
box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px #2c2c34;
position: relative;
overflow: hidden;
font-size: 11px;
color: #d4d4d8;
}
.phone .status-bar {
display: flex; justify-content: space-between;
font-size: 10px; color: #fff; margin-bottom: 10px;
font-weight: 600;
}
.phone .app-title { text-align: center; color: var(--accent); font-weight: 600; font-size: 13px; margin-bottom: 12px; }
/* Device diagram w/ hotspots */
.device-stage {
position: relative;
background: radial-gradient(600px 300px at 50% 50%, rgba(0,181,247,0.12), transparent 70%);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.hotspot {
position: absolute;
width: 22px; height: 22px;
border-radius: 50%;
background: var(--accent);
border: 3px solid #000;
box-shadow: 0 0 0 4px var(--accent-soft);
cursor: pointer;
transition: transform .2s;
display: flex; align-items: center; justify-content: center;
color: #000; font-weight: 800; font-size: 11px;
}
.hotspot:hover { transform: scale(1.15); }
.hotspot-pulse::after {
content: ""; position: absolute; inset: -6px; border-radius: 50%;
border: 2px solid var(--accent);
animation: pulse 2s infinite;
}
.hotspot-label {
position: absolute;
padding: 6px 10px;
background: var(--bg-elev-3);
border: 1px solid var(--border-strong);
border-radius: 8px;
font-size: 12px;
color: var(--text);
white-space: nowrap;
display: none;
z-index: 3;
}
/* Mode toggle */
.mode-toggle-demo {
background: var(--bg-elev-1);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 24px;
}
.mode-display {
background: #000;
border-radius: 10px;
padding: 30px;
text-align: center;
font-family: var(--mono);
margin: 16px 0;
position: relative;
overflow: hidden;
border: 1px solid var(--border-strong);
}
.mode-display .readout {
font-size: 48px;
color: var(--accent);
letter-spacing: 3px;
font-weight: 700;
text-shadow: 0 0 20px var(--accent-glow);
}
.mode-display .label {
color: var(--text-dim);
text-transform: uppercase;
font-size: 11px;
letter-spacing: 2px;
margin-top: 4px;
}
.mode-buttons { display: flex; gap: 8px; justify-content: center; }
.mode-buttons button {
background: var(--bg-elev-2);
border: 1px solid var(--border);
color: var(--text-muted);
padding: 8px 14px;
border-radius: 8px;
font-size: 13px;
cursor: pointer;
font-family: var(--font);
transition: all .15s;
}
/* Unit cycler */
.unit-cycler {
display: flex; align-items: center; justify-content: center; gap: 20px;
padding: 20px;
background: var(--bg-elev-1);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.unit-box {
padding: 10px 20px;
border: 1px solid var(--border);
border-radius: 10px;
font-family: var(--mono);
font-size: 18px;
color: var(--text-muted);
min-width: 60px;
text-align: center;
transition: all .2s;
}
.unit-arrow { color: var(--text-dim); font-size: 20px; }
/* Troubleshooting wizard */
.ts-wizard {
background: var(--bg-elev-1);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 24px;
}
.ts-options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ts-options button {
background: var(--bg-elev-2);
border: 1px solid var(--border);
color: var(--text);
padding: 10px 14px;
border-radius: 10px;
cursor: pointer;
font-size: 13px;
transition: all .15s;
font-family: var(--font);
}
.ts-options button:hover { border-color: var(--accent); color: var(--accent); }
.ts-answer {
margin-top: 18px;
padding: 16px;
background: var(--bg-elev-2);
border-radius: 10px;
border-left: 3px solid var(--accent);
display: none;
}
.ts-answer h4 { margin: 0 0 8px; font-size: 14px; color: var(--accent); text-transform: uppercase; letter-spacing: 1px; }
.ts-answer p { margin: 0; color: var(--text); font-size: 14px; }
/* Compatibility chips */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.progress-bar { height: 6px; background: var(--bg-elev-2); border-radius: 999px; overflow: hidden; }
.progress-bar span { display: block; height: 100%; background: var(--accent); }
/* Sidebar collapse on mobile */
.menu-toggle { display: none; }
.menu-toggle {
display: inline-flex; align-items: center; gap: 6px;
position: fixed; top: 16px; right: 16px;
background: var(--bg-elev-2);
border: 1px solid var(--border);
color: var(--text);
padding: 8px 12px; border-radius: 8px; font-size: 12px;
cursor: pointer; z-index: 30;
}
/* Chart */
.chart-card { background: var(--bg-elev-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.chart-card svg { display: block; width: 100%; height: auto; }
.legend { display: flex; gap: 18px; margin-top: 12px; font-size: 12px; color: var(--text-muted); }
.legend .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: middle; }
/* States for the interactive components, and a size for callout icons.
The manual writes