/* ============================================================
   frontend/patterns.css
   Styles for the three "Reading the Field" tabs:
     · Convergence   (IV)
     · Movements     (V)
     · Silence       (VI)

   Loaded AFTER styles-extra.css so it inherits everything.
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   Shared button accents
   ════════════════════════════════════════════════════════════ */
.btn--primary {
  background: var(--teal);
  color: var(--bg-0);
  border: none;
}
.btn--primary:hover { filter: brightness(1.1); }

/* ════════════════════════════════════════════════════════════
   CONVERGENCE — the IP layer
   ════════════════════════════════════════════════════════════ */

.conv-control {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 18px 20px;
  background: linear-gradient(160deg,
    color-mix(in oklab, var(--gold-bright) 6%, var(--bg-1)),
    var(--bg-1));
  border: 1px solid color-mix(in oklab, var(--gold-bright) 18%, var(--slate-1));
  border-radius: 4px;
  margin-bottom: 18px;
}
.conv-status { flex: 1; }
.conv-scan-btn {
  white-space: nowrap;
  padding: 11px 22px;
  font-weight: 500;
  background: var(--gold-bright);
  color: var(--bg-0);
  border: none;
  border-radius: 3px;
  letter-spacing: 0.03em;
}
.conv-scan-btn:hover { filter: brightness(1.06); }
.conv-scan-btn:disabled { background: var(--slate-2); color: var(--ivory-dim); cursor: wait; filter: none; }

.conv-scanning-banner,
.sil-scanning-banner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 18px;
  background: rgba(224,182,90,0.06);
  border: 1px solid rgba(224,182,90,0.25);
  border-radius: 4px;
  margin-bottom: 18px;
}
.sil-scanning-banner {
  background: rgba(167,139,250,0.06);
  border-color: rgba(167,139,250,0.28);
}

.conv-pulse-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold-bright);
  margin-top: 5px; flex-shrink: 0;
  animation: convPulse 1.4s ease-in-out infinite;
}
.sil-scanning-banner .conv-pulse-dot { background: var(--purple); }
@keyframes convPulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1.1); }
}

.conv-error-banner {
  padding: 12px 16px;
  background: rgba(224,115,140,0.06);
  border: 1px solid rgba(224,115,140,0.28);
  border-radius: 4px;
  margin-bottom: 18px;
}

.conv-empty,
.sil-all-clear {
  text-align: center;
  padding: 60px 20px;
  border: 1px dashed var(--slate-2);
  border-radius: 4px;
}

.conv-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 14px;
}
.conv-list--accepted { opacity: 0.78; }

.conv-card {
  background: linear-gradient(160deg,
    color-mix(in oklab, var(--gold-bright) 10%, var(--bg-1)),
    var(--bg-1));
  border: 1px solid color-mix(in oklab, var(--gold-bright) 22%, var(--slate-1));
  border-radius: 4px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}
.conv-card.is-accepted {
  background: var(--bg-1);
  border-color: color-mix(in oklab, var(--teal) 28%, var(--slate-1));
}
.conv-card.is-revisit {
  background: linear-gradient(160deg,
    color-mix(in oklab, var(--purple) 10%, var(--bg-1)),
    var(--bg-1));
  border-color: color-mix(in oklab, var(--purple) 28%, var(--slate-1));
}
.conv-card.is-revisit .conv-card-samples {
  border-right-color: color-mix(in oklab, var(--purple) 35%, transparent);
}
.conv-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-display);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.conv-card-marker {
  color: var(--gold-bright);
  font-weight: 600;
}
.is-accepted .conv-card-marker { color: var(--teal); }
.conv-card-count { color: var(--slate-3); }
.conv-card-name {
  font-size: 19px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.005em;
  line-height: 1.35;
  color: var(--ivory);
}
.conv-card-mechanism {
  font-size: 13.5px;
  color: var(--ivory-dim);
  margin: 0;
  line-height: 1.55;
}
.conv-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.conv-chip {
  font-family: var(--font-display);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 2px;
  background: var(--bg-0);
  border: 1px solid var(--slate-1);
  color: var(--ivory-dim);
}
.conv-rhythm { font-style: italic; }
.conv-card-samples {
  list-style: none;
  margin: 0;
  padding: 10px 14px 8px 14px;
  background: rgba(0,0,0,0.18);
  border-radius: 3px;
  border-right: 2px solid color-mix(in oklab, var(--gold-bright) 35%, transparent);
}
.conv-card-samples li {
  font-size: 12px;
  color: var(--ivory-dim);
  line-height: 1.5;
  padding: 3px 0;
  border-bottom: 1px dotted var(--slate-1);
}
.conv-card-samples li:last-child { border-bottom: none; }
.conv-card-samples li.more {
  color: var(--slate-3);
  font-style: italic;
  font-size: 11px;
}
.conv-card-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
}
.conv-card-actions .btn { padding: 7px 14px; font-size: 12px; }
.conv-accepted-mark {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--teal);
}

/* ════════════════════════════════════════════════════════════
   MOVEMENTS — three horizons side-by-side
   ════════════════════════════════════════════════════════════ */

.mov-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 1100px) {
  .mov-grid { grid-template-columns: 1fr; }
}

.mov-col {
  background: var(--bg-1);
  border: 1px solid var(--slate-1);
  border-top: 3px solid var(--horizon-color, var(--ivory));
  border-radius: 4px;
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mov-col-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}
.mov-col-title {
  font-size: 20px;
  font-weight: 600;
  margin-top: 4px;
  color: var(--ivory);
  letter-spacing: -0.005em;
}
.mov-col-desc {
  font-size: 11.5px;
  color: var(--slate-3);
  margin-top: 4px;
  letter-spacing: 0.02em;
}
.mov-col-stat {
  text-align: left;
}
.mov-stat-big {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  color: var(--horizon-color, var(--ivory));
  font-variant-numeric: tabular-nums;
}
.mov-stat-label {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-3);
  margin-top: 4px;
}

.mov-spark {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 44px;
  padding: 0 2px;
  border-bottom: 1px dashed var(--slate-1);
}
.mov-spark-bar {
  flex: 1;
  min-width: 2px;
  background: var(--horizon-color);
  border-radius: 1px 1px 0 0;
  opacity: 0.55;
  transition: opacity 120ms;
}
.mov-spark-bar:hover { opacity: 1; }
.mov-spark-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--slate-3);
}

.mov-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.mov-metric {
  background: var(--bg-0);
  border: 1px solid var(--slate-1);
  border-radius: 3px;
  padding: 10px 12px;
}
.mov-metric-label {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-3);
}
.mov-metric-value {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--ivory);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
  line-height: 1;
}

.mov-section { display: flex; flex-direction: column; gap: 4px; }

.mov-layers { display: flex; flex-direction: column; gap: 6px; }
.mov-layer-row {
  display: grid;
  grid-template-columns: 88px 1fr 28px;
  gap: 8px;
  align-items: center;
  font-size: 12.5px;
}
.mov-layer-name { font-weight: 500; }
.mov-layer-bar {
  height: 6px;
  background: var(--bg-0);
  border-radius: 3px;
  overflow: hidden;
}
.mov-layer-fill {
  height: 100%;
  opacity: 0.75;
  transition: width 200ms;
}
.mov-layer-count {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--slate-3);
  text-align: left;
}

.mov-imp-bar {
  display: flex;
  height: 8px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--bg-0);
}
.mov-imp-seg { height: 100%; opacity: 0.85; }
.mov-imp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ivory-dim);
}
.mov-imp-tag { display: inline-flex; align-items: center; gap: 5px; }
.mov-imp-tag .dot {
  width: 7px; height: 7px; border-radius: 50%;
  display: inline-block;
}

.mov-top-list { display: flex; flex-direction: column; gap: 8px; }
.mov-top-card {
  background: var(--bg-0);
  border: 1px solid var(--slate-1);
  border-right: 2px solid var(--horizon-color);
  border-radius: 3px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mov-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mov-imp-flag {
  padding: 2px 8px;
  border-radius: 2px;
  color: var(--bg-0);
  font-weight: 600;
}
.mov-top-date { color: var(--slate-3); }
.mov-top-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ivory);
  letter-spacing: -0.003em;
  line-height: 1.4;
}
.mov-top-summary {
  font-size: 12px;
  color: var(--ivory-dim);
  line-height: 1.5;
}
.mov-top-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-family: var(--font-display);
  font-size: 10.5px;
}
.mov-mini-chip {
  padding: 1px 6px;
  border: 1px solid var(--slate-1);
  border-radius: 2px;
  letter-spacing: 0.04em;
}
.mov-top-link {
  margin-right: auto;
  color: var(--slate-3);
  font-size: 10.5px;
  letter-spacing: 0.06em;
}
.mov-top-link:hover { color: var(--teal); }
.mov-empty {
  padding: 24px 16px;
  text-align: center;
  background: var(--bg-0);
  border: 1px dashed var(--slate-1);
  border-radius: 3px;
  color: var(--slate-3);
  font-size: 12.5px;
}

/* ════════════════════════════════════════════════════════════
   SILENCE — negative space sensing
   ════════════════════════════════════════════════════════════ */

.sil-control {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 18px 20px;
  background: linear-gradient(160deg,
    color-mix(in oklab, var(--purple) 6%, var(--bg-1)),
    var(--bg-1));
  border: 1px solid color-mix(in oklab, var(--purple) 22%, var(--slate-1));
  border-radius: 4px;
  margin-bottom: 18px;
}
.sil-status { flex: 1; }
.sil-scan-btn {
  white-space: nowrap;
  padding: 11px 22px;
  font-weight: 500;
  background: var(--purple);
  color: var(--bg-0);
  border: none;
  border-radius: 3px;
  letter-spacing: 0.03em;
}
.sil-scan-btn:hover { filter: brightness(1.06); }
.sil-scan-btn:disabled { background: var(--slate-2); color: var(--ivory-dim); cursor: wait; filter: none; }

.sil-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 1100px) {
  .sil-grid { grid-template-columns: 1fr; }
}

.sil-block {
  background: var(--bg-1);
  border: 1px solid var(--slate-1);
  border-radius: 4px;
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sil-block-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--slate-1);
}
.sil-block-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--ivory);
  letter-spacing: -0.005em;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sil-block-icon {
  font-family: var(--font-display);
  color: var(--purple);
  font-size: 20px;
  line-height: 1;
}
.sil-block-desc {
  font-size: 12px;
  color: var(--ivory-dim);
  line-height: 1.5;
  margin-top: 6px;
  max-width: 280px;
}
.sil-block-count {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--purple);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.sil-block-empty {
  padding: 20px 12px;
  text-align: center;
  font-size: 12px;
  color: var(--slate-3);
  font-style: italic;
  border: 1px dashed var(--slate-1);
  border-radius: 3px;
}

.sil-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sil-card {
  background: var(--bg-0);
  border: 1px solid var(--slate-1);
  border-right: 3px solid var(--slate-2);
  border-radius: 3px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sil-card.sev-5 { border-right-color: var(--rose); }
.sil-card.sev-4 { border-right-color: var(--gold-bright); }
.sil-card.sev-3 { border-right-color: var(--purple); }
.sil-card.sev-2,
.sil-card.sev-1 { border-right-color: var(--slate-2); }

.sil-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.sil-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ivory);
  letter-spacing: -0.003em;
  word-break: break-word;
}
.sil-card-drop {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--rose);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.sev-3 .sil-card-drop { color: var(--purple); }
.sev-4 .sil-card-drop { color: var(--gold-bright); }
.sil-card-stats {
  font-family: var(--font-display);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--slate-3);
}
.sil-card-stats b {
  color: var(--ivory-dim);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.sil-card-vs { display: inline; }
.sil-card-body {
  font-size: 12.5px;
  color: var(--ivory-dim);
  line-height: 1.55;
  margin: 0;
}
.sil-card-body.dim { color: var(--slate-3); font-style: italic; }
.sil-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}
.sil-card-actions .btn {
  font-size: 10.5px;
  padding: 4px 10px;
  letter-spacing: 0.05em;
}

.sil-ack-details {
  margin-top: 4px;
  font-size: 12px;
}
.sil-ack-details summary {
  cursor: pointer;
  color: var(--slate-3);
  font-family: var(--font-display);
  letter-spacing: 0.06em;
  padding: 6px 0;
  list-style: none;
}
.sil-ack-details summary::before {
  content: '▸ ';
  margin-left: 4px;
  transition: transform 100ms;
}
.sil-ack-details[open] summary::before { content: '▾ '; }
.sil-ack-details summary:hover { color: var(--ivory-dim); }

/* ════════════════════════════════════════════════════════════
   MODEL TENSION — where the stream pushes back on the world-model
   ════════════════════════════════════════════════════════════ */

.mt-control {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  padding: 14px 0 18px;
  border-bottom: 1px solid var(--slate-1);
  margin-bottom: 22px;
}

.mt-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
@media (max-width: 980px) { .mt-grid { grid-template-columns: 1fr; } }

.mt-block {
  background: var(--bg-1);
  border: 1px solid var(--slate-1);
  border-top: 2px solid var(--mt-accent, var(--gold));
  border-radius: 4px;
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mt-block-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.mt-block-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--ivory);
  display: flex;
  align-items: center;
  gap: 9px;
}
.mt-block-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mt-accent, var(--gold));
  flex-shrink: 0;
}
.mt-block-en {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--slate-3);
  text-transform: uppercase;
}
.mt-block-count {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--mt-accent, var(--gold));
  line-height: 1;
}

.mt-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mt-card {
  background: var(--bg-0);
  border: 1px solid var(--slate-1);
  border-right: 3px solid var(--mt-accent, var(--gold));
  border-radius: 3px;
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.mt-card.is-resolved { opacity: 0.55; border-right-color: var(--slate-2); }

.mt-card-note {
  font-size: 14px;
  font-weight: 500;
  color: var(--ivory);
  line-height: 1.55;
  letter-spacing: -0.003em;
  text-wrap: pretty;
}
.mt-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--slate-3);
}
.mt-card-imp { color: var(--mt-accent, var(--gold)); letter-spacing: 1px; font-size: 9px; }
.mt-card-src { color: var(--ivory-dim); flex: 1; min-width: 0; }
.mt-card-link {
  color: var(--blue);
  text-decoration: none;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
}
.mt-card-link:hover { text-decoration: underline; }

.mt-card-actions {
  display: flex;
  gap: 8px;
  padding-top: 2px;
}
.mt-card-resolved-tag {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--slate-3);
}

.mt-clear {
  text-align: center;
  padding: 60px 20px;
  background: var(--bg-1);
  border: 1px solid var(--slate-1);
  border-radius: 4px;
}

/* ════════════════════════════════════════════════════════════
   FORECASTS — the resolution loop / track record
   ════════════════════════════════════════════════════════════ */

.fc-record {
  display: grid;
  grid-template-columns: repeat(4, auto) 1fr;
  gap: 18px 26px;
  align-items: center;
  background: var(--bg-1);
  border: 1px solid var(--slate-1);
  border-radius: 5px;
  padding: 18px 22px;
}
@media (max-width: 860px) { .fc-record { grid-template-columns: repeat(2, 1fr); } }
.fc-record-stat { text-align: center; }
.fc-record-num {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  color: var(--ivory);
}
.fc-record-label {
  font-size: 11px;
  color: var(--slate-3);
  margin-top: 6px;
  letter-spacing: 0.02em;
}
.fc-calib {
  border-inline-start: 1px solid var(--slate-1);
  padding-inline-start: 22px;
  min-width: 240px;
}
.fc-calib-empty { font-size: 12px; align-self: center; }
.fc-calib-title { font-size: 11px; margin-bottom: 8px; letter-spacing: 0.04em; }
.fc-calib-rows { display: flex; flex-direction: column; gap: 5px; }
.fc-calib-row { display: flex; align-items: center; gap: 8px; }
.fc-calib-band {
  font-family: var(--font-display);
  font-size: 10px;
  color: var(--slate-3);
  width: 56px;
  flex-shrink: 0;
}
.fc-calib-bar {
  position: relative;
  flex: 1;
  height: 10px;
  background: var(--bg-0);
  border: 1px solid var(--slate-1);
  border-radius: 5px;
  overflow: visible;
}
.fc-calib-act {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  background: color-mix(in oklch, var(--teal) 35%, transparent);
  border-radius: 5px 0 0 5px;
}
.fc-calib-pred {
  position: absolute;
  inset-block: -2px;
  width: 2px;
  background: var(--gold);
  transform: translateX(-50%);
}
.fc-calib-n { font-size: 10px; width: 18px; text-align: center; flex-shrink: 0; }

.fc-add-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}
.fc-filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 18px;
}
.fc-case-select {
  background: var(--bg-0);
  border: 1px solid var(--slate-1);
  border-radius: 4px;
  color: var(--ivory);
  font-family: inherit;
  font-size: 13px;
  padding: 6px 10px;
}
.fc-case-select:focus { outline: none; border-color: var(--teal); }
.fc-card-case {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--gold);
  margin-bottom: 6px;
}
.fc-form {
  background: var(--bg-1);
  border: 1px solid var(--slate-1);
  border-radius: 5px;
  padding: 16px;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 620px;
}
.fc-input {
  background: var(--bg-0);
  border: 1px solid var(--slate-1);
  border-radius: 3px;
  padding: 9px 12px;
  color: var(--ivory);
  font-family: inherit;
  font-size: 14px;
}
.fc-input:focus { outline: none; border-color: var(--teal); }
.fc-form-row { display: flex; align-items: center; gap: 12px; }
.fc-range { flex: 1; accent-color: var(--teal); }
.fc-form-actions { display: flex; gap: 8px; }

.fc-list { display: flex; flex-direction: column; gap: 14px; }
.fc-empty {
  padding: 28px 20px;
  text-align: center;
  color: var(--slate-3);
  font-size: 13px;
  background: var(--bg-1);
  border: 1px dashed var(--slate-1);
  border-radius: 4px;
}

.fc-card {
  background: var(--bg-1);
  border: 1px solid var(--slate-1);
  border-inline-start: 3px solid var(--teal);
  border-radius: 5px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fc-card.is-resolved { opacity: 0.82; }
.fc-card.res-true  { border-inline-start-color: var(--teal); }
.fc-card.res-false { border-inline-start-color: var(--rose); }

.fc-card-main { display: flex; gap: 20px; align-items: flex-start; }
.fc-card-body { flex: 1; min-width: 0; }
.fc-card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ivory);
  margin: 0 0 5px;
  letter-spacing: -0.005em;
}
.fc-card-q { font-size: 12px; margin-bottom: 8px; }
.fc-card-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.fc-chip {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ivory-dim);
  background: var(--bg-0);
  border: 1px solid var(--slate-1);
  border-radius: 3px;
  padding: 2px 7px;
}
.fc-chip-wild { color: var(--rose); border-color: color-mix(in oklch, var(--rose) 40%, transparent); }
.fc-card-desc { font-size: 13px; color: var(--ivory-dim); line-height: 1.55; margin: 0; text-wrap: pretty; }

.fc-card-prob { text-align: center; flex-shrink: 0; width: 130px; }
.fc-prob-num {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 600;
  line-height: 1;
  color: var(--teal);
}
.fc-prob-pct { font-size: 18px; color: var(--ivory-dim); }
.fc-prob-move { font-size: 11px; margin-top: 4px; }
.fc-prob-move.up { color: var(--teal); }
.fc-prob-move.down { color: var(--rose); }
.fc-spark { margin-top: 8px; display: block; margin-inline: auto; }

.fc-outcome {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.03em;
  padding: 5px 12px;
  border-radius: 3px;
  align-self: flex-start;
}
.fc-outcome.is-true  { color: var(--teal); background: color-mix(in oklch, var(--teal) 12%, transparent); }
.fc-outcome.is-false { color: var(--rose); background: color-mix(in oklch, var(--rose) 12%, transparent); }
.fc-brier { font-size: 11px; color: var(--slate-3); }
.fc-card-outnote { font-size: 12px; line-height: 1.5; }

.fc-inds { border-top: 1px solid var(--slate-1); padding-top: 10px; }
.fc-inds-label { font-size: 11px; margin-bottom: 8px; letter-spacing: 0.03em; }
.fc-inds-list { display: flex; flex-direction: column; gap: 6px; }
.fc-ind {
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: start;
  background: var(--bg-0);
  border: 1px solid var(--slate-1);
  border-radius: 3px;
  padding: 7px 11px;
  color: var(--ivory-dim);
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color 120ms, color 120ms;
}
.fc-ind:hover:not(:disabled) { border-color: var(--slate-2); }
.fc-ind:disabled { cursor: default; opacity: 0.7; }
.fc-ind-mark {
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 1.5px solid var(--slate-2);
  flex-shrink: 0;
}
.fc-ind-fired { color: var(--ivory); border-color: color-mix(in oklch, var(--teal) 40%, var(--slate-1)); }
.fc-ind-fired .fc-ind-mark { background: var(--teal); border-color: var(--teal); }
.fc-ind-broke { color: var(--ivory); border-color: color-mix(in oklch, var(--rose) 40%, var(--slate-1)); }
.fc-ind-broke .fc-ind-mark { background: var(--rose); border-color: var(--rose); }

.fc-card-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 2px; }

.fc-ind-wrap { display: flex; flex-direction: column; gap: 2px; }
.fc-ind-ev {
  font-size: 11px;
  line-height: 1.45;
  padding: 0 11px 2px;
  color: var(--slate-3);
}

.fc-suggestion:empty { display: none; }
.fc-sug-loading { font-size: 12px; padding: 10px 0; }
.fc-sug {
  background: var(--bg-0);
  border: 1px solid color-mix(in oklch, var(--teal) 35%, var(--slate-1));
  border-radius: 5px;
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fc-sug-head {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--teal);
}
.fc-sug-anchor { font-size: 12.5px; color: var(--ivory-dim); line-height: 1.5; }
.fc-sug-rationale { font-size: 13px; color: var(--ivory); line-height: 1.55; text-wrap: pretty; }
.fc-sug-action { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--ivory-dim); padding-top: 4px; }

/* auto-captured market snapshot line on a forecast card */
.fc-card-snapshot {
  margin-top: 8px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--slate-3);
  border-top: 1px dashed var(--slate-1);
  padding-top: 7px;
}

/* auto-fired live tripwire banner */
.fc-tripwire-banner {
  margin: 0 0 20px;
  padding: 14px 16px 12px;
  background: linear-gradient(180deg, rgba(224,182,90,0.08), rgba(224,182,90,0.02));
  border: 1px solid color-mix(in oklab, var(--gold-bright) 40%, var(--slate-1));
  border-right: 3px solid var(--gold-bright);
  border-radius: 4px;
}
.fc-tripwire-head {
  font-weight: 600;
  font-size: 14px;
  color: var(--gold-bright);
  margin-bottom: 8px;
}
.fc-tripwire-list {
  margin: 0;
  padding: 0 18px 0 0;
  font-size: 13px;
  color: var(--ivory);
  line-height: 1.6;
}
.fc-tripwire-list li { margin-bottom: 3px; }
.fc-tripwire-foot { font-size: 11.5px; margin-top: 8px; line-height: 1.5; }
.fc-sug-moved { color: var(--gold); }
.fc-sug-err { font-size: 12px; padding: 8px 0; }
.fc-resolved-details summary {
  cursor: pointer;
  color: var(--slate-3);
  font-family: var(--font-display);
  letter-spacing: 0.06em;
  padding: 6px 0;
  list-style: none;
}
.fc-resolved-details summary::before { content: '▸ '; }
.fc-resolved-details[open] summary::before { content: '▾ '; }

/* "Track this scenario" button injected into the Futures Cone */
.scenario-track-btn {
  margin-top: 10px;
  width: 100%;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.05em;
}
.scenario-track-btn.is-tracked { color: var(--teal); border-color: color-mix(in oklch, var(--teal) 40%, transparent); }

/* ════════════════════════════════════════════════════════════
   HOUSE VIEW — the standing futures board
   ════════════════════════════════════════════════════════════ */

.hv-empty {
  text-align: center;
  padding: 64px 20px;
  background: var(--bg-1);
  border: 1px solid var(--slate-1);
  border-radius: 5px;
}

.hv-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}
@media (max-width: 760px) { .hv-summary { grid-template-columns: repeat(2, 1fr); } }
.hv-sum-stat {
  background: var(--bg-1);
  border: 1px solid var(--slate-1);
  border-radius: 5px;
  padding: 14px 16px;
  text-align: center;
}
.hv-sum-num { font-family: var(--font-display); font-size: 28px; font-weight: 600; line-height: 1; color: var(--ivory); }
.hv-sum-label { font-size: 11px; color: var(--slate-3); margin-top: 6px; }

.hv-board {
  display: flex;
  gap: 12px;
  background: var(--bg-1);
  border: 1px solid var(--slate-1);
  border-radius: 6px;
  padding: 18px 18px 18px 10px;
}
.hv-yaxis {
  position: relative;
  width: 38px;
  flex-shrink: 0;
}
.hv-yaxis span {
  position: absolute;
  inset-inline-end: 0;
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.05em;
  color: var(--slate-3);
  text-transform: uppercase;
}
.hv-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  flex: 1;
}
.hv-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.hv-col-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 9px;
  margin-bottom: 4px;
  border-bottom: 2px solid var(--col-color, var(--gold));
}
.hv-col-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--col-color, var(--gold)); flex-shrink: 0; }
.hv-col-he { font-size: 14px; font-weight: 600; color: var(--ivory); }
.hv-col-sub { font-size: 10px; }
.hv-col-count {
  margin-inline-start: auto;
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--col-color, var(--gold));
}
.hv-col-field {
  position: relative;
  height: 460px;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(25% - 1px),
    var(--slate-1) calc(25% - 1px),
    var(--slate-1) 25%
  );
  border-radius: 3px;
}
.hv-col-empty {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
}
.hv-chip {
  position: absolute;
  inset-inline: 2px;
  transform: translateY(-50%);
  background: var(--bg-0);
  border: 1px solid var(--slate-1);
  border-inline-start: 3px solid var(--chip-color, var(--gold));
  border-radius: 4px;
  padding: 6px 9px;
  text-align: start;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: border-color 120ms, transform 120ms;
  z-index: 1;
}
.hv-chip:hover { border-color: var(--chip-color, var(--gold)); z-index: 3; transform: translateY(-50%) scale(1.02); }
.hv-chip.is-wild { border-style: dashed; }
.hv-chip-prob { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--chip-color, var(--gold)); line-height: 1; }
.hv-chip-title {
  font-size: 11.5px;
  color: var(--ivory-dim);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hv-shifts { display: flex; flex-direction: column; gap: 6px; }
.hv-shift {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-1);
  border: 1px solid var(--slate-1);
  border-radius: 4px;
  padding: 9px 13px;
  cursor: pointer;
  transition: border-color 120ms;
}
.hv-shift:hover { border-color: var(--slate-2); }
.hv-shift-move {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  width: 52px;
  flex-shrink: 0;
}
.hv-shift-move.up { color: var(--teal); }
.hv-shift-move.down { color: var(--rose); }
.hv-shift-title { flex: 1; min-width: 0; font-size: 13.5px; color: var(--ivory); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-shift-now { font-size: 12px; flex-shrink: 0; }
.hv-foot { font-size: 12px; margin-top: 18px; text-align: center; }

/* ════════════════════════════════════════════════════════════
   DIVERGENCE — where credible sources split
   ════════════════════════════════════════════════════════════ */

.div-control {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  padding: 14px 0 18px;
  border-bottom: 1px solid var(--slate-1);
  margin-bottom: 22px;
}
.div-list { display: flex; flex-direction: column; gap: 14px; }

.div-card {
  background: var(--bg-1);
  border: 1px solid var(--slate-1);
  border-radius: 5px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.div-card.sev-5 { border-inline-start: 3px solid var(--rose); }
.div-card.sev-4 { border-inline-start: 3px solid var(--gold-bright, var(--gold)); }
.div-card.sev-3 { border-inline-start: 3px solid var(--gold); }
.div-card.sev-2, .div-card.sev-1 { border-inline-start: 3px solid var(--slate-2); }

.div-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.div-card-title { font-size: 16px; font-weight: 600; color: var(--ivory); margin: 0; line-height: 1.4; text-wrap: pretty; }
.div-sev { color: var(--rose); font-size: 9px; letter-spacing: 1px; flex-shrink: 0; margin-top: 4px; }

.div-poles {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: stretch;
}
@media (max-width: 680px) { .div-poles { grid-template-columns: 1fr; } .div-vs { transform: rotate(90deg); } }
.div-pole {
  background: var(--bg-0);
  border: 1px solid var(--slate-1);
  border-radius: 4px;
  padding: 11px 13px;
}
.div-pole-a { border-top: 2px solid var(--blue); }
.div-pole-b { border-top: 2px solid var(--gold); }
.div-pole-tag {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--slate-3);
  margin-bottom: 6px;
}
.div-pole-a .div-pole-tag { color: var(--blue); }
.div-pole-b .div-pole-tag { color: var(--gold); }
.div-pole-text { font-size: 13.5px; color: var(--ivory); line-height: 1.5; text-wrap: pretty; }
.div-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--rose);
  font-family: var(--font-display);
}

.div-fault {
  font-size: 13px;
  color: var(--ivory-dim);
  line-height: 1.55;
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid var(--slate-1);
  text-wrap: pretty;
}
.div-actions { display: flex; gap: 8px; }