/* Layout and screen-level patterns.

   Everything about type, colour, controls and targets now lives in
   tokens.css and foundation.css. What is left here is arrangement: how a
   page is boxed, how a list of meetings is laid out, how a table survives a
   narrow screen. Where this file used to hard-code #172033 and 44px and
   .82rem it now asks for a token, so one change reaches every screen.

   Nothing here may declare a font-size below var(--t-meta) (15px). If a
   thing does not fit, the layout changes — not the type. */

/* ---- Page frame --------------------------------------------------------- */
main {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--space-4);
  min-height: 50vh;
}
footer {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--space-4);
  font-size: var(--t-meta);
  color: var(--c-ink-muted);
}

.skip-link {
  position: absolute; left: -9999px; top: var(--space-2); z-index: 30;
  background: var(--c-surface); color: var(--c-ink);
  padding: var(--space-3); border-radius: var(--radius-sm);
  font-size: var(--t-body); font-weight: 700;
}
.skip-link:focus { left: var(--space-2); }

.eyebrow { color: var(--c-ink-muted); font-size: var(--t-meta); font-weight: 700; }
/* "Back" is often the only way out of a page, so it is a target in its own
   right — including when the markup wraps it in a paragraph, which used to
   leave the paragraph 48px tall and the link inside it 26px. */
.back-link, .back-link a {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--tap); margin-bottom: var(--space-3);
  font-size: var(--t-body); font-weight: 700;
}
.back-link a { margin-bottom: 0; }
.result-count { color: var(--c-ink-muted); font-size: var(--t-meta); }

/* ---- Operations frame --------------------------------------------------
   The planning screens earn the whole width of a monitor; the reading
   screens do not. */
.operations-body { background: var(--c-canvas); }
.operations-main { max-width: var(--wide-max); padding: var(--space-4); }
.operations-title {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4);
}
.operations-title h1, .operations-title p { margin: 0; }

/* ---- Errors ------------------------------------------------------------- */
.operation-errors {
  border: 2px solid var(--c-danger); background: var(--c-danger-soft);
  border-radius: var(--radius); padding: var(--space-4); margin: var(--space-4) 0;
}
.operation-errors h2 { margin-top: 0; }
.errorlist { color: var(--c-danger); font-weight: 700; }
.invalid input, .invalid select { border-color: var(--c-danger); }

/* ---- Forms -------------------------------------------------------------- */
.operations-filters, .operation-form {
  display: grid; gap: var(--space-4); min-width: 0;
  background: var(--c-surface); border-radius: var(--radius);
  padding: var(--space-4); margin: var(--space-4) 0;
  max-width: var(--page-max);
}
.operations-filters label, .operation-form label {
  display: block; font-weight: 700; font-size: var(--t-body);
  margin-bottom: var(--space-1);
}
.operations-filters > *, .operation-form > * { min-width: 0; }
.form-grid-two { display: grid; gap: var(--space-4); min-width: 0; }
.form-grid-two > * { min-width: 0; }
@media (min-width: 34rem) { .form-grid-two { grid-template-columns: 1fr 1fr; } }
@media (min-width: 60rem) {
  .operations-filters { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; max-width: none; }
}

/* ---- Meetings list ------------------------------------------------------ */
.schedule-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--row-gap, var(--space-2)); }
.schedule-card a, .schedule-card > .availability-card-body {
  display: grid; gap: var(--space-1) var(--space-4); align-items: center;
  min-height: var(--tap-lg);
  background: var(--c-surface); border-left: 5px solid var(--c-booked);
  border-radius: var(--radius); padding: var(--space-4);
  color: inherit; text-decoration: none;
}
.schedule-card a:hover { background: var(--c-surface-2); }
.schedule-card time {
  font-family: var(--font-numeric); font-variant-numeric: tabular-nums;
  font-size: var(--t-card); font-weight: 700;
}
.schedule-card span { display: grid; min-width: 0; overflow-wrap: anywhere; font-size: var(--t-body); }
.schedule-card small { color: var(--c-ink-muted); font-size: var(--t-meta); overflow-wrap: anywhere; }
@media (min-width: 48rem) {
  .schedule-card a { grid-template-columns: 8rem 1.4fr 1.2fr auto; }
}

/* ---- Meeting detail ----------------------------------------------------- */
.booking-details { display: grid; grid-template-columns: 1fr; gap: var(--space-2); margin: 0 0 var(--space-4); }
.booking-details div { background: var(--c-surface); padding: var(--space-4); border-radius: var(--radius); }
.booking-details dt { font-size: var(--t-meta); color: var(--c-ink-muted); font-weight: 700; }
.booking-details dd { margin: var(--space-1) 0 0; font-size: var(--t-body); overflow-wrap: anywhere; }
@media (min-width: 48rem) { .booking-details { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 75rem) { .booking-details { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.operation-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.operation-actions .button { flex: 1 1 auto; }
@media (min-width: 48rem) { .operation-actions .button { flex: 0 0 auto; } }

/* ---- Start panel -------------------------------------------------------- */
.panel-list { list-style: none; padding: 0; margin: var(--space-4) 0; display: grid; gap: var(--space-3); }
.panel-tile {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: var(--space-1); min-height: var(--tap-lg); width: 100%;
  padding: var(--space-3) var(--space-4); text-align: left;
}
.panel-tile small { font-weight: 400; font-size: var(--t-meta); }
@media (min-width: 48rem) { .panel-list { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); } }

/* ---- Day picker --------------------------------------------------------- */
.day-picker { border: 0; margin: 0 0 var(--space-4); padding: 0; }
.day-picker legend { font-weight: 700; font-size: var(--t-body); margin-bottom: var(--space-2); }
.day-picker-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.day-picker-option {
  min-width: 0; overflow-wrap: anywhere;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-3);
  align-items: center; min-height: var(--tap-lg); padding: var(--space-3);
  border: 2px solid var(--c-line-strong); border-radius: var(--radius);
  background: var(--c-surface); cursor: pointer;
}
.day-picker-option input { width: auto !important; grid-row: 1 / span 2; }
.day-picker-date { font-weight: 700; font-size: var(--t-body); }
.day-picker-status { font-size: var(--t-meta); }
.day-picker-option--available { border-color: var(--c-free); background: var(--c-free-soft); }
.day-picker-option--limited { border-color: var(--c-warn); background: var(--c-warn-soft); }
.day-picker-option--full { border-color: var(--c-danger); background: var(--c-danger-soft); }
.day-picker-option--unknown { border-color: var(--c-line-strong); background: var(--c-surface-2); }
.day-picker-option:focus-within { outline: 3px solid var(--c-accent); outline-offset: 2px; }
@media (min-width: 40rem) { .day-picker-grid { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); } }

/* ---- Tables ------------------------------------------------------------
   A multi-column table cannot fit a phone: the page scrolled sideways and the
   action column ended up off screen, out of reach of any tap. Stack each row
   into a card instead; cells carry their header via data-label. */
@media (max-width: 47.99rem) {
  table, thead, tbody, tr, th, td { display: block; width: auto; }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  tr {
    background: var(--c-surface); border: 1px solid var(--c-line);
    border-radius: var(--radius); padding: var(--space-3); margin: 0 0 var(--space-3);
  }
  td { border: 0; padding: var(--space-1) 0; overflow-wrap: anywhere; font-size: var(--t-body); }
  td:empty { display: none; }
  td[data-label]::before { content: attr(data-label) ": "; font-weight: 700; }
  td .button { width: 100%; margin-top: var(--space-2); }
}
@media (min-width: 48rem) {
  table { border-collapse: collapse; width: 100%; background: var(--c-surface); border-radius: var(--radius); overflow: hidden; }
  th, td { padding: var(--space-3); text-align: left; border-bottom: 1px solid var(--c-line); font-size: var(--t-body); }
  th { font-size: var(--t-meta); color: var(--c-ink-muted); font-weight: 700; }
}

/* ---- Odds and ends ------------------------------------------------------ */
.public-badge {
  display: inline-block; background: var(--c-free-soft); color: var(--c-free);
  border: 1px solid var(--c-free); border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3); font-size: var(--t-meta); font-weight: 700; white-space: nowrap;
}
.private-note { font-size: var(--t-body); color: var(--c-ink-muted); margin: var(--space-2) 0 0; }
/* An unconfirmed address is not decoration — whether the customer ever hears
   back depends on it. */
.unverified { color: var(--c-danger); }

/* Who sits at the table, on the meeting screen. A list to tick, because the
   alternative was cancelling the meeting and booking it again. Wide targets:
   this is used one-handed at a stand, so the whole row is the control. */
.operation-party { margin-top: var(--space-4, 1.5rem); }
.party-list { list-style: none; margin: .5rem 0 1rem; padding: 0; display: grid; gap: .25rem; }
.party-option {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem .6rem;
  border: 1px solid var(--c-line, rgba(0,0,0,.15));
  border-radius: .3rem;
  cursor: pointer;
}
.party-option:hover { background: var(--surface-muted, rgba(0,0,0,.04)); }
.party-option input { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }
.party-option:has(input:checked) { border-color: currentColor; font-weight: 600; }
.party-name { flex: 1 1 auto; }
.party-tag, .party-langs { font-size: .85rem; opacity: .7; white-space: nowrap; }

/* Every operation on the meeting itself. Two groups on purpose: what is said
   standing at the stand — arrived, finished, did not come — is one button and
   sits at the top; what the customer hears about unfolds below a rule, so the
   thumb aiming at "arrived" never lands on "cancel". */
.op-actions { margin-top: var(--space-4, 1.5rem); display: grid; gap: .5rem; }
.op-now { display: flex; flex-wrap: wrap; gap: .5rem; }
.op-now form { margin: 0; }
.op-now .button { min-height: 3rem; }
.op-step {
  border: 1px solid var(--c-line, rgba(0,0,0,.15));
  border-radius: .3rem;
  background: var(--c-surface, #fff);
}
.op-step > summary {
  padding: .9rem .8rem;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: baseline;
}
.op-step[open] > summary { border-bottom: 1px solid var(--c-line, rgba(0,0,0,.15)); }
.op-step > form { padding: .8rem; display: grid; gap: .7rem; }
.op-step > form label { display: block; font-weight: 600; }
.op-step > form select,
.op-step > form input[type="datetime-local"],
.op-step > form textarea { width: 100%; }
/* Set apart before it is opened, not only after: the warning belongs on the
   thing you are about to tap. */
.op-step--tells { border-color: var(--c-danger, #A4000C); }
.op-step--tells > summary { background: var(--c-danger-soft, #FFE3E6); }
.op-warns { font-weight: 400; font-size: .9rem; }