/* The social layer, in the prototype's palette. */
/* Base the prototype got from its MkDocs Material host page: element-level, so
   every class rule in app.css still wins. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:#f5f3ef;color:#252e2c;font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
button{background:transparent;border:0;margin:0;padding:0;font:inherit;color:inherit;cursor:pointer}
input,select{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-weight:700}
.srs-page{padding:max(14px,env(safe-area-inset-top)) clamp(14px,3vw,40px) 40px}
.srs-account{display:flex;align-items:center;justify-content:flex-end;min-width:90px}
.srs-signin{border:1px solid #c9d2bf;border-radius:999px;padding:8px 16px;font-size:13px;background:#fafbf5}
.srs-signin:hover{border-color:#2f5144}
.srs-me{position:relative}
.srs-me summary{list-style:none;display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px}
.srs-me summary::-webkit-details-marker{display:none}
.srs-avatar{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#2f5144;color:#fff;font-size:13px;font-weight:650;flex-shrink:0}
.srs-menu{position:absolute;right:0;top:40px;z-index:20;background:#fffdf8;border:1px solid #dedfd8;border-radius:10px;padding:10px;min-width:210px;display:grid;gap:4px;box-shadow:0 12px 40px #192e2320}
.srs-menu small{color:#6f7771;padding:4px 8px 8px;border-bottom:1px solid #eceae3;margin-bottom:4px}
.srs-menu button,.srs-menu a{text-align:left;background:none;border:0;padding:8px;border-radius:6px;font-size:13px}
.srs-menu button:hover,.srs-menu a:hover{background:#f0efe8}
.srs-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:18px}
.srs-dim{color:#6f7771}
.srs-link{background:none;border:0;padding:0;color:#ab583d;text-decoration:underline;text-underline-offset:3px}
.srs-create{display:flex;gap:10px;margin:22px 0 26px;flex-wrap:wrap}
.srs-create input{flex:1;min-width:220px;border:1px solid #dedfd8;border-radius:10px;padding:12px 14px;background:#fffdf8}
.srs-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.srs-group-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;padding:18px;border:1px solid #dedfd8;border-radius:14px;background:#fffdf8}
.srs-group-card strong{font-size:18px;letter-spacing:-.02em}
.srs-group-card span{font-size:11px;color:#6f7771;letter-spacing:.06em;text-transform:uppercase}
.srs-group-card:hover{border-color:#2f5144}
.srs-group-head{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.srs-cols{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);gap:clamp(18px,4vw,46px);align-items:start}
@container (max-width:760px){.srs-cols{grid-template-columns:1fr}}
@media (max-width:760px){.srs-cols{grid-template-columns:1fr}}
.srs-picks{display:grid;gap:10px}
.srs-pick{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px 16px;border:1px solid #dedfd8;border-radius:12px;background:#fffdf8}
.srs-pick h3{font-size:17px;margin:2px 0 4px!important;letter-spacing:-.02em}
.srs-pick h3 .srs-link{color:inherit;text-decoration:none;font:inherit}
.srs-pick small{color:#6f7771}
.srs-pick.gone{opacity:.65}
.srs-pick-actions{display:flex;align-items:center;gap:6px}
.srs-vote{display:inline-flex;align-items:center;gap:5px;border:1px solid #dedfd8;border-radius:999px;padding:6px 11px;background:#fff}
.srs-vote.on{background:#f7e3db;border-color:#d99b84;color:#ab583d}
.srs-x{border:0;background:none;font-size:20px;line-height:1;color:#6f7771;padding:4px 8px}
.srs-members{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.srs-members li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border:1px solid #eceae3;border-radius:10px;background:#fffdf8}
.srs-member-name{flex:1;min-width:100px}
.srs-badge{font-size:10px;letter-spacing:.08em;text-transform:uppercase;background:#dce8be;color:#2f5144;border-radius:999px;padding:3px 8px}
.srs-member-actions{display:flex;gap:6px;width:100%;justify-content:flex-end}
.srs-member-actions button,.srs-invites button{border:1px solid #dedfd8;background:#fff;border-radius:7px;padding:5px 9px;font-size:12px}
.srs-danger{color:#a3402d}
.srs-invite-form{display:grid;gap:10px;padding:14px;border:1px solid #dedfd8;border-radius:12px;background:#fffdf8}
.srs-invite-form select{border:1px solid #dedfd8;border-radius:7px;padding:6px;background:#fff;margin-left:6px}
.srs-link-box{display:flex;gap:8px;margin-top:12px}
.srs-link-box input{flex:1;min-width:0;border:1px solid #c9d2bf;border-radius:8px;padding:9px;background:#fff;font-size:12px}
.srs-invites{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:6px;font-size:13px}
.srs-invites li{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 10px;border-radius:8px;background:#f0efe8}
.srs-invites li span{flex:1}
.srs-invites li.closed{opacity:.6}
.srs-invites small{color:#6f7771}
.srs-leave{margin-top:22px}
.srs-modal{position:fixed;inset:0;background:#1d2a2499;display:grid;place-items:center;z-index:50;padding:16px}
.srs-sheet{background:#f5f3ef;border-radius:18px;padding:26px;max-width:440px;width:100%;box-shadow:0 30px 80px #0006}
.srs-sheet h2{font-size:30px;letter-spacing:-.04em;margin:6px 0 8px}
.srs-popover{position:absolute;z-index:30;margin-top:6px;background:#fffdf8;border:1px solid #dedfd8;border-radius:10px;padding:8px;display:grid;gap:2px;min-width:200px;box-shadow:0 12px 40px #192e2320}
.srs-popover strong{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#6f7771;padding:4px 8px}
.srs-popover button{text-align:left;border:0;background:none;padding:8px;border-radius:6px}
.srs-popover button:hover{background:#f0efe8}
#srs-toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translate(-50%,30px);opacity:0;transition:.25s;background:#2f5144;color:#fff;padding:11px 18px;border-radius:999px;font-size:14px;z-index:60;pointer-events:none;max-width:90vw}
#srs-toast.show{opacity:1;transform:translate(-50%,0)}
#srs-toast.bad{background:#8f3a2a}

/* Drink illustrations are portrait 4:5 (900x1125) with the garnish near the top.
   Every frame that shows one takes the same shape, so cover never crops it. */
.stir-recipe-image{aspect-ratio:4/5}
.stir-recipe-image>img{object-position:center}
.stir-menu-art:has(>img){aspect-ratio:4/5}
.stir-menu-art>img{object-position:center}
.stir-inspiration{height:auto;aspect-ratio:4/5;max-width:330px}
.stir-inspiration>img{object-position:center}
@container(max-width:1100px){.stir-inspiration{height:auto;max-width:290px}}
@container(max-width:700px){.stir-recipe-image{aspect-ratio:4/5}.stir-inspiration{height:auto;width:120px;aspect-ratio:4/5}.stir-recipe-portrait{aspect-ratio:4/5;max-height:none;max-width:420px;margin-inline:auto}}

/* Data & sources: one row per source, with links to its page and licence. */
.srs-sources{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:10px}
.srs-sources li{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding:14px 16px;border:1px solid #dedfd8;border-radius:12px;background:#fffdf8;font-size:13px}
.srs-sources strong{min-width:170px;font-size:14px}
.srs-sources span{flex:1;min-width:240px;color:#4f5753}
.srs-sources a{display:inline-flex;align-items:center;gap:4px;color:#ab583d;font-size:12px;text-decoration:underline;text-underline-offset:3px}
/* Narrow phones: keep the hero card clear of the headline. */
@container(max-width:400px){.stir-inspiration{width:96px}.stir-hero h1{font-size:36px!important;max-width:205px}.stir-hero p{max-width:200px}}

/* Preview access: the landing and installer pages, the testers screen and its magic code. */
.srs-gated{font-size:12px;color:#6f7771;margin-right:10px}
.srs-preview-page{max-width:560px;margin:0 auto}
.srs-preview-brand{display:flex;align-items:center;gap:10px;margin:8px 0 26px;color:#2f5144}
.srs-preview-brand strong{font-size:24px;letter-spacing:-.06em;color:#252e2c}
.srs-preview-brand span{color:#9a623d}
.srs-preview-card{background:#fffdf8;border:1px solid #dedfd8;border-radius:18px;padding:clamp(20px,5vw,32px)}
.srs-preview-card h1{font-size:clamp(30px,8vw,44px);line-height:1.05;letter-spacing:-.05em;margin:8px 0 14px}
.srs-preview-card .stir-eyebrow{font-size:11px;letter-spacing:.12em;color:#6f7771}
.srs-preview-for{font-size:16px;padding:12px 14px;border-radius:10px;background:#f0efe8}
.srs-preview-page .stir-primary,.srs-preview-page .stir-outline{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:999px;font-weight:600}
.srs-preview-page .stir-primary{background:#2f5144;color:#fff}
.srs-preview-page .stir-outline{border:1px solid #c9d2bf;background:#fafbf5}
.srs-preview-page .stir-primary:disabled{opacity:.55}
.srs-install{display:grid;gap:10px;margin-top:18px}
.srs-install-qr{display:flex;align-items:center;justify-content:space-between;gap:24px;background:#fffdf8;border:1px solid #dedfd8;border-radius:18px;padding:clamp(20px,5vw,32px);margin-bottom:16px}
.srs-install-qr h1{font-size:clamp(30px,8vw,44px);line-height:1.05;letter-spacing:-.05em;margin:8px 0 14px}
.srs-install-qr p{max-width:48ch}
.srs-install-qr img{flex:none;width:min(42vw,280px);height:auto;background:#fff;padding:10px;border-radius:12px;image-rendering:pixelated}
.srs-install-qr-link{display:block;flex:none;line-height:0}
.srs-install-direct{font-size:11px;overflow-wrap:anywhere;margin-top:16px}
.srs-install-direct a{text-decoration:underline}
@media(max-width:600px){.srs-install-qr{flex-direction:column-reverse;align-items:flex-start}.srs-install-qr img{width:220px;align-self:center}}
.srs-install-step{border:1px solid #eceae3;border-radius:12px;padding:12px 14px;background:#fff}
.srs-install-step summary{cursor:pointer;font-weight:650}
.srs-install-step h2{display:none}
.srs-install-step ol{padding-left:20px;margin:10px 0 4px;display:grid;gap:8px}
.srs-qr-full{position:fixed;inset:0;z-index:70;background:#f5f3ef;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));overflow:auto}
.srs-qr-sheet{width:100%;max-width:440px;text-align:center;display:grid;gap:12px;justify-items:center}
.srs-qr{width:min(84vw,62vh,380px);aspect-ratio:1;background:#fff;border-radius:16px;padding:8px;box-shadow:0 20px 60px #192e2322}
.srs-qr svg{width:100%;height:100%;display:block}
.srs-qr-sheet .srs-row{justify-content:center;margin-top:4px}
#srs-tester-form label{display:flex;flex-direction:column;gap:4px;font-size:13px}
#srs-tester-form input{border:1px solid #dedfd8;border-radius:8px;padding:10px;background:#fff}
#srs-tester-form select{margin-left:0}
/* Environments (env.json): a bar across the top outside production; a chip for staff in production. */
.srs-env-bar{position:sticky;top:0;z-index:1000;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;background:#f2b632;color:#2b2100;padding:calc(4px + env(safe-area-inset-top)) 12px 4px;font-size:12px;line-height:1.4;border-bottom:1px solid #c98f12;text-align:center}
.srs-env-bar strong{letter-spacing:.14em;font-weight:800}
.srs-env-bar span{opacity:.85}
html.srs-env .srs-page{padding-top:14px}
.srs-env-chip{display:inline-block;margin-right:10px;border:1px solid #2f5144;color:#2f5144;border-radius:999px;padding:2px 8px;font-size:10px;font-weight:700;letter-spacing:.08em;white-space:nowrap}
.srs-envs{display:grid;gap:2px;border-top:1px solid #eceae3;border-bottom:1px solid #eceae3;margin:4px 0;padding:4px 0}
.srs-envs small{border:0;margin:0;padding:4px 8px 2px;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.srs-menu .srs-env-item{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.srs-env-item em{font-style:normal;font-size:11px;color:#6f7771}
.srs-env-item.current span::before{content:"✓ ";color:#2f5144}
.srs-menu .srs-env-item:disabled{cursor:default;background:none}
.srs-menu .srs-env-item:disabled:not(.current){color:#9aa09b}

/* Venue flags: places that are changing, or edge cases for a cocktail guide. */
.stir-flag{margin:.4rem 0;padding:.45rem .7rem;border-radius:8px;font-size:.9rem;line-height:1.35}
.stir-flag-changing{background:#fff4d6;border:1px solid #e0b84a;color:#5c4400}
.stir-flag-edge{background:#eef1ee;border:1px solid #b9c4bb;color:#2f5144}

/* Anonymous view of venue drinks: names only. */
.stir-signin-note{color:#6b6b6b;font-style:italic}
.stir-chip-static{display:inline-block;padding:.35rem .7rem;border-radius:999px;border:1px solid #d9d4cb;font-size:.85rem}

.srs-disclaimer{max-width:46rem;line-height:1.55;margin:.6rem 0}