/* oddly base theme layer. Build 52.0a.
 *
 * Consumes the locked tokens in oddly-tokens.css and applies the "quiet
 * cockpit" look across the dashboard WITHOUT per-page surgery: it
 * retargets the existing hand-coded class names (.topnav, .sidebar,
 * .card, etc.) to the token system via the cascade. chrome.js appends
 * this stylesheet after each page's inline <style>, so equal-specificity
 * rules here win on source order.
 *
 * It also styles the chrome components chrome.js injects: the unified
 * sidebar, the breadcrumb row, the header tier chip, and the user-menu
 * dropdown.
 *
 * Per-surface card polish (the bespoke card classes on individual
 * pages) lands in the 52.1-52.5 re-skins; this layer covers the canvas,
 * the shared chrome, and the common card shapes.
 */

/* ---- Global hidden-attribute reset (live-bug fix) ----
 * Component rules such as .tier-banner { display: flex } share equal
 * specificity with the UA rule [hidden] { display: none } and, because each
 * page's inline <style> sits AFTER this linked sheet in source order, win the
 * cascade. The result: an element carrying the hidden attribute still rendered
 * (the persistent "Steer feature" tier banner on a hidden #tier-banner). Force
 * the hidden attribute to always win so toggling .hidden = true reliably hides.
 *
 * Audited safe: every other [hidden] author rule already resolves to
 * display:none, and the only elements that keep the attribute through a show
 * (the mobile drawer + its mask) are revealed by CLEARING the attribute
 * (drawer.hidden = false), not by overriding display, so nothing intentionally
 * visible is affected.
 */
[hidden] {
  display: none !important;
}

/* ---- Canvas + base typography ---- */
html,
body {
  background: var(--oddly-canvas);
  color: var(--oddly-ink);
}
body {
  font: var(--oddly-text-body);
  -webkit-font-smoothing: antialiased;
}

/* ---- Shared header chrome ---- */
.topnav {
  background: var(--oddly-surface);
  border-bottom: 1px solid var(--oddly-border);
}
.brand-mark .o,
.brand-mark span.o {
  color: var(--oddly-teal);
}
.brand-switcher select {
  color: var(--oddly-ink);
  background-color: var(--oddly-surface-sunken);
  border: 1px solid var(--oddly-border);
  border-radius: var(--oddly-radius-sm);
}
.brand-switcher select:hover {
  border-color: var(--oddly-border-strong);
}
.brand-switcher select:focus {
  outline: 2px solid var(--oddly-teal-wash);
  border-color: var(--oddly-teal);
}

/* ---- Sidebar (inline + chrome-injected share these classes) ---- */
.sidebar {
  background: var(--oddly-canvas);
  border-right: 1px solid var(--oddly-border);
}
.sidebar h3 {
  font: var(--oddly-text-label);
  letter-spacing: var(--oddly-tracking-label);
  text-transform: uppercase;
  color: var(--oddly-ink-muted);
}
.sidebar nav a {
  color: var(--oddly-ink-secondary);
  border-radius: var(--oddly-radius-sm);
  transition: background var(--oddly-duration) var(--oddly-ease),
    color var(--oddly-duration) var(--oddly-ease);
}
.sidebar nav a:hover {
  background: var(--oddly-teal-wash);
  color: var(--oddly-teal);
}
.sidebar nav a.active {
  background: var(--oddly-teal-wash);
  color: var(--oddly-teal);
  font-weight: var(--oddly-weight-semibold);
}
/* tier badge moved to the header chip; hide the legacy sidebar pill. */
.sidebar #tier-pill,
#tier-pill {
  display: none !important;
}

/* ---- Common cards: surface + single hairline + soft shadow ---- */
.card,
.section,
.qcard,
.pulse-card,
.decision-card,
.variant-card,
.onb-card,
.gap-card,
.stat {
  background: var(--oddly-surface);
  border: 1px solid var(--oddly-border);
  border-radius: var(--oddly-radius-md);
  box-shadow: var(--oddly-shadow-card);
}

/* ---- Primary action = teal, with discipline ---- */
.btn.primary,
.btn-primary,
.qbtn.primary,
.tb-cta {
  background: var(--oddly-teal);
  color: var(--oddly-surface);
  border-color: var(--oddly-teal);
}
.btn.primary:hover,
.btn-primary:hover,
.qbtn.primary:hover,
.tb-cta:hover {
  background: var(--oddly-teal-hover);
  border-color: var(--oddly-teal-hover);
}

/* ---- Page heading ---- */
.page-title {
  font: var(--oddly-text-display);
  letter-spacing: var(--oddly-tracking-display);
  color: var(--oddly-ink);
}
.page-sub {
  color: var(--oddly-ink-secondary);
}

/* ============================================================
 * Chrome components injected by /dashboard/shared/chrome.js
 * ============================================================ */

/* Breadcrumb row, injected at the top of <main> on sub-pages. */
.oc-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--oddly-space-2);
  margin: 0 0 var(--oddly-space-4);
  font: var(--oddly-text-small);
  color: var(--oddly-ink-muted);
}
.oc-breadcrumb a {
  color: var(--oddly-ink-secondary);
  text-decoration: none;
}
.oc-breadcrumb a:hover {
  color: var(--oddly-teal);
}
.oc-breadcrumb .sep {
  color: var(--oddly-border-strong);
}
.oc-breadcrumb .current {
  color: var(--oddly-ink);
  font-weight: var(--oddly-weight-medium);
}

/* Header tier chip: small pill, gold ring when an upgrade is available. */
.oc-tier-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--oddly-space-1);
  font: var(--oddly-text-label);
  letter-spacing: var(--oddly-tracking-label);
  text-transform: uppercase;
  color: var(--oddly-teal);
  background: var(--oddly-teal-wash);
  border: 1px solid transparent;
  border-radius: var(--oddly-radius-pill);
  padding: var(--oddly-space-1) var(--oddly-space-3);
  text-decoration: none;
  cursor: pointer;
}
.oc-tier-chip.upgradeable {
  color: var(--oddly-gold);
  background: var(--oddly-gold-wash);
  border-color: var(--oddly-gold);
}

/* User-menu dropdown (replaces the standalone Settings + Logout pair). */
.oc-usermenu {
  position: relative;
  display: inline-flex;
}
.oc-usermenu-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--oddly-space-2);
  font: var(--oddly-text-body);
  font-weight: var(--oddly-weight-semibold);
  color: var(--oddly-ink);
  background: var(--oddly-surface);
  border: 1px solid var(--oddly-border);
  border-radius: var(--oddly-radius-pill);
  padding: var(--oddly-space-1) var(--oddly-space-3);
  cursor: pointer;
}
.oc-usermenu-trigger:hover {
  border-color: var(--oddly-border-strong);
}
.oc-usermenu-panel {
  position: absolute;
  top: calc(100% + var(--oddly-space-2));
  right: 0;
  min-width: 200px;
  background: var(--oddly-surface);
  border: 1px solid var(--oddly-border);
  border-radius: var(--oddly-radius-md);
  box-shadow: var(--oddly-shadow-pop);
  padding: var(--oddly-space-2);
  z-index: 60;
}
.oc-usermenu-panel[hidden] {
  display: none;
}
.oc-usermenu-panel .email {
  display: block;
  font: var(--oddly-text-small);
  color: var(--oddly-ink-muted);
  padding: var(--oddly-space-2) var(--oddly-space-3) var(--oddly-space-3);
  border-bottom: 1px solid var(--oddly-border);
  margin-bottom: var(--oddly-space-2);
  word-break: break-all;
}
.oc-usermenu-panel a {
  display: block;
  font: var(--oddly-text-body);
  color: var(--oddly-ink-secondary);
  text-decoration: none;
  padding: var(--oddly-space-2) var(--oddly-space-3);
  border-radius: var(--oddly-radius-sm);
}
.oc-usermenu-panel a:hover {
  background: var(--oddly-teal-wash);
  color: var(--oddly-teal);
}

/* ---- Footer, refined to tokens (content owned by chrome.js) ---- */
.db-footer {
  border-top: 1px solid var(--oddly-border);
  background: var(--oddly-surface);
  padding: var(--oddly-space-4) var(--oddly-space-5);
  text-align: center;
  font: var(--oddly-text-small);
  color: var(--oddly-ink-secondary);
}
.db-footer .db-links a,
.db-footer .db-meta a {
  color: var(--oddly-teal);
  margin: 0 var(--oddly-space-3);
  font-weight: var(--oddly-weight-medium);
  text-decoration: none;
}
.db-footer .db-links a:hover,
.db-footer .db-meta a:hover {
  text-decoration: underline;
}
.db-footer .db-meta {
  margin-top: var(--oddly-space-2);
}
.db-footer .db-meta .sep {
  color: var(--oddly-border-strong);
  margin: 0 var(--oddly-space-2);
}
.db-footer .db-compliance,
.db-footer .db-entity {
  margin-top: var(--oddly-space-2);
  color: var(--oddly-ink-muted);
  letter-spacing: 0.04em;
}
.db-footer .db-version {
  margin-top: var(--oddly-space-1);
  color: var(--oddly-ink-muted);
  font: var(--oddly-text-small);
  letter-spacing: 0.06em;
}

/* Embedded Shopify admin supplies its own chrome; hide anything we add. */
html[data-embedded="1"] .db-footer,
html[data-embedded="1"] .oc-acct,
html[data-embedded="1"] .oc-breadcrumb,
html[data-embedded="1"] .oc-usermenu,
html[data-embedded="1"] .oc-tier-chip {
  display: none !important;
}