/* /consult and /consult/return. Tokens come from /app.css, shared components from
   /acct/acct.css. Every rule is scoped to the page class so nothing leaks. */

/* ---------------- /consult ---------------- */

.pg-consult .cs{min-width:0}
.pg-consult .cs-hero{display:flex; flex-wrap:wrap; align-items:center; gap:22px; margin:8px 0 26px}
/* height:auto or the img's height attribute (1600) wins and aspect-ratio never
   applies. The attributes stay for the intrinsic ratio; the box is squared here
   and the face framed from the top. */
.pg-consult .cs-photo{width:112px; max-width:100%; height:auto; aspect-ratio:1;
  object-fit:cover; object-position:50% 8%; border-radius:50%;
  border:1px solid var(--rule); background:var(--surface-2); flex:none}
.pg-consult .cs-htext{flex:1 1 280px; min-width:0}
.pg-consult .cs-eyebrow{margin:0 0 6px; font-size:13px; font-weight:600; color:var(--brass); letter-spacing:.01em}
.pg-consult .cs-htext .acct-h1{margin-top:0; text-wrap:balance}
.pg-consult .cs-htext .acct-lede{margin-bottom:16px}
.pg-consult .cs-jump{margin:0}

.pg-consult .cs-intro{white-space:pre-line; margin:0 0 26px; padding:14px 16px;
  border-inline-start:3px solid var(--brass); background:var(--brass-soft);
  border-radius:6px; color:var(--ink); line-height:1.9; overflow-wrap:anywhere}

.pg-consult .cs-sec{margin:0 0 30px; min-width:0}
.pg-consult .cs-h2{font-size:clamp(19px,2.6vw,23px); font-weight:700; margin:0 0 14px; color:var(--ink)}
.pg-consult .cs-h3{display:flex; align-items:center; gap:10px; font-size:17px; font-weight:600; margin:0 0 12px; color:var(--ink)}
.pg-consult .cs-num{display:inline-grid; place-items:center; width:26px; height:26px; flex:none;
  border-radius:50%; border:1px solid var(--brass); color:var(--brass); font-size:14px; font-weight:600}

.pg-consult .cs-for{list-style:none; margin:0; padding:0; display:grid; gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.pg-consult .cs-for li{padding:14px 16px; background:var(--surface); border:1px solid var(--rule);
  border-radius:8px; color:var(--ink-2); line-height:1.8; min-width:0}
.pg-consult .cs-for b{display:block; color:var(--ink); margin-bottom:2px}

.pg-consult .cs-how{list-style:none; margin:0; padding:0; counter-reset:cs-how; display:grid; gap:10px}
.pg-consult .cs-how li{counter-increment:cs-how; position:relative; padding-inline-start:44px;
  line-height:1.8; color:var(--ink-2); min-height:30px}
.pg-consult .cs-how li::before{content:counter(cs-how, arabic-indic); position:absolute; inset-inline-start:0; top:0;
  width:30px; height:30px; display:grid; place-items:center; border-radius:50%;
  background:var(--brass-soft); color:var(--brass); border:1px solid var(--brass); font-weight:600; font-size:14px}
.pg-consult .cs-how b{color:var(--ink)}

.pg-consult .cs-book{padding:20px 16px; background:var(--surface); border:1px solid var(--rule);
  border-radius:10px; box-shadow:var(--shadow)}
.pg-consult .cs-book > .acct-alert{margin:0 0 16px}
.pg-consult .cs-step{margin:0 0 22px; min-width:0}
.pg-consult .cs-step:last-of-type{margin-bottom:0}
.pg-consult .cs-retry{height:36px; padding:0 14px; font-size:14px; margin-inline-start:8px; vertical-align:middle}
/* signed-out visitors: booking needs an account, said before the form, not at the button */
.pg-consult .cs-signin{border-inline-start-color:var(--brass); background:var(--brass-soft); font-size:14.5px}
.pg-consult .cs-signin a{font-weight:600; white-space:nowrap}
.pg-consult #cs-typemsg{margin:0 0 12px}

/* step 1: type cards (buttons when booking is open, plain boxes when closed) */
.pg-consult .cs-types{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.pg-consult .cs-type{display:grid; grid-template-columns:1fr auto; gap:4px 12px; align-items:baseline;
  width:100%; min-width:0; text-align:start; font:inherit; color:var(--ink);
  padding:14px 16px; background:var(--surface-2); border:1px solid var(--rule); border-radius:8px}
.pg-consult button.cs-type{cursor:pointer; transition:border-color .16s, background .16s}
.pg-consult button.cs-type:hover{border-color:var(--brass)}
.pg-consult button.cs-type[aria-pressed="true"]{border-color:var(--brass); background:var(--brass-soft);
  box-shadow:inset 0 0 0 1px var(--brass)}
.pg-consult .cs-type-t{font-weight:600; font-size:16px; min-width:0}
.pg-consult .cs-type-p{font-weight:700; color:var(--brass); white-space:nowrap}
.pg-consult .cs-type-d{grid-column:1 / -1; font-size:14px; color:var(--ink-2)}
.pg-consult .cs-type-x{grid-column:1 / -1; font-size:14px; color:var(--muted); line-height:1.7; overflow-wrap:anywhere}

/* step 2: the date strip scrolls inside itself; it must never widen the page */
.pg-consult .cs-tz{margin:-4px 0 12px}
.pg-consult #cs-slotmsg{margin:0 0 12px}
.pg-consult #cs-slots{min-width:0; max-width:100%}
.pg-consult .cs-days{display:flex; gap:8px; width:100%; max-width:100%; min-width:0;
  overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch; padding:2px 2px 10px; margin-bottom:12px; scrollbar-width:thin}
.pg-consult .cs-day{flex:0 0 auto; scroll-snap-align:start; display:flex; flex-direction:column; align-items:center;
  gap:2px; min-width:92px; padding:9px 12px; font:inherit; color:var(--ink); cursor:pointer;
  background:var(--surface-2); border:1px solid var(--rule); border-radius:8px; transition:border-color .16s}
.pg-consult .cs-day:hover{border-color:var(--brass)}
.pg-consult .cs-day[aria-pressed="true"]{border-color:var(--brass); background:var(--brass-soft)}
.pg-consult .cs-day-w{font-weight:600; font-size:14px}
.pg-consult .cs-day-n{font-size:13px; color:var(--ink-2); white-space:nowrap}
.pg-consult .cs-times{display:grid; gap:8px; grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
.pg-consult .cs-time{height:42px; padding:0 8px; font:inherit; font-weight:600; color:var(--ink); cursor:pointer;
  background:var(--surface-2); border:1px solid var(--rule); border-radius:7px; transition:border-color .16s; min-width:0}
.pg-consult .cs-time:hover{border-color:var(--brass)}
.pg-consult .cs-time[aria-pressed="true"]{background:var(--brass); border-color:var(--brass); color:var(--ground)}
:root[data-theme="light"] .pg-consult .cs-time[aria-pressed="true"],
html:not([data-theme]) .pg-consult .cs-time[aria-pressed="true"]{color:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pg-consult .cs-time[aria-pressed="true"]{color:var(--ground)}}
:root[data-theme="dark"] .pg-consult .cs-time[aria-pressed="true"]{color:var(--ground)}
.pg-consult .cs-loading{display:flex; align-items:center; gap:8px; margin:0}

.pg-consult .cs-type:focus-visible,.pg-consult .cs-day:focus-visible,.pg-consult .cs-time:focus-visible{
  outline:2px solid var(--brass); outline-offset:2px}

/* step 3 */
.pg-consult .cs-form{min-width:0}
.pg-consult .cs-form textarea{resize:vertical; min-height:96px}
.pg-consult .cs-form textarea.cs-pref{min-height:72px}
.pg-consult .cs-count{text-align:end; font-variant-numeric:tabular-nums}
.pg-consult .cs-restored{margin:-4px 0 12px; color:var(--ok)}

/* summary + pay */
.pg-consult .cs-sum{padding-top:18px; border-top:1px solid var(--rule)}
.pg-consult .cs-dl{display:grid; gap:8px; margin:0 0 16px}
.pg-consult .cs-dl > div{display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 16px;
  padding-bottom:8px; border-bottom:1px dashed var(--rule-2)}
.pg-consult .cs-dl dt{color:var(--muted); font-size:14px}
.pg-consult .cs-dl dd{margin:0; font-weight:600; color:var(--ink); overflow-wrap:anywhere; min-width:0}
.pg-consult #cs-msg{margin:0 0 14px}
.pg-consult .cs-pay{min-width:min(100%,260px); justify-content:center}
.pg-consult .cs-pay[disabled]{opacity:.55; cursor:not-allowed}
.pg-consult .cs-policy{margin:16px 0 0; padding-inline-start:18px; font-size:13px; line-height:1.9}
.pg-consult .cs-policy li{margin:0 0 2px}
/* The success panel after it is the section's last div now, so :last-of-type no longer
   reaches the pay step. */
.pg-consult #cs-step-pay{margin-bottom:0}

/* manual payment: instructions once the slot is held. Toggled with [hidden], so no
   display rule here. */
.pg-consult .cs-done{min-width:0; overflow-wrap:anywhere; padding-top:4px}
.pg-consult .cs-done:focus{outline:none}
.pg-consult .cs-done:focus-visible{outline:2px solid var(--brass); outline-offset:4px; border-radius:6px}
.pg-consult .cs-done-lede{margin:0 0 14px; line-height:1.85; color:var(--ink-2)}
.pg-consult .cs-ref{font-family:var(--mo); letter-spacing:.06em}
.pg-consult .cs-done-pref{white-space:pre-line}
.pg-consult .cs-paysteps{margin:0 0 16px}
.pg-consult .cs-paynum{font-family:var(--mo); font-weight:700; font-size:17px; color:var(--ink);
  white-space:nowrap; font-variant-numeric:tabular-nums}
.pg-consult .cs-copy-w{margin-top:8px}
.pg-consult .cs-copy{height:36px; padding:0 14px; font-size:14px}
.pg-consult .cs-wa-w{margin-top:10px}
.pg-consult .cs-wa{justify-content:center; min-width:min(100%,260px)}
.pg-consult .cs-deadline{margin:0 0 12px}
.pg-consult .cs-done-foot{margin:0; font-size:15px}

@media (max-width:560px){
  .pg-consult .cs-hero{gap:16px}
  .pg-consult .cs-photo{width:88px}
  .pg-consult .cs-book{padding:16px 12px}
  .pg-consult .cs-pay{width:100%}
  .pg-consult .cs-retry{margin:8px 0 0; margin-inline-start:0}
  .pg-consult .cs-wa{width:100%}
  .pg-consult .cs-paysteps li{padding-inline-start:40px}
}

/* ---------------- /consult/return ---------------- */

.pg-consult-return .cr{min-width:0}
.pg-consult-return .cr-lede{margin-bottom:22px}
.pg-consult-return .cr-state{min-width:0}
.pg-consult-return .cr-panel{max-width:640px; overflow-wrap:anywhere}
.pg-consult-return .cr-ok{border-top:3px solid var(--ok)}
.pg-consult-return .cr-warn{border-top:3px solid var(--warn)}
.pg-consult-return .cr-bad{border-top:3px solid var(--bad)}
.pg-consult-return .cr-head{display:flex; align-items:center; gap:10px; margin:0 0 10px}
.pg-consult-return .cr-ico{width:26px; height:26px; stroke-width:1.8}
.pg-consult-return .cr-ok .cr-ico{color:var(--ok)}
.pg-consult-return .cr-warn .cr-ico{color:var(--warn)}
.pg-consult-return .cr-bad .cr-ico{color:var(--bad)}
.pg-consult-return .cr-h2{margin:0; font-size:clamp(19px,2.6vw,22px); font-weight:700; color:var(--ink)}
.pg-consult-return .cr-p{margin:0 0 12px; line-height:1.9; color:var(--ink-2)}
.pg-consult-return .cr-wait{display:flex; align-items:center; gap:10px; margin:0 0 8px; font-weight:600; color:var(--ink)}
.pg-consult-return .cr-retrying{font-weight:400; font-size:14px; color:var(--muted); margin:0 0 12px}
.pg-consult-return .cr-meet{margin:0 0 14px; padding:12px 14px; background:var(--surface-2);
  border:1px solid var(--rule); border-radius:8px}
.pg-consult-return .cr-meet .cr-p{margin:0 0 4px}
.pg-consult-return .cr-link{display:block; direction:ltr; text-align:left; font-family:var(--mo);
  font-size:14.5px; overflow-wrap:anywhere}
.pg-consult-return .cr-dl{display:grid; gap:8px; margin:4px 0 16px}
.pg-consult-return .cr-dl > div{display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 16px;
  padding-bottom:8px; border-bottom:1px dashed var(--rule-2)}
.pg-consult-return .cr-dl dt{color:var(--muted); font-size:14px}
.pg-consult-return .cr-dl dd{margin:0; font-weight:600; color:var(--ink); min-width:0}
.pg-consult-return .acct-actions{margin-top:6px}
@media (max-width:560px){
  .pg-consult-return .acct-actions .btn{flex:1 1 auto; justify-content:center}
}