/* ==========================================================================
   BEL-AIR public site (Mockup 02) — services group: request-print, business-clearance(-print),
   track, verify, report-concern. Only what inner.css does not already have.
   ========================================================================== */

.a4 + .a4 { margin-top: 2rem; }
.a4 a { color: #000; }
.a4-small { font-size: 9.5pt; }

/* letterhead with the QR at top right (business clearance form) */
.a4__head--qr { grid-template-columns: 22mm 1fr 38mm; }
.a4__head--qr .qr { display: grid; justify-items: center; gap: 1mm; }
.a4__head--qr .qr svg { width: 24mm; height: 24mm; }
.a4__head--qr .qr p { font-family: var(--font-mono); font-size: 8pt; line-height: 1.25; white-space: nowrap; text-align: center; }
.a4__cont b, .a4__ref b { white-space: nowrap; }
.a4__cont { display: flex; justify-content: space-between; gap: 6mm; padding-bottom: 2.5mm; border-bottom: 2pt solid #000; font-family: var(--font-mono); font-size: 10pt; }

/* blank boxes and tick boxes to fill in by hand */
.a4__office { margin-top: 4mm; border: 1.5pt solid #000; padding: 3mm 4mm 4mm; }
.a4__office h2 { margin-top: 0; }
.a4__blanks { display: grid; grid-template-columns: 1fr 1fr; gap: 7mm 8mm; margin-top: 5mm; }
.a4__blanks div { border-bottom: .75pt solid #000; padding-top: 7mm; font-size: 9.5pt; }
.a4__ticks { display: grid; gap: 1.6mm; margin-top: 3mm; }
.a4__ticks li { display: flex; gap: 3mm; align-items: baseline; }
.a4__ticks li::before { content: ""; flex: none; width: 3.6mm; height: 3.6mm; border: 1pt solid #000; transform: translateY(.6mm); }
.a4__ticks li.is-ticked::before { background: #000; }
.a4 ol.a4__steps { list-style: decimal; padding-left: 5mm; margin-top: 3mm; display: grid; gap: 1.4mm; }
.a4__declare { margin-top: 5mm; font-size: 10pt; }
.a4__seal { display: grid; place-items: center; min-height: 34mm; border: 1pt dashed #000; text-align: center; font-size: 9.5pt; padding: 3mm; }
.a4__attach { display: grid; grid-template-columns: 1fr 1fr; gap: 8mm; margin-top: 6mm; }

@media (max-width: 760px) {
  .a4__head--qr { grid-template-columns: 16mm 1fr; }
  .a4__head--qr .qr { grid-column: 1 / -1; grid-template-columns: auto 1fr; justify-items: start; align-items: center; gap: 3mm; text-align: left; }
  .a4__blanks, .a4__sign, .a4__attach { grid-template-columns: 1fr; gap: 6mm; }
  .a4__head img { width: 16mm; height: 16mm; }
  .a4__ref, .a4__cont, .a4__foot { flex-direction: column; gap: 1mm; }
}

/* choice cards in two columns (report a concern categories) */
.choices--grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

/* result panels on track and verify */
.result { margin-top: 2rem; padding: clamp(1.1rem, 1rem + 1vw, 2rem); background: var(--paper-2); border: 1px solid var(--line-d); border-radius: var(--r-photo); }
.result > h2 { font-size: clamp(1.6 * var(--u), 1.3 * var(--u) + 1vw, 2.2 * var(--u)); }
.result__head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: .6rem; }
.result__head .status { white-space: normal; }
.result__head .ref { font-family: var(--font-mono); font-size: var(--t-base); color: var(--ink-d); }
.result h3 { margin-top: 1.75rem; margin-bottom: .75rem; }
.result .notice { margin-top: 1.25rem; }
.result .actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

/* emergency split at the top of the concern form */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 2.5rem; }
.split .notice { height: 100%; }
.notice--alert .tel-list { grid-column: 2; display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
.notice--alert .tel-list .btn { min-height: 2.75rem; }
@media (max-width: 1000px) { .split { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .notice--alert .tel-list { grid-column: 1; } }

@media print {
  .a4 + .a4 { margin-top: 0; break-before: page; }
  /* The page's 760 px phone rules are rescaled to the 18 px root by textsize.js, so they also
     match an A4 page (794 px wide) in print. Put the sheet's own layout back. */
  .a4 { min-height: 280mm; padding: 14mm 16mm 12mm; font-size: 11pt; line-height: 1.35; }
  .a4 dl { grid-template-columns: 44mm 1fr; gap: 1mm 5mm; }
  .a4 dd { margin-bottom: 0; }
  .a4__head { grid-template-columns: 22mm 1fr 22mm; }
  .a4__head img { width: 22mm; height: 22mm; }
  .a4__head--qr { grid-template-columns: 22mm 1fr 38mm; }
  .a4__head--qr .qr { grid-column: auto; grid-template-columns: none; justify-items: center; text-align: center; gap: 1mm; }
  .a4__qr { grid-template-columns: 34mm 1fr; }
  .a4__ref, .a4__cont, .a4__foot { flex-direction: row; gap: 6mm; }
  .a4__attach, .a4__blanks { grid-template-columns: 1fr 1fr; }
  .a4__sign { grid-template-columns: 1fr 1fr; gap: 12mm; padding-top: 9mm; }
  /* tighter vertical rhythm so each sheet stays on one A4 page */
  .a4__title { margin: 5mm 0 1mm; font-size: 22pt; }
  .a4 h2 { margin-top: 4mm; }
  .a4__banner { margin-top: 4mm; }
  .a4__qr { margin-top: 4.5mm; padding: 3mm 4mm; }
  .a4__qr svg { width: 30mm; height: 30mm; }
  .a4__seal { min-height: 20mm; }
  .a4__attach { margin-top: 4.5mm; }
  .a4__foot { margin-top: 4mm; }
}

/* A4 sheets on screen keep the site's floor: 16 px for sentences, 14 px for capitals (the printed sheet keeps its pt sizes). */
@media screen {
  .a4 dt, .a4__head p, .a4__qr p, .a4__sign div, .a4__foot, .a4-small, .a4__seal, .a4__blanks div, .a4__declare, .a4__cont, .a4__head--qr .qr p, .a4__ref { font-size: max(16px, 1rem); }
  .a4 h2, .a4__banner { font-size: max(14px, .875rem); }
}
@media screen and (max-width: 760px) { .a4 { font-size: 16px; } }