/* ==========================================================================
   Thrives — ledger sheet design system
   A financial-statement look: hairline rules, tabular figures, square corners,
   navy ink on paper white, one green gain accent. No rounded corners, no
   shadows, no hover lift. Reading order is set by rule weight, not decoration.
   ========================================================================== */

:root {
  --ledger-white: #ffffff;
  --ledger-paper: #fbfcfe;
  --ledger-tint: #f2f5f9;
  --navy: #14213d;
  --navy-soft: #33456b;
  --navy-tint: #e6ebf4;
  --gain-green: #2a9d6a;
  --gain-tint: #e7f4ed;
  --loss-rust: #a8432f;
  --rule-line: #d8dde4;
  --rule-strong: #9aa6b8;
  --rule-faint: #eceff4;
  --stamp-grey: #63708a;

  --fig-font: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --text-font: "Helvetica Neue", Helvetica, Arial, "Segoe UI", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;

  --col-gutter: 26px;
  --sheet-max: 1180px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ledger-white);
  color: var(--navy);
  font-family: var(--text-font);
  font-size: 16px;
  line-height: 1.62;
}

a { color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
a:hover { border-bottom-color: var(--gain-green); color: var(--gain-green); }

h1, h2, h3, h4 { line-height: 1.24; margin: 0 0 12px; font-weight: 700; letter-spacing: -0.012em; }
h1 { font-size: 34px; }
h2 { font-size: 22px; }
h3 { font-size: 17px; }
p { margin: 0 0 14px; }
ul, ol { margin: 0 0 14px; padding-left: 20px; }
li { margin-bottom: 6px; }

.fig, .num { font-family: var(--fig-font); font-variant-numeric: tabular-nums; }

.sheet { max-width: var(--sheet-max); margin: 0 auto; padding: 0 22px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 40; background: var(--navy); color: var(--ledger-white); padding: 8px 12px; }

/* ---------- masthead ---------- */
.masthead { border-bottom: 3px solid var(--navy); background: var(--ledger-white); }
.masthead-bar {
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  padding: 14px 0 10px;
}
.wordmark { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; border-bottom: 0; }
.wordmark span { color: var(--gain-green); }
.wordmark-sub {
  font-family: var(--fig-font); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--stamp-grey);
}
.masthead-tools { margin-left: auto; display: flex; gap: 14px; align-items: center; font-size: 13px; }
.lang-swap { font-family: var(--fig-font); font-size: 12px; letter-spacing: 0.08em; }
.lang-swap a { border-bottom: 0; color: var(--navy-soft); }
.lang-swap a[aria-current="true"] { color: var(--navy); border-bottom: 2px solid var(--gain-green); }

/* ticker strip: the "market board" line under the masthead */
.ticker { border-top: 1px solid var(--rule-line); border-bottom: 1px solid var(--rule-line); background: var(--ledger-paper); overflow-x: auto; }
.ticker-track { display: flex; gap: 0; min-width: max-content; }
.ticker-cell {
  display: flex; align-items: baseline; gap: 8px; padding: 7px 18px;
  border-right: 1px solid var(--rule-faint); white-space: nowrap;
}
.ticker-cell:last-child { border-right: 0; }
.ticker-key { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stamp-grey); }
.ticker-val { font-family: var(--fig-font); font-size: 13px; font-variant-numeric: tabular-nums; }

/* ---------- tab navigation ---------- */
.tabnav { border-bottom: 1px solid var(--rule-line); background: var(--ledger-white); }
.tabnav ul { list-style: none; display: flex; gap: 0; margin: 0; padding: 0; max-width: var(--sheet-max); margin: 0 auto; padding: 0 22px; }
.tabnav a {
  display: block; padding: 12px 18px 10px; border-bottom: 0;
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy-soft);
  border-bottom: 3px solid transparent;
}
.tabnav a:hover { color: var(--navy); background: var(--ledger-tint); border-bottom-color: var(--rule-strong); }
.tabnav a[aria-current="page"] { color: var(--navy); border-bottom-color: var(--navy); font-weight: 700; }

/* ---------- page scaffolding ---------- */
.page { padding: 30px 0 60px; }
.page-head { border-bottom: 1px solid var(--rule-line); padding-bottom: 16px; margin-bottom: 26px; }
.kicker {
  font-family: var(--fig-font); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--stamp-grey); display: block; margin-bottom: 8px;
}
.lede { font-size: 17px; color: var(--navy-soft); max-width: 74ch; }

/* ---------- metric wall (home dashboard) ---------- */
.metric-wall {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border: 1px solid var(--rule-line); border-bottom: 0; margin-bottom: 26px;
}
.metric {
  border-right: 1px solid var(--rule-line); border-bottom: 1px solid var(--rule-line);
  padding: 18px 20px 16px; background: var(--ledger-white);
}
.metric:nth-child(3n) { border-right: 0; }
.metric-key {
  font-family: var(--fig-font); font-size: 10.5px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--stamp-grey); display: block; margin-bottom: 8px;
}
.metric-fig { font-family: var(--fig-font); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; display: block; }
.metric-fig.up { color: var(--gain-green); }
.metric-note { font-size: 12.5px; color: var(--stamp-grey); display: block; margin-top: 6px; }
.metric-rule {
  display: block; height: 4px; margin: 10px 0 8px;
  background-image: repeating-linear-gradient(90deg, var(--rule-strong) 0 1px, transparent 1px 9px);
}

/* ---------- section headings with a margin numeral ---------- */
.band { display: grid; grid-template-columns: 74px 1fr; gap: var(--col-gutter); border-top: 1px solid var(--rule-line); }
.band + .band { margin-top: 0; }
.band-head { padding-top: 18px; }
.band-no {
  font-family: var(--fig-font); font-size: 13px; color: var(--stamp-grey);
  letter-spacing: 0.06em; display: block;
}
.band-no::after { content: ""; display: block; width: 26px; height: 2px; background: var(--gain-green); margin-top: 8px; }
.band-body { padding: 18px 0 22px; }
.band-body h2 { margin-top: 0; }

/* ---------- ledger tables ---------- */
.ledger-table { width: 100%; border-collapse: collapse; margin: 14px 0 20px; font-size: 14.5px; }
.ledger-table caption {
  text-align: left; font-family: var(--fig-font); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--stamp-grey); padding-bottom: 8px;
}
.ledger-table th {
  text-align: left; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--stamp-grey); font-weight: 700;
  border-top: 2px solid var(--navy); border-bottom: 1px solid var(--rule-line);
  padding: 9px 12px 8px 0;
}
.ledger-table td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--rule-faint); vertical-align: top; }
.ledger-table tbody tr:nth-child(even) td { background: var(--ledger-paper); }
.ledger-table .cell-num { font-family: var(--fig-font); font-variant-numeric: tabular-nums; text-align: right; padding-right: 0; }
.ledger-table .row-total td { border-top: 1px solid var(--rule-strong); border-bottom: 3px double var(--navy); font-weight: 700; }
.ledger-table .row-total .cell-num { color: var(--gain-green); }

/* ---------- entry index (list pages) ---------- */
.entry-list { border-top: 2px solid var(--navy); margin: 20px 0 0; }
.entry {
  display: grid; grid-template-columns: 108px 1fr 190px; gap: var(--col-gutter);
  padding: 16px 0; border-bottom: 1px solid var(--rule-line);
}
.entry-stamp { font-family: var(--fig-font); font-size: 12px; color: var(--stamp-grey); padding-top: 3px; }
.entry-title { font-size: 18px; font-weight: 700; display: block; margin-bottom: 4px; }
.entry-intro { font-size: 14px; color: var(--navy-soft); margin: 0; }
.entry-meta { font-size: 12.5px; color: var(--stamp-grey); text-align: right; }
.entry-meta .tag {
  display: inline-block; font-family: var(--fig-font); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; border: 1px solid var(--rule-line); padding: 2px 7px; margin-left: 4px;
}
.entry-meta .tag.gain { border-color: var(--gain-green); color: var(--gain-green); }

/* ---------- figure block for parametric SVG ---------- */
.figure-block { border: 1px solid var(--rule-line); background: var(--ledger-white); margin: 22px 0; }
.figure-block img { display: block; width: 100%; height: auto; }
.figure-cap {
  font-family: var(--fig-font); font-size: 11.5px; color: var(--stamp-grey);
  padding: 8px 12px; border-top: 1px solid var(--rule-line); background: var(--ledger-paper);
}

/* ---------- definition block (glossary) ---------- */
.defined {
  border-left: 4px solid var(--gain-green); background: var(--gain-tint);
  padding: 16px 20px; margin: 0 0 22px;
}
.defined .defined-term { font-weight: 700; }
.defined p { margin: 0; }
.worked {
  border: 1px solid var(--rule-line); border-top: 3px solid var(--navy);
  padding: 16px 20px; margin: 0 0 22px; background: var(--ledger-paper);
}
.worked h3 { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stamp-grey); }
.rel-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rel-list a { border: 1px solid var(--rule-strong); padding: 4px 10px; font-size: 13px; border-bottom: 1px solid var(--rule-strong); }

/* ---------- takeaway / disclaimer strips ---------- */
.takeaways { border-top: 1px solid var(--rule-line); border-bottom: 1px solid var(--rule-line); padding: 16px 0; margin: 26px 0; }
.takeaways h2 { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stamp-grey); }
.takeaways ul { margin: 0; }
.takeaways li { font-size: 15px; }
.disclaimer {
  font-size: 12.5px; color: var(--stamp-grey); border-left: 2px solid var(--rule-strong);
  padding: 2px 0 2px 14px; margin: 22px 0 0;
}

/* ---------- prose page (legal / about) ---------- */
.prose { max-width: 78ch; }
.prose h2 { margin-top: 28px; }
.prose h2:first-of-type { margin-top: 0; }
.stamp-row {
  display: flex; gap: 22px; flex-wrap: wrap; font-family: var(--fig-font);
  font-size: 12px; color: var(--stamp-grey); border-bottom: 1px solid var(--rule-line);
  padding-bottom: 10px; margin-bottom: 22px;
}

/* ---------- footer ---------- */
.colophon { border-top: 3px solid var(--navy); background: var(--ledger-paper); margin-top: 40px; }
.colophon-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 26px; padding: 26px 0 20px; }
.colophon h3 { font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--stamp-grey); }
.colophon ul { list-style: none; padding: 0; font-size: 14px; }
.colophon a { border-bottom: 0; color: var(--navy-soft); }
.colophon a:hover { color: var(--gain-green); }
.colophon-foot {
  border-top: 1px solid var(--rule-line); padding: 12px 0 20px;
  font-family: var(--fig-font); font-size: 11.5px; color: var(--stamp-grey);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .metric-wall { grid-template-columns: repeat(2, 1fr); }
  .metric:nth-child(3n) { border-right: 1px solid var(--rule-line); }
  .metric:nth-child(2n) { border-right: 0; }
  .entry { grid-template-columns: 1fr; gap: 6px; }
  .entry-meta { text-align: left; }
  .band { grid-template-columns: 1fr; gap: 0; }
  .band-head { padding-bottom: 0; }
  .colophon-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  h1 { font-size: 27px; }
  .metric-wall { grid-template-columns: 1fr; }
  .metric { border-right: 0; }
  .tabnav ul { overflow-x: auto; }
  .colophon-grid { grid-template-columns: 1fr; }
}

@media print {
  .tabnav, .ticker, .colophon { display: none; }
  body { font-size: 11pt; }
}