/* ============================================================
   CARDS — Sections, cards, KPIs, notes, empty states and the layer stack
   ============================================================ */

.card-h{display:flex;align-items:center;gap:10px}
.empty{text-align:center}
.empty b{display:block}
.stack{display:flex;height:15px;overflow:hidden;min-width:72px;background:var(--card2)}
.stack i{display:block;height:100%;font-style:normal}
.stackleg{display:flex;flex-wrap:wrap;gap:9px;margin-top:6px}
.stackleg span{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--ink)}
.stackleg i{width:9px;height:9px;border-radius:2px;display:block}
.srail{display:flex;align-items:stretch;gap:2px}
.srail .st{flex:1;min-width:0;position:relative;overflow:hidden}
.srail .st .sl {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-family:var(--sans);
  font-size:10px;
  font-weight:550;
  letter-spacing:.01em;
  text-transform:none;
}
.srail .st .sv {
  margin-top:1px;
  font-family:var(--sans);
  font-size:12px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.srail .st.done{background:var(--green-bg)}
.srail .st.done .sv{color:var(--green)}
.srail .st.run{background:var(--cyan-bg)}
.srail .st.run .sv{color:var(--cyan)}
.srail .st.wait .sv{color:var(--chrome)}
.srail .st.hold{background:var(--amber-bg)}
.srail .st.hold .sv{color:var(--amber)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:11px}
.kpi{position:relative;overflow:hidden;text-align:left;width:100%}
.kpi .kl{display:block}
.kpi .kbar{position:absolute;left:0;right:0;top:0;bottom:auto}
.sec-h{display:flex;align-items:center}
.sec-r{flex:1;height:1px}
.bar{height:6px;overflow:hidden;min-width:52px}
.bar i{display:block;height:100%;background:var(--navy)}
/* belongs with print — kept here because it must load after a rule in this file */
.sh-stack i{display:block;height:100%}
.bar i.g{background:var(--green)}
.bar i.a{background:var(--amber)}
.bar i.r{background:var(--red)}
.mini{display:grid;grid-template-columns:auto 1fr;font-size:12.5px}
.mini dt{padding-top:1px}
.hr{height:1px;margin:14px 0}
.sec-h::before{content:"";width:3px;height:12px;border-radius:2px;background:var(--red);flex:0 0 3px}
.stack{box-shadow:inset 0 0 0 1px rgba(18,20,28,.06);border:none}
.stack.lg{border-radius:5px;height:24px}
.card{background:var(--card);border:1px solid var(--line)}
.card-h{border-bottom:1px solid var(--line2)}
.card-t{letter-spacing:-.01em;color:var(--ink)}
.empty{padding:48px 20px;color:var(--chrome);font-size:13px}
.kpi {
  border:1px solid var(--line);
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.kpi:hover{transform:none}
.kpi .kl{font-family:var(--sans);letter-spacing:0;text-transform:none}
.kpi .kv{color:var(--ink)}
.kpi .kf{color:var(--chrome);line-height:1.4}
/* the colour bar becomes a quiet top rule, not a glowing gradient */
.kpi .kbar{width:auto;background:var(--n200)}
.kpi.r .kbar{background:var(--red)}
.kpi.r .kv{color:var(--red)}
.kpi.a .kbar{background:var(--amber)}
.kpi.a .kv{color:var(--amber)}
.kpi.g .kbar{background:var(--green)}
.kpi.g .kv{color:var(--green)}
.kpi.n .kbar{background:var(--navy)}
.kpi.n .kv{color:var(--navy)}
.kpi.c .kbar{background:var(--cyan)}
.kpi.c .kv{color:var(--cyan)}
.sec-h{gap:10px}
.sec-h::before{display:none}
.sec-t{font-family:var(--sans);text-transform:none}
.sec-r{background:var(--line)}
.note.w {
  background:var(--amber-bg);
  border-color:var(--amber-line);
  border-left-color:var(--amber);
  color:#6B3A08;
}
.note.d{background:var(--red-bg);border-color:var(--red-line);border-left-color:var(--red);color:#8A2018}
.srail .st{border-radius:var(--r-sm);padding:5px 8px;background:var(--n100)}
.srail .st .sl{color:var(--n500)}
.srail .st.wait{background:var(--n100)}
.srail .st.na{background:var(--n50);opacity:.6}
.bar i{border-radius:10px}
.mini dt {
  font-family:var(--sans);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
  color:var(--n500);
}
.mini dd{font-weight:550}
.hr{background:var(--line)}
.note .btn{margin-top:7px}
/* field rows in the drawer */
.mini{gap:4px 14px}
.sec-t{font-size:14px;font-weight:650;letter-spacing:-.015em;color:var(--ink)}
.sec-h{margin-bottom:12px}
.sec{margin-bottom:26px}
.card-t{font-size:14px;font-weight:650}
.card-b{padding:17px}
.card-h{padding:14px 17px}
.kpi:hover{box-shadow:var(--sh-2);border-color:var(--n300)}
.kpi .kbar{height:3px;border-radius:var(--r-lg) var(--r-lg) 0 0}
.kpi .kl{font-size:12px;font-weight:550;color:var(--n500);margin-bottom:9px}
.kpi.r{background:linear-gradient(180deg,#FDF5F4,#fff 58%)}
.kpi.a{background:linear-gradient(180deg,#FEFAF3,#fff 58%)}
.kpi.g{background:linear-gradient(180deg,#F2F9F5,#fff 58%)}
.kpi.n{background:linear-gradient(180deg,#F4F5FE,#fff 58%)}
.kpi.c{background:linear-gradient(180deg,#F1F7F9,#fff 58%)}
.spv:hover{border-left-color:var(--ink,#111827)}
.spv.done{border-left-color:#15704E;opacity:.72}