/* ═══════════════════════════════════════════════════════════════════
   Yolt v11 — D-N46p2 Brother Test layer phase 2.
   what-should-i-do · chart-whatnow · coach-marks · empty-state sampler · freshness-indicator

   HARD rules (CLAUDE.md):
     · oklch only — ZERO hex
     · spacing only via --space-* tokens
     · ZERO Tailwind utilities
     · prefers-reduced-motion: skip transitions
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   1) what-should-i-do · persistent pill + slide-out panel.
   ───────────────────────────────────────────────────────────────── */
.wsid-pill {
  position: fixed;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 8500;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--accent) 45%, var(--line));
  background: color-mix(in oklch, var(--accent) 18%, var(--bg-1));
  color: var(--ink-0);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-mid);
  transition: transform 0.18s ease, background 0.18s ease;
}
.wsid-pill[data-reduced-motion="1"] { transition: none; }
.wsid-pill:hover { background: color-mix(in oklch, var(--accent) 28%, var(--bg-1)); transform: translateY(-1px); }
.wsid-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wsid-pill-icon { font-size: 1.1em; }
.wsid-pill-count { color: var(--accent-bright); font-weight: 700; }

.wsid-panel {
  position: fixed;
  top: 70px;
  right: var(--space-md);
  width: 380px;
  max-width: calc(100vw - var(--space-lg));
  max-height: calc(100vh - 100px);
  z-index: 8501;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-high);
  overflow-y: auto;
  padding: var(--space-md);
}
.wsid-panel-bottom-sheet {
  top: auto;
  right: 0;
  left: 0;
  bottom: 0;
  width: auto;
  max-height: 70vh;
  border-radius: 16px 16px 0 0;
}
.wsid-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.wsid-heading {
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink-0);
}
.wsid-refresh, .wsid-close {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-1);
  width: 32px;
  height: 32px;
  border-radius: 16px;
  cursor: pointer;
  font-size: 1.1em;
}
.wsid-refresh:hover, .wsid-close:hover { background: var(--bg-3); }
.wsid-body { display: flex; flex-direction: column; gap: var(--space-md); }
.wsid-loading, .wsid-empty, .wsid-error {
  text-align: center;
  color: var(--ink-2);
  padding: var(--space-md);
  font-size: 0.9rem;
}
.wsid-error { color: var(--bad); }

.wsid-action {
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink-3);
  border-radius: 8px;
  padding: var(--space-sm) var(--space-md);
  background: color-mix(in oklch, var(--bg-3) 30%, var(--bg-2));
}
.wsid-action.wsid-tone-good { border-left-color: var(--good); }
.wsid-action.wsid-tone-warn { border-left-color: var(--warn); }
.wsid-action.wsid-tone-bad  { border-left-color: var(--bad); }
.wsid-action.wsid-tone-info { border-left-color: var(--info); }
.wsid-action-title {
  font-weight: 600;
  color: var(--ink-0);
  margin-bottom: var(--space-xs);
}
.wsid-action-why {
  color: var(--ink-1);
  font-size: 0.88rem;
  line-height: 1.45;
  margin-bottom: var(--space-sm);
}
.wsid-ctas { display: flex; flex-direction: column; gap: var(--space-sm); }
.wsid-exec {
  background: var(--accent);
  color: var(--bg-0);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  font-weight: 600;
}
.wsid-exec:hover { background: var(--accent-bright); }
.wsid-secondary {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}
.wsid-secondary button {
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  padding: 3px var(--space-sm);
  font-size: 0.78rem;
  cursor: pointer;
}
.wsid-secondary button:hover { background: var(--bg-3); color: var(--ink-0); }

/* ─────────────────────────────────────────────────────────────────
   2) chart-whatnow CTA + modal.
   ───────────────────────────────────────────────────────────────── */
.chart-whatnow-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 4px var(--space-sm);
  border: 1px dashed color-mix(in oklch, var(--info) 50%, var(--line));
  border-radius: 12px;
  background: transparent;
  color: var(--info);
  font-size: 0.78rem;
  cursor: pointer;
  margin-top: var(--space-sm);
}
.chart-whatnow-cta:hover {
  background: color-mix(in oklch, var(--info) 14%, transparent);
}
.cwn-icon { font-size: 1em; }

.cwn-modal-wrap {
  position: fixed;
  inset: 0;
  z-index: 9100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cwn-backdrop {
  position: absolute;
  inset: 0;
  background: oklch(0 0 0 / 0.55);
}
.cwn-modal {
  position: relative;
  z-index: 9101;
  max-width: 480px;
  width: calc(100% - var(--space-lg));
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-high);
  padding: var(--space-lg);
  color: var(--ink-1);
}
.cwn-modal-close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-1);
  width: 32px;
  height: 32px;
  border-radius: 16px;
  font-size: 1.2em;
  cursor: pointer;
}
.cwn-modal-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink-0);
  margin-bottom: var(--space-md);
}
.cwn-bullets {
  list-style: disc;
  padding-left: var(--space-lg);
  margin: 0 0 var(--space-md) 0;
  color: var(--ink-1);
  font-size: 0.92rem;
  line-height: 1.5;
}
.cwn-bullets li { margin-bottom: var(--space-xs); }
.cwn-deep-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.cwn-deep-link {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  background: color-mix(in oklch, var(--accent) 15%, transparent);
  border: 1px solid color-mix(in oklch, var(--accent) 40%, var(--line));
  border-radius: 6px;
  color: var(--accent);
  text-decoration: none;
  font-size: 0.88rem;
}
.cwn-deep-link:hover { background: color-mix(in oklch, var(--accent) 25%, transparent); }

/* ─────────────────────────────────────────────────────────────────
   3) coach-marks · spotlight overlay.
   ───────────────────────────────────────────────────────────────── */
.coach-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  pointer-events: auto;
}
.coach-mask {
  position: absolute;
  background: oklch(0 0 0 / 0.62);
  transition: top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease;
}
.coach-overlay[data-reduced-motion="1"] .coach-mask { transition: none; }
.coach-spotlight {
  position: absolute;
  border-radius: 8px;
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 35%, transparent);
  pointer-events: none;
  transition: top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease;
}
.coach-overlay[data-reduced-motion="1"] .coach-spotlight { transition: none; }
.coach-tooltip {
  position: absolute;
  width: 320px;
  max-width: calc(100vw - var(--space-lg));
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-high);
  padding: var(--space-md);
  color: var(--ink-1);
}
.coach-title {
  font-weight: 700;
  color: var(--ink-0);
  margin-bottom: var(--space-xs);
}
.coach-body {
  font-size: 0.92rem;
  line-height: 1.5;
  margin-bottom: var(--space-md);
}
.coach-progress {
  font-size: 0.78rem;
  color: var(--ink-2);
  margin-bottom: var(--space-sm);
}
.coach-controls {
  display: flex;
  gap: var(--space-sm);
  justify-content: flex-end;
}
.coach-ok {
  background: var(--accent);
  color: var(--bg-0);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: var(--space-sm) var(--space-md);
  font-weight: 600;
  cursor: pointer;
}
.coach-ok:hover { background: var(--accent-bright); }
.coach-skip {
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
}
.coach-skip:hover { color: var(--ink-0); background: var(--bg-3); }

/* ─────────────────────────────────────────────────────────────────
   4) empty-state sampler · ghost rows + connect CTA overlay.
   ───────────────────────────────────────────────────────────────── */
.empty-state-sampler {
  position: relative;
  min-height: 160px;
  padding: var(--space-md);
  border: 1px dashed var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.es-ghost-body {
  filter: blur(0.6px) saturate(0.6) opacity(0.55);
  pointer-events: none;
  user-select: none;
}
.es-ghost-row td, .es-ghost-row th { color: var(--ink-3); }
.es-ghost-scorecard { opacity: 0.7; }
.es-ghost-subline {
  font-size: 0.78rem;
  color: var(--ink-2);
  margin-top: var(--space-xs);
}
.es-ghost-spark-line {
  stroke: var(--ink-3);
  stroke-width: 1.4;
  stroke-dasharray: 4 3;
}
.es-ghost-seg {
  stroke: var(--bg-2);
  stroke-width: 0.5;
}
.es-ghost-seg.tone-good { fill: color-mix(in oklch, var(--good) 50%, transparent); }
.es-ghost-seg.tone-info { fill: color-mix(in oklch, var(--info) 50%, transparent); }
.es-ghost-seg.tone-neutral { fill: color-mix(in oklch, var(--ink-3) 40%, transparent); }
.es-ghost-cell.heat-hi  { background: color-mix(in oklch, var(--accent) 35%, transparent); }
.es-ghost-cell.heat-mid { background: color-mix(in oklch, var(--accent) 20%, transparent); }
.es-ghost-cell.heat-lo  { background: color-mix(in oklch, var(--accent) 10%, transparent); }
.es-ghost-cell.heat-none{ background: transparent; }
.es-ghost-funnel-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
}
.es-ghost-funnel-bar {
  height: 14px;
  background: color-mix(in oklch, var(--accent) 30%, transparent);
  border-radius: 3px;
  flex-grow: 0;
  min-width: 16px;
}
.es-ghost-funnel-label {
  width: 90px;
  color: var(--ink-3);
  font-size: 0.78rem;
}
.es-ghost-funnel-cr { color: var(--ink-2); font-size: 0.78rem; }
.es-ghost-bubble-c {
  fill: color-mix(in oklch, var(--accent) 28%, transparent);
  stroke: var(--ink-3);
  stroke-width: 0.5;
}

.es-ghost-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.es-ghost-cta {
  pointer-events: auto;
  display: inline-block;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-2);
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-mid);
}
.es-ghost-cta:hover { background: color-mix(in oklch, var(--accent) 18%, var(--bg-2)); }

/* ─────────────────────────────────────────────────────────────────
   5) freshness-indicator.
   ───────────────────────────────────────────────────────────────── */
.freshness-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 2px var(--space-sm);
  border-radius: 10px;
  background: color-mix(in oklch, var(--bg-3) 50%, transparent);
  border: 1px solid var(--line-soft);
  font-size: 0.75rem;
  color: var(--ink-2);
  position: relative;
}
.freshness-indicator.hidden { display: none; }
.fi-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  background: var(--ink-3);
}
.fi-dot.fi-live      { background: var(--good); box-shadow: 0 0 6px color-mix(in oklch, var(--good) 60%, transparent); }
.fi-dot.fi-stale     { background: var(--warn); }
.fi-dot.fi-outdated  { background: var(--bad); }
.fi-text { color: var(--ink-1); }
.fi-rel  { color: var(--ink-2); }
.fi-refresh {
  margin-left: var(--space-xs);
  background: transparent;
  border: 1px solid var(--bad);
  color: var(--bad);
  border-radius: 4px;
  padding: 1px var(--space-sm);
  cursor: pointer;
  font-size: 0.72rem;
}
.fi-refresh:hover { background: color-mix(in oklch, var(--bad) 18%, transparent); }

/* ─────────────────────────────────────────────────────────────────
   prefers-reduced-motion · disable animations.
   ───────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .wsid-pill,
  .coach-mask,
  .coach-spotlight,
  .cwn-modal,
  .es-ghost-cta {
    transition: none !important;
    animation: none !important;
  }
}

/* Mobile tweaks. */
@media (max-width: 640px) {
  .wsid-pill {
    top: auto;
    bottom: var(--space-md);
    right: var(--space-md);
  }
  .coach-tooltip {
    width: calc(100vw - var(--space-lg));
  }
}