:root {
  color-scheme: light;
  --ink: #18221f;
  --ink-soft: #59655f;
  --paper: #f5f6f2;
  --card: #fdfdfa;
  --line: #dfe3dc;
  --line-strong: #cbd1c9;
  --blue: #2f6fed;
  --purple: #635bff;
  --green: #419337;
  --red: #e44335;
  --shadow: 0 18px 50px rgba(27, 42, 36, 0.055);
  /* Wide enough that the longest names — Berkshire Hathaway, Schneider
     Electric — clear the logo column without truncating. */
  --sidebar-width: 254px;
  --header-height: 58px;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--paper);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background:
    linear-gradient(rgba(30, 51, 43, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 51, 43, 0.026) 1px, transparent 1px),
    var(--paper);
  background-size: 32px 32px;
  color: var(--ink);
  font-family:
    Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  -webkit-font-smoothing: antialiased;
}

button {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(47, 111, 237, 0.24);
  outline-offset: 2px;
}

/* Spans both columns and outranks the sidebar, which is sticky in its own
   right and would otherwise slide over the bar. */
.site-header {
  position: sticky;
  z-index: 30;
  top: 0;
  display: flex;
  height: var(--header-height);
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(253, 253, 250, 0.95);
  align-items: center;
  gap: 16px;
  backdrop-filter: blur(14px);
}

/* Spread across whatever the wordmark leaves, so the links carry the width of
   the bar rather than bunching at one end. The gap is a floor for when the
   header is too narrow to spread and the nav starts scrolling instead. */
.site-nav {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

.site-nav::-webkit-scrollbar {
  display: none;
}

/* Each link takes an equal share of the bar and centres in it, so the labels
   sit on a regular rhythm despite running from twelve to twenty-eight
   characters. min-width holds a slot to its text, so a bar too narrow to
   divide scrolls rather than squashing the longest label. */
.site-nav-link {
  flex: 1 1 0;
  min-width: max-content;
  padding: 7px 9px;
  border-radius: 6px;
  color: #66736d;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition:
    color 150ms ease,
    background 150ms ease;
}

/* The page you are on wears the same grey the others take on hover, so the
   bar has one visual idea rather than two. */
.site-nav-link:hover,
.site-nav-link.is-current {
  background: #f1f3ef;
  color: var(--ink);
}

/* Sits at the far end of the bar, opposite the wordmark, with the nav
   spreading across whatever is left between them. */
.site-account {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.site-account-login,
.site-account-signup {
  min-height: 32px;
  padding: 0 11px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  transition:
    background 150ms ease,
    border-color 150ms ease,
    color 150ms ease;
}

.site-account-login {
  border: 1px solid transparent;
  background: transparent;
  color: #66736d;
}

.site-account-login:hover {
  background: #f1f3ef;
  color: var(--ink);
}

.site-account-signup {
  border: 1px solid var(--blue);
  background: var(--blue);
  color: #ffffff;
}

.site-account-signup:hover {
  border-color: #1f5ad4;
  background: #1f5ad4;
}

.app-frame {
  display: grid;
  min-height: calc(100vh - var(--header-height));
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}

.watchlist-sidebar {
  position: sticky;
  z-index: 20;
  top: var(--header-height);
  display: flex;
  height: calc(100vh - var(--header-height));
  min-height: 520px;
  padding: 18px 15px 18px;
  border-right: 1px solid var(--line);
  background: rgba(253, 253, 250, 0.95);
  box-shadow: 10px 0 30px rgba(22, 38, 31, 0.025);
  flex-direction: column;
  backdrop-filter: blur(14px);
}

/* A mixed-case wordmark, so it carries far less tracking than the spaced
   uppercase lockup it replaced. */
.brand {
  display: inline-flex;
  width: max-content;
  flex: 0 0 auto;
  color: var(--ink);
  font-size: 17px;
  font-weight: 850;
  letter-spacing: -0.005em;
  text-decoration: none;
  align-items: center;
  gap: 9px;
}

/* Intrinsically square, so the height drives it and the width follows. */
.brand-mark {
  width: auto;
  height: 23px;
}

/* Sized to match .company-tab so the field and the rows below it share one
   silhouette down the rail. */
.watchlist-search {
  position: relative;
  display: flex;
  margin: 0 0 10px;
  align-items: center;
}

.watchlist-search-icon {
  position: absolute;
  left: 14px;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: #86908b;
  stroke-width: 1.6;
  stroke-linecap: round;
  pointer-events: none;
}

.watchlist-search-input {
  width: 100%;
  min-height: 48px;
  padding: 8px 38px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 620;
  transition:
    border-color 150ms ease,
    background 150ms ease;
}

.watchlist-search-input::placeholder {
  color: #98a19c;
}

.watchlist-search-input:focus {
  border-color: var(--line-strong);
  background: #ffffff;
  outline: none;
}

/* The clear affordance is drawn by the icon slot, not the UA control. */
.watchlist-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.watchlist-clear {
  position: absolute;
  right: 12px;
  display: inline-flex;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid #cbd1c9;
  border-radius: 50%;
  background: transparent;
  color: #86908b;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.watchlist-clear:hover {
  color: var(--ink);
}

.watchlist-clear[hidden] {
  display: none;
}

.watchlist-clear svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.7;
}

.watchlist-empty {
  margin: 6px 11px;
  color: #86908b;
  font-size: 11px;
}

.company-watchlist {
  flex: 1;
  min-height: 0;
  padding: 2px 0 10px;
  overflow-y: auto;
  scrollbar-color: #c5cbc4 transparent;
  scrollbar-width: thin;
}

.company-tab {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 60px;
  padding: 9px 10px 9px 13px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  text-align: left;
  transition:
    background 150ms ease,
    border-color 150ms ease,
    color 150ms ease;
}

.company-tab::before {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 4px;
  width: 3px;
  border-radius: 3px;
  background: transparent;
  content: "";
}

.company-tab:hover {
  background: #f1f3ef;
}

.company-tab.is-active {
  border-color: #dfe6f8;
  background: #edf2ff;
  color: #184fae;
}

.company-tab.is-active::before {
  background: var(--blue);
}

/* Logos arrive at anything from 100px to 250px, some transparent and some with
   a solid background of their own, so every one sits in an identical box and is
   contained rather than cropped. Without the box the opaque tiles read as
   stickers next to the transparent marks. */
.company-logo {
  display: inline-flex;
  overflow: hidden;
  border-radius: 7px;
  background: #ffffff;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.company-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* White-on-transparent marks need the contrast inverted or they vanish. */
.company-logo.is-dark-tile {
  background: #141917;
}

/* Stands in until a logo has been fetched for a newly added company. */
.company-logo.is-monogram {
  background: #f1f3ef;
  color: #7b857f;
  font-weight: 800;
}

.company-logo-tab {
  width: 36px;
  height: 36px;
  padding: 3px;
  font-size: 15px;
}

.company-logo-hero {
  width: 62px;
  height: 62px;
  padding: 5px;
  border-radius: 12px;
  font-size: 26px;
}

/* The name carries the row on its own here, so it takes the weight the ticker
   used to have. Colour is inherited so the active state applies once. */
.company-tab span {
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-frame {
  min-width: 0;
}

.page-shell {
  width: min(1500px, calc(100% - 64px));
  margin: 0 auto;
  padding: 50px 0 31px;
}

.company-hero {
  display: flex;
  margin-bottom: 18px;
  align-items: center;
  gap: 18px;
}

.eyebrow {
  margin: 0 0 10px;
  color: #748079;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.15em;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}

h2 {
  margin-bottom: 7px;
  font-size: 23px;
  font-weight: 720;
  letter-spacing: -0.025em;
}

.metric-switcher {
  display: flex;
  width: max-content;
  max-width: 100%;
  margin-bottom: 13px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(253, 253, 250, 0.84);
  box-shadow: 0 7px 20px rgba(27, 42, 36, 0.035);
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
}

.metric-button {
  min-height: 34px;
  padding: 0 15px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #66736d;
  cursor: pointer;
  font-size: 11px;
  font-weight: 730;
  transition:
    color 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease;
}

.metric-button:hover {
  color: var(--ink);
}

.metric-button.is-selected {
  background: #dfe3df;
  box-shadow: inset 0 0 0 1px #d4d9d4;
  color: #303a36;
}

.chart-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.chart-header {
  display: flex;
  min-height: 92px;
  padding: 23px 26px 16px;
  border-bottom: 1px solid #eceee9;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.chart-header > div {
  min-width: 0;
}

.chart-header h2 {
  margin-bottom: 5px;
}

.chart-header > div > p:last-child {
  margin-bottom: 0;
  color: #89938e;
  font-size: 11px;
}

.chart-download {
  display: inline-flex;
  min-height: 28px;
  padding: 0 11px;
  border: 0;
  border-radius: 5px;
  background: #ffffff;
  color: #66736d;
  cursor: pointer;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.07em;
  align-items: center;
  flex: 0 0 auto;
  gap: 6px;
}

.chart-download[hidden] {
  display: none;
}

.chart-download:disabled {
  cursor: default;
  opacity: 0.45;
}

.chart-download svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.chart-stage {
  position: relative;
}

.financial-chart {
  width: 100%;
  min-height: 730px;
  padding: 7px 11px 0;
  user-select: none;
}

.chart-note {
  margin: 0;
  padding: 12px 26px 15px;
  border-top: 1px solid #eceee9;
  color: #8b958f;
  font-size: 9px;
  text-align: right;
}

.source-footer {
  display: flex;
  padding: 23px 2px 0;
  color: #838e88;
  font-size: 9px;
  justify-content: space-between;
  gap: 24px;
}

.source-footer p {
  margin-bottom: 0;
}

.source-footer a {
  color: inherit;
  font-weight: 730;
}

.loading-state,
.error-state {
  position: fixed;
  z-index: 50;
  right: 24px;
  bottom: 24px;
  display: flex;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--card);
  box-shadow: var(--shadow);
  color: var(--ink-soft);
  font-size: 12px;
  align-items: center;
  gap: 10px;
}

.loading-state span {
  width: 13px;
  height: 13px;
  border: 2px solid #cdd3cd;
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

.error-state {
  max-width: 350px;
  border-color: #efc6c0;
  flex-direction: column;
  align-items: flex-start;
}

.error-state[hidden] {
  display: none;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 980px) {
  :root {
    --sidebar-width: 92px;
  }

  .watchlist-sidebar {
    padding-right: 8px;
    padding-left: 8px;
  }

  /* The header keeps the full page width, so the wordmark stays; it is the
     rail beside it that has no room for names. */
  .site-header {
    padding: 0 12px;
    gap: 14px;
  }

  .company-tab span,
  .data-link span {
    display: none;
  }

  /* The narrow rail has no room for a text field, so the input collapses to
     the magnifier and expands on focus. */
  .watchlist-search-icon {
    left: 50%;
    transform: translateX(-50%);
  }

  .watchlist-search-input {
    padding-right: 7px;
    padding-left: 7px;
  }

  .watchlist-search-input::placeholder {
    color: transparent;
  }

  .company-tab {
    display: flex;
    padding: 7px;
    justify-content: center;
  }

  /* With the name hidden the rail becomes a column of logos, so the mark grows
     to carry the row on its own. */
  .company-logo-tab {
    width: 30px;
    height: 30px;
    font-size: 13px;
  }

  .data-link {
    justify-content: center;
  }

  .page-shell {
    width: min(100% - 36px, 1500px);
    padding-top: 38px;
  }

  .company-hero {
    align-items: flex-start;
    flex-direction: column;
  }

}

@media (max-width: 660px) {
  :root {
    --sidebar-width: 76px;
  }

  .watchlist-sidebar {
    padding-right: 6px;
    padding-left: 6px;
  }

  .company-tab {
    min-height: 43px;
  }

  .page-shell {
    width: min(100% - 22px, 1500px);
    padding-top: 27px;
  }

  h1 {
    font-size: 42px;
  }

  .metric-switcher {
    width: 100%;
    overflow-x: auto;
  }

  .metric-button {
    min-width: max-content;
    padding: 0 11px;
  }

  .chart-header {
    min-height: 0;
    padding-right: 18px;
    padding-left: 18px;
    align-items: flex-start;
  }

  .financial-chart {
    min-height: 680px;
    padding-right: 0;
    padding-left: 0;
  }

  .chart-note {
    padding-right: 18px;
    padding-left: 18px;
    text-align: left;
  }

  .source-footer {
    flex-direction: column;
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}