/* Compass — a task-first, daylight presentation system.
 * This is a sibling to design_ledger.css, not a replacement for it. Both
 * styles consume the same DOM, data, and interaction contracts. */

body[data-ui-style="compass"] {
  background: var(--sv-bg);
}

body[data-ui-style="compass"] .header {
  border-bottom: 0;
  background: var(--sv-header-grad);
  box-shadow: 0 5px 18px rgba(15,61,75,.22);
}
body[data-ui-style="compass"] .header h1 { color: var(--sv-hud-text); text-shadow: none; letter-spacing: -.03em; }
body[data-ui-style="compass"] .header .bloodline { color: var(--sv-hud-text); text-shadow: none; }
body[data-ui-style="compass"] .header h1::after {
  content: "COMPASS";
  align-self: flex-end;
  margin: 0 0 3px -2px;
  color: var(--sv-accent);
  font-size: .52rem;
  font-weight: 800;
  letter-spacing: .16em;
}
body[data-ui-style="compass"] .header-hud {
  background: var(--sv-hud-bg);
  border: 1px solid color-mix(in srgb, var(--sv-accent) 24%, transparent);
  border-radius: 14px;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--sv-bg) 28%, transparent);
}
body[data-ui-style="compass"] .header-hud * { text-shadow: none; }
body[data-ui-style="compass"] .header-hud { color: var(--sv-hud-text); }
body[data-ui-style="compass"] .header-hud [style*="color:"] { color: var(--sv-hud-text) !important; }
body[data-ui-style="compass"] .header-hud-right { background: var(--sv-hud-bg); }

body[data-ui-style="compass"] .panel {
  background: var(--sv-surface);
  border-color: var(--sv-border);
  box-shadow: var(--sv-panel-shadow);
}
body[data-ui-style="compass"] .panel h2 {
  color: var(--sv-accent);
  border-bottom-color: var(--sv-border);
  letter-spacing: .035em;
}
body[data-ui-style="compass"] #panel-content::before {
  content: "YOUR LIFE, TODAY";
  display: block;
  color: var(--sv-amber);
  font-size: .67rem;
  font-weight: 850;
  letter-spacing: .16em;
  margin: 1px 0 5px;
}
body[data-ui-style="compass"] #panel-content .tab-bar-scroll {
  margin: 0 -4px 20px;
  padding: 5px 4px 8px;
  border-bottom: 1px solid var(--sv-border);
}
body[data-ui-style="compass"] .tab-bar { gap: 7px; }
body[data-ui-style="compass"] .tab {
  min-height: 42px;
  padding: 9px 13px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--sv-text-muted);
  font-size: .77rem;
  font-weight: 750;
}
body[data-ui-style="compass"] .tab:hover { background: color-mix(in srgb, var(--sv-accent) 10%, var(--sv-surface)); color: var(--sv-accent); }
body[data-ui-style="compass"] .tab.active {
  color: var(--sv-btn-2-text);
  background: var(--sv-accent);
  border-bottom: 0;
  box-shadow: 0 4px 10px rgba(21,94,117,.2);
}
body[data-ui-style="compass"] .btn { border-radius: 9px; font-weight: 750; }
body[data-ui-style="compass"] .btn-primary { background: var(--sv-accent); color: var(--sv-primary-ink); box-shadow: 0 4px 9px color-mix(in srgb, var(--sv-accent) 17%, transparent); }
body[data-ui-style="compass"] .btn-primary:hover { background: var(--sv-accent-h); }
body[data-ui-style="compass"] .btn-secondary { border: 1px solid var(--sv-border-hi); background: var(--sv-btn-bg); color: var(--sv-btn-2-text); }
body[data-ui-style="compass"] .activity-item,
body[data-ui-style="compass"] .job-node,
body[data-ui-style="compass"] .finance-card {
  background: var(--sv-surface);
  border-color: var(--sv-border);
  border-radius: 11px;
  box-shadow: var(--sv-card-shadow);
}
body[data-ui-style="compass"] .activity-item:hover,
body[data-ui-style="compass"] .job-node:hover { border-color: var(--sv-accent); box-shadow: 0 5px 14px rgba(21,94,117,.12); }
body[data-ui-style="compass"] #sidebar-cash { background: color-mix(in srgb, var(--sv-green) 10%, var(--sv-surface)) !important; border-color: color-mix(in srgb, var(--sv-green) 42%, var(--sv-border)) !important; }
body[data-ui-style="compass"] .stat-row { border-bottom-color: var(--sv-border-lo); }
body[data-ui-style="compass"] #compact-stats-bar { background: var(--sv-surface); border-color: var(--sv-border); }
body[data-ui-style="compass"] input,
body[data-ui-style="compass"] select,
body[data-ui-style="compass"] textarea { background: var(--sv-surface); color: var(--sv-text); border-color: var(--sv-border); }
body[data-ui-style="compass"] :focus-visible { outline: 3px solid rgba(21,94,117,.3); outline-offset: 2px; }

@media (max-width: 759px) {
  body[data-ui-style="compass"] { padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }
  body[data-ui-style="compass"] .header { box-shadow: 0 4px 14px rgba(15,61,75,.22); }
  body[data-ui-style="compass"] .hud-strip { background: var(--sv-hud-bg); }
  body[data-ui-style="compass"] .header-hud { border-right-color: color-mix(in srgb, var(--sv-accent) 24%, transparent); }
  body[data-ui-style="compass"] #compact-stats-bar { background: var(--sv-surface); border-radius: 10px; }
  body[data-ui-style="compass"] .mob-nav-btn {
    background: var(--sv-surface);
    border-color: var(--sv-border);
    border-radius: 12px;
    box-shadow: 0 3px 8px rgba(74,66,51,.08);
  }
  body[data-ui-style="compass"] .mob-nav-btn:hover,
  body[data-ui-style="compass"] .mob-nav-btn:active { background: #eaf4f2; border-color: var(--sv-accent); }
  body[data-ui-style="compass"] .mob-nav-label { color: var(--sv-accent); font-weight: 800; }
  body[data-ui-style="compass"] .mob-nav-here .mob-here-context { color: var(--sv-amber); }
  body[data-ui-style="compass"] .mob-nav-more { background: var(--sv-card); border-color: var(--sv-border); }
  body[data-ui-style="compass"] .mob-nav-more-toggle { color: var(--sv-accent); }
  body[data-ui-style="compass"] #panel-content,
  body[data-ui-style="compass"] #panel-stats { background: var(--sv-bg); }
  body[data-ui-style="compass"] #mob-tab-topbar { background: var(--sv-accent); border-bottom: 0; color: #fff; }
  body[data-ui-style="compass"] .mob-back-btn { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.4); color: #fff; }
  body[data-ui-style="compass"] .mob-tab-label { color: #fff; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-ui-style="compass"] *, body[data-ui-style="compass"] *::before, body[data-ui-style="compass"] *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}