/* ============================================================
   NOTIONKIT COMPONENT LIBRARY
   Jungherz GmbH – v1.0.0

   A pure CSS component library for calm, document-centric
   workspace interfaces. No build step, no JavaScript, no
   framework coupling.

   Features:
   - Scoped reset (no unprefixed global selectors)
   - Light mode (default) + dark mode via [data-theme="dark"]
   - ~100 components across app shell, page, database, forms,
     overlays, collaboration and AI surfaces
   - Editor adapter section for TipTap / BlockNote / Novel
   ============================================================ */


/* ============================================================
   A NOTE ON THE TWO-BLOCK STRUCTURE

   This file is physically split into two contiguous blocks:

     BLOCK A – design tokens:  :root { … } [data-theme="dark"] { … }
     BLOCK B – components:     everything else, no --nk-* declarations

   build-styles-js.mjs slices the minified sheet at exactly those
   two rule blocks and emits tokensCss / componentsCss separately.
   The split is asserted at build time; if a --nk-* declaration
   leaks into a component rule, or if the two token blocks stop
   being adjacent, the build fails.

   Why it matters: a shadow root that adopts the *whole* sheet
   also adopts the token blocks, and inside that shadow root the
   selectors match the element's own theme wrapper. Every token is
   then re-declared locally — and a matching rule always beats an
   inherited value, so a consumer's own `:root { --nk-accent: … }`
   never arrives. Consumers that adopt only componentsCss keep
   inheritance intact and put tokensCss on the document instead.

   Practical consequences while editing this file:
   - Never declare a --nk-* custom property outside BLOCK A.
   - Never put a rule between the :root and [data-theme="dark"] blocks.
   - Derive brand-dependent values with color-mix() from a token,
     never from a hard-coded hex. Re-branding must stay reachable
     from a handful of declarations.
   ============================================================ */


/* ============================================================
   A NOTE ON THE ::slotted() PAIRS

   Several rules are written twice, e.g.

     .nk-tree-item .icon,
     .nk-tree-item ::slotted(.icon) { … }

   They are not redundant. When this sheet is adopted into a shadow
   root — as NotionKit Elements will do — content passed in from the
   outside stays in the light DOM and is therefore no descendant of
   anything in the shadow tree. `.nk-tree-item .icon` cannot reach it;
   only `::slotted()` can.

   Do not "simplify" these away. In the document they match nothing,
   so they cost nothing there.

   Three limits worth knowing:
   - ::slotted() only ever matches the assigned node itself. An icon
     wrapped in a container — <span slot="icon"><em>📌</em></span> —
     cannot be styled from inside the shadow root at all. Pass slotted
     content directly.
   - The descendant space is mandatory: `.nk-callout ::slotted(.c-icon)`,
     never `.nk-callout::slotted(.c-icon)`. The compound before
     ::slotted selects the slot element inside the shadow tree.
   - For slotted content the outer tree wins. A consumer's own document
     rule takes precedence over ::slotted() from the shadow tree. That
     is a feature, not a bug.
   ============================================================ */


/* ============================================================
   0. SCOPED RESET

   NotionKit never touches selectors it does not own (PRD 7.4).
   Instead of `* { margin: 0 }` the reset reaches only elements that
   carry an nk- class and plain content elements *inside* NotionKit
   surfaces. Specificity is (0,1,0), the same as a single class, and
   the reset is declared before every component rule — so component
   rules at equal specificity win on source order.
   ============================================================ */
[class*="nk-"],
[class*="nk-"] *,
[class*="nk-"]::before,
[class*="nk-"]::after,
[class*="nk-"] *::before,
[class*="nk-"] *::after {
  box-sizing: border-box;
}

[class*="nk-"] :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, pre, ul, ol, li) {
  margin: 0;
  padding: 0;
}

[class*="nk-"] :where(ul, ol) {
  list-style: none;
}

[class*="nk-"] :where(button, input, select, textarea, option, optgroup, fieldset, legend),
:where(button, input, select, textarea)[class*="nk-"] {
  margin: 0;
  padding: 0;
}


/* ============================================================
   BLOCK A – DESIGN TOKENS

   Everything below until the end of the [data-theme="dark"] block
   is extracted verbatim by build-styles-js.mjs. Keep the two rule
   blocks adjacent and free of anything else.

   Re-branding needs one declaration: --nk-accent. Focus rings,
   checked states, the selected model card and the primary button
   are all mixed from it. --nk-danger and the three --nk-decor-*
   values are the second tier, for destructive actions and for the
   decorative avatar/cover gradients.
   ============================================================ */
:root {
  /* Tells the browser which scheme its own widgets should use: date
     and time pickers, number spinners, select popups, scrollbars and
     autofill. Without it they render dark on a light page. */
  color-scheme: light;

  /* ---- Surfaces ---- */
  --nk-bg: #ffffff;
  --nk-bg-sidebar: #f7f6f3;
  --nk-bg-hover: rgba(0,0,0,0.045);
  --nk-bg-active: rgba(0,0,0,0.06);
  --nk-bg-callout: #f1f1ef;
  --nk-bg-code: #f7f6f3;
  --nk-bg-card: #ffffff;

  /* ---- Text ---- */
  --nk-text: #37352f;
  --nk-text-secondary: rgba(55,53,47,0.65);
  --nk-text-tertiary: rgba(55,53,47,0.45);

  /* ---- Borders ---- */
  --nk-border: rgba(55,53,47,0.09);
  --nk-border-strong: rgba(55,53,47,0.16);

  /* ---- Accent & semantics ---- */
  --nk-accent: #2383e2;
  --nk-on-accent: #ffffff;
  --nk-danger: #eb5757;

  /* ---- Tags ---- */
  --nk-tag-blue-bg: #e7f3f8;  --nk-tag-blue-text: #337ea9;
  --nk-tag-green-bg: #edf3ec; --nk-tag-green-text: #448361;
  --nk-tag-orange-bg: #fbecdd; --nk-tag-orange-text: #d9730d;
  --nk-tag-purple-bg: #f6f3f9; --nk-tag-purple-text: #9065b0;

  /* ---- Decorative ----
     Avatar gradients and the page cover. Deliberately identical in
     both themes: these are illustrative surfaces, not UI chrome. */
  --nk-decor-purple: #9065b0;
  --nk-decor-blue: #529cca;
  --nk-decor-orange: #d9730d;

  /* ---- Overlays ---- */
  --nk-scrim: rgba(15,15,15,0.6);
  --nk-scrim-soft: rgba(15,15,15,0.5);

  /* ---- Metrics ---- */
  --nk-sidebar-width: 260px;
  --nk-radius: 6px;
  --nk-font: ui-sans-serif, -apple-system, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
  --nk-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- Shadows ---- */
  --nk-shadow-menu: rgba(15,15,15,0.05) 0px 0px 0px 1px, rgba(15,15,15,0.1) 0px 3px 6px, rgba(15,15,15,0.2) 0px 9px 24px;
  --nk-shadow-card: 0 1px 2px rgba(0,0,0,0.04);
  --nk-shadow-knob: 0 1px 2px rgba(0,0,0,0.2);
  --nk-shadow-segment: 0 1px 2px rgba(0,0,0,0.08);
}

[data-theme="dark"] {
  color-scheme: dark;

  --nk-bg: #191919;
  --nk-bg-sidebar: #202020;
  --nk-bg-hover: rgba(255,255,255,0.055);
  --nk-bg-active: rgba(255,255,255,0.08);
  --nk-bg-callout: #252525;
  --nk-bg-code: #202020;
  --nk-bg-card: #202020;

  --nk-text: rgba(255,255,255,0.81);
  --nk-text-secondary: rgba(255,255,255,0.46);
  --nk-text-tertiary: rgba(255,255,255,0.28);

  --nk-border: rgba(255,255,255,0.094);
  --nk-border-strong: rgba(255,255,255,0.16);

  --nk-accent: #529CCA;

  --nk-tag-blue-bg: #133040;  --nk-tag-blue-text: #529CCA;
  --nk-tag-green-bg: #173B2C; --nk-tag-green-text: #4DAB9A;
  --nk-tag-orange-bg: #40291B; --nk-tag-orange-text: #FFA344;
  --nk-tag-purple-bg: #2E2440; --nk-tag-purple-text: #9A6DD7;

  --nk-shadow-menu: rgba(15,15,15,0.2) 0px 0px 0px 1px, rgba(15,15,15,0.4) 0px 3px 6px, rgba(15,15,15,0.6) 0px 9px 24px;
  --nk-shadow-card: none;
}


/* ============================================================
   BLOCK B – COMPONENTS

   No --nk-* declarations below this line. Grouped by PRD chapter 5.
   ============================================================ */


/* ============================================================
   B0. DOCUMENT BASE (opt-in)

   Applied by adding class="nk-body" to <body>. Kept opt-in so the
   library never claims the page it is embedded in.
   ============================================================ */
.nk-body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--nk-font);
  font-size: 14px;
  background: var(--nk-bg);
  color: var(--nk-text);
  -webkit-font-smoothing: antialiased;
  transition: background .25s ease, color .25s ease;
}


/* ============================================================
   B1. APP SHELL & LAYOUT  (PRD 5.1)
   ============================================================ */
.nk-app { display: flex; height: 100vh; overflow: hidden; }

/* ---- Sidebar ---- */
.nk-sidebar {
  width: var(--nk-sidebar-width);
  min-width: var(--nk-sidebar-width);
  background: var(--nk-bg-sidebar);
  display: flex; flex-direction: column;
  border-right: 1px solid var(--nk-border);
  transition: background .25s ease;
}

.nk-workspace {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; margin: 6px 8px 2px;
  border-radius: var(--nk-radius);
  cursor: pointer; font-weight: 500;
  user-select: none;
}
.nk-workspace:hover { background: var(--nk-bg-hover); }
.nk-workspace .avatar,
.nk-workspace ::slotted(.avatar) {
  width: 22px; height: 22px; border-radius: 4px;
  background: linear-gradient(135deg, var(--nk-decor-purple), var(--nk-decor-blue));
  color: var(--nk-on-accent); font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.nk-workspace .chev { margin-left: auto; color: var(--nk-text-tertiary); font-size: 11px; }

.nk-sidebar-scroll { flex: 1; overflow-y: auto; padding: 4px 8px 16px; }
.nk-sidebar-scroll::-webkit-scrollbar { width: 8px; }
.nk-sidebar-scroll::-webkit-scrollbar-thumb { background: var(--nk-border-strong); border-radius: 4px; }

.nk-section-label {
  font-size: 11px; font-weight: 500; letter-spacing: .02em;
  color: var(--nk-text-tertiary);
  padding: 14px 10px 4px;
  display: flex; justify-content: space-between; align-items: center;
}
.nk-section-label .plus {
  cursor: pointer; border-radius: 4px; padding: 0 4px; font-size: 13px;
  opacity: 0; transition: opacity .15s;
}
.nk-section-label:hover .plus { opacity: 1; }
.nk-section-label .plus:hover { background: var(--nk-bg-hover); }

.nk-sidebar-footer {
  padding: 8px; border-top: 1px solid var(--nk-border);
  color: var(--nk-text-secondary); font-size: 13px;
}
.nk-sidebar-footer .nk-tree-item { min-height: 26px; }

/* ---- Main / Topbar ---- */
.nk-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.nk-topbar {
  height: 45px; display: flex; align-items: center;
  padding: 0 12px; gap: 8px; flex-shrink: 0;
}
.nk-breadcrumb { display: flex; align-items: center; gap: 4px; font-size: 14px; }
.nk-breadcrumb .crumb,
.nk-breadcrumb ::slotted(.crumb) {
  padding: 2px 6px; border-radius: 4px; cursor: pointer;
  color: var(--nk-text-secondary);
  display: flex; align-items: center; gap: 5px;
}
.nk-breadcrumb .crumb:hover { background: var(--nk-bg-hover); }
.nk-breadcrumb .crumb.current,
.nk-breadcrumb ::slotted(.crumb.current) { color: var(--nk-text); }
.nk-breadcrumb .sep { color: var(--nk-text-tertiary); font-size: 12px; }

.nk-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nk-topbar-btn {
  padding: 4px 8px; border-radius: var(--nk-radius); cursor: pointer;
  color: var(--nk-text-secondary); font-size: 14px; user-select: none;
  border: none; background: transparent; font-family: inherit;
}
.nk-topbar-btn:hover { background: var(--nk-bg-hover); }
.nk-topbar-btn svg,
.nk-topbar-btn ::slotted(svg) {
  width: 16px; height: 16px; flex-shrink: 0;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.nk-share-btn {
  border: 1px solid var(--nk-border-strong);
  font-size: 13px; padding: 3px 10px;
}
.nk-theme-toggle { font-size: 15px; width: 30px; height: 28px; padding: 0; }


/* ============================================================
   B2. NAVIGATION / PAGE TREE  (PRD 5.2)
   ============================================================ */
.nk-tree-item {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 8px 3px 10px;
  border-radius: var(--nk-radius);
  cursor: pointer; user-select: none;
  color: var(--nk-text-secondary);
  position: relative;
  min-height: 28px;
}
.nk-tree-item:hover { background: var(--nk-bg-hover); }
.nk-tree-item.active { background: var(--nk-bg-active); color: var(--nk-text); font-weight: 500; }
.nk-tree-item .icon,
.nk-tree-item ::slotted(.icon) { font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; }
.nk-tree-item .label,
.nk-tree-item ::slotted(.label) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nk-tree-item .actions {
  margin-left: auto; display: none; gap: 2px; color: var(--nk-text-tertiary);
}
.nk-tree-item:hover .actions { display: flex; }
.nk-tree-item .actions span { padding: 0 3px; border-radius: 3px; font-size: 12px; }
.nk-tree-item .actions span:hover { background: var(--nk-bg-active); }

.nk-tree-children { margin-left: 14px; border-left: 1px solid var(--nk-border); padding-left: 4px; overflow: hidden; }
.nk-tree-children.collapsed { display: none; }

.nk-toggle-arrow {
  width: 16px; height: 16px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; color: var(--nk-text-tertiary);
  border-radius: 3px; transition: transform .15s;
}
.nk-toggle-arrow.open { transform: rotate(90deg); }

.nk-kbd-hint { margin-left: auto; display: flex; gap: 3px; align-items: center; }
.nk-kbd {
  font-family: inherit; font-size: 10.5px; background: var(--nk-bg-callout);
  border: 1px solid var(--nk-border-strong); border-bottom-width: 2px;
  border-radius: 4px; padding: 0 4px;
}


/* ============================================================
   B3. PAGE SHELL & DOCUMENT  (PRD 5.3)
   ============================================================ */
.nk-page-scroll { flex: 1; overflow-y: auto; }
.nk-page-scroll::-webkit-scrollbar { width: 10px; }
.nk-page-scroll::-webkit-scrollbar-thumb { background: var(--nk-border-strong); border-radius: 5px; border: 2px solid var(--nk-bg); }

.nk-cover {
  height: 200px;
  background:
    radial-gradient(ellipse at 20% 40%, color-mix(in srgb, var(--nk-decor-purple) 35%, transparent), transparent 55%),
    radial-gradient(ellipse at 80% 20%, color-mix(in srgb, var(--nk-decor-blue) 35%, transparent), transparent 55%),
    radial-gradient(ellipse at 60% 90%, color-mix(in srgb, var(--nk-decor-orange) 25%, transparent), transparent 55%),
    var(--nk-bg-callout);
}

.nk-page { max-width: 760px; margin: 0 auto; padding: 0 64px 120px; }

.nk-page-icon,
.nk-page ::slotted(.nk-page-icon) {
  font-size: 64px; line-height: 1; margin-top: -42px;
  cursor: pointer; user-select: none;
  display: inline-block;
}
.nk-page-title {
  font-size: 40px; font-weight: 700; margin: 8px 0 4px;
  outline: none; letter-spacing: -0.01em;
}
.nk-page-meta {
  color: var(--nk-text-tertiary); font-size: 13px; margin-bottom: 24px;
  display: flex; gap: 16px;
}
.nk-page p.lead { font-size: 16px; line-height: 1.6; color: var(--nk-text-secondary); margin-bottom: 20px; }

.nk-heading {
  font-size: 22px; font-weight: 600; margin: 32px 0 10px;
  display: flex; align-items: center; gap: 8px;
}


/* ============================================================
   B4. CONTENT ELEMENTS  (PRD 5.4)
   ============================================================ */
.nk-callout {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--nk-bg-callout);
  border-radius: var(--nk-radius);
  padding: 14px 16px; margin: 16px 0;
  line-height: 1.55; font-size: 14.5px;
}
.nk-callout .c-icon,
.nk-callout ::slotted(.c-icon),
.nk-callout ::slotted([slot="icon"]) { font-size: 17px; }

.nk-todo { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; }
.nk-todo input[type="checkbox"] {
  appearance: none; width: 16px; height: 16px; margin-top: 3px;
  border: 1.4px solid var(--nk-border-strong); border-radius: 2px;
  cursor: pointer; flex-shrink: 0; position: relative;
  background: var(--nk-bg);
}
.nk-todo input[type="checkbox"]:checked { background: var(--nk-accent); border-color: var(--nk-accent); }
.nk-todo input[type="checkbox"]:checked::after {
  content: "✓"; color: var(--nk-on-accent); font-size: 11px;
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
.nk-todo input:checked + span { text-decoration: line-through; color: var(--nk-text-tertiary); }

/* The summary marker is a pseudo-element and therefore cannot be
   reached on slotted content — <nk-toggle> must render its own
   summary in the shadow tree rather than accept one via slot. */
.nk-toggle { margin: 6px 0; }
.nk-toggle summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px;
  padding: 4px 6px; border-radius: var(--nk-radius); font-weight: 500;
  user-select: none;
}
.nk-toggle summary::-webkit-details-marker { display: none; }
.nk-toggle summary:hover { background: var(--nk-bg-hover); }
.nk-toggle summary::before {
  content: "▸"; color: var(--nk-text-tertiary); font-size: 11px;
  transition: transform .15s; display: inline-block;
}
.nk-toggle[open] summary::before { transform: rotate(90deg); }
.nk-toggle .toggle-body,
.nk-toggle ::slotted(.toggle-body) { padding: 4px 0 8px 26px; color: var(--nk-text-secondary); line-height: 1.55; }

.nk-divider { border: none; border-top: 1px solid var(--nk-border); margin: 24px 0; }

.nk-quote {
  border-left: 3px solid var(--nk-text); padding: 2px 0 2px 14px;
  margin: 16px 0; color: var(--nk-text-secondary);
  font-size: 14.5px; line-height: 1.55;
}
.nk-quote .q-cite { display: block; margin-top: 6px; font-size: 12.5px; color: var(--nk-text-tertiary); }

/* ---- Inline ---- */
.nk-mention {
  display: inline-flex; align-items: center; gap: 4px; padding: 0 4px;
  border-radius: 4px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.nk-mention:hover { background: var(--nk-bg-hover); }
.nk-mention.person { color: var(--nk-text); }
.nk-mention.person .mini-avatar,
.nk-mention.person ::slotted(.mini-avatar) {
  width: 16px; height: 16px; border-radius: 50%; color: var(--nk-on-accent);
  font-size: 8.5px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
.nk-mention.page { color: var(--nk-text-secondary); text-decoration: underline; text-decoration-color: var(--nk-border-strong); text-underline-offset: 2px; }
.nk-mention.date { color: var(--nk-tag-orange-text); }

.nk-inline-code {
  font-family: var(--nk-font-mono); font-size: 85%;
  color: var(--nk-danger); background: color-mix(in srgb, var(--nk-danger) 8%, transparent);
  border-radius: 4px; padding: 1px 5px;
}

.nk-code {
  background: var(--nk-bg-code); border: 1px solid var(--nk-border);
  border-radius: var(--nk-radius); padding: 20px 24px;
  font-family: var(--nk-font-mono);
  font-size: 13px; line-height: 1.6; margin: 14px 0; overflow-x: auto;
  color: var(--nk-text-secondary);
  white-space: pre; position: relative;
}
.nk-code .lang {
  position: absolute; top: 6px; right: 10px;
  font-size: 11px; color: var(--nk-text-tertiary); font-family: var(--nk-font);
}
.nk-code .tag { color: var(--nk-accent); }
.nk-code .attr { color: var(--nk-tag-orange-text); }


/* ============================================================
   B5. DATABASE VIEWS  (PRD 5.5)
   ============================================================ */
.nk-database { margin: 12px 0 8px; }

.nk-db-tabs {
  display: flex; gap: 2px; border-bottom: 1px solid var(--nk-border);
  margin-bottom: 0; font-size: 13.5px;
}
.nk-db-tab {
  padding: 6px 10px; cursor: pointer; color: var(--nk-text-secondary);
  border-bottom: 2px solid transparent; margin-bottom: -1px; user-select: none;
  display: flex; align-items: center; gap: 6px;
}
.nk-db-tab:hover { color: var(--nk-text); }
.nk-db-tab.active { color: var(--nk-text); border-bottom-color: var(--nk-text); font-weight: 500; }
.nk-db-tab .badge,
.nk-db-tab ::slotted(.badge) {
  background: var(--nk-bg-callout); border-radius: 8px;
  font-size: 11px; padding: 0 6px; color: var(--nk-text-tertiary);
}

/* Horizontal scrolling instead of breaking — the mobile contract for
   wide tables (PRD 6.3a.4). */
.nk-table-wrap { overflow-x: auto; }
.nk-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.nk-table th {
  text-align: left; font-weight: 400; color: var(--nk-text-tertiary);
  padding: 8px 10px; border-bottom: 1px solid var(--nk-border);
  font-size: 13px; white-space: nowrap; user-select: none; cursor: pointer;
}
.nk-table th:hover { background: var(--nk-bg-hover); }
.nk-table th .th-icon,
.nk-table th ::slotted(.th-icon) { margin-right: 5px; font-size: 12px; }
.nk-table td {
  padding: 7px 10px; border-bottom: 1px solid var(--nk-border);
  white-space: nowrap; vertical-align: middle;
}
.nk-table tbody tr:hover { background: var(--nk-bg-hover); }
.nk-table .row-title { display: flex; align-items: center; gap: 7px; font-weight: 500; cursor: pointer; }
.nk-table .row-title:hover { text-decoration: underline; text-decoration-color: var(--nk-text-tertiary); }
.nk-table .date-cell { color: var(--nk-text-secondary); }
.nk-table .person-cell { display: flex; align-items: center; gap: 6px; color: var(--nk-text-secondary); }
.nk-table .person-cell .mini-avatar,
.nk-table .person-cell ::slotted(.mini-avatar) {
  width: 20px; height: 20px; border-radius: 50%;
  font-size: 10px; color: var(--nk-on-accent); display: inline-flex;
  align-items: center; justify-content: center; font-weight: 600;
}
.nk-table .new-row {
  color: var(--nk-text-tertiary); cursor: pointer; padding: 8px 10px;
  display: flex; align-items: center; gap: 7px; font-size: 14px;
}
.nk-table .new-row:hover { background: var(--nk-bg-hover); }

.nk-tag {
  display: inline-block; padding: 1px 8px; border-radius: 10px;
  font-size: 12.5px; font-weight: 450; line-height: 1.6;
}
.nk-tag.blue   { background: var(--nk-tag-blue-bg);   color: var(--nk-tag-blue-text); }
.nk-tag.green  { background: var(--nk-tag-green-bg);  color: var(--nk-tag-green-text); }
.nk-tag.orange { background: var(--nk-tag-orange-bg); color: var(--nk-tag-orange-text); }
.nk-tag.purple { background: var(--nk-tag-purple-bg); color: var(--nk-tag-purple-text); }

.nk-progress {
  width: 110px; height: 6px; border-radius: 3px;
  background: var(--nk-tag-blue-bg); overflow: hidden; display: inline-block;
}
.nk-progress > i { display: block; height: 100%; background: var(--nk-tag-blue-text); border-radius: 3px; }
.nk-progress-label { font-size: 12px; color: var(--nk-text-tertiary); margin-left: 7px; }

/* Board columns scroll horizontally on narrow viewports (PRD 6.3a.4). */
.nk-board { display: none; gap: 12px; padding: 14px 2px; overflow-x: auto; }
.nk-board.active { display: flex; }
.nk-board-col { min-width: 220px; width: 220px; flex-shrink: 0; }
.nk-board-col-header {
  display: flex; align-items: center; gap: 7px; margin-bottom: 8px;
  font-size: 13.5px; font-weight: 500;
}
.nk-board-col-header .count { color: var(--nk-text-tertiary); font-weight: 400; }

.nk-card {
  background: var(--nk-bg-card); border: 1px solid var(--nk-border);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 8px;
  cursor: grab; box-shadow: var(--nk-shadow-card);
  transition: border-color .15s;
}
.nk-card:hover { border-color: var(--nk-border-strong); }
.nk-card .card-title,
.nk-card ::slotted(.card-title) { font-weight: 500; margin-bottom: 7px; display: flex; gap: 6px; align-items: center; }
.nk-card .card-meta,
.nk-card ::slotted(.card-meta) { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--nk-text-tertiary); }


/* ============================================================
   B6. FORMS & SETTINGS  (PRD 5.6)
   ============================================================ */
.nk-field { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 9px 0; }
.nk-field .f-label,
.nk-field ::slotted(.f-label) { font-size: 14px; }
.nk-field .f-desc,
.nk-field ::slotted(.f-desc) { font-size: 12.5px; color: var(--nk-text-tertiary); margin-top: 2px; line-height: 1.45; }
.nk-field .f-control,
.nk-field ::slotted(.f-control) { flex-shrink: 0; }

.nk-input, .nk-select, .nk-textarea {
  font-family: inherit; font-size: 13.5px; color: var(--nk-text);
  background: var(--nk-bg); border: 1px solid var(--nk-border-strong);
  border-radius: var(--nk-radius); padding: 5px 10px;
  outline: none; transition: border-color .15s, box-shadow .15s;
  min-width: 210px;
}
.nk-input:focus, .nk-select:focus, .nk-textarea:focus {
  border-color: var(--nk-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--nk-accent) 25%, transparent);
}
.nk-input::placeholder, .nk-textarea::placeholder { color: var(--nk-text-tertiary); }
.nk-input.wide, .nk-textarea.wide { width: 100%; }
.nk-textarea { resize: vertical; min-height: 70px; line-height: 1.5; }
.nk-select {
  appearance: none; cursor: pointer; padding-right: 26px;
  background-image: linear-gradient(45deg, transparent 50%, var(--nk-text-tertiary) 50%), linear-gradient(135deg, var(--nk-text-tertiary) 50%, transparent 50%);
  background-position: calc(100% - 14px) 55%, calc(100% - 10px) 55%;
  background-size: 4px 4px; background-repeat: no-repeat;
}

.nk-btn {
  font-family: inherit; font-size: 13.5px; font-weight: 500;
  border-radius: var(--nk-radius); cursor: pointer;
  padding: 5px 12px; border: 1px solid transparent;
  transition: background .15s, border-color .15s, opacity .15s;
  display: inline-flex; align-items: center; gap: 6px;
}
.nk-btn svg,
.nk-btn ::slotted(svg) {
  width: 15px; height: 15px; flex-shrink: 0;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.nk-btn.primary { background: var(--nk-accent); color: var(--nk-on-accent); }
.nk-btn.primary:hover { opacity: .88; }
.nk-btn.secondary { background: transparent; color: var(--nk-text); border-color: var(--nk-border-strong); }
.nk-btn.secondary:hover { background: var(--nk-bg-hover); }
.nk-btn.danger { background: transparent; color: var(--nk-danger); border-color: var(--nk-border-strong); }
.nk-btn.danger:hover { background: color-mix(in srgb, var(--nk-danger) 8%, transparent); }
.nk-btn.danger-solid { background: var(--nk-danger); color: var(--nk-on-accent); }
.nk-btn.danger-solid:hover { opacity: .88; }
.nk-btn.small { padding: 3px 9px; font-size: 12.5px; }
a.nk-btn { text-decoration: none; }

/* Two checked states on purpose: <input class="nk-switch" type="checkbox">
   uses :checked, <button class="nk-switch" role="switch"> uses
   aria-checked. The library ships the state, never the toggling. */
.nk-switch {
  position: relative; width: 34px; height: 20px; flex-shrink: 0;
  appearance: none; border: none; cursor: pointer; border-radius: 20px;
  background: var(--nk-border-strong); transition: background .2s;
}
.nk-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%; background: var(--nk-on-accent);
  transition: transform .2s; box-shadow: var(--nk-shadow-knob);
}
.nk-switch:checked,
.nk-switch[aria-checked="true"] { background: var(--nk-accent); }
.nk-switch:checked::after,
.nk-switch[aria-checked="true"]::after { transform: translateX(14px); }

.nk-check { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 14px; cursor: pointer; }
.nk-check input {
  appearance: none; width: 16px; height: 16px; flex-shrink: 0;
  border: 1.4px solid var(--nk-border-strong); border-radius: 3px;
  cursor: pointer; position: relative; background: var(--nk-bg);
}
.nk-check input[type="radio"] { border-radius: 50%; }
.nk-check input:checked { background: var(--nk-accent); border-color: var(--nk-accent); }
.nk-check input:checked::after {
  content: "✓"; color: var(--nk-on-accent); font-size: 10.5px;
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
.nk-check input[type="radio"]:checked::after { content: "●"; font-size: 7px; }

.nk-slider { width: 210px; accent-color: var(--nk-accent); cursor: pointer; }
.nk-slider-value { font-size: 12.5px; color: var(--nk-text-tertiary); margin-top: 3px; }

.nk-profile-row { display: flex; align-items: center; gap: 14px; padding: 8px 0; }
.nk-profile-row .big-avatar,
.nk-profile-row ::slotted(.big-avatar) {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--nk-decor-purple), var(--nk-decor-blue));
  color: var(--nk-on-accent); font-size: 20px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}

.nk-model-card {
  border: 1px solid var(--nk-border-strong); border-radius: 8px;
  padding: 12px 14px; margin-bottom: 10px; cursor: pointer;
  display: flex; align-items: flex-start; gap: 11px;
  transition: border-color .15s, background .15s;
}
.nk-model-card:hover { background: var(--nk-bg-hover); }
.nk-model-card.selected { border-color: var(--nk-accent); background: color-mix(in srgb, var(--nk-accent) 6%, transparent); }
.nk-model-card .m-radio {
  width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0; margin-top: 2px;
  border: 1.4px solid var(--nk-border-strong); position: relative;
}
.nk-model-card.selected .m-radio { border-color: var(--nk-accent); }
.nk-model-card.selected .m-radio::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--nk-accent);
}
.nk-model-card .m-name,
.nk-model-card ::slotted(.m-name) { font-weight: 500; font-size: 14px; display: flex; align-items: center; gap: 7px; }
.nk-model-card .m-desc,
.nk-model-card ::slotted(.m-desc) { font-size: 12.5px; color: var(--nk-text-tertiary); margin-top: 2px; line-height: 1.45; }

.nk-danger-zone {
  border: 1px solid color-mix(in srgb, var(--nk-danger) 40%, transparent); border-radius: 8px;
  padding: 14px 16px; margin-top: 26px;
}
.nk-danger-zone .dz-title { color: var(--nk-danger); font-weight: 600; font-size: 13px; margin-bottom: 8px; }

/* The separator is keyed on the light-DOM sibling order, so the
   ::slotted() twin keeps working when <nk-member-list> projects rows. */
.nk-member-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--nk-border); }
.nk-member-list > .nk-member-row:last-child,
.nk-member-list ::slotted(.nk-member-row:last-child) { border-bottom: none; }
.nk-member-row .mini-avatar,
.nk-member-row ::slotted(.mini-avatar) {
  width: 28px; height: 28px; border-radius: 50%; color: var(--nk-on-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; flex-shrink: 0;
}
.nk-member-row .m-mail { font-size: 12px; color: var(--nk-text-tertiary); }
.nk-member-row .nk-select { min-width: 120px; margin-left: auto; }


/* ============================================================
   B7. SETTINGS MODAL  (PRD 5.7)
   ============================================================ */
.nk-modal-backdrop {
  position: fixed; inset: 0; background: var(--nk-scrim);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.nk-modal-backdrop.open { opacity: 1; pointer-events: auto; }
.nk-modal {
  width: min(960px, 92vw); height: min(640px, 86vh);
  background: var(--nk-bg); border-radius: 10px;
  box-shadow: var(--nk-shadow-menu);
  display: flex; overflow: hidden;
  transform: scale(.98) translateY(6px); transition: transform .2s ease;
}
.nk-modal-backdrop.open .nk-modal { transform: scale(1) translateY(0); }

.nk-settings-nav {
  width: 230px; min-width: 230px; background: var(--nk-bg-sidebar);
  border-right: 1px solid var(--nk-border);
  padding: 10px 8px; overflow-y: auto; flex-shrink: 0;
}
.nk-settings-user {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 10px 12px; margin-bottom: 4px;
}
.nk-settings-user .avatar,
.nk-settings-user ::slotted(.avatar) {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--nk-decor-purple), var(--nk-decor-blue));
  color: var(--nk-on-accent); font-weight: 600; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.nk-settings-user .name { font-weight: 500; font-size: 13.5px; }
.nk-settings-user .mail { font-size: 11.5px; color: var(--nk-text-tertiary); }
.nk-settings-nav .nk-tree-item { min-height: 27px; }
.nk-settings-nav .nk-tree-item.active { background: var(--nk-bg-active); color: var(--nk-text); font-weight: 500; }

.nk-settings-content { flex: 1; overflow-y: auto; padding: 36px 48px 80px; min-width: 0; }
.nk-settings-content::-webkit-scrollbar { width: 10px; }
.nk-settings-content::-webkit-scrollbar-thumb { background: var(--nk-border-strong); border-radius: 5px; border: 2px solid var(--nk-bg); }

.nk-settings-pane { display: none; max-width: 520px; }
.nk-settings-pane.active { display: block; }
.nk-settings-pane > h2 { font-size: 16px; font-weight: 600; padding-bottom: 12px; border-bottom: 1px solid var(--nk-border); margin-bottom: 20px; }
.nk-settings-pane > h3 { font-size: 13px; font-weight: 600; margin: 26px 0 10px; }


/* ============================================================
   B8. OVERLAYS & MENUS  (PRD 5.8)
   ============================================================ */
.nk-pop {
  background: var(--nk-bg); border-radius: 10px; box-shadow: var(--nk-shadow-menu);
  padding: 10px; width: 296px;
}

.nk-emoji-search {
  width: 100%; font-family: inherit; font-size: 13px; color: var(--nk-text);
  background: var(--nk-bg-callout); border: none; border-radius: var(--nk-radius);
  padding: 6px 10px; outline: none; margin-bottom: 8px;
}
.nk-emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.nk-emoji-grid span,
.nk-emoji-grid ::slotted(span) {
  font-size: 18px; text-align: center; padding: 4px 0; border-radius: 5px;
  cursor: pointer; user-select: none;
}
.nk-emoji-grid span:hover { background: var(--nk-bg-hover); }
.nk-emoji-cats { display: flex; gap: 2px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--nk-border); }
.nk-emoji-cats span {
  font-size: 14px; padding: 3px 7px; border-radius: 5px; cursor: pointer;
  color: var(--nk-text-tertiary); filter: grayscale(1); opacity: .6;
}
.nk-emoji-cats span.active, .nk-emoji-cats span:hover { filter: none; opacity: 1; background: var(--nk-bg-hover); }

.nk-menu { padding: 5px; width: 230px; }
.nk-menu-item {
  display: flex; align-items: center; gap: 9px; padding: 5px 9px;
  border-radius: 5px; cursor: pointer; font-size: 13.5px; user-select: none;
}
.nk-menu-item:hover { background: var(--nk-bg-hover); }
.nk-menu-item .m-icon,
.nk-menu-item ::slotted(.m-icon) { width: 17px; text-align: center; font-size: 14px; }
.nk-menu-item .m-shortcut,
.nk-menu-item ::slotted(.m-shortcut) { margin-left: auto; font-size: 11.5px; color: var(--nk-text-tertiary); }
.nk-menu-item.danger { color: var(--nk-danger); }
.nk-menu-sep { border-top: 1px solid var(--nk-border); margin: 5px 4px; }
.nk-menu-label { font-size: 11px; color: var(--nk-text-tertiary); padding: 5px 9px 2px; }

.nk-cmdk-backdrop {
  position: fixed; inset: 0; background: var(--nk-scrim-soft);
  display: flex; justify-content: center; align-items: flex-start;
  padding-top: 14vh; z-index: 110; opacity: 0; pointer-events: none;
  transition: opacity .18s ease;
}
.nk-cmdk-backdrop.open { opacity: 1; pointer-events: auto; }
.nk-cmdk {
  width: min(560px, 92vw); background: var(--nk-bg);
  border-radius: 12px; box-shadow: var(--nk-shadow-menu);
  overflow: hidden; transform: scale(.98); transition: transform .18s ease;
}
.nk-cmdk-backdrop.open .nk-cmdk { transform: scale(1); }
.nk-cmdk-input-row {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--nk-border);
}
.nk-cmdk-input-row input {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 16px; color: var(--nk-text);
}
.nk-cmdk-input-row input::placeholder { color: var(--nk-text-tertiary); }
.nk-cmdk-list { max-height: 320px; overflow-y: auto; padding: 6px; }
.nk-cmdk-group { font-size: 11px; color: var(--nk-text-tertiary); padding: 8px 10px 3px; }
.nk-cmdk-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: 6px; cursor: pointer; font-size: 14px; user-select: none;
}
.nk-cmdk-item.selected { background: var(--nk-bg-active); }
.nk-cmdk-item .m-icon,
.nk-cmdk-item ::slotted(.m-icon) { width: 17px; text-align: center; font-size: 14px; }
.nk-cmdk-item .m-shortcut,
.nk-cmdk-item ::slotted(.m-shortcut) { margin-left: auto; font-size: 11.5px; color: var(--nk-text-tertiary); }
.nk-cmdk-empty { padding: 30px; text-align: center; color: var(--nk-text-tertiary); font-size: 13.5px; }
.nk-cmdk-footer {
  display: flex; gap: 14px; padding: 8px 16px; border-top: 1px solid var(--nk-border);
  font-size: 11.5px; color: var(--nk-text-tertiary);
}

.nk-toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: var(--nk-text); color: var(--nk-bg);
  padding: 8px 16px; border-radius: 8px; font-size: 13.5px;
  opacity: 0; transition: all .3s ease; pointer-events: none;
  box-shadow: var(--nk-shadow-menu);
  display: flex; gap: 8px; align-items: center;
}
.nk-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }


/* ============================================================
   B9. GALLERY & PRODUCTIVITY BLOCKS  (PRD 5.9)
   ============================================================ */
/* Fluid, not breakpoint-driven: two columns in a 760px page column,
   one column as soon as the container drops below ~600px. min(280px, 100%)
   keeps the single column from overflowing containers narrower than 280px. */
.nk-gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px 32px; margin: 12px 0; }
.nk-g-item > h4,
.nk-g-item ::slotted(h4) {
  font-size: 12px; font-weight: 500; color: var(--nk-text-tertiary);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px;
}

.nk-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--nk-border); font-size: 14px; }
.nk-tab {
  padding: 7px 11px; cursor: pointer; color: var(--nk-text-secondary);
  border-bottom: 2px solid transparent; margin-bottom: -1px; user-select: none;
}
.nk-tab:hover { color: var(--nk-text); }
.nk-tab.active { color: var(--nk-text); border-bottom-color: var(--nk-text); font-weight: 500; }
.nk-tab-panel { padding: 12px 2px; color: var(--nk-text-secondary); line-height: 1.55; font-size: 14px; }

.nk-template-btn {
  display: flex; align-items: center; gap: 8px; width: 100%;
  font-family: inherit; font-size: 14px; color: var(--nk-text-secondary);
  background: var(--nk-bg-callout); border: none; border-radius: var(--nk-radius);
  padding: 8px 12px; cursor: pointer; margin-bottom: 6px; text-align: left;
}
.nk-template-btn:hover { background: var(--nk-bg-hover); }

.nk-stats { display: flex; gap: 10px; }
.nk-stat { flex: 1; border: 1px solid var(--nk-border); border-radius: 8px; padding: 12px 14px; }
.nk-stat .s-label,
.nk-stat ::slotted(.s-label) { font-size: 12px; color: var(--nk-text-tertiary); margin-bottom: 4px; }
.nk-stat .s-value,
.nk-stat ::slotted(.s-value) { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.nk-stat .s-delta,
.nk-stat ::slotted(.s-delta) { font-size: 11.5px; margin-top: 3px; }
.nk-stat .s-delta.up,
.nk-stat ::slotted(.s-delta.up) { color: var(--nk-tag-green-text); }
.nk-stat .s-delta.down,
.nk-stat ::slotted(.s-delta.down) { color: var(--nk-danger); }

.nk-synced {
  border: 1.5px solid color-mix(in srgb, var(--nk-danger) 55%, transparent); border-radius: 8px;
  padding: 12px 14px; position: relative; margin: 8px 0;
}
.nk-synced .synced-badge {
  position: absolute; top: -9px; right: 10px; font-size: 11px;
  background: var(--nk-danger); color: var(--nk-on-accent); border-radius: 8px; padding: 1px 8px;
}

.nk-segmented { display: inline-flex; background: var(--nk-bg-callout); border-radius: 7px; padding: 2px; }
.nk-segmented button,
.nk-segmented ::slotted(button) {
  font-family: inherit; font-size: 13px; border: none; background: transparent;
  color: var(--nk-text-secondary); padding: 4px 12px; border-radius: 5px; cursor: pointer;
}
.nk-segmented button.active,
.nk-segmented ::slotted(button.active) { background: var(--nk-bg); color: var(--nk-text); font-weight: 500; box-shadow: var(--nk-shadow-segment); }

.nk-banner {
  display: flex; align-items: center; gap: 10px; font-size: 13.5px;
  border-radius: 8px; padding: 9px 14px; margin-bottom: 8px;
}
.nk-banner.info { background: var(--nk-tag-blue-bg); color: var(--nk-tag-blue-text); }
.nk-banner.success { background: var(--nk-tag-green-bg); color: var(--nk-tag-green-text); }
.nk-banner.warning { background: var(--nk-tag-orange-bg); color: var(--nk-tag-orange-text); }
.nk-banner .b-action,
.nk-banner ::slotted(.b-action) { margin-left: auto; font-weight: 500; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

.nk-avatar-group { display: flex; }
.nk-avatar-group .mini-avatar,
.nk-avatar-group ::slotted(.mini-avatar) {
  width: 26px; height: 26px; border-radius: 50%; color: var(--nk-on-accent);
  font-size: 10.5px; font-weight: 600; border: 2px solid var(--nk-bg);
  display: flex; align-items: center; justify-content: center;
  margin-left: -7px;
}
.nk-avatar-group .mini-avatar:first-child,
.nk-avatar-group ::slotted(.mini-avatar:first-child) { margin-left: 0; }
.nk-avatar-group .more,
.nk-avatar-group ::slotted(.more) { background: var(--nk-bg-callout); color: var(--nk-text-secondary); }

.nk-skeleton {
  border-radius: 5px; margin-bottom: 10px;
  background: linear-gradient(90deg, var(--nk-bg-callout) 25%, var(--nk-bg-hover) 50%, var(--nk-bg-callout) 75%);
  background-size: 200% 100%; animation: nk-shimmer 1.6s infinite;
}
@keyframes nk-shimmer { to { background-position: -200% 0; } }

.nk-empty {
  text-align: center; padding: 36px 20px; border: 1.5px dashed var(--nk-border-strong);
  border-radius: 10px; color: var(--nk-text-tertiary);
}
.nk-empty .e-icon,
.nk-empty ::slotted(.e-icon) { font-size: 30px; margin-bottom: 8px; }
.nk-empty .e-title,
.nk-empty ::slotted(.e-title) { font-weight: 500; color: var(--nk-text-secondary); margin-bottom: 3px; font-size: 14px; }
.nk-empty .e-desc,
.nk-empty ::slotted(.e-desc) { font-size: 12.5px; margin-bottom: 12px; }


/* ============================================================
   B10. COLLABORATION & AI  (PRD 5.10)
   ============================================================ */
.nk-comments { border-left: 1px solid var(--nk-border); padding: 4px 0 4px 18px; margin: 8px 0 8px 8px; }
.nk-comment { display: flex; gap: 9px; margin-bottom: 14px; }
.nk-comment .mini-avatar,
.nk-comment ::slotted(.mini-avatar) {
  width: 24px; height: 24px; border-radius: 50%; color: var(--nk-on-accent); flex-shrink: 0;
  font-size: 10px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.nk-comment .c-head,
.nk-comment ::slotted(.c-head) { font-size: 12.5px; color: var(--nk-text-tertiary); margin-bottom: 2px; }
.nk-comment .c-head b { color: var(--nk-text); font-weight: 600; }
.nk-comment .c-body,
.nk-comment ::slotted(.c-body) { font-size: 13.5px; line-height: 1.5; }
.nk-comment-input { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.nk-comment-input input { min-width: 0; flex: 1; }

.nk-ai-thread { display: flex; flex-direction: column; gap: 14px; }
.nk-ai-msg { display: flex; gap: 9px; }
.nk-ai-msg .mini-avatar,
.nk-ai-msg ::slotted(.mini-avatar) {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 12px;
  background: var(--nk-bg-callout);
}
.nk-ai-msg.user .mini-avatar,
.nk-ai-msg.user ::slotted(.mini-avatar) {
  background: linear-gradient(135deg, var(--nk-decor-purple), var(--nk-decor-blue));
  color: var(--nk-on-accent); font-size: 9.5px; font-weight: 600;
}
.nk-ai-msg .a-body,
.nk-ai-msg ::slotted(.a-body) { font-size: 14px; line-height: 1.55; padding-top: 2px; }
.nk-ai-msg .a-name,
.nk-ai-msg ::slotted(.a-name) { font-size: 12px; font-weight: 600; margin-bottom: 2px; }
.nk-ai-msg .a-name span { color: var(--nk-text-tertiary); font-weight: 400; }
.nk-ai-actions { display: flex; gap: 4px; margin-top: 6px; }
.nk-ai-actions button,
.nk-ai-actions ::slotted(button) {
  font-family: inherit; font-size: 11.5px; color: var(--nk-text-tertiary);
  background: transparent; border: 1px solid var(--nk-border); border-radius: 5px;
  padding: 2px 8px; cursor: pointer;
}
.nk-ai-actions button:hover { background: var(--nk-bg-hover); color: var(--nk-text); }
.nk-ai-input-row {
  display: flex; align-items: center; gap: 8px; margin-top: 14px;
  border: 1px solid var(--nk-border-strong); border-radius: 10px; padding: 8px 12px;
}
.nk-ai-input-row:focus-within { border-color: var(--nk-accent); }
.nk-ai-input-row input {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 14px; color: var(--nk-text); min-width: 0;
}
.nk-ai-input-row input::placeholder { color: var(--nk-text-tertiary); }
.nk-ai-send {
  border: none; background: var(--nk-accent); color: var(--nk-on-accent); border-radius: 6px;
  width: 26px; height: 26px; cursor: pointer; font-size: 13px; flex-shrink: 0;
}


/* ============================================================
   B11. EDITOR ADAPTER  (PRD 5.11)

   NotionKit deliberately ships no editor. `.nk-block-host` is the
   optical shell in the document flow; the behaviour comes from an
   editor you mount inside it.

   Every adapter rule below is scoped to `.nk-block-host` so the
   library never claims a third-party class name globally. The
   integration contract is therefore exactly one class on the host:

     <div class="nk-block-host" id="editor"></div>
     new Editor({ element: document.getElementById('editor'), … })
   ============================================================ */
.nk-block-host {
  position: relative;
  border-radius: var(--nk-radius);
  margin: 8px 0;
  padding: 2px 0 2px 2px;
  transition: background .15s, box-shadow .15s;
}
.nk-block-host:hover { background: var(--nk-bg-hover); }
.nk-block-host:focus-within { background: transparent; box-shadow: 0 0 0 2px color-mix(in srgb, var(--nk-accent) 25%, transparent); }
.nk-block-host.nk-drop-target { box-shadow: 0 -2px 0 0 var(--nk-accent); background: transparent; }

/* Slot for a drag handle to the left of the content column. */
.nk-block-host .nk-block-handle,
.nk-block-host ::slotted(.nk-block-handle) {
  position: absolute; left: -26px; top: 4px;
  width: 18px; height: 20px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  color: var(--nk-text-tertiary); font-size: 13px; cursor: grab;
  opacity: 0; transition: opacity .15s; user-select: none;
}
.nk-block-host:hover .nk-block-handle { opacity: 1; }

/* Block action rail (＋ / ⠿) that an editor integration positions beside
   the hovered block. The library only supplies the look; the docs recipe
   (docs-editor.js) shows the ~60 lines of positioning and drag logic. */
.nk-block-host .nk-block-actions {
  position: absolute; display: flex; gap: 1px; z-index: 2;
  opacity: 0; transition: opacity .15s; pointer-events: none;
}
.nk-block-host .nk-block-actions.show { opacity: 1; pointer-events: auto; }
.nk-block-host .nk-block-actions button,
.nk-block-host .nk-block-actions ::slotted(button) {
  width: 20px; height: 22px; padding: 0; border: none; border-radius: 4px;
  background: transparent; color: var(--nk-text-tertiary); font-family: inherit;
  font-size: 14px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.nk-block-host .nk-block-actions button:hover { background: var(--nk-bg-hover); color: var(--nk-text); }
.nk-block-host .nk-block-actions .drag { cursor: grab; }
.nk-block-host .nk-block-actions .drag:active { cursor: grabbing; }

/* ---- TipTap / ProseMirror (primary, vanilla-JS path) ---- */
.nk-block-host .ProseMirror {
  outline: none;
  font-family: var(--nk-font);
  font-size: 14px; line-height: 1.6; color: var(--nk-text);
  min-height: 60px; padding: 4px 2px;
}
.nk-block-host .ProseMirror > * + * { margin-top: 6px; }
.nk-block-host .ProseMirror h1 { font-size: 30px; font-weight: 600; letter-spacing: -0.01em; margin: 24px 0 6px; }
.nk-block-host .ProseMirror h2 { font-size: 22px; font-weight: 600; margin: 20px 0 6px; }
.nk-block-host .ProseMirror h3 { font-size: 17px; font-weight: 600; margin: 16px 0 4px; }
.nk-block-host .ProseMirror p { margin: 0; }
.nk-block-host .ProseMirror ul,
.nk-block-host .ProseMirror ol { padding-left: 24px; margin: 4px 0; }
.nk-block-host .ProseMirror ul { list-style: disc; }
.nk-block-host .ProseMirror ol { list-style: decimal; }
.nk-block-host .ProseMirror li { margin: 2px 0; }
.nk-block-host .ProseMirror li::marker { color: var(--nk-text-tertiary); }
.nk-block-host .ProseMirror ul[data-type="taskList"] { list-style: none; padding-left: 2px; }
.nk-block-host .ProseMirror ul[data-type="taskList"] li { display: flex; gap: 8px; align-items: flex-start; }
.nk-block-host .ProseMirror ul[data-type="taskList"] li > label { flex-shrink: 0; margin-top: 3px; user-select: none; }
.nk-block-host .ProseMirror ul[data-type="taskList"] li > div { flex: 1; min-width: 0; }
.nk-block-host .ProseMirror ul[data-type="taskList"] input[type="checkbox"] {
  appearance: none; width: 16px; height: 16px; margin: 0;
  border: 1.4px solid var(--nk-border-strong); border-radius: 2px;
  cursor: pointer; position: relative; background: var(--nk-bg); display: block;
}
.nk-block-host .ProseMirror ul[data-type="taskList"] input[type="checkbox"]:checked { background: var(--nk-accent); border-color: var(--nk-accent); }
.nk-block-host .ProseMirror ul[data-type="taskList"] input[type="checkbox"]:checked::after {
  content: "✓"; color: var(--nk-on-accent); font-size: 11px;
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
.nk-block-host .ProseMirror li[data-checked="true"] > div { text-decoration: line-through; color: var(--nk-text-tertiary); }
.nk-block-host .ProseMirror-gapcursor::after { border-top-color: var(--nk-text); }
.nk-block-host .ProseMirror .ProseMirror-selectednode { background: color-mix(in srgb, var(--nk-accent) 8%, transparent); }
.nk-block-host .ProseMirror blockquote {
  border-left: 3px solid var(--nk-text); padding: 2px 0 2px 14px;
  margin: 12px 0; color: var(--nk-text-secondary);
}
.nk-block-host .ProseMirror code {
  font-family: var(--nk-font-mono); font-size: 85%;
  color: var(--nk-danger); background: color-mix(in srgb, var(--nk-danger) 8%, transparent);
  border-radius: 4px; padding: 1px 5px;
}
.nk-block-host .ProseMirror pre {
  background: var(--nk-bg-code); border: 1px solid var(--nk-border);
  border-radius: var(--nk-radius); padding: 16px 20px; margin: 12px 0;
  font-family: var(--nk-font-mono); font-size: 13px; line-height: 1.6;
  color: var(--nk-text-secondary); overflow-x: auto;
}
.nk-block-host .ProseMirror pre code { background: none; color: inherit; padding: 0; font-size: inherit; }
.nk-block-host .ProseMirror hr { border: none; border-top: 1px solid var(--nk-border); margin: 20px 0; }
.nk-block-host .ProseMirror a { color: var(--nk-accent); text-decoration: underline; text-underline-offset: 2px; }
.nk-block-host .ProseMirror-selectednode { box-shadow: 0 0 0 2px color-mix(in srgb, var(--nk-accent) 35%, transparent); border-radius: 3px; }
.nk-block-host .ProseMirror ::selection { background: color-mix(in srgb, var(--nk-accent) 25%, transparent); }
/* Placeholder — TipTap's Placeholder extension emits these classes. */
.nk-block-host .ProseMirror p.is-editor-empty:first-child::before,
.nk-block-host .ProseMirror .is-empty::before {
  content: attr(data-placeholder);
  color: var(--nk-text-tertiary);
  float: left; height: 0; pointer-events: none;
}

/* ---- BlockNote (React path) ---- */
.nk-block-host .bn-container { font-family: var(--nk-font); color: var(--nk-text); background: transparent; }
.nk-block-host .bn-editor { padding: 4px 2px; }
.nk-block-host .bn-block-content { font-size: 14px; line-height: 1.6; }
.nk-block-host .bn-side-menu { color: var(--nk-text-tertiary); }
.nk-block-host .bn-drag-handle { border-radius: 4px; }
.nk-block-host .bn-drag-handle:hover { background: var(--nk-bg-hover); }

/* ---- Novel (Next.js path; ProseMirror-based) ---- */
.nk-block-host .novel-editor { font-family: var(--nk-font); color: var(--nk-text); }
.nk-block-host .novel-prose { max-width: none; }

/* ---- Slash menu & bubble toolbar, mapped onto nk-pop optics ----
   Give the editor's floating containers these classes (TipTap:
   the element you render the suggestion list into; BlockNote:
   `.bn-suggestion-menu`) to inherit the NotionKit popover look. */
.nk-slash-menu,
.nk-block-host .bn-suggestion-menu,
.nk-block-host .tippy-box {
  background: var(--nk-bg); border-radius: 10px; box-shadow: var(--nk-shadow-menu);
  padding: 6px; width: 280px; max-height: 320px; overflow-y: auto;
  font-family: var(--nk-font); font-size: 13.5px; color: var(--nk-text);
}
.nk-slash-menu-label { font-size: 11px; color: var(--nk-text-tertiary); padding: 6px 9px 2px; }
.nk-slash-item {
  display: flex; align-items: center; gap: 10px; padding: 6px 9px;
  border-radius: 5px; cursor: pointer; user-select: none;
}
.nk-slash-item:hover,
.nk-slash-item.selected { background: var(--nk-bg-hover); }
.nk-slash-item .m-icon,
.nk-slash-item ::slotted(.m-icon) {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 4px;
  background: var(--nk-bg-callout); border: 1px solid var(--nk-border);
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.nk-slash-item .m-desc { font-size: 11.5px; color: var(--nk-text-tertiary); }

/* Bubble toolbar: a horizontal nk-pop. */
.nk-bubble-menu {
  display: flex; align-items: center; gap: 2px;
  background: var(--nk-bg); border-radius: 8px; box-shadow: var(--nk-shadow-menu);
  padding: 4px;
}
.nk-bubble-menu button,
.nk-bubble-menu ::slotted(button) {
  font-family: inherit; font-size: 13px; border: none; background: transparent;
  color: var(--nk-text-secondary); padding: 4px 8px; border-radius: 5px; cursor: pointer;
}
.nk-bubble-menu button:hover { background: var(--nk-bg-hover); color: var(--nk-text); }
.nk-bubble-menu button.active { color: var(--nk-accent); }


/* ============================================================
   B12. RESPONSIVE  (PRD 6.3a)

   Exactly one breakpoint. Everything else is fluid: max-width plus
   auto margins for the page column, min-width on the sidebar,
   overflow-x on tables and boards, auto-fit grids in the gallery.
   ============================================================ */
@media (max-width: 860px) {
  .nk-sidebar { display: none; }
  .nk-page { padding: 0 24px 80px; }
  .nk-settings-nav { width: 60px; min-width: 60px; }
  .nk-settings-nav .label,
  .nk-settings-nav .nk-section-label,
  .nk-settings-user .u-text { display: none; }
  .nk-settings-content { padding: 24px; }
  .nk-cmdk-backdrop { padding-top: 6vh; }
  .nk-cmdk { width: min(560px, 96vw); }
  .nk-stats { flex-wrap: wrap; }
}


/* ============================================================
   B13. REDUCED MOTION

   Respects the OS setting: the skeleton shimmer stops, every
   transition and animation collapses to an instant state change.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .nk-skeleton { animation: none; background: var(--nk-bg-callout); }
  [class*="nk-"],
  [class*="nk-"]::before,
  [class*="nk-"]::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}