/* ===============================
   UDS—Design Tokens
================================ */
:root{
  --uds-bg:#f5f7fb;
  --uds-card:#ffffff;
  --uds-text:#0f172a;
  --uds-muted:#6b7280;
  --uds-primary:#1e3a8a;
  --uds-accent:#2563eb;          /* brand accent (blue) */
  --uds-border:#e5e7eb;
  --uds-blue:#1f4ed8;

  /* Stepper tokens */
  --uds-line:#d1d5db;            /* rail gray */
  --uds-ok:#16a34a;              /* rail green (done) */
  --uds-node:20px;               /* default node size */
  --uds-node-current:22px;       /* current node size */
  --uds-rail:2px;                /* rail width */
  --uds-item-px:12px;            /* row horizontal padding */
  --uds-item-py:14px;            /* row vertical padding */
  --uds-pulse-count:5;           /* capped pulses */
}

/* ===============================
   Summary / Bubbles / Layout
================================ */
.uds-summary{
  background:#f9fbff; border:1px solid var(--uds-border);
  border-radius:14px; padding:16px 16px 6px;
  display:flex; flex-direction:column; gap:10px;
}
.uds-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.muted{color:var(--uds-muted)}

.bubble{border-radius:12px;padding:12px 14px;margin:0;font-size:15px;line-height:1.3;
  box-shadow:0 1px 2px rgba(0,0,0,.04);border:1px solid var(--uds-border)}
.bubble-tracking{background:#f0f5ff;border-color:#cfe0ff;color:#0b2a6b;font-weight:700}
.bubble-signature{background:#FFF7E6;border-color:#FDE68A;color:var(--uds-text)}
.bubble-info{background:#eef5ff;border-color:#cfe0ff;color:#0b2a6b}
.bubble-warning{background:#FFF7E6;border-color:#FDE68A;color:var(--uds-text)}
.bubble-success{background:#ecffee;border-color:#baf5c5;color:#0b5a2a}

.bubble-signature strong{display:block;margin-bottom:4px}

/* Right column event cards */
.uds-events{margin-top:8px}
.uds-event{display:grid;grid-template-columns:130px 1fr;gap:12px;padding:10px 12px;
  border:1px solid var(--uds-border);border-radius:10px;background:#fafcff;margin-bottom:8px}
.uds-when{font-weight:700;line-height:1.25}
.uds-what{margin:0;line-height:1.25}
.uds-loc{margin:2px 0 0;color:var(--uds-muted);font-size:.9rem}
@media (max-width:640px){.uds-event{grid-template-columns:1fr}}

/* Two-col layout */
.uds-row{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
@media (max-width:960px){.uds-row{grid-template-columns:1fr}}
.uds-summary,.uds-timeline{min-width:0}

/* --- Accordion (left column) --- */
.uds-summary .uds-accordion{width:100%;max-width:none;margin:0}
.uds-summary .uds-accordion details{
  display:block;width:100%;border:1px solid #e2e6ea;border-radius:12px;background:#fff;box-sizing:border-box}
.uds-summary .uds-accordion summary{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:12px 14px;cursor:pointer;list-style:none;font-weight:700;color:#005fa3;box-sizing:border-box}
.uds-summary .uds-accordion summary::-webkit-details-marker{display:none}
.uds-summary .uds-accordion summary::after{content:"▸";transition:transform .15s ease-in-out}
.uds-summary .uds-accordion details[open] summary::after{transform:rotate(90deg)}
.uds-summary .uds-accordion .uds-facts{margin:0;padding:10px 18px 14px 28px;line-height:1.35}
.uds-summary .uds-accordion,
.uds-summary .uds-accordion summary,
.uds-summary .uds-accordion .uds-facts,
.uds-summary .uds-accordion .uds-facts li{font-size:15px;line-height:1.3}

/* ===============================
   Vertical Stepper
   (scoped under .uds-timeline)
================================ */
.uds-timeline{color:#1f2937}
.uds-vstepper, .uds-vstepper *{box-sizing:border-box;font:inherit;color:inherit}

/* list & row */
.uds-vstepper__list{margin:0;padding:0;list-style:none}
.uds-vstepper__item{
  position:relative;display:flex;align-items:center;gap:12px;
  padding:var(--uds-item-py) var(--uds-item-px);
}

/* ---- Rail (always present) ---- */
/* Base gray rail through each row */
.uds-vstepper__item::before{
  content:""; position:absolute; z-index:0;
  left: calc(var(--uds-item-px) + var(--uds-node)/2 - var(--uds-rail)/2);
  width: var(--uds-rail); top:0; bottom:0; background:var(--uds-line);
}
/* Trim ends so the rail starts/ends at dot centers */
.uds-vstepper__item:first-child::before{ top:50%; }
.uds-vstepper__item:last-child::before{ bottom:50%; }

/* Done rows paint their whole segment green */
.uds-vstepper__item.is-done::before{ background:var(--uds-ok); }

/* Current row overlays green from the dot center downward only */
.uds-vstepper__item.is-current::after{
  content:""; position:absolute; z-index:0;
  left: calc(var(--uds-item-px) + var(--uds-node)/2 - var(--uds-rail)/2);
  width: var(--uds-rail); bottom:0; top:calc(50% + var(--uds-rail)/2);
  background:var(--uds-ok);
}

/* ---- Node ---- */
.uds-vstepper__node{
  position:relative; z-index:1; /* above rail */
  width:var(--uds-node); height:var(--uds-node); flex:0 0 var(--uds-node);
  border-radius:50%; background:#fff; border:2px solid var(--uds-line);
}
.uds-vstepper__check{
  display:none; position:absolute; width:12px; height:12px; top:2px; left:2px; fill:#fff;
}

/* Node states */
.uds-vstepper__item.is-done .uds-vstepper__node{
  background:var(--uds-ok); border-color:var(--uds-ok);
}
.uds-vstepper__item.is-done .uds-vstepper__check{display:block}
.uds-vstepper__item.is-todo .uds-vstepper__node{
  background:#fff; border-color:var(--uds-line);
}
.uds-vstepper__item.is-current .uds-vstepper__node{
  width:var(--uds-node-current); height:var(--uds-node-current);
  flex:0 0 var(--uds-node-current); border-radius:50%;
  background:#fff; border:3px solid var(--uds-accent);
  box-shadow:0 0 0 4px rgba(14,165,233,.15); /* static halo */
}
.uds-vstepper__item.is-current .uds-vstepper__node::before{
  content:""; position:absolute; inset:5px; border-radius:50%; background:var(--uds-accent);
}

/* ---- Content ---- */
.uds-vstepper__content{flex:1;min-width:0}
.uds-vstepper__title{font-weight:700;line-height:1.2}
.uds-vstepper__meta{margin-top:2px;font-size:12px;color:var(--uds-muted)}
.uds-vstepper__chip{
  display:inline-block;margin-top:6px;font-size:12px;line-height:1.2;
  padding:4px 8px;border-radius:999px;background:#fff3cd;border:1px solid #f0d98c;color:#6b5d00;font-weight:600
}

/* Current row highlight (no left blue bar) */
.uds-vstepper__item.is-current .uds-vstepper__content{
  background:#f5faff;border:1px solid #dbeafe;border-radius:10px;padding:10px 12px;
}
.uds-vstepper__item.is-current .uds-vstepper__title{font-weight:800}
.uds-vstepper__item.is-current .uds-vstepper__title::after{
  content:"NOW"; margin-left:.5rem; font-size:11px; line-height:1;
  padding:3px 6px; border-radius:999px; background:#e0f2fe; border:1px solid #bae6fd;
  color:#075985; font-weight:700;
}

/* ---- Pulse (capped) ---- */
@media (prefers-reduced-motion:no-preference){
  .uds-vstepper__item.is-current .uds-vstepper__node::after{
    content:""; position:absolute; inset:-6px; border-radius:50%;
    box-shadow:0 0 0 0 rgba(14,165,233,.35);
    animation:uds-pulse 1.9s ease-out 0s var(--uds-pulse-count);
    pointer-events:none;
  }
  @keyframes uds-pulse{
    0%{box-shadow:0 0 0 0 rgba(14,165,233,.35)}
    70%{box-shadow:0 0 0 12px rgba(14,165,233,0)}
    100%{box-shadow:0 0 0 0 rgba(14,165,233,0)}
  }
}
@media (prefers-reduced-motion:reduce){
  .uds-vstepper__item.is-current .uds-vstepper__node::after{animation:none!important}
}

/* ===============================
   Pills / Headers (optional)
================================ */
.uds-progress-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.uds-progress-head .title{font-weight:800}
.uds-pill{display:inline-block;padding:4px 10px;border-radius:999px;font-weight:700;font-size:12px;background:#eef2ff}
.uds-pill.warn{background:#fff7ed}
.uds-pill.good{background:#ecfdf5}

/* ===============================
   Alerts
================================ */
.uds-alert{
  display:grid;grid-template-columns:1fr 220px;gap:16px;background:#ffeef0;border:1px solid #ffcfd4;
  border-radius:14px;padding:18px;color:var(--uds-text);box-shadow:0 1px 2px rgba(0,0,0,.04)
}
.uds-alert h2{margin:0;font-size:1.6rem;font-weight:800;letter-spacing:.2px;color:#B91C1C}
.uds-alert p{margin:0;line-height:1.45}
.uds-alert ul{margin:8px 0 0;padding-left:18px}
.uds-alert li{margin:2px 0}
.uds-alert .alert-art{display:flex;align-items:center;justify-content:flex-end}
.uds-alert .alert-art img{max-width:200px;height:auto;display:block}
@media (max-width:760px){
  .uds-alert{grid-template-columns:1fr}
  .uds-alert .alert-art{justify-content:center}
}

/* ===== Results wrapper (encloses left + right) ===== */
.uds-results{
  border:1px solid var(--uds-border);
  border-radius:14px;
  background:#fff;
  overflow:hidden;                 /* keeps header/body corners clean */
}

/* Top bar that says “Results” */
.uds-results__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px;
  background:#f9fbff;
  border-bottom:1px solid var(--uds-border);
}
.uds-results__title{ font-weight:800; color:var(--uds-text); }
.uds-results__meta{ color:var(--uds-muted); font-weight:600; }

/* Body area that holds the grid */
.uds-results__body{ padding:16px; }

/* When summary lives inside the results card, neutralize its own card styles */
.uds-results .uds-summary{
  border:0; background:transparent; padding:0;
}

/* Optional: nudge spacing so the two columns line up nicely */
.uds-results .uds-timeline{ margin-top:2px; }