/* Spline Sans and Spline Sans Mono are SIL Open Font License 1.1 assets.
 * Their license notices live beside the self-hosted WOFF2 files in vendor/fonts/. */
@font-face {
  font-family: 'Spline Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/vendor/fonts/spline-sans-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Spline Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/vendor/fonts/spline-sans-latin-500-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Spline Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/vendor/fonts/spline-sans-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Spline Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/vendor/fonts/spline-sans-latin-700-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/vendor/fonts/spline-sans-mono-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/vendor/fonts/spline-sans-mono-latin-500-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/vendor/fonts/spline-sans-mono-latin-600-normal.woff2') format('woff2');
}

:root {
  --bg: #0b0e15;
  --panel: #0d1119;
  --panel-2: #0c0f17;
  --elev: #141926;
  --border: rgba(255,255,255,0.07);
  --text: #e6e9ef;
  --muted: #9aa3b2;
  --faint: #5f6877;
  --accent: #4f8cff;
  --green: #3ddc97;
  --red: #ef5f6b;
  --warn: #e9b558;
  --warn-glow: rgba(233, 181, 88, .25);
  --control: #21262d;
  --control-hover: #3a4350;
  --focus-ring: rgba(79,141,255,.75);

  /* Phase 0 aliases keep current pages stable while the handoff names land. */
  --surface: var(--panel-2);
  --elevated: var(--elev);
  --good: var(--green);
  --bad: var(--red);
  --amber: var(--warn);
  --text-on-accent: #fff;
  --blue: #6aa9ff;
  --purple: #c69cff;
  --hover-bg: rgba(255, 255, 255, 0.05);
  --hover-border: rgba(255, 255, 255, 0.22);
  --chart-strip-bg: rgba(198,156,255,.06);
  --chart-strip-border: rgba(198,156,255,.28);
  /* Settings preference previews stay tokenized even before their choice is applied. */
  --settings-theme-dark-bg: #0b0e15;
  --settings-theme-dark-up: #3ddc97;
  --settings-theme-dark-down: #ef5f6b;
  --settings-theme-light-bg: #eef1f6;
  --settings-theme-light-up: #0f9d6b;
  --settings-theme-light-down: #e0414f;
  --settings-theme-tokyo-bg: #1f2335;
  --settings-theme-tokyo-up: #9ece6a;
  --settings-theme-tokyo-down: #f7768e;
  --settings-accent-1: #4f8cff;
  --settings-accent-2: #7aa2f7;
  --settings-accent-3: #9ece6a;
  --settings-accent-4: #bb9af7;
  --settings-accent-5: #e0af68;
  --settings-accent-6: #f7768e;
  --us: 1;

  --radius-xs: 3px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-xl: 18px;
  --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px;
  --font-xs: 11px; --font-sm: 12px; --font-base: 13px; --font-lg: 15px;
  --page-pad-x: 28px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Spline Sans', -apple-system, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.09); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }
::-webkit-scrollbar-track { background: transparent; }

select, button, input, textarea {
  background: var(--control);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12px;
  font-family: inherit;
  transition: border-color .15s, background-color .15s, color .15s, box-shadow .12s, opacity .12s;
}

button { cursor: pointer; }
button:hover:not(:disabled),
select:hover,
input:hover,
textarea:hover,
[role='button']:hover,
.action:hover,
.tool:hover,
.mini:hover,
.pill:hover {
  border-color: var(--hover-border);
  background-color: var(--hover-bg);
  color: var(--text);
}

button:active:not(:disabled),
.action:active:not(:disabled),
.tool:active:not(:disabled),
[role='button']:active {
  transform: translateY(1px);
}

a { color: inherit; }
a:hover { background-color: var(--hover-bg); }

button:disabled { cursor: wait; opacity: .62; }

select:focus-visible, input:focus-visible, textarea:focus-visible, button:focus-visible,
.mini:focus-visible, .pill:focus-visible {
  border-color: var(--accent);
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.chart-symbol-picker .chart-picker-control {
  border-radius: 6px;
}

.chart-symbol-picker .chart-picker-control:focus-visible {
  color: var(--text);
  background: rgba(79, 140, 255, 0.16);
  outline: 2px solid #e6e9ef;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(79, 140, 255, 0.4);
}

.chart-symbol-picker .chart-picker-control:disabled,
.chart-symbol-picker .chart-picker-control[readonly],
.chart-symbol-picker.is-readonly .chart-picker-control {
  color: var(--faint);
  cursor: not-allowed;
  opacity: .74;
  -webkit-text-fill-color: var(--faint);
}

.chart-symbol-picker .chart-picker-control:disabled:hover,
.chart-symbol-picker .chart-picker-control[readonly]:hover,
.chart-symbol-picker.is-readonly .chart-picker-control:hover {
  background: transparent;
  color: var(--faint);
}

button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
  font-weight: 600;
}

button.primary:hover { background: #5d9bff; }

.pos { color: var(--green); }
.neg { color: var(--red); }
.muted { color: var(--muted); }
.hidden { display: none !important; }

table { width: 100%; border-collapse: collapse; }

th, td {
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}

th {
  color: var(--muted);
  position: sticky;
  top: 0;
  z-index: 1;
}

.table-sort-control {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

.table-sort-control:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

td.l { text-align: left; }

.label {
  color: var(--faint);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.card, .panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.empty {
  padding: 18px;
  color: var(--muted);
  text-align: center;
}

.mini {
  font: inherit;
  font-size: 11px;
  padding: 2px 7px;
  cursor: pointer;
  background: var(--panel);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  transition: color .1s, border-color .1s;
}

.mini:hover {
  color: var(--text);
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.08);
}
.mini:active,
.pill:active,
button:active:not(:disabled) {
  transform: translateY(1px);
}
a.mini { text-decoration: none; display: inline-block; line-height: 1.4; }
a.mini { text-decoration: none; display: inline-block; line-height: 1.4; }

.pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--border);
}

.pill:hover {
  opacity: .85;
  transition: opacity .1s;
}

.mini {
  transition: background-color .1s, border-color .1s, color .1s;
}

.tool-item:hover {
  background: rgba(255,255,255,0.06);
  transition: background-color .1s;
}

label.chk:hover {
  background: rgba(255,255,255,0.03);
  transition: background-color .1s;
}

select:hover {
  border-color: rgba(255,255,255,0.15);
  transition: border-color .1s;
}

.num { font-family: 'Spline Sans Mono', monospace; font-variant-numeric: tabular-nums; text-align: right; }
.lbl,
.eyebrow-label { font: 600 10.5px/1 'Spline Sans', sans-serif; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }

code {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 12px;
}

/* Shared by the Solid AppRail and the framework-neutral renderAppRail.
   Collapsed rail is 60px (icons only); html[data-rail="expanded"] widens it
   to icons + labels. applySettings.js stamps the attribute from bt.settings
   before first paint so pages do not flash between widths. */
.app-rail {
  width: 60px;
  min-width: 60px;
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  align-items: stretch;
  justify-items: center;
  padding: 12px 8px;
  border-right: 1px solid var(--border);
  background: var(--panel);
  transition: width .16s ease, min-width .16s ease;
}
.app-rail-label {
  display: none;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 600 12px 'Spline Sans', sans-serif;
}
html[data-rail="expanded"] .app-rail {
  width: 210px;
  min-width: 210px;
  justify-items: stretch;
}
html[data-rail="expanded"] .app-rail-label { display: inline; }
html[data-rail="expanded"] .app-rail-link,
html[data-rail="expanded"] .app-rail-settings,
html[data-rail="expanded"] .app-rail-auth,
html[data-rail="expanded"] .app-rail-toggle {
  width: 100%;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 11px;
}
html[data-rail="expanded"] .app-rail-link > [aria-hidden="true"]:first-child,
html[data-rail="expanded"] .app-rail-settings > [aria-hidden="true"]:first-child,
html[data-rail="expanded"] .app-rail-toggle > [aria-hidden="true"]:first-child {
  width: 18px;
  flex: none;
  text-align: center;
}
.app-rail-icon {
  width: 18px;
  height: 18px;
  flex: none;
  display: block;
}
html[data-rail="expanded"] .app-rail-list { align-items: stretch; }
html[data-rail="expanded"] .app-rail-list > li { width: 100%; }
html[data-rail="expanded"] .app-rail-sublist { display: grid; }
html[data-rail="expanded"] .app-rail-bottom { align-items: stretch; }
html[data-rail="expanded"] .app-rail-brand {
  width: 100%;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 6px;
  background: transparent;
  color: var(--text);
  font: 700 13px 'Spline Sans', sans-serif;
}
html[data-rail="expanded"] .app-rail-brand-logo {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 8px;
}
html[data-rail="expanded"] .app-rail-settings .app-rail-auth-dot {
  position: static;
  margin-left: auto;
  box-shadow: none;
}
.app-rail-brand,
.app-rail-link,
.app-rail-settings,
.app-rail-toggle,
.app-rail-auth {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--muted);
  text-decoration: none;
}
.app-rail-brand {
  background: transparent;
}
.app-rail-brand-logo {
  width: 28px;
  height: 28px;
  display: block;
  flex: none;
  border-radius: 8px;
  object-fit: cover;
}
.app-rail-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.app-rail-group { display: grid; justify-items: center; gap: 4px; }
.app-rail-sublist {
  display: none;
  width: 100%;
  gap: 2px;
  margin: 0;
  padding: 0 0 0 28px;
  list-style: none;
}
.app-rail-sublink {
  min-height: 30px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 7px;
  color: var(--muted);
  text-decoration: none;
  font: 600 11px 'Spline Sans', sans-serif;
}
.app-rail-sublink:hover { color: var(--text); background: var(--hover-bg); }
.app-rail-sublink[aria-current="page"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.app-rail-sublink:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.app-rail-link,
.app-rail-settings,
.app-rail-toggle,
.app-rail-auth {
  border: 1px solid transparent;
  background: transparent;
  font: 700 11px 'Spline Sans', sans-serif;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.app-rail-link:hover,
.app-rail-settings:hover,
.app-rail-toggle:hover,
.app-rail-auth:hover {
  background: var(--hover-bg);
  color: var(--text);
}
.app-rail-link[aria-current="page"],
.app-rail-settings[aria-current="page"] {
  color: var(--text);
  border-color: rgba(79, 140, 255, 0.42);
  background: rgba(79, 140, 255, 0.16);
}
.app-rail-link:focus-visible,
.app-rail-settings:focus-visible,
.app-rail-toggle:focus-visible,
.app-rail-auth:focus-visible,
.app-rail-brand:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.app-rail-bottom {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.app-rail-settings { position: relative; }
.app-rail-auth-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--warn);
}
/* Inside the combined settings control the dot sits as a corner badge. */
.app-rail-settings .app-rail-auth-dot {
  position: absolute;
  right: 4px;
  bottom: 4px;
  box-shadow: 0 0 0 2px var(--panel);
}
.app-rail-auth-dot.loading { background: var(--faint); }
.app-rail-auth-dot.signed-in { background: var(--good); }
.app-rail-auth-dot.signed-out { background: var(--warn); }
.app-rail-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Shared viewport frame for transitional pages mounted beside renderAppRail. */
.app-rail-legacy-mount {
  position: fixed;
  inset: 0 auto 0 0;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  z-index: 60;
}
.app-rail-legacy-content {
  width: calc(100% - 60px);
  max-width: calc(100% - 60px);
  margin-left: 60px;
  transition: margin-left .16s ease, width .16s ease, max-width .16s ease;
}
html[data-rail="expanded"] .app-rail-legacy-content {
  width: calc(100% - 210px);
  max-width: calc(100% - 210px);
  margin-left: 210px;
}
@media (max-width: 860px) {
  .app-rail-legacy-mount {
    position: sticky;
    inset: auto;
    top: 0;
    width: 100%;
    min-width: 0;
    height: 65px;
    min-height: 65px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: 1fr;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    overflow: hidden;
  }
  .app-rail-legacy-mount .app-rail-list {
    min-width: 0;
    flex-direction: row;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
  }
  .app-rail-legacy-mount .app-rail-bottom { flex-direction: row; }
  html[data-rail="expanded"] .app-rail-legacy-mount {
    width: 100%;
    min-width: 0;
  }
  html[data-rail="expanded"] .app-rail-legacy-mount .app-rail-label { display: none; }
  html[data-rail="expanded"] .app-rail-legacy-mount .app-rail-link,
  html[data-rail="expanded"] .app-rail-legacy-mount .app-rail-settings,
  html[data-rail="expanded"] .app-rail-legacy-mount .app-rail-toggle {
    width: 40px;
    justify-content: center;
    padding: 0;
  }
  .app-rail-legacy-content {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }
}

.page-content { padding: 0 var(--page-pad-x); }
.page-content-narrow { max-width: 960px; margin: 0 auto; }

html.density-compact { font-size: 12px; }
html.density-compact .stat, html.density-compact th, html.density-compact td { padding: 2px 6px; }

html[data-theme="light"] {
  --bg: #eef1f6;
  --panel: #ffffff;
  --panel-2: #f5f7fb;
  --elev: #d9deea;
  --surface: var(--panel-2);
  --elevated: var(--elev);
  --text: #1a1f2b;
  --muted: #5b6472;
  --faint: #9aa3b2;
  --border: rgba(15,23,42,0.1);
  --control: #f9fbff;
  --control-hover: #e2e8f0;
  --focus-ring: rgba(79,140,255,.45);
  --green: #0f9d6b;
  --red: #e0414f;
  --warn: #c17d1f;
  --warn-glow: rgba(248, 165, 29, .25);
  --hover-bg: rgba(15, 23, 42, 0.05);
  --hover-border: rgba(15, 23, 42, 0.22);
}

html[data-theme="tokyo"] {
  --bg: #1f2335;
  --panel: #24283b;
  --panel-2: #292e42;
  --elev: #31385a;
  --surface: var(--panel-2);
  --elevated: var(--elev);
  --text: #c0caf5;
  --muted: #9aa5ce;
  --faint: #565f89;
  --border: rgba(192,202,245,0.1);
  --control: #2f3450;
  --control-hover: #3f4867;
  --focus-ring: rgba(80,120,255,.6);
  --green: #9ece6a;
  --red: #f7768e;
  --warn: #ff9e64;
  --warn-glow: rgba(255, 158, 100, .3);
  --hover-bg: rgba(192, 202, 245, 0.06);
  --hover-border: rgba(192, 202, 245, 0.28);
}