:root { --ink:#171616; --muted:#595854; --line:#ddded8; --paper:#fff; --sage:#dce8c2; --sage-dark:#344c20; --peach:#f8e6a8; --blue:#d9edf3; --radius:18px; }
* { box-sizing:border-box; }
body { margin:0; background:#fff; color:var(--ink); font-family:Montserrat, Arial, sans-serif; }
button { font:inherit; color:inherit; cursor:pointer; }
.app-shell { min-height:100vh; min-height:100dvh; max-width:760px; margin:auto; background:var(--paper); padding-bottom:calc(88px + env(safe-area-inset-bottom)); box-shadow:none; }
.topbar { min-height:72px; display:flex; align-items:center; justify-content:center; position:relative; padding:8px 22px; border-bottom:1px solid var(--line); }
.wordmark { border:0; background:none; padding:0; line-height:0; text-align:center; }.wordmark img { display:block; width:152px; height:48px; object-fit:contain; }
.topbar.staff-header { justify-content:flex-start; }
.staff-link { position:absolute; right:14px; border:0; background:var(--sage); color:var(--sage-dark); border-radius:99px; padding:7px 11px; font-size:11px; font-weight:700; }
.staff-page { max-width:860px; margin:auto; }.staff-panel { border:1px solid var(--line); border-radius:14px; background:#fff; padding:16px; margin:16px 0; }.staff-panel h2 { font-size:18px; }.staff-row { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:12px 0; border-top:1px solid var(--line); }.staff-row:first-of-type { border-top:0; }.staff-row b,.staff-row small { display:block; }.staff-row small { color:var(--muted); font-size:11px; margin-top:4px; }.staff-client { display:block; width:100%; text-align:left; background:#fff; border:0; border-top:1px solid var(--line); padding:13px 0; }.staff-client b,.staff-client small { display:block; }.staff-client small { color:var(--muted); font-size:11px; margin-top:4px; }.staff-panel input { width:100%; border:1px solid var(--line); padding:11px; font:inherit; margin-bottom:8px; }.client-suggestions { border:1px solid var(--line); border-radius:10px; overflow:hidden; margin-top:2px; }.client-suggestions .eyebrow { margin:10px 12px 2px; }.client-suggestions .lede { margin:10px 12px; }.staff-session { border-top:1px solid var(--line); }.staff-session.alternate { background:#f7f6f3; }.staff-session summary { cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:14px; list-style:none; padding:12px; }.staff-session summary::-webkit-details-marker { display:none; }.staff-session summary b,.staff-session summary small { display:block; }.staff-session summary small { color:var(--muted); font-size:11px; margin-top:4px; }.staff-roster { border-top:1px solid var(--line); margin:0 12px; padding:14px 2px 2px; }.staff-roster h3 { margin:0; }.staff-roster-row { align-items:center; }.staff-roster-dog-photo { flex:0 0 46px; width:46px; height:58px; border-radius:8px; font-size:22px; }.staff-row-content { min-width:0; flex:1; }.staff-row .staff-roster-details { display:block; line-height:1.35; }.staff-roster-contact { display:block; }.staff-roster-status,.staff-roster-note { display:inline; }.staff-roster-note { color:var(--ink); }.staff-roster-note::before { content:" · "; color:var(--muted); }.weekly-defaults { border-top:1px solid var(--line); color:var(--muted); font-size:13px; margin-top:12px; padding-top:12px; }.weekly-defaults summary { cursor:pointer; font-weight:700; color:var(--ink); }
.page { padding:28px 20px 32px; }.eyebrow { color:var(--sage-dark); font-size:11px; font-weight:700; letter-spacing:1.1px; text-transform:uppercase; margin:0 0 8px; }
h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:Merriweather, Georgia, serif; letter-spacing:-.6px; } h1 { font-size:31px; line-height:1.2; margin-bottom:12px; } h2 { font-size:22px; margin-bottom:10px; } h3 { font-size:17px; margin-bottom:7px; }
.lede { color:var(--muted); line-height:1.6; font-size:14px; margin-bottom:25px; }.section-head { display:flex; align-items:baseline; justify-content:space-between; margin:29px 0 13px; }.section-head h2 { margin:0; }.text-link { border:0; background:none; padding:0; color:var(--sage-dark); font-size:12px; font-weight:700; text-decoration:underline; }
.hero { background:var(--sage); border-radius:var(--radius); padding:22px; overflow:hidden; position:relative; }.hero:after { content:""; position:absolute; width:130px; height:130px; right:-55px; bottom:-68px; border:22px solid rgba(255,255,255,.48); border-radius:50%; }
.hero h1 { max-width:350px; margin-bottom:10px; }.hero p { max-width:405px; color:#314c38; font-size:13px; line-height:1.55; margin-bottom:20px; }.button { border:1px solid var(--ink); background:var(--ink); color:white; padding:12px 16px; border-radius:2px; font-size:12px; font-weight:700; }.button.secondary { background:transparent; color:var(--ink); }.button:disabled { opacity:.42; cursor:not-allowed; }
.home-empty-state,.home-dog-card { display:flex; align-items:center; gap:14px; border:1px solid var(--line); border-radius:var(--radius); background:var(--blue); padding:18px; }.home-empty-state { margin-top:24px; align-items:flex-start; }.home-empty-state > div:last-child { flex:1; }.home-empty-state h2,.home-dog-card h2 { font-size:19px; margin-bottom:5px; }.home-empty-state p,.home-dog-card p:not(.eyebrow) { color:#52646c; font-size:12px; line-height:1.5; margin-bottom:13px; }.home-dog-avatar { flex:0 0 58px; width:58px; height:58px; display:grid; place-items:center; border-radius:50%; background:#fff; font-size:30px; }.home-dog-card { margin:19px 0 8px; }.home-dog-card > div:nth-child(2) { min-width:0; flex:1; }.home-dog-card .eyebrow { margin-bottom:4px; }.home-dog-card .text-link { flex:0 0 auto; align-self:center; }.home-schedule-action { display:block; width:100%; margin:22px 0 10px; }
.welcome-page { max-width:560px; margin:auto; }.welcome-title { color:var(--ink); font-family:Montserrat,Arial,sans-serif; font-size:22px; font-weight:700; letter-spacing:.2px; margin-bottom:22px; text-align:center; }.welcome-illustration { display:flex; justify-content:center; margin:0 0 24px; }.welcome-illustration img { display:block; width:min(100%,195px); height:auto; }.welcome-copy { color:var(--muted); font-size:14px; line-height:1.65; }.welcome-copy p { margin-bottom:18px; }.welcome-copy p:last-child { margin-bottom:0; }
.credit-card { border:1px solid var(--line); border-radius:var(--radius); padding:18px; background:#fff; }.credit-top { display:flex; justify-content:space-between; gap:14px; }.credit-label { font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--muted); font-weight:700; }.credit-number { font-family:Merriweather, Georgia, serif; font-size:32px; margin:7px 0 3px; }.status { white-space:nowrap; align-self:flex-start; background:var(--sage); color:var(--sage-dark); border-radius:99px; padding:6px 9px; font-size:10px; font-weight:700; }.progress { height:5px; background:#eee9e1; margin:17px 0 11px; border-radius:9px; overflow:hidden; }.progress > span { display:block; width:75%; height:100%; background:var(--sage-dark); }.credit-foot { display:flex; justify-content:space-between; color:var(--muted); font-size:11px; }
.credit-card.inactive { background:#f7f6f3; }.credit-card.inactive .status { background:#e7e3dc; color:#746f68; }.credit-card.inactive .progress > span { background:#aaa49b; }
.inactive-packages { border-top:1px solid var(--line); margin-top:24px; padding-top:16px; }.inactive-packages summary { cursor:pointer; display:flex; align-items:center; justify-content:space-between; color:var(--ink); font-family:Merriweather,Georgia,serif; font-size:18px; font-weight:700; }.inactive-packages summary span { font-family:Montserrat,sans-serif; font-size:11px; color:var(--muted); }.inactive-packages .credit-card { margin-top:14px; }
.class-card { display:flex; gap:13px; padding:15px 0; border-top:1px solid var(--line); }.class-card:last-child { border-bottom:1px solid var(--line); }.date-tile { width:45px; flex:0 0 45px; text-align:center; border:1px solid var(--line); padding:6px 2px; height:51px; }.date-tile b { display:block; font-size:16px; line-height:18px; }.date-tile span { font-size:9px; color:var(--muted); font-weight:700; text-transform:uppercase; }.class-body { flex:1; }.meta { color:var(--muted); font-size:11px; line-height:1.5; }.class-title { font-family:Merriweather,Georgia,serif; font-size:15px; margin:3px 0; }.inline-action { align-self:center; border:0; background:none; text-decoration:underline; font-size:11px; font-weight:700; padding:6px 0; }
.notice { display:flex; gap:11px; align-items:flex-start; padding:15px; border-radius:12px; background:var(--peach); font-size:12px; line-height:1.5; }.notice.success { background:var(--sage); color:var(--sage-dark); }.notice strong { display:block; margin-bottom:2px; }.notice .symbol { font-family:Merriweather,serif; font-size:19px; }
.tabs { display:flex; gap:8px; overflow:auto; padding-bottom:3px; margin-bottom:18px; }.tabs button { white-space:nowrap; border:1px solid var(--line); border-radius:99px; background:white; padding:8px 11px; font-size:11px; }.tabs button.active { border-color:var(--ink); background:var(--ink); color:#fff; }
.schedule-date { font-family:Merriweather,Georgia,serif; font-size:18px; margin:7px 0 17px; }.schedule-card { border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:10px; }.schedule-card .row { display:flex; justify-content:space-between; gap:10px; }.schedule-card p { color:var(--muted); font-size:12px; line-height:1.5; margin:8px 0 13px; }.spaces { color:var(--sage-dark); font-size:11px; font-weight:700; }.lock { border-color:#e8d7ca; background:#fffdfb; }.lock .spaces { color:#9a5b31; }
.product { border:1px solid var(--line); border-radius:15px; padding:17px; margin-bottom:12px; }.product-top { display:flex; justify-content:space-between; gap:16px; }.price,.group-price { font-family:Merriweather,Georgia,serif; font-size:18px; white-space:nowrap; }.product p { color:var(--muted); font-size:12px; line-height:1.55; margin:9px 0 14px; }.product-foot,.package-group-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:11px; }.tag { color:var(--sage-dark); font-weight:700; }.product button,.package-group button { border:0; background:none; padding:0; font-size:11px; font-weight:700; text-decoration:underline; }.package-group { border:1px solid var(--line); border-radius:15px; padding:17px; margin-bottom:12px; background:#fff; }.package-group-top { display:flex; justify-content:space-between; gap:15px; }.package-group h2 { font-size:19px; margin-bottom:6px; }.package-group p { color:var(--muted); font-size:12px; line-height:1.55; margin:0; }.package-picker { display:block; margin:18px 0 12px; }.package-picker span,.package-description > span { display:block; color:var(--sage-dark); font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; margin-bottom:7px; }.package-picker select { display:block; width:100%; border:1px solid #cfc8be; border-radius:3px; background:#fffdfa; padding:12px; color:var(--ink); font:inherit; font-size:12px; }.package-description { border-top:1px solid var(--line); padding:14px 0; }.package-description p { color:var(--muted); font-size:12px; line-height:1.6; margin:0; }.package-description-intro { color:var(--ink) !important; }.package-description-expanded { margin-top:12px !important; }.package-description-toggle { color:var(--sage-dark); font-weight:400 !important; margin-left:4px !important; white-space:nowrap; }
.profile-card { background:var(--blue); border-radius:var(--radius); padding:18px; }.dog-row { display:flex; align-items:center; gap:12px; }.dog-avatar { width:53px; height:53px; border-radius:50%; display:grid; place-items:center; background:#fff; font-size:27px; }.dog-row p { color:#52646c; font-size:12px; margin:3px 0 0; }.detail-list { margin-top:18px; background:white; border:1px solid rgba(0,0,0,.05); border-radius:12px; }.detail { padding:13px 14px; display:flex; justify-content:space-between; gap:15px; border-bottom:1px solid var(--line); font-size:12px; }.detail:last-child { border-bottom:0; }.detail span:last-child { font-weight:700; text-align:right; }.add-dog-button { display:block; width:100%; margin:14px 0 24px; }
.media-upload-controls { display:grid; gap:12px; margin-top:16px; }.media-upload-form { padding:13px; border:1px solid rgba(54,91,66,.2); border-radius:12px; background:rgba(255,255,255,.65); }.media-upload { display:grid; gap:7px; color:var(--ink); font-size:12px; font-weight:700; }.media-upload input { width:100%; font:inherit; font-size:12px; }.media-upload-file { min-height:17px; margin:8px 0 10px; color:var(--muted); font-size:11px; overflow-wrap:anywhere; }.media-upload-button { width:100%; }
.demo-toggle { margin-top:26px; padding-top:19px; border-top:1px solid var(--line); }.demo-toggle h3 { font-family:Montserrat,sans-serif; font-size:12px; letter-spacing:.3px; }.toggle-row { display:flex; gap:8px; }.toggle-row button { flex:1; border:1px solid var(--line); background:#fff; padding:10px; font-size:11px; }.toggle-row button.active { background:var(--ink); color:#fff; border-color:var(--ink); }
.account-actions { margin-top:25px; }.logout-button { display:block; width:100%; margin-top:12px; border:1px solid var(--line); background:transparent; padding:11px; border-radius:3px; font-size:12px; font-weight:700; }.logout-button:hover { border-color:var(--ink); }.google-signin-button { width:100%; min-height:44px; margin-top:12px; padding:0 12px; display:flex; align-items:center; justify-content:center; gap:12px; border:1px solid #747775; border-radius:4px; background:#fff; color:#1f1f1f; box-shadow:0 1px 2px rgba(60,64,67,.18); font-family:Roboto,Arial,sans-serif; font-size:14px; font-weight:500; letter-spacing:.25px; }.google-signin-button:hover { background:#f8faff; box-shadow:0 1px 3px rgba(60,64,67,.28); }.google-signin-button:focus-visible { outline:3px solid #4285f4; outline-offset:2px; }.google-signin-icon { width:18px; height:18px; flex:none; }.auth-switch { display:block; width:100%; margin-top:12px; border:1px solid var(--sage-dark); border-radius:3px; background:var(--sage); color:#243d2c; padding:12px; font-size:12px; font-weight:700; }.auth-switch:hover { background:#d1e2ce; }.login-card { border:1px solid var(--line); border-radius:var(--radius); background:#fff; padding:18px; margin:24px 0 17px; }.login-card label { display:block; font-size:11px; font-weight:700; margin-bottom:7px; }.login-card input { display:block; width:100%; border:1px solid #cfc8be; background:#fffdfa; padding:13px; margin-bottom:11px; font:inherit; font-size:13px; border-radius:2px; }.login-card .button { width:100%; }.login-help { margin:14px 0 0; color:var(--muted); font-size:11px; line-height:1.55; }.back-link { margin-top:22px; }
.notice.mini { padding:11px; font-size:11px; margin-bottom:10px; }.notice.mini .symbol { font-size:15px; }.cancel-booking { margin-left:14px; }.mock-actions { display:flex; flex-wrap:wrap; gap:16px; margin-top:18px; }.db-view { overflow:auto; max-height:580px; white-space:pre-wrap; word-break:break-word; background:#1f2420; color:#e5f0e2; padding:16px; border-radius:12px; font:11px/1.5 ui-monospace,Consolas,monospace; margin:22px 0; }
.program-card { padding-bottom:16px; }.day-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin:15px 0 13px; }.day-slot { min-height:77px; border:1px solid var(--line); background:#fff; padding:7px 3px; text-align:center; display:flex; flex-direction:column; gap:2px; align-items:center; justify-content:center; }.day-slot:not(:disabled):hover { border-color:var(--sage-dark); background:var(--sage); }.day-slot:disabled { cursor:not-allowed; opacity:.62; }.day-slot.booked { border-color:var(--sage-dark); background:var(--sage); }.day-slot span,.day-slot small { font-size:9px; color:var(--muted); }.day-slot b { font-family:Merriweather,Georgia,serif; font-size:17px; }.day-slot.booked small { color:var(--sage-dark); font-weight:700; }.program-note { color:var(--sage-dark); font-size:11px; font-weight:700; }
.bottom-nav { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:min(760px,100%); height:75px; background:rgba(255,253,250,.96); backdrop-filter:blur(10px); border-top:1px solid var(--line); display:flex; justify-content:space-around; z-index:5; }.bottom-nav button { width:25%; border:0; background:none; color:var(--muted); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; font-size:10px; }.bottom-nav button.active { color:var(--ink); font-weight:700; }.nav-icon { font-size:19px; line-height:16px; }
.modal-backdrop { position:fixed; inset:0; z-index:10; background:rgba(23,22,20,.36); display:flex; align-items:end; overflow-y:auto; }.modal { background:var(--paper); width:100%; max-width:760px; margin:auto; padding:24px 20px calc(32px + env(safe-area-inset-bottom)); border-radius:22px 22px 0 0; }.modal h2 { margin-bottom:9px; }.modal p { font-size:13px; line-height:1.55; color:var(--muted); }.modal form { display:grid; gap:14px; }.modal form label { display:grid; gap:7px; font-size:12px; font-weight:700; }.modal form input,.modal form select,.modal form textarea { width:100%; border:1px solid #cfc8be; border-radius:3px; background:#fffdfa; color:var(--ink); padding:12px; font:inherit; font-size:13px; }.modal form textarea { resize:vertical; }.modal .button { width:100%; margin-top:10px; }.close { float:right; border:0; background:none; font-size:20px; padding:0; }
.modal .dropoff-options { border:0; padding:0; margin:0; }.modal .dropoff-options legend { font-size:12px; font-weight:700; margin-bottom:7px; }.modal .dropoff-options > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.modal .dropoff-options label { display:flex; align-items:center; justify-content:center; min-height:58px; padding:10px 14px; border:1px solid #bdb5a9; border-radius:7px; background:#fffdfa; color:var(--ink); cursor:pointer; font-size:14px; font-weight:700; }.modal .dropoff-options input { appearance:none; -webkit-appearance:none; width:24px; height:24px; flex:0 0 24px; margin:0 10px 0 0; padding:0; border:2px solid #6f695f; border-radius:5px; background:#fff; }.modal .dropoff-options input:checked { border-color:var(--sage-dark); background:var(--sage-dark); box-shadow:inset 0 0 0 4px #fff; }.modal .dropoff-options label:has(input:checked) { border-color:var(--sage-dark); background:var(--sage); color:var(--sage-dark); }.modal .dropoff-options label:focus-within { outline:3px solid var(--sage-dark); outline-offset:2px; }
.leash-number { flex:0 0 55px; color:var(--sage-dark); font-size:11px; font-weight:700; }
.transaction-list .detail span:first-child { display:flex; flex-direction:column; gap:3px; }.transaction-list small { color:var(--muted); font-weight:500; }.reservation-detail { align-items:center; padding:16px 14px; }.reservation-date-time { color:var(--ink); font-family:Merriweather,Georgia,serif; font-size:15px; line-height:1.35; }
.onboarding-page { max-width:560px; margin:auto; }.onboarding-progress { display:flex; gap:5px; margin:18px 0 28px; overflow:auto; padding-bottom:3px; }.onboarding-progress span { display:flex; align-items:center; gap:5px; color:var(--muted); font-size:10px; font-weight:700; white-space:nowrap; }.onboarding-progress i { display:grid; place-items:center; width:21px; height:21px; border:1px solid var(--line); border-radius:50%; background:#fff; font-style:normal; }.onboarding-progress .complete { color:var(--sage-dark); }.onboarding-progress .complete i { border-color:var(--sage-dark); background:var(--sage); }.onboarding-progress .current i { background:var(--ink); border-color:var(--ink); color:#fff; }.onboarding-form { display:grid; gap:14px; }.onboarding-form label { display:grid; gap:7px; font-size:12px; font-weight:700; }.onboarding-form input,.onboarding-form select,.onboarding-form textarea { width:100%; border:1px solid #cfc8be; border-radius:3px; background:#fffdfa; color:var(--ink); padding:12px; font:inherit; font-size:13px; }.onboarding-form textarea { resize:vertical; }.onboarding-form small { color:var(--muted); font-size:10px; font-weight:500; line-height:1.45; }.onboarding-form .optional { color:var(--muted); font-weight:500; }.onboarding-form .checkbox-label { display:flex; align-items:flex-start; gap:9px; line-height:1.5; }.onboarding-form .checkbox-label input { width:auto; margin-top:2px; }.onboarding-form .button { margin-top:6px; }.onboarding-signout { display:block; margin:28px auto 0; }
.client-dog-names { color:var(--sage-dark); font-size:14px; font-weight:700; margin:-3px 0 8px; }.dog-photo-frame { overflow:hidden; position:relative; display:grid; place-items:center; isolation:isolate; background:#d8e5e3; }.dog-photo-backdrop,.dog-photo-image { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }.dog-photo-backdrop { object-fit:cover; filter:blur(15px); opacity:.48; transform:scale(1.12); }.dog-photo-image { object-fit:contain; object-position:var(--photo-focus-x) var(--photo-focus-y); transform:scale(var(--photo-zoom)); transform-origin:center; z-index:1; }.dog-avatar-fallback { z-index:0; }.home-dog-avatar,.dog-avatar { overflow:hidden; position:relative; }.home-dog-avatar img,.dog-avatar img { position:absolute; inset:0; width:100%; height:100%; }.account-dog-photo { flex:0 0 108px; width:108px; height:135px; border-radius:12px; font-size:38px; }.account-dog-card + .account-dog-card { border-top:1px solid rgba(0,0,0,.12); margin-top:18px; padding-top:18px; }.account-dog-card .dog-row { align-items:flex-start; }.photo-actions { display:flex; flex-wrap:wrap; gap:10px 14px; margin-top:11px; }.staff-dog-card { display:flex; align-items:flex-start; gap:12px; padding:14px 0; border-top:1px solid var(--line); }.staff-dog-card:first-of-type { border-top:0; }.staff-dog-photo { flex:0 0 76px; width:76px; height:95px; border-radius:10px; font-size:31px; }.staff-dog-content { min-width:0; flex:1; }.staff-dog-content b,.staff-dog-content small { display:block; }.staff-dog-content small { color:var(--muted); font-size:11px; line-height:1.45; margin-top:4px; }.staff-dog-actions { display:flex; flex-wrap:wrap; gap:8px 13px; margin-top:10px; }.photo-framing-preview { width:min(100%,280px); aspect-ratio:4 / 5; margin:18px auto 10px; border-radius:14px; overflow:hidden; touch-action:none; cursor:grab; }.photo-framing-preview:active { cursor:grabbing; }.photo-framing-preview .photo-framing-photo { width:100%; height:100%; font-size:55px; }.photo-framing-help { text-align:center; margin:0 0 18px; }.photo-framing-actions { display:grid; grid-template-columns:1fr 1.4fr; gap:10px; }.photo-framing-actions .button { margin-top:0; }.modal .photo-framing-actions .button.secondary { background:transparent; color:var(--ink); }.modal .booking-error { margin:15px 0; }.portal-program-card .day-grid { margin:7px 0 14px; }.portal-program-card .day-slot { min-height:72px; }.portal-program-card .day-slot.selected { border-color:var(--sage-dark); background:var(--sage); }.portal-program-card .day-slot.unavailable { color:var(--muted); background:#f2f0ec; border-color:#e3ded5; opacity:.68; }.portal-program-card .day-slot.unavailable small { color:var(--muted); }.schedule-week + .schedule-week { border-top:1px solid var(--line); padding-top:13px; margin-top:4px; }.schedule-week-label { display:block; color:var(--sage-dark); font-size:10px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; }.portal-session-detail { display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:14px; }.portal-session-detail b,.portal-session-detail small { display:block; }.portal-session-detail b { font-size:12px; }.portal-session-detail small { color:var(--muted); font-size:11px; margin-top:4px; }.portal-session-detail .button { white-space:nowrap; }.enroll-class-action:focus-visible { outline:3px solid var(--sage-dark); outline-offset:3px; } @media (hover:hover) { .enroll-class-action:hover { border-color:var(--sage-dark); background:var(--sage); color:var(--sage-dark); box-shadow:0 2px 0 rgba(54,91,66,.18); } }
@media (min-width:700px) { .page { padding:40px 48px; }.topbar { padding:0 48px; }.hero { padding:30px; }.bottom-nav { height:68px; } }
@media (max-width:699px) { input,select,textarea { font-size:16px !important; } }

/* The photo editor uses a single horizontal zoom control; keep touch gestures in the sheet. */
.photo-framing-preview { touch-action:none; cursor:grab; }
.photo-framing-preview:active { cursor:grabbing; }
.photo-framing-modal input[type="range"] { touch-action:pan-x; }
.photo-frame-modal-open { overflow:hidden; overscroll-behavior:none; }
.portal-session-detail { border-top:1px solid var(--line); padding-top:14px; }.play-train-details { border-top:1px solid var(--line); margin-top:16px; padding-top:15px; }.play-train-details p { color:#494743; font-size:12px; line-height:1.6; margin:0 0 12px; }.play-train-details p:first-child { color:var(--ink); font-size:12.5px; line-height:1.5; }.play-train-details p:last-child { margin-bottom:0; }.play-train-details a,.play-train-details strong { color:var(--sage-dark); font-weight:700; }.play-train-details p:first-child strong { color:var(--ink); }.play-train-details p:nth-child(2),.play-train-details p:nth-child(4),.play-train-details p:nth-child(5) { color:var(--ink); font-weight:600; }
.sunday-refresher-heading { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }.sunday-refresher-heading p { margin:5px 0 0; }.sunday-refresher-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:16px; }.sunday-refresher-column { min-width:0; border:1px solid var(--line); border-radius:10px; padding:12px; display:grid; gap:8px; }.sunday-refresher-column h3 { font-family:Merriweather,Georgia,serif; font-size:16px; margin:0; }.sunday-session-options { display:grid; gap:6px; }.sunday-session-option { border:1px solid var(--line); background:#fff; padding:7px; text-align:left; }.sunday-session-option.selected { border-color:var(--sage-dark); background:var(--sage); }.sunday-session-option b,.sunday-session-option small,.sunday-availability { display:block; }.sunday-session-option b { font-size:11px; }.sunday-session-option small,.sunday-availability { color:var(--muted); font-size:10px; margin-top:2px; }.sunday-refresher-column .button { width:100%; min-height:38px; padding:8px; font-size:11px; }
/* Keep the contact details anchored to the right edge on every viewport.
   On small screens, reserve a 30px gap and let the wordmark use the rest. */
@media (max-width:699px) { .topbar { display:flex; min-height:72px; padding:8px 14px; }.wordmark img { width:152px; height:48px; } }
.dog-photo-image { object-position:center; transform:translate(var(--photo-shift-x),var(--photo-shift-y)) scale(var(--photo-zoom)); }
.staff-dog-birth { color:var(--sage-dark) !important; font-weight:700; margin-top:5px !important; }
.staff-dog-actions { margin-top:16px; }
.contact-footer { display:grid; gap:9px; margin-top:42px; padding:24px 0 6px; border-top:1px solid var(--line); }.contact-footer .eyebrow { margin:0 0 2px; }.contact-footer a { display:inline-flex; align-items:center; min-height:28px; color:var(--sage-dark); font-size:13px; font-weight:700; line-height:1.35; text-decoration:none; }.contact-footer a:hover,.contact-footer a:focus-visible { text-decoration:underline; }.enroll-class-action:hover { box-shadow:none; }
.staff-roster-dog-link { display:block; margin:0; text-align:left; }
.account-dog-photo,.staff-dog-photo,.photo-framing-photo { aspect-ratio:4 / 5; }
.dog-photo-image { transform-box:border-box; }
.staff-dog-health { margin-top:13px; background:#fff; border:1px solid rgba(0,0,0,.05); border-radius:12px; overflow:hidden; }
.staff-dog-health > div { display:flex; justify-content:space-between; gap:14px; padding:11px 13px; border-bottom:1px solid var(--line); font-size:11px; }
.staff-dog-health > div:last-child { border-bottom:0; }
.staff-dog-health b { text-align:right; font-size:11px; }
.staff-dogs-count { color:var(--muted); font-size:11px; font-weight:700; }
.staff-recent-dog { width:100%; display:flex; align-items:center; gap:12px; padding:14px 0; border:0; border-top:1px solid var(--line); background:transparent; color:var(--ink); text-align:left; cursor:pointer; }
.staff-recent-dog:first-of-type { border-top:0; }
.staff-recent-dog:hover,.staff-recent-dog:focus-visible { background:var(--sage); }
.staff-recent-dog:focus-visible { outline:3px solid var(--sage-dark); outline-offset:2px; }
.staff-dogs-photo { flex:0 0 58px; width:58px; height:73px; border-radius:10px; font-size:26px; }
.staff-recent-dog-content { min-width:0; flex:1; }
.staff-recent-dog-content b,.staff-recent-dog-content small { display:block; }
.staff-recent-dog-content small { color:var(--muted); font-size:11px; line-height:1.45; margin-top:3px; }
.staff-recent-dog-open { color:var(--sage-dark); font-size:11px; font-weight:700; white-space:nowrap; }
.staff-dogs-pagination { display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:16px; margin-top:3px; border-top:1px solid var(--line); }
.staff-dogs-pagination .button { width:auto; margin:0; padding:9px 12px; font-size:11px; }
.staff-dogs-pagination span { color:var(--muted); font-size:11px; font-weight:700; text-align:center; }
.staff-dashboard-links { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin:16px 0 20px; }
.staff-dashboard-links .button { width:auto; margin:0; padding:10px 12px; font-size:11px; }
.staff-row-muted { color:var(--muted); font-size:11px; font-weight:700; }
.field-error { color:#b42318 !important; font-size:11px !important; font-weight:600 !important; line-height:1.4; margin-top:-2px; }
.onboarding-form [aria-invalid="true"],.login-card [aria-invalid="true"] { border-color:#b42318 !important; background:#fff8f7; }
.local-dev-auth { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 14px; background:#263f2d; color:#fff; font-size:11px; font-weight:700; }
.local-dev-auth span { color:#dfe9dc; text-transform:uppercase; letter-spacing:.7px; font-size:9px; }
.local-dev-auth label { display:flex; align-items:center; gap:7px; }
.local-dev-auth select { max-width:220px; border:1px solid #b9cbb8; border-radius:3px; background:#fff; color:#151515; padding:6px 8px; font:inherit; font-size:11px; }

/* Customer accessibility baseline: WCAG 2.2 AA plus a 48px touch-target standard. */
:root {
  --font-sans: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --focus: #005f80;
  --text-muted-accessible: #4a4844;
  --target-min: 48px;
}
html { font-size:100%; }
body { font-family:var(--font-sans); font-size:1.125rem; line-height:1.6; }
button,input,select,textarea { font-family:inherit; }
h1,h2,h3 { font-family:var(--font-display); letter-spacing:0; }
h1 { font-size:2rem; line-height:1.25; }
h2 { font-size:1.5rem; line-height:1.3; }
h3 { font-size:1.25rem; line-height:1.35; }
p,.lede,.meta,.product p,.package-group p,.schedule-card p,.play-train-details p,.dog-row p,.home-dog-card p:not(.eyebrow),.home-empty-state p,.detail,.reservation-date-time { font-size:1rem; line-height:1.6; }
.eyebrow,.credit-label,.package-picker span,.package-description > span,.schedule-week-label { font-size:1rem; letter-spacing:.04em; }
.skip-link { position:fixed; top:0; left:0; z-index:100; padding:.75rem 1rem; background:#fff; color:var(--ink); transform:translateY(-120%); }
.skip-link:focus { transform:translateY(0); outline:3px solid var(--focus); outline-offset:3px; }
:focus-visible { outline:3px solid var(--focus) !important; outline-offset:3px; }
button,.button,.logout-button,.auth-switch,.google-signin-button,.contact-footer a,.text-link,.inline-action,.package-group button,.product button { min-height:var(--target-min); }
.button,.logout-button,.auth-switch { display:inline-flex; align-items:center; justify-content:center; padding:.75rem 1rem; font-size:1rem; line-height:1.25; }
.text-link,.inline-action,.package-group button,.product button { display:inline-flex; align-items:center; padding:.5rem .25rem; font-size:1rem; line-height:1.25; }
.page { padding:2rem 1.25rem 2.5rem; }
.topbar { min-height:100px; }
.bottom-nav button { min-height:75px; font-size:1rem; gap:5px; }
.nav-icon { font-size:1.35rem; }
.home-actions { display:grid; grid-template-columns:1fr; gap:.75rem; margin:1.5rem 0 .5rem; }
.home-actions .button { width:100%; }
.section-head { align-items:center; gap:1rem; }
.notice { font-size:1rem; line-height:1.55; }
.notice.mini { font-size:1rem; }
.credit-label,.credit-foot,.status,.program-note,.spaces,.sunday-availability,.sunday-session-option small,.day-slot span,.day-slot small { font-size:1rem; }
.credit-number { font-size:2.25rem; }
.status { padding:.45rem .7rem; }
.package-picker select,.login-card input,.onboarding-form input,.onboarding-form select,.onboarding-form textarea,.modal form input,.modal form select,.modal form textarea { min-height:var(--target-min); font-size:1rem; padding:.75rem; }
.package-picker label,.login-card label,.onboarding-form label,.modal form label,.media-upload { font-size:1rem; }
.package-group,.product,.schedule-card,.credit-card,.profile-card { padding:1.25rem; }
.package-group-foot { align-items:stretch; flex-direction:column; font-size:1rem; }
.package-purchase-action { width:100%; }
.portal-session-detail { align-items:stretch; flex-direction:column; }
.portal-session-detail .button { width:100%; white-space:normal; }
.day-slot { min-height:88px; padding:.5rem; }
.day-slot b { font-size:1.125rem; }
.sunday-refresher-columns { grid-template-columns:1fr; }
.sunday-refresher-column .button { min-height:var(--target-min); font-size:1rem; }
.contact-footer a { min-height:var(--target-min); font-size:1rem; }
.modal { padding:1.5rem 1.25rem calc(2rem + env(safe-area-inset-bottom)); }
.modal p { font-size:1rem; line-height:1.6; }
.close { min-width:var(--target-min); min-height:var(--target-min); padding:.5rem; font-size:1.5rem; }
.media-upload-file,.field-error,.login-help,.onboarding-form small { font-size:1rem !important; line-height:1.5; }
.account-dog-card .text-link,.photo-actions .text-link { min-height:44px; }
@media (min-width:700px) { .page { padding:2.5rem 3rem; } .home-actions { grid-template-columns:1fr 1fr; } }

/* A chronological, one-choice-per-row schedule is easier to scan on a phone
   than a compact calendar grid. The existing semantic buttons retain their
   selection and availability behavior. */
.portal-program-card .day-grid { grid-template-columns:1fr !important; gap:.75rem; }
.portal-program-card .day-slot { width:100%; min-height:var(--target-min); display:grid; grid-template-columns:minmax(7rem,1fr) minmax(6rem,1fr) minmax(9rem,1fr); align-items:center; gap:.75rem; padding:.9rem 1rem; text-align:left; }
.portal-program-card .day-slot span,.portal-program-card .day-slot b,.portal-program-card .day-slot small { font-size:1rem; color:var(--ink); }
.portal-program-card .day-slot small { text-align:right; }
.portal-program-card .day-slot.unavailable span,.portal-program-card .day-slot.unavailable b,.portal-program-card .day-slot.unavailable small { color:var(--text-muted-accessible); }
.booking-requirements { margin:.9rem 0 0; padding:0; list-style:none; }
.booking-requirements li { display:grid; gap:.35rem; padding:.85rem 0; border-top:1px solid rgba(0,0,0,.16); }
.booking-requirements li:first-child { border-top:0; }
.booking-requirements li .text-link { justify-self:start; }
@media (max-width:420px) {
  .portal-program-card .day-slot { grid-template-columns:1fr auto; }
  .portal-program-card .day-slot small { grid-column:1 / -1; text-align:left; }
}

/* The public-site artwork: bright paper, black type, sky, yellow, grass, and
   warm dog-brown. Accent shades below are intentionally darkened where used
   as text so the customer portal maintains WCAG 2.2 AA contrast. */
.wordmark img { filter:brightness(0); }
.hero { background:var(--blue); }
.hero p { color:var(--ink); }
.hero:after { border-color:rgba(255,255,255,.72); }
.notice { background:var(--peach); }
.notice.success,.status,.portal-program-card .day-slot.selected,.sunday-session-option.selected { background:var(--sage); color:var(--sage-dark); }
.home-empty-state,.home-dog-card,.profile-card { background:var(--blue); }
.home-empty-state p,.home-dog-card p:not(.eyebrow),.dog-row p { color:#294c5a; }
.lock { border-color:#d8b284; background:#fff8ef; }
.lock .spaces { color:#824616; }
.progress { background:#edf0e6; }
.progress > span { background:var(--sage-dark); }
.bottom-nav { background:rgba(255,255,255,.96); }
.staff-link,.auth-switch { color:var(--sage-dark); }
.local-dev-auth { background:#171616; }
.payment-status-page { max-width:40rem; margin:auto; }
.payment-status-card { margin:1.5rem 0; padding:1.25rem; border:1px solid #b9d8e2; border-radius:var(--radius); background:var(--blue); }
.payment-status-card p { margin:0; color:var(--ink); }
.payment-status-card .button { margin-top:1rem; }
.payment-status-card.success { border-color:#b8ce91; background:var(--sage); }
.payment-status-card.caution { border-color:#dfbf7a; background:#fff8e7; }
@media (max-width:420px) {
  .local-dev-auth { flex-wrap:wrap; }
  .local-dev-auth label { width:100%; justify-content:space-between; }
}

/* Account forms and long histories stay easy to scan on a phone. */
.media-upload-button.upload-ready { background:var(--ink); color:#fff; border-color:var(--ink); }
.history-more { margin-top:12px; }
.history-more summary { min-height:var(--target-min); display:flex; align-items:center; color:var(--sage-dark); cursor:pointer; font-weight:700; }
.history-more .detail-list { margin-top:10px; }
.reservation-modal { padding-top:1.25rem; }
.reservation-header { display:grid; gap:.2rem; padding:0 0 1rem; border-bottom:1px solid var(--line); }
.reservation-header .eyebrow { margin:0; }
.reservation-header h2 { margin:0; font-size:1.45rem; }
.reservation-meta { margin:0 !important; color:var(--text-muted-accessible) !important; }
.booking-dog { display:grid; gap:.45rem; margin:1rem 0; font-weight:700; }
.booking-dog select { min-height:var(--target-min); border:1px solid #cfc8be; border-radius:3px; background:#fffdfa; padding:.75rem; font:inherit; }
.booking-ready { display:flex; gap:.75rem; align-items:flex-start; margin:1rem 0; padding:1rem; border:1px solid #aabf90; border-radius:10px; background:#edf4e2; color:#28432d; }
.booking-ready > span { display:grid; place-items:center; flex:0 0 28px; width:28px; height:28px; border-radius:50%; background:var(--sage-dark); color:#fff; font-weight:700; }
.booking-ready strong,.booking-ready p { display:block; margin:0; }
.booking-ready p { margin-top:.15rem; color:#28432d !important; font-size:.95rem !important; }
.reservation-detail { display:block; }
.reservation-summary { display:grid; gap:.25rem; }
.reservation-summary b { font-size:1.05rem; }
.reservation-actions { display:flex; flex-wrap:wrap; gap:.5rem 1rem; margin-top:.75rem; }
.reservation-actions .text-link { min-height:var(--target-min); }
.reservation-reminder { margin:.9rem 0 0; padding:.8rem; border-left:4px solid #d3ad3d; background:#fff8e7; color:#463819; font-size:.95rem; line-height:1.55; }
.account-dog-card .detail > span:first-child { font-weight:700; }
.account-dog-card .detail > span:nth-child(2) { font-weight:400; }
.check-in-modal { padding-top:1.25rem; }
.check-in-dog-heading { display:flex; align-items:center; gap:.75rem; margin:.5rem 0 .2rem; }
.check-in-dog-heading h2 { margin:0; }
.check-in-dog-photo { flex:0 0 52px; width:52px; height:52px; border-radius:50%; font-size:25px; }
.check-in-form { gap:1rem !important; }
.check-in-number { margin:-.25rem 0 0 !important; color:var(--ink) !important; }
.check-in-number strong { color:var(--ink); }
.check-in-modal .optional { color:var(--text-muted-accessible); font-weight:500; }
.check-in-modal .dropoff-options > div { grid-template-columns:1fr; gap:.45rem; }
.check-in-modal .dropoff-options label { justify-content:flex-start; min-height:var(--target-min); padding:.65rem .8rem; font-size:1rem; }
.check-in-modal .dropoff-options input { appearance:auto; -webkit-appearance:auto; width:20px; height:20px; flex:0 0 20px; margin:0 .65rem 0 0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.check-in-modal .dropoff-options label:has(input:checked) { background:#fffdfa; color:var(--ink); border-color:#bdb5a9; }
/* Package selection is a vertical decision flow on phones: fit, choice,
   summary, requirement, and a clear action. */
.package-fit h2 { margin-bottom:.35rem; }
.package-fit p { max-width:none; }
.package-picker .package-picker-label { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.package-picker .package-picker-label > span { margin:0; }
.package-picker .package-picker-label strong { color:var(--ink); font-family:var(--font-display); font-size:1.25rem; letter-spacing:0; text-transform:none; white-space:nowrap; }
.package-requirement { margin:0 0 .85rem !important; color:var(--sage-dark) !important; font-weight:700; }
.package-group .button.package-purchase-action { width:100%; min-height:var(--target-min); border:1px solid var(--ink); background:var(--ink); color:#fff; padding:.75rem 1rem; text-decoration:none; }
@media (max-width:520px) {
  .account-dog-card .detail { display:grid; grid-template-columns:1fr; gap:.25rem; }
  .account-dog-card .detail span:last-of-type { text-align:left; }
  .account-dog-card .detail .text-link { justify-self:start; }
}