/* NUX — component styles. Every colour, length and radius is a token from tokens.css. */

a.nux-link, .nux-prose a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
small { font-size: 11px; line-height: 16px; }
body { margin: 0; font-family: var(--font-sans); background: var(--surface); color: var(--ink); -webkit-font-smoothing: antialiased; }

/* Preview helpers */
.nux-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding: var(--space-4); }
.nux-stack { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); }
.nux-fields { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); max-width: 420px; }

/* Focus — the same ring on every control */
.nux-btn:focus-visible, .nux-input:focus-visible, .nux-toggle:focus-visible, .nux-seg button:focus-visible, .nux-nav a:focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: 2px;
}

/* ---------- Button ---------- */
.nux-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font: inherit; font-size: var(--text-control, 15px); line-height: var(--leading-control, 20px); font-weight: 500;
  height: var(--control, 40px); padding: 0 var(--space-4); border-radius: var(--control-radius, var(--radius-md));
  border: 1px solid transparent; background: transparent; color: var(--ink);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background-color var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}
.nux-btn:active { opacity: .85; }
.nux-btn:disabled { opacity: .4; cursor: not-allowed; }
.nux-btn-primary { background: var(--accent); color: var(--on-accent); }
.nux-btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.nux-btn-secondary { border-color: var(--border-strong); background: var(--surface-raised); color: var(--ink); }
.nux-btn-secondary:hover:not(:disabled) { background: var(--surface-secondary); }
.nux-btn-tertiary { color: var(--accent); }
.nux-btn-tertiary:hover:not(:disabled) { background: var(--accent-soft); }
.nux-btn-danger { background: var(--danger); color: var(--on-danger); }
.nux-btn-danger:hover:not(:disabled) { background: var(--danger-hover); }
.nux-btn-sm { height: var(--control-sm, 32px); padding: 0 var(--space-3); font-size: 13px; line-height: 18px; border-radius: var(--radius-sm); }
.nux-btn-lg { height: 48px; padding: 0 var(--space-5); font-size: 17px; line-height: 25px; }
.nux-btn-pill { border-radius: var(--radius-pill); }

/* ---------- Input ---------- */
.nux-field { display: flex; flex-direction: column; gap: var(--space-2); }
.nux-label { font-size: var(--text-control, 15px); line-height: var(--leading-control, 20px); font-weight: 500; color: var(--ink); }
.nux-input {
  font: inherit; font-size: var(--text-control, 15px); line-height: var(--leading-control, 20px); color: var(--ink);
  height: var(--control, 40px); padding: 0 var(--space-3); border-radius: var(--control-radius, var(--radius-md));
  border: 1px solid var(--border-strong); background: var(--surface-raised); width: 100%; box-sizing: border-box;
  transition: border-color var(--duration-fast);
}
.nux-input::placeholder { color: var(--ink-secondary); }
.nux-input:hover { border-color: var(--ink); }
.nux-input:focus { border-color: var(--accent); }
.nux-input:disabled { opacity: .4; cursor: not-allowed; }
.nux-field-error .nux-input { border-color: var(--danger); }
.nux-help { font-size: var(--text-meta, 13px); line-height: var(--leading-meta, 18px); color: var(--ink-secondary); margin-top: calc(var(--space-1) - var(--space-2)); }
.nux-field-error .nux-help { color: var(--danger); }

/* ---------- Card ---------- */
.nux-card {
  background: var(--surface-raised); border-radius: var(--radius-lg); padding: var(--space-5);
  border: 1px solid var(--separator); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.nux-card-title { margin: 0; font-size: 19px; line-height: 24px; font-weight: 600; letter-spacing: -0.005em; }
.nux-card-body { margin: 0; font-size: 15px; line-height: 20px; color: var(--ink-secondary); }
.nux-card-actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); }

/* ---------- Badge ---------- */
.nux-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.01em;
  padding: var(--badge-pad-y, var(--space-1)) var(--space-2); border-radius: var(--radius-sm);
  background: var(--surface-secondary); color: var(--ink);
}
.nux-badge-accent { background: var(--accent-soft); color: var(--accent); }
.nux-badge-success { background: var(--success-soft); color: var(--success); }
.nux-badge-warning { background: var(--warning-soft); color: var(--warning); }
.nux-badge-danger { background: var(--danger-soft); color: var(--danger); }
.nux-badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; }

/* ---------- Toggle ---------- */
.nux-switch { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--text-control, 15px); line-height: var(--leading-control, 20px); cursor: pointer; }
.nux-toggle {
  appearance: none; -webkit-appearance: none; margin: 0; position: relative; flex: none;
  width: var(--toggle-w, 51px); height: var(--toggle-h, 31px); border-radius: var(--radius-pill);
  background: var(--surface-secondary); border: 1px solid var(--border-strong); cursor: pointer;
  transition: background-color var(--duration-base), border-color var(--duration-base);
}
.nux-toggle::after {
  content: ""; position: absolute; top: calc((var(--toggle-h, 31px) - 2px - var(--toggle-thumb, 25px)) / 2); left: calc((var(--toggle-h, 31px) - 2px - var(--toggle-thumb, 25px)) / 2); width: var(--toggle-thumb, 25px); height: var(--toggle-thumb, 25px); border-radius: var(--radius-pill);
  background: var(--surface-raised); box-shadow: var(--shadow-md);
  transition: transform var(--duration-base) cubic-bezier(0.2, 0, 0, 1);
}
.nux-toggle:checked { background: var(--accent); border-color: var(--accent); }
.nux-toggle:checked::after { transform: translateX(calc(var(--toggle-w, 51px) - var(--toggle-h, 31px)));  background: #ffffff; } /* deliberate: the thumb is white on the accent track in every theme, like the platform switch */
.nux-toggle:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- Segmented control ---------- */
.nux-seg {
  display: inline-flex; padding: var(--seg-pad, 2px); gap: 2px; border-radius: var(--control-radius, var(--radius-md));
  background: var(--surface-secondary); border: 1px solid var(--separator);
}
.nux-seg button {
  font: inherit; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink);
  height: 28px; padding: 0 var(--space-3); border: 0; border-radius: calc(var(--control-radius, var(--radius-md)) - 2px);
  background: transparent; cursor: pointer;
  transition: background-color var(--duration-base), color var(--duration-base);
}
.nux-seg button[aria-pressed="true"] { background: var(--surface-raised); box-shadow: var(--shadow-sm); }
.nux-seg-accent button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }

/* ---------- Nav ---------- */
.nux-nav {
  display: flex; align-items: center; gap: var(--space-5); height: 52px; padding: 0 var(--space-5);
  background: var(--surface); border-bottom: 1px solid var(--separator); font-size: 15px; line-height: 20px;
}
.nux-nav-brand { font-weight: 700; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.nux-nav-links { display: flex; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.nux-nav a { color: var(--ink-secondary); text-decoration: none; padding: var(--space-1) 0; border-radius: var(--radius-sm); transition: color var(--duration-fast); }
.nux-nav a:hover { color: var(--ink); }
.nux-nav a[aria-current="page"] { color: var(--ink); font-weight: 500; }
.nux-nav-end { margin-left: auto; display: flex; gap: var(--space-2); }

@media (prefers-reduced-motion: reduce) {
  .nux-btn, .nux-input, .nux-toggle, .nux-toggle::after, .nux-seg button, .nux-nav a { transition: none; }
}

/* ---------- List (grouped rows) ---------- */
.nux-list { margin: 0; padding: 0; list-style: none; background: var(--surface-raised); border: 1px solid var(--separator); border-radius: var(--radius-lg); overflow: hidden; }
.nux-list-header { font-size: var(--text-meta, 13px); line-height: var(--leading-meta, 18px); color: var(--ink-secondary); padding: 0 var(--space-4) var(--space-2); }
.nux-list-row { display: flex; align-items: center; gap: var(--space-3); min-height: var(--list-row, 48px); padding: var(--list-pad-y, var(--space-2)) var(--list-pad-x, var(--space-4)); box-sizing: border-box; color: inherit; text-decoration: none; }
.nux-list > li + li { border-top: 1px solid var(--separator); }
.nux-list > li { min-height: var(--list-row); box-sizing: border-box; }
button.nux-list-row { width: 100%; font: inherit; border: 0; background: transparent; text-align: left; cursor: pointer; }
.nux-list-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nux-list-title { font-size: var(--text-list, 17px); line-height: var(--leading-list, 25px); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nux-list-detail { font-size: var(--text-meta, 13px); line-height: var(--leading-meta, 18px); color: var(--ink-secondary); }
.nux-list-value { font-size: var(--text-list, 17px); line-height: var(--leading-list, 25px); color: var(--ink-secondary); }
a.nux-list-row:hover, button.nux-list-row:hover { background: var(--surface-secondary); }
.nux-list-row:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.nux-list-danger { color: var(--danger); }
.nux-chevron { width: 8px; height: 8px; border-right: 1.5px solid var(--ink-secondary); border-bottom: 1.5px solid var(--ink-secondary); transform: rotate(-45deg); flex: none; margin-right: 2px; }

/* ---------- Tab bar (mobile) ---------- */
.nux-tabbar { display: flex; height: var(--tab-bar); padding-bottom: env(safe-area-inset-bottom); background: var(--surface-raised); border-top: 1px solid var(--separator); }
.nux-tabbar button, .nux-tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: var(--tap-min); border: 0; background: transparent; font: inherit; font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.01em; color: var(--ink-secondary); cursor: pointer; position: relative; text-decoration: none; }
.nux-tabbar button[aria-current="page"], .nux-tabbar a[aria-current="page"] { color: var(--accent); }
.nux-tabbar button:focus-visible, .nux-tabbar a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; border-radius: var(--radius-sm); }
.nux-tabbar-icon { width: 24px; height: 24px; border-radius: var(--radius-sm); border: 2px solid currentColor; box-sizing: border-box; }

/* ---------- Tabs (desktop) ---------- */
.nux-tabs { display: flex; gap: var(--tabs-gap, var(--space-5)); border-bottom: 1px solid var(--separator); }
.nux-tabs button { font: inherit; font-size: var(--text-control, 15px); line-height: var(--leading-control, 20px); font-weight: 500; color: var(--ink-secondary); background: transparent; border: 0; padding: var(--tabs-pad-y, var(--space-3)) 0; margin-bottom: -1px; border-bottom: 2px solid transparent; cursor: pointer; transition: color var(--duration-fast); }
.nux-tabs button:hover { color: var(--ink); }
.nux-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.nux-tabs button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }

/* ---------- Menu ---------- */
.nux-menu { display: inline-block; box-sizing: border-box; min-width: var(--menu-min-w, 200px); max-width: 320px; padding: var(--space-1); margin: 0; list-style: none; background: var(--surface-raised); border: 1px solid var(--separator); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.nux-menu button { display: flex; width: 100%; align-items: center; gap: var(--space-2); font: inherit; font-size: var(--text-control, 15px); line-height: var(--leading-control, 20px); min-height: var(--menu-row, 36px); color: var(--ink); background: transparent; border: 0; text-align: left; padding: var(--menu-pad-y, var(--space-2)) var(--space-3); border-radius: var(--radius-sm); cursor: pointer; }
.nux-menu button:hover, .nux-menu button:focus-visible { background: var(--accent-soft); color: var(--accent); outline: none; }
.nux-menu button.nux-menu-danger { color: var(--danger); }
.nux-menu button.nux-menu-danger:hover, .nux-menu button.nux-menu-danger:focus-visible { background: var(--danger-soft); }
.nux-menu button:disabled { opacity: .4; cursor: not-allowed; background: transparent; }
.nux-menu-sep { height: 1px; margin: var(--space-1) var(--space-2); background: var(--separator); }
.nux-menu-shortcut { margin-left: auto; font-size: var(--text-meta, 13px); color: var(--ink-secondary); }

/* ---------- Dialog ---------- */
.nux-scrim { position: fixed; inset: 0; background: var(--surface-overlay); display: flex; align-items: center; justify-content: center; padding: var(--space-4); z-index: var(--layer-dialog); }
.nux-dialog { width: 100%; max-width: 400px; background: var(--surface-raised); border-radius: var(--dialog-radius, var(--radius-xl)); box-shadow: var(--shadow-lg); padding: var(--dialog-pad, var(--space-5)); display: flex; flex-direction: column; gap: var(--space-2); }
.nux-dialog-title { margin: 0; font-size: var(--text-dialog-title, 19px); line-height: var(--leading-dialog-title, 24px); font-weight: 600; letter-spacing: -0.005em; }
.nux-dialog-body { margin: 0; font-size: var(--text-control, 15px); line-height: var(--leading-control, 20px); color: var(--ink-secondary); }
.nux-dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-3); }

/* ---------- Sheet (mobile) ---------- */
.nux-sheet-scrim { position: fixed; inset: 0; background: var(--surface-overlay); display: flex; align-items: flex-end; }
.nux-sheet { width: 100%; background: var(--surface-raised); border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-lg); padding: var(--space-2) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom)); box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-4); }
.nux-sheet-handle { width: 36px; height: 5px; border-radius: var(--radius-pill); background: var(--border-strong); margin: 0 auto var(--space-2); }
.nux-sheet-title { margin: 0; font-size: 19px; line-height: 24px; font-weight: 600; letter-spacing: -0.005em; text-align: center; }

/* ---------- Toast ---------- */
.nux-toast { display: inline-flex; align-items: center; gap: var(--space-3); max-width: 420px; padding: var(--space-3) var(--space-4); background: var(--ink); color: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); font-size: 15px; line-height: 20px; }
.nux-toast-action { font: inherit; font-weight: 600; color: inherit; background: transparent; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.nux-toast-action:focus-visible { outline: 2px solid var(--surface); outline-offset: 2px; border-radius: var(--radius-sm); }
.nux-toast-dot { width: 8px; height: 8px; border-radius: var(--radius-pill); flex: none; }
.nux-toast-success .nux-toast-dot { background: var(--success); }
.nux-toast-danger .nux-toast-dot { background: var(--danger); }
.nux-toast-warning .nux-toast-dot { background: var(--warning); }

/* ---------- Table ---------- */
.nux-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 20px; font-variant-numeric: tabular-nums; }
.nux-table th { text-align: left; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-secondary); padding: var(--space-2) var(--space-3); background: var(--surface-secondary); border-bottom: 1px solid var(--separator); }
.nux-table th:first-child { border-top-left-radius: var(--radius-md); } .nux-table th:last-child { border-top-right-radius: var(--radius-md); }
.nux-table td { padding: var(--space-3); border-bottom: 1px solid var(--separator); color: var(--ink); vertical-align: middle; }
.nux-table th.nux-num, .nux-table td.nux-num { text-align: right; }
.nux-table tbody tr:hover td { background: var(--surface-secondary); }
.nux-table tr[aria-selected="true"] td { background: var(--accent-soft); }

@media (prefers-reduced-motion: reduce) { .nux-tabs button { transition: none; } }

/* ---------- Icon ---------- */
.nux-icon { width: 20px; height: 20px; flex: none; }
.nux-icon-sm { width: 16px; height: 16px; } .nux-icon-lg { width: 24px; height: 24px; }
/* Icon.ligature: a span, not an svg, so width/height alone won't size a glyph — font-size does.
   The app supplies font-family (its own ligature font isn't bundled here). */
.nux-icon-lig { display: inline-flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; font-style: normal; font-weight: normal; } /* deliberate: sized to match Icon's 20px SVG default, not a text role */
.nux-icon-lig.nux-icon-sm { font-size: 16px; } /* deliberate: matches Icon's 16px sm SVG size */
.nux-icon-lig.nux-icon-lg { font-size: 24px; } /* on the type scale (heading) already — no exception needed */

/* ---------- Select ---------- */
.nux-select-wrap { position: relative; }
.nux-select { appearance: none; -webkit-appearance: none; font: inherit; font-size: var(--text-control, 15px); line-height: var(--leading-control, 20px); color: var(--ink); height: var(--control, 40px); padding: 0 var(--select-pad-r, 40px) 0 var(--space-3); border-radius: var(--control-radius, var(--radius-md)); border: 1px solid var(--border-strong); background: var(--surface-raised); width: 100%; box-sizing: border-box; cursor: pointer; }
.nux-select:hover { border-color: var(--ink); } .nux-select:focus { border-color: var(--accent); outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.nux-select:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
.nux-select-wrap .nux-icon { position: absolute; right: var(--space-3); top: calc((var(--control, 40px) - var(--select-icon, 20px)) / 2); color: var(--ink-secondary); pointer-events: none; }

/* ---------- Checkbox / Radio ---------- */
.nux-check, .nux-radio { display: inline-flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-control, 15px); line-height: var(--leading-control, 20px); cursor: pointer; min-height: 20px; }
.nux-check input, .nux-radio input { appearance: none; -webkit-appearance: none; margin: 0; flex: none; width: 20px; height: 20px; border: 1.5px solid var(--border-strong); background: var(--surface-raised); cursor: pointer; display: grid; place-content: center; transition: background-color var(--duration-fast), border-color var(--duration-fast); }
.nux-check input { border-radius: var(--radius-sm); } .nux-radio input { border-radius: var(--radius-pill); }
.nux-check input:hover, .nux-radio input:hover { border-color: var(--ink); }
.nux-check input:focus-visible, .nux-radio input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.nux-check input:checked, .nux-check input:indeterminate { background: var(--accent); border-color: var(--accent); }
.nux-check input:checked::after { content: ""; width: 10px; height: 6px; border-left: 2px solid var(--on-accent); border-bottom: 2px solid var(--on-accent); transform: translateY(-1px) rotate(-45deg); }
.nux-check input:indeterminate::after { content: ""; width: 10px; height: 2px; background: var(--on-accent); }
.nux-radio input:checked { border-color: var(--accent); border-width: 6px; background: var(--surface-raised); }
.nux-check input:disabled, .nux-radio input:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
.nux-check-text, .nux-radio-text { display: flex; flex-direction: column; } .nux-check-detail { font-size: var(--text-meta, 13px); line-height: var(--leading-meta, 18px); color: var(--ink-secondary); }
.nux-radio-group { display: flex; flex-direction: column; gap: var(--space-3); border: 0; padding: 0; margin: 0; }
.nux-radio-group legend { font-size: var(--text-control, 15px); line-height: var(--leading-control, 20px); font-weight: 500; padding: 0; margin-bottom: var(--space-2); }

/* ---------- Textarea ---------- */
.nux-textarea { font: inherit; font-size: var(--text-control, 15px); line-height: var(--leading-control, 20px); color: var(--ink); padding: 10px var(--space-3); min-height: 96px; resize: vertical; border-radius: var(--radius-md); border: 1px solid var(--border-strong); background: var(--surface-raised); width: 100%; box-sizing: border-box; transition: border-color var(--duration-fast); }
.nux-textarea::placeholder { color: var(--ink-secondary); } .nux-textarea:hover { border-color: var(--ink); } .nux-textarea:focus { border-color: var(--accent); outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.nux-field-error .nux-textarea { border-color: var(--danger); }
.nux-charcount { font-size: 13px; line-height: 18px; color: var(--ink-secondary); text-align: right; margin-top: calc(var(--space-1) - var(--space-2)); font-variant-numeric: tabular-nums; }
.nux-count { display: inline-grid; place-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font-size: 11px; line-height: 1; font-weight: 600; }

/* ---------- Search ---------- */
.nux-search { position: relative; display: flex; align-items: center; }
.nux-search .nux-input { padding-left: 40px; border-radius: var(--radius-pill); background: var(--surface-secondary); border-color: transparent; }
.nux-search .nux-input:hover { border-color: var(--border-strong); } .nux-search .nux-input:focus { background: var(--surface-raised); border-color: var(--accent); }
.nux-search > .nux-icon { position: absolute; left: var(--space-3); color: var(--ink-secondary); pointer-events: none; }
.nux-search-clear { position: absolute; right: var(--space-2); width: 28px; height: 28px; border-radius: var(--radius-pill); border: 0; background: transparent; color: var(--ink-secondary); display: grid; place-content: center; cursor: pointer; }
.nux-search-clear:hover { background: var(--separator); color: var(--ink); } .nux-search-clear:focus-visible { outline: 2px solid var(--focus-ring); }

/* ---------- Slider ---------- */
.nux-slider { display: flex; flex-direction: column; gap: var(--space-2); }
.nux-slider-head { display: flex; justify-content: space-between; font-size: 15px; line-height: 20px; } .nux-slider-value { color: var(--ink-secondary); font-variant-numeric: tabular-nums; }
.nux-range { appearance: none; -webkit-appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; }
.nux-range::-webkit-slider-runnable-track { height: 4px; border-radius: var(--radius-pill); background: linear-gradient(var(--accent), var(--accent)) 0 / var(--pct, 50%) 100% no-repeat, var(--separator); }
.nux-range::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 28px; height: 28px; margin-top: -12px; border-radius: var(--radius-pill); background: var(--surface-raised); border: 1px solid var(--border-strong); box-shadow: var(--shadow-md); }
.nux-range::-moz-range-track { height: 4px; border-radius: var(--radius-pill); background: var(--separator); } .nux-range::-moz-range-progress { height: 4px; border-radius: var(--radius-pill); background: var(--accent); }
.nux-range::-moz-range-thumb { width: 28px; height: 28px; border-radius: var(--radius-pill); background: var(--surface-raised); border: 1px solid var(--border-strong); box-shadow: var(--shadow-md); }
.nux-range:focus-visible { outline: none; } .nux-range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ---------- Stepper ---------- */
.nux-stepper { display: inline-flex; align-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-raised); height: 40px; overflow: hidden; }
.nux-stepper button { width: 40px; height: 100%; border: 0; background: transparent; color: var(--ink); cursor: pointer; display: grid; place-content: center; }
.nux-stepper button:hover:not(:disabled) { background: var(--surface-secondary); } .nux-stepper button:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
.nux-stepper button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.nux-stepper output { min-width: 40px; text-align: center; font-size: 15px; font-variant-numeric: tabular-nums; border-left: 1px solid var(--separator); border-right: 1px solid var(--separator); line-height: 38px; }

/* ---------- Avatar ---------- */
.nux-avatar { display: inline-grid; place-content: center; width: 40px; height: 40px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); font-size: 15px; font-weight: 600; letter-spacing: 0.01em; overflow: hidden; flex: none; }
.nux-avatar img { width: 100%; height: 100%; object-fit: cover; }
.nux-avatar-sm { width: 28px; height: 28px; font-size: 12px; } .nux-avatar-lg { width: 56px; height: 56px; font-size: 19px; } .nux-avatar-xl { width: 80px; height: 80px; font-size: 24px; }
.nux-avatar-square { border-radius: var(--radius-md); }
.nux-avatar-group { display: inline-flex; } .nux-avatar-group .nux-avatar { box-shadow: 0 0 0 2px var(--surface); margin-left: -8px; } .nux-avatar-group .nux-avatar:first-child { margin-left: 0; }
/* Per-identity tone, for a dense list of initials-only avatars that need to read apart at a
   glance (a ledger of merchants with no logo) rather than share one flat accent tint. Reuses
   dataviz's six categorical series tokens, so "many distinct identities" stays the one place
   that hue vocabulary is defined — color-mix keeps it token-only in every theme. */
.nux-avatar-tone-1 { background: color-mix(in srgb, var(--series-1) 18%, var(--surface)); color: var(--series-1); }
.nux-avatar-tone-2 { background: color-mix(in srgb, var(--series-2) 18%, var(--surface)); color: var(--series-2); }
.nux-avatar-tone-3 { background: color-mix(in srgb, var(--series-3) 18%, var(--surface)); color: var(--series-3); }
.nux-avatar-tone-4 { background: color-mix(in srgb, var(--series-4) 18%, var(--surface)); color: var(--series-4); }
.nux-avatar-tone-5 { background: color-mix(in srgb, var(--series-5) 18%, var(--surface)); color: var(--series-5); }
.nux-avatar-tone-6 { background: color-mix(in srgb, var(--series-6) 18%, var(--surface)); color: var(--series-6); }

/* ---------- Progress / Spinner / Skeleton ---------- */
.nux-progress { display: flex; flex-direction: column; gap: var(--space-2); }
.nux-progress-head { display: flex; justify-content: space-between; font-size: var(--text-meta, 13px); line-height: var(--leading-meta, 18px); color: var(--ink-secondary); }
.nux-progress-track { height: var(--progress-track, 6px); border-radius: var(--radius-pill); background: var(--separator); overflow: hidden; }
.nux-progress-bar { height: 100%; border-radius: var(--radius-pill); background: var(--accent); transition: width var(--duration-base); }
.nux-progress-danger .nux-progress-bar { background: var(--danger); } .nux-progress-success .nux-progress-bar { background: var(--success); }
.nux-progress-indeterminate .nux-progress-bar { width: 40%; animation: nux-slide 1.2s cubic-bezier(0.2,0,0,1) infinite; }
@keyframes nux-slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.nux-spinner { width: 20px; height: 20px; border-radius: var(--radius-pill); border: 2px solid var(--separator); border-top-color: var(--accent); animation: nux-spin .8s linear infinite; flex: none; }
.nux-spinner-lg { width: 32px; height: 32px; border-width: 3px; }
@keyframes nux-spin { to { transform: rotate(360deg); } }
.nux-skeleton { background: var(--surface-secondary); border-radius: var(--radius-sm); animation: nux-pulse 1.4s ease-in-out infinite; }
.nux-skeleton-text { height: 14px; margin: 6px 0; } .nux-skeleton-circle { border-radius: var(--radius-pill); }
@keyframes nux-pulse { 50% { opacity: var(--opacity-skeleton); } }

/* ---------- Empty state ---------- */
.nux-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--empty-pad-y, var(--space-8)) var(--empty-pad-x, var(--space-5)); max-width: 360px; margin: 0 auto; }
.nux-empty-icon { width: var(--empty-icon, 48px); height: var(--empty-icon, 48px); border-radius: var(--radius-lg); background: var(--surface-secondary); color: var(--ink-secondary); display: grid; place-content: center; margin-bottom: var(--space-2); }
.nux-empty-title { margin: 0; font-size: var(--text-empty-title, 19px); line-height: var(--leading-empty-title, 24px); font-weight: 600; } .nux-empty-body { margin: 0; font-size: var(--text-empty-body, 15px); line-height: var(--leading-empty-body, 20px); color: var(--ink-secondary); }
.nux-empty .nux-btn { margin-top: var(--space-3); }

/* ---------- Alert (inline banner) ---------- */
.nux-alert { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--alert-pad-y, var(--space-3)) var(--alert-pad-x, var(--space-4)); border-radius: var(--radius-md); background: var(--surface-secondary); color: var(--ink); font-size: var(--text-control, 15px); line-height: var(--leading-control, 20px); }
.nux-alert .nux-icon { margin-top: 0; color: var(--ink-secondary); }
.nux-alert-text { flex: 1; } .nux-alert-title { font-weight: 600; } .nux-alert-body { color: var(--ink-secondary); }
.nux-alert-accent { background: var(--accent-soft); } .nux-alert-accent .nux-icon { color: var(--accent); }
.nux-alert-success { background: var(--success-soft); } .nux-alert-success .nux-icon { color: var(--success); }
.nux-alert-warning { background: var(--warning-soft); } .nux-alert-warning .nux-icon { color: var(--warning); }
.nux-alert-danger { background: var(--danger-soft); } .nux-alert-danger .nux-icon { color: var(--danger); }
.nux-alert-accent .nux-alert-body, .nux-alert-success .nux-alert-body, .nux-alert-warning .nux-alert-body, .nux-alert-danger .nux-alert-body { color: var(--ink); }
.nux-alert .nux-btn-tertiary { height: auto; padding: 0; margin-top: var(--space-1); }
.nux-alert-close { border: 0; background: transparent; color: var(--ink-secondary); cursor: pointer; padding: 0; display: grid; place-content: center; border-radius: var(--radius-sm); }
.nux-alert-close:focus-visible { outline: 2px solid var(--focus-ring); }

/* ---------- Tooltip ---------- */
.nux-tip-wrap { position: relative; display: inline-flex; }
.nux-tooltip { position: absolute; left: 50%; bottom: calc(100% + var(--space-2)); transform: translateX(-50%); background: var(--ink); color: var(--surface); font-size: 13px; line-height: 18px; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--duration-fast); z-index: var(--layer-dropdown); }
.nux-tip-wrap:hover .nux-tooltip, .nux-tip-wrap:focus-within .nux-tooltip, .nux-tooltip.nux-tooltip-open { opacity: 1; }

/* ---------- Pagination ---------- */
.nux-pagination { display: flex; align-items: center; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.nux-pagination button { min-width: 36px; height: 36px; padding: 0 var(--space-2); border-radius: var(--radius-md); border: 0; background: transparent; font: inherit; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--ink); cursor: pointer; display: grid; place-content: center; }
.nux-pagination button:hover:not(:disabled) { background: var(--surface-secondary); }
.nux-pagination button[aria-current="page"] { background: var(--accent); color: var(--on-accent); }
.nux-pagination button:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
.nux-pagination button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.nux-pagination .nux-ellipsis { min-width: 36px; text-align: center; color: var(--ink-secondary); }

/* ---------- Breadcrumbs ---------- */
.nux-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); list-style: none; margin: 0; padding: 0; font-size: 13px; line-height: 18px; }
.nux-crumbs li { display: flex; align-items: center; gap: var(--space-1); }
.nux-crumbs a { color: var(--ink-secondary); text-decoration: none; padding: var(--space-1); border-radius: var(--radius-sm); } .nux-crumbs a:hover { color: var(--ink); } .nux-crumbs a:focus-visible { outline: 2px solid var(--focus-ring); }
.nux-crumbs [aria-current="page"] { color: var(--ink); font-weight: 500; padding: var(--space-1); }
.nux-crumbs .nux-icon { width: 16px; height: 16px; color: var(--ink-secondary); }

/* ---------- Accordion ---------- */
.nux-accordion { border-top: 1px solid var(--separator); }
.nux-accordion details { border-bottom: 1px solid var(--separator); }
.nux-accordion summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); list-style: none; cursor: pointer; padding: var(--space-4) 0; font-size: 17px; line-height: 25px; font-weight: 600; }
.nux-accordion summary::-webkit-details-marker { display: none; }
.nux-accordion summary .nux-icon { color: var(--ink-secondary); transition: transform var(--duration-base); }
.nux-accordion details[open] summary .nux-icon { transform: rotate(180deg); }
.nux-accordion summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.nux-accordion-body { padding: 0 0 var(--space-4); font-size: 15px; line-height: 20px; color: var(--ink-secondary); max-width: 680px; }

/* ---------- Chip ---------- */
.nux-chip { display: inline-flex; align-items: center; gap: var(--space-1); height: var(--chip-h, 32px); padding: 0 var(--chip-pad-x, var(--space-3)); border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: var(--surface-raised); color: var(--ink); font: inherit; font-size: 13px; line-height: 18px; font-weight: 500; cursor: pointer; transition: background-color var(--duration-fast), border-color var(--duration-fast); }
.nux-chip:hover { background: var(--surface-secondary); }
.nux-chip[aria-pressed="true"], .nux-chip-selected { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.nux-chip:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.nux-chip-remove { width: 18px; height: 18px; margin-right: -6px; border: 0; border-radius: var(--radius-pill); background: transparent; color: inherit; display: grid; place-content: center; cursor: pointer; padding: 0; }
.nux-chip-remove:hover { background: var(--separator); }
.nux-chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---------- Stat ---------- */
.nux-stat { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-5); background: var(--surface-raised); border: 1px solid var(--separator); border-radius: var(--radius-lg); min-width: 160px; }
.nux-stat-label { font-size: 13px; line-height: 18px; color: var(--ink-secondary); }
.nux-stat-value { font-size: 32px; line-height: 36px; font-weight: 700; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.nux-stat-delta { font-size: 13px; line-height: 18px; min-height: 18px; display: inline-flex; align-items: center; gap: 2px; }
.nux-stat-up { color: var(--success); } .nux-stat-down { color: var(--danger); } .nux-stat-flat { color: var(--ink-secondary); }
.nux-stat-delta .nux-icon { width: 14px; height: 14px; }

/* ---------- Mobile nav (top bar) ---------- */
.nux-mnav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 44px; padding: env(safe-area-inset-top) var(--space-2) 0; background: var(--surface); border-bottom: 1px solid var(--separator); }
.nux-mnav-title { font-size: 17px; line-height: 25px; font-weight: 600; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nux-mnav-large { display: block; height: auto; padding-bottom: var(--space-2); }
.nux-mnav-large .nux-mnav-title { text-align: left; font-size: 32px; line-height: 36px; font-weight: 700; letter-spacing: -0.015em; padding: 0 var(--space-2); }
.nux-mnav-side { display: flex; align-items: center; min-height: 44px; } .nux-mnav-side:last-child { justify-content: flex-end; }
.nux-mnav-side .nux-btn-tertiary { padding: 0 var(--space-2); font-weight: 400; }

/* ---------- Action sheet ---------- */
.nux-actionsheet { display: flex; flex-direction: column; gap: var(--space-2); padding: 0 var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom)); }
.nux-actionsheet-group { background: var(--surface-raised); border-radius: var(--radius-lg); overflow: hidden; }
.nux-actionsheet-title { padding: var(--space-3) var(--space-4); text-align: center; font-size: 13px; line-height: 18px; color: var(--ink-secondary); border-bottom: 1px solid var(--separator); }
.nux-actionsheet-group button { display: block; width: 100%; height: 56px; border: 0; background: transparent; font: inherit; font-size: 19px; color: var(--accent); cursor: pointer; }
.nux-actionsheet-group button + button { border-top: 1px solid var(--separator); }
.nux-actionsheet-group button:hover { background: var(--surface-secondary); } .nux-actionsheet-group button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.nux-actionsheet-group button.nux-actionsheet-danger { color: var(--danger); }
.nux-actionsheet-cancel button { font-weight: 600; color: var(--ink); }

/* ---------- Page indicator ---------- */
.nux-dots { display: inline-flex; gap: var(--space-2); align-items: center; }
.nux-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--separator); cursor: pointer; transition: background-color var(--duration-base), width var(--duration-base); }
.nux-dots button[aria-current="true"] { background: var(--accent); width: 20px; }
.nux-dots button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ---------- Showcase helpers ---------- */
.nux-phone { width: 390px; min-height: 620px; background: var(--surface-secondary); display: flex; flex-direction: column; }
.nux-phone-body { flex: 1; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-5); }
.nux-page { max-width: 1024px; margin: 0 auto; padding: var(--space-6) var(--space-5); }

@media (prefers-reduced-motion: reduce) { .nux-progress-bar, .nux-spinner, .nux-skeleton, .nux-accordion summary .nux-icon, .nux-dots button, .nux-tooltip { animation: none; transition: none; } }

.nux-rot-up { transform: rotate(-45deg); } .nux-rot-down { transform: rotate(45deg); }

/* ======================= App-driven additions ======================= */

/* ---------- Page header / Section / KeyValue ---------- */
.nux-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding-bottom: var(--space-5); }
.nux-pagehead-text { display: flex; flex-direction: column; gap: var(--space-1); }
.nux-pagehead-title { margin: 0; font-size: 32px; line-height: 36px; font-weight: 700; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.nux-pagehead-sub { margin: 0; font-size: 15px; line-height: 20px; color: var(--ink-secondary); }
.nux-pagehead-actions { display: flex; gap: var(--space-2); }
.nux-section { display: flex; flex-direction: column; gap: var(--space-3); }
.nux-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.nux-section-title { margin: 0; font-size: 19px; line-height: 24px; font-weight: 600; letter-spacing: -0.005em; }
.nux-section-title small { font-size: 13px; line-height: 18px; font-weight: 400; color: var(--ink-secondary); margin-left: var(--space-2); }
.nux-kv { display: flex; flex-direction: column; margin: 0; }
.nux-kv > div { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--kv-pad-y, var(--space-3)) 0; min-height: var(--kv-row, 0px); box-sizing: border-box; border-bottom: 1px solid var(--separator); font-size: var(--text-control, 15px); line-height: var(--leading-control, 20px); }
.nux-kv > div:last-child { border-bottom: 0; }
.nux-kv dt { color: var(--ink-secondary); margin: 0; } .nux-kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Sidebar (desktop) ---------- */
.nux-sidebar { width: 240px; padding: var(--space-4) var(--space-3); background: var(--surface-secondary); border-right: 1px solid var(--separator); display: flex; flex-direction: column; gap: var(--space-5); box-sizing: border-box; min-height: 100%; }
.nux-sidebar-brand { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-2); font-weight: 700; letter-spacing: -0.01em; font-size: 17px; }
.nux-sidebar-brand img { height: 24px; }
.nux-sidebar-group { display: flex; flex-direction: column; gap: 2px; }
.nux-sidebar-heading { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-secondary); padding: 0 var(--space-2) var(--space-1); }
.nux-sidebar a { display: flex; align-items: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-2); border-radius: var(--radius-md); color: var(--ink-secondary); text-decoration: none; font-size: 15px; line-height: 20px; transition: background-color var(--duration-fast), color var(--duration-fast); }
.nux-sidebar a:hover { background: var(--surface); color: var(--ink); }
.nux-sidebar a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.nux-sidebar a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.nux-sidebar a .nux-badge { margin-left: auto; }
.nux-sidebar-foot { margin-top: auto; }

.nux-count-danger { background: var(--danger); color: var(--on-danger); }
.nux-count-warning { background: var(--warning); color: var(--on-warning); }
 .nux-tabbar .nux-count { position: absolute; top: 6px; left: calc(50% + 4px); }

/* ---------- Drawer (desktop side panel) ---------- */
.nux-drawer-scrim { position: fixed; inset: 0; background: var(--surface-overlay); display: flex; justify-content: flex-end; z-index: var(--layer-sheet); }
.nux-drawer { width: 100%; max-width: var(--drawer-width, 480px); height: 100%; background: var(--surface-raised); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; box-sizing: border-box; }
.nux-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); box-sizing: border-box; min-height: var(--drawer-head, 0px); padding: var(--drawer-head-pad-y, var(--space-4)) var(--drawer-pad-x, var(--space-5)); border-bottom: 1px solid var(--separator); }
.nux-drawer-title { margin: 0; font-size: var(--text-dialog-title, 19px); line-height: var(--leading-dialog-title, 24px); font-weight: 600; }
.nux-drawer-body { flex: 1; overflow: auto; padding: var(--drawer-body-pad, var(--space-5)); display: flex; flex-direction: column; gap: var(--drawer-gap, var(--space-4)); }
.nux-drawer-foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--drawer-pad-y, var(--space-4)) var(--drawer-pad-x, var(--space-5)); border-top: 1px solid var(--separator); }
.nux-iconbtn { width: var(--iconbtn, 36px); height: var(--iconbtn, 36px); display: inline-grid; place-content: center; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink-secondary); cursor: pointer; }
.nux-iconbtn:hover { background: var(--surface-secondary); color: var(--ink); } .nux-iconbtn:focus-visible { outline: 2px solid var(--focus-ring); }
.nux-iconbtn-outlined { border: 1px solid var(--border-strong); background: var(--surface-raised); color: var(--ink); width: var(--iconbtn-outlined, 40px); height: var(--iconbtn-outlined, 40px); }
.nux-iconbtn:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; } .nux-iconbtn:disabled:hover { background: transparent; color: var(--ink-secondary); }

/* ---------- Error state ---------- */
.nux-error { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-6) var(--space-5); max-width: 360px; margin: 0 auto; }
.nux-error .nux-empty-icon { background: var(--danger-soft); color: var(--danger); }
.nux-error-detail { font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--ink-secondary); background: var(--surface-secondary); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Money / Delta / TransactionRow ---------- */
.nux-money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.nux-money-pos { color: var(--success); } .nux-money-neg { color: var(--ink); } .nux-money-muted { color: var(--ink-secondary); }
.nux-money-lg { font-size: 32px; line-height: 36px; font-weight: 700; letter-spacing: -0.015em; }
.nux-money-xl { font-size: 48px; line-height: 52px; font-weight: 800; letter-spacing: -0.02em; }
.nux-money .nux-money-cur { font-size: max(11px, 0.6em); font-weight: 500; color: var(--ink-secondary); margin-left: 0.15em; vertical-align: baseline; }
.nux-delta { display: inline-flex; align-items: center; gap: 2px; height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-pill); font-size: 12px; line-height: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.nux-delta .nux-icon { width: 14px; height: 14px; }
.nux-delta-up { background: var(--success-soft); color: var(--success); } .nux-delta-down { background: var(--danger-soft); color: var(--danger); } .nux-delta-flat { background: var(--surface-secondary); color: var(--ink-secondary); }
.nux-txn { display: flex; align-items: center; gap: var(--space-3); min-height: 60px; padding: var(--space-2) var(--space-4); text-decoration: none; color: inherit; background: transparent; border: 0; width: 100%; font: inherit; text-align: left; cursor: pointer; box-sizing: border-box; }
.nux-txn:hover { background: var(--surface-secondary); } .nux-txn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.nux-txn-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nux-txn-title { font-size: 15px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nux-txn-meta { font-size: 13px; line-height: 18px; color: var(--ink-secondary); display: flex; gap: var(--space-2); align-items: center; }
.nux-txn-meta .nux-badge { padding: 0 var(--space-1); }
.nux-txn-amount { display: flex; flex-direction: column; align-items: flex-end; }
.nux-txn-amount .nux-money { font-size: 15px; line-height: 20px; font-weight: 500; }
.nux-txn-date { font-size: 13px; line-height: 18px; color: var(--ink-secondary); }
.nux-txn-pending { opacity: .6; } .nux-txn-pending .nux-txn-title::after { content: " · pending"; color: var(--ink-secondary); }
.nux-txn-group { display: flex; justify-content: space-between; padding: var(--space-4) var(--space-4) var(--space-1); font-size: 13px; line-height: 18px; color: var(--ink-secondary); }
.nux-txn-list { list-style: none; margin: 0; padding: 0; background: var(--surface-raised); border: 1px solid var(--separator); border-radius: var(--radius-lg); overflow: hidden; }
.nux-txn-list > li + li { border-top: 1px solid var(--separator); }

/* ---------- Charts ---------- */
.nux-chart { display: flex; flex-direction: column; gap: var(--space-2); font-size: 13px; line-height: 18px; color: var(--ink-secondary); }
.nux-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.nux-chart .grid { stroke: var(--chart-grid); stroke-width: 1; } .nux-chart .baseline { stroke: var(--chart-baseline); stroke-width: 1; }
.nux-chart .axis { fill: var(--ink-secondary); font-size: 11px; font-family: var(--font-sans); }
.nux-chart .s1 { fill: var(--series-1); stroke: var(--series-1); } .nux-chart .s2 { fill: var(--series-2); stroke: var(--series-2); } .nux-chart .s3 { fill: var(--series-3); stroke: var(--series-3); }
.nux-chart .s4 { fill: var(--series-4); stroke: var(--series-4); } .nux-chart .s5 { fill: var(--series-5); stroke: var(--series-5); } .nux-chart .s6 { fill: var(--series-6); stroke: var(--series-6); }
.nux-chart .pos { fill: var(--div-pos); stroke: var(--div-pos); } .nux-chart .neg { fill: var(--div-neg); stroke: var(--div-neg); }
.nux-chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.nux-chart .area { opacity: .12; stroke: none; }
.nux-chart .bar { stroke: none; transition: opacity var(--duration-fast); } .nux-chart .bar.dim { opacity: .3; } .nux-chart .bar.hover { opacity: .8; }
.nux-chart .axis.on { fill: var(--ink); font-weight: 600; } .nux-chart .axis.tick { font-size: 11px; fill: var(--ink-secondary); opacity: .8; }
.nux-chart .avg { stroke: var(--ink-secondary); stroke-width: 1; stroke-dasharray: 2 4; stroke-linecap: round; }
.nux-chart .marker { stroke: var(--surface-raised); stroke-width: 2; }
.nux-chart .band { fill: var(--surface-secondary); stroke: none; }
.nux-chart .hit { fill: transparent; cursor: pointer; }
.nux-chart-tip { position: absolute; pointer-events: none; background: var(--ink); color: var(--surface); font-size: 12px; line-height: 16px; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); white-space: nowrap; transform: translate(-50%, calc(-100% - 8px)); opacity: 0; transition: opacity var(--duration-fast); z-index: var(--layer-dropdown); }
.nux-chart-tip.on { opacity: 1; }
.nux-chart-wrap { position: relative; }
.nux-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: 13px; line-height: 18px; color: var(--ink-secondary); }
.nux-legend span { display: inline-flex; align-items: center; gap: var(--space-1); }
.nux-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.nux-barlist { display: flex; flex-direction: column; gap: var(--space-2); }
.nux-barlist-row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-3); font-size: 15px; line-height: 20px; align-items: center; }
.nux-barlist-row .nux-money, .nux-barlist-val { font-variant-numeric: tabular-nums; color: var(--ink); }
.nux-barlist-track { grid-column: 1 / -1; height: 8px; border-radius: var(--radius-pill); background: var(--surface-secondary); overflow: hidden; }
.nux-barlist-fill { height: 100%; border-radius: 4px; background: var(--series-1); }
.nux-segbar { display: flex; flex-direction: column; gap: var(--space-2); }
.nux-segbar-track { display: flex; height: 12px; gap: 2px; border-radius: 6px; overflow: hidden; }
.nux-segbar-track span { display: block; height: 100%; min-width: 2px; }
.nux-segbar-track span:first-child { border-radius: 6px 0 0 6px; } .nux-segbar-track span:last-child { border-radius: 0 6px 6px 0; }
.nux-donut.nux-chart { display: flex; flex-direction: row; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.nux-donut svg { width: 140px; height: 140px; flex: none; }
.nux-chart.nux-donut circle { fill: none; stroke-width: 18; }
.nux-donut-center { font-size: 24px; line-height: 28px; font-weight: 700; letter-spacing: -0.01em; fill: var(--ink); text-anchor: middle; font-family: var(--font-sans); }
.nux-donut-sub { font-size: 11px; fill: var(--ink-secondary); text-anchor: middle; font-family: var(--font-sans); }
.nux-sparkline { display: inline-block; width: 96px; height: 28px; vertical-align: middle; }
.nux-sparkline svg { width: 100%; height: 100%; overflow: visible; display: block; }
.nux-calheat { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 12px); grid-auto-columns: 12px; gap: 3px; }
.nux-calheat span { width: 12px; height: 12px; border-radius: 3px; background: var(--surface-secondary); }
.nux-ramp { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 12px; color: var(--ink-secondary); }
.nux-ramp i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.nux-meter { display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.nux-meter svg { width: 120px; height: 72px; overflow: visible; }
.nux-meter .track { fill: none; stroke: var(--surface-secondary); stroke-width: 12; stroke-linecap: round; }
.nux-meter .fill { fill: none; stroke: var(--accent); stroke-width: 12; stroke-linecap: round; }
.nux-meter-accent .fill { stroke: var(--accent); } .nux-meter-good .fill { stroke: var(--success); } .nux-meter-warn .fill { stroke: var(--warning); } .nux-meter-bad .fill { stroke: var(--danger); }
.nux-meter-value { font-size: 32px; line-height: 36px; font-weight: 700; letter-spacing: -0.015em; fill: var(--ink); text-anchor: middle; font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
.nux-meter-label { font-size: 13px; line-height: 18px; color: var(--ink-secondary); }

/* ---------- Health: ScoreTile, DayPicker, InsightBar, Widget ---------- */
.nux-score { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); background: var(--surface-raised); border: 1px solid var(--separator); border-radius: var(--radius-lg); min-width: 140px; }
.nux-score-label { font-size: 13px; line-height: 18px; color: var(--ink-secondary); display: flex; justify-content: space-between; align-items: center; min-height: 22px; }
.nux-score-value { min-height: 36px; font-size: 32px; line-height: 36px; font-weight: 700; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.nux-score-value small { font-size: 15px; font-weight: 500; color: var(--ink-secondary); margin-left: 2px; }
.nux-score-scale { display: flex; gap: 2px; height: 6px; margin-top: var(--space-1); }
.nux-score-scale span { flex: 1; border-radius: 3px; background: var(--surface-secondary); }
.nux-score-scale span.on { background: var(--accent); } .nux-score-good .nux-score-scale span.on { background: var(--success); } .nux-score-warn .nux-score-scale span.on { background: var(--warning); } .nux-score-bad .nux-score-scale span.on { background: var(--danger); }
.nux-daypicker { display: flex; gap: var(--space-2); overflow-x: auto; padding: 2px; scrollbar-width: none; }
.nux-daypicker button { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 44px; height: 60px; border-radius: var(--radius-md); border: 1px solid transparent; background: transparent; font: inherit; cursor: pointer; color: var(--ink); justify-content: center; }
.nux-daypicker button small { font-size: 11px; line-height: 14px; color: var(--ink-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.nux-daypicker button b { font-size: 17px; line-height: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nux-daypicker button i { width: 4px; height: 4px; border-radius: var(--radius-pill); background: var(--separator); } .nux-daypicker button i.on { background: var(--success); }
.nux-daypicker button:hover { background: var(--surface-secondary); }
.nux-daypicker button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); } .nux-daypicker button[aria-pressed="true"] small { color: var(--on-accent); opacity: .8; }
.nux-daypicker button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.nux-insight { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-secondary); font-size: 15px; line-height: 20px; min-height: 44px; }
.nux-insight .nux-icon { color: var(--accent); }
.nux-insight-good .nux-icon { color: var(--success); } .nux-insight-warn .nux-icon { color: var(--warning); } .nux-insight-bad .nux-icon { color: var(--danger); }

.nux-insight time { margin-left: auto; font-size: 13px; color: var(--ink-secondary); white-space: nowrap; }
.nux-widget { width: 328px; padding: var(--space-4); border-radius: var(--radius-xl); background: var(--surface-raised); border: 1px solid var(--separator); box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: var(--space-3); box-sizing: border-box; }
.nux-widget-head { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; line-height: 18px; color: var(--ink-secondary); }
.nux-widget-head img { width: 16px; height: 16px; } .nux-widget-head time { margin-left: auto; }
.nux-widget-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.nux-widget-cell { display: flex; flex-direction: column; } .nux-widget-cell small { font-size: 11px; line-height: 14px; color: var(--ink-secondary); } .nux-widget-cell b { font-size: 19px; line-height: 24px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.005em; }
.nux-widget-sm { width: 160px; } .nux-widget-sm .nux-widget-grid { grid-template-columns: 1fr; }
.nux-widget-sm .nux-widget-cell b { font-size: 24px; line-height: 28px; }
.nux-widget-lg { width: 328px; }
.nux-widget-rows { display: flex; flex-direction: column; gap: var(--space-2); border-top: 1px solid var(--separator); padding-top: var(--space-3); }
.nux-widget-row { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 13px; line-height: 18px; }
.nux-widget-row span { color: var(--ink-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nux-widget-row b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nux-widget-cell span { font-size: 11px; line-height: 16px; color: var(--ink-secondary); }
.nux-widget-head time.stale { color: var(--warning); }
.nux-widget-lock { width: auto; min-width: 104px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); background: rgba(127,127,127,.22); border: 0; box-shadow: none; align-items: center; gap: 2px; }
.nux-widget-lock b { font-size: 24px; line-height: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nux-widget-lock small { font-size: 11px; line-height: 14px; color: var(--ink-secondary); }
.nux-widget-lock img, .nux-widget-lock .nux-appicon { width: 16px; height: 16px; }
/* detailed (lg only): a real widget host that supports scrolling and a refresh action gets a
   grown anatomy instead of a forced cut — see the factory's own comment for the reasoning. */
.nux-widget-refresh { width: 20px; height: 20px; border-radius: var(--radius-sm); border: 0; background: transparent; padding: 0; color: var(--ink-secondary); cursor: pointer; display: grid; place-items: center; }
.nux-widget-refresh:hover { background: var(--surface-secondary); color: var(--ink); }
.nux-widget-chart { height: 56px; }
.nux-widget-rows-scroll { max-height: 168px; overflow-y: auto; }

/* ---------- Push notification (system banner) ---------- */
.nux-push { width: 100%; max-width: 380px; box-sizing: border-box; padding: var(--space-3) var(--space-4); border-radius: var(--radius-xl); background: var(--surface-raised); box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: var(--space-2); }
.nux-push-head { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; line-height: 16px; color: var(--ink-secondary); }
.nux-push-head .app { font-weight: 600; letter-spacing: 0.01em; }
.nux-push-head time { margin-left: auto; }
.nux-push-head img, .nux-push-head .nux-appicon { width: 16px; height: 16px; border-radius: var(--radius-sm); }
.nux-push-body { display: flex; gap: var(--space-3); align-items: flex-start; }
.nux-push-text { flex: 1; min-width: 0; }
.nux-push-text b { display: block; font-size: 15px; line-height: 20px; font-weight: 600; }
.nux-push-text p { margin: 2px 0 0; font-size: 15px; line-height: 20px; color: var(--ink-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nux-push-body img, .nux-push-body .nux-appicon { flex: none; width: 38px; height: 38px; border-radius: var(--radius-md); object-fit: cover; }
.nux-push-actions { display: flex; gap: var(--space-2); border-top: 1px solid var(--separator); padding-top: var(--space-2); }
.nux-push-actions button { flex: 1; height: 32px; border: 0; border-radius: var(--radius-md); background: var(--surface-secondary); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.nux-push-actions button:hover { background: var(--accent-soft); color: var(--accent); }
.nux-push-lock { background: rgba(127,127,127,.22); box-shadow: none; }

/* ---------- Transactional email ---------- */
.nux-email { width: 100%; max-width: 600px; box-sizing: border-box; background: var(--surface-secondary); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.nux-email-sheet { background: var(--surface-raised); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.nux-email-brand { display: flex; align-items: center; gap: var(--space-2); font-size: 15px; }
.nux-email-brand img, .nux-email-brand .nux-appicon { width: 24px; height: 24px; border-radius: var(--radius-sm); }
.nux-email h1 { margin: var(--space-2) 0 0; font-size: 24px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; }
.nux-email p { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-secondary); }
.nux-email p.fine { font-size: 13px; line-height: 18px; }
.nux-email-code { align-self: flex-start; font-family: var(--font-mono); font-size: 32px; line-height: 36px; letter-spacing: 0.22em; font-weight: 600; background: var(--surface-secondary); border-radius: var(--radius-md); padding: var(--space-2) var(--space-4); }
.nux-email-btn { align-self: flex-start; text-decoration: none; background: var(--accent); color: var(--on-accent); font-size: 15px; font-weight: 600; line-height: 20px; padding: 12px var(--space-5); border-radius: var(--radius-md); }
.nux-email-foot { display: flex; justify-content: space-between; gap: var(--space-4); font-size: 12px; line-height: 16px; color: var(--ink-secondary); }
.nux-email-foot a { color: var(--ink-secondary); }

/* ---------- Printed document ---------- */
.nux-doc { width: 100%; max-width: 720px; box-sizing: border-box; background: var(--surface); color: var(--ink); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); border: 1px solid var(--separator); border-radius: var(--radius-md); }
.nux-doc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); border-bottom: 1px solid var(--separator); padding-bottom: var(--space-3); }
.nux-doc-brand { display: flex; align-items: center; gap: var(--space-2); font-size: 15px; }
.nux-doc-brand img, .nux-doc-brand .nux-appicon { width: 20px; height: 20px; border-radius: var(--radius-sm); }
.nux-doc-meta { display: flex; flex-direction: column; align-items: flex-end; font-size: 12px; line-height: 16px; color: var(--ink-secondary); }
.nux-doc-title { margin: 0; font-size: 24px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; }
.nux-doc-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); }
.nux-doc-facts small { display: block; font-size: 11px; line-height: 16px; color: var(--ink-secondary); }
.nux-doc-facts b { font-size: 15px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nux-doc-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 18px; }
.nux-doc-table th { text-align: left; font-weight: 600; color: var(--ink-secondary); border-bottom: 1px solid var(--separator); padding: var(--space-2) 0; }
.nux-doc-table td { padding: var(--space-2) 0; border-bottom: 1px solid var(--separator); font-variant-numeric: tabular-nums; }
.nux-doc-table .r, .nux-doc-table td:last-child, .nux-doc-table th:last-child { text-align: right; }
.nux-doc-table tfoot td { font-weight: 600; border-bottom: 0; }
.nux-doc-foot { display: flex; justify-content: space-between; font-size: 11px; line-height: 16px; color: var(--ink-secondary); border-top: 1px solid var(--separator); padding-top: var(--space-2); }

@media print {
  /* deliberate: paper is white and ink is black whatever theme the screen was in */
  :root, :root[data-theme="dark"] { --surface: #ffffff; --surface-secondary: #ffffff; --surface-raised: #ffffff; --ink: #000000; --ink-secondary: #3a3a40; --separator: #b0b0b6; --accent: #4a1fbf; }
  body { background: #fff; } /* deliberate: paper */
  .nux-nav, .nux-tabbar, .nux-sidebar, .nux-mnav, .nux-toast, .nux-push, .nux-btn, .nux-iconbtn, .nux-keybar, .nux-composer, .nux-fab { display: none !important; }
  .nux-doc { border: 0; padding: 0; max-width: none; }
  .nux-doc-table tr, .nux-doc-facts, .nux-card, .nux-section { break-inside: avoid; }
  .nux-doc-head { position: running(header); }
  a[href]:after { content: " (" attr(href) ")"; font-size: 11px; color: var(--ink-secondary); }
  .nux-chart, img { break-inside: avoid; }
  @page { size: A4; margin: 18mm 16mm; }
}

/* ---------- VPN: ConnectionStatus (dial), ServerRow, PasswordInput, LogView, AppRow ---------- */
.nux-conn { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-6) var(--space-5) var(--space-5); text-align: center; }
.nux-conn-dial { position: relative; width: min(var(--dial), 56vw); aspect-ratio: 1; border: 0; background: transparent; padding: 0; cursor: pointer; border-radius: var(--radius-pill); display: grid; place-content: center; }
.nux-conn-dial:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 6px; }
.nux-conn-ring { position: absolute; inset: 0; border-radius: var(--radius-pill); border: 12px solid var(--separator); transition: border-color var(--duration-base); }
.nux-conn-disc { width: 64%; aspect-ratio: 1; border-radius: var(--radius-pill); background: var(--surface-raised); border: 1px solid var(--separator); display: grid; place-content: center; color: var(--ink-secondary); }
.nux-conn-shield { width: 36px; height: 36px; fill: currentColor; stroke: none; }
.nux-conn-shield .nux-conn-x { stroke: var(--surface-raised); stroke-width: 2; stroke-linecap: round; fill: none; }
.nux-conn-on .nux-conn-ring { border-color: var(--success); } .nux-conn-on .nux-conn-disc { color: var(--success); } .nux-conn-on .nux-conn-state { color: var(--success); }
.nux-conn-busy .nux-conn-ring { border-color: var(--separator); border-top-color: var(--accent); border-right-color: var(--accent); animation: nux-spin 1.4s linear infinite; } .nux-conn-busy .nux-conn-disc { color: var(--accent); } .nux-conn-busy .nux-conn-state { color: var(--accent); }
.nux-conn-fail .nux-conn-ring { border-color: var(--danger); } .nux-conn-fail .nux-conn-disc { color: var(--danger); } .nux-conn-fail .nux-conn-state { color: var(--danger); }
.nux-conn-state { font-size: 32px; line-height: 36px; font-weight: 700; letter-spacing: -0.015em; margin-top: var(--space-2); }
.nux-conn-detail { font-size: 15px; line-height: 20px; min-height: 20px; color: var(--ink-secondary); display: flex; align-items: center; gap: var(--space-2); justify-content: center; }
.nux-conn-meta { display: flex; gap: var(--space-5); min-height: 18px; font-size: 13px; line-height: 18px; color: var(--ink-secondary); } .nux-conn-meta b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.nux-conn .nux-btn { min-width: min(var(--dial), 100%); margin-top: var(--space-2); }
.nux-server { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: var(--space-2) var(--space-4); width: 100%; border: 0; background: transparent; font: inherit; text-align: left; color: inherit; cursor: pointer; box-sizing: border-box; }
.nux-server:hover { background: var(--surface-secondary); } .nux-server:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.nux-server[aria-pressed="true"] { background: var(--accent-soft); }
.nux-flag { width: 28px; height: 20px; border-radius: 4px; background: var(--surface-secondary); border: 1px solid var(--separator); display: grid; place-content: center; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-secondary); flex: none; }
.nux-server-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nux-server-name { font-size: 15px; line-height: 20px; } .nux-server-host { font-size: 13px; line-height: 18px; color: var(--ink-secondary); font-family: var(--font-mono); font-size: 12px; }
.nux-server-meta { display: flex; align-items: center; gap: var(--space-3); font-size: 13px; color: var(--ink-secondary); font-variant-numeric: tabular-nums; }
.nux-load { display: inline-flex; gap: 2px; align-items: flex-end; height: 12px; } .nux-load i { width: 3px; background: var(--separator); border-radius: 1px; } .nux-load i.on { background: var(--success); } .nux-load-high i.on { background: var(--warning); }
.nux-pw { position: relative; } .nux-pw .nux-input { padding-right: 44px; }
.nux-pw .nux-iconbtn { position: absolute; right: 2px; top: 2px; }
.nux-log { margin: 0; padding: var(--space-3) var(--space-4); background: var(--surface-secondary); border: 1px solid var(--separator); border-radius: var(--radius-md); font-family: var(--font-mono); font-size: 12px; line-height: 18px; color: var(--ink); max-height: 240px; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.nux-log .t { color: var(--ink-secondary); } .nux-log .ok { color: var(--success); } .nux-log .err { color: var(--danger); } .nux-log .warn { color: var(--warning); }
.nux-log-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--ink-secondary); margin-bottom: var(--space-2); }
.nux-approw { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: var(--space-2) var(--space-4); box-sizing: border-box; }
.nux-approw .nux-check { flex: 1; align-items: center; }
.nux-appicon { width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--surface-secondary); display: grid; place-content: center; color: var(--ink-secondary); flex: none; overflow: hidden; } .nux-appicon img { width: 100%; height: 100%; }
.nux-appicon-lg { width: 56px; height: 56px; border-radius: 14px; }

/* ---------- Assistant: ChatMessage, ChatComposer, ToolCall ---------- */
.nux-chat { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
.nux-msg { display: flex; flex-direction: column; gap: var(--space-1); max-width: 85%; }
.nux-msg-bubble { padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); font-size: 17px; line-height: 25px; white-space: pre-wrap; }
.nux-msg-user { align-self: flex-end; align-items: flex-end; } .nux-msg-user .nux-msg-bubble { background: var(--accent); color: var(--on-accent); border-bottom-right-radius: var(--radius-sm); }
.nux-msg-assistant { align-self: flex-start; } .nux-msg-assistant .nux-msg-bubble { background: var(--surface-secondary); color: var(--ink); border-bottom-left-radius: var(--radius-sm); }
.nux-msg-meta { font-size: 12px; line-height: 16px; color: var(--ink-secondary); padding: 0 var(--space-1); }
.nux-msg-bubble code { font-family: var(--font-mono); font-size: 13px; background: var(--surface-raised); padding: 0 var(--space-1); border-radius: var(--radius-sm); }
.nux-typing { display: inline-flex; gap: 4px; padding: var(--space-3) var(--space-4); }
.nux-typing i { width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--ink-secondary); animation: nux-blink 1.2s ease-in-out infinite; } .nux-typing i:nth-child(2) { animation-delay: .2s; } .nux-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes nux-blink { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
.nux-tool { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; line-height: 18px; color: var(--ink-secondary); padding: var(--space-1) var(--space-3); border: 1px solid var(--separator); border-radius: var(--radius-pill); align-self: flex-start; background: var(--surface-raised); }
.nux-tool .nux-icon { width: 16px; height: 16px; } .nux-tool code { font-family: var(--font-mono); font-size: 12px; color: var(--ink); }
.nux-tool-done .nux-icon { color: var(--success); } .nux-tool-busy .nux-spinner { width: 14px; height: 14px; border-width: 2px; }
.nux-composer { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4) calc(var(--space-2) + env(safe-area-inset-bottom)); background: var(--surface); }
.nux-composer textarea { flex: 1; font: inherit; font-size: 17px; line-height: 25px; color: var(--ink); resize: none; max-height: 150px; padding: 9px var(--space-4); border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: var(--surface-raised); box-sizing: border-box; min-height: 44px; }
.nux-composer textarea:focus { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-color: var(--accent); }
.nux-composer textarea::placeholder { color: var(--ink-secondary); }
.nux-send { width: 44px; height: 44px; border-radius: var(--radius-pill); border: 0; background: var(--accent); color: var(--on-accent); display: grid; place-content: center; cursor: pointer; flex: none; }
.nux-send:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; } .nux-send:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.nux-suggest .nux-chip { white-space: nowrap; flex: none; }
.nux-suggest { display: flex; gap: var(--space-2); overflow-x: auto; padding: 0 var(--space-4) var(--space-2); scrollbar-width: none; }

/* ---------- Store: AppTile, UpdateRow ---------- */
.nux-apptile { display: flex; gap: var(--space-4); padding: var(--space-4); background: var(--surface-raised); border: 1px solid var(--separator); border-radius: var(--radius-lg); align-items: center; }
.nux-apptile-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nux-apptile-name { font-size: 17px; line-height: 25px; font-weight: 600; } .nux-apptile-desc { font-size: 13px; line-height: 18px; color: var(--ink-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nux-apptile-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: center; white-space: nowrap; font-size: 12px; line-height: 16px; color: var(--ink-secondary); font-variant-numeric: tabular-nums; }
.nux-version { font-family: var(--font-mono); font-size: 12px; color: var(--ink-secondary); }
.nux-update { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--surface-raised); border: 1px solid var(--separator); border-radius: var(--radius-lg); }
.nux-update-head { display: flex; align-items: center; gap: var(--space-3); }
.nux-update-head .nux-apptile-text { gap: 0; }
.nux-update-notes { margin: 0; padding-left: var(--space-4); font-size: 13px; line-height: 18px; color: var(--ink-secondary); }

/* ---------- Layout helpers for screens ---------- */
.nux-shell { display: flex; min-height: 100%; } .nux-shell-main { flex: 1; min-width: 0; padding: var(--space-6) var(--space-6); display: flex; flex-direction: column; gap: var(--space-6); }
.nux-grid { display: grid; gap: var(--space-5); } .nux-grid-3 { grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .nux-grid-2 { grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .nux-grid-4 { grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
@media (prefers-reduced-motion: reduce) { .nux-conn-busy .nux-conn-ring, .nux-typing i { animation: none; } }
.nux-grid > * { min-width: 0; }

/* ======================= Round 2: Assistant overlay, Store pairing, Terminal, Tasks, Capture, Night shape, Menu bar ======================= */

/* ---------- Assistant overlay: Orb, AnswerCard, ContextChip, NoticeRow, SelectionActions, SkillTile, Onboarding ---------- */
.nux-orb { width: 44px; height: 44px; display: grid; place-items: center; position: relative; flex: none; border: 0; background: transparent; padding: 0; cursor: pointer; border-radius: var(--radius-pill); }
.nux-orb:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.nux-orb i { grid-area: 1 / 1; display: block; border-radius: var(--radius-pill); box-sizing: border-box; }
.nux-orb .core { width: 22px; height: 22px; background: var(--accent); display: grid; place-items: center; }
.nux-orb .core::after { content: ""; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--on-accent); }
.nux-orb-idle .core { animation: nux-breathe 2.4s ease-in-out infinite; }
@keyframes nux-breathe { 50% { transform: scale(1.06); } }
.nux-orb .halo { width: 22px; height: 22px; background: var(--accent); opacity: .25; display: none; transform: scale(calc(1.3 + var(--level, 0) * 0.6)); transition: transform var(--duration-fast); }
.nux-orb .ring { width: 40px; height: 40px; border: 1px solid var(--accent); opacity: .4; display: none; }
.nux-orb-listening .ring, .nux-orb-listening .halo { display: block; }
.nux-orb .arc { width: 36px; height: 36px; border: 2.5px solid transparent; border-top-color: var(--accent); border-right-color: var(--accent); display: none; animation: nux-spin 1.1s linear infinite; }
.nux-orb-thinking .arc { display: block; } .nux-orb-thinking .core { opacity: .7; }
.nux-orb .bars { display: none; gap: 3px; align-items: center; height: 22px; border-radius: 0; } .nux-orb .bars b { width: 3px; border-radius: 2px; background: var(--accent); animation: nux-bar .45s ease-in-out infinite alternate; }
.nux-orb .bars b:nth-child(2) { animation-delay: .1s; } .nux-orb .bars b:nth-child(3) { animation-delay: .2s; } .nux-orb .bars b:nth-child(4) { animation-delay: .3s; }
@keyframes nux-bar { from { height: 6px; } to { height: 22px; } }
.nux-orb-speaking .core { display: none; } .nux-orb-speaking .bars { display: flex; }

.nux-assist { display: flex; flex-direction: column; background: var(--surface-raised); border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-lg); padding: 0 var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom)); box-sizing: border-box; }
.nux-assist-handle { height: 24px; display: grid; place-items: center; }
.nux-assist-handle i { width: 36px; height: 5px; border-radius: 3px; background: var(--separator); }
.nux-assist-body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-1) 0 var(--space-4); }
.nux-question { display: flex; align-items: baseline; gap: var(--space-2); font-size: 15px; line-height: 20px; color: var(--ink-secondary); }
.nux-question > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nux-question small { flex: none; font-size: 12px; color: var(--ink-secondary); }
.nux-answer { display: flex; flex-direction: column; gap: var(--space-3); font-size: 17px; line-height: 25px; color: var(--ink); min-height: 25px; }
.nux-answer p { margin: 0; }
.nux-answer .nux-typing { padding: 0; height: 25px; align-items: center; }
.nux-answer-foot { display: flex; gap: var(--space-1); align-items: center; flex-wrap: wrap; }
.nux-answer-foot .nux-btn-tertiary { height: 32px; padding: 0 var(--space-2); font-size: 13px; }
.nux-answer-foot .faint { font-size: 12px; color: var(--ink-secondary); margin-left: auto; }
.nux-confirm { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--surface-secondary); font-size: 15px; line-height: 20px; }
.nux-confirm code { font-family: var(--font-mono); font-size: 13px; } .nux-confirm .nux-btn { margin-left: auto; } .nux-confirm .nux-btn + .nux-btn { margin-left: 0; }
.nux-choices { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.nux-choices button { font: inherit; font-size: 15px; line-height: 20px; height: 36px; padding: 0 var(--space-3); border: 1px solid var(--border-strong); background: var(--surface-raised); color: var(--ink); border-radius: var(--radius-pill); cursor: pointer; }
.nux-choices button:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.nux-assist-meta { display: flex; align-items: center; gap: var(--space-2); min-height: 28px; padding-bottom: var(--space-2); }
.nux-ctxchip { display: inline-flex; align-items: center; gap: var(--space-1); height: 28px; padding: 0 var(--space-1) 0 3px; border-radius: var(--radius-pill); border: 1px solid var(--separator); background: var(--surface-secondary); font: inherit; font-size: 13px; line-height: 18px; color: var(--ink); cursor: pointer; flex: none; }
.nux-ctxchip .shot, .nux-ctxchip img { width: 22px; height: 22px; border-radius: var(--radius-pill); object-fit: cover; background: var(--separator); display: block; }
.nux-ctxchip .shot { background: repeating-linear-gradient(0deg, var(--border-strong) 0 1px, transparent 1px 4px) center / 12px 12px no-repeat, var(--separator); }
.nux-ctxchip .app { display: none; }
.nux-ctxchip .rm { width: 20px; height: 20px; border-radius: var(--radius-pill); display: grid; place-items: center; color: var(--ink-secondary); border: 0; background: transparent; padding: 0; cursor: pointer; }
.nux-ctxchip .rm:hover { background: var(--separator); color: var(--ink); } .nux-ctxchip .rm .nux-icon { width: 12px; height: 12px; }
/* lg: a legible preview tile for a product where screen sharing defaults on with no per-turn
   consent — the chip is the only place to verify what's about to be sent, and a 22px thumbnail
   isn't legible for that. Same component, same remove behaviour; not a text label pill. */
.nux-ctxchip-lg { height: 72px; width: 40px; padding: 0; border-radius: var(--radius-md); align-items: stretch; position: relative; overflow: hidden; }
.nux-ctxchip-lg .shot, .nux-ctxchip-lg img { width: 100%; height: 100%; border-radius: 0; }
.nux-ctxchip-lg .app { display: block; position: absolute; left: var(--space-1); bottom: var(--space-1); width: 18px; height: 18px; border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 0 0 1.5px var(--surface); }
.nux-ctxchip-lg .app img, .nux-ctxchip-lg .app svg { width: 100%; height: 100%; }
.nux-ctxchip-lg .rm { position: absolute; top: var(--space-1); right: var(--space-1); width: 24px; height: 24px; background: color-mix(in srgb, var(--ink) 55%, transparent); color: #fff; } /* deliberate: the disc sits on a photo, not a themed ground — always white on a dark scrim, like the CaptureSheet controls */
.nux-ctxchip-lg .rm:hover { background: color-mix(in srgb, var(--ink) 70%, transparent); color: #fff; } /* deliberate: same reason */
.nux-ctxchip-lg .rm .nux-icon { width: 14px; height: 14px; }
.nux-notice { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 13px; line-height: 18px; color: var(--ink-secondary); min-height: 28px; }
.nux-notice .nux-icon { width: 14px; height: 14px; flex: none; } .nux-notice-warn .nux-icon { color: var(--warning); } .nux-notice-err .nux-icon { color: var(--danger); } .nux-notice-ok .nux-icon { color: var(--success); }
.nux-notice .nux-btn-tertiary { height: 28px; font-size: 13px; padding: 0 var(--space-1); }
.nux-assist-composer { display: flex; align-items: center; gap: var(--space-1); height: 56px; padding: 0 6px 0 6px; border-radius: var(--radius-pill); background: var(--surface-secondary); border: 1px solid transparent; box-sizing: border-box; }
.nux-assist-composer:focus-within { border-color: var(--accent); background: var(--surface-raised); }
.nux-assist-composer input { flex: 1; min-width: 0; height: 44px; font: inherit; font-size: 17px; color: var(--ink); background: transparent; border: 0; outline: none; padding: 0 var(--space-2); }
.nux-assist-composer input::placeholder { color: var(--ink-secondary); }
.nux-assist-composer .nux-send { width: 44px; height: 44px; }
.nux-assist-composer .nux-send-mic { background: transparent; color: var(--ink); } .nux-assist-composer .nux-send-mic:hover { background: var(--separator); }
.nux-selact { display: inline-flex; gap: 2px; padding: 2px; background: var(--ink); border-radius: var(--radius-pill); box-shadow: var(--shadow-md); }
.nux-selact button { font: inherit; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--surface); background: transparent; border: 0; height: 36px; padding: 0 var(--space-3); border-radius: var(--radius-pill); cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1); }
.nux-selact button:hover { background: rgba(127,127,127,.25); } /* deliberate: the bar is ink-on-ink in both themes; a mid-grey wash reads on either */ .nux-selact button:focus-visible { outline: 2px solid var(--surface); outline-offset: -2px; }
.nux-selact .nux-icon { width: 16px; height: 16px; }
.nux-selection { position: relative; border: 2px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent-soft); opacity: .9; }
.nux-selection i { position: absolute; width: 10px; height: 10px; border-radius: var(--radius-pill); background: var(--accent); border: 2px solid var(--surface); }
.nux-selection i:nth-child(1) { top: -7px; left: -7px; } .nux-selection i:nth-child(2) { top: -7px; right: -7px; } .nux-selection i:nth-child(3) { bottom: -7px; left: -7px; } .nux-selection i:nth-child(4) { bottom: -7px; right: -7px; }
.nux-skill { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--surface-raised); border: 1px solid var(--separator); border-radius: var(--radius-lg); text-align: left; font: inherit; color: inherit; cursor: pointer; }
.nux-skill:hover { background: var(--surface-secondary); } .nux-skill:focus-visible { outline: 2px solid var(--focus-ring); }
.nux-skill .nux-empty-icon { width: 36px; height: 36px; border-radius: var(--radius-md); margin: 0; color: var(--accent); background: var(--accent-soft); }
.nux-skill b { font-size: 15px; line-height: 20px; font-weight: 600; } .nux-skill span { font-size: 13px; line-height: 18px; color: var(--ink-secondary); }
.nux-skill[aria-pressed="true"] { border-color: var(--accent); }
/* quickAction variant: the tile is a wrapper (not itself a button), the body is its own tappable
   button, and a trailing Toggle carries the persistent consent, decoupled from the body tap. */
.nux-skill-quick { cursor: default; }
.nux-skill-quick .nux-skill-body { display: flex; flex-direction: column; gap: var(--space-2); text-align: left; font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; width: 100%; }
.nux-skill-quick .nux-skill-toggle { display: flex; justify-content: flex-end; margin-top: var(--space-1); }
.nux-skill-on { border-color: var(--accent); }
.nux-skill-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.nux-step { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--surface-raised); border: 1px solid var(--separator); border-radius: var(--radius-xl); }
.nux-step-n { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); }
.nux-step h2 { margin: 0; font-size: 24px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; } .nux-step p { margin: 0; font-size: 15px; line-height: 20px; color: var(--ink-secondary); }
.nux-perm { display: flex; align-items: center; gap: var(--space-3); min-height: 48px; font-size: 15px; line-height: 20px; }
.nux-perm .nux-icon { color: var(--ink-secondary); } .nux-perm .why { flex: 1; display: flex; flex-direction: column; } .nux-perm .why small { font-size: 13px; line-height: 18px; color: var(--ink-secondary); }
.nux-perm .nux-badge { flex: none; }

/* ---------- Store: PairingCode, ReleaseRow, InstallQueue ---------- */
.nux-code { display: flex; gap: var(--space-2); }
.nux-code input { flex: 1 1 0; min-width: 0; max-width: var(--code-w, 44px); height: var(--code-h, 52px); text-align: center; font: inherit; font-family: var(--font-mono); font-size: var(--text-code, 24px); font-weight: 500; color: var(--ink); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-raised); text-transform: uppercase; }
.nux-code input:focus { border-color: var(--accent); outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.nux-code .sep { align-self: center; color: var(--ink-secondary); font-size: 24px; }
.nux-code-error input { border-color: var(--danger); }
.nux-release { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: var(--space-2) var(--space-4); box-sizing: border-box; }
.nux-release .v { font-family: var(--font-mono); font-size: 15px; color: var(--ink); min-width: 64px; } .nux-release .d { font-size: 13px; color: var(--ink-secondary); flex: 1; } .nux-release .nux-badge { flex: none; }
.nux-queue { display: flex; flex-direction: column; gap: var(--space-2); }
.nux-queue-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface-raised); border: 1px solid var(--separator); border-radius: var(--radius-lg); }
.nux-queue-item .nux-apptile-text { gap: var(--space-1); } .nux-queue-item .nux-progress { width: 100%; } .nux-queue-item .st { font-size: 13px; line-height: 18px; color: var(--ink-secondary); }

/* ---------- Terminal: TerminalView, KeyBar, SessionRow ---------- */
/* Fixed across every theme on purpose — see tokens.json's term-* usage notes: a terminal keeps
   its own dark scheme regardless of the app's light/dark setting, like every terminal emulator's
   default. A consumer that needs to fall back to the OS emulator's own colours (a "restore
   defaults" setting, per nux-platform/docs/CONVENTIONS.md §12.11) should stop applying these
   classes rather than override them. */
.nux-term { background: var(--term-background); color: var(--term-foreground); font-family: var(--font-mono); font-size: 13px; line-height: 18px; padding: var(--space-3); border-radius: var(--radius-md); white-space: pre; overflow: auto; min-height: 160px; margin: 0; }
.nux-term .p { color: var(--ansi-green); } .nux-term .dim { opacity: .6; } .nux-term .cur { display: inline-block; width: 7px; height: 16px; background: var(--term-cursor); vertical-align: -3px; animation: nux-cursor 1s steps(1) infinite; }
/* The 16-slot ANSI ramp, for a consumer wiring a real escape-code renderer (SGI 30-37/90-97
   foreground, 40-47/100-107 background). Never the only signal a diff/status carries — pair
   with the word or a glyph, the same rule as everywhere else in the system. */
.nux-term .ansi-0, .nux-term .bg-ansi-0 { color: var(--ansi-black); } .nux-term .bg-ansi-0 { background: var(--ansi-black); }
.nux-term .ansi-1, .nux-term .bg-ansi-1 { color: var(--ansi-red); } .nux-term .bg-ansi-1 { background: var(--ansi-red); }
.nux-term .ansi-2, .nux-term .bg-ansi-2 { color: var(--ansi-green); } .nux-term .bg-ansi-2 { background: var(--ansi-green); }
.nux-term .ansi-3, .nux-term .bg-ansi-3 { color: var(--ansi-yellow); } .nux-term .bg-ansi-3 { background: var(--ansi-yellow); }
.nux-term .ansi-4, .nux-term .bg-ansi-4 { color: var(--ansi-blue); } .nux-term .bg-ansi-4 { background: var(--ansi-blue); }
.nux-term .ansi-5, .nux-term .bg-ansi-5 { color: var(--ansi-magenta); } .nux-term .bg-ansi-5 { background: var(--ansi-magenta); }
.nux-term .ansi-6, .nux-term .bg-ansi-6 { color: var(--ansi-cyan); } .nux-term .bg-ansi-6 { background: var(--ansi-cyan); }
.nux-term .ansi-7, .nux-term .bg-ansi-7 { color: var(--ansi-white); } .nux-term .bg-ansi-7 { background: var(--ansi-white); }
.nux-term .ansi-8, .nux-term .bg-ansi-8 { color: var(--ansi-bright-black); } .nux-term .bg-ansi-8 { background: var(--ansi-bright-black); }
.nux-term .ansi-9, .nux-term .bg-ansi-9 { color: var(--ansi-bright-red); } .nux-term .bg-ansi-9 { background: var(--ansi-bright-red); }
.nux-term .ansi-10, .nux-term .bg-ansi-10 { color: var(--ansi-bright-green); } .nux-term .bg-ansi-10 { background: var(--ansi-bright-green); }
.nux-term .ansi-11, .nux-term .bg-ansi-11 { color: var(--ansi-bright-yellow); } .nux-term .bg-ansi-11 { background: var(--ansi-bright-yellow); }
.nux-term .ansi-12, .nux-term .bg-ansi-12 { color: var(--ansi-bright-blue); } .nux-term .bg-ansi-12 { background: var(--ansi-bright-blue); }
.nux-term .ansi-13, .nux-term .bg-ansi-13 { color: var(--ansi-bright-magenta); } .nux-term .bg-ansi-13 { background: var(--ansi-bright-magenta); }
.nux-term .ansi-14, .nux-term .bg-ansi-14 { color: var(--ansi-bright-cyan); } .nux-term .bg-ansi-14 { background: var(--ansi-bright-cyan); }
.nux-term .ansi-15, .nux-term .bg-ansi-15 { color: var(--ansi-bright-white); } .nux-term .bg-ansi-15 { background: var(--ansi-bright-white); }
@keyframes nux-cursor { 50% { opacity: 0; } }
.nux-keybar { display: flex; align-items: center; gap: var(--space-1); padding: var(--space-2) var(--space-3); background: var(--surface-secondary); border-top: 1px solid var(--separator); overflow-x: auto; scrollbar-width: none; box-sizing: border-box; max-width: 100%; }
.nux-keybar button { flex: none; min-width: 40px; height: 36px; padding: 0 var(--space-3); border-radius: var(--radius-md); border: 0; background: transparent; color: var(--ink); font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: 0; cursor: pointer; transition: background var(--duration-fast), color var(--duration-fast); }
.nux-keybar button:hover { background: var(--surface-raised); }
.nux-keybar button.nux-key-glyph { font-family: var(--font-mono); font-size: 13px; color: var(--ink-secondary); }
.nux-keybar button.nux-key-glyph:hover { color: var(--ink); }
.nux-keybar button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.nux-keybar .nux-key-gap { flex: none; width: 1px; height: 20px; margin: 0 var(--space-1); background: var(--separator); }
.nux-keybar button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.nux-session { display: flex; align-items: center; gap: var(--space-3); min-height: 60px; padding: var(--space-2) var(--space-4); width: 100%; border: 0; background: transparent; font: inherit; text-align: left; color: inherit; cursor: pointer; box-sizing: border-box; }
.nux-session:hover { background: var(--surface-secondary); } .nux-session:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.nux-session .dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--separator); flex: none; } .nux-session-attached .dot { background: var(--success); }
.nux-session .t { flex: 1; min-width: 0; display: flex; flex-direction: column; } .nux-session .t b { font-family: var(--font-mono); font-size: 15px; font-weight: 500; } .nux-session .t span { font-size: 13px; color: var(--ink-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nux-session .m { font-size: 13px; color: var(--ink-secondary); font-variant-numeric: tabular-nums; }

/* ---------- Finance: TaskRow, CaptureSheet ---------- */
.nux-task { display: flex; align-items: flex-start; gap: var(--space-3); min-height: 60px; padding: var(--space-3) var(--space-4); box-sizing: border-box; }
.nux-task .nux-check { margin-top: 2px; } .nux-task .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nux-task .t b { font-size: 15px; line-height: 20px; font-weight: 500; } .nux-task .t span { font-size: 13px; line-height: 18px; color: var(--ink-secondary); }
.nux-task-done .t b { text-decoration: line-through; color: var(--ink-secondary); }
.nux-capture { display: flex; flex-direction: column; background: var(--ink); border-radius: var(--radius-xl) var(--radius-xl) 0 0; overflow: hidden; color: var(--surface); }
/* deliberate: the camera viewfinder is the same dark in both themes */
.nux-capture-view { position: relative; aspect-ratio: 3 / 4; background: linear-gradient(160deg, #3a3a3e, #17171a); display: grid; place-content: center; }
.nux-capture-frame { position: absolute; inset: var(--space-6) var(--space-5); border: 2px dashed rgba(255,255,255,.55); border-radius: var(--radius-md); }
.nux-capture-hint { position: absolute; left: 0; right: 0; top: var(--space-3); text-align: center; font-size: 13px; opacity: .8; }
.nux-capture-bar { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5) calc(var(--space-4) + env(safe-area-inset-bottom)); }
.nux-shutter { width: 68px; height: 68px; border-radius: var(--radius-pill); border: 4px solid #fff; /* deliberate: the shutter is white on the viewfinder in both themes */ background: transparent; padding: 4px; cursor: pointer; }
.nux-shutter::after { content: ""; display: block; width: 100%; height: 100%; border-radius: var(--radius-pill); background: #fff; } /* deliberate: the camera view is always dark, the shutter always white */
.nux-shutter:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.nux-capture .nux-iconbtn { color: #fff; } /* deliberate: controls sit on the dark viewfinder */ .nux-capture .nux-iconbtn:hover { background: rgba(255,255,255,.15); }

/* ---------- Health: NightShape (hypnogram) ---------- */
.nux-night { display: flex; flex-direction: column; gap: var(--space-2); }
.nux-night-track { position: relative; height: 56px; }
.nux-night-track span { position: absolute; height: 12px; border-radius: 3px; }
.nux-night .awake { background: var(--series-3); top: 0; } .nux-night .rem { background: var(--series-4); top: 14px; } .nux-night .light { background: var(--seq-300); top: 28px; } .nux-night .deep { background: var(--seq-600); top: 42px; }
.nux-night-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-secondary); }
.nux-night-labels { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; gap: 2px; font-size: 11px; line-height: 12px; color: var(--ink-secondary); transform: translateX(calc(-100% - 8px)); }

/* ---------- Mac menu bar (VPN) ---------- */
.nux-menubar { width: 320px; background: var(--surface-raised); border: 1px solid var(--separator); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); font-size: 13px; line-height: 18px; }
.nux-menubar .nux-btn { height: 32px; font-size: 13px; }
.nux-statusrow { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-1); width: 100%; box-sizing: border-box; }
.nux-statusrow .dot { flex: none; width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--separator); } .nux-statusrow-on .dot { background: var(--success); } .nux-statusrow-busy .dot { background: var(--accent); } .nux-statusrow-fail .dot { background: var(--danger); }
.nux-statusrow b { font-weight: 600; } .nux-statusrow span:last-child { color: var(--ink-secondary); margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nux-menubar-sep { height: 1px; background: var(--separator); margin: var(--space-1) 0; }
.nux-menubar .row { display: flex; justify-content: space-between; align-items: center; min-height: 28px; padding: 0 var(--space-1); color: var(--ink); }
.nux-menubar .row span { color: var(--ink-secondary); }
.nux-menubar .nux-alert { padding: var(--space-2) var(--space-3); font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .nux-orb .core, .nux-orb .arc, .nux-orb .bars b, .nux-term .cur { animation: none; } }

/* ======================= Responsive rules (bp-sm 600 · bp-md 900 · bp-lg 1200) ======================= */

.nux-stat, .nux-score, .nux-widget, .nux-menubar, .nux-phone, .nux-apptile, .nux-card { max-width: 100%; box-sizing: border-box; }
.nux-stat, .nux-score { min-width: 0; }

.nux-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Table that does not fit its container: stacked two-line rows instead of a sideways scroll (data-stacked, set by the
   bundle's Table). The header row stays for assistive technology (clipped, not display:none); the roles are set in script. */
.nux-table[data-stacked] { display: block; }
.nux-table[data-stacked] thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nux-table[data-stacked] tbody { display: block; }
.nux-table[data-stacked] thead tr { display: block; min-height: 0; padding: 0; border: 0; }
.nux-table[data-stacked] thead th { display: block; padding: 0; border: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nux-table[data-stacked] tr { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 2px; min-height: 44px; padding: 6px 12px; border-bottom: 1px solid var(--separator); }
.nux-table[data-stacked] td { display: block; flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; padding: 0; border: 0; background: none; font-size: 12px; line-height: 16px; color: var(--ink-secondary); text-align: left; font-weight: 400; }
.nux-table[data-stacked] td.nux-table-p-main { flex: 1 1 calc(100% - 130px); font-size: 15px; line-height: 20px; color: var(--ink); font-weight: 600; }
.nux-table[data-stacked] td.nux-table-p-badge { flex: none; font-size: 15px; line-height: 20px; color: var(--ink); font-weight: 400; }
.nux-table[data-stacked] td.nux-table-p-wide { flex: 1 1 100%; white-space: normal; }
.nux-table[data-stacked] td.nux-table-p-hide { display: none; }
.nux-table[data-stacked] tbody tr:hover td { background: none; }
.nux-table[data-stacked] tbody tr:hover { background: var(--surface-secondary); }
.nux-table[data-stacked] tr[aria-selected="true"] { background: var(--accent-soft); }
.nux-table[data-stacked] tr[aria-selected="true"] td { background: none; }
@media (max-width: 899px) {
  .nux-sidebar { display: none; }
  .nux-shell-main { padding: var(--space-5) var(--space-4); gap: var(--space-5); }
  .nux-page { padding: var(--space-5) var(--space-4); }
  .nux-pagehead-title { font-size: 24px; line-height: 28px; }
  .nux-drawer { max-width: 100%; }
  .nux-nav-links { display: none; }
}
@media (max-width: 599px) {
  .nux-card { padding: var(--space-4); }
  .nux-btn-lg, .nux-composer textarea { font-size: 17px; }
  .nux-money-xl { font-size: 32px; line-height: 36px; }
  .nux-conn-state { font-size: 24px; line-height: 28px; }
  .nux-meter svg { width: 100px; height: 60px; }
  .nux-dialog { max-width: 100%; }
  .nux-pagehead { flex-direction: column; align-items: stretch; }
  .nux-pagehead-actions { flex-wrap: wrap; }
  .nux-pagination button { min-width: 32px; height: 32px; }
}

/* ======================= Round 3: app shell, forms, sync, do/don't, figures, flows ======================= */
.nux-appshell { display: flex; min-height: 100%; background: var(--surface); }
.nux-appshell > .nux-sidebar { flex: none; }
.nux-appshell-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nux-appshell-content { flex: 1; padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-6); max-width: var(--content-page, 1024px); width: 100%; box-sizing: border-box; margin: 0 auto; }
.nux-appshell > .nux-tabbar, .nux-appshell > .nux-mnav { display: none; }
@media (max-width: 899px) {
  .nux-appshell { flex-direction: column; }
  .nux-appshell > .nux-sidebar { display: none; }
  .nux-appshell > .nux-mnav { display: grid; } .nux-appshell > .nux-mnav.nux-mnav-large { display: block; }
  .nux-appshell > .nux-tabbar { display: flex; position: sticky; bottom: 0; }
  .nux-appshell-content { padding: var(--space-4); gap: var(--space-5); }
}
/* Form flow */
.nux-form { display: flex; flex-direction: column; gap: var(--space-4); }
.nux-form-summary { border-left: 0; }
.nux-form-summary ul { margin: var(--space-1) 0 0; padding-left: var(--space-4); }
.nux-form-summary a { color: inherit; font-weight: 500; }
.nux-form-foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; min-height: 40px; }
.nux-form-foot .nux-form-status { margin-right: auto; font-size: 13px; line-height: 18px; color: var(--ink-secondary); display: inline-flex; align-items: center; gap: var(--space-1); min-height: 18px; }
.nux-form-status-ok { color: var(--success); } .nux-form-status-err { color: var(--danger); }
.nux-form-status .nux-icon { width: 16px; height: 16px; }
/* Sync state */
.nux-sync { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 13px; line-height: 18px; color: var(--ink-secondary); min-height: 18px; }
.nux-sync .nux-icon { width: 16px; height: 16px; } .nux-sync .nux-spinner { width: 14px; height: 14px; border-width: 2px; }
.nux-sync-ok .nux-icon { color: var(--success); } .nux-sync-stale .nux-icon { color: var(--warning); } .nux-sync-stale { color: var(--warning); } .nux-sync-off .nux-icon { color: var(--danger); } .nux-sync-off { color: var(--danger); }
.nux-syncbar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); font-size: 13px; line-height: 18px; background: var(--surface-secondary); color: var(--ink); border-bottom: 1px solid var(--separator); min-height: 36px; box-sizing: border-box; }
.nux-syncbar-off { background: var(--danger-soft); } .nux-syncbar-stale { background: var(--warning-soft); }
.nux-syncbar .nux-icon { width: 16px; height: 16px; flex: none; } .nux-syncbar-off .nux-icon { color: var(--danger); } .nux-syncbar-stale .nux-icon { color: var(--warning); }
.nux-syncbar .nux-btn { margin-left: auto; height: 28px; font-size: 13px; padding: 0 var(--space-2); }
/* Do / don't */
.nux-dodont { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); }
.nux-dodont-panel { display: flex; flex-direction: column; gap: var(--space-2); }
.nux-dodont-frame { border: 1px solid var(--separator); border-radius: var(--radius-lg); padding: var(--space-4); background: var(--surface-raised); min-height: 96px; display: flex; flex-direction: column; gap: var(--space-3); justify-content: center; }
.nux-dodont-cap { display: flex; gap: var(--space-2); align-items: flex-start; font-size: 13px; line-height: 18px; color: var(--ink-secondary); }
.nux-dodont-cap b { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; flex: none; }
.nux-dodont-cap .nux-icon { width: 16px; height: 16px; }
.nux-dodont-do .nux-dodont-cap b { color: var(--success); } .nux-dodont-dont .nux-dodont-cap b { color: var(--danger); }
.nux-dodont-do .nux-dodont-frame { border-top: 3px solid var(--success); } .nux-dodont-dont .nux-dodont-frame { border-top: 3px solid var(--danger); }
/* Figure */
.nux-figure { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.nux-figure-media { border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-secondary); aspect-ratio: 16 / 9; display: grid; place-content: center; color: var(--ink-secondary); }
.nux-figure-media img, .nux-figure-media svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.nux-figure-media.r-1 { aspect-ratio: 1; } .nux-figure-media.r-4x3 { aspect-ratio: 4 / 3; } .nux-figure-media.r-3x2 { aspect-ratio: 3 / 2; }
.nux-figure figcaption { font-size: 13px; line-height: 18px; color: var(--ink-secondary); }
/* Flow (sequence of frames) */
.nux-flow { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-2); box-sizing: border-box; max-width: 100%; }
.nux-flow-step { flex: 1 1 0; min-width: 0; max-width: 300px; display: flex; flex-direction: column; gap: var(--space-2); }
.nux-flow-frame { width: 100%; box-sizing: border-box; height: 520px; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--separator); background: var(--surface-secondary); display: flex; flex-direction: column; box-shadow: var(--shadow-sm); }
.nux-flow-frame > .nux-phone-body { overflow: hidden; }
.nux-flow-cap { font-size: 13px; line-height: 18px; color: var(--ink-secondary); display: flex; gap: var(--space-2); }
.nux-flow-cap b { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.nux-flow-arrow { flex: none; align-self: center; color: var(--separator); margin-top: -40px; }
@media (max-width: 899px) { .nux-flow { flex-wrap: wrap; } .nux-flow-step { flex-basis: 260px; } .nux-flow-arrow { display: none; } }

/* ======================= Round 4: patterns learned from the field (Mobbin research) ======================= */
/* PeriodNav */
.nux-period { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--surface-raised); border: 1px solid var(--separator); border-radius: var(--radius-lg); }
.nux-period-text { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.nux-period-text b { font-size: 17px; line-height: 25px; font-weight: 600; } .nux-period-text span { font-size: 13px; line-height: 18px; color: var(--ink-secondary); min-height: 18px; }
/* BudgetRow */
.nux-budget { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); }
.nux-budget-head { display: flex; align-items: center; gap: var(--space-3); }
.nux-budget-head .nux-appicon { width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); }
.nux-budget-head .t { flex: 1; min-width: 0; display: flex; flex-direction: column; } .nux-budget-head .t b { font-size: 15px; line-height: 20px; font-weight: 500; } .nux-budget-head .t span { font-size: 13px; line-height: 18px; color: var(--ink-secondary); }
.nux-budget-head .r { text-align: right; display: flex; flex-direction: column; } .nux-budget-head .r b { font-size: 15px; line-height: 20px; font-weight: 500; font-variant-numeric: tabular-nums; } .nux-budget-head .r span { font-size: 13px; line-height: 18px; color: var(--ink-secondary); min-height: 18px; }
.nux-budget-over .r b, .nux-budget-over .r span { color: var(--danger); }
.nux-budget .nux-progress-track { height: 8px; }
/* range, no spent: a bracket over an empty track — no fill, since there's nothing logged yet. */
.nux-budget-range .nux-progress-track { position: relative; background: var(--surface-secondary); border-radius: var(--radius-pill); overflow: visible; }
.nux-budget-band { position: absolute; top: -2px; bottom: -2px; border-radius: var(--radius-pill); border: 2px solid var(--accent); box-sizing: border-box; }
/* ScoreHero */
.nux-scorehero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-1); padding: var(--space-5) var(--space-4); }
.nux-scorehero .nux-meter svg { width: var(--dial); height: 120px; }
.nux-scorehero .nux-meter .track, .nux-scorehero .nux-meter .fill { stroke-width: 11; }
.nux-scorehero .nux-meter-value { font-size: 28px; letter-spacing: -0.02em; } /* deliberate: SVG text in the gauge's own units — it scales with the drawing, see Fit before style */
.nux-scorehero-title { font-size: 24px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; margin-top: var(--space-2); }
.nux-scorehero-grade { margin-top: var(--space-2); min-height: 20px; }
.nux-scorehero-body { font-size: 15px; line-height: 20px; color: var(--ink-secondary); max-width: 360px; min-height: 40px; }
.nux-scorehero-base { font-size: 13px; line-height: 18px; color: var(--ink-secondary); min-height: 18px; display: inline-flex; gap: var(--space-2); align-items: center; }
.nux-scorehero-drivers { width: 100%; max-width: 420px; margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); text-align: left; border-top: 1px solid var(--separator); padding-top: var(--space-3); }
/* MetricRow */
.nux-metric { display: flex; align-items: center; gap: var(--space-3); min-height: 60px; padding: var(--space-2) var(--space-4); width: 100%; border: 0; background: transparent; font: inherit; text-align: left; color: inherit; box-sizing: border-box; }
button.nux-metric { cursor: pointer; } button.nux-metric:hover { background: var(--surface-secondary); } button.nux-metric:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.nux-metric .nux-icon { color: var(--ink-secondary); }
.nux-metric .t { flex: 1; min-width: 0; display: flex; flex-direction: column; } .nux-metric .t b { font-size: 15px; line-height: 20px; font-weight: 500; } .nux-metric .t span { font-size: 13px; line-height: 18px; color: var(--ink-secondary); min-height: 18px; }
.nux-metric .v { display: flex; flex-direction: column; align-items: flex-end; } .nux-metric .v b { font-size: 19px; line-height: 24px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.005em; } .nux-metric .v b small { font-size: 13px; font-weight: 400; color: var(--ink-secondary); margin-left: 2px; }
.nux-metric .v span { font-size: 13px; line-height: 18px; color: var(--ink-secondary); min-height: 18px; display: inline-flex; align-items: center; gap: 2px; font-variant-numeric: tabular-nums; } .nux-metric .v .nux-icon { width: 14px; height: 14px; }
.nux-metric-up .v span { color: var(--success); } .nux-metric-down .v span { color: var(--danger); }
/* StageBars */
.nux-stages { display: flex; flex-direction: column; gap: var(--space-3); }
.nux-stage { display: grid; grid-template-columns: 64px 1fr 64px; gap: var(--space-3); align-items: center; font-size: 13px; line-height: 18px; }
.nux-stage .n { color: var(--ink); font-weight: 500; } .nux-stage .n small { color: var(--ink-secondary); font-weight: 400; margin-left: 4px; }
.nux-stage .d { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.nux-stage-track { position: relative; height: 10px; border-radius: var(--radius-pill); background: var(--surface-secondary); overflow: visible; }
.nux-stage-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 5px; }
.nux-stage-range { position: absolute; top: -3px; height: 16px; border-left: 2px solid var(--border-strong); border-right: 2px solid var(--border-strong); box-sizing: border-box; opacity: .7; }
.nux-stage-awake .nux-stage-fill { background: var(--series-3); } .nux-stage-rem .nux-stage-fill { background: var(--series-4); } .nux-stage-light .nux-stage-fill { background: var(--seq-300); } .nux-stage-deep .nux-stage-fill { background: var(--seq-600); }
.nux-stages-foot { font-size: 12px; color: var(--ink-secondary); display: inline-flex; align-items: center; gap: var(--space-1); } .nux-stages-foot i { width: 12px; height: 10px; border-left: 2px solid var(--border-strong); border-right: 2px solid var(--border-strong); display: inline-block; }
/* FlagRow */
.nux-flags { display: flex; gap: var(--space-2); align-items: center; }
.nux-flags-label { font-size: 13px; line-height: 18px; color: var(--ink-secondary); margin-right: var(--space-1); }
.nux-flagbtn { width: 44px; height: 44px; border-radius: var(--radius-pill); border: 1px solid var(--separator); background: var(--surface-raised); display: grid; place-items: center; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink); cursor: pointer; padding: 0; }
.nux-flagbtn:hover { background: var(--surface-secondary); } .nux-flagbtn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .nux-flagbtn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* VoiceMode */
.nux-voice { display: flex; flex-direction: column; min-height: 520px; background: var(--surface); }
.nux-voice-top { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-4); }
.nux-voice-top b { font-size: 15px; font-weight: 600; } .nux-voice-top span { font-size: 15px; color: var(--ink-secondary); margin-left: var(--space-1); }
.nux-voice-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-5); padding: var(--space-5); }
.nux-voice-stage .nux-orb { width: 176px; height: 176px; transform: none; }
.nux-voice-stage .nux-orb .core { width: 88px; height: 88px; } .nux-voice-stage .nux-orb .core::after { width: 24px; height: 24px; border-radius: var(--radius-pill); }
.nux-voice-stage .nux-orb .halo { width: 88px; height: 88px; } .nux-voice-stage .nux-orb .ring { width: 160px; height: 160px; }
.nux-voice-stage .nux-orb .arc { width: 144px; height: 144px; border-width: 6px; }
.nux-voice-stage .nux-orb .bars { height: 88px; gap: 10px; } .nux-voice-stage .nux-orb .bars b { width: 10px; border-radius: 5px; animation-name: nux-bar-lg; }
@keyframes nux-bar-lg { from { height: 24px; } to { height: 88px; } }
.nux-voice-caption { font-size: 17px; line-height: 25px; color: var(--ink-secondary); text-align: center; max-width: 320px; min-height: 50px; }
.nux-voice-bar { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4) var(--space-5) calc(var(--space-4) + env(safe-area-inset-bottom)); }
.nux-voice-bar .nux-iconbtn-outlined { border-radius: var(--radius-pill); width: 52px; height: 52px; }
.nux-voice-bar .nux-btn-danger { border-radius: var(--radius-pill); }
/* Transaction detail header */
.nux-txhead { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-5) var(--space-4) var(--space-4); }
.nux-txhead .nux-avatar { margin-bottom: var(--space-1); }
.nux-txhead-title { font-size: 19px; line-height: 24px; font-weight: 600; } .nux-txhead-sub { font-size: 13px; line-height: 18px; color: var(--ink-secondary); min-height: 18px; }

/* ======================= Round 5: accounts, amount pad, route card ======================= */
.nux-account { display: flex; align-items: center; gap: var(--space-3); min-height: 60px; padding: var(--space-2) var(--space-4); width: 100%; border: 0; background: transparent; font: inherit; text-align: left; color: inherit; cursor: pointer; box-sizing: border-box; }
.nux-account:hover { background: var(--surface-secondary); } .nux-account:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.nux-account .t { flex: 1; min-width: 0; display: flex; flex-direction: column; } .nux-account .t b { font-size: 15px; line-height: 20px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nux-account .t span { font-size: 13px; line-height: 18px; color: var(--ink-secondary); min-height: 18px; }
.nux-account .v { display: flex; flex-direction: column; align-items: flex-end; } .nux-account .v .nux-money { font-size: 15px; line-height: 20px; font-weight: 500; } .nux-account .v span { font-size: 13px; line-height: 18px; color: var(--ink-secondary); min-height: 18px; }
.nux-account-group { display: flex; flex-direction: column; gap: var(--space-2); }
.nux-account-group-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 var(--space-1); }
.nux-account-group-head b { font-size: 17px; line-height: 25px; font-weight: 600; } .nux-account-group-head .nux-money { font-size: 15px; font-weight: 500; }
/* AmountPad */
.nux-amount { display: flex; flex-direction: column; gap: var(--space-4); }
.nux-amount-display { display: flex; align-items: baseline; justify-content: center; gap: var(--space-1); min-height: 64px; padding: var(--space-4) 0; font-variant-numeric: tabular-nums; }
.nux-amount-display b { font-size: 48px; line-height: 52px; font-weight: 800; letter-spacing: -0.02em; } .nux-amount-display span { font-size: 24px; line-height: 28px; font-weight: 500; color: var(--ink-secondary); }
.nux-amount-display b.empty { color: var(--ink-disabled); }
.nux-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.nux-pad button { height: 56px; border-radius: var(--radius-md); border: 0; background: var(--surface-secondary); color: var(--ink); font: inherit; font-size: 24px; font-weight: 500; font-variant-numeric: tabular-nums; cursor: pointer; display: grid; place-items: center; }
.nux-pad button:hover { background: var(--separator); } .nux-pad button:active { opacity: var(--opacity-pressed); } .nux-pad button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.nux-pad button.k { background: transparent; color: var(--ink-secondary); }
/* RouteCard */
.nux-route { display: flex; flex-direction: column; background: var(--surface-raised); border: 1px solid var(--separator); border-radius: var(--radius-lg); overflow: hidden; }
.nux-route-map { position: relative; aspect-ratio: 16 / 9; background: var(--surface-secondary); }
.nux-route-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.nux-route-map .grid { stroke: var(--separator); stroke-width: 1; } .nux-route-map .trace { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.nux-route-map .start { fill: var(--success); } .nux-route-map .end { fill: var(--ink); }
.nux-route-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.nux-route-title { display: flex; flex-direction: column; } .nux-route-title b { font-size: 17px; line-height: 25px; font-weight: 600; } .nux-route-title span { font-size: 13px; line-height: 18px; color: var(--ink-secondary); min-height: 18px; }
.nux-route-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: var(--space-3); }
.nux-route-stats div { display: flex; flex-direction: column; } .nux-route-stats small { font-size: 12px; line-height: 16px; color: var(--ink-secondary); } .nux-route-stats b { font-size: 19px; line-height: 24px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.005em; }

/* ======================= Round 6: date picker, notifications, logo grid, holdings, web sign-in ======================= */
.nux-cal { display: flex; flex-direction: column; gap: var(--space-3); max-width: 360px; }
.nux-cal-range { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-2); }
.nux-cal-range > div { display: flex; flex-direction: column; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--separator); min-height: 44px; box-sizing: border-box; }
.nux-cal-range > div[aria-current="true"] { border-color: var(--accent); }
.nux-cal-range small { font-size: 12px; line-height: 16px; color: var(--ink-secondary); } .nux-cal-range b { font-size: 15px; line-height: 20px; font-weight: 500; min-height: 20px; }
.nux-cal-range .nux-icon { color: var(--ink-secondary); }
.nux-cal-head { display: flex; align-items: center; justify-content: space-between; }
.nux-cal-head b { font-size: 17px; line-height: 25px; font-weight: 600; }
.nux-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px 0; }
.nux-cal-grid .wd { font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-secondary); text-align: center; padding-bottom: var(--space-1); }
.nux-cal-grid button { height: 40px; padding: 0; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--ink); cursor: pointer; position: relative; border-radius: 0; }
.nux-cal-grid button span { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-pill); }
.nux-cal-grid button:hover span { background: var(--surface-secondary); }
.nux-cal-grid button.muted { color: var(--ink-disabled); } .nux-cal-grid button:disabled { color: var(--ink-disabled); cursor: default; }
.nux-cal-grid button.today span { box-shadow: inset 0 0 0 1px var(--border-strong); }
.nux-cal-grid button.in, .nux-cal-grid button.start, .nux-cal-grid button.end { background: var(--accent-soft); } .nux-cal-grid button.start { border-radius: var(--radius-pill) 0 0 var(--radius-pill); } .nux-cal-grid button.end { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; } .nux-cal-grid button.start.end { border-radius: var(--radius-pill); }
.nux-cal-grid button.start span, .nux-cal-grid button.end span { background: var(--accent); color: var(--on-accent); }
.nux-cal-grid button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; z-index: 1; }
.nux-cal-presets { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; padding: 2px; }
.nux-cal-presets .nux-chip { flex: none; }
/* NotificationRow */
.nux-notif { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); width: 100%; border: 0; background: transparent; font: inherit; text-align: left; color: inherit; cursor: pointer; box-sizing: border-box; min-height: 64px; }
.nux-notif:hover { background: var(--surface-secondary); } .nux-notif:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.nux-notif-unread { background: var(--accent-soft); } .nux-notif-unread:hover { background: var(--accent-soft); }
.nux-notif .ic { width: 36px; height: 36px; border-radius: var(--radius-pill); background: var(--surface-secondary); color: var(--ink-secondary); display: grid; place-items: center; flex: none; }
.nux-notif-unread .ic { background: var(--surface-raised); color: var(--accent); }
.nux-notif .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nux-notif .t b { font-size: 15px; line-height: 20px; font-weight: 500; } .nux-notif-unread .t b { font-weight: 600; }
.nux-notif .t span { font-size: 13px; line-height: 18px; color: var(--ink-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nux-notif time { font-size: 12px; line-height: 16px; color: var(--ink-secondary); white-space: nowrap; flex: none; min-width: 32px; text-align: right; }
.nux-notif .dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--accent); flex: none; margin-top: 6px; }
.nux-notif .dot.off { visibility: hidden; }
/* LogoGrid */
.nux-logogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--space-3); }
.nux-logocell { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-2); border-radius: var(--radius-lg); border: 1px solid var(--separator); background: var(--surface-raised); font: inherit; color: inherit; cursor: pointer; text-align: center; }
.nux-logocell:hover { background: var(--surface-secondary); } .nux-logocell:focus-visible { outline: 2px solid var(--focus-ring); }
.nux-logocell b { font-size: 13px; line-height: 18px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.nux-logocell span { font-size: 12px; line-height: 16px; color: var(--ink-secondary); min-height: 16px; }
.nux-logocell-missing .nux-avatar { background: var(--surface-secondary); color: var(--ink-secondary); border: 1px dashed var(--border-strong); }
/* HoldingRow */
.nux-holding { display: flex; align-items: center; gap: var(--space-3); min-height: 64px; padding: var(--space-2) var(--space-4); width: 100%; border: 0; background: transparent; font: inherit; text-align: left; color: inherit; cursor: pointer; box-sizing: border-box; }
.nux-holding:hover { background: var(--surface-secondary); } .nux-holding:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.nux-holding .t { flex: 1; min-width: 0; display: flex; flex-direction: column; } .nux-holding .t b { font-size: 15px; line-height: 20px; font-weight: 600; font-family: var(--font-mono); font-size: 13px; } .nux-holding .t span { font-size: 13px; line-height: 18px; color: var(--ink-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nux-holding .nux-sparkline { width: 64px; height: 24px; }
.nux-holding .v { display: flex; flex-direction: column; align-items: flex-end; min-width: 96px; } .nux-holding .v .nux-money { font-size: 15px; line-height: 20px; font-weight: 500; } .nux-holding .v span { font-size: 13px; line-height: 18px; min-height: 18px; font-variant-numeric: tabular-nums; color: var(--ink-secondary); }
.nux-holding-up .v span { color: var(--success); } .nux-holding-down .v span { color: var(--danger); }
/* Starfield — full-bleed ambient backdrop; the consumer positions it and gives foreground content position:relative to sit on top */
.nux-starfield { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.nux-starfield svg { display: block; width: 100%; height: 100%; }
.nux-starfield .star { fill: var(--ink); }
.nux-starfield .star-accent { fill: var(--accent); }
.nux-starfield .ring { fill: none; stroke: var(--accent); stroke-width: 0.3; }
.nux-starfield .node { fill: var(--accent); }
.nux-starfield .orbit { transform-origin: 50px 50px; animation: nux-starfield-spin 120s linear infinite; }
.nux-starfield .mote { fill: var(--accent); opacity: var(--opacity-disabled); animation: nux-starfield-twinkle 4s ease-in-out infinite; }
.nux-starfield .mote-1 { animation-delay: -1.3s; }
.nux-starfield .mote-2 { animation-delay: -2.6s; }
@keyframes nux-starfield-spin { to { transform: rotate(360deg); } }
@keyframes nux-starfield-twinkle { 0%, 100% { opacity: var(--opacity-disabled); } 50% { opacity: var(--opacity-skeleton); } }
@media (prefers-reduced-motion: reduce) { .nux-starfield .orbit, .nux-starfield .mote { animation: none; } }

/* ---------- Assistant: LearnedRow, MemoryList ---------- */
.nux-learned { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; max-width: 100%; box-sizing: border-box; padding: var(--space-2) var(--space-4); background: var(--surface-secondary); border-radius: var(--radius-md); }
.nux-learned-text { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-secondary); }
.nux-learned-more { font-size: 13px; line-height: 18px; color: var(--ink-secondary); }
.nux-learned-actions { display: flex; gap: var(--space-2); }
.nux-learned-actions .nux-btn { min-height: var(--tap-min); height: auto; padding: 0 var(--space-4); }
.nux-learned-actions .nux-learned-keep { color: var(--accent); font-weight: 600; }
.nux-memlist { display: flex; flex-direction: column; gap: var(--space-1); width: 100%; max-width: 100%; box-sizing: border-box; }
.nux-memrow { display: flex; align-items: center; gap: var(--space-2); width: 100%; max-width: 100%; box-sizing: border-box; padding: var(--space-2) var(--space-4); background: var(--surface-secondary); border-radius: var(--radius-md); }
.nux-memrow-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.nux-memrow-text b { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink); }
.nux-memrow-text span { font-size: 12px; line-height: 16px; color: var(--ink-secondary); }
.nux-mem-forget { flex: none; min-height: var(--tap-min); min-width: var(--tap-min); padding: 0 var(--space-4); border: 0; border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--danger); font: inherit; font-size: 13px; line-height: 18px; font-weight: 600; cursor: pointer; }
.nux-mem-forget:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ---------- OrbitClock ---------- */
.nux-orbit { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); width: 176px; max-width: 100%; box-sizing: border-box; }
.nux-orbit svg { width: 176px; height: 176px; display: block; }
.nux-orbit-sm, .nux-orbit-sm svg { width: 120px; height: 120px; }
.nux-orbit .ring { fill: none; stroke: var(--accent); stroke-width: 0.6; opacity: var(--opacity-disabled); }
.nux-orbit .node { fill: var(--accent); }
.nux-orbit b { font-size: 24px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.nux-orbit span { font-size: 13px; line-height: 18px; color: var(--ink-secondary); min-height: 18px; }
.nux-orbit-quiet { opacity: var(--opacity-disabled); }

/* ---------- Provenance ---------- */
.nux-prov { display: inline-flex; align-items: center; font-size: 12px; line-height: 16px; font-weight: 500; padding: 0 var(--space-2); height: 20px; border-radius: var(--radius-sm); background: var(--surface-secondary); color: var(--ink-secondary); }
.nux-prov-measured { background: var(--accent-soft); color: var(--accent); }
.nux-prov-derived { background: var(--surface-secondary); color: var(--ink); }
.nux-prov-estimated { background: var(--warning-soft); color: var(--warning); }
.nux-prov-stale { background: var(--danger-soft); color: var(--danger); }
.nux-prov-assumed { background: var(--surface-secondary); color: var(--ink-secondary); }
.nux-prov-unavailable { background: var(--surface-secondary); color: var(--ink-secondary); }

/* ---------- HealthScoreboard ---------- */
.nux-hboard { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; max-width: 100%; box-sizing: border-box; }
.nux-hboard-row { display: flex; flex-direction: column; gap: var(--space-1); }
.nux-hboard-top { display: flex; align-items: center; gap: var(--space-2); }
.nux-hboard-top b { flex: 1; min-width: 0; font-size: 15px; line-height: 20px; font-weight: 600; }
.nux-hboard-score { font-size: 15px; line-height: 20px; font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }
.nux-hboard-track { height: 6px; border-radius: var(--radius-pill); background: var(--separator); overflow: hidden; }
.nux-hboard-track i { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-pill); }
.nux-hboard-meta { font-size: 12px; line-height: 16px; color: var(--ink-secondary); min-height: 16px; }
.nux-hboard-meta-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.nux-hboard-meta-row .nux-sparkline { flex: none; }
.nux-hboard-detail { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-secondary); }
/* weakest: a ring, never colour alone — the row also carries a "Weakest" Badge with the word. */
.nux-hboard-weakest { padding: var(--space-2); margin: calc(var(--space-2) * -1); border-radius: var(--radius-md); box-shadow: 0 0 0 1.5px var(--warning); }

/* ---------- EnergyBudget ---------- */
.nux-energy { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; max-width: 100%; box-sizing: border-box; }
.nux-energy-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.nux-energy-head b { font-size: 19px; line-height: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nux-energy-head span, .nux-energy-cap { font-size: 13px; line-height: 18px; color: var(--ink-secondary); min-height: 18px; }
.nux-energy-track { position: relative; height: 12px; border-radius: var(--radius-pill); background: var(--separator); overflow: hidden; }
.nux-energy-fill { display: block; height: 100%; background: var(--accent); border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
/* segments: a composition of fills (intake, then deficit-to-TDEE) instead of one spent fill —
   positioned side by side, SERIES-ordered, reusing dataviz's six categorical series tokens. */
.nux-energy-seg { position: absolute; top: 0; border-radius: 0; background: var(--series-1); }
.nux-energy-seg.s1 { background: var(--series-1); } .nux-energy-seg.s2 { background: var(--series-2); } .nux-energy-seg.s3 { background: var(--series-3); }
.nux-energy-seg.s4 { background: var(--series-4); } .nux-energy-seg.s5 { background: var(--series-5); } .nux-energy-seg.s6 { background: var(--series-6); }
.nux-energy-win { position: absolute; top: 0; bottom: 0; border: 2px solid var(--ink); border-radius: var(--radius-sm); box-sizing: border-box; pointer-events: none; }

/* ---------- BmiScale ---------- */
.nux-bmi { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; max-width: 100%; box-sizing: border-box; }
.nux-bmi-head { display: flex; justify-content: space-between; align-items: baseline; }
.nux-bmi-head b { font-size: 19px; line-height: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nux-bmi-head span { font-size: 13px; line-height: 18px; color: var(--ink-secondary); }
.nux-bmi-track { position: relative; display: flex; height: 8px; border-radius: var(--radius-pill); overflow: hidden; }
.nux-bmi-z1 { background: var(--seq-200); } .nux-bmi-z2 { background: var(--seq-400); } .nux-bmi-z3 { background: var(--seq-500); } .nux-bmi-z4 { background: var(--seq-700); }
/* status reading, not magnitude: a zone can be told "this is bad", not just "this is more" —
   under/over both warn, high is bad, the healthy middle stays the quiet neutral tone. */
.nux-bmi-z-neutral { background: var(--separator); } .nux-bmi-z-warn { background: var(--warning); } .nux-bmi-z-bad { background: var(--danger); }
.nux-bmi-mark { position: absolute; top: -4px; width: 4px; height: 16px; margin-left: -2px; background: var(--ink); border-radius: var(--radius-sm); }
.nux-bmi-legend { display: flex; justify-content: space-between; font-size: 11px; line-height: 14px; color: var(--ink-secondary); }

/* ---------- CountryCard ---------- */
.nux-country { display: flex; align-items: center; gap: var(--space-3); width: 100%; max-width: 100%; box-sizing: border-box; min-height: var(--tap-min); padding: var(--space-3) var(--space-4); border: 1px solid var(--separator); border-radius: var(--radius-lg); background: var(--surface-raised); font: inherit; color: inherit; text-align: left; cursor: pointer; }
.nux-country.is-on { background: var(--accent-soft); border-color: var(--accent); }
.nux-country:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.nux-country-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nux-country-text b { font-size: 15px; line-height: 20px; font-weight: 600; }
.nux-country-text span { font-size: 13px; line-height: 18px; color: var(--ink-secondary); }
.nux-country-load { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; width: 64px; flex: none; }
.nux-country-load i { display: block; height: 6px; width: 64px; background: var(--accent); border-radius: var(--radius-pill); max-width: 100%; }
.nux-country-load small { font-size: 11px; line-height: 14px; color: var(--ink-secondary); font-variant-numeric: tabular-nums; }

/* ---------- CoverageRow ---------- */
.nux-cov { display: flex; align-items: center; gap: var(--space-3); width: 100%; max-width: 100%; box-sizing: border-box; min-height: var(--tap-min); padding: var(--space-2) 0; }
.nux-cov-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nux-cov-text b { font-size: 15px; line-height: 20px; font-weight: 500; }
.nux-cov-text span, .nux-cov-kind { font-size: 13px; line-height: 18px; color: var(--ink-secondary); }

/* ---------- StressHours, StreamGap, ChatFab ---------- */
.nux-stress { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; max-width: 100%; box-sizing: border-box; }
.nux-stress-bars { display: flex; align-items: flex-end; gap: 2px; height: 64px; position: relative; }
.nux-stress-bars i { flex: 1; min-width: 0; min-height: 2px; background: var(--accent); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.nux-stress-good { background: var(--success); }
.nux-stress-medium { background: var(--warning); }
.nux-stress-low { background: var(--danger); }
/* bands: server-published reference lines (never client-invented) — taken out of flow so they
   don't join the bars as flex items, positioned by the same value/scale math as the bars. */
.nux-stress-line { position: absolute; left: 0; right: 0; height: 0; min-height: 0; flex: none; border-top: 1px dashed var(--ink-secondary); background: none; border-radius: 0; }
.nux-stress-line-high { border-top-color: var(--danger); }
.nux-stress-axis { display: flex; justify-content: space-between; font-size: 11px; line-height: 14px; color: var(--ink-secondary); }
.nux-gap { display: flex; flex-direction: column; gap: var(--space-1); width: 100%; max-width: 100%; box-sizing: border-box; padding: var(--space-3) var(--space-4); background: var(--surface-secondary); border-radius: var(--radius-md); }
.nux-gap-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.nux-gap-head b { font-size: 15px; line-height: 20px; font-weight: 600; }
.nux-gap > span { font-size: 13px; line-height: 18px; color: var(--ink-secondary); }
.nux-gap-note { font-size: 13px; line-height: 18px; color: var(--ink-secondary); }
.nux-fab { width: 56px; height: 56px; border: 0; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-md); }
.nux-fab .nux-icon { width: 24px; height: 24px; }
.nux-fab:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.nux-fab.is-open { background: var(--accent-hover); }

/* Web sign-in */
.nux-signin { min-height: 100%; display: grid; grid-template-columns: 1fr 1fr; background: var(--surface); }
.nux-signin-side { background: var(--surface-secondary); padding: var(--space-8); display: flex; flex-direction: column; justify-content: space-between; }
.nux-signin-side .brand { display: flex; align-items: center; gap: var(--space-3); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.nux-signin-side .brand .nux-appicon { width: 40px; height: 40px; border-radius: var(--radius-md); }
.nux-signin-side h1 { margin: 0; font-size: 48px; line-height: 52px; font-weight: 800; letter-spacing: -0.02em; max-width: 440px; }
.nux-signin-side p { margin: var(--space-3) 0 0; font-size: 17px; line-height: 25px; color: var(--ink-secondary); max-width: 440px; }
.nux-signin-side small { font-size: 13px; color: var(--ink-secondary); }
.nux-signin-main { display: grid; place-items: center; padding: var(--space-8) var(--space-6); }
.nux-signin-main > div { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: var(--space-5); }
.nux-signin-main h2 { margin: 0; font-size: 24px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; }
.nux-signin-or { display: flex; align-items: center; gap: var(--space-3); font-size: 13px; color: var(--ink-secondary); } .nux-signin-or::before, .nux-signin-or::after { content: ""; flex: 1; height: 1px; background: var(--separator); }
@media (max-width: 899px) { .nux-signin { grid-template-columns: 1fr; } .nux-signin-side { padding: var(--space-5) var(--space-4); } .nux-signin-side h1 { font-size: 32px; line-height: 36px; } .nux-signin-main { padding: var(--space-5) var(--space-4); } }

/* Containment: nothing in the library is wider than the box it is put in */
.nux-dialog, .nux-toast, .nux-alert, .nux-update, .nux-queue-item, .nux-sheet, .nux-actionsheet, .nux-assist, .nux-conn, .nux-empty, .nux-error, .nux-step, .nux-cal, .nux-route, .nux-scorehero, .nux-amount, .nux-capture { box-sizing: border-box; max-width: 100%; }
.nux-toast { max-width: min(420px, 100%); }
.nux-dialog { max-width: min(400px, 100%); } /* the containment rule above had undone the documented 400 px */
.nux-flow-frame > * { flex-shrink: 0; }


/* ---------- More charts: stacked, trend, waterfall, scatter, histogram, range, hour map, rings ---------- */
.nux-chart .ref { stroke: var(--ink-secondary); stroke-width: 1; stroke-dasharray: 2 4; stroke-linecap: round; }
.nux-chart .cross { stroke: var(--separator); stroke-width: 1; }
.nux-chart .trend { stroke: var(--ink-secondary); stroke-width: 1.5; stroke-dasharray: 4 4; stroke-linecap: round; }
.nux-chart .mark { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 3; }
.nux-chart .connect { stroke: var(--separator); stroke-width: 1; stroke-dasharray: 3 3; }
.nux-chart .line.pos, .nux-chart .marker.pos { stroke: var(--div-pos); } .nux-chart .area.pos { fill: var(--div-pos); }
.nux-chart .line.neg, .nux-chart .marker.neg { stroke: var(--div-neg); } .nux-chart .area.neg { fill: var(--div-neg); }
.nux-chart .bar.total { fill: var(--ink); }
.nux-chart .bar.on { fill: var(--accent); }
.nux-waterfall .axis.val { font-weight: 600; fill: var(--ink); }
.nux-waterfall .axis.val.pos { fill: var(--div-pos); } .nux-waterfall .axis.val.neg { fill: var(--div-neg); }
.nux-chart.nux-scatter .dot { fill: var(--ink-secondary); opacity: .55; stroke: var(--surface); stroke-width: 2; }
.nux-chart.nux-scatter .dot.on { fill: var(--accent); opacity: 1; }
.nux-chart.nux-scatter .dot.s1 { fill: var(--series-1); opacity: .7; } .nux-chart.nux-scatter .dot.s2 { fill: var(--series-2); opacity: .7; } .nux-chart.nux-scatter .dot.s3 { fill: var(--series-3); opacity: .7; }

.nux-rangebar { display: flex; flex-direction: column; gap: var(--space-3); font-size: 13px; line-height: 18px; }
.nux-rangebar-row { display: grid; grid-template-columns: 96px 1fr 72px; align-items: center; gap: var(--space-3); }
.nux-rangebar-row .l { color: var(--ink-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nux-rangebar-row .track { position: relative; height: 12px; }
.nux-rangebar-row .track::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 2px; background: var(--surface-secondary); border-radius: var(--radius-pill); }
.nux-rangebar-row .track i { position: absolute; top: 3px; width: 6px; height: 6px; border-radius: var(--radius-pill); transform: translateX(-3px); }
.nux-rangebar-row .track i.span { top: 5px; height: 2px; width: auto; transform: none; border-radius: var(--radius-pill); background: var(--separator); }
.nux-rangebar-row .track i.from { background: var(--ink-secondary); }
.nux-rangebar-row .track i.to { width: 10px; height: 10px; top: 1px; transform: translateX(-5px); border: 2px solid var(--surface); box-sizing: border-box; background: var(--accent); }
.nux-rangebar-row .track i.to.up { background: var(--div-pos); } .nux-rangebar-row .track i.to.down { background: var(--div-neg); }
.nux-rangebar-row b { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.nux-rangebar-row b.up { color: var(--div-pos); } .nux-rangebar-row b.down { color: var(--div-neg); }
.nux-rangebar-key { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; line-height: 16px; color: var(--ink-secondary); }
.nux-rangebar-key i { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--ink-secondary); }
.nux-rangebar-key i.to { background: var(--accent); }

.nux-hourmap-wrap { display: flex; flex-direction: column; gap: var(--space-1); }
.nux-hourmap { display: grid; grid-template-columns: 32px repeat(24, 1fr); gap: 2px; align-items: center; }
.nux-hourmap .day { font-size: 11px; line-height: 16px; color: var(--ink-secondary); }
.nux-hourmap i { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--surface-secondary); }
.nux-hourmap-axis { display: flex; justify-content: space-between; margin-left: 34px; font-size: 11px; line-height: 16px; color: var(--ink-secondary); }

.nux-rings { flex-direction: row; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.nux-chart.nux-rings .nux-rings-svg { width: 132px; height: 132px; flex: none; }
.nux-rings .track { fill: none; stroke: var(--surface-secondary); }
.nux-rings .fill { fill: none; stroke-linecap: round; }
.nux-rings .fill.s1 { stroke: var(--series-1); } .nux-rings .fill.s2 { stroke: var(--series-2); } .nux-rings .fill.s3 { stroke: var(--series-3); }
.nux-rings-key { display: flex; flex-direction: column; gap: var(--space-3); }
.nux-rings-key > div { display: flex; align-items: flex-start; gap: var(--space-2); }
.nux-rings-key i { width: 10px; height: 10px; border-radius: var(--radius-pill); margin-top: 5px; flex: none; }
.nux-rings-key i.s1 { background: var(--series-1); } .nux-rings-key i.s2 { background: var(--series-2); } .nux-rings-key i.s3 { background: var(--series-3); }
.nux-rings-key b { display: block; font-size: 17px; line-height: 24px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.nux-rings-key small { font-size: 12px; line-height: 16px; color: var(--ink-secondary); }
@media (max-width: 599px) { .nux-rangebar-row { grid-template-columns: 80px 1fr 64px; } .nux-hourmap { grid-template-columns: 26px repeat(24, 1fr); } }

.nux-span-2 { grid-column: span 2; }
.nux-dash-cols { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-5); align-items: start; }
@media (max-width: 1023px) { .nux-span-2 { grid-column: auto; } .nux-dash-cols { grid-template-columns: 1fr; } }


/* ---------- Ops: service tile, uptime bar, resource meter, commit row ---------- */
.nux-svc { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-raised); border: 1px solid var(--separator); text-decoration: none; color: inherit; box-sizing: border-box; }
.nux-svc-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.nux-svc-head b { font-size: 15px; line-height: 20px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nux-svc-head .state { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 12px; line-height: 16px; font-weight: 600; }
.nux-svc-up .state { color: var(--success); } .nux-svc-slow .state { color: var(--warning); } .nux-svc-down .state { color: var(--danger); }
.nux-svc-unknown .state, .nux-svc-paused .state { color: var(--ink-secondary); }
.nux-svc-down { border-color: var(--danger); } .nux-svc-slow { border-color: var(--warning); }
.nux-svc-meta { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 13px; line-height: 18px; color: var(--ink-secondary); min-height: 18px; }
.nux-svc-meta .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.nux-svc-checked { font-size: 11px; line-height: 16px; color: var(--ink-secondary); min-height: 16px; }
a.nux-svc:hover { background: var(--surface-secondary); } a.nux-svc:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.nux-uptime-wrap { display: flex; flex-direction: column; gap: var(--space-2); }
.nux-uptime-head { display: flex; justify-content: space-between; font-size: 13px; line-height: 18px; color: var(--ink-secondary); }
.nux-uptime-head b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.nux-uptime { display: flex; gap: 2px; align-items: stretch; height: 24px; }
.nux-uptime-compact { height: 8px; gap: 1px; }
.nux-uptime i { flex: 1; min-width: 2px; border-radius: 2px; background: var(--surface-secondary); }
.nux-uptime-up { background: var(--success) !important; } .nux-uptime-slow { background: var(--warning) !important; }
.nux-uptime-down { background: var(--danger) !important; } .nux-uptime-none { background: var(--surface-secondary) !important; }
.nux-uptime-axis { display: flex; justify-content: space-between; font-size: 11px; line-height: 16px; color: var(--ink-secondary); }

.nux-res { display: flex; flex-direction: column; gap: var(--space-2); }
.nux-res-head { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; line-height: 18px; }
.nux-res-head .l { color: var(--ink-secondary); } .nux-res-head b { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.nux-res-track { height: 8px; border-radius: var(--radius-pill); background: var(--surface-secondary); overflow: hidden; }
.nux-res-track i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--accent); }
.nux-res-warning .nux-res-track i { background: var(--warning); } .nux-res-danger .nux-res-track i { background: var(--danger); }
.nux-res small { font-size: 11px; line-height: 16px; color: var(--ink-secondary); min-height: 16px; }

.nux-commit { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); text-decoration: none; color: inherit; border-radius: var(--radius-md); }
a.nux-commit:hover { background: var(--surface-secondary); }
.nux-commit .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nux-commit .t b { font-size: 15px; line-height: 20px; font-weight: 600; }
.nux-commit .t .msg { font-size: 13px; line-height: 18px; color: var(--ink-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nux-commit .r { display: flex; align-items: center; gap: var(--space-3); flex: none; }
.nux-commit .when { font-size: 12px; line-height: 16px; color: var(--ink-secondary); font-variant-numeric: tabular-nums; min-width: 64px; text-align: right; }

/* ---- carried from the artifact: the galaxy sign-in door, the moon, the calendar range band ---- */
.nux-moon { display: flex; align-items: center; gap: var(--space-3); color: var(--ink); }
.nux-moon-svg { width: 56px; height: 56px; flex: none; }
.nux-moon .dark { fill: var(--surface-secondary); }
.nux-moon .lit { fill: var(--ink-secondary); }
.nux-moon .rim { fill: none; stroke: var(--separator); stroke-width: 1.5; }
.nux-moon-text b { display: block; font-size: 15px; line-height: 20px; font-weight: 600; }
.nux-moon-text small { font-size: 12px; line-height: 16px; color: var(--ink-secondary); }
.nux-moon-sm .nux-moon-svg { width: 32px; height: 32px; }
.nux-moon-lg .nux-moon-svg { width: 96px; height: 96px; }


/* ---------- Star field ---------- */
.nux-galaxy { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
:root[data-theme="high-contrast"] .nux-galaxy { display: none; }
.nux-door > .nux-galaxy { z-index: 0; }


/* Door: the sky settles, the orbits draw themselves in, the control arrives last. */
@media (prefers-reduced-motion: no-preference) {
  .nux-door .nux-galaxy { animation: nux-door-sky 1400ms var(--duration-slow) both cubic-bezier(0.2, 0, 0, 1); }
}
@keyframes nux-door-sky { from { opacity: 0; } to { opacity: 1; } }
@keyframes nux-door-orbit { from { opacity: 0; transform: translate(-50%, -50%) scale(.94); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes nux-door-face { from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes nux-door-ring { from { stroke-dasharray: 2 10; } to { stroke-dasharray: none; } }
@keyframes nux-door-arm { from { opacity: 0; } to { opacity: 1; } }

/* The sign-in door, deep-space composition: the orbit system sits off-centre and
   bleeds off the right edge; the action lives in the quiet dark at lower left. */
.nux-door-deep { place-items: stretch; padding: 0; }
/* A rule here lost its selector and left four declarations orphaned between
   .nux-door-deep and .nux-sr, so the file opened a block with a declaration and closed it
   with a stray brace. Browsers discard such a block, so the declarations had been dead for
   as long as they had been malformed; a strict parser does not recover, and postcss's
   "Unexpected }" broke the build of every consumer that imports this file.
   They are deleted rather than given a selector back: restoring one
   (.nux-door-deep .nux-galaxy, sized min(108vmin, 1300px)) makes them apply for the first
   time and SignInDoor then overflows its card — 1504px of content in 1280. Deleting keeps
   the rendering exactly as it has actually been. If the deep composition is wanted, it
   belongs in the Design System artifact first, with a size that fits. */
.nux-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nux-galaxy-quiet { opacity: .45; transition: opacity var(--duration-slow); }
.nux-door-veil {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(120% 100% at 50% 46%, transparent 0%, transparent 46%, color-mix(in srgb, var(--surface) 68%, transparent) 100%),
    linear-gradient(180deg, transparent 62%, color-mix(in srgb, var(--surface) 78%, transparent) 100%);
}
.nux-door-deep .nux-door-stage {
  position: absolute; z-index: 3; margin: 0;
  right: clamp(var(--space-4), 3vw, 40px); bottom: clamp(var(--space-4), 3vh, 32px);
  width: auto; align-items: flex-end; gap: var(--space-2);
}
.nux-door-rule { width: 56px; height: 1px; background: currentColor; color: var(--accent); opacity: .5; }
.nux-door-deep .nux-door-action { width: auto; }
.nux-door-deep .nux-door-action > * { width: auto; }
.nux-door-deep .nux-door-rule { display: none; }
.nux-door-deep .nux-door-action .nux-btn {
  width: auto; height: auto; padding: var(--space-2) var(--space-3); justify-content: center;
  font-size: 13px; line-height: 20px; font-weight: 400; letter-spacing: 0.01em;
  color: var(--ink-secondary); opacity: .45; border-radius: var(--radius-pill);
  transition: opacity var(--duration-base), color var(--duration-base);
}
.nux-door-deep .nux-door-action .nux-btn::after { display: none; }
.nux-door-deep .nux-door-action .nux-btn:hover { opacity: 1; color: var(--ink); }
@media (max-width: 719px) {
}
@media (prefers-reduced-motion: no-preference) {
  .nux-door-deep .nux-door-rule { animation: nux-door-rule 900ms 900ms both cubic-bezier(0.2, 0, 0, 1); }
  .nux-door-deep .nux-door-stage .nux-door-action { animation: nux-door-rise 900ms 1050ms both cubic-bezier(0.2, 0, 0, 1); }
}
@keyframes nux-door-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes nux-door-rule { from { width: 0; opacity: 0; } to { width: 56px; opacity: .5; } }


/* ===== Round 4: the fields and states the estate was still missing ===== */
.nux-strip { display: flex; align-items: stretch; border: 1px solid var(--separator); border-radius: var(--radius-lg); background: var(--surface-raised); overflow: hidden; }
.nux-strip-cell { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); }
.nux-strip-cell + .nux-strip-cell { border-left: 1px solid var(--separator); }
.nux-strip-label { font-size: 12px; line-height: 16px; color: var(--ink-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nux-strip-value { font-size: 19px; line-height: 24px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.nux-strip-delta { font-size: 11px; line-height: 16px; }
.nux-strip-lg .nux-strip-value { font-size: 24px; line-height: 32px; }

.nux-otp { display: flex; gap: var(--space-2); }
.nux-otp input { width: 44px; height: 52px; text-align: center; font-family: var(--font-mono); font-size: 19px; font-weight: 600; color: var(--ink); background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-sizing: border-box; caret-color: var(--accent); }
.nux-otp input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: var(--accent); }
.nux-otp-error input { border-color: var(--danger); }
.nux-otp-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.nux-otp-foot .nux-btn { flex: none; }

.nux-combo { position: relative; }
.nux-combo-input { position: relative; display: flex; align-items: center; }
.nux-combo-input .nux-input { width: 100%; padding-right: 36px; }
.nux-combo-caret { position: absolute; right: var(--space-3); width: 16px; height: 16px; color: var(--ink-secondary); pointer-events: none; transition: transform var(--duration-base); }
.nux-combo-open .nux-combo-caret { transform: rotate(180deg); }
.nux-combo-list { position: absolute; z-index: var(--layer-dropdown); top: calc(100% + 4px); left: 0; right: 0; margin: 0; padding: var(--space-1); list-style: none; max-height: 240px; overflow: auto; background: var(--surface-raised); border: 1px solid var(--separator); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.nux-combo-list li { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: 15px; line-height: 20px; cursor: pointer; }
.nux-combo-list li small { color: var(--ink-secondary); font-size: 13px; margin-left: auto; }
.nux-combo-list li .nux-icon { width: 16px; height: 16px; color: var(--accent); flex: none; }
.nux-combo-list li.active { background: var(--surface-secondary); }
.nux-combo-list li.chosen { color: var(--accent); }
.nux-combo-empty { padding: var(--space-3); color: var(--ink-secondary); font-size: 13px; }

.nux-multi { position: relative; }
.nux-multi-field { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-height: 40px; padding: var(--space-2) 36px var(--space-2) var(--space-3); background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-md); cursor: pointer; box-sizing: border-box; }
.nux-multi-field:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: var(--accent); }
.nux-multi-placeholder { color: var(--ink-disabled); font-size: 15px; }
.nux-multi-token { display: inline-flex; align-items: center; gap: var(--space-1); height: 24px; padding: 0 var(--space-1) 0 var(--space-2); font: inherit; font-size: 13px; line-height: 18px; color: var(--ink); background: var(--accent-soft); border: 0; border-radius: var(--radius-pill); cursor: pointer; }
.nux-multi-token .nux-icon { width: 14px; height: 14px; color: var(--ink-secondary); }
.nux-multi-token:hover .nux-icon { color: var(--ink); }
.nux-multi-caret { position: absolute; right: var(--space-3); top: 12px; width: 16px; height: 16px; color: var(--ink-secondary); pointer-events: none; transition: transform var(--duration-base); }
.nux-multi-open .nux-multi-caret { transform: rotate(180deg); }
.nux-multi-list { position: absolute; z-index: var(--layer-dropdown); top: calc(100% + 4px); left: 0; right: 0; margin: 0; padding: var(--space-1); list-style: none; max-height: 240px; overflow: auto; background: var(--surface-raised); border: 1px solid var(--separator); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.nux-multi-list li { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: 15px; line-height: 20px; cursor: pointer; }
.nux-multi-list li small { color: var(--ink-secondary); font-size: 13px; margin-left: auto; }
.nux-multi-list li:hover { background: var(--surface-secondary); }
.nux-multi-list li.full { opacity: var(--opacity-disabled); cursor: default; }
.nux-multi-box { flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.nux-multi-list li.chosen .nux-multi-box { background: var(--accent); border-color: var(--accent); }
.nux-multi-list li.chosen .nux-multi-box .nux-icon { width: 12px; height: 12px; color: var(--on-accent); }

.nux-filedrop { display: flex; flex-direction: column; gap: var(--space-3); }
.nux-filedrop-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nux-filedrop-zone { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-6) var(--space-4); text-align: center; background: var(--surface-secondary); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); cursor: pointer; transition: border-color var(--duration-base), background var(--duration-base); }
.nux-filedrop-zone:hover, .nux-filedrop-zone.over { border-color: var(--accent); background: var(--accent-soft); }
.nux-filedrop-input:focus-visible + .nux-filedrop-zone { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.nux-filedrop-icon { width: 20px; height: 20px; color: var(--ink-secondary); }
.nux-filedrop-zone b { font-size: 15px; line-height: 20px; font-weight: 600; }
.nux-filedrop-zone small { font-size: 13px; line-height: 18px; color: var(--ink-secondary); }
.nux-filedrop-list { display: flex; flex-direction: column; gap: var(--space-2); }
.nux-filedrop-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--surface-raised); border: 1px solid var(--separator); border-radius: var(--radius-md); }
.nux-filedrop-row > .nux-icon { flex: none; width: 16px; height: 16px; color: var(--ink-secondary); }
.nux-filedrop-error > .nux-icon { color: var(--danger); }
.nux-filedrop-meta { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.nux-filedrop-meta .name { font-size: 13px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nux-filedrop-meta small { font-size: 12px; line-height: 16px; color: var(--ink-secondary); }
.nux-filedrop-error .nux-filedrop-meta small { color: var(--danger); }
.nux-filedrop-row .nux-progress { flex: none; width: 96px; }
.nux-filedrop-state { flex: none; min-width: 40px; text-align: right; font-size: 12px; line-height: 16px; color: var(--ink-secondary); font-variant-numeric: tabular-nums; }

.nux-phoneinput { display: flex; align-items: stretch; background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-md); overflow: hidden; }
.nux-phoneinput:focus-within { border-color: var(--accent); outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.nux-phoneinput-error { border-color: var(--danger); }
.nux-phone-dial { flex: none; padding: 0 var(--space-3); font: inherit; font-size: 15px; color: var(--ink); background: var(--surface-secondary); border: 0; border-right: 1px solid var(--separator); cursor: pointer; font-variant-numeric: tabular-nums; }
.nux-phone-dial:focus-visible { outline: none; }
.nux-phoneinput .nux-input { flex: 1 1 auto; min-width: 0; border: 0; border-radius: 0; background: transparent; }
.nux-phoneinput .nux-input:focus-visible { outline: none; }

.nux-cmdk { width: min(560px, 100%); display: flex; flex-direction: column; background: var(--surface-raised); border: 1px solid var(--separator); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; box-sizing: border-box; }
.nux-cmdk-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--cmdk-head-pad-y, var(--space-3)) var(--space-4); border-bottom: 1px solid var(--separator); }
.nux-cmdk-head .nux-icon { flex: none; width: 16px; height: 16px; color: var(--ink-secondary); }
.nux-cmdk-input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: var(--text-cmdk-input, 17px); line-height: var(--leading-cmdk-input, 24px); color: var(--ink); background: transparent; border: 0; }
.nux-cmdk-input:focus-visible { outline: none; }
.nux-cmdk-input::placeholder { color: var(--ink-disabled); }
.nux-cmdk-key { font-family: var(--font-sans); font-size: 11px; line-height: 16px; color: var(--ink-secondary); background: var(--surface-secondary); border: 1px solid var(--separator); border-radius: var(--radius-sm); padding: 0 var(--space-1); }
.nux-cmdk-body { max-height: 320px; overflow: auto; padding: var(--space-2); }
.nux-cmdk-group { padding: var(--space-2) var(--space-2) var(--space-1); font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-secondary); }
.nux-cmdk-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-1) var(--space-2); min-height: var(--cmdk-row, 36px); box-sizing: border-box; border-radius: var(--radius-sm); font-size: var(--text-control, 15px); line-height: var(--leading-control, 20px); cursor: pointer; }
.nux-cmdk-row .nux-icon { flex: none; width: 16px; height: 16px; color: var(--ink-secondary); }
.nux-cmdk-row:hover, .nux-cmdk-row.current { background: var(--surface-secondary); }
.nux-cmdk-row.current .nux-icon { color: var(--accent); }
.nux-cmdk-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nux-cmdk-hint { flex: none; font-size: 13px; color: var(--ink-secondary); }
.nux-cmdk-empty { padding: var(--space-5); text-align: center; font-size: 13px; color: var(--ink-secondary); }
.nux-cmdk-foot { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-2) var(--space-4); border-top: 1px solid var(--separator); background: var(--surface-secondary); font-size: 12px; line-height: 16px; color: var(--ink-secondary); }
.nux-cmdk-foot span { display: inline-flex; align-items: center; gap: var(--space-1); }
.nux-cmdk-count { margin-left: auto; font-size: 12px; }

.nux-masked { display: inline-flex; align-items: center; gap: var(--space-1); }
.nux-masked-value { font-variant-numeric: tabular-nums; transition: filter var(--duration-base); }
.nux-masked.is-masked .nux-masked-value { filter: blur(6px); user-select: none; }
.nux-masked-lg .nux-masked-value { font-size: 24px; line-height: 32px; font-weight: 700; }
.nux-masked-lg.is-masked .nux-masked-value { filter: blur(9px); }

.nux-servicestate { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); padding: var(--space-7) var(--space-5); max-width: 420px; margin: 0 auto; box-sizing: border-box; }
.nux-servicestate-mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-pill); background: var(--surface-secondary); color: var(--ink-secondary); }
.nux-servicestate-mark .nux-icon { width: 24px; height: 24px; }
.nux-servicestate-upgrade .nux-servicestate-mark { background: var(--accent-soft); color: var(--accent); }
.nux-servicestate-offline .nux-servicestate-mark { color: var(--danger); }
.nux-servicestate h1 { margin: 0; font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -0.015em; }
.nux-servicestate p { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-secondary); }
.nux-servicestate-detail { font-size: 13px; line-height: 18px; color: var(--ink-disabled); font-variant-numeric: tabular-nums; }
.nux-servicestate-action { margin-top: var(--space-2); }

.nux-recurring { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface-raised); border: 1px solid var(--separator); border-radius: var(--radius-lg); text-decoration: none; color: inherit; }
.nux-recurring-mark { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--surface-secondary); color: var(--ink-secondary); overflow: hidden; }
.nux-recurring-mark img { width: 100%; height: 100%; object-fit: cover; }
.nux-recurring-meta { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.nux-recurring-meta b { font-size: 15px; line-height: 20px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nux-recurring-meta small { font-size: 13px; line-height: 18px; color: var(--ink-secondary); }
.nux-recurring-right { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); }
.nux-recurring-amount { font-size: 15px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nux-recurring-amount .per { font-weight: 400; color: var(--ink-secondary); }
.nux-recurring-paused { opacity: var(--opacity-disabled); }

.nux-goal { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--surface-raised); border: 1px solid var(--separator); border-radius: var(--radius-lg); }
.nux-goal-head { display: flex; align-items: center; gap: var(--space-3); }
.nux-goal-mark { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent); }
.nux-goal-title { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.nux-goal-title b { font-size: 15px; line-height: 20px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nux-goal-title small { font-size: 12px; line-height: 16px; color: var(--ink-secondary); }
.nux-goal-pct { flex: none; font-size: 15px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nux-goal-done .nux-goal-mark { background: var(--success-soft); color: var(--success); }
.nux-goal-done .nux-goal-pct { color: var(--success); }
.nux-goal-foot { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 13px; line-height: 18px; color: var(--ink-secondary); font-variant-numeric: tabular-nums; }
.nux-goal-left { text-align: right; }

.nux-device { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface-raised); border: 1px solid var(--separator); border-radius: var(--radius-lg); }
.nux-device-mark { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--surface-secondary); color: var(--ink-secondary); }
.nux-device-current .nux-device-mark { background: var(--accent-soft); color: var(--accent); }
.nux-device-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.nux-device-name { display: block; font-size: 15px; line-height: 20px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nux-device-live { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--success); }
.nux-device-live .dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--success); }
.nux-device-removed { opacity: var(--opacity-disabled); }
.nux-device-meta small { font-size: 13px; line-height: 18px; color: var(--ink-secondary); }
.nux-device .nux-btn { flex: none; }

/* the status row: a long detail wraps under the title rather than crushing it */
.nux-statusrow b { min-width: 0; }
.nux-statusrow-stack { flex-wrap: wrap; align-items: baseline; row-gap: 2px; }
.nux-statusrow-stack b { flex: none; white-space: nowrap; }
.nux-statusrow-stack span:last-child { flex: 1 0 100%; margin-left: calc(8px + var(--space-2)); white-space: normal; }
.nux-menubar-body { display: flex; flex-direction: column; gap: var(--space-3); padding: 0 var(--space-1); }
.nux-menubar-body .nux-code input { max-width: 28px; height: 34px; font-size: 15px; }
.nux-menubar-body > .nux-btn { width: 100%; }

/* EventBlock: one calendar event in a time grid (block), a month cell or the all-day strip (line), or an agenda (row).
   --ev is the event's rule colour, --ev-fill its tint; state never rides on colour alone, the meta line or a Badge says it. */
.nux-event { --ev: var(--ink-secondary); --ev-fill: var(--surface-secondary); position: relative; box-sizing: border-box; display: flex; min-width: 0; max-width: 100%; color: var(--ink); text-decoration: none; text-align: left; font-family: var(--font-sans); background: var(--ev-fill); border: 1px solid transparent; border-left: 3px solid var(--ev); border-radius: var(--radius-sm); cursor: pointer; transition: background-color var(--duration-fast); }
.nux-event:hover { background: color-mix(in srgb, var(--ev-fill), var(--ink) 6%); color: var(--ink); }
.nux-event:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.nux-event .nux-icon { color: var(--ev); }
.nux-event-trip { --ev: var(--series-4); --ev-fill: color-mix(in srgb, var(--series-4) 14%, var(--surface-raised)); }
/* the owner's Google event colour (colorId 1-11), a data colour: rule and tint only; the states below still override it */
.nux-event-c1 { --ev: var(--event-1); --ev-fill: color-mix(in srgb, var(--event-1) 14%, var(--surface-raised)); }
.nux-event-c2 { --ev: var(--event-2); --ev-fill: color-mix(in srgb, var(--event-2) 14%, var(--surface-raised)); }
.nux-event-c3 { --ev: var(--event-3); --ev-fill: color-mix(in srgb, var(--event-3) 14%, var(--surface-raised)); }
.nux-event-c4 { --ev: var(--event-4); --ev-fill: color-mix(in srgb, var(--event-4) 14%, var(--surface-raised)); }
.nux-event-c5 { --ev: var(--event-5); --ev-fill: color-mix(in srgb, var(--event-5) 14%, var(--surface-raised)); }
.nux-event-c6 { --ev: var(--event-6); --ev-fill: color-mix(in srgb, var(--event-6) 14%, var(--surface-raised)); }
.nux-event-c7 { --ev: var(--event-7); --ev-fill: color-mix(in srgb, var(--event-7) 14%, var(--surface-raised)); }
.nux-event-c8 { --ev: var(--event-8); --ev-fill: color-mix(in srgb, var(--event-8) 14%, var(--surface-raised)); }
.nux-event-c9 { --ev: var(--event-9); --ev-fill: color-mix(in srgb, var(--event-9) 14%, var(--surface-raised)); }
.nux-event-c10 { --ev: var(--event-10); --ev-fill: color-mix(in srgb, var(--event-10) 14%, var(--surface-raised)); }
.nux-event-c11 { --ev: var(--event-11); --ev-fill: color-mix(in srgb, var(--event-11) 14%, var(--surface-raised)); }
/* a task with a due date, on the calendar: no fill, a hairline, an open ring (a tick when done) and the word Task or Done */
.nux-event-task { --ev-fill: var(--surface); border: 1px solid var(--separator); border-left: 3px solid var(--ev); }
.nux-event-tick { flex: none; width: 14px; height: 14px; margin: 1px; border-radius: var(--radius-pill); border: 1.5px solid var(--ev); box-sizing: border-box; }
.nux-event-line .nux-event-tick, .nux-event-row .nux-event-tick { align-self: center; }
.nux-event-done .nux-event-title { color: var(--ink-secondary); text-decoration: line-through; }
.nux-event-tentative { border-left-style: dashed; }
.nux-event-needs-reply { --ev: var(--border-strong); --ev-fill: var(--surface); border: 1px dashed var(--border-strong); border-left: 3px dashed var(--border-strong); }
.nux-event-suggested { --ev: var(--accent); --ev-fill: var(--surface); border: 1px dashed var(--accent); border-left: 3px dashed var(--accent); }
.nux-event-declined, .nux-event-cancelled { --ev: var(--separator); --ev-fill: transparent; }
.nux-event-declined .nux-event-title, .nux-event-cancelled .nux-event-title { color: var(--ink-secondary); text-decoration: line-through; }
.nux-event-sel, .nux-event-sel:hover { --ev: var(--accent); background: var(--accent-soft); }

.nux-event-block { flex-direction: column; gap: 0; padding: 2px var(--space-2) 2px var(--space-2); overflow: hidden; }
.nux-event-block .nux-event-title { display: flex; align-items: flex-start; gap: var(--space-1); min-width: 0; font-size: 12px; line-height: 16px; font-weight: 600; }
.nux-event-block .nux-event-title > span { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.nux-event-block .nux-event-meta { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nux-event-compact { flex-direction: row; align-items: center; gap: var(--space-1); }
.nux-event-compact .nux-event-title > span { -webkit-line-clamp: 1; }
.nux-event-compact .nux-event-title { flex: 0 1 auto; }
.nux-event-compact .nux-event-meta { flex: 1 1 0; }

.nux-event-line { align-items: center; gap: var(--space-1); height: 20px; padding: 0 var(--space-1) 0 var(--space-1); background: transparent; border-left-width: 3px; font-size: 12px; line-height: 16px; }
.nux-event-line.nux-event-allday, .nux-event-line.nux-event-trip { background: var(--ev-fill); }
.nux-event-line.nux-event-suggested, .nux-event-line.nux-event-needs-reply, .nux-event-line.nux-event-task { background: transparent; }
.nux-event-line .nux-event-time { flex: none; color: var(--ink-secondary); font-weight: 500; font-variant-numeric: tabular-nums; }
.nux-event-line .nux-event-title { flex: 1 1 auto; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nux-event-row { align-items: center; gap: var(--space-3); min-height: 64px; padding: var(--space-3) var(--space-4); background: transparent; border: 0; border-radius: 0; }
.nux-event-row:hover { background: var(--surface-secondary); }
.nux-event-row .nux-event-when { flex: none; width: 52px; display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.nux-event-row .nux-event-when b { font-size: 15px; line-height: 20px; font-weight: 600; }
.nux-event-row .nux-event-when span { font-size: 13px; line-height: 18px; color: var(--ink-secondary); }
.nux-event-row .nux-event-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-left: var(--space-3); border-left: 3px solid var(--ev); align-self: stretch; justify-content: center; }
.nux-event-row.nux-event-tentative .nux-event-body, .nux-event-row.nux-event-needs-reply .nux-event-body, .nux-event-row.nux-event-suggested .nux-event-body { border-left-style: dashed; }
.nux-event-row .nux-event-title { display: flex; align-items: center; gap: var(--space-1); min-width: 0; font-size: 15px; line-height: 20px; font-weight: 600; }
.nux-event-row .nux-event-title > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nux-event-row .nux-event-detail { font-size: 13px; line-height: 18px; color: var(--ink-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nux-event-row .nux-badge { flex: none; }
.nux-event-row .nux-event-nobadge { flex: none; width: 0; }
.nux-event-row.nux-event-sel { background: var(--accent-soft); }

/* ======================= Web density (1.2.0): sheet layout, TopBar, Toolbar, Panel, SplitView, DataTable =======================
   Sizes come from the density tokens (comfortable by default, compact under data-density="compact"),
   so every block below works in both. Controls are at least 44px tall below 900px. */

/* ---------- TopBar ---------- */
.nux-topbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); box-sizing: border-box; width: 100%; max-width: 100%; min-height: var(--nav-bar); padding: var(--space-2) var(--space-5); border-bottom: 1px solid var(--separator); background: var(--surface); color: var(--ink); }
.nux-topbar-title { margin: 0; min-width: 0; font-size: var(--text-page-title, 32px); line-height: var(--leading-page-title, 36px); font-weight: 600; overflow-wrap: anywhere; }
.nux-topbar-meta { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--text-meta, 13px); line-height: var(--leading-meta, 18px); color: var(--ink-secondary); }
.nux-topbar-dot { flex: none; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--ink-secondary); }
.nux-topbar-dot-success { background: var(--success); } .nux-topbar-dot-warning { background: var(--warning); } .nux-topbar-dot-danger { background: var(--danger); } .nux-topbar-dot-accent { background: var(--accent); }
.nux-topbar-end { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; min-width: 0; max-width: 100%; }
.nux-topbar-search { display: flex; align-items: center; gap: var(--space-2); width: 280px; max-width: 100%; height: var(--control, 40px); box-sizing: border-box; padding: 0 var(--space-2); border: 1px solid var(--border-strong); border-radius: var(--control-radius, var(--radius-md)); background: var(--surface); color: var(--ink-secondary); font: inherit; font-size: var(--text-control, 15px); line-height: var(--leading-control, 20px); text-align: left; cursor: pointer; }
.nux-topbar-search:hover { border-color: var(--ink); color: var(--ink); }
.nux-topbar-search:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.nux-topbar-search .nux-icon { width: 16px; height: 16px; }
.nux-topbar-search-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nux-topbar-key { flex: none; padding: 0 var(--space-1); border: 1px solid var(--separator); border-bottom-width: 2px; border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: 11px; line-height: 14px; font-weight: 500; color: var(--ink-secondary); }
.nux-topbar .nux-iconbtn { flex: none; width: var(--control, 40px); height: var(--control, 40px); border: 1px solid var(--border-strong); border-radius: var(--control-radius, var(--radius-md)); background: var(--surface); color: var(--ink); }
.nux-topbar .nux-iconbtn:hover { background: var(--surface-secondary); }
.nux-topbar .nux-iconbtn .nux-icon { width: 16px; height: 16px; }
@media (max-width: 899px) {
  .nux-topbar .nux-topbar-search.nux-topbar-search { width: 44px; height: 44px; justify-content: center; padding: 0; } /* doubled class: an app's own width for the desktop trigger does not keep the phone icon wide */
  .nux-topbar-search-label, .nux-topbar-key { display: none; }
  .nux-topbar .nux-iconbtn { width: 44px; height: 44px; }
}
@media (max-width: 599px) { .nux-topbar { padding: var(--space-2) var(--space-3); } }

/* ---------- Toolbar ---------- */
.nux-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); box-sizing: border-box; max-width: 100%; min-height: var(--nav-bar); padding: var(--space-2) var(--space-3); color: var(--ink); }
.nux-toolbar-filterbox { position: relative; flex: 0 1 280px; min-width: 160px; max-width: 100%; display: flex; align-items: center; }
.nux-toolbar-filterbox > .nux-icon { position: absolute; left: var(--space-2); width: 16px; height: 16px; color: var(--ink-secondary); pointer-events: none; }
.nux-toolbar-filter { width: 100%; box-sizing: border-box; height: var(--control, 40px); padding: 0 var(--space-2) 0 var(--space-6); border: 1px solid var(--border-strong); border-radius: var(--control-radius, var(--radius-md)); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--text-control, 15px); line-height: var(--leading-control, 20px); }
.nux-toolbar-filter::placeholder { color: var(--ink-secondary); }
.nux-toolbar-filter:hover { border-color: var(--ink); }
.nux-toolbar-filter:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-color: var(--accent); }
.nux-toolbar .nux-seg { max-width: 100%; flex-wrap: wrap; border: 0; border-radius: var(--control-radius, var(--radius-md)); }
.nux-toolbar .nux-seg button { height: calc(var(--control-sm, 32px) - 4px); padding: 0 var(--space-2); border-radius: calc(var(--control-radius, var(--radius-md)) - 2px); font-size: var(--text-meta, 13px); line-height: var(--leading-meta, 18px); color: var(--ink-secondary); }
.nux-toolbar .nux-seg button[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
.nux-seg-count { font-variant-numeric: tabular-nums; }
.nux-toolbar-end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-left: auto; min-width: 0; }
.nux-toolbar-count { font-size: var(--text-meta, 13px); line-height: var(--leading-meta, 18px); color: var(--ink-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 899px) {
  .nux-toolbar-filter { height: 44px; font-size: 16px; } /* deliberate: iOS zooms the page on focus into an input set under 16px */
  .nux-toolbar-filterbox { flex-basis: 100%; }
  .nux-toolbar .nux-seg button { height: 40px; padding: 0 var(--space-3); }
  .nux-toolbar .nux-btn, .nux-toolbar .nux-iconbtn { min-height: 44px; }
}

/* ---------- Panel ---------- */
.nux-panel { box-sizing: border-box; min-width: 0; max-width: 100%; border: 1px solid var(--separator); border-radius: var(--panel-radius, var(--radius-lg)); background: var(--surface); color: var(--ink); overflow: hidden; }
.nux-panel-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); box-sizing: border-box; min-height: var(--panel-head, 52px); padding: var(--space-1) var(--space-3) var(--space-1) var(--space-4); border-bottom: 1px solid var(--separator); }
.nux-panel-title { margin: 0; min-width: 0; font-size: var(--text-panel-title, 24px); line-height: var(--leading-panel-title, 28px); font-weight: 600; }
.nux-panel-meta { flex: 1 1 0; min-width: 0; font-size: var(--text-meta, 13px); line-height: var(--leading-meta, 18px); color: var(--ink-secondary); overflow-wrap: anywhere; }
.nux-panel-action { flex: none; display: inline-flex; align-items: center; font: inherit; font-size: var(--text-meta, 13px); line-height: var(--leading-meta, 18px); font-weight: 600; color: var(--accent); text-decoration: none; background: transparent; border: 0; padding: 0; cursor: pointer; }
.nux-panel-action:hover { text-decoration: underline; text-underline-offset: 2px; }
.nux-panel-action:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.nux-panel-body { padding: var(--panel-pad, var(--space-5)); }
.nux-panel-body-flush { padding: 0; }
.nux-panel-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); box-sizing: border-box; min-height: 32px; padding: var(--space-1) var(--space-4); border-top: 1px solid var(--separator); background: var(--surface-secondary); font-size: var(--text-meta, 13px); line-height: var(--leading-meta, 18px); color: var(--ink-secondary); }
.nux-panel-row { display: flex; align-items: center; gap: var(--space-2); box-sizing: border-box; min-height: var(--row, 48px); padding: var(--space-1) var(--space-3) var(--space-1) var(--space-4); font-size: var(--text-control, 15px); line-height: var(--leading-control, 20px); color: inherit; text-decoration: none; }
.nux-panel-row + .nux-panel-row { border-top: 1px solid var(--separator); }
a.nux-panel-row:hover { background: var(--surface-secondary); }
a.nux-panel-row:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
@media (max-width: 899px) {
  .nux-panel-head { min-height: max(44px, var(--panel-head, 52px)); }
  .nux-panel-action { min-height: 44px; min-width: 44px; justify-content: center; }
  .nux-panel-row { min-height: max(44px, var(--row, 48px)); }
}

/* ---------- SplitView ---------- */
.nux-split { container-type: inline-size; display: flex; flex-wrap: wrap; align-items: stretch; min-width: 0; max-width: 100%; }
.nux-split-list { flex: 3 1 480px; min-width: 0; }
.nux-split-detail { flex: 2 1 380px; min-width: 0; border-left: 1px solid var(--separator); }
.nux-split-solo .nux-split-list { flex: 1 1 100%; }
@container (max-width: 859px) { .nux-split-detail { flex-basis: 100%; border-left: 0; border-top: 1px solid var(--separator); } }
@media (min-width: 1440px) { .nux-split-detail { max-width: 480px; } }

/* ---------- DataTable ---------- */
.nux-dt { position: relative; container-type: inline-size; min-width: 0; max-width: 100%; color: var(--ink); font-size: var(--text-control, 15px); line-height: var(--leading-control, 20px); }
.nux-dt-head, .nux-dt-row { display: grid; grid-template-columns: var(--dt-cols, minmax(0, 1fr)); column-gap: var(--space-3); align-items: center; box-sizing: border-box; padding: 0 var(--space-3) 0 var(--space-4); }
.nux-dt-head { min-height: var(--table-head, 40px); background: var(--surface-secondary); border-bottom: 1px solid var(--separator); font-size: var(--text-meta, 13px); line-height: var(--leading-meta, 18px); font-weight: 500; color: var(--ink-secondary); }
.nux-dt-row { min-height: var(--row, 48px); text-decoration: none; color: inherit; }
.nux-dt-row + .nux-dt-row { border-top: 1px solid var(--separator); }
.nux-dt-cell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nux-dt-row .nux-dt-cell:first-child { font-weight: 600; }
.nux-dt-cell-end { text-align: right; font-variant-numeric: tabular-nums; }
.nux-dt-cell-mono { font-family: var(--font-mono); font-size: 12px; line-height: 16px; }
.nux-dt-cell a { color: inherit; text-decoration: none; }
.nux-dt-cell a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.nux-dt-cell a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.nux-dt-probe { position: absolute; top: 0; left: 0; width: 100%; height: 0; visibility: hidden; pointer-events: none; }
.nux-dt-row-click { cursor: pointer; }
.nux-dt-row-click:hover { background: var(--surface-secondary); }
.nux-dt-row-click:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
@media (max-width: 899px) { .nux-dt-row-click { min-height: max(44px, var(--row, 48px)); } } /* a tappable row is a 44 px target on touch widths */
.nux-dt-row-success { background: var(--success-soft); } .nux-dt-row-warning { background: var(--warning-soft); } .nux-dt-row-danger { background: var(--danger-soft); } .nux-dt-row-accent { background: var(--accent-soft); }
.nux-dt-row[aria-selected="true"] { background: var(--accent-soft); }
.nux-dt-empty { padding: var(--space-5) var(--space-4); border-top: 0; }
.nux-dt-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); box-sizing: border-box; min-height: 32px; padding: var(--space-1) var(--space-4); border-top: 1px solid var(--separator); background: var(--surface-secondary); font-size: var(--text-meta, 13px); line-height: var(--leading-meta, 18px); color: var(--ink-secondary); }
/* Stacked two-line rows: in a narrow container (below), and when the columns do not fit it (data-stacked, set by the
   bundle's DataTable, see fitWatch). The header stays for assistive technology: it is clipped, not display:none. */
@container (max-width: 599px) {
  .nux-dt-head { display: block; position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .nux-dt .nux-dt-head .nux-dt-cell.nux-dt-cell { position: absolute; top: 0; left: 0; width: 1px; height: auto; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; justify-self: auto; } /* the labels stay readable to assistive technology; every box collapses into the 1px head */
  .nux-dt-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 2px; min-height: 44px; padding: 6px 12px; }
  .nux-dt-row .nux-dt-cell { flex: 0 1 auto; }
  .nux-dt-p-main { flex: 1 1 calc(100% - 130px) !important; min-width: 0; }
  .nux-dt-p-badge { flex: none !important; }
  .nux-dt-p-sub { font-size: 12px; line-height: 16px; color: var(--ink-secondary); text-align: left; white-space: nowrap; font-weight: 400; }
  .nux-dt-p-ticks { flex: 1 1 90px !important; min-width: 60px; overflow: visible; }
  .nux-dt-p-wide { flex: 1 1 100% !important; white-space: normal; }
  .nux-dt-p-hide { display: none; }
}
.nux-dt[data-stacked] .nux-dt-head { display: block; position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nux-dt[data-stacked] .nux-dt-head .nux-dt-cell.nux-dt-cell { position: absolute; top: 0; left: 0; width: 1px; height: auto; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; justify-self: auto; }
.nux-dt[data-stacked] .nux-dt-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 2px; min-height: 44px; padding: 6px 12px; }
.nux-dt[data-stacked] .nux-dt-row .nux-dt-cell { flex: 0 1 auto; }
.nux-dt[data-stacked] .nux-dt-p-main { flex: 1 1 calc(100% - 130px) !important; min-width: 0; }
.nux-dt[data-stacked] .nux-dt-p-badge { flex: none !important; }
.nux-dt[data-stacked] .nux-dt-p-sub { font-size: 12px; line-height: 16px; color: var(--ink-secondary); text-align: left; white-space: nowrap; font-weight: 400; }
.nux-dt[data-stacked] .nux-dt-p-ticks { flex: 1 1 90px !important; min-width: 60px; overflow: visible; }
.nux-dt[data-stacked] .nux-dt-p-wide { flex: 1 1 100% !important; white-space: normal; }
.nux-dt[data-stacked] .nux-dt-p-hide { display: none; }

/* ---------- StatStrip, linked cells (panel form) ---------- */
.nux-strip-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); border-radius: var(--panel-radius, var(--radius-lg)); background: var(--surface); max-width: 100%; box-sizing: border-box; }
.nux-strip-panel .nux-strip-cell { flex: none; min-width: 0; padding: var(--space-3) var(--space-4); border-left: 0; border-right: 1px solid var(--separator); border-bottom: 1px solid var(--separator); margin: 0 -1px -1px 0; color: var(--ink); text-decoration: none; }
.nux-strip-panel .nux-strip-cell + .nux-strip-cell { border-left: 0; }
.nux-strip-panel .nux-strip-label { font-size: var(--text-meta, 13px); line-height: var(--leading-meta, 18px); font-weight: 500; }
.nux-strip-panel .nux-strip-value { font-size: var(--text-figure, 32px); line-height: var(--leading-figure, 36px); font-weight: 600; letter-spacing: -0.005em; }
.nux-strip-sub { font-size: var(--text-meta, 13px); line-height: var(--leading-meta, 18px); font-weight: 500; color: var(--ink-secondary); }
.nux-strip-sub-success { color: var(--success); } .nux-strip-sub-warning { color: var(--warning); } .nux-strip-sub-danger { color: var(--danger); } .nux-strip-sub-accent { color: var(--accent); }
a.nux-strip-cell:hover { background: var(--surface-secondary); }
a.nux-strip-cell:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
@media (max-width: 599px) {
  .nux-strip-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nux-strip-panel .nux-strip-cell { padding: var(--space-2) var(--space-3); }
  .nux-strip-panel .nux-strip-cell:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---------- UptimeBar, inline and pane sizes ---------- */
.nux-uptime-inline, .nux-uptime-pane { display: flex; align-items: stretch; width: 100%; min-width: 0; }
.nux-uptime-inline { height: 14px; gap: 2px; }
.nux-uptime-inline i { flex: 1 1 0; min-width: 0; max-width: 6px; border-radius: 1px; } /* deliberate: a 6px-wide tick, radius-sm would turn it into a pill */
.nux-uptime-pane { height: 24px; gap: 4px; }
.nux-uptime-pane i { flex: 1 1 0; min-width: 0; border-radius: 2px; } /* deliberate: a tick, not a control, so no radius token */
.nux-uptime-inline i, .nux-uptime-pane i { background: var(--ink-disabled); }
.nux-uptime-inline .nux-uptime-none, .nux-uptime-pane .nux-uptime-none { background: var(--ink-disabled) !important; }

/* ---------- Sidebar, compact and rail ---------- */
.nux-sidebar-compact { width: 220px; padding: 12px 8px; gap: 16px; background: transparent; border-right: 0; min-width: 0; max-width: 100%; }
.nux-sidebar-compact .nux-sidebar-brand { height: var(--sidebar-row, 36px); padding: 0 var(--space-2); gap: var(--space-2); }
.nux-sidebar-mark { flex: none; width: 22px; height: 22px; border-radius: var(--radius-sm); background: var(--accent); }
.nux-sidebar-name { font-size: 15px; line-height: 20px; font-weight: 800; letter-spacing: -0.01em; }
.nux-sidebar-compact .nux-sidebar-brand .nux-iconbtn { width: 28px; height: 28px; margin-left: auto; border-radius: var(--radius-sm); }
.nux-sidebar-compact .nux-sidebar-brand .nux-icon { width: 16px; height: 16px; }
.nux-sidebar-compact .nux-sidebar-heading { display: flex; align-items: center; height: 24px; padding: 0 var(--space-2); font-size: 11px; line-height: 14px; font-weight: 600; }
.nux-sidebar .nux-sidebar-item { display: flex; align-items: center; gap: var(--space-2); box-sizing: border-box; width: 100%; height: var(--sidebar-row, 36px); padding: 0 var(--space-2); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-secondary); font: inherit; font-size: var(--text-control, 15px); line-height: var(--leading-control, 20px); font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; position: relative; }
.nux-sidebar .nux-sidebar-item .nux-icon { width: var(--sidebar-icon, 20px); height: var(--sidebar-icon, 20px); flex: none; }
.nux-sidebar-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nux-sidebar-value { flex: none; font-size: var(--text-meta, 13px); line-height: var(--leading-meta, 18px); font-weight: 400; color: var(--ink-secondary); }
.nux-sidebar-compact .nux-sidebar-item:hover { background: var(--surface-raised); color: var(--ink); }
.nux-sidebar-compact .nux-sidebar-item[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nux-sidebar-compact .nux-sidebar-item:focus-visible, .nux-sidebar-compact .nux-sidebar-brand .nux-iconbtn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.nux-sidebar-compact .nux-count { background: var(--separator); color: var(--ink); font-variant-numeric: tabular-nums; }
.nux-sidebar-compact .nux-count-danger { background: var(--danger-soft); color: var(--danger); }
.nux-sidebar-compact .nux-count-warning { background: var(--warning-soft); color: var(--warning); }
.nux-sidebar-footitems { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: var(--space-2); border-top: 1px solid var(--separator); }
.nux-sidebar-rail { width: 56px; align-items: stretch; }
.nux-sidebar-rail .nux-sidebar-brand { flex-direction: column; height: auto; padding: 0; gap: var(--space-2); justify-content: center; }
.nux-sidebar-rail .nux-sidebar-brand .nux-iconbtn { margin-left: 0; }
.nux-sidebar-rail .nux-sidebar-name, .nux-sidebar-rail .nux-sidebar-label, .nux-sidebar-rail .nux-sidebar-value, .nux-sidebar-rail .nux-sidebar-heading { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* visually hidden, still read aloud */
.nux-sidebar-rail .nux-sidebar-item { justify-content: center; padding: 0; }
.nux-sidebar-rail .nux-sidebar-item .nux-count { position: absolute; top: -1px; right: -2px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 11px; }
.nux-sidebar-rail .nux-sidebar-group + .nux-sidebar-group { padding-top: var(--space-2); border-top: 1px solid var(--separator); }
/* Collapsible groups (1.4.0), both forms: the heading keeps its caption type and becomes a button
   (chevron right while closed, down while open) over .nux-sidebar-items. A closed group's count
   sits on the heading as a 16px pill, so the heading keeps its height. The rail never collapses. */
.nux-sidebar button.nux-sidebar-heading { display: flex; align-items: center; gap: var(--space-1); box-sizing: border-box; width: 100%; max-width: 100%; margin: 0; border: 0; border-radius: var(--radius-sm); background: transparent; font-family: inherit; text-align: left; cursor: pointer; transition: color var(--duration-fast); }
.nux-sidebar button.nux-sidebar-heading:hover { color: var(--ink); }
.nux-sidebar button.nux-sidebar-heading:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.nux-sidebar-heading-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nux-sidebar-heading-count { display: inline-flex; flex: none; letter-spacing: 0; }
.nux-sidebar-heading-count[hidden] { display: none; }
.nux-sidebar-heading-count .nux-count { min-width: 16px; height: 16px; padding: 0 4px; }
.nux-sidebar-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* visually hidden, still read aloud */
.nux-sidebar-chevron { flex: none; transition: transform var(--duration-fast); }
.nux-sidebar-heading[aria-expanded="false"] .nux-sidebar-chevron { transform: rotate(-90deg); }
.nux-sidebar-items { display: flex; flex-direction: column; gap: inherit; }
.nux-sidebar-items[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .nux-sidebar-chevron { transition: none; } }

/* ---------- AppShell, sheet layout ---------- */
.nux-appshell-sheet { --shell-h: 100vh; display: flex; min-height: var(--shell-h); background: var(--surface-frame, var(--surface-secondary)); } /* --shell-h: the shell's height; a preview or an embedded shell sets its own */
.nux-appshell-sheet > .nux-sidebar { flex: none; position: sticky; top: 0; align-self: flex-start; height: var(--shell-h); overflow-y: auto; }
/* .nux-sheet is also the bottom Sheet's class: everything here is scoped to the shell and resets what that one sets */
.nux-appshell-sheet > .nux-sheet { flex: 1 1 0; width: auto; padding: 0; gap: 0; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; margin: 8px; min-height: calc(var(--shell-h) - 16px); background: var(--surface); border: 1px solid var(--separator); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: clip; color: var(--ink); }
.nux-appshell-sheet > .nux-sidebar + .nux-sheet { margin-left: 0; }
.nux-sheet-content { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--panel-gap, var(--space-5)); box-sizing: border-box; width: 100%; padding: var(--space-4) var(--space-5) var(--space-5); min-width: 0; }
.nux-sheet-content > * { min-width: 0; }
.nux-sheet-tabbar { display: none; }
@media (min-width: 1920px) { .nux-sheet-content { max-width: var(--content-app, 1680px); margin-left: auto; margin-right: auto; } }
@media (max-width: 899px) {
  .nux-appshell-sheet { flex-direction: column; }
  .nux-appshell-sheet > .nux-sidebar { display: none; }
  .nux-appshell-sheet > .nux-sheet, .nux-appshell-sheet > .nux-sidebar + .nux-sheet { margin: 0; border: 0; border-radius: 0; box-shadow: none; overflow: visible; min-height: var(--shell-h); flex: 1 1 auto; }
  .nux-sheet-content { padding: 12px 16px 24px; }
  .nux-sheet-tabbar { display: block; position: sticky; bottom: 0; z-index: var(--layer-raised); background: var(--surface); border-top: 1px solid var(--separator); }
  .nux-sheet-tabbar .nux-tabbar { border-top: 0; background: var(--surface); }
  .nux-sheet-tabbar .nux-tabbar a, .nux-sheet-tabbar .nux-tabbar button { font-size: 11px; line-height: 14px; }
  .nux-sheet-tabbar .nux-tabbar [aria-current="page"] { font-weight: 600; }
}
@media (max-width: 599px) { .nux-sheet-content { padding: 12px; } }

/* ======================= Density: compact (data-density="compact", and "auto" from bp-md with a fine pointer) =======================
   Sizes that are one number live in tokens.json (density); the rules below are the ones a token cannot say.
   :where() keeps the specificity of a plain class so a component's own override (.nux-toolbar .nux-seg, .nux-pw .nux-iconbtn) still wins.
   The compact block and the auto block are the same rules: change both. */

/* Alert: one slim line where it fits; the action sits at the end of the line */
:where([data-density="compact"]) .nux-alert { align-items: flex-start; }
:where([data-density="compact"]) .nux-alert .nux-icon { width: var(--alert-icon); height: var(--alert-icon); margin-top: 1px; }
:where([data-density="compact"]) .nux-alert-text { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-2); min-width: 0; }
:where([data-density="compact"]) .nux-alert-title, :where([data-density="compact"]) .nux-alert-body { min-width: 0; overflow-wrap: anywhere; }
:where([data-density="compact"]) .nux-alert .nux-btn-tertiary { height: var(--control-sm); margin: -5px 0 -5px auto; padding: 0 var(--space-2); }
:where([data-density="compact"]) .nux-alert-close { width: var(--iconbtn); height: var(--iconbtn); margin: -7px -8px -7px 0; }
@media (max-width: 899px) { :where([data-density="compact"]) .nux-alert .nux-btn-tertiary { margin-top: 0; margin-bottom: 0; } } /* on a phone the action wraps under the text; the negative margins would lay it over the line above */
/* EmptyState, Select glyphs */
:where([data-density="compact"]) .nux-empty-icon .nux-icon { width: var(--empty-glyph); height: var(--empty-glyph); }
:where([data-density="compact"]) .nux-select-wrap .nux-icon { width: var(--select-icon); height: var(--select-icon); }
/* Switch row, Tabs and Segmented read as one row of 28 high buttons */
:where([data-density="compact"]) .nux-seg { box-sizing: border-box; }
:where([data-density="compact"]) .nux-tabs button { box-sizing: border-box; }
/* Drawer: a right-side pane, not a sheet */
:where([data-density="compact"]) .nux-drawer { border-left: 1px solid var(--separator); box-shadow: var(--shadow-md); }
:where([data-density="compact"]) .nux-drawer .nux-kv, :where([data-density="compact"]) .nux-drawer .nux-list { font-size: var(--text-control); }
@media (min-width: 900px) and (pointer: fine) {

  /* Alert: one slim line where it fits; the action sits at the end of the line */
  :where([data-density="auto"]) .nux-alert { align-items: flex-start; }
  :where([data-density="auto"]) .nux-alert .nux-icon { width: var(--alert-icon); height: var(--alert-icon); margin-top: 1px; }
  :where([data-density="auto"]) .nux-alert-text { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-2); min-width: 0; }
  :where([data-density="auto"]) .nux-alert-title, :where([data-density="auto"]) .nux-alert-body { min-width: 0; overflow-wrap: anywhere; }
  :where([data-density="auto"]) .nux-alert .nux-btn-tertiary { height: var(--control-sm); margin: -5px 0 -5px auto; padding: 0 var(--space-2); }
  :where([data-density="auto"]) .nux-alert-close { width: var(--iconbtn); height: var(--iconbtn); margin: -7px -8px -7px 0; }
  /* EmptyState, Select glyphs */
  :where([data-density="auto"]) .nux-empty-icon .nux-icon { width: var(--empty-glyph); height: var(--empty-glyph); }
  :where([data-density="auto"]) .nux-select-wrap .nux-icon { width: var(--select-icon); height: var(--select-icon); }
  /* Switch row, Tabs and Segmented read as one row of 28 high buttons */
  :where([data-density="auto"]) .nux-seg { box-sizing: border-box; }
  :where([data-density="auto"]) .nux-tabs button { box-sizing: border-box; }
  /* Drawer: a right-side pane, not a sheet */
  :where([data-density="auto"]) .nux-drawer { border-left: 1px solid var(--separator); box-shadow: var(--shadow-md); }
  :where([data-density="auto"]) .nux-drawer .nux-kv, :where([data-density="auto"]) .nux-drawer .nux-list { font-size: var(--text-control); }

  /* TopBar: exactly nav-bar (48px) tall, hairline included, at every width. One line: the title and the freshness
     line give way (clip, ellipsis) before the controls do, so the bar never wraps taller. */
  :where([data-density="auto"]) .nux-topbar { flex-wrap: nowrap; height: var(--nav-bar); min-height: 0; padding-top: 0; padding-bottom: 0; }
  :where([data-density="auto"]) .nux-topbar-title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
  :where([data-density="auto"]) .nux-topbar-meta { display: block; flex: 0 1000 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  :where([data-density="auto"]) .nux-topbar-meta > .nux-topbar-dot { display: inline-block; margin-right: 6px; vertical-align: middle; }
  :where([data-density="auto"]) .nux-topbar-meta > :not(.nux-topbar-dot) { display: inline-block; max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
  :where([data-density="auto"]) .nux-topbar-end { flex: none; max-width: none; }
}

/* TopBar under auto where auto is not compact (below bp-md, or a coarse pointer): the same one 48px line, in the
   comfortable sizes (44px touch controls fit in 47px; the title takes the compact 15/20 so it fits the bar). */
@media not all and (min-width: 900px) and (pointer: fine) {
  :where([data-density="auto"]) .nux-topbar { flex-wrap: nowrap; height: 48px; min-height: 0; padding-top: 0; padding-bottom: 0; }
  :where([data-density="auto"]) .nux-topbar-title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; font-size: 15px; line-height: 20px; }
  :where([data-density="auto"]) .nux-topbar-meta { display: block; flex: 0 1000 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  :where([data-density="auto"]) .nux-topbar-meta > .nux-topbar-dot { display: inline-block; margin-right: 6px; vertical-align: middle; }
  :where([data-density="auto"]) .nux-topbar-meta > :not(.nux-topbar-dot) { display: inline-block; max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
  :where([data-density="auto"]) .nux-topbar-end { flex: none; max-width: none; }
}

/* TopBar under compact (1.3.3) */
/* TopBar: exactly nav-bar (48px) tall, hairline included, at every width. One line: the title and the freshness
   line give way (clip, ellipsis) before the controls do, so the bar never wraps taller. */
:where([data-density="compact"]) .nux-topbar { flex-wrap: nowrap; height: var(--nav-bar); min-height: 0; padding-top: 0; padding-bottom: 0; }
:where([data-density="compact"]) .nux-topbar-title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
:where([data-density="compact"]) .nux-topbar-meta { display: block; flex: 0 1000 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where([data-density="compact"]) .nux-topbar-meta > .nux-topbar-dot { display: inline-block; margin-right: 6px; vertical-align: middle; }
:where([data-density="compact"]) .nux-topbar-meta > :not(.nux-topbar-dot) { display: inline-block; max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
:where([data-density="compact"]) .nux-topbar-end { flex: none; max-width: none; }

/* Phones under compact density: the visuals stay compact, the hit area does not. A 44px slop box sits behind
   the control (no layout, no paint); a label or row grows to 44 instead. A wrapping .nux-switch / .nux-check /
   .nux-radio label is the preferred hit area for a Toggle, Checkbox or Radio with text. Inputs are 16px. */
@media (max-width: 899px) {
  :where([data-density="compact"]) :is(.nux-input, .nux-select, .nux-textarea, .nux-cmdk-input, .nux-code input) { font-size: 16px; } /* deliberate: iOS zooms the page on focus into an input set under 16px */
  :where([data-density="compact"]) :is(.nux-input, .nux-select) { height: 44px; }
  :where([data-density="compact"]) .nux-select-wrap .nux-icon { top: calc((44px - var(--select-icon)) / 2); }
  :where([data-density="compact"]) :is(.nux-btn, .nux-iconbtn, .nux-chip, .nux-seg button, .nux-tabs button, .nux-toggle, .nux-alert-close, .nux-search-clear, .nux-chip-remove) { position: relative; }
  :where([data-density="compact"]) .nux-search-clear { position: absolute; }
  :where([data-density="compact"]) .nux-pw .nux-iconbtn { position: absolute; }
  :where([data-density="compact"]) :is(.nux-btn, .nux-iconbtn, .nux-chip, .nux-seg button, .nux-tabs button, .nux-toggle, .nux-alert-close, .nux-search-clear, .nux-chip-remove)::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
  :where([data-density="compact"]) :is(.nux-switch, .nux-check, .nux-radio) { min-height: 44px; align-items: center; }
  :where([data-density="compact"]) :is(a.nux-list-row, button.nux-list-row, .nux-menu button, .nux-cmdk-row) { min-height: 44px; }
}