/* avgcalc — design tokens. Soft, rounded, hard-shadow "sticker" look. */
:root {
  color-scheme: light;
  --ink: #2b2140;
  --ink-soft: #4a3f63;
  --bg: #f4f1ff;
  --paper: #fffdfa;
  --mint: #a8ecd1;
  --lilac: #cdbfff;
  --lemon: #ffe27a;
  --coral: #ffb4a2;
  --mint-wash: #e6f9f0;
  --lilac-wash: #eee9ff;
  --lemon-wash: #fff6d1;
  --coral-wash: #ffe6df;
  --rule: rgba(43, 33, 64, .16);
  --radius-sm: .7rem;
  --radius-md: 1rem;
  --radius-lg: 1.4rem;
  --radius-pill: 999px;
  --stroke: 2px;
  --shadow-sm: 3px 3px 0 var(--ink);
  --shadow-md: 4px 4px 0 var(--ink);
  --shadow-lg: 6px 6px 0 var(--ink);
  --gutter: clamp(1rem, 5vw, 4rem);
  --max: 72rem;
  --font: "Nunito", ui-rounded, "Avenir Next", "Arial Rounded MT Bold", system-ui, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  background-image: radial-gradient(rgba(43, 33, 64, .07) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
}
h1, h2, h3 { font-weight: 900; letter-spacing: -.03em; line-height: 1.08; margin: 0; }
p { margin: 0; }
a { color: inherit; }
button, select, textarea, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: var(--radius-sm); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--lemon); padding: .5rem 1rem; border: var(--stroke) solid var(--ink); border-radius: var(--radius-pill); }
.skip:focus { left: 1rem; top: 1rem; z-index: 10; }

/* Header */
.site-header {
  max-width: var(--max); margin: 0 auto; padding: 1.25rem var(--gutter) .5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; }
.mark { width: 2.4rem; height: 2.4rem; flex: none; }
.mark rect:first-child { fill: var(--mint); stroke: var(--ink); stroke-width: 2.5; }
.mark .bar { fill: var(--ink); }
.mark text { font-family: var(--font); font-weight: 900; font-size: 22px; fill: var(--ink); }
.wordmark { font-weight: 900; font-size: 1.7rem; letter-spacing: -.04em; }
.wordmark span { color: var(--ink); position: relative; }
.wordmark span::after { content: ""; position: absolute; left: 0; right: 0; bottom: .12em; height: .32em; background: var(--lemon); z-index: -1; border-radius: 3px; }
.site-nav { display: flex; gap: .25rem; flex-wrap: wrap; }
.site-nav a { text-decoration: none; font-weight: 800; padding: .45rem .8rem; border-radius: var(--radius-pill); }
.site-nav a:hover { background: var(--paper); box-shadow: var(--shadow-sm); transform: translateY(-1px); }

main { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) 3rem; }

/* Hero */
.hero { text-align: center; padding: 2rem 0 2rem; }
.hero h1 { font-size: clamp(2.4rem, 1.6rem + 4vw, 4.4rem); }
.lede { font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); max-width: 40rem; margin: 1rem auto 0; color: var(--ink-soft); }
.chips { list-style: none; padding: 0; margin: 1.25rem 0 0; display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.chip { padding: .35rem .9rem; border: var(--stroke) solid var(--ink); border-radius: var(--radius-pill); font-weight: 800; font-size: .92rem; background: var(--paper); }
.chip-mint { background: var(--mint); } .chip-lilac { background: var(--lilac); } .chip-lemon { background: var(--lemon); } .chip-coral { background: var(--coral); }

/* Cards */
.card { background: var(--paper); border: var(--stroke) solid var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.tool { padding: clamp(1.1rem, 3vw, 2rem); margin: 0 auto 2.5rem; max-width: 56rem; box-shadow: var(--shadow-lg); }
.card-alt { background: var(--lilac-wash); }
.tool-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tool-head h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); }
.tool-note { color: var(--ink-soft); font-size: .95rem; }
.tool-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.btn { border: var(--stroke) solid var(--ink); background: var(--paper); border-radius: var(--radius-pill); padding: .5rem 1rem; font-weight: 800; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .15s var(--ease), box-shadow .15s var(--ease); }
.btn:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translate(2px, 2px); box-shadow: none; }
.btn-ghost { background: var(--paper); }
.btn-small { padding: .3rem .8rem; font-size: .85rem; margin-top: .6rem; align-self: flex-start; background: var(--paper); }

.field-label { display: block; font-weight: 800; margin-bottom: .4rem; }
textarea, input[type="text"], input[type="number"], select {
  width: 100%; border: var(--stroke) solid var(--ink); border-radius: var(--radius-md); background: #fff; padding: .8rem 1rem; font-weight: 700; font-size: 1.1rem;
}
textarea { resize: vertical; min-height: 7.5rem; font-variant-numeric: tabular-nums; }
.help { font-size: .9rem; color: var(--ink-soft); margin-top: .45rem; }
.notice { margin-top: .5rem; padding: .5rem .9rem; border-radius: var(--radius-sm); background: var(--lemon-wash); border: 1.5px dashed var(--ink); font-size: .9rem; }
.options { display: flex; align-items: center; gap: .6rem; margin: .9rem 0 0; }
.options label { font-weight: 800; }
.options select { width: auto; padding: .35rem .7rem; font-size: 1rem; border-radius: var(--radius-pill); }

/* Results */
.results { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-top: 1.25rem; }
.results-one { grid-template-columns: 1fr; }
.tile { border: var(--stroke) solid var(--ink); border-radius: var(--radius-md); background: #fff; padding: .8rem .95rem; display: flex; flex-direction: column; gap: .15rem; box-shadow: var(--shadow-sm); min-width: 0; }
.tile-hero { grid-column: 1 / -1; padding: 1.1rem 1.3rem; box-shadow: var(--shadow-md); }
.tile-mint { background: var(--mint); } .tile-lilac { background: var(--lilac); } .tile-lemon { background: var(--lemon); } .tile-coral { background: var(--coral); }
.tile-label { font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
.tile-value { font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem); font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tile-hero .tile-value { font-size: clamp(2.2rem, 1.6rem + 3vw, 3.6rem); line-height: 1.05; }
.tile-sub { font-size: .95rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.steps { margin-top: 1rem; border: var(--stroke) solid var(--ink); border-radius: var(--radius-md); background: var(--mint-wash); padding: .6rem 1rem; }
.steps summary { cursor: pointer; font-weight: 800; }
.steps ol { margin: .5rem 0 .25rem; padding-left: 1.3rem; font-variant-numeric: tabular-nums; }
.steps li { margin: .25rem 0; overflow-wrap: anywhere; }

/* Weighted rows */
.wrows { display: grid; gap: .5rem; margin-bottom: .8rem; }
.wrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 2.6rem; gap: .5rem; align-items: center; }
.wrow input { min-width: 0; }
.wrow-head span { font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; opacity: .8; padding-left: .3rem; }
.wrow input { padding: .6rem .8rem; font-size: 1.05rem; }
.wrow .remove { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: var(--stroke) solid var(--ink); background: var(--paper); cursor: pointer; font-weight: 900; line-height: 1; box-shadow: var(--shadow-sm); }
.wrow .remove:hover { background: var(--coral); }

/* Sections */
.how, .kinds, .faq { max-width: 56rem; margin: 0 auto 2.75rem; }
.how h2, .kinds h2, .faq h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem); margin-bottom: 1rem; }
.section-lede { color: var(--ink-soft); margin-bottom: 1rem; }
.steps-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; counter-reset: step; }
.step { padding: 1.2rem; }
.step-icon { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: var(--stroke) solid var(--ink); font-weight: 900; font-size: 1.3rem; margin-bottom: .6rem; box-shadow: var(--shadow-sm); }
.icon-mint { background: var(--mint); } .icon-lemon { background: var(--lemon); } .icon-coral { background: var(--coral); }
.step h3, .kind h3 { font-size: 1.15rem; margin-bottom: .35rem; }
.step p, .kind p { font-size: .95rem; color: var(--ink-soft); }
.kinds-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.kind { padding: 1.2rem; }
.kind-mint { background: var(--mint); } .kind-lilac { background: var(--lilac); } .kind-lemon { background: var(--lemon); }
.kind p { color: var(--ink); }
.qa { padding: .8rem 1.1rem; margin-bottom: .7rem; box-shadow: var(--shadow-sm); }
.qa summary { cursor: pointer; font-weight: 800; }
.qa p { margin-top: .5rem; color: var(--ink-soft); }
.qa[open] { background: var(--mint-wash); }

/* Footer */
.site-footer { max-width: var(--max); margin: 0 auto; padding: 2rem var(--gutter) 3rem; border-top: var(--stroke) solid var(--ink); text-align: center; color: var(--ink-soft); font-size: .95rem; }
.foot-brand { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .5rem; color: var(--ink); }
.foot-links { margin-top: .5rem; }
.foot-copy { margin-top: .5rem; font-size: .85rem; }

@media (max-width: 40rem) {
  .results { grid-template-columns: repeat(2, 1fr); }
  .steps-grid, .kinds-grid { grid-template-columns: 1fr; }
  .site-header { justify-content: center; }
  .site-nav { justify-content: center; }
  .tool { box-shadow: var(--shadow-md); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn { transition: none; } }

/* ---------- Added 2026-09-03: multi-page site ---------- */
.site-nav a[aria-current="page"], .site-nav a.active { background: var(--paper); box-shadow: var(--shadow-sm); }
.site-footer { text-align: left; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr .8fr; gap: 2rem; }
.foot-col h2 { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .6rem; color: var(--ink); }
.foot-col ul { list-style: none; padding: 0; margin: 0; }
.foot-col li { margin: .3rem 0; }
.foot-col a { text-decoration: none; font-weight: 700; }
.foot-col a:hover { text-decoration: underline; }
.foot-col [aria-current="page"] { font-weight: 900; color: var(--ink); }
.foot-brandcol p { margin-top: .5rem; }
.card-inset { margin-top: 1rem; border: var(--stroke) solid var(--ink); border-radius: var(--radius-md); background: var(--lilac-wash); padding: .7rem 1rem; }
.sorted-list { margin-top: .3rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; line-height: 1.9; }
.sorted-list .mid { background: var(--lilac); border: 1.5px solid var(--ink); border-radius: var(--radius-sm); padding: 0 .35rem; font-weight: 900; }
.sorted-list .ell { opacity: .6; }
.grows { display: grid; gap: .5rem; margin-bottom: .8rem; }
.grow { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 2.6rem; gap: .5rem; align-items: center; }
.grow input { min-width: 0; padding: .6rem .8rem; font-size: 1.05rem; }
.grow-head span { font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; opacity: .8; padding-left: .3rem; }
.grow .remove { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: var(--stroke) solid var(--ink); background: var(--paper); cursor: pointer; font-weight: 900; line-height: 1; box-shadow: var(--shadow-sm); }
.grow .remove:hover { background: var(--coral); }
.final-grid, .points-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.points-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.point { border: var(--stroke) solid var(--ink); border-radius: var(--radius-md); padding: .6rem .9rem .9rem; margin: 0; background: #fff; }
.point legend { font-weight: 800; padding: 0 .3rem; }
.point label { display: block; font-weight: 800; margin-top: .5rem; }
.point input { margin-top: .25rem; }
.scale-table-wrap { overflow-x: auto; border: var(--stroke) solid var(--ink); border-radius: var(--radius-md); background: var(--paper); box-shadow: var(--shadow-sm); margin-bottom: .8rem; }
.scale-table { border-collapse: collapse; width: 100%; min-width: 40rem; font-variant-numeric: tabular-nums; }
.scale-table th, .scale-table td { padding: .55rem .6rem; text-align: center; border-bottom: 1.5px solid var(--rule); }
.scale-table th:first-child, .scale-table td:first-child { text-align: left; font-weight: 800; }
.scale-table thead th { background: var(--lemon-wash); font-weight: 900; }
.prose { max-width: 46rem; margin: 0 auto 2.5rem; padding: clamp(1.2rem, 3vw, 2.2rem); }
.prose h2 { font-size: 1.2rem; margin: 1.4rem 0 .4rem; }
.prose p { margin: .4rem 0; color: var(--ink-soft); }
.prose-meta { font-size: .9rem; opacity: .8; }
@media (max-width: 40rem) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .final-grid, .points-grid { grid-template-columns: 1fr; }
  .grow { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) 2.2rem; }
}