/* Vindexes Snowflake · 元件樣式（focus / dim / skeleton / tooltip）
   與 snowflake-core.mjs 搭配。產品層共用，不放進 app-shell.css 以保持殼乾淨。 */

.sf-svg {
  display: block;
  overflow: visible;
}

/* ── focus / dim（hover 單軸高亮，其餘 fade）── */
.sf-spoke,
.sf-marker,
.sf-axlabel {
  transition: opacity 0.12s ease;
}

.sf-focusing .sf-marker:not(.sf-focus),
.sf-focusing .sf-axlabel:not(.sf-focus) {
  opacity: 0.3;
}

.sf-focusing .sf-spoke:not(.sf-focus) {
  opacity: 0.45;
}

.sf-marker.sf-focus {
  filter: drop-shadow(0 0 3px rgba(201, 169, 110, 0.6));
}

/* ── loading skeleton 脈動（不用 spinner / shimmer）── */
.sf-skeleton {
  animation: sf-pulse 1.6s ease-in-out infinite;
}

@keyframes sf-pulse {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.62;
  }
}

/* ── caption（X of 6 axes resolved）── */
.sf-caption {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-3);
  text-align: center;
  padding: 8px 0 2px;
}

.sf-caption b {
  color: var(--gold-dim);
  font-weight: 500;
}

.sf-caption.warn b {
  color: var(--warn);
}

/* ── tooltip（268px，自動避邊由 JS 翻面）── */
.sf-tip {
  position: absolute;
  width: 268px;
  padding: 12px 14px;
  background: var(--surface-3);
  border: 0.5px solid var(--border-strong);
  border-radius: 2px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
  z-index: 50;
}

.sf-tip.on {
  opacity: 1;
}

.sf-tip .t-h {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.sf-tip .t-row {
  display: flex;
  justify-content: space-between;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  padding: 3px 0;
}

.sf-tip .t-row .k {
  color: var(--text-3);
}

.sf-tip .t-row .v {
  color: var(--text);
}

.sf-tip .t-drivers {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 0.5px solid var(--line);
  font-size: 11px;
  color: var(--text-2);
  line-height: 1.5;
}

/* ── SnowflakeCard (Step 2) ── */

.sf-card {
  padding: 0;
  overflow: hidden;
}

.sf-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16px 20px 14px;
  border-bottom: 0.5px solid var(--border);
  flex-wrap: wrap;
  gap: 10px;
}

.sf-card-identity {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.sf-card-ticker {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 22px;
  color: var(--gold);
  letter-spacing: 0.08em;
}

.sf-card-name {
  font-size: 15px;
  color: var(--text-2);
}

.sf-card-meta {
  display: flex;
  gap: 14px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.06em;
  align-items: center;
}

.sf-card-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.sf-visual-mount {
  padding: 16px 12px 8px;
  border-right: 0.5px solid var(--border);
}

.sf-card-legend {
  padding: 20px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.sf-legend-row {
  display: flex;
  align-items: flex-end;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  line-height: 1;
}

.sf-legend-prefix {
  color: var(--gold-dim);
  min-width: 18px;
  flex-shrink: 0;
  font-size: 12px;
}

.sf-legend-name {
  color: var(--text-3);
  white-space: nowrap;
  font-size: 10px;
  letter-spacing: 0.04em;
}

.sf-legend-fill {
  flex: 1;
  border-bottom: 0.5px dotted rgba(201, 169, 110, 0.18);
  margin: 0 6px 2px;
  min-width: 10px;
}

.sf-legend-score {
  color: var(--text);
  white-space: nowrap;
  font-size: 11px;
}

.sf-legend-tier-chip {
  margin-left: 7px;
  padding: 1px 5px;
  border: 0.5px solid var(--gold-dim);
  border-radius: 2px;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--gold);
  flex-shrink: 0;
  white-space: nowrap;
}

.sf-legend-row.sf-legend-scp .sf-legend-prefix,
.sf-legend-row.sf-legend-scp .sf-legend-name,
.sf-legend-row.sf-legend-scp .sf-legend-score {
  color: var(--gold);
}

/* ── Strengths / Watch ── */
.sf-card-sw {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 0.5px solid var(--border);
}

.sf-card-strengths,
.sf-card-watch {
  padding: 14px 20px;
}

.sf-card-watch {
  border-left: 0.5px solid var(--border);
}

.sf-sw-label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 9px;
}

.sf-sw-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sf-sw-item {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  color: var(--text-2);
  line-height: 1.5;
}

.sf-sw-item .sf-sw-axis {
  color: var(--gold-dim);
  font-size: 10px;
  letter-spacing: 0.1em;
}

.sf-sw-item.sf-sw-empty {
  color: var(--text-3);
  font-style: italic;
}

/* ── Axis 6 Note ── */
.sf-card-axis6-note {
  border-top: 0.5px solid var(--border);
  padding: 14px 20px;
}

.sf-axis6-note-label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}

.sf-axis6-note-text {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.65;
}

.sf-axis6-note-text.sf-axis6-note-pending {
  color: var(--text-3);
  font-style: italic;
}

.sf-axis6-note-link {
  color: var(--text-3);
  border-bottom: 0.5px solid var(--border);
  transition: color 0.12s;
  white-space: nowrap;
}

.sf-axis6-note-link:hover { color: var(--gold-dim); }

/* ── Card footer ── */
.sf-card-footer {
  border-top: 0.5px solid var(--border);
  padding: 10px 20px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-3);
}

.sf-card-footer a {
  color: var(--text-3);
  border-bottom: 0.5px solid var(--border);
  transition: color 0.12s;
}

.sf-card-footer a:hover { color: var(--gold-dim); }

/* ── Compare Card ── */
.sf-compare-card {
  padding: 0;
}

.sf-compare-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 14px 20px 13px;
  border-bottom: 0.5px solid var(--border);
  flex-wrap: wrap;
}

.sf-compare-kicker,
.sf-compare-section-label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
}

.sf-compare-title {
  margin-top: 6px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 16px;
  color: var(--gold);
  letter-spacing: 0.06em;
}

.sf-compare-header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sf-compare-action {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 12px;
  border: 0.5px solid var(--line);
  border-radius: 2px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-2);
}

.sf-compare-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: 0.5px solid var(--border-strong);
  border-radius: 2px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  color: var(--text-2);
}

.sf-compare-chip.warn {
  border-color: var(--warn-border);
  color: var(--warn);
}

.sf-compare-chip.stale {
  border-color: var(--down-border);
  color: var(--down);
}

.sf-compare-company-strip {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 20px;
  border-bottom: 0.5px solid var(--line);
  flex-wrap: wrap;
}

.sf-compare-company-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.sf-compare-company-swatch {
  width: 22px;
  flex-shrink: 0;
}

.sf-compare-company-ticker {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 17px;
  color: var(--gold);
}

.sf-compare-company-name {
  font-size: 13px;
  color: var(--text);
}

.sf-compare-company-meta {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.04em;
}

.sf-compare-company-strip .sf-compare-chip {
  margin-left: auto;
}

.sf-compare-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
}

.sf-compare-visual-mount {
  padding: 24px 22px 16px;
  border-right: 0.5px solid var(--border);
}

.sf-compare-overlay-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sf-compare-overlay-stage {
  position: relative;
  width: min(100%, 470px);
}

.sf-compare-overlay-svg {
  display: block;
  width: 100%;
  overflow: visible;
}

.sf-compare-overlay-legend {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.sf-compare-overlay-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--text-2);
}

.sf-compare-overlay-line {
  width: 24px;
  border-top: 1.5px solid var(--gold);
}

.sf-compare-overlay-line.secondary {
  border-top-style: dashed;
}

.sf-compare-deltas,
.sf-compare-summary,
.sf-compare-axis6,
.sf-compare-mobile-stack {
  padding: 20px 24px;
}

.sf-compare-delta-row,
.sf-compare-mobile-row {
  padding: 11px 0;
  border-bottom: 0.5px solid var(--line);
}

.sf-compare-delta-row.host,
.sf-compare-mobile-row.host {
  background: rgba(201, 169, 110, 0.04);
  border-left: 2px solid var(--gold);
  padding-left: 10px;
  margin-left: -10px;
}

.sf-compare-delta-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 8px;
}

.sf-compare-axis-name,
.sf-compare-mobile-name {
  font-size: 12.5px;
  color: var(--text);
}

.sf-compare-axis-name em,
.sf-compare-mobile-name em {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin-left: 7px;
}

.sf-compare-delta,
.sf-compare-summary-delta {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 500;
}

.sf-compare-delta.up,
.sf-compare-summary-delta.up {
  color: var(--up);
}

.sf-compare-delta.down,
.sf-compare-summary-delta.down {
  color: var(--down);
}

.sf-compare-delta.flat {
  color: var(--text-3);
}

.sf-compare-delta-track,
.sf-compare-mobile-track {
  position: relative;
  height: 18px;
}

.sf-compare-track-base {
  position: absolute;
  top: 9px;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.13);
}

.sf-compare-track-segment {
  position: absolute;
  top: 8px;
  height: 2px;
  background: var(--gold-dim);
  opacity: 0.7;
}

.sf-compare-track-marker {
  position: absolute;
  top: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translateX(-4px);
}

.sf-compare-track-marker.primary {
  background: var(--gold);
}

.sf-compare-track-marker.secondary {
  background: var(--surface-2);
  border: 1.5px solid var(--gold);
}

.sf-compare-delta-values,
.sf-compare-mobile-values {
  display: flex;
  gap: 14px;
  margin-top: 7px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
}

.sf-compare-delta-values .primary,
.sf-compare-mobile-values .primary {
  color: var(--gold);
}

.sf-compare-delta-values .secondary,
.sf-compare-mobile-values .secondary {
  color: var(--text-2);
}

.sf-compare-delta-values b,
.sf-compare-mobile-values b {
  font-weight: 500;
}

.sf-compare-summary {
  border-top: 0.5px solid var(--border);
}

.sf-compare-summary-text {
  margin-top: 8px;
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.75;
  max-width: 880px;
}

.sf-compare-summary-text b,
.sf-compare-summary-tier {
  color: var(--text);
  font-weight: 500;
}

.sf-compare-summary-tier {
  color: var(--gold);
}

.sf-compare-axis6 {
  border-top: 0.5px solid var(--border);
  background: rgba(201, 169, 110, 0.02);
}

.sf-compare-axis6-grid {
  display: grid;
  gap: 14px;
  margin-top: 10px;
}

.sf-compare-axis6-row {
  display: grid;
  grid-template-columns: 120px 1fr 112px;
  gap: 18px;
  align-items: center;
}

.sf-compare-axis6-ticker {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  color: var(--text);
}

.sf-compare-axis6-bar {
  position: relative;
  height: 12px;
}

.sf-compare-axis6-track {
  position: absolute;
  top: 5.5px;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
}

.sf-compare-axis6-fill {
  position: absolute;
  top: 5px;
  left: 0;
  height: 2px;
  background: var(--gold);
}

.sf-compare-axis6-fill.secondary {
  background: var(--gold-dim);
  opacity: 0.6;
}

.sf-compare-axis6-dot {
  position: absolute;
  top: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translateX(-4px);
  background: var(--gold);
}

.sf-compare-axis6-dot.secondary {
  background: var(--surface-2);
  border: 1.5px solid var(--gold);
}

.sf-compare-axis6-value {
  position: absolute;
  top: -3px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--gold);
}

.sf-compare-axis6-tier-wrap {
  display: flex;
  justify-content: flex-end;
}

.sf-compare-axis6-tier {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  padding: 3px 9px;
  border-radius: 2px;
  color: var(--gold);
}

.sf-compare-axis6-tier.core {
  background: var(--gold-soft);
  border: 0.5px solid var(--border-strong);
}

.sf-compare-axis6-tier.allied {
  border: 0.5px dashed var(--border-strong);
}

.sf-compare-axis6-tier.peripheral,
.sf-compare-axis6-tier.non-pool,
.sf-compare-axis6-tier.pending {
  border: 0.5px solid var(--line);
  color: var(--text-2);
}

.sf-compare-axis6-ladder {
  display: flex;
  gap: 4px;
  margin-top: 16px;
  max-width: 460px;
}

.sf-compare-axis6-step {
  flex: 1;
  padding: 5px 0;
  border: 0.5px solid var(--line);
  border-radius: 1px;
  text-align: center;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--text-3);
}

.sf-compare-axis6-step.primary {
  color: var(--gold);
  border-color: var(--border-strong);
  background: var(--gold-soft);
}

.sf-compare-axis6-step.secondary {
  color: var(--gold);
  border-color: var(--border-strong);
  border-style: dashed;
}

.sf-compare-axis6-step-owner {
  display: block;
  margin-top: 2px;
  font-size: 8px;
  letter-spacing: 0.04em;
  color: var(--text-2);
}

.sf-compare-mobile-stack {
  display: none;
  border-top: 0.5px solid var(--border);
}

.sf-compare-mobile-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.sf-compare-mobile-title {
  margin-top: 6px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 15px;
  color: var(--gold);
}

.sf-compare-mobile-copy {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.65;
}

.sf-compare-mobile-table {
  margin-top: 14px;
}

/* ── Card responsive ── */
@media (max-width: 860px) {
  .sf-card-body {
    grid-template-columns: 1fr;
  }
  .sf-visual-mount {
    border-right: none;
    border-bottom: 0.5px solid var(--border);
  }
  .sf-card-sw {
    grid-template-columns: 1fr;
  }
  .sf-card-watch {
    border-left: none;
    border-top: 0.5px solid var(--border);
  }
  .sf-compare-body {
    grid-template-columns: 1fr;
  }
  .sf-compare-visual-mount {
    border-right: none;
    border-bottom: 0.5px solid var(--border);
  }
  .sf-compare-axis6-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .sf-compare-axis6-tier-wrap {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .sf-compare-header-actions {
    display: none;
  }
  .sf-compare-company-strip {
    gap: 12px;
  }
  .sf-compare-company-strip .sf-compare-chip {
    margin-left: 0;
  }
  .sf-compare-visual-mount,
  .sf-compare-deltas {
    display: none;
  }
  .sf-compare-mobile-stack {
    display: block;
  }
  .sf-compare-axis6-ladder {
    max-width: none;
  }
}

/* ── S&W details wrapper — desktop: always open, hide trigger ── */
.sf-card-sw-detail > .sf-sw-summary {
  display: none;
}

/* ── Mobile dock CTA — hidden on desktop ── */
.sf-mobile-dock {
  display: none;
}

/* ── Mobile Stacked Reveal ≤640px ── */
@media (max-width: 640px) {
  /* Abbr-only: hide score numbers from SVG axis labels */
  .sf-card .sf-axlabel-score {
    display: none;
  }

  /* S&W as collapsible accordion */
  .sf-card-sw-detail {
    display: block;
    border-top: 0.5px solid var(--border);
  }

  .sf-card-sw-detail > .sf-sw-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 20px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-3);
    cursor: pointer;
    list-style: none;
    user-select: none;
  }

  .sf-card-sw-detail > .sf-sw-summary::after {
    content: "▾";
    font-size: 10px;
    color: var(--gold-dim);
  }

  .sf-card-sw-detail[open] > .sf-sw-summary::after {
    content: "▴";
  }

  .sf-card-sw-detail > .sf-sw-summary::-webkit-details-marker {
    display: none;
  }

  /* Remove duplicate top border from sw (detail has it) */
  .sf-card-sw-detail .sf-card-sw {
    border-top: none;
  }

  /* Mobile dock: show and style */
  .sf-mobile-dock {
    display: flex;
    padding: 14px 20px;
    border-top: 0.5px solid var(--border);
    background: var(--surface-2);
  }

  .sf-mobile-dock-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 11px 20px;
    border: 0.5px solid var(--border-strong);
    border-radius: 2px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--gold);
    transition: background 0.12s ease;
  }

  .sf-mobile-dock-cta:hover {
    background: var(--gold-soft);
  }
}

/* ── error / gated inline banner ── */
.sf-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  margin-top: 10px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.5;
  border-top: 0.5px solid var(--down-border);
  border-bottom: 0.5px solid var(--down-border);
  color: var(--text-2);
}

.sf-banner.warn {
  border-color: var(--warn-border);
  color: var(--warn);
}

.sf-banner.error {
  color: var(--down);
}

.sf-banner a {
  color: var(--gold-dim);
  border-bottom: 0.5px solid var(--border);
}

/* Gated Pro inset — Axis 6 section when state=gated */
.sf-axis6-gated-inset {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 18px;
  margin: 12px 0;
  background: rgba(201,169,110,0.04);
  border: 0.5px solid rgba(201,169,110,0.18);
  border-radius: 2px;
}

.sf-gated-lock {
  font-size: 20px;
  line-height: 1;
}

.sf-gated-text {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-2);
}

.sf-gated-text strong {
  color: var(--gold-dim);
}

.sf-gated-upgrade-btn {
  align-self: flex-start;
  padding: 7px 14px;
  background: none;
  border: 0.5px solid rgba(201,169,110,0.5);
  border-radius: 2px;
  color: var(--gold);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.12s ease;
}

.sf-gated-upgrade-btn:hover {
  background: rgba(201,169,110,0.08);
}