/* Belgo base styles. Only values from tokens.css; no hex colours or font names here. */
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/SourceSerif4-Light.3d2c57d79b8f.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img { max-width: 100%; height: auto; }

/* Layout */
.site-header {
  position: relative;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-2) var(--space-3);
}
.site-header__logo { flex: none; min-width: var(--tap); display: inline-flex; align-items: center; min-height: var(--tap); }
.site-header__logo img { height: 24px; width: auto; display: block; }
.site-header__switcher { flex: 1; min-width: 0; }
.site-header__menu { flex: none; display: flex; align-items: center; gap: var(--space-3); margin: 0; }
.site-header__user { display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap); font-size: var(--size-small); color: var(--muted); }
@media (max-width: 479px) {
  .site-header__user { display: none; }
}

.page { max-width: 1100px; margin: 0 auto; padding: var(--space-4) var(--space-3); }
.page--public { max-width: 480px; text-align: center; }
.page--public .form, .page--public .card { text-align: left; }
.public-logo { display: block; height: 64px; width: auto; margin: var(--space-4) auto; }

.page-title {
  font: 300 var(--size-title)/1.25 var(--font-title);
  margin: 0 0 var(--space-4);
  overflow-wrap: anywhere;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 var(--space-3);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.btn-primary { background: var(--ink); color: var(--beige); }
.btn-secondary { background: var(--white); color: var(--ink); }
.btn-danger { background: var(--red); border-color: var(--red); color: var(--beige); }
.btn:focus-visible, input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Forms */
.form { display: flex; flex-direction: column; gap: var(--space-3); }
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field label { font-size: var(--size-small); font-weight: 600; }
.field input[type="text"], .field input[type="email"], .field input[type="password"],
.field input[type="url"], .field input[type="tel"],
.field select, .field textarea {
  min-height: var(--tap);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  width: 100%;
}
.field-error, .form .field-error { color: var(--red); font-size: var(--size-small); margin: 0; }

/* Cards, badges, empty states */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
}
.badge {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--white);
  font-size: var(--size-small);
  line-height: 1.25;
}
.empty-state { color: var(--muted); }
.empty-state p { margin: 0; }
.card p { margin: 0 0 var(--space-3); }
.card p:last-child { margin-bottom: 0; }
.card .btn { margin-top: var(--space-1); }

/* Language switch (public pages): a quiet text switch, not a button */
.language-switch { display: flex; justify-content: center; align-items: center; gap: var(--space-2); margin-top: var(--space-4); }
.language-switch form { margin: 0; }
.language-switch__divider { color: var(--line); }
.language-switch button, .language-switch a {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 var(--space-2);
  border: 0;
  background: none;
  font: inherit;
  color: var(--muted);
  cursor: pointer;
}
.language-switch button[aria-current="true"], .language-switch a[aria-current="true"] { color: var(--ink); font-weight: 600; }
.language-switch button:focus-visible, .language-switch a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Secondary links under a form (Forgot your password?, Back to log in) */
.form-link, .page-note a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); min-width: var(--tap); align-self: center;
  color: var(--ink); font-size: var(--size-small);
}
.page-note { margin: var(--space-3) 0 0; text-align: center; }
.field-help { color: var(--muted); font-size: var(--size-small); margin: 0; }

/* Main menu: a button that opens the list on phones, a row of links from 768px */
.nav-menu { flex: none; }
.nav-menu summary { list-style: none; }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu:not([open]) .nav-menu__list { display: none; }
.nav-menu__list {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 10;
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3);
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.nav-menu__list a, .site-nav a {
  display: flex; align-items: center;
  min-height: var(--tap);
  padding: 0 var(--space-3);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
}
.nav-menu__list a[aria-current], .site-nav a[aria-current] { font-weight: 600; background: var(--beige); }
.site-nav { display: none; }
@media (min-width: 768px) {
  .nav-menu { display: none; }
  .site-nav {
    display: flex; flex-wrap: wrap; gap: var(--space-2);
    max-width: 1100px; margin: 0 auto;
    padding: 0 var(--space-3) var(--space-2);
  }
}

/* Home screen */
.home-total { color: var(--muted); margin: 0 0 var(--space-3); }
.home-group { margin-bottom: var(--space-5); }
.home-group__title {
  display: flex; align-items: center; min-height: var(--tap);
  font-size: var(--size-body); font-weight: 600; margin: 0 0 var(--space-3);
}
.home-group__link {
  display: flex; align-items: center; min-height: var(--tap);
  color: var(--ink); text-decoration: none;
}
.home-group__link:focus-visible, .home-more__link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.home-count {
  display: inline-block; min-width: 24px; padding: 0 var(--space-2); margin-left: var(--space-1);
  border: 1px solid var(--ink); border-radius: 999px; background: var(--white);
  font-size: var(--size-small); font-weight: 400; text-align: center;
  font-variant-numeric: tabular-nums;
}
.home-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.home-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: var(--tap); padding: var(--space-3);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink); text-decoration: none;
}
.home-item:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.home-item__text { display: flex; flex-direction: column; min-width: 0; }
.home-item__title { overflow-wrap: anywhere; }
.home-item__detail { color: var(--muted); font-size: var(--size-small); overflow-wrap: anywhere; }
.badge-late { background: var(--red); border-color: var(--red); color: var(--beige); flex: none; }
.home-more__link { display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap); color: var(--ink); }
.home-more { color: var(--muted); font-size: var(--size-small); margin: var(--space-2) 0 0; }
.home-hq { margin-bottom: var(--space-4); }

/* Handyman workload panel (company management): a card per company, figures that open the list */
.workload { margin-bottom: var(--space-4); }
.workload__company { margin-bottom: var(--space-3); }
.workload__name { font-size: var(--size-body); font-weight: 600; margin: 0 0 var(--space-2); }
.workload__figures {
  list-style: none; margin: 0 0 var(--space-3); padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2);
}
.workload__figure {
  display: flex; flex-direction: column; justify-content: center; min-height: var(--tap);
  height: 100%; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--white);
  color: var(--ink); text-decoration: none;
}
.workload__figure:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.workload__number { font-size: var(--size-title); line-height: 1.2; font-variant-numeric: tabular-nums; }
.workload__label { font-size: var(--size-small); color: var(--muted); }
.workload__figure--late .workload__number, .workload__figure--late .workload__label { color: var(--red); }
.workload__pace { color: var(--muted); font-size: var(--size-small); }
@media (min-width: 768px) {
  .workload__figures { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Filters applied to the ticket list, each one removable */
.narrowed { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.narrowed-row { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: var(--space-2); }
.narrowed-row .narrowed { margin-bottom: var(--space-3); }
.narrowed__lead { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--muted); }
.narrowed__item {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--tap); padding: 0 var(--space-3);
  border: 1px solid var(--ink); border-radius: 999px; background: var(--white);
  color: var(--ink); text-decoration: none;
}
.narrowed__item:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Date fields and the filter bar */
.field input[type="date"] {
  min-height: var(--tap);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  width: 100%;
}
.filters { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin-bottom: var(--space-4); }
.filters__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-end; }
@media (min-width: 768px) {
  .filters { grid-template-columns: repeat(2, 1fr); }
  .filters__actions { grid-column: 1 / -1; }
}

/* Change history: cards on phones, a table from 768px */
.history { width: 100%; border-collapse: collapse; }
.history thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.history tr {
  display: block;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}
.history td { display: block; padding: var(--space-1) 0; overflow-wrap: break-word; }
.history td::before {
  content: attr(data-label);
  display: block;
  font-size: var(--size-small);
  color: var(--muted);
}
.history__type { display: block; font-size: var(--size-small); color: var(--muted); }
.history__changes { margin: 0; padding: 0; list-style: none; }
.history__changes li { padding: var(--space-1) 0; font-size: var(--size-small); overflow-wrap: anywhere; }
.pager { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin: var(--space-4) 0; }
.pager__status { font-size: var(--size-small); color: var(--muted); }
@media (min-width: 768px) {
  .history { background: var(--white); border: 1px solid var(--line); }
  .history thead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .history tr { display: table-row; border: 0; border-radius: 0; padding: 0; margin: 0; background: none; }
  .history tbody tr { border-top: 1px solid var(--line); }
  .history th {
    text-align: left; font-size: var(--size-small); font-weight: 600;
    padding: var(--space-2) var(--space-3); background: var(--white);
  }
  .history td { display: table-cell; padding: var(--space-2) var(--space-3); vertical-align: top; }
  .history td::before { display: none; }
  .history td:first-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
}

/* Users page: cards on phones, a table from 768px */
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.page-head .page-title { margin: 0; }
.people, .rows { width: 100%; border-collapse: collapse; }
.people thead, .rows thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.people tr, .rows tr {
  display: block;
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}
.people td, .rows td { display: block; padding: var(--space-1) 0; overflow-wrap: anywhere; }
.people__name a { display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap); color: var(--ink); font-weight: 600; }
.people__full { display: block; font-size: var(--size-small); color: var(--muted); }
.people__where { font-size: var(--size-small); }
.badge--muted { border-color: var(--muted); color: var(--muted); }
.badge--attention { background: var(--blue); border-color: var(--blue); color: var(--ink); }
.people .badge, .rows .badge { white-space: nowrap; }
@media (min-width: 768px) {
  .people, .rows { background: var(--white); border: 1px solid var(--line); }
  .people thead, .rows thead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .people tr, .rows tr { display: table-row; border: 0; border-radius: 0; padding: 0; margin: 0; background: none; }
  .people tbody tr, .rows tbody tr { border-top: 1px solid var(--line); }
  .people th, .rows th {
    text-align: left; font-size: var(--size-small); font-weight: 600;
    padding: var(--space-2) var(--space-3); background: var(--white);
  }
  .people td, .rows td { display: table-cell; padding: var(--space-2) var(--space-3); vertical-align: middle; }
  .people td.people__name, .rows td.people__name { min-width: 10rem; overflow-wrap: normal; }
}

/* A person's page */
.note { color: var(--muted); font-size: var(--size-small); margin: var(--space-3) 0; }
.notice { border-left: 4px solid var(--blue); margin-bottom: var(--space-4); }
.test-banner {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  border-left: 4px solid var(--yellow);
  font-size: var(--size-small);
  margin: 0;
  padding: var(--space-2) var(--space-3);
}
.facts { display: grid; grid-template-columns: 1fr; gap: var(--space-2); margin: 0; }
.facts dt { font-size: var(--size-small); color: var(--muted); }
.facts dd { margin: 0 0 var(--space-2); overflow-wrap: anywhere; }
@media (min-width: 768px) {
  .facts { grid-template-columns: 12rem 1fr; }
  .facts dd { margin: 0; }
}
.section-title { font-size: var(--size-body); font-weight: 600; margin: var(--space-4) 0 var(--space-2); }
.choices { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.choices label { display: flex; align-items: center; gap: var(--space-2); min-height: var(--tap); font-weight: 400; font-size: var(--size-body); }
/* A 24px box inside a 44px tap target */
.choices input, .cell-check input {
  appearance: none; position: relative; flex: none; margin: 0; cursor: pointer;
  width: var(--tap); height: var(--tap); border: 0; background: none; font-size: var(--size-body);
}
.choices input::before, .cell-check input::before {
  content: ""; position: absolute; inset: 10px;
  border: 2px solid var(--ink); border-radius: var(--radius); background: var(--white);
}
.choices input:checked::before, .cell-check input:checked::before { background: var(--ink); box-shadow: inset 0 0 0 4px var(--white); }
.choices input:focus-visible, .cell-check input:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
/* A long form keeps its button on screen: it sticks to the bottom while the form scrolls */
.sticky-action { position: sticky; bottom: var(--space-3); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.actions form { margin: 0; }

/* Settings: the index, list tables with labelled cells, Up/Down buttons, the modules grid */
.settings-index { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
.settings-index__link { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--ink); font-weight: 600; }
.settings-index .card p { margin: 0; }
.rows td[data-label]::before { content: attr(data-label); display: block; font-size: var(--size-small); color: var(--muted); }
.rows .num { font-variant-numeric: tabular-nums; }
.rows thead { display: none; }
.row-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-2); }
.row-actions form { margin: 0; }
.row-actions .btn { margin: 0; min-width: 5.5rem; }
.row-actions .btn:disabled { color: var(--muted); border-color: var(--line); cursor: default; }
.section-head { margin: var(--space-4) 0 var(--space-2); }
.section-head .section-title { margin: 0; }
.modules th[scope="row"] { display: block; padding: 0 0 var(--space-1); font-size: var(--size-body); font-weight: 600; text-align: left; }
.cell-check label { display: flex; align-items: center; gap: var(--space-2); min-height: var(--tap); margin: 0; }
.cell-check__note { margin-left: var(--space-1); }
@media (min-width: 768px) {
  .settings-index { grid-template-columns: repeat(2, 1fr); }
  .rows td[data-label]::before { display: none; }
  .rows thead { display: table-header-group; }
  .row-actions { padding-top: var(--space-2); }
  .modules { margin-bottom: var(--space-3); }
  .modules th, .modules td { text-align: center; vertical-align: middle; }
  .modules th:first-child, .modules th[scope="row"] { text-align: left; font-size: var(--size-small); padding: var(--space-2) var(--space-3); }
  .cell-check__role { display: none; }
  .cell-check label { justify-content: center; }
  .cell-check__note { display: none; }
}

/* Report a problem: round radio choices, the photo picker */
.choices input[type="radio"]::before { border-radius: 50%; }
.field input[type="file"] {
  min-height: var(--tap); width: 100%; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--white);
  color: var(--ink); font: inherit;
}
.field input[type="file"]::file-selector-button {
  min-height: var(--tap); margin-right: var(--space-3); padding: 0 var(--space-3);
  border: 1px solid var(--ink); border-radius: var(--radius); background: var(--white);
  color: var(--ink); font: inherit; cursor: pointer;
}

/* Ticket list: cards on phones, a table from 768px. Urgency badges carry their colour. */
.badge--help_now { background: var(--red); border-color: var(--red); color: var(--beige); }
.badge--within_24h { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.badge--this_week { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.status-filter ul { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.status-filter a {
  display: inline-flex; align-items: center; gap: var(--space-1);
  min-height: var(--tap); min-width: var(--tap); padding: 0 var(--space-3);
  border: 1px solid var(--line); border-radius: 999px; background: var(--white);
  color: var(--ink); text-decoration: none;
}
.status-filter a[aria-current] { border-color: var(--ink); font-weight: 600; }
.status-filter__count { font-size: var(--size-small); font-variant-numeric: tabular-nums; color: var(--muted); }
.tickets { width: 100%; border-collapse: collapse; margin-bottom: var(--space-3); }
.tickets thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.tickets tr {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--space-3); margin-bottom: var(--space-2);
}
.tickets td { display: block; min-width: 0; overflow-wrap: anywhere; }
.tickets td.tickets__main { flex: 0 0 100%; }
.tickets__cell { display: flex; align-items: center; gap: var(--space-3); }
.tickets__thumb { flex: none; width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); }
.tickets__title { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--ink); font-weight: 600; text-decoration: none; }
.tickets__id { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tickets__text { display: flex; flex-direction: column; min-width: 0; }
.tickets__meta { font-size: var(--size-small); color: var(--muted); overflow-wrap: anywhere; }
.tickets__when { flex: 0 0 100%; font-size: var(--size-small); color: var(--muted); font-variant-numeric: tabular-nums; }
@media (min-width: 768px) {
  .tickets { background: var(--white); border: 1px solid var(--line); }
  .tickets thead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .tickets tr { display: table-row; border: 0; border-radius: 0; padding: 0; margin: 0; background: none; }
  .tickets tbody tr { border-top: 1px solid var(--line); }
  .tickets th { text-align: left; font-size: var(--size-small); font-weight: 600; padding: var(--space-2); background: var(--white); }
  .tickets th:first-child, .tickets td:first-child { padding-left: var(--space-3); }
  .tickets th:last-child, .tickets td:last-child { padding-right: var(--space-3); }
  .tickets td { display: table-cell; padding: var(--space-2) var(--space-2); vertical-align: middle; overflow-wrap: normal; }
  .tickets td { width: 1%; white-space: nowrap; }
  .tickets td.tickets__main { display: table-cell; width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .tickets__cell { gap: var(--space-2); }
  .tickets .badge { white-space: nowrap; }
  .tickets td.tickets__when { color: var(--ink); font-size: var(--size-small); white-space: normal; min-width: 7rem; }
}

/* A ticket */
.back-link { margin: 0 0 var(--space-2); }
.back-link a { display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap); color: var(--ink); font-size: var(--size-small); }
.ticket-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-3); }
.photos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.photos a { display: block; }
.photos img { display: block; width: 120px; height: 120px; object-fit: cover; border: 1px solid var(--line); border-radius: var(--radius); }
.photos__wait { color: var(--muted); font-size: var(--size-small); }
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.timeline li { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-2) var(--space-3); overflow-wrap: anywhere; }
.timeline__when { display: block; color: var(--muted); font-size: var(--size-small); font-variant-numeric: tabular-nums; }

/* Ticket workflow (M3): the buttons under the title, extra lines in the history */
.ticket-actions { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-3); }
.ticket-actions__group { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ticket-actions__group:empty { display: none; }
.ticket-actions form { margin: 0; }
.timeline__detail { display: block; overflow-wrap: anywhere; }
/* A 44px tap area around an inline link that does not make its line taller: the box is
   44px whatever the font, and the negative margins take back what it adds to the line. */
.facts a, .timeline a {
  display: inline-block; min-height: var(--tap); line-height: var(--tap);
  padding: 0 12px; margin: -12px -12px; color: var(--ink);
}

/* Cost block (M4) */
.cost__final { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; }
.cost__label { color: var(--muted); font-size: var(--size-small); }
.cost__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.cost__list li { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: center; }
.cost__list li + li { border-top: 1px solid var(--line); padding-top: var(--space-3); }
.cost__meta { flex-basis: 100%; color: var(--muted); font-size: var(--size-small); overflow-wrap: anywhere; }
.step-facts { margin-bottom: var(--space-3); }

/* Edit and notes (M5) */
.ticket-edit { margin: 0 0 var(--space-3); }
.ticket-edit .btn { margin: 0; }
.notes { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.notes > li { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-2) var(--space-3); overflow-wrap: anywhere; }
.notes__meta { margin: 0 0 var(--space-1); color: var(--muted); font-size: var(--size-small); font-variant-numeric: tabular-nums; }
.notes__meta strong { color: var(--ink); }
.notes__text { margin: 0; }
.notes .photos { margin-top: var(--space-2); }
.note-box { margin-bottom: var(--space-4); }

/* Dashboards (M7): the frame, number tiles, bar and line charts, tables as cards on phones */
/* The selectors, folded under one line on phones (the figures come first) */
.dash-choose { margin-bottom: var(--space-4); }
.dash-periods { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-3); }
.dash-periods [aria-current="page"] { background: var(--ink); color: var(--beige); }
.dash-filters { display: flex; flex-direction: column; gap: var(--space-3); }
.dash-filters__fields, .dash-filters__dates { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 768px) {
  .dash-filters__fields { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .dash-filters__dates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dash-filters__meanwhile { grid-column: 1 / -1; }
/* First and last day only with "Chosen dates" (browsers without :has() show them always) */
.tiles {
  list-style: none; margin: 0 0 var(--space-5); padding: 0;
  display: grid; grid-template-columns: 1fr; gap: var(--space-3);
}
/* Always 4 tiles: 2 by 2 on an iPad, one row on a laptop */
@media (min-width: 560px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile {
  display: flex; flex-direction: column; gap: var(--space-1); height: 100%; min-height: var(--tap);
  padding: var(--space-3); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink); text-decoration: none;
}
.tile:hover { border-color: var(--ink); }
.tile:focus-visible { border-color: var(--ink); outline: 2px solid var(--ink); outline-offset: 2px; }
.tile__number { font-size: var(--size-title); line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; text-decoration: none; }
.tile__number + .tile__number, .tile__change + .tile__number { margin-top: var(--space-2); }
.tile__note { font-size: var(--size-small); color: var(--muted); }
.tile__label { font-size: var(--size-small); }
.tile__change { font-size: var(--size-small); color: var(--muted); font-variant-numeric: tabular-nums; }
.tile--late .tile__number, .tile--late .tile__label { color: var(--red); }
.badge--better { background: var(--green); border-color: var(--green); color: var(--ink); }
.badge--worse { background: var(--red); border-color: var(--red); color: var(--beige); }
.dash-section { margin-bottom: var(--space-5); }
.dash-section > .section-title, .dash-charts .section-title { margin-top: 0; }
.dash-charts { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin-bottom: var(--space-5); }
@media (min-width: 768px) {
  .dash-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dash-chart { min-width: 0; }
.dash-chart__title { font-size: var(--size-body); font-weight: 600; margin: 0 0 var(--space-2); }
.dash-empty { color: var(--muted); margin: 0; }
.dash-note { margin-top: 0; }
.dash-none { color: var(--muted); font-size: var(--size-small); }
.dash-link {
  display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap);
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.dash-link:focus-visible, .bars__item:focus-visible, .line-chart__point:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.dash-table th[scope="row"] { display: block; padding: 0 0 var(--space-1); font-size: var(--size-body); font-weight: 600; text-align: left; }
.dash-table td.num { font-variant-numeric: tabular-nums; }
.dash-table tr:last-child { margin-bottom: 0; }
/* Every cell the same height on a phone card, with or without a link */
.dash-table td { display: flex; flex-direction: column; align-items: flex-start; }
.dash-table td::before { align-self: stretch; }
.dash-link--stacked { flex-direction: column; align-items: flex-start; justify-content: center; }
.dash-cell { display: flex; flex-direction: column; justify-content: center; min-height: var(--tap); }
.dash-cell-note { display: block; font-size: var(--size-small); color: var(--muted); }
.dash-link--stacked { text-decoration: none; }
.dash-link--stacked > span:first-child { text-decoration: underline; }
@media (min-width: 768px) {
  .dash-table th[scope="row"] { display: table-cell; padding: var(--space-2) var(--space-3); vertical-align: middle; }
  .dash-table td { display: table-cell; }
  .dash-cell { min-height: 0; }
  .dash-table thead th { white-space: nowrap; }
}

.bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.bars__item {
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-1);
  min-height: var(--tap); padding: var(--space-1) 0; color: var(--ink); text-decoration: none;
}
.bars__text { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--size-small); font-variant-numeric: tabular-nums; }
.bars__label { min-width: 0; overflow-wrap: anywhere; }
.bars__value { flex: none; text-align: right; }
.bars__bar { display: block; width: 100%; height: 12px; }
.bars__track { fill: var(--beige); }
.bars__fill { fill: var(--ink); }
.bars__fill--late { fill: var(--red); }

.line-chart { margin: 0; }
.line-chart__drawing { display: block; width: 100%; height: auto; }
.line-chart__line { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.line-chart__dot { fill: var(--ink); }
.line-chart__points { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.line-chart__point { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--tap); min-width: var(--tap); color: var(--ink); font-size: var(--size-small); font-variant-numeric: tabular-nums; }
.line-chart__label { color: var(--muted); }

/* Excel exports (M8): the button on a dashboard and the exports page */
.dash-export { margin: 0; }
.exports-note { margin-top: 0; }
.exports__what strong { display: block; }
.exports__period { display: block; font-size: var(--size-small); color: var(--muted); }
.exports__action { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.exports__action .btn { margin: 0; }
.exports__help { font-size: var(--size-small); color: var(--muted); }
@media (min-width: 768px) {
  .exports td.exports__action { display: table-cell; text-align: right; }
  .exports__action .exports__help { display: block; margin-bottom: var(--space-1); }
  .exports td.num { white-space: nowrap; }
}

/* Public survey (S2): five big score buttons per question, the notice in place, the
   consent sentence and Send kept on screen at the bottom */
.venue-name { color: var(--muted); margin: calc(-1 * var(--space-3)) 0 var(--space-4); }
.survey .optional { font-weight: 400; color: var(--muted); }
.question { display: flex; flex-direction: column; gap: var(--space-2); }
.question .question__text { font: 300 var(--size-title)/1.25 var(--font-title); margin: 0; }
.scores { display: flex; gap: var(--space-2); }
.score {
  position: relative; flex: 1; min-width: var(--tap); height: 56px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--ink); border-radius: var(--radius); background: var(--white);
  font-size: var(--size-body); cursor: pointer;
}
.score input { font-size: var(--size-body); appearance: none; position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; border-radius: var(--radius); }
.score span { position: relative; pointer-events: none; }
.score:has(input:checked) { background: var(--ink); color: var(--beige); }
.score:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.scores__ends { display: flex; justify-content: space-between; margin: 0; color: var(--muted); font-size: var(--size-small); }
.card .scores__ends { margin-bottom: 0; }
.survey-notice summary { display: flex; align-items: center; min-height: var(--tap); cursor: pointer; text-decoration: underline; }
.survey-notice__body { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3); }
.survey-notice__body p, .survey-notice__body li { margin: 0 0 var(--space-2); }
.survey-notice__body .section-title { margin-top: 0; }
.consent-bar { display: flex; flex-direction: column; gap: var(--space-2); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3); }
.consent-bar__sentence { margin: 0; }

/* Survey thank-you screen (S2b) */
.thanks__review { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.thanks__review p { margin: 0; }
.thanks__review .btn { margin-top: 0; }
.qr { width: min(100%, 16rem); line-height: 0; }
.qr svg { width: 100%; height: auto; display: block; }

/* QA guest contact text can be long, including unbroken email addresses. */
.qa-guests td { overflow-wrap: anywhere; }

.qa-links td, .qa-link-detail p { overflow-wrap: anywhere; }

/* QA guest evaluation */
.qa-submit { background: var(--beige); padding: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius); }
.qa-submit p { margin: 0 0 var(--space-2); }
.qa-submit .row-actions { margin: 0; }
.qa-evaluation .question__text { overflow-wrap: anywhere; }

/* QA submitted evaluation (Q5). */
.qa-result-summary, .qa-result-section { margin-bottom: var(--space-4); overflow-wrap: anywhere; }
.qa-result-score { font-size: var(--size-title); }
.qa-result-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.qa-result-facts dt { color: var(--muted); font-size: var(--size-small); }
.qa-result-facts dd { margin: var(--space-1) 0 0; }
.qa-result-questions { list-style: none; padding: 0; }
.qa-result-questions li { border-top: 1px solid var(--line); padding: var(--space-3) 0; }
.qa-result-note { white-space: pre-wrap; }
@media (max-width: 767px) { .qa-result-facts { grid-template-columns: 1fr; } }

.qa-pass { background: var(--green); color: var(--ink); }
.qa-fail { background: var(--red); color: var(--beige); }

.qa-result-head .page-title { max-width: 100%; overflow-wrap: anywhere; }

.qa-links td.people__name { overflow-wrap: anywhere; }
.qa-links .people__name a { max-width: 100%; overflow-wrap: anywhere; }

/* QA corrections and private revision history (Q5b). */
.qa-revision-list { margin-bottom: var(--space-4); overflow-wrap: anywhere; }
.qa-revision-list ol { list-style: none; padding: 0; margin: 0; }
.qa-revision-link { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-height: var(--tap); padding: var(--space-2) 0; }
.qa-revision-link[aria-current="true"] { font-weight: 600; }
.qa-revision-list li + li { border-top: 1px solid var(--line); }
.qa-correction .question__text { font-size: var(--size-body); }

/* QA dashboard: numeric trends, with readable monthly figures outside the SVG. */
.qa-dashboard { margin-top: var(--space-5); }
.qa-dashboard h2, .qa-trend h3 { font-size: 16px; font-weight: 600; }
.qa-trend { margin: 16px 0; min-width: 0; }
.qa-trend__figure { display: flex; align-items: stretch; min-height: 116px; padding: 8px 0; }
.qa-trend__figure svg { display: block; width: calc(100% - 36px); min-width: 0; max-height: 180px; }
.qa-trend__axis { display: flex; flex-direction: column; justify-content: space-between; width: 36px; padding: 8px 0; font-size: 14px; }
.qa-trend__grid { stroke: var(--line); stroke-width: 1; }
.qa-trend__pass { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 4; }
.qa-trend__line { stroke: var(--ink); stroke-width: 2; fill: none; }
.qa-trend__point { fill: var(--ink); }
.qa-trend summary { min-height: 44px; padding: 12px 0; cursor: pointer; }
.qa-trend__months, .qa-dashboard__questions { list-style: none; margin: 0; padding: 0; }
.qa-trend__months { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.qa-trend__months a, .qa-dashboard__questions a { display: flex; flex-direction: column; gap: 4px; min-height: 44px; padding: 8px; overflow-wrap: anywhere; }
.qa-trend__months a { font-size: 14px; border: 1px solid var(--line); }
.qa-dashboard__questions { display: grid; gap: 8px; }
.qa-dashboard__questions .card { margin: 0; }
.qa-dashboard { overflow-wrap: anywhere; }
.qa-dashboard .rows { table-layout: fixed; }
.qa-dashboard .rows td.people__name { min-width: 0; overflow-wrap: anywhere; }
.qa-dashboard .people__name a { max-width: 100%; overflow-wrap: anywhere; }

/* QA design review: keep details distinct and internal text on the shared type scale. */
.qa-guests .field-help,
.qa-links .field-help,
.qa-dashboard .people__name .field-help { display: block; }
.qa-result-section h2,
.qa-revision-list h2 { font-size: var(--size-body); font-weight: 600; }
.qa-revision-link { color: var(--ink); }
.qa-correction .question__text { font-family: var(--font-ui); font-weight: 400; }

.qa-dashboard a { color: var(--ink); }
.qa-trend__range { display: flex; justify-content: space-between; gap: var(--space-2); margin-left: 36px; font-size: var(--size-small); }

/* #100: approved A, real trends first and visible scales. */
.bars__scale { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: var(--size-small); font-variant-numeric: tabular-nums; }
.bars__bar { height: 8px; }
.tile__spark { display: block; width: 100%; margin-top: var(--space-2); }
.tile__spark svg { display: block; width: 100%; height: 40px; }
.dash-trend { margin-bottom: var(--space-5); }
.dash-trend__plot { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: var(--space-2); }
.dash-trend__scale { display: flex; flex-direction: column; justify-content: space-between; font-size: var(--size-small); color: var(--muted); text-align: right; padding: 2px 0; }
.dash-trend__drawing { display: block; width: 100%; height: 200px; border-bottom: 1px solid var(--line); }
.dash-trend__dates { display: flex; justify-content: space-between; gap: 8px; font-size: var(--size-small); color: var(--muted); }
.dash-trend__previous { fill: none; stroke: var(--muted); stroke-width: 2; stroke-dasharray: 6 4; }
.dash-trend__legend { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--size-small); }
.dash-trend summary { min-height: var(--tap); padding: var(--space-2) 0; cursor: pointer; }
.dash-trend .line-chart__points { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }