/* =============================================================================
   Counterpart look for the State of CVC 2026 dashboard (Brickell Digital)

   Loaded ONLY by app/counterpart.html, which is the dashboard shown inside the
   Counterpart header page (stateofcvc.counterpart.vc/). SVB and First Citizens
   embed app/index.html and never load this file, so their version stays exactly
   as First Citizens built it.

   Nothing in First Citizens' files is edited. Everything below either sets one
   of their documented theme variables (see docs/THEMING.md) or restyles their
   classes on top of their stylesheet: fonts, widths, corners, lines, colours.
   No behaviour changes.

   To revert the Counterpart page to First Citizens' look: in ../index.html point
   the iframe back to "./app/".
   ============================================================================= */

/* ---- Fonts --------------------------------------------------------------------
   Counterpart's own files, served from their Webflow host (the same files
   counterpart.vc uses; the host allows use from other sites). If a file fails to
   load, the font stack falls back to Inter Display, then Arial. */
@font-face {
  font-family: "Neuemontreal";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("https://cdn.prod.website-files.com/68f7fdfd5e6ecd125a30faf9/68f7fdfd5e6ecd125a30fb23_NeueMontreal-Regular.otf") format("opentype");
}
@font-face {
  font-family: "Neuemontreal";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("https://cdn.prod.website-files.com/68f7fdfd5e6ecd125a30faf9/68f7fdfd5e6ecd125a30fb0f_NeueMontreal-Medium.otf") format("opentype");
}
@font-face {
  font-family: "Neuemontreal";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("https://cdn.prod.website-files.com/68f7fdfd5e6ecd125a30faf9/68f7fdfd5e6ecd125a30fb21_NeueMontreal-Bold.otf") format("opentype");
}
@font-face {
  font-family: "Interdisplay";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("https://cdn.prod.website-files.com/68f7fdfd5e6ecd125a30faf9/68f7fdfd5e6ecd125a30fb42_InterDisplay-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Interdisplay";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("https://cdn.prod.website-files.com/68f7fdfd5e6ecd125a30faf9/68f7fdfd5e6ecd125a30fb43_InterDisplay-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Interdisplay";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("https://cdn.prod.website-files.com/68f7fdfd5e6ecd125a30faf9/68f7fdfd5e6ecd125a30fb40_InterDisplay-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Interdisplay";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("https://cdn.prod.website-files.com/68f7fdfd5e6ecd125a30faf9/68f7fdfd5e6ecd125a30fb41_InterDisplay-Bold.ttf") format("truetype");
}

/* ---- Theme variables (First Citizens' documented hooks) ----------------------
   Colours are counterpart.vc's own palette: text #0b0b0b, primary blue #303191,
   light blue #65bae9, dark indigo #1a1b50, border #cbcbcb. The three light-blue
   tints are that light blue mixed with white at 9%, 30% and 70%. Status colours,
   the minority plum and neutral greys are left as First Citizens set them. */
:root {
  --font-body: "Neuemontreal", "Interdisplay", Arial, Helvetica, sans-serif;
  --cp-font-ui: "Interdisplay", Arial, Helvetica, sans-serif;

  /* page */
  --navy: #1a1b50;             /* masthead, headings, active tab   (was #00205b) */
  --cyan: #65bae9;             /* accent on dark, tab underline    (was #4ab9ff) */
  --cyan-text: #303191;        /* links and eyebrows on white      (was #006bfb) */
  --ink: #0b0b0b;              /* body text                        (was #1b1f28) */
  --ink-soft: #333333;         /* field labels                     (was #333947) */

  /* surfaces */
  --soft: #f1f9fd;             /* tinted panels, chips             (was #f2fbff) */
  --sky: #d1eaf8;              /* recessive fills behind a bar     (was #c4ebff) */
  --sky-mid: #93cff0;          /* one step darker                  (was #7ecfff) */
  --line: #e6e6e6;             /* hairlines                        (was #e6e8ee) */
  --rule: #cbcbcb;             /* stronger rules, field borders    (was #c1c6d1) */

  /* charts */
  --chart-you: #1a1b50;        /* this fund's marker               (was #00205b) */
  --chart-peers: #303191;      /* comparable funds                 (was #006bfb) */
  --chart-bellwether: #65bae9; /* bellwether marks                 (was #4ab9ff) */
  --chart-band: #d1eaf8;       /* middle-50% band                  (was #c4ebff) */
  --chart-grid: #e6e6e6;       /* grid lines                       (was #e6e8ee) */
}

/* ---- Typography ---------------------------------------------------------------
   Neue Montreal throughout (via --font-body above), as in Counterpart's Figma for
   this page (Sep 12 2026). The one exception is the Key Findings card titles,
   which the Figma sets in Inter Display. */
.digest-title {
  font-family: var(--cp-font-ui);
}

/* Counterpart headings are light (400-500) with slightly tight tracking. */
.top-band h1,
.lede-title,
.verdict-title,
.stand-title,
.rule h2,
.panel-heading h2,
.module-title h2 {
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* ---- Width ----------------------------------------------------------------------
   Match counterpart.vc's content column (.main-container: 85rem including 1.5rem
   side padding, 1rem below 992px) so the dashboard lines up with the header above
   it. Only max-width and side padding change; First Citizens' grid and their
   breakpoints (1180px, 920px, 560px) are untouched. */
.top-band {
  padding-left: 0;
  padding-right: 0;
}
.top-band-inner,
.workspace,
.brand-row,
.tool-intro {
  max-width: 85rem;
}
.top-band-inner,
.workspace {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
@media (max-width: 991px) {
  .top-band-inner,
  .workspace {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ---- Figma adjustments (Sep 12 2026) ------------------------------------------
   From Counterpart's Figma frame "CVC Dashboard - Key Findings": square corners,
   lighter #cbcbcb lines, a gradient masthead, a wider sidebar, the summary cards
   two by two, and a few colour and weight changes. The other four tabs get the
   same treatment. Text sizes stay as they were except where the Figma makes text
   bigger: the frame was drawn from a ~80% capture of this page, so its smaller
   sizes are a side effect of the import. */

/* Masthead: primary blue behind the title, light blue behind the stat and the
   privacy note, joined by a diagonal blend (Figma: 122deg). The light blue is
   painted behind the right-hand block, so it follows that block at every width
   instead of sitting at a fixed percentage of the band. */
.top-band {
  position: relative;
  z-index: 0;
  overflow: hidden;
  background: #303191;
}
.top-band .brand-lockup > svg {
  display: none; /* the Figma drops the building icon */
}
.top-band .eyebrow,
.top-band .eyebrow-sep,
.top-band .eyebrow-cobrand {
  color: #fff;
  font-weight: 500;
}
.top-band .eyebrow {
  letter-spacing: 0.05em;
}
@media (min-width: 1101px) {
  .top-band-meta {
    position: relative;
  }
  .top-band-meta::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -50px;
    bottom: -50px;
    left: -400px;
    right: -100vw;
    /* Fully light blue from 12px left of the block; the blend is 185px wide,
       narrowing on smaller screens so it never reaches the title. */
    background: linear-gradient(122deg, rgba(101, 186, 233, 0) calc(363px - min(185px, 100vw - 960px)), #65bae9 363px);
  }
  .top-band-stat {
    color: #0b0b0b;
  }
  .privacy-pill {
    background: transparent;
    border: 1px solid #0b0b0b;
    color: #0b0b0b;
    padding: 6px 10px;
    gap: 6px;
  }
}
/* 1100px and below, the stat and privacy note wrap under the title, over the
   primary blue, so they stay light; the light blue becomes a corner accent. */
@media (max-width: 1100px) {
  .top-band {
    background: linear-gradient(122deg, #303191 calc(100% - 140px), #65bae9);
  }
  .top-band-meta {
    flex-basis: 100%;
  }
}

/* Sidebar: 288px including its 24px gutter, 24px from the results (Figma).
   900px and below keeps First Citizens' single-column layout. */
@media (min-width: 901px) {
  .workspace {
    grid-template-columns: 288px 1fr;
    gap: 24px;
  }
}
.input-panel {
  border-right-color: var(--rule);
}
.panel-heading h2 {
  font-size: 16px;
}
.panel-readback,
.standing-disclaimer {
  border-left: 1px solid #303191;
  padding-left: 8px;
}
.panel-readback strong,
.standing-disclaimer strong {
  font-weight: 500;
}
.standing-disclaimer strong {
  display: block;
}
.field .field-label {
  font-size: 12px;
  font-weight: 500;
}
.match-note {
  border-bottom: 0.5px solid var(--rule);
  color: #333;
}

/* Field order from the Figma: Team size on its own row, then Fund size beside
   Average check size. Visual only (CSS order), so keyboard order is unchanged.
   Keyed on First Citizens' field ids: if a refresh renames them, the fields
   simply fall back to their original order. */
.input-panel > .input-group > .field:has(#f-teamSizeBucket) {
  order: 1;
  grid-column: 1 / -1;
}
.input-panel > .input-group > .field:has(#f-fundSizeBucket),
.input-panel > .input-group > .field:has(#f-checkSizeBucket) {
  order: 2;
}

/* "+ Add More Detail", its note underneath. The Sep 18 build makes this a
   tinted box and draws the + / − on the title itself, so all that is left for
   us is the line colour, a lighter title and the note's colour. */
.more-fields {
  border-color: var(--rule);
}
.more-fields-title {
  font-weight: 500;
}
.more-fields > summary span {
  color: #333;
}
.reset-button {
  background: #fff;
  border-color: #0b0b0b;
  font-weight: 500;
}

/* Results header and tabs. */
.basis {
  border-bottom-color: var(--rule);
}
.basis-main {
  font-size: 16px;
}
.basis-sub {
  font-size: 12px;
}
.tabs-eyebrow {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.035em;
}
.tabs-count {
  font-size: 12px;
  color: #a0a0cc;
}
.tabs {
  border-bottom: 1px solid var(--rule);
}
.tab {
  border-bottom-width: 1px;
  margin-bottom: -1px;
  font-weight: 500;
}
.tab.is-active {
  border-bottom-color: #303191;
}
.tab .tab-num,
.tab.is-active .tab-num {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: 0;
}
.tab-panel {
  border-color: var(--rule);
}

/* Key Findings: profile box and its four cards. */
.score {
  border: 0.5px solid var(--rule);
}
.score-head {
  border-bottom: 0.5px solid var(--rule);
}
.score-title,
.digest-count,
.digest-go,
.pager-btn {
  font-weight: 500;
}
.score-foot,
.pager {
  border-top: 0;
}
.digest {
  /* Two columns at most; one when there's no room for two 268px cards. */
  grid-template-columns: repeat(auto-fit, minmax(max(268px, calc(50% - 6px)), 1fr));
  gap: 12px;
}
.digest-card {
  border: 0;
}
/* The Figma drops the cards' left bar. Cards where the fund stands apart keep
   it (as an inset shadow, so nothing shifts): it's part of how that's shown. */
.digest-card.has-apart {
  box-shadow: inset 3px 0 0 var(--standout);
}
.digest-card:hover,
.digest-card:focus-visible {
  box-shadow: inset 0 0 0 1px #303191;
}
.digest-card.has-apart:hover,
.digest-card.has-apart:focus-visible {
  box-shadow: inset 3px 0 0 var(--standout), inset 0 0 0 1px #303191;
}
.digest-title {
  font-size: 14px;
  font-weight: 600;
}
.digest-body,
.digest-go {
  font-size: 12px;
}
.digest-pip.is-default {
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--rule);
}

/* Disclaimer, methodology box, footer. */
.method {
  border: 0.5px solid var(--rule);
}
.method summary {
  font-weight: 500;
}
.method-body {
  border-top-color: var(--rule);
}
.colophon {
  border-top: 1px solid #303191;
}
.colophon p,
.colophon-products {
  color: #333;
}
.colophon p {
  max-width: none; /* full column width, as in the Figma (was 78ch) */
}
.colophon strong,
.colophon p.colophon-legal--label {
  color: #303191;
}
.colophon p.colophon-legal--label {
  font-weight: 700;
}

/* ---- The Sep 18 2026 build ------------------------------------------------
   First Citizens' refresh adds a "How this works" panel above the results, a
   sixth view (Methodology and glossary), small hint bubbles, and turns "Add
   More Detail" into a tinted box. Same treatment as everything else: our
   lines, square corners, lighter weights. Their colours already come through
   the variables at the top of this file. */
.orient {
  border-color: var(--rule); /* their --gray-1 hairline, in Counterpart grey */
  border-left-color: var(--cyan-text); /* keep their accent bar on the left */
}
.orient-title {
  font-weight: 500;
}
.group-note span {
  font-weight: 500;
}
.methods-block h3,
.method-terms dt {
  font-weight: 500;
}

/* Square corners on every box, control, chip and tooltip. Data marks (bars,
   tracks, dots, pips) keep their shapes. */
.orient,
.more-fields,
.hint-bubble,
.strip.is-focused,
.dist.is-focused,
.mandate-row.is-focused,
.field input,
.field select,
.segmented button,
.toggle-group button,
.reset-button,
.privacy-pill,
.tab-panel,
.score,
.digest-card,
.method,
.market-panel,
.market-fact,
.answer,
.answer.is-focused,
.answer-you,
.answer-legend,
.dist-row.is-you,
.dist-callout,
.mandate-cell,
.stand-row,
.arche-row,
.trend-warn,
.profile-status,
.mark-tip,
.infotip-bubble,
.own-chip,
.strip-band-tag {
  border-radius: 0;
}

/* A few spots in First Citizens' stylesheet use their old bright blue (#006bfb)
   directly rather than a theme variable; use Counterpart's primary blue. */
.mandate-cell.is-you {
  background: rgba(48, 49, 145, 0.08);
}
.dist-row.is-you:hover {
  background: rgba(48, 49, 145, 0.06);
}
.strip-band-tag.is-outlier {
  background: rgba(48, 49, 145, 0.1);
}
.answer-you.is-yes,
.reset-count {
  background: rgba(48, 49, 145, 0.12);
}
.arche-row.is-you {
  background: rgba(48, 49, 145, 0.07);
}
.profile-status.is-active {
  background: rgba(48, 49, 145, 0.06);
  border-color: rgba(48, 49, 145, 0.25);
}
.mark:focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(48, 49, 145, 0.6);
}
.tab:focus-visible,
.pager-btn:focus-visible,
.reset-button:focus-visible,
.infotip-btn:focus-visible,
.more-fields summary:focus-visible,
.tab-panel select:focus-visible,
.input-panel select:focus-visible,
.input-panel input:focus-visible,
.segmented button:focus-visible {
  outline-color: rgba(48, 49, 145, 0.65);
}