/* Printable case poster (templates/missing_persons/poster.html).
   Sized in millimetres to fit both A4 (210 x 297) and US Letter (216 x 279):
   the poster is a fixed 185 x 254 mm, inside 12 mm page margins. Only the
   description area can shrink (it is clipped if a case has very long text),
   so the police number, QR code and "check the status" note always print. */

:root {
  --dm-green: #006B3C;
  --dm-green-deep: #033B22;
  --dm-yellow: #FCD116;
  --ink: #111614;
  --muted: #4A524D;
  --rule: #D5DAD7;
  --alert-pink: #B0175F;
  --alert-silver: #56606A;
  --alert-orange: #A84400;
}

* { box-sizing: border-box; }
html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body {
  margin: 0;
  background: #E7EAE8;
  color: var(--ink);
  font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.35;
}
p { margin: 0; }

/* ---------- Screen-only chrome ---------- */
.poster-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--rule);
}
.poster-toolbar a { color: var(--dm-green); font-weight: 600; }
.poster-toolbar-hint { flex: 1 1 240px; min-width: 0; color: var(--muted); font-size: .9rem; }
.poster-print {
  font: inherit; font-weight: 700; color: #fff; background: var(--dm-green);
  border: 0; border-radius: 8px; padding: 10px 16px; cursor: pointer;
}
.poster-print:focus-visible, .poster-toolbar a:focus-visible { outline: 3px solid var(--dm-yellow); outline-offset: 2px; }
.poster-warning {
  padding: 2mm 3mm; font-size: 3.6mm;
  background: #FFF4CC; border: .3mm solid #E5C34A; border-radius: 1.5mm;
}

/* ---------- Poster ---------- */
.poster {
  --alert: var(--alert-orange);
  width: 185mm; height: 254mm; margin: 16px auto;
  padding: 8mm; background: #fff;
  display: flex; flex-direction: column; gap: 3mm;
  box-shadow: 0 2px 16px rgba(0, 0, 0, .12);
  border-top: 4mm solid var(--alert);
}
.poster--pink { --alert: var(--alert-pink); }
.poster--silver { --alert: var(--alert-silver); }
.poster--orange { --alert: var(--alert-orange); }

.poster-head, .poster-name, .poster-aka, .poster-call, .poster-foot, .poster-warning { flex: none; }
.poster-head { display: flex; align-items: center; justify-content: space-between; gap: 4mm; }
.poster-missing { font-size: 20mm; line-height: .9; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.poster-alert {
  display: inline-flex; align-items: center; gap: 2mm;
  padding: 1.5mm 3.5mm; border: .5mm solid var(--alert); border-radius: 99px;
  color: var(--alert); font-weight: 700; font-size: 4.2mm; white-space: nowrap;
}
.poster-alert-dot { width: 3mm; height: 3mm; border-radius: 50%; background: var(--alert); }

.poster-name { margin: 0; font-size: 9.5mm; line-height: 1.05; font-weight: 800; }
.poster-aka { color: var(--muted); font-size: 4.2mm; margin-top: -1.5mm; }

.poster-body {
  flex: 1 1 auto; min-height: 0; overflow: hidden;
  display: grid; grid-template-columns: 60mm 1fr; grid-template-rows: auto 1fr;
  gap: 4mm 6mm; align-content: start;
}
.poster-details {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(48mm, 1fr)); gap: 0 5mm;
  font-size: 3.7mm; border-top: .3mm solid var(--rule); padding-top: 1mm;
}
.poster-photo { margin: 0; }
.poster-photo img {
  display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 2mm; background: #F2F4F3;
}

.poster-facts { display: flex; flex-direction: column; gap: 2mm; font-size: 3.9mm; min-width: 0; }
.poster-label { font-size: 3.1mm; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 1mm; }
.poster-lastseen { padding: 3mm 3.5mm; background: #F2F4F3; border-left: 1.2mm solid var(--alert); border-radius: 1mm; }
.poster-lastseen .poster-label { margin-top: 0; }
.poster-lastseen-date { font-weight: 700; font-size: 4.6mm; }
.poster-lastseen-place { font-size: 4.4mm; }
.poster-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2mm 4mm; margin: 1mm 0 0; }
.poster-grid dt { font-size: 3.1mm; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.poster-grid dd { margin: 0; font-size: 4.6mm; font-weight: 700; }
.poster-care { padding: 2mm 3mm; border: .4mm solid var(--rule); border-radius: 1mm; }
.poster-text { white-space: pre-line; }

.poster-call {
  display: flex; align-items: center; justify-content: space-between; gap: 6mm;
  padding: 4mm 6mm; background: var(--dm-green-deep); color: #fff; border-radius: 2mm;
}
.poster-call-ask { font-size: 6mm; font-weight: 800; color: var(--dm-yellow); }
.poster-call-line { font-size: 4.4mm; margin-top: 1mm; }
.poster-call-phone { font-size: 10.5mm; line-height: 1.1; font-weight: 800; letter-spacing: .01em; }
.poster-call-org { font-size: 3.6mm; opacity: .92; }
.poster-qr { flex: 0 0 28mm; text-align: center; font-size: 3mm; font-weight: 600; }
.poster-qr svg { display: block; width: 28mm; height: 28mm; background: #fff; border-radius: 1mm; margin-bottom: 1.5mm; }

.poster-foot { font-size: 3.1mm; color: var(--muted); display: grid; gap: 1mm; border-top: .3mm solid var(--rule); padding-top: 2.5mm; }
.poster-foot strong { color: var(--ink); overflow-wrap: anywhere; }

/* Phones: scale the whole poster down so it fits the screen with its print
   layout intact (it is 703 CSS px wide at full size). */
@media screen and (max-width: 760px) { .poster { zoom: .72; } }
@media screen and (max-width: 560px) { .poster { zoom: .52; margin: 12px auto; } }
@media screen and (max-width: 400px) { .poster { zoom: .46; } }

/* ---------- Print ---------- */
@page { margin: 12mm; }
@media print {
  body { background: #fff; }
  .poster-toolbar { display: none; }
  .poster { margin: 0; box-shadow: none; }
}