@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:wght@400;500;600&family=Atkinson+Hyperlegible+Next:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Source+Serif+4:ital,opsz,wght@1,8..60,400;1,8..60,500&display=swap");

/* ==========================================================================
   Noephic Headword — components (components/bundle.css)
   Loads after tokens.css. Every color, space, radius and shadow comes from
   a token; nothing here paints a literal color, so both themes follow.
   Class prefix: nx-   Type classes (hw-*, ui-*, fig-*, mono*) come from tokens.css.
   ========================================================================== */

/* ---------- Root ---------- */
.nx, .nx *, .nx *::before, .nx *::after { box-sizing: border-box; }
.nx {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 22px;
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}
/* Resets carry zero specificity (:where) so every component class below wins over them. */
:where(.nx) :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure) { margin: 0; }
:where(.nx) :where(ul, ol) { padding: 0; list-style: none; }
:where(.nx) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.nx) :where(button) { cursor: pointer; }
:where(.nx) :where(a) { color: inherit; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
:where(.nx) :where(a):hover { text-decoration-color: currentColor; }
.nx :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.nx ::selection { background: var(--selected); color: var(--ink); }
.nx-tabular { font-variant-numeric: tabular-nums; }
.nx-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nx-muted { color: var(--ink-3); }
.nx-soft { color: var(--ink-2); }
.nx-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.nx-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.nx-spread { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.nx-grow { flex: 1 1 auto; min-width: 0; }
.nx-hr { height: 1px; border: 0; background: var(--line); margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .nx *, .nx *::before, .nx *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- Headwords: the mark's idea, a defined word followed by the dot ---------- */
.nx-hw { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--ink); text-wrap: balance; margin: 0; }
.nx-period::after {
  content: "";
  display: inline-block;
  width: 0.13em;
  height: 0.13em;
  margin-left: 0.05em;
  border-radius: var(--radius-full);
  background: var(--dot);
  vertical-align: baseline;
}
.nx-kind { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); font-size: 13px; line-height: 18px; color: var(--ink-3); }
.nx-kind strong { font-weight: 600; color: var(--ink-2); }

/* ---------- App shell (desktop: sidebar + sheet · tablet: rail · phone: tab bar) ---------- */
.nx-app { display: grid; grid-template-columns: var(--size-sidebar) minmax(0, 1fr); min-height: 100vh; background: var(--ground); }
.nx-side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5) var(--space-3) var(--space-4) var(--space-4); overflow-y: auto; }
.nx-side-top { display: flex; align-items: center; gap: var(--space-2); }
.nx-brand { display: inline-flex; width: 32px; height: 32px; flex: none; }
.nx-brand img { width: 100%; height: 100%; display: block; }
.nx-spacebtn { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-m); background: transparent; color: var(--ink); font-size: 14px; font-weight: 600; text-align: left; }
.nx-spacebtn:hover { background: var(--hover); }
.nx-spacebtn .nx-i { color: var(--ink-3); margin-left: auto; }
.nx-nav { display: flex; flex-direction: column; gap: 2px; }
.nx-nav-label { padding: var(--space-3) var(--space-3) var(--space-1); font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-3); }
.nx-nav-item { display: flex; align-items: center; gap: var(--space-3); height: 36px; padding: 0 var(--space-3); border-radius: var(--radius-m); color: var(--ink-2); font-size: 14px; line-height: 20px; font-weight: 500; text-decoration: none; border: 0; background: transparent; width: 100%; text-align: left; }
.nx a.nx-nav-item { text-decoration: none; }
.nx-nav-item .nx-i { color: var(--ink-3); }
.nx-nav-item:hover { background: var(--hover); color: var(--ink); }
.nx-nav-item[aria-current="page"] { background: var(--selected); color: var(--ink); font-weight: 600; }
.nx-nav-item[aria-current="page"] .nx-i { color: var(--ink); }
.nx-nav-item .nx-count, .nx-nav-item .nx-badge { margin-left: auto; }
.nx-side-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-2); }
.nx-main { min-width: 0; padding: var(--space-3) var(--space-3) var(--space-3) 0; }
.nx-sheet { background: var(--sheet); border-radius: var(--radius-xl); box-shadow: var(--shadow-hairline); min-height: calc(100vh - 24px); min-width: 0; }
.nx-page { padding: var(--space-8) var(--space-10) var(--space-12); }
.nx-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.nx-page-head > div { min-width: 0; }
.nx-date { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-3); margin-bottom: var(--space-2); }
.nx-summary { font-size: 15px; line-height: 22px; color: var(--ink-2); margin-top: var(--space-2); max-width: var(--size-measure); }
.nx-cols { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); gap: var(--space-8); align-items: start; }
.nx-section { display: flex; flex-direction: column; gap: var(--space-3); }
.nx-section + .nx-section { margin-top: var(--space-8); }
.nx-section-head { display: flex; align-items: center; gap: var(--space-2); min-height: 32px; }
.nx-section-head h2, .nx-section-head h3 { font-size: 16px; line-height: 22px; font-weight: 600; letter-spacing: -0.005em; }
.nx-section-head .nx-count { margin-right: auto; }
.nx-section-head > :last-child:not(h2):not(h3):not(.nx-count) { margin-left: auto; }

/* Detail sheet that slides over a page (desktop) */
.nx-overlay { position: relative; }
.nx-detail { background: var(--sheet-raised); border-radius: var(--radius-xl); box-shadow: var(--shadow-float); width: min(var(--size-detail), 100%); }

/* Mobile chrome */
.nx-mhead { display: none; }
.nx-tabbar { display: flex; align-items: stretch; justify-content: space-around; gap: var(--space-1); padding: var(--space-1) var(--space-2) calc(var(--space-1) + env(safe-area-inset-bottom, 0px)); background: var(--sheet-raised); border-top: 1px solid var(--line); }
.nx-tabbar-item { flex: 1 1 0; min-width: 0; min-height: var(--size-touch); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 2px 4px; border: 0; background: transparent; color: var(--ink-3); font-size: 11px; line-height: 14px; font-weight: 600; text-decoration: none; position: relative; }
.nx a.nx-tabbar-item { text-decoration: none; }
.nx-tabbar-item .nx-i { width: 24px; height: 24px; }
.nx-tabbar-item[aria-current="page"] { color: var(--ink); }
.nx-tabbar-item .nx-badge { position: absolute; top: 2px; left: calc(50% + 6px); }
.nx-fab { position: absolute; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(var(--size-tabbar) + 16px + env(safe-area-inset-bottom, 0px)); width: 56px; height: 56px; border-radius: var(--radius-full); border: 0; background: var(--action); color: var(--on-ink); display: grid; place-items: center; box-shadow: var(--shadow-float); }
.nx-fab .nx-i { width: 26px; height: 26px; }
.nx-app > .nx-tabbar, .nx-app > .nx-fab { display: none; }

@media (max-width: 1100px) {
  .nx-app { grid-template-columns: var(--size-rail) minmax(0, 1fr); }
  .nx-app .nx-side { padding: var(--space-4) var(--space-2); align-items: center; }
  .nx-app .nx-side-top { flex-direction: column; gap: var(--space-3); }
  .nx-app .nx-side .nx-nav-label, .nx-app .nx-side .nx-label-text, .nx-app .nx-side .nx-count, .nx-app .nx-side .nx-spacebtn > .nx-i, .nx-app .nx-side .nx-side-hide { display: none; }
  .nx-app .nx-side .nx-spacebtn .nx-space { font-size: 0; gap: 0; }
  .nx-app .nx-side .nx-spacebtn .nx-space::before { width: 12px; height: 12px; }
  .nx-app .nx-side .nx-nav-item { position: relative; width: 44px; height: 44px; padding: 0; justify-content: center; }
  .nx-app .nx-side .nx-nav-item .nx-badge { position: absolute; transform: translate(12px, -12px); }
  .nx-app .nx-side .nx-spacebtn { flex: none; width: 44px; height: 44px; justify-content: center; }
  .nx-app .nx-side .nx-capture { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .nx-page { padding: var(--space-6) var(--space-6) var(--space-10); }
  .nx-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .nx-app { grid-template-columns: minmax(0, 1fr); padding-bottom: calc(var(--size-tabbar) + env(safe-area-inset-bottom, 0px)); }
  .nx-app .nx-side { display: none; }
  .nx-main { padding: 0; }
  .nx-sheet { border-radius: 0; box-shadow: none; min-height: 100vh; }
  .nx-page { padding: var(--space-4) max(16px, env(safe-area-inset-right, 0px)) var(--space-16) max(16px, env(safe-area-inset-left, 0px)); }
  .nx-mhead { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) 0; }
  .nx-app > .nx-tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; }
  .nx-app > .nx-fab { display: grid; position: fixed; z-index: 21; }
  .nx-hide-phone { display: none !important; }
  /* Phones set page headwords at hw-m: the Today greeting and page titles step down from hw-xl and hw-l. */
  .nx .hw-xl, .nx .hw-l { font-size: 30px; line-height: 36px; letter-spacing: -0.01em; font-variation-settings: 'opsz' 36; }
}
@media (min-width: 761px) { .nx-phone-only { display: none !important; } }

/* Phone frame used by mockups and the iOS shell: header / scroll / tab bar */
.nx-phone { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--sheet); color: var(--ink); }
.nx-phone-scroll { flex: 1 1 auto; overflow: hidden; padding: 0 var(--space-4); }
.nx-phone-scroll > * { flex-shrink: 0; }
.nx-phone .nx-fab { position: absolute; }
.nx-phone .nx-tabbar { flex: none; }

/* ---------- Buttons ---------- */
.nx-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--size-control-m); padding: 0 var(--space-4); border-radius: var(--radius-m); border: 1px solid var(--line-strong); background: var(--sheet); color: var(--ink); font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap; text-decoration: none; transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease; }
.nx a.nx-btn { text-decoration: none; }
.nx-btn:hover { background: var(--hover); }
.nx-btn:active { transform: translateY(1px); }
.nx-btn--primary { background: var(--action); border-color: transparent; color: var(--on-ink); }
.nx-btn--primary:hover { background: var(--action-hover); }
.nx-btn--quiet { background: transparent; border-color: transparent; color: var(--ink-2); }
.nx-btn--quiet:hover { background: var(--hover); color: var(--ink); }
.nx-btn--danger { color: var(--danger); }
.nx-btn--danger:hover { background: var(--danger-soft); }
.nx-btn--ai { background: var(--ai-soft); border-color: transparent; color: var(--ai); }
.nx-btn--ai:hover { background: var(--ai-soft); border-color: var(--ai); }
.nx-btn--s { height: var(--size-control-s); padding: 0 var(--space-3); font-size: 13px; border-radius: var(--radius-s); gap: 6px; }
.nx-btn--l { height: var(--size-control-l); padding: 0 var(--space-5); font-size: 16px; border-radius: var(--radius-l); }
.nx-btn--icon { width: var(--size-control-m); padding: 0; }
.nx-btn--icon.nx-btn--s { width: var(--size-control-s); }
.nx-btn--icon.nx-btn--l { width: var(--size-control-l); }
.nx-btn--block { width: 100%; }
.nx-btn[disabled], .nx-btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.nx-btn .nx-kbd { margin-left: var(--space-1); }
.nx-btn--primary .nx-kbd { background: transparent; border-color: currentColor; color: inherit; opacity: 0.75; }
.nx-btngroup { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* ---------- Segmented control ---------- */
.nx-seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--radius-m); background: var(--sheet-sunken); border: 1px solid var(--line); }
.nx-seg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 var(--space-3); border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font-size: 13px; line-height: 18px; font-weight: 600; white-space: nowrap; }
.nx-seg-btn:hover { color: var(--ink); }
.nx-seg-btn[aria-pressed="true"], .nx-seg-btn[aria-selected="true"] { background: var(--sheet); color: var(--ink); box-shadow: var(--shadow-hairline); }
.nx-seg--icons .nx-seg-btn { width: 36px; padding: 0; }

/* ---------- Attention mode ---------- */
.nx-mode { display: inline-flex; flex-direction: column; gap: var(--space-1); }
.nx-mode .nx-seg-btn[data-mode="open"][aria-pressed="true"] .nx-i { color: var(--positive); }
.nx-mode .nx-seg-btn[data-mode="focus"][aria-pressed="true"] .nx-i { color: var(--caution); }
.nx-mode .nx-seg-btn[data-mode="dnd"][aria-pressed="true"] .nx-i { color: var(--dot-ink); }
.nx-mode-note { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.nx-modepill { display: inline-flex; align-items: center; gap: var(--space-2); height: 32px; padding: 0 var(--space-3) 0 var(--space-2); border-radius: var(--radius-full); border: 1px solid var(--line-strong); background: var(--sheet); font-size: 13px; font-weight: 600; color: var(--ink); }
.nx-modepill[data-mode="focus"] .nx-i { color: var(--caution); }
.nx-modepill[data-mode="open"] .nx-i { color: var(--positive); }
.nx-modepill[data-mode="dnd"] .nx-i { color: var(--dot-ink); }

/* ---------- Fields ---------- */
.nx-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nx-label { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-2); }
.nx-help { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.nx-input, .nx-select, .nx-textarea { width: 100%; min-height: var(--size-control-m); padding: 9px var(--space-3); border: 1px solid var(--control); border-radius: var(--radius-m); background: var(--sheet); color: var(--ink); font-size: 15px; line-height: 20px; }
.nx-textarea { min-height: 96px; resize: vertical; line-height: 22px; }
.nx-input::placeholder, .nx-textarea::placeholder { color: var(--ink-3); }
.nx-input:focus, .nx-select:focus, .nx-textarea:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.nx-select { appearance: none; padding-right: var(--space-8); }
.nx-search { position: relative; display: flex; align-items: center; gap: var(--space-2); height: var(--size-control-m); padding: 0 var(--space-2) 0 var(--space-3); border-radius: var(--radius-m); background: var(--sheet); border: 1px solid var(--control); color: var(--ink-3); }
.nx-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; color: var(--ink); font-size: 14px; }
.nx-search input::placeholder { color: var(--ink-3); }
.nx-search:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; }
.nx-capture { display: flex; align-items: center; gap: var(--space-2); width: 100%; height: var(--size-control-m); padding: 0 var(--space-2) 0 var(--space-3); border-radius: var(--radius-m); border: 1px solid var(--line-strong); background: var(--sheet); color: var(--ink-2); font-size: 14px; font-weight: 600; text-align: left; box-shadow: var(--shadow-hairline); }
.nx-capture:hover { color: var(--ink); border-color: var(--control); }
.nx-capture .nx-kbd { margin-left: auto; }

/* ---------- Switch ---------- */
.nx-switch { position: relative; flex: none; width: 40px; height: 24px; border-radius: var(--radius-full); border: 1px solid var(--control); background: var(--sheet-sunken); padding: 0; }
.nx-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: var(--radius-full); background: var(--ink-3); transition: transform 140ms ease, background-color 140ms ease; }
.nx-switch[aria-checked="true"] { background: var(--action); border-color: var(--action); }
.nx-switch[aria-checked="true"]::after { transform: translateX(16px); background: var(--on-ink); }
.nx-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; }

/* ---------- Task check: the completion control and the state it shows ---------- */
.nx-check { position: relative; flex: none; width: 22px; height: 22px; padding: 0; border-radius: var(--radius-full); border: 1.5px solid var(--control); background: transparent; display: inline-grid; place-items: center; color: transparent; }
.nx-check::before { content: ""; position: absolute; inset: -11px; }
.nx-check:hover { border-color: var(--ink); color: var(--ink-3); }
.nx-check[data-state="doing"] { border-color: var(--ink); background: conic-gradient(var(--ink) 0 50%, transparent 0 100%); }
.nx-check[data-state="waiting"] { border-style: dashed; border-color: var(--caution); }
.nx-check[data-state="snoozed"], .nx-check[data-state="someday"] { border-style: dotted; }
.nx-check[data-state="assistant"] { border-color: var(--ai); }
.nx-check[data-state="assistant"]::after { content: ""; position: absolute; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--ai); }
.nx-check[data-state="done"] { border-color: var(--positive); background: var(--positive); color: var(--on-ink); }
.nx-check[data-state="done"] .nx-i { width: 14px; height: 14px; }
.nx-check[data-state="notdoing"] { border-color: var(--ink-3); color: var(--ink-3); }
.nx-check .nx-i { width: 14px; height: 14px; }

/* ---------- Chips and tags ---------- */
.nx-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 var(--space-3); border-radius: var(--radius-s); border: 1px solid var(--line-strong); background: var(--sheet); color: var(--ink-2); font-size: 13px; line-height: 18px; font-weight: 600; white-space: nowrap; }
.nx-chip:hover { color: var(--ink); background: var(--hover); }
.nx-chip[aria-pressed="true"], .nx-chip[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.nx-chip[aria-pressed="true"] .nx-count, .nx-chip[aria-selected="true"] .nx-count { color: inherit; opacity: 0.8; }
.nx-chip .nx-i { width: 16px; height: 16px; }
.nx-chip--add { border-style: dashed; color: var(--ink-3); }
.nx-tag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 7px; border-radius: var(--radius-s); background: var(--sheet-sunken); color: var(--ink-2); font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; }
.nx-tag .nx-i { width: 14px; height: 14px; }
.nx-tag--caution { background: var(--caution-soft); color: var(--caution); }
.nx-tag--danger { background: var(--danger-soft); color: var(--danger); }
.nx-tag--positive { background: var(--positive-soft); color: var(--positive); }
.nx-tag--ai { background: var(--ai-soft); color: var(--ai); }
.nx-tag--dot { background: var(--dot-soft); color: var(--dot-ink); }
.nx-tag--line { background: transparent; border: 1px solid var(--line-strong); }
.nx-more { font-size: 12px; font-weight: 600; color: var(--ink-3); }

/* ---------- Counts, badges, dots ---------- */
.nx-count { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.nx-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-full); background: var(--dot); color: var(--on-dot); font-size: 11px; line-height: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nx-badge--quiet { background: var(--selected); color: var(--ink-2); }
.nx-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--dot); }
.nx-dot--s { width: 6px; height: 6px; }
.nx-dot--space { background: var(--space, var(--ink-3)); }
.nx-dot--ai { background: var(--ai); }
.nx-dot--positive { background: var(--positive); }
.nx-dot--caution { background: var(--caution); }

/* ---------- Status, priority, Space ---------- */
.nx-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.nx-status .nx-i { width: 15px; height: 15px; }
.nx-status[data-status="doing"] { color: var(--ink); }
.nx-status[data-status="waiting"] { color: var(--caution); }
.nx-status[data-status="snoozed"], .nx-status[data-status="someday"], .nx-status[data-status="notdoing"] { color: var(--ink-3); }
.nx-status[data-status="done"] { color: var(--positive); }
.nx-status[data-status="overdue"], .nx-status[data-status="failed"] { color: var(--danger); }
.nx-status[data-status="assistant"] { color: var(--ai); }
.nx-prio { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; flex: none; }
.nx-prio i { display: block; width: 3px; border-radius: 1px; background: var(--line-strong); }
.nx-prio i:nth-child(1) { height: 6px; } .nx-prio i:nth-child(2) { height: 10px; } .nx-prio i:nth-child(3) { height: 14px; }
.nx-prio[data-level="low"] i:nth-child(-n+1),
.nx-prio[data-level="medium"] i:nth-child(-n+2),
.nx-prio[data-level="high"] i:nth-child(-n+3) { background: var(--ink-2); }
.nx-prio[data-level="critical"] i { background: var(--danger); }
.nx-space { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; color: var(--ink-2); white-space: nowrap; }
.nx-space::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--space, var(--ink-3)); flex: none; }

/* ---------- Avatars (people are neutral; assistants are ai) ---------- */
.nx-avatar { position: relative; display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--selected); color: var(--ink); font-size: 12px; font-weight: 700; letter-spacing: 0.01em; }
.nx-avatar--s { width: 22px; height: 22px; font-size: 10px; }
.nx-avatar--l { width: 40px; height: 40px; font-size: 15px; }
.nx-avatar--ai { background: var(--ai); color: var(--on-ai); border-radius: 30%; }
.nx-avatar--ai .nx-i { width: 60%; height: 60%; }
.nx-avatar[data-presence]::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: var(--radius-full); border: 2px solid var(--sheet); background: var(--ink-3); }
.nx-avatar[data-presence="online"]::after { background: var(--positive); }
.nx-avatar[data-presence="working"]::after { background: var(--caution); }
.nx-avatars { display: inline-flex; }
.nx-avatars > .nx-avatar { box-shadow: 0 0 0 2px var(--sheet); }
.nx-avatars > .nx-avatar + .nx-avatar { margin-left: -6px; }

/* ---------- Keyboard key ---------- */
.nx-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--radius-xs); border: 1px solid var(--line-strong); background: var(--sheet); color: var(--ink-3); font-family: var(--font-mono); font-size: 11px; line-height: 14px; font-weight: 500; }

/* ---------- Tabs (in-page) ---------- */
.nx-tabs { display: flex; align-items: center; gap: var(--space-5); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.nx-tabs-item { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0; border: 0; background: transparent; color: var(--ink-3); font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none; }
.nx a.nx-tabs-item { text-decoration: none; }
.nx-tabs-item:hover { color: var(--ink); }
.nx-tabs-item[aria-selected="true"] { color: var(--ink); }
.nx-tabs-item[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--ink); }

/* ---------- Work row: the core list item ---------- */
.nx-rows { display: flex; flex-direction: column; }
.nx-rows--lined > .nx-row + .nx-row { box-shadow: inset 0 1px 0 var(--line); }
.nx-row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--space-3); padding: 10px var(--space-3); border-radius: var(--radius-m); color: var(--ink); text-decoration: none; }
.nx a.nx-row { text-decoration: none; }
.nx-row:hover { background: var(--hover); }
.nx-row[aria-selected="true"], .nx-row.is-selected { background: var(--selected); box-shadow: none; }
.nx-row > .nx-check { margin-top: 0; }
.nx-row-lead { display: flex; align-items: center; gap: var(--space-2); min-height: 22px; }
.nx-row-num { width: 18px; text-align: right; font-size: 12px; line-height: 22px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.nx-row-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.nx-row-title { font-size: 15px; line-height: 22px; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.nx-row-title .nx-dot { margin-left: 6px; vertical-align: 2px; }
.nx-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-3); font-size: 13px; line-height: 18px; color: var(--ink-3); }
.nx-row-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.nx-row-meta .nx-i { width: 15px; height: 15px; }
.nx-row-meta .is-late { color: var(--danger); font-weight: 600; }
.nx-row-meta .is-soon { color: var(--caution); font-weight: 600; }
.nx-row-trail { display: flex; align-items: center; gap: var(--space-2); min-height: 22px; color: var(--ink-3); font-size: 13px; }
.nx-row--done .nx-row-title { color: var(--ink-3); }
.nx-row--done .nx-row-meta { opacity: 0.85; }
.nx-row-handle { position: absolute; left: -18px; top: 12px; color: var(--ink-3); opacity: 0; }
.nx-row:hover .nx-row-handle { opacity: 1; }
.nx-row--now { background: var(--dot-soft); }
.nx-row--now:hover { background: var(--dot-soft); }
.nx-group-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-3) var(--space-2); font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-2); }
.nx-group-head .nx-count { margin-left: 2px; }

/* ---------- Cards ---------- */
.nx-card { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius-l); padding: var(--space-4) var(--space-5); min-width: 0; }
.nx-card--sunken { background: var(--sheet-sunken); border-color: transparent; }
.nx-card--raised { background: var(--sheet-raised); box-shadow: var(--shadow-lift); border-color: transparent; }
.nx-card--flush { padding: var(--space-2); }
.nx-card-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.nx-card-head h3 { font-size: 15px; line-height: 20px; font-weight: 600; }
.nx-card-head > :last-child:not(h3) { margin-left: auto; }
.nx-card-foot { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; }

/* ---------- Needs you: one place for decisions ---------- */
.nx-needs { display: flex; flex-direction: column; border-radius: var(--radius-l); border: 1px solid var(--line); background: var(--sheet); }
.nx-need { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.nx-need + .nx-need { box-shadow: inset 0 1px 0 var(--line); }
.nx-need-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-m); background: var(--sheet-sunken); color: var(--ink-2); }
.nx-need-icon[data-kind="assistant"] { background: var(--ai-soft); color: var(--ai); }
.nx-need-icon[data-kind="inbox"] { background: var(--dot-soft); color: var(--dot-ink); }
.nx-need-icon[data-kind="checkin"], .nx-need-icon[data-kind="stalled"] { background: var(--caution-soft); color: var(--caution); }
.nx-need-icon[data-kind="goal"] { background: var(--positive-soft); color: var(--positive); }
.nx-need-icon[data-kind="overdue"] { background: var(--danger-soft); color: var(--danger); }
.nx-need-text { font-size: 14px; line-height: 20px; color: var(--ink); }
.nx-need-text strong { font-weight: 600; }
.nx-need-meta { font-size: 12px; line-height: 16px; color: var(--ink-3); margin-top: 2px; }
.nx-need-actions { display: flex; align-items: center; gap: var(--space-2); }
@media (max-width: 760px) { .nx-need { grid-template-columns: auto minmax(0, 1fr); } .nx-need-actions { grid-column: 2; } }
.nx-need--stack { grid-template-columns: auto minmax(0, 1fr); }
.nx-need--stack .nx-need-actions { grid-column: 2; }

/* ---------- Progress ---------- */
.nx-progress { position: relative; height: 6px; border-radius: var(--radius-full); background: var(--selected); overflow: hidden; }
.nx-progress > span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--ink); }
.nx-progress--positive > span { background: var(--positive); }
.nx-ring { --p: 0; --ring: var(--ink); position: relative; width: 44px; height: 44px; flex: none; border-radius: var(--radius-full); background: conic-gradient(var(--ring) calc(var(--p) * 1%), var(--selected) 0); display: grid; place-items: center; }
.nx-ring::before { content: ""; position: absolute; inset: 5px; border-radius: inherit; background: var(--sheet); }
.nx-ring > * { position: relative; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nx-ring--l { width: 72px; height: 72px; }
.nx-ring--l::before { inset: 7px; }
.nx-ring--l > * { font-size: 17px; }

/* ---------- Day line: the working day with the now marker (the dot on its baseline) ---------- */
.nx-day { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); }
.nx-day-hour { height: 48px; font-family: var(--font-mono); font-size: 11px; line-height: 14px; color: var(--ink-3); transform: translateY(-7px); }
.nx-day-track { position: relative; grid-column: 2; grid-row: 1 / span 20; background-image: linear-gradient(var(--line) 1px, transparent 1px); background-size: 100% 48px; }
.nx-event { position: absolute; left: 6px; right: 0; display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; border-radius: var(--radius-s); background: var(--sheet-sunken); border: 1px solid var(--line); overflow: hidden; font-size: 13px; line-height: 17px; }
.nx-event b { font-weight: 600; color: var(--ink); }
.nx-event span { color: var(--ink-3); font-size: 12px; line-height: 16px; }
.nx-event--meeting { background: var(--selected); border-color: transparent; }
.nx-event--focus { background: var(--sheet); border-color: var(--ink); }
.nx-event--assistant { background: var(--ai-soft); border-color: transparent; }
.nx-event--assistant b { color: var(--ai); }
.nx-event--free { background: transparent; border: 1px dashed var(--line-strong); }
/* Event labels sit above the now line and mask it, so the line never reads as a strikethrough. */
.nx-event > b, .nx-event > span { position: relative; z-index: 3; align-self: flex-start; max-width: 100%; background: inherit; border-radius: 3px; padding: 0 2px; margin: 0 -2px; }
.nx-now { position: absolute; left: -6px; right: 0; height: 0; border-top: 1.5px solid var(--dot); z-index: 2; }
.nx-now::before { content: ""; position: absolute; left: -4px; top: -5.25px; width: 9px; height: 9px; border-radius: var(--radius-full); background: var(--dot); }
.nx-now-label { position: absolute; right: 0; top: -20px; font-family: var(--font-mono); font-size: 11px; line-height: 14px; font-weight: 500; color: var(--dot-ink); background: var(--sheet); padding: 1px 4px; border-radius: var(--radius-xs); }
.nx-dayline-h { position: relative; height: 28px; border-radius: var(--radius-s); background: var(--sheet-sunken); overflow: hidden; }
.nx-dayline-h > i { position: absolute; top: 4px; bottom: 4px; border-radius: 4px; background: var(--selected); }
.nx-dayline-h > i.is-focus { background: var(--ink); }
.nx-dayline-h > i.is-assistant { background: var(--ai); }
.nx-dayline-h > b { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--dot); }

/* ---------- Proof: delivery facts, each from its own source ---------- */
.nx-proof { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-2); }
.nx-proof-step { position: relative; display: flex; flex-direction: column; gap: 6px; padding: var(--space-3); border-radius: var(--radius-m); background: var(--sheet-sunken); min-width: 0; }
.nx-proof-step .nx-i { width: 18px; height: 18px; color: var(--ink-3); }
.nx-proof-step b { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink); }
.nx-proof-step span { font-size: 12px; line-height: 16px; color: var(--ink-3); overflow-wrap: anywhere; }
.nx-proof-step[data-state="yes"] { background: var(--positive-soft); }
.nx-proof-step[data-state="yes"] .nx-i, .nx-proof-step[data-state="yes"] em { color: var(--positive); }
.nx-proof-step[data-state="failed"] { background: var(--danger-soft); }
.nx-proof-step[data-state="failed"] .nx-i, .nx-proof-step[data-state="failed"] em { color: var(--danger); }
.nx-proof-step[data-state="progress"] .nx-i, .nx-proof-step[data-state="progress"] em { color: var(--ink); }
.nx-proof-step[data-state="outdated"] { background: var(--caution-soft); }
.nx-proof-step[data-state="outdated"] .nx-i, .nx-proof-step[data-state="outdated"] em { color: var(--caution); }
.nx-proof-step[data-state="unknown"] { background: transparent; border: 1px dashed var(--line-strong); }
.nx-proof-step em { font-style: normal; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-3); }
.nx-proofbar { display: inline-grid; grid-template-columns: repeat(6, 10px); gap: 3px; align-items: center; }
.nx-proofbar i { height: 6px; border-radius: 2px; background: var(--selected); }
.nx-proofbar i.yes { background: var(--positive); }
.nx-proofbar i.failed { background: var(--danger); }
.nx-proofbar i.progress { background: var(--ink-3); }
.nx-proofbar i.outdated { background: var(--caution); }
@media (max-width: 900px) { .nx-proof { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .nx-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Acceptance criteria and checklists ---------- */
.nx-ac { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; padding: 10px 0; }
.nx-ac + .nx-ac { box-shadow: inset 0 1px 0 var(--line); }
.nx-ac-id { font-family: var(--font-mono); font-size: 12px; line-height: 22px; color: var(--ink-3); }
.nx-ac-text { font-size: 14px; line-height: 22px; color: var(--ink); }
.nx-checklist { display: flex; flex-direction: column; gap: 2px; }
.nx-checkitem { display: flex; align-items: center; gap: var(--space-3); min-height: 36px; padding: 4px var(--space-2); border-radius: var(--radius-s); font-size: 14px; line-height: 20px; }
.nx-checkitem:hover { background: var(--hover); }
.nx-checkitem .nx-check { width: 18px; height: 18px; }
.nx-checkitem.is-done span { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.nx-readiness { display: flex; flex-direction: column; gap: var(--space-1); }
.nx-readiness li { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; line-height: 20px; color: var(--ink-2); }
.nx-readiness li .nx-i { width: 16px; height: 16px; }
.nx-readiness li.ok .nx-i { color: var(--positive); }
.nx-readiness li.no .nx-i { color: var(--caution); }

/* ---------- Properties (label / value list on the detail rail) ---------- */
.nx-props { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 0; }
.nx-props dt, .nx-props dd { display: flex; align-items: center; min-height: 36px; font-size: 13px; line-height: 18px; }
.nx-props dt { color: var(--ink-3); font-weight: 500; }
.nx-props dd { color: var(--ink); gap: var(--space-2); flex-wrap: wrap; padding: 2px 0; }
.nx-props dd .nx-propbtn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px; margin-left: -8px; border: 0; border-radius: var(--radius-s); background: transparent; font-size: 13px; color: var(--ink); }
.nx-props dd .nx-propbtn:hover { background: var(--hover); }
.nx-props dd .nx-propbtn.is-empty { color: var(--ink-3); }

/* ---------- Menus ---------- */
.nx-menu { display: flex; flex-direction: column; min-width: 220px; padding: 6px; border-radius: var(--radius-l); background: var(--sheet-raised); box-shadow: var(--shadow-float); border: 1px solid var(--line); }
.nx-menu-item { display: flex; align-items: center; gap: var(--space-3); min-height: 36px; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-s); background: transparent; color: var(--ink); font-size: 14px; line-height: 20px; text-align: left; width: 100%; }
.nx-menu-item .nx-i { color: var(--ink-3); }
.nx-menu-item:hover, .nx-menu-item[aria-selected="true"] { background: var(--hover); }
.nx-menu-item .nx-kbd, .nx-menu-item .nx-menu-hint { margin-left: auto; }
.nx-menu-hint { font-size: 12px; color: var(--ink-3); }
.nx-menu-item--danger { color: var(--danger); }
.nx-menu-item--danger .nx-i { color: var(--danger); }
.nx-menu-sep { height: 1px; margin: 6px var(--space-2); background: var(--line); }
.nx-menu-label { padding: 8px var(--space-2) 4px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-3); }

/* ---------- Command bar ---------- */
.nx-cmd { width: min(680px, 100%); border-radius: var(--radius-l); background: var(--sheet-raised); box-shadow: var(--shadow-float); border: 1px solid var(--line); overflow: hidden; }
.nx-cmd-input { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-4); height: 60px; border-bottom: 1px solid var(--line); color: var(--ink-3); }
.nx-cmd-input input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--ink); font-size: 18px; line-height: 24px; }
.nx-cmd-body { padding: var(--space-2); display: flex; flex-direction: column; gap: 2px; }
.nx-cmd-label { padding: var(--space-2) var(--space-3) 4px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-3); }
.nx-cmd-item { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); min-height: 44px; padding: 6px var(--space-3); border-radius: var(--radius-m); border: 0; background: transparent; text-align: left; color: var(--ink); width: 100%; }
.nx-cmd-item .nx-i { color: var(--ink-3); }
.nx-cmd-item small { display: block; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.nx-cmd-item[aria-selected="true"] { background: var(--selected); }
.nx-cmd-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding: 10px var(--space-4); border-top: 1px solid var(--line); background: var(--sheet-sunken); font-size: 12px; color: var(--ink-3); }
.nx-cmd-foot span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Overlays: scrim, dialog, bottom sheet, toast ---------- */
.nx-scrim { position: absolute; inset: 0; background: var(--scrim); }
.nx-dialog { position: relative; width: min(480px, 100%); padding: var(--space-6); border-radius: var(--radius-xl); background: var(--sheet-raised); box-shadow: var(--shadow-float); }
.nx-dialog-foot { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-6); flex-wrap: wrap; }
.nx-bsheet { position: relative; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-2) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); border-radius: var(--radius-xl) var(--radius-xl) 0 0; background: var(--sheet-raised); box-shadow: var(--shadow-float); }
.nx-grabber { align-self: center; width: 36px; height: 5px; border-radius: var(--radius-full); background: var(--line-strong); margin-bottom: var(--space-1); }
.nx-toast { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 44px; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border-radius: var(--radius-l); background: var(--ink); color: var(--on-ink); box-shadow: var(--shadow-float); font-size: 14px; line-height: 20px; }
.nx-toast .nx-btn { height: 30px; padding: 0 var(--space-3); background: transparent; color: inherit; border-color: transparent; font-size: 13px; }
.nx-toast .nx-btn:hover { background: var(--action-hover); }

/* ---------- Teaching: hints and empty states ---------- */
.nx-hint { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-l); background: var(--sheet-sunken); }
.nx-hint > .nx-i { color: var(--ink-2); margin-top: 1px; }
.nx-hint h4 { font-size: 14px; line-height: 20px; font-weight: 600; margin: 0 0 2px; }
.nx-hint p { font-size: 13px; line-height: 19px; color: var(--ink-2); }
.nx-hint .nx-btngroup { margin-top: var(--space-3); }
/* Status banners: a hint that reports a problem (offline, a change that didn't sync, a connection that needs you) */
.nx-hint--caution { background: var(--caution-soft); }
.nx-hint--caution > .nx-i { color: var(--caution); }
.nx-hint--danger { background: var(--danger-soft); }
.nx-hint--danger > .nx-i { color: var(--danger); }
.nx-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-12) var(--space-6); }
.nx-empty p { font-size: 14px; line-height: 20px; color: var(--ink-2); max-width: 40ch; }
.nx-empty .nx-btngroup { margin-top: var(--space-3); }
.nx-baseline { position: relative; width: 120px; height: 24px; margin-bottom: var(--space-2); }
.nx-baseline::before { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--line-strong); }
.nx-baseline::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 10px; height: 10px; margin-left: -5px; border-radius: var(--radius-full); background: var(--dot); }

/* ---------- Loading: skeletons in the shape of the real content (no shimmer) ---------- */
.nx-skel { display: block; flex: none; width: 100%; height: 14px; border-radius: var(--radius-s); background: var(--line); }
.nx-skel--round { border-radius: var(--radius-full); }
.nx-skel-row { display: flex; align-items: flex-start; gap: var(--space-3); padding: 14px var(--space-3); border-top: 1px solid var(--line); }
.nx-skel-row:last-child { border-bottom: 1px solid var(--line); }
.nx-skel-row > div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }

/* ---------- Steps (a real sequence: rituals, onboarding) ---------- */
.nx-steps { display: flex; flex-direction: column; gap: 2px; counter-reset: nxstep; }
.nx-step { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); min-height: 48px; padding: 6px var(--space-3); border-radius: var(--radius-m); color: var(--ink-2); font-size: 14px; line-height: 20px; border: 0; background: transparent; text-align: left; width: 100%; }
.nx-step::before { counter-increment: nxstep; content: counter(nxstep); display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-full); border: 1.5px solid var(--control); font-size: 12px; font-weight: 700; color: var(--ink-2); }
.nx-step[aria-current="step"] { background: var(--selected); color: var(--ink); font-weight: 600; }
.nx-step[aria-current="step"]::before { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
.nx-step.is-done::before { content: "\2713"; border-color: var(--positive); background: var(--positive); color: var(--on-ink); font-size: 13px; }
.nx-step.is-done { color: var(--ink-3); }

/* ---------- Board ---------- */
.nx-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 300px); gap: var(--space-4); overflow-x: auto; padding-bottom: var(--space-2); align-items: start; }
.nx-col { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-l); background: var(--sheet-sunken); min-width: 0; }
.nx-col-head { display: flex; align-items: center; gap: var(--space-2); padding: 6px var(--space-2) 4px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.nx-col-head .nx-i { width: 16px; height: 16px; }
.nx-col-head > :last-child { margin-left: auto; }
.nx-col-note { padding: 0 var(--space-2) var(--space-1); font-size: 12px; line-height: 16px; color: var(--ink-3); }
.nx-col--assistant .nx-col-head { color: var(--ai); }
.nx-bcard { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-m); background: var(--sheet); border: 1px solid var(--line); box-shadow: var(--shadow-hairline); }
.nx-bcard:hover { box-shadow: var(--shadow-lift); }
.nx-bcard-title { font-size: 14px; line-height: 20px; font-weight: 500; }
.nx-bcard-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nx-bcard.is-dragging { transform: rotate(-1.5deg); box-shadow: var(--shadow-float); }
.nx-col-drop { height: 48px; border-radius: var(--radius-m); border: 1.5px dashed var(--line-strong); }

/* ---------- Widgets (specs for the iOS SwiftUI widgets) ---------- */
.nx-widget { position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-xl); background: var(--sheet); color: var(--ink); overflow: hidden; }
.nx-widget--s { width: 170px; height: 170px; }
.nx-widget--m { width: 364px; height: 170px; }
.nx-widget--l { width: 364px; height: 382px; }
.nx-widget-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-3); }
.nx-lock { display: flex; align-items: center; gap: var(--space-2); padding: 8px 12px; border-radius: var(--radius-l); background: var(--selected); color: var(--ink); }

/* ---------- Icons: Lucide geometry (ISC), 1.75 stroke on a 24 grid, painted with currentColor ---------- */
.nx-i { display: inline-block; flex: none; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: var(--nx-i) center / contain no-repeat; mask: var(--nx-i) center / contain no-repeat; vertical-align: middle; }
.nx-i--s { width: 16px; height: 16px; }
.nx-i--l { width: 24px; height: 24px; }
.nx-i--xl { width: 32px; height: 32px; }
.nx-i-today { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M12 20v2'/%3E%3Cpath d='m4.93 4.93 1.41 1.41'/%3E%3Cpath d='m17.66 17.66 1.41 1.41'/%3E%3Cpath d='M2 12h2'/%3E%3Cpath d='M20 12h2'/%3E%3Cpath d='m6.34 17.66-1.41 1.41'/%3E%3Cpath d='m19.07 4.93-1.41 1.41'/%3E%3C/svg%3E"); }
.nx-i-inbox { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 12 16 12 14 15 10 15 8 12 2 12'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E"); }
.nx-i-work { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 17 2 2 4-4'/%3E%3Cpath d='m3 7 2 2 4-4'/%3E%3Cpath d='M13 6h8'/%3E%3Cpath d='M13 12h8'/%3E%3Cpath d='M13 18h8'/%3E%3C/svg%3E"); }
.nx-i-notes { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h4'/%3E%3Cpath d='M2 10h4'/%3E%3Cpath d='M2 14h4'/%3E%3Cpath d='M2 18h4'/%3E%3Crect width='16' height='20' x='4' y='2' rx='2'/%3E%3Cpath d='M16 2v20'/%3E%3C/svg%3E"); }
.nx-i-assistants { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8V4H8'/%3E%3Crect width='16' height='12' x='4' y='8' rx='2'/%3E%3Cpath d='M2 14h2'/%3E%3Cpath d='M20 14h2'/%3E%3Cpath d='M15 13v2'/%3E%3Cpath d='M9 13v2'/%3E%3C/svg%3E"); }
.nx-i-goal { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E"); }
.nx-i-review { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='4' x='8' y='2' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E"); }
.nx-i-settings { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.nx-i-search { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); }
.nx-i-plus { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E"); }
.nx-i-check { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.nx-i-close { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E"); }
.nx-i-chevron-right { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); }
.nx-i-chevron-left { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E"); }
.nx-i-chevron-down { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.nx-i-more { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3C/svg%3E"); }
.nx-i-bell { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E"); }
.nx-i-bell-off { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.7 3A6 6 0 0 1 18 8a21.3 21.3 0 0 0 .6 5'/%3E%3Cpath d='M17 17H3s3-2 3-9a4.67 4.67 0 0 1 .3-1.7'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E"); }
.nx-i-focus { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3'/%3E%3C/svg%3E"); }
.nx-i-clock { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E"); }
.nx-i-calendar { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M16 2v4'/%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E"); }
.nx-i-waiting { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 22h14'/%3E%3Cpath d='M5 2h14'/%3E%3Cpath d='M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22'/%3E%3Cpath d='M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2'/%3E%3C/svg%3E"); }
.nx-i-snooze { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2 2'/%3E%3Cpath d='M5 3 2 6'/%3E%3Cpath d='m22 6-3-3'/%3E%3Cpath d='M6.38 18.7 4 21'/%3E%3Cpath d='M17.64 18.67 20 21'/%3E%3C/svg%3E"); }
.nx-i-someday { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z'/%3E%3C/svg%3E"); }
.nx-i-not-doing { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m4.9 4.9 14.2 14.2'/%3E%3C/svg%3E"); }
.nx-i-moon { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/%3E%3C/svg%3E"); }
.nx-i-sunrise { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v8'/%3E%3Cpath d='m4.93 10.93 1.41 1.41'/%3E%3Cpath d='M2 18h2'/%3E%3Cpath d='M20 18h2'/%3E%3Cpath d='m19.07 10.93-1.41 1.41'/%3E%3Cpath d='M22 22H2'/%3E%3Cpath d='m8 6 4-4 4 4'/%3E%3Cpath d='M16 18a4 4 0 0 0-8 0'/%3E%3C/svg%3E"); }
.nx-i-sunset { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 10V2'/%3E%3Cpath d='m4.93 10.93 1.41 1.41'/%3E%3Cpath d='M2 18h2'/%3E%3Cpath d='M20 18h2'/%3E%3Cpath d='m19.07 10.93-1.41 1.41'/%3E%3Cpath d='M22 22H2'/%3E%3Cpath d='m16 6-4 4-4-4'/%3E%3Cpath d='M16 18a4 4 0 0 0-8 0'/%3E%3C/svg%3E"); }
.nx-i-mic { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Cline x1='12' x2='12' y1='19' y2='22'/%3E%3C/svg%3E"); }
.nx-i-voice { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 10v3'/%3E%3Cpath d='M6 6v11'/%3E%3Cpath d='M10 3v18'/%3E%3Cpath d='M14 8v7'/%3E%3Cpath d='M18 5v13'/%3E%3Cpath d='M22 10v3'/%3E%3C/svg%3E"); }
.nx-i-link { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E"); }
.nx-i-pull-request { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='18' r='3'/%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Cpath d='M13 6h3a2 2 0 0 1 2 2v7'/%3E%3Cline x1='6' x2='6' y1='9' y2='21'/%3E%3C/svg%3E"); }
.nx-i-merge { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='18' r='3'/%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Cpath d='M6 21V9a9 9 0 0 0 9 9'/%3E%3C/svg%3E"); }
.nx-i-branch { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' x2='6' y1='3' y2='15'/%3E%3Ccircle cx='18' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M18 9a9 9 0 0 1-9 9'/%3E%3C/svg%3E"); }
.nx-i-tested { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2'/%3E%3Cpath d='M8.5 2h7'/%3E%3Cpath d='M7 16h10'/%3E%3C/svg%3E"); }
.nx-i-deployed { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z'/%3E%3Cpath d='m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0'/%3E%3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/%3E%3C/svg%3E"); }
.nx-i-verified { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.nx-i-user { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }
.nx-i-people { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.nx-i-filter { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M7 12h10'/%3E%3Cpath d='M10 18h4'/%3E%3C/svg%3E"); }
.nx-i-arrow-right { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E"); }
.nx-i-open { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E"); }
.nx-i-play { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='6 3 20 12 6 21 6 3'/%3E%3C/svg%3E"); }
.nx-i-pause { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='14' y='4' width='4' height='16' rx='1'/%3E%3Crect x='6' y='4' width='4' height='16' rx='1'/%3E%3C/svg%3E"); }
.nx-i-archive { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='5' x='2' y='3' rx='1'/%3E%3Cpath d='M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8'/%3E%3Cpath d='M10 12h4'/%3E%3C/svg%3E"); }
.nx-i-trash { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6'/%3E%3Cpath d='M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2'/%3E%3C/svg%3E"); }
.nx-i-sync { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/%3E%3Cpath d='M8 16H3v5'/%3E%3C/svg%3E"); }
.nx-i-view-list { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h.01'/%3E%3Cpath d='M3 18h.01'/%3E%3Cpath d='M3 6h.01'/%3E%3Cpath d='M8 12h13'/%3E%3Cpath d='M8 18h13'/%3E%3Cpath d='M8 6h13'/%3E%3C/svg%3E"); }
.nx-i-view-board { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 5v11'/%3E%3Cpath d='M12 5v6'/%3E%3Cpath d='M18 5v14'/%3E%3C/svg%3E"); }
.nx-i-view-timeline { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v16a2 2 0 0 0 2 2h16'/%3E%3Cpath d='M7 7h6'/%3E%3Cpath d='M11 12h8'/%3E%3Cpath d='M9 17h6'/%3E%3C/svg%3E"); }
.nx-i-view-tree { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12h-8'/%3E%3Cpath d='M21 6H8'/%3E%3Cpath d='M21 18h-8'/%3E%3Cpath d='M3 6v4c0 1.1.9 2 2 2h3'/%3E%3Cpath d='M3 10v6c0 1.1.9 2 2 2h3'/%3E%3C/svg%3E"); }
.nx-i-milestone { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 13v8'/%3E%3Cpath d='M12 3v3'/%3E%3Cpath d='M4 6a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h13a2 2 0 0 0 1.152-.365l3.424-2.317a1 1 0 0 0 0-1.635l-3.424-2.318A2 2 0 0 0 17 6z'/%3E%3C/svg%3E"); }
.nx-i-handoff { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 17 20 12 15 7'/%3E%3Cpath d='M4 18v-2a4 4 0 0 1 4-4h12'/%3E%3C/svg%3E"); }
.nx-i-message { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
.nx-i-memory { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z'/%3E%3C/svg%3E"); }
.nx-i-skill { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 12h-5'/%3E%3Cpath d='M15 8h-5'/%3E%3Cpath d='M19 17V5a2 2 0 0 0-2-2H4'/%3E%3Cpath d='M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3'/%3E%3C/svg%3E"); }
.nx-i-automation { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='8' x='3' y='3' rx='2'/%3E%3Cpath d='M7 11v4a2 2 0 0 0 2 2h4'/%3E%3Crect width='8' height='8' x='13' y='13' rx='2'/%3E%3C/svg%3E"); }
.nx-i-connection { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22v-5'/%3E%3Cpath d='M9 8V2'/%3E%3Cpath d='M15 8V2'/%3E%3Cpath d='M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z'/%3E%3C/svg%3E"); }
.nx-i-eye { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.nx-i-lock { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); }
.nx-i-pin { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17v5'/%3E%3Cpath d='M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z'/%3E%3C/svg%3E"); }
.nx-i-tag { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1'/%3E%3C/svg%3E"); }
.nx-i-attach { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E"); }
.nx-i-history { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3Cpath d='M12 7v5l4 2'/%3E%3C/svg%3E"); }
.nx-i-command { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3'/%3E%3C/svg%3E"); }
.nx-i-enter { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 10 4 15 9 20'/%3E%3Cpath d='M20 4v7a4 4 0 0 1-4 4H4'/%3E%3C/svg%3E"); }
.nx-i-sidebar { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M9 3v18'/%3E%3C/svg%3E"); }
.nx-i-grip { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='12' r='1'/%3E%3Ccircle cx='9' cy='5' r='1'/%3E%3Ccircle cx='9' cy='19' r='1'/%3E%3Ccircle cx='15' cy='12' r='1'/%3E%3Ccircle cx='15' cy='5' r='1'/%3E%3Ccircle cx='15' cy='19' r='1'/%3E%3C/svg%3E"); }
.nx-i-edit { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z'/%3E%3Cpath d='m15 5 4 4'/%3E%3C/svg%3E"); }
.nx-i-copy { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/svg%3E"); }
.nx-i-help { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
.nx-i-guide { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z'/%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E"); }
.nx-i-share { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'/%3E%3Cpolyline points='16 6 12 2 8 6'/%3E%3Cline x1='12' x2='12' y1='2' y2='15'/%3E%3C/svg%3E"); }
.nx-i-project { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z'/%3E%3Cpath d='m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65'/%3E%3Cpath d='m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65'/%3E%3C/svg%3E"); }
.nx-i-folder { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E"); }
.nx-i-decision { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='M7 21h10'/%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2'/%3E%3C/svg%3E"); }
.nx-i-warning { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
.nx-i-info { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E"); }
.nx-i-done { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.nx-i-failed { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E"); }
.nx-i-unknown { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.1 2.182a10 10 0 0 1 3.8 0'/%3E%3Cpath d='M13.9 21.818a10 10 0 0 1-3.8 0'/%3E%3Cpath d='M17.609 3.721a10 10 0 0 1 2.69 2.7'/%3E%3Cpath d='M2.182 13.9a10 10 0 0 1 0-3.8'/%3E%3Cpath d='M20.279 17.609a10 10 0 0 1-2.7 2.69'/%3E%3Cpath d='M21.818 10.1a10 10 0 0 1 0 3.8'/%3E%3Cpath d='M3.721 6.391a10 10 0 0 1 2.7-2.69'/%3E%3Cpath d='M6.391 20.279a10 10 0 0 1-2.69-2.7'/%3E%3C/svg%3E"); }
.nx-i-progress { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-6.219-8.56'/%3E%3C/svg%3E"); }
.nx-i-repeat { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m17 2 4 4-4 4'/%3E%3Cpath d='M3 11v-1a4 4 0 0 1 4-4h14'/%3E%3Cpath d='m7 22-4-4 4-4'/%3E%3Cpath d='M21 13v1a4 4 0 0 1-4 4H3'/%3E%3C/svg%3E"); }
.nx-i-reply { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 17 4 12 9 7'/%3E%3Cpath d='M20 18v-2a4 4 0 0 0-4-4H4'/%3E%3C/svg%3E"); }
.nx-i-undo { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 9l5-5'/%3E%3Cpath d='M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11'/%3E%3C/svg%3E"); }
.nx-i-send { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E"); }
.nx-i-phone { --nx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='20' x='5' y='2' rx='2' ry='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E"); }


/* ---------- ActivityFeed (components/ActivityFeed/README.md) ---------- */
/* ==========================================================================
   Proposal: ActivityFeed (nx-feed-)
   What happened, newest first, grouped by time: the Activity log, a task's
   Activity tab, an assistant's recent runs. Plus the in-app alert that breaks
   through Focus. Lead tiles reuse nx-need-icon and nx-avatar; unread marks
   reuse nx-dot. Tokens only, so both themes follow.
   ========================================================================== */

.nx-feed { display: flex; flex-direction: column; }

/* A time group: "While you were in Focus", "Earlier today", "Yesterday" */
.nx-feed-day { display: flex; align-items: center; flex-wrap: wrap; gap: 4px var(--space-2); padding: var(--space-6) 2px var(--space-2); font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-2); }
.nx-feed-day:first-child { padding-top: 0; }
.nx-feed-day > .nx-i { width: 16px; height: 16px; color: var(--ink-3); }
.nx-feed-day-aside { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--ink-3); }

/* The list of entries for one group */
.nx-feed-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--sheet); }
.nx-feed-item { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: start; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.nx-feed-item + .nx-feed-item { box-shadow: inset 0 1px 0 var(--line); }
.nx-feed-item > .nx-avatar { margin: 2px 0 0 2px; }
.nx-feed-text { font-size: 14px; line-height: 20px; color: var(--ink); overflow-wrap: anywhere; }
.nx-feed-text strong { font-weight: 600; }
.nx-feed-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-3); margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.nx-feed-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.nx-feed-meta .nx-i { width: 14px; height: 14px; }
.nx-feed-meta .is-soon { color: var(--caution); font-weight: 600; }
.nx-feed-quote { margin-top: 6px; padding-left: 10px; border-left: 2px solid var(--line-strong); font-size: 13px; line-height: 19px; color: var(--ink-2); }
.nx-feed-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.nx-feed-time { display: inline-flex; align-items: center; gap: 6px; min-height: 20px; font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--ink-3); white-space: nowrap; }
/* An entry that is new since you last looked: the time turns ink beside its dot */
.nx-feed-item.is-unread .nx-feed-time { color: var(--ink-2); }

/* ---------- In-app alert: the one thing that breaks through Focus ---------- */
.nx-feed-alerts { position: absolute; top: 24px; right: 24px; z-index: 30; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); width: min(420px, calc(100% - 48px)); }
.nx-feed-alert { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-3); width: 100%; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--sheet-raised); box-shadow: var(--shadow-float); }
.nx-feed-alert h3 { font-size: 15px; line-height: 21px; font-weight: 600; color: var(--ink); }
.nx-feed-alert p { margin-top: 2px; font-size: 13px; line-height: 19px; color: var(--ink-2); }
.nx-feed-alert .nx-feed-meta { margin-top: 8px; }
.nx-feed-alert .nx-btngroup { margin-top: var(--space-3); }
/* Says why it interrupted, so the person can trust the rule or change it */
.nx-feed-why { display: flex; align-items: flex-start; gap: 6px; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); font-size: 12px; line-height: 16px; color: var(--ink-3); }
.nx-feed-why .nx-i { flex: none; width: 14px; height: 14px; margin-top: 1px; color: var(--caution); }

@media (max-width: 760px) {
  .nx-feed-item { grid-template-columns: 28px minmax(0, 1fr); padding: var(--space-3); }
  .nx-feed-item > .nx-need-icon { width: 28px; height: 28px; }
  .nx-feed-item > .nx-avatar { margin: 0; }
  .nx-feed-side { grid-column: 2; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: var(--space-3); }
  .nx-feed-alerts { position: fixed; top: 8px; left: 8px; right: 8px; width: auto; align-items: stretch; }
}


/* ---------- BulkBar (components/BulkBar/README.md) ---------- */
/* ==========================================================================
   BulkBar (proposal, prefix nx-bulk-)
   Select several items and act on all of them at once: a square selection box
   on each row and a bar with the count and the actions. Tokens only.
   ========================================================================== */

/* The selection box: square, so it never reads as the round task check */
.nx-bulk-check { position: relative; flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 1.5px solid var(--control); border-radius: 6px; background: var(--sheet); color: var(--on-ink); }
.nx-bulk-check::before { content: ""; position: absolute; inset: -12px; }
.nx-bulk-check:hover { border-color: var(--ink); }
.nx-bulk-check .nx-i { width: 14px; height: 14px; opacity: 0; }
.nx-bulk-check[aria-checked="true"], .nx-bulk-check[aria-checked="mixed"] { background: var(--action); border-color: var(--action); }
.nx-bulk-check[aria-checked="true"] .nx-i { opacity: 1; }
.nx-bulk-check[aria-checked="mixed"]::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; margin: -1px 0 0 -5px; border-radius: 1px; background: var(--on-ink); }

/* The bar: count, the actions (primary first), then Clear */
.nx-bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); max-width: 100%; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); border-radius: var(--radius-l); border: 1px solid var(--line); background: var(--sheet-raised); box-shadow: var(--shadow-float); }
.nx-bulk-count { display: inline-flex; align-items: center; gap: var(--space-3); margin-right: var(--space-1); padding-right: var(--space-3); border-right: 1px solid var(--line); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nx-bulk-end { margin-left: var(--space-1); padding-left: var(--space-2); border-left: 1px solid var(--line); display: inline-flex; align-items: center; }
.nx-bulk-note { flex-basis: 100%; padding: 0 var(--space-1) 2px; font-size: 12px; line-height: 16px; color: var(--ink-3); }

/* Phones: the bar docks to the bottom edge in place of the tab bar; the count and Done move to the header */
@media (max-width: 760px) {
  .nx-bulk-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; gap: var(--space-1); padding: var(--space-3) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom, 0px)); border-width: 1px 0 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .nx-bulk-count, .nx-bulk-end, .nx-bulk-note { display: none; }
  .nx-bulk-bar .nx-kbd, .nx-bulk-bar .nx-i-chevron-down { display: none; }
  .nx-bulk-bar .nx-btn--primary { flex: 1 1 100%; height: var(--size-control-l); margin-bottom: var(--space-1); border-radius: var(--radius-l); font-size: 16px; }
  .nx-bulk-bar .nx-bulk-action { flex: 1 1 0; flex-direction: column; gap: 2px; min-width: 0; height: auto; min-height: var(--size-touch); padding: 6px 2px; border-color: transparent; background: transparent; color: var(--ink-2); font-size: 12px; line-height: 16px; white-space: normal; text-align: center; }
  .nx-bulk-bar .nx-bulk-action .nx-i { width: 22px; height: 22px; }
}


/* ---------- Calendar (components/Calendar/README.md) ---------- */
/* ==========================================================================
   Proposal: Calendar (nx-cal-)
   Week, month and timeline views of Work, plus the drop target that sets
   Plan for when a task is dragged onto a day or a time. Events inside the
   week reuse nx-event; the hour gutter reuses nx-day-hour; the now line
   reuses nx-now. Tokens only, so both themes follow.
   ========================================================================== */

/* Toolbar: the range being shown */
.nx-cal-range { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--ink); white-space: nowrap; }

/* Scroll wrapper: views keep their width on phones and scroll sideways */
.nx-cal-scroll { max-width: 100%; min-width: 0; }

/* ---------- Week: hour gutter, a Due lane, then one track per day ---------- */
.nx-cal-week { --nx-cal-hour: 56px; --nx-cal-hours: 8; display: grid; grid-template-columns: 46px repeat(5, minmax(0, 1fr)) repeat(2, minmax(0, 0.8fr)); border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--sheet); overflow: hidden; }
.nx-cal-corner { border-bottom: 1px solid var(--line); }
.nx-cal-head { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 10px 8px 8px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.nx-cal-date { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: var(--radius-full); font-size: 14px; line-height: 18px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.nx-cal-head.is-today { color: var(--ink); }
.nx-cal-head.is-today .nx-cal-date { background: var(--ink); color: var(--on-ink); }
.nx-cal-lanelabel { padding: 8px 8px 0 0; border-bottom: 1px solid var(--line); text-align: right; font-size: 11px; line-height: 14px; font-weight: 600; color: var(--ink-3); }
.nx-cal-lane { display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 40px; padding: 6px 4px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.nx-cal-gutter { position: relative; display: flex; flex-direction: column; padding: 0 6px 0 0; text-align: right; }
.nx-cal-gutter > .nx-day-hour { height: var(--nx-cal-hour); }
/* The now time sits in the gutter, level with the now line in today's column */
.nx-cal-nowlabel { position: absolute; right: 4px; z-index: 2; padding: 0 3px; border-radius: var(--radius-xs); background: var(--sheet); font-family: var(--font-mono); font-size: 11px; line-height: 14px; font-weight: 500; color: var(--dot-ink); transform: translateY(-7px); }
.nx-cal-col { position: relative; min-width: 0; height: calc(var(--nx-cal-hour) * var(--nx-cal-hours)); border-left: 1px solid var(--line); background-image: linear-gradient(var(--line) 1px, transparent 1px); background-size: 100% var(--nx-cal-hour); }
.nx-cal-head.is-weekend, .nx-cal-lane.is-weekend, .nx-cal-col.is-weekend { background-color: var(--sheet-sunken); }
.nx-cal-col > .nx-event { left: 3px; right: 3px; padding: 3px 6px; font-size: 12px; line-height: 15px; }
.nx-cal-col > .nx-event span { font-size: 11px; line-height: 14px; }

/* A parallel lane for things that don't take your time (an assistant's pickup window) */
.nx-event.nx-cal-side { left: 44%; right: 0; }
.nx-cal-col > .nx-event.nx-cal-side { left: 44%; right: 3px; }

/* Due markers: in the Due lane of a week and in month cells */
.nx-cal-due { display: flex; align-items: center; gap: 4px; min-width: 0; height: 22px; padding: 0 6px; border-radius: var(--radius-s); background: var(--sheet-sunken); color: var(--ink-2); font-size: 12px; line-height: 16px; font-weight: 600; }
.nx-cal-due > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-cal-due .nx-i { width: 13px; height: 13px; flex: none; }
.nx-cal-due.is-soon { background: var(--caution-soft); color: var(--caution); }
.nx-cal-due.is-late { background: var(--danger-soft); color: var(--danger); }
.nx-cal-due.is-done { background: transparent; color: var(--ink-3); font-weight: 500; }
.nx-cal-due.is-done .nx-i { color: var(--positive); }
.nx-cal-lane .nx-cal-due { height: auto; min-height: 22px; align-items: flex-start; padding: 3px 6px; }
.nx-cal-lane .nx-cal-due .nx-i { margin-top: 1px; }
.nx-cal-lane .nx-cal-due > span, .nx-cal-cell .nx-cal-due > span, .nx-cal-cell .nx-cal-item > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }
.nx-cal-cell .nx-cal-due, .nx-cal-cell .nx-cal-item { height: auto; min-height: 22px; align-items: flex-start; padding-top: 3px; padding-bottom: 3px; }
.nx-cal-cell .nx-cal-due .nx-i, .nx-cal-cell .nx-cal-item .nx-i { margin-top: 1px; }

/* Drop target: where a dragged task lands; dropping sets Plan for, never Due */
.nx-cal-drop { position: absolute; left: 3px; right: 3px; z-index: 4; display: flex; flex-direction: column; gap: 1px; padding: 5px 8px; border: 1.5px dashed var(--ink); border-radius: var(--radius-s); background: var(--hover); color: var(--ink); font-size: 12px; line-height: 16px; overflow: hidden; }
.nx-cal-drop b { font-weight: 600; }
.nx-cal-drop span { color: var(--ink-2); }
.nx-day-track > .nx-cal-drop { left: 6px; right: 0; }

/* The tray beside a week or month: work without a time, as nx-bcard cards to drag from */
.nx-cal-tray { flex: 1 1 216px; max-width: 248px; }

/* Legend */
.nx-cal-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.nx-cal-key > span { display: inline-flex; align-items: center; gap: 6px; }
.nx-cal-swatch { flex: none; width: 16px; height: 10px; border-radius: 3px; border: 1px solid var(--line); background: var(--sheet-sunken); }
.nx-cal-swatch--meeting { background: var(--selected); border-color: transparent; }
.nx-cal-swatch--focus { background: var(--sheet); border-color: var(--ink); }
.nx-cal-swatch--assistant { background: var(--ai-soft); border-color: transparent; }
.nx-cal-swatch--due { background: var(--caution-soft); border-color: transparent; }
.nx-cal-swatch--drop { background: var(--hover); border: 1.5px dashed var(--ink); }
.nx-cal-swatch--late { background: var(--danger-soft); border-color: transparent; }
.nx-cal-swatch--paused { background: transparent; border: 1px dashed var(--line-strong); }
.nx-cal-swatch--ms { width: 10px; height: 10px; margin: 0 3px; border: 2px solid var(--ink); border-radius: 2px; background: var(--sheet); transform: rotate(45deg); }

/* ---------- Month ---------- */
.nx-cal-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--sheet); overflow: hidden; }
.nx-cal-dow { padding: 8px 10px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-3); }
.nx-cal-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; min-height: 112px; padding: 6px 6px 8px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.nx-cal-cell:nth-child(7n + 1) { border-left: 0; }
.nx-cal-cell.is-out { background: var(--sheet-sunken); }
.nx-cal-num { align-self: flex-start; display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 5px; margin-bottom: 2px; border-radius: var(--radius-full); font-size: 13px; line-height: 16px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.nx-cal-cell.is-out .nx-cal-num { color: var(--ink-3); font-weight: 500; }
.nx-cal-cell.is-today .nx-cal-num { background: var(--ink); color: var(--on-ink); font-weight: 700; }
.nx-cal-item { display: flex; align-items: center; gap: 5px; min-width: 0; height: 22px; padding: 0 6px; border-radius: var(--radius-s); background: var(--sheet-sunken); color: var(--ink-2); font-size: 12px; line-height: 16px; }
.nx-cal-item > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-cal-item .nx-i { width: 13px; height: 13px; flex: none; }
.nx-cal-item--meeting { background: var(--selected); color: var(--ink); }
.nx-cal-item--planned { background: var(--sheet); box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }
.nx-cal-item--waiting { background: transparent; box-shadow: inset 0 0 0 1px var(--caution); color: var(--caution); }
.nx-cal-item--back { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.nx-cal-item--milestone { background: transparent; color: var(--ink); font-weight: 600; }
.nx-cal-more { padding: 0 6px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-3); }

/* ---------- Timeline: projects as bars across weeks, milestones as diamonds ---------- */
.nx-cal-tl { --nx-cal-label: 232px; --nx-cal-weeks: 6; --nx-cal-now: 0; position: relative; display: grid; grid-template-columns: var(--nx-cal-label) minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--sheet); overflow: hidden; }
.nx-cal-tl-corner { padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-3); }
.nx-cal-tl-weeks { display: grid; grid-template-columns: repeat(var(--nx-cal-weeks), minmax(0, 1fr)); border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.nx-cal-tl-week { padding: 10px 8px; border-left: 1px solid var(--line); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.nx-cal-tl-week:first-child { border-left: 0; }
.nx-cal-tl-week.is-current { background: var(--selected); color: var(--ink); }
.nx-cal-tl-group { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 14px 16px 4px; border-top: 1px solid var(--line); font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-2); }
.nx-cal-tl-weeks + .nx-cal-tl-group { border-top: 0; }
.nx-cal-tl-group .nx-i { width: 16px; height: 16px; color: var(--ink-3); }
.nx-cal-tl-group .nx-count { margin-left: 2px; }
.nx-cal-tl-label { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; min-height: 60px; padding: 6px 16px; }
.nx-cal-tl-label b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 19px; font-weight: 500; color: var(--ink); }
.nx-cal-tl-label span { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.nx-cal-tl-track { position: relative; min-height: 60px; border-left: 1px solid var(--line); background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: calc(100% / var(--nx-cal-weeks)) 100%; }
.nx-cal-tl-bar { position: absolute; top: 12px; height: 24px; display: flex; align-items: center; gap: 6px; padding: 0 8px; border-radius: var(--radius-s); background: var(--selected); color: var(--ink); font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.nx-cal-tl-bar > span { position: relative; z-index: 1; overflow: hidden; text-overflow: ellipsis; }
.nx-cal-tl-bar .nx-i { position: relative; z-index: 1; width: 14px; height: 14px; flex: none; }
.nx-cal-tl-fill { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--ink); }
.nx-cal-tl-bar.is-late { background: var(--danger-soft); color: var(--danger); }
.nx-cal-tl-bar.is-late .nx-cal-tl-fill { background: var(--danger); }
.nx-cal-tl-bar.is-done { background: var(--positive-soft); color: var(--positive); }
.nx-cal-tl-bar.is-paused { background: transparent; border: 1px dashed var(--line-strong); color: var(--ink-3); }
.nx-cal-tl-bar.is-ai { background: var(--ai-soft); color: var(--ai); }
.nx-cal-ms { position: absolute; top: 18px; z-index: 2; width: 12px; height: 12px; margin-left: -6px; border: 2px solid var(--ink); border-radius: 2px; background: var(--sheet); transform: rotate(45deg); }
.nx-cal-ms.is-done { background: var(--positive); border-color: var(--positive); }
.nx-cal-ms.is-risk { background: var(--caution); border-color: var(--caution); }
.nx-cal-ms.is-late { background: var(--danger); border-color: var(--danger); }
.nx-cal-ms-label { position: absolute; top: 39px; z-index: 4; transform: translateX(-50%); padding: 0 3px; border-radius: 3px; background: var(--sheet); font-size: 11px; line-height: 14px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.nx-cal-ms-label.is-end { transform: translateX(-100%); }
/* Today: a line down the whole timeline with the dot at its top */
.nx-cal-tl-now { position: absolute; top: 0; bottom: 0; z-index: 3; left: calc(var(--nx-cal-label) + (100% - var(--nx-cal-label)) * var(--nx-cal-now)); width: 0; border-left: 1.5px solid var(--dot); pointer-events: none; }
.nx-cal-tl-now::before { content: ""; position: absolute; top: 4px; left: -5.25px; width: 9px; height: 9px; border-radius: var(--radius-full); background: var(--dot); }

/* ---------- Phones: views keep their shape and scroll sideways ---------- */
@media (max-width: 760px) {
  .nx-cal-scroll { overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .nx-cal-tray { flex-basis: 100%; max-width: none; }
  .nx-cal-week { min-width: 700px; }
  .nx-cal-month { min-width: 620px; }
  .nx-cal-cell { min-height: 84px; }
  .nx-cal-tl { --nx-cal-label: 150px; min-width: 680px; }
  .nx-cal-tl-label { padding: 6px 12px; }
  .nx-cal-tl-group { padding: 12px 12px 4px; }
}


/* ---------- ChatThread (components/ChatThread/README.md) ---------- */
/* ---------- Chat thread: a conversation with an assistant in Assistants › Chats ----------
   Turns, the changes Noephic recorded, what the chat can see, and the box to write in.
   Tokens only, so both themes follow. Prefix nx-chat-. */
.nx-chat { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.nx-chat-msg { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.nx-chat-msg > div { min-width: 0; }
.nx-chat-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink); }
.nx-chat-time { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.nx-chat-text { margin-top: 4px; max-width: var(--size-measure); font-size: 15px; line-height: 22px; color: var(--ink); overflow-wrap: anywhere; }
.nx-chat-text > * + * { margin-top: var(--space-2); }
.nx-chat-msg--me .nx-chat-text { width: fit-content; max-width: min(100%, var(--size-measure)); padding: 10px 14px; border-radius: var(--radius-l); background: var(--sheet-sunken); }
.nx-chat-msg > div > .nx-run-changes, .nx-chat-msg > div > .nx-chat-block { margin-top: var(--space-3); }
.nx-chat-block { max-width: var(--size-measure); padding: var(--space-1) var(--space-4); border-radius: var(--radius-l); background: var(--sheet-sunken); }
.nx-chat-event { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-left: 40px; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-m); font-size: 13px; line-height: 18px; color: var(--ink-2); }
.nx-chat-event > span:not(.nx-i) { flex: 1 1 200px; min-width: 0; }
.nx-chat-event > .nx-i { flex: none; width: 16px; height: 16px; color: var(--positive); }
.nx-chat-event strong { font-weight: 600; color: var(--ink); }
.nx-chat-context { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.nx-chat-context > .nx-label { margin-right: var(--space-1); }
.nx-chat-composer { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--control); border-radius: var(--radius-l); background: var(--sheet); }
.nx-chat-composer:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; }
.nx-chat-composer textarea { width: 100%; min-height: 44px; padding: 2px 4px; border: 0; outline: none; resize: none; background: transparent; color: var(--ink); font-size: 15px; line-height: 22px; }
.nx-chat-composer textarea::placeholder { color: var(--ink-3); }
.nx-chat-composer-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.nx-chat-composer-foot > :last-child { margin-left: auto; }
@media (max-width: 760px) {
  .nx-chat-event { margin-left: 0; }
  .nx-chat-composer textarea { font-size: 16px; }
}


/* ---------- ChoiceCard (components/ChoiceCard/README.md) ---------- */
/* ==========================================================================
   ChoiceCard (proposal): pick one of a few options when seeing the result
   helps more than reading its name (Light, Dark, System).
   Prefix: nx-set-   Tokens only. nx-set-mini draws a tiny app from tokens;
   data-theme on it shows that theme whatever the page uses.
   ========================================================================== */
.nx-set-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: var(--space-4); }
.nx-set-choice { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; padding: var(--space-2) var(--space-2) var(--space-3); border-radius: var(--radius-l); border: 1px solid var(--line-strong); background: var(--sheet); color: var(--ink); text-align: left; transition: border-color 120ms ease, box-shadow 120ms ease; }
.nx-set-choice:hover { border-color: var(--control); }
.nx-set-choice[aria-checked="true"], .nx-set-choice[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.nx-set-choice-art { position: relative; display: block; height: 104px; border-radius: var(--radius-m); overflow: hidden; background: var(--sheet-sunken); }
.nx-set-choice-label { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-1); font-size: 14px; line-height: 20px; font-weight: 600; }
.nx-set-choice-label small { margin-left: auto; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-3); }
.nx-set-choice-mark { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: var(--radius-full); border: 1.5px solid var(--control); }
.nx-set-choice[aria-checked="true"] .nx-set-choice-mark, .nx-set-choice[aria-pressed="true"] .nx-set-choice-mark { border-color: var(--ink); }
.nx-set-choice[aria-checked="true"] .nx-set-choice-mark::after, .nx-set-choice[aria-pressed="true"] .nx-set-choice-mark::after { content: ""; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--ink); }

/* A miniature of the app: sidebar on ground, one sheet with a headword and rows. */
.nx-set-mini { display: grid; grid-template-columns: 28% minmax(0, 1fr); gap: 6px; height: 100%; padding: 10px 0 0 10px; background: var(--ground); color: var(--ink); }
.nx-set-mini-side { display: flex; flex-direction: column; gap: 7px; padding-top: 3px; }
.nx-set-mini-sheet { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 10px 10px 0; border-radius: 7px 0 0 0; background: var(--sheet); box-shadow: var(--shadow-hairline); }
.nx-set-mini-line { display: block; flex: none; height: 5px; border-radius: 3px; background: var(--line-strong); }
.nx-set-mini-line.is-ink { background: var(--ink-3); }
.nx-set-mini-title { display: flex; align-items: flex-end; gap: 2px; height: 10px; margin-bottom: 2px; }
.nx-set-mini-title::before { content: ""; width: 52%; height: 9px; border-radius: 3px; background: var(--ink); }
.nx-set-mini-title::after { content: ""; width: 4px; height: 4px; border-radius: var(--radius-full); background: var(--dot); }
.nx-set-mini-row { display: flex; align-items: center; gap: 5px; }
.nx-set-mini-row::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: var(--radius-full); border: 1px solid var(--control); }
.nx-set-mini-split { display: grid; grid-template-columns: 1fr 1fr; height: 100%; }

@media (max-width: 760px) {
  .nx-set-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
  .nx-set-choice { padding: 6px 6px var(--space-2); gap: var(--space-2); }
  .nx-set-choice-art { height: 76px; }
  .nx-set-choice-label { font-size: 13px; gap: 6px; padding: 0 2px; }
  .nx-set-choice-label small { display: none; }
}


/* ---------- ConnectChoice (components/ConnectChoice/README.md) ---------- */
/* ==========================================================================
   Proposal: ConnectChoice (prefix nx-connect-choice)
   Pick one of a few options that each need a sentence of explanation:
   the assistant to connect, a worker's kind. A radio group of cards.
   Tokens only, so light and dark both follow.
   ========================================================================== */
.nx-connect-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--space-3); }
.nx-connect-choice { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--space-3); width: 100%; min-width: 0; padding: var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius-l); background: var(--sheet); color: var(--ink); font: inherit; text-align: left; text-decoration: none; transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease; }
.nx a.nx-connect-choice { text-decoration: none; }
.nx-connect-choice:hover { background: var(--hover); }
.nx-connect-choice[aria-checked="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.nx-connect-choice[aria-checked="true"]:hover { background: var(--sheet); }
/* Unavailable: still readable, with the reason in the meta line. Never only greyed out. */
.nx-connect-choice[aria-disabled="true"] { background: var(--sheet-sunken); border-style: dashed; cursor: default; }
.nx-connect-choice[aria-disabled="true"]:hover { background: var(--sheet-sunken); }
.nx-connect-choice-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nx-connect-choice-title { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ink); }
.nx-connect-choice-text { font-size: 13px; line-height: 18px; color: var(--ink-2); }
/* The meta line flows as text, so an icon stays beside the words it labels when the line wraps. */
.nx-connect-choice-meta { display: block; margin-top: 6px; font-size: 12px; line-height: 18px; color: var(--ink-3); }
.nx-connect-choice-meta > .nx-i { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
.nx-connect-choice-meta > .nx-tag { margin-right: var(--space-2); vertical-align: middle; }
.nx-connect-choice-mark { position: relative; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: var(--radius-full); border: 1.5px solid var(--control); background: var(--sheet); }
.nx-connect-choice[aria-checked="true"] .nx-connect-choice-mark { border-color: var(--ink); background: var(--ink); }
.nx-connect-choice[aria-checked="true"] .nx-connect-choice-mark::after { content: ""; position: absolute; inset: 5px; border-radius: var(--radius-full); background: var(--on-ink); }
.nx-connect-choice[aria-disabled="true"] .nx-connect-choice-mark { border-style: dashed; background: transparent; }

@media (max-width: 760px) {
  .nx-connect-choices { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .nx-connect-choice { min-height: var(--size-touch); padding: var(--space-3) var(--space-4); }
}


/* ---------- ConnectCopy (components/ConnectCopy/README.md) ---------- */
/* ==========================================================================
   Proposal: ConnectCopy (prefix nx-connect-copy)
   A connector address the person pastes into another app: Noephic's
   address for chats, or the Noephic AI Worker address on a computer.
   Read-only, set in mono, with its Copy button. Tokens only, so light
   and dark both follow.
   ========================================================================== */
.nx-connect-copy { display: flex; align-items: center; gap: var(--space-2); min-width: 0; max-width: 100%; padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--sheet-sunken); }
.nx-connect-copy-value { flex: 1 1 auto; min-width: 0; font-family: var(--font-mono); font-size: 13px; line-height: 18px; font-weight: 400; color: var(--ink); overflow-wrap: anywhere; user-select: all; }
.nx-connect-copy > .nx-btn { flex: none; }

@media (max-width: 760px) {
  .nx-connect-copy { flex-wrap: wrap; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); }
}


/* ---------- Diff (components/Diff/README.md) ---------- */
/* ==========================================================================
   Proposal: Diff (prefix nx-diff-)
   What changed between two versions: inline in running text (note versions)
   or field by field with a choice per field (sync conflicts with Azure DevOps,
   Planner and Outlook). Tokens only, so Light and Dark both follow.
   ========================================================================== */

/* ---------- Inline changes in text ---------- */
.nx-diff ins, .nx-diff-ins {
  color: var(--ink);
  background: var(--selected);
  text-decoration-line: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: var(--ink-3);
  border-radius: 3px;
  padding: 0 2px;
}
.nx-diff del, .nx-diff-del {
  color: var(--ink-3);
  background: var(--sheet-sunken);
  text-decoration-line: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--ink-3);
  border-radius: 3px;
  padding: 0 2px;
}
/* A change an assistant made carries the ai color; a person's stays neutral. */
.nx-diff ins[data-by="ai"], .nx-diff-ins[data-by="ai"] { background: var(--ai-soft); text-decoration-color: var(--ai); }
.nx-diff del[data-by="ai"], .nx-diff-del[data-by="ai"] { text-decoration-color: var(--ai); }

/* A paragraph, list item or row that holds a change gets a bar in the margin, so long notes scan quickly. */
.nx-diff-block { position: relative; }
.nx-diff-block::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 2px;
  bottom: 2px;
  width: 3px;
  border-radius: 2px;
  background: var(--ink-3);
}
.nx-diff-block[data-by="ai"]::before { background: var(--ai); }
/* A list item's bar sits outside its bullet, in line with the paragraphs' bars. */
li.nx-diff-block::before { left: -34px; }

/* ---------- Field by field, with a choice per field ---------- */
.nx-diff-fields { display: flex; flex-direction: column; }
.nx-diff-field {
  display: grid;
  grid-template-columns: minmax(144px, 0.6fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
}
.nx-diff-field + .nx-diff-field { box-shadow: inset 0 1px 0 var(--line); }
.nx-diff-name { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; padding-top: 10px; }
.nx-diff-name b { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.nx-diff-was { font-size: 12px; line-height: 16px; color: var(--ink-3); overflow-wrap: anywhere; }

/* One side's value is a radio: role="radio" with aria-checked inside a role="radiogroup" per field. */
.nx-diff-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  width: 100%;
  min-width: 0;
  padding: 10px 40px 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-m);
  background: var(--sheet);
  color: var(--ink);
  text-align: left;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.nx-diff-opt:hover { background: var(--hover); }
.nx-diff-opt::after {
  content: "";
  position: absolute;
  top: 11px;
  right: 12px;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--control);
  background: var(--sheet);
}
.nx-diff-opt[aria-checked="true"] { background: var(--selected); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.nx-diff-opt[aria-checked="true"]::after { border: 5px solid var(--ink); background: var(--on-ink); }
.nx-diff-side { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-3); }
.nx-diff-val { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.nx-diff-who { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.nx-diff-then { display: inline-flex; align-items: flex-start; gap: 4px; font-size: 12px; line-height: 16px; color: var(--ink-2); }
.nx-diff-then .nx-i { width: 14px; height: 14px; margin-top: 1px; }

@media (max-width: 760px) {
  .nx-diff-block::before { left: -10px; }
  li.nx-diff-block::before { left: -30px; }
  .nx-diff-field { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .nx-diff-name { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding-top: 0; }
  .nx-diff-opt { padding: 12px 44px 12px 14px; min-height: var(--size-touch); }
}


/* ---------- GoalRow (components/GoalRow/README.md) ---------- */
/* ==========================================================================
   Proposal: GoalRow (prefix nx-goal-)
   One goal in a list: its name, Space and target, factual progress, the next
   action and where it stands (on track, at risk, ready to mark achieved),
   each standing an icon plus a word with the facts behind it.
   Tokens only, so Light and Dark both follow.
   ========================================================================== */

.nx-goal-list { display: flex; flex-direction: column; }
.nx-goal-row {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.15fr) minmax(176px, 0.7fr);
  grid-template-areas: "main next standing";
  align-items: start;
  gap: var(--space-3) var(--space-6);
  padding: var(--space-4) var(--space-3);
  border-radius: var(--radius-m);
  color: var(--ink);
}
.nx-goal-row + .nx-goal-row { box-shadow: inset 0 1px 0 var(--line); }
.nx-goal-row:hover { background: var(--hover); }

.nx-goal-main { grid-area: main; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-3); min-width: 0; }
.nx-goal-main > .nx-i { color: var(--ink-3); margin-top: 1px; }
.nx-goal-main > div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.nx-goal-title { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.nx a.nx-goal-title { text-decoration: none; }
.nx a.nx-goal-title:hover { text-decoration: underline; }
.nx-goal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-3); font-size: 13px; line-height: 18px; color: var(--ink-3); }
.nx-goal-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); margin-top: 6px; max-width: 320px; }
.nx-goal-progress > span { min-width: 84px; text-align: right; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

.nx-goal-next { grid-area: next; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.nx-goal-next > span:first-child { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-3); }
.nx-goal-next p { font-size: 14px; line-height: 20px; color: var(--ink); overflow-wrap: anywhere; }
.nx-goal-next p + p { font-size: 13px; line-height: 18px; color: var(--ink-3); }
.nx-goal-next .nx-btn { margin-top: 6px; }

.nx-goal-standing { grid-area: standing; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.nx-goal-standing .nx-btn { margin-top: 6px; }
.nx-goal-state { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.nx-goal-state .nx-i { width: 16px; height: 16px; }
.nx-goal-state[data-state="ready"] { color: var(--positive); }
.nx-goal-state[data-state="risk"] { color: var(--caution); }
.nx-goal-state[data-state="track"] { color: var(--ink-2); }
.nx-goal-why { font-size: 12px; line-height: 16px; color: var(--ink-3); }

@media (max-width: 1100px) {
  .nx-goal-row { grid-template-columns: minmax(0, 1fr) minmax(160px, auto); grid-template-areas: "main standing" "next next"; }
  .nx-goal-next { padding-left: 32px; }
}
@media (max-width: 760px) {
  .nx-goal-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "next" "standing"; gap: var(--space-3); padding: var(--space-4) var(--space-1); }
  .nx-goal-next, .nx-goal-standing { padding-left: 32px; }
  .nx-goal-progress { max-width: none; }
}


/* ---------- LinkPicker (components/LinkPicker/README.md) ---------- */
/* ==========================================================================
   Proposal: LinkPicker (prefix nx-link-)
   Find and pick things to link or include: an Azure DevOps item for a task,
   work for a goal or a decision, the lines of a meeting note to make into
   tasks. A search, optional filter chips, and a list of options with a
   selection mark (round for one choice, square for several).
   Tokens only, so Light and Dark both follow.
   ========================================================================== */

.nx-link-pick { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.nx-link-opts { display: flex; flex-direction: column; gap: 2px; }

/* An option: the mark, the item (title and a short line of facts) and at most one trailing tag. */
.nx-link-opt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-3);
  width: 100%;
  padding: 8px var(--space-3);
  border: 0;
  border-radius: var(--radius-m);
  background: transparent;
  color: var(--ink);
  text-align: left;
}
.nx-link-opt:hover { background: var(--hover); }
.nx-link-opt[aria-selected="true"] { background: var(--selected); }
.nx-link-opt > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }

/* The selection mark. Inside an option it follows aria-selected; on its own it is a button with role="checkbox". */
.nx-link-mark {
  position: relative;
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  padding: 0;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--control);
  background: var(--sheet);
  color: transparent;
}
.nx-link-mark::before { content: ""; position: absolute; inset: -12px; }
.nx-link-mark .nx-i { width: 14px; height: 14px; }
[aria-multiselectable="true"] .nx-link-mark, .nx-link-mark[role="checkbox"] { border-radius: 6px; }
.nx-link-opt[aria-selected="true"] .nx-link-mark, .nx-link-mark[aria-checked="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
/* Already linked elsewhere, or not allowed: say why in the option's facts line. */
.nx-link-opt[aria-disabled="true"] .nx-link-mark { border-style: dashed; background: transparent; }
.nx-link-opt[aria-disabled="true"] .nx-row-title { color: var(--ink-2); }

@media (max-width: 760px) {
  .nx-link-opt { grid-template-columns: auto minmax(0, 1fr); padding: 10px var(--space-2); min-height: var(--size-touch); }
  .nx-link-opt > :nth-child(3) { grid-column: 2; justify-self: start; }
}


/* ---------- OutlineTree (components/OutlineTree/README.md) ---------- */
/* ==========================================================================
   OutlineTree (proposal, prefix nx-tree-)
   Goals, projects, tasks and steps as one expandable outline (Work › Outline).
   Tokens only; both themes follow. Loads after components/bundle.css.
   ========================================================================== */

.nx-tree { display: flex; flex-direction: column; gap: 2px; }
.nx-tree-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; outline: none; }
/* Children hang from a guide line under their parent's toggle */
.nx-tree-group { display: flex; flex-direction: column; gap: 2px; margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--line); }

/* One row: toggle (or its space), lead (icon or check), title with facts, trail (progress, dates, people) */
.nx-tree-row { position: relative; display: grid; grid-template-columns: 24px 24px minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-2); row-gap: 2px; min-height: 40px; padding: 6px var(--space-3) 6px 0; border-radius: var(--radius-m); color: var(--ink); }
.nx-tree-row:hover { background: var(--hover); }
.nx-tree-item[aria-selected="true"] > .nx-tree-row, .nx-tree-row.is-selected { background: var(--selected); }
.nx-tree-item:focus-visible > .nx-tree-row { outline: 2px solid var(--focus); outline-offset: 2px; }

.nx-tree-toggle { position: relative; display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--ink-3); }
.nx-tree-toggle::before { content: ""; position: absolute; inset: -10px; }
.nx-tree-toggle:hover { background: var(--hover); color: var(--ink); }
.nx-tree-toggle .nx-i { width: 16px; height: 16px; }
.nx-tree-lead { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--ink-3); }

.nx-tree-body { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-3); }
.nx-tree-title { font-size: 15px; line-height: 22px; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.nx a.nx-tree-title { text-decoration: none; }
.nx a.nx-tree-title:hover { text-decoration: underline; text-decoration-color: var(--line-strong); }
.nx-tree-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-3); font-size: 13px; line-height: 18px; color: var(--ink-3); }
.nx-tree-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.nx-tree-meta .nx-i { width: 15px; height: 15px; }
.nx-tree-meta .is-late { color: var(--danger); font-weight: 600; }
.nx-tree-meta .is-soon { color: var(--caution); font-weight: 600; }
.nx-tree-trail { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); font-size: 13px; line-height: 18px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nx-tree-trail .nx-progress { width: 88px; }

/* Levels: a goal and a project read as headings of what hangs below them; steps step down */
.nx-tree-row[data-kind="goal"] { min-height: 48px; }
.nx-tree-row[data-kind="goal"] .nx-tree-title { font-size: 16px; font-weight: 600; }
.nx-tree-row[data-kind="goal"] .nx-tree-lead, .nx-tree-row[data-kind="project"] .nx-tree-lead { color: var(--ink-2); }
.nx-tree-row[data-kind="project"] .nx-tree-title { font-weight: 600; }
.nx-tree-row[data-kind="step"] { min-height: 34px; padding-top: 3px; padding-bottom: 3px; }
.nx-tree-row[data-kind="step"] .nx-tree-title { font-size: 14px; line-height: 20px; color: var(--ink-2); }
.nx-tree-row[data-kind="step"] .nx-check { width: 18px; height: 18px; }
.nx-tree-row.is-done .nx-tree-title { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--line-strong); }

/* Where a row being moved will land */
.nx-tree-drop { height: 2px; margin: 0 var(--space-3) 0 32px; border-radius: 2px; background: var(--ink); }

/* The keys that indent and reorder, under the outline (keyboards only, so hidden on phones) */
.nx-tree-keys { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); padding: 10px var(--space-4); border-radius: var(--radius-m); background: var(--sheet-sunken); font-size: 12px; line-height: 16px; color: var(--ink-3); }
.nx-tree-keys > span { display: inline-flex; align-items: center; gap: 4px; }
.nx-tree-keys strong { font-weight: 600; color: var(--ink-2); }

@media (max-width: 760px) {
  .nx-tree-group { margin-left: 11px; padding-left: 6px; }
  .nx-tree-row { grid-template-columns: 24px 24px minmax(0, 1fr); column-gap: 6px; padding-right: var(--space-2); }
  .nx-tree-trail { grid-column: 3; justify-content: flex-start; }
  .nx-tree-keys { display: none; }
}


/* ---------- PropertyEditor (components/PropertyEditor/README.md) ---------- */
/* ==========================================================================
   PropertyEditor (proposal): change one property of an item from its chip.
   Desktop: a popover anchored to the chip or button that opened it.
   Phones (760px and below): the same editor as a bottom sheet.
   Prefix: nx-editor-   Tokens only, so Light and Dark both follow.
   ========================================================================== */

/* The chip and its editor share a positioning context */
.nx-editor-anchor { position: relative; display: inline-flex; flex: none; max-width: 100%; }
.nx-editor-anchor > [aria-expanded="true"] { background: var(--selected); border-color: var(--control); color: var(--ink); }

/* The editor itself */
.nx-editor { position: absolute; top: calc(100% + 6px); left: 0; z-index: 10; display: flex; flex-direction: column; gap: var(--space-3); width: 360px; max-width: calc(100vw - 32px); padding: var(--space-4); border-radius: var(--radius-l); border: 1px solid var(--line); background: var(--sheet-raised); box-shadow: var(--shadow-float); color: var(--ink); font-size: 14px; line-height: 20px; font-weight: 400; text-align: left; white-space: normal; }
.nx-editor--end { left: auto; right: 0; }
.nx-editor--narrow { width: 320px; }
.nx-editor > .nx-grabber { display: none; }

.nx-editor-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 32px; }
.nx-editor-head h3 { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink); }
.nx-editor-lead { font-size: 13px; line-height: 18px; color: var(--ink-2); }

/* Choices: an icon or avatar, a label, one line of what it means, an optional value or check */
.nx-editor-opts { display: flex; flex-direction: column; gap: 2px; }
.nx-editor-opt { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: start; column-gap: var(--space-3); width: 100%; min-height: 44px; padding: 8px var(--space-2); border: 0; border-radius: var(--radius-m); background: transparent; color: var(--ink); text-align: left; text-decoration: none; }
.nx-editor-opt:hover { background: var(--hover); }
.nx-editor-opt[aria-checked="true"], .nx-editor-opt[aria-selected="true"] { background: var(--selected); }
.nx-editor-opt > .nx-i { margin-top: 1px; color: var(--ink-3); }
.nx-editor-opt > .nx-avatar { margin-top: -1px; }
.nx-editor-opt-text { display: flex; flex-direction: column; min-width: 0; }
.nx-editor-opt-text b { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.nx-editor-opt-text small { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.nx-editor-opt > .nx-i:last-child:not(:first-child) { color: var(--ink); }
.nx-editor-val { align-self: start; font-size: 13px; line-height: 20px; font-weight: 600; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* The open choice: a well holding its fields (presets, a natural-language field, what it found) */
.nx-editor-sec { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-m); background: var(--sheet-sunken); }
.nx-editor-sec-head { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: start; column-gap: var(--space-3); }
.nx-editor-sec-head > .nx-i { margin-top: 1px; color: var(--ink); }
.nx-editor-row { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: var(--space-2) var(--space-3); }
.nx-editor-row > .nx-label { color: var(--ink-3); }

.nx-editor-foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; padding-top: var(--space-3); border-top: 1px solid var(--line); }
.nx-editor-foot > .nx-help { flex: 1 1 160px; }

/* Phones: the editor becomes a bottom sheet with a grabber and touch-size rows */
@media (max-width: 760px) {
  .nx-editor { position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 30; width: auto !important; max-width: none; max-height: 88vh; overflow-y: auto; padding: var(--space-2) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); border-width: 1px 0 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: 0 0 0 100vmax var(--scrim), var(--shadow-float); }
  .nx-editor > .nx-grabber { display: block; }
  .nx-editor-opt { min-height: 52px; padding: 10px var(--space-3); }
  .nx-editor-row { grid-template-columns: minmax(0, 1fr); }
  .nx-editor-foot .nx-btn { flex: 1 1 auto; height: var(--size-touch); }
}


/* ---------- ProposedChanges (components/ProposedChanges/README.md) ---------- */
/* ---------- Proposed changes: what would change, item by item, before the person approves it ----------
   Used for an assistant's request that waits at the approval gate (a run, a chat proposal, a phone
   notification), a memory that replaces another, and a skill's updated instructions.
   Tokens only, so both themes follow. Prefix nx-run-. */
.nx-run-changes { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--sheet); overflow: hidden; }
.nx-run-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-4); background: var(--sheet-sunken); }
.nx-run-changes--ai .nx-run-head { background: var(--ai-soft); }
.nx-run-head h3, .nx-run-head h4 { flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.nx-run-head p { flex: 1 1 100%; font-size: 12px; line-height: 16px; color: var(--ink-2); }
.nx-run-head .nx-status { flex: none; }
.nx-run-change { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.nx-run-head + .nx-run-change, .nx-run-change + .nx-run-change { box-shadow: inset 0 1px 0 var(--line); }
.nx-run-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-s); background: var(--sheet-sunken); color: var(--ink-2); }
.nx-run-mark .nx-i { width: 16px; height: 16px; }
.nx-run-change.is-approved .nx-run-mark { background: var(--positive-soft); color: var(--positive); }
.nx-run-what { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.nx-run-id { margin-right: 6px; font-family: var(--font-mono); font-size: 12px; line-height: 20px; font-weight: 500; color: var(--ink-3); }
.nx-run-diff { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-2); margin-top: 4px; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.nx-run-diff .nx-i { width: 14px; height: 14px; color: var(--ink-3); }
.nx-run-field { color: var(--ink-3); }
.nx-run-from { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.nx-run-to { color: var(--ink); font-weight: 600; }
.nx-run-text { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; min-width: 0; }
.nx-run-text > span, .nx-run-text ins, .nx-run-text del { position: relative; display: block; padding: 3px 8px 3px 26px; border-radius: var(--radius-xs); font-size: 13px; line-height: 19px; text-decoration: none; overflow-wrap: anywhere; }
.nx-run-text > span { color: var(--ink-2); }
/* No status hue for added and removed lines (as in Diff): added sits on selected, or ai-soft when an assistant proposed it; removed is struck through. */
.nx-run-text ins { background: var(--selected); color: var(--ink); }
.nx-run-changes--ai .nx-run-text ins { background: var(--ai-soft); }
.nx-run-text del { background: var(--sheet-sunken); color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--ink-3); }
.nx-run-text ins::before, .nx-run-text del::before { position: absolute; left: 9px; top: 3px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; text-decoration: none; }
.nx-run-text ins::before { content: "+"; color: var(--ink-2); }
.nx-run-changes--ai .nx-run-text ins::before { color: var(--ai); }
.nx-run-text del::before { content: "\2212"; color: var(--ink-3); }
.nx-run-side { display: flex; align-items: center; gap: var(--space-2); min-height: 28px; }
.nx-run-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); background: var(--sheet-sunken); }
.nx-run-foot p { flex: 1 1 220px; min-width: 0; font-size: 12px; line-height: 16px; color: var(--ink-2); }
@media (max-width: 760px) {
  .nx-run-head, .nx-run-change, .nx-run-foot { padding-left: var(--space-3); padding-right: var(--space-3); }
  .nx-run-change { grid-template-columns: auto minmax(0, 1fr); }
  .nx-run-change > .nx-run-side { grid-column: 2; }
}


/* ---------- Ritual (components/Ritual/README.md) ---------- */
/* ==========================================================================
   Proposal: Ritual (nx-ritual-)
   The page layout shared by Plan my day, Wrap up and Weekly review: steps on
   the left, the current step in the middle, context on the right. Adds the
   capacity meter (hours picked against free hours), the step footer, the
   compact step line phones show instead of the steps list, and the summary
   figures a ritual ends with. Steps themselves stay nx-steps. Tokens only.
   ========================================================================== */

.nx-ritual { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-8) 36px; }
.nx-ritual-steps { flex: 1 1 196px; max-width: 220px; }
.nx-ritual-main { flex: 999 1 460px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.nx-ritual-aside { flex: 1 1 300px; max-width: 340px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }

/* Phones show this one line instead of the steps list */
.nx-ritual-stepline { display: none; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 13px; line-height: 18px; color: var(--ink-3); }
.nx-ritual-stepline > span { display: inline-flex; align-items: center; gap: 4px; }
.nx-ritual-stepline > span.is-done::before { content: "\2713"; font-weight: 700; color: var(--positive); }
.nx-ritual-stepline [aria-current="step"] { color: var(--ink); font-weight: 600; }

/* Capacity: hours picked against the free hours left in working hours */
.nx-ritual-capacity { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.nx-ritual-capacity-row { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.nx-ritual-capacity-row b { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.nx-ritual-meter { position: relative; height: 8px; border-radius: var(--radius-full); background: var(--selected); overflow: hidden; }
.nx-ritual-meter > span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--ink); }
.nx-ritual-capacity.is-over .nx-ritual-meter > span { background: var(--caution); }
.nx-ritual-capacity.is-over .nx-ritual-capacity-row b { color: var(--caution); }

/* Step footer: what's left on the left, Skip and Next on the right */
.nx-ritual-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.nx-ritual-foot > p { font-size: 13px; line-height: 18px; color: var(--ink-3); }
.nx-ritual-foot > .nx-btngroup { margin-left: auto; }

/* The ending: a few numbers that say what the ritual changed */
.nx-ritual-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: var(--space-3); }
.nx-ritual-fig { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-m); background: var(--sheet-sunken); }
.nx-ritual-fig b { font-size: 22px; line-height: 26px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.nx-ritual-fig span { font-size: 12px; line-height: 16px; color: var(--ink-3); }

@media (max-width: 760px) {
  .nx-ritual { gap: var(--space-6); }
  .nx-ritual-steps { display: none; }
  .nx-ritual-stepline { display: flex; }
  .nx-ritual-main, .nx-ritual-aside { flex-basis: 100%; max-width: none; }
  .nx-ritual-foot .nx-btngroup { flex: 1 1 auto; justify-content: flex-end; }
}


/* ---------- SettingRow (components/SettingRow/README.md) ---------- */
/* ==========================================================================
   SettingRow (proposal): one setting, one line on what it does, and its
   control. Rows sit in an nx-set-list with hairlines between them.
   Prefix: nx-set-   Tokens only, so Light and Dark both follow.
   ========================================================================== */
.nx-set-list { display: flex; flex-direction: column; }
.nx-set-list > .nx-set-row + .nx-set-row { box-shadow: inset 0 1px 0 var(--line); }
.nx-set-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-6); min-height: 56px; padding: var(--space-3) 0; }
.nx-set-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nx-set-name { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.nx-set-desc { font-size: 13px; line-height: 18px; color: var(--ink-3); max-width: 64ch; }
.nx-set-control { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); min-width: 0; font-size: 13px; line-height: 18px; color: var(--ink-2); }
/* The control sits under the text at every width: lists of choices, a row of chips. */
.nx-set-row--wide { grid-template-columns: minmax(0, 1fr); }
.nx-set-row--wide .nx-set-control { justify-content: flex-start; }
/* A row that says something can't be changed: no control, a lock or a status instead. */
.nx-set-row--fixed .nx-set-name { color: var(--ink-2); }
.nx-set-row--danger .nx-set-name { color: var(--danger); }

/* Phones: controls move under their text, except rows marked inline (a switch, one small button). */
@media (max-width: 760px) {
  .nx-set-row { gap: var(--space-3) var(--space-4); }
  .nx-set-row:not(.nx-set-row--inline) { grid-template-columns: minmax(0, 1fr); }
  .nx-set-row:not(.nx-set-row--inline) .nx-set-control { justify-content: flex-start; }
}


/* ---------- ShareAccess (components/ShareAccess/README.md) ---------- */
/* ==========================================================================
   ShareAccess (proposal): pick people, a Team or a Circle, and list who has
   access to an item with their role, a change control and Stop.
   Prefix: nx-share-   Tokens only, so Light and Dark both follow.
   ========================================================================== */

/* A field that holds the chosen recipients as tokens, then a text input */
.nx-share-field { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: var(--size-control-m); padding: 5px 8px; border: 1px solid var(--control); border-radius: var(--radius-m); background: var(--sheet); }
.nx-share-field:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; }
.nx-share-field input { flex: 1 1 140px; min-width: 0; height: 28px; padding: 0 4px; border: 0; outline: none; background: transparent; color: var(--ink); font-size: 15px; }
.nx-share-field input::placeholder { color: var(--ink-3); }

/* One recipient: avatar (or stacked avatars for a Team or Circle), name, kind, remove */
.nx-share-token { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 28px; padding: 0 2px 0 3px; border-radius: var(--radius-s); background: var(--selected); color: var(--ink); font-size: 13px; line-height: 18px; font-weight: 600; white-space: nowrap; }
.nx-share-token small { font-size: 12px; font-weight: 500; color: var(--ink-2); }
.nx-share-token .nx-avatars > .nx-avatar { box-shadow: 0 0 0 2px var(--selected); }
.nx-share-token button { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--ink-3); }
.nx-share-token button:hover { background: var(--hover); color: var(--ink); }
.nx-share-token button .nx-i { width: 14px; height: 14px; }

/* Who has access: one row per person or group */
.nx-share-list { display: flex; flex-direction: column; }
.nx-share-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-3); padding: 10px 0; }
.nx-share-row + .nx-share-row { box-shadow: inset 0 1px 0 var(--line); }
.nx-share-row > :first-child { justify-self: start; }
.nx-share-row-name { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.nx-share-row-meta { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.nx-share-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-1); }
.nx-share-row-role { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-3); padding: 0 var(--space-3); }
.nx-share-row-actions .nx-btn--danger[aria-expanded="true"] { background: var(--danger-soft); }

/* Stopping access says who loses what, in place, before it happens */
.nx-share-confirm { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: 10px var(--space-3); border-radius: var(--radius-m); background: var(--danger-soft); font-size: 13px; line-height: 18px; color: var(--ink); }
.nx-share-confirm > p { flex: 1 1 220px; }

@media (max-width: 760px) {
  .nx-share-field input { font-size: 16px; }
  .nx-share-row { grid-template-columns: 44px minmax(0, 1fr); }
  .nx-share-row-actions { grid-column: 2; justify-content: flex-start; margin-left: calc(-1 * var(--space-3)); }
  .nx-share-row-role { grid-column: 2; padding: 0; margin-top: calc(-1 * var(--space-1)); }
  .nx-share-confirm { grid-column: 1 / -1; }
}


/* ---------- SiriCard (components/SiriCard/README.md) ---------- */
/* ==========================================================================
   Proposal: SiriCard (prefix nx-siri-)
   The card Noephic returns to Siri and Shortcuts: what happened or what is
   next, at most two actions, and nothing private while iPhone is locked.
   Specs for the App Intents snippet views, drawn with tokens only, so
   Light and Dark both follow.
   ========================================================================== */

.nx-siri { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; max-width: 380px; padding: 14px var(--space-4) var(--space-4); border-radius: var(--radius-xl); background: var(--sheet-raised); color: var(--ink); box-shadow: var(--shadow-lift); }

/* App line: icon, name, and one fact on the right (a count, a Space, a date). */
.nx-siri-head { display: flex; align-items: center; gap: var(--space-2); min-width: 0; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-3); }
.nx-siri-head > :last-child:not(:first-child):not(.nx-siri-app) { margin-left: auto; }
.nx-siri-app { width: 22px; height: 22px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 6px; background: var(--ground); box-shadow: var(--shadow-hairline); }
.nx-siri-app img, .nx-siri-app svg { width: 22px; height: 22px; display: block; transform: translate(-1.5px, -1px); }

/* Body: a short label, the subject, then plain facts. */
.nx-siri-label { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-3); }
.nx-siri-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nx-siri-facts { display: flex; flex-direction: column; gap: 6px; }
.nx-siri-facts li { display: flex; align-items: center; gap: var(--space-2); font-size: 14px; line-height: 20px; color: var(--ink-2); }
.nx-siri-facts .nx-i { width: 16px; height: 16px; color: var(--ink-3); }
.nx-siri-then { display: flex; flex-direction: column; gap: 2px; padding-top: var(--space-3); border-top: 1px solid var(--line); font-size: 14px; line-height: 20px; color: var(--ink); }
.nx-siri-then > span:first-child { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-3); }

/* Locked: titles and what you said are hidden; counts, times and Spaces stay. */
.nx-siri-hidden { display: flex; align-items: center; gap: var(--space-2); padding: 10px var(--space-3); border-radius: var(--radius-m); background: var(--sheet-sunken); font-size: 13px; line-height: 18px; color: var(--ink-2); }
.nx-siri-hidden .nx-i { width: 16px; height: 16px; color: var(--ink-3); }

.nx-siri-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* The exchange around the card: what you said and what Siri says back. */
.nx-siri-turns { display: flex; flex-direction: column; gap: 6px; }
.nx-siri-turn { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: var(--space-2); font-size: 14px; line-height: 20px; color: var(--ink); }
.nx-siri-turn b { font-size: 12px; line-height: 20px; font-weight: 600; color: var(--ink-3); }

@media (max-width: 760px) {
  .nx-siri { max-width: none; }
  .nx-siri-actions .nx-btn { flex: 1 1 auto; min-height: var(--size-touch); }
}


/* ---------- WidgetState (components/WidgetState/README.md) ---------- */
/* ==========================================================================
   Proposal: WidgetState (prefix nx-wstate-)
   The plan rows inside Glance widgets and the states a widget can be in:
   completed with one tap (Undo in place), stale (Open Noephic to refresh)
   and titles hidden on the Lock Screen. Specs for the SwiftUI widgets,
   drawn with tokens only, so Light and Dark both follow.
   ========================================================================== */

/* The plan's label line: "Plan" and its count, like Today's section head. */
.nx-wstate-plan { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-2); }
.nx-wstate-plan .nx-count { margin-left: auto; }

/* One plan row: number, the one-tap check, the title with one fact, an optional trail. */
.nx-wstate-list { display: flex; flex-direction: column; gap: 2px; }
.nx-wstate-row { display: grid; grid-template-columns: 12px 22px minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); min-height: 44px; padding: 4px var(--space-2); margin: 0 calc(var(--space-2) * -1); border-radius: var(--radius-m); }
.nx-wstate-row > .nx-row-num { width: auto; line-height: 18px; }
.nx-wstate-row--now { background: var(--dot-soft); }
.nx-wstate-text { min-width: 0; display: flex; flex-direction: column; }
.nx-wstate-title { font-size: 14px; line-height: 18px; font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-wstate-title .nx-dot { margin-left: 5px; vertical-align: 2px; }
.nx-wstate-row--now .nx-wstate-title { font-weight: 600; }
.nx-wstate-meta { font-size: 12px; line-height: 16px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-wstate-meta.is-soon { color: var(--caution); font-weight: 600; }
.nx-wstate-meta.is-done { color: var(--positive); font-weight: 600; }

/* Completed with one tap: the row stays in place, done, with Undo beside it. */
.nx-wstate-row--done .nx-wstate-title { color: var(--ink-3); }
.nx-wstate-undo { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 28px; padding: 0 10px 0 8px; border: 0; border-radius: var(--radius-full); background: var(--selected); color: var(--ink); font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; }
.nx-wstate-undo .nx-i { width: 14px; height: 14px; }

/* Stale: the snapshot is older than 6 hours. Checks rest, nothing claims attention, and the widget says how to refresh. */
.nx-wstate--stale .nx-check { opacity: 0.45; }
.nx-wstate--stale .nx-wstate-row--now { background: var(--sheet-sunken); }
.nx-wstate--stale .nx-wstate-title { color: var(--ink-2); font-weight: 500; }
.nx-wstate--stale .nx-wstate-meta.is-soon { color: var(--ink-3); font-weight: 400; }
.nx-wstate-stale { display: flex; align-items: center; gap: var(--space-2); padding: 8px 10px; border-radius: var(--radius-m); background: var(--caution-soft); color: var(--ink); font-size: 12px; line-height: 16px; font-weight: 600; }
.nx-wstate-stale > .nx-i { width: 16px; height: 16px; color: var(--caution); }
.nx-wstate-stale > span:not(.nx-i) + span { margin-left: auto; font-weight: 500; color: var(--ink-2); white-space: nowrap; }

/* Titles hidden while locked: a soft bar stands where the words were. */
.nx-wstate-redact { display: inline-block; width: var(--w, 8em); max-width: 100%; height: 0.66em; border-radius: var(--radius-full); background: currentColor; opacity: 0.3; vertical-align: middle; }

@media (max-width: 760px) {
  .nx-wstate-undo { height: 32px; padding: 0 12px 0 10px; }
  .nx-wstate-stale { padding: 10px 12px; }
}