:root {
    --bg: #FAFAF7;
    --ink: #1A1A1A;
    --ink-2: #3A3A37;
    --ink-3: #6B6B66;
    --ink-4: #9C9C96;
    --rule: rgba(26, 26, 26, 0.10);
    --rule-strong: rgba(26, 26, 26, 0.22);
    --accent: #D4530E;
    --signal-high: #D4530E;
    --signal-med: #B58A3A;
    --signal-none: rgba(26, 26, 26, 0.18);
    --serif: "Source Serif 4", "Tiempos Text", Georgia, serif;
    --sans: "Inter", "Söhne", "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

    /* Clearance reserved at the bottom of scrollable content so it clears the
       floating pill tab bar (which sits 14px up + ~56px tall). Reused as
       scroll padding on the last screen and the footer. Reset to 0 at the
       desktop breakpoint, where the pill isn't shown. */
    --tabbar-h: 88px;
  }

  * { box-sizing: border-box; }

  html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "ss01", "cv11";
  }

  /* Tabular figures by default for any numeric content */
  .num, table, .mono { font-variant-numeric: tabular-nums; }

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

  /* =================================================================
     MOBILE-FIRST BASE
     -----------------------------------------------------------------
     Everything from here to the `@media (min-width: 640px)` block is
     the PHONE layout, written as the default. The desktop layout is
     layered on inside that one min-width query at the bottom of this
     file — it restores the original 1320px-max, 48px-gutter, table-
     based composition byte-for-byte. Nothing above the query assumes a
     wide viewport.
     ================================================================= */

  /* ------------------------------------------------- TOP BAR (mobile) */
  /* On phones the top bar carries only brand + live status; primary
     navigation lives in the fixed bottom tab bar. The nav <a>s are
     hidden here and shown again on desktop. */
  .topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(250, 250, 247, 0.92);
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--rule);
  }
  .topbar-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
  }
  .brand {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 20px;
    letter-spacing: -0.01em;
    color: var(--ink);
  }
  /* Top nav links are the desktop navigation — suppressed on mobile in
     favour of the bottom tab bar. Restored at the desktop breakpoint. */
  .nav { display: none; }

  /* .refresh (a plain <div>, dot + text + nested button) is still used by
     CompanyTopBar's own "Company profile" / "{email} [log out]" lines --
     unchanged, don't fold it into .topbar-refresh below. */
  .refresh {
    margin-left: auto;
    font-size: 11px;
    color: var(--ink-4);
    letter-spacing: 0.01em;
    white-space: nowrap;
  }
  /* The email/logout line is second-order on a phone; the auth state is
     one tap away in-app. Hidden on mobile to keep the bar to one line. */
  .refresh + .refresh { display: none; }
  .refresh .dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    margin-right: 7px;
    transform: translateY(-1px);
    opacity: 0.85;
  }
  .refresh button {
    background: none;
    border: 0;
    padding: 0;
    margin-left: 10px;
    font: inherit;
    color: var(--ink-3);
    cursor: pointer;
    border-bottom: 1px solid var(--rule-strong);
  }
  .refresh button:hover { color: var(--ink); }

  /* The main dashboard TopBar's own refresh trigger -- a single <button>
     (not a <div> wrapping a separate nested button): clicking the
     "Refreshed at ..." text itself re-fetches, same onRefresh the old
     separate "refresh" word used to trigger. Deliberately its own class,
     not .refresh -- that one's still CompanyTopBar's, see above. */
  .topbar-refresh {
    margin-left: auto;
    font-size: 11px;
    color: var(--ink-4);
    letter-spacing: 0.01em;
    white-space: nowrap;
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
  }
  .topbar-refresh:hover { color: var(--ink-3); }

  /* Profile icon + dropdown (ProfileMenu in App.jsx) -- replaced the old
     bare "{email} [log out]" line. */
  .profile-menu { position: relative; margin-left: 12px; }
  .profile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--rule-strong);
    background: transparent;
    color: var(--ink-3);
    cursor: pointer;
  }
  .profile-menu-btn:hover { color: var(--ink); border-color: var(--ink-4); }
  .profile-menu-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background: var(--bg);
    border: 1px solid var(--rule-strong);
    border-radius: 4px;
    box-shadow: 0 12px 30px rgba(26, 26, 26, 0.18);
    padding: 10px 0;
    z-index: 200;
  }
  .profile-menu-email {
    padding: 4px 16px 10px;
    font-size: 12.5px;
    color: var(--ink-2);
    border-bottom: 1px solid var(--rule);
    margin-bottom: 6px;
    word-break: break-all;
  }
  .profile-menu-logout {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 16px;
    font: inherit;
    font-size: 13px;
    color: var(--ink-2);
    background: none;
    border: none;
    cursor: pointer;
  }
  .profile-menu-logout:hover { color: var(--accent); background: rgba(212, 83, 14, 0.06); }

  /* ------------------------------------------------- BOTTOM TAB BAR (mobile only) */
  /* A floating, fully-rounded "pill" bar centred near the bottom of the
     viewport (iOS-style), rather than an edge-to-edge strip. Frosted glass
     over the warm page tone, hairline border, soft shadow so it reads as
     floating above the content. Built for three tabs; all three (Portfolio /
     News / Company) are live routes. A `disabled` modifier is styled for
     future placeholder tabs. Each hit target clears 44px. */
  .tabbar {
    position: fixed;
    left: 50%;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 60;
    display: flex;
    gap: 4px;
    padding: 5px;
    width: max-content;
    max-width: calc(100vw - 32px);
    border-radius: 999px;
    background: rgba(250, 250, 247, 0.82);
    backdrop-filter: saturate(150%) blur(14px);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    border: 1px solid var(--rule);
    /* Layered shadow: a soft ambient drop plus a faint inner top highlight so
       the pill reads as a raised, glassy surface, not a flat rectangle. */
    box-shadow:
      0 6px 20px -6px rgba(26, 26, 26, 0.22),
      0 2px 6px -2px rgba(26, 26, 26, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.6);
  }
  .tabbar a {
    flex: 0 0 auto;
    min-height: 44px;
    min-width: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    cursor: pointer;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    transition: color 140ms ease, background-color 140ms ease;
  }
  .tabbar a:active { background: rgba(26, 26, 26, 0.05); }
  /* Active tab: a filled orange pill behind the label, light text on top. */
  .tabbar a.active {
    color: #fff;
    background: var(--accent);
    box-shadow: 0 2px 8px -2px rgba(212, 83, 14, 0.5);
  }
  .tabbar a.disabled {
    color: var(--ink-4);
    opacity: 0.4;
    pointer-events: none;
  }
  /* Company tap-to-open menu (mobile) — pops up above the pill. */
  .tabbar-dd { position: relative; display: flex; flex: 0 0 auto; }
  .tabbar-menu {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 210px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    border-radius: 16px;
    background: rgba(250, 250, 247, 0.97);
    backdrop-filter: saturate(150%) blur(14px);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    border: 1px solid var(--rule);
    box-shadow: 0 12px 34px -8px rgba(26, 26, 26, 0.3);
    z-index: 61;
  }
  /* Override the pill styling inherited from `.tabbar a` for menu rows. */
  .tabbar-menu a {
    min-width: 0;
    justify-content: flex-start;
    border-radius: 11px;
    padding: 13px 16px;
    color: var(--ink-2);
  }
  .tabbar-menu a.dd-disabled { color: var(--ink-4); opacity: 0.5; pointer-events: none; }
  .tabbar-scrim { position: fixed; inset: 0; z-index: 59; background: transparent; }
  .tabbar a .tab-dot {
    display: none;
  }

  /* ------------------------------------------------- SCREEN SHELL (mobile) */
  .screen {
    padding: 24px 16px calc(28px + var(--tabbar-h));
  }
  /* On desktop adjacent screens are separated by a rule; on mobile only
     one screen is shown at a time so the separator is unnecessary. */
  .screen + .screen { border-top: 0; }

  .screen-label {
    margin-bottom: 20px;
  }
  .screen-label .eyebrow {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-4);
  }
  .screen-label .title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 27px;
    letter-spacing: -0.015em;
    color: var(--ink);
  }
  /* "News   updated 3h ago" — title with a greyed, baseline-aligned
     last-updated stamp trailing it. */
  .news-title-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
  }
  .news-updated {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.02em;
    color: var(--ink-4);
  }
  .news-updating {
    color: var(--accent);
    animation: news-updating-pulse 1.6s ease-in-out infinite;
  }
  @keyframes news-updating-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
  }

  /* Portfolio / Watchlist feed tabs. Styled as flush text tabs (not a boxed
     pill) so "Portfolio" lines up exactly under the "News" title above and
     the "Company" filter label below — all three sit at the page gutter with
     no left inset. Active tab carries the site accent underline, matching the
     news filter links. */
  .feed-toggle {
    display: flex;
    gap: 20px;
    margin-bottom: 18px;
  }
  .feed-toggle-btn {
    appearance: none;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.005em;
    color: var(--ink-3);
    padding: 2px 0 6px;   /* zero left padding: text starts at the gutter */
    border-bottom: 2px solid transparent;
    transition: color 120ms ease, border-color 120ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .feed-toggle-btn:hover { color: var(--ink); }
  .feed-toggle-btn.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
  }

  /* ------------------------------------------------- FUND STAT STRIP (mobile) */
  /* The five fund metrics as a horizontally-scrollable strip of compact
     cards rather than a grid. Scroll-snaps so it reads as a deliberate
     swipe, not an overflow accident. This element replaces the .metrics
     grid on mobile; the grid returns verbatim on desktop. */
  .metrics {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    /* Bleed to the screen edges so a half-card peeks, signalling scroll,
       then pad back so the first card aligns with the page gutter. */
    margin: 0 -16px 22px;
    padding: 2px 16px 12px;
    border-top: 0;
    border-bottom: 0;
    scrollbar-width: none;
  }
  .metrics::-webkit-scrollbar { display: none; }
  .metric {
    scroll-snap-align: start;
    flex: 0 0 auto;
    min-width: 118px;
    padding: 14px 16px 15px;
    border: 1px solid var(--rule);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.4);
    position: relative;
  }
  .metric .label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-4);
    margin-bottom: 9px;
  }
  .metric .value {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 23px;
    letter-spacing: -0.01em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
  }
  .metric .delta {
    font-size: 11px;
    color: var(--ink-3);
    margin-top: 5px;
    font-variant-numeric: tabular-nums;
    /* Keep the strip cards compact and even-height; the descriptive
       delta is desktop-only detail. */
    display: none;
  }
  .metric .delta.pos { color: var(--accent); }

  /* ------------------------------------------------- MOBILE HORIZONTAL SCROLL INDICATOR */
  /* Thin, non-interactive progress track for any horizontally-scrollable
     mobile row (see HScrollIndicator in App.jsx) — a muted track the
     width of the content, with an accent-colored thumb sized/positioned
     to match how much of the row is currently in view. Native scrollbars
     stay hidden on the rows themselves (scrollbar-width: none etc.,
     already set on .metrics/.company-chips); this is the only visible
     scroll cue. Desktop turns it off entirely below, once nothing
     scrolls horizontally there. */
  .hscroll-track {
    position: relative;
    height: 3px;
    margin: -12px 4px 16px;
    background: var(--rule-strong);
    border-radius: 2px;
    overflow: hidden;
  }
  .hscroll-thumb {
    position: absolute;
    top: 0;
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
  }

  /* Portfolio screen's blank/loading state (PortfolioScreen in App.jsx) —
     shown instead of the toggle/metrics/table when fund is null (sheet
     unreadable, or the very first fetch hasn't resolved yet). Deliberately
     quiet, matching .cp-empty's tone elsewhere — not an alarming banner. */
  .portfolio-blank {
    padding: 32px 2px;
    font-size: 13px;
    color: var(--ink-4);
  }

  /* ------------------------------------------------- INVESTMENT TOGGLE (shared) */
  /* .filter-row / .filter-link are shared with the News screen and read
     fine as-is on mobile; only spacing is nudged. */
  .filter-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--ink-3);
  }
  .filter-row .filter-label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-4);
    margin-right: 4px;
  }

  /* Mobile: the Company filter can hold many companies — too many to fit one
     phone-width line, and wrapping to a second line reads as broken. Instead
     it becomes a single horizontally-scrollable row (same swipe idiom as the
     fund stat strip). The "Company" label stays pinned at the start while the
     chips scroll past it; a right-edge fade hints there's more off-screen.
     Restored to a normal wrapping row on desktop, where it fits. */
  /* The row itself does NOT scroll — it's a fixed label + a scrolling chip
     track beside it. Keeping the label outside the scroller is what prevents
     the label and the first chip from ever overlapping (an earlier sticky-
     label approach let chips render underneath the word "Company"). */
  .filter-row.company-filter {
    flex-wrap: nowrap;
    align-items: center;
    overflow: visible;
  }
  .filter-row.company-filter .filter-label {
    flex: 0 0 auto;      /* label is a fixed prefix, never scrolls or shrinks */
  }
  /* Watchlist feed's Company filter (2026-08-10): a type-ahead search box
     instead of the chip row above -- the watchlist can run to 100+
     companies, too many for a chip row to stay usable at. Sized to sit
     inline in this same filter-row, not the bigger .wl-add-input form
     control. */
  .company-search-wrap {
    position: relative;
    flex: 0 1 260px;
    min-width: 0;
  }
  .company-search-input {
    width: 100%;
    padding: 5px 26px 5px 8px;
    font: inherit;
    font-size: 13px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--rule);
    border-radius: 4px;
  }
  .company-search-input:focus {
    outline: none;
    border-color: var(--accent);
  }
  .company-search-clear {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    line-height: 1;
    font-size: 15px;
    color: var(--ink-4);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
  }
  .company-search-clear:hover { color: var(--ink); }
  /* The scrolling track: only the chips move, horizontally, within this box. */
  .company-chips {
    flex: 1 1 auto;
    min-width: 0;        /* allow the flex item to shrink below content width */
    display: flex;
    align-items: center;
    gap: 12px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    /* Bleed to the right screen edge so chips scroll out under a fade at the
       gutter; padding-right keeps the last chip off the very edge at rest. */
    margin-right: -16px;
    padding-right: 16px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  }
  .company-chips::-webkit-scrollbar { display: none; }
  .company-chips .filter-link {
    flex: 0 0 auto;      /* chips keep their width, don't compress */
    white-space: nowrap;
    scroll-snap-align: start;
  }
  /* The "·" separators are noise once the chips scroll horizontally — the gap
     between chips already separates them. */
  .company-chips .filter-sep { display: none; }
  /* Mobile: filter links are tap targets, so they get real height. A 44px
     min touch area is provided via padding + an inline-flex box tall enough
     to meet the guideline, while the visible underline still hugs the text.
     Desktop restores the tight inline treatment. */
  .filter-link {
    cursor: pointer;
    color: var(--ink-3);
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 2px;
    border-bottom: 1px solid transparent;
    transition: color 120ms ease, border-color 120ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .filter-link:hover { color: var(--ink); }
  .filter-link.active {
    color: var(--ink);
    /* Underline drawn with box-shadow so it sits at the text baseline, not at
       the bottom of the tall 44px tap box. Accent-colored so the active
       filter reads as a small orange highlight, on theme with the site. */
    border-bottom-color: transparent;
    box-shadow: inset 0 -1px 0 var(--accent);
  }
  .filter-sep {
    color: var(--ink-4);
    font-size: 11px;
    margin: 0 2px;
    align-self: center;
  }
  /* "Archive" checkbox — sits inline right next to the Search input/clear
     link, same gap as every other item in that filter-row, not pushed to
     the row's far edge. */
  .filter-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-3);
    cursor: pointer;
  }
  .filter-checkbox:hover { color: var(--ink); }
  .filter-checkbox input[type="checkbox"] { cursor: pointer; }

  /* ------------------------------------------------- PORTFOLIO: TABLE vs CARDS */
  /* The desktop <table> is hidden on mobile; the card list is hidden on
     desktop. Both are always in the DOM (the React component renders
     both), so this is purely a display swap at the breakpoint. */
  .table-wrap { display: none; }

  .cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* ---- company card ---- */
  .pcard {
    display: block;
    width: 100%;
    text-align: left;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: 16px 16px 17px;
    font: inherit;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 120ms ease;
  }
  .pcard:active { border-color: var(--rule-strong); }
  .pcard.exited { background: rgba(220, 220, 220, 0.4); }

  .pcard-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 15px;
  }
  .pcard-name {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 20px;
    letter-spacing: -0.01em;
    color: var(--ink);
  }
  /* Wraps .pcard-name + its optional .company-series sub-line so the two
     stack vertically while .pcard-head (a row) still places this block
     on the left and the exited-date badge on the right. */
  .pcard-name-block { display: flex; flex-direction: column; gap: 2px; }
  .pcard-entry-date {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    color: var(--ink-4);
    white-space: nowrap;
  }

  /* ---- returns line: MOIC prominent, IRR secondary, entry muted ---- */
  .pcard-returns {
    display: flex;
    align-items: baseline;
    gap: 12px;
  }
  .pcard-moic {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 32px;
    line-height: 1;
    letter-spacing: -0.015em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
  .pcard-irr {
    font-size: 15px;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
  }
  .pcard-irr .k,
  .pcard-nav .k {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-4);
    margin-right: 4px;
  }
  .pcard-nav {
    font-size: 15px;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
    margin-left: auto;
  }
  .pcard-entry {
    margin-top: 9px;
    font-size: 12px;
    color: var(--ink-4);
    font-variant-numeric: tabular-nums;
  }

  /* ---- expandable detail ---- */
  .pcard-more {
    margin-top: 15px;
    padding-top: 14px;
    border-top: 1px solid var(--rule);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px 16px;
  }
  .pcard-more .cell .k {
    display: block;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-4);
    margin-bottom: 3px;
  }
  .pcard-more .cell .v {
    font-size: 14px;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
  }
  .pcard-more .cell .sub {
    display: block;
    font-size: 11px;
    color: var(--ink-4);
    margin-top: 2px;
  }
  .pcard-expand-hint {
    margin-top: 13px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-4);
  }

  /* =================================================================
     TABLE (desktop-composed, but the rules live here so they apply
     inside the desktop query below via the .table-wrap display swap).
     These are the ORIGINAL table styles, unchanged.
     ================================================================= */
  table.portfolio {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
  }
  table.portfolio th {
    text-align: left;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-4);
    padding: 14px 16px;
    border-bottom: 1px solid var(--rule-strong);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
  }
  table.portfolio th:hover { color: var(--ink-2); }
  table.portfolio th.r, table.portfolio td.r { text-align: right; }
  table.portfolio th.c, table.portfolio td.c { text-align: center; }
  table.portfolio td {
    padding: 22px 16px;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
  }
  table.portfolio tr.row { transition: background 120ms ease; }
  table.portfolio tr.row:hover { background: rgba(26, 26, 26, 0.025); }
  table.portfolio tr.row.exited { background: rgba(220, 220, 220, 0.45); }
  table.portfolio tr.row.exited td { color: #4b5563; }
  table.portfolio td.company {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 19px;
    letter-spacing: -0.01em;
    color: var(--ink);
    width: 1%;
    white-space: nowrap;
    padding-right: 24px;
  }
  table.portfolio td.invested .stage {
    display: block;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--ink-4);
    margin-top: 4px;
    font-weight: 400;
  }
  /* Series sub-line -- same "small label under a bigger value" shape as
     .stage above, just under the company name (Holdings table) or the
     mobile card's name block, same role Entry PPS plays under Entry
     Valuation. Only ever rendered when a row is one of multiple tranches
     for the same company -- see seriesLabel's own comment. Sentence
     case, not uppercase -- "Series A"/"Exited: ..." already have their
     own correct capitalization, no text-transform needed. */
  .company-series {
    display: block;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--ink-4);
    margin-top: 4px;
    font-weight: 400;
  }
  table.portfolio td.num {
    font-variant-numeric: tabular-nums;
    color: var(--ink-2);
    white-space: nowrap;
  }
  table.portfolio td.num .sub {
    display: block;
    font-size: 11.5px;
    color: var(--ink-4);
    margin-top: 4px;
    letter-spacing: 0;
  }
  .signal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: var(--ink-3);
    letter-spacing: 0.02em;
  }
  .signal .pip {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--signal-none);
    display: inline-block;
  }
  .signal.high .pip { background: var(--accent); }
  .signal.med .pip { background: var(--signal-med); }
  .signal.high { color: var(--ink); }

  .table-foot {
    display: flex;
    justify-content: space-between;
    padding: 20px 16px 0;
    font-size: 12px;
    color: var(--ink-4);
  }
  .table-foot a {
    color: var(--ink-2);
    border-bottom: 1px solid var(--rule-strong);
    padding-bottom: 1px;
  }
  .table-foot a:hover { color: var(--accent); border-bottom-color: var(--accent); }

  /* ------------------------------------------------- NEWS FEED EXTRAS */
  .signal-item .body .rationale {
    font-size: 12.5px;
    color: var(--ink-4);
    margin-top: 6px;
    line-height: 1.5;
    text-wrap: pretty;
    max-width: 64ch;
  }
  .signal-item .body .related-sources {
    margin-top: 8px;
  }
  .related-toggle {
    background: none;
    border: 0;
    padding: 0;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--ink-3);
    cursor: pointer;
  }
  .related-toggle:hover { color: var(--accent); }
  .related-toggle-match {
    color: #92650a;
    font-weight: 600;
  }
  .related-toggle-match-label {
    font-weight: 400;
    font-style: italic;
  }
  .related-list {
    margin-top: 8px;
    padding-left: 12px;
    border-left: 2px solid var(--rule-strong);
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 60ch;
  }
  .related-source {
    display: block;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--ink-3);
  }
  .related-source:hover { color: var(--ink); }
  .related-source-name {
    display: inline-block;
    margin-left: 6px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    color: var(--ink-4);
  }
  .date-input {
    font: inherit;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink-3);
    background: none;
    border: 0;
    border-bottom: 1px solid var(--rule-strong);
    padding: 0 0 1px;
  }
  .date-input:hover, .date-input:focus { color: var(--ink); outline: none; }
  .search-input {
    width: 220px;
  }
  .search-input::placeholder { color: var(--ink-4); }
  .signal-item .src .thumbs {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
  }
  .signal-item .src .thumbs button {
    display: inline-flex;
    align-items: center;
    background: none;
    border: 0;
    padding: 2px 4px;
    font: inherit;
    font-size: 13px;
    color: var(--ink-3);
    cursor: pointer;
    border-bottom: 1px solid var(--rule-strong);
    line-height: 1;
  }
  .signal-item .src .thumbs button:hover { color: var(--ink); }
  .signal-item .src .thumbs button.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
  }
  /* ------------------------------------------------- SIGNALS / NEWS FEED (mobile base) */
  .feed-head {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-bottom: 1px solid var(--rule-strong);
    padding-bottom: 20px;
    margin-bottom: 8px;
  }

  /* Mobile: "More filters" toggle for the secondary (Sort/Search/Date) panel.
     Keeps Company + Relevance inline and everything else one tap away, so the
     feed isn't pushed below a wall of controls. Hidden on desktop. */
  .filters-more-toggle {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 2px;
    background: none;
    border: 0;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .filters-more-toggle:hover { color: var(--ink); }
  .filters-more-toggle::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    transition: transform 120ms ease;
  }
  .filters-more-toggle[aria-expanded="true"]::after {
    transform: rotate(-135deg) translateY(-1px);
  }
  /* Small accent chip counting active secondary filters when collapsed. */
  .filters-more-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--accent);
    color: #fff;
    border-radius: 8px;
    font-size: 10px;
    letter-spacing: 0;
  }
  /* Collapsed by default on mobile; .open reveals it. */
  .filters-more {
    display: none;
    flex-direction: column;
    gap: 16px;
  }
  .filters-more.open { display: flex; }

  /* Notes section filter bar (NotesSection) -- same look as
     .filters-more-toggle/.filters-more above, but a SEPARATE pair of
     classes on purpose: unlike the main feed, every filter here (Sender/
     Source included, not just Search/Date) stays collapsed behind this
     toggle on desktop too -- .filters-more-toggle/.filters-more force back
     open at the desktop breakpoint below, which this section deliberately
     opts out of. */
  .notes-filters-toggle {
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* Only a BOTTOM divider (Filters -> table) -- no top border here, since
       the section title above already reads as the visual break between
       "Notes" and this toggle (see .notes-section .cp-section-title's
       override, which drops ITS OWN divider/margin so the two headers sit
       close together instead of stacking two separate lines between them).
       The border lives on the button itself (not the surrounding
       .feed-head) so the gap from "FILTERS" down to it is exactly this
       padding, regardless of the button's own tap-target sizing -- a
       min-height here (as the shared .filters-more-toggle has, for mobile
       touch targets) would dominate the visible gap and make padding/
       margin tweaks on the container elsewhere invisible, which is what
       made earlier spacing attempts on .feed-head not actually change
       anything on screen. */
    padding: 6px 2px;
    border: 0;
    border-bottom: 1px solid var(--rule-strong);
    background: none;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: none;
    color: var(--ink-3);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .notes-filters-toggle:hover { color: var(--ink); }
  .notes-filters-toggle::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    transition: transform 120ms ease;
  }
  .notes-filters-toggle[aria-expanded="true"]::after {
    transform: rotate(-135deg) translateY(-1px);
  }
  .notes-filters-panel {
    display: none;
    flex-direction: column;
    gap: 16px;
  }
  .notes-filters-panel.open { display: flex; }

  .feed { padding-top: 8px; }
  /* On mobile the three-column signal grid collapses to a single stacked
     column; the timestamp and source sit inline above/below the body. */
  .signal-item {
    display: block;
    padding: 20px 2px;
    border-bottom: 1px solid var(--rule);
  }
  .signal-item:hover { background: transparent; }
  .signal-item .ts {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--ink-4);
    margin-bottom: 6px;
  }
  .signal-item .body .top {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
  }
  .signal-item .body .co {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 17px;
    letter-spacing: -0.01em;
    color: var(--ink);
  }
  .signal-item .body .co.flag::after {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    background: var(--accent);
    border-radius: 50%;
    margin-left: 8px;
    transform: translateY(-3px);
  }
  .signal-item .body .cat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding-bottom: 1px;
    border-bottom: 1px solid var(--rule-strong);
  }
  .watch-tag {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-4);
    margin-left: 7px;
  }
  .tier-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: none;
  }
  .tier-dot-1 { background: #dc2626; }
  .tier-dot-2 { background: #f59e0b; }
  .tier-dot-3 { background: #94a3b8; }
  .tier-dot-4 { background: #cbd5e1; }
  .search-highlight {
    background: #fde68a;
    color: #1f2937;
    border-radius: 2px;
    padding: 0 1px;
  }
  .signal-item .body .summary {
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.55;
    text-wrap: pretty;
    max-width: 64ch;
  }
  .signal-item .src {
    font-size: 12px;
    color: var(--ink-4);
    text-align: left;
    line-height: 1.5;
    margin-top: 8px;
  }
  .signal-item .src .source {
    color: var(--ink-2);
  }
  .signal-item .src .source.action {
    color: var(--accent);
  }

  /* ------------------------------------------------- RESOURCES (mobile base) */
  .resource-region + .resource-region {
    margin-top: 32px;
  }
  .resource-region-title {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-4);
    padding-bottom: 10px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--rule-strong);
  }
  .resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
  }
  .resource-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 18px 17px;
    border: 1px solid var(--rule);
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 120ms ease, background-color 120ms ease;
  }
  .resource-card:hover {
    border-color: var(--rule-strong);
    background: rgba(255, 255, 255, 0.75);
  }
  .resource-card:active { border-color: var(--rule-strong); }
  .resource-logo {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    border: 1px solid var(--rule);
    border-radius: 50%;
    background: rgba(26, 26, 26, 0.03);
    color: var(--ink-3);
  }
  .resource-logo-img {
    width: 22px;
    height: 22px;
    border-radius: 3px;
    object-fit: contain;
  }
  .resource-name {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 18px;
    letter-spacing: -0.01em;
    color: var(--ink);
  }
  .resource-open {
    margin-top: auto;
    align-self: flex-start;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding-bottom: 1px;
    border-bottom: 1px solid var(--rule-strong);
    transition: color 120ms ease, border-color 120ms ease;
  }
  .resource-card:hover .resource-open {
    color: var(--accent);
    border-color: var(--accent);
  }


  /* ------------------------------------------------- PIPELINE (deal-flow board) */
  /* Three-stage kanban — Watchlist | Opportunities | Diligence — fed by
     GET /api/watchlist (the deal-flow columns on the watchlist registry).
     Replaced the old GetLatka bubble matrix + sector dropdown/summary. Mobile:
     single-column stack; the min-width:640px block below restores the
     3-column board with column rules (per the layout handoff). */
  .pboard-add { margin-top: 6px; }
  .pipeline-board {
    display: grid;
    grid-template-columns: 1fr;
    border-top: 1px solid var(--rule-strong);
    margin-top: 16px;
  }
  .pipeline-col {
    padding: 20px 0 8px;
    border-bottom: 1px solid var(--rule);
  }
  .pipeline-col:last-child { border-bottom: 0; }
  .pipeline-col-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 12px;
  }
  .pipeline-col-head .name {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-2);
  }
  .pipeline-col-head .count {
    font-size: 11px;
    color: var(--ink-4);
    font-variant-numeric: tabular-nums;
  }
  .pipeline-col-cards { display: flex; flex-direction: column; }
  .pipeline-col-empty {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink-4);
    padding: 2px 2px 14px;
  }

  /* ---- editorial pipeline card: borderless, serif name, thesis, meta line,
     thin divider between cards; rounded stage arrows at the right end ---- */
  .plcard {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 0 20px;
    border-bottom: 1px solid var(--rule);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .plcard:last-child { border-bottom: 0; }
  .plcard-main { flex: 1 1 auto; min-width: 0; }
  .plcard-name {
    font-family: var(--serif);
    font-size: 19px;
    letter-spacing: -0.01em;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .plcard-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    flex: none;
  }
  .plcard-thesis {
    margin-top: 7px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ink-2);
    text-wrap: pretty;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .plcard-meta {
    margin-top: 10px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-4);
    font-variant-numeric: tabular-nums;
  }
  .plcard-status {
    margin-top: 9px;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--ink-3);
  }
  .plcard-arrows {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0;
    transition: opacity 120ms ease;
  }
  .plcard:hover .plcard-arrows,
  .plcard:focus-within .plcard-arrows { opacity: 1; }
  .plcard-arrow {
    position: relative;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    color: var(--ink-3);
    background: var(--bg);
    border: 1px solid var(--rule-strong);
    border-radius: 50%;
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
  }
  .plcard-arrow:hover {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
  }
  /* hover tooltip — says what clicking the arrow will do */
  .plcard-arrow::after {
    content: attr(data-tip);
    position: absolute;
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: var(--ink);
    padding: 4px 8px;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease;
    z-index: 5;
  }
  .plcard-arrow:hover::after { opacity: 1; }
  /* touch devices have no hover — keep the arrows reachable */
  @media (hover: none) {
    .plcard-arrows { opacity: 1; }
  }

  /* Footer (mobile) */
  .footer {
    padding: 24px 16px calc(28px + var(--tabbar-h));
    border-top: 1px solid var(--rule);
    display: flex;
    justify-content: space-between;
    font-size: 11.5px;
    color: var(--ink-4);
    letter-spacing: 0.02em;
  }
  .footer .brandlet { font-family: var(--serif); font-size: 14px; color: var(--ink-3); }
  .footer-schedule {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    text-align: right;
  }

  /* ------------------------------------------------- AUTH (login / verify) */
  .auth-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    padding: 16px;
  }
  .auth-card {
    width: 100%;
    max-width: 360px;
    padding: 32px 24px;
    border: 1px solid var(--rule);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.6);
  }
  .auth-title {
    font-family: var(--serif);
    font-size: 20px;
    color: var(--ink);
    margin-bottom: 6px;
  }
  .auth-sub {
    font-size: 13px;
    color: var(--ink-3);
    line-height: 1.5;
    margin: 0 0 20px;
  }
  /* Inline "log in here" link inside the landing blurb — reads as
     part of the sentence, not a separate button. */
  .auth-inline-link {
    color: var(--ink);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--rule-strong);
    text-underline-offset: 2px;
    cursor: pointer;
  }
  .auth-inline-link:hover { text-decoration-color: var(--ink); }
  /* Secondary page-level link (Privacy Policy, Back) — distinct from the
     inline link above: its own line, muted until hovered. */
  .auth-footer-link {
    display: inline-block;
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--ink-4);
    text-decoration: underline;
    text-decoration-color: var(--rule-strong);
    text-underline-offset: 2px;
    cursor: pointer;
  }
  .auth-footer-link:hover { color: var(--ink-3); }
  .auth-button {
    width: 100%;
    padding: 13px 12px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: var(--ink);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    min-height: 44px;
  }
  .auth-button:disabled { opacity: 0.6; cursor: default; }
  /* Username/password login form (basic_auth.py) — matches the existing
     auth-card palette rather than introducing new tokens. */
  .auth-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    margin-bottom: 12px;
    font: inherit;
    font-size: 14px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--rule-strong);
    border-radius: 6px;
  }
  .auth-input:focus { outline: none; border-color: var(--ink-3); }
  .auth-error {
    font-size: 13px;
    color: #c0392b;
    margin: 0 0 14px;
  }

  /* Privacy Policy — a real document, not a short auth-card blurb, so it
     gets its own wider reading column rather than being squeezed into
     .auth-card's 360px width. Same tokens/palette as the auth screens. */
  .privacy-screen {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    background: var(--bg);
    padding: 48px 16px;
  }
  .privacy-card {
    width: 100%;
    max-width: 640px;
  }
  .privacy-title {
    font-family: var(--serif);
    font-size: 22px;
    line-height: 1.3;
    color: var(--ink);
    margin-bottom: 4px;
  }
  .privacy-date {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--ink-4);
    margin-bottom: 24px;
  }
  .privacy-section {
    font-family: var(--serif);
    font-size: 17px;
    color: var(--ink);
    margin: 32px 0 14px;
    padding-top: 20px;
    border-top: 1px solid var(--rule);
  }
  .privacy-subhead {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--ink);
    margin: 22px 0 10px;
  }
  .privacy-subhead-minor {
    color: var(--ink-2);
    margin-top: 14px;
  }
  .privacy-p {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--ink-3);
    margin: 0 0 14px;
  }
  .privacy-list {
    margin: 0 0 14px;
    padding-left: 20px;
  }
  .privacy-list li {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--ink-3);
    margin-bottom: 8px;
  }
  .privacy-card > .auth-footer-link {
    margin-top: 12px;
  }
  /* Respect reduced-motion for the few transitions above. */
  @media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
  }

  /* =================================================================
     DESKTOP  (min-width: 640px)
     -----------------------------------------------------------------
     Restores the original composition exactly: 1320px max width, 48px
     gutters, the 5-column metrics grid, the top-nav, and the data
     table. The mobile-only elements (bottom tab bar, stat strip cards,
     company cards) are switched off here. Every value below is the
     pre-existing desktop value, so desktop rendering is unchanged.
     ================================================================= */
  @media (min-width: 640px) {
    :root { --tabbar-h: 0px; }

    /* ---- top bar ----
       Padding/gap here are the TABLET values (640-1023px) -- tighter than
       the original desktop numbers on purpose. Chrome will happily shrink
       nowrap flex children below their content width when a row is tight,
       but Safari won't: measured on real WebKit (iPad's engine, not just
       Chrome devtools) the ORIGINAL 48px padding / 40px gap / 28px nav gap
       needed ~716px to avoid overflowing -- above the mobile cutover
       (640px) but WITHIN real iPad viewport widths (iPad mini portrait is
       744px, and many Split View panes land narrower still). Past that
       point .topbar-inner overflows .topbar sideways, which the sticky
       bar doesn't contain, so the ENTIRE PAGE gains horizontal scroll and
       the profile/logout icon gets pushed off past the right edge --
       invisible, not just cramped. These tighter numbers keep the bar's
       required width under 640px with room to spare; the 1024px query
       below restores the original spacious desktop numbers byte-for-byte. */
    .topbar-inner {
      max-width: 1320px;
      margin: 0 auto;
      padding: 18px 28px 16px;
      display: flex;
      /* `center`, not `baseline`: the profile icon (ProfileMenu, a round
         button with no text of its own) has no real baseline to align to,
         so browsers fall back to its bottom margin edge -- several px
         below where the brand/nav/refresh text baselines actually sit.
         `center` lines up every item (text and icon alike) on the bar's
         true vertical middle instead. */
      align-items: center;
      gap: 20px;
    }
    .brand { font-size: 22px; }
    .nav {
      display: flex;
      gap: 16px;
      margin-left: 8px;
    }
    .nav a {
      font-size: 13px;
      color: var(--ink-3);
      padding-bottom: 2px;
      border-bottom: 1px solid transparent;
      transition: color 120ms ease, border-color 120ms ease;
      cursor: pointer;
    }
    .nav a:hover { color: var(--ink); }
    .nav a.active {
      color: var(--ink);
      border-bottom-color: var(--ink);
    }
    /* Company hover dropdown (Portfolio Companies / Pipeline). Resources is
       its own standalone nav link now, not part of this dropdown -- see
       TopBar in App.jsx; it just uses the plain .nav a styling above. */
    .nav-dd { position: relative; display: inline-flex; align-items: center; }
    .nav-caret { font-size: 8px; margin-left: 4px; color: var(--ink-4); }
    .nav-dd-menu {
      position: absolute;
      top: 100%;
      left: 0;
      min-width: 190px;
      background: var(--bg);
      border: 1px solid var(--rule-strong);
      border-radius: 4px;
      box-shadow: 0 12px 30px rgba(26, 26, 26, 0.18);
      padding: 5px 0;
      display: none;
      z-index: 200;
    }
    .nav-dd:hover .nav-dd-menu { display: block; }
    .nav-dd-menu a {
      display: block;
      padding: 8px 16px;
      font-size: 13px;
      color: var(--ink-2);
      border-bottom: none;
      white-space: nowrap;
    }
    .nav-dd-menu a:hover { color: var(--accent); background: rgba(212, 83, 14, 0.06); }
    .nav-dd-menu a.dd-disabled { color: var(--ink-4); opacity: 0.55; cursor: default; }
    .nav-dd-menu a.dd-disabled:hover { color: var(--ink-4); background: none; }
    .refresh {
      margin-left: auto;
      font-size: 12px;
    }
    .refresh + .refresh { display: block; }
    .refresh .dot { margin-right: 8px; }
    .refresh button { margin-left: 12px; }
    .topbar-refresh { margin-left: auto; font-size: 12px; }
    /* Tablet band only -- see the .topbar-inner comment above. The base
       (mobile-first) rule gives this its own 12px margin-left on top of
       whatever the parent flex `gap` already provides; that's fine when
       there's slack (real desktop) but is exactly the kind of redundant
       spacing this band can't afford. Restored at 1024px below. */
    .profile-menu { margin-left: 4px; }

    /* ---- bottom tab bar: mobile-only, gone on desktop ---- */
    .tabbar { display: none; }

    /* ---- restore the original, spacious desktop numbers ----
       1024px is comfortably past every real iPad width (max 834px
       portrait) so this never overlaps the danger zone the tighter
       tablet values above exist for -- it only ever applies on an actual
       laptop/desktop-size viewport, where the original design had room
       to breathe and should look exactly as it did before. */
    @media (min-width: 1024px) {
      .topbar-inner { padding: 18px 48px 16px; gap: 40px; }
      .nav { gap: 28px; }
      .profile-menu { margin-left: 12px; }
    }

    /* ---- screen shell ---- */
    .screen {
      max-width: 1320px;
      margin: 0 auto;
      padding: 64px 48px 96px;
    }
    .screen + .screen { border-top: 1px solid var(--rule); }

    .screen-label {
      display: flex;
      align-items: baseline;
      gap: 16px;
      margin-bottom: 48px;
    }
    .screen-label .title { font-size: 32px; }

    /* ---- scroll indicator ----
       No blanket hide here anymore: .metrics becomes a grid and
       .company-chips wraps normally at this breakpoint, so their own
       indicators naturally render nothing (useHScrollProgress reads real
       scrollWidth/clientWidth and stays null once there's nothing to
       scroll) — but the Holdings table's own .table-wrap (above) DOES
       still overflow at tablet widths, and needs its indicator to show. */

    /* ---- metrics: strip → grid ---- */
    .metrics {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 0;
      overflow: visible;
      border-top: 1px solid var(--rule-strong);
      border-bottom: 1px solid var(--rule);
      margin: 0 0 44px;
      padding: 0;
    }
    .metric {
      min-width: 0;
      padding: 22px 28px 24px;
      border: 0;
      border-right: 1px solid var(--rule);
      border-radius: 0;
      background: none;
    }
    .metric:last-child { border-right: 0; }
    .metric .label {
      font-family: var(--sans);
      font-size: 11px;
      letter-spacing: 0.12em;
      margin-bottom: 14px;
      /* "Current NAV" is the only two-word label of the five (AUM/MOIC/
         DPI/IRR are all one word) -- below ~900px its column gets too
         narrow for it to fit on one line while the others still do, so
         it alone wraps. Without a reserved height here that pushes just
         THIS tile's value down relative to the other four, out of line
         with them. min-height reserves 2 lines' worth for every label
         regardless of whether it actually wraps, so all five values
         still start at the same y position either way. */
      min-height: 3em;
    }
    .metric .value { font-size: 28px; line-height: 1.5; }
    .metric .delta {
      display: block;
      font-size: 12px;
      margin-top: 6px;
    }

    /* ---- portfolio: cards → table ---- */
    .cards { display: none; }
    /* The table's 9 columns don't fit a tablet-width viewport (iPad
       portrait/landscape both fall in this >=640px "desktop" range but are
       far short of the 1320px this layout was designed for). Without its
       own overflow-x, the table forced the whole PAGE to scroll
       horizontally to reach the trailing columns -- dragging the sticky
       topbar sideways along with it. Containing the scroll here keeps that
       drag out of the topbar entirely; HScrollIndicator (rendered as its
       sibling in HoldingsScreen) gives it the same visible scroll cue as
       the mobile metrics strip / company-chips instead of a bare, easy-to-
       miss native scrollbar. */
    .table-wrap {
      display: block;
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .table-wrap::-webkit-scrollbar { display: none; }

    /* ---- signals feed: stacked → 3-column grid ---- */
    .feed-head {
      gap: 18px;
      padding-bottom: 22px;
    }
    /* Desktop shows all filters; the mobile "More filters" toggle is gone and
       the secondary panel is always open (as its own flex column, matching the
       original all-rows-visible layout). */
    .filters-more-toggle { display: none; }
    .filters-more {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }
    .signal-item {
      display: grid;
      grid-template-columns: 88px 1fr 180px;
      gap: 32px;
      padding: 26px 4px;
      align-items: baseline;
    }
    .signal-item:hover { background: rgba(26, 26, 26, 0.02); }
    .signal-item .ts { padding-top: 4px; margin-bottom: 0; }
    .signal-item .body .top { flex-wrap: nowrap; }
    .signal-item .src {
      text-align: right;
      margin-top: 0;
      padding-top: 4px;
    }

    /* ---- filter links: back to tight inline text on desktop ---- */
    .filter-link {
      display: inline;
      min-height: 0;
      padding-bottom: 1px;
      box-shadow: none;
    }
    .filter-link.active {
      border-bottom-color: var(--accent);
      box-shadow: none;
    }

    /* ---- company filter: back to a normal wrapping row on desktop ---- */
    /* The label + .company-chips wrapper collapse back into one wrapping flex
       row: the chips track stops scrolling and just wraps inline alongside the
       label, exactly as the original single .filter-row did. */
    .filter-row.company-filter {
      flex-wrap: wrap;
      align-items: baseline;
    }
    .company-chips {
      flex: 1 1 auto;
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 12px;
      overflow-x: visible;
      margin-right: 0;
      padding-right: 0;
      -webkit-mask-image: none;
      mask-image: none;
    }
    .company-chips .filter-sep { display: inline; }

    /* ---- resources: fixed 3-per-row grid ---- */
    .resource-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .resource-region + .resource-region { margin-top: 44px; }

    /* ---- pipeline: three-column deal-flow board with column rules
       (adapted from the layout handoff — column shell only, not card style). */
    .pipeline-board { grid-template-columns: repeat(3, 1fr); }
    .pipeline-col {
      padding: 24px 24px 8px;
      border-right: 1px solid var(--rule);
      border-bottom: 0;
      min-height: 520px;
    }
    .pipeline-col:last-child { border-right: 0; }
    .pipeline-col-head { padding-bottom: 22px; margin-bottom: 8px; }

    /* ---- footer ---- */
    .footer {
      max-width: 1320px;
      margin: 0 auto;
      padding: 28px 48px 48px;
    }

    /* ---- auth ---- */
    .auth-card { width: 360px; padding: 40px 36px; }
    .auth-button { padding: 10px 12px; font-size: 13.5px; }
  }

  /* =================================================================
     COMPANY PAGE  (/company/:slug)
     -----------------------------------------------------------------
     New classes only — nothing above is overridden. Written fluid so
     the page reads on phone and desktop without its own breakpoint,
     except the metrics grid tweak inside the existing 640px query.
     ================================================================= */
  .co-link { cursor: pointer; }
  .co-link:hover { color: var(--accent); }

  .company-page .screen { padding-bottom: 64px; }

  .cp-back {
    display: inline-block;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 22px;
    cursor: pointer;
  }
  .cp-back:hover { color: var(--accent); }

  .cp-head {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 34px;
    flex-wrap: wrap;
  }
  .cp-head .title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 30px;
    letter-spacing: -0.015em;
    color: var(--ink);
  }
  .cp-head-text { flex: 1 1 240px; }
  .cp-badge {
    margin-left: 12px;
    vertical-align: middle;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-4);
    border: 1px solid var(--rule-strong);
    border-radius: 2px;
    padding: 3px 7px;
  }
  .cp-thesis { margin-top: 6px; font-size: 13.5px; color: var(--ink-3); }

  .co-logo {
    border-radius: 8px;
    border: 1px solid var(--rule);
    background: #fff;
    object-fit: contain;
    flex: 0 0 auto;
  }
  .co-logo.monogram {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--serif);
    font-size: 22px;
    letter-spacing: 0.02em;
  }

  .cp-download {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    background: none;
    border: 1px solid var(--accent);
    border-radius: 3px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
  }
  .cp-download:hover { background: var(--accent); color: #fff; }

  .cp-section { margin-bottom: 40px; }
  /* per-company news: story count next to the title + a compact filter bar
     (reuses the News screen's .filter-row/.filter-link/.date-input styles) */
  .cp-news-count {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: none;
    color: var(--ink-4);
  }
  /* the per-company news filter bar reuses NewsScreen's .feed-head styling
     verbatim for consistency; just give it a little breathing room under the
     section title here. */
  .cp-section .feed-head { margin-top: 10px; margin-bottom: 8px; }
  /* Notes section specifically (NotesSection's own .notes-section wrapper
     class -- NOT .cp-section.xr-section alone, which ExternalResearch also
     uses with the identical class combination, so that wouldn't uniquely
     target Notes). Cancel the generic .feed-head border-bottom/padding-
     bottom above so it doesn't add a second line below the toggle (which
     already carries its own bottom border -- see .notes-filters-toggle);
     margin-top stays near-zero so "Filters" sits close under "Notes",
     since the title's OWN divider/margin is also cancelled just below. */
  .notes-section .feed-head {
    border-bottom: none;
    padding-bottom: 0;
    margin-top: 2px;
    margin-bottom: 8px;
  }
  /* No divider and a tight margin under "Notes" specifically -- every
     OTHER section title keeps its own border-bottom (the generic rule
     right below); Notes just visually groups its title with the Filters
     toggle immediately under it instead of stacking two separate lines. */
  .notes-section .cp-section-title {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 4px;
  }
  .cp-section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-4);
    border-bottom: 1px solid var(--rule-strong);
    padding-bottom: 9px;
    margin-bottom: 16px;
  }
  .cp-src {
    font-family: var(--sans);
    font-size: 11.5px;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--ink-4);
  }

  /* Confidence dots — 🟢 sourced / 🟡 weak / ⚪ manual. Hover for the
     provenance note. Drawn, not emoji, so they render identically
     everywhere including print. */
  .conf {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 2px;
    transform: translateY(-1px);
    cursor: help;
  }
  .conf-green { background: #3d7a44; }
  .conf-amber { background: #d4830e; }
  .conf-grey  { background: transparent; border: 1.5px solid var(--ink-4); }

  /* grounded summary (v2): labeled lines + a collapsed source list. Kept
     deliberately quiet — a label, a sentence, and provenance one click away. */
  .cp-summary-lines { display: flex; flex-direction: column; gap: 10px; margin: 2px 0 4px; }
  .cp-summary-line {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 14px;
    align-items: baseline;
  }
  .cp-summary-line-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-4);
    padding-top: 2px;
  }
  .cp-summary-line-text { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
  @media (max-width: 640px) {
    .cp-summary-line { grid-template-columns: 1fr; gap: 2px; }
  }
  .cp-summary-sources { margin-top: 14px; font-size: 11.5px; }
  .cp-summary-sources-toggle {
    cursor: pointer;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-4);
    list-style: none;
    user-select: none;
  }
  .cp-summary-sources-toggle::-webkit-details-marker { display: none; }
  .cp-summary-sources-toggle::before { content: "▸ "; }
  .cp-summary-sources[open] .cp-summary-sources-toggle::before { content: "▾ "; }
  .cp-summary-sources-list {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    color: var(--ink-4);
    line-height: 1.6;
  }
  .cp-summary-source a { border-bottom: 1px solid var(--rule-strong); }
  .cp-summary-source a:hover { color: var(--accent); }

  /* valuation provenance/staleness marker (ValuationFlag) + manual round form */
  .valflag-wrap { position: relative; display: inline-flex; vertical-align: middle; margin-left: 5px; }
  .valflag {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: none;
    padding: 0;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
    cursor: pointer;
    color: #fff;
  }
  .valflag-warn { background: var(--danger, #c0392b); }
  .valflag-stale { background: #d98a2b; }
  .valflag-info { background: var(--ink-4); }
  .valflag-ok { background: #3a8a4f; }
  .valflag-pop {
    /* position (fixed top/left/width) is set inline by ValuationFlag and
       clamped to the viewport, so this never overflows its container. */
    z-index: 50;
    padding: 8px 10px;
    font-family: var(--sans);
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink-2);
    background: var(--bg, #fff);
    border: 1px solid var(--rule-strong);
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  }
  .cp-latest-round { margin-top: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .cp-latest-round-editing { flex-direction: column; align-items: flex-start; gap: 8px; }
  .cp-latest-round-hint { font-size: 12px; color: var(--ink-4); line-height: 1.5; }
  .cp-latest-round-fields { display: flex; gap: 14px; flex-wrap: wrap; }
  .cp-latest-round-fields .xr-lbl input { min-width: 120px; }

  .cp-empty {
    padding: 18px 2px;
    font-size: 13px;
    color: var(--ink-4);
  }

  .cp-tracxn-url {
    margin-top: 8px;
    font-size: 11.5px;
    color: var(--ink-4);
  }
  .cp-src-inline a { border-bottom: 1px solid var(--rule-strong); word-break: break-all; }
  .cp-src-inline a:hover { color: var(--accent); }
  .cp-tracxn-url .xr-lbl { max-width: 480px; }
  .cp-tracxn-url .xr-confirm,
  .cp-tracxn-url .xr-mini { margin-top: 6px; }
  .cp-amber { color: #a2650b; }

  .cp-shareclass {
    margin-top: 14px;
    font-size: 13px;
    color: var(--ink-2);
    display: flex;
    gap: 10px;
    align-items: baseline;
    flex-wrap: wrap;
  }
  .cp-inline-label {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-4);
  }

  /* Company-page tables: always visible (the base .table-wrap is a
     mobile-hidden portfolio-table shell — cp-table-wrap overrides that). */
  .cp-table-wrap { display: block !important; width: 100%; overflow-x: auto; }
  .cp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
  .cp-table th {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-4);
    font-weight: 400;
    text-align: left;
    padding: 8px 10px 8px 2px;
    border-bottom: 1px solid var(--rule-strong);
    white-space: nowrap;
  }
  .cp-table th.r, .cp-table td.r { text-align: right; }
  .cp-table td {
    padding: 10px 10px 10px 2px;
    border-bottom: 1px solid var(--rule);
    color: var(--ink-2);
    vertical-align: baseline;
  }
  .cp-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
  /* PPS sub-line under Entry valuation/Current NAV in TrancheTable --
     same "smaller, muted text below the main value" shape as the
     Holdings table's own table.portfolio td.num .sub. */
  .cp-table td.num .sub {
    display: block;
    font-size: 11px;
    color: var(--ink-4);
    margin-top: 4px;
    white-space: normal;
  }
  .cp-table .round-label { margin-left: 6px; }
  .cp-table .round-label.link { border-bottom: 1px solid var(--rule-strong); }
  .cp-table .round-label.link:hover { color: var(--accent); }
  .cp-table .src-cell { font-size: 11.5px; color: var(--ink-4); }
  /* Coverage chip: "N outlets reported this round" — signals the row is a
     grouped cluster, not a single article. */
  .cp-table .round-coverage {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 6px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    font-size: 10px;
    color: var(--ink-3);
    white-space: nowrap;
  }
  .cp-table tr.alto-row td { background: rgba(212, 83, 14, 0.05); }
  /* Per-row funding-round editing (RoundRow's edit mode) — inputs sized to
     sit inline in a table cell rather than looking like a separate form. */
  .round-edit-input {
    width: 100%;
    font: inherit;
    font-size: 13px;
    color: var(--ink);
    background: none;
    border: 0;
    border-bottom: 1px solid var(--rule-strong);
    padding: 2px 0;
  }
  .round-edit-input:focus { outline: none; border-bottom-color: var(--accent); }
  .round-edit-input-num { text-align: right; }
  .round-edit-actions { white-space: nowrap; }
  .round-edit-actions .xr-error { padding: 4px 0 0; text-align: right; }

  .cp-comp-tickers { font-size: 12.5px; color: var(--ink-3); margin-bottom: 12px; }

  /* =================================================================
     PRINTABLE ONE-PAGER (Alto house format)
     -----------------------------------------------------------------
     .report-sheet is rendered by CompanyPage but hidden on screen; when
     printing from a company page the sheet swaps in and the app UI
     swaps out. Printing from the dashboard is unaffected (no
     .report-sheet exists there).
     ================================================================= */
  .report-sheet { display: none; }

  @media print {
    @page { size: A4; margin: 12mm; }
    body { background: #fff; }
    .company-page .cp-ui, .tabbar { display: none !important; }
    .report-sheet { display: block; color: #1a1a1a; font-size: 10.5pt; }

    .rp-head {
      display: flex;
      align-items: center;
      gap: 12px;
      border-bottom: 2px solid #1a1a1a;
      padding-bottom: 8px;
      margin-bottom: 12px;
    }
    .rp-head > div:nth-child(2) { flex: 1; }
    .rp-name { font-family: var(--serif); font-size: 17pt; }
    .rp-thesis { font-size: 9.5pt; color: #555; margin-top: 2px; }
    .rp-brand { font-family: var(--serif); font-size: 14pt; }

    .rp-block { margin-bottom: 10pt; }
    .rp-block-title {
      font-family: var(--mono);
      font-size: 8pt;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #666;
      border-bottom: 1px solid #999;
      padding-bottom: 2pt;
      margin-bottom: 5pt;
      display: flex;
      justify-content: space-between;
    }
    .rp-src { text-transform: none; letter-spacing: 0.02em; color: #888; }
    .rp-block p, .rp-block ul { margin: 0; font-size: 9.5pt; line-height: 1.5; }
    .rp-block ul { padding-left: 14pt; }
    .rp-block sup { font-size: 6.5pt; color: #666; }
    .rp-block table { width: 100%; border-collapse: collapse; font-size: 9pt; }
    .rp-block th {
      font-family: var(--mono); font-size: 7.5pt; letter-spacing: 0.1em;
      text-transform: uppercase; color: #666; font-weight: 400;
      text-align: left; border-bottom: 1px solid #999; padding: 2pt 6pt 2pt 0;
    }
    .rp-block td { border-bottom: 0.5pt solid #ccc; padding: 3pt 6pt 3pt 0; vertical-align: baseline; }

    .rp-footer {
      margin-top: 12pt;
      border-top: 1px solid #999;
      padding-top: 5pt;
      font-size: 7.5pt;
      color: #666;
      line-height: 1.5;
    }
    .rp-stamp { margin-top: 3pt; font-family: var(--mono); font-size: 7pt; }
  }

  /* Multi-tranche company table (TrancheTable) — series/tranches as rows,
     metrics as columns, a Total row at the bottom, all in ONE continuous
     .cp-table rather than a separate header + stat-grid per tranche. */
  .cp-tranche-row-label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--ink-3);
    white-space: nowrap;
  }
  /* "Exited: <date>" here, not uppercase like .cp-badge's usual look --
     same sentence-case rule as the Holdings page's "Series X"/"Exited:
     ..." sub-lines (see .company-series). */
  .cp-tranche-exited-badge {
    text-transform: none;
    margin-left: 8px;
  }
  /* Total row reads as a SUMMARY of the tranche rows above it -- bold
     text plus a heavier top rule is what keeps it from looking like just
     one more, unlabeled tranche. */
  .cp-tranche-total-row td {
    font-weight: 600;
    border-top: 2px solid var(--rule-strong);
  }
  .cp-tranche-total-row .cp-tranche-row-label { color: var(--accent); }

  /* ------------------------------------------------- COMPANY DIRECTORY (Screen 03) */
  /* Screen 03 is now a directory of cards into /company/:slug rather than an
     inline company view. One card per holding; the whole card is the link. */
  .co-directory {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .co-dir-card {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    text-align: left;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--rule);
    border-radius: 4px;
    font: inherit;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 120ms ease, background-color 120ms ease;
  }
  .co-dir-card:hover {
    border-color: var(--rule-strong);
    background: rgba(255, 255, 255, 0.75);
  }
  /* ---- tile actions menu (⋮), 2026-08-10 -- same pure-CSS hover-reveal
     pattern as .wtg-company-menu (Watchlist Temp board's own tile menu),
     just scoped to .co-dir-card's hover instead. Only ever holds "Add
     Logo"/"Edit Logo" -- a real position has no other per-tile action. ---- */
  .co-dir-menu {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
  }
  .co-dir-menu-btn {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    color: var(--ink-4);
    background: transparent;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 120ms ease, color 120ms ease;
  }
  .co-dir-card:hover .co-dir-menu-btn { opacity: 1; }
  .co-dir-menu:hover .co-dir-menu-btn,
  .co-dir-menu-btn:focus-visible { opacity: 1; color: var(--ink-2); }
  /* Tablet/mobile (2026-08-10): opacity-on-hover has no equivalent on a
     touchscreen -- there's no hover state to reveal the button, so it
     just never appeared. (hover: none) targets the actual input method,
     not a viewport width, so an iPad in landscape (well past the 640px
     desktop-nav breakpoint) still gets this -- it's still a touchscreen. */
  @media (hover: none) {
    .co-dir-menu-btn { opacity: 1; }
  }
  .co-dir-menu-dd {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 150px;
    background: var(--bg);
    border: 1px solid var(--rule-strong);
    border-radius: 4px;
    box-shadow: 0 12px 30px rgba(26, 26, 26, 0.18);
    padding: 5px 0;
    display: none;
    z-index: 200;
  }
  .co-dir-menu:hover .co-dir-menu-dd,
  .co-dir-menu-dd.open { display: block; }
  .co-dir-menu-dd a {
    display: block;
    padding: 7px 14px;
    font-size: 12.5px;
    color: var(--ink-2);
    white-space: nowrap;
    cursor: pointer;
  }
  .co-dir-menu-dd a:hover { color: var(--accent); background: rgba(212, 83, 14, 0.06); }
  .co-dir-body { flex: 1 1 auto; min-width: 0; }
  .co-dir-name {
    font-family: var(--serif);
    font-size: 17px;
    letter-spacing: -0.01em;
    color: var(--ink);
  }
  .co-dir-tag {
    margin-left: 10px;
    vertical-align: middle;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-4);
    border: 1px solid var(--rule-strong);
    border-radius: 2px;
    padding: 2px 6px;
  }
  .co-dir-sub {
    font-size: 12px;
    color: var(--ink-4);
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
  }
  .co-dir-arrow {
    flex: 0 0 auto;
    color: var(--ink-4);
    font-size: 16px;
    transition: transform 120ms ease, color 120ms ease;
  }
  .co-dir-card:hover .co-dir-arrow { color: var(--accent); transform: translateX(3px); }

  @media (min-width: 640px) {
    .co-directory { grid-template-columns: 1fr 1fr; gap: 12px; }
  }

  /* ---- section headers within the Companies screen (Portfolio / Watchlist) */
  .co-section-label {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 26px 0 12px;
  }
  .co-watchlist-label { margin-top: 40px; }
  .co-section-note {
    font-size: 11px;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--ink-4);
  }

  /* ---- add-a-company form ---- */
  .wl-add {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
  }
  .wl-add-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 12px;
    font: inherit;
    font-size: 14px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--rule);
    border-radius: 4px;
  }
  .wl-add-input:focus {
    outline: none;
    border-color: var(--accent);
  }
  .wl-add-btn {
    flex: 0 0 auto;
    padding: 10px 18px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 120ms ease;
  }
  .wl-add-btn:disabled { opacity: 0.45; cursor: default; }
  .wl-add-error {
    font-size: 12px;
    color: var(--danger, #c0392b);
    margin: 2px 0 8px;
  }

  /* ---- watchlist card: div (not button) so it can hold a remove control */
  .co-dir-card-wl { position: relative; }
  .wl-status { display: flex; align-items: center; gap: 7px; }
  .wl-status-active { color: var(--ink-3); }
  .wl-status-error { color: var(--danger, #c0392b); }
  .wl-spinner {
    flex: 0 0 auto;
    width: 11px;
    height: 11px;
    border: 2px solid var(--rule-strong);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: wl-spin 0.7s linear infinite;
  }
  @keyframes wl-spin { to { transform: rotate(360deg); } }
  .wl-remove {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    color: var(--ink-4);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease;
  }
  .wl-remove:hover { color: var(--danger, #c0392b); border-color: var(--rule); }


  /* ------------------------------------------------- WATCHLIST TEMP (group board) */
  /* Sector-style cards clustering the registry watchlist into custom
     groups -- see data/news/watchlist_groups.py and App.jsx's
     WatchlistTempScreen. Each card mirrors .co-dir-card's quiet bordered-
     box language rather than introducing a new visual system. */
  .wtg-loading, .wtg-empty-board {
    padding: 16px 4px;
    color: var(--ink-4);
    font-size: 13px;
  }
  .wtg-group {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 16px 18px 18px;
    margin-bottom: 16px;
  }
  .wtg-group-ungrouped { border-style: dashed; }
  .wtg-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
  }
  .wtg-group-name {
    font-family: var(--serif);
    font-size: 18px;
    letter-spacing: -0.01em;
    color: var(--ink);
  }
  .wtg-group-count {
    margin-left: 10px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--ink-4);
  }
  .wtg-group-actions {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
  }
  .wtg-icon-btn {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    line-height: 1;
    color: var(--ink-3);
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: 50%;
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease;
  }
  .wtg-icon-btn:hover { color: var(--accent); border-color: var(--accent); }
  .wtg-icon-btn-danger { font-size: 12px; }
  .wtg-icon-btn-danger:hover { color: var(--danger, #c0392b); border-color: var(--rule-strong); }
  /* ---- "+" add-a-company form: same shape as .wl-add, plus a bit of
     breathing room below since it sits inside a group card ---- */
  .wtg-add-form { max-width: 420px; margin-bottom: 14px; }
  .wtg-empty {
    font-size: 12.5px;
    color: var(--ink-4);
  }
  .wtg-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .wtg-company {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--rule);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease;
  }
  .wtg-company:hover {
    border-color: var(--rule-strong);
    background: rgba(255, 255, 255, 0.9);
  }
  .wtg-company-body { flex: 1 1 auto; min-width: 0; }
  .wtg-company-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }
  .wtg-company-name {
    font-size: 13.5px;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .wtg-company-tag-badge {
    flex: none;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent, #2e6f52);
    background: rgba(46, 111, 82, 0.1);
    border: 1px solid rgba(46, 111, 82, 0.25);
    border-radius: 3px;
    padding: 1px 5px;
  }
  .wtg-company-status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    font-size: 11px;
    color: var(--ink-4);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .wtg-company-status.wl-status-active { color: var(--ink-3); }
  .wtg-company-status.wl-status-error { color: var(--danger, #c0392b); }
  /* ---- tile actions menu (⋮), replaced a bare × 2026-07-31 -- same
     pure-CSS hover-reveal pattern as .nav-dd/.nav-dd-menu (TopBar's own
     "Opportunities" dropdown), just sized for a small tile corner. ---- */
  .wtg-company-menu {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 1;
  }
  .wtg-company-menu-btn {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    color: var(--ink-4);
    background: transparent;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 120ms ease, color 120ms ease;
  }
  .wtg-company:hover .wtg-company-menu-btn { opacity: 1; }
  .wtg-company-menu:hover .wtg-company-menu-btn,
  .wtg-company-menu-btn:focus-visible { opacity: 1; color: var(--ink-2); }
  /* Tablet/mobile (2026-08-10): see .co-dir-menu-btn's own (hover: none)
     comment above -- same reasoning, same fix, for this board's tiles. */
  @media (hover: none) {
    .wtg-company-menu-btn { opacity: 1; }
  }
  .wtg-company-menu-dd {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 150px;
    background: var(--bg);
    border: 1px solid var(--rule-strong);
    border-radius: 4px;
    box-shadow: 0 12px 30px rgba(26, 26, 26, 0.18);
    padding: 5px 0;
    display: none;
    z-index: 200;
  }
  .wtg-company-menu:hover .wtg-company-menu-dd,
  .wtg-company-menu-dd.open { display: block; }
  .wtg-company-menu-dd a {
    display: block;
    padding: 7px 14px;
    font-size: 12.5px;
    color: var(--ink-2);
    white-space: nowrap;
    cursor: pointer;
  }
  .wtg-company-menu-dd a:hover { color: var(--accent); background: rgba(212, 83, 14, 0.06); }
  .wtg-company-menu-dd-danger:hover { color: var(--danger, #c0392b) !important; background: rgba(192, 57, 43, 0.06) !important; }
  .wtg-add-sector-btn {
    display: inline-block;
    padding: 10px 20px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    background: transparent;
    border: 1px dashed var(--rule-strong);
    border-radius: 999px;
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease;
  }
  .wtg-add-sector-btn:hover { color: var(--accent); border-color: var(--accent); }
  .wtg-new-group-form { max-width: 420px; }
  .wtg-cancel-btn {
    flex: 0 0 auto;
    padding: 10px 14px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--ink-4);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
  }
  .wtg-cancel-btn:hover { color: var(--ink-2); }

  @media (min-width: 640px) {
    .wtg-grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (min-width: 900px) {
    .wtg-grid { grid-template-columns: repeat(4, 1fr); }
  }


  /* ---------------------------------------------------------------- EXTERNAL
     RESEARCH (third-party uploaded docs). Styled to sit quietly inside the
     Company page's editorial system — same mono labels, thin rules, and
     restrained accent as the other cp-sections; no loud tinted box. */
  .xr-title { align-items: center; }
  .xr-upload-btn {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    background: none;
    border: 1px solid var(--accent);
    border-radius: 3px;
    padding: 7px 12px;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
  }
  .xr-upload-btn:hover { background: var(--accent); color: #fff; }

  .xr-pending {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--mono); font-size: 11.5px; color: var(--ink-2);
    border: 1px solid var(--rule); border-left: 2px solid var(--signal-med);
    border-radius: 3px; padding: 9px 12px; margin-bottom: 14px;
  }
  .xr-pending-err { border-left-color: var(--accent); }

  /* ------------------------------------------------------------------ NOTES
     (internal meeting/call notes, ingested via Power Automate + the
     notes-ingest Worker). Filter bar reuses the News screen's own
     .feed-head/.filter-row/.date-input/.filters-more styling as-is (see
     NotesSection) — no new pattern introduced; a .cp-table below it, same
     visual system as the rest of the Company page. */
  .notes-table td { vertical-align: top; }
  .notes-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
  .notes-source-cell { max-width: 140px; }
  .notes-empty-field { color: var(--ink-4); }
  .notes-content-title { font-weight: 600; color: var(--ink); margin-bottom: 2px; }
  /* Collapsed-by-default row: only Date/Source/Title show until this
     button is clicked -- see NoteRow's `expanded` state. Reset to a plain
     clickable line (no button chrome) so it reads exactly like the static
     .notes-content-title it replaces, just with a trailing chevron. */
  .notes-row-toggle {
    display: flex;
    align-items: baseline;
    gap: 8px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
  }
  .notes-row-toggle:hover .notes-content-title { color: var(--accent); }
  .notes-sector-badge { margin-left: 0; flex: 0 0 auto; }
  .notes-row-toggle-icon {
    flex: 0 0 auto;
    font-size: 10px;
    color: var(--ink-4);
  }
  .notes-content-byline {
    font-size: 11px;
    color: var(--ink-4);
    margin-bottom: 6px;
  }
  .notes-content-body {
    white-space: pre-wrap;
    max-width: 480px;
  }
  .notes-content-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .notes-expand-btn {
    display: block;
    margin-top: 4px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }
  .notes-expand-btn:hover { text-decoration: underline; }
  /* Attachments fold into the Content cell rather than getting their own
     mostly-empty column — a small disclosure toggle that only exists when
     a note actually has something attached. */
  .notes-attach-toggle {
    display: block;
    margin-top: 6px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }
  .notes-attach-toggle:hover { color: var(--accent); }
  .notes-media { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
  .notes-media-thumb {
    display: block;
    width: 44px; height: 44px;
    border: 1px solid var(--rule-strong);
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
  }
  .notes-media-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .notes-media-file {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border: 1px solid var(--rule-strong);
    border-radius: 4px;
    font-size: 11.5px;
    color: var(--ink-2);
    text-decoration: none;
    max-width: 160px;
  }
  .notes-media-file:hover { border-color: var(--accent); color: var(--accent); }
  .notes-media-file-ext {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.05em;
    color: #fff;
    background: var(--ink-3);
    border-radius: 2px;
    padding: 1px 4px;
    flex-shrink: 0;
  }
  .notes-media-file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Per-row edit-in-place (source / title / sender) — same visual pattern
     as the Funding rounds table's RoundRow, reusing .round-edit-input/
     .round-edit-actions rather than inventing a second input style. */
  .notes-title-input { font-weight: 600; margin-bottom: 4px; }
  .notes-sender-input { font-size: 12px; margin-bottom: 6px; }
  .notes-edit-col { width: 1%; white-space: nowrap; text-align: right; }
  .notes-edit-icon {
    background: none;
    border: none;
    color: var(--ink-4);
    cursor: pointer;
    font-size: 13px;
    padding: 2px 4px;
    border-radius: 3px;
  }
  .notes-edit-icon:hover { color: var(--accent); background: rgba(212, 83, 14, 0.08); }
  tr.notes-row-editing { background: rgba(212, 83, 14, 0.04); }

  /* confirmed doc — a quiet collapsible row, not a boxed card */
  .xr-doc { border-bottom: 1px solid var(--rule); }
  .xr-doc:last-child { border-bottom: none; }
  .xr-doc-head {
    display: flex; align-items: baseline; gap: 10px;
    cursor: pointer; padding: 12px 2px;
  }
  .xr-doc-firm {
    flex: 1; min-width: 0;
    font-family: var(--serif); font-size: 15px; color: var(--ink);
  }
  .xr-doc-body { padding: 2px 0 6px; }
  .xr-doc-meta { font-size: 11.5px; color: var(--ink-4); margin: 0 0 13px; }
  .xr-chevron {
    color: var(--ink-4); font-size: 9px; line-height: 1;
    transform: translateY(-1px); transition: transform 120ms ease;
  }
  .xr-chevron-open { transform: translateY(-1px) rotate(90deg); }
  .xr-edit-btn {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ink-4); background: none;
    border: none; border-bottom: 1px solid var(--rule-strong);
    padding: 2px 0; cursor: pointer; white-space: nowrap;
  }
  .xr-edit-btn:hover { color: var(--accent); border-color: var(--accent); }

  /* Each field is its own separated block — label above value, divider between.
     A fixed two-column grid crushes long values on a phone; this stays readable
     at every width. */
  /* ---- modular tiles / cards (confirmed doc) ----
     Evolves the site's .metric tile (hairline border, mono label, serif value)
     into rounded, button-like modules; valuation + revenue carry the orange
     accent to mark them as the headline facts. */
  .xr-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
  }
  .xr-tile, .xr-card {
    border: 1px solid var(--rule);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.5);
    padding: 12px 14px;
    transition: box-shadow 140ms ease, border-color 140ms ease;
  }
  .xr-tile:hover, .xr-card:hover {
    border-color: var(--rule-strong);
    box-shadow: 0 6px 18px -8px rgba(26, 26, 26, 0.18);
  }
  .xr-tile-key { border-color: rgba(212, 83, 14, 0.35); background: rgba(212, 83, 14, 0.05); }
  .xr-tile-key:hover { border-color: var(--accent); box-shadow: 0 6px 18px -8px rgba(212, 83, 14, 0.28); }
  .xr-tile-label, .xr-card-label {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--ink-4); margin-bottom: 7px;
  }
  .xr-tile-value { font-family: var(--serif); font-size: 20px; line-height: 1.15; color: var(--ink); }
  .xr-tile-value-sm { font-size: 15px; line-height: 1.3; }
  .xr-tile-key .xr-tile-value { color: var(--accent); }
  .xr-tile-sub { font-size: 11px; color: var(--ink-4); margin-top: 3px; text-transform: capitalize; }
  .xr-substats { display: flex; flex-direction: column; gap: 5px; }
  .xr-substat { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
  .xr-substat-k { color: var(--ink-4); }
  .xr-substat-v { color: var(--ink); font-family: var(--serif); }

  .xr-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
  }
  .xr-card-full { display: block; margin-bottom: 12px; }
  .xr-card-body { font-size: 14px; color: var(--ink); line-height: 1.6; }

  .xr-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
  .xr-chips li {
    padding: 4px 11px; border-radius: 999px; font-size: 12.5px; color: var(--ink-2);
    border: 1px solid var(--rule-strong); background: rgba(255, 255, 255, 0.6);
    transition: color 120ms ease, border-color 120ms ease;
  }
  .xr-chips li:hover { color: var(--accent); border-color: var(--accent); }

  .xr-bullets { list-style: none; margin: 0; padding: 0; }
  .xr-bullets li {
    position: relative; padding-left: 16px; margin-bottom: 7px;
    font-size: 13.5px; color: var(--ink-2); line-height: 1.5;
  }
  .xr-bullets li:last-child { margin-bottom: 0; }
  .xr-bullets li::before {   /* accent dot marker */
    content: ""; position: absolute; left: 0; top: 7px;
    width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  }

  .xr-rounds { list-style: none; margin: 0; padding: 0; }
  .xr-rounds li {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px;
    padding: 8px 0; border-bottom: 1px solid var(--rule);
  }
  .xr-rounds li:last-child { border-bottom: none; padding-bottom: 0; }
  .xr-round-main { font-family: var(--serif); font-size: 14px; color: var(--ink); }
  .xr-round-sub { font-size: 12px; color: var(--ink-4); }

  .xr-cite {
    font-family: var(--mono); font-size: 9px; color: var(--ink-4);
    margin-left: 4px; vertical-align: super; cursor: help;
  }

  /* upload drawer + review/edit modal */
  .xr-modal-backdrop {
    position: fixed; inset: 0; background: rgba(26, 26, 26, 0.38);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 7vh 16px; z-index: 1000; overflow-y: auto;
  }
  .xr-drawer, .xr-modal {
    background: var(--bg); border: 1px solid var(--rule-strong);
    border-radius: 4px; width: 100%; box-shadow: 0 18px 50px rgba(26, 26, 26, 0.22);
  }
  .xr-drawer { max-width: 400px; }
  .xr-modal { max-width: 680px; }
  /* draft = under review (accent top rule); edit = editing live (full accent rule) */
  .xr-draft { border-top: 2px solid var(--signal-med); }
  .xr-editmodal { border-top: 2px solid var(--accent); }
  .xr-modal-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--rule);
  }
  .xr-modal-title { font-family: var(--serif); font-size: 16px; color: var(--ink); }
  .xr-modal-sub { font-size: 11.5px; color: var(--ink-4); margin-top: 4px; max-width: 56ch; line-height: 1.5; }
  .xr-x { background: none; border: none; font-size: 20px; line-height: 1; cursor: pointer; color: var(--ink-4); }
  .xr-x:hover { color: var(--ink); }
  .xr-modal-body { padding: 4px 20px; max-height: 60vh; overflow-y: auto; }
  /* Review rows stack label-above-value too, so the modal is legible on a phone. */
  /* Review modal: each field is a modular card; short stats pair up in the
     grid, wide fields (notes / lists) span the full row. */
  .xr-review-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
  }
  .xr-review-field {
    border: 1px solid var(--rule); border-radius: 12px;
    background: rgba(255, 255, 255, 0.4); padding: 12px 14px;
  }
  .xr-review-wide { grid-column: 1 / -1; }
  .xr-review-label {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--ink-4); margin-bottom: 7px;
  }
  .xr-review-value { font-size: 14px; color: var(--ink); line-height: 1.6; }
  /* editable list rows inside the review modal (chips/bullets/rounds all edit
     as plain rows here so each item keeps its edit/clear control) */
  .xr-list { list-style: none; margin: 0; padding: 0; }
  .xr-list > li { margin-bottom: 8px; }
  .xr-list > li:last-child { margin-bottom: 0; }
  .xr-notfound { color: var(--ink-4); font-style: italic; }
  .xr-src { font-family: var(--mono); font-size: 10px; color: var(--ink-4); cursor: help; }
  .xr-mini {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--ink-4); background: none;
    border: 1px solid var(--rule-strong); border-radius: 4px;
    padding: 4px 9px; margin-left: 8px; cursor: pointer;
  }
  .xr-mini:hover { color: var(--accent); border-color: var(--accent); }
  .xr-edit { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-top: 4px; }
  .xr-edit textarea {
    font-family: var(--mono); font-size: 12.5px; width: 100%; max-width: 440px; min-height: 54px;
    border: 1px solid var(--rule-strong); border-radius: 3px; padding: 7px; background: #fff;
  }
  .xr-edit button {
    font-family: var(--mono); font-size: 10px; text-transform: uppercase;
    letter-spacing: 0.08em; padding: 3px 10px; cursor: pointer;
    border: 1px solid var(--rule-strong); background: none; border-radius: 3px;
  }
  .xr-lbl { display: block; font-size: 12px; color: var(--ink-2); margin-bottom: 15px; }
  .xr-lbl input, .xr-lbl select {
    display: block; width: 100%; margin-top: 6px; padding: 8px 9px;
    font-family: var(--sans); font-size: 13px;
    border: 1px solid var(--rule-strong); border-radius: 3px; background: #fff; color: var(--ink);
  }
  .xr-drawer-body { padding: 16px 20px; }
  .xr-error { color: var(--accent); font-size: 12px; padding: 6px 20px; }
  .xr-modal-foot {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 14px 20px; border-top: 1px solid var(--rule);
  }
  .xr-confirm {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
    text-transform: uppercase; color: #fff; background: var(--accent);
    border: 1px solid var(--accent); border-radius: 3px; padding: 9px 16px; cursor: pointer;
  }
  .xr-confirm:disabled { opacity: 0.5; cursor: default; }
  .xr-reject {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--ink-4); background: none;
    border: 1px solid var(--rule-strong); border-radius: 3px; padding: 9px 16px; cursor: pointer;
  }
  .xr-reject:hover { color: var(--ink); border-color: var(--ink-4); }

  .xr-cite-manual { font-style: italic; }
  .xr-add { margin-left: 10px; }