/* ════════════════════════════════════════════════════════════════════
   DNA+ CONNECT · ANSWER REDESIGN LAYER
   The live Answer dashboard (answer.css) is already tokened; this layer
   aligns it with the other redesigned pods — gold header tile, header type,
   and chip/leaderboard polish. Visual only, scoped under #page-answer.
   ════════════════════════════════════════════════════════════════════ */

#page-answer{max-width:1560px}

/* ── header: gold gradient icon tile + title (match Intake/Engage/Convert) ── */
#page-answer .ans-tophead{padding-bottom:1.1rem;border-bottom:1px solid var(--border);margin-bottom:1.3rem}
#page-answer .ans-hero{gap:1.1rem}
#page-answer .ans-hero-icon{width:54px;height:54px;border-radius:var(--radius-lg);
  background:var(--grad-gold-btn);border:1px solid transparent;box-shadow:0 3px 18px rgba(184,150,46,.3);color:#0a0a0a}
#page-answer .ans-hero-icon svg{width:26px;height:26px;stroke:#0a0a0a}
#page-answer .ans-hero-title{font-family:var(--sans);font-weight:700;font-size:1.7rem;letter-spacing:-.025em;color:var(--white)}
#page-answer .ans-hero-sub{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:.45rem}
#page-answer .ans-head-live{font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--green)}
#page-answer .ans-head-live .dot{width:7px;height:7px;background:var(--green);box-shadow:0 0 8px var(--green)}

/* ── dashboard section heading (align to .sec-eyebrow language) ── */
#page-answer .ans-dash-rule{background:var(--grad-hairline);opacity:.7;height:1px}
#page-answer .ans-dash-title{font-family:var(--sans);font-weight:700;font-size:1.2rem;letter-spacing:-.01em;color:var(--white)}
#page-answer .ans-dash-sub{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted2)}
#page-answer .ans-vmhead{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin:1.6rem 0 1rem}

/* ── range + filter chips → consistent gold-glow active state ── */
#page-answer .ans-range-btn{font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.06em;
  border:1px solid var(--border2);background:var(--surface);color:var(--muted);border-radius:99px;padding:.4rem .9rem}
#page-answer .ans-range-btn:hover{color:var(--text);border-color:var(--gold-dim)}
#page-answer .ans-range-btn.on{background:var(--gold-glow);color:var(--gold-lt);border-color:var(--gold-dim)}
#page-answer .ans-chip{font-family:var(--mono);font-size:.7rem;border:1px solid var(--border2);background:var(--surface);
  color:var(--muted);border-radius:99px;padding:.35rem .8rem}
#page-answer .ans-chip:hover{color:var(--text);border-color:var(--gold-dim)}
#page-answer .ans-chip.on{background:var(--gold-glow);color:var(--gold-lt);border-color:var(--gold-dim);font-weight:600}

/* ── KPI tiles: seam them into a clean gold-accent grid ── */
/* KPI tiles → seamed cells (no per-box border + accent-line clash). One subtle
   top hairline per cell, dividers come from the 1px grid seams. */
#page-answer .ans-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
#page-answer .ans-tile{padding:0;background:none;border:0;border-radius:0;position:relative}
#page-answer .ans-tile-in{background:var(--bg-soft);border:0;border-radius:0;padding:1.1rem 1.3rem;height:100%;position:relative}
#page-answer .ans-tile-in::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--grad-hairline);opacity:.4}
#page-answer .ans-tile-n{font-family:var(--mono);font-size:2rem;font-weight:600;color:var(--white);letter-spacing:-.02em}
#page-answer .ans-tile.pos .ans-tile-n{color:var(--green)}
#page-answer .ans-tile.neg .ans-tile-n{color:var(--red)}
@media(max-width:1080px){#page-answer .ans-tiles{grid-template-columns:repeat(2,1fr)}}

/* ── by-rep / by-hour panels ── */
#page-answer .ans-dpanel{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
#page-answer .ans-dpanel-head{display:flex;align-items:center;gap:.7rem;padding:.85rem 1.1rem;background:transparent;
  border-bottom:1px solid var(--border);font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
#page-answer .ans-dpanel-head .m{margin-left:auto;color:var(--muted2);letter-spacing:.08em}
#page-answer .ans-dpanel-head .ln{display:none}
#page-answer .ans-cardbody{padding:1rem 1.2rem 1.2rem}

/* leaderboard (Calls by rep) */
#page-answer .lb{display:flex;flex-direction:column;gap:.15rem}
#page-answer .lb-row{display:grid;grid-template-columns:20px 26px 1fr auto 46px;align-items:center;gap:.7rem;
  padding:.42rem .7rem;border-radius:var(--radius-sm);transition:background .15s}
#page-answer .lb-row:hover{background:var(--surface)}
#page-answer .lb-row.top{background:linear-gradient(90deg,var(--gold-glow),transparent 80%)}
#page-answer .lb-rank{font-family:var(--mono);font-size:.72rem;font-weight:600;color:var(--muted2);text-align:center}
#page-answer .lb-row.top .lb-rank{color:var(--gold-lt)}
#page-answer .lb-av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);
  font-size:.56rem;font-weight:600;color:var(--gold-lt);background:var(--surface3);border:1px solid var(--border2)}
#page-answer .lb-row.top .lb-av{border-color:var(--gold-dim);box-shadow:0 0 10px var(--gold-glow)}
#page-answer .lb-nm{font-size:.84rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#page-answer .lb-calls{font-family:var(--mono);font-size:1.05rem;font-weight:600;color:var(--white)}
#page-answer .lb-row.top .lb-calls{color:var(--gold-lt)}
#page-answer .lb-avg{font-family:var(--mono);font-size:.74rem;color:var(--muted);text-align:right}

/* line chart (Calls by hour) + summary tiles */
#page-answer .ha-chart{position:relative;margin:.4rem 0 .2rem}
#page-answer .hl{position:relative;height:150px}
#page-answer .hl-svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
#page-answer .hl-dot{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--bg);
  border:1.5px solid var(--gold-lt);transform:translate(-50%,-50%)}
#page-answer .hl-dot.peak{width:11px;height:11px;background:var(--gold-lt);border-color:var(--gold-lt);box-shadow:0 0 12px var(--gold-glow)}
#page-answer .hl-tag{position:absolute;bottom:13px;left:50%;transform:translateX(-50%);font-family:var(--mono);
  font-size:.62rem;font-weight:600;color:var(--gold-lt);white-space:nowrap}
#page-answer .ha-axis{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.52rem;color:var(--muted2);letter-spacing:.04em;margin-top:.35rem}
#page-answer .ax-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);
  border-radius:var(--radius-sm);overflow:hidden;margin-top:1.1rem}
#page-answer .ax-tile{background:var(--bg-soft);padding:.65rem .7rem;text-align:center}
#page-answer .ax-tile .v{font-family:var(--mono);font-size:1.1rem;font-weight:600;color:var(--gold-lt)}
#page-answer .ax-tile .l{font-family:var(--mono);font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2);margin-top:.25rem}

/* ── VM KPI strip → seamed cells w/ tone accent (matches Convert) ── */
#page-answer .ans-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:1rem}
#page-answer .ans-stat{background:var(--bg-soft);border:0;border-radius:0;padding:1.1rem 1.3rem}
#page-answer .ans-stat::before{height:2px;width:auto;top:0;left:0;right:0;bottom:auto;background:linear-gradient(90deg,var(--gold-dim),transparent 78%)}
#page-answer .ans-stat.warn::before{background:linear-gradient(90deg,var(--red),transparent 78%)}
#page-answer .ans-stat .n{font-family:var(--mono);font-size:1.7rem;font-weight:600;color:var(--gold-lt)}
#page-answer .ans-stat.warn .n{color:var(--red)}
#page-answer .ans-stat .l{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2);margin-top:.5rem}

/* ── VM rows: align card + buttons to the redesign ── */
#page-answer .ans-row{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg)}
#page-answer .ans-row:hover{border-color:var(--border2);transform:translateX(2px)}
#page-answer .ans-row.claimed{border-left:3px solid var(--gold)}
#page-answer .ans-row.partner{border-left:3px solid var(--pod-reconnect)}
#page-answer .ans-btn{font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--border2);background:var(--surface2);color:var(--muted);border-radius:var(--radius-sm);padding:.45rem .7rem}
#page-answer .ans-btn:hover{color:var(--text);border-color:var(--gold-dim)}
#page-answer .ans-btn.gold{background:var(--grad-gold-btn);border-color:transparent;color:#0a0a0a;box-shadow:0 1px 8px rgba(184,150,46,.22)}
#page-answer .ans-btn.gold:hover{filter:brightness(1.06);background:var(--grad-gold-btn);color:#0a0a0a}
#page-answer .ans-btn.ghost{background:transparent}
#page-answer .ans-btn.partner{border-color:color-mix(in srgb,var(--pod-reconnect) 50%,transparent);color:var(--pod-reconnect)}
#page-answer .ans-btn.partner:hover{background:color-mix(in srgb,var(--pod-reconnect) 16%,transparent);color:var(--pod-reconnect)}
#page-answer .ans-claimed-by{font-family:var(--mono);font-size:.66rem;color:var(--gold-lt)}