/* ==========================================================================
   mcprush — investors.css
   Page styles for for-investors.html only. Everything structural comes from
   core.css and views.css; what is here is the handful of shapes this page
   needs and no other page does. Every colour is a token, so the dark theme
   costs nothing.
   ========================================================================== */

/* ---------- 1. the dollar split ------------------------------------------
   Three segments of one bar rather than three numbers in a row, because the
   point of the block is the proportion: 12¢ next to 85.1¢ is an argument the
   eye finishes before the sentence does. The segments carry no labels — at
   2.9% there is no room for one — so the legend below is load-bearing and the
   bar itself is aria-hidden in the markup. */
.inv-bar {
  display: flex;
  gap: 2px;
  height: 12px;
  margin-bottom: 14px;
}
.inv-bar i {
  display: block;
  min-width: 3px;              /* 2.9% of a phone-width card is 10px — keep it visible */
  border-radius: 2px;
  flex-grow: 0;                /* widths are the story; only shrink to absorb the gaps */
}
.inv-bar i.a { background: var(--accent); }
.inv-bar i.b { background: var(--ink); }
.inv-bar i.c { background: var(--ink-3); }

.inv-legend { display: flex; flex-direction: column; gap: 7px; }
.inv-legend li {
  display: flex; align-items: center; gap: 9px;
  font-size: 13.5px; color: var(--ink-2);
}
.inv-legend i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.inv-legend i.a { background: var(--accent); }
.inv-legend i.b { background: var(--ink); }
.inv-legend i.c { background: var(--ink-3); }
.inv-legend b { color: var(--ink); font-weight: 600; }

/* ---------- 2. prose lists ------------------------------------------------
   A square tick rather than a disc: the same mark .spec uses, so a list of
   consequences reads as part of the datasheet instead of as a bulleted slide.
   The measure is capped on the <li> rather than the <ul>, so a list inside a
   full-width card still stops at a readable line. */
.inv-list { display: flex; flex-direction: column; gap: 11px; counter-reset: iv; }
.inv-list li {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 88ch;
}
.inv-list li::before {
  content: '';
  position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 1px;
  background: var(--accent-line);
}
.inv-list li b { color: var(--ink); font-weight: 600; }

/* the numbered variant, for the seven things the 12% pays for — the count is
   the point there, so it is a counter rather than a tick */
.inv-list-num { gap: 13px; }
.inv-list-num li { padding-left: 28px; }
.inv-list-num li::before {
  counter-increment: iv;
  content: counter(iv);
  top: 1px; left: 0;
  width: 19px; height: 19px; border-radius: 5px;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--ink-3);
  font: 500 10.5px/17px var(--mono);
  text-align: center;
}

/* ---------- 3. the counter-argument block --------------------------------
   Sits under the claim inside the same card, separated by a dotted rule. It is
   deliberately not a second card: a moat and its objection are one thought,
   and putting the objection in its own box invites the reader to skip it. */
.inv-counter {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px dashed var(--line-2);
}
.inv-counter .spec { color: var(--ink-3); }

/* ---------- 4. the three unit-economics figures --------------------------- */
.inv-figure {
  margin-top: 14px;
  font: 600 32px/1 var(--mono);
  letter-spacing: -.04em;
  color: var(--ink);
}
.inv-figure-k {
  margin-top: 7px;
  font: 400 12px/1.4 var(--mono);
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-3);
}

/* ---------- 5. the risk rows ----------------------------------------------
   Sentences, not values, so they are rows in a card rather than cells in a
   table — the same shape about.html uses for the dispute list, and for the
   same reason: a three-column grid of paragraphs is a scroller nobody reads. */
.inv-risk { padding: 16px 18px; border-top: 1px solid var(--line); }
.inv-risk:first-of-type { border-top: 0; }
.inv-risk p { max-width: 92ch; }

/* ---------- 6. tables -----------------------------------------------------
   The wrapper, not the table, is the scroller — and only as a safety net for
   the narrow tablet band. The table itself sets no min-width, so cells wrap
   before anything scrolls, and below 620px it stops being a table at all.

   The wrapper also keeps the table out of core.css's `.card > .tbl` rule,
   which turns a table into a nowrap scroller under 860px. This one stacks
   instead, so it must not be a direct child of the card. */
.inv-tblwrap { overflow-x: auto; }
.inv-tbl th:first-child, .inv-tbl td:first-child { padding-left: 18px; }
.inv-tbl th:last-child,  .inv-tbl td:last-child  { padding-right: 18px; }
.inv-tbl td:first-child { font-weight: 550; color: var(--ink); }
.inv-tbl tbody tr:last-child td { border-bottom: 0; }

/* ---------- 7. responsive -------------------------------------------------- */
@media (max-width: 860px) {
  .inv-figure { font-size: 28px; }
}

@media (max-width: 620px) {
  /* Both tables stack. A four- or five-column table on a phone is either a
     side-scroller or a squeeze, and these rows are short enough that the
     header can move into each cell as a label instead. */
  .inv-tblwrap { overflow-x: visible; }
  .inv-tbl thead { display: none; }
  .inv-tbl, .inv-tbl tbody, .inv-tbl tr, .inv-tbl td { display: block; width: 100%; }
  /* Two label/value pairs to a line rather than four stacked ones: a six-row
     table of five stacked cells is 1,400px of scrolling for thirty numbers.
     The row's name keeps a line of its own because it is what the reader
     scans; the last pair grows into the full width when it lands alone. */
  .inv-tbl tr {
    display: flex; flex-wrap: wrap; gap: 3px 14px;
    padding: 13px 16px; border-bottom: 1px solid var(--line);
  }
  .inv-tbl tbody tr:last-child { border-bottom: 0; }
  .inv-tbl td {
    flex: 1 1 40%; min-width: 0;
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding: 2px 0; border-bottom: 0; text-align: right;
  }
  .inv-tbl td::before {
    content: attr(data-l);
    font: 400 11px/1.5 var(--mono);
    text-transform: uppercase; letter-spacing: .1em;
    color: var(--ink-3);
    text-align: left;
  }
  /* the row's own name needs no label, and it is the line the reader scans */
  .inv-tbl td:first-child {
    flex: 1 1 100%;
    display: block; text-align: left;
    padding: 0 0 4px; font-size: 14.5px;
  }
  .inv-tbl td:first-child::before { display: none; }
  .inv-tbl th:first-child, .inv-tbl td:first-child,
  .inv-tbl th:last-child,  .inv-tbl td:last-child { padding-left: 0; padding-right: 0; }

  /* 24px, and this is the smallest of the three sizes rather than — as it had
     been — larger than the 28px the tablet gets. A figure set at 30px mono on a
     358px column is a poster: `$39` then occupies a third of the line and reads
     as the page's headline instead of as one of three numbers in a row. 24 is
     still comfortably the largest mono on the page, its label being 12. */
  .inv-figure { font-size: 24px; }
  .inv-risk { padding: 15px 16px; }
  .inv-list li { font-size: 14px; }
  .inv-legend li { font-size: 14px; }
  /* a 12px bar is decoration at this width; 14px keeps the 2.9¢ sliver legible */
  .inv-bar { height: 14px; }
}

/* ---------- the round: terms as rows -------------------------------------
   .db-line would have done this, and it lives in dashboard.css, which this
   page does not load — a class borrowed across a stylesheet boundary is a
   layout that works until somebody trims an import. Same shape, declared where
   it is used. */
.inv-kv {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 14px; padding: 9px 0; border-top: 1px dashed var(--line); font-size: 13.5px;
}
.inv-kv:first-of-type { border-top: 0; }
.inv-kv span { color: var(--ink-2); }
.inv-kv b { font: 500 13px/1.45 var(--mono); text-align: right; }

/* five tiles rather than four: the raise belongs beside the model, and a fifth
   cell on its own row reads as an afterthought */
.inv-statbar { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .inv-statbar { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .inv-statbar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the total row of the use-of-funds table */
.inv-total td { border-top: 1px solid var(--line-2); background: var(--surface-2); }