/* GENERATED by assets/sync_ds.sh from nullstate-ds 0.6.2 (3988f11) src/styles/nullstate.css. Do not edit; re-run the script. */
/* nullstate-ds 0.6.2 component styles (Phase Ø v4 + the v0.6 fleet shell).
   Crimson deployment law: crimson is a PLANE (one solid block per view) or a
   POINT (5px square, section number, focus ring). Never a gradient, never a tint.
   v4 surface states — presence, not elevation: s0 void (the flat field) ·
   s1 trace (declared, not real) · s2 plane (the default; pins mean pinned) ·
   s3 float (glass, earned only by real overlap; unpinned) · live (a condition,
   not a level: texture means power). One thing flies at a time. */

/* ── root ── */
.ns-root {
  background: var(--ns-bg);
  color: var(--ns-white);
  font-family: var(--ns-font-mono);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* .ns-root--grid retired in v4 — the void has no gridlines. The class is
   inert; consumers may leave it in markup, the field stays flat. */
.ns-root--solid { /* in-app "solid surfaces" setting — forces the S3 fallback recipe */ }
.ns-root *, .ns-root *::before, .ns-root *::after { box-sizing: border-box; }
.ns-root ::selection { background: var(--ns-crimson); color: var(--ns-ink); }

/* ── frame: max-width 1060, 32px gutters ── */
.ns-frame { max-width: 1060px; margin: 0 auto; padding: 0 32px; }

/* ── section label: 9px tracked caps + 5px crimson square ── */
.ns-label {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--ns-font-mono);
  font-size: 9px; font-weight: 400;
  letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--ns-dimmer);
}
.ns-label::before { content: ''; width: 5px; height: 5px; background: var(--ns-crimson); flex: none; }
.ns-label__num { color: var(--ns-crimson); }

/* ── status square: the 5px POINT ── */
.ns-status { display: inline-block; width: 5px; height: 5px; background: var(--ns-line-2); transition: background 200ms var(--ns-ease); }
.ns-status--active { background: var(--ns-crimson); }
.ns-status--blink { animation: ns-blink 1s steps(1) 5; } /* v4: blink ≤5s after a state change, then hold (WCAG 2.2.2) */
@keyframes ns-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ── display type: Söhne Breit declarations — wide by drawing, weight is the only axis ── */
.ns-display {
  font-family: var(--ns-font-display);
  text-transform: uppercase;
  color: var(--ns-white);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.02;
}
.ns-display--statement { font-size: 72px; font-weight: 900; }
.ns-display--title { font-size: 24px; font-weight: 700; line-height: 1.15; }

/* ── wordmark: null (Mono 400 white) + state (Mono 700 crimson), no space — law amended 2026-08-15 ── */
.ns-wordmark { font-family: var(--ns-font-mono); display: inline-flex; white-space: nowrap; line-height: 1; }
.ns-wordmark__null { font-weight: 400; color: var(--ns-white); }
.ns-wordmark__state { font-weight: 700; color: var(--ns-crimson); }

/* ── button: tiny tracked caps, 1px border; fills only primary/destructive ── */
.ns-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--ns-font-mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
  background: transparent; color: var(--ns-white);
  border: 1px solid var(--ns-line-2);
  border-radius: var(--ns-radius-control);   /* v0.6: controls on Apple's scale */
  padding: 12px 22px 11px;
  cursor: pointer;
  transition: color 200ms var(--ns-ease), border-color 200ms var(--ns-ease), background 200ms var(--ns-ease), box-shadow 200ms var(--ns-ease);
}
.ns-button:hover { color: var(--ns-crimson); border-color: var(--ns-crimson); }
.ns-button:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--ns-crimson); }
.ns-button--sm { height: 24px; padding: 0 14px; font-size: 9px; }   /* v0.6.2: regular control height */
.ns-button--primary,
.ns-button--destructive {
  background: var(--ns-crimson); color: var(--ns-ink);
  border-color: var(--ns-crimson); font-weight: 700;
}
.ns-button--primary:hover,
.ns-button--destructive:hover {
  background: var(--ns-crimson-deep); border-color: var(--ns-crimson-deep); color: var(--ns-ink);
  box-shadow: 0 0 18px rgba(200, 16, 46, 0.35);
}
/* cream on crimson: a permitted label colour for a filled button (2026-10-03).
   Ink is the default; cream reads better on small tracked labels
   (5.2:1 against ink's 3.2:1). Same plane, same law — pick one per app. */
.ns-button--cream.ns-button--primary,
.ns-button--cream.ns-button--destructive,
.ns-button--cream.ns-button--primary:hover,
.ns-button--cream.ns-button--destructive:hover { color: var(--ns-white); }
.ns-button:disabled {
  color: var(--ns-dimmer); border-color: var(--ns-line); background: transparent;
  cursor: not-allowed; box-shadow: none;
}

/* ── card: surface, 1px border, tracked caption top-left, status square top-right ── */
.ns-card {
  position: relative;
  background: var(--ns-surface);
  border: 1px solid var(--ns-line);
  border-radius: 0;
  padding: 44px 24px 24px;
  transition: border-color 200ms var(--ns-ease);
}
.ns-card:hover { border-color: var(--ns-line-2); }
.ns-card:hover > .ns-card__status { background: var(--ns-crimson); }
.ns-card__caption {
  position: absolute; top: 16px; left: 24px;
  font-size: 8px; font-weight: 400;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ns-dimmer);
}
.ns-card__status { position: absolute; top: 16px; right: 16px; }
.ns-card__title {
  font-family: var(--ns-font-display);
  font-size: 21px; font-weight: 700;
  text-transform: uppercase; letter-spacing: -0.01em;
  margin: 0 0 10px; color: var(--ns-white);
}
.ns-card__body { color: var(--ns-dim); font-size: 13px; }

/* ── input: surface, 1px border, no rounding, crimson focus ── */
.ns-field { display: flex; flex-direction: column; gap: 8px; }
.ns-field__label {
  font-size: 9px; font-weight: 400;
  letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--ns-dimmer);
}
.ns-input {
  font-family: var(--ns-font-mono);
  font-size: 13px; color: var(--ns-white);
  background: var(--ns-surface);
  border: 1px solid var(--ns-line);
  border-radius: var(--ns-radius-control);
  padding: 11px 14px;
  width: 100%;
  transition: border-color 200ms var(--ns-ease), box-shadow 200ms var(--ns-ease);
}
.ns-input::placeholder { color: var(--ns-dimmer); }
.ns-input:hover { border-color: var(--ns-line-2); }
.ns-input:focus { outline: none; border-color: var(--ns-crimson); box-shadow: 0 0 0 1px var(--ns-crimson); }
.ns-input:disabled { color: var(--ns-dimmer); background: var(--ns-bg); cursor: not-allowed; }
.ns-input--error { border-color: var(--ns-crimson); }
.ns-field__error { font-size: 11px; color: var(--ns-crimson); }
textarea.ns-input { resize: vertical; min-height: 96px; }

/* ── section: 72px vertical padding, 1px bottom border ── */
.ns-section { padding: 72px 0; border-bottom: 1px solid var(--ns-line); }
.ns-section__head { margin-bottom: 32px; }
.ns-section__title {
  font-family: var(--ns-font-display);
  font-size: 40px; font-weight: 700;
  text-transform: uppercase; letter-spacing: -0.01em;
  margin: 18px 0 0; color: var(--ns-white); line-height: 1.05;
}
.ns-section__intro { max-width: 640px; color: var(--ns-dim); margin: 14px 0 0; font-size: 13px; }

/* ── divider ── */
.ns-divider { border: none; border-top: 1px solid var(--ns-line); margin: 0; }
.ns-divider--strong { border-top-color: var(--ns-line-2); }

/* ── chip: tracked caps, 2px rounding ── */
.ns-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--ns-dim);
  border: 1px solid var(--ns-line-2);
  border-radius: var(--ns-radius-chip);
  padding: 5px 10px 4px;
}
.ns-chip--crimson { color: var(--ns-crimson); border-color: var(--ns-crimson); }
.ns-chip__dot { width: 5px; height: 5px; flex: none; background: currentColor; }

/* ── grid: 1px-gap grids on line color ── */
.ns-grid { display: grid; gap: 1px; background: var(--ns-line); border: 1px solid var(--ns-line); }
.ns-grid > * { background: var(--ns-bg); }

/* ── mark ── */
.ns-mark { display: inline-block; vertical-align: middle; }

/* ══ v4 · surface states ══════════════════════════════════════════════════
   s2 plane is the default working surface. Pins (registration crosses) mark
   surfaces at rest, only on planes sitting directly on the void — nested
   planes take .ns-nopin. s3 float is earned by real overlap (sticky bars,
   overlays); it carries cream-only text and no pins. live is a modifier. */

/* ── s2 · plane (pins shared with .ns-card) ── */
.ns-panel {
  position: relative;
  background: var(--ns-surface);
  border: 1px solid var(--ns-line);
  border-radius: 0;
  transition: border-color 200ms var(--ns-ease);
}
.ns-panel:hover { border-color: var(--ns-line-2); }
.ns-panel::before, .ns-panel::after,
.ns-card::before, .ns-card::after {
  content: '';
  position: absolute; width: 9px; height: 9px;
  background:
    linear-gradient(var(--ns-dim), var(--ns-dim)) 4px 0 / 1px 9px no-repeat,
    linear-gradient(var(--ns-dim), var(--ns-dim)) 0 4px / 9px 1px no-repeat;
  opacity: 0.55; pointer-events: none;
  transition: opacity 200ms var(--ns-ease);
}
.ns-panel::before, .ns-card::before { top: -5px; left: -5px; }
.ns-panel::after,  .ns-card::after  { bottom: -5px; right: -5px; }
.ns-panel:hover::before, .ns-panel:hover::after,
.ns-card:hover::before,  .ns-card:hover::after  { opacity: 1; }
.ns-nopin::before, .ns-nopin::after { display: none; }

/* ── s1 · trace — declared, not yet real ── */
.ns-panel--trace {
  background: transparent;
  border-color: rgba(242, 242, 242, 0.14);
}
.ns-panel--trace::before, .ns-panel--trace::after {
  width: 10px; height: 10px; background: none; opacity: 1;
}
.ns-panel--trace::before { border-top: 1px solid rgba(242, 242, 242, 0.5); border-left: 1px solid rgba(242, 242, 242, 0.5); top: -1px; left: -1px; }
.ns-panel--trace::after  { border-bottom: 1px solid rgba(242, 242, 242, 0.5); border-right: 1px solid rgba(242, 242, 242, 0.5); bottom: -1px; right: -1px; }
.ns-panel--trace.is-armed,
.ns-panel--trace:focus-visible { border-color: rgba(242, 242, 242, 0.5); outline: none; }

/* ── s3 · float — glass, earned by overlap; unpinned; cream text only ── */
.ns-panel--float {
  background: var(--ns-glass);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
  border-color: rgba(242, 242, 242, 0.08);
  box-shadow: inset 0 1px 0 rgba(242, 242, 242, 0.05);
}
.ns-panel--float::before, .ns-panel--float::after { display: none; }
.ns-panel--float.ns-ephemeral,           /* menus/toasts above another float */
.ns-panel--float.is-frozen {             /* "one thing flies at a time" */
  background: var(--ns-glass-solid);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ── the bar: s0 at rest, lifts to s3 once content passes beneath.
   Toggle .is-lifted at a scroll threshold (~8px); never bind blur to scrollTop. ── */
.ns-bar {
  position: sticky; top: 0; z-index: 5;
  background: var(--ns-bg);
  border-bottom: 1px solid var(--ns-line);
  transition: background-color 200ms var(--ns-ease), border-color 200ms var(--ns-ease), box-shadow 200ms var(--ns-ease);
}
.ns-bar.is-lifted {
  background: var(--ns-glass);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
  border-bottom-color: rgba(242, 242, 242, 0.08);
  box-shadow: inset 0 1px 0 rgba(242, 242, 242, 0.05);
}
.ns-bar.is-frozen { -webkit-backdrop-filter: none; backdrop-filter: none; }
.ns-bar.is-lifted.is-frozen { background: var(--ns-glass-solid); }

/* ── scrim (never blurred) ── */
.ns-scrim { position: fixed; inset: 0; z-index: 20; background: var(--ns-scrim); }

/* ── live · the powered state — texture means power ── */
.ns-panel--live .ns-live-body,
.ns-live-body {
  background: repeating-linear-gradient(0deg, rgba(242, 242, 242, 0.028) 0 1px, transparent 1px 3px);
}
.ns-panel--live .ns-live-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--ns-line);
  font-size: 9px; letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--ns-dim-2);
}

/* ══ v0.5 · desktop widgets — Black Glass ════════════════════════════════
   A widget sits on the user's wallpaper. While the desktop has focus it is a
   solid plane; when the desktop loses focus (an app window is in front) it
   turns to glass: blurred, lit along its top and bottom edges, cream-only.
   Put .is-defocused on the .ns-desktop container (or .is-glass on one widget).
   Widgets are the one exception to the ≤2-glass budget.
   Glass density is set per widget by widgetGlassFill() (src/glass.ts): it
   starts at --ns-widget-glass and darkens until dim text holds 4.5:1 against
   the brightest 15% of the wallpaper behind it. Write the result to the
   widget's --ns-widget-fill. Square chips inside keep their 2–4px; the
   widget itself is --ns-radius-widget (26, Apple's). Crimson is one point per widget and turns cream on glass. */
.ns-widget {
  --ns-widget-fill: var(--ns-widget-glass);
  --ns-w-dim: var(--ns-dim-2);
  --ns-w-accent: var(--ns-crimson);
  --ns-w-rule: var(--ns-line-2);
  --ns-w-cols: 1; --ns-w-rows: 1;
  position: relative;
  width: calc(var(--ns-w-cols) * var(--ns-widget-slot) + (var(--ns-w-cols) - 1) * var(--ns-widget-gap));
  height: calc(var(--ns-w-rows) * var(--ns-widget-slot) + (var(--ns-w-rows) - 1) * var(--ns-widget-gap));
  padding: 16px 16px 14px;
  display: flex; flex-direction: column;
  border-radius: var(--ns-widget-radius);
  overflow: hidden;
  color: var(--ns-white);
  background: var(--ns-glass-solid);
  -webkit-backdrop-filter: blur(var(--ns-widget-blur)) saturate(var(--ns-widget-saturate));
  backdrop-filter: blur(var(--ns-widget-blur)) saturate(var(--ns-widget-saturate));
  box-shadow: inset 0 0 0 1px var(--ns-line-2), inset 0 1px 0 rgba(242, 242, 242, 0.10);
  transition: background-color 500ms var(--ns-ease), box-shadow 500ms var(--ns-ease);
}
.ns-widget:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--ns-line-2), 0 0 0 2px var(--ns-crimson); }
/* rim: bright at the top, a little less at the bottom, faint along the sides */
.ns-widget::before, .ns-widget::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0; transition: opacity 500ms var(--ns-ease);
}
.ns-widget::before {
  padding: 1px;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, var(--ns-widget-rim-top)) 0%, rgba(255, 255, 255, 0.16) 12%,
    rgba(255, 255, 255, 0.05) 40%, rgba(255, 255, 255, 0.05) 60%,
    rgba(255, 255, 255, 0.14) 88%, rgba(255, 255, 255, var(--ns-widget-rim-bottom)) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* thickness: a soft glow just inside the top and bottom edges */
.ns-widget::after {
  background:
    radial-gradient(120% 40% at 50% -8%, rgba(255, 255, 255, 0.16), transparent 62%),
    radial-gradient(120% 34% at 50% 108%, rgba(255, 255, 255, 0.09), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 16%, transparent 84%, rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 12px 16px -14px rgba(255, 255, 255, 0.55), inset 0 -12px 16px -14px rgba(255, 255, 255, 0.32);
}
.ns-desktop.is-defocused .ns-widget,
.ns-widget.is-glass {
  background: var(--ns-widget-fill);
  box-shadow: inset 0 0 0 1px rgba(242, 242, 242, 0);
  --ns-w-dim: var(--ns-widget-dim-glass);
  --ns-w-accent: var(--ns-white);
  --ns-w-rule: rgba(242, 242, 242, 0.16);
}
.ns-desktop.is-defocused .ns-widget::before, .ns-desktop.is-defocused .ns-widget::after,
.ns-widget.is-glass::before, .ns-widget.is-glass::after { opacity: 1; }
.ns-widget > * { position: relative; z-index: 1; }   /* content above the rim layers */

/* sizes in slots: .ns-widget--2x1 is two slots wide, one tall */
.ns-widget--1x1 { --ns-w-cols: 1; --ns-w-rows: 1; }
.ns-widget--2x1 { --ns-w-cols: 2; --ns-w-rows: 1; }
.ns-widget--1x2 { --ns-w-cols: 1; --ns-w-rows: 2; }
.ns-widget--2x2 { --ns-w-cols: 2; --ns-w-rows: 2; }
.ns-widget--2x3 { --ns-w-cols: 2; --ns-w-rows: 3; }
.ns-widget--4x2 { --ns-w-cols: 4; --ns-w-rows: 2; }

/* widget content helpers: they follow the solid → glass switch */
.ns-widget__label { font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ns-w-dim); transition: color 500ms var(--ns-ease); }
.ns-widget__dim   { color: var(--ns-w-dim); transition: color 500ms var(--ns-ease); }
.ns-widget__point { display: inline-block; width: 5px; height: 5px; flex: none; background: var(--ns-w-accent); transition: background-color 500ms var(--ns-ease); }
.ns-widget__rule  { height: 1px; background: var(--ns-w-rule); transition: background-color 500ms var(--ns-ease); }

/* the desktop grid and its drop target (an s1 trace) */
.ns-desktop { display: grid; grid-auto-flow: dense; gap: var(--ns-widget-gap);
  grid-template-columns: repeat(auto-fill, var(--ns-widget-slot)); grid-auto-rows: var(--ns-widget-slot); }
.ns-desktop > .ns-widget { grid-column: span var(--ns-w-cols); grid-row: span var(--ns-w-rows); width: auto; height: auto; }
.ns-widget-slot {
  border-radius: var(--ns-widget-radius);
  border: 1px dashed rgba(242, 242, 242, 0.5);
  background: rgba(242, 242, 242, 0.06);
  pointer-events: none;
}
.ns-widget-slot.is-blocked { border-color: rgba(200, 16, 46, 0.8); background: rgba(200, 16, 46, 0.08); }

/* ══ v0.6 · fleet shell — Black Glass surfaces on Apple's radius scale ══════
   docs/guides/fleet-shell.md. "Widget" means WidgetKit only; these are the app's own surfaces.
   Radii: window 16 · popover/panel 20 · widget-style card 26 · control 6 · chip 3. Nested = concentric. */
.ns-window {
  --ns-pad: 16px;
  position: relative; overflow: hidden;
  border-radius: var(--ns-radius-window);
  background: var(--ns-bg);
  box-shadow: inset 0 0 0 1px rgba(242, 242, 242, 0.20), 0 0 1px rgba(0, 0, 0, 0.8), 0 16px 33px rgba(0, 0, 0, 0.4);
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
}
.ns-toolbar {
  grid-column: 2; grid-row: 1; height: var(--ns-toolbar-h);
  display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 16px;
  border-bottom: 1px solid var(--ns-line);
}
.ns-sidebar {                       /* flush, full height (Apple macOS 27): the traffic lights sit in its top band */
  grid-column: 1; grid-row: 1 / -1;
  width: var(--ns-sidebar-w); min-width: 0; padding: var(--ns-toolbar-h) 14px 16px;
  background: var(--ns-glass);
  -webkit-backdrop-filter: blur(30px) saturate(130%); backdrop-filter: blur(30px) saturate(130%);
  border-right: 1px solid rgba(242, 242, 242, 0.06);
  display: flex; flex-direction: column; gap: 0;
}
.ns-sidebar__item {                  /* medium row 32; the selection sits 10 pt from the sidebar edge */
  display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 10px; margin: 0 -4px;
  border-radius: var(--ns-radius-selection); color: var(--ns-white); font-size: 12px;
}
.ns-sidebar--large .ns-sidebar__item { min-height: 40px; }
.ns-sidebar__item[aria-current="true"], .ns-sidebar__item.is-selected {
  background: var(--ns-line-2); box-shadow: inset 0 0 0 1px rgba(138, 138, 148, 0.5);
}
.ns-sidebar__header { min-height: 18px; padding: 14px 6px 4px; font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ns-dim-2); }
.ns-content { grid-column: 2; grid-row: 2; min-width: 0; overflow: auto; padding: var(--ns-pad); }
.ns-window--plain { grid-template-columns: minmax(0, 1fr); }   /* a window without a sidebar */
.ns-window--plain .ns-toolbar { grid-column: 1; padding-left: 96px; }   /* clears the lights: 18 + 68 + 10 */
.ns-window--plain .ns-content { grid-column: 1; }

/* menu-bar popover, floating panel, mini window, quick entry: the 20 pt glass family */
.ns-popover, .ns-floating, .ns-mini, .ns-quick {
  position: relative; overflow: hidden;
  border-radius: var(--ns-radius-popover);
  background: var(--ns-glass);
  -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 0 0 0.5px rgba(171, 171, 171, 0.6), 0 4px 16px rgba(0, 0, 0, 0.25),
              inset 0 2px 0.2px -1.2px rgba(255, 255, 255, 0.2),
              inset 0 6px 4px -6px rgba(255, 255, 255, 0.10), inset 0 -6px 4px -6px rgba(255, 255, 255, 0.06);
  color: var(--ns-white);
}
.ns-popover { width: 344px; }                       /* the widget/notification column; menu-bar popovers have no arrow */
.ns-quick { width: 560px; max-width: 100%; }
.ns-popover__head, .ns-floating__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: 40px; padding: 0 12px 0 16px; border-bottom: 1px solid rgba(242, 242, 242, 0.08);
}
.ns-floating__bar { cursor: grab; user-select: none; }
.ns-floating__controls { display: flex; gap: 4px; }
.ns-floating__controls button {
  width: 24px; height: 24px; display: grid; place-items: center; border: 0; background: transparent;
  border-radius: calc(var(--ns-radius-popover) - 12px); color: rgba(242, 242, 242, 0.7); cursor: pointer;
}
.ns-floating__controls button:hover { background: rgba(242, 242, 242, 0.08); color: var(--ns-white); }
.ns-floating__controls button[aria-pressed="true"] { color: var(--ns-white); background: var(--ns-line-2); }
.ns-popover__body, .ns-floating__body { padding: 12px; }   /* 12 all round: inner cards are 20 - 12 = 8 */
.ns-popover__foot { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid rgba(242, 242, 242, 0.08); }

/* widget-style card on the void, and the concentric card inside a 20 pt surface */
.ns-card--glass { border-radius: var(--ns-radius-widget); background: var(--ns-glass-solid); box-shadow: inset 0 0 0 1px var(--ns-line-2); }
/* inset well (v0.6.2, from nullsessions): a darker well with a faint rim keeps dim text ≥ 4.5:1 over glass */
.ns-popover .ns-card--inset, .ns-floating .ns-card--inset, .ns-mini .ns-card--inset {
  border-radius: calc(var(--ns-radius-popover) - 12px);
  background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1px rgba(242, 242, 242, 0.08);
}

/* controls on the scale */
.ns-control { border-radius: var(--ns-radius-control); }
.ns-toolbar > button, .ns-toolbar > .ns-control, .ns-toolbar__group > button { height: 28px; border-radius: 999px; }   /* direct toolbar controls are capsules */
.ns-toolbar__group { height: 36px; padding: 4px; border-radius: 999px; background: var(--ns-glass); display: flex; gap: 4px; align-items: center; }
.ns-sheet { border-radius: var(--ns-radius-window); background: var(--ns-glass-solid); box-shadow: inset 0 0 0 1px rgba(242, 242, 242, 0.2), 0 16px 33px rgba(0, 0, 0, 0.4); }

/* ── v0.6.2 · app scope: put .ns-app on an app's root to give the library's older
   editorial components (Phase Ø squares and pins) their app-surface shapes. ── */
.ns-app .ns-panel, .ns-app .ns-card { border-radius: var(--ns-radius-card); }
.ns-app .ns-panel::before, .ns-app .ns-panel::after,
.ns-app .ns-card::before, .ns-app .ns-card::after { display: none; }   /* pins are editorial only */
.ns-app .ns-label::before { background: var(--ns-dim-2); }          /* section labels: dim square; crimson is the surface's one point */
.ns-app .ns-label--point::before { background: var(--ns-crimson); }  /* the one labelled point, when a label is it */

/* ── fallback ladder: no backdrop-filter · reduced transparency · the
   in-app "solid surfaces" setting. All land on the same opaque recipe. ── */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .ns-panel--float, .ns-bar.is-lifted,
  .ns-desktop.is-defocused .ns-widget, .ns-widget.is-glass,
  .ns-sidebar, .ns-popover, .ns-floating, .ns-mini, .ns-quick { background: var(--ns-glass-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  .ns-panel--float, .ns-bar.is-lifted,
  .ns-desktop.is-defocused .ns-widget, .ns-widget.is-glass,
  .ns-sidebar, .ns-popover, .ns-floating, .ns-mini, .ns-quick {
    background: var(--ns-glass-solid);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
.ns-root--solid .ns-panel--float,
.ns-root--solid .ns-bar.is-lifted,
.ns-root--solid .ns-widget,
.ns-root--solid .ns-sidebar, .ns-root--solid .ns-popover, .ns-root--solid .ns-floating,
.ns-root--solid .ns-mini, .ns-root--solid .ns-quick {
  background: var(--ns-glass-solid);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* scanline moiré guard at fractional display scaling */
@media (min-resolution: 1.1dppx) and (max-resolution: 1.9dppx) {
  .ns-panel--live .ns-live-body, .ns-live-body {
    background: repeating-linear-gradient(0deg, rgba(242, 242, 242, 0.028) 0 1px, transparent 1px 4px);
  }
}

@media (prefers-contrast: more) {
  .ns-panel, .ns-card, .ns-grid { border-color: rgba(242, 242, 242, 0.35); }
  .ns-card__body, .ns-section__intro { color: #9a9aa2; }
}

@media print {
  .ns-root { background: #fff; color: #111; }
  .ns-panel, .ns-card { background: #fff; border-color: #ccc; }
  .ns-panel::before, .ns-panel::after,
  .ns-card::before, .ns-card::after { display: none; }
  .ns-live-body, .ns-panel--live .ns-live-body { background: none; }
  .ns-panel--float, .ns-bar, .ns-widget { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .ns-widget::before, .ns-widget::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ns-status--blink { animation: none; }
  .ns-root * { transition-duration: 0ms !important; }
}