/* eduinvesting terminal — design tokens & shared styles
   Aesthetic: an Indian market publication, not a code editor. Ink-dark,
   amber ticker accent, a serif masthead, and figures set in tabular sans
   so columns line up without monospace.

   Fonts are loaded by a <link> in each page's head, not by @import here.
   An @import inside a stylesheet cannot start downloading until this file
   has itself been fetched and parsed, so it serialises HTML -> css -> font
   css -> font, and the masthead lands last. */

/* Two palettes, one set of names. Every rule below reads tokens only —
   a hardcoded hex is a bug, because it survives the theme switch.
   The light theme is selected by html[data-theme="light"], which the
   pre-paint script in each page stamps before the first frame. The
   element+attribute selector outranks any bare :root, so palette blocks
   can sit anywhere in the file. */
:root {
  --bg:     #0b0e14;
  --bg-rgb: 11, 14, 20;          /* for gradients that fade into the page */
  --panel:  #11161f;
  --line:   #3b4759;
  --text:   #e6ebf2;
  --dim:    #77828f;
  --faint:  #5c6672;             /* quieter than dim: labels at rest */
  --accent: #e8b34b;
  --on-accent: #0b0e14;          /* text printed on an accent fill */
  --up:     #2fbf71;
  --down:   #e4574f;
  --info:   #4f9cf9;
  --sme:      #7fb0d8;
  --sme-line: #7fb0d855;
  /* washes over the page ground: white on ink, ink on paper */
  --overlay:      rgba(255, 255, 255, .045);
  --overlay-soft: rgba(255, 255, 255, .025);
  --hairline:     rgba(255, 255, 255, .17);
  --overlay-line: rgba(255, 255, 255, .18);
  /* the quiet chip a run of text sits on, away from the cards */
  --pill:      rgba(17, 22, 31, .74);
  --pill-line: rgba(255, 255, 255, .07);

  /* Depth, in three parts. --edge is a one-pixel catch of light along the top
     of a raised thing, which is what actually sells height; --lift-1 and
     --lift-2 are the shadows it casts, one for controls and one for the big
     surfaces. --sink is the opposite, for anything typed into: a field should
     read as cut into the page, not sitting on it. On ink the light comes from
     white at low alpha and the shadow is near-black; on paper the shadow is
     warm rather than grey, because a neutral drop shadow on a cream ground
     looks like dirt. */
  --edge:   inset 0 1px 0 rgba(255, 255, 255, .10);
  --lift-1: 0 1px 2px rgba(0, 0, 0, .45);
  --lift-2: 0 2px 6px rgba(0, 0, 0, .45), 0 12px 30px rgba(0, 0, 0, .55);
  --lift-3: 0 6px 14px rgba(0, 0, 0, .50), 0 22px 48px rgba(0, 0, 0, .62);
  --sink:   inset 0 1px 2px rgba(0, 0, 0, .55);
  /* the sheen is what actually makes a dark surface look raised: light falls
     on the top of a thing that stands above the page, and no amount of black
     shadow can say that on a black ground */
  --sheen:  linear-gradient(180deg, rgba(255, 255, 255, .038), rgba(255, 255, 255, 0) 46%);
  /* Glass. A translucent surface is only glass if there is something behind
     it to bend -- on a flat ground backdrop-filter computes nothing and you
     have paid for a compositor layer to tint a rectangle. So the page carries
     a wash of colour (body::before) and these sit over it.
     saturate before blur is the part people miss: the blur alone gives you
     frosted grey, and it is the saturation lift that makes the colour behind
     bloom through the way real glass does. */
  --glass:      rgba(20, 26, 37, .58);
  --glass-edge: rgba(255, 255, 255, .26);
  --glass-fx:   saturate(180%) blur(22px);
  /* Three roles, two families. The serif is for the masthead and the few
     real headings -- it is what makes the page read as a financial
     publication rather than a tool, and it is kept out of tables where a
     serif slows scanning.
     --font-num is not a monospace, deliberately. Monospace was here to keep
     figures in a column, but tabular-nums does that on any decent sans (set
     once on body below), and mono on counts, pills, pagers and buttons is
     what made a stock terminal read like a code editor. */
  --font-head: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-ui:   'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-num:  'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* One shell width for the masthead, the page and the footer, so the three
     can never drift apart. 1200 was leaving a third of a 1920 display empty
     either side of a data terminal, which is the one kind of site that has
     something to put there. The gutter grows with the viewport instead of
     sitting at a fixed 24px, so a wide screen gets air rather than a hairline
     margin. */
  --wash: .85;
  --shell:  2040px;
  --gutter: clamp(16px, 2.2vw, 44px);
}

/* White and black, not paper. The ground is #fff and the type is #000, with
   every grey between them neutral -- the warm cream this used to be tinted
   the whole palette, and a page asked to be white should be white.

   Two consequences worth knowing. The panel is the same white as the page,
   so a card is separated by its border and its shadow alone, which is why
   --line and --glass-edge are real greys here rather than the near-invisible
   whites they are on ink. And the top-edge highlight is switched off: white
   light on a white surface says nothing, so the depth on this theme comes
   entirely from the shadow beneath.

   accent/up/down stay darkened. Amber #e8b34b is ~1.9:1 on white and cannot
   carry a label; every colour below was checked against #fff and clears 4.5. */
html[data-theme="light"] {
  --bg:     #ffffff;
  --bg-rgb: 255, 255, 255;
  --panel:  #ffffff;
  --line:   #000000;
  --text:   #000000;
  --dim:    #545454;
  --faint:  #6e6e6e;
  --accent: #8f6309;
  --on-accent: #ffffff;
  --up:     #14804a;
  --down:   #bf3b31;
  --info:   #1d6fd0;
  --sme:      #2b6ea6;
  --sme-line: #2b6ea655;
  --overlay:      rgba(0, 0, 0, .035);
  --overlay-soft: rgba(0, 0, 0, .02);
  --hairline:     rgba(0, 0, 0, .26);
  --overlay-line: rgba(0, 0, 0, .18);
  --pill:      rgba(255, 255, 255, .82);
  --pill-line: rgba(0, 0, 0, .07);
  /* no top highlight: see above. depth is the shadow only, and neutral now
     rather than the warm brown it was, which on white read as a smudge. */
  --edge:   inset 0 0 0 0 transparent;
  --lift-1: 0 1px 2px rgba(0, 0, 0, .07);
  --lift-2: 0 1px 3px rgba(0, 0, 0, .06), 0 10px 26px rgba(0, 0, 0, .08);
  --lift-3: 0 4px 10px rgba(0, 0, 0, .09), 0 18px 40px rgba(0, 0, 0, .13);
  --sink:   inset 0 1px 2px rgba(0, 0, 0, .09);
  --sheen:  none;
  --glass:      rgba(255, 255, 255, .70);
  --glass-edge: #000000;
  --glass-fx:   saturate(150%) blur(22px);
  /* Off entirely. Any wash at all tints the ground -- measured at 253,252,251
     warm in one corner and 249,251,254 cool in the other -- and a page asked
     to be white should read #ffffff everywhere. The glass above it still
     works: the sticky rail and the panels frost whatever scrolls under them,
     which on this theme is content rather than colour. */
  --wash: 0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { background: var(--bg); }
body {
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
  /* Every figure on this site sits in a column that has to line up, and
     almost none of it is flowing prose, so tabular figures are set once here
     rather than chased around thirty selectors. This is what replaces the
     monospace: alignment without the terminal. */
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }

.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.up   { color: var(--up); }
.down { color: var(--down); }
.dim  { color: var(--dim); }

/* ---- pills ----
   A pill earns its place on something you press or something the page is
   telling you; it does not earn its place around a run of text. Boxing the
   wordmark, the strapline and the tape gave the masthead three slabs of
   slightly different heights floating at slightly different baselines, which
   is what the whole header looked like once there was no video for them to
   sit on.

   So: controls keep a ground (the pager and the sort buttons are pressed),
   and notices keep one (the floor note, the search chip and the status
   message are the page talking back). Everything else is text on the page,
   set flat.

   Cards, the rail and the search fields already sit on an opaque panel and
   are left alone -- a pill on a panel is a second edge around something that
   has one. */
.pillbox,
.floor-note, .find-chip, .status,
.pg, .feed-sort .fin-btn {
  background: var(--pill);
}

.feed-sort .fin-btn        { border-radius: 999px; border: 1px solid var(--pill-line); }
.feed-sort .fin-btn.active { border-color: var(--accent); }

/* a notice takes a soft rectangle, not a 999px radius, which on a paragraph
   pinches the first and last lines */
.floor-note, .status, .find-chip { border-radius: 14px; }
.floor-note { padding: 10px 14px; }
/* empty ones fill in from the API; until then they are a floating smudge */
.feed-count:empty, .status:empty { display: none; }

/* ---- masthead ---- */
.masthead {
  border-bottom: 1px solid var(--line);
  padding: 0 var(--gutter);
}
.masthead-inner {
  max-width: var(--shell);
  margin: 0 auto;
  display: flex;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
  padding: 18px 0 14px;
}
.brand {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 27px;
  /* A serif at display size needs less tracking than a grotesque did, and
     Fraunces' optical axis already tightens the letterfit as it grows. */
  letter-spacing: -0.01em;
}
.brand em { color: var(--accent); font-style: normal; }
.brand-sub {
  color: var(--dim);
  font-size: 13.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.tape {
  margin-left: auto;
  display: flex;
  gap: 18px;
  font-family: var(--font-num);
  font-size: 13.5px;
  color: var(--dim);
}
.tape b { color: var(--text); font-weight: 500; }

/* ---- layout ---- */
.wrap { max-width: var(--shell); margin: 0 auto; padding: var(--gutter); }

/* ---- controls row ---- */
.controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 18px;
}
.search {
  position: relative;
}
.search input {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-num);
  /* Not 15px: Safari on iOS zooms the whole page when a focused input is
     under 16px, and the reader then has to pinch back out to see the feed
     they were searching. 16 is the floor for anything typed into. */
  font-size: 16px;
  padding: 10px 13px;
  border-radius: 8px;
  width: 220px;
  outline: none;
}
.search input:focus { border-color: var(--accent); }
/* Wider than the symbol box beside it: this one's placeholder has to say
   that it searches the feed rather than leaving for the stock page, and a
   truncated label is exactly the distinction it needs to make. */
.search-find input { width: 260px; }
.search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  max-height: 260px;
  overflow-y: auto;
  z-index: 20;
  display: none;
}
.search-results a {
  display: block;
  padding: 8px 12px;
  font-family: var(--font-num);
  font-size: 15px;
  border-bottom: 1px solid var(--line);
}
.search-results a:last-child { border-bottom: 0; }
.search-results a:hover, .search-results a.active { background: var(--line); }

/* Budget bounds. Sits with the preset chips but is deliberately shaped like
   a field rather than a chip: the chips are one-tap states, this one is
   typed into, and looking like what it is saves explaining it. */
/* The first version of this was painted in --faint with borderless inputs
   and no word for what it filtered: a dim, empty-looking pill sitting in a
   row of bright chips, which read as nothing being there at all. A control
   nobody can see is a control that does not exist, so it says "Price", and
   each bound is a field with its own edge that looks like it takes typing. */
.price-filter {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 8px 4px 15px;
  font-size: 13.5px;
}
.pf-label {
  color: var(--dim); font-weight: 600;
  letter-spacing: .02em; white-space: nowrap;
}
.pf-sep { color: var(--faint); }
.price-filter input {
  width: 76px;
  background: var(--overlay);
  border: 1px solid var(--line);
  border-radius: 999px;
  outline: none;
  color: var(--text);
  text-align: center;
  font-family: var(--font-num);
  /* 16px so iOS does not zoom the page when the field takes focus */
  font-size: 16px;
  padding: 5px 10px;
}
.price-filter input::placeholder { color: var(--dim); font-size: 14px; }
.price-filter input:focus { border-color: var(--accent); }
.price-filter:focus-within { border-color: var(--accent); }
/* the spinners crowd a 68px field and nobody nudges a share price by ±1 */
.price-filter input::-webkit-outer-spin-button,
.price-filter input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.price-filter input[type=number] { -moz-appearance: textfield; appearance: textfield; }

.chip {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--dim);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 15px;
  padding: 9px 14px;
  border-radius: 999px;
  cursor: pointer;
}
.chip:hover { color: var(--text); border-color: var(--dim); }
.chip.active {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 700;
}

/* ---- table ---- */
.tablewrap {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow-x: auto;
  background: var(--panel);
}
table { width: 100%; border-collapse: collapse; min-width: 900px; }
thead th {
  text-align: right;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
thead th:first-child { text-align: left; }
thead th.sorted { color: var(--accent); }
thead th .arrow { font-size: 11.5px; }
tbody td {
  padding: 10px 14px;
  text-align: right;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-num);
  font-size: 15px;
  white-space: nowrap;
}
tbody td:first-child { text-align: left; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { cursor: pointer; }
tbody tr:hover td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
td .sym { font-weight: 700; color: var(--text); }
td .name {
  display: block;
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--dim);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* RSI inline gauge */
.rsi-cell { display: inline-flex; align-items: center; gap: 8px; }
.rsi-bar {
  width: 46px; height: 5px; border-radius: 3px;
  background: var(--line); position: relative; overflow: hidden;
}
.rsi-bar i {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--accent); border-radius: 3px;
}

.status { color: var(--dim); padding: 40px; text-align: center; font-family: var(--font-num); }

/* ---- stock page ---- */
.stock-head {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.stock-ticker {
  font-size: 50px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
}
.stock-name { color: var(--dim); margin-top: 6px; }
.stock-price {
  font-family: var(--font-num);
  font-size: 41px;
  font-weight: 700;
  line-height: 1;
}
.stock-chg { font-family: var(--font-num); font-size: 18px; margin-top: 6px; }
.asof { margin-left: auto; color: var(--dim); font-size: 13.5px; text-align: right; }

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
}
.card-label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 12px;
}
.span12 { grid-column: span 12; }
.span6 { grid-column: span 6; }
.span4 { grid-column: span 4; }
.span3 { grid-column: span 3; }

.kv { list-style: none; }
.kv li {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px dashed var(--line);
  font-family: var(--font-num);
  font-size: 15px;
}
.kv li:last-child { border-bottom: 0; }
.kv li span { color: var(--dim); font-family: var(--font-ui); }

canvas.chart { width: 100%; height: 360px; display: block; }
canvas.volchart { width: 100%; height: 80px; display: block; margin-top: 4px; }

.range-line {
  display: flex; justify-content: space-between;
  font-family: var(--font-num); font-size: 13.5px; color: var(--dim);
  margin-bottom: 6px;
}
.range-track {
  position: relative; height: 6px; border-radius: 3px; background: var(--line);
}
.range-track i {
  position: absolute; top: -3px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--accent); margin-left: -6px;
}

.footer {
  max-width: var(--shell); margin: 0 auto; padding: 20px var(--gutter) 40px;
  color: var(--dim); font-size: 12.5px;
  border-top: 1px solid var(--line); margin-top: 30px;
}

.backlink { color: var(--dim); font-size: 15px; }
.backlink:hover { color: var(--accent); }

@media (max-width: 860px) {
  .span6, .span4, .span3 { grid-column: span 12; }
  .stock-ticker { font-size: 36px; }
  .stock-price { font-size: 32px; }
  .tape { display: none; }
}

/* ---- stock page tabs (v2) ---- */
.tabs {
  display: flex; gap: 4px; margin: 26px 0 14px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.tab {
  background: none; border: none; color: var(--dim);
  font-family: var(--font-ui); font-weight: 700; font-size: 15px;
  padding: 10px 16px; cursor: pointer; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.tabpane { min-height: 60px; }
.tabpane .tablewrap { background: var(--panel); }
.tabpane thead th { cursor: default; }

.annlist { display: flex; flex-direction: column; gap: 10px; }
.ann {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 14px 16px;
}
.ann-head { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.ann-subj { font-weight: 700; font-size: 15px; }
.ann-text { color: var(--dim); font-size: 15px; margin-top: 6px; }
.ann-link {
  display: inline-block; margin-top: 8px; color: var(--accent);
  font-family: var(--font-num); font-size: 13.5px;
}
.ann-link:hover { text-decoration: underline; }

/* ---- shareholding pie + drill-down (v3.8) ---- */
.sh-top {
  display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 20px; margin-bottom: 14px;
}
.sh-pie { width: 240px; height: 240px; display: block; }
.sh-pie-cap { text-align: center; color: var(--dim); font-size: 13.5px; margin-top: 8px; }
.sh-legend { list-style: none; flex: 1; min-width: 260px; }
.sh-legend > li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px dashed var(--line);
  font-size: 15px;
}
.sh-legend > li:last-child { border-bottom: 0; }
.sh-legend i { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.sh-legend span { flex: 1; }
.sh-legend b { font-family: var(--font-num); }
.sh-expand {
  background: none; border: 1px solid var(--line); color: var(--dim);
  border-radius: 6px; font-size: 12.5px; padding: 2px 8px; cursor: pointer;
}
.sh-expand:hover { color: var(--accent); border-color: var(--accent); }
.sh-holders { padding: 4px 0 8px 22px !important; }
.sh-holders-tbl { width: 100%; font-size: 13.5px; }
.sh-holders-tbl td { padding: 4px 8px; color: var(--dim); border-bottom: 1px dotted var(--line); }
.sh-holders-tbl td:last-child { text-align: right; color: var(--text); }
@media (max-width: 620px) { .sh-top { flex-direction: column; align-items: center; } }

/* v3.10: indented "of which" sub-rows */
.sh-legend .sh-sub { padding-left: 22px; font-size: 13.5px; color: var(--dim); border-bottom: 1px dotted var(--line); }
.sh-legend .sh-sub i { visibility: hidden; }
.sh-legend .sh-sub b { color: var(--text); }

/* v3.12: governance tab */
.gov-head { font-size: 15px; color: var(--dim); margin-bottom: 8px; }
.gov-head b { color: var(--text); }
.gov-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.gov-chip {
  font-size: 12.5px; padding: 3px 10px; border: 1px solid var(--line);
  border-radius: 999px; color: var(--dim); font-family: var(--font-num);
}
.gov-sec {
  font-size: 13.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); margin: 16px 0 6px;
}

/* v3.13: quarterly view toggle + full P&L */
.fin-controls { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.fin-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.fin-btn {
  background: none; border: 0; color: var(--dim); font-size: 13.5px;
  padding: 5px 14px; cursor: pointer; font-family: var(--font-ui);
}
.fin-btn + .fin-btn { border-left: 1px solid var(--line); }
.fin-btn.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.pl-hdr td {
  font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dim); padding-top: 12px !important; text-align: left !important;
}
.pl-total td { font-weight: 700; border-top: 1px solid var(--line); color: var(--text); }

/* v3.17: cash-flow detail rows */
.cf-exp td { padding-top: 2px !important; padding-bottom: 8px !important; border-bottom: 0 !important; }
.cf-detail td { font-size: 13.5px; color: var(--dim); }
.cf-detail td:first-child { padding-left: 22px; }
.cf-detail td .down { color: var(--down); }

/* ============ v3.18: financial statements makeover ============ */
.fin-controls { gap: 10px; margin: 2px 0 16px; }
.fin-toggle { border: 0; background: var(--overlay); border-radius: 999px; padding: 3px; gap: 2px; }
.fin-btn { border-radius: 999px; padding: 6px 16px; font-size: 14px; letter-spacing: .01em; transition: all .15s ease; }
.fin-btn + .fin-btn { border-left: 0; }
.fin-btn:hover { color: var(--text); }
.fin-btn.active { color: var(--on-accent); background: var(--accent); font-weight: 700; }

#finview .tablewrap, #pane .tablewrap {
  border: 1px solid var(--line); border-radius: 14px;
  overflow: auto; max-height: 72vh;
  background: linear-gradient(180deg, var(--overlay-soft), transparent 120px);
}
#finview table, #pane table { border-collapse: separate; border-spacing: 0; width: 100%; }
#finview thead th, #pane thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--panel); color: var(--dim);
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
}
#finview tbody td, #pane tbody td {
  padding: 9px 16px; border-bottom: 1px solid var(--hairline);
  font-variant-numeric: tabular-nums;
}
#finview tbody tr:last-child td, #pane tbody tr:last-child td { border-bottom: 0; }
#finview tbody tr:hover td { background: var(--overlay-soft); }
#finview td:first-child { max-width: 380px; }

.pl-hdr td {
  color: var(--accent) !important; opacity: .85;
  font-size: 12px !important; letter-spacing: .14em;
  padding: 16px 16px 6px !important; border-bottom: 0 !important;
}
.pl-total td {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 12%, transparent) !important;
}
.cf-exp td { background: transparent !important; }
.sh-expand {
  background: none; border: 1px dashed var(--overlay-line); border-radius: 8px;
  color: var(--dim); font-size: 12.5px; padding: 3px 10px; cursor: pointer;
  transition: all .15s ease;
}
.sh-expand:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.cf-detail td { font-size: 13.5px; color: var(--dim); padding-top: 6px; padding-bottom: 6px; }
.cf-detail td:first-child { padding-left: 34px; position: relative; }
.cf-detail td:first-child::before {
  content: ''; position: absolute; left: 20px; top: 0; bottom: 0;
  width: 1px; background: color-mix(in srgb, var(--accent) 25%, transparent);
}
.cf-detail:hover td { color: var(--text); }

/* v3.19: watchlist */
.star { background:none;border:0;color:var(--dim);cursor:pointer;font-size:16px;padding:0 6px 0 0; }
.star.on { color: var(--accent); }
.bell-item { padding:8px 4px;border-bottom:1px solid var(--hairline); }
.bell-item a { color:var(--accent);text-decoration:none; }

/* v3.31: single pledge chip under the shareholding donut */
.sh-pledge { margin-top: 10px; text-align: center; line-height: 1.9; }


/* =============================================================
   Desk commentary. Filed numbers are machine output: mono, cool.
   Our writing is a different material: serif, warm, quieter.
   Amber is spent once — on the quarter's lede.
   ============================================================= */
:root {
  --desk-ink:    #cfc7b8;         /* warm paper text, vs the cool data grey */
  --desk-dim:    #8b8578;
  --desk-rule:   #232a35;
  --desk-lede:   #ded7c9;         /* the quarter's lede, a shade brighter */
  --desk-strong: #ece5d7;         /* headings and bolds inside the prose */
  --desk-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}
html[data-theme="light"] {
  --desk-ink:    #34302a;
  --desk-dim:    #6f695c;
  --desk-rule:   #ddd7c9;
  --desk-lede:   #211e19;
  --desk-strong: #1b1915;
}
.desk-sign { font-family: var(--font-ui); font-weight: 600;
             font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
             color: var(--desk-dim); margin-top: 12px; }
.desk-sign a { color: var(--desk-dim); text-decoration: underline;
               text-underline-offset: 2px; }
.desk-sign a:hover { color: var(--accent); }

/* --- About: two quiet columns under the chart --- */
.about { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px;
         border-top: 1px solid var(--desk-rule); margin: 18px 0 4px; padding-top: 16px; }
.ab-k { font-family: var(--font-ui); font-weight: 600;
        font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
        color: var(--desk-dim); margin-bottom: 7px; }
.ab-body { font-family: var(--desk-serif); font-size: 17px; line-height: 1.68;
           color: var(--desk-ink); }
.ab-body p { margin: 0 0 9px; }
.ab-body p:last-child { margin-bottom: 0; }
.ab-body.clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
                   overflow: hidden; }
.ab-more { margin-top: 7px; background: none; border: 0; padding: 0; cursor: pointer;
           font-family: var(--font-ui); font-weight: 600; font-size: 12.5px;
           letter-spacing: .06em; color: var(--desk-dim); }
.ab-more:hover { color: var(--accent); }
.ab-more:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }

/* --- the quarter's lede: the single amber accent --- */
.lede { border-left: 2px solid var(--accent); padding: 2px 0 2px 16px; margin: 0 0 22px; }
.lede p { font-family: var(--desk-serif); font-size: 18.5px; line-height: 1.6;
          color: var(--desk-lede); margin: 0 0 10px; }
.lede p:last-of-type { margin-bottom: 0; }

/* --- footnotes: annotations under the tables they describe --- */
.fnotes { border-top: 1px solid var(--desk-rule); margin-top: 22px; padding-top: 16px; }
.fnote { margin-bottom: 16px; }
.fnote:last-of-type { margin-bottom: 0; }
.fnote-k { display: block; font-family: var(--font-ui); font-weight: 600;
           font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
           color: var(--desk-dim); margin-bottom: 6px; }
.fnote p, .fnote li { font-family: var(--desk-serif); font-size: 16.5px;
                      line-height: 1.66; color: var(--desk-ink); }
.fnote p { margin: 0 0 8px; }
.fnote ul.note-list { margin: 0 0 8px; padding-left: 17px; }
.fnote li { margin-bottom: 5px; }

/* --- reading view: Peers and Industry --- */
.reading { max-width: 68ch; padding: 4px 0 8px; }
.reading h3 { font-family: var(--desk-serif); font-weight: 600; font-size: 24px;
              color: var(--desk-strong); margin: 0 0 16px; letter-spacing: -.01em; }
.reading p { font-family: var(--desk-serif); font-size: 18px; line-height: 1.75;
             color: var(--desk-ink); margin: 0 0 15px; }
.reading ul.note-list { padding-left: 20px; margin: 0 0 15px; }
.reading li { font-family: var(--desk-serif); font-size: 18px; line-height: 1.7;
              color: var(--desk-ink); margin-bottom: 7px; }
.reading b { color: var(--desk-strong); font-weight: 600; }

@media (max-width: 760px) {
  .about { grid-template-columns: 1fr; gap: 18px; }
  .lede p { font-size: 17.5px; }
  .reading p, .reading li { font-size: 17.5px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* SME listings are a different market: smaller, thinner-traded, lighter
   disclosure. The badge is stated plainly, never as a warning colour. */
.sme {
  display: inline-block; margin-left: 7px; padding: 1px 5px;
  font-family: var(--font-ui); font-weight: 600;
  font-size: 11.5px; letter-spacing: .09em; line-height: 1.5;
  color: var(--sme); border: 1px solid var(--sme-line); border-radius: 3px;
  vertical-align: middle;
}
.stock-name .sme { font-size: 12px; }

/* ---- peer comparison ---- */
.peer-head { display:flex; align-items:baseline; gap:12px; margin:2px 0 12px; }
.peer-ind { font-family: var(--font-ui); font-weight: 600;
            font-size: 13.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); }
table.peers { width:100%; border-collapse:collapse; }
table.peers th { font-size:12px; letter-spacing:.07em; text-transform:uppercase;
                 color:var(--dim); font-weight:500; text-align:left; padding:6px 10px;
                 border-bottom:1px solid var(--line); }
table.peers td { padding:8px 10px; border-bottom:1px solid var(--hairline); font-size:15px; }
table.peers td.num, table.peers th.num { text-align:right; font-variant-numeric:tabular-nums; }
table.peers a { color:var(--text); text-decoration:none; font-weight:600; }
table.peers a:hover { color:var(--accent); }
table.peers .name { display:block; font-size:12.5px; color:var(--dim); margin-top:2px; }
tr.peer-self { background:var(--overlay); }
tr.peer-self a { color:var(--accent); }
tr.peer-median td { border-top:1px solid var(--line); border-bottom:0; color:var(--dim);
                    font-style:italic; }
.peer-note { margin-top:12px; font-size:13px; color:var(--dim); }
.peer-ind .crumb { color:var(--dim); }
.peer-ind .crumb:last-child { color:var(--accent); }
.peer-ind .crumb-sep { color:var(--faint); margin:0 6px; }


/* what we hold on this company — dim where we hold nothing */
.rail {
  display: flex; align-items: stretch;
  position: relative; z-index: 1; background: var(--bg);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin: 0 0 22px;
}
.rail-item {
  flex: 1; padding: 11px 10px 10px; text-align: center;
  border-right: 1px solid var(--line);
  font-family: var(--font-num); font-size: 11.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
}
.rail-item:last-child { border-right: 0; }
.rail-item b {
  display: block; font-family: var(--font-num);
  font-size: 19.5px; font-weight: 500; color: var(--line); margin-bottom: 3px;
}
.rail-item.has { color: var(--dim); }
.rail-item.has b { color: var(--accent); }

/* theme switch, quiet until it is used */
.theme-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.theme-switch button {
  border: 0; background: transparent; cursor: pointer; padding: 5px 11px;
  font-family: var(--font-num); font-size: 12px; letter-spacing: .06em;
  color: var(--faint);
}
.theme-switch button[aria-pressed="true"] { background: var(--line); color: var(--accent); }
.theme-switch button:hover { color: var(--text); }

@media (max-width: 700px) {
  .rail { flex-wrap: wrap; }
  .rail-item { flex: 0 0 33.33%; border-bottom: 1px solid var(--line); }
}

/* ---------------------------------------------------------------
   The company's own picture, as the page opens. Faded into the
   page rather than framed, so it reads as the header's backdrop
   and not as an advertisement.
   --------------------------------------------------------------- */
/* Image left, our note right. The image is a 16:9-ish press shot or a
   screenshot dropped into a wide letterbox, so it is never going to survive
   a 6:1 crop: give it a taller box, anchor the crop near the top where a
   screenshot keeps its subject, and dim it only enough to sit under text. */
.hero-wrap {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 18px;
  margin: 0 0 22px;
}
/* No in-flow content: the row height comes from the prose beside it and the
   image stretches to meet it, however long the section runs. min-height is
   for the stacked layout, where there is no prose to take height from. */
.hero {
  position: relative;
  min-height: 220px;
  overflow: hidden;
  border-radius: 10px;
}
.hero img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 22%;
  display: block;
  opacity: .88;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(var(--bg-rgb), 0) 0%, rgba(var(--bg-rgb), 0) 60%,
    rgba(var(--bg-rgb), .4) 100%);
}

.hero-note {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px 22px;
  overflow: hidden;
}
.hero-note .ab-body { font-size: 16.5px; line-height: 1.62; }
.hero-note .ab-body p { margin: 0 0 10px; }
.hero-note .ab-body p:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
  .hero-wrap { grid-template-columns: 1fr; }
  .hero { min-height: 190px; }
}

.note-line {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 14px 0 0; margin-bottom: 4px;
  border-top: 1px solid var(--line);
}
.note-line-k {
  font-family: var(--font-num); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent);
}
.note-line a { color: var(--text); font-weight: 500; text-decoration: none; }
.note-line a:hover { color: var(--accent); text-decoration: underline; }
.note-line .dim { font-family: var(--font-num); font-size: 12.5px; }



/* key figures under the chart: one quiet row of the numbers people open a
   stock page to see */
.keyfigs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 2px 0;
}
.kf { padding: 2px 14px 2px 0; }
.kf-k {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 4px; white-space: nowrap;
}
.kf-v { font-size: 17px; font-weight: 500; color: var(--text); }
@media (max-width: 620px) {
  .keyfigs { grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); }
  .kf-v { font-size: 16px; }
}

/* ---------------------------------------------------------------
   Latest results feed
   The homepage answers "who reported, and what did they say". Each
   company is a card: the header carries what it is worth, the table
   under it carries what it just earned, four lines by three periods.
   --------------------------------------------------------------- */
.tape-link { color: var(--accent); text-decoration: none; font-weight: 700; }
.tape-link:hover { text-decoration: underline; }

.feed-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 272px;
  gap: 22px;
  align-items: start;
}

/* On a wide display the feed was one long column of cards with empty page
   either side of it — the reader scrolled further to see less, which is the
   worst thing a results feed can do with a 1920 screen. The cards now flow
   into as many columns as fit at a width that still holds the four-by-three
   table comfortably. At a 520px floor that lands at one column up to 1366,
   two from 1440, and three at 2560 where the shell stops growing.
   min(100%, …) is what keeps the track from overflowing a narrow phone,
   where auto-fill would otherwise insist on the 520px floor. */
#feed {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr));
  gap: 12px;
  align-items: start;
}
/* the grid gap owns the spacing now; the card's own margin would double it */
#feed .rcard { margin-bottom: 0; }

/* the rail sticks: the filters are the page's controls, and scrolling a
   thousand results should not scroll them away */
.rail-panel {
  position: sticky;
  top: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  padding: 4px 0;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
.rail-group { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.rail-group:last-child { border-bottom: 0; }
.rail-title {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 8px;
}
.rail-opt {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; color: var(--dim);
  font-family: var(--font-ui); font-size: 14px;
  padding: 4px 6px; border-radius: 6px;
}
.rail-opt:hover { color: var(--text); background: var(--overlay-soft); }
.rail-opt.active { color: var(--accent); background: var(--overlay); font-weight: 700; }
.rail-opt b { font-family: var(--font-num); font-size: 12.5px; color: var(--faint); font-weight: 400; }
.rail-opt.active b { color: var(--accent); }
/* the industry list is long; it scrolls inside its own group rather than
   pushing every other filter off the screen */
/* Fade the cut instead of slicing a word in half at the panel edge: the
   list scrolls, and a hard crop through "Industrial Products" reads as a
   rendering fault rather than as more content below. */
.rail-scroll {
  max-height: 232px; overflow-y: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent 100%);
}

.rcard {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  padding: 13px 16px 6px;
  margin-bottom: 11px;
}
.rcard:hover { border-color: var(--overlay-line); }
.rcard-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding-bottom: 10px;
}
.rcard-name { font-weight: 700; font-size: 17px; color: var(--text); }
.rcard-name:hover { color: var(--accent); }
.rcard-sub {
  font-size: 12.5px; color: var(--faint);
  display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline;
}
/* Three figures reading as three, not one run of digits -- but the gap has
   to stay modest: widened to 30px it pushed the whole group onto a second
   line on any card whose company name and industry ran long, which costs far
   more than the separation gained. The group never wraps now; the name beside
   it gives way instead. */
.rcard-figs { margin-left: auto; display: flex; gap: 22px; flex-shrink: 0; }
.rfig-v { white-space: nowrap; }
/* the day's move is a footnote to the price, so it sits off it, smaller */
.rfig-chg { margin-left: 7px; font-size: 13px; }
.rfig { text-align: right; }
.rfig-k {
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint);
}
.rfig-v {
  font-family: var(--font-num); font-size: 15px; color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* The card's own table. The global table rule sets a 900px floor for the
   screener grid, which would make every card scroll sideways. */
.rtable table { min-width: 0; }
.rtable thead th {
  padding: 6px 8px; font-size: 11.5px; letter-spacing: .08em;
  cursor: default; border-bottom: 1px solid var(--line);
}
.rtable tbody td {
  padding: 5px 8px; font-size: 14px; border-bottom: 1px solid var(--hairline);
}
.rtable tbody tr:last-child td { border-bottom: 0; }
.rtable tbody tr { cursor: default; }
.rtable tbody tr:hover td { background: none; }
.rtable tbody td:first-child {
  font-family: var(--font-ui); font-size: 13.5px; color: var(--dim);
}
.rtable .yoy { font-weight: 700; }
/* the period a figure belongs to, under its column head */
.rtable .qh { display: block; font-weight: 400; letter-spacing: 0; color: var(--faint); }

.pill {
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 1px 7px; color: var(--faint);
}
/* A six-month SME filing is not a quarter. Saying so on the card is the
   difference between a company that doubled and one that reported twice
   as long a period. */
.pill-half { color: var(--info); border-color: var(--info); }

/* Each sort control is its own pill now, so it needs air around it and its
   left edge back — the old segmented look shared one border between them. */
.feed-sort { display: flex; gap: 8px; flex-wrap: wrap; }
.feed-sort .fin-btn + .fin-btn { border-left: 1px solid var(--pill-line); }
.feed-head {
  display: flex; align-items: baseline; gap: 14px;
  flex-wrap: wrap; margin-bottom: 12px;
}
.feed-count { color: var(--faint); font-family: var(--font-num); font-size: 13.5px; }

@media (max-width: 900px) {
  .feed-layout { grid-template-columns: minmax(0, 1fr); }
  /* Results first. The rail carries four filter groups and 196 industries;
     ordering it above the feed meant a phone reader scrolled the entire
     filter panel before reaching a single result — on the page whose whole
     job is showing what just reported. It goes below, where a reader who
     wants to narrow things can find it. */
  .rail-panel { position: static; max-height: none; order: 1; margin-top: 18px; }
  .rail-scroll { max-height: 168px; }
  .rcard-figs { margin-left: 0; width: 100%; justify-content: space-between; gap: 10px; }
}

/* Why a ranking holds fewer companies than the feed does. Empty most of
   the time, so it takes no room until a sort carries a floor. */
.floor-note {
  color: var(--faint); font-size: 13px;
  margin: -6px 0 12px; max-width: 62ch;
}
.floor-note:empty { display: none; }

/* Page controls. Quiet by default and loud only on the page you are on --
   the pager is a position indicator that happens to be clickable, not
   another row of buttons competing with the sort above it. */
.pager {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  justify-content: center; margin: 26px 0 8px;
}
.pager:empty { display: none; }
.pg {
  font-family: var(--font-num); font-size: 14px;
  color: var(--dim); background: transparent;
  border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 12px; cursor: pointer; transition: all .15s ease;
}
.pg:hover:not(:disabled) { color: var(--text); border-color: var(--overlay-line); }
.pg.active {
  color: var(--on-accent); background: var(--accent);
  border-color: var(--accent); font-weight: 700;
}
/* Kept in the flow rather than hidden: at the first and last page the row
   should not reflow and move the number under the reader's cursor. */
.pg:disabled { opacity: .35; cursor: default; }
.pg-gap { color: var(--faint); font-family: var(--font-num); font-size: 14px; padding: 0 2px; }

/* What a search replaced the feed with, and the way back out of it. */
.find-chip {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  color: var(--dim); font-size: 13.5px;
  border: 1px solid var(--line); border-left: 2px solid var(--accent);
  border-radius: 8px; padding: 9px 12px; margin: 0 0 14px;
}
.find-chip:empty { display: none; }
.find-chip b { color: var(--text); font-family: var(--font-num); }
.chip-clear {
  color: var(--accent); background: transparent; border: 0; padding: 0;
  font: inherit; cursor: pointer; text-decoration: underline;
}

/* A figure the filing itself says not to read straight. Quiet -- it
   qualifies the number beside it, it does not compete with it. */
.flag {
  font-family: var(--font-ui);
  font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--info); border: 1px solid var(--info);
  border-radius: 999px; padding: 0 5px; margin-left: 5px;
  vertical-align: middle; white-space: nowrap;
}
.rcard-note {
  color: var(--faint); font-size: 13px; line-height: 1.45;
  padding: 8px 0 4px; margin-top: 2px;
  border-top: 1px solid var(--hairline);
}


/* ---- depth ----
   Elevation, not bevels. A data terminal that embosses its own numbers looks
   like software from 2004; what reads as modern depth is a surface catching a
   little light on its top edge and casting a soft shadow under itself, and
   the further a thing is from the page the larger and softer that shadow
   gets. Three heights only: controls sit just off the page, surfaces sit
   above it, and the thing under the pointer rises.

   Anything typed into goes the other way. A field is a hole in the page, so
   it takes the inset and no lift -- which also means the eye can tell a
   button from an input without reading either. */
.rcard, .card, .rail-panel, .tablewrap, .search-results {
  box-shadow: var(--edge), var(--lift-2);
  background-image: var(--sheen);
}
.chip, .pg, .feed-sort .fin-btn, .price-filter, .theme-switch, .find-chip {
  box-shadow: var(--edge), var(--lift-1);
}
.masthead { box-shadow: var(--lift-1); position: relative; z-index: 5; }

/* recessed: fields, and the pressed state of anything that toggles */
.search input, .price-filter input { box-shadow: var(--sink); }
.chip.active, .feed-sort .fin-btn.active,
.pg.active, .theme-switch button[aria-pressed="true"] {
  box-shadow: var(--sink);
}

/* A card lifts under the pointer. The whole card is a link to the stock page,
   so the movement is the affordance -- and it is 2px, because a card that
   jumps announces itself louder than the figures it carries. */
.rcard {
  transition: box-shadow .16s ease, transform .16s ease;
  will-change: transform;
}
.rcard:hover {
  transform: translateY(-2px);
  box-shadow: var(--edge), var(--lift-3);
}
/* a reader who asked for less motion gets the light, not the movement */
@media (prefers-reduced-motion: reduce) {
  .rcard { transition: box-shadow .16s ease; }
  .rcard:hover { transform: none; }
}


/* ---- glass ----
   The wash first. Three soft pools of brand colour fixed behind everything,
   heavily blurred and at very low alpha -- not decoration in its own right,
   which is the mistake the video was, but something for the panels above to
   pick up and bend. Fixed rather than scrolling, so the light stays put and
   the content moves across it. */
body::before {
  content: '';
  position: fixed;
  inset: -25%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 34% at 16% 10%,
      color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    radial-gradient(34% 30% at 86% 18%,
      color-mix(in srgb, var(--info) 20%, transparent), transparent 70%),
    radial-gradient(44% 38% at 62% 92%,
      color-mix(in srgb, var(--up) 14%, transparent), transparent 72%);
  filter: blur(60px);
  opacity: var(--wash);
}

/* The surfaces. Translucent, blurred, and edged with a single bright hairline
   along the top -- that highlight is what reads as a pane of glass rather
   than a tinted box, because it is where a real edge would catch the light. */
.rcard, .card, .rail-panel, .tablewrap, .search-results, .masthead {
  background-color: var(--glass);
  -webkit-backdrop-filter: var(--glass-fx);
          backdrop-filter: var(--glass-fx);
  border-color: var(--glass-edge);
}
.chip, .pg, .feed-sort .fin-btn, .price-filter, .theme-switch, .find-chip {
  background-color: var(--glass);
  -webkit-backdrop-filter: var(--glass-fx);
          backdrop-filter: var(--glass-fx);
  border-color: var(--glass-edge);
}
/* the masthead spans the full width, so its hairline belongs on the underside */
.masthead { border-bottom-color: var(--glass-edge); }

/* Apple's radii are larger than they look; 12px on a card this size reads as
   a box with the corners knocked off rather than as a rounded object. */
.rcard, .card, .rail-panel, .tablewrap { border-radius: 18px; }
.search input, .price-filter, .search-results { border-radius: 14px; }


/* Glass never goes over a filled state. The rules above are late in the file
   and were quietly winning against .fin-btn.active, which turned the selected
   sort from an amber fill into an outline with dark text on it -- the one
   control that has to be the loudest thing in its row, rendered the quietest.
   A filled control is opaque on purpose: you cannot see through the thing you
   have chosen. */
.chip.active,
.feed-sort .fin-btn.active,
.theme-switch button[aria-pressed="true"] {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}


/* ---- paywall ----
   The page behind is blurred rather than hidden: a reader should be able to
   see that there is something real underneath, which is the whole argument
   for paying, while not being able to read a figure off it. The blur is on
   the overlay, so nothing has to be moved or unmounted and the wall lifts
   cleanly if the meter is ever reset. */
.paywall {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: var(--gutter);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
          backdrop-filter: blur(16px) saturate(140%);
}
/* stop the page behind from scrolling under the wall */
html.paywalled, html.paywalled body { overflow: hidden; }

.paywall-card {
  max-width: 460px; width: 100%;
  text-align: center;
  padding: 34px 32px 26px;
  border: 1px solid var(--glass-edge);
  border-radius: 20px;
  background-color: var(--glass);
  background-image: var(--sheen);
  -webkit-backdrop-filter: var(--glass-fx);
          backdrop-filter: var(--glass-fx);
  box-shadow: var(--edge), var(--lift-3);
}
.paywall-kicker {
  color: var(--accent); font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px;
}
.paywall-title {
  font-family: var(--font-head); font-weight: 700;
  font-size: 27px; letter-spacing: -0.01em; margin-bottom: 10px;
}
.paywall-body {
  color: var(--dim); font-size: 15px; line-height: 1.6;
  margin: 0 auto 22px; max-width: 42ch;
}
.paywall-cta {
  display: inline-block; width: 100%;
  padding: 13px 22px;
  border: 0; border-radius: 999px;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--font-ui); font-weight: 700; font-size: 16px;
  cursor: pointer; box-shadow: var(--lift-1);
  transition: transform .14s ease, box-shadow .14s ease;
}
.paywall-cta:hover { transform: translateY(-1px); box-shadow: var(--lift-2); }
.paywall-cta:active { transform: none; box-shadow: var(--sink); }
.paywall-foot { color: var(--faint); font-size: 12px; margin-top: 14px; }
@media (prefers-reduced-motion: reduce) {
  .paywall-cta, .paywall-cta:hover { transform: none; transition: none; }
}


/* ---- ruled like a printed table ----
   Asked for a maths book, and a maths book rules its tables: a heavy rule
   under the heading, a light rule between every row, and a rule between
   every column. The last one is what actually does it -- figures in a
   column with nothing between them read as floating, and the moment a
   vertical rule appears the whole thing reads as a table that was set
   rather than a list that was laid out.

   Two weights only, which is the whole discipline of it. --line is the
   structural rule and is black on paper; --hairline is the interior rule
   and is a grey you can still plainly see, where before it was 6% black
   and effectively decorative. */
.rtable table, #tbl { border-collapse: collapse; }

/* the heading rule, heavier than the rest */
.rtable thead th,
#tbl thead th { border-bottom: 2px solid var(--line); }

/* rows */
.rtable tbody td,
#tbl tbody td { border-bottom: 1px solid var(--hairline); }

/* columns — every boundary except the outer edges */
.rtable thead th + th, .rtable tbody td + td,
#tbl thead th + th,    #tbl tbody td + td {
  border-left: 1px solid var(--hairline);
}

/* The last row keeps its rule on the screener, where the table runs to the
   panel edge and wants closing off, and drops it inside a card, where the
   card's own border is already the closing rule. */
.rtable tbody tr:last-child td { border-bottom: 0; }

/* ---- export to excel ----
   Sits with the price and the as-on date because that is the block a reader
   is looking at when they decide they want the numbers rather than the page.
   Green is the one place this palette borrows a convention from outside it:
   a spreadsheet button that is not green reads as something else. */
.xls-btn {
  display: inline-flex; align-items: center; gap: 9px;
  align-self: center; white-space: nowrap;
  padding: 9px 15px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--pill);
  color: var(--text); font-size: 14px; font-weight: 600;
  box-shadow: var(--edge), var(--lift-1);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.xls-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--edge), var(--lift-2);
  border-color: var(--up);
}
.xls-btn:active { transform: none; box-shadow: var(--sink); }
.xls-ico {
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
  color: var(--on-accent); background: var(--up);
  padding: 3px 6px; border-radius: 5px;
}
@media (prefers-reduced-motion: reduce) {
  .xls-btn, .xls-btn:hover { transform: none; transition: none; }
}
@media (max-width: 700px) { .xls-btn { width: 100%; justify-content: center; } }

/* ---- money flow ---- */
.flow-lede {
  color: var(--dim); font-size: 14.5px; line-height: 1.65;
  max-width: 92ch; margin: 0 0 22px;
}
.flow-lede b { color: var(--text); font-weight: 600; }
/* The ratio is the only figure on the row that carries colour, because it is
   the only one that says something on its own. Under 1.0 is a quiet day, not
   a bad one, so nothing is marked at the bottom end. */
.flow-ratio { font-weight: 700; }
.flow-warm  { color: var(--accent); }
.flow-hot   { color: var(--on-accent); background: var(--accent); font-weight: 800; }

/* ---- phones ----
   The card's own table was the one table on the site not sitting in a
   scroller, so on a 390px screen its five columns pushed straight out of the
   card and took the page's scroll width to 501 — the whole page slid sideways
   under the reader's thumb, which is what "flying out" is. It scrolls inside
   the card now, like every other table here already did.
   The tightening below is so that it usually does not have to. */
.rtable { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 600px) {
  /* narrower cells and a smaller figure: five columns of a quarterly table
     fit a phone at this size without scrolling at all */
  .rtable thead th { padding: 5px 5px; font-size: 10.5px; letter-spacing: .04em; }
  .rtable tbody td { padding: 5px 5px; font-size: 13px; }
  .rtable tbody td:first-child { font-size: 12.5px; }

  /* the header figures were set never to wrap so they would stay on one line
     on a desktop card; on a phone that is exactly what pushes the card wide,
     so here they may wrap and shrink */
  .rcard-figs { flex-shrink: 1; flex-wrap: wrap; gap: 14px; }
  .rfig-v { white-space: normal; }

  /* nothing on a phone should be able to widen the page, whatever it is */
  html, body { overflow-x: hidden; }
  .wrap { padding-left: 14px; padding-right: 14px; }
}

/* The budget control inside the rail. The screener's version sits in a row of
   chips and can be wide; this one lives in a 272px column, so the fields share
   the space rather than claiming a fixed width each. */
.rail-price { width: 100%; justify-content: space-between; padding: 5px 10px; }
.rail-price input { width: 0; flex: 1 1 auto; min-width: 0; }

/* ---- segmented toggles on narrow screens ----
   Four labels like "Tax disputes (129)" cannot share one row on a 390px
   phone. The container did not wrap, so instead of breaking between the
   pills it broke inside them, and a three-word label became three stacked
   lines inside a pill sized for one. Each pill keeps its label on a single
   line; the row wraps between pills instead. */
.fin-toggle { flex-wrap: wrap; }
.fin-btn { white-space: nowrap; }

@media (max-width: 600px) {
  /* tighter so two pills fit a row rather than one and a half */
  .fin-toggle { gap: 4px; padding: 4px; }
  .fin-btn { padding: 7px 12px; font-size: 13px; }
  .lead-filters { margin: 12px 0 14px; }
}