/* ════════════════════════════════════════════════════════════════════
   DNA+ Connect · Home redesign — Tweaks
   Three expressive levers, applied as data-attributes on <html>:
     data-mood     matte | satin(base) | luminous
     data-density  spacious | balanced(base) | compact
     data-edge     sharp | soft(base) | round
   Base states are the original design — only the off-base states emit
   overrides. All accents derived from var(--gold) so they adapt to the
   active theme (gold / platinum / light).
   ════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────────
   MOOD · how much the surface glows
   ──────────────────────────────────────────────────────────────────── */
/* Matte — kill the glow, flatten shadows, drop the hairline sheen, calm grain */
:root[data-mood="matte"]{
  --gold-glow:transparent;
  --shadow-gold:0 1px 2px rgba(0,0,0,.4);
  --shadow-pop:0 4px 14px rgba(0,0,0,.45);
  --grad-hairline:linear-gradient(90deg,transparent,transparent);
}
[data-mood="matte"] body::before{opacity:.22}
[data-mood="matte"] .pod-bar i,
[data-mood="matte"] .pod-row .pr-bar i,
[data-mood="matte"] .pl-spot-av,
[data-mood="matte"] .dot,
[data-mood="matte"] .dot.green,
[data-mood="matte"] .dot.red{box-shadow:none}
[data-mood="matte"] .pl-spotlight::after{opacity:.35}
[data-mood="matte"] .sb-mark,
[data-mood="matte"] .sb-top img{filter:none}

/* Luminous — amplify the gold, ring every card in warm light, brighten seams */
:root[data-mood="luminous"]{
  --gold-glow:color-mix(in srgb,var(--gold) 27%,transparent);
  --shadow-gold:0 2px 26px color-mix(in srgb,var(--gold) 32%,transparent);
}
[data-mood="luminous"] body::before{opacity:.52}
[data-mood="luminous"] .pod,
[data-mood="luminous"] .ans-card,
[data-mood="luminous"] .pl-spotlight,
[data-mood="luminous"] .pl-hero,
[data-mood="luminous"] .tm,
[data-mood="luminous"] .s2l,
[data-mood="luminous"] .rail-card,
[data-mood="luminous"] .kstrip{
  box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 6%,transparent),
             0 10px 34px color-mix(in srgb,var(--gold) 7.5%,transparent);
}
[data-mood="luminous"] .pod:hover,
[data-mood="luminous"] .ans-card:hover,
[data-mood="luminous"] .s2l:hover{
  box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 13.5%,transparent),
             0 14px 42px color-mix(in srgb,var(--gold) 15%,transparent);
}
/* seams + edge accents glow brighter */
[data-mood="luminous"] .pl-hero::after,
[data-mood="luminous"] .ans-card::after,
[data-mood="luminous"] .pod::after,
[data-mood="luminous"] .tm::after{opacity:1}
[data-mood="luminous"] .pl-spotlight::after{opacity:1.05}
[data-mood="luminous"] .pod-bar i,
[data-mood="luminous"] .pod-row .pr-bar i,
[data-mood="luminous"] .s2l-bar i{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--gold) 52%,transparent))}
[data-mood="luminous"] .ans-card::before,
[data-mood="luminous"] .pl-stage .pl-chip{box-shadow:0 0 14px color-mix(in srgb,var(--gold) 30%,transparent)}

/* ────────────────────────────────────────────────────────────────────
   DENSITY · how much room the data gets to breathe
   ──────────────────────────────────────────────────────────────────── */
/* Compact — ops-floor density, more on screen, tighter numerals */
[data-density="compact"] .main{padding:1.2rem 1.7rem 2.2rem}
[data-density="compact"] .phead{margin-bottom:1.2rem;padding-bottom:.9rem}
[data-density="compact"] .phead-stats{margin-top:.5rem;gap:1rem}
[data-density="compact"] .section{margin-bottom:1.4rem}
[data-density="compact"] .sec-head{margin-bottom:.6rem}
[data-density="compact"] .pod-grid,
[data-density="compact"] .tm-grid,
[data-density="compact"] .s2l-grid{gap:.6rem}
[data-density="compact"] .pl-band{gap:.8rem 1rem;margin-top:1rem}
[data-density="compact"] .rw-stack{gap:1rem}
[data-density="compact"] .pl-side{gap:.8rem}
[data-density="compact"] .rw-cols{gap:1.05rem}
[data-density="compact"] .pod{padding:.85rem .95rem .8rem;gap:.6rem}
[data-density="compact"] .tm{padding:.95rem 1.05rem;min-height:0}
[data-density="compact"] .s2l{padding:.85rem 1rem}
[data-density="compact"] .pl-stage{padding:1.05rem 1.05rem .95rem;gap:.6rem}
[data-density="compact"] .ans-card{padding:.95rem 1.1rem 1.05rem}
[data-density="compact"] .pl-spotlight{padding:1.05rem}
[data-density="compact"] .kcell{padding:.8rem .95rem}
[data-density="compact"] .pl-big{font-size:2.1rem}
[data-density="compact"] .pod-count{font-size:1.5rem}
[data-density="compact"] .tm-v{font-size:1.7rem;margin:.4rem 0 .1rem}
[data-density="compact"] .s2l-v{font-size:1.55rem}
[data-density="compact"] .ans-count{font-size:1.6rem}
[data-density="compact"] .pl-spot-stats,
[data-density="compact"] .ans-statrow{margin-top:.8rem}

/* Spacious — executive briefing, generous air, hero numerals */
[data-density="spacious"] .main{padding:2.9rem 3.6rem 4.6rem}
[data-density="spacious"] .phead{margin-bottom:2.8rem;padding-bottom:1.7rem}
[data-density="spacious"] .phead-stats{margin-top:1rem;gap:1.9rem}
[data-density="spacious"] .section{margin-bottom:3.4rem}
[data-density="spacious"] .sec-head{margin-bottom:1.45rem}
[data-density="spacious"] .pod-grid,
[data-density="spacious"] .tm-grid,
[data-density="spacious"] .s2l-grid{gap:1.5rem}
[data-density="spacious"] .pl-band{gap:1.8rem 2rem;margin-top:2.2rem}
[data-density="spacious"] .rw-stack{gap:2.1rem}
[data-density="spacious"] .pl-side{gap:1.8rem}
[data-density="spacious"] .rw-cols{gap:2rem}
[data-density="spacious"] .pod{padding:1.5rem 1.6rem 1.35rem;gap:1rem}
[data-density="spacious"] .tm{padding:1.7rem 1.8rem;min-height:160px}
[data-density="spacious"] .s2l{padding:1.55rem 1.7rem}
[data-density="spacious"] .pl-stage{padding:2.1rem 1.9rem 1.8rem;gap:1.1rem}
[data-density="spacious"] .ans-card{padding:1.7rem 1.9rem 1.9rem}
[data-density="spacious"] .pl-spotlight{padding:1.95rem}
[data-density="spacious"] .kcell{padding:1.5rem 1.7rem}
[data-density="spacious"] .pl-big{font-size:3.1rem}
[data-density="spacious"] .pod-count{font-size:2.15rem}
[data-density="spacious"] .tm-v{font-size:2.5rem}
[data-density="spacious"] .s2l-v{font-size:2.2rem}
[data-density="spacious"] .ans-count{font-size:2.25rem}
[data-density="spacious"] .pl-spot-stats,
[data-density="spacious"] .ans-statrow{margin-top:1.6rem}

/* ────────────────────────────────────────────────────────────────────
   EDGE · the geometry of every corner (token-level, cascades everywhere)
   ──────────────────────────────────────────────────────────────────── */
:root[data-edge="sharp"]{
  --radius-sm:0px;--radius:1px;--radius-lg:2px;--radius-xl:3px;
}
/* sharp keeps the architectural accent rails crisp & a touch wider */
[data-edge="sharp"] .pod::before,
[data-edge="sharp"] .pod-row::before,
[data-edge="sharp"] .ans-card::before{width:4px}

:root[data-edge="round"]{
  --radius-sm:11px;--radius:15px;--radius-lg:22px;--radius-xl:30px;
}
/* round softens the accent rails into lozenges so they don't fight the curve */
[data-edge="round"] .pod::before,
[data-edge="round"] .pod-row::before,
[data-edge="round"] .pl-spotlight::after{border-radius:99px}
[data-edge="round"] .nav.active::before{border-radius:99px}