/* COET — the lead form with a preferred-call calendar on its right (2026-11-12) */
.lead.lead--sched { width: min(100%, 1120px); grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); grid-template-areas: "main sched" "foot sched"; column-gap: clamp(32px, 5vw, 72px); align-items: start; }
.lead--sched .lead__main { grid-area: main; } .lead--sched .sched { grid-area: sched; } .lead--sched .lead__foot { grid-area: foot; align-self: start; }
.lead__main { display: grid; gap: 28px; min-width: 0; }

.sched { margin: 0; padding: 20px; border: 1px solid rgb(255 255 255 / .1); border-radius: 22px; background: linear-gradient(180deg, #111113, #0b0b0c); display: grid; gap: 16px; min-width: 0; font-family: var(--apple); }
.sched legend { float: left; width: 100%; padding: 0; font: 600 15px/1.3 var(--apple); color: #f5f5f7; }
.sched legend em { display: block; margin-top: 4px; font: 400 13px/1.4 var(--apple); font-style: normal; color: var(--apple-grey); }
.sched__head { display: flex; align-items: center; justify-content: space-between; clear: both; }
.sched__month { font: 600 15px/1 var(--apple); color: #f5f5f7; }
.sched__nav { display: flex; gap: 6px; }
.sched__nav button, .sched__clear { width: 32px; height: 32px; border-radius: 50%; background: rgb(255 255 255 / .07); color: #f5f5f7; display: grid; place-items: center; font: 400 18px/1 var(--apple); transition: background-color var(--fast, .2s) var(--ease), transform var(--fast, .2s) var(--ease); }
.sched__nav button:hover:not(:disabled) { background: rgb(255 255 255 / .14); }
.sched__nav button:active:not(:disabled) { transform: scale(.94); }
.sched__nav button:disabled { opacity: .25; cursor: default; }
.sched__week, .sched__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; }
.sched__week span { font: 500 11px/1 var(--apple); color: var(--apple-grey); padding-bottom: 4px; }
.sched__day { aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font: 500 14px/1 var(--apple); color: #f5f5f7; font-variant-numeric: tabular-nums; position: relative; transition: background-color var(--fast, .2s) var(--ease), color var(--fast, .2s) var(--ease), transform var(--fast, .2s) var(--ease); }
.sched__day:hover:not(:disabled):not([aria-pressed="true"]) { background: rgb(255 255 255 / .09); }
.sched__day:active:not(:disabled) { transform: scale(.92); }
.sched__day.is-weekend:not(:disabled) { color: #a1a1a6; }
.sched__day.is-today::after { content: ""; position: absolute; bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--signal); }
.sched__day[aria-pressed="true"] { background: var(--signal); color: #1a1205; font-weight: 600; }
.sched__day[aria-pressed="true"].is-today::after { background: #1a1205; }
.sched__day:disabled { color: rgb(255 255 255 / .18); cursor: default; }
.sched__day:focus-visible, .sched__slot:focus-visible, .sched__nav button:focus-visible, .sched__clear:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

.sched__times { display: grid; gap: 10px; border-top: 1px solid rgb(255 255 255 / .08); padding-top: 14px; }
.sched__label { display: flex; justify-content: space-between; gap: 12px; font: 500 12px/1.3 var(--apple); color: var(--apple-grey); }
.sched__slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-height: 172px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 2px; }
.sched__hint { grid-column: 1 / -1; font: 400 13px/1.4 var(--apple); color: var(--apple-grey); padding: 10px 0; }
.sched__slot { height: 36px; border-radius: 10px; border: 1px solid rgb(255 255 255 / .1); font: 500 13px/1 var(--apple); color: #f5f5f7; font-variant-numeric: tabular-nums; transition: background-color var(--fast, .2s) var(--ease), border-color var(--fast, .2s) var(--ease), transform var(--fast, .2s) var(--ease); animation: sched-in .3s var(--ease) both; }
.sched__slot:hover:not(:disabled):not([aria-pressed="true"]) { border-color: rgb(255 255 255 / .3); }
.sched__slot:active:not(:disabled) { transform: scale(.96); }
.sched__slot[aria-pressed="true"] { background: #f5f5f7; border-color: #f5f5f7; color: #000; }
.sched__slot:disabled { opacity: .25; cursor: default; }
@keyframes sched-in { from { opacity: 0; transform: translateY(4px); } }

.sched__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid rgb(255 255 255 / .08); padding-top: 14px; }
.sched__out { font: 500 14px/1.3 var(--apple); color: var(--apple-grey); }
.sched.is-set .sched__out { color: #f5f5f7; }
.sched__clear { width: auto; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 13px; }

@media (max-width: 900px) {
  .lead.lead--sched { grid-template-columns: 1fr; grid-template-areas: "main" "sched" "foot"; row-gap: 28px; }
}
@media (prefers-reduced-motion: reduce) { .sched__slot { animation: none; } .sched__day, .sched__slot { transition: none; } }
.lead.lead--sched { grid-template-rows: auto 1fr; }
.sched .sched__day[aria-pressed="true"] { background: var(--signal); color: #1a1205; }
.sched__slot { display: grid; place-items: center; text-align: center; padding: 0; }

/* ── the calendar runs the full width of the form (2026-11-12) ──
   It was a 380px rail beside the fields, which left the month cramped and the times in a scrolling box three
   abreast. Full width gives it a row of its own under the fields and splits it in two: the month on the left
   with room for real day cells, every time slot on the right with no scroller. */
.lead.lead--sched { width: min(100%, 1120px); grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "main" "sched" "foot"; row-gap: clamp(28px, 3vw, 40px); }
.sched { padding: clamp(20px, 2.4vw, 28px); grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); column-gap: clamp(24px, 4vw, 56px); align-items: start; }
.sched legend, .sched__foot { grid-column: 1 / -1; }
.sched__cal { display: grid; gap: 16px; min-width: 0; }
/* the times are the right-hand column now, so the rule that separated them from the month above is wrong */
.sched__times { border-top: 0; padding-top: 0; }
.sched__slots { grid-template-columns: repeat(4, minmax(0, 1fr)); max-height: none; overflow: visible; padding-right: 0; }
/* a day cell is a circle, and a circle that fills a seventh of 1120px is a target, not a date */
.sched__day { width: 100%; max-width: 52px; margin-inline: auto; }
.sched__week span { padding-bottom: 6px; }

@media (max-width: 900px) {
  .sched { grid-template-columns: minmax(0, 1fr); }
  .sched__times { border-top: 1px solid rgb(255 255 255 / .08); padding-top: 14px; }
  .sched__slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}