/*
 * HELDER WERKBLAD: the component kit.
 *
 * A white bar across the top with the destinations, a soft grey desk under it, and white cards
 * with a hairline edge on that desk. The blue is for the action that moves the work and for where
 * you are; state is a small coloured dot or a soft pill. Everything reads the semantic token layer.
 */

/* ============================================================
   The grid
   One definition, shared by the band, the counts, the filters,
   the sections and the match review.
   ============================================================ */

.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: start;
}

/*
 * A grid whose children are meant to wrap onto a second row.
 *
 * The plain grid has no row-gap on purpose: it lines one row up across the page, and everywhere it
 * is used the children fit. A form is the exception. Four fields sit on one line on a wide screen
 * and fold to two by two on a narrow one, and without a row gap the second row's label lands
 * against the first row's input with nothing between them.
 */
.grid--rows {
  row-gap: var(--space-7);
}

.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-12 { grid-column: 1 / -1; }

/* ============================================================
   The sheet: a white side bar on the left, the desk beside it
   ============================================================ */

.sheet {
  display: grid;
  grid-template-columns: var(--side-width) minmax(0, 1fr);
  min-height: 100vh;
}

.side {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-3) var(--space-3);
  background: var(--surface-nav);
  border-right: var(--width-hair) solid var(--rule-hair);
  scrollbar-width: thin;
}

.side__mark {
  display: block;
  padding: 0 var(--space-3);
  line-height: 0;
}

/* The client's own wordmark, their file unchanged. */
.side__wordmark {
  display: block;
  width: auto;
  height: 1.75rem;
}

.side__nav,
.side__folders {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.side__title {
  padding: 0 var(--space-3) var(--space-2);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-faint);
}

.side__link,
.side__folder,
.side__view,
.side__add {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.125rem;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius);
  color: var(--text);
  font-size: var(--text-base);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.side__link .icon,
.side__folder .icon,
.side__add .icon {
  width: 1rem;
  height: 1rem;
  color: var(--text-faint);
}

.side__link > span:first-of-type,
.side__name {
  flex: 1;
  min-width: 0;
}

.side__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.side__link:hover,
.side__folder:hover,
.side__view:hover,
.side__add:hover {
  background: var(--surface-inset);
  text-decoration: none;
}

.side__link[aria-current="page"],
.side__folder[aria-current="page"],
.side__view[aria-current="page"] {
  background: var(--primary-wash);
  color: var(--primary-ink);
  font-weight: var(--weight-semibold);
}

.side__link[aria-current="page"] .icon,
.side__folder[aria-current="page"] .icon {
  color: var(--primary);
}

.side__count,
.side__view .chip__count {
  min-width: 0;
  padding: 0;
  background: none;
  color: var(--text-faint);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
}

.side__folder[aria-current="page"] .side__count,
.side__view[aria-current="page"] .chip__count {
  color: var(--primary-ink);
}

/* A view of the open terrain hangs under it, like a sub-folder. */
.side__view {
  min-height: 1.875rem;
  padding-left: calc(var(--space-3) + 1rem + var(--space-3));
  font-size: var(--text-sm);
}

.side__view .chip__label {
  flex: 1;
  position: relative;
}

.side__view .chip__label::before {
  content: "";
  position: absolute;
  left: calc(-1 * (var(--space-3) + 0.5rem));
  top: 0.2em;
  width: 0.4rem;
  height: 0.45em;
  border-left: 1.5px solid var(--rule-mid);
  border-bottom: 1.5px solid var(--rule-mid);
  border-bottom-left-radius: 2px;
}

.side__add {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  margin-top: var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* A count here means work is waiting: a small blue pill. */
.side__badge {
  min-width: 1.25rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--text-on-primary);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  line-height: 1.25rem;
  text-align: center;
}

.side__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-top: var(--width-hair) solid var(--rule-hair);
}

.side__avatar {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: 50%;
  background: var(--primary-wash-strong);
  color: var(--primary-ink);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
}

.side__user {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.linkbutton {
  background: none;
  border: 0;
  padding: 0;
  color: var(--text-faint);
  font-size: var(--text-sm);
  cursor: pointer;
}

.linkbutton:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.field-column {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface-desk);
}

/* ---- The rail: the path above the current screen ---- */

.rail {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-faint);
  min-width: 0;
}

.rail a {
  color: var(--text-muted);
  text-decoration: none;
}

.rail a:hover {
  color: var(--primary-ink);
}

.rail a:not(:last-child)::after {
  content: "/";
  margin-left: var(--space-2);
  color: var(--rule-mid);
}

/* A top-level screen has no crumb, and an empty rail takes no height. */
.rail:not(:has(*)) {
  display: none;
}

/* ============================================================
   The band: the head of every screen. Title, a grey line
   under it, the actions on the right. No panel, no fill.
   ============================================================ */

.band {
  grid-template-rows: auto auto auto;
  row-gap: 0;
  padding: 0;
  color: var(--text);
}

.band__name {
  grid-column: 1 / 8;
  grid-row: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  line-height: var(--leading-tight);
  color: var(--text-strong);
}

.band__where {
  grid-column: 1 / 9;
  grid-row: 2;
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--text-muted);
  max-width: 52rem;
}

.band__actions {
  grid-column: 8 / -1;
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2);
  align-self: start;
}

/* The counts sit as a row of small white cards under the title. */
.tally {
  grid-column: 1 / -1;
  grid-row: 3;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.tally__item {
  padding: var(--space-4) var(--space-5);
  border: var(--width-hair) solid var(--rule-hair);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
}

.tally__value {
  display: block;
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: 1.1;
  margin-bottom: var(--space-1);
}

.tally__value--accent {
  color: var(--primary-ink);
}

/* ============================================================
   Page and sections
   ============================================================ */

/* A flex column so the crumb, the head and the content keep a fixed order. */
.page {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-7) var(--page-pad) var(--space-11);
  min-width: 0;
}

.page > * {
  order: 3;
}

.page > .rail {
  order: 1;
  margin-bottom: var(--space-3);
}

.page > .band {
  order: 2;
  margin-bottom: var(--space-6);
}

.section {
  margin-bottom: var(--space-5);
}

.section:last-child {
  margin-bottom: 0;
}

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.section__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--track-display);
}

/* ============================================================
   Buttons. Soft grey by default, blue for the primary action.
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.375rem;
  padding: var(--space-2) var(--space-4);
  border: var(--width-hair) solid var(--rule-hair);
  border-radius: var(--radius);
  background: var(--surface-card);
  box-shadow: 0 1px 2px rgb(17 24 39 / 0.05);
  color: var(--text);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}

/* A button is white with a hairline on the grey desk and in white cards alike, so it always reads
   as a button (10 November 2026: the soft grey ones disappeared into the desk). */
.btn:hover {
  background: var(--surface-card);
  border-color: var(--rule-mid);
  text-decoration: none;
}

.btn:active {
  background: var(--surface-inset);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  color: var(--text-faint);
  background: var(--surface-inset);
  border-color: transparent;
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

/* The action that moves the work forward: white on the blue. */
.btn--accent,
.btn--primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--text-on-primary);
  font-weight: var(--weight-semibold);
  box-shadow: 0 1px 2px rgb(37 99 235 / 0.25);
}

.btn--accent:hover,
.btn--primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.btn--accent[disabled],
.btn--accent[aria-disabled="true"] {
  background: var(--blue-200);
  border-color: var(--blue-200);
  color: var(--white);
}

.btn--quiet {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--text-muted);
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

.btn--quiet:hover {
  background: var(--surface-inset);
  color: var(--text);
}

.btn--sm {
  min-height: 2rem;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
}

.btn--block {
  width: 100%;
}

.icon {
  width: 1em;
  height: 1em;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  flex: none;
}

/* ============================================================
   Figures
   ============================================================ */

.figure {
  grid-column: span 2;
}

.figure__value {
  display: block;
  margin: var(--space-1) 0;
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: 1.1;
}

.figure__note {
  font-size: var(--text-xs);
  color: var(--text-faint);
}

/* ============================================================
   Filters: one grid row, every control on a column
   ============================================================ */

.filters {
  margin-bottom: var(--space-7);
  row-gap: var(--space-5);
}

.filters__search {
  grid-column: span 6;
}

.filters__pick {
  grid-column: span 2;
}

.filters__end {
  grid-column: 11 / -1;
  grid-row: 1;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: var(--space-3);
  padding-bottom: var(--space-1);
}

/*
 * The line that names the next step, between the filters and the field they narrow. It reads as a
 * sentence with its action beside it, not as a banner: no fill, no border box, just the rule that
 * separates it from the table below.
 */
.lead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: var(--width-hair) solid var(--rule-hair);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.range-value {
  font-weight: var(--weight-semibold);
  color: var(--text);
}

/* ============================================================
   The table: inside a white card, a hairline between rows
   ============================================================ */

.field-scroll {
  overflow-x: auto;
  border: var(--width-hair) solid var(--rule-hair);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
}

.section .field-scroll {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.table th,
.table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: top;
  border: 0;
}

.table tbody td {
  border-top: var(--width-hair) solid var(--rule-hair);
}

.table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--surface-inset);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  white-space: nowrap;
}

.section .table thead th {
  background: var(--surface-card);
  padding-left: 0;
  border-bottom: var(--width-hair) solid var(--rule-hair);
}

.section .table td {
  padding-left: 0;
}

/* A change of kind inside the list: a sub-head, not a row. */
.table tbody tr.table__break td {
  padding-top: var(--space-5);
  padding-bottom: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
}

.table tbody tr.table__break:hover td {
  background: transparent;
}

.table tbody tr:hover td {
  background: var(--surface-row-hover);
}

.table tbody tr:has(.row-select:checked) td {
  background: var(--surface-row-marked);
}

.table tbody tr:has(.row-select:checked) td:first-child {
  box-shadow: inset 1px 0 0 var(--primary);
}

.table td.num,
.table th.num {
  text-align: right;
}

.table__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: inherit;
  text-decoration: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.table__sort:hover {
  color: var(--text);
}

.table th[aria-sort] .table__sort {
  color: var(--text);
}

.table__mark {
  font-size: 0.7em;
}

.table__name {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--text);
  text-decoration: none;
}

.table__name:hover {
  color: var(--primary-ink);
  text-decoration: none;
}

.table__sub {
  margin-top: 2px;
  font-size: var(--text-xs);
  color: var(--text-faint);
}

/*
 * Flags that used to hold a column of their own, now under the name they belong to. Only rows
 * that have something to say carry one, so the rhythm of the column stays intact.
 */
.table__flags {
  margin-top: var(--space-1);
}

.table__pick {
  width: 2rem;
  padding-right: var(--space-3);
}

.table__rank {
  width: 3rem;
  font-size: var(--text-base);
  color: var(--text-faint);
  text-align: right;
  padding-right: var(--space-5);
}

/* ============================================================
   The zone ramp
   ============================================================ */

.zone {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.zone__value {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  min-width: 1.6rem;
  text-align: right;
}

.zone__strip {
  display: flex;
  gap: 1px;
  flex: none;
}

.zone__cell {
  width: 4px;
  height: 14px;
  border-radius: 2px;
  background: var(--zone-0);
}

.zone[data-zone="1"] .zone__cell.is-on { background: var(--zone-1); }
.zone[data-zone="2"] .zone__cell.is-on { background: var(--zone-2); }
.zone[data-zone="3"] .zone__cell.is-on { background: var(--zone-3); }
.zone[data-zone="4"] .zone__cell.is-on { background: var(--zone-4); }
.zone[data-zone="5"] .zone__cell.is-on { background: var(--zone-5); }
.zone[data-zone="6"] .zone__cell.is-on { background: var(--zone-6); }
.zone[data-zone="7"] .zone__cell.is-on { background: var(--zone-7); }
.zone[data-zone="8"] .zone__cell.is-on { background: var(--zone-8); }
.zone[data-zone="9"] .zone__cell.is-on { background: var(--zone-9); }
.zone[data-zone="10"] .zone__cell.is-on { background: var(--zone-10); }

.zone--lg .zone__cell {
  width: 8px;
  height: 30px;
  border-radius: 3px;
}

.zone--lg .zone__value {
  font-size: var(--text-2xl);
  min-width: 2.6rem;
}

/* The ranking column on the worklist: the strip and its verdict, never wrapped. */
.table .table__score {
  width: 11rem;
  white-space: nowrap;
}

/* The verdict may take two lines when "voorlopig" joins it; the strip above it may not. */
.table .table__score .table__sub {
  white-space: normal;
}

/* ============================================================
   Flags: soft pills, state as a dot
   ============================================================ */

.flag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--surface-inset);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  white-space: nowrap;
}

/* Nothing is asked of the operator, so nothing is marked: plain faint text. */
.flag--quiet {
  padding: 0;
  background: none;
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--text-faint);
}

.flag--decision::before,
.flag--draft::before,
.flag--sent::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
}

/* This row needs a decision: amber. */
.flag--decision {
  background: var(--state-attention-wash);
  color: var(--state-attention-ink);
}

.flag--decision::before {
  background: var(--state-attention);
}

/* A concept still waiting: grey, with an open dot. */
.flag--draft {
  background: var(--surface-inset);
  color: var(--text-muted);
}

.flag--draft::before {
  box-shadow: inset 0 0 0 1.5px var(--grey-500);
}

/* A mail that actually went out: green. */
.flag--sent {
  background: var(--state-ok-wash);
  color: var(--state-ok-ink);
}

.flag--sent::before {
  background: var(--state-ok);
}

/* Already a customer. */
.flag--known {
  background: var(--state-known-wash);
  color: var(--state-known-ink);
}

/* A lone status dot, as in the corner of a card. */
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--state-idle);
  flex: none;
}

.dot--ok {
  background: var(--state-ok);
  box-shadow: 0 0 0 3px var(--state-ok-wash);
}

.dot--attention {
  background: var(--state-attention);
  box-shadow: 0 0 0 3px var(--state-attention-wash);
}

/* ============================================================
   List bar: the actions and the paging of a list, above it
   ============================================================ */

/*
 * A list's buttons never sit under the list. This bar goes directly above the table and stays at
 * the top of the screen while the rows scroll under it, so every button is in view without
 * scrolling. The selection and its action on the left, where in the list you are on the right.
 * It used to be two bars under the table, one of them only appearing after a box was ticked.
 */
.listbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  padding: var(--space-3) 0;
  background: var(--surface-desk);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.listbar__act,
.listbar__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

/* Nothing ticked reads as an instruction; something ticked reads as a count, in ink. */
.listbar__count {
  min-width: 11rem;
}

.listbar.is-selecting .listbar__count {
  font-weight: var(--weight-semibold);
  color: var(--text);
}

.listbar__note {
  font-size: var(--text-xs);
  color: var(--text-faint);
  max-width: 26rem;
}

/* ============================================================
   Notice: a soft tinted card
   ============================================================ */

.notice {
  padding: var(--space-4) var(--space-5);
  background: var(--surface-card);
  border: var(--width-hair) solid var(--rule-hair);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
  max-width: 46rem;
}

.notice--accent {
  background: var(--state-attention-wash);
  border-color: #f6dfb3;
}

.notice__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2);
}

.notice p {
  font-size: var(--text-sm);
  line-height: var(--leading-prose);
}

.notice p + p {
  margin-top: var(--space-2);
}

/* ============================================================
   Gauge
   ============================================================ */

.gauge {
  height: 8px;
  background: var(--grey-100);
  border-radius: var(--radius-pill);
  overflow: hidden;
  position: relative;
}

.gauge__fill {
  position: absolute;
  inset: 0;
  background: var(--primary);
  border-radius: inherit;
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease);
}

.gauge__ticks {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2);
  font-size: var(--text-2xs);
  color: var(--text-faint);
}

/* ============================================================
   Definition list
   ============================================================ */

.dl {
  display: grid;
  grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr);
  row-gap: var(--space-4);
  column-gap: var(--gutter);
  font-size: var(--text-base);
}

.dl > dt,
.dl > dd {
  padding: 0;
  margin: 0;
}

.dl > dt {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ============================================================
   Empty state
   ============================================================ */

.empty {
  padding: var(--space-9) var(--space-6);
  border: var(--width-hair) dashed var(--rule-mid);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  text-align: center;
}

.empty p {
  margin-inline: auto;
}

.empty__title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2);
}

.empty p {
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

/* ============================================================
   Register
   ============================================================ */

.register {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  border-bottom: var(--width-hair) solid var(--rule-hair);
  margin-bottom: var(--space-7);
}

.register__tab {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: 0 0 var(--space-3);
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--text-sm);
}

.register__tab:hover {
  color: var(--text);
  text-decoration: none;
  border-bottom-color: var(--rule-mid);
}

.register__tab[aria-current="true"] {
  color: var(--primary-ink);
  font-weight: var(--weight-semibold);
  border-bottom-color: var(--primary);
}

.register__count {
  font-size: var(--text-xs);
  color: var(--text-faint);
}

/* ============================================================
   Mail
   ============================================================ */

.letter {
  border: var(--width-hair) solid var(--rule-hair);
  border-radius: var(--radius);
  background: var(--surface-field);
  max-width: 44rem;
  overflow: hidden;
}

.letter__head {
  padding: var(--space-4) var(--space-5);
  background: var(--surface-inset);
  font-size: var(--text-sm);
}

.letter__body {
  padding: var(--space-6) var(--space-5);
  font-size: var(--text-md);
  line-height: var(--leading-prose);
  white-space: pre-wrap;
}

.letter__foot {
  padding: var(--space-4) var(--space-5);
  border-top: var(--width-hair) solid var(--rule-hair);
  font-size: var(--text-xs);
  color: var(--text-faint);
}

.impression {
  width: 100%;
  border-radius: var(--radius);
}

/*
 * A photo of the sign with what it is under it. A source photo has not been through OpenAI and has
 * a dashed frame; a generated one a solid frame. The flag in the caption says it in words, so the
 * frame is never the only difference. The whole photo is shown, never cropped.
 */
.photo {
  margin: 0;
}

.photo__zoom {
  display: block;
  cursor: zoom-in;
  line-height: 0;
}

.photo__img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.photo--full .photo__img {
  width: 100%;
}

.photo--thumb .photo__img {
  width: auto;
  max-height: 8rem;
}

.photo--source .photo__img {
  outline: var(--width-hair) dashed var(--rule-mid);
  outline-offset: 3px;
}

.photo--generated .photo__img {
  outline: var(--width-hair) solid var(--state-ok);
  outline-offset: 3px;
}

.photo__zoom:focus-visible .photo__img {
  outline-width: 2px;
}

.photo__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-3);
}

.photo__hint {
  font-size: var(--text-xs);
  color: var(--text-faint);
}

/* The source photo of a terrain, small in the band so the list under it stays in view. */
.band__photo {
  grid-column: 10 / -1;
  grid-row: 2;
  justify-self: end;
  margin-top: var(--space-4);
  text-align: right;
}

.band__photo .photo__caption {
  justify-content: flex-end;
}

.band__photo-missing {
  font-size: var(--text-sm);
  color: var(--state-attention-ink);
}

.band__photo-link {
  font-size: var(--text-sm);
}

/* A photo opened large on the page. Click anywhere or press Escape to close it. */
.lightbox {
  max-width: 96vw;
  max-height: 96vh;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-out;
}

.lightbox::backdrop {
  background: rgb(17 24 39 / 0.86);
}

.lightbox__img {
  display: block;
  max-width: 96vw;
  max-height: 86vh;
  width: auto;
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-overlay);
}

.lightbox__caption {
  margin-top: var(--space-3);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--white);
}

.plates {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.plate {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: var(--width-hair) solid var(--rule-mid);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  cursor: pointer;
}

.plate:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-wash);
  color: var(--primary-ink);
  font-weight: var(--weight-semibold);
}

/* ============================================================
   Match review, on the grid
   ============================================================ */

/*
 * The two addresses side by side, the decision on the right. It used to declare grid columns on
 * its children without ever becoming a grid, so everything stacked and the buttons ended up alone
 * at the far right of a row they did not belong to.
 */
.match {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-3);
  align-items: start;
  padding: var(--space-5) 0;
}

.match + .match {
  border-top: var(--width-hair) solid var(--rule-hair);
}

.match__side {
  grid-column: span 4;
  min-width: 0;
}

.match__name {
  font-weight: var(--weight-medium);
}

.match__where {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.match__do {
  grid-column: 9 / -1;
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  justify-content: flex-end;
}

.match__why {
  grid-column: 1 / 9;
  font-size: var(--text-xs);
  color: var(--text-faint);
  max-width: none;
}

/* ============================================================
   Dialog
   ============================================================ */

dialog {
  border: 0;
  border-radius: var(--radius-lg);
  padding: 0;
  background: var(--surface-field);
  color: var(--text);
  box-shadow: var(--shadow-overlay);
  max-width: 34rem;
  width: calc(100% - var(--space-8));
}

dialog::backdrop {
  background: rgb(17 24 39 / 0.32);
}

/* ---- The run dialog: a fetch you started, while it comes in ---- */

.dialog--run {
  max-width: 34rem;
}

.runcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: var(--width-hair) solid var(--rule-hair);
}

.runcard__name {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-display);
  line-height: 1.2;
}

.runcard__body {
  padding: var(--space-6);
}

/* Two by two. The page grid is twelve columns wide; a dialog is not, so the figures get their
   own two, and the span from `.figure` is dropped rather than fought with. */
.runcard__figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-6);
  margin-top: var(--space-7);
}

.runcard__figures .figure {
  grid-column: auto;
}

.runcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-top: var(--width-hair) solid var(--rule-hair);
}

/* ============================================================
   Entrance: the mark on the desk, the form on a white card
   ============================================================ */

.login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--surface-desk);
}

.login__panel {
  padding: var(--space-10) var(--space-9);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-9);
  border-right: var(--width-hair) solid var(--rule-hair);
  background: var(--surface-card);
}

.login__mark {
  margin: 0;
  line-height: 0;
  display: inline-block;
}

.login__mark img {
  display: block;
  width: 100%;
  max-width: 15rem;
  height: auto;
}

.login__rule {
  display: none;
}

.login__role {
  margin-top: var(--space-6);
  font-size: var(--text-lg);
  color: var(--text-muted);
  max-width: 24rem;
}

.login__meta {
  font-size: var(--text-xs);
  color: var(--text-faint);
}

.login__side {
  display: grid;
  place-items: center;
  padding: var(--space-9);
}

.login__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: 100%;
  max-width: 24rem;
  padding: var(--space-7);
  border: var(--width-hair) solid var(--rule-hair);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
}

/*
  The unsubscribe page stands on the same entrance as the login: it is the other screen somebody
  outside COS sees. Its side carries a heading and a sentence the login form has no use for.
*/
.login__title {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}

.login__text {
  font-size: var(--text-md);
  line-height: var(--leading-prose);
  color: var(--text-muted);
}

.login__text strong {
  color: var(--text);
  font-weight: var(--weight-semibold);
}

@media (max-width: 56rem) {
  .login {
    grid-template-columns: minmax(0, 1fr);
  }

  .login__panel {
    padding: var(--space-8) var(--space-6);
    gap: var(--space-6);
  }

  .login__side {
    padding: var(--space-7) var(--space-6);
  }
}

/* ============================================================
   htmx
   ============================================================ */

.htmx-indicator {
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease);
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

.htmx-request .field-scroll {
  opacity: 0.45;
  transition: opacity var(--dur-fast) var(--ease);
}

/* ============================================================
   Narrow screens: the grid folds, the type does not
   ============================================================ */

@media (max-width: 72rem) {
  :root {
    --cols: 6;
  }

  .col-8,
  .col-9 { grid-column: span 6; }

  .col-4,
  .col-5,
  .col-6 { grid-column: span 3; }

  .band__name,
  .band__where { grid-column: 1 / -1; }

  .band__actions {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-content: flex-start;
    margin-top: var(--space-4);
  }

  .tally {
    grid-row: 4;
  }

  .band__photo {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: start;
    text-align: left;
  }

  .band__photo .photo__caption {
    justify-content: flex-start;
  }

  .filters__search { grid-column: span 6; }

  .filters__end {
    grid-column: span 6;
    justify-content: flex-start;
  }

  .match__side { grid-column: span 3; }

  .match__do {
    grid-column: span 6;
    justify-content: flex-start;
  }

  .match__why { grid-column: span 6; }
}

@media (max-width: 56rem) {
  :root {
    --cols: 4;
    --page-pad: var(--space-5);
    --gutter: 1rem;
  }

  /* Four columns leave no sensible half, so a wrapping form goes one field to a row. */
  .grid--rows > .col-2,
  .grid--rows > .col-3,
  .grid--rows > .col-4,
  .grid--rows > .col-5,
  .grid--rows > .col-6 { grid-column: 1 / -1; }

  /* The side bar goes on top: the destinations in a row that scrolls sideways, no folders. */
  .sheet {
    grid-template-columns: minmax(0, 1fr);
  }

  .side {
    position: static;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--page-pad);
    border-right: 0;
    border-bottom: var(--width-hair) solid var(--rule-hair);
  }

  .side__nav {
    flex-direction: row;
    order: 3;
    width: 100%;
    overflow-x: auto;
  }

  .side__nav + .side__nav {
    order: 4;
  }

  .side__link {
    white-space: nowrap;
  }

  .side__folders {
    display: none;
  }

  .side__foot {
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
  }

  .side__user {
    display: none;
  }

  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .band__name,
  .band__where,
  .band__actions,
  .filters__search,
  .filters__end,
  .match__side,
  .match__do,
  .match__why,
  .col-4,
  .col-5,
  .col-6,
  .col-8,
  .col-9 {
    grid-column: 1 / -1;
  }

  .tally__item,
  .figure,
  .filters__pick {
    grid-column: span 2;
  }

  .band__name {
    font-size: var(--text-2xl);
  }

  .band__actions {
    justify-content: flex-start;
  }

  .table thead th {
    position: static;
  }
}

@media print {
  .side,
  .rail,
  .filters,
  .bulk,
  .pager {
    display: none;
  }

}

/* ============================================================
   Two carried over from the previous kit, rebuilt on the grid
   ============================================================ */

/* Screens that are not a terrain get a slightly smaller name. */
.band__name--plain {
  font-size: var(--text-xl);
}

/* The work-and-aside split, expressed in grid columns so it lines up with everything else. */
.split {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: start;
}

.split > *:first-child {
  grid-column: span 8;
  min-width: 0;
}

.split > *:last-child {
  grid-column: 9 / -1;
  min-width: 0;
}

@media (max-width: 72rem) {
  .split > *:first-child,
  .split > *:last-child {
    grid-column: 1 / -1;
  }

  .split > *:last-child {
    margin-top: var(--space-9);
  }
}

/*
 * On a wide screen the filter bar is two deliberate bands: the search across the first half of the
 * grid, and the refinements on the row beneath it, starting at column one so they line up with the
 * counts in the panel above. Auto-placement would otherwise tuck the first two refinements into
 * the space beside the search box and leave the rest below, which is the ragged edge that made the
 * whole bar read as unaligned.
 */
@media (min-width: 72.001rem) {
  .filters__pick {
    grid-row: 2;
  }
}

/* The body of a section: a plain block that must not shrink below its content in a grid cell. */
.section__body {
  min-width: 0;
}

/* ============================================================
   Te doen: one table per group, lined up as if it were one
   ============================================================ */

/* Fixed widths, so the counts and the buttons sit in the same place in every group. */
.tasks {
  table-layout: fixed;
}

.tasks th:nth-child(2),
.tasks td:nth-child(2) {
  width: 8rem;
}

.tasks th:last-child,
.tasks td:last-child {
  width: 12rem;
  padding-right: 0;
  text-align: right;
}

/* ============================================================
   Keys on the settings screen
   ============================================================ */

/* A paste field and its buttons on one line, so every key row reads the same way across. */
.keys__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.keys__form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.keys__form .input {
  width: 16rem;
}

/* The fingerprint is a code to compare, so it sits in figures that line up. */
.keys__print {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--text);
}

/* ============================================================
   Mailteksten
   ============================================================ */

/*
 * The fields a mail text can hold. Each one is a button that puts itself where the cursor is, so
 * nobody types {bedrjifsnaam}; what it stands for sits under it in the muted ink.
 */
.fieldlist {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.fieldlist li {
  display: grid;
  justify-items: start;
  gap: var(--space-1);
}

.fieldlist__token {
  padding: 1px var(--space-2);
  border: var(--width-hair) solid var(--rule-mid);
  border-radius: var(--radius);
  background: var(--surface-inset);
  color: var(--text);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.fieldlist__token:hover {
  border-color: var(--blue-200);
  background: var(--primary-wash);
  color: var(--primary-ink);
}

.fieldlist__token:active {
  background: var(--surface-nav-active);
}

.fieldlist__what {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* ---- A dialog that asks before something is replaced ----
   The head is the panel, like the run dialog: the same sign panel every screen opens with, lifted
   off the page. Only the question is in it; the choice and the buttons are on white. */

.dialog--choice {
  max-width: 30rem;
}

.dialog__head {
  padding: var(--space-5) var(--space-6) var(--space-4);
  border-bottom: var(--width-hair) solid var(--rule-hair);
}

.dialog__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.dialog__body {
  padding: var(--space-6);
}

.dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* ============================================================
   Lists as cards, buttons that filter, actions in a window
   ============================================================ */

/*
 * The way every list screen works since October 2026: the questions you open the list with are
 * buttons above it, each with its count; the rarer filters sit in a window behind "Filters"; each
 * row is a card that opens the thing it is about. Less on the screen at once, more one click away.
 */

.toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.toolbar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
}

/* ---- Buttons that filter, with their count ---- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.125rem;
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
  border: var(--width-hair) solid var(--rule-hair);
  border-radius: var(--radius);
  background: var(--surface-card);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  user-select: none;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.chip:hover {
  border-color: var(--rule-mid);
  text-decoration: none;
}

.chip__count {
  min-width: 1.75rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--surface-inset);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* The chosen one: light blue with blue ink. The radio inside is what the form sends. */
.chip--on,
.chip:has(input:checked) {
  border-color: var(--blue-200);
  background: var(--primary-wash);
  color: var(--primary-ink);
}

.chip--on .chip__count,
.chip:has(input:checked) .chip__count {
  background: var(--primary-wash-strong);
  color: var(--primary-ink);
}

/* The other chips lose the server's mark once a different radio is checked. */
.chips:has(input:checked) .chip--on:not(:has(input:checked)) {
  border-color: var(--rule-hair);
  background: var(--surface-card);
  color: var(--text);
}

.chips:has(input:checked) .chip--on:not(:has(input:checked)) .chip__count {
  background: var(--surface-inset);
  color: var(--text-muted);
}

.chip:has(input:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ---- Search with its icon inside ---- */

.searchbox {
  position: relative;
  flex: 1 1 22rem;
  max-width: 36rem;
}

.searchbox > .icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  pointer-events: none;
}

.searchbox__input {
  width: 100%;
  padding-left: calc(var(--space-3) * 2 + 1em);
}

.field--inline {
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
}

.field--inline .field__label {
  margin: 0;
}

/* ---- What is set in the Filters window, each with a cross ---- */

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--primary-wash);
  color: var(--primary-ink);
  font-size: var(--text-sm);
  text-decoration: none;
}

.pill:hover {
  background: var(--primary-wash-strong);
  text-decoration: none;
}

.pill .icon {
  width: 0.75em;
  height: 0.75em;
}

.listbar__all {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text);
  cursor: pointer;
}

/* ---- One card per row ---- */

.entries {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.entry {
  position: relative;
  display: grid;
  grid-template-columns: auto 6.5rem minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: var(--width-hair) solid var(--rule-hair);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-base) var(--ease);
}

.entry:hover {
  border-color: var(--rule-mid);
  box-shadow: var(--shadow-card-hover);
}

.entry:has(.row-select:checked) {
  border-color: var(--blue-200);
  background: var(--surface-row-marked);
}

/* The name's link covers the whole card; the selection box stays on top of it. */
.entry__link {
  color: inherit;
  text-decoration: none;
}

.entry__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.entry__link:focus-visible {
  outline: none;
}

.entry:has(.entry__link:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.entry__pick {
  position: relative;
  z-index: 1;
}

.entry__score {
  align-self: center;
}

.entry__verdict {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-faint);
}

.entry__main {
  min-width: 0;
}

.entry__name {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
}

.entry__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.entry__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.entry__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.entry__go {
  color: var(--text-faint);
}

.entry:hover .entry__go {
  color: var(--primary);
}

.fact {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.fact > .icon {
  color: var(--text-faint);
}

.fact__label {
  color: var(--text-faint);
}

.fact strong {
  color: var(--text);
  font-weight: var(--weight-semibold);
}

.tag {
  display: inline-block;
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface-inset);
  color: var(--text-muted);
  font-weight: var(--weight-medium);
  font-size: var(--text-xs);
}

@media (max-width: 56rem) {
  .entry {
    grid-template-columns: auto minmax(0, 1fr) auto;
    row-gap: var(--space-3);
  }

  .entry__score {
    grid-column: 2;
    grid-row: 2;
  }

  .entry__main {
    grid-column: 2;
    grid-row: 1;
  }
}

/* ---- The window: a white head with a close button ---- */

.dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.dialog__sub {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.dialog__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.dialog__close:hover {
  background: var(--surface-inset);
  color: var(--text);
}

/* A band without a row of counts: name, a line under it, actions and the photo. */
.band--compact {
  grid-template-rows: auto auto;
}

.band--compact .band__photo {
  grid-row: 1 / span 2;
  grid-column: 11 / -1;
  margin-top: 0;
  align-self: start;
}

.band--compact .band__name {
  grid-column: 1 / 6;
  grid-row: 1;
}

.band--compact .band__where {
  grid-column: 1 / 9;
  grid-row: 2;
}

.band--compact .band__actions {
  grid-column: 6 / -1;
  grid-row: 1;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* With a photo in the band the actions make room for it. */
.band--compact:has(.band__photo) .band__actions {
  grid-column: 6 / 11;
}

.band .photo--thumb .photo__img {
  max-height: 4.5rem;
  border-radius: var(--radius);
}

@media (max-width: 72rem) {
  .band--compact .band__name,
  .band--compact .band__where {
    grid-column: 1 / -1;
  }

  .band--compact .band__actions,
  .band--compact:has(.band__photo) .band__actions,
  .band--compact .band__photo {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-content: flex-start;
    justify-self: start;
    text-align: left;
    margin-top: var(--space-4);
  }
}

/* ---- Business parks from the IBIS register, on "Terrein toevoegen" ---- */

.ibis {
  display: none;
}

/* Shown only while "Bedrijventerrein" is the chosen kind of search. */
form:has(#queryType option[value="BUSINESS_PARK"]:checked) .ibis {
  display: block;
}

.ibis .searchbox {
  max-width: none;
}

.ibis__results {
  margin-top: var(--space-3);
}

.ibis__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 22rem;
  overflow-y: auto;
}

.ibis__pick {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: var(--width-hair) solid var(--rule-hair);
  border-radius: var(--radius-lg);
  background: var(--surface-field);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.ibis__pick:hover {
  border-color: var(--rule-mid);
}

.ibis__pick.is-picked {
  border-color: var(--blue-200);
  background: var(--surface-row-marked);
}

.ibis__name {
  font-weight: var(--weight-semibold);
}

.ibis__where {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ---- Tiles: one per thing that asks for action (Te doen) ---- */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-7);
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border: var(--width-hair) solid var(--rule-hair);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-base) var(--ease);
}

.tile:hover {
  border-color: var(--rule-mid);
  box-shadow: var(--shadow-card-hover);
}

.tile__group {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
}

.tile__group::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--state-idle);
}

.tile--decide .tile__group::before {
  background: var(--state-attention);
  box-shadow: 0 0 0 3px var(--state-attention-wash);
}

.tile--approach .tile__group::before {
  background: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-wash);
}

.tile__count {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.tile__title {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

.tile__link {
  color: inherit;
  text-decoration: none;
}

.tile__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.tile:has(.tile__link:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.tile__detail {
  margin: 0;
  flex: 1;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.tile__action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--primary-ink);
}

/* ---- Two panels side by side, each a short list of lines ---- */

.panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: var(--space-5);
}

.panel {
  margin: 0;
  padding: var(--space-5);
  border: var(--width-hair) solid var(--rule-hair);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}

.lines {
  list-style: none;
  margin: 0;
  padding: 0;
}

.line {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: var(--width-hair) solid var(--rule-hair);
}

.line:first-child {
  border-top: 0;
}

.line__main {
  flex: 1;
  min-width: 0;
}

.line__link {
  font-weight: var(--weight-semibold);
  color: var(--text);
  text-decoration: none;
}

.line__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.line__sub {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.line__go {
  color: var(--text-faint);
}

.line:hover .line__go {
  color: var(--primary);
}

.line:hover .line__link {
  color: var(--primary-ink);
}

/*
 * ---- A row of figures ----
 * Plain white cards. Colour only on a figure you can click to do something about it, such as
 * addresses waiting to be judged: then the card is a link and the yellow edge says so. A coloured
 * edge on every figure read as buttons that did nothing.
 */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.stat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: var(--width-hair) solid var(--rule-hair);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}

a.stat {
  color: inherit;
  text-decoration: none;
}

.stat__value {
  order: -1;
}

/* A figure that leads to work: amber dot beside the label, the action in blue under it. */
.stat--accent .stat__label::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: var(--space-2);
  border-radius: 50%;
  background: var(--state-attention);
  box-shadow: 0 0 0 3px var(--state-attention-wash);
  vertical-align: 0.05em;
}

a.stat:hover {
  border-color: var(--rule-mid);
  box-shadow: var(--shadow-card-hover);
  text-decoration: none;
}

.stat__action {
  display: inline-block;
  margin-left: auto;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--primary-ink);
}

.stat__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
}

.stat__value {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

/* ---- A terrain card: its photo on the left ---- */

.entry--terrain {
  grid-template-columns: 9rem minmax(0, 1fr) auto;
}

.entry__thumb {
  width: 9rem;
  height: 6rem;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-inset);
  display: flex;
  align-items: center;
  justify-content: center;
}

.entry__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.entry__thumb-empty {
  font-size: var(--text-xs);
  color: var(--text-faint);
}

@media (max-width: 56rem) {
  .entry--terrain {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .entry--terrain .entry__thumb {
    display: none;
  }

  .entry--terrain .entry__main {
    grid-column: 1;
  }
}

/* ---- Chips as links, for a list filtered on the server ---- */

.chips--nav {
  margin-bottom: var(--space-5);
}

a.chip {
  text-decoration: none;
}

/* ---- A card without a score column ---- */

.entry--plain {
  grid-template-columns: minmax(0, 1fr) auto;
}

.entry__note {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Every section is a white card on the desk. */
.section {
  margin-bottom: var(--space-5);
  padding: var(--space-5) var(--space-6);
  border: var(--width-hair) solid var(--rule-hair);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}

.section__head {
  margin-bottom: var(--space-4);
}

/* A section that is only a frame around a list of cards stays open. */
.section--open {
  padding: 0;
  border: 0;
  background: transparent;
}

.tile,
.stat,
.panel,
.section:not(.section--open) {
  box-shadow: var(--shadow-card);
}

/* A figure that is a word, not a number: a size smaller so it fits the card. */
.stat__value--text {
  font-size: var(--text-base);
}

.icon--flip {
  transform: scaleX(-1);
}

/* One figure on its own stays the size of one, instead of a bar across the page. */
.stats:has(> .stat:only-child) {
  grid-template-columns: minmax(11rem, 20rem);
}

.searchbox--narrow {
  flex: 0 1 16rem;
}

.tag + .tag {
  margin-left: var(--space-1);
}

/*
 * ---- "Terrein toevoegen": a window with three steps ----
 * Numbered, because they are done in that order: where to look, what to call it, count and fetch.
 * The window is wider than a question, so the kind of search and the area sit side by side.
 */
.dialog--form {
  max-width: 46rem;
}

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.step {
  position: relative;
  padding-left: 2.75rem;
  counter-increment: step;
}

.step + .step {
  padding-top: var(--space-5);
  border-top: var(--width-hair) solid var(--rule-hair);
}

.step::before {
  content: counter(step);
  position: absolute;
  left: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--primary-wash);
  color: var(--primary-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.step__title {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: 1.75rem;
}

.step__lead {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.step__pair {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: var(--space-4);
}

@media (max-width: 40rem) {
  .step__pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

.step .ibis {
  margin-top: 0;
}

.step .ibis__list {
  max-height: 14rem;
}

.input--short {
  max-width: 10rem;
}

.dialog__sub-link {
  color: inherit;
}

/* The count: three small figures in a row, then the buttons of the window. */
.estimate__figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-4);
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius);
  background: var(--surface-desk);
}

.estimate__figure dt {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
}

.estimate__figure dd {
  margin: var(--space-1) 0 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.estimate__figure .estimate__note {
  margin-top: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  color: var(--text-muted);
}

.estimate .notice {
  margin-bottom: var(--space-4);
}

.estimate .dialog__actions {
  margin-top: var(--space-4);
}

/*
 * The area field says what it takes for the kind of search chosen: a town hint normally, how to
 * pick a park while it searches the IBIS register.
 */
.hint--park {
  display: none;
}

form:has(#queryType option[value="BUSINESS_PARK"]:checked) .hint--park {
  display: block;
}

form:has(#queryType option[value="BUSINESS_PARK"]:checked) .hint--town {
  display: none;
}

.step .ibis__results:empty {
  display: none;
}

/*
 * ---- The AI is working ----
 * A turning wheel beside what it is doing. No progress bar: OpenAI reports no progress, so a bar
 * would only pretend. With reduced motion the wheel turns slowly instead of not at all, because
 * here the movement is the message.
 */
.spinner {
  display: inline-block;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border: 3px solid var(--rule-hair);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.spinner--sm {
  width: 0.95rem;
  height: 0.95rem;
  border-width: 2px;
  vertical-align: -0.15em;
  margin-right: var(--space-2);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation-duration: 2.4s;
  }
}

.busy {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.busy > .spinner {
  margin-top: 2px;
}

.busy[hidden] {
  display: none;
}

.busy--box {
  padding: var(--space-4) var(--space-5);
  border: var(--width-hair) solid var(--blue-200);
  border-radius: var(--radius-lg);
  background: var(--primary-wash);
}

.busy__title {
  font-weight: var(--weight-semibold);
}

.busy__note {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/*
 * ---- What an action came to: a small white card at the foot of the screen ----
 * A green dot for something done; "Let op" has an amber dot and waits until it is closed. It rises
 * into view once, as the answer to what was just done; with reduced motion it is simply there.
 */
.toasts {
  position: fixed;
  left: 50%;
  bottom: var(--space-6);
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: min(30rem, calc(100% - 2rem));
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border: var(--width-hair) solid var(--rule-hair);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  color: var(--text);
  box-shadow: var(--shadow-overlay);
  animation: toast-in 240ms var(--ease);
}

.toast::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--state-ok);
  box-shadow: 0 0 0 3px var(--state-ok-wash);
}

.toast--warning::before {
  background: var(--state-attention);
  box-shadow: 0 0 0 3px var(--state-attention-wash);
}

.toast[hidden] {
  display: none;
}

.toast.is-leaving {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 200ms ease-in, transform 200ms ease-in;
}

.toast__body {
  flex: 1;
  min-width: 0;
}

.toast__text {
  margin: 0;
  font-size: var(--text-base);
  color: var(--text);
}

.toast__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
}

.toast__close:hover {
  background: var(--surface-inset);
  color: var(--text);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    animation: none;
  }

  .toast.is-leaving {
    transition: none;
  }
}

/* ============================================================
   Workspace: a folder card on the left, the list on the right
   ============================================================ */

/*
 * The questions a list is opened with (alle, te benaderen, concept, ...) stand in a card on the
 * left like folders, each with its count right-aligned. The search, the bar and the list take the
 * rest. On the terrain page the form itself is dissolved into this grid, so the folders stay
 * radio buttons in the same form as the search.
 */
.workspace {
  display: grid;
  grid-template-columns: var(--aside-width) minmax(0, 1fr);
  column-gap: var(--space-6);
  align-items: start;
}

.workspace__form {
  display: contents;
}

.workspace__main,
.workspace > .toolbar__row,
.workspace__form > .toolbar__row,
.workspace > #results {
  grid-column: 2;
  min-width: 0;
}

.workspace__form > .toolbar__row {
  margin-bottom: var(--space-2);
}

.folders {
  grid-column: 1;
  grid-row: 1 / span 4;
  position: sticky;
  top: var(--space-5);
  padding: var(--space-4) var(--space-3);
  border: var(--width-hair) solid var(--rule-hair);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
}

.folders__title {
  padding: 0 var(--space-2) var(--space-3);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-faint);
}

.folders .chips {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 2px;
  margin: 0;
}

.folders .chip {
  width: 100%;
  min-height: 2.25rem;
  padding: var(--space-2);
  border-color: transparent;
  background: transparent;
  color: var(--text);
}

.folders .chip > .icon {
  color: var(--text-faint);
}

.folders .chip__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.folders .chip__count {
  min-width: 0;
  padding: 0;
  background: none;
  color: var(--text-faint);
  font-size: var(--text-sm);
  text-align: right;
}

.folders .chip:hover {
  background: var(--surface-inset);
  border-color: transparent;
}

.folders .chip--on,
.folders .chip:has(input:checked) {
  background: var(--primary-wash);
  border-color: transparent;
  color: var(--primary-ink);
  font-weight: var(--weight-semibold);
}

.folders .chip--on > .icon,
.folders .chip:has(input:checked) > .icon,
.folders .chip--on .chip__count,
.folders .chip:has(input:checked) .chip__count {
  background: none;
  color: var(--primary-ink);
}

.folders .chips:has(input:checked) .chip--on:not(:has(input:checked)) {
  background: transparent;
  border-color: transparent;
}

.folders .chips:has(input:checked) .chip--on:not(:has(input:checked)) > .icon {
  color: var(--text-faint);
}

/* The search and its controls as one white bar. */
.searchbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: var(--width-hair) solid var(--rule-hair);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
}

.searchbar .searchbox {
  max-width: none;
}

@media (max-width: 64rem) {
  .workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .workspace__main,
  .workspace > .toolbar__row,
  .workspace__form > .toolbar__row,
  .workspace > #results,
  .folders {
    grid-column: 1;
    grid-row: auto;
  }

  .folders {
    position: static;
    margin-bottom: var(--space-4);
    padding: var(--space-2);
  }

  .folders__title {
    display: none;
  }

  .folders .chips {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .folders .chip {
    width: auto;
  }

  .folders .chip__count {
    margin-left: var(--space-1);
  }
}

/* ============================================================
   Terrains as a grid of cards, the photo on top
   ============================================================ */

.entries--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: var(--space-5);
}

.entries--grid .entry--terrain {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-items: stretch;
  row-gap: var(--space-4);
  padding: var(--space-3) var(--space-3) var(--space-5);
}

.entries--grid .entry__thumb {
  width: 100%;
  height: 10rem;
  border-radius: var(--radius);
}

.entries--grid .entry__main {
  display: flex;
  flex-direction: column;
  padding: 0 var(--space-2);
}

.entries--grid .entry__head {
  justify-content: space-between;
  align-items: flex-start;
}

.entries--grid .entry__name {
  font-size: var(--text-lg);
}

.entries--grid .entry__facts {
  margin-top: var(--space-2);
}

/* The four counts sit at the foot of every card, at the same height across a row of cards. */
.entries--grid .entry__facts + .entry__facts {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: var(--width-hair) solid var(--rule-hair);
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: var(--space-3);
}

.entries--grid .entry__head + .entry__facts {
  margin-bottom: var(--space-4);
}

.entries--grid .entry__facts + .entry__facts .fact__label {
  white-space: nowrap;
}

.entries--grid .entry__facts + .entry__facts .fact {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  font-size: var(--text-xs);
}

.entries--grid .entry__facts + .entry__facts .fact strong {
  font-size: var(--text-lg);
}

.entries--grid .entry__go {
  display: none;
}

@media (max-width: 56rem) {
  .entries--grid .entry--terrain .entry__thumb {
    display: flex;
  }
}

/* The title's icon, in the blue, as in the head of the screen. */
.band__icon {
  display: inline-grid;
  place-items: center;
  width: 1.875rem;
  height: 1.875rem;
  margin-right: var(--space-3);
  border-radius: var(--radius);
  background: var(--primary-wash);
  color: var(--primary);
  vertical-align: -0.3rem;
}

.band__icon .icon {
  width: 1.0625rem;
  height: 1.0625rem;
}

/* ============================================================
   A list as a table: one line per company
   ============================================================ */

.table--list {
  font-size: var(--text-sm);
}

.table--list th,
.table--list td {
  padding: 0.4375rem var(--space-3);
  vertical-align: middle;
  white-space: nowrap;
}

.table--list tbody tr {
  position: relative;
}

.table--list .table__pick {
  width: 2.5rem;
  padding-left: var(--space-4);
  padding-right: 0;
}

.table--list .table__who {
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table--list .table__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.table--list .table__where,
.table--list .table__mail {
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-muted);
}

.table--list .table__score {
  width: 7rem;
}

.table--list .table__state {
  min-width: 8rem;
}

.table--list .zone {
  gap: var(--space-2);
}

.table--list .zone__value {
  font-size: var(--text-sm);
  min-width: 1.4rem;
}

.table--list .zone__cell {
  height: 12px;
}

.table--list .tag {
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.table--list .table__state {
  white-space: normal;
}

.table--list .table__state .flag + .flag {
  margin-left: var(--space-1);
}

.table--list .flag {
  padding-top: 0;
  padding-bottom: 0;
}

.table--list .table__go {
  width: 2rem;
  color: var(--text-faint);
}

.table--list tbody tr:hover .table__go {
  color: var(--primary);
}

/* ============================================================
   The terrain page (10 November 2026, proposal "Tabbladen")
   A head with real buttons, then one white card that holds the tabs, the filters, the list bar
   and the table. The counts live on the tabs, once.
   ============================================================ */

/* A button with a border on white: the everyday action, clearly a button, never the accent. */
.btn--line {
  background: var(--surface-card);
  border-color: var(--rule-hair);
  box-shadow: 0 1px 2px rgb(17 24 39 / 0.05);
}

.btn--line:hover {
  background: var(--surface-card);
  border-color: var(--rule-mid);
}

.btn--line.btn--accent {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--text-on-primary);
}

.btn--icon {
  width: 2.375rem;
  padding: 0;
}

.btn--xs {
  min-height: 1.75rem;
  padding: 0 var(--space-2);
  gap: var(--space-1);
  font-size: var(--text-xs);
}

.btn:focus-visible,
.tab:focus-visible,
.menu__item:focus-visible {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-offset);
}

/* ---- Head ---- */

.areahead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: start;
  gap: var(--space-2) var(--space-5);
  margin-bottom: var(--space-5);
}

.areahead__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  line-height: var(--leading-tight);
  color: var(--text-strong);
  text-wrap: balance;
}

.areahead__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.areahead__busy {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--primary-ink);
}

.areahead__note {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
  max-width: 70ch;
}

.areahead__note--attention {
  color: var(--state-attention-ink);
}

.areahead__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2);
}

.areahead__photo .photo--thumb .photo__img {
  max-height: 4.25rem;
  border-radius: var(--radius);
}

.areahead__photo .photo__hint {
  display: none;
}

.areahead__photo--missing {
  display: grid;
  justify-items: start;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--primary-ink);
}

/* ---- "Meer": a native disclosure with a small floating list ---- */

.menu {
  position: relative;
}

.menu > summary {
  list-style: none;
}

.menu > summary::-webkit-details-marker {
  display: none;
}

.menu[open] > summary {
  border-color: var(--rule-mid);
  background: var(--surface-inset);
}

.menu__list {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-1));
  z-index: 40;
  display: grid;
  min-width: 13rem;
  padding: var(--space-1);
  background: var(--surface-card);
  border: var(--width-hair) solid var(--rule-hair);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 28px rgb(17 24 39 / 0.12), 0 2px 6px rgb(17 24 39 / 0.06);
}

.menu__list form {
  display: contents;
}

.menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text);
  font: inherit;
  font-size: var(--text-base);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.menu__item .icon {
  color: var(--text-muted);
}

.menu__item:hover {
  background: var(--surface-inset);
  text-decoration: none;
}

.menu__item[disabled] {
  color: var(--text-faint);
  cursor: not-allowed;
}

/* ---- The card that holds the list ---- */

.worklist {
  background: var(--surface-card);
  border: var(--width-hair) solid var(--rule-hair);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.tabs {
  display: flex;
  align-items: stretch;
  gap: var(--space-1);
  padding: 0 var(--space-3);
  border-bottom: var(--width-hair) solid var(--rule-hair);
  overflow-x: auto;
  scrollbar-width: thin;
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-2) calc(var(--space-3) - 2px);
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.tab:hover {
  color: var(--text);
  text-decoration: none;
}

.tab[aria-current="page"] {
  color: var(--primary-ink);
  border-bottom-color: var(--primary);
}

.tab[aria-current="page"] .chip__count {
  background: var(--primary-wash);
  color: var(--primary-ink);
}

.tab__dot {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--state-attention);
}

.tabs__rule {
  flex: none;
  width: var(--width-hair);
  margin: var(--space-3) var(--space-2);
  background: var(--rule-hair);
}

.worklist__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
}

.worklist__tools .searchbox {
  flex: 1 1 14rem;
  max-width: 26rem;
}

.btn[hidden] {
  display: none;
}

.worklist__sort {
  margin-left: auto;
  color: var(--text-muted);
}

/* "Bijwerken..." shows over the corner of the bar while htmx loads; it takes no room of its own. */
.worklist__tools {
  position: relative;
}

.worklist__tools .htmx-indicator {
  position: absolute;
  right: var(--space-4);
  bottom: calc(var(--space-1) * -1);
}

/* A filter as a small rounded drop-down: dashed and grey while off, blue once a value is set. */
.pick {
  position: relative;
  display: inline-flex;
}

.pick__select {
  appearance: none;
  max-width: 13rem;
  min-height: 2.125rem;
  padding: 0 calc(var(--space-3) + 1rem) 0 var(--space-3);
  border: var(--width-hair) dashed var(--rule-mid);
  border-radius: 999px;
  background: var(--surface-card)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235b6370' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 6.5 8 10l3.5-3.5'/%3E%3C/svg%3E")
    no-repeat right var(--space-2) center / 0.875rem;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-overflow: ellipsis;
  cursor: pointer;
}

.pick__select:hover {
  border-color: var(--text-faint);
}

.pick__select:focus-visible {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-offset);
}

.pick__select:not(:has(option[value=""]:checked)) {
  border-style: solid;
  border-color: var(--blue-200);
  background-color: var(--primary-wash);
  color: var(--primary-ink);
}

.pick--unknown {
  align-items: center;
  min-height: 2.125rem;
  padding: 0 var(--space-3);
  border-radius: 999px;
  background: var(--state-attention-wash);
  color: var(--state-attention-ink);
  font-size: var(--text-sm);
}

.worklist__lead {
  margin: 0 var(--space-4) var(--space-3);
}

.worklist .empty {
  margin: 0 var(--space-4) var(--space-4);
}

/* The list bar inside the card: a band on the card, sticking to the top while the rows scroll. */
.worklist .listbar {
  padding: var(--space-2) var(--space-4);
  border-top: var(--width-hair) solid var(--rule-hair);
  background: var(--grey-25);
}

.listbar__quick {
  display: inline-flex;
  gap: var(--space-1);
}

.worklist .listbar__count {
  min-width: 0;
}

.worklist .field-scroll {
  border-top: var(--width-hair) solid var(--rule-hair);
}

.worklist .table--list {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.table--list .table__source {
  margin-left: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-faint);
}

.table--list .table__act {
  width: 6.5rem;
  padding-right: var(--space-4);
  text-align: right;
}

/* The row's own button shows where the pointer or the keyboard is; its space is always kept. */
.table--list .table__act .btn {
  visibility: hidden;
}

.table--list tbody tr:hover .table__act .btn,
.table--list tbody tr:focus-within .table__act .btn {
  visibility: visible;
}

.table--list .table__open {
  display: inline-flex;
  padding: var(--space-1);
  color: var(--text-faint);
}

.table--list tbody tr:hover .table__open {
  color: var(--primary);
}

@media (max-width: 72rem) {
  .areahead {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .areahead__actions {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
  }

  .worklist__sort {
    margin-left: 0;
  }
}

@media (hover: none) {
  .table--list .table__act .btn {
    visibility: visible;
  }
}

/* Removing something that cannot be undone: red, and only in the menu and its window. */
.menu__rule {
  margin: var(--space-1) 0;
  border: 0;
  border-top: var(--width-hair) solid var(--rule-hair);
}

.menu__item--danger,
.menu__item--danger .icon {
  color: var(--danger);
}

.menu__item--danger:hover {
  background: var(--danger-wash);
}

.btn--danger {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--white);
  font-weight: var(--weight-semibold);
}

.btn--danger:hover {
  background: #b91c1c;
  border-color: #b91c1c;
}

/* ---- Mailing as a table (10 November 2026), in the same card as a terrain ---- */

/* A slim line for a mode that holds for the whole screen, such as Proefmodus. */
.banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  background: var(--state-attention-wash);
  color: var(--state-attention-ink);
  font-size: var(--text-sm);
}

.mailing__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
}

.worklist .worklist__empty {
  margin: var(--space-4);
}

.table--list .table__when {
  color: var(--text-muted);
}

.table--list .table__when .faint {
  margin-left: var(--space-1);
}

.table--list .table__who .table__sub {
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-xs);
  color: var(--state-attention-ink);
}

.table--list .row-select:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ---- One kind of tab (10 November 2026) ----
   Switching between views is an underlined tab everywhere. The second row on Koppelingen and
   AI-modellen is the same underline, a step smaller; round chips are only for filters. */
.chips.subtabs {
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  border-bottom: var(--width-hair) solid var(--rule-hair);
}

.subtabs .chip {
  min-height: 0;
  padding: var(--space-2) var(--space-1);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
  background: none;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.subtabs .chip:hover {
  background: none;
  color: var(--text);
}

.subtabs .chip--on,
.subtabs .chip[aria-current] {
  border-color: var(--primary);
  background: none;
  color: var(--primary-ink);
}