:root {
  /* BES-139 canonical semantic token contract. */
  --color-brand-navy: #0d1b33;
  --color-brand-accent: #2d7ff9;
  --color-neutral-light: #f2f4f7;
  --color-text-primary: var(--color-brand-navy);
  --color-text-secondary: #6b7280;
  --color-text-label: #314a63;
  --color-surface-primary: #fff;
  --color-surface-shell: #f5f7fa;
  --color-link: var(--color-brand-navy);
  --color-link-hover: var(--color-brand-accent);
  --color-focus: var(--color-brand-accent);
  --color-action-primary-text: #fff;
  --color-action-primary-bg: #216fe0;
  --color-action-primary-border: #216fe0;
  --color-action-primary-hover-text: #fff;
  --color-action-primary-hover-bg: #1e64d5;
  --color-action-primary-hover-border: #1e64d5;
  --color-action-primary-active-text: #fff;
  --color-action-primary-active-bg: #1a5cc8;
  --color-action-primary-active-border: #1a5cc8;
  --color-action-secondary-text: #28435d;
  --color-info-text: #315469;
  --color-info-bg: #e9f5f7;
  --color-info-border: var(--color-brand-accent);
  --color-success-text: #276041;
  --color-success-bg: #e5f4eb;
  --color-success-border: #9dceb0;
  --color-warning-text: #8a3a00;
  --color-warning-bg: #fff3e6;
  --color-warning-border: #f0b36b;
  --color-error-text: #a13b3b;
  --color-error-bg: #fbe9e9;
  --color-error-border: #a13b3b;
  --color-disabled-text: #52677a;
  --color-disabled-bg: #eef2f5;
  --color-disabled-border: #c7d2dc;
  --color-control-border: #708399;
  --color-decorative-border: #dce3ea;
  --color-status-warning: #C14B00;
  --color-status-neutral-text: #40566d;
  --color-status-neutral-bg: #e7edf3;
  --color-status-neutral-border: #40566d;
  --color-status-cancelled-text: #6e596f;
  --color-status-cancelled-bg: #f0eaf1;
  --color-status-cancelled-border: #6e596f;
  --color-work-area-kaders: #216fe0;
  --color-work-area-inrichting: #327554;
  --color-work-area-toetsing: #6650a4;
  --color-work-area-inzicht: #176b8b;

  /* Compatibility aliases: components migrate to --color-* semantic tokens. */
  --infidence-navy: var(--color-brand-navy);
  --infidence-blue: var(--color-brand-accent);
  --infidence-neutral-light: var(--color-neutral-light);
  --infidence-neutral-text: var(--color-text-secondary);
  --infidence-primary-text: var(--color-text-primary);
  --infidence-secondary-text: var(--color-text-secondary);
  --infidence-page-background: var(--color-neutral-light);
  --infidence-surface: var(--color-surface-primary);
  --infidence-primary-action: var(--color-action-primary-bg);
  --infidence-link: var(--color-link);
  --infidence-focus: var(--color-focus);
  --infidence-work-area-kaders: var(--color-work-area-kaders);
  --infidence-work-area-inrichting: var(--color-work-area-inrichting);
  --infidence-work-area-toetsing: var(--color-work-area-toetsing);
  --infidence-work-area-inzicht: var(--color-work-area-inzicht);
  --infidence-shell-background: var(--color-surface-shell);
  --infidence-shell-border: var(--color-decorative-border);
  --infidence-shell-danger: var(--color-error-text);
}

/* Authenticated shell uses central semantic aliases; no page-level brand overrides. */
body.infidence-app {
  --infidence-navy-deep: var(--infidence-primary-text);
  --infidence-accent: var(--infidence-primary-action);
  --infidence-text: var(--infidence-primary-text);
  --infidence-muted: var(--infidence-secondary-text);
  --infidence-background: var(--infidence-shell-background);
  --infidence-border: var(--infidence-shell-border);
  --infidence-danger: var(--infidence-shell-danger);
}

/*
 * BES-142 phase A: shared authenticated presentation foundation.
 * :where(body.infidence-app) confines these rules to the authenticated shell
 * without increasing the specificity of the component selectors they replace.
 */
:where(body.infidence-app) input,
:where(body.infidence-app) textarea,
:where(body.infidence-app) select,
:where(body.infidence-app) button {
  font: inherit;
}

:where(body.infidence-app) .breadcrumbs {
  margin: 0 0 14px;
  color: var(--infidence-muted);
  font-size: .82rem;
  font-weight: 650;
}

:where(body.infidence-app) .breadcrumbs__list { display: flex; flex-wrap: wrap; gap: 5px 8px; margin: 0; padding: 0; list-style: none; }
:where(body.infidence-app) .breadcrumbs__item { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
:where(body.infidence-app) .breadcrumbs__item + .breadcrumbs__item::before { flex: 0 0 auto; color: var(--infidence-muted); content: "›"; }
:where(body.infidence-app) .breadcrumbs__item a,
:where(body.infidence-app) .breadcrumbs__item span { min-width: 0; overflow-wrap: anywhere; }
:where(body.infidence-app) .breadcrumbs__item [aria-current="page"] { color: var(--color-text-primary); font-weight: 700; }
:where(body.infidence-app) .breadcrumbs a,
:where(body.infidence-app) .breadcrumbs a:visited,
:where(body.infidence-app) .subnav a,
:where(body.infidence-app) .subnav a:visited,
:where(body.infidence-app) .plain-list a,
:where(body.infidence-app) .plain-list a:visited,
:where(body.infidence-app) .back-link { color: var(--color-link); text-decoration: underline; text-underline-offset: .12em; }
:where(body.infidence-app) .breadcrumbs a:hover,
:where(body.infidence-app) .subnav a:hover,
:where(body.infidence-app) .plain-list a:hover,
:where(body.infidence-app) .back-link:hover { color: var(--color-link-hover); }

:where(body.infidence-app) .page-heading { max-width: 760px; margin-bottom: 34px; }
:where(body.infidence-app) .eyebrow { margin: 0 0 8px; color: var(--infidence-accent); font-size: .78rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
:where(body.infidence-app) h1,
:where(body.infidence-app) h2,
:where(body.infidence-app) h3 { margin: 0; }
:where(body.infidence-app) h1 { font-size: clamp(2rem, 4vw, 2.65rem); line-height: 1.1; letter-spacing: -.035em; }
:where(body.infidence-app) .page-heading > p:last-child,
:where(body.infidence-app) .page-heading__intro { margin: 14px 0 0; color: var(--infidence-muted); font-size: 1rem; line-height: 1.6; }

:where(body.infidence-app) .page-section { margin-top: 20px; padding: 25px; border: 1px solid var(--infidence-border); border-radius: 14px; background: var(--infidence-surface); box-shadow: 0 4px 12px rgb(16 42 67 / 4%); }
:where(body.infidence-app) .page-section h2 { font-size: 1.08rem; letter-spacing: -.015em; }

:where(body.infidence-app) .empty-state { padding: 8px 0; color: var(--infidence-muted); font-size: .9rem; }
:where(body.infidence-app) [hidden] { display: none !important; }
:where(body.infidence-app) .record-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
:where(body.infidence-app) .plain-list { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
:where(body.infidence-app) .plain-list li { line-height: 1.5; }
:where(body.infidence-app) .record-list__item { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px; border: 1px solid #e6ebf0; border-radius: 10px; background: #fbfcfd; }
:where(body.infidence-app) .record-list__item--stacked { align-items: flex-start; }
:where(body.infidence-app) .record-list__title,
:where(body.infidence-app) .record-list__title:visited { color: var(--color-link); font-weight: 750; text-decoration: underline; text-underline-offset: .12em; }
:where(body.infidence-app) .record-list__title:hover { color: var(--color-link-hover); }
:where(body.infidence-app) .record-list p { margin: 5px 0 0; color: var(--infidence-muted); font-size: .9rem; line-height: 1.45; }

/* Status text shares the value line; the pill extends by its padding plus border. */
:where(body.infidence-app) .status-badge {
  --status-badge-padding-inline: 9px;
  --status-badge-border-width: 1px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  min-inline-size: 0;
  max-inline-size: 100%;
  margin-inline-start: calc(0px - var(--status-badge-padding-inline) - var(--status-badge-border-width));
  padding: 3px var(--status-badge-padding-inline);
  border: var(--status-badge-border-width) solid var(--color-status-neutral-border);
  border-radius: 999px;
  background: var(--color-status-neutral-bg);
  color: var(--color-status-neutral-text);
  font-size: .78rem;
  font-weight: 750;
  white-space: normal;
  overflow-wrap: anywhere;
}
:where(body.infidence-app) .status-badge--open { border-color: var(--color-info-border); background: var(--color-info-bg); color: var(--color-info-text); }
:where(body.infidence-app) .status-badge--closed,
:where(body.infidence-app) .status-badge--completed,
:where(body.infidence-app) .status-badge--success,
:where(body.infidence-app) .status-badge--active,
:where(body.infidence-app) .status-badge--applicable { border-color: var(--color-success-border); background: var(--color-success-bg); color: var(--color-success-text); }
:where(body.infidence-app) .status-badge--in_progress,
:where(body.infidence-app) .status-badge--warning,
:where(body.infidence-app) .status-badge--in_research,
:where(body.infidence-app) .status-badge--attention { border-color: var(--color-warning-border); background: var(--color-warning-bg); color: var(--color-warning-text); }
:where(body.infidence-app) .status-badge--neutral,
:where(body.infidence-app) .status-badge--draft,
:where(body.infidence-app) .status-badge--not_assessed,
:where(body.infidence-app) .status-badge--not_applicable { border-color: var(--color-status-neutral-border); background: var(--color-status-neutral-bg); color: var(--color-status-neutral-text); }
:where(body.infidence-app) .status-badge--info,
:where(body.infidence-app) .status-badge--supported { border-color: var(--color-info-border); background: var(--color-info-bg); color: var(--color-info-text); }
:where(body.infidence-app) .status-badge--historical,
:where(body.infidence-app) .status-badge--revoked { border-color: var(--color-disabled-border); background: var(--color-disabled-bg); color: var(--color-disabled-text); }
:where(body.infidence-app) .status-badge--cancelled { border-color: var(--color-status-cancelled-border); background: var(--color-status-cancelled-bg); color: var(--color-status-cancelled-text); }
:where(body.infidence-app) .status-badge--error,
:where(body.infidence-app) .status-badge--blocked { border-color: var(--color-error-border); background: var(--color-error-bg); color: var(--color-error-text); }

:where(body.infidence-app) .status-tile { display: grid; min-width: 0; gap: 6px; padding: 14px; border: 1px solid var(--color-decorative-border); border-radius: 10px; background: var(--color-surface-primary); box-shadow: inset 2px 0 0 var(--color-status-neutral-border); }
:where(body.infidence-app) .status-tile__label { color: var(--color-text-label); font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
:where(body.infidence-app) .status-tile__value { margin: 0; color: var(--color-text-primary); font-size: .92rem; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
:where(body.infidence-app) .status-tile--info { box-shadow: inset 2px 0 0 var(--color-info-border); }
:where(body.infidence-app) .status-tile--success { box-shadow: inset 2px 0 0 var(--color-success-border); }
:where(body.infidence-app) .status-tile--warning { box-shadow: inset 2px 0 0 var(--color-warning-border); }
:where(body.infidence-app) .status-tile--historical { box-shadow: inset 2px 0 0 var(--color-disabled-border); }

:where(body.infidence-app) .task-section-heading { display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: start; gap: 16px; margin-bottom: 16px; }
:where(body.infidence-app) .task-section-heading__title-group { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 10px; min-width: 0; }
:where(body.infidence-app) .task-section-heading__icon { width: 20px; height: 20px; margin-top: 1px; color: var(--color-brand-accent); }
:where(body.infidence-app) .task-section-heading__icon svg { display: block; width: 100%; height: 100%; }
:where(body.infidence-app) .task-section-heading__title-group p { margin-bottom: 0; }
:where(body.infidence-app) .task-section-heading > .button { justify-self: end; text-decoration: none; }

:where(body.infidence-app) .detail-facts dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; }
:where(body.infidence-app) .detail-facts__full-width { grid-column: 1 / -1; padding-top: 16px; border-top: 1px solid var(--color-decorative-border); }
:where(body.infidence-app) .detail-facts dt { margin-bottom: 6px; color: var(--infidence-muted); font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
:where(body.infidence-app) .detail-facts dd { margin: 0; overflow-wrap: anywhere; line-height: 1.45; }

:where(body.infidence-app) .form-card form + h3 { margin-top: 24px; }
:where(body.infidence-app) .form-card form p,
:where(body.infidence-app) details form p,
:where(body.infidence-app) .field-group { display: grid; gap: 6px; margin: 0 0 16px; }
:where(body.infidence-app) .form-card label,
:where(body.infidence-app) details label { display: grid; gap: 6px; color: var(--color-text-label); font-size: .9rem; font-weight: 700; }
:where(body.infidence-app) .field-group > label { display: block; color: var(--color-text-label); font-size: .9rem; font-weight: 700; }
:where(body.infidence-app) .form-card fieldset.field-group,
:where(body.infidence-app) .form-card .field-group > fieldset { display: grid; min-inline-size: 0; gap: 8px; margin: 0 0 16px; padding: 0; border: 0; }
:where(body.infidence-app) .form-card fieldset.field-group > legend,
:where(body.infidence-app) .form-card .field-group > fieldset > legend { display: block; width: 100%; margin: 0; padding: 0; color: var(--color-text-label); font-size: .9rem; font-weight: 700; }
:where(body.infidence-app) .form-card .field-group label:has(input[type="radio"]),
:where(body.infidence-app) .form-card .field-group label:has(input[type="checkbox"]) { display: inline-flex; align-items: center; gap: 8px; width: fit-content; cursor: pointer; }
:where(body.infidence-app) .form-card .field-group input[type="radio"],
:where(body.infidence-app) .form-card .field-group input[type="checkbox"] { width: auto; margin: 0; padding: 0; accent-color: var(--color-action-primary-bg); }
:where(body.infidence-app) .form-card input,
:where(body.infidence-app) .form-card select,
:where(body.infidence-app) .form-card textarea,
:where(body.infidence-app) details input,
:where(body.infidence-app) details select,
:where(body.infidence-app) details textarea { width: 100%; padding: 9px 10px; border: 1px solid var(--color-control-border); border-radius: 7px; background: var(--color-surface-primary); color: var(--infidence-text); font: inherit; font-weight: 400; }
:where(body.infidence-app) .form-card textarea,
:where(body.infidence-app) details textarea { min-height: 92px; resize: vertical; }
:where(body.infidence-app) .form-card input:disabled,
:where(body.infidence-app) .form-card select:disabled,
:where(body.infidence-app) .form-card textarea:disabled,
:where(body.infidence-app) details input:disabled,
:where(body.infidence-app) details select:disabled,
:where(body.infidence-app) details textarea:disabled,
:where(body.infidence-app) .form-card .button:disabled,
:where(body.infidence-app) details .button:disabled { border-color: var(--color-disabled-border); background: var(--color-disabled-bg); color: var(--color-disabled-text); box-shadow: inset 0 0 0 1px rgb(82 103 122 / 12%); cursor: not-allowed; opacity: 1; }
:where(body.infidence-app) .form-card .helptext,
:where(body.infidence-app) .form-card form span,
:where(body.infidence-app) details form span,
:where(body.infidence-app) .field-help { margin: 0; color: var(--infidence-muted); font-size: .82rem; line-height: 1.4; }
:where(body.infidence-app) .field-required,
:where(body.infidence-app) .field-optional { display: inline-block; margin-left: 5px; font-size: .72rem; font-weight: 750; letter-spacing: .02em; }
:where(body.infidence-app) .field-required,
:where(body.infidence-app) .form-required-legend__marker { color: var(--color-text-label); }
:where(body.infidence-app) .field-optional,
:where(body.infidence-app) .field-marker-context { color: var(--color-text-secondary); }
:where(body.infidence-app) .form-required-legend { display: none; margin: 0 0 16px; color: var(--color-text-secondary); font-size: .82rem; line-height: 1.4; }
:where(body.infidence-app) form:has(.field-required) .form-required-legend { display: block; }
:where(body.infidence-app) .field-group ul.errorlist,
:where(body.infidence-app) .errorlist { margin: 0; padding-left: 18px; color: var(--color-error-text); font-size: .84rem; }
:where(body.infidence-app) .form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

/* Retrospective UX polish: ordinary fields use the available form width.
 * A paired .form-row remains the explicit two-column exception. */
:where(body.infidence-app) .form-card form,
:where(body.infidence-app) details > form { max-width: none; }
:where(body.infidence-app) details { min-width: 0; }
:where(body.infidence-app) details > summary { display: inline-flex; align-items: center; gap: 8px; color: var(--color-link); font-weight: 750; cursor: pointer; text-decoration: underline; text-underline-offset: .12em; }
:where(body.infidence-app) details > summary:hover { color: var(--color-link-hover); }
:where(body.infidence-app) details[open] > summary { margin-bottom: 16px; color: var(--color-text-primary); }
:where(body.infidence-app) details > form { padding: 16px; border: 1px solid var(--color-decorative-border); border-radius: 8px; background: var(--color-surface-primary); }
:where(body.infidence-app) .management-disclosures { display: grid; gap: 10px; }
:where(body.infidence-app) .management-disclosures > details { padding: 12px; border: 1px solid var(--color-decorative-border); border-radius: 8px; }
:where(body.infidence-app) .choice-grid,
:where(body.infidence-app) .applicability-root-choice__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
:where(body.infidence-app) .choice-grid > label,
:where(body.infidence-app) .applicability-root-choice__items > div > label { display: flex; width: 100%; min-height: 100%; gap: 9px; padding: 12px; border: 1px solid var(--color-control-border); border-radius: 8px; cursor: pointer; }
:where(body.infidence-app) .choice-grid > label:hover,
:where(body.infidence-app) .applicability-root-choice__items > div > label:hover { border-color: var(--color-link-hover); }
:where(body.infidence-app) .choice-grid > label:has(input:checked),
:where(body.infidence-app) .applicability-root-choice__items > div > label:has(input:checked) { border-color: var(--color-action-primary-border); box-shadow: inset 3px 0 0 var(--color-action-primary-bg); }
:where(body.infidence-app) .audit-registration,
:where(body.infidence-app) .review-cycle-audit-context { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--color-decorative-border); }
:where(body.infidence-app) .audit-registration .field-warning,
:where(body.infidence-app) .review-cycle-audit-context .field-warning { display: block; margin-top: 8px; }
:where(body.infidence-app) .page-heading .heading-with-status { margin: 0 0 14px; }

:where(body.infidence-app) .button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 9px 14px; border: 1px solid #bdc9d5; border-radius: 8px; background: var(--color-surface-primary); color: var(--color-action-secondary-text); font: inherit; font-size: .9rem; font-weight: 750; cursor: pointer; }
:where(body.infidence-app) .button:hover { border-color: var(--color-link-hover); color: var(--color-link-hover); }
:where(body.infidence-app) .button--primary { border-color: var(--color-action-primary-border); background: var(--color-action-primary-bg); color: var(--color-action-primary-text); }
:where(body.infidence-app) .button--primary:hover { border-color: var(--color-action-primary-hover-border); background: var(--color-action-primary-hover-bg); color: var(--color-action-primary-hover-text); }
:where(body.infidence-app) .button--primary:active { border-color: var(--color-action-primary-active-border); background: var(--color-action-primary-active-bg); color: var(--color-action-primary-active-text); }
:where(body.infidence-app) .button--danger { border-color: var(--color-error-border); background: var(--color-error-bg); color: var(--color-error-text); }
:where(body.infidence-app) .form-actions { display: flex; align-items: center; gap: 10px; }
:where(body.infidence-app) .form-actions .button { text-decoration: none; }
:where(body.infidence-app) .inline-actions { display: grid; gap: 8px; min-width: 225px; }
:where(body.infidence-app) .inline-actions details { padding: 10px; border: 1px solid var(--color-decorative-border); border-radius: 8px; background: var(--color-surface-primary); }
:where(body.infidence-app) .inline-actions summary { color: var(--color-info-text); font-size: .88rem; font-weight: 750; cursor: pointer; }
:where(body.infidence-app) .inline-actions form { margin-top: 16px; }

:where(body.infidence-app) a:focus-visible,
:where(body.infidence-app) button:focus-visible,
:where(body.infidence-app) summary:focus-visible,
:where(body.infidence-app) input:focus-visible,
:where(body.infidence-app) select:focus-visible,
:where(body.infidence-app) textarea:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

@media (max-width: 780px) {
  :where(body.infidence-app) .detail-facts dl,
  :where(body.infidence-app) .form-row { grid-template-columns: 1fr; }
  :where(body.infidence-app) .record-list__item { align-items: flex-start; flex-direction: column; }
  :where(body.infidence-app) .inline-actions { width: 100%; }
  :where(body.infidence-app) .task-section-heading { grid-template-columns: 1fr; }
  :where(body.infidence-app) .task-section-heading > .button { justify-self: start; }
  :where(body.infidence-app) .choice-grid,
  :where(body.infidence-app) .applicability-root-choice__items { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  :where(body.infidence-app) .page-section { min-height: 0; padding: 21px; }
  :where(body.infidence-app) .form-actions { align-items: stretch; flex-direction: column; }
  :where(body.infidence-app) .form-actions .button { width: 100%; }
}

/* Shared presentation for a native checkbox explicitly presented as a switch. */
:where(body.infidence-app) .form-switch { position: relative; }
:where(body.infidence-app) .form-card .field-group .form-switch input[type="checkbox"][role="switch"] { position: absolute; z-index: 1; top: 0; left: 0; width: 44px; height: 24px; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
:where(body.infidence-app) .form-switch .form-switch__track { position: relative; display: inline-block; flex: 0 0 44px; width: 44px; height: 24px; border: 1px solid var(--color-control-border); border-radius: 12px; background: var(--color-status-neutral-bg); }
:where(body.infidence-app) .form-switch__track::before { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--color-status-neutral-text); }
:where(body.infidence-app) .form-switch input:checked + .form-switch__track { border-color: var(--color-action-primary-border); background: var(--color-action-primary-bg); }
:where(body.infidence-app) .form-switch input:checked + .form-switch__track::before { transform: translateX(20px); background: var(--color-action-primary-text); }
:where(body.infidence-app) .form-switch input:focus-visible + .form-switch__track { outline: 3px solid var(--color-focus); outline-offset: 3px; }
:where(body.infidence-app) .page-heading .page-heading__title-with-icon { display: flex; align-items: center; gap: 16px; min-width: 0; margin-bottom: 14px; }
:where(body.infidence-app) .page-heading__title-with-icon > .workarea-card__icon { flex: 0 0 64px; }
:where(body.infidence-app) .page-heading .page-heading__title-with-icon > h1 { min-width: 0; margin: 0; overflow-wrap: anywhere; }