/* ---------- Tabs ---------- */
.tabs__list { display: flex; gap: var(--space-1); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.tabs__tab {
    position: relative;
    flex: none;
    min-height: var(--tap);
    padding: 0 var(--space-4);
    border: 0;
    background: none;
    color: var(--text-3);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}
.tabs__tab:hover { color: var(--text); }
.tabs__tab[aria-selected="true"] { color: var(--text); }
.tabs__tab[aria-selected="true"]::after { content: ""; position: absolute; inset: auto 10px -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); box-shadow: 0 0 12px var(--glow); }
.tabs__tab .count { margin-left: 6px; padding: 1px 7px; border-radius: 99px; background: var(--surface-2); font-size: 12px; }
.tabs__tab:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -4px; border-radius: var(--radius-s); }
.tabs__panel { padding-top: var(--space-4); color: var(--text-2); }

/* ---------- Accordion ---------- */
.accordion { border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--bg-raised); overflow: hidden; }
.accordion + .accordion { margin-top: var(--space-2); }
.accordion summary { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: 0 var(--space-4); font-weight: 800; cursor: pointer; list-style: none; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: ""; width: 10px; height: 10px; margin-left: auto; border: solid var(--text-3); border-width: 0 2px 2px 0; rotate: 45deg; translate: 0 -3px; transition: rotate var(--dur-2) var(--ease-out); }
.accordion[open] summary::after { rotate: 225deg; translate: 0 2px; }
.accordion summary:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -2px; }
.accordion__body { padding: 0 var(--space-4) var(--space-4); color: var(--text-2); }
.accordion::details-content { block-size: 0; overflow: hidden; transition: block-size var(--dur-3) var(--ease-out), content-visibility var(--dur-3) allow-discrete; }
.accordion[open]::details-content { block-size: auto; }
@supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }

/* ---------- Range slider ---------- */
.range-field { display: grid; gap: var(--space-2); }
.range-field__head { display: flex; justify-content: space-between; align-items: baseline; }
.range-field__head output { font-weight: 800; color: var(--accent-2); font-variant-numeric: tabular-nums; }
.range { --pct: 50%; appearance: none; width: 100%; height: 32px; margin: 0; background: transparent; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--ember-3), var(--accent) var(--pct), var(--surface-2) var(--pct)); }
.range::-moz-range-track { height: 6px; border-radius: 6px; background: var(--surface-2); }
.range::-moz-range-progress { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--ember-3), var(--accent)); }
.range::-webkit-slider-thumb { appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: var(--ember-1); border: 4px solid var(--accent); box-shadow: 0 0 14px var(--glow); transition: scale var(--dur-1); }
.range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--ember-1); border: 4px solid var(--accent); box-shadow: 0 0 14px var(--glow); }
.range:active::-webkit-slider-thumb { scale: 1.15; }
.range:focus-visible { outline: none; }
.range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent-2); outline-offset: 3px; }
.range-field__scale { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--text-3); }

/* ---------- Callouts ---------- */
.callout { --c: var(--info); display: grid; grid-template-columns: auto 1fr auto; gap: 2px var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid color-mix(in oklab, var(--c) 35%, transparent); border-radius: var(--radius-m); background: color-mix(in oklab, var(--c) 9%, var(--bg-raised)); }
.callout > svg { grid-row: span 2; width: 22px; height: 22px; margin-top: 1px; color: var(--c); }
.callout strong { color: var(--text); }
.callout p { grid-column: 2; margin: 0; color: var(--text-2); font-size: var(--step--1); }
.callout .btn--icon { grid-column: 3; grid-row: 1 / span 2; width: 36px; height: 36px; min-height: 36px; margin: -4px -8px 0 0; }
.callout--ok { --c: var(--ok); }
.callout--warn { --c: var(--warn); }
.callout--danger { --c: var(--danger); }
.callout--accent { --c: var(--accent); }

/* ---------- Table ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--bg-raised); }
.table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.table th, .table td { padding: 12px var(--space-4); text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table thead th { position: sticky; top: 0; background: var(--bg-sunken); font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.table th button { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.table th[aria-sort] button { color: var(--accent-2); }
.table th[aria-sort="ascending"] button::after { content: "↑"; }
.table th[aria-sort="descending"] button::after { content: "↓"; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 800; }

/* ---------- Pagination, breadcrumbs, steps ---------- */
.pager { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.pager a, .pager span { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 10px; border-radius: var(--radius-m); color: var(--text-2); font-weight: 800; text-decoration: none; font-variant-numeric: tabular-nums; }
.pager a:hover { background: var(--surface); color: var(--text); }
.pager [aria-current="page"] { background: var(--accent); color: var(--accent-ink); }
.pager svg { width: 20px; height: 20px; }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: var(--step--1); font-weight: 700; }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--text-3); }
.crumbs a { color: var(--text-3); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.crumbs [aria-current="page"] { color: var(--text); }

.steps { display: flex; gap: var(--space-2); list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { flex: 1; display: grid; gap: 8px; font-size: 12px; font-weight: 800; color: var(--text-3); counter-increment: step; }
.steps li::before { content: ""; height: 4px; border-radius: 4px; background: var(--surface-2); }
.steps li[data-state="done"]::before { background: var(--accent); }
.steps li[aria-current="step"]::before { background: linear-gradient(90deg, var(--accent) 50%, var(--surface-2) 50%); box-shadow: 0 0 10px var(--glow); }
.steps li[aria-current="step"], .steps li[data-state="done"] { color: var(--text); }

/* Unread badge on an icon button */
.badge-host { position: relative; }
.badge-count { position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--bg); }

/* ---------- Scroll demo box ---------- */
.scroll-demo { height: 180px; overflow: auto; padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--bg-raised); color: var(--text-2); }

/* ---------- Hookah loader: the HMD glows, the dome fills with smoke, the chamber bubbles ---------- */
/* Only opacity and transforms animate; the blurs are static, so a long wait stays cheap on phones. */
.hookah-loader { display: inline-grid; justify-items: center; gap: var(--space-2); color: var(--text-3); font-size: var(--step--1); font-weight: 700; }
.hookah-loader svg.hl { width: 112px; height: 160px; overflow: visible; }
.hookah-loader--sm svg.hl { width: 56px; height: 80px; }
.hl__line { fill: none; stroke: var(--text-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hl__glass { fill: color-mix(in oklab, var(--text-2) 7%, transparent); }
.hl__shine { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; opacity: 0.14; }
.hl__waterline { fill: none; stroke: #e6f4ff; stroke-width: 1.2; opacity: 0.45; }
.hl__leg { fill: none; stroke: var(--text-2); stroke-width: 3; stroke-linecap: round; }
.hl__rim { fill: none; stroke: var(--ember-2); stroke-width: 1.4; stroke-linecap: round; opacity: 0.6; }
.hl__heat { fill: var(--glow); filter: blur(7px); animation: hl-heat 1.8s ease-in-out infinite; }
.hl__bubble { fill: none; stroke: #e6f4ff; stroke-width: 1; opacity: 0; animation: hl-bubble 1.5s ease-in infinite; }
.hl__bubble:nth-of-type(2) { animation-delay: -0.5s; }
.hl__bubble:nth-of-type(3) { animation-delay: -1s; }
.hl__bubble:nth-of-type(4) { animation-delay: -0.25s; }
.hl__bubble:nth-of-type(5) { animation-delay: -0.75s; }
.hl__bubble:nth-of-type(6) { animation-delay: -1.25s; }
.hl__dome-smoke { fill: color-mix(in oklab, var(--text) 50%, transparent); filter: blur(3px); animation: hl-fill 2.8s ease-in-out infinite; }

@keyframes hl-heat { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.8; } }
@keyframes hl-bubble { 0% { opacity: 0; translate: 0 0; } 15% { opacity: 0.9; } 100% { opacity: 0; translate: 0 -24px; } }
@keyframes hl-fill { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.75; } }

@media (prefers-reduced-motion: reduce) {
    .hl__heat, .hl__bubble, .hl__dome-smoke { animation: none; }
    .hl__heat { opacity: 0.55; }
}