/* Kupkop refinement layer. Loads LAST (after password-ui.css), so it only overrides.
   Delete the <link> in includes/header.php to go back to the previous look.

   Design decisions
   - One accent: a deep, slightly dusty violet. Lavender is used for surfaces, never for glow.
   - No gradients, no blur, no coloured shadows, no pulsing. Hierarchy comes from tone, border and type.
   - Smaller radii (buttons 10px, cards 14px) so nothing reads as a bubble.
   - Headings in a serif (Fraunces), body in Inter. The serif is what makes it feel like a shelter, not a template.
   - Phones: 44px touch targets, centered labels, stacked full-width primary actions, 16px inputs (no iOS zoom). */

/* ---------- Tokens ---------- */
:root {
  --bg: #F7F4FB;
  --surface: #FFFFFF;
  --tint: #F1ECF9;        /* quiet lavender fill */
  --tint-2: #E6DDF4;      /* hover / pressed fill */
  --edge: #E3DBF0;
  --edge-strong: #CFC3E6;

  --violet: #5B3C9E;
  --violet-dark: #46307D;

  --ink: #241B35;
  --ink-soft: #5D5174;
  --muted: #5D5174;

  --field: var(--bg);
  --control: var(--edge-strong);
  --brand: var(--violet);
  --brand-dark: var(--violet-dark);
  --link: var(--violet);
  --wordmark: #3A2766;
  --focus: var(--violet);
  --hover-tint: var(--tint);
  --danger: #A32620;
  --danger-dark: #861D18;

  --g1: var(--violet);
  --g2: var(--violet);
  --grad: var(--violet);
  --grad-br: var(--violet);
  --dot: #8F78C4;

  --glass-bg: var(--surface);
  --glass-strong: var(--surface);
  --glass-border: var(--edge);
  --glass-blur: none;
  --glass-shadow: 0 1px 2px rgba(36, 27, 53, .06), 0 4px 14px rgba(36, 27, 53, .04);
  --card-shadow: var(--glass-shadow);
  --pop-shadow: none;
  --modal-bg: var(--surface);

  --line: var(--edge);
  --line-strong: var(--edge-strong);
  --chip-bg: var(--tint);
  --chip-hover: var(--tint-2);
  --chip-ink: var(--violet);
  --input-bg: var(--surface);
  --bar-bg: var(--surface);
  --surface-solid: var(--surface);
  --card-border: var(--edge);
  --field-border: var(--edge-strong);
  --bar-line: var(--edge);
  --side-line: var(--edge);

  --ok-bg: #E6F1EA;   --ok-ink: #25603F;
  --warn-bg: #F7EEDB; --warn-ink: #7A4F00;
  --bad-bg: #F8E4E2;  --bad-ink: #A32620;
  --info-bg: var(--tint); --info-ink: var(--violet);

  --bg-image: linear-gradient(var(--bg), var(--bg));
  /* aliases for the revamp.css token names, so its rules pick up violet */
  --paper: var(--bg);
  --surface-2: var(--tint);
  --accent: var(--violet);
  --accent-dark: var(--violet-dark);
  --accent-soft: var(--tint);
  --accent-ink: var(--violet);

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

  --r-btn: 10px;
  --r-card: 14px;
  --touch: 2.75rem;       /* 44px */
}

:root[data-theme="dark"] {
  --bg: #17121F;
  --surface: #211A2E;
  --tint: #2A2139;
  --tint-2: #342A47;
  --edge: #3A2F4F;
  --edge-strong: #4C3F66;

  --violet: #7656C2;
  --violet-dark: #6445AE;

  --ink: #EEE8F8;
  --ink-soft: #B9AED0;
  --muted: #B9AED0;
  --wordmark: #E4DAF7;
  --link: #BDA9EE;
  --focus: #BDA9EE;
  --chip-ink: #CDBDF2;
  --dot: #A58BE0;
  --danger: #E0645C;
  --danger-dark: #C8524A;

  --glass-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  --ok-bg: rgba(80, 170, 120, .18);  --ok-ink: #A9DDBF;
  --warn-bg: rgba(220, 170, 70, .18); --warn-ink: #EBCB8B;
  --bad-bg: rgba(224, 100, 92, .18);  --bad-ink: #F2B3AE;
  --info-bg: var(--tint); --info-ink: #CDBDF2;
  --paper: var(--bg);
  --surface-2: var(--tint);
  --accent: var(--violet);
  --accent-dark: var(--violet-dark);
  --accent-soft: var(--tint);
  --accent-ink: #B9A4F0;
}

/* ---------- Page and type ---------- */
html, body { background: var(--bg); color: var(--ink); }
body::before { display: none; }
body { font-family: var(--font-body); font-size: 1rem; line-height: 1.6; }

h1, h2, .page-title, .auth-head h1, .profile-info h1, .nf h1 {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: -.005em;
  text-transform: none;
}
h3, .mini-title { font-family: var(--font-body); }
h1, .page-title { font-size: clamp(1.5rem, 4.5vw, 1.875rem); line-height: 1.2; }
h2 { font-size: 1.25rem; }
.page-title svg { stroke: var(--violet); }
.page-sub, .lede { color: var(--ink-soft); font-size: .9375rem; }
.hint, .meta { color: var(--ink-soft); font-size: .8125rem; }
::selection { background: var(--tint-2); color: var(--ink); }

/* ---------- Header ---------- */
.site-header { background: var(--surface); border-bottom: 1px solid var(--edge); box-shadow: none; }
.wordmark { font: 700 1.375rem/1 var(--font-head); text-transform: none; letter-spacing: 0; color: var(--wordmark); }
.brand-badge { width: 2.25rem; height: 2.25rem; border-radius: 10px; background: var(--violet); box-shadow: none; }
.brand-badge .logo-heart { fill: var(--violet); }
.site-search, .site-header .site-search { background: var(--bg); border: 1px solid var(--edge); border-radius: var(--r-btn); box-shadow: none; }
.site-search .search-ico { stroke: var(--ink-soft); }
.site-search input[type=search]::placeholder { color: var(--ink-soft); opacity: .8; }
.icon-btn, .site-header .icon-btn { background: var(--surface); border: 1px solid var(--edge); color: var(--violet); border-radius: var(--r-btn); }
.icon-btn:hover { background: var(--tint); }
.site-header .sidebar-btn { background: var(--tint); border-color: transparent; color: var(--violet); }
.header-avatar, .avatar, .post-avatar, .comment-avatar, .profile-avatar, .composer-avatar { background: var(--violet); color: #fff; box-shadow: none; }
.composer-avatar { background: var(--tint); color: var(--violet); }

/* ---------- Sidebar ---------- */
.sidebar { background: var(--surface); border-right: 1px solid var(--edge); box-shadow: none; scrollbar-width: thin; scrollbar-color: var(--edge-strong) transparent; }
.sb-link { border-radius: var(--r-btn); color: var(--ink); font-weight: 500; }
.sb-link svg { color: var(--ink-soft); }
.sb-link:hover { background: var(--tint); }
.sb-link[aria-current="page"] { background: var(--tint-2); color: var(--violet-dark); box-shadow: none; font-weight: 600; }
.sb-link[aria-current="page"] svg { color: var(--violet); }
:root[data-theme="dark"] .sb-link[aria-current="page"] { color: #fff; }
.sb-group { color: var(--ink-soft); letter-spacing: .06em; }
.count { background: var(--violet); color: #fff; }
.sb-mission { background: var(--tint); border: 1px solid var(--edge); border-radius: var(--r-card); }
.sb-mission strong svg { stroke: var(--violet); }
.sb-mission p, .sb-mission small { color: var(--ink-soft); }
.sb-bar { background: var(--surface); border: 1px solid var(--edge); }
.sb-bar span { background: var(--violet); }
html.sb-open .sidebar-backdrop { background: rgba(36, 27, 53, .45); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- Surfaces ---------- */
.card, .stat, .post, .animal-card, .table-wrap, .faq-item, .result-link, .act-item, .auth-card,
.nf-link, .health-item, .total-card, .raised, .tile-label, .manage > .card, main.wrap > .card {
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--r-card);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.auth-card { border-radius: 16px; }
.animal-card:hover, a.stat:hover, .nf-link:hover { transform: none; box-shadow: 0 2px 10px rgba(36, 27, 53, .09); border-color: var(--edge-strong); }
.result-link:hover { background: var(--tint); border-color: var(--edge-strong); }
.review-form { background: var(--tint) !important; border-color: var(--edge) !important; }
.danger-zone { border-color: #E2B9B5 !important; }
.notice { border-radius: var(--r-btn); border: 1px solid var(--edge); }

/* ---------- Buttons ---------- */
.btn {
  background: var(--violet); color: #fff; border: 1px solid var(--violet);
  border-radius: var(--r-btn); box-shadow: none; filter: none;
  font-weight: 600; letter-spacing: 0; text-align: center; line-height: 1.2;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
}
.btn:hover { background: var(--violet-dark); border-color: var(--violet-dark); box-shadow: none; filter: none; transform: none; }
.btn:active { transform: translateY(1px); }
.btn.btn-ghost { background: var(--tint); color: var(--violet); border: 1px solid transparent; box-shadow: none; }
.btn.btn-ghost:hover { background: var(--tint-2); filter: none; transform: none; }
:root[data-theme="dark"] .btn.btn-ghost { color: var(--chip-ink); }
.btn.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.btn-danger:hover { background: var(--danger-dark); border-color: var(--danger-dark); }
.review-actions .btn.btn-danger { background: var(--surface); border: 1px solid #E2B9B5; color: var(--danger); }
.review-actions .btn.btn-danger:hover { background: var(--bad-bg); }
.photo-actions .btn.btn-danger { background: var(--bad-bg); color: var(--danger); border-color: transparent; }
.btn.is-loading::after { border-color: #fff; border-right-color: transparent; }
.btn.btn-ghost.is-loading::after { border-color: var(--violet); border-right-color: transparent; }
.fab { background: var(--violet); box-shadow: 0 2px 10px rgba(36, 27, 53, .25); border-color: transparent; }
.fab:hover { background: var(--violet-dark); transform: none; }
.to-top { box-shadow: var(--glass-shadow); }

.like-btn { background: var(--tint); color: var(--violet); border-radius: var(--r-btn); justify-content: center; }
.like-btn:hover { background: var(--tint-2); }
.like-btn.is-liked { background: var(--violet); color: #fff; }
:root[data-theme="dark"] .like-btn { color: var(--chip-ink); }
:root[data-theme="dark"] .like-btn.is-liked { background: var(--violet); color: #fff; }

.composer-btn { background: var(--tint); color: var(--violet); border-radius: var(--r-btn); justify-content: center; text-align: center; }
.composer-btn:hover { background: var(--tint-2); }
.composer-btn.is-primary { background: var(--violet); color: #fff; box-shadow: none; filter: none; }
.composer-btn.is-primary:hover { background: var(--violet-dark); }
.composer-input { background: var(--bg); border-color: var(--edge); color: var(--ink-soft); }

.animal-actions .act-main-btn { background: var(--violet); border-radius: var(--r-btn); display: flex; align-items: center; justify-content: center; min-height: 2.5rem; }
.animal-actions .act-main-btn:hover { background: var(--violet-dark); }
.animal-actions .act-main-btn.is-state { background: var(--tint); color: var(--ink-soft); }
.animal-actions .act-side-btn { background: var(--tint); color: var(--violet); border-radius: var(--r-btn); display: flex; align-items: center; justify-content: center; min-height: 2.5rem; }
.animal-actions .act-side-btn:hover { background: var(--tint-2); }

.row-btn { border-radius: 8px; }
.row-btn.ok { background: var(--ok-bg); color: var(--ok-ink); }
.row-btn.no { background: var(--bad-bg); color: var(--bad-ink); }
.row-btn.view { background: var(--tint); color: var(--violet); }
.back-link { background: var(--surface); color: var(--violet); border: 1px solid var(--edge); border-radius: var(--r-btn); }
.back-link:hover { background: var(--tint); }

/* ---------- Forms ---------- */
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number],
input[type=search], input[type=date], select, textarea, input[type=file] {
  background: var(--surface); border: 1px solid var(--edge-strong); border-radius: var(--r-btn); color: var(--ink);
}
input:focus, select:focus, textarea:focus { border-color: var(--violet); outline: 2px solid color-mix(in srgb, var(--violet) 35%, transparent); outline-offset: 1px; }
input::placeholder, textarea::placeholder { color: var(--ink-soft); opacity: .75; }
:root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder { color: var(--ink-soft); }
select:required:invalid { color: var(--ink-soft); }
.field label, .field legend { color: var(--ink); font-size: .8125rem; font-weight: 600; }
.check input { accent-color: var(--violet); }
input[type=file]::file-selector-button { background: var(--tint); color: var(--violet); border-radius: 8px; }

.chip-group .chip-label, .chip-label {
  background: var(--surface); border: 1px solid var(--edge-strong); color: var(--ink); border-radius: var(--r-btn);
  font-size: .875rem; font-weight: 500;
}
.chip-label:hover { background: var(--tint); }
.chip-input:checked + .chip-label { background: var(--violet); border-color: var(--violet); color: #fff; box-shadow: none; }
.chip-input:checked + .chip-label.tone-urgent { background: var(--danger); border-color: var(--danger); }
.chip-input:checked + .chip-label.tone-medium { background: #8A5A00; border-color: #8A5A00; }

.tile-group .tile-label { border: 1px solid var(--edge-strong); border-radius: var(--r-card); box-shadow: none; }
.tile-icon { background: var(--tint); color: var(--violet); border-radius: 10px; }
.chip-input:checked + .tile-label { background: var(--tint); border-color: var(--violet); box-shadow: 0 0 0 1px var(--violet); color: var(--ink); }
.chip-input:checked + .tile-label .tile-sub { color: var(--ink-soft); }
.chip-input:checked + .tile-label .tile-icon { background: var(--violet); color: #fff; }
.chip-btn { background: var(--surface); border: 1px solid var(--edge-strong); color: var(--violet); border-radius: var(--r-btn); }
.chip-btn:hover { background: var(--tint); }
.chip-btn.is-active, :root[data-theme="dark"] .chip-btn.is-active { background: var(--violet); border-color: var(--violet); color: #fff; }
:root[data-theme="dark"] .chip-btn { background: var(--tint); border-color: var(--edge-strong); color: var(--chip-ink); }

.dropzone, .field-photo .dropzone { background: var(--bg); border: 1.5px dashed var(--edge-strong); border-radius: var(--r-card); color: var(--ink-soft); }
.dropzone:hover, .dropzone.is-drag { background: var(--tint); border-color: var(--violet); }
.field-photo.has-file .dropzone { border-style: solid; border-color: var(--violet); color: var(--violet); }
.dz-thumb, .dz-item { border-color: var(--edge-strong); }
.dz-remove, .dz-item-remove { background: var(--bad-bg); color: var(--bad-ink); border-radius: 8px; }

/* ---------- Filters, chips, badges ---------- */
.admin-tabs a, .filter-tabs a, .chips a {
  background: var(--surface); border: 1px solid var(--edge); color: var(--ink); border-radius: var(--r-btn);
  font-weight: 500; box-shadow: none;
}
.admin-tabs a:hover, .filter-tabs a:hover, .chips a:hover { background: var(--tint); }
.admin-tabs a[aria-current="page"], .filter-tabs a[aria-current="page"], .chips a[aria-current="page"] {
  background: var(--violet); border-color: var(--violet); color: #fff; box-shadow: none;
}
.badge, .chip { border-radius: 6px; font-weight: 600; }
.chip { background: var(--tint); color: var(--violet); border: 1px solid var(--edge); font-weight: 500; }
:root[data-theme="dark"] .chip { color: var(--chip-ink); }
.badge-verified, .chip-ok { background: var(--ok-bg); color: var(--ok-ink); border-color: transparent; }
.badge-pending { background: var(--warn-bg); color: var(--warn-ink); border-color: transparent; }
.badge-unverified, .badge-rejected { background: var(--bad-bg); color: var(--bad-ink); border-color: transparent; }
.badge-info { background: var(--tint); color: var(--violet); border-color: transparent; }
:root[data-theme="dark"] .badge-info { color: var(--chip-ink); }
.post-urgent, .animal-urgent { background: var(--danger); animation: none; border-radius: 6px; }
.animal-kind, .collage-tag, .post-pill { background: rgba(255, 255, 255, .95); color: #3A2766; border-radius: 6px; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ---------- Tables ---------- */
.table-wrap { border-radius: var(--r-card); }
.data th { background: var(--tint); color: var(--ink-soft); letter-spacing: .05em; }
.data td { border-top-color: var(--edge); }
.data tbody tr:hover { background: var(--tint); }

/* ---------- Photos and placeholders ---------- */
.post-photo, .animal-photo, a.animal-photo, .gallery-main, .collage-tile { background: var(--tint-2); }
/* With width:auto, a box that has both aspect-ratio and max-height gets its width from the capped height (32rem x 4/3, about 683px),
   which left an empty strip beside the photo on wide cards and on phones. A set width keeps the photo full width. */
.post-photo { width: 100%; box-sizing: border-box; }
.post-photo::after { background: linear-gradient(to top, rgba(36, 27, 53, .45), transparent 50%); }
.collage-tile::after { background: linear-gradient(to top, rgba(36, 27, 53, .55), transparent 55%); }
.animal-photo-empty .logo-paw, .gallery-empty .logo-paw, .collage-empty .logo-paw, .post-photo-empty .logo-paw { fill: #fff; opacity: .9; }
.animal-photo-empty .logo-heart, .gallery-empty .logo-heart, .collage-empty .logo-heart, .post-photo-empty .logo-heart { fill: var(--violet); }
.gallery-main, .gallery-main img, .gallery-thumbs a { border-radius: var(--r-card); }
.gallery-thumbs a { border-radius: 10px; }
.gallery-thumbs a[aria-current="true"] { border-color: var(--violet); box-shadow: none; }

/* ---------- Detail tiles, stats, dashboard ---------- */
.facts dt, .facts dd, .pstat { background: var(--tint); }
.facts dt, .pstat dt { color: var(--ink-soft); }
.dash-icon, .dash-icon.g1, .dash-icon.g2, .dash-icon.g3, .dash-icon.g4 { background: var(--tint); color: var(--violet); border-radius: 10px; }
:root[data-theme="dark"] .dash-icon { color: var(--chip-ink); }
.stat-hot { border-color: var(--violet); }
.stat-hot .stat-num { color: var(--violet); }
:root[data-theme="dark"] .stat-hot .stat-num { color: var(--chip-ink); }
.stat-go { stroke: var(--ink-soft); }
.bar-col .bar { background: var(--violet); border-radius: 6px 6px 0 0; }
.urgent-item { border-radius: var(--r-btn); }
.urgent-urgent { background: var(--bad-bg); border-color: transparent; }
.urgent-medium { background: var(--warn-bg); border-color: transparent; }
.urgent-item .btn, .urgent-medium .btn { background: var(--violet); border-color: var(--violet); }
.recent-ico, .tile-icon { background: var(--tint); color: var(--violet); }
.split-bar, .raised-bar { background: var(--tint-2); }
.split-bar span, .raised-bar span { background: var(--violet); }
.split-bar.is-muted span { background: var(--edge-strong); }
.split-count { background: var(--tint); color: var(--violet); }
.pw-rules li.is-met .pw-check { color: var(--ok-ink); }

/* ---------- Auth, 404, misc ---------- */
.auth-icon { background: var(--violet); box-shadow: none; border-radius: 12px; }
.auth-icon .logo-heart { fill: var(--violet); }
.auth-icon-ok { background: var(--ok-bg); }
.auth-icon-warn { background: var(--warn-bg); }
.nf-digit { background: none; color: var(--violet); -webkit-text-fill-color: var(--violet); opacity: .85; font-family: var(--font-head); font-weight: 600; }
.nf-card::before { display: none; }
.nf-link-icon { background: var(--tint); color: var(--violet); border-radius: 10px; }
.cookie, dialog.modal { background: var(--surface); border: 1px solid var(--edge); box-shadow: 0 8px 28px rgba(36, 27, 53, .18); }
dialog.modal { border-radius: 16px; }
dialog.modal::backdrop { background: rgba(36, 27, 53, .45); }
.contact-panel { border-radius: 16px; }
.contact-icon, .photo-main, .form-icon { background: var(--violet); box-shadow: none; }
.contact-item { background: var(--bg); border-color: var(--edge); border-radius: 12px; }
.faq-item[open] { border-color: var(--edge-strong); }
.faq-item[open] summary { color: var(--violet); }
.faq-item .chev { color: var(--ink-soft); }
.result-type { background: var(--tint); color: var(--violet); border-radius: 6px; }
.comment-list { border-top-color: var(--edge); }
.progress span { background: var(--violet); }
.nl-mail { background: #F7F4FB; border-color: #E3DBF0; }
.nl-mail-brand { color: #3A2766; }

/* ---------- Motion ---------- */
@keyframes pulse { 50% { opacity: 1; } }

/* =====================================================================
   PHONES (up to 40rem). This block is the priority.
   Rules: every control is at least 44px tall, labels are centered, groups of
   actions stack at full width, inputs are 16px so iOS does not zoom.
   ===================================================================== */
@media (max-width: 39.99rem) {
  .wrap { padding: 1rem 1rem 6.5rem; }
  .site-footer { margin: .75rem; }

  /* Header: menu, logo, theme, profile. One tidy row. */
  .site-header { height: 3.75rem; padding: 0 .75rem; gap: .5rem; }
  .icon-btn, .site-header .icon-btn, .header-avatar { width: var(--touch); height: var(--touch); }
  .header-tools { gap: .375rem; }
  .header-tools .btn { min-height: 2.5rem; padding: .4rem 1rem; }

  /* Every button: same height, centered label and icon */
  .btn, .btn-small, .btn-lg, .composer-btn, .like-btn, .chip-btn, .dz-remove, .row-btn {
    min-height: var(--touch);
    display: inline-flex; align-items: center; justify-content: center;
    text-align: center;
  }
  .btn-small { padding: .5rem 1rem; font-size: .875rem; }
  .row-btn { min-height: 2.5rem; padding: .35rem 1rem; }
  .sb-link { min-height: var(--touch); }
  .chips a, .filter-tabs a, .admin-tabs a { min-height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; }

  /* Inputs: 16px stops iOS zooming on focus */
  input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number],
  input[type=search], input[type=date], select, textarea { font-size: 1rem; min-height: var(--touch); }
  textarea { min-height: 6rem; }
  .site-search input[type=search] { min-height: 0; }

  /* Home: three quick actions share the row evenly */
  .composer-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .composer-btn { padding: .5rem .25rem; font-size: .8125rem; white-space: nowrap; }

  /* Feed post: reactions on one row, Adopt Me full width below it */
  .post-foot { flex-direction: column; align-items: stretch; gap: .75rem; }
  .post-foot-left { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .post-foot-left .like-form { display: block; }
  .post-foot-left .like-btn { width: 100%; padding: .375rem .25rem; font-size: .8125rem; }
  .post-foot > .btn { width: 100%; }
  .post-photo { height: 13.5rem; }

  /* Cards in grids: action buttons split evenly */
  .animal-actions { gap: .5rem; }
  .animal-actions .act-main-btn { flex: 1 1 0; }
  .animal-actions .act-side-btn { flex: 0 0 auto; padding: .5rem 1.25rem; }

  /* Primary actions stack at full width, centered */
  .profile-cta, .review-actions, .nl-actions, .edit-actions, .nf-actions, .modal-actions, .cta-actions, .hero-actions {
    display: grid; grid-template-columns: 1fr; gap: .5rem; justify-items: stretch;
  }
  .profile-cta .btn, .review-actions .btn, .nl-actions .btn, .edit-actions .btn, .nf-actions .btn,
  .modal-actions .btn, .cta-actions .btn, .hero-actions .btn, .welcome-bar .btn, .page-head .btn { width: 100%; }
  .page-head { flex-direction: column; align-items: stretch; }
  .welcome-bar { flex-direction: column; align-items: stretch; text-align: center; }
  .feed-more { display: grid; }
  .feed-more .btn { width: 100%; }

  /* Pager: two equal buttons, centered */
  .pager { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: .5rem; }
  .pager .btn { width: 100%; }

  /* Newsletter in the footer: input and button stack, both full width */
  .newsletter-form { max-width: none; flex-direction: column; }
  .newsletter-form input[type=email] { flex: none; width: 100%; }
  .newsletter-form .btn { width: 100%; }

  /* Auth cards: secondary actions centered and stacked */
  .auth-card { padding: 1.5rem 1.25rem; }
  .auth-alt { flex-direction: column; text-align: center; gap: .5rem; }
  .auth-alt .btn { width: 100%; }
  .forgot-link { text-align: right; padding: .5rem 0; }

  /* Cookie banner and logout row */
  .cookie-actions { width: 100%; }
  .cookie-actions .btn { flex: 1; }
  .logout-row { flex-direction: column; align-items: stretch; }
  .logout-btn { width: 100%; }

  /* Tile and chip groups: one column, easy to hit */
  .tile-group { grid-template-columns: 1fr; }
  .chip-group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .chip-group .chip-label { width: 100%; padding: .25rem .5rem; }

  /* Dashboard and stats */
  .dash-stats, .trans-stats { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .stat { padding: 1rem; }
  .stat-num { font-size: 1.5rem; }

  /* Floating buttons keep clear of content and the notch */
  .contact { right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px) + var(--banner-h, 0px)); }
  .to-top { right: 1.1rem; }
  .fab { width: 3rem; height: 3rem; }
  .has-contact .to-top { bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px) + var(--banner-h, 0px)); }

  /* Tables: keep the first column readable, scroll the rest */
  .data th, .data td { padding: .75rem .875rem; }
  .row-actions { flex-wrap: nowrap; }
}

/* Very narrow phones */
@media (max-width: 22.5rem) {
  .composer-actions, .post-foot-left, .chip-group { grid-template-columns: 1fr; }
  .dash-stats, .trans-stats { grid-template-columns: 1fr; }
}

/* ---------- Password requirement chips ----------
   Each chip lights up green the moment its rule is met. Symbol is a bonus and never blocks signup. */
.pw-rules {
  display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 0; padding: 0; list-style: none;
}
.pw-rules li {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 2rem; padding: .3rem .8rem;
  font-size: .875rem; font-weight: 500; line-height: 1.2;
  color: var(--ink-soft); background: var(--surface);
  border: 1px solid var(--edge); border-radius: 999px; box-shadow: none;
  transition: color .15s, background-color .15s, border-color .15s;
}
.pw-rules .pw-dot {
  flex: none; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--edge-strong); box-shadow: none; opacity: 1;
  transition: background-color .15s;
}
.pw-rules li.is-met {
  color: var(--ok-ink); background: var(--ok-bg);
  border-color: color-mix(in srgb, var(--ok-ink) 45%, transparent); box-shadow: none;
}
.pw-rules li.is-met .pw-dot { background: var(--ok-ink); box-shadow: none; opacity: 1; }
.pw-check { display: none; }
@media (prefers-reduced-motion: reduce) { .pw-rules li, .pw-rules .pw-dot { transition: none; } }

/* Spotted-stray cards are links now. */
a.stray-card { display: block; color: inherit; text-decoration: none; }
a.stray-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- Table cells: badges and row buttons sit on one centered line ---------- */
.data th, .data td { vertical-align: middle; }
.data .badge, .badge {
  display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap; line-height: 1.2; text-align: center;
}
.data td:has(> .badge) { white-space: nowrap; }
.row-actions { display: table-cell; white-space: nowrap; text-align: right; }
.row-actions .inline-form { display: inline-flex; vertical-align: middle; margin: 0; }
.row-btn {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  min-height: 2.25rem; padding: .25rem .9rem; line-height: 1; text-align: center; white-space: nowrap;
}
.row-actions .row-btn:first-child, .row-actions .inline-form:first-child .row-btn { margin-left: 0; }
@media (max-width: 39.99rem) {
  .row-btn { min-height: var(--touch); padding: .25rem 1rem; }
}

/* ---------- Action buttons: one size, delete buttons fill the card on phones ---------- */
.review-actions .btn { font-size: .9375rem; font-weight: 600; }
.danger-zone .btn { justify-content: center; text-align: center; }
@media (max-width: 39.99rem) {
  .danger-zone .inline-form { display: block; }
  .danger-zone .btn { display: flex; width: 100%; }
  .review-actions .btn, .profile-cta .btn { font-size: 1rem; }
}
:root[data-theme="dark"] .animal-actions .act-side-btn { color: var(--chip-ink); }

/* ---------- Admin tables on phones: each row becomes a card, buttons share one row ---------- */
@media (max-width: 39.99rem) {
  .is-admin .table-wrap { overflow: visible; background: none; border: 0; box-shadow: none; }
  .is-admin .data, .is-admin .data tbody, .is-admin .data tr, .is-admin .data td { display: block; width: 100%; }
  .is-admin .data thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .is-admin .data tbody tr {
    margin: 0 0 .75rem; padding: .5rem .25rem;
    background: var(--surface); border: 1px solid var(--edge); border-radius: var(--r-card);
  }
  .is-admin .data tbody tr:hover { background: var(--surface); }
  .is-admin .data td { padding: .3rem .875rem; border: 0; text-align: left; }
  .is-admin .data td:has(> .badge) { white-space: normal; }
  .is-admin .data td.hide-sm, .is-admin .data th.hide-sm { display: none; }
  .is-admin .data td.row-actions {
    display: flex; gap: .5rem; padding-top: .6rem; text-align: center;
  }
  .is-admin .data .row-actions .inline-form { display: flex; flex: 1 1 0; }
  .is-admin .data .row-actions .row-btn { flex: 1 1 0; margin: 0; width: 100%; }
}

/* Spotted strays under the Browse Pets list */
.browse .strays { margin-top: 1.75rem; }

/* ---------- Landing page ---------- */
.lp { gap: clamp(2.25rem, 6vw, 4rem); }
.lp-hero { gap: 1.5rem; }
.lp-kicker { color: var(--link); }
.lp-hero h1 { font-size: clamp(2rem, 7vw, 3.4rem); line-height: 1.08; }
.lp-lede { font-size: 1.0625rem; }
/* Hero photos: landscape tiles so a whole animal fits, never a thin tall crop. */
.lp-mosaic, .lp-mosaic-1, .lp-mosaic-2 { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: none; gap: .5rem; }
.lp-mosaic-1 { grid-template-columns: 1fr; }
.lp-tile, .lp-tile:first-child, .lp-mosaic-2 .lp-tile:nth-child(2) { grid-row: auto; aspect-ratio: 4 / 3; border-radius: var(--r-card); }
.lp-tile img { object-position: center 40%; }
.lp-mosaic-3 .lp-tile:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
@media (min-width: 56rem) {
  .lp-mosaic-2 { grid-template-columns: 1fr; }
  .lp-mosaic-2 .lp-tile, .lp-mosaic-2 .lp-tile:nth-child(2) { aspect-ratio: 16 / 9; }
}

/* Landing numbers: one card per figure on even columns. Lining numerals keep 3, 4 and 5 on the same baseline. */
.lp-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 0; padding: 0; border: 0; }
.lp-stat { display: grid; align-content: start; gap: .15rem; padding: 1rem; background: var(--surface); border: 1px solid var(--edge); border-radius: var(--r-card); }
.lp-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
.lp-stat-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-bottom: .6rem; border-radius: 12px; background: var(--tint); color: var(--violet); }
.lp-stat-icon svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lp-stat-num { color: var(--violet); font-size: clamp(2.25rem, 8vw, 2.875rem); line-height: 1; letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; }
.lp-stat-label { color: var(--ink-soft); font-size: .875rem; font-weight: 500; line-height: 1.3; }
:root[data-theme="dark"] .lp-stat-num, :root[data-theme="dark"] .lp-stat-icon { color: var(--chip-ink); }
@media (min-width: 40rem) {
  .lp-stats { grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); gap: 1rem; }
  .lp-stat { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 1rem; padding: 1.1rem 1.25rem; }
  .lp-stat:last-child:nth-child(odd) { grid-column: auto; }
  .lp-stat-icon { grid-row: 1 / span 2; width: 3rem; height: 3rem; margin: 0; }
}

.lp-step { border-top-color: var(--violet); }
.lp-step::before { color: var(--link); }
.lp-quiet, .lp-trust { background: var(--tint); border-color: var(--edge); border-radius: var(--r-card); }
.lp-help-card { border-color: var(--edge); border-radius: var(--r-card); }
.lp-help-card:hover { border-color: var(--violet); }
.lp-link { color: var(--link); }
.lp-money div { border-left-color: var(--violet); }
.lp-checks li::before { border-color: var(--ok-ink); }

.lp-cta { background: var(--violet-dark); color: #fff; border-radius: var(--r-card); }
.lp-cta h2, .lp-cta-note a { color: #fff; }
.lp-cta p { color: rgba(255, 255, 255, .88); }
.lp-cta .btn { background: #fff; color: var(--violet-dark); border-color: #fff; }
.lp-cta .btn.btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.lp-cta .btn.btn-ghost:hover { background: rgba(255, 255, 255, .12); }

@media (max-width: 39.99rem) {
  .lp-actions { display: grid; grid-template-columns: 1fr; gap: .5rem; }
  .lp-actions .btn { width: 100%; }
  .lp-steps { grid-template-columns: 1fr; gap: 0; }
  .lp-step { padding: .9rem 0 .9rem 1rem; border-top: 0; border-left: 2px solid var(--edge-strong); }
  .lp-step::before { margin-bottom: .25rem; font-size: 1.125rem; }
  .lp-help-card { padding: 1rem; }
  .lp-trust, .lp-quiet { padding: 1.25rem; }
  .lp-trust-side .btn { width: 100%; }
}

/* Monthly goal on the Donate page */
.goal { margin: 0 0 1rem; padding: 1rem 1.1rem; background: var(--tint); border: 1px solid var(--edge); border-radius: var(--r-card); }
.goal-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem .75rem; margin-bottom: .6rem; }
.goal-top span { color: var(--ink-soft); font-weight: 600; }
.goal-bar { height: .6rem; overflow: hidden; background: var(--surface); border: 1px solid var(--edge); border-radius: 999px; }
.goal-bar span { display: block; height: 100%; background: var(--violet); border-radius: 999px; }
.goal small { display: block; margin-top: .5rem; color: var(--ink-soft); }

/* ---------- Inquiries: ask about an animal, talk to the team ---------- */
.post-cta { display: flex; align-items: center; gap: .5rem; }
/* revamp.css makes ghost buttons in a post foot transparent; Inquire needs a visible edge there. */
:root .post-foot .post-cta .btn.btn-ghost { background: var(--tint); border-color: var(--edge); color: var(--violet); }
:root .post-foot .post-cta .btn.btn-ghost:hover { background: var(--tint-2); }
:root[data-theme="dark"] .post-foot .post-cta .btn.btn-ghost { color: var(--chip-ink); }
.tab-num { margin-left: .25rem; }
@media (max-width: 39.99rem) {
  .post-foot > .post-cta { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  .post-cta .btn { width: 100%; }
}