/* Kupkop "shelter" look. Loaded last, so it re-points the colour tokens and restyles the shell.
   Warm paper and ink, one terracotta accent, flat surfaces, small corners, a serif for headings.
   No glass blur, no gradients, no glow, no lift-on-hover. Delete the <link> in includes/header.php to go back.
   Contrast: ink on paper 15:1, white on the accent 5.2:1, accent text on paper 4.9:1. */

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;
  --paper: #FAF6F0;
  --surface: #FFFFFF;
  --surface-2: #F3EDE4;
  --ink: #1E1A16;
  --ink-soft: #6B6258;
  --muted: #6B6258;
  --line: #E6DED3;
  --line-strong: #D2C6B7;
  --accent: #C2410C;
  --accent-dark: #9A3412;
  --accent-soft: #FCE9DA;
  --accent-ink: #9A3412;

  --field: var(--paper);
  --control: var(--line-strong);
  --brand: var(--accent);
  --brand-dark: var(--accent-dark);
  --dot: var(--accent);
  --link: var(--accent-ink);
  --wordmark: var(--ink);
  --focus: var(--accent);
  --hover-tint: var(--surface-2);
  --danger: #B42318;
  --danger-dark: #912018;
  --cat-fill: #FFFFFF;

  --glass-bg: var(--surface);
  --glass-strong: var(--surface);
  --glass-border: var(--line);
  --glass-blur: none;
  --glass-shadow: 0 1px 2px rgba(30, 26, 22, .06);
  --modal-bg: var(--surface);

  --ok-bg: #E4F1E9;   --ok-ink: #1F5A3E;
  --warn-bg: #FBF0D9; --warn-ink: #8A5300;
  --bad-bg: #FBE7E4;  --bad-ink: #B42318;
  --info-bg: var(--accent-soft); --info-ink: var(--accent-ink);

  --bg-image: none;
  --g1: var(--accent);
  --g2: var(--accent);
  --grad: linear-gradient(var(--accent), var(--accent));
  --grad-br: linear-gradient(var(--accent), var(--accent));
  --grad-diag: linear-gradient(var(--accent), var(--accent));
  --chip-bg: var(--surface-2);
  --chip-hover: #EAE1D4;
  --chip-ink: var(--ink);
  --input-bg: var(--surface);
  --bar-bg: var(--paper);
  --surface-solid: var(--surface);
  --card-shadow: 0 1px 2px rgba(30, 26, 22, .06);
  --pop-shadow: none;
  --card-border: var(--line);
  --field-border: var(--line-strong);
  --bar-line: var(--line);
  --side-line: var(--line);

  --font-body: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: "Fraunces", Georgia, "Times New Roman", serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #171411;
  --surface: #211D19;
  --surface-2: #2B2621;
  --ink: #F3EDE4;
  --ink-soft: #B5AA9C;
  --muted: #B5AA9C;
  --line: #3A332C;
  --line-strong: #4D443A;
  --accent: #C2410C;
  --accent-dark: #9A3412;
  --accent-soft: #3A2418;
  --accent-ink: #FDBA74;

  --field: var(--paper);
  --control: var(--line-strong);
  --brand: var(--accent);
  --brand-dark: var(--accent-dark);
  --dot: var(--accent);
  --link: #FDBA74;
  --wordmark: var(--ink);
  --focus: #FDBA74;
  --hover-tint: var(--surface-2);
  --danger: #F97066;
  --danger-dark: #D92D20;
  --cat-fill: #2B2621;

  --glass-bg: var(--surface);
  --glass-strong: var(--surface);
  --glass-border: var(--line);
  --glass-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  --modal-bg: var(--surface);

  --ok-bg: #16301F;   --ok-ink: #8FD3A8;
  --warn-bg: #3A2B0E; --warn-ink: #F6CE7A;
  --bad-bg: #3B1814;  --bad-ink: #FDA29B;
  --info-bg: var(--accent-soft); --info-ink: #FDBA74;

  --bg-image: none;
  --g1: var(--accent);
  --g2: var(--accent);
  --chip-bg: var(--surface-2);
  --chip-hover: #382F27;
  --chip-ink: var(--ink);
  --input-bg: var(--surface-2);
  --bar-bg: var(--paper);
  --surface-solid: var(--surface);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  --card-border: var(--line);
  --field-border: var(--line-strong);
  --bar-line: var(--line);
  --side-line: var(--line);
}

/* ---------- Base ---------- */
html, body { background: var(--paper); color: var(--ink); }
body { font-family: var(--font-body); font-size: 1rem; line-height: 1.6; }
::selection { background: var(--accent-soft); color: var(--ink); }
h1, h2, h3 { font-family: var(--font-head); font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
h1, .page-title { font-size: clamp(1.6rem, 3.2vw, 2rem); font-weight: 600; letter-spacing: -.015em; line-height: 1.15; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.0625rem; }
.page-title svg { display: none; }   /* no icon beside every page title */
.page-sub, .lede { color: var(--ink-soft); font-size: 1rem; }
.meta, .hint { color: var(--ink-soft); }
a { color: var(--link); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- Header ---------- */
.site-header { background: var(--paper); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; }
.wordmark { text-transform: none; font-family: var(--font-head); font-weight: 700; font-size: 1.4rem; letter-spacing: -.01em; color: var(--ink); }
.brand-badge { background: var(--accent); border-radius: 10px; box-shadow: none; }
.brand-badge .logo-paw { fill: #fff; }
.brand-badge .logo-heart { fill: var(--accent); }
.site-search, .site-header .site-search { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: none; }
.site-search .search-ico { stroke: var(--ink-soft); }
.site-search input[type=search]::placeholder { color: var(--ink-soft); opacity: .85; }
.icon-btn, .site-header .icon-btn { background: transparent; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); }
.icon-btn:hover { background: var(--surface-2); transform: none; }
.site-header .sidebar-btn { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.header-avatar { background: var(--ink); color: var(--paper); border-radius: 10px; box-shadow: none; }
.header-avatar:hover { filter: none; opacity: .88; }
.progress span { background: var(--accent); }

/* ---------- Sidebar ---------- */
.sidebar { background: var(--surface); border-right: 1px solid var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-theme="dark"] .sidebar { background: var(--surface); }
.sb-link { border-radius: 8px; color: var(--ink); font-weight: 500; }
.sb-link svg { color: var(--ink-soft); }
.sb-link:hover { background: var(--surface-2); }
.sb-link[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 3px 0 0 var(--accent); font-weight: 600; }
.sb-link[aria-current="page"] svg { color: var(--accent-ink); }
.sb-link .count { background: var(--accent); color: #fff; }
.sb-link[aria-current="page"] .count { background: var(--accent); color: #fff; }
.sb-group { color: var(--ink-soft); letter-spacing: .08em; }
.sb-mission, :root[data-theme="dark"] .sb-mission { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; }
.sb-mission strong svg { stroke: var(--accent); }
.sb-mission p, .sb-mission small { color: var(--ink-soft); }
.sb-bar { background: var(--line); }
.sb-bar span { background: var(--accent); }

/* Dark mode switch, in the sidebar */
.sb-theme {
  display: flex; align-items: center; gap: .7rem; width: 100%; padding: .55rem .75rem;
  border: 0; border-radius: 8px; background: transparent; color: var(--ink);
  font: 500 .875rem var(--font-body); text-align: left; cursor: pointer;
}
.sb-theme:hover { background: var(--surface-2); }
.sb-theme svg { flex: none; width: 1.125rem; height: 1.125rem; fill: none; stroke: var(--ink-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sb-theme .icon-sun, .sb-theme .lbl-light { display: none; }
:root[data-theme="dark"] .sb-theme .icon-sun { display: block; }
:root[data-theme="dark"] .sb-theme .icon-moon, :root[data-theme="dark"] .sb-theme .lbl-dark { display: none; }
:root[data-theme="dark"] .sb-theme .lbl-light { display: inline; }
.sb-switch { position: relative; margin-left: auto; flex: none; width: 2.25rem; height: 1.25rem; border-radius: 999px; background: var(--line-strong); transition: background-color .2s; }
.sb-switch::after { content: ""; position: absolute; top: .1875rem; left: .1875rem; width: .875rem; height: .875rem; border-radius: 50%; background: #fff; transition: transform .2s; }
:root[data-theme="dark"] .sb-switch { background: var(--accent); }
:root[data-theme="dark"] .sb-switch::after { transform: translateX(1rem); }

/* ---------- Surfaces ---------- */
.card, .stat, .post, .animal-card, .table-wrap, .faq-item, .result-link, .act-item, .kpi, .panel,
.total-card, .raised, .tile-label, .health-item, .nf-link, .dash-stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
:root[data-theme="dark"] .card, :root[data-theme="dark"] .stat, :root[data-theme="dark"] .post,
:root[data-theme="dark"] .animal-card, :root[data-theme="dark"] .act-item { background: var(--surface); }
.notice { border-radius: 10px; font-size: .9375rem; }
.site-footer { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.back-link { background: transparent; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); }
.back-link:hover { background: var(--surface-2); border-color: var(--line-strong); }
dialog.modal { border-radius: 14px; box-shadow: 0 12px 40px rgba(30, 26, 22, .25); }
dialog.modal::backdrop { background: rgba(30, 26, 22, .5); }
.cookie { border-radius: 12px; box-shadow: 0 4px 16px rgba(30, 26, 22, .18); background: var(--surface); }
.contact-panel { border-radius: 14px; }
.contact-icon, .fab { background: var(--accent); box-shadow: none; }
.fab { box-shadow: 0 2px 10px rgba(30, 26, 22, .25); }
.fab:hover { transform: none; background: var(--accent-dark); }
.to-top { background: var(--surface); border: 1px solid var(--line); box-shadow: none; }

/* ---------- Buttons ---------- */
.btn {
  background: var(--accent); color: #fff; border: 1px solid var(--accent); border-radius: 10px;
  box-shadow: none; font: 600 .9375rem var(--font-body); padding: .6rem 1.15rem; min-height: 2.5rem;
}
.btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); filter: none; transform: none; box-shadow: none; }
.btn:active { transform: none; }
.btn-small { padding: .35rem .85rem; font-size: .875rem; min-height: 2.125rem; }
.btn-lg { padding: .75rem 1.5rem; font-size: 1rem; }
.btn.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); box-shadow: none; --spin: var(--ink); }
.btn.btn-ghost:hover { background: var(--surface-2); filter: none; transform: none; }
.btn.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; box-shadow: none; }
.btn.btn-danger:hover { background: var(--danger-dark); border-color: var(--danger-dark); }
.review-actions .btn.btn-danger, :root[data-theme="dark"] .review-actions .btn.btn-danger { background: transparent; border: 1px solid var(--danger); color: var(--danger); }
.review-actions .btn.btn-danger:hover { background: var(--bad-bg); }
.photo-actions .btn.btn-danger { background: var(--bad-bg); color: var(--bad-ink); border-color: transparent; }
.post-foot .btn.btn-ghost, :root[data-theme="dark"] .post-foot .btn.btn-ghost { background: transparent; }
.btn-block { margin-top: .5rem; }
.pw-toggle { color: var(--ink-soft); border-radius: 8px; }
.pw-toggle:hover { background: var(--surface-2); color: var(--ink); }

/* ---------- Filter chips and tabs ---------- */
.chips a, .admin-tabs a, .filter-tabs a, .chip-link {
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; font-weight: 500; box-shadow: none;
}
.chips a:hover, .admin-tabs a:hover, .filter-tabs a:hover { background: var(--surface-2); }
.chips a[aria-current="page"], .admin-tabs a[aria-current="page"], .filter-tabs a[aria-current="page"],
button.chip-link[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: none; }
.badge, .chip { border-radius: 6px; font-weight: 600; }
.chip { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); }
.count { background: var(--accent); }

/* ---------- Forms ---------- */
.field label, .field legend { color: var(--ink); font-size: .875rem; font-weight: 600; }
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number],
input[type=search], input[type=date], select, textarea {
  background: var(--input-bg); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 10px; font-size: 1rem;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
input[aria-invalid=true], select[aria-invalid=true], textarea[aria-invalid=true] { border-color: var(--danger); }
input::placeholder, textarea::placeholder,
:root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder { color: var(--ink-soft); opacity: .8; }
select:required:invalid { color: var(--ink-soft); }
select option { background: var(--surface); color: var(--ink); }
.check input, .check input:focus { accent-color: var(--accent); }
.field-error { color: var(--bad-ink); }
input[type=file] { padding: .5rem; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--input-bg); color: var(--ink-soft); text-align: left; font-weight: 400; }
input[type=file]::file-selector-button { border-radius: 8px; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line-strong); }
.page-search input, .filter-form input[type=search] { border-radius: 10px; }
.dropzone, :root[data-theme="dark"] .dropzone { background: var(--surface-2); border: 2px dashed var(--line-strong); border-radius: 12px; color: var(--ink-soft); }
.dropzone:hover, .dropzone.is-drag { background: var(--chip-hover); border-color: var(--accent); }
.field-photo.has-file .dropzone { border-style: solid; border-color: var(--accent); color: var(--ink); }
.field-photo.has-file .dz-title { color: var(--ink); }
.chip-label, :root[data-theme="dark"] .chip-label { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; color: var(--ink); }
.chip-input:checked + .chip-label { background: var(--ink); border-color: var(--ink); color: var(--paper); box-shadow: none; }
.chip-input:checked + .chip-label.tone-urgent { background: var(--danger); border-color: var(--danger); color: #fff; }
.chip-input:checked + .chip-label.tone-medium { background: #8A5300; border-color: #8A5300; color: #fff; }
.chip-btn { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; color: var(--ink); }
.chip-btn.is-active, :root[data-theme="dark"] .chip-btn.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.tile-label { border-radius: 12px; }
.chip-input:checked + .tile-label { background: var(--accent-soft); border-color: var(--accent); box-shadow: none; color: var(--ink); }
.chip-input:checked + .tile-label .tile-sub { color: var(--ink-soft); }
.tile-icon { background: var(--surface-2); color: var(--ink); border-radius: 10px; }
.chip-input:checked + .tile-label .tile-icon { background: var(--accent); color: #fff; }

/* Password checklist: two plain lines */
.pw-rules { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; margin-top: .5rem; }
.pw-rules li { font-size: .875rem; color: var(--ink-soft); }
.pw-rules li.is-met { color: var(--ink); }
.pw-rules li.is-met .pw-check { color: var(--ok-ink); }

/* ---------- Tables ---------- */
.table-wrap { box-shadow: none; }
.data th { background: var(--surface-2); color: var(--ink-soft); font-size: .75rem; letter-spacing: .06em; }
:root[data-theme="dark"] .data th { background: var(--surface-2); color: var(--ink-soft); }
.data td { border-top: 1px solid var(--line); }
.data tbody tr:hover, :root[data-theme="dark"] .data tbody tr:hover { background: var(--surface-2); }
.row-btn.view, :root[data-theme="dark"] .row-btn.view { background: var(--surface-2); color: var(--ink); }
.row-btn.view:hover { background: var(--chip-hover); }

/* ---------- Home feed ---------- */
.composer-actions .composer-btn, .composer-btn { background: var(--surface-2); color: var(--ink); border-radius: 10px; font-weight: 600; }
.composer-btn:hover { background: var(--chip-hover); }
.composer-btn.is-primary { background: var(--accent); color: #fff; box-shadow: none; }
.composer-btn.is-primary:hover { background: var(--accent-dark); filter: none; }
.post-avatar { background: var(--accent); border-radius: 10px; }
.post-photo, .post-photo-empty { background: var(--surface-2); }
.post-photo-empty .logo-paw { fill: var(--line-strong); }
.post-pill { border-radius: 8px; background: rgba(255, 255, 255, .96); color: var(--ink); backdrop-filter: none; }
.post-urgent { border-radius: 6px; background: #B42318; animation: none; }
.post-story, :root[data-theme="dark"] .post-story { color: var(--ink); }
.like-btn, :root[data-theme="dark"] .like-btn { background: var(--surface-2); color: var(--ink); border-radius: 8px; }
.like-btn:hover { background: var(--chip-hover); }
.like-btn.is-liked, :root[data-theme="dark"] .like-btn.is-liked { background: var(--accent); color: #fff; }
.post-foot, :root[data-theme="dark"] .post-foot { border-top: 1px solid var(--line); }
.chip-ok, :root[data-theme="dark"] .chip-ok { background: var(--ok-bg); color: var(--ok-ink); border-color: transparent; }

.collage-tile { border-radius: 10px; box-shadow: none; background: var(--surface-2); }
.collage-tag { border-radius: 6px; background: rgba(255, 255, 255, .96); color: var(--ink); }
.collage-empty .logo-paw { fill: var(--line-strong); }

/* ---------- Animals ---------- */
.animal-card:hover { transform: none; box-shadow: 0 2px 10px rgba(30, 26, 22, .12); }
a.animal-photo, .animal-photo { background: var(--surface-2); }
.animal-photo-empty .logo-paw, .gallery-empty .logo-paw { fill: var(--line-strong); }
.animal-kind { border-radius: 6px; background: rgba(255, 255, 255, .96); color: var(--ink); }
.animal-urgent { border-radius: 6px; background: #B42318; }
.animal-name { font-family: var(--font-head); font-weight: 600; font-size: 1.125rem; }
.animal-actions .act-main-btn { background: var(--accent); border-radius: 8px; }
.animal-actions .act-main-btn:hover { background: var(--accent-dark); }
.animal-actions .act-main-btn.is-state, .animal-actions .act-side-btn, :root[data-theme="dark"] .animal-actions .act-main-btn.is-state { background: var(--surface-2); color: var(--ink); border-radius: 8px; }
.animal-actions .act-side-btn:hover { background: var(--chip-hover); }
.animal-status.badge { border-radius: 6px; }
.gallery-main { border-radius: 12px; background: var(--surface-2); box-shadow: none; border-color: var(--line); }
.gallery-thumbs a { border-radius: 10px; }
.gallery-thumbs a[aria-current="true"] { border-color: var(--accent); box-shadow: none; }
.facts dt, .facts dd, :root[data-theme="dark"] .facts dt, :root[data-theme="dark"] .facts dd { background: var(--surface-2); }
.facts dt { color: var(--ink-soft); }
.prose p, :root[data-theme="dark"] .prose p { color: var(--ink); }
.profile-info h1 { font-weight: 600; }

/* ---------- Auth, profile, dashboard ---------- */
.auth-card { border-radius: 16px; background: var(--surface); box-shadow: none; }
:root[data-theme="dark"] .auth-card { background: var(--surface); }
.auth-icon { background: var(--accent); border-radius: 12px; box-shadow: none; }
.auth-icon-ok { background: var(--ok-bg); }
.auth-icon-warn { background: var(--warn-bg); }
.auth-alt, :root[data-theme="dark"] .auth-alt { border-top: 1px solid var(--line); color: var(--ink-soft); }
.profile-avatar { background: var(--accent); box-shadow: none; }
.pstat, :root[data-theme="dark"] .pstat { background: var(--surface-2); border-radius: 10px; }
.dash-icon, .dash-icon.g1, .dash-icon.g2, .dash-icon.g3, .dash-icon.g4 { background: var(--accent-soft); color: var(--accent-ink); border-radius: 10px; }
.bar-col .bar { background: var(--accent); }
.stat-num { font-family: var(--font-head); font-weight: 600; }
a.stat:hover { transform: none; box-shadow: none; border-color: var(--line-strong); }
.stat-go { stroke: var(--ink-soft); }
.urgent-item { border-radius: 10px; }
.recent-ico { background: var(--surface-2); color: var(--ink); }
.review-form, :root[data-theme="dark"] .review-form { background: var(--surface-2) !important; border-color: var(--line) !important; }
.danger-zone { border-color: var(--danger) !important; }
.danger-zone h2 { color: var(--danger); }
.id-shot img, .photo-card img { border-radius: 10px; border-color: var(--line); }
.faq-item[open] { border-color: var(--line-strong); }
.faq-item[open] summary { color: var(--accent-ink); }
.faq-item summary:hover, .result-link:hover { background: var(--surface-2); }
.result-link:hover { border-color: var(--line-strong); }
.result-type { background: var(--surface-2); color: var(--ink); border-radius: 6px; }
.empty-cute, .empty-state, .nf-card { border-radius: 12px; }

/* 404 page */
.nf-card::before { display: none; }
.nf-digit { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--accent); }
.nf-link:hover { transform: none; border-color: var(--line-strong); }
.nf-link-icon { background: var(--surface-2); color: var(--ink); border-radius: 10px; }

/* Newsletter preview: an email is always light */
.nl-mail { background: #F3EDE4; border-color: #D2C6B7; }
.nl-mail-brand { color: #1E1A16; }
.nl-mail-card { border-color: #E6DED3; }
.nl-mail-card h3 { color: #1E1A16; }
.nl-mail-card p { color: #3A342D; }

/* ---------- Loading states ---------- */
.skeleton, img.img-loading, .page-skeleton .skeleton,
:root[data-theme="dark"] .page-skeleton .skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 50%, var(--surface-2) 75%); background-size: 200% 100%;
}
.sk2-box, :root[data-theme="dark"] .sk2-box { background: var(--surface); border-color: var(--line); border-radius: 12px; box-shadow: none; }
.sk2-thead, :root[data-theme="dark"] .sk2-thead { background: var(--surface-2); }
.img-missing { background: var(--surface-2); }
.img-missing .logo-paw { fill: var(--line-strong); }

/* ---------- Terms pop-up on the sign-up page ---------- */
.terms-steps { display: grid; gap: .6rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.terms-doc {
  display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem; color: var(--ink); text-decoration: none; font-weight: 600;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px;
}
.terms-doc:hover { background: var(--surface-2); }
.terms-doc small { margin-left: auto; color: var(--accent-ink); font-size: .8125rem; font-weight: 600; }
.terms-tick { position: relative; flex: none; width: 1.25rem; height: 1.25rem; border: 2px solid var(--line-strong); border-radius: 50%; }
.terms-doc.is-done .terms-tick { background: var(--ok-ink); border-color: var(--ok-ink); }
.terms-doc.is-done .terms-tick::after {
  content: ""; position: absolute; left: .3rem; top: .08rem; width: .3rem; height: .55rem;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.terms-doc.is-done small { color: var(--ok-ink); }
.terms-lead { margin-bottom: 1rem; color: var(--ink-soft); }

/* ---------- Touch targets and motion ---------- */
@media (pointer: coarse) {
  .icon-btn, .site-header .icon-btn, .header-avatar { width: 2.75rem; height: 2.75rem; }
  .btn { min-height: 2.75rem; }
  .chips a, .admin-tabs a, .filter-tabs a { min-height: 2.5rem; display: inline-flex; align-items: center; }
  .sb-link, .sb-theme { min-height: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sb-switch, .sb-switch::after { transition: none; }
}

/* ---------- Landing page (landing.php) ---------- */
.lp { display: flex; flex-direction: column; gap: clamp(3rem, 7vw, 5rem); max-width: 68rem; margin: 0 auto; padding-bottom: 2rem; }
.lp h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 .5rem; }
.lp-section-head { max-width: 40rem; margin-bottom: 1.5rem; }
.lp-section-head p { margin: 0; color: var(--ink-soft); }
.lp .section-head { margin-bottom: 1.25rem; }
.lp .section-head h2 { margin: 0; }

.lp-hero { display: grid; gap: 2rem; align-items: center; padding-top: .5rem; }
@media (min-width: 56rem) { .lp-hero { grid-template-columns: 1.1fr .9fr; gap: 3rem; } }
.lp-kicker { margin: 0 0 .75rem; color: var(--accent-ink); font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.lp-hero h1 { margin: 0 0 1rem; font-size: clamp(2.25rem, 5.4vw, 3.6rem); line-height: 1.05; letter-spacing: -.025em; text-wrap: balance; }
.lp-lede { max-width: 34rem; margin: 0; color: var(--ink-soft); font-size: 1.125rem; }
.lp-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.lp-actions-center { justify-content: center; }

.lp-mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 10rem 10rem; gap: .5rem; }
@media (min-width: 40rem) { .lp-mosaic { grid-template-rows: 12rem 12rem; } }
.lp-tile { overflow: hidden; border-radius: 12px; background: var(--surface-2); }
.lp-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-tile:first-child { grid-row: span 2; }
.lp-mosaic-1 { grid-template-columns: 1fr; }
.lp-mosaic-2 .lp-tile:nth-child(2) { grid-row: span 2; }
.lp-mosaic-empty { display: grid; place-items: center; min-height: 20rem; padding: 1.5rem; text-align: center; color: var(--ink-soft); background: var(--surface-2); border: 1px dashed var(--line-strong); border-radius: 12px; }
.lp-mosaic-empty .animal-empty-glyph { margin: 0 auto .5rem; }

.lp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem 2rem; margin: 0; padding: 1.25rem 0; list-style: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lp-stat-num { display: block; font: 600 2.25rem/1.1 var(--font-head); }
.lp-stat-label { display: block; color: var(--ink-soft); font-size: .9375rem; }

.lp-steps { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.lp-step { padding-top: 1rem; border-top: 2px solid var(--ink); }
.lp-step::before { counter-increment: step; content: counter(step, decimal-leading-zero); display: block; margin-bottom: .5rem; color: var(--accent-ink); font: 600 1.5rem/1 var(--font-head); }
.lp-step h3 { margin: 0 0 .35rem; }
.lp-step p { margin: 0; color: var(--ink-soft); font-size: .9375rem; }

.lp-quiet { padding: 1.5rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; }
.lp-quiet p { margin: 0 0 1rem; max-width: 38rem; }

.lp-help { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: 0; padding: 0; list-style: none; }
.lp-help li { display: flex; }
.lp-help-card { display: flex; flex-direction: column; width: 100%; padding: 1.25rem; color: var(--ink); text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; transition: border-color .15s; }
.lp-help-card:hover { border-color: var(--ink); }
.lp-help-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.lp-help-card h3 { margin: 0 0 .35rem; }
.lp-help-card p { margin: 0 0 1rem; color: var(--ink-soft); font-size: .9375rem; }
.lp-link { display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; color: var(--accent-ink); font-size: .9375rem; font-weight: 600; }
.lp-link svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.lp-help-card:hover .lp-link svg { transform: translateX(3px); }

.lp-trust { display: grid; gap: 2rem; align-items: center; padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; }
@media (min-width: 52rem) { .lp-trust { grid-template-columns: 1.3fr 1fr; } }
.lp-checks { display: grid; gap: .75rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.lp-checks li { position: relative; padding-left: 1.75rem; }
.lp-checks li::before { content: ""; position: absolute; left: .25rem; top: .4rem; width: .35rem; height: .65rem; border: solid var(--ok-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.lp-trust-side { display: grid; gap: 1rem; justify-items: start; }
.lp-money { display: grid; gap: 1rem; margin: 0; }
.lp-money div { padding-left: 1rem; border-left: 3px solid var(--accent); }
.lp-money dt { color: var(--ink-soft); font-size: .875rem; }
.lp-money dd { margin: 0; font: 600 1.75rem/1.2 var(--font-head); }

.lp-faq { margin: 0; max-width: 48rem; }

.lp-cta { padding: clamp(2rem, 6vw, 3.5rem) 1.5rem; text-align: center; color: var(--paper); background: var(--ink); border-radius: 12px; }
.lp-cta h2 { color: var(--paper); margin-bottom: .5rem; }
.lp-cta p { max-width: 34rem; margin: 0 auto; }
.lp-cta .btn.btn-ghost { color: var(--paper); border-color: var(--paper); }
.lp-cta .btn.btn-ghost:hover { background: rgba(255, 255, 255, .12); }
.lp-cta-note { margin-top: 1.25rem !important; font-size: .9375rem; }
.lp-cta-note a { color: var(--paper); }
@media (prefers-reduced-motion: reduce) { .lp-link svg, .lp-help-card { transition: none; } }

/* ---------- Feed photos: show most of the picture, not a thin slice ----------
   The post photo was a fixed 320px tall across the full width (about 2.5 to 1), so a normal 4:3 photo lost a third of
   itself and was blown up to fill the strip. It now keeps a 4:3 frame, and the crop favours the upper part of the picture,
   where faces usually are. */
.post-photo { height: auto; aspect-ratio: 4 / 3; max-height: 32rem; }
.post-photo img { object-position: 50% 35%; }