/* =======================================================================
   Align Patient Portal v2 — the mobile-first shell (Sep 2026)
   Tokens come from styles.css (--brand teal, --surface, --muted, the dark
   palette under [data-theme="dark"]). 8px grid. Every tap target is at
   least 44px. No tables anywhere on the portal — rows and cards only.
   ==================================================================== */
:root { --pv2-tabs-h: 64px; }

/* ---------- header + account menu ---------- */
.pv2-header { position: sticky; top: 0; z-index: 20; padding: 8px 16px; min-height: 60px; gap: 8px; }
.pv2-header .brand { padding: 0; gap: 10px; min-width: 0; }
.pv2-header .brand-mark { width: 36px; height: 36px; border-radius: 10px; flex: none; }
.portal-user { position: relative; gap: 10px; }
.pv2-name { font-weight: 600; max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv2-avatar { width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; background: var(--brand-dark); color: #fff;
  font-weight: 700; font-size: 15px; display: grid; place-items: center; flex: none; }
.pv2-avatar:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset: 2px; }
.pv2-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column; z-index: 30; }
.pv2-menu[hidden] { display: none; }
.pv2-menu button { text-align: left; background: none; border: 0; color: var(--text); font: inherit; font-size: 14px; padding: 12px;
  min-height: 44px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; gap: 10px; width: 100%; }
.pv2-menu button:hover, .pv2-menu button:focus-visible { background: var(--surface-2); outline: none; }
.pv2-menu hr { border: 0; border-top: 1px solid var(--border); margin: 4px 0; }
.pv2-badge { margin-left: auto; background: var(--danger); color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 7px; }
.pv2-badge[hidden] { display: none; }

/* ---------- tabs: a bottom bar on phones, a strip under the header on desktop ---------- */
.pv2-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--surface); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom); }
.pv2-tabs button { border: 0; background: none; color: var(--muted); font: inherit; font-size: 11px; min-height: var(--pv2-tabs-h);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; padding: 4px 2px; }
.pv2-tabs button i { font-style: normal; font-size: 20px; line-height: 1; }
.pv2-tabs button.on { color: var(--brand-dark); font-weight: 600; }
.pv2-tabs button:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.pv2-tabs button .pv2-dot { position: absolute; margin-left: 22px; margin-top: -26px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }

/* ---------- content ---------- */
.pv2-main { padding: 16px 16px calc(var(--pv2-tabs-h) + 24px); gap: 16px; max-width: 960px; }
.pv2-main .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.pv2-main a.btn { text-decoration: none; }
.pv2-main .panel { padding: 16px; }
.pv2-greet h2 { font-size: 22px; margin: 0; }
.pv2-greet p { margin: 4px 0 0; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.pv2-hero { background: linear-gradient(135deg, var(--brand-dark), var(--brand)); color: #fff; border-radius: 16px; padding: 16px; box-shadow: var(--shadow); }
.pv2-hero .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; opacity: .85; }
.pv2-hero .when { font-size: 22px; font-weight: 700; margin-top: 4px; letter-spacing: -.3px; }
.pv2-hero .meta { margin-top: 4px; font-size: 13.5px; opacity: .95; }
.pv2-hero .sub { margin-top: 8px; font-size: 12.5px; background: rgba(255,255,255,.18); display: inline-block; padding: 3px 10px; border-radius: 999px; }
.pv2-hero .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pv2-hero .acts .btn { background: #fff; color: var(--brand-dark); }
.pv2-hero .acts .btn.ghost { background: rgba(255,255,255,.18); color: #fff; }
.pv2-hero .pv2-note { font-size: 12px; opacity: .92; margin-top: 8px; }
.pv2-hero.empty { background: var(--surface); color: var(--text); border: 1px dashed var(--border); box-shadow: none; }

.pv2-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.pv2-strip::-webkit-scrollbar { display: none; }
.pv2-chipbtn { flex: none; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 10px 14px;
  min-height: 44px; font: inherit; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.pv2-chipbtn.warn { border-color: color-mix(in srgb, var(--warn) 50%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); }

.pv2-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px; box-shadow: var(--shadow); }
.pv2-card h3 { font-size: 15px; margin: 0 0 8px; }
.pv2-card .head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.pv2-card .head h3 { margin: 0; }
.pv2-card details > summary { list-style: none; cursor: pointer; }
.pv2-card details > summary::-webkit-details-marker { display: none; }
.pv2-link { background: none; border: 0; color: var(--brand-dark); font: inherit; font-weight: 600; cursor: pointer; padding: 8px 0; min-height: 44px; display: inline-flex; align-items: center; }
.pv2-bar { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--muted) 18%, transparent); overflow: hidden; }
.pv2-bar i { display: block; height: 100%; background: var(--brand); border-radius: 99px; transition: width .3s; }
.pv2-kv { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding: 8px 0; border-top: 1px solid var(--border); list-style: none; }
.pv2-kv:first-child { border-top: 0; }
.pv2-kv > span:first-child { color: var(--muted); }
.pv2-kv b { white-space: nowrap; }
.pv2-big { font-size: 28px; font-weight: 800; letter-spacing: -.5px; line-height: 1.1; }

.pv2-row { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); align-items: flex-start; }
.pv2-row:first-child { border-top: 0; }
.pv2-date { flex: none; width: 52px; text-align: center; background: var(--surface-2); border-radius: 10px; padding: 6px 0; }
.pv2-date b { display: block; font-size: 18px; line-height: 1.1; }
.pv2-date small { font-size: 11px; color: var(--muted); text-transform: uppercase; }
.pv2-body { flex: 1; min-width: 0; }
.pv2-body strong { display: block; font-size: 14.5px; }
.pv2-body .muted { font-size: 12.5px; }
.pv2-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pv2-acts .btn { padding: 8px 12px; font-size: 13px; }
.pv2-amount { text-align: right; flex: none; }
.pv2-amount b { display: block; font-size: 15px; }

.pv2-empty { text-align: center; padding: 24px 16px; color: var(--muted); }
.pv2-empty .ico { font-size: 34px; line-height: 1; margin-bottom: 8px; }
.pv2-empty strong { color: var(--text); display: block; }
.pv2-empty .btn { margin-top: 12px; }

/* ---------- the Book flow ---------- */
.pv2-steps { display: flex; gap: 6px; margin: 0 0 12px; font-size: 11.5px; color: var(--muted); flex-wrap: wrap; }
.pv2-steps span { padding: 4px 10px; border-radius: 999px; background: var(--surface-2); }
.pv2-steps span.on { background: var(--brand); color: #fff; }
.pv2-steps span.done { background: color-mix(in srgb, var(--brand) 18%, transparent); color: var(--brand-dark); }
.pv2-opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 1px solid var(--border); background: var(--surface);
  color: var(--text); border-radius: 12px; padding: 12px; min-height: 56px; margin-bottom: 8px; font: inherit; cursor: pointer; }
.pv2-opt:hover { border-color: var(--brand); }
.pv2-opt.on { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 25%, transparent); }
.pv2-opt > div { flex: 1; min-width: 0; }
.pv2-opt small { color: var(--muted); display: block; font-size: 12px; }
.pv2-opt .dg-photo { width: 40px; height: 40px; font-size: 14px; }
.pv2-opt .fee { flex: none; font-weight: 600; font-size: 13px; white-space: nowrap; }
.pv2-policy { font-size: 12.5px; color: var(--muted); background: var(--surface-2); border-radius: 10px; padding: 10px 12px; margin-top: 10px; line-height: 1.45; }
.book-day, .book-slot { min-height: 44px; }
.book-slot small { display: block; font-size: 10.5px; opacity: .8; }
.req-modal { width: min(560px, 94vw); max-height: 92vh; overflow: auto; }

/* ---------- notification settings ---------- */
.pv2-toggle { padding: 10px 0; border-top: 1px solid var(--border); }
.pv2-toggle:first-child { border-top: 0; }
.pv2-toggle strong { display: block; font-size: 13.5px; }
.pv2-toggles { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.pv2-toggles label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; min-height: 44px; padding: 0 4px; cursor: pointer; }
.pv2-toggles input { width: 22px; height: 22px; accent-color: var(--brand); }

/* ---------- loading without layout shift ---------- */
.pv2-skel { background: linear-gradient(90deg, var(--surface-2), var(--surface), var(--surface-2)); background-size: 200% 100%;
  animation: pv2sk 1.2s infinite; border-radius: 12px; min-height: 96px; }
@keyframes pv2sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .pv2-skel { animation: none; } .pv2-bar i { transition: none; } }
.pv2-qr { max-width: 180px; margin: 10px auto; }
.pv2-qr[hidden] { display: none; }

/* ---------- desktop ---------- */
@media (min-width: 760px) {
  .pv2-tabs { position: sticky; top: 60px; bottom: auto; border-top: 0; border-bottom: 1px solid var(--border);
    grid-template-columns: repeat(5, minmax(0, 170px)); justify-content: center; }
  .pv2-tabs button { flex-direction: row; gap: 8px; font-size: 13.5px; min-height: 48px; }
  .pv2-tabs button i { font-size: 16px; }
  .pv2-tabs button .pv2-dot { margin-left: 0; margin-top: -18px; }
  .pv2-main { padding: 24px 24px 40px; }
  .pv2-hero .when { font-size: 26px; }
}

/* ---------- Phase 4: journey stepper, records gallery, stars, instructions ---------- */
.pv2-stepper { list-style: none; margin: 8px 0 0; padding: 0; }
.pv2-stepper li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; }
.pv2-stepper li i { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 700;
  background: var(--surface-2); color: var(--muted); border: 2px solid var(--border); }
.pv2-stepper li.done i { background: var(--brand); color: #fff; border-color: var(--brand); }
.pv2-stepper li.now i { border-color: var(--brand); color: var(--brand-dark); background: color-mix(in srgb, var(--brand) 14%, transparent); }
.pv2-stepper li.skip i { text-decoration: line-through; }
.pv2-stepper li strong { display: block; font-size: 13.5px; } .pv2-stepper li small { display: block; }
.pv2-aligner { display: flex; gap: 12px; align-items: center; background: color-mix(in srgb, var(--brand) 8%, transparent); border-radius: 12px; padding: 10px 12px; margin: 4px 0 8px; }
.pv2-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-bottom: 8px; }
.pv2-tile { display: block; position: relative; border-radius: 10px; overflow: hidden; background: var(--surface-2); aspect-ratio: 4 / 3; }
.pv2-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv2-tile .chip { position: absolute; left: 6px; bottom: 6px; }
.pv2-ins { border-top: 1px solid var(--border); padding: 8px 0; } .pv2-ins:first-of-type { border-top: 0; }
.pv2-ins summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; } .pv2-ins p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; }
.pv2-stars { display: flex; gap: 6px; justify-content: center; }
.pv2-stars button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); font-size: 26px; line-height: 1; color: var(--muted); cursor: pointer; }
.pv2-stars button.on { color: #f59e0b; border-color: #f59e0b; background: color-mix(in srgb, #f59e0b 12%, transparent); }

/* All-on-X journey (Oct 2026) */
.pv2-sub { margin: 14px 0 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.pv2-inc { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.pv2-inc li { margin: 2px 0; }