/* ============================================
Iran War Dashboard v2 — dashboard.css
============================================ */
/* --- CSS Variables --- */
:root{
--bg:#07111f; --bg2:#0e1a2e; --panel:#0f1c31; --panel2:#15253f; --border:#29415f;
--text:#eef5fc; --muted:#9eb5d0; --soft:#7f97b1; --gold:#ffd166; --blue:#63b3ff;
--cyan:#46d7b0; --orange:#ff9f43; --red:#ff6b6b; --purple:#b084ff;
}
/* --- Base --- */
*{box-sizing:border-box}
html{background-color:var(--bg2)}
body{
margin:0; color:var(--text);
font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
background:
radial-gradient(circle at top right, rgba(99,179,255,.16), transparent 24%),
radial-gradient(circle at top left, rgba(255,209,102,.10), transparent 22%),
linear-gradient(180deg,var(--bg) 0%,var(--bg2) 400px) no-repeat,
var(--bg2);
min-height:100vh;
position:relative;
}
body::before{
content:'';
position:fixed; inset:0;
pointer-events:none; z-index:0;
background-image:
linear-gradient(rgba(158,181,208,.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(158,181,208,.035) 1px, transparent 1px),
url("data:image/svg+xml;utf8,");
background-size: 80px 80px, 80px 80px, 160px 160px;
mix-blend-mode: screen;
}
.topbar, .shell{ position:relative; z-index:1; }
html[dir="rtl"] body{font-family:"Vazirmatn",Tahoma,"Segoe UI",system-ui,sans-serif}
/* --- Topbar (restyled to editorial palette) --- */
.topbar{
position:sticky;top:0;z-index:5;
backdrop-filter:blur(16px);
background: rgba(11,19,34,.94);
border-bottom: 1px solid rgba(217,119,87,.28);
margin-bottom: 18px;
font-family: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
}
.topbar .title h1 {
color: #ecdfd0;
font-family: inherit;
font-weight: 600;
font-size: 18px;
letter-spacing: .2px;
}
.topbar .title p {
color: #786d62;
font-family: Inter, system-ui, sans-serif;
font-size: 11px;
margin-top: 4px;
letter-spacing: .2px;
}
.topbar .chip {
font-family: Inter, system-ui, sans-serif;
background: transparent;
border: 1px solid rgba(236,223,208,.16);
color: #a09486;
font-size: 11px;
padding: 7px 12px;
letter-spacing: .3px;
}
.topbar .chip strong { color: #ecdfd0; font-weight: 600; }
.topbar .lang-btn {
font-family: Inter, system-ui, sans-serif;
border-color: rgba(217,119,87,.5);
background: rgba(217,119,87,.08);
color: #d97757;
font-size: 11px;
padding: 6px 14px;
}
.topbar .lang-btn:hover { background: rgba(217,119,87,.16); }
.topbar .nav-toggle {
font-family: Inter, system-ui, sans-serif;
background: transparent;
border-color: rgba(236,223,208,.16);
color: #a09486;
font-size: 11px;
}
.topbar .nav-toggle:hover { color: #d97757; border-color: #d97757; }
.topbar .mode-toggle {
border-color: rgba(236,223,208,.16);
background: transparent;
}
.topbar .mode-btn {
font-family: Inter, system-ui, sans-serif;
color: #786d62;
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
}
.topbar .mode-btn:hover { color: #ecdfd0; }
.topbar .mode-btn.active {
background: rgba(217,119,87,.12);
color: #d97757;
}
.topbar .section-nav {
background: rgba(11,19,34,.96);
border: 1px solid rgba(217,119,87,.28);
font-family: Inter, system-ui, sans-serif;
}
.topbar .section-nav a:hover {
color: #d97757;
background: rgba(217,119,87,.08);
}
.topbar .section-nav a:hover .nav-num { color: #d97757; }
.topbar .section-nav .nav-group {
color: #d97757;
}
.topbar-inner,.shell{max-width:1520px;margin:0 auto;padding-left:18px;padding-right:18px}
.topbar-inner{padding-top:14px;padding-bottom:14px;display:flex;gap:16px;justify-content:space-between;align-items:center;flex-wrap:wrap;min-width:0}
.topbar-inner .chips{flex-wrap:wrap;min-width:0}
.title h1{margin:0;font-size:22px;letter-spacing:.2px;display:flex;align-items:center;gap:10px}
.title-mark{flex-shrink:0;filter:drop-shadow(0 0 6px rgba(255,209,102,.35))}
@media (prefers-reduced-motion: reduce){
.title-mark animateTransform{ display:none; }
}
.title p{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.45;max-width:960px}
.chips{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.chip{border:1px solid var(--border);border-radius:12px;padding:10px 14px;background:linear-gradient(180deg,#182947,#101b31);font-size:13px}
.chip strong{color:#fff}
.lang-btn{border:1px solid var(--gold);border-radius:12px;padding:8px 16px;background:rgba(255,209,102,.08);color:var(--gold);font-size:13px;font-weight:700;cursor:pointer;transition:all .15s;letter-spacing:.3px}
.lang-btn:hover{background:rgba(255,209,102,.18)}
/* --- Shell / Grid Layout --- */
.shell{padding-top:18px;padding-bottom:28px}
.grid{display:grid;gap:16px}
.hero{grid-template-columns:1.22fr .78fr}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* --- Panel --- */
.panel{position:relative;border:1px solid rgba(60,85,120,.5);border-radius:22px;padding:18px;background:linear-gradient(180deg,rgba(15,28,49,.98),rgba(21,37,63,.96));box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 20px 60px rgba(0,0,0,.3)}
.panel::before{
content:'';
position:absolute; left:18px; right:18px; top:0; height:2px;
border-radius:0 0 2px 2px;
background: var(--mode-accent, transparent);
opacity:.55;
transition: background .25s ease;
}
body.war-mode{ --mode-accent: var(--gold); }
body.ceasefire-mode{ --mode-accent: var(--cyan); }
.panel h2,.panel h3{margin:0 0 8px}
.sub{color:var(--muted);font-size:13px;line-height:1.45;margin-bottom:12px}
.kicker{color:var(--gold);font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.85px;margin-bottom:8px}
.theory{background:rgba(255,209,102,.06);border-left:4px solid var(--gold);border-radius:0 16px 16px 0;padding:14px 16px;line-height:1.6;font-size:14px}
html[dir="rtl"] .theory{border-left:none;border-right:4px solid var(--gold);border-radius:16px 0 0 16px}
/* --- Metric Grid --- */
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px}
.metric{border:1px solid var(--border);border-radius:18px;padding:14px;background:rgba(255,255,255,.028)}
.metric .label{font-size:12px;color:var(--muted);margin-bottom:6px}
.metric .value{font-size:28px;font-weight:800;line-height:1.05}
.metric .desc{font-size:12px;color:var(--soft);margin-top:6px;line-height:1.4}
/* --- List, Footnote, Chart-box --- */
.list{margin:0;padding-left:18px}
html[dir="rtl"] .list{padding-left:0;padding-right:18px}
.list li{margin-bottom:10px;line-height:1.5}
.footnote{margin-top:10px;color:var(--soft);font-size:12px;line-height:1.45}
.chart-box{position:relative;height:340px}
.chart-box.tall{height:400px}
.chart-box.short{height:300px}
/* --- Table --- */
.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:16px}
table{width:100%;border-collapse:collapse;min-width:1220px}
th,td{padding:12px 10px;border-bottom:1px solid var(--border);text-align:left;font-size:13px;vertical-align:top}
html[dir="rtl"] th,html[dir="rtl"] td{text-align:right}
th{position:sticky;top:0;background:rgba(255,255,255,.03);color:var(--muted)}
/* --- Pill, Tag, Scenario --- */
.pill{display:inline-block;border:1px solid var(--border);border-radius:999px;padding:4px 9px;font-size:11px;font-weight:800;background:rgba(255,255,255,.03)}
.missile{color:var(--red)} .drone{color:var(--orange)}
.tag{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:11px;font-weight:800;border:1px solid transparent}
.fresh-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.55}
.fresh-dot.live{animation:pulse-dot 1.5s ease-in-out infinite;box-shadow:0 0 6px currentColor;opacity:1}
@media (prefers-reduced-motion: reduce){
.fresh-dot.live{ animation:none; }
}
.good{background:rgba(70,215,176,.14);color:var(--cyan);border-color:rgba(70,215,176,.34)}
.warn{background:rgba(255,209,102,.14);color:var(--gold);border-color:rgba(255,209,102,.34)}
.bad{background:rgba(255,107,107,.14);color:var(--red);border-color:rgba(255,107,107,.34)}
.scenario{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;padding:12px;border:1px solid var(--border);border-radius:16px;margin-bottom:10px;background:rgba(255,255,255,.02)}
.scenario strong{display:block;margin-bottom:4px}
.scenario .prob{font-size:22px;font-weight:900;color:var(--gold);white-space:nowrap}
/* --- Route Card --- */
.route-card{border:1px solid var(--border);border-radius:14px;padding:14px;margin-bottom:10px;background:rgba(255,255,255,.02)}
.route-card:last-child{margin-bottom:0}
.route-header{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:8px}
.route-name{font-weight:700;font-size:13px}
.route-status{font-size:11px;font-weight:800;padding:4px 10px;border-radius:999px;white-space:nowrap}
.route-status.red{background:rgba(255,107,107,.14);color:var(--red)}
.route-status.yellow{background:rgba(255,209,102,.14);color:var(--gold)}
.route-status.green{background:rgba(70,215,176,.14);color:var(--cyan)}
.route-detail{font-size:12px;color:var(--soft);line-height:1.55;margin-bottom:8px}
.route-meta{display:flex;gap:16px;font-size:11px;color:var(--muted)}
.route-meta strong{color:var(--text)}
/* --- Business Section --- */
.biz-section{margin-top:14px}
.biz-section h4{margin:0 0 8px;font-size:12px;color:var(--muted);letter-spacing:.6px;text-transform:uppercase;font-weight:800}
code{background:rgba(255,255,255,.06);padding:2px 6px;border-radius:6px}
/* --- Casualty rows --- */
.casualty-row{border:1px solid var(--border);border-radius:14px;padding:12px;margin-bottom:8px;background:rgba(255,255,255,.02)}
.cas-group{font-weight:700;font-size:13px;margin-bottom:2px}
.cas-figure{font-size:18px;font-weight:800;margin:4px 0}
.cas-detail{font-size:12px;color:var(--soft);line-height:1.45}
/* --- Loading --- */
.loading-msg{text-align:center;padding:60px 20px;color:var(--muted);font-size:14px}
/* ============================================
NEW STYLES — Predictive Framework & Expanded Sections
============================================ */
/* --- Prediction Hero Section --- */
.prediction-hero {
position: relative;
background:
linear-gradient(180deg, rgba(255,255,255,.04), transparent 18%),
linear-gradient(135deg, rgba(255,209,102,.13), rgba(99,179,255,.10));
border: 1px solid var(--gold);
border-radius: 26px;
padding: 32px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.08),
0 30px 80px rgba(0,0,0,.35);
}
.prediction-hero::before{
content:'';
position:absolute; inset:0;
border-radius: inherit; pointer-events:none;
background: radial-gradient(circle at 12% -10%, rgba(255,209,102,.18), transparent 38%);
}
.prediction-hero > *{ position:relative; }
.outcome-forecast {
background: rgba(255,209,102,.06);
border-left: 4px solid var(--gold);
border-radius: 0 16px 16px 0;
padding: 18px 20px;
line-height: 1.65;
font-size: 15px;
margin-bottom: 16px;
}
html[dir="rtl"] .outcome-forecast {
border-left: none;
border-right: 4px solid var(--gold);
border-radius: 16px 0 0 16px;
}
.prob-display {
margin: 16px 0;
}
.prob-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 8px;
}
.prob-label {
font-size: 13px;
color: var(--muted);
font-weight: 600;
text-transform: uppercase;
letter-spacing: .4px;
}
.prob-pct {
font-size: 36px;
font-weight: 900;
color: var(--gold);
line-height: 1;
}
.prob-track {
width: 100%;
height: 10px;
background: rgba(255,255,255,.06);
border-radius: 99px;
overflow: hidden;
margin-bottom: 8px;
}
.prob-bar {
position: relative;
height: 100%;
border-radius: 99px;
transition: width .6s ease, background .4s ease;
min-width: 2%;
overflow: hidden;
}
.prob-bar::after{
content:'';
position:absolute; inset:0;
background: linear-gradient(90deg,
transparent 0%,
rgba(255,255,255,.18) 45%,
rgba(255,255,255,.32) 50%,
rgba(255,255,255,.18) 55%,
transparent 100%);
transform: translateX(-100%);
animation: prob-shimmer 2.6s ease-in-out infinite;
}
@keyframes prob-shimmer {
0% { transform: translateX(-100%); }
60% { transform: translateX(100%); }
100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce){
.prob-bar::after{ animation:none; opacity:0; }
}
.prob-meta {
font-size: 12px;
color: var(--soft);
}
/* --- Decision Engine --- */
.cond-row {
margin-bottom: 10px;
}
.cond-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 2px;
}
.cond-label {
font-size: 13px;
color: var(--text);
}
.cond-pct {
font-size: 18px;
font-weight: 900;
}
.cond-formula {
margin-top: 12px;
padding: 8px 12px;
background: rgba(255,255,255,.03);
border-radius: 8px;
font-size: 12px;
color: var(--muted);
font-family: monospace;
}
.outcome-row {
margin-bottom: 4px;
padding: 4px 8px;
border-radius: 8px;
border: 1px solid transparent;
transition: background .2s, border-color .2s;
}
.outcome-row.leading {
background: linear-gradient(90deg, rgba(255,209,102,.10), rgba(255,209,102,.02));
border-color: rgba(255,209,102,.35);
}
.outcome-header {
display: flex;
justify-content: space-between;
font-size: 12px;
color: var(--text);
}
.outcome-row.leading .outcome-header span::before {
content: '\25B8 ';
color: var(--gold);
font-weight: 900;
}
.sens-row {
padding: 4px 8px;
border-radius: 8px;
border: 1px solid transparent;
}
.sens-row.leading {
background: linear-gradient(90deg, rgba(70,215,176,.08), rgba(70,215,176,.02));
border-color: rgba(70,215,176,.32);
}
.cal-row {
display: flex;
justify-content: space-between;
padding: 4px 0;
font-size: 12px;
color: var(--muted);
border-bottom: 1px solid rgba(255,255,255,.04);
}
.cal-row:last-child { border-bottom: none; }
.cal-ensemble {
margin-top: 4px;
padding-top: 6px;
border-top: 1px solid var(--border);
font-size: 13px;
}
.cal-label { color: var(--soft); }
/* --- Model Comparison Cards --- */
.model-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-top: 16px;
}
.model-card {
border: 1px solid var(--border);
border-radius: 18px;
padding: 16px;
background: rgba(255,255,255,.02);
}
.model-card.leading {
border-color: var(--gold);
background: rgba(255,209,102,.04);
}
.model-card h4 {
margin: 0 0 6px;
font-size: 14px;
}
.model-card .confidence {
font-size: 28px;
font-weight: 900;
margin: 8px 0;
}
.model-card .confidence.high { color: var(--cyan); }
.model-card .confidence.medium { color: var(--gold); }
.model-card .confidence.low { color: var(--red); }
.model-card .detail {
font-size: 12px;
color: var(--soft);
line-height: 1.5;
}
.model-card .falsify {
margin-top: 10px;
font-size: 11px;
color: var(--muted);
font-style: italic;
}
/* --- Vector Mini-Cards --- */
.vector-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
margin-top: 14px;
}
.vector-card {
border: 1px solid var(--border);
border-radius: 14px;
padding: 12px;
background: rgba(255,255,255,.02);
}
.vector-card .vec-label {
font-size: 11px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .5px;
margin-bottom: 6px;
}
.vector-card .vec-score {
font-size: 24px;
font-weight: 900;
line-height: 1;
}
.vector-card .vec-note {
font-size: 11px;
color: var(--soft);
margin-top: 6px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* --- Supply Chain Timeline --- */
.timeline-vertical {
position: relative;
padding-left: 24px;
margin: 12px 0;
}
html[dir="rtl"] .timeline-vertical {
padding-left: 0;
padding-right: 24px;
}
.timeline-vertical::before {
content: '';
position: absolute;
left: 8px;
top: 0;
bottom: 0;
width: 2px;
background: var(--border);
}
html[dir="rtl"] .timeline-vertical::before {
left: auto;
right: 8px;
}
.tl-item {
position: relative;
margin-bottom: 16px;
padding: 12px;
border: 1px solid var(--border);
border-radius: 12px;
background: rgba(255,255,255,.02);
}
.tl-item::before {
content: '';
position: absolute;
left: -20px;
top: 16px;
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid var(--border);
background: var(--bg);
}
html[dir="rtl"] .tl-item::before {
left: auto;
right: -20px;
}
.tl-item.blocked::before { border-color: var(--red); background: rgba(255,107,107,.3); }
.tl-item.exploring::before { border-color: var(--gold); background: rgba(255,209,102,.3); }
.tl-item.partial::before { border-color: var(--cyan); background: rgba(70,215,176,.3); }
.tl-item .tl-milestone { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.tl-item .tl-estimate { font-size: 12px; color: var(--gold); font-weight: 600; }
.tl-item .tl-detail { font-size: 12px; color: var(--soft); margin-top: 6px; line-height: 1.45; }
/* --- Hub Matrix Table --- */
.hub-matrix {
width: 100%;
border-collapse: collapse;
font-size: 12px;
min-width: auto;
}
.hub-matrix th {
background: rgba(255,255,255,.03);
color: var(--muted);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .4px;
padding: 10px 8px;
}
.hub-matrix td {
padding: 10px 8px;
border-bottom: 1px solid var(--border);
}
.hub-matrix .score-cell {
font-weight: 800;
text-align: center;
}
.score-high { color: var(--cyan); }
.score-mid { color: var(--gold); }
.score-low { color: var(--red); }
/* --- Gauge / Risk Score --- */
.risk-gauge {
display: flex;
align-items: center;
gap: 16px;
padding: 14px;
border: 1px solid var(--border);
border-radius: 16px;
background: rgba(255,255,255,.02);
margin-bottom: 12px;
}
.risk-gauge .gauge-score {
font-size: 36px;
font-weight: 900;
min-width: 60px;
text-align: center;
}
.risk-gauge .gauge-trend {
font-size: 18px;
margin-left: 4px;
}
.risk-gauge .gauge-detail {
font-size: 12px;
color: var(--soft);
line-height: 1.5;
flex: 1;
}
/* --- OFAC / Status Card --- */
.status-card {
border: 1px solid var(--border);
border-radius: 16px;
padding: 14px;
background: rgba(255,255,255,.02);
margin-bottom: 12px;
}
.status-card .sc-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.status-card .sc-title {
font-weight: 700;
font-size: 13px;
}
.status-card .sc-detail {
font-size: 12px;
color: var(--soft);
line-height: 1.5;
}
/* --- Section Nav (topbar dropdown) --- */
.nav-wrap {
position: relative;
display: inline-block;
}
.nav-toggle {
border: 1px solid var(--border);
border-radius: 12px;
padding: 8px 14px;
background: linear-gradient(180deg,#182947,#101b31);
color: var(--muted);
font-size: 12px;
font-weight: 700;
cursor: pointer;
letter-spacing: .3px;
transition: all .15s;
}
.nav-toggle:hover { color: var(--gold); border-color: var(--gold); }
.section-nav {
display: none;
position: absolute;
top: 100%;
right: 0;
margin-top: 6px;
z-index: 10;
background: rgba(14,26,46,.96);
backdrop-filter: blur(16px);
border: 1px solid var(--border);
border-radius: 14px;
padding: 8px 0;
width: 240px;
max-height: 70vh;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--border) transparent;
box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
html[dir="rtl"] .section-nav { right: auto; left: 0; }
.section-nav.open { display: block; }
.section-nav a {
display: flex;
align-items: baseline;
gap: 10px;
padding: 6px 16px;
font-size: 12px;
color: var(--muted);
text-decoration: none;
line-height: 1.4;
transition: all .12s;
}
.section-nav a .nav-num {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 10px;
font-weight: 700;
color: var(--soft);
letter-spacing: .5px;
flex-shrink: 0;
width: 18px;
}
.section-nav a:hover {
color: var(--gold);
background: rgba(255,209,102,.08);
}
.section-nav a:hover .nav-num { color: var(--gold); }
.section-nav .nav-group {
padding: 6px 16px 2px;
font-size: 10px;
font-weight: 800;
color: var(--gold);
text-transform: uppercase;
letter-spacing: .6px;
margin-top: 4px;
}
.section-nav .nav-group:first-child { margin-top: 0; }
/* --- Event Log Table — click a row to expand full narrative --- */
.table-wrap td {
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: default;
transition: background .15s ease;
}
.table-wrap tbody tr { cursor: pointer; }
.table-wrap tbody tr:hover td { background: rgba(255,209,102,.03); }
.table-wrap tbody tr.expanded td {
white-space: normal;
max-width: 620px;
line-height: 1.55;
padding: 14px 10px;
background: rgba(255,209,102,.04);
}
.table-wrap td:first-child {
white-space: nowrap;
max-width: none;
font-weight: 700;
}
.table-wrap td:nth-child(2),
.table-wrap td:nth-child(3) {
white-space: nowrap;
max-width: none;
text-align: center;
}
/* --- RTL fixes for new sections --- */
html[dir="rtl"] .route-header { flex-direction: row-reverse; }
html[dir="rtl"] .route-meta { flex-direction: row-reverse; }
html[dir="rtl"] .risk-gauge { flex-direction: row-reverse; }
html[dir="rtl"] .risk-gauge .gauge-trend { margin-left: 0; margin-right: 4px; }
html[dir="rtl"] .sc-header { flex-direction: row-reverse; }
html[dir="rtl"] .scenario { flex-direction: row-reverse; }
html[dir="rtl"] .convergence-badge { flex-direction: row-reverse; }
html[dir="rtl"] .model-cards { direction: rtl; }
html[dir="rtl"] .vector-grid { direction: rtl; }
html[dir="rtl"] .metric-grid { direction: rtl; }
html[dir="rtl"] .chips { flex-direction: row-reverse; }
/* --- Scenario Simulator --- */
.sim-buttons {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.sim-btn {
border: 1px solid var(--border);
border-radius: 10px;
padding: 8px 14px;
background: rgba(255,255,255,.03);
color: var(--muted);
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: all .15s;
}
.sim-btn:hover { border-color: var(--gold); color: var(--gold); }
.sim-btn.active { border-color: var(--gold); background: rgba(255,209,102,.12); color: var(--gold); }
.sim-result {
border: 1px solid var(--border);
border-radius: 14px;
padding: 16px;
background: rgba(255,255,255,.02);
}
.sim-result .sim-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 0;
border-bottom: 1px solid rgba(255,255,255,.04);
}
.sim-result .sim-row:last-child { border-bottom: none; }
.sim-result .sim-label { font-size: 12px; color: var(--muted); }
.sim-result .sim-value { font-size: 16px; font-weight: 800; }
.sim-result .sim-delta { font-size: 12px; margin-left: 6px; }
.sim-delta.up { color: var(--cyan); }
.sim-delta.down { color: var(--red); }
.sim-desc { font-size: 12px; color: var(--soft); margin-top: 10px; line-height: 1.5; }
/* --- Escalation Ladder --- */
.esc-ladder {
display: flex;
flex-direction: column;
gap: 0;
}
.esc-rung {
display: flex;
align-items: stretch;
gap: 12px;
min-height: 48px;
}
.esc-line {
display: flex;
flex-direction: column;
align-items: center;
width: 20px;
flex-shrink: 0;
}
.esc-dot {
width: 14px;
height: 14px;
border-radius: 50%;
border: 2px solid var(--border);
flex-shrink: 0;
margin-top: 4px;
}
.esc-connector {
width: 2px;
flex: 1;
background: var(--border);
min-height: 12px;
}
.esc-rung.crossed .esc-dot { border-color: var(--red); background: var(--red); }
.esc-rung.crossed .esc-connector { background: var(--red); }
.esc-rung.imminent .esc-dot { border-color: var(--gold); background: var(--gold); animation: pulse-dot 1.5s ease-in-out infinite; }
.esc-rung.imminent .esc-connector { background: var(--gold); }
.esc-rung.threatened .esc-dot { border-color: var(--gold); background: transparent; }
.esc-rung.preparing .esc-dot { border-color: var(--orange); background: transparent; }
.esc-rung.not_crossed .esc-dot { border-color: var(--muted); background: transparent; }
.esc-content {
flex: 1;
padding-bottom: 12px;
}
.esc-title {
font-weight: 700;
font-size: 13px;
margin-bottom: 2px;
}
.esc-rung.crossed .esc-title { color: var(--text); }
.esc-rung.imminent .esc-title { color: var(--gold); }
.esc-rung.threatened .esc-title, .esc-rung.preparing .esc-title { color: var(--muted); }
.esc-rung.not_crossed .esc-title { color: var(--soft); }
.esc-meta {
font-size: 11px;
color: var(--soft);
line-height: 1.4;
}
.esc-date {
display: inline-block;
font-size: 10px;
font-weight: 700;
color: var(--muted);
margin-right: 6px;
}
.esc-status-tag {
display: inline-block;
font-size: 9px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .5px;
padding: 2px 6px;
border-radius: 4px;
margin-left: 6px;
}
.esc-rung.crossed .esc-status-tag { background: rgba(255,107,107,.15); color: var(--red); }
.esc-rung.imminent .esc-status-tag { background: rgba(255,209,102,.15); color: var(--gold); }
.esc-rung.threatened .esc-status-tag { background: rgba(255,159,67,.12); color: var(--orange); }
.esc-rung.preparing .esc-status-tag { background: rgba(99,179,255,.12); color: var(--blue); }
/* --- Timeline Scrubber --- */
.scrubber-wrap {
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px 24px;
background: rgba(255,209,102,.06);
border: 1px solid var(--gold);
border-radius: 14px;
margin-bottom: 16px;
}
.scrubber-tick {
position: absolute;
bottom: 4px;
pointer-events: none;
transform: translateX(-50%);
font-size: 9px;
font-weight: 700;
color: var(--muted);
letter-spacing: .4px;
text-transform: uppercase;
white-space: nowrap;
}
.scrubber-tick::before {
content: "";
position: absolute;
top: -12px;
left: 50%;
width: 2px;
height: 8px;
background: currentColor;
transform: translateX(-50%);
opacity: .6;
}
.scrubber-tick.war-start { color: var(--red); }
.scrubber-tick.ceasefire-start { color: var(--cyan); }
.scrubber-tick.expiry { color: var(--gold); }
.scrubber-tick.today { color: var(--text); font-weight: 800; }
.scrubber-label {
font-size: 12px;
color: var(--muted);
white-space: nowrap;
}
.scrubber-label strong { color: var(--gold); font-size: 14px; }
.scrubber-slider {
flex: 1;
-webkit-appearance: none;
height: 6px;
background: var(--border);
border-radius: 3px;
outline: none;
}
.scrubber-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--gold);
cursor: pointer;
border: 2px solid var(--bg);
}
.scrubber-reset {
border: 1px solid var(--gold);
border-radius: 8px;
padding: 4px 12px;
background: rgba(255,209,102,.12);
color: var(--gold);
font-size: 11px;
font-weight: 700;
cursor: pointer;
}
/* --- Change Banner --- */
.change-banner {
background: rgba(255,209,102,.08);
border: 1px solid var(--gold);
border-radius: 12px;
padding: 10px 16px;
margin-bottom: 16px;
font-size: 13px;
color: var(--text);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
}
.change-dot {
display: inline-block;
width: 8px;
height: 8px;
background: var(--gold);
border-radius: 50%;
margin-right: 8px;
animation: pulse-dot 1.5s ease-in-out infinite;
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
/* ============================================
AUDIT-DRIVEN HONESTY BANNERS (R1, R2, R4)
============================================ */
.experimental-banner,
.staleness-banner,
.override-banner {
max-width: 1480px;
margin: 0 auto 16px auto;
padding: 12px 20px;
font-family: -apple-system, 'SF Pro Text', 'Inter', system-ui, sans-serif;
font-size: 13px;
line-height: 1.5;
border-radius: 4px;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 12px;
}
.experimental-banner {
background: rgba(217, 119, 87, 0.13); /* rust tint */
color: #f3dcc9;
border: 1px solid rgba(217, 119, 87, 0.35);
}
.experimental-banner strong {
font-weight: 700;
letter-spacing: 0.06em;
font-size: 11px;
color: #f7b894;
}
.experimental-banner em {
font-style: italic;
color: #f7b894;
}
.experimental-banner a {
color: #f7b894;
text-decoration: underline;
}
.staleness-banner {
background: rgba(212, 175, 55, 0.12); /* amber */
color: #f3e3a8;
border: 1px solid rgba(212, 175, 55, 0.35);
}
.staleness-banner strong { letter-spacing: 0.06em; font-size: 11px; }
.override-banner {
background: rgba(180, 70, 70, 0.13); /* red tint */
color: #f3cccc;
border: 1px solid rgba(180, 70, 70, 0.35);
}
.override-banner strong { letter-spacing: 0.06em; font-size: 11px; color: #ffb4b4; }
.override-banner code {
font-family: ui-monospace, 'SF Mono', 'Menlo', monospace;
font-size: 12px;
background: rgba(0,0,0,0.25);
padding: 1px 5px;
border-radius: 3px;
}
@media print {
.experimental-banner,
.staleness-banner,
.override-banner {
border: 1px solid #999;
color: #333;
background: #fff;
}
}
/* Disclaimer styling for the alpha-scenarios annex (R3) */
.not-advice {
font-size: 11px;
color: #d97757;
font-weight: 600;
letter-spacing: 0.04em;
margin-left: 6px;
}
.deeper-disclaimer {
font-size: 12px;
color: #a09486;
font-style: italic;
margin: 8px 0 14px 0;
padding: 8px 12px;
border-left: 2px solid rgba(217, 119, 87, 0.4);
background: rgba(217, 119, 87, 0.05);
}
.deeper-disclaimer strong { color: #d97757; }
/* ============================================
THE READ — editorial intelligence brief
============================================ */
.the-read {
--read-serif: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, 'Times New Roman', serif;
--read-bg: #0b1322;
--read-ink: #ecdfd0;
--read-muted: #a09486;
--read-soft: #786d62;
--read-rule: rgba(236,223,208,.12);
--read-accent: #d97757; /* warm rust — not gold */
--read-accent-soft: rgba(217,119,87,.14);
--read-text-col: 720px; /* readable prose measure inside wide section */
background: var(--read-bg);
color: var(--read-ink);
margin: 32px auto;
max-width: 1480px;
padding: 56px 96px 56px;
border-radius: 4px;
position: relative;
font-family: var(--read-serif);
font-feature-settings: "kern", "liga", "onum";
}
/* Headline + dek span full width (display typography fills space) */
.the-read .read-headline,
.briefing-section .read-headline {
max-width: none;
font-size: 44px;
line-height: 1.1;
letter-spacing: -1px;
text-wrap: balance;
}
.the-read .read-dek,
.briefing-section .read-dek {
max-width: 1000px;
font-size: 19px;
}
.the-read .read-pullquote {
max-width: 880px;
font-size: 24px;
line-height: 1.4;
}
.the-read::before {
content: '';
position: absolute; left: 0; right: 0; top: 0;
height: 4px;
background: var(--read-accent);
border-radius: 4px 4px 0 0;
}
.the-read * { font-family: inherit; }
/* Classification strip (top) */
.read-classification {
display: flex; justify-content: space-between; align-items: center;
margin: -56px -56px 28px;
padding: 9px 18px;
background: rgba(217,119,87,.08);
border-bottom: 1px solid var(--read-accent);
font-family: Inter, system-ui, sans-serif;
}
.read-class-text {
font-size: 10px; font-weight: 700; letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--read-accent);
}
.read-class-grade {
display: inline-flex; align-items: center; gap: 8px;
font-size: 10px; letter-spacing: 1.5px;
color: var(--read-muted); text-transform: uppercase;
font-weight: 700;
}
.read-class-grade::before {
content: 'Layer agreement';
color: var(--read-soft);
font-weight: 500;
letter-spacing: 1.2px;
}
.read-conf-label {
display: inline-block;
padding: 3px 10px;
border: 1px solid currentColor;
border-radius: 3px;
font-family: Inter, system-ui, sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.4px;
font-feature-settings: "tnum";
}
.read-conf-label.convergent { color: #46d7b0; background: rgba(70,215,176,.10); }
.read-conf-label.agreed { color: #46d7b0; background: rgba(70,215,176,.06); }
.read-conf-label.mixed { color: #d97757; background: rgba(217,119,87,.10); }
.read-conf-label.divergent { color: #d97757; background: rgba(217,119,87,.14); }
/* Header — masthead style */
.read-header {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 18px;
margin-bottom: 18px;
}
.read-header-l { flex: 1; }
.read-header-r { text-align: right; }
.read-eyebrow {
font-size: 12px; font-weight: 700; letter-spacing: 3px;
text-transform: uppercase;
color: var(--read-accent);
font-family: Inter, system-ui, sans-serif;
}
.read-issue {
margin-top: 6px;
font-family: var(--read-serif);
font-size: 13px;
color: var(--read-muted);
font-style: italic;
font-feature-settings: "tnum", "onum";
}
.read-publisher {
font-family: var(--read-serif);
font-size: 13px;
font-weight: 600;
letter-spacing: 1.4px;
color: var(--read-ink);
text-transform: uppercase;
}
.read-publisher-sub {
margin-top: 4px;
font-family: Inter, system-ui, sans-serif;
font-size: 10px;
color: var(--read-muted);
letter-spacing: 0.5px;
}
/* Section rule */
.read-rule {
height: 1px;
background: linear-gradient(90deg, var(--read-accent) 0, var(--read-accent) 80px, var(--read-rule) 80px);
margin: 0 0 24px;
}
/* Section number labels */
.read-section-num {
font-family: Inter, system-ui, sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--read-accent);
margin: 36px 0 14px;
padding-bottom: 6px;
border-bottom: 1px solid var(--read-rule);
}
.read-section-num:first-of-type {
margin-top: 0;
}
/* Footer block */
.read-footer {
margin-top: 40px;
padding-top: 22px;
border-top: 2px solid var(--read-accent);
font-family: Inter, system-ui, sans-serif;
}
.read-foot-row {
display: flex; justify-content: space-between;
padding: 6px 0;
font-size: 11px;
color: var(--read-muted);
letter-spacing: 0.5px;
border-bottom: 1px solid var(--read-rule);
}
.read-foot-row:last-of-type { border-bottom: none; }
.read-foot-row > span:last-child {
color: var(--read-ink);
font-weight: 600;
font-feature-settings: "tnum";
}
.read-foot-disclaimer {
margin-top: 16px;
font-size: 11px;
line-height: 1.65;
color: var(--read-soft);
font-style: italic;
font-family: var(--read-serif);
}
/* Headline */
.read-headline {
font-size: 38px;
line-height: 1.12;
font-weight: 600;
letter-spacing: -0.5px;
color: var(--read-ink);
margin: 0 0 18px;
text-wrap: balance;
}
.read-dek {
font-size: 18px;
line-height: 1.55;
font-style: italic;
color: var(--read-muted);
margin: 0 0 32px;
font-weight: 400;
}
/* Multi-stat bar (1 primary + 3 supporting) */
.read-statbar {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 0;
border-top: 1px solid var(--read-rule);
border-bottom: 1px solid var(--read-rule);
padding: 26px 0 28px;
margin: 0 0 36px;
align-items: center;
}
.read-stat,
.read-stat-secondary {
text-align: left;
padding: 0 24px;
border-right: 1px solid var(--read-rule);
}
.read-stat-secondary:last-child { border-right: none; }
.read-stat-primary {
padding-left: 0;
}
.read-stat-num {
font-size: 72px;
line-height: 1;
font-weight: 600;
letter-spacing: -2px;
color: var(--read-accent);
font-feature-settings: "tnum", "lnum";
display: block;
}
.read-stat-secondary .read-stat-num {
font-size: 36px;
letter-spacing: -1px;
}
.read-stat-secondary .read-stat-text {
font-size: 18px;
font-family: var(--read-serif);
font-weight: 600;
letter-spacing: 0;
line-height: 1.2;
color: var(--read-ink);
text-transform: capitalize;
}
.read-stat-label {
margin-top: 10px;
font-size: 11px;
color: var(--read-muted);
text-transform: uppercase;
letter-spacing: 1.6px;
font-family: Inter, system-ui, sans-serif;
font-weight: 600;
line-height: 1.35;
}
.read-stat-delta {
margin-top: 8px;
font-size: 13px;
color: var(--read-muted);
font-style: italic;
font-family: Inter, system-ui, sans-serif;
}
.read-stat-delta.up { color: #46d7b0; }
.read-stat-delta.down { color: #ff6b6b; }
@media (max-width: 980px) {
.read-statbar {
grid-template-columns: 1fr 1fr;
}
.read-stat,
.read-stat-secondary { border-right: none; padding: 16px 12px; border-bottom: 1px solid var(--read-rule); }
}
/* Body prose — 2-column newspaper layout, full container width */
.the-read .read-body,
.briefing-section .read-body {
font-size: 16.5px;
line-height: 1.7;
color: var(--read-ink);
margin: 0 0 28px;
max-width: none;
column-count: 2;
column-gap: 44px;
column-rule: 1px solid var(--read-rule);
}
.read-body p { margin: 0 0 1em; break-inside: avoid; }
.read-body p:first-child::first-letter {
font-size: 3.4em;
line-height: 0.85;
float: left;
margin: 4px 10px 0 0;
font-weight: 600;
color: var(--read-accent);
font-family: var(--read-serif);
}
@media (max-width: 980px) {
.the-read .read-body,
.briefing-section .read-body {
column-count: 1;
max-width: 720px;
}
}
.read-body strong {
color: var(--read-ink);
font-weight: 700;
background: linear-gradient(180deg, transparent 65%, var(--read-accent-soft) 65%);
padding: 0 2px;
}
.read-body em {
color: var(--read-muted);
font-style: italic;
}
.read-body .num {
font-feature-settings: "tnum", "lnum";
font-weight: 600;
color: var(--read-accent);
font-style: normal;
}
/* Figure / chart */
.read-figure {
margin: 44px 0;
padding: 0;
}
.read-chart-wrap {
position: relative;
height: 360px;
background: rgba(255,255,255,.025);
border-radius: 4px;
padding: 20px 18px 10px;
}
.read-figure figcaption {
margin-top: 12px;
font-size: 13px;
font-style: italic;
color: var(--read-muted);
text-align: center;
font-family: Inter, system-ui, sans-serif;
line-height: 1.55;
}
/* Pull quote */
.read-pullquote {
font-size: 26px;
line-height: 1.35;
font-weight: 500;
font-style: italic;
color: var(--read-ink);
margin: 36px 0;
padding: 4px 0 4px 24px;
border-left: 3px solid var(--read-accent);
text-wrap: balance;
}
/* Inline callouts row — denser, more cells */
.read-callouts {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 0;
margin: 32px 0;
border-top: 1px solid var(--read-rule);
border-bottom: 1px solid var(--read-rule);
padding: 22px 0;
}
@media (max-width: 980px) {
.read-callouts { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
.read-callouts { grid-template-columns: repeat(2, 1fr); }
}
.read-callout {
text-align: left;
padding: 4px 18px;
border-right: 1px solid var(--read-rule);
}
.read-callout:nth-child(6n),
.read-callout:last-child { border-right: none; }
.read-callout-num {
font-size: 26px; font-weight: 600;
color: var(--read-accent);
font-feature-settings: "tnum", "lnum";
letter-spacing: -0.8px;
display: block;
line-height: 1.05;
font-family: var(--read-serif);
}
.read-callout-label {
margin-top: 6px;
font-size: 10px;
color: var(--read-muted);
text-transform: uppercase;
letter-spacing: 1.2px;
font-family: Inter, system-ui, sans-serif;
font-weight: 600;
line-height: 1.3;
}
/* Subheads */
.read-subhead {
font-size: 22px;
font-weight: 600;
letter-spacing: -0.3px;
color: var(--read-ink);
margin: 44px 0 18px;
padding-top: 22px;
border-top: 1px solid var(--read-rule);
}
/* Watchlist (numbered) — 2-column grid on wide viewports */
.read-watchlist {
margin: 0 0 28px;
padding: 0;
list-style: none;
counter-reset: w;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0 36px;
}
@media (min-width: 980px) {
.read-watchlist {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
}
.read-watchlist li { min-width: 0; }
.read-watchlist li {
counter-increment: w;
position: relative;
padding: 16px 0 16px 56px;
border-bottom: 1px solid var(--read-rule);
font-size: 15px; line-height: 1.55;
color: var(--read-ink);
}
.read-watchlist li:last-child { border-bottom: none; }
@media (min-width: 980px) {
.read-watchlist li:nth-last-child(2):not(:nth-child(odd)) { border-bottom: none; }
}
.read-watchlist li::before {
content: counter(w, decimal-leading-zero);
position: absolute; left: 0; top: 16px;
font-size: 14px; font-weight: 700;
color: var(--read-accent);
font-family: Inter, system-ui, sans-serif;
letter-spacing: 1px;
font-feature-settings: "tnum";
}
.read-watch-trigger { font-weight: 600; color: var(--read-ink); }
.read-watch-meta {
display: block; margin-top: 4px;
font-size: 13px; color: var(--read-muted); font-style: italic;
font-family: Inter, system-ui, sans-serif;
}
/* Tail risks — 2-column grid on wide viewports */
.read-tails {
margin: 0 0 28px;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0 36px;
}
@media (min-width: 980px) {
.read-tails {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
}
.read-tails li { min-width: 0; }
.read-tails li {
padding: 14px 0;
border-bottom: 1px solid var(--read-rule);
font-size: 14px; line-height: 1.55;
color: var(--read-ink);
}
.read-tails li:last-child { border-bottom: none; }
.read-tail-scenario { font-weight: 600; }
.read-tail-meta {
display: block; margin-top: 4px;
font-size: 12px; color: var(--read-muted); font-style: italic;
font-family: Inter, system-ui, sans-serif;
}
.read-tail-prob {
display: inline-block;
margin-left: 8px;
padding: 2px 7px;
background: var(--read-accent-soft);
color: var(--read-accent);
font-size: 11px;
font-weight: 700;
font-feature-settings: "tnum";
border-radius: 3px;
font-family: Inter, system-ui, sans-serif;
vertical-align: middle;
}
/* Deeper details (collapsed by default) */
.read-deeper {
margin: 18px 0 0;
border-top: 1px solid var(--read-rule);
padding-top: 18px;
font-family: Inter, system-ui, sans-serif;
}
.read-deeper summary {
cursor: pointer;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--read-muted);
list-style: none;
display: flex; align-items: center; gap: 8px;
padding: 8px 0;
transition: color .2s;
}
.read-deeper summary::-webkit-details-marker { display: none; }
.read-deeper summary::before {
content: '+';
font-size: 18px;
font-weight: 400;
color: var(--read-accent);
width: 14px;
text-align: center;
}
.read-deeper[open] summary::before { content: '\2212'; }
.read-deeper summary:hover { color: var(--read-ink); }
.read-deeper > div {
padding: 14px 0 8px;
font-size: 13px;
line-height: 1.7;
color: var(--read-muted);
}
/* Long prose inside annex stays at readable text-column width */
.read-deeper > div > p {
max-width: 880px;
font-size: 14px;
line-height: 1.75;
margin-bottom: 1em;
}
.md-code {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: .9em;
background: rgba(217,119,87,.12);
color: var(--read-accent);
padding: 1px 5px;
border-radius: 3px;
}
.read-deeper > div > p strong {
color: var(--read-ink);
font-weight: 700;
}
.read-deeper .deeper-row {
display: flex; justify-content: space-between; align-items: baseline;
padding: 8px 0;
border-bottom: 1px solid var(--read-rule);
font-size: 13px;
}
.read-deeper .deeper-row:last-child { border-bottom: none; }
.read-deeper .deeper-row strong { color: var(--read-ink); font-weight: 600; }
.read-deeper .deeper-row .deeper-num {
font-feature-settings: "tnum", "lnum";
color: var(--read-accent);
font-weight: 600;
}
/* Stakeholder grid (4-col on wide) */
.stake-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
@media (min-width: 980px) {
.stake-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.stake-card { min-width: 0; word-break: break-word; }
.stake-name { word-break: break-word; }
.stake-card {
border: 1px solid var(--read-rule);
border-radius: 4px;
padding: 12px 14px;
background: rgba(255,255,255,.02);
}
.stake-name {
font-family: var(--read-serif);
font-size: 16px;
font-weight: 600;
color: var(--read-ink);
text-transform: capitalize;
margin-bottom: 2px;
line-height: 1.15;
}
.stake-style {
font-size: 10px;
color: var(--read-accent);
text-transform: uppercase;
letter-spacing: 1.4px;
margin-bottom: 10px;
font-family: Inter, system-ui, sans-serif;
font-weight: 700;
}
.stake-traits {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px 12px;
font-family: Inter, system-ui, sans-serif;
font-size: 11px;
}
.stake-traits > span {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.stake-k {
color: var(--read-soft);
text-transform: uppercase;
letter-spacing: 0.8px;
font-size: 9px;
}
.stake-v {
color: var(--read-ink);
font-weight: 700;
font-feature-settings: "tnum";
}
/* Iran regime/population side-by-side */
.iran-split-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 14px;
margin-bottom: 14px;
}
.iran-card { min-width: 0; }
@media (max-width: 700px) {
.iran-split-grid { grid-template-columns: 1fr; }
}
.iran-card {
border: 1px solid var(--read-rule);
border-radius: 4px;
padding: 16px 18px;
background: rgba(255,255,255,.02);
position: relative;
}
.iran-card.iran-regime { border-top: 2px solid #ff6b6b; }
.iran-card.iran-pop { border-top: 2px solid #46d7b0; }
.iran-card-title {
font-family: Inter, system-ui, sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
margin-bottom: 12px;
text-transform: uppercase;
}
.iran-card.iran-regime .iran-card-title { color: #ff6b6b; }
.iran-card.iran-pop .iran-card-title { color: #46d7b0; }
.iran-card-row {
display: flex;
justify-content: space-between;
padding: 6px 0;
font-family: Inter, system-ui, sans-serif;
font-size: 12px;
color: var(--read-muted);
}
.iran-card-row strong {
color: var(--read-ink);
font-weight: 700;
font-feature-settings: "tnum";
}
.iran-headline {
font-family: var(--read-serif);
font-size: 14px;
font-style: italic;
color: var(--read-muted);
padding: 12px 16px;
border-left: 3px solid var(--read-accent);
background: var(--read-accent-soft);
border-radius: 0 4px 4px 0;
}
.iran-headline strong {
font-style: normal;
color: var(--read-accent);
font-weight: 700;
font-feature-settings: "tnum";
}
/* Game theory + decision tree 2-col */
.game-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 24px;
}
@media (min-width: 980px) {
.game-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; }
}
.game-side { min-width: 0; }
.game-side {
border: 1px solid var(--read-rule);
border-radius: 4px;
padding: 16px 18px;
background: rgba(255,255,255,.02);
}
.game-h {
font-family: Inter, system-ui, sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--read-accent);
margin-bottom: 10px;
}
.game-side p {
font-family: var(--read-serif);
font-size: 14px;
line-height: 1.6;
color: var(--read-muted);
margin: 0 0 14px;
}
.game-side p strong {
color: var(--read-ink);
font-style: normal;
}
.game-side .deeper-row.rational {
background: rgba(217,119,87,.08);
border-radius: 4px;
padding: 8px 10px;
margin: 0 -10px;
border-bottom: none;
}
.game-side .deeper-row.rational div:first-child { color: var(--read-accent); font-weight: 700; }
.game-side .deeper-row.rational .deeper-num { color: var(--read-accent); }
@media (max-width: 980px) {
.the-read,
.briefing-section {
padding: 32px 22px 28px !important;
margin: 16px 12px 24px !important;
max-width: none;
border-radius: 4px;
}
.the-read .read-headline,
.briefing-section .read-headline { font-size: 26px; line-height: 1.18; letter-spacing: -0.4px; }
.the-read .read-dek,
.briefing-section .read-dek { font-size: 15px; line-height: 1.55; }
.the-read .read-stat-num { font-size: 48px; letter-spacing: -1.5px; }
.read-stat-secondary .read-stat-num { font-size: 28px; }
.read-stat-secondary .read-stat-text { font-size: 14px; }
.the-read .read-body,
.briefing-section .read-body { font-size: 15px; column-count: 1; max-width: none; }
.read-pullquote { font-size: 18px !important; padding-left: 14px !important; }
.read-classification {
margin: -32px -22px 22px !important;
padding: 8px 14px !important;
flex-wrap: wrap; gap: 6px;
}
.read-class-text { font-size: 9px; letter-spacing: 1.5px; }
.read-header { flex-direction: column; gap: 8px; }
.read-header-r { text-align: left; }
.read-publisher { font-size: 11px; letter-spacing: 1px; }
.read-issue { font-size: 11px; }
.read-section-num { font-size: 9px; letter-spacing: 1.8px; margin: 24px 0 10px; }
.read-statbar { grid-template-columns: 1fr 1fr !important; }
.read-stat,
.read-stat-secondary { padding: 12px 10px !important; border-right: none !important; border-bottom: 1px solid var(--read-rule); }
.read-stat-primary { grid-column: 1 / -1; padding-bottom: 18px !important; }
.read-callouts { grid-template-columns: 1fr 1fr !important; }
.read-callout { padding: 10px 12px !important; border-bottom: 1px solid var(--read-rule); }
.read-watchlist,
.read-tails { grid-template-columns: 1fr !important; }
.stake-grid { grid-template-columns: 1fr 1fr !important; }
.iran-split-grid { grid-template-columns: 1fr !important; }
.game-grid { grid-template-columns: 1fr !important; }
.brief-fig-grid { grid-template-columns: 1fr !important; }
.brief-fig-chart { height: 220px !important; padding: 12px 10px 6px !important; }
.brief-fig-title { font-size: 16px !important; }
.brief-diplomacy { grid-template-columns: 1fr !important; }
.brief-fig-blurb { font-size: 13px !important; }
}
/* Scoped table responsive */
.brief-log-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.brief-log {
min-width: 720px;
}
@media (max-width: 980px) {
.brief-log col.c-head { width: 200px; }
}
@media (max-width: 700px) {
.brief-log col.c-head { width: 160px; }
.brief-log td:nth-child(4) { display: none; }
.brief-log th:nth-child(4) { display: none; }
}
/* RTL */
html[dir="rtl"] .read-body p:first-child::first-letter { float: right; margin: 6px 0 0 10px; }
html[dir="rtl"] .read-pullquote { border-left: none; border-right: 3px solid var(--read-accent); padding-left: 0; padding-right: 24px; }
html[dir="rtl"] .read-watchlist li { padding-left: 0; padding-right: 56px; }
html[dir="rtl"] .read-watchlist li::before { left: auto; right: 0; }
/* ============================================
(legacy intel-brief CSS removed; replaced by .the-read above)
============================================ */
.intel-brief-legacy-unused {
display: none;
}
/* The Read REPLACES the old hero panels & legacy 'how this works' panels */
.legacy-hidden { display: none !important; }
/* Page-level footer */
.page-footer {
margin: 48px auto 32px;
max-width: 1480px;
padding: 32px 48px;
border-top: 2px solid rgba(217,119,87,.4);
font-family: Inter, system-ui, sans-serif;
}
.page-footer-inner {
display: grid;
grid-template-columns: 1fr auto;
gap: 18px 48px;
align-items: baseline;
}
.page-footer-brand { line-height: 1.3; }
.page-footer-title {
font-family: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
font-size: 16px;
font-weight: 600;
color: #ecdfd0;
letter-spacing: 0.4px;
}
.page-footer-sub {
font-size: 11px;
color: #786d62;
margin-top: 4px;
letter-spacing: 0.6px;
}
.page-footer-meta {
display: flex; align-items: center; gap: 10px;
font-size: 11px;
color: #786d62;
text-transform: uppercase;
letter-spacing: 1.4px;
font-weight: 600;
}
.page-footer-meta a {
color: #d97757;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color .15s;
}
.page-footer-meta a:hover { border-bottom-color: #d97757; }
.page-footer-disclaimer {
grid-column: 1 / -1;
font-size: 11px;
color: #786d62;
font-style: italic;
font-family: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
line-height: 1.55;
max-width: 880px;
padding-top: 14px;
border-top: 1px solid rgba(236,223,208,.08);
}
@media (max-width: 800px) {
.page-footer { padding: 24px 22px; margin: 24px 12px 16px; }
.page-footer-inner { grid-template-columns: 1fr; }
}
@media print {
.page-footer { display: none; }
}
/* ============================================
PRINT STYLESHEET — clean PDF for officials
============================================ */
@media print {
@page {
size: letter;
margin: 0.6in 0.5in;
}
body, html {
background: #ffffff !important;
color: #1a1a1a !important;
}
body::before { display: none !important; } /* no atmospheric overlays */
.topbar, .scrubber-wrap, .nav-wrap, .lang-btn, .mode-toggle,
details.read-deeper { display: none !important; }
/* Force-open all annex content for print */
details.read-deeper {
display: block !important;
}
details.read-deeper summary { display: none !important; }
details.read-deeper[open] > div,
details.read-deeper > div { display: block !important; }
.the-read, .briefing-section {
background: #ffffff !important;
color: #1a1a1a !important;
margin: 0 !important;
max-width: none !important;
padding: 0 !important;
border-radius: 0 !important;
page-break-inside: avoid;
}
.the-read::before, .briefing-section::before { display: none !important; }
.the-read .read-headline, .briefing-section .read-headline {
color: #1a1a1a !important;
font-size: 28px !important;
page-break-after: avoid;
}
.the-read .read-dek, .briefing-section .read-dek {
color: #555555 !important;
font-size: 13px !important;
}
.the-read .read-body, .briefing-section .read-body {
color: #1a1a1a !important;
column-count: 2 !important;
column-gap: 24px !important;
column-rule: 1px solid #cccccc !important;
font-size: 11px !important;
line-height: 1.55 !important;
}
.read-body p:first-child::first-letter { color: #1a1a1a !important; }
.read-stat-num { color: #d97757 !important; font-size: 36px !important; }
.read-stat-label, .read-stat-secondary .read-stat-num,
.read-stat-secondary .read-stat-text {
color: #1a1a1a !important;
}
.read-statbar {
border-color: #cccccc !important;
page-break-inside: avoid;
}
.read-stat, .read-stat-secondary {
border-color: #cccccc !important;
}
.read-classification {
background: #f5f5f5 !important;
border-bottom-color: #d97757 !important;
margin: 0 0 16px 0 !important;
padding: 6px 12px !important;
}
.read-class-text { color: #d97757 !important; font-size: 9px !important; }
.read-section-num {
color: #d97757 !important;
border-bottom-color: #cccccc !important;
margin: 16px 0 8px !important;
}
.read-pullquote {
color: #1a1a1a !important;
border-left-color: #d97757 !important;
font-size: 14px !important;
}
.brief-fig-chart, .read-chart-wrap {
background: #fafafa !important;
border: 1px solid #e5e5e5 !important;
page-break-inside: avoid;
}
.brief-log {
color: #1a1a1a !important;
page-break-inside: auto;
}
.brief-log th { color: #d97757 !important; border-bottom-color: #d97757 !important; }
.brief-log td { border-bottom-color: #e5e5e5 !important; }
.brief-log tr { page-break-inside: avoid; }
.iran-card, .stake-card, .game-side, .brief-diplomacy li {
background: #fafafa !important;
border-color: #d0d0d0 !important;
color: #1a1a1a !important;
page-break-inside: avoid;
}
.read-deeper > div .deeper-num { color: #d97757 !important; }
.read-footer { border-top-color: #d97757 !important; }
.read-foot-row { border-bottom-color: #e5e5e5 !important; color: #555 !important; }
.read-foot-row > span:last-child { color: #1a1a1a !important; }
.read-foot-disclaimer { color: #777 !important; }
}
/* ============================================
BRIEFING SECTIONS — extend The Read aesthetic full-page
============================================ */
.briefing-section {
/* Inherits the the-read variables */
--read-serif: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, 'Times New Roman', serif;
--read-bg: #0b1322;
--read-ink: #ecdfd0;
--read-muted: #a09486;
--read-soft: #786d62;
--read-rule: rgba(236,223,208,.12);
--read-accent: #d97757;
--read-accent-soft: rgba(217,119,87,.14);
--read-text-col: 720px;
background: var(--read-bg);
color: var(--read-ink);
margin: 0 auto 32px;
max-width: 1480px;
padding: 56px 96px 56px;
border-radius: 4px;
position: relative;
font-family: var(--read-serif);
font-feature-settings: "kern", "liga", "onum";
}
/* (briefing-section headline + dek widths are set in the consolidated rule above) */
.briefing-section::before {
content: '';
position: absolute; left: 0; right: 0; top: 0;
height: 4px;
background: var(--read-accent);
border-radius: 4px 4px 0 0;
}
.briefing-section .read-classification {
margin: -56px -56px 28px;
padding: 9px 18px;
background: rgba(217,119,87,.08);
border-bottom: 1px solid var(--read-accent);
font-family: Inter, system-ui, sans-serif;
}
.briefing-section .read-class-text {
font-size: 10px; font-weight: 700; letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--read-accent);
}
.briefing-section .read-section-num {
font-family: Inter, system-ui, sans-serif;
font-size: 10px; font-weight: 700; letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--read-accent);
margin: 0 0 14px;
padding-bottom: 6px;
border-bottom: 1px solid var(--read-rule);
}
.briefing-section .read-headline {
font-size: 32px; line-height: 1.15; font-weight: 600;
letter-spacing: -0.4px; margin: 0 0 16px; color: var(--read-ink);
text-wrap: balance;
}
.briefing-section .read-dek {
font-size: 17px; line-height: 1.55; font-style: italic;
color: var(--read-muted); margin: 0 0 32px; font-weight: 400;
}
/* Inline figures */
.brief-fig {
margin: 36px 0 44px;
padding: 0;
}
.brief-fig:last-child { margin-bottom: 0; }
.brief-fig-title {
font-family: var(--read-serif);
font-size: 19px;
font-weight: 600;
color: var(--read-ink);
margin: 0 0 6px;
letter-spacing: -0.2px;
}
.brief-fig-blurb {
font-family: Inter, system-ui, sans-serif;
font-size: 13px; line-height: 1.6;
color: var(--read-muted);
margin: 0 0 14px;
font-style: italic;
}
.brief-fig-blurb .num {
font-feature-settings: "tnum", "lnum";
color: var(--read-accent);
font-style: normal;
font-weight: 600;
}
.brief-fig-chart {
position: relative;
height: 280px;
background: rgba(255,255,255,.025);
border-radius: 4px;
padding: 18px 18px 10px;
}
/* 2×2 grid of figures on wide viewports — each is a self-contained card */
@media (min-width: 980px) {
#briefEvidence > .brief-fig-grid,
#briefEvidence {
/* The four children are direct grid items */
}
#briefEvidence .brief-fig {
margin: 0;
}
}
.brief-fig-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 32px 28px;
}
@media (min-width: 980px) {
.brief-fig-grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
}
.brief-fig { min-width: 0; }
/* Diplomacy timeline — 2-col grid of cards on wide viewports */
.brief-diplomacy {
margin: 0; padding: 0;
list-style: none;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 14px;
}
@media (min-width: 980px) {
.brief-diplomacy { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.brief-diplomacy li { min-width: 0; }
.brief-diplomacy li {
padding: 16px 18px;
border: 1px solid var(--read-rule);
border-left: 3px solid var(--read-accent);
border-radius: 0 4px 4px 0;
background: rgba(255,255,255,.02);
font-size: 14px; line-height: 1.55;
color: var(--read-ink);
position: relative;
}
.brief-diplomacy li:last-child { border-bottom: 1px solid var(--read-rule); }
.brief-diplomacy .dp-actor {
display: block;
font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--read-accent);
margin-bottom: 6px;
font-family: Inter, system-ui, sans-serif;
}
.brief-diplomacy .dp-text { color: var(--read-ink); }
.brief-diplomacy .dp-text em { font-style: italic; color: var(--read-muted); }
/* Event log table */
.brief-log-wrap { overflow-x: auto; }
.brief-log {
width: 100%;
border-collapse: collapse;
font-family: Inter, system-ui, sans-serif;
font-size: 13px;
table-layout: fixed;
}
.brief-log col.c-date { width: 60px; }
.brief-log col.c-strikes { width: 50px; }
.brief-log col.c-head { width: 280px; }
.brief-log col.c-assess { width: auto; }
.brief-log th {
text-align: left;
padding: 10px 8px;
border-bottom: 2px solid var(--read-accent);
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--read-accent);
background: transparent;
position: sticky; top: 0;
font-family: Inter, system-ui, sans-serif;
}
.brief-log td {
padding: 12px 8px;
border-bottom: 1px solid var(--read-rule);
color: var(--read-ink);
vertical-align: top;
line-height: 1.55;
}
.brief-log tbody tr {
cursor: pointer;
transition: background .15s;
}
.brief-log tbody tr:hover {
background: rgba(217,119,87,.05);
}
.brief-log tbody tr.expanded td {
background: rgba(217,119,87,.04);
white-space: normal;
}
.brief-log td:first-child {
white-space: nowrap;
font-weight: 600;
font-feature-settings: "tnum";
color: var(--read-accent);
}
.brief-log td:nth-child(2) {
white-space: nowrap;
text-align: center;
font-feature-settings: "tnum";
color: var(--read-muted);
}
.brief-log td:nth-child(3) {
font-style: italic;
color: var(--read-muted);
max-width: 180px;
}
.brief-log td:nth-child(4) {
max-width: 320px;
}
.brief-log tbody tr:not(.expanded) td:nth-child(4) {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 320px;
}
/* Business annex blurbs (inside read-deeper) */
#briefIranfarhang p, #briefKIP p {
font-family: var(--read-serif);
font-size: 14px; line-height: 1.7;
color: var(--read-muted);
margin-bottom: 12px;
}
#briefIranfarhang ul, #briefKIP ul {
margin: 0 0 14px; padding: 0; list-style: none;
}
#briefIranfarhang li, #briefKIP li {
padding: 6px 0 6px 20px;
font-size: 13px; line-height: 1.55;
color: var(--read-ink);
position: relative;
font-family: Inter, system-ui, sans-serif;
}
#briefIranfarhang li::before, #briefKIP li::before {
content: '\2014';
position: absolute; left: 0;
color: var(--read-accent);
font-weight: 600;
}
@media (max-width: 800px) {
.briefing-section {
padding: 36px 24px 32px;
margin: 0 16px 24px;
}
.briefing-section .read-classification { margin: -36px -24px 24px; }
.briefing-section .read-headline { font-size: 24px; }
.brief-fig-chart { height: 220px; }
}
/* --- Responsive Breakpoints --- */
@media(max-width:1180px) {
.hero,.cols-2,.cols-3 { grid-template-columns: 1fr; }
.metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.model-cards { grid-template-columns: 1fr; }
.vector-grid { grid-template-columns: repeat(3, 1fr); }
table { min-width: 900px; }
}
@media(max-width:700px) {
/* Layout */
.metric-grid { grid-template-columns: 1fr; }
.vector-grid { grid-template-columns: 1fr; }
.model-cards { grid-template-columns: 1fr !important; }
/* Topbar */
.topbar-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
.title h1 { font-size: 18px; }
.title p { font-size: 12px; }
.chips { width: 100%; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 11px; padding: 7px 10px; }
.lang-btn { padding: 6px 12px; font-size: 12px; }
/* Panels */
.panel { padding: 14px; border-radius: 16px; }
.prediction-hero { padding: 14px; border-radius: 16px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
/* Charts */
.chart-box { height: 240px !important; }
.chart-box.tall { height: 280px !important; }
.chart-box.short { height: 200px !important; }
/* Probability display */
.prob-pct { font-size: 28px; }
.prob-label { font-size: 11px; }
.prob-header { flex-wrap: wrap; gap: 4px; }
.outcome-forecast { font-size: 13px; padding: 12px; }
/* Decision conditions */
.cond-pct { font-size: 14px; }
.cond-label { font-size: 12px; }
.cond-formula { font-size: 10px; padding: 6px 8px; }
/* Metrics */
.metric .value { font-size: 20px; }
.metric .desc { font-size: 11px; }
.metric .label { font-size: 11px; }
/* Scenario simulator */
.sim-buttons { gap: 4px; }
.sim-btn { padding: 6px 10px; font-size: 11px; }
.sim-result { padding: 12px; }
.sim-value { font-size: 14px; }
/* Scrubber */
.scrubber-wrap { flex-wrap: wrap; padding: 8px 12px 24px; gap: 8px; }
.scrubber-label { font-size: 11px; }
.scrubber-label strong { font-size: 12px; }
/* Escalation ladder */
.esc-title { font-size: 12px; }
.esc-meta { font-size: 10px; }
.esc-status-tag { font-size: 8px; padding: 1px 4px; }
.esc-dot { width: 10px; height: 10px; }
/* Deadline */
#deadlineCountdown { font-size: 22px !important; }
/* Tables */
.hub-matrix { font-size: 10px; }
.hub-matrix th, .hub-matrix td { padding: 6px 4px; }
.table-wrap td { max-width: 120px; font-size: 11px; }
/* Cards */
.route-card { padding: 10px; }
.risk-gauge { flex-direction: column; text-align: center; }
.risk-gauge .gauge-score { font-size: 28px; }
/* Tags */
.tag { font-size: 10px; padding: 3px 7px; }
/* Section nav */
.section-nav { width: 180px; }
/* Calibration */
.cal-row { font-size: 11px; }
/* Sensitivity */
.scenario { flex-direction: column; gap: 6px; }
.scenario .prob { font-size: 18px; }
/* About section */
.prediction-hero + .panel { padding: 12px; }
}
@media(max-width:500px) {
/* Keep metric grid 2-column on very small screens (override 700px 1fr rule) */
.metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:360px) {
/* Prevent topbar overflow on ultra-narrow screens */
.topbar-inner { gap: 6px; }
.title h1 { font-size: 15px; }
.title p { font-size: 10px; }
.chip { font-size: 10px; padding: 5px 7px; }
.lang-btn { font-size: 11px; padding: 5px 9px; }
}
/* ============================================
Ceasefire Mode
============================================ */
/* Mode visibility + cross-fade */
body.war-mode [data-mode="ceasefire"] { display: none !important; }
body.ceasefire-mode [data-mode="war"] { display: none !important; }
@keyframes mode-fade { from { opacity: 0; } to { opacity: 1; } }
body.war-mode [data-mode="war"],
body.ceasefire-mode [data-mode="ceasefire"] {
animation: mode-fade .22s ease-out;
}
@media (prefers-reduced-motion: reduce) {
body.war-mode [data-mode="war"],
body.ceasefire-mode [data-mode="ceasefire"] { animation: none; }
}
/* Mode toggle */
.mode-toggle {
display: inline-flex;
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
background: var(--panel);
}
.mode-btn {
padding: 8px 16px;
border: none;
background: transparent;
color: var(--muted);
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: all .2s;
letter-spacing: .3px;
}
.mode-btn:hover { color: var(--text); }
.mode-btn.active {
background: rgba(70,215,176,.15);
color: var(--cyan);
}
/* Ceasefire hero */
.ceasefire-hero {
position: relative;
background:
linear-gradient(180deg, rgba(255,255,255,.04), transparent 18%),
linear-gradient(135deg, rgba(70,215,176,.16), rgba(99,179,255,.10));
border: 1px solid var(--cyan);
border-radius: 26px;
padding: 32px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.08),
0 30px 80px rgba(0,0,0,.35);
}
.ceasefire-hero::before{
content:'';
position:absolute; inset:0;
border-radius: inherit; pointer-events:none;
background: radial-gradient(circle at 12% -10%, rgba(70,215,176,.22), transparent 38%);
}
.ceasefire-hero > *{ position:relative; }
/* Post-ceasefire scenarios — 2×2 grid of distinct branches */
.cf-scenarios-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 12px;
}
.cf-scenario {
border: 1px solid var(--border);
border-radius: 12px;
padding: 12px;
background: rgba(255,255,255,.02);
transition: border-color .2s;
}
.cf-scenario[data-branch="extend"] { border-top: 3px solid var(--cyan); }
.cf-scenario[data-branch="deal"] { border-top: 3px solid var(--cyan); }
.cf-scenario[data-branch="stalled"] { border-top: 3px solid var(--gold); }
.cf-scenario[data-branch="collapse"] { border-top: 3px solid var(--red); }
.cf-scenario.leading { box-shadow: 0 0 0 1px var(--gold) inset; }
.cf-scenario-head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 10px;
gap: 8px;
}
.cf-scenario-title {
font-weight: 700;
font-size: 14px;
}
.cf-scenario-prob {
font-size: 20px;
font-weight: 900;
color: var(--gold);
}
.cf-scenario.leading .cf-scenario-prob { color: var(--gold); }
.cf-scenario[data-branch="extend"] .cf-scenario-prob,
.cf-scenario[data-branch="deal"] .cf-scenario-prob { color: var(--cyan); }
.cf-scenario[data-branch="stalled"] .cf-scenario-prob { color: var(--gold); }
.cf-scenario[data-branch="collapse"] .cf-scenario-prob { color: var(--red); }
.cf-scenario-delta { font-size: 11px; font-weight: 700; }
.cf-scenario-delta.up { color: var(--cyan); }
.cf-scenario-delta.down { color: var(--red); }
.cf-scenario .timeline-vertical { margin: 0; padding-left: 18px; }
.cf-scenario .tl-item { padding: 8px 10px; font-size: 12px; margin-bottom: 8px; }
html[dir="rtl"] .cf-scenario .timeline-vertical { padding-left: 0; padding-right: 18px; }
@media(max-width:700px) {
.cf-scenarios-grid { grid-template-columns: 1fr; }
}
/* De-facto collapse banner inside ceasefire hero */
.cf-collapse-banner {
background: rgba(255,107,107,.12);
border: 1px solid var(--red);
border-radius: 10px;
padding: 10px 14px;
margin-bottom: 12px;
font-size: 13px;
font-weight: 700;
color: var(--red);
line-height: 1.4;
}
/* Violation day groups — one card per day, incidents stack inside */
.vday {
border: 1px solid var(--border);
border-radius: 14px;
margin-bottom: 10px;
background: rgba(255,255,255,.02);
overflow: hidden;
}
.vday.severe { border-color: var(--red); }
.vday.moderate { border-color: var(--orange); }
.vday.minor { border-color: var(--gold); }
.vday.vday-quiet { border-color: var(--border); }
.vday-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: rgba(255,255,255,.03);
border-bottom: 1px solid var(--border);
font-size: 13px;
font-weight: 700;
}
.vday.vday-quiet .vday-head { border-bottom: none; }
.vday-date { color: var(--text); }
.vday-count { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .3px; }
.vday-body { padding: 4px 0; }
.vincident {
padding: 10px 14px;
border-bottom: 1px solid rgba(255,255,255,.04);
}
.vincident:last-child { border-bottom: none; }
.vincident-head {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 4px;
font-size: 13px;
}
.vincident-sev {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
font-size: 10px;
font-weight: 800;
letter-spacing: .4px;
color: #fff;
flex-shrink: 0;
}
.vincident.severe .vincident-sev { background: var(--red); }
.vincident.moderate .vincident-sev { background: var(--orange); }
.vincident.minor .vincident-sev { background: var(--gold); color: var(--bg); }
.vincident-target { flex: 1; min-width: 0; }
.vincident-scope {
font-size: 11px;
color: var(--muted);
cursor: help;
border-bottom: 1px dotted var(--muted);
}
.vincident-desc { font-size: 12px; color: var(--muted); line-height: 1.5; }
html[dir="rtl"] .vincident-target strong + span,
html[dir="rtl"] .vincident-target { direction: rtl; }
/* Negotiation timeline */
.nego-event {
display: flex; gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--border);
}
.nego-event:last-child { border-bottom: none; }
.nego-dot { width: 12px; height: 12px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; }
.nego-dot.breakthrough { background: var(--cyan); }
.nego-dot.scheduled { background: var(--gold); }
.nego-dot.delayed { background: var(--orange); }
.nego-dot.negative { background: var(--red); }
.nego-dot.collapsed { background: var(--red); }
.nego-dot.in_progress { background: var(--blue); }
/* De-escalation ladder additions */
.esc-rung.de_escalating .esc-dot { background: var(--cyan); border-color: var(--cyan); }
.esc-rung.suspended .esc-dot { background: var(--gold); border-color: var(--gold); }
/* Responsive ceasefire */
@media(max-width:1180px) {
.ceasefire-hero .cols-2 { grid-template-columns: 1fr; }
}
@media(max-width:700px) {
.ceasefire-hero { padding: 14px; }
#cfCountdown { font-size: 28px !important; }
.mode-btn { padding: 6px 10px; font-size: 11px; }
}
/* ============================================
AGENT V2 — Predictive Agent (Phase 0 MVP)
editorial brief × question portfolio shape
============================================ */
body.agent-v2 {
--agent-bg: #0b1322;
--agent-bg-2: #0f1828;
--agent-bg-3: #14202f;
--agent-ink: #ecdfd0;
--agent-muted: #a09486;
--agent-soft: #786d62;
--agent-rule: rgba(236, 223, 208, 0.12);
--agent-rule-2: rgba(236, 223, 208, 0.06);
--agent-accent: #d97757; /* warm rust */
--agent-accent-2: #e8a87c;
--agent-amber: #d4af37;
--agent-red: #c8463a;
--agent-green: #4a8f6a;
--agent-blue: #5a8db5;
--agent-violet: #8e6fa3;
--serif: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, 'Times New Roman', serif;
--sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Helvetica Neue', system-ui, sans-serif;
--mono: ui-monospace, 'SF Mono', 'Menlo', 'JetBrains Mono', 'Cascadia Mono', monospace;
background: var(--agent-bg);
color: var(--agent-ink);
font-family: var(--sans);
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
}
/* ===== Topbar ===== */
body.agent-v2 .topbar {
background: var(--agent-bg-2);
border-bottom: 1px solid var(--agent-rule);
padding: 14px 0;
position: sticky;
top: 0;
z-index: 50;
backdrop-filter: blur(8px);
}
body.agent-v2 .topbar-inner {
max-width: 1480px;
margin: 0 auto;
padding: 0 24px;
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 24px;
flex-wrap: wrap;
}
body.agent-v2 .topbar-l {
display: flex;
align-items: baseline;
gap: 14px;
}
body.agent-v2 .topbar-eyebrow {
font-family: var(--sans);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--agent-muted);
}
body.agent-v2 .topbar-title {
font-family: var(--serif);
font-size: 20px;
font-weight: 600;
color: var(--agent-ink);
letter-spacing: -0.01em;
}
body.agent-v2 .topbar-r {
display: flex;
gap: 18px;
font-family: var(--mono);
font-size: 11px;
color: var(--agent-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* ===== Banners (override existing styles for agent-v2) ===== */
body.agent-v2 .agent-banner {
max-width: 1480px;
margin: 18px auto 0 auto;
}
/* ===== Page wrapper ===== */
body.agent-v2 .agent-page {
max-width: 1480px;
margin: 0 auto;
padding: 32px 24px 64px 24px;
}
/* ===== Masthead ===== */
body.agent-v2 .agent-masthead { margin-bottom: 32px; }
body.agent-v2 .masthead-class {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--agent-amber);
border-top: 1px solid var(--agent-rule);
border-bottom: 1px solid var(--agent-rule);
padding: 8px 0;
text-align: center;
margin-bottom: 24px;
}
body.agent-v2 .masthead-row {
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
gap: 24px;
margin-bottom: 18px;
}
body.agent-v2 .masthead-eyebrow {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--agent-accent);
margin-bottom: 8px;
}
body.agent-v2 .masthead-title {
font-family: var(--serif);
font-size: 96px;
line-height: 0.95;
font-weight: 700;
color: var(--agent-ink);
margin: 0;
letter-spacing: -0.025em;
font-style: italic;
}
body.agent-v2 .masthead-publisher {
font-family: var(--mono);
font-size: 13px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--agent-ink);
margin-bottom: 4px;
text-align: right;
}
body.agent-v2 .masthead-publisher-sub {
font-family: var(--sans);
font-size: 12px;
color: var(--agent-muted);
text-align: right;
}
body.agent-v2 .masthead-rule {
border-top: 3px double var(--agent-ink);
}
/* ===== 24h Diff Panel ===== */
body.agent-v2 .diff-panel {
background: var(--agent-bg-2);
border: 1px solid var(--agent-rule);
border-left: 3px solid var(--agent-accent);
padding: 22px 26px;
margin-bottom: 40px;
border-radius: 2px;
}
body.agent-v2 .diff-h {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--agent-accent);
margin: 0 0 14px 0;
font-weight: 600;
}
body.agent-v2 .diff-empty .diff-empty-msg {
font-family: var(--serif);
font-size: 16px;
line-height: 1.6;
color: var(--agent-ink);
font-style: italic;
margin: 0;
}
body.agent-v2 .diff-empty .diff-empty-msg em { color: var(--agent-accent-2); font-style: normal; font-weight: 600; }
body.agent-v2 .diff-list { list-style: none; margin: 0; padding: 0; }
body.agent-v2 .diff-item { padding: 8px 0; border-bottom: 1px solid var(--agent-rule-2); }
body.agent-v2 .diff-item:last-child { border-bottom: none; }
body.agent-v2 .diff-item a { color: inherit; text-decoration: none; display: flex; align-items: baseline; gap: 12px; }
body.agent-v2 .diff-item a:hover { background: rgba(217,119,87,0.06); }
body.agent-v2 .diff-id { font-family: var(--mono); font-size: 12px; color: var(--agent-accent); font-weight: 600; min-width: 32px; }
body.agent-v2 .diff-arrow { font-size: 16px; }
body.agent-v2 .diff-up .diff-arrow, body.agent-v2 .diff-up .diff-delta { color: var(--agent-green); }
body.agent-v2 .diff-down .diff-arrow, body.agent-v2 .diff-down .diff-delta { color: var(--agent-red); }
body.agent-v2 .diff-delta { font-family: var(--mono); font-size: 13px; font-weight: 600; min-width: 60px; }
body.agent-v2 .diff-from-to { font-family: var(--mono); font-size: 11px; color: var(--agent-muted); min-width: 120px; }
body.agent-v2 .diff-question { font-family: var(--serif); font-size: 14px; color: var(--agent-ink); flex: 1; }
/* ===== Top question hero ===== */
body.agent-v2 .topq {
background: linear-gradient(135deg, var(--agent-bg-2) 0%, var(--agent-bg-3) 100%);
border: 1px solid var(--agent-rule);
border-left: 4px solid var(--agent-accent);
padding: 32px 36px;
margin-bottom: 56px; /* major break before the question board */
border-radius: 2px;
position: relative;
overflow: hidden;
}
body.agent-v2 .topq::before {
content: "";
position: absolute;
top: 0; right: 0;
width: 220px; height: 220px;
background: radial-gradient(circle, rgba(217,119,87,0.12) 0%, transparent 70%);
pointer-events: none;
}
body.agent-v2 .topq-eyebrow {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--agent-accent);
margin-bottom: 14px;
}
body.agent-v2 .topq-question {
font-family: var(--serif);
font-size: 32px;
line-height: 1.18;
font-weight: 600;
color: var(--agent-ink);
margin: 0 0 24px 0;
letter-spacing: -0.01em;
max-width: 920px;
}
body.agent-v2 .topq-row {
display: grid;
grid-template-columns: minmax(0, auto) minmax(0, 1fr);
gap: 36px;
align-items: start;
margin-bottom: 16px;
}
body.agent-v2 .topq-prob {
display: flex;
flex-direction: column;
gap: 4px;
border-right: 1px solid var(--agent-rule);
padding-right: 36px;
min-width: 200px;
}
body.agent-v2 .topq-prob-num {
font-family: var(--serif);
font-size: 86px;
line-height: 0.9;
font-weight: 700;
color: var(--agent-accent);
letter-spacing: -0.04em;
}
body.agent-v2 .topq-prob-pct { font-size: 36px; color: var(--agent-accent-2); margin-left: 4px; }
body.agent-v2 .topq-prob-label {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--agent-ink);
font-weight: 600;
margin-top: 6px;
}
body.agent-v2 .topq-prob-ci {
font-family: var(--mono);
font-size: 11px;
color: var(--agent-muted);
margin-top: 2px;
}
body.agent-v2 .topq-note {
font-family: var(--serif);
font-size: 16px;
line-height: 1.6;
color: var(--agent-ink);
margin: 0;
font-style: italic;
}
body.agent-v2 .topq-link {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--agent-accent);
text-decoration: none;
font-weight: 600;
}
body.agent-v2 .topq-link:hover { color: var(--agent-accent-2); }
/* ===== Headline narrative =====
Section spacing rhythm: standard sections use 40px margin-bottom; the
board and the topq→board transition use 56px to create visible "major
break" beats before the densest part of the page. */
body.agent-v2 .headline {
margin-bottom: 40px;
/* No section-level width cap — the headline matches every other section
visually (full container width). Inner paragraphs cap themselves at a
readable line length. */
}
body.agent-v2 .headline-eyebrow {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--agent-amber);
margin-bottom: 18px;
border-top: 1px solid var(--agent-rule);
padding-top: 16px;
}
/* Two-column editorial layout for the lead + body so the headline section
uses the full container width without sacrificing readable line length.
On narrower screens it falls back to a single column via the responsive
block at the bottom of this file. */
body.agent-v2 .headline-lead,
body.agent-v2 .headline-body {
font-family: var(--serif);
color: var(--agent-ink);
margin: 0;
max-width: 60ch;
}
body.agent-v2 .headline-lead {
font-size: 22px;
line-height: 1.45;
}
body.agent-v2 .headline-body {
font-size: 17px;
line-height: 1.65;
}
@media (min-width: 1100px) {
body.agent-v2 .headline {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"eyebrow eyebrow"
"lead body";
column-gap: 48px;
row-gap: 8px;
}
body.agent-v2 .headline-eyebrow { grid-area: eyebrow; }
body.agent-v2 .headline-lead { grid-area: lead; max-width: none; }
body.agent-v2 .headline-body { grid-area: body; max-width: none; }
}
body.agent-v2 .dropcap {
font-family: var(--serif);
font-size: 64px;
line-height: 0.9;
font-weight: 700;
color: var(--agent-accent);
float: left;
padding: 4px 10px 0 0;
font-style: italic;
}
/* ===== Question board ===== */
body.agent-v2 .board { margin-bottom: 56px; }
body.agent-v2 .board-h {
font-family: var(--serif);
font-size: 32px;
font-weight: 600;
color: var(--agent-ink);
margin: 0 0 32px 0;
border-bottom: 3px double var(--agent-ink);
padding-bottom: 14px;
letter-spacing: -0.01em;
font-style: italic;
}
body.agent-v2 .board-cat { margin-bottom: 36px; }
body.agent-v2 .board-cat-head {
display: flex;
align-items: baseline;
gap: 16px;
margin-bottom: 18px;
border-bottom: 1px solid var(--agent-rule);
padding-bottom: 10px;
}
body.agent-v2 .board-cat-num {
font-family: var(--serif);
font-size: 22px;
color: var(--agent-accent);
font-weight: 700;
font-style: italic;
}
body.agent-v2 .board-cat-title {
font-family: var(--serif);
font-size: 22px;
font-weight: 600;
color: var(--agent-ink);
margin: 0;
flex: 1;
}
body.agent-v2 .board-cat-count {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--agent-muted);
}
body.agent-v2 .board-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
/* ===== Question board: subhead + cluster split ===== */
body.agent-v2 .board-sub {
font-family: var(--serif);
font-size: 16px;
line-height: 1.55;
color: var(--agent-muted);
font-style: italic;
margin: -16px 0 28px 0;
max-width: 820px;
}
body.agent-v2 .board-cluster { margin-top: 14px; }
body.agent-v2 .board-cluster + .board-cluster-divider {
display: none; /* divider styling lives on the
itself */
}
body.agent-v2 .board-cluster-h {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--agent-muted);
margin: 0 0 12px 0;
font-weight: 600;
}
body.agent-v2 .board-cluster-likely .board-cluster-h { color: var(--agent-ink); }
body.agent-v2 .board-cluster-tail .qcard { opacity: 0.94; }
body.agent-v2 .board-cluster-divider {
border: none;
border-top: 1px dashed var(--agent-rule);
margin: 22px 0 14px 0;
height: 0;
}
/* ===== Editorial frame (the "why" — economic-war thesis) ===== */
body.agent-v2 .frame {
background: linear-gradient(180deg, var(--agent-bg-2), color-mix(in srgb, var(--agent-bg-2) 92%, var(--agent-accent-2) 8%));
border-top: 3px solid var(--agent-accent-2);
border-left: 1px solid var(--agent-rule);
border-right: 1px solid var(--agent-rule);
border-bottom: 1px solid var(--agent-rule);
padding: 24px 28px 22px 28px;
margin: 0 0 40px 0;
border-radius: 2px;
}
body.agent-v2 .frame-eyebrow {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--agent-muted);
margin-bottom: 10px;
}
body.agent-v2 .frame-h {
font-family: var(--serif);
font-size: 26px;
font-weight: 700;
color: var(--agent-ink);
margin: 0 0 16px 0;
font-style: italic;
letter-spacing: -0.01em;
line-height: 1.18;
}
body.agent-v2 .frame-body {
font-family: var(--serif);
font-size: 17px;
line-height: 1.58;
color: var(--agent-ink);
margin: 0 0 14px 0;
}
body.agent-v2 .frame-body:last-of-type { margin-bottom: 0; }
body.agent-v2 .frame-map {
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--agent-rule);
font-family: var(--serif);
font-size: 14.5px;
line-height: 1.55;
color: var(--agent-muted);
}
body.agent-v2 .frame-map-label {
display: inline-block;
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--agent-accent-2);
margin-right: 8px;
font-weight: 700;
}
@media (max-width: 980px) {
body.agent-v2 .frame { padding: 20px 18px 18px 18px; }
body.agent-v2 .frame-h { font-size: 22px; }
body.agent-v2 .frame-body { font-size: 16px; }
}
/* ===== Language toggle (topbar) ===== */
body.agent-v2 .lang-toggle {
text-decoration: none;
border-left: 1px solid var(--agent-rule);
padding-left: 14px;
margin-left: 4px;
color: var(--agent-accent);
cursor: pointer;
font-weight: 600;
}
body.agent-v2 .lang-toggle:hover { color: var(--agent-accent-2); }
/* ===== RTL / Persian — typography + layout pass =====
Load Vazirmatn (Google Fonts) for the Farsi page; the link tag is added
only on .is-rtl renders by scripts/render.py. The CSS below overrides
Western-typography choices that don't translate to Persian script:
- serif/italic display fonts → Vazirmatn (Persian glyphs render correctly)
- tight letter-spacing → normal (Persian script joins; tracking distorts it)
- 1.4–1.55 line-heights → 1.8 (Persian descenders/ascenders need air)
- drop-cap with float:left → repositioned to right side, no italic
- the colored accent bar flips from left edge to right edge per RTL flow
*/
body.agent-v2.is-rtl {
direction: rtl;
font-family: 'Vazirmatn', 'Tahoma', 'Segoe UI', system-ui, sans-serif;
/* Persian glyphs read smaller than Latin at the same px size — bump base
to compensate so the page reads at parity with the English version. */
font-size: 16.5px;
}
/* Override every v0.2 component's font-family + remove italic + reset tracking. */
body.agent-v2.is-rtl,
body.agent-v2.is-rtl h1,
body.agent-v2.is-rtl h2,
body.agent-v2.is-rtl h3,
body.agent-v2.is-rtl h4,
body.agent-v2.is-rtl p,
body.agent-v2.is-rtl li,
body.agent-v2.is-rtl span,
body.agent-v2.is-rtl div,
body.agent-v2.is-rtl a,
body.agent-v2.is-rtl .topbar-eyebrow,
body.agent-v2.is-rtl .topbar-title,
body.agent-v2.is-rtl .topbar-meta,
body.agent-v2.is-rtl .masthead-class,
body.agent-v2.is-rtl .masthead-eyebrow,
body.agent-v2.is-rtl .masthead-title,
body.agent-v2.is-rtl .masthead-publisher,
body.agent-v2.is-rtl .masthead-publisher-sub,
body.agent-v2.is-rtl .agent-banner,
body.agent-v2.is-rtl .headline-eyebrow,
body.agent-v2.is-rtl .headline-lead,
body.agent-v2.is-rtl .headline-body,
body.agent-v2.is-rtl .frame-eyebrow,
body.agent-v2.is-rtl .frame-h,
body.agent-v2.is-rtl .frame-body,
body.agent-v2.is-rtl .frame-map,
body.agent-v2.is-rtl .frame-map-label,
body.agent-v2.is-rtl .basecase-eyebrow,
body.agent-v2.is-rtl .basecase-h,
body.agent-v2.is-rtl .basecase-body,
body.agent-v2.is-rtl .basecase-foot,
body.agent-v2.is-rtl .diff-h,
body.agent-v2.is-rtl .diff-empty-msg,
body.agent-v2.is-rtl .topq-eyebrow,
body.agent-v2.is-rtl .topq-question,
body.agent-v2.is-rtl .topq-prob-label,
body.agent-v2.is-rtl .topq-prob-ci,
body.agent-v2.is-rtl .topq-note,
body.agent-v2.is-rtl .topq-link,
body.agent-v2.is-rtl .qcard-id,
body.agent-v2.is-rtl .qcard-flags,
body.agent-v2.is-rtl .qcard-question,
body.agent-v2.is-rtl .qcard-prob-label,
body.agent-v2.is-rtl .qcard-note,
body.agent-v2.is-rtl .card-flag,
body.agent-v2.is-rtl .board-h,
body.agent-v2.is-rtl .board-sub,
body.agent-v2.is-rtl .board-cat-num,
body.agent-v2.is-rtl .board-cat-title,
body.agent-v2.is-rtl .board-cat-count,
body.agent-v2.is-rtl .board-cluster-h,
body.agent-v2.is-rtl .board-translation-notice,
body.agent-v2.is-rtl .meth-h,
body.agent-v2.is-rtl .meth-list,
body.agent-v2.is-rtl .meth-list li,
body.agent-v2.is-rtl .agent-footer,
body.agent-v2.is-rtl .agent-footer-brand,
body.agent-v2.is-rtl .agent-footer-meta {
font-family: 'Vazirmatn', 'Tahoma', 'Segoe UI', system-ui, sans-serif;
font-style: normal;
letter-spacing: normal;
}
/* Bump line-heights for Persian readability. */
body.agent-v2.is-rtl .headline-lead,
body.agent-v2.is-rtl .headline-body,
body.agent-v2.is-rtl .frame-body,
body.agent-v2.is-rtl .basecase-body,
body.agent-v2.is-rtl .basecase-foot,
body.agent-v2.is-rtl .diff-empty-msg,
body.agent-v2.is-rtl .topq-note,
body.agent-v2.is-rtl .qcard-note,
body.agent-v2.is-rtl .meth-list li {
line-height: 1.85;
}
/* Headline weight tuning — Persian display weight reads heavier than Latin. */
body.agent-v2.is-rtl .frame-h,
body.agent-v2.is-rtl .basecase-h,
body.agent-v2.is-rtl .topq-question,
body.agent-v2.is-rtl .board-h,
body.agent-v2.is-rtl .meth-h,
body.agent-v2.is-rtl .masthead-title,
body.agent-v2.is-rtl .topbar-title {
font-weight: 700;
letter-spacing: 0;
line-height: 1.4;
}
/* Eyebrows — keep them small and uppercase-ish, but Persian doesn't have
uppercase. Drop the text-transform: uppercase everywhere on RTL: any
English chrome string (like "English" on the lang-toggle) shouldn't
shout, and Persian text stays unaffected by the rule anyway. */
body.agent-v2.is-rtl .topbar-eyebrow,
body.agent-v2.is-rtl .topbar-title,
body.agent-v2.is-rtl .topbar-meta,
body.agent-v2.is-rtl .lang-toggle,
body.agent-v2.is-rtl .masthead-class,
body.agent-v2.is-rtl .masthead-eyebrow,
body.agent-v2.is-rtl .masthead-publisher,
body.agent-v2.is-rtl .masthead-publisher-sub,
body.agent-v2.is-rtl .frame-eyebrow,
body.agent-v2.is-rtl .basecase-eyebrow,
body.agent-v2.is-rtl .topq-eyebrow,
body.agent-v2.is-rtl .topq-prob-label,
body.agent-v2.is-rtl .topq-link,
body.agent-v2.is-rtl .qcard-id,
body.agent-v2.is-rtl .qcard-prob-label,
body.agent-v2.is-rtl .qcard-deadline,
body.agent-v2.is-rtl .board-cluster-h,
body.agent-v2.is-rtl .board-cat-count,
body.agent-v2.is-rtl .frame-map-label,
body.agent-v2.is-rtl .diff-h,
body.agent-v2.is-rtl .agent-banner,
body.agent-v2.is-rtl .agent-banner strong,
body.agent-v2.is-rtl .agent-footer-brand,
body.agent-v2.is-rtl .agent-footer-meta {
text-transform: none;
letter-spacing: normal;
}
body.agent-v2.is-rtl .topbar-eyebrow,
body.agent-v2.is-rtl .frame-eyebrow,
body.agent-v2.is-rtl .basecase-eyebrow,
body.agent-v2.is-rtl .topq-eyebrow,
body.agent-v2.is-rtl .board-cluster-h,
body.agent-v2.is-rtl .board-cat-count,
body.agent-v2.is-rtl .frame-map-label,
body.agent-v2.is-rtl .masthead-class {
font-weight: 600;
font-size: 12.5px;
}
/* Drop cap — Persian script joins; floating a single letter and pulling
the next letter away with padding tears words apart visually. We
inline-merge the dropcap on RTL: same font/size as body, just bolder.
Visitors get a subtle emphasis on the first letter without disjointing
the word ("روز" stays a single readable unit). */
body.agent-v2.is-rtl .dropcap {
float: none;
font-family: 'Vazirmatn', 'Tahoma', system-ui, sans-serif;
font-size: inherit;
line-height: inherit;
font-weight: 800;
font-style: normal;
padding: 0;
color: var(--agent-accent);
}
/* Experimental banner inside .is-rtl: kill the Latin-specific tracking +
any italic that the base rules leak in. The banner-strong tag had
`letter-spacing: 0.06em` from the legacy banner CSS. */
body.agent-v2.is-rtl .experimental-banner,
body.agent-v2.is-rtl .experimental-banner strong,
body.agent-v2.is-rtl .experimental-banner em,
body.agent-v2.is-rtl .experimental-banner span,
body.agent-v2.is-rtl .agent-banner,
body.agent-v2.is-rtl .agent-banner strong,
body.agent-v2.is-rtl .agent-banner em,
body.agent-v2.is-rtl .agent-banner span {
letter-spacing: normal;
font-style: normal;
text-transform: none;
}
/* Visual hierarchy / accent bars flip to right side under RTL. */
body.agent-v2.is-rtl .basecase,
body.agent-v2.is-rtl .frame {
border-left: 1px solid var(--agent-rule);
border-right: 4px solid var(--agent-accent);
}
body.agent-v2.is-rtl .frame {
border-left: 1px solid var(--agent-rule);
border-top: 3px solid var(--agent-accent-2);
border-right: 1px solid var(--agent-rule);
}
body.agent-v2.is-rtl .frame-map-label { margin-right: 0; margin-left: 8px; }
body.agent-v2.is-rtl .lang-toggle {
border-left: none;
border-right: 1px solid var(--agent-rule);
padding-left: 0;
padding-right: 14px;
margin-left: 0;
margin-right: 4px;
}
body.agent-v2.is-rtl .qcard,
body.agent-v2.is-rtl .topq {
border-left: 1px solid var(--agent-rule);
}
/* Public-deploy categories: kept in their own selector list so the
build-public.py CSS strip (which drops any line touching the private
category names) can't accidentally amputate the public category overrides. */
body.agent-v2.is-rtl .qcard-cat-diplomacy,
body.agent-v2.is-rtl .qcard-cat-military,
body.agent-v2.is-rtl .qcard-cat-regime,
body.agent-v2.is-rtl .qcard-cat-economic,
body.agent-v2.is-rtl .qcard-cat-us {
border-right: 3px solid currentColor;
border-left: 1px solid var(--agent-rule);
}
/* Private (family-business) categories — separate rule so it can be
stripped wholesale without affecting the public-cat rules above. */
body.agent-v2.is-rtl .qcard-cat-iranfarhang,
body.agent-v2.is-rtl .qcard-cat-kipa {
border-right: 3px solid currentColor;
border-left: 1px solid var(--agent-rule);
}
/* Translation-in-progress notice on the Persian board */
body.agent-v2 .board-translation-notice {
font-family: var(--serif);
font-size: 14px;
line-height: 1.5;
font-style: italic;
color: var(--agent-muted);
margin: -8px 0 22px 0;
padding: 10px 14px;
border-left: 3px solid var(--agent-accent-2);
background: color-mix(in srgb, var(--agent-bg-2) 80%, transparent);
max-width: 820px;
}
body.agent-v2.is-rtl .board-translation-notice {
border-left: none;
border-right: 3px solid var(--agent-accent-2);
font-style: normal;
font-size: 14.5px;
line-height: 1.7;
}
body.agent-v2.is-rtl .topq-link::after { content: ""; }
body.agent-v2.is-rtl .diff-arrow,
body.agent-v2.is-rtl .topq-delta { unicode-bidi: isolate; }
/* Persian-specific size tuning for the new editorial sections. Persian
prose at 17px reads fine; we bump headlines slightly because the
uppercase-ish display feel of italic Latin is replaced with bolder
Vazirmatn weight. */
body.agent-v2.is-rtl .frame-h { font-size: 28px; }
body.agent-v2.is-rtl .basecase-h { font-size: 26px; }
body.agent-v2.is-rtl .frame-body,
body.agent-v2.is-rtl .basecase-body { font-size: 17.5px; }
body.agent-v2.is-rtl .topq-question { font-size: 30px; line-height: 1.32; }
body.agent-v2.is-rtl .qcard-question { font-size: 17px; line-height: 1.45; }
body.agent-v2.is-rtl .qcard-note { font-size: 14.5px; line-height: 1.65; }
body.agent-v2.is-rtl .headline-lead { font-size: 19.5px; line-height: 1.7; }
body.agent-v2.is-rtl .headline-body { font-size: 17px; line-height: 1.85; }
body.agent-v2.is-rtl .meth-list li { font-size: 16px; }
body.agent-v2.is-rtl .meth-list li + li { margin-top: 12px; }
/* Ensure category headings and cluster-divider read at parity. */
body.agent-v2.is-rtl .board-cat-title { font-size: 24px; font-weight: 700; }
body.agent-v2.is-rtl .board-cat-num { font-size: 14px; }
body.agent-v2.is-rtl .board-h { font-size: 30px; }
/* RTL responsive: slightly larger base text on small screens (Persian
characters can fall below readable threshold faster than Latin). */
@media (max-width: 980px) {
body.agent-v2.is-rtl { font-size: 17px; }
body.agent-v2.is-rtl .frame-h { font-size: 22px; }
body.agent-v2.is-rtl .basecase-h { font-size: 20px; }
body.agent-v2.is-rtl .topq-question { font-size: 24px; }
body.agent-v2.is-rtl .headline-lead { font-size: 17.5px; }
}
/* ===== Most-likely scenario (base case) ===== */
body.agent-v2 .basecase {
background: var(--agent-bg-2);
border-left: 4px solid var(--agent-accent);
border-top: 1px solid var(--agent-rule);
border-right: 1px solid var(--agent-rule);
border-bottom: 1px solid var(--agent-rule);
padding: 22px 26px 20px 26px;
margin: 0 0 40px 0;
border-radius: 2px;
}
body.agent-v2 .basecase-eyebrow {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--agent-muted);
margin-bottom: 10px;
}
body.agent-v2 .basecase-h {
font-family: var(--serif);
font-size: 24px;
font-weight: 600;
color: var(--agent-ink);
margin: 0 0 14px 0;
font-style: italic;
letter-spacing: -0.005em;
}
body.agent-v2 .basecase-body {
font-family: var(--serif);
font-size: 17px;
line-height: 1.55;
color: var(--agent-ink);
margin: 0 0 12px 0;
}
body.agent-v2 .basecase-body:last-of-type { margin-bottom: 0; }
body.agent-v2 .basecase-foot {
font-family: var(--serif);
font-size: 14px;
line-height: 1.5;
color: var(--agent-muted);
font-style: italic;
margin: 14px 0 0 0;
padding-top: 12px;
border-top: 1px solid var(--agent-rule);
}
@media (max-width: 980px) {
body.agent-v2 .basecase { padding: 18px 18px 16px 18px; }
body.agent-v2 .basecase-h { font-size: 20px; }
body.agent-v2 .basecase-body { font-size: 16px; }
}
/* ===== Question card ===== */
body.agent-v2 .qcard {
background: var(--agent-bg-2);
border: 1px solid var(--agent-rule);
border-radius: 3px;
padding: 18px 22px;
display: flex;
flex-direction: column;
gap: 14px;
transition: border-color 0.15s, transform 0.15s;
min-width: 0;
}
body.agent-v2 .qcard:hover,
body.agent-v2 .qcard:focus-within {
border-color: var(--agent-accent);
box-shadow: 0 4px 12px -6px rgba(217, 119, 87, 0.35);
}
body.agent-v2 .qcard-head {
display: flex;
align-items: baseline;
gap: 10px;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
body.agent-v2 .qcard-id {
color: var(--agent-accent);
font-weight: 700;
}
body.agent-v2 .qcard-deadline {
color: var(--agent-muted);
flex: 1;
}
body.agent-v2 .qcard-flags {
display: flex;
gap: 6px;
}
body.agent-v2 .card-flag {
display: inline-block;
padding: 2px 7px;
border-radius: 2px;
font-size: 9px;
letter-spacing: 0.16em;
font-weight: 700;
}
body.agent-v2 .flag-humility {
background: rgba(212, 175, 55, 0.18);
color: var(--agent-amber);
border: 1px solid rgba(212, 175, 55, 0.35);
}
body.agent-v2 .flag-personal {
background: rgba(217, 119, 87, 0.18);
color: var(--agent-accent-2);
border: 1px solid rgba(217, 119, 87, 0.35);
}
body.agent-v2 .qcard-question {
font-family: var(--serif);
font-size: 16px;
line-height: 1.35;
color: var(--agent-ink);
margin: 0;
font-weight: 500;
}
body.agent-v2 .qcard-numbers {
display: flex;
align-items: flex-end;
gap: 18px;
border-top: 1px solid var(--agent-rule-2);
padding-top: 12px;
}
body.agent-v2 .qcard-prob {
display: flex;
flex-direction: column;
min-width: 90px;
}
body.agent-v2 .qcard-prob-num {
font-family: var(--serif);
font-size: 36px;
line-height: 1;
font-weight: 700;
color: var(--agent-ink);
letter-spacing: -0.02em;
}
body.agent-v2 .qcard-prob-pct {
font-size: 16px;
color: var(--agent-muted);
margin-left: 2px;
}
body.agent-v2 .qcard-prob-label {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--agent-accent);
font-weight: 600;
margin-top: 6px;
}
body.agent-v2 .qcard-ci {
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
justify-content: flex-end;
}
body.agent-v2 .qcard-ci-bar {
position: relative;
height: 8px;
display: block;
width: 100%;
}
body.agent-v2 .qcard-ci-track {
position: absolute;
inset: 3px 0;
background: var(--agent-rule);
border-radius: 2px;
}
body.agent-v2 .qcard-ci-fill {
position: absolute;
top: 1px; bottom: 1px;
background: var(--agent-accent);
opacity: 0.6;
border-radius: 2px;
}
body.agent-v2 .qcard-ci-mark {
position: absolute;
top: -2px; bottom: -2px;
width: 2px;
background: var(--agent-ink);
margin-left: -1px;
}
body.agent-v2 .qcard-ci-label {
font-family: var(--mono);
font-size: 10px;
color: var(--agent-muted);
letter-spacing: 0.04em;
}
body.agent-v2 .qcard-note {
font-family: var(--serif);
font-size: 13px;
line-height: 1.45;
color: var(--agent-muted);
margin: 0;
font-style: italic;
border-top: 1px solid var(--agent-rule-2);
padding-top: 10px;
}
/* Category-color borders on question cards — visual hierarchy across all 7 categories */
body.agent-v2 .qcard-cat-diplomacy { border-left: 3px solid var(--agent-blue); }
body.agent-v2 .qcard-cat-military { border-left: 3px solid var(--agent-red); }
body.agent-v2 .qcard-cat-regime { border-left: 3px solid var(--agent-amber); }
body.agent-v2 .qcard-cat-economic { border-left: 3px solid var(--agent-green); }
body.agent-v2 .qcard-cat-us { border-left: 3px solid var(--agent-violet); }
body.agent-v2 .qcard-cat-iranfarhang { border-left: 3px solid var(--agent-accent); }
body.agent-v2 .qcard-cat-kipa { border-left: 3px solid #b692c8; }
/* Category section header accents */
body.agent-v2 .board-cat-diplomacy .board-cat-num { color: var(--agent-blue); }
body.agent-v2 .board-cat-military .board-cat-num { color: var(--agent-red); }
body.agent-v2 .board-cat-regime .board-cat-num { color: var(--agent-amber); }
body.agent-v2 .board-cat-economic .board-cat-num { color: var(--agent-green); }
body.agent-v2 .board-cat-us .board-cat-num { color: var(--agent-violet); }
body.agent-v2 .board-cat-iranfarhang .board-cat-num,
body.agent-v2 .board-cat-iranfarhang .board-cat-title { color: var(--agent-accent-2); }
body.agent-v2 .board-cat-kipa .board-cat-num,
body.agent-v2 .board-cat-kipa .board-cat-title { color: #b692c8; }
/* ===== Logs section ===== */
body.agent-v2 .logs-section {
margin-bottom: 56px;
padding: 28px 32px;
background: var(--agent-bg-2);
border: 1px solid var(--agent-rule);
border-radius: 3px;
}
body.agent-v2 .logs-h {
font-family: var(--serif);
font-size: 24px;
font-weight: 600;
color: var(--agent-ink);
margin: 0 0 8px 0;
font-style: italic;
}
body.agent-v2 .logs-sub {
font-family: var(--serif);
font-size: 14px;
color: var(--agent-muted);
margin: 0 0 20px 0;
font-style: italic;
}
body.agent-v2 .logs-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
body.agent-v2 .log-card {
background: var(--agent-bg-3);
border: 1px solid var(--agent-rule);
border-radius: 2px;
padding: 14px 16px;
text-decoration: none;
display: flex;
flex-direction: column;
gap: 6px;
transition: border-color 0.15s, transform 0.15s;
}
body.agent-v2 .log-card:hover {
border-color: var(--agent-accent);
box-shadow: 0 4px 12px -6px rgba(217, 119, 87, 0.35);
}
body.agent-v2 .log-card.placeholder {
opacity: 0.5;
cursor: not-allowed;
}
body.agent-v2 .log-name {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--agent-accent);
font-weight: 600;
}
body.agent-v2 .log-desc {
font-family: var(--sans);
font-size: 12px;
color: var(--agent-muted);
line-height: 1.4;
}
/* ===== Methodology ===== */
body.agent-v2 .methodology {
margin-bottom: 0; /* last section before footer; footer carries its own gap */
padding-top: 28px;
border-top: 3px double var(--agent-rule);
}
body.agent-v2 .meth-h {
font-family: var(--serif);
font-size: 22px;
font-weight: 600;
color: var(--agent-ink);
margin: 0 0 16px 0;
font-style: italic;
}
body.agent-v2 .meth-list {
margin: 0;
padding-left: 22px;
font-family: var(--serif);
font-size: 14.5px;
line-height: 1.6;
color: var(--agent-ink);
}
body.agent-v2 .meth-list li { margin-bottom: 10px; }
body.agent-v2 .meth-list strong { color: var(--agent-accent-2); }
body.agent-v2 .meth-list code {
font-family: var(--mono);
font-size: 12px;
background: var(--agent-bg-3);
padding: 1px 6px;
border-radius: 2px;
color: var(--agent-accent-2);
}
/* ===== Footer ===== */
body.agent-v2 .agent-footer {
background: var(--agent-bg-2);
border-top: 1px solid var(--agent-rule);
padding: 32px 0;
margin-top: 64px;
}
body.agent-v2 .agent-footer-inner {
max-width: 1480px;
margin: 0 auto;
padding: 0 24px;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 32px;
flex-wrap: wrap;
}
body.agent-v2 .agent-footer-brand {
font-family: var(--mono);
font-size: 13px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--agent-ink);
font-weight: 700;
margin-bottom: 6px;
}
body.agent-v2 .agent-footer-meta {
font-family: var(--sans);
font-size: 12px;
color: var(--agent-muted);
}
body.agent-v2 .agent-footer-r {
display: flex;
gap: 18px;
flex-wrap: wrap;
}
body.agent-v2 .agent-footer-r a {
font-family: var(--sans);
font-size: 12px;
color: var(--agent-accent);
text-decoration: none;
border-bottom: 1px solid transparent;
}
body.agent-v2 .agent-footer-r a:hover {
border-bottom-color: var(--agent-accent);
}
/* ===== Responsive ===== */
@media (max-width: 1180px) {
body.agent-v2 .masthead-title { font-size: 72px; }
body.agent-v2 .topq-question { font-size: 26px; }
body.agent-v2 .logs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
body.agent-v2 .agent-page { padding: 24px 16px 48px 16px; }
body.agent-v2 .topbar-inner { flex-direction: column; align-items: flex-start; }
body.agent-v2 .masthead-title { font-size: 56px; }
body.agent-v2 .masthead-row { flex-direction: column; align-items: flex-start; }
body.agent-v2 .masthead-publisher, body.agent-v2 .masthead-publisher-sub { text-align: left; }
body.agent-v2 .topq { padding: 22px 20px; }
body.agent-v2 .topq-question { font-size: 22px; }
body.agent-v2 .topq-row { grid-template-columns: 1fr; gap: 18px; }
body.agent-v2 .topq-prob { border-right: none; padding-right: 0; border-bottom: 1px solid var(--agent-rule); padding-bottom: 18px; }
body.agent-v2 .topq-prob-num { font-size: 64px; }
body.agent-v2 .headline-lead { font-size: 18px; }
body.agent-v2 .headline-body { font-size: 15px; }
body.agent-v2 .board-grid { grid-template-columns: minmax(0, 1fr); }
body.agent-v2 .logs-grid { grid-template-columns: minmax(0, 1fr); }
body.agent-v2 .qcard-numbers { flex-direction: column; align-items: stretch; gap: 12px; }
body.agent-v2 .qcard-prob { min-width: 0; }
body.agent-v2 .diff-item a { flex-wrap: wrap; }
body.agent-v2 .diff-question { width: 100%; }
}
@media print {
body.agent-v2 { background: white; color: black; }
body.agent-v2 .topbar, body.agent-v2 .agent-banner, body.agent-v2 .agent-footer { display: none; }
body.agent-v2 .qcard { background: white; border: 1px solid #999; }
body.agent-v2 .topq { background: white; border: 1px solid #999; }
}
@media (prefers-reduced-motion: reduce) {
body.agent-v2 .qcard,
body.agent-v2 .qcard:hover,
body.agent-v2 .qcard:focus-within,
body.agent-v2 .log-card:hover,
body.agent-v2 .log-card {
transition: none !important;
transform: none !important;
box-shadow: none !important;
}
}