/* lost-found.html only.
   Shared rules (tokens, base, layout, nav, footer, i18n-zh) are linked
   separately and must not be redeclared here. */

/* ── NAV ──
   Everything else comes from components/nav.css; this page only opts into a
   sticky header. The whole .nav block and a second copy of .lang-toggle used to
   live here, overriding the component with stale values. */
    .nav { position: sticky; top: 0; }

.nav-links .btn { margin-bottom: -2px; }

.btn-outline { background: transparent; color: var(--black); padding: 12px 24px; min-height: var(--tap); font-size: var(--step-0); border: 1.5px solid var(--light-gray); }

/* ── HERO STRIP ── */
    .page-hero {
      padding: var(--gap-sec) var(--pad);
      max-width: calc(var(--max) + var(--pad)*2);
      margin: 0 auto;
      border-bottom: 1px solid var(--light-gray);
      min-height: 400px;
      display: flex; align-items: center; gap: var(--gap-col);
    }

.page-hero-left { flex: 1; min-width: 0; }

/* Was flex: 0 0 320px — grow 0 and *shrink 0*. With no mobile block on this
   page at all, a 400px viewport had to fit 320 + 60 + the headline's
   min-content in 352px: it overflowed by ~180px and was clipped away. */
.page-hero-right {
      flex: 0 1 clamp(200px, 26vw, 320px); aspect-ratio: 3/4; min-height: unset;
      border-radius: 8px;
      overflow: hidden;
      -webkit-mask-image: radial-gradient(ellipse 85% 90% at 50% 50%, black 60%, transparent 100%);
      mask-image: radial-gradient(ellipse 85% 90% at 50% 50%, black 60%, transparent 100%);
    }

/* The one rule this image never had. Nothing sized it — no page rule, no global
   img reset — so it laid out at the intrinsic 1086x1448 of its width/height
   attributes and the parent's overflow:hidden showed the top-left corner only:
   324x243 of a 1086x1448 poster on a 375px phone. The frame's ratio matches the
   poster's, so `cover` fills it without cropping anything. */
.page-hero-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero-label {
      font-size: var(--step--1); font-weight: 600; letter-spacing: -0.03em;
      text-transform: uppercase; color: var(--gray);
      margin-bottom: 20px;
    }

.page-hero-title {
      font-size: clamp(2rem, 3.756vw + 1.119rem, 4.5rem);
      font-weight: 700; letter-spacing: -0.03em;
      line-height: 1.0; margin-bottom: 20px;
    }

.page-hero-title em { color: var(--red-accent); font-style: normal; }

.page-hero-sub {
      font-family: var(--font-soft); font-size: var(--step-1);
      color: var(--gray); line-height: 1.6; max-width: 640px;
    }

/* ── THREE ACTION CARDS ── */
    .action-section {
      padding: var(--gap-sec) var(--pad);
      max-width: calc(var(--max) + var(--pad)*2);
      margin: 0 auto;
    }

.action-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--gap-grid);
    }

.action-card {
      border: 1.5px solid var(--light-gray);
      border-radius: 16px;
      padding: var(--card-pad);
      cursor: pointer;
      transition: border-color .2s, box-shadow .2s, transform .2s;
      position: relative;
      overflow: hidden;
      display: flex; flex-direction: column;
      background: var(--white);
    }


.action-card.urgent { border-color: var(--red-accent); }


.card-number { display: none; }

.action-card.urgent .card-number { color: rgba(177,35,35,0.3); }

.card-icon {
      width: 52px; height: 52px;
      border-radius: 12px;
      background: var(--bg-soft);
      display: flex; align-items: center; justify-content: center;
      font-size: 24px; margin-bottom: 24px;
      flex-shrink: 0;
    }

.action-card.urgent .card-icon { background: rgba(177,35,35,0.06); }

.card-title {
      font-size: var(--step-2); font-weight: 700;
      letter-spacing: -0.02em; line-height: 1.2;
      margin-bottom: 12px;
    }

.card-desc {
      font-family: var(--font-soft); font-size: var(--step-0);
      color: var(--gray); line-height: 1.6;
      flex: 1; margin-bottom: 32px;
    }

.card-cta {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: var(--step-0); font-weight: 600;
      color: var(--black);
    }

.action-card.urgent .card-cta { color: var(--red-accent); }

.card-cta-arrow { font-size: var(--step-1); transition: transform .2s; }

/* Hover latches on a touch screen — the card keeps its lifted shadow until
   something else is tapped, and that shadow is the most expensive repaint here. */
@media (hover: hover) and (pointer: fine) {
  .action-card:hover {
    border-color: var(--black);
    box-shadow: 0 8px 32px rgba(0,0,0,0.08);
    transform: translateY(-2px);
  }
  .action-card.urgent:hover { box-shadow: 0 8px 32px rgba(177,35,35,0.12); }
  .action-card:hover .card-cta-arrow { transform: translateX(4px); }
  .view-all:hover { color: var(--black); border-color: var(--black); }
  .cases-table tr:hover td { background: var(--bg-soft); }
  .case-action:hover { color: var(--black); border-color: var(--black); }
  .btn-outline:hover { border-color: var(--black); opacity: 1; }
}

.card-video {
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      border-radius: 10px;
      margin-bottom: 24px;
      display: block;
      /* The colour grade used to be a CSS filter here. Three of these play at
         once, and a filter on a playing video costs a GPU pass every frame; the
         grade is baked into the encode instead (tools/build-assets.sh). */
      max-height: 40svh;
    }

/* urgent badge */
    .urgent-badge {
      position: absolute; top: 20px; right: 20px; z-index: 2;
      background: var(--red-accent); color: var(--white);
      font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 4px 10px; border-radius: 20px;
      display: flex; align-items: center; gap: 5px;
    }

.urgent-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--white);
      animation: dot-pulse 1.5s infinite;
    }


/* ── DIVIDER ── */
    .divider { height: 1px; background: var(--light-gray); max-width: var(--max); margin: 0 auto; }

.full-divider { height: 1px; background: var(--light-gray); width: 100%; }

/* ── RECENT CASES ── */
    .recent-section {
      padding: var(--gap-sec) var(--pad);
      max-width: calc(var(--max) + var(--pad)*2);
      margin: 0 auto;
    }

.section-header {
      display: flex; align-items: flex-end;
      justify-content: space-between;
      flex-wrap: wrap; gap: 12px;
      margin-bottom: 32px;
    }

.view-all {
      font-family: var(--font-soft); font-size: var(--step-0);
      color: var(--gray); border-bottom: 1px solid var(--light-gray);
      padding-bottom: 2px; transition: color .15s;
    }

/* A five-column table whose rows need ~590px. Below 768px the wrapper scrolls
   it sideways rather than letting the Date and View columns fall off the edge
   unreachable, which is what body{overflow-x:hidden} was hiding. */
.table-scroll { width: 100%; }
.cases-table { width: 100%; border-collapse: collapse; }

.cases-table th {
      text-align: left; font-size: 12px; font-weight: 600;
      letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--gray); padding: 0 0 16px;
      border-bottom: 1px solid var(--light-gray);
    }

.cases-table th:nth-child(2) { padding-left: 8px; }

.cases-table td {
      padding: 20px 0; border-bottom: 1px solid var(--light-gray);
      font-size: var(--step-0); vertical-align: middle;
    }

.case-status {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
      padding: 4px 10px; border-radius: 20px;
    }

.status-lost { background: none; color: var(--red-accent); }

.status-found { background: none; color: #3a9460; }

.status-reunited { background: none; color: #7c5cbf; }

.status-registered { background: none; color: #1e78c8; }

.status-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

.case-pet { display: flex; align-items: center; gap: 12px; }

.case-avatar i { font-size: 24px; font-family: uicons-thin-rounded !important; }

.case-avatar {
      width: 40px; height: 40px; border-radius: 8px;
      background: var(--bg-soft); overflow: hidden;
      display: flex; align-items: center; justify-content: center;
      font-size: 20px; flex-shrink: 0;
    }

.case-name { font-weight: 600; font-size: var(--step-0); }

.case-breed { font-size: var(--step--1); color: var(--gray); margin-top: 2px; }

.case-action {
      display: inline-flex; align-items: center;
      font-size: var(--step--1); font-weight: 500; color: var(--gray);
      border-bottom: 1px solid var(--light-gray);
      transition: color .15s; cursor: pointer;
    }

/* ── MAP PREVIEW ── */
    .map-preview {
      padding: var(--gap-sec) var(--pad);
      max-width: calc(var(--max) + var(--pad)*2);
      margin: 0 auto;
    }

/* The .map-container / .map-overlay / .map-cta-overlay / .map-pin / .map-label
   / .map-legend-* block that used to sit here was dead: no page renders those
   classes. The live map is a bare #leaflet-map div, whose height was a
   hardcoded inline 420px — 63% of an iPhone SE viewport, and unreachable by any
   media query. It is .map-canvas now, sized against the viewport in svh. */
/* isolate for the same reason as home.css's .map-frame: leaflet's panes and
   control corners (400–1000) sit in the root stacking context, and the header
   sticks here too. */
.map-canvas { width: 100%; height: var(--media-h-map); overflow: hidden; isolation: isolate; }
.map-canvas--rounded { border-radius: 16px; }

/* Caption and legend: two nested flex rows that needed ~540px between them and
   wrapped at neither level. */
.map-footnote {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px 16px;
  margin-top: 12px; padding: 0 4px;
  font-size: var(--step--1); color: var(--gray);
}
.map-legend { display: flex; flex-wrap: wrap; gap: 12px; }
.map-legend-item { display: inline-flex; align-items: center; gap: 4px; }
.map-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }

/* Footer rules live in components/footer.css. */

/* ── MODAL ──
   Shared rules live in src/styles/components/modal.css. Only the pieces this
   page adds stay here. */


.form-group { margin-bottom: 20px; }

.form-label {
      font-size: var(--step--1); font-weight: 600; letter-spacing: 0.04em;
      color: var(--black); margin-bottom: 8px; display: block;
    }

.form-label span { font-weight: 400; color: var(--gray); margin-left: 4px; }

.form-input {
      width: 100%; padding: 11px 14px; min-height: var(--tap);
      border: 1.5px solid var(--light-gray); border-radius: 8px;
      font-size: var(--text-input); color: var(--black); font-family: var(--font-main);
      outline: none; transition: border-color .15s;
      background: var(--white);
    }

.form-input:focus { border-color: var(--black); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.upload-area {
      border: 1.5px dashed var(--light-gray); border-radius: 8px;
      padding: 28px; text-align: center; cursor: pointer;
      transition: border-color .15s; background: var(--bg-soft);
    }

.upload-icon { font-size: 28px; margin-bottom: 8px; }

.upload-text { font-size: var(--step--1); color: var(--gray); }

.upload-hint { font-size: 12px; color: var(--light-gray); margin-top: 4px; }

.upload-area.dragover { border-color: var(--black); background: var(--light-gray); }

.upload-preview { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

.upload-thumb {
      position: relative; width: 84px; height: 84px;
      border-radius: 8px; overflow: hidden; border: 1.5px solid var(--light-gray);
    }

.upload-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.upload-thumb button {
      position: absolute; top: 4px; right: 4px;
      width: 20px; height: 20px; padding: 0; border: none; border-radius: 50%;
      background: rgba(0,0,0,0.6); color: #fff; font-size: 11px; line-height: 20px; cursor: pointer;
    }

.upload-stat { font-size: 12px; color: var(--gray); margin-top: 8px; }

.upload-err { font-size: 12px; color: var(--red-accent); margin-top: 6px; }

.poster-notice {
      border: 1.5px solid var(--light-gray); border-radius: 10px;
      padding: 16px 18px; margin-bottom: 20px; background: var(--bg-soft);
    }

.poster-notice.invalid { border-color: var(--red-accent); }

.poster-notice-title {
      font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
      text-transform: uppercase; color: var(--gray); margin-bottom: 12px;
    }

.check-row { display: flex; align-items: flex-start; gap: 10px; font-size: var(--step--1); line-height: 1.5; }

.check-row input[type=checkbox], .check-row input[type=radio] {
      width: 15px; height: 15px; margin: 2px 0 0; flex-shrink: 0;
      accent-color: var(--black); cursor: pointer;
    }

.check-row label { cursor: pointer; }

.check-inline { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }

.poster-note { font-size: 12px; color: var(--gray); line-height: 1.6; margin: 12px 0; }

.consent-row { border-top: 1px solid var(--light-gray); padding-top: 12px; font-weight: 600; }

.pv-overlay {
      display: none; position: fixed; inset: 0; z-index: 3000;
      background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
      align-items: center; justify-content: center; padding: 24px;
    }

.pv-overlay.open { display: flex; }

.pv-box {
      background: var(--white); border-radius: 16px; overflow: hidden;
      max-height: 100%; display: flex; flex-direction: column; max-width: 560px; width: 100%;
    }

.pv-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: 18px 24px; border-bottom: 1px solid var(--light-gray);
    }

.pv-title { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }

.pv-body { padding: 20px 24px; overflow-y: auto; background: var(--bg-soft); text-align: center; }

.pv-body canvas {
      width: 100%; height: auto; border-radius: 6px;
      box-shadow: 0 6px 28px rgba(0,0,0,0.16);
    }

.pv-foot { display: flex; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--light-gray); }

.pv-foot button {
      flex: 1; padding: 13px; border-radius: 10px; font-family: var(--font-main);
      font-size: 14px; font-weight: 600; cursor: pointer; border: 1.5px solid var(--light-gray);
      background: var(--white); color: var(--black); transition: border-color .15s, background .15s;
    }

.pv-switch {
      display: flex; gap: 6px; padding: 12px 24px 0; background: var(--bg-soft);
    }

.pv-switch button {
      flex: 1; padding: 9px; border-radius: 8px; cursor: pointer;
      font-family: var(--font-main); font-size: 13px; font-weight: 600;
      border: 1.5px solid var(--light-gray); background: var(--white); color: var(--gray);
    }

.pv-switch button.on { border-color: var(--black); color: var(--black); }

/* The print sheet is far bigger than the panel — scale it down to fit the preview */
    #pv-print { display: flex; justify-content: center; }

/* flex-shrink must be off: the sheet is a fixed 210mm and only transform may resize it */
    #pv-print .poster { flex: 0 0 auto; transform-origin: top center; box-shadow: 0 6px 28px rgba(0,0,0,.16); }

.pv-foot .pv-dl { background: var(--red-accent); border-color: var(--red-accent); color: #fff; }

.upload-thumb .thumb-edit {
      position: absolute; left: 0; right: 0; bottom: 0; border: none; border-radius: 0;
      background: rgba(0,0,0,0.62); color: #fff; font-size: 11px; padding: 3px 0;
      cursor: pointer; width: 100%; height: auto; line-height: 1.5;
    }

.cr-overlay {
      display: none; position: fixed; inset: 0; z-index: 4000;
      background: rgba(0,0,0,0.65); align-items: center; justify-content: center; padding: 24px;
    }

.cr-overlay.open { display: flex; }

/* max-height + scroll: with a portrait photo the stage alone is taller than a
   phone viewport, and the dialog had neither, so Cancel and Done were simply
   unreachable. */
.cr-box {
  background: var(--white); border-radius: 16px; padding: 22px;
  max-width: 420px; width: 100%;
  max-height: 92vh;
  max-height: 92dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.cr-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }

.cr-hint { font-size: 12px; color: var(--gray); margin-bottom: 14px; }

.cr-stage {
      position: relative; margin: 0 auto 14px; background: #222;
      overflow: hidden; border-radius: 8px; cursor: grab; touch-action: none;
    }

.cr-stage.dragging { cursor: grabbing; }

.cr-stage canvas { display: block; width: 100%; height: 100%; }

.cr-zoom { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 12px; color: var(--gray); }

.cr-zoom input { flex: 1; accent-color: var(--black); }

.cr-foot { display: flex; gap: 10px; }

.cr-foot button {
      flex: 1; padding: 11px; border-radius: 9px; font-family: var(--font-main);
      font-size: 14px; font-weight: 600; cursor: pointer;
      border: 1.5px solid var(--light-gray); background: var(--white);
    }

.cr-foot .cr-ok { background: var(--black); border-color: var(--black); color: #fff; }

/* .modal-footer is in components/modal.css. */

.btn-submit {
      min-height: var(--tap);
      flex: 1; padding: 13px; background: var(--black); color: var(--white);
      border: none; border-radius: 8px; font-size: var(--step-0); font-weight: 600;
      cursor: pointer; font-family: var(--font-main); transition: opacity .15s;
    }

.btn-submit.urgent-btn { background: var(--red-accent); }

.btn-cancel {
      min-height: var(--tap);
      padding: 13px 20px; background: transparent; color: var(--gray);
      border: 1.5px solid var(--light-gray); border-radius: 8px;
      font-size: var(--step-0); cursor: pointer; font-family: var(--font-main);
      transition: all .15s;
    }

.success-msg {
      display: none; background: #f0faf4;
      border: 1px solid #a8d5b5; border-radius: 8px;
      padding: 14px 16px; font-size: 14px; color: #2d7a4a;
      margin-top: 16px; line-height: 1.6;
    }

.disclaimer {
      font-size: 12px; color: var(--gray); line-height: 1.6;
      margin-top: 16px; padding-top: 16px;
      border-top: 1px solid var(--light-gray);
    }

/* step indicator */
    .step-indicator {
      display: flex; align-items: center; gap: 8px;
      margin-bottom: 28px;
    }

.step-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--light-gray); transition: background .2s;
    }

.step-dot.active { background: var(--black); }

.step-dot.urgent-active { background: var(--red-accent); }

.step-label { font-size: 13px; color: var(--gray); margin-left: 4px; }

[lang="zh"] .page-hero-title { letter-spacing: 0; line-height: 1.1; }

[lang="zh"] .page-hero-label { letter-spacing: 0.04em; }

/* i18n-zh.css raises this back to 1.7 below 1024px: the tightened leading was
   tuned against a short desktop string, and the same string wraps to several
   lines on a phone where 1.2 leading on stacked CJK is hard to read. */
[lang="zh"] .page-hero-sub { line-height: 1.2; }

[lang="zh"] .card-title { letter-spacing: 0; }

[lang="zh"] .case-name { letter-spacing: 0; }

[lang="zh"] .cases-table th { font-size: 13px; letter-spacing: 0; text-transform: none; }

[lang="zh"] .cases-table th:nth-child(2) { padding-left: 8px; text-align: left; }

[lang="zh"] .map-caption { letter-spacing: 0.04em; }

/* ── HOVER: MODAL AND UPLOAD CHROME ──
   These live inside modals built at runtime, so they were missed by the sweep
   that guarded the rest of the page. On touch a :hover latches on tap and stays
   painted until something else is touched. */
@media (hover: hover) and (pointer: fine) {
  .upload-area:hover { border-color: var(--black); }
  .upload-thumb button:hover { background: rgba(0,0,0,0.85); }
  .upload-thumb .thumb-edit:hover { background: rgba(0,0,0,0.85); }
  .pv-foot button:hover { border-color: var(--black); }
  .pv-foot .pv-dl:hover { background: #9a1e1e; border-color: #9a1e1e; }
  .btn-submit:hover { opacity: .8; }
  .btn-cancel:hover { border-color: var(--black); color: var(--black); }
}

/* ── TOUCH: MODAL INTERNALS ──
   None of this is reachable by tools/probe.sh: the form, the crop editor and
   the poster preview are all built from JS template strings when a modal
   opens, so a page-load audit sees no fields at all. They were found by driving
   the real page. */
@media (pointer: coarse), (max-width: 1023px) {
  /* Removing an uploaded photo is destructive and the control was 20x20. */
  .upload-thumb button {
    width: 28px; height: 28px; line-height: 28px;
    top: 6px; right: 6px; font-size: var(--step--1);
  }
  /* A required legal consent at 15x15. The label is correctly associated, so
     tapping the text works either way, but the box should be reachable too. */
  .check-row input[type=checkbox],
  .check-row input[type=radio] { width: 22px; height: 22px; margin-top: 0; }
  .check-row { align-items: center; }

  .pv-switch button { min-height: var(--tap); font-size: var(--step--1); }
  .pv-foot button, .cr-foot button { min-height: var(--tap); }
}

/* ── TABLET PORTRAIT ──
   This page had no hero rule below 900px at all — still-waiting.css carried one
   for the same class name and this file did not, which is what the ad-hoc
   breakpoints cost. */
@media (max-width: 1023px) {
  .action-grid { grid-template-columns: repeat(2, 1fr); }

  .page-hero {
    flex-direction: column;
    align-items: stretch;
    gap: var(--gap-grid);
    min-height: 0;
  }
  /* Stays 3:4 once stacked. A 4/3 landscape frame was the wrong shape for a
     portrait poster — `cover` would crop more than half of it away, and this is
     an image made of text. Sizing off the height cap instead of the full column
     width keeps the poster whole and still bounds what it takes of the first
     screen: 280px wide on a 375px phone, 345 on an iPad, 169 laid on its side. */
  .page-hero-right {
    flex: none;
    /* Width-driven, not height-driven: an explicit width beats the column
       flexbox's align-items:stretch on its own, without relying on an auto
       cross-margin to defeat the stretch or on width being resolved back out of
       aspect-ratio. Same box either way, fewer assumptions off a Mac. The 3/4
       keeps it exactly the poster's height cap: --media-h-hero. */
    width: min(100%, calc(var(--media-h-hero) * 3 / 4));
    aspect-ratio: 3/4;
    height: auto;
    margin-inline: auto;
    /* The radial vignette is tuned for a tall column beside the text; on a
       stacked block it eats the corners of the poster. */
    -webkit-mask-image: none;
    mask-image: none;
  }

  .case-action { min-height: var(--tap); }
  .view-all { min-height: var(--tap); display: inline-flex; align-items: center; }
}

/* ── PHONE LANDSCAPE / SMALL TABLET ── */
@media (max-width: 767px) {
  .action-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }

  /* Rows need ~590px; scrolling the table is the honest version of what
     body{overflow-x:hidden} was doing silently. */
  .table-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .cases-table { min-width: 560px; }
}

.leaflet-control-zoom a { width: 24px !important; height: 24px !important; line-height: 24px !important; font-size: var(--step--1) !important; }
@media (pointer: coarse), (max-width: 1023px) {
  .leaflet-control-zoom a {
    width: var(--tap) !important;
    height: var(--tap) !important;
    line-height: var(--tap) !important;
    font-size: var(--step-1) !important;
  }
}