:root {
  /* Amplis brand tokens (pulled from amplis.co) */
  --navy: 212 100% 14%;       /* primary  #002147 */
  --navy-700: 212 70% 22%;
  --gold: 45 84% 77%;         /* accent   #f6dd93 */
  --gold-deep: 42 70% 60%;

  --bg: 210 40% 98%;
  --surface: 0 0% 100%;
  --surface-2: 210 40% 96%;
  --border: 214 25% 88%;
  --text: 212 45% 16%;
  --text-soft: 214 16% 42%;
  --shadow-card: 0 4px 20px -8px hsl(212 60% 20% / .18);

  --ok: 145 55% 38%;
  --warn: 38 88% 48%;
  --muted: 214 12% 55%;

  --radius: 14px;
  --maxw: 1080px;
}

[data-theme="dark"] {
  --bg: 213 45% 8%;
  --surface: 213 38% 12%;
  --surface-2: 213 32% 16%;
  --border: 213 28% 22%;
  --text: 210 40% 94%;
  --text-soft: 214 18% 68%;
  --shadow-card: 0 8px 28px -10px hsl(0 0% 0% / .55);
  --navy: 45 84% 77%;         /* in dark, headings use gold */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Poppins", system-ui, sans-serif;
  background: hsl(var(--bg));
  color: hsl(var(--text));
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px clamp(16px, 4vw, 40px);
  background: hsl(var(--navy) / 1);
  background: linear-gradient(100deg, hsl(212 100% 14%), hsl(212 80% 20%));
  color: #fff;
  box-shadow: 0 2px 16px -6px hsl(212 80% 10% / .6);
}
[data-theme="dark"] .topbar { background: linear-gradient(100deg, hsl(213 50% 10%), hsl(213 45% 14%)); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 20px; color: hsl(212 100% 14%);
  background: hsl(var(--gold)); font-family: "Crimson Pro", serif;
  box-shadow: 0 2px 10px -2px hsl(45 84% 50% / .5);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-weight: 600; font-size: 17px; letter-spacing: .2px; }
.brand-sub { font-size: 12px; opacity: .75; letter-spacing: .3px; }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.snapshot { font-size: 12.5px; opacity: .8; }
.theme-toggle {
  background: hsl(0 0% 100% / .12); border: 1px solid hsl(0 0% 100% / .2);
  color: #fff; width: 36px; height: 36px; border-radius: 9px; cursor: pointer;
  font-size: 16px; transition: background .15s;
}
.theme-toggle:hover { background: hsl(0 0% 100% / .22); }

/* ---------- layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px) 80px; }
.hero { padding: 36px 0 18px; }
.hero-title {
  font-family: "Crimson Pro", serif; font-weight: 600;
  font-size: clamp(28px, 4vw, 40px); margin: 0 0 6px;
  color: hsl(var(--navy)); letter-spacing: .2px;
}
.hero-sub { margin: 0; color: hsl(var(--text-soft)); max-width: 70ch; font-size: 14.5px; }

/* ---------- stat cards ---------- */
.stats {
  display: grid; gap: 14px; margin: 22px 0 8px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.stat {
  background: hsl(var(--surface)); border: 1px solid hsl(var(--border));
  border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-card);
}
.stat .n { font-size: 28px; font-weight: 700; color: hsl(var(--navy)); font-family: "Crimson Pro", serif; }
.stat .l { font-size: 12.5px; color: hsl(var(--text-soft)); text-transform: uppercase; letter-spacing: .5px; }
.stat .accent { color: hsl(var(--gold-deep)); }

/* ---------- controls ---------- */
.controls { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 18px; align-items: center; }
.search {
  flex: 1 1 280px; min-width: 0; padding: 11px 14px; border-radius: 10px;
  border: 1px solid hsl(var(--border)); background: hsl(var(--surface));
  color: hsl(var(--text)); font: inherit; font-size: 14px;
}
.search:focus { outline: 2px solid hsl(var(--gold) / .7); border-color: transparent; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; }
.sel {
  padding: 10px 12px; border-radius: 10px; border: 1px solid hsl(var(--border));
  background: hsl(var(--surface)); color: hsl(var(--text)); font: inherit; font-size: 13.5px; cursor: pointer;
}

/* ---------- initiative card ---------- */
.initiative {
  background: hsl(var(--surface)); border: 1px solid hsl(var(--border));
  border-radius: var(--radius); margin-bottom: 18px; overflow: hidden;
  box-shadow: var(--shadow-card);
}
.init-head { padding: 18px 20px 14px; border-bottom: 1px solid hsl(var(--border)); }
.init-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.init-name { font-family: "Crimson Pro", serif; font-weight: 600; font-size: 21px; color: hsl(var(--navy)); margin: 0; }
.owner-badge {
  font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  background: hsl(var(--gold) / .35); color: hsl(212 100% 18%); border: 1px solid hsl(var(--gold-deep) / .4);
}
[data-theme="dark"] .owner-badge { color: hsl(45 84% 80%); background: hsl(45 60% 30% / .25); }
.spacer { flex: 1; }
.clay-link {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  font-size: 13px; font-weight: 500; padding: 7px 13px; border-radius: 9px;
  background: hsl(var(--navy) / 1); color: #fff; transition: transform .12s, filter .12s;
  background: linear-gradient(100deg, hsl(212 100% 14%), hsl(212 75% 24%));
}
[data-theme="dark"] .clay-link { background: hsl(var(--gold)); color: hsl(212 100% 12%); }
.clay-link:hover { transform: translateY(-1px); filter: brightness(1.08); }
.clay-link.disabled { background: hsl(var(--surface-2)); color: hsl(var(--muted)); pointer-events: none; border: 1px dashed hsl(var(--border)); }
.angle { margin: 12px 0 0; font-size: 14px; color: hsl(var(--text-soft)); }
.angle b { color: hsl(var(--gold-deep)); font-weight: 600; }
.status-note { margin-top: 8px; font-size: 12.5px; color: hsl(var(--warn)); font-style: italic; }

/* ---------- campaign rows ---------- */
.camp { border-top: 1px solid hsl(var(--border)); }
.camp:first-child { border-top: none; }
.camp-row {
  display: flex; align-items: center; gap: 12px; padding: 14px 20px; cursor: pointer;
  flex-wrap: wrap; transition: background .12s;
}
.camp-row:hover { background: hsl(var(--surface-2)); }
.caret { color: hsl(var(--muted)); transition: transform .18s; font-size: 12px; }
.camp.open .caret { transform: rotate(90deg); }
.camp-name { font-weight: 500; font-size: 14.5px; flex: 1 1 240px; min-width: 0; }
.camp-name .sub { display: block; font-size: 12px; color: hsl(var(--text-soft)); font-weight: 400; }

.chip { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.chip.type { background: hsl(var(--surface-2)); color: hsl(var(--text-soft)); border: 1px solid hsl(var(--border)); }
.chip.st-Active { background: hsl(var(--ok) / .15); color: hsl(var(--ok)); }
.chip.st-Paused { background: hsl(var(--warn) / .16); color: hsl(38 80% 38%); }
.chip.st-Finished { background: hsl(var(--muted) / .18); color: hsl(var(--muted)); }

/* progress bar */
.prog { flex: 0 0 150px; }
.prog-bar { height: 7px; border-radius: 99px; background: hsl(var(--surface-2)); overflow: hidden; display: flex; }
.prog-bar i { display: block; height: 100%; }
.prog-bar .done { background: hsl(var(--ok)); }
.prog-bar .live { background: hsl(var(--gold-deep)); }
.prog-meta { font-size: 11px; color: hsl(var(--text-soft)); margin-top: 4px; }

/* ---------- expanded sequence ---------- */
.seq { display: none; padding: 4px 20px 20px 44px; background: hsl(var(--surface-2) / .5); }
.camp.open .seq { display: block; }
.seq-meta { font-size: 12.5px; color: hsl(var(--text-soft)); margin: 10px 0 14px; }
.seq-meta a { color: hsl(var(--gold-deep)); }
.phase-group { margin-bottom: 12px; }
.phase-title {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  color: hsl(var(--gold-deep)); margin: 6px 0;
}
.step { display: flex; gap: 12px; padding: 8px 0; border-top: 1px dashed hsl(var(--border)); }
.step:first-child { border-top: none; }
.step-when {
  flex: 0 0 92px; font-size: 12px; font-weight: 600; color: hsl(var(--navy));
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .step-when { color: hsl(45 70% 78%); }
.step-body { flex: 1; min-width: 0; }
.step-type { font-size: 13px; font-weight: 600; }
.step-type .ico { margin-right: 6px; }
.step-msg {
  margin-top: 5px; font-size: 13.5px; white-space: pre-wrap; color: hsl(var(--text));
  background: hsl(var(--surface)); border: 1px solid hsl(var(--border));
  border-left: 3px solid hsl(var(--gold)); border-radius: 8px; padding: 9px 12px;
  font-family: "Crimson Pro", Georgia, serif; line-height: 1.5;
}
.step-note { margin-top: 4px; font-size: 12.5px; color: hsl(var(--muted)); font-style: italic; }

.empty { padding: 40px; text-align: center; color: hsl(var(--text-soft)); }
.foot { margin-top: 30px; text-align: center; font-size: 12px; color: hsl(var(--muted)); }

@media (max-width: 640px) {
  .prog { flex-basis: 100%; }
  .step-when { flex-basis: 70px; }
}