/* Password checklist (check icons, two columns) and the eye icon on the show/hide button.
   Load this AFTER theme.css in includes/header.php. */

.pw-rules {
  list-style: none; margin: .75rem 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1rem;
}
.pw-rules li {
  display: flex; align-items: center; gap: .6rem; padding: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  color: var(--ink-soft); font-size: .875rem; font-weight: 500;
}
.pw-check {
  flex: none; width: 1rem; height: 1rem; fill: none; stroke: currentColor;
  stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  opacity: .3; transition: opacity .15s, color .15s;
}
.pw-rules li.is-met { color: var(--ink); background: none; border: 0; box-shadow: none; }
.pw-rules li.is-met .pw-check { color: var(--ok-ink); opacity: 1; }
@media (max-width: 30rem) { .pw-rules { grid-template-columns: 1fr; } }

/* Eye button */
.pw-wrap input { padding-right: 3rem; }
.pw-toggle {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; right: .35rem;
  border-radius: 50%; color: var(--chip-ink); font-size: 0;
}
.pw-toggle svg {
  width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.pw-toggle:hover { background: var(--chip-bg); }

/* ---------- Six-box code entry (reset_password.php, step 1) ---------- */
.otp-boxes { display: flex; justify-content: center; gap: .5rem; }
.otp-boxes > #code { text-align: center; letter-spacing: .5em; font-size: 1.25rem; font-weight: 700; }
.otp-boxes .otp-box {
  flex: 1 1 0; min-width: 0; max-width: 3.25rem; width: auto; height: 3.4rem; padding: 0;
  text-align: center; font-size: 1.5rem; font-weight: 800; color: var(--ink);
  background: var(--input-bg); border: 1px solid var(--field-border, var(--control)); border-radius: 14px;
  caret-color: var(--brand);
}
.otp-boxes .otp-box:focus { border-color: var(--brand); outline: 2px solid var(--brand); outline-offset: 1px; }
.otp-boxes .otp-box[aria-invalid="true"] { border-color: var(--danger); }
.otp-note { margin: 1rem auto 0; }

/* Countdown under the code boxes */
.otp-timer { margin: .75rem 0 1rem; text-align: center; font-size: .8125rem; font-weight: 500; color: var(--muted, var(--ink-soft)); max-width: none; }
.otp-timer strong { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--ink); }
.otp-timer.is-expired { color: var(--danger); font-weight: 700; }
.linkbtn:disabled { color: var(--ink-soft); text-decoration: none; cursor: default; opacity: .8; }

/* ---------- Admin newsletter page ---------- */
.nl-layout { display: grid; gap: 1.25rem; margin-top: 1.25rem; }
@media (min-width: 64rem) {
  .nl-layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; }
  .nl-preview { position: sticky; top: 5rem; }
}
.nl-layout > .card { margin: 0; }
.nl-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.nl-label-row label { margin-bottom: .3rem; }
.nl-count { font-size: .6875rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted, var(--ink-soft)); }
.nl-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .5rem; }
.nl-actions .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* The preview is an email, and emails are always light */
.nl-mail { padding: 1.25rem 1rem; background: #EDE5FF; border: 1px solid #CBB8FF; border-radius: 16px; }
.nl-mail-brand { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-bottom: .9rem; font-weight: 800; color: #3D0E96; }
.nl-mail-brand .brand-badge { width: 1.75rem; height: 1.75rem; }
.nl-mail-card { padding: 1.25rem; background: #fff; border: 1px solid #E0D3FF; border-radius: 18px; }
.nl-mail-card h3 { margin: 0 0 .75rem; font-size: 1.05rem; line-height: 1.3; color: #1F1235; overflow-wrap: anywhere; }
.nl-mail-card p { margin: 0 0 .65rem; max-width: none; font-size: .8125rem; line-height: 1.55; color: #3B2F57; overflow-wrap: anywhere; }
.nl-mail-card p.nl-mail-foot { margin: .9rem 0 0; padding-top: .75rem; border-top: 1px solid #EDE5FF; font-size: .6875rem; color: #6B5B8C; }

/* ---------- Settings page: gap under the profile card, and the Log out card ---------- */
.profile-card { margin-bottom: 1.25rem; }
.logout-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.logout-row h2 { margin: 0 0 .15rem; }
.logout-row .hint { margin: 0; }
.logout-btn { display: inline-flex; align-items: center; gap: .5rem; }
.logout-btn svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Idle logout warning */
#idle-left { font-variant-numeric: tabular-nums; }

/* ---------- 404 page ---------- */
.nf { max-width: 44rem; margin: 1rem auto 2rem; }
.nf-card { position: relative; overflow: hidden; padding: 2rem 1.5rem 1.75rem; text-align: center; }
.nf-card::before {
  content: ""; position: absolute; inset: -35% -10% auto -10%; height: 75%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(132, 71, 255, .22), transparent);
}
.nf-card > * { position: relative; }
.nf-art { display: flex; align-items: center; justify-content: center; gap: .25rem; margin-bottom: 1rem; }
.nf-digit {
  font: 800 clamp(5rem, 20vw, 8.5rem)/1 var(--font-head); letter-spacing: -.04em;
  background: var(--grad-br); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nf-cat { flex: none; width: clamp(5rem, 20vw, 8.5rem); height: auto; overflow: visible; animation: cat-bob 4s ease-in-out infinite; }
.nf h1 { margin: 0 0 .5rem; font-size: 1.5rem; }
.nf .lede { max-width: 30rem; margin: 0 auto; font-size: .9375rem; color: var(--muted); text-wrap: balance; }
.nf .page-search { max-width: 28rem; margin: 1.5rem auto 1rem; }
.nf-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.nf-more-title { margin: 1.75rem 0 .75rem; text-align: center; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.nf-links { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.nf-link {
  display: flex; align-items: center; gap: .75rem; height: 100%; padding: .875rem 1rem;
  border: 1px solid var(--card-border); border-radius: 16px; background: rgba(255, 255, 255, .85);
  box-shadow: var(--card-shadow); color: var(--ink); text-decoration: none;
  transition: border-color .15s, transform .15s;
}
:root[data-theme="dark"] .nf-link { background: var(--glass-bg); }
.nf-link:hover { border-color: var(--g2); transform: translateY(-2px); }
.nf-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.nf-link-icon { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 12px; background: var(--chip-bg); color: var(--chip-ink); }
.nf-link-icon svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nf-link strong { display: block; font-size: .875rem; }
.nf-link small { display: block; font-size: .75rem; color: var(--muted); }

/* Terms box locked until both pages are opened */
.check input:disabled { cursor: not-allowed; }
.check input:disabled + label { opacity: .75; }
.hint.is-ok { color: var(--ok-ink); font-weight: 600; }

/* Visible heading at the top of the home feed */
.feed-intro .page-sub { margin-top: .25rem; }

/* ---------- Skeleton: sits in the page flow instead of floating over it ----------
   It used to be absolutely positioned. When the page being left was shorter than the skeleton
   (a login page, say), the skeleton hung over the footer. Now the old content is removed while loading,
   so the skeleton sets the height and the footer stays underneath it. */
.page-skeleton { position: static; inset: auto; z-index: auto; }
html.is-navigating main.wrap > :not(.page-skeleton) { display: none !important; }

/* ---------- Several photos: the list under the drop zone, and the strip on admin pages ---------- */
.dz-list { display: grid; gap: .5rem; margin: .75rem 0 0; padding: 0; list-style: none; }
.dz-list[hidden] { display: none; }
.dz-item {
  display: flex; align-items: center; gap: .75rem; padding: .5rem .6rem;
  background: #fff; border: 1px solid var(--field-border, var(--line)); border-radius: 14px;
}
:root[data-theme="dark"] .dz-item { background: var(--input-bg); }
.dz-item img { flex: none; width: 3rem; height: 3rem; object-fit: cover; border-radius: 10px; }
.dz-item-main { flex: 1; min-width: 0; }
.dz-item-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8125rem; font-weight: 600; }
.dz-item-size { display: block; font-size: .6875rem; color: var(--muted, var(--ink-soft)); }
.dz-item.is-bad { border-color: var(--danger); }
.dz-item.is-bad .dz-item-size { color: var(--danger); font-weight: 600; }
.dz-item-remove {
  flex: none; min-height: 2.25rem; padding: .25rem .85rem; border: 0; border-radius: 999px; cursor: pointer;
  background: #FEE2E2; color: #D4182A; font: 700 .75rem var(--font-body);
}
.dz-item-remove:hover { background: #FECACA; }
.dz-item-remove:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
:root[data-theme="dark"] .dz-item-remove { background: rgba(239, 68, 68, .2); color: #FECACA; }
.photo-strip { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); margin-top: 1.25rem; }
.photo-strip .id-shot { margin: 0; }

/* Spotted strays on the home feed */
.strays { margin: 0; }
.strays .section-head { margin-bottom: .75rem; }
.strays .section-head h2 { font-size: 1.0625rem; }
.feed-section-title { margin: .25rem 0 -.25rem; font-size: 1.0625rem; font-weight: 800; }
.strays .animal-grid { margin-top: 0; }

/* ---------- Photo collage on the home feed ---------- */
.collage { columns: 3 10rem; column-gap: .5rem; }
.collage-tile {
  position: relative; display: block; margin: 0 0 .5rem; overflow: hidden; break-inside: avoid;
  border-radius: 16px; color: #fff; text-decoration: none; box-shadow: var(--card-shadow);
  background: linear-gradient(135deg, var(--brand), var(--g2));
}
.collage-tile:nth-child(3n+1) { aspect-ratio: 4 / 5; }
.collage-tile:nth-child(3n+2) { aspect-ratio: 1 / 1; }
.collage-tile:nth-child(3n)   { aspect-ratio: 4 / 3; }
.collage-tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
a.collage-tile:hover img { transform: scale(1.05); }
a.collage-tile:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.collage-tile::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(20, 10, 40, .62), transparent 55%); }
.collage-cap { position: absolute; left: .65rem; right: .65rem; bottom: .6rem; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; }
.collage-cap strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.collage-tag { padding: .1rem .55rem; border-radius: 999px; background: rgba(255, 255, 255, .92); color: #3D0E96; font-size: .6875rem; font-weight: 700; }
.collage-empty { display: grid; place-items: center; width: 100%; height: 100%; }
.collage-empty .logo-paw { fill: #fff; }
.collage-empty .logo-heart { fill: var(--g1); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .collage-tile img { transition: none; } }

/* Home quick actions: the "What's happening?" bar is gone, so the buttons start at the top of the card */
.composer-actions:first-child { margin-top: 0; }

/* Stand-in for a photo whose file is missing (see initBrokenImages in app.js) */
.img-missing { display: grid; place-items: center; background: linear-gradient(135deg, var(--chip-bg), var(--chip-hover)); }
.img-missing-glyph { width: 40%; min-width: 1.25rem; max-width: 4rem; height: auto; opacity: .65; }
.img-missing .logo-paw { fill: var(--g2); }
.img-missing .logo-heart { fill: #fff; opacity: 1; }