/* ODDZAI precision frame. Local system fonts; no remote assets. */
:root {
  --ink: #edf2f5;
  --pine: #9bd2cb;
  --moss: #81b1ac;
  --stone: #34414a;
  --paper: #13191f;
  --canvas: #0c1014;
  --muted: #a6b3be;
  --line: #303b44;
  --green: var(--pine);
  --green-soft: #1d3032;
  --gold: #e5bf7e;
  --brick: #f1a195;
  --rail-width: 12.7rem;
  --header-height: 4.5rem;
  --radius: 3px;
}

* { box-sizing: border-box; }
html { color: var(--ink); background: var(--canvas); font: 15px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { margin: 0; }
a { color: var(--pine); text-underline-offset: .23em; }
a:hover { text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; }
button, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.75rem; padding: .65rem 1rem; border: 1px solid var(--pine);
  border-radius: 3px; background: var(--pine); color: #0d1819;
  font-size: .88rem; font-weight: 650; line-height: 1.3; text-decoration: none;
  cursor: pointer; transition: background-color 160ms, border-color 160ms;
}
button:hover, .button:hover { background: #294245; border-color: #294245; }
button:disabled { cursor: not-allowed; opacity: .6; }
.button-secondary { color: var(--pine); background: transparent; border-color: #47555e; }
.button-secondary:hover { color: var(--pine); background: var(--green-soft); border-color: var(--pine); }
input:not([type=checkbox]):not([type=radio]), select, textarea {
  width: 100%; max-width: 100%; min-height: 2.8rem; border: 1px solid #47555e;
  border-radius: 3px; padding: .65rem .75rem; background: #0e1419; color: var(--ink);
}
input::placeholder, textarea::placeholder { color: #91a1ad; }
textarea { min-height: 6rem; resize: vertical; }
input[type=checkbox], input[type=radio] { accent-color: var(--pine); }
label { display: block; font-weight: 600; margin-bottom: .35rem; }
:focus-visible { outline: 3px solid #b0e1d9; outline-offset: 3px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: ui-sans-serif, system-ui, sans-serif; font-weight: 650; letter-spacing: .015em; text-transform: uppercase; }
h1 { font-size: clamp(1.8rem, 2.6vw, 2.4rem); line-height: 1.15; margin-bottom: .65rem; }
h2 { font-size: 1.25rem; line-height: 1.3; margin: 1.5rem 0 .7rem; }
h3 { font-size: 1.05rem; margin: 1rem 0 .5rem; }
p { margin-bottom: .9rem; }
small { font-size: .8rem; }
strong { font-weight: 650; }

/* A stable frame: only the reading area scrolls. */
.skip-link { position: fixed; top: -6rem; left: 1rem; z-index: 100; padding: .75rem 1rem; background: var(--paper); border: 2px solid var(--pine); border-radius: 3px; }
.skip-link:focus { top: .7rem; }
.app-shell { width: 100%; min-width: 0; height: 100vh; height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--header-height) minmax(0, 1fr); }
.app-header { position: relative; z-index: 30; display: flex; align-items: center; gap: 1.5rem; padding-right: 2rem; min-width: 0; background: var(--paper); border-bottom: 1px solid var(--line); }
.brand { align-self: stretch; display: flex; align-items: center; flex-shrink: 0; gap: .75rem; width: var(--rail-width); padding: 1rem 1.25rem; color: var(--ink); background: #0e1419; text-decoration: none; }
.brand-copy { display: grid; gap: .1rem; }
.brand-name { font-size: 1.4rem; line-height: 1; font-weight: 750; letter-spacing: -.055em; }
.brand-name span { color: #9bd2cb; }
.brand-tagline { font-size: .62rem; letter-spacing: .09em; line-height: 1.6; color: #a6b3be; }
.header-note { min-width: 0; color: var(--muted); font-size: .82rem; }
.header-note strong { display: block; color: var(--pine); font-size: .86rem; }
.header-actions { display: flex; align-items: center; gap: .7rem; margin-left: auto; }
.header-actions form { margin: 0; }
.header-actions button { min-height: 2.75rem; padding: .5rem .8rem; border-color: transparent; background: transparent; color: var(--muted); font-size: .82rem; }
.header-actions button:hover { background: var(--green-soft); color: var(--pine); }
.account-link { display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; color: var(--pine); font-size: .82rem; font-weight: 600; text-decoration: none; }
.account-symbol { display: grid; place-items: center; height: 2.1rem; width: 2.1rem; border: 1px solid var(--line); border-radius: 3px; background: var(--green-soft); }
.app-body { min-width: 0; min-height: 0; display: grid; grid-template-columns: var(--rail-width) minmax(0, 1fr); }
.sidebar { min-width: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 1.5rem; padding: 1.15rem .9rem 1rem; color: #c2ced7; background: #0e1419; scrollbar-width: thin; scrollbar-color: #708b8a #0e1419; }
.nav-group { display: grid; gap: .3rem; }
.nav-label { padding: 0 .75rem; margin-bottom: .35rem; color: #93a7b4; font-size: .66rem; font-weight: 650; text-transform: uppercase; letter-spacing: .13em; }
.sidebar a { display: flex; align-items: center; gap: .8rem; min-height: 2.8rem; padding: .65rem .75rem; border-radius: 3px; color: #c2ced7; font-size: .84rem; font-weight: 550; line-height: 1.3; text-decoration: none; transition: background-color 160ms; }
.sidebar a:hover { color: #edf2f5; background: #294245; }
.sidebar a[aria-current=page] { color: var(--pine); background: #1d3032; font-weight: 700; }
.nav-icon { width: 1.2rem; height: 1.2rem; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.sidebar :focus-visible { outline-color: var(--gold); }
.sidebar .nav-tools { margin: 0; padding: 0; border: 0; background: transparent; }
.nav-tools > summary { padding: .55rem .75rem; color: #c2ced7; font-size: .8rem; font-weight: 550; }
.nav-tools[open] > summary { margin-bottom: .4rem; }
.nav-tools .nav-group a { font-size: .8rem; min-height: 2.6rem; }
.sidebar-note { margin-top: auto; padding: 1.1rem .75rem 0; border-top: 1px solid #303b44; color: #a6b3be; font-size: .74rem; line-height: 1.5; }
.sidebar-note strong { display: block; margin-bottom: .25rem; color: #edf2f5; font-size: .78rem; }
.sidebar-note p { margin-bottom: .6rem; }
.sidebar-note .private-line { display: flex; align-items: center; gap: .45rem; margin-top: .9rem; font-size: .7rem; }
.sidebar-note .private-line .nav-icon { width: .9rem; height: .9rem; }
.workspace { min-width: 0; overflow: auto; overscroll-behavior: contain; padding: 2rem clamp(1.4rem, 3vw, 2.8rem) 3rem; scroll-behavior: smooth; }
.workspace > main { min-width: 0; width: 100%; max-width: 74rem; margin: 0 auto; }
.workspace > main > header, .page-heading { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: .8rem 1.5rem; margin-bottom: 1.35rem; }
.workspace > main > header p, .page-heading p { max-width: 46rem; color: var(--muted); margin-bottom: 0; font-size: .94rem; }
.eyebrow { display: block; color: var(--pine); font-size: .7rem; letter-spacing: .12em; font-weight: 700; text-transform: uppercase; margin-bottom: .55rem; }
.muted, .helptext { color: var(--muted); }
.helptext { display: block; margin-top: .35rem; font-size: .83rem; }
.notice { background: #29251d; border: 1px solid #62543c; border-radius: 3px; padding: .85rem 1rem; margin: .9rem 0; font-size: .88rem; color: #e5c48e; }
.notice p:last-child { margin-bottom: 0; }
.card, .auth, .empty-state { background: var(--paper); border: 1px solid var(--line); border-radius: 3px; padding: 1.3rem 1.45rem; }
.card > :last-child { margin-bottom: 0; }
.card h2:first-child, .card h3:first-child { margin-top: 0; }
.empty-state { text-align: center; padding: 2.6rem 1.5rem; color: var(--muted); }
.empty-state h2 { margin-top: 0; color: var(--ink); }
.empty-state p { max-width: 38rem; margin-left: auto; margin-right: auto; }
.empty-state .actions { justify-content: center; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .85rem; margin: 1.25rem 0; }
.facts > div, .metric { padding: 1.05rem 1.15rem; background: var(--paper); border: 1px solid var(--line); border-radius: 3px; }
dt { color: var(--muted); font-size: .8rem; font-weight: 500; }
dd { margin: .4rem 0 0; overflow-wrap: anywhere; font-size: 1.4rem; font-weight: 650; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.metric-value { display: block; font-size: 1.75rem; font-weight: 650; letter-spacing: -.04em; line-height: 1.2; margin: .4rem 0; font-variant-numeric: tabular-nums; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; margin: 1rem 0; }
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem 1.2rem; }
.field-grid p { margin: 0; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 3px; background: var(--paper); margin: 1rem 0; }
table { width: 100%; border-collapse: collapse; font-size: .86rem; font-variant-numeric: tabular-nums; }
th, td { text-align: left; vertical-align: top; padding: .8rem .9rem; border-bottom: 1px solid var(--line); }
th { background: #1c252d; color: #b7c8d3; font-size: .76rem; font-weight: 650; }
tbody tr:last-child td { border-bottom: 0; }
td { overflow-wrap: anywhere; }
caption { text-align: left; font-weight: 600; padding: .9rem; color: var(--muted); }
code { overflow-wrap: anywhere; }
details { border: 1px solid var(--line); border-radius: 3px; padding: .8rem 1rem; background: var(--paper); margin: 1rem 0; }
summary { cursor: pointer; font-weight: 600; }
details[open] summary { margin-bottom: .8rem; }
.errorlist { color: #f1a195; padding-left: 1.2rem; }
.errorlist li { margin-bottom: .4rem; }

/* Tabs progressively enhance real section links; every panel works without JS. */
[data-tab-list], .page-tabs { display: flex; gap: .3rem; overflow-x: auto; padding: .3rem; margin: 1rem 0 1.35rem; border: 1px solid var(--line); border-radius: 3px; background: #11171c; scrollbar-width: thin; }
[data-tab], .page-tabs a { flex-shrink: 0; padding: .6rem .9rem; border: 1px solid transparent; border-radius: 3px; color: var(--muted); font-size: .83rem; font-weight: 600; text-decoration: none; }
[data-tab]:hover, .page-tabs a:hover { color: var(--pine); background: #203036; }
[data-tab][aria-selected=true], .page-tabs a[aria-current=page] { color: var(--pine); border-color: #52645f; background: var(--paper); box-shadow: 0 1px 3px #1b3b2f08; }
[data-tab-panel] { scroll-margin-top: 1rem; }
[data-tab-panel] > h2:first-child { margin-top: 0; }
[hidden] { display: none !important; }
.pagination { display: flex; align-items: center; justify-content: flex-end; gap: .7rem; padding: .7rem; }
.pagination span { font-size: .83rem; color: var(--muted); }
.pagination button { min-height: 2.5rem; padding: .4rem .8rem; }

/* Quiet, focused account screens. */
.auth { width: 100%; max-width: 31rem; margin: 1.5rem auto !important; padding: 2rem; }
.auth h1 { font-size: 1.9rem; }
.auth h2 { font-size: 1rem; }
.auth form > p { margin-bottom: 1.1rem; }
.auth button { width: 100%; }
.auth ul { padding-left: 1.2rem; }
.auth .helptext ul { margin: .4rem 0; }
.auth p, .auth li { font-size: .9rem; }
.auth .auth-footer { padding-top: 1rem; margin-top: 1.25rem; border-top: 1px solid var(--line); font-size: .8rem; }
.workspace > main.account-page { max-width: 47rem; }
.account-page .card { max-width: 39rem; }
.auth-hero { text-align: center; max-width: 36rem; margin: 1rem auto 0; }
.auth-hero p { margin: .5rem 0 0; color: var(--pine); font-size: 1.1rem; font-weight: 550; letter-spacing: -.02em; }
.guest .app-body { grid-template-columns: minmax(0, 1fr); }
.guest .workspace { padding: 1.2rem; }
.guest .app-header { padding: 0 clamp(1rem, 4vw, 3rem); }
.guest .brand { padding: 0; width: auto; background: transparent; color: var(--pine); }
.guest .brand-name span, .guest .brand-tagline { color: var(--muted); }
.guest .header-note { margin-left: auto; }
.mobile-nav, .mobile-menu { display: none; }

@media (max-width: 1080px) {
  :root { --rail-width: 13.6rem; }
  .brand { padding-left: 1rem; gap: .6rem; }
  .brand-name { font-size: 1.25rem; }
  .brand-tagline { font-size: .57rem; }
  .sidebar { padding-left: .7rem; padding-right: .7rem; }
  .workspace { padding: 1.5rem 1.25rem 2.5rem; }
  .app-header { padding-right: 1.25rem; gap: 1.25rem; }
  .header-note { font-size: .76rem; }
}
@media (max-width: 760px) {
  :root { --header-height: 4.2rem; }
  .app-header { padding: 0 1rem; gap: .75rem; }
  .brand { padding: 0; width: auto; gap: .55rem; background: transparent; color: var(--pine); }
  .brand-name { font-size: 1.2rem; }
  .brand-name span { color: var(--muted); }
  .brand-tagline { display: none; }
  .header-note { display: none; }
  .header-actions { margin-left: auto; }
  .header-actions > form, .header-actions > .account-link { display: none; }
  .guest .header-note { display: block; font-size: .72rem; }
  .app-body { grid-template-columns: minmax(0, 1fr); }
  .sidebar { display: none; }
  .workspace { padding: 1.4rem 1rem calc(6rem + env(safe-area-inset-bottom)); }
  .workspace > main > header, .page-heading { margin-bottom: 1.1rem; gap: .7rem; }
  h1 { font-size: 1.85rem; }
  .card, .empty-state { padding: 1.15rem; }
  .empty-state { padding: 2rem 1.15rem; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .facts > div { padding: .9rem; }
  dd { font-size: 1.3rem; }
  .field-grid { grid-template-columns: minmax(0, 1fr); }
  th, td { padding: .65rem .7rem; }
  .auth { padding: 1.5rem; margin-top: 1rem !important; }
  .guest .workspace { padding-bottom: 2rem; }
  [data-tab-list], .page-tabs { margin-bottom: 1.1rem; }
  [data-tab], .page-tabs a { padding: .55rem .8rem; }
  .mobile-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 25; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: .45rem .4rem max(.4rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--paper); }
  .mobile-nav a { display: flex; flex-direction: column; align-items: center; gap: .3rem; min-height: 3.1rem; padding: .35rem .1rem; border-radius: 3px; color: var(--muted); font-size: .66rem; font-weight: 550; text-decoration: none; }
  .mobile-nav a[aria-current=page] { color: var(--pine); background: var(--green-soft); font-weight: 700; }
  .mobile-nav .nav-icon { width: 1.3rem; height: 1.3rem; }
  .mobile-menu { display: block; position: static; margin: 0; padding: 0; border: 0; background: transparent; }
  .mobile-menu > summary { display: flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: .5rem .65rem; margin: 0; border: 1px solid var(--line); border-radius: 3px; color: var(--pine); font-size: .8rem; list-style: none; }
  .mobile-menu > summary::-webkit-details-marker { display: none; }
  .mobile-menu[open] > summary { background: var(--green-soft); }
  .mobile-menu-content { position: absolute; top: calc(var(--header-height) - .2rem); right: .75rem; width: min(20rem, calc(100vw - 1.5rem)); max-height: calc(100dvh - 9rem); overflow: auto; padding: .75rem; border: 1px solid var(--line); border-radius: 3px; background: var(--paper); box-shadow: 0 12px 40px #1b3b2f24; }
  .mobile-menu-content a { display: flex; align-items: center; gap: .7rem; min-height: 2.75rem; padding: .6rem .7rem; color: var(--pine); font-size: .85rem; text-decoration: none; border-radius: 3px; }
  .mobile-menu-content a:hover, .mobile-menu-content a[aria-current=page] { background: var(--green-soft); }
  .mobile-menu-content form { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--line); }
  .mobile-menu-content form button { width: 100%; justify-content: flex-start; }
  .mobile-menu-content .nav-label { display: block; margin-top: .5rem; color: var(--muted); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0s !important; animation-duration: 0s !important; }
}
@media print {
  .app-shell { height: auto; display: block; }
  .app-body { display: block; }
  .workspace { overflow: visible; padding: 0; }
  .sidebar, .header-actions, .mobile-nav, [data-tab-list], .page-tabs, .pagination { display: none; }
  [data-tab-panel][hidden], tr[hidden] { display: revert !important; }
  .app-header { position: static; padding: 0 0 1rem; }
  .brand { padding-left: 0; background: transparent; color: var(--pine); }
  .brand-name span, .brand-tagline { color: var(--muted); }
}

/* Compact, consistent hierarchy across research, money and account screens. */
html { color-scheme: dark; }
.brand { border-right: 1px solid var(--line); }
.brand-name { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 1.65rem; font-weight: 750; letter-spacing: -.045em; }
.brand-name span { font-weight: 500; color: var(--pine); }
.brand-tagline { text-transform: uppercase; font-size: .54rem; letter-spacing: .16em; }
.sidebar { border-right: 1px solid var(--line); gap: 1.1rem; }
.sidebar a, .nav-tools > summary, .mobile-nav a, .mobile-menu-content a { text-transform: uppercase; letter-spacing: .055em; font-size: .72rem; }
.sidebar a { min-height: 2.65rem; border-left: 2px solid transparent; }
.sidebar a[aria-current=page] { border-left-color: var(--pine); }
.sidebar a:hover { color: var(--ink); }
button:hover, .button:hover { color: var(--ink); }
.button-secondary:hover { color: var(--pine); }
.header-note strong { color: var(--ink); text-transform: uppercase; font-size: .72rem; letter-spacing: .06em; }
.workspace { padding-top: 1.5rem; }
.workspace > main { max-width: 90rem; }
label, th, [data-tab], .page-tabs a { font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; }
dd, .metric-value, .money { font-variant-numeric: tabular-nums; }
.card, .auth, .empty-state { padding: 1.15rem 1.25rem; }
h1 { font-size: clamp(1.65rem, 2.3vw, 2.1rem); }
h2 { font-size: 1.1rem; }
.page-heading p { font-size: .88rem; }
.auth-hero { padding: .7rem; }
.auth-hero p { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
@media (max-width: 1080px) { :root { --rail-width: 11.8rem; } }
@media (max-width: 760px) { .brand-name { font-size: 1.55rem; } .brand { border-right: 0; } .mobile-nav a { font-size: .6rem; } .workspace { padding-top: 1.1rem; } }
@media print { html { color: #101820; background: white; } .card, .auth, .empty-state, .table-wrap, th { background: white; color: #101820; } }
