/* Client portal and Ben's view, Tailored: the site's tokens, square corners, depth instead of borders. One light theme on purpose. */
:root { --navy:#1D2C44; --porc:#F8F8F5; --sand:#F3ECDD; --sandline:#E6DDC9; --slate:#4A5360; --rule:#DCDDD9; --mist:#646A74; --ok:#3F6B4E; --gold:#9A7B45; --hdr:58px; --tabs:62px;
  --lift:0 1px 2px rgba(29,44,68,.06), 0 10px 24px -14px rgba(29,44,68,.26); --lift-sm:0 1px 2px rgba(29,44,68,.06), 0 6px 16px -10px rgba(29,44,68,.22); color-scheme:light; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--porc); color:var(--slate); font:400 1rem/1.6 'Jost','Futura','Helvetica Neue',sans-serif; -webkit-tap-highlight-color:transparent; }
body::before { content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:30; background:var(--porc); }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
p { margin:0; text-wrap:pretty; }
h1,h2,h3 { margin:0; font-family:'Bodoni Moda',Didot,Georgia,serif; font-optical-sizing:auto; font-weight:500; color:var(--navy); text-wrap:balance; }
@media (max-width:1023px){ * { font-variation-settings:"opsz" 16; } }
button, input, textarea, select { font:inherit; color:inherit; }
:focus-visible { outline:2px solid var(--navy); outline-offset:3px; }
.ic { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linejoin:round; stroke-linecap:round; flex:none; }

/* Header: small D mark, quiet wordmark, avatar. A shadow appears once you scroll. */
.ph { position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:var(--porc); transition:box-shadow .2s; }
.ph.up { box-shadow:0 1px 0 var(--rule); }
.ph .in { height:var(--hdr); max-width:1080px; margin-inline:auto; display:flex; align-items:center; gap:12px; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px)); }
.mark { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.mark svg { width:30px; height:30px; flex:none; display:block; }
.mark span { font-family:'Bodoni Moda',Didot,Georgia,serif; font-weight:500; color:var(--navy); font-size:.82rem; letter-spacing:.18em; text-transform:uppercase; }
.who { display:flex; align-items:center; gap:10px; font-size:.78rem; color:var(--mist); }
.av { width:34px; height:34px; border-radius:50%; background:var(--sand); display:grid; place-items:center; font-size:.68rem; font-weight:500; letter-spacing:.06em; color:var(--navy); flex:none; }
.dnav { display:none; gap:28px; font-size:.75rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--navy); margin-right:12px; }
.dnav a { padding-bottom:3px; border-bottom:1px solid transparent; }
.dnav a[aria-current="page"] { border-bottom-color:var(--navy); }
@media (min-width:900px){ .dnav { display:flex; } :root { --hdr:76px; } .mark svg { width:36px; height:36px; } }

/* Bottom tabs on phones: line icons, plain labels, frosted */
.tabs { position:fixed; left:0; right:0; bottom:0; z-index:20; background:var(--porc); border-top:1px solid var(--rule); display:grid; grid-template-columns:repeat(5,1fr); padding-bottom:env(safe-area-inset-bottom,0px); padding-left:env(safe-area-inset-left,0px); padding-right:env(safe-area-inset-right,0px); }
.tabs.four { grid-template-columns:repeat(4,1fr); }
.tabs a { min-height:var(--tabs); display:grid; justify-items:center; align-content:center; gap:3px; font-size:.66rem; font-weight:500; letter-spacing:.02em; color:#6E747D; position:relative; }
.tabs a[aria-current="page"] { color:var(--navy); }
.tabs a[aria-current="page"] .ic { stroke-width:1.8; }
.tabs a[aria-current="page"]::after { content:""; position:absolute; top:-1px; left:32%; right:32%; height:2px; background:var(--navy); }
.tabs .badge { position:absolute; top:9px; left:calc(50% + 7px); width:8px; height:8px; border-radius:50%; background:var(--gold); border:1.5px solid var(--porc); }
@media (min-width:900px){ .tabs { display:none; } }

/* Page */
main { max-width:720px; margin-inline:auto; padding-left:max(18px, env(safe-area-inset-left,0px)); padding-right:max(18px, env(safe-area-inset-right,0px)); padding-block:12px calc(var(--tabs) + 40px + env(safe-area-inset-bottom,0px)); display:grid; gap:24px; }
@media (min-width:900px){ main { padding-block:48px 96px; gap:32px; } }
.view { display:grid; gap:24px; min-width:0; animation:in .28s ease both; }
@keyframes in { from { opacity:0; } to { opacity:1; } }
.eyebrow { font-size:.7rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--navy); line-height:1.5; }
.cap { font-size:.66rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--slate); }
.small { font-size:.85rem; color:var(--mist); }
.title { display:grid; gap:4px; }
.title h1 { font-size:1.7rem; line-height:1.15; }
.title p { font-size:.92rem; color:var(--mist); }
.title.hi { gap:6px; }
.title.hi h1 { font-size:clamp(2rem, 1.7rem + 1.4vw, 2.75rem); line-height:1.1; }
@media (min-width:900px){ .title h1 { font-size:2.1rem; } }
.sh { font-size:1.3rem; line-height:1.2; }
.sec { display:grid; gap:10px; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:14px 22px; font:500 .76rem/1.25 'Jost',sans-serif; letter-spacing:.2em; text-transform:uppercase; text-align:center; border:1px solid var(--navy); color:var(--navy); background:transparent; cursor:pointer; transition:background-color .2s, opacity .2s; }
@media (hover:hover){ .btn:hover { background:rgba(29,44,68,.06); } }
.btn:active { transform:translateY(1px); }
.btn.solid { background:var(--navy); color:var(--porc); }
@media (hover:hover){ .btn.solid:hover { background:#24365A; } }
.btn.sm { min-height:40px; padding:9px 14px; font-size:.66rem; }
.btn[disabled] { opacity:.35; cursor:default; }
.pair { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.link { color:var(--navy); text-decoration:underline; text-underline-offset:3px; font-size:.9rem; }
.proto { font-size:.78rem; color:var(--mist); text-align:center; padding:14px 12px 0; border-top:1px solid var(--rule); }
.proto a { color:var(--navy); text-decoration:underline; text-underline-offset:2px; }

/* Postcard: a photo print */
.mat { background:#fff; padding:9px 9px 18px; display:grid; gap:10px; box-shadow:var(--lift); }
.mat .img { aspect-ratio:4/3; overflow:hidden; background:#DDE2E4; }
.mat .img img { width:100%; height:100%; object-fit:cover; }
.mat .meta { display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:4px 7px 0; }
.mat .note { font-family:'Bodoni Moda',Georgia,serif; font-weight:500; color:var(--navy); font-size:1.18rem; line-height:1.42; padding-inline:7px; }
.mat .sig { font-size:.85rem; color:var(--mist); padding-inline:7px; }

/* Quick actions as quiet rows */
.acts { display:grid; border-top:1px solid var(--rule); }
.acts a { display:flex; align-items:center; gap:14px; min-height:54px; border-bottom:1px solid var(--rule); color:var(--navy); font-weight:500; font-size:.95rem; }
.acts a span { flex:1; }
.acts .ar { width:16px; height:16px; color:var(--mist); }
@media (hover:hover){ .acts a:hover .ar { color:var(--navy); } }

/* Rows: schedule and client lists as lifted cards */
.rows { display:grid; gap:8px; }
.row { display:grid; grid-template-columns:52px 1fr auto; gap:12px; align-items:center; padding:12px 14px; background:#fff; box-shadow:var(--lift-sm); }
.dy { font-family:'Bodoni Moda',Georgia,serif; font-weight:500; color:var(--navy); font-size:1.3rem; line-height:1.05; }
.dy small { display:block; font-family:'Jost',sans-serif; font-size:.6rem; font-weight:500; letter-spacing:.16em; color:var(--slate); margin-top:3px; }
.what { color:var(--navy); line-height:1.35; min-width:0; }
.what small { display:block; font-size:.8rem; color:var(--mist); margin-top:2px; }
.st { font-size:.58rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; padding:4px 8px; white-space:nowrap; border:0; }
.st.done { color:var(--ok); background:#E9F0EA; } .st.conf { color:var(--navy); background:var(--sand); } .st.ask { color:#7E6234; background:#F6EEDD; } .st.off { color:var(--mist); background:#EFEFEB; } .st.next { color:var(--porc); background:var(--navy); }

/* Booking */
fieldset { border:0; margin:0; padding:0; display:grid; gap:10px; min-width:0; }
legend { padding:0; margin-bottom:10px; }
.group { background:#fff; box-shadow:var(--lift); }
.opt { position:relative; display:flex; align-items:center; gap:14px; padding:14px 16px; border-top:1px solid #ECECE8; cursor:pointer; }
.group > .opt:first-child { border-top:0; }
.opt input { position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.opt .mk { width:18px; height:18px; border-radius:50%; border:1.3px solid #A3A9B1; flex:none; transition:all .15s; }
.opt input[type=checkbox] ~ .mk { border-radius:0; }
.opt input:checked ~ .mk { border-color:var(--navy); background:var(--navy); box-shadow:inset 0 0 0 4px #fff; }
.opt input[type=checkbox]:checked ~ .mk { box-shadow:none; background:var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23F8F8F5' stroke-width='1.8'/%3E%3C/svg%3E") center/14px no-repeat; }
.opt input:focus-visible ~ .mk { outline:2px solid var(--navy); outline-offset:3px; }
.opt .nm { flex:1; min-width:0; font-family:'Bodoni Moda',Georgia,serif; font-weight:500; color:var(--navy); font-size:1.06rem; line-height:1.25; }
.opt .nm small { display:block; font-family:'Jost',sans-serif; font-weight:400; font-size:.78rem; color:var(--mist); margin-top:2px; }
.opt .pr { font-size:.88rem; font-weight:500; letter-spacing:.04em; color:var(--navy); white-space:nowrap; }
.seg { display:grid; grid-template-columns:repeat(3,1fr); margin:-4px 16px 14px 48px; border:1px solid var(--rule); }
.seg label { position:relative; text-align:center; font-size:.82rem; padding:8px 0; color:var(--slate); cursor:pointer; }
.seg label + label { border-left:1px solid var(--rule); }
.seg input { position:absolute; opacity:0; width:1px; height:1px; }
.seg input:checked + span { color:var(--porc); }
.seg label:has(input:checked) { background:var(--navy); color:var(--porc); }
.seg input:focus-visible + span { outline:2px solid var(--navy); outline-offset:4px; }
.chips { display:flex; gap:8px; }
.days { overflow-x:auto; padding:2px 2px 10px; margin-inline:-2px; scrollbar-width:none; }
.days::-webkit-scrollbar { display:none; }
.chip { position:relative; flex:none; }
.chip input { position:absolute; opacity:0; width:1px; height:1px; }
.chip span { display:grid; justify-items:center; gap:1px; min-width:58px; padding:9px 8px; background:#fff; box-shadow:var(--lift-sm); color:var(--navy); cursor:pointer; transition:background-color .15s, color .15s; }
.chip b { font-family:'Bodoni Moda',Georgia,serif; font-weight:500; font-size:1.3rem; line-height:1.05; }
.chip small { font-size:.56rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--slate); }
.chip input:checked + span { background:var(--navy); color:var(--porc); }
.chip input:checked + span small { color:#C9CED6; }
.chip input:focus-visible + span { outline:2px solid var(--navy); outline-offset:2px; }
.times { flex-wrap:wrap; }
.times .chip span { min-width:0; padding:10px 14px; font-size:.9rem; }
textarea, input[type=text], input[type=email], input[type=tel], input[type=number], select { width:100%; border:1px solid #D3D6D6; border-radius:0; background:#fff; padding:12px 14px; font-size:1rem; -webkit-appearance:none; appearance:none; transition:border-color .15s; }
textarea:focus, input[type=text]:focus, input[type=email]:focus, input[type=tel]:focus, input[type=number]:focus, select:focus { border-color:var(--navy); outline:none; }
textarea { min-height:92px; resize:vertical; }
.total { background:var(--sand); padding:16px 18px; display:grid; gap:7px; }
.line { display:flex; justify-content:space-between; gap:12px; font-size:.92rem; }
.line.sum { border-top:1px solid var(--sandline); padding-top:9px; margin-top:3px; font-weight:500; color:var(--navy); }
.bar { position:sticky; bottom:calc(var(--tabs) + env(safe-area-inset-bottom,0px)); z-index:10; margin-inline:calc(-1 * max(18px, env(safe-area-inset-left,0px))); padding:10px max(18px, env(safe-area-inset-left,0px)); display:flex; align-items:center; gap:14px; background:var(--porc); border-top:1px solid var(--rule); }
.bar .sum { flex:1; min-width:0; display:grid; line-height:1.25; }
.bar .sum b { font-family:'Bodoni Moda',Georgia,serif; font-weight:500; color:var(--navy); font-size:1.3rem; }
.bar .sum small { font-size:.76rem; color:var(--mist); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar .btn { min-height:46px; padding:12px 20px; }
@media (min-width:900px){ .bar { bottom:0; margin-inline:0; padding-inline:0; } }
.done-card { background:#fff; box-shadow:var(--lift); padding:26px 22px; display:grid; gap:10px; }

/* Messages */
.thread { display:grid; gap:10px; padding-bottom:84px; }
.day-sep { text-align:center; margin:6px 0 0; }
.msg { max-width:82%; padding:11px 14px; font-size:.96rem; line-height:1.5; display:grid; gap:4px; }
.msg.ben { background:var(--sand); color:var(--slate); justify-self:start; }
.msg.me { background:var(--navy); color:var(--porc); justify-self:end; }
.msg img { width:100%; max-width:280px; aspect-ratio:4/3; object-fit:cover; margin-bottom:4px; }
.msg .t { font-size:.68rem; opacity:.72; }
.composer { position:fixed; left:0; right:0; bottom:calc(var(--tabs) + env(safe-area-inset-bottom,0px)); z-index:15; display:flex; gap:8px; padding:10px max(14px, env(safe-area-inset-left,0px)); background:var(--porc); border-top:1px solid var(--rule); }
.composer input { flex:1; height:46px; min-width:0; }
.composer .snd { width:46px; height:46px; flex:none; display:grid; place-items:center; background:var(--navy); color:var(--porc); border:0; cursor:pointer; }
.composer .snd .ic { width:19px; height:19px; stroke-width:1.5; }
@media (min-width:900px){ .composer { position:sticky; bottom:16px; left:auto; right:auto; padding-inline:0; border-top:0; } .thread { padding-bottom:0; } }

/* Pets & home */
.card { background:#fff; box-shadow:var(--lift); padding:18px 18px 8px; display:grid; gap:10px; }
.card .top { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
dl { margin:0; display:grid; }
dl div { display:grid; grid-template-columns:7em 1fr; gap:12px; padding:11px 0; border-top:1px solid #ECECE8; }
dt { font-size:.64rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--slate); padding-top:4px; }
dd { margin:0; color:var(--navy); min-width:0; font-size:.95rem; }
.private { font-size:.76rem; color:#7E6234; letter-spacing:.04em; }

/* Notes gallery */
.notes { display:grid; gap:22px; }
@media (min-width:640px){ .notes { grid-template-columns:1fr 1fr; } }
.notes .mat .note { font-size:1.04rem; }

/* Ben's view */
.req { background:#fff; box-shadow:var(--lift); padding:16px 18px; display:grid; gap:10px; border-left:3px solid var(--gold); }
.req .what { font-size:1.02rem; }
.stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (min-width:640px){ .stats { grid-template-columns:repeat(3,1fr); } }
.stat { background:#fff; box-shadow:var(--lift-sm); padding:16px; display:grid; gap:4px; }
.stat b { font-family:'Bodoni Moda',Georgia,serif; font-weight:500; color:var(--navy); font-size:1.85rem; line-height:1.1; font-variant-numeric:lining-nums tabular-nums; }
.bars { display:grid; gap:10px; }
.bar-r { display:grid; grid-template-columns:7.5em 1fr 2.4em; gap:10px; align-items:center; font-size:.9rem; }
.bar-r .tr { height:8px; background:var(--sand); }
.bar-r .fill { height:100%; background:var(--navy); }
.bar-r .n { text-align:right; color:var(--navy); font-variant-numeric:tabular-nums; }
.months { display:grid; grid-template-columns:repeat(12,1fr); gap:4px; align-items:end; height:120px; border-bottom:1px solid var(--rule); }
.months i { display:block; background:var(--navy); opacity:.88; }
.months i.lo { background:#D9CDB3; opacity:1; }
.mlab { display:grid; grid-template-columns:repeat(12,1fr); gap:4px; font-size:.6rem; letter-spacing:.1em; color:var(--mist); text-align:center; margin-top:6px; }
.post { background:#fff; box-shadow:var(--lift); padding:18px; display:grid; gap:12px; }
.toast { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(var(--tabs) + 18px + env(safe-area-inset-bottom,0px)); background:var(--navy); color:var(--porc); padding:12px 18px; font-size:.86rem; z-index:40; max-width:calc(100% - 32px); box-shadow:0 12px 28px -12px rgba(29,44,68,.5); animation:in .2s ease both; }
@media (min-width:900px){ .toast { bottom:32px; } }
@media (prefers-reduced-motion: reduce){ *, *::before, *::after { transition:none !important; animation:none !important; } }

/* Account menu */
.who { position:relative; }
button.av { border:0; padding:0; cursor:pointer; }
button.av:focus-visible { outline:2px solid var(--navy); outline-offset:2px; }
.menu { position:absolute; top:calc(100% + 8px); right:0; z-index:30; min-width:220px; background:#fff; box-shadow:var(--lift); padding:14px 16px; display:grid; gap:10px; }
.menu .small { overflow-wrap:anywhere; }
.menu button { justify-self:start; background:none; border:0; padding:0; color:var(--navy); font-size:.9rem; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }

/* Editing pets and home */
.edit-row { padding:4px 0 10px; border-top:1px solid #ECECE8; }
.edit-row .link { background:none; border:0; padding:8px 0 0; cursor:pointer; }
.card.edit { padding-bottom:18px; gap:14px; }
.fld { display:grid; gap:6px; min-width:0; }
.fld textarea { min-height:68px; }