/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4 · slop test 58/58 · contrast: pass (40–41) */
/* Hallmark · genre: modern-minimal · macrostructure: Conversational FAQ (opened by the shared sector hero) · theme: custom (Apple-slick, one brand violet) · design-system: tokens.css + home.css + sector.css · designed-as-app
 * enrichment: Tier-A management overview on the shared hero stage (fictional example, modelled on the app's extra-work board) · nav: N5 glass capsule + N11 sector panel (shared) · footer: Ft5 statement (shared)
 * tone: Apple-like SaaS · audience: management of construction companies (€5M–€100M) · action: Plan een demo
 * Loaded after home.css and sector.css by management.html and en/management.html.
 */


/* ============ Hero: the management overview card ============ */
/* KPI strip sits in the dossier's quote slot, so home.js reveals it in the same beat */
.ov-kpis { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); color: var(--color-ink); }
.ov-kpis > div {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3xs) var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-paper-2); border-radius: var(--radius-input);
  min-width: 0;
}
.ov-kpis dt { color: var(--color-ink-2); font-size: var(--text-xs); line-height: 1.3; letter-spacing: 0; }
.ov-kpis dd { display: flex; align-items: baseline; gap: var(--space-xs); }
.ov-num { font-size: var(--text-md); font-weight: 600; line-height: 1.2; letter-spacing: var(--track-head); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ov-count { color: var(--color-ink-2); font-size: var(--text-xs); letter-spacing: 0; white-space: nowrap; }
.ov-kpis .is-flag .ov-num { color: var(--color-tag-meerwerk-ink); }
@media (min-width: 40rem) {
  .ov-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); }
  .ov-kpis > div { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; padding: var(--space-sm); }
  .ov-kpis dd { flex-direction: column; align-items: flex-start; gap: 0; }
}
.tag-neutral { background: var(--color-paper-2); color: var(--color-ink-2); }

/* ============ Questions ============ */
.qa { padding-block: 0 var(--space-3xl); }
.qa .sec-head { margin-bottom: var(--space-2xl); }
.qa-list { border-top: var(--rule-hair) solid var(--color-rule); }
.qa-item {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg) var(--space-2xl);
  padding-block: var(--space-xl) var(--space-2xl);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  scroll-margin-top: var(--nav-height);
}
@media (min-width: 60rem) { .qa-item { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); padding-block: var(--space-2xl); } }
.qa-q {
  max-width: 18ch;
  font-size: var(--text-lg); font-weight: 600; line-height: 1.15; letter-spacing: var(--track-head);
  text-wrap: balance; overflow-wrap: anywhere; min-width: 0;
}
.qa-a { display: grid; gap: var(--space-lg); align-content: start; min-width: 0; }
.qa-a > p, .qa-points li { max-width: 36rem; color: var(--color-ink-2); }
.qa-a strong { color: var(--color-ink); font-weight: 600; }
.qa-a .spec { max-width: 36rem; }
.qa-a .link-chev { justify-self: start; }

.qa-points { display: grid; gap: var(--space-md); }

/* Two measured figures, same voice as the sector pages */
.qa-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); max-width: 36rem; }
.qa-src { margin-top: calc(-1 * var(--space-sm)); color: var(--color-ink-2); }

/* Where an extra-work item stands: the app's four columns, left to right */
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.flow li { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-xs); line-height: 1.4; letter-spacing: 0; white-space: nowrap; }
.flow li span { padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-tag); background: var(--color-paper-2); font-weight: 500; }
.flow li:not(:last-child)::after { content: "›"; color: var(--color-ink-2); font-size: 1.2em; line-height: 1; }
.flow li:last-child span { background: var(--color-tag-bevestig); color: var(--color-tag-bevestig-ink); }

.qa-a .v-lists { max-width: 36rem; }

.qa-people { display: grid; grid-template-columns: repeat(2, minmax(0, 11rem)); gap: var(--space-md); }
.qa-people figure { margin: 0; }
.qa-people img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-card); background: var(--color-paper-2); }
.qa-people figcaption { margin-top: var(--space-xs); color: var(--color-ink-2); }