/* Desk design system: "night session" (dark, default) and "day session" (light).
   Gains/losses use a teal-green / coral pair validated for colour-blind separation, and
   always ship with a sign or arrow so colour is never the only cue. */
:root {
  --bg: #0E1424; --surface: #151D31; --raised: #1C263D; --sunken: #111829; --line: #29344F; --line-soft: #212B42;
  --text: #E7ECF5; --muted: #93A0BA; --faint: #6B7893;
  --accent: #F2B33D; --accent-ink: #1A1404; --accent-soft: rgba(242, 179, 61, .14);
  --up: #2DBFB0; --up-soft: rgba(45, 191, 176, .14);
  --down: #F77B52; --down-soft: rgba(247, 123, 82, .15);
  --info: #6CA8FF; --info-soft: rgba(108, 168, 255, .14);
  --warn: #E9B44C;
  --focus: #F2B33D;
  --radius-panel: 14px; --radius-card: 10px; --radius-ctl: 8px;
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-cond: "IBM Plex Sans Condensed", "IBM Plex Sans", system-ui, sans-serif;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #EEF1F6; --surface: #FFFFFF; --raised: #F6F8FB; --sunken: #F1F4F8; --line: #D9DFEA; --line-soft: #E7EBF2;
  --text: #142033; --muted: #56647E; --faint: #7D8AA3;
  --accent: #9A5F00; --accent-ink: #FFFFFF; --accent-soft: rgba(154, 95, 0, .10);
  --up: #0B8F80; --up-soft: rgba(11, 143, 128, .10);
  --down: #D2452F; --down-soft: rgba(210, 69, 47, .10);
  --info: #2F6FD6; --info-soft: rgba(47, 111, 214, .10);
  --warn: #9A6A00;
  --focus: #2F6FD6;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 var(--font); font-variant-numeric: tabular-nums; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------------------------------------------------------------- app bar + market tape */
.appbar { display: flex; align-items: center; gap: 20px; padding: 12px 24px; border-bottom: 1px solid var(--line-soft); background: var(--surface); position: sticky; top: 0; z-index: 20; }
.brand { font: 600 17px/1 var(--font-cond); letter-spacing: .01em; text-decoration: none; display: flex; align-items: center; gap: 8px; }
.brand-mark { width: 18px; height: 18px; border-radius: 5px; background: var(--accent); position: relative; }
.brand-mark::after { content: ""; position: absolute; inset: 5px 4px; border-top: 2px solid var(--accent-ink); border-bottom: 2px solid var(--accent-ink); }
.pages { display: flex; gap: 2px; }
.pages a { padding: 7px 12px; border-radius: var(--radius-ctl); color: var(--muted); text-decoration: none; font-weight: 500; }
.pages a:hover { color: var(--text); background: var(--raised); }
.pages a[aria-current="page"] { color: var(--text); background: var(--raised); box-shadow: inset 0 -2px 0 var(--accent); }
.appbar-end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.icon-btn { background: none; border: 1px solid var(--line); color: var(--muted); border-radius: var(--radius-ctl); height: 32px; min-width: 32px; padding: 0 8px; cursor: pointer; font: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.icon-btn:hover { color: var(--text); border-color: var(--faint); }

.tape { display: flex; overflow-x: auto; border-bottom: 1px solid var(--line-soft); background: var(--sunken); scrollbar-width: none; }
.tape::-webkit-scrollbar { display: none; }
.tape-cell { flex: none; padding: 10px 24px 9px; border-right: 1px solid var(--line-soft); white-space: nowrap; }
.tape-cell:last-child { border-right: 0; margin-left: auto; }
.tape-label { display: block; font-size: 12px; color: var(--muted); }
.tape-value { font: 600 22px/1.15 var(--font-cond); letter-spacing: -.01em; }
.tape-sub { font: 500 14px var(--font-cond); margin-left: 6px; }

/* ---------------------------------------------------------------- status + text helpers */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--raised); color: var(--muted); white-space: nowrap; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.live { color: var(--up); background: var(--up-soft); }
.pill.live::before { animation: pulse 2s ease-in-out infinite; }
.pill.demo { color: var(--info); background: var(--info-soft); }
.pill.warn { color: var(--warn); background: var(--accent-soft); }
.pill.bad { color: var(--down); background: var(--down-soft); }
@keyframes pulse { 50% { opacity: .35; } }
.up { color: var(--up); } .down { color: var(--down); } .muted { color: var(--muted); }
.ce { color: var(--up); } .pe { color: var(--down); }
.note { color: var(--muted); font-size: 12px; }

.banner { margin: 16px 24px 0; padding: 12px 16px; border-radius: var(--radius-card); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); display: flex; gap: 16px; align-items: center; justify-content: space-between; }
.button { display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: var(--accent-ink); padding: 7px 14px; border-radius: var(--radius-ctl); text-decoration: none; font-weight: 600; white-space: nowrap; border: 0; cursor: pointer; font-family: inherit; font-size: 14px; }
.button:hover { filter: brightness(1.08); }
.button.ghost { background: none; color: var(--text); border: 1px solid var(--line); }

/* ---------------------------------------------------------------- page + panels */
.page { padding: 20px 24px 8px; display: grid; gap: 20px; max-width: 1480px; }
.page > * { min-width: 0; } /* let wide tables scroll inside their panel instead of widening the page */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.page-head h1 { margin: 0; font: 600 26px/1.15 var(--font-cond); letter-spacing: -.01em; }
.page-head p { margin: 4px 0 0; color: var(--muted); max-width: 64ch; }
.panel { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-panel); overflow: hidden; }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 16px 18px 12px; }
.panel-head h2 { margin: 0; font-size: 16px; font-weight: 600; display: flex; align-items: baseline; gap: 10px; }
.panel-head h2 small { font-weight: 400; color: var(--muted); font-size: 13px; }
.panel-body { padding: 0 18px 18px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.chip b { color: var(--text); font-weight: 600; }

/* segmented control (rank by, strategy tabs) */
.segmented { max-width: 100%; overflow-x: auto; scrollbar-width: none; display: inline-flex; padding: 3px; gap: 2px; background: var(--sunken); border: 1px solid var(--line-soft); border-radius: 10px; }
.segmented button { border: 0; background: none; color: var(--muted); padding: 7px 14px; border-radius: 7px; font: 500 14px var(--font); cursor: pointer; white-space: nowrap; }
.segmented button:hover { color: var(--text); }
.segmented button[aria-pressed="true"], .segmented button[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 0 var(--line), inset 0 -2px 0 var(--accent); }
.segmented-label { align-self: center; padding: 0 6px 0 8px; color: var(--muted); font-size: 12px; }

/* ---------------------------------------------------------------- table toolbar */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 18px 12px; }
.search { position: relative; }
.search input { width: 200px; height: 32px; padding: 0 30px 0 30px; background: var(--sunken); border: 1px solid var(--line); border-radius: var(--radius-ctl); color: var(--text); font: inherit; }
.search input::placeholder { color: var(--faint); }
.search::before { content: ""; position: absolute; left: 10px; top: 10px; width: 9px; height: 9px; border: 1.5px solid var(--faint); border-radius: 50%; }
.search::after { content: ""; position: absolute; left: 19px; top: 19px; width: 5px; height: 1.5px; background: var(--faint); transform: rotate(45deg); }
.search kbd { position: absolute; right: 7px; top: 7px; font: 11px var(--font); color: var(--faint); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; }
.toolbar select, .signal-tools select { height: 32px; background: var(--sunken); border: 1px solid var(--line); border-radius: var(--radius-ctl); color: var(--text); font: inherit; padding: 0 8px; }
.toggle-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius-ctl); color: var(--muted); cursor: pointer; user-select: none; }
.toggle-chip input { accent-color: var(--accent); margin: 0; }
.toggle-chip:has(input:checked) { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }
.toolbar .spacer { flex: 1; }
.toolbar .count { color: var(--muted); font-size: 12px; white-space: nowrap; }
.menu { position: relative; }
.menu summary { list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu-pop { position: absolute; right: 0; top: 38px; z-index: 30; background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 8px; min-width: 190px; box-shadow: 0 12px 32px rgba(0, 0, 0, .35); display: grid; gap: 2px; }
.menu-pop label { display: flex; gap: 8px; align-items: center; padding: 5px 6px; border-radius: 6px; cursor: pointer; }
.menu-pop label:hover { background: var(--sunken); }
.menu-pop input { accent-color: var(--accent); }

/* ---------------------------------------------------------------- tables */
.table-wrap { overflow: auto; max-height: 72vh; border-top: 1px solid var(--line-soft); }
table { width: 100%; border-collapse: separate; border-spacing: 0; }
.data { min-width: 980px; }
th { position: sticky; top: 0; z-index: 2; background: var(--surface); text-align: left; color: var(--muted); font-weight: 500; font-size: 12px; padding: 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
th > .th { display: flex; align-items: center; gap: 4px; padding: 10px 10px; width: 100%; background: none; border: 0; color: inherit; font: inherit; text-align: inherit; }
th.num > .th { justify-content: flex-end; }
th > button.th { cursor: pointer; }
th > button.th:hover { color: var(--text); }
th[aria-sort] > .th { color: var(--text); }
th[aria-sort="ascending"] > .th::after { content: "▲"; font-size: 9px; color: var(--accent); }
th[aria-sort="descending"] > .th::after { content: "▼"; font-size: 9px; color: var(--accent); }
td { padding: 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
tbody tr:hover td { background: color-mix(in srgb, var(--raised) 60%, transparent); }
tr:last-child td { border-bottom: 0; }
.dense td { padding: 5px 10px; }
.dense td small { display: none; }
.num { text-align: right; }
.rank { color: var(--faint); width: 34px; }
.contract b { font-weight: 600; }
.contract small, td small.sub { display: block; color: var(--muted); font-size: 12px; }
.empty td { color: var(--muted); text-align: center; padding: 28px; }
td.flash { animation: flash .6s ease-out; }
@keyframes flash { from { box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--accent) 70%, transparent); } to { box-shadow: inset 0 -2px 0 transparent; } }
.star { background: none; border: 0; color: var(--faint); cursor: pointer; padding: 0 6px 0 0; font-size: 14px; line-height: 1; }
.star[aria-pressed="true"] { color: var(--accent); }
.star:hover { color: var(--accent); }
tr.group { cursor: pointer; }
tr.child td { background: var(--sunken); }
tr.child td.contract { padding-left: 34px; }
.more { margin-left: 8px; background: var(--info-soft); color: var(--info); border: 0; border-radius: 999px; padding: 1px 9px; font: 600 11px var(--font); cursor: pointer; }
td.warn { color: var(--warn); }
.tag { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.tag.long_buildup { background: var(--up-soft); color: var(--up); }
.tag.short_covering { background: var(--up-soft); color: var(--up); opacity: .8; }
.tag.short_buildup { background: var(--down-soft); color: var(--down); }
.tag.long_unwinding { background: var(--down-soft); color: var(--down); opacity: .8; }
.view-more { display: block; width: calc(100% - 36px); margin: 12px 18px 16px; padding: 9px; background: none; border: 1px dashed var(--line); border-radius: var(--radius-card); color: var(--text); font: 500 14px var(--font); cursor: pointer; }
.view-more:hover { border-color: var(--accent); background: var(--accent-soft); }

footer.legend { color: var(--muted); font-size: 12px; padding: 4px 24px 32px; max-width: 1480px; display: grid; gap: 6px; }
footer.legend p { margin: 0; }

@media (max-width: 720px) {
  .appbar { padding: 10px 12px; gap: 8px; }
  .brand-name { display: none; }
  .appbar { flex-wrap: wrap; row-gap: 6px; }
  /* all six pages fit on a phone: no hidden sideways scroll */
  .pages { order: 3; flex: 1 0 100%; display: grid; grid-template-columns: repeat(7, auto); justify-content: space-between; }
  .pages a { padding: 7px 3px; white-space: nowrap; font-size: 13.5px; text-align: center; }
  .tape-cell { padding: 8px 14px; }
  .tape-value { font-size: 18px; }
  .page { padding: 16px 12px; }
  .search input { width: 150px; }
  .banner { margin: 12px 12px 0; }
  footer.legend { padding: 4px 12px 24px; }
}

/* ⓘ explanations */
.info { display: inline-grid; place-items: center; width: 15px; height: 15px; margin: 0 0 0 5px; padding: 0; border-radius: 50%;
  border: 1px solid var(--faint); background: transparent; color: var(--muted); font: italic 600 10px/1 Georgia, serif;
  vertical-align: 1px; cursor: help; flex: none; }
.info:hover, .info[aria-expanded="true"], .info:focus-visible { color: var(--text); border-color: var(--accent); outline: none; }
.info-pop { position: fixed; z-index: 60; width: min(340px, calc(100vw - 16px)); padding: 12px 14px; border-radius: 10px;
  background: var(--raised); border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(0, 0, 0, .35); font-size: 13px; line-height: 1.5; }
.info-pop h4 { margin: 0 0 6px; font: 600 15px var(--font-cond); }
.info-pop p { margin: 0 0 6px; color: var(--muted); } .info-pop p:last-child { margin: 0; }
.info-pop b { color: var(--text); font-weight: 600; }

/* installed on a phone: keep the app bar clear of the notch and home indicator */
@supports (padding: env(safe-area-inset-top)) {
  .appbar { padding-top: max(12px, env(safe-area-inset-top)); padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
  footer.legend { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  @media (max-width: 720px) { .appbar { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); } }
}

/* Sections menu */
.sec-short { display: none; }
.user-hidden { display: none !important; }
.cols.one, .hero.one { grid-template-columns: 1fr !important; }
.sections-pop { position: fixed; z-index: 40; width: min(320px, calc(100vw - 16px)); max-height: min(70vh, 520px); overflow: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-ctl); box-shadow: 0 8px 28px rgb(0 0 0 / 0.35); padding: 10px 0; }
.sections-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 14px 8px; border-bottom: 1px solid var(--line-soft); }
.sections-head button { background: none; border: 0; color: var(--accent, var(--text)); cursor: pointer; font: inherit; font-size: 12px; padding: 2px 4px; }
.sections-list label { display: flex; gap: 8px; align-items: center; padding: 7px 14px; cursor: pointer; font-size: 14px; }
.sections-list label:hover { background: var(--line-soft); }
.sections-group { padding: 10px 14px 2px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
@media (max-width: 380px) { .pages a { padding: 7px 2px; font-size: 12.5px; } }
@media (max-width: 720px) { .sec-long { display: none; } .sec-short { display: inline; } }

/* stock picker suggestions */
.sym-pop { position: fixed; z-index: 60; margin: 0; padding: 4px 0; list-style: none; max-height: 320px; overflow: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-ctl); box-shadow: 0 8px 28px rgb(0 0 0 / 0.35); }
.sym-pop li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline; padding: 8px 12px; cursor: pointer; font-size: 14px; }
.sym-pop li span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sym-pop li small { color: var(--faint); font-size: 11px; }
.sym-pop li[aria-selected="true"], .sym-pop li:hover { background: var(--accent-soft); }

/* collapsible panels (separate from the Sections menu) */
.fold-btn { flex: none; width: 22px; height: 22px; margin: 0 2px 0 -4px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted);
  cursor: pointer; align-self: center; display: inline-grid; place-items: center; }
.fold-btn::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px); transition: transform .15s; }
.fold-btn:hover { background: var(--raised); color: var(--text); }
.panel.collapsed .fold-btn::before { transform: rotate(-45deg); }
.panel-head h2:has(.fold-btn) { cursor: pointer; }
.panel.collapsed > :not(.panel-head) { display: none !important; }
.panel.collapsed { align-self: start; }
.fold-row > * { grid-column: 1 / -1; }
.panel.collapsed > .panel-head { padding-bottom: 16px; }
.panel.collapsed > .panel-head > :not(h2) { display: none; }
.pill.stale::before { animation: pulse 2s ease-in-out infinite; }
.pill[hidden] { display: none; }
a.icon-btn { text-decoration: none; display: inline-flex; align-items: center; }
/* rows of panels side by side: one panel left (others hidden) takes the row; none left hides the row; a folded
   panel makes the row stack (the new app uses these; the classic pages set the same with classes) */
.cols:has(> .user-hidden), .hero:has(> .user-hidden) { grid-template-columns: 1fr !important; }
.cols:not(:has(> :not(.user-hidden))), .hero:not(:has(> :not(.user-hidden))) { display: none; }
.cols:has(> .panel.collapsed) > *, .two:has(> .panel.collapsed) > * { grid-column: 1 / -1; }

/* Sections menu: move up / down */
.sections-row { display: flex; align-items: center; }
.sections-row label { flex: 1; min-width: 0; }
.sections-move { display: flex; gap: 2px; padding-right: 10px; }
.sections-move button { width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 6px; background: none; color: var(--muted); cursor: pointer; font-size: 13px; }
.sections-move button:hover:not(:disabled) { color: var(--text); border-color: var(--accent); }
.sections-move button:disabled { opacity: .3; cursor: default; }

/* ---------------------------------------------------------------- the new app (#app) */
/* the market strip stays in view under the app bar while the page scrolls (not on phones: the space is the page's) */
@media (min-width: 641px) { #app .tape { position: sticky; top: var(--appbar-h, 57px); z-index: 19; } }

/* loading placeholders: the shape of what's coming instead of a line of text */
.skeleton { display: grid; gap: 10px; padding: 18px; }
.skeleton i { display: block; height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--sunken) 25%, var(--raised) 50%, var(--sunken) 75%);
  background-size: 400% 100%; animation: shimmer 1.4s ease-in-out infinite; }
.skeleton i.big { height: 26px; width: 40%; } .skeleton i.mid { width: 70%; } .skeleton i.short { width: 45%; }
.skeleton .note { margin: 4px 0 0; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* keyboard shortcuts (press ?) */
.kbd-help { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgb(0 0 0 / .45); }
.kbd-help > div { width: min(420px, calc(100vw - 24px)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 18px 20px; box-shadow: 0 16px 40px rgb(0 0 0 / .4); }
.kbd-help h3 { margin: 0 0 10px; font: 600 17px var(--font-cond); }
.kbd-help dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: 14px; }
.kbd-help dt { text-align: right; } .kbd-help dd { margin: 0; color: var(--muted); }
.kbd-help kbd, .kbd-hint kbd { font: 12px var(--font); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; background: var(--sunken); color: var(--text); }

/* ---------------------------------------------------------------- phones */
@media (max-width: 640px) {
  /* the page menu becomes a tab bar along the bottom, in thumb reach; the top bar keeps one row */
  #app .appbar { flex-wrap: nowrap; }
  #app .appbar .pages { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0;
    background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--line); padding: 2px 2px max(4px, env(safe-area-inset-bottom)); }
  #app .pages a { padding: 10px 0 9px; font-size: 11px; font-weight: 600; letter-spacing: -.01em; text-align: center; border-radius: 8px; box-shadow: none; background: none; }
  #app .pages a[aria-current="page"] { color: var(--accent); box-shadow: inset 0 2px 0 var(--accent); border-radius: 0; }
  #app main.page { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  #app .classic-btn { display: none; }
  #app .panel-body { overflow-x: auto; }  /* the odd wide table inside a panel scrolls instead of being cut off */
  #app .appbar-end { gap: 6px; }
  #app .page-head h1 { font-size: 22px; }
  #app .page-head p { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  /* wide tables: one card per row, every value labelled with its column (web/src/lib/cards.js) */
  #app .table-wrap { max-height: none; overflow: visible; }
  #app table.data:not(.compact-table) { min-width: 0 !important; }
  #app table.data:not(.compact-table) > thead { display: none; }
  #app table.data:not(.compact-table) > tbody > tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3px 16px;
    padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
  #app table.data:not(.compact-table) > tbody > tr > td { display: block; padding: 2px 0; border: 0; text-align: right; min-width: 0; white-space: normal; font-size: 13.5px; }
  #app table.data:not(.compact-table) > tbody > tr > td[data-label]::before { content: attr(data-label); float: left; margin-right: 8px; color: var(--muted); font-size: 11.5px; font-weight: 500; line-height: 1.7; }
  #app table.data:not(.compact-table) > tbody > tr > td:empty { display: none; }
  /* the name, and the long notes, take the card's full width */
  #app table.data:not(.compact-table) > tbody > tr > td:is(.contract, .flagcell, .warncell, .lotcell, [data-col="symbol"], [data-col="contract"], [data-col="stock"], [data-col="why"], [data-col="name"]) {
    grid-column: 1 / -1; text-align: left; font-size: 15px; order: -1; }
  #app table.data:not(.compact-table) > tbody > tr > td:is(.flagcell, .warncell, .lotcell, [data-col="why"]) { order: 0; font-size: 13px; }
  #app table.data:not(.compact-table) > tbody > tr > td:is(.contract, [data-col="symbol"], [data-col="contract"], [data-col="stock"], [data-col="name"])::before { display: none; }
  #app table.data:not(.compact-table) > tbody > tr { position: relative; }
  #app table.data:not(.compact-table) > tbody > tr > td[data-col="rank"] { position: absolute; top: 12px; right: 14px; padding: 0; color: var(--muted); font-size: 11px; }
  #app table.data:not(.compact-table) > tbody > tr > td[data-col="rank"]:not(:empty)::before { content: "#"; float: none; margin: 0; font-size: 11px; line-height: inherit; }
  #app table.data:not(.compact-table) > tbody > tr > td small.sub { display: block; }
  #app table.data:not(.compact-table) > tbody > tr:is(.detail-row, .empty) { display: block; padding: 0; }
  #app table.data:not(.compact-table) > tbody > tr:is(.detail-row, .empty) > td { text-align: left; padding: 12px 14px; }
  #app table.data:not(.compact-table) > tbody > tr.detail-row .detail { width: auto !important; position: static; }
  #app table.data.dense:not(.compact-table) > tbody > tr { padding: 8px 12px; }
  #app tbody tr:hover td { background: none; }
  #app .toolbar { padding: 0 12px 10px; }
  #app .search input { width: 100%; }
  #app .search { flex: 1 1 100%; }
  #app .toolbar button[title^="Download"], #app .toolbar button[title="Compact rows"] { display: none; }
}