/*
 * SEMPHN Workbench — shared shell stylesheet (v3 · Figma-quality refresh)
 *
 * Aesthetic: refined minimal. Generous whitespace. Confident typography.
 * Zero shadows on resting cards. Pure white surfaces with hairline borders.
 * Inspired by Figma Make + Linear + Vercel.
 *
 * Font:   Geist + Geist Mono (loaded by each page from Google Fonts).
 * Color:  Pure white + near-black text + hairline gray borders + SEMPHN teal accent.
 * Cards:  No shadow at rest. Subtle border + subtle hover lift.
 * Type:   Big bold headlines. Subtle gray secondary text. Generous line-heights.
 */

:root {
  /* Brand */
  --navy:        #04264E;
  --navy-mid:    #003D69;
  --teal:        #55BFAF;
  --teal-mint:   #82D9C4;
  --teal-pale:   #E5F4F0;

  /* Refined neutral scale — closer to Figma's palette */
  --ink:         #0A0A0A;
  --ink-2:       #1F2937;
  --slate:       #4B5563;
  --slate-soft:  #6B7280;
  --slate-mute:  #9CA3AF;
  --rule:        #E5E7EB;
  --rule-soft:   #F3F4F6;
  --rule-bg:     #F9FAFB;
  --paper:       #FFFFFF;

  /* Semantic */
  --positive:    #10B981;
  --negative:    #EF4444;
  --warn:        #F59E0B;
  --warn-bg:     #FEF3C7;
  --warn-border: #FDE68A;

  /* Type */
  --sans:    "Geist", -apple-system, "Segoe UI", system-ui, sans-serif;
  --display: "Geist", -apple-system, "Segoe UI", system-ui, sans-serif;
  --mono:    "Geist Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* Layout */
  --gutter:    clamp(1.5rem, 3vw, 2.5rem);
  --r-xs:      4px;
  --r-sm:      6px;
  --r:         10px;
  --r-lg:      14px;
  --navh:      56px;
  --statush:   30px;
  --chatw:     420px;
  --chatw-min: 340px;
  --chatw-max: 640px;

  /* Motion */
  --motion-fast: 130ms cubic-bezier(0.2, 0.6, 0.2, 1);
  --motion-med:  220ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex; flex-direction: column;
}
::selection { background: var(--ink); color: white; }
button, input, textarea { font-family: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* ═══════════════════════════════════════════════════════════════════
 * PRINT STYLESHEET · clean PDF export from the browser print dialog
 * Triggered by the dashboards Export button → window.print()
 * ═══════════════════════════════════════════════════════════════════ */
@media print {
  @page { margin: 14mm; size: A4 landscape; }
  html, body { height: auto !important; overflow: visible !important; }
  /* Hide all chrome */
  .nav, .chat, .split-handle, .statusbar, .canvas-head,
  .chat-toolbar, .composer, .chat-suggest, .canvas-pill,
  .canvas-actions, .turn-followups, .wgt-actions { display: none !important; }
  /* Maps default preview · hide too (PDF should be widget tiles) */
  .maps-default, .dashboards-default { display: none !important; }
  /* Show widget grid full-width, no overflow scrolling */
  .canvas, .canvas-body, .canvas-body-flush {
    background: white !important;
    position: static !important;
    inset: auto !important;
    overflow: visible !important;
    display: block !important;
    height: auto !important;
  }
  .widget-grid-padded, .widget-grid-padded:not(:empty) {
    position: static !important;
    inset: auto !important;
    overflow: visible !important;
    padding: 0 !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
    display: grid !important;
  }
  /* Force all sizes to consistent 2-col print layout */
  .wgt-card[data-size="lg"] { grid-column: span 2 !important; }
  .wgt-card[data-size="sm"], .wgt-card[data-size="md"] { grid-column: span 1 !important; }
  .wgt-card {
    page-break-inside: avoid;
    break-inside: avoid;
    box-shadow: none !important;
    border-color: #D1D5DB !important;
  }
  /* Print header — page title + date */
  body::before {
    content: "SEMPHN Workbench · Dashboard export · " attr(data-page-print);
    display: block;
    font-family: var(--sans);
    font-size: 10pt;
    color: #4B5563;
    margin-bottom: 8mm;
    padding-bottom: 4mm;
    border-bottom: 1px solid #D1D5DB;
  }
}

/* Page entrance */
@keyframes page-in {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .split { animation: page-in 180ms cubic-bezier(0.2, 0.6, 0.2, 1) both; }
}

/* ─────────────────── TOP NAV ─────────────────── */
.nav {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  height: var(--navh);
  display: flex; align-items: center;
  padding: 0 var(--gutter);
  flex: none;
  position: relative; z-index: 50;
}
.nav-inner { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.nav-brand { display: inline-flex; align-items: center; gap: 0.65rem; color: var(--ink); text-decoration: none; }
.nav-brand .mark {
  width: 28px; height: 28px;
  background: var(--ink); border-radius: var(--r-sm);
  display: grid; place-items: center;
  flex: none;
}
.nav-brand .mark img { width: 18px; height: auto; }
.nav-brand .lockup { display: inline-flex; flex-direction: column; line-height: 1.1; }
.nav-brand .lockup .name { font-weight: 600; font-size: 0.86rem; letter-spacing: -0.01em; color: var(--ink); }
.nav-brand .lockup .sub {
  font-size: 0.7rem; color: var(--slate-soft); font-weight: 500;
  letter-spacing: 0; text-transform: none; margin-top: 1px;
}
.nav-links { display: flex; align-items: center; gap: 0.05rem; margin-left: auto; margin-right: 0.6rem; }
.nav-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.42rem 0.85rem;
  color: var(--slate); text-decoration: none;
  font-size: 0.86rem; font-weight: 500;
  border-radius: var(--r-sm);
  transition: background var(--motion-fast), color var(--motion-fast);
}
.nav-link:hover { background: var(--rule-soft); color: var(--ink); }
.nav-link.is-active { color: var(--ink); font-weight: 600; background: var(--rule-soft); }
.nav-link .dot { display: none; }

/* ⌘K trigger */
.nav-cmdk {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.36rem 0.55rem 0.36rem 0.7rem;
  margin-right: 0.6rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  font-size: 0.78rem;
  color: var(--slate-soft);
  cursor: pointer;
  transition: all var(--motion-fast);
  font-weight: 500;
}
.nav-cmdk:hover { color: var(--ink); border-color: var(--slate-mute); background: var(--rule-soft); }
.nav-cmdk kbd {
  font-family: var(--mono);
  font-size: 0.66rem;
  background: var(--rule-soft);
  padding: 0.08rem 0.35rem 0.1rem;
  border-radius: 4px;
  color: var(--slate);
  border: 1px solid var(--rule);
  font-weight: 500;
}

.nav-user {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.3rem 0.5rem 0.3rem 0.34rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  transition: border-color var(--motion-fast);
}
.nav-user:hover { border-color: var(--slate-mute); }
.nav-user .av {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink); color: white;
  display: grid; place-items: center;
  font-size: 0.7rem; font-weight: 600;
}
.nav-user .meta { display: inline-flex; flex-direction: column; line-height: 1.1; }
.nav-user .meta .who { font-size: 0.78rem; font-weight: 600; color: var(--ink); }
.nav-user .meta .sub { font-size: 0.66rem; color: var(--slate-soft); margin-top: 1px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.nav-user button {
  margin-left: 0.3rem; padding: 0.18rem 0.5rem;
  border: none; background: var(--rule-soft);
  font-size: 0.7rem;
  color: var(--slate); cursor: pointer; font-weight: 500;
  border-radius: var(--r-xs);
  text-transform: none; letter-spacing: 0;
}
.nav-user button:hover { color: var(--ink); background: var(--rule); }
@media (max-width: 880px) {
  .nav-brand .lockup .sub { display: none; }
  .nav-user .meta { display: none; }
  .nav-cmdk kbd { display: none; }
}

/* ─────────────────── SPLIT (chat + canvas) ─────────────────── */
.split {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: var(--chatw) 4px 1fr;
  /* No transition on grid-template-columns — browsers don't reliably
     animate it AND in some setups it caused the collapsed-state rule
     to be ignored entirely (the cascaded value stuck at the base). */
}
.split[data-chat-collapsed="true"] {
  grid-template-columns: 0px 4px 1fr !important;
}
/* CSS Grid won't collapse a track to 0 if children have min-content.
   Force the chat panel to allow real collapse. */
.split[data-chat-collapsed="true"] .chat {
  min-width: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}
@media (max-width: 960px) {
  .split { grid-template-columns: 1fr; grid-template-rows: 50vh 4px 1fr; }
  .split[data-chat-collapsed="true"] { grid-template-rows: 0 4px 1fr; }
}

/* Drag handle · slightly wider hover target for discoverability */
.split-handle {
  background: var(--rule);
  cursor: col-resize;
  position: relative;
  transition: background var(--motion-fast);
}
.split-handle:hover, .split-handle.is-dragging { background: var(--ink); }
.split-handle::before {
  /* Wider invisible hit-zone so the 4px line is easier to grab */
  content: ""; position: absolute; inset: 0 -6px;
}

/* Floating "Show chat" button · pinned to left edge of canvas,
   only visible when the chat panel is collapsed. */
.chat-expand-floating {
  display: none;
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 70;
  background: var(--ink);
  color: var(--paper);
  border: none;
  border-radius: 999px;
  padding: 0.5rem 0.85rem 0.5rem 0.7rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 6px 18px -4px rgba(10,10,10,0.28), 0 2px 6px -2px rgba(10,10,10,0.12);
  align-items: center; gap: 0.35rem;
  transition: transform var(--motion-fast), box-shadow var(--motion-fast);
}
.chat-expand-floating svg { display: block; }
.chat-expand-floating:hover {
  transform: translateY(-50%) translateX(2px);
  box-shadow: 0 10px 24px -6px rgba(10,10,10,0.34), 0 3px 8px -2px rgba(10,10,10,0.14);
}
/* Visible only when the split is collapsed */
.split[data-chat-collapsed="true"] .chat-expand-floating {
  display: inline-flex;
  animation: chat-expand-in 240ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
@keyframes chat-expand-in {
  from { opacity: 0; transform: translateY(-50%) translateX(-8px); }
  to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}
/* The canvas needs to be a positioning context so the absolutely-
   positioned button anchors to it */
.canvas { position: relative; }
@media (max-width: 960px) { .split-handle { cursor: row-resize; } }

/* ═══════════════════════════════════════════════════════════════════
 * CHAT PANEL (LEFT)
 * ═══════════════════════════════════════════════════════════════════ */
.chat {
  /* Subtle gradient backdrop — breathes life into the chat panel
     without competing with the content. */
  background:
    radial-gradient(circle at 0% 0%, rgba(85,191,175,0.045), transparent 45%),
    radial-gradient(circle at 100% 100%, rgba(76,134,255,0.035), transparent 45%),
    var(--paper);
  display: flex; flex-direction: column;
  min-height: 0;
  overflow: hidden;
  position: relative;
}
/* Chat panel top toolbar · clear + collapse + section label */
.chat-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.5rem 0.75rem 0.45rem;
  border-bottom: 1px solid var(--rule-soft);
  flex: none;
  gap: 0.5rem;
  min-height: 38px;
}
.chat-toolbar-left, .chat-toolbar-right {
  display: inline-flex; align-items: center; gap: 0.45rem;
}
.chat-toolbar-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--slate);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.chat-msgcount {
  font-size: 0.7rem;
  color: var(--slate-mute);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  padding: 0.15rem 0.45rem;
  background: var(--rule-soft);
  border-radius: 999px;
  letter-spacing: 0;
}
.chat-msgcount:empty { display: none; }
.chat-tool {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: none;
  border: 1px solid transparent;
  color: var(--slate-mute);
  padding: 0.3rem 0.55rem;
  border-radius: var(--r-sm);
  font-size: 0.76rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--motion-fast);
}
.chat-tool:hover { color: var(--ink); background: var(--rule-soft); border-color: var(--rule); }
.chat-tool:disabled { opacity: 0.4; cursor: not-allowed; }
.chat-tool:disabled:hover { background: none; border-color: transparent; color: var(--slate-mute); }
.chat-tool svg { display: block; }
.chat-tool.chat-collapse {
  width: 28px; padding: 0; justify-content: center;
  font-size: 0.85rem; font-weight: 600;
  color: var(--slate);
}
.chat-feed {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 1.5rem 1.2rem 1.5rem;
  display: flex; flex-direction: column; gap: 1.6rem;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}
.chat-feed::-webkit-scrollbar { width: 6px; }
.chat-feed::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 999px; }
.chat-feed::-webkit-scrollbar-thumb:hover { background: var(--slate-mute); }

.turn { display: flex; flex-direction: column; gap: 0.9rem; animation: turn-in 200ms cubic-bezier(0.2, 0.6, 0.2, 1); }
@keyframes turn-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.turn-prompt {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.6rem;
  align-items: start;
  padding: 0.7rem 0.85rem;
  background: var(--rule-soft);
  border-radius: var(--r);
  position: relative;
}
.turn-prompt .text { font-size: 0.92rem; line-height: 1.5; color: var(--ink); font-weight: 500; }
.turn-prompt .avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--ink);
  color: white;
  display: grid; place-items: center;
  font-size: 0.68rem;
  font-weight: 600;
  flex: none;
}
.turn-prompt-acts {
  display: inline-flex; align-items: center;
  opacity: 0;
  transform: translateY(-1px);
  transition: opacity var(--motion-fast);
}
.turn-prompt:hover .turn-prompt-acts { opacity: 1; }
.turn-act-btn {
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--slate);
  width: 22px; height: 22px;
  border-radius: var(--r-xs);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--motion-fast);
}
.turn-act-btn:hover { color: var(--ink); border-color: var(--slate-mute); background: var(--rule-soft); }
.turn-act-btn svg { display: block; }

.turn-section {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: none; border: none;
  color: var(--slate);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  align-self: flex-start;
  transition: color var(--motion-fast);
}
.turn-section:hover { color: var(--ink); }
.turn-section .caret { font-size: 0.7rem; transition: transform var(--motion-fast); color: var(--slate-mute); }
.turn-section[aria-expanded="false"] .caret { transform: rotate(-90deg); }

.turn-reasoning, .turn-files {
  padding: 0 0 0 0.9rem;
  font-size: 0.86rem; line-height: 1.6;
  color: var(--slate);
  border-left: 2px solid var(--rule);
  margin-top: -0.4rem;
}
.turn-files-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.2rem; }
.turn-files-list li {
  display: flex; align-items: center; gap: 0.45rem;
  font-family: var(--mono); font-size: 0.74rem;
  color: var(--slate-soft);
}
.turn-files-list li::before { content: "·"; color: var(--ink); font-weight: 700; }

.turn-body {
  font-size: 0.95rem; line-height: 1.65;
  color: var(--ink);
  position: relative;
  padding-left: 1.1rem;
  padding-right: 2rem;  /* room for the floating copy button */
}
/* Copy reply · floats top-right of body, only visible on hover */
.turn-body-copy {
  position: absolute;
  top: 0; right: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--slate-mute);
  width: 24px; height: 24px;
  border-radius: var(--r-xs);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: all var(--motion-fast);
}
.turn-body:hover .turn-body-copy { opacity: 1; }
.turn-body-copy:hover { color: var(--ink); border-color: var(--slate-mute); background: var(--rule-soft); }
.turn-body-copy.is-done {
  opacity: 1; color: var(--positive, #10B981); border-color: var(--positive, #10B981);
  background: rgba(16,185,129,0.08);
}
.turn-body-copy svg { display: block; }
/* AI author pip · small gradient dot to the left of every AI reply */
.turn-body::before {
  content: "";
  position: absolute;
  left: 0; top: 0.5em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), #4C86FF);
  box-shadow: 0 0 0 2px rgba(85,191,175,0.18);
}
.turn-body p + p, .turn-body p + ul, .turn-body p + ol, .turn-body ul + p, .turn-body ol + p { margin-top: 0.6rem; }
.turn-body strong { font-weight: 600; color: var(--ink); }
.turn-body em { font-style: italic; }
.turn-body ul, .turn-body ol { padding-left: 1.4rem; }
.turn-body ul li, .turn-body ol li { margin-top: 0.2rem; }
.turn-body ul { list-style: disc; }
.turn-body ol { list-style: decimal; }
.turn-body code {
  font-family: var(--mono);
  font-size: 0.84em;
  background: var(--rule-soft);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  color: var(--ink);
}
.turn-body pre {
  background: var(--rule-soft);
  border-radius: var(--r);
  padding: 0.85rem 1rem;
  margin: 0.6rem 0;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink);
  overflow-x: auto;
  white-space: pre;
}
.turn-body pre code { background: none; padding: 0; font-size: inherit; }
.turn-body a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 2px;
}
.turn-body a:hover { text-decoration-color: var(--ink); }

.turn-thinking {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.88rem; color: var(--slate);
  padding: 0.4rem 0.8rem 0.4rem 0.7rem;
  background: linear-gradient(135deg, rgba(85,191,175,0.08), rgba(76,134,255,0.06));
  border: 1px solid rgba(85,191,175,0.25);
  border-radius: 999px;
  align-self: flex-start;
  position: relative;
  overflow: hidden;
}
.turn-thinking::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: translateX(-100%);
  animation: thinking-shimmer 2.2s infinite;
}
@keyframes thinking-shimmer {
  to { transform: translateX(100%); }
}
.turn-thinking-label {
  position: relative; z-index: 1;
  font-weight: 500;
  color: var(--ink);
  transition: opacity 180ms;
}
.turn-thinking .dots { display: inline-flex; gap: 4px; }
.turn-thinking .dots span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--slate);
  animation: dot-pulse 1.2s infinite ease-in-out;
}
.turn-thinking .dots span:nth-child(2) { animation-delay: 0.15s; }
.turn-thinking .dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot-pulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}
.turn-stop {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 0.32rem;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  padding: 0.18rem 0.55rem 0.18rem 0.45rem;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  margin-left: 0.25rem;
  transition: all var(--motion-fast);
}
.turn-stop:hover { background: var(--negative, #DC2626); border-color: var(--negative, #DC2626); }
.turn-stop svg { display: block; }

/* Toolbar icon-only variant (Export button) */
.chat-tool.chat-tool-icon {
  width: 28px; padding: 0; justify-content: center;
}

.turn-version {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 0.7rem 0.9rem;
  transition: border-color var(--motion-fast);
}
.turn-version:hover { border-color: var(--slate-mute); }
.turn-version .meta { display: flex; flex-direction: column; gap: 0.15rem; line-height: 1.2; }
.turn-version .meta .h { font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.turn-version .meta .v {
  font-size: 0.72rem; color: var(--positive); font-weight: 500;
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.turn-version .meta .v::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--positive);
}
.turn-version .kebab {
  background: none; border: none;
  color: var(--slate-mute); cursor: pointer;
  padding: 0.3rem 0.5rem;
  font-size: 1.1rem;
  border-radius: var(--r-xs);
}
.turn-version .kebab:hover { background: var(--rule-soft); color: var(--ink); }

.turn-feedback { display: flex; align-items: center; gap: 0.1rem; margin-left: -0.4rem; }
.turn-feedback button {
  background: none; border: none;
  color: var(--slate-mute); cursor: pointer;
  width: 28px; height: 28px;
  border-radius: var(--r-xs);
  display: grid; place-items: center;
  font-size: 0.92rem;
  transition: all var(--motion-fast);
}
.turn-feedback button:hover { background: var(--rule-soft); color: var(--ink); }
.turn-feedback button.is-on { color: var(--ink); }

.turn-warnings {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem 0.6rem 0.9rem;
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: var(--r);
  color: #92400E;
  font-size: 0.86rem; font-weight: 500;
}
.turn-warnings .label { display: inline-flex; align-items: center; gap: 0.45rem; }
.turn-warnings .label::before { content: "△"; font-size: 0.9rem; }
.turn-warnings .right { display: inline-flex; align-items: center; gap: 0.5rem; }
.turn-warnings .fix {
  background: var(--paper);
  border: 1px solid var(--warn-border);
  color: #92400E;
  padding: 0.3rem 0.65rem;
  border-radius: var(--r-xs);
  font-size: 0.76rem; font-weight: 500;
  cursor: pointer;
}
.turn-warnings .fix:hover { background: #FEFCE8; }
.turn-warnings .close {
  background: none; border: none;
  color: #92400E; cursor: pointer;
  width: 22px; height: 22px;
  border-radius: var(--r-xs);
  display: grid; place-items: center;
  font-size: 1.1rem;
}
.turn-warnings .close:hover { background: rgba(0,0,0,0.05); }

/* ─────────────────── FOLLOW-UP CHIPS (progressive build guidance) ─────────────────── */
.turn-followups {
  display: flex; flex-direction: column; gap: 0.5rem;
  margin-top: 0.3rem;
}
.turn-followups-label {
  font-size: 0.68rem;
  color: var(--slate-mute);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-left: 0.1rem;
}
.turn-followups-row {
  display: flex; flex-wrap: wrap; gap: 0.35rem;
}
.turn-followup-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--motion-fast);
}
.turn-followup-chip:hover {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.turn-followup-chip .arr {
  font-size: 0.75rem; color: var(--slate-mute);
  transition: color var(--motion-fast);
}
.turn-followup-chip:hover .arr { color: var(--teal-mint); }

/* ─────────────────── EMPTY STATE ─────────────────── */
.chat-empty {
  display: flex; flex-direction: column;
  gap: 1rem;
  margin: auto 0;
  padding: 0.5rem 0.25rem;
  animation: turn-in 280ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
.chat-empty-badge {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.3rem 0.65rem;
  background: var(--rule-soft);
  border-radius: 999px;
  font-size: 0.72rem;
  color: var(--slate);
  font-weight: 500;
}
.chat-empty-badge .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--positive);
}
.chat-empty-h {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.75rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  max-width: 22ch;
  margin-top: 0.2rem;
}
.chat-empty-lead {
  font-size: 0.95rem; line-height: 1.55;
  color: var(--slate);
  max-width: 40ch;
}
.chat-empty-suglabel {
  font-size: 0.72rem;
  color: var(--slate-soft); font-weight: 500;
  margin-top: 0.4rem;
}
.chat-empty-sugs {
  display: grid; grid-template-columns: 1fr;
  gap: 0.4rem;
}
.chat-empty-sug {
  display: flex; align-items: center; gap: 0.6rem;
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 0.75rem 0.9rem;
  border-radius: var(--r);
  font-size: 0.9rem;
  color: var(--ink);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--motion-fast);
}
.chat-empty-sug:hover {
  background: var(--rule-soft);
  border-color: var(--slate-mute);
}
.chat-empty-sug .ico {
  width: 24px; height: 24px;
  background: var(--rule-soft);
  border-radius: var(--r-xs);
  display: grid; place-items: center;
  color: var(--slate);
  font-size: 0.85rem;
  flex: none;
  transition: all var(--motion-fast);
}
.chat-empty-sug:hover .ico { background: var(--ink); color: white; }
.chat-empty-sug .label { flex: 1; line-height: 1.3; }
.chat-empty-hint {
  margin-top: 0.6rem;
  font-size: 0.76rem;
  color: var(--slate-soft);
  font-weight: 400;
  line-height: 1.5;
}
.chat-empty-hint kbd {
  font-family: var(--mono);
  font-size: 0.66rem;
  background: var(--rule-soft);
  padding: 0.08rem 0.35rem;
  border-radius: 4px;
  color: var(--ink);
  border: 1px solid var(--rule);
  font-weight: 500;
  margin: 0 0.15rem;
}

/* ─────────────────── CONTEXTUAL SUGGESTION STRIP ───────────────────
   Sits between the chat-feed and composer. Empty state = starter
   prompts. After each turn = follow-ups based on what was just built. */
.chat-suggest {
  flex: none;
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 0.9rem 0.5rem;
  border-top: 1px solid var(--rule-soft);
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Fade the right edge so users see there's more to scroll */
  mask-image: linear-gradient(to right, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, black 90%, transparent);
  /* Smooth fade-out when composing */
  transition: opacity 160ms ease, max-height 200ms ease, padding 200ms ease;
  opacity: 1; max-height: 60px;
}
.chat-suggest::-webkit-scrollbar { display: none; }
.chat-suggest[hidden] { display: none; }
/* Declutter: hide the persistent strip while the user is actively typing
   (typeahead-menu takes over) AND fade the wrapper after the first turn so
   the composer breathes. */
.chat[data-composing="true"] .chat-suggest {
  opacity: 0 !important;
  max-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top-width: 0 !important;
  pointer-events: none;
  overflow: hidden;
}
.chat[data-composing="true"] .chat-suggest > * { display: none; }
.chat-suggest-label {
  flex: none;
  font-size: 0.66rem;
  color: var(--slate-mute);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-right: 0.3rem;
}
.chat-suggest-chip {
  flex: none;
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--slate);
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--motion-fast), transform 120ms;
  animation: chip-in 320ms cubic-bezier(0.2, 0.6, 0.2, 1) both;
}
.chat-suggest-chip:nth-child(2) { animation-delay: 40ms; }
.chat-suggest-chip:nth-child(3) { animation-delay: 80ms; }
.chat-suggest-chip:nth-child(4) { animation-delay: 120ms; }
.chat-suggest-chip:nth-child(5) { animation-delay: 160ms; }
.chat-suggest-chip:nth-child(6) { animation-delay: 200ms; }
.chat-suggest-chip:nth-child(7) { animation-delay: 240ms; }
.chat-suggest-chip:nth-child(8) { animation-delay: 280ms; }
.chat-suggest-chip:active { transform: scale(0.97); }
@keyframes chip-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.chat-suggest-chip:hover {
  background: var(--ink); color: var(--paper);
  border-color: var(--ink);
}
.chat-suggest-chip .arr {
  font-size: 0.72rem; color: var(--slate-mute);
  transition: color var(--motion-fast);
}
.chat-suggest-chip:hover .arr { color: var(--teal-mint); }

/* ───────── HNA · AI-edited paragraph highlight + actions ───────── */
.hna-ai-edit {
  position: relative;
  padding-left: 1.1rem !important;
  margin-left: -0.4rem;
  border-left: 3px solid var(--teal, #55BFAF);
  background: linear-gradient(90deg, rgba(85,191,175,0.06), transparent 80%);
  animation: hna-ai-edit-in 420ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
.hna-ai-edit::after {
  content: "AI";
  position: absolute;
  top: -8px; right: -4px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono); font-size: 0.6rem; font-weight: 600;
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  letter-spacing: 0.08em;
  opacity: 0.85;
}
.hna-ai-edit h2 + & { margin-top: 0.4rem; }
.hna-ai-edit-actions {
  display: inline-flex; gap: 0.35rem;
  margin-top: 0.45rem;
  font-family: var(--sans);
}
.hna-ai-edit-actions button {
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--slate);
  padding: 0.22rem 0.55rem;
  border-radius: var(--r-xs);
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--motion-fast);
}
.hna-ai-edit-actions button:hover {
  color: var(--ink); border-color: var(--slate-mute); background: var(--rule-soft);
}
.hna-ai-edit-actions button.danger:hover {
  color: var(--negative); border-color: var(--negative);
}
@keyframes hna-ai-edit-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ───────── HNA · compact horizontal status strip ───────── */
.doc-status {
  max-width: 820px;
  margin: 0 auto 0.9rem;
  padding: 0.55rem 0.95rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
.doc-status-item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  flex: none;
}
.doc-status-item .v {
  font-family: var(--mono);
  font-size: 0.92rem; font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}
.doc-status-item .l {
  font-size: 0.7rem;
  color: var(--slate-soft); font-weight: 500;
}
.doc-status-item.is-pass .v { color: var(--positive, #10B981); }
.doc-status-item.is-warn .v { color: #C58700; }
.doc-status-progress {
  flex: 1; min-width: 100px;
  display: flex; align-items: center; gap: 0.5rem;
}
.doc-status-progress .l { white-space: nowrap; }
.doc-status-bar {
  flex: 1;
  height: 4px;
  background: var(--rule-soft);
  border-radius: 999px;
  overflow: hidden;
  min-width: 50px;
}
.doc-status-bar span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--teal, #55BFAF), #4C86FF);
  transition: width 600ms cubic-bezier(0.2, 0.6, 0.2, 1);
  border-radius: 999px;
}
@media (max-width: 720px) {
  .doc-status { flex-wrap: wrap; gap: 0.7rem 1rem; }
  .doc-status-progress { flex-basis: 100%; }
}

/* ───────── HNA · stub chapter empty state ───────── */
.hna-stub {
  padding: 1.4rem 1.5rem 1.8rem;
  background: linear-gradient(180deg, rgba(85,191,175,0.05), transparent);
  border: 1px dashed var(--rule);
  border-radius: var(--r-lg);
  margin: 0.6rem 0 0;
}
.hna-stub-badge {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono); font-size: 0.62rem; font-weight: 600;
  padding: 0.16rem 0.55rem;
  border-radius: 999px;
  letter-spacing: 0.08em;
  margin-bottom: 0.85rem;
}
.hna-stub-lead {
  font-size: 0.96rem;
  color: var(--slate);
  line-height: 1.6;
  margin-bottom: 1.2rem;
}
.hna-stub-chips { display: flex; flex-direction: column; gap: 0.4rem; }
.hna-stub-chip {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
  text-align: left;
  padding: 0.6rem 0.85rem;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--motion-fast);
}
.hna-stub-chip:hover { background: var(--rule-soft); border-color: var(--slate-mute); transform: translateX(2px); }
.hna-stub-chip .ico {
  width: 22px; height: 22px;
  background: linear-gradient(135deg, var(--teal, #55BFAF), #4C86FF);
  color: white;
  border-radius: var(--r-xs);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.78rem;
  flex: none;
}

/* ───────── HNA · auto-rendered sources list ───────── */
.hna-doc-sources {
  max-width: 820px;
  margin: 2.2rem auto 0;
  padding: 1.2rem 1.4rem 1.4rem;
  background: var(--rule-soft);
  border-radius: var(--r);
}
.hna-doc-sources .srcs-hdr {
  font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--slate-mute); font-weight: 600;
  margin-bottom: 0.55rem;
}
.hna-doc-sources .srcs-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0.85rem;
  padding: 0.35rem 0;
  font-size: 0.82rem;
  border-bottom: 1px dashed var(--rule);
}
.hna-doc-sources .srcs-row:last-child { border-bottom: none; }
.hna-doc-sources .srcs-id {
  font-family: var(--mono); font-size: 0.74rem;
  color: var(--ink); font-weight: 500;
  letter-spacing: 0;
}
.hna-doc-sources .srcs-lab { color: var(--slate); }

/* Stub chip in the chapter rail · subtle dot to indicate not yet drafted */
.chapter-chip.is-stub .n { background: var(--rule); color: var(--slate); }
.chapter-chip.is-stub:hover .n { background: var(--teal); color: var(--navy); }

/* Tighter chapter rail (overrides per-page block) */
.chapter-rail {
  max-width: 820px;
  margin: 0 auto 1.2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.chapter-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--slate);
  padding: 0.32rem 0.65rem 0.32rem 0.4rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  position: relative; overflow: hidden;
  min-height: 26px;
  transition: all 120ms;
}
.chapter-chip:hover { border-color: var(--slate-mute); color: var(--ink); }
.chapter-chip.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chapter-chip .n {
  background: var(--rule-soft);
  color: var(--slate);
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono); font-weight: 700; font-size: 0.62rem;
  flex: none;
}
.chapter-chip.is-on .n { background: var(--paper); color: var(--ink); }
.chapter-chip .lab {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 110px;
}
.chapter-chip .prog {
  position: absolute;
  bottom: 0; left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--teal, #55BFAF), #4C86FF);
  transition: width 600ms cubic-bezier(0.2, 0.6, 0.2, 1);
  border-radius: 0 0 999px 999px;
  opacity: 0.85;
}
.chapter-chip.is-on .prog {
  background: linear-gradient(90deg, var(--teal-mint, #82D9C4), #FFFFFF);
}
.chapter-chip.is-complete .n {
  background: var(--positive, #10B981);
  color: white;
  position: relative;
}
.chapter-chip.is-complete .n::after {
  content: "✓";
  position: absolute;
  font-size: 0.7rem;
  font-weight: 800;
}
.chapter-chip.is-complete.is-stub .n::after { content: ""; }

/* Auto-draft progress · floating bottom-left chip while queue runs */
.hna-autodraft-chip {
  position: fixed;
  bottom: 56px; left: 24px;
  z-index: 700;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r);
  padding: 0.9rem 1rem 1rem 0.9rem;
  min-width: 280px;
  max-width: 360px;
  box-shadow: 0 20px 48px -16px rgba(10,10,10,0.4);
  font-family: var(--sans);
  display: flex; align-items: center; gap: 0.7rem;
  transform: translateY(150%);
  opacity: 0;
  transition: transform 280ms cubic-bezier(0.2, 0.6, 0.2, 1), opacity 200ms;
}
.hna-autodraft-chip.is-open {
  transform: translateY(0);
  opacity: 1;
}
.hna-ad-spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,0.2);
  border-top-color: var(--teal, #55BFAF);
  border-radius: 50%;
  animation: hna-ad-spin 700ms linear infinite;
  flex: none;
}
@keyframes hna-ad-spin { to { transform: rotate(360deg); } }
.hna-ad-body { flex: 1; min-width: 0; }
.hna-ad-title {
  font-size: 0.82rem; font-weight: 600;
  margin-bottom: 0.15rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hna-ad-meta {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.6);
  font-family: var(--mono);
}
.hna-ad-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(255,255,255,0.1);
  border-radius: 0 0 var(--r) var(--r);
  overflow: hidden;
}
.hna-ad-bar span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--teal, #55BFAF), #4C86FF);
  transition: width 400ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* ───────── Maps · synthesised narration banner (after template load) ───────── */
.map-narration {
  position: fixed;
  bottom: 24px; left: 24px;
  z-index: 600;
  width: 360px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 0.85rem 1rem 1rem;
  box-shadow: 0 18px 36px -14px rgba(10,10,10,0.2);
  transform: translateY(120%); opacity: 0;
  transition: transform 280ms cubic-bezier(0.2, 0.6, 0.2, 1), opacity 220ms;
  font-family: var(--sans);
}
.map-narration.is-open { transform: translateY(0); opacity: 1; }
.mn-head {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.mn-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--teal, #55BFAF), #4C86FF);
  color: white;
  font-family: var(--mono); font-size: 0.6rem; font-weight: 600;
  padding: 0.16rem 0.55rem;
  border-radius: 999px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mn-title {
  font-size: 0.86rem; font-weight: 600; color: var(--ink);
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mn-x {
  background: none; border: none;
  width: 24px; height: 24px; border-radius: 50%;
  color: var(--slate-mute); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem; line-height: 1;
}
.mn-x:hover { background: var(--rule-soft); color: var(--ink); }
.mn-body {
  font-size: 0.84rem; line-height: 1.5;
  color: var(--ink);
  margin-bottom: 0.7rem;
}
.mn-body strong { font-weight: 600; }
.mn-cta {
  background: var(--ink); color: var(--paper);
  border: none;
  padding: 0.45rem 0.75rem;
  border-radius: var(--r-sm);
  font-family: inherit; font-weight: 500; font-size: 0.78rem;
  cursor: pointer;
  width: 100%;
}
.mn-cta:hover { background: #1F1F1F; }

/* ───────── Dashboards · synthesized commentary banner ───────── */
.wgt-card.wgt-commentary {
  padding: 1rem 1.2rem 1.1rem;
  background:
    radial-gradient(circle at 0% 0%, rgba(85,191,175,0.10), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(76,134,255,0.07), transparent 55%),
    var(--paper);
  border: 1px solid var(--rule);
}
.wgt-com-head {
  display: flex; align-items: center; gap: 0.6rem;
  margin-bottom: 0.55rem;
}
.wgt-com-badge {
  display: inline-block;
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 0.62rem;
  font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
}
.wgt-com-meta {
  font-size: 0.72rem; color: var(--slate-mute); font-family: var(--mono);
}
.wgt-com-body {
  font-size: 0.96rem; line-height: 1.6;
  color: var(--ink);
}
.wgt-com-body strong { font-weight: 600; }
.wgt-com-body em { color: var(--slate); font-style: normal; padding: 0 0.25em;
  background: var(--rule-soft); border-radius: 3px; font-size: 0.9em; }

/* Kebab menu · label row + section header */
.wgt-menu-label {
  padding: 0.45rem 0.7rem 0.3rem;
  font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--slate-mute); font-weight: 600;
}

/* Template hover preview tooltip */
.tpl-preview {
  position: fixed;
  z-index: 600;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  box-shadow: 0 14px 36px -12px rgba(10,10,10,0.22);
  padding: 0.5rem;
  min-width: 280px;
  max-width: 320px;
  animation: cmdk-in 140ms cubic-bezier(0.2, 0.6, 0.2, 1);
  font-family: var(--sans);
  pointer-events: none;
}
.tplp-head {
  padding: 0.3rem 0.55rem 0.45rem;
  font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--slate-mute); font-weight: 600;
  border-bottom: 1px solid var(--rule-soft);
  margin-bottom: 0.35rem;
}
.tplp-row {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 0.55rem; align-items: start;
  padding: 0.4rem 0.55rem;
  border-radius: var(--r-xs);
}
.tplp-icon {
  width: 22px; height: 22px;
  background: var(--rule-soft); color: var(--slate);
  border-radius: var(--r-xs);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 0.78rem;
}
.tplp-body { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }
.tplp-title {
  font-size: 0.82rem; font-weight: 500; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tplp-sub {
  font-size: 0.7rem; color: var(--slate-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* HNA cross-page bridge CTA · floating bottom toast */
.hna-bridge-cta {
  position: fixed;
  bottom: 24px;
  left: 50%;
  z-index: 700;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 0.65rem 0.75rem 0.65rem 0.95rem;
  display: flex; align-items: center; gap: 0.7rem;
  box-shadow: 0 18px 36px -12px rgba(10,10,10,0.22);
  transform: translate(-50%, 80px); opacity: 0;
  transition: transform 280ms cubic-bezier(0.2, 0.6, 0.2, 1), opacity 200ms;
  font-family: var(--sans);
}
.hna-bridge-cta.is-open { transform: translate(-50%, 0); opacity: 1; }
.hbc-l { font-size: 0.84rem; color: var(--ink); }
.hbc-l strong { font-weight: 600; }
.hbc-go {
  background: var(--ink); color: var(--paper);
  border: none;
  padding: 0.4rem 0.75rem;
  border-radius: var(--r-sm);
  font-family: inherit; font-weight: 500; font-size: 0.78rem;
  cursor: pointer;
}
.hbc-go:hover { background: #1F1F1F; }
.hbc-x {
  background: none; border: none;
  width: 24px; height: 24px; border-radius: 50%;
  color: var(--slate-mute); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem; line-height: 1;
}
.hbc-x:hover { background: var(--rule-soft); color: var(--ink); }

/* ───────── HNA · clickable inline citations ───────── */
.hna-cite {
  font-family: var(--mono);
  font-size: 0.78em;
  color: var(--slate);
  text-decoration: none;
  background: var(--rule-soft);
  padding: 0.05em 0.35em;
  border-radius: 3px;
  border: 1px solid transparent;
  transition: all var(--motion-fast);
}
.hna-cite:hover {
  color: var(--ink);
  border-color: var(--slate-mute);
  background: var(--paper);
}
.hna-doc-sources .srcs-row.is-highlight {
  background: rgba(85,191,175,0.18);
  border-radius: var(--r-xs);
  transition: background 600ms ease-out;
  animation: cite-pulse 1.8s ease-out;
}
@keyframes cite-pulse {
  0% { background: rgba(85,191,175,0); }
  20% { background: rgba(85,191,175,0.35); }
  100% { background: rgba(85,191,175,0); }
}

/* ───────── HNA · Next-chapter banner (after mark-complete) ───────── */
.hna-next-chapter-banner {
  position: fixed;
  bottom: 24px;
  left: 50%;
  z-index: 700;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 0.9rem 1rem 0.9rem 1.1rem;
  display: flex; align-items: center; gap: 1rem;
  box-shadow: 0 20px 48px -16px rgba(10,10,10,0.28);
  max-width: 540px;
  min-width: 380px;
  transform: translate(-50%, 80px);
  opacity: 0;
  transition: transform 320ms cubic-bezier(0.2, 0.6, 0.2, 1), opacity 240ms;
}
.hna-next-chapter-banner.is-open { transform: translate(-50%, 0); opacity: 1; }
.hna-next-chapter-banner.is-celebrate {
  background: linear-gradient(135deg, rgba(85,191,175,0.12), rgba(16,185,129,0.06)), var(--paper);
  border-color: var(--positive, #10B981);
}
.hna-ncb-l { flex: 1; min-width: 0; }
.hna-ncb-eyebrow {
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--slate-mute); font-weight: 600;
  margin-bottom: 0.2rem;
}
.hna-ncb-title {
  font-size: 0.96rem; font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.15rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hna-ncb-meta { font-size: 0.72rem; color: var(--slate); }
.hna-ncb-go {
  background: var(--ink); color: var(--paper);
  border: none;
  padding: 0.55rem 0.9rem;
  border-radius: var(--r-sm);
  font-family: inherit; font-weight: 500; font-size: 0.84rem;
  cursor: pointer;
  flex: none;
}
.hna-ncb-go:hover { background: #1F1F1F; }
.hna-next-chapter-banner.is-celebrate .hna-ncb-go {
  background: var(--positive, #10B981);
}
.hna-next-chapter-banner.is-celebrate .hna-ncb-go:hover { background: #0F9F6E; }
.hna-ncb-x {
  background: none; border: none;
  width: 26px; height: 26px; border-radius: 50%;
  color: var(--slate-mute);
  cursor: pointer; font-size: 1.1rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
.hna-ncb-x:hover { background: var(--rule-soft); color: var(--ink); }

/* ───────── HNA · Mark-complete CTA at chapter bottom ───────── */
.hna-mark-complete {
  margin-top: 2rem;
  padding: 1rem 1.2rem;
  background: linear-gradient(135deg, rgba(85,191,175,0.08), rgba(76,134,255,0.05));
  border: 1px dashed var(--teal, #55BFAF);
  border-radius: var(--r);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.hna-mark-complete.is-complete {
  background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(85,191,175,0.05));
  border-color: var(--positive, #10B981);
  border-style: solid;
}
.hna-mc-l { flex: 1; min-width: 200px; }
.hna-mc-h { font-size: 0.94rem; font-weight: 600; color: var(--ink); margin-bottom: 0.2rem; }
.hna-mc-s { font-size: 0.78rem; color: var(--slate); }
.hna-mc-btn {
  background: var(--ink); color: var(--paper);
  border: none;
  padding: 0.55rem 1rem;
  border-radius: var(--r-sm);
  font-family: inherit; font-weight: 500; font-size: 0.86rem;
  cursor: pointer;
  flex: none;
  transition: all var(--motion-fast);
}
.hna-mark-complete.is-complete .hna-mc-btn {
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--slate);
}
.hna-mc-btn:hover { transform: translateY(-1px); }

/* ───────── HNA · Pre-flight modal ───────── */
.hna-preflight {
  position: fixed; inset: 0;
  z-index: 800;
  background: rgba(10,10,10,0.55);
  display: grid; place-items: center;
  padding: 24px;
  animation: cmdk-in 200ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
.hna-preflight[hidden] { display: none; }
.hna-preflight-card {
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: 0 32px 64px -16px rgba(10,10,10,0.32);
  max-width: 760px; width: 100%;
  max-height: 90vh; display: flex; flex-direction: column;
  overflow: hidden;
}
.hna-preflight-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 1.6rem 1.1rem;
  border-bottom: 1px solid var(--rule-soft);
}
.hna-preflight-eyebrow {
  font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--slate-mute); font-weight: 600; margin-bottom: 0.35rem;
}
#hna-preflight-title {
  font-family: var(--display); font-size: 1.4rem; font-weight: 500;
  letter-spacing: -0.012em; color: var(--ink);
  line-height: 1.1;
}
.hna-preflight-x {
  background: none; border: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  color: var(--slate);
  cursor: pointer;
  font-size: 1.4rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
.hna-preflight-x:hover { background: var(--ink); color: var(--paper); }
.hna-preflight-summary { padding: 1.1rem 1.6rem; border-bottom: 1px solid var(--rule-soft); }
.hna-preflight-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
}
.hna-pf-stat {
  padding: 0.7rem 0.85rem;
  background: var(--rule-soft);
  border-radius: var(--r-sm);
}
.hna-pf-stat.is-pass { background: rgba(16,185,129,0.1); }
.hna-pf-stat.is-pass .v { color: var(--positive, #10B981); }
.hna-pf-stat.is-warn { background: rgba(245,177,0,0.1); }
.hna-pf-stat.is-warn .v { color: #C58700; }
.hna-pf-stat .v {
  font-family: var(--mono);
  font-size: 1.05rem; font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.15rem;
}
.hna-pf-stat .l {
  font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--slate-soft); font-weight: 500;
}
.hna-preflight-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.7rem 1.6rem 0.5rem;
}
.hna-pf-row {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 0.9rem;
  padding: 0.85rem 0;
  border-bottom: 1px dashed var(--rule);
}
.hna-pf-row:last-child { border-bottom: none; }
.hna-pf-num {
  font-family: var(--mono); font-weight: 700; font-size: 0.72rem;
  background: var(--rule-soft); color: var(--slate);
  width: 28px; height: 28px;
  border-radius: var(--r-xs);
  display: inline-flex; align-items: center; justify-content: center;
}
.hna-pf-row.is-ready .hna-pf-num { background: var(--positive, #10B981); color: white; }
.hna-pf-row.is-progress .hna-pf-num { background: var(--teal, #55BFAF); color: var(--navy); }
.hna-pf-body { min-width: 0; }
.hna-pf-titlerow {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.7rem;
  margin-bottom: 0.35rem;
}
.hna-pf-link {
  font-size: 0.96rem; font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
}
.hna-pf-link:hover { border-bottom-color: var(--ink); }
.hna-pf-status {
  font-size: 0.7rem; color: var(--slate-mute); font-weight: 500;
  font-family: var(--mono);
}
.hna-pf-row.is-ready .hna-pf-status { color: var(--positive, #10B981); }
.hna-pf-checks {
  display: flex; flex-wrap: wrap; gap: 0.35rem;
  margin-bottom: 0.5rem;
}
.hna-pf-check {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.72rem;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: var(--rule-soft);
  color: var(--slate);
}
.hna-pf-check.is-pass { background: rgba(16,185,129,0.1); color: var(--positive, #10B981); }
.hna-pf-check.is-miss { background: rgba(220,38,38,0.07); color: var(--negative, #DC2626); }
.hna-pf-fix {
  background: var(--ink); color: var(--paper);
  border: none;
  padding: 0.35rem 0.65rem;
  border-radius: var(--r-xs);
  font-family: inherit; font-size: 0.74rem; font-weight: 500;
  cursor: pointer;
  margin-top: 0.2rem;
}
.hna-pf-fix:hover { background: #1F1F1F; }
.hna-preflight-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.6rem 1.2rem;
  border-top: 1px solid var(--rule-soft);
  background: var(--rule-soft);
}
.hna-preflight-tip { font-size: 0.74rem; color: var(--slate); }
.hna-preflight-close {
  background: var(--ink); color: var(--paper);
  border: none;
  padding: 0.55rem 1rem;
  border-radius: var(--r-sm);
  font-family: inherit; font-weight: 500; font-size: 0.86rem;
  cursor: pointer;
}

/* ───────── HNA · Recent activity panel ───────── */
.hna-activity {
  position: fixed;
  right: 18px; top: 142px;
  z-index: 400;
}
.hna-activity-tab {
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--slate);
  padding: 0.45rem 0.65rem;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.78rem; font-weight: 500;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.45rem;
  box-shadow: 0 4px 12px -4px rgba(10,10,10,0.12);
  transition: all var(--motion-fast);
}
.hna-activity-tab:hover { color: var(--ink); border-color: var(--slate-mute); }
.hna-activity-count {
  font-family: var(--mono);
  background: var(--ink);
  color: var(--paper);
  font-size: 0.66rem;
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  font-weight: 600;
}
.hna-activity-pop {
  position: absolute;
  top: calc(100% + 8px); right: 0;
  width: 340px;
  max-height: 420px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  box-shadow: 0 18px 36px -14px rgba(10,10,10,0.2);
  overflow: hidden;
  display: flex; flex-direction: column;
  animation: cmdk-in 180ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
.hna-activity-pop[hidden] { display: none; }
.hna-activity-h {
  padding: 0.7rem 0.85rem 0.55rem;
  font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--slate-mute); font-weight: 600;
  border-bottom: 1px solid var(--rule-soft);
}
.hna-activity-list {
  flex: 1;
  overflow-y: auto;
}
.hna-activity-item {
  display: flex; gap: 0.55rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--rule-soft);
  text-decoration: none; color: var(--ink);
  transition: background var(--motion-fast);
}
.hna-activity-item:last-child { border-bottom: none; }
.hna-activity-item:hover { background: var(--rule-soft); }
.hna-ai-pip {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal, #55BFAF), #4C86FF);
  color: white;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.7rem;
  flex: none;
  margin-top: 1px;
}
.hna-ai-pip.is-chart { background: linear-gradient(135deg, #F5B100, #E13D6F); }
.hna-ai-body { flex: 1; min-width: 0; }
.hna-ai-row1 {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 0.45rem;
  margin-bottom: 0.18rem;
}
.hna-ai-chapter {
  font-size: 0.76rem; font-weight: 500; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hna-ai-when {
  font-family: var(--mono); font-size: 0.66rem; color: var(--slate-mute);
}
.hna-ai-snippet {
  font-size: 0.74rem; color: var(--slate);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ───────── HNA · In-chapter TOC right rail ───────── */
.hna-toc {
  position: sticky;
  top: 20px;
  align-self: flex-start;
  width: 200px;
  margin-left: 1.5rem;
  padding: 0.85rem 1rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  font-family: var(--sans);
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}
.hna-toc-h {
  font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--slate-mute); font-weight: 600;
  margin-bottom: 0.6rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule-soft);
}
.hna-toc-list {
  list-style: none;
  padding: 0;
  display: flex; flex-direction: column;
  gap: 0.25rem;
  counter-reset: tocnum;
}
.hna-toc-list li {
  counter-increment: tocnum;
  font-size: 0.78rem;
  line-height: 1.4;
}
.hna-toc-list a {
  color: var(--slate);
  text-decoration: none;
  display: block;
  padding: 0.25rem 0.4rem;
  border-radius: var(--r-xs);
  border-left: 2px solid transparent;
  transition: all var(--motion-fast);
}
.hna-toc-list a:hover {
  color: var(--ink);
  background: var(--rule-soft);
  border-left-color: var(--teal, #55BFAF);
}
.hna-toc-list a::before {
  content: counter(tocnum, decimal-leading-zero) " · ";
  color: var(--slate-mute);
  font-family: var(--mono); font-size: 0.7em;
}
@media (max-width: 1200px) {
  .hna-toc { display: none; }
}

/* Canvas-pane keeps default block flow · the in-chapter TOC floats fixed
 * on the right edge instead of competing for grid space. */
.hna-toc {
  position: fixed;
  right: 22px;
  top: 132px;
  width: 200px;
  z-index: 40;
}
@media (max-width: 1280px) {
  .hna-toc { display: none; }
}

/* Export dropdown menu (canvas-actions) */
.hna-export-menu { position: relative; display: inline-block; }
.hna-export-menu > button {
  display: inline-flex; align-items: center; gap: 0.3rem;
}
.hna-export-menu > button .caret {
  font-size: 0.65rem; color: var(--slate-mute);
  transition: transform var(--motion-fast);
}
.hna-export-menu > button[aria-expanded="true"] .caret { transform: rotate(180deg); }
.hna-export-pop {
  position: absolute;
  top: calc(100% + 6px); right: 0;
  z-index: 500;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  box-shadow: 0 16px 32px -12px rgba(10,10,10,0.16);
  padding: 0.4rem;
  min-width: 260px;
  display: flex; flex-direction: column;
  gap: 0.1rem;
  animation: cmdk-in 160ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
.hna-export-pop[hidden] { display: none; }
.hna-export-pop button {
  display: flex; flex-direction: column;
  gap: 0.15rem;
  background: none; border: none;
  text-align: left;
  padding: 0.55rem 0.7rem;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  transition: background var(--motion-fast);
}
.hna-export-pop button:hover { background: var(--rule-soft); }
.hna-export-pop .lab { font-size: 0.86rem; font-weight: 500; }
.hna-export-pop .sub { font-size: 0.72rem; color: var(--slate-soft); }

/* ───────── HNA · Next steps guide panel (always-on per chapter) ───────── */
.hna-next {
  max-width: 820px;
  margin: 0 auto 1.4rem;
  padding: 0.85rem 1rem 0.95rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  position: relative;
  /* Left teal accent stripe so it reads as guidance, not chrome */
  border-left: 3px solid var(--teal, #55BFAF);
}
.hna-next-head {
  display: flex; align-items: center; gap: 0.55rem;
  margin-bottom: 0.65rem;
}
.hna-next-stage {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono); font-size: 0.6rem; font-weight: 600;
  padding: 0.16rem 0.55rem;
  border-radius: 999px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex: none;
}
.hna-next-title {
  font-size: 0.78rem; letter-spacing: 0.04em;
  color: var(--slate); font-weight: 500;
}
.hna-next-chips {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.45rem;
}
.hna-next-chip {
  display: grid;
  grid-template-columns: 26px 1fr 16px;
  align-items: center;
  gap: 0.6rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
  text-align: left;
  padding: 0.55rem 0.7rem;
  border-radius: var(--r-sm);
  font-family: inherit;
  cursor: pointer;
  transition: all var(--motion-fast);
  min-width: 0;
}
.hna-next-chip:hover {
  background: var(--rule-soft);
  border-color: var(--slate-mute);
  transform: translateY(-1px);
}
.hna-next-chip.primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  grid-column: 1 / -1;  /* primary action spans full width */
}
.hna-next-chip.primary:hover { background: #1F1F1F; }
.hna-next-chip .ico {
  width: 28px; height: 28px;
  border-radius: var(--r-xs);
  background: linear-gradient(135deg, var(--teal, #55BFAF), #4C86FF);
  color: white;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.9rem; font-weight: 600;
  flex: none;
}
.hna-next-chip.primary .ico {
  background: var(--paper); color: var(--ink);
}
.hna-next-chip .body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.hna-next-chip .lab {
  font-size: 0.86rem; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hna-next-chip .sub {
  font-size: 0.72rem; color: var(--slate-soft); font-weight: 400;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hna-next-chip.primary .sub { color: rgba(255,255,255,0.7); }
.hna-next-chip .arr {
  font-size: 0.9rem; color: var(--slate-mute);
  transition: transform var(--motion-fast);
}
.hna-next-chip:hover .arr { transform: translateX(2px); color: var(--ink); }
.hna-next-chip.primary .arr { color: rgba(255,255,255,0.8); }

@media (max-width: 720px) {
  .hna-next-chips { grid-template-columns: 1fr; }
  .hna-next-chip.primary { grid-column: 1; }
}

/* ───────── HNA · inline edit + chart figures ───────── */
.hna-edit-textarea {
  width: 100%;
  min-height: 120px;
  font-family: var(--sans);
  font-size: 0.95rem; line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--r-sm);
  padding: 0.7rem 0.85rem;
  resize: vertical;
  box-shadow: 0 0 0 3px var(--rule-soft);
  outline: none;
}
.hna-ai-edit-actions button.primary {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.hna-ai-edit-actions button.primary:hover { background: #1F1F1F; color: white; }
.hna-ai-edit-actions button.subtle { color: var(--slate-soft); }

.hna-figure {
  margin: 1.4rem 0 1.6rem;
  padding: 1rem 1rem 0.85rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  position: relative;
}
.hna-figure::before {
  content: "Figure";
  position: absolute;
  top: -8px; left: 14px;
  background: var(--paper);
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-mute); font-weight: 600;
  padding: 0 0.4rem;
}
.hna-figure .hna-figure-body {
  margin: 0.4rem 0 0.6rem;
}
.hna-figure .hna-figure-body .wgt-card {
  border: none;
  box-shadow: none;
  padding: 0.5rem 0.25rem;
}
.hna-figure figcaption {
  font-size: 0.82rem;
  color: var(--slate);
  font-style: italic;
  line-height: 1.55;
  padding-top: 0.55rem;
  border-top: 1px solid var(--rule-soft);
}

/* ─────────────────── COMPOSER (minimal · textarea + send) ─────────────────── */
.composer {
  flex: none;
  border-top: 1px solid var(--rule);
  background: var(--paper);
  padding: 0.7rem 0.9rem 0.85rem;
}
.composer-wrap {
  display: flex; align-items: flex-end;
  gap: 0.35rem;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--paper);
  padding: 0.3rem 0.35rem 0.3rem 0.15rem;
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.composer-wrap:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--rule-soft);
}
.composer textarea {
  flex: 1;
  border: none; outline: none; background: transparent;
  resize: none;
  padding: 0.55rem 0.6rem 0.55rem 0.7rem;
  font-family: var(--sans);
  font-size: 0.93rem; color: var(--ink);
  line-height: 1.5;
  min-height: 2.2em; max-height: 10em;
  overflow-y: auto;
}
.composer textarea::placeholder {
  color: var(--slate-mute);
  font-weight: 400;
}
.composer .send {
  flex: none;
  background: var(--ink); color: white;
  border: none;
  width: 30px; height: 30px;
  border-radius: var(--r-sm);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background var(--motion-fast), opacity var(--motion-fast), transform 60ms;
}
.composer .send:hover:not(:disabled) { background: #1F1F1F; }
.composer .send:active { transform: scale(0.96); }
.composer .send:disabled { opacity: 0.3; cursor: not-allowed; }
.composer .send svg { color: white; }
/* A tiny hint line below the composer · only ever visible at 'idle' empty-state
   so first-time users know the keyboard shortcuts. Hidden once they type. */
.composer-hint {
  padding: 0.4rem 0.25rem 0;
  font-size: 0.68rem;
  color: var(--slate-mute);
  display: flex; align-items: center; gap: 0.45rem;
  transition: opacity 160ms ease, max-height 200ms ease, padding 200ms ease;
  max-height: 28px; opacity: 0.9;
}
.composer-hint kbd {
  font-family: var(--mono); font-size: 0.62rem;
  background: var(--rule-soft); border: 1px solid var(--rule);
  padding: 0.04rem 0.3rem; border-radius: var(--r-xs);
  color: var(--slate);
}
.chat[data-composing="true"] .composer-hint,
.chat[data-has-turns="true"] .composer-hint {
  opacity: 0 !important;
  max-height: 0 !important;
  padding-top: 0 !important;
  pointer-events: none;
  overflow: hidden;
}
/* Legacy hidden — old composer-foot is no longer rendered */
.composer-foot, .composer-prompt {
  display: none !important;
}
.composer-foot .arr {
  background: transparent;
  width: auto; height: auto;
  font-weight: 500; font-size: 0.85rem;
}

/* ═══════════════════════════════════════════════════════════════════
 * CANVAS (RIGHT)
 * ═══════════════════════════════════════════════════════════════════ */
.canvas {
  background: var(--rule-bg);
  display: flex; flex-direction: column;
  min-height: 0;
}
.canvas-head {
  padding: 0 var(--gutter);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  height: 52px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex: none;
}
.canvas-head .page-label {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 0.86rem; font-weight: 600; color: var(--ink);
}
.canvas-head .page-label .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--positive);
}
.canvas-head .page-label small {
  font-size: 0.78rem;
  color: var(--slate-soft); font-weight: 400;
  margin-left: 0.4rem; letter-spacing: 0;
  text-transform: none;
}
.canvas-actions { display: flex; align-items: center; gap: 0.35rem; }
.canvas-actions .canvas-pill {
  display: inline-flex; align-items: center;
  padding: 0.32rem 0.7rem;
  background: var(--rule-soft);
  border-radius: 999px;
  font-size: 0.74rem;
  color: var(--slate);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  margin-right: 0.25rem;
}
.canvas-actions button {
  background: var(--paper); border: 1px solid var(--rule);
  color: var(--ink);
  padding: 0.4rem 0.75rem;
  border-radius: var(--r-sm);
  font-size: 0.78rem;
  cursor: pointer; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  transition: all var(--motion-fast);
}
.canvas-actions button:hover { background: var(--rule-soft); border-color: var(--slate-mute); }
.canvas-actions button:active { transform: scale(0.97); }
.canvas-actions .primary { background: var(--ink); color: white; border-color: var(--ink); }
.canvas-actions .primary:hover { background: #1F1F1F; color: white; }

.canvas-body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  background: var(--rule-bg);
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}
.canvas-body::-webkit-scrollbar { width: 8px; }
.canvas-body::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 999px; }
.canvas-body::-webkit-scrollbar-thumb:hover { background: var(--slate-mute); }
.canvas-pane { padding: clamp(2rem, 3.5vw, 3rem); max-width: 1280px; margin: 0 auto; }

/* ═══════════════════════════════════════════════════════════════════
 * CATCHMENT INSIGHTS STRIP (Dashboards canvas top)
 * AI-surfaced SEMPHN-specific equity findings · click to explore.
 * ═══════════════════════════════════════════════════════════════════ */
.catchment-insights {
  display: flex; align-items: stretch; gap: 0.7rem;
  padding: 0.85rem 1.4rem 0.95rem;
  background: var(--paper);
  border-bottom: 1px solid var(--rule-soft);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex: none;
  mask-image: linear-gradient(to right, black 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, black 94%, transparent);
}
.catchment-insights::-webkit-scrollbar { display: none; }
.catchment-insights:empty { display: none; }
.catchment-insights-label {
  flex: none;
  align-self: center;
  font-size: 0.66rem;
  color: var(--slate-mute);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  padding-right: 0.4rem;
  margin-right: 0.1rem;
  border-right: 1px solid var(--rule);
}

/* The insight chip · gradient stripe left, headline number + meta + ctx stacked */
.insight-chip {
  flex: none;
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.85rem 0.55rem 0.7rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left-width: 3px;
  border-radius: var(--r-sm);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: transform var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast);
  animation: chip-in 320ms cubic-bezier(0.2, 0.6, 0.2, 1) both;
  min-width: 0;
}
.insight-chip:hover {
  border-color: var(--ink);
  box-shadow: 0 6px 16px -8px rgba(10,10,10,0.18);
  transform: translateY(-1px);
}
.insight-chip:active { transform: translateY(0); }

/* Tone-coloured left stripe + arrow */
.insight-chip-warn  { border-left-color: #F59E0B; }
.insight-chip-alert { border-left-color: #EF4444; }
.insight-chip-info  { border-left-color: #4C86FF; }
.insight-chip-pos   { border-left-color: #10B981; }
.insight-chip-warn  .insight-arrow { color: #F59E0B; }
.insight-chip-alert .insight-arrow { color: #EF4444; }
.insight-chip-info  .insight-arrow { color: #4C86FF; }
.insight-chip-pos   .insight-arrow { color: #10B981; }

.insight-arrow {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  flex: none;
}
.insight-head {
  display: flex; flex-direction: column; min-width: 0;
  line-height: 1.15;
}
.insight-headline {
  font-family: var(--mono);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: baseline; gap: 0.2rem;
}
.insight-unit {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--slate-soft);
}
.insight-meta {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ink);
  margin-top: 0.1rem;
}
.insight-ctx {
  font-size: 0.66rem;
  color: var(--slate-soft);
  margin-top: 0.06rem;
}

/* ═══════════════════════════════════════════════════════════════════
 * WIDGET CARDS (Dashboards builder)
 * Figma-quality: white card, hairline border, no shadow at rest,
 * generous padding, big bold numbers
 * ═══════════════════════════════════════════════════════════════════ */
.wgt-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 1.4rem 1.5rem 1.5rem;
  display: flex; flex-direction: column; gap: 1rem;
  position: relative;
  overflow: hidden;
  transition: border-color var(--motion-fast), transform var(--motion-fast), box-shadow var(--motion-fast);
}
.wgt-card:hover {
  border-color: var(--slate-mute);
  box-shadow: 0 16px 36px -16px rgba(10,10,10,0.12), 0 4px 12px -4px rgba(10,10,10,0.06);
}
.wgt-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8rem; }
.wgt-title { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.wgt-t { font-size: 0.95rem; font-weight: 600; color: var(--ink); letter-spacing: -0.005em; line-height: 1.3; }
.wgt-s { font-size: 0.82rem; color: var(--slate-soft); font-weight: 400; line-height: 1.4; }
.wgt-actions { display: flex; gap: 0.1rem; flex: none; }
.wgt-actions button {
  background: none; border: none;
  color: var(--slate-mute); cursor: pointer;
  width: 26px; height: 26px;
  border-radius: var(--r-xs);
  display: grid; place-items: center;
  font-size: 1.1rem; line-height: 1;
  transition: all var(--motion-fast);
}
.wgt-actions button:hover { background: var(--rule-soft); color: var(--ink); }
.wgt-body { min-height: 60px; }
.wgt-foot {
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--slate-soft);
  letter-spacing: 0;
}
.wgt-svg, .wgt-chart {
  width: 100%; height: 260px; display: block;
}
/* ECharts container · the library injects its own canvas/svg.
   Force the container to claim its block + min size so init() picks up
   a real width even before paint. */
.wgt-chart { min-height: 260px; }
.wgt-chart > div { width: 100% !important; height: 100% !important; }

/* KPI tile · big bold number */
.wgt-kpi {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 0.8rem 0 0.5rem;
  position: relative;
  /* Colored category cue · stable per KPI title (JS-assigned via --kpi-color) */
  --kpi-color: #04264E;
  --kpi-color-light: #4C86FF;
}
/* Top accent stripe · subtle gradient strip showing the category color */
.wgt-kpi-accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--kpi-color), var(--kpi-color-light));
  border-radius: 999px;
}
.wgt-kpi .v {
  font-size: 2.8rem;
  font-weight: 600;
  background: linear-gradient(135deg, var(--kpi-color), var(--kpi-color-light));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--kpi-color); /* fallback */
  letter-spacing: -0.035em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.wgt-kpi .l {
  font-size: 0.78rem;
  color: var(--slate-mute);
  font-weight: 400;
}
.wgt-kpi .d {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.86rem;
  color: var(--slate-soft);
  font-weight: 500;
}
.wgt-kpi .delta {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.15rem 0.5rem;
  font-size: 0.78rem;
  border-radius: 999px;
  font-weight: 600;
}
.wgt-kpi .delta.up { color: var(--positive); background: rgba(16,185,129,0.1); }
.wgt-kpi .delta.up::before { content: "↑"; }
.wgt-kpi .delta.down { color: var(--negative); background: rgba(239,68,68,0.1); }
.wgt-kpi .delta.down::before { content: "↓"; }

/* Table tile */
.wgt-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.wgt-table thead th {
  text-align: left;
  background: var(--rule-bg);
  color: var(--slate-soft);
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--rule);
  text-transform: none;
  letter-spacing: 0;
}
.wgt-table tbody td {
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink);
}
.wgt-table tbody td.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.wgt-table tbody tr:last-child td { border-bottom: none; }
.wgt-table tbody tr:hover td { background: var(--rule-bg); }

.wgt-empty { padding: 1.4rem; text-align: center; color: var(--slate); font-size: 0.86rem; }

/* Kebab menu trigger */
.wgt-kebab {
  background: none !important;
  font-size: 1.2rem !important;
  line-height: 0.5 !important;
  letter-spacing: 0.08em;
}

/* Inline-rename title */
.wgt-title .wgt-t.is-editing {
  outline: none;
  background: var(--rule-soft);
  padding: 0.1rem 0.4rem;
  margin: -0.1rem -0.4rem;
  border-radius: var(--r-xs);
}

/* Kebab menu dropdown */
.wgt-menu {
  position: fixed;
  z-index: 250;
  min-width: 200px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  box-shadow: 0 12px 36px -8px rgba(10,10,10,0.18), 0 4px 12px -4px rgba(10,10,10,0.08);
  padding: 0.35rem;
  display: flex; flex-direction: column;
  animation: cmdk-in 140ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
.wgt-menu-item {
  background: none; border: none;
  text-align: left;
  padding: 0.5rem 0.7rem;
  border-radius: var(--r-sm);
  font-size: 0.86rem;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
  transition: background var(--motion-fast);
}
.wgt-menu-item:hover { background: var(--rule-soft); }
.wgt-menu-item.is-danger { color: var(--negative); }
.wgt-menu-item.is-danger:hover { background: rgba(239,68,68,0.08); }
.wgt-menu-sep {
  height: 1px; background: var(--rule-soft); margin: 0.3rem 0;
}

/* Leaflet choropleth wrapper */
.wgt-leaflet-wrap { display: flex; flex-direction: column; gap: 0.7rem; }
.wgt-leaflet {
  width: 100%;
  height: 420px;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--rule-soft);
  z-index: 0;  /* keep Leaflet panes below the kebab menu (z=250) */
}
/* Trim Leaflet's default chrome to fit our refined look */
.wgt-leaflet .leaflet-control-attribution {
  font-family: var(--sans); font-size: 9.5px;
  color: var(--slate-soft); background: rgba(255,255,255,0.85);
}
.wgt-leaflet .leaflet-control-zoom a {
  background: var(--paper); color: var(--ink);
  border-color: var(--rule);
  width: 28px; height: 28px; line-height: 28px;
  font-weight: 500;
}
.wgt-leaflet .leaflet-control-zoom a:hover { background: var(--rule-soft); }
.wgt-leaflet-tt {
  background: var(--paper) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px -8px rgba(10,10,10,0.18) !important;
  padding: 0.7rem 0.85rem !important;
  color: var(--ink) !important;
}
.wgt-leaflet-tt::before { display: none !important; }

/* Layer toggle (top-right) · refined to match the rest of the app */
.wgt-leaflet .leaflet-control-layers {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink);
  box-shadow: 0 4px 12px -2px rgba(10,10,10,0.08);
}
.wgt-leaflet .leaflet-control-layers-toggle {
  background-color: var(--paper) !important;
  width: 28px; height: 28px;
}
.wgt-leaflet .leaflet-control-layers label {
  font-size: 0.82rem; font-weight: 500; color: var(--ink);
}
.wgt-leaflet .leaflet-control-layers-expanded {
  padding: 0.45rem 0.65rem;
}

/* Locate-me + custom-button (top-right, stacked) */
.semphn-leaflet-ctl {
  display: block;
  width: 30px; height: 30px;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
  border-radius: var(--r-sm);
  margin-top: 6px;
  cursor: pointer;
  box-shadow: 0 4px 12px -2px rgba(10,10,10,0.08);
  display: grid; place-items: center;
  transition: background var(--motion-fast);
}
.semphn-leaflet-ctl:hover { background: var(--rule-soft); }
.semphn-leaflet-ctl.is-loading { opacity: 0.5; pointer-events: none; }

/* Search bar (top-left) */
.semphn-leaflet-search {
  display: flex; align-items: center; gap: 4px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 2px;
  box-shadow: 0 4px 12px -2px rgba(10,10,10,0.08);
}
.semphn-leaflet-search input {
  width: 220px;
  border: none; outline: none; background: transparent;
  font-family: var(--sans); font-size: 0.82rem;
  color: var(--ink);
  padding: 0.4rem 0.55rem;
}
.semphn-leaflet-search input::placeholder { color: var(--slate-mute); }
.semphn-leaflet-search button {
  background: var(--ink); color: var(--paper);
  border: none; border-radius: var(--r-xs);
  width: 30px; height: 30px;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background var(--motion-fast);
}
.semphn-leaflet-search button:hover { background: #1f1f1f; }
.semphn-leaflet-search button.is-loading { opacity: 0.5; pointer-events: none; }

/* Service-point markers · circular pin, glyph centered */
.semphn-marker { background: transparent !important; border: none !important; }
.semphn-marker-pin {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 700; font-size: 12px;
  line-height: 1;
  box-shadow: 0 3px 8px -2px rgba(10,10,10,0.4);
}

/* Cluster pin */
.semphn-cluster { background: transparent !important; border: none !important; }
.semphn-cluster-pin {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  display: grid; place-items: center;
  font-family: var(--mono); font-weight: 600; font-size: 13px;
  border: 3px solid #FFFFFF;
  box-shadow: 0 4px 12px -2px rgba(10,10,10,0.32);
}

/* Floating choropleth legend */
.semphn-leaflet-legend {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 0.55rem 0.75rem;
  font-family: var(--sans);
  box-shadow: 0 4px 12px -2px rgba(10,10,10,0.08);
}
.semphn-leaflet-legend .row {
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 0.78rem; color: var(--ink);
}
.semphn-leaflet-legend .v {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 0.74rem;
}
.semphn-leaflet-legend .bar {
  width: 110px; height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, #E5F4F0, #82D9C4 35%, #04264E 78%, #0A0A0A);
}
.semphn-leaflet-legend .lbl {
  font-size: 0.68rem; color: var(--slate-soft);
  margin-top: 0.25rem; text-align: center;
}

/* Active-layer indicator (top-left, below search) · shows what data is
   currently coloring the map + a × to clear it. */
.semphn-leaflet-indicator {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: 6px;
  padding: 0.4rem 0.55rem 0.4rem 0.75rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  box-shadow: 0 4px 12px -2px rgba(10,10,10,0.18);
  max-width: 320px;
}
.semphn-leaflet-indicator .d {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal-mint, #82D9C4);
  flex: none;
}
.semphn-leaflet-indicator .lab {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.semphn-leaflet-indicator button {
  background: none; border: none;
  color: var(--paper);
  width: 20px; height: 20px;
  display: grid; place-items: center;
  cursor: pointer;
  border-radius: 50%;
  font-size: 1rem;
  font-family: inherit;
  flex: none;
  opacity: 0.7;
  transition: opacity var(--motion-fast), background var(--motion-fast);
}
.semphn-leaflet-indicator button:hover { opacity: 1; background: rgba(255,255,255,0.15); }

/* Layer legend · top-right card showing active point-overlay types + counts */
.semphn-leaflet-layerlegend {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  box-shadow: 0 4px 14px -4px rgba(10,10,10,0.16);
  padding: 0.55rem 0.55rem 0.5rem;
  font-family: var(--sans);
  min-width: 200px;
  max-width: 260px;
}
.semphn-leaflet-layerlegend .hdr {
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--slate-mute); font-weight: 600;
  padding: 0 0.25rem 0.4rem; border-bottom: 1px solid var(--rule-soft);
  margin-bottom: 0.35rem;
}
.semphn-leaflet-layerlegend .row {
  display: grid;
  grid-template-columns: 14px 1fr auto 22px;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.25rem;
  border-radius: var(--r-xs);
  font-size: 0.78rem;
  color: var(--ink);
  transition: background var(--motion-fast);
}
.semphn-leaflet-layerlegend .row:hover { background: var(--rule-soft); }
.semphn-leaflet-layerlegend .dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
.semphn-leaflet-layerlegend .lab {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 500;
}
.semphn-leaflet-layerlegend .ct {
  font-family: var(--mono);
  font-size: 0.7rem;
  background: var(--rule-soft);
  border-radius: 999px;
  padding: 0.1rem 0.4rem;
  color: var(--slate);
  font-weight: 500;
}
.semphn-leaflet-layerlegend .x {
  background: none; border: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  color: var(--slate-mute);
  cursor: pointer;
  font-size: 0.9rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--motion-fast);
}
.semphn-leaflet-layerlegend .x:hover {
  background: var(--ink); color: var(--paper);
}

/* Accessibility ring labels (per service marker click) */
.semphn-ring-label {
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--paper);
  background: rgba(10,10,10,0.78);
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0.04em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  pointer-events: none;
}

/* ───────── LGA detail drawer · click-to-explore ───────── */
.lga-drawer {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 380px;
  background: var(--paper);
  border-left: 1px solid var(--rule);
  box-shadow: -20px 0 48px -16px rgba(10,10,10,0.18);
  z-index: 600;
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(0.2, 0.6, 0.2, 1);
  overflow-y: auto;
  padding: 1.4rem 1.4rem 2rem;
  font-family: var(--sans);
}
.lga-drawer.is-open { transform: translateX(0); }
.lga-drawer:empty { display: none; }

.lgadr-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 0.8rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--rule-soft);
  margin-bottom: 1rem;
}
.lgadr-corridor {
  font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--slate-mute); font-weight: 600;
  margin-bottom: 0.25rem;
}
.lgadr-name {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.7rem;
  letter-spacing: -0.012em;
  color: var(--navy, var(--ink));
  line-height: 1.05;
}
.lgadr-x {
  background: none; border: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  color: var(--slate);
  cursor: pointer;
  font-size: 1.4rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  transition: all var(--motion-fast);
}
.lgadr-x:hover { background: var(--ink); color: var(--paper); }

.lgadr-snap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
  margin-bottom: 1.4rem;
}
.lgadr-snap-cell {
  padding: 0.6rem 0.7rem;
  background: var(--rule-soft);
  border-radius: var(--r-sm);
}
.lgadr-snap-cell .v {
  font-family: var(--mono);
  font-size: 1rem; font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 0.12rem;
}
.lgadr-snap-cell .l {
  font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--slate-soft); font-weight: 500;
}

.lgadr-section-h {
  font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--slate-mute); font-weight: 600;
  margin: 1.4rem 0 0.55rem;
  display: flex; align-items: center; gap: 0.45rem;
}
.lgadr-section-ct {
  font-family: var(--mono); font-size: 0.7rem;
  background: var(--rule-soft);
  color: var(--slate);
  padding: 0.06rem 0.4rem;
  border-radius: 999px;
  letter-spacing: 0;
}

.lgadr-metrics {
  display: flex; flex-direction: column;
  gap: 0.05rem;
}
.lgadr-mrow {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.45rem 0.55rem;
  border-radius: var(--r-xs);
  font-size: 0.86rem;
  transition: background var(--motion-fast);
}
.lgadr-mrow:hover { background: var(--rule-soft); }
.lgadr-mlab { color: var(--slate); font-weight: 400; }
.lgadr-mval {
  font-family: var(--mono); font-size: 0.86rem; font-weight: 600;
  color: var(--ink);
}

.lgadr-prose {
  font-size: 0.86rem; line-height: 1.55;
  color: var(--slate);
  padding: 0.2rem 0.1rem;
}

.lgadr-svcs {
  display: flex; flex-direction: column;
  gap: 0.05rem;
  margin-bottom: 0.4rem;
}
.lgadr-svc-row {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center; gap: 0.55rem;
  padding: 0.4rem 0.55rem;
  border-radius: var(--r-xs);
  font-size: 0.84rem;
  transition: background var(--motion-fast);
}
.lgadr-svc-row:hover { background: var(--rule-soft); }
.lgadr-svc-dot {
  width: 10px; height: 10px; border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
.lgadr-svc-lab { color: var(--slate); }
.lgadr-svc-ct {
  font-family: var(--mono); font-weight: 600; color: var(--ink);
  font-size: 0.82rem;
}
.lgadr-svc-empty {
  padding: 0.55rem 0.6rem;
  font-size: 0.8rem; color: var(--slate-mute);
  font-style: italic;
}

.lgadr-actions {
  display: flex; flex-direction: column; gap: 0.45rem;
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule-soft);
}
.lgadr-cta {
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
  padding: 0.6rem 0.85rem;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: all var(--motion-fast);
}
.lgadr-cta:hover { background: var(--rule-soft); border-color: var(--slate-mute); }
.lgadr-cta.primary {
  background: var(--ink); color: var(--paper);
  border-color: var(--ink);
}
.lgadr-cta.primary:hover { background: #1F1F1F; }

/* SVG-cartogram fallback (kept for "cartogram" widget type) */
.wgt-choro-wrap { display: flex; flex-direction: column; gap: 0.7rem; }
svg.wgt-choro { width: 100%; height: auto; max-height: 380px; display: block; }
.wgt-choro-legend {
  display: flex; align-items: center; gap: 0.7rem;
  font-size: 0.74rem; color: var(--slate-soft); font-weight: 500;
}
.wgt-choro-legend .v {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.wgt-choro-legend .bar {
  flex: 1; max-width: 240px;
  height: 8px; border-radius: 999px;
}
.wgt-choro-legend .unit {
  margin-left: auto;
  font-family: var(--mono); font-size: 0.7rem;
  color: var(--slate-soft);
}

/* Drag-to-reorder visual states */
.wgt-card { transition: border-color var(--motion-fast), transform var(--motion-fast), opacity var(--motion-fast); }
.wgt-card[draggable="true"] { cursor: grab; }
.wgt-card[draggable="true"]:active { cursor: grabbing; }
.wgt-card.is-dragging { opacity: 0.45; transform: scale(0.99); }
.wgt-card.is-drag-over {
  border-color: var(--ink);
  border-style: dashed;
  border-width: 2px;
  margin: -1px;  /* compensate for the 1→2px border so layout doesn't jump */
}

/* Slash command menu (composer) */
.slash-menu {
  position: fixed;
  z-index: 250;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  box-shadow: 0 -12px 36px -8px rgba(10,10,10,0.18), 0 -4px 12px -4px rgba(10,10,10,0.08);
  padding: 0.4rem;
  display: flex; flex-direction: column;
  gap: 0.1rem;
  max-height: 320px; overflow-y: auto;
  animation: cmdk-in 140ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
.slash-menu-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 0.65rem;
  text-align: left;
  background: none; border: none;
  padding: 0.55rem 0.75rem;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--ink);
  cursor: pointer;
}
.slash-menu-item.is-on, .slash-menu-item:hover { background: var(--rule-soft); }
.slash-menu-item .trig {
  font-family: var(--mono); font-size: 0.78rem; font-weight: 500;
  color: var(--slate);
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 0.18rem 0.4rem;
  border-radius: var(--r-xs);
  text-align: center;
}
.slash-menu-item .lab { font-weight: 500; }
.slash-menu-item .hint { font-size: 0.76rem; color: var(--slate-soft); }
.slash-menu-empty {
  padding: 1rem; text-align: center; color: var(--slate); font-size: 0.86rem;
}

/* Type-ahead menu (composer) · live suggestions as user types */
.typeahead-menu {
  position: fixed;
  z-index: 250;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  box-shadow: 0 -12px 36px -8px rgba(10,10,10,0.18), 0 -4px 12px -4px rgba(10,10,10,0.08);
  padding: 0.4rem;
  display: flex; flex-direction: column;
  gap: 0.1rem;
  max-height: 320px; overflow-y: auto;
  animation: cmdk-in 140ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
.typeahead-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.3rem 0.6rem 0.4rem;
  font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--slate-soft);
  border-bottom: 1px solid var(--rule-soft);
  margin-bottom: 0.25rem;
  gap: 0.5rem;
}
.typeahead-head kbd {
  font-family: var(--mono); font-size: 0.66rem;
  background: var(--rule-soft); padding: 0.1rem 0.3rem;
  border-radius: var(--r-xs); color: var(--slate);
  letter-spacing: 0;
}
.typeahead-item {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 0.6rem;
  align-items: start;
  text-align: left;
  background: none; border: none;
  padding: 0.5rem 0.7rem;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 0.86rem;
  color: var(--ink);
  cursor: pointer;
}
.typeahead-item.is-on, .typeahead-item:hover { background: var(--rule-soft); }
.typeahead-item .ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  background: var(--rule-soft);
  border-radius: var(--r-xs);
  color: var(--slate);
  font-size: 0.76rem;
  font-family: var(--mono);
  margin-top: 1px;
}
.typeahead-item .body {
  display: flex; flex-direction: column; min-width: 0; gap: 0.18rem;
}
.typeahead-item .body .lab {
  font-weight: 500; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.typeahead-item .body .sec {
  font-size: 0.72rem; color: var(--slate-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.typeahead-item mark {
  background: rgba(245, 197, 24, 0.36);  /* amber highlight */
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════
 * STATUS BAR (BOTTOM)
 * ═══════════════════════════════════════════════════════════════════ */
.statusbar {
  background: var(--paper);
  border-top: 1px solid var(--rule);
  color: var(--slate-soft);
  height: var(--statush);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter);
  font-size: 0.74rem;
  font-weight: 400;
  flex: none;
}
.statusbar-left, .statusbar-right { display: inline-flex; align-items: center; gap: 1rem; }
.statusbar-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.statusbar-item.live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--positive);
}
.statusbar kbd {
  font-family: var(--mono);
  font-size: 0.66rem;
  background: var(--rule-soft);
  padding: 0.08rem 0.32rem;
  border-radius: 4px;
  color: var(--ink);
  border: 1px solid var(--rule);
  font-weight: 500;
  margin-right: 0.2rem;
}
.statusbar a { color: var(--slate); text-decoration: none; }
.statusbar a:hover { color: var(--ink); }
@media (max-width: 760px) {
  .statusbar { font-size: 0.68rem; padding: 0 1rem; }
  .statusbar-left, .statusbar-right { gap: 0.7rem; }
  .statusbar .hide-mobile { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
 * COMMAND PALETTE (⌘K)
 * ═══════════════════════════════════════════════════════════════════ */
.cmdk-backdrop {
  position: fixed; inset: 0;
  background: rgba(10,10,10,0.45);
  backdrop-filter: blur(6px);
  z-index: 200;
  display: grid; place-items: start center;
  padding-top: 14vh;
  animation: cmdk-bd-in 140ms ease-out;
}
@keyframes cmdk-bd-in { from { opacity: 0; } to { opacity: 1; } }
.cmdk {
  width: min(580px, 92vw);
  background: var(--paper);
  border-radius: var(--r-lg);
  border: 1px solid var(--rule);
  overflow: hidden;
  display: flex; flex-direction: column;
  animation: cmdk-in 180ms cubic-bezier(0.2, 0.6, 0.2, 1);
  max-height: 70vh;
  box-shadow: 0 24px 64px -16px rgba(10,10,10,0.18), 0 8px 24px -8px rgba(10,10,10,0.08);
}
@keyframes cmdk-in { from { opacity: 0; transform: translateY(-6px) scale(0.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
.cmdk-input-wrap {
  border-bottom: 1px solid var(--rule);
  padding: 0.95rem 1.2rem;
  display: flex; align-items: center; gap: 0.7rem;
}
.cmdk-input-wrap .ico { color: var(--slate-mute); font-size: 1.05rem; flex: none; }
.cmdk-input-wrap input {
  width: 100%;
  border: none; outline: none; background: transparent;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  padding: 0;
}
.cmdk-input-wrap input::placeholder { color: var(--slate-mute); }
.cmdk-input-wrap .esc {
  font-family: var(--mono); font-size: 0.66rem;
  background: var(--rule-soft);
  padding: 0.12rem 0.4rem;
  border-radius: 4px;
  color: var(--slate); font-weight: 500;
  border: 1px solid var(--rule);
}
.cmdk-list {
  list-style: none; padding: 0.5rem;
  margin: 0; overflow-y: auto; flex: 1;
}
.cmdk-section {
  font-size: 0.7rem; color: var(--slate-soft); font-weight: 500;
  padding: 0.7rem 0.9rem 0.3rem;
}
.cmdk-item {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.6rem 0.9rem;
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--ink);
  font-size: 0.92rem;
}
.cmdk-item.is-on { background: var(--rule-soft); }
.cmdk-item .ico {
  width: 26px; height: 26px;
  border-radius: var(--r-xs);
  background: var(--rule-soft);
  display: grid; place-items: center;
  color: var(--ink);
  font-size: 0.9rem;
  flex: none;
}
.cmdk-item.is-on .ico { background: var(--ink); color: white; }
.cmdk-item .label { flex: 1; }
.cmdk-item .sub { font-size: 0.76rem; color: var(--slate-soft); display: block; margin-top: 0.1rem; }
.cmdk-item .shortcut { font-family: var(--mono); font-size: 0.7rem; color: var(--slate-mute); }
.cmdk-empty { padding: 1.6rem; text-align: center; color: var(--slate); font-size: 0.88rem; }

/* ═══════════════════════════════════════════════════════════════════
 * TOAST NOTIFICATIONS (BOTTOM-RIGHT) — Figma "Done!" style
 * ═══════════════════════════════════════════════════════════════════ */
.toasts {
  position: fixed; bottom: calc(var(--statush) + 18px); right: 18px;
  z-index: 300;
  display: flex; flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  background: var(--ink);
  color: white;
  border-radius: 999px;
  padding: 0.7rem 1.1rem 0.7rem 0.9rem;
  font-size: 0.86rem;
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 0.55rem;
  min-width: 200px;
  box-shadow: 0 12px 32px -8px rgba(10,10,10,0.24), 0 4px 12px -2px rgba(10,10,10,0.1);
  animation: toast-in 220ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
.toast .ico {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.72rem; font-weight: 700;
  flex: none; color: var(--ink);
  background: var(--positive);
}
.toast.warn .ico { background: var(--warn); }
.toast.error .ico { background: var(--negative); color: white; }
.toast.is-out { animation: toast-out 220ms ease-in forwards; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateY(8px); }
}

/* ── HNA · per-section Add toolbar ────────────────────────────────────
   Renders directly under each section paragraph in the HNA chapter view.
   Lets the user inject a chart or map widget specific to the topic of
   that section without having to type a prompt. */
.hna-section-add {
  margin: 10px 0 22px;
  padding: 10px 12px;
  border: 1px dashed var(--rule);
  border-radius: 10px;
  background: linear-gradient(180deg, #FBFCFD 0%, #F5F8FA 100%);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  transition: border-color 180ms ease, background 180ms ease;
}
.hna-section-add:hover {
  border-color: var(--teal);
  background: linear-gradient(180deg, #F6FBFA 0%, #ECF6F3 100%);
}
.hna-sa-label {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--slate);
  flex: none;
}
.hna-sa-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 auto;
}
.hna-sa-chip {
  appearance: none;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-2);
  font: inherit;
  font-size: 0.78rem;
  line-height: 1;
  padding: 7px 11px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease,
              background 140ms ease, transform 100ms ease,
              box-shadow 140ms ease;
}
.hna-sa-chip:hover {
  border-color: var(--navy-mid);
  color: var(--navy);
  background: #F4F8FC;
  box-shadow: 0 1px 2px rgba(4, 38, 78, 0.08);
}
.hna-sa-chip:active { transform: translateY(1px); }
.hna-sa-chip .ico {
  font-size: 0.92rem;
  line-height: 1;
  opacity: 0.85;
}
.hna-sa-chip.is-chart .ico { color: var(--navy-mid); }
.hna-sa-chip.is-chart:hover .ico { color: var(--navy); opacity: 1; }
.hna-sa-chip.is-map {
  border-color: #DCEEEB;
  background: #F6FBFA;
}
.hna-sa-chip.is-map .ico { color: var(--teal); }
.hna-sa-chip.is-map:hover {
  border-color: var(--teal);
  color: var(--navy);
  background: var(--teal-pale);
}
.hna-sa-chip.is-map:hover .ico { color: #2FA792; opacity: 1; }
@media (max-width: 720px) {
  .hna-section-add { padding: 9px 10px; gap: 10px; }
  .hna-sa-label { font-size: 0.68rem; }
  .hna-sa-chip { font-size: 0.74rem; padding: 6px 10px; }
}

/* ── HNA · seed-paragraph wrappers with Keep/Edit/Discard controls ─── */
.hna-seed-deck,
.hna-seed-section {
  position: relative;
  padding: 6px 8px 8px;
  margin: 0 -8px 4px;
  border-radius: 8px;
  transition: background 160ms ease, box-shadow 160ms ease;
}
.hna-seed-deck:hover,
.hna-seed-section:hover {
  background: rgba(85, 191, 175, 0.04);
}
.hna-seed-deck.is-kept,
.hna-seed-section.is-kept {
  background: rgba(85, 191, 175, 0.06);
  border-left: 2px solid var(--teal);
  padding-left: 10px;
  margin-left: -10px;
}
.hna-seed-deck.is-dirty,
.hna-seed-section.is-dirty {
  background: rgba(76, 134, 255, 0.05);
}
.hna-seed-deck.is-dirty::before,
.hna-seed-section.is-dirty::before {
  content: 'edited';
  position: absolute;
  top: 6px; right: 8px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy-mid);
  background: var(--paper);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid #DCE6F4;
}
.hna-seed-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 10px;
  font-family: var(--sans);
}
.hna-seed-actions button {
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--slate);
  padding: 4px 9px;
  border-radius: var(--r-xs);
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--motion-fast);
}
.hna-seed-actions button:hover {
  color: var(--ink);
  border-color: var(--slate-mute);
  background: var(--rule-soft);
}
.hna-seed-actions button.primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.hna-seed-actions button.primary:hover { background: #1F1F1F; }
.hna-seed-actions button.subtle { color: var(--slate-soft); }
.hna-seed-actions button.is-kept {
  background: rgba(85, 191, 175, 0.12);
  border-color: var(--teal);
  color: var(--navy);
}
.hna-seed-actions button.danger:hover {
  color: var(--negative);
  border-color: var(--negative);
}
.hna-edit-heading-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.hna-edit-heading-row label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-soft);
}
.hna-edit-heading {
  width: 100%;
  font: inherit;
  font-weight: 600;
  font-size: 1.05rem;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper);
  color: var(--navy);
}
.hna-edit-heading:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(85, 191, 175, 0.18);
}

/* Discarded-paragraph restore strip · sits at chapter top */
.hna-discarded-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  margin-bottom: 14px;
  background: rgba(245, 158, 11, 0.06);
  border: 1px dashed rgba(245, 158, 11, 0.4);
  border-radius: 8px;
  font-size: 0.78rem;
}
.hna-discarded-label {
  font-weight: 600;
  color: #8A5A06;
  margin-right: 6px;
}
.hna-discarded-chip {
  appearance: none;
  border: 1px solid rgba(245, 158, 11, 0.5);
  background: var(--paper);
  color: var(--ink-2);
  padding: 4px 10px;
  border-radius: 999px;
  font: inherit;
  font-size: 0.74rem;
  cursor: pointer;
  transition: all 140ms ease;
}
.hna-discarded-chip:hover {
  border-color: #B7791F;
  background: #FFF6E5;
}
.hna-discarded-chip.is-danger {
  border-color: var(--rule);
  color: var(--slate);
  margin-left: auto;
}
.hna-discarded-chip.is-danger:hover {
  border-color: var(--negative);
  color: var(--negative);
  background: #FEF2F2;
}