/* Item #54: the booking flow's courtesy step, the "From the call" summary, the appointment step,
   the diary pop-up that IS the main diary, and the team label on tiles, cards and the board.
   Built on the design-system tokens from the start (docs/design-system.md rule 6); listed in
   tests/design-system.test.js BUILT_ON_TOKENS, so a raw colour here is red. */

/* The courtesy step: one question, then dates and the free cars only after Yes. */
.gb-courtesy-choice{grid-template-columns:repeat(2,minmax(0,1fr))}
.gb-courtesy-choice button{display:flex;flex-direction:column;align-items:flex-start;gap:var(--ds-space-1);min-height:var(--ds-touch);text-align:left}
.gb-courtesy-choice button small{color:var(--ds-text-muted);font-size:var(--ds-text-sm)}
.gb-courtesy-from-call{margin:var(--ds-space-3) 0 0;padding:var(--ds-space-2) var(--ds-space-3);border-left:3px solid var(--ds-primary);background:var(--ds-primary-soft);color:var(--ds-ink);border-radius:var(--ds-radius-sm)}
.gb-courtesy-follow-up{margin-top:var(--ds-space-4);padding-top:var(--ds-space-4);border-top:1px solid var(--ds-line)}
.gb-courtesy-quick{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-2);margin:var(--ds-space-3) 0}
.gb-courtesy-quick span{color:var(--ds-text-muted);font-size:var(--ds-text-sm)}
.gb-courtesy-quick button{min-height:var(--ds-touch);padding:0 var(--ds-space-3);border:1px solid var(--ds-line);border-radius:var(--ds-radius-pill);background:var(--ds-white);color:var(--ds-ink)}
.gb-courtesy-cars-title{margin:var(--ds-space-3) 0 var(--ds-space-2);font-size:var(--ds-text-md)}
.gb-courtesy-cars{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--ds-space-2)}
.gb-courtesy-cars button{display:flex;flex-direction:column;align-items:flex-start;gap:var(--ds-space-1);min-height:var(--ds-touch);padding:var(--ds-space-3);border:1px solid var(--ds-line);border-radius:var(--ds-radius);background:var(--ds-white);color:var(--ds-ink);text-align:left}
.gb-courtesy-cars button b{font-family:var(--ds-font-heading);letter-spacing:.04em}
.gb-courtesy-cars button small{color:var(--ds-text-muted)}
.gb-courtesy-cars button.selected{border-color:var(--ds-primary);box-shadow:inset 0 0 0 2px var(--ds-primary);background:var(--ds-primary-soft)}

/* "From the call": read-only, each section with a small Edit link. */
.gb-call-summary{margin:0 0 var(--ds-space-4);padding:var(--ds-space-3);border:1px solid var(--ds-line);border-radius:var(--ds-radius);background:var(--ds-surface)}
.gb-call-summary>header{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--ds-space-2);margin-bottom:var(--ds-space-2)}
.gb-call-summary>header strong{font-family:var(--ds-font-heading);font-size:var(--ds-text-md)}
.gb-call-summary>header small{color:var(--ds-text-muted);font-size:var(--ds-text-sm)}
.gb-call-sections{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--ds-space-2)}
.gb-call-section{padding:var(--ds-space-2) var(--ds-space-3);border-radius:var(--ds-radius-sm);background:var(--ds-white)}
.gb-call-section header{display:flex;justify-content:space-between;align-items:center;gap:var(--ds-space-2)}
.gb-call-section header strong{font-size:var(--ds-text-sm)}
.gb-call-section dl{margin:var(--ds-space-1) 0 0}
.gb-call-section dl div{display:flex;gap:var(--ds-space-2);font-size:var(--ds-text-sm)}
.gb-call-section dt{color:var(--ds-text-muted)}
.gb-call-section dd{margin:0;color:var(--ds-ink)}
.gb-call-edit{border:0;background:none;padding:var(--ds-space-1);color:var(--ds-link);font-size:var(--ds-text-xs);text-decoration:underline;cursor:pointer}

/* The appointment step: the chosen time and the button that opens the diary pop-up. */
.gb-appointment-choice{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--ds-space-3);padding:var(--ds-space-4);border:1px solid var(--ds-line);border-radius:var(--ds-radius);background:var(--ds-white)}
.gb-appointment-choice small{display:block;color:var(--ds-text-muted);font-size:var(--ds-text-xs);letter-spacing:.06em}
.gb-appointment-choice strong{font-size:var(--ds-text-lg);color:var(--ds-ink)}
.gb-appointment-choice button{min-height:var(--ds-touch)}

/* The diary pop-up is the main diary; only its toolbar and the slot choice are its own. */
.diary-picker-modal{width:min(1100px,calc(100% - 24px))}
.diary-picker-toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--ds-space-3);margin:var(--ds-space-3) 0}
.diary-picker-toolbar button{min-height:var(--ds-touch);min-width:var(--ds-touch)}
.diary-picker-grid{overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:var(--ds-text-md)}
.diary-picker-grid .calendar-job{font-size:var(--ds-text-sm);cursor:default}
.diary-picker-grid .day-slot.is-pickable{cursor:pointer;outline:1px dashed var(--ds-primary);outline-offset:-3px}
.diary-picker-grid .day-slot.is-pickable:hover,.diary-picker-grid .day-slot.is-pickable:focus-visible{background:var(--ds-primary-soft)}

/* The team label: the lead technician plus a count of the others, e.g. "Dave +2". */
.calendar-job .diary-tile-team{display:block;color:var(--ds-ink-soft);font-size:var(--ds-text-xs);font-weight:600}
.technician-team-line{display:flex;gap:var(--ds-space-2);margin:var(--ds-space-1) 0;font-size:var(--ds-text-sm)}
.technician-team-line span{color:var(--ds-text-muted)}
.technician-team-line strong{color:var(--ds-ink)}
.board-team-chip{font-weight:600}