/* Shared styles for the guide, About and Privacy pages, matching the converter.
   Sections sit flat on the page, divided by rules; only the quick-answer ticket is raised. */
:root{
  --bg:#fbf4ea; --surface:#ffffff; --ink:#33263d; --muted:#7c6d86; --line:#eadbc9;
  --accent:#d65a14; --accent-soft:#fde3cf; --on-accent:#ffffff;
  --lift:0 1px 0 #eadbc9, 0 16px 34px rgb(120 70 30 / .11);
  --radius:12px;
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#1c1722; --surface:#29212f; --ink:#f4edf7; --muted:#b8a9c3; --line:#3c3246;
  --accent:#ff9d5c; --accent-soft:#41291c; --on-accent:#22161f; --lift:0 16px 34px rgb(0 0 0 / .35); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#1c1722; --surface:#29212f; --ink:#f4edf7; --muted:#b8a9c3; --line:#3c3246;
  --accent:#ff9d5c; --accent-soft:#41291c; --on-accent:#22161f; --lift:0 16px 34px rgb(0 0 0 / .35); color-scheme:dark}
*{box-sizing:border-box}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.65;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:24px 56px}
.wrap{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:30px}
nav{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline;font-weight:800;padding-bottom:14px;border-bottom:1.5px solid var(--line)}
nav .home{font-family:var(--display);font-size:1.35rem;color:var(--ink);text-decoration:none;margin-right:auto}
nav a{color:var(--muted)}
nav a[aria-current="page"]{color:var(--ink);text-decoration:none}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.1;text-wrap:balance;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(2rem,5vw,2.8rem);font-weight:800}
h2{font-size:1.5rem}
p,ul{margin:0}
ul{padding-left:1.2em;display:flex;flex-direction:column;gap:6px}
a{color:var(--accent);text-underline-offset:3px}
a:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
.card{display:flex;flex-direction:column;gap:14px;border-top:2px solid var(--ink);padding-top:16px}
.lede{color:var(--muted);font-size:1.1rem;margin-top:10px}
.updated{color:var(--muted);font-size:.9rem}
.cta{align-self:flex-start;background:var(--accent);color:var(--on-accent);text-decoration:none;font-weight:800;border-radius:10px;padding:10px 18px}
.cta:hover{filter:brightness(1.06)}
/* Placeholders to replace before launch */
.todo{background:#fff1a8;color:#33263d;border-radius:4px;padding:0 4px}
footer{font-size:.85rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 18px;border-top:1.5px solid var(--line);padding-top:16px}
footer a{color:var(--muted)}

/* Search landing pages */
body.cat{--accent:#7650c4;--accent-soft:#ece3fd}
body.horse{--accent:#1f7d58;--accent-soft:#d9f0e3}
body.rabbit{--accent:#b8335f;--accent-soft:#fbdfe8}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body.cat{--accent:#bca4ff;--accent-soft:#30264a}:root:not([data-theme="light"]) body.horse{--accent:#6fd3a5;--accent-soft:#1d3a2e}:root:not([data-theme="light"]) body.rabbit{--accent:#ff8fb3;--accent-soft:#3f2232}}
:root[data-theme="dark"] body.cat{--accent:#bca4ff;--accent-soft:#30264a}
:root[data-theme="dark"] body.horse{--accent:#6fd3a5;--accent-soft:#1d3a2e}
:root[data-theme="dark"] body.rabbit{--accent:#ff8fb3;--accent-soft:#3f2232}
.card.answer{border-top:0;padding:22px 24px;background:var(--surface);border-radius:16px;box-shadow:var(--lift)}
.label{font-size:.95rem;font-weight:800;color:var(--muted)}
.big-answer{font-family:var(--display);font-weight:600;font-size:1.55rem;line-height:1.3}
.big-answer strong{color:var(--accent);font-weight:800;font-size:1.2em}
.stage{display:inline-block;transform:rotate(-6deg);border:2px solid var(--accent);outline:1.5px solid var(--accent);outline-offset:2px;color:var(--accent);border-radius:6px;padding:1px 10px;font-family:var(--display);font-weight:700}
.muted{color:var(--muted);font-weight:400}
.tbl{overflow-x:auto;border:1.5px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.tbl table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
.tbl th,.tbl td{padding:8px 14px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl th:first-child,.tbl td:first-child{text-align:left}
.tbl thead th{font-size:.85rem;font-weight:800;color:var(--muted)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tr.hit td{background:var(--accent-soft);font-weight:800}
.mini{display:flex;flex-direction:column;gap:6px}
.mini label{font-weight:700}
.mini-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.mini input{width:6.5rem;font:700 1.5rem var(--display);padding:6px 12px;border:2px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink)}
.mini input:focus{border-color:var(--accent);outline:none}
.mini output{font-weight:700;font-size:1.1rem}
.links{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:2px 24px}
.links a{display:block;padding:7px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);font-weight:800}
.links a::after{content:" \2192";color:var(--accent)}
.links a:hover{color:var(--accent)}
.ad{border:1.5px dashed var(--line);border-radius:10px;min-height:90px;display:grid;place-items:center;color:var(--muted);font-size:.8rem}

/* Guide pages: additions */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:520px){.facts>div{padding:10px 12px}.fact{font-size:1.25rem!important}.facts .label{font-size:.8rem}}
.facts>div{background:var(--accent-soft);border-radius:var(--radius);padding:12px 16px;display:flex;flex-direction:column;gap:2px}
.fact{font-family:var(--display);font-weight:800;font-size:1.6rem;color:var(--accent)}
.small{font-size:.88rem;color:var(--muted)}
.tbl.scroll{max-height:380px;overflow:auto;overscroll-behavior:contain}
.tbl.scroll thead th{position:sticky;top:0;background:var(--surface);box-shadow:inset 0 -1px 0 var(--line)}
.qa{display:flex;flex-direction:column;gap:4px;padding-top:8px;border-top:1px solid var(--line);scroll-margin-top:16px}
.qa:first-of-type{border-top:0;padding-top:0}
.qa h3{font-family:var(--display);font-weight:700;font-size:1.15rem;margin:0}
h3{margin:0}

@media (max-width:520px){.card.answer{padding:20px 18px}}