/* Shared UI: one type scale, control size and spacing system. */
:root {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #202c3d;
  background: #f6f7f9;
  font-synthesis: none;
  --muted: #586579;
  --border: #dce2ea;
  --blue: #2859ae;
  --radius: 6px;
}
* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
a { color: #2354a0; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid #427bd3;
  outline-offset: 3px;
}
h1, h2, h3, h4 { color: #202c3d; line-height: 1.3; font-weight: 650; }
h1 { font-size: 24px; letter-spacing: -.025em; margin: 0 0 16px; }
h2 { font-size: 18px; margin: 0 0 12px; }
h3 { font-size: 16px; margin: 0 0 8px; }
h4 { font-size: 14px; margin: 0 0 8px; }
p { margin: 0 0 12px; overflow-wrap: anywhere; }
p:last-child { margin-bottom: 0; }
ul, ol { padding-left: 22px; margin: 8px 0 16px; }
li + li { margin-top: 4px; }
small, .note, .source-note, .row-detail { font-size: 13px; color: var(--muted); }
.note { margin: 8px 0 12px; }
.lede { color: var(--muted); margin-bottom: 20px; }
.eyebrow { font-size: 13px; color: var(--muted); font-weight: 600; margin: 0 0 8px; }
code { background: #eef2f7; padding: 2px 5px; border-radius: 4px; overflow-wrap: anywhere; }
.site-shell { min-height: 100vh; display: flex; flex-direction: column; }
.site-header { background: #fff; border-bottom: 1px solid var(--border); padding: 12px max(20px, calc((100vw - 1280px)/2)); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { font-size: 18px; font-weight: 650; color: #202c3d; text-decoration: none; white-space: nowrap; }
main { width: min(1280px, calc(100% - 40px)); margin: 0 auto; padding: 24px 0 40px; flex: 1; min-width: 0; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 20; background: white; padding: 12px; }
.skip-link:focus { top: 12px; }
.primary-nav { display: flex; align-items: center; gap: 20px; font-weight: 600; }
.primary-nav > a { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent; }
.primary-nav > a[aria-current], .nav-menu a[aria-current], .nav-more[data-current] > summary { color: #2354a0; }
.primary-nav > a[aria-current] { border-bottom-color: #2354a0; }
.nav-more { position: relative; margin: 0; }
.nav-more > summary { padding: 8px 0; }
.nav-menu { position: absolute; right: 0; top: 100%; min-width: 230px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; z-index: 10; box-shadow: 0 6px 20px #202c3d18; }
.nav-menu a { display: block; padding: 10px; text-decoration: none; border-radius: 4px; }
.nav-menu a:hover, .nav-menu a[aria-current] { background: #edf2f9; }
.nav-menu form { padding: 8px; border-top: 1px solid var(--border); margin-top: 8px; }
/* All action controls share dimensions, including buttons without a class. */
button, .button-link, .secondary-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; max-width: 100%; padding: 9px 14px;
  border: 1px solid var(--blue); border-radius: var(--radius);
  background: var(--blue); color: #fff;
  font: inherit; font-weight: 600; line-height: 20px;
  text-align: center; text-decoration: none; cursor: pointer;
}
button:hover, .button-link:hover { background: #20498f; border-color: #20498f; }
.secondary-button, .logout, .chart-card button, button[type="button"] {
  background: #fff; color: #29496f; border-color: #b9c6d7;
}
.secondary-button:hover, .logout:hover, .chart-card button:hover, button[type="button"]:hover { background: #edf2f9; border-color: #8da5c5; }
.exit-button { background: #944824; border-color: #944824; }
.exit-button:hover { background: #76391c; border-color: #76391c; }
button:disabled { background: #e8ecf1; border-color: #d4dbe5; color: #616c7d; cursor: not-allowed; }
.action-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 0; }
.action-bar form { margin: 0; }
.paper-note .action-bar form { display: block; margin: 0; max-width: none; }
form + p, form + details { margin-top: 12px; }
input, select, textarea { font: inherit; color: inherit; }
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea {
  border: 1px solid #b9c6d7; border-radius: var(--radius); padding: 9px 10px;
  min-height: 40px; max-width: 100%; min-width: 0; background: #fff; line-height: 20px;
}
input:disabled, select:disabled, textarea:disabled { background: #eef1f5; color: var(--muted); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--blue); width: 16px; height: 16px; }
textarea { resize: vertical; }
label, legend { font-weight: 600; }
fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin: 16px 0; min-width: 0; }
.practice-form, .login-card, #notes > form, .paper-note form { display: grid; gap: 8px; max-width: 560px; margin: 16px 0; }
.practice-form input:not([type="hidden"]), .practice-form select, .login-card input:not([type="hidden"]):not([type="checkbox"]) { width: 100%; }
.practice-form button, #notes button, .paper-note button { justify-self: start; }
.practice-form label:not(:first-child), #notes label:not(:first-child) { margin-top: 4px; }
.login-wrap { max-width: 440px; margin: 32px auto; }
.login-card { gap: 10px; }
.login-card .remember-me { display: flex; align-items: center; gap: 8px; }
.login-card button { margin-top: 6px; }
.inline-form, .chart-range, .overlay-controls, #session-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 16px 0; }
.backtest-settings fieldset { display: flex; flex-wrap: wrap; gap: 16px; }
.backtest-settings label { display: flex; flex-direction: column; gap: 6px; flex: 1 1 220px; max-width: 100%; }
.symbol-choices { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.symbol-choices label, .overlay-controls label { flex-direction: row; display: flex; align-items: center; gap: 6px; flex: none; min-height: 32px; }
.backtest-settings { margin-bottom: 20px; }
.card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; min-width: 0; }
main > section.card, main > details.card { margin-bottom: 16px; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.dashboard-heading, .desk-heading, .section-heading, .card-heading, .watchlist-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.dashboard-heading, .desk-heading { align-items: center; flex-wrap: wrap; }
.dashboard-heading h1, .desk-heading h1, .section-heading h2 { margin: 0; }
.section-heading { align-items: center; flex-wrap: wrap; }
.card-heading h2 { margin-bottom: 4px; }
.card-heading > a { flex-shrink: 0; }
.badge, .status, .paper-label, .count-pill { display: inline-block; font-size: 13px; font-weight: 600; color: #455873; background: #edf1f6; border-radius: 4px; padding: 3px 8px; }
.count-pill { margin-left: 6px; vertical-align: middle; }
.status, .entry-badge { color: #236348; background: #eaf4ee; }
.exit-badge { color: #88421f; background: #fcf0e7; }
.desk-status { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; color: var(--muted); margin: 0 0 20px; }
.error, .error-message { color: #8b2928; background: #fff1f0; border: 1px solid #ebc5c3; padding: 12px 16px; border-radius: var(--radius); }
.warning, .monitoring-warning, #attention-refresh-state:not(:empty) { background: #fff8ec; border: 1px solid #e5d3b1; border-radius: var(--radius); padding: 12px 16px; color: #714d20; margin-bottom: 16px; }
.monitoring-warning h2 { color: inherit; }
#attention-refresh-state:empty { display: none; }
.status-note { background: #edf2f9; padding: 16px; border-radius: var(--radius); }
details { margin: 12px 0; }
summary { cursor: pointer; padding: 8px 0; font-weight: 600; overflow-wrap: anywhere; }
details[open] > summary { margin-bottom: 12px; }
main > details.card { padding-top: 8px; padding-bottom: 8px; }
main > details.card[open] { padding-bottom: 20px; }
.monitoring-details summary .badge { margin-left: 8px; }
.action-section, .holdings-section { margin-bottom: 20px; }
.action-empty { border-top: 1px solid var(--border); padding: 12px 0; color: var(--muted); }
.action-empty a { margin-left: 6px; }
.entry-grid { display: grid; gap: 12px; }
.trade-card { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(260px, 2fr) auto; gap: 12px 20px; align-items: start; border: 1px solid var(--border); border-left: 3px solid var(--blue); border-radius: var(--radius); background: #fff; padding: 16px; min-width: 0; }
.exit-card { border-left-color: #944824; margin-bottom: 12px; }
.trade-card-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.trade-card-heading h3 { margin: 0; }
.trade-card > .button-link { grid-column: 3; grid-row: 1; }
.trade-card > .trade-values { margin: 0; }
.trade-card > .trade-detail, .trade-card > .note, .trade-card > .expiry-label, .trade-card > .reason-list { grid-column: 1 / -1; margin: 0; }
.trade-card > .trade-detail { border-top: 1px solid var(--border); padding-top: 4px; }
.trade-card .trade-detail > summary { color: #2354a0; }
.trade-explanation { max-width: 80ch; }
.trade-explanation h3:not(:first-child) { margin-top: 16px; }
.trade-explanation ul { margin-top: 8px; }
.expiry-label { color: #714d20; font-size: 13px; font-weight: 600; }
.trade-values, .account-values, .metrics { display: flex; flex-wrap: wrap; gap: 16px 28px; margin: 16px 0; }
.trade-values dt, .account-values dt, .metrics dt, .scan-values dt, .field-label { font-size: 13px; color: var(--muted); font-weight: 400; margin-bottom: 4px; }
.trade-values dd, .account-values dd, .metrics dd, .scan-values dd { margin: 0; font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.holding-row { display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: start; gap: 16px; padding: 16px 0; border-top: 1px solid var(--border); }
.holding-row .trade-values { margin: 0; }
.holding-row h3 { margin: 0; }
.trade-card[data-expired] [data-entry-link] { background: #e8ecf1; border-color: #d4dbe5; color: #616c7d; cursor: default; }
.watchlist-heading { gap: 24px; }
.add-symbol { flex-shrink: 0; }
.add-symbol label, .field-label { display: block; margin-bottom: 6px; }
.add-symbol > div { display: flex; gap: 8px; }
.add-symbol input { width: 140px; }
.watchlist-row { display: grid; grid-template-columns: 1.1fr .8fr 1.5fr auto; gap: 16px; align-items: center; padding: 16px 0; border-top: 1px solid var(--border); }
.watchlist-row h3 { margin: 0; }
.watchlist-row .note { margin: 4px 0 0; }
.row-detail { color: #714d20; margin: 6px 0; }
.daily-tools > .grid > .card { border: 0; padding: 0; }
.import-results { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 240px; overflow: auto; }
progress { width: 100%; accent-color: var(--blue); }
.scan-result { margin: 16px 0; overflow-wrap: anywhere; }
.scan-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.saved-context, .chart-card, .history-card { margin: 20px 0; }
#price-chart { height: 540px; width: 100%; }
.overlay-controls { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; }
#session-values { flex-basis: 100%; }
.backtest-chart { height: 260px; max-width: 100%; margin: 16px 0; }
.table-scroll { overflow-x: auto; max-width: 100%; }
table { border-collapse: collapse; width: 100%; font-size: 14px; font-variant-numeric: tabular-nums; }
th, td { text-align: right; padding: 12px; border-bottom: 1px solid var(--border); white-space: nowrap; vertical-align: top; }
th { font-size: 13px; font-weight: 600; color: var(--muted); background: #f6f8fb; }
th:first-child, td:first-child { text-align: left; }
td:has(details), td[colspan], .text-cell { white-space: normal; min-width: 240px; max-width: 520px; text-align: left; overflow-wrap: anywhere; }
td details { margin: 0; }
caption { text-align: left; margin: 12px 0; }
.table-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 16px; }
.paper-note { border-top: 1px solid var(--border); padding: 16px 0; }
.note-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.checksum { overflow-wrap: anywhere; }
@media (max-width: 960px) {
  .trade-card { grid-template-columns: 1fr 2fr; }
  .trade-card > .button-link { grid-column: 1 / -1; grid-row: auto; justify-self: start; }
  .grid { grid-template-columns: 1fr; }
  .watchlist-heading { flex-direction: column; }
  .watchlist-row { grid-template-columns: 1fr 1fr; }
  .watchlist-row form { justify-self: end; }
}
@media (max-width: 600px) {
  main { width: calc(100% - 32px); padding-top: 20px; }
  .site-header { padding: 12px 16px; flex-wrap: wrap; }
  .primary-nav { width: 100%; gap: 20px; justify-content: space-between; }
  .card { padding: 16px; }
  .card-heading { flex-wrap: wrap; }
  .trade-card, .holding-row { grid-template-columns: 1fr; }
  .trade-card > .button-link { grid-column: 1; }
  .trade-values, .account-values, .metrics { gap: 12px 20px; }
  .import-results { grid-template-columns: 1fr; }
  #price-chart { height: 400px; }
  .backtest-settings label { flex-basis: 100%; }
  .source-note { margin-top: 16px; }
}
@media (max-width: 380px) {
  .watchlist-row { grid-template-columns: 1fr; }
  .watchlist-row form { justify-self: start; }
  .add-symbol > div { flex-wrap: wrap; }
}
@media (pointer: coarse) {
  button, .button-link, .secondary-button, input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, .primary-nav > a, summary { min-height: 44px; }
}