/* =============================================================================
SKUA · Styled Layer — base settings
-----------------------------------------------------------------------------
PUBLIC API = 12 semantic tokens + 3 motion tokens (see :root below).
Everything a component draws derives from these. No raw color / radius /
shadow / duration value appears in any component rule — tokens only.
The live console rewrites these :root vars; every component re-skins with
zero markup change. That is the whole proof.
========================================================================== */
:root {
/* ---- 12 SEMANTIC TOKENS (the public theming surface) ------------------- */
--skua-bg: #141417; /* component surface (inputs, cards) */
--skua-bg-elevated: #1c1c21; /* floating panels: popover/dialog/toast */
--skua-fg: #fafafa; /* primary text */
--skua-fg-muted: #a1a1aa; /* secondary text, placeholders */
--skua-border: #2a2a31; /* hairline borders */
--skua-ring: #d4d4d8; /* focus-visible ring */
--skua-accent: #fafafa; /* selected / active / primary action */
--skua-accent-fg: #18181b; /* text on accent */
--skua-danger: #f0555f; /* error / destructive / invalid */
--skua-success: #34c5b4; /* success / positive / "ok" */
--skua-warning: #f0a23c; /* warning / caution / pending */
--skua-info: #5b9ef2; /* informational */
--skua-radius: 0.5rem; /* single radius unit; all radii derive */
--skua-shadow: 0 10px 30px -12px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.45);
--skua-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--skua-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
/* ---- 3 SCALE KNOBS (one value each → its whole scale rescales) --------- */
--skua-font-size: 0.875rem; /* base text size; the type scale derives */
--skua-icon-size: 1rem; /* base icon size; the icon steps derive */
--skua-space: 4px; /* base spacing unit; the space scale derives*/
/* ---- 3 MOTION TOKENS --------------------------------------------------- */
--skua-ease: cubic-bezier(0.22, 1, 0.36, 1);
--skua-duration: 160ms;
--skua-duration-exit: 120ms;
/* ---- DERIVED (computed from the public tokens — never set by hand) ------ */
--sk-r: var(--skua-radius); /* ×1 cards, panels, shells */
--sk-r-sm: calc(var(--skua-radius) * 0.5); /* ×0.5 chips, checks, days */
--sk-r-lg: calc(var(--skua-radius) * 1.5); /* ×1.5 dialog */
/* type scale — every font-size in the kit is one of these (all derive from
--skua-font-size, so one change rescales all text). px values @ 14px base. */
--sk-fs-2xs: calc(var(--skua-font-size) * 0.786); /* 11 */
--sk-fs-xs: calc(var(--skua-font-size) * 0.857); /* 12 */
--sk-fs-sm: calc(var(--skua-font-size) * 0.929); /* 13 */
--sk-fs-md: calc(var(--skua-font-size) * 1.071); /* 15 */
--sk-fs-lg: calc(var(--skua-font-size) * 1.143); /* 16 */
--sk-fs-xl: calc(var(--skua-font-size) * 1.286); /* 18 — h4 */
--sk-fs-2xl: calc(var(--skua-font-size) * 1.571); /* 22 — h3 */
/* icon scale — every glyph/indicator size derives from --skua-icon-size */
--sk-icon-2xs: calc(var(--skua-icon-size) * 0.4375); /* 7 — status dot */
--sk-icon-xs: calc(var(--skua-icon-size) * 0.5625); /* 9 — switch glyph */
--sk-icon-sm: calc(var(--skua-icon-size) * 0.8125); /* 13 — affirm */
--sk-icon-ssm: calc(var(--skua-icon-size) * 0.875); /* 14 — chip/spinner */
--sk-icon-md: calc(var(--skua-icon-size) * 1.125); /* 18 — spinner-md */
--sk-icon-lg: calc(var(--skua-icon-size) * 1.75); /* 28 — spinner-lg */
/* spacing scale — paddings/margins/gaps derive from --skua-space (4px base).
Full + half steps cover the 8-point grid; odd optical values (3/5/7/9/11px
hairline insets and accent bars) intentionally stay literal. */
--sk-space-0h: calc(var(--skua-space) * 0.5); /* 2 */
--sk-space-1: var(--skua-space); /* 4 */
--sk-space-1h: calc(var(--skua-space) * 1.5); /* 6 */
--sk-space-2: calc(var(--skua-space) * 2); /* 8 */
--sk-space-2h: calc(var(--skua-space) * 2.5); /* 10 */
--sk-space-3: calc(var(--skua-space) * 3); /* 12 */
--sk-space-3h: calc(var(--skua-space) * 3.5); /* 14 */
--sk-space-4: calc(var(--skua-space) * 4); /* 16 */
--sk-space-4h: calc(var(--skua-space) * 4.5); /* 18 */
--sk-space-5: calc(var(--skua-space) * 5); /* 20 */
--sk-space-6: calc(var(--skua-space) * 6); /* 24 */
/* Internal, NOT part of the public API (playground/theme plumbing) -------- */
--sk-canvas: #0a0a0c; /* page behind component surfaces */
--sk-bw: 1px; /* hairline width (themes may push to 2px) */
--sk-hover: color-mix(in srgb, var(--skua-fg) 6%, var(--skua-bg));
--sk-hi: color-mix(in srgb, var(--skua-fg) 8%, var(--skua-bg-elevated));
--sk-soft: color-mix(in srgb, var(--skua-accent) 14%, transparent);
--sk-soft-2: color-mix(in srgb, var(--skua-accent) 22%, transparent);
/* status soft-fills — ONE recipe per status, so badges/toasts/alerts that use
them stay in harmony when you retune a status color. */
--sk-neutral-soft: color-mix(in srgb, var(--skua-fg) 8%, transparent);
--sk-danger-soft: color-mix(in srgb, var(--skua-danger) 16%, transparent);
--sk-success-soft: color-mix(in srgb, var(--skua-success) 16%, transparent);
--sk-warning-soft: color-mix(in srgb, var(--skua-warning) 16%, transparent);
--sk-info-soft: color-mix(in srgb, var(--skua-info) 16%, transparent);
/* chips, badges and select tokens share ONE radius so they always match */
--sk-chip-r: var(--sk-r-sm);
/* scrollbars, cursors & text selection — all themeable tokens ----------- */
--skua-scrollbar: color-mix(in srgb, var(--skua-fg-muted) 42%, transparent);
--skua-scrollbar-track: transparent;
--skua-scrollbar-size: 10px; /* thumb / track width */
--skua-scrollbar-radius: 999px; /* thumb corner (0 = squared) */
--skua-scrollbar-track-border: 0 solid transparent; /* border on the track */
--skua-scrollbar-inset: calc(var(--sk-r) + 2px); /* track top/bottom pad so the thumb clears rounded corners */
--skua-selection: color-mix(in srgb, var(--skua-accent) 26%, var(--skua-bg));
--skua-cursor: default; /* resting surfaces */
--skua-cursor-text: text; /* typing surfaces */
--skua-cursor-pointer: pointer; /* interactive */
/* size steps — sm/md/lg control metrics (heights stay literal; font/icon/
padding/gap derive from the scale knobs above so they move together) ---- */
--sk-h: 36px; --sk-px: var(--sk-space-3); --sk-fs: var(--skua-font-size); --sk-icon: var(--skua-icon-size); --sk-gap: var(--sk-space-2);
}
/* ---- LIGHT THEME --------------------------------------------------------- */
/* Override the 12 semantic tokens when <html data-theme="light">. The derived
vars and every component recompute automatically — no per-component rules. */
:root[data-theme="light"] {
--skua-bg: #ffffff;
--skua-bg-elevated: #ffffff;
--skua-fg: #18181b;
--skua-fg-muted: #71717a;
--skua-border: #e4e4e7;
--skua-ring: #18181b;
--skua-accent: #18181b;
--skua-accent-fg: #fafafa;
--skua-danger: #dc2626;
--skua-success: #0d9488;
--skua-warning: #c2740a;
--skua-info: #2563eb;
--skua-shadow: 0 10px 30px -12px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08);
--sk-canvas: #fafafa;
--skua-scrollbar: color-mix(in srgb, var(--skua-fg-muted) 38%, transparent);
}
/* Global size override driven by the console's size segmented control.
Heights are literal; everything else derives from the scale knobs. */
[data-size="sm"] { --sk-h:32px; --sk-px:calc(var(--skua-space) * 2.5); --sk-fs:var(--sk-fs-sm); --sk-icon:var(--sk-icon-ssm); --sk-gap:calc(var(--skua-space) * 1.5); }
[data-size="md"] { --sk-h:36px; --sk-px:var(--sk-space-3); --sk-fs:var(--skua-font-size); --sk-icon:var(--skua-icon-size); --sk-gap:var(--sk-space-2); }
[data-size="lg"] { --sk-h:44px; --sk-px:calc(var(--skua-space) * 3.5); --sk-fs:var(--sk-fs-lg); --sk-icon:var(--sk-icon-md); --sk-gap:calc(var(--skua-space) * 2.5); }
/* per-control size (density strip) */
.sk-sm { --sk-h:32px; --sk-px:calc(var(--skua-space) * 2.5); --sk-fs:var(--sk-fs-sm); --sk-icon:var(--sk-icon-ssm); }
.sk-md { --sk-h:36px; --sk-px:var(--sk-space-3); --sk-fs:var(--skua-font-size); --sk-icon:var(--skua-icon-size); }
.sk-lg { --sk-h:44px; --sk-px:calc(var(--skua-space) * 3.5); --sk-fs:var(--sk-fs-lg); --sk-icon:var(--sk-icon-md); }
/* =============================================================================
PRIMITIVES SHARED BY EVERY COMPONENT
========================================================================== */
/* Focusable / global cursor + selection + scrollbar (all token-driven) ------ */
html { cursor: var(--skua-cursor); scrollbar-width: thin; scrollbar-color: var(--skua-scrollbar) var(--skua-scrollbar-track); }
/* Theme background + foreground on every page (not just ones that set their own).
Uses the page-canvas token, so it follows the active theme + light/dark. */
html, body { background: var(--sk-canvas); }
body { color: var(--skua-fg); font-family: var(--skua-font); min-height: 100dvh; }
/* Optional sticky nav (opt-in via <SiteNav.site_nav sticky />): floating glass
on wide screens where it sits over the gutter, solid below the content width
where a transparent bar would overlay the page content. */
.sk-sitenav { background: var(--skua-bg); border-bottom: 1px solid var(--skua-border); }
.sk-sitenav--sticky { position: sticky; top: 0; z-index: 40; background: transparent; border-bottom: 1px solid transparent; }
/* Below the floating lane width, the bar would overlap page content — go solid
with a divider. */
@media (max-width: 1279px) { .sk-sitenav--sticky { background: var(--sk-canvas); border-bottom-color: var(--skua-border); } }
/* ---- dashboard shell (SiteNav.dash_shell) -------------------------------- */
/* Full-viewport layout: a sticky, full-height, collapsible sidebar beside a
scrollable content panel. The rail IS the page nav (no top bar on dashboard
pages), so it pins at top:0 and runs the whole viewport height. */
.sk-dash { display: flex; min-height: 100vh; align-items: flex-start; }
.sk-dash__rail {
position: sticky;
top: 0;
align-self: flex-start;
height: 100vh;
width: 15rem; /* expanded (label) width */
flex-shrink: 0;
display: flex;
flex-direction: column;
border-right: 1px solid var(--skua-border);
transition: width var(--skua-duration) var(--skua-ease);
overflow: hidden;
}
.sk-dash__head {
display: flex; align-items: center; justify-content: space-between; gap: var(--sk-space-2);
padding: var(--sk-space-3) var(--sk-space-4);
border-bottom: 1px solid var(--skua-border);
min-height: 3.5rem;
}
.sk-dash__brand { font-weight: 600; font-size: var(--sk-fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-dash__nav { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--sk-space-1); padding: var(--sk-space-3); overflow-y: auto; }
.sk-dash__foot { display: flex; flex-direction: column; gap: var(--sk-space-1); border-top: 1px solid var(--skua-border); padding: var(--sk-space-3); }
.sk-dash__who { font-size: var(--sk-fs-xs); padding: 0 0.75rem var(--sk-space-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-dash .sk-sidelink {
display: flex; align-items: center; gap: var(--sk-space-2h);
border-radius: var(--sk-r); padding: 0.5rem 0.75rem;
font-size: var(--sk-fs-sm); color: var(--skua-fg-muted);
text-decoration: none; white-space: nowrap;
transition: background var(--skua-duration) var(--skua-ease), color var(--skua-duration) var(--skua-ease);
}
.sk-dash .sk-sidelink:hover { background: var(--sk-hover); color: var(--skua-fg); }
.sk-dash .sk-sidelink.is-active { background: var(--sk-hover); color: var(--skua-fg); font-weight: 500; }
.sk-dash .sk-sidelink:focus-visible,
.sk-dash__toggle:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--skua-ring); }
.sk-sidelink__icon { display: inline-flex; width: var(--sk-icon-md); height: var(--sk-icon-md); flex-shrink: 0; }
.sk-dash__toggle {
display: inline-flex; align-items: center; gap: var(--sk-space-2);
background: transparent; border: 0; cursor: var(--skua-cursor-pointer);
border-radius: var(--sk-r); padding: 0.375rem 0.5rem;
font: inherit; color: var(--skua-fg-muted);
}
.sk-dash__toggle:hover { background: var(--sk-hover); color: var(--skua-fg); }
.sk-dash__chevron { width: var(--sk-icon-md); height: var(--sk-icon-md); transition: transform var(--skua-duration) var(--skua-ease); }
/* COLLAPSED → icon-only rail: labels hide, rail narrows, items center. */
.sk-dash__rail[data-collapsed="true"] { width: 3.5rem; }
.sk-dash__rail[data-collapsed="true"] .sk-sidelink__label,
.sk-dash__rail[data-collapsed="true"] .sk-dash__brand,
.sk-dash__rail[data-collapsed="true"] .sk-dash__who { display: none; }
.sk-dash__rail[data-collapsed="true"] .sk-sidelink { justify-content: center; padding-left: 0; padding-right: 0; }
.sk-dash__rail[data-collapsed="true"] .sk-dash__head { justify-content: center; padding-left: 0; padding-right: 0; }
.sk-dash__rail[data-collapsed="true"] .sk-dash__chevron { transform: rotate(180deg); }
/* On small screens the rail defaults to the icon rail (see the SkuaSidebar hook);
when expanded it floats OVER the content instead of squeezing it. */
@media (max-width: 640px) {
.sk-dash__rail[data-collapsed="false"] {
position: fixed; top: 0; left: 0; bottom: 0; height: 100vh; z-index: 50;
background: var(--sk-canvas); box-shadow: var(--skua-shadow);
}
}
/* scrollable content panel */
.sk-dash__panel { flex: 1 1 0%; min-width: 0; display: flex; flex-direction: column; }
.sk-dash__super { padding: var(--sk-space-5) var(--sk-space-6) var(--sk-space-4); border-bottom: 1px solid var(--skua-border); }
.sk-dash__body { flex: 1 1 auto; padding: var(--sk-space-6); }
/* section block: clean SMALL MUTED header, then its cards/text/buttons */
.sk-dash__section { margin-top: var(--sk-space-6); }
.sk-dash__section:first-child { margin-top: 0; }
.sk-dash__section-title {
margin: 0 0 var(--sk-space-3);
font-size: var(--sk-fs-xs); font-weight: 500;
text-transform: uppercase; letter-spacing: 0.04em;
color: var(--skua-fg-muted);
}
::selection { background: var(--skua-selection); }
::-webkit-scrollbar { width: var(--skua-scrollbar-size); height: var(--skua-scrollbar-size); }
::-webkit-scrollbar-track { background: var(--skua-scrollbar-track); border: var(--skua-scrollbar-track-border); }
::-webkit-scrollbar-thumb { background: var(--skua-scrollbar); border-radius: var(--skua-scrollbar-radius); }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--skua-fg-muted) 66%, transparent); }
input, textarea, [contenteditable], .sk-num, .sk-mini-input { cursor: var(--skua-cursor-text); }
/* Any owned scroll surface: inset the track top/bottom so the thumb clears the
container's rounded corners instead of tucking behind them. WebKit honors a
physical `margin` here (not `margin-block`), and the thumb is constrained to
the track, so this is what actually shortens the thumb travel. */
.sk-scroll::-webkit-scrollbar-track,
.sk-listbox::-webkit-scrollbar-track,
.sk-dialog-body::-webkit-scrollbar-track,
.console::-webkit-scrollbar-track { margin-top: var(--skua-scrollbar-inset); margin-bottom: var(--skua-scrollbar-inset); }
/* Focus ring — superseded by the calm border treatment below */
.sk-focusable:focus-visible,
.sk-focusable.is-focus { outline: none; border-color: var(--skua-ring); }
/* kill the UA outline on plain (mouse) :focus — keyboard uses :focus-visible above */
.sk-focusable:focus { outline: none; }
/* Disabled — opacity + cursor, never color-only */
.is-disabled, [data-disabled], :disabled { opacity: .5; cursor: not-allowed; }
/* Functional glyphs: currentColor, 1.5 stroke, scale with text */
.sk-glyph { width: var(--sk-icon); height: var(--sk-icon); flex: none;
stroke: currentColor; stroke-width: 1.5; fill: none;
stroke-linecap: round; stroke-linejoin: round; }
@keyframes sk-spin { to { transform: rotate(360deg); } }
.sk-spinner { animation: sk-spin .7s linear infinite; }
.sk-spinner circle { opacity: .25; }
.sk-spinner path { opacity: 1; }
/* =============================================================================
TYPOGRAPHY — defaults for headings, paragraphs, lead/large text, links.
Use the utility classes directly, or wrap content in `.sk-content` to style
bare <h1>–<h6>/<p>/<a>/<ul> without per-element classes. Token-driven, so it
re-skins with the theme. These intentionally win over Tailwind preflight
inside `.sk-content`.
========================================================================== */
/* The heading scale derives from --skua-font-size (the stable type knob, not
the control-density --sk-fs) — change the knob and the whole scale moves; the
fluid clamp middle terms keep the responsive growth. */
.sk-h1, .sk-content h1 { font-size: clamp(calc(var(--skua-font-size) * 2.286), 1.4rem + 2.4vw, calc(var(--skua-font-size) * 3.429)); line-height: 1.1; font-weight: 680; letter-spacing: -0.02em; color: var(--skua-fg); margin: 0; }
.sk-h2, .sk-content h2 { font-size: clamp(calc(var(--skua-font-size) * 1.714), 1.2rem + 1.2vw, calc(var(--skua-font-size) * 2.286)); line-height: 1.15; font-weight: 650; letter-spacing: -0.015em; color: var(--skua-fg); margin: 0; }
.sk-h3, .sk-content h3 { font-size: var(--sk-fs-2xl); line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; color: var(--skua-fg); margin: 0; }
.sk-h4, .sk-content h4 { font-size: var(--sk-fs-xl); line-height: 1.3; font-weight: 600; color: var(--skua-fg); margin: 0; }
.sk-h5, .sk-content h5 { font-size: var(--sk-fs-lg); line-height: 1.4; font-weight: 600; color: var(--skua-fg); margin: 0; }
.sk-h6, .sk-content h6 { font-size: var(--sk-fs-sm); line-height: 1.4; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--skua-fg-muted); margin: 0; }
/* large base / lead paragraph — h4-sized, regular weight, same color as body */
.sk-lead { font-size: clamp(calc(var(--skua-font-size) * 1.429), 1.05rem + 0.7vw, calc(var(--skua-font-size) * 1.714)); line-height: 1.5; font-weight: 400; letter-spacing: -0.01em; color: color-mix(in srgb, var(--skua-fg) 88%, var(--skua-bg)); margin: 0; }
/* body paragraph (the lead opts out so its larger size wins inside .sk-content) */
.sk-p, .sk-content p:not(.sk-lead) { font-size: var(--sk-fs-md); line-height: 1.65; color: var(--skua-fg); margin: 0; }
.sk-content p:not(.sk-lead) { color: color-mix(in srgb, var(--skua-fg) 86%, var(--skua-bg)); }
.sk-muted { color: var(--skua-fg-muted); }
.sk-small { font-size: var(--sk-fs-sm); line-height: 1.5; color: var(--skua-fg-muted); }
.sk-link, .sk-content a { color: var(--skua-fg); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--skua-border); transition: text-decoration-color var(--skua-duration) var(--skua-ease); }
.sk-link:hover, .sk-content a:hover { text-decoration-color: var(--skua-fg-muted); }
.sk-code, .sk-content code { font-family: var(--skua-font-mono); font-size: 0.875em; padding: 0.1em 0.35em; border-radius: var(--sk-r-sm); background: var(--sk-hover); color: var(--skua-fg); }
.sk-kbd { font-family: var(--skua-font-mono); font-size: var(--sk-fs-sm); padding: 0.1em 0.4em; border: var(--sk-bw) solid var(--skua-border); border-bottom-width: 2px; border-radius: var(--sk-r-sm); color: var(--skua-fg-muted); }
/* vertical rhythm inside a content block */
.sk-content { display: flex; flex-direction: column; gap: 0.85rem; }
.sk-content :is(h1, h2, h3) { margin-top: 0.5rem; }
.sk-content ul, .sk-content ol { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.35rem; color: color-mix(in srgb, var(--skua-fg) 86%, var(--skua-bg)); }
/* theme toggle rendered as a switch — same dimensions as the form switch
(.sk-switch: 36×20, 14px thumb); the icon rides in the sliding thumb */
.sk-theme-switch { width: 36px; height: 20px; padding: 0; }
.sk-theme-switch .sk-thumb { width: 14px; height: 14px; left: 2px; display: grid; place-items: center; }
.sk-theme-switch.is-checked .sk-thumb { transform: translate(16px, -50%); }
.sk-theme-switch .sk-glyph { width: var(--sk-icon-xs); height: var(--sk-icon-xs); stroke-width: 2.2; color: var(--skua-fg-muted); }
.sk-theme-switch.is-checked .sk-thumb .sk-glyph { color: var(--skua-accent); }
.sk-theme-moon { display: none; }
.sk-theme-switch.is-checked .sk-theme-sun { display: none; }
.sk-theme-switch.is-checked .sk-theme-moon { display: inline; }
/* =============================================================================
HOME / SCAFFOLD — layout for the `mix skua.install` starter page
========================================================================== */
/* full-bleed page on Skua's canvas so no host (daisyUI) background shows through */
.sk-page { background: var(--sk-canvas); color: var(--skua-fg); min-height: 100vh; min-height: 100dvh; font-family: var(--skua-font); }
.sk-home { max-width: 56rem; margin: 0 auto; padding: 2rem 1.25rem 6rem; display: flex; flex-direction: column; gap: 2.75rem; }
.sk-home-top { display: flex; align-items: center; justify-content: space-between; }
.sk-badge-row { display: flex; gap: 0.5rem; }
.sk-home-section { display: flex; flex-direction: column; gap: 1rem; padding-top: 1.75rem; border-top: var(--sk-bw) solid var(--skua-border); }
.sk-home-form { display: flex; flex-direction: column; gap: 1rem; max-width: 30rem; }
.sk-home-actions { display: flex; justify-content: flex-start; }
.sk-home-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.sk-home-edge { display: flex; justify-content: flex-end; }
.sk-home-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
/* card */
.sk-card { background: var(--skua-bg); border: var(--sk-bw) solid var(--skua-border); border-radius: var(--sk-r); padding: var(--sk-space-4h); display: flex; flex-direction: column; gap: var(--sk-space-3); }
.sk-card-head { display: flex; flex-direction: column; gap: var(--sk-space-0h); }
.sk-card-title { font-size: var(--sk-fs-md); font-weight: 600; color: var(--skua-fg); margin: 0; }
.sk-card-sub { font-size: var(--sk-fs-sm); color: var(--skua-fg-muted); margin: 0; }
.sk-card-body { display: flex; flex-direction: column; gap: var(--sk-space-2h); }
.sk-card-foot { display: flex; gap: var(--sk-space-2); justify-content: flex-start; margin-top: auto; }
/* =============================================================================
HEADER · LIST · TABLE · PAGINATION · EMPTY · SPINNER — all token-driven
========================================================================== */
.sk-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* header */
.sk-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.sk-header-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sk-header-sub { font-size: var(--skua-font-size); color: var(--skua-fg-muted); margin: 0; }
.sk-header-actions { display: flex; gap: 0.5rem; flex: none; }
/* description list */
.sk-list { display: flex; flex-direction: column; margin: 0; }
.sk-list-row { display: flex; gap: 1rem; padding: var(--sk-space-2h) 0; border-top: var(--sk-bw) solid var(--skua-border); }
.sk-list-row:first-child { border-top: 0; }
.sk-list-title { flex: none; width: 35%; max-width: 200px; font-size: var(--sk-fs); color: var(--skua-fg-muted); margin: 0; }
.sk-list-val { flex: 1; min-width: 0; font-size: var(--sk-fs); color: var(--skua-fg); margin: 0; }
/* table — edges rounded with the same --sk-r token as cards/inputs/buttons */
.sk-table-wrap { border: var(--sk-bw) solid var(--skua-border); border-radius: var(--sk-r); overflow: auto; background: var(--skua-bg); max-width: 100%; }
.sk-table { width: 100%; border-collapse: collapse; font-size: var(--sk-fs); }
.sk-table thead th { position: sticky; top: 0; z-index: 1; background: var(--skua-bg); }
.sk-th { text-align: left; font-size: var(--sk-fs-xs); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--skua-fg-muted); padding: var(--sk-space-2h) var(--sk-space-3h); border-bottom: var(--sk-bw) solid var(--skua-border); white-space: nowrap; }
.sk-th-sort { appearance: none; background: none; border: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; font-weight: inherit; display: inline-flex; align-items: center; gap: var(--sk-space-1); cursor: var(--skua-cursor-pointer); padding: 0; }
.sk-th-sort:hover { color: var(--skua-fg); }
.sk-th-sort:focus-visible { outline: none; color: var(--skua-fg); }
.sk-sort-ind { display: inline-flex; opacity: 0; transition: opacity var(--skua-duration) var(--skua-ease), transform var(--skua-duration) var(--skua-ease); }
.sk-th-sort:hover .sk-sort-ind { opacity: .45; }
.sk-sort-ind.is-active { opacity: 1; color: var(--skua-fg); }
.sk-sort-ind.is-asc { transform: rotate(180deg); }
.sk-td { padding: var(--sk-space-3) var(--sk-space-3h); border-bottom: var(--sk-bw) solid var(--skua-border); color: var(--skua-fg); vertical-align: middle; }
.sk-table tbody tr:last-child .sk-td { border-bottom: 0; }
.sk-tr--click { cursor: var(--skua-cursor-pointer); }
.sk-table tbody tr:hover .sk-td { background: var(--sk-hover); }
.sk-th--action, .sk-td--action { text-align: right; white-space: nowrap; width: 1%; }
.sk-align-right { text-align: right; }
.sk-align-center { text-align: center; }
.sk-table-empty { padding: 2.5rem 1rem; text-align: center; color: var(--skua-fg-muted); font-size: var(--sk-fs); }
/* pagination */
.sk-pagination { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 0.75rem; }
.sk-pagination-info { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; min-width: 0; }
.sk-pagination-count { font-size: var(--sk-fs-sm); color: var(--skua-fg-muted); margin: 0; white-space: nowrap; }
.sk-pagination-count b { color: var(--skua-fg); font-weight: 600; }
.sk-pagination-controls { display: flex; align-items: center; gap: var(--sk-space-1); flex-wrap: wrap; }
/* page-number button (NB: distinct from .sk-page, the full-page shell) */
.sk-page-btn { min-width: var(--sk-h); padding: 0 var(--sk-space-2); font-variant-numeric: tabular-nums; }
.sk-pagination-gap { color: var(--skua-fg-muted); padding: 0 var(--sk-space-1); user-select: none; }
/* rows-per-page picker — a compact, embedded Skua <.select> (top-layer list, no
native <select>); constrain its width and drop the form-field margins. */
.sk-perpage { margin: 0; width: 9.5rem; }
.sk-perpage .sk-field { gap: 0; }
.sk-perpage .sk-msg { display: none; }
/* empty state */
.sk-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sk-space-2); padding: 2.5rem 1.5rem; }
.sk-empty-icon { color: var(--skua-fg-muted); }
.sk-empty-icon .sk-glyph { width: var(--sk-icon-lg); height: var(--sk-icon-lg); }
.sk-empty-title { font-size: var(--sk-fs-lg); font-weight: 600; color: var(--skua-fg); margin: 0; }
.sk-empty-desc { font-size: var(--sk-fs); color: var(--skua-fg-muted); margin: 0; max-width: 30ch; }
.sk-empty-action { margin-top: var(--sk-space-1h); }
/* spinner component (sizes) */
.sk-spinner--sm { width: var(--sk-icon-ssm); height: var(--sk-icon-ssm); }
.sk-spinner--md { width: var(--sk-icon-md); height: var(--sk-icon-md); }
.sk-spinner--lg { width: var(--sk-icon-lg); height: var(--sk-icon-lg); }
/* token reference grid */
.sk-token-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--sk-space-2); }
.sk-token { display: flex; align-items: center; gap: var(--sk-space-2h); padding: var(--sk-space-2) var(--sk-space-2h); border: var(--sk-bw) solid var(--skua-border); border-radius: var(--sk-r-sm); }
.sk-token-swatch { width: 30px; height: 30px; border-radius: var(--sk-r-sm); border: var(--sk-bw) solid var(--skua-border); flex: none; }
.sk-token-meta { min-width: 0; }
.sk-token-meta b { font-size: var(--sk-fs-xs); font-weight: 600; color: var(--skua-fg); display: block; }
.sk-token-meta code { font-family: var(--skua-font-mono); font-size: var(--sk-fs-2xs); color: var(--skua-fg-muted); }
/* =============================================================================
D1 · TEXT INPUT / TEXTAREA (the reference shell every B-trigger matches)
========================================================================== */
.sk-input {
display: flex; align-items: center; gap: var(--sk-gap);
width: 100%; min-height: var(--sk-h); height: var(--sk-h);
padding: 0 var(--sk-px);
font: inherit; font-size: var(--sk-fs); color: var(--skua-fg);
background: var(--skua-bg); background-clip: padding-box;
border: var(--sk-bw) solid var(--skua-border);
border-radius: var(--sk-r);
transition: border-color var(--skua-duration) var(--skua-ease),
background-color var(--skua-duration) var(--skua-ease);
}
.sk-input::placeholder { color: var(--skua-fg-muted); }
/* a bare <input>/<textarea> carrying .sk-input must NOT be a flex container —
that misaligns the placeholder/value. Flex is only for wrapper divs and the
<button> select-trigger (which lays out value + chevron). */
input.sk-input, textarea.sk-input { display: block; }
.sk-input:hover, .sk-input.is-hover { border-color: color-mix(in srgb, var(--skua-fg) 22%, var(--skua-border)); }
.sk-input:focus-visible, .sk-input.is-focus { outline: none; border-color: var(--skua-ring); }
.sk-input[aria-invalid="true"], .sk-input.is-invalid { border-color: var(--skua-danger); }
.sk-input[aria-invalid="true"]:focus-visible,
.sk-input.is-invalid.is-focus { border-color: var(--skua-danger); }
textarea.sk-input { height: auto; min-height: calc(var(--sk-h) * 2.2); padding: var(--sk-px); resize: vertical; line-height: 1.5; align-items: stretch; }
/* affix icon slots (leading / trailing) */
.sk-input .sk-affix { color: var(--skua-fg-muted); display: inline-flex; }
.sk-input > input { all: unset; flex: 1 1 auto; min-width: 0; font: inherit; color: inherit; }
.sk-input > input::placeholder { color: var(--skua-fg-muted); }
/* =============================================================================
D5 · FIELD WRAPPER
========================================================================== */
.sk-field { display: flex; flex-direction: column; gap: var(--sk-space-1h); }
.sk-field--row { flex-direction: row; align-items: center; gap: var(--sk-space-4); }
.sk-field--row > .sk-label { width: 140px; flex: none; padding-top: 0; }
.sk-field--row > .sk-control { flex: 1; }
.sk-label { font-size: var(--sk-fs-sm); font-weight: 500; color: var(--skua-fg); display: inline-flex; gap: var(--sk-space-1); }
.sk-label .sk-req { color: var(--skua-danger); }
.sk-help { font-size: var(--sk-fs-xs); color: var(--skua-fg-muted); }
.sk-error { font-size: var(--sk-fs-xs); color: var(--skua-danger); display: inline-flex; align-items: center; gap: 5px; }
/* helper/error share one slot — no layout shift */
.sk-msg { min-height: 16px; }
/* =============================================================================
BUTTON (drives primary action — the accent surface)
========================================================================== */
.sk-btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--sk-gap);
height: var(--sk-h); padding: 0 calc(var(--sk-px) + var(--sk-space-1));
font: inherit; font-size: var(--sk-fs); font-weight: 500; line-height: 1;
border: var(--sk-bw) solid transparent; border-radius: var(--sk-r);
cursor: var(--skua-cursor-pointer); white-space: nowrap; user-select: none;
transition: background-color var(--skua-duration) var(--skua-ease),
border-color var(--skua-duration) var(--skua-ease),
transform var(--skua-duration-exit) var(--skua-ease);
}
.sk-btn:focus-visible, .sk-btn.is-focus { outline: none; border-color: var(--skua-ring); }
.sk-btn:active { transform: translateY(.5px); }
/* primary = accent fill */
.sk-btn--primary { background: var(--skua-accent); color: var(--skua-accent-fg); }
.sk-btn--primary:hover, .sk-btn--primary.is-hover { background: color-mix(in srgb, var(--skua-fg) 12%, var(--skua-accent)); }
/* secondary = surface */
.sk-btn--secondary { background: var(--skua-bg); color: var(--skua-fg); border-color: var(--skua-border); }
.sk-btn--secondary:hover, .sk-btn--secondary.is-hover { background: var(--sk-hover); border-color: color-mix(in srgb, var(--skua-fg) 22%, var(--skua-border)); }
/* ghost = transparent */
.sk-btn--ghost { background: transparent; color: var(--skua-fg); }
.sk-btn--ghost:hover, .sk-btn--ghost.is-hover { background: var(--sk-hover); }
/* danger */
.sk-btn--danger { background: var(--skua-danger); color: #fff; }
.sk-btn--danger:hover, .sk-btn--danger.is-hover { filter: brightness(1.08); }
.sk-btn--icon { width: var(--sk-h); padding: 0; }
/* =============================================================================
D2 · CHECKBOX D3 · RADIO (16px, CSS-drawn marks)
========================================================================== */
.sk-check, .sk-radio {
position: relative; width: 16px; height: 16px; flex: none; display: inline-grid; place-items: center;
background: var(--skua-bg); background-clip: padding-box; border: var(--sk-bw) solid var(--skua-border);
transition: background-color var(--skua-duration) var(--skua-ease), border-color var(--skua-duration) var(--skua-ease);
cursor: var(--skua-cursor-pointer);
}
.sk-check { border-radius: var(--sk-r-sm); }
.sk-radio { border-radius: 999px; }
.sk-check:hover, .sk-radio:hover { border-color: color-mix(in srgb, var(--skua-fg) 30%, var(--skua-border)); }
.sk-check:focus-visible, .sk-radio:focus-visible,
.sk-check.is-focus, .sk-radio.is-focus { outline: none; border-color: var(--skua-ring); }
/* checked */
.sk-check.is-checked, .sk-check[aria-checked="true"] { background: var(--skua-accent); border-color: var(--skua-accent); }
.sk-check .sk-tick { width: 11px; height: 11px; stroke: var(--skua-accent-fg); stroke-width: 2.25; fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity var(--skua-duration) var(--skua-ease); }
.sk-check.is-checked .sk-tick, .sk-check[aria-checked="true"] .sk-tick { opacity: 1; }
/* indeterminate */
.sk-check.is-indeterminate { background: var(--skua-accent); border-color: var(--skua-accent); }
.sk-check.is-indeterminate .sk-tick { opacity: 0; }
.sk-check.is-indeterminate::after { content: ""; width: 9px; height: 2px; border-radius: 2px; background: var(--skua-accent-fg); }
/* radio dot */
.sk-radio::after { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--skua-accent); transform: scale(0); transition: transform var(--skua-duration) var(--skua-ease); }
.sk-radio.is-checked, .sk-radio[aria-checked="true"] { border-color: var(--skua-accent); }
.sk-radio.is-checked::after, .sk-radio[aria-checked="true"]::after { transform: scale(1); }
.sk-opt-row { display: inline-flex; align-items: center; gap: 9px; font-size: var(--sk-fs); cursor: var(--skua-cursor-pointer); }
/* =============================================================================
CODE INPUT (OTP / segmented) — N independent single-char cells, pasteable
Each cell IS the input shell, so it re-skins with every token.
========================================================================== */
.sk-otp { display: inline-flex; align-items: center; gap: var(--sk-gap); }
.sk-otp .sk-otp-gap { width: 8px; height: 1px; background: var(--skua-border); flex: none; }
.sk-otp-cell {
width: var(--sk-h); height: var(--sk-h); flex: none; padding: 0;
text-align: center; font: inherit; font-size: calc(var(--sk-fs) + 3px); font-weight: 600;
font-variant-numeric: tabular-nums; color: var(--skua-fg);
background: var(--skua-bg); background-clip: padding-box; border: var(--sk-bw) solid var(--skua-border);
border-radius: var(--sk-r-sm); caret-color: var(--skua-accent);
transition: border-color var(--skua-duration) var(--skua-ease), background-color var(--skua-duration) var(--skua-ease);
}
.sk-otp-cell::placeholder { color: var(--skua-fg-muted); font-weight: 400; }
/* hide the 0 placeholder once you're typing in a cell */
.sk-otp-cell:focus::placeholder { color: transparent; }
.sk-otp-cell:hover { border-color: color-mix(in srgb, var(--skua-fg) 22%, var(--skua-border)); }
.sk-otp-cell:focus-visible { outline: none; border-color: var(--skua-ring); }
.sk-otp-cell.is-filled { border-color: color-mix(in srgb, var(--skua-fg) 30%, var(--skua-border)); }
.sk-otp.is-invalid .sk-otp-cell { border-color: var(--skua-danger); }
.sk-otp.is-complete .sk-otp-cell { border-color: color-mix(in srgb, var(--skua-accent) 55%, var(--skua-border)); }
.sk-otp-cell:disabled { opacity: .5; cursor: not-allowed; }
/* =============================================================================
AUTOFILL SUPPRESSION — opt-in via [data-no-autofill] (JS adds the ignore
attrs + readonly-until-focus). This kills the browser's yellow highlight and
the injected password/contact icon. Toggle the global flag from the console.
========================================================================== */
[data-suppress-autofill] [data-no-autofill]:-webkit-autofill,
[data-suppress-autofill] [data-no-autofill] input:-webkit-autofill,
[data-no-autofill].force-suppress:-webkit-autofill,
[data-no-autofill].force-suppress input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px var(--skua-bg) inset !important;
-webkit-text-fill-color: var(--skua-fg) !important;
caret-color: var(--skua-fg);
transition: background-color 9999s ease-in-out 0s;
}
/* hide Chrome's reveal/contact button + Edge's password reveal in suppressed fields */
[data-no-autofill]::-webkit-contacts-auto-fill-button,
[data-no-autofill]::-webkit-credentials-auto-fill-button,
[data-no-autofill] input::-webkit-contacts-auto-fill-button,
[data-no-autofill] input::-webkit-credentials-auto-fill-button,
[data-no-autofill]::-ms-reveal {
visibility: hidden; display: none !important; pointer-events: none; position: absolute; right: 0;
}
/* =============================================================================
D4 · SWITCH (36×20 track / 16 thumb — the one allowed micro-movement)
========================================================================== */
.sk-switch {
position: relative; width: 36px; height: 20px; flex: none; border-radius: 999px; cursor: var(--skua-cursor-pointer);
background: color-mix(in srgb, var(--skua-fg) 18%, var(--skua-bg)); background-clip: padding-box;
border: var(--sk-bw) solid var(--skua-border);
transition: background-color var(--skua-duration) var(--skua-ease);
}
.sk-switch:focus-visible, .sk-switch.is-focus { outline: none; border-color: var(--skua-ring); }
.sk-switch .sk-thumb { position: absolute; top: 50%; left: 2px; width: 14px; height: 14px; border-radius: 999px; background: var(--skua-bg); transform: translateY(-50%); transition: transform var(--skua-duration) var(--skua-ease); box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.sk-switch.is-checked, .sk-switch[aria-checked="true"] { background: var(--skua-accent); border-color: var(--skua-accent); }
.sk-switch.is-checked .sk-thumb, .sk-switch[aria-checked="true"] .sk-thumb { transform: translate(16px, -50%); background: var(--skua-accent-fg); }
/* =============================================================================
NATIVE TOGGLE BRIDGE — a real <input> drives the CSS-drawn visual.
The input is visually hidden but FOCUSABLE (keyboard + screen-reader reach
it); the adjacent .sk-check/.sk-radio/.sk-switch reacts to :checked and
:focus-visible with zero JavaScript. This is the accessible replacement for
the old `hidden` input (which was keyboard-inoperable).
========================================================================== */
.sk-opt-input {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.sk-opt-label { font-size: var(--sk-fs); color: var(--skua-fg); }
/* checkbox */
.sk-opt-input:checked + .sk-check { background: var(--skua-accent); border-color: var(--skua-accent); }
.sk-opt-input:checked + .sk-check .sk-tick { opacity: 1; }
.sk-opt-input:indeterminate + .sk-check { background: var(--skua-accent); border-color: var(--skua-accent); }
.sk-opt-input:indeterminate + .sk-check .sk-tick { opacity: 0; }
.sk-opt-input:focus-visible + .sk-check { border-color: var(--skua-ring); }
.sk-opt-input:hover + .sk-check { border-color: color-mix(in srgb, var(--skua-fg) 30%, var(--skua-border)); }
/* radio */
.sk-opt-input:checked + .sk-radio { border-color: var(--skua-accent); }
.sk-opt-input:checked + .sk-radio::after { transform: scale(1); }
.sk-opt-input:focus-visible + .sk-radio { border-color: var(--skua-ring); }
.sk-opt-input:hover + .sk-radio { border-color: color-mix(in srgb, var(--skua-fg) 30%, var(--skua-border)); }
/* switch */
.sk-opt-input:checked + .sk-switch { background: var(--skua-accent); border-color: var(--skua-accent); }
.sk-opt-input:checked + .sk-switch .sk-thumb { transform: translate(16px, -50%); background: var(--skua-accent-fg); }
.sk-opt-input:focus-visible + .sk-switch { border-color: var(--skua-ring); }
/* disabled */
.sk-opt-input:disabled + .sk-check,
.sk-opt-input:disabled + .sk-radio,
.sk-opt-input:disabled + .sk-switch { opacity: .5; cursor: not-allowed; }
/* =============================================================================
CHIP (B4 multi-select tokens · D6 checkbox chips)
accent at LOW alpha + accent text — never solid accent
========================================================================== */
.sk-chip {
display: inline-flex; align-items: center; gap: var(--sk-space-1h);
height: 24px; padding: 0 var(--sk-space-1) 0 9px; font-size: var(--sk-fs-sm); line-height: 1;
border-radius: var(--sk-chip-r); border: var(--sk-bw) solid transparent;
background: var(--sk-soft); color: color-mix(in srgb, var(--skua-accent) 72%, var(--skua-fg));
}
.sk-chip .sk-chip-x { appearance: none; background: none; border: 0; padding: 0; font: inherit; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: var(--sk-r-sm); cursor: var(--skua-cursor-pointer); color: inherit; opacity: .7; }
.sk-chip .sk-chip-x:hover { opacity: 1; background: var(--sk-soft-2); }
.sk-chip.is-focus { outline: none; border-color: var(--skua-ring); }
.sk-chip--overflow { background: color-mix(in srgb, var(--skua-fg) 8%, transparent); color: var(--skua-fg-muted); padding: 0 9px; }
/* D6: unselected checkbox chip — outline, no fill */
.sk-chip--toggle { height: 32px; padding: 0 var(--sk-space-3); cursor: var(--skua-cursor-pointer); background: var(--skua-bg); border-color: var(--skua-border); color: var(--skua-fg); transition: all var(--skua-duration) var(--skua-ease); }
.sk-chip--toggle:hover { border-color: color-mix(in srgb, var(--skua-fg) 26%, var(--skua-border)); }
.sk-chip--toggle.is-checked { background: var(--sk-soft); border-color: color-mix(in srgb, var(--skua-accent) 38%, transparent); color: color-mix(in srgb, var(--skua-accent) 72%, var(--skua-fg)); }
.sk-chip--toggle .sk-glyph { width: var(--sk-icon-ssm); height: var(--sk-icon-ssm); }
/* native-input-driven chip toggle (real checkbox clipped inside the label) */
.sk-chip--toggle .sk-chip-tick { margin-left: -var(--sk-space-0h); opacity: 0; max-width: 0; transition: opacity var(--skua-duration) var(--skua-ease), max-width var(--skua-duration) var(--skua-ease); }
.sk-chip--toggle:has(.sk-opt-input:checked) { background: var(--sk-soft); border-color: color-mix(in srgb, var(--skua-accent) 38%, transparent); color: color-mix(in srgb, var(--skua-accent) 72%, var(--skua-fg)); }
.sk-chip--toggle:has(.sk-opt-input:checked) .sk-chip-tick { opacity: 1; max-width: 16px; }
.sk-chip--toggle:has(.sk-opt-input:focus-visible) { border-color: var(--skua-ring); }
/* selected-value chip shown inside a single-select field (badge display mode) */
.sk-chip--static { height: 22px; padding: 0 9px; }
/* select container + placeholder shown in the trigger when nothing is chosen */
.sk-select { display: block; }
.sk-select-trigger .sk-placeholder { color: var(--skua-fg-muted); }
/* highlighted (keyboard-active) listbox option, set via aria-activedescendant */
.sk-option.is-highlighted { background: var(--sk-hi); }
/* styled-select trigger: value box flexes, chevron pinned right */
.sk-select-trigger { cursor: var(--skua-cursor-pointer); text-align: left; }
.sk-select-trigger .sk-sel-val { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; overflow: hidden; }
.sk-select-trigger:not(.sk-multi) .sk-sel-val { white-space: nowrap; text-overflow: ellipsis; display: block; }
.sk-select-trigger.sk-multi { height: auto; min-height: var(--sk-h); padding: var(--sk-space-1h) var(--sk-space-2h); }
.sk-select-trigger .sk-chev { flex: none; }
/* in-panel search field for searchable / creatable selects */
.sk-sel-search { margin: var(--sk-space-0h) var(--sk-space-0h) var(--sk-space-1h); }
.sk-sel-search > input { all: unset; flex: 1; min-width: 0; font: inherit; font-size: var(--sk-fs); color: var(--skua-fg); }
.sk-sel-search > input::placeholder { color: var(--skua-fg-muted); }
/* the "+ Create" affordance — reads as an action via the accent */
.sk-option--create { color: color-mix(in srgb, var(--skua-accent) 70%, var(--skua-fg)); }
.sk-option--create .sk-check-col { color: inherit; opacity: 1; }
.sk-option--create .sk-create-label { display: inline-flex; align-items: center; gap: var(--sk-space-1h); }
/* =============================================================================
B2/B3/B5/B6 TRIGGER ADORNMENTS — chevron, clear, calendar
========================================================================== */
.sk-chev { transition: transform var(--skua-duration) var(--skua-ease); color: var(--skua-fg-muted); }
[data-state="open"] > .sk-chev, .is-open .sk-chev, .sk-input.is-open .sk-chev { transform: rotate(180deg); }
.sk-input .sk-clear { color: var(--skua-fg-muted); cursor: var(--skua-cursor-pointer); opacity: 0; transition: opacity var(--skua-duration) var(--skua-ease); }
.sk-input:hover .sk-clear, .sk-input.is-focus .sk-clear, .sk-input.has-value:hover .sk-clear { opacity: 1; }
.sk-trigger-slot { display: inline-flex; align-items: center; }
/* =============================================================================
FLOATING PANELS — popover / menu / listbox / calendar (top-layer look)
========================================================================== */
.sk-panel {
background: var(--skua-bg-elevated);
color: var(--skua-fg);
font-family: var(--skua-font);
border: var(--sk-bw) solid var(--skua-border);
border-radius: var(--sk-r);
box-shadow: var(--skua-shadow);
padding: 5px;
overflow: hidden; /* keep rounded corners intact under any child / scrollbar */
}
/* top-layer surfaces are appended to <body> (outside .sk-page), so set the
skin font on them explicitly or they'd fall back to the page default font. */
.sk-dialog, .sk-drawer, .sk-tooltip, .sk-toast { font-family: var(--skua-font); }
.sk-panel--pad { padding: var(--sk-space-3h); }
/* Floating panels live in the browser TOP LAYER (Popover API) so an ancestor's
overflow (dialog body, spec card) can never clip them. JS sets left/top. */
.sk-panel[popover] { position: fixed; margin: 0; inset: auto; }
[popover]::backdrop { background: transparent; }
/* enter/exit animation, keyed off data-state */
@keyframes sk-pop-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes sk-pop-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-4px) scale(.98); } }
.sk-anim[data-state="open"] { animation: sk-pop-in var(--skua-duration) var(--skua-ease); transform-origin: var(--sk-origin, top center); }
.sk-anim[data-state="closed"] { animation: sk-pop-out var(--skua-duration-exit) var(--skua-ease) forwards; }
/* A2 · MENU + B1 · LISTBOX rows */
.sk-menu { display: flex; flex-direction: column; min-width: 0; }
.sk-menu-label { padding: var(--sk-space-1h) 9px var(--sk-space-1); font-size: var(--sk-fs-2xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--skua-fg-muted); }
.sk-sep { height: 1px; margin: 5px 0; background: var(--skua-border); }
.sk-item {
display: flex; align-items: center; gap: 9px; min-height: 32px; padding: 0 9px;
font-size: var(--sk-fs); color: var(--skua-fg); border-radius: var(--sk-r-sm); cursor: var(--skua-cursor-pointer);
}
.sk-item .sk-kbd { margin-left: auto; font-size: var(--sk-fs-xs); color: var(--skua-fg-muted); font-family: var(--skua-font-mono); }
.sk-item:hover, .sk-item.is-highlighted, .sk-item[data-highlighted] { background: var(--sk-hi); }
.sk-item.is-disabled { background: none; }
.sk-item--danger { color: var(--skua-danger); }
.sk-item--danger:hover, .sk-item--danger.is-highlighted { background: var(--sk-danger-soft); }
.sk-item .sk-lead { width: var(--sk-icon); display: inline-flex; color: var(--skua-fg-muted); }
.sk-item .sk-lead .sk-glyph { width: var(--sk-icon); height: var(--sk-icon); }
/* menu items rendered as <button> need the native chrome reset */
.sk-menu-action { appearance: none; background: none; border: 0; font: inherit; width: 100%; text-align: left; }
.sk-menu-action:focus-visible { outline: none; background: var(--sk-hi); }
.sk-menu-action.sk-item--danger:focus-visible { background: var(--sk-danger-soft); }
/* the menu trigger's chevron rotates when open */
[data-state="open"] > .sk-chev { transform: rotate(180deg); }
/* B1 listbox option (36px, leading check column, description) */
.sk-listbox { display: flex; flex-direction: column; min-width: 0; max-height: 264px; overflow-y: auto; overflow-x: hidden; }
.sk-option { display: flex; align-items: flex-start; gap: 9px; min-height: 36px; padding: 7px 9px; border-radius: var(--sk-r-sm); cursor: var(--skua-cursor-pointer); font-size: var(--sk-fs); color: var(--skua-fg); }
.sk-option .sk-check-col { width: 16px; flex: none; display: inline-flex; align-items: center; justify-content: center; height: 20px; color: var(--skua-accent); opacity: 0; }
.sk-option.is-selected .sk-check-col, .sk-option[aria-selected="true"] .sk-check-col { opacity: 1; }
.sk-option:hover, .sk-option.is-highlighted, .sk-option[data-highlighted] { background: var(--sk-hi); }
.sk-option .sk-opt-desc { display: block; font-size: var(--sk-fs-xs); color: var(--skua-fg-muted); margin-top: 1px; }
.sk-listbox-empty, .sk-listbox-loading { padding: var(--sk-space-4h); text-align: center; font-size: var(--sk-fs-sm); color: var(--skua-fg-muted); display: flex; align-items: center; justify-content: center; gap: var(--sk-space-2); }
/* =============================================================================
B4 · MULTI-SELECT shell · B6 · PHONE shell
========================================================================== */
.sk-multi { min-height: var(--sk-h); height: auto; flex-wrap: wrap; padding: var(--sk-space-1); gap: var(--sk-space-1); align-items: center; }
.sk-multi .sk-mini-input { all: unset; flex: 1; min-width: 60px; font-size: var(--sk-fs); color: var(--skua-fg); padding-left: 5px; }
.sk-multi .sk-mini-input::placeholder { color: var(--skua-fg-muted); }
/* B6 phone — one continuous shell, interior hairline divides zones */
.sk-phone { padding: 0; gap: 0; overflow: hidden; }
.sk-phone .sk-country { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; gap: var(--sk-space-1h); height: 100%; padding: 0 var(--sk-space-3); font: inherit; font-size: var(--sk-fs); background: transparent; border: 0; border-right: var(--sk-bw) solid var(--skua-border); border-radius: 0; cursor: var(--skua-cursor-pointer); color: var(--skua-fg); white-space: nowrap; }
.sk-phone .sk-country:hover { background: var(--sk-hover); }
.sk-phone .sk-num { all: unset; flex: 1; min-width: 0; height: 100%; padding: 0 var(--sk-px); font-size: var(--sk-fs); color: var(--skua-fg); }
.sk-phone .sk-num::placeholder { color: var(--skua-fg-muted); }
.sk-phone .sk-append { display: inline-flex; align-items: center; padding: 0 5px 0 0; }
.sk-phone-wrap { display: block; }
.sk-phone .sk-country .sk-dial { color: var(--skua-fg-muted); font-variant-numeric: tabular-nums; }
.sk-phone .sk-country .sk-chev { color: var(--skua-fg-muted); }
/* country listbox rows: flag · name · dial */
.sk-listbox .sk-flag { flex: none; width: 1.4em; }
.sk-listbox .sk-opt-dial { margin-left: auto; color: var(--skua-fg-muted); font-variant-numeric: tabular-nums; }
/* =============================================================================
B5 · DATE PICKER calendar
========================================================================== */
.sk-cal { width: 264px; }
/* datetime time bar (sits above the calendar) */
.sk-time-bar { display: flex; align-items: center; gap: var(--sk-space-1); padding: 0 var(--sk-space-0h) var(--sk-space-2h); margin-bottom: var(--sk-space-2); border-bottom: var(--sk-bw) solid var(--skua-border); }
.sk-time-field { width: 44px; height: 32px; text-align: center; font: inherit; font-size: var(--sk-fs); font-variant-numeric: tabular-nums; color: var(--skua-fg); background: var(--skua-bg); border: var(--sk-bw) solid var(--skua-border); border-radius: var(--sk-r-sm); }
.sk-time-field:focus-visible { outline: none; border-color: var(--skua-ring); }
.sk-time-colon { color: var(--skua-fg-muted); font-weight: 600; }
.sk-time-ampm { display: inline-flex; margin-left: auto; border: var(--sk-bw) solid var(--skua-border); border-radius: var(--sk-r-sm); overflow: hidden; }
.sk-time-meridiem { appearance: none; background: none; border: 0; font: inherit; font-size: var(--sk-fs-xs); font-weight: 500; padding: 0 var(--sk-space-2h); height: 32px; color: var(--skua-fg-muted); cursor: var(--skua-cursor-pointer); }
.sk-time-meridiem + .sk-time-meridiem { border-left: var(--sk-bw) solid var(--skua-border); }
.sk-time-meridiem.is-active { background: var(--skua-accent); color: var(--skua-accent-fg); }
.sk-cal-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sk-space-0h) var(--sk-space-1) var(--sk-space-2); }
.sk-cal-title { font-size: var(--sk-fs-sm); font-weight: 600; color: var(--skua-fg); }
.sk-cal-nav { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--sk-r-sm); color: var(--skua-fg-muted); cursor: var(--skua-cursor-pointer); appearance: none; background: none; border: 0; padding: 0; }
.sk-cal-nav:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--skua-ring); }
.sk-cal-nav:hover { background: var(--sk-hi); color: var(--skua-fg); }
.sk-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sk-space-0h); }
.sk-cal-dow { font-size: var(--sk-fs-2xs); color: var(--skua-fg-muted); text-align: center; height: 24px; line-height: 24px; }
.sk-day { aspect-ratio: 1; display: grid; place-items: center; font-size: var(--sk-fs-sm); color: var(--skua-fg); border-radius: var(--sk-r-sm); cursor: var(--skua-cursor-pointer); position: relative; appearance: none; background: none; border: 0; font-family: inherit; padding: 0; width: 100%; }
.sk-day:hover { background: var(--sk-hi); }
.sk-day:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--skua-ring); }
.sk-day.is-outside { color: var(--skua-fg-muted); opacity: .5; }
.sk-day.is-today::after { content: ""; position: absolute; bottom: 4px; width: 3px; height: 3px; border-radius: 999px; background: var(--skua-accent); }
.sk-day.is-selected { background: var(--skua-accent); color: var(--skua-accent-fg); }
.sk-day.is-selected.is-today::after { background: var(--skua-accent-fg); }
.sk-day.is-focus { outline: none; box-shadow: inset 0 0 0 1px var(--skua-ring); }
.sk-day.is-disabled { opacity: .4; }
.sk-cal-foot { display: flex; justify-content: space-between; padding-top: var(--sk-space-2); margin-top: var(--sk-space-1h); border-top: var(--sk-bw) solid var(--skua-border); }
.sk-link-btn { background: none; border: none; font: inherit; font-size: var(--sk-fs-sm); color: var(--skua-fg-muted); cursor: var(--skua-cursor-pointer); padding: var(--sk-space-1); }
.sk-link-btn:hover { color: var(--skua-fg); }
/* =============================================================================
A3 · DIALOG
========================================================================== */
.sk-scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--sk-canvas) 70%, transparent); backdrop-filter: blur(2px); }
/* native <dialog>: closed stays hidden (don't let the class override the UA
display:none); open lays out as a column in the top layer with a scrim. */
/* width is a fit box; `inset:0; margin:auto` centers the modal in the viewport
(restated explicitly so a host reset zeroing dialog margins can't push it to
the corner). */
.sk-dialog { width: min(440px, calc(100vw - 2rem)); max-width: none; color: var(--skua-fg); background: var(--skua-bg-elevated); border: var(--sk-bw) solid var(--skua-border); border-radius: var(--sk-r-lg); box-shadow: var(--skua-shadow); max-height: 85vh; padding: 0; inset: 0; margin: auto; }
.sk-dialog:not([open]) { display: none; }
.sk-dialog[open] { display: flex; flex-direction: column; }
.sk-dialog::backdrop { background: color-mix(in srgb, var(--sk-canvas) 70%, transparent); backdrop-filter: blur(2px); }
.sk-dialog-head { display: flex; align-items: flex-start; gap: var(--sk-space-3); padding: var(--sk-space-4h) var(--sk-space-4h) var(--sk-space-2); }
.sk-dialog-title { font-size: var(--sk-fs-lg); font-weight: 600; color: var(--skua-fg); }
.sk-dialog-sub { font-size: var(--sk-fs-sm); color: var(--skua-fg-muted); margin-top: 3px; }
.sk-dialog-x { margin-left: auto; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--sk-r-sm); color: var(--skua-fg-muted); cursor: var(--skua-cursor-pointer); flex: none; }
.sk-dialog-x:hover { background: var(--sk-hi); color: var(--skua-fg); }
.sk-dialog-body { padding: var(--sk-space-2) var(--sk-space-4h); overflow: auto; }
.sk-dialog-foot { display: flex; justify-content: flex-end; gap: var(--sk-space-2); padding: var(--sk-space-3h) var(--sk-space-4h) var(--sk-space-4h); }
@keyframes sk-dialog-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.sk-dialog[open] { animation: sk-dialog-in var(--skua-duration) var(--skua-ease); }
/* =============================================================================
A4 · TOAST — icon + 3px left accent bar (no full-bg wash)
========================================================================== */
.sk-toast { position: relative; display: flex; gap: 11px; width: 340px; padding: var(--sk-space-3) var(--sk-space-3) var(--sk-space-3) var(--sk-space-4); background: var(--skua-bg-elevated); border: var(--sk-bw) solid var(--skua-border); border-radius: var(--sk-r); box-shadow: var(--skua-shadow); overflow: hidden; }
.sk-toast::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--sk-toast-accent, var(--skua-fg-muted)); }
.sk-toast--success { --sk-toast-accent: var(--skua-success); }
.sk-toast--danger { --sk-toast-accent: var(--skua-danger); }
.sk-toast--warning { --sk-toast-accent: var(--skua-warning); }
.sk-toast--info { --sk-toast-accent: var(--skua-info); }
.sk-toast-icon { color: var(--sk-toast-accent, var(--skua-fg-muted)); margin-top: 1px; }
.sk-toast-title { font-size: var(--skua-font-size); font-weight: 600; color: var(--skua-fg); }
.sk-toast-desc { font-size: var(--sk-fs-sm); color: var(--skua-fg-muted); margin-top: var(--sk-space-0h); }
.sk-toast-x { margin-left: auto; color: var(--skua-fg-muted); cursor: var(--skua-cursor-pointer); flex: none; }
@keyframes sk-toast-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.sk-toast { animation: sk-toast-in var(--skua-duration) var(--skua-ease); }
.sk-toast-leaving { opacity: 0; transform: translateX(16px); transition: opacity 200ms var(--skua-ease), transform 200ms var(--skua-ease); }
/* fixed top-layer stack for flash toasts */
.sk-toast-group { position: fixed; top: 1rem; right: 1rem; z-index: 60; display: flex; flex-direction: column; gap: var(--sk-space-2h); max-width: calc(100vw - 2rem); }
.sk-toast-body { flex: 1; min-width: 0; }
/* =============================================================================
A5 · SCROLL AREA — 6px overlay thumb, fades when idle
========================================================================== */
.sk-scroll { overflow: auto; scrollbar-width: thin; scrollbar-color: var(--skua-scrollbar) var(--skua-scrollbar-track); }
.sk-scroll::-webkit-scrollbar-thumb { background: var(--skua-scrollbar); border-radius: var(--skua-scrollbar-radius); }
.sk-scroll:hover::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--skua-fg-muted) 62%, transparent); }
/* =============================================================================
Status dot / badge helpers used in trigger append slots & scenarios
========================================================================== */
.sk-dot { width: var(--sk-icon-2xs); height: var(--sk-icon-2xs); border-radius: 999px; flex: none; }
/* Badge / chip — soft status fill + label color, all from status tokens. Shares
--sk-chip-r with the multi-select chips so the rounding always matches. */
.sk-badge { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 var(--sk-space-2); font-size: var(--sk-fs-xs); font-weight: 500; border-radius: var(--sk-chip-r); background: var(--sk-neutral-soft); color: var(--skua-fg-muted); }
.sk-badge--success, .sk-badge--ok { background: var(--sk-success-soft); color: var(--skua-success); }
.sk-badge--warning { background: var(--sk-warning-soft); color: var(--skua-warning); }
.sk-badge--info { background: var(--sk-info-soft); color: var(--skua-info); }
.sk-badge--danger { background: var(--sk-danger-soft); color: var(--skua-danger); }
/* Subtle inline affirmation — muted text, no pill, no status dot. The quiet
default for "saved" / "valid" / "available". A Badge or dot is opt-in. */
.sk-affirm { display: inline-flex; align-items: center; gap: 5px; font-size: var(--sk-fs-xs); color: var(--skua-fg-muted); white-space: nowrap; }
.sk-affirm .sk-glyph { width: var(--sk-icon-sm); height: var(--sk-icon-sm); color: var(--skua-fg-muted); }
.sk-affirm--danger { color: var(--skua-danger); }
/* reduced motion → movement collapses to fades */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
/* =============================================================================
LAYOUT & FEEDBACK (v1 gap-fill) — alert · accordion · breadcrumb · avatar ·
progress · skeleton · segmented · tabs · tooltip · drawer.
All token-driven (rounding from --sk-r/--sk-r-sm/--sk-r-lg, colours from the
semantic tokens), so they re-skin globally and adapt to the light theme.
========================================================================== */
/* --- alert / callout — left accent bar + soft surface (toast's language) --- */
.sk-alert { display: flex; gap: 11px; align-items: flex-start; position: relative; padding: var(--sk-space-3) var(--sk-space-3h); background: var(--skua-bg-elevated); border: var(--sk-bw) solid var(--skua-border); border-radius: var(--sk-r); color: var(--skua-fg); }
.sk-alert::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--sk-alert-accent, var(--skua-fg-muted)); border-radius: var(--sk-r) 0 0 var(--sk-r); }
.sk-alert-icon { color: var(--sk-alert-accent, var(--skua-fg-muted)); margin-top: 1px; flex: none; display: inline-flex; }
.sk-alert-body { min-width: 0; flex: 1; }
.sk-alert-title { font-size: var(--sk-fs); font-weight: 600; color: var(--skua-fg); margin: 0; }
.sk-alert-text { font-size: var(--sk-fs-sm); color: var(--skua-fg-muted); margin-top: var(--sk-space-0h); }
.sk-alert-text :where(p) { margin: 0; }
.sk-alert-actions { display: inline-flex; gap: var(--sk-space-2); align-items: center; margin-left: auto; flex: none; }
.sk-alert--success { --sk-alert-accent: var(--skua-success); }
.sk-alert--warning { --sk-alert-accent: var(--skua-warning); }
.sk-alert--error { --sk-alert-accent: var(--skua-danger); }
.sk-alert--info { --sk-alert-accent: var(--skua-info); }
.sk-alert--neutral { --sk-alert-accent: var(--skua-fg-muted); }
/* --- accordion (native <details>; chevron rotates via [open]) ------------- */
.sk-accordion { border: var(--sk-bw) solid var(--skua-border); border-radius: var(--sk-r); overflow: hidden; }
.sk-acc-item + .sk-acc-item { border-top: var(--sk-bw) solid var(--skua-border); }
.sk-acc-trigger { display: flex; align-items: center; gap: var(--sk-space-2h); padding: var(--sk-space-3) var(--sk-space-3h); font-size: var(--sk-fs); font-weight: 500; color: var(--skua-fg); cursor: var(--skua-cursor-pointer); list-style: none; user-select: none; }
.sk-acc-trigger::-webkit-details-marker { display: none; }
.sk-acc-trigger::marker { content: ""; }
.sk-acc-trigger:hover { background: var(--sk-hover); }
.sk-acc-trigger:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--skua-ring); }
.sk-acc-label { flex: 1; min-width: 0; }
.sk-acc-chev { color: var(--skua-fg-muted); transition: transform var(--skua-duration) var(--skua-ease); flex: none; }
.sk-acc-item[open] > .sk-acc-trigger .sk-acc-chev { transform: rotate(180deg); }
.sk-acc-panel { padding: 0 var(--sk-space-3h) var(--sk-space-3h); font-size: var(--sk-fs); color: var(--skua-fg-muted); }
.sk-acc-panel :where(p) { margin: 0; }
/* --- breadcrumb (slash separators via ::before) --------------------------- */
.sk-breadcrumb { font-size: var(--sk-fs-sm); }
.sk-crumbs { display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0; padding: 0; }
.sk-crumb { display: inline-flex; align-items: center; }
.sk-crumb + .sk-crumb::before { content: "/"; color: var(--skua-fg-muted); margin: 0 var(--sk-space-2); opacity: .65; }
.sk-crumb-link { color: var(--skua-fg-muted); text-decoration: none; border-radius: var(--sk-r-sm); }
.sk-crumb-link:hover { color: var(--skua-fg); }
.sk-crumb-link:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--skua-ring); }
.sk-crumb-current { color: var(--skua-fg); font-weight: 500; }
/* --- avatar (image w/ initials fallback; --sk-av sets the size) ----------- */
.sk-avatar { --sk-av: 36px; display: inline-grid; place-items: center; width: var(--sk-av); height: var(--sk-av); flex: none; overflow: hidden; border-radius: 999px; background: var(--sk-hi); color: var(--skua-fg); font-weight: 600; line-height: 1; user-select: none; }
.sk-avatar--square { border-radius: var(--sk-r); }
.sk-avatar-img { width: 100%; height: 100%; object-fit: cover; }
.sk-avatar-fallback { font-size: calc(var(--sk-av) * 0.4); }
.sk-avatar--xs { --sk-av: 24px; }
.sk-avatar--sm { --sk-av: 30px; }
.sk-avatar--md { --sk-av: 36px; }
.sk-avatar--lg { --sk-av: 48px; }
.sk-avatar--xl { --sk-av: 64px; }
/* --- progress (determinate width + indeterminate sweep) ------------------- */
.sk-progress { width: 100%; height: 8px; background: var(--sk-hi); border-radius: 999px; overflow: hidden; }
.sk-progress-bar { height: 100%; background: var(--skua-accent); border-radius: 999px; transition: width var(--skua-duration) var(--skua-ease); }
.sk-progress--indeterminate .sk-progress-bar { width: 40%; animation: sk-prog 1.1s var(--skua-ease) infinite; }
@keyframes sk-prog { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
/* --- skeleton (shimmer placeholder) --------------------------------------- */
.sk-skeleton { display: block; border-radius: var(--sk-r-sm); background: linear-gradient(90deg, var(--sk-hi) 25%, color-mix(in srgb, var(--skua-fg) 12%, var(--skua-bg-elevated)) 37%, var(--sk-hi) 63%); background-size: 400% 100%; animation: sk-shimmer 1.4s ease infinite; }
.sk-skeleton--text { width: 100%; height: 0.8em; margin: 0.2em 0; }
.sk-skeleton--circle { width: 40px; height: 40px; border-radius: 999px; }
.sk-skeleton--rect { width: 100%; height: 80px; border-radius: var(--sk-r); }
@keyframes sk-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
/* --- segmented control (single-select, native radios) --------------------- */
.sk-segmented { display: inline-flex; gap: var(--sk-space-0h); padding: 3px; background: var(--skua-bg); border: var(--sk-bw) solid var(--skua-border); border-radius: var(--sk-r); }
.sk-segment { position: relative; display: inline-flex; }
.sk-segment-input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: var(--skua-cursor-pointer); }
.sk-segment-label { display: inline-flex; align-items: center; justify-content: center; height: calc(var(--sk-h) - 8px); padding: 0 var(--sk-space-3); font-size: var(--sk-fs-sm); font-weight: 500; color: var(--skua-fg-muted); white-space: nowrap; border-radius: var(--sk-r-sm); cursor: var(--skua-cursor-pointer); transition: color var(--skua-duration) var(--skua-ease), background-color var(--skua-duration) var(--skua-ease); }
.sk-segment-input:hover + .sk-segment-label { color: var(--skua-fg); }
.sk-segment-input:checked + .sk-segment-label { background: var(--skua-accent); color: var(--skua-accent-fg); }
.sk-segment-input:focus-visible + .sk-segment-label { box-shadow: 0 0 0 2px var(--skua-ring); }
/* --- tabs (underline tablist; panels toggled by SkuaTabs) ----------------- */
.sk-tabs { display: flex; flex-direction: column; }
.sk-tablist { display: flex; gap: var(--sk-space-0h); border-bottom: var(--sk-bw) solid var(--skua-border); overflow-x: auto; scrollbar-width: none; }
.sk-tablist::-webkit-scrollbar { display: none; }
.sk-tab { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: var(--sk-space-2) var(--sk-space-3h); font: inherit; font-size: var(--sk-fs); font-weight: 500; color: var(--skua-fg-muted); white-space: nowrap; cursor: var(--skua-cursor-pointer); transition: color var(--skua-duration) var(--skua-ease), border-color var(--skua-duration) var(--skua-ease); }
.sk-tab:hover { color: var(--skua-fg); }
.sk-tab.is-active, .sk-tab[aria-selected="true"] { color: var(--skua-fg); border-bottom-color: var(--skua-accent); }
.sk-tab:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--skua-ring); border-radius: var(--sk-r-sm); }
.sk-tabpanel { padding: var(--sk-space-4) var(--sk-space-0h); }
.sk-tabpanel:focus-visible { outline: none; }
.sk-tabpanel[hidden] { display: none; }
/* --- tooltip (inverted top-layer label) ----------------------------------- */
.sk-tip-anchor { display: inline-flex; }
.sk-tooltip { max-width: 240px; padding: var(--sk-space-1h) 9px; font-size: var(--sk-fs-xs); line-height: 1.35; color: var(--skua-bg-elevated); background: var(--skua-fg); border: 0; border-radius: var(--sk-r-sm); box-shadow: var(--skua-shadow); pointer-events: none; z-index: 70; }
.sk-tooltip[popover] { position: fixed; margin: 0; inset: auto; overflow: visible; }
/* --- drawer / sheet (native <dialog>, edge-anchored, slides in) ----------- */
.sk-drawer { position: fixed; padding: 0; margin: 0; display: flex; flex-direction: column; color: var(--skua-fg); background: var(--skua-bg-elevated); border: var(--sk-bw) solid var(--skua-border); box-shadow: var(--skua-shadow); max-width: none; max-height: none; }
.sk-drawer:not([open]) { display: none; }
.sk-drawer::backdrop { background: color-mix(in srgb, var(--sk-canvas) 70%, transparent); backdrop-filter: blur(2px); }
.sk-drawer--right, .sk-drawer--left { top: 0; bottom: 0; height: 100%; width: min(420px, calc(100vw - 3rem)); }
.sk-drawer--right { right: 0; left: auto; border-radius: var(--sk-r-lg) 0 0 var(--sk-r-lg); }
.sk-drawer--left { left: 0; right: auto; border-radius: 0 var(--sk-r-lg) var(--sk-r-lg) 0; }
.sk-drawer--top, .sk-drawer--bottom { left: 0; right: 0; width: 100%; height: auto; max-height: 80vh; }
.sk-drawer--top { top: 0; bottom: auto; border-radius: 0 0 var(--sk-r-lg) var(--sk-r-lg); }
.sk-drawer--bottom { bottom: 0; top: auto; border-radius: var(--sk-r-lg) var(--sk-r-lg) 0 0; }
.sk-drawer-head { display: flex; align-items: flex-start; gap: var(--sk-space-3); padding: var(--sk-space-4h) var(--sk-space-4h) var(--sk-space-2h); }
.sk-drawer-title { font-size: var(--sk-fs-lg); font-weight: 600; color: var(--skua-fg); }
.sk-drawer-sub { font-size: var(--sk-fs-sm); color: var(--skua-fg-muted); margin-top: 3px; }
.sk-drawer-body { flex: 1; padding: var(--sk-space-2) var(--sk-space-4h); overflow: auto; }
.sk-drawer-foot { display: flex; justify-content: flex-end; gap: var(--sk-space-2); padding: var(--sk-space-3h) var(--sk-space-4h) var(--sk-space-4h); border-top: var(--sk-bw) solid var(--skua-border); }
@keyframes sk-drawer-r { from { transform: translateX(100%); } to { transform: none; } }
@keyframes sk-drawer-l { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes sk-drawer-t { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes sk-drawer-b { from { transform: translateY(100%); } to { transform: none; } }
.sk-drawer--right[open] { animation: sk-drawer-r var(--skua-duration) var(--skua-ease); }
.sk-drawer--left[open] { animation: sk-drawer-l var(--skua-duration) var(--skua-ease); }
.sk-drawer--top[open] { animation: sk-drawer-t var(--skua-duration) var(--skua-ease); }
.sk-drawer--bottom[open] { animation: sk-drawer-b var(--skua-duration) var(--skua-ease); }
/* --- slider (single + dual-handle range; thumb/track derive from the knobs) - */
.sk-slider { display: flex; align-items: center; padding: var(--sk-space-2h) 0; touch-action: none; }
.sk-slider-track { position: relative; flex: 1; height: var(--sk-space-1h); background: var(--sk-hi); border-radius: 999px; cursor: var(--skua-cursor-pointer); }
.sk-slider-fill { position: absolute; top: 0; bottom: 0; background: var(--skua-accent); border-radius: 999px; }
.sk-slider-thumb { position: absolute; top: 50%; width: var(--sk-icon-md); height: var(--sk-icon-md); margin-left: calc(var(--sk-icon-md) / -2); transform: translateY(-50%); padding: 0; border-radius: 999px; background: var(--skua-bg-elevated); border: 2px solid var(--skua-accent); box-shadow: var(--skua-shadow); cursor: grab; touch-action: none; }
.sk-slider-thumb:active { cursor: grabbing; }
.sk-slider-thumb:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--skua-ring); }