/* public/css/patient.css — the patient's online Living Will (livingwill.bewell.co.th). Screen only: the printed /
   PDF page is the suite's document exactly (living-will.css). The page is laid out at the A4 sheet's width
   (viewport width=880), so on a phone everything is drawn at ~45 %: the touch rules below enlarge the controls. */

/* Phones: the page is laid out at the A4 sheet's width (viewport 880) and then shrunk to the screen. Mobile browsers
   then "boost" the text of some blocks (Chrome Android font boosting, Safari text autosizing) — paragraphs grow,
   tables don't, line breaks and spacing change and the sheet no longer looks like the printed form. Turn that off:
   the reader pinch-zooms the page as it is, like a PDF. */
html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; }

.patient .tb-home img { cursor: default; }
.patient .sheet { flex: 0 0 auto; } /* never squeezed to the screen (the zoom adds room beside it): its width is the printed width */
/* zoomed in, the form scrolls sideways inside its own area — the page itself stays at the screen's width, so the phone
   never shrinks the whole page (toolbar included) to fit a wider sheet */
.patient .sheet-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pt-saved { font-size: 12px; color: var(--muted-foreground, #64748b); margin-right: 4px; white-space: nowrap; }
.pt-zoom { display: none; align-items: center; gap: 6px; }  /* phones and tablets only (below) */
.pt-zoom-val { min-width: 3.2em; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }

.pt-intro, .pt-restored { position: relative; max-width: 210mm; margin: 12px auto 0; padding: 12px 40px 12px 16px; border: 1px solid #bfdbfe; border-radius: 10px; background: #eff6ff; color: #1e3a8a; font-size: 14px; line-height: 1.5; }
.pt-intro strong { display: block; margin-bottom: 2px; }
.pt-intro em { display: block; margin-top: 4px; font-style: normal; font-weight: 600; }
.pt-restored { background: #f0fdf4; border-color: #bbf7d0; color: #166534; padding-right: 16px; }
.pt-intro-close { position: absolute; top: 8px; right: 10px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
[hidden] { display: none !important; }

/* The staff warning "This page is too full …" is not for patients: the server makes the PDF and keeps it at three
   pages itself (src/patient/server.js makePdf), and field lengths are capped. */
.patient .pg.is-over::after { display: none !important; }

/* what the patient cannot change: filled in at the appointment */
@media screen {
  .patient [data-locked] { background: #eef2f6; cursor: not-allowed; border-radius: 2px; }
  .patient [data-locked]:empty { min-width: 18mm; }
  .patient .sc, .patient .yn > span { cursor: pointer; }
  .patient .sc:hover, .patient .yn > span:hover { background: #eff6ff; }
  .patient [data-sig] { position: relative; }
  .patient .sc [data-sig]:empty::after, .patient .yn [data-sig]:empty::after { content: 'tap to sign'; position: absolute; right: 0; bottom: .3mm; font-size: 6pt; color: #93c5fd; letter-spacing: .02em; white-space: nowrap; }
  .patient .yn [data-sig]:empty::after { content: 'sign'; }
}

/* send dialog */
.pt-label { display: block; margin: 12px 0 4px; font-size: 14px; font-weight: 600; }
.pt-input { width: 100%; box-sizing: border-box; height: 40px; padding: 0 12px; border: 1px solid var(--input, #cbd5e1); border-radius: 8px; font: inherit; font-size: 15px; }
.pt-check { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 4px; font-size: 13.5px; line-height: 1.45; cursor: pointer; }
.pt-check input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; }
.pt-turnstile { margin: 14px 0 0; min-height: 65px; }
.pt-error { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: #fef2f2; color: #b91c1c; font-size: 13.5px; }

/* touch screens: the page is drawn at the sheet's width, so make the controls big enough to tap */
@media (pointer: coarse) {
  .patient .toolbar { height: auto; padding: 14px 18px; gap: 14px; }
  .patient .toolbar .tb-btn { height: 64px; padding: 0 22px; font-size: 26px; border-radius: 14px; }
  .patient .toolbar .tb-btn .ico { width: 30px; height: 30px; }
  .patient .tb-title, .patient .tb-home, .pt-saved { display: none; }
  .patient .toolbar > .tb-spacer { display: none; }
  .pt-zoom { display: inline-flex; margin-right: auto; }
  .pt-zoom .tb-btn { width: 64px; padding: 0; justify-content: center; font-size: 36px; font-weight: 600; }
  .pt-zoom-val { font-size: 24px; }
  .patient .toolbar [data-action="start-over"] span { display: none; }  /* icon only: room for the zoom buttons */
  .pt-intro, .pt-restored { font-size: 24px; padding: 20px 64px 20px 24px; border-radius: 16px; }
  .pt-intro-close { width: 48px; height: 48px; font-size: 36px; }
  .patient .modal-card { font-size: 26px; max-width: 760px; }
  .patient .modal-card h2 { font-size: 34px; }
  .patient .modal-card p, .patient .modal-card li, .patient .modal-sub { font-size: 25px; line-height: 1.45; color: #334155; }
  .patient .modal-card li { margin-bottom: 10px; }
  .patient .modal-close { font-size: 26px; padding: 16px 26px; border-radius: 14px; }
  .pt-label { font-size: 26px; } .pt-input { height: 72px; font-size: 28px; border-radius: 14px; }
  .pt-check { font-size: 24px; } .pt-check input { width: 36px; height: 36px; }
  .pt-error { font-size: 24px; }
  .pt-restored .btn-sm { font-size: 22px; padding: 8px 16px; border-radius: 10px; }
  .patient .pad-head { font-size: 28px; padding: 22px 26px; }
  .patient .pad-actions .tb-btn { height: 76px; padding: 0 26px; font-size: 28px; border-radius: 14px; }
}