/* Shared styles for the Q&A and tool pages. Same identity as the finder: leaf-green page, white cards, mango accent, dark footer */
:root {
  --page: #EFF4EA;
  --card: #FFFFFF;
  --soft: #F6F9F3;
  --ink: #123D2F;
  --muted: #46604F;
  --line: #D5E0CF;
  --mango: #F2A71B;
  --on-mango: #123D2F;
  --sel: #FFF3D9;
  --ok: #1D6B35;
  --ok-bg: #DCEFD9;
  --warn: #8A5300;
  --warn-bg: #FBEBCB;
  --no: #9B2C1F;
  --no-bg: #F8DDD8;
  --foot: #123D2F;
  --foot-ink: #DCE8DE;
  --foot-muted: #B9CCBD;
  --foot-line: #2E5A49;
  --font-display: "Gabarito", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #0B2119; --card: #133429; --soft: #0F2B21; --ink: #E5EFE7; --muted: #A8C1B0; --line: #2A5243;
    --mango: #F2A71B; --on-mango: #123D2F; --sel: #3A2C0E;
    --ok: #86D9A0; --ok-bg: #1C4A31; --warn: #F2B661; --warn-bg: #4A3510; --no: #F2A093; --no-bg: #4A1F19;
    --foot: #07170F; --foot-ink: #D3E2D6; --foot-muted: #A6BCAD; --foot-line: #21402F;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --page: #0B2119; --card: #133429; --soft: #0F2B21; --ink: #E5EFE7; --muted: #A8C1B0; --line: #2A5243;
  --mango: #F2A71B; --on-mango: #123D2F; --sel: #3A2C0E;
  --ok: #86D9A0; --ok-bg: #1C4A31; --warn: #F2B661; --warn-bg: #4A3510; --no: #F2A093; --no-bg: #4A1F19;
  --foot: #07170F; --foot-ink: #D3E2D6; --foot-muted: #A6BCAD; --foot-line: #21402F;
  color-scheme: dark;
}
:root { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
img { max-width: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--mango); }
:focus-visible { outline: 3px solid var(--mango); outline-offset: 2px; border-radius: 4px; }
.gutter { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.inner { max-width: 1080px; margin: 0 auto; }
.narrow { max-width: 760px; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(32px, 5vw, 48px); font-weight: 800; letter-spacing: -0.01em; }
h2 { font-size: clamp(22px, 3vw, 28px); font-weight: 800; }
h3 { font-size: 20px; font-weight: 600; }
p { margin: 0; }
.muted { color: var(--muted); }
.eyebrow { font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* header */
.top { padding-block: 18px; }
.top .inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.logo { font-family: var(--font-display); font-weight: 800; font-size: 22px; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.logo::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--mango); }
.top nav { display: flex; gap: 18px; flex-wrap: wrap; font-size: 16px; font-weight: 600; }
.top nav a { text-decoration: none; }
.top nav a:hover, .top nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--mango); text-decoration-thickness: 3px; }

.hero { padding-block: 28px 20px; }
.hero .inner { display: grid; gap: 12px; }
.hero p.lede { font-size: 20px; color: var(--muted); max-width: 62ch; }
main { padding-block: 8px 64px; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: clamp(18px, 3vw, 28px); }
.btn { font: inherit; font-weight: 700; font-size: 16px; border: 0; border-radius: 999px; padding: 12px 20px; background: var(--mango); color: var(--on-mango); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); }
label.field { display: grid; gap: 6px; font-size: 15px; font-weight: 700; min-width: 0; }
input[type="text"], input[type="number"], select, textarea {
  font: inherit; font-size: 17px; font-weight: 400; color: var(--ink); background: var(--soft);
  border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; width: 100%;
}
textarea { min-height: 220px; resize: vertical; line-height: 1.5; }
.note { font-size: 15px; color: var(--muted); }
.pill { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.03em; padding: 3px 10px; border-radius: 999px; }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.no { background: var(--no-bg); color: var(--no); }
.num { font-variant-numeric: tabular-nums; }

/* footer */
footer { background: var(--foot); color: var(--foot-ink); padding-block: 36px 28px; }
footer .inner { display: grid; gap: 24px; }
footer .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 24px; }
footer h2 { font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--foot-muted); margin-bottom: 10px; font-family: var(--font-body); font-weight: 700; }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 16px; }
footer a { text-decoration: none; }
footer a:hover { text-decoration: underline; }
footer .legal { border-top: 1px solid var(--foot-line); padding-top: 16px; font-size: 14px; color: var(--foot-muted); }

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