/* Cifer styles */

/* Fonts: self-hosted (no third-party font CDN). SIL Open Font License, see fonts/OFL-*.txt */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/HankenGrotesk-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/HankenGrotesk-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/HankenGrotesk-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Surfaces */
  --bg-app: #f3f2ee;
  --bg-card: #ffffff;
  --bg-subtle: #f3f2ee;
  --bg-strip: #f3f2ee;
  --bg-hover: #f3f2ee;

  /* Text */
  --text-main: #15201b;
  --text-soft: #3c4742;
  --text-muted: #5a6660;
  --text-white: #ffffff;

  /* Lines */
  --border-subtle: #c9c4b6;
  --border-strong: #c9c4b6;
  --border-chart: #c9c4b6;

  /* Brand: green */
  --brand: #1f4d3a;
  --brand-hover: #17433a;
  --brand-tint: #f3f2ee;
  --brand-accent: #8fb3a3;

  /* In / out: ink and grey (never green or red for direction) */
  --up: #15201b;
  --up-bar: #15201b;
  --up-tint: #f3f2ee;
  --up-label: #15201b;
  --down: #5a6660;
  --down-bar: #5a6660;
  --down-tint: #f3f2ee;
  --down-label: #5a6660;
  --neutral-bar: #c9c4b6;

  /* Good news, bad news, look here: on the key-figure cards, always with an arrow or a word next to the colour */
  --good: #2f7a4f;
  --bad: var(--danger);
  --attention: #a15c00;

  /* Cash flows on the cash page: receipts in green (dark to light), payments in ink and greys (spec §5) */
  --in-1: #2a6a4f;
  --in-2: #9cc3b0;

  /* Chart series: ink and grey steps */
  --series-1: #15201b;
  --series-2: #5a6660;
  --series-3: #3c4742;
  --series-4: #8a938e;
  --series-5: #6b7570;
  --series-6: #b5bbb7;
  --series-prior: #8a938e;
  --series-other: #c9c4b6;

  /* Payment profile bars (Bouwstenen): the six spans of days after the invoice date, fast to slow; each has the colour of its
     segment and the ink of the figure on it */
  --bucket-1: #15201b;
  --bucket-1-ink: #ffffff;
  --bucket-2: #3c4742;
  --bucket-2-ink: #ffffff;
  --bucket-3: #5a6660;
  --bucket-3-ink: #ffffff;
  --bucket-4: #8a938e;
  --bucket-4-ink: #15201b;
  --bucket-5: #b5bbb7;
  --bucket-5-ink: #15201b;
  --bucket-6: #c9c4b6;
  --bucket-6-ink: #15201b;

  /* States */
  --ok: #1f4d3a;
  --ok-ring: #f3f2ee;
  --danger: #9a3b1b;
  --danger-tint: #f2e3da;
  --danger-border: #f2e3da;
  --warning-tint: #f2e3da;
  --warning-border: #9a3b1b;
  --warning-text: #9a3b1b;
  --signaal: #9a3b1b;
  --signaal-tint: #f2e3da;

  /* Code (DAX) */
  --code-bg: #15201b;
  --code-border: #3c4742;
  --code-text: #f3f2ee;
  --code-muted: #8fb3a3;

  --font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-lg: 4px;

  --content-width: 880px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family);
  background-color: var(--bg-app);
  color: var(--text-main);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 1;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.app-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  width: 100%;
}

/* ---------- Header ---------- */
/* The header stays at the top: the pages scroll inside the layout (body and layout are one screen high), sticky keeps it there
   too when something above them ever scrolls */
.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 68px;
  flex-shrink: 0;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background-color: var(--bg-card);
  border-bottom: 1px solid var(--border-subtle);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-width: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
}

.brand-logo {
  display: block;
  height: 28px;
  width: auto;
  flex-shrink: 0;
}

.header-divider {
  width: 1px;
  height: 24px;
  background: var(--border-subtle);
  flex-shrink: 0;
}

.tenant-dropdown {
  height: 40px;
  min-width: 0;
  max-width: 320px;
  padding: 0 2.25rem 0 0.875rem;
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
  background-color: var(--bg-subtle);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235a6660' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  appearance: none;
  -webkit-appearance: none;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-main);
  text-overflow: ellipsis;
  cursor: pointer;
  transition: border-color 0.15s;
}

.tenant-dropdown:hover {
  border-color: var(--border-strong);
}

/* "Afgesloten t/m sep 2026": a text button to Instellingen > Algemeen */
.closing-label {
  margin: 0 0 0 0.75rem;
  padding: 0.25rem 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.8rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  cursor: pointer;
}

.closing-label:hover {
  color: var(--brand);
  text-decoration: underline;
}

.closing-label[hidden] {
  display: none;
}

/* Administraties: the choice of Exact divisions, a small button like the closing label, with a panel of checkboxes */
.admin-choice-wrap {
  position: relative;
  display: flex;
  min-width: 0;
  flex: 0 1 auto;
}

.admin-choice-wrap[hidden] {
  display: none;
}

.admin-choice {
  display: block;
  flex: 0 1 auto;
  max-width: 100%;
  margin: 0;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: none;
  font: inherit;
  font-size: 0.8rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 2.5rem;
  cursor: pointer;
}

.admin-choice:hover,
.admin-choice[aria-expanded="true"] {
  color: var(--brand);
  border-color: var(--brand);
}

.admin-choice[hidden] {
  display: none;
}

.admin-choice-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  min-width: 220px;
  max-width: min(320px, 90vw);
  max-height: 60vh;
  overflow-y: auto;
  padding: 0.5rem;
  border-radius: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
}

.admin-choice-panel[hidden] {
  display: none;
}

.admin-choice-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.25rem;
  font-size: 0.85rem;
  cursor: pointer;
}

.admin-choice-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.closing-dropdown {
  font: inherit;
  font-size: 0.85rem;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  background: transparent;
  color: inherit;
  min-width: 0;
  max-width: 200px;
}

.answer-chip[data-kind="open"] {
  border-color: var(--warning-border);
  background-color: var(--warning-tint);
  color: var(--warning-text);
}

.answer-chip[data-kind="verified"] {
  border-color: var(--ok);
  background-color: var(--ok-ring);
  color: var(--text-main);
}

.header-right {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Status chip: opens the model panel */
.status-indicator {
  height: 40px;
  padding: 0 0.75rem 0 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  color: var(--text-main);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s;
}

.status-indicator:hover,
.status-indicator[aria-expanded="true"] {
  background: var(--bg-hover);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: var(--ok);
}

.status-chevron {
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 0.15s;
}

.status-indicator[aria-expanded="true"] .status-chevron {
  transform: rotate(180deg);
}

.status-indicator[data-state="checking"] .status-dot {
  background-color: var(--neutral-bar);
  animation: pulse 1.2s ease-in-out infinite;
}

.status-indicator[data-state="error"] {
  border-color: var(--danger-border);
}

.status-indicator[data-state="error"] .status-dot {
  background-color: var(--danger);
}

.status-indicator[data-state="error"] .status-text {
  color: var(--danger);
}

/* An open melding of the connection (or its status that could not be read) */
.status-indicator[data-state="warning"] {
  border-color: var(--warning-border);
}

.status-indicator[data-state="warning"] .status-dot {
  background-color: var(--warning-text);
}

.status-indicator[data-state="warning"] .status-text {
  color: var(--warning-text);
}

@keyframes pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

.model-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 320px;
  padding: 1.125rem;
  border-radius: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.model-panel-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.model-panel-kicker {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.model-text {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-main);
}

.model-detail {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.status-detail {
  font-size: 0.8125rem;
  line-height: 1.5;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--danger-tint);
  color: var(--danger);
  overflow-wrap: anywhere;
}

.model-detail.status-melding {
  color: var(--warning-text);
}

/* The panel only reads; the settings themselves are in Instellingen > Koppeling */
.status-beheren {
  align-self: flex-start;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-main);
}

/* ---------- Chat area ---------- */
.chat-container {
  flex: 1;
  overflow-y: auto;
  padding: 2.25rem 2rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.messages-list {
  width: 100%;
  max-width: var(--content-width);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.messages-list:empty {
  display: none;
}

.message {
  display: flex;
  max-width: 100%;
}

.user-message {
  align-self: flex-end;
  max-width: 70%;
}

.user-message .message-content {
  padding: 0.75rem 1.125rem;
  border-radius: 4px 4px 4px 4px;
  background-color: var(--brand);
  color: var(--text-white);
  font-size: 1rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.assistant-message {
  align-self: stretch;
  width: 100%;
}

/* ---------- Empty state ---------- */
.welcome {
  width: 100%;
  max-width: var(--content-width);
  margin: auto 0;
  padding-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.welcome-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  text-align: center;
}


.welcome-greeting {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--text-soft);
}

.welcome-title {
  font-size: 3.25rem;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.035em;
  color: var(--text-main);
  text-wrap: balance;
}


.welcome-composer:empty {
  display: none;
}

.welcome .chat-form {
  padding: 0.75rem 0.75rem 0.75rem 1.375rem;
  border-radius: var(--radius-lg);
}

.welcome .chat-input {
  font-size: 1.0625rem;
  min-height: 3.2em;
}

.welcome .send-button {
  width: 48px;
  height: 48px;
  border-radius: 4px;
}

/* Theme tabs above the example cards; the negative bottom margin leaves 1rem of the welcome gap between tabs and cards */
.prompt-themes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 auto -1rem;
  max-width: var(--content-width);
}

.prompt-themes[hidden] {
  display: none;
}

.prompt-theme {
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.375rem 0.875rem;
  min-height: 36px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  color: var(--text-soft);
  cursor: pointer;
}

.prompt-theme:hover {
  background: var(--bg-hover);
  color: var(--text-main);
}

.prompt-theme[aria-selected="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--text-white);
}

.prompt-cards {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.75rem;
}

.prompt-card {
  grid-column: span 2;
  min-height: 112px;
  padding: 1rem 1.125rem;
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  color: var(--text-main);
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.75rem;
  transition: border-color 0.15s, transform 0.15s;
}

/* Five cards: three on the first row, two wider ones on the second */
.prompt-card:nth-child(4):nth-last-child(2),
.prompt-card:nth-child(5):nth-last-child(1) {
  grid-column: span 3;
}

.prompt-card:hover {
  border-color: var(--brand);
  transform: translateY(-1px);
}

.prompt-card:disabled {
  opacity: 0.6;
  cursor: progress;
  transform: none;
}

.prompt-topic {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--brand);
}

.prompt-topic-icon {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: var(--brand-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.prompt-text {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
}

/* ---------- Key figures on the start screen ---------- */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.75rem;
}

/* display: grid would otherwise override the hidden attribute */
.kpi-strip[hidden] {
  display: none;
}

/* Seven or eight cards (app.js sets data-count) make two even rows of four; up to six keep the rules above */
.kpi-strip[data-count="7"],
.kpi-strip[data-count="8"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* The cards of an overview without key figures (Controles, last sync, administrations) fill the row in the same grid of four */
.kpi-strip[data-count="1"],
.kpi-strip[data-count="2"],
.kpi-strip[data-count="3"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kpi-card {
  min-width: 0;
  min-height: 112px;
  padding: 0.875rem 1rem;
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  color: var(--text-main);
  font: inherit;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

button.kpi-card {
  cursor: pointer;
  transition: border-color 0.15s;
}

button.kpi-card:hover,
button.kpi-card:focus-visible {
  border-color: var(--brand);
}

.kpi-label {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-soft);
}

.kpi-caption {
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--text-muted);
}

.kpi-value {
  margin-top: auto;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-detail {
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}

.kpi-detail.favourable {
  color: var(--good);
}

.kpi-detail.unfavourable {
  color: var(--bad);
}

/* Under the figure: the change and last year on the left, the line of the last 12 months on the right */
.kpi-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
}

.kpi-lines {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.kpi-prior {
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}

/* The points may reach the edge of the box: they are drawn over it */
.kpi-spark {
  flex: none;
  width: 80px;
  height: 24px;
  overflow: visible;
  color: var(--text-soft);
}

.kpi-spark path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.kpi-spark circle {
  fill: currentColor;
}

/* The cash card's lowest week under the minimum (the overview's cash_dip); the "laagste" text says it in words */
.kpi-spark .low {
  fill: var(--bad);
}

/* Bad news over the threshold: a red edge on the left, inside the border so the card keeps its size */
.kpi-card.alert {
  box-shadow: inset 3px 0 0 var(--bad);
}

.kpi-skeleton {
  border: none;
}

@media (max-width: 1100px) {
  .kpi-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .kpi-strip,
  .kpi-strip[data-count="7"],
  .kpi-strip[data-count="8"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kpi-card {
    min-height: 100px;
    padding: 0.75rem 0.875rem;
  }

  .kpi-value {
    font-size: 1.25rem;
  }

  .kpi-spark {
    width: 56px;
    height: 17px;
  }
}

/* ---------- Answer card ---------- */
.answer-card {
  width: 100%;
  min-width: 0;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
}

.answer-main {
  padding: 1.75rem 2rem 1.625rem;
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
}

.answer-body {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text-main);
}

/* Markdown inside answers */
.answer-body h1,
.answer-body h2,
.answer-body h3,
.answer-body h4 {
  color: var(--text-main);
  margin-top: 0.75rem;
  margin-bottom: 0.4rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.answer-body h3 { font-size: 1.125rem; }
.answer-body h4 { font-size: 1rem; }

.answer-body p {
  margin-bottom: 0.65rem;
}

.answer-body p:last-child,
.answer-body ul:last-child,
.answer-body ol:last-child {
  margin-bottom: 0;
}

.answer-body ul,
.answer-body ol {
  margin-left: 1.25rem;
  margin-bottom: 0.65rem;
}

.answer-body li {
  margin-bottom: 0.25rem;
}

.answer-body strong {
  font-weight: 600;
}

.answer-body code {
  font-family: var(--font-mono);
  background-color: var(--brand-tint);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-size: 0.85em;
  color: var(--brand);
}

.answer-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0 0 0.75rem;
}

.answer-chip {
  font-size: 0.8rem;
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0.125rem 0.625rem;
}

.chip-label {
  font-weight: 600;
}

.answer-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.suggestion-button {
  font: inherit;
  font-size: 0.875rem;
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--brand);
  color: var(--brand);
  background: transparent;
  cursor: pointer;
}

.answer-followups {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.625rem;
}

.followup-button {
  font: inherit;
  font-size: 0.8rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
}

.followup-button:hover {
  border-color: var(--brand);
  color: var(--brand);
}

/* Answer feedback */
.answer-feedback {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.75rem;
}

.feedback-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.feedback-button:hover:not([aria-disabled="true"]):not([aria-pressed="true"]) {
  background: var(--bg-hover);
  color: var(--text-main);
}

.feedback-button[aria-disabled="true"] {
  cursor: default;
  opacity: 0.6;
}

.feedback-button[aria-pressed="true"] {
  border-color: var(--border-strong);
  background: var(--brand-tint);
  color: var(--brand);
}

.feedback-status {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.feedback-note {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  flex-basis: 100%;
}

.feedback-note[hidden] {
  display: none;
}

.feedback-note textarea {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 0.875rem;
  color: var(--text-main);
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  resize: vertical;
}

.answer-source-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0 0 0.5rem;
}

.answer-warning {
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--warning-border);
  background-color: var(--warning-tint);
  color: var(--warning-text);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Headline tiles (from the total row) */
/* One row of equal tiles, however many the result has (up to four) */
.answer-headline {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0.75rem;
}

.headline-tile {
  min-width: 0;
  padding: 0.875rem 1rem;
  border-radius: var(--radius-md);
  background-color: var(--bg-subtle);
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.headline-tile:has(.headline-value.positive) {
  background-color: var(--up-tint);
}

.headline-tile:has(.headline-value.negative) {
  background-color: var(--down-tint);
}

.headline-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.headline-tile:has(.headline-value.positive) .headline-label {
  color: var(--up-label);
}

.headline-tile:has(.headline-value.negative) .headline-label {
  color: var(--down-label);
}

.headline-value {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.headline-value.positive {
  color: var(--up);
}

.headline-value.negative {
  color: var(--down);
}

/* Charts */
.answer-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem 2rem;
}

.answer-chart {
  display: grid;
  grid-template-columns: fit-content(40%) minmax(0, 1fr);
  column-gap: 1rem;
  row-gap: 8px;
  align-items: center;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.chart-caption {
  grid-column: 1 / -1;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 6px;
}

.chart-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
}

.chart-label {
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-main);
}

.chart-row.unassigned .chart-label {
  font-style: italic;
  color: var(--text-muted);
}

.chart-plot {
  position: relative;
  height: 18px;
}

.chart-plot::before {
  content: "";
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: calc(var(--pad-l) + (100% - var(--pad-l) - var(--pad-r)) * var(--z) / 100);
  border-left: 1px solid var(--border-chart);
}

.chart-bar {
  position: absolute;
  top: 1px;
  bottom: 1px;
  min-width: 1px;
  border-radius: 4px;
  left: calc(var(--pad-l) + (100% - var(--pad-l) - var(--pad-r)) * var(--l) / 100);
  width: calc((100% - var(--pad-l) - var(--pad-r)) * var(--w) / 100);
}

.chart-bar.positive {
  background-color: var(--up-bar);
}

.chart-bar.negative {
  background-color: var(--down-bar);
}

.chart-bar.neutral {
  background-color: var(--brand);
}

.chart-bar.unassigned {
  background-color: var(--neutral-bar);
}

.chart-value {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-weight: 600;
  color: var(--text-soft);
}

.chart-value.after {
  left: calc(var(--pad-l) + (100% - var(--pad-l) - var(--pad-r)) * (var(--l) + var(--w)) / 100 + 6px);
}

.chart-value.before {
  right: calc(100% - var(--pad-l) - (100% - var(--pad-l) - var(--pad-r)) * var(--l) / 100 + 6px);
}

.chart-value.positive {
  color: var(--up);
}

.chart-value.negative {
  color: var(--down);
}

.chart-value.unassigned {
  color: var(--text-muted);
}

.chart-note {
  grid-column: 1 / -1;
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Time charts (SVG) */
.time-chart {
  max-width: 720px;
  margin: 0;
  font-size: 0.875rem;
}

.tc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.tc-switch {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  overflow: hidden;
}

.tc-switch button {
  font: inherit;
  font-size: 0.8rem;
  padding: 0.2rem 0.6rem;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.tc-switch button + button {
  border-left: 1px solid var(--border-strong);
}

.tc-switch button[aria-pressed="true"] {
  background: var(--brand-tint);
  color: var(--brand);
  font-weight: 600;
}

.tc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.875rem;
  margin: 0.375rem 0 0;
  color: var(--text-soft);
  font-size: 0.8rem;
}

.tc-key {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.tc-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.tc-swatch.line {
  height: 2px;
  width: 14px;
  border-radius: 1px;
}

.tc-plot {
  position: relative;
  margin-top: 0.375rem;
}

.tc-svg {
  display: block;
  width: 100%;
  height: auto;
}

.tc-grid {
  stroke: var(--border-subtle);
  stroke-width: 1;
}

.tc-zero {
  stroke: var(--border-chart);
  stroke-width: 1;
}

.tc-tick,
.tc-x,
.tc-value {
  font-size: 11px;
  fill: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.tc-value {
  fill: var(--text-soft);
  font-weight: 600;
}

.tc-col {
  stroke: none;
}

.tc-line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.tc-dot {
  stroke: var(--bg-card);
  stroke-width: 2;
}

.tc-cross {
  stroke: var(--border-chart);
  stroke-width: 1;
}

.tc-hit {
  fill: transparent;
  outline: none;
}

.tc-hit:hover,
.tc-hit:focus-visible {
  fill: rgba(31, 77, 58, 0.06);
}

.tc-hit:focus-visible {
  stroke: var(--brand);
  stroke-width: 2;
}

.tc-tip {
  position: absolute;
  top: 0;
  pointer-events: none;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  padding: 0.375rem 0.625rem;
  font-size: 0.8rem;
  max-width: 100%;
  white-space: normal;
  z-index: 2;
}

.tc-tip-title {
  color: var(--text-muted);
  margin-bottom: 0.125rem;
}

.tc-tip-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--text-soft);
  white-space: nowrap;
}

.tc-tip-row strong {
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
}

.tc-tip-key {
  width: 10px;
  height: 2px;
  border-radius: 1px;
}

/* Waterfalls (HTML rows) */
.waterfall {
  margin: 0;
  max-width: 720px;
  font-size: 0.875rem;
}

.waterfall .answer-chart .chart-caption {
  display: none;
}

.wf-rows {
  display: grid;
  grid-template-columns: fit-content(40%) minmax(0, 1fr);
  column-gap: 1rem;
  row-gap: 6px;
  align-items: center;
  margin-top: 0.5rem;
  font-variant-numeric: tabular-nums;
}

.wf-row {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: center;
  border-radius: 4px;
}

.wf-label {
  color: var(--text-soft);
  /* One line per row, so every row keeps the same height and the connectors meet the next bar; the row's title has the full text */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.wf-row.total .wf-label {
  color: var(--text-main);
  font-weight: 600;
}

.wf-plot {
  position: relative;
  height: 20px;
  margin-right: 4.75rem;
}

.wf-bar {
  position: absolute;
  top: 2px;
  min-width: 2px;
  height: 16px;
  border-radius: 0 4px 4px 0;
  background: var(--brand);
}

.wf-bar.neg {
  border-radius: 4px 0 0 4px;
}

.wf-row.up .wf-bar {
  background: var(--up-bar);
}

.wf-row.down .wf-bar {
  background: var(--down-bar);
}

.wf-link {
  position: absolute;
  top: 10px;
  height: calc(100% + 6px);
  width: 1px;
  background: var(--border-chart);
}

.wf-value {
  position: absolute;
  top: 1px;
  padding-left: 6px;
  white-space: nowrap;
  color: var(--text-soft);
}

.wf-row.total .wf-value {
  color: var(--text-main);
  font-weight: 600;
}

.wf-break {
  position: absolute;
  top: 0;
  left: 8px;
  width: 6px;
  height: 20px;
  background: var(--bg-card);
  transform: skewX(-20deg);
}

.wf-row:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ---------- Audit strip: proof under every answer ---------- */
.audit-strip {
  padding: 0.625rem 0.75rem 0.625rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--bg-strip);
  border-top: 1px solid var(--border-subtle);
}

.audit-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-soft);
  min-width: 0;
}

.audit-summary svg {
  flex-shrink: 0;
  color: var(--brand);
}

.audit-summary strong {
  font-weight: 600;
  color: var(--text-main);
}

.answer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.action-btn {
  height: 36px;
  padding: 0 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-soft);
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.action-btn svg {
  flex-shrink: 0;
}

.action-btn:hover {
  background: var(--bg-card);
  border-color: var(--border-chart);
  color: var(--text-main);
}

.action-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: default;
}

.action-btn[aria-expanded="true"] {
  background: var(--brand-tint);
  border-color: var(--brand);
  color: var(--brand);
}

/* Expanded panels below the strip */
.answer-panel {
  border-top: 1px solid var(--border-subtle);
}

.audit-data-section + .audit-data-section {
  border-top: 1px solid var(--border-subtle);
}

.audit-section-header {
  min-height: 44px;
  padding: 0.25rem 0.75rem 0.25rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.audit-section-title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.copy-btn,
.export-btn {
  height: 32px;
  padding: 0 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  color: var(--text-soft);
  font-size: 0.8125rem;
  font-weight: 500;
  transition: background-color 0.15s, color 0.15s;
}

.copy-btn:hover,
.export-btn:hover {
  background: var(--bg-hover);
  color: var(--text-main);
}

/* DAX */
.dax-panel {
  background: var(--code-bg);
}

.dax-panel .audit-dax-section + .audit-dax-section {
  border-top: 1px solid var(--code-border);
}

.dax-panel .audit-section-header {
  border-bottom: 1px solid var(--code-border);
}

.dax-panel .audit-section-title {
  color: var(--code-muted);
}

.dax-panel .copy-btn {
  background: transparent;
  border-color: var(--code-border);
  color: var(--code-text);
}

.dax-panel .copy-btn:hover {
  background: var(--code-border);
  color: var(--text-white);
}

.dax-code-block {
  padding: 1rem 2rem 1.25rem;
  overflow-x: auto;
}

.dax-code-block pre {
  margin: 0;
}

.dax-code-block code {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--code-text);
  background: transparent;
  padding: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Result tables */
.table-scroll-container {
  overflow: auto;
  max-height: 320px;
  border-top: 1px solid var(--border-subtle);
}

.raw-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  text-align: left;
}

.raw-data-table th {
  position: sticky;
  top: 0;
  background-color: var(--bg-subtle);
  color: var(--text-main);
  font-weight: 600;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}

.raw-data-table td {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-main);
  white-space: nowrap;
}

.raw-data-table th:first-child,
.raw-data-table td:first-child {
  padding-left: 2rem;
}

.raw-data-table th:last-child,
.raw-data-table td:last-child {
  padding-right: 2rem;
}

.raw-data-table tr:last-child td {
  border-bottom: none;
}

.raw-data-table tbody tr:hover {
  background-color: var(--bg-strip);
}

.raw-data-table td.numeric-cell,
.raw-data-table th.numeric-cell {
  text-align: right;
}

.raw-data-table td.numeric-cell {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

.raw-data-table td.empty-cell {
  color: var(--text-muted);
}

/* ---------- Loading: skeleton of the coming answer ---------- */
.answer-card.is-loading {
  padding: 1.5rem 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.loading-label {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--brand);
}

.loading-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  animation: pulse 1.2s ease-in-out infinite;
}

.skeleton-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.skeleton-lines {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.skeleton {
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, #f3f2ee 0%, #c9c4b6 40%, #f3f2ee 80%);
  background-size: 1200px 100%;
  animation: shimmer 1.4s linear infinite;
}

.skeleton-tile { height: 76px; border-radius: var(--radius-md); }
.skeleton-line { height: 14px; }

@keyframes shimmer {
  0% { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}

/* ---------- Errors ---------- */
.error-card {
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--danger-border);
  background: var(--danger-tint);
  color: var(--danger);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.error-card strong {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
}

/* ---------- Composer ---------- */
.app-footer {
  flex-shrink: 0;
  padding: 1rem 2rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.input-form-wrapper {
  width: 100%;
  max-width: var(--content-width);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.chat-form {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  padding: 0.625rem 0.625rem 0.625rem 1.25rem;
  border-radius: 4px;
  background-color: var(--bg-card);
  border: 1px solid var(--border-strong);
  transition: border-color 0.15s;
}

.chat-form:focus-within {
  border-color: var(--brand);
}

.chat-input {
  flex: 1;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  font-size: 1rem;
  line-height: 1.5;
  padding: 0.5rem 0;
  max-height: 160px;
  color: var(--text-main);
}

.chat-input::placeholder {
  color: var(--text-muted);
}

.chat-input:focus-visible {
  outline: none;
}

.send-button {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  border: none;
  background-color: var(--brand);
  color: var(--text-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s;
}

.send-button:hover:not(:disabled) {
  background-color: var(--brand-hover);
}

.send-button:disabled {
  background-color: var(--border-chart);
  cursor: not-allowed;
}

/* The month's question count above the question input */
.vragen-teller {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: right;
}

/* The count is a link to Instellingen > Abonnement en verbruik */
.vragen-teller a {
  color: inherit;
  text-decoration: none;
}

.vragen-teller a:hover,
.vragen-teller a:focus-visible {
  text-decoration: underline;
}

/* Cifer in je AI: the line "the text changed" with its Gelezen button */
.ai-tekst-nieuw {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Cifer in Claude under the example questions: a plain line, like the question count */
.claude-regel {
  margin: 0.75rem 0 0;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
}

.claude-regel a {
  color: inherit;
  font-weight: 600;
}

body:not(.ai-on) .claude-regel {
  display: none;
}

/* Cifer in Claude on the Overzicht: one line in the shape of the Rapportering banner, without the colour of a warning */
.claude-melding {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  background: var(--brand-tint);
  font-size: 0.875rem;
}

.claude-melding-link {
  color: inherit;
  font-weight: 600;
}

.claude-melding-weg {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  font: inherit;
  cursor: pointer;
}

.claude-melding-weg:hover,
.claude-melding-weg:focus-visible {
  text-decoration: underline;
}

.input-disclaimer {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
}

/* ---------- Buttons ---------- */
.btn {
  height: 40px;
  padding: 0 1rem;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 600;
  transition: background-color 0.15s, border-color 0.15s;
}

.btn-primary {
  background: var(--brand);
  color: var(--text-white);
  border: none;
}

.btn-primary:hover:not(:disabled) {
  background: var(--brand-hover);
}

.btn-primary:disabled {
  opacity: 0.7;
  cursor: progress;
}

.btn-secondary {
  background: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border-strong);
}

.btn-secondary:hover {
  background: var(--bg-hover);
}

/* ---------- Save-as-example modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(21, 32, 27, 0.45);
  backdrop-filter: blur(2px);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  z-index: 1000;
}

.modal-overlay.hidden {
  display: none;
}

.modal-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 580px;
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  border: 1px solid var(--border-subtle);
  animation: modalFadeIn 0.2s ease-out;
}

@keyframes modalFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.125rem 1.25rem 0.5rem 1.5rem;
}

.modal-title {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.modal-close-btn {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close-btn:hover {
  background: var(--bg-hover);
  color: var(--text-main);
}

.modal-form {
  padding: 0.5rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.form-group label {
  font-size: 0.8125rem;
  font-weight: 600;
}

.form-input,
.form-textarea {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  color: var(--text-main);
  background: var(--bg-card);
  transition: border-color 0.15s;
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--brand);
}

.code-font {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  background: var(--bg-subtle);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

/* The trial in the header: the days left, a link to the page Abonnement; orange from 3 days before the end, the words say it
   too */
.proef-chip {
  flex-shrink: 0;
  margin-right: 0.75rem;
  padding: 0.1875rem 0.75rem;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  color: var(--text-soft);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.proef-chip:hover {
  border-color: var(--border-strong);
  color: var(--text-main);
}

.proef-chip.is-dringend {
  border-color: var(--attention);
  color: var(--attention);
}

/* ---------- Cash forecast ---------- */
.cash-page {
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow-y: auto;
  /* the content is at most 1240px wide and centred, while the scrollbar stays at the window's edge */
  padding: 1.25rem max(1.5rem, calc((100% - 1240px) / 2 + 1.5rem)) 3rem;
}

.cash-page[hidden] {
  display: none;
}

.cash-view #chatContainer,
.cash-view #composerDock {
  display: none;
}

.cash-page-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* The story first (spec §1): a quiet line, the title as a sentence, the story under it */
.cash-eyebrow {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.cash-page-title {
  margin: 0.25rem 0 0.375rem;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.cash-story {
  max-width: 760px;
  margin: 0 0 1.5rem;
  font-size: 1.125rem;
  color: var(--text-soft);
}

.cash-story-strong {
  font-weight: 600;
  color: var(--text-main);
}

.cash-story-signal {
  font-weight: 600;
  color: var(--signaal);
}

.cash-status {
  color: var(--text-soft);
}

.cash-chart-card,
.cash-table-card,
.cash-source {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}

.cash-source-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-soft);
}

.cash-source-panel {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.875rem;
}

.cash-method-heading {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* Hoe berekend (round 5b): the assumptions as cards on a quiet surface: label, headline with a few points, and the actions */
.cash-method-cards {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.cash-assump {
  display: grid;
  grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.25rem 1rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
}

/* a list of names or a form takes the full width under the card's three columns */
.cash-assump > .cash-method-list,
.cash-assump > form {
  grid-column: 1 / -1;
}

.cash-assump-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-main);
}

.cash-assump-main {
  min-width: 0;
}

.cash-assump-headline {
  font-weight: 500;
  color: var(--text-main);
  overflow-wrap: anywhere;
}

.cash-assump-points {
  margin: 0.25rem 0 0;
  padding-left: 1rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.cash-assump-points li + li {
  margin-top: 0.125rem;
}

.cash-assump-more-item {
  list-style: none;
  margin-left: -1rem;
}

.cash-assump-more,
.cash-method-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--brand);
  cursor: pointer;
}

.cash-assump-more:hover,
.cash-method-link:hover {
  text-decoration: underline;
}

.cash-assump-more:focus-visible,
.cash-method-link:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.cash-method-chip {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: var(--brand-tint);
  color: var(--brand);
  font-size: 0.75rem;
  font-weight: 500;
}

/* what warns, one line each, in one amber block at the top of the tab */
.cash-method-notice {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-sm);
  background: var(--warning-tint);
  color: var(--warning-text);
  font-size: 0.8125rem;
}

.cash-method-notice ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cash-method-notice li + li {
  margin-top: 0.25rem;
}

.cash-method-notice .cash-method-link {
  color: inherit;
  text-decoration: underline;
}

.cash-method-known {
  font-size: 0.875rem;
}

.cash-method-known > summary {
  cursor: pointer;
  color: var(--text-soft);
  margin-bottom: 0.5rem;
}

.cash-method-notes {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--text-soft);
}

.cash-method-notes li + li {
  margin-top: 0.25rem;
}

.cash-method-list {
  margin: 0.25rem 0 0;
  padding-left: 1.25rem;
  color: var(--text-soft);
}

/* Hoe berekend: the one-line intro (controllers), the row buttons and the Aanpassen form */
.cash-method-shared {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.cash-method-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem 0.75rem;
}

/* Aanpassen stands out from Bekijk and Toon lijst: the one button that changes the forecast */
.action-btn.cash-method-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-color: var(--brand);
  color: var(--brand);
  background: var(--bg-card);
}

.action-btn.cash-method-edit:hover,
.action-btn.cash-method-edit[aria-expanded="true"] {
  background: var(--brand);
  color: #ffffff;
}

.cash-setting-form {
  padding: 0.75rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

/* The Wijzig forms of Hoe berekend share .cash-form's grid but not its 520px box or its unwrapped label column: a label
   column that wraps once it passes 26rem (the long Btw and Veiligheidslijn labels), and an input column that keeps
   at least 12rem. The two classes win over .cash-form whatever the order of the rules; the fixed-items form is
   untouched. */
.cash-form.cash-setting-form {
  grid-template-columns: fit-content(26rem) minmax(12rem, 1fr);
  max-width: none;
  margin: 0.75rem 0 0.25rem;
}

.cash-setting-cutoff,
.cash-setting-reason {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.5rem;
}

.cash-setting-cutoff input[type="checkbox"] {
  height: auto;
  padding: 0;
}

.cash-setting-hint {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.cash-setting-status {
  grid-column: 1 / -1;
  min-height: 1.25rem;
  margin: 0;
  color: var(--down);
}

/* Round 5: a line of its own in a Wijzig form (the fixed flows' "0 zet een stroom uit", a side row's "Niet gebruikt") */
.cash-setting-note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--text-soft);
}

.cash-blocks th {
  text-align: left;
  font-weight: 400;
  padding: 0.25rem 1rem 0.25rem 0;
}

.cash-blocks td {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.cash-block {
  border-bottom: 1px solid var(--border-subtle);
}

.cash-block > summary,
.cash-block-flat {
  display: grid;
  grid-template-columns: auto minmax(0, auto) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.5rem 0;
  cursor: pointer;
  list-style: none;
}

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

.cash-block-flat {
  cursor: default;
}

.cash-block-flat::before,
.cash-block > summary::before {
  content: "\25B8";
  color: var(--text-muted);
  transition: transform 0.15s;
}

.cash-block-flat::before {
  visibility: hidden;
}

.cash-block[open] > summary::before {
  transform: rotate(90deg);
}

.cash-block-title {
  font-weight: 600;
}

.cash-block-note {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.cash-block-note.is-stale {
  color: var(--warning-text);
}

.cash-block-value {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cash-block-body {
  padding: 0 0 0.75rem 1.25rem;
  overflow-x: auto;
}

.cash-block-group {
  border-bottom: 0;
}

.cash-block-group > summary {
  padding: 0.25rem 0;
}

.cash-block-group .cash-block-title,
.cash-block-group .cash-block-value {
  font-weight: 400;
}

.cash-block-body > .cash-blocks:not(.cash-blocks-grid),
.cash-block-group > .cash-blocks {
  width: 100%;
}

.cash-block-group > .cash-blocks {
  margin-bottom: 0.5rem;
}

.cash-block-group > .cash-blocks th {
  padding-left: 1.25rem;
}

.cash-blocks-grid thead th,
.cash-blocks-grid tfoot td,
.cash-blocks-grid tfoot th {
  font-weight: 600;
}

.cash-blocks-grid thead th:not(:first-child) {
  text-align: right;
}

.cash-blocks-grid td {
  padding-left: 1.5rem;
}

.cash-blocks-grid tfoot tr:first-child > * {
  border-top: 1px solid var(--border-subtle);
}

.cash-block-value,
.cash-block-body td,
.cash-blocks-grid th {
  white-space: nowrap;
}

/* Bouwstenen's key-figure cards (round 5b): two rows under a small heading, as many cards to a row as fit, two on a phone */
.cash-card-row {
  margin: 0 0 1rem;
}

.cash-card-heading {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.cash-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.5rem;
  list-style: none;
}

.cash-card {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
}

/* a card that opens its section is a button filling the card */
.cash-card-btn {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  width: calc(100% + 1.5rem);
  min-width: 0;
  margin: -0.625rem -0.75rem;
  padding: 0.625rem 0.75rem;
  border: 0;
  border-radius: inherit;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.cash-card:has(.cash-card-btn:hover) {
  border-color: var(--text-muted);
}

/* the card whose section is open under its row */
.cash-card.is-selected {
  border-color: var(--brand);
  background: var(--brand-tint);
}

.cash-card.is-selected .cash-card-btn:hover {
  background: none;
}

.cash-card-btn:focus-visible,
.cash-tile:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.cash-card-label {
  font-size: 0.8125rem;
  color: var(--text-soft);
}

.cash-card-value {
  font-size: 1.25rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.cash-card-note {
  font-size: 0.75rem;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

/* The sections as tiles in three groups (round 5b): a responsive grid, and under it one full-width panel for the open tile */
.cash-tile-group {
  margin: 0 0 1rem;
}

.cash-tile-heading {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cash-tile-heading svg {
  flex: none;
}

.cash-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.5rem;
}

.cash-tile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.125rem 0.5rem;
  min-width: 0;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  font: inherit;
  color: inherit;
  text-align: left;
}

button.cash-tile {
  cursor: pointer;
}

button.cash-tile:hover {
  border-color: var(--text-muted);
}

.cash-tile.is-selected {
  border-color: var(--brand);
  background: var(--brand-tint);
}

/* the title wraps between whole words and never into the figure, which keeps its line */
.cash-tile-title {
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 600;
  overflow-wrap: break-word;
}

.cash-tile-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* a sentence as the figure (the back-test's "€85k ernaast (4 weken vooraf)") may wrap, within 60% of the tile */
.cash-tile-value.is-long {
  max-width: 60%;
  justify-self: end;
  white-space: normal;
}

.cash-tile-sub {
  grid-column: 1 / -1;
  font-size: 0.75rem;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.cash-tile-sub:empty {
  display: none;
}

.cash-tile-sub.is-stale {
  color: var(--warning-text);
}

.cash-tile-panel {
  min-width: 0;
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}

.cash-tile-panel .cash-block-body {
  padding: 0.25rem 0;
}

/* the tables in a panel are quiet: the same size, a hairline between rows, numbers to the right, a muted header row */
.cash-tile-panel .cash-blocks {
  border-collapse: collapse;
}

.cash-tile-panel .cash-blocks th,
.cash-tile-panel .cash-blocks td {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  border-top: 1px solid var(--border-subtle);
  vertical-align: baseline;
}

.cash-tile-panel .cash-blocks tbody tr:first-child > * {
  border-top: 0;
}

.cash-tile-panel .cash-blocks thead th {
  border-top: 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
}

/* The payment profiles as stacked bars: a legend once, then a row per kind (name and counts, the bar, the mean) */
.cash-bars {
  display: grid;
  gap: 0.625rem;
  padding: 0.25rem 0 0.75rem;
}

.cash-bars-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.875rem;
  list-style: none;
  font-size: 0.75rem;
  color: var(--text-soft);
}

.cash-bucket {
  display: inline-block;
  width: 12px;
  height: 10px;
  margin-right: 0.375rem;
  border-radius: 2px;
  vertical-align: -1px;
}

.cash-bucket-1 { background: var(--bucket-1); color: var(--bucket-1-ink); }
.cash-bucket-2 { background: var(--bucket-2); color: var(--bucket-2-ink); }
.cash-bucket-3 { background: var(--bucket-3); color: var(--bucket-3-ink); }
.cash-bucket-4 { background: var(--bucket-4); color: var(--bucket-4-ink); }
.cash-bucket-5 { background: var(--bucket-5); color: var(--bucket-5-ink); }
.cash-bucket-6 { background: var(--bucket-6); color: var(--bucket-6-ink); }

.cash-bar-row {
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr) 3.25rem;
  grid-template-areas: "head bar mean";
  align-items: center;
  gap: 0.25rem 0.75rem;
}

.cash-bar-head {
  grid-area: head;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cash-bar-name {
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

.cash-bar {
  grid-area: bar;
  display: flex;
  height: 1.375rem;
  overflow: hidden;
  border-radius: 4px;
  background: var(--bg-hover);
}

.cash-bar-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cash-bar-seg + .cash-bar-seg {
}

.cash-bar-mean {
  grid-area: mean;
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* A row that lists its parts under its name (a fixed account): quiet, wrapping between the parts */
.cash-block-parts {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.625rem;
  margin-top: 0.125rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* the growth line's label is a sentence ("Groei laatste 12 maanden t.o.v. de 12 daarvoor"): it wraps instead of widening the table */
.cash-blocks-grid tfoot th {
  white-space: normal;
}

/* on a phone the quiet note goes under the title, so the title and the figure keep the line; a long headline ("gemiddeld
   €85k ernaast (4 weken vooraf)") takes what it needs up to 45% of the line and wraps beyond, so the title keeps 7rem */
@media (max-width: 600px) {
  .cash-block > summary,
  .cash-block-flat {
    grid-template-columns: auto minmax(7rem, 1fr) fit-content(45%);
    row-gap: 0;
  }

  .cash-block-value {
    white-space: normal;
  }

  .cash-block-note {
    grid-column: 2 / -1;
    grid-row: 2;
  }

  .cash-block-body {
    padding-left: 0.5rem;
  }

  /* the bars take the full width with their name above them, the mean beside the name; a table's headings and row names wrap
     so a wide table shrinks before it scrolls inside its section */
  .cash-bar-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "head mean" "bar bar";
  }

  .cash-blocks-grid th {
    white-space: normal;
  }
}

.cash-dax-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0.5rem 0 0.25rem;
}

.cash-dax-code {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  white-space: pre-wrap;
  background: var(--code-bg);
  color: var(--code-text);
  padding: 0.75rem;
  border-radius: var(--radius-sm);
  max-height: 260px;
  overflow: auto;
}

@media (max-width: 640px) {
  .cash-page {
    padding: 1rem 1rem 2.5rem;
  }

  .cash-assump {
    grid-template-columns: minmax(0, 1fr);
  }

  .cash-method-actions {
    justify-content: flex-start;
  }

  .cash-page-head {
    flex-wrap: wrap;
  }
}

.cash-figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0.5rem 0 1rem;
}

.cash-figure {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}

/* The lowest balance under the minimum (or under zero): the one tile in the signal style */
.cash-figure.signal {
  border-color: var(--signaal);
  background: var(--signaal-tint);
}

.cash-figure.signal .cash-figure-label,
.cash-figure.signal .cash-figure-value {
  color: var(--signaal);
}

.cash-figure-label,
.cash-figure-note {
  font-size: 0.8125rem;
  color: var(--text-soft);
}

.cash-figure-extra {
  font-size: 0.8125rem;
  color: var(--text-soft);
}

.cash-figure-value {
  font-size: 1.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cash-figure-value.negative,
.cash-table td.negative,
.cash-item-amount.negative {
  color: var(--down);
}

/* T4's quiet lines under a figure (.cash-figure-extra, T4) turn the signal colour when they warn; the safety line's own touches */
.cash-figure-extra.warn {
  color: var(--signaal);
}

.cash-set-minimum {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--brand);
  text-decoration: underline;
  cursor: pointer;
}

.cash-table td.below-minimum {
  color: var(--signaal);
}

/* The lowest week's column: its closing balance in bold, with a rust top border when it is under the limit */
.cash-table tr[data-line="closing"] td.lowest {
  font-weight: 600;
}

.cash-table tr[data-line="closing"] td.lowest.below-minimum {
  border-top: 2px solid var(--signaal);
}

.cash-swatch-minimum {
  height: 0;
  border-top: 2px dashed var(--signaal);
  border-radius: 0;
  background: none;
  vertical-align: 3px;
}

.cash-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
  font-size: 0.75rem;
  color: var(--text-soft);
}

.cash-swatch {
  display: inline-block;
  width: 12px;
  height: 10px;
  margin-right: 0.375rem;
  border-radius: 2px;
  vertical-align: -1px;
}

/* The six series in two families (spec §2): one class colours a segment (fill) and its swatch (background) */
.cash-series-customers { fill: var(--in-1); background: var(--in-1); }
.cash-series-other_in { fill: var(--in-2); background: var(--in-2); }
.cash-series-suppliers { fill: #15201b; background: #15201b; }
.cash-series-payroll { fill: #5a6660; background: #5a6660; }
.cash-series-vat { fill: #8a938e; background: #8a938e; }
.cash-series-other_out { fill: #c9c4b6; background: #c9c4b6; }
.cash-swatch-balance { height: 3px; vertical-align: 3px; border-radius: 0; background: var(--text-main); }

/* "In" and "Uit" head their series */
.cash-legend-group {
  font-weight: 600;
  margin-right: -0.5rem;
}

.cash-legend-in { color: var(--in-1); }
.cash-legend-out { color: var(--text-main); }

.cash-card-title {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 600;
}

.cash-card-hint {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* The chart with the selected week's panel beside it, 260px wide; under 800px the panel goes under the chart */
.cash-chart-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 1.25rem;
  align-items: start;
}

.cash-week-detail {
  padding-left: 1.25rem;
  border-left: 1px solid var(--border-subtle);
  font-size: 0.875rem;
}

@media (max-width: 800px) {
  .cash-chart-wrap {
    grid-template-columns: minmax(0, 1fr);
  }

  .cash-week-detail {
    padding: 0.75rem 0 0;
    border-left: 0;
    border-top: 1px solid var(--border-subtle);
  }
}

.cash-week-title {
  margin: 0 0 0.125rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.cash-week-when {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.cash-week-rows {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.cash-week-rows th,
.cash-week-rows td {
  padding: 0.25rem 0;
  font-weight: 400;
  text-align: left;
  vertical-align: top;
}

.cash-week-rows td.cash-num {
  padding-left: 0.5rem;
  text-align: right;
  white-space: nowrap;
}

.cash-week-split {
  display: block;
  margin-left: calc(12px + 0.375rem);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.cash-week-net th,
.cash-week-net td {
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-subtle);
  font-weight: 600;
}

.cash-week-net td.negative {
  color: var(--signaal);
}

.cash-week-why {
  margin: 0.875rem 0 0;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  font-size: 0.8125rem;
  color: var(--text-soft);
}

.cash-chart {
  margin: 0 0 0.75rem;
}

.cash-chart-svg {
  display: block;
  max-width: 100%;
}

/* Solid segments with a 1px white edge between them: no hatching, no transparency */
.cash-seg {
  stroke: var(--bg-card);
  stroke-width: 1;
  cursor: pointer;
}

/* The selected week's light band, and the invisible area that makes the whole column clickable */
.cash-week-band {
  fill: var(--bg-subtle);
}

.cash-week-hit {
  fill: transparent;
  cursor: pointer;
}

.cash-week-label {
  cursor: pointer;
}

.cash-week-label.selected {
  fill: var(--text-main);
  font-weight: 600;
}

.cash-week-label:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.cash-grid {
  stroke: var(--border-subtle);
  stroke-width: 1;
}

.cash-zero {
  stroke: var(--text-main);
  stroke-width: 1;
}

.cash-axis {
  font-size: 11px;
  fill: var(--text-muted);
  text-anchor: middle;
}

.cash-axis-y {
  text-anchor: end;
}

.cash-balance {
  fill: none;
  stroke: var(--text-main);
  stroke-width: 3;
  stroke-linejoin: round;
  pointer-events: none;
}

.cash-point {
  fill: var(--text-main);
  stroke: var(--bg-card);
  stroke-width: 1.5;
  cursor: pointer;
}

.cash-lowest-label {
  font-size: 12px;
  font-weight: 600;
  fill: var(--text-main);
  stroke: var(--bg-card);
  stroke-width: 4px;
  paint-order: stroke;
  pointer-events: none;
}

.cash-lowest-label.signal {
  fill: var(--signaal);
}

/* The minimum: one dashed line on the axis, its label at the right end, the weeks under it in the signal colour */
.cash-minimum {
  stroke: var(--signaal);
  stroke-width: 1.5;
  stroke-dasharray: 6 4;
  pointer-events: none;
}

/* A white halo keeps the label readable over bars and the balance line */
.cash-minimum-label {
  font-size: 11px;
  fill: var(--signaal);
  text-anchor: end;
  stroke: var(--bg-card);
  stroke-width: 4px;
  paint-order: stroke;
  pointer-events: none;
}

.cash-point-below {
  fill: var(--signaal);
}

.cash-table-wrap {
  overflow-x: auto;
}

.cash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.cash-table th,
.cash-table td {
  padding: 0.375rem 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
  text-align: right;
}

.cash-table thead th {
  color: var(--text-muted);
  font-weight: 600;
  border-bottom: 1px solid var(--border-strong);
}

/* A week header is two lines ("wk 40" over "28 sep"), so a week column is as wide as its amounts and 13 of them fit a laptop's box */
.cash-table thead th span {
  display: block;
}

/* Tighter than the label column, which keeps its own padding */
.cash-table thead th:not(.cash-line-head),
.cash-table td {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.cash-table th[scope="row"],
.cash-table .cash-line-head {
  text-align: left;
  position: sticky;
  left: 0;
  background: var(--bg-card);
}

/* The row labels wrap between words (hyphenated when a word is too long) and stay narrower than the table's box:
   a sticky label wider than the box would cover every number */
.cash-table th[scope="row"] {
  font-weight: 400;
  white-space: normal;
  overflow-wrap: break-word;
  hyphens: auto;
  min-width: 9rem;
  max-width: 22rem;
}

/* A customer's, a supplier's or an item's name is free text: it may break anywhere, so a long one cannot widen the label */
.cash-table .cash-row-relation th[scope="row"],
.cash-table .cash-row-item th[scope="row"] {
  overflow-wrap: anywhere;
}

.cash-level-1 th[scope="row"] { padding-left: 1.25rem; }
.cash-level-2 th[scope="row"] { padding-left: 2.25rem; color: var(--text-soft); }
.cash-level-3 th[scope="row"] { padding-left: 3.25rem; color: var(--text-soft); }

/* On a phone (box of about 343px at 375px) the label takes about 100-120px and leaves room for four week columns of about 57px */
@media (max-width: 640px) {
  .cash-table th[scope="row"] { min-width: 6rem; max-width: 8rem; }
  .cash-level-1 th[scope="row"] { padding-left: 0.75rem; }
  .cash-level-2 th[scope="row"] { padding-left: 1.25rem; }
  .cash-level-3 th[scope="row"] { padding-left: 1.75rem; }
}

/* Chained with .cash-table so the bold beats the row label's regular weight above */
.cash-table .cash-row-group th,
.cash-table .cash-row-group td,
.cash-table .cash-row-balance th,
.cash-table .cash-row-balance td,
.cash-table .cash-row-total th,
.cash-table .cash-row-total td {
  font-weight: 600;
}

/* Last year's closing in the same week (the back-test): a quiet row under Eindsaldo, nothing to open */
.cash-table .cash-row-last-year th[scope="row"],
.cash-table .cash-row-last-year td {
  color: var(--text-muted);
  font-weight: 400;
}

.cash-toggle,
.cash-cell {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* A button does not inherit these: the label wraps and reads from the left like the plain labels */
.cash-toggle {
  text-align: inherit;
  white-space: inherit;
}

/* A no-break space, so the glyph never stands alone on a line */
.cash-toggle::before {
  content: "▸\00a0";
}

.cash-toggle[aria-expanded="true"]::before {
  content: "▾\00a0";
}

.cash-cell:hover,
.cash-cell:focus-visible {
  text-decoration: underline;
}

/* The selected week's column; its header is a button that selects the week */
.cash-table .selected {
  background: var(--bg-subtle);
}

.cash-week-head {
  font: inherit;
  color: inherit;
  text-align: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.cash-table thead th.selected .cash-week-head {
  color: var(--text-main);
}

.cash-week-head:hover,
.cash-week-head:focus-visible {
  text-decoration: underline;
}

/* Ontvangsten and Uitgaven in their family colour */
.cash-table tr[data-line="receipts"] th[scope="row"],
.cash-table tr[data-line="receipts"] td {
  color: var(--in-1);
}

.cash-table tr[data-line="payments"] th[scope="row"],
.cash-table tr[data-line="payments"] td {
  color: var(--text-main);
}

.cash-detail {
  position: relative;
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}

.cash-detail-close {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
}

.cash-detail-title {
  font-size: 0.9375rem;
  font-weight: 600;
  margin-right: 2.5rem;
}

.cash-detail-note {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--text-soft);
}

.cash-detail-scroll {
  max-height: 360px;
  overflow: auto;
  margin-top: 0.5rem;
}

.cash-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.cash-detail-table th,
.cash-detail-table td {
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
}

/* The amount columns (what the invoice is for, what it counts in this week), marked by showCashDetail */
.cash-detail-table .cash-num {
  text-align: right;
}

.cash-detail-total {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: right;
}

.cash-detail-lines {
  margin: 0.5rem 0 0 1rem;
  font-size: 0.875rem;
}

/* The pencil column of the detail table (controllers): first, so a phone does not have to scroll to it */
.cash-detail-table .cash-pencil {
  width: 40px;
  padding-right: 0;
}

.cash-detail-footer {
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  color: var(--text-soft);
}

.cash-detail-footer .action-btn {
  height: 28px;
  margin-left: 0.25rem;
}

/* The one adjust form, under the detail table (never inside the scrolling table) */
.cash-adjust {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.875rem;
}

.cash-adjust-form {
  display: grid;
  gap: 0.5rem;
  max-width: 720px;
}

.cash-adjust-head {
  font-weight: 600;
}

.cash-adjust-now,
.cash-adjust-note {
  color: var(--text-soft);
  font-size: 0.8125rem;
}

.cash-adjust-form fieldset {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 1rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.cash-adjust-form legend {
  margin-bottom: 0.25rem;
  font-weight: 600;
}

.cash-adjust-option {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.cash-adjust-form input[type="date"],
.cash-adjust-form input[type="number"],
.cash-adjust-form input[type="text"] {
  height: 36px;
  padding: 0 0.625rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font: inherit;
}

.cash-adjust-form input[type="number"] {
  width: 5rem;
}

.cash-adjust-form input[type="text"] {
  width: 100%;
  max-width: 32rem;
}

.cash-adjust-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cash-adjust-restore {
  margin-left: auto;
}

.cash-adjust-error {
  min-height: 1.25rem;
  color: var(--down);
}

/* After Bewaren: the box's first line, or the line under the table when the box closed */
.cash-adjust-status {
  margin: 0 2.5rem 0.5rem 0;
  font-size: 0.875rem;
  font-weight: 600;
}

/* In the Aanpassingen panel it only ever says why a Herstel failed: red, and no gap while it is empty */
#cashAdjustPanel > .cash-adjust-status {
  margin-right: 0;
  color: var(--down);
}

#cashAdjustPanel > .cash-adjust-status:empty {
  margin: 0;
}

.cash-table-status {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
}

.cash-table-status:empty {
  display: none;
}

@media (max-width: 640px) {
  .cash-adjust-form fieldset {
    flex-direction: column;
    align-items: flex-start;
  }

  .cash-adjust-form input[type="text"] {
    max-width: none;
  }

  .cash-adjust-restore {
    margin-left: 0;
  }
}

/* The Aanpassingen panel: the comparison, then one list per group; expired promises in the signal colour */
.cash-adjust-compare {
  margin: 0 0 0.25rem;
  font-variant-numeric: tabular-nums;
}

.cash-adjust-group {
  margin-top: 1rem;
}

.cash-adjust-group.warn .cash-method-heading {
  color: var(--signaal);
}

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

.cash-adjust-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  padding: 0.375rem 0;
  border-bottom: 1px solid var(--border-subtle);
}

.cash-adjust-what {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.cash-adjust-buttons {
  display: flex;
  gap: 0.25rem;
}

/* One line per changed field, under its row, each with its own author */
.cash-adjust-sub {
  flex-basis: 100%;
  padding-left: 1rem;
  font-size: 0.8125rem;
  color: var(--text-soft);
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .cash-adjust-list li {
    flex-direction: column;
    align-items: flex-start;
  }
}

.cash-items {
  margin: 0;
}

.cash-items-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.cash-warning {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-sm);
  background: var(--warning-tint);
  color: var(--warning-text);
  font-size: 0.875rem;
}

.cash-item-list {
  display: grid;
  gap: 0.5rem;
  padding: 0;
  list-style: none;
}

/* a fixed item is a card like an assumption (round 5b) */
.cash-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  font-size: 0.875rem;
}

.cash-item.past {
  color: var(--text-muted);
}

/* Takes the free width, so the amount and the buttons stay at the right edge in every row */
.cash-item-what {
  flex: 1;
  min-width: 0;
}

.cash-item-by {
  color: var(--text-muted);
}

.cash-item-amount {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cash-item-actions {
  display: flex;
  gap: 0.375rem;
}

.cash-item-btn {
  height: 32px;
  width: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cash-item-status {
  min-height: 1.25rem;
  margin: 0.5rem 0;
  font-size: 0.875rem;
  color: var(--down);
}

.cash-form {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.5rem 0.75rem;
  align-items: center;
  max-width: 520px;
  margin: 0.5rem 0 1rem;
  font-size: 0.875rem;
}

.cash-form input {
  height: 36px;
  padding: 0 0.625rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font: inherit;
}

/* The selects reuse the header dropdown look; here they fill their column like the inputs */
.cash-form .closing-dropdown {
  height: 36px;
  max-width: none;
}

.cash-form-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.5rem;
}

@media (max-width: 640px) {
  .cash-figures {
    grid-template-columns: 1fr;
  }

  .cash-form,
  .cash-form.cash-setting-form {
    grid-template-columns: 1fr;
  }
}

/* The question log of Instellingen > AI en privacy (the modal Log once); the tables of Cifer-beheer use .log-table too */
.log-tabs {
  display: flex;
  gap: 0.25rem;
  margin: 0 0 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
}

.log-tabs button {
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.log-tabs button[aria-selected="true"] {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

.log-utc {
  color: var(--text-muted);
  font-size: 0.875rem;
}

.log-summary {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  color: var(--text-soft);
}

.log-csv {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.log-table th {
  text-align: left;
  font-weight: 600;
  color: var(--text-muted);
  padding: 0.5rem 0.625rem;
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}

.log-table td {
  padding: 0.5rem 0.625rem;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}

.log-row {
  cursor: pointer;
}

.log-row:hover {
  background: var(--bg-hover);
}

.log-row:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

.log-time {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--text-soft);
}

.log-question {
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.log-headline {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.log-source {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.0625rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--text-soft);
  white-space: nowrap;
}

.log-source[data-source="error"] {
  border-color: var(--danger-border);
  background: var(--danger-tint);
  color: var(--danger);
}

.log-source[data-source="exploratory"] {
  border-color: var(--warning-border);
  background: var(--warning-tint);
  color: var(--warning-text);
}

.log-source[data-source="verified"] {
  border-color: var(--ok);
  background: var(--ok-ring);
  color: var(--text-main);
}

.log-rating {
  display: inline-flex;
  vertical-align: middle;
  color: var(--text-soft);
}

.log-detail td {
  padding: 0;
  background: var(--bg-subtle);
  white-space: normal;
}

/* The table can be wider than the panel (its columns do not wrap). The detail sticks to the
   left edge at the width of the visible panel, so its text wraps and needs no sideways scroll. */
.log-detail-body {
  position: sticky;
  left: 0;
  width: 100cqw;
  padding: 0.5rem 0.625rem;
}

.log-detail-line {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.1875rem 0;
}

.log-detail-label {
  color: var(--text-muted);
}

.log-detail-value {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.log-dax {
  margin: 0;
  padding: 0.5rem 0.625rem;
  background: var(--code-bg);
  color: var(--code-text);
  border-radius: 4px;
  font-size: 0.75rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* What a viewer cannot use (the server refuses it anyway) */
body[data-role="viewer"] .controller-only {
  display: none !important;
}

/* One round account button in the header; name, Users and Sign out sit in its panel */
.user-menu {
  position: relative;
  margin-left: 0.5rem;
}

.user-menu-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--brand-tint);
  color: var(--brand);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.user-menu-btn:hover,
.user-menu-btn[aria-expanded="true"] {
  border-color: var(--brand);
}

.user-menu-panel {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  z-index: 30;
  min-width: 14rem;
  max-width: calc(100vw - 2rem);
  padding: 1rem;
  border-radius: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.user-menu-panel form {
  margin: 0;
}

.user-menu-panel .btn {
  width: 100%;
}

.user-menu-name {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-main);
  overflow-wrap: anywhere;
}

.user-menu-upn {
  margin: -0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

/* "Je rol bij <bedrijf>: Controller", under the address */
.user-menu-role {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-soft);
  overflow-wrap: anywhere;
}

/* Numbers in the tables of Cifer-beheer (the Controles-overzicht and Facturatie) on the right */
.log-table .admin-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.log-table td .btn {
  white-space: nowrap;
}

@media (max-width: 640px) {
  .log-detail-line {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.125rem;
  }
}

/* ---------- Utilities ---------- */
[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The page's own texts wait for the client's language, so a Dutch client never sees English flash by.
   app.js sets data-lang-ready on <html> once the language is applied; if it never does, the texts show after 3s.
   (A placeholder cannot be animated: without the language it stays blank.) */
html:not([data-lang-ready]) [data-i18n] {
  visibility: hidden;
  animation: lang-fallback 0s 3s forwards;
}

html:not([data-lang-ready]) [data-i18n-placeholder]::placeholder {
  color: transparent;
}

@keyframes lang-fallback {
  to {
    visibility: visible;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton,
  .loading-dot,
  .status-indicator[data-state="checking"] .status-dot {
    animation: none;
  }
  .prompt-card:hover {
    transform: none;
  }
}

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
  .prompt-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .prompt-card,
  .prompt-card:nth-child(4):nth-last-child(2),
  .prompt-card:nth-child(5):nth-last-child(1) {
    grid-column: span 1;
  }
  .prompt-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .audit-strip {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
  }
  /* The header keeps its room for the client and closing selects: the status chip shrinks to its dot (the state stays
     in its title and in the panel it opens), and the closing select keeps its tooltip instead of a label */
  .status-indicator {
    width: 40px;
    padding: 0;
    justify-content: center;
  }
  .status-text,
  .status-chevron {
    display: none;
  }
}

/* ---------- Phone ---------- */
@media (max-width: 640px) {
  .app-header {
    height: 64px;
    padding: 0 1rem;
    gap: 0.5rem;
  }
  .header-left {
    gap: 0.625rem;
  }
  .header-divider {
    display: none;
  }
  .tenant-dropdown {
    height: 44px;
    max-width: 44vw;
  }
  .closing-dropdown {
    height: 44px;
    max-width: 34vw;
  }
  .status-indicator {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
  }
  .status-text,
  .status-chevron {
    display: none;
  }
  .user-menu-btn {
    width: 44px;
    height: 44px;
  }
  .user-menu-panel {
    top: calc(100% + 18px);
  }
  .model-panel {
    position: fixed;
    top: 72px;
    left: 1rem;
    right: 1rem;
    width: auto;
  }
  .chat-container {
    padding: 1.25rem 1rem 0.5rem;
  }
  .user-message {
    max-width: 88%;
  }
  .welcome {
    gap: 1.5rem;
  }
  .welcome-title {
    font-size: 2.125rem;
  }
  .prompt-theme {
    min-height: 44px;
  }
  .prompt-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .prompt-card,
  .prompt-card:last-child:nth-child(odd) {
    grid-column: auto;
    min-height: 0;
  }
  .answer-main {
    padding: 1.125rem 1rem;
    gap: 1rem;
  }
  .answer-body {
    font-size: 0.9375rem;
  }
  .headline-value {
    font-size: 1.625rem;
  }
  .action-btn {
    height: 44px;
    border-color: var(--border-strong);
    background: var(--bg-card);
    color: var(--text-main);
    font-size: 0.875rem;
  }
  .answer-actions {
    gap: 0.5rem;
  }
  .feedback-button {
    width: 44px;
    height: 44px;
  }
  .audit-section-header,
  .dax-code-block {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .raw-data-table th:first-child,
  .raw-data-table td:first-child {
    padding-left: 1rem;
  }
  .raw-data-table th:last-child,
  .raw-data-table td:last-child {
    padding-right: 1rem;
  }
  .answer-card.is-loading {
    padding: 1.125rem 1rem 1.25rem;
  }
  .app-footer {
    padding: 0.75rem 1rem 1rem;
  }
  .chat-form {
    padding: 0.375rem 0.375rem 0.375rem 1rem;
  }
}

@media (max-width: 480px) {
  .answer-headline,
  .skeleton-tiles {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .headline-tile:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .tenant-dropdown {
    max-width: calc(100vw - 13rem);
  }
  .closing-dropdown {
    max-width: 30vw;
  }
}

/* ---------- Sign-in pages (no access, signed out, errors) ---------- */
.auth-page {
  min-height: 100vh;
  height: auto;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: var(--bg-app);
}

.auth-card {
  width: 100%;
  max-width: 28rem;
  padding: 2rem;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  color: var(--text-main);
}

.auth-card h1 {
  margin: 0 0 1rem;
  font-size: 1.375rem;
}

.auth-card p {
  margin: 0 0 0.75rem;
  color: var(--text-soft);
  overflow-wrap: anywhere;
}

/* The page /claude (app/mcp/teksten.py): a longer text in the same card, with headings under the title */
.auth-card.claude-page {
  max-width: 40rem;
}

.claude-page h2 {
  margin: 1.5rem 0 0.5rem;
  font-size: 1.0625rem;
}

.claude-page ul {
  margin: 0 0 0.75rem;
  padding-left: 1.25rem;
  color: var(--text-soft);
}

.claude-page li {
  margin-bottom: 0.375rem;
  overflow-wrap: anywhere;
}

.auth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.auth-actions form {
  margin: 0;
}

/* The page before the sign-in (/start): the logo above the title, the steps above the button, two notes below it */
.auth-logo {
  display: block;
  height: 24px;
  width: auto;
  margin: 0 0 1.5rem;
}

.auth-steps {
  margin: 0 0 0.75rem;
  padding-left: 1.25rem;
  color: var(--text-soft);
}

.auth-steps li {
  margin-bottom: 0.5rem;
  overflow-wrap: anywhere;
}

.auth-after {
  margin-top: 1.25rem;
}

.auth-after p {
  font-size: 0.875rem;
}

/* .btn is sized for a button; as a link it needs the same box */
.auth-actions .btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* AI off (or not known yet): no question box, example questions or Log; the panel of the status button says whether AI is
   on */
@media (max-width: 1100px) {
  /* Below this width the closing label gives way to the right of the header by shrinking */
  .closing-label {
    max-width: 30vw;
  }
  .admin-choice {
    max-width: 30vw;
  }
}

body:not(.ai-on) #composer,
body:not(.ai-on) #composerDock,
body:not(.ai-on) .welcome-intro,
body:not(.ai-on) .welcome-composer,
body:not(.ai-on) #promptThemes,
body:not(.ai-on) #promptCards {
  display: none;
}

.start-failed {
  margin: 24px auto;
  max-width: 560px;
  text-align: center;
  color: var(--text-soft);
}

/* ---------- Menu (Overzicht spec §1) ---------- */
.app-menu {
  display: flex;
  align-self: stretch;
  gap: 1.25rem;
  margin: 0 auto 0 1.5rem;
}

.app-menu-tab {
  font: inherit;
  font-size: 0.9375rem;
  color: var(--text-muted);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0 0.125rem;
  white-space: nowrap;
  cursor: pointer;
}

.app-menu-tab:hover {
  color: var(--text-main);
}

/* The tab of the screen that shows: bold, with the green line under it */
.app-menu-tab.active {
  color: var(--text-main);
  font-weight: 600;
  border-bottom-color: var(--brand);
}

.app-menu-tab[hidden] {
  display: none;
}

/* Below 1100px the menu takes a row of its own under the client and the status, so it never covers the selects */
@media (max-width: 1100px) {
  .app-header {
    height: auto;
    flex-wrap: wrap;
    row-gap: 0;
  }
  .header-left,
  .header-right {
    min-height: 64px;
  }
  /* the client and the status keep sharing the first row: the left side gives way, as on one row */
  .header-left {
    flex: 1 1 0;
  }
  .app-menu {
    order: 3;
    flex-basis: 100%;
    height: 44px;
    margin: 0;
  }
}

/* On a phone the logo and the two selects fill a row: the status and the account go to the row under it, right */
@media (max-width: 640px) {
  .header-left {
    flex-basis: 100%;
  }
  .header-right {
    min-height: 52px;
    margin-left: auto;
  }
}

/* ---------- Overzicht: the start screen ---------- */
.overview-page {
  --page-pad-top: 1.75rem;
  --page-pad-bottom: 4rem;
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow-y: auto;
  /* the content is at most 1120px wide and centred, while the scrollbar stays at the window's edge */
  padding: var(--page-pad-top) max(1.5rem, calc((100% - 1120px) / 2 + 1.5rem)) var(--page-pad-bottom);
  /* the panel beside a list is as high as this page at most (100cqh in .list-detail) */
  container-type: size;
}

.overview-page[hidden] {
  display: none;
}

.overview-view #chatContainer,
.overview-view #composerDock {
  display: none;
}

.overview-eyebrow {
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.overview-title {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0.25rem 0 1.25rem;
}

/* Briefing version 2: the kern as the title is a sentence of up to 45 words, not a page name. Smaller, so it does not
   fill a phone screen (smaller still under 640px, below) */
.overview-title.briefing-kern {
  font-size: 1.25rem;
  line-height: 1.4;
  letter-spacing: 0;
}

.overview-page .kpi-strip {
  margin-bottom: 1.75rem;
}

.overview-status {
  color: var(--text-muted);
}

.overview-status:empty {
  display: none;
}

.overview-page > .btn {
  margin: 0.75rem 0 1rem;
}

.overview-problem {
  margin-bottom: 1rem;
}

.overview-problem[hidden] {
  display: none;
}

/* The work list: the list on the left, the 300px panel on the right, in one card */
.overview-work {
  display: grid;
  grid-template-columns: 1fr 300px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
}

.overview-work[hidden] {
  display: none;
}

/* On the Kasprognose the work list is the card Meldingen, above the story: its title spans the list and the panel */
.cash-alerts {
  margin: 0 0 1rem;
}

.cash-alerts > .cash-card-title {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.75rem 1.25rem 0;
}

.overview-list {
  min-width: 0;
  padding: 1rem 0 0.5rem;
}

.overview-work > .overview-list {
  border-right: 1px solid var(--border-subtle);
}

/* The tabs, and Alles gelezen beside them (outside the tablist) */
.overview-tabbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1.25rem 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
}

.overview-tabs {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.overview-tab {
  font: inherit;
  font-size: 0.875rem;
  color: var(--text-muted);
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 0.3125rem 0.75rem;
  cursor: pointer;
}

.overview-tab[aria-selected="true"] {
  border-color: var(--border-subtle);
  background: var(--bg-subtle);
  color: var(--text-main);
  font-weight: 600;
}

.overview-items {
  list-style: none;
}

.overview-row {
  position: relative;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: baseline;
  width: 100%;
  padding: 0.875rem 1.25rem 0.875rem calc(1.25rem - 3px);
  border: 0;
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--bg-app);
  background: none;
  color: var(--text-main);
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
}

.overview-row:hover {
  background: var(--bg-subtle);
}

/* The selected row: a light background and a line in ink on the left */
.overview-row[aria-selected="true"] {
  background: var(--bg-subtle);
  border-left-color: var(--text-main);
}

.overview-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  align-self: center;
  flex-shrink: 0;
}

/* The colour says how much it asks: bad (rood), attention (oranje), info (grijs); the word is read out in the row. A
   row of Afgehandeld (closed) asks nothing any more: grijs, without a word */
.overview-swatch[data-severity="bad"] {
  background: var(--bad);
}

.overview-swatch[data-severity="attention"] {
  background: var(--attention);
}

.overview-swatch[data-severity="info"] {
  background: var(--text-soft);
}

.overview-swatch[data-severity="closed"] {
  background: var(--text-soft);
}

.overview-text strong {
  font-weight: 600;
}

.overview-signal {
  color: var(--signaal);
  font-weight: 600;
}

.overview-reason {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.overview-meta {
  color: var(--text-muted);
  font-size: 0.8125rem;
  white-space: nowrap;
}

/* A ticked or resolved item: the sentence in grey */
.overview-row.closed .overview-text {
  color: var(--text-muted);
}

.overview-row.closed .overview-signal {
  color: var(--text-muted);
}

.overview-empty {
  padding: 1.75rem 1.25rem;
  color: var(--text-muted);
}

/* The panel */
.overview-detail {
  min-width: 0;
  padding: 1.125rem 1.25rem;
}

.overview-kind {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.overview-detail-title {
  margin: 0.375rem 0 0.25rem;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
}

.overview-when {
  margin-bottom: 0.875rem;
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.overview-reopened {
  margin-bottom: 0.875rem;
  padding: 0.625rem 0.75rem;
  border-radius: 4px;
  background: var(--signaal-tint);
  color: var(--signaal);
  font-size: 0.8125rem;
}

.overview-doneby,
.overview-why {
  margin-bottom: 0.875rem;
  padding: 0.625rem 0.75rem;
  border-radius: 4px;
  background: var(--bg-subtle);
  color: var(--text-soft);
  font-size: 0.8125rem;
}

.overview-doneby q {
  display: block;
  margin-top: 0.25rem;
  font-style: italic;
}

.overview-figures {
  width: 100%;
  margin-bottom: 0.75rem;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.overview-figures th {
  padding: 0.25rem 0;
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: right;
}

.overview-figures th:first-child {
  text-align: left;
}

.overview-figures td {
  padding: 0.25rem 0;
}

.overview-figures td:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.overview-note-text {
  margin-bottom: 0.75rem;
  color: var(--text-soft);
  font-size: 0.875rem;
}

.overview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.overview-actions[hidden],
.overview-note[hidden],
.overview-error[hidden] {
  display: none;
}

.overview-note {
  margin-top: 0.75rem;
}

.overview-note label {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.overview-note textarea {
  width: 100%;
  min-height: 60px;
  padding: 0.5rem;
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  font: inherit;
  font-size: 0.875rem;
  resize: vertical;
}

.overview-count {
  color: var(--text-muted);
  font-size: 0.75rem;
  text-align: right;
}

.overview-error {
  margin-top: 0.75rem;
  color: var(--signaal);
  font-size: 0.8125rem;
}

/* ---------- Controles (proefversie): the findings, read only, in the Overzicht's card ---------- */
.controls-view #chatContainer,
.controls-view #composerDock {
  display: none;
}

.controls-lead {
  margin: -0.75rem 0 1.25rem;
  color: var(--text-soft);
  font-size: 0.9375rem;
}

.controls-lead:empty {
  display: none;
}

/* The line under the sentence: the look-back is still being calculated, some checks could not run, or the connection
   cannot be reached (it hides itself when empty, see .overview-status) */
.controls-status {
  margin: 0 0 1.25rem;
  font-size: 0.9375rem;
}

.controls-list {
  padding: 0 0 0.5rem;
}

/* Above the list: the contents ("A · 2   B · 9   C · 22", each a way to its block) and Alles gelezen */
.controls-listhead {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1.25rem;
}

.controls-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
}

.controls-toc-item {
  padding: 0.25rem 0;
  border: 0;
  background: none;
  color: var(--text-main);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
}

.controls-toc-item:hover {
  text-decoration: underline;
}

.controls-blockgroup + .controls-blockgroup {
  margin-top: 1.5rem;
}

/* A block (A. Leveranciers, B. Klanten, C. De afsluiting) as a band across the list: paper, an ink rule on top, the
   name left and the number of findings right; the first band sits at the top of the list */
.controls-block {
  /* the band stays on top of the list while its block scrolls by (spec lijst-detail section 3); a sticky box stops at
     the page's padding, so the top is moved up by it to the window's edge under the header */
  position: sticky;
  top: calc(-1 * var(--page-pad-top));
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0;
  padding: 0.75rem 1.25rem;
  border-top: 2px solid var(--text-main);
  background: var(--bg-strip);
  font-size: 0.9375rem;
  font-weight: 600;
}

.controls-block:first-child {
  margin-top: 0;
}

.controls-block-count {
  flex: none;
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 400;
}

.controls-block-note {
  padding: 0.5rem 1.25rem 0.25rem;
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.controls-section {
  margin: 0;
  padding: 0.75rem 1.25rem 0.375rem;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
}

/* A section without findings in a calculated report: its note ("Nog te weinig historiek: ...") as a quiet line */
.controls-section-note {
  margin: 0;
  padding: 0.5rem 1.25rem 0.75rem;
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.controls-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: baseline;
  width: 100%;
  padding: 0.75rem 1.25rem 0.75rem calc(1.25rem - 3px);
  border: 0;
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--bg-app);
  background: none;
  color: var(--text-main);
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
  /* a row scrolled into view does not hide under its block's band */
  scroll-margin-top: 3.25rem;
}

.controls-row:hover {
  background: var(--bg-subtle);
}

/* The selected row: a light background and a line in ink on the left, as in the work list */
.controls-row[aria-selected="true"] {
  background: var(--bg-subtle);
  border-left-color: var(--text-main);
}

.controls-text {
  min-width: 0;
}

.controls-who {
  display: block;
  font-weight: 400;
}

/* The short label takes one line in the list; the panel shows the finding in full */
.controls-melding {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text-soft);
  font-size: 0.875rem;
}

.controls-amount {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* The end of a block: "Toon alle (n)" brings back the findings beyond the ceiling (aria-pressed says whether they show),
   "Ruis (n)" is a group of the ones judged ruis, closed until it is opened */
.controls-show-all {
  display: block;
  margin: 0.625rem 1.25rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  background: none;
  color: var(--text-soft);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}

.controls-show-all:hover {
  border-color: var(--text-muted);
  color: var(--text-main);
}

.controls-show-all[aria-pressed="true"] {
  border-color: var(--text-main);
  color: var(--text-main);
}

.controls-noise {
  margin-top: 0.375rem;
  border-top: 1px solid var(--border-subtle);
}

.controls-noise > summary {
  padding: 0.625rem 1.25rem;
  color: var(--text-muted);
  font-size: 0.8125rem;
  cursor: pointer;
}

.controls-noise > summary:hover {
  color: var(--text-main);
}

/* the ruis rows are the same rows, a shade quieter */
.controls-noise .controls-who {
  color: var(--text-soft);
}

/* The box of a finding's verdict (spec v3): nuttig is green filled, bekend grey filled, open an outline in ink, and ruis a
   dashed grey outline. A picture only: the words are in the row and in the panel. No rust, a verdict is no deviation. */
.controls-box {
  display: inline-block;
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  border: 1.5px solid var(--text-main);
  border-radius: var(--radius-sm);
  background: none;
}

.controls-box[data-state="nuttig"] {
  border-color: var(--ok);
  background: var(--ok);
}

.controls-box[data-state="bekend"] {
  border-color: var(--series-4);
  background: var(--series-4);
}

.controls-box[data-state="open"] {
  border-color: var(--text-main);
  background: none;
}

.controls-box[data-state="ruis"] {
  border-style: dashed;
  border-color: var(--text-muted);
}

/* a row with the box has a column for it, left of the text; the box sits on the first line */
.controls-row-boxed {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.controls-row .controls-box {
  align-self: start;
  margin-top: 0.25rem;
}

/* the dot of an unread finding moves a little left, so it does not touch the box */
.controls-row-boxed .list-dot {
  left: 0.25rem;
}

/* The verdict in the panel: three buttons for a controller (the one that is on is filled like its box), the state as text
   for a viewer */
.controls-verdicts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.controls-verdict {
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-soft);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}

.controls-verdict:hover {
  border-color: var(--text-muted);
  color: var(--text-main);
}

.controls-verdict:disabled {
  opacity: 0.5;
  cursor: default;
}

.controls-verdict[aria-pressed="true"] {
  border-color: var(--text-main);
  color: var(--text-main);
  font-weight: 600;
}

.controls-verdict[data-verdict="nuttig"][aria-pressed="true"] {
  border-color: var(--ok);
  background: var(--ok);
  color: var(--text-white);
}

.controls-verdict[data-verdict="bekend"][aria-pressed="true"] {
  border-color: var(--series-4);
  background: var(--series-4);
  color: var(--text-main);
}

.controls-verdict[data-verdict="ruis"][aria-pressed="true"] {
  background: var(--bg-subtle);
}

.controls-verdict-state {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  color: var(--text-soft);
  font-size: 0.875rem;
}

/* A verdict that could not be saved: a line under the buttons in ink and bold. No rust: that stays for deviations (R35). */
.controls-verdict-error {
  margin: -0.5rem 0 1rem;
  color: var(--text-main);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* Mijn meldingen next to Alles gelezen: a toggle (aria-pressed), in ink while it is on */
.controls-mine:not([hidden]) + .list-allread {
  margin-left: 0;
}

.controls-mine[aria-pressed="true"] {
  border-color: var(--text-main);
  color: var(--text-main);
  font-weight: 600;
}

/* The third line of a row with a follow-up: the tick of a finding that is done, the owner and "te laat" */
.controls-row-followup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
}

.controls-owner {
  padding: 0 0.375rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-soft);
}

.controls-done {
  color: var(--ok);
  font-weight: 600;
}

/* A due date that has passed: the one place in the follow-up in rust, it is a deviation */
.controls-late {
  display: inline-block;
  padding: 0 0.375rem;
  border: 1px solid var(--signaal);
  border-radius: var(--radius-sm);
  background: var(--signaal-tint);
  color: var(--signaal);
  font-size: 0.8125rem;
}

/* Opvolging in the panel, under the verdict: owner, due date, note, done, and the history folded */
.controls-followup {
  margin: 0 0 1rem;
  padding: 0.75rem 0 0;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.875rem;
}

.controls-followup-title {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.controls-followup-reopened {
  margin: 0 0 0.5rem;
  color: var(--text-main);
  font-weight: 600;
}

.controls-followup-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.625rem;
  margin: 0 0 0.5rem;
}

.controls-followup-field .controls-followup-label {
  flex: 0 0 5.5rem;
  color: var(--text-soft);
}

.controls-followup-field select,
.controls-followup-field input[type="date"] {
  padding: 0.25rem 0.375rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-main);
  font: inherit;
}

.controls-followup-field textarea {
  flex: 1 1 100%;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-main);
  font: inherit;
  resize: vertical;
}

.controls-followup-mail {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--text-soft);
  font-size: 0.8125rem;
}

.controls-followup-read {
  margin: 0 0 0.375rem;
}

.controls-followup-read .controls-followup-label {
  color: var(--text-soft);
}

.controls-followup-state {
  margin: 0 0 0.5rem;
  color: var(--ok);
  font-weight: 600;
}

.controls-followup-done {
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-main);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}

.controls-followup-done:hover {
  border-color: var(--text-muted);
}

.controls-followup select:disabled,
.controls-followup input:disabled,
.controls-followup textarea:disabled,
.controls-followup-done:disabled {
  opacity: 0.5;
  cursor: default;
}

.controls-followup-history {
  margin-top: 0.75rem;
  color: var(--text-soft);
  font-size: 0.8125rem;
}

.controls-followup-history summary {
  cursor: pointer;
}

.controls-followup-history ol {
  margin: 0.375rem 0 0;
  padding-left: 1.25rem;
}

/* A follow-up that could not be saved, or a mail that could not go: in ink and bold, like a verdict that failed */
.controls-followup-error {
  margin: 0.5rem 0 0;
  color: var(--text-main);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* On the controls page the panel is 420px wide, for the chart; the Overzicht keeps 300px */
.controls-work {
  grid-template-columns: 1fr 420px;
}

.controls-detail-melding {
  margin-bottom: 0.875rem;
  font-size: 0.9375rem;
}

.controls-line {
  margin-bottom: 0.625rem;
  color: var(--text-soft);
  font-size: 0.875rem;
}

.controls-line-amount {
  color: var(--text-main);
  font-weight: 600;
}

.controls-line-intro,
.controls-line-month,
.controls-line-nadien,
.controls-line-boekingen {
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.controls-line-boekingen {
  overflow-wrap: anywhere;
}

/* The parts of a merged finding: a group heading with a line above it, the parts under it indented, each part's
   explanation small and grey right under its heading */
.controls-line-deel {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
  color: var(--text-main);
}

.controls-line-deel-amount {
  flex: none;
  font-variant-numeric: tabular-nums;
}

.controls-line-deel[data-level="1"] {
  margin-top: 0.875rem;
  padding-top: 0.625rem;
  border-top: 1px solid var(--border-subtle);
  font-weight: 600;
}

.controls-line-deel-uitleg {
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.controls-line-deel[data-level="2"],
.controls-line-deel-uitleg[data-level="2"] {
  padding-left: 0.875rem;
}

/* The chart in the panel (spec section 5): the series behind the finding, in ink, grey and the line colour; rust only
   for the deviation (the other account or rate, the finding's invoices, the credit, a booking reversed or missing, the
   missing month as an empty box with a dotted edge, the period of the finding as a light band) */
.controls-chart {
  position: relative;
  margin: 0.25rem 0 1rem;
}

.controls-chart svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.controls-chart-text {
  fill: var(--text-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.controls-chart-name {
  fill: var(--text-main);
  font-weight: 600;
}

.controls-chart-axis,
.controls-chart-ref {
  stroke: var(--border-subtle);
  stroke-width: 1;
}

path.controls-chart-line {
  fill: none;
  stroke-width: 1.5;
  stroke-linejoin: round;
}

path.controls-chart-ink {
  stroke: var(--text-main);
}

path.controls-chart-grey {
  stroke: var(--text-muted);
}

.controls-chart-ink {
  fill: var(--text-main);
}

.controls-chart-grey {
  fill: var(--text-muted);
}

/* A wider target than the dot itself, for the pointer */
.controls-chart-dot {
  stroke: transparent;
  stroke-width: 6px;
}

rect.controls-chart-grey,
rect.controls-chart-dev {
  stroke: var(--bg-card);
  stroke-width: 0.5;
}

.controls-chart-dev {
  fill: var(--signaal);
}

/* A segment under 3px keeps its colour all the way: no card-coloured outline eating it */
rect.controls-chart-thin {
  stroke: none;
}

.controls-chart-dot.controls-chart-dev.controls-chart-open {
  fill: var(--bg-card);
  stroke: var(--signaal);
  stroke-width: 1.5;
}

.controls-chart-gap {
  fill: none;
  stroke: var(--signaal);
  stroke-width: 1;
  stroke-dasharray: 2 2;
}

/* The period of a finding as a light band behind the bars or the line (revenue stopped or dropped, an accrual that
   stays flat) */
.controls-chart-band {
  fill: var(--signaal-tint);
}

/* The chart is one tab stop; the point or bar the arrow keys are on carries an ink edge */
.controls-chart svg:focus {
  outline: none;
}

.controls-chart svg:focus-visible {
  outline: 1px solid var(--text-main);
  outline-offset: 2px;
}

.controls-chart .controls-chart-active {
  stroke: var(--text-main);
  stroke-width: 1.5;
}

.controls-chart-tip {
  position: absolute;
  z-index: 2;
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  background: var(--bg-card);
  color: var(--text-soft);
  font-size: 0.75rem;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
}

.controls-chart-tip[hidden] {
  display: none;
}

.controls-chart-tip strong {
  display: block;
  color: var(--text-main);
  font-weight: 600;
}

.controls-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.875rem;
  margin-top: 0.375rem;
  color: var(--text-muted);
  font-size: 0.75rem;
}

.controls-chart-key {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
}

.controls-chart-swatch {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.controls-chart-swatch.controls-chart-ink {
  background: var(--text-main);
}

.controls-chart-swatch.controls-chart-grey {
  background: var(--text-muted);
}

.controls-chart-swatch.controls-chart-dev {
  background: var(--signaal);
}

.controls-chart-swatch.controls-chart-dev.controls-chart-open {
  border: 1.5px solid var(--signaal);
  border-radius: 50%;
  background: var(--bg-card);
}

.controls-chart-swatch.controls-chart-band {
  background: var(--signaal-tint);
}

.controls-chart-swatch.controls-chart-gap {
  border: 1px dashed var(--signaal);
}

/* ---------- Lijst en detail (spec 2026-10-22-lijst-detail-herziening) ---------- */
/* The panel stays in view: sticky at the top of the page, at most as high as the page, with its own scroll; the list
   scrolls with the page */
.list-detail {
  position: sticky;
  top: calc(-1 * var(--page-pad-top));
  align-self: start;
  max-height: calc(100cqh + var(--page-pad-top) + var(--page-pad-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.list-detail:focus:not(:focus-visible) {
  outline: none;
}

.list-back {
  display: none;
}

/* Vorige and Volgende under the panel */
.list-pager {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--border-subtle);
}

.list-pager .btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.overview-row[role="option"]:focus-visible,
.controls-row[role="option"]:focus-visible {
  outline-offset: -2px;
}

/* Unread (spec section 8): a dot in ink left of the row and the name in bold; no rust, unread is no deviation */
.list-dot {
  display: none;
  position: absolute;
  left: 0.375rem;
  top: 1.25rem;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--text-main);
}

.is-unread .list-dot {
  display: block;
}

.list-unread-text {
  display: none;
}

.is-unread .list-unread-text {
  display: inline;
}

.controls-row.is-unread .controls-who,
.overview-row.is-unread .overview-text {
  font-weight: 600;
}

.list-allread {
  margin-left: auto;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  background: none;
  color: var(--text-soft);
  font: inherit;
  font-size: 0.8125rem;
  white-space: nowrap;
  cursor: pointer;
}

.list-allread:hover {
  border-color: var(--text-muted);
  color: var(--text-main);
}

/* The number of unread findings on the Controles tab, and of what the Mapping still has to review on the Rapport tab
   (a controller's); hidden at 0 */
.app-menu-count {
  display: inline-block;
  min-width: 1.125rem;
  margin-left: 0.375rem;
  padding: 0 0.3125rem;
  border-radius: 4px;
  background: var(--text-main);
  color: var(--bg-card);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.125rem;
  text-align: center;
  vertical-align: 1px;
}

/* Under 800px the list takes the full width; a selection opens the panel, which slides over the list (full height, its
   own scroll, Terug naar de lijst on top) */
@media (max-width: 800px) {
  .overview-work {
    grid-template-columns: 1fr;
  }
  .controls-work {
    grid-template-columns: 1fr;
  }
  .overview-detail {
    border-left: 0;
    border-top: 1px solid var(--border-subtle);
  }
  .overview-work > .overview-list {
    border-right: 0;
  }
  /* no size container here: the fixed panel is placed against the window, not the page */
  .overview-page {
    container-type: normal;
  }
  .list-detail {
    position: fixed;
    inset: 0;
    z-index: 40;
    /* stretched to the window: align-self start would shrink a fixed box to its content */
    align-self: stretch;
    max-height: none;
    padding: 1rem 1rem 2rem;
    background: var(--bg-card);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.2s ease, visibility 0s linear 0.2s;
  }
  .list-open .list-detail {
    transform: none;
    visibility: visible;
    transition: transform 0.2s ease;
  }
  .list-back {
    display: inline-block;
    margin-bottom: 0.75rem;
    padding: 0.375rem 0;
    border: 0;
    background: none;
    color: var(--text-main);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
  }
}

@media (prefers-reduced-motion: reduce) {
  .list-detail,
  .list-open .list-detail {
    transition: none;
  }
}

@media (max-width: 640px) {
  .overview-page {
    --page-pad-top: 1.25rem;
    --page-pad-bottom: 3rem;
    padding: var(--page-pad-top) 1rem var(--page-pad-bottom);
  }
  .overview-title {
    font-size: 1.5rem;
  }
  .overview-title.briefing-kern {
    font-size: 1.0625rem;
  }
}

/* ---------- Koppeling (deel 3a): the Exact Online connection, in the product layer: lines, a white panel with a line. Since
   Instellingen fase 1 the block Exact Online of Instellingen > Koppeling; the page Abonnement and the Akkoord use the same
   classes ---------- */
.koppeling-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.koppeling-heading {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
}

.koppeling-rhythm {
  margin: 0 0 0.75rem;
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.koppeling-table {
  width: 100%;
  border-collapse: collapse;
}

.koppeling-table th {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}

.koppeling-table td {
  padding: 0.6875rem 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-main);
  font-size: 0.875rem;
  vertical-align: baseline;
}

.koppeling-table th:first-child,
.koppeling-table td:first-child {
  padding-left: 0;
}

.koppeling-sync {
  white-space: nowrap;
}

.koppeling-status {
  font-weight: 500;
}

.koppeling-line {
  display: block;
}

/* An open alert: its sentence in the signal colour */
.koppeling-table td.koppeling-alert {
  color: var(--signaal);
}

.koppeling-panel {
  max-width: 560px;
  padding: 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
}

.koppeling-details {
  margin-top: 0.5rem;
  border-top: 1px solid var(--border-subtle);
}

.koppeling-detail {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4375rem 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.8125rem;
}

.koppeling-detail dt {
  color: var(--text-muted);
}

.koppeling-detail dd {
  color: var(--text-main);
  text-align: right;
  overflow-wrap: anywhere;
}

/* The password that shows once: one click takes all of it */
.koppeling-secret {
  font-family: var(--font-mono);
  user-select: all;
}

.koppeling-keep {
  margin-top: 0.75rem;
  color: var(--text-main);
  font-size: 0.8125rem;
  font-weight: 600;
}

.koppeling-panel .btn {
  margin-top: 0.75rem;
}

/* The question before a new password: a sentence and two buttons, in the panel */
.koppeling-confirm-text {
  margin-top: 0.75rem;
  color: var(--text-main);
  font-size: 0.8125rem;
}

.koppeling-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5rem;
}

.koppeling-problem {
  margin-top: 0.75rem;
  color: var(--signaal);
  font-size: 0.8125rem;
}

.koppeling-problem:empty {
  display: none;
}

.koppeling-note {
  margin-top: 0.75rem;
  color: var(--text-muted);
  font-size: 0.8125rem;
}

/* The lifecycle (deel 3c): the sentence of the trial, the stop or the wipe, at the top of the block Exact Online */
.koppeling-notice {
  color: var(--text-main);
  font-size: 0.9375rem;
}

.instellingen-blok .koppeling-notice {
  margin: 0 0 0.75rem;
}

/* The panel to connect under the administrations */
.instellingen-blok .koppeling-panel {
  margin-top: 1.5rem;
}

/* "Koppeling stopzetten" in the red block, with the same question as before a new password */
.instellingen-gevaar .koppeling-confirm-actions .btn {
  margin-top: 0.75rem;
}

/* ---------- Abonnement (deel 3d): the block of a customer and the choice screen, in the same lines and white panel ---------- */

/* Verbruik deze maand in Instellingen > Abonnement en verbruik: "12 van 50 vragen" over its bar */
.abonnement-verbruik {
  margin: 0 0 0.375rem;
  color: var(--text-main);
  font-size: 0.875rem;
}

.abonnement-balk {
  display: block;
  width: 100%;
  max-width: 20rem;
  height: 0.5rem;
  accent-color: var(--brand);
}

/* "Abonnement bekijken" in Instellingen > Koppeling, under the sentence of the lifecycle */
.koppeling-abonnement {
  margin: 0 0 1.5rem;
}
.abonnement-lines {
  margin: 0 0 0.25rem;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border-subtle);
}

.abonnement-lines li {
  padding: 0.4375rem 0;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-main);
  font-size: 0.8125rem;
}

.abonnement-actions {
  margin-top: 0.25rem;
}

.abonnement-actions .btn:not([hidden]) {
  margin-right: 0.5rem;
}

.abonnement-choice {
  max-width: 640px;
}

.choice-group {
  margin: 0 0 1.25rem;
  padding: 0;
  border: none;
}

.choice-group legend {
  margin-bottom: 0.5rem;
  padding: 0;
  color: var(--text-main);
  font-size: 0.9375rem;
  font-weight: 600;
}

.choice-group .form-group {
  margin-bottom: 0.75rem;
}

.choice-check {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  padding: 0.5rem 0;
  color: var(--text-main);
  font-size: 0.875rem;
  cursor: pointer;
}

/* The four packages: one card each, side by side where they fit, the chosen one in the brand colour */
.choice-pakketten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.5rem;
}

.choice-pakket {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0.25rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--border-subtle);
}

.choice-pakket.is-gekozen {
  border-color: var(--brand);
}

.choice-pakket.is-grijs {
  color: var(--text-muted);
  cursor: not-allowed;
}

.choice-pakket-kop {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.choice-pakket .choice-price {
  margin-left: 0;
}

.choice-pakket .choice-note {
  flex-basis: auto;
  padding-left: 0;
}

.choice-pakket.is-grijs .choice-price {
  color: var(--text-muted);
}

.choice-check input {
  flex: none;
  margin: 0;
  accent-color: var(--brand);
}

.choice-name {
  font-weight: 600;
}

.choice-price {
  margin-left: auto;
  color: var(--text-main);
  white-space: nowrap;
}

.choice-note {
  flex-basis: 100%;
  padding-left: 1.5rem;
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.choice-note:empty {
  display: none;
}

.choice-consent {
  padding-left: 0;
  font-size: 0.8125rem;
}

.choice-ritme {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
}

.choice-number {
  max-width: 7rem;
}

.choice-group > .choice-note {
  margin: 0 0 0.5rem;
  padding-left: 0;
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.choice-summary {
  margin: 0.5rem 0 0;
  padding: 0.75rem 0;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-main);
  font-size: 0.875rem;
}

.choice-summary p + p {
  margin-top: 0.375rem;
}

.choice-summary p:first-child {
  font-weight: 600;
}

.choice-check a {
  color: var(--brand);
  text-decoration: underline;
}

/* ---------- Rapport (taak 12): the tab with the embedded report, the Indeling page and the Akkoord screen ---------- */
.rapport-view #chatContainer,
.rapport-view #composerDock {
  display: none;
}

.rapport-reason {
  margin: 0.25rem 0 0;
  color: var(--text-soft);
  font-size: 0.9375rem;
}

/* A plain link that is a button: it opens another screen of the app */
.rapport-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand);
  font: inherit;
  font-size: 0.875rem;
  text-decoration: underline;
  cursor: pointer;
}

.rapport-link:hover {
  color: var(--brand-hover);
}

.rapport-back {
  display: block;
  margin-bottom: 0.75rem;
}

/* The accounts not yet placed on a report line, above the report */
.rapport-banner {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--warning-border);
  border-radius: 4px;
  background: var(--warning-tint);
  color: var(--warning-text);
  font-size: 0.875rem;
}

.rapport-banner .rapport-link {
  color: inherit;
  font-weight: 600;
}

/* The pages of the report as tabs of the app (Power BI's own tab bar is off); they wrap when the row is full */
.rapport-pages {
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.rapport-pages[hidden] {
  display: none;
}

/* The report fills the width of the page and is as high as its page needs: the proportions of the page that shows (set
   from the report as aspect-ratio), so no empty band under it. The library puts its iframe inside. */
.rapport-frame {
  /* the proportions are those of the inside, without the border */
  box-sizing: content-box;
  width: calc(100% - 2px);
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
}

.rapport-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.rapport-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-top: 0.75rem;
}

/* The links at the bottom of the mapping sit together, not at the two edges of the page */
.indeling-foot {
  justify-content: flex-start;
}

.rapport-version {
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.indeling-content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.indeling-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}

.indeling-group {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

/* Na te kijken or Indeling, P&L or Balans, the search field */
.indeling-tabs button {
  font-size: 0.875rem;
  padding: 0.3125rem 0.875rem;
}

.indeling-search {
  width: 16rem;
  max-width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 0.625rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: inherit;
  font: inherit;
  font-size: 0.875rem;
}

.indeling-inbox-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
}

.indeling-inbox-label {
  overflow-wrap: anywhere;
}

.indeling-tag {
  padding: 0 0.4375rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-soft);
  font-size: 0.75rem;
  white-space: nowrap;
  cursor: default;
}

/* IC as a button: it turns intercompany off for that row */
.indeling-tag.is-button {
  background: var(--bg-card);
  font: inherit;
  font-size: 0.75rem;
  line-height: 1.4;
  cursor: pointer;
}

.indeling-tag.is-button:hover,
.indeling-tag.is-button:focus-visible {
  border-color: var(--brand);
  color: var(--brand);
}

/* The line picker: a small window under the row's button, with the search field and the lines */
.indeling-picker {
  position: absolute;
  z-index: 30;
  top: var(--picker-top, 0);
  left: var(--picker-left, 0);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: min(24rem, 100%);
  padding: 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}

.indeling-picker-title {
  font-size: 0.875rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.indeling-picker .indeling-search {
  width: 100%;
}

.indeling-picker-list {
  max-height: 18rem;
  overflow-y: auto;
  list-style: none;
}

.indeling-picker-head {
  padding: 0.375rem 0.5rem 0.25rem;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.indeling-picker-option {
  padding: 0.4375rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.indeling-picker-option.is-eigen {
  color: var(--text-soft);
}

.indeling-picker-option:hover,
.indeling-picker-option[aria-selected="true"] {
  background: var(--bg-hover);
}

.indeling-picker-option[aria-selected="true"] {
  box-shadow: inset 2px 0 0 var(--brand);
}

/* Verplaats naar… of the selection: above the bars at the bottom */
.indeling-picker.is-docked {
  position: fixed;
  top: auto;
  left: 50%;
  bottom: 8rem;
  transform: translateX(-50%);
}

/* The bar of the automatic save, at the bottom of the screen */
/* the bar of the selection above the bar of the save, in one column at the bottom of the screen */
.indeling-bars {
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  max-width: calc(100vw - 2rem);
  transform: translateX(-50%);
  pointer-events: none;
}

.indeling-savebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  max-width: 100%;
  padding: 0.5rem 0.625rem 0.5rem 1rem;
  border-radius: var(--radius-md);
  background: var(--text-main);
  color: var(--text-white);
  font-size: 0.875rem;
  pointer-events: auto;
}

.indeling-savebar.is-selection {
  background: var(--brand);
}

.indeling-savebar-button:disabled {
  opacity: 0.5;
}

.indeling-savebar-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.indeling-savebar-button {
  flex-shrink: 0;
  min-height: 32px;
  padding: 0 0.625rem;
  border: 1px solid var(--brand-accent);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-white);
  font: inherit;
  font-weight: 600;
}

.indeling-savebar-button:hover {
  background: rgba(255, 255, 255, 0.12);
}

.indeling-savebar.is-problem {
  background: var(--signaal);
}

/* A phone and a small tablet: the picker is a sheet at the bottom */
@media (max-width: 767px) {
  .indeling-picker {
    position: fixed;
    top: auto;
    left: 0;
    bottom: 0;
    width: 100vw;
    max-height: 75vh;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
  }
  .indeling-picker-list {
    max-height: none;
    flex: 1 1 auto;
  }
  /* Verplaats naar… of the selection: the same sheet at the bottom */
  .indeling-picker.is-docked {
    left: 0;
    bottom: 0;
    transform: none;
  }
  .indeling-picker-option {
    padding: 0.625rem 0.5rem;
  }
  .indeling-bars {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    align-items: stretch;
    transform: none;
  }
  .indeling-savebar {
    justify-content: space-between;
  }
  /* the tree is only to look at on a phone */
  .indeling-more,
  .indeling-more-col,
  .indeling-node.is-new {
    display: none;
  }
}

/* The tree: one grid per row, so the columns line up at every level; the name column carries the indent of its level */
.indeling-tree-wrap {
  min-width: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}

/* Structuur: Te plaatsen on the left (sticky, with a scroll of its own), the tree on the right; an empty left pane is narrow */
.indeling-panes {
  display: grid;
  grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
}

.indeling-panes.is-placed {
  grid-template-columns: 12rem minmax(0, 1fr);
}

.indeling-place {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 12rem);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}

.indeling-place-title {
  margin: 0;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-subtle);
  font-size: 0.9375rem;
  font-weight: 700;
}

.indeling-place-empty {
  padding: 0.75rem;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.indeling-place-list {
  overflow-y: auto;
  list-style: none;
}

.indeling-place-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.25rem 0.5rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.8125rem;
}

/* Toon alle n under the first 20 rows of Te plaatsen */
.indeling-place-more {
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
}

.indeling-place-row:last-child {
  border-bottom: 0;
}

.indeling-place-row[draggable="true"] {
  cursor: grab;
}

.indeling-place-row.is-selected {
  background: var(--bg-hover);
  box-shadow: inset 3px 0 0 var(--brand);
}

.indeling-place-row.is-dragging {
  opacity: 0.5;
}

.indeling-place-main {
  min-width: 0;
}

/* a tap on a row of Te plaatsen checks it (not for a viewer); where it can be dragged, the hand of grab stays */
.indeling-place-row.is-checkable:not([draggable="true"]) {
  cursor: pointer;
}

/* "2 adm.": grey text next to the name, with the administrations as its tooltip */
.indeling-admins {
  color: var(--text-muted);
  font-size: 0.75rem;
  white-space: nowrap;
  cursor: default;
}

.indeling-dialog-help {
  margin-top: 0.375rem;
  color: var(--text-soft);
  font-size: 0.8125rem;
}

.indeling-tree,
.indeling-group-list {
  list-style: none;
}

/* an account row off screen is not laid out until it scrolls near: a line of 2.000 accounts opens at once */
.indeling-node {
  scroll-margin-top: 0.5rem;
}

.indeling-node.is-rekening {
  content-visibility: auto;
  contain-intrinsic-size: auto 37px;
}

.indeling-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7.5rem 2rem;
  align-items: center;
  gap: 0 0.75rem;
  padding: 0.4375rem 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.875rem;
}

.indeling-tree > .indeling-node:last-child > .indeling-row,
.indeling-tree > .indeling-node:last-child .indeling-node:last-child > .indeling-row {
  border-bottom: 0;
}

.indeling-head {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 500;
}

.indeling-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  min-width: 0;
  padding-left: calc(var(--level, 0) * 1.25rem);
}

/* an account sits under the chevron of the node above it */
.is-rekening > .indeling-row > .indeling-main {
  padding-left: calc(var(--level, 0) * 1.25rem + 0.25rem);
}

.indeling-num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ⋯: the menu of a row, always there in light grey, darker when it is pointed at or has the focus */
.indeling-more {
  justify-self: end;
  width: 2rem;
  height: 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--series-prior);
  font: inherit;
  font-weight: 600;
  line-height: 1;
}

.indeling-more:hover,
.indeling-more:focus-visible,
.indeling-more[aria-expanded="true"] {
  border-color: var(--border-strong);
  background: var(--bg-card);
  color: var(--text-main);
}

.indeling-row.is-selected {
  background: var(--bg-hover);
  box-shadow: inset 3px 0 0 var(--brand);
}

/* the menu ⋯ under its button */
.indeling-menu {
  position: absolute;
  z-index: 30;
  top: var(--menu-top, 0);
  left: var(--menu-left, 0);
  display: flex;
  flex-direction: column;
  min-width: 14rem;
  padding: 0.25rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}

.indeling-menu-item {
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
}

.indeling-menu-item:hover,
.indeling-menu-item:focus-visible {
  background: var(--bg-hover);
  outline: none;
  box-shadow: inset 2px 0 0 var(--brand);
}

/* The rows by their depth, not their kind (§16.7, INDELING.rowWeight): every row on top bold on the grey band (a level, or a
   report line without one, such as Omzet), one deeper semibold, an own line normal, an account lighter and smaller; the
   amounts of the first two depths bold */
.is-w-top > .indeling-row {
  background: var(--bg-subtle);
  font-weight: 700;
}

.is-w-second > .indeling-row {
  font-weight: 600;
}

.is-w-normal > .indeling-row {
  font-weight: 500;
}

.is-w-eigen > .indeling-row {
  font-weight: 400;
}

.is-w-rekening > .indeling-row {
  color: var(--text-soft);
  font-size: 0.8125rem;
}

.is-w-top > .indeling-row > .indeling-num,
.is-w-second > .indeling-row > .indeling-num {
  font-weight: 700;
}

/* a search hit: marked, never filtered out */
.indeling-row.is-hit {
  background-image: linear-gradient(var(--brand), var(--brand));
  background-repeat: no-repeat;
  background-size: 3px 100%;
}

.indeling-row.is-hit .indeling-label,
.indeling-row.is-hit .indeling-name {
  font-weight: 600;
}

.indeling-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.125rem 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
}

.indeling-chevron {
  flex-shrink: 0;
  width: 0.4375rem;
  height: 0.4375rem;
  margin: 0 0.125rem;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(-45deg);
  transition: transform 0.15s;
}

.indeling-toggle[aria-expanded="true"] .indeling-chevron {
  transform: rotate(45deg);
}

.indeling-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.indeling-head > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.indeling-name {
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: text;
}

.indeling-count {
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 400;
  white-space: nowrap;
}

.indeling-badge {
  padding: 0 0.5rem;
  border: 1px solid var(--warning-border);
  border-radius: 999px;
  background: var(--warning-tint);
  color: var(--warning-text);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

/* dragging with the mouse: the row that takes it lights up, one that does not shows why (its title) */
.indeling-row[draggable="true"] {
  cursor: grab;
}

.indeling-row.is-dragging {
  opacity: 0.5;
}

.indeling-row.is-drop {
  background: var(--bg-hover);
  box-shadow: inset 0 0 0 2px var(--brand);
}

/* beside another own line: a line above or under it */
.indeling-row.is-drop-before {
  box-shadow: inset 0 3px 0 var(--brand);
}

.indeling-row.is-drop-after {
  box-shadow: inset 0 -3px 0 var(--brand);
}

/* a drop that is not allowed: a red line, and its title says why */
.indeling-row.is-no-drop {
  cursor: not-allowed;
  box-shadow: inset 0 -2px 0 var(--signaal);
}

.indeling-name-field {
  display: flex;
  flex: 1 1 12rem;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  min-width: 0;
}

.indeling-name-input {
  width: 20rem;
  max-width: 100%;
  min-width: 0;
  height: 30px;
  padding: 0 0.5rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: inherit;
  font: inherit;
}

.indeling-name-input[aria-invalid="true"] {
  border-color: var(--signaal);
}

.indeling-name-problem {
  flex-basis: 100%;
  color: var(--signaal);
  font-size: 0.8125rem;
  font-weight: 400;
}

/* Instellingen: a small dialog with the intercompany group */
.indeling-dialog {
  width: min(560px, calc(100vw - 2rem));
  max-height: min(80vh, 640px);
  margin: auto;
  padding: 1.25rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  color: var(--text-main);
}

.indeling-dialog::backdrop {
  background-color: rgba(21, 32, 27, 0.45);
}

.indeling-dialog-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.indeling-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* The window of the Cifer line: a row that goes to another section asks its line there */
.indeling-dialog.is-small {
  width: min(440px, calc(100vw - 2rem));
}

/* Te plaatsen: the place the AI suggests, grey under the name, with Goed */
.indeling-place-ai {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin-top: 0.125rem;
  color: var(--text-muted);
  font-size: 0.75rem;
}

.indeling-place-ai-text {
  overflow-wrap: anywhere;
}

/* + Nieuwe categorie: one row per section, as a link */
.indeling-new-category {
  font-size: 0.8125rem;
}

/* A phone and a small tablet: Te plaatsen above the tree, not sticky */
@media (max-width: 767px) {
  .indeling-panes,
  .indeling-panes.is-placed {
    grid-template-columns: minmax(0, 1fr);
  }
  .indeling-place {
    position: static;
    max-height: 50vh;
  }
}

/* A phone: the balance makes way, the indent is smaller, nothing scrolls sideways */
@media (max-width: 640px) {
  .indeling-row {
    grid-template-columns: minmax(0, 1fr) 6rem 0;
    gap: 0 0.375rem;
    padding: 0.4375rem 0.5rem;
  }
  /* an account's name wraps beside its labels */
  .is-rekening > .indeling-row .indeling-label {
    flex: 1 1 7rem;
  }
  .indeling-row > .indeling-num {
    font-size: 0.8125rem;
  }
  .indeling-main {
    padding-left: calc(var(--level, 0) * 0.75rem);
  }
  .is-rekening > .indeling-row > .indeling-main {
    padding-left: calc(var(--level, 0) * 0.75rem + 0.25rem);
  }
  .indeling-search {
    width: 100%;
  }
}

.akkoord-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 560px;
}

.akkoord-row {
  padding: 1.25rem 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
}

.akkoord-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.akkoord-head .koppeling-heading {
  margin: 0;
}

.akkoord-text {
  margin-top: 0.5rem;
  color: var(--text-soft);
  font-size: 0.875rem;
}

.akkoord-line {
  margin-top: 0.5rem;
  color: var(--text-main);
  font-size: 0.8125rem;
  font-weight: 600;
}

.akkoord-line:empty {
  display: none;
}

.akkoord-service {
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.akkoord-service a {
  color: var(--brand);
}

/* The switch: a square track with a square knob (the design system has no round corners) */
.akkoord-switch {
  position: relative;
  flex: none;
  width: 44px;
  height: 24px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--bg-subtle);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

.akkoord-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 2px;
  background: var(--text-muted);
  transition: transform 0.15s;
}

.akkoord-switch[aria-checked="true"] {
  background: var(--brand);
  border-color: var(--brand);
}

.akkoord-switch[aria-checked="true"]::after {
  background: var(--text-white);
  transform: translateX(20px);
}

.akkoord-switch:disabled {
  opacity: 0.6;
  cursor: default;
}

.akkoord-switch:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ---------- The locked tabs (menu.js): a tab the package does not have, light and with a lock, still clickable ---------- */
.app-menu-tab.is-locked {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--text-muted);
  opacity: 0.55;
  /* a tab that is only hidden while its company loads does not flash as locked */
  animation: lock-appear 0.15s ease 0.6s both;
}

.app-menu-tab.is-locked:hover,
.app-menu-tab.is-locked.active {
  opacity: 1;
}

.app-menu-tab.is-locked[hidden] {
  display: none;
}

.app-menu-lock {
  flex: none;
}

@keyframes lock-appear {
  from { opacity: 0; }
  to { opacity: 0.55; }
}

.lock-view #chatContainer,
.lock-view #composerDock {
  display: none;
}

.lock-page .lock-lead {
  max-width: 36rem;
  margin: 0 0 0.75rem;
  color: var(--text-main);
  font-size: 1.0625rem;
}

.lock-page .lock-line,
.lock-page .lock-note {
  max-width: 36rem;
  margin: 0 0 1.25rem;
  color: var(--text-muted);
}

/* ---------- Administraties kiezen: until the company chose, every tab makes way for the choice (app.js applyKiesBlok);
   the header and the menu stay. The same block is on top of Instellingen > Koppeling. ---------- */
.kies-view main:not(#kiesView),
.kies-view #composerDock {
  display: none !important;
}

.kies-page .instellingen-bloktitel {
  margin: 0.25rem 0 1rem;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.administraties-blok .instellingen-uitleg,
.administraties-kantoor {
  max-width: 36rem;
  margin: 0 0 1rem;
}

.administraties-lijst {
  max-width: 36rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border-subtle);
}

.administraties-rij {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border-subtle);
}

.administraties-rij.is-elders {
  color: var(--text-muted);
}

.administraties-vinkje {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0.125rem 0 0;
  accent-color: var(--brand);
}

.administraties-tekst {
  min-width: 0;
  overflow-wrap: anywhere;
}

.administraties-naam {
  font-weight: 600;
}

/* the name is the label of its check or switch: a tap on it works too */
label.administraties-naam {
  cursor: pointer;
}

.administraties-label {
  margin-left: 0.5rem;
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.administraties-meta {
  margin: 0.125rem 0 0;
  color: var(--text-muted);
  font-size: 0.875rem;
}

/* The note box of an alert on the Kasprognose */
.overview-note {
  margin: 0 0 1.25rem;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.overview-note[hidden] {
  display: none;
}

/* ---------- Overzicht in één oogopslag (spec 2026-11-03-overzicht-status): the sentence, the 4 status tiles and
   Vraagt aandacht. Green is quiet (only the dot); red and orange get an edge in their colour, like a key figure with an
   alert. Grey is a domain that does not count. ---------- */
.domain-dot {
  display: inline-block;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #8a938e;
}

.domain-dot[hidden] {
  display: none;
}

.overview-title .domain-dot {
  margin-right: 0.625rem;
  vertical-align: 0.2em;
}

.domain-dot.is-red,
.status-tile.is-red .domain-dot,
.attention-item.is-red .domain-dot {
  background: var(--bad);
}

.domain-dot.is-orange,
.status-tile.is-orange .domain-dot,
.attention-item.is-orange .domain-dot {
  background: var(--attention);
}

.domain-dot.is-green,
.status-tile.is-green .domain-dot {
  background: var(--good);
}

.status-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin: 0 0 1.25rem;
}

.status-tile {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
  padding: 0.875rem 1rem;
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  background: var(--bg-card);
  font: inherit;
  color: var(--text-main);
  text-align: left;
}

button.status-tile {
  cursor: pointer;
}

button.status-tile:hover {
  border-color: var(--text-muted);
}

.status-tile.is-red {
  border-color: var(--bad);
  box-shadow: inset 3px 0 0 var(--bad);
}

.status-tile.is-orange {
  border-color: var(--attention);
  box-shadow: inset 3px 0 0 var(--attention);
}

.status-tile-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* at most two lines */
.status-tile-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 0.9375rem;
  line-height: 1.35;
}

.status-tile.is-grey .status-tile-text,
.status-tile-sub {
  color: var(--text-muted);
}

.status-tile-sub {
  font-size: 0.8125rem;
}

.status-tile.is-loading .status-tile-text {
  font-style: italic;
}

.status-lock {
  margin-right: 0.25rem;
  vertical-align: -1px;
}

.attention {
  margin-top: 1.25rem;
  padding: 1rem 1rem 0.5rem;
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  background: var(--bg-card);
}

.attention[hidden] {
  display: none;
}

.attention-title {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.attention-list,
.attention-points {
  list-style: none;
  margin: 0;
  padding: 0;
}

.attention-points[hidden] {
  display: none;
}

.attention-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.75rem 0;
  border: 0;
  border-top: 1px solid var(--border-subtle);
  background: none;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
}

.attention-name {
  flex: none;
  min-width: 7.5rem;
  font-weight: 600;
}

.attention-summary {
  flex: 1;
  min-width: 0;
}

/* the arrow points right while closed and down while open */
.attention-chevron {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

.attention-row[aria-expanded="true"] .attention-chevron {
  transform: rotate(45deg);
}

.attention-points {
  padding: 0 0 0.75rem calc(10px + 0.625rem);
}

.attention-point {
  display: block;
  width: 100%;
  padding: 0.375rem 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.875rem;
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
}

.attention-row:hover .attention-summary,
.attention-point:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

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

/* Under 800px the 4 tiles make 2 rows of 2, each in its place; the sentence is not cut there (a row keeps its tiles
   equally high) */
@media (max-width: 800px) {
  .status-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .status-tile-text {
    display: block;
    -webkit-line-clamp: unset;
  }
  .attention-name {
    min-width: 0;
  }
}

/* ---------- Instellingen (fase 1): the settings of the company on one page, /instellingen/<groep> ---------- */
.instellingen-view #chatContainer,
.instellingen-view #composerDock {
  display: none;
}

/* Wide: the menu of groups on the left, the open group on the right */
.instellingen-werk {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

.instellingen-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.instellingen-item {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  color: var(--text-soft);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}

.instellingen-item:hover {
  background: var(--bg-hover);
  color: var(--text-main);
}

.instellingen-item[aria-current="page"] {
  background: var(--bg-card);
  color: var(--brand);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--brand);
}

.instellingen-groep {
  min-width: 0;
}

.instellingen-groeptitel {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
}

.instellingen-groeptitel:empty {
  display: none;
}

.instellingen-terug {
  display: none;
}

/* What cannot be undone (stop the connection, cancel the subscription): a red block at the bottom of its group */
.instellingen-gevaar {
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--danger);
  border-radius: 4px;
  background: var(--danger-tint);
}

/* A setting: its name, the control, the explanation under it */
.instellingen-veld {
  margin: 0 0 1.25rem;
}

.instellingen-veld-naam {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
}

.instellingen-uitleg {
  margin: 0.375rem 0 0;
  color: var(--text-muted);
  font-size: 0.8125rem;
}

/* "Opgeslagen" next to a control that saved */
.instellingen-opgeslagen {
  margin-left: 0.5rem;
  color: var(--good);
  font-size: 0.8125rem;
  font-weight: 500;
}

/* "Alleen een controller kan dit wijzigen.", and the reason of the server under it */
.instellingen-alleen-lezen {
  margin: 0;
  color: var(--text-muted);
}

.instellingen-alleen-lezen-reden {
  margin: 0.25rem 0 0;
  color: var(--text-muted);
  font-size: 0.8125rem;
}

/* "Kon niet laden", with Opnieuw proberen under it */
.instellingen-fout {
  margin: 0 0 0.75rem;
  color: var(--danger);
}

/* A select or input of a group (not the header's closing-dropdown, which has the header's phone rules) */
.instellingen-keuze {
  font: inherit;
  font-size: 0.875rem;
  height: 40px;
  padding: 0 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  color: var(--text-main);
  background: var(--bg-card);
  max-width: 100%;
}

/* A part of a group with its own title (the Controles-overzicht and Facturatie in Cifer-beheer) */
.instellingen-blok {
  margin: 0 0 2rem;
}

.instellingen-bloktitel {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}

.instellingen-subtitel {
  margin: 1.25rem 0 0.5rem;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 600;
}

/* A table of a group scrolls on its own on a narrow screen; relative, so a head only for a screen reader (visually-hidden is
   absolute) stays inside it and does not widen the page */
.instellingen-tabel {
  position: relative;
  overflow-x: auto;
  margin: 0 0 0.75rem;
}

/* The controls in a row: the form of Gebruikers en rollen, the 90 days and the CSV of Facturatie */
.instellingen-werkbalk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0.75rem 0;
}

.instellingen-werkbalk input[type="email"] {
  flex: 1;
  min-width: 12rem;
}

.instellingen-vinkje {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

/* The status line of a group: what was added or removed, or why not */
.instellingen-status {
  margin: 0.5rem 0;
  color: var(--text-muted);
  font-size: 0.875rem;
}

/* An empty status line takes no room but stays a live region (display: none would take it out of the accessibility tree,
   and what it says next would not be read) */
.instellingen-status:empty {
  margin: 0;
}

.instellingen-status.is-error {
  color: var(--danger);
}

/* AI en privacy: the switch with "Opgeslagen" next to it; the detail of a question of the log keeps the width of the visible
   table (.log-detail-body is 100cqw) */
.akkoord-bediening {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.instellingen-log .instellingen-tabel {
  container-type: inline-size;
}

@media (max-width: 800px) {
  /* Instellingen on a narrow screen (the width of the other list pages, narrowList in app.js): the list of groups first, a group
     on its own with "← Instellingen" above it */
  .instellingen-werk {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .instellingen-lijst .instellingen-groep {
    display: none;
  }
  body:not(.instellingen-lijst) .instellingen-menu {
    display: none;
  }
  .instellingen-items {
    gap: 0;
    border-top: 1px solid var(--border-subtle);
  }
  .instellingen-item {
    padding: 0.875rem 0.25rem;
    border-bottom: 1px solid var(--border-subtle);
    border-radius: 0;
    color: var(--text-main);
  }
  .instellingen-terug {
    display: inline-block;
    margin-bottom: 0.75rem;
    padding: 0.375rem 0;
    border: 0;
    background: none;
    color: var(--text-main);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
  }
}

/* On a phone the closing label gives way to the choice of administrations, and the panel spans the header's width (the header
   is the positioned parent there) so it never runs off the screen */
@media (max-width: 480px) {
  .header-left:has(.admin-choice:not([hidden])) .closing-label {
    display: none;
  }
}

@media (max-width: 640px) {
  .admin-choice-wrap {
    position: static;
  }
  .admin-choice-panel {
    left: 1rem;
    right: 1rem;
    top: 100%;
    max-width: none;
  }
}

/* Briefing (spec 2026-11-10-briefing-maandag): the week's headline, the choice of weeks and the parts in cards */
.briefing-view #chatContainer,
.briefing-view #composerDock {
  display: none;
}

.briefing-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.briefing-week {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.briefing-week[hidden] {
  display: none;
}

.briefing-parts {
  display: grid;
  gap: 1rem;
  max-width: 48rem;
}

.briefing-part {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 1rem 1.25rem;
  min-width: 0;
}

.briefing-part[hidden] {
  display: none;
}

.briefing-part-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.briefing-line {
  margin: 0.25rem 0;
  overflow-wrap: anywhere;
}

.briefing-items {
  margin: 0.25rem 0 0.75rem;
  padding-left: 1.25rem;
}

.briefing-items li {
  margin: 0.125rem 0;
  overflow-wrap: anywhere;
}

.briefing-note,
.briefing-explained {
  color: var(--text-muted);
}

.briefing-kas-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.briefing-part .briefing-open {
  margin-top: 0.75rem;
}

/* Briefing version 2 (spec 2026-11-12-briefing-v2-verhaal): the story with a small subhead per part, Wat te doen, and
   De cijfers per block, closed */
.briefing-story-part + .briefing-story-part {
  margin-top: 0.75rem;
}

.briefing-story-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0 0 0.125rem;
}

.briefing-top-list {
  margin: 0;
  padding-left: 1.25rem;
}

.briefing-top-list li {
  margin: 0.25rem 0;
  overflow-wrap: anywhere;
}

.briefing-analysis {
  line-height: 1.5;
}

.briefing-figures {
  margin-top: 0.75rem;
  font-size: 0.875rem;
}

.briefing-figures-all .briefing-figures {
  margin-top: 0.5rem;
}

.briefing-figures > summary {
  cursor: pointer;
  color: var(--text-soft);
}

.briefing-figures-wrap {
  margin-top: 0.5rem;
  overflow-x: auto;
}

.briefing-figures-table {
  border-collapse: collapse;
  width: 100%;
}

.briefing-figures-table th,
.briefing-figures-table td {
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.briefing-figures-table thead th {
  color: var(--text-muted);
  font-weight: 600;
}

.briefing-figures-table tbody th {
  text-align: left;
  font-weight: 400;
  white-space: normal;
  min-width: 10rem;
}