/* The scenario atlas uses the same quiet colours as the playable map. */
.illustrated-scenarios {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:14px 0;
}
.illustrated-scenarios .scenario-card {
  display:flex;
  flex-direction:column;
  padding:0;
  overflow:hidden;
  border-radius:9px;
  min-width:0;
}
.illustrated-scenarios .scenario-card.selected {
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent);
}
.scenario-visual { display:block; position:relative; width:100%; height:72px; overflow:hidden; }
.scenario-art { display:block; width:100%; height:100%; }
[data-theme=dark] .scenario-visual .scenario-art { filter:brightness(.86) saturate(.9); }
.illustrated-scenarios .scenario-index {
  position:absolute;
  top:7px;
  left:8px;
  margin:0;
  padding:3px 6px 4px;
  border-radius:4px;
  background:var(--panel);
  color:var(--accent);
  font:400 16px/1 var(--display);
}
.scenario-body { display:flex; flex:1; flex-direction:column; align-items:flex-start; gap:3px; padding:9px 11px 10px; }
.illustrated-scenarios .scenario-body > strong {
  font:400 21px/1.12 var(--display);
  padding:0;
  min-height:0;
}
.illustrated-scenarios .scenario-kicker { margin:0; font-size:10px; line-height:1.3; }
.scenario-description { display:block; font-size:11px; color:var(--muted); line-height:1.45; margin:2px 0 4px; }
.illustrated-scenarios .scenario-body small {
  margin-top:auto;
  padding:3px 6px;
  border-radius:4px;
  background:var(--panel2);
  color:var(--gold);
  font-size:9px;
  line-height:1.35;
}
.illustrated-scenarios .selected .scenario-body small { background:var(--panel); }
.modal-actions.scenario-actions {
  position:sticky;
  bottom:0;
  z-index:2;
  margin-top:12px;
  padding:9px 0 5px;
  background:var(--panel);
  box-shadow:0 -8px 12px var(--panel);
}
.scenario-actions > button { font-size:12px; }
@media(max-width:570px) {
  .modal-content:has(.illustrated-scenarios) { padding:18px 14px; }
  .illustrated-scenarios { grid-template-columns:minmax(0,1fr); gap:8px; }
  .illustrated-scenarios .scenario-card { display:grid; grid-template-columns:84px minmax(0,1fr); }
  .scenario-visual { height:100%; min-height:97px; }
  .scenario-body { padding:8px; }
  .illustrated-scenarios .scenario-body > strong { font-size:19px; }
  .illustrated-scenarios .scenario-index { font-size:14px; left:5px; top:5px; }
}

.dossier-cover {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:18px 31% 17px 19px;
  border:1px solid #526a68;
  border-radius:10px;
  color:#f5eee1;
  background:#263f3d;
}
.dossier-cover .eyebrow { color:#e6c990; }
.political-dossier .dossier-cover h2 { margin:5px 0 6px; color:inherit; font-size:clamp(26px,4.5vw,39px); line-height:1.12; }
.political-dossier .dossier-cover p { margin:0; color:#dce5db; font-size:13px; line-height:1.45; }
.dossier-cover-art {
  position:absolute;
  z-index:-1;
  inset:0 0 0 auto;
  width:37%;
  opacity:.8;
  mask-image:linear-gradient(to right,transparent,#000 44%);
}
.dossier-stakes { margin:12px 0; padding:11px 13px; border:1px solid var(--line); border-radius:8px; background:var(--panel2); }
.dossier-people { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.dossier-people > div { display:flex; align-items:center; gap:8px; min-width:0; }
.dossier-people strong, .dossier-people small { display:block; }
.dossier-people strong { font-size:13px; line-height:1.3; }
.dossier-people small { font-size:10px; color:var(--muted); }
.dossier-portrait { flex:none; display:block; width:42px; height:42px; border-radius:6px; overflow:hidden; }
.political-dossier .dossier-stakes p { margin:9px 0 0; font-size:12px; line-height:1.55; }
.dossier-chapters { display:grid; gap:7px; list-style:none; padding:0; margin:0; }
.dossier-chapters li {
  display:grid;
  grid-template-columns:60px minmax(0,1fr);
  align-items:start;
  gap:9px;
  padding:9px 11px;
  border:1px solid var(--line);
  border-radius:7px;
}
.dossier-chapters li[data-chapter-phase=today] {
  border-color:var(--gold);
  background:color-mix(in srgb,var(--gold) 12%,var(--panel));
}
.dossier-chapters li[data-chapter-phase=signed] .dossier-stage { color:var(--green); }
.dossier-date { display:grid; justify-items:center; gap:3px; color:var(--gold); font-size:10px; }
.dossier-stage { color:var(--muted); font-size:9px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.dossier-chapters h3 { font-size:14px; line-height:1.35; margin:1px 0 2px; }
.political-dossier .dossier-chapters p { margin:0; font-size:12px; line-height:1.45; }
@media(max-width:450px) {
  .dossier-cover { padding:13px 18% 12px 12px; }
  .dossier-cover-art { width:28%; opacity:.6; }
  .dossier-portrait { width:34px; height:34px; }
  .dossier-people strong { font-size:11px; }
  .dossier-chapters li { grid-template-columns:42px minmax(0,1fr); padding:8px; }
}

/* Relationship scales fit on one line, including narrow layouts. */
.relation-legend { flex-wrap:nowrap; gap:4px; }
.relation-legend li { gap:3px; white-space:nowrap; padding-inline:4px; }
.relation-legend .relation-face { width:15px; height:15px; }
.relation-state strong { white-space:nowrap; }
@container conflicts (max-width:460px) {
  .relation-legend { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:3px; }
  .relation-legend li { display:grid; justify-items:center; align-content:center; gap:1px; padding:3px 0; border-radius:5px; font-size:9px; }
  .relation-legend small { font-size:9px; }
}
.campaign-ribbon .ribbon-alert {
  border:1px solid var(--line);
  padding:4px 6px;
  border-radius:4px;
  color:var(--text);
  background:var(--panel);
  white-space:nowrap;
}
.campaign-ribbon .ribbon-alert > span { color:var(--gold); }
.campaign-ribbon .ribbon-alert.urgent { border-color:var(--red); color:var(--red); }

.action-promises .promise-card { display:block; padding:11px 12px; }
.promise-card-meta, .promise-next, .embargo-route-head, .embargo-next {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px 10px;
  flex-wrap:wrap;
}
.promise-card-meta { font-size:10px; color:var(--muted); font-weight:650; }
.promise-due { color:var(--red); }
.action-promises h3 { margin:4px 0 0; font-size:14px; }
.action-promises .promise-card p { margin:4px 0 7px; font-size:12px; line-height:1.5; }
.promise-meter { height:4px; border-radius:4px; background:var(--line); overflow:hidden; margin:8px 0; }
.promise-meter > i { display:block; height:100%; background:var(--gold); }
.promise-meter.ready > i { background:var(--green); }
.promise-next strong { font-weight:700; font-size:12px; }
.promise-next small, .embargo-next small { display:block; font-size:10px; line-height:1.4; }
.promise-next .small-btn, .embargo-next .small-btn { min-height:33px; }
.embargo-routes { display:grid; gap:8px; }
.embargo-route { padding:12px 13px; border:1px solid var(--rel-edge); border-inline-start:3px solid var(--rel-mark); border-radius:7px; background:var(--rel-paper); color:var(--rel-ink); }
.embargo-route-head { font-size:14px; }
.action-dossier .embargo-route p { font-size:12px; margin:5px 0 8px; }
.embargo-next b { font:400 23px/1 var(--display); }

.modal-content:has(.illustrated-scenarios) .tutorial-top { margin-bottom:8px; }