/* ============================================================
   lib/theme.css — the one definition of how Every Dear One looks.

   Why this exists: every page carried its own copy of :root. The
   copies drifted. --accent was #9c5b46 on dashboard, people and
   compose and #945540 on the other ten; --soft was #6f675d on
   three pages and #5a5249 on the rest; compose had its own --paper
   and half the pages had no --shadow at all. Changing the palette
   meant editing eighteen files and missing three, which is exactly
   how the nav went wrong before lib/nav.js.

   Usage, in <head>, BEFORE the page's own <style>:
     <link rel="stylesheet" href="/lib/theme.css">

   While a page still defines its own :root, that page wins — so
   adding the link changes nothing. Delete a page's :root block and
   it adopts these. That way pages move over one at a time without
   a flag day.

   kids.html is deliberately its own palette and stays out of this.
   ============================================================ */

:root{
  /* ---- ground and ink ---- */
  --paper:      #f3ece0;   /* page background */
  --paper2:     #fbf8f1;   /* cards, panels */
  --paper3:     #f7f1e6;   /* a panel that wants to sit forward */
  --ink:        #2b2723;   /* body text */
  --soft:       #5a5249;   /* secondary text */
  --faint:      #8a8073;   /* captions, timestamps */
  --line:       #e0d6c4;   /* borders, rules */
  --line-soft:  #efe7db;   /* rules inside a card */
  --deep:       #3a3128;   /* dark hero band */
  --deep-ink:   #f6efe4;   /* text on --deep */
  --deep-soft:  #c3ae95;   /* secondary text on --deep */
  --deep-faint: #b09a82;   /* labels on --deep */

  /* ---- accents ----
     One clay, not two. #945540 was on ten of thirteen pages. */
  --accent:     #945540;
  --accentsoft: #c98a6f;
  --accent-pale:#f6e6dc;

  /* ---- meaning ----
     Money is read at a glance, so up and down must differ in
     LIGHTNESS as well as hue, not red-vs-green alone. */
  --green:      #5f7a4a;   /* better than expected */
  --green-pale: #eef0e7;
  --red:        #b3402f;   /* worse than expected */
  --red-pale:   #f5e7e3;
  --gold:       #c9a14a;   /* attention, not alarm */
  --gold-pale:  #f4ecc9;
  --tender:     #6d6a82;   /* the quieter, human things */
  --sage:       #7d8c63;
  --sage-pale:  #eef0e7;
  --sage-deep:  #5a6b47;   /* kids-admin used this without defining it */
  --rose:       #a8564a;
  --rose-pale:  #f5e7e3;
  --rose-deep:  #8f4438;
  --blue-pale:  #e7edf0;
  --blue-deep:  #4a6579;
  --gold-deep:  #8a6d1e;
  --ok:         #4a7c59;
  --err:        #a6492f;

  /* ---- depth ---- */
  --shadow:      0 1px 2px rgba(58,49,40,.04), 0 4px 14px -6px rgba(58,49,40,.12);
  --shadow-lift: 0 2px 4px rgba(58,49,40,.05), 0 14px 34px -10px rgba(58,49,40,.22);

  /* ---- measure ---- */
  --wrap:   1320px;
  --radius: 14px;
  --radius-sm: 10px;

  /* ---- type ----
     Fraunces for anything that names a thing, Newsreader for
     anything that explains it. Numbers you compare are Fraunces:
     it has the weight to be read across a row. */
  --display: "Fraunces", Georgia, serif;
  --body:    "Newsreader", Georgia, serif;
}

/* ============================================================
   Base
   ============================================================ */
.edo *{ box-sizing:border-box; margin:0; padding:0; }

.edo-page{
  background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.edo-wrap{ max-width:var(--wrap); margin:0 auto; padding:24px 22px 80px; }

.edo-h1{ font-family:var(--display); font-size:30px; font-weight:400; line-height:1.2; }
.edo-h2{ font-family:var(--display); font-size:21px; font-weight:400; line-height:1.25; }
.edo-h3{ font-family:var(--display); font-size:17px; font-weight:500; }
.edo-sub{ font-size:14.5px; color:var(--soft); }
.edo-cap{ font-size:13px; color:var(--faint); }
.edo-lab{
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint);
}

/* ============================================================
   Cards and panels
   ============================================================ */
.edo-card{
  background:var(--paper2); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px 24px;
}
.edo-card--forward{ background:var(--paper3); }
.edo-card--tap{ cursor:pointer; transition:box-shadow .2s, transform .2s; }
.edo-card--tap:hover{ box-shadow:var(--shadow-lift); transform:translateY(-1px); }

.edo-hero{
  background:var(--deep); color:var(--deep-ink);
  border-radius:16px; padding:26px 30px;
}
.edo-hero .edo-lab{ color:var(--deep-faint); }
.edo-hero .edo-sub{ color:var(--deep-soft); }

/* A figure and what it means. Never a figure alone. */
.edo-stat{ display:flex; flex-direction:column; gap:4px; }
.edo-stat-num{ font-family:var(--display); font-size:30px; line-height:1.1; }
.edo-stat-num--lg{ font-size:44px; }
.edo-stat-num--sm{ font-size:21px; }
.edo-stat-num.is-up{ color:var(--green); }
.edo-stat-num.is-down{ color:var(--red); }
.edo-stat-note{ font-size:13px; color:var(--faint); }

/* ============================================================
   Grids
   ============================================================ */
.edo-grid{ display:grid; gap:18px; }
.edo-grid-2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.edo-grid-3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.edo-grid-4{ grid-template-columns:repeat(4, minmax(0,1fr)); }
.edo-row{ display:flex; gap:18px; }
.edo-row--tight{ gap:10px; }
.edo-spread{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.edo-fill{ flex-grow:1; }

/* ============================================================
   Tables of figures
   ============================================================ */
.edo-tab{ width:100%; border-collapse:collapse; }
.edo-tab td, .edo-tab th{
  padding:9px 0; text-align:left; font-size:15px;
  border-bottom:1px solid var(--line-soft);
}
.edo-tab th{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); font-weight:400;
}
.edo-tab .r{ text-align:right; font-variant-numeric:tabular-nums; }
.edo-tab tr.grp td{
  padding-top:15px; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint);
}
.edo-tab tr.tot td{
  border-bottom:none; border-top:1px solid var(--line);
  font-weight:500; padding-top:11px;
}
.edo-tab tr.tap{ cursor:pointer; }
.edo-tab tr.tap:hover td{ background:var(--paper3); }

/* ============================================================
   Progress
   ============================================================ */
.edo-bar{ height:12px; background:#eadfd0; border-radius:6px; overflow:hidden; }
.edo-bar > span{ display:block; height:100%; border-radius:6px; background:var(--sage); }
.edo-bar > span.is-short{ background:var(--accent); }

/* ============================================================
   Controls — real elements, so the keyboard reaches them
   ============================================================ */
.edo-btn{
  font-family:var(--body); font-size:14.5px; color:var(--soft);
  background:var(--paper2); border:1px solid var(--line);
  border-radius:9px; padding:10px 16px; cursor:pointer;
  min-height:44px; text-decoration:none; display:inline-flex;
  align-items:center; justify-content:center; gap:7px;
}
.edo-btn:hover{ border-color:var(--accentsoft); color:var(--ink); }
.edo-btn--primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.edo-btn--primary:hover{ background:#7d4636; color:#fff; }
.edo-btn--sm{ min-height:36px; padding:7px 12px; font-size:13.5px; }

.edo-switch{
  display:inline-flex; align-items:center; gap:9px;
  border:1px solid var(--line); border-radius:22px;
  padding:9px 14px; background:var(--paper2); cursor:pointer;
  font-size:14.5px; min-height:44px;
}
.edo-switch .dot{
  width:9px; height:9px; border-radius:5px;
  background:var(--line); flex-shrink:0;
}
.edo-switch.on{ border-color:var(--accentsoft); }
.edo-switch.on .dot{ background:var(--accent); }

/* ============================================================
   Saying what is true about the data
   ============================================================ */
.edo-note{
  border-radius:var(--radius-sm); padding:12px 14px;
  font-size:14px; color:var(--soft); background:var(--paper3);
}
.edo-note--warn{ background:var(--accent-pale); color:#8a4a2c; }
.edo-note--good{ background:var(--green-pale); color:#41552f; }

/* A figure the data cannot yet support says so, rather than
   showing a number nobody can stand behind. */
.edo-stale{ color:var(--faint); font-style:italic; }

/* ============================================================
   Small screens
   ============================================================ */
@media (max-width: 900px){
  .edo-grid-3, .edo-grid-4{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .edo-row{ flex-wrap:wrap; }
}
@media (max-width: 620px){
  .edo-wrap{ padding:16px 16px 64px; }
  .edo-grid-2, .edo-grid-3, .edo-grid-4{ grid-template-columns:minmax(0,1fr); }
  .edo-h1{ font-size:25px; }
  .edo-stat-num--lg{ font-size:34px; }
  .edo-hero{ padding:20px 18px; }
  .edo-card{ padding:18px 16px; }
}