/* ============================================================
   cards.css — Round 2a (universal card primitive)

   Loads AFTER components.css. Provides the .card / .card-account
   family used by:
     - watched-row
     - dashboard-activity feed (Round 2a future migration)
     - any future grid layout

   Five zones, status left-border, icon strip, AI slot, KPI badge.
   All values read from tokens.css.

   The Round 1 .watched-card / .watched-card-* rules in components.css
   become inert (their elements no longer exist in the DOM after this
   round). They can be removed in Round 2b's CSS cleanup pass; leaving
   them there is harmless aside from a few KB of unused CSS.
   ============================================================ */

/* ---------- Watched row container ---------- */
/* Re-styled to host the new .card-account primitive. The Round 1
   .watched-row rules in components.css remain valid — same flex/snap
   semantics — but the cards inside are now class .card-account, not
   class .watched-card. */

.watched-row {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 4px;
  padding: 4px 4px 12px;
  margin: 0 -4px;
  -webkit-overflow-scrolling: touch;
}

.watched-row::-webkit-scrollbar { height: 6px; }
.watched-row::-webkit-scrollbar-track { background: transparent; }
.watched-row::-webkit-scrollbar-thumb {
  background: rgba(28, 28, 26, 0.12);
  border-radius: var(--radius-pill);
}
.watched-row::-webkit-scrollbar-thumb:hover {
  background: rgba(28, 28, 26, 0.22);
}

.watched-row > .card-account {
  scroll-snap-align: start;
  flex: 0 0 320px;
}

.watched-empty {
  padding: 24px;
  font-style: italic;
  color: var(--text-secondary);
  font-size: var(--text-base);
  text-align: center;
  background: var(--color-paper-100);
  border-radius: var(--radius-md);
}

/* ============================================================
   .card-account — the universal card primitive
   ============================================================ */

.card {
  background: var(--bg-elev-1);
  border-radius: var(--radius-lg);
  border: 0.5px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition:
    box-shadow var(--motion-fast) var(--easing-out),
    transform var(--motion-fast) var(--easing-out),
    border-color var(--motion-fast) var(--easing-out);
}

.card-account {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3);
  cursor: pointer;
  user-select: none;

  /* Universal status border — the left edge */
  border-left: 3px solid var(--card-status-color, var(--color-sand-300));
}

.card-account:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  border-color: var(--border-default);
}

.card-account:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.card-account.is-dragging {
  opacity: 0.4;
  cursor: grabbing;
}

/* Status border — universal but tinted by status tone.
   Driven by data-status-tone attribute set by Card.renderAccount. */
.card-account[data-status-tone="neutral"]         { --card-status-color: var(--color-sand-300); }
.card-account[data-status-tone="overdue"]         { --card-status-color: var(--status-overdue-accent); }
.card-account[data-status-tone="stale"]           { --card-status-color: var(--status-stale-accent); }
.card-account[data-status-tone="quote_out"]       { --card-status-color: var(--status-quote-out-accent); }
.card-account[data-status-tone="active_customer"] { --card-status-color: var(--status-active-accent); }

/* ---------- Zone 1 — name + watch star ---------- */

.card-zone-1 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 28px;
}

.card-name {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: var(--leading-tight);
  letter-spacing: -0.005em;
  color: var(--text-primary);
  margin: 0;
  word-break: break-word;
  flex: 1 1 auto;
}

.card-name:hover {
  /* Names visually styled, but card-is-the-target — no separate hit area */
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 3px;
  text-decoration-color: var(--brand-gold-soft);
}

.card-star {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--brand-gold);
  transition: background var(--motion-fast) var(--easing-out),
              transform var(--motion-fast) var(--easing-out);
  padding: 0;
}

.card-star:hover {
  background: rgba(107, 91, 46, 0.08);
  transform: scale(1.05);
}

.card-star[aria-pressed="false"] { color: var(--text-tertiary); }
.card-star[aria-pressed="false"]:hover { color: var(--brand-gold); }

/* ---------- Zone 2 — location + type ---------- */

.card-zone-2 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--text-secondary);
  line-height: var(--leading-snug);
  word-break: break-word;
}

.card-zone-2-empty { display: none; }

/* ---------- Zone 3 — icon strip ---------- */

.card-zone-3 { /* spacing only, the strip itself styles below */ }

.card-icon-strip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-2) 0;
  border-top: 0.5px solid var(--border-subtle);
  border-bottom: 0.5px solid var(--border-subtle);
}

.card-icon-cell {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: help;
}

.card-icon-cell.is-muted {
  opacity: 0.45;
}

.card-icon-cell.is-rose {
  color: var(--color-rose-600);
  font-weight: 500;
}
.card-icon-cell.is-peach {
  color: var(--color-peach-600);
  font-weight: 500;
}

.card-icon-glyph {
  display: inline-flex;
  align-items: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.card-icon-num {
  font-feature-settings: "tnum" 1;
}

/* ---------- Zone 4 — AI suggestion slot ---------- */

.card-zone-4 { /* host only */ }

.card-ai-slot {
  background: var(--color-paper-100);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-left: 2px solid var(--color-lilac-400);
}

.card-ai-slot.is-active {
  background: var(--color-lilac-50);
}

.card-ai-slot.is-placeholder {
  background: var(--color-paper-100);
  border-left-color: var(--color-sand-300);
}

.card-ai-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-tertiary);
  font-weight: 500;
}

.card-ai-body {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--text-primary);
}

.card-ai-slot.is-placeholder .card-ai-body {
  color: var(--text-secondary);
  font-style: italic;
}

.card-ai-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.card-ai-meta-text { letter-spacing: 0.02em; }

.card-ai-trigger {
  background: transparent;
  border: 0.5px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--motion-fast) var(--easing-out),
              border-color var(--motion-fast) var(--easing-out);
}

.card-ai-trigger:hover {
  background: var(--bg-elev-1);
  border-color: var(--border-strong);
}

/* ---------- Zone 5 — stream pill + KPI badge ---------- */

.card-zone-5 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-1);
}

.card-zone-5-left,
.card-zone-5-right {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.card-stream-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 6px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--color-paper-100);
  border: 0.5px solid var(--border-subtle);
}

.card-stream-pill.is-empty {
  font-style: italic;
  color: var(--text-tertiary);
  text-transform: none;
  letter-spacing: 0;
}

.card-stream-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.card-stream-more {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-tertiary);
  margin-left: 2px;
}

.card-kpi {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  font-feature-settings: "tnum" 1;
}

.card-kpi-winprob {
  background: var(--color-sky-50);
  color: var(--color-sky-800);
}

.card-kpi-lifetime {
  background: var(--color-mint-50);
  color: var(--color-mint-900);
}

.card-kpi-dormant {
  background: var(--color-rose-50);
  color: var(--color-rose-800);
}

/* ============================================================
   .card-toast — non-blocking toast for "Analyze now" placeholder
   ============================================================ */

.card-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translate(-50%, 16px);
  background: var(--color-ink-900);
  color: #FFFFFF;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--motion-base) var(--easing-out),
    transform var(--motion-base) var(--easing-out);
  z-index: 9999;
  max-width: calc(100vw - 64px);
  text-align: center;
}

.card-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

/* ============================================================
   Round 2a notes — inert legacy rules
   The Round 1 .watched-card / .watched-card-* rules in components.css
   no longer match anything in the rendered DOM, since watched.js now
   produces .card-account elements. They're harmless dead code; will be
   stripped in Round 2b's CSS cleanup pass.
   ============================================================ */