/* Desert West Digital skin for the Revenue Stack Audit app.
   Colors and fonts match /styles/main.css on desertwestdigital.com. */
[data-theme="light"] {
  --bg:   #fafafa;
  --sf:   #ffffff;
  --sf2:  #f4f4f4;
  --sf3:  #f0f0f0;
  --bd:   #f0f0f0;
  --bd2:  #e0e0e0;
  --bd3:  #cfcfcf;
  --tx:   #0a0a0a;
  --tx2:  #2d2d2d;
  --tx3:  #555555;
  --tx4:  #888888;
  --glass: rgba(255,255,255,.94);
  --glass-bd: #e0e0e0;
  --shadow: 0 8px 40px rgba(0,0,0,0.10), 0 24px 80px rgba(0,0,0,0.06);
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.08), 0 12px 48px rgba(0,0,0,0.05);
}
[data-theme="dark"] {
  --bg:   #0a0a0a;
  --sf:   #141414;
  --sf2:  #1a1a1a;
  --sf3:  #2d2d2d;
  --tx:   #fafafa;
  --tx2:  #d4d4d4;
  --tx3:  #aaaaaa;
  --tx4:  #888888;
}
:root {
  --ff: 'Outfit', system-ui, -apple-system, sans-serif;
  --fh: 'Space Grotesk', system-ui, -apple-system, sans-serif;
}
body { font-family: var(--ff); }
.sn-logo-mark, .mc-title, .wiz-q, .wiz-result-name, .int-page-header h1, .onboard-title, .ob-brand, .app-footer-logo { font-family: var(--fh); letter-spacing: -0.02em; }
.dwd-sn-brand { display: block; text-decoration: none; color: inherit; }
.dwd-sn-brand:hover .sn-logo-mark { color: var(--ac); }
a.sn-item { text-decoration: none; }
.dwd-sn-cta { color: var(--ac) !important; font-weight: 600; }
.ab-btn-lead { background: var(--ac) !important; color: #fff !important; border-color: var(--ac) !important; font-weight: 600; }
.ab-btn-lead:hover { background: #2f5cb8 !important; border-color: #2f5cb8 !important; }
.score-cta-btn { border: 0; cursor: pointer; font-family: inherit; }
.score-cta-link { display: block; margin-top: 8px; font-size: 12px; color: var(--ac); text-decoration: none; font-weight: 600; }
.score-cta-link:hover { text-decoration: underline; }
.dwd-fine { font-size: 11.5px; color: var(--tx3); line-height: 1.6; margin-top: 4px; }
#fbOv .fi.bad { border-color: var(--red) !important; }
#fbDone a { color: var(--ac); font-weight: 600; }
.app-footer-tagline { max-width: 360px; }

/* ═══════════════════════════════════════════════════
   v4.0: main-site design system
   Neutral borders, one accent used sparingly, no rainbow,
   no glows, no colored bezels. Tokens mirror /styles/main.css.
   ═══════════════════════════════════════════════════ */
:root {
  --fm: 'Outfit', system-ui, -apple-system, sans-serif;  /* labels/numbers no longer in a second display face */
  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px;
  --dwd-btn-r: 9px;
  --cat-crm: #3b6fd4; --cat-marketing: #4d5f80; --cat-sales: #2f5cb8; --cat-billing: #24467f;
  --cat-analytics: #5a6984; --cat-communication: #3e5275; --cat-automation: #44649a;
  --cat-support: #55606f; --cat-website: #2f4a75; --cat-ecommerce: #4a5f8a; --cat-other: #6b6b6b;
}
[data-theme="light"] {
  --bd: #ececec; --bd2: #e0e0e0; --bd3: #cfcfcf;
  --tx4: #6b6b6b;
  --green: #15803d; --amber: #b45309; --red: #c62828;
  --shadow-sm: none;
  --shadow-md: 0 4px 20px rgba(0,0,0,0.08), 0 12px 48px rgba(0,0,0,0.05);
}
[data-theme="dark"] { --bd: #222; --bd2: #2d2d2d; --bd3: #3a3a3a; }
[data-accent="dwd"] { --ac: #3b6fd4; --acd: rgba(59,111,212,.07); --ach: rgba(59,111,212,.11); --acg: rgba(59,111,212,.22); }

/* Type: Space Grotesk for headings and big numbers only, Outfit for everything else */
body, button, input, select, textarea { font-family: var(--ff); }
.mc-title, .sp-panel-title, .gc-score-ring-val, .gc-stat-val, .sp-score-num, .wiz-q, .gc-tbl-empty-title, .ov2-kpi-val {
  font-family: var(--fh); letter-spacing: -0.03em;
}
.gc-stat-val, .gc-score-ring-val, .gc-tbl-cost-val, .gc-cat-row-count, .cbs { font-variant-numeric: tabular-nums; }

/* Shell: flat white surfaces with hairline borders, like the site nav */
.sidenav, .app-bar { background: var(--sf) !important; }
.sn-logo { background: none; }
.sn-item { border-radius: 8px; font-weight: 500; color: var(--tx2); }
.sn-item:hover { background: var(--sf2); color: var(--tx); }
.sn-item.on { background: var(--sf2) !important; color: var(--tx) !important; font-weight: 600; box-shadow: none !important; }
.sn-item.on::before { display: none !important; }
.sn-item.on i, .sn-item.on svg { color: var(--tx) !important; }
.sn-accents { display: none !important; }          /* rainbow swatches: accent stays in Settings */
.sn-label { color: var(--tx4); font-family: var(--ff); font-size: 10px; font-weight: 600; letter-spacing: .12em; }
.sn-logo-tag { color: var(--tx4); font-size: 9px; font-weight: 500; letter-spacing: .08em; white-space: nowrap; }

/* Buttons: site btn-dark / btn-ghost / btn-accent */
.btn, .ab-btn, .gc-add-btn-tbl, .gc-metric-edit { border-radius: var(--dwd-btn-r); letter-spacing: -0.01em; text-transform: none; }
.btn-p, .ab-btn-new-grid {
  background: var(--tx) !important; color: var(--sf) !important; border: 1px solid var(--tx) !important;
  box-shadow: none !important; filter: none !important; font-weight: 600;
}
.btn-p:hover:not(:disabled), .ab-btn-new-grid:hover { background: #2d2d2d !important; border-color: #2d2d2d !important; transform: translateY(-1px); }
[data-theme="dark"] .btn-p:hover:not(:disabled), [data-theme="dark"] .ab-btn-new-grid:hover { background: #d4d4d4 !important; border-color: #d4d4d4 !important; }
.btn-o, .btn-g, .btn-ghost, .ab-btn:not(.ab-btn-lead):not(.ab-btn-new-grid) {
  background: var(--sf); border: 1px solid var(--bd2); color: var(--tx); box-shadow: none;
}
.btn-o:hover:not(:disabled), .btn-g:hover:not(:disabled), .btn-ghost:hover:not(:disabled), .ab-btn:not(.ab-btn-lead):not(.ab-btn-new-grid):hover {
  background: var(--sf2); border-color: var(--tx); color: var(--tx); box-shadow: none; transform: none;
}
.ab-btn-lead, .score-cta-btn { box-shadow: none !important; filter: none !important; }
#fbOv .btn-p, #fbForm .btn-p { background: var(--ac) !important; border-color: var(--ac) !important; color: #fff !important; }
#fbOv .btn-p:hover, #fbForm .btn-p:hover { background: #2a5ab8 !important; border-color: #2a5ab8 !important; }

/* Inputs: site form fields */
.fi, .ab-search, #addToolIn { border-radius: 10px; }
.fi { background: var(--sf); border: 1.5px solid var(--bd2); font-size: 14px; padding: 11px 14px; }
.fi:focus { border-color: var(--ac); box-shadow: 0 0 0 3px var(--acd); background: var(--sf); }
.fl { font-family: var(--ff); font-size: 13px; font-weight: 600; color: var(--tx2); }

/* ── Grid dashboard ─────────────────────────────── */
.gc-dash, .gc-tbl-wrap, .gc-insights { background: var(--sf); border: 1px solid var(--bd2); box-shadow: none !important; }
.gc-dash { padding: 24px; gap: 20px; }
.gc-score-card { border-right-color: var(--bd); padding-right: 24px; }
.gc-score-ring-val { color: var(--tx) !important; font-size: 20px; font-weight: 600; letter-spacing: -0.04em; }
.gc-score-ring circle:first-child { stroke: var(--sf3); }
.gc-score-label { font-size: 12.5px; font-weight: 500; color: var(--tx3); }
.gc-score-sub { font-size: 14px; font-weight: 600; color: var(--tx); }
.gc-metric-edit { background: var(--sf) !important; border: 1px solid var(--bd2) !important; color: var(--tx2) !important; font-size: 11.5px !important; font-weight: 500; padding: 4px 10px !important; }
.gc-metric-edit:hover { border-color: var(--tx) !important; color: var(--tx) !important; }
.gc-stat-cards { gap: 10px; }
.gc-stat-card, .gc-stat-card.gc-stat-ok, .gc-stat-card.gc-stat-warn {
  background: var(--sf); border: 1px solid var(--bd2); border-radius: var(--r-md); box-shadow: none !important; padding: 14px 16px; gap: 6px;
}
.gc-stat-card:hover { border-color: var(--bd3); }
.gc-stat-val { font-size: 26px; font-weight: 600; color: var(--tx); letter-spacing: -0.04em; }
.gc-stat-val.ac, .gc-stat-val.gr { color: var(--tx); }
.gc-stat-val.am { color: var(--amber); }
.gc-stat-lbl { font-size: 12.5px; font-weight: 500; color: var(--tx3); letter-spacing: 0; }
.gc-cov-bar-track, .gc-cat-row-track { background: var(--sf3); height: 4px; }
.gc-cov-bar-label { font-size: 12.5px; font-weight: 500; color: var(--tx3); }
.gc-cat-breakdown { gap: 8px; }
.gc-cat-row-name { color: var(--tx2) !important; font-size: 12.5px; font-weight: 500; text-transform: capitalize; letter-spacing: 0; width: 120px; }
.gc-cat-row-fill { background: var(--ac) !important; opacity: .55; }
.gc-cat-row:first-child .gc-cat-row-fill { opacity: .9; }
.gc-cat-row-count { font-size: 12px; font-weight: 500; color: var(--tx3); width: 18px; }

.gc-insights { border-radius: var(--r-md); padding: 10px 16px; }
.gc-insights-label { font-size: 12.5px; font-weight: 600; color: var(--tx2); border-right-color: var(--bd); }
.gc-insight-chip { background: none !important; border: 0 !important; box-shadow: none !important; padding: 2px 4px; border-radius: 6px; font-size: 13px; color: var(--tx2); }
.gc-insight-chip i, .gc-insight-chip svg { color: var(--tx3) !important; }
.gc-insight-action { color: var(--ac) !important; font-size: 13px; font-weight: 600; }

/* ── Tool table ─────────────────────────────────── */
.gc-tbl-header, .gc-tbl-cols { background: var(--sf); }
.gc-tbl-header { padding: 12px 16px; }
.gc-tbl-count { font-size: 14px; font-weight: 600; color: var(--tx); letter-spacing: -0.01em; }
.gc-tbl-sort { border: 0; border-radius: 6px; padding: 4px 9px; font-size: 12.5px; font-weight: 500; color: var(--tx3); letter-spacing: 0; }
.gc-tbl-sort:hover { color: var(--tx); background: var(--sf2); }
.gc-tbl-sort.on { background: var(--sf2); color: var(--tx); border: 0; }
.gc-add-btn-tbl { background: var(--sf) !important; border: 1px solid var(--bd2) !important; color: var(--tx) !important; font-size: 12.5px; font-weight: 600; padding: 6px 12px; transform: none !important; }
.gc-add-btn-tbl:hover { border-color: var(--tx) !important; background: var(--sf2) !important; }
.gc-tbl-col-lbl { font-size: 12px; font-weight: 500; color: var(--tx3); letter-spacing: 0; }
.gc-tbl-row, .gc-tbl-row.has-note { border-left: 0 !important; box-shadow: none !important; }
.gc-tbl-row:hover, .gc-tbl-row:active { background: var(--bg) !important; }
.gc-tbl-name { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.gc-tbl-desc { font-size: 12px; color: var(--tx3); }
.gc-tbl-cat {
  color: var(--tx2) !important; background: none !important; border: 0 !important;
  font-size: 12px; font-weight: 500; letter-spacing: 0; padding: 0; margin: 0 6px 0 0; text-transform: capitalize;
  display: block; max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gc-tbl-overlap { color: var(--amber); font-size: 11px; }
.gc-tbl-stage-pill {
  color: var(--tx2) !important; background: var(--sf2) !important; border: 1px solid var(--bd) !important;
  border-radius: 5px; font-size: 11px; font-weight: 500; padding: 2px 6px;
}
.gc-tbl-stage-more, .gc-tbl-no-stage { font-size: 11px; color: var(--tx3); }
.gc-tbl-renewal-badge, .gc-tbl-status { border-radius: 5px; font-size: 11px; font-weight: 500; letter-spacing: 0; animation: none; }
.gc-tbl-nbadge { font-size: 11px; font-weight: 500; border-radius: 5px; background: var(--sf2); border-color: var(--bd); color: var(--tx3); padding: 1px 6px; }
.gc-tbl-cost-val { font-size: 13px; font-weight: 600; color: var(--tx); }
.gc-tbl-empty-icon, .gc-tbl-empty-ico { background: var(--sf2); border-color: var(--bd2); color: var(--tx2); box-shadow: none; border-radius: var(--r-md); }

/* Monogram tiles: one neutral treatment everywhere instead of per-category color */
.gc-tbl-abbr, .tool-dd-ab, .ov2-sl-ab, .fm-card2-ab, .fm2-node-ab, .pv-tool-ab, .cab, .nt-ab, #qnAb {
  color: var(--tx2) !important; background: var(--sf2) !important; border: 1px solid var(--bd) !important;
  font-family: var(--ff); font-weight: 600; letter-spacing: 0; border-radius: 8px;
}
.gc-tbl-abbr { font-size: 10.5px; width: 32px; height: 32px; }
.fm-card2-stripe { display: none !important; }
.fm-card2-stage { color: var(--tx3) !important; }
.cm-cat-btn { border-color: var(--bd2) !important; color: var(--tx2) !important; border-radius: 6px; }
.cm-cat-btn.on { background: var(--sf2) !important; color: var(--tx) !important; border-color: var(--tx) !important; }

/* No colored bezels / accent edge bars */
.gc-chip, .gc-chip:hover { border-left: 1px solid var(--bd2) !important; box-shadow: none; }
.gc-chip:hover { background: var(--sf2); }
.nt-card, .nt-card.has-note { border-left-width: 1px !important; border-left-color: var(--bd2) !important; border-color: var(--bd2); box-shadow: none; }
.ov2-kpi, .ov2-kpi.warn, .ov2-kpi.amber, .ov2-kpi.good { border-top-width: 1px; border-top-color: var(--bd2); box-shadow: none; }
.fm2-col-head { border-top-width: 1px !important; border-top-color: var(--bd2) !important; }

/* Chips: fewer pills, squarer corners */
.chip { border-radius: 8px; background: var(--sf); border: 1px solid var(--bd2); color: var(--tx2); font-size: 12px; font-weight: 500; }
.sp-a, .sp-g, .sp-w, .sp-e { border-radius: 6px; }
.toast, .toast-success, .toast-info, .toast-warn {
  border-radius: 10px; background: var(--tx); color: var(--sf); border: 1px solid var(--tx); box-shadow: var(--shadow-md);
  backdrop-filter: none; font-weight: 500; font-size: 13px;
}
.toast-warn { background: var(--red); border-color: var(--red); color: #fff; }

/* Score side panel */
.sp-panel-title { font-size: 16px; font-weight: 600; }
.sp-score-num, .sp-score-num.green { color: var(--tx) !important; font-weight: 600; }
.sp-score-num.amber { color: var(--amber); }
.sp-score-num.red { color: var(--red); }
.spl { font-size: 12.5px; font-weight: 500; color: var(--tx3); letter-spacing: 0; }
.cbn { font-size: 13px; font-weight: 500; max-width: 160px; }
.cbs { font-size: 12px; font-weight: 500; }
.iss { font-size: 13px; }

/* Modals: white card, site radius, no tinted gradient headers */
.modal, .modal-card { border-radius: var(--r-xl); border: 1px solid var(--bd2); box-shadow: 0 8px 40px rgba(0,0,0,0.10), 0 24px 80px rgba(0,0,0,0.06); }
.m-title { font-family: var(--fh); font-weight: 600; letter-spacing: -0.03em; }
.mc-head, .mc-foot { background: var(--sf) !important; border-color: var(--bd); }
.mc-title { font-size: 18px; font-weight: 600; }
.ov { background: rgba(10,10,10,.45); }
.tmpl-card { box-shadow: none !important; transform: none !important; border-color: var(--bd2); }
.tmpl-card:hover { border-color: var(--tx); background: var(--sf); }
.tmpl-card.on { border-color: var(--ac) !important; background: var(--acd) !important; box-shadow: inset 0 0 0 1px var(--ac) !important; }
.tmpl-card-ic, .tmpl-card:hover .tmpl-card-ic { background: var(--sf2); color: var(--tx2); }

/* Mobile chrome */
.mob-tab.on { background: none !important; color: var(--tx) !important; }
.mob-tab.on::before { background: var(--tx) !important; }
.mob-fab, .mob-add-fab { box-shadow: 0 4px 16px rgba(0,0,0,.14) !important; }

/* Emoji-style icons in banners */
.drift-banner-icon, .nudge-icon, .streak-icon { display: none !important; }

/* Category text stays readable in dark mode */
[data-theme="dark"] .gc-tbl-cat, [data-theme="dark"] .gc-cat-row-name { color: var(--tx2) !important; }

.pb-step-row.active, .wiz-result-reasoning { border-left-width: 1px !important; border-left-color: var(--bd2) !important; }
.fb-ta, .qn-ta, .import-ta { background: var(--sf); border: 1.5px solid var(--bd2); border-radius: 10px; font-size: 14px; }
.fb-ta:focus, .qn-ta:focus, .import-ta:focus { border-color: var(--ac); box-shadow: 0 0 0 3px var(--acd); }
@media (max-width: 860px) {
  .gc-score-ring-val { font-size: 16px; }
}
@media (max-width: 480px) {
  .mc-head { position: relative; }
  .mc-head::before { position: absolute; top: 8px; left: 50%; margin: 0 !important; transform: translateX(-50%); }
  #fbOv .mc-head::before { display: none; }
}

/* Reporting view: healthy = ink/accent, color only for problems */
.ov2-kpi.good .ov2-health-val { color: var(--tx); }
.ov2-kpi-val { font-weight: 600; }
.ov2-stage-pill { border-radius: 6px; font-size: 12px; font-weight: 500; }
.ov2-stage-pill.covered { background: var(--sf); border-color: var(--bd2); color: var(--tx2); }
.ov2-stage-pill.covered .ov2-stage-ic { color: var(--ac); }
.ov2-stage-ic, .ov2-stage-nm { font-size: 12px; }
.ov2-panel-badge { border-radius: 6px; }
.ov2-panel-badge.good { background: var(--sf2) !important; color: var(--tx2) !important; border-color: var(--bd2) !important; }
.ov2-total-badge { border-radius: 6px; }

/* Wizard + flow map hint: white cards with neutral borders */
.wiz-card { border-radius: var(--r-xl); }
.wiz-opt { background: var(--sf); border-color: var(--bd2); border-radius: var(--r-md); box-shadow: none; }
.wiz-opt:hover { border-color: var(--tx); background: var(--sf); }
.fm2-hint { background: var(--sf) !important; border-color: var(--bd2) !important; }
.fm2-connect-guide { background: var(--sf) !important; border-color: var(--bd2) !important; }
.fm2-cg-icon { background: var(--sf2); color: var(--tx2); border: 1px solid var(--bd2); border-radius: var(--r-md); }
.fm2-cg-title { color: var(--tx); font-family: var(--fh); font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }
.fm2-cg-body { font-size: 13px; }
.fm2-cg-dismiss { border-radius: var(--dwd-btn-r); border-color: var(--bd2); color: var(--tx); font-size: 12.5px; }

/* Template picker + advisor */
.tmpl-card { background: var(--sf); border: 1px solid var(--bd2); border-radius: var(--r-md); }
.tmpl-card-name { font-size: 13.5px; font-weight: 600; }
.tmpl-card-desc { font-size: 12px; }
.tmpl-tools-badge { background: var(--sf2) !important; color: var(--tx2) !important; border: 1px solid var(--bd2); font-weight: 600; border-radius: 6px; }
.advc-chip, .advc-pill, .advc-quick, .adv-panel-badge { border-radius: 8px; box-shadow: none; }
.adv-panel-badge { background: var(--sf2) !important; color: var(--tx2) !important; border-color: var(--bd2) !important; }
.gc-score-ring { width: 100%; height: 100%; }   /* ring scales with its wrapper (was overflowing the 58px mobile wrapper) */