/* IBM Plex Sans, variable in weight and width: tables use a narrower width.
   Subsets: latin, latin-ext (₽), cyrillic. */
@font-face { font-family: "IBM Plex Sans"; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap;
  src: url(fonts/plex-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2212; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap;
  src: url(fonts/plex-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+20A0-20C4; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap;
  src: url(fonts/plex-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

/* A dense control room in slate tones, with soft cards in the manner of
   PrimeReact: light by default, dark by the system or by the switch in the
   header (data-theme on <html>). */
:root {
  --bg: #f8fafc; --panel: #ffffff; --raise: #f1f5f9; --line: #e2e8f0; --line-strong: #cbd5e1;
  --text: #0f172a; --muted: #64748b; --focus: #2563eb;
  --blue: #2563eb; --blue-dim: #bfdbfe; --blue-soft: #eff6ff;
  --amber: #b45309; --amber-soft: #fef3c7; --red: #dc2626; --red-soft: #fee2e2; --green: #15803d; --green-soft: #dcfce7;
  --r-aaa: #3f8fc0; --r-aa: #3f9e8c; --r-a: #6fa94e; --r-bbb: #d4a634; --r-bb: #df7f35; --r-b: #d9573f; --r-nr: #9aa6b2;
  --share: #7c3aed; --bond: #2563eb; --cash: #94a3b8; --other: #d97706;
  --tile: #e8eef5; --tile-gov: #dbe7f6; --tile-share: #ebe7fb; --tile-watch: #fdecc8; --tile-broken: #fbdcd8;
  --shadow: 0 10px 30px rgba(15, 23, 42, 0.12); --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --narrow: 85%; /* font-stretch of table cells */
  --radius: 12px; /* cards */
  --radius-sm: 8px; /* controls */
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #020617; --panel: #0f172a; --raise: #1e293b; --line: #1e293b; --line-strong: #334155;
    --text: #f1f5f9; --muted: #94a3b8; --focus: #60a5fa;
    --blue: #60a5fa; --blue-dim: #1e3a8a; --blue-soft: #172554;
    --amber: #fbbf24; --amber-soft: #3b2a0a; --red: #f87171; --red-soft: #3f1515; --green: #4ade80; --green-soft: #0f2e1c;
    --r-aaa: #4f9ec9; --r-aa: #5fb3a3; --r-a: #8cbf6a; --r-bbb: #d6b04a; --r-bb: #e38a3c; --r-b: #e46a55; --r-nr: #8391a1;
    --share: #a78bfa; --bond: #60a5fa; --cash: #475569; --other: #fbbf24;
    --tile: #1b2738; --tile-gov: #172a40; --tile-share: #221f3d; --tile-watch: #3a2c10; --tile-broken: #3d1c1a;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.5); --shadow-sm: none;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #020617; --panel: #0f172a; --raise: #1e293b; --line: #1e293b; --line-strong: #334155;
    --text: #f1f5f9; --muted: #94a3b8; --focus: #60a5fa;
    --blue: #60a5fa; --blue-dim: #1e3a8a; --blue-soft: #172554;
    --amber: #fbbf24; --amber-soft: #3b2a0a; --red: #f87171; --red-soft: #3f1515; --green: #4ade80; --green-soft: #0f2e1c;
    --r-aaa: #4f9ec9; --r-aa: #5fb3a3; --r-a: #8cbf6a; --r-bbb: #d6b04a; --r-bb: #e38a3c; --r-b: #e46a55; --r-nr: #8391a1;
    --share: #a78bfa; --bond: #60a5fa; --cash: #475569; --other: #fbbf24;
    --tile: #1b2738; --tile-gov: #172a40; --tile-share: #221f3d; --tile-watch: #3a2c10; --tile-broken: #3d1c1a;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.5); --shadow-sm: none;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.45 var(--sans); font-variant-numeric: tabular-nums; color: var(--text); background: var(--bg); }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a.name { color: inherit; }
a.name:hover { color: var(--blue); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

h1 { font: 600 24px/1.25 var(--sans); margin: 0 0 8px; }
h2 { font: 600 15px/1.4 var(--sans); margin: 36px 0 12px; }
h3 { font: 600 15px/1.4 var(--sans); margin: 24px 0 8px; }
h3 .muted { font-weight: 400; }
h1 + .meta, h1 + p { margin-top: 0; }

/* ---------- Shell ---------- */

/* Header: main pages, then the account's records and settings */
header.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 24px; height: 60px; padding: 0 24px;
  background: var(--panel); border-bottom: 1px solid var(--line); }
header.top .brand { display: flex; align-items: center; gap: 10px; font: 600 18px var(--sans); color: var(--text); }
header.top .brand:hover { text-decoration: none; }
header.top .brand svg { width: 22px; height: 22px; }
header.top nav { display: flex; align-items: center; gap: 2px; }
header.top nav a { padding: 6px 14px; border-radius: 999px; font-size: 15px; color: var(--muted); }
header.top nav a:hover { color: var(--text); background: var(--raise); text-decoration: none; }
header.top nav a.active { color: var(--panel); background: var(--text); font-weight: 500; }
header.top nav.records { margin-left: auto; }
header.top nav.records a { font-size: 14px; }
header.top .more { position: relative; }
header.top .more summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 6px 10px;
  border-radius: 999px; color: var(--muted); font-size: 14px; }
header.top .more summary::-webkit-details-marker { display: none; }
header.top .more summary::after { content: "▾"; font-size: 11px; }
header.top .more summary:hover, header.top .more[open] summary { background: var(--raise); color: var(--text); }
header.top .more-menu { position: absolute; right: 0; top: calc(100% + 6px); display: grid; gap: 10px; justify-items: start; min-width: 180px;
  padding: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14); }
header.top .more-label, header.top .more-records, header.top .more-login { display: none; }

main { max-width: 1280px; margin: 24px auto 64px; padding: 0 24px; }

/* The verdict of a screen: what matters and where to start. Blue informs,
   amber means there are decisions to make. */
.verdict { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; margin: 0 0 20px; padding: 14px 18px;
  background: var(--blue-soft); border: 1px solid var(--blue-dim); border-left: 4px solid var(--blue); border-radius: 10px; font-size: 16px; }
.verdict.attn { background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 35%, transparent); border-left-color: var(--amber); }
.verdict .ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: var(--panel); font-weight: 700; }
.verdict.attn .ic { background: var(--amber); }
.verdict b { font-weight: 600; }
.verdict .next { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); }

/* Status strip: the figures that answer "is everything fine" in one row */
.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 12px; margin: 0 0 24px; }
.strip > div { padding: 14px 16px; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); }
.strip .label { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip .value { font: 500 20px var(--sans); }
.strip .big .value { font-size: 26px; }
.strip small { color: var(--muted); font-size: 12px; }
.strip > div > small { display: block; margin-top: 2px; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm); }
.panel-title { font: 600 13px var(--sans); color: var(--muted); margin: 0 0 10px; display: flex; gap: 14px; align-items: center; justify-content: space-between; }
.key { display: flex; gap: 12px; font-weight: 400; flex-wrap: wrap; }
.key i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }

/* ---------- Text ---------- */

.muted { color: var(--muted); }
.small { font-size: 12px; }
.neg { color: var(--red); }
.pos, .up { color: var(--green); }
.nowrap { white-space: nowrap; }
.problem { color: var(--amber); }
.cur { color: var(--muted); font-size: 12px; }
.meta { color: var(--muted); font-size: 13px; margin: 0 0 20px; max-width: 80ch; }
.lead { font-size: 15px; color: var(--muted); max-width: 80ch; margin: 0 0 16px; }
.lead b { font-weight: 600; color: var(--text); }

/* An estimated value: future coupons are unknown and taken at the current rate */
.est { color: var(--amber); cursor: help; margin-right: 1px; }

.alert { padding: 10px 14px; margin: 0 0 16px; border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent);
  border-left: 4px solid var(--amber); border-radius: 10px; background: var(--amber-soft); }
.alert.error { border-color: color-mix(in srgb, var(--red) 35%, transparent); border-left-color: var(--red); background: var(--red-soft); }
.table-wrap + .alert { margin-top: 16px; }
.alert ul { margin: 6px 0 0; padding-left: 20px; }

/* Rating pill: one scale for every rating on every page */
.pill { display: inline-block; min-width: 38px; padding: 1px 6px; border-radius: 6px; font: 600 12px var(--sans); font-stretch: var(--narrow);
  text-align: center; color: #10161c; background: var(--r-nr); }
.pill.AAA { background: var(--r-aaa); } .pill.AA { background: var(--r-aa); } .pill.A { background: var(--r-a); }
.pill.BBB { background: var(--r-bbb); } .pill.BB { background: var(--r-bb); } .pill.B, .pill.CCC { background: var(--r-b); }

.badge { display: inline-block; padding: 0 8px; border-radius: 6px; font: 600 12px/20px var(--sans); white-space: nowrap;
  background: var(--raise); color: var(--muted); }
.badge.ok { background: var(--green-soft); color: var(--green); }
.badge.warn { background: var(--amber-soft); color: var(--amber); }
.badge.error { background: var(--red-soft); color: var(--red); }
.flags { display: flex; flex-wrap: wrap; gap: 4px; }
.flags.end { justify-content: flex-end; }

/* ---------- Tables ---------- */

/* Dense: a narrower width in cells, a strong rule under the head, hairlines between rows */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th { padding: 8px 10px; font-weight: 600; font-size: 12px; color: var(--muted); text-align: left; vertical-align: bottom; white-space: nowrap;
  border-bottom: 1px solid var(--line-strong); }
td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; font-stretch: var(--narrow); }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
tbody tr:hover td { background: var(--raise); }
td.num, th.num { text-align: right; white-space: nowrap; }
tr.group td { font: 600 15px var(--sans); padding-top: 20px; border-bottom-color: var(--line-strong); }
tbody tr.group:hover td { background: none; }
td .sub { color: var(--muted); font-size: 12px; }
td.bar-cell { width: 40%; vertical-align: middle; }
tr.total td { border-top: 1px solid var(--line-strong); }
tr.cash td { color: var(--muted); }

/* Bond tables share column widths, so tables of several groups line up */
table.bond-table { table-layout: fixed; min-width: 980px; }
.bond-table th { white-space: normal; }
.bond-table .w-name { width: 25%; }
.bond-table .w-rating { width: 12%; }
.bond-table .w-date { width: 14%; }
.bond-table .w-num { width: 8.17%; }

/* Enhanced tables keep their own sticky header while scrolling. */
[hidden] { display: none !important; }
.table-scroll { max-height: 70vh; overflow: auto; scrollbar-gutter: stable; }
.table-scroll thead th { position: sticky; top: 0; z-index: 2; background: var(--panel); box-shadow: inset 0 -1px var(--line-strong); }
table[data-table].bond-table { table-layout: auto; min-width: 0; }
[data-table] .w-name { min-width: 200px; }
[data-table] .w-rating { min-width: 80px; }
[data-table] .w-date { min-width: 130px; }
[data-table] .w-num { min-width: 94px; }
button.table-sort { height: auto; border: 0; padding: 2px 0; background: none; border-radius: 2px; box-shadow: none;
  font: inherit; color: inherit; white-space: normal; text-align: inherit; display: inline; }
button.table-sort::after { content: " ↕"; color: var(--muted); white-space: nowrap; }
button.table-sort:hover, th[aria-sort] { color: var(--text); }
th[aria-sort="ascending"] .table-sort::after { content: " ↑"; color: var(--blue); }
th[aria-sort="descending"] .table-sort::after { content: " ↓"; color: var(--blue); }
.table-tools { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.table-columns { position: relative; flex: none; }
.table-columns > summary { cursor: pointer; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 5px 12px; font-size: 13px; background: var(--panel); }
.column-choices { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; min-width: 220px; max-width: calc(100vw - 48px);
  max-height: 60vh; overflow-y: auto;
  padding: 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel); box-shadow: var(--shadow); }
.column-choices label { display: flex; align-items: center; gap: 8px; padding: 6px; cursor: pointer; }
.column-choices label:hover { background: var(--raise); }
.column-choices input { margin: 0; flex: none; }
.table-name { display: flex; gap: 6px; align-items: baseline; }
button.row-toggle { flex: none; width: 22px; height: 22px; padding: 0; font-size: 21px; line-height: 1; box-shadow: none; }
button.row-toggle[aria-expanded="true"] { transform: rotate(90deg); color: var(--blue); }
.row-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; padding: 6px 12px 12px; font-size: 13px; }
.row-details > div { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.row-details .label { color: var(--muted); font-size: 12px; }
tr[data-row-details] > td, tr[data-row-details]:hover > td { background: var(--blue-soft); }

button.term-help { display: inline-flex; width: 17px; height: 17px; padding: 0; border-radius: 50%; vertical-align: middle;
  color: var(--muted); font: 500 11px var(--sans); box-shadow: none; }
.term-tooltip { position: fixed; z-index: 50; width: max-content; max-width: min(320px, calc(100vw - 16px)); padding: 10px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel); color: var(--text); box-shadow: var(--shadow); font-size: 13px; }

/* ---------- Controls ---------- */

button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel); color: var(--text);
  font: 500 13px var(--sans); cursor: pointer; white-space: nowrap; box-shadow: var(--shadow-sm); }
button:hover, .btn:hover { background: var(--raise); text-decoration: none; }
button.primary, .btn.primary { background: var(--blue); border-color: var(--blue); color: var(--panel); }
button.primary:hover, .btn.primary:hover { background: var(--blue); filter: brightness(1.1); color: var(--panel); }
button.ghost { border-color: transparent; background: none; color: var(--blue); }
button.danger { border-color: var(--red); color: var(--red); }
button.danger:hover { background: var(--red-soft); }
button.link { height: auto; border: 0; padding: 0; background: none; color: var(--muted); font: inherit; box-shadow: none; }
button.link:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

input, select { height: 34px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel);
  color: var(--text); font: 500 14px var(--sans); }
input:focus, select:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent); }
select { appearance: none; padding-right: 30px; cursor: pointer;
  background: var(--panel) no-repeat right 10px center / 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238592a2' stroke-width='1.6'/%3E%3C/svg%3E"); }
input[type="checkbox"], input[type="radio"] { height: auto; accent-color: var(--blue); }
input[type="file"] { height: auto; padding: 6px; }
input[type="number"] { -moz-appearance: textfield; }
input::-webkit-inner-spin-button { -webkit-appearance: none; }

form.inline { display: inline; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin: 0 0 16px; }
.toolbar h1, .toolbar h2 { margin: 0; }
.toolbar.section { margin-top: 36px; }
.toolbar .search, .toolbar .end { margin-left: auto; }
.toolbar label { color: var(--muted); }

/* Field: a label above, a box with an optional unit and steppers, help below */
.field { display: inline-flex; flex-direction: column; gap: 4px; }
.field > label, .field > .label { font-size: 12px; color: var(--muted); }
.field .help { font-size: 12px; color: var(--muted); }
.field.error .box { border-color: var(--red); }
.field.error .help { color: var(--red); }
.box { display: inline-flex; align-items: center; height: 34px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.box.search { background: var(--raise); border-color: transparent; }
.box:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent); }
.box input { height: 100%; border: none; border-radius: 0; background: none; box-shadow: none !important; min-width: 0; }
.box input[type="number"], .box input.number { width: 72px; text-align: right; }
.box .unit { padding: 0 10px 0 0; color: var(--muted); font-size: 13px; white-space: nowrap; }
.box .step { width: 30px; height: 100%; border: none; border-left: 1px solid var(--line); border-radius: 0; padding: 0; background: var(--raise); box-shadow: none;
  color: var(--muted); font: 600 15px var(--sans); }
.box .step:first-child { border-left: none; border-right: 1px solid var(--line); }
.box .step:hover { color: var(--blue); }
.box.search svg { width: 16px; height: 16px; margin-left: 10px; color: var(--muted); flex: none; }
.box.search input { width: 220px; }
.box .clear { height: 100%; border: none; background: none; box-shadow: none; color: var(--muted); padding: 0 10px; visibility: hidden; font-size: 16px; }
.box.search.filled .clear { visibility: visible; }

/* Segmented control on radio inputs: one choice of a few */
.seg { display: inline-flex; background: var(--raise); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label { padding: 4px 12px; border-radius: 7px; color: var(--muted); cursor: pointer; font-size: 13px; white-space: nowrap; }
.seg label b { font-weight: 500; margin-left: 5px; opacity: 0.75; }
.seg input:checked + label { background: var(--panel); color: var(--text); font-weight: 500; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12); }
.seg input:focus-visible + label { outline: 2px solid var(--focus); }

/* Filter chips on checkboxes: several at once */
.chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips label { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border: 1px solid var(--line-strong);
  border-radius: 14px; color: var(--muted); cursor: pointer; font-size: 13px; }
.chips label b { font-weight: 500; }
.chips input:checked + label { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); }
.chips input:checked + label::before { content: "✓"; font-weight: 700; }
.chips input:focus-visible + label { outline: 2px solid var(--focus); }

/* Switch on a checkbox: yes or no */
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; }
.switch i { width: 34px; height: 20px; border-radius: 10px; background: var(--line-strong); position: relative; transition: background 0.15s; }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--panel); transition: transform 0.15s; }
.switch input:checked + i { background: var(--blue); }
.switch input:checked + i::after { transform: translateX(14px); }
.switch input:focus-visible + i { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Dropdown: a native select in a .dd[data-dd] becomes a button and a listbox
   (app.js). Options may carry data-meta, data-sub and data-sep. */
.dd { position: relative; display: inline-block; }
.dd select { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.dd-button { gap: 10px; height: 34px; padding: 0 10px 0 12px; font-size: 14px; min-width: 180px; justify-content: flex-start; }
.dd-button:hover { color: var(--text); }
.dd .meta { margin: 0; max-width: none; }
.dd-button .meta { margin-left: auto; color: var(--muted); font-weight: 400; font-size: 13px; }
.dd-button::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: translateY(-2px) rotate(45deg); margin-left: 4px; }
.dd.open .dd-button { border-color: var(--focus); }
.dd.open .dd-button::after { transform: translateY(2px) rotate(-135deg); }
.dd-list { position: absolute; right: 0; top: calc(100% + 6px); min-width: 100%; margin: 0; padding: 6px; list-style: none; display: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); z-index: 30; }
.dd.open .dd-list { display: block; }
.dd.left .dd-list { left: 0; right: auto; }
.dd-list li { display: grid; grid-template-columns: 18px 1fr auto; gap: 2px 16px; align-items: baseline; padding: 7px 10px; border-radius: var(--radius-sm);
  cursor: pointer; white-space: nowrap; }
.dd-list li::before { content: ""; }
.dd-list li[aria-selected="true"]::before { content: "✓"; color: var(--blue); font-weight: 700; }
.dd-list li .meta { color: var(--muted); font-size: 13px; }
.dd-list li .sub { grid-column: 2 / -1; color: var(--muted); font-size: 12px; margin-top: -3px; }
.dd-list li.active { background: var(--raise); }
.dd-list li.sep { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 10px; border-radius: 0 0 5px 5px; }

/* Theme switch in the header */
.theme { display: inline-flex; gap: 2px; padding: 2px; background: var(--raise); border-radius: 999px; }
.theme button { width: 30px; height: 28px; padding: 0; border: none; border-radius: 999px; background: none; color: var(--muted); box-shadow: none; }
.theme button svg { width: 16px; height: 16px; }
.theme button[aria-pressed="true"] { background: var(--panel); color: var(--text); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12); }

/* Tabs switch views of one page */
.tabs { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0 0 20px; border-bottom: 1px solid var(--line); }
.tabs a { padding: 6px 0 10px; font-size: 15px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--text); text-decoration: none; }
.tabs a.active { color: var(--text); border-bottom-color: var(--blue); }
.subtabs { display: flex; gap: 6px; margin: -8px 0 18px; overflow-x: auto; }
.subtabs a { flex: none; display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 1px solid var(--line-strong);
  border-radius: 15px; color: var(--muted); font-size: 14px; white-space: nowrap; }
.subtabs a:hover { color: var(--text); text-decoration: none; }
.subtabs a.active { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); }
.seg a { padding: 4px 12px; border-radius: 7px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.seg a:hover { color: var(--text); text-decoration: none; }
.seg a.active { background: var(--panel); color: var(--text); font-weight: 500; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12); }
.spread-switch { max-width: 100%; overflow-x: auto; margin-bottom: 12px; }

/* ---------- Pages ---------- */

/* Portfolio summary: the value, then a sentence of what it is made of */
.hero { margin: 0 0 28px; }
.hero .account { color: var(--muted); font-size: 13px; margin-bottom: 4px; }
.hero .total { font: 600 36px/1.15 var(--sans); letter-spacing: -0.01em; }
.hero .total .cur { font-size: 22px; color: var(--muted); }
.hero .sentence { font-size: 16px; color: var(--muted); max-width: 80ch; margin: 6px 0 14px; }
.hero .sentence b { font-weight: 600; color: var(--text); white-space: nowrap; }
.hero .notes { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--muted); font-size: 13px; margin-top: 10px; }

.figures { display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: flex-end; margin: 0 0 24px; }
.figures .label { font-size: 12px; color: var(--muted); }
.figures .value { font: 500 20px/1.3 var(--sans); }
.figures .value.big { font-size: 30px; }
.figures form { margin-left: auto; }

/* Value chart: the line, a light wash under it, hairline grid; the hover
   crosshair and tooltip are shown by app.js. */
.history { margin: 0 0 36px; }
.chart { position: relative; margin: 0 0 12px; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .axis { fill: var(--muted); font: 11px var(--sans); }
.chart .line { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .area { fill: var(--blue); opacity: 0.1; }
.chart .report, .chart .cross { stroke: var(--line-strong); stroke-width: 1; }
.chart .dot { fill: var(--blue); stroke: var(--panel); stroke-width: 2; }
.chart .tip { position: absolute; top: 0; transform: translate(-50%, -100%); padding: 3px 8px; font-size: 12px; white-space: nowrap;
  pointer-events: none; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 4px; }
.chart:not(.hover) :is(.cross, .dot, .tip) { display: none; }

.allocation { display: flex; gap: 2px; height: 10px; border-radius: 3px; overflow: hidden; }
.allocation span { display: block; height: 100%; }
.allocation.thin { height: 6px; gap: 0; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.kind-share { background: var(--share); }
.kind-bond { background: var(--bond); }
.kind-cash { background: var(--cash); }
.kind-other { background: var(--other); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.account-view + .account-view { margin-top: 48px; }

/* Replacements and portfolio comparisons share the same before/after cells. */
.comparison { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.compare-metric { padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); min-width: 0; }
.compare-metric .label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.compare-values { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 19px; line-height: 1.4; }
.compare-values > span.before, .compare-values > strong { white-space: nowrap; }
.compare-values .before { color: var(--muted); }
.compare-values strong { font-weight: 600; }
.compare-arrow { color: var(--muted); font-size: 15px; }
.metric-unit { font-size: 12px; font-weight: 400; color: var(--muted); }
.metric-change { display: block; font-size: 12px; color: var(--muted); margin-top: 6px; }
.comparison.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.comparison.compact .compare-metric { background: var(--bg); border: 0; border-radius: 0; }
.comparison.compact .compare-metric + .compare-metric { border-left: 1px solid var(--line); }
.ideas { display: grid; gap: 12px; }
.idea-head { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; align-items: center; }
.idea .gain { font: 600 20px var(--sans); color: var(--green); white-space: nowrap; }
.idea .gain small { font-size: 12px; font-weight: 400; color: var(--muted); }
.replacement-pair { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); gap: 16px; align-items: center; margin: 16px 0 12px; }
.replacement-pair > div { display: flex; flex-direction: column; gap: 5px; }
.replacement-pair .label { color: var(--muted); font-size: 12px; }
.replacement-pair .name { font-size: 17px; font-weight: 600; }
.replacement-arrow { color: var(--muted); font-size: 22px; }
.idea-reason { margin: 0 0 14px; font-size: 13px; color: var(--muted); }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.actions form { margin: 0; }
.idea-alternatives { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.idea-alternatives > summary, .method-note > summary, .comparison-details > summary, .plan-trades > summary { color: var(--blue); cursor: pointer; font-size: 13px; }
.idea-alternatives[open] > summary, .comparison-details[open] > summary, .plan-trades[open] > summary { margin-bottom: 12px; }
.alternatives-table { min-width: 700px; }
.cash-ideas { margin-top: 32px; }
.cash-ideas h2 { margin: 0 0 4px; }
.cash-ideas .toolbar { align-items: center; }
.cash-ideas form.toolbar { margin-bottom: 0; }
.method-note { margin-top: 20px; color: var(--muted); font-size: 13px; }
.method-note p { max-width: 90ch; }
.empty-state { padding: 24px; text-align: center; }
.empty-state p { color: var(--muted); margin: 6px 0 14px; }
.optimize-settings { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.optimize-settings > button { align-self: center; }
.optimization-plan { margin-bottom: 20px; }
.optimization-plan h2 { margin: 0 0 4px; }
.plan-trades { padding: 12px 0; border-top: 1px solid var(--line); }
.comparison-details { margin: 16px 0; }

/* Overview: the title with the account switcher, KPI cards, the portfolio
   map next to what needs attention, payments by month, the value chart */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.page-head h1 { margin: 0; }
.strip { align-items: start; }
.strip .big { grid-column: span 2; }
.strip .legend { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.strip .allocation { margin-top: 8px; }
.strip .spark { display: block; width: 100%; height: 30px; margin-top: 6px; }
.strip .spark path { fill: none; stroke: var(--blue); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.overview-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; margin: 0 0 16px; }
h2 .count { font-weight: 600; color: var(--panel); background: var(--amber); border-radius: 10px; padding: 0 7px; font-size: 12px; vertical-align: 1px; }

.treemap { position: relative; aspect-ratio: 2.4; }
.tile { position: absolute; box-sizing: border-box; border: 1px solid var(--panel); border-radius: 4px; padding: 4px 6px; overflow: hidden;
  background: var(--tile); color: var(--text); font-size: 12px; line-height: 1.3; font-stretch: var(--narrow); }
a.tile:hover { text-decoration: none; outline: 2px solid var(--blue); z-index: 1; }
.tile .nm { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .v { display: block; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile.gov, .tile-key.gov { background: var(--tile-gov); }
.tile.share, .tile-key.share { background: var(--tile-share); }
.tile.watch, .tile-key.watch { background: var(--tile-watch); }
.tile.watch .nm { color: var(--amber); }
.tile.broken, .tile-key.broken { background: var(--tile-broken); }
.tile.broken .nm { color: var(--red); }
.tile-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; background: var(--tile); }

/* What needs attention: a bar of the level on the left */
.attention { list-style: none; margin: 0; padding: 0; }
.attention li { display: flex; gap: 10px; justify-content: space-between; padding: 9px 0 9px 14px; border-top: 1px solid var(--line); position: relative; }
.attention li:first-child { border-top: none; }
.attention li::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 2px; background: var(--line-strong); }
.attention li.decide::before { background: var(--red); }
.attention li.watch::before { background: var(--amber); }
.attention li.chance::before { background: var(--blue); }
.attention .who { font-weight: 500; }
.attention .what { color: var(--muted); font-size: 13px; }
.attention .due { flex: none; font-size: 13px; color: var(--red); white-space: nowrap; }
.attention .due.gain { color: var(--green); }

.payments-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; }
.bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; height: 150px; }
.bar { display: flex; flex-direction: column; min-width: 0; }
.bar .stack { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }
.bar i { display: block; }
.bar .coupons { background: var(--blue); border-radius: 3px 3px 0 0; }
.bar .principal { background: var(--blue-dim); }
.bar span { font-size: 11px; color: var(--muted); text-align: center; margin-top: 4px; }
.key .coupons, .key .principal { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.key .coupons { background: var(--blue); }
.key .principal { background: var(--blue-dim); }
.soon .label { color: var(--muted); margin-bottom: 4px; }
.soon .label b { color: var(--text); font-size: 16px; }
.soon .pay { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; border-top: 1px solid var(--line); font-size: 13px; }
.soon .pay a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soon .pay b { font-weight: 500; white-space: nowrap; }
.panel.payments, .panel.history { margin: 0 0 16px; }

/* Login */
.login { max-width: 320px; margin: 16vh auto 0; }
.login h1 { margin-bottom: 24px; }
.login input { display: block; width: 100%; margin-bottom: 12px; }
.login button { width: 100%; margin-top: 4px; }

/* Bond page: the title with actions, the market map next to the parts of
   the yield, facts and the price, then better bonds, changes and payments */
.bond-head { align-items: flex-start; }
.bond-head h1 { display: flex; align-items: center; gap: 10px; }
.bond-head h1 .pill { font-size: 13px; }
.bond-head .meta { margin: 4px 0 0; }
.bond-head .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.bond-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; margin: 0 0 16px; }
.bond-grid + .panel, .panel + .panel { margin-top: 16px; }

.market-map { display: block; width: 100%; height: auto; }
.market-map .grid { stroke: var(--line); }
.market-map .axis { fill: var(--muted); font: 11px var(--sans); }
.market-map .curve { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 4; }
.market-map .pt { opacity: 0.55; fill: var(--r-nr); }
.market-map .pt.better { opacity: 1; stroke: var(--text); stroke-width: 1; }
.market-map a:hover .pt { opacity: 1; stroke: var(--text); }
.market-map .own { fill: none; stroke: var(--text); stroke-width: 2.5; }
.market-map .own-label { fill: var(--text); font: 600 12px var(--sans); paint-order: stroke; stroke: var(--panel); stroke-width: 3px; }
.pt.AAA, .pill-key.AAA { fill: var(--r-aaa); background: var(--r-aaa); }
.pt.AA, .pill-key.AA { fill: var(--r-aa); background: var(--r-aa); }
.pt.A, .pill-key.A { fill: var(--r-a); background: var(--r-a); }
.pt.BBB, .pill-key.BBB { fill: var(--r-bbb); background: var(--r-bbb); }
.pt.BB, .pill-key.BB { fill: var(--r-bb); background: var(--r-bb); }
.pt.B, .pt.CCC, .pill-key.B { fill: var(--r-b); background: var(--r-b); }
.pill-key { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; }
.curve-key { display: inline-block; width: 16px; border-top: 2px dashed var(--muted); margin-right: 4px; vertical-align: 3px; }

.risk-rows > div { display: grid; grid-template-columns: minmax(0, 13em) 1fr 4em; gap: 10px; align-items: center; padding: 4px 0; font-stretch: var(--narrow); }
.risk-rows i { display: block; height: 10px; border-radius: 3px; background: var(--blue-dim); }
.risk-rows .loss i { background: var(--red); }
.risk-rows .total i { background: var(--blue); }
.risk-rows b { text-align: right; font-weight: 500; }
.risk-rows .total b { font-weight: 700; }
.risk-rows .note { display: block; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; margin: 12px 0 10px; }
.facts > div { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-stretch: var(--narrow); }
.facts span { color: var(--muted); }
.facts b { font-weight: 500; text-align: right; }
.chart-title { margin-top: 18px; }
.price-chart { display: block; width: 100%; height: 110px; }
.price-chart .line { fill: none; stroke: var(--blue); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.price-chart .par { stroke: var(--line-strong); stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.chart-foot { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); }
.changes { list-style: none; margin: 0; padding: 0; }
.changes li { padding: 6px 0; border-top: 1px solid var(--line); }
.changes li:first-child { border-top: none; }

/* Payments of one bond: a line from today to the last payment */
.timeline { position: relative; height: 52px; margin: 6px 8px 4px; }
.timeline .rail { position: absolute; left: 0; right: 0; top: 16px; height: 2px; background: var(--line); }
.timeline i { position: absolute; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); transform: translateX(-50%); }
.timeline i.est { background: var(--panel); border: 2px solid var(--blue); }
.timeline i.principal { top: 8px; width: 18px; height: 18px; background: var(--green); }
.timeline span { position: absolute; top: 32px; font-size: 12px; color: var(--muted); transform: translateX(-50%); white-space: nowrap; }
.timeline span:first-of-type { transform: none; }
.timeline span:last-of-type { transform: translateX(-100%); }
.payments-list summary { cursor: pointer; color: var(--blue); margin: 4px 0 8px; }

/* Action rows: a button with its explanation */
.trade { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0 0 24px; }
.trade label { color: var(--muted); }
.ideas > .panel { margin-top: 0; }
.optimization-plan.panel { margin-top: 0; }
#opt-loss { width: 112px; }

/* Rules page */
.rule-forms { display: grid; grid-template-columns: max-content 1fr; gap: 10px 16px; align-items: center; }
.rule-forms form { display: contents; }
.rule-forms .controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Components page */
.kit { margin-top: 16px; }
.kit .what { color: var(--muted); margin: 0 0 14px; font-size: 13px; }
.kit .row { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.kit .verdict:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  header.top { height: auto; flex-wrap: wrap; gap: 8px 16px; padding: 10px 16px; }
  header.top .brand { margin-right: auto; }
  header.top nav.main { order: 3; width: 100%; overflow-x: auto; }
  header.top nav a { padding: 8px 10px; }
  header.top nav.records, header.top .more-user { display: none; }
  header.top .more-label, header.top .more-login { display: inline; }
  header.top nav.more-records { display: flex; flex-direction: column; align-items: stretch; width: 100%; }
  main { padding: 0 16px; margin-top: 16px; }
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hero .total { font-size: 30px; }
  .toolbar .search { margin-left: 0; width: 100%; }
  .grid-2 { grid-template-columns: 1fr; }
  .overview-grid, .payments-grid { grid-template-columns: 1fr; }
  .overview-grid .queue { order: -1; }
  .treemap { aspect-ratio: 1.4; }
  .tile .v { display: none; }
  .rule-forms { grid-template-columns: 1fr; }
  .comparison { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .replacement-pair { grid-template-columns: 1fr; gap: 8px; }
  .replacement-arrow { display: none; }
  .idea .gain small { display: block; }
  .comparison.compact { grid-template-columns: 1fr; }
  .comparison.compact .compare-metric + .compare-metric { border-left: 0; border-top: 1px solid var(--line); }
  .bond-grid { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Holdings, cash flow, records and rule forms. */
.account-picker { margin: 0; }
.holdings-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.holdings-stats .label { white-space: normal; }
.account-view > .table-wrap { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.account-view > .meta { margin-top: 16px; }
.month-bars { height: 220px; margin-top: 20px; }
.chart-scroll { overflow-x: auto; }
.chart-scroll-hint { display: none; }
.month-bars .bar { text-decoration: none; }
.month-bars .bar:hover .stack { background: var(--raise); }
.chart-caption { margin: 12px 0 0; }
.small-date { font-size: 18px !important; }
.payments-list-panel { margin-top: 20px; }
#offers, [id^="month-"] { scroll-margin-top: 75px; }
.upload-panel h2 { margin: 0 0 14px; }
.upload-form { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.records-list { margin-top: 20px; }
.report-head h1 { overflow-wrap: anywhere; }
.report-head > div { min-width: 0; }
.rule-settings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rule-card { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.rule-card > button, .rule-card > a { margin-top: auto; }
.rule-card .field { width: 100%; }
.rule-card .dd-button { width: 100%; min-width: 0; }
.rule-card .box { width: fit-content; }
.rule-card p { margin: 0; }
:is(.rule-settings, .match-list) > .panel { margin-top: 0; }
.match-list { display: grid; gap: 10px; }
.match-card { display: grid; grid-template-columns: minmax(200px, 2fr) auto minmax(140px, 1fr) minmax(180px, 1fr); gap: 16px; align-items: start; }
.match-name, .match-price, .match-instrument { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.match-price .label, .match-instrument .label { font-size: 12px; color: var(--muted); }
.match-instrument summary { cursor: pointer; font-size: 13px; color: var(--blue); }
.match-instrument form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.login { max-width: 360px; }
.login p { margin: -10px 0 24px; }
.login > label { display: block; margin-bottom: 4px; }

@media (max-width: 900px) {
  .holdings-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rule-settings { grid-template-columns: 1fr; }
  .match-card { grid-template-columns: minmax(0, 1fr) auto; }
  .match-instrument { grid-column: 1 / -1; }
  .month-bars { min-width: 520px; }
  .upload-form input[type="file"] { width: 100%; }
  .upload-form .field { min-width: 0; max-width: 100%; }
}

.bond-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.bond-filter-flags { width: 100%; display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; }

/* On a phone the navigation scrolls away; charts and tables scroll locally. */
@media (max-width: 600px) {
  header.top { position: static; gap: 8px; }
  header.top nav.main { justify-content: space-between; }
  header.top nav.main a { flex: none; padding: 8px; font-size: 14px; }
  header.top .more summary { min-height: 40px; }
  header.top .more-menu button { min-height: 40px; }
  header.top .theme button { width: 36px; height: 36px; }
  .panel { padding: 14px; }
  .panel-title:has(> .key) { flex-direction: column; align-items: flex-start; gap: 8px; line-height: 1.4; }
  .bond-head h1 { flex-wrap: wrap; overflow-wrap: anywhere; }
  .bond-head > div { min-width: 0; }
  .strip .big { grid-column: 1 / -1; }
  .strip > div { padding: 12px; }
  .strip .label { white-space: normal; }
  .strip .value { font-size: 19px; }
  .verdict { padding: 12px; gap: 8px; }
  button, .btn, input, select, .box, .dd-button { height: 40px; }
  input, select, .box input { font-size: 16px; }
  .box .step { width: 36px; }
  .box.search input { width: 100%; }
  .chips label { height: 36px; }
  .switch { min-height: 40px; }
  .seg label, .seg a { padding: 8px 12px; }
  .subtabs a { height: 36px; }
  button.term-help { width: 28px; height: 28px; }
  button.row-toggle { width: 32px; height: 32px; }
  .table-name { align-items: flex-start; }
  .table-tools { align-items: flex-start; }
  .table-columns > summary { min-height: 40px; padding: 9px 12px; }
  .column-choices label { min-height: 40px; }
  .row-details { grid-template-columns: 1fr; width: calc(100vw - 100px); padding-left: 0; overflow-wrap: anywhere; }
  .dd { max-width: 100%; }
  .dd-button { max-width: 100%; white-space: normal; text-align: left; }
  .dd-button::after { flex: none; }
  .dd-list { min-width: 100%; max-width: calc(100vw - 16px); }
  .dd-list li { min-height: 40px; white-space: normal; overflow-wrap: anywhere; gap: 2px 8px; grid-template-columns: 18px minmax(0, 1fr) auto; }
  .market-map { min-width: 720px; }
  .bond-grid > .panel { min-width: 0; }
  .chart { min-width: 1100px; }
  .chart-scroll-hint { display: block; margin: 6px 0 12px; }
  .chart-foot { flex-wrap: wrap; }
  .chart-foot > :nth-child(2) { order: 1; width: 100%; text-align: center; }
  .risk-rows > div { grid-template-columns: 1fr auto; gap: 4px 10px; padding: 8px 0; }
  .risk-rows > div > i { grid-column: 1; grid-row: 2; }
  .risk-rows b { grid-column: 2; grid-row: 1 / 3; }
  .timeline span:not(:first-of-type):not(:last-of-type) { display: none; }
  .soon .pay { flex-wrap: wrap; }
  .soon .pay a { flex-basis: calc(100% - 100px); }
  .soon .pay b { margin-left: auto; }
  .attention li { flex-wrap: wrap; }
  .attention .due { margin-left: auto; }
}