/* ==========================================================================
   Worth It Calcs — shared site stylesheet
   One source of truth for colour, type and components across every calculator.
   Change a token here and the homepage, Solar and NRI pages all follow.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Instrument+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap");

:root{
  /* Paper and ink */
  --paper:#f2ede3;        /* page background */
  --paper-deep:#e8e1d2;   /* illustration panels, soft fills, slider tracks */
  --card:#fdfbf6;         /* cards and panels */
  --field:#fffdf9;        /* inputs */
  --ink:#1c1a17;          /* text, outlines, hard shadows, dark buttons */
  --muted:#5c564d;        /* secondary text */
  --faint:#6b6459;        /* fine print, axis labels (≥4.5:1 on paper and card) */
  --rule:#d9d0bf;         /* hairlines inside cards */
  --rule-strong:#c9bfac;  /* input borders */

  /* Brand accents */
  --red:#e5472f;          /* brand vermilion — fills, large display type, illustrations */
  --red-ink:#b8341d;      /* vermilion for small text and buttons (AA on paper and card) */
  --red-soft:#fbe4dc;
  --green:#3cc17f;        /* brand green — fills, illustrations */
  --green-ink:#1b7547;    /* green for small text (AA on paper and card) */
  --green-soft:#d7f1e2;

  /* Answer colours, used the same way on every calculator:
     "yes / keep / worth it" = green, "no / sell / not worth it" = vermilion */
  --yes:var(--green-ink);  --yes-fill:var(--green);  --yes-soft:var(--green-soft);
  --no:var(--red-ink);     --no-fill:var(--red);     --no-soft:var(--red-soft);

  /* Cautions and errors */
  --warn:#7a4f00; --warn-soft:#f8ecd0;
  --bad:#b3261e;  --bad-soft:#fde8e6;

  /* Type */
  --display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --body:"Instrument Sans",ui-sans-serif,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Shape */
  --radius:4px;
  --shadow:6px 6px 0 var(--ink);
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 var(--body);-webkit-font-smoothing:antialiased}
::selection{background:var(--ink);color:var(--card)}
a{color:var(--red-ink);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
@media(max-width:480px){.wrap{padding:0 16px}}

/* ---------- Mono labels (the site's eyebrow / meta voice) ---------- */
.label{font:700 11.5px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--red-ink)}
.label.meta{color:var(--faint);font-weight:500}

/* ---------- Site header and footer (identical on every page) ---------- */
.site-head{border-bottom:1px solid var(--ink);background:var(--paper)}
.site-head .wrap{display:flex;justify-content:space-between;align-items:center;min-height:60px;gap:16px}
.site-brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font:400 25px/1 var(--display);letter-spacing:-.01em}
.site-brand .glyph{width:26px;height:26px;border:1.5px solid var(--ink);border-radius:var(--radius);display:grid;place-items:center;font:700 13px var(--mono);background:var(--red);color:var(--card)}
.site-nav{display:flex;gap:22px}
.site-nav a{font:700 11.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.site-nav a:hover{color:var(--red-ink)}
@media(max-width:560px){.site-nav a.optional{display:none}}
.site-foot{border-top:1px solid var(--ink);margin-top:40px;padding:28px 0 100px;font-size:13.5px;color:var(--muted)}
.site-foot .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:baseline}
.site-foot nav{display:flex;gap:18px;flex-wrap:wrap}
.site-foot nav a{font:700 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none}

/* ---------- Page hero ---------- */
.page-hero{padding-top:34px;padding-bottom:30px}
.page-hero h1{font:400 clamp(44px,7vw,84px)/.98 var(--display);letter-spacing:-.025em;margin:10px 0 14px;max-width:16ch}
.page-hero h1 em{font-style:italic;color:var(--red)}
.page-hero p{margin:0;color:var(--muted);font-size:17px;max-width:56ch}
.page-hero .meta-row{margin-top:18px;display:flex;flex-wrap:wrap;gap:6px 16px}
.page-hero .meta-row span+span::before{content:"·";margin-right:16px;color:var(--faint)}

/* ---------- Cards ---------- */
.panel{background:var(--card);border:1px solid var(--ink);border-radius:var(--radius);padding:24px}
.panel.lifted{box-shadow:var(--shadow)}
h2{font:400 31px/1.08 var(--display);letter-spacing:-.015em;margin:0 0 6px}
h3{font-weight:600}
.lede{font-size:14.5px;color:var(--muted);margin:0 0 14px}
.small{font-size:13px;color:var(--muted)}

/* ---------- Buttons ---------- */
.btn{appearance:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid var(--ink);border-radius:var(--radius);background:var(--card);color:var(--ink);font:700 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--paper-deep)}
.btn.dark{background:var(--ink);color:var(--card)}
.btn.dark:hover{background:#34302a}
.btn.primary{background:var(--red-ink);border-color:var(--red-ink);color:var(--card)}
.btn.primary:hover{background:#9c2b17}
.linkbtn{all:unset;cursor:pointer;font:700 11.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--red-ink)}
.linkbtn:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- Form controls ---------- */
input[type=text],input[type=number],select{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--rule-strong);border-radius:var(--radius);background:var(--field);color:var(--ink);font:500 16px var(--body)}
input[type=text]:hover,input[type=number]:hover,select:hover{border-color:#a99f8b}
input[type=text]:focus,input[type=number]:focus,select:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
input.err{border-color:var(--bad);background:var(--bad-soft)}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231c1a17' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;margin:2px 0 0;--p:50%}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--ink) var(--p),var(--paper-deep) var(--p))}
input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--paper-deep)}
input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:var(--ink)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--card);border:2px solid var(--ink);margin-top:-8px}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--card);border:2px solid var(--ink)}
input[type=range]:focus-visible{outline:none}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--paper-deep)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;cursor:pointer}
.check input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--ink);flex:none}

/* ---------- Tags, notes, tables ---------- */
.tag{display:inline-block;font:700 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:3px;margin-right:6px}
.tag.yes{background:var(--yes-soft);color:var(--yes)}
.tag.no{background:var(--no-soft);color:var(--no)}
.note{font-size:13.5px;background:var(--warn-soft);color:var(--warn);border-radius:var(--radius);padding:10px 12px}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th{text-align:left;font:700 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);padding:8px 0;border-bottom:1px solid var(--ink)}
td{padding:10px 0;border-bottom:1px solid var(--rule);vertical-align:top}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;padding-left:12px}

/* ---------- Disclosure ---------- */
details.more>summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:46px;font-weight:600}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::after{content:"+";font:400 22px var(--mono);color:var(--ink)}
details.more[open]>summary::after{content:"−"}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}