/* ============================================================================
   AVENLEO — INVEST
   ----------------------------------------------------------------------------
   Only what the invest page has that no other page does: the commitment card,
   the how-it-works guide and the table of every level, the member's figures,
   each investment's term chart, payment schedule and day-by-day table, and
   the agreement in the confirmation.

   Everything else on the page is borrowed on purpose. The three cards are the
   level cards from plans.css — the same anatomy, price over interest over what
   a term pays — the strip above them is the plans status block, the figures are the
   dashboard's stat tiles, and the table is the product's table. Tokens only;
   nothing here introduces a colour, a size or a radius the design system does
   not already have.
   ========================================================================== */

.invest-required { margin-bottom: var(--space-4); }

.invest-section { margin-top: var(--space-6); }

/* ------------------------------------------------------------ COMMITMENT --
   Said before anybody chooses: what an investment is to the project, and the
   three facts about it a member should know before their money goes in. */
.invest-pledge {
  display: flex; flex-direction: column; gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.invest-pledge__head { display: flex; align-items: flex-start; gap: var(--space-3); }
.invest-pledge__head .stat__icon { flex: none; }
.invest-pledge__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-base); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug);
}
.invest-pledge__text {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm); line-height: var(--leading-snug);
  color: var(--color-text-muted);
}
.invest-pledge__facts {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3);
}
.invest-pledge__facts li {
  display: flex; align-items: flex-start; gap: var(--space-2);
  font-size: var(--text-xs); line-height: var(--leading-snug);
  color: var(--color-text-muted);
}
.invest-pledge__facts .icon { flex: none; width: 15px; height: 15px; margin-top: 1px; color: var(--color-accent-strong); }
.invest-pledge__facts b { color: var(--color-text); font-weight: var(--weight-semibold); }

/* ------------------------------------------------------------ THE GUIDE --
   How it works in four plain steps, with the member's own level, balance and
   top-up written in, beside one worked example; and, under the cards, what
   every level invests and earns a term. `--invest-kit` is how invest/index.js
   knows this file has these rules: it draws none of them until the number is
   the one it was written for. Raise the two together — 3 since 21 October,
   when the terms began to repeat. */
:root { --invest-kit: 3; }

/* What to add, worked out from the member's level: the sum on one side and
   why it is asked on the other. The one marked card while it shows. */
.invest-unlock {
  display: flex; flex-direction: column; gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.invest-unlock__title {
  margin: var(--space-1) 0 0;
  font-family: var(--font-display);
  font-size: var(--text-lg); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug);
}
.invest-unlock__lede { margin: var(--space-1) 0 0; font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--color-text-muted); }
.invest-unlock__lede b { color: var(--color-text); font-weight: var(--weight-semibold); white-space: nowrap; }
.invest-unlock__body {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5); align-items: start;
}
.invest-unlock__sum { display: flex; flex-direction: column; gap: var(--space-4); }
.invest-unlock__sum .btn { align-self: flex-start; }
.invest-unlock__why {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface-2);
}
.invest-unlock__why-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text); }
.invest-unlock__why p { margin: 0; font-size: var(--text-xs); line-height: var(--leading-snug); color: var(--color-text-muted); }
.invest-unlock__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.invest-unlock__facts li {
  display: flex; align-items: flex-start; gap: var(--space-2);
  font-size: var(--text-xs); line-height: var(--leading-snug); color: var(--color-text-muted);
}
.invest-unlock__facts .icon { flex: none; width: 15px; height: 15px; margin-top: 1px; color: var(--color-text-faint); }
.invest-unlock__facts b { color: var(--color-text); font-weight: var(--weight-semibold); white-space: nowrap; }

.invest-guide {
  display: flex; flex-direction: column; gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.invest-guide__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-base); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug);
}
.invest-guide__lede { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.invest-guide__body {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: var(--space-5); align-items: start;
}
.invest-guide__steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5);
}
.invest-step { display: flex; align-items: flex-start; gap: var(--space-3); min-width: 0; }
.invest-step__num {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-full);
  background: var(--color-surface-2);
  font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.invest-step__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; padding-top: 2px; }
.invest-step__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text); }
.invest-step__text { font-size: var(--text-xs); line-height: var(--leading-snug); color: var(--color-text-muted); }
.invest-step__text b { color: var(--color-text); font-weight: var(--weight-semibold); white-space: nowrap; }
.invest-step__mine { display: block; margin-top: var(--space-2); }
.invest-step__act { margin-top: var(--space-2); }
.invest-step__sizes {
  list-style: none;
  margin: var(--space-1) 0 var(--space-2); padding: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.invest-step__sizes li { display: flex; justify-content: space-between; gap: var(--space-3); }
.invest-step__sizes span:last-child { color: var(--color-text); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The worked example: the product's summary rows, in a quiet panel. */
.invest-guide__example {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface-2);
}
.invest-guide__example-title { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text); }
.invest-guide__example-note { margin: 0; font-size: var(--text-xs); line-height: var(--leading-snug); color: var(--color-text-muted); }

/* Every level: the control, the table edge to edge in its card, the line under it. */
.invest-levels__bar {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-4) var(--space-5) var(--space-3);
}
.invest-levels__say { margin: 0; font-size: var(--text-xs); line-height: var(--leading-snug); color: var(--color-text-muted); }
.invest-levels__say b,
.invest-levels__foot b { color: var(--color-text); font-weight: var(--weight-semibold); white-space: nowrap; }
.invest-levels .table-wrap {
  border: none; border-top: 1px solid var(--color-border); border-radius: 0;
  background: transparent;
}
.invest-levels .table__num { white-space: nowrap; }
.invest-levels .table th.table__num { text-align: right; }
.invest-levels .table th:first-child,
.invest-levels .table td:first-child { padding-left: var(--space-5); }
.invest-levels .table th:last-child,
.invest-levels .table td:last-child { padding-right: var(--space-5); }
.invest-levels .table__cell-sub { white-space: nowrap; }
.invest-levels .is-mine td { background: var(--color-surface-2); }
.invest-levels .table__cell-strong .badge { margin-left: var(--space-1); }
.invest-levels__foot {
  margin: 0; padding: var(--space-3) var(--space-5) var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs); line-height: var(--leading-snug); color: var(--color-text-muted);
}

/* ------------------------------------------------------------- FIGURES --
   The dashboard's stat tiles, four across; two on a phone. */
.invest-kpis {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3);
  margin-bottom: var(--space-4);
}
/* A figure never breaks: "+₦26,200" split after its sign reads as two things. */
.invest-kpis .stat__value { white-space: nowrap; }

/* ------------------------------------------------------- AN INVESTMENT --
   What it is and what its term pays, the chart, four figures, the payment
   schedule and the days. */
.invest-card {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.invest-card:last-child { border-bottom: none; }
.invest-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.invest-card__name {
  display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  font-size: var(--text-base); font-weight: var(--weight-semibold);
}
.invest-card__sub { margin-top: 2px; font-size: var(--text-2xs); color: var(--color-text-faint); }
.invest-card__payout { flex: none; text-align: right; }
.invest-card__payout b {
  display: block;
  font-size: var(--text-lg); font-weight: var(--weight-semibold);
}
.invest-card__payout span { font-size: var(--text-2xs); color: var(--color-text-faint); white-space: nowrap; }
.invest-card__figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.invest-fig { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.invest-fig__label { font-size: var(--text-2xs); color: var(--color-text-faint); }
.invest-fig__value { font-size: var(--text-sm); font-weight: var(--weight-semibold); white-space: nowrap; }
.invest-card__note { font-size: var(--text-2xs); color: var(--color-text-muted); line-height: var(--leading-snug); }

/* A paid one: a single row, its job done. */
.invest-row {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.invest-row:last-child { border-bottom: none; }
.invest-row__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-width: 0; }
.invest-row__name {
  display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0;
  font-size: var(--text-sm); font-weight: var(--weight-medium);
}
.invest-row__payout { flex: none; font-size: var(--text-sm); font-weight: var(--weight-semibold); white-space: nowrap; }
.invest-row__foot {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-1) var(--space-3);
  font-size: var(--text-2xs); color: var(--color-text-muted);
}
.invest-row__foot span { white-space: nowrap; }

/* -------------------------------------------------------------- THE CHART --
   Drawn by invest/chart.js at the container's own width: one term's interest.
   Thin marks, a hairline floor, gold for the days grown and the faint grey for
   the days ahead. */
.invest-chart { position: relative; width: 100%; min-height: 172px; border-radius: var(--radius-md); }
.invest-chart:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.invest-chart--modal { margin-bottom: var(--space-3); }
.ichart { display: block; overflow: visible; touch-action: pan-y; }
.ichart__grid { stroke: var(--color-border); stroke-width: 1; shape-rendering: crispEdges; }
.ichart__line { fill: none; stroke-width: 2; stroke-linecap: round; }
.ichart__line--grown { stroke: var(--color-accent-strong); }
.ichart__line--ahead { stroke: var(--color-text-faint); }
.ichart__wash { fill: var(--color-accent); fill-opacity: .14; stroke: none; }
.ichart__today { fill: var(--color-accent-strong); stroke: var(--color-surface-1); stroke-width: 2; }
.ichart__end { fill: var(--color-surface-1); stroke: var(--color-text-faint); stroke-width: 2; }
.ichart__spot { fill: var(--color-text); stroke: var(--color-surface-1); stroke-width: 2; }
.ichart__cross { stroke: var(--color-border-strong); stroke-width: 1; shape-rendering: crispEdges; }
.ichart__value { fill: var(--color-text); font-family: var(--font-sans); font-size: 11px; font-weight: var(--weight-semibold); }
.ichart__note,
.ichart__axis { fill: var(--color-text-faint); font-family: var(--font-sans); font-size: 10px; }
.ichart__hit { cursor: crosshair; }
.ichart__tip {
  position: absolute; z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 9px;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface-2); box-shadow: var(--shadow-md);
  white-space: nowrap;
}
.ichart__tip strong { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text); }
.ichart__tip span { font-size: var(--text-2xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- THE DAYS --
   The chart's twin in plain figures — every value on it, without a pointer —
   and the payment schedule, the terms end to end, in the same fold. */
.invest-days summary {
  cursor: pointer; width: fit-content;
  font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-text-muted);
}
.invest-days .table-wrap { max-height: 280px; overflow: auto; margin-top: var(--space-2); }
.invest-days .is-today td { background: var(--color-accent-soft); }
.invest-days .table th.table__num { text-align: right; }
.invest-days td { white-space: nowrap; }
.invest-days .table__cell-sub { white-space: nowrap; }
/* Six rows at most, so the schedule is never scrolled inside its fold. */
.invest-days--terms .table-wrap { max-height: none; }
.invest-days__foot {
  margin: var(--space-2) 0 0;
  font-size: var(--text-2xs); line-height: var(--leading-snug); color: var(--color-text-muted);
}

/* The confirmation's total: a figure beside its label, never split after its sign. */
.invest-sum .summary__row--total b { white-space: nowrap; }

/* ----------------------------------------------------------- AGREEMENT -- */
.invest-agree { margin-top: var(--space-4); font-size: var(--text-xs); line-height: var(--leading-snug); color: var(--color-text-muted); }

/* --------------------------------------------------------------- PHONE -- */
@media (max-width: 900px) {
  .invest-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .invest-guide__body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .invest-pledge__facts { grid-template-columns: minmax(0, 1fr); }
  .invest-unlock__body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .invest-unlock__sum .btn { align-self: stretch; }
  .invest-guide__steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .invest-levels__bar,
  .invest-levels__foot { padding-left: var(--space-4); padding-right: var(--space-4); }
  /* Three columns of Naira on a 320px screen: tighter cells, headings that
     may wrap, and the level's price without the word "level" under it. */
  .invest-levels .table thead th,
  .invest-levels .table tbody td { padding-left: var(--space-2); padding-right: var(--space-2); }
  .invest-levels .table thead th { white-space: normal; }
  .invest-levels .table th:first-child,
  .invest-levels .table td:first-child { padding-left: var(--space-4); }
  .invest-levels .table th:last-child,
  .invest-levels .table td:last-child { padding-right: var(--space-4); }
  .invest-levels__word { display: none; }
  .invest-card__figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Two tiles a row on a phone: the figure steps down a size so a large one
     still fits its half of the screen on one line. */
  .invest-kpis .stat__value { font-size: var(--text-lg); }
}