/* Patient portal (1.29.0): light, calm, large touch targets; works on any phone. */
:root {
  --pp-bg: #f4f6fa; --pp-card: #ffffff; --pp-ink: #0f1b2d; --pp-muted: #4a5568; --pp-line: #dce2ea; --pp-field: #c9d2de;
  --pp-accent: #1d4ed8; --pp-accent-ink: #ffffff; --pp-accent-soft: #e6edfb; --pp-ok: #0f6b45; --pp-wait: #8a5300; --pp-err: #b42318;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pp-bg: #0f1726; --pp-card: #162135; --pp-ink: #e8edf5; --pp-muted: #b3bfd0; --pp-line: #2a3a55; --pp-field: #3a4d6e;
    --pp-accent: #7aa2ff; --pp-accent-ink: #0b1220; --pp-accent-soft: #1d2d4d; --pp-ok: #7fd1a8; --pp-wait: #f2b266; --pp-err: #ff8a80;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--pp-bg); color: var(--pp-ink); }
body { font: 17px/1.5 "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-text-size-adjust: 100%; }
a { color: var(--pp-accent); }
h1 { font-size: 1.6rem; line-height: 1.2; margin: 0.4rem 0 0.3rem; }
h2 { font-size: 1.1rem; margin: 0; }
h3 { font-size: 1rem; margin: 0.6rem 0 0.2rem; }
.pp-page { min-height: 100vh; display: flex; flex-direction: column; }
.pp-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.6rem 1rem; background: var(--pp-card); border-bottom: 1px solid var(--pp-line); }
.pp-brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; min-width: 0; }
.pp-brand span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-logo { width: 36px; height: 36px; border-radius: 9px; object-fit: contain; background: #fff; flex-shrink: 0; }
.pp-logo-blank, .pp-mark { display: inline-block; width: 32px; height: 32px; border-radius: 9px; background: var(--pp-accent-soft); flex-shrink: 0; }
.pp-mark { background: radial-gradient(circle at 50% 50%, var(--pp-accent) 0 30%, transparent 31%), var(--pp-accent-soft); }
.pp-top-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }
.pp-main { width: 100%; max-width: 40rem; margin: 0 auto; padding: 1rem 1rem 2rem; flex: 1; display: flex; flex-direction: column; gap: 0.9rem; }
.pp-narrow { max-width: 28rem; }
.pp-foot { display: flex; align-items: center; justify-content: center; gap: 0.35rem; font-size: 0.8rem; color: var(--pp-muted); padding: 1rem; }
.pp-muted { color: var(--pp-muted); margin: 0; }
.pp-small { font-size: 0.85rem; }
.pp-label { font-size: 0.8rem; font-weight: 700; color: var(--pp-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 0.4rem; }
.pp-card { background: var(--pp-card); border: 1px solid var(--pp-line); border-radius: 14px; padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.pp-note { background: var(--pp-accent-soft); border-radius: 12px; padding: 0.8rem 0.9rem; margin: 0; }
.pp-banner { margin: 0; background: var(--pp-accent-soft); padding: 0.6rem 1rem; text-align: center; font-size: 0.95rem; }
.pp-error { color: var(--pp-err); font-weight: 600; margin: 0; }
.pp-ok { color: var(--pp-ok); font-weight: 700; font-size: 0.9rem; }
.pp-wait { color: var(--pp-wait); font-weight: 700; font-size: 0.9rem; }
.pp-btn, .pp-btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 52px; padding: 0 1rem; border-radius: 12px; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; border: 0; }
.pp-btn { background: var(--pp-accent); color: var(--pp-accent-ink); }
.pp-btn:disabled { opacity: 0.6; }
.pp-btn-outline { background: var(--pp-card); color: var(--pp-ink); border: 1px solid var(--pp-field); }
.pp-btn-small { min-height: 44px; padding: 0 0.8rem; border: 1px solid var(--pp-field); background: var(--pp-card); color: var(--pp-ink); border-radius: 10px; font: inherit; font-size: 0.9rem; cursor: pointer; }
.pp-form { gap: 0.9rem; }
.pp-field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; color: var(--pp-muted); }
.pp-field input, .pp-dob input { min-height: 50px; border: 1px solid var(--pp-field); border-radius: 10px; padding: 0 0.8rem; font: inherit; font-size: 1.15rem; color: var(--pp-ink); background: var(--pp-card); width: 100%; }
.pp-code { letter-spacing: 0.15em; text-transform: uppercase; }
.pp-dob { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 0.6rem; }
.pp-dob legend { font-size: 0.9rem; color: var(--pp-muted); margin-bottom: 0.3rem; padding: 0; }
.pp-dob label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; color: var(--pp-muted); }
.pp-result { text-decoration: none; color: inherit; }
.pp-result-new { border: 2px solid var(--pp-accent); }
.pp-result-top, .pp-result-bottom, .pp-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 0.6rem; }
.pp-pill { font-size: 0.8rem; font-weight: 700; color: var(--pp-accent-ink); background: var(--pp-accent); border-radius: 999px; padding: 0.1rem 0.6rem; white-space: nowrap; }
.pp-pill-soft { color: var(--pp-ink); background: var(--pp-accent-soft); }
.pp-prep summary { color: var(--pp-accent); font-weight: 700; cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.pp-prep p { margin: 0.3rem 0 0; }
.pp-call { text-align: center; margin-top: 0.5rem; }
.pp-back { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 700; text-decoration: none; min-height: 44px; }
.pp-section { display: flex; flex-direction: column; gap: 0.6rem; }
.pp-thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.pp-thumb { border: 0; padding: 0; border-radius: 12px; background: #000; overflow: hidden; height: 170px; cursor: pointer; }
.pp-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pp-report-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.pp-sig { border-top: 1px solid var(--pp-line); padding-top: 0.6rem; }
.pp-addendum { border-top: 1px solid var(--pp-line); padding-top: 0.4rem; }
.pp-actions { display: flex; flex-direction: column; gap: 0.6rem; }
.pp-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.pp-seg button { min-height: 46px; border-radius: 10px; border: 1px solid var(--pp-field); background: var(--pp-card); color: var(--pp-ink); font: inherit; cursor: pointer; }
.pp-seg button.on { border: 2px solid var(--pp-accent); background: var(--pp-accent-soft); font-weight: 700; }
.pp-kv { display: flex; justify-content: space-between; gap: 0.8rem; align-items: baseline; }
.pp-kv > span { color: var(--pp-muted); }
.pp-break { overflow-wrap: anywhere; text-align: right; }
.pp-kv-stack { flex-direction: column; gap: 0.15rem; }
.pp-kv-stack .pp-break { text-align: left; font-weight: 600; font-size: 0.95rem; }
.pp-btn, .pp-btn-outline { text-align: center; line-height: 1.2; }
.pp-bigcode { font-size: 1.4rem; letter-spacing: 0.12em; }
.pp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
progress { width: 100%; height: 10px; }
.pp-viewer { position: fixed; inset: 0; background: #000; color: #e8edf5; display: flex; flex-direction: column; z-index: 10; }
.pp-viewer-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.5rem 0.75rem; }
.pp-viewer-top select { min-height: 44px; max-width: 75vw; font: inherit; background: #111; color: #e8edf5; border: 1px solid #444; border-radius: 8px; padding: 0 0.5rem; }
.pp-viewer-close { width: 44px; height: 44px; border-radius: 10px; border: 1px solid #444; background: transparent; color: #e8edf5; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.pp-viewer-img { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; touch-action: pinch-zoom; }
.pp-viewer-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pp-viewer-bar { display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; gap: 0.6rem; padding: 0.4rem 0.75rem; }
.pp-viewer-bar button { width: 52px; height: 52px; border-radius: 12px; border: 1px solid #444; background: #111; color: #e8edf5; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.pp-viewer-bar button:disabled { opacity: 0.4; }
.pp-viewer-bar input { width: 100%; }
.pp-viewer-count { text-align: center; margin: 0 0 0.8rem; font-size: 0.9rem; color: #b3bfd0; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
