/* ---------------------------------------------------------------------------
   Mekozza · adoption

   Prefix .mka so nothing here can reach another page, and so styles.css and
   mobile.css keep their own scope. Same token vocabulary as premium-page.css
   and partner-page.css, so the three newest parts of the site look related.

   Quieter than partner.php on purpose. That page is an advert and can shout;
   this one is somebody deciding whether to take an animal into their home,
   and photographs of the animal should be the loudest thing on it.
   --------------------------------------------------------------------------- */

.mka {
  --ink:#101828; --ink-2:#475467; --ink-3:#98a2b3;
  --line:#eaecf0; --line-2:#d0d5dd;
  --bg:#fbfcfe; --card:#fff;
  --brand:#ff6b35; --brand-2:#ff9350; --brand-soft:#fff2ec; --brand-deep:#e14f14;
  --ok:#067647; --ok-soft:#ecfdf3;
  --warn:#b54708; --warn-soft:#fffaeb;
  --sky:#0079ff; --sky-soft:#eff8ff;
  --grape:#7a5af8; --grape-soft:#f4f3ff;
  --shadow:0 1px 2px rgba(16,24,40,.05);
  --shadow-m:0 6px 18px -6px rgba(16,24,40,.12);
  --shadow-l:0 16px 40px -12px rgba(16,24,40,.18);
  --r:16px;

  color:var(--ink); background:var(--bg);
  font-family:'Open Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}

@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .mka {
    --ink:#f2f4f7; --ink-2:#98a2b3; --ink-3:#667085;
    --line:#1f2937; --line-2:#344054;
    --bg:#0b0f19; --card:#131a29;
    --brand-soft:#2a1710; --ok-soft:#0d2018; --warn-soft:#2a2110;
    --sky-soft:#0d1a2a; --grape-soft:#181530;
    --shadow-m:0 6px 18px -6px rgba(0,0,0,.45);
    --shadow-l:0 16px 40px -12px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"] .mka {
  --ink:#f2f4f7; --ink-2:#98a2b3; --ink-3:#667085;
  --line:#1f2937; --line-2:#344054;
  --bg:#0b0f19; --card:#131a29;
  --brand-soft:#2a1710; --ok-soft:#0d2018; --warn-soft:#2a2110;
  --sky-soft:#0d1a2a; --grape-soft:#181530;
}

.mka *,.mka *::before,.mka *::after { box-sizing:border-box; }

/* The hidden attribute has to win.

   The browser's own [hidden] { display:none } sits in the UA stylesheet at
   the lowest possible weight, so ANY author rule that sets display beats it.
   .mka-field is display:flex and .mka-fieldset is a block with padding, so
   marking either hidden set the property, satisfied every test that read
   el.hidden — and changed nothing on screen. "Why are you rehoming them?"
   went on being asked about somebody's own dog.

   Worth the !important: there is no argument for an element being both
   hidden and visible. */
.mka [hidden] { display:none !important; }
.mka-wrap { max-width:1180px; margin:0 auto; padding:0 16px; }

/* --- shared bits ---------------------------------------------------------- */
.mka-kicker {
  display:inline-flex; align-items:center; gap:7px;
  font-family:'Poppins',sans-serif; font-weight:700; font-size:.72rem;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--brand-deep); background:var(--brand-soft);
  border:1px solid var(--brand); border-radius:999px; padding:5px 12px;
  margin-bottom:12px;
}
.mka-h1 {
  font-family:'Poppins',sans-serif; font-weight:700;
  font-size:clamp(1.6rem,4.2vw,2.5rem); line-height:1.14;
  letter-spacing:-.02em; margin:0 0 8px;
}
.mka-h2 {
  font-family:'Poppins',sans-serif; font-weight:700;
  font-size:clamp(1.15rem,2.6vw,1.5rem); margin:0 0 14px; letter-spacing:-.01em;
}
.mka-lede { color:var(--ink-2); line-height:1.65; margin:0 0 22px; max-width:66ch; }
.mka-sec { padding:30px 0; }

.mka-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Poppins',sans-serif; font-weight:600; font-size:.95rem;
  padding:11px 18px; border-radius:12px; text-decoration:none; cursor:pointer;
  border:1.5px solid var(--line-2); background:var(--card); color:var(--ink);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.mka-btn:hover { transform:translateY(-1px); box-shadow:var(--shadow-m); }
.mka-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.mka-btn--go { background:var(--brand); border-color:var(--brand); color:#fff; }
.mka-btn--go:hover { background:var(--brand-2); }
.mka-btn--ok { background:var(--ok); border-color:var(--ok); color:#fff; }
.mka-btn--ghost { background:transparent; }
.mka-btn--sm { padding:8px 13px; font-size:.86rem; border-radius:10px; }

/* status pill */
.mka-pill {
  display:inline-flex; align-items:center; gap:6px;
  font-size:.74rem; font-weight:700; font-family:'Poppins',sans-serif;
  padding:4px 10px; border-radius:999px; white-space:nowrap;
  background:var(--line); color:var(--ink-2);
}
.mka-pill.is-ok     { background:var(--ok-soft);    color:var(--ok); }
.mka-pill.is-brand  { background:var(--brand-soft); color:var(--brand-deep); }
.mka-pill.is-warn   { background:var(--warn-soft);  color:var(--warn); }
.mka-pill.is-done   { background:var(--grape-soft); color:var(--grape); }
.mka-pill.is-muted  { background:var(--line);       color:var(--ink-3); }

.mka-note {
  display:flex; gap:11px; align-items:flex-start;
  border:1px solid var(--line-2); border-left:4px solid var(--sky);
  background:var(--sky-soft); border-radius:12px;
  padding:13px 15px; margin:0 0 20px; font-size:.92rem; line-height:1.6;
}
.mka-note i { margin-top:.2em; color:var(--sky); flex:0 0 auto; }
.mka-note.is-ok   { border-left-color:var(--ok);   background:var(--ok-soft); }
.mka-note.is-ok i { color:var(--ok); }
.mka-note.is-warn { border-left-color:var(--warn); background:var(--warn-soft); }
.mka-note.is-warn i { color:var(--warn); }

.mka-empty {
  text-align:center; padding:52px 20px; color:var(--ink-2);
  border:1.5px dashed var(--line-2); border-radius:var(--r); background:var(--card);
}
.mka-empty i { font-size:2.2rem; color:var(--ink-3); margin-bottom:12px; display:block; }
.mka-empty h3 { font-family:'Poppins',sans-serif; margin:0 0 6px; color:var(--ink); }
.mka-empty p { margin:0 0 18px; }

/* --- hero ----------------------------------------------------------------- */
.mka-hero {
  background:
    radial-gradient(circle at 14% 20%, rgba(255,147,80,.22), transparent 44%),
    radial-gradient(circle at 86% 10%, rgba(122,90,248,.16), transparent 46%),
    linear-gradient(170deg,#fff6f1 0%,var(--bg) 70%);
  border-bottom:1px solid var(--line);
  padding:34px 0 30px;
}
:root[data-theme="dark"] .mka-hero { background:linear-gradient(170deg,#16203a 0%,var(--bg) 70%); }
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .mka-hero { background:linear-gradient(170deg,#16203a 0%,var(--bg) 70%); }
}
.mka-hero-row { display:flex; gap:18px; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; }

/* --- filters -------------------------------------------------------------- */
.mka-filters {
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:14px; margin-bottom:22px; box-shadow:var(--shadow);
}
.mka-fgrid { display:grid; gap:10px; grid-template-columns:repeat(6,1fr); }
.mka-f label {
  display:block; font-size:.72rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:5px;
}
.mka-f input, .mka-f select {
  width:100%; padding:9px 11px; font-size:.9rem; font-family:inherit;
  border:1.5px solid var(--line-2); border-radius:10px;
  background:var(--bg); color:var(--ink);
}
.mka-f input:focus, .mka-f select:focus {
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft);
}
.mka-frow { display:flex; gap:9px; margin-top:12px; flex-wrap:wrap; align-items:center; }
.mka-count { color:var(--ink-2); font-size:.88rem; margin-right:auto; }

/* chips for quick species filtering */
.mka-chips { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.mka-chip {
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px; border-radius:999px; text-decoration:none;
  border:1.5px solid var(--line-2); background:var(--card); color:var(--ink-2);
  font-size:.88rem; font-weight:600; transition:all .12s ease;
}
.mka-chip:hover { border-color:var(--brand); color:var(--brand-deep); }
.mka-chip.is-on { background:var(--brand); border-color:var(--brand); color:#fff; }

/* --- the grid of pets ------------------------------------------------------ */
.mka-grid { display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }

.mka-card {
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; text-decoration:none; color:inherit; display:flex;
  flex-direction:column; box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.mka-card:hover {
  transform:translateY(-3px); box-shadow:var(--shadow-l); border-color:var(--line-2);
}
.mka-shot { position:relative; aspect-ratio:4/3; background:var(--line); overflow:hidden; }
.mka-shot img { width:100%; height:100%; object-fit:cover; display:block; }
.mka-shot .mka-none {
  width:100%; height:100%; display:grid; place-items:center;
  color:var(--ink-3); font-size:2.4rem; background:var(--brand-soft);
}
.mka-shot .mka-pill { position:absolute; top:10px; left:10px; box-shadow:var(--shadow); }
.mka-shot .mka-count-badge {
  position:absolute; bottom:10px; right:10px;
  background:rgba(16,24,40,.72); color:#fff; font-size:.72rem; font-weight:700;
  padding:3px 8px; border-radius:999px;
}
.mka-body { padding:13px 14px 15px; display:flex; flex-direction:column; gap:6px; flex:1; }
.mka-name {
  font-family:'Poppins',sans-serif; font-weight:700; font-size:1.05rem;
  margin:0; display:flex; align-items:center; gap:8px;
}
.mka-name i { color:var(--brand-deep); font-size:.9rem; }
.mka-meta { color:var(--ink-2); font-size:.85rem; line-height:1.5; }
.mka-where {
  margin-top:auto; padding-top:9px; border-top:1px solid var(--line);
  color:var(--ink-3); font-size:.8rem; display:flex; align-items:center; gap:6px;
}

/* --- single pet ------------------------------------------------------------ */
.mka-pet { display:grid; gap:26px; grid-template-columns:1.15fr .85fr; align-items:start; }

.mka-gallery { display:grid; gap:9px; }
.mka-main-shot {
  aspect-ratio:4/3; border-radius:var(--r); overflow:hidden;
  background:var(--line); border:1px solid var(--line);
}
.mka-main-shot img { width:100%; height:100%; object-fit:cover; display:block; }

/* The caption printed over the photograph is a phone thing: above this width
   the name sits beside the picture in its own panel. Without this it rendered
   as loose text under the image on every desktop, because the absolute
   positioning that tucks it into the corner only exists in the phone rules. */
.mka-shotcap { display:none; }
.mka-main-shot .mka-none { width:100%; height:100%; display:grid; place-items:center;
  font-size:3.5rem; color:var(--ink-3); background:var(--brand-soft); }
.mka-thumbs { display:flex; gap:8px; flex-wrap:wrap; }
.mka-thumbs button {
  width:68px; height:54px; padding:0; border-radius:9px; overflow:hidden;
  border:2px solid transparent; background:var(--line); cursor:pointer;
}
.mka-thumbs button.is-on { border-color:var(--brand); }
.mka-thumbs img { width:100%; height:100%; object-fit:cover; display:block; }

.mka-panel {
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:18px; box-shadow:var(--shadow); margin-bottom:16px;
}
.mka-panel h3 {
  font-family:'Poppins',sans-serif; font-size:1rem; margin:0 0 12px;
  display:flex; align-items:center; gap:8px;
}

.mka-ident__head {
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
}

.mka-facts { display:grid; gap:10px; grid-template-columns:repeat(2,1fr); }
.mka-fact {
  background:var(--bg); border:1px solid var(--line); border-radius:11px; padding:10px 12px;
}
.mka-fact b {
  display:block; font-size:.7rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-3); font-weight:700; margin-bottom:3px;
}
.mka-fact span { font-size:.92rem; font-weight:600; }

.mka-prose { line-height:1.72; color:var(--ink-2); white-space:pre-wrap; }

/* the QR block */
.mka-qr { text-align:center; }
.mka-qr canvas, .mka-qr img {
  width:168px; height:168px; border-radius:12px; background:#fff;
  padding:8px; border:1px solid var(--line-2); display:block; margin:0 auto 12px;
}
.mka-qr p { font-size:.82rem; color:var(--ink-3); margin:0 0 12px; line-height:1.55; }

/* --- the chat --------------------------------------------------------------- */
.mka-chat {
  display:grid; grid-template-rows:auto 1fr auto;
  height:min(72vh,640px);
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-m);
}
.mka-chat-top {
  display:flex; align-items:center; gap:12px; padding:12px 15px;
  border-bottom:1px solid var(--line); background:var(--bg);
}
.mka-chat-top img, .mka-chat-top .mka-none {
  width:42px; height:42px; border-radius:10px; object-fit:cover; flex:0 0 auto;
  display:grid; place-items:center; background:var(--brand-soft); color:var(--brand-deep);
}
.mka-chat-top b { display:block; font-family:'Poppins',sans-serif; font-size:.98rem; }
.mka-chat-top span { font-size:.8rem; color:var(--ink-3); }

.mka-log {
  overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px;
  scroll-behavior:smooth;
}
.mka-msg { max-width:76%; display:flex; flex-direction:column; gap:3px; }
.mka-msg .bub {
  padding:10px 13px; border-radius:14px; line-height:1.55; font-size:.93rem;
  word-wrap:break-word; overflow-wrap:anywhere; white-space:pre-wrap;
}
.mka-msg time { font-size:.7rem; color:var(--ink-3); padding:0 4px; }
.mka-msg.them { align-self:flex-start; }
.mka-msg.them .bub { background:var(--bg); border:1px solid var(--line); border-bottom-left-radius:5px; }
.mka-msg.me { align-self:flex-end; align-items:flex-end; }
.mka-msg.me .bub { background:var(--brand); color:#fff; border-bottom-right-radius:5px; }
.mka-msg.sys { align-self:center; max-width:88%; text-align:center; }
.mka-msg.sys .bub {
  background:var(--warn-soft); color:var(--warn); border:1px dashed var(--warn);
  font-size:.84rem; font-weight:600; border-radius:999px; padding:7px 15px;
}

.mka-send { display:flex; gap:9px; padding:12px; border-top:1px solid var(--line); background:var(--bg); }
.mka-send textarea {
  flex:1; resize:none; min-height:44px; max-height:130px;
  padding:11px 13px; border:1.5px solid var(--line-2); border-radius:12px;
  font-family:inherit; font-size:.93rem; background:var(--card); color:var(--ink);
}
.mka-send textarea:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }

/* --- forms ------------------------------------------------------------------ */
.mka-form { display:grid; gap:16px; }
.mka-fieldset {
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:18px; box-shadow:var(--shadow);
}
.mka-fieldset > h3 {
  font-family:'Poppins',sans-serif; font-size:1rem; margin:0 0 4px;
  display:flex; align-items:center; gap:8px;
}
.mka-fieldset > p.hint { color:var(--ink-3); font-size:.85rem; margin:0 0 16px; }
.mka-row { display:grid; gap:13px; grid-template-columns:repeat(2,1fr); }
.mka-row.three { grid-template-columns:repeat(3,1fr); }
.mka-field { display:flex; flex-direction:column; gap:5px; }
.mka-field.wide { grid-column:1/-1; }
.mka-field label { font-size:.84rem; font-weight:600; color:var(--ink-2); }
.mka-field label .req { color:var(--brand-deep); }
.mka-field input, .mka-field select, .mka-field textarea {
  padding:10px 12px; font-size:.93rem; font-family:inherit;
  border:1.5px solid var(--line-2); border-radius:10px;
  background:var(--bg); color:var(--ink); width:100%;
}
.mka-field textarea { min-height:110px; resize:vertical; line-height:1.6; }
.mka-field input:focus, .mka-field select:focus, .mka-field textarea:focus {
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft);
}
.mka-field .err { color:#b42318; font-size:.8rem; font-weight:600; }
.mka-field.has-err input, .mka-field.has-err select, .mka-field.has-err textarea {
  border-color:#b42318;
}
.mka-field .tip { color:var(--ink-3); font-size:.78rem; }

/* photo picker */
.mka-photos { display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); }
.mka-photo {
  position:relative; aspect-ratio:4/3; border-radius:11px; overflow:hidden;
  border:1px solid var(--line); background:var(--line);
}
.mka-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.mka-photo button {
  position:absolute; top:5px; right:5px; width:26px; height:26px; border-radius:50%;
  border:0; cursor:pointer; background:rgba(16,24,40,.78); color:#fff; font-size:.78rem;
}
.mka-drop {
  display:grid; place-items:center; aspect-ratio:4/3; gap:5px; cursor:pointer;
  border:2px dashed var(--line-2); border-radius:11px; color:var(--ink-3);
  background:var(--bg); font-size:.82rem; text-align:center; padding:8px;
}
.mka-drop:hover { border-color:var(--brand); color:var(--brand-deep); }
.mka-drop i { font-size:1.4rem; }

/* --- dashboard -------------------------------------------------------------- */
.mka-tabs {
  display:flex; gap:4px; overflow-x:auto; border-bottom:1px solid var(--line);
  margin-bottom:22px; scrollbar-width:none;
}
.mka-tabs::-webkit-scrollbar { display:none; }
.mka-tab {
  padding:11px 15px; text-decoration:none; color:var(--ink-2); font-weight:600;
  font-size:.9rem; white-space:nowrap; border-bottom:2.5px solid transparent;
  display:inline-flex; align-items:center; gap:7px;
}
.mka-tab:hover { color:var(--ink); }
.mka-tab.is-on { color:var(--brand-deep); border-bottom-color:var(--brand); }
.mka-badge {
  background:var(--brand); color:#fff; font-size:.68rem; font-weight:800;
  min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  display:inline-grid; place-items:center;
}

.mka-list { display:grid; gap:12px; }
.mka-item {
  display:flex; gap:13px; align-items:center; padding:13px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); text-decoration:none; color:inherit;
}
.mka-item:hover { border-color:var(--line-2); box-shadow:var(--shadow-m); }
.mka-item > img, .mka-item > .mka-none {
  width:72px; height:58px; border-radius:11px; object-fit:cover; flex:0 0 auto;
  display:grid; place-items:center; background:var(--brand-soft); color:var(--brand-deep);
  font-size:1.3rem;
}
/* The row is a grid child, and a grid child defaults to min-width:auto —
   so it refuses to shrink below the width of its contents and simply grows
   past the track. .mka-item-main already had min-width:0, which is why the
   name and meta looked fine while the whole row was 407px wide inside a
   358px list and the status chip hung off the right edge of the screen. */
.mka-item { min-width:0; }
.mka-item-main { flex:1; min-width:0; }
.mka-item-main b { display:block; font-family:'Poppins',sans-serif; font-size:.98rem; }
.mka-item-main span { display:block; color:var(--ink-2); font-size:.84rem; margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mka-item-side { display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex:0 0 auto; }
.mka-item-side time { font-size:.74rem; color:var(--ink-3); }

.mka-stats { display:grid; gap:12px; grid-template-columns:repeat(4,1fr); margin-bottom:22px; }
.mka-stat {
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:14px; box-shadow:var(--shadow);
}
.mka-stat b { display:block; font-family:'Poppins',sans-serif; font-size:1.6rem; line-height:1; }
.mka-stat span { font-size:.8rem; color:var(--ink-3); }

/* --- pager -------------------------------------------------------------------- */
.mka-pager { display:flex; gap:7px; justify-content:center; margin-top:28px; flex-wrap:wrap; }
.mka-pager a, .mka-pager span {
  min-width:38px; padding:8px 11px; text-align:center; border-radius:10px;
  text-decoration:none; font-size:.88rem; font-weight:600;
  border:1.5px solid var(--line-2); color:var(--ink-2); background:var(--card);
}
.mka-pager a:hover { border-color:var(--brand); color:var(--brand-deep); }
.mka-pager .is-on { background:var(--brand); border-color:var(--brand); color:#fff; }

/* --- modal ---------------------------------------------------------------------- */
.mka-modal {
  position:fixed; inset:0; z-index:9000; display:none;
  background:rgba(16,24,40,.55); padding:16px;
  align-items:center; justify-content:center;
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.mka-modal.is-open { display:flex; }
.mka-modal-box {
  background:var(--card); border-radius:18px; padding:22px;
  width:100%; max-width:480px; box-shadow:var(--shadow-l);
  max-height:90vh; overflow-y:auto;
}
.mka-modal-box h3 { font-family:'Poppins',sans-serif; margin:0 0 6px; font-size:1.15rem; }
.mka-modal-box p { color:var(--ink-2); font-size:.9rem; line-height:1.6; margin:0 0 16px; }
.mka-modal-box textarea, .mka-modal-box select {
  width:100%; padding:11px 13px; border:1.5px solid var(--line-2); border-radius:11px;
  font-family:inherit; font-size:.93rem; background:var(--bg); color:var(--ink);
  margin-bottom:13px;
}
.mka-modal-box textarea { min-height:110px; resize:vertical; line-height:1.6; }
.mka-modal-acts { display:flex; gap:9px; justify-content:flex-end; flex-wrap:wrap; }

/* --- the collapsible filter panel ------------------------------------------------
   Folded only where space is tight. On anything wider the <details> is forced
   open and its summary hidden, so the desktop layout is exactly as before and
   the markup does not need two versions. */
.mka-fold > summary { display:none; }
.mka-fold { display:block; }

@media (max-width:760px) {
  .mka-fold > summary {
    display:flex; align-items:center; gap:10px; cursor:pointer;
    list-style:none; padding:4px 2px; font-weight:700; font-size:.92rem;
    font-family:'Poppins',sans-serif;
  }
  .mka-fold > summary::-webkit-details-marker { display:none; }
  .mka-fold > summary > span:first-child { display:flex; align-items:center; gap:8px; }
  .mka-fold > summary i:first-child { color:var(--brand-deep); }
  .mka-fold > summary .mka-count { margin-left:auto; font-weight:600; }
  .mka-fold-x { transition:transform .18s ease; color:var(--ink-3); font-size:.78rem; }
  .mka-fold[open] .mka-fold-x { transform:rotate(180deg); }
  .mka-fold[open] .mka-fgrid { margin-top:13px; }
}

/* --- tablet -------------------------------------------------------------------- */
@media (max-width:980px) {
  .mka-pet { grid-template-columns:1fr; }
  .mka-fgrid { grid-template-columns:repeat(3,1fr); }
  .mka-stats { grid-template-columns:repeat(2,1fr); }
}

/* --- phone ------------------------------------------------------------------------
   Two things were wrong here rather than merely cramped.

   The pet's NAME did not appear until you had scrolled past a 300px photo and
   the whole description — because the two desktop columns stack left-first,
   and the name lives in the right one. On a phone that is the first thing that
   should be on screen, so the panels are reordered below.

   And the six filter fields cost about 250px before a single animal appeared.
   They now fold away.
   ------------------------------------------------------------------------------- */
@media (max-width:600px) {
  /* 16px, not 0. These elements carry both .mka-wrap and .mka-sec, and this
     shorthand was overriding the wrap's own side padding — so the pet grid
     and the filter bar ran edge to edge while the heading above them sat at
     16px. Cards were touching the screen. It also puts the chip row's
     margin:0 -16px bleed exactly on the screen edge, which is what that
     negative margin was always for. */
  .mka-sec { padding:18px 16px; }
  .mka-hero { padding:20px 0 18px; }
  .mka-h1 { font-size:1.55rem; line-height:1.16; }
  .mka-lede { font-size:.92rem; margin-bottom:16px; }
  .mka-hero-row { gap:14px; }
  .mka-hero-row > div:last-child { width:100%; }
  .mka-hero-row .mka-btn { flex:1; justify-content:center; }

  /* the species row: one line that scrolls, instead of two that wrap */
  .mka-chips {
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    margin:0 -16px 14px; padding:0 16px 2px; scroll-snap-type:x proximity;
    /* Snapping aligns to the scrollport, which ignores padding — so the
       browser scrolled the row by exactly its own 16px padding and the
       first chip sat half off the left edge. scroll-padding is the property
       that moves the snap line; padding alone never could. */
    scroll-padding-left:16px; scroll-padding-right:16px;
  }
  .mka-chips::-webkit-scrollbar { display:none; }
  .mka-chip { flex:0 0 auto; scroll-snap-align:start; padding:7px 13px; font-size:.84rem; }

  .mka-filters { padding:11px 12px; margin-bottom:16px; }
  .mka-fgrid { grid-template-columns:repeat(2,1fr); gap:9px; }
  .mka-frow { margin-top:11px; }
  .mka-count--wide { display:none; }   /* the count is already in the summary */
  .mka-frow .mka-btn { flex:1; }

  /* cards: squarer photo, one-line meta, less padding */
  .mka-grid { grid-template-columns:repeat(2,1fr); gap:11px; }
  .mka-shot { aspect-ratio:1/1; }
  .mka-body { padding:9px 10px 11px; gap:4px; }
  .mka-name { font-size:.92rem; gap:6px; }
  .mka-name i { font-size:.8rem; }
  .mka-meta {
    font-size:.76rem; line-height:1.45;
    display:-webkit-box; -webkit-line-clamp:2; line-clamp:2;
    -webkit-box-orient:vertical; overflow:hidden;
  }
  .mka-where { font-size:.72rem; padding-top:7px; }
  .mka-shot .mka-pill { font-size:.66rem; padding:3px 8px; top:7px; left:7px; }

  /* ---- one pet: name first, then photo, then the ask ---- */
  .mka-pet { display:flex; flex-direction:column; gap:14px; }
  /* display:contents dissolves the two column wrappers so their panels become
     direct children here and can be ordered individually. The wrappers carry
     no padding, border or background, so nothing is lost with the box. */
  .mka-pet > div { display:contents; }
  .mka-ident   { order:1; margin-bottom:0; }
  .mka-gallery { order:2; }
  .mka-act     { order:3; margin-bottom:0; }
  .mka-about   { order:4; margin-top:0 !important; margin-bottom:0; }
  .mka-qr      { order:5; margin-bottom:0; }
  .mka-report  { order:6; }

  .mka-panel { padding:15px; }
  .mka-facts { grid-template-columns:repeat(2,1fr); gap:8px; }
  .mka-fact { padding:8px 10px; }
  .mka-fact b { font-size:.64rem; }
  .mka-fact span { font-size:.86rem; }
  .mka-main-shot { aspect-ratio:1/1; }
  .mka-thumbs button { width:58px; height:46px; }
  .mka-qr canvas, .mka-qr img { width:150px; height:150px; }
  .mka-qr p { font-size:.78rem; }

  .mka-row, .mka-row.three { grid-template-columns:1fr; }
  .mka-fieldset { padding:15px; }

  /* The chat is sized from the viewport, so it has to account for the site's
     own fixed tab bar itself — body's padding-bottom only holds back scrolling
     content, not something measured in dvh. At 100dvh-215px the message box
     ended 55px *behind* the tab bar, which is exactly the part you need to
     reach. 300px leaves roughly 30px of daylight below it at any screen
     height, because both ends scale with dvh together. */
  .mka-chat {
    height:calc(100dvh - 300px); min-height:340px;
    border-radius:12px; margin-bottom:14px;
  }
  .mka-msg { max-width:86%; }
  .mka-log { padding:13px; gap:9px; }

  .mka-stats { grid-template-columns:repeat(2,1fr); gap:9px; }
  .mka-stat { padding:11px; }
  .mka-stat b { font-size:1.35rem; }
  .mka-item { padding:11px; gap:11px; }
  .mka-item > img, .mka-item > .mka-none { width:56px; height:48px; }
  .mka-tab { padding:10px 12px; font-size:.85rem; }
}

/* --- the docked ask, on a phone ----------------------------------------------------
   Sits above the site's own tab bar (64px plus an 8px gap), never over it, and
   only once the real button has scrolled away — two identical buttons on screen
   at once reads as a mistake rather than a convenience. */
.mka-dock { display:none; }

@media (max-width:600px) {
  .mka-dock {
    position:fixed; left:12px; right:12px; bottom:80px; z-index:60;
    display:flex; gap:10px; align-items:center;
    padding:9px 10px 9px 14px;
    background:var(--card); border:1px solid var(--line-2); border-radius:15px;
    box-shadow:0 10px 28px -8px rgba(16,24,40,.4);
    transform:translateY(150%); opacity:0; pointer-events:none;
    transition:transform .26s cubic-bezier(.22,1.2,.36,1), opacity .2s ease;
  }
  .mka-dock.is-on { transform:translateY(0); opacity:1; pointer-events:auto; }
  .mka-dock-txt { flex:1 1 auto; min-width:0; line-height:1.25; }
  .mka-dock-txt b {
    display:block; font-family:'Poppins',sans-serif; font-size:.9rem;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .mka-dock-txt span { font-size:.72rem; color:var(--ink-3); }
  .mka-dock .mka-btn { flex:0 0 auto; padding:10px 15px; font-size:.9rem; border-radius:11px; }
}

@media (prefers-reduced-motion:reduce) {
  .mka *,.mka *::before,.mka *::after { transition:none !important; }
  .mka-log { scroll-behavior:auto; }
}

/* --- choosing what a new pet record is for ---------------------------------
   Two cards rather than a dropdown. The difference between "anyone looking
   for a pet will see this" and "nobody will" is the most consequential thing
   on the form, and a <select> makes it look like a formatting preference. */
.mka-purpose__opts { display:grid; gap:11px; grid-template-columns:repeat(2,1fr); }

.mka-purpose__opt {
  display:flex; gap:12px; align-items:flex-start; cursor:pointer;
  padding:15px; border:2px solid var(--line-2); border-radius:14px;
  background:var(--bg); transition:border-color .14s ease, background .14s ease;
}
.mka-purpose__opt:hover { border-color:var(--brand-2); }
.mka-purpose__opt.is-on { border-color:var(--brand); background:var(--brand-soft); }
.mka-purpose__opt input { width:auto; margin-top:3px; flex:0 0 auto; accent-color:var(--brand); }

.mka-purpose__ic {
  width:38px; height:38px; flex:0 0 auto;
  display:grid; place-items:center; border-radius:11px;
  background:var(--card); border:1.5px solid var(--line-2);
  color:var(--brand-deep); font-size:1rem;
}
.mka-purpose__opt.is-on .mka-purpose__ic { background:var(--brand); border-color:var(--brand); color:#fff; }

.mka-purpose__opt b { display:block; font-family:'Poppins',sans-serif; font-size:.95rem; margin-bottom:3px; }
.mka-purpose__opt small { display:block; color:var(--ink-2); font-size:.82rem; line-height:1.5; }

@media (max-width:600px) {
  .mka-purpose__opts { grid-template-columns:1fr; }
}

/* ===========================================================================
   A PET ID CARD  ·  .mkv
   ---------------------------------------------------------------------------
   Deliberately not the adoption look.

   Everything else in this file is warm cream and orange, soft corners, big
   photographs — the language of persuading somebody to take an animal home.
   This page is the opposite errand: it is somebody's own pet, and it exists
   for the ninety seconds after the gate was left open. So it borrows from
   documents rather than adverts — a dark banded header, an ID number set in
   a monospace face, a torn perforation across the middle, and the QR printed
   into the card rather than offered in a panel below it.

   The point of making it look different is not novelty. A person who has
   both an adoption listing and a pet page should never have to read the
   heading to know which one they are looking at.
   =========================================================================== */

.mkv { display:grid; gap:18px; max-width:860px; margin:0 auto; }

/* ---- the card ---- */
.mkv-card {
  background:var(--card);
  border:1px solid var(--line-2);
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow-l);
}

.mkv-card__band {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 18px;
  background:var(--ink);
  color:#fff;
}
.mkv-card__kind {
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Poppins',sans-serif; font-weight:700;
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
}
.mkv-card__kind i { color:var(--brand-2); }
/* A monospace serial. It is the one thing on the page that should look
   machine-issued rather than written. */
.mkv-card__no {
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:.78rem; letter-spacing:.14em;
  color:rgba(255,255,255,.72);
}

.mkv-card__body {
  display:grid;
  grid-template-columns:132px minmax(0,1fr) auto;
  gap:20px;
  padding:20px;
  align-items:center;
}

.mkv-card__photo {
  width:132px; height:132px;
  border-radius:16px; overflow:hidden;
  background:var(--brand-soft);
  border:1px solid var(--line);
}
.mkv-card__photo img { width:100%; height:100%; object-fit:cover; display:block; }
.mkv-none { width:100%; height:100%; display:grid; place-items:center;
  font-size:2.6rem; color:var(--brand); }

.mkv-card__who h1 {
  font-family:'Poppins',sans-serif; font-weight:700;
  font-size:clamp(1.6rem,4vw,2.1rem); line-height:1.1;
  letter-spacing:-.025em; margin:0 0 4px;
}
.mkv-card__sub { color:var(--ink-2); margin:0 0 12px; font-size:.95rem; }

.mkv-chips { display:flex; flex-wrap:wrap; gap:7px; list-style:none; margin:0; padding:0; }
.mkv-chips li {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:8px;
  background:var(--bg); border:1px solid var(--line);
  font-size:.78rem; font-weight:600; color:var(--ink-2);
}
.mkv-chips i { font-size:.72rem; color:var(--ink-3); }
/* Green only where the answer is the reassuring one. A grey "not sure" next
   to a green "vaccinated" says more than five words would. */
.mkv-chips li.is-yes {
  background:var(--ok-soft); border-color:var(--ok); color:var(--ok);
}
.mkv-chips li.is-yes i { color:var(--ok); }

.mkv-card__qr { text-align:center; flex:0 0 auto; }
.mkv-card__qr canvas {
  width:132px; height:132px; display:block;
  background:#fff; padding:7px; border-radius:12px;
  border:1px solid var(--line-2);
}
.mkv-card__qr b {
  display:block; font-family:'Poppins',sans-serif;
  font-size:.8rem; margin-top:8px;
}
.mkv-card__qr small { display:block; font-size:.7rem; color:var(--ink-3); }

/* The perforation. Two half-circles bitten out of the edges with a dashed
   line between them, so the card reads as something you tear off. */
.mkv-card__rip { position:relative; height:16px; }
.mkv-card__rip::before {
  content:""; position:absolute; left:16px; right:16px; top:50%;
  border-top:2px dashed var(--line-2);
}
.mkv-card__rip span {
  position:absolute; top:50%; width:16px; height:16px;
  transform:translateY(-50%); border-radius:50%;
  background:var(--bg); border:1px solid var(--line-2);
}
.mkv-card__rip span:first-child { left:-8px; }
.mkv-card__rip span:last-child  { right:-8px; }

.mkv-card__foot {
  display:flex; flex-wrap:wrap; gap:8px 22px;
  padding:13px 20px 16px;
  font-size:.84rem; color:var(--ink-2);
}
.mkv-card__foot i { color:var(--ink-3); margin-right:6px; }

/* ---- the found band ---- */
.mkv-found {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:16px; align-items:center;
  padding:18px;
  border-radius:16px;
  background:linear-gradient(135deg, var(--brand-soft), var(--card));
  border:1.5px solid var(--brand);
}
.mkv-found.is-owner {
  background:var(--card);
  border:1px solid var(--line-2);
  border-left:4px solid var(--ok);
  grid-template-columns:auto minmax(0,1fr);
}
.mkv-found__ic {
  width:46px; height:46px; flex:0 0 auto;
  display:grid; place-items:center; border-radius:13px;
  background:var(--brand); color:#fff; font-size:1.15rem;
}
.mkv-found.is-owner .mkv-found__ic { background:var(--ok-soft); color:var(--ok); }
.mkv-found__txt strong {
  display:block; font-family:'Poppins',sans-serif; font-size:1.02rem; margin-bottom:3px;
}
.mkv-found__txt p { margin:0; color:var(--ink-2); font-size:.89rem; line-height:1.6; }

/* ---- the detail ---- */
.mkv-grid { display:grid; gap:14px; grid-template-columns:repeat(2,1fr); }
.mkv-panel {
  background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:17px;
}
.mkv-panel--wide { grid-column:1/-1; }
/* The medical panel is the one a vet or a finder reads first. */
.mkv-panel--med { border-left:4px solid var(--ok); }
.mkv-panel h2 {
  display:flex; align-items:center; gap:9px;
  font-family:'Poppins',sans-serif; font-size:.95rem; margin:0 0 10px;
}
.mkv-panel h2 i { color:var(--ink-3); font-size:.88rem; }
.mkv-panel--med h2 i { color:var(--ok); }
.mkv-prose { color:var(--ink-2); line-height:1.7; font-size:.92rem; white-space:pre-wrap; }

.mkv-thumbs { display:flex; gap:8px; flex-wrap:wrap; }
.mkv-thumbs button {
  width:84px; height:66px; padding:0; border-radius:10px; overflow:hidden;
  border:2px solid transparent; background:var(--line); cursor:pointer;
}
.mkv-thumbs button.is-on { border-color:var(--brand); }
.mkv-thumbs img { width:100%; height:100%; object-fit:cover; display:block; }

/* ---- the tools ---- */
.mkv-tools { display:grid; gap:14px; }
.mkv-tools__row { display:flex; gap:9px; flex-wrap:wrap; }

.mkv-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Poppins',sans-serif; font-weight:600; font-size:.9rem;
  padding:11px 16px; border-radius:11px; cursor:pointer; text-decoration:none;
  border:1.5px solid var(--line-2); background:var(--card); color:var(--ink);
  transition:transform .12s ease, box-shadow .12s ease;
}
.mkv-btn:hover { transform:translateY(-1px); box-shadow:var(--shadow-m); }
.mkv-btn--go { background:var(--brand); border-color:var(--brand); color:#fff; }
.mkv-btn--go:hover { background:var(--brand-2); }
.mkv-btn--quiet { border-color:transparent; color:var(--ink-3); }

.mkv-tools__status {
  background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:15px;
}
.mkv-tools__status label {
  display:block; font-size:.78rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:7px;
}
.mkv-tools__status select {
  width:100%; padding:10px 12px; font-family:inherit; font-size:.92rem;
  border:1.5px solid var(--line-2); border-radius:10px;
  background:var(--bg); color:var(--ink);
}
.mkv-tools__status small {
  display:block; margin-top:8px; font-size:.78rem; color:var(--ink-3); line-height:1.55;
}

/* ---- tablet ---- */
@media (max-width:860px) {
  .mkv-card__body { grid-template-columns:106px minmax(0,1fr); }
  .mkv-card__qr {
    grid-column:1/-1;
    display:flex; align-items:center; gap:14px; text-align:left;
    padding-top:4px; border-top:1px dashed var(--line-2);
  }
  .mkv-card__qr canvas { width:104px; height:104px; }
  .mkv-card__photo { width:106px; height:106px; }
  .mkv-grid { grid-template-columns:1fr; }
  .mkv-found { grid-template-columns:auto minmax(0,1fr); }
  .mkv-found .mkv-btn { grid-column:1/-1; }
}

/* ---- phone ---- */
@media (max-width:600px) {
  .mkv { gap:13px; }
  .mkv-card__band { padding:9px 14px; }
  .mkv-card__no { font-size:.68rem; letter-spacing:.1em; }
  .mkv-card__body { padding:15px; gap:14px; grid-template-columns:88px minmax(0,1fr); }
  .mkv-card__photo { width:88px; height:88px; border-radius:13px; }
  .mkv-card__who h1 { font-size:1.45rem; }
  .mkv-card__sub { font-size:.86rem; margin-bottom:9px; }
  .mkv-chips li { font-size:.72rem; padding:4px 8px; }
  .mkv-card__qr canvas { width:92px; height:92px; }
  .mkv-card__foot { padding:11px 15px 14px; font-size:.78rem; gap:5px 16px; }
  .mkv-found { padding:14px; gap:12px; }
  .mkv-found__ic { width:40px; height:40px; font-size:1rem; }
  .mkv-found__txt p { font-size:.84rem; }
  .mkv-tools__row .mkv-btn { flex:1 1 44%; }
  .mkv-thumbs button { width:70px; height:56px; }
}

/* ---- printing the tag ------------------------------------------------------
   The whole reason the card is a card. Everything that is not it comes off
   the page, the colours flatten to something a cheap printer will not ruin,
   and the QR is forced to render — browsers drop background images when
   printing, and a tag without its code is a piece of paper. */
@media print {
  body * { visibility:hidden !important; }
  .mkv-card, .mkv-card * { visibility:visible !important; }
  .mkv-card {
    position:absolute; left:0; top:0; width:100%;
    box-shadow:none !important;
    border:1.5px solid #000 !important;
    border-radius:12px !important;
  }
  .mkv-card__band {
    background:#111 !important;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  .mkv-card__qr canvas { border:1px solid #999 !important; }
  .mkv-chips li { border:1px solid #bbb !important; background:#fff !important; color:#222 !important; }
  .mkv-card__rip::before { border-top-color:#999 !important; }
}

/* --- the folded form, phones only -------------------------------------------
   Built by the script at the foot of adopt_post.php. Scoped to the same width
   that script checks, so a desktop never sees a half-applied version of it if
   the two ever disagree. */
@media (max-width:768px) {

  /* ---- the progress header ----
     Sticky, because it used to scroll away immediately and on a seven
     section form the one thing telling you how much was left was the first
     thing to disappear. 56px is the site header's own height. */
  .mka-fold__bar {
    position:relative; z-index:30;
    display:flex; align-items:center; gap:12px;
    margin:0 0 14px; padding:11px 14px;
    border-radius:16px;
    background:var(--card);
    border:1px solid var(--line);
    box-shadow:0 8px 22px -14px rgba(16,24,40,.4);
    overflow:hidden;
  }

  /* The ring is one conic-gradient driven by --pct, so there is no SVG and
     nothing to keep in sync with the number inside it. */
  .mka-fold__ring {
    --pct:0;
    position:relative; flex:0 0 auto;
    width:40px; height:40px; border-radius:50%;
    display:grid; place-items:center;
    background:conic-gradient(var(--brand) calc(var(--pct) * 1%), var(--line) 0);
    transition:background .35s cubic-bezier(.2,.8,.3,1);
  }
  .mka-fold__ring::after {
    content:''; position:absolute; inset:3px;
    border-radius:50%; background:var(--card);
  }
  .mka-fold__pct {
    position:relative; z-index:1;
    font-family:'Poppins',sans-serif; font-size:.72rem; font-weight:800;
    color:var(--ink);
  }
  .mka-fold__pct::after { content:'%'; font-size:.62em; opacity:.6; }

  .mka-fold__bar .mka-fold__txt { min-width:0; }
  .mka-fold__count {
    display:block;
    font-family:'Poppins',sans-serif; font-size:.92rem; font-weight:700;
    letter-spacing:-.01em;
  }
  .mka-fold__sub {
    display:block; margin-top:1px;
    font-size:.74rem; color:var(--ink-3);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }

  /* a hairline along the bottom edge, not a tint behind the text */
  .mka-fold__fill {
    position:absolute; left:0; bottom:0; width:0; height:3px;
    background:linear-gradient(90deg, var(--brand-2), var(--brand));
    border-radius:0 3px 3px 0;
    transition:width .35s cubic-bezier(.2,.8,.3,1);
  }
  /* Pinned to the top once it has scrolled away. See the note in
     adopt_post.php for why this is not position:sticky. */
  .mka-fold__bar.is-stuck {
    position:fixed; top:8px; left:12px; right:12px;
    margin:0;
    box-shadow:0 10px 30px -12px rgba(16,24,40,.45);
    animation:mka-bar-in .22s ease both;
  }
  @keyframes mka-bar-in { from { transform:translateY(-10px); opacity:0; } }

  .mka-fold__bar.is-all { border-color:var(--ok); }
  .mka-fold__bar.is-all .mka-fold__ring { background:var(--ok); }
  .mka-fold__bar.is-all .mka-fold__fill { background:var(--ok); }
  .mka-fold__bar.is-all .mka-fold__count { color:var(--ok); }

  /* ---- the sections ---- */
  .mka-form { display:flex; flex-direction:column; gap:10px; }
  .mka-fieldset.is-fold {
    padding:0; overflow:hidden;
    margin:0;
    border-radius:16px !important;
    border-color:var(--line) !important;
    transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  }
  .mka-fieldset.is-fold.is-open {
    border-color:var(--brand) !important;
    box-shadow:0 10px 26px -16px rgba(255,107,53,.75);
  }

  .mka-fieldset.is-fold > h3 {
    display:flex; align-items:center; gap:12px;
    margin:0; padding:13px 14px;
    cursor:pointer; user-select:none;
    -webkit-tap-highlight-color:transparent;
    font-size:1rem;
  }
  .mka-fieldset.is-fold > h3:focus-visible {
    outline:3px solid var(--brand); outline-offset:-3px; border-radius:16px;
  }
  .mka-fieldset.is-fold > h3:active { background:var(--bg); }

  /* The badge carries the section's own icon, and becomes a green tick when
     the section is finished — the state lands where the eye already is,
     instead of in a separate grey circle at the far end of the row. */
  .mka-fold__badge {
    position:relative; flex:0 0 auto;
    width:38px; height:38px; border-radius:12px;
    display:grid; place-items:center;
    background:var(--bg);
    font-size:.95rem;
    transition:background .2s ease;
  }
  .mka-fold__badge > i { grid-area:1/1; transition:opacity .18s ease, transform .18s ease; }
  .mka-fold__done { opacity:0; transform:scale(.5); color:#fff; }

  .mka-fieldset.is-open .mka-fold__badge { background:var(--brand-soft); }

  .mka-fieldset.is-done .mka-fold__badge { background:var(--ok); }
  .mka-fieldset.is-done .mka-fold__badge > i:first-child { opacity:0; transform:scale(.5); }
  .mka-fieldset.is-done .mka-fold__done { opacity:1; transform:scale(1); }

  .mka-fieldset.is-fold > h3 > .mka-fold__txt { min-width:0; flex:1 1 auto; }
  .mka-fold__txt > b {
    display:block;
    font-family:'Poppins',sans-serif; font-weight:700; font-size:.96rem;
    letter-spacing:-.01em; line-height:1.25;
  }
  .mka-fold__txt > small {
    display:block; margin-top:2px;
    font-size:.76rem; font-weight:400; color:var(--ink-3);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  /* Once a section is open its own fields say what it is about, so the
     summary line is noise sitting above them. */
  .mka-fieldset.is-open .mka-fold__txt > small { display:none; }

  .mka-fold__chev {
    flex:0 0 auto; color:var(--ink-3); font-size:.8rem;
    transition:transform .25s cubic-bezier(.2,.8,.3,1);
  }
  .mka-fieldset.is-open .mka-fold__chev { transform:rotate(180deg); color:var(--brand); }

  .mka-fold__body { display:none; padding:2px 14px 16px; }
  .mka-fieldset.is-open .mka-fold__body { display:block; animation:mka-fold-in .28s ease both; }
  @keyframes mka-fold-in { from { opacity:0; transform:translateY(-6px); } }
  .mka-fold__body > p.hint { margin-top:0; }

  /* ---- the save bar ----
     Fixed above the site's own tab bar, which is 64px tall and 8px off the
     bottom at z-index 900. Without this the primary action sat at the end of
     a very long scroll and the tab bar covered it. */
  .mka-form > div:last-child {
    position:fixed; left:0; right:0; bottom:0; z-index:40;
    display:flex !important; gap:10px;
    margin:0; padding:10px 14px calc(80px + env(safe-area-inset-bottom));
    background:linear-gradient(to top, var(--bg) 72%, transparent);
    pointer-events:none;
  }
  .mka-form > div:last-child > * { pointer-events:auto; }
  .mka-form > div:last-child .mka-btn {
    flex:1 1 auto; justify-content:center;
    min-height:52px; border-radius:14px;
    font-size:1rem;
  }
  .mka-form > div:last-child .mka-btn--ghost { flex:0 0 32%; }
  .mka-form > div:last-child .mka-btn--go {
    box-shadow:0 10px 24px -10px rgba(255,107,53,.8);
  }
  /* Room for it, so the last section is never hidden underneath.

     Scoped to the body class the form sets. Unscoped, this put 150px of
     dead space at the bottom of every .mka-sec page on a phone — the browse
     page had a blank screen-and-a-half between the last pet and the footer,
     on a page with no save bar to make room for. */
  body.mka-has-formbar .mka-sec { padding-bottom:150px; }

  /* Lift the sound notice above the save bar. 80px of padding plus a 52px
     button puts the button's top edge at 132px, so the notice clears it at
     146px. Two class levels, so it beats the (0,1,0) rule in footer.php
     wherever that <style> block happens to sit in the document. */
  body.mka-has-formbar .mkz-sfx-note {
    bottom:calc(146px + env(safe-area-inset-bottom,0px));
  }

  /* ---- the heading above it all ----
     Four lines of explanation before the first question is four lines
     nobody reads on a phone. */
  .mka-h1 { font-size:1.6rem; line-height:1.15; }
  .mka-lede { font-size:.88rem; line-height:1.55; }
}

/* --- one pet, on a phone -----------------------------------------------------
   The listing page was leading with a six-cell table of TYPE / GENDER / SIZE /
   COLOUR / VACCINATION / NEUTERED — 389px of spec sheet before you had seen
   the animal. Nobody decides to meet a dog from its attributes.

   So on a phone the photograph leads, with the name and status printed on it,
   and the facts follow as chips rather than a grid of boxes. The QR folds
   away: on a pet's own ID card the code is the page, but on an advert it is
   a way to share a link, and it was taking the space between the description
   and the bottom of the screen to say so.
   --------------------------------------------------------------------------- */
@media (max-width:600px) {

  /* photo first, then who they are, then the ask */
  .mka-gallery { order:1; }
  .mka-ident   { order:2; }
  .mka-act     { order:3; }
  .mka-about   { order:4; }
  .mka-qr      { order:5; }
  .mka-report  { order:6; }

  /* the photograph carries the name */
  .mka-main-shot { position:relative; aspect-ratio:4/3; border-radius:14px; }
  .mka-shotcap {
    display:block;
    position:absolute; left:0; right:0; bottom:0;
    padding:40px 14px 13px;
    color:#fff;
    background:linear-gradient(to top,
      rgba(16,24,40,.86) 0%, rgba(16,24,40,.5) 45%, transparent 100%);
    border-radius:0 0 14px 14px;
  }
  .mka-shotcap .mka-pill { margin-bottom:7px; }
  .mka-shotcap b {
    display:block;
    font-family:'Poppins',sans-serif; font-weight:700;
    font-size:1.5rem; line-height:1.12; letter-spacing:-.02em;
    text-shadow:0 1px 10px rgba(0,0,0,.45);
  }
  .mka-shotcap small {
    display:block; font-size:.84rem; margin-top:3px;
    color:rgba(255,255,255,.88);
  }

  /* ...so the panel below it does not repeat the headline */
  .mka-ident { padding-top:13px; }
  .mka-ident__head { display:none; }

  /* facts as a line of chips rather than six boxes */
  .mka-facts { display:flex; flex-wrap:wrap; gap:7px; }
  .mka-fact {
    display:inline-flex; align-items:baseline; gap:6px;
    padding:6px 11px; border-radius:999px;
    background:var(--bg); border:1px solid var(--line);
  }
  .mka-fact b {
    display:inline; margin:0;
    font-size:.68rem; letter-spacing:.04em; text-transform:uppercase;
    color:var(--ink-3);
  }
  .mka-fact span { font-size:.84rem; }
  /* "Where" is the one that needs its own line — an address does not fit in
     a pill next to five other pills. */
  .mka-fact:last-child { flex:1 1 100%; border-radius:11px; }

  /* the folded QR */
  .mka-qr--fold { padding:0; }
  .mka-qr--fold > summary {
    display:flex; align-items:center; gap:10px;
    padding:14px 15px; cursor:pointer; list-style:none;
    font-family:'Poppins',sans-serif; font-weight:700; font-size:.94rem;
  }
  .mka-qr--fold > summary::-webkit-details-marker { display:none; }
  .mka-qr--fold > summary > i:first-child { color:var(--grape); }
  .mka-qr__chev { margin-left:auto; color:var(--ink-3); font-size:.74rem; transition:transform .18s ease; }
  .mka-qr--fold[open] .mka-qr__chev { transform:rotate(180deg); }
  .mka-qr--fold > :not(summary) { padding-inline:15px; }
  .mka-qr--fold > :last-child { padding-bottom:16px; }
  .mka-qr__h { display:none; }           /* the summary already says it */
}

/* Above phone width the QR is an ordinary panel again: <details> without the
   fold, always open, no summary. */
@media (min-width:601px) {
  .mka-qr--fold > summary { display:none; }
  .mka-qr--fold { display:block; }
}

/* ===========================================================================
   Who has scanned the tag                                 owner only
   ===========================================================================
   The bell notification is capped at 500 characters by its column, so a long
   message from a finder arrives there cut short. This is where the whole of
   it lives, with the map pin and the contact detail the owner may want hours
   later, once the notification has been swiped away. */
.mka-seen { border-left:3px solid #d92d20; }
.mka-seen h3 { display:flex; align-items:center; gap:8px; }
.mka-seen__n {
  margin-left:auto;
  min-width:22px; padding:2px 7px; border-radius:999px;
  background:#fef3f2; color:#b42318;
  font-size:.72rem; font-weight:700; text-align:center;
}
.mka-seen__list { list-style:none; margin:0; padding:0; }
.mka-seen__list li {
  padding:12px 0;
  border-top:1px solid var(--line);
}
.mka-seen__list li:first-child { border-top:0; padding-top:4px; }
.mka-seen__list time {
  display:block; margin-bottom:3px;
  font-size:.72rem; font-weight:700; color:var(--ink-3);
  text-transform:uppercase; letter-spacing:.05em;
}
.mka-seen__list b { display:block; font-size:.92rem; margin-bottom:4px; }
.mka-seen__list p {
  margin:0 0 9px;
  font-size:.88rem; line-height:1.6; color:var(--ink-2);
  white-space:pre-line;          /* a finder types in short lines; keep them */
  overflow-wrap:anywhere;
}
.mka-seen__acts { display:flex; flex-wrap:wrap; gap:8px; }
.mka-seen__c {
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 11px; border-radius:9px;
  background:var(--bg); color:var(--ink-2);
  font-size:.82rem; font-weight:600;
}

/* scan history additions */
.mka-seen__sum {
  margin:-4px 0 12px;
  font-size:.78rem; color:var(--ink-3);
}
.mka-seen__list time span {
  text-transform:none; letter-spacing:0; font-weight:400;
  color:var(--ink-3); opacity:.8; margin-left:6px;
}
.mka-seen__list li.has-msg { background:linear-gradient(90deg,rgba(217,45,32,.04),transparent); }
.mka-seen__plain {
  margin:0 !important;
  display:flex; align-items:center; gap:8px;
  font-size:.86rem; color:var(--ink-3) !important;
}
.mka-seen__plain i { opacity:.7; }
.mka-seen__via {
  margin:9px 0 0 !important;
  display:flex; flex-wrap:wrap; gap:6px 12px;
  font-size:.74rem !important;
}
.mka-seen__via span { display:inline-flex; align-items:center; gap:5px; font-weight:600; }
.mka-seen__via .is-ok { color:#067647; }
.mka-seen__via .is-no { color:#b54708; }

/* ===========================================================================
   The three cards above the form                        adopt_post.php
   ===========================================================================
   A swipeable row on a phone, three across on anything wider. Same markup
   both ways — a carousel you have to swipe through to read everything is
   worse than three things you can see at once, so it is only a carousel
   where there is genuinely no room. */
.mka-slider { margin:0 0 18px; }

.mka-slider__track {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
}

.mka-slide {
  display:flex; flex-direction:column; align-items:flex-start;
  padding:16px;
  border-radius:16px;
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.mka-slide__ico {
  display:grid; place-items:center;
  width:40px; height:40px; margin-bottom:11px;
  border-radius:12px;
  background:var(--brand-soft); color:var(--brand-deep);
  font-size:1.05rem;
}
.mka-slide b {
  font-family:'Poppins',sans-serif; font-weight:700; font-size:1rem;
  letter-spacing:-.01em; margin-bottom:5px;
}
.mka-slide p {
  margin:0;
  font-size:.86rem; line-height:1.55; color:var(--ink-2);
}

/* Each card gets its own tint, so the three read as three things rather
   than one block repeated. */
.mka-slide:nth-child(2) .mka-slide__ico { background:var(--sky-soft);   color:var(--sky); }
.mka-slide:nth-child(3) .mka-slide__ico { background:var(--ok-soft);    color:var(--ok); }

.mka-slider__dots { display:none; }

@media (max-width:768px) {
  .mka-slider { margin:0 -14px 16px; }      /* bleed to the screen edges */

  .mka-slider__track {
    display:flex;
    gap:10px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding:2px 14px 6px;
    scrollbar-width:none;
  }
  .mka-slider__track::-webkit-scrollbar { display:none; }

  .mka-slide {
    flex:0 0 78%;                 /* the next card peeks, so it reads as a row */
    scroll-snap-align:center;
    padding:15px;
  }
  .mka-slide p { font-size:.84rem; }

  .mka-slider__dots {
    display:flex; justify-content:center; gap:6px;
    margin-top:2px;
  }
  .mka-slider__dots span {
    width:6px; height:6px; border-radius:50%;
    background:var(--line-2);
    transition:width .25s ease, background .25s ease;
  }
  .mka-slider__dots span.is-on { width:18px; border-radius:99px; background:var(--brand); }
}

/* "List a pet — free" wrapped onto two lines on a phone, breaking after the
   em dash so the button read "List a pet —" / "free". The price is worth
   saying where it fits and not worth a broken button where it does not. */
@media (max-width:420px) {
  .mka-btn__opt { display:none; }
}

/* The same gutter through tablet widths.

   .mka-sec's shorthand zeroes the side padding its .mka-wrap partner sets,
   so from 601px up the pet grid and the filter bar ran to the screen edges
   while the heading above them stayed at 16px. Fixed for phones in the
   600px block; this carries it to 768px, where a grid touching the bezel is
   just as wrong.

   Deliberately stops at 768px. Above that .mka-wrap is centred with a
   max-width and the inconsistency is cosmetic rather than content-against-
   the-glass, and changing it would move desktop layout that was not asked
   about. */
@media (min-width:601px) and (max-width:768px) {
  .mka-sec { padding-left:16px; padding-right:16px; }
}