.call [hidden] { display: none !important; }
/* The calendar: a month of days with open times, and the chosen day's times beside it (below, on a
   phone), as on coaching's booking card, in the home page's colors. */
.booker { margin-top: 1.5em; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(18px, 4vw, 32px); }
.picker { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; }
.month-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.month-head h2, .times h2 { margin: 0; font-size: 1.3rem; }
.round { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-size: 1.3rem; cursor: pointer; }
.round:disabled { opacity: .4; cursor: default; }
.grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; text-align: center; }
.grid .dow { font-size: .75rem; font-weight: 700; letter-spacing: .08em; color: var(--muted); padding: .3rem 0; }
.day { aspect-ratio: 1; width: 100%; max-width: 3.1rem; justify-self: center; border-radius: 50%; border: 1px solid transparent; background: none; font: 600 1rem var(--sans); color: var(--muted); opacity: .45; padding: 0; }
.day.open { opacity: 1; color: var(--ink); background: var(--bg); border-color: var(--line); cursor: pointer; }
.day.open:hover { border-color: var(--brand); }
.day[aria-pressed="true"] { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.day:focus-visible, .slot:focus-visible, .round:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.day-loading { aspect-ratio: 1; width: 100%; max-width: 3.1rem; justify-self: center; border-radius: 50%; background: color-mix(in srgb, var(--line) 45%, transparent); }
.tz { font-size: .9em; color: var(--muted); margin: .2em 0 0; }
.tz select { font: inherit; font-weight: 600; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: .3rem .5rem; max-width: 100%; }
.slot-list { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .5rem; }
.slot { width: 100%; min-height: 3rem; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: 600 1.05rem var(--sans); cursor: pointer; }
.slot:hover { border-color: var(--brand); }
.slot[aria-pressed="true"] { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.slot-empty { color: var(--muted); font-style: italic; min-height: 3rem; }
.chosen { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.chosen p { margin: 0; font-weight: 600; }
.chosen .button:disabled { opacity: .5; cursor: default; }
@media (max-width: 720px) { .picker { grid-template-columns: 1fr; gap: 1.4rem; } .chosen .button { width: 100%; } }
.call-chosen { font-weight: 700; color: var(--brand); margin: 0; }
.call-error { color: var(--accent); margin: 0; min-height: 1em; }
.call .text-link { background: none; border: 0; color: var(--brand); font: 600 1rem var(--sans); cursor: pointer; text-decoration: underline; padding: .4em; }
.call-done { margin-top: 1.5em; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 4vw, 32px); }
.call-add { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.2em 0; }
.call-add .button { white-space: normal; text-align: center; flex: 1 1 14em; }
.button.ghost { background: transparent; color: var(--brand); border-color: var(--brand); }
.button.ghost:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); }
.call-note { background: var(--surface); border-left: 4px solid var(--brand); padding: .8em 1em; border-radius: 8px; }
.call-cancel button { background: none; border: 0; color: var(--accent); font: 600 1rem var(--sans); text-decoration: underline; cursor: pointer; padding: 0; }