/*
 * tsn.css — The Sales Nerd Signal shared design system
 * Generated 2026-04-24. Contains all CSS shared across 2+ pages.
 * Page-specific styles remain in each page's own <style> block.
 *
 * Section map:
 *   1. CSS Custom Properties (design tokens)
 *   2. Reset
 *   3. Typography baseline
 *   4. Layout primitives (main, grid helpers)
 *   5. Nav (#tsn-nav) — pulled from _nav.html
 *   6. Topbar (#topbar) — full-viewport / app-shell pages
 *   7. Chip system (.tsn-chip, .tsn-seg, .tsn-chip-row …)
 *   8. Filter chips (.filter-chip)
 *   9. View-tab switcher (.view-tabs / .view-tab)
 *  10. Status pills (.status-pill--*)
 *  11. Severity badges (.sev-*, .card-sev)
 *  12. Priority badges (.prio-badge)
 *  13. Buttons (.btn-small, toolbar-btn, add-form buttons)
 *  14. Stat cards (.stat-strip / .stat-card / .stat)
 *  15. Panel / card primitives (.panel, .card, .backlog-list, .entry-card)
 *  16. Add-form shared
 *  17. Search bar (#search-wrap / #search-input)
 *  18. Pending-filter strip (.pending-filter)
 *  19. Empty / loading states
 *  20. Pulse animation (@keyframes pulse)
 */

/* ═══════════════════════════════════════════════════════════════
   1. CSS CUSTOM PROPERTIES
   Two token families exist across pages — both are declared here.
   Family B (--page-bg / --brand-teal …) is the newer system used
   by most pages. Family A (--bg / --teal / --deep …) is used by
   the full-viewport canvas pages (heatmap, workshop, white-space,
   agent-gaps, positives-review). Values are intentionally aligned.
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* ── Family B — primary (most pages) ── */
  --page-bg:        #fafbfb;
  --panel-bg:       #ffffff;
  --border:         #CFDBDA;
  --text-primary:   #1F1F1F;
  --text-secondary: #5E5E5E;
  --text-muted:     #8a8a8a;
  --brand-teal:     #49C3C5;
  --brand-blue:     #1782D3;
  --brand-orange:   #FFAC4E;

  /* ── Family A — canvas/app-shell pages ── */
  --text:   #1F1F1F;
  --muted:  #5E5E5E;
  --teal:   #49C3C5;
  --deep:   #0E5353;
  --bg:     #FBFDFD;
  --panel:  #FFFFFF;
  --soft:   #F5F8F8;

  /* ── Severity & state shared across families ── */
  --approve:    #16a34a;  --approve-bg:  #dcfce7;
  --reject:     #dc2626;  --reject-bg:   #fee2e2;
  --pending:    #6b7280;  --pending-bg:  #f3f4f6;
  --amber:      #78350f;  --amber-bg:    #fef3c7;

  --critical:   #ef4444;
  --high:       #FFAC4E;
  --medium:     #3b82f6;
  --low:        #8a8a8a;

  /* ── Nav tokens (also declared inline in _nav.html style block) ── */
  --nav-text:   #1F1F1F;
  --nav-muted:  #5E5E5E;
  --nav-border: #CFDBDA;
  --nav-teal:   #49C3C5;
  --nav-blue:   #1782D3;
  --nav-bg:     #ffffff;

  /* ── Shared page-header tokens (2026-05-05) ── */
  --page-header-h: 96px;
  --stage-ring-sm: 28px;
}

/* ═══════════════════════════════════════════════════════════════
   2. RESET
   ═══════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ═══════════════════════════════════════════════════════════════
   3. TYPOGRAPHY BASELINE
   ═══════════════════════════════════════════════════════════════ */
body {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  background: var(--page-bg, var(--bg));
  color: var(--text-secondary, var(--text));
}

/* ═══════════════════════════════════════════════════════════════
   4. LAYOUT PRIMITIVES
   ═══════════════════════════════════════════════════════════════ */
main {
  margin: 0 auto;
  padding: 24px 32px 80px;
}
@media (max-width: 640px) {
  main { padding: 16px 12px 80px; }
}

h1 {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-primary, var(--text));
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.subtitle {
  font-size: 12px;
  color: var(--text-muted, var(--muted));
  margin-bottom: 20px;
}

/* ═══════════════════════════════════════════════════════════════
   5. GLOBAL NAV  (#tsn-nav)
   The _nav.html injects its own <style> block when renderTsnNav()
   runs. These rules mirror those so they apply even if the script
   loads after paint.
   ═══════════════════════════════════════════════════════════════ */
#tsn-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--nav-bg);
  border-top: 3px solid var(--nav-teal);
  border-bottom: 1px solid var(--nav-border);
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: 'Open Sans', -apple-system, sans-serif;
  font-size: 13px;
}
#tsn-nav .brand {
  font-weight: 800;
  color: var(--nav-text);
  font-size: 14px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
#tsn-nav .brand .dot { color: var(--nav-teal); }
#tsn-nav a {
  color: var(--nav-muted);
  text-decoration: none;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 4px;
  transition: all 0.1s;
}
#tsn-nav a:hover { background: #f0f7f7; color: var(--nav-text); }
#tsn-nav a.active { background: #D8F4F4; color: var(--nav-text); }
#tsn-nav .nav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
#tsn-nav .dropdown { position: relative; display: inline-block; }
#tsn-nav .dropdown-btn {
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 4px;
  color: var(--nav-muted);
  font-weight: 600;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: inherit;
}
#tsn-nav .dropdown-btn:hover { background: #f0f7f7; color: var(--nav-text); }
#tsn-nav .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid var(--nav-border);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  min-width: 160px;
  padding: 6px 0;
  z-index: 1500;
}
#tsn-nav .dropdown-menu a { display: block; padding: 6px 14px; border-radius: 0; }
#tsn-nav .dropdown:hover .dropdown-menu { display: block; }
#tsn-nav .view-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--nav-border);
  border-radius: 16px;
  padding: 3px;
  font-size: 11px;
  background: #fafbfb;
}
#tsn-nav .view-toggle button {
  border: none;
  background: transparent;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 12px;
  cursor: pointer;
  color: var(--nav-muted);
  font-family: inherit;
}
#tsn-nav .view-toggle button.active { background: var(--nav-teal); color: #1F1F1F; }
#tsn-nav .nav-cta {
  background: var(--nav-teal);
  color: #1F1F1F;
  padding: 6px 12px;
  border-radius: 4px;
  font-weight: 700;
}
#tsn-nav .nav-cta:hover { background: #3ab3b5; color: #fff; }
#tsn-nav .breadcrumb { font-size: 11px; color: var(--nav-muted); margin-left: 6px; }
#tsn-nav .breadcrumb strong { color: var(--nav-text); font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════
   6. TOPBAR — app-shell pages (heatmap, workshop, white-space,
      agent-gaps, positives-review). Scrolls with page; sits below
      global #tsn-nav (z-index 1000).
   ═══════════════════════════════════════════════════════════════ */
#topbar {
  padding: 12px 20px;
  border-top: 3px solid var(--teal, var(--brand-teal));
  border-bottom: 1px solid var(--border);
  background: var(--panel, var(--panel-bg));
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
#topbar h1 { font-size: 18px; font-weight: 800; margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════
   7. CHIP SYSTEM (.tsn-chip family)
   Used in positives-review, findings-review-enhanced, client-view
   ═══════════════════════════════════════════════════════════════ */
.tsn-chip {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  height: 26px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--panel, var(--panel-bg));
  color: var(--muted, var(--text-muted));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: border-color .12s, color .12s, background .12s;
}
.tsn-chip:hover { border-color: var(--teal, var(--brand-teal)); color: var(--text, var(--text-primary)); }
.tsn-chip:focus-visible { outline: 2px solid var(--teal, var(--brand-teal)); outline-offset: 1px; }
.tsn-chip.active { background: var(--deep, #0E5353); color: #fff; border-color: var(--deep, #0E5353); font-weight: 700; }

.tsn-chip-more {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  height: 26px;
  padding: 0 10px;
  border: 1px dashed var(--border);
  border-radius: 13px;
  background: transparent;
  color: var(--muted, var(--text-muted));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.tsn-chip-more:hover { color: var(--deep, #0E5353); border-color: var(--teal, var(--brand-teal)); border-style: solid; }

.tsn-chip-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted, var(--text-muted));
  margin-right: 6px;
  white-space: nowrap;
}
.tsn-chip-group { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tsn-chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.tsn-chip-sep { width: 1px; align-self: stretch; background: var(--border); margin: 2px 4px; }

/* Segmented control (.tsn-seg) — higher-weight mode switch */
.tsn-seg {
  display: inline-flex;
  background: var(--soft, #F5F8F8);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.tsn-seg button {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 16px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted, var(--text-muted));
  cursor: pointer;
}
.tsn-seg button:hover { color: var(--text, var(--text-primary)); }
.tsn-seg button.active { background: var(--deep, #0E5353); color: #fff; }

/* Sticky type bar — sits below global nav */
.tsn-type-bar {
  position: sticky;
  top: 48px;
  z-index: 80;
  background: var(--bg, var(--page-bg));
  padding: 8px 4px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border);
}
@media (max-width: 768px) { .tsn-type-bar { position: static; } }

/* ═══════════════════════════════════════════════════════════════
   8. FILTER CHIPS (.filter-chip)
   Simpler pill variant used on projects, deliverables, patterns,
   backlog, mike-todos, priority-board (client-chip).
   ═══════════════════════════════════════════════════════════════ */
.filter-chip {
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 16px;
  cursor: pointer;
  color: var(--text-secondary, var(--muted));
  transition: all 0.12s;
  font-family: inherit;
}
.filter-chip:hover { border-color: var(--brand-teal, var(--teal)); }
.filter-chip.active {
  background: var(--brand-teal, var(--teal));
  border-color: var(--brand-teal, var(--teal));
  color: #1F1F1F;
}

/* ═══════════════════════════════════════════════════════════════
   9. VIEW-TAB SWITCHER (.view-tabs / .view-tab)
   Used in backlog, priority-board, client-view
   ═══════════════════════════════════════════════════════════════ */
.view-tabs {
  display: inline-flex;
  background: #f3f4f6;
  padding: 3px;
  border-radius: 8px;
  margin-bottom: 20px;
  gap: 2px;
}
.view-tab {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary, var(--muted));
  padding: 8px 16px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
.view-tab.active {
  background: #fff;
  color: var(--text-primary, var(--text));
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ═══════════════════════════════════════════════════════════════
   10. STATUS PILLS (.status-pill--*)
   Shared across projects, project-detail, patterns, registry
   ═══════════════════════════════════════════════════════════════ */
.status-pill {
  display: inline-block;
  padding: 2px 9px;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 10px;
  white-space: nowrap;
}
.status-pill--complete    { background: #D8F4F4; color: #0f766e; }
.status-pill--in_progress { background: #e0f2fe; color: #0369a1; }
.status-pill--not_started { background: #fef3c7; color: #b45309; }
.status-pill--intake_only { background: #f3e8ff; color: #6b21a8; }
.status-pill--pending     { background: #fef3c7; color: #b45309; }
.status-pill--new         { background: #f5f5f5; color: #3f3f46; }

/* ═══════════════════════════════════════════════════════════════
   11. SEVERITY BADGES (.sev-*, .card-sev)
   Used in positives-review, project-plan, client-view, findings-review
   ═══════════════════════════════════════════════════════════════ */
.card-sev {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
}
.sev-CRITICAL { background: #fee2e2; color: #991b1b; }
.sev-HIGH     { background: #fef3c7; color: #b45309; }
.sev-MEDIUM   { background: #dbeafe; color: #1e40af; }
.sev-LOW      { background: #f3f4f6; color: #4b5563; }
.sev-POSITIVE { background: #d1fae5; color: #065f46; }

/* Card status pill (pending/approved/rejected) */
.card-status-pill {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
  margin-left: auto;
}
.card-status-pill.pending  { background: var(--pending-bg);  color: var(--pending);  }
.card-status-pill.approved { background: var(--approve-bg);  color: var(--approve);  }
.card-status-pill.rejected { background: var(--reject-bg);   color: var(--reject);   }

/* ═══════════════════════════════════════════════════════════════
   12. PRIORITY BADGES (.prio-badge)
   Shared across mike-todos and backlog
   ═══════════════════════════════════════════════════════════════ */
.prio-badge {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.prio-badge.critical { background: #fee2e2; color: #dc2626; }
.prio-badge.high     { background: #fef3c7; color: #b45309; }
.prio-badge.medium   { background: #dbeafe; color: #1e40af; }
.prio-badge.low      { background: #f3f4f6; color: #6b7280; }

/* ═══════════════════════════════════════════════════════════════
   13. BUTTONS — shared variants
   ═══════════════════════════════════════════════════════════════ */

/* toolbar-btn — used in project-plan, findings-review-enhanced */
.toolbar-btn {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-secondary, var(--muted));
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.12s;
  font-family: inherit;
}
.toolbar-btn:hover:not(:disabled) {
  background: #D8F4F4;
  border-color: var(--brand-teal, var(--teal));
}
.toolbar-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.toolbar-btn.primary {
  background: var(--brand-teal, var(--teal));
  color: #1F1F1F;
  border-color: var(--brand-teal, var(--teal));
  font-weight: 700;
}

/* btn-small — used in project-detail */
.btn-small {
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-primary, var(--text));
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
}
.btn-small:hover { border-color: var(--brand-teal, var(--teal)); }
.btn-small.danger:hover { border-color: #fca5a5; color: #991b1b; }

/* progress track — used in projects, home, intake */
.progress-track {
  height: 6px;
  background: #eef1f1;
  border-radius: 3px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-teal, var(--teal)), var(--brand-blue, #1782D3));
  border-radius: 3px;
  transition: width 0.3s;
}

/* ═══════════════════════════════════════════════════════════════
   14. STAT CARDS (.stat, .stat-card, .stat-strip)
   Shared across now, agent-gaps, dev-tools, positives-review
   ═══════════════════════════════════════════════════════════════ */
.stat-strip,
.stats-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.stat,
.stat-card {
  background: var(--panel, var(--panel-bg));
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
}
.stat-n {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary, var(--deep));
  line-height: 1;
  margin-bottom: 3px;
}
.stat-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted, var(--muted));
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ═══════════════════════════════════════════════════════════════
   15. PANEL / CARD PRIMITIVES
   ═══════════════════════════════════════════════════════════════ */

/* Generic panel box */
.panel {
  background: var(--panel, var(--panel-bg));
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 22px;
  margin-bottom: 16px;
}

/* Backlog-style list container */
.backlog-list {
  background: var(--panel-bg, var(--panel));
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

/* Entry card (registry, patterns) */
.entry-card {
  background: var(--panel-bg, var(--panel));
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}
.entry-hd {
  padding: 14px 18px;
  align-items: center;
  cursor: pointer;
  transition: background 0.1s;
}
.entry-hd:hover { background: #f0f9fa; }
.entry-card.expanded .entry-hd { background: #f0f9fa; border-bottom: 1px solid var(--border); }
.entry-caret {
  font-size: 16px;
  color: var(--text-muted, var(--muted));
  text-align: right;
  transition: transform 0.2s;
}
.entry-card.expanded .entry-caret { transform: rotate(90deg); color: var(--brand-teal, var(--teal)); }
.entry-body { display: none; padding: 18px 22px 22px; background: #fafbfc; }
.entry-card.expanded .entry-body { display: block; }

/* ═══════════════════════════════════════════════════════════════
   16. ADD-FORM SHARED
   Used in backlog, mike-todos
   ═══════════════════════════════════════════════════════════════ */
.add-form {
  background: var(--panel-bg, var(--panel));
  border: 2px dashed var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.add-form:focus-within { border-color: var(--brand-teal, var(--teal)); background: #f0fffe; }
.add-form input[type="text"] {
  flex: 1;
  min-width: 240px;
  font-family: inherit;
  font-size: 13px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary, var(--text));
  background: #fff;
}
.add-form input[type="text"]:focus { border-color: var(--brand-teal, var(--teal)); outline: none; }
.add-form select {
  font-family: inherit;
  font-size: 12px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--text-primary, var(--text));
}
.add-form button {
  font-size: 12px;
  font-weight: 800;
  padding: 9px 18px;
  background: var(--brand-teal, var(--teal));
  color: #1F1F1F;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
.add-form button:hover { background: #3ab3b5; color: #fff; }

/* ═══════════════════════════════════════════════════════════════
   17. SEARCH BAR (#search-wrap / #search-input)
   Used in positives-review, findings-review-enhanced
   ═══════════════════════════════════════════════════════════════ */
#search-wrap {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 20px;
  background: var(--panel, var(--panel-bg));
  border-bottom: 1px solid var(--border);
}
#search-input {
  flex: 1;
  max-width: 420px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-family: inherit;
  font-size: 13px;
  background: var(--panel, var(--panel-bg));
}
#search-input:focus { outline: none; border-color: var(--teal, var(--brand-teal)); }

/* ═══════════════════════════════════════════════════════════════
   18. PENDING-FILTER STRIP
   Used in positives-review (not sticky — wraps on many facets)
   ═══════════════════════════════════════════════════════════════ */
.pending-filter {
  background: var(--bg, var(--page-bg));
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-bottom: 16px;
}

/* ═══════════════════════════════════════════════════════════════
   19. EMPTY / LOADING STATES
   ═══════════════════════════════════════════════════════════════ */
.empty,
.empty-state {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-muted, var(--muted));
  font-style: italic;
}
.loading {
  padding: 40px;
  text-align: center;
  color: var(--text-muted, var(--muted));
  font-style: italic;
}
.count-pill {
  font-size: 11px;
  color: var(--text-muted, var(--muted));
  margin-left: auto;
}

/* ═══════════════════════════════════════════════════════════════
   20. ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* ═══════════════════════════════════════════════════════════════
   21. SHELL LAYOUT — Mockup B "Craft Light" sidebar shell
   Added 2026-04-24
   ═══════════════════════════════════════════════════════════════ */

/* ── Shell layout variables ── */
:root {
  --sidebar-w: 232px;
  --sidebar-bg: #1E293B;
  --sidebar-text: #E5E7EB;
  --sidebar-muted: #9CA3AF;
  --sidebar-active-bg: rgba(73,195,197,0.15);
  --sidebar-active-text: #49C3C5;
  --sidebar-hover-bg: rgba(255,255,255,0.06);
  --sidebar-border: #374151;
  --sidebar-section-label: #9CA3AF;
}

/* ── Discovery-phase light sidebar (applied by _nav.js for client roles outside Act) ── */
.tsn-sidebar.sidebar-light {
  --sidebar-bg: #F8F9FA;
  --sidebar-text: #111827;
  --sidebar-muted: #6B7280;
  --sidebar-active-bg: rgba(14,83,83,0.08);
  --sidebar-active-text: #0E5353;
  --sidebar-hover-bg: rgba(0,0,0,0.04);
  --sidebar-border: #E5E7EB;
  --sidebar-section-label: #6B7280;
}

/* ── Dark mode (toggle via <html data-theme="dark"> — not yet active) ── */
[data-theme="dark"] {
  --text: #F9FAFB;
  --muted: #9CA3AF;
  --border: #374151;
  --bg: #111827;
  --panel: #1F2937;
  --soft: #1F2937;
  --sidebar-bg: #1E293B;
  --sidebar-text: #E5E7EB;
  --sidebar-muted: #9CA3AF;
  --sidebar-active-bg: rgba(73,195,197,0.15);
  --sidebar-active-text: #49C3C5;
  --sidebar-hover-bg: rgba(255,255,255,0.06);
  --sidebar-border: #374151;
  --sidebar-section-label: #6B7280;
}

/* ── App shell ── */
.tsn-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
}
.tsn-sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}
.tsn-content {
  flex: 1;
  overflow-y: auto;
  min-width: 0;
  background: var(--panel);
}
/* Higher-specificity override: even when a page's own <style> block sets
   `main { max-width: 1280px; margin: 0 auto; ... }` (a leftover from the
   pre-sidebar horizontal-nav layout), the shell's main must still fill
   the available flex column. Without this, margin:auto + max-width on a
   flex child leaves large whitespace columns on either side of the
   content. 2026-04-24 shell-migration fix. */
main.tsn-content,
.tsn-shell > main.tsn-content {
  max-width: none;
  width: auto;
  margin: 0;
  flex: 1;
  overflow-y: auto;
  min-width: 0;
}

/* Sidebar: space switcher */
.tsn-workspace {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 14px 12px;
  border-bottom: 1px solid var(--sidebar-border);
  cursor: pointer;
}
.tsn-workspace-avatar {
  width: 28px; height: 28px;
  background: linear-gradient(135deg, #49C3C5 0%, #0E5353 100%);
  color: #fff;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  flex-shrink: 0;
}
.tsn-workspace-name {
  font-size: 13px; font-weight: 600; color: var(--sidebar-text);
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tsn-workspace-chevron {
  color: var(--sidebar-muted); font-size: 10px; flex-shrink: 0;
}

/* Sidebar: nav */
.tsn-nav { flex: 1; padding: 8px 0; }
/* Section header label in the global nav (e.g. "PROJECTS") */
.tsn-nav-section-hd {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sidebar-muted);
  padding: 14px 14px 4px;
  user-select: none;
}
.tsn-space { }
.tsn-space-header {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--sidebar-text);
  border-radius: 6px; margin: 0 6px;
  transition: background 0.1s;
  user-select: none;
}
.tsn-space-header:hover { background: var(--sidebar-hover-bg); }
.tsn-space-link { text-decoration: none; }
.tsn-space-header.active { color: var(--sidebar-active-text); }
/* Top-level sidebar items (Home, Prioritize, Plan, Act) emitted by
   topItem() in _nav.js — they're plain links, not folder toggles. */
.tsn-space-header--top { cursor: default; }
.tsn-space-chevron {
  margin-left: auto; font-size: 10px; color: var(--sidebar-muted);
  transition: transform 0.15s;
}
.tsn-space.open .tsn-space-chevron { transform: rotate(90deg); }
.tsn-space-items { display: none; padding: 2px 0 4px; }
.tsn-space.open > .tsn-space-items { display: block; }
.tsn-space-items .tsn-nav-item { padding-left: 38px; font-size: 12.5px; }
.tsn-nav-item {
  display: block; padding: 5px 14px 5px 30px;
  font-size: 13px; color: var(--sidebar-muted);
  border-radius: 6px; margin: 1px 6px;
  cursor: pointer; text-decoration: none;
  transition: background 0.1s, color 0.1s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tsn-nav-item:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-text); }
.tsn-nav-item.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
  font-weight: 600;
}

/* Coming soon placeholder (for stages/pages not yet wired) */
.coming-soon {
  max-width: 560px;
  margin: 80px auto;
  padding: 40px 32px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
.coming-soon__badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: #EEF9F9;
  color: var(--teal, #0E5353);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.coming-soon__title {
  font-size: 28px;
  font-weight: 800;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
  color: var(--text);
}
.coming-soon__body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 24px;
}
.coming-soon__back {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.1s;
}
.coming-soon__back:hover {
  border-color: var(--teal, #49C3C5);
  color: var(--text);
}

/* Sidebar: project-scoped variant */
.tsn-project-back {
  display: block; margin: 4px 10px 8px;
  padding: 5px 10px;
  font-size: 11.5px; font-weight: 600;
  color: var(--sidebar-muted);
  text-decoration: none; border-radius: 6px;
  transition: background 0.1s, color 0.1s;
}
.tsn-project-back:hover {
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-text);
}
.tsn-nav--project { padding: 2px 0; }
.tsn-nav-divider { height: 1px; background: var(--sidebar-border); margin: 8px 14px; }
.tsn-nav-item--project {
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
}

/* Sidebar: project-level "⋯ More" menu (Archive / Delete hidden behind toggle) */
.tsn-project-actions {
  margin: auto 0 0;
  padding: 6px 10px 4px;
  border-top: 1px solid var(--sidebar-border);
  position: relative;
}
.tsn-project-more-btn {
  width: 100%;
  padding: 5px 10px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  color: var(--sidebar-muted);
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s, color 0.1s;
}
.tsn-project-more-btn:hover,
.tsn-project-more-btn.open {
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-text);
}
.tsn-project-more-menu {
  flex-direction: column;
  gap: 2px;
  padding: 4px 0;
  background: var(--sidebar-bg);
  border: 1px solid var(--sidebar-border);
  border-radius: 6px;
  margin-top: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.tsn-project-more-menu button {
  width: 100%;
  padding: 7px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--sidebar-text);
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s;
}
.tsn-project-more-menu button:hover { background: var(--sidebar-hover-bg); }
.tsn-project-more-menu button.danger { color: #dc2626; }
.tsn-project-more-menu button.danger:hover { background: rgba(220,38,38,0.08); }

/* Sidebar: user footer */
.tsn-sidebar-footer {
  padding: 10px 14px;
  border-top: 1px solid var(--sidebar-border);
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.tsn-user-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, #49C3C5, #0E5353);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.tsn-user-name {
  font-size: 12px; font-weight: 500; color: var(--sidebar-text);
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tsn-settings-btn {
  background: none; border: none; cursor: pointer;
  color: var(--sidebar-muted); font-size: 14px; padding: 2px;
  border-radius: 4px; line-height: 1;
}
.tsn-settings-btn:hover { color: var(--sidebar-text); background: var(--sidebar-hover-bg); }
.tsn-logout-btn {
  font-size: 11px; color: var(--sidebar-muted); text-decoration: none;
  margin-left: auto; padding: 3px 8px; border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.tsn-logout-btn:hover { color: var(--sidebar-text); background: var(--sidebar-hover-bg); }

/* ── 22. Project sub-page topbar (.proj-topbar) ──────────────────────────────
   Consistent breadcrumb header used by all /project/{slug}/* pages.
   ──────────────────────────────────────────────────────────────────────────── */
.proj-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.proj-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}
.proj-crumb-back {
  color: var(--brand-teal);
  text-decoration: none;
  font-weight: 700;
  padding: 5px 10px;
  border: 1px solid var(--brand-teal);
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.proj-crumb-back:hover { background: var(--brand-teal); color: #fff; }
.proj-crumb-sep { color: var(--text-muted); font-weight: 400; }
.proj-crumb-client {
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 700;
  padding: 4px 8px;
  background: #f0f9fa;
  border-radius: 5px;
  white-space: nowrap;
  transition: background 0.12s;
}
.proj-crumb-client:hover { background: #d8f4f4; }
.proj-crumb-section {
  color: var(--text-muted);
  font-weight: 600;
}
.proj-topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-left: auto;
}

/* ═══════════════════════════════════════════════════════════════
   23. SHARED PAGE HEADER (.tsn-page-header)
   Used across every /project/{slug}/* page. Renders client name,
   subtitle, optional right-slot, and a compact stage stepper.
   Spec: ops/knowledge/design/page-header-spec.md (2026-05-05)
   ═══════════════════════════════════════════════════════════════ */
.tsn-page-header {
  position: relative;
  background: var(--panel-bg, var(--panel));
  border-bottom: 1px solid var(--border);
  padding: 16px 32px 0;
}
.tsn-page-header.is-sticky {
  position: sticky;
  top: 0;
  z-index: 200;
}
.tsn-page-header__identity {
  margin-bottom: 10px;
}
.tsn-page-header__client {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-primary, var(--text));
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.tsn-page-header__subtitle {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted, var(--muted));
  margin-top: 2px;
}
.tsn-page-header__right {
  position: absolute;
  right: 32px;
  top: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tsn-page-header__stages {
  border-top: 1px solid var(--border);
  margin-top: 10px;
  padding: 12px 0 14px;
}

/* Stage stepper inside the header */
.tsn-stage-nav {
  display: flex;
  align-items: flex-start;
  width: 100%;
}
.tsn-stage-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 80px;
  text-decoration: none;
  cursor: pointer;
}
.tsn-stage-node:last-child { cursor: default; }
.tsn-stage-conn {
  flex: 1;
  height: 2px;
  margin-top: 13px;
  min-width: 8px;
  background: #e5e7eb;
  border-radius: 1px;
  transition: background 0.2s;
}
.tsn-stage-conn--done { background: var(--brand-teal, var(--teal)); }

.tsn-stage-ring {
  width: var(--stage-ring-sm);
  height: var(--stage-ring-sm);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 800;
  transition: all 0.15s;
}
.tsn-stage-node--done .tsn-stage-ring {
  background: var(--brand-teal, var(--teal));
  color: #fff;
}
.tsn-stage-node--current .tsn-stage-ring {
  background: #0E5353;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(14, 83, 83, 0.12);
}
.tsn-stage-node--warning .tsn-stage-ring {
  background: #f97316;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.15);
}
.tsn-stage-node--not-started .tsn-stage-ring {
  background: #f3f4f6;
  color: #9ca3af;
  border: 1.5px solid #e5e7eb;
}
.tsn-stage-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
}
.tsn-stage-node--done .tsn-stage-label    { color: #0f766e; }
.tsn-stage-node--current .tsn-stage-label { color: #0E5353; }
.tsn-stage-node--warning .tsn-stage-label { color: #c2410c; }
.tsn-stage-node--not-started .tsn-stage-label { color: var(--text-muted, var(--muted)); }
.tsn-stage-meta {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted, var(--muted));
  text-align: center;
  line-height: 1.35;
  max-width: 110px;
  word-break: break-word;
}
.tsn-stage-node--warning .tsn-stage-meta { color: #ea580c; font-weight: 600; }

/* Narrow viewport: stages scroll horizontally; right-slot hides under 900px;
   meta hides under 640px (per spec). */
@media (max-width: 900px) {
  .tsn-page-header { padding: 14px 18px 0; }
  .tsn-page-header__right { display: none; }
  .tsn-page-header__stages {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tsn-stage-nav { min-width: 560px; }
}
@media (max-width: 640px) {
  .tsn-stage-meta { display: none; }
  .tsn-page-header__client { font-size: 22px; }
}

/* ═══════════════════════════════════════════════════════════════
   24. CLIENT-ROLE VISIBILITY
   When /api/me returns role=client, _nav.js adds
   body.tsn-role-client. These rules hide admin-only elements
   and make admin-editable regions read-only for clients.
   ═══════════════════════════════════════════════════════════════ */
body.tsn-role-client .admin-only,
body.tsn-role-client [data-admin-only] {
  display: none !important;
}

body.tsn-role-client .admin-editable {
  pointer-events: none;
  user-select: text;
  cursor: default;
}

/* ═══════════════════════════════════════════════════════════════
   25. PROJECT RISKS PANEL
   Shared across act-tasks.html, act-home.html, project-health.html.
   Uses standard token family (--reject-bg, --approve, --amber, etc.)
   ═══════════════════════════════════════════════════════════════ */
.risks-panel { margin-bottom: 16px; background: var(--panel-bg); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.risks-panel.is-collapsed .risks-panel-hd { border-bottom: none; }
.risks-panel-hd { padding: 10px 16px; background: #fafbfb; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
.risks-panel-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-primary); flex-shrink: 0; }
.risks-tally { display: flex; gap: 6px; align-items: center; flex: 1; }
.risk-tally-pill { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; white-space: nowrap; }
.risk-tally-pill.open      { background: var(--reject-bg);  color: var(--reject); }
.risk-tally-pill.watching  { background: var(--amber-bg);   color: var(--amber); }
.risk-tally-pill.mitigated { background: var(--approve-bg); color: var(--approve); }
.risk-tally-pill.none      { background: var(--soft, #F5F8F8); color: var(--text-muted); }
.risks-items { padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; }
.risk-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 6px; background: #fff; border: 1px solid var(--border); font-size: 12px; cursor: pointer; transition: border-color 0.12s; }
.risk-item:hover { border-color: var(--brand-teal, #0e5353); }
.risk-item-severity-dot { flex: 0 0 8px; height: 8px; width: 8px; border-radius: 50%; margin-top: 4px; }
.risk-item-severity-dot.high   { background: var(--critical); }
.risk-item-severity-dot.medium { background: var(--high); }
.risk-item-severity-dot.low    { background: var(--low); }
.risk-item-body { flex: 1; min-width: 0; }
.risk-item-title { font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.risk-item-meta { display: flex; gap: 8px; margin-top: 3px; align-items: center; flex-wrap: wrap; }
.risk-item-status { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.risk-item-status.open      { background: var(--reject-bg);  color: var(--reject); }
.risk-item-status.watching  { background: var(--amber-bg);   color: var(--amber); }
.risk-item-status.mitigated { background: var(--approve-bg); color: var(--approve); }
.risk-item-status.closed    { background: var(--soft, #F5F8F8); color: var(--text-muted); }
.risk-item-phase { font-size: 10px; color: var(--text-muted); }
.risk-item-actions { display: flex; gap: 4px; margin-left: auto; flex-shrink: 0; }
.risk-item-action-btn { font-size: 10px; font-weight: 600; color: var(--text-muted); background: none; border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; cursor: pointer; line-height: 1.6; }
.risk-item-action-btn:hover { border-color: var(--brand-teal); color: var(--text-primary); }
.risk-item-action-btn.danger:hover { border-color: var(--reject); color: var(--reject); }
.risks-empty { padding: 20px 16px; text-align: center; color: var(--text-muted); font-size: 12px; font-style: italic; }
.risks-panel-add-btn { font-size: 11px; font-weight: 700; color: var(--brand-teal); background: none; border: 1px solid var(--brand-teal); border-radius: 6px; padding: 3px 10px; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.risks-panel-add-btn:hover { background: var(--brand-teal); color: #1F1F1F; }
.risks-panel-toggle { font-size: 10px; font-weight: 600; color: var(--text-muted); background: none; border: none; cursor: pointer; padding: 2px 4px; flex-shrink: 0; line-height: 1; }
.risks-panel-toggle:hover { color: var(--text-primary); }
.risk-form { padding: 10px 12px; border-top: 1px solid var(--border); background: #fafbfb; display: flex; flex-direction: column; gap: 8px; }
.risk-form__title { font-size: 13px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; outline: none; width: 100%; box-sizing: border-box; }
.risk-form__title:focus { border-color: var(--brand-teal); }
.risk-form__row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.risk-form__label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.risk-form__seg { display: flex; gap: 2px; }
.risk-form__seg-btn { font-size: 11px; font-weight: 600; padding: 3px 9px; border: 1px solid var(--border); border-radius: 5px; background: #fff; cursor: pointer; color: var(--text-secondary); }
.risk-form__seg-btn:hover { border-color: var(--brand-teal); }
.risk-form__seg-btn.active { background: var(--deep, #0E5353); color: #fff; border-color: var(--deep, #0E5353); }
.risk-form__select { font-size: 12px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 5px; outline: none; background: #fff; }
.risk-form__select:focus { border-color: var(--brand-teal); }
.risk-form__actions { display: flex; gap: 6px; align-items: center; }
.risk-form__save { font-size: 12px; font-weight: 700; background: var(--deep, #0E5353); color: #fff; border: none; border-radius: 6px; padding: 5px 14px; cursor: pointer; }
.risk-form__save:hover { background: var(--brand-teal); color: #1F1F1F; }
.risk-form__cancel { font-size: 12px; font-weight: 600; background: none; border: 1px solid var(--border); border-radius: 6px; padding: 5px 12px; cursor: pointer; color: var(--text-muted); }
.risk-form__cancel:hover { border-color: var(--text-muted); color: var(--text-primary); }
.risk-form__error { font-size: 11px; color: var(--reject); font-weight: 600; }