:root {
  color-scheme: light;
  --bg: #F5F2EB;
  --text: #2C2A26;
  --positive: #5A7D5A;
  --negative: #A65D57;
  --accent: #8C7B6B;
  --rule: #E0DCD5;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

/* text-size-adjust: 100% stops iOS Safari inflating the 14px/16px text when a phone turns to landscape. */
html {
  overflow-x: clip;
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

a { color: inherit; -webkit-tap-highlight-color: rgba(140, 123, 107, 0.18); }
:where(a, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.dash-header,
.dash-main,
.dash-footer {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}
.dash-main { flex: 1 0 auto; }

/* Header: logo left, plain-text view links after it */
.dash-header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
}
.dash-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}
.dash-logo svg { display: block; width: 20px; height: 20px; }
.dash-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  font-size: 14px;
}

.dash-nav a,
.dash-toggle a,
.dash-pager a,
.dash-status a {
  color: var(--accent);
  text-decoration: none;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.dash-nav a:hover,
.dash-toggle a:hover,
.dash-pager a:hover,
.dash-status a:hover,
.dash-nav a:focus-visible,
.dash-toggle a:focus-visible,
.dash-pager a:focus-visible,
.dash-status a:focus-visible { text-decoration: underline; }
.dash-nav a.active,
.dash-toggle a.active {
  color: var(--text);
  text-decoration: underline;
}

/* Movers controls: Gainers | Losers left, 1Q 2Q 3Q 4Q right */
.dash-controls {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 16px;
  font-size: 14px;
}
.dash-toggle { display: flex; align-items: center; gap: 16px; }
.dash-side { gap: 8px; }
.dash-sep { color: var(--accent); }
.dash-horizon { margin-left: auto; }

/* List: an ARIA table of divs. On desktop it is a grid whose header, row group and rows are column subgrids, so
   labels sit over their values and the name column takes the slack exactly as a table's auto layout would.
   Every cell names its own column, so the DOM order (cells grouped into three lines for phones) is irrelevant
   here. Only horizontal 1px rules; no vertical lines, no header background, no bold header text. */
.dash-table {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto auto auto auto;
  column-gap: 24px;
  width: 100%;
}
.dash-rows {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}
.dash-rows:focus { outline: none; }
.dash-head,
.dash-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: baseline;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
}
.dash-line { display: contents; }
/* grid-row: 1 keeps every cell on its row's single line: with explicit columns alone, auto-placement would start a
   new row for a cell whose column lies before the placement cursor (the direction glyph after the ticker). */
.dash-cell {
  grid-row: 1;
  text-align: left;
  font-weight: 400;
  white-space: nowrap;
}
.dash-direction { grid-column: 1; }
.dash-ticker { grid-column: 2; }
.dash-name { grid-column: 3; }
.dash-metric { grid-column: 4; }
.dash-price { grid-column: 5; }
.dash-day { grid-column: 6; }
.dash-ytd { grid-column: 7; }
.dash-sector { grid-column: 8; }
/* Without subgrid support every row sizes its own columns, so fall back to fixed tracks that stay aligned. */
@supports not (grid-template-columns: subgrid) {
  .dash-table,
  .dash-rows { display: block; }
  .dash-head,
  .dash-row {
    grid-template-columns: 14px 62px minmax(0, 1fr) 96px 62px 40px 48px 40px;
    column-gap: 16px;
  }
}
.dash-head .dash-cell { font-size: 14px; color: var(--accent); }
/* The phone sort row's "Sort" caption; desktop has column headers instead. */
.dash-sort-caption { display: none; }
.dash-sort {
  color: var(--accent);
  text-decoration: none;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.dash-sort:hover,
.dash-sort:focus-visible { text-decoration: underline; }
.dash-sort.active {
  color: var(--text);
  text-decoration: underline;
}
/* The arrow is text that hangs into the 24px gutter after the label: a zero-width inline-block keeps it out of
   the column's measured width (so the widest label, "Weight Change", still leaves the name column room) and out
   of the underline run. */
.dash-sort-glyph {
  display: inline-block;
  width: 0;
  overflow: visible;
  white-space: pre;
  font-size: 14px;
}
.dash-row a { color: inherit; text-decoration: none; }
.dash-row a:hover,
.dash-row a:focus-visible { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.dash-direction { font-size: 14px; text-align: center; }
.dash-direction.up { color: var(--positive); }
.dash-direction.down { color: var(--negative); }
.dash-direction.flat { color: var(--accent); }

.dash-row .dash-ticker {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}
.dash-row .dash-ticker.dash-missing { color: var(--accent); font-weight: 400; }
/* The name column is the flexible track: the cell ellipsises instead of widening it. */
.dash-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-row .dash-name { font-size: 16px; }
.dash-metric,
.dash-price,
.dash-day,
.dash-ytd {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.dash-row .dash-metric { font-size: 16px; font-weight: 700; }
.dash-row .dash-price,
.dash-row .dash-day,
.dash-row .dash-ytd { font-size: 14px; }
.dash-row .dash-price { color: var(--accent); }
.dash-row .dash-day.positive, .dash-row .dash-ytd.positive { color: var(--positive); }
.dash-row .dash-day.negative, .dash-row .dash-ytd.negative { color: var(--negative); }
.dash-row .dash-day.neutral, .dash-row .dash-ytd.neutral { color: var(--accent); }
.dash-row .dash-sector {
  font-size: 14px;
  color: var(--accent);
  overflow: hidden;
}

/* Status line and pager */
.dash-status {
  margin: 0;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--accent);
}
.dash-status.error { color: var(--text); }
.dash-pager {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 16px;
  font-size: 14px;
}
.dash-pager a.disabled {
  opacity: 0.45;
  pointer-events: none;
  cursor: default;
}

.dash-footer {
  flex: 0 0 auto;
  padding: 24px 16px;
  color: var(--accent);
  font-size: 14px;
}
.dash-footer a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.dash-footer a:hover,
.dash-footer a:focus-visible { text-decoration: underline; }

/* About: plain running text in the same column and the same two sizes (16px body, 16px bold heading);
   no rules, cards or boxes. */
.dash-about {
  padding: 12px 16px 24px;
  font-size: 16px;
}
.dash-about h2 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
}
.dash-about p { margin: 0 0 12px; }
.dash-about p:last-child { margin-bottom: 0; }

/* Phones (under 640px): a native-feeling list, not the desktop table squeezed. A sticky header (logo line, then
   a sideways-scrolling tab row), one 44px row each for the Movers toggles and the sort links (also scrolling
   sideways instead of wrapping), and three-line rows. Every control is a 44px-tall hit box; scrollbars are hidden
   on the two scrolling rows. */
@media (max-width: 639.98px) {
  .dash-header {
    position: sticky;
    top: 0;
    z-index: 1;
    display: block;
    padding: 0;
    background: var(--bg);
  }
  .dash-logo {
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 16px;
  }
  .dash-nav {
    flex-wrap: nowrap;
    gap: 16px;
    padding: 0 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .dash-nav::-webkit-scrollbar { display: none; }
  .dash-nav a {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    height: 44px;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
  }
  .dash-nav a:hover,
  .dash-nav a:focus-visible,
  .dash-nav a.active { text-decoration: none; }
  .dash-nav a.active { border-bottom-color: var(--text); }

  /* Movers controls: Gainers | Losers left, 1Q 2Q 3Q 4Q right, one 44px row over a rule. The timeframe links are
     44x44 boxes with the label centred; the nav's negative margin keeps "4Q" near the 16px column edge. */
  .dash-controls {
    box-sizing: content-box;
    justify-content: space-between;
    gap: 16px;
    height: 44px;
    padding: 0 16px;
    border-bottom: 1px solid var(--rule);
  }
  .dash-side a {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 4px;
    margin: 0 -4px;
  }
  .dash-horizon { margin: 0 -12px 0 0; gap: 0; }
  .dash-horizon a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
  }

  /* Sort row: the "Sort" caption then the seven sort links on one 44px line that scrolls sideways (renderHead()
     scrolls the active link into view). The header cells are direct flex children in row-cell order, no line
     wrappers; the caption is a desktop-hidden span, not a cell. */
  .dash-table,
  .dash-rows { display: block; }
  .dash-head {
    box-sizing: content-box;
    display: flex;
    align-items: center;
    gap: 20px;
    height: 44px;
    padding: 0 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .dash-head::-webkit-scrollbar { display: none; }
  .dash-head .dash-cell {
    flex: 0 0 auto;
    min-width: 0;
    overflow: visible;
    text-align: left;
  }
  .dash-head .dash-sort-caption {
    display: block;
    flex: 0 0 auto;
    font-size: 14px;
    color: var(--text);
  }
  /* The direction header has no label; pulling the empty cell back by one gap keeps a single 20px gap between
     Ticker and the metric link while the cell stays in the accessibility tree. */
  .dash-head .dash-direction { margin-left: -20px; }
  .dash-head .dash-sort {
    display: inline-flex;
    align-items: center;
    height: 44px;
  }
  .dash-sort-glyph { width: auto; }

  /* Rows: three flex lines. 1: ticker, direction glyph, metric. 2: name, sector. 3: price, day, YTD with taupe
     labels. The ticker and name links stay 44px-tall hit boxes: the cell and its link both carry the vertical
     padding and pull it back with a negative margin, so the cell is as tall as the link. The cells do not clip
     (that cut the focus ring); the link ellipsises itself. */
  .dash-row {
    display: block;
    padding: 14px 16px;
  }
  .dash-line { display: flex; align-items: baseline; }
  .dash-line-1 { gap: 8px; line-height: 22px; }
  .dash-line-2 { gap: 16px; margin-top: 2px; line-height: 20px; }
  .dash-line-3 { flex-wrap: wrap; gap: 0 16px; margin-top: 6px; line-height: 20px; }
  .dash-row .dash-cell { flex: 0 0 auto; min-width: 0; }
  .dash-row .dash-ticker {
    flex: 1 1 auto;
    overflow: visible;
    padding: 11px 0;
    margin: -11px 0;
    font-size: 16px;
    color: var(--text);
  }
  .dash-row .dash-ticker.dash-missing { color: var(--accent); }
  .dash-row .dash-direction { text-align: left; }
  /* An em dash next to the metric reads as a minus sign on a phone: the unchanged glyph keeps its cell (and the
     "Unchanged" label) but is not painted. */
  .dash-row .dash-direction.flat { color: transparent; }
  .dash-row .dash-metric { text-align: right; }
  .dash-row .dash-name {
    flex: 1 1 auto;
    overflow: visible;
    padding: 12px 0;
    margin: -12px 0;
    font-size: 14px;
    color: var(--accent);
  }
  /* A name without a link (unmapped rows) has nothing else to ellipsise it. */
  .dash-row .dash-name:not(:has(> a)) { overflow: hidden; text-overflow: ellipsis; }
  .dash-row .dash-sector { overflow: visible; text-align: right; }
  .dash-row .dash-price { color: var(--text); }
  /* Unpriced rows show three dashes in one colour (day/YTD dashes are .neutral, already taupe). */
  .dash-row .dash-price.unpriced { color: var(--accent); }
  .dash-row .dash-price,
  .dash-row .dash-day,
  .dash-row .dash-ytd { text-align: left; }
  .dash-row .dash-day:not(.unpriced)::after { content: " today"; color: var(--accent); }
  .dash-row .dash-ytd:not(.unpriced)::after { content: " YTD"; color: var(--accent); }
  .dash-row .dash-ticker a,
  .dash-row .dash-name a {
    display: inline-block;
    max-width: calc(100% + 8px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: top;
    padding: 11px 4px;
    margin: -11px -4px;
  }
  .dash-row .dash-name a { padding: 12px 4px; margin: -12px -4px; }

  /* Pager: Previous left, Next right, 44px targets. The status line's retry link grows the same way. */
  .dash-pager { gap: 16px; padding: 0 16px; }
  .dash-pager a {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 4px;
    margin: 0 -4px;
  }
  .dash-status a {
    display: inline-block;
    line-height: 20px;
    padding: 12px 4px;
    margin: -12px -4px;
  }

  .dash-about { line-height: 1.5; }
}

/* Touch screens wider than a phone (landscape phones, tablets): the same 44px hit boxes, grown outward with a
   negative vertical margin so the desktop layout does not move. Mouse-driven desktops are unaffected. */
@media (min-width: 640px) and (pointer: coarse) {
  .dash-nav a,
  .dash-toggle a,
  .dash-pager a,
  .dash-status a,
  .dash-head .dash-sort {
    display: inline-block;
    line-height: 20px;
    padding: 12px 4px;
    margin: -12px -4px;
  }
  .dash-row a { display: inline-block; padding: 14px 4px; margin: -14px -4px; max-width: 100%; vertical-align: top; }
  .dash-row .dash-name a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dash-logo { padding: 11px 4px; margin: -11px -4px; }
}

.dash-build { font-size: 14px; color: var(--accent); }