/* Calendar grid: one visual language for desktop, phone and team view. */
.team-page .team{padding-top:22px;max-width:1600px;width:calc(100% - 40px)}
.team-page #calendar-title{font-family:system-ui,sans-serif;font-size:1.8rem;letter-spacing:-.04em;margin:0}
.team-page #calendar .cal-head .eyebrow{font-size:.66rem;margin-bottom:3px}
#calendar-grid>.toolbar{margin:12px 0;display:flex;align-items:center;gap:12px}
#calendar-grid>.toolbar h3{font-family:inherit;font-size:1.15rem;font-weight:700;margin:0;flex:1;text-align:center}
#calendar-grid .pill{border-radius:8px;padding:7px 12px;min-height:38px;font-size:.82rem}
#calendar-grid .calendar-picker{font-size:.82rem;display:flex;align-items:center;gap:10px;margin:12px 0}
#calendar-grid .calendar-picker select{margin:0;max-width:340px;font-size:.9rem;padding:8px}
#calendar-grid .calendar-options{align-items:center;margin-bottom:8px}
#calendar-summary{margin:4px 0 8px;font-size:.75rem}
.calendar-surface{width:100%;min-width:0;overflow:auto;border:1px solid var(--line);border-radius:12px;background:var(--paper);isolation:isolate;overscroll-behavior:contain;scrollbar-gutter:stable}
.calendar-surface-time{max-height:70vh;min-height:360px;scroll-padding-top:64px}
.calendar-surface #days{border:0;border-radius:0;overflow:visible}
.calendar-surface .days-week,.calendar-surface .days-day{display:block;min-width:0}
.time-grid{display:grid;grid-template-columns:64px repeat(var(--calendar-columns),minmax(0,1fr));grid-template-rows:60px var(--day-height,1536px);min-width:var(--calendar-min-width);position:relative;background:var(--paper);font-family:system-ui,sans-serif}
.time-heading,.time-corner{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:60px;padding:6px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);background:var(--paper);font-size:.78rem;font-weight:650}
.time-heading .pick-day{border-radius:50%;width:34px;height:34px;min-height:34px;min-width:34px;font-size:1.1rem}
.time-heading.is-today{color:var(--wine);background:#fcf1f4}
.time-heading .pick-day[aria-current=date]{background:var(--wine);color:white}
.time-corner{left:0;z-index:8;font-size:.64rem;color:var(--muted)}
.time-axis{position:sticky;left:0;z-index:4;height:var(--day-height,1536px);background:var(--paper);border-right:1px solid var(--line)}
.time-axis span{position:absolute;right:8px;transform:translateY(-50%);font-size:.65rem;font-variant-numeric:tabular-nums;line-height:1;background:var(--paper);padding:2px}
.time-axis span:first-child{transform:none;top:4px!important}
.time-axis span:last-child{transform:translateY(-100%)}
.time-column{position:relative;height:var(--day-height,1536px);min-width:0;border-right:1px solid var(--line);background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--half-hour-height,32px) - 1px),#eee6e1 calc(var(--half-hour-height,32px) - 1px),#eee6e1 var(--half-hour-height,32px),transparent var(--half-hour-height,32px),transparent calc(var(--hour-height,64px) - 1px),var(--line) calc(var(--hour-height,64px) - 1px),var(--line) var(--hour-height,64px))}
.time-column:last-child{border-right:0}
.time-slot{position:absolute;left:0;width:100%;height:var(--half-hour-height,32px);min-height:0;border:0;border-radius:0;padding:0;background:transparent;cursor:crosshair;z-index:0}
.time-slot:hover,.time-slot:focus-visible{background:#f2d9df85;outline:2px solid var(--wine);outline-offset:-2px;z-index:1}
.team-page .team .time-event{position:absolute;z-index:2;min-height:0;margin:0;padding:3px 5px;display:flex;flex-direction:column;gap:1px;border:1px solid var(--service-border,#c997a3);border-left:3px solid var(--service-ink,#835164);border-radius:5px;text-align:left;overflow:hidden;overflow-wrap:anywhere;box-sizing:border-box;line-height:1.2;color:var(--service-ink,var(--ink));box-shadow:0 1px 2px #38251f0a}
.team-page .time-event:hover{filter:brightness(.97);z-index:3;box-shadow:0 2px 7px #38251f20}
.team-page .time-event span{font-size:.63rem;line-height:1.2}
.team-page .time-event strong{font-size:.73rem;font-weight:750;line-height:1.25;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.team-page .time-event>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.team-page .time-event>span:last-child{overflow:hidden;font-size:.6rem}
.team-page .time-event-compact{flex-direction:row;align-items:flex-start;gap:5px}
.team-page .time-event-compact>span:last-child{display:none}
.team-page .time-event-compact strong{font-size:.7rem;-webkit-line-clamp:1}
.team-page .time-event-compact>span:first-child{font-size:.6rem;flex-shrink:0}
.calendar-now{position:absolute;left:0;right:0;height:2px;background:#bd385e;z-index:3;pointer-events:none}
.calendar-now::before{content:'';position:absolute;left:-4px;top:-3px;border-radius:50%;width:8px;height:8px;background:#bd385e}
.team-page .calendar-surface .days-month{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));min-width:770px;gap:0;background:var(--paper)}
.team-page .calendar-surface .days-month .weekday{position:sticky;top:0;z-index:2;background:var(--paper);border-bottom:1px solid var(--line);font-size:.73rem;padding:9px}
.team-page .calendar-surface .days-month .day{position:relative;min-height:134px;padding:5px 5px 24px;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}
.team-page .calendar-surface .days-month .day.current{background:#fff3f6}
.team-page .calendar-surface .days-month .outside-month{background:#f8f4f1;color:var(--muted)}
.team-page .calendar-surface .days-month .day h3{display:flex;flex-direction:row;justify-content:center;margin:0 0 4px}
.team-page .calendar-surface .days-month .pick-day{width:28px;height:28px;min-height:28px;min-width:28px;border-radius:50%;font-size:.75rem;padding:2px}
.team-page .calendar-surface .days-month .pick-day[aria-current=date]{background:var(--wine);color:white}
.team-page .calendar-surface .days-month .event{display:block;min-height:0;padding:3px 5px;margin:3px 0;border-radius:4px;border-left:3px solid var(--service-ink,#835164);overflow:hidden}
.team-page .calendar-surface .days-month .event strong{font-size:.66rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.team-page .calendar-surface .days-month .event span{font-size:.6rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.team-page .calendar-surface .days-month .event span:last-child{display:none}
.calendar-more,.month-add{background:transparent;color:var(--wine);border:0;font:inherit;cursor:pointer;border-radius:5px;min-height:24px;font-weight:700}
.calendar-more{font-size:.65rem;padding:2px 4px;width:100%;text-align:left}
.month-add{position:absolute;bottom:1px;right:5px;font-size:1.2rem;min-width:28px}
.calendar-more:hover,.month-add:hover{background:var(--rose)}
.calendar-help{font-size:.73rem;color:var(--muted);margin:8px 0}
.calendar-legend{display:flex;gap:10px 15px;flex-wrap:wrap;font-size:.7rem;margin:10px 0}
.calendar-legend span::before{content:'';display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;background:var(--legend-color)}
.calendar-legend [data-category=manicure]{--legend-color:#cd9daf}.calendar-legend [data-category=gel]{--legend-color:#bfa7d0}.calendar-legend [data-category=pedicure]{--legend-color:#9ebba6}.calendar-legend [data-category=brows]{--legend-color:#c9a981}.calendar-legend [data-category=break]{--legend-color:#aab397}
.team-page .calendar-surface .days-agenda{display:block}
.team-page .calendar-surface .days-agenda .day{min-height:0;border:0;border-bottom:1px solid var(--line);padding:12px}
.team-page .calendar-surface .days-agenda .event{margin:5px 0}
.team-page #workday-nav{margin:12px 0;gap:6px;display:flex;overflow-x:auto;flex-wrap:nowrap;padding-bottom:3px}
.team-page #workday-nav .pill{font-size:.8rem;padding:7px 12px;white-space:nowrap;flex-shrink:0;min-height:38px}
@media(max-width:700px){
 .team-page .team{width:calc(100% - 20px);padding-top:12px}
 .team-page #calendar-title{font-size:1.5rem}
 #calendar-grid>.toolbar{display:grid;grid-template-columns:1fr auto;gap:8px}
 #calendar-grid>.toolbar h3{grid-column:1/-1;grid-row:1;text-align:left;font-size:1rem}
 #calendar-grid>.toolbar .controls{grid-row:2}
 #calendar-grid>.toolbar #add{grid-row:2;font-size:.76rem;padding-inline:9px}
 #calendar-grid .calendar-picker{display:grid;gap:4px}
 #calendar-grid .calendar-picker select{width:100%;max-width:none;min-height:44px}
 #calendar-grid .calendar-options{display:grid}
 #calendar-grid .calendar-options>.controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
 #calendar-grid .calendar-options .pill{padding-inline:4px;min-height:42px}
 .calendar-surface-time{max-height:65dvh;min-height:340px}
 .time-grid{grid-template-columns:48px repeat(var(--calendar-columns),minmax(0,1fr))}
 .time-heading{font-size:.68rem;padding-inline:2px}
 .time-axis span{right:3px;font-size:.58rem}
 .calendar-legend{font-size:.65rem;gap:6px 10px}
 .team-page .calendar-surface .days-month .day{min-height:116px}
 .team-page .calendar-surface .days-month .event{min-height:32px}
 .calendar-help{font-size:.68rem}
}
.team-page>.top{min-height:76px}
.team-page .booking-inbox{padding:8px 14px;margin-bottom:12px}
.team-page .booking-inbox h2{font-size:1rem;margin:0}
.team-page .booking-inbox .pill{min-height:34px;padding:5px 12px;font-size:.76rem}
.team-page .days-week .time-event strong{font-size:.68rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.team-page .days-week .time-event>span:last-child{white-space:nowrap;text-overflow:ellipsis}

.calendar-zoom{display:flex;align-items:center;gap:4px;margin:8px 0;font-size:.75rem;color:var(--muted)}
.calendar-zoom>span{margin-right:6px}
.calendar-zoom button{min-width:36px;min-height:36px;padding:4px 9px;border:1px solid var(--line);border-radius:7px;background:var(--paper);color:var(--ink);font-weight:700}
.calendar-zoom #calendar-zoom-reset{min-width:65px;font-size:.75rem;font-variant-numeric:tabular-nums}
.calendar-zoom button:hover:not(:disabled){background:var(--rose)}
.calendar-zoom button:disabled{opacity:.35;cursor:default}
.team-page .calendar-surface .days-month{min-width:calc(770px * var(--calendar-zoom,1))}
.team-page .calendar-surface .days-month .day{min-height:calc(134px * var(--calendar-zoom,1))}
.team-page .calendar-surface .days-month .event strong{font-size:clamp(.6rem,calc(.66rem * var(--calendar-zoom,1)),1rem)}
@media(max-width:700px){.calendar-zoom button{min-height:44px;min-width:44px}.calendar-zoom{margin:4px 0}.team-page .calendar-surface .days-month .day{min-height:calc(116px * var(--calendar-zoom,1))}}