/* ═══════════════════════════════════════════════════════════════════════════
   Accounts CRM v2 — deal-detail (dd2) design language for the Accounts pages.
   Namespaced .acc2-*; leans on spartan-tokens.css (--red, --ink, --sN, .kpi,
   .tbl) and payment-pulse.css (sp-pulse-*). No emoji — SVG sprite icons only.
   Shipped with the 2026-07-07 Accounts CRM audit (A-089).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Dark hero money tile — mirrors dd2 .value-callout ──────────────────── */
.acc2-hero-tile{
  padding:16px 18px;
  background:linear-gradient(135deg, var(--ink,#0A0A0A) 0%, var(--s800,#292524) 100%);
  color:#fff; display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  border-radius:14px; box-shadow:var(--shadow-rest,0 1px 2px rgba(0,0,0,.06));
}
.acc2-hero-cell{flex:1; min-width:120px}
.acc2-hero-eyebrow{font-size:9.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:4px;white-space:nowrap}
.acc2-hero-num{font-size:22px;font-weight:900;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;font-family:var(--ff-sans,'Archivo',sans-serif)}
.acc2-hero-num .sm{font-size:12px;font-weight:700;color:rgba(255,255,255,.5);margin-left:4px}
.acc2-hero-sub{font-size:10.5px;color:rgba(255,255,255,.55);font-weight:600;margin-top:4px}
.acc2-hero-num.ok{color:#4ADE80}
.acc2-hero-num.warn{color:#FBBF24}
.acc2-hero-num.err{color:#F87171}

/* ── Primary CTA — red gradient + shimmer, mirrors dd2 .qa-cad ──────────── */
.acc2-cta{
  background:linear-gradient(135deg, var(--red,#C41230) 0%, var(--red-dark,#A60F28) 100%);
  color:#fff; border:1px solid var(--red,#C41230); padding:10px 18px; font-weight:800;
  font-size:13px; letter-spacing:-.005em;
  box-shadow:0 1px 2px rgba(196,18,48,.2), 0 8px 18px -4px rgba(196,18,48,.5);
  position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:8px;
  cursor:pointer; border-radius:10px; font-family:inherit;
  transition:all 180ms cubic-bezier(.4,0,.2,1);
}
.acc2-cta::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
  background-size:200% 100%; animation:acc2-shimmer 3s infinite;
}
.acc2-cta:hover{transform:translateY(-1px); box-shadow:0 2px 4px rgba(196,18,48,.25), 0 14px 26px -6px rgba(196,18,48,.6)}
.acc2-cta .ico{width:15px;height:15px}
@keyframes acc2-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── Live-feed pulse dot — brand-red ring, mirrors dd2-pulse-stage ──────── */
.acc2-live-dot{
  display:inline-block; width:9px; height:9px; border-radius:50%;
  background:var(--red,#C41230); flex:none;
  animation:acc2-pulse-live 1.6s infinite;
}
.acc2-live-dot.ok{background:#16A34A; animation-name:acc2-pulse-live-ok}
@keyframes acc2-pulse-live{
  0%,100%{box-shadow:0 0 0 0 rgba(196,18,48,.35)}
  70%{box-shadow:0 0 0 6px rgba(196,18,48,0)}
}
@keyframes acc2-pulse-live-ok{
  0%,100%{box-shadow:0 0 0 0 rgba(22,163,74,.35)}
  70%{box-shadow:0 0 0 6px rgba(22,163,74,0)}
}

/* ── Icon tile — rounded square icon container (feature cards, banners) ─── */
.acc2-icon-tile{
  width:40px; height:40px; border-radius:10px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--s100,#F5F5F4); color:var(--s600,#57534E);
}
.acc2-icon-tile .ico{width:18px;height:18px}
.acc2-icon-tile.red{background:var(--pale-red,#FBEBEE);color:var(--red,#C41230)}
.acc2-icon-tile.ok{background:#DCFCE7;color:#15803D}
.acc2-icon-tile.warn{background:#FEF3C7;color:#92400E}
.acc2-icon-tile.info{background:#EFF6FF;color:#1D4ED8}

/* ── KPI grid + compact KPI (token .kpi is 20px pad / 36px val — too big
      for 6-across finance strips) ─────────────────────────────────────────── */
.acc2-kpis{display:grid;gap:10px;margin-bottom:16px}
.acc2-kpis.c3{grid-template-columns:repeat(3,1fr)}
.acc2-kpis.c4{grid-template-columns:repeat(4,1fr)}
.acc2-kpis.c6{grid-template-columns:repeat(6,1fr)}
@media (max-width:1100px){.acc2-kpis.c6{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.acc2-kpis.c6,.acc2-kpis.c4,.acc2-kpis.c3{grid-template-columns:repeat(2,1fr)}}
.acc2-kpi{
  background:#fff; border:1px solid var(--s200,#E7E5E4); border-radius:14px;
  padding:14px 16px; transition:border-color 180ms cubic-bezier(.4,0,.2,1);
}
.acc2-kpi:hover{border-color:var(--s300,#D6D3D1)}
.acc2-kpi-eyebrow{font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--s400,#A8A29E);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc2-kpi-val{font-size:21px;font-weight:800;letter-spacing:-.025em;color:var(--ink,#0A0A0A);line-height:1;margin-top:6px;font-variant-numeric:tabular-nums;font-family:var(--ff-sans,'Archivo',sans-serif)}
.acc2-kpi-sub{font-size:10.5px;color:var(--s500,#78716C);font-weight:600;margin-top:5px}
.acc2-kpi-val.ok{color:#15803D}
.acc2-kpi-val.warn{color:#B45309}
.acc2-kpi-val.err{color:var(--red,#C41230)}
.acc2-kpi-val.info{color:#1D4ED8}
.acc2-kpi-val.purple{color:#7C3AED}

/* ── Section card head (title row above a table) ────────────────────────── */
.acc2-card-head{
  display:flex; align-items:center; gap:10px; padding:14px 20px;
  border-bottom:1px solid var(--s200,#E7E5E4);
}
.acc2-card-head .ico{width:15px;height:15px;color:var(--s500,#78716C)}
.acc2-card-title{font-size:13px;font-weight:800;letter-spacing:-.01em;color:var(--ink,#0A0A0A);margin:0;flex:1;font-family:var(--ff-sans,'Archivo',sans-serif)}
.acc2-card-count{font-size:10px;font-weight:800;padding:1px 7px;border-radius:5px;background:var(--s100,#F5F5F4);color:var(--s600,#57534E)}
.acc2-card-count.red{background:var(--red,#C41230);color:#fff}
.acc2-card-count.warn{background:#FEF3C7;color:#92400E}
.acc2-card-count.ok{background:#DCFCE7;color:#15803D}

/* Buttons with an icon inside legacy .btn-r/.btn-w keep the icon aligned. */
.acc2-btn-ico{display:inline-flex;align-items:center;gap:6px}
.acc2-btn-ico .ico{width:13px;height:13px}

@media (prefers-reduced-motion: reduce){
  .acc2-cta::before,.acc2-live-dot{animation:none}
}