/* DRG-55 booking flow. Brand tokens come from the page (gen_site.CSS :root): forest, fairway, paper, ink, soft, line, wash. */
.bk-wrap{padding:22px 0 40px}
.bk{max-width:560px;margin:0 auto}
.bk .stp{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);margin:0 0 6px}
.bk h1{font-size:26px;line-height:1.2;color:var(--forest);margin:0 0 6px;outline:none}
/* DRG-165: the step's plain label sits under the store name, smaller */
.bk h1 .stl{display:block;font-size:17px;font-weight:700;letter-spacing:.01em;color:var(--soft);margin-top:4px}
.bk .sub{color:var(--soft);margin:0 0 16px}
.bk .ch{display:grid;gap:10px;margin:0 0 16px;padding:0;border:0}
.bk .ch.two{grid-template-columns:1fr 1fr}
.bk .ch.four{grid-template-columns:repeat(4,1fr)}
.bk .ch.five{grid-template-columns:repeat(5,1fr)}
.bk .ch.times{grid-template-columns:repeat(3,1fr)}
.bk .o{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:56px;width:100%;padding:12px 14px;border-radius:14px;
  border:1.5px solid var(--line);background:#fff;color:var(--ink);font:inherit;font-weight:800;text-align:left;cursor:pointer}
.bk .o small{font-weight:600;color:var(--soft);font-size:13px}
.bk .ch.four .o,.bk .ch.five .o,.bk .ch.times .o{align-items:center;text-align:center;min-height:48px;padding:10px 6px}
.bk .o[aria-pressed="true"]{border-color:var(--forest);background:rgba(19,103,52,.08);box-shadow:inset 0 0 0 1px var(--forest)}
.bk .o:hover{border-color:var(--forest)}
.bk label{display:block;font-weight:800;font-size:14px;margin:12px 0 4px}
.bk input{width:100%;min-height:48px;padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;font:inherit;background:#fff;color:var(--ink)}
.bk input[aria-invalid="true"]{border-color:#B3261E}
.bk .fe{color:#B3261E;font-size:13px;font-weight:700;margin:4px 0 0}
.bk .hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.bk .nav{display:flex;gap:10px;margin-top:20px}
.bk .nav .go{scroll-margin-bottom:16px}            /* DRG-170: brought into view after a pick, with a little room under it */
.bk .go,.bk .back{min-height:50px;border-radius:14px;font:inherit;font-weight:800;font-size:16px;padding:12px 18px;cursor:pointer}
.bk .go{flex:1;background:var(--forest);color:#fff;border:0}
.bk .go[disabled]{opacity:.45;cursor:not-allowed}
.bk .back{background:#fff;color:var(--forest);border:1.5px solid var(--forest)}
.bk .sum{background:#fff;border:1px solid var(--line);border-radius:16px;margin:0 0 14px}
.bk .sum div{display:flex;justify-content:space-between;gap:12px;padding:11px 16px;border-top:1px solid var(--line)}
.bk .sum div:first-child{border-top:0}
.bk .sum dt{color:var(--soft);font-weight:600}.bk .sum dd{margin:0;font-weight:800;text-align:right}
.bk .sum .tot dd,.bk .sum .tot dt{color:var(--forest);font-size:18px;font-weight:800}
.bk .pol{font-size:14px;color:var(--soft);margin:0 0 6px}
.bk .msg{border-radius:14px;padding:14px 16px;margin:0 0 14px;font-weight:600}
.bk .msg.err{background:#FCEDEC;color:#7A1A14;border:1px solid #F0C5C1}
.bk .msg.info{background:var(--wash);color:var(--ink)}
.bk .msg a{font-weight:800}
.bk .ok{width:56px;height:56px;border-radius:50%;background:var(--fairway);color:#fff;display:grid;place-items:center;font-size:30px;font-weight:800;margin:0 0 10px}
.bk .ld{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bk .ld i{display:block;height:48px;border-radius:14px;background:linear-gradient(90deg,var(--wash),rgba(12,63,52,.12),var(--wash));background-size:200% 100%;animation:sh 1.2s linear infinite}
@keyframes sh{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.bk .ld i{animation:none}}
.bk .lnk2{display:inline-flex;align-items:center;min-height:44px;font-weight:800;color:var(--forest)}
.bk .dry{font-size:12px;color:var(--soft)}
@media (min-width:700px){.bk .ch.times{grid-template-columns:repeat(4,1fr)}.bk h1{font-size:30px}}
.bk .acts{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.bk .btn2{border:1.5px solid var(--forest);border-radius:14px;padding:10px 16px;text-decoration:none;background:#fff}
/* DRG-112: Add to calendar, three ways (Apple, Google, the file) */
.bk .calo{margin:0 0 4px}.bk .calo-h{margin:0 0 8px;font-weight:800;color:var(--forest);font-size:15px}
.bk .calo .btn2{min-height:44px;display:inline-flex;align-items:center}
.bk .sum dd.bid{font-family:ui-monospace,Menlo,monospace;font-size:13px;word-break:break-all}
.bk .go.danger{background:#B3261E}
/* DRG-81: the SMS opt-in, unchecked by default */
.bk .opt{display:flex;gap:12px;align-items:flex-start;margin:18px 0 0;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:#fff}
.bk .opt input{width:24px;height:24px;min-height:0;flex:0 0 24px;margin:1px 0 0;padding:0;accent-color:var(--forest)}
.bk .opt label{margin:0;font-weight:600;font-size:15px;line-height:1.4}
.bk .optm{font-size:14px;color:var(--soft);margin:6px 0 0}
.bk .optm a{display:inline-block;padding:11px 0;margin:-11px 0;font-weight:800;color:var(--forest)}
/* DRG-82: the day step's calendar. Open dates are buttons; the rest are disabled and say how to book by phone */
.bk .cal{background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px 10px 12px;margin:12px 0 10px}
.bk .cal-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 6px}
.bk .cal-h h2{font-size:17px;margin:0;color:var(--forest)}
.bk .cal-n{min-height:44px;min-width:44px;padding:0 12px;font-size:20px;line-height:1}
.bk .cal-n[disabled]{opacity:1;color:#5b6661;border-style:dashed;background:#f3f4f2;cursor:default}
.bk .cal-w,.bk .cal-r{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.bk .cal-w span{text-align:center;font-size:12px;font-weight:800;color:var(--soft);padding:2px 0}
.bk .cal-r{margin-top:4px}
.bk .cal-d{min-height:44px;border-radius:10px;border:1.5px solid var(--forest);background:rgba(19,103,52,.08);color:var(--forest);font:inherit;font-weight:800;cursor:pointer}
.bk .cal-d[aria-pressed="true"]{background:var(--forest);color:#fff}
.bk .cal-d[disabled]{border:1px solid transparent;background:none;color:#6B716D;font-weight:600;cursor:default}
.bk .cal-s{font-weight:800;color:var(--forest);margin:0 0 8px}
.bk .cal-key{display:inline-block;width:12px;height:12px;border-radius:3px;border:1px solid var(--line);vertical-align:-1px;margin-right:5px}
.bk .cal-key.on{border:1.5px solid var(--forest);background:rgba(19,103,52,.08)}
.bk .cal-k a{font-weight:800}
.bk input[type=date]{max-width:260px}
/* DRG-58: book by asking. The entry sits above the calendar; the conversation, the proposal card and "or use the form" */
.bk .ask-e{margin:0 0 14px}
.bk .ask-e .o{border-color:var(--forest);background:rgba(19,103,52,.06);color:var(--forest)}
.bk .ask-e .o small{color:var(--ink)}
.bk .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* DRG-95: the conversation reads like a text thread — newest at the bottom, its own scroll box so the reply is never
   out of view, and the proposal card (when there is one) sits as the last thing inside it, right under the reply. */
.bk .ask-l{display:flex;flex-direction:column;gap:8px;margin:0 0 14px;max-height:min(58vh,480px);overflow-y:auto;
  overscroll-behavior:contain;padding-right:2px;scroll-behavior:smooth;scroll-margin-top:72px}
@media (prefers-reduced-motion:reduce){.bk .ask-l{scroll-behavior:auto}}
.bk .ask-row{display:flex;flex-direction:column;align-items:flex-start;max-width:100%}
.bk .ask-row.me{align-items:flex-end}
.bk .ask-who{font-size:12px;font-weight:800;color:var(--soft);margin:0 2px 3px}
.bk .ask-m{max-width:88%;padding:10px 14px;border-radius:16px;line-height:1.4;overflow-wrap:anywhere}
.bk .ask-m.us{align-self:flex-start;background:#fff;border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:4px}
.bk .ask-m.me{align-self:flex-end;background:var(--forest);color:#fff;border-bottom-right-radius:4px}
.bk .ask-w{color:var(--soft);display:flex;align-items:center;min-height:20px}
.bk .ask-err{background:#FCEDEC;color:#7A1A14;border-color:#F0C5C1}
/* three dots, pulsing in sequence; a static row under prefers-reduced-motion so nothing animates needlessly */
.bk .ask-dots{display:inline-flex;gap:4px}
.bk .ask-dots i{width:7px;height:7px;border-radius:50%;background:var(--soft);display:block;animation:askdot 1.1s ease-in-out infinite}
.bk .ask-dots i:nth-child(2){animation-delay:.15s}
.bk .ask-dots i:nth-child(3){animation-delay:.3s}
@keyframes askdot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}
@media (prefers-reduced-motion:reduce){.bk .ask-dots i{animation:none;opacity:.85}}
.bk .ask-c{margin:0 0 14px;padding:14px;border:1.5px solid var(--forest);border-radius:18px;background:rgba(19,103,52,.05)}
.bk .ask-c h2{font-size:18px;color:var(--forest);margin:0 0 10px}
.bk .ask-c .go{width:100%;margin:0 0 8px}
.bk .ask-r{display:flex;gap:8px;align-items:stretch}
.bk textarea{flex:1;min-height:56px;padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;font:inherit;background:#fff;color:var(--ink);resize:vertical}
.bk .ask-mic{min-width:76px}
.bk .ask-mic[aria-pressed="true"]{background:var(--forest);color:#fff}
.bk .ask-f{margin:12px 0 0;text-align:center}
.bk .ask-f .lnk2{background:none;border:0;font:inherit;font-weight:800;color:var(--forest);text-decoration:underline;cursor:pointer;padding:0 8px}
.ask-cta[hidden]{display:none}
.ask-cta{background:var(--wash)}
.ask-cta .w{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding-top:16px;padding-bottom:16px}
.ask-cta p{margin:0;color:var(--ink);font-weight:600}
/* DRG-104 the membership sign-up (/join/) */
.bk h2{font-size:18px;color:var(--forest);margin:22px 0 8px}
.bk .o[disabled]{opacity:.6;cursor:not-allowed;border-style:dashed}
.bk #card-container{min-height:90px;margin:4px 0 0}
.bk .terms{background:#fff;border:1.5px solid var(--forest);border-radius:14px;padding:4px 16px 10px;margin:18px 0 0}
.bk .terms h2{margin:12px 0 6px}
.bk .terms ul{margin:0;padding-left:18px}.bk .terms li{margin:6px 0;line-height:1.45}
/* DRG-105 the member page (/staff-member, test mode): the rotating QR, the state, the membership lines */
.bk .mp-st{margin:0 0 14px}
.bk .mp-chip{display:inline-block;font-size:13px;font-weight:800;border-radius:999px;padding:4px 12px;background:#eee;color:#333}
.bk .mp-chip.s-ok{background:var(--forest);color:#fff}.bk .mp-chip.s-warn{background:#FFF4DC;color:#5C3D00}.bk .mp-chip.s-end{background:#eee;color:#333}
.bk .mp-qr{width:min(100%,300px);margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px}
.bk .mp-qr svg{display:block;width:100%;height:auto}
.bk .mp-cap{text-align:center;font-weight:800;margin:10px 0 2px}
.bk .mp-t{text-align:center;color:var(--soft);font-size:14px;margin:0 0 16px}
.bk .mp-none{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:0 0 16px}
.bk .mp-sum dt{font-weight:800}.bk .mp-sum dd{margin:0;text-align:right}
.bk .mp-sum dd small{display:block;color:var(--soft);font-size:13px;font-weight:600}
/* DRG-112 B: the details step's "Use a different number" is a button that reads as a link */
.bk .lnkb{background:none;border:0;padding:0;margin:0 0 8px;font:inherit;font-weight:800;color:var(--forest);text-decoration:underline;cursor:pointer}
.bk .who-mob{margin:0 0 4px}
/* DRG-102 the owners' billing report (/staff-billing, test mode) */
.bl .bl-t{overflow-x:auto;margin:0 0 16px;background:#fff;border:1px solid var(--line);border-radius:16px}
.bl table{border-collapse:collapse;width:100%;font-size:14px}
.bl caption{text-align:left;font-weight:800;color:var(--forest);padding:12px 14px 4px}
.bl th,.bl td{padding:9px 12px;border-top:1px solid var(--line);text-align:left;vertical-align:top}
.bl .n{text-align:right;white-space:nowrap}
.bl td small,.bl th small{display:block;color:var(--soft);font-size:12px;font-weight:600}
.bk .gn textarea{display:block;width:100%;box-sizing:border-box;min-height:84px}
.bk .gnote{margin:12px 0 0;font-size:15px;line-height:1.4;white-space:pre-line;overflow-wrap:anywhere}

/* DRG-157: accessibility and phone-size pass */
/* WCAG 2.4.1: a skip link, the first tab stop on the guest pages, visible only when focused */
.skip{position:absolute;left:8px;top:-60px;z-index:50;background:var(--forest);color:#fff;font-weight:800;padding:12px 16px;border-radius:10px;text-decoration:none}
.skip:focus{top:8px}
#main:focus{outline:none}
/* WCAG 1.4.11: the focus ring and a field's edge need 3:1. The amber ring is about 2:1 on the paper; forest is 10:1 on all four skins,
   and --soft (4.5:1 on paper and surface, tested) draws a field's edge */
.bk :focus-visible,.bk textarea:focus-visible{outline:3px solid var(--forest);outline-offset:2px}
.bk .go:focus-visible{outline-color:var(--forest);box-shadow:0 0 0 2px var(--paper)}
.bk input,.bk textarea{border-color:var(--soft)}
.bk input[aria-invalid="true"]{border-color:#B3261E;border-width:2px}
/* a long email or name wraps in the summary instead of pushing the page sideways (320 px) */
.bk .sum dd{min-width:0;overflow-wrap:anywhere}
.bk .sum dt{flex:0 0 auto}
.bk .msg,.bk .sub,.bk .pol,.bk h1{overflow-wrap:anywhere}
/* seven day columns cannot be 44 px wide at 320 px; keep them as wide as the screen allows (44 px tall) */
@media (max-width:380px){
  .bk .cal{padding:8px 4px 10px}
  .bk .cal-w,.bk .cal-r{gap:2px}
}