/* Layout: one narrow-first column. Customers get a calendar and a booking sheet; owner and helper get tabs for requests, calendar and settings. */
:root{
  --forest:#1f4a38; --berry:#7b2d2a; --teal:#27968c; --gold:#d6a02f;
  --bg:#f6eedd; --surface:#fffaf0; --surface-2:#efe4cb; --ink:#1e2a24; --muted:#5d695f; --line:#dccfb1;
  --heading:#1f4a38; --accent:#1f4a38; --on-accent:#fffaf0; --danger:#7b2d2a;
  --open-bg:#d5ebcc; --open-fg:#1f5a31; --booked-bg:#f2c8c1; --booked-fg:#7b2d2a;
  --off-bg:#e3e0d5; --off-fg:#666860; --pend-bg:#f6e0a0; --pend-fg:#6a4a08;
  --dot-open:#2f8f4a; --dot-booked:#b4443d; --dot-pend:#c68a0d; --dot-off:#8a8d84;
  --display:'Source Serif 4',Georgia,serif; --body:'Figtree',system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0f1c17; --surface:#16281f; --surface-2:#1e3429; --ink:#f1eadb; --muted:#a6b3a8; --line:#2d4839;
    --heading:#f1eadb; --accent:#e6b34f; --on-accent:#1b1608; --danger:#f0a79f;
    --open-bg:#21442c; --open-fg:#b9e3b0; --booked-bg:#4a2523; --booked-fg:#f3b9b1;
    --off-bg:#26302b; --off-fg:#8f9b92; --pend-bg:#4b3b12; --pend-fg:#f2d481;
    --dot-open:#6fcf8a; --dot-booked:#e6857c; --dot-pend:#e8b84a; --dot-off:#7b867e;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0f1c17; --surface:#16281f; --surface-2:#1e3429; --ink:#f1eadb; --muted:#a6b3a8; --line:#2d4839;
  --heading:#f1eadb; --accent:#e6b34f; --on-accent:#1b1608; --danger:#f0a79f;
  --open-bg:#21442c; --open-fg:#b9e3b0; --booked-bg:#4a2523; --booked-fg:#f3b9b1;
  --off-bg:#26302b; --off-fg:#8f9b92; --pend-bg:#4b3b12; --pend-fg:#f2d481;
  --dot-open:#6fcf8a; --dot-booked:#e6857c; --dot-pend:#e8b84a; --dot-off:#7b867e;
  color-scheme:dark;
}
/* brand color choices from Settings, light mode */
:root[data-brand="berry"]{--heading:#7b2d2a;--accent:#7b2d2a}
:root[data-brand="teal"]{--heading:#1d6f68;--accent:#1d6f68}
:root[data-brand="plum"]{--heading:#5a2d63;--accent:#5a2d63}
@media (prefers-color-scheme: dark){:root[data-brand]:not([data-theme="light"]){--heading:#f1eadb;--accent:#e6b34f}}
:root[data-brand][data-theme="dark"]{--heading:#f1eadb;--accent:#e6b34f}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.5;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 48px}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--surface-2)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.wrap{max-width:1040px;margin:0 auto}
h1,h2,h3{font-family:var(--display);color:var(--heading);margin:0;text-wrap:balance;line-height:1.15}
h2{font-size:22px} h3{font-size:17px}
p{margin:0}
.muted{color:var(--muted)} .small{font-size:13px}

.proto{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--surface-2);border:1px solid var(--line);border-top:0;
  border-radius:0 0 10px 10px;padding:8px 10px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between}
.proto b{font-size:12px;letter-spacing:.07em;text-transform:uppercase}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
.seg button{border:0;background:transparent;padding:7px 12px;font-weight:600;font-size:14px;min-height:36px}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}

.brand{display:flex;gap:14px;align-items:center;padding:20px 0 14px}
.brand img{width:clamp(92px,24vw,150px);height:clamp(92px,24vw,150px);border-radius:50%;flex:none;border:2px solid var(--gold);object-fit:cover}
.brand h1{font-size:clamp(25px,6vw,38px)}
.brand.c{justify-content:center;text-align:center}
.brand .sub{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.brand .tag{font-family:var(--display);font-style:italic;color:var(--berry);font-size:15px}
:root[data-theme="dark"] .brand .tag{color:var(--gold)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .brand .tag{color:var(--gold)}}

.tabs{display:flex;gap:4px;border-bottom:2px solid var(--line);margin:4px 0 18px;overflow-x:auto}
.tabs button{border:0;background:transparent;padding:10px 14px;font-weight:600;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap;min-height:44px}
.tabs button[aria-selected="true"]{color:var(--heading);border-bottom-color:var(--gold)}
.badge{display:inline-block;min-width:20px;padding:0 6px;border-radius:10px;background:var(--berry);color:#fffaf0;font-size:12px;line-height:20px;text-align:center;margin-left:6px}

.note{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--teal);padding:12px 14px;border-radius:6px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

.btn{border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);padding:10px 16px;border-radius:8px;font-weight:700;min-height:44px}
.btn.ghost{background:transparent;color:var(--heading);border-color:var(--line)}
.btn.danger{background:transparent;color:var(--danger);border-color:var(--danger)}
.btn.sm{min-height:36px;padding:6px 12px;font-size:14px}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:20px;padding:8px 14px;font-weight:600;font-size:14px;min-height:40px}
.chip:hover{border-color:var(--teal)}

.monthtabs{display:flex;gap:6px;margin:14px 0 10px;flex-wrap:wrap}
.monthtabs button{border:1px solid var(--line);background:var(--surface);padding:8px 16px;border-radius:8px;font-weight:700;min-height:40px}
.monthtabs button[aria-pressed="true"]{background:var(--heading);color:var(--bg);border-color:var(--heading)}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.dow{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);text-align:center;padding:4px 0;font-weight:700}
.cell{min-height:60px;border:2px solid transparent;border-radius:7px;padding:5px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;text-align:left;min-width:0;background:var(--surface-2);color:var(--ink)}
.cell .n{font-weight:700;font-size:14px}
.cell .t{font-size:10px;line-height:1.15;font-weight:700;overflow-wrap:anywhere}
.cell .long{display:none}
.cell.blank{background:transparent;border:0}
.cell.past{background:transparent;color:var(--muted);opacity:.5;cursor:default}
.cell.open{background:var(--open-bg);color:var(--open-fg)}
.cell.booked{background:var(--booked-bg);color:var(--booked-fg);cursor:default}
.cell.pending{background:var(--pend-bg);color:var(--pend-fg)}
.cell.off{background:var(--off-bg);color:var(--off-fg);cursor:default}
.cell.open:hover{border-color:var(--teal)}
.cell.sel{border-color:var(--gold);box-shadow:inset 0 0 0 2px var(--gold)}
.cell.today .n::after{content:" •";color:var(--gold)}
.cell.focus{border-color:var(--heading)}
.dots{display:flex;gap:3px;flex-wrap:wrap}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.dot.open{background:var(--dot-open)} .dot.booked{background:var(--dot-booked)} .dot.pending{background:var(--dot-pend)} .dot.blocked,.dot.off{background:var(--dot-off)}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:13px;color:var(--muted)}
.legend span::before{content:"";display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px;background:var(--c)}
@media (min-width:700px){
  .cell{min-height:88px;padding:8px}
  .cell .t{font-size:12px}
  .cell .short{display:none} .cell .long{display:inline}
}

.pill{display:inline-block;padding:2px 10px;border-radius:12px;font-size:12px;font-weight:700;letter-spacing:.02em}
.pill.pending{background:var(--pend-bg);color:var(--pend-fg)}
.pill.approved{background:var(--open-bg);color:var(--open-fg)}
.pill.declined,.pill.canceled{background:var(--off-bg);color:var(--off-fg)}
.pill.fluff{background:var(--booked-bg);color:var(--booked-fg)}
.pill.info{background:var(--surface-2);color:var(--muted)}

.req{border:1px solid var(--line);border-radius:10px;background:var(--surface);overflow:hidden}
.req>button{width:100%;text-align:left;border:0;background:transparent;padding:14px;display:flex;flex-direction:column;gap:6px}
.req .top{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
.req .nm{font-weight:700;font-size:16px}
.req .body{padding:0 14px 16px;display:flex;flex-direction:column;gap:16px;border-top:1px dashed var(--line);padding-top:14px}
.kv{display:grid;grid-template-columns:90px minmax(0,1fr);gap:6px 12px;font-size:14px}
.kv dt{color:var(--muted);font-weight:600} .kv dd{margin:0;overflow-wrap:anywhere}
.photos{display:flex;gap:8px;flex-wrap:wrap}
.photo{width:84px;height:84px;border-radius:8px;overflow:hidden;position:relative;border:1px solid var(--line);flex:none}
.photo img,.photo svg{width:100%;height:100%;object-fit:cover;display:block}
.photo button{position:absolute;top:2px;right:2px;border:0;border-radius:50%;width:24px;height:24px;background:rgba(0,0,0,.65);color:#fff;line-height:1;font-size:14px}
.thread{display:flex;flex-direction:column;gap:8px}
.msg{max-width:88%;padding:8px 12px;border-radius:12px;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}
.msg small{display:block;font-size:11px;color:var(--muted);font-weight:600;margin-bottom:2px}
.msg.them{align-self:flex-start;background:var(--surface-2)}
.msg.me{align-self:flex-end;background:var(--accent);color:var(--on-accent)}
.msg.me small{color:inherit;opacity:.8}
.msg.sys{align-self:center;background:transparent;color:var(--muted);font-size:12px;font-style:italic;padding:0}
.msg.offer{align-self:flex-start;width:min(100%,420px);background:var(--surface);border:2px solid var(--gold);display:flex;flex-direction:column;gap:8px;white-space:normal}
.msg.offer b{font-family:var(--display);font-size:17px;color:var(--heading)}
.composer{display:flex;gap:8px}
.composer input{flex:1;min-width:0}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=time],textarea,select{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:10px 12px;min-height:44px}
textarea{min-height:84px;resize:vertical}
label.f{display:flex;flex-direction:column;gap:5px;font-weight:600;font-size:14px;min-width:0}
label.f span.hint{font-weight:400;color:var(--muted);font-size:13px}
.lock{background:var(--surface-2);border-radius:8px;padding:12px;border:1px dashed var(--muted)}
.shared{background:var(--surface-2);border-radius:8px;padding:12px;border:1px solid var(--line)}
.lock h4,.shared h4{margin:0 0 6px;font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.offerform{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));align-items:end}
.offerform .btn{align-self:end}

.split{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.split{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:start}}
.selbar{position:sticky;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:15;background:var(--heading);color:var(--bg);padding:10px 12px;border-radius:10px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-top:12px}
.selbar .btn{background:var(--bg);color:var(--heading);border-color:var(--bg)}
.slotrow{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--line)}

.sw{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line)}
.sw:first-of-type{border-top:0}
button[role=switch]{flex:none;width:52px;height:30px;border-radius:15px;border:0;background:var(--off-bg);position:relative;padding:0}
button[role=switch]::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.4);transition:transform .15s}
button[role=switch][aria-checked="true"]{background:var(--teal)}
button[role=switch][aria-checked="true"]::after{transform:translateX(22px)}
.urlbox{display:flex;gap:8px;align-items:center}
.urlbox code{flex:1;min-width:0;overflow-x:auto;white-space:nowrap;background:var(--surface-2);padding:10px 12px;border-radius:8px;font-size:13px}
ol.steps{margin:8px 0 0;padding-left:20px;font-size:14px;color:var(--muted)}
.grid2{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.grid2{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}
.wk .d{display:flex;gap:6px 16px;flex-wrap:wrap;align-items:center;padding:6px 0;border-top:1px solid var(--line)}
.wk .d b{width:42px}
.wk label{display:flex;gap:6px;align-items:center;font-size:14px;min-height:36px}
.wk input{width:18px;height:18px}
.swatches{display:flex;gap:10px;flex-wrap:wrap}
.swatches button{width:44px;height:44px;border-radius:50%;border:3px solid var(--surface);box-shadow:0 0 0 1px var(--line);background:var(--c)}
.swatches button[aria-pressed="true"]{box-shadow:0 0 0 3px var(--gold)}

.overlay{position:fixed;inset:0;background:rgba(10,20,15,.55);z-index:40;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--surface);width:100%;max-width:560px;max-height:92%;overflow-y:auto;border-radius:16px 16px 0 0;padding:18px max(16px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
@media (min-width:700px){.overlay{align-items:center}.sheet{border-radius:16px;max-height:90%;padding:22px}}
.sheet form{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.radio{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:var(--surface)}
.radio input{margin-top:4px;width:18px;height:18px;flex:none}
.slots{display:flex;gap:8px;flex-wrap:wrap}
.slots label{border:1px solid var(--line);border-radius:8px;padding:10px 14px;font-weight:600;display:flex;gap:8px;align-items:center;min-height:44px}
.err{color:var(--danger);font-weight:600;font-size:14px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));background:var(--heading);color:var(--bg);padding:10px 16px;border-radius:10px;z-index:60;font-weight:600;max-width:90%}
.empty{padding:28px 16px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:10px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- additions for the real app ---- */
[hidden]{display:none!important}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.narrow{max-width:460px;margin:0 auto}
.center{text-align:center}
.mt{margin-top:14px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;flex-wrap:wrap}
.topbar .who{font-size:13px;color:var(--muted)}
.btn[disabled]{opacity:.55;cursor:default}
.linkbtn{background:none;border:0;color:var(--heading);text-decoration:underline;padding:6px 2px;font-weight:600;min-height:36px}
.spin{padding:40px 0;text-align:center;color:var(--muted)}
.cell.has-q .t{font-weight:700}
.cell.sel-day{border-color:var(--gold)}
.slotline{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--line)}
.slotline .l{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.state{font-size:12px;font-weight:700;padding:2px 9px;border-radius:12px}
.state.open{background:var(--open-bg);color:var(--open-fg)}.state.booked{background:var(--booked-bg);color:var(--booked-fg)}
.state.pending{background:var(--pend-bg);color:var(--pend-fg)}.state.off{background:var(--off-bg);color:var(--off-fg)}
.banner{background:var(--pend-bg);color:var(--pend-fg);padding:12px 14px;border-radius:8px;font-weight:600}
.soon{display:flex;gap:8px;flex-wrap:wrap}
.preview{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.preview .photo button{cursor:pointer}
.filebtn{display:inline-flex;align-items:center;justify-content:center}
.msg img.thumb{max-width:100%}
.tl{font-size:13px}
.codebox{font-family:ui-monospace,Menlo,monospace;font-size:20px;letter-spacing:.2em;text-align:center}

/* phones: keep the calendar near the top */
@media (max-width:699px){
  .monthtabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;scrollbar-width:none}
  .monthtabs button{flex:none}
  .soon{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
  .soon .chip{flex:none}
}

a{color:var(--heading)}
@media (max-width:480px){
  .tabs{gap:0}
  .tabs button{padding:10px 9px;font-size:14px}
  .badge{margin-left:4px;min-width:18px;line-height:18px;font-size:11px}
  .brand .sub{font-size:11px}
}
@media (max-width:480px){
  .cell{padding:4px}
}
.cell.past{min-height:34px}

.topbar-user{display:flex;justify-content:flex-end;padding-top:10px}
.whobox{display:flex;align-items:center;gap:12px;font-size:13px}
.whobox .linkbtn{min-height:32px}