:root {
  color-scheme: light;
  --bg: #f3f6f8;
  --surface: #ffffff;
  --surface-2: #eef3f5;
  --text: #132328;
  --muted: #5e6f75;
  /* Decorative dividers. Control outlines use --line-strong, which carries the 3:1
     non-text contrast a field border needs to be perceivable (WCAG 1.4.11). */
  --line: #dbe4e7;
  --line-strong: #898f91;
  --brand: #077477;
  --brand-strong: #056568;
  --brand-soft: #d8f0ef;
  --on-brand: #ffffff;
  --on-danger: #ffffff;
  --danger: #c23b3b;
  --success: #15785d;
  --shadow: 0 16px 45px rgb(18 45 52 / 8%);
}

/* D-152: dark is black without a tint (the user's choice: pure black); the teal accent stays. */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --surface: #121212;
  --surface-2: #1b1b1b;
  --text: #f5f5f5;
  --muted: #a3a3a3;
  --line: #262626;
  --line-strong: #6b6b6b;
  --brand: #42c2be;
  --brand-strong: #75d8d4;
  --brand-soft: #12302f;
  --on-brand: #000000;
  --on-danger: #000000;
  --danger: #ff7777;
  --success: #5fd0a8;
  --shadow: 0 18px 50px rgb(0 0 0 / 60%);
}

@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
    color-scheme: dark;
    --bg: #000000; --surface: #121212; --surface-2: #1b1b1b; --text: #f5f5f5;
    --muted: #a3a3a3; --line: #262626; --line-strong: #6b6b6b; --brand: #42c2be; --brand-strong: #75d8d4;
    --brand-soft: #12302f; --danger: #ff7777; --success: #5fd0a8; --shadow: 0 18px 50px rgb(0 0 0 / 60%);
    --on-brand: #000000; --on-danger: #000000;
  }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: var(--brand); text-decoration: none; }
button, input, select, textarea { font: inherit; }
.topbar { min-height: 68px; padding: 12px 4vw; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 92%, transparent); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(12px); }
.brand { color: var(--text); font-size: 22px; font-weight: 800; letter-spacing: -.04em; display: inline-flex; align-items: center; gap: 10px; }
.brand img { width: auto; height: 30px; }
/* The full logo for the theme in use; on a phone only the mark (new logo, 2026-10-10). */
.brand-mark, .brand-logo-dark, html[data-theme="light"] .brand-logo-dark { display: none; }
html[data-theme="dark"] .brand-logo-light { display: none; }
html[data-theme="dark"] .brand-logo-dark { display: block; }
@media (prefers-color-scheme: dark) { html[data-theme="system"] .brand-logo-light { display: none; } html[data-theme="system"] .brand-logo-dark { display: block; } }
.nav { display: flex; align-items: center; gap: 24px; flex: 1; }
.nav a { color: var(--muted); font-weight: 600; }.nav a:hover { color: var(--text); }
.top-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }.top-actions form { margin: 0; }.push-right { margin-left: auto; }
.icon-button { border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 9px; height: 36px; }
.icon-button { width: 36px; cursor: pointer; }.user-name { color: var(--muted); }
.page-shell { width: min(1240px, 92vw); margin: 38px auto 80px; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.heading-actions { display: flex; gap: 10px; }
h1, h2, p { margin-top: 0; } h1 { font-size: clamp(28px, 4vw, 42px); line-height: 1.05; letter-spacing: -.04em; margin-bottom: 0; } h2 { letter-spacing: -.025em; }
.eyebrow { margin-bottom: 8px; color: var(--brand); font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.button { border: 1px solid transparent; border-radius: 10px; padding: 10px 16px; cursor: pointer; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
[data-account-form] [data-filter-brokers][hidden], [data-account-form] [data-idx-code][hidden], [data-account-form] [data-cancel-broker][hidden] { display: none; }
[data-new-broker] > .field { margin-block: 12px; }
[data-new-broker] > summary { cursor: pointer; }
/* Shared checkbox pattern: label on the left, native control on the right. */
input[type="checkbox"], input[type="checkbox"].form-control, .stack-form input[type="checkbox"] { width: 20px; height: 20px; min-height: 20px; padding: 0; margin: 0; flex-shrink: 0; border: 1px solid var(--line-strong); accent-color: var(--brand); cursor: pointer; }
input[type="checkbox"]:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
:is(.field, .form-field, p):has(> input[type="checkbox"]) { display: block; align-self: start; }
:is(.field, .form-field, p):has(> input[type="checkbox"]) > label { display: inline-flex; align-items: center; vertical-align: middle; min-height: 44px; max-width: calc(100% - 36px); margin-right: 12px; cursor: pointer; }
:is(.field, .form-field, p):has(> input[type="checkbox"]) > input { vertical-align: middle; }
:is(.field, .form-field, p):has(> input[type="checkbox"]) > :is(small, .helptext, .errorlist) { display: block; margin-top: 6px; }
label:has(> input[type="checkbox"]) { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
label:has(> input[type="checkbox"]) > span { min-width: 0; }
.button.primary { background: var(--brand); color: var(--on-brand); }.button.primary:hover { background: var(--brand-strong); }.button.secondary { background: var(--brand-soft); color: var(--brand-strong); }.button.ghost { border-color: var(--line); background: transparent; color: var(--text); }.button.small { padding: 7px 11px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }.metric-grid.compact { grid-template-columns: repeat(3, 1fr); }
.metric-card { padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }.metric-card span { color: var(--muted); display: block; }.metric-card strong { display: block; font-size: 26px; margin-top: 8px; }.metric-card.accent { background: var(--brand-soft); }
.section-card { overflow: hidden; }.section-title { padding: 20px 22px 0; display: flex; justify-content: space-between; }.section-title h2 { margin: 0; }
.table-wrap { overflow-x: auto; position: relative; } /* a visually-hidden header stays inside the scroll (it widened the Setups page on phones) */ table { width: 100%; border-collapse: collapse; } /* One table standard across the app (D-097): 14px text, 40px rows, the same header. */
th, td { padding: 6px 18px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; font-size: 14px; } td { height: 40px; } th { padding-top: 12px; padding-bottom: 12px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .07em; } td small { color: var(--muted); display: block; }.numeric { text-align: right; font-variant-numeric: tabular-nums; }
.side { font-size: 12px; font-weight: 800; text-transform: uppercase; }.side.buy { color: var(--success); }.side.sell { color: var(--danger); }.side.opening { color: var(--brand-strong); }
.empty-state { padding: 44px 24px; text-align: center; color: var(--muted); }
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }.account-card { padding: 22px; }.account-card h2 { margin: 16px 0 5px; }.account-card p, .account-card small { color: var(--muted); }.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--success); margin-right: 8px; }
.account-card:has(.account-actions[open]) { position: relative; z-index: 12; }
.account-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.status-dot.inactive { background: var(--muted); }
.account-actions { position: relative; flex: none; }
.account-actions > summary { display: grid; place-items: center; width: 44px; height: 44px; margin: -10px -10px 0 0; border: 1px solid transparent; border-radius: 9px; color: var(--text); cursor: pointer; list-style: none; font-size: 29px; line-height: 1; }
.account-actions > summary::-webkit-details-marker { display: none; }
.account-actions > summary:hover, .account-actions[open] > summary { background: var(--surface-2); border-color: var(--line); }
.account-actions > summary:focus-visible { outline: 3px solid var(--brand); }
.account-actions-panel { position: absolute; right: 0; top: calc(100% + 6px); width: 180px; padding: 6px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: var(--shadow); }
.account-actions-panel a, .account-actions-panel button { display: flex; width: 100%; align-items: center; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.account-actions-panel a:hover, .account-actions-panel button:hover { background: var(--surface-2); }
.account-actions-panel a:focus-visible, .account-actions-panel button:focus-visible { outline: 3px solid var(--brand); }
.account-actions-panel form { margin: 0; }
.book-list-head, .book-list-row { display: grid; grid-template-columns: minmax(160px, 1.2fr) minmax(110px, .8fr) 75px minmax(210px, 2fr) 44px; gap: 18px; align-items: center; padding: 14px 22px; border-bottom: 1px solid var(--line); }
.book-section { overflow: visible; }
.book-list-head { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.book-list-row:last-child { border-bottom: 0; }
.book-list-row > div { min-width: 0; overflow-wrap: anywhere; }
.book-list-row:has(.account-actions[open]) { position: relative; z-index: 12; }
.book-list-name small { color: var(--muted); display: block; }
.book-list-name .status-label { margin-left: 8px; }
.book-list-accounts { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 760px) { .book-list-head { display: none; } .book-list-row { grid-template-columns: 1fr 44px; gap: 7px 12px; align-items: start; } .book-list-row > :nth-child(1) { grid-column: 1; grid-row: 1; } .book-list-row > :nth-child(2), .book-list-row > :nth-child(3), .book-list-row > :nth-child(4) { grid-column: 1; } .book-list-row > :nth-child(5) { grid-column: 2; grid-row: 1; } }
.account-form-section { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 18px; }
.account-form-section h2 { font-size: 18px; margin: 0 0 5px; }
.account-form-section p { margin: 0; color: var(--muted); }
.account-form-section[hidden], [data-indonesia-account-detail][hidden] { display: none; }
.form-card { max-width: 760px; padding: 26px; }.model-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.field { display: flex; flex-direction: column; gap: 6px; }.field:has(textarea), .form-actions, .form-errors { grid-column: 1 / -1; }.field label { font-weight: 700; }.field small { color: var(--muted); }.form-control, .stack-form input { width: 100%; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--text); padding: 10px 12px; min-height: 44px; }.form-control:focus, .stack-form input:focus { outline: 3px solid var(--brand-soft); border-color: var(--brand); }.errorlist, .form-errors { color: var(--danger); margin: 0; padding: 10px 14px; background: color-mix(in srgb, var(--danger) 10%, transparent); border-radius: 9px; list-style: none; }.form-actions { display: flex; gap: 10px; padding-top: 6px; }
.wide-form { max-width: 980px; }.full-width { grid-column: 1 / -1; }.paste-guide { padding: 13px; border-radius: 10px; background: var(--surface-2); }.paste-guide code { display: block; margin-top: 5px; color: var(--brand); }.row-error { background: color-mix(in srgb, var(--danger) 8%, transparent); }.row-warning { background: #fff6d8; color: #5b4910; }.inline-errors { margin: 0; padding-left: 18px; color: var(--danger); }.success-label { color: var(--success); font-weight: 700; }.warning-label { color: #9a7200; font-weight: 700; }.confirm-bar { display: flex; justify-content: flex-end; align-items: center; gap: 18px; padding-top: 20px; }
.messages { margin-bottom: 18px; }.message { padding: 12px 16px; border-radius: 10px; background: var(--brand-soft); }.muted { color: var(--muted); }
.page-intro { color: var(--muted); margin: -12px 0 24px; }.card-kicker { color: var(--muted); font-size: 13px; }.fee-grid { grid-template-columns: repeat(2, 1fr); }.rule-list { list-style: none; padding: 0; margin: 18px 0 0; border-top: 1px solid var(--line); }.rule-list li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }.rule-list strong { font-variant-numeric: tabular-nums; }.schedule-form { margin-bottom: 18px; max-width: none; }.schedule-form h2 { margin-bottom: 18px; }.section-title-inline p { color: var(--muted); margin-bottom: 18px; }.rule-form-list { display: grid; gap: 14px; }.rule-form { border: 1px solid var(--line); border-radius: 12px; padding: 18px; }.rule-form legend { padding: 0 8px; font-weight: 800; }.rule-fields { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 12px; }.rule-fields .field:nth-child(n+5) { grid-column: auto; }
.cost-warning { color: #a66b00; font-weight: 700; }
.market-warning { margin-top: 6px; color: #a66b00; }.market-warning summary { cursor: pointer; font-size: 11px; font-weight: 750; }.market-warning ul { min-width: 240px; margin: 6px 0 0; padding-left: 18px; color: var(--muted); font-size: 11px; }.warning-list { color: #a66b00; }
.method-override { margin-top: 6px; }.method-override summary { cursor: pointer; }.method-override p { min-width: 240px; margin: 6px 0 0; color: var(--muted); font-size: 11px; }.badge { display: inline-block; padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }.badge.override { color: var(--brand); background: var(--brand-soft); }
/* Closed details content is hidden by the browser, regardless of display:contents.
   Keep a reachable native menu trigger at every width, including with JS disabled. */
.nav-disclosure[open] > nav.nav { display: flex; flex-direction: column; align-items: stretch; position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; min-width: 240px; max-height: min(70vh, 620px); overflow-y: auto; padding: 10px; gap: 2px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow); }
.nav-disclosure[open] > nav.nav a { padding: 10px 12px; border-radius: 8px; min-height: 44px; display: flex; align-items: center; }
.nav-disclosure:not([open]) > nav.nav { display: none; }
@media (max-width: 560px) {
  .topbar { padding: 12px 16px; }
  .page-heading { flex-direction: column; }
}
.print-sheet { max-width: 900px; }.print-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-bottom: 16px; border-bottom: 2px solid var(--line); margin-bottom: 20px; }.print-header dl { display: grid; gap: 6px; margin: 0; text-align: right; }.print-header dt { color: var(--muted); font-size: 11px; }.print-header dd { margin: 0; font-weight: 700; }.print-section { margin-bottom: 22px; }.print-section h2 { font-size: 15px; margin-bottom: 8px; }.print-section table { width: 100%; border-collapse: collapse; }.print-section th { text-align: left; font-weight: 600; padding: 6px 0; border-bottom: 1px solid var(--line); }.print-section td { padding: 6px 0; border-bottom: 1px solid var(--line); }.print-footer { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }.print-actions { display: flex; gap: 10px; margin-bottom: 20px; }
@media print { .topbar, .print-actions, .messages { display: none !important; } body { background: white; color: black; } .page-shell { width: 100%; margin: 0; } .print-sheet { max-width: none; } .print-section { break-inside: avoid; } a[href]:after { content: ""; } }
.rule-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }.rule-summary dt { color: var(--muted); font-size: 11px; text-transform: uppercase; }.rule-summary dd { margin: 3px 0 0; font-weight: 750; }
.metric-text { font-size: 17px !important; line-height: 1.3; }.page-actions { margin-top: 18px; }.position-stack { display: grid; gap: 20px; }.position-card { overflow: hidden; }.position-summary { display: flex; justify-content: space-between; align-items: start; gap: 30px; padding: 24px; }.position-summary h2 { font-size: 30px; margin: 4px 0; }.position-summary p { color: var(--muted); margin: 0; }.position-summary dl { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 24px; margin: 0; }.position-summary dt { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }.position-summary dd { margin: 5px 0 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.lot-history { margin-top: 24px; }
.lot-history > summary { display: flex; align-items: baseline; gap: 10px; padding: 18px 22px; cursor: pointer; }
.lot-history > summary h2 { margin: 0; font-size: 18px; }
.lot-history[open] > summary { border-bottom: 1px solid var(--line); }.allocation-chip { display: block; font-size: 12px; color: var(--muted); margin: 2px 0; }
.reversed-row { opacity: .58; }.status-label { font-size: 11px; font-weight: 800; text-transform: uppercase; }.status-label.posted, .status-label.approved { color: var(--success); }.status-label.reversed, .status-label.rejected { color: var(--danger); }.status-label.pending { color: var(--brand); }.correction-original { padding: 22px; margin-bottom: 20px; }.correction-original dl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 0; }.correction-original dt { color: var(--muted); font-size: 12px; }.correction-original dd { margin: 4px 0 0; font-weight: 750; }.correction-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 20px; align-items: start; }.correction-grid .form-card { max-width: none; }.danger-card { border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }.button.danger { background: var(--danger); color: var(--on-danger); }
.table-card { overflow: hidden; margin-bottom: 22px; }.table-card .section-heading { padding: 20px 22px 8px; }.table-card .section-heading h2 { margin: 0; }.empty-cell { padding: 30px 18px; color: var(--muted); text-align: center; }
.corporate-action-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.status-label.planned { color: var(--muted); }.status-label.open { color: var(--brand); }.status-label.closed { color: var(--success); }.status-label.archived { color: var(--muted); }
.journal-section { margin-top: 22px; }.journal-entry-list article { padding: 20px 22px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 24px; }.journal-entry-list article:last-child { border-bottom: 0; }.journal-entry-list h3 { margin: 5px 0; }.journal-entry-list p, .journal-entry-list small { color: var(--muted); }.journal-signals { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }.journal-signals span { padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; }.journal-signals .mistake-flag { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }.tag-chip { display: inline-block; margin: 5px 4px 0 0; padding: 3px 8px; color: var(--tag-color); border: 1px solid color-mix(in srgb, var(--tag-color) 45%, var(--line)); background: color-mix(in srgb, var(--tag-color) 8%, transparent); border-radius: 999px; font-size: 11px; font-weight: 750; }.campaign-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; }.campaign-panel { padding: 22px; }.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 0; }.plan-grid div:first-child, .plan-grid div:nth-child(3) { grid-column: 1 / -1; }.plan-grid dt { color: var(--muted); font-size: 12px; text-transform: uppercase; }.plan-grid dd { margin: 4px 0 0; }.checklist { display: grid; gap: 8px; }.checklist form small { display: block; color: var(--muted); margin-left: 34px; }.checklist-button { width: 100%; display: flex; gap: 10px; text-align: left; padding: 10px 12px; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }.checklist-button.checked { color: var(--success); text-decoration: line-through; }.inline-link-form { display: flex; gap: 10px; padding: 18px 22px; border-top: 1px solid var(--line); }.inline-link-form select { flex: 1; }.journal-detail { padding: 26px; }.journal-meta, .journal-ratings { display: flex; flex-wrap: wrap; gap: 10px 22px; color: var(--muted); }.journal-body { margin: 26px 0; font-size: 17px; }.mistake-note { padding: 16px; margin: 18px 0; border-left: 4px solid var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); }.mistake-note p { margin: 6px 0 0; }.attachment-list { display: grid; }.attachment-list a { padding: 16px 22px; border-top: 1px solid var(--line); }.attachment-list small { display: block; color: var(--muted); }.playbook-card { padding: 22px; }.playbook-card h2 { margin: 12px 0 6px; }.playbook-card p { color: var(--muted); }.playbook-card ol { padding-left: 20px; }.checklist-form-grid { display: grid; gap: 10px; }.checklist-form-row { display: grid; grid-template-columns: 1fr 120px auto; gap: 12px; align-items: end; padding: 12px; background: var(--surface-2); border-radius: 10px; }
.cash-balance-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 24px; }.cash-balance-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }.cash-balance-card dl div { display: flex; justify-content: space-between; gap: 12px; }.cash-balance-card dt { color: var(--muted); }.cash-balance-card dd { margin: 0; font-variant-numeric: tabular-nums; }.cash-event-section { margin-top: 24px; }.cash-credit { color: var(--success); font-weight: 750; }.cash-debit { color: var(--danger); font-weight: 750; }.filter-actions { display: flex; gap: 8px; }.metric-card small { display: block; color: var(--muted); margin-top: 6px; }.metric-link { color: var(--text); transition: transform .15s ease, border-color .15s ease; }.metric-link:hover { transform: translateY(-2px); border-color: var(--brand); }.positive { color: var(--success); }.negative { color: var(--danger); }.section-title h3 { margin: 0; }.section-title p { margin: 4px 0 0; color: var(--muted); }.data-quality-note { border: 1px solid var(--line); background: var(--surface-2); border-radius: 12px; padding: 14px 16px; color: var(--muted); margin-bottom: 22px; }.dashboard-details { margin-top: 16px; scroll-margin-top: 88px; }.nav-chart { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; overflow: visible; }.nav-chart-gridline, .nav-chart-tick { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }.nav-chart-zero { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }.nav-chart-label { fill: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }.nav-equity-line { fill: none; stroke: var(--brand); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }.nav-drawdown-area { fill: color-mix(in srgb, var(--danger) 16%, transparent); }.nav-drawdown-line { fill: none; stroke: var(--danger); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.status-label.matched { color: var(--success); }.status-label.difference, .status-label.missing_in_trdlog, .status-label.missing_in_statement { color: var(--danger); }.status-label.resolved { color: var(--brand); }.status-label.large { font-size: 14px; padding: 8px 12px; border: 1px solid currentColor; border-radius: 999px; }.reconciliation-form-card { max-width: none; margin-bottom: 18px; }.reconciliation-form-card h2 { margin-bottom: 18px; }.statement-position-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.statement-position-row { display: grid; grid-template-columns: 1.5fr 1fr auto; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; align-items: end; }.reconciliation-actions { padding: 4px 0 24px; }.reconciliation-summary { padding: 22px; margin-bottom: 18px; }.reconciliation-summary dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0; }.reconciliation-summary dt { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }.reconciliation-summary dd { margin: 5px 0 0; font-weight: 750; }.reconciliation-summary dd small { display: block; color: var(--muted); font-weight: 400; }.reconciliation-difference { background: color-mix(in srgb, var(--danger) 5%, transparent); }.reconciliation-missing_in_trdlog, .reconciliation-missing_in_statement { background: color-mix(in srgb, var(--danger) 9%, transparent); }.reconciliation-resolved { background: color-mix(in srgb, var(--brand) 7%, transparent); }.reconciliation-notes { padding: 22px; margin-top: 18px; }.reconciliation-notes p { margin-bottom: 0; }
.reconciliation-alert { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 16px 18px; margin: -12px 0 28px; color: var(--text); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--line)); border-radius: 12px; }.reconciliation-alert span, .reconciliation-alert small { display: block; }.reconciliation-alert small { color: var(--muted); margin-top: 3px; }.reconciliation-alert b { color: var(--danger); }
.auth-layout { min-height: calc(100vh - 150px); display: grid; grid-template-columns: 1.1fr .8fr; align-items: center; gap: 9vw; }.auth-logo { display: block; width: auto; height: 56px; margin-bottom: 28px; }.auth-logo-dark, html[data-theme="light"] .auth-logo-dark { display: none; }html[data-theme="dark"] .auth-logo-light { display: none; }html[data-theme="dark"] .auth-logo-dark { display: block; }.auth-copy h1 { font-size: clamp(42px, 6vw, 72px); max-width: 720px; }.auth-copy p:last-child { font-size: 18px; color: var(--muted); max-width: 560px; }.auth-card { padding: 32px; }.stack-form { display: flex; flex-direction: column; gap: 10px; }.stack-form .button { margin-top: 10px; }.local-note { margin: 22px 0 0; font-size: 13px; }
@media (prefers-color-scheme: dark) { html[data-theme="system"] .auth-logo-light { display: none; }html[data-theme="system"] .auth-logo-dark { display: block; } }
.setup-key, .provisioning-uri { display: inline-block; max-width: 100%; padding: 4px 7px; color: var(--brand); background: var(--surface-2); border-radius: 6px; overflow-wrap: anywhere; user-select: all; }.recovery-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; padding: 0; list-style: none; }.recovery-codes code { display: block; padding: 8px 10px; color: var(--text); background: var(--surface-2); border-radius: 7px; font-size: 16px; letter-spacing: .08em; user-select: all; }
.glossary { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 10px 20px; margin: 14px 0 0; }.glossary dt { font-weight: 750; }.glossary dd { margin: 0; color: var(--muted); }

.skip-link { position: absolute; left: 16px; top: -100px; z-index: 50; padding: 12px 16px; min-height: 44px; display: inline-flex; align-items: center; background: var(--surface); color: var(--brand); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: var(--shadow); text-decoration: none; }.skip-link:focus { top: 12px; outline: 3px solid var(--brand-soft); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }.gain.level-1 { background: color-mix(in srgb, var(--success) 25%, var(--surface)); }.gain.level-2 { background: color-mix(in srgb, var(--success) 50%, var(--surface)); }.gain.level-3 { background: color-mix(in srgb, var(--success) 75%, var(--surface)); }.gain.level-4 { background: var(--success); }.loss.level-1 { background: color-mix(in srgb, var(--danger) 25%, var(--surface)); }.loss.level-2 { background: color-mix(in srgb, var(--danger) 50%, var(--surface)); }.loss.level-3 { background: color-mix(in srgb, var(--danger) 75%, var(--surface)); }.loss.level-4 { background: var(--danger); }
.breakdown-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; padding: 0 22px 12px; }.breakdown-grid caption { text-align: left; font-weight: 750; padding: 10px 0 4px; }.breakdown-card th[scope="row"] small { display: block; font-weight: 400; }.total-row th, .total-row td { border-top: 1px solid var(--line-strong); }
.source-list { margin-top: 4px; font-weight: 400; }.source-list summary { cursor: pointer; color: var(--brand); font-size: 12px; min-height: 24px; }.source-list summary:focus-visible { outline: 3px solid var(--brand-soft); }.source-list ul { margin: 4px 0 0; padding-left: 18px; font-size: 13px; }.source-link { padding: 0 22px; font-size: 13px; }
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; padding: 14px 18px 2px; }.pagination-range { margin: 0; color: var(--muted); font-size: 13px; }.pagination-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }.pagination-links a, .pagination-links > li > span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 9px; font-variant-numeric: tabular-nums; }.pagination-links a { color: var(--brand); text-decoration: none; }.pagination-links a:hover { background: var(--surface-2); }.pagination-links a:focus-visible { outline: 3px solid var(--brand-soft); }.pagination-links [aria-current="page"] { background: var(--brand-soft); border-color: var(--brand); font-weight: 750; }.pagination-links [aria-disabled="true"] { color: var(--muted); border-style: dashed; }.pagination-gap { border: 0 !important; min-width: 0 !important; color: var(--muted); }
@media (max-width: 850px) { .metric-grid, .metric-grid.compact, .card-grid, .cash-balance-grid { grid-template-columns: 1fr 1fr; }.campaign-grid { grid-template-columns: 1fr; }.statement-position-grid { grid-template-columns: 1fr; }.reconciliation-summary dl { grid-template-columns: 1fr 1fr; }.rule-fields { grid-template-columns: 1fr 1fr; }.position-summary { flex-direction: column; }.position-summary dl { grid-template-columns: 1fr 1fr; width: 100%; }.correction-grid { grid-template-columns: 1fr; }.auth-layout { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .topbar { padding: 0 16px; }.page-shell { width: calc(100% - 28px); margin-top: 24px; }.metric-grid, .metric-grid.compact, .card-grid, .cash-balance-grid, .model-form, .rule-fields, .reconciliation-summary dl, .plan-grid, .glossary, .recovery-codes { grid-template-columns: 1fr; }.statement-position-row, .checklist-form-row { grid-template-columns: 1fr; }.journal-entry-list article { align-items: flex-start; flex-direction: column; }.field:has(textarea), .form-actions, .form-errors, .plan-grid div:first-child, .plan-grid div:nth-child(3) { grid-column: auto; }.page-heading { align-items: flex-start; }.page-heading .button { white-space: nowrap; }.heading-actions { flex-wrap: wrap; }.language-form select { min-height: 44px; } }
/* D-087: wide entry forms and Positions grouped by ticker, account and purchase. */
.entry-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.entry-card { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.entry-card-wide { max-width: none; }
.entry-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.entry-groups-journal { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
.entry-group { margin: 0; min-width: 0; padding: 6px 18px 18px; border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; gap: 14px; }
.entry-group legend { padding: 0 8px; font-weight: 800; color: var(--brand-strong); }
.pair, .trio, .quad { display: grid; column-gap: 14px; row-gap: 6px; align-items: start; }
/* Fields in a pair share row tracks, so a label that wraps never pushes its input below
   the neighbour's: inputs, help and errors line up across the pair. */
:is(.pair, .trio, .quad) > .field { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 6px; align-content: start; }
:is(.pair, .trio, .quad) > .field > :is(label, .field-label) { align-self: end; }
.pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.quad { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.entry-preview { position: sticky; top: 88px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
/* The sale is a drawer over the right edge, like the transaction detail: the table under it
   keeps its columns and widths. "Hide" slides it out to a tab; the tab brings it back. */
.sale-panel { position: fixed; top: 68px; right: 0; bottom: 0; z-index: 30; width: min(380px, 100vw); overflow-y: auto; border-radius: 0; border-right: 0; border-top: 0; border-bottom: 0; box-shadow: -20px 0 45px rgb(18 45 52 / 14%); padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 12px; transition: transform .2s ease; }
.sale-panel.is-hidden { transform: translateX(100%); box-shadow: none; visibility: hidden; }
.sale-panel-controls { display: flex; justify-content: flex-end; gap: 6px; margin-bottom: -8px; }
.sale-panel-controls [hidden] { display: none; }
.sale-tab { position: fixed; right: 0; top: 50%; z-index: 30; transform: translateY(-50%); writing-mode: vertical-rl; padding: 14px 8px; border: 1px solid var(--line-strong); border-right: 0; border-radius: 10px 0 0 10px; background: var(--brand); color: #fff; font: inherit; font-weight: 800; cursor: pointer; box-shadow: var(--shadow); }
.sale-tab[hidden] { display: none; }
.sale-details { padding-top: 2px; }
.sale-details > summary { cursor: pointer; color: var(--brand); font-size: 13px; font-weight: 600; min-height: 28px; }
.sale-locked { margin: 0; font-size: 13px; }
.sale-details[open] { display: flex; flex-direction: column; gap: 12px; }
.sale-method .field label { font-size: 13px; }
/* D-108: the result and Save stay in view at the bottom of the drawer. */
.sale-footer { position: sticky; bottom: -22px; margin: 4px -22px -22px; padding: 12px 22px 16px; background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -8px 16px color-mix(in srgb, var(--text) 6%, transparent); display: flex; flex-direction: column; gap: 10px; }
.sale-result { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
.sale-preview .sale-result div { display: flex; flex-direction: column; gap: 2px; padding: 0; border: 0; }
.sale-preview .sale-result dd { text-align: left; }
.sale-panel .pair { align-items: start; }
.sale-picks .sale-picks-hint { margin: 0; font-size: 12px; }
.sale-result dt { color: var(--muted); font-size: 12px; font-weight: 600; }
.sale-result dd { margin: 0; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 700px) { .sale-panel { top: 0; z-index: 60; } }
.sale-panel form { display: flex; flex-direction: column; gap: 12px; }
.sale-instruction > .field { margin-top: 10px; }
.sale-panel textarea { min-height: 0; }
.entry-preview h2, .sale-panel h2 { margin: 0; font-size: 20px; }
.entry-preview dl, .sale-preview dl { margin: 0; }
.entry-preview dl div, .sale-preview dl div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.entry-preview dl div[hidden] { display: none; }
.entry-preview dt, .sale-preview dt { color: var(--muted); }
.entry-preview dd, .sale-preview dd { margin: 0; text-align: right; white-space: nowrap; }
.sale-total { font-weight: 800; }
.entry-actions, .sale-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.positions-layout { display: block; }
.button:disabled { opacity: .45; cursor: not-allowed; }
.positions-table { overflow: hidden; margin-bottom: 22px; }
.pos-row { display: grid; grid-template-columns: 28px minmax(0, 2.2fr) repeat(5, minmax(0, 1fr)); gap: 12px; align-items: center; min-height: 40px; padding: 4px 18px; border-bottom: 1px solid var(--line); font-size: 14px; font-variant-numeric: tabular-nums; }
.pos-row .num { text-align: right; min-width: 0; overflow-wrap: anywhere; }
.pos-row small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 400; }
.pos-head { padding-top: 12px; padding-bottom: 12px; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.pos-head small { text-transform: none; letter-spacing: 0; }
/* D-130: the totals as the table's last row, under their own columns. */
.pos-total { align-items: start; padding-top: 10px; padding-bottom: 10px; font-weight: 800; background: var(--surface-2); border-top: 2px solid var(--line); border-bottom: 0; border-radius: 0 0 var(--radius, 16px) var(--radius, 16px); }
/* Every figure on the top line; the percent sits under its amount. */
.pos-total > span { line-height: 20px; }
.pos-total .pos-name small { font-weight: 500; }
.pos-total .num small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 600; line-height: 16px; }
.positions-table .positions-unpriced { margin: 0; padding: 10px 18px 12px; font-size: 13px; }
.pos-name { min-width: 0; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; overflow: hidden; }
.pos-name > strong, .pos-name > label, .pos-name > span { flex: none; }
.pos-row .pos-name small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pos-name .badge { align-self: center; font-size: 11px; }
.pos-row .num { white-space: nowrap; }
.pos-link { font-size: 13px; font-weight: 700; }
/* A quiet Sell: an outlined text button the height of the text around it (D-096). */
.button.pos-sell { min-height: 28px; padding: 2px 12px; font-size: 13px; border-radius: 8px; border-color: var(--brand); background: transparent; color: var(--brand-strong); }
.button.pos-sell:hover { background: var(--brand-soft); }
.pos-bought { font-size: 13px; color: var(--muted); }
.pos-level-1 .num { font-weight: 700; }
.pos-single .pos-account-bar { padding-left: 46px; }
.pos-ticker > summary, .pos-account > summary { cursor: pointer; list-style: none; }
.pos-ticker > summary::-webkit-details-marker, .pos-account > summary::-webkit-details-marker { display: none; }
.pos-ticker > summary:focus-visible, .pos-account > summary:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }
.pos-toggle::before { content: "▸"; color: var(--muted); display: inline-block; transition: transform .15s ease; }
details[open] > summary > .pos-toggle::before { transform: rotate(90deg); }
.pos-level-1 strong { font-weight: 800; }
.pos-level-2 { background: var(--surface-2); }
.pos-level-2 .pos-name { padding-left: 18px; }
.pos-level-3 .pos-name { padding-left: 36px; }
/* The lot's checkbox moves in with its date, so it reads as part of the row (D-148). */
.pos-level-3 .pos-check { position: relative; left: 36px; }
.pos-level-3.is-picked { background: var(--brand-soft); }
.pos-check input { display: block; }
.pos-account-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-height: 40px; padding: 4px 18px 4px 60px; font-size: 14px; border-bottom: 1px solid var(--line); }
.pos-account-bar form { margin: 0; }
.pos-selling { color: var(--brand-strong); font-weight: 700; }
.pos-hint { margin: 0; padding: 8px 18px 8px 60px; color: var(--muted); font-size: 13px; border-bottom: 1px solid var(--line); }
.cell-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.badge-muted { color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); }
.sale-picks { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 8px; }
.sale-picks legend { font-weight: 800; margin-bottom: 6px; }
.sale-pick { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.sale-pick[hidden], [data-quantity-block][hidden], [data-picks-empty][hidden], [data-other-hint][hidden], [data-live-note][hidden] { display: none; }
.sale-pick label small { display: block; color: var(--muted); font-weight: 400; }
.sale-pick .inline-error { grid-column: 1 / -1; color: var(--danger); font-size: 13px; }
.sale-account, .sale-expected, .sale-live-note { margin: 0; font-size: 13px; }
.sale-preview h3 { margin: 6px 0; font-size: 15px; }
.sale-after { margin: 0; font-size: 12px; color: var(--muted); }
.sale-after strong { color: var(--text); }
.sale-instruction summary { cursor: pointer; color: var(--brand); font-size: 13px; min-height: 32px; }
.field-label { font-weight: 700; }
.field-static { min-height: 44px; display: flex; align-items: center; color: var(--muted); }
/* Below this width the side panel would squeeze the form's paired fields, so it moves below. */
@media (max-width: 1360px) { .entry-layout { grid-template-columns: 1fr; } .entry-preview { position: static; max-height: none; } }
@media (max-width: 850px) { .entry-groups, .entry-groups-journal { grid-template-columns: 1fr; } .quad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .pos-head { display: none; }
  .pos-row { grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr); padding-left: 14px; }
  .pos-row .pos-name { grid-column: 2 / -1; }
  .pos-row .num { grid-column: 2 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; text-align: right; }
  .pos-row .num > * { grid-column: 2; }
  .pos-row .num > .cell-label { grid-column: 1; grid-row: 1 / span 2; position: static; width: auto; height: auto; clip: auto; color: var(--muted); text-align: left; }
  .pos-row .num.col-basis { display: none; }
  .pos-account-bar, .pos-hint { padding-left: 14px; }
  .pos-level-2 .pos-name, .pos-level-3 .pos-name { padding-left: 0; } .pos-level-3 .pos-check { left: 0; }
  .col-basis { display: none; }
}
@media (max-width: 560px) { .pair, .trio, .quad { grid-template-columns: 1fr; } }
.lot-hint { color: var(--brand-strong); font-weight: 700; font-size: 13px; }
.lot-hint:empty { display: none; }
/* D-127: on Record buy the line is kept, so typing the lots moves nothing below. */
.entry-card .lot-hint { display: block; min-height: 18px; line-height: 18px; }
.required-mark { white-space: nowrap; }
:is(.pair, .trio, .quad) > .field { min-width: 0; }
:is(.pair, .trio, .quad) > .field { grid-template-columns: minmax(0, 1fr); }
:is(.pair, .trio, .quad) .form-control { min-width: 0; max-width: 100%; }
.date-note { color: var(--brand-strong); font-size: 13px; font-weight: 700; }
.date-note:empty { display: none; }
.date-note.is-error { color: var(--danger); font-weight: 600; }
:is(.pair, .trio, .quad) > .field[hidden], .field[hidden] { display: none; }
.entry-stack { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.group-intro { margin: 0; font-size: 13px; }
.entry-card > .entry-group { margin-top: 0; }
.advanced-schedules { margin-top: 32px; }
.advanced-schedules h2 { margin: 0; }
.account-steps { gap: 0; }
.form-step { padding: 18px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.form-step-first { border-top: 0; padding-top: 0; }
.form-step h2 { margin: 0; font-size: 17px; display: flex; align-items: center; gap: 10px; }
.form-step h2 small { color: var(--muted); font-size: 13px; font-weight: 500; }
.step-number { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-strong); font-size: 13px; font-weight: 800; }
.form-step-optional > summary { cursor: pointer; list-style: none; display: flex; align-items: center; min-height: 44px; }
.form-step-optional > summary::-webkit-details-marker { display: none; }
.form-step-optional > summary h2::before { content: "▸"; color: var(--muted); width: 26px; text-align: center; transition: transform .15s ease; }
.form-step-optional[open] > summary h2::before { transform: rotate(90deg); }
.form-step-optional[open] { gap: 14px; }
.form-step-optional[open] > summary { margin-bottom: 0; }
.identifier-row { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 14px; align-items: start; }
.identifier-label { padding-top: 34px; color: var(--muted); font-size: 13px; font-weight: 700; }
.fee-tax-row { margin-top: -6px; }
.new-broker summary { cursor: pointer; color: var(--brand); min-height: 32px; }
.new-broker { display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 760px) { .identifier-row { grid-template-columns: 1fr; } .identifier-label { padding-top: 0; } .fee-tax-row > span { display: none; } }
.opening-table td { padding: 6px 8px; vertical-align: top; }
.opening-table th small { display: block; text-transform: none; letter-spacing: 0; font-weight: 500; }
.opening-table .form-control { min-width: 0; }
.opening-paste summary { cursor: pointer; color: var(--brand); min-height: 32px; }
.opening-paste { display: flex; flex-direction: column; gap: 10px; }
/* Plan in Record buy (D-092). */
.trade-plan { border-top: 1px solid var(--line); padding-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.trade-plan [hidden] { display: none !important; }
.trade-plan-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.trade-plan-heading h2 { margin: 0; font-size: 20px; }
.badge-warn { color: #7a5a00; background: #fff3c4; border: 1px solid #ecd27a; }
.trade-plan-first { margin-left: auto; font-weight: 700; }
.trade-plan-body { display: flex; flex-direction: column; gap: 14px; }
.trade-plan-note { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); }
.trade-plan-adds { display: flex; flex-direction: column; gap: 10px; }
.trade-plan-after { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.trade-plan-warnings { margin: 0; padding: 10px 14px 10px 30px; border-radius: 10px; background: color-mix(in srgb, #d98200 12%, var(--surface)); color: #8a4b00; }
@media (min-width: 900px) { .trade-plan-new-stop small { white-space: nowrap; } }
.trade-plan-link { display: grid; grid-template-columns: 110px minmax(0, 1fr) 22px minmax(0, 1fr) 22px minmax(0, 1fr); gap: 4px 10px; align-items: start; }
.trade-plan-link > .field-label { padding-top: 11px; }
.trade-plan-input { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.trade-plan-input small, .trade-plan-source { color: var(--muted); font-size: 12px; }
.trade-plan-source { grid-column: 2 / -1; }
.trade-plan-eq { padding-top: 11px; text-align: center; color: var(--muted); }
.trade-plan-static { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.trade-plan-static small { color: var(--muted); font-weight: 500; }
.trade-plan input.is-anchor { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.trade-plan-warnings { margin: 0; padding: 12px 14px 12px 32px; border-radius: 10px; color: #5b4910; background: #fff6d8; border: 1px solid #ecd27a; }
.entry-warning { margin: 0; padding: 10px 14px; border-radius: 10px; color: #5b4910; background: #fff6d8; border: 1px solid #ecd27a; }
.entry-warning[hidden] { display: none; }
.cash-tile { display: flex; flex-direction: column; gap: 1px; padding: 9px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.cash-tile[hidden] { display: none; }
.draft-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; padding: 8px 8px 8px 14px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
.draft-note[hidden] { display: none; }
/* D-102: the Cash page's balances, one row per account, read as a sum left to right. */
.cash-balances { margin-bottom: 18px; }
.cash-balances td a { font-weight: 600; text-decoration: none; }
.cash-balances .cash-total { font-weight: 700; }
.cash-balances tfoot th, .cash-balances tfoot td { border-top: 2px solid var(--line); font-weight: 700; text-align: left; }
.cash-balances tfoot td.numeric { text-align: right; }
.cash-balances tr.is-selected td { background: var(--brand-soft); }
.cash-event-section .filter-bar { margin: 0 18px 10px; }
.cash-events .badge { margin-left: 6px; }
/* On a phone the balance shows account and cash, an event its date, type and amount. */
@media (max-width: 700px) { .cash-balances .col-detail, .cash-events .col-detail { display: none; } .cash-balances th, .cash-balances td, .cash-events th, .cash-events td { padding-left: 10px; padding-right: 10px; } }
.cash-tile span { color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.cash-tile strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.cash-tile small { color: var(--muted); font-size: 12px; }
/* D-132: rights-issue reminders, above the page on Dashboard, Positions and Corporate actions. */
.reminders { display: flex; flex-direction: column; gap: 8px; margin: 0 0 18px; }
.reminder { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 14px; border: 1px solid var(--brand); border-radius: 12px; background: var(--brand-soft); }
.reminder.is-warn { border-color: #ecd27a; background: #fff6d8; }
.reminder.is-danger { border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); }
.reminder-mark { font-size: 18px; text-align: center; }
.reminder-text { margin: 0; font-size: 14px; line-height: 1.45; }
.reminder-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.reminder-actions form { margin: 0; }
@media (max-width: 760px) { .reminder { grid-template-columns: 24px minmax(0, 1fr); } .reminder-actions { grid-column: 1 / -1; justify-content: flex-start; } }
/* D-131: corporate actions by kind; each drawer shows what saving will do. */
.ca-table { width: 100%; min-width: 0; table-layout: fixed; }
.ca-table td { overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
.ca-table td small { display: block; }
.ca-table .ri-steps small { display: inline; }
.ca-kind { width: 100%; }
.ca-box { display: flex; flex-direction: column; gap: 12px; }
.ca-box[hidden] { display: none; }
/* D-132: the rights issue's dates in three groups, in the order the announcement gives
   them; each folds, and says what it holds when folded. */
.ca-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding-top: 12px; border-top: 1px solid var(--line); }
.ca-group > summary { display: flex; align-items: baseline; gap: 8px; min-width: 0; cursor: pointer; font-size: 14px; font-weight: 700; list-style: none; }
.ca-group > summary::-webkit-details-marker { display: none; }
.ca-group > summary::before { content: "▸"; color: var(--muted); font-size: 11px; transition: transform .15s; }
.ca-group[open] > summary::before { transform: rotate(90deg); }
.ca-group > p { margin: 0; font-size: 12.5px; }
.ca-kind-row { display: flex; align-items: center; gap: 8px; }
.ca-kind-row .ca-kind { flex: 1; }
/* Opened toward the drawer's inside so they stay readable. */
.ca-kind-row .info-tip:is(:hover, :focus-visible)::after { left: auto; right: -8px; }
.ca-group > summary .info-tip:is(:hover, :focus-visible)::after { left: 50%; transform: translateX(-50%); }
/* An empty search note takes no room, so switching Received / Bought moves nothing. */
.field .ca-date-error { color: var(--danger); font-size: 12.5px; }
.ca-panel .field > small:empty { display: none; }
.ca-group > summary .info-tip { flex: none; font-weight: 400; }
.ca-preview[hidden] { display: none; }
.ratio { display: grid; grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr); align-items: center; gap: 4px; }
.ratio > span { text-align: center; color: var(--muted); font-weight: 700; }
.ratio .form-control { width: 100%; min-width: 0; text-align: right; }
.ratio-half { max-width: 50%; }
.ca-preview { padding: 10px 14px 12px; border: 1px solid var(--brand); border-radius: 12px; background: var(--brand-soft); font-variant-numeric: tabular-nums; }
.ca-preview-title { margin: 0 0 4px; color: var(--brand-strong); font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.ca-preview dl { margin: 0; }
.ca-preview dl div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--brand) 20%, transparent); font-size: 14px; }
.ca-preview dt { color: var(--muted); }
.ca-preview dt small { display: block; font-size: 11.5px; }
.ca-preview dd { margin: 0; text-align: right; white-space: nowrap; }
.ca-preview .sale-total dd { font-weight: 800; }
.ca-note { margin: 8px 0 0; font-size: 12.5px; }
.ca-note:empty { display: none; }
.ri-steps { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13px; }
.ri-steps .is-done { color: var(--success); font-weight: 700; text-decoration: none; }
.ri-steps .is-next { color: var(--brand-strong); font-weight: 700; }
.ri-steps .ri-lapse { display: inline; margin: 0; }
/* D-135: entries dated ahead wait as scheduled. */
.ca-sched { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-left: 6px; font-size: 13px; }
.ca-sched-badge { padding: 1px 8px; border: 1px solid var(--brand); border-radius: 999px; background: var(--brand-soft); color: var(--brand-strong); font-size: 11.5px; font-weight: 700; }
.ca-sched a { color: var(--muted); font-weight: 600; text-decoration: none; }
.ca-sched a:hover { color: var(--brand-strong); }
.ca-sched form { display: inline; margin: 0; }
.ca-preview dd.scheduled { color: var(--brand-strong); font-weight: 700; }
.ca-recorded { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px 12px; border: 1px solid var(--brand); border-radius: 10px; background: var(--brand-soft); font-size: 13px; }
.ca-recorded[hidden] { display: none; }
.ca-panel [data-ca-save][hidden] { display: none; }
.ca-recorded p { margin: 0; }
.ca-panel [data-recorded-lock] { background: var(--surface-muted, var(--bg)); color: var(--muted); }
.ri-steps .ri-edit { color: var(--muted); font-weight: 600; text-decoration: none; }
.ri-steps .ri-edit:hover { color: var(--brand-strong); }
.ca-edit-note { margin: 0; padding: 8px 12px; border: 1px solid var(--brand); border-radius: 10px; background: var(--brand-soft); font-size: 13px; }
/* D-132: shares paid for by an exercise or an allotment, not in the account yet. */
.arriving { margin-bottom: 14px; padding: 10px 16px; }
.arriving-title { margin: 0 0 4px; font-size: 14px; font-weight: 700; }
.arriving ul { margin: 0; padding: 0; list-style: none; }
.arriving li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; padding: 4px 0; font-size: 14px; }
.arriving-day { margin-left: auto; color: var(--brand-strong); font-weight: 700; font-size: 13px; }
.ri-stepper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ri-stepper a { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 7px 8px; border: 1px solid var(--line-strong); margin-left: -1px; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--text); text-decoration: none; background: var(--surface); }
.ri-stepper a:first-child { margin-left: 0; border-radius: 10px 0 0 10px; }
.ri-stepper a:last-child { border-radius: 0 10px 10px 0; }
.ri-stepper a.is-on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-strong); position: relative; }
.dr-summary { margin: 0 0 0 auto; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dr-summary b { color: var(--text); }
.dr-table { width: 100%; min-width: 0; table-layout: fixed; font-variant-numeric: tabular-nums; }
.dr-ticker small { margin-left: 4px; color: var(--muted); font-weight: 500; }
.dr-sub { float: right; color: var(--muted); font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.dr-total td { font-weight: 800; background: var(--surface-2); border-top: 2px solid var(--line); }
.dr-total small { margin-left: 6px; color: var(--muted); font-weight: 500; }
.dr-stock { margin-top: 18px; }
.transfer-card { max-width: 640px; padding: 20px; }
.transfer-history { margin-top: 18px; }
.transfer-card form { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 760px) { .dr-summary { margin-left: 0; width: 100%; } .ratio-half { max-width: none; } }
/* D-128: a trade's entries, read from its buys; the list marks how many are bought. */
.entry-badge { display: inline-block; margin-left: 8px; padding: 0 7px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-strong); font-size: 11.5px; font-weight: 700; vertical-align: 1px; }
.entry-badge.is-off { background: #fff3c4; color: #8a4b00; }
.entry-chip { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 12px; font-weight: 800; margin-right: 4px; }
.trade-entries { margin: 14px 0 4px; padding: 10px 14px 12px; border: 1px solid var(--brand); border-radius: 12px; background: var(--brand-soft); display: flex; flex-direction: column; gap: 6px; font-variant-numeric: tabular-nums; }
.te-head { display: flex; align-items: baseline; gap: 8px; }
.te-head small { color: var(--muted); }
.te-count { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--brand-strong); }
.te-list { list-style: none; margin: 0; padding: 0; }
.te-list li { display: grid; grid-template-columns: 16px minmax(64px, auto) minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 6px 0; border-top: 1px solid color-mix(in srgb, var(--brand) 25%, transparent); font-size: 13.5px; }
.te-list li:first-child { border-top: 0; }
.te-list .is-done, .te-list .is-missed { color: var(--muted); }
.te-list .is-done .te-mark { color: var(--success); }
.te-list .is-next .te-size, .te-list .is-partial .te-size { font-weight: 800; color: var(--text); }
.te-list .is-off { color: #8a4b00; }
.te-list .is-off .te-mark { color: #b45f00; }
.te-mark { font-weight: 800; }
.te-stop { white-space: nowrap; font-size: 12.5px; }
.te-action { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.te-action small, .te-off-note { color: var(--muted); font-size: 12.5px; }
.te-off-note { margin: 2px 0 0; }
@media (max-width: 560px) { .te-list li { grid-template-columns: 16px minmax(0, 1fr); } .te-list .te-note, .te-list .te-stop { grid-column: 2; white-space: normal; } }
/* D-127: the plan as one card above the lots; its rows stay in every state, so nothing moves. */
.plan-card { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; border: 1px solid var(--brand); border-radius: 12px; background: var(--brand-soft); font-variant-numeric: tabular-nums; min-width: 0; }
.plan-card [hidden], .plan-details [hidden] { display: none !important; }
.plan-card.is-off { border-color: var(--line); background: var(--surface-2); }
.plan-card-wait { margin: 0; font-size: 13px; }
.plan-card-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.plan-card-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.plan-card-title { color: var(--brand-strong); }
.plan-card-rules { margin-left: auto; min-width: 0; color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-mode { display: inline-flex; flex-shrink: 0; }
.plan-mode label { position: relative; cursor: pointer; }
.plan-mode input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.plan-mode span { display: block; padding: 4px 12px; border: 1px solid var(--line-strong); margin-left: -1px; background: var(--surface); font-size: 13px; font-weight: 700; }
.plan-mode label:first-child span { margin-left: 0; border-radius: 9px 0 0 9px; }
.plan-mode label:last-child span { border-radius: 0 9px 9px 0; }
.plan-mode input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; }
.plan-card.is-off .plan-mode input:checked + span { background: var(--muted); border-color: var(--muted); }
.plan-mode input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.plan-figs { display: grid; grid-template-columns: 1.1fr .8fr 1.3fr; gap: 10px; margin: 2px 0 0; }
.plan-figs div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.plan-figs dt { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.plan-figs dd { margin: 0; font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-figs dd small { color: var(--muted); font-size: 12px; font-weight: 500; }
.plan-figs dd .link-button { padding: 0; font-size: 14px; font-weight: 700; }
.plan-card.is-off .plan-figs dd { color: var(--muted); font-weight: 600; }
.plan-card-use { display: flex; align-items: center; min-height: 32px; }
.plan-card-use [data-plan-toggle] { margin-left: auto; font-size: 13px; font-weight: 700; }
.plan-card .is-gone, .plan-details .is-gone { visibility: hidden; }
.plan-card-note { margin: 0; min-height: 2.9em; font-size: 13px; line-height: 1.45; }
.plan-card-note.is-ok { color: var(--success); }
.plan-card-note.is-off { color: #8a4b00; }
.plan-details { display: flex; flex-direction: column; gap: 14px; padding: 14px 16px 16px; border: 1px solid var(--brand); border-radius: 12px; background: var(--brand-soft); }
.plan-details[hidden] { display: none; }
.plan-details.is-off { opacity: .45; }
/* D-127: no stop yet, so what depends on it is greyed and locked. */
.plan-details .form-control:disabled { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
.plan-details.is-waiting .plan-sizes, .plan-details.is-waiting .plan-entries, .plan-details.is-waiting .plan-split { opacity: .45; }
.plan-split button:disabled { cursor: not-allowed; }
.plan-details.is-waiting [data-plan-source="entries"] { color: var(--brand-strong); font-weight: 600; }
.plan-details-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.plan-details-head h2 { margin: 0; font-size: var(--size-panel, 18px); }
.plan-details-head .muted { font-size: 12.5px; }
.plan-details-hide { margin-left: auto; font-size: 13px; font-weight: 700; }
.plan-details-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 24px; align-items: start; }
.plan-pick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.plan-pick .form-control { width: 100%; min-width: 0; }
.plan-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.plan-details .form-control { background: var(--surface); }
.plan-details .trade-plan-link { grid-template-columns: 72px minmax(0, 1fr) 16px minmax(0, 1fr) 16px minmax(0, 1fr); gap: 4px 8px; }
.plan-details .trade-plan-link > .field-label { padding-top: 11px; }
.plan-capital { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; margin: 0; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.plan-capital b { color: var(--text); }
.plan-sizes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.size-tile { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-variant-numeric: tabular-nums; }
.size-tile span { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.size-tile strong { font-size: 16px; }
.size-tile small { height: 2.9em; overflow: hidden; color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.size-tile.is-limit { opacity: .6; }
.size-tile.is-pick { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.plan-entries-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.plan-split { display: inline-flex; }
.plan-split button { padding: 4px 11px; border: 1px solid var(--line-strong); margin-left: -1px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.plan-split button:first-child { margin-left: 0; border-radius: 9px 0 0 9px; }
.plan-split button:last-child { border-radius: 0 9px 9px 0; }
.plan-split button.is-on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-strong); position: relative; }
.plan-entries-head .trade-plan-source { flex-basis: 100%; }
.plan-entries { width: 100%; table-layout: fixed; border-collapse: collapse; border-radius: 10px; overflow: hidden; background: var(--surface); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.plan-entries th, .plan-entries td { height: auto; padding: 7px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-entries td { height: 38px; }
.plan-entries th { padding-top: 8px; padding-bottom: 8px; font-size: 11px; }
.plan-entries th:nth-child(1) { width: 9%; }
.plan-entries th:nth-child(2) { width: 19%; }
.plan-entries th:nth-child(4) { width: 25%; }
.plan-entries abbr { text-decoration: none; }
.plan-entries tr.is-now td { font-weight: 700; }
.plan-entries tr.is-gone td { color: var(--muted); text-decoration: line-through; }
.plan-extras { align-items: start; }
.plan-none { margin: 4px 0 8px; font-size: 13px; }
.plan-rules { margin: 0; padding: 6px 14px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); min-width: 0; }
.plan-rules h3 { margin: 6px 0 8px; font-size: 14px; }
.plan-rules dl { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 13.5px; }
.plan-rules dt { color: var(--muted); font-weight: 600; }
.plan-rules dd { margin: 0; overflow-wrap: anywhere; }
.entry-preview .trade-plan-warnings { margin-top: 2px; font-size: 13px; }
@media (max-width: 900px) { .plan-details-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .plan-figs { grid-template-columns: 1fr 1fr; } .plan-figs div:last-child { grid-column: 1 / -1; } .plan-sizes { grid-template-columns: 1fr; } .plan-details .trade-plan-link { grid-template-columns: 1fr 1fr; gap: 6px 10px; } .plan-details .trade-plan-link > .field-label, .plan-details .trade-plan-source { grid-column: 1 / -1; padding-top: 0; } .plan-details .trade-plan-link > span:empty, .plan-details .trade-plan-eq { display: none; } .plan-pick { grid-template-columns: 1fr; } .plan-card-top { flex-wrap: wrap; } .plan-card-rules { margin-left: 0; width: 100%; } }
.trade-plan-checklist { margin: 0; padding: 6px 14px 10px; border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.trade-plan-checklist legend { padding: 0 6px; font-weight: 700; }
.trade-plan-why { display: flex; flex-direction: column; gap: 12px; }
.check-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 40px; }
@media (max-width: 850px) { .trade-plan-link { grid-template-columns: 1fr 22px 1fr; } .trade-plan-link > .field-label, .trade-plan-source { grid-column: 1 / -1; } .trade-plan-link > span:empty { display: none; } }
@media (prefers-color-scheme: dark) { html[data-theme="system"] .badge-warn, html[data-theme="system"] .trade-plan-warnings, html[data-theme="system"] .entry-warning { color: #f3dc8f; background: #3a3111; border-color: #6d5a1c; } }
html[data-theme="dark"] .badge-warn, html[data-theme="dark"] .trade-plan-warnings, html[data-theme="dark"] .entry-warning { color: #f3dc8f; background: #3a3111; border-color: #6d5a1c; }
.money-card { padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.money-table { width: 100%; table-layout: auto; }
.money-table th { white-space: normal; vertical-align: bottom; line-height: 1.3; }
.money-table td { padding: 6px 6px; vertical-align: top; }
.money-table td:not(:first-child) .form-control { width: 84px; }
.money-table td.center { text-align: center; vertical-align: middle; }
.money-table .form-control { min-width: 0; }
.money-table td:first-child .form-control { min-width: 130px; }
.money-setups-title { display: flex; justify-content: space-between; align-items: end; margin: 28px 0 12px; }
.money-setups-title h2 { margin: 0; }
/* Chips are radio buttons; the native control stays focusable (D-092). */
.chip-group { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.chip-group legend { font-weight: 700; margin-bottom: 8px; padding: 0; }
.chip-group legend small { color: var(--muted); font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); cursor: pointer; font-weight: 600; font-size: 14px; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip:has(input:checked) { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-strong); }
.chip:has(input:focus-visible) { outline: 3px solid var(--brand); outline-offset: 2px; }
.sale-plan { margin: 0; font-size: 13px; }
.pos-trade { margin-left: auto; font-size: 13px; color: var(--muted); }
.trade-review { padding: 22px; margin-bottom: 20px; display: flex; flex-direction: column; gap: 10px; border-color: var(--brand); }
.trade-review h2 { margin: 0; font-size: 24px; }
.trade-review > .muted { margin: 0; }
.trade-review-form { display: flex; flex-direction: column; gap: 16px; }
.trade-review-hint { align-self: center; font-size: 13px; }
.stop-history { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13px; }
.campaign-follow { margin-top: 18px; }
.pending-list { margin: 0; padding: 0 22px 18px 40px; display: grid; gap: 8px; }
/* Journal › Trades (D-092). */
.trades-layout { display: grid; grid-template-columns: minmax(360px, 480px) minmax(0, 1fr); gap: 18px; align-items: start; }
.trades-list { padding: 0; overflow: hidden; }
.chips a.chip { text-decoration: none; color: var(--text); }
.chip.is-on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-strong); }
.trades-empty { padding: 16px; margin: 0; }
.trades-untracked { padding: 14px 16px; }
.trades-untracked h2 { font-size: 15px; margin: 0 0 4px; }
.trades-untracked p { margin: 0 0 8px; font-size: 13px; }
.trades-untracked ul { margin: 0; padding-left: 18px; font-size: 14px; }
.trade-pane { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.trade-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.trade-head h2 { margin: 0; font-size: 24px; }
.trade-result { font-size: 18px; font-weight: 800; }
.trade-review-due { margin: 0; display: flex; align-items: center; gap: 10px; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline-item { display: grid; grid-template-columns: 128px 14px minmax(0, 1fr); gap: 4px 12px; padding: 0 0 16px; position: relative; }
.timeline-item::before { content: ""; position: absolute; left: 146px; top: 16px; bottom: 0; width: 2px; background: var(--line); }
.timeline-item:last-child::before { display: none; }
.timeline-time { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; padding-top: 1px; }
.timeline-dot { width: 12px; height: 12px; margin-top: 4px; border-radius: 50%; background: var(--brand); position: relative; z-index: 1; }
.timeline-plan .timeline-dot, .timeline-stop .timeline-dot, .timeline-review .timeline-dot, .timeline-note .timeline-dot { background: var(--surface); border: 2px solid var(--brand); }
.timeline-sell .timeline-dot { background: var(--brand-strong); }
.timeline-title { margin: 0; font-weight: 800; }
.timeline-detail { margin: 3px 0 0; color: var(--muted); font-size: 14px; }
.trade-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.campaign-timeline { margin-bottom: 18px; }
/* D-107: a note in two cards, Context and Note, each in parts that say what they are for. */
/* D-114: one column, what you think first; the rest optional or folded. */
.note-heading { max-width: 880px; margin-bottom: 16px; }
.note-page { max-width: 880px; padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; }
/* Title and text read as one sheet: a heading line over the text. */
.note-sheet { display: flex; flex-direction: column; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); overflow: hidden; }
.note-sheet.has-error { border-color: var(--negative, #b42318); }
.note-sheet .note-title { width: 100%; border: 0; border-bottom: 1px solid var(--line); padding: 12px 14px 10px; background: transparent; color: var(--text); font: inherit; font-size: 16px; font-weight: 700; outline-offset: -3px; }
.note-sheet textarea { width: 100%; border: 0; border-radius: 0; box-shadow: none; padding: 12px 14px; background: transparent; resize: vertical; outline-offset: -3px; }
.note-sheet textarea:focus { box-shadow: none; }
.note-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.note-when { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.note-when-text { color: var(--muted); font-variant-numeric: tabular-nums; }
.note-when [hidden] { display: none; }
.note-when .field label { font-size: 13px; }
.link-button { border: 0; background: none; padding: 2px 4px; color: var(--brand); font: inherit; cursor: pointer; }
.note-head .note-without-trade .pair { display: flex; flex-wrap: wrap; gap: 12px; }
.note-page .note-sheet textarea { min-height: 170px; }
.note-panel .note-sheet textarea { min-height: 140px; }
.note-head .note-without-trade { font-size: 13px; }
.note-head .note-when { margin-left: auto; }
.note-panel .note-head .note-when { margin-left: 0; }
.note-about { display: flex; flex-direction: column; gap: 8px; }
.note-without-trade > summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.note-without-trade[hidden] { display: none; }
.note-without-trade .pair { margin-top: 10px; }
.note-emotion .chips { gap: 6px; }
.note-page .chip, .note-emotion .chip, .trade-review-form .chip { min-height: 32px; padding: 0 12px; font-size: 13.5px; }
.note-page .chips { gap: 6px; }
.note-emotion legend small { color: var(--muted); font-weight: 500; font-size: 12px; }
.note-more > summary { cursor: pointer; color: var(--brand); font-size: 13px; font-weight: 600; min-height: 28px; }
.note-more[open] { display: flex; flex-direction: column; gap: 12px; }
.note-more input[type="file"] { max-width: 100%; font-size: 13px; }
.note-more [data-note-caption][hidden] { display: none; }
.note-actions { display: flex; gap: 10px; align-items: center; }
/* The note drawer is as wide as Sell and the transaction detail (D-111). */
.note-panel { position: fixed; top: 68px; right: 0; bottom: 0; z-index: 30; width: min(380px, 100vw); overflow-y: auto; border-radius: 0; border-right: 0; border-top: 0; border-bottom: 0; box-shadow: -20px 0 45px rgb(18 45 52 / 14%); padding: 18px 22px 22px; font-size: 14px; }
.note-panel form { display: flex; flex-direction: column; gap: 12px; }
.note-panel h2 { margin: 0; font-size: 18px; }
.note-panel .eyebrow { margin: 0; }
.note-panel .note-actions { position: sticky; bottom: -22px; margin: 4px -22px -22px; padding: 12px 22px 16px; background: var(--surface); border-top: 1px solid var(--line); }
@media (max-width: 700px) { .note-panel { top: 0; z-index: 60; } }
/* D-104: one trade pane for the Trades page and the trade page. */
.trade-open { margin-left: auto; font-weight: 700; text-decoration: none; }
.trade-back { display: flex; flex-wrap: wrap; gap: 16px; }
.trade-subtitle { margin: 6px 0 0; }
/* Fixed columns, so Stop, Target and Held stay in place from one trade to the next. */
.trade-facts { display: grid; grid-template-columns: 1.5fr 1.1fr 1.4fr .8fr .8fr .9fr; gap: 8px 14px; margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.trade-facts div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.trade-facts dd { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trade-facts dd.risk-above small { color: inherit; opacity: .85; }
.trade-facts dd small { display: block; white-space: normal; color: var(--muted); font-weight: 500; font-size: 12px; }
/* A narrow pane puts the six figures on two rows; the pane's width decides, never a trade's
   figures, so nothing moves from one trade to the next (D-113). */
.trade-pane { container-type: inline-size; }
@container (max-width: 520px) { .trade-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.trade-facts dt { color: var(--muted); font-size: 12px; font-weight: 600; }
.trade-facts dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.risk-above { color: #b45309; font-weight: 700; }
html[data-theme="dark"] .risk-above { color: #f3b65b; }
@media (prefers-color-scheme: dark) { html[data-theme="system"] .risk-above { color: #f3b65b; } }
.trade-sections { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.trade-section { border-bottom: 1px solid var(--line); }
.trade-section > summary { display: flex; align-items: baseline; gap: 12px; min-height: 40px; padding: 10px 2px; cursor: pointer; list-style: none; font-weight: 700; }
.trade-section > summary::-webkit-details-marker { display: none; }
.trade-section > summary::before { content: "▸"; color: var(--muted); font-size: 12px; }
.trade-section[open] > summary::before { content: "▾"; }
.trade-section > summary small { color: var(--muted); font-weight: 500; font-size: 13px; }
.trade-section > :not(summary) { margin: 0 0 14px; }
.trade-section .plan-grid div { grid-column: auto; }
.trade-section .plan-grid .plan-wide { grid-column: 1 / -1; }
.trade-section .plan-grid dt { font-size: 12px; }
.trade-section .stop-history { margin-bottom: 8px; }
.trade-section .trade-stop-form { align-items: end; }
.trade-executions td.side-buy { color: var(--brand); font-weight: 700; }
.trade-executions td.side-sell { color: var(--brand-strong); font-weight: 700; }
.trade-link > summary { cursor: pointer; color: var(--muted); font-size: 13px; margin-top: 10px; }
.trade-link .inline-link-form { padding: 10px 0 0; border-top: 0; }
/* D-105: the Trades list, one line per trade, grouped; it scrolls on its own beside the pane. */
.trades-list { padding-bottom: 6px; }
.filter-bar.trades-filter { margin: 12px 12px 6px; flex-wrap: nowrap; }
.trades-filter .filter-end { min-width: 0; }
.trades-filter .filter-end input { width: 110px; }
@media (max-width: 560px) { .filter-bar.trades-filter { flex-wrap: wrap; } .trades-filter .filter-end input { width: 100%; } }
#trade-pane, .trade-section { scroll-margin-top: 84px; }
.tx-table.trade-table { min-width: 0; width: 100%; }
.trade-tags-form { display: flex; flex-direction: column; gap: 10px; }
.trade-tags-new { display: flex; gap: 8px; align-items: center; }
/* c-account is shared with Transactions' 14%; here the account takes what is left. */
.tx-table.trade-table .c-account { width: auto; }
.trade-table .c-symbol { width: 66px; }
.trade-table .c-when { width: 104px; }
.trade-table .c-risk { width: 76px; }
.trade-table .c-r { width: 72px; }
.tx-table.trade-table th, .tx-table.trade-table td { padding-left: 10px; padding-right: 10px; }
.trade-table td:nth-child(2), .trade-table td:nth-child(3) { color: var(--muted); }
.trade-table .r-open { font-weight: 500; }
@media (min-width: 1101px) { .trades-list { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; } }
.nav-count { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 6px; border-radius: 999px; background: var(--brand); color: var(--on-brand, #fff); font-size: 11px; font-weight: 800; text-align: center; line-height: 18px; }
@media (max-width: 1100px) { .trades-layout { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .timeline-item { grid-template-columns: 14px minmax(0, 1fr); } .timeline-time { grid-column: 2; } .timeline-dot { grid-row: 1 / span 2; } .timeline-item::before { left: 6px; } }
/* Dashboard panels (D-092): one template per market, broker or account. */
.segmented { display: inline-flex; align-items: center; gap: 0; flex-wrap: wrap; }
.segmented .field-label { margin-right: 10px; }
.segmented a { padding: 8px 14px; border: 1px solid var(--line-strong); margin-left: -1px; color: var(--text); text-decoration: none; font-weight: 700; font-size: 14px; background: var(--surface); }
.segmented a:first-of-type { border-radius: 10px 0 0 10px; }
.segmented a:last-of-type { border-radius: 0 10px 10px 0; }
.segmented a.is-on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-strong); position: relative; }
.donut-track { fill: none; stroke: var(--surface-2); stroke-width: 20; }
.donut-win, .donut-breakeven, .donut-loss { fill: none; stroke-width: 20; }
.donut-win { stroke: var(--success); }
.donut-breakeven { stroke: #8a9a9e; }
.donut-loss { stroke: var(--danger); }
.donut-value { font-size: 20px; font-weight: 800; fill: var(--text); }
.donut-label { font-size: 11px; fill: var(--muted); }
.legend-win { background: var(--success); }
.legend-breakeven { background: #8a9a9e; }
.legend-loss { background: var(--danger); }
/* Transactions (D-093): one line per row, grouped by month. */
.tx-period { margin: -4px 0 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.tx-period strong { font-size: 20px; letter-spacing: -.02em; }
.tx-period span { color: var(--muted); }
/* One filter bar across the app (D-097): a card with self-describing dropdowns on one
   line; a search box or page actions sit at the right end. */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; margin-bottom: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.filter-bar .form-control { min-height: 38px; padding: 6px 10px; font-size: 14px; }
.filter-bar select.form-control { padding-right: 30px; padding-left: 12px; }
.filter-bar .button { min-height: 38px; }
.filter-bar [hidden] { display: none !important; }
.filter-bar .form-errors { flex-basis: 100%; }
.filter-end { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tx-range { display: inline-flex; align-items: center; gap: 6px; }
.tx-range input { width: 140px; }
.tx-summary { margin-bottom: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); font-variant-numeric: tabular-nums; }
.tx-summary > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 9px 14px; cursor: pointer; font-size: 14px; }
.tx-summary-title { font-weight: 800; margin-right: 6px; }
.tx-cur { font-weight: 800; color: var(--brand-strong); margin-left: 10px; font-size: 13px; }
.tx-summary-hint { margin-left: auto; color: var(--brand); font-weight: 700; font-size: 13px; }
.tx-summary-table { font-size: 14px; }
.tx-summary .table-wrap { border-top: 1px solid var(--line); padding: 0 6px 6px; }
.tx-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.tx-layout.has-detail { grid-template-columns: minmax(0, 1fr); }
.tx-ledger { padding: 0; overflow: hidden; }
.tx-table { font-variant-numeric: tabular-nums; table-layout: fixed; min-width: 1120px; }
/* Fixed column widths: folding a month must not move the columns (D-097). */
.tx-table .c-date { width: 14%; } .tx-table .c-account { width: 13%; } .tx-table .c-ticker { width: 8%; } .tx-table .c-value { width: 13%; } .tx-table .c-costs { width: 8%; } .tx-table .c-realized { width: 11%; } .tx-table .c-trade { width: 9%; }
/* Side, quantity and price are the same size in every table that has them (fixed px, not a share of the table). */
.c-side { width: 64px; } .c-qty, .c-price { width: 100px; } th.c-side, th.c-qty, th.c-price { white-space: nowrap; }
/* The date cell may break the clock onto a second line ("09:30 ET · 20:30 WIB") instead of cutting it. */
.tx-table .tx-when { white-space: normal; line-height: 1.35; }
.tx-table td { overflow: hidden; text-overflow: ellipsis; }
.tx-month-head th { background: color-mix(in srgb, var(--brand-soft) 60%, var(--surface)); text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 600; font-size: 12.5px; padding: 8px 12px; }
.tx-month-toggle { border: 0; background: none; padding: 0; margin-right: 8px; font: inherit; font-size: 14px; font-weight: 800; color: var(--brand-strong); cursor: pointer; }
.tx-caret { display: inline-block; width: 14px; }
.tx-row { cursor: pointer; }
.tx-row:hover td { background: var(--surface-2); }
.tx-row.is-selected td { background: var(--brand-soft); }
.tx-row.is-reversed td { color: var(--muted); text-decoration: line-through; }
.tx-row.is-reversed td:last-child, .tx-row.is-reversed .badge { text-decoration: none; }
.tx-row[hidden] { display: none; }
.tx-open { color: var(--text); text-decoration: none; }
.tx-cur-tag { color: var(--muted); font-weight: 700; font-size: 11px; }
.tx-warn { color: #a24c00; font-weight: 800; cursor: help; }
.tx-trade { font-weight: 700; text-decoration: none; }
.tx-trade-closed { color: var(--muted); }
/* A drawer over the page, as in the mockup, so the table keeps its width. */
.tx-detail { position: fixed; top: 68px; right: 0; bottom: 0; z-index: 30; width: min(380px, 100vw); overflow-y: auto; border-radius: 0; border-right: 0; border-top: 0; border-bottom: 0; box-shadow: -20px 0 45px rgb(18 45 52 / 14%); padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.tx-detail h2 { margin: 0; font-size: 20px; }
.tx-detail > .muted { margin: 0; font-size: 13px; }
.tx-kv { margin: 0; }
.tx-kv div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.tx-kv dt { color: var(--muted); }
.tx-kv dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.tx-detail-note { margin: 0; font-size: 12.5px; }

@media (max-width: 760px) { .filter-end { margin-left: 0; width: 100%; } .filter-end > .form-control { flex: 1; width: 100%; } }
.tx-row.is-returned td { animation: tx-returned 2.4s ease-out; }
@keyframes tx-returned { 0%, 40% { background: color-mix(in srgb, var(--brand) 22%, var(--surface)); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .tx-row.is-returned td { animation: none; background: var(--brand-soft); } }
.back-link { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 10px; font-weight: 700; text-decoration: none; min-height: 32px; }
/* Compact account form (follow-up to D-091/D-092). One width for fee inputs app-wide. */
/* One standard of input widths across the app (accounts/form_renderer.py picks the size). */
.form-control.input-xs { width: 6.5rem; max-width: 100%; }
.form-control.input-s { width: 10rem; max-width: 100%; }
.form-control.input-m { width: 15rem; max-width: 100%; }
.form-control.input-l { width: 22rem; max-width: 100%; }
/* In a grid field an auto width would stretch to the column; fit means as wide as its content. */
.form-control.input-fit { width: auto; max-width: 100%; justify-self: start; }
.field:not(:is(.pair, .trio, .quad) > .field) > .form-control.input-fit { align-self: flex-start; }
/* A field may shrink to its column, so a sized input never spills into the next one. */
.field { min-width: 0; }
:is(.pair, .trio, .quad) > .field { grid-template-columns: minmax(0, 1fr); }
/* Inside a table the column decides; a stack form (login, MFA) stays full width. */
td .form-control[class*="input-"], .stack-form .form-control[class*="input-"] { width: 100%; }
.field-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 18px; }
.field-row > .field, .field-row > div > .field { flex: 0 0 auto; max-width: 100%; }
.id-note { margin: 4px 0 0; font-size: 13px; }
.id-group { display: flex; flex-direction: column; gap: 8px; }
.id-group h3 { margin: 6px 0 0; font-size: 14px; color: var(--brand-strong); }
.id-group[hidden], .id-customer[hidden], [data-customer-is-sre][hidden] { display: none !important; }
.fee-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 18px; }
.fee-inline > .field, .fee-inline > div > .field { flex: 0 0 auto; }
.fee-inline > .field:has(input[type="checkbox"]) { min-height: 44px; display: flex; flex-direction: row; align-items: center; gap: 10px; align-self: flex-end; }
.fee-inline > .field:has(input[type="checkbox"]) > label { max-width: none; white-space: nowrap; }
.fee-inline[data-opening-part] { align-items: flex-start; }
/* A field shown for one market only must stay hidden for the other, checkbox rows included. */
[data-only-market][hidden], .field[hidden] { display: none !important; }
.fee-inline .form-control[name$="opening_as_of"], .fee-inline .form-control[name$="opening_cash"] { width: 12rem; }
.compact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 230px)); gap: 12px 18px; align-items: start; }
.compact-grid-part { display: contents; }
.compact-grid-part[hidden] { display: none; }
.compact-grid > .field:has(input[type="checkbox"]) { padding-top: 26px; }
/* Step 4 asks how the account starts (D-095); the parts and labels for the chosen start show
   through :has, so the step works without JavaScript. */
.opening-start { margin: 0; padding: 0; border: 0; min-width: 0; }
.opening-start legend { font-weight: 700; margin-bottom: 8px; padding: 0; }
.start-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 10px; }
.start-choice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); cursor: pointer; }
.start-choice:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.start-choice:has(input:focus-visible) { outline: 3px solid var(--brand); outline-offset: 2px; }
.start-choice input { margin-top: 3px; flex: none; }
.start-choice span { display: flex; flex-direction: column; gap: 4px; }
.start-choice small { color: var(--muted); font-weight: 400; line-height: 1.4; }
.opening-stocks { flex-direction: column; gap: 10px; }
.opening-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 18px; }
[data-step="opening"] [data-opening-part], [data-step="opening"] [data-opening-label] { display: none; }
[data-step="opening"]:has([name$="opening_start"]:checked) [data-opening-part="any"],
[data-step="opening"]:has([name$="opening_start"][value="portfolio"]:checked) .opening-stocks { display: flex; }
[data-step="opening"]:has([name$="opening_start"][value="portfolio"]:checked) p[data-opening-part="portfolio"],
[data-step="opening"]:has([name$="opening_start"][value="portfolio"]:checked) small[data-opening-label="portfolio"] { display: block; }
[data-step="opening"]:has([name$="opening_start"][value="empty"]:checked) span[data-opening-label~="empty"],
[data-step="opening"]:has([name$="opening_start"][value="log"]:checked) span[data-opening-label~="log"],
[data-step="opening"]:has([name$="opening_start"][value="portfolio"]:checked) span[data-opening-label~="portfolio"] { display: inline; }
.form-step .step-summary { color: var(--brand-strong); font-weight: 600; }
.form-step-optional > summary h2 .step-number { margin-left: 2px; }
.row-remove-cell { width: 44px; text-align: center; }
.row-remove { width: 36px; height: 36px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }
.row-remove:hover { color: var(--danger); border-color: var(--danger); }
.form-step .step-summary.is-empty { color: var(--muted); font-weight: 500; }

/* Stocks an account started with (D-095): listed among transactions, never summed. */
.tx-row.tx-opening td { background: color-mix(in srgb, var(--brand-soft) 45%, transparent); }
.tx-start .entry-actions { margin-top: 8px; }
/* Check against broker app (D-095 stage B). */
.check-result { margin-top: 18px; padding: 22px 26px; }
.check-result h2 { margin-top: 0; }
.check-table td:last-child { min-width: 16rem; max-width: 24rem; white-space: normal; }
.check-table tr.is-difference > * { background: color-mix(in srgb, var(--warning, #c98a00) 8%, transparent); }
.check-table td small { display: block; color: var(--muted); }

/* One form standard (D-098), the same scale as the tables and filter bars: 14px text,
   38px inputs and buttons, 13px labels. On a phone inputs return to 16px and 44px, so
   iOS does not zoom on focus and every control stays a full touch target. */
.form-control, .stack-form input { min-height: 38px; padding: 7px 10px; font-size: 14px; }
.field label, .field-label { font-size: 13px; font-weight: 600; }
.field-static { min-height: 38px; font-size: 14px; }
.entry-card, .entry-preview, .sale-panel, .form-card, .model-form, .stack-form, .trade-plan { font-size: 14px; }
.entry-card { padding: 20px; gap: 14px; }
.entry-groups { gap: 16px; }
.entry-group { gap: 12px; padding: 4px 16px 16px; }
.entry-group legend { font-size: 14px; }
.entry-preview h2, .sale-panel h2 { font-size: 18px; }
.button { min-height: 38px; padding: 8px 14px; font-size: 14px; }
.button.small { min-height: 32px; padding: 5px 10px; font-size: 13px; }
@media (max-width: 760px) {
  .form-control, .stack-form input, .filter-bar .form-control { min-height: 44px; font-size: 16px; }
  .button, .button.small { min-height: 44px; }
}

/* D-115: the review states what the record shows, then asks what it cannot. */
.trade-review-facts { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13.5px; }
.trade-review-form [data-review-where][hidden] { display: none; }
.note-head .note-without-trade[open] { flex-basis: 100%; order: 10; }
/* D-116: tags read as #hashtags, plain text in the brand colour, never boxed. */
.hashtag { color: var(--brand); font-weight: 650; font-style: normal; white-space: nowrap; }
.note-hashtags { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; }
.tag-suggest { display: flex; flex-wrap: wrap; gap: 2px 10px; margin: -6px 0 0; }
.hashtag-button { border: 0; background: none; padding: 2px 0; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.hashtag-button:hover, .hashtag-button.is-on { color: var(--brand); }
.trade-tags-form .tag-suggest { margin-top: 8px; }
.note-ticker { max-width: 100%; }
.note-ticker .form-control { width: 210px; max-width: 100%; }
.note-ticker[hidden] { display: none; }
.trade-tags-new .button { white-space: nowrap; flex: none; }
/* D-118: a review picks its day, week or month in the row the trade and ticker use. */
.review-period { display: inline-flex; align-items: center; gap: 6px; }
.review-period[hidden], .note-scope[hidden], .note-when[hidden] { display: none; }
.note-scope { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 100%; }
.chip-button { min-height: 34px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.chip-button.is-on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-strong); }
.chip-button[hidden] { display: none; }
.review-date { position: relative; display: inline-flex; }
.review-date .picker-input { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.review-date input[data-date-input][hidden] { display: none; }
/* D-119: notes in a trade's timeline are edited in place; an edited one says so. */
.timeline-edit { margin-left: 4px; color: var(--muted); font-weight: 500; text-decoration: none; }
.timeline-edit:hover { color: var(--brand); }
.timeline-edited { color: var(--muted); font-weight: 500; }
.note-history > summary { cursor: pointer; padding: 16px 22px; }
.note-versions { list-style: none; margin: 0; padding: 0 22px 12px; }
.note-versions li { padding: 14px 0; border-top: 1px solid var(--line); }
.note-versions h3 { margin: 4px 0; font-size: 16px; }
.note-versions .journal-body { margin: 8px 0; font-size: 15px; }
.note-delete { max-width: 560px; padding: 22px; }
/* D-121: ⋮ on each note, a small menu with Edit and Delete. */
.kebab { position: relative; flex: none; align-self: flex-start; }
.kebab > summary { list-style: none; }
.kebab > summary::-webkit-details-marker { display: none; }
.kebab-button { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.kebab-button:hover, .kebab[open] > .kebab-button { background: var(--surface-2); color: var(--text); }
.kebab-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; min-width: 150px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.kebab-menu a, .kebab-menu span { padding: 8px 10px; border-radius: 7px; color: var(--text); font-size: 14px; text-decoration: none; white-space: nowrap; }
.kebab-menu a:hover, .kebab-menu a:focus-visible { background: var(--surface-2); }
.kebab-menu .kebab-danger { color: var(--danger); }
.kebab-menu .is-disabled { color: var(--muted); opacity: .6; cursor: not-allowed; }
.journal-entry-list article { position: relative; }
/* D-122, D-124: Setups reads like Transactions: two tabs of even width over one table. */
.setups-bar { display: flex; align-items: center; gap: 12px; }
.segmented-even { display: inline-grid; grid-auto-columns: 1fr; grid-auto-flow: column; }
.segmented-even a { text-align: center; }
.setups-about { margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13.5px; }
.setups-about strong { color: var(--text); }
.setups-table { width: 100%; min-width: 0; table-layout: fixed; }
.setups-table .c-name { width: auto; }
.setups-table .c-num { width: 13%; }
.setups-table .c-profile { width: 20%; }
/* D-127: the dashboard's break-even band, beside the period it applies to. */
.band-setting { position: relative; flex-shrink: 0; }
.band-setting > summary { cursor: pointer; color: var(--brand); font-weight: 600; white-space: nowrap; list-style: none; }
.band-setting > summary::-webkit-details-marker { display: none; }
.band-form { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow, 0 8px 24px rgba(0,0,0,.12)); white-space: nowrap; color: var(--text); }
.band-form .form-control { width: 80px; }
.setups-table td { overflow: hidden; text-overflow: ellipsis; }
.setups-table .c-menu { width: 56px; }
.setups-table td.menu { padding: 0 10px; text-align: right; overflow: visible; }
.setups-table .kebab { display: inline-block; }
.setups-table th[title] { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }
.setups-badge { margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-strong); font-size: 11.5px; font-weight: 700; }
@media (max-width: 760px) { .setups-bar { flex-wrap: wrap; } .setups-table { min-width: 640px; } }
.kebab-menu form { margin: 0; }
.kebab-menu button { width: 100%; padding: 8px 10px; border: 0; border-radius: 7px; background: none; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; white-space: nowrap; }
.kebab-menu button:hover, .kebab-menu button:focus-visible { background: var(--surface-2); }
/* A number with its unit inside the box, right-aligned as numbers are. */
.input-unit { position: relative; display: inline-flex; align-items: center; width: 132px; }
.input-unit .form-control { width: 100%; padding-right: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.input-unit-suffix { position: absolute; right: 12px; color: var(--muted); font-size: 13px; pointer-events: none; }
.number-field small { color: var(--muted); font-size: 12.5px; }
.profile-presets { margin: -4px 0 0; color: var(--muted); font-size: 13px; }

/* D-123: one scale for headings and controls, measured on every page.
   Page title 42 px (h1) · section 22 px (h2: page sections, cards, the selected trade) ·
   panel 18 px (h2 in drawers, previews and form steps) · item 16 px (h3) · text 14 px.
   Inputs and buttons 38 px, small buttons 32 px, in-row actions 28 px; 44 px and 16 px
   text on screens up to 760 px (D-098). Group legends 14 px bold. */
:root { --size-section: 22px; --size-panel: 18px; --size-item: 16px; }
main h2 { font-size: var(--size-section); }
main h3 { font-size: var(--size-item); }
.trade-head h2, .trade-review h2 { font-size: var(--size-section); }
.entry-preview h2, .sale-panel h2, .tx-detail h2, .note-panel h2, .trade-plan-heading h2, .form-step h2 { font-size: var(--size-panel); }
.button, .button.small { line-height: 20px; }
fieldset legend, .entry-group legend, .chip-group legend, .rule-form legend, .sale-picks legend { font-size: 14px; font-weight: 700; }
.filter-actions { align-self: end; align-items: center; }
.filter-actions .button { height: 38px; }
.kebab-menu a, .kebab-menu button, .kebab-menu span { display: flex; align-items: center; min-height: 36px; box-sizing: border-box; }
/* A button's words stay on one line; a row of buttons wraps instead. */
.button { white-space: nowrap; }
.form-actions, .heading-actions { flex-wrap: wrap; }
.section-title > .button { flex: none; }
.kebab-menu.is-placed { position: fixed; top: auto; right: auto; }
@media (max-width: 760px) {
  .setups-bar .segmented-even { display: grid; width: 100%; align-items: stretch; }
  .segmented-even a { white-space: normal; display: flex; align-items: center; justify-content: center; }
}
/* D-125: drawers pair short numbers in two columns; what each means is an ⓘ tooltip that
   opens on hover or keyboard focus, like the column headings of the tables. */
.number-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.number-grid .input-unit { width: 100%; }
.label-row { display: inline-flex; align-items: center; gap: 6px; }
.info-tip { position: relative; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: var(--muted); font-size: 13px; line-height: 1; cursor: help; }
.info-tip:hover, .info-tip:focus-visible { color: var(--brand); }
.info-tip:hover::after, .info-tip:focus-visible::after { content: attr(data-tip); position: absolute; top: calc(100% + 6px); left: -8px; z-index: 50; width: max-content; max-width: 230px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); color: var(--text); font-size: 12.5px; font-weight: 500; line-height: 1.4; white-space: normal; }
.number-grid > .field:nth-child(even) .info-tip::after { left: auto; right: -8px; }
.setup-checklist { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 8px; }
.setup-checklist legend { margin-bottom: 6px; }
.checklist-rows { display: flex; flex-direction: column; gap: 6px; }
.checklist-row { display: flex; align-items: center; gap: 6px; }
.checklist-row[hidden] { display: none; }
.checklist-row .form-control { flex: 1; }
.checklist-remove { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--muted); font-size: 18px; cursor: pointer; flex: none; }
.checklist-remove:hover { background: var(--surface-2); color: var(--danger); }
.checklist-remove input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.checklist-add { align-self: flex-start; color: var(--brand); }
.profile-panel .field > .form-control { width: 100%; }
/* D-126: Notes read as Transactions: one line a note under its month, a drawer to read it. */
.note-table { min-width: 760px; }
.note-table .c-date { width: 12%; }
.note-table .c-kind { width: 11%; }
.note-table .c-title { width: auto; }
.note-table .c-about { width: 11%; }
.note-table .c-tags { width: 20%; }
.note-table .c-menu { width: 52px; }
.note-table td { overflow: hidden; text-overflow: ellipsis; }
.note-table td.menu { overflow: visible; padding: 0 8px; text-align: right; }
.note-table .note-tags-cell .hashtag { font-size: 13px; }
.note-detail-body { max-height: 46vh; overflow-y: auto; font-size: 14px; line-height: 1.55; }
.note-detail-body p { margin: 0 0 10px; }

/* D-133: a calendar button inside every typed date field; the browser's own picker opens. */
.date-wrap { position: relative; display: inline-block; width: fit-content; max-width: 100%; justify-self: start; align-self: flex-start; vertical-align: top; }
.date-wrap > .form-control { display: block; margin: 0; padding-right: 36px; }
.date-pick { position: absolute; top: 50%; right: 4px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; transform: translateY(-50%); }
.date-pick:hover, .date-pick:focus-visible { background: var(--brand-soft); color: var(--brand-strong); }
.date-pick:disabled { cursor: default; opacity: .4; }
.date-pick svg { width: 18px; height: 18px; }
.date-native { position: absolute; right: 0; bottom: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }

/* D-140: the dashboard. One market, a period line with the counting settings, five tabs. */
.dash-period { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin: 4px 0 14px; }
.dash-period .tx-period { margin: 0; }
.dash-period .band-setting { flex-shrink: 1; min-width: 0; max-width: 100%; }
.dash-period .band-setting > summary { white-space: normal; }
.count-form { flex-direction: column; align-items: stretch; gap: 12px; min-width: 320px; }
.count-form .count-row { display: grid; gap: 6px; margin: 0; }
.count-form .count-row > span, .count-form .count-row > label { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; }
.count-form .segmented a { padding: 6px 12px; font-size: 13px; }
.band-row { display: flex; align-items: center; gap: 8px; }
.dash-tabs { display: grid; width: 100%; margin-bottom: 16px; }
.tab-lead { margin: -4px 0 12px; color: var(--muted); font-size: 14px; }
.tab-block { margin-bottom: 16px; }
.tab-note { margin: 8px 0 0 !important; }

.heat-card { padding: 14px 18px 12px; margin-bottom: 16px; }
.heat-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 8px; }
.heat-head h3 { margin: 0; font-size: 16px; }
.heat-head small { color: var(--muted); font-size: 13px; }
.heat-scroll { position: relative; overflow-x: auto; }
.heat-full { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
.heat-full :is(thead, tbody) :is(th, td) { padding: 0; border: 0; height: auto; line-height: 1; text-transform: none; letter-spacing: 0; background: none; white-space: nowrap; }
.heat-full thead th { font-size: 11px; font-weight: 500; color: var(--muted); text-align: left; overflow: visible; height: 16px; }
.heat-full tbody th { width: 30px; font-size: 11px; font-weight: 500; color: var(--muted); text-align: left; }
.heat-full td i { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--surface-2); }
.heat-full td i.flat { background: var(--line-strong); }
.heat-full td a { display: block; }
.heat-full td.off i { opacity: .3; }
.heat-full td.future i { background: transparent; }
.heat-full td a:focus-visible i { outline: 3px solid var(--brand-soft); outline-offset: 1px; }
.heat-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.heat-legend .heat-swatch { display: inline-block; width: 11px; height: 11px; border-radius: 2px; }
.heat-swatch.loss { background: var(--danger); }
.heat-swatch.gain { background: var(--success); }
.heat-legend .sep { margin: 0 6px; }

.kpi-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi-grid .metric-card { display: flex; flex-direction: column; height: 118px; padding: 14px 16px; min-width: 0; overflow: hidden; }
/* Every card is the same size on every tab: one-line label and value, a note of at most two
   lines; what does not fit is in the ⓘ tooltip or the note's own title. */
.kpi-grid .metric-card .label-row { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; white-space: nowrap; overflow: visible; }
.kpi-grid .metric-card .label-row .info-tip { flex: none; }
.kpi-grid .metric-card strong { font-size: 22px; line-height: 1.25; margin-top: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-grid .metric-card strong.none { color: var(--muted); font-weight: 600; }
.kpi-grid .metric-card strong a { color: inherit; text-decoration: none; }
.kpi-grid .metric-card strong a:hover { text-decoration: underline; }
.kpi-grid .metric-card strong b { font-weight: inherit; }
.kpi-grid .metric-card small { font-size: 12px; line-height: 1.35; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dash-empty { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 14px; margin-bottom: 12px; border: 1px dashed var(--line-strong); border-radius: 12px; background: var(--surface); font-size: 14px; }
.dash-empty span { color: var(--muted); }
.dash-sources a { font-weight: 600; }
.dash-info { margin: -4px 0 14px; color: var(--muted); font-size: 13px; }

.ov-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 16px; }
.ov-grid.even { grid-template-columns: 1fr 1fr; }
.ov-card { padding: 14px 18px 16px; min-width: 0; }
.ov-card h3 { margin: 0; font-size: 16px; }
.ov-card .sub { margin: 2px 0 8px; color: var(--muted); font-size: 13px; }
.ov-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; }
.ov-card tbody th[scope="row"] { text-transform: none; letter-spacing: 0; font-size: 14px; }
.ov-card tbody th[scope="row"] small, .ov-card td.numeric small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.dash-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ov-curve { display: block; width: 100%; height: 230px; overflow: visible; }
.ov-line { fill: none; stroke: var(--brand); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.ov-area-dd { fill: color-mix(in srgb, var(--danger) 30%, transparent); stroke: var(--danger); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ov-zero { stroke: var(--line-strong); stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.ov-guide { stroke: var(--danger); stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; opacity: .7; }
.ov-axis { font-size: 10px; fill: var(--muted); }
.ov-bar.win { fill: var(--success); }
.ov-bar.loss { fill: var(--danger); }
.ov-bar.loss.past { fill: color-mix(in srgb, var(--danger) 65%, #000); }
.ov-bar.flat { fill: #8a9a9e; }
.ov-donut { display: grid; justify-items: center; gap: 8px; padding-top: 6px; }
.ov-donut svg { width: 150px; height: 150px; }
.ov-donut dl { display: grid; grid-template-columns: repeat(3, auto); gap: 2px 18px; margin: 4px 0 0; font-size: 13px; text-align: center; }
.ov-donut dt { color: var(--muted); font-size: 12px; }
.ov-donut dd { margin: 0; font-weight: 700; }
.ov-donut dt i, .alloc-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; }
.ov-foot { margin: 0 0 18px; font-size: 13px; color: var(--muted); }
.dash-rows > summary { cursor: pointer; padding: 12px 16px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.meter { display: inline-block; vertical-align: middle; width: 60px; height: 6px; margin-left: 8px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.meter i { display: block; height: 100%; max-width: 100%; background: var(--brand); }
.meter i.hot { background: var(--danger); }
.week-list, .tag-list, .alloc-legend { list-style: none; margin: 0; padding: 0; }
.week-list li, .tag-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.week-list li:last-child, .tag-list li:last-child { border-bottom: 0; }
.week-list small, .tag-list small { color: var(--muted); }
.week-list .done { color: var(--success); font-weight: 650; white-space: nowrap; }
.alloc-legend { display: grid; gap: 4px; width: 100%; margin-top: 4px; font-size: 13px; }
.alloc-legend li { display: flex; justify-content: space-between; gap: 8px; }
.alloc-legend b { font-variant-numeric: tabular-nums; }
.alloc-ring { fill: none; stroke-width: 20; }
.alloc-brand { stroke: var(--brand); background: var(--brand); }
.alloc-blue { stroke: #3f8fd2; background: #3f8fd2; }
.alloc-amber { stroke: #e0a43a; background: #e0a43a; }
.alloc-violet { stroke: #8a6fd1; background: #8a6fd1; }
.alloc-green { stroke: #2fae8f; background: #2fae8f; }
.alloc-rose { stroke: #c75a8b; background: #c75a8b; }
.alloc-grey { stroke: #8a9a9e; background: #8a9a9e; }
.nav-chart-under { margin-top: 6px; }
/* Tooltips reuse .info-tip (D-125); these only place it in cards and table headings. */
.info-tip::after { text-transform: none; letter-spacing: 0; text-align: left; }
h3 .info-tip { margin-left: 4px; vertical-align: 1px; font-weight: 400; }
th .info-tip { width: 16px; height: 16px; font-size: 12px; vertical-align: -2px; }
.metric-card .info-tip { display: inline-grid; font-size: 13px; font-weight: 400; }
.kpi-grid .metric-card:nth-child(6n) .info-tip::after, th.numeric .info-tip::after, .ov-grid > :last-child h3 .info-tip::after { left: auto; right: -8px; }
@media (max-width: 1100px) { .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kpi-grid .metric-card:nth-child(n) .info-tip::after { left: -8px; right: auto; } .kpi-grid .metric-card:nth-child(3n) .info-tip::after { left: auto; right: -8px; } }
@media (max-width: 760px) { .ov-grid, .ov-grid.even { grid-template-columns: 1fr; } .ov-grid > :last-child h3 .info-tip::after { left: -8px; right: auto; } .dash-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .dash-tabs a { flex: 1 0 auto; white-space: nowrap; padding: 8px 12px; font-size: 13px; } }
@media (max-width: 560px) { .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi-grid .metric-card:nth-child(n) .info-tip::after { left: -8px; right: auto; } .kpi-grid .metric-card:nth-child(2n) .info-tip::after { left: auto; right: -8px; } .count-form { min-width: 0; width: calc(100vw - 40px); } }

/* D-141: Recovery. Badges in Positions, the action list, the plan form, the review. */
.rb { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 750; white-space: nowrap; text-decoration: none; }
.rb-danger { color: #8f1d1d; background: #fde3e1; border: 1px solid #f2b8b3; }
.rb-warn { color: #7a5a00; background: #fff3c4; border: 1px solid #ecd27a; }
.rb-care { color: var(--brand-strong); background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent); }
.rb-muted { color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); }
html[data-theme="dark"] .rb-danger { color: #ffb4ab; background: #4a1c19; border-color: #7a2e29; }
html[data-theme="dark"] .rb-warn { color: #f3dc8f; background: #3d3210; border-color: #6b5a1d; }
@media (prefers-color-scheme: dark) { html[data-theme="system"] .rb-danger { color: #ffb4ab; background: #4a1c19; border-color: #7a2e29; } html[data-theme="system"] .rb-warn { color: #f3dc8f; background: #3d3210; border-color: #6b5a1d; } }
.pos-name .rb { align-self: center; }
.rec-tabs a .count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 6px; padding: 0 5px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 11px; }
.rec-tabs a .count.soft { background: var(--surface-2); color: var(--muted); }
.act { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 14px; align-items: start; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.act:last-child { border-bottom: 0; }
.act h4 { margin: 0; font-size: 15px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.act p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.act .btns, .triage .btns { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: flex-start; }
.act .btns form { margin: 0; }
.case-alerts { margin-bottom: 16px; }
.case-alerts .act:last-child { border-bottom: 0; }
.rec-heading { font-size: 18px; margin: 22px 0 4px; }
.lesson-card { margin: 16px 0 6px; }
.note-box { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); font-size: 13px; }
.note-box b { display: block; margin-bottom: 2px; }
.rotation-card { margin: 16px 0 0; }
.tracker-card { margin: 0 0 16px; }
.tracker-grid { margin-top: 8px; }
.tracker-card .ov-foot { margin-top: 12px; }
.rounds-table td small { display: block; color: var(--muted); font-size: 12px; }
.two-roads { margin-top: 12px; }
.two-roads > h5 { display: flex; align-items: center; gap: 4px; margin: 0 0 8px; font-size: 13px; }
.road { display: grid; gap: 6px; margin: 0; font-size: 13px; }
.road div { display: flex; justify-content: space-between; gap: 10px; }
.road dt { color: var(--muted); }
.road dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; }
.compare { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
@media (max-width: 700px) { .compare { grid-template-columns: 1fr; } }
.lesson-form textarea { width: 100%; resize: vertical; }
.plan-quote { margin-top: 6px; padding: 6px 10px; border-left: 3px solid var(--brand); background: var(--surface-2); color: var(--text); font-size: 13px; border-radius: 0 8px 8px 0; }
.prio { display: inline-block; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: #8a9a9e; }
.prio.critical { background: var(--danger); } .prio.high { background: #e0a43a; } .prio.medium { background: #3f8fd2; }
.rec-table td, .rec-table th { white-space: nowrap; }
.rec-table th[scope="row"] { text-transform: none; letter-spacing: 0; font-size: 14px; }
.rec-table th[scope="row"] small, .rec-table td small { display: block; color: var(--muted); font-weight: 400; font-size: 12px; white-space: normal; }
.watch { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.watch:last-child { border-bottom: 0; }
.watch h4 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.watch dl { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 6px 0 0; font-size: 13px; }
.watch dt { color: var(--muted); display: inline; } .watch dd { display: inline; margin: 0 0 0 4px; font-weight: 650; }
.assess-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; margin-bottom: 16px; }
.assess-strip > div { padding: 10px 14px; border-right: 1px solid var(--line); min-width: 0; }
.assess-strip > div:last-child { border-right: 0; }
.assess-strip span { display: block; color: var(--muted); font-size: 11.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.assess-strip strong { display: block; font-size: 16px; margin-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.assess-strip strong.none { color: var(--muted); }
.assess-strip small { display: block; color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-layout { display: grid; grid-template-columns: minmax(300px, 2fr) minmax(0, 3fr); gap: 16px; align-items: start; }
.plan-layout > .card { margin: 0; }
.recovery-form [data-for][hidden] { display: none; }
.plan-right { position: sticky; top: 64px; scroll-margin-top: 72px; }
.recovery-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.settings-form .field { display: grid; gap: 6px; margin: 0 0 16px; }
.buy-notes { display: grid; gap: 8px; }
.buy-note { margin: 0; padding: 10px 14px; border-radius: 12px; font-size: 13px; }
.buy-note.warn { border: 1px solid #f0d58a; background: #fff8e1; color: #6d5200; }
.breaker-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 14px; padding: 12px 16px; border: 1px solid #f2b8b3; border-radius: 14px; background: #fdecea; color: #8f1d1d; font-size: 13.5px; }
.breaker-banner > div { flex: 1 1 320px; }
html[data-theme="dark"] .breaker-banner { background: #3a1c1a; border-color: #7a2e29; color: #ffb4ab; }
.buy-note.stop { border: 1px solid #f2b8b3; background: #fdecea; color: #8f1d1d; }
html[data-theme="dark"] .buy-note.stop { background: #3a1c1a; border-color: #7a2e29; color: #ffb4ab; }
.buy-note.info { border: 1px solid var(--line); background: var(--surface-2); color: var(--text); }
html[data-theme="dark"] .buy-note.warn { background: #3a3218; border-color: #6d5a1c; color: #f3d98b; }
.drawdown-card { margin-bottom: 16px; }
.drawdown-list { list-style: none; margin: 0; padding: 0; }
.drawdown-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.drawdown-list li:last-child { border-bottom: 0; }
.drawdown-list small { display: block; color: var(--muted); font-size: 12px; }
.drawdown-list strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.rb-plan { background: transparent; border: 1px dashed var(--line-strong); color: var(--muted); opacity: .75; }
.rb-plan:hover { opacity: 1; color: var(--brand-strong); border-color: var(--brand); }
.harvest-card { margin-bottom: 16px; }
.harvest-card .plan-quote { margin: 8px 0; }
.tlh-table th small, .tlh-table td small { display: block; color: var(--muted); font-size: 12px; font-weight: 500; }
.behaviour-card { margin-top: 16px; scroll-margin-top: 80px; }
.behaviour-grid { margin: 0; }
.limit-block h4 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 14px; }
.limit-block > p { margin: 0 0 8px; font-size: 12.5px; }
.state { font-size: 12px; font-weight: 650; }
.state.on { color: var(--danger); } .state.ok { color: var(--success); }
.settings-foot { margin: 0 0 16px; padding: 12px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.recovery-form legend { font-size: 13px; font-weight: 650; margin-bottom: 6px; padding: 0; }
.tech-list { display: grid; gap: 6px; margin-top: 8px; }
.tech-list[data-tech-list] { gap: 0; }
.tech-fold { border-top: 1px solid var(--line); }
.tech-fold:first-child { border-top: 0; }
.tech-fold > summary { display: flex; align-items: center; gap: 8px; padding: 10px 2px; cursor: pointer; list-style: none; color: var(--muted); font-size: 12px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.tech-fold > summary::-webkit-details-marker { display: none; }
.tech-fold > summary::before { content: "▸"; font-size: 11px; transition: transform .15s ease; }
.tech-fold[open] > summary::before { transform: rotate(90deg); }
.tech-fold > summary:focus-visible { outline: 3px solid var(--brand-soft); outline-offset: 2px; border-radius: 6px; }
.tech-fold > summary .picked { color: var(--brand-strong); font-weight: 650; letter-spacing: 0; text-transform: none; }
.tech-fold > summary small { margin-left: auto; font-weight: 650; letter-spacing: 0; }
.tech-fold-body { display: grid; gap: 6px; padding: 0 0 10px; }
.stages { display: grid; gap: 8px; margin-bottom: 12px; }
.stage-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.stage-row > b { min-width: 64px; align-self: center; font-size: 13px; }
.stage-row > small { align-self: center; }
@media (max-width: 560px) { .stage-row > b { flex-basis: 100%; } }
.tech { position: relative; display: block; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); cursor: pointer; }
.tech input { position: absolute; opacity: 0; pointer-events: none; }
.tech b { display: block; font-size: 14px; } .tech span { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.tech:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 30%, transparent); }
.tech:has(input:focus-visible) { outline: 3px solid var(--brand-soft); outline-offset: 2px; }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.panel-head h3 { margin: 0; font-size: 18px; }
.panel-lead { color: var(--muted); font-size: 13px; margin: 4px 0 12px; }
.plan-fields { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-start; }
.recovery-form .field.wide { flex-basis: 100%; }
.plan-note { margin-top: 12px; }
.recovery-form .field > label { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 650; margin-bottom: 5px; }
.recovery-form .field .label-alt + .label-alt { margin-left: 0; }
.recovery-form .check-row { font-weight: 500 !important; }
.recovery-form .form-control.price { width: 120px; text-align: right; font-variant-numeric: tabular-nums; }
.recovery-form .date-wrap { width: 160px; }
.recovery-form select.form-control { width: auto; min-width: 150px; max-width: 100%; }
.recovery-form .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.recovery-form .chip { position: relative; display: inline-flex; align-items: center; min-height: 0; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); font-size: 13px; font-weight: 600; cursor: pointer; }
.recovery-form .chip input { position: absolute; inset: auto; width: auto; height: auto; opacity: 0; pointer-events: none; }
.recovery-form .chip:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-strong); font-weight: 700; }
.recovery-form .chip:has(input:focus-visible) { outline: 3px solid var(--brand-soft); }
.recovery-form .chips.small .chip { padding: 4px 10px; font-size: 12.5px; }
.questions-panel { display: grid; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line-strong); }
.questions-panel .q { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.questions-panel .q > legend { float: left; margin: 0; min-width: 190px; font-weight: 650; }
.two { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; }
.plan-scenarios { margin-top: 12px; }
.scenario { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.scenario h5 { margin: 0 0 8px; font-size: 13px; }
.small-note { font-size: 13px; margin: 8px 0 0; }
.calc { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 16px; margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); font-size: 13px; }
.calc div span { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12px; }
.calc div strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.calc div small { display: block; font-size: 11.5px; }
.stop-discipline { margin-bottom: 16px; }
.outcome-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.guard { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; border: 1px solid #f2b8b3; background: #fdf0ef; color: #8f1d1d; font-size: 13px; }
html[data-theme="dark"] .guard { background: #3a1c1a; border-color: #7a2e29; color: #ffb4ab; }
.guard ul { margin: 4px 0 0; padding-left: 18px; }
.plan-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.plan-foot small { color: var(--muted); }
.triage { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1fr) 360px; gap: 8px 16px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 14px; }
.triage.head { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.triage:last-child { border-bottom: 0; }
.triage small { display: block; color: var(--muted); font-size: 12px; }
.triage.done { opacity: .6; }
.contrib { display: flex; align-items: center; gap: 8px; } .contrib i { display: block; height: 8px; max-width: 120px; border-radius: 4px; background: var(--danger); }
.review-progress { min-width: 180px; }
.progress { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; margin-top: 6px; } .progress i { display: block; height: 100%; background: var(--brand); }
.hold-choice { position: relative; } .hold-choice > summary { list-style: none; } .hold-choice > summary::-webkit-details-marker { display: none; }
.hold-form { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: flex; gap: 6px; width: 340px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 14px 22px; font-size: 13px; }
.timeline li::before { content: ""; position: absolute; left: 5px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--brand); }
.timeline li::after { content: ""; position: absolute; left: 9px; top: 16px; bottom: 0; width: 1px; background: var(--line-strong); }
.timeline li:last-child::after { display: none; }
.timeline time { color: var(--muted); font-size: 12px; display: block; }
.timeline .sys::before { background: #8a9a9e; } .timeline .warn::before { background: var(--danger); }
@media (max-width: 1100px) { .assess-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } .assess-strip > div { border-bottom: 1px solid var(--line); } .assess-strip > div:nth-child(4n) { border-right: 0; } }
@media (max-width: 860px) { .plan-layout { grid-template-columns: minmax(0, 1fr); } .plan-right { position: static; } }
@media (max-width: 900px) { .triage { grid-template-columns: minmax(0, 1fr) auto; } .triage.head { display: none; } .triage .contrib, .triage .btns { grid-column: 1 / -1; justify-content: flex-start; } }
@media (max-width: 560px) { .assess-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .assess-strip > div:nth-child(4n) { border-right: 1px solid var(--line); } .assess-strip > div:nth-child(2n) { border-right: 0; } .questions-panel .q > legend { min-width: 0; float: none; } }
@media (max-width: 760px) { .act { grid-template-columns: auto minmax(0, 1fr); } .act .btns { grid-column: 2; justify-content: flex-start; } .watch, .two { grid-template-columns: 1fr; } .hold-form { right: auto; left: 0; width: min(340px, calc(100vw - 48px)); } }
.recovery-form .check-row { justify-content: flex-start; align-self: flex-start; width: auto; gap: 10px; }
.card + .ov-foot { margin-top: 10px; }
/* D-142: Administration › Market & tax rules in three tabs. */
.mr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.mr-card { padding: 22px; }
.mr-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.mr-head h2 { margin: 0 0 2px; }
.mr-head p { margin: 0; font-size: 13.5px; }
.mr-sub { margin: 20px 0 6px; font-size: 14px; }
.mr-ticks { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.mr-ticks th, .mr-ticks td { padding: 7px 0; border-bottom: 1px solid var(--line); text-align: left; font-size: 14px; }
.mr-ticks th { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.mr-ticks .numeric { text-align: right; font-weight: 750; }
.mr-note { margin: 14px 0 0; color: var(--muted); font-size: 13px; }
.mr-source { margin: 10px 0 0; font-size: 14px; }
.mr-history { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.mr-history summary { cursor: pointer; color: var(--brand); font-weight: 600; font-size: 14px; }
.mr-history ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.mr-history li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 13.5px; }
.mr-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px 0; }
.mr-filters .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mr-coverage { list-style: none; margin: 0; padding: 12px 18px; display: grid; gap: 8px; font-size: 13.5px; }
.mr-coverage small { display: block; font-size: 12px; }
.mr-holidays { width: 100%; table-layout: fixed; }
.mr-holidays .c-day { width: 140px; }
.mr-holidays .c-market { width: 160px; }
.mr-holidays .c-source { width: 30%; }
.mr-holidays td { white-space: normal; overflow-wrap: anywhere; }
.mr-market-inline { display: none; }
.mr-holidays .mr-day { white-space: nowrap; font-variant-numeric: tabular-nums; }
.mr-jurisdiction { padding: 16px 18px 6px; }
.mr-jurisdiction h2 { margin: 0 0 8px; font-size: var(--size-item); }
.mr-tax { width: 100%; min-width: 900px; table-layout: fixed; }
.mr-tax th, .mr-tax td { white-space: normal; overflow-wrap: anywhere; vertical-align: top; }
.mr-tax td small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.4; }
.mr-tax .numeric { white-space: nowrap; }
.mr-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--warning, #b7791f) 14%, transparent); color: var(--warning, #b7791f); font-size: 12px; font-weight: 700; white-space: nowrap; }
@media (max-width: 760px) { .mr-grid { grid-template-columns: 1fr; } .mr-holidays .c-day { width: 104px; } .mr-holidays .c-market { display: none; } .mr-market-inline { display: block; font-size: 12px; } .mr-market-filter { display: grid; width: 100%; align-items: stretch; } .mr-filters { padding: 12px 14px 0; } .mr-coverage, .mr-jurisdiction { padding-left: 14px; padding-right: 14px; }
  .mr-tax { min-width: 0; }
  .mr-tax colgroup, .mr-tax thead { display: none; }
  .mr-tax, .mr-tax tbody, .mr-tax tr { display: block; }
  .mr-tax tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .mr-tax td { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; height: auto; padding: 3px 0; border: 0; text-align: left; }
  .mr-tax td.numeric { text-align: left; white-space: normal; }
  .mr-tax .mr-badge { justify-self: start; }
  .mr-tax td::before { content: attr(data-label); color: var(--muted); font-size: 12px; }
  .mr-tax td.mr-applies, .mr-tax td:nth-child(2) { display: block; }
  .mr-tax td.mr-applies { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; }
  .mr-tax td.numeric small { display: inline; margin-left: 6px; } }
/* D-143: Administration › Audit log, one category per tab, grouped by day. */
.al-chain { margin: -12px 0 18px; font-size: 13.5px; color: var(--success); font-weight: 650; }
.al-chain span { color: var(--muted); font-weight: 400; }
.al-broken { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; margin: 0 0 18px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--line)); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); }
.al-broken strong { color: var(--danger); }
.al-broken p { margin: 4px 0 0; font-size: 13.5px; }
.al-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.al-filters .form-control { min-height: 36px; padding: 5px 10px; font-size: 14px; width: auto; }
.al-filters .form-errors { flex-basis: 100%; }
.al-head, .al-row { display: grid; grid-template-columns: 64px minmax(170px, 1.1fr) minmax(0, 2fr) minmax(120px, .9fr) 110px; column-gap: 14px; }
/* Two lines a row: what happened on the first, #sequence and Detail on the second. */
.al-head { padding: 9px 18px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.al-group > summary { list-style: none; cursor: pointer; }
.al-group > summary::-webkit-details-marker { display: none; }
.al-day { display: block; padding: 8px 18px; background: color-mix(in srgb, var(--brand-soft) 60%, var(--surface)); color: var(--brand-strong); font-weight: 800; font-size: 13.5px; border-bottom: 1px solid var(--line); }
.al-day::before { content: "▸"; display: inline-block; width: 16px; }
.al-group[open] > .al-day::before { content: "▾"; }
.al-day small { color: var(--muted); font-weight: 500; margin-left: 6px; }
.al-list { list-style: none; margin: 0; padding: 0; }
.al-row { align-items: start; row-gap: 0; padding: 9px 18px; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.45; }
.al-time { grid-row: 1 / span 2; color: var(--muted); font-variant-numeric: tabular-nums; }
.al-time small { display: block; font-size: 11px; line-height: 1.6; }
.al-what strong { font-weight: 700; }
.al-sum, .al-obj, .al-who { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.al-obj, .al-who { font-size: 13.5px; }
.al-who { color: var(--muted); }
.al-body, .al-meta { display: contents; }
.al-bad { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); font-size: 11.5px; font-weight: 750; }
.al-raw { grid-row: 2; grid-column: 2 / -1; }
.al-raw summary { cursor: pointer; color: var(--brand); font-size: 12.5px; font-weight: 600; list-style: none; }
.al-raw summary::-webkit-details-marker { display: none; }
.al-raw summary::before { content: "▸ "; }
.al-raw[open] summary::before { content: "▾ "; }
.al-raw dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 14px; margin: 8px 0 2px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 12.5px; }
.al-raw dt { color: var(--muted); }
.al-raw dd { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.al-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px 18px; font-size: 13.5px; color: var(--muted); }
.al-pages { display: flex; gap: 8px; }
@media (max-width: 760px) {
  .al-head { display: none; }
  .al-row { grid-template-columns: 52px minmax(0, 1fr) 64px; column-gap: 10px; padding: 9px 14px; }
  .al-raw:not([open]) { justify-self: end; }
  .al-what { grid-row: 1; grid-column: 2; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .al-raw { grid-row: 1; grid-column: 3; }
  .al-raw[open] { grid-row: 3; grid-column: 2 / -1; }
  .al-body { display: block; grid-row: 2; grid-column: 2 / -1; width: 0; min-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; }
  .al-body > *, .al-meta > * { display: inline; font-size: 13px; }
  .al-meta > *::before { content: " · "; color: var(--muted); }
  .al-obj.is-empty { display: none; }
  .al-filters, .al-day, .al-foot { padding-left: 14px; padding-right: 14px; }
  .al-filters .form-control { flex: 1 1 140px; }
  .setups-bar .al-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row; gap: 6px; }
  .al-tabs a, .al-tabs a:first-of-type, .al-tabs a:last-of-type { margin: 0; border-radius: 10px; padding: 8px 6px; font-size: 13.5px; }
}
/* D-145: form steps that are closed take only their heading; the card's own gap no longer
   adds 14 px between them (the account-steps rule was overridden by .entry-card). */
.entry-card.account-steps { gap: 0; }
.form-step-optional:not([open]) { gap: 0; padding-top: 8px; padding-bottom: 8px; }
.form-step-optional.form-step-first:not([open]) { padding-top: 0; }
/* D-145: Broker fees › advanced schedules and the schedule form. */
.fs-adv { margin-top: 16px; padding: 0; }
.fs-adv > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 14px 18px; }
.fs-adv > summary::-webkit-details-marker { display: none; }
.fs-adv > summary h2 { margin: 0; font-size: var(--size-panel); }
.fs-adv > summary h2::before { content: "▸"; display: inline-block; width: 22px; color: var(--muted); }
.fs-adv[open] > summary h2::before { content: "▾"; }
.fs-adv > summary small { color: var(--muted); font-size: 13px; }
.fs-adv > summary .button { margin-left: auto; }
.fs-adv-body { padding: 0 18px 18px; }
.fs-adv-body > p { margin: 0 0 14px; color: var(--muted); font-size: 13.5px; }
.fs-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fs-card { border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: var(--surface); }
.fs-card header { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.fs-card h3 { margin: 0; font-size: 15px; }
.fs-card .who { color: var(--muted); font-size: 13px; margin: 2px 0 10px; }
.fs-card ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.fs-card li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.fs-card li small { display: block; color: var(--muted); font-size: 12px; }
.fs-card li strong { text-align: right; font-variant-numeric: tabular-nums; }
.fs-card footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.fs-renew > summary.button { list-style: none; }
.fs-renew .band-form .form-control { width: 130px; }
.fs-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-strong); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.fs-tag.used { background: var(--surface-2); color: var(--muted); }
.fs-who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fs-who label { position: relative; display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 12px; cursor: pointer; font-size: 14px; }
.fs-who label small { color: var(--muted); font-size: 12.5px; }
.fs-who label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.fs-who label:has(input:focus-visible), .seg label:has(input:focus-visible) { outline: 3px solid var(--brand); outline-offset: 1px; }
.fs-who input, .seg input { position: absolute; opacity: 0; pointer-events: none; }
.fs-row { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: flex-start; }
.fs-row .field { display: grid; gap: 6px; margin: 0; }
.fs-row .field[hidden] { display: none; }
.fs-row .field > label, .fs-row .field-label { font-weight: 700; font-size: 13.5px; }
.fs-row .form-control { width: 190px; }
.fs-row .fs-name .form-control, .fs-row .fs-component .form-control { width: 240px; }
.fs-lead { margin: 0; font-size: 13.5px; }
.fs-fold > summary { cursor: pointer; color: var(--brand); font-weight: 600; font-size: 13.5px; list-style: none; }
.fs-fold > summary::-webkit-details-marker { display: none; }
.fs-fold > summary::before { content: "▸ "; }
.fs-fold[open] > summary::before { content: "▾ "; }
.fs-fold > summary small { color: var(--muted); font-weight: 400; }
.fs-fold[open] > .fs-row { margin: 10px 0 6px; }
.fs-fold .form-control { width: 150px; }
.fs-rules { display: grid; gap: 10px; }
.fs-rule { position: relative; border: 1px solid var(--line); border-radius: 12px; padding: 12px 48px 12px 14px; background: var(--surface); display: grid; gap: 8px; }
.fs-rule[hidden] { display: none; }
.fs-remove { position: absolute; right: 8px; top: 8px; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; font-size: 16px; }
.fs-remove:hover { color: var(--danger); border-color: var(--danger); }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; min-height: 38px; }
.seg label { position: relative; display: inline-flex; align-items: center; padding: 0 12px; font-size: 13.5px; font-weight: 650; cursor: pointer; border-left: 1px solid var(--line-strong); }
.seg label:first-child { border-left: 0; }
.seg label:has(input:checked) { background: var(--brand-soft); color: var(--brand-strong); }
.fs-unit { position: relative; display: inline-flex; align-items: center; }
.fs-unit .form-control { width: 130px; padding-right: 34px; text-align: right; }
.fs-unit > span { position: absolute; right: 12px; color: var(--muted); font-size: 13px; pointer-events: none; }
.fs-add { justify-self: start; }
@media (max-width: 760px) {
  .fs-cards, .fs-who { grid-template-columns: 1fr; }
  .fs-row .field { flex: 1 1 140px; }
  .fs-row .form-control, .fs-row .fs-name .form-control, .fs-row .fs-component .form-control, .fs-fold .form-control, .fs-unit, .fs-unit .form-control { width: 100%; }
  .fs-rule .fs-row { display: grid; grid-template-columns: 1fr 1fr; }
  .fs-rule .fs-row .fs-component, .fs-rule .fs-row .fs-side { grid-column: 1 / -1; }
  .fs-adv > summary .button { margin-left: 0; }
}
/* D-147: ⓘ tooltips float above the page, so a clipping card or table cannot cut them;
   the CSS tooltip above stays for when scripts do not run. */
html.js-tips .info-tip:hover::after, html.js-tips .info-tip:focus-visible::after { content: none; display: none; }
.tip-float { position: fixed; z-index: 1000; max-width: min(260px, calc(100vw - 16px)); padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow, 0 8px 24px rgba(0,0,0,.12)); color: var(--text); font-size: 12.5px; font-weight: 500; line-height: 1.4; text-align: left; text-transform: none; letter-spacing: 0; white-space: normal; pointer-events: none; }
.tip-float[hidden] { display: none; }
/* D-148: the first-run guide and the dashboard's Start here card. */
.ob { max-width: 780px; margin: 0 auto; }
.ob-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.ob-top .eyebrow { margin: 0; }
.ob-top form { margin: 0; }
.ob-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; list-style: none; padding: 0; margin: 0 0 18px; }
.ob-steps li { font-size: 12.5px; color: var(--muted); font-weight: 650; padding-top: 8px; border-top: 4px solid var(--line); }
.ob-steps li.done { border-color: var(--brand); }
.ob-steps li.done a { color: var(--brand-strong); text-decoration: none; }
.ob-steps li.now { border-color: var(--brand); color: var(--text); }
.ob-card { padding: 26px; }
.ob-card h1 { font-size: 28px; margin: 0 0 6px; }
.ob-card .lead { color: var(--muted); margin: 0 0 20px; }
.ob-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.ob-actions .right { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.ob-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ob-choice { position: relative; display: grid; gap: 4px; padding: 14px; border: 1px solid var(--line-strong); border-radius: 14px; cursor: pointer; }
.ob-choice strong { font-size: 15px; }
.ob-choice small { color: var(--muted); font-size: 12.5px; }
.ob-choice input { position: absolute; opacity: 0; pointer-events: none; }
.ob-choice:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.ob-choice:has(input:focus-visible) { outline: 3px solid var(--brand); outline-offset: 1px; }
.ob-choice:has(input:disabled) { cursor: default; opacity: .7; }
.ob-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.ob-grid .field { display: grid; gap: 6px; margin: 0; align-content: start; }
.ob-grid .field label { font-weight: 700; font-size: 13.5px; }
.ob-grid .field small { color: var(--muted); font-size: 12.5px; }
.ob-done { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ob-done li { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.ob-done li b { color: var(--success); }
.ob-banner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; align-items: center; padding: 10px 14px; margin: -8px 0 16px; border: 1px solid color-mix(in srgb, var(--brand) 40%, var(--line)); border-radius: 12px; background: var(--brand-soft); color: var(--brand-strong); font-size: 13.5px; }
.start-card { padding: 18px 20px; margin-bottom: 18px; border-left: 4px solid var(--brand); }
.start-card header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.start-card h2 { margin: 0; font-size: var(--size-panel); }
.start-card header .muted { font-size: 13px; }
.start-card .inline-form { display: inline; margin: 0; }
.start-bar { height: 8px; border-radius: 4px; background: var(--surface-2); margin: 10px 0 14px; overflow: hidden; }
.start-bar i { display: block; height: 100%; background: var(--brand); }
.start-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.start-list li { border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: grid; gap: 4px; align-content: start; font-size: 13.5px; }
.start-list li small { color: var(--muted); font-size: 12.5px; }
.start-list li.ok { background: color-mix(in srgb, var(--success) 7%, var(--surface)); }
.start-list li.ok strong > span[aria-hidden] { color: var(--success); }
.start-list li a { font-size: 13px; font-weight: 650; }
@media (max-width: 1100px) { .start-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .ob-choices, .ob-grid { grid-template-columns: 1fr; }
  .ob-steps li { font-size: 11px; }
  .ob-card { padding: 18px; }
  .start-list { grid-template-columns: 1fr; }
}
.id-fold { margin-top: 4px; }
.id-fold[open] > summary { margin-bottom: 10px; }
/* D-148: Settings › Getting started. */
.start-setting { display: grid; gap: 6px; }
.start-setting .check-row { justify-content: flex-start; gap: 10px; font-weight: 600; min-height: 32px; }
/* D-149: sign-up pages. */
.auth-card .auth-hint { display: block; margin: -4px 0 4px; font-size: 12.5px; }
.auth-card .auth-check { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--muted); font-weight: 500; }
.auth-card .auth-check input { margin-top: 3px; flex: none; }
.auth-card .auth-alt { font-size: 14px; }
.auth-card .auth-ok { margin-bottom: 12px; }
.auth-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.auth-sent { text-align: center; }
.auth-sent .auth-mark { font-size: 40px; margin: 0 0 6px; }
.auth-resend { margin: 6px 0 0; }
.legal-page { max-width: 760px; padding: 28px; }
.legal-page h1 { margin: 0 0 8px; }
.legal-page h2 { font-size: var(--size-item); margin: 22px 0 6px; }
/* D-150: My account › Settings and Security. */
.me { max-width: none; }
.me-tabs { margin-bottom: 18px; }
.me-card { padding: 22px 24px; margin-bottom: 16px; }
.me-card h2 { margin: 0 0 4px; font-size: var(--size-panel); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.me-card .lead { margin: 0 0 16px; color: var(--muted); font-size: 13.5px; }
.me-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; }
.me-grid .field, .pw-form .field { display: grid; gap: 6px; margin: 0; align-content: start; }
.me-grid .field label, .pw-form .field label { font-weight: 700; font-size: 13.5px; }
.me-grid .field small, .pw-form .field small { color: var(--muted); font-size: 12.5px; }
.me-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.me-status { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.me-tile { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: var(--surface); display: grid; gap: 4px; align-content: start; }
.me-tile-label { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.me-tile strong { font-size: 18px; }
.me-tile small { color: var(--muted); font-size: 12.5px; }
.badge-ok, .badge-warn { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 750; justify-self: start; }
.badge-ok { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.badge-warn { background: color-mix(in srgb, #b7791f 16%, transparent); color: #9a6412; }
html[data-theme="dark"] .badge-warn { color: #f3c77a; }
.me-row { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.me-row > div { min-width: 0; }
.me-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 10px 0 0; font-size: 14px; }
.me-dl dt { color: var(--muted); }
.me-dl dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.me-note { margin: 10px 0 0; color: var(--muted); font-size: 13px; }
.me-link { font-weight: 650; }
.danger-zone { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 14px; }
.danger-zone .me-note { margin: 0 0 10px; }
.pw-form { display: grid; gap: 14px; max-width: 420px; }
@media (max-width: 760px) {
  .me-grid, .me-status { grid-template-columns: 1fr; }
  .me-card { padding: 18px; }
  .me-tabs .segmented-even { display: grid; width: 100%; }
}
.me-grid .form-control, .pw-form .form-control { width: 100%; min-width: 0; box-sizing: border-box; }
/* D-151: a password or a six-digit code does not need the whole card width. */
.narrow-form { max-width: 420px; }
/* D-152: Settings › Avatar, folded; one click on a picture saves it. */
.avatar-fold > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer; }
.avatar-fold > summary::-webkit-details-marker { display: none; }
.avatar-now { display: flex; align-items: center; gap: 14px; min-width: 0; }
.avatar-now > span:last-child { display: grid; }
.avatar-title { font-weight: 800; font-size: var(--size-panel); }
.avatar-now small { color: var(--muted); font-size: 13px; }
.avatar-fold[open] .avatar-change { visibility: hidden; }
.avatar-group { margin: 16px 0 8px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.avatar-picker { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.avatar-picker button { display: grid; place-items: center; padding: 6px; border: 2px solid transparent; border-radius: 14px; background: none; cursor: pointer; }
.avatar-picker button:hover { background: var(--surface-2); }
.avatar-picker button[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); }
.avatar-picker button:focus-visible { outline: 3px solid var(--brand); outline-offset: 1px; }
.avatar-pick { width: 50px; height: 50px; }
.avatar-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-top: 14px; }
.avatar-foot small { font-size: 12px; }
.glossary-page .glossary { margin-top: 8px; }
@media (max-width: 760px) { .avatar-picker { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Exports page (D-154): three equal cards, each with one purpose and its buttons inside the padding. */
.rp-lead { margin: 6px 0 0; color: var(--muted); }
.rp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.rp-card { display: flex; flex-direction: column; gap: 10px; padding: 22px; }
.rp-card h2 { margin: 0; font-size: 18px; }
.rp-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.rp-card .rp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 10px; }
.rp-hint { font-size: 12.5px; display: flex; gap: 6px; align-items: center; }
.rp-icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
@media (max-width: 900px) { .rp-grid { grid-template-columns: 1fr; } }
.wash-note summary { cursor: pointer; }
.wash-note[open] summary { margin-bottom: 8px; }

/* Sign-in, sign-up and the pages around them (D-155). One logo (the header's), the tagline as
   the centre, three points, and a card whose actions are in a fixed order. */
.auth-layout { grid-template-columns: minmax(0, 1.1fr) minmax(340px, 440px); gap: 72px; padding: 24px 0 8px; }
.auth-copy .eyebrow { margin: 0 0 14px; }
.auth-copy h1 { margin: 0; line-height: 1.04; letter-spacing: -.035em; }
.auth-copy .auth-lead { margin: 18px 0 0; color: var(--muted); font-size: 17px; line-height: 1.5; max-width: 520px; }
.auth-copy p:last-child { font-size: inherit; }
.auth-copy .auth-lead-short { display: none; }
.auth-points { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 16px; max-width: 540px; }
.auth-points li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; }
.auth-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.auth-points strong { display: block; font-size: 15px; }
.auth-points span:not(.auth-ic) { color: var(--muted); font-size: 14px; line-height: 1.45; }
.auth-copy .auth-trust { margin: 24px 0 0; max-width: 540px; color: var(--muted); font-size: 13px; line-height: 1.5; padding-top: 16px; border-top: 1px solid var(--line); }
.auth-card { padding: 30px; }
.auth-card h2 { margin: 0 0 4px; font-size: 24px; }
.auth-card .auth-sub { margin: 0 0 20px; color: var(--muted); font-size: 14px; }
.auth-form { gap: 16px; }
.auth-field { display: grid; gap: 6px; }
.auth-field > label, .auth-row label { font-weight: 700; font-size: 14px; }
.auth-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.auth-row a { font-size: 13px; font-weight: 600; }
.auth-pw { position: relative; }
.auth-pw input { padding-right: 46px; }
.auth-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; background: transparent; color: var(--muted); border-radius: 8px; cursor: pointer; display: grid; place-items: center; }
.auth-eye:hover { background: var(--surface-2); color: var(--text); }
.auth-eye:focus-visible { outline: 3px solid var(--brand-soft); }
.auth-form .button.primary { min-height: 46px; margin-top: 4px; }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--muted); font-size: 12.5px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-wide { display: flex; width: 100%; justify-content: center; min-height: 44px; }
.auth-foot { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; padding: 18px 0 26px; color: var(--muted); font-size: 13px; }
.auth-foot a { color: var(--muted); }
@media (max-width: 850px) {
  .auth-layout { grid-template-columns: 1fr; gap: 22px; min-height: 0; padding-top: 8px; }
  .auth-copy h1 { font-size: 30px; }
  .auth-copy .auth-lead-long, .auth-points, .auth-copy .auth-trust { display: none; }
  .auth-copy .auth-lead-short { display: block; margin-top: 8px; font-size: 15px; }
  .auth-card { padding: 22px; }
}

/* Guide card (D-156): the same size on every step, so Next does not make the page jump. */
.ob { width: 100%; }
.ob-card { min-height: 344px; display: flex; flex-direction: column; }
.ob-card form { display: flex; flex-direction: column; flex: 1; }
.ob-card .ob-actions { margin-top: auto; padding-top: 24px; }
.ob-card > .ob-actions { margin-top: auto; }
.ob-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; }
.ob-grid3 .field { display: grid; gap: 6px; margin: 0; align-content: start; }
.ob-grid3 .field label, .ob-label { font-weight: 700; font-size: 13.5px; }
.ob-grid3 .field small { color: var(--muted); font-size: 12.5px; }
.ob-seg { display: flex; border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden; }
.ob-seg label { flex: 1; position: relative; cursor: pointer; }
.ob-seg label + label { border-left: 1px solid var(--line-strong); }
.ob-seg input { position: absolute; opacity: 0; pointer-events: none; }
.ob-seg span { display: grid; place-items: center; height: 36px; padding: 0 8px; font-weight: 700; font-size: 14px; white-space: nowrap; background: var(--surface); }
.ob-seg label:has(input:checked) span { background: var(--brand-soft); color: var(--brand); }
.ob-seg label:has(input:focus-visible) { outline: 3px solid var(--brand); outline-offset: -3px; }
@media (max-width: 720px) { .ob-grid3 { grid-template-columns: 1fr; } .ob-card { min-height: 0; } }
.ob-grid3 select, .ob-grid3 .form-control { width: 100%; min-width: 0; }

/* "Check your email" (D-157). */
.auth-steps { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 18px; max-width: 520px; }
.auth-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; }
.auth-n { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.auth-steps .done .auth-n { background: var(--brand); color: #fff; border-color: var(--brand); }
.auth-steps .now .auth-n { background: var(--brand-soft); color: var(--brand); border-color: var(--brand); }
.auth-steps strong { display: block; font-size: 15px; }
.auth-steps li span:not(.auth-n) { color: var(--muted); font-size: 14px; line-height: 1.45; }
.auth-steps .off strong { color: var(--muted); }
.auth-sent { text-align: center; }
.auth-sent h2 { margin: 0 0 10px; }
.auth-sent p { margin: 0 0 8px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.auth-mail { width: 64px; height: 64px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; margin: 0 auto 16px; }
.auth-to { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; padding: 8px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); font-weight: 700; margin: 6px 0 14px; word-break: break-all; }
.auth-to a { font-weight: 600; font-size: 13px; }
.auth-gate { display: flex; gap: 8px; align-items: flex-start; text-align: left; border: 1px solid var(--line); background: var(--surface-2); border-radius: 12px; padding: 10px 12px; margin: 14px 0; font-size: 13.5px; }
.auth-sent .auth-resend { margin-top: 14px; }
.auth-sent .auth-resend .button { min-height: 42px; }
.auth-sent .auth-count { margin: 6px 0 0; font-size: 12.5px; }
.auth-sent .auth-alt { margin-top: 18px; }
@media (max-width: 850px) { .auth-steps { display: none; } }
.auth-copy-simple h1 { max-width: 640px; }
.auth-card .auth-hint ul { margin: 4px 0 0; padding-left: 18px; }

/* Settings (D-161): display and market are separate cards. */
.me-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 320px)); gap: 14px 24px; }
.me-grid3 .field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 0; align-content: start; }
.me-grid3 .field label, .me-grid3 .ob-label { font-weight: 700; font-size: 14px; }
.me-grid3 .field small { color: var(--muted); font-size: 12.5px; }
.me-grid3 select, .me-grid3 .form-control, .me-grid3 .form-control.input-fit { width: 100%; max-width: none; min-width: 0; }
.me-card .ob-choices { margin-top: 4px; max-width: 1008px; gap: 24px; }
.me-note { margin: 12px 0 0; font-size: 13.5px; }
@media (max-width: 1100px) { .me-grid3 { grid-template-columns: repeat(2, minmax(0, 320px)); } }
@media (max-width: 760px) { .me-grid3 { grid-template-columns: 1fr; } .me-card .ob-choices { grid-template-columns: 1fr; } }

/* Deleting an account and the sessions list (D-164). */
.del { max-width: 720px; margin: 0 auto; }
.del h1 { margin: 0 0 6px; }
.del .lead { color: var(--muted); margin: 0 0 18px; }
.del-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.del-box { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; background: var(--surface); margin-bottom: 14px; }
.del-two .del-box { margin-bottom: 0; }
.del-box h2 { margin: 0 0 8px; font-size: 15px; }
.del-box ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.del-keep { background: var(--surface-2); }
.del-export p { margin: 0 0 10px; font-size: 14px; }
.del-form .field { display: grid; gap: 6px; margin: 0 0 14px; }
.del-form .field label { font-weight: 700; font-size: 14px; }
.del-narrow { max-width: 560px; }
.del-leave { margin-top: 14px; }
.sessions-table { width: 100%; }
.sessions-table td small { display: block; }
.sessions-end { text-align: right; width: 1%; white-space: nowrap; }
.me-delete .me-note { margin: 4px 0 0; }
@media (max-width: 760px) { .del-two { grid-template-columns: 1fr; } }
.del-form .form-control { width: 100%; max-width: none; }
.del-form .me-note { margin: 0 0 16px; }
.auth-find { text-align: left; border: 1px solid var(--line); background: var(--surface-2); border-radius: 12px; padding: 12px 14px; margin: 4px 0 12px; font-size: 14px; }
.auth-find dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 8px 0; }
.auth-find dt { color: var(--muted); }
.auth-find dd { margin: 0; font-weight: 600; word-break: break-word; }
.auth-find .auth-inboxes { margin: 8px 0 0; font-size: 13px; }