/* Civlso "Signal" palette for the app and legal pages.
   Loaded after every other app stylesheet, so it only has to restate the
   shared tokens and a handful of shared components. The same palette is used
   by the public site (css/marketing-site.css). The premium "Deep Space" theme
   keeps its own tokens from base.css. */

:root,
[data-theme="default"] {
  --bg: #05070C;
  --panel-bg: #0B0F18;
  --sidebar-bg: #080B12;
  --header-bg: rgba(5, 7, 12, 0.78);
  --border: #1C2436;
  --border-light: #2A344B;
  --text: #F2F5FA;
  --text-dim: #98A2B6;
  --text-muted: #5F6A80;
  --primary: #2E9BFF;
  --primary-hover: #58B0FF;
  --primary-bg: rgba(46, 155, 255, 0.12);
  --danger: #FF6B5A;
  --danger-hover: #FF8577;
  --danger-bg: rgba(255, 107, 90, 0.1);
  --success: #44E0D0;
  --success-bg: rgba(68, 224, 208, 0.1);
  --warning: #FFB020;
  --warning-bg: rgba(255, 176, 32, 0.1);
  --input-bg: #080B12;
  --glass-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.8);
  --signal-grad: linear-gradient(100deg, #44E0D0 0%, #9BE08A 30%, #F2C94C 58%, #FFA41B 78%, #2E9BFF 100%);
  --signal-s2: #111725;
}

[data-theme="light"] {
  --bg: #F7F6F2;
  --panel-bg: #FFFFFF;
  --sidebar-bg: #FBFAF7;
  --header-bg: rgba(247, 246, 242, 0.82);
  --border: #E6E2D8;
  --border-light: #D8D3C6;
  --text: #0C111C;
  --text-dim: #4B5466;
  --text-muted: #7C8496;
  --primary: #1F6FE0;
  --primary-hover: #185BBA;
  --primary-bg: rgba(31, 111, 224, 0.1);
  --danger: #D7263D;
  --danger-hover: #B51F33;
  --danger-bg: rgba(215, 38, 61, 0.08);
  --success: #0E9F8E;
  --success-bg: rgba(14, 159, 142, 0.1);
  --warning: #C77700;
  --warning-bg: rgba(217, 130, 0, 0.1);
  --input-bg: #FBFAF7;
  --glass-shadow: 0 24px 50px -32px rgba(12, 17, 28, 0.28);
  --signal-grad: linear-gradient(100deg, #0FA596 0%, #4FA83A 30%, #C98F00 58%, #E36F00 78%, #1F6FE0 100%);
  --signal-s2: #F1EFE9;
}

[data-theme="deepspace"] {
  --signal-grad: linear-gradient(100deg, #818CF8 0%, #A78BFA 50%, #22D3EE 100%);
  --signal-s2: #161722;
}

/* Typography: Inter for text, Manrope for headings, JetBrains Mono for data. */
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3,
.header h2,
.login-logo,
.profile-setup-title {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
  letter-spacing: -0.025em;
}
.mono { font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace; }

/* Sidebar */
.sidebar-title { color: var(--text); font-family: 'Manrope', 'Inter', sans-serif; font-weight: 800; }
.nav { padding: 12px 10px; }
.nav-section-title { padding: 14px 14px 6px; font-family: 'JetBrains Mono', 'SF Mono', monospace; }
.nav-item {
  border-left: 0;
  border-radius: 10px;
  padding: 9px 14px;
  margin: 1px 0;
  position: relative;
}
.nav-item:hover { background-color: var(--signal-s2); }
.nav-item.active { background-color: var(--signal-s2); color: var(--text); }
.nav-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 3px;
  background: var(--signal-grad);
}
.sidebar-footer { font-family: 'JetBrains Mono', 'SF Mono', monospace; }

/* Header + theme switcher */
.header { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.header h2 { font-weight: 800; }
.theme-switcher { border-radius: 999px; padding: 4px; background: var(--panel-bg); }
.theme-btn { border-radius: 999px; padding: 5px 12px; font-family: 'JetBrains Mono', 'SF Mono', monospace; border: 1px solid transparent; }
.theme-btn.active { background: var(--text); color: var(--bg); border-color: var(--text); }

/* Surfaces */
.panel { border-radius: 22px; }
.mode-tabs, .diff-dial { border-radius: 12px; }
.mode-tab { border-radius: 9px; }
.mode-tab.active { box-shadow: none; }

/* Buttons */
.btn-primary,
.btn-danger {
  border-radius: 12px;
  font-family: 'Manrope', 'Inter', sans-serif;
  font-weight: 800;
  letter-spacing: 0;
}
.btn-ghost { font-family: 'JetBrains Mono', 'SF Mono', monospace; }

/* Inputs */
.field-input { border-radius: 12px; }
.field-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-bg); }

/* Sign-in and profile setup cards */
#loginScreen, #profileSetupScreen { background: var(--bg); }
.login-card { border-radius: 24px; box-shadow: var(--glass-shadow); }

@media (prefers-reduced-motion: reduce) {
  .nav-item, .theme-btn { transition: none; }
}

/* Learning Home cards: match the rounded panels. */
.v10-open, .v10-mastery { border-radius: 18px; }
.v10-subject { border-radius: 14px; }
.v10-game-card { border-radius: 18px; overflow: hidden; }
.rpx-example, .labx-instrument, .activity-feed { border-radius: 14px; }

/* Paid-only subject badge in the sidebar */
.nav-pro-badge{margin-left:auto;flex:none;font:800 9.5px 'JetBrains Mono','SF Mono',monospace;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:999px;color:var(--warning);border:1px solid color-mix(in srgb,var(--warning) 45%,transparent);background:var(--warning-bg)}

/* Verify-email prompt before checkout */
.email-verify-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:16px;background:rgba(5,7,12,.6);backdrop-filter:blur(4px)}
.email-verify-card{width:min(440px,100%);background:var(--panel-bg);border:1px solid var(--border-light);border-radius:18px;padding:22px;box-shadow:var(--glass-shadow)}
.email-verify-card h3{font-size:18px;margin-bottom:8px}
.email-verify-card p{font-size:13px;line-height:1.55;color:var(--text-dim)}
.email-verify-card b{color:var(--text)}
.email-verify-actions{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.email-verify-note{margin-top:10px;min-height:1em}

/* Sidebar status: one amber dot marks preview features, explained once by the key below. */
.nav-preview-dot{margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--warning);flex:none;box-shadow:0 0 0 3px var(--warning-bg)}
.nav-preview-dot+span{margin-left:8px}
.nav-preview-dot+span:empty{display:none}
.nav-count{margin-left:auto;font:600 10.5px 'JetBrains Mono','SF Mono',monospace;color:var(--text-muted);flex:none}
.nav-preview-key{display:flex;gap:9px;align-items:flex-start;margin:12px 6px 0;padding:9px 11px;border-radius:10px;background:var(--signal-s2,var(--input-bg));font-size:11.5px;line-height:1.45;color:var(--text-dim)}
.nav-preview-key .nav-preview-dot{margin:5px 0 0;box-shadow:none}
.nav-preview-key b{color:var(--text);font-weight:700}
.nav-pro-head{display:flex;align-items:center;gap:8px;margin:10px 4px 4px;padding:8px 10px;border:1px dashed var(--border-light);border-radius:12px;font-size:12px;font-weight:700;color:var(--text)}
.nav-pro-head .nav-pro-badge{margin-left:0}
.nav-pro-see{margin-left:auto;font:700 11.5px Inter,sans-serif;padding:4px 10px;border-radius:8px;border:1px solid var(--border-light);background:var(--panel-bg);color:var(--text);cursor:pointer}
.nav-item.nav-item-pro:not(.active) .label{color:var(--text-muted)}