/* EIES Edition — Policy Briefing UI v0.3
   Full replacement: palette, buttons, radio tiles, spacing, bars, health, depth, mitigation cards
*/

/* ---------- Palette / Tokens ---------- */
:root {
  --md-surface: #0c1016;                 /* page background surface */
  --md-panel: rgba(20, 24, 30, 0.85);    /* card glass panel */
  --md-on: #e5ebf5;                      /* primary text */
  --md-outline: #2a3a46;                 /* borders/dividers */

  --md-primary: #28e1d9;                 /* cyan-teal accent */
  --md-secondary: #f5a623;               /* amber accent (warnings) */

  --ok: #34d399;
  --warn: var(--md-secondary);
  --bad: #ef4444;

  --glow-primary: 0 0 12px rgba(40,225,217,0.45);
  --glow-warn: 0 0 10px rgba(245,166,35,0.35);
}

/* ---------- Base Layout ---------- */
body {
  background: radial-gradient(circle at 50% 30%, #121820 0%, #06080b 80%);
  font-family: "Inter", "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--md-on);
}
.pg-container { max-width: 1080px; margin: 0 auto; padding: 32px 24px; }

/* Card (glass + depth) */
.pg-card {
  position: relative;                     /* required for depth overlay */
  background: var(--md-panel);
  backdrop-filter: blur(12px);
  border: 1px solid var(--md-outline);
  border-radius: 18px;
  padding: 36px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.35);
  animation: fadeIn 0.4s ease-out both;
}
.pg-card::before {                        /* subtle inner glow for depth */
  content:'';
  position:absolute; inset:0;
  border-radius:18px;
  pointer-events:none;
  box-shadow: 0 0 80px rgba(40,225,217,0.05) inset;
}

@keyframes fadeIn { from {opacity:0; transform:translateY(10px);} to {opacity:1; transform:none;} }

.pg-title { font-weight: 700; font-size: 22px; margin-bottom: 10px; letter-spacing: .3px; }
.pg-subtitle { opacity: .9; margin-bottom: 16px; font-size: 0.95rem; }
.pg-body { margin-top: 22px; line-height: 1.55; }

/* Field + Section spacing */
.md-field { margin-bottom: 20px; }
.md-section-title {
  font-weight: 600; margin-top: 16px; margin-bottom: 8px;
  font-size: 0.95rem; opacity: 0.9;
}
.pg-actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Buttons (primary / secondary) ---------- */
.md-btn {
  background: var(--md-primary);
  color: #041414;
  font-weight: 600;
  letter-spacing: 0.4px;
  padding: 13px 26px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
  transition: all 0.25s ease;
}
.md-btn:hover { transform: translateY(-1px); box-shadow: var(--glow-primary); }
.md-btn:active { transform: scale(0.98); opacity: 0.95; }

.md-btn.secondary {
  background: transparent;
  color: var(--md-on);
  border: 2px solid var(--md-outline);
}
.md-btn.secondary:hover { border-color: var(--md-secondary); box-shadow: var(--glow-warn); }

/* ---------- Radio / Option Tiles (modern cards) ---------- */
.md-group {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
}
.md-group input[type="radio"] { display: none; }

.md-group label {
  position: relative;
  flex: 1 1 30%;
  min-width: 180px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--md-outline);
  border-radius: 12px;
  padding: 12px 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
}
.md-group label:hover { background: rgba(255,255,255,0.08); transform: translateY(-1px); }

.md-group label span {
  display: block; font-size: 0.95rem; color: var(--md-on); font-weight: 500;
}

/* highlight checked tile (structure: <label><input ...><span>Label</span></label>) */
.md-group label input[type="radio"]:checked + span {
  color: var(--md-primary);
  font-weight: 700;
  text-shadow: 0 0 6px rgba(40,225,217,0.25);
  letter-spacing: .2px;
}
.md-input {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--md-outline);
  border-radius: 10px;
  color: var(--md-on);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.md-input:focus { border-color: var(--md-primary); box-shadow: var(--glow-primary); }

/* ---------- Chips / Badges ---------- */
.pg-badges { margin: 10px 0 8px; display:flex; gap:10px; flex-wrap:wrap; }
.pg-badge, .pg-chip {
  display: inline-block;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--md-outline);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.85rem;
}
.pg-badge { color: var(--md-on); }
.pg-chip { color: var(--md-secondary); }

/* ---------- Narrative Panels ---------- */
.pg-narrative {
  margin: 16px 0;
  padding: 16px 20px;
  border: 1px solid var(--md-outline);
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
}
.pg-narrative h2 { margin: 0 0 8px; color: var(--md-primary); font-size: 1.05rem; }

/* ---------- Stat Bars ---------- */
.pg-stats { display: grid; grid-template-columns: 1fr; gap: 14px; }
.pg-stat { display:flex; flex-direction:column; }
.pg-stat__row { display:flex; justify-content:space-between; align-items:baseline; }
.pg-bar {
  height: 10px; border-radius: 6px;
  background: #1a242d; border: 1px solid #24323d;
  overflow: hidden;
}
.pg-bar__fill {
  height: 100%;
  background: linear-gradient(90deg,var(--md-primary),#6df4ee);
  width: 0%;
  transition: width .35s ease;
}
.pg-delta { font-size: 12px; margin-left: 8px; }
.pg-delta.pos { color: var(--ok); }
.pg-delta.neg { color: var(--bad); }

/* ---------- Resilience Health Meter ---------- */
.pg-health { margin: 10px 0 22px; }
.pg-health__label {
  display: flex; justify-content: space-between; margin-bottom: 6px; opacity: .9;
  font-size: 0.9rem; letter-spacing: .2px;
}
.pg-health__bar {
  height: 14px; border-radius: 10px;
  background: #1a242d; border: 1px solid #24323d; overflow: hidden;
}
.pg-health__fill {
  height: 100%;
  background: linear-gradient(90deg,#ef4444,#f5a623,#28e1d9);
  width: 70%;
  transition: width .4s ease;
}

/* ---------- Snackbar ---------- */
.pg-snackbar {
  position: fixed; left: 50%; bottom: 24px;
  transform: translateX(-50%);
  background: #0a0f14;
  color: #fff;
  padding: 10px 16px;
  border-radius: 30px;
  opacity: 0; transition: opacity .2s;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.pg-snackbar.show { opacity: 1; }

/* ---------- Utility Animations ---------- */
.pg-card .fade-in { animation: softFade .25s ease-out both; }
@keyframes softFade { from {opacity:0; transform:translateY(6px);} to {opacity:1; transform:none;} }

/* ===================================================================== */
/*                         Mitigation Choice Cards                        */
/* ===================================================================== */

.pg-list {
  list-style: none;
  padding: 0;
  margin: 18px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pg-list li {
  position: relative;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--md-outline);
  border-radius: 12px;
  padding: 14px 18px;
  color: var(--md-on);
  transition: all 0.25s ease;
  cursor: pointer;
  line-height: 1.45;
}

/* hide default radio */
.pg-list input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Label text styling */
.pg-list label {
  display: block;
  color: var(--md-on);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
}
.pg-list label b {
  color: var(--md-primary);
  font-weight: 600;
}
.pg-list label small {
  display: block;
  opacity: 0.9;
  color: var(--md-on);
  font-size: 0.9rem;
  margin-top: 2px;
}

/* Hover state */
.pg-list li:hover {
  border-color: var(--md-primary);
  background: rgba(40,225,217,0.06);
  transform: translateY(-1px);
  box-shadow: 0 0 10px rgba(40,225,217,0.15);
}

/* Selected state (glowing card) — :has() for modern browsers */
.pg-list li:has(input[type="radio"]:checked) {
  border-color: var(--md-primary);
  background: rgba(40,225,217,0.08);
  box-shadow: 0 0 18px rgba(40,225,217,0.25);
  transform: translateY(-1px);
}

/* Fallback for browsers without :has() */
.pg-list input[type="radio"]:checked + label {
  border-color: var(--md-primary);
  background: rgba(40,225,217,0.08);
  box-shadow: 0 0 18px rgba(40,225,217,0.25);
}

/* Pulse on select (subtle game-feel) */
@keyframes pulseSelect {
  0% { box-shadow: 0 0 0 0 rgba(40,225,217,0.35); }
  70% { box-shadow: 0 0 0 12px rgba(40,225,217,0); }
  100% { box-shadow: 0 0 0 0 rgba(40,225,217,0); }
}
.pg-list li:has(input[type="radio"]:checked),
.pg-list input[type="radio"]:checked + label {
  animation: pulseSelect 1.5s ease-out;
}

/* Ensure readable text everywhere */
.pg-card,
.pg-list li,
.pg-list label,
.pg-list small {
  color: var(--md-on);
}

/* ================= Facilitator Dock & Timer ================= */
.fac-dock {
  position: sticky;
  top: 12px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  z-index: 10;
  margin-bottom: 8px;
}
.fac-row { display: flex; flex-wrap: wrap; gap: 8px; }
.fac-btn { padding: 8px 14px; border-radius: 28px; font-size: .9rem; }

.timer { position: relative; width: 124px; height: 124px; }
.ring { transform: rotate(-90deg); }
.ring__bg  { fill: none; stroke: #1a242d; stroke-width: 10; }
.ring__fill{ fill: none; stroke: var(--md-primary); stroke-width: 10; stroke-linecap: round; transition: stroke .2s ease; }
.ring__label {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-weight: 700; letter-spacing:.4px;
}
#eies-timer.warn  .ring__fill { stroke: var(--warn); }
#eies-timer.crit  .ring__fill { stroke: var(--bad); }

/* ========== Video Lightbox ========== */
.eies-lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.8);
  display: none; align-items: center; justify-content: center;
}
.eies-lightbox.is-open { display: flex; }
.eies-lightbox__inner {
  width: min(90vw, 1080px);
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--md-outline);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  position: relative;
}
.eies-lightbox__close {
  position: absolute; top: -44px; right: 0;
  background: var(--md-primary);
  color: #041414;
  border: none;
  border-radius: 24px;
  padding: 8px 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--glow-primary);
}
.eies-playbtn {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--md-on);
  border: 2px solid var(--md-primary);
  border-radius: 50px;
  padding: 10px 16px;
  font-weight: 600; letter-spacing: .3px;
  cursor: pointer; transition: all .2s ease;
}
.eies-playbtn:hover { box-shadow: var(--glow-primary); transform: translateY(-1px); }
.eies-playbtn svg { width: 18px; height: 18px; fill: var(--md-primary); }