/* Layout: one column. Search, the company, one chart of reported revenue and expenses. Dark, like a charting desk. */
:root {
  --bg: #0a0c0f;
  --surface: #101318;
  --panel: #0d1014;
  --raised: #161a20;
  --ink: #eceef1;
  --ink-2: #a6adb8;
  --muted: #7d8590;
  --grid: #151920;
  --axis: #2a3038;
  --hair: #1d2229;
  --line-2: #262c34;
  --accent: #f2f3f5;
  --on-accent: #0a0c0f;
  --rev: #4a90ff;
  --exp: #ffa552;
  --on-rev: #06101f;
  --on-exp: #1f1206;
  --star: #f5b83d;
  --crit-ink: #ff7b7b;
  --hover: rgba(255, 255, 255, 0.05);
  --tip-bg: #1a1f26;
  --tip-ink: #eceef1;
  --tip-ink-2: #a6adb8;
  --font-display: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  /* The logo keeps these whatever chart colours are picked. */
  --brand-x: #ffa552;
  --brand-f: #4a90ff;
  color-scheme: dark;
}
/* Chart colours an account can pick instead (the account menu): revenue, expenses, and the text on their tags. */
:root[data-colors="green-red"] { --rev: #3ecf8e; --exp: #ff6b6b; --on-rev: #04140c; --on-exp: #1f0606; }
:root[data-colors="teal-pink"] { --rev: #2dd4bf; --exp: #f472b6; --on-rev: #03201c; --on-exp: #250a18; }
:root[data-colors="blue-yellow"] { --rev: #5aa0ff; --exp: #f2c94c; --on-rev: #06101f; --on-exp: #1f1a06; }

* { box-sizing: border-box; }
/* Room for the scrollbar on every page, so pages that scroll and full-screen charts line up (Windows). */
html { scrollbar-gutter: stable; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.page {
  max-width: 1344px;
  margin: 0 auto;
  padding-block: 0 40px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: grid;
  gap: 28px;
}
@media (min-width: 760px) {
  .page { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); }
}

/* Brand: the top bar, with a hairline under it right across the window. */
.masthead { position: relative; display: grid; gap: 6px; padding: 12px 0; }
.masthead::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--hair); box-shadow: 0 0 0 100vmax var(--hair); clip-path: inset(0 -100vmax);
}
.top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; min-height: 40px; }
.account { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-left: auto; }
/* Subscribe in the top bar: solid, the same size as the buttons beside it. */
.account .btn { min-height: 36px; padding: 0 16px; font-size: 14px; border-radius: 8px; white-space: nowrap; }
.account .acct-signin { border-color: transparent; }
.account .acct-signin:hover { border-color: transparent; }
/* Signed in: one round button with the account's initial, and its menu. */
.acct { position: relative; }
.acct-avatar {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink);
  background: var(--raised); border: 1px solid var(--line-2); border-radius: 50%;
  transition: border-color 0.15s;
}
.acct-avatar:hover, .acct-avatar[aria-expanded="true"] { border-color: #4a525d; }
.acct-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; display: grid; gap: 2px; min-width: 240px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}
.acct-email { margin: 0 0 4px; padding: 8px 10px 10px; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--hair); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-item { font: inherit; font-size: 14px; color: var(--ink); text-align: left; padding: 8px 10px; background: none; border: 0; border-radius: 8px; cursor: pointer; }
.acct-item:hover { background: var(--hover); }
.acct-label { margin: 6px 10px 2px; font-size: 12px; color: var(--muted); }
/* Chart colours: each choice shows its revenue and expense line. */
.swatches { display: flex; gap: 6px; padding: 4px 10px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--hair); }
.swatch { display: grid; gap: 4px; padding: 8px 9px; background: transparent; border: 1px solid var(--line-2); border-radius: 8px; cursor: pointer; }
.swatch i { display: block; width: 18px; height: 3px; border-radius: 2px; }
.swatch:hover { background: var(--hover); }
.swatch[aria-pressed="true"] { background: var(--raised); border-color: rgba(255, 255, 255, 0.6); }
.link {
  font: inherit; font-size: 14px; color: var(--ink-2); cursor: pointer;
  background: none; border: 0; padding: 4px 0;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--axis);
}
.link:hover { color: var(--ink); text-decoration-color: currentColor; }

/* Expected crossover, one section per year */
.years { display: grid; gap: 40px; }
.year-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0 0 14px; }
.year-head h2 { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.year-head span { font-size: 13px; color: var(--muted); }
.list-empty { margin: 0; font-size: 13px; color: var(--muted); }
/* A year's page: Annual break-even as the heading, and the year beside it. */
#year-head .year-head { margin: 0; }
.cos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.co-card {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 14px 16px; color: inherit; text-decoration: none;
  background: var(--surface); border: 1px solid var(--hair); border-radius: 14px;
  transition: border-color 0.15s, background-color 0.15s;
}
.co-card:hover { border-color: var(--line-2); background: #12161c; }
.cos-locked { position: relative; }
/* Visitors: one blurred row per year, and one Subscribe button over all of them. */
.cos-locked .cos { filter: blur(6px); pointer-events: none; user-select: none; grid-template-rows: auto; grid-auto-rows: 0; row-gap: 0; overflow: hidden; }
/* The Subscribe box shares one grid cell with what's behind it, so the space grows to fit whichever is taller. */
.years.is-locked { position: relative; min-height: 380px; }
.years.is-locked > * { grid-area: 1 / 1; }
.years.is-locked > .locked-cta { align-content: center; background: rgba(10, 12, 15, 0.55); }
.cos-locked.rows-2 .cos { grid-template-rows: auto auto; }

/* Annual break-even's years: a menu that drops down from it in the top bar (placed by openYears). Each year's
   expected crossovers have their own page. */
.yr-tabs {
  position: fixed; z-index: 60; display: grid; gap: 2px; min-width: 132px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}
.site-nav .caret { width: 10px; height: 10px; margin-left: 6px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s; }
.site-nav [aria-expanded="true"] .caret { transform: rotate(180deg); }
.yr-tabs a {
  font-family: var(--font-mono); font-size: 14px; font-weight: 500; line-height: 1; color: var(--ink-2); text-decoration: none;
  padding: 10px 11px; border-radius: 8px; font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: color 0.15s, background-color 0.15s;
}
.yr-tabs a:hover { color: var(--ink); background: var(--hover); }
.yr-tabs a[aria-current="page"] { color: var(--ink); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-2); }
.co-card img, .co-card .ph { width: 32px; height: 32px; flex: none; border-radius: 8px; }
/* Logos sit on a white tile, so dark logos stay visible on the dark page; white logos get a dark one. */
.co-card img { object-fit: contain; background: #ffffff; padding: 4px; }
.co-card img.on-dark, .co-logo.on-dark, .hero-tab img.on-dark { background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-2); }
.co-card .ph, .hero-tab .ph {
  display: grid; place-items: center;
  background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--ink); font-family: var(--font-mono); font-size: 12px; font-weight: 600;
}
.co-card .txt { display: grid; min-width: 0; flex: 1 1 0; }
.co-card .tkr { font-family: var(--font-mono); font-size: 14px; font-weight: 600; }
.co-card .nm { font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A card's break-even year, on the right. */
.co-card .yr { flex: none; font-family: var(--font-mono); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Chart page: the chart fills the screen under a solid top bar; the company card floats on it. The bar keeps
   every other page's edges, logo and spacing (.page, .top), so the logo, sections and account stay put. */
.bar { display: grid; gap: 28px; }
.bar, .masthead, .top { min-width: 0; } /* a long row of sections scrolls instead of widening the page on phones */
body.is-chart .page { max-width: none; padding: 0; display: block; }
body.is-chart .bar {
  position: fixed; z-index: 30; top: 0; left: 0; right: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px;
  padding: max(12px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px), calc((100% - 1344px) / 2 + 16px)) 12px max(16px, env(safe-area-inset-left, 0px), calc((100% - 1344px) / 2 + 16px));
  background: var(--bg); border-bottom: 1px solid var(--hair);
}
@media (min-width: 760px) {
  body.is-chart .bar {
    padding-left: max(32px, env(safe-area-inset-left, 0px), calc((100% - 1344px) / 2 + 32px));
    padding-right: max(32px, env(safe-area-inset-right, 0px), calc((100% - 1344px) / 2 + 32px));
  }
}
body.is-chart .masthead, body.is-chart .top { display: contents; }
body.is-chart .masthead::after { display: none; }
body.is-chart .brand { order: 0; }
body.is-chart .lookup { order: 1; flex: 1 1 200px; max-width: 480px; min-width: 0; margin: 0; }
body.is-chart .account { order: 3; }
/* Tablets: the search gets its own row under the bar rather than squeezing the sections. */
@media (min-width: 641px) and (max-width: 1023px) {
  body.is-chart .lookup { order: 4; flex-basis: 100%; max-width: none; }
}
body.is-chart .lookup-big .lookup-field { min-height: 40px; border-radius: 10px; padding: 0 12px; }
body.is-chart .lookup-big .lookup-ic { width: 16px; height: 16px; margin-right: 10px; }
body.is-chart .lookup-big .lookup-field input { font-size: 16px; padding: 8px 0; }
body.is-chart .lookup-big .btn { min-height: 40px; border-radius: 10px; padding: 0 18px; font-size: 15px; }
body.is-chart .kbd { font-size: 11px; padding: 1px 6px; }
body.is-chart .result { position: fixed; inset: 0; top: var(--bar-bottom, 64px); z-index: 1; display: block; }
body.is-chart .chart-card { position: absolute; inset: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--bg); }
.chart-card { position: relative; }
body.is-chart .chart { position: absolute; inset: 0; }
.info { display: grid; gap: 10px; min-width: 0; }
body.is-chart .info {
  position: fixed; z-index: 20;
  top: calc(var(--bar-bottom, 64px) + 16px); /* just under the top bar, however tall it wraps */
  left: max(20px, env(safe-area-inset-left, 0px));
  max-width: min(560px, calc(100% - 40px));
  padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--hair); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
/* Phones: the top bar stays on one row (logo mark, search, account) and the company card is compact. */
@media (max-width: 640px) {
  body.is-chart .wordmark { display: none; }
  body.is-chart .bar { gap: 8px 10px; padding: max(8px, env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px)) 8px max(12px, env(safe-area-inset-left, 0px)); }
  body.is-chart .lookup { flex: 1 1 120px; grid-template-columns: minmax(0, 1fr); }
  body.is-chart .lookup-field { flex: 1 1 0; }
  body.is-chart .lookup-field input { width: 0; }
  body.is-chart .info { top: calc(var(--bar-bottom, 60px) + 10px); left: max(10px, env(safe-area-inset-left, 0px)); max-width: calc(100% - 20px); padding: 10px 12px; gap: 6px; }
  body.is-chart .co-line { gap: 4px 10px; }
  body.is-chart .co-mark { width: 32px; height: 32px; border-radius: 8px; }
  body.is-chart .co-logo { padding: 3px; }
  body.is-chart .co-name { font-size: 20px; }
  body.is-chart .readout { font-size: 12px; gap: 2px 12px; }
  body.is-chart .co-desc { font-size: 13px; }
  /* Visitors: Get started only, so the bar stays one row. */
  body.is-chart .account .acct-signin { display: none; }
}

/* Home: the search, then the biggest expected break-evens in one large chart with a tab for each. */
body.on-home #bar { order: 0; }
body.on-home #hero-head { order: 2; margin-bottom: -14px; }
body.on-home #result { order: 3; }
body.on-home #tops { order: 5; }
body.on-home #home-cta { order: 7; }
body.on-home .site-foot { order: 9; }
body.on-home #tops, body.on-home #home-cta { margin-top: 20px; }
/* Annual break-even: a link to each year's page. */
.yr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.yr-chips a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
  font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums;
  background: var(--surface); border: 1px solid var(--hair); border-radius: 10px; transition: border-color 0.15s, background-color 0.15s;
}
.yr-chips a:hover { border-color: var(--line-2); background: #12161c; }
/* The sections, in the top bar: Industries for everyone; the lists and the board for subscribers. */
.site-nav { display: flex; align-items: center; gap: 2px; min-width: 0; }
.site-nav a {
  display: inline-flex; align-items: center;
  font-size: 14px; font-weight: 500; color: var(--ink-2); text-decoration: none; white-space: nowrap;
  padding: 9px 11px; border-radius: 8px; transition: color 0.15s, background-color 0.15s;
}
.site-nav a:hover { color: var(--ink); background: var(--hover); }
.site-nav a[aria-current="page"] { color: var(--ink); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-2); }
@media (max-width: 640px) {
  /* Phones: their own row under the logo; on charts they give way to the search. */
  .site-nav { order: 3; flex-basis: 100%; overflow-x: auto; scrollbar-width: none; }
  .site-nav::-webkit-scrollbar { display: none; }
  body.is-chart .site-nav { display: none; }
}
body.is-share .site-nav { display: none !important; }
/* The year tabs in the top bar belong to the year pages. */
/* Footer: one quiet line of links. */
.site-foot {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px;
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--hair); font-size: 13px; color: var(--muted);
}
.site-foot a { color: var(--muted); text-decoration: none; }
.site-foot a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
body.is-chart .site-foot { display: none; }

/* The heading over the large chart, with the arrows that step it through the Top 3. */
.hero-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
body:not(.on-home) .hero-head { display: none !important; }
.hero-title { margin: 0 auto 0 0; font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.hero-count { margin-right: 6px; font-family: var(--font-mono); font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.hero-arrow, .pop-arrow {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0; cursor: pointer; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px;
  transition: background-color 0.15s, border-color 0.15s;
}
.hero-arrow:hover, .pop-arrow:hover { background: var(--raised); border-color: #343b45; }
.hero-arrow svg, .pop-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* The large chart on the home and year pages: one panel, the company card floating on its empty corner. */
body.is-hero .result { display: block; position: relative; background: var(--panel); border: 1px solid var(--hair); border-radius: 16px; overflow: hidden; }
body.is-hero .chart-card { position: relative; margin: 0; padding: 0; overflow: hidden; height: clamp(380px, 64vh, 680px); border: 0; border-radius: 0; background: transparent; }
body.on-home .chart-card { height: clamp(360px, 56vh, 560px); }
body.is-hero .chart { position: absolute; inset: 0; }
body.is-hero .info { position: absolute; z-index: 2; top: 24px; left: 24px; max-width: min(540px, calc(100% - 48px)); }
body.is-hero .co-name { font-size: clamp(28px, 3.2vw, 36px); }

/* Home: a tab under the chart for each of the Top 3; the one in the chart is lit along its top. */
.hero-tabs { display: none; }
body.on-home .hero-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); border-top: 1px solid var(--hair); }
.hero-tab {
  font: inherit; color: var(--ink-2); text-align: left; text-decoration: none; cursor: pointer;
  display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px 18px;
  background: transparent; border: 0; box-shadow: inset 1px 0 0 var(--hair);
  transition: background-color 0.15s, color 0.15s;
}
.hero-tab:first-child { box-shadow: none; }
.hero-tab:hover { color: var(--ink); background: var(--hover); }
.hero-tab[aria-current="true"] { color: var(--ink); background: var(--raised); box-shadow: inset 0 2px 0 var(--accent); }
.hero-tab img, .hero-tab .ph { width: 32px; height: 32px; flex: none; border-radius: 8px; }
.hero-tab img { object-fit: contain; background: #ffffff; padding: 4px; }
.hero-tab .txt { display: grid; min-width: 0; flex: 1 1 0; }
.hero-tab .tkr { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--ink); }
.hero-tab .nm { font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-tab .tiny { flex: none; width: 88px; height: 36px; }
.hero-tab .tiny svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hero-tab .yr { flex: none; font-family: var(--font-mono); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
body.on-home .result.swap .chart, body.on-home .result.swap .info { animation: hero-in 0.28s ease-out; }
@keyframes hero-in { from { opacity: 0.3; } to { opacity: 1; } }
@media (max-width: 640px) {
  /* Phones: the card above the chart instead of on it, and the tabs just ticker and year. */
  body.is-hero .info { position: static; max-width: none; padding: 14px 14px 0; gap: 8px; }
  body.is-hero .co-mark { width: 36px; height: 36px; border-radius: 9px; }
  body.is-hero .co-logo { padding: 4px; }
  /* The industry and buttons always on their own row, so a button appearing (the star) never re-wraps the card. */
  body.is-hero .co-break { display: block; flex-basis: 100%; height: 0; }
  body.is-hero .co-name { font-size: 24px; }
  body.is-hero .co-desc { font-size: 13px; }
  body.is-hero .readout { font-size: 12px; gap: 2px 14px; }
  body.is-hero .chart-card { height: clamp(300px, 52vh, 420px); }
  body.on-home .chart-card { height: clamp(280px, 44vh, 380px); }
  body.on-home .hero-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-tab { flex-direction: column; justify-content: center; gap: 2px; min-height: 60px; padding: 10px 4px; }
  .hero-tab img, .hero-tab .ph, .hero-tab .nm, .hero-tab .tiny { display: none; }
  .hero-tab .txt { flex: none; text-align: center; }
  .hero-tab .yr { font-size: 12px; font-weight: 500; color: var(--ink-2); }
  .hero-title { font-size: 19px; }
  .hero-arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) { body.on-home .result.swap .chart, body.on-home .result.swap .info { animation: none; } .hero-tab, .co-card { transition: none; } }
.cta-pitch { margin: 0 0 4px; font-size: 15px; color: var(--ink-2); text-align: center; }

.readout { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.readout .ro-when { color: var(--ink); font-weight: 600; }
/* Fixed slots, so the card doesn't change size as the readout follows the pointer. */
.readout .ro-when { display: inline-block; min-width: 13em; }
.readout b { display: inline-block; min-width: 6.4em; }
.readout .ro-item { display: inline-flex; align-items: center; gap: 7px; }
.readout b { color: var(--ink); font-weight: 600; }
.chip {
  justify-self: start; font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 6px; padding: 1px 8px;
}
.chip.is-cross { color: var(--ink); border-color: rgba(255, 255, 255, 0.28); transition: background-color 0.15s, box-shadow 0.15s, border-color 0.15s; }
/* The break-even chip and the cash runway chip, side by side; no row at all when neither shows. */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips:not(:has(> :not([hidden]))) { display: none; }
.run-chip { cursor: help; }
.run-chip.is-short { color: var(--crit-ink); border-color: color-mix(in srgb, var(--crit-ink) 45%, transparent); }
/* A company's figures by year, folded away under one line of the card until opened; scrolls within the card. */
.co-figs summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  font-size: 12.5px; color: var(--muted); user-select: none;
}
.co-figs summary::-webkit-details-marker { display: none; }
.co-figs summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.15s; }
.co-figs[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.co-figs summary:hover { color: var(--ink-2); }
.co-figs-body { max-height: min(46vh, 420px); overflow: auto; margin-top: 10px; padding-right: 4px; }
.co-figs-body h2 { margin: 0 0 6px; font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.co-figs-body p { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.co-figs-body table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.co-figs-body th { padding: 4px 6px; text-align: right; font-family: var(--font-body); font-weight: 500; color: var(--muted); border-bottom: 1px solid var(--line-2); }
.co-figs-body td { padding: 4px 6px; text-align: right; color: var(--ink); border-bottom: 1px solid var(--hair); white-space: nowrap; }
.co-figs-body :is(th, td):first-child { text-align: left; color: var(--ink-2); }
.co-figs-body td.neg { color: var(--crit-ink); }
.co-figs-body .co-related { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }
.co-figs-body .co-related a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(125, 133, 144, 0.5); }
.co-figs-body .co-related a:hover { color: var(--ink); }
.chip.is-cross.lit {
  background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06), 0 0 16px rgba(255, 255, 255, 0.14);
}

/* How many years back: 1Y 3Y 5Y 10Y, top right of a company's chart (left of the price scale) and in the board's tools. */
.ranges { display: none; gap: 2px; padding: 3px; background: var(--surface); border: 1px solid var(--hair); border-radius: 10px; }
.ranges button {
  min-width: 38px; height: 26px; padding: 0 8px; cursor: pointer;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--muted);
  background: transparent; border: 0; border-radius: 7px;
}
.ranges button:hover { color: var(--ink); background: var(--hover); }
.ranges button[aria-pressed="true"] { color: var(--ink); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-2); }
.chart-tools { display: none; }
body.is-chart:not(.is-board) .chart-tools { display: flex; align-items: center; gap: 6px; position: absolute; z-index: 3; top: 12px; right: 86px; }
body.is-chart:not(.is-board) #ranges { display: inline-flex; }
.board-tools .ranges { display: inline-flex; }
@media (max-width: 640px) {
  /* Phones: the company card covers the top, so the buttons sit just above the time axis. */
  body.is-chart:not(.is-board) .chart-tools { top: auto; right: auto; bottom: 36px; left: 10px; }
}
body.is-share .ranges, body.is-share .chart-tools { display: none !important; }
/* Cash runway on the chart: a switch beside the year buttons (subscribers; a lock for everyone else). */
.tool-tog {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; cursor: pointer;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--muted);
  background: var(--surface); border: 1px solid var(--hair); border-radius: 10px;
  transition: color 0.15s, border-color 0.15s;
}
.tool-tog:hover { color: var(--ink); }
.tool-tog i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; }
.tool-tog[aria-pressed="true"] { color: var(--ink); border-color: color-mix(in srgb, var(--crit-ink) 55%, var(--hair)); }
.tool-tog[aria-pressed="true"] i { background: var(--crit-ink); border-color: var(--crit-ink); }
.tool-tog svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
body.is-sub .tool-tog svg, body:not(.is-sub) .tool-tog i { display: none; }
.run-pop {
  position: absolute; z-index: 4; top: 54px; right: 86px; width: min(300px, calc(100vw - 32px)); padding: 14px 16px;
  display: grid; gap: 10px; justify-items: start;
  background: var(--tip-bg); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.run-pop p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.run-pop b { color: var(--ink); font-weight: 600; }
@media (max-width: 640px) { .run-pop { top: auto; right: auto; bottom: 80px; left: 10px; } }

/* Pulling a chart past its first or last figure: a soft glow on that edge, not a dead stop. */
.edge-glow {
  position: absolute; top: 0; bottom: 28px; width: 64px; z-index: 2; pointer-events: none;
  opacity: 0; transition: opacity 0.35s ease-out;
}
.edge-glow.on { transition: opacity 0.08s; }
.edge-glow.left { left: 0; background: linear-gradient(to right, rgba(255, 255, 255, 0.12), transparent); }
.edge-glow.right { right: 74px; background: linear-gradient(to left, rgba(255, 255, 255, 0.12), transparent); }
@media (prefers-reduced-motion: reduce) { .edge-glow, .edge-glow.on { transition: none; } }

/* Our own chart */
.chart { --chart-bg: var(--panel); }
body.is-chart .chart { --chart-bg: var(--bg); }
body .cell .chart { --chart-bg: var(--surface); }
body.is-chart .chart { touch-action: none; user-select: none; -webkit-user-select: none; }
.chart.dragging, .chart.dragging.on-scale { cursor: grabbing; }
.chart .cross { stroke: var(--ink); stroke-opacity: 0.35; stroke-width: 1; stroke-dasharray: 4 4; }
.chart .cross.is-proj { stroke-opacity: 0.25; }
.chart .cross-tag rect { fill: var(--axis); }
.chart .cross-tag text { fill: var(--ink); font-weight: 500; }
.chart .cross-tag.is-proj rect { fill: #343b45; }
.chart .proj-tag rect { fill: var(--tip-bg); stroke: var(--line-2); }
.chart .proj-tag text { fill: var(--ink-2); font-size: 10.5px; font-weight: 500; letter-spacing: 0.06em; }
.chart .tag-rev rect { fill: var(--rev); }
.chart .tag-exp rect { fill: var(--exp); }
.chart .tag text { font-weight: 600; }
.chart .tag-rev text { fill: var(--on-rev); }
.chart .tag-exp text { fill: var(--on-exp); }
.chart .today-line { stroke: var(--ink); stroke-opacity: 0.3; stroke-width: 1; }
.chart .today-tag rect { fill: var(--raised); stroke: var(--line-2); }
.chart .today-tag text { fill: var(--ink); font-size: 11px; font-weight: 500; }
/* From today on, the chart is lightly tinted. */
.chart .future { fill: #ffffff; fill-opacity: 0.025; }
/* The gap between the lines: orange while expenses are above revenue, blue once revenue is. */
.chart .gap-loss { fill: var(--exp); fill-opacity: 0.07; }
.chart .gap-gain { fill: var(--rev); fill-opacity: 0.1; }
/* Break-even: a ring with a glow, a dashed drop to the time axis, and its date in white beside the ring. */
.chart .xdrop { stroke: #ffffff; stroke-opacity: 0.45; stroke-width: 1; stroke-dasharray: 3 4; }
.chart .halo stop { stop-color: #ffffff; }
.chart .xring { fill: var(--chart-bg); stroke: #ffffff; stroke-width: 2; }
.chart .xcore { fill: #ffffff; }
.chart .be-tag rect { fill: var(--accent); }
.chart .be-tag text { fill: var(--on-accent); font-weight: 600; }
.chart .xglow { fill: rgba(255, 255, 255, 0.16); stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.5; }
/* Cash runway: a red line where the cash would run out, hatched after it, and its date by the line. */
.chart .rw-line { stroke: var(--crit-ink); stroke-opacity: 0.8; stroke-width: 1.5; stroke-dasharray: 5 4; }
.chart .rw-hatch { stroke: var(--crit-ink); stroke-opacity: 0.16; stroke-width: 2; }
.chart .rw-tag rect { fill: var(--chart-bg); stroke: var(--crit-ink); stroke-opacity: 0.7; }
.chart .rw-tag text { fill: var(--crit-ink); font-size: 11px; font-weight: 600; }
.chart .pt-rev, .chart .pt-exp { stroke: var(--chart-bg); stroke-width: 2; }
.chart .pt-rev { fill: var(--rev); }
.chart .pt-exp { fill: var(--exp); }

/* Buttons: solid white for the main action, outlined for everything else. */
.btn, .btn-ghost { transition: background-color 0.15s, border-color 0.15s, transform 0.05s; }
.btn:hover { background: #ffffff; }
.btn:active, .btn-ghost:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.6; cursor: progress; }
.btn-ghost {
  font: inherit; font-size: 14px; font-weight: 500; color: var(--ink);
  background: transparent; border: 1px solid var(--line-2);
  border-radius: 8px; padding: 0 12px; min-height: 36px; cursor: pointer; white-space: nowrap;
}
.btn-ghost:hover { background: var(--hover); border-color: #343b45; }
.kbd {
  flex: none; margin-left: 10px; padding: 2px 8px;
  font-family: var(--font-mono); font-size: 12px; color: var(--muted);
  border: 1px solid var(--line-2); border-radius: 6px;
}
@media (max-width: 640px) { .kbd { display: none; } }
@media (prefers-reduced-motion: reduce) { .btn, .btn-ghost { transition: none; } }

/* Search results as tiles */
.q-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.q-tiles .co-card { cursor: pointer; padding: 10px 12px; border-radius: 10px; }
.q-tiles .co-card[aria-selected="true"] { border-color: rgba(255, 255, 255, 0.5); background: var(--raised); }
/* Companies matched by what they do: a row each, with the sentence that matched, its matching words in bold. */
.q-head { grid-column: 1 / -1; margin-top: 4px; padding: 0 2px; font-size: 12px; color: var(--muted); }
.q-tiles .co-card.about { grid-column: 1 / -1; }
.q-tiles .about .ds { margin-top: 3px; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.q-tiles .about mark { background: none; color: var(--ink); font-weight: 600; }
/* Results float over the page, so nothing below jumps while typing. */
.lookup-form { position: relative; }
.q-tiles {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40;
  padding: 10px; max-height: min(60vh, 420px); overflow-y: auto;
  background: rgba(16, 19, 24, 0.97);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid var(--line-2);
  border-radius: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}


/* Locked chart for visitors who haven't subscribed */
.locked {
  position: relative; margin-top: 14px; min-height: 300px; overflow: hidden;
  display: grid; place-items: center;
  background: var(--panel); border: 1px solid var(--hair); border-radius: 16px;
}
.locked-art { position: absolute; inset: 0; width: 100%; height: 100%; filter: blur(7px); opacity: 0.5; }
.locked-art path { fill: none; stroke-width: 8; }
.locked-cta { position: relative; display: grid; justify-items: center; gap: 10px; padding: 24px; }
/* What a subscription includes, above every Subscribe on the paywall. */
.perks { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 12px; width: min(100%, 400px); text-align: left; }
.perks li { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 12px; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.perks li::before {
  content: ""; grid-row: span 2; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.2 4.8-4.9' fill='none' stroke='%230a0c0f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.perks b { color: var(--ink); font-weight: 600; }
.perks-h { margin: 0; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; justify-self: start; }
.mark { width: 28px; height: 28px; flex: none; }
/* The mark: an orange x and a blue f on a dark tile. */
.mark .m-tile { fill: var(--raised); stroke: var(--axis); }
.mark .m-exp { fill: var(--brand-x); }
.mark .m-rev { fill: var(--brand-f); }
.wordmark { font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1; letter-spacing: -0.03em; }
.tagline { margin: 0; color: var(--ink-2); font-size: 16px; }

/* Search */
.lookup { display: grid; gap: 12px; }
.lookup-form { display: flex; flex-wrap: wrap; gap: 8px; }
.lookup-field {
  position: relative; flex: 1 1 280px; min-width: 0;
  display: flex; align-items: center;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px;
  padding: 0 14px; min-height: 52px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.lookup-field:focus-within { border-color: #4a525d; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06); }
.lookup-ic { width: 18px; height: 18px; color: var(--muted); flex: none; margin-right: 10px; }
.lookup-field input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font: inherit; font-size: 17px; color: var(--ink); padding: 12px 0;
}
.lookup-field input::placeholder { color: var(--muted); }
/* The main search: big enough to be the first thing people notice. */
.lookup-big .lookup-field { min-height: 60px; padding: 0 18px; }
.lookup-big .lookup-ic { width: 20px; height: 20px; margin-right: 14px; }
.lookup-big .lookup-field input { font-size: 18px; }
.lookup-big .btn { min-height: 60px; border-radius: 12px; padding: 0 28px; font-size: 17px; }
.is-home .lookup { margin-top: 8px; }
.btn {
  font: inherit; font-size: 15px; font-weight: 600;
  border: 0; border-radius: 10px; padding: 0 24px; min-height: 48px;
  background: var(--accent); color: var(--on-accent); cursor: pointer;
}
.q-list {
  position: absolute; left: -1px; right: -1px; top: calc(100% + 4px); z-index: 30;
  margin: 0; padding: 4px; list-style: none;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  max-height: 320px; overflow-y: auto;
}
.q-list li { display: flex; align-items: baseline; gap: 12px; padding: 9px 10px; border-radius: 6px; cursor: pointer; min-width: 0; }
.q-list li[aria-selected="true"], .q-list li:hover { background: var(--hover); }
.opt-ticker { font-family: var(--font-mono); font-weight: 600; min-width: 64px; flex: none; font-variant-numeric: tabular-nums; }
.opt-name { color: var(--ink-2); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lookup-msg { margin: 0; font-size: 14px; color: var(--ink-2); }
.lookup-msg[data-tone="error"] { color: var(--crit-ink); }
/* Home: the companies opened last, under the search. */
.q-try { display: none; }
body.on-home .q-try { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.q-try::before { flex: none; margin-right: 6px; font-size: 13px; color: var(--muted); }
#q-recent::before { content: "Last viewed"; }
@media (max-width: 640px) { .q-try::before { flex-basis: 100%; } }
.q-try a {
  display: inline-flex; align-items: center; min-height: 30px; padding: 0 11px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--ink-2); text-decoration: none;
  background: var(--surface); border: 1px solid var(--hair); border-radius: 7px;
  transition: color 0.15s, border-color 0.15s;
}
.q-try a:hover { color: var(--ink); border-color: var(--line-2); }
/* Most popular: a row of company cards that slides. */
.popular { display: none; }
body.on-home .popular { display: block; order: 6; margin-top: 20px; min-width: 0; } /* its row scrolls; it mustn't widen the page */
.carousel { position: relative; }
.pop-list { display: flex !important; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.pop-list::-webkit-scrollbar { display: none; }
.pop-list > li { flex: 0 0 min(306px, 78%); scroll-snap-align: start; }
body.on-home .popular:has(.pop-list:empty) { display: none; }
.pop-arrow { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); }
.pop-arrow.prev { left: -12px; }
.pop-arrow.next { right: -12px; }
@media (max-width: 640px) { .pop-arrow { display: none; } }
@media (prefers-reduced-motion: reduce) { .q-try a { transition: none; } }

/* Visitors on the home page: the year lists, blurred, under one Subscribe button. */
.by-year-box { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--hair); border-radius: 16px; }
.by-year-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px; padding: 24px; user-select: none; }
.by-year-col { display: grid; align-content: start; gap: 10px; min-width: 0; }
.by-year-y { font-family: var(--font-mono); font-size: 18px; font-weight: 600; opacity: 0.55; }
.by-year-row { font-family: var(--font-mono); font-size: 14px; white-space: nowrap; overflow: hidden; filter: blur(5px); opacity: 0.7; }
.by-year-row span { color: var(--muted); }
.by-year-box { display: grid; min-height: 380px; }
.by-year-box > * { grid-area: 1 / 1; } /* one cell, as .years.is-locked: the box grows to fit Subscribe */
.by-year-box > .locked-cta { align-content: center; background: rgba(10, 12, 15, 0.6); }
@media (max-width: 640px) { .by-year-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 18px; } .by-year-col:nth-child(n+3) { display: none; } }

/* List */
.list-view { display: grid; gap: 14px; min-width: 0; }
.list-head { display: grid; gap: 6px; }
.list-title { margin: 0; font-family: var(--font-display); font-size: clamp(24px, 3.6vw, 32px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; }
.list-sub { margin: 0; font-size: 14px; color: var(--ink-2); max-width: 72ch; }
.list-card { background: var(--surface); border: 1px solid var(--hair); border-radius: 12px; overflow-x: auto; }
.list { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.list th { text-align: right; font-size: 12px; font-weight: 600; color: var(--muted); padding: 11px 12px; border-bottom: 1px solid var(--hair); white-space: nowrap; }
.list td { text-align: right; padding: 9px 12px; border-bottom: 1px solid var(--hair); white-space: nowrap; }
.list tbody tr:last-child td { border-bottom: 0; }
.list th.l, .list td.l { text-align: left; }
.list tbody tr { cursor: pointer; }
.list tbody tr:hover { background: var(--hover); }
.list .rank { color: var(--muted); width: 1%; }
.list .co { display: flex; align-items: baseline; gap: 8px; color: inherit; text-decoration: none; }
.list .tkr { font-weight: 600; }
.list .nm { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; max-width: 30ch; }
.list td strong { font-weight: 600; }
@media (max-width: 640px) { .list .nm { max-width: 14ch; } }
.back { justify-self: start; font-size: 14px; color: var(--ink-2); text-decoration: none; margin-bottom: 6px; }
.back:hover { color: var(--ink); text-decoration: underline; }

/* Result */
.result { display: grid; gap: 4px; min-width: 0; transition: opacity 0.15s; }
/* Loading: a stand-in the size of what's coming, with a soft shimmer, so nothing jumps when it arrives. */
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.skel, .result.is-skel .chart-card {
  background-image: linear-gradient(100deg, transparent 35%, var(--hover) 50%, transparent 65%);
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
}
.skel { background-color: var(--raised); }
.result.is-skel .chart-card > *, .result.is-skel .info, .result.is-skel .hero-tabs { visibility: hidden; }
/* A year's top company is known before its figures: its name and description show meanwhile (nameChart). */
.result.is-skel.is-named .info { visibility: visible; }
.result.is-skel.is-named .info :is(.readout, .chip, .co-ind, .fav, .co-figs) { visibility: hidden; }
.skel-card { min-height: 110px; pointer-events: none; }
.skel-card .ph { box-shadow: none; }
.skel-line { display: block; width: 72%; height: 11px; margin: 4px 0; border-radius: 4px; }
.skel-line.short { width: 44%; }
@media (prefers-reduced-motion: reduce) { .skel, .result.is-skel .chart-card { animation: none; } }
.co-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
/* Logos sit on a white tile, so dark logos stay visible on the dark page. */
/* The company's logo in its card, or its ticker's first letters until (or unless) there is one: always the same
   size, so the card doesn't change shape when a logo arrives. */
.co-mark {
  position: relative; display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 10px;
  background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--ink); font-family: var(--font-mono); font-size: 13px; font-weight: 600;
}
.co-mark::before { content: attr(data-initials); }
.co-logo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  background: #ffffff; border-radius: inherit; padding: 6px;
}
.co-break { display: none; }
.co-name { margin: 0; font-family: var(--font-display); font-size: clamp(26px, 3vw, 30px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
.co-ticker { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--ink-2); border: 1px solid var(--axis); border-radius: 6px; padding: 0 7px; font-variant-numeric: tabular-nums; }
/* The company's industry, next to its ticker: a quiet link to the rest of that industry. */
.co-ind { font-size: 13px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.co-ind:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Browsing by industry: the list of industries, or one industry's companies. */
.industry { display: grid; gap: 14px; min-width: 0; }
.industry h1 { margin: 0; font-family: var(--font-display); font-size: clamp(24px, 3.6vw, 32px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.industry .year-head { margin-bottom: 0; }
.browse-lede { margin: 0; font-size: 14px; color: var(--ink-2); }
.browse-lede a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(125, 133, 144, 0.5); }
.browse-lede a:hover { text-decoration-color: currentColor; }
.ind-card .tkr { font-family: var(--font-body); font-size: 15px; }
.ind-card .ph svg { width: 18px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; }
/* Each industry's icon (src/industry-icons.ts) on a tile like a logo's, beside its name. */
.ind-mark {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px;
  color: var(--ink); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-2);
}
.ind-mark .ind-ic { width: 21px; height: 21px; }
.ind-head { align-items: center; }
.ind-head .ind-mark { width: 44px; height: 44px; margin-right: 2px; }
.ind-head .ind-mark .ind-ic { width: 24px; height: 24px; }
/* Favourites: a star on the chart, and the starred companies first on the home page. */
.fav {
  display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; flex: none;
  background: transparent; color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 8px; cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.fav:hover { color: var(--ink); border-color: #343b45; }
.fav svg { width: 16px; height: 16px; }
.fav[aria-pressed="true"] { color: var(--star); border-color: rgba(245, 184, 61, 0.35); }
.fav[aria-pressed="true"] svg path { fill: currentColor; }
.co-card .st { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; }
/* Share: on every chart; a tick for a moment once the link is copied. */
.share { display: none; }
body.is-chart .share, body.is-hero .share { display: inline-grid; }
.share .ic-done, .share.done .ic-share { display: none; }
.share.done .ic-done { display: block; }
.share.done { color: var(--ink); border-color: rgba(255, 255, 255, 0.45); }
/* Embed this chart: on a company's own page only, not the large chart on the home and year pages. */
body.is-hero .embed, body.is-board .embed { display: none; }
/* On a year page, the top company's chart opens in full view like the cards below it. */
.expand { display: none; text-decoration: none; }
body.is-hero:not(.on-home) .expand { display: inline-grid; }
/* Hovering a company card on a computer: a small chart of its lines. */
.mini {
  position: fixed; z-index: 45; left: 0; top: 0; width: 260px; padding: 10px 12px 6px; pointer-events: none;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
  opacity: 0; transform: translateY(4px); transition: opacity 0.12s, transform 0.12s;
}
.mini.show { opacity: 1; transform: none; }
/* Cards in a row are the same height, with the chart at the bottom whatever the name's length. */
.cos > li { display: flex; }
.cos > li > .co-card { flex: 1 1 auto; }
.co-card.has-spark { flex-wrap: wrap; align-items: center; align-content: space-between; row-gap: 14px; }
.co-card .spark { flex-basis: 100%; aspect-ratio: 280 / 80; } /* the drawn chart's shape, so the card doesn't grow when it's drawn */
.co-card .spark svg { display: block; width: 100%; height: auto; overflow: visible; }
@media (max-width: 640px) {
  .year-head h2, .hero-title { font-size: 19px; }
  .year-head span { flex-basis: 100%; }
  body.is-hero .fav, body.is-chart .fav { width: 30px; height: 30px; }
  body.is-hero .co-line, body.is-chart .co-line { gap: 4px 8px; }
  .page { gap: 24px; }
}
.mini svg { display: block; width: 100%; height: auto; overflow: visible; }
.mini text { font-family: var(--font-mono); font-size: 10px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.mini .grid { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }
.mini .base { stroke: var(--axis); stroke-width: 1; shape-rendering: crispEdges; }
.mini .l-rev, .mini .l-exp, .spark .l-rev, .spark .l-exp { stroke-width: 2; }
.tiny .l-rev, .tiny .l-exp { stroke-width: 1.75; }
.mini .ring { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.mini text.xyear { fill: var(--ink); font-size: 11px; font-weight: 600; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.spark .xdot, .tiny .xdot { fill: #ffffff; stroke: none; }
.spark .xdot-past, .tiny .xdot-past { fill: var(--surface); stroke: var(--ink); stroke-width: 1.5; }
@media (prefers-reduced-motion: reduce) { .mini { transition: none; } }
/* One sentence on what the company does. */
.co-desc { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); max-width: 60ch; }
body.is-chart .co-desc { font-size: 14px; }
.co-card .ds { font-size: 12.5px; line-height: 1.35; color: var(--muted); margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.chart-card {
  margin: 14px 0 0;
  background: var(--panel); border: 1px solid var(--hair); border-radius: 14px;
  padding: 16px 16px 10px;
  min-width: 0;
}
@media (max-width: 520px) { .chart-card { padding: 12px 10px 8px; } }
.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; color: var(--ink-2); margin-bottom: 4px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.key { width: 14px; height: 2px; border-radius: 1px; flex: none; }
.key-rev { background: var(--rev); }
.key-exp { background: var(--exp); }

/* A precise + pointer over the plot for reading values; the closed hand while dragging; the arrow over the scales. */
.chart { position: relative; touch-action: pan-y; cursor: crosshair; outline: none; border-radius: 6px; }
/* Touch: holding a finger on the chart reads it, so no text selection, callout or tap flash. */
.chart { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.chart.on-scale { cursor: default; }
.chart:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart text { font-family: var(--font-mono); font-size: 11.5px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.chart .grid { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }
.chart .base, .chart .tick { stroke: var(--axis); stroke-width: 1; shape-rendering: crispEdges; }
.l-rev, .l-exp { fill: none; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.chart .l-rev, .chart .l-exp { stroke-width: 2.5; }
.l-rev { stroke: var(--rev); }
.l-exp { stroke: var(--exp); }
/* The projection: a solid line in the same colour, fainter, fading out towards its end. */
.l-proj { stroke-linecap: butt; }
.chart .l-proj { stroke-width: 2.25; }
.fade-rev stop { stop-color: var(--rev); }
.fade-exp stop { stop-color: var(--exp); }
.chart .divider { stroke: var(--axis); stroke-width: 1; }
.chart text.zone { fill: var(--muted); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.xdot, .xdot-past { stroke-width: 2; }
.xdot { fill: var(--ink); stroke: var(--surface); }
.xdot-past { fill: var(--surface); stroke: var(--ink); }
.chart text.xlabel {
  fill: var(--ink); font-weight: 600; font-size: 12.5px;
  paint-order: stroke; stroke: var(--surface); stroke-width: 5px; stroke-linejoin: round;
}
.key-solid { background: var(--ink-2); }
.key-dash { height: 0; border-top: 2px dashed var(--ink-2); border-radius: 0; }
.d-rev, .d-exp { stroke: #ffffff; stroke-width: 2; }
.d-rev { fill: var(--rev); }
.d-exp { fill: var(--exp); }
.leader { stroke: var(--axis); stroke-width: 1; }
.hline { stroke: var(--ink); stroke-width: 1; opacity: 0.3; }
.chart text.end-name { fill: var(--muted); }
.chart text.end-val { fill: var(--ink); font-weight: 600; font-size: 12.5px; }

.source { margin: 12px 0 0; font-size: 13.5px; color: var(--ink-2); max-width: 74ch; }
.source a { color: var(--ink-2); }

.tip {
  position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none;
  background: var(--tip-bg); color: var(--tip-ink); border: 1px solid var(--line-2);
  border-radius: 8px; padding: 10px 12px 9px; min-width: 170px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  font-size: 12.5px; line-height: 1.35;
}
.tip-head { font-weight: 600; margin-bottom: 6px; }
.tip-row { display: grid; grid-template-columns: 14px auto 1fr; align-items: center; gap: 8px; padding: 1.5px 0; }
.tip-val { font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.tip-name { color: var(--tip-ink-2); }
.tk { width: 14px; height: 2px; border-radius: 1px; }
.tk-rev { background: var(--rev); }
.tk-exp { background: var(--exp); }

/* Board: a subscriber's favourites side by side, filling the screen, in a grid they pick. */
.board-open {
  display: inline-flex; align-items: center; gap: 8px; margin-left: auto; min-height: 34px; padding: 0 12px;
  font-size: 13.5px; font-weight: 500; color: var(--ink); text-decoration: none;
  border: 1px solid var(--line-2); border-radius: 8px;
}
.board-open:hover { background: var(--hover); border-color: #343b45; }
.board-open svg, .layouts svg { width: 18px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.board { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; }
body.is-board .board {
  position: fixed; z-index: 1;
  top: calc(var(--bar-bottom, 64px) + 12px);
  left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px));
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
}
.board-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-width: 0; }
.layouts { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface); border: 1px solid var(--hair); border-radius: 10px; }
.layouts button { display: grid; place-items: center; width: 36px; height: 28px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; }
.layouts button:hover { color: var(--ink); background: var(--hover); }
.layouts button[aria-pressed="true"] { color: var(--ink); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-2); }
.board-more { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; color: var(--muted); }
.board-chip {
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; color: var(--ink); cursor: grab;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 7px; padding: 3px 10px;
}
.board-chip:hover { border-color: #343b45; }
/* Compare: the box that adds a company to the comparison. */
.cmp-form { flex: 0 1 300px; min-width: 0; }
.cmp-field { min-height: 36px; padding: 0 10px; border-radius: 9px; flex-basis: auto; }
.cmp-field .lookup-ic { width: 16px; height: 16px; margin-right: 8px; }
.cmp-field input { font-size: 14px; padding: 6px 0; }
.board-grid { display: grid; gap: 10px; min-height: 0; grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.board-grid[data-n="2"] { grid-template: minmax(0, 1fr) / repeat(2, minmax(0, 1fr)); }
.board-grid[data-n="3"] { grid-template: minmax(0, 1fr) / repeat(3, minmax(0, 1fr)); }
.board-grid[data-n="4"] { grid-template: repeat(2, minmax(0, 1fr)) / repeat(2, minmax(0, 1fr)); }
.board-grid[data-n="6"] { grid-template: repeat(2, minmax(0, 1fr)) / repeat(3, minmax(0, 1fr)); }
.cell {
  display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 6px; min-width: 0; min-height: 0;
  padding: 10px 4px 4px 12px; background: var(--surface); border: 1px solid var(--hair); border-radius: 14px;
  transition: border-color 0.12s, box-shadow 0.12s, opacity 0.12s;
}
.cell.drop-on { border-color: rgba(255, 255, 255, 0.6); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12); }
.cell.dragged { opacity: 0.45; }
.cell-head { display: flex; align-items: center; gap: 8px; min-width: 0; padding-right: 6px; cursor: grab; }
.cell-head img { width: 26px; height: 26px; flex: none; object-fit: contain; background: #ffffff; border-radius: 7px; padding: 3px; }
.cell-head img.on-dark { background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-2); }
.cell-tkr { font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.cell-nm { flex: 1 1 0; min-width: 0; font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-chip { position: absolute; z-index: 2; top: 4px; left: 6px; max-width: calc(100% - 90px); overflow: hidden; text-overflow: ellipsis; font-size: 11px; padding: 0 7px; white-space: nowrap; background: var(--surface); }
.cell .chip.is-cross.lit { background: color-mix(in srgb, #ffffff 8%, var(--surface)); }
.cell .fav { width: 28px; height: 28px; }
.cell .fav svg { width: 14px; height: 14px; }
.cell .readout { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; font-size: 11.5px; gap: 4px 10px; }
.cell .readout b { min-width: 5.6em; }
.cell .readout .ro-when { min-width: 12em; }
.cell-plot { position: relative; min-height: 0; }
.cell-plot .chart { position: absolute; inset: 0; }
.cell-note { grid-row: 1 / -1; align-self: center; justify-self: center; padding: 16px; text-align: center; font-size: 13.5px; color: var(--muted); }
.cell.is-empty { background: transparent; border: 1.5px dashed var(--axis); }
@media (max-width: 640px) {
  /* Phones: one chart under another, all of them, scrolling with the page. */
  body.is-board .board { position: static; display: block; padding: calc(var(--bar-bottom, 60px) + 10px) 10px 24px; }
  /* Only Compare's add box is left in the tools; a 16px box so phones don't zoom in on it. */
  body:not(.is-compare) .board-tools, .board-tools .layouts, .board-tools .ranges { display: none !important; }
  .cmp-form { flex: 1 1 auto; margin-bottom: 10px; }
  .cmp-field input { font-size: 16px; }
  .board-grid, .board-grid[data-n] { grid-template: none; grid-auto-rows: 330px; }
  .cell-head { cursor: default; }
  .cell .readout { flex-wrap: wrap; white-space: normal; gap: 2px 12px; }
  .cell .readout .ro-when { min-width: 0; flex-basis: 100%; }
  body.is-board .chart { touch-action: pan-y; }
}
@media (prefers-reduced-motion: reduce) { .cell { transition: none; } }

.footnote { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); max-width: 72ch; }

/* A company's share image (?share): the logo, the company card and the chart, nothing to click. */
body.is-share .lookup, body.is-share .account, body.is-share .yr-tabs, body.is-share .fav, body.is-share .edge-glow, body.is-share .co-ind, body.is-share .co-figs { display: none !important; }

@media (prefers-reduced-motion: reduce) { .result { transition: none; } }