/* Alex Demo — premium UX layer (Cmd+K · workspace · studio · report builder · branding).
 * Layered on top of base.css + components.css; never overridden. */

/* ============================================================
   1. Cmd+K modal
   ============================================================ */

#cmdk-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 1rem 1rem;
  opacity: 0;
  transition: opacity .16s ease-out;
}
#cmdk-modal.cmdk-open { opacity: 1; }

.cmdk-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}

.cmdk-panel {
  position: relative;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  width: min(640px, 100%);
  max-height: 70vh;
  display: flex; flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.5);
  overflow: hidden;
  transform: translateY(-8px);
  transition: transform .16s ease-out;
}
.cmdk-open .cmdk-panel { transform: translateY(0); }

.cmdk-header {
  display: flex; align-items: center; gap: .65rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--color-border);
}
.cmdk-icon {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .75rem;
  color: var(--color-purple);
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: .25rem .45rem;
  white-space: nowrap;
}
.cmdk-input {
  flex: 1;
  border: none; outline: none;
  font: inherit;
  font-size: 1rem;
  color: var(--color-ink);
  background: transparent;
}
.cmdk-kbd {
  font-family: var(--font-mono);
  font-size: .65rem;
  padding: .15rem .35rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-muted);
}

.cmdk-results { flex: 1; overflow-y: auto; padding: .3rem; }

.cmdk-row {
  display: flex; align-items: center; gap: .75rem;
  padding: .55rem .65rem;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--color-ink);
  transition: background .08s ease-out;
}
.cmdk-row:hover, .cmdk-row--selected { background: rgba(65,52,148,.08); text-decoration: none; }
.cmdk-row-icon { font-size: 1rem; width: 1.2rem; text-align: center; color: var(--color-charcoal); }
.cmdk-row-content { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cmdk-row-title { font-family: var(--font-heading); font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-row-subtitle { font-size: .75rem; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cmdk-tag {
  font-family: var(--font-heading);
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  padding: .15rem .45rem;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-charcoal);
  white-space: nowrap;
}
.cmdk-tag--domain { background: rgba(94,174,224,.15); color: var(--color-blue); }
.cmdk-tag--tier { background: rgba(65,52,148,.12); color: var(--color-purple); }
.cmdk-tag--feature { background: rgba(249,194,10,.18); color: #8a6900; }
.cmdk-tag--tenant { background: rgba(130,195,65,.15); color: #4d7d22; }
.cmdk-tag--soc { background: rgba(229,40,35,.10); color: var(--color-red); }
.cmdk-tag--section { background: rgba(206,80,157,.12); color: var(--color-pink); }
.cmdk-tag--recent { background: var(--color-surface); }

.cmdk-skeleton-row { padding: .55rem .65rem; }
.cmdk-skeleton-line {
  height: 1rem; border-radius: 4px;
  background: linear-gradient(90deg, var(--color-surface) 0%, #ebebef 50%, var(--color-surface) 100%);
  background-size: 200% 100%;
  animation: cmdk-shimmer 1.2s linear infinite;
}
@keyframes cmdk-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

.cmdk-empty { padding: 1.5rem; text-align: center; color: var(--color-muted); font-size: .9rem; }
.cmdk-empty code { background: var(--color-surface); padding: .1rem .35rem; border-radius: 4px; font-family: var(--font-mono); }

.cmdk-footer {
  display: flex; align-items: center; gap: 1rem;
  padding: .5rem 1rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: .7rem;
  color: var(--color-muted);
}
.cmdk-footer kbd {
  font-family: var(--font-mono);
  font-size: .65rem;
  padding: .1rem .3rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 3px;
}
.cmdk-spacer { flex: 1; }
.cmdk-brand { font-family: var(--font-heading); font-weight: 600; color: var(--color-purple); }

/* ============================================================
   2. Cmd+K trigger button (sidebar)
   ============================================================ */

.cmdk-trigger {
  display: flex; align-items: center; gap: .5rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: .4rem .7rem;
  font-family: var(--font-heading);
  font-size: .82rem;
  color: var(--color-muted);
  cursor: pointer;
  width: 100%;
  transition: border-color .15s, color .15s;
}
.cmdk-trigger:hover { border-color: var(--color-purple); color: var(--color-purple); }
.cmdk-trigger-text { flex: 1; text-align: left; }
.cmdk-trigger-kbd {
  font-family: var(--font-mono);
  font-size: .65rem;
  padding: .1rem .35rem;
  background: var(--color-surface);
  border-radius: 3px;
}

/* ============================================================
   3. Tier badge
   ============================================================ */

.tier-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .15rem .55rem;
  font-family: var(--font-heading);
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-radius: 999px;
  background: rgba(65,52,148,.1);
  color: var(--color-purple);
}
.tier-badge--locked { background: rgba(108,117,125,.12); color: var(--color-muted); }

/* ============================================================
   4. Workspace / Personal Dashboard
   ============================================================ */

.workspace-shell { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem 2rem; }
.workspace-header { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.workspace-header h1 { color: var(--color-purple); margin: 0; }
.workspace-tabs { display: flex; gap: .5rem; flex-wrap: wrap; }
.workspace-tab {
  padding: .4rem .85rem;
  font-family: var(--font-heading);
  font-size: .85rem;
  font-weight: 600;
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
  text-decoration: none;
  border: 1px solid transparent;
}
.workspace-tab--active { background: var(--color-purple); color: #fff; }
.workspace-tab:hover:not(.workspace-tab--active) { border-color: var(--color-purple); text-decoration: none; }

.workspace-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  min-height: 60vh;
}

.tile {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem;
  display: flex; flex-direction: column; gap: .5rem;
  position: relative;
  transition: box-shadow .15s, transform .15s;
}
.tile:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.tile--wide { grid-column: span 2; }
.tile-header { display: flex; align-items: center; justify-content: space-between; }
.tile-title { font-family: var(--font-heading); font-weight: 700; font-size: .9rem; color: var(--color-purple); }
.tile-actions { display: flex; gap: .25rem; opacity: 0; transition: opacity .15s; }
.tile:hover .tile-actions { opacity: 1; }
.tile-action-btn {
  background: transparent; border: none; color: var(--color-muted);
  cursor: pointer; padding: .15rem .3rem; border-radius: 4px;
}
.tile-action-btn:hover { background: var(--color-surface); color: var(--color-ink); }

.tile-stat-value { font-family: var(--font-heading); font-weight: 800; font-size: 2.2rem; color: var(--color-ink); line-height: 1; }
.tile-stat-label { font-size: .8rem; color: var(--color-muted); }
.tile-delta--up { color: #2d8a3f; }
.tile-delta--down { color: var(--color-red, #E52823); }
.tile-sparkline-wrap {
  margin-top: .5rem;
  height: 36px;
  position: relative;
}
.tile-sparkline-wrap canvas { width: 100% !important; height: 36px !important; }
.tile-chart-wrap {
  margin-top: .5rem;
  height: 120px;
  position: relative;
}
.tile-chart-wrap canvas { width: 100% !important; height: 120px !important; }
.tile-stat-delta { font-size: .75rem; font-weight: 600; }
.tile-stat-delta--up { color: var(--color-green); }
.tile-stat-delta--down { color: var(--color-red); }

.tile-empty {
  min-height: 280px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 2px dashed var(--color-border);
  background: var(--color-surface);
  color: var(--color-muted);
  text-align: center;
  padding: 1rem;
}
.tile-empty button {
  background: var(--color-purple); color: #fff;
  border: none; border-radius: var(--radius);
  padding: .5rem 1rem; font-family: var(--font-heading); font-weight: 600;
  cursor: pointer; margin-top: .5rem;
}

/* Pin button visible on chart/table contexts */
.pin-btn {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  border-radius: var(--radius);
  padding: .35rem .65rem;
  font-family: var(--font-heading);
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: .35rem;
}
.pin-btn:hover { color: var(--color-purple); border-color: var(--color-purple); }
.pin-btn--pinned { background: var(--color-purple); color: #fff; border-color: var(--color-purple); }
.pin-btn--pinning { opacity: .6; cursor: wait; }
.pin-btn:disabled { cursor: not-allowed; }

/* Stat tiles need position:relative to anchor the pin button in the corner */
.stat-tile { position: relative; }
.stat-tile .pin-btn-inline {
  position: absolute;
  top: .5rem;
  right: .5rem;
  padding: .2rem .45rem;
  font-size: .65rem;
  opacity: 0;
  transition: opacity .15s ease;
}
.stat-tile:hover .pin-btn-inline,
.stat-tile .pin-btn-inline:focus-visible,
.stat-tile .pin-btn-inline.pin-btn--pinned { opacity: 1; }

/* Inline pin button alongside a section heading */
.section-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .5rem;
}
.section-heading-row h2,
.section-heading-row h3 { margin: 0; }

/* Toast container (matches pin.js DOM) */
.toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  pointer-events: none;
}
.toast {
  background: var(--color-charcoal);
  color: #fff;
  padding: .75rem 1rem;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: .85rem;
  min-width: 240px;
  max-width: 360px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  pointer-events: auto;
  opacity: 1;
  transition: opacity .25s, transform .25s;
}
.toast--success { background: var(--color-purple); }
.toast--error { background: var(--color-red, #E52823); }
.toast a { color: inherit; text-decoration: underline; }

/* ============================================================
   5. Studio (Time Series · Geography · Compare)
   ============================================================ */

.studio-shell { padding: 1.5rem 2rem; display: grid; grid-template-columns: 280px 1fr; gap: 1.5rem; min-height: calc(100vh - var(--watermark-height)); }
.studio-controls { background: var(--color-surface); border-radius: var(--radius); padding: 1.25rem; height: fit-content; position: sticky; top: calc(var(--watermark-height) + 1rem); }
.studio-controls h2 { font-size: 1rem; color: var(--color-purple); margin-top: 0; }
.studio-control-group { margin-bottom: 1rem; }
.studio-control-group label {
  display: block;
  font-family: var(--font-heading);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-charcoal);
  margin-bottom: .35rem;
}
.studio-control-group select,
.studio-control-group input[type=text],
.studio-control-group input[type=number],
.studio-control-group input[type=date] {
  width: 100%; padding: .4rem .55rem;
  border: 1px solid var(--color-border); border-radius: var(--radius);
  font: inherit; font-size: .85rem;
  background: #fff;
}

.studio-canvas { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.5rem; min-height: 60vh; }
.studio-canvas h1 { color: var(--color-purple); margin-top: 0; }

.chip-row { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .35rem; }
.chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .25rem .55rem;
  font-family: var(--font-heading);
  font-size: .75rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
}
.chip--active { background: var(--color-purple); color: #fff; border-color: var(--color-purple); }
.chip-close { background: none; border: none; color: inherit; cursor: pointer; font-size: .9rem; line-height: 1; padding: 0; }

/* ============================================================
   6. Report Builder
   ============================================================ */

.rb-shell { display: grid; grid-template-columns: 320px 1fr 360px; gap: 0; min-height: calc(100vh - var(--watermark-height)); }
.rb-library { background: var(--color-surface); border-right: 1px solid var(--color-border); padding: 1rem; overflow-y: auto; }
.rb-library h2 { font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-charcoal); }
.rb-library-category { margin-bottom: 1rem; }
.rb-library-category-name { font-family: var(--font-heading); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-charcoal); margin: .5rem 0 .35rem; }
.rb-section-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: .55rem .65rem;
  margin-bottom: .3rem;
  cursor: grab;
  font-size: .8rem;
  transition: border-color .15s, box-shadow .15s;
}
.rb-section-card:hover { border-color: var(--color-purple); box-shadow: var(--shadow-sm); }
.rb-section-card[draggable=true]:active { cursor: grabbing; }
.rb-section-card-title { font-family: var(--font-heading); font-weight: 600; color: var(--color-ink); }
.rb-section-card-desc { font-size: .7rem; color: var(--color-muted); margin-top: .15rem; }
.rb-section-card-locked { opacity: .5; cursor: not-allowed; }
.rb-section-card-locked::after { content: "T4+"; float: right; font-size: .65rem; color: var(--color-muted); }

.rb-canvas { background: #fff; padding: 1.5rem 2rem; overflow-y: auto; max-height: calc(100vh - var(--watermark-height)); }
.rb-canvas-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; flex-wrap: wrap; gap: .5rem; }
.rb-canvas-title { font-family: var(--font-heading); font-size: 1.5rem; color: var(--color-purple); margin: 0; }
.rb-canvas-meta { font-size: .8rem; color: var(--color-muted); }

.rb-draft-section {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: .75rem;
  position: relative;
}
.rb-draft-section--drag-over { border-color: var(--color-purple); border-style: dashed; background: rgba(65,52,148,.04); }
.rb-draft-section-header { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.rb-draft-section-handle { cursor: grab; color: var(--color-muted); user-select: none; }
.rb-draft-section-title { flex: 1; font-family: var(--font-heading); font-weight: 600; }
.rb-draft-section-actions { display: flex; gap: .25rem; }
.rb-draft-section-remove { background: none; border: none; color: var(--color-muted); cursor: pointer; padding: .15rem .35rem; border-radius: 4px; }
.rb-draft-section-remove:hover { background: rgba(229,40,35,.1); color: var(--color-red); }

.rb-empty-canvas {
  text-align: center; padding: 3rem 1rem; color: var(--color-muted); border: 2px dashed var(--color-border); border-radius: var(--radius); background: var(--color-surface);
}
.rb-empty-canvas h2 { color: var(--color-purple); }

.rb-preview { background: var(--color-surface); border-left: 1px solid var(--color-border); padding: 1rem; overflow-y: auto; max-height: calc(100vh - var(--watermark-height)); }
.rb-preview h2 { font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-charcoal); }
.rb-preview-frame { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem; min-height: 60vh; font-size: .8rem; }

.rb-toolbar { display: flex; gap: .5rem; align-items: center; padding: .65rem 1rem; background: #fff; border-bottom: 1px solid var(--color-border); }
.rb-toolbar select, .rb-toolbar input { padding: .35rem .55rem; border: 1px solid var(--color-border); border-radius: var(--radius); font: inherit; font-size: .85rem; }
.rb-toolbar-spacer { flex: 1; }

/* ============================================================
   7. Catalog browser
   ============================================================ */

.catalog-shell { display: grid; grid-template-columns: 240px 1fr; gap: 1.5rem; padding: 1.5rem 2rem; }
.catalog-facets { background: var(--color-surface); border-radius: var(--radius); padding: 1rem; height: fit-content; }
.catalog-facet { margin-bottom: 1rem; }
.catalog-facet h3 { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-charcoal); margin-bottom: .35rem; }
.catalog-facet label { display: flex; align-items: center; gap: .35rem; font-size: .85rem; padding: .15rem 0; }
.catalog-list { display: flex; flex-direction: column; gap: .5rem; }
.catalog-row { display: grid; grid-template-columns: 2fr 1fr 1fr 90px; gap: .75rem; padding: .65rem .8rem; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); align-items: center; font-size: .85rem; }
.catalog-row-freshness { font-size: .7rem; padding: .15rem .4rem; border-radius: 999px; }
.catalog-row-freshness--fresh { background: rgba(130,195,65,.15); color: #4d7d22; }
.catalog-row-freshness--stale { background: rgba(249,194,10,.18); color: #8a6900; }

/* ============================================================
   8. Branding studio
   ============================================================ */

.branding-shell { display: grid; grid-template-columns: 320px 1fr; gap: 1.5rem; padding: 1.5rem 2rem; }
.branding-controls { background: var(--color-surface); border-radius: var(--radius); padding: 1rem; }
.branding-color-swatch { display: inline-block; width: 28px; height: 28px; border-radius: 6px; vertical-align: middle; border: 1px solid var(--color-border); margin-right: .25rem; }
.branding-preview { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.5rem; min-height: 60vh; }

/* ============================================================
   9. Tier-gated upsell card (shown when user hits a limit)
   ============================================================ */

.upsell-card {
  background: linear-gradient(135deg, rgba(65,52,148,.06), rgba(229,40,35,.04));
  border: 1px solid var(--color-purple);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  display: flex; gap: 1rem; align-items: center;
  margin: 1rem 0;
}
.upsell-card-icon { font-size: 1.5rem; color: var(--color-gold); }
.upsell-card-content { flex: 1; }
.upsell-card-title { font-family: var(--font-heading); font-weight: 700; color: var(--color-purple); }
.upsell-card-body { font-size: .85rem; color: var(--color-charcoal); margin-top: .25rem; }
.upsell-card-cta { background: var(--color-purple); color: #fff; padding: .5rem 1rem; border-radius: var(--radius); text-decoration: none; font-family: var(--font-heading); font-weight: 600; font-size: .85rem; white-space: nowrap; }
.upsell-card-cta:hover { background: #2f257a; color: #fff; text-decoration: none; }

/* ============================================================
  10. Toast notifications
   ============================================================ */

.toast-container { position: fixed; bottom: 1rem; right: 1rem; z-index: 9000; display: flex; flex-direction: column; gap: .5rem; }
.toast {
  background: #fff; border: 1px solid var(--color-border); border-left: 4px solid var(--color-purple);
  border-radius: var(--radius); padding: .65rem 1rem;
  box-shadow: var(--shadow-md);
  font-size: .85rem;
  animation: toast-in .2s ease-out;
}
.toast--success { border-left-color: var(--color-green); }
.toast--error { border-left-color: var(--color-red); }
@keyframes toast-in { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ============================================================
   11. Report Builder — section partials (rendered in preview iframe + PDF export)
   ============================================================ */

.rb-section {
  font-family: var(--font-body);
  color: var(--color-ink);
  line-height: 1.55;
}
.rb-section + .rb-section { margin-top: 1.25rem; }
.rb-lede {
  font-size: 1.02rem;
  margin: 0 0 1rem;
  color: var(--color-ink);
}
.rb-h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-purple);
  font-size: 1.05rem;
  margin: 0 0 .5rem;
  text-transform: none;
  letter-spacing: 0;
}
.rb-bullets, .rb-ol { margin: 0 0 .75rem; padding-left: 1.25rem; }
.rb-bullets li, .rb-ol li { margin-bottom: .4rem; }

.rb-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .75rem;
  margin: 1rem 0;
}
.rb-stat {
  background: var(--color-surface);
  border-left: 3px solid var(--color-purple);
  border-radius: var(--radius);
  padding: .75rem 1rem;
}
.rb-stat--hero { border-left-color: var(--color-gold); }
.rb-stat__label {
  font-family: var(--font-heading);
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-muted);
}
.rb-stat__value {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.45rem;
  color: var(--color-purple);
  line-height: 1.1;
  margin: .15rem 0;
}
.rb-stat__sub {
  font-size: .7rem;
  color: var(--color-muted);
}

.rb-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: .85rem;
}
.rb-table thead th {
  background: var(--color-purple);
  color: #fff;
  text-align: left;
  padding: .5rem .65rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.rb-table thead th.num,
.rb-table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
.rb-table tbody tr:nth-child(odd) { background: var(--color-surface); }
.rb-table tbody td {
  padding: .4rem .65rem;
  border-bottom: 1px solid var(--color-border);
}
.rb-table tbody tr:last-child td { border-bottom: none; }

.rb-source-note {
  margin-top: .75rem;
  font-size: .72rem;
  color: var(--color-muted);
  border-top: 1px dashed var(--color-border);
  padding-top: .5rem;
  font-style: italic;
}

/* Inline title-edit badge on canvas */
.rb-section-edited-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem; height: 1.1rem;
  font-size: .75rem;
  color: var(--color-gold);
  margin-right: .15rem;
  cursor: help;
}

/* ============================================================
   12. Annotation popover (T3+ feature, wired via static/js/annotations.js)
   ============================================================ */

.annotate-btn {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  border-radius: var(--radius);
  padding: .2rem .45rem;
  font-family: var(--font-heading);
  font-size: .65rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: .25rem;
}
.annotate-btn:hover,
.annotate-btn--active {
  color: var(--color-purple);
  border-color: var(--color-purple);
}
.stat-tile .annotate-btn {
  position: absolute;
  top: .5rem;
  right: 3.6rem;
  opacity: 0;
  transition: opacity .15s;
}
.stat-tile:hover .annotate-btn,
.stat-tile .annotate-btn--active { opacity: 1; }

.annot-pop {
  position: fixed;
  z-index: 11000;
  width: 340px;
  max-height: 60vh;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--font-body);
}
.annot-pop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .65rem .85rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
.annot-pop-title { font-family: var(--font-heading); font-size: .8rem; color: var(--color-purple); }
.annot-pop-close {
  background: transparent;
  border: none;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-muted);
  padding: 0 .25rem;
}
.annot-pop-list {
  padding: .65rem .85rem;
  flex: 1;
  overflow-y: auto;
}
.annot-item + .annot-item { border-top: 1px solid var(--color-border); margin-top: .5rem; padding-top: .5rem; }
.annot-item-meta {
  font-family: var(--font-heading);
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-muted);
}
.annot-item-body { font-size: .85rem; margin-top: .15rem; }

.annot-pop-form {
  padding: .65rem .85rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}
.annot-pop-form textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: .4rem .55rem;
  font: inherit;
  resize: vertical;
  min-height: 60px;
}
.annot-pop-form textarea:focus { outline: 2px solid var(--color-purple); outline-offset: 1px; }
.annot-pop-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: .4rem;
}
.annot-pop-submit {
  background: var(--color-purple);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: .35rem .85rem;
  font-family: var(--font-heading);
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
}
.annot-pop-submit:disabled { opacity: .6; cursor: wait; }

/* Sidebar Recent Views widget */
.sidebar__section--recent .sidebar__list a {
  font-size: .8rem;
  display: block;
  padding: .2rem .55rem;
  border-radius: 4px;
  color: var(--color-charcoal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar__section--recent .sidebar__list a:hover {
  background: var(--color-surface);
  color: var(--color-purple);
}

/* ============================================================
   13. Saved Searches form helpers + flash callouts
   ============================================================ */

.form-stack { display: flex; flex-direction: column; gap: .75rem; max-width: 560px; }
.form-stack label { display: flex; flex-direction: column; gap: .25rem; }
.form-stack label > span {
  font-family: var(--font-heading);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-charcoal);
}
.form-stack input[type=text],
.form-stack select {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: .5rem .65rem;
  font: inherit;
  background: #fff;
}
.form-stack input[type=text]:focus,
.form-stack select:focus { outline: 2px solid var(--color-purple); outline-offset: 1px; border-color: var(--color-purple); }

.callout {
  border-left: 4px solid var(--color-purple);
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: .65rem .85rem;
  margin: .75rem 0;
  font-size: .85rem;
}
.callout--success { border-left-color: var(--color-green, #82C341); }
.callout--error { border-left-color: var(--color-red, #E52823); }

.btn-sm { font-size: .7rem; padding: .25rem .55rem; }

/* ============================================================
   14. Welcome / onboarding modal
   ============================================================ */

.welcome-modal {
  position: fixed; inset: 0; z-index: 11500;
  display: none;
}
.welcome-modal.welcome-open { display: flex; align-items: center; justify-content: center; padding: 1rem; }
.welcome-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}
.welcome-panel {
  position: relative;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  width: min(540px, 96vw);
  padding: 2rem 2rem 1.5rem;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  font-family: var(--font-body);
}
.welcome-close {
  position: absolute; top: .65rem; right: .65rem;
  background: transparent; border: none;
  font-size: 1.4rem; line-height: 1;
  color: var(--color-muted);
  cursor: pointer;
}
.welcome-step-count {
  font-family: var(--font-heading);
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-purple);
  margin-bottom: .3rem;
}
.welcome-panel h2 {
  font-family: var(--font-heading);
  color: var(--color-ink);
  margin: 0 0 .85rem;
  font-size: 1.5rem;
}
.welcome-body p { margin: 0 0 .75rem; line-height: 1.55; }
.welcome-body kbd {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: .05rem .35rem;
  font-family: var(--font-mono, monospace);
  font-size: .85em;
}
.welcome-body code {
  background: var(--color-surface);
  padding: .05rem .3rem;
  border-radius: 3px;
  font-size: .85em;
}
.welcome-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}
.btn-link {
  background: transparent;
  border: none;
  color: var(--color-muted);
  font-family: var(--font-heading);
  font-size: .8rem;
  cursor: pointer;
  padding: .35rem 0;
}
.btn-link:hover { color: var(--color-purple); }
.welcome-dots { display: flex; gap: .35rem; }
.welcome-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-border);
}
.welcome-dot--active { background: var(--color-purple); }

/* ============================================================
   15. Cohorts page
   ============================================================ */

.cohort-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}
.cohort-card {
  background: var(--color-surface);
  border-left: 4px solid var(--color-purple);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
}
.cohort-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 .35rem;
}
.cohort-card__head h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1rem;
}
.cohort-card__meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: .6rem 0 .25rem;
  flex-wrap: wrap;
}
.cohort-card__meta .tag {
  border-radius: 999px;
  padding: .15rem .55rem;
  font-family: var(--font-heading);
  font-size: .7rem;
  font-weight: 600;
}
.cohort-members {
  margin: .5rem 0 0;
  padding-left: 1rem;
  font-size: .8rem;
  max-height: 200px;
  overflow-y: auto;
}
.cohort-members li code { font-size: .8em; }

.form-stack textarea {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: .5rem .65rem;
  font: inherit;
  background: #fff;
  resize: vertical;
  min-height: 80px;
  width: 100%;
}
.form-stack textarea:focus { outline: 2px solid var(--color-purple); outline-offset: 1px; border-color: var(--color-purple); }
.form-stack input[type=color] {
  width: 60px;
  height: 32px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
}

/* ============================================================
   16. Drill-Anywhere lineage button + popover
   ============================================================ */

.drill-btn {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  border-radius: var(--radius);
  padding: .2rem .45rem;
  font-family: var(--font-heading);
  font-size: .65rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: .25rem;
}
.drill-btn:hover { color: var(--color-purple); border-color: var(--color-purple); }
.stat-tile .drill-btn {
  position: absolute;
  bottom: .5rem;
  right: .5rem;
  opacity: 0;
  transition: opacity .15s;
}
.stat-tile:hover .drill-btn { opacity: .85; }
.stat-tile:hover .drill-btn:hover { opacity: 1; }

.drill-pop {
  position: fixed;
  z-index: 11000;
  width: 360px;
  max-height: 70vh;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--font-body);
}
.drill-pop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .65rem .85rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
.drill-pop-header strong {
  font-family: var(--font-heading);
  font-size: .85rem;
  color: var(--color-purple);
  flex: 1;
}
.drill-pop-header .tag {
  font-family: var(--font-heading);
  font-size: .65rem;
  padding: .1rem .5rem;
  border-radius: 999px;
  font-weight: 600;
}
.drill-pop-close {
  background: transparent;
  border: none;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-muted);
  padding: 0 .25rem;
}
.drill-pop-body { padding: .85rem; overflow-y: auto; }
.drill-pop-section + .drill-pop-section { margin-top: .85rem; padding-top: .65rem; border-top: 1px dashed var(--color-border); }
.drill-pop-label {
  font-family: var(--font-heading);
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-muted);
  margin-bottom: .3rem;
}
.drill-pop-sources { margin: 0; padding-left: 1rem; font-size: .85rem; }
.drill-pop-sources li + li { margin-top: .5rem; }
.drill-pop-schema {
  display: block;
  background: var(--color-surface);
  padding: .4rem .55rem;
  border-radius: var(--radius);
  font-size: .75rem;
  word-break: break-word;
}
.drill-pop-link { font-size: .8rem; }
.drill-pop-upsell { background: var(--color-surface); padding: .55rem .65rem; border-radius: var(--radius); border-left: 3px solid var(--color-gold); }

/* ============================================================
   17. Sprint A — Premium polish (skeleton + shortcuts + changelog + empty-state + optimistic + page transitions)
   ============================================================ */

/* --- Skeleton shimmer --- */
@keyframes alex-shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
.skeleton-shimmer {
  background-color: var(--color-surface);
  background-image: linear-gradient(
    90deg,
    var(--color-surface) 0%,
    rgba(255,255,255,0.85) 40%,
    var(--color-surface) 80%
  );
  background-repeat: no-repeat;
  background-size: 200px 100%;
  animation: alex-shimmer 1.4s linear infinite;
  border-radius: 3px;
  color: transparent !important;
  user-select: none;
  display: inline-block;
}

/* --- Optimistic flashes --- */
.opt-success {
  animation: alex-opt-success 1.4s ease-out;
}
.opt-error {
  animation: alex-opt-error 1.4s ease-out;
}
.opt-pending {
  opacity: 0.7;
  transition: opacity 200ms;
}
@keyframes alex-opt-success {
  0% { box-shadow: 0 0 0 0 rgba(130, 195, 65, 0); background-color: rgba(130, 195, 65, 0); }
  20% { box-shadow: 0 0 0 4px rgba(130, 195, 65, 0.35); background-color: rgba(130, 195, 65, 0.15); }
  100% { box-shadow: 0 0 0 0 rgba(130, 195, 65, 0); background-color: rgba(130, 195, 65, 0); }
}
@keyframes alex-opt-error {
  0% { box-shadow: 0 0 0 0 rgba(229, 40, 35, 0); background-color: rgba(229, 40, 35, 0); }
  20% { box-shadow: 0 0 0 4px rgba(229, 40, 35, 0.35); background-color: rgba(229, 40, 35, 0.15); }
  100% { box-shadow: 0 0 0 0 rgba(229, 40, 35, 0); background-color: rgba(229, 40, 35, 0); }
}

/* --- Keyboard shortcuts modal --- */
.shortcuts-modal {
  position: fixed; inset: 0;
  z-index: 12000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.shortcuts-modal.shortcuts-open { display: flex; }
.shortcuts-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(3px);
}
.shortcuts-panel {
  position: relative;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  width: min(720px, 96vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 18px 48px rgba(0,0,0,.28);
  overflow: hidden;
  font-family: var(--font-body);
}
.shortcuts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.4rem 0.9rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
.shortcuts-header h2 {
  margin: 0;
  font-family: var(--font-heading);
  color: var(--color-purple);
  font-size: 1.15rem;
}
.shortcuts-close {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-muted);
  padding: 0 .25rem;
}
.shortcuts-close:hover { color: var(--color-purple); }
.shortcuts-body {
  padding: 1.2rem 1.4rem;
  overflow-y: auto;
}
.shortcuts-group { margin-bottom: 1.5rem; }
.shortcuts-group:last-child { margin-bottom: 0; }
.shortcuts-group-title {
  font-family: var(--font-heading);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--color-purple);
  font-weight: 700;
  margin-bottom: .55rem;
  padding-bottom: .25rem;
  border-bottom: 1px solid var(--color-border);
}
.shortcuts-list { margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
.shortcuts-row {
  display: contents;
}
.shortcuts-row::after {
  content: '';
}
.shortcuts-row > dt, .shortcuts-row > dd {
  padding: .25rem 0;
  font-size: .85rem;
}
.shortcuts-keys {
  display: flex;
  gap: .25rem;
  flex-wrap: wrap;
}
.shortcuts-keys kbd, .welcome-body kbd, .sidebar-kbd-hint {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: .05rem .4rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .78em;
  color: var(--color-purple);
  font-weight: 600;
  white-space: nowrap;
}
.shortcuts-desc {
  margin: 0;
  color: var(--color-charcoal);
}
.shortcuts-footer {
  padding: .7rem 1.4rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  text-align: center;
}

/* --- Changelog panel --- */
.changelog-panel {
  position: fixed; inset: 0;
  z-index: 11800;
  display: none;
  justify-content: flex-end;
  align-items: stretch;
}
.changelog-panel.changelog-open { display: flex; }
.changelog-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
}
.changelog-sheet {
  position: relative;
  width: min(440px, 96vw);
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  box-shadow: -12px 0 32px rgba(0,0,0,.18);
  animation: alex-changelog-slide 220ms ease-out;
}
@keyframes alex-changelog-slide {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
.changelog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.3rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-purple);
}
.changelog-header h2 {
  margin: 0;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1.05rem;
}
.changelog-close {
  background: transparent;
  border: none;
  font-size: 1.4rem;
  color: rgba(255,255,255,.75);
  cursor: pointer;
  padding: 0 .25rem;
  line-height: 1;
}
.changelog-close:hover { color: #fff; }
.changelog-body { padding: 1rem 1.3rem 1.5rem; overflow-y: auto; flex: 1; }
.changelog-entry { padding: .9rem 0; border-bottom: 1px solid var(--color-border); }
.changelog-entry:last-child { border-bottom: none; }
.changelog-entry h3 {
  margin: .25rem 0 .4rem;
  font-family: var(--font-heading);
  font-size: .95rem;
  color: var(--color-purple);
}
.changelog-entry ul {
  margin: .35rem 0 0 0;
  padding-left: 1.1rem;
  font-size: .85rem;
  color: var(--color-charcoal);
}
.changelog-entry ul li { margin-bottom: .2rem; }
.changelog-meta {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.changelog-date {
  font-family: var(--font-heading);
  font-size: .7rem;
  color: var(--color-muted);
  font-weight: 600;
  letter-spacing: .04em;
}
.changelog-latest-badge {
  background: var(--color-gold);
  color: var(--color-purple);
  font-family: var(--font-heading);
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .1rem .45rem;
  border-radius: 999px;
  font-weight: 700;
}
.changelog-entry--latest h3 { color: var(--color-red, var(--color-purple)); }
.changelog-footer {
  padding: .7rem 1.3rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

/* Unread dot on changelog sidebar trigger */
.changelog-unread-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--color-red, #E52823);
  border-radius: 50%;
  margin-left: .4rem;
  vertical-align: middle;
  animation: alex-pulse 2s ease-in-out infinite;
}
@keyframes alex-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(1.15); }
}

/* --- Sidebar keyboard hint --- */
.sidebar-kbd-hint {
  float: right;
  font-size: .7rem;
  padding: 0 .3rem;
  margin-top: .1rem;
}

/* --- Empty-state coaching --- */
.empty-state-coach {
  padding: 2.5rem 1.75rem;
  text-align: center;
  background: var(--color-surface);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  margin: 1rem 0;
}
.empty-state-icon {
  font-size: 2.5rem;
  margin-bottom: .65rem;
  opacity: 0.85;
}
.empty-state-coach h3 {
  font-family: var(--font-heading);
  color: var(--color-purple);
  margin: 0 0 .5rem 0;
  font-size: 1.15rem;
}
.empty-state-coach p {
  color: var(--color-charcoal);
  max-width: 32rem;
  margin: 0 auto .85rem;
  line-height: 1.5;
}
.empty-state-actions {
  display: flex;
  gap: .55rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: .85rem 0 .35rem;
}
.empty-state-btn {
  background: var(--color-purple);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: .5rem 1rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: .82rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: transform 120ms, box-shadow 120ms;
}
.empty-state-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(65,52,148,.22);
}
.empty-state-btn:nth-child(even) {
  background: var(--color-surface);
  color: var(--color-purple);
  border: 1px solid var(--color-purple);
}
.empty-state-hint {
  font-size: .8rem;
  color: var(--color-muted);
  margin-top: .8rem;
  font-style: italic;
}

/* --- Faded-in page targets get smoother appearance --- */
[data-faded] { will-change: opacity, transform; }

/* ============================================================
   18. Sprint B — Notifications spine (bell + dropdown + activity feed + page)
   ============================================================ */

/* --- Bell wrap in sidebar brand row --- */
.sidebar__brand { position: relative; display: flex; align-items: center; flex-wrap: wrap; }
.notifications-bell-wrap { margin-left: auto; }
.notifications-bell {
  position: relative;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.05rem;
  padding: .25rem .35rem;
  border-radius: 50%;
  transition: background-color 150ms;
}
.notifications-bell:hover { background: var(--color-surface); }
.notifications-bell-icon { display: inline-block; }
.notifications-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  background: var(--color-red, #E52823);
  color: #fff;
  font-family: var(--font-heading);
  font-size: .6rem;
  font-weight: 700;
  padding: .1rem .3rem;
  border-radius: 999px;
  min-width: 1.2em;
  text-align: center;
  line-height: 1;
  border: 2px solid var(--color-bg);
}

/* --- Dropdown --- */
.notifications-dropdown {
  position: fixed;
  width: 380px;
  max-height: 70vh;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(0,0,0,.2);
  z-index: 11500;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--font-body);
}
.nd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .7rem .95rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
.nd-header strong {
  font-family: var(--font-heading);
  color: var(--color-purple);
  font-size: .9rem;
}
.nd-read-all {
  background: transparent;
  border: none;
  color: var(--color-purple);
  font-family: var(--font-heading);
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
}
.nd-read-all:hover { text-decoration: underline; }
.nd-list { overflow-y: auto; flex: 1; min-height: 8rem; }
.nd-empty { padding: 1.5rem; text-align: center; color: var(--color-muted); font-size: .85rem; }
.nd-item {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .65rem .95rem;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: background-color 100ms;
}
.nd-item:hover { background: var(--color-surface); }
.nd-item--unread { background: rgba(65, 52, 148, 0.04); }
.nd-icon { font-size: 1.1rem; flex-shrink: 0; padding-top: .15rem; }
.nd-content { display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 0; }
.nd-title { font-family: var(--font-heading); font-weight: 600; font-size: .85rem; color: var(--color-ink); }
.nd-body { font-size: .78rem; color: var(--color-charcoal); line-height: 1.4; }
.nd-time { font-size: .7rem; color: var(--color-muted); }
.nd-unread-dot {
  position: absolute;
  top: 1rem;
  right: .85rem;
  width: 8px;
  height: 8px;
  background: var(--color-red, #E52823);
  border-radius: 50%;
}
.nd-footer {
  padding: .55rem .95rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  text-align: center;
}
.nd-footer a {
  font-family: var(--font-heading);
  font-size: .8rem;
  color: var(--color-purple);
  font-weight: 600;
  text-decoration: none;
}

/* --- Notifications page --- */
.notifications-list .notif-row {
  display: flex;
  gap: .85rem;
  padding: 1rem 1.1rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: .65rem;
  position: relative;
}
.notif-row--unread { border-left: 4px solid var(--color-red, #E52823); }
.notif-icon { font-size: 1.4rem; flex-shrink: 0; }
.notif-content { flex: 1; }
.notif-content h3 { margin: 0 0 .25rem; font-family: var(--font-heading); font-size: 1rem; color: var(--color-ink); }
.notif-content p { margin: 0 0 .55rem; color: var(--color-charcoal); font-size: .9rem; }
.notif-meta { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.notif-meta .tag {
  font-family: var(--font-heading);
  font-size: .65rem;
  padding: .1rem .5rem;
  border-radius: 999px;
  text-transform: uppercase;
  background: var(--color-surface);
  color: var(--color-charcoal);
}
.notif-meta .tag--mention { background: rgba(65,52,148,.12); color: var(--color-purple); }
.notif-meta .tag--watchlist { background: rgba(249,194,10,.18); color: #7a5c00; }
.notif-meta .tag--share { background: rgba(94,174,224,.18); color: #2e5a7a; }
.notif-meta .tag--activity { background: rgba(130,195,65,.18); color: #466a1f; }
.notif-meta .tag--system { background: rgba(73,89,101,.15); color: var(--color-charcoal); }
.notif-link { font-family: var(--font-heading); font-size: .8rem; color: var(--color-purple); font-weight: 600; text-decoration: none; }

/* --- Activity feed widget --- */
.activity-feed-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin: .5rem 0 1rem;
  padding: 0 1rem;
}
.activity-feed-wrap summary {
  cursor: pointer;
  padding: .55rem 0;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-heading);
  font-size: .85rem;
  color: var(--color-purple);
  user-select: none;
}
.activity-feed-wrap summary::-webkit-details-marker { display: none; }
.activity-feed-wrap summary::before {
  content: '▸';
  display: inline-block;
  color: var(--color-purple);
  transition: transform 150ms;
  margin-right: .15rem;
}
.activity-feed-wrap[open] summary::before { transform: rotate(90deg); }
.af-summary-icon { font-size: .95rem; }
.af-summary-label { flex: 1; font-weight: 600; }
.af-summary-count { color: var(--color-muted); font-weight: 400; font-size: .78rem; }
.activity-feed { padding: .35rem 0 .75rem; }
.af-row { display: flex; gap: .55rem; padding: .35rem 0; align-items: flex-start; font-size: .85rem; border-top: 1px dashed var(--color-border); }
.af-row:first-child { border-top: none; }
.af-icon { font-size: .9rem; padding-top: .15rem; flex-shrink: 0; }
.af-text { flex: 1; line-height: 1.45; }
.af-text strong { color: var(--color-ink); }
.af-text em { font-style: italic; color: var(--color-purple); }
.af-when { display: block; font-size: .7rem; color: var(--color-muted); margin-top: .1rem; }

/* ============================================================
   19. Sprint C — Share modal + CSV button + scheduled export form
   ============================================================ */

/* CSV button inherits pin-btn-inline styles; just a small visual cue */
.csv-btn { text-decoration: none; }
.csv-btn:hover { color: var(--color-green) !important; border-color: var(--color-green) !important; }

/* Share modal */
.share-modal {
  position: fixed; inset: 0; z-index: 12500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.share-modal[style*="flex"], .share-modal.share-open { display: flex !important; }
.share-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}
.share-modal-panel {
  position: relative;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  width: min(520px, 96vw);
  box-shadow: 0 18px 48px rgba(0,0,0,.28);
  overflow: hidden;
  font-family: var(--font-body);
}
.share-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.3rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
.share-modal-header h2 {
  margin: 0;
  font-family: var(--font-heading);
  color: var(--color-purple);
  font-size: 1.1rem;
}
.share-modal-close {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--color-muted);
  padding: 0 .25rem;
}
.share-modal-body { padding: 1.3rem; }
.share-field { display: flex; flex-direction: column; gap: .35rem; margin: .85rem 0; }
.share-field > span {
  font-family: var(--font-heading);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-charcoal);
}
.share-field select, .share-field input {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: .5rem .65rem;
  font: inherit;
  background: #fff;
}
.share-url-row {
  display: flex;
  gap: .4rem;
}
.share-url-row input {
  flex: 1;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .82rem;
}
.share-result-actions {
  display: flex;
  gap: 1.5rem;
  margin-top: .85rem;
  padding-top: .85rem;
  border-top: 1px solid var(--color-border);
}

/* ============================================================
   20. Sprint D — Enterprise (audit table + tokens + webhooks + settings)
   ============================================================ */

.audit-summary-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .65rem; margin: 1rem 0; }
.audit-summary-card {
  background: var(--color-surface);
  border-left: 3px solid var(--color-purple);
  padding: .55rem .85rem;
  border-radius: 0 4px 4px 0;
}
.audit-summary-action {
  font-family: var(--font-heading);
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-muted);
  font-weight: 600;
}
.audit-summary-count {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--color-purple);
  line-height: 1.1;
  margin-top: .1rem;
}
.audit-table { font-size: .82rem; }
.audit-action {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .12rem .55rem;
  border-radius: 999px;
  font-weight: 600;
  background: var(--color-surface);
  color: var(--color-charcoal);
}
.audit-action--view { background: rgba(94,174,224,.18); color: #2e5a7a; }
.audit-action--pin, .audit-action--create { background: rgba(130,195,65,.18); color: #466a1f; }
.audit-action--export { background: rgba(249,194,10,.22); color: #7a5c00; }
.audit-action--share { background: rgba(65,52,148,.18); color: var(--color-purple); }
.audit-action--annotate { background: rgba(206,80,157,.18); color: #883066; }
.audit-action--delete, .audit-action--revoke { background: rgba(229,40,35,.18); color: #a01a17; }
.audit-action--update, .audit-action--save { background: var(--color-surface); color: var(--color-purple); }

/* Token display */
.token-display {
  display: block;
  background: var(--color-surface);
  border: 1px dashed var(--color-purple);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .85rem;
  color: var(--color-purple);
  word-break: break-all;
  margin: .5rem 0;
  user-select: all;
}

/* Settings fieldsets */
.settings-section {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  margin-bottom: 1rem;
  background: var(--color-surface);
}
.settings-section legend {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-purple);
  padding: 0 .5rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.settings-checkbox {
  display: flex !important;
  align-items: center;
  gap: .55rem;
  flex-direction: row !important;
  font-size: .9rem;
}
.settings-checkbox input { width: auto !important; }

/* ============================================================
   21. Sprint E — Data manipulation (filters + calc + anomaly + forecast)
   ============================================================ */

/* Anomaly badge on workspace tiles */
.tile-anomaly-slot { min-height: 0; }
.anomaly-badge {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: .65rem;
  font-weight: 700;
  padding: .15rem .55rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .35rem;
  animation: alex-pulse 2.5s ease-in-out infinite;
}
.anomaly-badge--up {
  background: rgba(249, 194, 10, 0.22);
  color: #7a5c00;
  border: 1px solid rgba(249, 194, 10, 0.5);
}
.anomaly-badge--down {
  background: rgba(229, 40, 35, 0.18);
  color: #a01a17;
  border: 1px solid rgba(229, 40, 35, 0.4);
}

/* Filter chips page */
.filter-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: .65rem;
  margin: 1rem 0;
}
.filter-chip {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-purple);
  border-radius: 0 4px 4px 0;
  padding: .7rem .9rem;
  position: relative;
}
.filter-chip-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .95rem;
  color: var(--color-purple);
  margin-bottom: .25rem;
}
.filter-chip-config {
  font-size: .78rem;
  color: var(--color-charcoal);
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.filter-pair {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: .1rem .55rem;
  font-size: .72rem;
}
.filter-chip-remove {
  position: absolute;
  top: .35rem;
  right: .45rem;
  background: transparent;
  border: none;
  font-size: 1.2rem;
  color: var(--color-muted);
  cursor: pointer;
  padding: 0 .25rem;
  line-height: 1;
}
.filter-chip-remove:hover { color: var(--color-red, #E52823); }

/* Custom calculation base-metric chips */
.base-metric-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 1rem 0;
}
.base-metric-chip {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: .25rem .55rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .76rem;
  color: var(--color-purple);
  cursor: pointer;
}
.base-metric-chip:hover {
  background: var(--color-purple);
  color: #fff;
}