:root {
  --ink: var(--khepri-black);
  --muted: #625e57;
  --paper: var(--khepri-ivory);
  --panel: #fffdf8;
  --line: #ded7ca;
  --line-strong: #bcb3a5;
  --accent: var(--khepri-orange);
  --accent-bright: var(--khepri-yellow);
  --accent-soft: #fff0dc;
  --positive: #176b4b;
  --positive-soft: #e5f4ec;
  --warm: #b64e00;
  --danger: #aa362f;
  --shadow: 0 18px 55px rgb(20 20 20 / 10%);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
button, input, select { font: inherit; }
button, .button { transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease; }
button:hover, .button:hover { transform: translateY(-1px); }
:focus-visible { box-shadow: 0 0 0 6px var(--accent-bright); outline: 3px solid var(--ink); outline-offset: 3px; }

.site-header { background: rgb(255 249 236 / 96%); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(18px); }
.header-inner { align-items: center; display: grid; gap: 28px; grid-template-columns: auto 1fr auto; margin: auto; max-width: 1280px; min-height: 68px; padding: 0 28px; }
.brand { align-items: center; display: inline-flex; text-decoration: none; }
.brand-logo-wide { width: 13.4rem; }
.brand-logo-compact { display: none; height: auto; width: 40px; }
.primary-nav, .header-actions, .public-actions { align-items: center; display: flex; gap: 8px; }
.primary-nav { justify-content: center; }
.nav-link, .nav-menu > summary { align-items: center; border-radius: 999px; color: var(--ink); cursor: pointer; display: inline-flex; font-size: .88rem; font-weight: 650; gap: 7px; list-style: none; padding: 9px 13px; text-decoration: none; }
.nav-link .khepri-icon, .nav-menu > summary .khepri-icon { height: 17px; width: 17px; }
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary::after { border-bottom: 2px solid currentColor; border-right: 2px solid currentColor; content: ""; height: 6px; margin: -3px 1px 0 4px; transform: rotate(45deg); transition: transform .16s ease; width: 6px; }
.nav-menu[open] > summary::after { transform: rotate(225deg); }
.nav-link:hover, .nav-menu > summary:hover, .nav-menu[open] > summary { background: #f7e8d3; }
.nav-menu { position: relative; }
.menu-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); display: grid; gap: 4px; left: 0; min-width: 310px; padding: 8px; position: absolute; top: calc(100% + 9px); }
.menu-panel::before { content: ""; height: 12px; left: 0; position: absolute; right: 0; top: -12px; }
.menu-panel a { align-items: start; border-radius: 10px; color: var(--ink); display: grid; gap: 12px; grid-template-columns: 24px 1fr; padding: 12px; text-decoration: none; }
.menu-panel a:hover { background: var(--accent-soft); }
.menu-panel a strong { font-size: .9rem; }
.menu-copy { display: grid; }
.menu-panel a .menu-copy > span, .account-identity span { color: var(--muted); font-size: .78rem; margin-top: 2px; }
.menu-panel-compact { min-width: 180px; }
.account-menu > summary { align-items: center; display: flex; }
.account-panel { left: auto; min-width: 285px; right: 0; }
.account-avatar { align-items: center; background: var(--accent); border-radius: 8px; color: var(--ink); display: inline-flex; height: 30px; justify-content: center; margin-right: 3px; width: 30px; }
.account-avatar .khepri-icon { height: 17px; width: 17px; }
.account-identity { border-bottom: 1px solid var(--line); display: grid; overflow-wrap: anywhere; padding: 10px 12px 14px; }
.menu-signout { border-top: 1px solid var(--line); margin-top: 4px; padding: 8px 4px 2px; }
.menu-signout button { align-items: center; background: transparent; color: var(--ink); display: flex; gap: 12px; text-align: left; width: 100%; }
.menu-signout .khepri-icon { height: 20px; width: 20px; }

main { margin: auto; max-width: 1280px; min-height: calc(100vh - 290px); padding: 58px 28px 88px; }
.site-footer { align-items: start; background: var(--ink); color: var(--paper); display: grid; gap: 40px; grid-template-columns: 1fr auto 1.3fr; padding: 48px max(28px, calc((100vw - 1224px) / 2)); }
.site-footer a { color: var(--paper); }
.site-footer p { color: #cfc6b8; font-size: .85rem; margin: 14px 0 0; }
.site-footer nav { display: grid; gap: 9px; }
.site-footer nav a { font-size: .85rem; text-decoration: none; }
.footer-disclosure { margin: 0 !important; max-width: 480px; }
.footer-brand img { display: block; height: auto; width: 13.4rem; }
.app-footer { align-items: center; grid-template-columns: 1fr; padding-bottom: 26px; padding-top: 26px; }
.app-footer > div { display: none; }
.app-footer .footer-disclosure { justify-self: end; max-width: 720px; }

.eyebrow { align-items: center; color: var(--ink); display: flex; font-size: .72rem; font-weight: 800; gap: 8px; letter-spacing: .13em; margin: 0 0 14px; text-transform: uppercase; }
.eyebrow::before { background: var(--accent); content: ""; display: inline-block; height: 8px; width: 8px; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1 { font-size: clamp(2.6rem, 6vw, 5.7rem); letter-spacing: -.065em; line-height: .96; margin: 0 0 20px; }
h2 { font-size: clamp(1.65rem, 3vw, 2.65rem); letter-spacing: -.045em; line-height: 1.06; margin: 0; }
h3 { font-size: 1.35rem; letter-spacing: -.025em; margin: 0; }
.muted { color: var(--muted); }
.small { font-size: .86rem; }
.microcopy { color: var(--muted); font-size: .78rem; margin-top: 18px; }
.text-link { font-weight: 750; text-decoration-color: var(--accent); }
.button-row { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }
.button, button { background: var(--accent); border: 1px solid transparent; border-radius: 999px; color: var(--ink); cursor: pointer; display: inline-block; font-size: .84rem; font-weight: 750; padding: 12px 19px; text-align: center; text-decoration: none; }
.button-dark { background: var(--ink); color: #fff; }
.button-quiet { background: transparent; color: var(--ink); }
.button-primary { background: var(--accent); padding: 14px 22px; }
.button-outline { background: transparent; border-color: var(--line-strong); color: var(--ink); padding: 14px 22px; }
.button-light { background: var(--accent-bright); color: var(--ink); }
.button-on-dark { background: var(--accent); border-color: var(--accent); color: var(--ink); }
button:disabled { cursor: not-allowed; opacity: .55; transform: none; }

.marketing-main { max-width: none; padding: 0; }
.hero { align-items: center; display: grid; gap: clamp(44px, 7vw, 110px); grid-template-columns: minmax(0, .9fr) minmax(400px, 1.1fr); margin: auto; max-width: 1280px; min-height: 680px; padding: 80px 28px; }
.hero > * { min-width: 0; }
.hero-copy { max-width: 620px; }
.hero-lede { color: #514d47; font-size: clamp(1.08rem, 1.8vw, 1.35rem); line-height: 1.55; margin: 0 0 30px; max-width: 580px; }
.product-preview { background: var(--ink); border: 3px solid var(--ink); border-radius: 24px; box-shadow: 12px 12px 0 var(--accent); color: var(--paper); min-height: 440px; overflow: hidden; padding: 30px; position: relative; }
.product-preview::after { background: var(--accent); content: ""; height: 9px; position: absolute; right: 30px; top: 0; width: 92px; }
.preview-top { align-items: center; display: flex; font-size: .85rem; font-weight: 700; justify-content: space-between; }
.status-dot { align-items: center; color: var(--accent-bright); display: inline-flex; gap: 7px; }
.status-dot::before { background: currentColor; border-radius: 50%; content: ""; height: 7px; width: 7px; }
.preview-value { display: block; font-size: clamp(2.8rem, 5vw, 4.8rem); letter-spacing: -.06em; line-height: 1; margin-top: 55px; }
.preview-caption { color: #cfc6b8; display: block; font-size: .82rem; margin-top: 8px; }
.preview-chart { align-items: end; border-bottom: 1px solid #746e64; display: flex; gap: 12px; height: 130px; margin: 24px 0 22px; padding: 0 8px; }
.preview-chart span { background: var(--accent); border-radius: 3px 3px 0 0; flex: 1; min-height: 18%; opacity: .96; }
.preview-chart span:nth-child(even) { background: var(--accent-bright); }
.preview-chart span:nth-child(1) { height: 34%; }.preview-chart span:nth-child(2) { height: 47%; }.preview-chart span:nth-child(3) { height: 42%; }.preview-chart span:nth-child(4) { height: 58%; }.preview-chart span:nth-child(5) { height: 54%; }.preview-chart span:nth-child(6) { height: 73%; }.preview-chart span:nth-child(7) { height: 69%; }.preview-chart span:nth-child(8) { height: 88%; }
.preview-grid { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.preview-grid div { border: 1px solid #746e64; border-radius: 12px; display: grid; padding: 14px; }
.preview-grid span { color: #cfc6b8; font-size: .72rem; text-transform: uppercase; }
.preview-grid strong { font-size: .88rem; margin-top: 3px; }
.trust-strip { border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 auto; max-width: 1280px; }
.trust-strip span { align-items: center; display: flex; font-size: .77rem; font-weight: 700; justify-content: center; min-height: 70px; padding: 14px; text-align: center; }
.trust-strip span + span { border-left: 1px solid var(--line); }
.marketing-section { margin: auto; max-width: 1280px; padding: 110px 28px; }
.section-intro { max-width: 720px; }
.section-intro > p:last-child { color: var(--muted); font-size: 1.05rem; max-width: 610px; }
.feature-grid { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; margin-top: 52px; }
.feature-card { border-radius: 20px; display: flex; flex-direction: column; min-height: 390px; padding: 34px; }
.feature-card-dark { background: var(--ink); color: var(--paper); }
.feature-card-light { background: var(--panel); border: 1px solid var(--line); color: var(--ink); }
.feature-card-orange { background: var(--accent); color: var(--ink); }
.feature-card h3 { font-size: clamp(1.9rem, 4vw, 3.2rem); margin-top: auto; }
.feature-card p { font-size: 1rem; max-width: 500px; }
.feature-card a { color: inherit; font-weight: 750; margin-top: 25px; text-decoration: none; }
.card-index { font-size: .78rem; font-weight: 800; letter-spacing: .1em; }
.process-section { border-top: 1px solid var(--line); display: grid; gap: 30px 80px; grid-template-columns: minmax(260px, .85fr) minmax(400px, 1.15fr); }
.process-list { list-style: none; margin: 0; padding: 0; }
.process-list li { border-top: 1px solid var(--line); display: grid; gap: 18px; grid-template-columns: 38px 1fr; padding: 24px 0; }
.process-list li > span { align-items: center; border: 1px solid var(--line-strong); border-radius: 50%; display: flex; font-size: .76rem; font-weight: 800; height: 30px; justify-content: center; width: 30px; }
.process-list p { color: var(--muted); margin: 5px 0 0; }
.process-section .text-link { grid-column: 2; }
.cta-band { align-items: center; background: var(--ink); color: var(--paper); display: flex; gap: 30px; justify-content: space-between; margin: 0 auto 100px; max-width: 1224px; padding: 48px; }
.cta-band .eyebrow { color: var(--accent-bright); }

.page-hero { margin: auto; max-width: 1224px; padding: 100px 28px 115px; }
.page-hero h1 { max-width: 900px; }
.page-hero > p:last-child { color: var(--muted); font-size: 1.2rem; max-width: 700px; }
.page-hero-compact { padding-bottom: 70px; }
.legal-doc { margin: auto; max-width: 820px; padding: 0 28px 110px; }
.legal-doc h2 { font-size: 1.35rem; margin: 46px 0 14px; }
.legal-doc p, .legal-doc li { color: var(--muted); font-size: 1.02rem; line-height: 1.65; }
.legal-doc ul { margin: 0 0 18px; padding-left: 22px; }
.legal-doc li { margin-bottom: 8px; }
.legal-updated { font-size: .95rem; }
.service-block { border-top: 1px solid var(--line); display: grid; gap: 60px; grid-template-columns: 140px minmax(0, 760px); margin: auto; max-width: 1224px; padding: 85px 28px; }
.service-block-tint { background: var(--accent-soft); border: 0; max-width: 1280px; padding-left: 56px; }
.service-number { border-top: 5px solid var(--accent); color: var(--ink); font-size: .78rem; font-weight: 800; padding-top: 10px; }
.service-block p { color: var(--muted); font-size: 1.05rem; }
.check-list { display: grid; gap: 12px; list-style: none; margin: 30px 0 0; padding: 0; }
.check-list li { border-top: 1px solid var(--line-strong); padding: 13px 0 0 27px; position: relative; }
.check-list li::before { color: var(--accent); content: "✓"; font-weight: 900; left: 0; position: absolute; }
.principles-grid { display: grid; gap: 1px; grid-template-columns: repeat(3, 1fr); margin: 100px auto; max-width: 1224px; background: var(--line); border: 1px solid var(--line); }
.principles-grid article { background: var(--panel); min-height: 270px; padding: 28px; }
.principles-grid article > span { color: var(--ink); font-size: .72rem; font-weight: 800; text-decoration: underline 3px var(--accent); text-underline-offset: 5px; text-transform: uppercase; }
.principles-grid h3 { margin-top: 70px; }
.principles-grid p { color: var(--muted); }
.timeline { margin: 0 auto 100px; max-width: 1224px; padding: 0 28px; }
.timeline article { align-items: start; border-top: 1px solid var(--line); display: grid; gap: 28px; grid-template-columns: 70px 1fr 100px; padding: 38px 0; }
.timeline article > strong { color: var(--ink); font-size: .72rem; letter-spacing: .1em; text-align: right; text-decoration: underline 3px var(--accent); text-underline-offset: 5px; text-transform: uppercase; }
.timeline-number { font-size: .8rem; font-weight: 800; }
.timeline p { color: var(--muted); max-width: 700px; }

.auth-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); margin: 20px auto; max-width: 560px; padding: 44px; }
.auth-panel h1 { font-size: clamp(2.5rem, 6vw, 4.2rem); }
.stacked-form { display: grid; gap: 18px; margin-top: 30px; }
label { color: var(--muted); display: grid; font-size: .73rem; font-weight: 750; gap: 7px; letter-spacing: .05em; text-transform: uppercase; }
input, select { background: var(--panel); border: 1px solid var(--line-strong); border-radius: 9px; color: var(--ink); padding: 13px; width: 100%; }
input:focus, select:focus { border-color: var(--ink); box-shadow: 0 0 0 3px var(--accent); outline: 2px solid var(--ink); outline-offset: 1px; }
.form-footer { color: var(--muted); margin: 28px 0 0; }
.error, .flash.error { background: #fce9e7; color: var(--danger); padding: 13px 15px; }
.success, .flash.success { background: var(--positive-soft); padding: 13px 15px; }
.flash { border-radius: 10px; }
.notice { background: #fff8e8; border-left: 3px solid #c99423; padding: 14px 18px; }
.errorlist { color: var(--danger); padding-left: 20px; }
.form-fields { display: grid; gap: 18px; }
.form-fields p { margin: 0; }
.form-fields label { margin-bottom: 7px; }
.human-verification { display: grid; gap: 10px; }
.human-verification h2, .human-verification p { margin: 0; }
.human-verification h2 { font-size: 1.05rem; }
.human-verification .cf-turnstile { min-height: 65px; }
fieldset { border: 1px solid var(--line); border-radius: 10px; margin: 0; padding: 20px; }
legend { font-size: 1.05rem; font-weight: 750; padding: 0 8px; }
input[type="checkbox"] { margin-right: 8px; width: auto; }
.helptext { color: var(--muted); font-size: .82rem; }
.inline-form { margin: 0; }
.inline-form button { padding: 9px 13px; }

.workspace-header { align-items: end; display: flex; gap: 30px; justify-content: space-between; margin-bottom: 22px; }
.workspace-header h1 { font-size: clamp(2.25rem, 5vw, 4.25rem); }
.workspace-header p:last-child { margin-bottom: 0; }
.workspace-nav { display: flex; flex-wrap: wrap; gap: 4px; margin: 22px 0 12px; }
.workspace-nav a { border-radius: 999px; color: var(--muted); font-size: .82rem; font-weight: 700; padding: 9px 14px; text-decoration: none; }
.workspace-nav a[aria-current="page"] { background: var(--ink); box-shadow: inset 0 -4px var(--accent); color: var(--paper); }
.workspace-subnav { border-bottom: 1px solid var(--line); display: flex; gap: 24px; overflow-x: auto; }
.workspace-subnav button { background: transparent; border: 0; border-bottom: 4px solid transparent; border-radius: 0; color: var(--muted); flex: none; padding: 11px 2px 9px; transform: none; }
.workspace-subnav button[aria-selected="true"] { border-bottom-color: var(--accent); color: var(--ink); }
.workspace-tab-panel { padding-top: 8px; }
.research-search { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 18px; padding: 20px; }
.research-participation { align-items: center; display: flex; gap: 24px; justify-content: space-between; margin-bottom: 18px; }
.research-participation > div { max-width: 760px; }
.research-participation form { align-items: center; display: flex; flex: none; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.research-search-row { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) auto; margin-top: 8px; }
.research-search-row button { border-radius: 9px; min-width: 110px; }
.research-results { display: grid; gap: 0; }
.research-result { align-items: center; border-top: 1px solid var(--line); color: var(--ink); display: flex; gap: 20px; justify-content: space-between; padding: 15px 4px; text-decoration: none; }
.research-result:hover { background: var(--accent-soft); }
.research-result > span:first-child { display: grid; min-width: 0; }
.research-result small, .research-result > span:last-child { color: var(--muted); font-size: .78rem; }
.research-result small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.research-capabilities { background: var(--line); border: 1px solid var(--line); display: grid; gap: 1px; grid-template-columns: repeat(3, 1fr); margin: 26px 0 0; }
.research-capabilities div { background: var(--panel); padding: 16px; }
.research-capabilities dt { color: var(--muted); font-size: .68rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.research-capabilities dd { font-weight: 750; margin: 5px 0 0; }
.research-price-heading { align-items: baseline; display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.25rem 0; }
.research-price-heading strong { font-family: var(--font-display); font-size: clamp(2.5rem, 7vw, 5rem); line-height: .9; }
.research-chart-frame { background: var(--ink); border-radius: 1.25rem; color: var(--paper); min-height: 14rem; padding: 1rem; }
.research-chart-frame svg { display: block; height: auto; width: 100%; }
/* Light fills: the frame is dark ink, where the base green and red read poorly. */
.research-stat-grid { margin-top: 1.25rem; }
.research-news-list { display: grid; gap: 0; }
.research-news-list article { border-top: 1px solid var(--line); padding: 1.1rem 0; }
.research-news-list article:first-child { border-top: 0; }
.research-news-list h3 { font-size: 1.15rem; margin: .2rem 0 .5rem; }
.research-news-list h3 a { color: var(--ink); }
.trade-research-widget { border-top: 1px solid var(--line); margin-top: 1.25rem; padding-top: 1.25rem; }
.trade-research-widget .section-heading { align-items: center; margin-bottom: 1rem; }
.trade-research-widget .section-heading h3 { margin: 0; }
.trade-research-widget .section-heading a { font-size: .78rem; font-weight: 750; }
.trade-preview-chart { border-radius: .75rem; min-height: 7rem; padding: .5rem; }
.trade-research-stats { background: var(--line); display: grid; gap: 1px; grid-template-columns: repeat(3, 1fr); margin: .75rem 0; }
.trade-research-stats div { background: var(--panel); padding: .75rem; }
.trade-research-stats dt, .trade-model-forecast span { color: var(--muted); font-size: .62rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.trade-research-stats dd { font-weight: 750; margin: .25rem 0 0; }
.trade-model-forecast { background: var(--ink); border-radius: .75rem; color: var(--paper); display: grid; gap: .2rem; padding: 1rem; }
.trade-model-forecast span, .trade-model-forecast small { color: #cfc6b8; }
.trade-model-forecast strong { color: var(--accent-bright); font-size: 1.8rem; }
.trade-model-forecast small { font-size: .68rem; }
.portfolio-summary { background: var(--ink); border-radius: 18px; color: var(--paper); overflow: hidden; padding: 30px; }
.portfolio-summary-header { align-items: start; display: flex; gap: 24px; justify-content: space-between; }
.portfolio-summary .eyebrow { color: var(--accent-bright); }
.portfolio-label { color: #cfc6b8; font-size: .82rem; }
.portfolio-value { display: block; font-size: clamp(2.7rem, 6vw, 5rem); letter-spacing: -.06em; line-height: 1; margin: 18px 0 7px; }
.portfolio-subline { color: #cfc6b8; font-size: .85rem; }
.data-toolbar { align-items: center; display: flex; gap: 14px; justify-content: space-between; }
.data-toolbar p { color: #cfc6b8; font-size: .78rem; margin: 0; max-width: 340px; text-align: right; }
.data-toolbar button { background: var(--accent); border-color: var(--accent); color: var(--ink); white-space: nowrap; }
.dashboard-grid { display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); margin-top: 30px; }
.metric { background: #23211e; border: 1px solid #4f4941; border-radius: 12px; padding: 18px; }
.metric-label { color: #cfc6b8; font-size: .68rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.metric-value { display: block; font-size: 1.5rem; letter-spacing: -.035em; margin-top: 6px; }
.workspace-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; margin-top: 18px; overflow: auto; padding: 24px; }
.section-heading { align-items: end; display: flex; gap: 20px; justify-content: space-between; margin-bottom: 18px; }
.section-heading h2 { font-size: 1.55rem; }
.status { color: var(--positive); font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.split { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.split > * { min-width: 0; }
.holdings-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .45fr); }
.holdings-grid > * { min-width: 0; }
.allocation-panel { overflow: visible; }
/* .table-wrap is the fund page's name for the same scroller. `position: relative`
   clips an absolutely positioned child (a .visually-hidden header) too, instead
   of letting it widen the page (#764). */
.table-scroll, .table-wrap { overflow-x: auto; position: relative; }
/* The research overlay chart (#993): ten distinguishable series, a zero line and a crosshair. */
.research-chart-chips, .research-chart-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; list-style: none; margin: 10px 0; padding: 0; }
.research-chart-chips li { border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; }
.research-chart-chips a { margin-left: 4px; text-decoration: none; }
.research-chart-ranges { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
/* Readable unselected, filled when selected (#993): the operator could not tell them apart. */
.research-chart-ranges a { background: var(--panel); border: 1px solid var(--line-strong); border-radius: 8px; color: var(--ink); font-weight: 600; padding: 4px 10px; text-decoration: none; }
.research-chart-ranges a:hover { border-color: var(--ink); }
.research-chart-ranges a[aria-current] { background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 700; }
.chart-line.research-chart-benchmark { stroke-dasharray: 7 4; }
.research-chart-legend .research-chart-benchmark a::after { content: " (benchmark)"; font-weight: 400; }
.research-chart-overlay { position: relative; }
.research-chart-tooltip { font-variant-numeric: tabular-nums; margin: 6px 0 0; }
.research-chart-studies { border: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0; padding: 0; }
.research-chart-study { fill: none; stroke-width: 1.5; }
.research-chart-study-sma20, .research-chart-study-ema20 { stroke: #d97706; } .research-chart-study-sma50, .research-chart-study-ema50 { stroke: #7c3aed; }
.research-chart-study-sma200, .research-chart-study-ema200 { stroke: #0891b2; } [class*='research-chart-study-ema'] { stroke-dasharray: 6 3; }
.research-chart-study-bollinger { stroke: #64748b; stroke-dasharray: 2 3; } .research-chart-study-rsi, .research-chart-study-macd { stroke: #2563eb; }
.research-chart-study-signal { stroke: #dc2626; } .research-chart-histogram { stroke: #94a3b8; stroke-width: 3; }
.research-chart-series-0 { color: #2563eb; stroke: #2563eb; } .research-chart-series-1 { color: #dc2626; stroke: #dc2626; }
.research-chart-series-2 { color: #16a34a; stroke: #16a34a; } .research-chart-series-3 { color: #d97706; stroke: #d97706; }
.research-chart-series-4 { color: #7c3aed; stroke: #7c3aed; } .research-chart-series-5 { color: #0891b2; stroke: #0891b2; }
.research-chart-series-6 { color: #db2777; stroke: #db2777; } .research-chart-series-7 { color: #65a30d; stroke: #65a30d; }
.research-chart-series-8 { color: #475569; stroke: #475569; } .research-chart-series-9 { color: #b45309; stroke: #b45309; }
/* The research Screens tab (#993): filters wrap to one column on a phone. */
.research-screens-filters { align-items: end; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: 12px 0; }
.research-screens-filters label { display: grid; gap: 4px; }
.research-screens-toggle { align-items: center; display: flex !important; gap: 8px; }
.research-screens-table th[data-sort] { cursor: pointer; white-space: nowrap; }
.research-screens-table td:nth-child(n+4) { font-variant-numeric: tabular-nums; text-align: right; }
/* Shares, price and value (#993, item 10). */
.research-panel-insiders :is(td, th):nth-child(n+6) { font-variant-numeric: tabular-nums; text-align: right; }
.mobile-nav { display: none; }
table { border-collapse: collapse; width: 100%; }
th, td { border-bottom: 1px solid var(--line); padding: 14px 10px; text-align: left; white-space: nowrap; }
th { color: var(--muted); font-size: .67rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
tbody tr:hover { background: #fff7e8; }
.trade-side, .trade-status { border-radius: 999px; display: inline-block; font-size: .68rem; font-weight: 800; padding: 4px 8px; text-transform: uppercase; }
.trade-side-buy { background: var(--positive-soft); color: var(--positive); }
.trade-side-sell { background: #fff0ea; color: var(--warm); }
.trade-status { background: #eee9df; color: #4f4941; }
.trade-status-filled, .trade-status-accepted, .trade-status-new { background: var(--positive-soft); color: var(--positive); }
.trade-status-canceled, .trade-status-rejected, .trade-status-expired { background: #fce9e7; color: var(--danger); }
.status-with-help { cursor: help; outline-offset: 3px; text-decoration: underline dotted; text-underline-offset: 2px; }
.account-detail-row { border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 20px; padding-top: 16px; }
.account-detail-row span { color: var(--muted); font-size: .82rem; }
/* On the dark portfolio card the muted ink was 2.86:1 (#806). */
.portfolio-summary .account-detail-row span { color: #cfc6b8; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; }
.button-secondary { background: #1d2521; color: #fff; }
.button-compact { font-size: .72rem; padding: 7px 10px; }
.button-danger { background: var(--danger); color: #fff; }
.inline-form { align-items: center; display: inline-flex; flex-wrap: wrap; gap: 8px; margin: 2px; }
.inline-form input[type="text"] { min-width: 130px; width: auto; }
.control-list { display: grid; gap: 12px; margin-top: 22px; }
.control-card { border-top: 1px solid var(--line); padding-top: 16px; }
.performance-chart { display: block; height: 260px; width: 100%; }
/* Zero is the reference both lines are read against, so it is drawn but never
   competes with them. */
.performance-baseline { stroke: var(--line-strong); stroke-dasharray: 5 6; stroke-width: 2; vector-effect: non-scaling-stroke; }
/* `preserveAspectRatio: none` stretches the viewBox to the panel, which would
   also stretch the stroke. `non-scaling-stroke` keeps both lines the same
   weight as each other and at any panel width. */
.performance-line { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; vector-effect: non-scaling-stroke; }
.performance-line-account { stroke: var(--ink); }
.performance-line-pool { stroke: var(--accent); }
.performance-line-spy { stroke: var(--muted); stroke-dasharray: 7 5; stroke-width: 2; }
.performance-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; }
.performance-legend-row { align-items: center; display: flex; font-size: .85rem; gap: 8px; }
.performance-swatch { border-radius: 2px; display: inline-block; height: 3px; width: 18px; }
.performance-swatch-account { background: var(--ink); }
.performance-swatch-pool { background: var(--accent); }
.performance-swatch-spy { background: var(--muted); }
.allocation-list { display: grid; gap: 16px; }
.allocation-row { display: grid; gap: 7px; }
.allocation-label { display: flex; font-size: .82rem; justify-content: space-between; }
.allocation-track { background: #eee9df; border-radius: 999px; height: 7px; overflow: hidden; }
.allocation-fill { background: var(--accent); border-radius: inherit; display: block; height: 100%; min-width: 2px; }
.admin-summary { margin-bottom: 18px; }
.admin-summary .metric { background: var(--panel); border-color: var(--line); color: var(--ink); }
.admin-summary .metric-label { color: var(--muted); }
a.metric { color: inherit; text-decoration: none; }
a.metric:hover .metric-value, a.metric:focus-visible .metric-value { text-decoration: underline; }
.admin-action-groups { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 24px; }
.admin-action-group { border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
.admin-action-list { list-style: none; margin: 18px 0 0; padding: 0; }
.admin-action-list li { align-items: center; border-top: 1px solid var(--line); display: flex; gap: 16px; justify-content: space-between; padding: 12px 0; }
.admin-action-list code { color: var(--muted); display: block; font-size: .7rem; margin-top: 3px; }
.action-status { border: 1px solid var(--line); border-radius: 999px; flex: none; font-size: .62rem; font-weight: 800; letter-spacing: .07em; padding: 5px 8px; text-transform: uppercase; }
.action-status-available { background: var(--positive-soft); color: var(--positive); }
.action-status-fresh { background: var(--positive-soft); color: var(--positive); }
.action-status-attention, .action-status-stale { background: #fce9e7; color: var(--danger); }
.action-status-empty { color: var(--muted); }
.action-status-planned { color: var(--muted); }
.text-action { font-size: .74rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.danger-button { background: var(--danger); color: #fff; }
.danger-zone { border-left: 4px solid var(--danger); }
.detail-list { margin: 22px 0 0; }
.detail-list div { border-top: 1px solid var(--line); display: grid; gap: 16px; grid-template-columns: minmax(110px, .6fr) minmax(0, 1.4fr); padding: 12px 0; }
.detail-list dt { color: var(--muted); font-size: .68rem; font-weight: 750; letter-spacing: .07em; overflow-wrap: anywhere; text-transform: uppercase; }
.detail-list dd { margin: 0; }
.break-word { overflow-wrap: anywhere; }
.visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
.address-suggestions { background: var(--panel); border: 1px solid var(--line); list-style: none; margin: -1px 0 0; padding: 0; }
.address-suggestions li + li { border-top: 1px solid var(--line); }
.address-suggestions button { background: var(--panel); border-radius: 0; color: var(--ink); padding: 12px 13px; text-align: left; width: 100%; }
.feedback-filters { align-items: end; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 22px; }
.feedback-filters p { margin: 0; }
.feedback-filters button { justify-self: start; }
.attachment-preview { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); list-style: none; margin: 0; padding: 0; }
.attachment-preview li { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; display: grid; gap: 7px; padding: 10px; }
.attachment-preview img { border-radius: 6px; height: 110px; object-fit: cover; width: 100%; }
.attachment-preview button { background: transparent; border: 0; color: var(--danger); justify-self: start; padding: 0; }
.attachment-list { display: grid; gap: 8px; list-style: none; margin: 18px 0 0; padding: 0; }
.attachment-list li { align-items: baseline; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px; padding-top: 8px; }
.checklist { display: grid; gap: 12px; margin: 16px 0 0; padding-left: 0; list-style: none; }
.checklist li { border-left: 3px solid var(--line); padding-left: 14px; }
.checklist li.done { color: var(--muted); text-decoration: line-through; }
.checklist li.todo { border-left-color: var(--accent); font-weight: 650; }
.checklist li form, .checklist li p { font-weight: 400; margin-top: 8px; }
/* The checklist's acceptance reads as one sentence beside its box, not as an
   uppercase form label, and its button is sized to its text (#798). */
.checklist li label { align-items: flex-start; display: flex; font-size: inherit; gap: 10px; letter-spacing: normal; text-transform: none; }
.checklist li form button { justify-self: start; width: auto; }
/* The fund page's figures, on the light panel (#796). */
.metric-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin: 16px 0; }
.metric-grid article { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.metric-grid span { color: var(--muted); display: block; font-size: .72rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.metric-grid strong { display: block; font-size: 1.35rem; letter-spacing: -.02em; margin-top: 6px; overflow-wrap: anywhere; }
.notice-list { display: grid; gap: 14px; list-style: none; margin: 0 0 24px; padding: 0; }
.notice-list li { border-left: 3px solid var(--line); display: grid; gap: 4px; padding-left: 16px; }
.notice-list li.unread { border-left-color: var(--accent); }
.notice-list li p { margin: 0; }
.feedback-history { display: grid; gap: 14px; list-style: none; margin: 0; padding: 0; }
.feedback-history li { border-left: 3px solid var(--line); display: grid; gap: 4px; padding-left: 16px; }
.feedback-history li p { margin: 4px 0 0; }

@media (max-width: 880px) {
  .header-inner { grid-template-columns: auto 1fr; }
  .primary-nav { display: none; }
  /* Wrap rather than scroll: a hidden scrollbar cut the last tab off with no cue (#808). */
  .workspace-subnav { column-gap: 18px; flex-wrap: wrap; overflow-x: visible; }
  /* The workspace links move into the account menu rather than vanishing (#764). */
  .mobile-nav { border-bottom: 1px solid var(--line); display: grid; }
  .header-actions { grid-column: 2; justify-content: end; }
  .hero { grid-template-columns: 1fr; }
  .product-preview { min-height: 400px; }
  .trust-strip { grid-template-columns: 1fr 1fr; }
  .trust-strip span:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .trust-strip span:nth-child(4) { border-top: 1px solid var(--line); }
  .process-section, .service-block { grid-template-columns: 1fr; }
  .holdings-grid { grid-template-columns: 1fr; }
  .process-section .text-link { grid-column: 1; }
  .principles-grid { grid-template-columns: 1fr; }
  .site-footer { grid-template-columns: 1fr 1fr; }
  .footer-disclosure { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .header-inner { gap: 12px; min-height: 62px; padding: 0 18px; }
  .brand-logo-wide { display: none; }
  .brand-logo-compact { display: block; }
  .account-label { display: none; }
  .public-actions .button { padding: 9px 13px; }
  main { padding: 38px 18px 65px; }
  .marketing-main { padding: 0; }
  .hero, .marketing-section, .page-hero, .service-block, .timeline { padding-left: 18px; padding-right: 18px; }
  .hero { min-height: auto; padding-bottom: 60px; padding-top: 60px; }
  .product-preview { min-height: 360px; padding: 22px; }
  .feature-grid, .split, .admin-action-groups { grid-template-columns: 1fr; }
  .research-capabilities { grid-template-columns: 1fr 1fr; }
  .trade-research-stats { grid-template-columns: 1fr; }
  .research-search-row { grid-template-columns: 1fr; }
  .research-result { align-items: flex-start; flex-direction: column; gap: 4px; }
  .research-participation { align-items: flex-start; flex-direction: column; }
  .research-participation form { justify-content: flex-start; }
  .feature-card { min-height: 330px; }
  /* minmax(0, 1fr): money values must not widen a tile past its card (#764). */
  .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric { padding: 14px; }
  .metric-value { font-size: 1.2rem; }
  /* A 12px floor for the small labels, and 44px touch targets (#764). */
  .eyebrow, label, th, .status, .metric-label, .detail-list dt, .research-capabilities dt,
  .trade-side, .trade-status, .button-compact, .action-status, .text-action, .preview-grid span { font-size: .75rem; }
  /* Plain tables wrap on a phone rather than scroll sideways: a row label's note drops under it,
     and a five-column table fits the screen. Sortable tables stack as cards below 640px. */
  .workspace-panel { padding: 14px; }
  th, td { padding: 8px 4px; white-space: normal; }
  th { overflow-wrap: anywhere; }
  td { font-size: .875rem; }
  th[scope="row"] small { display: block; font-weight: 400; letter-spacing: 0; text-transform: none; }
  button, select, input:not([type="checkbox"], [type="radio"]), .brand { min-height: 44px; min-width: 44px; }
  .button { align-items: center; display: inline-flex; justify-content: center; min-height: 44px; }
  .site-footer nav a, .link-list a, td a, .text-action, .text-link, .feature-card a, .section-heading a,
  .form-footer a { align-items: center; display: inline-flex; min-height: 44px; min-width: 44px; }
  main summary { padding-block: 10px; }
  input[type="checkbox"] { height: 24px; width: 24px; }
  label:has(input[type="checkbox"]), label:has(+ input[type="checkbox"]) { align-content: center; min-height: 44px; }
  .portfolio-summary { border-radius: 12px; padding: 22px; }
  .portfolio-summary-header, .workspace-header, .cta-band { align-items: flex-start; flex-direction: column; }
  .data-toolbar { align-items: flex-start; flex-direction: column; }
  .auth-panel { border-radius: 12px; padding: 28px 22px; }
  .timeline article { grid-template-columns: 44px 1fr; }
  .timeline article > strong { grid-column: 2; text-align: left; }
  .site-footer { grid-template-columns: 1fr; padding: 38px 22px; }
  .footer-disclosure { grid-column: 1; }
  .app-footer .footer-disclosure { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* Admin visitor map (#549): a tile grid, shaded by visitors per state. */
.visitor-map {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: 4px;
  max-width: 640px;
  margin: 1rem 0;
}
.visitor-tile {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.1;
}
.visitor-tile small { font-weight: 400; font-size: 0.6rem; }
.visitor-shade-0 { background: var(--panel); color: var(--muted); }
.visitor-shade-1 { background: var(--accent-soft); }
.visitor-shade-2 { background: #ffd9a8; }
.visitor-shade-3 { background: #ffb866; }
.visitor-shade-4 { background: var(--accent); color: var(--ink); }
.visitor-shade-5 { background: var(--warm); color: #fff; }
.scale-switch { display: flex; gap: 0.25rem; margin: 0.75rem 0 1rem; flex-wrap: wrap; }
.scale-switch a {
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.85rem;
}
.scale-switch a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
/* One series, one hue: --warm clears 3:1 against the panel where the brand
   orange does not. Bars sit on the baseline with rounded data-ends and a gap. */
.visitor-chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 160px;
  padding-top: 1.2rem;
  border-bottom: 1px solid var(--line-strong);
}
.visitor-bar-slot {
  flex: 1 1 0;
  min-width: 2px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
}
.visitor-bar-slot:hover .visitor-bar { opacity: 0.75; }
.visitor-bar { width: 100%; max-width: 28px; background: var(--warm); border-radius: 4px 4px 0 0; }
.visitor-peak { position: absolute; top: -1.1rem; font-size: 0.7rem; color: var(--muted); }
.visitor-axis { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--muted); margin-top: 0.25rem; }
.visitor-axis + details { margin: 0.75rem 0 1.25rem; }

/* Fund analytics (#644): server-built inline SVG, no chart library. */
.fund-chart { margin: 12px 0; }
.fund-chart svg { background: #fff; border: 1px solid #e6e1d8; border-radius: 10px; display: block; height: 220px; width: 100%; }
.fund-chart polyline { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.fund-chart .line-fund { stroke: var(--accent); }
.fund-chart .line-benchmark { stroke: #4b6584; stroke-dasharray: 5 4; }
.fund-chart .line-drawdown { stroke: #b23a3a; }
.fund-chart .line-gross { stroke: #2f7d4f; stroke-dasharray: 2 3; }
.fund-chart .line-net { stroke: #b23a3a; }
/* The live universe benchmark and the fund's lead over it (#977). */
.fund-chart .line-universe { stroke: #8a6d1f; stroke-dasharray: 8 3; }
.fund-chart .line-difference { stroke: #6b4fa1; }
/* The policy fed random rankings, its mean and one standard deviation either side (#1360). */
.fund-chart .line-null { stroke: #7a7a7a; stroke-dasharray: 3 3; }
.fund-chart .line-null-band { stroke: #c9c2b6; stroke-dasharray: 1 3; }
.fund-chart .chart-zero { stroke: #c9c2b6; stroke-width: 1; vector-effect: non-scaling-stroke; }
/* The shadow books (#1395): one colour each, and the sessions their data can't be trusted shaded. */
.line-book-0 { --book: #2f7d4f; }
.line-book-1 { --book: #b23a3a; }
.line-book-2 { --book: #6b4fa1; }
.line-book-3 { --book: #c9a227; }
.line-book-4 { --book: #1f7a8c; }
.line-book-5 { --book: #a14f7a; }
.fund-chart [class*="line-book-"] { stroke: var(--book); }
.chart-legend [class*="line-book-"]::before { background: var(--book); }
.chart-band { fill: #b23a3a; fill-opacity: .08; stroke: none; }
/* Charts drawn by chart_core.js (#1044): labelled axes, light dashed gridlines, an
   area under the first line in its colour, and a crosshair with a readout. */
.fund-chart.is-drawn svg { height: auto; }
.fund-chart.is-drawn .chart-axis { display: none; }
.chart-grid { stroke: #e6e1d8; stroke-dasharray: 3 4; stroke-width: 1; }
.chart-tick { fill: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.chart-zero { stroke: #c9c2b6; stroke-width: 1; }
.chart-line { fill: none; stroke-linejoin: round; stroke-width: 2.25; }
.chart-crosshair { stroke: var(--ink); stroke-dasharray: 2 3; stroke-opacity: .45; }
polygon.chart-area { fill: var(--accent); fill-opacity: .1; stroke: none; }
.chart-tooltip { color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; margin: 6px 0 0; min-height: 1.2em; }
/* The portfolio card (#1044): the value now, its change over the range shown, and the range buttons. */
.portfolio-card { margin: 12px 0; }
.portfolio-card-head { align-items: flex-start; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }
.portfolio-card-title { color: var(--muted); font-size: .82rem; font-weight: 700; margin: 0; }
.portfolio-card-value { font-size: 1.9rem; font-variant-numeric: tabular-nums; font-weight: 800; margin: 2px 0; }
.portfolio-card-change { font-size: 1rem; font-weight: 700; margin-left: 6px; }
.portfolio-card-ranges { align-items: center; display: flex; gap: 4px; }
.portfolio-card-ranges button { background: transparent; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font-size: .8rem; padding: 5px 10px; }
.portfolio-card-ranges button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); }
/* The same card on a dark surface (#1124): every text on it at 4.5:1 or more against --ink, borders at 3:1. */
[data-surface="dark"] .portfolio-card-ranges button { border-color: #8a8378; color: var(--paper); }
[data-surface="dark"] .portfolio-card-ranges button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--ink); }
[data-surface="dark"] .gain { color: #6fcf97; }
[data-surface="dark"] .loss { color: #ff8a80; }
[data-surface="dark"] .muted, [data-surface="dark"] .chart-tooltip { color: #cfc6b8; }
/* Axes and the crosshair on a dark chart: the light-page greys vanished on ink (#993). */
.research-chart-frame .chart-tick, [data-surface="dark"] .chart-tick { fill: #cfc6b8; }
.research-chart-frame .chart-grid, [data-surface="dark"] .chart-grid { stroke: #3d3a35; }
.research-chart-frame .chart-zero, [data-surface="dark"] .chart-zero { stroke: #8a8378; }
.research-chart-frame .chart-crosshair, [data-surface="dark"] .chart-crosshair { stroke: var(--paper); stroke-opacity: .6; }
.research-chart-frame .research-chart-tooltip { color: #cfc6b8; }
.portfolio-card-refresh { border: 1px solid var(--line); border-radius: 8px; font-size: .95rem; padding: 2px 9px; text-decoration: none; }
.portfolio-history { margin: 12px 0; }
.metric-defined { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }
.fund-chart .bar-long { fill: #2f7d4f; }
.fund-chart .bar-short { fill: #4b6584; }
.fund-chart .bar-cost { fill: #b23a3a; }
.fund-chart .bar-dividend { fill: #c9a227; }
.chart-axis { color: var(--muted); display: flex; font-size: .78rem; justify-content: space-between; margin-top: 4px; }
.chart-legend { display: flex; flex-wrap: wrap; font-size: .8rem; gap: 14px; list-style: none; margin: 4px 0 8px; padding: 0; }
.chart-legend li::before { border-radius: 2px; content: ""; display: inline-block; height: 10px; margin-right: 6px; width: 10px; }
.chart-legend .line-fund::before { background: var(--accent); }
.chart-legend .line-benchmark::before { background: #4b6584; }
.chart-legend .line-gross::before { background: #2f7d4f; }
.chart-legend .line-drawdown::before { background: #b23a3a; }
.chart-legend .line-net::before { background: #b23a3a; }
.chart-legend .line-universe::before { background: #8a6d1f; }
.chart-legend .line-difference::before { background: #6b4fa1; }
.chart-legend .line-null::before { background: #7a7a7a; }
.chart-legend .line-null-band::before { background: #c9c2b6; }
.chart-legend .bar-long::before { background: #2f7d4f; }
.chart-legend .bar-short::before { background: #4b6584; }
.chart-legend .bar-cost::before { background: #b23a3a; }
.chart-legend .bar-dividend::before { background: #c9a227; }
.exposure-bars { display: grid; gap: 8px; margin: 12px 0; }
.exposure-row { align-items: center; display: grid; gap: 12px; grid-template-columns: minmax(90px, 180px) 1fr minmax(80px, auto); }
.exposure-track { background: #f1ede6; border-radius: 6px; display: block; height: 14px; overflow: hidden; position: relative; }
.exposure-fill { background: var(--accent); display: block; height: 100%; }
.exposure-fill.near-limit { background: #b23a3a; }
.fund-columns { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
/* The Top 10 banner over the ticket (#1227): one row of tiles, scrolled sideways on a phone. */
.top-ten-banner { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; margin: 0 0 12px; padding: 8px 12px; }
.top-ten-banner summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.top-ten-strip { display: flex; gap: 8px; list-style: none; margin: 8px 0 4px; overflow-x: auto; padding: 0 0 4px; scroll-snap-type: x proximity; }
.top-ten-strip li { border: 1px solid var(--line-strong); border-radius: 10px; flex: 0 0 auto; scroll-snap-align: start; }
.top-ten-strip a { display: flex; gap: 6px; padding: 6px 10px; text-decoration: none; white-space: nowrap; }
/* The ticket's current price and the trailing stop's starting trigger (#1284). */
.ticket-quote { margin: 4px 0 0; font-variant-numeric: tabular-nums; }
.ticket-trigger { margin: 2px 0 0; font-variant-numeric: tabular-nums; }
.gain { color: #2f7d4f; }
.loss { color: #b23a3a; }
/* Trade page (#658, #963, #1233): three columns on one screen, the ticket, Market and
   risk, and the chart over the Profile. Narrower, Market and risk sits beside the
   ticket with the chart and Profile under both; on a phone everything stacks in order. */
.trade-layout { align-items: start; display: grid; gap: 12px; grid-template-areas: "ticket dynamic chart" "ticket dynamic profile"; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); grid-template-rows: auto 1fr; }
.trade-layout > .workspace-panel { padding: 14px; }
.trade-layout > * { min-width: 0; }
/* Khepri's prefill (#1233): faint until the customer touches the field. */
.order-ticket .is-suggested { color: var(--muted); }
.trade-layout > .order-ticket { grid-area: ticket; }
.trade-layout > .metrics-chart { grid-area: chart; }
.trade-layout > .metrics-dynamic { grid-area: dynamic; }
.trade-layout > .metrics-profile { grid-area: profile; }
.metrics-khepri:empty { display: none; }
/* The forecast arrow (#955): green up, red down, wider the stronger the lean. */
.forecast-arrow { display: flex; align-items: center; gap: 10px; margin: 4px 0; }
.arrow { line-height: 1; }
.arrow-up { color: var(--positive); }
.arrow-down { color: var(--danger); }
.arrow-strength-1 { font-size: 1rem; }
.arrow-strength-2 { font-size: 1.35rem; }
.arrow-strength-3 { font-size: 1.7rem; }
.arrow-strength-4 { font-size: 2.05rem; }
.arrow-strength-5 { font-size: 2.4rem; }
.metrics-profile-columns { display: grid; gap: 0 28px; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
/* Narrower, the ticket beside the chart, then the model and risk beside the profile; a phone stacks them in the page's order: ticket, chart, model and risk, profile. */
@media (max-width: 1100px) { .trade-layout { grid-template-areas: "ticket chart" "dynamic profile"; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; } }
@media (max-width: 680px) { .trade-layout { grid-template-areas: "ticket" "chart" "dynamic" "profile"; grid-template-columns: minmax(0, 1fr); } }
/* The order ticket (#1050): sections in a two-column grid, labels above inputs of one
   height, and a reserved line under each for help or an error, so a message never
   stretches a neighbour. The section titles take the Stock Metrics cards' h3 scale. */
.ticket-section { border: 0; margin: 0; min-width: 0; padding: 0; }
.ticket-section + .ticket-section { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 4px; }
.ticket-section legend { float: left; font-size: 1rem; font-weight: 650; margin: 10px 0 6px; padding: 0; width: 100%; }
.ticket-row { align-items: start; clear: both; display: grid; gap: 2px 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ticket-field { align-content: start; display: grid; gap: 4px; min-width: 0; }
.ticket-field[hidden] { display: none; }
.ticket-field label { color: var(--ink, inherit); font-size: .8rem; font-weight: 600; letter-spacing: normal; text-transform: none; }
.ticket-field input, .ticket-field select { box-sizing: border-box; font-size: .92rem; height: 38px; padding: 0 10px; width: 100%; }
.ticket-field.has-error input, .ticket-field.has-error select { border-color: #b23a3a; }
.ticket-message { color: var(--muted); font-size: .74rem; line-height: 1.25; margin: 0; min-height: 1.25em; }
.has-error > .ticket-message, .ticket-message.is-error { color: #b23a3a; }
.ticket-footer { border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 12px; padding-top: 12px; }
.ticket-confirm { background: var(--accent-soft); border-radius: 10px; margin: 0 0 10px; padding: 8px 12px; }
.ticket-confirm p { margin: 2px 0; }
.stock-metrics h3 { font-size: 1rem; margin: 14px 0 6px; }
.metrics-ranges button { padding: 4px 10px; }
.metrics-ranges button[aria-current="true"] { background: var(--ink); color: #fff; }
.metrics-change { margin: 6px 0; }
.metrics-grid { display: grid; gap: 4px 16px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0; }
.metrics-grid div { display: flex; justify-content: space-between; gap: 8px; }
.metrics-grid dt { color: var(--muted); font-size: .82rem; }
.metrics-grid dd { font-weight: 650; margin: 0; }
@media (max-width: 420px) { .ticket-row { grid-template-columns: minmax(0, 1fr); } }
.digest-text { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; font-size: .82rem; line-height: 1.5; overflow-x: auto; padding: 14px 16px; white-space: pre-wrap; }
.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list li { border-bottom: 1px solid var(--line); padding: 8px 0; }

/* The research Markets tab's panels (#993 Phase A): cards, sparklines and the heat map. */
.research-panel-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; list-style: none; margin: 8px 0; padding: 0; }
.research-panel-cards-compact { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.research-panel-card { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--border, #d8dee4); border-radius: 6px; min-width: 0; }
.research-panel-card-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.research-panel-subheading { margin: 12px 0 4px; font-size: 1rem; }
.research-panel-spark { width: 100%; height: 24px; }
.research-panel-spark polyline { fill: none; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.research-panel-periods { display: flex; gap: 8px; }
.research-panel-periods a[aria-current="true"] { font-weight: 600; text-decoration: none; }
.research-panel-heat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; list-style: none; margin: 8px 0; padding: 0; }
.research-panel-heat { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 6px; color: inherit; text-decoration: none; min-height: 72px; }
.research-panel-heat-name { font-size: 0.85rem; }
.research-panel-heat-up-strong { background: #1f7a3f; color: #fff; }
.research-panel-heat-up { background: #a8dbb8; }
.research-panel-heat-flat { background: #eef1f4; }
.research-panel-heat-down { background: #f2b8b5; }
.research-panel-heat-down-strong { background: #b23a3a; color: #fff; }
.research-panel-heat-none { background: transparent; border: 1px dashed var(--border, #d8dee4); }
.research-panel-filters { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-bottom: 8px; }
.research-panel-range { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.research-panel-range svg { width: 100%; height: 12px; overflow: visible; }
.research-panel-range rect { fill: var(--line); }
.research-panel-range .research-panel-range-mark { fill: currentColor; }
.research-panel-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.research-panel-article { padding: 8px 0; border-bottom: 1px solid var(--line); }
.research-panel-watchlist { padding: 8px 0; border-bottom: 1px solid var(--line, #d8ddd9); }
.research-panel-watchlist p { margin: 4px 0; overflow-wrap: anywhere; }
.research-panel-table td, .research-panel-table th { padding: 4px 8px; text-align: left; }

/* Sortable, filterable tables (#1111): table.js on any <table data-sortable>. */
/* Dense, like a spreadsheet: one line a record, tabular figures, a sticky header and
   first column, a hairline grid with zebra rows, and scrolling inside the table. */
.table-scroll:has(> table[data-sortable]) { max-height: 70vh; overflow: auto; border: 1px solid var(--line); border-radius: 6px; }
table[data-sortable] { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; }
table[data-sortable] th, table[data-sortable] td { padding: 4px 10px; height: 28px; white-space: nowrap; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); text-align: left; vertical-align: middle; }
table[data-sortable] thead th { position: sticky; top: 0; z-index: 2; background: var(--panel); border-bottom: 1px solid var(--line-strong); font-weight: 600; }
table[data-sortable] tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--panel); }
table[data-sortable] thead tr > :first-child { z-index: 3; }
table[data-sortable] tbody tr:nth-child(even) > * { background: #faf6ee; }
table[data-sortable] tbody tr:hover > * { background: var(--accent-soft); }
table[data-sortable] tfoot td { position: sticky; bottom: 0; background: var(--panel); border-top: 1px solid var(--line-strong); font-weight: 600; }
table[data-sortable] details { display: inline; }
table[data-sortable] details > summary { cursor: pointer; list-style: none; }
table[data-sortable] details > summary::before { content: "▸ "; color: var(--muted); }
table[data-sortable] details[open] > summary::before { content: "▾ "; }
table[data-sortable] details[open] { display: block; white-space: normal; }
.table-toolbar { display: flex; flex-wrap: wrap; align-items: start; gap: 0.5rem; justify-content: space-between; }
.table-export { font: inherit; font-size: 0.85em; }
table[data-sortable]:focus { outline: none; }
table[data-sortable] td.is-selected { background: #fde9cf !important; }
table[data-sortable] td.is-active { box-shadow: inset 0 0 0 2px var(--accent); }
.table-resize { position: absolute; top: 0; right: -3px; width: 6px; height: 100%; cursor: col-resize; touch-action: none; }
.table-columns { position: relative; }
.table-columns > label { display: block; white-space: nowrap; }
/* A phone shows each record as a card, its cells labelled from the headers. */
@media (max-width: 640px) {
  .table-scroll:has(> table[data-sortable]) { max-height: none; border: 0; }
  table[data-sortable], table[data-sortable] tbody, table[data-sortable] tr, table[data-sortable] td { display: block; width: auto; min-width: 0; }
  table[data-sortable] thead { display: none; }
  table[data-sortable] tbody tr { border: 1px solid var(--line); border-radius: 6px; margin-bottom: 0.5rem; background: var(--panel); }
  table[data-sortable] td { display: flex; justify-content: space-between; gap: 1rem; height: auto; border-right: 0; white-space: normal; position: static; }
  table[data-sortable] td::before { content: attr(data-label); color: var(--muted); font-weight: 600; }
  table[data-sortable] tbody tr:nth-child(even) > * { background: none; }
  table[data-sortable] tfoot { display: block; }
}
th .table-sort { all: unset; cursor: pointer; display: inline-flex; gap: 0.25rem; align-items: center; font: inherit; }
th .table-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.table-sort-arrow { font-size: 0.75em; min-width: 0.75em; }
.table-filters { margin: 0.5rem 0; }
.table-filters summary { cursor: pointer; }
.table-filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.5rem; margin-top: 0.5rem; }
.table-filter-grid fieldset { border: 1px solid var(--line, #d6d6d6); border-radius: 6px; padding: 0.25rem 0.5rem 0.5rem; margin: 0; }
.table-filter-grid input[type="text"], .table-filter-grid input[type="search"] { width: 100%; box-sizing: border-box; min-height: 36px; }
.table-filter-grid label { display: block; }
.table-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.table-chip { border: 1px solid var(--line, #d6d6d6); border-radius: 999px; background: none; padding: 0.15rem 0.6rem; cursor: pointer; font: inherit; font-size: 0.85em; }
@media (max-width: 640px) { .table-filter-grid { grid-template-columns: 1fr; } }