/* ==========================================================================
   Booking demo

   One page, so it lives in a page stylesheet. Nothing in here is used
   anywhere else - the moment any of it is, it moves to components.css,
   because a second page loading this file by name breaks silently the day
   this page is renamed.
   ========================================================================== */

.d-demo {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--s-6);
  align-items: start;
}

@media (max-width: 900px) {
  .d-demo { grid-template-columns: 1fr; }
}

.d-demo__panel,
.d-demo__side {
  padding: var(--s-6);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}

.d-demo__side { background: var(--c-surface-2); }

/* --------------------------------------------------------------------------
   Controls
   -------------------------------------------------------------------------- */

.d-demo__controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}

@media (max-width: 560px) {
  .d-demo__controls { grid-template-columns: 1fr; }
}

.d-demo__field { display: grid; gap: var(--s-1); }

.d-demo__field label {
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  color: var(--c-ink-2);
}

.d-demo__field select {
  width: 100%;
  min-height: var(--control-h-sm);
  padding: 0 var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-ink);
  font: inherit;
  font-size: var(--t-sm);
}

.d-demo__field select:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 1px;
}

.d-demo__note {
  margin: 0;
  font-size: var(--t-xs);
  line-height: var(--lh-body);
  color: var(--c-ink-3);
}

/* --------------------------------------------------------------------------
   Slots
   -------------------------------------------------------------------------- */

.d-demo__slots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-3) 0 var(--s-4);
}

.d-demo__slot {
  min-height: var(--target-touch);
  min-width: 5.5rem;
  padding: 0 var(--s-3);
  border: 1px solid var(--c-accent-ring);
  border-radius: var(--r-sm);
  background: var(--c-accent-wash);
  color: var(--c-accent-text);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}

.d-demo__slot:hover { background: var(--c-accent-ring); }

/* Unavailable, and still focusable: the reason is the point of the page, so
   a keyboard user has to be able to reach it. Marked with aria-disabled
   rather than disabled, and it is not colour alone - the strike-through
   carries the same information. */
.d-demo__slot.is-taken {
  border-color: var(--c-line);
  background: var(--c-surface-2);
  color: var(--c-ink-3);
  text-decoration: line-through;
  cursor: help;
}

.d-demo__slot.is-taken:hover { background: var(--c-surface-3); }

/* --------------------------------------------------------------------------
   Result line
   -------------------------------------------------------------------------- */

.d-demo__result {
  margin: 0;
  min-height: 1.5em;
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  color: var(--c-ink-2);
}

.d-demo__result.is-good { color: var(--c-good); font-weight: var(--w-medium); }
.d-demo__result.is-bad  { color: var(--c-bad);  font-weight: var(--w-medium); }

/* --------------------------------------------------------------------------
   Diary
   -------------------------------------------------------------------------- */

.d-demo__diary {
  list-style: none;
  margin: var(--s-4) 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
}

.d-demo__entry {
  display: grid;
  gap: 2px;
  padding: var(--s-3);
  border-left: 3px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  font-size: var(--t-sm);
}

.d-demo__entry.is-mine { border-left-color: var(--c-accent); }

.d-demo__entry b    { color: var(--c-ink); }
.d-demo__entry span { color: var(--c-ink-3); font-size: var(--t-xs); }

.d-demo__actions { display: flex; gap: var(--s-2); }

/* --------------------------------------------------------------------------
   The race
   -------------------------------------------------------------------------- */

.d-demo__race { display: grid; gap: var(--s-4); justify-items: start; }

.d-demo__raceOut {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
  font-size: var(--t-sm);
}

.d-demo__raceOut li {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
}

.d-demo__raceOut .is-good { border-color: var(--c-good); }
.d-demo__raceOut .is-bad  { border-color: var(--c-bad); }

@media (prefers-reduced-motion: reduce) {
  .d-demo__slot { transition: none; }
}

/* ==========================================================================
   The infographic

   Added 2026-08-12 when the decision was made that the marketing site shows
   the problem and the subdomain runs the product. Every colour is a token, so
   there is one diagram rather than a light one and a dark one.
   ========================================================================== */

.d-info {
  margin: 0;
  padding: var(--s-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}

/* The diagram has a minimum readable width. Below it the figure scrolls
   rather than the page: a timeline squeezed to 320px is not a diagram. */
.d-info__svg {
  display: block;
  width: 100%;
  min-width: 560px;
  height: auto;
}

@media (max-width: 620px) {
  .d-info { overflow-x: auto; overscroll-behavior-x: contain; }
}

.d-info__grid { stroke: var(--c-line-soft); stroke-width: 1; }
.d-info__hour { fill: var(--c-ink-3); font-size: 12px; font-family: inherit; }
.d-info__name { fill: var(--c-ink); font-size: 14px; font-weight: 600; font-family: inherit; }

.d-info__shift { fill: var(--c-surface-2); }

.d-info__block { stroke: var(--c-surface); stroke-width: 1.5; }

/* Each resource gets its own tint from the category palette the cards use,
   so the diagram belongs to the site rather than introducing a new set of
   colours nobody else uses. */
.d-info__block--chair,
.d-info__block--room      { fill: var(--c-cat-1); }
.d-info__block--basin     { fill: var(--c-cat-3); }
.d-info__block--colourbar,
.d-info__block--procedure { fill: var(--c-cat-5); }

/* Hollow: the room is held and the person is free. The pattern of a filled
   bar with a hollow gap in the middle is the single most useful thing in the
   picture, so it is drawn as an absence rather than as another colour. */
.d-info__block--free {
  fill: var(--c-surface);
  stroke: var(--c-ink-3);
  stroke-dasharray: 3 3;
}

.d-info__block--buffer { fill: var(--c-line); }

.d-info__key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-4);
  font-size: var(--t-xs);
  color: var(--c-ink-2);
}

.d-info__keyItem { display: inline-flex; align-items: center; gap: var(--s-2); }

.d-info__swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex: none;
}

/* The swatches reuse the block classes, which are SVG fills. As HTML elements
   they need the same colours as backgrounds. */
.d-info__swatch.d-info__block--chair,
.d-info__swatch.d-info__block--room      { background: var(--c-cat-1); }
.d-info__swatch.d-info__block--basin     { background: var(--c-cat-3); }
.d-info__swatch.d-info__block--colourbar,
.d-info__swatch.d-info__block--procedure { background: var(--c-cat-5); }
.d-info__swatch.d-info__block--buffer    { background: var(--c-line); }
.d-info__swatch.d-info__block--free      { background: var(--c-surface); border: 1px dashed var(--c-ink-3); }

/* ==========================================================================
   Walkthrough request
   ========================================================================== */

.d-book { max-width: 44rem; }

/* `.d-book__grid` used to be here. The template was rewritten to use the
   site's shared `.e-row` so it would inherit the same live validation as every
   other form, and this rule was left behind matching nothing. */

.d-book__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  margin-top: var(--s-4);
}

/* Native date inputs inherit almost nothing, so they need the same treatment
   as every other control here or the row reads as two fields and a browser
   default. */
.d-book input[type="date"] { min-height: var(--control-h-sm); }