/* Window Shop street page (/w/<client>). Phone first, one job: ask, or get in touch.
   Colours and type are tomchard.uk's: paper, ink and press gold; Space Grotesk for the interface,
   Bodoni Moda italic for the business name, the phone's own sans-serif for chat text. */
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/space-grotesk-var.woff2) format("woff2")}
@font-face{font-family:"Bodoni Moda";font-style:italic;font-weight:400 700;font-display:swap;src:url(/fonts/bodoni-moda-italic-var.woff2) format("woff2")}

:root{
  --bg:#FBFAF7; --bg-2:#F3F1EC; --ink:#18171A; --ink-2:#3B393D; --rule:#E2DFD8;
  --accent:#8A6634; --gold:#C9A46A; --me-bg:#18171A; --me-ink:#FBFAF7; --err:#9B2C1F; --quiet:#6f6c71;
  --grot:"Space Grotesk",system-ui,sans-serif; --serif:"Bodoni Moda",Didot,"Bodoni 72",Georgia,serif;
  --body:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#121110; --bg-2:#1E1C1A; --ink:#F4F1EA; --ink-2:#D6D1C9; --rule:#2E2B28; --accent:#C9A46A; --me-bg:#C9A46A; --me-ink:#121110; --err:#F0A496; --quiet:#8f8a84}
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{display:flex;flex-direction:column;height:100dvh;background:var(--bg);color:var(--ink);font:1.0625rem/1.55 var(--body);-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:8px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:.5rem;z-index:9;background:var(--ink);color:var(--bg);padding:.7rem 1rem;border-radius:8px;font-family:var(--grot)}
.skip:focus{left:.5rem}

/* Header: who you're talking to, and whether they're open */
.top{display:flex;align-items:center;gap:.75rem;padding:max(.75rem,env(safe-area-inset-top)) 1rem .75rem;border-bottom:1px solid var(--rule);flex:none}
.face{width:44px;height:44px;border-radius:50%;background:var(--bg-2);flex:none}
.who{min-width:0}
.who h1{font:italic 400 1.3rem/1.15 var(--serif);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.state{display:flex;align-items:center;gap:.4rem;font:400 .8125rem/1.3 var(--grot);color:var(--ink-2);margin-top:.15rem}
.dot{width:.55rem;height:.55rem;border-radius:50%;border:1.5px solid var(--ink-2);flex:none}
.state.open .dot{background:var(--gold);border-color:var(--gold)}
.state.appt .dot{background:linear-gradient(90deg,var(--gold) 50%,transparent 50%);border-color:var(--gold)}

/* The conversation */
.chat{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:1rem 1rem 1.25rem;-webkit-overflow-scrolling:touch}
.log{display:flex;flex-direction:column;gap:.75rem;max-width:40rem;margin:0 auto}
/* The character greeting the visitor. Phones: above the welcome, at a size that leaves room for it; with
   full-length art, the picture cut at mid-thigh (62% of its height, 720 x 744), so the sides and hands are never
   cut. Waist-up art is shown whole. After the first message it folds into the round face in the header. */
.hello{display:flex;flex-direction:column;align-items:center;gap:.6rem}
.hello .say{align-self:stretch}
.figbox{position:relative;flex:none;height:min(34vh,290px);aspect-ratio:390 / 517}
.figbox.is-full{aspect-ratio:720 / 744}
.figbox img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%}
.figbox.is-full img{object-fit:cover;object-position:50% 0}
@media (max-width:47.99rem){.chat.talked .figbox{display:none}}
/* Wide screens: full length (or waist-up, if that's all the character has) to the left of the welcome,
   standing on the line of the chat. */
@media (min-width:48rem){
  .hello{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;column-gap:1.5rem;border-bottom:1px solid var(--rule)}
  .hello .say,.hello > .say{align-self:center;margin-bottom:2rem}
  .figbox{height:min(300px,48vh)}
  .figbox.is-full{height:min(410px,calc(100vh - 21rem));min-height:300px;aspect-ratio:720 / 1200}
  .figbox.is-full img{object-fit:contain;object-position:50% 100%}
}
.say,.me{max-width:88%;padding:.75rem 1rem;border-radius:18px;white-space:pre-wrap;overflow-wrap:anywhere}
.say{background:var(--bg-2);border-bottom-left-radius:6px;align-self:flex-start}
.hello .say{max-width:none;border-bottom-left-radius:6px}
.me{background:var(--me-bg);color:var(--me-ink);border-bottom-right-radius:6px;align-self:flex-end}
.say a{color:var(--accent);text-underline-offset:2px}
.thinking{display:inline-flex;gap:.3rem;padding:1.05rem 1rem}
.thinking i{width:.45rem;height:.45rem;border-radius:50%;background:var(--ink-2);opacity:.35;animation:blink 1.2s infinite}
.thinking i:nth-child(2){animation-delay:.2s}.thinking i:nth-child(3){animation-delay:.4s}
@keyframes blink{40%{opacity:1}}
.new{animation:in .28s cubic-bezier(.19,1,.22,1) both}
@keyframes in{from{opacity:0;transform:translateY(6px)}}

/* Quick questions, and "Leave a message" offered after an answer */
.quick{display:flex;flex-wrap:wrap;gap:.5rem}
.quick button,.offer{min-height:48px;padding:.6rem 1.05rem;border:1.5px solid var(--accent);border-radius:999px;background:transparent;font:500 .975rem/1.2 var(--grot);color:var(--ink);cursor:pointer;text-align:left}
.quick button:active,.offer:active{background:var(--bg-2)}
.offer{align-self:flex-start}

/* Leave a message */
.msgform{max-width:40rem;margin:1.25rem auto 0;padding:1.1rem 1rem 1rem;border:1px solid var(--rule);border-radius:18px;background:var(--bg)}
.msgform h2{font:500 1.15rem/1.3 var(--grot)}
.msgform h2:focus{outline:none}
.msgform label{display:block;font:500 .95rem/1.3 var(--grot);margin:1rem 0 .35rem}
.msgform input,.msgform textarea{display:block;width:100%;min-height:48px;padding:.65rem .8rem;border:1.5px solid var(--ink-2);border-radius:10px;background:var(--bg);font-size:1rem}
.msgform textarea{resize:vertical}
.msgform [aria-invalid="true"]{border-color:var(--err)}
.hint{font:400 .875rem/1.4 var(--grot);color:var(--ink-2);margin-top:.35rem}
.err{font:500 .9rem/1.4 var(--grot);color:var(--err);margin-top:.75rem}
.err:empty{display:none}
.row{display:flex;align-items:center;gap:1rem;margin-top:1rem;flex-wrap:wrap}
.go{min-height:48px;padding:.65rem 1.4rem;border:0;border-radius:999px;background:var(--me-bg);color:var(--me-ink);font:500 1rem/1 var(--grot);cursor:pointer}
.go[disabled]{opacity:.6;cursor:progress}
.link{min-height:48px;padding:0 .5rem;border:0;background:none;font:400 1rem/1 var(--grot);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.privacy{font:400 .85rem/1.4 var(--grot);color:var(--ink-2);margin-top:.9rem}
.privacy a{color:var(--accent);text-underline-offset:2px}
/* The consent tick box: a 24px box beside its wording, with the whole label to tap */
.consent{display:flex;align-items:flex-start;gap:.65rem;margin-top:1rem}
.msgform .consent input{flex:none;width:24px;height:24px;min-height:0;margin:.1rem 0 0;padding:0;accent-color:var(--accent);cursor:pointer}
.msgform .consent label{margin:0;font:400 .9rem/1.45 var(--grot);color:var(--ink);cursor:pointer}
.consent a{color:var(--accent);text-underline-offset:2px}
.msgform .consent [aria-invalid="true"]{outline:2px solid var(--err);outline-offset:2px}
/* "Chats are stored..." under the greeting: small and quiet */
/* Lighter than other small print but still AA (light 4.96:1, dark 5.51:1); hidden after the visitor's first message */
.chat-notice{font:400 .72rem/1.4 var(--grot);color:var(--quiet);text-align:center;max-width:32rem;margin:0 auto}
.chat-notice[hidden]{display:none}
.chat-notice a{color:var(--accent);text-underline-offset:2px}

/* Typing box */
.ask{flex:none;display:flex;gap:.5rem;padding:.6rem 1rem;border-top:1px solid var(--rule);background:var(--bg)}
.ask input{flex:1;min-width:0;min-height:48px;padding:.6rem 1rem;border:1.5px solid var(--ink-2);border-radius:999px;background:var(--bg);font-size:1rem}
.ask input::placeholder{color:var(--ink-2);opacity:1}
.send{flex:none;width:48px;height:48px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--me-bg);color:var(--me-ink);cursor:pointer}
.credit{flex:none;text-align:center;font:400 .75rem/1 var(--grot);color:var(--ink-2);padding:0 1rem .5rem}
.credit a{text-decoration:none;display:inline-block;padding:.35rem .25rem}
.credit .tm-note{display:block;font-size:.65rem;line-height:1.3;color:var(--ink-2);padding-top:.1rem}
/* On Location: the place name in the header, and the small "concept demo" notice */
.state.place{font-weight:500;color:var(--ink)}
/* On Location: where you are ("Stop 1 of 7 · <name>"), with this stop's and the next stop's buttons, always in view */
.here{flex:none;padding:.6rem 1rem .7rem;border-bottom:1px solid var(--rule);background:var(--bg-2)}
.here>*{max-width:40rem;margin-left:auto;margin-right:auto}
.badge{font:600 1rem/1.3 var(--grot);color:var(--ink)}
.go-row{display:grid;grid-template-columns:auto 1fr;gap:.5rem;margin-top:.5rem}
.go-row .there{margin-top:0;min-height:44px;padding:.45rem .9rem;font-size:.9375rem}
.go-row .next-go{background:transparent;color:var(--ink);border:1.5px solid var(--accent)}
.go-row .there span{overflow-wrap:anywhere}
.go-row .there svg{flex:none}
.go-row.one{grid-template-columns:1fr}
.go-row.one .there{justify-self:start}
/* A walk story: the walk's start on its own line, then the leaflet and the next story */
.go-row.story-row .walk-start{grid-column:1/-1;justify-self:start}
.notice{flex:none;max-width:40rem;margin:0 auto;text-align:center;font:400 .6875rem/1.35 var(--grot);color:var(--ink-2);padding:0 1rem .5rem}
/* On Location wayfinding: "Take me there" walking directions, the next stop, and a photo of the place */
.say .photo,.way .photo{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:12px;margin-bottom:.6rem;background:var(--rule)}
.there{display:inline-flex;align-items:center;gap:.45rem;min-height:48px;margin-top:.6rem;padding:.55rem 1.1rem;border-radius:999px;background:var(--me-bg);color:var(--me-ink);font:500 .975rem/1.2 var(--grot);text-decoration:none;white-space:normal}
.say .there{color:var(--me-ink)}
.there:active{opacity:.85}
.next{margin-top:.85rem;padding-top:.75rem;border-top:1px solid var(--rule)}
.next .there{background:transparent;color:var(--ink);border:1.5px solid var(--accent)}
.way{display:flex;flex-direction:column;align-items:flex-start;max-width:88%}
.way .there{margin-top:0}

/* Bottom bar: plain links, works without JavaScript */
.bar{flex:none;border-top:1px solid var(--rule);background:var(--bg-2);padding-bottom:env(safe-area-inset-bottom)}
.bar-in{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;max-width:40rem;margin:0 auto}
.bar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;min-height:60px;padding:.45rem .25rem;text-decoration:none;font:500 .8125rem/1.15 var(--grot);text-align:center}
.bar a:active{background:var(--rule)}
.bar svg{width:22px;height:22px}

@media (min-width:44rem){.chat{padding-top:1.5rem}}
@media (max-height:520px){.figbox{height:24vh}}

/* Reduced motion, tiered: new messages fade in without moving (no teleporting); the typing dots are a
   loading signal, so they keep their gentle opacity pulse, which implies no movement and stops when the answer arrives */
@keyframes fade{from{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .new{animation:fade .15s ease-out both}
}
@media (forced-colors:active){.say,.me,.msgform{border:1px solid CanvasText}.dot{forced-color-adjust:none}.there{border:1px solid LinkText}}

/* A client with its own colours (theme): its name as a simple serif wordmark, or its logo. */
.themed .who h1{font:600 1.45rem/1.15 Georgia,"Iowan Old Style","Times New Roman",serif;letter-spacing:.01em}
.who h1 .logo{display:block;height:34px;width:auto}
.state.note .dot{display:none}
/* A pop-up after its last day */
.finished{display:block;height:auto;min-height:100dvh}
.done{max-width:34rem;margin:0 auto;padding:clamp(3rem,12vh,7rem) 1.25rem;text-align:center}
.done h1{font:italic 400 2.2rem/1.1 var(--serif);margin-bottom:1rem}
.themed .done h1{font:600 2.4rem/1.1 Georgia,"Iowan Old Style",serif;font-style:normal}
.done .lead{font:500 1.15rem/1.5 var(--grot);margin-bottom:1rem}
.done p{font-family:var(--grot);color:var(--ink-2)}
.done a{color:var(--accent);text-underline-offset:2px}