/* #115 Site style: the look of Josh's illustrated cards across the whole site (docs/design/site-style.md).
   Visual layer only, loaded after the card styles and before the café page frame so a café's theme still wins.
   Card faces live in their own stylesheets and are never restyled here. */
:root{
 --ink-line:#2E1F16;--sun:#F4B63F;--sun-soft:#FBE3A6;--heart:#E84B3C;--go:#C63A2C;--go-deep:#A82E22;
 --paper:#F7F0E2;--paper-hi:#FFF9EF;--muted:#7A5A42;--oops:#A3271B;
 --press:cubic-bezier(.2,.8,.2,1);--pop:cubic-bezier(.34,1.56,.64,1);
 --lift:0 3px 0 var(--ink-line);--lift-pressed:0 1px 0 var(--ink-line);
 --cc-brown-muted:var(--muted);
}

/* Paper: a faint printed grain, drawn by CSS (no image download). */
html:not([data-cafe-theme]) body{background-image:radial-gradient(rgba(46,31,22,.045) 1px,transparent 1.3px);background-size:7px 7px}

/* Wordmark: chunky, stacked and tilted like the card, with the red heart. */
.logo .cc-wordmark{font-family:"Lilita One",var(--cc-font-display);font-weight:400;letter-spacing:-.01em;line-height:.86;color:var(--ink-line);display:inline-block;transform:rotate(-6deg);transform-origin:0 50%}
.logo .cc-wordmark::after{content:"\2665";color:var(--heart);margin-left:.12em;font-size:.9em;display:inline-block;transform:rotate(12deg) translateY(-.04em)}
.logo .cc-wordmark{transition:transform .16s var(--press)}
.logo:active .cc-wordmark{transform:rotate(-6deg) scale(.95)}

/* Tap feedback everywhere: buttons sit on an ink ledge and press into it. */
.btn,.provider-button,.show-card,#nav a,.round-btn,.text-btn{-webkit-tap-highlight-color:transparent}
.btn:not(.light),.provider-button,body[data-role=welcome] #initial-auth .btn{border:2px solid var(--ink-line);box-shadow:var(--lift);transition:transform .14s var(--press),box-shadow .14s var(--press),background-color .14s}
.btn:not(.light),body[data-role] :is(#sign-in,#simulate,#provider-checkout):not(.light):not(:disabled){background:var(--go);color:#fff}
body[data-role] :is(#sign-in,#simulate,#provider-checkout):not(.light):active:not(:disabled){background:var(--go-deep)}
body[data-role] #sign-in.light{background:var(--paper-hi);color:var(--ink-line)}
.btn:not(.light):active:not(:disabled),.provider-button:active:not(:disabled),body[data-role=welcome] #initial-auth .btn:active:not(:disabled){transform:translateY(2px) scale(.985);box-shadow:var(--lift-pressed)}
.btn:not(.light):active:not(:disabled){background:var(--go-deep)}
.btn.light{border:2px solid var(--ink-line);background:var(--paper-hi);color:var(--ink-line);transition:transform .14s var(--press),background-color .14s}
.btn.light:active:not(:disabled){transform:scale(.97);background:var(--sun-soft)}
.btn:disabled,.provider-button:disabled{box-shadow:none;opacity:.55}
.btn:focus-visible,.provider-button:focus-visible,#nav a:focus-visible,.show-card:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--sun);outline-offset:2px}

/* Home and sign-in: a little Barcelona street with the running cup on its yellow path. */
.welcome-story{position:relative;margin-bottom:6px}
.welcome-story .mascot{display:none}
.welcome-scene{position:relative;max-width:360px;margin:-6px auto 0}
.welcome-skyline{display:block;width:100%;height:auto}
.welcome-runner{position:absolute;left:15%;bottom:4%;width:34%;height:auto;animation:cc-run 1.1s var(--press) infinite alternate}
.welcome-story h1{font:400 34px/1 "Lilita One",var(--cc-font-display);color:var(--ink-line);letter-spacing:-.01em;margin:6px 0 8px}
.welcome-story h1 br{display:inline}
.welcome-story .sub{font:400 15px/1.45 var(--cc-font-body);color:var(--muted)}
.signin-peek,.card-peek{display:block;position:relative;z-index:0;height:auto;pointer-events:none}
.signin-peek{width:84px;margin:6px 22px -16px auto;animation:cc-peek .5s .35s var(--pop) both}
body[data-role=welcome] #initial-auth{position:relative;z-index:1;padding:18px 16px 16px;background:var(--paper-hi);border:2px solid var(--ink-line);border-radius:22px;box-shadow:4px 4px 0 var(--sun);text-align:left}
body[data-role=welcome] #initial-auth .tiny{margin-top:12px}
body[data-role=welcome] #initial-auth .signin-loading,body[data-role=welcome] #initial-auth .signin-note,body[data-role=welcome] #initial-auth .signin-footer,body[data-role=welcome] #initial-auth .tiny{text-align:center}
.email-signin label{color:var(--ink-line);font-weight:700}
.email-signin input{border:2px solid var(--ink-line)!important;border-radius:14px!important;background:#fff!important;transition:box-shadow .16s,border-color .16s}
.email-signin input:focus{box-shadow:0 0 0 4px var(--sun-soft);outline:none}
.signin-note,.signin-footer{color:var(--muted)}
.signin-divider:before,.signin-divider:after{border-color:var(--ink-line);opacity:.25}
.provider-button{border-radius:16px}
.provider-button--google{background:#fff;color:var(--ink-line)}

/* Small success and error moments. */
.signin-note.is-error{color:var(--oops);animation:cc-shake .36s var(--press)}
.signin-note.is-error::before{content:"";display:inline-block;width:24px;height:24px;margin:-4px 6px -6px 0;background:url(illustrations/mascot-oops.svg) center/contain no-repeat}
.email-sent,.email-sent strong{color:var(--ink-line)}
.email-sent{position:relative;border:2px solid var(--ink-line);border-radius:18px;background:var(--sun-soft);padding:14px 74px 14px 14px;animation:cc-pop .42s var(--pop) both}
.email-sent::after{content:"";position:absolute;right:8px;bottom:6px;width:60px;height:60px;background:url(illustrations/mascot-cheer.svg) center/contain no-repeat;animation:cc-cheer .7s .2s var(--pop) both}
.sent-check{background:var(--ink-line);color:var(--sun);animation:cc-pop .36s .1s var(--pop) both}
#toast{border:2px solid var(--ink-line);border-radius:16px;box-shadow:var(--lift);font-weight:600}
#toast.show[data-kind=success]{background:var(--ink-line);animation:cc-toast-pop .36s var(--pop)}
#toast[data-kind=success]::before{content:"";display:inline-block;width:22px;height:22px;margin:-4px 8px -6px 0;border-radius:50%;background:var(--sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E1F16' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/16px no-repeat}
#toast.show[data-kind=error]{background:var(--oops);color:#fff;animation:cc-toast-shake .36s var(--press)}
.notice.error{border:2px solid var(--oops);animation:cc-shake .36s var(--press)}

/* Customer home: the cup peeks over the top of the cards from behind, never over them. */
.card-stack{position:relative;z-index:1}
/* The back card rises 58px (stack.css --peek) above the stack; the cup takes no space and sits just behind that edge. */
.card-peek{width:78px;height:52px;margin:0 30px -52px auto;top:-46px;animation:cc-peek .5s .25s var(--pop) both}
body[data-role=customer] .home-intro{margin-bottom:40px}
.home-intro h1{color:var(--ink-line)}
.show-card{border:2px solid var(--ink-line);box-shadow:var(--lift);transition:transform .14s var(--press),box-shadow .14s var(--press)}
.show-card:active{transform:translateY(2px);box-shadow:var(--lift-pressed)}
.ritual{border:2px solid var(--ink-line);border-radius:22px;background:var(--paper-hi)}
body[data-role=customer] #nav a.active{background:var(--sun-soft);color:var(--ink-line)}

/* Owner backend: same paper, chunky headings, sticker panels and a sunny headline number. */
body:is([data-role=owner],[data-role=staff]) .page-head h1{font:400 clamp(30px,8vw,44px)/1.02 "Lilita One",var(--cc-font-display);color:var(--ink-line);letter-spacing:-.01em}
body:is([data-role=owner],[data-role=staff]) .eyebrow{color:var(--muted)}
body:is([data-role=owner],[data-role=staff]) #nav a{border:2px solid transparent;transition:transform .14s var(--press),background-color .14s}
body:is([data-role=owner],[data-role=staff]) #nav a.active{background:var(--ink-line);color:var(--paper);border-color:var(--ink-line);box-shadow:2px 2px 0 var(--sun)}
body:is([data-role=owner],[data-role=staff]) #nav a:active{transform:scale(.95)}
body:is([data-role=owner],[data-role=staff]) :is(.panel,.metric){border:2px solid var(--ink-line);border-radius:20px;background:var(--paper-hi);box-shadow:3px 3px 0 rgba(46,31,22,.9)}
body:is([data-role=owner],[data-role=staff]) .hero-stat{position:relative;overflow:hidden;border:2px solid var(--ink-line);border-radius:22px;background:var(--sun-soft);box-shadow:4px 4px 0 var(--ink-line)}
body:is([data-role=owner],[data-role=staff]) .hero-stat::before{content:"";position:absolute;right:-26px;top:-26px;width:96px;height:96px;border-radius:50%;background:var(--sun);pointer-events:none}
body:is([data-role=owner],[data-role=staff]) .hero-stat::after{content:"";position:absolute;right:10px;bottom:6px;width:84px;height:75px;background:url(illustrations/mascot-run.svg) center/contain no-repeat;pointer-events:none}
body:is([data-role=owner],[data-role=staff]) .hero-stat>*{position:relative;z-index:1}
body:is([data-role=owner],[data-role=staff]) .hero-stat p{padding-right:84px}
body:is([data-role=owner],[data-role=staff]) .metric strong{color:var(--ink-line)}
body:is([data-role=owner],[data-role=staff]) :is(input:not([type=checkbox]):not([type=radio]),select,textarea){border:2px solid var(--ink-line)!important;border-radius:12px!important;background:#fff!important}
body:is([data-role=owner],[data-role=staff]) :is(input,select,textarea):focus{box-shadow:0 0 0 4px var(--sun-soft);outline:none}

@keyframes cc-run{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-6px) rotate(2deg)}}
@keyframes cc-peek{from{transform:translateY(22px);opacity:0}to{transform:none;opacity:1}}
@keyframes cc-pop{from{transform:scale(.86);opacity:0}to{transform:none;opacity:1}}
@keyframes cc-cheer{from{transform:translateY(10px) rotate(-8deg);opacity:0}to{transform:none;opacity:1}}
@keyframes cc-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@keyframes cc-toast-pop{from{transform:translate(-50%,8px) scale(.9)}to{transform:translate(-50%,0)}}
@keyframes cc-toast-shake{0%,100%{transform:translate(-50%,0)}25%{transform:translate(calc(-50% - 6px),0)}50%{transform:translate(calc(-50% + 5px),0)}75%{transform:translate(calc(-50% - 3px),0)}}
@media (prefers-reduced-motion:reduce){.welcome-runner,.signin-peek,.card-peek,.email-sent,.email-sent::after,.sent-check,.signin-note.is-error,#toast.show[data-kind],.notice.error{animation:none!important}.btn,.provider-button,.show-card,#nav a,.logo .cc-wordmark{transition:none!important}}