/* ============================================================
   RAISE-ANALYTICS.CSS
   Phase 6E. The founder's own raise.

   Same chart approach as Power Analytics: bars are table rows with
   the number printed beside them, so nothing has to be measured by
   eye and a screen reader gets values rather than a picture.

   One difference in tone. This page is about the reader's own work,
   and a raise that is going slowly should not be styled as an alarm.
   There is no red, no warning icon and no colour that grades an
   outcome. Committed and Passed get the same bar.
   ============================================================ */

.ra-wrap { max-width: 940px; }

.ra-scope {
  border: 1px solid var(--hairline-strong); border-left: 3px solid var(--accent);
  padding: 14px 16px; margin: 20px 0 22px;
  font: 400 13.5px/1.6 var(--sans); color: var(--ink-dim); max-width: 78ch;
}
.ra-scope strong { color: var(--ink); font-weight: 600; }

/* A read failure or a truncated history. Bordered like the scope
   note rather than tinted: it is a statement about what the page
   could not read, not a problem with the founder's raise. */
.ra-warn {
  border: 1px solid var(--hairline-strong); border-left: 3px solid var(--ink-muted);
  padding: 11px 14px; margin: 0 0 18px;
  font: 400 13px/1.6 var(--sans); color: var(--ink-dim); max-width: 78ch;
}

.ra-tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
  border-bottom: 1px solid var(--hairline); padding-bottom: 12px; margin-bottom: 20px;
}
.ra-tab {
  padding: 6px 12px; border: 1px solid var(--hairline-strong); border-radius: 999px;
  background: var(--bg); color: var(--ink-dim);
  font: 500 12.5px/1 var(--sans); cursor: pointer;
}
.ra-tab:hover { color: var(--ink); border-color: var(--ink-muted); }
.ra-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ra-tab.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }

.ra-h {
  font: 600 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-muted); margin: 0 0 6px;
}
.ra-h3 {
  font: 600 13px/1.3 var(--sans); color: var(--ink); margin: 26px 0 8px;
}
.ra-sub {
  font: 400 14px/1.55 var(--sans); color: var(--ink-dim);
  margin: 0 0 18px; max-width: 72ch;
}
.ra-note {
  font: 400 12.5px/1.6 var(--sans); color: var(--ink-muted);
  margin: 12px 0 0; max-width: 76ch;
}
.ra-empty {
  font: 400 14px/1.6 var(--sans); color: var(--ink-dim);
  margin: 16px 0; max-width: 70ch;
}
.ra-empty a, .ra-note a { color: var(--accent); }

/* ---------- bars ---------- */

.ra-bars, .ra-tbl {
  width: 100%; border-collapse: collapse;
  font: 400 13.5px/1.5 var(--sans); color: var(--ink-dim);
}
.ra-bars th[scope="col"], .ra-tbl th[scope="col"] {
  text-align: left; font: 600 10px/1 var(--mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-muted);
  border-bottom: 1px solid var(--hairline-strong); padding: 0 10px 7px 0;
}
.ra-bars td, .ra-tbl td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--hairline); }
.ra-tbl td:nth-child(2) { font-variant-numeric: tabular-nums; }

.ra-bar-label {
  text-align: left; font: 500 13.5px/1.4 var(--sans); color: var(--ink);
  padding: 9px 14px 9px 0; border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}
.ra-bar-cell { width: 55%; border-bottom: 1px solid var(--hairline); }
.ra-bar {
  display: block; height: 9px; border-radius: 2px;
  background: var(--accent); min-width: 2px;
}
.ra-bar-n {
  white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums;
  font: 400 12.5px/1.4 var(--mono); color: var(--ink-dim);
}
.ra-pct { display: inline-block; margin-left: 10px; color: var(--ink-muted); }
/* The count of arrivals with no recorded date sits under the number
   it qualifies, because it changes how that number should be read. */
.ra-sub-n {
  display: block; font: 400 11px/1.4 var(--sans); color: var(--ink-muted);
  text-align: right; margin-top: 2px; white-space: normal;
}
.ra-unk { color: var(--ink-muted); font-style: italic; }

@media (max-width: 640px) {
  .ra-bar-label { white-space: normal; font-size: 13px; }
  .ra-bar-cell { width: 38%; }
  .ra-bars, .ra-tbl { font-size: 12.5px; }
}