/* hc.css — Her Climb Finance. One stylesheet, shared by every page.
   Poppins for text, DM Mono for eyebrows and figures.
   Navy #10499A, gold #F4A81D (#8A5A00 for gold text under 18px),
   coral #F2694E for attention, green #14664A for done, white cards on #FAFBFC. */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: #FAFBFC;
  font-family: Poppins, system-ui, sans-serif;
  color: #16202C;
  -webkit-font-smoothing: antialiased;
}

a { color: #10499A; text-decoration: none; }
a:hover { color: #0C3872; text-decoration: underline; }

.mono { font-family: "DM Mono", ui-monospace, monospace; }

.eyebrow {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #8A5A00;
}

/* ── shell ── */
.shell { display: grid; grid-template-columns: 216px minmax(0, 1fr); min-height: 100vh; align-items: start; }

.side {
  position: sticky; top: 0; min-height: 100vh; background: #fff;
  border-right: 1px solid #E8EBEF;
  padding: 28px 16px 28px 24px;
  display: flex; flex-direction: column; gap: 26px;
}
.side .brand { font-size: 17px; font-weight: 600; color: #10499A; letter-spacing: -0.01em; margin-top: 3px; }
.side nav { display: flex; flex-direction: column; gap: 2px; }
.side nav a {
  padding: 9px 12px; border-radius: 7px; font-size: 14px; color: #16202C; text-decoration: none;
}
.side nav a:hover { background: #F1F4F8; text-decoration: none; }
.side nav a[aria-current="page"] { background: #EEF3FA; color: #10499A; font-weight: 500; }
.side .foot {
  margin-top: auto; font-family: "DM Mono", ui-monospace, monospace;
  font-size: 11px; line-height: 1.7; color: #5B6672;
}
.side .foot strong { color: #16202C; font-weight: 400; }

main { padding: 40px clamp(20px, 4vw, 56px) 90px; max-width: 1160px; }

h1 { font-size: clamp(26px, 3.4vw, 34px); font-weight: 600; letter-spacing: -0.02em; margin: 6px 0 0; }
h2 { font-size: 15px; font-weight: 600; margin: 0; }
.lede { font-size: 15px; line-height: 1.65; color: #5B6672; max-width: 70ch; margin: 12px 0 0; text-wrap: pretty; }
.note { font-size: 13px; line-height: 1.65; color: #5B6672; text-wrap: pretty; }

/* ── cards ── */
.card { background: #fff; border: 1px solid #E8EBEF; border-radius: 10px; padding: 22px 24px 24px; }
.card.attn { border-color: #F2694E; }
.card.warn { border-color: #F4A81D; }
.card.done { border-color: #14664A; }

.grid { display: grid; gap: 14px; }
.grid.stats { grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; gap: 20px; }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; }

.stat { background: #fff; border: 1px solid #E8EBEF; border-radius: 10px; padding: 18px 20px 20px; }
.stat .label {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #5B6672;
}
.stat .value {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 24px; font-weight: 500; letter-spacing: -0.02em; margin-top: 10px;
}
.stat .sub { font-size: 12px; line-height: 1.5; color: #5B6672; margin-top: 6px; }

/* ── tables ── */
.table { background: #fff; border: 1px solid #E8EBEF; border-radius: 10px; overflow: hidden; }
.table .head, .table .row { display: grid; gap: 10px; padding: 13px 22px; align-items: baseline; }
.table .head {
  background: #F7F9FB; border-bottom: 1px solid #E8EBEF;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #5B6672;
}
.table .row { border-bottom: 1px solid #F4F6F9; font-size: 13px; }
.table .row:last-child { border-bottom: 0; }
.table a.row { color: inherit; text-decoration: none; }
.table a.row:hover { background: #F7F9FB; text-decoration: none; }
.table .foot { padding: 14px 22px; font-size: 12px; color: #5B6672; }
.right { text-align: right; }
.wrap { overflow-wrap: anywhere; }

/* Column templates, one per screen. */
.cols-ledger { grid-template-columns: 58px minmax(0, 2.4fr) minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); }
.cols-donors { grid-template-columns: minmax(0, 2.2fr) minmax(0, .8fr) minmax(0, 1.1fr) 34px minmax(0, .9fr); }
.cols-rules { grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) 46px; }
.cols-grants { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.2fr); }
.cols-preview { grid-template-columns: 58px minmax(0, 2.2fr) minmax(0, 1.5fr) minmax(0, 1fr); }

/* ── buttons ── */
button, .btn {
  font-family: inherit; font-size: 14px; cursor: pointer;
  border-radius: 7px; padding: 11px 18px; border: 1px solid #C6CFDA;
  background: transparent; color: #16202C;
}
button:hover, .btn:hover { border-color: #10499A; text-decoration: none; }
.btn-primary, button.primary {
  background: #10499A; border: 0; color: #fff; font-weight: 500;
}
.btn-primary:hover, button.primary:hover { background: #0C3872; }
.btn-gold, button.gold { background: #F4A81D; border: 0; color: #16202C; font-weight: 500; }
.btn-gold:hover, button.gold:hover { background: #E09A15; }
button.small, .btn.small { padding: 7px 13px; font-size: 12px; }
button.pill { border-radius: 999px; padding: 7px 15px; font-size: 12px; }
button.pill[aria-pressed="true"] { background: #EEF3FA; border-color: #10499A; color: #10499A; }
button:disabled { opacity: .5; cursor: default; }

.actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ── forms ── */
label { display: block; }
label .cap {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #5B6672;
}
input[type="text"], input[type="email"], input[type="number"], input[type="date"], select, textarea {
  font-family: inherit; font-size: 14px; color: #16202C;
  width: 100%; margin-top: 6px;
  border: 1px solid #C6CFDA; border-radius: 7px; padding: 11px 13px; background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid #10499A; outline-offset: -1px; border-color: #10499A; }
textarea { min-height: 84px; line-height: 1.6; resize: vertical; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }

/* ── bars ── */
.bar { height: 4px; border-radius: 2px; background: #F1F4F8; margin-top: 5px; }
.bar > span { display: block; height: 4px; border-radius: 2px; background: #10499A; }

/* ── list rows ── */
.item { display: grid; gap: 12px; align-items: start; padding: 13px 0; border-top: 1px solid #F1F4F8; }
.item:first-child { border-top: 0; }
.item .t { font-size: 14px; font-weight: 500; line-height: 1.45; }
.item .b { font-size: 13px; line-height: 1.55; color: #5B6672; margin-top: 3px; text-wrap: pretty; }
.dot { width: 6px; height: 6px; border-radius: 50%; margin-top: 7px; }

.muted { color: #5B6672; }
.coral { color: #F2694E; }
.green { color: #14664A; }
.navy { color: #10499A; }
.gold-text { color: #8A5A00; }

.hidden { display: none !important; }

/* Loading is a word, not a spinner. */
.loading { font-size: 14px; color: #5B6672; padding: 24px 0; }

@media (max-width: 720px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: static; min-height: 0; border-right: 0; border-bottom: 1px solid #E8EBEF; }
  .side nav { flex-direction: row; flex-wrap: wrap; }
  .side .foot { display: none; }
  main { padding: 24px 18px 60px; }
  .table .head { display: none; }
  .table .row { grid-template-columns: 1fr 1fr !important; }
}