/* The student booking his sessions (book.html). Page frame, cards, notes, buttons and the trial panel come from apply.css. */
.top .word { font-size: 17px; font-weight: 800; line-height: 1; color: var(--ink); }
.card-title { margin: 0; font-size: var(--text-input); font-weight: 600; }
.muted-line { margin: 0; font-size: var(--text-md); color: var(--ink-2); }

/* progress: the two steps, then every session's slot */
.bk-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bk-steps li { display: flex; align-items: flex-start; gap: 8px; padding-top: 10px; border-top: 4px solid var(--line); font-size: var(--text-md); line-height: 1.5; color: var(--ink-2); }
.bk-steps li.now { border-top-color: var(--brand); color: var(--ink); font-weight: 600; }
.bk-steps li.done { border-top-color: var(--brand); color: var(--brand); }
.bk-step-n { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--neutral-bg); color: var(--neutral); font-size: var(--text-sm); font-weight: 500; }
.bk-steps li.now .bk-step-n, .bk-steps li.done .bk-step-n { background: var(--brand); color: var(--on-accent); }
.bk-slots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bk-slot { display: flex; align-items: center; gap: 10px; min-height: 48px; padding-inline: 10px 2px; border: 1px dashed var(--line); border-radius: var(--radius-md); color: var(--ink-2); font-size: var(--text-base); }
.bk-slot > span:nth-child(2) { flex: 1; min-width: 0; }
.bk-slot:not(:has(button)) { padding-inline-end: 10px; }
.bk-slot.wait { border: 1px solid transparent; background: var(--amber-bg); color: var(--amber); font-weight: 500; }
.bk-slot.ok { border: 1px solid var(--brand); background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.bk-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid currentColor; background: var(--surface); font-size: var(--text-sm); font-weight: 500; }
.bk-x { flex: none; width: 44px; height: 44px; border: 0; border-radius: var(--radius-md); background: none; color: inherit; display: grid; place-items: center; }

/* the step headings below */
.bk-step-h { margin: 10px 0 0; display: flex; flex-direction: column; font-size: var(--text-lg); font-weight: 600; line-height: 1.4; }
.bk-step-h small { font-size: var(--text-sm); color: var(--brand); }
.bk-step-h:focus:not(:focus-visible), .bk-time:focus:not(:focus-visible) { outline: none; }

/* step 1: the week as large day cards; chosen days filled green with their number */
.bk-days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bk-day { position: relative; min-height: 88px; padding: 24px 6px 12px; border: 1.5px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; transition: background-color .15s, border-color .15s, opacity .15s; }
.bk-day b { font-size: var(--text-input); font-weight: 600; }
.bk-day small { font-size: var(--text-sm); line-height: 1.4; font-weight: 500; color: var(--brand); }
.bk-day[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-accent); box-shadow: 0 4px 12px rgba(0, 0, 0, .12); }
.bk-day[aria-pressed="true"] small { color: #DDEBE5; }
.bk-badge { position: absolute; top: 6px; inset-inline-start: 6px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--brand); font-size: var(--text-sm); font-weight: 700; }
.bk-tick { position: absolute; top: 8px; inset-inline-end: 8px; display: grid; }
.bk-day:disabled { background: var(--ground); border-style: dashed; color: var(--ink-2); opacity: .7; cursor: default; }
.bk-day:disabled small { color: var(--ink-2); font-weight: 400; }
.bk-day.dim { opacity: .4; }

/* step 2: a card per chosen day, with its free start times */
.bk-time.ok { border-color: var(--brand); }
.bk-time-head { display: flex; align-items: center; gap: 10px; color: var(--brand); }
.bk-time-head h3 { flex: 1; min-width: 0; margin: 0; font-size: var(--text-input); font-weight: 600; color: var(--ink); }
.bk-done { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--brand-soft); color: var(--brand); font-size: var(--text-md); font-weight: 500; white-space: nowrap; }
.when-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.when { position: relative; min-height: 52px; padding: 6px 8px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-variant-numeric: tabular-nums; }
.when b { font-size: var(--text-input); font-weight: 600; }
.when small { font-size: var(--text-md); color: var(--ink-2); }
.when svg { position: absolute; top: 5px; inset-inline-start: 5px; }
.when[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-accent); }
.when[aria-pressed="true"] small { color: #DDEBE5; }

/* the foot: what is still missing, or what will be fixed */
.bk-left { margin: 0; padding: 10px 12px; border-radius: var(--radius-md); background: var(--amber-bg); color: var(--amber); font-size: var(--text-md); font-weight: 500; line-height: 1.5; }
.bk-left.ok { background: var(--brand-soft); color: var(--brand); }

/* the weekly times on the done screen */
.picked { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.picked li { display: flex; align-items: center; gap: 10px; min-height: 48px; border-bottom: 1px solid var(--divider); color: var(--brand); }
.picked li:last-child { border-bottom: 0; }
.picked span { flex: 1; color: var(--ink); font-size: var(--text-base); font-weight: 500; }
.picked small { color: var(--ink-2); font-size: var(--text-sm); }

.foot .btn + .btn { margin-top: 8px; }
.trial-pop select { height: 40px; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0 10px; background: var(--surface); }