/* ============================================================
   beaverfi — shared theme (Kettle Pond)
   Common chrome for every tool: tokens, typography, cards,
   form controls, buttons, chips, status banners, site header
   and footer. Tool-specific CSS stays in that tool's own file.

   No remote requests from this file (no @import, no url() to
   third-party hosts) — see conventions §3 / §6.
   ============================================================ */

/* ---------- self-hosted Inter (optional) ----------
   Served from our own origin, so no third-party request is made.
   If brand/InterVariable.woff2 is absent the browser silently
   falls back to the system stack in --font-sans; nothing breaks.
   See README for how to add the file. */
@font-face{
  font-family:'InterVar';
  src:url('/brand/InterVariable.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  /* --- Kettle Pond palette --- */
  --ink:#14261F;          /* Spruce ink  — text, outlines            */
  --deep:#12675A;         /* Deep pond   — headers, wordmark         */
  --primary:#1B9A86;      /* Pond teal   — mascot body, secondary    */
  --fresh:#3FBFA9;        /* Shallows    — highlights, positive      */
  --tint:#DCEFE9;         /* Mist        — belly, surfaces, chips    */
  --accent:#E39A2E;       /* Tooth amber — primary CTA, the "fi"     */
  --bone:#F3EEE2;         /* Birch       — page background           */
  --card:#FFFFFF;         /* Card        — panels                    */

  /* --- derived neutrals --- */
  --ink-soft:#3A4F48;
  --muted:#6E837B;
  --accent-dark:#A96F16;
  --border-solid:#DFD8C7;
  --border-dash:#C8BFAB;
  --chip:var(--tint);
  --field:#FCFBF7;
  --disabled-bg:#EDEAE0;
  --disabled-ink:#A39C8D;

  /* --- semantic states --- */
  --ok:#12675A;
  --ok-bg:#E2F2EC;
  --ok-border:#B4DACE;
  --ok-ink:#0E5145;
  --warn:#E39A2E;
  --warn-bg:#FBF0DC;
  --warn-border:#EFD5A6;
  --warn-ink:#8A5A12;
  --green:var(--ok);      /* alias: some tools set colors via var(--green) in JS */
  --red:#C0392B;
  --bad-bg:#FAE9E6;
  --bad-border:#EBC4BD;
  --bad-ink:#8E2C21;

  --font-sans:'InterVar','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --radius:12px;
  --radius-sm:8px;
}

*{box-sizing:border-box;}

body{
  margin:0; background:var(--bone); color:var(--ink);
  font-family:var(--font-sans);
  font-size:14px; line-height:1.5; padding:20px 16px 40px;
  -webkit-text-size-adjust:100%;
}
.wrap{max-width:1400px; margin:0 auto;}

/* Reading pages (about, and any future text page). 1400px is right for a
   tool with a chart in it, but on a text page it produced a very wide card
   holding a 720px column of type, so most of the card was empty. Narrowing
   the whole page — bar, content and footer together, so nothing misaligns —
   makes the card fit the text instead of the text floating inside it. */
.page-narrow .brandbar,
.page-narrow .wrap,
.page-narrow .sitefoot{max-width:768px;}

/* ---------- brand bar ---------- */
.brandbar{
  max-width:1400px; margin:0 auto 18px; display:flex;
  align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.brandbar-logo{display:inline-flex; align-items:center; line-height:0;}
.brandbar-logo img{height:34px; width:auto; display:block;}
.brandbar-nav{display:flex; align-items:center; gap:16px; font-size:13px; font-weight:600;}
.brandbar-nav a{color:var(--deep); text-decoration:none;}
.brandbar-nav a:hover{color:var(--accent-dark); text-decoration:underline;}
.brandbar-nav a[aria-current="page"]{color:var(--ink); text-decoration:underline; text-underline-offset:3px;}

/* ---------- donate button (plain link, no third-party widget — §7) ---------- */
.donate{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font-size:12px; font-weight:600; line-height:1; padding:7px 12px;
  border:1px solid var(--accent); border-radius:20px;
  background:var(--warn-bg); color:var(--accent-dark); text-decoration:none;
}
.donate:hover{background:var(--accent); border-color:var(--accent); color:var(--ink); text-decoration:none;}

/* ---------- page heading ---------- */
header.top{margin-bottom:20px;}
header.top h1{font-size:26px; font-weight:700; margin:0 0 4px; letter-spacing:-0.015em; color:var(--deep);}
header.top p{margin:0; color:var(--ink-soft); max-width:720px;}

/* ---------- trust chips (free / no signup / private) ---------- */
.trustbar{display:flex; flex-wrap:wrap; gap:6px; margin-top:11px;}
.trustbar span{
  font-size:11px; font-weight:600; color:var(--deep); background:var(--chip);
  border:1px solid var(--ok-border); border-radius:20px; padding:3px 10px;
}
.trustbar span.hot{background:var(--warn-bg); border-color:var(--warn-border); color:var(--accent-dark);}

/* ---------- cards ---------- */
.card{
  background:var(--card); border:1px solid var(--border-solid);
  border-radius:var(--radius); padding:18px 18px 16px; margin-bottom:16px;
}
.card.dashed{border-style:dashed; border-color:var(--border-dash);}
.card h2{
  font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--deep); margin:0 0 14px; display:flex; align-items:center; gap:8px;
}
.card h2 .tag{
  font-size:10px; font-weight:600; color:var(--muted); text-transform:none; letter-spacing:0;
  background:var(--chip); border:1px solid var(--border-solid); border-radius:20px; padding:2px 8px;
}

/* ---------- form controls ---------- */
.field{display:flex; flex-direction:column; gap:4px; min-width:0;}
.field label{display:block; font-size:11px; font-weight:600; color:var(--ink-soft);}
.field .hint{font-size:10px; color:var(--muted); font-weight:400;}
.field label.maxrow{display:flex; align-items:center; gap:5px; font-size:10px; font-weight:600; color:var(--deep); cursor:pointer; margin-top:2px;}
.field label.maxrow input{width:auto; margin:0; accent-color:var(--primary); cursor:pointer;}
.maxhint{font-size:10px; font-weight:500; color:var(--deep);}
.checkline{display:flex; align-items:center; gap:6px; font-size:12px; font-weight:500; color:var(--ink-soft); cursor:pointer; padding-top:8px;}
.checkline input{width:auto; margin:0; accent-color:var(--primary); cursor:pointer;}
.inputbox{position:relative; display:flex; align-items:center; min-width:0;}
.prefix,.suffix{position:absolute; color:var(--muted); font-size:13px; pointer-events:none;}
.prefix{left:10px;}
.suffix{right:10px;}
input[type=number],input[type=text],select{
  width:100%; min-width:0; padding:8px 10px; border:1px solid var(--border-solid); border-radius:var(--radius-sm);
  font-family:inherit; font-size:14px; color:var(--ink); background:var(--field); outline:none;
}
input.has-prefix{padding-left:22px;}
input.has-suffix{padding-right:26px;}
input[type=number]:focus,input[type=text]:focus,select:focus{border-color:var(--primary); box-shadow:0 0 0 3px rgba(27,154,134,0.18);}
input:disabled{background:var(--disabled-bg); color:var(--disabled-ink); cursor:not-allowed;}

/* ---------- control widths ----------
   Inputs default to 100% of their grid cell, which leaves a two-digit age
   sitting in a 400px box. These cap the control to roughly the width of the
   value it holds. Applied to whichever element is the grid child — the bare
   <input>, or the .inputbox / .agebox wrapper when there's a $ or % affix
   (the affix is positioned against the wrapper, so the wrapper must be the
   thing that shrinks, not the input inside it). */
.w-age   {max-width:92px;}
.w-year  {max-width:112px;}
.w-pct   {max-width:104px;}
.w-money {max-width:180px;}
.w-select{max-width:220px;}

/* ---------- field help ("i" bubble) ----------
   Hover or focus the bubble to reveal a note under the label. Deliberately
   an in-flow block rather than a floating tooltip: the input pane is a
   scroll container, so an absolutely-positioned popup would be clipped at
   its edge. This costs a small layout shift and can never be cut off.
   It's a real <button>, so it also works on touch (tap = focus) and by
   keyboard, which a CSS :hover-only tooltip would not. */
.info{
  display:inline-flex; align-items:center; justify-content:center;
  width:14px; height:14px; padding:0; margin-left:4px; flex:none;
  border:1px solid var(--border-dash); border-radius:50%;
  background:#fff; color:var(--muted);
  font-family:inherit; font-size:9px; font-weight:700; line-height:1;
  cursor:help; vertical-align:text-bottom;
}
.info:hover,.info:focus{background:var(--deep); border-color:var(--deep); color:#fff; outline:none;}
.tip{
  display:none; margin:5px 0 2px; padding:7px 9px;
  background:var(--chip); border:1px solid var(--ok-border); border-left:3px solid var(--primary);
  border-radius:6px; color:var(--ink-soft);
  font-size:11px; font-weight:400; line-height:1.55; text-transform:none; letter-spacing:0;
}
.tip b{color:var(--deep); font-weight:600;}
.info:hover ~ .tip, .info:focus ~ .tip{display:block;}
/* Label + bubble share a line; the tip drops to a full line beneath.
   The bubble sits OUTSIDE the <label> on purpose — inside it, the label's
   `for` would pull focus to the input on tap and close the tip before it
   could be read. Keeping them siblings lets the label stay associated with
   its control while the bubble keeps its own focus.

   This is a BLOCK, not a flex row: as flex, a label long enough to fill the
   line pushed the bubble onto a line of its own, so a two-line label became
   a three-line one and knocked the input below its neighbour. As inline
   flow, the bubble simply follows the last word and wraps with it. */
.labelrow{display:block;}
.labelrow > label{display:inline;}
.labelrow > .info{vertical-align:middle;}
.labelrow > .tip{display:none;}

/* ---------- buttons ---------- */
.btn{
  font-family:inherit; font-size:12px; font-weight:600; padding:8px 14px; border-radius:var(--radius-sm);
  border:1px solid var(--deep); background:var(--deep); color:#fff; cursor:pointer; white-space:nowrap;
}
.btn:hover{background:var(--ink); border-color:var(--ink);}
.btn.ghost{background:#fff; color:var(--deep);}
.btn.ghost:hover{background:var(--chip);}
.btn.accent{background:var(--accent); border-color:var(--accent); color:var(--ink);}
.btn.accent:hover{background:var(--accent-dark); border-color:var(--accent-dark); color:#fff;}

/* ---------- stat chips ---------- */
.chips{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:8px;}
.chip{background:var(--chip); border:1px solid var(--ok-border); border-radius:var(--radius-sm); padding:6px 10px;}
.chip .k{font-size:9px; font-weight:600; color:var(--deep); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:0; line-height:1.25; opacity:.8;}
.chip .v{font-size:16px; font-weight:700; color:var(--ink); letter-spacing:-0.01em; line-height:1.2;}
.chip .sub{font-size:9px; color:var(--muted); margin-top:0; line-height:1.2;}

/* ---------- status banner ---------- */
.status{
  border-radius:10px; padding:12px 14px; font-weight:600; margin-bottom:14px;
  border:1px solid; display:flex; gap:10px; align-items:flex-start;
}
.status .dot{width:10px; height:10px; border-radius:50%; margin-top:5px; flex:none;}
.status.ok{background:var(--ok-bg); border-color:var(--ok-border); color:var(--ok-ink);}
.status.ok .dot{background:var(--ok);}
.status.warn{background:var(--warn-bg); border-color:var(--warn-border); color:var(--warn-ink);}
.status.warn .dot{background:var(--warn);}
.status.bad{background:var(--bad-bg); border-color:var(--bad-border); color:var(--bad-ink);}
.status.bad .dot{background:var(--red);}

/* ---------- tables & notes ---------- */
details{margin-top:4px;}
details summary{cursor:pointer; font-size:12px; font-weight:600; color:var(--deep); padding:6px 0;}
table{width:100%; border-collapse:collapse; margin-top:8px; font-size:12px;}
th,td{text-align:right; padding:6px 8px; border-bottom:1px solid var(--border-solid);}
th{color:var(--muted); font-weight:600; text-transform:uppercase; font-size:10px; letter-spacing:0.04em;}
th:first-child,td:first-child{text-align:left;}
.note{font-size:11px; color:var(--muted); line-height:1.6;}
.note b{color:var(--ink-soft);}

/* ---------- prose (about / text pages) ---------- */
.prose{max-width:720px;}
.prose h2{
  font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--deep); margin:0 0 12px;
}
.prose h3{font-size:14px; font-weight:700; color:var(--ink); margin:20px 0 6px;}
.prose p{margin:0 0 12px; color:var(--ink-soft);}
.prose p:last-child{margin-bottom:0;}
.prose ul{margin:0 0 12px; padding-left:20px; color:var(--ink-soft);}
.prose li{margin-bottom:6px;}
.prose a{color:var(--deep); font-weight:600;}
.prose b{color:var(--ink);}
.prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:0.9em;
  background:var(--chip); border:1px solid var(--border-solid); border-radius:4px; padding:1px 5px;
}
.card-mascot{display:flex; gap:20px; align-items:flex-start;}
.card-mascot > img{width:104px; height:auto; flex:none;}
@media(max-width:560px){ .card-mascot{flex-direction:column;} .card-mascot > img{width:80px;} }

/* ---------- site footer ---------- */
.sitefoot{
  max-width:1400px; margin:24px auto 0; display:flex; align-items:center; gap:14px;
  border-top:1px solid var(--border-dash); padding-top:16px;
  font-size:11px; color:var(--muted); line-height:1.7;
}
.sitefoot img{width:44px; height:auto; flex:none;}
.sitefoot b{color:var(--deep);}
.sitefoot a{color:var(--deep); font-weight:600;}
.sitefoot .foot-actions{margin-left:auto; flex:none;}
@media(max-width:560px){
  .sitefoot{flex-direction:column; align-items:flex-start; gap:10px;}
  .sitefoot .foot-actions{margin-left:0;}
}