/**
* NetShow Estate UI Kit — CANDIDATE
* Version: 1.0.0 — W4-U5 (2026-08-10)
*
* ONE kit, two rooms. The estate keeps its two legitimate design languages —
* the platform room (N: warm graphite + gold, Nunito) and the Alive room
* (V: deep-space navy + periwinkle/mint, Space Grotesk / Instrument Sans /
* IBM Plex Mono) — and unifies everything a customer FEELS across both:
* one spacing scale, one radius scale, one type ramp, one label idiom, one
* focus behavior, one component anatomy, one state system.
*
* ADOPTION
* N (Laravel):
* loaded AFTER css/design-system.css. Nothing else changes;
* --nsk-* resolves through the live --ns-* theme system, so
* Gold/Silver x Dark/Light keep working untouched.
* V (alive):
* plus data-nsk-scope="alive" on (or on any subtree).
* --nsk-* resolves through --nsa-*, so the night/morning/noon
* themes keep working untouched. Pages without --nsa-* defs
* (cluster C/E labs) land on the night-theme literals below.
*
* ADDITIVE GUARANTEE (zero breaking selectors)
* - Only NEW class names (.nsk-*), NEW attribute scopes ([data-nsk-scope]),
* and NEW custom properties (--nsk-*). No element selectors, no *,
* no existing-class overrides, no !important.
* - Keyframes are namespaced (nsk-spin, nsk-pulse) — talk.css owns "pulse"
* and design-system.css owns "ns-spin"; neither is touched.
* - Existing .ns-* / --nsa-* surfaces render byte-identically with this
* sheet loaded. Migration is opt-in, class by class.
*/
/* ============================================================
* LAYER 0 — SCOPE RESOLUTION
* Semantic roles every component consumes. Values chain into the
* scope's native token system with safe literals as last resort.
* ============================================================ */
/* ---- App scope (default — the platform room) ---- */
:root,
[data-nsk-scope="app"] {
/* surfaces */
--nsk-bg: var(--ns-bg-primary, #1a1a1a);
--nsk-band: var(--ns-bg-secondary, #2d2d2d);
--nsk-surface: var(--ns-bg-secondary, #2d2d2d);
--nsk-surface-2: var(--ns-bg-tertiary, #3d3d3d);
--nsk-inset: var(--ns-bg-surface, #2f3437);
--nsk-float: var(--ns-bg-elevated, #424649);
--nsk-chip-bg: var(--ns-bg-tertiary, #3d3d3d);
--nsk-header: var(--ns-bg-secondary, #2d2d2d);
/* text */
--nsk-ink: var(--ns-text-primary, #ffffff);
--nsk-text: var(--ns-text-primary, #ffffff);
--nsk-sub: var(--ns-text-secondary, #a0a0a0);
--nsk-faint: var(--ns-text-muted, #6b7280);
--nsk-disabled: var(--ns-text-disabled, #4b5563);
/* accent — primary interactive voice of the room */
--nsk-accent: var(--ns-accent, #f59e0b);
--nsk-accent-hover: var(--ns-accent-hover, #d97706);
--nsk-accent-subtle: var(--ns-accent-subtle, rgba(245, 158, 11, 0.1));
--nsk-on-accent: var(--ns-accent-text, #000);
/* accent-2 — the "alive / positive" support voice */
--nsk-accent-2: var(--ns-success, #10b981);
/* semantic status (estate law: info is desaturated steel, never electric blue) */
--nsk-ok: var(--ns-success, #10b981);
--nsk-ok-bg: var(--ns-success-bg, rgba(16, 185, 129, 0.1));
--nsk-warn: var(--ns-warning, #f59e0b);
--nsk-warn-bg: var(--ns-warning-bg, rgba(245, 158, 11, 0.1));
--nsk-err: var(--ns-error, #ef4444);
--nsk-err-bg: var(--ns-error-bg, rgba(239, 68, 68, 0.1));
--nsk-info: var(--ns-info, #64748b);
--nsk-info-bg: var(--ns-info-bg, rgba(100, 116, 139, 0.1));
/* borders + focus */
--nsk-bd: var(--ns-border, #404040);
--nsk-bd-soft: var(--ns-border-subtle, #333333);
--nsk-bd-strong: var(--ns-border-strong, #525252);
--nsk-focus: var(--ns-accent, #f59e0b);
/* shadows */
--nsk-shadow-sm: var(--ns-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.3));
--nsk-shadow-md: var(--ns-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.3));
--nsk-shadow-lg: var(--ns-shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.3));
--nsk-shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.4);
/* type faces */
--nsk-font-display: var(--ns-font-sans, 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
--nsk-font-body: var(--ns-font-sans, 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
--nsk-font-mono: var(--ns-font-mono, 'SF Mono', SFMono-Regular, ui-monospace, Menlo, Monaco, monospace);
}
/* ---- Alive scope (the Alive room) ---- */
[data-nsk-scope="alive"] {
/* surfaces */
--nsk-bg: var(--nsa-bg, #0A0F22);
--nsk-band: var(--nsa-band, #0C1229);
--nsk-surface: var(--nsa-panel, #101736);
--nsk-surface-2: var(--nsa-panel2, #0F1634);
--nsk-inset: var(--nsa-inset, #0C1230);
--nsk-float: var(--nsa-menu, #0A1026);
--nsk-chip-bg: var(--nsa-chip, #131B3D);
--nsk-header: var(--nsa-header, rgba(8, 13, 30, 0.94));
/* text */
--nsk-ink: var(--nsa-ink, #EAEFFF);
--nsk-text: var(--nsa-text, #C7D0F2);
--nsk-sub: var(--nsa-sub, #A9B4DE);
--nsk-faint: var(--nsa-faint, #7C89B8);
--nsk-disabled: var(--nsa-faint3, #5A679C);
/* accent */
--nsk-accent: var(--nsa-peri-t, #8FA5FF);
--nsk-accent-hover: var(--nsa-peri-t2, #B9C6FF);
--nsk-accent-subtle: rgba(143, 165, 255, 0.12);
--nsk-on-accent: #0A0F22;
--nsk-accent-2: var(--nsa-mint-t, #3EF0BE);
/* semantic status */
--nsk-ok: var(--nsa-mint-t, #3EF0BE);
--nsk-ok-bg: var(--nsa-ok-bg, #0D2A22);
--nsk-warn: var(--nsa-yel-t, #FFC94D);
--nsk-warn-bg: var(--nsa-warn-bg, #3A2E10);
--nsk-err: var(--nsa-coral-t, #FF9C8F);
--nsk-err-bg: rgba(255, 156, 143, 0.12);
--nsk-info: var(--nsa-teal-t, #35CBDF);
--nsk-info-bg: rgba(53, 203, 223, 0.12);
/* borders + focus (matches the estate's existing :focus-visible ring) */
--nsk-bd: var(--nsa-bd, #26325A);
--nsk-bd-soft: var(--nsa-bd2, #1E2A4E);
--nsk-bd-strong: var(--nsa-bd4, #2B3760);
--nsk-focus: var(--nsa-peri-t, #8FA5FF);
/* shadows — the Alive room's deep soft key light */
--nsk-shadow-sm: 0 1px 2px rgba(3, 6, 18, 0.5);
--nsk-shadow-md: 0 6px 18px rgba(3, 6, 18, 0.45);
--nsk-shadow-lg: 0 24px 70px rgba(3, 6, 18, 0.7);
--nsk-shadow-pop: 0 12px 34px rgba(3, 6, 18, 0.6);
/* type faces */
--nsk-font-display: 'Space Grotesk', var(--nsk-font-body, sans-serif);
--nsk-font-body: 'Instrument Sans', system-ui, sans-serif;
--nsk-font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}
/* Alive light themes flip accent to a dark blue — text on accent goes white.
* (morning peri #4353C9, noon peri #3D4ED2 — both need light ink on top.) */
html[data-nsa-theme="morning"] [data-nsk-scope="alive"],
html[data-nsa-theme="noon"] [data-nsk-scope="alive"],
html[data-nsa-theme="morning"][data-nsk-scope="alive"],
html[data-nsa-theme="noon"][data-nsk-scope="alive"] {
--nsk-on-accent: #ffffff;
--nsk-accent-subtle: rgba(61, 78, 210, 0.10);
--nsk-err-bg: rgba(201, 61, 43, 0.10);
--nsk-info-bg: rgba(11, 122, 138, 0.10);
--nsk-shadow-sm: 0 1px 2px rgba(20, 27, 58, 0.10);
--nsk-shadow-md: 0 6px 18px rgba(20, 27, 58, 0.10);
--nsk-shadow-lg: 0 24px 70px rgba(20, 27, 58, 0.16);
--nsk-shadow-pop: 0 12px 34px rgba(20, 27, 58, 0.14);
}
/* ============================================================
* LAYER 1 — SHARED INVARIANTS (identical in both rooms;
* these are what make the estate feel like one product)
* ============================================================ */
:root {
/* spacing — 4px scale (mirrors --ns-space-*) */
--nsk-space-1: 0.25rem; /* 4px */
--nsk-space-2: 0.5rem; /* 8px */
--nsk-space-3: 0.75rem; /* 12px */
--nsk-space-4: 1rem; /* 16px */
--nsk-space-5: 1.5rem; /* 24px */
--nsk-space-6: 2rem; /* 32px */
--nsk-space-8: 3rem; /* 48px */
--nsk-space-10: 4rem; /* 64px */
--nsk-space-12: 6rem; /* 96px */
/* radius — controls sit at 8, actions and cards at 12, frames at 16 */
--nsk-radius-sm: 4px;
--nsk-radius-md: 8px;
--nsk-radius-lg: 12px;
--nsk-radius-xl: 16px;
--nsk-radius-hero: 18px;
--nsk-radius-full: 999px;
/* type ramp (sizes shared; faces come from the scope) */
--nsk-text-xs: 0.75rem; /* 12px */
--nsk-text-sm: 0.875rem; /* 14px */
--nsk-text-base: 1rem; /* 16px */
--nsk-text-lg: 1.25rem; /* 20px */
--nsk-text-xl: 1.5rem; /* 24px */
--nsk-text-2xl: 2rem; /* 32px */
--nsk-text-3xl: 3rem; /* 48px */
--nsk-leading-tight: 1.25;
--nsk-leading-normal: 1.5;
--nsk-leading-relaxed: 1.75;
/* the estate label idiom (kicker): small, uppercase, letterspaced, mono */
--nsk-label-size: 11px;
--nsk-label-tracking: 0.14em;
--nsk-label-weight: 600;
/* motion */
--nsk-motion-fast: 150ms ease;
--nsk-motion-base: 200ms ease;
--nsk-motion-slow: 300ms ease;
/* z scale */
--nsk-z-dropdown: 100;
--nsk-z-sticky: 200;
--nsk-z-modal: 300;
--nsk-z-popover: 400;
--nsk-z-tooltip: 500;
/* touch */
--nsk-touch: 44px;
}
/* ============================================================
* LAYER 2 — COMPONENTS
* Written once against --nsk-*; render native in either room.
* ============================================================ */
/* ---- Kicker — the one element that says "same product" everywhere ---- */
.nsk-kicker {
display: inline-flex;
align-items: center;
gap: var(--nsk-space-2);
font-family: var(--nsk-font-mono);
font-size: var(--nsk-label-size);
font-weight: var(--nsk-label-weight);
letter-spacing: var(--nsk-label-tracking);
text-transform: uppercase;
color: var(--nsk-faint);
}
/* ---- Card — a content unit (an agent, a plan, a listing) ---- */
.nsk-card {
display: flex;
flex-direction: column;
background: var(--nsk-surface);
border: 1px solid var(--nsk-bd);
border-radius: var(--nsk-radius-lg);
padding: var(--nsk-space-5);
color: var(--nsk-text);
}
.nsk-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--nsk-space-3);
margin-bottom: var(--nsk-space-4);
}
.nsk-card-title {
font-family: var(--nsk-font-display);
font-size: var(--nsk-text-base);
font-weight: 600;
line-height: var(--nsk-leading-tight);
color: var(--nsk-ink);
margin: 0;
}
.nsk-card-sub {
font-size: 13px;
color: var(--nsk-sub);
margin: 2px 0 0;
}
.nsk-card-body { flex: 1; }
.nsk-card-actions {
display: flex;
align-items: center;
gap: var(--nsk-space-2);
margin-top: var(--nsk-space-4);
flex-wrap: wrap;
}
/* clickable card (whole card is a door) */
a.nsk-card, .nsk-card-link {
text-decoration: none;
cursor: pointer;
transition: border-color var(--nsk-motion-fast), box-shadow var(--nsk-motion-fast), transform var(--nsk-motion-fast);
}
a.nsk-card:hover, .nsk-card-link:hover {
border-color: var(--nsk-bd-strong);
box-shadow: var(--nsk-shadow-md);
}
a.nsk-card:focus-visible, .nsk-card-link:focus-visible {
outline: 2px solid var(--nsk-focus);
outline-offset: 2px;
}
/* ---- Panel — a functional region (console section, cockpit block) ---- */
.nsk-panel {
background: var(--nsk-surface-2);
border: 1px solid var(--nsk-bd-soft);
border-radius: var(--nsk-radius-xl);
padding: var(--nsk-space-5);
color: var(--nsk-text);
}
.nsk-panel-title {
display: block;
font-family: var(--nsk-font-mono);
font-size: var(--nsk-label-size);
font-weight: var(--nsk-label-weight);
letter-spacing: var(--nsk-label-tracking);
text-transform: uppercase;
color: var(--nsk-faint);
margin: 0 0 var(--nsk-space-3);
}
.nsk-panel-inset {
background: var(--nsk-inset);
border: 1px solid var(--nsk-bd-soft);
border-radius: var(--nsk-radius-md);
padding: var(--nsk-space-3) var(--nsk-space-4);
}
/* ---- Nav — bar chrome + pill links ---- */
.nsk-nav {
display: flex;
align-items: center;
flex-wrap: wrap; /* the l6 law: pill rows wrap — never clip behind hidden scrollbars */
gap: var(--nsk-space-2) var(--nsk-space-3);
min-height: 56px;
padding: var(--nsk-space-2) var(--nsk-space-4);
background: var(--nsk-header);
border-bottom: 1px solid var(--nsk-bd-soft);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.nsk-nav-brand {
display: inline-flex;
align-items: center;
gap: var(--nsk-space-2);
font-family: var(--nsk-font-display);
font-size: 17px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--nsk-ink);
text-decoration: none;
white-space: nowrap;
}
.nsk-nav-brand em {
font-style: normal;
color: var(--nsk-accent);
}
.nsk-nav-pill {
display: inline-flex;
align-items: center;
gap: var(--nsk-space-2);
padding: var(--nsk-space-2) var(--nsk-space-3);
border-radius: var(--nsk-radius-md);
font-family: var(--nsk-font-body);
font-size: var(--nsk-text-sm);
font-weight: 500;
color: var(--nsk-sub);
text-decoration: none;
transition: background var(--nsk-motion-fast), color var(--nsk-motion-fast);
}
.nsk-nav-pill:hover {
background: var(--nsk-surface-2);
color: var(--nsk-ink);
}
.nsk-nav-pill[aria-current="page"],
.nsk-nav-pill.is-active {
background: var(--nsk-accent-subtle);
color: var(--nsk-accent);
font-weight: 600;
}
.nsk-nav-pill:focus-visible {
outline: 2px solid var(--nsk-focus);
outline-offset: 2px;
}
/* ---- Chip — a small stated fact (feature, count, status word) ---- */
.nsk-chip {
display: inline-flex;
align-items: center;
gap: var(--nsk-space-2);
min-height: 28px;
padding: 4px var(--nsk-space-3);
background: var(--nsk-chip-bg);
border: 1px solid var(--nsk-bd-soft);
border-radius: var(--nsk-radius-full);
font-family: var(--nsk-font-mono);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--nsk-sub);
white-space: nowrap;
}
.nsk-chip i, .nsk-chip svg { color: var(--nsk-faint); }
/* interactive chip (filter, toggle) */
button.nsk-chip, a.nsk-chip {
cursor: pointer;
text-decoration: none;
transition: border-color var(--nsk-motion-fast), color var(--nsk-motion-fast), background var(--nsk-motion-fast);
}
button.nsk-chip:hover, a.nsk-chip:hover {
border-color: var(--nsk-bd-strong);
color: var(--nsk-ink);
}
button.nsk-chip:focus-visible, a.nsk-chip:focus-visible {
outline: 2px solid var(--nsk-focus);
outline-offset: 2px;
}
.nsk-chip.is-active {
border-color: var(--nsk-accent);
color: var(--nsk-accent);
background: var(--nsk-accent-subtle);
}
/* live chip — the pulsing presence dot */
.nsk-chip-live { color: var(--nsk-ok); border-color: var(--nsk-bd); }
.nsk-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--nsk-ok);
flex: 0 0 auto;
animation: nsk-pulse 1.6s ease-in-out infinite;
}
.nsk-dot-static { animation: none; }
/* ---- CTA — one action voice across the estate ---- */
.nsk-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--nsk-space-2);
min-height: var(--nsk-touch);
padding: 0 var(--nsk-space-5);
border: 1px solid transparent;
border-radius: var(--nsk-radius-lg);
font-family: var(--nsk-font-body);
font-size: var(--nsk-text-sm);
font-weight: 600;
line-height: 1;
text-decoration: none;
cursor: pointer;
transition: background var(--nsk-motion-fast), border-color var(--nsk-motion-fast), color var(--nsk-motion-fast);
}
.nsk-cta:active { transform: scale(0.98); }
.nsk-cta:focus-visible {
outline: 2px solid var(--nsk-focus);
outline-offset: 2px;
}
.nsk-cta-primary {
background: var(--nsk-accent);
border-color: var(--nsk-accent);
color: var(--nsk-on-accent);
}
.nsk-cta-primary:hover {
background: var(--nsk-accent-hover);
border-color: var(--nsk-accent-hover);
color: var(--nsk-on-accent);
}
.nsk-cta-secondary {
background: var(--nsk-surface-2);
border-color: var(--nsk-bd);
color: var(--nsk-ink);
}
.nsk-cta-secondary:hover {
border-color: var(--nsk-bd-strong);
background: var(--nsk-float);
color: var(--nsk-ink);
}
.nsk-cta-ghost {
background: transparent;
color: var(--nsk-sub);
}
.nsk-cta-ghost:hover {
background: var(--nsk-surface-2);
color: var(--nsk-ink);
}
.nsk-cta-danger {
background: transparent;
border-color: var(--nsk-err);
color: var(--nsk-err);
}
.nsk-cta-danger:hover {
background: var(--nsk-err-bg);
}
.nsk-cta-sm { min-height: 36px; padding: 0 var(--nsk-space-4); font-size: 13px; }
.nsk-cta-lg { min-height: 52px; padding: 0 var(--nsk-space-6); font-size: var(--nsk-text-base); border-radius: var(--nsk-radius-lg); }
.nsk-cta-block { display: flex; width: 100%; }
.nsk-cta[disabled], .nsk-cta.is-disabled {
opacity: 0.5;
pointer-events: none;
}
/* ---- Form row — label, control, help, error ---- */
.nsk-form-row {
display: flex;
flex-direction: column;
gap: var(--nsk-space-2);
margin-bottom: var(--nsk-space-4);
}
.nsk-label {
font-family: var(--nsk-font-body);
font-size: 13px;
font-weight: 600;
color: var(--nsk-ink);
}
.nsk-label .nsk-optional {
font-weight: 400;
color: var(--nsk-faint);
font-size: 12px;
}
.nsk-input {
appearance: none;
width: 100%;
min-height: var(--nsk-touch);
padding: 10px var(--nsk-space-3);
background: var(--nsk-inset);
border: 1px solid var(--nsk-bd);
border-radius: var(--nsk-radius-md);
font-family: var(--nsk-font-body);
font-size: var(--nsk-text-sm);
color: var(--nsk-ink);
transition: border-color var(--nsk-motion-fast), box-shadow var(--nsk-motion-fast);
}
.nsk-input::placeholder { color: var(--nsk-faint); }
.nsk-input:focus {
outline: none;
border-color: var(--nsk-accent);
box-shadow: 0 0 0 3px var(--nsk-accent-subtle);
}
textarea.nsk-input { min-height: 96px; line-height: var(--nsk-leading-normal); resize: vertical; }
select.nsk-input {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%237C89B8' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 36px;
cursor: pointer;
}
.nsk-help {
font-size: var(--nsk-text-xs);
color: var(--nsk-faint);
margin: 0;
}
.nsk-input[aria-invalid="true"] { border-color: var(--nsk-err); }
.nsk-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--nsk-err-bg); }
.nsk-error-text {
font-size: var(--nsk-text-xs);
color: var(--nsk-err);
margin: 0;
}
/* ---- Avatar — an agent's presence, inline or framed ---- */
.nsk-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
border: 2px solid var(--nsk-bd);
background: var(--nsk-inset);
overflow: hidden;
flex: 0 0 auto;
position: relative;
}
.nsk-avatar img, .nsk-avatar svg, .nsk-avatar canvas {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.nsk-avatar-sm { width: 28px; height: 28px; border-width: 1.5px; }
.nsk-avatar-lg { width: 64px; height: 64px; }
.nsk-avatar-xl { width: 96px; height: 96px; }
/* the frame — a face presented as product (gallery, marketplace, cockpit) */
.nsk-avatar-frame {
position: relative;
display: block;
aspect-ratio: 1 / 1;
width: 100%;
background: var(--nsk-inset);
border: 1px solid var(--nsk-bd);
border-radius: var(--nsk-radius-xl);
overflow: hidden;
}
.nsk-avatar-frame img, .nsk-avatar-frame svg, .nsk-avatar-frame canvas, .nsk-avatar-frame iframe {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border: 0;
}
.nsk-avatar-frame .nsk-frame-tag {
position: absolute;
left: var(--nsk-space-2);
bottom: var(--nsk-space-2);
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 9px;
border-radius: var(--nsk-radius-md);
background: rgba(6, 10, 24, 0.62);
font-family: var(--nsk-font-mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #EAEFFF;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
/* ---- Badge — a status the product asserts (rendered honestly) ---- */
.nsk-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px var(--nsk-space-2);
border-radius: var(--nsk-radius-full);
border: 1px solid transparent;
font-family: var(--nsk-font-body);
font-size: var(--nsk-text-xs);
font-weight: 600;
line-height: 1.4;
white-space: nowrap;
}
.nsk-badge-ok { background: var(--nsk-ok-bg); color: var(--nsk-ok); }
.nsk-badge-warn { background: var(--nsk-warn-bg); color: var(--nsk-warn); }
.nsk-badge-err { background: var(--nsk-err-bg); color: var(--nsk-err); }
.nsk-badge-info { background: var(--nsk-info-bg); color: var(--nsk-info); }
.nsk-badge-neutral { background: var(--nsk-surface-2); color: var(--nsk-sub); }
/* honest runtime states — cockpit / admin / marketplace */
.nsk-badge-live { background: var(--nsk-ok-bg); color: var(--nsk-ok); }
.nsk-badge-live .nsk-dot { width: 6px; height: 6px; }
.nsk-badge-dark { background: var(--nsk-surface-2); color: var(--nsk-faint); }
.nsk-badge-off { background: transparent; border-color: var(--nsk-bd); color: var(--nsk-faint); }
.nsk-badge-sample { background: transparent; border-color: var(--nsk-warn); color: var(--nsk-warn); }
.nsk-badge-beta { background: var(--nsk-accent-subtle); color: var(--nsk-accent); }
/* ---- Note — an inline message surface (info/ok/warn/err) ---- */
.nsk-note {
display: flex;
align-items: flex-start;
gap: var(--nsk-space-3);
padding: var(--nsk-space-3) var(--nsk-space-4);
border: 1px solid var(--nsk-bd);
border-radius: var(--nsk-radius-md);
background: var(--nsk-inset);
font-size: var(--nsk-text-sm);
color: var(--nsk-text);
}
.nsk-note-ok { background: var(--nsk-ok-bg); border-color: var(--nsk-ok); color: var(--nsk-ok); }
.nsk-note-warn { background: var(--nsk-warn-bg); border-color: var(--nsk-warn); color: var(--nsk-warn); }
.nsk-note-err { background: var(--nsk-err-bg); border-color: var(--nsk-err); color: var(--nsk-err); }
.nsk-note-info { background: var(--nsk-info-bg); border-color: var(--nsk-info); color: var(--nsk-info); }
/* ============================================================
* LAYER 3 — STATES
* ============================================================ */
/* loading */
.nsk-spinner {
width: 32px;
height: 32px;
border: 3px solid var(--nsk-bd);
border-top-color: var(--nsk-accent);
border-radius: 50%;
animation: nsk-spin 0.8s linear infinite;
}
.nsk-spinner-sm { width: 16px; height: 16px; border-width: 2px; }
.nsk-skeleton {
background: var(--nsk-surface-2);
border-radius: var(--nsk-radius-sm);
animation: nsk-breathe 1.4s ease-in-out infinite;
color: transparent;
user-select: none;
}
/* empty */
.nsk-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--nsk-space-2);
padding: var(--nsk-space-8) var(--nsk-space-4);
text-align: center;
}
.nsk-empty-icon { font-size: 2.5rem; color: var(--nsk-faint); opacity: 0.5; }
.nsk-empty-title {
font-family: var(--nsk-font-display);
font-size: var(--nsk-text-lg);
font-weight: 600;
color: var(--nsk-sub);
margin: 0;
}
.nsk-empty-text {
font-size: var(--nsk-text-sm);
color: var(--nsk-faint);
max-width: 520px;
margin: 0;
}
.nsk-empty-actions { display: flex; gap: var(--nsk-space-2); margin-top: var(--nsk-space-3); flex-wrap: wrap; justify-content: center; }
/* section rhythm — page-level breathing */
.nsk-section { padding: var(--nsk-space-8) var(--nsk-space-4); }
.nsk-section-band { background: var(--nsk-band); }
@media (min-width: 768px) {
.nsk-section { padding: var(--nsk-space-10) var(--nsk-space-5); }
}
/* keyframes — namespaced; never collide with page-owned "pulse"/"ns-spin" */
@keyframes nsk-spin { to { transform: rotate(360deg); } }
@keyframes nsk-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.45; transform: scale(0.8); }
}
@keyframes nsk-breathe {
0%, 100% { opacity: 1; }
50% { opacity: 0.55; }
}
/* motion respect — the kit never animates for a visitor who asked it not to */
@media (prefers-reduced-motion: reduce) {
.nsk-dot, .nsk-badge-live .nsk-dot { animation: none; }
.nsk-skeleton { animation: none; opacity: 0.8; }
.nsk-cta:active { transform: none; }
}
/* 375-first guard — cards and sections tighten on small phones */
@media (max-width: 479px) {
.nsk-card { padding: var(--nsk-space-4); }
.nsk-panel { padding: var(--nsk-space-4); }
.nsk-section { padding: var(--nsk-space-6) var(--nsk-space-4); }
}