/*
 * Linda · Lumen Design System — Components
 * ─────────────────────────────────────────────────────────────────────────────
 * Reusable Linda · Lumen–specific components abstracted from the hackathon
 * mockups. Each component is prefixed with its name for clarity.
 *
 * Requires: tokens.css, base.css (load both first)
 *
 * Components in this file:
 *  1. .wordmark         — cursive-L · pip · "Linda · Lumen" lockup (HTML+CSS+SVG)
 *  2. .btn-primary      — primary CTA (ink background → ember hover)
 *  3. .btn-ghost        — secondary CTA (outline)
 *  4. .btn-danger       — danger/destructive action button
 *  5. .section-label    — mono uppercase section kicker
 *  6. .kpi-card         — KPI tile with label, value, delta, sparkline
 *  7. .sparkline-row    — pure-CSS bar sparkline (no JS)
 *  8. .status-pill      — live/paper/disabled rounded status pill
 *  9. .alert-row        — alert stream row (sev-bar + pill + headline + detail + meta)
 * 10. .severity-bar     — standalone left-border severity indicator
 * 11. .luck-strip       — Lumen's Luck footer strip with clover + phrase + metrics
 * 12. .data-card        — table-housing card with header and rows
 * 13. .chart-frame      — small-multiple chart container (Tufte discipline)
 * 14. .tier-table       — pricing tier table (four-row layout)
 * 15. .risk-gauge       — horizontal progress bar for risk/capacity metrics
 * 16. .feed-item        — live-event feed row (dot + text + time)
 * ─────────────────────────────────────────────────────────────────────────────
 */


/* ══════════════════════════════════════════════════════════════════════════
   1. WORDMARK
   ══════════════════════════════════════════════════════════════════════════
   Usage:
     <a href="/" class="wordmark" aria-label="Linda · Lumen home">
       <span class="wordmark__glyph">
         <svg class="wordmark__l-svg" ...><!-- cursive L path --></svg>
         <span class="wordmark__pip" aria-hidden="true"></span>
         <svg class="wordmark__l-svg" ...><!-- cursive L path --></svg>
       </span>
       <span class="wordmark__text">Linda&nbsp;·&nbsp;Lumen</span>
     </a>

   The SVG cursive-L path (from team-3, the most developed form):
     viewBox="0 0 28 32"
     Stroke path: "M 6 4 C 6 4, 5 8, 5 14 C 5 20, 5 24, 6 26
                   C 7 27.5, 8.5 28, 10 28 C 14 28, 18 26.5, 20 25.5
                   C 21 25, 22 24.5, 22 24"
     Flourish: "M 5.5 4.5 C 7 2.5, 10 2, 10 4"
     stroke="#1a1815" (use currentColor in dark contexts) stroke-width="1.8"

   Sizing variants: add .wordmark--sm (nav), .wordmark--lg (hero/footer).     */

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  text-decoration: none;
  border-bottom: none;
  color: inherit;
}

.wordmark:hover {
  color: inherit;
}

.wordmark__glyph {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
}

.wordmark__l-svg {
  width: auto;
  height: 22px;
  overflow: visible;
  display: inline-block;
}

.wordmark__pip {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--color-clover);
  border-radius: 50%;
  position: relative;
  bottom: 3px;
  flex-shrink: 0;
}

.wordmark__text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: var(--tracking-snug);
  color: var(--color-ink);
  line-height: 1;
}

/* Inverted (dark background topbar) */
.wordmark--inverted .wordmark__text {
  color: var(--color-paper);
}
.wordmark--inverted .wordmark__l-svg path {
  stroke: var(--color-paper);
}

/* Size variants */
.wordmark--sm .wordmark__l-svg  { height: 18px; }
.wordmark--sm .wordmark__text   { font-size: 15px; }
.wordmark--sm .wordmark__pip    { width: 4px; height: 4px; bottom: 2px; }

.wordmark--lg .wordmark__l-svg  { height: 28px; }
.wordmark--lg .wordmark__text   { font-size: 24px; }
.wordmark--lg .wordmark__pip    { width: 6px; height: 6px; bottom: 4px; }

/* Simplified version for small contexts: italic serif, no SVG */
.wordmark--simple {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: var(--tracking-snug);
  color: var(--color-ink);
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  text-decoration: none;
  border-bottom: none;
}

.wordmark--simple .wordmark__pip {
  display: inline-block;
  width: 4px;
  height: 4px;
  background: var(--color-clover);
  border-radius: 50%;
  margin: 0 5px 3px;
  flex-shrink: 0;
}


/* ══════════════════════════════════════════════════════════════════════════
   2–4. BUTTONS
   ══════════════════════════════════════════════════════════════════════════ */

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 22px;
  background: var(--color-ink);
  color: var(--color-paper);
  font-family: var(--font-body);
  font-size: var(--text-ui);
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  border-bottom: none;
  transition: background var(--motion-base), border-color var(--motion-base);
  white-space: nowrap;
}

.btn-primary:hover {
  background: var(--color-ember);
  border-color: var(--color-ember);
  color: var(--color-paper);
}

.btn-primary:focus-visible {
  outline: 2px solid var(--color-clover);
  outline-offset: 2px;
}

/* Small variant */
.btn-primary--sm {
  padding: 7px 14px;
  font-size: var(--text-ui-sm);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 22px;
  background: transparent;
  color: var(--color-ink-soft);
  font-family: var(--font-body);
  font-size: var(--text-ui);
  font-weight: 500;
  letter-spacing: 0.01em;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  border-bottom: none;
  transition: border-color var(--motion-base), color var(--motion-base);
  white-space: nowrap;
}

.btn-ghost:hover {
  border-color: var(--color-ink-soft);
  color: var(--color-ink);
}

.btn-ghost--sm {
  padding: 7px 14px;
  font-size: var(--text-ui-sm);
}

.btn-danger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px 14px;
  background: var(--color-danger-tint);
  color: var(--color-danger);
  font-family: var(--font-body);
  font-size: var(--text-ui-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid #f0c8c3;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  border-bottom: none;
  white-space: nowrap;
}

.btn-danger:hover {
  background: #f5d0cc;
}


/* ══════════════════════════════════════════════════════════════════════════
   5. SECTION LABEL
   ══════════════════════════════════════════════════════════════════════════
   Usage: <p class="section-label">How it works</p>                           */

.section-label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-ink-mute);
  margin-bottom: var(--space-4);
}

.section-label--clover {
  color: var(--color-clover);
}


/* ══════════════════════════════════════════════════════════════════════════
   6. KPI CARD
   ══════════════════════════════════════════════════════════════════════════
   Usage:
     <div class="kpi-card kpi-card--positive">
       <div class="kpi-card__label">Session P&L</div>
       <div class="kpi-card__value kpi-card__value--positive">+$184</div>
       <div class="kpi-card__meta">
         <span class="kpi-card__delta kpi-card__delta--up">▲ $41</span>
         vs prior session
       </div>
       <div class="sparkline-row">...</div>
     </div>

   Tufte: the number is the hero. Label is the subtitle.                      */

.kpi-card {
  background: var(--color-paper-tint);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
}

.kpi-card__label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-ink-mute);
  margin-bottom: var(--space-2);
}

.kpi-card__value {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 500;
  color: var(--color-ink);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.kpi-card__value--positive { color: var(--color-clover); }
.kpi-card__value--negative { color: var(--color-danger); }

.kpi-card__meta {
  margin-top: var(--space-2);
  font-size: var(--text-caption);
  color: var(--color-ink-mute);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.kpi-card__delta {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
}

.kpi-card__delta--up {
  background: var(--color-clover-tint);
  color: var(--color-clover);
}

.kpi-card__delta--down {
  background: var(--color-danger-tint);
  color: var(--color-danger);
}

/* Colored bar variant — positive/negative card coloring */
.kpi-card--positive .sparkline-row .spark-bar { background: var(--color-clover-dim); }
.kpi-card--negative .sparkline-row .spark-bar { background: #f0c8c3; }


/* ══════════════════════════════════════════════════════════════════════════
   7. SPARKLINE ROW (pure CSS — no JS required)
   ══════════════════════════════════════════════════════════════════════════
   Usage:
     <div class="sparkline-row">
       <div class="spark-bar" style="height:40%"></div>
       <div class="spark-bar" style="height:70%"></div>
       ... (10 bars typical)
     </div>

   Heights are set inline as percentage of the row height.
   Color is inherited from .kpi-card variants (see above) or overridden.      */

.sparkline-row {
  margin-top: var(--space-2);
  height: 28px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
}

.spark-bar {
  flex: 1;
  background: var(--color-paper-deep);
  border-radius: 1px 1px 0 0;
  min-height: 2px;
}


/* ══════════════════════════════════════════════════════════════════════════
   8. STATUS PILL
   ══════════════════════════════════════════════════════════════════════════
   Usage:
     <span class="status-pill status-pill--live">
       <span class="status-pill__dot"></span>Live trading enabled
     </span>
     <span class="status-pill status-pill--paper">
       <span class="status-pill__dot"></span>Paper mode
     </span>
     <span class="status-pill status-pill--disabled">
       <span class="status-pill__dot"></span>Live trading disabled
     </span>                                                                    */

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.status-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
  flex-shrink: 0;
}

/* Live = clover green, solid fill */
.status-pill--live {
  background: var(--color-clover);
  color: #fff;
}

/* Paper = dark tint, gold text — "operational but constrained" */
.status-pill--paper {
  background: #3a3631;
  color: var(--color-dusk);
  border: 1px solid #55503a;
}

/* Disabled = muted */
.status-pill--disabled {
  background: var(--color-paper-tint);
  color: var(--color-ink-mute);
  border: 1px solid var(--color-rule);
}

/* Animated pulse (for live badge in alerts view) */
.status-pill--live-animated .status-pill__dot {
  animation: ll-pulse 2s ease-in-out infinite;
}

@keyframes ll-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.85); }
}


/* ══════════════════════════════════════════════════════════════════════════
   9. ALERT ROW
   ══════════════════════════════════════════════════════════════════════════
   The alert row is the primary component of the alert stream surface.
   Left-most 4px bar carries severity in peripheral vision (Tufte channel
   encoding). Sev-pill provides verbal anchor for accessibility + log copy.

   Usage:
     <div class="alert-row alert-row--crit">
       <div class="alert-row__sev-bar"></div>
       <div class="alert-row__body">
         <span class="alert-row__sev-pill">Crit</span>
         <div class="alert-row__content">
           <div class="alert-row__headline">...</div>
           <div class="alert-row__detail">...</div>
           <div class="alert-row__meta">
             <span class="alert-row__tag">circuit-breaker</span>
             <span class="alert-row__num">daily P&L −$312 · cap $300</span>
           </div>
         </div>
         <span class="alert-row__ts">09:14:02</span>
       </div>
     </div>                                                                    */

.alert-row {
  display: grid;
  grid-template-columns: 4px 1fr;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  margin-bottom: var(--space-1);
  transition: box-shadow var(--motion-fast);
}

.alert-row:hover {
  box-shadow: var(--shadow-hover);
}

/* Severity bar */
.alert-row__sev-bar {
  background: var(--color-info-border);
}
.alert-row--crit .alert-row__sev-bar { background: var(--color-crit-border); }
.alert-row--warn .alert-row__sev-bar { background: var(--color-warn-border); }
.alert-row--info .alert-row__sev-bar { background: var(--color-info-border); }
.alert-row--dim  .alert-row__sev-bar { background: var(--color-dim-border); }

/* Body layout */
.alert-row__body {
  padding: var(--space-3) var(--space-4);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0 var(--space-4);
  align-items: start;
}

/* Severity pill */
.alert-row__sev-pill {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  margin-top: 1px;
  white-space: nowrap;
}

.alert-row--crit .alert-row__sev-pill {
  background: var(--color-crit-bg);
  color: var(--color-crit-label);
  border: 1px solid var(--color-crit-border);
}
.alert-row--warn .alert-row__sev-pill {
  background: var(--color-warn-bg);
  color: var(--color-warn-label);
  border: 1px solid var(--color-warn-border);
}
.alert-row--info .alert-row__sev-pill {
  background: var(--color-info-bg);
  color: var(--color-info-label);
  border: 1px solid var(--color-info-border);
}
.alert-row--dim .alert-row__sev-pill {
  background: var(--color-dim-bg);
  color: var(--color-dim-label);
  border: 1px solid var(--color-dim-border);
}

/* Content area */
.alert-row__content {
  min-width: 0;
}

.alert-row__headline {
  font-size: var(--text-ui);
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.3;
  margin-bottom: var(--space-1);
}

.alert-row--dim .alert-row__headline {
  font-weight: 500;
  color: var(--color-ink-soft);
}

.alert-row__detail {
  font-size: var(--text-ui-sm);
  color: var(--color-ink-soft);
  line-height: 1.45;
}

.alert-row--dim .alert-row__detail {
  color: var(--color-ink-mute);
}

/* Meta row: tags + numbers */
.alert-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
  align-items: center;
}

.alert-row__tag {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--color-slate);
  background: var(--color-paper-tint);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
}

.alert-row__num {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  color: var(--color-ink-mute);
}

/* Timestamp */
.alert-row__ts {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  color: var(--color-ink-mute);
  white-space: nowrap;
  padding-top: 2px;
}

/* Resolved state (older alerts) */
.alert-row--resolved {
  opacity: 0.7;
}


/* ══════════════════════════════════════════════════════════════════════════
   10. SEVERITY BAR (standalone)
   ══════════════════════════════════════════════════════════════════════════
   Standalone left-border strip. Used in alert banners embedded in dashboards.
   Usage: add .severity-bar--{level} to any card/panel for a left accent.     */

.severity-bar--crit { border-left: 3px solid var(--color-crit-border); }
.severity-bar--warn { border-left: 3px solid var(--color-warn-border); }
.severity-bar--info { border-left: 3px solid var(--color-info-border); }
.severity-bar--ok   { border-left: 3px solid var(--color-clover); }


/* ══════════════════════════════════════════════════════════════════════════
   11. LUCK STRIP
   ══════════════════════════════════════════════════════════════════════════
   The Lumen's Luck footer strip. Clover background, italic phrase, optional
   inline metrics. Appears at the bottom of dashboard views as a grounding
   element. Warm, not kitsch. One clover mark, not a pattern.

   Usage:
     <div class="luck-strip">
       <div class="luck-strip__left">
         <span class="luck-strip__clover" aria-hidden="true">&#9827;</span>
         <span class="luck-strip__phrase">See it. Appreciate it. Move.</span>
       </div>
       <div class="luck-strip__metrics">
         <div class="luck-strip__metric">
           <div class="luck-strip__metric-val">247 fills</div>
           <div class="luck-strip__metric-label">today</div>
         </div>
       </div>
     </div>                                                                    */

.luck-strip {
  background: var(--color-clover-tint);
  border: 1px solid var(--color-clover-dim);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.luck-strip__left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.luck-strip__clover {
  font-size: 18px;
  line-height: 1;
  color: var(--color-clover);
}

.luck-strip__phrase {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--color-moss);
}

.luck-strip__metrics {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.luck-strip__metric {
  text-align: right;
}

.luck-strip__metric-val {
  font-family: var(--font-mono);
  font-size: var(--text-ui);
  font-weight: 500;
  color: var(--color-ok);
  font-variant-numeric: tabular-nums;
}

.luck-strip__metric-label {
  font-size: var(--text-micro);
  color: var(--color-ink-mute);
  letter-spacing: var(--tracking-wide);
}


/* ══════════════════════════════════════════════════════════════════════════
   12. DATA CARD
   ══════════════════════════════════════════════════════════════════════════
   Container for data tables, markout summaries, live feeds.

   Usage:
     <div class="data-card">
       <table class="data-card__table">...</table>
     </div>                                                                    */

.data-card {
  background: var(--color-paper-tint);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.data-card__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--color-rule);
  background: var(--color-paper-deep);
}

.data-card__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  font-weight: 400;
  color: var(--color-ink);
}

.data-card__link {
  font-size: var(--text-caption);
  color: var(--color-ember);
  border-bottom: 1px solid currentColor;
  cursor: pointer;
}

/* Table inside data-card — overrides base.css table for app-shell density */
.data-card table {
  background: var(--color-paper-tint);
}

.data-card thead tr {
  background: var(--color-paper-deep);
}

.data-card thead th {
  padding: 9px 14px;
}

.data-card tbody td {
  padding: 9px 14px;
  color: var(--color-ink-soft);
}

.data-card tbody tr:hover {
  background: var(--color-paper-deep);
}

/* Side badge (BUY/SELL) */
.side-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
}

.side-badge--buy  { background: var(--color-clover-tint); color: var(--color-clover); }
.side-badge--sell { background: var(--color-danger-tint); color: var(--color-danger); }


/* ══════════════════════════════════════════════════════════════════════════
   13. CHART FRAME (small-multiple container)
   ══════════════════════════════════════════════════════════════════════════
   Tufte: small multiples over big complex charts. The chart frame provides
   the consistent container; the chart content (SVG) is the designer's job.
   Zero decoration — the data does the work.

   Usage:
     <div class="chart-frame">
       <div class="chart-frame__label">STRC Price vs Thresholds</div>
       <div class="chart-frame__sub">Current $96.80 · Stage 1 $99 · Stage 2 $100</div>
       <div class="chart-frame__body">
         <svg ...>...</svg>
       </div>
       <p class="chart-frame__note">...</p>
     </div>                                                                    */

.chart-frame {
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  padding: 20px 20px 16px;
}

.chart-frame__label {
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-ink-mute);
  margin-bottom: var(--space-1);
}

.chart-frame__sub {
  font-size: var(--text-caption);
  color: var(--color-ink-mute);
  margin-bottom: var(--space-4);
}

.chart-frame__sub strong {
  color: var(--color-ink-soft);
}

.chart-frame__body {
  overflow: visible;
}

.chart-frame__body svg {
  display: block;
  overflow: visible;
}

.chart-frame__note {
  font-size: var(--text-label);
  color: var(--color-ink-mute);
  margin-top: var(--space-3);
  line-height: 1.5;
  max-width: none; /* override base.css 72ch limit inside chart frames */
}

.chart-frame__note strong {
  color: var(--color-ink-soft);
}

/* Grid layouts for small multiples */
.chart-grid {
  display: grid;
  gap: var(--space-5);
}

.chart-grid--2 { grid-template-columns: 1fr 1fr; }
.chart-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.chart-grid--4 { grid-template-columns: 1fr 1fr 1fr 1fr; }

@media (max-width: 900px) {
  .chart-grid--3,
  .chart-grid--4 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .chart-grid--2,
  .chart-grid--3,
  .chart-grid--4 { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════════════════════
   14. TIER TABLE (pricing)
   ══════════════════════════════════════════════════════════════════════════
   The pricing tiers for the Mentor desk / Ask Kestrel surface.
   Müller-Brockmann: table over cards; discipline over decoration.

   Usage:
     <div class="tier-table" role="table" aria-label="Answer tiers">
       <div class="tier-row" role="row">
         <span class="tier-row__name">Quick read</span>
         <span class="tier-row__price">$1 floor</span>
         <span class="tier-row__desc">Under 2 min · sanity check</span>
       </div>
       <div class="tier-row tier-row--featured" role="row">...</div>
     </div>                                                                    */

.tier-table {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-paper);
}

.tier-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-rule);
  gap: 2px var(--space-5);
  transition: background var(--motion-fast);
}

.tier-row:last-child {
  border-bottom: none;
}

.tier-row:hover {
  background: var(--color-clover-tint);
}

/* Featured row (most common tier) */
.tier-row--featured {
  background: var(--color-clover-tint);
  border-left: 3px solid var(--color-clover);
  padding-left: 15px;
}

.tier-row__name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  font-weight: 400;
  color: var(--color-ink);
  grid-column: 1;
  grid-row: 1;
  align-self: baseline;
}

.tier-row__price {
  font-family: var(--font-mono);
  font-size: var(--text-ui);
  font-weight: 500;
  color: var(--color-ember);
  grid-column: 2;
  grid-row: 1;
  text-align: right;
  white-space: nowrap;
  align-self: baseline;
  font-variant-numeric: tabular-nums;
}

.tier-row__desc {
  font-size: var(--text-caption);
  color: var(--color-ink-mute);
  grid-column: 1 / -1;
  grid-row: 2;
  line-height: 1.4;
}

.tier-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  background: var(--color-clover);
  color: #fff;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  vertical-align: middle;
  margin-left: var(--space-2);
  position: relative;
  top: -1px;
}


/* ══════════════════════════════════════════════════════════════════════════
   15. RISK GAUGE
   ══════════════════════════════════════════════════════════════════════════
   Horizontal progress bar for risk/capacity metrics. The track is paper-deep;
   the fill color signals state (ok/warn/danger).

   Usage:
     <div class="risk-gauge">
       <div class="risk-gauge__header">
         <span class="risk-gauge__name">Gross exposure</span>
         <span class="risk-gauge__val">$1.84k / $5k</span>
       </div>
       <div class="risk-gauge__track">
         <div class="risk-gauge__fill risk-gauge__fill--ok" style="width:37%"></div>
       </div>
       <div class="risk-gauge__footer">
         <span>37% of cap</span><span class="risk-gauge__status">OK</span>
       </div>
     </div>                                                                    */

.risk-gauge {
  background: var(--color-paper-tint);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}

.risk-gauge__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.risk-gauge__name {
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--color-ink-soft);
}

.risk-gauge__val {
  font-family: var(--font-mono);
  font-size: var(--text-ui-sm);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.risk-gauge__track {
  height: 6px;
  background: var(--color-paper-deep);
  border-radius: 3px;
  overflow: hidden;
}

.risk-gauge__fill {
  height: 100%;
  border-radius: 3px;
  transition: width var(--motion-slow);
  background: var(--color-clover);
}

.risk-gauge__fill--ok     { background: var(--color-clover); }
.risk-gauge__fill--warn   { background: var(--color-dusk); }
.risk-gauge__fill--danger { background: var(--color-danger); }

.risk-gauge__footer {
  margin-top: var(--space-1);
  font-size: var(--text-label);
  color: var(--color-ink-mute);
  display: flex;
  justify-content: space-between;
}


/* ══════════════════════════════════════════════════════════════════════════
   16. FEED ITEM (live event feed)
   ══════════════════════════════════════════════════════════════════════════
   Compact event feed row. Dot encodes event type in peripheral vision.

   Usage:
     <div class="feed-item">
       <div class="feed-item__dot feed-item__dot--fill"></div>
       <div class="feed-item__text">
         <strong>FILL</strong> BUY YES @0.62 · $48 · Trump exec order
       </div>
       <div class="feed-item__time">14:22:51</div>
     </div>                                                                    */

.feed-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-3);
  padding: 8px 14px;
  border-bottom: 1px solid var(--color-rule);
  align-items: start;
  font-size: var(--text-caption);
}

.feed-item:last-child {
  border-bottom: none;
}

.feed-item__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 4px;
  flex-shrink: 0;
  background: var(--color-slate);
}

.feed-item__dot--fill   { background: var(--color-clover); }
.feed-item__dot--warn   { background: var(--color-dusk); }
.feed-item__dot--err    { background: var(--color-danger); }
.feed-item__dot--cancel { background: var(--color-slate); }

.feed-item__text {
  color: var(--color-ink-soft);
  line-height: 1.4;
}

.feed-item__text strong {
  color: var(--color-ink);
  font-weight: 600;
}

.feed-item__time {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--color-ink-mute);
  white-space: nowrap;
}


/* ══════════════════════════════════════════════════════════════════════════
   APP SHELL LAYOUT (used by Bridge + Alerts surfaces)
   ══════════════════════════════════════════════════════════════════════════ */

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: var(--topbar-height) 1fr;
  min-height: 100vh;
}

.app-topbar {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-ink);
  border-bottom: 1px solid #2e2b26;
  padding: 0 var(--space-5) 0 0;
}

.app-topbar__brand {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 var(--space-5);
  border-right: 1px solid #2e2b26;
  width: var(--sidebar-width);
}

.app-topbar__center {
  flex: 1;
  padding: 0 var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  color: #6b6359;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.app-topbar__center .current {
  color: var(--color-paper-tint);
}

.app-topbar__right {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.app-topbar__time {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--color-ink-mute);
}

.app-sidebar {
  grid-column: 1;
  grid-row: 2;
  background: var(--color-paper-tint);
  border-right: 1px solid var(--color-rule);
  padding: var(--space-5) 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.app-sidebar__section {
  margin-bottom: var(--space-1);
}

.app-sidebar__label {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-ink-mute);
  padding: var(--space-3) var(--space-4) var(--space-1);
}

.app-sidebar__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 7px 16px;
  color: var(--color-ink-soft);
  font-size: var(--text-ui-sm);
  font-weight: 500;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background var(--motion-fast);
  text-decoration: none;
  border-bottom: none;
}

.app-sidebar__item:hover {
  background: var(--color-paper-deep);
  color: var(--color-ink);
}

.app-sidebar__item--active {
  border-left-color: var(--color-clover);
  background: var(--color-clover-tint);
  color: var(--color-ink);
}

.app-sidebar__badge {
  margin-left: auto;
  background: var(--color-danger);
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: 500;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
}

.app-sidebar__badge--warn {
  background: var(--color-warn);
}

.app-main {
  grid-column: 2;
  grid-row: 2;
  padding: var(--space-6) var(--space-7);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

@media (max-width: 760px) {
  .app-shell {
    grid-template-columns: 1fr;
  }
  .app-sidebar {
    display: none;
  }
  .app-topbar__brand {
    width: auto;
  }
}