/* Doorstep: Shoe Hole's cream, ink and orange; Fredoka headings, Nunito Sans body. Phone first, big tap targets. */
[hidden]{display:none!important}
:root{
  --bg:#fbf6ec; --card:#fffdf8; --sunk:#f3e8d9; --ink:#151310; --muted:#6b6257; --rule:#e4d6c2;
  --orange:#ff5a0a; --orange-deep:#dc4600; --orange-ink:#c23d00; --on-orange:#fff;
  --green:#2f8a4e; --amber:#b87a0c; --red:#b3261e; --grey:#8d8170;
  --display:"Fredoka","Nunito Sans",system-ui,sans-serif; --body:"Nunito Sans",system-ui,-apple-system,sans-serif;
  --tabs-h:64px;
}
@media (prefers-color-scheme:dark){:root{--bg:#16130f;--card:#201b15;--sunk:#2a231b;--ink:#f6eee1;--muted:#b3a794;--rule:#3a3126;--orange:#ff6a1f;--orange-deep:#e2550f;--orange-ink:#ff8a4c;--green:#4cb36f;--amber:#e0a73c;--red:#ef6b61;--grey:#9a8e7c;color-scheme:dark}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.45}
body{padding-bottom:calc(var(--tabs-h) + env(safe-area-inset-bottom,0px))}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.12;margin:0;text-wrap:balance}
a{color:var(--orange-ink)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.page{max-width:640px;margin:0 auto;padding:calc(14px + env(safe-area-inset-top,0px)) 16px 24px;display:grid;gap:14px}
.head{display:grid;gap:4px}
.head h1{font-size:28px}
.sub{color:var(--muted);font-size:14px}
.eyebrow{font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-ink)}
.card{background:var(--card);border:1px solid var(--rule);border-radius:16px;padding:14px}
.card.tap{cursor:pointer;display:block;text-decoration:none;color:inherit}
.card.tap:active{transform:scale(.99)}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.wrap{flex-wrap:wrap}
.muted{color:var(--muted)}
.small{font-size:13px}
.score{font-family:var(--display);font-weight:700;font-size:26px;color:var(--orange-ink);font-variant-numeric:tabular-nums}
.bar{height:6px;border-radius:9px;background:var(--sunk);overflow:hidden}.bar>i{display:block;height:100%;background:var(--orange)}
.why{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chip{white-space:nowrap;display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:800;padding:3px 9px;border-radius:99px;background:var(--sunk);color:var(--ink)}
.chip.o{background:color-mix(in srgb,var(--orange) 16%,var(--card));color:var(--orange-ink)}
.chip.g{background:color-mix(in srgb,var(--green) 16%,var(--card));color:var(--green)}
.chip.a{background:color-mix(in srgb,var(--amber) 18%,var(--card));color:var(--amber)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:14px;padding:14px 18px;font-weight:800;font-size:16px;background:var(--orange);color:var(--on-orange);cursor:pointer;min-height:50px;text-decoration:none}
.btn:active{background:var(--orange-deep)}
.btn.block{width:100%}
.btn.ghost{background:var(--card);color:var(--ink);border:1px solid var(--rule)}
.btn.dark{background:var(--ink);color:var(--bg)}
.btn.small{min-height:38px;padding:8px 12px;font-size:14px;border-radius:11px}
.btn[disabled]{opacity:.45;pointer-events:none}
.seg{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px}
.seg button{border:1px solid var(--rule);background:var(--card);border-radius:99px;padding:8px 14px;font-weight:800;font-size:14px;white-space:nowrap;cursor:pointer}
.seg button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.field{display:grid;gap:6px;font-weight:800;font-size:14px}
.field input,.field select,.field textarea,input.big{border:1px solid var(--rule);background:var(--card);border-radius:12px;padding:13px 14px;font-size:17px;font-weight:600;width:100%}
.check{display:flex;gap:12px;align-items:flex-start;font-size:15px}
.check input{width:24px;height:24px;margin-top:1px;accent-color:var(--orange);flex:none}
.banner{border-radius:14px;padding:12px 14px;background:var(--sunk);font-size:14px}
.banner.o{background:color-mix(in srgb,var(--orange) 14%,var(--card))}
.street{display:grid;gap:10px}
.street .doors{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:7px}
.door{border:1px solid var(--rule);background:var(--card);border-radius:11px;min-height:46px;font-weight:800;font-size:15px;cursor:pointer}
.door.no_answer{background:color-mix(in srgb,var(--grey) 25%,var(--card))}
.door.not_interested{color:var(--muted);text-decoration:line-through}
.door.call_back{background:color-mix(in srgb,var(--amber) 28%,var(--card))}
.door.interested{background:color-mix(in srgb,var(--orange) 30%,var(--card))}
.door.lead{background:var(--orange);color:var(--on-orange);border-color:var(--orange)}
.door.do_not_knock{background:var(--ink);color:var(--bg);text-decoration:line-through}
.door.pending{outline:2px dashed var(--orange);outline-offset:-3px}
.door.add{border-style:dashed;color:var(--muted)}
.key{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:12px;color:var(--muted)}
.key i{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:4px;vertical-align:-1px;border:1px solid var(--rule)}
.step{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start}
.step>b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--orange);color:#fff;font-family:var(--display);font-size:16px}
.step.done>b{background:var(--green)}
.say{font-family:var(--display);font-size:19px;line-height:1.25}
.video{position:relative;border-radius:16px;overflow:hidden;background:#000;aspect-ratio:9/16;max-height:58vh;margin:0 auto;width:100%}
.video video{width:100%;height:100%;object-fit:cover;display:block}
.guide{border-radius:14px;overflow:hidden;position:relative}
.guide img{width:100%;display:block}
.guide .aim{position:absolute;border:4px solid var(--orange);border-radius:10px;box-shadow:0 0 0 999px rgba(0,0,0,.25)}
.thumbs{display:flex;gap:8px;flex-wrap:wrap}
.thumbs img{width:76px;height:76px;object-fit:cover;border-radius:10px;border:1px solid var(--rule)}
.price{font-family:var(--display);font-size:40px;font-weight:700;line-height:1}
.funnel{display:grid;gap:9px}
.funnel .row{font-size:14px}
.stat{font-family:var(--display);font-size:30px;font-weight:700;font-variant-numeric:tabular-nums}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.lead-item{display:grid;gap:6px}
.status{font-size:12px;font-weight:800;padding:3px 9px;border-radius:99px;background:var(--sunk)}
.badge{text-align:center;display:grid;gap:10px;padding:26px 18px;border-radius:22px;background:var(--card);border:3px solid var(--orange)}
.badge img{width:70%;max-width:260px;margin:0 auto}
.badge .who{font-family:var(--display);font-size:34px}
.qr{display:grid;place-items:center;background:#fff;border-radius:16px;padding:16px}
.qr img,.qr svg{width:min(70vw,260px);height:auto;image-rendering:pixelated}
nav#tabs{position:fixed;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);background:var(--card);border-top:1px solid var(--rule);padding-bottom:env(safe-area-inset-bottom,0px);z-index:5}
nav#tabs a{display:grid;justify-items:center;gap:1px;padding:8px 0 10px;font-size:12px;font-weight:800;color:var(--muted);text-decoration:none;min-height:var(--tabs-h)}
nav#tabs a span{font-size:20px}
nav#tabs a.on{color:var(--orange-ink)}
#sheet{position:fixed;inset:0;background:rgba(10,8,5,.45);z-index:10;display:flex;align-items:flex-end;justify-content:center}
#sheet .panel{background:var(--bg);width:100%;max-width:640px;border-radius:22px 22px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px));display:grid;gap:10px;max-height:92vh;overflow:auto}
#sheet .grip{width:44px;height:5px;border-radius:9px;background:var(--rule);margin:0 auto 4px}
.outs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.outs .btn{min-height:56px}
#toast{position:fixed;left:16px;right:16px;bottom:calc(var(--tabs-h) + 14px + env(safe-area-inset-bottom,0px));max-width:600px;margin:0 auto;background:var(--ink);color:var(--bg);padding:12px 14px;border-radius:14px;font-weight:700;z-index:20;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.sync{font-size:12px;font-weight:800;color:var(--muted)}
.sync.wait{color:var(--amber)}
.login{min-height:100vh;display:grid;align-content:center;gap:16px;max-width:420px;margin:0 auto;padding:24px 18px}
.login img{width:70%;margin:0 auto 8px;display:block}
.empty{text-align:center;color:var(--muted);padding:26px 10px}
table.simple{width:100%;border-collapse:collapse;font-size:14px}
table.simple td,table.simple th{padding:7px 4px;border-bottom:1px solid var(--rule);text-align:left}
table.simple th{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* door routine */
.stack{display:grid;gap:10px;min-width:0}
.step>div{min-width:0}
.q{display:grid;gap:4px}
.seg.wrap{flex-wrap:wrap;overflow:visible}
.photo-slot{display:grid;gap:8px;padding:10px;border:1px dashed var(--rule);border-radius:14px;background:var(--card)}
.photo-slot.have{border-style:solid;border-color:var(--green)}
.photo-slot>img{width:100%;max-height:220px;object-fit:cover;border-radius:10px}
.door.pencilled{background:var(--green);color:#fff;border-color:var(--green)}
.door.leaflet{background:color-mix(in srgb,var(--grey) 25%,var(--card));box-shadow:inset 0 -3px 0 var(--grey)}
.door.not_owner,.door.not_suitable,.door.info_left{color:var(--muted);border-style:dashed}
.door.info_left{background:color-mix(in srgb,var(--orange) 12%,var(--card))}
.fab{position:fixed;right:16px;bottom:calc(var(--tabs-h) + 14px + env(safe-area-inset-bottom,0px));z-index:6;border:0;border-radius:99px;padding:12px 16px;font-weight:800;font-size:15px;background:var(--ink);color:var(--bg);box-shadow:0 8px 24px rgba(0,0,0,.25);cursor:pointer}
.door-page{padding-bottom:70px}
.answers{display:grid;gap:6px}
.answers details{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:10px 12px}
.answers summary{font-weight:800;cursor:pointer}
.answers p{margin:8px 0 0}
/* the diary at the door */
.calendar{display:grid;gap:6px}
.calhead,.calrow{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.calhead span{font-size:12px;font-weight:800;color:var(--muted);text-align:center}
.cal{position:relative;display:grid;place-items:center;gap:0;min-height:54px;border-radius:12px;border:1px solid var(--rule);background:var(--card);font-weight:800;font-size:17px;font-variant-numeric:tabular-nums;line-height:1.1;padding:4px 2px}
.cal small{font-size:11px;font-weight:700}
.cal.past{opacity:.35;border-style:dashed}
.cal.full{background:var(--sunk);color:var(--muted)}
button.cal{cursor:pointer}
.cal.free{background:color-mix(in srgb,var(--green) 16%,var(--card));border-color:color-mix(in srgb,var(--green) 55%,var(--card));color:var(--green)}
.cal.ask{background:color-mix(in srgb,var(--amber) 18%,var(--card));border-color:color-mix(in srgb,var(--amber) 55%,var(--card));color:var(--amber)}
.cal.on{background:var(--orange);border-color:var(--orange);color:var(--on-orange);box-shadow:0 0 0 3px color-mix(in srgb,var(--orange) 30%,transparent)}
.cal i{position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--amber)}
.key i.k-free{background:color-mix(in srgb,var(--green) 30%,var(--card))}.key i.k-ask{background:color-mix(in srgb,var(--amber) 30%,var(--card))}
.key i.k-full{background:var(--sunk)}.key i.k-off{background:var(--amber);border-radius:50%;width:8px;height:8px}
.mini{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin:8px 0}
.mini span{position:relative;display:grid;place-items:center;font-size:12px;font-weight:800;padding:5px 0;border-radius:8px;font-variant-numeric:tabular-nums}
.mini span b{font-size:10px;font-weight:800;opacity:.75}
.mini .free{background:color-mix(in srgb,var(--green) 18%,var(--card));color:var(--green)}
.mini .busy{background:var(--sunk);color:var(--muted)}
.mini .off{background:var(--sunk);color:var(--muted);text-decoration:line-through}
.mini i{position:absolute;top:3px;right:3px;width:5px;height:5px;border-radius:50%;background:var(--amber)}
.status.s-booked,.status.s-fitted{background:color-mix(in srgb,var(--green) 18%,var(--card));color:var(--green)}
.status.s-not_suitable,.status.s-lost{color:var(--muted)}
.hold{padding-top:8px;border-top:1px solid var(--rule)}
.done-page{text-align:center}
.done-page .card{text-align:left}