/* The welcome walkthrough and the empty-state pattern (Direction A, approved by Jocelyn Oct 26, 2026; CEO, Oct 26, 2026).
   Same file in the team portal and the family app. Colors from the brief: brand teal #2E8075, deep teal #184E49, soft teal #DCEDE9. */
html.wk-on, html.wk-on body { overflow: hidden; }
/* the opening cover (CEO, Oct 26, 2026: "it glitched and showed the main app first"): when the walkthrough may be due, an inline script in
   index.html / family.html puts wk-pre on <html> before the first paint, so Home never shows before page 1. It is the opening screen of
   Direction A and the iPhone launch screen (logo + line centered at 38%, the soft-teal and teal sweep), so the launch screen, this cover
   and page 1 follow on without a jump. js/welcome.js drops it the moment the seen-status says no walkthrough, fades it under page 1 when
   the walkthrough opens, and always after 4 s. Never over sign-in (js/signin.js drops it; sign-in is z-index 1000 anyway). */
/* the soft-teal and teal sweep, kept in one place: this cover and the iPhone app's "Welcome back" Face ID screen (js/native.js) */
:root { --hh-sweep: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 60 270 200' preserveAspectRatio='none'%3E%3Cpath d='M0 260V150C70 70 200 60 270 120V260Z' fill='%23DCEDE9'/%3E%3Cpath d='M60 260C110 170 200 150 270 180V260Z' fill='%232E8075'/%3E%3C/svg%3E"); }
html.wk-pre::before { content: ''; position: fixed; inset: 0; z-index: 949; background: #fff var(--hh-sweep) no-repeat center bottom / 100% min(74.07vw, 40vh); pointer-events: auto; }
html.wk-pre::after { content: 'Home care, here for you.'; position: fixed; left: 0; right: 0; top: calc(38% - 62px); z-index: 949; padding-top: 77px; background: url(../img/brand/logo-nosub.png) no-repeat center top / 210px auto; text-align: center; white-space: nowrap; font: 500 24px/1.2 Newsreader, Georgia, serif; color: #4A5553; pointer-events: none; }
html.wk-pre.wk-pre-out::before, html.wk-pre.wk-pre-out::after { opacity: 0; transition: opacity .25s ease-out; }
html.wk-pre, html.wk-pre body { overflow: hidden; }
.wk { position: fixed; inset: 0; z-index: 950; background: #fff; color: #16211F; font-family: Figtree, system-ui, -apple-system, sans-serif; font-weight: 500; -webkit-font-smoothing: antialiased; animation: wk-in .22s ease-out; }
.wk-win { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; padding: calc(env(safe-area-inset-top, 0px) + 8px) 0 calc(env(safe-area-inset-bottom, 0px) + 16px); overflow: hidden; }
.wk-top { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 44px; padding: 0 12px 0 24px; }
.wk-bar { display: flex; gap: 6px; }
.wk-bar span { width: 28px; height: 4px; border-radius: 4px; background: #E7E5E0; transition: background .2s; }
.wk-bar span.on { background: #2E8075; }
.wk .wk-skip { font: 600 15px Figtree, system-ui, sans-serif; color: #6F7977; background: none; border: 0; min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: 10px; cursor: pointer; }
.wk-view { flex: 1 1 auto; min-height: 0; overflow: hidden; touch-action: pan-y; }
.wk-track { display: flex; height: 100%; transition: transform .32s cubic-bezier(.2, .8, .2, 1); will-change: transform; }
.wk-drag .wk-track, .wk-rm .wk-track { transition: none; }
.wk-pg { flex: 0 0 100%; min-width: 0; height: 100%; display: flex; flex-direction: column; padding: 0 24px; box-sizing: border-box; }
.wk-ill { flex: 1 1 0; min-height: 96px; position: relative; }
/* the drawing spans the full text column, as in prototype A (.ill svg { width: 100%; max-height: 220px } on its 270px mock = about 318px
   on a 390px phone); it was capped at 320 x 260, a little smaller than approved */
.wk-ill svg { position: absolute; inset: 0; margin: auto; width: 100%; height: 100%; max-height: 318px; }
.wk-txt { flex: none; padding-top: 8px; }
.wk .wk-txt h2 { font: 500 25px/1.15 Newsreader, Georgia, serif; letter-spacing: -.01em; margin: 0 0 8px; color: #16211F; text-wrap: balance; }
.wk .wk-txt p { margin: 0 0 20px; font-size: 15px; line-height: 1.45; color: #4A5553; }
.wk .wk-txt p.wk-lock { display: flex; align-items: center; justify-content: center; gap: 6px; margin: -6px 0 12px; font-size: 12.5px; color: #6F7977; }
.wk-lock svg { width: 14px; height: 14px; flex: none; }
.wk .wk-btn { display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; min-height: 50px; border: 0; border-radius: 12px; background: #184E49; color: #fff; font: 700 15px Figtree, system-ui, sans-serif; cursor: pointer; }
.wk-btn:disabled { opacity: .7; }
.wk .wk-not { display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; min-height: 44px; margin-top: 4px; border: 0; background: none; color: #4A5553; font: 600 15px Figtree, system-ui, sans-serif; cursor: pointer; border-radius: 10px; }
.wk:focus { outline: none; }
.wk button:focus-visible { outline: 2px solid #2E8075; outline-offset: 2px; }
/* a short phone (iPhone SE, 667 tall): a smaller drawing and tighter space, so Skip and the button stay on screen without scrolling */
@media (max-height: 700px) { .wk .wk-txt h2 { font-size: 23px; } .wk .wk-txt p { margin-bottom: 16px; } .wk-ill svg { max-height: 210px; } }
/* a computer: the same pages in a centered 420px window over the dimmed app */
@media (min-width: 700px) and (min-height: 560px) {
  .wk { background: rgba(16, 24, 22, .55); display: flex; align-items: center; justify-content: center; }
  .wk-win { position: relative; inset: auto; width: 420px; height: min(700px, calc(100vh - 48px)); border-radius: 20px; padding: 14px 0 24px; box-shadow: 0 24px 60px rgba(10, 20, 18, .35); animation: wk-up .24s ease-out; }
}
@keyframes wk-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes wk-up { from { transform: translateY(12px); } to { transform: none; } }
.wk-rm, .wk-rm .wk-win { animation: none; }
@media (prefers-reduced-motion: reduce) { .wk, .wk-win { animation: none; } .wk-track, .wk-bar span { transition: none; } html.wk-pre.wk-pre-out::before, html.wk-pre.wk-pre-out::after { transition: none; } }

/* empty pages: a centered 170px drawing, a Newsreader 21px title, one grey line, an optional teal text link */
.hh-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px 26px 32px; }
.hh-empty > svg { width: 170px; height: auto; margin-bottom: 14px; }
.hh-empty .hh-empty-h { font: 500 21px/1.2 Newsreader, Georgia, serif; margin: 0 0 6px; color: #16211F; letter-spacing: 0; text-transform: none; }
.hh-empty .hh-empty-x { margin: 0; max-width: 34ch; font: 500 14.5px/1.45 Figtree, system-ui, sans-serif; color: #4A5553; }
.hh-empty .hh-empty-l { margin-top: 14px; min-height: 44px; padding: 0 12px; border: 0; background: none; color: #184E49; font: 700 15px Figtree, system-ui, sans-serif; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; border-radius: 10px; }
.hh-empty-l:focus-visible { outline: 2px solid #2E8075; outline-offset: 2px; }