/* ═══════════════════════════════════════════════════════════════════════════
   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,#a16207) 0%, var(--red-dark,#eab308) 100%);
  color:#fff; border:1px solid var(--red,#a16207); padding:10px 18px; font-weight:800;
  font-size:13px; letter-spacing:-.005em;
  box-shadow:0 1px 2px rgba(250,204,21,.2), 0 8px 18px -4px rgba(250,204,21,.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(250,204,21,.25), 0 14px 26px -6px rgba(250,204,21,.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,#a16207); 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(250,204,21,.35)}
  70%{box-shadow:0 0 0 6px rgba(250,204,21,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,#a16207)}
.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) ─────────────────────────────────────────── */
/* A-668: minmax(0,…) rather than a bare 1fr — `1fr` is minmax(AUTO, 1fr), so
   every track keeps a min-content floor, and these tiles hit it the moment a
   figure carries cents ($11,491.20). The floor then widens the whole row past
   the page instead of the value shrinking inside its tile. */
.acc2-kpis{display:grid;gap:10px;margin-bottom:16px}
.acc2-kpis.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.acc2-kpis.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.acc2-kpis.c6{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:1100px){.acc2-kpis.c6{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.acc2-kpis.c6,.acc2-kpis.c4,.acc2-kpis.c3{grid-template-columns:repeat(2,minmax(0,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,#a16207)}
.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,#a16207);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}
}

/* ═══════════════════════════════════════════════════════════════════════════
   A-668 — narrow / foldable viewports.
   Everything below is fenced behind an html[data-vp] tier stamped by
   modules/_lib/viewport.js, so desktop (lg/xl) is byte-for-byte unchanged.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The hero money tile is a six-cell flex row held apart by `min-width:120px`
   on each cell. js/responsive.css necessarily zeroes min-width app-wide at
   xs/sm/md (one unbreakable customer email otherwise widens the whole page),
   which removed the only thing making these cells WRAP — so all six stayed on
   one line at 33px each, the nowrap eyebrows printed on top of one another,
   and the tile's own scrollWidth pushed the Accounts dashboard 4px sideways.
   A grid does not depend on min-width to decide its columns, so state the
   columns per tier instead: two money figures per row on a phone (readable at
   arm's length), three once there is room for them. */
html[data-vp="xs"] .acc2-hero-tile,
html[data-vp="sm"] .acc2-hero-tile {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 12px;
  align-items: start;
  padding: 14px 16px;
}
html[data-vp="md"] .acc2-hero-tile {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 14px;
  align-items: start;
}
/* In a grid the cell is already a full track, so flex:1 is inert — but the
   eyebrow must be allowed to wrap now that it has a real column to wrap in,
   otherwise "TOTAL INVOICED" still runs past its track. */
html[data-vp="xs"] .acc2-hero-cell,
html[data-vp="sm"] .acc2-hero-cell,
html[data-vp="md"] .acc2-hero-cell { min-width: 0; }
html[data-vp="xs"] .acc2-hero-eyebrow,
html[data-vp="sm"] .acc2-hero-eyebrow,
html[data-vp="md"] .acc2-hero-eyebrow {
  white-space: normal;
  letter-spacing: .12em;   /* .22em costs ~25% of the line at 2-up */
  line-height: 1.25;
}
/* A 7-figure total at 22px does not fit a 150px track; 19px does, and the
   figure is the one thing on this tile someone opened the page for. */
html[data-vp="xs"] .acc2-hero-num { font-size: 19px; }

/* ── acc2 KPI tiles (payroll, aged receivables) ──────────────────────────
   Payroll prints full cents ($11,491.20). At 21px that is wider than a 2-up
   track, and responsive.css's app-wide `overflow-wrap:anywhere` (there to stop
   one long email widening the page) then breaks it mid-number — "$11,491.2"
   over "0", which reads as two figures. 17px keeps the whole amount on one
   line at 344px, so the break never fires. */
html[data-vp="xs"] .acc2-kpi-val { font-size: 17px; }

/* The eyebrow ellipses at one line ("OVERTIME ACCRU…"), which on desktop is a
   tidy trim of a label you can also read from the number beside it. On a phone
   the label IS the disambiguator, so let it take a second line instead. */
html[data-vp="xs"] .acc2-kpi-eyebrow,
html[data-vp="sm"] .acc2-kpi-eyebrow {
  white-space: normal;
  overflow: visible;
  letter-spacing: .1em;
  line-height: 1.25;
}

/* ── Touch ────────────────────────────────────────────────────────────────
   The Accounts CTAs are not in responsive.css's touch-target :where() list
   (they are .acc2-cta / .acc2-btn, not .btn-r), so state the floor here. */
@media (pointer: coarse) {
  .acc2-cta, .acc2-btn { min-height: 44px; }
}

/* ── Accounts card-header button groups ───────────────────────────────────
   The payroll "Pay lines" header (18c-accounts-payroll.js) wraps its title
   row but NOT the inner button group, and the card around it is
   `overflow:hidden` for its rounded corners — so at 673px (Fold unfolded) the
   group ran 680px wide inside a 640px card and "Push commission → Xero" was
   cut off with no gesture that reached it. The page still reported zero
   horizontal overflow, because the clip was doing its job.
   Matched via `:has(> .acc2-btn-ico)` so it can only ever hit an Accounts
   button group; a browser without :has() simply leaves today's behaviour,
   which is the safe direction to fail in. */
html[data-vp="xs"] .card > div > div:has(> .acc2-btn-ico),
html[data-vp="sm"] .card > div > div:has(> .acc2-btn-ico),
html[data-vp="md"] .card > div > div:has(> .acc2-btn-ico) { flex-wrap: wrap; }