/* Shared compact service cards, with the same icon / text / price anatomy as production. */
.services-picker{display:grid;gap:8px}
.service-card{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:74px;width:100%;padding:11px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface);text-align:left;transition:border-color .15s,background-color .15s}
.service-card[aria-pressed="true"]{border-color:var(--pink);background:#2b1b25}
.service-card .service-icon{display:grid;place-items:center;width:32px;height:36px;border:1px solid #ffffff0d;border-radius:8px;background:#ffffff04;color:var(--text)}
.service-card .service-icon .icon{width:22px;height:22px}
.service-card .service-text{min-width:0}
.service-card .service-text b{display:block;font-size:17px;font-weight:600;line-height:1.25;overflow-wrap:anywhere}
.service-card .service-text small{display:block;font-size:13px;line-height:1.35;color:var(--muted);margin-top:4px}
.service-card .service-text>span{display:block;font-size:14px;color:var(--muted);margin-top:4px}
.service-card .service-price{font-size:17px;font-weight:600;text-align:right;white-space:nowrap}
.service-card .service-price i{display:block;font-style:normal;color:var(--pink-light);font-size:21px;line-height:1;margin-top:6px}
.picker-footer{position:sticky;bottom:-22px;padding:12px 0 22px;margin-bottom:-22px;margin-top:14px;background:var(--background);border-top:1px solid var(--border)}
.picker-summary{font-size:19px;color:var(--text);margin-bottom:10px}
dialog .picker-footer .primary{min-height:46px;font-size:19px}

/* Wider action, slightly larger price and duration, while keeping the button compact in height. */
#client-dock .booking-action,#booking-draft .booking-popup-action{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:14px;padding-left:16px;padding-right:16px}
#client-dock .booking-action p,#booking-total{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;white-space:normal;line-height:1.25}
#client-dock .summary-separator{display:none}
#total-price,#booking-total strong{font-size:24px;font-weight:700;overflow-wrap:anywhere}
#total-duration,#booking-total span{font-size:18px;white-space:nowrap;color:var(--muted)}
#client-dock .booking-action .primary,#booking-draft .booking-popup-action .primary{width:100%;min-width:0;min-height:48px;padding:10px 12px;font-size:20px;gap:8px}
#booking-draft .booking-popup-action{padding-left:0;padding-right:0}
@media(max-width:350px){.service-card{gap:8px;padding:10px;grid-template-columns:30px minmax(0,1fr) auto}.service-card .service-icon{width:30px;height:34px}.service-card .service-text b{font-size:16px}.service-card .service-price{font-size:16px}#client-dock .booking-action{padding-left:12px;padding-right:12px;gap:10px}#total-price,#booking-total strong{font-size:22px}#client-dock .booking-action .primary,#booking-draft .booking-popup-action .primary{font-size:18px;gap:5px}}
@media(max-width:850px){.studio-app:not(.admin-mode){padding-bottom:calc(166px + var(--safe-bottom))}}
@media(prefers-reduced-motion:reduce){.service-card{transition:none}}

/* Keep the scrolling surface inside the dialog's rounded shell. */
#sheet{overflow:hidden}
.sheet-content{max-height:calc(100dvh - 86px);overflow:auto;overscroll-behavior:contain;padding-right:8px;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#c52664 var(--background)}
.sheet-content::-webkit-scrollbar-track{margin-block:4px}
.sheet-content .sheet-heading{position:sticky;top:0;z-index:2;background:var(--background);padding-bottom:8px}
.sheet-content .picker-footer,.sheet-content .booking-popup-action{bottom:0;margin-bottom:0;padding-bottom:0}
@media(max-height:500px){.sheet-content .sheet-heading,.sheet-content .picker-footer,.sheet-content .booking-popup-action{position:static}}

/* A full second client page, with production-style appointment cards. */
#client-records{padding:4px 20px 24px}#client-records>h1{margin:0 2px 12px;font-size:36px;outline:none}.records-intro{font-size:17px;color:var(--muted);margin:0 2px 24px}
#client-records-list{display:grid;gap:14px}.client-booking-card{padding:18px;border-radius:14px}.client-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.client-card-top>b{font-size:19px;font-weight:600}.record-status{font-size:13px;line-height:1.3;padding:7px 9px;border:1px solid #28604c;border-radius:7px;background:#17382c;color:#9ce3bf}.record-status.muted{border-color:var(--border);background:var(--surface-raised);color:var(--muted)}
.client-card-service{display:flex;align-items:flex-start;gap:12px;margin:22px 0 18px}.client-card-service>.icon{width:26px;height:26px;margin-top:3px}.client-card-service>div{min-width:0}.client-card-service h2{font-size:22px;line-height:1.3;overflow-wrap:anywhere}.client-card-service p{margin-top:6px;font-size:17px;line-height:1.4;color:var(--muted)}.client-card-total{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-top:14px;border-top:1px solid var(--border);font-size:17px}.client-card-total>span{color:var(--muted)}.client-card-total strong{font-size:24px;overflow-wrap:anywhere}
.client-record-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.client-record-actions .primary,.client-record-actions .secondary{min-width:0;min-height:46px;margin:0;font-size:18px;padding:10px 12px}.new-client-record{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;margin-top:20px;font-size:19px}.client-booking-card.cancelled{color:var(--muted)}.record-outcome{font-size:15px;margin-top:14px;line-height:1.4;color:var(--muted)}
#client-records .empty-records{padding:56px 12px;border:1px dashed var(--border);border-radius:14px}#client-records .empty-records>.icon{width:38px;height:38px;margin:0 auto 20px;color:var(--pink-light)}#client-records .empty-records h2{font-size:24px;color:var(--text);margin-bottom:8px}#client-records .empty-records p{font-size:17px;color:var(--muted)}
@media(max-width:850px){.studio-app.client-records-mode{padding-bottom:calc(90px + var(--safe-bottom))}}
@media(max-width:350px){#client-records{padding-left:14px;padding-right:14px}.client-booking-card{padding:14px}.client-card-top{align-items:flex-start;flex-direction:column;gap:8px}.client-card-service h2{font-size:20px}.client-card-service p{font-size:16px}.client-record-actions .primary,.client-record-actions .secondary{font-size:17px}}

/* Keep the preview role switch beside the page content, above the service card. */
.page-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 4px 22px}
.page-heading h1{margin:0;min-width:0;white-space:nowrap}
.preview-role{flex-shrink:0;align-self:center;margin:0}
.preview-role button{padding-inline:10px}
#admin-bookings .page-heading{margin:0 2px 28px}
#admin-bookings .page-heading h1{font-size:48px;letter-spacing:-1px}
#client-records .page-heading{margin:0 2px 12px}
#client-records .page-heading h1{font-size:36px;outline:none}
.tools-preview-controls{display:flex;justify-content:flex-end;padding:0 22px 12px}
@media(max-width:350px){#booking .page-heading h1{font-size:28px}}