/* UnannouncedVC. Tokens, base, inner-page bar, buttons and menus, home (banner, profile, timeline), inner pages,
   components, responsive.
   Brand: a quiet ledger with a highlighter. Warm paper and ink, an editorial serif for names, headlines and big
   numbers, a mono for dates and figures, one cobalt that marks what is still unannounced, and a lime highlighter
   stroke behind the amounts that matter. Color carries meaning only for announcement status and chart series. */

:root {
  color-scheme: light;
  --bg: #fbf9f4;
  --surface: #ffffff;
  --surface-2: #f6f3ec;
  --surface-3: #efebe1;
  --border: #e6e1d5;
  --border-strong: #d3cdbd;
  --ink: #17160f;
  --ink-2: #46443b;
  --ink-3: #6c695f;
  --accent: #3538cd;
  --accent-hover: #2a2ca6;
  --accent-soft: #ecedfb;
  --accent-line: #c9cbf3;
  --link: #3538cd;
  --live: #3f8f3a;
  --highlight: #d6f56a;
  --pill-bg: #17160f;
  --pill-ink: #fbf9f4;
  --pill-hover: #34332a;
  --topbar: rgba(251, 249, 244, 0.88);
  --banner-bg: #17160f;
  --banner-ink: #fbf9f4;
  --banner-muted: rgba(251, 249, 244, 0.62);
  --banner-bar: rgba(251, 249, 244, 0.12);
  --banner-recent: #d6f56a;
  /* chart series: muted navy + amber, validated (lightness band, chroma, CVD, contrast) */
  --s1: #2f5ea8;
  --s2: #b06a2c;
  --grid: #ece8dd;
  --axis: #d3cdbd;
  --tick: #6c695f;
  /* announcement status: cobalt for unannounced (the brand's own color), olive for announced, amber for unclear */
  --ann-no-ink: #3538cd; --ann-no-bg: #ecedfb; --ann-no-line: #c9cbf3; --ann-no-bar: #8b8ef0; --ann-no-tint: rgba(53, 56, 205, 0.045);
  --ann-yes-ink: #3f6212; --ann-yes-bg: #eef5e2; --ann-yes-line: #cfe2b3; --ann-yes-bar: #9cc26a; --ann-yes-tint: rgba(63, 98, 18, 0.03);
  --ann-unclear-ink: #92400e; --ann-unclear-bg: #fbf0e3; --ann-unclear-line: #efd3b3; --ann-unclear-bar: #e0a36a; --ann-unclear-tint: rgba(146, 64, 14, 0.035);
  --hover-overlay: rgba(23, 22, 15, 0.028);
  --shadow-md: 0 14px 36px -14px rgba(23, 22, 15, 0.28);
  --page: 1100px;
  --home: 1040px; /* the home page's centered column: wide posts, with margin on both sides */
  --gutter: 28px; /* inner padding of that column */
  --radius-lg: 18px;
  --radius: 12px;
  --radius-sm: 8px;
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #11100c; --surface: #17160f; --surface-2: #1c1b15; --surface-3: #25231c;
    --border: #2d2b22; --border-strong: #3c392e;
    --ink: #efebe1; --ink-2: #cdc8bb; --ink-3: #a09b8e;
    --accent: #9ea3ff; --accent-hover: #b9bcff; --accent-soft: rgba(158, 163, 255, 0.12); --accent-line: rgba(158, 163, 255, 0.3); --link: #a9adff;
    --live: #7cc06f; --highlight: rgba(214, 245, 106, 0.3);
    --pill-bg: #efebe1; --pill-ink: #11100c; --pill-hover: #d9d4c7; --topbar: rgba(17, 16, 12, 0.86);
    --banner-bg: #0a0a07; --banner-ink: #efebe1; --banner-muted: rgba(239, 235, 225, 0.6); --banner-bar: rgba(239, 235, 225, 0.11); --banner-recent: #d6f56a;
    --s1: #5484d2; --s2: #c4843f; --grid: #26241d; --axis: #3c392e; --tick: #a09b8e;
    --ann-no-ink: #a9adff; --ann-no-bg: rgba(140, 145, 255, 0.14); --ann-no-line: rgba(140, 145, 255, 0.32); --ann-no-bar: #6f73e0; --ann-no-tint: rgba(140, 145, 255, 0.075);
    --ann-yes-ink: #b8da8e; --ann-yes-bg: rgba(150, 200, 100, 0.13); --ann-yes-line: rgba(150, 200, 100, 0.3); --ann-yes-bar: #6f9a45; --ann-yes-tint: rgba(150, 200, 100, 0.045);
    --ann-unclear-ink: #efb87f; --ann-unclear-bg: rgba(240, 170, 100, 0.13); --ann-unclear-line: rgba(240, 170, 100, 0.3); --ann-unclear-bar: #b9783f; --ann-unclear-tint: rgba(240, 170, 100, 0.05);
    --hover-overlay: rgba(255, 255, 255, 0.03);
    --shadow-md: 0 16px 40px -14px rgba(0, 0, 0, 0.75);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #11100c; --surface: #17160f; --surface-2: #1c1b15; --surface-3: #25231c;
  --border: #2d2b22; --border-strong: #3c392e;
  --ink: #efebe1; --ink-2: #cdc8bb; --ink-3: #a09b8e;
  --accent: #9ea3ff; --accent-hover: #b9bcff; --accent-soft: rgba(158, 163, 255, 0.12); --accent-line: rgba(158, 163, 255, 0.3); --link: #a9adff;
  --live: #7cc06f; --highlight: rgba(214, 245, 106, 0.3);
  --pill-bg: #efebe1; --pill-ink: #11100c; --pill-hover: #d9d4c7; --topbar: rgba(17, 16, 12, 0.86);
  --banner-bg: #0a0a07; --banner-ink: #efebe1; --banner-muted: rgba(239, 235, 225, 0.6); --banner-bar: rgba(239, 235, 225, 0.11); --banner-recent: #d6f56a;
  --s1: #5484d2; --s2: #c4843f; --grid: #26241d; --axis: #3c392e; --tick: #a09b8e;
  --ann-no-ink: #a9adff; --ann-no-bg: rgba(140, 145, 255, 0.14); --ann-no-line: rgba(140, 145, 255, 0.32); --ann-no-bar: #6f73e0; --ann-no-tint: rgba(140, 145, 255, 0.075);
  --ann-yes-ink: #b8da8e; --ann-yes-bg: rgba(150, 200, 100, 0.13); --ann-yes-line: rgba(150, 200, 100, 0.3); --ann-yes-bar: #6f9a45; --ann-yes-tint: rgba(150, 200, 100, 0.045);
  --ann-unclear-ink: #efb87f; --ann-unclear-bg: rgba(240, 170, 100, 0.13); --ann-unclear-line: rgba(240, 170, 100, 0.3); --ann-unclear-bar: #b9783f; --ann-unclear-tint: rgba(240, 170, 100, 0.05);
  --hover-overlay: rgba(255, 255, 255, 0.03);
  --shadow-md: 0 16px 40px -14px rgba(0, 0, 0, 0.75);
}

/* ---- base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font);
  font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; font-feature-settings: "cv11";
  min-height: 100vh; display: flex; flex-direction: column;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
h1, h2, h3 { margin: 0; color: var(--ink); }
h1 { font-family: var(--serif); font-size: 42px; line-height: 1.05; font-weight: 400; letter-spacing: -0.01em; }
h2 { font-size: 15px; line-height: 1.35; font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: 13px; font-weight: 600; }
p { margin: 0; }
button, input, select { font: inherit; color: inherit; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--highlight); color: var(--ink); }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon { flex: none; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.mono { font-family: var(--mono); font-size: 12px; }
.show-sm, .show-md { display: none; }
.pfp { display: block; flex: none; border-radius: 50%; object-fit: cover; background: var(--surface-3); }
.wrap { width: 100%; max-width: var(--page); margin: 0 auto; padding-inline: 28px; padding-block: 32px 64px; flex: 1 0 auto; outline: none; transition: opacity 0.15s ease; }
.wrap.loading { opacity: 0.5; }
/* The home page is the profile itself: no bar above it and no page padding around the banner. */
.is-home .wrap { max-width: none; padding: 0 0 48px; }
/* The highlighter stroke: a lime band across the lower half of the text, as if marked by hand. */
.hl { background: linear-gradient(transparent 55%, var(--highlight) 55%, var(--highlight) 92%, transparent 92%); padding: 0 2px; margin: 0 -1px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---- slim bar on inner pages ---- */
.subbar {
  position: sticky; top: 0; z-index: 20; background: var(--topbar); border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: saturate(1.3) blur(12px); backdrop-filter: saturate(1.3) blur(12px);
}
.subbar-inner { max-width: var(--page); margin: 0 auto; padding-inline: 28px; height: 62px; display: flex; align-items: center; gap: 12px; }
.subbar-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); min-width: 0; }
.subbar-brand:hover { text-decoration: none; }
.subbar-brand .pfp { width: 34px; height: 34px; }
.subbar-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.subbar-text b { font-family: var(--serif); font-size: 21px; font-weight: 400; white-space: nowrap; }
.subbar-text span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.subbar-nav { margin-left: auto; display: flex; gap: 2px; }
.subbar-nav a { padding: 7px 12px; border-radius: 999px; color: var(--ink-2); font-size: 14px; font-weight: 500; white-space: nowrap; }
.subbar-nav a:hover { background: var(--surface-3); color: var(--ink); text-decoration: none; }
.subbar-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; background: var(--surface-3); }

/* ---- pill and circle buttons, menus ---- */
.btn-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 18px; border-radius: 999px;
  font-weight: 600; font-size: 14px; white-space: nowrap; border: 1px solid transparent; cursor: pointer; transition: background 0.12s, transform 0.12s;
}
.btn-pill:hover { text-decoration: none; }
.btn-pill:active { transform: translateY(1px); }
.btn-pill.solid { background: var(--pill-bg); color: var(--pill-ink); }
.btn-pill.solid:hover { background: var(--pill-hover); }
.btn-pill.ghost { background: var(--surface); color: var(--ink); border-color: var(--border-strong); }
.btn-pill.ghost:hover { background: var(--surface-3); }
.circle-btn {
  width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); list-style: none;
}
.circle-btn:hover { background: var(--surface-3); text-decoration: none; }
.circle-btn::-webkit-details-marker { display: none; }
.menu { position: relative; }
.menu-list {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 230px; padding: 6px 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-md);
}
.menu-item {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 16px; border: 0; background: none;
  color: var(--ink); font-size: 14.5px; font-weight: 500; text-align: left; cursor: pointer; white-space: nowrap;
}
.menu-item:hover { background: var(--surface-2); text-decoration: none; }
.menu-item .icon { color: var(--ink-3); }
.menu-sep { height: 1px; margin: 6px 0; background: var(--border); }

/* ---- home: banner ---- */
.banner { position: relative; height: 250px; background: var(--banner-bg); overflow: hidden; }
.banner svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 48%; }
.banner .bar { fill: var(--banner-bar); }
.banner .bar.recent { fill: var(--banner-recent); }
.banner-copy { position: absolute; top: 0; left: 0; right: 0; max-width: var(--home); margin: 0 auto; padding: 34px var(--gutter) 0; pointer-events: none; }
.banner-tagline { font-family: var(--serif); font-style: italic; font-size: 48px; line-height: 1; color: var(--banner-ink); letter-spacing: -0.01em; }
.banner-caption { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin-top: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--banner-muted); }
.banner-caption .key { display: inline-flex; align-items: center; gap: 8px; }
.banner-caption i { width: 16px; height: 8px; border-radius: 2px; background: var(--banner-recent); }

/* ---- home: profile ---- */
.profile-wrap { max-width: var(--home); margin: 0 auto; }
.profile { padding: 0 var(--gutter); }
.profile-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.profile-pfp { width: 136px; height: 136px; margin-top: -68px; border: 5px solid var(--bg); position: relative; box-shadow: 0 6px 20px -8px rgba(23, 22, 15, 0.35); }
.profile-actions { display: flex; align-items: center; gap: 8px; padding-top: 16px; }
.profile h1 { font-size: 46px; margin-top: 12px; }
.profile .handle { font-family: var(--mono); color: var(--ink-3); font-size: 13.5px; margin-top: 2px; }
.profile .bio { font-size: 16.5px; margin-top: 14px; line-height: 1.5; color: var(--ink); }
.profile-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 12px; color: var(--ink-3); font-size: 14px; }
.profile-meta > * { display: inline-flex; align-items: center; gap: 6px; }
.profile-stats { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 12px; font-size: 14px; color: var(--ink-3); }
.profile-stats > * { color: var(--ink-3); }
.profile-stats b { font-family: var(--mono); color: var(--ink); font-weight: 600; margin-right: 5px; }
.profile-tabs { display: flex; margin-top: 20px; padding-inline: calc(var(--gutter) - 14px); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.profile-tab {
  flex: 0 0 auto; display: flex; justify-content: center; height: 54px; padding: 0 14px; border: 0; background: none;
  color: var(--ink-3); font-size: 14.5px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.profile-tab:hover { color: var(--ink); }
.tab-label { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 6px; height: 100%; }
.tab-label .n { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); font-weight: 500; }
.profile-tab[aria-pressed="true"] { color: var(--ink); font-weight: 700; }
/* The active tab is marked with the highlighter, plus an ink rule on the tab line. */
.profile-tab[aria-pressed="true"] .tab-label::before {
  content: ""; position: absolute; z-index: -1; left: -5px; right: -5px; top: 50%; height: 11px; margin-top: -1px; border-radius: 2px; background: var(--highlight);
}
.profile-tab[aria-pressed="true"] .tab-label::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); }
.timeline-tools { display: grid; gap: 10px; padding: 14px var(--gutter); border-bottom: 1px solid var(--border); }
.timeline-controls { display: flex; align-items: center; gap: 8px; }
.timeline-controls .search-field { flex: 0 1 440px; }
.timeline-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.timeline-meta .select { flex: none; width: auto; field-sizing: content; padding-right: 30px; border-color: transparent; background-color: transparent; color: var(--ink); font-family: var(--font); font-weight: 600; }
.timeline-meta .select:hover { background-color: var(--surface-3); }
.timeline-pager { padding: 16px var(--gutter); border-top: 1px solid var(--border); }
.profile-foot { max-width: var(--home); margin: 18px auto 0; padding-inline: var(--gutter); }
.filter-menu > summary { list-style: none; }
.filter-menu > summary::-webkit-details-marker { display: none; }
.filter-menu[open] > summary { background: var(--surface-3); }
.pill-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--highlight); color: var(--ink); font-family: var(--mono); font-size: 11px; font-weight: 600; }
.filter-panel { width: 300px; padding: 14px; display: grid; gap: 12px; }
.field { display: grid; gap: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.field .select { width: 100%; color: var(--ink); font-family: var(--font); font-size: 14px; letter-spacing: 0; text-transform: none; }
.field .segmented { font-family: var(--font); letter-spacing: 0; text-transform: none; }

/* ---- home: posts, each raise reads as a post on the account's timeline ---- */
.timeline { list-style: none; margin: 0; padding: 0; }
.post {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 16px var(--gutter) 12px;
  border-bottom: 1px solid var(--border); background: var(--row-tint, transparent); cursor: pointer; transition: background-color 0.15s;
}
.post:last-child { border-bottom: 0; }
.post:hover { background: linear-gradient(var(--hover-overlay), var(--hover-overlay)), var(--row-tint, transparent); }
.post > .pfp { width: 44px; height: 44px; }
.post-context {
  grid-column: 1 / -1; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: center;
  margin: 0 0 6px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--row-ink, var(--ink-3));
}
.post-context .icon { justify-self: end; }
.post-body { min-width: 0; }
.post-head { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 15px; line-height: 1.35; color: var(--ink-3); }
.post-head b { color: var(--ink); font-weight: 700; white-space: nowrap; }
.post-head .handle { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-head time { font-family: var(--mono); font-size: 12.5px; white-space: nowrap; }
.post-text, .post-line { font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.post-text { margin-top: 3px; }
.post-text .co { color: var(--ink); font-weight: 700; }
.post-text b { font-weight: 700; }
.post-line .mention { color: var(--link); }
.post-line .muted { color: var(--ink-3); }
.post-place { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 13.5px; color: var(--ink-3); }
.post-card { margin-top: 12px; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--surface); }
.post-figures { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 26px; padding: 13px 16px; font-size: 13px; color: var(--ink-3); }
.post-figures b { font-family: var(--mono); color: var(--ink); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin-right: 2px; }
.post-card-foot { padding: 8px 16px; border-top: 1px dashed var(--border-strong); background: var(--surface-2); font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.post-actions { display: flex; justify-content: space-between; max-width: 400px; margin: 8px 0 -4px; }
.post-actions a { display: inline-flex; align-items: center; gap: 6px; margin-left: -8px; padding: 6px 8px; border-radius: 999px; font-size: 13px; color: var(--ink-3); }
.post-actions a:hover { color: var(--accent); background: var(--accent-soft); text-decoration: none; }

/* Checked raises differ quietly: the context line in the status hue and a faint wash, a little deeper for
   unannounced. The words carry the meaning; color only reinforces it. */
[data-ann="unannounced"] { --row-ink: var(--ann-no-ink); --row-tint: var(--ann-no-tint); --row-bar: var(--ann-no-bar); }
[data-ann="announced"] { --row-ink: var(--ann-yes-ink); --row-tint: var(--ann-yes-tint); --row-bar: var(--ann-yes-bar); }
[data-ann="unclear"] { --row-ink: var(--ann-unclear-ink); --row-tint: var(--ann-unclear-tint); --row-bar: var(--ann-unclear-bar); }
.table tr[data-ann] td { background: var(--row-tint); }
.table tr[data-ann] td:first-child { box-shadow: inset 3px 0 0 var(--row-bar); }
/* Hover deepens the row's own shade rather than replacing it, so statuses stay apart. */
.table tr.clickable[data-ann]:hover td { background: linear-gradient(var(--hover-overlay), var(--hover-overlay)), var(--row-tint); }

/* ---- page header (inner pages) ---- */
.page > * + * { margin-top: 24px; }
.page > .page-head + * { margin-top: 30px; }
.page-head { display: grid; gap: 12px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.crumbs a { color: var(--ink-2); }
.crumbs .sep { color: var(--border-strong); }
.crumbs span:last-child { color: var(--ink-3); max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
.page-head-text { display: grid; gap: 10px; min-width: 0; max-width: 780px; }
.eyebrow { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.page-head .sub { color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }
.head-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13.5px; color: var(--ink-2); }
.head-meta .dotsep::before { content: "·"; margin-right: 12px; color: var(--ink-3); }
.head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.data-pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.data-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 3px color-mix(in srgb, var(--live) 20%, transparent); }

/* ---- layout helpers ---- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.stack { display: grid; gap: 20px; align-content: start; min-width: 0; }
/* Cards size to their content: a short card beside a long one stays short instead of stretching empty. */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.about-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.with-filters { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: start; }

/* ---- buttons ---- */
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.btn {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: 999px;
  font-weight: 600; font-size: 13.5px; border: 1px solid transparent; cursor: pointer; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn-secondary { background: var(--surface); border-color: var(--border-strong); color: var(--ink); }
.btn-secondary:hover { background: var(--surface-3); }
.btn-secondary .icon { color: var(--ink-3); }
.link-action { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.btn-link { border: 0; background: none; padding: 0; color: var(--link); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.btn-link:hover { text-decoration: underline; }

/* ---- key figures: one ruled strip, numbers set in the serif ---- */
.stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
}
.stat { background: var(--surface); padding: 18px 22px 20px; min-width: 0; }
.stat-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.stat-value { font-family: var(--serif); font-size: 42px; font-weight: 400; line-height: 1; margin-top: 10px; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.stat-detail { font-size: 12.5px; color: var(--ink-3); margin-top: 8px; }

/* ---- cards ---- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); min-width: 0; overflow: clip; }
.card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 22px 12px; flex-wrap: wrap; }
.card-header h2 { font-family: var(--serif); font-size: 25px; font-weight: 400; line-height: 1.1; letter-spacing: 0; }
.card-sub { color: var(--ink-3); font-size: 13px; margin-top: 4px; }
.card-body { padding: 4px 22px 20px; }
.card-toolbar { padding: 0 22px 14px; display: grid; gap: 10px; border-bottom: 1px solid var(--border); }
.card-toolbar.top { padding-top: 14px; }
.card-footer { padding: 12px 22px; border-top: 1px solid var(--border); }
.card-note { padding: 12px 22px 14px; color: var(--ink-3); font-size: 12.5px; border-top: 1px dashed var(--border-strong); }
.card-flush > .table-wrap .table th:first-child, .card-flush > .table-wrap .table td:first-child { padding-left: 22px; }
.card-flush > .table-wrap .table th:last-child, .card-flush > .table-wrap .table td:last-child { padding-right: 22px; }

/* ---- form controls ---- */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.toolbar .search-field { flex: 1 1 220px; }
.segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-3); border-radius: 999px; }
.segmented button {
  border: 0; background: transparent; height: 30px; padding: 0 12px; border-radius: 999px;
  font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--ink-3); cursor: pointer; white-space: nowrap;
}
.segmented button:hover { color: var(--ink); }
.segmented button[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--border), 0 1px 2px rgba(23, 22, 15, 0.08); }
.search-field { position: relative; display: flex; align-items: center; }
.search-field .icon { position: absolute; left: 13px; color: var(--ink-3); pointer-events: none; }
.search-field input, .select, .input {
  height: 36px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface);
  padding: 0 14px; min-width: 0; transition: border-color 0.12s, box-shadow 0.12s;
}
.search-field input { width: 100%; padding-left: 38px; }
.search-field input::placeholder { color: var(--ink-3); }
.select {
  appearance: none; -webkit-appearance: none; padding-right: 32px; max-width: 100%; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8578' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 14px;
}
.select-sm { height: 32px; padding: 0 28px 0 12px; font-size: 13px; background-position: right 9px center; }
.input { width: 100%; border-radius: var(--radius); }
.search-field input:focus, .select:focus, .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ---- chips, badges, tags ---- */
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px 0 12px; border-radius: 999px;
  background: var(--highlight); color: var(--ink); border: 1px solid transparent; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.chip:hover { border-color: var(--ink); }
.chip-clear { border: 0; background: none; color: var(--ink-3); font-size: 12.5px; cursor: pointer; padding: 0 4px; }
.chip-clear:hover { color: var(--ink); text-decoration: underline; }
.badge {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; border: 1px solid var(--border); color: var(--ink-2); background: var(--surface-2);
}
/* Round type is information, not a signal: neutral tags, the amendment set apart by a dashed edge. */
.badge.new { color: var(--ink-2); background: var(--surface); border-color: var(--border-strong); }
.badge.amend { color: var(--ink-2); background: transparent; border-color: var(--border-strong); border-style: dashed; }
.badge.accent { color: var(--accent-hover); background: var(--accent-soft); border-color: var(--accent-line); }
.badge.ann-no { color: var(--ann-no-ink); background: var(--ann-no-bg); border-color: var(--ann-no-line); }
.badge.ann-yes { color: var(--ann-yes-ink); background: var(--ann-yes-bg); border-color: var(--ann-yes-line); }
.badge.ann-unclear { color: var(--ann-unclear-ink); background: var(--ann-unclear-bg); border-color: var(--ann-unclear-line); }
.tag {
  display: inline-block; height: 24px; line-height: 22px; padding: 0 10px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--border); color: var(--ink-2); font-size: 12px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.count-pill {
  display: inline-flex; min-width: 28px; height: 22px; padding: 0 8px; justify-content: center; align-items: center;
  border-radius: 999px; background: var(--surface-3); font-family: var(--mono); font-weight: 600; font-size: 12px;
}
.swatch { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.swatch.ann-no { background: var(--ann-no-bar); }
.swatch.ann-yes { background: var(--ann-yes-bar); }
.swatch.ann-unclear { background: var(--ann-unclear-bar); }
.status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.status.none { color: var(--ink-3); font-weight: 400; }
.status.ann-no { color: var(--ann-no-ink); font-weight: 700; }
.status.ann-yes { color: var(--ann-yes-ink); }
.status.ann-unclear { color: var(--ann-unclear-ink); }

/* ---- raise table (table view, investor pages) ---- */
.raise-table .table th:first-child, .raise-table .table td:first-child { padding-left: 20px; }
.raise-table .table th:last-child, .raise-table .table td:last-child { padding-right: 20px; }
.raise-table .strong-link { font-size: 14.5px; }
.raise-table .amount { font-family: var(--mono); font-weight: 600; font-size: 14px; }
.raise-table .round { max-width: 150px; }
.inv { max-width: 260px; }
.inv-name { color: var(--ink); font-weight: 600; }
.inv-more { color: var(--ink-3); font-family: var(--mono); font-size: 11.5px; margin-left: 6px; }
.inv-fund { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-status { margin-top: 6px; }

/* ---- pagination ---- */
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.page-info { color: var(--ink-3); font-family: var(--mono); font-size: 12px; }
.page-controls { display: flex; align-items: center; gap: 6px; }
.page-nums { display: flex; align-items: center; gap: 2px; }
.page-btn, .page-num {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 34px; height: 34px; padding: 0 13px;
  border-radius: 999px; border: 1px solid transparent; color: var(--ink-2); font-size: 13px; font-weight: 600;
}
.page-num { padding: 0 6px; font-family: var(--mono); font-size: 12.5px; }
.page-btn { border-color: var(--border-strong); background: var(--surface); }
.page-btn:hover, .page-num:hover { background: var(--surface-3); color: var(--ink); text-decoration: none; }
.page-num[aria-current="page"] { background: var(--pill-bg); color: var(--pill-ink); border-color: var(--pill-bg); }
.page-btn.disabled { opacity: 0.45; pointer-events: none; }
.page-gap { min-width: 22px; text-align: center; color: var(--ink-3); }
.page-size { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 13px; }

/* ---- tables ---- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.table th {
  text-align: left; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
  background: var(--surface-2); padding: 11px 16px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.table td { padding: 13px 16px; border-bottom: 1px solid var(--border); vertical-align: top; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tr.clickable { cursor: pointer; }
.table tr.clickable:hover td { background: var(--surface-2); }
.table th.num, .table td.num { text-align: right; }
.table tr.current td { background: var(--accent-soft); }
.cell-main { min-width: 0; }
.cell-sub { color: var(--ink-3); font-size: 12.5px; margin-top: 2px; }
.cell-sub.inline { display: inline; margin: 0; }
.strong-link { color: var(--ink); font-weight: 700; }
.cell-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fund-cell { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; max-width: 380px; }

/* ---- small lists ---- */
.mini-list { list-style: none; margin: 0; padding: 0; counter-reset: rank; }
.mini-list li {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: baseline;
  padding: 10px 0; border-top: 1px solid var(--border); counter-increment: rank;
}
.mini-list li:first-child { border-top: 0; padding-top: 2px; }
.mini-list li::before { content: counter(rank, decimal-leading-zero); font-family: var(--mono); color: var(--ink-3); font-size: 11.5px; }
.mini-main { min-width: 0; }
.mini-main a { color: var(--ink); font-weight: 700; font-size: 13.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-sub { color: var(--ink-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-figure { font-family: var(--mono); font-weight: 600; font-size: 13px; white-space: nowrap; }
.bar-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bar-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.bar-row > a, .bar-row > span:first-child { color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-value { font-family: var(--mono); font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.bar-second { color: var(--ink-3); font-weight: 400; margin-left: 8px; }
.bar-track { height: 4px; margin-top: 6px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.bar-track span { display: block; height: 100%; background: var(--s1); border-radius: 0 2px 2px 0; min-width: 2px; }

/* ---- detail pages ---- */
.kv { display: grid; grid-template-columns: minmax(140px, 40%) minmax(0, 1fr); margin: 0; font-size: 13.5px; }
.kv dt { color: var(--ink-3); padding: 9px 12px 9px 0; border-bottom: 1px solid var(--border); }
.kv dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.kv dt:last-of-type, .kv dd:last-of-type { border-bottom: 0; }
.callout { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 22px; box-shadow: inset 3px 0 0 var(--accent); }
.callout.muted { box-shadow: none; }
.callout-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.callout-head .icon { color: var(--accent); }
.link-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.link-list .cell-person { align-items: flex-start; }
.link-list .tag-row { margin-top: 8px; }
.callout-note { color: var(--ink-2); font-size: 12.5px; margin-top: 14px; }
.quote { border-left: 2px solid var(--highlight); padding: 2px 0 2px 12px; color: var(--ink-2); margin: 6px 0 14px; }

/* ---- charts ---- */
.chart { position: relative; }
.chart svg { display: block; width: 100%; overflow: visible; }
.chart .grid-line { stroke: var(--grid); stroke-width: 1; }
.chart .axis-line { stroke: var(--axis); stroke-width: 1; }
.chart .tick { fill: var(--tick); font-family: var(--mono); font-size: 10.5px; }
.chart .s1 { fill: var(--s1); }
.chart .s2 { fill: var(--s2); }
.chart .col.partial { opacity: 0.4; }
.chart .col.active { opacity: 1; filter: brightness(1.12); }
.chart .cross { stroke: var(--axis); stroke-width: 1; }
.chart-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--ink-2); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.legend i.partial { border: 1.5px solid var(--axis); }
.tip {
  position: absolute; pointer-events: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px 10px; font-size: 12.5px; box-shadow: var(--shadow-md); min-width: 150px; z-index: 5;
}
.tip-title { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-bottom: 4px; }
.tip .row { display: flex; align-items: center; gap: 8px; }
.tip .row b { font-family: var(--mono); min-width: 34px; text-align: right; }
.tip .key { width: 12px; height: 2px; border-radius: 1px; display: inline-block; }

/* ---- filings filters ---- */
.filters { padding: 16px; }
.filters summary { display: none; }
.fgroup + .fgroup { margin-top: 18px; }
.fgroup h3 { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.fgroup .select { width: 100%; }
.facet {
  display: flex; justify-content: space-between; gap: 8px; width: 100%; padding: 6px 10px; border: 0; border-radius: 999px;
  background: transparent; text-align: left; cursor: pointer; font-size: 13px; color: var(--ink-2);
}
.facet:hover { background: var(--surface-3); color: var(--ink); }
.facet[aria-pressed="true"] { background: var(--highlight); color: var(--ink); font-weight: 600; }
.facet .n { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

/* ---- prose, empty states, footer ---- */
.prose p, .prose li { color: var(--ink-2); line-height: 1.7; }
.prose p + p, .prose p + ul, .prose ul + p { margin-top: 10px; }
.prose ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.prose b { color: var(--ink); font-weight: 600; }
.empty { padding: 44px 20px; text-align: center; color: var(--ink-3); }
.empty-state { max-width: 540px; margin: 72px auto; text-align: center; display: grid; gap: 12px; justify-items: center; }
.empty-state h2 { font-family: var(--serif); font-size: 40px; font-weight: 400; line-height: 1.05; }
.empty-state p { color: var(--ink-2); }
.fineprint { display: flex; gap: 8px; align-items: flex-start; color: var(--ink-3); font-size: 12.5px; }
.fineprint .icon { margin-top: 2px; }
.footer { border-top: 1px solid var(--border); flex: none; }
.footer-inner {
  max-width: var(--page); margin: 0 auto; padding: 20px 28px 26px; display: flex; flex-wrap: wrap; gap: 8px 24px;
  justify-content: space-between; align-items: baseline; color: var(--ink-3); font-size: 12.5px;
}
.is-home .footer-inner { max-width: var(--home); padding-inline: var(--gutter); }
.footer-line { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--ink-2); }
.footer nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer a { color: var(--ink-2); }

/* ---- responsive ---- */
@media (max-width: 1100px) {
  :root { --gutter: 24px; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .split > .stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hide-md { display: none !important; }
  .show-md { display: revert; }
  .toolbar .select { flex: 1 1 130px; width: 130px; }
}
@media (max-width: 980px) {
  .grid-2, .grid-3, .with-filters, .about-grid, .split > .stack { grid-template-columns: minmax(0, 1fr); }
  .filters summary { display: flex; justify-content: space-between; cursor: pointer; font-weight: 600; }
  .filters details[open] summary { margin-bottom: 14px; }
  .subbar-nav { display: none; }
  .subbar [data-theme-toggle] { margin-left: auto; }
}
@media (max-width: 560px) {
  :root { --gutter: 16px; }
  .wrap, .footer-inner, .subbar-inner { padding-inline: 16px; }
  .wrap { padding-top: 22px; }
  .is-home .wrap { padding: 0 0 32px; }
  h1 { font-size: 34px; }
  .page-head .sub { font-size: 14.5px; }
  .page > .page-head + * { margin-top: 22px; }
  .banner { height: 170px; }
  .banner-copy { padding-top: 22px; }
  .banner-tagline { font-size: 32px; }
  .banner-caption { display: none; }
  .profile-pfp { width: 92px; height: 92px; margin-top: -46px; border-width: 4px; }
  .profile-actions { padding-top: 10px; gap: 6px; }
  .profile-actions .btn-pill { height: 34px; padding: 0 14px; }
  .profile-actions .circle-btn { width: 34px; height: 34px; }
  .profile h1 { font-size: 36px; }
  .timeline-controls { flex-wrap: wrap; }
  .timeline-controls .search-field { flex: 1 1 100%; }
  .filter-panel { width: min(300px, calc(100vw - 32px)); }
  .post { grid-template-columns: 36px minmax(0, 1fr); column-gap: 10px; padding: 14px var(--gutter) 10px; }
  .post-context { grid-template-columns: 36px minmax(0, 1fr); column-gap: 10px; }
  .post > .pfp { width: 36px; height: 36px; }
  .post-head .handle, .post-head .dot-sep { display: none; }
  .post-figures { gap: 2px 16px; padding: 10px 12px; }
  .post-card-foot { padding: 8px 12px; }
  .post-actions { max-width: none; }
  .stat { padding: 14px 16px; }
  .stat-value { font-size: 32px; }
  .card-header, .card-toolbar, .card-footer, .card-body, .card-note { padding-left: 16px; padding-right: 16px; }
  .card-flush > .table-wrap .table th:first-child, .card-flush > .table-wrap .table td:first-child,
  .raise-table .table th:first-child, .raise-table .table td:first-child { padding-left: 12px; }
  .card-flush > .table-wrap .table th:last-child, .card-flush > .table-wrap .table td:last-child,
  .raise-table .table th:last-child, .raise-table .table td:last-child { padding-right: 12px; }
  .table th, .table td { padding: 11px 12px; }
  .toolbar .select { flex: 1 1 140px; }
  .kv { grid-template-columns: minmax(0, 1fr); }
  .kv dt { border-bottom: 0; padding-bottom: 0; font-size: 12.5px; }
  .pagination { justify-content: center; }
  .page-info { width: 100%; text-align: center; }
  .page-size { display: none; }
  .hide-sm { display: none !important; }
  .show-sm { display: revert; }
  .head-meta .dotsep::before { display: none; }
}

/* ---- sign-in: the public page and the walls in front of everything else ---- */
.btn-pill.sm { height: 32px; padding: 0 14px; font-size: 13px; }
.google-btn { background: var(--surface); color: var(--ink); border-color: var(--border-strong); gap: 10px; }
.google-btn:hover { background: var(--surface-3); }
.signin-wall {
  max-width: 520px; margin: 48px auto; padding: 32px 28px; display: grid; justify-items: center; gap: 12px; text-align: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.signin-wall h2 { font-family: var(--serif); font-size: 34px; font-weight: 400; line-height: 1.05; }
.signin-wall p { color: var(--ink-2); max-width: 420px; }
.signin-wall .pfp { width: 56px; height: 56px; }
.gate-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding: 14px var(--gutter); border-bottom: 1px solid var(--border); background: var(--surface-2); font-size: 14px; color: var(--ink-2);
}
.gate-end { padding: 4px var(--gutter) 0; border-top: 1px solid var(--border); }
.gate-end .signin-wall { margin: 28px auto 8px; }
.profile-tab.locked { color: var(--ink-3); }
.profile-tab.locked:hover { color: var(--ink); text-decoration: none; }
#subbar-account { display: flex; align-items: center; }
@media (max-width: 560px) {
  .signin-wall { margin: 24px auto; padding: 24px 18px; }
  .signin-wall h2 { font-size: 28px; }
  .subbar #subbar-account .google-btn { padding: 0 12px; }
}

/* Company website, beside the place on a post and in page headers */
.post-place { flex-wrap: wrap; column-gap: 14px; row-gap: 2px; }
.post-place .place, .site-link { display: inline-flex; align-items: center; gap: 5px; }
.site-link { color: var(--link); }
.site-link:hover { text-decoration: underline; }