/* Shared look for the phase 4 family pages (downloads, coloring, tracker) and the Santa photos page. A Santa's theme
   (santa-theme.js, ?s=<slug>) overrides the --santa-* vars; without one the defaults below apply. */
:root {
  --red: var(--santa-primary, #C8102E); --green: var(--santa-accent, #1E6B3A); --cream: var(--santa-bg, #FFF8EC);
  --red-t: var(--santa-primary-text, var(--red)); --green-t: var(--santa-accent-text, var(--green));
  --on-red: var(--santa-on-primary, #fff); --on-green: var(--santa-on-accent, #fff);
  --head: var(--santa-heading-font, "Mountains of Christmas", Georgia, serif); --body: var(--santa-body-font, Nunito, system-ui, sans-serif);
  --ink: #2a1d14; --muted: #6b5a4c; --line: #ead9bf; --card: #fff;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 17px/1.5 var(--body); }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 16px; }
header.top { background: var(--red); color: var(--on-red); text-align: center; padding: 22px 16px 18px; }
header.top h1 { font: 700 42px/1.1 var(--head); margin: 0; }
header.top p { margin: 6px 0 0; }
#santaHeader { font: 700 18px/1.2 var(--head); opacity: .95; margin: 0 0 4px; min-height: 0; }
#santaHeader:empty { display: none; }
nav.tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 12px 16px 0; }
nav.tabs a { color: var(--green-t); font-weight: 800; text-decoration: none; padding: 6px 12px; border: 2px solid var(--line); border-radius: 999px; background: #fff; font-size: 15px; }
nav.tabs a[aria-current] { border-color: var(--green); }
h2 { font: 700 30px/1.15 var(--head); color: var(--green-t); margin: 28px 0 6px; }
.hint { color: var(--muted); font-size: 15px; margin: 0 0 12px; }
.card { background: var(--card); border: 2px solid var(--line); border-radius: 16px; padding: 16px; margin: 12px 0; }
label.f { display: block; font-weight: 800; margin: 12px 0 4px; }
input.t, select.t { width: 100%; min-height: 48px; font: inherit; padding: 10px 12px; border: 2px solid var(--line); border-radius: 12px; background: #fff; }
input.code { text-transform: uppercase; letter-spacing: 3px; font-weight: 800; font-size: 22px; text-align: center; }
button, a.btn { display: inline-flex; align-items: center; justify-content: center; font: inherit; font-weight: 800; min-height: 48px; padding: 10px 18px;
  border-radius: 12px; border: 2px solid var(--green); background: #fff; color: var(--green-t); cursor: pointer; text-decoration: none; }
button.go, a.go { background: var(--red); border-color: var(--red); color: var(--on-red); }
button.go2, a.go2 { background: var(--green); color: var(--on-green); }
button.wide, a.wide { width: 100%; font-size: 18px; margin-top: 12px; }
button:disabled { opacity: .55; cursor: wait; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row > * { flex: 1 1 160px; }
.msg { border-radius: 12px; padding: 12px 14px; margin: 12px 0 0; font-weight: 700; }
.msg.err { background: #fde8eb; color: #8a0c20; }
.msg.ok { background: #e6f3ea; color: #14502b; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.tile { background: #fff; border: 2px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.tile img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: #f4ece0; }
.tile .b { padding: 10px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.tile .b strong { line-height: 1.25; }
.tile .b small { color: var(--muted); }
.tile .b .btn { min-height: 40px; padding: 6px 10px; margin-top: auto; }
.links { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.links a { display: block; background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: 14px; color: var(--ink); text-decoration: none; }
.links a b { display: block; color: var(--red-t); font: 700 22px/1.2 var(--head); }
.links a span { color: var(--muted); font-size: 15px; }
footer { text-align: center; color: var(--muted); font-size: 14px; padding: 24px 16px 36px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }