/* The booking page (/b/<token>), on top of sign.css: the same header, colours
   and cards, plus the week of sessions. */

main > .card + .card, main > .card + .toast { margin-top: 1rem; }
.hand { font: 400 1.7rem/1.15 "Gveret Levin", "Rubik", sans-serif; color: var(--teal-deep); }

.notice { background: #fbf4e2; border: 1px solid var(--gold-soft); }
.notice p { margin: .3rem 0; }

.day { margin-top: 1.1rem; }
.day h3 { margin: 0 0 .4rem; font-size: 1rem; color: var(--gold); }

/* Three columns that never push each other out: the hour, what it is, and
   the action or the reason, which wraps inside its own column. */
.slot { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) minmax(0, 7.5rem);
        align-items: center; column-gap: .9rem; padding: .85rem 1.1rem; margin: .55rem 0;
        background: var(--teal-soft); border: 1px solid #c9e9ec; border-radius: 1rem; }
.slot .when { font-weight: 700; color: var(--teal-deep); font-size: 1.05rem; }
.slot .what { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.slot .free { font-size: .8rem; color: var(--dim); }
.slot .free.few { color: var(--gold); font-weight: 600; }
.slot .why { font-size: .8rem; line-height: 1.35; color: var(--dim); text-align: center; }
.slot .btn { justify-self: stretch; }
.slot.is-mine { background: #e3f6e9; border-color: #b9e3c6; }
.slot .btn { padding: .5rem 1rem; min-height: 2.75rem; font-size: .95rem; }

.mine { list-style: none; margin: 0; padding: 0; }
.mine li { display: flex; align-items: center; gap: .9rem; padding: .7rem .2rem;
           border-bottom: 1px solid var(--line); }
.mine li:last-child { border-bottom: none; }
.mine .what { flex: 1; }
.mine .late { font-size: .8rem; color: var(--dim); }

.toast { position: sticky; bottom: 1rem; background: #fff; border-radius: .9rem; padding: .7rem 1rem;
         box-shadow: 0 6px 24px rgb(11 61 64 / .15); text-align: center; }
.toast.ok { color: var(--teal-deep); }