/* ============================================================
   NIKA DESIGN SYSTEM — THE component layer · 2026-09-07
   MARKER: NKSYSTEM-20260907-MARKER  ([T] RULED: "Generate the full
   stylesheets for both sites, with allowances for variations.")

   ONE vocabulary above nika-tokens.css. Every surface — public, account,
   admin, chat — consumes THIS. Legacy dialects (.button-*, .nk-table,
   .card) are ALIASED here so existing templates keep rendering while all
   NEW work speaks canon. Stock Tailwind stays BANNED; this is Tracy's
   simplified system: minimal, hand-rolled, token-fed.

   LAWS ENCODED (do not fight them in page CSS):
     L1  No inline styles. A new need = a new class HERE.
     L2  PRIMARY BUTTONS NEVER IN TABLES ([T] 0907): any .nk-btn inside a
         table auto-compacts to the quiet table-action size; hierarchy is
         preserved by the sheet, not by discipline.
     L3  Cerise = CTAs of consequence / the paid boundary ONLY. Azure-deep
         is the default action colour. Gold = credits/premium accents.
     L4  Nav links are never underlined; body links always are.
     L5  --nk-wash is app-section-only: never a page canvas, never on
         customer-account or business-site surfaces.
     L6  One shell. Layout comes from .nk-app / .nk-rail / .nk-main below —
         pages never invent their own frame.
   ============================================================ */

/* ---------- 0 · BASE + TYPE SCALE ---------------------------------- */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
body.nk {
  margin: 0; background: var(--nk-bg, #faf9f5); color: var(--nk-ink);  /* LANDFIX1 */
  font-family: var(--nk-sans); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.nk-h1, .nk-h2, .nk-h3 { font-family: var(--nk-serif); color: var(--nk-ink); margin: 0 0 .45em; line-height: 1.18; font-weight: 600; }
.nk-h1 { font-size: 34px; }
.nk-h2 { font-size: 24px; }
.nk-h3 { font-size: 18px; }
.nk-lead  { font-size: 17px; color: var(--nk-ink-soft); }
.nk-small { font-size: 13px; }
.nk-micro { font-size: 12px; }
.nk-muted { color: var(--nk-muted); }
.nk-serif { font-family: var(--nk-serif); }
p a, .nk-prose a, .nk-link { color: var(--nk-azure-deep); text-decoration: underline; text-underline-offset: 2px; } /* L4 body links */
p a:hover, .nk-prose a:hover, .nk-link:hover { color: var(--nk-cerise-deep); }

/* ---------- 1 · SPACING UTILITIES (the only utilities we allow) ---- */
.nk-mt-0{margin-top:0}.nk-mt-1{margin-top:6px}.nk-mt-2{margin-top:12px}.nk-mt-3{margin-top:20px}.nk-mt-4{margin-top:32px}
.nk-mb-1{margin-bottom:6px}.nk-mb-2{margin-bottom:12px}.nk-mb-3{margin-bottom:20px}.nk-mb-4{margin-bottom:32px}
.nk-gap-1{gap:6px}.nk-gap-2{gap:12px}.nk-gap-3{gap:20px}
.nk-row{display:flex;align-items:center}.nk-col{display:flex;flex-direction:column}
.nk-wrap{flex-wrap:wrap}.nk-between{justify-content:space-between}.nk-center{justify-content:center}
.nk-right{margin-left:auto}
.nk-hide{display:none !important}

/* ---------- 2 · THE SHELL (L6 — one frame for every page) ---------- */
.nk-app { display: grid; grid-template-columns: var(--nk-sidebar-w) minmax(0,1fr); min-height: 100vh; }
.nk-rail {
  background: var(--nk-white); border-right: 1px solid var(--nk-line);
  padding: 14px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column;
  /* significance: quiet furniture, never a focal shadow ([T] 0906 note) */
  box-shadow: none;
}
.nk-main { min-width: 0; padding: 28px clamp(16px, 4vw, 48px); }
.nk-app.rail-collapsed { grid-template-columns: 0 minmax(0,1fr); }
.nk-app.rail-collapsed .nk-rail { display: none; }
/* responsive: tablet = collapsible overlay rail; mobile = hidden + toggle */
@media (max-width: 1024px) {
  .nk-app { grid-template-columns: minmax(0,1fr); }
  .nk-rail { position: fixed; left: 0; top: 0; z-index: 90; width: var(--nk-sidebar-w);
             transform: translateX(-100%); transition: transform .18s ease;
             box-shadow: 0 0 0 100vmax rgba(20,20,19,.28); }
  .nk-rail.open { transform: translateX(0); }
  .nk-main { padding: 20px 16px; }
}
.nk-rail-toggle {
  display: none; position: fixed; left: 12px; top: 12px; z-index: 95;
  width: 38px; height: 38px; border-radius: var(--nk-radius-sm);
  border: 1px solid var(--nk-line); background: var(--nk-white); cursor: pointer;
}
@media (max-width: 1024px) { .nk-rail-toggle { display: inline-flex; align-items: center; justify-content: center; } }

/* ---------- 3 · NAV (main rail + account rail share this) ---------- */
.nk-nav { display: flex; flex-direction: column; gap: 2px; }
.nk-nav-group {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--nk-muted-soft); margin: 14px 8px 6px; font-weight: 600;
}
.nk-nav a, .nk-nav-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: var(--nk-radius-sm); color: var(--nk-ink-soft);
  text-decoration: none !important;   /* L4: nav never underlines */
  font-size: 14px; line-height: 1.2;
}
.nk-nav a:hover { background: var(--nk-cream-2); color: var(--nk-ink); }
.nk-nav a.is-active { background: var(--nk-azure-soft); color: var(--nk-azure-deep); font-weight: 600; }
.nk-nav-ic { flex: 0 0 auto; width: 16px; height: 16px; stroke-width: 1.8; }
.nk-nav a.is-active .nk-nav-ic { color: var(--nk-azure-deep); }
.nk-rail-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--nk-line); }
.nk-rail-foot .who { font-size: 13px; color: var(--nk-ink-soft); margin-bottom: 2px; }
.nk-rail-foot .plan { font-size: 12px; color: var(--nk-muted); margin-bottom: 10px; }

/* ---------- 4 · BUTTONS (canon: .nk-btn family) --------------------- */
.nk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--nk-sans); font-size: 14px; font-weight: 600; line-height: 1;
  padding: 10px 18px; border-radius: var(--nk-radius-sm);
  border: 1px solid transparent; cursor: pointer;
  text-decoration: none !important; white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.nk-btn:disabled { opacity: .55; cursor: default; }
.nk-btn--primary { background: var(--nk-azure); color: var(--nk-white); }  /* LANDRHS2-20260910-MARKER: [T] RULED softer primary */
.nk-btn--primary:hover { background: var(--nk-azure-deep); }  /* LANDRHS2-20260910-MARKER */
.nk-btn--cta { background: var(--nk-cerise); color: var(--nk-white); }         /* L3: paid boundary only */
.nk-btn--cta:hover { background: var(--nk-cerise-deep); }
.nk-btn--secondary { background: var(--nk-white); color: var(--nk-azure-deep); border-color: var(--nk-azure-tint); }
.nk-btn--secondary:hover { border-color: var(--nk-azure-deep); }
.nk-btn--ghost { background: transparent; color: var(--nk-ink-soft); border-color: var(--nk-line); }
.nk-btn--ghost:hover { background: var(--nk-cream-2); color: var(--nk-ink); }
.nk-btn--danger { background: var(--nk-white); color: var(--nk-err); border-color: rgba(178,67,63,.35); }
.nk-btn--danger:hover { background: rgba(178,67,63,.07); }
.nk-btn--sm { padding: 6px 12px; font-size: 13px; }
.nk-btn--block { width: 100%; }
/* L2 — [T] 0907: ANY button inside a table compacts; primaries demote visually */
table .nk-btn, .data-table .nk-btn, .nk-table .nk-btn,
table .button-primary, .data-table .button-primary,
table .button-ghost, .data-table .button-ghost {
  padding: 5px 10px; font-size: 12.5px; font-weight: 500;
  background: var(--nk-white); color: var(--nk-azure-deep);
  border: 1px solid var(--nk-azure-tint); border-radius: 8px;
}
table .nk-btn:hover, .data-table .nk-btn:hover { border-color: var(--nk-azure-deep); background: var(--nk-azure-soft); }
table .nk-btn--danger, .data-table .nk-btn--danger { color: var(--nk-err); border-color: rgba(178,67,63,.35); }
/* legacy aliases → canon look (templates unchanged, drift healed) */
.button-primary, .btn-primary { display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:600;line-height:1;padding:10px 18px;border-radius:var(--nk-radius-sm);border:1px solid transparent;cursor:pointer;text-decoration:none !important;background:var(--nk-azure-deep);color:var(--nk-white); }
.button-primary:hover { background:#16405f; }
.button-ghost, .nk-btn-outline { display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:600;line-height:1;padding:10px 18px;border-radius:var(--nk-radius-sm);cursor:pointer;text-decoration:none !important;background:transparent;color:var(--nk-ink-soft);border:1px solid var(--nk-line); }
.button-ghost:hover, .nk-btn-outline:hover { background:var(--nk-cream-2);color:var(--nk-ink); }
.chat-cta { display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;padding:8px 14px;border-radius:999px;border:1px solid var(--nk-azure-tint);background:var(--nk-white);color:var(--nk-azure-deep);cursor:pointer;text-decoration:none !important; }
.chat-cta:hover { background:var(--nk-azure-soft); }

/* ---------- 5 · CARDS + SECTIONS ------------------------------------ */
.nk-card, .card {
  background: var(--nk-card); border: 1px solid var(--nk-line);
  border-radius: var(--nk-radius); padding: 20px 22px; box-shadow: var(--nk-shadow-sm);
}
.nk-card--flat { box-shadow: none; }
.nk-card--wash { background: var(--nk-wash); }   /* L5: app sections only */
.nk-section { margin-bottom: 32px; }
.nk-section > .nk-h2, .nk-section > .nk-h3 { margin-bottom: 14px; }
.nk-divider { border: 0; border-top: 1px solid var(--nk-line); margin: 24px 0; }

/* ---------- 6 · TABLES ---------------------------------------------- */
.data-table, .nk-table { width: 100%; border-collapse: collapse; font-size: 13.5px; background: var(--nk-white); }
.data-table th, .nk-table th {
  text-align: left; font-weight: 600; font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--nk-muted); padding: 10px 12px;
  border-bottom: 1px solid var(--nk-line); background: var(--nk-cream-2);
}
.data-table td, .nk-table td { padding: 10px 12px; border-bottom: 1px solid var(--nk-border-soft); vertical-align: middle; }
.data-table tr:hover td, .nk-table tr:hover td { background: var(--nk-cream); }
.table-wrap { overflow-x: auto; border: 1px solid var(--nk-line); border-radius: var(--nk-radius-sm); }
.table-wrap .data-table, .table-wrap .nk-table { border: 0; }
.nk-td-actions { text-align: right; white-space: nowrap; }

/* ---------- 7 · FORMS ------------------------------------------------ */
.nk-field { display: block; margin-bottom: 14px; }
.nk-field > label, .nk-label { display: block; font-size: 13px; font-weight: 600; color: var(--nk-ink-soft); margin-bottom: 5px; }
.nk-input, .nk-field input[type=text], .nk-field input[type=email], .nk-field input[type=password],
.nk-field input[type=number], .nk-field select, .nk-field textarea {
  width: 100%; font: inherit; font-size: 14px; color: var(--nk-ink);
  background: var(--nk-white); border: 1px solid var(--nk-line);
  border-radius: var(--nk-radius-sm); padding: 9px 12px; outline: none;
}
.nk-input:focus, .nk-field input:focus, .nk-field select:focus, .nk-field textarea:focus {
  border-color: var(--nk-azure); box-shadow: 0 0 0 3px var(--nk-azure-soft);
}
.nk-help { font-size: 12px; color: var(--nk-muted); margin-top: 4px; }
.nk-error-text { font-size: 12.5px; color: var(--nk-err); margin-top: 4px; }

/* ---------- 8 · BADGES · PILLS · STATUS ------------------------------ */
.nk-chip, .nk-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; line-height: 1;
  padding: 5px 10px; border-radius: 999px;
  background: var(--nk-cream-2); color: var(--nk-ink-soft); border: 1px solid var(--nk-line);
}
.nk-badge--live   { background: var(--nk-azure-soft); color: var(--nk-azure-deep); border-color: var(--nk-azure-tint); }
.nk-badge--ok     { background: rgba(63,125,82,.10);  color: var(--nk-ok);   border-color: rgba(63,125,82,.25); }
.nk-badge--warn   { background: rgba(147,100,18,.10); color: var(--nk-warn); border-color: rgba(147,100,18,.25); }
.nk-badge--err    { background: rgba(178,67,63,.08);  color: var(--nk-err);  border-color: rgba(178,67,63,.25); }
.nk-badge--credit { background: rgba(240,201,135,.18);color: #7a5a14;        border-color: rgba(240,201,135,.6); }
.nk-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }     /* chats/tasks colour-coding */
.nk-dot--chat { background: var(--nk-azure); }
.nk-dot--task { background: var(--nk-gold); }
.nk-dot--report { background: var(--nk-cerise); }

/* ---------- 9 · TOAST · BRIDGE · NOTE -------------------------------- */
.nk-toast {
  position: fixed; bottom: 86px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px; align-items: center; z-index: 60;
  background: var(--nk-card); border: 1px solid var(--nk-line);
  border-radius: var(--nk-radius-sm); padding: 8px 14px;
  font-size: 13px; box-shadow: var(--nk-shadow-sm);
}
.nk-toast a { color: var(--nk-azure-deep); }
.nk-toast .nk-toast-x { border: 0; background: none; cursor: pointer; font-size: 14px; color: var(--nk-muted-soft); padding: 0 2px; }
.nk-inline-note { font-size: 12px; margin-top: 6px; color: var(--nk-muted); }
.nk-note { font-size: 13px; background: var(--nk-cream-2); border: 1px solid var(--nk-line); border-radius: var(--nk-radius-sm); padding: 10px 14px; color: var(--nk-ink-soft); }

/* ---------- 10 · MODAL (real modals, never browser prompts) ---------- */
.nk-modal-overlay {
  position: fixed; inset: 0; z-index: 120; background: rgba(20,20,19,.38);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.nk-modal {
  background: var(--nk-white); border-radius: var(--nk-radius);
  border: 1px solid var(--nk-line); box-shadow: 0 10px 40px rgba(20,20,19,.18);
  width: 100%; max-width: 440px; padding: 22px 24px;
}
.nk-modal .nk-h3 { margin-bottom: 12px; }
.nk-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* ---------- 11 · VARIATION ALLOWANCES ([T]: room to breathe) --------- */
/* Accent switch: a surface may declare ONE accent context; components
   inside inherit it. This is THE sanctioned variation mechanism —
   never new colours, never new components. */
.nk-accent-azure  { --nk-accent: var(--nk-azure-deep); --nk-accent-soft: var(--nk-azure-soft); }
.nk-accent-cerise { --nk-accent: var(--nk-cerise);     --nk-accent-soft: rgba(193,76,120,.10); } /* paid surfaces */
.nk-accent-gold   { --nk-accent: #7a5a14;              --nk-accent-soft: rgba(240,201,135,.18); } /* credits */
.nk-accent-azure .nk-btn--primary { background: var(--nk-accent); }
[class*="nk-accent-"] .nk-nav a.is-active { background: var(--nk-accent-soft); color: var(--nk-accent); }
/* Density variant for admin data screens */
.nk-dense { font-size: 13px; }
.nk-dense .data-table th, .nk-dense .data-table td { padding: 6px 9px; }
.nk-dense .nk-card { padding: 14px 16px; }

/* ---------- 12 · ADMIN CONSISTENCY (same page, same rules) ----------- */
.nk-admin .nk-h2 { font-size: 20px; }
.nk-admin .nk-section { margin-bottom: 24px; }
.nk-admin .nk-card + .nk-card { margin-top: 16px; }
/* admin forms sit in cards; free-floating admin forms adopt card frame */
.nk-admin form:not(.nk-bare):not(.nk-card form) { background: var(--nk-card); border: 1px solid var(--nk-line); border-radius: var(--nk-radius-sm); padding: 16px 18px; }

/* ============================================================
   0907b EXPANSION — [T] RULED: comprehensive states, messaging
   family, logo canon, four breakpoints.
   ============================================================ */

/* ---------- 13 · INTERACTION STATES (every interactive element) ------ */
/* Focus: ONE visible ring standard, keyboard-friendly, everywhere. */
.nk-btn:focus-visible, .nk-nav a:focus-visible, .nk-link:focus-visible,
.nk-input:focus-visible, .nk-field input:focus-visible, .nk-field select:focus-visible,
.nk-field textarea:focus-visible, .chat-cta:focus-visible, .nk-toggle:focus-visible,
.button-primary:focus-visible, .button-ghost:focus-visible, .nk-pill:focus-visible {
  outline: 2px solid var(--nk-azure); outline-offset: 2px; box-shadow: none;
}
/* Active (pressed) states */
.nk-btn:active { transform: translateY(1px); }
.nk-btn--primary:active { background: var(--nk-azure-deep); filter: brightness(.92); }
.nk-btn--cta:active { background: var(--nk-cerise-deep); }
.nk-btn--secondary:active, .nk-btn--ghost:active { background: var(--nk-azure-soft); }
.nk-nav a:active { background: var(--nk-azure-tint); }
/* Visited stays quiet (product UI, not documents) */
.nk-nav a:visited { color: var(--nk-ink-soft); }
.nk-nav a.is-active:visited { color: var(--nk-azure-deep); }

/* ---------- 14 · LOGO CANON ([T] 0907: sizing is LAW, not layout) ---- */
/* One logo class, context-sized. Never freehand width/height in templates;
   never ALT-text taglines (alt="Nika" only). */
.nk-logo { display: inline-flex; align-items: center; text-decoration: none !important; }
.nk-logo img, .nk-logo svg { display: block; height: var(--nk-logo-h, 28px); width: auto; }
.nk-rail .nk-logo   { --nk-logo-h: 28px; margin: 2px 8px 10px; }
.nk-main .nk-logo   { --nk-logo-h: 32px; }        /* page-head usage */
.site-web .nk-logo  { --nk-logo-h: 34px; }
.site-www .nk-logo  { --nk-logo-h: 40px; }
.nk-share-page .nk-logo { --nk-logo-h: 26px; }    /* share/unlock surfaces */
@media (max-width: 639px) { .nk-logo { --nk-logo-h: 24px; } }
.nk-logo .nk-tagline { font-size: 12.5px; color: var(--nk-muted); margin-left: 10px; }
/* tagline renders ONLY when [T] adds .nk-tagline explicitly — never from alt */

/* ---------- 15 · MESSAGING FAMILY (complete) ------------------------- */
/* Page-level ALERTS (persistent, in-flow) */
.nk-alert { display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid var(--nk-line); border-radius: var(--nk-radius-sm);
  padding: 12px 14px; font-size: 13.5px; background: var(--nk-card); color: var(--nk-ink-soft); }
.nk-alert--info { border-color: var(--nk-azure-tint); background: var(--nk-azure-soft); color: var(--nk-azure-deep); }
.nk-alert--ok   { border-color: rgba(63,125,82,.3);  background: rgba(63,125,82,.07);  color: var(--nk-ok); }
.nk-alert--warn { border-color: rgba(147,100,18,.3); background: rgba(147,100,18,.07); color: var(--nk-warn); }
.nk-alert--err  { border-color: rgba(178,67,63,.3);  background: rgba(178,67,63,.06);  color: var(--nk-err); }
.nk-alert .nk-alert-title { font-weight: 700; margin-right: 4px; }
/* NOTIFICATION rows (lists: account alerts, admin feeds) */
.nk-notif { display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 4px; border-bottom: 1px solid var(--nk-border-soft); font-size: 13.5px; }
.nk-notif:last-child { border-bottom: 0; }
.nk-notif .when { flex: 0 0 auto; font-size: 12px; color: var(--nk-muted-soft); min-width: 84px; }
.nk-notif.is-unread { background: var(--nk-azure-soft); border-radius: var(--nk-radius-sm); padding-left: 10px; padding-right: 10px; }
.nk-notif .nk-dot { margin-top: 5px; }
/* NUDGE (inline gentle suggestion; distinct from the floating .nk-toast bridge) */
.nk-nudge { display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--nk-muted); background: var(--nk-cream-2);
  border: 1px dashed var(--nk-line); border-radius: 999px; padding: 6px 12px; }
.nk-nudge a { color: var(--nk-azure-deep); }
/* PILLS (selectable/toggle chips — filters, effort dial, language) */
.nk-pill { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; line-height: 1; padding: 6px 12px;
  border-radius: 999px; border: 1px solid var(--nk-line);
  background: var(--nk-white); color: var(--nk-ink-soft);
  text-decoration: none !important; transition: all .12s ease; }
.nk-pill:hover { border-color: var(--nk-azure-tint); background: var(--nk-azure-soft); }
.nk-pill:active { background: var(--nk-azure-tint); }
.nk-pill.is-on { background: var(--nk-azure-deep); border-color: var(--nk-azure-deep); color: var(--nk-white); }
.nk-pill.is-on:hover { background: #16405f; }
.nk-pill--credit.is-on { background: #7a5a14; border-color: #7a5a14; }
.nk-pill-group { display: inline-flex; gap: 6px; flex-wrap: wrap; }
/* TOAST variants (the floating bridge family) */
.nk-toast--ok   { border-color: rgba(63,125,82,.35); }
.nk-toast--warn { border-color: rgba(147,100,18,.35); }
.nk-toast--err  { border-color: rgba(178,67,63,.4); }

/* ---------- 16 · FOUR BREAKPOINTS (canon tiers) ---------------------- */
/* desktop ≥1440 · laptop 1025–1439 · tablet 640–1024 · mobile <640
   (tablet/mobile rail behavior already in §2; these tune rhythm+type) */
@media (min-width: 1440px) {                       /* desktop: room to breathe */
  .nk-main { padding: 36px clamp(32px, 5vw, 72px); }
  .nk-h1 { font-size: 38px; }
}
@media (min-width: 1025px) and (max-width: 1439px) {  /* laptop: default rhythm */
  .nk-main { padding: 28px 32px; }
}
@media (min-width: 640px) and (max-width: 1024px) {   /* tablet */
  .nk-h1 { font-size: 30px; } .nk-h2 { font-size: 21px; }
  .nk-card, .card { padding: 16px 18px; }
}
@media (max-width: 639px) {                            /* mobile */
  .nk-h1 { font-size: 26px; } .nk-h2 { font-size: 19px; }
  .nk-main { padding: 16px 12px; }
  .nk-card, .card { padding: 14px 14px; border-radius: var(--nk-radius-sm); }
  .nk-btn { padding: 11px 16px; }                 /* touch targets */
  .nk-btn--block-mobile { width: 100%; }
  .nk-modal { max-width: 100%; }
  .nk-toast { left: 12px; right: 12px; transform: none; bottom: 72px; }
  .table-wrap { border-radius: 8px; }
  .nk-td-actions { white-space: normal; }
  .nk-row--stack-mobile { flex-direction: column; align-items: stretch; }
}

/* ---------- 17 · MOTION ([T] 0907: "the pages are dead") ------------- */
/* Doctrine: motion confirms, never performs. 120–220ms, one easing,
   subtle distances. Respect reduced-motion always. */
:root { --nk-ease: cubic-bezier(.2,.7,.3,1); --nk-t-fast: .14s; --nk-t: .2s; --nk-t-slow: .32s; }

/* Page enter: main content breathes in on every load */
.nk-main { animation: nk-enter var(--nk-t-slow) var(--nk-ease) both; }
@keyframes nk-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Staggered section reveal (add .nk-reveal to sections/cards you want cascaded) */
.nk-reveal { animation: nk-enter var(--nk-t-slow) var(--nk-ease) both; }
.nk-reveal:nth-child(2) { animation-delay: .06s; }
.nk-reveal:nth-child(3) { animation-delay: .12s; }
.nk-reveal:nth-child(4) { animation-delay: .18s; }
.nk-reveal:nth-child(n+5) { animation-delay: .24s; }

/* Cards: quiet lift on hover (interactive cards only — add .is-link) */
.nk-card, .card { transition: box-shadow var(--nk-t) var(--nk-ease), transform var(--nk-t) var(--nk-ease), border-color var(--nk-t) var(--nk-ease); }
.nk-card.is-link:hover, .card.is-link:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(20,20,19,.09); border-color: var(--nk-azure-tint); }

/* Nav: icon nudge + smooth active */
.nk-nav a { transition: background var(--nk-t-fast) var(--nk-ease), color var(--nk-t-fast) var(--nk-ease); }
.nk-nav a .nk-nav-ic { transition: transform var(--nk-t-fast) var(--nk-ease); }
.nk-nav a:hover .nk-nav-ic { transform: translateX(1px) scale(1.06); }

/* Buttons already transition (§4); add cta pulse-once for paid boundary emphasis */
.nk-btn--cta.nk-pulse { animation: nk-pulse 1.6s var(--nk-ease) 1 .6s; }
@keyframes nk-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(193,76,120,.0); } 40% { box-shadow: 0 0 0 6px rgba(193,76,120,.18); } }

/* Toast + nudge: slide up in, fade out */
.nk-toast { animation: nk-toast-in var(--nk-t) var(--nk-ease) both; }
@keyframes nk-toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.nk-toast.is-leaving { animation: nk-toast-out var(--nk-t) var(--nk-ease) both; }
@keyframes nk-toast-out { to { opacity: 0; transform: translate(-50%, 6px); } }
@media (max-width: 639px) {
  @keyframes nk-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @keyframes nk-toast-out { to { opacity: 0; transform: translateY(6px); } }
}

/* Modal: overlay fade + dialog settle */
.nk-modal-overlay { animation: nk-fade var(--nk-t-fast) ease both; }
.nk-modal { animation: nk-settle var(--nk-t) var(--nk-ease) both; }
@keyframes nk-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nk-settle { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }

/* Alerts/notifs: gentle arrival; unread pulse-once */
.nk-alert, .nk-notif { animation: nk-enter var(--nk-t) var(--nk-ease) both; }
.nk-notif.is-unread .nk-dot { animation: nk-dot-pop .5s var(--nk-ease) 1; }
@keyframes nk-dot-pop { 0% { transform: scale(.4); } 70% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* Loading: skeleton shimmer + typing dots (chat) */
.nk-skeleton { position: relative; overflow: hidden; background: var(--nk-cream-2); border-radius: var(--nk-radius-sm); min-height: 14px; }
.nk-skeleton::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  transform: translateX(-100%); animation: nk-shimmer 1.4s infinite; }
@keyframes nk-shimmer { to { transform: translateX(100%); } }
.nk-typing span { display: inline-block; width: 6px; height: 6px; margin-right: 4px;
  border-radius: 50%; background: var(--nk-muted-soft); animation: nk-bounce 1.1s infinite var(--nk-ease); }
.nk-typing span:nth-child(2) { animation-delay: .15s; }
.nk-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes nk-bounce { 0%,60%,100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* Meters/progress fill glide */
.nk-track { transition: width var(--nk-t-slow) var(--nk-ease); }

/* ACCESSIBILITY: reduced motion kills it all, everywhere */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- 18 · RAIL LINK CATCH-ALL (WIRE2 0907) -------------------- */
/* Every rail/nav container obeys L4 regardless of markup era. */
.nk-side a, .nk-rail a, .nk-set-nav a, nav a {
  text-decoration: none !important;
}
.nk-side a:hover, .nk-set-nav a:hover { text-decoration: none !important; }
/* WIRE2b: ST1-partial classes (nk-cs-* rail items) obey L4 + hover idiom */
a.nk-cs-item, .nk-cs-item a, .nk-cs-group a, .nk-group a, a.nk-label, .nk-collapse a {
  text-decoration: none !important;
}
a.nk-cs-item:hover, .nk-cs-item a:hover { text-decoration: none !important; }

/* ============================================================
   SHELL1-20260907-MARKER -- SHELL-1 additions. Each class = a NAMED gap
   (style guide law: a new need = a new class HERE, documented).
   ============================================================ */
/* GAP 1 (L10, [T] 0907): light page header for the product-family pages.
   Replaces the heavy front.css .nk-hero band (the named anti-pattern):
   .nk-h1 + .nk-lead + air, comfortable measure, air above AND below. */
.nk-page-intro { max-width: 720px; margin: 0 auto 28px; padding: 26px 16px 4px; text-align: center; }
.nk-page-intro .nk-h1 { margin-bottom: .4em; }
.nk-page-intro .nk-h1 .accent { color: var(--nk-azure-deep); font-style: italic; }
.nk-page-intro .nk-lead { max-width: 620px; margin: 0 auto 10px; }
/* GAP 2 (L1, [T] v3 #7): the chat/landing rail-foot Log out control --
   a form-wrapped button riding the .nk-cs-item idiom needs its resets. */
.nk-cs-logout { margin: 0; }
.nk-cs-logout .nk-cs-item { border: 0; background: none; font: inherit; width: 100%; text-align: left; cursor: pointer; }

/* GAP 3 (CARD1 0908, [T]: "consistent across the site, using the stylesheet,
   no exceptions"): ONE tile canon -- /products + /skills + any future gallery
   share ONE card dialect. Rhythm = the /products card [T] preferred
   (22px pad, 18px gap, 1040 measure). The page <style> dialects are DELETED. */
.nk-tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px; max-width: 1040px; margin: 0 auto; padding: 0 16px 40px; }
.nk-tile { display: flex; flex-direction: column; gap: 10px; padding: 22px; }
.nk-tile .nk-h3 { margin: 0; }
.nk-tile p { margin: 0; }
.nk-tile-quote { color: var(--nk-muted); font-style: italic;
  border-left: 3px solid var(--nk-azure-tint); padding-left: 10px; }
.nk-tile .nk-tile-note { font-size: 13px; color: var(--nk-muted); margin-top: auto; }
.nk-tile-cta { align-self: flex-start; }
/* GAP 4 (CARD1 0908, [T]: "monthly should always be prominent -- this is what
   users view in their budget"): annual cards keep the /year figure, the
   monthly-equivalent line is the PROMINENT one, savings ride the credit badge. */
.nk-price-month { font-size: 17px; font-weight: 600; color: var(--nk-ink); margin: 2px 0 0; }

/* GAP 5 (CARD2b 0908, [T] RULED: in-tile "Learn more" = no underline, keeps
   the arrow, must acknowledge action on hover). Named L4 exception: a
   .nk-tile-note link is tile navigation, not prose. */
.nk-tile-note a { text-decoration: none; color: var(--nk-azure-deep); display: inline-block;
  transition: color var(--nk-t-fast) var(--nk-ease), transform var(--nk-t-fast) var(--nk-ease); }
.nk-tile-note a:hover { color: var(--nk-cerise-deep); transform: translateX(3px); }

/* ============================================================
   NAVREV1-P2ST4-20260908-MARKER -- ST4 landing additions (spec section 3).
   Style-guide law: a new need = a new class HERE, never inline.
   ============================================================ */
/* GAP 6a ([T] ST4): /chat welcome parity -- the SAME bounded shadow bubble
   the "/" composer card uses. */
.nk-welcome-bubble { background: var(--nk-card, #FCFCFB); border: 1px solid var(--nk-border, rgba(20,20,19,.10));
  border-radius: 24px; box-shadow: 0 24px 50px -28px rgba(20,20,19,.3);
  padding: 26px 34px; max-width: 680px; width: 100%; box-sizing: border-box; margin: 0 auto; }
/* GAP 6b ([T] ST4): the ONE line below "How can I help you" -- language pill
   + thumbs (tight pair, landing-state only) + share-this-thread. */
.nk-below-row { display: flex; align-items: center; justify-content: center; gap: 14px;
  flex-wrap: wrap; margin-top: 10px; font-size: 13px; }
.nk-below-row .nk-thumbs { display: none; gap: 4px; }
.chat-surface:has(#nk-landing) .nk-below-row .nk-thumbs { display: inline-flex; }
.nk-below-row #evidencebar { margin: 0; max-width: none; display: inline-flex; }
.nk-lang-wrap { display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
  color: var(--nk-azure-deep, #1b4e75); background: var(--nk-azure-soft, #e9f1f5);
  padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.nk-lang-wrap select { border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; max-width: 160px; }
/* GAP 6c ([T] RULED footer lines): the app landing footer. */
.nk-app-foot { margin-top: 56px; padding: 22px 16px 8px; border-top: 1px solid var(--nk-border-soft, rgba(20,20,19,.07));
  text-align: center; font-size: 13px; color: var(--nk-muted, #6b665e); }
.nk-app-foot p { margin: 4px 0; }
.nk-app-foot-tag { color: var(--nk-ink-soft, #46423b); font-weight: 600; }

/* ============================================================
   STYLEDEMO-20260909-MARKER -- GAP 7: style-guide furniture ([T] WISH 0909:
   the style guide as a LIVE demo page, every choice labeled with its
   class, colours clear but changeable). These classes exist ONLY to
   frame + label specimens on /admin/styleguide -- they never restyle
   a component. The .nk-swatch--* faces render THROUGH the live
   tokens: change a token in nika-tokens.css and every swatch (and
   the whole platform) follows. L1-compliant: the new need got its
   new classes HERE, never inline.
   ============================================================ */
.nk-spec { margin: 0 0 18px; }
.nk-spec-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.nk-spec-label { display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.4; background: var(--nk-cream-2); border: 1px solid var(--nk-line);
  padding: 2px 8px; border-radius: 6px; color: var(--nk-ink-soft); margin-top: 6px; }
.nk-spec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
/* fixed-position components render in-flow INSIDE a specimen only */
.nk-spec .nk-toast { position: static; transform: none; animation: none; }
.nk-spec .nk-modal-overlay { position: static; border-radius: var(--nk-radius); }
.nk-spec .nk-app-foot { margin-top: 0; }
/* live token faces: the swatch face IS the var -- never a re-typed hex */
.nk-swatch { height: 52px; border-radius: 10px; border: 1px solid var(--nk-border); }
.nk-swatch--azure       { background: var(--nk-azure); }
.nk-swatch--azure-deep  { background: var(--nk-azure-deep); }
.nk-swatch--azure-tint  { background: var(--nk-azure-tint); }
.nk-swatch--azure-soft  { background: var(--nk-azure-soft); }
.nk-swatch--cerise      { background: var(--nk-cerise); }
.nk-swatch--cerise-deep { background: var(--nk-cerise-deep); }
.nk-swatch--gold        { background: var(--nk-gold); }
.nk-swatch--ink         { background: var(--nk-ink); }
.nk-swatch--ink-soft    { background: var(--nk-ink-soft); }
.nk-swatch--muted       { background: var(--nk-muted); }
.nk-swatch--muted-soft  { background: var(--nk-muted-soft); }
.nk-swatch--cream       { background: var(--nk-cream); }
.nk-swatch--cream-2     { background: var(--nk-cream-2); }
.nk-swatch--white       { background: var(--nk-white); }
.nk-swatch--card        { background: var(--nk-card); }
.nk-swatch--line        { background: var(--nk-line); }
.nk-swatch--wash        { background: var(--nk-wash); }
.nk-swatch--border      { background: var(--nk-border); }
.nk-swatch--border-soft { background: var(--nk-border-soft); }
.nk-swatch--ok          { background: var(--nk-ok); }
.nk-swatch--warn        { background: var(--nk-warn); }
.nk-swatch--err         { background: var(--nk-err); }
.nk-swatch--radius-sm   { background: var(--nk-cream-2); border-radius: var(--nk-radius-sm); }
.nk-swatch--radius      { background: var(--nk-cream-2); border-radius: var(--nk-radius); }
.nk-swatch--radius-lg   { background: var(--nk-cream-2); border-radius: var(--nk-radius-lg); }
.nk-swatch--shadow      { background: var(--nk-white); box-shadow: var(--nk-shadow-sm); }

/* ============================================================
   LANDRHS1-20260909-MARKER -- GAP 8: the landing RHS window, in and out
   (docs/NIKA_LANDING_PAGE_RHS_IN-OUT_0908.md, [T] RULED; visual reference =
   the Codesign "Ask Nika App" page -- its background, Get-started button,
   pill colours and bubble shape are the live Azure tokens, kept).
   Every class this bundle introduces is here and nowhere else (L1). Canon
   tokens only; motion per section 17 (one easing, 120-220ms) with the global
   prefers-reduced-motion kill switch inherited, never overridden; the four
   canon breakpoints only.

   NEW CLASSES
     .nk-topbar / -nav / -link / -right / -btn / -form / -signout
                       the "/" top bar: centred nav when logged out, the
                       Sign out + Account cluster when logged in.
     .nk-dots / .nk-dot-face(--deep|--azure|--gold|--cerise)
                       the codesign dot cluster inside the bubble.
     .nk-ctlrow        the bubble's control row (copy + thumbs + language +
                       model), wrapping WITH the bubble on both surfaces.
     .nk-ctl-btn       the quiet copy control (+ .is-done flash state).
     .nk-modelwrap     the model pill; .is-off = the honest greyed face.
     .nk-copy-sink     off-screen textarea for the clipboard fallback.
     .nk-eu-line       the EU/privacy line; --in = inside the bubble foot.
   ============================================================ */
.nk-topbar { position: relative; display: flex; align-items: center; gap: 18px;
  padding: 14px 24px; }
.nk-topbar-nav { display: flex; align-items: center; gap: 26px; margin: 0 auto; }
.nk-topbar-right { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.nk-topbar-link { font-size: 14px; font-weight: 600; color: var(--nk-ink-soft);
  text-decoration: none; transition: color var(--nk-t-fast) var(--nk-ease); }
.nk-topbar-link:hover { color: var(--nk-azure-deep); text-decoration: none; }
.nk-topbar-btn { border-radius: 999px; }   /* canon button, codesign pill face */
.nk-topbar-form { margin: 0; }
.nk-topbar-signout { border: 0; background: none; cursor: pointer; font-family: inherit; padding: 0; }

/* the dot cluster: four token faces, overlapped, purely decorative */
.nk-dots { display: inline-flex; align-items: center; }
.nk-dot-face { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--nk-white); }
.nk-dot-face + .nk-dot-face { margin-left: -7px; }
.nk-dot-face--deep   { background: var(--nk-azure-deep); }
.nk-dot-face--azure  { background: var(--nk-azure); }
.nk-dot-face--gold   { background: var(--nk-gold); }
.nk-dot-face--cerise { background: var(--nk-cerise); }

/* the control row -- part of the bubble, responsive with it */
.nk-ctlrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 13px; width: 100%; box-sizing: border-box; }
.nk-ctlrow .nk-thumbs { display: inline-flex; gap: 2px; }   /* [T]: thumbs close together */
.chat-surface .composer { flex-wrap: wrap; }                /* the row rides INSIDE the bubble */
.chat-surface .composer .nk-ctlrow { flex: 1 0 100%; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid var(--nk-border-soft); }
.nk-composer-foot .nk-ctlrow { margin: 0; }
.nk-ctl-btn { display: inline-flex; align-items: center; gap: 6px; font: inherit;
  font-size: 13px; color: var(--nk-azure-deep); background: var(--nk-azure-soft);
  border: 1px solid transparent; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  transition: background var(--nk-t-fast) var(--nk-ease), border-color var(--nk-t-fast) var(--nk-ease); }
.nk-ctl-btn:hover { background: var(--nk-azure-tint); }
.nk-ctl-btn.is-done { background: var(--nk-azure-deep); color: var(--nk-white); }
.nk-copy-sink { position: fixed; left: -9999px; top: 0; opacity: 0; }
.nk-modelwrap { display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
  color: var(--nk-azure-deep); background: var(--nk-azure-soft);
  padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.nk-modelwrap select { border: 0; background: transparent; font: inherit; color: inherit;
  cursor: pointer; max-width: 190px; }
.nk-modelwrap.is-off { color: var(--nk-muted); background: var(--nk-cream-2);
  cursor: not-allowed; opacity: .75; }

/* the EU line: below the bubble signed in, inside the bubble foot signed out */
.nk-eu-line { text-align: center; font-size: 13px; color: var(--nk-muted-soft); margin: 14px 0 0; }
.nk-eu-line--in { width: 100%; margin: 0; }

/* POST-FIRST-REQUEST: the SAME :has(#nk-landing) mechanism LAND-ST1 introduced,
   read in the negative. #nk-landing is removed by sendMsg() on the first send,
   so this is the started state: the bubble sits at the bottom of the hero space
   while #thread scrolls above it (front.css already gives #thread flex:1 +
   overflow-y:auto), and the below-bubble EU line is gone ([T]: "= removed").
   Browsers without :has() keep the pre-send layout -- honest degradation, the
   page still works exactly as it does today. */
.chat-surface:not(:has(#nk-landing)) footer { position: sticky; bottom: 0;
  background: var(--nk-cream); z-index: 2; }
.chat-surface:not(:has(#nk-landing)) .nk-eu-line { display: none; }
/* the composer grows with typed content, then scrolls internally (leg C; this
   lifts front.css's 140px pin -- the JS clamp is the matching half) */
.chat-surface #input { max-height: 40vh; overflow-y: auto; }

/* ---- canon breakpoints (desktop / laptop / tablet / mobile) ---- */
@media (min-width: 1440px) { .nk-topbar { padding: 18px 32px; } }
@media (min-width: 1025px) and (max-width: 1439px) { .nk-topbar { padding: 16px 26px; } }
@media (min-width: 640px) and (max-width: 1024px) {
  .nk-topbar { flex-wrap: wrap; padding: 12px 18px; }
  .nk-topbar-nav { gap: 18px; order: 3; width: 100%; margin: 8px 0 0; justify-content: center; }
  .nk-modelwrap select { max-width: 140px; }
}
@media (max-width: 639px) {
  .nk-topbar { flex-wrap: wrap; gap: 10px; padding: 10px 14px; }
  .nk-topbar-nav { order: 3; width: 100%; margin: 6px 0 0; gap: 14px;
    justify-content: center; flex-wrap: wrap; font-size: 13px; }
  .nk-topbar-right { width: 100%; justify-content: center; }
  .nk-ctlrow { gap: 8px; font-size: 12.5px; }
  .nk-modelwrap select { max-width: 118px; }
  .nk-dot-face { width: 18px; height: 18px; }
  .chat-surface #input { max-height: 34vh; }
}


/* ============================================================
   LANDRHS2-20260910-MARKER -- GAP 9: [T]'s landing corrections
   (docs/NIKA_LANDING_PAGE_RHS_IN-OUT_0908v2.md, VERBATIM law; visual truth =
   docs/NIKA_LANDING_CODESIGN_ORIG_AZURE_TRACY_LOVES_0909.jpg and the Codesign
   "Ask Nika App" reference, whose real hex values the dot cluster now carries).
   Every class this bundle introduces is here and nowhere else (L1). Canon
   tokens only; motion per section 17 (one easing, 120-220ms) with the global
   prefers-reduced-motion kill switch inherited, never overridden; the four
   canon breakpoints only.

   Some rules are body-scoped on purpose: home.html carries a pre-existing
   page-level <style> (LANDRHS1-era debt this bundle does not own), and out-
   specifying it is the honest way to correct it WITHOUT minting a second
   dialect inside the template.

   NEW CLASSES
     .nk-topbar-brand   the restored logo in the logged-out top bar.
     .nk-dot-face--gold-soft  the Codesign dot gold (--nk-gold-soft).
     .nk-bubblefoot     the ONE bubble-footer line: dots + EU line + control row.
     .nk-aidisc         "AI can make mistakes..." below the card, RESULT only.
     .nk-bridge-slot    where the bridge toast mounts, just above the bubble.
     .nk-toast--bridge  that toast, in flow instead of floating.
   ============================================================ */

/* ---- the top bar: breathing room, a brand, a truly centred nav ---- */
.nk-topbar { max-width: 1240px; margin: 0 auto; padding: 22px 40px; gap: 20px; }
.nk-topbar-brand { display: inline-flex; align-items: center; text-decoration: none; }
.nk-topbar-brand:hover { text-decoration: none; }
.nk-topbar-brand img { height: 40px; width: auto; display: block; }
/* TRULY centred: absolute mid-axis, so the brand on the left and the cluster on
   the right cannot pull it off centre whatever their widths. */
.nk-topbar-nav { position: absolute; left: 50%; transform: translateX(-50%);
  margin: 0; gap: 8px; }
/* [T]: "buttons, but more open and friendly ... Your buttons are tight and
   small." The Codesign pill: 15px, weight 600, 999px radius, generous padding. */
.nk-topbar-nav .nk-topbar-link { padding: 11px 20px; border-radius: 999px;
  font-size: 15px; font-weight: 600; background: transparent;
  border: 1px solid transparent; line-height: 1;
  transition: background var(--nk-t-fast) var(--nk-ease),
              border-color var(--nk-t-fast) var(--nk-ease),
              color var(--nk-t-fast) var(--nk-ease); }
.nk-topbar-nav .nk-topbar-link:hover { background: var(--nk-azure-soft);
  border-color: var(--nk-azure-tint); color: var(--nk-azure-deep); }
.nk-topbar-btn { padding: 11px 22px; font-size: 15px; }

/* ---- the hero: let it breathe (L10) instead of cramping to the top ---- */
body.nk main.nk-landing.nk-azure { padding: 64px 40px 64px; }
body.nk .nk-azure .nk-hero { margin-bottom: 0; }
/* [T]: the hero message "should be a heavier font weight. it is not strong
   enough." Same for the placeholder and the footer line. */
body.nk .nk-azure .nk-sub { font-weight: 500; }
body.nk .nk-composer-input::placeholder { font-weight: 500; }
body.nk .chat-surface #input::placeholder { font-weight: 500; }
.nk-eu-line { font-weight: 600; color: var(--nk-ink-soft); }

/* ---- the badge: every bullet the same dot, one uniform gap ---- */
.nk-super { flex-wrap: wrap; justify-content: center; }
.nk-super .nk-super-dot { flex: none; }

/* ---- the dot cluster: the Codesign hues, EXACT ---- */
.nk-dot-face--gold-soft { background: var(--nk-gold-soft); }

/* ---- the bubble-footer line: dots ON it, one footer at a time ---- */
body.nk .nk-composer-foot { justify-content: flex-start; gap: 14px; flex-wrap: nowrap; }
body.nk .nk-composer-row { justify-content: flex-end; }
.nk-eu-line--in { width: auto; margin: 0; text-align: left; flex: 1 1 auto; }
.nk-bubblefoot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  width: 100%; flex: 1 0 100%; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--nk-border-soft); }
/* the row already sits inside the line: GAP 8's own border/spacing would double it */
.chat-surface .composer .nk-bubblefoot .nk-ctlrow { flex: 1 1 auto; margin-top: 0;
  padding-top: 0; border-top: 0; width: auto; font-weight: 600; }
.nk-ctlrow #evidencebar { margin: 0; max-width: none; display: inline-flex; }
.nk-ctlrow #evidencebar a { color: var(--nk-azure-deep); text-decoration: none; }
.nk-ctlrow #evidencebar a:hover { text-decoration: none; color: var(--nk-azure); }

/* THE STATE MACHINE. #nk-landing present = INITIAL; sendMsg() removes it, and
   that absence IS the ANSWER-RESULT state. GAP 8 already hides .nk-eu-line in
   the result state; these two lines are the other half. */
.chat-surface:has(#nk-landing) .nk-ctlrow { display: none; }
.chat-surface:has(#nk-landing) .nk-aidisc { display: none; }
.nk-aidisc { text-align: center; font-size: 13px; color: var(--nk-muted-soft);
  margin: 10px 0 0; }
/* result-state suggestions are an admin upsell surface, so the strip stays */
.chat-surface:not(:has(#nk-landing)) #nk-landing-extras { display: block; padding: 8px 0 0; }

/* WHERE the bubble sits. Logged IN: bottom, thread scrolling above (GAP 8's
   sticky footer). Logged OUT: the CENTRE of the hero, the thread capped above
   it so the visitor can scroll both ways, and the bubble expanding downward
   into the space below ([T]'s first Note). */
body.nk-out .chat-surface:not(:has(#nk-landing)) { justify-content: center; }
body.nk-out .chat-surface:not(:has(#nk-landing)) footer { position: static; }
body.nk-out .chat-surface:not(:has(#nk-landing)) #thread { flex: 0 1 auto; max-height: 42vh; }

/* ---- the bridge toast, in flow, just above the bubble ---- */
.nk-bridge-slot { display: flex; justify-content: center; }
.nk-bridge-slot:empty { display: none; }
.nk-toast--bridge { position: static; transform: none; left: auto; bottom: auto;
  margin: 0 auto 8px; max-width: 820px;
  animation: nk-bridge-in var(--nk-t) var(--nk-ease) both; }
@keyframes nk-bridge-in { from { opacity: 0; transform: translateY(6px); }
                          to   { opacity: 1; transform: translateY(0); } }

/* ---- canon breakpoints (desktop / laptop / tablet / mobile) ---- */
@media (min-width: 1440px) {
  .nk-topbar { padding: 24px 40px; }
  body.nk main.nk-landing.nk-azure { padding: 76px 40px 72px; }
}
@media (min-width: 1025px) and (max-width: 1439px) {
  .nk-topbar { padding: 22px 34px; }
  body.nk main.nk-landing.nk-azure { padding: 64px 34px 60px; }
}
@media (min-width: 640px) and (max-width: 1024px) {
  .nk-topbar { padding: 16px 24px; }
  .nk-topbar-nav { position: static; transform: none; }
  .nk-topbar-brand img { height: 34px; }
  body.nk main.nk-landing.nk-azure { padding: 48px 24px 48px; }
  body.nk .nk-composer-foot { flex-wrap: wrap; }
}
@media (max-width: 639px) {
  .nk-topbar { padding: 12px 16px; }
  .nk-topbar-nav { position: static; transform: none; }
  .nk-topbar-nav .nk-topbar-link { padding: 9px 15px; font-size: 14px; }
  .nk-topbar-brand img { height: 30px; }
  body.nk main.nk-landing.nk-azure { padding: 32px 18px 40px; }
  body.nk .nk-composer-foot { flex-wrap: wrap; gap: 10px; }
  .nk-eu-line--in { flex: 1 1 100%; text-align: center; }
  body.nk-out .chat-surface:not(:has(#nk-landing)) #thread { max-height: 34vh; }
}

/* DOORTINT1 ([T] 0910): the logged-out DOOR wears the brand tint; the signed-in workspace stays neutral. */
body.nk.nk-door { background: var(--nk-bg-door, #F4F8FA); }