/* ── Reset & Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --primary:    #1a56db;
  --primary-dk: #1541a8;
  --danger:     #e02424;
  --warning:    #c27803;
  --success:    #057a55;
  --bg:         #f9fafb;
  --surface:    #ffffff;
  --border:     #e5e7eb;
  --text:       #111827;
  --text-muted: #6b7280;
  --font:       -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* ── Liquid-glass theme tokens ───────────────────────────────────────── */
  /* Frosted panels float over the atmospheric canvas below. Translucency is
     tuned so the soft background bleeds through just enough to read as glass. */
  --glass-bg:        rgba(255, 255, 255, 0.55);
  --glass-strong:    rgba(255, 255, 255, 0.68);
  --glass-border:    rgba(255, 255, 255, 0.70);
  --glass-shadow:    0 20px 60px rgba(30, 51, 84, 0.16);
  --glass-shadow-sm: 0 10px 34px rgba(30, 51, 84, 0.10);
  --glass-blur:      blur(30px) saturate(180%);
  /* inset top highlight that gives glass its "lit edge" */
  --glass-edge:      inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --radius:          20px;

  /* Hackney status colours (match Working Sheet spec) */
  --hl-yellow:     #fef9c3;
  --hl-orange:     #ffedd5;
  --hl-red:        #fee2e2;
  --hl-blue:       #dbeafe;
  --hl-green:      #dcfce7;
}

body {
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
  /* Atmospheric monochrome canvas — soft cool "cloud" blooms in one blue-grey
     hue family (no multi-colour), so the frosted panels have depth to lift off.
     This is what gives the glass its Wirely-style airy, misted look. */
  background:
    radial-gradient(820px 580px at 84% -8%,  rgba(120, 156, 202, 0.45), transparent 58%),
    radial-gradient(720px 540px at 6% 2%,    rgba(150, 178, 210, 0.40), transparent 56%),
    radial-gradient(1050px 780px at 58% 112%, rgba(96, 136, 188, 0.34), transparent 60%),
    radial-gradient(600px 460px at 30% 48%,  rgba(174, 194, 220, 0.28), transparent 62%),
    linear-gradient(180deg, #e4eaf3 0%, #d6dfec 48%, #cbd6e6 100%);
  background-attachment: fixed;
  line-height: 1.5;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Layout ───────────────────────────────────────────────────────────────── */
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 220px;
  flex-shrink: 0;
  position: relative;
  /* Professional dark-slate rail — solid, calm, high-contrast. */
  background: linear-gradient(180deg, #0f1b2e 0%, #17233a 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 2px 0 22px rgba(15, 23, 42, 0.10);
  color: #c7d2de;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.sidebar .brand {
  padding: 18px 16px 15px;
  display: flex;
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.sidebar .brand .brand-mark {
  flex-shrink: 0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.35);
}
.sidebar .brand .brand-name {
  font-size: 14.5px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.15;
  letter-spacing: 0.1px;
}
.sidebar .brand .brand-ver {
  font-size: 10px;
  font-weight: 400;
  color: #7d8da2;
  margin-top: 2px;
}

.sidebar nav { flex: 1; padding: 10px 8px; overflow-y: auto; }

/* Small section heading that groups the nav links (Packages / Tools / Setup…). */
.sidebar nav .nav-group {
  margin: 14px 0 4px;
  padding: 0 13px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8e9ab8;
}
.sidebar nav .nav-group:first-child { margin-top: 4px; }

.sidebar nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 2px 0;
  padding: 9px 13px;
  border-radius: 10px;
  color: #eaeefb;
  font-size: 13.5px;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.sidebar nav a .ico { flex: 0 0 18px; opacity: 0.9; }
.sidebar nav a.active .ico { opacity: 1; }
.ico { display: inline-block; vertical-align: middle; }

.sidebar nav a:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  text-decoration: none;
}

.sidebar nav a.active {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 4px 14px rgba(31, 41, 55, 0.18);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.sidebar .sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.20);
  font-size: 12px;
  color: #dbe3f5;
}

.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.topbar {
  background: rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  padding: 14px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  position: sticky;
  top: 0;
  z-index: 20;
}

.content { flex: 1; padding: 32px 32px; overflow-y: auto; display: flex; flex-direction: column; }
.content > .app-footer { margin-top: auto; }

/* ── Typography ───────────────────────────────────────────────────────────── */
h1 { font-size: 30px; font-weight: 400; letter-spacing: -0.02em; margin-bottom: 4px; }
h2 { font-size: 18px; font-weight: 600; margin-bottom: 16px; }
h3 { font-size: 14px; font-weight: 600; margin-bottom: 8px; }

.page-title {
  margin-bottom: 20px;
}

.page-title p {
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 2px;
}

/* ── Cards ────────────────────────────────────────────────────────────────── */
.card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow-sm), var(--glass-edge);
  padding: 24px 26px;
  margin-bottom: 18px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 18px;
  margin-bottom: 26px;
}

.stat-card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow-sm), var(--glass-edge);
  padding: 22px 24px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--glass-shadow), var(--glass-edge); }

.stat-card .stat-label { font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
/* Thin, oversized hero number — the Wirely signature. */
.stat-card .stat-value { font-size: 38px; font-weight: 300; letter-spacing: -0.02em; margin-top: 8px; line-height: 1.05; }
.stat-card .stat-value.danger { color: var(--danger); }
.stat-card .stat-value.warning { color: var(--warning); }
.stat-card .stat-value.success { color: var(--success); }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s, border-color 0.15s, filter 0.15s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: linear-gradient(135deg, #5b8def, #1a56db);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 6px 16px rgba(26, 86, 219, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.btn-primary:hover { filter: brightness(1.06); color: #fff; text-decoration: none;
  box-shadow: 0 10px 22px rgba(26, 86, 219, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.4); }

.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: var(--bg); text-decoration: none; }

.btn-danger {
  background: linear-gradient(135deg, #f0635f, #e02424);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 6px 16px rgba(224, 36, 36, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn-danger:hover { filter: brightness(1.06); color: #fff; text-decoration: none; }

.btn-sm { padding: 6px 15px; font-size: 12px; border-radius: 999px; }

/* ── Forms ────────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 4px; }

.form-control {
  width: 100%;
  padding: 9px 13px;
  border: 1px solid var(--border);
  border-radius: 11px;
  font-size: 13px;
  font-family: var(--font);
  background: rgba(255, 255, 255, 0.7);
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(26, 86, 219, 0.15);
}

.form-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }

/* ── Tables ───────────────────────────────────────────────────────────────── */
.table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow-sm), var(--glass-edge);
}

table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  background: rgba(255, 255, 255, 0.42);
  padding: 11px 14px;
  text-align: left;
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}
tbody td { padding: 12px 14px; border-bottom: 1px solid rgba(203, 213, 225, 0.45); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: rgba(255, 255, 255, 0.42); }

/* ── Badges ───────────────────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11.5px;
  font-weight: 500;
}

.badge-ok      { background: #dcfce7; color: #166534; }
.badge-warning { background: var(--hl-orange); color: #9a3412; }
.badge-danger  { background: var(--hl-red); color: #991b1b; }
.badge-info    { background: var(--hl-blue); color: #1e40af; }
.badge-pending { background: #ede9fe; color: #5b21b6; }
.badge-muted   { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }

/* ── Alerts ───────────────────────────────────────────────────────────────── */
.alert {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 16px;
  border-left: 3px solid;
}

.alert-error   { background: var(--hl-red);    border-color: var(--danger);  color: #7f1d1d; }
.alert-warning { background: var(--hl-orange); border-color: var(--warning); color: #78350f; }
.alert-success { background: #dcfce7;          border-color: var(--success); color: #14532d; }
.alert-info    { background: var(--hl-blue);   border-color: var(--primary); color: #1e3a8a; }

/* ── Auth page ────────────────────────────────────────────────────────────── */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.auth-box {
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow), var(--glass-edge);
  padding: 40px 44px;
  width: 100%;
  max-width: 400px;
}

.auth-box h1 { text-align: center; margin-bottom: 4px; }
.auth-box .subtitle { text-align: center; color: var(--text-muted); font-size: 13px; margin-bottom: 24px; }

/* ── Utilities ────────────────────────────────────────────────────────────── */
.flex { display: flex; }
.flex-center { display: flex; align-items: center; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-16 { margin-bottom: 16px; }
.text-muted { color: var(--text-muted); }
.text-sm { font-size: 12px; }
.text-right { text-align: right; }
.w-full { width: 100%; }

/* ── Login form submit button ──────────────────────────────────────────────── */
.auth-box .btn-primary { width: 100%; justify-content: center; padding: 9px; font-size: 14px; }

/* ── Glassy secondary buttons ───────────────────────────────────────────────── */
.btn-secondary {
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  border-color: var(--glass-border);
}

/* ── App footer (every page) ────────────────────────────────────────────────── */
.app-footer {
  margin-top: 28px;
  padding: 14px 4px 4px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  border-top: 1px solid var(--glass-border);
}
.app-footer strong { color: var(--text); font-weight: 700; }

/* ── Flow diagram (clickable circles → pages) ───────────────────────────────── */
.flow-lane {
  margin: 0 0 18px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.30);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-sm), var(--glass-edge);
}
.flow-lane h3 { margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.flow-lane h3::before {
  content: "";
  width: 10px; height: 10px; border-radius: 50%;
  background: linear-gradient(135deg, #60a5fa, #a855f7);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.18);
}
.flow-track {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 6px;
}
.flow-node {
  flex: 1 1 168px;
  min-width: 168px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 16px 14px;
  border-radius: 16px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-sm), var(--glass-edge);
  color: var(--text);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.flow-node:hover {
  transform: translateY(-3px);
  box-shadow: var(--glass-shadow);
  border-color: var(--primary);
  text-decoration: none;
}
.flow-badge {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  color: #fff;
  background: linear-gradient(135deg, #60a5fa, #1a56db);
  box-shadow: 0 6px 16px rgba(26, 86, 219, 0.35), inset 0 1px 1px rgba(255,255,255,0.5);
}
/* A step that is documented but NOT built yet: dimmed, flat, not clickable, so
   it reads as "coming" rather than as a button that does nothing when pressed. */
.flow-node.is-todo {
  cursor: default;
  opacity: 0.55;
  background: repeating-linear-gradient(
    -45deg, rgba(148,163,184,0.10) 0 8px, rgba(148,163,184,0.03) 8px 16px);
  border-style: dashed;
  box-shadow: none;
}
.flow-node.is-todo:hover { transform: none; box-shadow: none; border-color: var(--border); }
.flow-node.is-todo .flow-badge {
  background: #94a3b8;
  box-shadow: none;
}
.flow-node.is-todo .flow-substep { color: #64748b; border-color: #94a3b8; }
.flow-todo-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff;
  background: #94a3b8;
  border-radius: 9px;
  padding: 1px 7px;
}

/* The N.M sub-step number, as a small pill on the corner of the circle. */
.flow-substep {
  position: absolute;
  top: -6px; right: -10px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #fff;
  color: var(--primary);
  border: 1.5px solid var(--primary);
  font-size: 10.5px; font-weight: 800; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 5px rgba(31,41,55,0.18);
}
/* Same number echoed before the title (belt and braces for small screens). */
.flow-substep-inline {
  color: var(--primary);
  font-weight: 800;
}
.flow-node .flow-title { font-weight: 700; font-size: 13px; }
.flow-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 11.5px;
  color: var(--text-muted);
  text-align: left;
  line-height: 1.45;
}
.flow-steps li { padding-left: 13px; position: relative; }
.flow-steps li::before { content: "›"; position: absolute; left: 2px; color: var(--primary); }
.flow-arrow {
  align-self: center;
  font-size: 20px;
  color: var(--primary);
  flex: 0 0 auto;
  opacity: 0.7;
}
@media (max-width: 760px) {
  .flow-arrow { transform: rotate(90deg); }
}

/* ── Deep-link to the upload box (flow circle → highlighted upload) ──────────── */
:target { scroll-margin-top: 20px; }
#upload:target {
  border-radius: 14px;
  animation: upload-glow 1.8s ease-out 1;
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.30), var(--glass-shadow);
}
@keyframes upload-glow {
  0%   { box-shadow: 0 0 0 12px rgba(26, 86, 219, 0.45); }
  60%  { box-shadow: 0 0 0 4px rgba(26, 86, 219, 0.32); }
  100% { box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.30), var(--glass-shadow); }
}

/* ── Help boxes: compact chips when closed ───────────────────────────────────
   The per-page "How X works" / "How to use this page" panels used to sit as two
   or three full-width bars stacked down the page, eating a line each. Closed,
   they now shrink to inline chips that sit side by side on one line; opening one
   expands it to full width. Pure CSS, so it applies on every package page. */
details.help-box:not([open]) {
  display: inline-block;
  width: auto;
  margin: 0 8px 12px 0 !important;
  vertical-align: top;
}
details.help-box:not([open]) > summary {
  padding: 7px 12px !important;
  font-size: 12.5px !important;
}
/* the "click to expand" hint and the status pill are noise when collapsed */
details.help-box:not([open]) > summary > span:last-child { display: none; }
details.help-box[open] { display: block; width: auto; }

/* ── Flow lane: grouped by stage ──────────────────────────────────────────────
   The circles used to run as one undifferentiated line, so the 1-2-3 in the
   stage banner above didn't obviously map onto them. Each group is now boxed and
   labelled with the stage it belongs to, and the stage the package is actually
   on is highlighted. */
.flow-stages {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 8px;
}
.flow-stage {
  flex: 1 1 260px;
  min-width: 0;
  padding: 10px 10px 12px;
  border-radius: 14px;
  border: 1px dashed var(--border);
  background: rgba(255, 255, 255, 0.22);
}
.flow-stage.is-now {
  border: 1px solid var(--primary);
  border-style: solid;
  background: rgba(26, 86, 219, 0.06);
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.10);
}
.flow-stage-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 2px 9px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.flow-stage.is-now .flow-stage-head { color: var(--primary); }
.flow-stage-n {
  width: 19px; height: 19px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  flex: 0 0 auto;
}
.flow-stage.is-now .flow-stage-n {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
}
.flow-stage-now {
  margin-left: auto;
  text-transform: none;
  letter-spacing: 0;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--primary);
  background: rgba(26, 86, 219, 0.12);
  border-radius: 10px;
  padding: 1px 8px;
}
.flow-arrow-stage { font-size: 24px; opacity: 0.9; }
@media (max-width: 760px) {
  .flow-arrow-stage { transform: rotate(90deg); }
}

/* The flow's "Push to turnover" circle links to #push — the stage banner, which
   holds the real Push button. Flash it on arrival like the upload box. */
#push:target {
  animation: upload-glow 1.8s ease-out 1;
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.30), var(--glass-shadow);
}

/* ── Stage tag on each block ──────────────────────────────────────────────────
   Every card on a package page says which stage it belongs to, in the same
   1-2-3 as the stage banner and the flow diagram. Sits as the first child of
   the .card, above its heading. */
.stage-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
  padding: 2px 10px 2px 3px;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.stage-tag-n {
  min-width: 17px; height: 17px;
  padding: 0 5px;
  border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700;
  color: #fff;
  flex: 0 0 auto;
}
.stage-tag-1 .stage-tag-n { background: #64748b; }
.stage-tag-2 .stage-tag-n { background: var(--primary); }
.stage-tag-3 .stage-tag-n { background: var(--success); }

/* ── Dashboard "Recent activity" / "Recent runs" pair ─────────────────────────
   The two cards sit side by side in a grid, so the grid stretches the shorter
   one to match the taller — leaving a block of dead space under the shorter
   list. Both lists now scroll inside a fixed, compact area, so the cards are
   the same small height and neither shows empty space. */
.dash-card { display: flex; flex-direction: column; }
.dash-list {
  flex: 1 1 auto;
  height: 236px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.dash-list table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
/* keep the column headers visible while the body scrolls */
.dash-list thead th {
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
}
@media (max-width: 760px) {
  .dash-list { height: auto; max-height: 300px; }
}

/* Tiny stage number on a nav button/link (holds "1" or "1.1"). */
.stage-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  font-size: 10px; font-weight: 700;
  color: #fff;
  flex: 0 0 auto;
  margin-right: 5px;
  vertical-align: -1px;
}
.stage-chip-0 { background: #94a3b8; }
.stage-chip-1 { background: #64748b; }
.stage-chip-2 { background: var(--primary); }
.stage-chip-3 { background: var(--success); }

/* "Where this page belongs" strip at the top of a reference / child sub-page. */
.stage-belongs {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 14px;
  margin-bottom: 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  background: var(--surface);
}
.stage-belongs.stage-tag-1 { border-left-color: #64748b; }
.stage-belongs.stage-tag-2 { border-left-color: var(--primary); }
.stage-belongs.stage-tag-3 { border-left-color: var(--success); }
.stage-belongs .stage-tag-n { margin-top: 1px; }
.stage-belongs-head { font-size: 12.5px; font-weight: 600; }
.stage-belongs-head a { color: var(--primary); }
.stage-belongs-desc { font-size: 12px; color: var(--text-muted); margin-top: 3px; line-height: 1.5; }

/* ── Page help behind one ⓘ button ──────────────────────────────────────────── */
.info-btn { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.info-btn-i {
  width: 17px; height: 17px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; font-style: italic;
  color: #fff;
  background: var(--primary);
}
.info-dialog {
  width: min(760px, calc(100vw - 40px));
  max-height: min(80vh, 720px);
  padding: 0;
  /* the global reset zeroes margins, which kills <dialog>'s own centring */
  margin: auto;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--glass-shadow);
  color: var(--text);
}
.info-dialog::backdrop { background: rgba(17, 24, 39, 0.45); backdrop-filter: blur(3px); }
.info-dialog-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
  background: var(--surface);
  border-radius: 16px 16px 0 0;
}
.info-dialog-head h3 { font-size: 15px; margin: 0; }
.info-dialog-tag {
  font-size: 11px; font-weight: 500;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1px 8px;
}
.info-dialog-x {
  margin-left: auto;
  border: 0; background: transparent; cursor: pointer;
  font-size: 15px; color: var(--text-muted); line-height: 1;
  padding: 4px 6px; border-radius: 6px;
}
.info-dialog-x:hover { background: var(--bg); color: var(--text); }
.info-dialog-body {
  padding: 4px 18px 16px;
  overflow-y: auto;
  font-size: 12.5px;
  line-height: 1.7;
}
.info-dialog-body h4 {
  font-size: 12.5px;
  margin: 14px 0 2px;
}
.info-dialog-body ol, .info-dialog-body ul { margin: 6px 0; padding-left: 20px; }
.info-dialog-body li { margin: 4px 0; }
.info-dialog-body .note {
  background: var(--hl-yellow);
  border-radius: 6px;
  padding: 8px 11px;
  margin-top: 10px;
}
.info-dialog-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 11px 16px;
  border-top: 1px solid var(--border);
  position: sticky; bottom: 0;
  background: var(--surface);
  border-radius: 0 0 16px 16px;
}

/* ── Upload boxes ─────────────────────────────────────────────────────────────
   One file input per full-width row left a very wide, empty control per line.
   The inputs now sit as tiles in a responsive grid — they use the page width
   instead of being stretched across it. */
.upload-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.upload-grid .form-group {
  margin-bottom: 0 !important;
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
}
.upload-grid .form-label {
  display: block;
  font-size: 12.5px; font-weight: 600;
  margin-bottom: 6px;
}
.upload-grid .form-control { background: var(--surface); }
.upload-grid small { display: block; margin-top: 6px; line-height: 1.5; }
.upload-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }