/* Stock Market Crash Indicator page */

.ci-hero{
  position:relative; overflow:hidden; padding:56px 0 44px;
  background: var(--indigo-soft); border-bottom:1px solid var(--line);
}
.ci-orb{ position:absolute; border-radius:50%; filter:blur(100px); pointer-events:none; opacity:0.35; }
.ci-orb-1{ width:460px; height:460px; background:#8B7FFF; top:-200px; right:-140px; }
.ci-orb-2{ width:360px; height:360px; background:#FF8A75; bottom:-180px; left:-120px; }
.ci-hero .wrap{ position:relative; z-index:1; }
.ci-hero h1{
  font-family:'Instrument Sans', sans-serif; font-weight:600; font-size:clamp(34px, 5vw, 54px); line-height:1.03;
  letter-spacing:-0.01em; margin:16px 0 18px;
}
.ci-hero .lede{ font-size:16px; line-height:1.65; color: var(--ink-soft); max-width:760px; margin:0 0 26px; }
.ci-tally{
  display:inline-block; font-size:14.5px; font-weight:700; color: var(--ink);
  background: var(--white); border:1px solid var(--line); border-radius: var(--radius-sm);
  padding:14px 20px; box-shadow: var(--shadow-sm);
}
.ci-tally .n{ font-family:'Instrument Sans', sans-serif; font-weight:700; }
.ci-tally .n.warn{ color: var(--neg-text); }
.ci-tally .n.clear{ color: var(--pos-text); }

.ci-methodology{ padding:22px 0; border-bottom:1px solid var(--line); }
.ci-methodology-details summary{
  cursor:pointer; font-size:13.5px; font-weight:700; color: var(--ink-soft); list-style:none;
  display:flex; align-items:center; gap:8px;
}
.ci-methodology-details summary::-webkit-details-marker{ display:none; }
.ci-methodology-details summary::before{ content:"+"; font-size:16px; font-weight:800; color: var(--indigo-dark); flex:none; }
.ci-methodology-details[open] summary::before{ content:"\2212"; }
.ci-methodology-body{ margin-top:16px; font-size:13.5px; line-height:1.65; color: var(--ink-soft); max-width:820px; }
.ci-methodology-body ul{ margin:10px 0; padding-left:20px; }
.ci-methodology-body li{ margin-bottom:6px; }
.ci-methodology-body strong{ color: var(--ink); }

.ci-band{ padding:56px 0; }
.ci-band--alt{ background: var(--cream-2); }
.ci-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap:20px; }

.ci-card{
  background: var(--white); border:1px solid var(--line); border-radius: var(--radius-md);
  padding:22px; display:flex; flex-direction:column; gap:12px;
}
.ci-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.ci-card-title{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.ci-card-label{ font-size:13px; font-weight:700; color: var(--ink); }
.ci-card-proxy{
  font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color: var(--indigo-dark);
  background: var(--indigo-soft); border-radius:999px; padding:2px 7px;
  border:none; font-family:inherit; cursor:help; line-height:1.6;
}
.ci-card-proxy:hover, .ci-card-proxy:focus-visible{ background: var(--indigo); color:#fff; }
.ci-card-proxy .hover-tip-bubble{ text-transform:none; letter-spacing:normal; font-weight:400; }
.ci-card-info{
  width:16px; height:16px; border-radius:50%; background: var(--cream-2); color: var(--ink-soft);
  font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center;
  cursor:help; flex:none; border:none;
}
.ci-status{
  font-size:11px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px; white-space:nowrap; flex:none;
}
.ci-status--normal{ background: var(--mint-soft); color: var(--pos-text); }
.ci-status--elevated{ background: var(--gold-soft); color: var(--warn-text); }
.ci-status--warning{ background: rgba(255,138,117,0.16); color: var(--neg-text); }

.ci-card-value{ font-family:'Instrument Sans', sans-serif; font-size:32px; font-weight:600; color: var(--ink); font-variant-numeric: tabular-nums; line-height:1; }
.ci-card-value .unit{ font-size:16px; font-weight:500; color: var(--ink-soft); margin-left:2px; }
.ci-card-sub{ font-size:12.5px; color: var(--ink-soft); line-height:1.5; margin-top:-4px; }
.ci-card-sub .pos{ color: var(--pos-text); font-weight:700; }
.ci-card-sub .neg{ color: var(--neg-text); font-weight:700; }

.ci-sparkline-wrap{ position:relative; }
.ci-sparkline{ width:100%; height:44px; display:block; }
.ci-sparkline-line{ fill:none; stroke: var(--indigo); stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; }
.ci-sparkline-fill{ fill: var(--indigo); opacity:0.08; }
.ci-sparkline-threshold{ stroke: var(--neg-text); stroke-width:1; stroke-dasharray:3 3; opacity:0.7; }
.ci-sparkline-zone{ fill: var(--neg-text); opacity:0.06; }
/* Plain HTML, not SVG <text> - the SVG's viewBox scales non-uniformly to
   fit cards of different widths (preserveAspectRatio="none"), which would
   visibly stretch real glyphs. This sits on top of it instead, positioned
   by the same top:% the line itself is drawn at, so it always lines up. */
.ci-sparkline-threshold-label{
  position:absolute; right:2px; top:0; transform: translateY(-135%);
  font-size:11px; font-weight:700; color: var(--neg-text); opacity:0.85;
  background: var(--white); padding:0 3px; border-radius:3px; white-space:nowrap; line-height:1.6;
}
.ci-sparkline-range{ font-size:11px; color: var(--ink-soft); opacity:0.7; margin:2px 0 0; text-align:right; }

.ci-card-source{ font-size:11px; color: var(--ink-soft); line-height:1.5; padding-top:10px; border-top:1px solid var(--line); }
.ci-card-source a{ color: var(--indigo-dark); text-decoration:underline; }

/* ---------------- "Today, Tied Together" summary ---------------- */
.ci-summary-band{ padding:56px 0; background: var(--indigo-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.ci-summary-loading{ font-size:13px; color: var(--ink-soft); }

.ci-summary-dash{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap:14px;
  margin:20px 0 24px; max-width:820px;
}
.ci-summary-tile{
  background: var(--white); border-radius: var(--radius-sm); padding:16px 18px;
  display:flex; flex-direction:column; gap:4px; border-left:4px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.ci-summary-tile--warning{ border-left-color: var(--neg-text); }
.ci-summary-tile--elevated{ border-left-color: var(--warn-text); }
.ci-summary-tile--normal{ border-left-color: var(--pos-text); }
.ci-summary-tile-cat{ font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color: var(--ink-soft); }
.ci-summary-tile-status{ font-family:'Instrument Sans', sans-serif; font-size:20px; font-weight:600; color: var(--ink); }
.ci-summary-tile--warning .ci-summary-tile-status{ color: var(--neg-text); }
.ci-summary-tile--elevated .ci-summary-tile-status{ color: var(--warn-text); }
.ci-summary-tile--normal .ci-summary-tile-status{ color: var(--pos-text); }
.ci-summary-tile-count{ font-size:11.5px; color: var(--ink-soft); }

.ci-summary-narrative{ font-size:15px; line-height:1.7; color: var(--ink); max-width:760px; margin:0 0 16px; }
.ci-summary-footnote{ font-size:11.5px; color: var(--ink-soft); line-height:1.6; max-width:700px; }

@media (max-width: 560px){
  .ci-summary-dash{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
}

.ci-disclaimer{ padding:40px 0 60px; }
.ci-disclaimer p{ font-size:12px; color: var(--ink-soft); line-height:1.7; max-width:860px; }

@media (max-width: 620px){
  .ci-grid{ grid-template-columns:minmax(0,1fr); }
}

/* ---------------- Track record ---------------- */
.ci-track-lede{ font-size:15px; line-height:1.7; color: var(--ink); max-width:840px; margin:0 0 26px; }
.ci-track-lede strong{ font-weight:800; }
.ci-track-scroll{ position:relative; overflow-x:auto; border:1px solid var(--line); border-radius: var(--radius-md); background: var(--white); }
.ci-track-scroll:focus-visible{ outline:2px solid var(--indigo); outline-offset:2px; }
.ci-track-scroll::-webkit-scrollbar{ height:8px; }
.ci-track-scroll::-webkit-scrollbar-track{ background:transparent; }
.ci-track-scroll::-webkit-scrollbar-thumb{ background: rgba(139,127,255,0.45); border-radius:999px; }
.ci-track-scroll::-webkit-scrollbar-thumb:hover{ background: rgba(139,127,255,0.7); }
.ci-track{ border-collapse:separate; border-spacing:0; width:100%; min-width:1080px; font-size:13px; }
.ci-track th, .ci-track td{ padding:11px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
.ci-track tbody tr:last-child th, .ci-track tbody tr:last-child td{ border-bottom:0; }
.ci-track thead th{ position:sticky; top:0; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color: var(--ink-soft); background: var(--cream-2); text-align:center; white-space:nowrap; cursor:help; }
.ci-track thead .ci-tr-corner{ text-align:left; left:0; z-index:3; cursor:default; }
.ci-track thead th.ci-tr-sum{ white-space:normal; line-height:1.25; min-width:86px; }
.ci-tr-name{ position:sticky; left:0; z-index:2; text-align:left; font-weight:700; color: var(--ink); background: var(--white); min-width:270px; max-width:300px; }
.ci-tr-name small{ display:block; margin-top:2px; font-size:11.5px; font-weight:500; line-height:1.4; color: var(--ink-soft); }
.ci-tr-name .ci-tr-note{ font-style:italic; }
.ci-tr-kind{ display:inline-block; margin-top:5px; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color: var(--indigo-dark); background: var(--indigo-soft); border-radius:999px; padding:2px 8px; }
.ci-tr-group th{ position:static; text-align:left; background: var(--cream-2); font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-soft); padding:8px 10px; }
.ci-tr-cell{ text-align:center; width:48px; }
.ci-tr-hit > span:not(.ci-sr){ display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:26px; padding:0 4px; border-radius:8px; background: var(--indigo); color:#fff; font-weight:800; font-variant-numeric: tabular-nums; cursor:help; }
.ci-tr-miss > span:not(.ci-sr){ color: var(--ink-soft); opacity:.5; font-size:22px; line-height:1; cursor:help; }
.ci-tr-na > span:not(.ci-sr){ color: var(--ink-soft); opacity:.4; cursor:help; }
.ci-tr-sum{ text-align:center; white-space:nowrap; font-variant-numeric: tabular-nums; }
.ci-tr-sum b{ font-weight:800; color: var(--ink); }
.ci-tr-sum small{ display:block; font-size:11px; color: var(--ink-soft); }
.ci-sr{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.ci-track-legend{ margin:14px 2px 0; font-size:12px; color: var(--ink-soft); display:flex; flex-wrap:wrap; align-items:center; gap:6px 4px; }
.ci-tr-key{ display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:22px; border-radius:7px; font-weight:800; font-size:12px; }
.ci-tr-key--hit{ background: var(--indigo); color:#fff; }
.ci-tr-key--miss{ color: var(--ink-soft); font-size:20px; }
.ci-tr-key--na{ color: var(--ink-soft); }
.ci-track-today{ max-width:840px; margin:26px 0 0; padding:16px 20px; font-size:14.5px; line-height:1.7; color: var(--ink); background: var(--white); border:1px solid var(--line); border-left:4px solid var(--warn-text); border-radius: var(--radius-sm); }
.ci-track-today p{ margin:0 0 8px; }
.ci-track-today ul{ margin:0; padding-left:20px; }
.ci-track-today li{ margin-bottom:4px; }
.ci-track-notes{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:26px 44px; margin-top:30px; }
.ci-track-col h3{ font-size:15px; margin:0 0 10px; color: var(--ink); }
.ci-track-col ul{ margin:0; padding-left:18px; font-size:13px; line-height:1.65; color: var(--ink-soft); }
.ci-track-col li{ margin-bottom:6px; }
.ci-track-col strong{ color: var(--ink); }
.ci-track-col--wide{ grid-column:1 / -1; }
@supports not selector(::-webkit-scrollbar){
  .ci-track-scroll{ scrollbar-width: thin; scrollbar-color: rgba(139,127,255,0.5) transparent; }
}
@media (max-width: 760px){
  .ci-track-notes{ grid-template-columns: minmax(0,1fr); }
  .ci-tr-name{ min-width:200px; }
}

/* Phone pass (2026-10-17): the 16px info dot and the 19px "Proxy" tag keep their look; a larger invisible area around them takes the tap. */
@media (max-width: 720px){
  .ci-card-info::after, .ci-card-proxy::after{ content:""; position:absolute; inset:-14px; }
}

/* Minsky stage (js/minsky.js) */
.mk-verdict{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:14px; margin:0 0 20px; }
.mk-v{ display:flex; flex-direction:column; gap:4px; padding:18px 20px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--white); }
.mk-k{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
.mk-big{ font-family:'Instrument Sans', sans-serif; font-size:26px; font-weight:600; line-height:1.15; }
.mk-sub{ font-size:13px; line-height:1.5; color:var(--ink-soft); }
.mk-bad .mk-big{ color:var(--neg-text); } .mk-ok .mk-big{ color:var(--pos-text); }
.mk-chart{ display:block; width:100%; height:auto; max-width:760px; margin:0 0 8px; }
.mk-stage-text{ margin:0 0 24px; font-size:15px; color:var(--ink-soft); }
.mk-cols{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:22px; }
.mk-cols h3{ margin:0 0 10px; font-size:16px; font-weight:600; }
.mk-list{ margin:0; padding:0; list-style:none; }
.mk-row{ display:grid; grid-template-columns:14px 1fr auto auto; gap:10px; align-items:start; padding:10px 0; border-top:1px solid var(--line); font-size:14px; }
.mk-lbl small{ display:block; font-size:12px; color:var(--ink-soft); }
.mk-val{ color:var(--ink-soft); text-align:right; }
.mk-state{ min-width:56px; text-align:right; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); }
.mk-dot{ width:10px; height:10px; margin-top:5px; border-radius:50%; background:var(--ink-soft); opacity:.5; }
.mk-on .mk-dot{ background:var(--gold); opacity:1; } .mk-on .mk-state{ color:var(--gold); } .mk-off .mk-dot{ background:var(--mint); opacity:1; }
@media (max-width:720px){ .mk-row{ grid-template-columns:14px 1fr auto; } .mk-val{ grid-column:2 / 4; text-align:left; } }

/* ---- bubble comparison, country panels, growth chart (js/world-markets.js) */
.wm-lede{ font-size:15px; line-height:1.6; margin:0 0 14px; max-width:760px; }
.wm-chart{ display:block; width:100%; height:auto; max-width:760px; margin:0 0 8px; }
.wm-legend{ display:flex; flex-wrap:wrap; gap:6px 18px; font-size:13px; color:var(--ink-soft); margin:0 0 8px; }
.wm-legend i{ display:inline-block; width:14px; height:4px; border-radius:2px; margin-right:6px; vertical-align:middle; }
.wm-note{ font-size:12.5px; line-height:1.5; color:var(--ink-soft); margin:0 0 18px; max-width:760px; }
.snapshot-table th small{ display:block; font-weight:400; font-size:12px; color:var(--ink-soft); }
.wm-pill{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap; background:rgba(255,255,255,0.08); }
.wm-pill.wm-above-both{ background:rgba(255,138,117,0.18); color:#FF8A75; }
.wm-pill.wm-below-both{ background:rgba(47,214,120,0.15); color:#2fd678; }
.wm-pill.wm-between{ background:rgba(255,194,87,0.16); color:#FFC257; }
.wm-countries{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:16px; }
.wm-country{ padding:18px 20px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--white); }
.wm-country.wm-w2{ border-color:rgba(255,138,117,0.55); }
.wm-country.wm-w1{ border-color:rgba(255,194,87,0.45); }
.wm-country header{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.wm-country h3{ margin:0; font-size:18px; }
.wm-count{ font-size:12.5px; color:var(--ink-soft); }
.wm-metrics{ list-style:none; margin:0 0 12px; padding:0; }
.wm-metrics li{ display:grid; grid-template-columns:12px 1fr auto auto; gap:8px; align-items:center; padding:7px 0; border-top:1px solid var(--line); font-size:13.5px; }
.wm-metrics li:first-child{ border-top:0; }
.wm-dot{ width:10px; height:10px; border-radius:50%; background:#2fd678; }
.wm-s-elev .wm-dot{ background:#FFC257; }
.wm-s-warn .wm-dot{ background:#FF8A75; }
.wm-s-na .wm-dot{ background:var(--ink-soft); }
.wm-mv{ font-weight:700; text-align:right; }
.wm-ms{ min-width:62px; text-align:right; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); }
.wm-watch,.wm-src{ font-size:13px; line-height:1.5; color:var(--ink-soft); margin:0 0 6px; }
.wm-toggle{ display:inline-flex; margin:0 0 14px; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.wm-toggle button{ min-height:44px; min-width:84px; padding:0 20px; border:0; background:transparent; color:var(--ink); font:inherit; font-weight:700; cursor:pointer; }
.wm-toggle button[aria-pressed="true"]{ background:#8B7FFF; color:#fff; }
@media (max-width:560px){ .wm-metrics li{ grid-template-columns:12px 1fr auto; } .wm-ms{ display:none; } }
.wm-country h3{ display:flex; align-items:center; gap:10px; }
.wm-flag{ flex:none; width:30px; height:20px; border-radius:3px; box-shadow:0 0 0 1px rgba(255,255,255,0.18); }
