/* ==========================================================================
   LOST-PET SHEET  ·  styles lost_sheet.php

   Self-contained on purpose. It is included by index.php outside both home
   blocks and shown at every width, so it cannot borrow home-mobile.css's
   tokens: those are declared on .mkm, inside @media (max-width: 991px), and a
   custom property set on an ancestor the element does not have resolves to
   nothing — which is how a sticky bar on the tag page once computed
   `bottom: auto` and fell down the document.

   Prefix: .mks
   ========================================================================== */

/* While a sheet is up. On <html> because home-mobile.css pins body's overflow
   visible with !important to keep the sticky header working, and because the
   install banner (z-index 12500, fixed to the bottom of the screen) lands
   exactly where this puts its content. */
html.mks-open { overflow: hidden; }
html.mks-open .install-prompt { display: none !important; }

.mks {
  --ink:   #1a1512;
  --ink-2: #5b5048;
  --ink-3: #8b7f75;
  --line:  #ecdfd4;
  --bg:    #fdf8f4;
  --brand: #ff6b35;
  --alarm: #b42318;
  --ease:  cubic-bezier(.22, 1, .36, 1);

  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: flex-end; justify-content: center;
  font-family: Poppins, Inter, system-ui, -apple-system, sans-serif;
}
.mks[hidden] { display: none; }

.mks__bg {
  position: absolute; inset: 0; background: rgba(15, 23, 32, .58);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}

.mks__card {
  position: relative; width: 100%; max-width: 520px;
  box-sizing: border-box;
  background: #fff; color: var(--ink);
  border-radius: 22px 22px 0 0;
  padding: 20px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  max-height: 88svh; overflow-y: auto;
  box-shadow: 0 -12px 40px -14px rgba(15, 23, 32, .55);
  animation: mks-up .2s var(--ease);
}
@keyframes mks-up { from { transform: translateY(18px); opacity: 0; } }

.mks__h {
  margin: 0 0 14px;
  font-size: 19px; font-weight: 800; line-height: 1.2;
  letter-spacing: -.02em; color: var(--ink);
}

/* ---- which one ---------------------------------------------------------- */
.mks__list { display: grid; gap: 8px; margin-bottom: 14px; }
.mks__pet {
  display: flex; align-items: center; gap: 12px; width: 100%;
  box-sizing: border-box; min-height: 60px; padding: 9px 12px;
  border: 1.5px solid var(--line); border-radius: 14px;
  background: #fff; color: var(--ink); cursor: pointer; text-align: left;
  font-family: inherit;
  transition: border-color .14s var(--ease), background .14s var(--ease);
}
.mks__pet:hover  { border-color: var(--brand); }
.mks__pet:active { background: var(--bg); }
.mks__nm {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 15px; font-weight: 700; line-height: 1.2;
}
.mks__pet > i { flex: 0 0 auto; color: var(--ink-3); font-size: .8rem; }
.mks__face {
  flex: 0 0 42px; width: 42px; height: 42px; border-radius: 12px;
  overflow: hidden; display: grid; place-items: center;
  background: hsl(var(--hue, 20) 70% 93%);
  color: hsl(var(--hue, 20) 55% 38%);
  font-size: 17px; font-weight: 800; line-height: 1;
}
.mks__face img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- what will happen, before it happens -------------------------------- */
.mks__what { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 9px; }
.mks__what li {
  display: flex; align-items: flex-start; gap: 10px; min-width: 0;
  font-size: 13.5px; line-height: 1.45; color: var(--ink-2);
}
.mks__what i {
  flex: 0 0 18px; margin-top: 2px; text-align: center;
  color: var(--alarm); font-size: .82rem;
}
.mks__undo { margin: 0 0 12px; font-size: 12px; line-height: 1.45; color: var(--ink-3); }
.mks__msg  { margin: 0 0 10px; min-height: 1.2em; font-size: 13px; color: var(--alarm); }

/* ---- the two buttons ---------------------------------------------------- */
.mks__go {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; box-sizing: border-box; min-height: 54px; padding: 14px 18px;
  border: 0; border-radius: 14px; cursor: pointer; text-decoration: none;
  background: var(--alarm); color: #fff;
  font-family: inherit; font-size: 15px; font-weight: 800; line-height: 1;
  box-shadow: 0 12px 24px -12px rgba(180, 35, 24, .85);
}
.mks__go:disabled { opacity: .75; cursor: default; }
.mks__cancel {
  display: block; width: 100%; min-height: 48px; margin-top: 8px;
  border: 0; background: none; cursor: pointer; color: var(--ink-2);
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1;
}

/* ---- done --------------------------------------------------------------- */
.mks__step[data-step="done"] { text-align: center; }
.mks__tick {
  width: 58px; height: 58px; border-radius: 50%; margin: 4px auto 12px;
  display: grid; place-items: center;
  background: #e7f7ee; color: #067647; font-size: 1.5rem;
}
.mks__say { margin: 0 0 16px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.mks__step[data-step="done"] .mks__go {
  background: var(--brand); box-shadow: 0 12px 24px -12px rgba(255, 107, 53, .85);
}

/* A sheet is a phone shape. Anywhere with room, it is a dialog in the middle
   of the screen instead. */
@media (min-width: 620px) {
  .mks { align-items: center; }
  .mks__card {
    border-radius: 22px;
    padding: 24px 22px;
    max-height: 86svh;
    box-shadow: 0 30px 70px -24px rgba(15, 23, 32, .6);
  }
  .mks__h { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .mks__card { animation: none; }
}