/* Inter is served from this application (wwwroot/lib/inter, SIL Open Font License);
   a page never requests a font from another host. */
@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../lib/inter/InterVariable.woff2") format("woff2");
}

@font-face {
    font-family: Inter;
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("../lib/inter/InterVariable-Italic.woff2") format("woff2");
}

:root {
    /* The four layers of the prototype: page, surface, raised, line. Then ink in three depths, never transparent. */
    --page-color: #f0eee9;
    --surface-color: #ffffff;
    --surface-muted-color: #e8e4db;
    --text-color: #1a1a1a;
    --soft-text-color: #4a463f;
    --muted-text-color: #676158;
    --accent-color: #7c6734;
    --accent-hover-color: #6a582c;
    --accent-contrast-color: #ffffff;
    --khaki-color: #8c7b55;
    --sand-color: #b7a483;
    --border-color: #d1cabd;
    --danger-color: #b4523f;
    --danger-soft-color: #f7e6e2;
    --success-color: #4f7a5b;
    --success-soft-color: #e3eee5;
    --warning-color: #c07b3c;
    --warning-soft-color: #faeee0;
    --overlay-color: rgba(43, 38, 31, .6);
    /* The six muted accents: they carry meaning (the kind of appointment, the kind of label), never decoration. */
    --accent-clay: #8f3e28;
    --accent-moss: #33593d;
    --accent-slate: #414f68;
    --accent-plum: #6c3e64;
    --accent-ochre: #7c6021;
    --accent-sea: #2a5c5f;
    --control-radius: 8px;
    --panel-radius: 14px;
    --panel-shadow: 0 1px 2px rgba(26, 26, 26, .05), 0 8px 24px -12px rgba(26, 26, 26, .12);
    --raised-shadow: 0 2px 6px rgba(12, 11, 10, .1), 0 18px 40px -18px rgba(12, 11, 10, .3);
    --overlay-shadow: 0 6px 14px rgba(12, 11, 10, .16), 0 40px 90px -30px rgba(12, 11, 10, .55);
    --side-width: 64px;
    --side-open-width: 228px;
    /* The edges of the device (round 9): under the clock and above the home bar belong to the device. */
    --edge-top: env(safe-area-inset-top, 0px);
    --edge-bottom: env(safe-area-inset-bottom, 0px);
    --screen-height: 100vh;
    color-scheme: light;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    font-feature-settings: "cv11", "ss01";
}

@supports (height: 100dvh) {
    :root {
        --screen-height: 100dvh;
    }
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--page-color);
    color: var(--text-color);
}

body {
    min-height: 100vh;
    margin: 0;
    background: var(--page-color);
}

button,
input {
    font: inherit;
}

[v-cloak] {
    display: none;
}

/* THE OFFICE CHROME (AdviseurChrome). The strip on the left keeps its icons, a search button and the portfolio in four
   numbers, and slides open over the page on hover or keyboard focus; it never pushes the content. The bar above the
   content carries the title of the screen, the bell and its one gold action. Under 64rem the strip is a bar under
   the thumb and search, the bell, Nieuw and the profile move into the bar on top. */
.app {
    min-height: 100vh;
}

html.is-scroll-locked {
    overflow: hidden;
}

.app--office {
    display: flex;
}

.app-side {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 40;
    display: flex;
    width: var(--side-width);
    height: 100vh;
    height: var(--screen-height);
    flex-direction: column;
    justify-content: space-between;
    padding: 24px 10px;
    overflow: hidden;
    border-right: 1px solid var(--border-color);
    background: var(--page-color);
    box-shadow: var(--raised-shadow);
    transition: width .2s ease-out, padding .2s ease-out;
}

.app-side:hover,
.app-side:has(:focus-visible),
.app-side:has(.app-profile[open]) {
    width: var(--side-open-width);
    padding-inline: 16px;
}

/* Parts that show only while the strip is open, and parts that show only while it is narrow. */
.app-side__label,
.app-side__wordmark {
    display: none;
    min-width: 0;
}

.app-side:hover .app-side__label,
.app-side:has(:focus-visible) .app-side__label,
.app-side:has(.app-profile[open]) .app-side__label,
.app-side:hover .app-side__wordmark,
.app-side:has(:focus-visible) .app-side__wordmark,
.app-side:has(.app-profile[open]) .app-side__wordmark {
    display: block;
}

.app-side:hover .app-side__dot,
.app-side:has(:focus-visible) .app-side__dot,
.app-side:has(.app-profile[open]) .app-side__dot,
.app-side:hover .app-side__counts,
.app-side:has(:focus-visible) .app-side__counts,
.app-side:has(.app-profile[open]) .app-side__counts,
.app-side:hover .app-side__mark,
.app-side:has(:focus-visible) .app-side__mark,
.app-side:has(.app-profile[open]) .app-side__mark {
    display: none;
}

.app-side__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    color: var(--accent-text-color);
    text-decoration: none;
}

.app-side__mark {
    display: grid;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    place-items: center;
    border: 1.5px solid var(--accent-color);
    border-radius: 6px;
    color: var(--accent-text-color);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
}

.app-side__mark--image {
    border: 0;
    object-fit: contain;
}

.app-side__wordmark {
    overflow: hidden;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.app-side__wordmark--image {
    height: 22px;
    width: auto;
    object-fit: contain;
}

.app-brand__image {
    display: block;
    height: 28px;
    width: auto;
}

.app-side__search {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 28px;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    background: transparent;
    color: var(--muted-text-color);
    font-size: 12px;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease-out, color .15s ease-out, transform .16s var(--ease-apple-snappy, ease-out);
}

.app-side__search:hover {
    border-color: var(--khaki-color);
    color: var(--soft-text-color);
}

.app-side__search .icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.app-side:hover .app-side__search-text,
.app-side:has(:focus-visible) .app-side__search-text,
.app-side:has(.app-profile[open]) .app-side__search-text {
    flex: 1;
}

.app-side__kbd {
    padding: 2px 6px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-family: inherit;
    font-size: 10px;
    white-space: nowrap;
}

.app-side__nav {
    display: grid;
    gap: 2px;
    margin-top: 24px;
}

.app-side__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px;
    border-radius: var(--control-radius);
    color: var(--soft-text-color);
    font-size: 13px;
    text-decoration: none;
    transition: background-color .15s ease-out, color .15s ease-out;
}

.app-side:hover .app-side__link,
.app-side:has(:focus-visible) .app-side__link,
.app-side:has(.app-profile[open]) .app-side__link,
.app-side:hover .app-side__search,
.app-side:has(:focus-visible) .app-side__search,
.app-side:has(.app-profile[open]) .app-side__search,
.app-side:hover .app-side__brand,
.app-side:has(:focus-visible) .app-side__brand,
.app-side:has(.app-profile[open]) .app-side__brand {
    justify-content: flex-start;
    padding-inline: 12px;
}

.app-side__icon {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.app-side__icon .icon {
    width: 16px;
    height: 16px;
    color: var(--muted-text-color);
}

.app-side__link--start,
.app-side__link[aria-current="page"] {
    color: var(--text-color);
    font-weight: 600;
}

.app-side__link--start .icon,
.app-side__link[aria-current="page"] .icon {
    color: var(--accent-text-color);
}

.app-side__link:hover {
    background: var(--surface-color);
}

.app-side__link[aria-current="page"] {
    background: var(--surface-muted-color);
}

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

.app-side__dot {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-color);
}

.app-side__pill {
    display: none;
}

.app-side__badge {
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--accent-color);
    color: var(--accent-contrast-color);
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.app-side__news {
    color: var(--accent-text-color);
    font-size: 11px;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

.app-side__counts {
    display: grid;
    gap: 12px;
    margin: 32px 0 0;
    padding: 24px 0 0;
    border-top: 1px solid var(--border-color);
    list-style: none;
}

.app-side__count {
    text-align: center;
}

.app-side__count-value {
    display: block;
    color: var(--text-color);
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.app-side__count-icon {
    display: flex;
    justify-content: center;
    color: var(--muted-text-color);
}

.app-side__count-icon svg {
    width: 14px;
    height: 14px;
}

.app-side__count--attention .app-side__count-icon,
.app-side__count--attention .app-side__count-value {
    color: var(--danger-text-color);
}

.app-side__portfolio {
    margin-top: 36px;
}

.app-side__portfolio-title {
    margin: 0;
    padding: 0 12px;
    color: var(--muted-text-color);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* Four small tiles, two by two (feedback of 9 October): the number large, the label under it. */
.app-side__portfolio-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0 0;
    padding: 0 12px;
}

.app-side__portfolio-row {
    display: flex;
    flex-direction: column-reverse;
    gap: 2px;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--surface-color);
}

.app-side__portfolio-row dt {
    color: var(--muted-text-color);
    font-size: 11px;
    line-height: 1.35;
    hyphens: auto;
    overflow-wrap: anywhere;
}

.app-side__portfolio-row dd {
    margin: 0;
    color: var(--text-color);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.app-side__portfolio-row--attention {
    border-color: color-mix(in srgb, var(--danger-color) 35%, var(--border-color));
    background: var(--danger-soft-color);
}

.app-side__portfolio-row--attention dd {
    color: var(--danger-text-color);
}

@media (min-width: 80rem) {
    :root {
        --side-width: 76px;
    }
}

/* The narrow strip: every place is a 40 by 40 square with its icon in the middle; once the strip opens, the row takes
   the full width again with the name beside the icon. */
@media (min-width: 64.0625rem) {
    .app-side__link {
        width: 40px;
        height: 40px;
        margin-inline: auto;
        padding: 0;
    }

    .app-side:hover .app-side__link,
    .app-side:has(:focus-visible) .app-side__link,
    .app-side:has(.app-profile[open]) .app-side__link {
        width: auto;
        height: auto;
        margin-inline: 0;
        padding: 8px 12px;
    }

    .app-side:hover .app-profile__trigger,
    .app-side:has(:focus-visible) .app-profile__trigger,
    .app-side:has(.app-profile[open]) .app-profile__trigger {
        justify-content: flex-start;
        padding: 10px 12px;
    }
}

/* The profile: the photo (initials here), and the name with the function once the strip is open. */
.app-profile {
    position: relative;
}

.app-profile__trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    color: var(--text-color);
    font-size: 12px;
    list-style: none;
    cursor: pointer;
    transition: border-color .15s ease-out;
}

.app-profile__trigger::-webkit-details-marker {
    display: none;
}

.app-profile__trigger:hover {
    border-color: var(--khaki-color);
}

.app-profile__trigger:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.app-profile--bar .app-profile__trigger {
    padding: 0;
    border: 0;
}

.app-profile__avatar {
    display: grid;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    place-items: center;
    border-radius: 50%;
    background: var(--accent-color);
    color: var(--accent-contrast-color);
    font-size: 11px;
    font-weight: 700;
}

.app-profile__who {
    min-width: 0;
}

.app-profile__name,
.app-profile__job {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-profile__name {
    color: var(--text-color);
    font-size: 12px;
    font-weight: 600;
}

.app-profile__job {
    color: var(--muted-text-color);
    font-size: 11px;
}

/* Layer 3, raised: the menu slides over the page, above the button in the strip and under it in a bar. */
.app-profile__menu {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: 50;
    width: 212px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    background: var(--surface-muted-color);
    box-shadow: var(--raised-shadow);
    animation: app-menu-in .16s ease-out;
}

.app-profile--bar .app-profile__menu {
    top: calc(100% + 8px);
    right: 0;
    bottom: auto;
    left: auto;
}

.app-profile__item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--border-color);
    background: transparent;
    color: var(--soft-text-color);
    font: inherit;
    font-size: 12px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease-out, color .15s ease-out;
}

.app-profile__menu > :last-child .app-profile__item,
.app-profile__menu > .app-profile__item:last-child {
    border-bottom: 0;
}

.app-profile__item:hover,
.app-profile__item:focus-visible {
    background: var(--surface-color);
    color: var(--text-color);
}

.app-profile__item .icon {
    width: 14px;
    height: 14px;
}

@keyframes app-menu-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
}

.app-body {
    min-width: 0;
    flex: 1;
}

.app--office .app-body {
    padding-left: var(--side-width);
}

.app-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 12px 32px;
    border-bottom: 1px solid var(--border-color);
}

.app-topbar__lead {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.app-topbar__heading {
    min-width: 0;
    line-height: 1.25;
}

.app-topbar__title {
    margin: 0;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-topbar__mark,
.app-topbar__summary,
.app-topbar__search,
.app-topbar__profile,
.app-topbar__new .icon {
    display: none;
}

.app-topbar__actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
}

.app-topbar__search {
    width: 36px;
    height: 36px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: var(--control-radius);
    background: transparent;
    color: var(--soft-text-color);
    cursor: pointer;
    transition: background-color .15s ease-out, color .15s ease-out;
}

.app-topbar__search:hover {
    background: var(--surface-muted-color);
    color: var(--text-color);
}

.app-topbar__bell {
    position: relative;
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 8px;
    color: var(--soft-text-color);
    transition: background-color .15s ease-out, color .15s ease-out;
}

.app-topbar__bell:hover {
    background: var(--surface-muted-color);
    color: var(--text-color);
}

.app-topbar__count {
    position: absolute;
    top: 4px;
    right: 2px;
    display: grid;
    height: 16px;
    min-width: 16px;
    place-items: center;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--accent-color);
    color: var(--accent-contrast-color);
    font-size: 9px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.app-topbar__new {
    min-height: 0;
    padding: 8px 14px;
    font-size: 12px;
}

/* The bell (Meldingenknop): a dot for unread, a panel under it with the newest rows. Gold means unread. */
.app-bell {
    position: relative;
}

.app-bell__button {
    position: relative;
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: var(--control-radius);
    color: var(--soft-text-color);
    list-style: none;
    cursor: pointer;
    transition: background-color .15s ease-out, color .15s ease-out;
}

.app-bell__button::-webkit-details-marker {
    display: none;
}

.app-bell__button:hover,
.app-bell[open] .app-bell__button {
    background: var(--surface-muted-color);
    color: var(--text-color);
}

.app-bell__button:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.app-bell__button .icon {
    width: 16px;
    height: 16px;
}

.app-bell__dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-color);
}

.app-bell__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 45;
    width: 340px;
    max-width: calc(100vw - 32px);
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--surface-color);
    box-shadow: var(--raised-shadow);
    animation: app-menu-in .16s ease-out;
}

.app-bell__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color);
}

.app-bell__title {
    color: var(--muted-text-color);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.app-bell__count {
    color: var(--muted-text-color);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.app-bell__empty {
    margin: 0;
    padding: 20px 16px;
    color: var(--muted-text-color);
    font-size: 12px;
    line-height: 1.625;
}

.app-bell__list {
    max-height: 19rem;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
    scrollbar-width: thin;
}

.app-bell__list > li + li {
    border-top: 1px solid var(--border-color);
}

.app-bell__list form {
    margin: 0;
}

.app-bell__item {
    display: flex;
    width: 100%;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease-out;
}

.app-bell__item:hover,
.app-bell__item:focus-visible {
    background: var(--surface-muted-color);
}

.app-bell__item:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: -2px;
}

.app-bell__item-dot {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--accent-color);
}

.app-bell__item--read .app-bell__item-dot {
    background: transparent;
}

.app-bell__item-body {
    min-width: 0;
    flex: 1;
}

.app-bell__item-text {
    display: block;
    color: var(--text-color);
    font-size: 12px;
    line-height: 1.375;
}

.app-bell__item-meta {
    display: block;
    margin-top: 2px;
    color: var(--muted-text-color);
    font-size: 11px;
}

/* Quick search (Opdrachtenbalk): a window near the top of the picture over a dark layer. */
.quick-search {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: calc(var(--edge-top) + 4rem) 16px 16px;
}

@media (min-width: 40rem) {
    .quick-search {
        padding: 96px 24px 24px;
    }
}

.quick-search__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(0, 0, 0, .6);
    cursor: default;
    animation: quick-search-fade .14s ease-out;
}

.quick-search__window {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 36rem;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--panel-radius);
    background: var(--surface-color);
    animation: quick-search-in .18s cubic-bezier(.23, 1, .32, 1);
}

.quick-search__field {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
}

.quick-search__field > .icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--muted-text-color);
}

.quick-search__input {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-color);
    font-size: 14px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.quick-search__input::-webkit-search-cancel-button {
    display: none;
}

.quick-search__input::placeholder {
    color: var(--muted-text-color);
}

/* The cross only on a touch screen: behind a mouse Escape and a click beside it are enough. */
.quick-search__close {
    display: none;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    place-items: center;
    margin: -12px -8px -12px 0;
    border: 0;
    border-radius: var(--control-radius);
    background: transparent;
    color: var(--muted-text-color);
    cursor: pointer;
}

.quick-search__close:hover {
    background: var(--surface-muted-color);
    color: var(--text-color);
}

@media (max-width: 64rem), (pointer: coarse) {
    .quick-search__close {
        display: grid;
    }
}

.quick-search__skeleton {
    display: grid;
    gap: 14px;
    padding: 18px 16px;
}

.quick-search__results {
    max-height: 320px;
    margin: 0;
    padding: 4px 0;
    overflow-y: auto;
    list-style: none;
    scrollbar-width: thin;
}

.quick-search__nothing {
    padding: 24px 16px;
    color: var(--muted-text-color);
    font-size: 12px;
    text-align: center;
}

.quick-search__hit {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    color: inherit;
    text-decoration: none;
}

.quick-search__hit.is-active {
    background: var(--surface-muted-color);
}

.quick-search__kind {
    display: inline-flex;
    flex-shrink: 0;
}

.quick-search__kind .icon {
    width: 14px;
    height: 14px;
    color: var(--muted-text-color);
}

.quick-search__text {
    min-width: 0;
    flex: 1;
}

.quick-search__title,
.quick-search__caption {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quick-search__title {
    color: var(--text-color);
    font-size: 13px;
}

.quick-search__caption {
    color: var(--muted-text-color);
    font-size: 11px;
}

.quick-search__hint {
    margin: 0;
    padding: 8px 16px;
    border-top: 1px solid var(--border-color);
    color: var(--muted-text-color);
    font-size: 10px;
}

@keyframes quick-search-fade {
    from {
        opacity: 0;
    }
}

@keyframes quick-search-in {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(.98);
    }
}

@media (prefers-reduced-motion: reduce) {
    .quick-search__backdrop,
    .quick-search__window,
    .app-bell__panel,
    .app-profile__menu {
        animation: none;
    }
}

/* The portal chrome: the seller and the party get one bar. White and quiet (KlantChrome): the mark, their few places
   as pills with the current one in charcoal, a confidentiality mark, the bell and the profile. The selectors carry the
   bar's class so they outrank the older header rules further down. Under 64rem the places move into a bar under the
   thumb, above the device's home bar. */
.app-header {
    position: sticky;
    top: 0;
    z-index: 30;
    padding-top: env(safe-area-inset-top, 0px);
    border-bottom: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--surface-color) 96%, transparent);
    backdrop-filter: blur(8px);
}

.app-header .app-header__inner {
    display: flex;
    width: min(1100px, 100%);
    min-height: 64px;
    margin-inline: auto;
    padding: 0 24px;
    align-items: center;
    gap: 24px;
}

.app-header .app-brand {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
    color: var(--accent-text-color);
    text-decoration: none;
}

.app-brand__mark {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1.5px solid var(--accent-color);
    border-radius: 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
}

.app-brand__mark--image {
    border: 0;
    object-fit: contain;
}

.app-brand__wordmark {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.app-header .app-navigation {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 4px;
}

.app-header .app-navigation__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--soft-text-color);
    font-size: 14px;
    text-decoration: none;
    transition: background-color .15s ease-out, color .15s ease-out;
}

.app-header .app-navigation__link .icon {
    flex-shrink: 0;
}

.app-header .app-navigation__link:hover {
    background: var(--page-color);
    color: var(--text-color);
}

.app-header .app-navigation__link[aria-current="page"] {
    background: var(--text-color);
    color: var(--page-color);
    font-weight: 600;
}

.app-header .app-navigation__link:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent-color) 28%, transparent);
    outline-offset: 2px;
}

.app-header__tools {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
}

.app-header__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 4px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--page-color);
    color: var(--khaki-text-color);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.app-header__badge .icon {
    width: 12px;
    height: 12px;
}

.app-navigation__form {
    margin: 0;
}

.app-navigation__logout {
    padding: .45rem .7rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--soft-text-color);
    font: inherit;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
}

.app-navigation__logout:hover {
    background: var(--surface-muted-color);
    color: var(--text-color);
}

@media (max-width: 64rem) {
    /* A filter on the bar would make it the frame of the fixed bar below; the bar is solid here instead. */
    .app-header {
        background: var(--surface-color);
        backdrop-filter: none;
    }

    .app-header .app-header__inner {
        min-height: 56px;
        padding: 0 16px;
        justify-content: space-between;
    }

    .app-header .app-navigation {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 40;
        justify-content: space-around;
        gap: 0;
        padding: 6px 8px calc(env(safe-area-inset-bottom, 0px) + 4px);
        border-top: 1px solid var(--border-color);
        background: color-mix(in srgb, var(--surface-color) 96%, transparent);
        backdrop-filter: blur(8px);
    }

    .app-header .app-navigation__link {
        flex: 1;
        max-width: 130px;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        padding: 8px 4px;
        font-size: 10px;
    }

    .app-header .app-navigation__link .icon {
        width: 19px;
        height: 19px;
    }

    .app-header .app-navigation__link[aria-current="page"] {
        background: transparent;
        color: var(--text-color);
    }

    .app-header .app-navigation:not(:has(a)) {
        display: none;
    }

    .app:not(.app--office):has(.app-navigation a) .app-body {
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 72px);
    }
}

@media (max-width: 40rem) {
    .app-brand__wordmark,
    .app-brand__image {
        display: none;
    }

    .app-header__badge {
        padding: 4px 8px;
        font-size: 9px;
    }
}

/* On a tablet and a phone the strip becomes a bar under the thumb with three equal places, and the bar on top carries
   the mark, the title with the portfolio in one line, search, the bell, Nieuw as a gold plus and the profile. */
@media (max-width: 64rem) {
    .app--office {
        flex-direction: column;
    }

    .app-side,
    .app-side:hover,
    .app-side:has(:focus-visible),
    .app-side:has(.app-profile[open]) {
        position: fixed;
        top: auto;
        bottom: 0;
        z-index: 40;
        width: 100%;
        height: auto;
        flex-direction: row;
        padding: 6px 8px calc(var(--edge-bottom) + 4px);
        border-top: 1px solid var(--border-color);
        border-right: 0;
        box-shadow: none;
    }

    .app-side__top {
        width: 100%;
    }

    .app-side__brand,
    .app-side__search,
    .app-side__counts,
    .app-side .app-profile,
    .app-side .app-side__dot:not(.app-side__dot--always),
    .app-side .app-side__label.app-side__portfolio,
    .app-side:hover .app-side__label.app-side__portfolio,
    .app-side:has(:focus-visible) .app-side__label.app-side__portfolio,
    .app-side .app-side__label.app-side__badge,
    .app-side:hover .app-side__label.app-side__badge,
    .app-side:has(:focus-visible) .app-side__label.app-side__badge,
    .app-side .app-side__label.app-side__news,
    .app-side:hover .app-side__label.app-side__news,
    .app-side:has(:focus-visible) .app-side__label.app-side__news {
        display: none;
    }

    .app-side__nav {
        display: flex;
        width: 100%;
        max-width: 520px;
        margin: 0 auto;
    }

    .app-side__link,
    .app-side:hover .app-side__link,
    .app-side:has(:focus-visible) .app-side__link {
        flex: 1;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        padding: 8px 0;
        color: var(--muted-text-color);
        font-size: 10px;
        font-weight: 400;
    }

    .app-side__link:hover,
    .app-side__link[aria-current="page"] {
        background: transparent;
    }

    .app-side__link[aria-current="page"] {
        color: var(--text-color);
        font-weight: 600;
    }

    .app-side__icon .icon {
        width: 19px;
        height: 19px;
    }

    .app-side__link--start .icon {
        color: var(--muted-text-color);
    }

    .app-side__link[aria-current="page"] .icon {
        color: var(--accent-text-color);
    }

    .app-side__name,
    .app-side:hover .app-side__name,
    .app-side:has(:focus-visible) .app-side__name {
        display: block;
        flex: none;
    }

    .app-side .app-side__dot--always,
    .app-side:hover .app-side__dot--always {
        display: block;
    }

    .app-side__pill {
        position: absolute;
        top: -6px;
        right: -8px;
        display: grid;
        height: 16px;
        min-width: 16px;
        place-items: center;
        padding: 0 4px;
        border-radius: 999px;
        background: var(--accent-color);
        color: var(--accent-contrast-color);
        font-size: 9px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }

    .app--office .app-body {
        padding-left: 0;
        padding-bottom: calc(var(--edge-bottom) + 64px);
    }

    .app-topbar {
        position: sticky;
        top: 0;
        z-index: 30;
        gap: 12px;
        padding: calc(var(--edge-top) + 12px) 16px 10px;
        background: var(--page-color);
    }

    .app-topbar__mark {
        display: flex;
        flex-shrink: 0;
        text-decoration: none;
    }

    .app-topbar__mark .app-side__mark {
        display: grid;
        width: 32px;
        height: 32px;
    }

    .app-topbar__title {
        font-size: 13px;
    }

    .app-topbar__summary {
        display: block;
        margin: 0;
        overflow: hidden;
        color: var(--muted-text-color);
        font-size: 10px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .app-topbar__actions {
        gap: 4px;
    }

    .app-topbar__search,
    .app-bell__button {
        display: grid;
        width: 36px;
        height: 36px;
    }

    .app-topbar__new {
        display: grid;
        width: 36px;
        height: 36px;
        margin-left: 4px;
        place-items: center;
        padding: 0;
    }

    .app-topbar__new .icon {
        display: block;
        width: 16px;
        height: 16px;
    }

    .app-topbar__new-label {
        display: none;
    }

    .app-topbar__profile {
        display: block;
        margin-left: 4px;
    }

    .app-topbar__profile .app-profile__trigger {
        width: 36px;
        height: 36px;
    }

    .app-bell__panel {
        position: fixed;
        top: calc(var(--edge-top) + 60px);
        right: 16px;
        left: auto;
    }
}

@media (min-width: 40rem) and (max-width: 64rem) {
    .app-topbar {
        padding-inline: 24px;
    }
}

.page-content {
    width: min(70rem, calc(100% - 2rem));
    margin-inline: auto;
}

.app--office .page-content {
    width: auto;
    margin: 0;
    padding: 1.75rem 2rem;
}

.app--office .page-heading h1 {
    font-size: 15px;
    padding-left: 0;
}

.app-header__inner {
    display: flex;
    min-height: 4.5rem;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.app-brand {
    color: var(--accent-text-color);
    font-size: .88rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-decoration: none;
    text-transform: uppercase;
}

.app-navigation {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.app-navigation__link,
.app-navigation__logout {
    border: 0;
    background: transparent;
    color: var(--text-color);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.app-navigation__link:hover,
.app-navigation__logout:hover {
    color: var(--accent-text-color);
}

.app-navigation__form {
    margin: 0;
}

.app-menu {
    position: relative;
}

.app-menu__trigger {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: var(--text-color);
    cursor: pointer;
    list-style: none;
}

.app-menu__trigger::-webkit-details-marker {
    display: none;
}

.app-menu__trigger::after {
    width: .4rem;
    height: .4rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    content: "";
    transform: rotate(45deg) translateY(-.1rem);
}

.app-menu[open] .app-menu__trigger,
.app-menu__trigger:hover,
.app-menu__trigger:focus-visible {
    color: var(--accent-text-color);
}

.app-menu[open] .app-menu__trigger::after {
    transform: rotate(225deg) translate(-.1rem, -.1rem);
}

.app-menu__items {
    position: absolute;
    z-index: 10;
    top: calc(100% + .65rem);
    right: 0;
    display: grid;
    min-width: 12rem;
    padding: .35rem;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    background: var(--surface-color);
    box-shadow: var(--panel-shadow);
}

.app-menu__item {
    padding: .55rem .7rem;
    border-radius: calc(var(--control-radius) - .2rem);
    color: var(--text-color);
    text-decoration: none;
}

.app-menu__item:hover,
.app-menu__item:focus-visible {
    background: var(--surface-muted-color);
    color: var(--accent-text-color);
}

.page-content {
    padding-top: 8px;
}

.page-content--narrow {
    max-width: 31rem;
}

.page-heading {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 8px;
}

.page-heading h1 {
    margin: 0;
    font-size: 24px;
    padding-left: 2px;
}

.form-stack {
    display: grid;
    gap: 1.1rem;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    padding-top: .35rem;
}

.checkbox-field {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.checkbox-field input {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--accent-color);
}

.select-field {
    display: grid;
    gap: .4rem;
}

.select-field span {
    font-weight: 700;
}

.select-field select {
    width: 100%;
    padding: .65rem .75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    background: var(--surface-color);
    color: var(--text-color);
    font: inherit;
}

.validation-summary,
.status-message {
    padding: .8rem 1rem;
    border-radius: var(--control-radius);
}

.validation-summary {
    border: 1px solid color-mix(in srgb, var(--danger-color) 45%, var(--border-color));
    background: color-mix(in srgb, var(--danger-color) 7%, var(--surface-color));
    color: var(--danger-text-color);
}

.validation-summary:empty,
.validation-summary.validation-summary-valid {
    display: none;
}

/* The connection bar: shown only while the connection is gone or while queued work is being sent. */
.connection-bar {
    width: min(70rem, calc(100% - 2rem));
    margin: .75rem auto 0;
}

.app--office .connection-bar {
    width: auto;
    margin: .75rem 2rem 0;
    padding: .7rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    background: var(--surface-muted-color);
    color: var(--text-color);
}

.connection-bar__text {
    margin: 0;
    font-weight: 600;
}

.connection-bar__list {
    margin: .35rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--muted-text-color);
}

.connection-bar__list li {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
}

.connection-bar--online {
    border-color: color-mix(in srgb, var(--accent-color) 45%, var(--border-color));
    background: color-mix(in srgb, var(--accent-color) 8%, var(--surface-color));
}

.connection-bar--refused {
    border-color: color-mix(in srgb, var(--danger-color) 45%, var(--border-color));
    background: color-mix(in srgb, var(--danger-color) 7%, var(--surface-color));
    color: var(--danger-text-color);
}

.validation-summary ul {
    margin: 0;
    padding-left: 1.1rem;
}

.status-message {
    margin-bottom: 1rem;
    border: 1px solid color-mix(in srgb, var(--accent-color) 35%, var(--border-color));
    background: color-mix(in srgb, var(--accent-color) 7%, var(--surface-color));
}

.account-table,
.dossier-table {
    width: 100%;
    border-collapse: collapse;
}

.account-table th,
.account-table td,
.dossier-table th,
.dossier-table td {
    padding: 4px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
}

.account-table th,
.dossier-table th {
    color: var(--muted-text-color);
    font-size: .76rem;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.account-table tbody tr:last-child td,
.dossier-table tbody tr:last-child td {
    border-bottom: 0;
}

.dossier-table__number {
    font-variant-numeric: tabular-nums;
}

.empty-state {
    margin: 0;
    color: var(--muted-text-color);
}

.account-table a {
    color: var(--text-color);
    font-weight: 650;
    text-decoration: none;
}

.account-table a:hover {
    color: var(--accent-text-color);
}

.pill {
    display: inline-flex;
    padding: .25rem .55rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--muted-text-color);
    font-size: .78rem;
}

.pill--warning {
    border-color: var(--danger-color);
    color: var(--danger-color);
    background: var(--danger-color);
    color: white;
}

.auth-intro {
    margin: 0 0 1rem;
    color: var(--muted-text-color);
    text-align: center;
}

/* Sign-in code page: resend and the way back, under the form */
.auth-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1rem;
}


.rate-limit-panel__content {
    display: grid;
    gap: 1.25rem;
    text-align: center;
}

.rate-limit-panel__content>p {
    margin: 0;
}

.rate-limit-countdown {
    color: var(--accent-text-color);
}

.rate-limit-countdown strong {
    display: block;
    font-size: clamp(2.5rem, 12vw, 4.5rem);
    line-height: 1;
}

.vue-example__intro {
    margin: 0;
    max-width: 48rem;
    color: var(--muted-text-color);
}

.vue-example {
    display: grid;
    gap: 1rem;
}

.vue-example__overview-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.vue-example__overview-heading p {
    margin: 0;
}

.vue-example__table-wrapper {
    overflow-x: auto;
}

.example-table {
    width: 100%;
    border-collapse: collapse;
}

.example-table th,
.example-table td {
    padding: .55rem;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
}

.example-table th {
    color: var(--muted-text-color);
    font-size: .76rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.example-table tbody tr:last-child td {
    border-bottom: 0;
}

.example-table__row--selected {
    background: var(--surface-muted-color);
}

.example-table__select {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--accent-text-color);
    font-weight: 700;
    cursor: pointer;
}

.example-table__select:hover,
.example-table__select:focus-visible {
    text-decoration: underline;
}

.example-table__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.example-table__input {
    width: 100%;
    min-width: 12rem;
    padding: .45rem .55rem;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    background: var(--surface-color);
    color: var(--text-color);
}

.example-table--tasks td:first-child {
    width: 1%;
    text-align: center;
}

.example-table--tasks input[type="checkbox"] {
    accent-color: var(--accent-color);
}

.vue-example__grid {
    display: grid;
    gap: 1rem;
    align-items: start;
}

.vue-example__relationships {
    display: grid;
    gap: 1rem;
    margin-bottom: 0;
}

.vue-example__relationships dt {
    font-weight: 700;
}

.vue-example__relationships dd {
    margin: .25rem 0 0;
    color: var(--muted-text-color);
}

.vue-example__task-entry {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .75rem;
    align-items: end;
}

.vue-example__tasks {
    display: grid;
    gap: .55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vue-example__tasks label {
    display: flex;
    align-items: center;
    gap: .6rem;
    cursor: pointer;
}

.vue-example__tasks input {
    accent-color: var(--accent-color);
}

.vue-example__task--completed {
    color: var(--muted-text-color);
    text-decoration: line-through;
}

.vue-example__result {
    margin: 0;
}

.vue-example__result code,
.vue-example__method-note code {
    color: var(--accent-text-color);
}

.vue-example__method-note {
    align-self: center;
    color: var(--muted-text-color);
    font-size: .86rem;
}

/* The window is the measure of the header only. Everything inside the page measures its own container. */
@media (max-width: 42rem) {
    .app-header__inner {
        min-height: 4rem;
    }

    .page-content {
        padding-block: 1.5rem;
    }
}

.page-content {
    container-type: inline-size;
    container-name: page;
}

@container page (max-width: 42rem) {
    .account-table th:nth-child(3),
    .account-table td:nth-child(3) {
        display: none;
    }

    .dossier-table th:nth-child(n+4),
    .dossier-table td:nth-child(n+4) {
        display: none;
    }

    .vue-example__grid,
    .vue-example__task-entry {
        grid-template-columns: 1fr;
    }
}

/* Screen lock (Schermslot): an opaque cover, never a blur. A blurred company name is still readable. The mark, a
   round lock, one sentence, one field, one dark button and a quiet way to sign out completely. The lock is a modal
   <dialog> in the top layer, so it also covers a window that was open when the screen locked. */
.screen-lock-dialog {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--page-color);
    color: var(--text-color);
}

.screen-lock-dialog::backdrop {
    background: var(--page-color);
}

.screen-lock {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--page-color);
}

.screen-lock__panel {
    width: 100%;
    max-width: 24rem;
    text-align: center;
}

.screen-lock__brand {
    display: flex;
    justify-content: center;
    margin: 0;
}

.screen-lock__wordmark {
    height: 26px;
    width: auto;
}

.screen-lock__wordmark-text {
    color: var(--accent-text-color);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.screen-lock__icon {
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    margin: 36px auto 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-color) 15%, transparent);
    color: var(--khaki-text-color);
}

.screen-lock__icon .icon {
    width: 20px;
    height: 20px;
}

.screen-lock__title {
    margin: 20px 0 0;
    color: var(--text-color);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.021em;
    line-height: 1.25;
}

.screen-lock__explanation {
    max-width: 20rem;
    margin: 8px auto 0;
    color: var(--soft-text-color);
    font-size: 13px;
    line-height: 1.625;
}

.screen-lock__form {
    margin-top: 28px;
}

.screen-lock__input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    background: var(--surface-color);
    color: var(--text-color);
    font-size: 14px;
    text-align: center;
    outline: none;
    transition: border-color .15s ease-out;
}

.screen-lock__input::placeholder {
    color: var(--muted-text-color);
}

.screen-lock__input:focus {
    border-color: var(--accent-color);
}

.screen-lock__input[aria-invalid="true"] {
    border-color: var(--danger-color);
}

.screen-lock__error {
    margin: 8px 0 0;
    color: var(--danger-text-color);
    font-size: 12px;
}

.screen-lock__unlock {
    width: 100%;
    margin-top: 16px;
    padding: 12px 20px;
    border: 0;
    border-radius: var(--control-radius);
    background: #1a1a1a;
    color: var(--page-color);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease-out, transform .16s ease-out;
}

.screen-lock__unlock:hover {
    background: #2c2a27;
}

.screen-lock__unlock:not([aria-disabled="true"]):active {
    transform: scale(.97);
    transition-duration: 70ms;
}

.screen-lock__unlock[aria-disabled="true"] {
    cursor: progress;
    opacity: .7;
}

.screen-lock__logout {
    display: flex;
    justify-content: center;
    margin: 20px 0 0;
}

.screen-lock__signout {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--soft-text-color);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: color .15s ease-out;
}

.screen-lock__signout:hover {
    color: var(--khaki-text-color);
}

.screen-lock__signout .icon {
    width: 12px;
    height: 12px;
}

.screen-lock-page .screen-lock__explanation {
    margin-top: 0;
}

/* The vault: one card, no navigation, plain text the receiver reads once. */
.vault {
    display: grid;
    gap: .9rem;
    padding: 2rem;
    border: 1px solid var(--border-color);
    border-radius: var(--panel-radius);
    background: var(--surface-color);
    box-shadow: var(--panel-shadow);
}

.vault__brand,
.vault__eyebrow,
.page-heading__eyebrow {
    margin: 0;
    color: var(--accent-text-color);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.page-heading__eyebrow {
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.page-heading__eyebrow a {
    color: inherit;
}

.vault__title {
    margin: 0;
    font-size: 1.4rem;
}

.vault__text,
.vault__note,
.vault-timeline__text {
    margin: 0;
    color: var(--muted-text-color);
}

.vault__note {
    font-size: .85rem;
}

.vault__note--divider {
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.vault__note--center {
    text-align: center;
}

.vault__rules {
    margin: 0;
    padding: 1rem 0 1rem 1.1rem;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    color: var(--muted-text-color);
    display: grid;
    gap: .5rem;
}

.vault__contents {
    margin: 0;
    border-top: 1px solid var(--border-color);
}

.vault__contents > div {
    padding: .8rem 0;
    border-bottom: 1px solid var(--border-color);
}

.vault__contents dt {
    color: var(--muted-text-color);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.vault__contents dd {
    margin: .25rem 0 0;
    overflow-wrap: anywhere;
}

.vault__password {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 1.05rem;
}

/* The vault timeline for the advisor. */
.vault-timeline {
    margin: 1rem 0;
    padding: 0 0 0 1.25rem;
    border-left: 2px solid var(--border-color);
    list-style: none;
    display: grid;
    gap: .9rem;
}

.vault-timeline__trace {
    position: relative;
    display: grid;
    gap: .15rem;
}

.vault-timeline__trace::before {
    content: "";
    position: absolute;
    left: -1.65rem;
    top: .35rem;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    background: var(--surface-color);
}

.vault-timeline__trace--done::before {
    border-color: var(--accent-color);
    background: var(--accent-color);
}

.vault-timeline__trace--open .vault-timeline__trace-label {
    color: var(--muted-text-color);
}

.vault-timeline__trace-label {
    font-weight: 700;
}

.vault-timeline__trace-moment,
.vault-timeline__trace-explanation {
    color: var(--muted-text-color);
    font-size: .85rem;
}

.vault-timeline__status {
    display: inline-block;
    margin: 0 0 1rem;
    padding: .25rem .7rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
}

.vault-timeline__status--ready {
    background: color-mix(in srgb, var(--accent-color) 14%, var(--surface-color));
    color: var(--accent-text-color);
}

.vault-timeline__status--muted {
    background: var(--surface-muted-color);
    color: var(--muted-text-color);
}

.vault-timeline__status--alert {
    background: color-mix(in srgb, var(--danger-color) 10%, var(--surface-color));
    color: var(--danger-text-color);
}

.vault-timeline__link {
    display: grid;
    gap: .5rem;
    margin: 1rem 0;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    background: var(--surface-muted-color);
}

.vault-timeline__label {
    margin: 0;
    font-weight: 700;
}

.vault-timeline__code {
    overflow-wrap: anywhere;
    font-size: .85rem;
}

.vault-timeline__prepare {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.vault-timeline__prepare summary {
    cursor: pointer;
    font-weight: 700;
}

.vault-timeline__prepare form {
    margin-top: .75rem;
}

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

/* Customer portal: one column of calm blocks, the next step the only dark one. */
.customer {
    display: grid;
    gap: 2rem;
}

.customer__heading h1 {
    margin: .5rem 0 0;
    font-size: 1.6rem;
    line-height: 1.2;
}

.customer__eyebrow {
    margin: 0;
    color: var(--muted-text-color);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.customer__lead {
    margin: .75rem 0 0;
    max-width: 40rem;
    color: var(--muted-text-color);
}

.customer__muted {
    margin: 0;
    color: var(--muted-text-color);
    font-size: .85rem;
}

.customer__label {
    margin: 1rem 0 .5rem;
    color: var(--muted-text-color);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.customer__section {
    display: grid;
    gap: .75rem;
}

.customer__section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.customer__gone {
    text-align: center;
}

.customer__promise {
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.customer__grid {
    display: grid;
    gap: 1.5rem;
}

@container page (min-width: 56rem) {
    .customer__grid {
        grid-template-columns: minmax(0, 1fr) 21rem;
        align-items: stretch;
    }
}

.next-step {
    padding: 1.5rem;
    border-radius: var(--panel-radius);
    background: var(--text-color);
    color: var(--surface-color);
}

.next-step__eyebrow {
    margin: 0 0 1rem;
    color: var(--accent-text-color);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.next-step__title {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.2;
}

.next-step__text,
.next-step__deadline,
.next-step__footer {
    margin: .75rem 0 0;
    color: color-mix(in srgb, var(--surface-color) 75%, transparent);
    font-size: .9rem;
}

.next-step__term--urgent {
    color: var(--accent-text-color);
    font-weight: 700;
}

.next-step__action {
    display: flex;
    justify-content: center;
    margin-top: 1.25rem;
}

.next-step__footer {
    padding-top: 1rem;
    border-top: 1px solid color-mix(in srgb, var(--surface-color) 15%, transparent);
    font-size: .8rem;
}

.next-step__footer a {
    color: inherit;
}

.advisor-card,
.confidential {
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--panel-radius);
    background: var(--surface-color);
}

.confidential {
    background: var(--surface-muted-color);
}

.advisor-card__name {
    margin: 1rem 0 0;
    font-weight: 700;
}

.advisor-card__text,
.confidential__text {
    margin: .75rem 0 0;
    color: var(--muted-text-color);
    font-size: .9rem;
}

.advisor-card__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    margin-top: 1rem;
}

.advisor-card__phone {
    margin: .75rem 0 0;
    color: var(--muted-text-color);
    font-size: .8rem;
    text-align: center;
}

.confidential__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .4rem;
}

.confidential__list li {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.confidential form {
    margin-top: 1rem;
}

.task-list,
.task-done-list,
.document-list,
.upload-list,
.prepare__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 1rem;
}

.task-card {
    position: relative;
    padding: 1.25rem 1.25rem 1.25rem 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--panel-radius);
    background: var(--surface-color);
}

.task-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: var(--panel-radius) 0 0 var(--panel-radius);
    background: var(--border-color);
}

.task-card--urgent::before {
    background: var(--accent-color);
}

.task-card--overdue::before {
    background: var(--danger-color);
}

.task-card__head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem;
}

.task-card__kind,
.task-card__term {
    padding: .2rem .6rem;
    border-radius: 999px;
    background: var(--surface-muted-color);
    color: var(--muted-text-color);
    font-size: .72rem;
    font-weight: 700;
}

.task-card--urgent .task-card__term {
    background: color-mix(in srgb, var(--accent-color) 14%, var(--surface-color));
    color: var(--accent-text-color);
}

.task-card--overdue .task-card__term {
    background: color-mix(in srgb, var(--danger-color) 10%, var(--surface-color));
    color: var(--danger-text-color);
}

.task-card__title {
    margin: .75rem 0 0;
    font-size: 1.05rem;
}

.task-card__why {
    margin: .5rem 0 0;
    color: var(--muted-text-color);
    font-size: .9rem;
}

.task-card__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.task-done-list {
    gap: 0;
    border-top: 1px solid var(--border-color);
}

.task-done-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--border-color);
}

.task-focus {
    padding: 1.25rem;
    border: 1px solid var(--accent-color);
    border-radius: var(--panel-radius);
    background: color-mix(in srgb, var(--accent-color) 6%, var(--surface-color));
    display: grid;
    gap: .75rem;
}

.task-focus__title {
    margin: 0;
    font-size: 1.2rem;
}

.task-focus__why {
    margin: 0;
    color: var(--muted-text-color);
}

.document-list,
.upload-list {
    gap: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--panel-radius);
    background: var(--surface-color);
    overflow: hidden;
}

.document-row,
.upload-list__item,
.prepare__item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.document-row:last-child,
.upload-list__item:last-child {
    border-bottom: 0;
}

.document-row__body {
    min-width: 0;
    flex: 1;
}

.document-row__name,
.upload-field__name,
.prepare__item-title {
    margin: 0;
    font-weight: 700;
}

.document-row__note {
    margin: .25rem 0;
    color: var(--muted-text-color);
    font-size: .9rem;
}

.upload-field {
    padding: 1.25rem;
    border: 1px dashed var(--border-color);
    border-radius: var(--panel-radius);
    background: var(--surface-color);
}

.upload-field__empty {
    display: grid;
    gap: .5rem;
    justify-items: center;
    text-align: center;
}

.upload-field__title {
    margin: 0;
    font-weight: 700;
}

.upload-field__choose {
    margin-top: .5rem;
}

.upload-field__item {
    display: grid;
    gap: .5rem;
}

.upload-field__bar {
    height: .3rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-muted-color);
}

.upload-field__bar-fill {
    height: 100%;
    background: var(--accent-color);
    transition: width .2s ease-out;
}

.upload-field__error {
    margin: 0;
    color: var(--danger-text-color);
    font-size: .9rem;
}

.upload-field__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.upload-list__item--failed {
    background: color-mix(in srgb, var(--danger-color) 5%, var(--surface-color));
}

.prepare__grid {
    display: grid;
    gap: 1.5rem;
}

@container page (min-width: 64rem) {
    .prepare__grid {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

.prepare__list {
    gap: 0;
}

.prepare__item:last-child {
    border-bottom: 0;
}

.prepare__item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.prepare__form {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.prepare__form summary {
    cursor: pointer;
    font-weight: 700;
}

.prepare__form form {
    margin-top: .75rem;
}

.dossier-table__actions a {
    margin-right: .5rem;
}

/* Questionnaire: the parts as a list with a progress line, the questions numbered, the save state at the foot. */
.section-list {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--panel-radius);
    background: var(--surface-color);
}

.section-list li + li {
    border-top: 1px solid var(--border-color);
}

.section-list__item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1rem;
    color: inherit;
    text-decoration: none;
}

.section-list__item:hover,
.section-list__item:focus-visible {
    background: var(--surface-muted-color);
}

.section-list__body {
    display: grid;
    gap: .15rem;
    flex: 1;
    min-width: 0;
}

.section-list__name {
    font-weight: 650;
}

.progress {
    display: block;
    height: .3rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-muted-color);
}

.progress--small {
    flex-shrink: 0;
    width: 4rem;
}

.progress__fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--accent-color);
    transition: width .3s ease-out;
}

.questionnaire__nav {
    margin: 0;
}

.questionnaire__back {
    color: var(--accent-text-color);
    font-weight: 650;
}

.questionnaire__progress {
    display: grid;
    gap: .5rem;
    padding: .9rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    background: var(--surface-color);
}

.questionnaire__form {
    display: grid;
    gap: 1.5rem;
}

.question {
    display: grid;
    gap: .5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color);
}

.question__head {
    display: flex;
    align-items: baseline;
    gap: .75rem;
}

.question__number {
    min-width: 1.25rem;
    color: var(--muted-text-color);
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
}

.question__label {
    font-weight: 650;
}

.question__explanation,
.question__confidential {
    margin: 0;
    padding-left: 2rem;
    color: var(--muted-text-color);
    font-size: .85rem;
}

/* What is wrong with an answer, straight under its question. */
.question__error {
    margin: 0;
    padding-left: 2rem;
    color: var(--danger-text-color);
    font-size: .85rem;
}

.question__control {
    padding-left: 2rem;
}

.question__inline {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.question__short {
    max-width: 14rem;
}

.question__textarea {
    min-height: 5.5rem;
    resize: vertical;
}

.choice-group {
    display: grid;
    gap: .5rem;
}

.choice-option {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .8rem;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    background: var(--surface-color);
    cursor: pointer;
}

.choice-option:hover {
    border-color: var(--accent-color);
}

.choice-option:has(input:checked) {
    border-color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 8%, var(--surface-color));
}

.choice-option:has(input:focus-visible) {
    outline: 3px solid color-mix(in srgb, var(--accent-color) 20%, transparent);
}

.choice-option input {
    accent-color: var(--accent-color);
}

.save-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: 1rem 0;
    border-top: 1px solid var(--border-color);
    background: var(--page-color);
}

.save-bar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.save-bar__error {
    color: var(--danger-text-color);
}

/* The answers as the team reads them. */
.answers {
    display: grid;
    gap: 1.5rem;
}

.answers__defaults {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--accent-color);
    border-radius: var(--panel-radius);
    background: color-mix(in srgb, var(--accent-color) 6%, var(--surface-color));
}

.answers__defaults p {
    margin: 0;
}

.answers__head {
    display: grid;
    gap: .5rem;
    margin-bottom: 1rem;
}

.answers__head form {
    justify-self: start;
}

.answers__list {
    display: grid;
    gap: .75rem;
    margin: 0;
}

.answers__item {
    display: grid;
    gap: .2rem;
    padding-top: .75rem;
    border-top: 1px solid var(--border-color);
}

.answers__item dt {
    font-weight: 650;
}

.answers__item dd {
    margin: 0;
    white-space: pre-wrap;
}

.answers__empty {
    color: var(--muted-text-color);
    font-style: italic;
}

.answers__confidential {
    margin-left: .5rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: var(--surface-muted-color);
    color: var(--muted-text-color);
    font-size: .72rem;
    font-weight: 700;
}

/* Prospects: the presentation, the parties as the seller reads them, and the rows the team works with. */
.teaser {
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--panel-radius);
    background: var(--surface-color);
}

.teaser__headline {
    margin: .5rem 0 0;
    font-size: 1.4rem;
    line-height: 1.2;
}

.teaser__facts,
.teaser__figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: .75rem;
    margin: 1.25rem 0 0;
    padding: 1rem 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.teaser__facts dt,
.teaser__figures dt {
    color: var(--muted-text-color);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.teaser__facts dd,
.teaser__figures dd {
    margin: .2rem 0 0;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.teaser__paragraph {
    margin: 1rem 0 0;
    max-width: 44rem;
    line-height: 1.6;
}

.next-step__list {
    margin: .75rem 0 0;
    padding-left: 1.1rem;
    color: color-mix(in srgb, var(--surface-color) 85%, transparent);
    font-size: .9rem;
}

.next-step__list a {
    color: inherit;
}

.next-step__form {
    margin-top: 1.25rem;
}

.next-step__check {
    color: color-mix(in srgb, var(--surface-color) 85%, transparent);
    font-size: .9rem;
}

.confidential__link {
    display: inline-block;
    margin-top: .75rem;
    color: var(--accent-text-color);
    font-weight: 650;
}

.prospect-list {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .75rem;
}

.prospect-list__item {
    display: grid;
    gap: .5rem;
    padding: .9rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    background: var(--surface-color);
}

.prospect-list__name {
    margin: 0;
    font-weight: 650;
}

.prospect-list__objection summary {
    cursor: pointer;
    color: var(--accent-text-color);
    font-weight: 650;
}

.prospect-list__objection form {
    margin-top: .75rem;
}

.prospect-row--rejected {
    opacity: .6;
}

.prospect-row__body {
    display: grid;
    gap: .25rem;
    min-width: 0;
}

.prospect-row__note {
    margin: 0;
    padding: .5rem .75rem;
    border-left: 3px solid var(--border-color);
    color: var(--muted-text-color);
    font-size: .85rem;
}

.prospect-row__response,
.prospect-row__objection {
    margin: 0;
    font-size: .9rem;
}

.prospect-row__objection {
    color: var(--danger-text-color);
}

.recipients {
    margin: 0;
    padding: .75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    display: grid;
    gap: .5rem;
}

/* Customer file: views, search, signals and the record with its tabs */
.page-heading--split {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.list-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.list-toolbar__views {
    display: flex;
    gap: .25rem;
    max-width: 100%;
    overflow-x: auto;
}

.list-toolbar__view {
    padding: .4rem .75rem;
    border-radius: var(--control-radius);
    color: var(--muted-text-color);
    text-decoration: none;
    white-space: nowrap;
}

.list-toolbar__view:hover,
.list-toolbar__view:focus-visible {
    color: var(--text-color);
}

.list-toolbar__view[aria-current="true"] {
    background: var(--surface-muted-color);
    color: var(--text-color);
    font-weight: 600;
}

.list-toolbar__search {
    display: block;
    width: min(100%, 20rem);
}

.table-scroll {
    overflow-x: auto;
}

.dossier-table__name {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--text-color);
    font-weight: 600;
    text-decoration: none;
}

.dossier-table__name:hover,
.dossier-table__name:focus-visible {
    color: var(--accent-text-color);
}

.dossier-table__name + .customer__muted {
    display: block;
    font-size: .8rem;
}

.dossier-table__dot {
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: var(--accent-color);
}

.signal {
    display: inline-block;
    padding: .2rem .55rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: .8rem;
    color: var(--muted-text-color);
}

.signal--overdue {
    border-color: color-mix(in srgb, var(--danger-color) 45%, var(--border-color));
    color: var(--danger-text-color);
}

.signal--quiet,
.signal--waitingforcustomer,
.signal--waitingforcounterparty {
    border-color: color-mix(in srgb, var(--accent-color) 45%, var(--border-color));
    color: var(--accent-text-color);
}

.record-signals {
    margin-bottom: 1rem;
}

.record-signals__list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: .5rem 0 0;
    padding: 0;
    list-style: none;
}

.record-tabs {
    display: flex;
    gap: .25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
}

.record-tabs__tab {
    padding: .6rem .9rem;
    border-bottom: 2px solid transparent;
    color: var(--muted-text-color);
    text-decoration: none;
    white-space: nowrap;
}

.record-tabs__tab:hover,
.record-tabs__tab:focus-visible {
    color: var(--text-color);
}

.record-tabs__tab[aria-current="page"] {
    border-bottom-color: var(--accent-color);
    color: var(--text-color);
    font-weight: 600;
}

.form-row {
    display: grid;
    gap: 1rem;
}

@container (min-width: 36rem) {
    .form-row {
        grid-template-columns: 1fr 1fr;
    }
}

.timeline {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.timeline__item {
    padding: .75rem 0;
    border-top: 1px solid var(--border-color);
}

.timeline__meta {
    margin: 0 0 .25rem;
    color: var(--muted-text-color);
    font-size: .8rem;
}

.timeline__text {
    margin: 0;
    white-space: pre-line;
}

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

.proposal__item {
    padding: .6rem 0;
    border-top: 1px solid var(--border-color);
}

.proposal__item--open {
    opacity: .7;
}

.proposal__reason {
    margin: .15rem 0 0 1.7rem;
    font-size: .8rem;
}

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

.notification-list__item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem 0;
    border-top: 1px solid var(--border-color);
}

.notification-list__item--read {
    opacity: .7;
}

.notification-list__text {
    margin: 0 0 .2rem;
    font-weight: 600;
}

.notification-list__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.form-stack {
    container-type: inline-size;
}

/* Work board, engagement letter and record actions */
.record-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.25rem;
}

.board {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}

.board__column {
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--panel-radius);
    background: var(--surface-color);
}

.board__heading {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    margin: 0 0 .75rem;
    font-size: 1rem;
}

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

.board__heading a:hover,
.board__heading a:focus-visible {
    color: var(--accent-text-color);
}

.board__empty {
    margin: 0 0 .75rem;
    font-size: .85rem;
}

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

.board__card {
    display: flex;
    gap: .6rem;
    padding: .6rem 0;
    border-top: 1px solid var(--border-color);
}

.board__card--urgent .board__title {
    color: var(--accent-text-color);
}

.board__card--overdue .board__title {
    color: var(--danger-text-color);
}

.board__checkbox {
    width: 1.1rem;
    height: 1.1rem;
    margin-top: .15rem;
    padding: 0;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.board__checkbox:hover,
.board__checkbox:focus-visible {
    border-color: var(--accent-color);
}

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

.board__title {
    color: var(--text-color);
    font-weight: 600;
    text-decoration: none;
}

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

.board__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin: .3rem 0 0;
    font-size: .8rem;
}

.board__add {
    display: flex;
    gap: .5rem;
    margin-top: .75rem;
}

.board__add .noord-digital-input {
    flex: 1;
    min-width: 0;
}

.board__undo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.pill--office {
    border-color: color-mix(in srgb, var(--accent-color) 45%, var(--border-color));
    color: var(--accent-text-color);
}

.pill--customer {
    color: var(--muted-text-color);
}

.pill--priority {
    border-color: color-mix(in srgb, var(--danger-color) 45%, var(--border-color));
    color: var(--danger-text-color);
}

.letter__status {
    margin: .5rem 0 0;
    color: var(--accent-text-color);
    font-weight: 600;
}

.letter__status--ready {
    color: var(--text-color);
}

.letter__fields {
    margin: 0;
}

.letter__field {
    padding: .5rem 0;
    border-top: 1px solid var(--border-color);
}

.letter__field dt {
    font-size: .8rem;
    color: var(--muted-text-color);
}

.letter__field dd {
    margin: .15rem 0 0;
}

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

.letter__item {
    padding: .75rem 0;
    border-top: 1px solid var(--border-color);
}

.letter__request {
    margin-top: .5rem;
}

.letter {
    margin: 1rem 0;
    padding: 2rem;
    border: 1px solid var(--border-color);
    background: #fff;
    color: #24231f;
}

.letter__brand {
    margin: 0;
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted-text-color);
}

.letter__title {
    margin: .25rem 0 0;
}

.letter__heading {
    margin: 1.25rem 0 .25rem;
    font-size: .95rem;
}

.letter__text {
    margin: 0;
    line-height: 1.55;
}

.letter__signatures {
    display: grid;
    gap: 1rem;
    margin-top: 2rem;
}

@container (min-width: 36rem) {
    .letter__signatures {
        grid-template-columns: 1fr 1fr;
    }
}

.letter__signature {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: .75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
}

.letter__signature--customer {
    border-color: var(--accent-color);
}

.letter {
    container-type: inline-size;
}

/* Agenda: five days, an all-day strip, timed blocks side by side */
/* THE AGENDA, as the prototype draws it: one toolbar (back, previous/today/next, the title; the agenda filter, the
   view switch, the zoom), then the time grid or the month grid in one white sheet with a line around it. */
/* Three parts (owner feedback, touch board): where you are on the left, the period buttons large in the middle, the
   tools and the main button on the right. The middle stays in the middle of the bar, whatever the two sides hold. */
.agenda__toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
}

.agenda__toolbar-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}

.agenda__toolbar-lead {
    min-width: 0;
}

.agenda__toolbar-tools {
    justify-content: flex-end;
}

/* Where the two sides no longer fit beside the middle, the period buttons get a row of their own on top, centred. */
@media (max-width: 90rem) {
    .agenda__toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .agenda__nav {
        grid-column: 1 / -1;
        justify-self: center;
    }
}

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

    .agenda__toolbar-tools {
        justify-content: flex-start;
    }
}

.agenda__heading {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.agenda__back {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: .25rem;
    padding: .375rem .75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--accent-text-color);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s ease-out;
}

.agenda__back:hover {
    background: var(--surface-muted-color);
}

.agenda__back .icon {
    width: 14px;
    height: 14px;
}

/* Previous, back to today, next: one group, 48 points high, for a finger on the wall board. */
.agenda__nav {
    display: inline-flex;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    background: var(--surface-color);
}

.agenda__nav-arrow,
.agenda__nav-today {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    color: var(--soft-text-color);
    text-decoration: none;
    transition: background-color .15s ease-out, color .15s ease-out;
}

.agenda__nav-arrow {
    width: 56px;
}

.agenda__nav-arrow .icon {
    width: 22px;
    height: 22px;
}

.agenda__nav-arrow:hover,
.agenda__nav-arrow:focus-visible {
    background: var(--surface-muted-color);
    color: var(--accent-text-color);
}

.agenda__nav-today {
    min-width: 12rem;
    padding-inline: 1.25rem;
    border-inline: 1px solid var(--border-color);
    color: var(--text-color);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}

a.agenda__nav-today:hover,
a.agenda__nav-today:focus-visible {
    background: var(--surface-muted-color);
    color: var(--accent-text-color);
}

/* Today is already shown: the middle is the name of the period, not a button. */
.agenda__nav-today--current {
    background: var(--surface-muted-color);
    color: var(--soft-text-color);
}

.agenda__nav-arrow:focus-visible,
a.agenda__nav-today:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: -2px;
}

/* The one main button of the agenda: gold, with a plus in the calendar, as large as the period buttons. Two classes:
   the button component's stylesheet loads after this file, so a lone .agenda__new would lose to its min-height. */
.noord-digital-button.agenda__new {
    min-height: 48px;
    padding-inline: 1.125rem;
    font-size: 14px;
}

.agenda__new .icon {
    width: 20px;
    height: 20px;
}

.agenda__filter {
    margin: 0;
}

.agenda__filter-label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--muted-text-color);
    font-size: 12px;
}

.agenda__select {
    padding: .375rem .625rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--surface-color);
    color: var(--text-color);
    font: inherit;
    font-size: 12px;
}

.agenda__select:focus {
    border-color: var(--accent-color);
    outline: none;
}

.agenda__segments {
    display: inline-flex;
    align-items: center;
    padding: 2px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.agenda__segment,
.agenda__zoom {
    display: inline-flex;
    align-items: center;
    padding: .25rem .625rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--soft-text-color);
    font: inherit;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease-out, color .15s ease-out;
}

.agenda__segment:hover,
.agenda__zoom:hover {
    color: var(--text-color);
}

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

.agenda__zoom:disabled {
    color: var(--border-color);
    cursor: not-allowed;
}

.agenda__segment[aria-current="true"] {
    background: var(--surface-muted-color);
    color: var(--text-color);
    font-weight: 600;
}

.agenda__zoom .icon {
    width: 14px;
    height: 14px;
}

.agenda {
    --hour-height: 64px;
    display: grid;
    grid-template-columns: 56px repeat(5, minmax(9rem, 1fr));
    margin-top: 1.25rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--surface-color);
}

.agenda[data-zoom="compact"] {
    --hour-height: 44px;
}

.agenda[data-zoom="wide"] {
    --hour-height: 92px;
}

.agenda--day {
    grid-template-columns: 56px 1fr;
}

.agenda__hours,
.agenda__day {
    display: grid;
    grid-template-rows: auto auto 1fr;
    min-width: 0;
}

.agenda__day {
    border-left: 1px solid var(--border-color);
}

.agenda__day-head {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    margin: 0;
    padding: .625rem .75rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted-text-color);
}

.agenda__day--today .agenda__day-head {
    background: color-mix(in srgb, var(--accent-color) 8%, transparent);
    color: var(--accent-text-color);
}

.agenda__day-link {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    color: inherit;
    text-decoration: none;
}

.agenda__day-link:hover,
.agenda__day-link:focus-visible {
    text-decoration: underline;
}

.agenda__day-number {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
}

.agenda__day--today .agenda__day-number {
    color: var(--accent-text-color);
}

.agenda__allday-head {
    display: flex;
    align-items: center;
    padding: .25rem .5rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 10px;
    color: var(--muted-text-color);
}

.agenda__allday {
    display: flex;
    min-height: 1.75rem;
    flex-direction: column;
    gap: .2rem;
    padding: .25rem;
    border-bottom: 1px solid var(--border-color);
}

.agenda__hour-list,
.agenda__grid {
    position: relative;
    height: calc(var(--hour-height) * 12);
}

.agenda__hour-list {
    display: grid;
    grid-template-rows: repeat(12, 1fr);
}

.agenda__hour {
    position: relative;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
}

/* The hour stands just under its line, never on it (test round 5 October), so the line does not cross the digits. */
.agenda__hour span {
    position: absolute;
    top: 3px;
    right: .5rem;
    line-height: 1;
    font-size: 10px;
    color: var(--muted-text-color);
    font-variant-numeric: tabular-nums;
}

.agenda__grid {
    display: grid;
    grid-template-rows: repeat(12, 1fr);
}

.agenda__slot {
    display: block;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
}

.agenda__slot:hover,
.agenda__slot:focus-visible {
    background: color-mix(in srgb, var(--accent-color) 8%, transparent);
}

/* A block carries the accent of its kind: a colour says which kind, never how urgent. */
.agenda__block {
    --block-accent: var(--accent-slate);
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    overflow: hidden;
    padding: .25rem .5rem;
    border-left: 3px solid var(--block-accent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--block-accent) 14%, var(--surface-color));
    color: var(--block-accent);
    font-size: 11px;
    line-height: 1.3;
    text-decoration: none;
    cursor: grab;
    transition: filter .15s ease-out;
}

.agenda__block:hover,
.agenda__block:focus-visible {
    z-index: 1;
    filter: brightness(.95);
}

.agenda__block--allday {
    position: static;
    border-radius: 4px;
    padding-block: .15rem;
}

.agenda__block--introduction { --block-accent: var(--accent-sea); }
.agenda__block--valuation { --block-accent: var(--accent-ochre); }
.agenda__block--negotiation { --block-accent: var(--accent-clay); }
.agenda__block--duediligence { --block-accent: var(--accent-slate); }
.agenda__block--notary { --block-accent: var(--accent-moss); }
.agenda__block--phone { --block-accent: var(--accent-plum); }

.agenda__block--internal {
    --block-accent: var(--muted-text-color);
    border-left-color: var(--border-color);
    background: var(--surface-muted-color);
}

.agenda__block--deviates {
    border-left-style: dashed;
}

.agenda__block-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agenda__block-time {
    font-size: 10px;
    opacity: .85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agenda__quiet {
    max-width: 42rem;
    margin-top: 1.5rem;
    color: var(--soft-text-color);
    line-height: 1.6;
}

/* THE MONTH: seven columns, whole weeks, at most three moments per cell and then "nog n". */
.agenda-month {
    margin-top: 1.25rem;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--surface-color);
}

.agenda-month__heads,
.agenda-month__week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.agenda-month__heads {
    border-bottom: 1px solid var(--border-color);
}

.agenda-month__head {
    padding: .5rem .75rem;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted-text-color);
}

.agenda-month__cell {
    position: relative;
    min-height: 92px;
    padding: .375rem;
    border-bottom: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
}

.agenda-month__cell:first-child {
    border-left: 0;
}

.agenda-month__cell--outside {
    background: color-mix(in srgb, var(--page-color) 40%, transparent);
}

.agenda-month__cell--outside .agenda-month__day {
    color: var(--muted-text-color);
}

.agenda-month__day {
    display: inline-block;
    padding: .125rem .375rem;
    border-radius: 999px;
    color: var(--soft-text-color);
    font-size: 11px;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    transition: background-color .15s ease-out;
}

.agenda-month__day:hover {
    background: var(--surface-muted-color);
}

.agenda-month__day--today {
    background: var(--accent-color);
    color: var(--accent-contrast-color);
    font-weight: 600;
}

.agenda-month__day--today:hover {
    background: var(--accent-hover-color);
}

.agenda-month__list {
    display: grid;
    gap: .25rem;
    margin: .25rem 0 0;
    padding: 0;
    list-style: none;
}

.agenda-month__moment {
    position: static;
    display: block;
    padding: .125rem .375rem;
    border-left-width: 2px;
    border-radius: 4px;
    font-size: 10px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agenda-month__more {
    padding: 0 .25rem;
    font-size: 10px;
    color: var(--muted-text-color);
}

.agenda-month__add {
    display: block;
    margin-top: .25rem;
    padding: .125rem .25rem;
    border-radius: 4px;
    color: var(--muted-text-color);
    font-size: 10px;
    text-decoration: none;
    opacity: 0;
    transition: opacity .15s ease-out;
}

.agenda-month__cell:hover .agenda-month__add,
.agenda-month__add:focus-visible {
    opacity: 1;
}

.agenda-month__add:hover {
    color: var(--accent-text-color);
}

/* Dragging: the block travels with the pointer; the handle at the bottom stretches it. */
.agenda__block {
    touch-action: pan-y;
    user-select: none;
}

.agenda__block-handle {
    position: absolute;
    inset: auto 0 0;
    height: .5rem;
    cursor: ns-resize;
}

.agenda__block--armed {
    outline: 2px solid var(--accent-color);
}

.agenda__block--dragging {
    z-index: 2;
    opacity: .85;
    box-shadow: 0 .5rem 1.25rem color-mix(in srgb, var(--text-color) 25%, transparent);
    cursor: grabbing;
}

/* The now line: a red capsule with the time in the hour column and a line over today's column, only inside the shown hours. */
.agenda__now {
    position: absolute;
    right: 0;
    left: 0;
    z-index: 1;
    height: 0;
    border-top: 2px solid #ff453a;
    pointer-events: none;
}

.agenda__now::before {
    content: "";
    position: absolute;
    top: -5px;
    left: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff453a;
}

/* An hour the red time of now stands over steps aside, as in Apple's calendar. */
.agenda__hour.is-under-now span {
    visibility: hidden;
}

.agenda__now-time {
    position: absolute;
    right: .375rem;
    z-index: 2;
    transform: translateY(-9px);
    padding: 2px .375rem;
    border-radius: 999px;
    /* Darker than the line itself: white text of 10px needs a contrast of 4.5:1 (#d70015 gives 5.6:1). */
    background: #d70015;
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Zooming between week and day: the tapped column grows into the grid, and shrinks back into it. Apple's spring
   of half a second as a linear() curve, shortened to 420 ms for a mouse. Only the agenda opts in to the view
   transition (css/agenda-zoom.css). */
.agenda--day {
    grid-template-columns: 3.5rem 1fr;
}

.agenda__day-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: inherit;
    text-decoration: none;
}

.agenda__day-link:hover,
.agenda__day-link:focus-visible {
    text-decoration: underline;
}

::view-transition-group(agenda-focus) {
    animation-duration: 420ms;
    animation-timing-function: linear(0 0%, 0.07 6%, 0.212 11%, 0.369 17%, 0.512 22%, 0.632 28%, 0.728 33%, 0.802 39%, 0.857 44%, 0.898 50%, 0.928 56%, 0.949 61%, 0.964 67%, 0.975 72%, 0.983 78%, 0.988 83%, 0.992 89%, 0.994 94%, 1 100%);
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 200ms;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none;
    }
}

.status-message--failed {
    color: var(--danger-text-color);
}

/* Settings */
.list-toolbar__filters {
    flex: 1;
}

@container (min-width: 48rem) {
    .list-toolbar__filters {
        grid-template-columns: repeat(5, 1fr);
    }
}

.prepare__item--stacked {
    flex-direction: column;
    align-items: stretch;
}

.integration__form {
    margin-top: .75rem;
}

.audit-table__row--denied td {
    color: var(--danger-text-color);
}

.one-time {
    margin-bottom: 1.25rem;
}

/* Signature placer: the page stand-in and the fields on it */
.placement {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
    container-type: inline-size;
}

@container (max-width: 48rem) {
    .placement {
        grid-template-columns: minmax(0, 1fr);
    }
}

.placement__page {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 595 / 842;
    max-height: 32rem;
    border: 1px solid var(--border-color);
    border-radius: var(--panel-radius);
    background: var(--surface-color);
    cursor: crosshair;
    padding: 0;
}

.placement__page:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.placement__lines {
    position: absolute;
    inset: 2rem 1.5rem auto;
    display: grid;
    gap: .6rem;
    pointer-events: none;
}

.placement__lines span {
    display: block;
    height: .5rem;
    border-radius: .25rem;
    background: var(--border-color);
}

.placement__field {
    position: absolute;
    transform: translate(-50%, -50%);
    padding: .2rem .5rem;
    border: 1px solid var(--accent-color);
    border-radius: .25rem;
    background: color-mix(in srgb, var(--accent-color) 18%, transparent);
    color: var(--accent-text-color);
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    pointer-events: none;
}

.placement__page-tabs,
.placement__signers {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}

/* Template library: the fixed text of a document template, read-only */
.template__text {
    white-space: pre-wrap;
    font-family: inherit;
    font-size: .9rem;
    line-height: 1.5;
    margin: 0;
}

/* ===================================================================================================
   SCREEN REGIONS. Each screen group keeps its page composition between its own markers, so the pass
   against the prototype can be made per screen without touching the others. Reusable control styling
   still belongs to the component beside it; only page composition lives here.
   =================================================================================================== */

/* The start page decides where to go; meanwhile it looks like a page that is coming, not an empty one. */
.start-skeleton {
    max-width: 42rem;
}

/* The answer to an optimistic act: a short line that confirms, or the server's reason when it was rolled back. */
.optimistic-status {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 60;
    max-width: 24rem;
    margin: 0;
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    box-shadow: var(--raised-shadow);
    animation: noord-digital-arrive .25s ease-out;
}

@media (max-width: 64rem) {
    .optimistic-status {
        right: 1rem;
        bottom: 5.5rem;
        left: 1rem;
    }
}

/* === region: workboard-and-customers (Takenbord, Klantenbestand, Vandaag) === */
/* --- Takenbord (WorkBoardPage): the date under the title, one line of explanation with the views, then one
   column per customer. Colour on a column and a card comes from the term and nothing else (utils/kleuren.ts). --- */
.workboard-top__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color);
}

.workboard-top__intro {
    max-width: 36rem;
    margin: 0;
    color: var(--soft-text-color);
    font-size: 13px;
    line-height: 1.6;
}

/* Rows of choices scroll sideways; they never wrap (round 9). */
.customers__view-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    list-style: none;
    scrollbar-width: none;
}

.customers__view-list::-webkit-scrollbar {
    display: none;
}

.customers__view {
    display: block;
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: var(--control-radius);
    color: var(--soft-text-color);
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s ease-out, background-color .15s ease-out;
}

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

.customers__view[aria-current="true"] {
    background: var(--surface-muted-color);
    color: var(--text-color);
    font-weight: 600;
}

.customers__view:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* The way back after a check-off: one line under the column, as in the prototype. */
.workboard-undo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-top: 1px solid color-mix(in srgb, var(--accent-moss) 25%, transparent);
    background: color-mix(in srgb, var(--accent-moss) 8%, var(--surface-color));
}

.workboard-undo--top {
    margin-top: 1rem;
    border: 1px solid color-mix(in srgb, var(--accent-moss) 25%, transparent);
    border-radius: var(--control-radius);
}

.workboard-undo__text,
.workboard-undo .status-message {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: none;
    color: var(--muted-text-color);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workboard-undo__button,
.workboard-undo .link-button {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--soft-text-color);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
}

.workboard-undo__button:hover,
.workboard-undo__button:focus-visible {
    background: none;
    color: var(--accent-text-color);
}

.workboard-undo__button .icon {
    width: 11px;
    height: 11px;
}

/* Only the newest check-off of a column keeps its line. */
.workboard__undo-list > .workboard-undo ~ .workboard-undo {
    display: none;
}

/* Empty screens say what is (not) there and offer the one next step. */
.workboard-none,
.customers__none,
.notifications__empty {
    display: grid;
    justify-items: start;
    gap: .75rem;
    margin-top: 2rem;
    color: var(--muted-text-color);
    font-size: 13px;
    line-height: 1.6;
}

.workboard-none p,
.customers__none p,
.notifications__empty p {
    max-width: 36rem;
    margin: 0;
}

/* One column on a phone, two on a tablet, three on a desktop; per row the columns are equally tall and the add
   line sits at the bottom of each. */
.workboard {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 1rem;
    margin-top: 1.25rem;
}

@media (min-width: 48rem) {
    .workboard {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 80rem) {
    .workboard {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.workboard__column {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--surface-color);
}

.workboard__column--overdue {
    border-color: color-mix(in srgb, var(--danger-color) 45%, var(--surface-color));
}

.workboard__column--critical {
    border-color: color-mix(in srgb, var(--danger-color) 30%, var(--surface-color));
}

.workboard__column--nearing {
    border-color: color-mix(in srgb, var(--warning-color) 35%, var(--surface-color));
}

.workboard__column-bar {
    display: block;
    height: 3px;
    background: var(--border-color);
}

.workboard__column--overdue .workboard__column-bar,
.workboard__column--critical .workboard__column-bar {
    background: var(--danger-color);
}

.workboard__column--nearing .workboard__column-bar {
    background: var(--warning-color);
}

.workboard__heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
}

.workboard__company {
    min-width: 0;
    overflow: hidden;
    color: var(--text-color);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color .15s ease-out;
}

.workboard__company:hover,
.workboard__company:focus-visible {
    color: var(--accent-text-color);
}

.workboard__count {
    flex-shrink: 0;
    color: var(--muted-text-color);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.workboard__list {
    display: grid;
    flex: 1;
    align-content: start;
    gap: 8px;
    margin: 0;
    padding: 10px;
    list-style: none;
}

/* A column has a floor: from four tasks on the list scrolls inside its own frame, three stay visible. */
.workboard__list--scrolls {
    flex: none;
    max-height: calc(3 * 96px + 12px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.workboard__empty {
    padding: 12px 4px;
    color: var(--muted-text-color);
    font-size: 12px;
    line-height: 1.6;
}

.workboard__card {
    position: relative;
    display: flex;
    gap: 10px;
    overflow: hidden;
    padding: 10px 12px 10px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    background: var(--page-color);
    transition: border-color .15s ease-out;
}

.workboard__card:hover,
.workboard__card:focus-within {
    border-color: var(--accent-color);
}

.workboard__card--overdue {
    border-color: color-mix(in srgb, var(--danger-color) 45%, var(--surface-color));
    background: var(--danger-soft-color);
}

.workboard__card--critical {
    border-color: color-mix(in srgb, var(--danger-color) 30%, var(--surface-color));
    background: color-mix(in srgb, var(--danger-soft-color) 60%, var(--surface-color));
}

.workboard__card--nearing {
    border-color: color-mix(in srgb, var(--warning-color) 40%, var(--surface-color));
    background: color-mix(in srgb, var(--warning-soft-color) 70%, var(--surface-color));
}

.workboard__card-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: var(--border-color);
}

.workboard__card--overdue .workboard__card-bar,
.workboard__card--critical .workboard__card-bar {
    background: var(--danger-color);
}

.workboard__card--nearing .workboard__card-bar {
    background: var(--warning-color);
}

.workboard__check {
    display: flex;
    align-self: center;
}

/* The check box sits at eye height of the card and looks like something to press. */
.workboard__checkbox {
    display: flex;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1.5px solid var(--soft-text-color);
    border-radius: 4px;
    background: var(--surface-color);
    color: var(--accent-moss);
    cursor: pointer;
    transition: border-color .15s ease-out, background-color .15s ease-out, transform .12s ease-out;
}

.workboard__checkbox .icon {
    width: 12px;
    height: 12px;
    stroke-width: 3;
    opacity: 0;
    transition: opacity .15s ease-out;
}

.workboard__checkbox:hover,
.workboard__checkbox:focus-visible {
    border-color: var(--accent-moss);
    background: color-mix(in srgb, var(--accent-moss) 15%, var(--surface-color));
}

.workboard__checkbox:hover .icon,
.workboard__checkbox:focus-visible .icon,
.workboard__checkbox.is-done .icon {
    opacity: 1;
}

.workboard__checkbox:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.workboard__checkbox:active {
    transform: scale(.9);
}

.workboard__body {
    display: block;
    flex: 1;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

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

.workboard__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
}

.workboard__tag {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.workboard__tag--customer {
    background: color-mix(in srgb, var(--accent-slate) 16%, var(--surface-color));
    color: var(--accent-slate);
}

.workboard__tag--office {
    background: color-mix(in srgb, var(--accent-moss) 16%, var(--surface-color));
    color: var(--accent-moss);
}

.workboard__tag--third {
    background: color-mix(in srgb, var(--accent-plum) 16%, var(--surface-color));
    color: var(--accent-plum);
}

.workboard__tag--priority {
    background: var(--danger-soft-color);
    color: var(--danger-text-color);
}

.workboard__title {
    display: block;
    color: var(--text-color);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.375;
}

.workboard__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
}

.workboard__term {
    flex-shrink: 0;
    color: var(--muted-text-color);
    font-size: 11px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.workboard__card--overdue .workboard__term,
.workboard__card--critical .workboard__term {
    color: var(--danger-text-color);
}

.workboard__card--nearing .workboard__term {
    color: var(--warning-text-color);
}

.workboard__meta-right {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 8px;
}

.workboard__notes {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
    color: var(--muted-text-color);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.workboard__notes .icon {
    width: 12px;
    height: 12px;
}

.workboard__where {
    min-width: 0;
    overflow: hidden;
    color: var(--muted-text-color);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workboard__more {
    margin: 0;
    padding: 6px 14px;
    border-top: 1px solid var(--border-color);
    color: var(--muted-text-color);
    font-size: 10px;
}

.workboard__add {
    margin-top: auto;
    padding: 8px 10px;
    border-top: 1px solid var(--border-color);
}

.workboard__add-summary {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border-radius: var(--control-radius);
    color: var(--muted-text-color);
    font-size: 12px;
    list-style: none;
    cursor: pointer;
    transition: color .15s ease-out;
}

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

.workboard__add-summary:hover,
.workboard__add-summary:focus-visible {
    color: var(--accent-text-color);
}

.workboard__add-summary .icon {
    width: 12px;
    height: 12px;
}

.workboard__add[open] > .workboard__add-summary {
    display: none;
}

.workboard__add-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    background: var(--page-color);
    color: var(--text-color);
    font: inherit;
    font-size: 12px;
}

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

.workboard__add-input:focus {
    border-color: var(--accent-color);
    outline: none;
}

/* --- The files of a task in its window. --- */
.board-files {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.board-files__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
}

.board-files__item > .icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    color: var(--muted-text-color);
}

.board-files__text {
    flex: 1;
    min-width: 0;
}

.board-files__name {
    display: block;
    overflow: hidden;
    color: var(--text-color);
    font-size: 12px;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.board-files__name:hover,
.board-files__name:focus-visible {
    color: var(--accent-text-color);
}

.board-files__meta {
    margin: 0;
    color: var(--muted-text-color);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.board-files__remove {
    color: var(--muted-text-color);
    font-size: 11px;
    text-decoration: none;
}

.board-files__remove:hover,
.board-files__remove:focus-visible {
    color: var(--danger-text-color);
}

/* --- Klantenbestand (DossiersPage): views and search on one line, then a table that scrolls sideways on a
   tablet and becomes a list of small cards on a phone. --- */
.customers__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.customers__views {
    min-width: 0;
    max-width: 100%;
}

.customers__search {
    position: relative;
    display: block;
    width: 300px;
    max-width: 100%;
}

.customers__search > .icon {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 14px;
    height: 14px;
    color: var(--muted-text-color);
    pointer-events: none;
    transform: translateY(-50%);
}

.customers__search-input {
    width: 100%;
    padding: 8px 12px 8px 36px;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    background: var(--surface-color);
    color: var(--text-color);
    font: inherit;
    font-size: 12px;
}

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

.customers__search-input:focus {
    border-color: var(--accent-color);
    outline: none;
}

.customers__scroll {
    margin: 1.5rem -4px 0;
    padding: 0 4px;
    overflow-x: auto;
    scrollbar-width: none;
}

.customers__scroll::-webkit-scrollbar {
    display: none;
}

.customers__table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    text-align: left;
}

.customers__table th {
    padding: 0 16px 10px 0;
    border-bottom: 1px solid var(--border-color);
    color: var(--muted-text-color);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.customers__row {
    transition: background-color .15s ease-out;
}

.customers__row + .customers__row {
    border-top: 1px solid var(--border-color);
}

.customers__row:hover {
    background: var(--surface-color);
}

.customers__cell {
    padding: 14px 16px 14px 0;
    vertical-align: middle;
}

.customers__cell--name {
    padding-block: 0;
}

.customers__cell--signal {
    max-width: 260px;
    padding-right: 8px;
}

.customers__name {
    display: block;
    padding: 14px 0;
    color: inherit;
    text-decoration: none;
}

.customers__name:focus-visible {
    border-radius: 4px;
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.customers__company {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    color: var(--text-color);
    font-size: 14px;
    font-weight: 600;
    transition: color .15s ease-out;
}

.customers__row:hover .customers__company,
.customers__name:focus-visible .customers__company {
    color: var(--accent-text-color);
}

.customers__company-text,
.customers__place {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customers__dot {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--accent-color);
}

.customers__place {
    display: block;
    color: var(--muted-text-color);
    font-size: 11px;
}

.customers__value,
.customers__activity,
.customers__advisor-name {
    color: var(--soft-text-color);
    font-size: 12px;
}

.customers__value {
    font-variant-numeric: tabular-nums;
}

.customers__advisor {
    display: flex;
    align-items: center;
    gap: 8px;
}

.customers__avatar {
    display: flex;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface-muted-color);
    color: var(--soft-text-color);
    font-size: 10px;
    font-weight: 600;
}

.customers__activity {
    display: block;
}

.customers__quiet {
    display: block;
    color: var(--muted-text-color);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.customers__quiet--long {
    color: var(--accent-text-color);
}

.customers__on-schedule {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent-moss);
    font-size: 12px;
}

.customers__on-schedule-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-moss);
}

/* Signaallabel: a round label with one small sign; red only when a term has passed. */
.customers__signal {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--surface-muted-color);
    color: var(--soft-text-color);
    font-size: 11px;
    font-weight: 500;
}

.customers__signal .icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

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

.customers__signal--overdue {
    background: var(--danger-soft-color);
    color: var(--danger-text-color);
}

.customers__signal--quiet {
    color: var(--accent-hover-color);
}

@media (max-width: 40rem) {
    .customers__search {
        width: 100%;
    }

    .customers__scroll {
        margin-inline: 0;
        padding: 0;
        overflow: visible;
    }

    .customers__table,
    .customers__table tbody {
        display: block;
        min-width: 0;
    }

    .customers__table thead {
        display: none;
    }

    .customers__table tbody {
        border-top: 1px solid var(--border-color);
    }

    .customers__row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 12px;
        padding-bottom: 14px;
    }

    .customers__row:hover {
        background: none;
    }

    .customers__cell {
        display: block;
        padding: 0;
    }

    .customers__cell--name {
        grid-column: 1;
    }

    .customers__name {
        padding: 14px 0 0;
    }

    .customers__cell--advisor {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        padding-top: 14px;
    }

    .customers__advisor-name,
    .customers__cell--activity {
        display: none;
    }

    .customers__cell--value {
        grid-column: 1 / -1;
        margin-top: 8px;
    }

    .customers__cell--signal {
        grid-column: 1 / -1;
        max-width: none;
        margin-top: 10px;
    }


}

/* --- Meldingen (NotificationsPage): the prototype's notifications panel as a page. Gold means unread. --- */
.notifications {
    max-width: 36rem;
}

.notifications__panel {
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--surface-color);
}

.notifications__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color);
}

.notifications__title {
    margin: 0;
    color: var(--muted-text-color);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.notifications__unread {
    color: var(--muted-text-color);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.notifications__panel .notifications__empty {
    margin: 0;
    padding: 20px 16px;
    font-size: 12px;
}

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

.notifications__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    transition: background-color .15s ease-out;
}

.notifications__item + .notifications__item {
    border-top: 1px solid var(--border-color);
}

.notifications__item:hover {
    background: color-mix(in srgb, var(--surface-muted-color) 45%, var(--surface-color));
}

.notifications__dot {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--accent-color);
    transition: background-color .2s ease-out;
}

/* Read, or being marked read at this moment: the dot goes out. */
.notifications__item--read .notifications__dot,
.notifications__item:has(.notifications__read.is-leaving) .notifications__dot,
.notifications__item:has(.notifications__read[hidden]) .notifications__dot {
    background: transparent;
}

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

.notifications__text {
    display: block;
    margin: 0;
    color: var(--text-color);
    font-size: 12px;
    line-height: 1.375;
    text-decoration: none;
}

a.notifications__text:hover,
a.notifications__text:focus-visible {
    color: var(--accent-text-color);
}

.notifications__meta {
    margin: 2px 0 0;
    color: var(--muted-text-color);
    font-size: 11px;
}

.notifications__read {
    flex-shrink: 0;
}

.notifications__read-button {
    color: var(--muted-text-color);
    font-size: 11px;
    text-decoration: none;
    white-space: nowrap;
}

.notifications__read-button:hover,
.notifications__read-button:focus-visible {
    color: var(--accent-text-color);
}

@media (prefers-reduced-motion: reduce) {
    .workboard__card,
    .workboard__checkbox,
    .work-card__chip-face,
    .work-card__turn span,
    .new-task__tag span,
    .new-dossier__chip-face,
    .customers__row,
    .notifications__dot {
        transition: none;
    }
}

/* --- Taken, round 30: the word and the day on one line, the own appointments of today as a strip (AgendaVandaag),
   then the explanation with the advisor filter under a line, and per column the sector and the advisor. --- */
.workboard-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
}

.workboard-head__title {
    margin: 0;
    color: var(--text-color);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.375;
}

.workboard-head__date {
    margin: 0;
    color: var(--soft-text-color);
    font-size: 15px;
}

.workboard-today {
    margin-top: 16px;
}

.workboard-today__list {
    display: flex;
    gap: 12px;
    margin: 0;
    padding: 0 0 4px;
    overflow-x: auto;
    list-style: none;
    scrollbar-width: none;
}

.workboard-today__list::-webkit-scrollbar {
    display: none;
}

.workboard-today__list > li {
    flex-shrink: 0;
}

.workboard-today__item {
    display: flex;
    min-width: 248px;
    height: 100%;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    background: var(--surface-color);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease-out;
}

.workboard-today__item:hover,
.workboard-today__item:focus-visible {
    border-color: var(--khaki-color);
}

.workboard-today__time {
    width: 44px;
    flex-shrink: 0;
    color: var(--soft-text-color);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.workboard-today__bar {
    width: 3px;
    flex-shrink: 0;
    align-self: stretch;
    border-radius: 999px;
    background: var(--accent-slate);
}

.workboard-today__bar--sea { background: var(--accent-sea); }
.workboard-today__bar--ochre { background: var(--accent-ochre); }
.workboard-today__bar--clay { background: var(--accent-clay); }
.workboard-today__bar--moss { background: var(--accent-moss); }
.workboard-today__bar--plum { background: var(--accent-plum); }
.workboard-today__bar--slate { background: var(--accent-slate); }

.workboard-today__text {
    min-width: 0;
}

.workboard-today__title,
.workboard-today__meta {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workboard-today__title {
    color: var(--text-color);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.375;
}

.workboard-today__meta {
    margin-top: 2px;
    color: var(--muted-text-color);
    font-size: 12px;
}

.workboard-today + .workboard-top__bar,
.workboard-head + .workboard-top__bar {
    margin-top: 32px;
}

.workboard-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.workboard-filter__label {
    color: var(--muted-text-color);
    font-size: 12px;
}

.workboard-filter__select {
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    background: var(--surface-color);
    color: var(--text-color);
    font: inherit;
    font-size: 12px;
    outline: none;
}

.workboard-filter__select:focus {
    border-color: var(--accent-color);
}

.workboard__heading {
    display: block;
}

.workboard__heading-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.workboard__subtitle {
    margin: 4px 0 0;
    overflow: hidden;
    color: var(--muted-text-color);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* On a phone the strip is a list: time, stripe and text under each other, no cards. */
@media (max-width: 40rem) {
    /* One column that never grows past the screen: a long title is cut off with an ellipsis instead of pushing the
       page sideways (a grid item is otherwise as wide as its text on one line). */
    .workboard-today__list {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        padding: 0;
        overflow: visible;
    }

    .workboard-today__list > li {
        min-width: 0;
    }

    .workboard-today__item {
        min-width: 0;
        padding: 0;
        border: 0;
        background: none;
    }
}

/* --- Nieuwe taak (NieuweTaakvenster): a narrow window with the dossier, the task, owner and deadline side by side,
   the tags, and Annuleren quiet beside Taak toevoegen. --- */
.new-task {
    display: grid;
    gap: 16px;
}

.new-task__field {
    display: block;
    min-width: 0;
}

.new-task__pair {
    display: grid;
    gap: 16px;
}

@media (min-width: 40rem) {
    .new-task__pair {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: end;
    }
}

.new-task__tags {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.new-task__tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.new-task__tag {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}

.new-task__tag input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.new-task__tag span {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    color: var(--soft-text-color);
    font-size: 12px;
    transition: border-color .15s ease-out, background-color .15s ease-out, color .15s ease-out, transform .12s ease-out;
}

.new-task__tag:hover span {
    border-color: var(--khaki-color);
}

.new-task__tag input:checked + span {
    border-color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
    color: var(--accent-text-color);
    font-weight: 600;
}

.new-task__tag--priority input:checked + span {
    border-color: #e08a73;
    background: rgba(224, 138, 115, .1);
    color: #b4523f;
}

.new-task__tag input:focus-visible + span {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.new-task__tag:active span {
    transform: scale(.97);
}

.new-task__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.new-task__reason {
    flex-basis: 100%;
    margin: 0;
    color: var(--muted-text-color);
    font-size: 12px;
    text-align: right;
}

/* --- The task window (Kaartvenster): fields in two columns, then the description, the attachments and the
   running conversation, each under a small capital heading. --- */
.work-card {
    max-width: 42rem;
}

.work-card__body {
    display: grid;
    gap: 28px;
}

.work-card__body > .status-message {
    margin: 0;
}

.work-card__fields {
    display: grid;
    gap: 28px;
}

.work-card__grid {
    display: grid;
    gap: 16px 24px;
}

@media (min-width: 40rem) {
    .work-card__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.work-card__field {
    display: block;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.work-card__failure {
    margin: 0;
    padding: 8px 12px;
    border: 1px solid color-mix(in srgb, var(--danger-color) 40%, transparent);
    border-radius: var(--control-radius);
    background: var(--danger-soft-color);
    color: var(--danger-text-color);
    font-size: 12px;
}

.work-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.work-card__chip,
.work-card__turn {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}

.work-card__chip input,
.work-card__turn input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.work-card__chip-face {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 4px;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    color: var(--muted-text-color);
    font-size: 12px;
    transition: border-color .15s ease-out, background-color .15s ease-out, color .15s ease-out, transform .12s ease-out;
}

.work-card__chip-avatar {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 50%;
    background: var(--border-color);
    color: var(--soft-text-color);
    font-size: 8px;
    font-weight: 700;
}

.work-card__chip:hover .work-card__chip-face {
    border-color: var(--khaki-color);
}

.work-card__chip input:checked + .work-card__chip-face {
    border-color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
    color: var(--accent-text-color);
    font-weight: 600;
}

.work-card__chip input:focus-visible + .work-card__chip-face,
.work-card__turn input:focus-visible + span {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.work-card__turn {
    --turn-color: var(--accent-slate);
}

.work-card__turn--moss {
    --turn-color: var(--accent-moss);
}

.work-card__turn--plum {
    --turn-color: var(--accent-plum);
}

.work-card__turn--red {
    --turn-color: var(--danger-color);
}

.work-card__turn span {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    color: var(--muted-text-color);
    font-size: 12px;
    transition: border-color .15s ease-out, background-color .15s ease-out, color .15s ease-out, transform .12s ease-out;
}

.work-card__turn:hover span {
    border-color: var(--khaki-color);
    color: var(--soft-text-color);
}

.work-card__turn input:checked + span {
    border-color: transparent;
    background: var(--turn-color);
    color: var(--accent-contrast-color);
    font-weight: 600;
}

.work-card__chip:active .work-card__chip-face,
.work-card__turn:active span {
    transform: scale(.97);
}

.work-card__description textarea {
    resize: vertical;
}

.work-card__customer {
    color: inherit;
    text-decoration: none;
}

.work-card__customer:hover,
.work-card__customer:focus-visible {
    color: var(--accent-text-color);
}

.work-card__section {
    display: grid;
    gap: 10px;
}

.work-card__attach > summary {
    list-style: none;
}

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

.work-card__section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
}

.work-card__add-attachment {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    color: var(--soft-text-color);
    font-size: 11px;
    font-weight: 600;
    transition: border-color .15s ease-out, color .15s ease-out, transform .12s ease-out;
}

.work-card__add-attachment .icon {
    width: 12px;
    height: 12px;
}

.work-card__section-head:hover .work-card__add-attachment,
.work-card__attach[open] .work-card__add-attachment {
    border-color: var(--accent-color);
    color: var(--accent-text-color);
}

.work-card__section-head:active .work-card__add-attachment {
    transform: scale(.97);
}

.work-card__section-head:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.work-card__upload {
    display: grid;
    justify-items: start;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    background: var(--page-color);
}

.work-card__file {
    max-width: 100%;
    font-size: 12px;
}

.work-card__empty {
    margin: 0;
    color: var(--muted-text-color);
    font-size: 12px;
}

.work-card .board-files__item {
    gap: 10px;
}

.work-card .board-files__name {
    min-width: 0;
    flex: 1;
}

.work-card .board-files__remove {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--muted-text-color);
    cursor: pointer;
}

.work-card .board-files__remove:hover,
.work-card .board-files__remove:focus-visible {
    color: #e08a73;
}

.work-card .board-files__remove .icon {
    width: 12px;
    height: 12px;
}

/* Newest first in the document, so an optimistic note is added on top of the list; shown the other way round, so
   the newest stands right above the field. */
.work-card__notes {
    display: flex;
    flex-direction: column-reverse;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

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

.work-card__notes:not([hidden]) + .work-card__notes-empty {
    display: none;
}

.work-card__note {
    display: flex;
    gap: 10px;
}

.work-card__note-avatar {
    display: grid;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    place-items: center;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--border-color);
    color: var(--soft-text-color);
    font-size: 9px;
    font-weight: 700;
}

.work-card__note-body {
    min-width: 0;
}

.work-card__note-text {
    margin: 0;
    color: var(--soft-text-color);
    font-size: 12px;
    line-height: 1.625;
    white-space: pre-line;
}

.work-card__note-meta {
    margin: 2px 0 0;
    color: var(--muted-text-color);
    font-size: 11px;
}

.work-card__comment {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
    margin-top: 4px;
}

.work-card__comment-field {
    min-width: 0;
    flex: 1;
}

.work-card__comment-field textarea {
    margin-top: 0;
    resize: vertical;
}

.work-card__post {
    margin-bottom: 22px;
}

.work-card__comment-reason {
    flex-basis: 100%;
    order: -1;
    margin: 0;
    color: var(--muted-text-color);
    font-size: 12px;
    text-align: right;
}

/* --- Klantenbestand, round 30: five columns and no sixth; on a phone the place with the person, and the value with
   the advisor, as the prototype's compact list; "Op schema" only on the desktop. --- */
.customers__place--phone,
.customers__value--phone {
    display: none;
}

.customers__row[hidden] {
    display: none;
}

.customers__none--live {
    margin-top: 2rem;
}

.customers__none--live[hidden] {
    display: none;
}

@media (max-width: 40rem) {
    .customers__place {
        display: none;
    }

    .customers__place--phone {
        display: block;
        margin-top: 2px;
    }

    .customers__value--phone {
        display: block;
        margin-top: 8px;
        color: var(--soft-text-color);
        font-size: 11px;
        font-variant-numeric: tabular-nums;
    }

    .customers__cell--value,
    .customers__cell--calm {
        display: none;
    }

    .customers__row {
        padding-bottom: 0;
    }

    .customers__cell--signal {
        margin: 0 0 14px;
    }
}

/* --- Nieuwe klant (NieuwDossiervenster): four steps in one window, the step bar on top, Annuleren or Terug quiet on
   the left and the one main button on the right. --- */
.new-dossier {
    max-width: 36rem;
}

.new-dossier__form {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
}

.new-dossier__steps {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.new-dossier__step {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    gap: 8px;
}

.new-dossier__step-number {
    display: grid;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    place-items: center;
    border-radius: 50%;
    background: var(--page-color);
    color: var(--muted-text-color);
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.new-dossier__step-number .icon {
    width: 12px;
    height: 12px;
}

.new-dossier__step.is-current .new-dossier__step-number {
    background: color-mix(in srgb, var(--accent-color) 20%, transparent);
    color: var(--accent-text-color);
}

.new-dossier__step.is-done .new-dossier__step-number {
    background: var(--accent-color);
    color: var(--accent-contrast-color);
}

.new-dossier__step-name {
    overflow: hidden;
    color: var(--muted-text-color);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.new-dossier__step.is-current .new-dossier__step-name {
    color: var(--text-color);
    font-weight: 600;
}

@media (max-width: 40rem) {
    .new-dossier__step-name {
        display: none;
    }

    .new-dossier__step {
        flex: none;
    }
}

.new-dossier__fields {
    display: grid;
    gap: 16px;
}

.new-dossier__field {
    display: block;
    min-width: 0;
}

.new-dossier__field .noord-digital-dialog__help,
.new-dossier__field .noord-digital-dialog__error {
    display: block;
}

.new-dossier__pair {
    display: grid;
    gap: 16px;
}

@media (min-width: 40rem) {
    .new-dossier__pair {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.new-dossier__number {
    font-variant-numeric: tabular-nums;
}

.new-dossier__team {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.new-dossier__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.new-dossier__chip {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}

.new-dossier__chip input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.new-dossier__chip-face {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 6px;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    color: var(--soft-text-color);
    font-size: 12px;
    transition: border-color .15s ease-out, background-color .15s ease-out, color .15s ease-out, transform .12s ease-out;
}

.new-dossier__chip-check {
    display: none;
}

.new-dossier__chip-check .icon {
    width: 12px;
    height: 12px;
}

.new-dossier__chip:hover .new-dossier__chip-face {
    border-color: var(--khaki-color);
}

.new-dossier__chip input:checked + .new-dossier__chip-face {
    border-color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
    color: var(--accent-text-color);
    font-weight: 600;
}

.new-dossier__chip input:checked + .new-dossier__chip-face .new-dossier__chip-check {
    display: inline-flex;
}

.new-dossier__chip input:focus-visible + .new-dossier__chip-face {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.new-dossier__chip:active .new-dossier__chip-face {
    transform: scale(.97);
}

.new-dossier__notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--accent-color) 35%, transparent);
    border-radius: var(--control-radius);
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
}

.new-dossier__notice > .icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--accent-text-color);
}

.new-dossier__notice-title {
    margin: 0;
    color: var(--text-color);
    font-size: 12px;
    font-weight: 600;
}

.new-dossier__notice-text {
    margin: 2px 0 0;
    color: var(--soft-text-color);
    font-size: 11px;
    line-height: 1.625;
}

.new-dossier__option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    background: var(--page-color);
    cursor: pointer;
}

.new-dossier__option input {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin: 1px 0 0;
    accent-color: var(--accent-color);
}

.new-dossier__option-title {
    display: block;
    color: var(--text-color);
    font-size: 12px;
    font-weight: 600;
}

.new-dossier__option-text {
    display: block;
    margin-top: 2px;
    color: var(--muted-text-color);
    font-size: 11px;
    line-height: 1.625;
}

.new-dossier__foot {
    justify-content: space-between;
}

.new-dossier__spacer {
    flex: 1;
}

.new-dossier__reason {
    flex-basis: 100%;
    order: -1;
    margin: 0;
    color: var(--muted-text-color);
    font-size: 12px;
    text-align: right;
}

/* --- Aanmelden bij de werkruimte (Inloggen, Gesloten, Uitlogmelding): the note after signing out, the refusal under
   the password, Doorgaan with its arrow at the far end, the closed account as its own page, and the promise at the
   foot. The form itself is the shared sign-in form. --- */
.shell-auth__signed-out {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 32px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--accent-color) 35%, transparent);
    border-radius: var(--panel-radius);
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
}

.shell-auth__signed-out > .icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--accent-text-color);
}

.shell-auth__signed-out-title {
    margin: 0;
    color: var(--accent-text-color);
    font-size: 13px;
    font-weight: 600;
}

.shell-auth__signed-out-text {
    margin: 4px 0 0;
    color: var(--soft-text-color);
    font-size: 12px;
    line-height: 1.625;
}

.portal-auth .shell-auth__error {
    margin: -8px 0 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--danger-text-color);
    font-size: 12px;
    line-height: 1.625;
}

.portal-auth .shell-auth__error ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.portal-auth .shell-auth__continue {
    justify-content: space-between;
    padding: 14px 20px;
    font-size: 14px;
}

.shell-auth__footnote {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 24px 0 0;
    color: var(--muted-text-color);
    font-size: 11px;
    line-height: 1.625;
}

.shell-auth__footnote > .icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    margin-top: 3px;
}

.shell-auth__closed-mark {
    display: flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    margin-top: 32px;
    border-radius: 50%;
    background: var(--danger-soft-color);
    color: var(--danger-text-color);
}

.shell-auth__closed-mark .icon {
    width: 20px;
    height: 20px;
}

.shell-auth__closed-mark + .portal-auth__title {
    margin-top: 20px;
}

.shell-auth__card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 24px;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--panel-radius);
    background: var(--surface-color);
}

.shell-auth__card > .icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--khaki-text-color);
}

.shell-auth__card-title {
    margin: 0;
    color: var(--text-color);
    font-size: 13px;
    font-weight: 600;
}

.shell-auth__card-text {
    margin: 4px 0 0;
    color: var(--soft-text-color);
    font-size: 12px;
    line-height: 1.625;
}

/* === /region: workboard-and-customers === */

/* === region: record-and-prepare (Klantrecord, Klaarzetten, Opdracht, Bericht, Kluis, Gegadigden) === */
/* The building blocks the record screens share (prototype recordstijl.ts): a white sheet with a hairline, a small
   capital label above a group, rows with their actions on the right, pills in the signal colours. */
.record-card {
    container-type: inline-size;
    display: grid;
    gap: 14px;
    align-content: start;
    min-width: 0;
    padding: 20px 22px;
    border: 1px solid var(--border-color);
    border-radius: var(--panel-radius);
    background: var(--surface-color);
    box-shadow: var(--panel-shadow);
}

.record-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 12px;
}

.record-card__title {
    margin: 0;
    color: var(--text-color);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.01em;
}

.record-label {
    margin: 0;
    color: var(--muted-text-color);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.record-hint {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    color: var(--muted-text-color);
    font-size: 11px;
    line-height: 1.55;
}

.record-hint svg {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    margin-top: 2px;
}

.record-number {
    font-variant-numeric: tabular-nums;
}

.record-empty {
    display: grid;
    justify-items: start;
    gap: 10px;
    margin: 0;
    padding: 14px 16px;
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    color: var(--muted-text-color);
    font-size: 12px;
    line-height: 1.55;
}

.record-empty p {
    margin: 0;
}

/* A list that holds its own empty line: the line shows only while nothing else is in the list, so an item added
   at once (optimistic) replaces it without a reload. */
.record-list-empty {
    color: var(--muted-text-color);
    font-size: 12px;
    line-height: 1.55;
}

.record-list-empty:not(:only-child) {
    display: none;
}

.record-pill {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--surface-muted-color);
    color: var(--soft-text-color);
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.record-pill span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.record-pill svg {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
}

.record-pill--overdue,
.record-pill--danger {
    background: var(--danger-soft-color);
    color: var(--danger-text-color);
}

.record-pill--quiet {
    color: var(--accent-hover-color);
}

.record-pill--none,
.record-pill--success {
    background: var(--success-soft-color);
    color: var(--success-text-color);
}

.record-pill--warning {
    background: var(--warning-soft-color);
    color: color-mix(in srgb, var(--warning-color) 70%, var(--text-color));
}

.record-pill--accent {
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    color: var(--accent-text-color);
}

.record-rows {
    display: grid;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--border-color);
    list-style: none;
}

.record-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

.record-row__main {
    flex: 1 1 14rem;
    min-width: 0;
}

.record-row__title {
    margin: 0;
    color: var(--text-color);
    font-size: 13px;
    font-weight: 500;
}

.record-row__meta {
    margin: 2px 0 0;
    color: var(--muted-text-color);
    font-size: 11px;
    line-height: 1.55;
}

.record-row__link {
    color: var(--soft-text-color);
    font-size: 12px;
    text-decoration: none;
}

.record-row__link:hover,
.record-row__link:focus-visible {
    color: var(--accent-text-color);
}

.record-row__actions {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

/* Cards in a list: a sheet per item with a coloured stripe on the left for its kind or state. */
.record-items {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.record-item {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    overflow: hidden;
    padding: 12px 14px 12px 17px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--surface-color);
}

.record-item::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--stripe, transparent);
}

.record-item--muted {
    background: color-mix(in srgb, var(--surface-muted-color) 35%, var(--surface-color));
}

.record-avatar {
    display: inline-flex;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface-muted-color);
    color: var(--soft-text-color);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.record-facts {
    display: grid;
    gap: 12px 32px;
    margin: 0;
}

@container (min-width: 30rem) {
    .record-facts {
        grid-template-columns: 1fr 1fr;
    }
}

.record-facts > div {
    min-width: 0;
}

.record-facts dt {
    color: var(--muted-text-color);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.record-facts dd {
    overflow: hidden;
    margin: 2px 0 0;
    color: var(--text-color);
    font-size: 13px;
    text-overflow: ellipsis;
}

.record-inline-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.record-inline-actions form {
    margin: 0;
}

/* A page with one sheet and a quiet column beside it. */
.record-layout {
    display: grid;
    gap: 20px;
    align-items: start;
}

@media (min-width: 64rem) {
    .record-layout {
        grid-template-columns: minmax(0, 1fr) 320px;
    }
}

.record-stack {
    display: grid;
    gap: 20px;
    align-content: start;
    min-width: 0;
}

.record-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    color: var(--muted-text-color);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.record-back svg {
    width: 14px;
    height: 14px;
}

.record-back:hover,
.record-back:focus-visible {
    color: var(--text-color);
}

.record-page-title {
    margin: 0 0 4px;
    color: var(--text-color);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.021em;
}

.record-page-lead {
    margin: 0 0 20px;
    color: var(--soft-text-color);
    font-size: 12px;
    line-height: 1.55;
}

/* A release that can be taken back: the state and the one quiet act that turns it. */
.record-release {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.record-release__state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent-hover-color);
    font-size: 11px;
}

.record-release__state svg {
    width: 12px;
    height: 12px;
}

.record-release.is-released .record-release__state {
    color: var(--muted-text-color);
}

.record-release__state--on,
.record-release.is-released .record-release__state--off {
    display: none;
}

.record-release.is-released .record-release__state--on {
    display: inline-flex;
}

.record-card > .noord-digital-button,
.record-card > form > .noord-digital-button {
    justify-self: start;
}

/* KLANTRECORD v30 (prototype Klantrecord.tsx, Zijpaneel.tsx, Recordtabbladen.tsx, Contacttabbladen.tsx): the record
   is a panel over the customer list, one view high, beside the strip of the side menu. The head stays on top, the
   tab below it scrolls, the notes run along on the right. Sizes are the prototype's pixels. */
.rec-sheet {
    position: fixed;
    inset: 0;
    z-index: 45;
    display: flex;
    justify-content: flex-end;
}

.rec-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: var(--overlay-color);
    animation: rec-fade-in .16s ease-out both;
    cursor: pointer;
}

.rec-sheet__panel {
    container-type: inline-size;
    position: relative;
    display: flex;
    width: calc(100% - 5rem);
    max-width: 1360px;
    height: 100vh;
    height: 100dvh;
    flex-direction: column;
    border-left: 1px solid var(--border-color);
    background: var(--page-color);
    box-shadow: var(--overlay-shadow);
    animation: rec-slide-in .26s cubic-bezier(.23, 1, .32, 1) both;
}

@media (max-width: 63.99rem) {
    .rec-sheet__panel {
        width: calc(100% - 2.5rem);
    }
}

@media (max-width: 39.99rem) {
    .rec-sheet__panel {
        width: 100%;
    }
}

.rec-sheet__scroll {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

@keyframes rec-fade-in {
    from { opacity: 0; }
}

/* The panel slides in without starting invisible: should a frame of the animation be late, the record is on screen. */
@keyframes rec-slide-in {
    from { transform: translateX(32px); }
}

html.rec-dialog-open,
html:has(.rec-sheet) {
    overflow: hidden;
}

.rec-number {
    font-variant-numeric: tabular-nums;
}

.rec-status {
    margin: 16px 24px 0;
}

/* The head: name and signal, the place, the contact person, the key figures, the buttons, the portal term, tabs. */
.rec-head {
    position: relative;
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    padding: calc(env(safe-area-inset-top, 0px) + 20px) 72px 0 24px;
    border-bottom: 1px solid var(--border-color);
}

.rec-close {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    right: 12px;
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--muted-text-color);
    transition: background-color .15s ease-out, color .15s ease-out;
}

.rec-close:hover,
.rec-close:focus-visible {
    background: var(--surface-muted-color);
    color: var(--text-color);
}

.rec-close svg {
    width: 16px;
    height: 16px;
}

.rec-head__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    order: 0;
}

.rec-head__title h2 {
    margin: 0;
    color: var(--text-color);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.01em;
}

.rec-signal {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--surface-muted-color);
    color: var(--soft-text-color);
    font-size: 11px;
    font-weight: 500;
}

.rec-signal span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rec-signal svg {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
}

.rec-signal--overdue,
.rec-signal--closed {
    background: var(--danger-soft-color);
    color: var(--danger-text-color);
}

.rec-signal--closed {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.rec-signal--quiet {
    color: var(--accent-text-color);
}

.rec-grace {
    order: 1;
    margin-top: 16px;
    padding: 12px 16px;
    border: 1px solid color-mix(in srgb, var(--danger-color) 35%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--danger-soft-color) 50%, transparent);
}

.rec-grace p {
    margin: 0;
    color: var(--text-color);
    font-size: 12px;
    line-height: 1.625;
}

.rec-grace form {
    margin: 12px 0 0;
}

.rec-head__place {
    order: 2;
    margin: 4px 0 0;
    color: var(--soft-text-color);
    font-size: 12px;
}

.rec-head__info {
    order: 3;
}

.rec-head__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    order: 4;
    margin-top: 20px;
}

.rec-head__contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    margin-top: 8px;
}

.rec-head__person {
    color: var(--text-color);
    font-size: 13px;
    font-weight: 500;
}

.rec-head__person span {
    color: var(--muted-text-color);
    font-weight: 400;
}

.rec-head__link {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
    color: var(--soft-text-color);
    font-size: 13px;
    text-decoration: none;
    transition: color .15s ease-out;
}

.rec-head__link span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rec-head__link svg {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    color: var(--muted-text-color);
}

.rec-head__link:hover,
.rec-head__link:focus-visible {
    color: var(--accent-text-color);
}

.rec-head__buyer {
    margin: 12px 0 0;
    color: var(--soft-text-color);
    font-size: 12px;
}

.rec-figures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 24px;
    margin: 20px 0 0;
}

@container (min-width: 40rem) {
    .rec-figures {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.rec-figures > div {
    min-width: 0;
}

.rec-figures dt,
.rec-facts dt,
.rec-label,
.rec-field__label {
    margin: 0;
    color: var(--muted-text-color);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.rec-label {
    font-size: 11px;
}

.rec-figures dd {
    margin: 4px 0 0;
    color: var(--text-color);
    font-size: 12px;
    line-height: 1.375;
}

.rec-head__portal {
    margin: 16px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    color: var(--muted-text-color);
    font-size: 11px;
    line-height: 1.625;
}

.rec-head__portal--urgent {
    color: var(--accent-text-color);
}

.rec-head__portal--overdue {
    color: var(--danger-text-color);
}

/* The desktop reads down: facts, then buttons; the portal term sits under the buttons, above the tabs. */
.rec-head__info {
    display: contents;
}

.rec-head__info > .rec-head__contact,
.rec-head__info > .rec-figures,
.rec-head__info > .rec-head__buyer {
    order: 3;
}

.rec-head__info > .rec-head__portal {
    order: 5;
}

.rec-head__toggle {
    display: none;
    order: 6;
}

/* Buttons of the record: the shared button, at the prototype's size (12px, 12 by 8). */
.rec-btn {
    min-height: 0;
    gap: 6px;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.2;
}

.rec-btn svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

.rec-btn--small {
    padding: 6px 12px;
}

.rec-btn--wide {
    width: 100%;
    padding: 10px 16px;
    font-size: 13px;
}

.rec-btn--grow {
    flex: 1;
    padding: 10px 16px;
    font-size: 13px;
}

.rec-btn.noord-digital-button--quiet {
    color: var(--soft-text-color);
}

.rec-btn--gold-outline {
    border-color: var(--accent-color);
    background: transparent;
    color: var(--accent-text-color);
}

.rec-btn[aria-disabled="true"] {
    opacity: .35;
    cursor: not-allowed;
    pointer-events: auto;
}

.rec-reason {
    flex-basis: 100%;
    order: -1;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--text-color);
    color: var(--page-color);
    font-size: 11px;
    line-height: 1.5;
}

/* More: a menu under the three dots, opening over the page; the dangerous act last, in the signal colour. */
.rec-menu {
    position: relative;
}

.rec-menu__trigger {
    display: inline-flex;
    align-items: center;
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--soft-text-color);
    list-style: none;
    cursor: pointer;
    transition: border-color .15s ease-out, color .15s ease-out, transform .16s ease-out;
}

.rec-menu__trigger::-webkit-details-marker {
    display: none;
}

.rec-menu__trigger svg {
    width: 14px;
    height: 14px;
}

.rec-menu__trigger:hover,
.rec-menu[open] > .rec-menu__trigger {
    border-color: var(--accent-color);
    color: var(--accent-text-color);
}

.rec-menu__trigger:active {
    transform: scale(.97);
}

.rec-menu__list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 40;
    display: grid;
    min-width: 220px;
    max-width: min(280px, 80vw);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--surface-color);
    box-shadow: var(--overlay-shadow);
    animation: rec-pop .14s ease-out both;
}

@keyframes rec-pop {
    from { opacity: 0; transform: translateY(-4px); }
}

.rec-menu__list form {
    margin: 0;
}

.rec-menu__item {
    display: block;
    width: 100%;
    padding: 8px 14px;
    border: 0;
    background: none;
    color: var(--text-color);
    font: inherit;
    font-size: 13px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease-out;
}

.rec-menu__item strong {
    display: block;
    font-weight: 600;
}

.rec-menu__item span {
    display: block;
    margin-top: 2px;
    color: var(--muted-text-color);
    font-size: 11px;
    line-height: 1.625;
}

.rec-menu__item:hover,
.rec-menu__item:focus-visible {
    background: var(--surface-muted-color);
}

.rec-menu__item--danger {
    color: var(--danger-text-color);
}

.rec-menu__item--danger:hover,
.rec-menu__item--danger:focus-visible {
    background: var(--danger-soft-color);
}

.rec-menu__rule {
    margin: 4px 0;
    border: 0;
    border-top: 1px solid var(--border-color);
}

/* The tabs sit side by side and slide on a narrow panel; they never wrap onto a second line there. */
.rec-tabs {
    order: 7;
    margin-top: 24px;
}

.rec-tabs ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rec-tabs__tab {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: -1px;
    padding: 8px 12px;
    border-bottom: 2px solid transparent;
    color: var(--muted-text-color);
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s ease-out, border-color .15s ease-out;
}

.rec-tabs__tab:hover,
.rec-tabs__tab:focus-visible {
    color: var(--soft-text-color);
}

.rec-tabs__tab[aria-current="page"] {
    border-bottom-color: var(--accent-color);
    color: var(--text-color);
    font-weight: 600;
}

.rec-tabs__count {
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--surface-muted-color);
    color: var(--muted-text-color);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
}

.rec-tabs__tab[aria-current="page"] .rec-tabs__count {
    background: color-mix(in srgb, var(--accent-color) 15%, transparent);
    color: var(--accent-text-color);
}

.rec-compact-only,
.rec-narrow-only {
    display: none;
}

/* A narrow panel (tablet and phone, prototype round 9): the button first, the details behind one line, tabs slide,
   the engagement moves under More. It hangs on the panel's own width, not on the window. */
@container (max-width: 58.99rem) {
    .rec-head {
        padding-right: 56px;
    }

    .rec-head__actions {
        order: 2;
        margin-top: 16px;
    }

    .rec-head__place {
        order: 1;
    }

    .rec-wide-only {
        display: none;
    }

    .rec-compact-only {
        display: revert;
    }

    .rec-menu__item.rec-compact-only {
        display: block;
    }

    .rec-head__toggle {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        order: 3;
        margin-top: 12px;
        padding: 12px 0 0;
        border: 0;
        border-top: 1px solid var(--border-color);
        background: none;
        color: var(--soft-text-color);
        font: inherit;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
    }

    .rec-head__toggle svg {
        width: 14px;
        height: 14px;
        transition: transform .2s ease-out;
    }

    .rec-head__toggle[aria-expanded="true"] svg {
        transform: rotate(180deg);
    }

    .rec-head__info {
        display: none;
        order: 4;
    }

    .rec-head.is-info-open .rec-head__info {
        display: block;
    }

    .rec-head__info .rec-head__portal {
        margin-bottom: 0;
    }

    .rec-tabs {
        margin-top: 16px;
    }

    .rec-tabs ul {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }

    .rec-tabs ul::-webkit-scrollbar {
        display: none;
    }

    .rec-tabs li {
        flex-shrink: 0;
    }
}

/* The body: the tab on the left, the notes along on the right on a wide panel; on a narrower one the notes are a
   tab of their own. Only the chosen tab shows; the others are already on the page, so switching is instant. */
.rec-body {
    display: grid;
    gap: 24px;
    padding: 24px;
}

.rec-body__main {
    min-width: 0;
}

.rec-body [data-tab-panel] {
    display: none;
}

.rec-body[data-active="taken"] [data-tab-panel="taken"],
.rec-body[data-active="klantenportaal"] [data-tab-panel="klantenportaal"],
.rec-body[data-active="documenten"] [data-tab-panel="documenten"],
.rec-body[data-active="contact"] [data-tab-panel="contact"],
.rec-body[data-active="notities"] [data-tab-panel="notities"] {
    display: block;
    animation: rec-tab-in .18s ease-out both;
}

@keyframes rec-tab-in {
    from { opacity: 0; transform: translateY(4px); }
}

.rec-body__notes:not([data-tab-panel]) {
    display: none;
}

@container (min-width: 75rem) {
    .rec-body {
        grid-template-columns: minmax(0, 1fr) 340px;
    }

    .rec-body .rec-body__notes,
    .rec-body .rec-body__notes[data-tab-panel] {
        display: block;
        padding-left: 24px;
        border-left: 1px solid var(--border-color);
        animation: none;
    }

    .rec-body[data-active="notities"] [data-tab-panel="taken"] {
        display: block;
    }
}

@container (max-width: 74.99rem) {
    .rec-narrow-only,
    .rec-tabs li.rec-compact-only {
        display: revert;
    }
}

.rec-panel--spaced[data-tab-panel] > * + *,
.rec-panel--spaced > * + * {
    margin-top: 36px;
}

.rec-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
}

.rec-text {
    margin: 12px 0 0;
    color: var(--soft-text-color);
    font-size: 13px;
    line-height: 1.625;
}

.rec-text--small {
    margin-top: 12px;
    color: var(--muted-text-color);
    font-size: 11px;
}

.rec-text--lead {
    margin-top: 16px;
}

.rec-text--icon {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.rec-text--icon svg {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    margin-top: 2px;
}

.rec-list-empty {
    color: var(--muted-text-color);
    font-size: 12px;
    line-height: 1.625;
}

.rec-list-empty:not(:only-child) {
    display: none;
}

.rec-empty-line {
    display: grid;
    justify-items: start;
    gap: 8px;
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--surface-color);
    color: var(--muted-text-color);
    font-size: 12px;
    line-height: 1.625;
    list-style: none;
}

.rec-empty-line p {
    margin: 0;
}

.rec-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    color: var(--muted-text-color);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.rec-back svg {
    width: 14px;
    height: 14px;
}

.rec-back:hover,
.rec-back:focus-visible {
    color: var(--text-color);
}

.rec-private {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    color: var(--accent-text-color);
    font-size: 11px;
    font-weight: 400;
}

.rec-private svg {
    width: 12px;
    height: 12px;
}

/* TAKEN: separate cards in the colours of the board, a box to tick off, the term on the right. */
.rec-work {
    display: grid;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.rec-work__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    overflow: hidden;
    padding: 12px 14px 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--surface-color);
    transition: border-color .15s ease-out, opacity .22s ease-out, transform .22s ease-out;
}

.rec-work__item::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--border-color);
}

.rec-work__item:hover,
.rec-work__item:focus-within {
    border-color: var(--accent-color);
}

.rec-work__item--nearing {
    border-color: color-mix(in srgb, var(--warning-color) 40%, transparent);
    background: color-mix(in srgb, var(--warning-soft-color) 70%, transparent);
}

.rec-work__item--nearing::before {
    background: var(--warning-color);
}

.rec-work__item--critical {
    border-color: color-mix(in srgb, var(--danger-color) 30%, transparent);
    background: color-mix(in srgb, var(--danger-soft-color) 60%, transparent);
}

.rec-work__item--overdue {
    border-color: color-mix(in srgb, var(--danger-color) 45%, transparent);
    background: var(--danger-soft-color);
}

.rec-work__item--critical::before,
.rec-work__item--overdue::before {
    background: var(--danger-color);
}

.rec-work__item.is-leaving {
    opacity: 0;
    transform: translateX(8px);
}

.rec-work__check-form {
    margin: 0;
}

.rec-check {
    position: relative;
    display: inline-flex;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1.5px solid var(--soft-text-color);
    border-radius: 4px;
    background: var(--surface-color);
    color: var(--accent-moss);
    cursor: pointer;
    transition: border-color .15s ease-out, background-color .15s ease-out;
}

.rec-check svg {
    width: 12px;
    height: 12px;
    stroke-width: 3;
    opacity: 0;
    transition: opacity .15s ease-out;
}

.rec-check:hover,
.rec-check:focus-visible {
    border-color: var(--accent-moss);
    background: color-mix(in srgb, var(--accent-moss) 15%, transparent);
}

.rec-check:hover svg,
.rec-check:focus-visible svg {
    opacity: 1;
}

.rec-check--done {
    border-color: var(--accent-moss);
    background: color-mix(in srgb, var(--accent-moss) 16%, transparent);
}

.rec-check--done svg:first-child {
    opacity: 1;
}

.rec-check--done svg + svg {
    position: absolute;
    width: 10px;
    height: 10px;
    color: var(--soft-text-color);
}

.rec-check--done:hover,
.rec-check--done:focus-visible {
    border-color: var(--soft-text-color);
    background: var(--surface-muted-color);
}

.rec-check--done:hover svg:first-child,
.rec-check--done:focus-visible svg:first-child {
    opacity: 0;
}

.rec-check--done:hover svg + svg,
.rec-check--done:focus-visible svg + svg {
    opacity: 1;
}

.rec-work__main {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    gap: 16px;
    color: inherit;
    text-decoration: none;
}

.rec-work__text {
    min-width: 0;
    flex: 1;
}

.rec-work__title {
    display: block;
    overflow: hidden;
    color: var(--text-color);
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rec-work__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.rec-tag {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.rec-tag--office {
    background: color-mix(in srgb, var(--accent-moss) 16%, transparent);
    color: var(--accent-moss);
}

.rec-tag--customer {
    background: color-mix(in srgb, var(--accent-slate) 16%, transparent);
    color: var(--accent-slate);
}

.rec-tag--third {
    background: color-mix(in srgb, var(--accent-plum) 16%, transparent);
    color: var(--accent-plum);
}

.rec-tag--priority {
    background: var(--danger-soft-color);
    color: var(--danger-text-color);
}

.rec-work__names {
    color: var(--muted-text-color);
    font-size: 11px;
}

.rec-work__due {
    flex-shrink: 0;
    color: var(--muted-text-color);
    font-size: 11px;
    font-weight: 500;
}

.rec-work__item--nearing .rec-work__due {
    color: var(--warning-text-color);
}

.rec-work__item--critical .rec-work__due,
.rec-work__item--overdue .rec-work__due {
    color: var(--danger-text-color);
}

.rec-work__empty {
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--surface-color);
}

.rec-quick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.rec-quick__field {
    min-width: 0;
    flex: 1;
}

.rec-input {
    display: block;
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--page-color);
    color: var(--text-color);
    font: inherit;
    font-size: 12px;
    line-height: 1.5;
    transition: border-color .15s ease-out;
}

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

.rec-input:focus {
    border-color: var(--accent-color);
    outline: none;
}

textarea.rec-input {
    resize: vertical;
}

.rec-done {
    margin-top: 32px;
}

.rec-done__summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
    color: var(--muted-text-color);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    list-style: none;
    cursor: pointer;
}

.rec-done__summary::-webkit-details-marker {
    display: none;
}

.rec-done__summary svg {
    width: 14px;
    height: 14px;
    transition: transform .15s ease-out;
}

.rec-done[open] .rec-done__summary svg {
    transform: rotate(90deg);
}

.rec-done__list {
    margin: 12px 0 0;
    padding: 0;
    border-top: 1px solid var(--border-color);
    list-style: none;
}

.rec-done__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

.rec-done__item form {
    margin: 0;
}

.rec-done__title {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    color: var(--soft-text-color);
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
    text-overflow: ellipsis;
}

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

.rec-done__date {
    flex-shrink: 0;
    color: var(--muted-text-color);
    font-size: 11px;
}

/* KLANTENPORTAAL: three counts, what lies with the customer, the vault, the questionnaire per part. */
.rec-stats {
    display: grid;
    gap: 16px;
    margin: 16px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

@container (min-width: 36rem) {
    .rec-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
    }
}

.rec-stats dt {
    color: var(--muted-text-color);
    font-size: 11px;
}

.rec-stats dd {
    margin: 4px 0 0;
    color: var(--text-color);
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
}

.rec-lines {
    margin: 20px 0 0;
    padding: 0;
    border-top: 1px solid var(--border-color);
    list-style: none;
}

.rec-lines__item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}

.rec-lines__main {
    min-width: 0;
    flex: 1;
}

.rec-lines__title {
    margin: 0;
    overflow: hidden;
    color: var(--text-color);
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rec-lines__meta {
    margin: 2px 0 0;
    color: var(--muted-text-color);
    font-size: 11px;
}

.rec-due {
    flex-shrink: 0;
    color: var(--muted-text-color);
    font-size: 11px;
}

.rec-due--urgent {
    color: var(--accent-text-color);
}

.rec-due--overdue {
    color: var(--danger-text-color);
}

.rec-lines .rec-btn {
    font-size: 11px;
}

.rec-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--surface-muted-color);
    color: var(--soft-text-color);
    font-size: 11px;
    font-weight: 600;
}

.rec-state svg {
    width: 12px;
    height: 12px;
}

.rec-state--gold {
    background: color-mix(in srgb, var(--accent-color) 18%, transparent);
    color: var(--accent-text-color);
}

.rec-state--danger {
    background: var(--danger-soft-color);
    color: var(--danger-text-color);
}

.rec-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 12px 0 0;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--danger-color) 30%, transparent);
    border-radius: 8px;
    background: var(--danger-soft-color);
    color: var(--danger-text-color);
    font-size: 12px;
    line-height: 1.625;
}

.rec-alert svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-top: 2px;
}

.rec-traces {
    margin: 16px 0 0 6px;
    padding: 0 0 0 16px;
    border-left: 1px solid var(--border-color);
    list-style: none;
}

.rec-traces__item {
    position: relative;
    padding: 8px 0;
}

.rec-traces__dot {
    position: absolute;
    top: 12px;
    left: -22px;
    display: inline-flex;
    width: 12px;
    height: 12px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--page-color);
}

.rec-traces__item.is-done .rec-traces__dot {
    border-color: var(--accent-color);
    background: var(--accent-color);
    color: var(--accent-contrast-color);
}

.rec-traces__dot svg {
    width: 8px;
    height: 8px;
    stroke-width: 4;
}

.rec-traces__line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0 16px;
}

.rec-traces__label {
    color: var(--muted-text-color);
    font-size: 13px;
}

.rec-traces__item.is-done .rec-traces__label {
    color: var(--text-color);
}

.rec-traces__moment {
    color: var(--muted-text-color);
    font-size: 11px;
}

.rec-traces__explanation {
    margin: 2px 0 0;
    color: var(--muted-text-color);
    font-size: 11px;
    line-height: 1.625;
}

.rec-vault__copy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.rec-vault__code {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--surface-color);
    color: var(--soft-text-color);
    font-size: 11px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rec-new-vault {
    margin-top: 12px;
}

.rec-new-vault > summary {
    display: inline-flex;
    list-style: none;
}

.rec-new-vault > summary::-webkit-details-marker {
    display: none;
}

.rec-new-vault[open] > summary {
    display: none;
}

.rec-new-vault__box {
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--surface-color);
}

.rec-new-vault__box p {
    margin: 0 0 12px;
    color: var(--soft-text-color);
    font-size: 12px;
    line-height: 1.625;
}

.rec-new-vault__box form {
    margin: 0;
}

.rec-progress {
    display: grid;
    gap: 14px;
    margin: 16px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--border-color);
    list-style: none;
}

.rec-progress__row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.rec-progress__name {
    width: 168px;
    flex-shrink: 0;
    color: var(--text-color);
    font-size: 13px;
    text-decoration: none;
}

.rec-progress__name:hover,
.rec-progress__name:focus-visible {
    color: var(--accent-text-color);
}

.rec-progress__bar {
    display: flex;
    height: 6px;
    flex: 1;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-muted-color);
}

.rec-progress__bar span {
    height: 100%;
    border-radius: 999px;
    background: var(--accent-color);
}

.rec-progress__bar span.is-complete {
    background: var(--khaki-color);
}

.rec-progress__count {
    width: 54px;
    flex-shrink: 0;
    color: var(--muted-text-color);
    font-size: 11px;
    text-align: right;
}

.rec-progress__release {
    width: 104px;
    flex-shrink: 0;
    margin: 0;
    text-align: right;
}

.rec-progress__state {
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted-text-color);
    font: inherit;
    font-size: 11px;
    cursor: pointer;
}

.rec-progress__state.is-closed {
    color: var(--accent-text-color);
}

.rec-progress__state:hover,
.rec-progress__state:focus-visible {
    text-decoration: underline;
}

@container (max-width: 36rem) {
    .rec-progress__row {
        flex-wrap: wrap;
        gap: 6px 12px;
    }

    .rec-progress__name {
        width: auto;
        flex: 1 1 100%;
    }
}

/* DOCUMENTEN: a sheet per piece, its state as a coloured word, the release and the download on one line right. */
.rec-docs {
    display: grid;
    gap: 10px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.rec-doc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--surface-color);
}

.rec-doc--actionrequired {
    border-color: color-mix(in srgb, var(--accent-color) 30%, transparent);
}

.rec-doc--forreview {
    border-color: color-mix(in srgb, var(--accent-slate) 25%, transparent);
}

.rec-doc--signed {
    border-color: color-mix(in srgb, var(--accent-moss) 25%, transparent);
}

.rec-doc--waitingforcounterparty {
    border-color: color-mix(in srgb, var(--accent-plum) 25%, transparent);
}

.rec-doc__main {
    min-width: 0;
    flex: 1 1 18rem;
}

.rec-doc__name {
    margin: 0;
    color: var(--text-color);
    font-size: 13px;
    font-weight: 500;
}

.rec-doc__meta {
    margin: 2px 0 0;
    color: var(--muted-text-color);
    font-size: 11px;
    line-height: 1.625;
}

.rec-doc__side {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.rec-doc__status {
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
}

.rec-doc--actionrequired .rec-doc__status {
    background: color-mix(in srgb, var(--accent-color) 18%, transparent);
    color: var(--accent-text-color);
}

.rec-doc--forreview .rec-doc__status {
    background: color-mix(in srgb, var(--accent-slate) 16%, transparent);
    color: var(--accent-slate);
}

.rec-doc--signed .rec-doc__status {
    background: color-mix(in srgb, var(--accent-moss) 16%, transparent);
    color: var(--accent-moss);
}

.rec-doc--waitingforcounterparty .rec-doc__status {
    background: color-mix(in srgb, var(--accent-plum) 16%, transparent);
    color: var(--accent-plum);
}

.rec-doc--draft .rec-doc__status {
    background: var(--surface-muted-color);
    color: var(--muted-text-color);
}

.rec-doc__release {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted-text-color);
    font-size: 11px;
}

.rec-doc__release.is-closed {
    color: var(--accent-text-color);
}

.rec-doc__release svg {
    width: 12px;
    height: 12px;
}

/* CONTACT: the facts and three buttons, or the form in their place; the others around it; the contact moments. */
.rec-facts {
    display: grid;
    gap: 12px 32px;
    margin: 16px 0 0;
}

@container (min-width: 36rem) {
    .rec-facts {
        grid-template-columns: 1fr 1fr;
    }
}

.rec-facts > div {
    min-width: 0;
}

.rec-facts dd {
    margin: 2px 0 0;
    overflow: hidden;
    color: var(--text-color);
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rec-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

[data-edit-area] [data-edit-form],
[data-edit-area].is-editing [data-edit-view] {
    display: none;
}

[data-edit-area].is-editing [data-edit-form] {
    display: grid;
}

.rec-edit {
    display: grid;
    gap: 16px;
}

[data-edit-area] .rec-edit[data-edit-form] {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--page-color);
}

@container (min-width: 36rem) {
    /* minmax(0, 1fr): a field never widens its column past the panel (Klaarzetten, the record's forms). */
    .rec-edit {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.rec-edit--inner {
    padding-top: 12px;
}

.rec-field {
    display: grid;
    align-content: start;
    gap: 4px;
    min-width: 0;
}

.rec-field--wide,
.rec-edit > .validation-summary {
    grid-column: 1 / -1;
}

.rec-field .rec-input {
    margin-top: 2px;
    padding: 8px 10px;
}

.rec-field__error {
    color: var(--danger-text-color);
    font-size: 11px;
}

.rec-field__error:empty {
    display: none;
}

.rec-field__help {
    color: var(--muted-text-color);
    font-size: 11px;
    line-height: 1.625;
}

.rec-edit__actions,
.rec-dialog__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.rec-dialog__actions--start {
    justify-content: flex-start;
    margin-top: 24px;
}

.rec-involved {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.rec-people {
    margin: 10px 0 0;
    padding: 0;
    border-top: 1px solid var(--border-color);
    list-style: none;
}

.rec-people__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

.rec-people__row form {
    margin: 0;
}

.rec-people__main {
    min-width: 0;
    flex: 1;
}

.rec-people__name {
    margin: 0;
    color: var(--text-color);
    font-size: 13px;
}

.rec-people__role {
    margin: 2px 0 0;
    color: var(--muted-text-color);
    font-size: 11px;
}

.rec-people__link {
    color: var(--soft-text-color);
    font-size: 12px;
    text-decoration: none;
    transition: color .15s ease-out;
}

.rec-people__link:hover,
.rec-people__link:focus-visible {
    color: var(--accent-text-color);
}

.rec-icon-button {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--muted-text-color);
    cursor: pointer;
    transition: color .15s ease-out, background-color .15s ease-out;
}

.rec-icon-button svg {
    width: 14px;
    height: 14px;
}

.rec-icon-button:hover,
.rec-icon-button:focus-visible {
    color: var(--accent-text-color);
}

.rec-icon-button--danger:hover,
.rec-icon-button--danger:focus-visible {
    color: var(--danger-text-color);
}

.rec-moments {
    margin: 16px 0 0;
    padding: 0;
    border-top: 1px solid var(--border-color);
    list-style: none;
}

.rec-moments > li {
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}

.rec-moments > li.rec-list-empty {
    border-bottom: 0;
}

.rec-moment__line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.rec-moment__kind {
    color: var(--muted-text-color);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.rec-moment__when {
    color: var(--muted-text-color);
    font-size: 11px;
}

.rec-moment__text {
    margin: 4px 0 0;
    color: var(--soft-text-color);
    font-size: 12px;
    line-height: 1.625;
}

.rec-moment.is-arriving,
.rec-note.is-arriving {
    animation: rec-tab-in .2s ease-out both;
}

/* NOTITIES: the field on top as in a comment thread, one line until it is used, the newest note first. */
.rec-notes__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.rec-notes__title {
    margin: 0;
    color: var(--text-color);
    font-size: 15px;
    font-weight: 600;
}

.rec-notes__private {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent-text-color);
    font-size: 11px;
}

.rec-notes__private svg {
    width: 12px;
    height: 12px;
}

.rec-avatar {
    display: inline-flex;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--sand-color);
    color: var(--accent-contrast-color);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.rec-compose {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.rec-compose__form {
    min-width: 0;
    flex: 1;
    margin: 0;
}

.rec-compose__field {
    display: block;
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--page-color);
    color: var(--text-color);
    font: inherit;
    font-size: 12px;
    line-height: 1.625;
    resize: none;
    transition: border-color .15s ease-out, min-height .15s ease-out;
}

.rec-compose__field::placeholder {
    color: var(--muted-text-color);
}

.rec-compose__field:focus {
    border-color: var(--accent-color);
    outline: none;
}

.rec-compose__field:focus,
.rec-compose__field:not(:placeholder-shown) {
    min-height: 88px;
}

.rec-compose__hint {
    margin: 6px 0 0;
    color: var(--muted-text-color);
    font-size: 11px;
}

.rec-compose__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

.rec-compose__form:not(:focus-within):has(.rec-compose__field:placeholder-shown) .rec-compose__hint,
.rec-compose__form:not(:focus-within):has(.rec-compose__field:placeholder-shown) .rec-compose__actions {
    display: none;
}

.rec-note-list {
    display: grid;
    gap: 20px;
    margin: 24px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid var(--border-color);
    list-style: none;
}

.rec-note {
    display: flex;
    gap: 12px;
}

.rec-note__body {
    position: relative;
    flex: 1;
    min-width: 0;
}

.rec-note__delete {
    position: absolute;
    top: -6px;
    right: 0;
}

.rec-note__delete-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: var(--control-radius);
    background: transparent;
    color: var(--muted-text-color);
    cursor: pointer;
}

.rec-note__delete-button svg {
    width: 15px;
    height: 15px;
}

.rec-note__delete-button:hover,
.rec-note__delete-button:focus-visible {
    background: var(--danger-soft-color);
    color: var(--danger-text-color);
}

.rec-note__delete-button:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.rec-note__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    color: var(--muted-text-color);
    font-size: 11px;
}

.rec-note__meta strong {
    color: var(--text-color);
    font-size: 12px;
    font-weight: 600;
}

.rec-note__text {
    margin: 4px 0 0;
    color: var(--soft-text-color);
    font-size: 13px;
    line-height: 1.625;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* GEGADIGDEN: a sheet per party with its stage, the one next step in gold and the rest behind More. */
.rec-parties {
    display: grid;
    gap: 10px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.rec-party {
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--surface-color);
}

.rec-party--imreleased {
    border-color: color-mix(in srgb, var(--accent-moss) 25%, transparent);
}

.rec-party--ndasigned {
    border-color: color-mix(in srgb, var(--accent-sea) 25%, transparent);
}

.rec-party--rejected {
    background: color-mix(in srgb, var(--page-color) 40%, transparent);
    opacity: .7;
}

.rec-party__top {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.rec-party__who {
    min-width: 0;
}

.rec-party__name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    margin: 0;
    color: var(--text-color);
    font-size: 13px;
    font-weight: 600;
}

.rec-party__company {
    color: var(--soft-text-color);
    font-weight: 400;
}

.rec-party__kind {
    padding: 1px 6px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--muted-text-color);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.rec-party__meta {
    margin: 2px 0 0;
    color: var(--muted-text-color);
    font-size: 11px;
    line-height: 1.625;
}

.rec-party__response,
.rec-party__note {
    margin: 6px 0 0;
    color: var(--soft-text-color);
    font-size: 11px;
    line-height: 1.625;
}

.rec-party__response.is-on {
    color: var(--accent-moss);
}

.rec-party__objection {
    margin: 6px 0 0;
    padding: 6px 10px;
    border: 1px solid color-mix(in srgb, var(--danger-color) 30%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--danger-soft-color) 45%, transparent);
    color: var(--text-color);
    font-size: 11px;
    line-height: 1.625;
}

.rec-party__stage {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--surface-muted-color);
    color: var(--soft-text-color);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.rec-party--ndasigned .rec-party__stage {
    background: color-mix(in srgb, var(--accent-sea) 16%, transparent);
    color: var(--accent-sea);
}

.rec-party--imreleased .rec-party__stage {
    background: color-mix(in srgb, var(--accent-moss) 16%, transparent);
    color: var(--accent-moss);
}

.rec-party--rejected .rec-party__stage {
    color: var(--muted-text-color);
}

.rec-party__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.rec-party__actions form {
    margin: 0;
}

.rec-party__waiting {
    padding: 6px 12px;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    color: var(--muted-text-color);
    font-size: 12px;
}

.rec-party__vault {
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--page-color);
}

.rec-teaser {
    margin-top: 32px;
}

/* DIALOGS (prototype Modaal): in the middle of the view, one view high at most, the head with its line and cross,
   the body scrolls, a foot that stays. Escape and a click beside it close it. */
.rec-dialog {
    width: min(512px, calc(100vw - 48px));
    max-width: none;
    max-height: calc(100dvh - 48px);
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--panel-radius);
    background: var(--surface-muted-color);
    color: var(--text-color);
    box-shadow: var(--overlay-shadow);
}

.rec-dialog[open] {
    display: flex;
    flex-direction: column;
    animation: rec-dialog-in .24s cubic-bezier(.23, 1, .32, 1) both;
}

.rec-dialog::backdrop {
    background: var(--overlay-color);
    animation: rec-fade-in .16s ease-out both;
}

@keyframes rec-dialog-in {
    from { opacity: 0; transform: translateY(8px) scale(.97); }
}

.rec-dialog--narrow {
    width: min(448px, calc(100vw - 48px));
}

.rec-dialog--wide {
    width: min(576px, calc(100vw - 48px));
}

.rec-dialog__head {
    display: flex;
    flex-shrink: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 12px 14px 20px;
    border-bottom: 1px solid var(--border-color);
}

.rec-dialog__title {
    margin: 0;
    color: var(--text-color);
    font-size: 15px;
    font-weight: 600;
}

.rec-dialog__caption {
    margin: 2px 0 0;
    color: var(--muted-text-color);
    font-size: 12px;
}

.rec-dialog__close {
    display: inline-flex;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    margin-top: -4px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--muted-text-color);
    cursor: pointer;
}

.rec-dialog__close:hover,
.rec-dialog__close:focus-visible {
    background: var(--page-color);
    color: var(--text-color);
}

.rec-dialog__close svg {
    width: 16px;
    height: 16px;
}

.rec-dialog__body {
    display: grid;
    min-height: 0;
    gap: 20px;
    margin: 0;
    overflow-y: auto;
    padding: 20px;
}

.rec-dialog__text {
    margin: 0;
    color: var(--soft-text-color);
    font-size: 13px;
    line-height: 1.625;
}

.rec-dialog__foot {
    display: flex;
    flex-shrink: 0;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--border-color);
    background: var(--page-color);
}

.rec-dialog .rec-input {
    background: var(--page-color);
}

.rec-contents {
    margin: 0;
    padding: 0;
    border-block: 1px solid var(--border-color);
    list-style: none;
}

.rec-contents li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    color: var(--text-color);
    font-size: 13px;
}

.rec-contents li + li {
    border-top: 1px solid var(--border-color);
}

.rec-contents li span + span {
    color: var(--soft-text-color);
}

.rec-choice {
    margin: 0;
    padding: 0;
    border: 0;
}

.rec-choice__options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.rec-chip {
    position: relative;
}

.rec-chip input {
    position: absolute;
    opacity: 0;
}

.rec-chip span {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--soft-text-color);
    font-size: 12px;
    cursor: pointer;
    transition: border-color .15s ease-out, background-color .15s ease-out, color .15s ease-out;
}

.rec-chip span:hover {
    border-color: var(--khaki-color);
}

.rec-chip input:checked + span {
    border-color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
    color: var(--accent-text-color);
    font-weight: 600;
}

.rec-chip input:focus-visible + span {
    outline: 3px solid color-mix(in srgb, var(--accent-color) 28%, transparent);
    outline-offset: 2px;
}

/* On a phone a dialog comes up from below as a sheet and keeps the home bar free. */
@media (max-width: 39.99rem) {
    .rec-dialog,
    .rec-dialog--narrow,
    .rec-dialog--wide {
        width: 100vw;
        max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 24px);
        margin: auto 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        border-radius: 24px 24px 0 0;
    }

    .rec-dialog[open] {
        animation-name: rec-sheet-in;
    }

    .rec-close,
    .rec-dialog__close {
        width: 48px;
        height: 48px;
    }

    .rec-body {
        padding: 24px;
    }
}

@keyframes rec-sheet-in {
    from { opacity: 0; transform: translateY(40px); }
}

@media (prefers-reduced-motion: reduce) {
    .rec-sheet__panel,
    .rec-sheet__backdrop,
    .rec-menu__list,
    .rec-dialog[open],
    .rec-dialog::backdrop,
    .rec-body [data-tab-panel] {
        animation: none !important;
    }
}

/* KLAARZETTEN v30 (prototype Klaarzetpaneel.tsx, Documentkiezer.tsx): a wide window over the customer record. On
   the left what the customer gets, as cards in the colour of their kind; the three ways to a document; one term and
   one personal line. On the right how the customer sees it. One gold button in the foot says what it will do. */
.rec-sheet--behind {
    pointer-events: none;
}

.rec-sheet--behind .rec-sheet__panel {
    animation: none;
}

.rec-doc__release-form {
    margin: 0;
}

button.rec-doc__release {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 11px;
    cursor: pointer;
}

button.rec-doc__release:hover,
button.rec-doc__release:focus-visible {
    text-decoration: underline;
}

.prep {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(env(safe-area-inset-top, 0px) + 24px) 24px calc(env(safe-area-inset-bottom, 0px) + 24px);
}

.prep__backdrop {
    position: absolute;
    inset: 0;
    background: var(--overlay-color);
    animation: rec-fade-in .16s ease-out both;
    cursor: pointer;
}

.prep__panel {
    container-type: inline-size;
    position: relative;
    display: flex;
    width: 100%;
    max-width: 896px;
    max-height: 100%;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--panel-radius);
    background: var(--surface-muted-color);
    box-shadow: var(--overlay-shadow);
    animation: rec-dialog-in .24s cubic-bezier(.23, 1, .32, 1) both;
}

.prep__head {
    display: flex;
    flex-shrink: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 12px 14px 20px;
    border-bottom: 1px solid var(--border-color);
}

.prep__title {
    margin: 0;
    color: var(--text-color);
    font-size: 15px;
    font-weight: 600;
}

.prep__caption {
    margin: 2px 0 0;
    color: var(--muted-text-color);
    font-size: 12px;
}

.prep__close {
    display: inline-flex;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    margin-top: -4px;
    border-radius: 8px;
    color: var(--muted-text-color);
    transition: background-color .15s ease-out, color .15s ease-out;
}

.prep__close:hover,
.prep__close:focus-visible {
    background: var(--page-color);
    color: var(--text-color);
}

.prep__close svg {
    width: 16px;
    height: 16px;
}

.prep__body {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.prep__status {
    margin: 16px 20px 0;
}

.prep__grid {
    display: grid;
    gap: 24px;
    padding: 20px;
}

@container (min-width: 50rem) {
    .prep__grid {
        grid-template-columns: minmax(0, 1fr) 320px;
    }
}

.prep__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 24px;
    min-width: 0;
}

.prep__main > .validation-summary:empty,
.validation-summary.validation-summary-valid {
    display: none;
}


/* Three steps, each with a number: what, when, and a message with it. */
.prep__step {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    min-width: 0;
}

.prep__step-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--text-color);
    font-size: 15px;
    font-weight: 600;
}

.prep__step-number {
    display: inline-grid;
    flex-shrink: 0;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent-color);
    color: var(--accent-contrast-color);
    font-size: 12px;
    font-weight: 600;
}

.prep__step-help {
    margin: -6px 0 0 34px;
    color: var(--soft-text-color);
    font-size: 12px;
}

.prep__add {
    margin-top: 0;
}

.prep__add > summary svg {
    width: 14px;
    height: 14px;
    margin-right: 6px;
    vertical-align: -2px;
}

.prep__label {
    display: block;
    margin: 0;
    color: var(--muted-text-color);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}


.prep-items {
    display: grid;
    gap: 8px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.prep-item {
    --kind: var(--accent-sea);
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    overflow: hidden;
    padding: 12px 14px 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--surface-color);
    cursor: pointer;
    transition: border-color .15s ease-out, background-color .15s ease-out;
}

.prep-item::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--kind);
}

.prep-item--form { --kind: var(--accent-ochre); }
.prep-item--signing { --kind: var(--accent-plum); }
.prep-item--read { --kind: var(--accent-moss); }
.prep-item--upload { --kind: var(--accent-sea); }

.prep-item:hover {
    border-color: var(--khaki-color);
}

.prep-item:has(.prep-item__box:checked) {
    border-color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 8%, var(--surface-color));
}

.prep-item:has(.prep-item__box:focus-visible) {
    outline: 3px solid color-mix(in srgb, var(--accent-color) 28%, transparent);
    outline-offset: 2px;
}


.prep-item__box {
    position: absolute;
    opacity: 0;
}

.prep-item__tick {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--accent-contrast-color);
}

.prep-item__tick svg {
    width: 12px;
    height: 12px;
    stroke-width: 3;
    opacity: 0;
}

.prep-item:has(.prep-item__box:checked) .prep-item__tick {
    border-color: var(--accent-color);
    background: var(--accent-color);
}

.prep-item:has(.prep-item__box:checked) .prep-item__tick svg {
    opacity: 1;
}

.prep-item__body {
    min-width: 0;
    flex: 1;
}

.prep-item__line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.prep-kind {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--kind) 14%, transparent);
    color: var(--kind);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.prep-kind svg {
    width: 10px;
    height: 10px;
}

.prep-item__title {
    min-width: 0;
    color: var(--text-color);
    font-size: 12px;
    font-weight: 500;
}





.prep-item__sign {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 2px 16px;
    color: var(--soft-text-color);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
}

.prep-item__sign svg {
    width: 12px;
    height: 12px;
}

.prep-item__sign:hover,
.prep-item__sign:focus-visible {
    color: var(--accent-text-color);
}

/* The three ways to a document. */
.prep-ways {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 4px;
}

@container (min-width: 36rem) {
    .prep-ways {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.prep-way {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--surface-color);
    color: var(--muted-text-color);
    cursor: pointer;
    transition: border-color .15s ease-out, background-color .15s ease-out;
}

.prep-way input {
    position: absolute;
    opacity: 0;
}

.prep-way svg {
    width: 16px;
    height: 16px;
}

.prep-way strong {
    color: var(--text-color);
    font-size: 13px;
    font-weight: 600;
}

.prep-way:hover {
    border-color: var(--khaki-color);
}

.prep-way.is-on {
    border-color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 8%, var(--surface-color));
    color: var(--accent-text-color);
}

.prep-way.is-on strong {
    color: var(--accent-text-color);
}

.prep-way:has(input:focus-visible) {
    outline: 3px solid color-mix(in srgb, var(--accent-color) 28%, transparent);
    outline-offset: 2px;
}

.prep-way-panel {
    margin-top: 16px;
}

.prep-template,
.prep-upload {
    display: grid;
    gap: 12px;
    margin: 0;
}

.prep-rows {
    margin: 0;
    padding: 0;
    border-block: 1px solid var(--border-color);
    list-style: none;
}

.prep-rows li + li {
    border-top: 1px solid var(--border-color);
}

.prep-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 4px;
    cursor: pointer;
    transition: background-color .15s ease-out;
}

.prep-row input {
    position: absolute;
    opacity: 0;
}

.prep-row:hover {
    background: color-mix(in srgb, var(--surface-color) 40%, transparent);
}

.prep-row:has(input:focus-visible) {
    outline: 3px solid color-mix(in srgb, var(--accent-color) 28%, transparent);
}

.prep-row__main {
    display: grid;
    min-width: 0;
    flex: 1;
}

.prep-row__title {
    overflow: hidden;
    color: var(--text-color);
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.prep-row__meta {
    margin-top: 2px;
    color: var(--muted-text-color);
    font-size: 11px;
}

.prep-row__tick {
    color: var(--accent-text-color);
    opacity: 0;
}

.prep-row__tick svg {
    width: 16px;
    height: 16px;
}

.prep-row.is-on .prep-row__tick {
    opacity: 1;
}

.prep-panel-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.prep-panel-actions .rec-text {
    margin: 0;
}

.prep-drop {
    position: relative;
    display: grid;
    justify-items: center;
    padding: 24px;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    color: var(--muted-text-color);
    text-align: center;
    transition: border-color .15s ease-out, background-color .15s ease-out;
}

.prep-drop:hover,
.prep-drop:focus-within,
.prep-drop.has-file {
    border-color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 5%, transparent);
}

.prep-drop__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.prep-drop > svg {
    width: 20px;
    height: 20px;
}

.prep-drop__title {
    margin-top: 10px;
    color: var(--text-color);
    font-size: 13px;
}

.prep-drop__text {
    max-width: 30rem;
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.625;
}

.prep-drop__button {
    margin-top: 12px;
    pointer-events: none;
}

.prep-drop__limit {
    margin-top: 12px;
    font-size: 10px;
}

.prep-upload__fields,
.prep-upload__more {
    display: grid;
    gap: 12px;
}

/* The term: four days as buttons and a calendar for any other day. They slide on a narrow window. */
.prep-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.prep-chip {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--surface-color);
    color: var(--soft-text-color);
    font: inherit;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s ease-out, background-color .15s ease-out, color .15s ease-out, transform .16s ease-out;
}

.prep-chip svg {
    width: 14px;
    height: 14px;
}

.prep-chip:hover {
    border-color: var(--khaki-color);
}

.prep-chip:active {
    transform: scale(.97);
}

.prep-chip[aria-pressed="true"] {
    border-color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 10%, var(--surface-color));
    color: var(--accent-text-color);
    font-weight: 600;
}

.prep-other-day {
    max-width: 16rem;
    margin-top: 12px;
}

.prep__message {
    margin-top: 8px;
    padding: 10px 12px;
    line-height: 1.625;
}


/* How the customer sees it: the customer's own light screen, with the colour of each kind as a stripe. */
.prep__side {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 16px;
    min-width: 0;
}

.prep__side > * {
    min-width: 0;
}

.prep-preview {
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.prep-preview__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
    color: var(--accent-text-color);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.prep-preview__head svg {
    width: 14px;
    height: 14px;
}

.prep-preview__screen {
    padding: 16px 14px;
    background: var(--page-color);
}

.prep-preview__label {
    margin: 0;
    color: var(--muted-text-color);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.prep-preview__empty {
    margin: 12px 0 0;
    padding: 14px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--surface-color);
    color: var(--soft-text-color);
    font-size: 12px;
    line-height: 1.625;
}

.prep-preview__list {
    display: grid;
    gap: 8px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.prep-preview__item {
    --kind: var(--accent-sea);
    position: relative;
    display: grid;
    overflow: hidden;
    padding: 10px 12px 10px 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--surface-color);
    animation: rec-tab-in .18s ease-out both;
}

.prep-preview__item::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--kind);
}

.prep-preview__item--form { --kind: var(--accent-ochre); }
.prep-preview__item--signing { --kind: var(--accent-plum); }
.prep-preview__item--read { --kind: var(--accent-moss); }

.prep-preview__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.prep-preview__title {
    color: var(--text-color);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.375;
}

.prep-preview__due {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-color) 20%, transparent);
    color: var(--khaki-text-color);
    font-size: 10px;
    font-weight: 600;
}

.prep-preview__why {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin-top: 4px;
    color: var(--soft-text-color);
    font-size: 11px;
    line-height: 1.625;
}

.prep-preview__by {
    margin-top: 6px;
    color: var(--muted-text-color);
    font-size: 10px;
}

.prep-preview__message {
    display: flex;
    gap: 10px;
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--surface-color);
    color: var(--soft-text-color);
    font-size: 11px;
    line-height: 1.625;
}

.prep-preview__message .rec-avatar {
    width: 24px;
    height: 24px;
    margin-top: 0;
    font-size: 10px;
}

.prep-open__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.prep-open__list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    color: var(--soft-text-color);
    font-size: 12px;
}

.prep-open__list li span:first-child {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.prep-open__list li span + span {
    flex-shrink: 0;
    color: var(--muted-text-color);
    font-size: 11px;
}

.prep-open__empty {
    margin: 10px 0 0;
    color: var(--muted-text-color);
    font-size: 12px;
}

.prep__foot {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-top: 1px solid var(--border-color);
    background: var(--page-color);
}

.prep__summary {
    margin: 0;
    color: var(--soft-text-color);
    font-size: 12px;
}

.prep__reason {
    order: 0;
    flex-basis: auto;
}

@media (max-width: 39.99rem) {
    .prep {
        align-items: flex-end;
        padding: calc(env(safe-area-inset-top, 0px) + 24px) 0 0;
    }

    .prep__panel {
        border-radius: 24px 24px 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        animation-name: rec-sheet-in;
    }

    .prep__close {
        width: 48px;
        height: 48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .prep__panel,
    .prep__backdrop,
    .prep-preview__item {
        animation: none !important;
    }
}

/* E-MAIL v30 (prototype Mailvenster): the same window over the record, narrower; subject and text to adjust. */
.prep--narrow .prep__panel {
    max-width: 576px;
}

.mail__body {
    padding: 16px 20px 20px;
}

.mail__intro {
    margin: 0 0 16px;
}

.mail__subject {
    font-size: 13px;
    font-weight: 600;
}

.mail__text {
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.625;
    resize: vertical;
}

.mail__hint {
    font-size: 11px;
    color: var(--muted-text-color);
}

/* VRAGENLIJST: progress per part as a thin bar, the release as a state with one quiet act beside it. */
.questionnaire-start {
    justify-items: start;
}

.questionnaire-part__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px 20px;
}

.questionnaire-part__title {
    display: grid;
    gap: 4px;
    min-width: 0;
    flex: 1 1 18rem;
}

.questionnaire-part__title .record-row__meta {
    margin: 0;
}

.questionnaire-part__progress {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.questionnaire-part__progress .record-row__meta {
    margin: 0;
}

.questionnaire-answers {
    display: grid;
    margin: 0;
    border-top: 1px solid var(--border-color);
}

.questionnaire-answers__item {
    display: grid;
    gap: 3px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

.questionnaire-answers__item:last-child {
    border-bottom: 0;
}

.questionnaire-answers dt {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    color: var(--muted-text-color);
    font-size: 11px;
    font-weight: 600;
}

.questionnaire-answers dd {
    margin: 0;
    color: var(--text-color);
    font-size: 13px;
    line-height: 1.55;
    white-space: pre-line;
}

.questionnaire-answers dd.record-row__meta {
    color: var(--muted-text-color);
    font-size: 11px;
}

.questionnaire-answers__empty {
    color: var(--muted-text-color) !important;
    font-style: italic;
}

/* E-MAIL (prototype Mailvenster): a sheet in the middle, subject and text to adjust, the one button in the foot. */
.record-sheet {
    display: flex;
    justify-content: center;
}

.record-sheet__panel {
    display: grid;
    width: min(100%, 40rem);
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--panel-radius);
    background: var(--surface-color);
    box-shadow: var(--raised-shadow);
}

.record-sheet__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--border-color);
}

.record-sheet__title {
    margin: 0;
    color: var(--text-color);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.021em;
}

.record-sheet__caption {
    margin: 4px 0 0;
    color: var(--muted-text-color);
    font-size: 12px;
}

.record-sheet__close {
    display: inline-flex;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    margin: -8px -8px 0 0;
    border-radius: 8px;
    color: var(--muted-text-color);
    transition: background-color .15s ease-out, color .15s ease-out;
}

@media (pointer: coarse) {
    .record-sheet__close {
        width: 48px;
        height: 48px;
    }
}

.record-sheet__close:hover,
.record-sheet__close:focus-visible {
    background: var(--surface-muted-color);
    color: var(--text-color);
}

.record-sheet__body {
    container-type: inline-size;
    padding: 16px 20px;
}

.record-sheet__text {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    background: var(--page-color);
    color: var(--text-color);
    font: inherit;
    font-size: 13px;
    line-height: 1.6;
    resize: vertical;
}

.record-sheet__text:focus {
    border-color: var(--accent-color);
    outline: none;
}

.record-sheet__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-top: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--page-color) 45%, var(--surface-color));
}

.record-sheet__foot .noord-digital-button svg {
    width: 14px;
    height: 14px;
}

/* OPDRACHT v30 (prototype Opdrachtgeneratie.tsx): a screen of its own over the portal. The head says how many
   fields are open and carries the one gold button; on the left the fields to fill as sheets, gold while empty; on
   the right the template, known values underlined in gold, open fields framed in gold. */
.letter {
    position: fixed;
    inset: 0;
    z-index: 45;
    display: flex;
    flex-direction: column;
    background: var(--page-color);
    animation: rec-fade-in .2s ease-out both;
}

.letter__head {
    flex-shrink: 0;
    padding: calc(env(safe-area-inset-top, 0px) + 16px) 24px 16px;
    border-bottom: 1px solid var(--border-color);
}

.letter__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted-text-color);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: color .15s ease-out;
}

.letter__back svg {
    width: 14px;
    height: 14px;
}

.letter__back:hover,
.letter__back:focus-visible {
    color: var(--accent-text-color);
}

.letter__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-top: 12px;
}

.letter__title {
    margin: 0;
    color: var(--text-color);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
}

.letter__caption {
    margin: 4px 0 0;
    color: var(--soft-text-color);
    font-size: 12px;
}

.letter__side {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.letter__count {
    margin: 0;
    color: var(--accent-text-color);
    font-size: 13px;
    font-weight: 600;
}

.letter__count.is-ready {
    color: var(--success-text-color);
}

.letter__reason-wrap {
    position: relative;
    display: inline-flex;
}

.letter__reason {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 5;
    width: max-content;
    max-width: 320px;
}

.letter__scroll {
    container-type: inline-size;
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    padding: 24px 24px calc(env(safe-area-inset-bottom, 0px) + 24px);
}

.letter__status {
    margin: 0 0 16px;
}

.letter-fill {
    display: grid;
    gap: 40px;
    align-items: start;
}

@container (min-width: 60rem) {
    .letter-fill {
        grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    }
}

.letter-fill__left {
    display: grid;
    gap: 32px;
    min-width: 0;
}

.letter-fields {
    display: grid;
    gap: 16px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.letter-field {
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--surface-color);
    transition: border-color .15s ease-out, background-color .15s ease-out;
}

.letter-field.is-empty {
    border-color: color-mix(in srgb, var(--accent-color) 40%, transparent);
    background: color-mix(in srgb, var(--accent-color) 8%, var(--surface-color));
}

.letter-field__form {
    margin: 0;
}

.letter-field__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.letter-field__label {
    color: var(--text-color);
    font-size: 12px;
    font-weight: 600;
}

.letter-field__source {
    flex-shrink: 0;
    color: var(--muted-text-color);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.letter-field__help {
    margin: 4px 0 0;
    color: var(--muted-text-color);
    font-size: 11px;
    line-height: 1.625;
}

.letter-field__row {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.letter-field__input {
    min-width: 0;
    flex: 1;
    padding: 8px 12px;
}

.letter-field__save {
    flex-shrink: 0;
}

.letter-field__input:placeholder-shown + .letter-field__save {
    display: none;
}

.letter-field__requested,
.letter-field__ask {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0;
    font-size: 11px;
}

.letter-field__requested {
    color: var(--accent-text-color);
}

.letter-field__request {
    margin: 0;
}

.letter-field__ask {
    padding: 0;
    border: 0;
    background: none;
    color: var(--soft-text-color);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: color .15s ease-out;
}

.letter-field__ask:hover,
.letter-field__ask:focus-visible {
    color: var(--accent-text-color);
}

.letter-field__requested svg,
.letter-field__ask svg {
    width: 12px;
    height: 12px;
}

.letter-known {
    margin: 12px 0 0;
    border-top: 1px solid var(--border-color);
}

.letter-known > div {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

.letter-known dt {
    width: 168px;
    flex-shrink: 0;
    color: var(--muted-text-color);
    font-size: 12px;
}

.letter-known dd {
    min-width: 0;
    flex: 1;
    margin: 0;
    color: var(--text-color);
    font-size: 12px;
}

.letter-known dd span {
    padding-bottom: 2px;
    border-bottom: 1px solid color-mix(in srgb, var(--accent-color) 50%, transparent);
}

.letter-template {
    display: grid;
    gap: 20px;
    margin-top: 12px;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--surface-color);
}

.letter-template__heading {
    margin: 0;
    color: var(--text-color);
    font-size: 12px;
    font-weight: 600;
}

.letter-template__text {
    margin: 4px 0 0;
    color: var(--soft-text-color);
    font-size: 12px;
    line-height: 1.625;
}

.letter-template__known {
    border-bottom: 1px solid color-mix(in srgb, var(--accent-color) 60%, transparent);
    color: var(--text-color);
}

.letter-template__open {
    padding: 2px 6px;
    border: 1px solid color-mix(in srgb, var(--accent-color) 60%, transparent);
    border-radius: 4px;
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
    color: var(--accent-text-color);
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

/* The letter as the customer sees it, then send; after sending, one sentence where it stands. */
.letter-preview {
    max-width: 48rem;
    margin: 0 auto;
    animation: rec-tab-in .24s cubic-bezier(.23, 1, .32, 1) both;
}

.letter-preview__note {
    margin: 0;
    padding: 16px 20px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--surface-color);
    color: var(--soft-text-color);
    font-size: 13px;
    line-height: 1.625;
}

.letter-sheet {
    margin-top: 20px;
    padding: 40px;
    background: #ffffff;
    box-shadow: var(--panel-shadow);
}

.letter-sheet__brand {
    margin: 0;
    color: var(--khaki-text-color);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.letter-sheet__title {
    margin: 8px 0 0;
    color: var(--text-color);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.25;
}

.letter-sheet__place {
    margin: 4px 0 0;
    color: var(--muted-text-color);
    font-size: 12px;
}

.letter-sheet__articles {
    display: grid;
    gap: 20px;
    margin-top: 28px;
}

.letter-sheet__heading {
    margin: 0;
    color: var(--text-color);
    font-size: 12px;
    font-weight: 600;
}

.letter-sheet__text {
    margin: 4px 0 0;
    color: var(--soft-text-color);
    font-size: 12px;
    line-height: 1.625;
}

.letter-sheet__signatures {
    display: grid;
    gap: 24px;
    margin-top: 36px;
}

@container (min-width: 36rem) {
    .letter-sheet__signatures {
        grid-template-columns: 1fr 1fr;
    }
}

.letter-sheet__signature {
    display: grid;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--muted-text-color);
    font-size: 10px;
}

.letter-sheet__signature span:first-child {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.letter-sheet__signature--customer {
    border: 2px solid var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 8%, transparent);
}

.letter-sheet__signature--customer span:first-child {
    color: var(--khaki-text-color);
}

.letter-sheet__line {
    margin: 28px 0 8px;
    border-bottom: 1px dashed var(--sand-color);
}

.letter-preview__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
}

.letter-preview__send {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin: 0;
}

.letter-preview__send .rec-text {
    margin: 0;
}

.letter-preview__button {
    padding: 10px 16px;
    font-size: 13px;
}

.letter-done {
    display: grid;
    justify-items: center;
    max-width: 36rem;
    margin: 0 auto;
    padding: 40px 0;
    text-align: center;
    animation: rec-tab-in .24s cubic-bezier(.23, 1, .32, 1) both;
}

.letter-done__mark {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent-color);
    color: var(--accent-contrast-color);
}

.letter-done__mark svg {
    width: 24px;
    height: 24px;
    stroke-width: 2.5;
}

.letter-done__title {
    margin: 20px 0 0;
    color: var(--text-color);
    font-size: 20px;
    font-weight: 600;
}

.letter-done__text {
    margin: 12px 0 0;
    color: var(--soft-text-color);
    font-size: 13px;
    line-height: 1.625;
}

.letter-done__hint {
    margin: 12px 0 24px;
    color: var(--muted-text-color);
    font-size: 11px;
    line-height: 1.625;
}

@media (prefers-reduced-motion: reduce) {
    .letter,
    .letter-preview,
    .letter-done {
        animation: none !important;
    }
}

/* ONDERTEKENING (prototype Handtekeningplaatser.tsx): the page to click on, the signers as a choice, the placed
   fields as a list, and one button in the foot that says why it cannot go yet. */
.sign-sheet {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--surface-color);
    box-shadow: var(--raised-shadow);
}

.sign-sheet__head {
    display: grid;
    gap: 4px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color);
}

.sign-sheet__head .record-row__meta {
    margin: 0;
}

.sign-sheet__title {
    overflow: hidden;
    margin: 0;
    color: var(--text-color);
    font-size: 16px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sign-sheet__body {
    display: grid;
    gap: 24px;
    padding: 24px;
}

@media (min-width: 64rem) {
    .sign-sheet__body {
        grid-template-columns: minmax(0, 1fr) 16rem;
    }
}

.sign-sheet__body--sent {
    justify-items: start;
    gap: 10px;
}

.sign-sheet__text {
    margin: 0;
    color: var(--soft-text-color);
    font-size: 13px;
    line-height: 1.6;
}

.sign-document {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.sign-document__page {
    position: relative;
    display: block;
    width: 100%;
    height: 420px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--page-color);
    cursor: crosshair;
}

.sign-document__page:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent-color) 28%, transparent);
    outline-offset: 2px;
}

.sign-document__lines {
    position: absolute;
    top: 32px;
    right: 24px;
    left: 24px;
    display: grid;
    gap: 10px;
    pointer-events: none;
}

.sign-document__lines span {
    display: block;
    height: 8px;
    border-radius: 2px;
    background: var(--surface-muted-color);
}

.sign-document__field {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border: 1px solid var(--accent-color);
    border-radius: 4px;
    background: color-mix(in srgb, var(--accent-color) 20%, var(--surface-color));
    color: var(--accent-text-color);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: noord-digital-arrive .25s ease-out;
}

.sign-document__field svg {
    width: 12px;
    height: 12px;
}

.sign-document__field.is-pending,
.sign-side__placed li.is-pending {
    opacity: .6;
}

.sign-document__pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.sign-document__count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    color: var(--muted-text-color);
    font-size: 11px;
}

.sign-document__count .noord-digital-input {
    width: 4.5rem;
    min-height: 2rem;
    padding: .25rem .5rem;
    font-size: 12px;
}

.sign-chip {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--surface-color);
    color: var(--soft-text-color);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease-out, background-color .15s ease-out, color .15s ease-out, transform .12s ease-out;
}

.sign-chip:hover {
    border-color: var(--khaki-color);
}

.sign-chip:active {
    transform: scale(.97);
}

.sign-chip[aria-pressed="true"] {
    border-color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 10%, var(--surface-color));
    color: var(--accent-text-color);
}

.sign-chip--page {
    width: 32px;
    height: 32px;
    padding: 0;
    font-variant-numeric: tabular-nums;
    font-weight: 400;
}

.sign-side {
    display: grid;
    align-content: start;
    gap: 10px;
}

.sign-side .record-label:not(:first-child) {
    margin-top: 14px;
}

.sign-side__signers {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sign-side__placed {
    display: grid;
    margin: 0;
    padding: 0;
    border-block: 1px solid var(--border-color);
    list-style: none;
}

.sign-side__placed li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
    font-size: 12px;
}

.sign-side__placed li:last-child {
    border-bottom: 0;
}

.sign-side__placed .record-number {
    margin-left: 6px;
    color: var(--muted-text-color);
}

.sign-sheet__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
}

.sign-sheet__foot > .record-hint {
    max-width: 28rem;
}

.sign-sheet__send {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

@media (max-width: 40rem) {
    .sign-sheet__head,
    .sign-sheet__body,
    .sign-sheet__foot {
        padding-inline: 16px;
    }

    .sign-document__page {
        height: 320px;
    }
}

/* ONDERTEKENING v30: the sheet is a window in the middle of the view, one view high at most, over the dark layer. */
.sign-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
}

.sign-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: var(--overlay-color);
    animation: rec-fade-in .16s ease-out both;
    cursor: pointer;
}

.sign-overlay .sign-sheet {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 896px;
    max-height: 100%;
    flex-direction: column;
    box-shadow: var(--overlay-shadow);
    animation: rec-dialog-in .24s cubic-bezier(.23, 1, .32, 1) both;
}

.sign-overlay .sign-sheet__head {
    display: flex;
    flex-shrink: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.sign-overlay .sign-sheet__head > div {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.sign-sheet__close {
    flex-shrink: 0;
    padding: 4px 10px;
    font-weight: 400;
}

.sign-sheet__status {
    margin: 16px 24px 0;
}

.sign-overlay .sign-sheet__body {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
}

.sign-overlay .sign-sheet__foot {
    flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
    .sign-overlay .sign-sheet,
    .sign-overlay__backdrop {
        animation: none !important;
    }
}

/* AFSPRAAK (prototype Afspraakvensters.tsx): the kind as a coloured edge and pill, the facts as a line of icons,
   editing behind one line; the kinds as a row of choices in their own colour. */
.appt-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
}

.appt-card {
    --kind: var(--accent-slate);
    display: grid;
    gap: 10px;
    padding: 20px 22px 20px 20px;
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--kind);
    border-radius: var(--panel-radius);
    background: var(--surface-color);
    box-shadow: var(--panel-shadow);
}

.appt-card--introduction,
.appt-kind--introduction {
    --kind: var(--accent-sea);
}

.appt-card--valuation,
.appt-kind--valuation {
    --kind: var(--accent-ochre);
}

.appt-card--negotiation,
.appt-kind--negotiation {
    --kind: var(--accent-clay);
}

.appt-card--duediligence,
.appt-kind--duediligence {
    --kind: var(--accent-slate);
}

.appt-card--notary,
.appt-kind--notary {
    --kind: var(--accent-moss);
}

.appt-card--phone,
.appt-kind--phone {
    --kind: var(--accent-plum);
}

.appt-card--internal,
.appt-kind--internal {
    --kind: var(--muted-text-color);
}

.appt-card__line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.appt-card__kind {
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--kind) 16%, transparent);
    color: var(--kind);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.appt-card__title {
    margin: 0;
    color: var(--text-color);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.021em;
}

.appt-card > .record-row__meta {
    margin: 0;
}

.appt-card__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.appt-card__facts li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted-text-color);
    font-size: 12px;
}

.appt-card__facts svg,
.record-label svg {
    width: 12px;
    height: 12px;
}

.record-label svg {
    margin-right: 6px;
    vertical-align: -1px;
}

.appt-card__know {
    display: grid;
    gap: 6px;
    margin-top: 6px;
    padding: 12px 14px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--page-color) 60%, var(--surface-color));
}

.appt-card__list {
    display: grid;
    gap: 4px;
    margin: 0 0 4px;
    padding-left: 18px;
    color: var(--soft-text-color);
    font-size: 12px;
    line-height: 1.55;
}

.appt-card__form {
    container-type: inline-size;
}

.appt-series__state {
    margin: 0;
    color: var(--text-color);
    font-size: 13px;
}

.record-card form {
    margin: 0;
}

.record-card .noord-digital-button svg {
    width: 14px;
    height: 14px;
}

.appt-kinds {
    display: grid;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.appt-kinds__list {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}

@container (min-width: 36rem) {
    .appt-kinds__list {
        flex-wrap: wrap;
        overflow: visible;
    }
}

.appt-kind {
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
}

.appt-kind input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.appt-kind span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--soft-text-color);
    font-size: 12px;
    font-weight: 600;
    transition: border-color .15s ease-out, background-color .15s ease-out, color .15s ease-out, transform .12s ease-out;
}

.appt-kind span::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--kind);
}

.appt-kind:hover span {
    border-color: var(--khaki-color);
}

.appt-kind:active span {
    transform: scale(.97);
}

.appt-kind input:checked + span {
    border-color: var(--kind);
    background: color-mix(in srgb, var(--kind) 12%, var(--surface-color));
    color: var(--kind);
}

.appt-kind input:focus-visible + span {
    outline: 3px solid color-mix(in srgb, var(--accent-color) 28%, transparent);
    outline-offset: 2px;
}

.appt-when {
    display: grid;
    gap: 10px;
}

.appt-when__row {
    display: grid;
    gap: 12px;
}

@container (min-width: 30rem) {
    .appt-when__row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.record-sheet__foot > .noord-digital-button--quiet:first-child {
    margin-right: auto;
}
/* === /region: record-and-prepare === */

/* === region: settings (Instellingen, Rollen, Sjablonen, Logboek, Afwijkend, Systeem) === */
/* The settings screens of the prototype (Instellingen.tsx and its tabs): a row of tabs that scrolls instead of
   wrapping, then white sheets of 12px radius with a 15px title, a short explanation in soft ink and lists divided by
   hairlines. One main task per tab; rare acts wait behind "Meer opties". */
.settings-tabs {
    margin-bottom: 24px;
    scrollbar-width: none;
}

.settings-tabs::-webkit-scrollbar {
    display: none;
}

.settings-tabs .record-tabs__tab {
    flex-shrink: 0;
    margin-bottom: -1px;
    padding: 8px 12px;
    font-size: 13px;
    transition: color .15s ease-out, border-color .15s ease-out;
}

.settings-tabs .record-tabs__tab:hover {
    color: var(--soft-text-color);
}

.settings-stack {
    display: grid;
    gap: 20px;
}

.settings-lead {
    max-width: 42rem;
    margin: 0 0 20px;
    color: var(--soft-text-color);
    font-size: 13px;
    line-height: 1.6;
}

.settings-card {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--surface-color);
    container-type: inline-size;
}

.settings-card--alert {
    border-color: color-mix(in srgb, var(--danger-color) 35%, transparent);
    background: color-mix(in srgb, var(--danger-soft-color) 50%, var(--surface-color));
}

.settings-card--table {
    padding: 0;
    overflow: hidden;
}

.settings-card__head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.settings-card__head > div {
    min-width: 0;
    flex: 1;
}

.settings-card__icon {
    display: inline-flex;
    margin-top: 2px;
    color: var(--muted-text-color);
}

.settings-card__icon--danger {
    color: var(--danger-text-color);
}

.settings-card__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--text-color);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.01em;
}

.settings-card__intro {
    max-width: 42rem;
    margin: 6px 0 0;
    color: var(--soft-text-color);
    font-size: 13px;
    line-height: 1.6;
}

.settings-card__body {
    margin-top: 16px;
}

.settings-label {
    display: block;
    margin: 0;
    color: var(--muted-text-color);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.settings-note {
    max-width: 42rem;
    margin: 0;
    color: var(--muted-text-color);
    font-size: 11px;
    line-height: 1.6;
}

.settings-reason {
    margin: 0;
    color: var(--soft-text-color);
    font-size: 12px;
}

.settings-callout {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 16px 0 0;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    background: var(--page-color);
    color: var(--soft-text-color);
    font-size: 12px;
    line-height: 1.6;
}

.settings-callout .icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--muted-text-color);
}

.settings > .settings-callout:first-of-type {
    margin-top: 0;
}

.settings-callout--gold {
    margin-bottom: 20px;
    border-color: color-mix(in srgb, var(--accent-color) 30%, transparent);
    background: color-mix(in srgb, var(--accent-color) 6%, var(--surface-color));
    color: var(--text-color);
}

.settings-callout--gold .icon {
    color: var(--accent-text-color);
}

.settings-actions {
    align-items: center;
}

/* Two columns once the sheet has room, one on a telephone. */
.settings-form-grid {
    display: grid;
    gap: 16px;
}

@container (min-width: 34rem) {
    .settings-form-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Lists divided by hairlines. The empty line only shows while it is the only line, so an item added at once or
   folded away never leaves a wrong empty state behind. */
.settings-list {
    display: grid;
    margin: 16px 0 0;
    padding: 0;
    border-top: 1px solid var(--border-color);
    list-style: none;
}

.settings-list > li {
    border-bottom: 1px solid var(--border-color);
}

.settings-list--flush {
    margin-top: 0;
}

.settings-empty {
    padding: 14px 0;
    color: var(--muted-text-color);
    font-size: 12px;
}

.settings-list > .settings-empty:not(:only-child) {
    display: none;
}

.settings-empty--block {
    margin: 16px 0 0;
    padding: 0;
}

.settings-card--table > .settings-empty--block {
    margin: 0;
    padding: 20px;
}

.settings-empty__action {
    margin-left: 6px;
    color: var(--accent-text-color);
    font-weight: 600;
    text-underline-offset: 2px;
}

.settings-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding: 12px 0;
}

.settings-row--top {
    align-items: flex-start;
}

.settings-row--left {
    opacity: .6;
}

.settings-row__main {
    min-width: 0;
    flex: 1 1 12rem;
}

.settings-row__title {
    margin: 0;
    color: var(--text-color);
    font-size: 13px;
    font-weight: 500;
}

.settings-row__meta {
    display: block;
    margin: 2px 0 0;
    color: var(--muted-text-color);
    font-size: 11px;
    line-height: 1.5;
}

.settings-row__aside {
    flex-shrink: 0;
    color: var(--muted-text-color);
    font-size: 11px;
    text-align: right;
}

.settings-row__when {
    min-width: 6.5rem;
    font-variant-numeric: tabular-nums;
}

.settings-row__end {
    margin-left: auto;
}

.settings-avatar,
.settings-iconbox {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    color: var(--soft-text-color);
    background: var(--surface-muted-color);
}

.settings-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 600;
}

.settings-iconbox {
    width: 28px;
    height: 28px;
    border-radius: 8px;
}

.settings-iconbox .icon {
    width: 14px;
    height: 14px;
}

.settings-badge {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--surface-muted-color);
    color: var(--muted-text-color);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    white-space: nowrap;
}

.settings-badge .icon {
    width: 12px;
    height: 12px;
}

.settings-badge--ok {
    background: color-mix(in srgb, var(--accent-moss) 16%, transparent);
    color: var(--accent-moss);
}

.settings-badge--danger {
    background: var(--danger-soft-color);
    color: var(--danger-text-color);
    font-weight: 600;
}

.settings-badge--gold {
    margin-left: 6px;
    padding: 1px 8px;
    background: color-mix(in srgb, var(--accent-color) 15%, transparent);
    color: var(--accent-text-color);
    font-size: 10px;
    font-weight: 600;
}

.settings-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 0 6px;
    border: 1px solid color-mix(in srgb, var(--khaki-color) 40%, transparent);
    border-radius: 4px;
    color: var(--khaki-text-color);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    vertical-align: 1px;
}

.settings-tag--muted {
    border-color: transparent;
    color: var(--muted-text-color);
}

.settings-select {
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    background: var(--page-color);
    color: var(--text-color);
    font: inherit;
    font-size: 12px;
}

.settings-select:focus {
    border-color: var(--accent-color);
    outline: 3px solid color-mix(in srgb, var(--accent-color) 20%, transparent);
}

.settings-role-form {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
}

/* A quiet text action that turns red on hover: withdrawing access, ending a session, removing. */
.settings-danger-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--muted-text-color);
    font-size: 11px;
    text-decoration: none;
    transition: color .15s ease-out;
}

.settings-danger-link:hover,
.settings-danger-link:focus-visible {
    color: var(--danger-text-color);
}

.settings-danger-link .icon {
    width: 12px;
    height: 12px;
}

.settings-remove:hover {
    color: var(--danger-text-color);
}

.settings-remove .icon {
    width: 14px;
    height: 14px;
}

/* An inline form: a field and its one button on a line, wrapping on a telephone. */
.settings-inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 12px;
    margin-top: 16px;
}

.settings-list .settings-inline-form {
    margin-top: 0;
}

.settings-inline-form__field {
    display: grid;
    min-width: 10rem;
    flex: 1 1 12rem;
    gap: 6px;
}

.settings-inline-form__field--wide {
    flex-grow: 2;
}

.settings-inline-form .noord-digital-input {
    min-height: 36px;
    background: var(--page-color);
    font-size: 12px;
}

/* An add form folds open under its own line, like "Medewerker toevoegen" in the prototype. */
.settings-add {
    margin-top: 16px;
}

.settings-add > .noord-digital-disclosure__summary {
    color: var(--text-color);
}

.settings-add > .noord-digital-disclosure__summary .icon,
.settings-more .icon {
    width: 14px;
    height: 14px;
}

.settings-add--link {
    margin-top: 8px;
    padding-top: 0;
    border-top: 0;
}

.settings-add--link > .noord-digital-disclosure__summary {
    padding-left: 0;
    color: var(--accent-text-color);
}

.settings-add--link > .noord-digital-disclosure__summary:hover {
    background: transparent;
    color: var(--accent-hover-color);
}

.settings-subform {
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    background: var(--page-color);
}

.settings-more {
    margin-top: 16px;
}

/* The permission matrix: a permission per row, a role per column (Rollenbeheer.tsx). */
.settings-matrix-scroll {
    margin-top: 20px;
    scrollbar-width: thin;
}

.settings-matrix {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    border-top: 1px solid var(--border-color);
    text-align: left;
}

.settings-matrix th,
.settings-matrix td {
    padding: 12px 16px 12px 0;
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
}

.settings-matrix tbody tr:last-child th,
.settings-matrix tbody tr:last-child td {
    border-bottom: 0;
}

.settings-matrix thead th {
    padding-top: 10px;
    padding-bottom: 10px;
    color: var(--muted-text-color);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.settings-matrix thead th + th {
    width: 132px;
}

.settings-matrix__role {
    display: block;
    color: var(--text-color);
    font-size: 11px;
    letter-spacing: 0;
    text-transform: none;
}

.settings-matrix__kind {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    color: var(--muted-text-color);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.settings-matrix__kind .icon {
    width: 10px;
    height: 10px;
}

.settings-matrix tbody th {
    font-weight: 400;
}

.settings-matrix__name {
    display: block;
    color: var(--text-color);
    font-size: 12px;
    font-weight: 500;
}

.settings-matrix__help {
    display: block;
    max-width: 28rem;
    margin-top: 2px;
    color: var(--muted-text-color);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.5;
    text-transform: none;
}

.settings-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.settings-toggle input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--accent-color);
    cursor: pointer;
}

.settings-toggle__yes,
.settings-toggle__no {
    color: var(--muted-text-color);
    font-size: 11px;
}

.settings-toggle input:checked ~ .settings-toggle__no,
.settings-toggle input:not(:checked) ~ .settings-toggle__yes {
    display: none;
}

.settings-yes {
    color: var(--accent-moss);
    font-size: 12px;
}

.settings-no {
    color: var(--muted-text-color);
    font-size: 12px;
}

.settings-permissions {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

.settings-permissions legend {
    margin-bottom: 8px;
}

/* Integrations (TabKoppelingen.tsx): a sheet per service, gold-tinted while it is connected. */
.settings-integrations {
    display: grid;
    gap: 12px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.settings-integration {
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--page-color);
}

.settings-integration--on {
    border-color: color-mix(in srgb, var(--accent-color) 35%, transparent);
    background: color-mix(in srgb, var(--accent-color) 4%, var(--surface-color));
}

.settings-integration__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 12px;
}

.settings-integration__icon {
    display: inline-flex;
    margin-top: 2px;
    color: var(--muted-text-color);
}

.settings-integration--on .settings-integration__icon {
    color: var(--accent-text-color);
}

.settings-integration__text {
    max-width: 36rem;
    margin: 4px 0 0;
    color: var(--soft-text-color);
    font-size: 12px;
    line-height: 1.6;
}

.settings-integration__error {
    margin: 6px 0 0;
    color: var(--danger-text-color);
    font-size: 11px;
}

.settings-integration__edit {
    margin-top: 14px;
}

.settings-integration .integration__form {
    margin-top: 0;
}

/* The template library (Sjabloonbibliotheek.tsx): groups under a small label, a row per template that opens it. */
.settings-group {
    margin-top: 28px;
}

.settings-group .settings-list {
    margin-top: 10px;
}

.settings-link-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 8px;
    margin: 0 -8px;
    border-radius: var(--control-radius);
    color: inherit;
    text-decoration: none;
}

.settings-link-row:hover,
.settings-link-row:focus-visible {
    background: color-mix(in srgb, var(--surface-muted-color) 40%, transparent);
}

.settings-link-row > .icon {
    flex-shrink: 0;
    color: var(--muted-text-color);
}

.settings-link-row__name {
    color: var(--text-color);
    font-size: 13px;
}

.settings-link-row__name--archived {
    color: var(--muted-text-color);
    text-decoration: line-through;
}

.settings-link-row__numbers {
    flex-shrink: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.settings-link-row__version {
    display: block;
    color: var(--accent-text-color);
    font-size: 11px;
}

.settings-link-row__use {
    display: block;
    color: var(--muted-text-color);
    font-size: 10px;
}

.settings-template > .page-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.settings-template__version {
    margin: 4px 0 0;
    color: var(--muted-text-color);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.settings-template > .settings-callout {
    margin: 0 0 20px;
}

.settings-template .noord-digital-panel {
    border-radius: 12px;
    box-shadow: none;
}

.settings-template .noord-digital-panel__content {
    padding: 16px 20px 20px;
}

.settings-template__text {
    font-size: 12px;
    line-height: 1.6;
}

.settings-archive {
    display: grid;
    justify-items: start;
    gap: 8px;
}

/* The audit log (TabAuditlog.tsx): the filter in one wrapping row, the table on its own sheet, refusals tinted. */
.settings-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.settings-filter > * {
    min-width: 8.5rem;
    flex: 0 1 auto;
}

.settings-filter .settings-filter__search {
    min-width: 11rem;
    flex: 1 1 11rem;
}

.settings-filter .noord-digital-input-field__label,
.settings-filter .select-field span {
    color: var(--muted-text-color);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.settings-filter .noord-digital-input,
.settings-filter .select-field select {
    min-height: 34px;
    padding: 6px 10px;
    background: var(--page-color);
    font-size: 12px;
}

.settings-filter .select-field {
    gap: .45rem;
}

.settings-log {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    text-align: left;
}

.settings-log th {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color);
    color: var(--muted-text-color);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.settings-log td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
    font-size: 12px;
    vertical-align: top;
}

.settings-log tbody tr:last-child td {
    border-bottom: 0;
}

.settings-log__row--denied td {
    background: color-mix(in srgb, var(--danger-soft-color) 45%, transparent);
}

.settings-log__number {
    color: var(--muted-text-color);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

td.settings-log__number {
    color: var(--muted-text-color);
    font-size: 11px;
}

.settings-log__dim {
    margin-left: 6px;
    color: var(--muted-text-color);
    font-size: 11px;
}

.settings-log__denied {
    margin-left: 6px;
    color: var(--danger-text-color);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.settings-log__meta {
    display: block;
    margin-top: 2px;
    color: var(--muted-text-color);
    font-size: 11px;
    line-height: 1.5;
}

.settings-log__foot {
    margin: 0;
    padding: 10px 16px;
    border-top: 1px solid var(--border-color);
    color: var(--muted-text-color);
    font-size: 11px;
}

/* Deviating behaviour: each signal on its own small sheet, with its severity and the reason. */
.settings-signals {
    display: grid;
    gap: 10px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.settings-signal {
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    background: var(--surface-color);
}

.settings-signal__line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin: 0;
}

.settings-signal__severity {
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--warning-soft-color);
    color: var(--accent-hover-color);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.settings-signal__severity--investigate {
    background: var(--danger-soft-color);
    color: var(--danger-text-color);
}

.settings-signal__title {
    color: var(--text-color);
    font-size: 13px;
    font-weight: 600;
}

.settings-signal__rule {
    color: var(--muted-text-color);
    font-size: 11px;
}

.settings-signal__text {
    margin: 6px 0 0;
    color: var(--soft-text-color);
    font-size: 12px;
    line-height: 1.6;
}

/* System status (TabSysteem.tsx): a coloured mark per check and job, the facts of the deployment in two columns. */
.settings-state {
    display: inline-flex;
    flex-shrink: 0;
    margin-top: 1px;
}

.settings-state--ok {
    color: var(--success-text-color);
}

.settings-state--warning {
    color: var(--warning-text-color);
}

.settings-state--failed {
    color: var(--danger-text-color);
}

.settings-state--unknown {
    color: var(--muted-text-color);
}

.settings-state-text {
    display: block;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
}

.settings-row__aside .settings-state-text {
    margin-top: 2px;
    font-size: 11px;
}

.settings-facts {
    display: grid;
    gap: 12px 32px;
    margin: 16px 0 0;
}

@container (min-width: 30rem) {
    .settings-facts {
        grid-template-columns: 1fr 1fr;
    }
}

.settings-facts dd {
    margin: 4px 0 0;
    color: var(--text-color);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

@media (max-width: 40rem) {
    .settings-card {
        padding: 16px;
    }

    .settings-row__when {
        min-width: 0;
        text-align: left;
    }
}
/* Round 30: the settings of the prototype (Instellingen.tsx and its tabs) one to one. Six tabs as a row with a gold
   underline that scrolls on a phone; white sheets of 12px with a 15px title; profile and screen lock side by side
   from 1280 wide; the template library and the retention terms under Kantoor; roles under Medewerkers; deviating
   behaviour and the screen stream around the log. Also carried by the Users pages and the own sessions. */
.settings-tabs__list {
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid var(--border-color);
    list-style: none;
    scrollbar-width: none;
}

.settings-tabs__list::-webkit-scrollbar {
    display: none;
}

.settings-tabs__list > li {
    flex-shrink: 0;
}

.settings-tabs__tab {
    display: block;
    margin-bottom: -1px;
    padding: 8px 12px;
    border-bottom: 2px solid transparent;
    color: var(--muted-text-color);
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s ease-out, border-color .15s ease-out;
}

.settings-tabs__tab:hover {
    color: var(--soft-text-color);
}

.settings-tabs__tab[aria-current="page"] {
    border-bottom-color: var(--accent-color);
    color: var(--text-color);
    font-weight: 600;
}

.settings-tabs__tab:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: -2px;
    border-radius: 6px 6px 0 0;
}

.set30-lead {
    max-width: 36rem;
    margin: 0;
}

.set30-grid {
    display: grid;
    gap: 20px;
    align-items: start;
    margin-top: 28px;
}

@media (min-width: 80rem) {
    .set30-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.set30-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.set30-card__title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.set30-card__title-gap {
    margin-top: 4px;
}

.set30-card__icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--muted-text-color);
}

.set30-card__icon .icon {
    width: 16px;
    height: 16px;
}

.set30-card__icon--danger {
    color: var(--danger-text-color);
}

.set30-intro {
    max-width: 42rem;
    margin: 8px 0 0;
    color: var(--soft-text-color);
    font-size: 13px;
    line-height: 1.6;
}

.set30-intro--indented {
    padding-left: 26px;
}

.set30-help {
    margin: 6px 0 0;
    color: var(--muted-text-color);
    font-size: 12px;
    line-height: 1.6;
}

.set30-small {
    margin: 10px 0 0;
    color: var(--muted-text-color);
    font-size: 11px;
    line-height: 1.6;
}

.set30-small--icon {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.set30-small--icon .icon {
    width: 12px;
    height: 12px;
    margin-top: 2px;
    flex-shrink: 0;
}

.set30-divided {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.set30-text {
    margin: 12px 0 0;
    color: var(--soft-text-color);
    font-size: 12px;
    line-height: 1.6;
}

.set30-text--dim {
    color: var(--muted-text-color);
}

.set30-link {
    color: var(--accent-text-color);
    font-weight: 600;
    text-decoration: none;
    transition: color .15s ease-out;
}

.set30-link:hover,
.set30-link:focus-visible {
    color: var(--accent-hover-color);
    text-decoration: underline;
}

/* The own profile */
.set30-person {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
}

.set30-person__avatar {
    display: inline-flex;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--sand-color);
    color: var(--text-color);
    font-size: 16px;
    font-weight: 600;
}

.set30-person__avatar--small {
    width: 32px;
    height: 32px;
    font-size: 12px;
}

.set30-person__note {
    margin: 0;
    color: var(--muted-text-color);
    font-size: 11px;
    line-height: 1.6;
}

.set30-form {
    display: grid;
    gap: 16px;
    margin-top: 20px;
}

.set30-fields {
    display: grid;
    gap: 16px;
}

@container (min-width: 30rem) {
    .set30-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.set30-field {
    display: block;
    min-width: 0;
}

.set30-input,
.set30-value {
    display: block;
    width: 100%;
    margin: 6px 0 0;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    background: var(--page-color);
    color: var(--text-color);
    font: inherit;
    font-size: 13px;
    transition: border-color .15s ease-out;
}

.set30-input:focus {
    border-color: var(--accent-color);
    outline: none;
}

.set30-input[readonly] {
    color: var(--soft-text-color);
}

.set30-input--number {
    font-variant-numeric: tabular-nums;
}

.set30-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.set30-lock {
    max-width: 24rem;
    margin-top: 20px;
}

/* Kantoor: the work modes, the template library, the retention terms */
.set30-always {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.set30-always__modes {
    margin: 8px 0 0;
    color: var(--text-color);
    font-size: 13px;
}

.set30-library,
.set30-retention {
    margin-top: 44px;
    padding-top: 32px;
    border-top: 1px solid var(--border-color);
}

.set30-section-title {
    margin: 0;
    color: var(--text-color);
    font-size: 15px;
    font-weight: 600;
}

.set30-section-intro {
    max-width: 36rem;
    margin: 6px 0 0;
    color: var(--muted-text-color);
    font-size: 12px;
    line-height: 1.6;
}

.set30-library .settings-callout {
    margin-top: 16px;
}

.set30-library__group {
    margin-top: 28px;
}

.set30-library__list,
.set30-people,
.set30-sessions,
.set30-status-list,
.set30-stream {
    margin: 10px 0 0;
    padding: 0;
    border-top: 1px solid var(--border-color);
    list-style: none;
}

.set30-library__list > li,
.set30-people > li,
.set30-sessions > li,
.set30-status-list > li,
.set30-stream > li {
    border-bottom: 1px solid var(--border-color);
}

.set30-library__list > .settings-empty:not(:only-child),
.set30-people > .settings-empty:not(:only-child),
.set30-sessions > .settings-empty:not(:only-child),
.set30-status-list > .settings-empty:not(:only-child),
.set30-stream > .settings-empty:not(:only-child) {
    display: none;
}

.set30-template {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    color: inherit;
    text-decoration: none;
    transition: background-color .15s ease-out;
}

.set30-template:hover,
.set30-template:focus-visible {
    background: color-mix(in srgb, var(--surface-muted-color) 40%, transparent);
}

.set30-template__main {
    min-width: 0;
    flex: 1;
}

.set30-template__line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.set30-template__name {
    color: var(--text-color);
    font-size: 13px;
}

.set30-template__name--archived {
    color: var(--muted-text-color);
    text-decoration: line-through;
}

.set30-template__text {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    color: var(--muted-text-color);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.set30-template__numbers {
    flex-shrink: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.set30-template__version {
    display: block;
    color: var(--accent-text-color);
    font-size: 11px;
}

.set30-template__use {
    display: block;
    color: var(--muted-text-color);
    font-size: 10px;
}

.set30-template > .icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--muted-text-color);
}

.set30-tag {
    padding: 1px 6px;
    border: 1px solid color-mix(in srgb, var(--khaki-color) 40%, transparent);
    border-radius: 4px;
    color: var(--khaki-text-color);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.set30-tag--muted {
    border-color: transparent;
    color: var(--muted-text-color);
}

.set30-add {
    border-top: 0;
    padding-top: 0;
}

.set30-add > .noord-digital-disclosure__summary {
    margin-top: 8px;
    padding-inline: 0;
    color: var(--accent-text-color);
}

.set30-add > .noord-digital-disclosure__summary::after {
    display: none;
}

.set30-add > .noord-digital-disclosure__summary:hover,
.set30-add > .noord-digital-disclosure__summary:focus-visible {
    background: none;
    color: var(--accent-hover-color);
}

.set30-add > .noord-digital-disclosure__summary .icon {
    width: 14px;
    height: 14px;
}

.set30-retention__title {
    font-size: 11px;
}

.set30-retention__list {
    display: grid;
    gap: 0 32px;
    margin: 20px 0 0;
    border-top: 1px solid var(--border-color);
}

@media (min-width: 48rem) {
    .set30-retention__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.set30-retention__item {
    padding: 14px 0;
    border-bottom: 1px solid var(--border-color);
}

.set30-retention__item dt {
    margin: 0;
}

.set30-retention__name {
    display: block;
    color: var(--text-color);
    font-size: 13px;
    font-weight: 600;
}

.set30-retention__term {
    display: block;
    margin-top: 2px;
    color: var(--accent-text-color);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.set30-retention__item dd {
    margin: 4px 0 0;
    color: var(--soft-text-color);
    font-size: 12px;
    line-height: 1.6;
}

/* Medewerkers: the warning, the people, the sessions, the roles */
.set30-alert,
.set30-callout {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 20px;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--surface-muted-color);
    color: var(--text-color);
    font-size: 12px;
    line-height: 1.6;
}

.set30-alert {
    border-color: color-mix(in srgb, var(--danger-color) 35%, transparent);
    background: var(--danger-soft-color);
}

.set30-alert .icon,
.set30-callout .icon {
    width: 14px;
    height: 14px;
    margin-top: 3px;
    flex-shrink: 0;
}

.set30-alert .icon {
    color: var(--danger-text-color);
}

.set30-add-employee {
    margin-top: 12px;
}

.set30-person-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    padding: 14px 0;
    color: inherit;
    text-decoration: none;
}

.set30-person-row--link {
    transition: background-color .15s ease-out;
}

.set30-person-row--link:hover,
.set30-person-row--link:focus-visible {
    background: color-mix(in srgb, var(--surface-muted-color) 40%, transparent);
}

.set30-person-row--link > .icon {
    width: 16px;
    height: 16px;
    color: var(--muted-text-color);
}

.set30-person-row__main {
    min-width: 12rem;
    flex: 1;
}

.set30-person-row__name {
    display: block;
    margin: 0;
    color: var(--text-color);
    font-size: 13px;
    font-weight: 600;
}

.set30-person-row--left .set30-person-row__name {
    color: var(--muted-text-color);
}

.set30-person-row__meta {
    display: block;
    margin: 2px 0 0;
    color: var(--muted-text-color);
    font-size: 11px;
    overflow-wrap: anywhere;
}

.set30-person-row__role {
    margin: 0;
}

.set30-person-row__role--text {
    color: var(--soft-text-color);
    font-size: 12px;
}

.set30-select {
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    background: var(--page-color);
    color: var(--text-color);
    font: inherit;
    font-size: 12px;
}

.set30-select:focus {
    border-color: var(--accent-color);
    outline: none;
}

.set30-person-row__when {
    min-width: 7rem;
    color: var(--muted-text-color);
    font-size: 11px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.set30-person-row__act {
    margin: 0;
}

.set30-strong-link {
    color: var(--text-color);
    font-size: 12px;
    font-weight: 600;
    transition: color .15s ease-out;
}

.set30-strong-link:hover,
.set30-strong-link:focus-visible {
    color: var(--danger-text-color);
}

.set30-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--surface-muted-color);
    color: var(--soft-text-color);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.set30-pill .icon {
    width: 12px;
    height: 12px;
}

.set30-pill--ok {
    background: transparent;
    color: var(--success-text-color);
}

.set30-pill--danger {
    background: var(--danger-soft-color);
    color: var(--danger-text-color);
}

.set30-pill--gold {
    background: color-mix(in srgb, var(--accent-color) 14%, var(--surface-color));
    color: var(--accent-hover-color);
}

.set30-session {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    padding: 14px 0;
}

.set30-session__icon {
    display: inline-flex;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--surface-muted-color);
    color: var(--soft-text-color);
}

.set30-session__icon .icon {
    width: 14px;
    height: 14px;
}

.set30-session__main {
    min-width: 12rem;
    flex: 1;
}

.set30-session__name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--text-color);
    font-size: 13px;
}

.set30-session__meta {
    margin: 2px 0 0;
    color: var(--muted-text-color);
    font-size: 11px;
}

.set30-session__seen {
    color: var(--muted-text-color);
    font-size: 11px;
    text-align: right;
}

.set30-session__end--off {
    color: var(--muted-text-color);
    font-size: 12px;
    font-weight: 600;
}

.set30-session form {
    margin: 0;
}

.set30-matrix {
    margin-top: 16px;
}

.set30-note-box {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    background: var(--page-color);
    color: var(--soft-text-color);
    font-size: 12px;
    line-height: 1.6;
}

.set30-note-box > .icon {
    width: 14px;
    height: 14px;
    margin-top: 3px;
    flex-shrink: 0;
    color: var(--muted-text-color);
}

.set30-note-box p {
    margin: 0;
}

.set30-note-box p + p {
    margin-top: 6px;
}

.set30-note-box strong {
    color: var(--text-color);
}

/* Koppelingen */
.set30-integrations {
    display: grid;
    gap: 12px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.set30-integration {
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--page-color);
}

.set30-integration__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
}

.set30-integration__icon {
    display: inline-flex;
    margin-top: 2px;
    color: var(--soft-text-color);
}

.set30-integration__icon .icon {
    width: 14px;
    height: 14px;
}

.set30-integration__main {
    min-width: 14rem;
    flex: 1;
}

.set30-integration__name {
    margin: 0;
    color: var(--text-color);
    font-size: 13px;
    font-weight: 600;
}

.set30-integration__text {
    max-width: 38rem;
    margin: 6px 0 0;
    color: var(--soft-text-color);
    font-size: 12px;
    line-height: 1.6;
}

.set30-integration__meta {
    margin: 6px 0 0;
    color: var(--muted-text-color);
    font-size: 11px;
}

.set30-integration__error {
    margin: 6px 0 0;
    color: var(--danger-text-color);
    font-size: 11px;
}

.set30-integration__side {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
}

.set30-integration__side form {
    margin: 0;
}

.set30-integration__direction {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.set30-choices {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.set30-choices form {
    margin: 0;
}

.set30-choice {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    background: var(--surface-color);
    color: var(--soft-text-color);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.set30-choice:hover {
    border-color: var(--khaki-color);
}

.set30-choice[aria-pressed="true"] {
    border-color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 10%, var(--surface-color));
    color: var(--accent-hover-color);
    font-weight: 600;
}

.set30-connect {
    margin-top: 12px;
    padding-top: 0;
    border-top: 0;
}

.set30-connect > .noord-digital-disclosure__summary {
    padding: 7px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    background: var(--surface-color);
    color: var(--text-color);
}

.set30-connect--primary > .noord-digital-disclosure__summary {
    border-color: var(--accent-color);
    background: var(--accent-color);
    color: var(--accent-contrast-color);
}

.set30-connect--primary > .noord-digital-disclosure__summary:hover,
.set30-connect--primary > .noord-digital-disclosure__summary:focus-visible {
    background: var(--accent-hover-color);
    color: var(--accent-contrast-color);
}

/* Systeem */
.set30-status {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 0;
}

.set30-status__main {
    min-width: 0;
    flex: 1;
}

.set30-status__name {
    margin: 0;
    color: var(--text-color);
    font-size: 13px;
    font-weight: 600;
}

.set30-status__text {
    margin: 2px 0 0;
    color: var(--soft-text-color);
    font-size: 11px;
    line-height: 1.5;
}

.set30-status__state {
    display: block;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    text-align: right;
}

.set30-status__when {
    display: grid;
    flex-shrink: 0;
    gap: 2px;
    color: var(--muted-text-color);
    font-size: 11px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.set30-facts {
    padding-left: 26px;
}

/* Logboek */
.set30-signals--on {
    border-color: color-mix(in srgb, var(--danger-color) 35%, transparent);
    background: color-mix(in srgb, var(--danger-soft-color) 70%, var(--surface-color));
}

.set30-filter {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.set30-filter__more {
    flex-basis: 100%;
}

.set30-filter__period {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.set30-log-time {
    margin-left: 8px;
}

.set30-stream {
    margin-top: 16px;
}

.set30-stream__row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    padding: 8px 0;
    font-size: 12px;
}

.set30-stream__time {
    min-width: 3rem;
    color: var(--muted-text-color);
    font-variant-numeric: tabular-nums;
}

.set30-stream__who {
    color: var(--text-color);
    font-weight: 600;
}

.set30-stream__what {
    color: var(--soft-text-color);
}

.set30-footnote {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 20px 0 0;
    color: var(--muted-text-color);
    font-size: 11px;
    line-height: 1.6;
}

.set30-footnote .icon {
    width: 12px;
    height: 12px;
    margin-top: 2px;
    flex-shrink: 0;
}

/* One template as a sheet */
.set30-sheet-page {
    display: flex;
    justify-content: center;
}

.set30-sheet {
    width: 100%;
    max-width: 672px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--surface-color);
    box-shadow: var(--overlay-shadow);
}

.set30-sheet__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color);
}

.set30-sheet__heading {
    min-width: 0;
}

.set30-sheet__title {
    margin: 4px 0 0;
    color: var(--text-color);
    font-size: 17px;
    font-weight: 600;
}

.set30-sheet__meta {
    margin: 4px 0 0;
    color: var(--muted-text-color);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.set30-sheet__close {
    flex-shrink: 0;
    padding: 4px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    color: var(--soft-text-color);
    font-size: 12px;
    text-decoration: none;
    transition: border-color .15s ease-out, color .15s ease-out;
}

.set30-sheet__close:hover,
.set30-sheet__close:focus-visible {
    border-color: var(--accent-color);
    color: var(--accent-text-color);
}

.set30-sheet > .status-message {
    margin: 16px 24px 0;
}

.set30-sheet__body {
    display: grid;
    gap: 24px;
    padding: 20px 24px;
}

.set30-sheet__lead {
    margin: 0;
    color: var(--soft-text-color);
    font-size: 13px;
    line-height: 1.6;
}

.set30-sheet__notice {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    background: var(--page-color);
    color: var(--muted-text-color);
    font-size: 12px;
    line-height: 1.6;
}

.set30-sheet__section > .settings-label {
    margin-bottom: 10px;
}

.set30-sheet__section .prepare__list {
    border-top: 1px solid var(--border-color);
}

.set30-sheet__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
}

.set30-sheet__foot form {
    margin: 0;
}

.set30-archive {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted-text-color);
    font-size: 12px;
    font-weight: 600;
    transition: color .15s ease-out;
}

.set30-archive:hover,
.set30-archive:focus-visible {
    color: var(--danger-text-color);
}

.set30-archive .icon {
    width: 14px;
    height: 14px;
}

.set30-sheet__footnote {
    padding: 0 24px 16px;
}

@media (max-width: 40rem) {
    .set30-intro--indented,
    .set30-facts {
        padding-left: 0;
    }

    .set30-person-row__when,
    .set30-session__seen {
        min-width: 0;
        text-align: left;
    }

    .set30-sheet__head,
    .set30-sheet__body,
    .set30-sheet__foot {
        padding-inline: 16px;
    }
}
/* === /region: settings === */

/* === region: portals (Klantportaal, Gegadigdeportaal, Inloggen, Code, Kluispagina) === */
/* The seller's and the party's portal (Klantportaal, Gegadigdeportaal): one calm column of 880px on the page colour.
   The next step is the one dark block with the one gold button; everything else sits below it in white or chalk
   cards. On these light screens a primary button is charcoal, as in the prototype. */
.portal {
    display: grid;
    width: min(880px, 100%);
    gap: 40px;
    margin-inline: auto;
    padding: 24px 0 40px;
}

.portal .noord-digital-button,
.portal-standalone .noord-digital-button,
.portal-auth .noord-digital-button {
    min-height: 38px;
    padding: 10px 16px;
    font-size: 13px;
}

.portal .noord-digital-button--primary,
.portal-standalone .noord-digital-button--primary,
.screen-lock-page .noord-digital-button--primary {
    border-color: var(--text-color);
    background: var(--text-color);
    color: var(--page-color);
    box-shadow: 0 1px 2px rgba(26, 26, 26, .14), 0 8px 18px -10px rgba(26, 26, 26, .55);
}

.portal .noord-digital-button--primary:hover,
.portal-standalone .noord-digital-button--primary:hover,
.screen-lock-page .noord-digital-button--primary:hover {
    background: color-mix(in srgb, var(--text-color) 86%, var(--surface-color));
}

.portal .noord-digital-button .icon,
.portal-standalone .noord-digital-button .icon,
.portal-auth .noord-digital-button .icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

:where(.portal) :where(p, h1, h2, h3, ul, dl, dd) {
    margin: 0;
}

.portal .status-message {
    margin: 0;
}

.portal-meta {
    margin: 0;
    color: var(--muted-text-color);
    font-size: 11px;
    line-height: 1.6;
    font-variant-numeric: tabular-nums;
}

/* The heading of a screen: a date or a label, the greeting or title, and one line that follows the dossier. */
.portal__head {
    display: grid;
    gap: 12px;
}

.portal__eyebrow {
    color: var(--muted-text-color);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.portal__greeting {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.021em;
}

.portal__title {
    font-size: 23px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.021em;
}

.portal__lead {
    max-width: 576px;
    color: var(--soft-text-color);
    font-size: 14px;
    line-height: 1.65;
}

@media (min-width: 40rem) {
    .portal {
        padding-top: 40px;
    }

    .portal__greeting {
        font-size: 30px;
    }

    .portal__title {
        font-size: 28px;
    }
}

.portal__section {
    display: grid;
    max-width: 672px;
    gap: 12px;
}

.portal__section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.portal__label {
    color: var(--muted-text-color);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.portal__label--icon {
    display: flex;
    align-items: center;
    gap: 8px;
}

.portal__label--icon .icon {
    width: 14px;
    height: 14px;
}

.portal__count {
    color: var(--muted-text-color);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.portal__section-text {
    color: var(--soft-text-color);
    font-size: 13px;
    line-height: 1.65;
}

.portal-gone {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 64px 20px;
    text-align: center;
}

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

.portal-gone__title {
    color: var(--text-color);
    font-size: 14px;
}

.portal-gone__text {
    color: var(--muted-text-color);
    font-size: 12px;
}

/* The next step beside the advisor: two blocks, equally high, side by side from 1024px. */
.portal-grid {
    display: grid;
    gap: 24px;
}

@media (min-width: 64rem) {
    .portal-grid {
        grid-template-columns: minmax(0, 1fr) 340px;
        align-items: stretch;
    }
}

/* VolgendeActie: the only dark block. */
.portal-next {
    overflow: hidden;
    border-radius: var(--panel-radius);
    background: var(--text-color);
    color: var(--page-color);
    box-shadow: var(--raised-shadow);
}

.portal-next__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    border-bottom: 1px solid color-mix(in srgb, var(--surface-color) 10%, var(--text-color));
    color: var(--accent-text-color);
}

.portal-next__bar .icon {
    width: 14px;
    height: 14px;
    color: color-mix(in srgb, var(--accent-color) 70%, var(--surface-color));
}

.portal-next__eyebrow {
    color: color-mix(in srgb, var(--accent-color) 70%, var(--surface-color));
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.portal-next__body {
    display: grid;
    gap: 12px;
    padding: 20px 24px 24px;
}

.portal-next__title {
    color: var(--surface-color);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.021em;
}

.portal-next__text {
    color: color-mix(in srgb, var(--page-color) 76%, var(--text-color));
    font-size: 13px;
    line-height: 1.65;
}

.portal-next__due {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    color: color-mix(in srgb, var(--page-color) 76%, var(--text-color));
    font-size: 12px;
}

.portal-next__due .icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: color-mix(in srgb, var(--page-color) 55%, var(--text-color));
}

.portal-next__term--urgent {
    color: color-mix(in srgb, var(--accent-color) 60%, var(--surface-color));
    font-weight: 600;
}

.portal .portal-next__action {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-top: 12px;
    padding: 14px 20px;
    border-color: var(--accent-color);
    background: var(--accent-color);
    color: var(--accent-contrast-color);
    font-size: 14px;
    text-align: left;
    box-shadow: none;
}

.portal .portal-next__action:hover {
    border-color: color-mix(in srgb, var(--accent-color) 80%, var(--surface-color));
    background: color-mix(in srgb, var(--accent-color) 80%, var(--surface-color));
}

.portal .portal-next__action .icon {
    width: 16px;
    height: 16px;
    transition: transform .15s ease-out;
}

.portal-next__action:hover .icon {
    transform: translateX(2px);
}

.portal-next__foot {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid color-mix(in srgb, var(--surface-color) 10%, var(--text-color));
    color: color-mix(in srgb, var(--page-color) 58%, var(--text-color));
    font-size: 11px;
    line-height: 1.6;
}

.portal-next__foot a {
    color: color-mix(in srgb, var(--page-color) 76%, var(--text-color));
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--page-color) 45%, var(--text-color));
    text-underline-offset: 2px;
    transition: color .15s ease-out;
}

.portal-next__foot a:hover {
    color: color-mix(in srgb, var(--accent-color) 60%, var(--surface-color));
}

.portal-next .portal-avatar {
    background: color-mix(in srgb, var(--surface-color) 14%, var(--text-color));
    color: var(--page-color);
}

/* A round mark with initials where the prototype shows a portrait. */
.portal-avatar {
    display: grid;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    place-items: center;
    border-radius: 50%;
    background: var(--surface-muted-color);
    color: var(--khaki-text-color);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
}

.portal-avatar--large {
    width: 56px;
    height: 56px;
    font-size: 16px;
}

.portal-avatar--small {
    width: 24px;
    height: 24px;
    font-size: 9px;
}

.portal-avatar--you {
    background: color-mix(in srgb, var(--accent-color) 20%, var(--surface-color));
}

/* The cards below the next step: white, or chalk for what is about trust and rights. */
.portal-card {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: var(--panel-radius);
    background: var(--surface-color);
}

.portal-card--quiet {
    background: var(--page-color);
}

.portal-card__heading {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--khaki-text-color);
}

.portal-card__heading .icon {
    width: 14px;
    height: 14px;
}

.portal-card__eyebrow {
    color: var(--muted-text-color);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.portal-card__eyebrow--accent {
    color: var(--khaki-text-color);
}

.portal-card__label {
    margin-top: 8px;
    color: var(--muted-text-color);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.portal-card__text {
    max-width: 672px;
    color: var(--soft-text-color);
    font-size: 12px;
    line-height: 1.65;
}

.portal-card__text--icon {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.portal-card__text--icon .icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-top: 2px;
}

.portal-card__rule {
    display: grid;
    gap: 8px;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.portal-card__next {
    justify-self: start;
}

/* AdviseurBlok. */
.portal-advisor__who {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 4px;
}

.portal-advisor__name-block {
    min-width: 0;
}

.portal-advisor__name {
    color: var(--text-color);
    font-size: 15px;
    font-weight: 600;
}

.portal-advisor__role {
    color: var(--soft-text-color);
    font-size: 12px;
}

.portal-advisor__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 4px;
}

.portal-advisor__actions .noord-digital-button--quiet,
.portal-doc__open,
.portal-task__quiet {
    border-color: var(--border-color);
    color: var(--text-color);
}

.portal-advisor__actions .noord-digital-button--quiet:hover,
.portal-doc__open:hover,
.portal-task__quiet:hover {
    border-color: var(--accent-color);
    background: transparent;
    color: var(--khaki-text-color);
}

.portal-advisor__phone {
    color: var(--muted-text-color);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/* What is new, and what the advisor wrote. */
.portal-notices,
.portal-timeline,
.portal-people,
.portal-tasks,
.portal-done,
.portal-docs,
.portal-parts,
.portal-rules {
    margin: 0;
    padding: 0;
    list-style: none;
}

.portal-notices__item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid var(--border-color);
}

.portal-notices__item:first-child {
    border-top: 0;
    padding-top: 4px;
}

.portal-notices__body {
    min-width: 0;
}

.portal-notices__text {
    color: var(--text-color);
    font-size: 13px;
    line-height: 1.55;
}

.portal-notices form {
    flex-shrink: 0;
}

.portal-timeline {
    display: grid;
    gap: 16px;
}

.portal-timeline__item {
    padding-left: 14px;
    border-left: 2px solid var(--sand-color);
}

.portal-timeline__text {
    color: var(--text-color);
    font-size: 13px;
    line-height: 1.65;
    white-space: pre-line;
}

/* Vertrouwelijkblok: the people who can see the dossier, and the parties looking. */
.portal-people {
    display: grid;
    gap: 10px;
}

.portal-people__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.portal-people__name {
    color: var(--text-color);
    font-size: 13px;
}

.portal-people--parties {
    gap: 14px;
}

.portal-party {
    display: grid;
    gap: 6px;
}

.portal-party__line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}

.portal-party__objection {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--control-radius);
    background: var(--surface-muted-color);
    color: var(--soft-text-color);
    font-size: 12px;
    line-height: 1.6;
}

.portal-party__objection .icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--khaki-text-color);
}

.portal-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--surface-muted-color);
    color: var(--muted-text-color);
    font-size: 10px;
    font-weight: 600;
}

.portal-pill--success {
    background: var(--success-soft-color);
    color: var(--success-text-color);
}

.portal-objection__summary {
    display: inline;
    color: var(--muted-text-color);
    font-size: 11px;
    text-decoration: underline;
    text-decoration-color: var(--border-color);
    text-underline-offset: 4px;
    list-style: none;
    cursor: pointer;
    transition: color .15s ease-out;
}

.portal-objection__summary::-webkit-details-marker {
    display: none;
}

.portal-objection__summary:hover,
.portal-objection__summary:focus-visible {
    color: var(--khaki-text-color);
}

.portal-objection[open] > .portal-objection__summary {
    display: none;
}

.portal-objection__form {
    display: grid;
    gap: 8px;
    margin-top: 8px;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    background: var(--surface-color);
}

.portal-field__label {
    color: var(--muted-text-color);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.portal-field__textarea {
    min-height: 0;
    resize: vertical;
    font-size: 13px;
    line-height: 1.6;
}

.portal-field__help {
    color: var(--muted-text-color);
    font-size: 11px;
    line-height: 1.6;
}

.portal-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

/* A blocked button says in one line what is still missing (Redenknop). */
.portal-reason {
    color: var(--soft-text-color);
    font-size: 12px;
    line-height: 1.5;
}

.portal-check {
    align-items: flex-start;
    color: var(--text-color);
    font-size: 13px;
    line-height: 1.55;
}

.portal-check input {
    flex-shrink: 0;
    margin-top: 2px;
}

/* Taakkaart: the stripe on the left is the quickest reading, the term on the right says it in words. */
.portal-tasks {
    display: grid;
    gap: 16px;
}

.portal-task {
    position: relative;
    display: grid;
    gap: 8px;
    overflow: hidden;
    padding: 20px 20px 20px 24px;
    border: 1px solid var(--border-color);
    border-radius: var(--panel-radius);
    background: var(--surface-color);
}

.portal-task::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--sand-color);
}

.portal-task--overdue {
    border-color: color-mix(in srgb, var(--danger-color) 40%, var(--surface-color));
    background: var(--danger-soft-color);
}

.portal-task--critical {
    border-color: color-mix(in srgb, var(--danger-color) 30%, var(--surface-color));
}

.portal-task--near {
    border-color: color-mix(in srgb, var(--warning-color) 35%, var(--surface-color));
}

.portal-task--overdue::before,
.portal-task--critical::before {
    background: var(--danger-color);
}

.portal-task--near::before {
    background: var(--warning-color);
}

.portal-task__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.portal-task__kind,
.portal-task__term {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
}

.portal-task__kind {
    letter-spacing: .12em;
    text-transform: uppercase;
}

.portal-task__kind .icon {
    width: 12px;
    height: 12px;
}

.portal-task__kind--upload {
    background: color-mix(in srgb, var(--accent-sea) 12%, var(--surface-color));
    color: var(--accent-sea);
}

.portal-task__kind--form {
    background: color-mix(in srgb, var(--accent-ochre) 12%, var(--surface-color));
    color: var(--accent-ochre);
}

.portal-task__kind--signing {
    background: color-mix(in srgb, var(--accent-plum) 12%, var(--surface-color));
    color: var(--accent-plum);
}

.portal-task__kind--read {
    background: color-mix(in srgb, var(--accent-moss) 12%, var(--surface-color));
    color: var(--accent-moss);
}

.portal-task__term {
    flex-shrink: 0;
    background: var(--page-color);
    color: var(--soft-text-color);
    font-size: 11px;
}

.portal-task--overdue .portal-task__term,
.portal-task--critical .portal-task__term {
    background: var(--danger-soft-color);
    color: var(--danger-text-color);
}

.portal-task--overdue .portal-task__term {
    background: var(--surface-color);
}

.portal-task--near .portal-task__term {
    background: var(--warning-soft-color);
    color: color-mix(in srgb, var(--warning-color) 75%, var(--text-color));
}

.portal-task__title {
    margin-top: 4px;
    color: var(--text-color);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
}

.portal-task__why {
    color: var(--soft-text-color);
    font-size: 13px;
    line-height: 1.65;
}

.portal-task__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.portal-task__foot .noord-digital-button .icon {
    transition: transform .15s ease-out;
}

.portal-task__foot .noord-digital-button:hover .icon {
    transform: translateX(2px);
}

.portal-done {
    border-top: 1px solid var(--border-color);
}

.portal-done__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}

.portal-done__check {
    display: grid;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-color) 20%, var(--surface-color));
    color: var(--khaki-text-color);
}

.portal-done__check .icon {
    width: 12px;
    height: 12px;
    stroke-width: 3;
}

.portal-done__title {
    min-width: 0;
    flex: 1;
    color: var(--soft-text-color);
    font-size: 13px;
}

/* No empty screens: an empty list says why, and offers its one next step. */
.portal-empty {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 24px;
    border: 1px solid var(--border-color);
    border-radius: var(--panel-radius);
    background: var(--surface-color);
    text-align: center;
}

.portal-empty > .icon {
    width: 24px;
    height: 24px;
    color: var(--khaki-text-color);
}

.portal-empty__title {
    margin-top: 4px;
    color: var(--text-color);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.021em;
}

.portal-empty__text {
    max-width: 384px;
    color: var(--soft-text-color);
    font-size: 13px;
    line-height: 1.65;
}

.portal-empty--inline {
    justify-items: start;
    padding: 20px 16px;
    text-align: left;
}

.portal-empty--inline .portal-empty__text {
    max-width: none;
}

/* The task the person came for, on top with the button that closes it. */
.portal-focus {
    display: grid;
    max-width: 672px;
    gap: 8px;
    padding: 20px;
    border: 1px solid var(--accent-color);
    border-radius: var(--panel-radius);
    background: color-mix(in srgb, var(--accent-color) 8%, var(--page-color));
}

.portal-grid > .portal-focus {
    max-width: none;
}

.portal-focus__eyebrow {
    color: var(--khaki-text-color);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.portal-focus__title {
    color: var(--text-color);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.021em;
}

.portal-focus__why {
    color: var(--soft-text-color);
    font-size: 13px;
    line-height: 1.65;
}

.portal-focus .portal-docs {
    margin-top: 8px;
}

.portal-focus__form {
    display: grid;
    justify-items: start;
    gap: 12px;
    margin-top: 8px;
}

.portal-focus__note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--soft-text-color);
    font-size: 12px;
    line-height: 1.6;
}

.portal-focus__note .icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Documentregel. */
.portal-docs {
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--panel-radius);
    background: var(--surface-color);
}

.portal-doc {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    border-top: 1px solid var(--border-color);
    transition: background-color .15s ease-out;
}

.portal-doc:first-child {
    border-top: 0;
}

@media (min-width: 40rem) {
    .portal-doc {
        flex-wrap: nowrap;
    }
}

.portal-doc__icon {
    display: flex;
    margin-top: 2px;
    color: var(--khaki-text-color);
}

.portal-doc__state {
    display: grid;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    place-items: center;
    border-radius: 50%;
}

.portal-doc__state--done {
    background: var(--success-soft-color);
    color: var(--success-text-color);
}

.portal-doc__state--failed {
    background: var(--danger-soft-color);
    color: var(--danger-text-color);
}

.portal-doc--failed {
    background: color-mix(in srgb, var(--danger-soft-color) 45%, var(--surface-color));
}

.portal-doc__body {
    display: grid;
    min-width: 0;
    flex: 1;
    gap: 4px;
}

.portal-doc__name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: var(--text-color);
    font-size: 14px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.portal-doc__note {
    color: var(--soft-text-color);
    font-size: 12px;
    line-height: 1.6;
}

.portal-doc__open,
.portal-doc__delete {
    flex-shrink: 0;
}

.portal-doc__delete:hover {
    color: var(--danger-text-color);
}

/* Uploadveld: the letterbox. A dashed sand edge, one charcoal button, and the progress while it travels. */
.portal-upload {
    border: 1px dashed var(--sand-color);
    border-radius: var(--panel-radius);
    background: var(--surface-color);
}

.portal-upload__empty {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 24px 20px;
    text-align: center;
}

.portal-upload__icon {
    display: flex;
    color: var(--khaki-text-color);
}

.portal-upload__icon .icon {
    width: 20px;
    height: 20px;
}

.portal-upload__title {
    margin-top: 6px;
    color: var(--text-color);
    font-size: 14px;
    font-weight: 600;
}

.portal-upload__text {
    max-width: 384px;
    color: var(--soft-text-color);
    font-size: 12px;
    line-height: 1.65;
}

.portal-upload__choose {
    margin-top: 10px;
    cursor: pointer;
}

.portal-upload__choose:focus-within,
.portal-upload .portal-actions label:focus-within {
    outline: 3px solid color-mix(in srgb, var(--accent-color) 28%, transparent);
    outline-offset: 2px;
}

.portal-upload .portal-actions label {
    cursor: pointer;
}

.portal-upload__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
}

.portal-upload__state {
    display: grid;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    place-items: center;
    border-radius: 50%;
    background: var(--page-color);
    color: var(--khaki-text-color);
}

.portal-upload__state .icon {
    width: 14px;
    height: 14px;
}

.portal-upload__state--done {
    background: var(--success-soft-color);
    color: var(--success-text-color);
}

.portal-upload__state--failed {
    background: var(--danger-soft-color);
    color: var(--danger-text-color);
}

.portal-upload__body {
    display: grid;
    min-width: 0;
    flex: 1;
    gap: 6px;
}

.portal-upload__name {
    overflow: hidden;
    color: var(--text-color);
    font-size: 13px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-upload__bar {
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-muted-color);
}

.portal-upload__bar-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--accent-color);
    transition: width .2s ease-out;
}

.portal-upload__error {
    color: var(--danger-text-color);
    font-size: 12px;
    line-height: 1.6;
}

.portal-upload .portal-actions {
    margin-top: 6px;
}

.portal-promise {
    display: flex;
    max-width: 672px;
    align-items: flex-start;
    gap: 8px;
    color: var(--muted-text-color);
    font-size: 12px;
    line-height: 1.65;
}

.portal-promise .icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Vragenlijst: the parts as one white list; each row is a pressable link. */
.portal-parts-nav {
    max-width: 672px;
}

.portal-parts {
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--panel-radius);
    background: var(--surface-color);
}

.portal-parts li + li {
    border-top: 1px solid var(--border-color);
}

.portal-parts__item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    color: inherit;
    text-decoration: none;
}

.portal-parts__item:hover,
.portal-parts__item:focus-visible {
    background: var(--page-color);
}

.portal-parts__item:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent-color) 28%, transparent);
    outline-offset: -3px;
}

.portal-parts__item > .icon {
    flex-shrink: 0;
    color: var(--muted-text-color);
}

.portal-parts__body {
    display: grid;
    min-width: 0;
    flex: 1;
    gap: 2px;
}

.portal-parts__name {
    color: var(--text-color);
    font-size: 14px;
    font-weight: 500;
}

/* One part of the questionnaire. */
.portal--section {
    gap: 24px;
}

/* .portal sets display: grid, which outweighs the general [v-cloak] rule. Until its Vue app is mounted the questionnaire
   stays hidden: an answer typed into the uncompiled markup would be thrown away by the mount and never saved. */
.portal--section[v-cloak] {
    display: none;
}

.portal--section > :not(.portal-back) {
    max-width: 672px;
}

.portal-back__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--khaki-text-color);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: color .15s ease-out;
}

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

.portal-back__link .icon {
    width: 14px;
    height: 14px;
}

.portal .portal-progress {
    padding: 12px 16px;
    border-radius: var(--control-radius);
}

.portal--section .question {
    padding-top: 20px;
}

.portal--section .question__label {
    color: var(--text-color);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

.portal--section .question__number {
    font-size: 11px;
}

.portal--section .question__explanation {
    font-size: 12px;
    line-height: 1.6;
}

.portal--section .question__confidential {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
}

.portal--section .question__confidential .icon {
    width: 12px;
    height: 12px;
}

.portal--section .choice-option {
    font-size: 13px;
    transition: border-color .15s ease-out, background-color .15s ease-out;
}

.portal--section .choice-option:hover {
    border-color: var(--sand-color);
}

.portal--section .choice-option:has(input:checked) {
    border-color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 10%, var(--surface-color));
    font-weight: 500;
}

.portal .portal-save {
    margin-top: 8px;
    padding: 16px 0;
    background: color-mix(in srgb, var(--page-color) 95%, transparent);
    backdrop-filter: blur(8px);
}

.portal-save__state {
    color: var(--soft-text-color);
    font-size: 12px;
}

.portal-save__line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.portal-save__line .icon {
    width: 14px;
    height: 14px;
    color: var(--khaki-text-color);
}

.portal-save__line.save-bar__error .icon {
    color: var(--danger-text-color);
}

@media (max-width: 64rem) {
    .portal .portal-save {
        bottom: calc(env(safe-area-inset-bottom, 0px) + 64px);
    }
}

/* Poort: before the NDA a party sees one card with one action. */
.portal-gate {
    display: grid;
    width: min(560px, 100%);
    gap: 12px;
    justify-self: center;
    padding: 32px 24px;
    border: 1px solid var(--border-color);
    border-radius: var(--panel-radius);
    background: var(--surface-color);
    box-shadow: var(--panel-shadow);
}

@media (min-width: 40rem) {
    .portal-gate {
        padding: 40px 36px;
    }
}

.portal-gate__icon,
.portal-standalone__mark {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 50%;
    background: var(--page-color);
    color: var(--khaki-text-color);
}

.portal-gate__icon {
    margin-bottom: 8px;
    background: color-mix(in srgb, var(--accent-color) 20%, var(--surface-color));
}

.portal-gate__icon .icon,
.portal-standalone__mark .icon {
    width: 20px;
    height: 20px;
}

.portal-gate__title {
    color: var(--text-color);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.35;
}

.portal-gate__text {
    color: var(--soft-text-color);
    font-size: 14px;
    line-height: 1.65;
}

.portal-gate__missing {
    padding: 12px 14px;
    border-radius: var(--control-radius);
    background: var(--page-color);
    color: var(--soft-text-color);
    font-size: 13px;
}

.portal-gate__form {
    display: grid;
    gap: 12px;
    margin-top: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.portal .portal-gate__action {
    width: 100%;
    padding-block: 12px;
    font-size: 14px;
}

.portal-gate__note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--soft-text-color);
    font-size: 12px;
    line-height: 1.6;
}

.portal-gate__note .icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-top: 2px;
}

.portal-gate + .portal-advisor {
    width: min(560px, 100%);
    justify-self: center;
}

/* Teaserblok: what the party may read. */
.portal-teaser__headline {
    color: var(--text-color);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.35;
}

.portal-teaser__text {
    display: grid;
    gap: 16px;
    margin-top: 8px;
}

.portal-teaser__text p {
    color: var(--soft-text-color);
    font-size: 14px;
    line-height: 1.65;
}

.portal-facts {
    display: grid;
    gap: 16px 32px;
    margin-top: 8px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

@media (min-width: 40rem) {
    .portal-facts {
        grid-template-columns: 1fr 1fr;
    }
}

.portal-facts > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.portal-facts dt {
    color: var(--muted-text-color);
    font-size: 12px;
}

.portal-facts dd {
    color: var(--text-color);
    font-size: 13px;
    font-weight: 500;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Reactieblok. */
.portal-response {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.portal-response > div {
    display: grid;
    min-width: 0;
    gap: 6px;
}

.portal-response__mark {
    display: grid;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    place-items: center;
    border-radius: 50%;
    background: var(--page-color);
    color: var(--khaki-text-color);
}

.portal-response__mark--yes {
    background: var(--success-soft-color);
    color: var(--success-text-color);
}

.portal-response__mark .icon {
    stroke-width: 3;
}

.portal-response__title {
    color: var(--text-color);
    font-size: 15px;
    font-weight: 600;
}

.portal-response__form {
    display: grid;
    max-width: 576px;
    gap: 16px;
    margin-top: 4px;
}

.portal-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.portal-choice {
    position: relative;
    display: inline-flex;
    padding: 10px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    color: var(--text-color);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease-out, background-color .15s ease-out, color .15s ease-out, transform .12s ease-out;
}

.portal-choice:active {
    transform: scale(.97);
}

.portal-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.portal-choice:hover {
    border-color: var(--accent-color);
}

.portal-choice:has(input:checked) {
    border-color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 10%, var(--surface-color));
    color: var(--khaki-text-color);
}

.portal-choice:has(input:focus-visible) {
    outline: 3px solid color-mix(in srgb, var(--accent-color) 28%, transparent);
    outline-offset: 2px;
}

/* Kluispagina and the pages apart from a portal: one white card, centred on the page colour, no navigation. */
main.page-content:has(> .portal-standalone) {
    max-width: 560px;
}

.portal-standalone {
    display: flex;
    min-height: calc(100dvh - 48px);
    align-items: center;
    justify-content: center;
    padding: 40px 0;
}

.portal-standalone__card {
    width: 100%;
    padding: 32px 24px;
    border: 1px solid var(--border-color);
    border-radius: var(--panel-radius);
    background: var(--surface-color);
    box-shadow: var(--panel-shadow);
}

@media (min-width: 40rem) {
    .portal-standalone__card {
        padding: 40px 36px;
    }
}

.portal-standalone__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--accent-text-color);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.portal-standalone__content {
    display: grid;
    gap: 12px;
    margin-top: 32px;
}

.portal-standalone__content > .portal-standalone__mark {
    margin-bottom: 8px;
}

.portal-standalone__mark--accent {
    background: color-mix(in srgb, var(--accent-color) 18%, var(--surface-color));
}

.portal-standalone__mark--danger {
    background: var(--danger-soft-color);
    color: var(--danger-text-color);
}

.portal-standalone__title {
    margin: 0;
    color: var(--text-color);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.35;
}

.portal-standalone__text {
    margin: 0;
    color: var(--soft-text-color);
    font-size: 14px;
    line-height: 1.65;
}

.portal-standalone__note {
    margin: 0;
    color: var(--soft-text-color);
    font-size: 12px;
    line-height: 1.65;
}

.portal-standalone__note--divider {
    margin-top: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.portal-standalone__note--center {
    text-align: center;
}

.portal-standalone .portal-standalone__action {
    width: 100%;
    margin-top: 12px;
    padding-block: 12px;
    font-size: 14px;
}

.portal-standalone .portal-standalone__action--inline {
    width: auto;
    justify-self: start;
}

.portal-standalone form {
    margin: 0;
}

.portal-standalone .portal-standalone__secondary {
    width: 100%;
    margin-top: 12px;
    border-color: var(--border-color);
    color: var(--text-color);
}

.portal-standalone .portal-standalone__secondary:hover {
    border-color: var(--khaki-color);
    background: transparent;
    color: var(--khaki-text-color);
}

.portal-rules {
    display: grid;
    gap: 10px;
    margin: 12px 0 0;
    padding: 16px 0;
    border-block: 1px solid var(--border-color);
}

.portal-rules li {
    position: relative;
    padding-left: 14px;
    color: var(--soft-text-color);
    font-size: 13px;
    line-height: 1.65;
}

.portal-rules li::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--khaki-color);
}

.portal-vault__eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--khaki-text-color);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.portal-vault__eyebrow .icon {
    width: 14px;
    height: 14px;
}

.portal-vault__contents {
    margin: 12px 0 0;
    border-block: 1px solid var(--border-color);
}

.portal-vault__contents > div {
    padding: 14px 0;
}

.portal-vault__contents > div + div {
    border-top: 1px solid var(--border-color);
}

.portal-vault__contents dt {
    color: var(--soft-text-color);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.portal-vault__contents dd {
    margin: 4px 0 0;
    color: var(--text-color);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.portal-vault__password {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .02em;
}

.portal-vault__copy {
    display: inline-flex;
}

/* The heading the closed vault takes the focus to: read out, without a box around it. */
.portal-vault .portal-standalone__title[tabindex="-1"]:focus {
    outline: none;
}

/* The clock of an open vault: how long the username and password stay on this screen. */
.portal-vault__timer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--page-color);
    color: var(--text-color);
    font-size: 13px;
}

.portal-vault__timer .icon {
    width: 16px;
    height: 16px;
    color: var(--khaki-text-color);
}

.portal-vault__clock {
    margin-left: auto;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

/* Inloggen, the code, the screen lock and the closed door: no card, the mark, one heading, one button across. */
.portal-auth {
    display: grid;
    width: min(420px, 100%);
    gap: 12px;
    margin: 0 auto;
    padding: 64px 0;
}

:where(.portal-auth) :where(p, h1) {
    margin: 0;
}

.portal-auth--center {
    justify-items: center;
    text-align: center;
}

.portal-auth--center .portal-standalone__mark {
    margin-top: 24px;
}

.portal-auth__title {
    margin-top: 32px;
    color: var(--text-color);
    font-size: 25px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.021em;
}

.portal-auth--center .portal-standalone__mark + .portal-auth__title {
    margin-top: 8px;
}

@media (min-width: 40rem) {
    .portal-auth__title {
        font-size: 30px;
    }
}

.portal-auth__lead {
    color: var(--soft-text-color);
    font-size: 13px;
    line-height: 1.65;
}

.portal-auth__form {
    width: 100%;
    margin-top: 20px;
    text-align: left;
}

.portal-auth .noord-digital-input-field__label {
    color: var(--muted-text-color);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.portal-auth .noord-digital-input {
    min-height: 42px;
    font-size: 14px;
}

.portal-auth__form--code .noord-digital-input {
    min-height: 52px;
    font-size: 24px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .5em;
    text-align: center;
}

.portal-auth .portal-auth__action {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 14px 20px;
    font-size: 14px;
}

.portal-auth .portal-auth__action--center {
    justify-content: center;
}

.portal-auth__submit {
    display: grid;
    gap: 8px;
}

.portal-auth__notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 20px;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--panel-radius);
    background: var(--surface-color);
    color: var(--soft-text-color);
    font-size: 12px;
    line-height: 1.65;
}

.portal-auth__notice .icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--khaki-text-color);
}

.portal-auth__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
}

.portal-auth__links form {
    margin: 0;
}

.portal-auth__links--center {
    justify-content: center;
}

.portal-auth .portal-auth__quiet {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--soft-text-color);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: color .15s ease-out;
}

.portal-auth .portal-auth__quiet:hover {
    color: var(--khaki-text-color);
}

.portal-auth .portal-auth__quiet .icon {
    width: 12px;
    height: 12px;
}

.portal-auth__lost {
    margin-top: 8px;
    border-top: 0;
    padding-top: 0;
}

.portal-auth__lost .noord-digital-disclosure__summary {
    padding-left: 0;
}

.portal-auth__small {
    color: var(--soft-text-color);
    font-size: 12px;
    line-height: 1.65;
}

.portal-auth .rate-limit-panel__content {
    width: 100%;
    justify-items: center;
}

.portal-auth .rate-limit-countdown strong {
    font-size: 40px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.portal-auth .status-message {
    margin: 12px 0 0;
}

/* ---- Round 30 -------------------------------------------------------------------------------------------------- */

/* KlantChrome (Pages/Shared/_PortalHeader.cshtml): the frame of the seller's and the party's screens. Below 1024px one
   bar on top and the three places under the thumb; from 1024px a white column of 272px on the left and a thin bar
   above the page with who is signed in. */
.portal-side {
    display: none;
}

.portal-bar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 20px 12px;
    border-bottom: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--surface-color) 95%, transparent);
    backdrop-filter: blur(8px);
}

.portal-bar p {
    margin: 0;
}

.portal-bar__place {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.portal-bar__mark {
    display: grid;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    place-items: center;
    overflow: hidden;
    border-radius: 8px;
    background: var(--text-color);
    color: var(--accent-color);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-decoration: none;
}

.portal-bar__mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.portal-bar__titles {
    min-width: 0;
    line-height: 1.3;
}

.portal-bar__title,
.portal-bar__subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-bar__title {
    color: var(--text-color);
    font-size: 13px;
    font-weight: 600;
}

.portal-bar__subtitle {
    color: var(--soft-text-color);
    font-size: 10px;
}

.portal-bar__signed-in {
    display: none;
}

.portal-bar__tools {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
}

.portal-bar__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--page-color);
    color: var(--khaki-text-color);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.portal-bar__badge .icon {
    width: 10px;
    height: 10px;
}

.portal-bar__badge-long {
    display: none;
}

.portal-bar__bell {
    position: relative;
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 50%;
    color: var(--soft-text-color);
    transition: background-color .15s ease-out, color .15s ease-out;
}

.portal-bar__bell:hover {
    background: var(--page-color);
    color: var(--text-color);
}

.portal-bar__unread {
    position: absolute;
    top: -2px;
    right: -2px;
    display: grid;
    min-width: 16px;
    height: 16px;
    place-items: center;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--accent-color);
    color: var(--accent-contrast-color);
    font-size: 9px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.portal-profile {
    position: relative;
}

.portal-profile__trigger {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 50%;
    list-style: none;
    cursor: pointer;
}

.portal-profile__trigger::-webkit-details-marker {
    display: none;
}

.portal-profile__trigger:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent-color) 28%, transparent);
    outline-offset: 2px;
}

.portal-profile__avatar {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 50%;
    background: var(--surface-muted-color);
    color: var(--khaki-text-color);
    font-size: 10px;
    font-weight: 700;
    transition: background-color .15s ease-out;
}

.portal-profile__trigger:hover .portal-profile__avatar,
.portal-profile[open] .portal-profile__avatar {
    background: color-mix(in srgb, var(--accent-color) 20%, var(--surface-color));
}

.portal-profile__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 40;
    display: grid;
    min-width: 220px;
    padding: 6px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--surface-color);
    box-shadow: var(--raised-shadow);
}

.portal-profile__menu form {
    margin: 0;
}

.portal-profile__item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--text-color);
    font-size: 13px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease-out;
}

.portal-profile__item:hover,
.portal-profile__item:focus-visible {
    background: var(--page-color);
}

.portal-profile__item .icon {
    width: 14px;
    height: 14px;
    color: var(--soft-text-color);
}

/* The places under the thumb. */
.portal-tabs {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    display: flex;
    justify-content: center;
    padding: 6px 8px calc(env(safe-area-inset-bottom, 0px) + 4px);
    border-top: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--surface-color) 95%, transparent);
    backdrop-filter: blur(8px);
}

.portal-tabs__link {
    display: flex;
    max-width: 174px;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 0;
    border-radius: 8px;
    color: var(--soft-text-color);
    font-size: 10px;
    text-decoration: none;
}

.portal-tabs__link[aria-current="page"] {
    color: var(--text-color);
    font-weight: 600;
}

.portal-tabs__link:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent-color) 28%, transparent);
    outline-offset: -2px;
}

.portal-tabs__icon {
    position: relative;
    display: flex;
}

.portal-tabs__icon .icon {
    width: 19px;
    height: 19px;
}

.portal-tabs__count {
    position: absolute;
    top: -6px;
    right: -8px;
    display: grid;
    min-width: 16px;
    height: 16px;
    place-items: center;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--accent-color);
    color: var(--accent-contrast-color);
    font-size: 9px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

body:has(.portal-tabs) .app-body {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 64px);
}

body:has(.portal-bar) main.page-content {
    width: min(880px, calc(100% - 40px));
}

/* The column on the left, from 1024px. */
.portal-side p {
    margin: 0;
}

.portal-side__brand {
    display: inline-flex;
    text-decoration: none;
}

.portal-side__wordmark {
    height: 26px;
    width: auto;
}

.portal-wordmark {
    color: var(--accent-text-color);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.portal-side p.portal-side__eyebrow {
    margin-top: 32px;
    color: var(--soft-text-color);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.portal-side p.portal-side__title {
    margin-top: 8px;
    color: var(--text-color);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

.portal-side__subtitle {
    color: var(--soft-text-color);
    font-size: 12px;
    line-height: 1.5;
}

.portal-side__nav {
    display: grid;
    gap: 4px;
    margin-top: 32px;
}

.portal-side__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--soft-text-color);
    font-size: 14px;
    text-decoration: none;
    transition: background-color .15s ease-out, color .15s ease-out;
}

.portal-side__link:hover {
    background: var(--page-color);
}

.portal-side__link[aria-current="page"] {
    background: var(--text-color);
    color: var(--page-color);
    font-weight: 600;
}

.portal-side__link:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent-color) 28%, transparent);
    outline-offset: 2px;
}

.portal-side__link .icon {
    flex-shrink: 0;
}

.portal-side__label {
    flex: 1;
}

.portal-side__count {
    padding: 2px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-color) 20%, var(--surface-color));
    color: var(--khaki-text-color);
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.portal-side__link[aria-current="page"] .portal-side__count {
    background: var(--accent-color);
    color: var(--accent-contrast-color);
}

.portal-side__advisor {
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--panel-radius);
}

.portal-side__who {
    display: flex;
    align-items: center;
    gap: 12px;
}

.portal-side__who-text {
    min-width: 0;
}

.portal-side__advisor-name {
    overflow: hidden;
    color: var(--text-color);
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-side__advisor-role {
    color: var(--soft-text-color);
    font-size: 11px;
}

.portal-side__call {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    color: var(--text-color);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s ease-out, color .15s ease-out, transform .07s ease-out;
}

.portal-side__call:hover {
    border-color: var(--accent-color);
    color: var(--khaki-text-color);
}

.portal-side__call:active {
    transform: scale(.97);
}

.portal-side__call .icon {
    width: 12px;
    height: 12px;
}

.portal-side p.portal-side__retention {
    margin-top: 16px;
    color: var(--soft-text-color);
    font-size: 11px;
    line-height: 1.65;
}

.portal-avatar--medium {
    width: 36px;
    height: 36px;
    font-size: 12px;
}

@media (min-width: 64rem) {
    .portal-tabs {
        display: none;
    }

    body:has(.portal-tabs) .app-body {
        padding-bottom: 0;
    }

    .portal-side {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 30;
        display: flex;
        width: 272px;
        flex-direction: column;
        justify-content: space-between;
        gap: 24px;
        overflow-y: auto;
        padding: 32px 24px;
        border-right: 1px solid var(--border-color);
        background: var(--surface-color);
    }

    body:has(.portal-side) .app-body {
        margin-left: 272px;
    }

    .portal-bar {
        position: static;
        padding: 16px 40px;
        background: var(--surface-color);
        backdrop-filter: none;
    }

    .portal-bar__place {
        display: none;
    }

    .portal-bar__signed-in {
        display: block;
        min-width: 0;
        overflow: hidden;
        color: var(--soft-text-color);
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .portal-bar__badge {
        gap: 6px;
        padding: 4px 12px;
        font-size: 10px;
    }

    .portal-bar__badge .icon {
        width: 12px;
        height: 12px;
    }

    .portal-bar__badge-short {
        display: none;
    }

    .portal-bar__badge-long {
        display: inline;
    }

    body:has(.portal-bar) main.page-content {
        width: min(880px, calc(100% - 80px));
    }

    .portal .portal-save {
        bottom: 0;
    }
}

/* The wordmark above a page apart (the vault, signing in, the door of a party). */
.portal-brand {
    margin: 0;
    line-height: 1;
}

.portal-brand__image {
    height: 44px;
    width: auto;
    max-width: 100%;
}

/* Vertrouwelijkblok: a party on one line with where it stands, the day on the right. */
.portal-party .portal-party__line {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 12px;
}

.portal-party__who {
    min-width: 0;
}

.portal-party__stage {
    margin-left: 8px;
    color: var(--muted-text-color);
    font-size: 11px;
}

.portal-party__who .portal-pill {
    margin-left: 8px;
}

.portal-party__date {
    flex-shrink: 0;
    color: var(--muted-text-color);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.portal-objection__summary {
    margin-top: 4px;
}

.portal-objection__form .portal-field__textarea {
    font-size: 12px;
}

.portal-objection__form .portal-field__textarea::placeholder {
    color: var(--muted-text-color);
}

.portal .portal-objection__form .noord-digital-button {
    min-height: 0;
    padding: 8px 14px;
    font-size: 12px;
}

/* The objection button stays pressable while it waits, so a press can say why (Redenknop). */
.portal-objection__form .noord-digital-button[aria-disabled="true"] {
    pointer-events: auto;
    cursor: not-allowed;
}

.portal-objection__cancel {
    color: var(--muted-text-color);
    font-size: 12px;
    font-weight: 600;
}

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

/* Inzageblok: one quiet white button with the download mark. */
.portal .portal-access__button {
    min-height: 0;
    padding: 8px 14px;
    border-color: var(--border-color);
    background: var(--surface-color);
    color: var(--text-color);
    font-size: 12px;
}

.portal .portal-access__button:hover {
    border-color: var(--khaki-color);
    background: var(--surface-color);
    color: var(--khaki-text-color);
}

/* Uploadveld: a file dragged over the letterbox lights its edge. */
.portal-upload--dragging {
    border-color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 6%, var(--surface-color));
}

.portal-docs__hint {
    font-size: 12px;
}

/* Vragenlijst: yes and no are two buttons side by side, the chosen one charcoal. */
.portal--section .portal-yes-no {
    display: flex;
    gap: 8px;
}

.portal--section .portal-yes-no .choice-option {
    position: relative;
    padding: 8px 20px;
    color: var(--soft-text-color);
    font-weight: 600;
}

.portal--section .portal-yes-no .choice-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.portal--section .portal-yes-no .choice-option:hover {
    border-color: var(--accent-color);
}

.portal--section .portal-yes-no .choice-option:has(input:checked) {
    border-color: var(--text-color);
    background: var(--text-color);
    color: var(--page-color);
}

.portal--section .portal-yes-no .choice-option:has(input:focus-visible) {
    outline: 3px solid color-mix(in srgb, var(--accent-color) 28%, transparent);
    outline-offset: 2px;
}

/* Ondertekenen: what is signed, what to look at, and the one gold button. */
.portal--signing {
    gap: 24px;
}

.portal--signing > .portal__head {
    margin-top: -4px;
}

.portal-signing__none {
    max-width: 576px;
    padding: 28px 24px;
}

.portal-signing__none-title {
    color: var(--text-color);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.021em;
}

.portal-attention__points {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.portal-attention__points li {
    position: relative;
    padding-left: 16px;
    color: var(--text-color);
    font-size: 13px;
    line-height: 1.65;
}

.portal-attention__points li::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-color);
}

.portal-attention__document {
    margin-top: 4px;
}

.portal-signing__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
}

.portal-signing__actions form {
    margin: 0;
}

.portal-signing__form {
    display: grid;
    justify-items: start;
    gap: 12px;
}

.portal .portal-signing__sign {
    padding: 14px 20px;
    border-color: var(--accent-color);
    background: var(--accent-color);
    color: var(--accent-contrast-color);
    font-size: 14px;
}

.portal .portal-signing__sign:hover {
    border-color: var(--accent-hover-color);
    background: var(--accent-hover-color);
}

.portal .portal-signing__call {
    padding: 14px 20px;
    border-color: var(--border-color);
    background: var(--surface-color);
    color: var(--text-color);
    font-size: 14px;
}

.portal .portal-signing__call:hover {
    border-color: var(--accent-color);
    background: var(--surface-color);
    color: var(--khaki-text-color);
}

@media (max-width: 40rem) {
    .portal-signing__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .portal-signing__form {
        justify-items: stretch;
    }

    .portal .portal-signing__sign,
    .portal .portal-signing__call {
        width: 100%;
        justify-content: center;
    }
}

.portal-signed {
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 32px 24px;
    border-radius: var(--panel-radius);
    background: var(--text-color);
    color: var(--page-color);
    text-align: center;
    animation: portal-signed-in .25s cubic-bezier(.23, 1, .32, 1);
}

.portal-signed__mark {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 50%;
    background: var(--accent-color);
    color: var(--text-color);
    animation: portal-signed-mark .28s .05s cubic-bezier(.23, 1, .32, 1) both;
}

.portal-signed__mark .icon {
    width: 24px;
    height: 24px;
    stroke-width: 2.5;
}

.portal-signed__title {
    margin-top: 8px;
    color: var(--surface-color);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.021em;
}

.portal-signed__text {
    max-width: 448px;
    color: color-mix(in srgb, var(--page-color) 76%, var(--text-color));
    font-size: 13px;
    line-height: 1.65;
}

.portal-signed__copy {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 16px;
    border: 1px solid color-mix(in srgb, var(--surface-color) 20%, var(--text-color));
    border-radius: var(--control-radius);
    color: var(--page-color);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s ease-out, color .15s ease-out;
}

.portal-signed__copy:hover {
    border-color: var(--accent-color);
    color: color-mix(in srgb, var(--accent-color) 60%, var(--surface-color));
}

.portal-signed__copy .icon {
    width: 14px;
    height: 14px;
}

.portal .portal-signed__back {
    width: 100%;
    padding-block: 12px;
}

@keyframes portal-signed-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

@keyframes portal-signed-mark {
    from {
        opacity: 0;
        transform: scale(.96);
    }
}

@media (prefers-reduced-motion: reduce) {
    .portal-signed,
    .portal-signed__mark {
        animation: none;
    }
}

/* Poort, in two steps on one card; the agreement itself is signed with the gold button. */
.portal-gate-card .portal-rules {
    margin-top: 12px;
}

.portal-gate-card .portal-gate__form {
    margin-top: 4px;
    padding-top: 0;
    border-top: 0;
}

.portal-gate-card__documents {
    margin-top: 8px;
}

.portal-standalone .portal-gate-card__sign {
    justify-self: start;
    padding: 12px 20px;
    border-color: var(--accent-color);
    background: var(--accent-color);
    color: var(--accent-contrast-color);
    font-size: 14px;
    box-shadow: none;
}

.portal-standalone .portal-gate-card__sign:hover {
    border-color: var(--accent-hover-color);
    background: var(--accent-hover-color);
}

.portal-gate-card__note {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
}

.portal-gate-card__note .icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-top: 2px;
}

.portal-standalone .portal-gate-card__out {
    margin-top: 24px;
    text-align: center;
}

.portal-gate-card__out .link-button,
.portal-closed__out .link-button {
    color: var(--muted-text-color);
    font-size: 12px;
}

/* Geenopgang: no card, the wordmark and one quiet line in the middle of the page. */
.portal-closed {
    text-align: center;
}

.portal-closed__content {
    display: grid;
    max-width: 448px;
    justify-items: center;
    gap: 8px;
    padding: 64px 8px;
}

.portal-closed__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 32px 0 0;
    color: var(--muted-text-color);
    font-size: 13px;
}

.portal-closed__title .icon {
    width: 14px;
    height: 14px;
}

.portal-closed__text {
    margin: 0;
    color: var(--soft-text-color);
    font-size: 14px;
    line-height: 1.65;
}

.portal-standalone .portal-closed__out {
    margin-top: 16px;
}

/* Inloggen: the promise under the form. */
.portal-auth__promise {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 16px;
    color: var(--soft-text-color);
    font-size: 11px;
    line-height: 1.65;
}

.portal-auth__promise .icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    margin-top: 2px;
}

.portal-auth .portal-brand {
    margin-top: 0;
}
/* === /region: portals === */

/* === region: agenda (Agenda dag, week, maand; Afspraak; Nieuwe afspraak) === */
/* Round 30: the agenda of the prototype (Agenda.tsx, Afspraakvensters.tsx). The colour of a block is the person in
   whose agenda it stands, shown in a legend of first names; a block is a white card with a 3px stripe in that
   colour, the name in ink and the time in the colour; the hours run from eight to seven; day columns shrink to
   132px and then the grid scrolls sideways; the now line is red and bold on today, faint over the other days. An
   appointment and a new appointment are the prototype's windows: a sheet with its title and the cross on top. */
.cal30-block--slate,
.cal30-chip--slate {
    --block-accent: var(--accent-slate);
}

.cal30-block--moss,
.cal30-chip--moss {
    --block-accent: var(--accent-moss);
}

.cal30-block--plum,
.cal30-chip--plum {
    --block-accent: var(--accent-plum);
}

.cal30-block--clay,
.cal30-chip--clay {
    --block-accent: var(--accent-clay);
}

.cal30-block--ochre,
.cal30-chip--ochre {
    --block-accent: var(--accent-ochre);
}

.cal30-block--sea,
.cal30-chip--sea {
    --block-accent: var(--accent-sea);
}

.cal30-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.cal30-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted-text-color);
    font-size: 11px;
}

.cal30-legend__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--block-accent);
}

.cal30-grid {
    grid-template-columns: 56px repeat(5, minmax(132px, 1fr));
    margin-top: 20px;
}

.cal30-grid.agenda--day {
    grid-template-columns: 56px minmax(132px, 1fr);
}

.cal30-grid .agenda__hours,
.cal30-grid .agenda__day {
    grid-template-rows: auto 1fr;
}

.cal30-grid.cal30-grid--allday .agenda__hours,
.cal30-grid.cal30-grid--allday .agenda__day {
    grid-template-rows: auto auto 1fr;
}

.cal30-grid .agenda__hour-list,
.cal30-grid .agenda__grid {
    height: calc(var(--hour-height) * var(--cal30-hours, 11));
    grid-template-rows: repeat(var(--cal30-hours, 11), 1fr);
}

.cal30-grid .agenda__day-head {
    display: block;
    min-height: 64px;
    padding: 10px 12px;
    transition: background-color .15s ease-out;
}

.cal30-grid .agenda__day-head:has(.agenda__day-link:hover) {
    background: var(--surface-muted-color);
}

.cal30-grid .agenda__day-link,
.cal30-grid.agenda--day .agenda__day-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.cal30-grid .agenda__day-link:hover,
.cal30-grid .agenda__day-link:focus-visible {
    text-decoration: none;
}

.cal30-grid .agenda__day-name {
    font-size: 11px;
    letter-spacing: .08em;
}

.cal30-grid .agenda__day-number {
    font-size: 17px;
}

.cal30-grid .agenda__hours .agenda__day-head {
    min-height: 64px;
}

.agenda__block.cal30-block {
    justify-content: center;
    gap: 1px;
    border-left: 3px solid var(--block-accent);
    background: var(--surface-color);
    color: var(--block-accent);
}

.agenda__block.cal30-block:hover,
.agenda__block.cal30-block:focus-visible {
    filter: brightness(.95);
}

.cal30-block .agenda__block-name {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    color: var(--text-color);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
}

.cal30-block.agenda__block--deviates {
    border-left-style: dashed;
}

.cal30-block__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cal30-block__repeat {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--muted-text-color);
}

.cal30-block__repeat .icon {
    width: 10px;
    height: 10px;
}

.cal30-block .agenda__block-time {
    color: var(--block-accent);
    font-size: 10px;
    line-height: 1.25;
    opacity: 1;
    font-variant-numeric: tabular-nums;
}

.cal30-block__time--hidden {
    display: none;
}

.agenda__block--allday.cal30-block {
    border-left-width: 2px;
    color: var(--text-color);
    font-size: 10px;
    font-weight: 500;
}

.agenda-month__moment.cal30-block {
    border-left: 2px solid var(--block-accent);
    background: var(--surface-color);
    color: var(--block-accent);
}

.cal30-now--faint {
    border-top: 1px solid color-mix(in srgb, #ff453a 25%, transparent);
}

.cal30-now--faint::before {
    display: none;
}

/* The sheet: an appointment, a new appointment */
.cal30-sheet-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.cal30-sheet-page > .status-message {
    width: 100%;
    max-width: 768px;
}

/* The window is never taller than the screen (owner feedback, wall board): the head and the foot stay, the body
   scrolls on its own. sheet-fit.js sets the exact height from the visible part of the screen, so the foot also stays
   above an on-screen keyboard; without it the window takes the screen less a margin for the bar on top. */
.cal30-sheet {
    display: flex;
    width: 100%;
    max-width: 768px;
    max-height: calc(100vh - 8rem);
    max-height: var(--sheet-max-height, calc(100dvh - 8rem));
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--page-color);
    box-shadow: var(--overlay-shadow);
}

.cal30-sheet--narrow {
    max-width: 576px;
}

.cal30-sheet__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.cal30-sheet__heading {
    min-width: 0;
}

.cal30-sheet__title {
    margin: 0;
    color: var(--text-color);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.01em;
}

.cal30-sheet__caption {
    margin: 4px 0 0;
    color: var(--soft-text-color);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.cal30-sheet__close {
    display: inline-flex;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    margin: -8px -10px 0 0;
    border-radius: var(--control-radius);
    color: var(--soft-text-color);
    transition: background-color .15s ease-out, color .15s ease-out;
}

.cal30-sheet__close:hover,
.cal30-sheet__close:focus-visible {
    background: var(--surface-muted-color);
    color: var(--text-color);
}

.cal30-sheet__close .icon {
    width: 16px;
    height: 16px;
}

@media (pointer: coarse) {
    .cal30-sheet__close {
        width: 48px;
        height: 48px;
    }
}

.cal30-sheet__head,
.cal30-sheet__foot {
    flex-shrink: 0;
}

.cal30-sheet__body {
    display: grid;
    min-height: 0;
    flex: 1 1 auto;
    gap: 20px;
    padding: 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: 24px;
}

.cal30-sheet__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-top: 1px solid var(--border-color);
}

.cal30-sheet__foot-text {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--soft-text-color);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cal30-sheet__foot-text--danger {
    color: var(--danger-text-color);
}

.cal30-sheet__foot-actions {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.cal30-reason {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 3;
    width: 16rem;
    margin: 0;
    padding: 8px 12px;
    border-radius: var(--control-radius);
    background: var(--text-color);
    color: var(--surface-color);
    font-size: 12px;
    line-height: 1.5;
    box-shadow: var(--raised-shadow);
}

/* The fields of an appointment */
.cal30-field {
    display: block;
    min-width: 0;
}

.cal30-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--muted-text-color);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.cal30-label .icon {
    width: 14px;
    height: 14px;
}

.cal30-label--gap {
    margin-top: 16px;
}

.cal30-control {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    background: var(--surface-color);
    color: var(--text-color);
    font: inherit;
    font-size: 13px;
    transition: border-color .15s ease-out;
}

.cal30-control:focus {
    border-color: var(--accent-color);
    outline: none;
}

.cal30-control.is-invalid {
    border-color: var(--danger-color);
    color: var(--danger-text-color);
}

.cal30-number {
    font-variant-numeric: tabular-nums;
}

.cal30-hint {
    margin: 6px 0 0;
    color: var(--muted-text-color);
    font-size: 11px;
    line-height: 1.6;
}

.cal30-hint--danger,
.cal30-error {
    color: var(--danger-text-color);
}

.cal30-error {
    display: block;
    margin-top: 4px;
    font-size: 11px;
}

.cal30-when {
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--surface-color);
}

.cal30-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    color: var(--text-color);
    font-size: 12px;
    cursor: pointer;
}

.cal30-check input {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--accent-color);
}


.cal30-choices {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.cal30-choices form {
    margin: 0;
}

/* One appointment */
.cal30-appointment {
    --kind-accent: var(--accent-sea);
    border-left: 2px solid var(--kind-accent);
}

.cal30-kind--valuation {
    --kind-accent: var(--accent-ochre);
}

.cal30-kind--negotiation {
    --kind-accent: var(--accent-clay);
}

.cal30-kind--duediligence {
    --kind-accent: var(--accent-slate);
}

.cal30-kind--notary {
    --kind-accent: var(--accent-moss);
}

.cal30-kind--phone {
    --kind-accent: var(--accent-plum);
}

.cal30-kind--internal {
    --kind-accent: var(--muted-text-color);
}

.cal30-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

.cal30-kind {
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--kind-accent) 14%, var(--surface-color));
    color: var(--kind-accent);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.cal30-fact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted-text-color);
    font-size: 12px;
}

.cal30-fact .icon {
    width: 12px;
    height: 12px;
}


.cal30-dossier {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 16px;
    color: var(--muted-text-color);
    font-size: 12px;
}

.cal30-dossier__name {
    color: var(--accent-text-color);
    font-weight: 600;
    text-decoration: none;
    transition: color .15s ease-out;
}

.cal30-dossier__name:hover,
.cal30-dossier__name:focus-visible {
    color: var(--accent-hover-color);
}

.cal30-tasks,
.cal30-people {
    display: grid;
    gap: 6px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.cal30-muted {
    color: var(--muted-text-color);
    font-size: 12px;
}

p.cal30-muted {
    margin: 8px 0 0;
}

.cal30-tasks {
    gap: 4px;
    margin-top: 12px;
}

.cal30-tasks li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
}

.cal30-tasks__title {
    min-width: 0;
    color: var(--muted-text-color);
}

.cal30-tasks__term {
    flex-shrink: 0;
    color: var(--muted-text-color);
}

.cal30-tasks__term--soon {
    color: var(--accent-text-color);
}

.cal30-tasks__term--late {
    color: var(--danger-text-color);
}

.cal30-people {
    gap: 4px;
}

.cal30-person {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--soft-text-color);
    font-size: 12px;
}

.cal30-person__remove {
    margin: 0;
}

.cal30-person__remove .link-button {
    display: inline-flex;
    color: var(--muted-text-color);
}

.cal30-person__remove .link-button:hover,
.cal30-person__remove .link-button:focus-visible {
    color: var(--danger-text-color);
}

.cal30-person__remove .icon {
    width: 12px;
    height: 12px;
}

.cal30-add {
    margin-top: 8px;
    padding-top: 0;
    border-top: 0;
}

.cal30-add > .noord-digital-disclosure__summary {
    padding-inline: 0;
    color: var(--accent-text-color);
}

.cal30-add > .noord-digital-disclosure__summary::after {
    display: none;
}

.cal30-add > .noord-digital-disclosure__summary:hover,
.cal30-add > .noord-digital-disclosure__summary:focus-visible {
    background: none;
    color: var(--accent-hover-color);
}

.cal30-add .icon {
    width: 12px;
    height: 12px;
}

.cal30-plain {
    gap: 4px;
    color: var(--soft-text-color);
    font-size: 12px;
}

.cal30-section {
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.cal30-person-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    background: var(--surface-color);
    color: var(--soft-text-color);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.cal30-person-chip:hover {
    border-color: var(--khaki-color);
}

.cal30-person-chip__avatar {
    display: inline-flex;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--sand-color);
    color: var(--text-color);
    font-size: 9px;
    font-weight: 600;
}

.cal30-person-chip__check {
    display: none;
}

.cal30-person-chip__check .icon {
    width: 12px;
    height: 12px;
}

.cal30-toggle.is-released .cal30-person-chip {
    border-color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 10%, var(--surface-color));
    color: var(--accent-hover-color);
    font-weight: 600;
}

.cal30-toggle.is-released .cal30-person-chip__check {
    display: inline-flex;
}

.cal30-toggle:not(.is-released) .cal30-toggle__on,
.cal30-toggle.is-released .cal30-toggle__off {
    display: none;
}

.cal30-series {
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: color-mix(in srgb, var(--page-color) 40%, var(--surface-color));
}

.cal30-series__state {
    margin: 8px 0 0;
    color: var(--accent-text-color);
    font-size: 12px;
    line-height: 1.6;
}

.cal30-series__acts {
    margin-top: 10px;
}

.cal30-series form {
    margin: 0;
}

.cal30-record {
    display: grid;
    gap: 6px;
}

.cal30-textarea {
    min-height: 56px;
    resize: vertical;
    line-height: 1.6;
}

.cal30-recorded {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    color: var(--success-text-color);
    font-size: 12px;
}

.cal30-recorded .icon {
    width: 14px;
    height: 14px;
}

@media (max-width: 40rem) {
    .cal30-sheet__head,
    .cal30-sheet__body,
    .cal30-sheet__foot {
        padding-inline: 16px;
    }

    .cal30-sheet-page {
        align-items: stretch;
    }
}
/* "Afspraak aanpassen" in the foot of the appointment: a real button, beside the one that deletes it. */
.cal30-sheet__foot--edit {
    justify-content: flex-end;
}

/* Two classes, so it outweighs the button component's stylesheet, which loads after this file. */
.noord-digital-button.cal30-edit__button {
    min-height: 48px;
    padding-inline: 18px;
    font-size: 14px;
}

.cal30-edit__button .icon {
    width: 18px;
    height: 18px;
}

/* THE EDIT FORM of an appointment, new or existing (owner feedback: on the wall board it could not be typed in). One
   column, labels that can be read standing in front of the board, fields 48 points high with 16 pixel text, and the
   foot with Annuleren and the main button large and always in view. */
.cal30-editor .cal30-sheet__body {
    gap: 24px;
}

.cal30-editor .agd31-series-only {
    gap: 24px;
}

/* How often, inside the white block of when (feedback of 9 October). */
.cal30-editor .cal30-when__repeat {
    gap: 16px;
}

/* The greyed-out series fields are faded once, by their fieldset, not a second time by each chip. */
.cal30-editor .agd31-series-only:disabled .noord-digital-choice {
    opacity: 1;
}

.cal30-editor__field {
    display: grid;
    min-width: 0;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

/* A floated legend is an ordinary child of its fieldset, so the gap of the grid also stands under it. */
.cal30-editor__field > legend {
    float: left;
    width: 100%;
}

.cal30-editor .cal30-label,
.cal30-editor .noord-digital-input-field__label {
    margin: 0;
    padding: 0;
    color: var(--text-color);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.cal30-editor .cal30-control,
.cal30-editor .noord-digital-input {
    min-height: 48px;
    margin-top: 0;
    padding: 10px 14px;
    font-size: 16px;
}

.cal30-editor .noord-digital-date__input {
    padding-right: 52px;
}

.cal30-editor .noord-digital-date__toggle {
    width: 44px;
    height: 44px;
    right: 2px;
}

.cal30-editor textarea.noord-digital-input {
    min-height: 7.5rem;
    line-height: 1.5;
}

.cal30-editor .noord-digital-input.is-invalid {
    border-color: var(--danger-color);
}

.cal30-editor .noord-digital-input:disabled,
.cal30-editor .cal30-control:disabled {
    background: var(--page-color);
    color: var(--muted-text-color);
}

.cal30-editor .cal30-hint,
.cal30-editor .noord-digital-input-field__help {
    margin: 0;
    font-size: 13px;
}

.cal30-editor .cal30-error,
.cal30-editor .noord-digital-input-field__errors {
    font-size: 13px;
}

.cal30-editor .cal30-when {
    display: grid;
    gap: 16px;
    padding: 16px;
}

.cal30-editor .cal30-check {
    min-height: 48px;
    margin: 0;
    font-size: 15px;
}

.cal30-editor .cal30-check input {
    width: 24px;
    height: 24px;
}

.cal30-dimmed {
    opacity: .55;
}

.cal30-editor__times {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}


.cal30-editor .agd31-map {
    min-height: 44px;
    margin-top: 0;
    font-size: 14px;
}

.cal30-editor .agd31-map .icon {
    width: 16px;
    height: 16px;
}

.cal30-editor .noord-digital-choice .cal30-legend__dot {
    width: 12px;
    height: 12px;
}

/* The foot stays at the bottom of the window, so Opslaan and Annuleren are always in reach. */
.cal30-editor__foot {
    background: var(--page-color);
}

/* Two classes, so the 48 points outweigh the button component's stylesheet, which loads after this file. */
.noord-digital-button.cal30-editor__cancel,
.noord-digital-button.cal30-editor__submit {
    min-height: 48px;
    padding-inline: 22px;
    font-size: 15px;
}

/* A main button that may not yet stays pressable, so a press can say why above it (Redenknop). */
.cal30-sheet__foot .noord-digital-button[aria-disabled="true"] {
    pointer-events: auto;
    cursor: not-allowed;
}

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

    .cal30-editor__foot .cal30-sheet__foot-text {
        display: none;
    }

    .cal30-editor__foot .cal30-sheet__foot-actions {
        width: 100%;
    }

    .cal30-editor__cancel,
    .cal30-editor__submit {
        flex: 1 1 0;
    }
}
/* === /region: agenda === */

/* region: key-points */
/* "Waar u op let": the advisor's list beside the signature placement, and the prospect's points at the door. The
   customer's card reuses .portal-attention; the points keep the design's gold dot there. */
.kp-office {
    display: grid;
    gap: 10px;
}

.kp-office--fixed {
    margin-top: 8px;
}

.kp-office__hint {
    line-height: 1.5;
}

.kp-office__list {
    display: grid;
    margin: 0;
    padding: 0;
    border-block: 1px solid var(--border-color);
    list-style: none;
}

.kp-office__item {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    column-gap: 8px;
    align-items: start;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.kp-office__item:last-child {
    border-bottom: 0;
}

.kp-office__item.is-pending {
    opacity: .6;
}

.kp-office__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-color) 16%, var(--surface-color));
    color: var(--accent-text-color);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.kp-office__point {
    margin: 0;
    color: var(--text-color);
    font-size: 12px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.kp-office__tools {
    display: flex;
    grid-column: 2;
    justify-content: flex-end;
    gap: 2px;
    margin-top: 4px;
}

.kp-office__tools .noord-digital-button--icon {
    width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
}

.kp-office__tools svg {
    width: 14px;
    height: 14px;
}

.kp-office__edit {
    display: grid;
    gap: 6px;
}

.kp-office__text {
    width: 100%;
    min-height: 0;
    font-size: 12px;
    line-height: 1.5;
    resize: vertical;
}

.kp-office__edit-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.kp-office__add {
    display: grid;
    justify-items: start;
    gap: 6px;
    margin: 0;
}

.kp-office__add-label {
    color: var(--soft-text-color);
    font-size: 11px;
    font-weight: 600;
}

.kp-nda {
    margin-top: 16px;
}

.kp-nda__document {
    margin: 0;
    color: var(--text-color);
    font-size: 13px;
    font-weight: 600;
}
/* endregion: key-points */
/* region: record-data (Portaal verlengen, Toestemming voor een stuk, @-vermeldingen in notities) */

/* The portal term under the buttons of the record head, with Verlengen beside it once it becomes urgent. */
.rec-head__info > .dat-portal-line {
    order: 5;
}

.dat-portal-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin: 16px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.dat-portal-line .rec-head__portal {
    margin: 0;
    padding: 0;
    border: 0;
}

.dat-portal-line__extend.link-button {
    min-height: 0;
    padding: 0;
    color: var(--accent-text-color);
    font-size: 11px;
    font-weight: 600;
    transition: color .15s ease-out;
}

.dat-portal-line__extend.link-button:hover,
.dat-portal-line__extend.link-button:focus-visible {
    color: var(--text-color);
}

/* Portaal verlengen: the explanation, the reason, the day, one gold button across the width. */
.dat-extend__form {
    gap: 0;
}

.dat-extend__field {
    display: block;
    margin-top: 16px;
}

.dat-extend__label {
    display: block;
    margin-bottom: 6px;
    color: var(--muted-text-color);
    font-size: 11px;
}

.dat-extend .rec-input.dat-extend__input {
    padding: 10px 12px;
    font-size: 13px;
}

.dat-extend__date .noord-digital-input-field__label {
    color: var(--muted-text-color);
    font-size: 11px;
    font-weight: 400;
}

.dat-extend__submit {
    justify-content: center;
    margin-top: 20px;
}

.dat-extend .rec-reason {
    display: block;
    margin-top: 12px;
}

/* Een collega vraagt toestemming: on top of the Documenten tab, gold-tinted, because a colleague is waiting. */
.dat-requests {
    margin-bottom: 24px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--accent-color) 30%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent-color) 8%, transparent);
}

.dat-requests__title {
    margin: 0;
    color: var(--accent-text-color);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.dat-requests__list {
    display: grid;
    gap: 12px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.dat-request {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.dat-request__text {
    min-width: 0;
    flex: 1;
}

.dat-request__text p {
    margin: 0;
    color: var(--text-color);
    font-size: 12px;
    line-height: 1.5;
}

.dat-request__text .dat-request__reason {
    margin-top: 2px;
    color: var(--muted-text-color);
    font-size: 11px;
}

.dat-request__actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 12px;
}

.dat-request__actions form {
    margin: 0;
}

.dat-request__refuse.link-button {
    min-height: 0;
    padding: 6px 4px;
    color: var(--soft-text-color);
    font-size: 12px;
    font-weight: 600;
}

.dat-request__refuse.link-button:hover,
.dat-request__refuse.link-button:focus-visible {
    color: var(--text-color);
}

/* The link of one document for a colleague: a narrow column with the one thing that is possible now. */
.dat-permission {
    max-width: 448px;
    margin: 48px auto;
    padding: 24px;
    border: 1px solid var(--border-color);
    border-radius: var(--panel-radius);
    background: var(--surface-color);
}

.dat-permission__title {
    margin: 0 0 12px;
    color: var(--text-color);
    font-size: 15px;
    font-weight: 600;
}

.dat-permission__text {
    margin: 0 0 12px;
    color: var(--soft-text-color);
    font-size: 13px;
    line-height: 1.625;
}

.dat-permission__text--quiet {
    color: var(--muted-text-color);
    font-size: 12px;
}

.dat-permission__form {
    margin: 16px 0 0;
}

.dat-permission__field {
    display: block;
}

.dat-permission__label {
    display: block;
    margin-bottom: 6px;
    color: var(--muted-text-color);
    font-size: 11px;
}

.dat-permission__input.rec-input {
    padding: 10px 12px;
    font-size: 13px;
}

.dat-permission__error {
    margin: 6px 0 0;
    color: var(--danger-text-color);
    font-size: 12px;
}

.dat-permission__action {
    margin-top: 16px;
}

.dat-permission__back {
    display: inline-block;
    margin-top: 20px;
    font-size: 12px;
}

@media (max-width: 520px) {
    .dat-permission {
        margin: 16px 0;
        padding: 20px 16px;
    }
}

/* @-vermeldingen: the team offered under the note field, and a named colleague marked in gold in the note. */
.dat-mention-anchor {
    position: relative;
}

.dat-mentions {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    width: 224px;
    max-height: 220px;
    margin: 0;
    padding: 4px 0;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--surface-muted-color);
    box-shadow: var(--raised-shadow);
    list-style: none;
}

.dat-mentions[hidden] {
    display: none;
}

.dat-mentions__option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    color: var(--soft-text-color);
    font-size: 12px;
    cursor: pointer;
    transition: background-color .15s ease-out, color .15s ease-out;
}

.dat-mentions__option[hidden] {
    display: none;
}

.dat-mentions__option:hover,
.dat-mentions__option[aria-selected="true"] {
    background: var(--surface-color);
    color: var(--text-color);
}

.rec-avatar.dat-mentions__avatar {
    width: 20px;
    height: 20px;
    font-size: 10px;
}

.dat-mention {
    padding: 2px 4px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    color: var(--accent-text-color);
    font-weight: 600;
}

/* endregion: record-data */

/* region: profile-data */
/* A face with a photo (_Avatar): the picture fills the circle the place already draws, whatever its size. */
.prf-avatar {
    overflow: hidden;
    padding: 0;
}

.prf-avatar__photo {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

/* Uw profiel: the photo, its one quiet action to choose another, and the hint under it. */
.prf-photo__body {
    display: grid;
    min-width: 0;
    gap: 8px;
}

.prf-photo__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.prf-photo__form {
    margin: 0;
}

.prf-photo__choose {
    position: relative;
    cursor: pointer;
}

.prf-photo__file {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    opacity: 0;
    white-space: nowrap;
}

.prf-photo__choose:focus-within {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.prf-photo__hint {
    margin: 0;
    color: var(--muted-text-color);
    font-size: 11px;
    line-height: 1.6;
}

.prf-signature {
    min-height: 76px;
    line-height: 1.5;
    resize: vertical;
}

/* Wanneer wij u waarschuwen: a row per switch, a line between the rows, the switch at the end. */
.prf-switches {
    margin: 16px 0 0;
}

.prf-switch-list {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--border-color);
    list-style: none;
}

.prf-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}

.prf-switch-row:last-child {
    border-bottom: 0;
}

.prf-switch-row__text {
    display: grid;
    min-width: 0;
    gap: 2px;
    cursor: pointer;
}

.prf-switch-row__title {
    color: var(--text-color);
    font-size: 13px;
}

.prf-switch-row__when {
    color: var(--muted-text-color);
    font-size: 11px;
}

.prf-switch {
    position: relative;
    flex-shrink: 0;
    width: 36px;
    height: 20px;
    margin: 0;
    border-radius: 999px;
    background: var(--surface-muted-color);
    cursor: pointer;
    appearance: none;
    transition: background-color .15s ease-out;
}

.prf-switch::after {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--surface-color);
    content: "";
    transition: left .15s ease-out;
}

.prf-switch:checked {
    background: var(--accent-color);
}

.prf-switch:checked::after {
    left: 18px;
}

.prf-switch:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .prf-switch,
    .prf-switch::after {
        transition: none;
    }
}
/* endregion: profile-data */

/* region: agenda-31 (Agenda raster, afspraakvensters, Vandaag-strook) */

/* The grips on the edges of a block (Apple's grab points): eight points high, only visible when pointed at, with a
   short bar in the colour of the block. A block under forty points gets only the bottom grip, under twenty-four none:
   the size of the block itself decides, whatever the zoom step. */
.agenda__block.cal30-block[data-appointment] {
    container: agd31-block / size;
}

.agenda__block-handle {
    z-index: 1;
    height: 8px;
    opacity: 0;
    transition: opacity .15s ease-out;
}

.agenda__block-handle--top {
    inset: 0 0 auto;
}

.agenda__block-handle::after {
    content: "";
    position: absolute;
    right: 35%;
    bottom: 1px;
    left: 35%;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

.agenda__block-handle--top::after {
    top: 1px;
    bottom: auto;
}

.agenda__block-handle:hover,
.agenda__block--dragging .agenda__block-handle {
    opacity: .7;
}

@container agd31-block (max-height: 39px) {
    .agenda__block-handle--top {
        display: none;
    }
}

@container agd31-block (max-height: 23px) {
    .agenda__block-handle {
        display: none;
    }
}

/* The shadow block under the mouse: the quarter a click plans at, half an hour high, dashed in gold. */
.agd31-preview {
    position: absolute;
    right: 4px;
    left: 4px;
    z-index: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    padding: 0 8px;
    border: 1px dashed var(--accent-color);
    border-radius: 6px;
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
    pointer-events: none;
}

.agd31-preview .icon {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    color: var(--accent-text-color);
}

.agd31-preview__time {
    overflow: hidden;
    color: var(--accent-hover-color);
    font-size: 10px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Travel under the day view: one quiet line per journey, red when it will not fit. */
.agd31-travel {
    display: grid;
    gap: 12px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.agd31-travel__line {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted-text-color);
    font-size: 11px;
    line-height: 1.5;
}

.agd31-travel__line .icon {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
}

.agd31-travel__line--tight {
    color: var(--danger-text-color);
}

/* A quiet day: the sentence, then the dossiers that ask for an appointment, each with "Inplannen". */
.agd31-quiet {
    max-width: 42rem;
}

.agd31-asks {
    margin-top: 28px;
}

.agd31-asks__title {
    margin: 0;
    color: var(--muted-text-color);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.agd31-asks__list {
    margin: 12px 0 0;
    padding: 0;
    border-top: 1px solid var(--border-color);
    list-style: none;
}

.agd31-asks__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-color);
}

.agd31-asks__text {
    flex: 1 1 16rem;
    min-width: 0;
}

.agd31-asks__company {
    color: var(--text-color);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: color .15s ease-out;
}

.agd31-asks__company:hover,
.agd31-asks__company:focus-visible {
    color: var(--accent-text-color);
}

.agd31-asks__reason {
    margin: 2px 0 0;
    color: var(--muted-text-color);
    font-size: 12px;
    line-height: 1.5;
}

.agd31-asks__plan {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    color: var(--soft-text-color);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: border-color .15s ease-out, color .15s ease-out;
}

.agd31-asks__plan .icon {
    width: 12px;
    height: 12px;
}

.agd31-asks__plan:hover,
.agd31-asks__plan:focus-visible {
    border-color: var(--accent-color);
    color: var(--accent-text-color);
}

/* The edit form: "Wat verandert er" as two pressed buttons over real radio buttons, and the series fields greyed
   out while only this moment changes. */
.agd31-scope,
.agd31-series-only {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.agd31-series-only {
    display: grid;
    gap: 16px;
    transition: opacity .15s ease-out;
}

.agd31-series-only:disabled {
    opacity: .4;
}

/* "Op de kaart bekijken" under the location, and the location in the facts as a link to the map. */
.agd31-map {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    color: var(--accent-text-color);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    transition: color .15s ease-out;
}

.agd31-map .icon {
    width: 12px;
    height: 12px;
}

.agd31-map:hover,
.agd31-map:focus-visible {
    color: var(--accent-hover-color);
}

.agd31-fact-link {
    text-decoration: none;
    transition: color .15s ease-out;
}

.agd31-fact-link:hover,
.agd31-fact-link:focus-visible {
    color: var(--accent-text-color);
}

.agd31-cancel-day:hover,
.agd31-cancel-day:focus-visible {
    border-color: var(--danger-color);
    color: var(--danger-text-color);
}

@media (prefers-reduced-motion: reduce) {
    .agenda__block-handle,
    .agd31-series-only,
    .agd31-asks__plan {
        transition: none;
    }
}
/* endregion: agenda-31 */
/* region: mail */
/* Outgoing mail on Instellingen, Koppelingen: the server and its port share a row where there is room, the test mail
   sits under the setting as a quiet second action. The row wraps on a narrow card instead of squeezing the fields. */
.mail-settings__row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.mail-settings__host {
    flex: 1 1 14rem;
    min-width: 0;
}

.mail-settings__port {
    flex: 0 1 7rem;
    min-width: 6rem;
}

.mail-settings .field-validation,
.mail-test .field-validation {
    color: var(--danger-text-color);
    font-size: .84rem;
}

.mail-settings .field-validation:empty,
.mail-test .field-validation:empty {
    display: none;
}

.mail-test {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.mail-test__field {
    flex: 1 1 14rem;
    min-width: 0;
}
/* endregion: mail */

/* region: portals-31 (Ondertekenen als gegadigde, wachten op de tegenpartij, niets te doen, aanleveren opnieuw, inzage, aanmelden) */

/* Wachten op de tegenpartij: the own signature with a gold check, the awaited one as a dashed sand circle. */
.por31-wait__steps {
    display: grid;
    gap: 16px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.por31-wait__step {
    display: flex;
    gap: 12px;
}

.por31-wait__mark {
    display: grid;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    place-items: center;
    margin-top: 2px;
    border: 1px dashed var(--sand-color);
    border-radius: 50%;
}

.por31-wait__mark--done {
    border: 0;
    background: var(--accent-color);
    color: var(--accent-contrast-color);
}

.por31-wait__mark .icon {
    width: 14px;
    height: 14px;
}

.por31-wait__body {
    min-width: 0;
}

.por31-wait__who {
    color: var(--text-color);
    font-size: 14px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.por31-wait__note {
    margin-top: 2px;
    color: var(--muted-text-color);
    font-size: 12px;
    line-height: 1.6;
}

.portal-gate-card .por31-wait {
    margin-top: 24px;
    text-align: left;
}

/* Er is nu niets voor u te doen: two points under a thin line in the dark block, each with a gold dot. */
.por31-next-points {
    display: grid;
    gap: 12px;
    margin: 8px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid color-mix(in srgb, var(--surface-color) 10%, var(--text-color));
    list-style: none;
}

.por31-next-points__item {
    display: flex;
    gap: 12px;
}

.por31-next-points__dot {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    margin-top: 7px;
    border-radius: 50%;
    background: var(--accent-color);
}

.por31-next-points__title {
    display: block;
    color: var(--surface-color);
    font-size: 13px;
    font-weight: 500;
}

.por31-next-points__text {
    display: block;
    margin-top: 2px;
    color: color-mix(in srgb, var(--page-color) 58%, var(--text-color));
    font-size: 12px;
    line-height: 1.6;
}

/* The advisors are portraits in grey, as in the prototype; the initials stay as they are. */
.portal-people .prf-avatar__photo,
.portal-next__foot .prf-avatar__photo {
    filter: grayscale(1);
}

/* Aanleveren: the actions after a verdict, and a refused file in the list with its two ways on. */
.por31-upload__remove {
    display: contents;
}

.por31-upload__remove-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.por31-upload__remove-button:hover {
    color: var(--danger-text-color);
}

.por31-upload__remove-button .icon,
.por31-failed__actions .icon {
    width: 12px;
    height: 12px;
}

.por31-failed__actions {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
}

.por31-failed__actions form {
    margin: 0;
}

.por31-failed__choose:focus-within {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

@media (max-width: 40rem) {
    .por31-failed__actions {
        width: 100%;
        padding-left: 44px;
    }
}

/* Inzage: the line when the overview could not be made, quiet and next to the button that asked for it. */
.por31-access__failed {
    color: var(--soft-text-color);
    font-size: 12px;
}

/* Aanmelden: the office's number as a link, and the neutral line under a refused password from the vault. */
.por31-auth__phone {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--sand-color);
    text-underline-offset: 3px;
    transition: color .15s ease-out;
}

.por31-auth__phone:hover {
    color: var(--khaki-text-color);
}

.por31-auth__phone:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
    border-radius: 2px;
}

.portal-auth .por31-auth__hint {
    margin: -6px 0 0;
    color: var(--danger-text-color);
    font-size: 12px;
    line-height: 1.625;
}

/* The connection bar: the second line says what cannot be done offline, and only while offline. */
.por31-connection__note {
    display: none;
    margin: 2px 0 0;
    color: var(--soft-text-color);
    font-size: 11px;
    line-height: 1.6;
}

.connection-bar--offline .por31-connection__note {
    display: block;
}
/* endregion: portals-31 */

/* region: settings-31 (Instellingen: schermslot, medewerkers terughalen, systeem, logboek; opdracht bewaart tijdens typen) */
.set31-intro {
    max-width: 36rem;
    color: var(--soft-text-color);
    font-size: 13px;
}

/* Uw profiel: the own screen lock */
.set31-lock__field {
    display: block;
}

.set31-select {
    appearance: auto;
    cursor: pointer;
}

.set31-lock .set30-small {
    margin-top: 10px;
}

/* Medewerkers: the sign-in phone, giving access back, old sessions */
.set31-phone {
    margin-top: 6px;
}

.set31-phone .noord-digital-disclosure__summary {
    font-size: 11px;
}

.set31-phone__form {
    display: grid;
    gap: 6px;
    max-width: 22rem;
    margin: 0;
}

.set31-phone__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.set31-phone__row .set30-input {
    width: auto;
    min-width: 0;
    flex: 1 1 10rem;
    margin: 0;
}

.set31-restore {
    display: grid;
    justify-items: end;
    gap: 4px;
    max-width: 16rem;
}

.set31-restore__link {
    color: var(--accent-text-color);
    font-size: 12px;
    font-weight: 600;
    transition: color .15s ease-out;
}

.set31-restore__link:not([aria-disabled="true"]):hover,
.set31-restore__link:not([aria-disabled="true"]):focus-visible {
    color: var(--accent-hover-color);
}

.set31-restore__link[aria-disabled="true"] {
    color: var(--muted-text-color);
    cursor: not-allowed;
}

.set31-reason {
    color: var(--muted-text-color);
    font-size: 11px;
    line-height: 1.5;
    text-align: right;
}

.set31-session--old .set30-session__icon {
    background: var(--danger-soft-color);
    color: var(--danger-text-color);
}

.set31-session--old .set30-session__seen {
    color: var(--danger-text-color);
}

/* Sjablonen: archiving asks first */
.set31-archive__text {
    margin: 0 0 12px;
    color: var(--soft-text-color);
    font-size: 13px;
    line-height: 1.6;
}

.set31-archive__text:last-child {
    margin-bottom: 0;
}

.set31-archive__count {
    color: var(--accent-text-color);
    font-variant-numeric: tabular-nums;
}

.set31-archive__foot {
    justify-content: flex-end;
    gap: 8px;
}

/* Systeem: the backup details, the restore point of the server, the meters */
.set31-facts {
    padding-left: 26px;
}

.set31-facts__bad {
    color: var(--danger-text-color);
    font-weight: 600;
}

.set31-facts__break {
    word-break: break-all;
}

.set31-divided-text {
    margin: 16px 0 0 26px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
    color: var(--soft-text-color);
    font-size: 12px;
    line-height: 1.6;
}

.set31-divided-text strong {
    color: var(--text-color);
    font-weight: 600;
}

.set31-snapshot {
    margin: 16px 0 0 26px;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    background: var(--page-color);
}

.set31-snapshot__state {
    margin: 6px 0 0;
    color: var(--text-color);
    font-size: 13px;
    line-height: 1.6;
}

.set31-snapshot .set31-facts {
    margin-top: 10px;
    padding-left: 0;
}

.set31-snapshot .set30-small {
    margin-top: 10px;
}

@container (min-width: 40rem) {
    .set31-facts--three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.set31-meters {
    display: grid;
    gap: 16px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.set31-meter__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.set31-meter__name {
    color: var(--text-color);
    font-size: 13px;
}

.set31-meter__value {
    color: var(--soft-text-color);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.set31-meter--high .set31-meter__value {
    color: var(--warning-text-color);
    font-weight: 600;
}

.set31-meter--unknown .set31-meter__value {
    color: var(--muted-text-color);
    font-style: italic;
}

.set31-meter__bar {
    height: 6px;
    margin-top: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-muted-color);
}

.set31-meter__fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--accent-color);
    transition: width .3s ease-out;
}

.set31-meter--high .set31-meter__fill {
    background: var(--warning-color);
}

.set31-meter__note {
    margin: 4px 0 0;
    color: var(--muted-text-color);
    font-size: 11px;
    line-height: 1.6;
}

.set31-next {
    display: block;
    color: var(--muted-text-color);
    font-size: 11px;
}

/* Opdracht opstellen: saved as you type. The generate link and its reason swap by the hidden attribute, which the
   button styles would otherwise override. */
.letter__side > [hidden] {
    display: none;
}

.set31-saved {
    min-height: 1em;
    margin: 6px 0 0;
    color: var(--success-text-color);
    font-size: 11px;
}

.set31-saved:empty {
    margin: 0;
    min-height: 0;
}

.set31-saved.is-failed {
    color: var(--danger-text-color);
}

@media (max-width: 40rem) {
    .set31-facts,
    .set31-divided-text,
    .set31-snapshot {
        margin-left: 0;
        padding-left: 0;
    }

    .set31-snapshot {
        padding: 12px;
    }

    .set31-restore {
        justify-items: start;
        max-width: none;
    }

    .set31-reason {
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    .set31-meter__fill,
    .set31-restore__link {
        transition: none;
    }
}
/* endregion: settings-31 */

/* region: advisor-31 (Nieuwe klant stap 4, klantrecord, klaarzetten, afronden) */
.adv31-option--blocked {
    cursor: default;
}

.adv31-option--blocked input,
.adv31-option--blocked .new-dossier__option-title {
    opacity: .6;
    cursor: not-allowed;
}

.adv31-guarantees {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 12px 14px;
    list-style: none;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    background: var(--page-color);
}

.adv31-guarantees li {
    display: flex;
    gap: 8px;
    color: var(--soft-text-color);
    font-size: 11px;
    line-height: 1.625;
}

.adv31-guarantees svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--accent-text-color);
    stroke-width: 3;
}

.adv31-no-access__text {
    margin: 0;
    padding: 24px;
    color: var(--soft-text-color);
    font-size: 13px;
    line-height: 1.625;
}

.adv31-extend-reopens {
    color: var(--text-color);
}

.adv31-mail-subject {
    margin: 4px 0 0;
    color: var(--text-color);
    font-size: 13px;
    font-weight: 600;
}

/* Snelregel on the record: the options row under the field, once something is typed. */
.adv31-quick-options {
    display: flex;
    flex-basis: 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.adv31-quick-people {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 0;
    border: 0;
}

.adv31-chip {
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: transparent;
    color: var(--muted-text-color);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: border-color .15s ease-out, color .15s ease-out, background-color .15s ease-out;
}

.adv31-chip:hover {
    border-color: var(--soft-text-color);
}

.adv31-chip:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.adv31-chip.is-on {
    border-color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
    color: var(--accent-text-color);
    font-weight: 600;
}

.adv31-chip--priority.is-on {
    border-color: var(--danger-color);
    background: var(--danger-soft-color);
    color: var(--danger-text-color);
}

.adv31-quick-date {
    width: 168px;
}

.adv31-quick-date .noord-digital-input-field__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.adv31-quick-turn .rec-input {
    width: auto;
}

.adv31-quick-past {
    flex-basis: 100%;
    margin: 0;
    color: var(--danger-text-color);
    font-size: 11px;
}

/* Afronden in steps (design Afrondvenster). */
.adv31-close__step {
    display: grid;
    gap: 16px;
}

.adv31-close__step[hidden] {
    display: none;
}

.adv31-close__form {
    display: contents;
}

.adv31-close__file {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--surface-muted-color);
}

.adv31-close__file svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--accent-text-color);
}

.adv31-close__file-name {
    margin: 0;
    color: var(--text-color);
    font-size: 13px;
    font-weight: 600;
}

.adv31-close__file-meta {
    margin: 2px 0 0;
    color: var(--soft-text-color);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.adv31-close__again {
    text-align: center;
}

.adv31-close__confirm {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-color);
    font-size: 13px;
    line-height: 1.625;
    cursor: pointer;
}

.adv31-close__confirm input {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin: 3px 0 0;
    accent-color: var(--accent-color);
}

.adv31-close__warning,
.adv31-close__key {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    color: var(--soft-text-color);
    font-size: 13px;
    line-height: 1.625;
}

.adv31-close__key {
    color: var(--muted-text-color);
    font-size: 12px;
}

.adv31-close__warning svg,
.adv31-close__key svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--accent-text-color);
}

.adv31-close__done-mark {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent-color);
    color: var(--page-color);
}

.adv31-close__done-mark svg {
    width: 20px;
    height: 20px;
}

.adv31-close__done-title {
    margin: 0;
    color: var(--text-color);
    font-size: 17px;
    font-weight: 600;
}

.adv31-close__back {
    color: var(--accent-text-color);
}

/* Klaarzetten: a piece in the dossier that cannot go to this receiver, with its reason. */
.adv31-row--blocked {
    cursor: default;
    opacity: .6;
}
/* endregion: advisor-31 */

/* region: fb1-c */
/* Feedback C3: an account without a dossier calls the office; the button stands apart from the line above it. */
.portal-closed .fb1c-no-link__call {
    margin-top: 16px;
}
/* endregion: fb1-c */

/* region: fb1-d (leads: the bold marker, Lead toevoegen, the head of a lead; press feedback of every control) */
/* A lead says so after its name, in bold, as part of the text; the weight carries it, not a colour. */
.fb1d-lead {
    font-weight: 700;
    white-space: nowrap;
}

/* The quiet second action in the top bar (Lead toevoegen) beside the gold main one. */
.noord-digital-button.fb1d-topbar-second {
    border-color: var(--border-color);
}

/* The window Lead toevoegen: one field, then the actions on one line, the reason above the main button. */
.fb1d-new-lead {
    display: grid;
    gap: 16px;
}

.fb1d-new-lead__field {
    display: block;
    min-width: 0;
}

.fb1d-new-lead__actions,
.fb1d-delete-lead__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.fb1d-new-lead__reason {
    flex-basis: 100%;
    margin: 0;
    color: var(--muted-text-color);
    font-size: 12px;
    text-align: right;
}

/* In the window Nieuwe taak: the other way in, a lead, as one quiet line under the form. */
.fb1d-lead-choice {
    margin: 0;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--border-color);
    color: var(--muted-text-color);
    font-size: 12px;
}

/* Lead verwijderen: quiet in the head (the conversion is the one main act), solid in its own confirmation. The
   button class is part of the selector, because the component sheet loads after this one. */
.noord-digital-button.fb1d-danger {
    color: var(--danger-text-color);
}

.noord-digital-button.fb1d-danger:hover {
    background: var(--danger-soft-color);
    color: var(--danger-text-color);
}

.noord-digital-button.fb1d-danger-solid {
    border-color: var(--danger-color);
    background: var(--danger-color);
    color: #fff;
}

.noord-digital-button.fb1d-danger-solid:hover {
    border-color: color-mix(in srgb, var(--danger-color) 85%, #000);
    background: color-mix(in srgb, var(--danger-color) 85%, #000);
    color: #fff;
}

.fb1d-delete-lead {
    display: grid;
    gap: 12px;
}

.fb1d-delete-lead__text {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

/* PRESS FEEDBACK of every plain control (owner feedback D2): a button, a menu trigger (summary), a tab, a menu item, a
   chip or segmented choice (a label around a checkbox or radio), a link button and a link in a navigation sinks a pixel
   and shrinks a little while it is pressed: 80 ms in, 120 ms back. The noord-digital-button and the pressable cards
   and rows have the same press in the component sheet (components/button/style.css). The press uses the individual
   translate and scale properties, so it adds to a transform a control already has (a centred or rotated one) instead
   of replacing it, and nothing around it moves. Not for a blocked control, and not with reduced motion. The check-off
   of a task keeps its own press (workboard__checkbox, rec-check); a backdrop that closes a window does not move. */
:is(button, summary, [role="button"], [role="tab"], [role="menuitem"], input[type="submit"], input[type="button"], input[type="reset"],
    .link-button, nav a, label:has(> input[type="checkbox"]), label:has(> input[type="radio"])):not(.noord-digital-button, .pressable, .workboard__checkbox, .rec-check, [class*="backdrop"]) {
    transition-property: color, background-color, border-color, box-shadow, opacity, transform, translate, scale;
    transition-duration: .12s;
    transition-timing-function: ease-out;
}

@media (prefers-reduced-motion: no-preference) {
    :is(button, summary, [role="button"], [role="tab"], [role="menuitem"], input[type="submit"], input[type="button"], input[type="reset"],
        .link-button, nav a, label:has(> input[type="checkbox"]), label:has(> input[type="radio"])):not(.noord-digital-button, .pressable, .workboard__checkbox, .rec-check, [class*="backdrop"]):not(:disabled, [aria-disabled="true"]):active {
        translate: 0 1px;
        scale: .98;
        transition-duration: 80ms;
    }
}
/* endregion: fb1-d */

/* region: fb1-e (Koppelingen: Handelsregister-sleutel en agenda-abonnement; Opzoeken in Nieuwe klant) */
/* The KvK card: "Verbinding testen" as its one main action, the key form and the removal under it. */
.fb1e-kvk__test {
    margin: 12px 0 0;
}

.fb1e-kvk__form .field-validation {
    display: block;
    color: var(--danger-text-color);
    font-size: .84rem;
}

/* A confirmation that stays out of the way until opened: removing a key, revoking an agenda address. */
.fb1e-confirm {
    margin-top: 12px;
}

.fb1e-confirm > .noord-digital-disclosure__summary {
    color: var(--soft-text-color);
    font-size: 12px;
}

.fb1e-danger.noord-digital-button {
    border-color: color-mix(in srgb, var(--danger-color) 45%, var(--border-color));
    color: var(--danger-text-color);
}

.fb1e-danger.noord-digital-button:hover,
.fb1e-danger.noord-digital-button:focus-visible {
    border-color: var(--danger-color);
    background: var(--danger-soft-color);
    color: var(--danger-text-color);
}

/* The agenda subscription: the new address once, with its copy button; the three ways to add it; the actions. */
.fb1e-feed {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.fb1e-feed .status-message {
    margin: 0 0 12px;
}

.fb1e-feed__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.fb1e-feed__url {
    min-width: 0;
    flex: 1 1 16rem;
    padding: 8px 12px;
    overflow-wrap: anywhere;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    background: var(--page-color);
    color: var(--soft-text-color);
    font-size: 11px;
    user-select: all;
}

.fb1e-feed__how {
    margin-top: 12px;
}

.fb1e-feed__steps {
    display: grid;
    gap: 10px;
    margin: 0;
}

.fb1e-feed__steps dt {
    color: var(--text-color);
    font-size: 12px;
    font-weight: 600;
}

.fb1e-feed__steps dd {
    margin: 2px 0 0;
    color: var(--soft-text-color);
    font-size: 12px;
    line-height: 1.6;
}

.fb1e-feed__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 16px;
    margin-top: 12px;
}

.fb1e-feed__actions form {
    margin: 0;
}

.fb1e-feed__actions .fb1e-confirm {
    margin-top: 6px;
}

.fb1e-feed__holders {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.fb1e-feed__holder-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fb1e-feed__holder {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
}

.fb1e-feed__holder form {
    margin: 0 0 0 auto;
}

.fb1e-feed__holder-name {
    color: var(--text-color);
    font-size: 12px;
    font-weight: 600;
}

/* Nieuwe klant: "Opzoeken" beside the KvK number, the reason or the answer under it. */
.fb1e-kvk-lookup {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.fb1e-kvk-lookup .noord-digital-dialog__control {
    min-width: 0;
    flex: 1;
}

.fb1e-kvk-lookup__button {
    flex-shrink: 0;
}

.fb1e-kvk-lookup__button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .6;
}

.fb1e-kvk-lookup__reason:empty {
    display: none;
}

.fb1e-kvk-lookup__reason.is-error {
    color: var(--danger-text-color);
}
/* endregion: fb1-e */

/* region: fb1-b (owner feedback round 1: task window foot, agenda dragging, ticking off, manual attention) */
/* The task window's foot: the save state on the left, Klaar on the right. A refusal reads in the danger colour. */
.fb1b-card-foot {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 16px;
}

.fb1b-card-foot__state {
    min-width: 0;
    margin: 0 auto 0 0;
    color: var(--muted-text-color);
    font-size: 12px;
    line-height: 1.5;
}

.fb1b-card-foot__state--failed {
    color: var(--danger-text-color);
}

.fb1b-card-foot__done {
    flex-shrink: 0;
}

/* The agenda (B2): a block is a link, so it shows the hand of a link; while it is dragged the whole page shows the
   closed hand, wherever the pointer is. The grips keep their resize cursor. A block waiting for the server is calm. */
.agenda__block[data-appointment] {
    cursor: pointer;
}

html.fb1b-agenda-grabbing,
html.fb1b-agenda-grabbing * {
    cursor: grabbing !important;
}

.agenda__block--dragging {
    transition: none;
}

.fb1b-agenda-block--saving {
    opacity: .7;
}

.fb1b-series-choice {
    display: flex;
    min-height: 0;
    flex-direction: column;
}

.fb1b-series-choice__text {
    margin: 0;
    color: var(--soft-text-color);
    font-size: 13px;
    line-height: 1.6;
}

/* "Aandacht nodig" (B4): the mark beside the name with its way to lift it, the window for the reason, the line above
   the "Vraagt aandacht" view, and the picker of dossiers to mark. */
.fb1b-attention {
    display: inline-flex;
    max-width: 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
}

.fb1b-attention__label {
    overflow-wrap: anywhere;
}

.fb1b-attention__clear {
    display: inline;
    margin: 0;
}

.fb1b-attention__clear .link-button {
    font-size: 11px;
}

.fb1b-attention-dialog__form {
    display: grid;
    gap: 14px;
}

.fb1b-attention-dialog__field {
    display: grid;
    gap: 6px;
}

.fb1b-attention-dialog__label {
    color: var(--muted-text-color);
    font-size: 11px;
}

.fb1b-attention-dialog__field .rec-input {
    padding: 10px 12px;
    font-size: 13px;
    resize: vertical;
}

.fb1b-attention-intro {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 16px;
    margin: 0 0 12px;
}

.fb1b-attention-intro__text {
    margin: 0;
    color: var(--muted-text-color);
    font-size: 12px;
    line-height: 1.5;
}

.fb1b-attention-intro__mark {
    flex-shrink: 0;
    font-size: 12px;
}

.fb1b-mark-picker {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fb1b-mark-picker__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    background: var(--surface-color);
    color: var(--text-color);
    font-size: 13px;
    text-decoration: none;
}

.fb1b-mark-picker__item:hover,
.fb1b-mark-picker__item:focus-visible {
    border-color: var(--accent-color);
}

.fb1b-mark-picker__name {
    min-width: 0;
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fb1b-mark-picker__meta,
.fb1b-mark-picker__none {
    flex-shrink: 0;
    margin: 0;
    color: var(--muted-text-color);
    font-size: 12px;
}

/* A text field under 16px makes Safari on a phone zoom the page in when the field gets focus, and it stays zoomed
   after the task is added with the quick line; the task window opened next then looks tiny beside it (B5). On a touch
   screen the fields of these flows are 16px. */
@media (pointer: coarse) {
    .workboard__add-input,
    .work-card .noord-digital-dialog__control,
    .work-card.noord-digital-dialog .noord-digital-date__input,
    #rec-quick .rec-input,
    .fb1b-attention-dialog__field .rec-input {
        font-size: 16px;
    }
}

/* Ticking a task off (board and record): the timing is tunable here. The box pops and draws its check, then the
   card or row fades and slides away, then its space closes up (optimistic.js reads --optimistic-fold-duration) so
   the tasks under it move up. About one and a half times the earlier speed, and a little heavier. */
:root {
    --fb1b-tick-draw: 300ms;
    --fb1b-tick-leave: 330ms;
    --optimistic-fold-duration: 260ms;
}

.workboard__checkbox.is-ticking,
.rec-check.is-ticking {
    border-color: var(--accent-moss);
    background: color-mix(in srgb, var(--accent-moss) 20%, var(--surface-color));
    animation: fb1b-tick-pop var(--fb1b-tick-draw) cubic-bezier(.34, 1.56, .64, 1);
}

.workboard__checkbox.is-ticking .icon,
.rec-check.is-ticking svg {
    opacity: 1;
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    animation: fb1b-tick-draw var(--fb1b-tick-draw) cubic-bezier(.65, 0, .35, 1) forwards;
}

.workboard__item.is-leaving,
.rec-work__item.is-leaving {
    animation: fb1b-tick-leave var(--fb1b-tick-leave) cubic-bezier(.4, 0, .2, 1) forwards;
}

@keyframes fb1b-tick-pop {
    45% {
        transform: scale(1.22);
    }

    75% {
        transform: scale(.96);
    }
}

@keyframes fb1b-tick-draw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fb1b-tick-leave {
    to {
        opacity: 0;
        transform: translateX(16px) scale(.98);
    }
}

/* The record's Taken tab: the line to put a task back, and the empty line once the last open task has left. */
.fb1b-rec-undo:not(:empty) {
    margin-top: 10px;
}

.fb1b-rec-undo > .workboard-undo {
    border: 1px solid color-mix(in srgb, var(--accent-moss) 25%, transparent);
    border-radius: 8px;
}

/* Only the newest check-off keeps its line, as on the board; the others are under Afgerond with their own way back. */
.fb1b-rec-undo > .workboard-undo ~ .workboard-undo {
    display: none;
}

.rec-work:not(:has(> .rec-work__item:not([hidden]))) > .rec-work__empty {
    display: list-item;
    list-style: none;
}

@media (prefers-reduced-motion: reduce) {
    .workboard__checkbox.is-ticking,
    .rec-check.is-ticking,
    .workboard__checkbox.is-ticking .icon,
    .rec-check.is-ticking svg,
    .workboard__item.is-leaving,
    .rec-work__item.is-leaving {
        animation: none;
        transition: none;
    }

    .workboard__checkbox.is-ticking,
    .rec-check.is-ticking,
    .rec-check.is-ticking svg {
        transition: none;
    }

    .workboard__checkbox.is-ticking .icon,
    .rec-check.is-ticking svg {
        stroke-dashoffset: 0;
    }

    .workboard__item.is-leaving,
    .rec-work__item.is-leaving {
        opacity: 0;
    }
}
/* endregion: fb1-b */

/* region: fb1-a (Koppelingen: laatste mailresultaat, geen recht; eigen rechten; mobiel nummer; niet gekoppelde accounts) */
/* Out of reach for this person: one quiet line with a lock that says why and who can. */
.fb1a-refusal {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 10px 0 0;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    background: var(--surface-muted-color);
    color: var(--soft-text-color);
    font-size: 12px;
    line-height: 1.5;
}

.fb1a-refusal .icon {
    width: 14px;
    height: 14px;
    margin-top: 2px;
    flex-shrink: 0;
}

/* The last mail the server took: the same small line as the account, with a tick in the success colour. */
.fb1a-mail-ok {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--success-text-color);
}

.fb1a-mail-ok .icon {
    width: 12px;
    height: 12px;
}

.mail-test button[aria-busy="true"] {
    cursor: progress;
    opacity: .7;
}

/* Mobiel nummer wijzigen: one line under the profile form that opens; the code field reads as six digits. */
.fb1a-phone {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.fb1a-phone .noord-digital-disclosure__summary .icon {
    width: 14px;
    height: 14px;
}

.fb1a-phone__form {
    margin-top: 8px;
}

.fb1a-phone__sent {
    margin: 0 0 12px;
    color: var(--soft-text-color);
    font-size: 12px;
    line-height: 1.5;
}

.fb1a-phone__code {
    max-width: 10rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: .3em;
}

.fb1a-phone__refusal {
    margin: 0 0 12px;
}

/* The question before a change of rights: what is lost in the danger colour, what is gained plain, then the note. */
.fb1a-confirm__line {
    margin: 0 0 8px;
    color: var(--text-color);
    font-size: 13px;
    line-height: 1.55;
}

.fb1a-confirm__line--lost {
    color: var(--danger-text-color);
}

.fb1a-confirm__note {
    margin: 8px 0 0;
    color: var(--muted-text-color);
    font-size: 12px;
    line-height: 1.5;
}

/* A right that is shown but cannot be switched here (Beheerder, the own role), and the own office role with its reason. */
.fb1a-locked {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: not-allowed;
}

.fb1a-locked .icon,
.fb1a-roles-note .icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.fb1a-roles-note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 10px;
}

.fb1a-own-role {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.fb1a-own-role [aria-disabled="true"] {
    cursor: not-allowed;
}

/* Gebruikers: an account that belongs to nothing says why under its name, and may be removed under the row. */
.fb1a-user__why {
    display: block;
    max-width: 40rem;
    line-height: 1.5;
}

.fb1a-user__delete {
    margin: -6px 0 12px 44px;
}

.fb1a-user__delete .icon {
    width: 12px;
    height: 12px;
}

/* A role that is shown, not offered (a portal account's, the own one), with its reason under it. */
.fb1a-fixed-role {
    display: grid;
    gap: 4px;
}

.fb1a-fixed-role__value {
    margin: 0;
    color: var(--text-color);
    font-size: 13px;
    cursor: not-allowed;
}

.fb1a-fixed-role__reason {
    text-align: left;
}

.fb1a-employee-fields {
    padding-left: 12px;
    border-left: 2px solid var(--border-color);
}
/* endregion: fb1-a */

/* region: hd1 (sign-in hardening: timed lockout in Gebruikers, office sign-in without a second factor) */
/* A timed lockout on the account page: when it ends by itself, above the box that opens it sooner. */
.hd1-lockout {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    background: var(--surface-muted-color);
    color: var(--soft-text-color);
    font-size: 12px;
    line-height: 1.5;
}

.hd1-lockout .icon {
    width: 14px;
    height: 14px;
    margin-top: 2px;
    flex-shrink: 0;
}
/* The moment the server wrote a log line, under the moment of the act (they differ for a queued act). */
.hd1-log-recorded {
    display: block;
    color: var(--soft-text-color);
    font-size: 11px;
}
/* endregion: hd1 */
/* region: sec (Instellingen › Beveiliging: signalen, incidentregister, 72-uursklok) */
/* The weight of a stored security signal, as a small label at the start of its row: high in the danger colour. */
.sec-severity {
    flex-shrink: 0;
    min-width: 5.5rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--warning-soft-color);
    color: var(--accent-hover-color);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-align: center;
    text-transform: uppercase;
}

.sec-severity--investigate,
.sec-severity--high {
    background: var(--danger-soft-color);
    color: var(--danger-text-color);
}

.sec-severity--high {
    outline: 1px solid var(--danger-color);
}

/* The time of a signal and the way to its incident, stacked at the end of the row. */
.sec-signal__aside {
    display: grid;
    justify-items: end;
    gap: 4px;
}

.sec-signal__aside form {
    margin: 0;
}

/* What the monitor did on its own about this signal (signed out, closed). */
.sec-signal__response {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 0;
    color: var(--danger-text-color);
    font-size: 13px;
    font-weight: 600;
}

.sec-signal__response .icon {
    width: 14px;
    height: 14px;
    flex: none;
}

.sec-incident__link {
    display: block;
    color: var(--text-color);
    text-decoration: none;
}

.sec-incident__link:hover,
.sec-incident__link:focus-visible {
    color: var(--accent-text-color);
    text-decoration: underline;
}

/* The 72 hours of an incident: calm while there is time, warm on the last day, red when past, green when settled. */
.sec-clock {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    color: var(--soft-text-color);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.sec-clock .icon {
    width: 14px;
    height: 14px;
}

.sec-clock--urgent {
    border-color: var(--warning-color);
    background: var(--warning-soft-color);
    color: var(--accent-hover-color);
}

.sec-clock--overdue {
    border-color: var(--danger-color);
    background: var(--danger-soft-color);
    color: var(--danger-text-color);
    font-weight: 600;
}

.sec-clock--done {
    border-color: color-mix(in srgb, var(--success-color) 45%, var(--border-color));
    background: var(--success-soft-color);
    color: var(--success-text-color);
}

/* The incident: the clock and who opened it above the form, the form in groups, the history as a list. */
.sec-back {
    margin: 0 0 12px;
}

.sec-back .icon {
    width: 12px;
    height: 12px;
    vertical-align: -1px;
}

.sec-incident-head {
    display: grid;
    gap: 6px;
    justify-items: start;
    margin: 4px 0 16px;
}

.sec-fieldset {
    display: grid;
    gap: 12px;
    min-width: 0;
    margin: 0;
    padding: 0 0 16px;
    border: 0;
    border-bottom: 1px solid var(--border-color);
}

.sec-fieldset > legend {
    margin-bottom: 8px;
    padding: 0;
}

.sec-textarea {
    min-height: 0;
    resize: vertical;
    line-height: 1.5;
}

.sec-proposal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 0;
    color: var(--soft-text-color);
    font-size: 12px;
}

.sec-proposal .icon {
    width: 14px;
    height: 14px;
}

.sec-history__detail {
    white-space: pre-line;
    overflow-wrap: anywhere;
}
/* endregion: sec */

/* region: cmp1 (privacy statement, employee notice, general terms, skip link, office details on the letter) */

/* WCAG 1.4.3: the text variants of the colours that carry text. The base colours stay for borders, fills and icons;
   where one of them colours text, the darker variant is used, at least 4.5:1 on the page, the surface and the raised
   layer (khaki 4.91, warning 4.86, accent 5.04, danger 5.14, success 5.36 on raised; more on page and surface). */
:root {
    --khaki-text-color: #6e5f3f;
    --warning-text-color: #8a5523;
    --accent-text-color: #6f5d2e;
    --danger-text-color: #9a4332;
    --success-text-color: #3e6349;
}

/* WCAG 2.4.1: out of sight until the keyboard reaches it, then the first thing on the page. */
.cmp1-skip {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 100;
    padding: 10px 14px;
    border-radius: var(--control-radius);
    background: var(--text-color);
    color: var(--surface-color);
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-160%);
}

.cmp1-skip:focus-visible {
    outline: 3px solid var(--accent-color);
    outline-offset: 2px;
    transform: none;
}

main#inhoud:focus {
    outline: none;
}

/* The legal texts at the foot of the office, the portal, the sign-in page and the pages apart. */
.cmp1-footer {
    padding: 16px 24px 32px;
}

@media (max-width: 64rem) {
    .cmp1-footer {
        padding-bottom: calc(96px + var(--edge-bottom));
    }
}

.cmp1-legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    justify-content: center;
    margin-top: 20px;
    font-size: 12px;
}

.cmp1-legal-links__link {
    color: var(--muted-text-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cmp1-legal-links__link:hover,
.cmp1-legal-links__link:focus-visible {
    color: var(--text-color);
}

/* A legal text: the concept mark and the version, then headings, paragraphs and lists. */
.cmp1-legal-page__card {
    max-width: 46rem;
}

.cmp1-doc__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: center;
    margin: 0 0 16px;
    color: var(--muted-text-color);
    font-size: 12px;
}

.cmp1-concept {
    padding: 3px 8px;
    border: 1px solid var(--warning-color);
    border-radius: 999px;
    background: var(--warning-soft-color);
    color: var(--text-color);
    font-weight: 600;
}

.cmp1-approved {
    color: var(--soft-text-color);
    font-weight: 600;
}

.cmp1-doc__heading {
    margin: 22px 0 6px;
    font-size: 15px;
}

.cmp1-doc__text,
.cmp1-doc__list {
    margin: 0 0 10px;
    color: var(--soft-text-color);
    line-height: 1.6;
}

.cmp1-doc__list {
    padding-left: 1.2rem;
}

/* Between signing in and the first page: the text in a box of its own height, the box and the button under it. */
.cmp1-acknowledge__text {
    max-height: min(52vh, 32rem);
    margin: 16px 0;
    padding: 4px 16px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    background: var(--page-color);
}

.cmp1-acknowledge__text:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.cmp1-acknowledge__leave {
    margin-top: 12px;
    text-align: center;
}

/* Instellingen › Privacy en voorwaarden. */
.cmp1-legal-card__body {
    display: grid;
    gap: 14px;
    justify-items: start;
}

.cmp1-legal-card__editor {
    width: 100%;
}

.cmp1-legal-card__text {
    width: 100%;
    min-height: 18rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.5;
}

.cmp1-legal-card__file {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

/* The general terms on the signing page of the engagement letter. */
.cmp1-terms {
    display: grid;
    gap: 8px;
}

.cmp1-terms__read {
    margin: 0;
}

.cmp1-terms__link {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    color: var(--text-color);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Who the office is, under the signatures of the engagement letter. */
.cmp1-letter-office {
    display: grid;
    gap: 2px;
    margin: 24px 0 0;
    color: var(--muted-text-color);
    font-size: 12px;
}
/* endregion: cmp1 */

/* region: cmp2 (Bewaring: bewijs van ondertekening, niet vernietigen, looptijd geheimhouding; Bewaartermijnen; kantoorarchief) */
.cmp2-retention {
    display: grid;
    gap: 16px;
    max-width: 880px;
}

.cmp2-retention__title {
    margin: 0;
    font-size: 22px;
}

.cmp2-retention__intro {
    margin: 0;
    color: var(--soft-text-color);
}

.cmp2-retention__back {
    justify-self: start;
}

.cmp2-card {
    display: grid;
    gap: 12px;
}

.cmp2-card--held {
    border-color: var(--warning-color);
    background: var(--warning-soft-color);
}

.cmp2-evidence,
.cmp2-archive,
.cmp2-archive__files {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cmp2-evidence__document,
.cmp2-archive__entry {
    display: grid;
    gap: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.cmp2-evidence__name,
.cmp2-archive__name {
    margin: 0;
    font-weight: 600;
}

.cmp2-evidence__list {
    display: grid;
    gap: 8px;
    margin: 0;
}

.cmp2-evidence__signature dt {
    font-weight: 600;
}

.cmp2-evidence__signature dd {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 0;
    color: var(--soft-text-color);
    font-size: 14px;
}

.cmp2-evidence__trail,
.cmp2-evidence__note,
.cmp2-row__meta {
    margin: 0;
    color: var(--soft-text-color);
    font-size: 14px;
}

.cmp2-hash {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--muted-text-color);
    overflow-wrap: anywhere;
}

.cmp2-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.cmp2-form__field {
    display: grid;
    gap: 4px;
}

.cmp2-form__field--wide {
    flex: 1 1 100%;
}

.cmp2-form__number {
    width: 120px;
}

.cmp2-form__error {
    flex: 1 1 100%;
    margin: 0;
    color: var(--danger-text-color);
    font-size: 14px;
}

.cmp2-hold__state,
.cmp2-hold__reason,
.cmp2-hold__who {
    margin: 0;
}

.cmp2-hold__reason {
    white-space: pre-line;
}

.cmp2-terms {
    display: grid;
    gap: 12px;
    margin: 0;
}

.cmp2-terms__item dt {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-weight: 600;
}

.cmp2-terms__term {
    color: var(--accent-text-color);
    white-space: nowrap;
}

.cmp2-terms__item dd {
    margin: 2px 0 0;
    color: var(--soft-text-color);
    font-size: 14px;
}

.cmp2-row {
    flex-wrap: wrap;
    gap: 4px 12px;
}

.cmp2-evidence-link {
    font-size: 13px;
}
/* endregion: cmp2 */

/* region: cmp3 (data-subject rights, special data, registers) */
/* The declaration on every delivery in the seller's and the party's portal: a checkbox with its sentence, above the file. */
.cmp3-declaration {
    display: grid;
    gap: .35rem;
    margin-bottom: 1rem;
    text-align: left;
}

.cmp3-declaration__label {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    color: var(--text-color);
    font-size: 14px;
    line-height: 1.45;
    cursor: pointer;
}

/* The box in the house style, not the browser's own (test round 5 October: "ziet er raar uit"): a rounded square with
   the theme's border, filled with the accent and a white tick when checked. */
.cmp3-declaration__box {
    position: relative;
    display: inline-grid;
    flex-shrink: 0;
    place-content: center;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1.5px solid var(--muted-text-color);
    border-radius: 6px;
    background: var(--surface-color);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color .15s ease-out, border-color .15s ease-out;
}

.cmp3-declaration__box::after {
    width: 5px;
    height: 10px;
    margin-top: -2px;
    border: solid var(--surface-color);
    border-width: 0 2px 2px 0;
    content: "";
    opacity: 0;
    transform: rotate(45deg) scale(.6);
    transition: opacity .12s ease-out, transform .12s ease-out;
}

.cmp3-declaration__box:hover {
    border-color: var(--accent-color);
}

.cmp3-declaration__box:checked {
    border-color: var(--accent-color);
    background: var(--accent-color);
}

.cmp3-declaration__box:checked::after {
    opacity: 1;
    transform: rotate(45deg) scale(1);
}

.cmp3-declaration__box:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Inside the field for a file the declaration keeps its distance from the dashed edge. */
.portal-upload > .cmp3-declaration {
    margin: 0;
    padding: 16px 20px 4px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
}

.cmp3-declaration__help {
    margin: 0 0 0 calc(20px + .6rem);
    color: var(--muted-text-color);
    font-size: 13px;
}

.por31-failed__actions .cmp3-declaration__label {
    font-size: 13px;
}

/* Instellingen › Verwerkingen: the actions in the head of a register card, the rows, a concept row, removing a row. */
.cmp3-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.cmp3-register__link {
    color: var(--text-color);
    text-decoration: none;
}

.cmp3-register__link:hover,
.cmp3-register__link:focus-visible {
    color: var(--accent-text-color);
    text-decoration: underline;
}

.cmp3-pill--concept {
    margin-left: .4rem;
    background: var(--warning-soft-color);
    color: var(--accent-hover-color);
}

.cmp3-delete-row {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

/* Instellingen › Inzageverzoeken: the form of one mark below its explanation, and the erase button in the danger colour. */
.cmp3-mark__form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .5rem;
    margin-top: .6rem;
}

.cmp3-mark__form .noord-digital-input-field {
    flex: 1 1 16rem;
}

.cmp3-erase__button {
    border-color: var(--danger-color);
    color: var(--danger-text-color);
}

.cmp3-erase__button:hover,
.cmp3-erase__button:focus-visible {
    background: var(--danger-soft-color);
}

/* The record of a dossier: who may not be mailed or given a new vault, and who objected. */
.cmp3-privacy-banner {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: .5rem 0;
    padding: .6rem .8rem;
    border: 1px solid var(--danger-color);
    border-radius: 6px;
    background: var(--danger-soft-color);
    color: var(--text-color);
    font-size: 14px;
}

.cmp3-privacy-banner__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The seller's and the party's "Klopt er iets niet?" below the access report. */
.cmp3-rectify {
    margin-top: .75rem;
}
/* endregion: cmp3 */

/* region: fb2-a (owner feedback round 2 on the touch board: whole column bar, customer panel over the list,
   frequent tasks, terms download, back link on the public pages, account kinds in Gebruikers) */

/* Takenbord: the whole bar of a column opens the customer. The name stays the one real link; its ::after covers the
   bar, so a finger anywhere on it lands on the link. Anything interactive added to the bar later sits above it. */
.workboard__heading--link {
    position: relative;
    cursor: pointer;
    transition: background-color .15s ease-out;
}

.workboard__heading--link .workboard__company::after {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 4px;
    content: "";
}

.workboard__heading--link :is(a, button, input, select, summary):not(.workboard__company) {
    position: relative;
    z-index: 1;
}

.workboard__heading--link:hover {
    background: color-mix(in srgb, var(--surface-muted-color) 55%, var(--surface-color));
}

.workboard__heading--link:hover .workboard__company {
    color: var(--accent-text-color);
}

/* The focus ring goes round the whole bar: the area the finger can press. */
.workboard__heading--link .workboard__company:focus-visible {
    outline: none;
}

.workboard__heading--link .workboard__company:focus-visible::after {
    outline: 2px solid var(--accent-color);
    outline-offset: -3px;
}

/* Klantenbestand: the record is a panel over the list, and the list stays where it was underneath.
   The page content is a size container (container-type: inline-size, "page"), and size containment also makes it the
   containing block of position: fixed. The sheet of the record (fixed, inset 0) was therefore only as large as the
   content box of <main>, which holds nothing in flow: the backdrop shrank to a grey bar under the top bar, the rest
   beside the panel was bare page, and a tap there missed the backdrop, so only the cross closed the panel. While a
   record sheet is on the page, <main> is no container; the panel measures its own container. */
:root {
    --scrim-color: rgba(43, 38, 31, .34);
    --scrim-blur: 6px;
}

main.page-content:has(.rec-sheet) {
    container-type: normal;
}

.rec-sheet__backdrop {
    background: var(--scrim-color);
    -webkit-backdrop-filter: blur(var(--scrim-blur));
    backdrop-filter: blur(var(--scrim-blur));
}

/* Without translucency the list is dimmed by the full overlay instead of a blur. */
@media (prefers-reduced-transparency: reduce) {
    .rec-sheet__backdrop {
        background: var(--overlay-color);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* The list behind the panel is a picture of where the advisor was: it does not react to the pointer. */
.rec-behind {
    pointer-events: none;
    user-select: none;
}

/* The whole row of a customer is the tap target. The name is the one link (one tab stop); a click anywhere else in the
   row follows that link from the page's script. Not a stretched ::after over the row: Safari does not make a table row
   the containing block of an absolutely positioned child, so every row's cover lay over the whole table and the last
   row's cover won, opening the same customer whatever row was clicked. */
.customers__row:hover {
    cursor: pointer;
}

.customers__row .customers__name.pressable:active {
    transform: none;
}

.customers__row:active,
.customers__row:has(.customers__name:active) {
    background: var(--surface-muted-color);
}

.customers__row:has(.customers__name:focus-visible) {
    outline: 2px solid var(--accent-color);
    outline-offset: -2px;
}

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

/* Nieuwe taak: the titles the office uses most, as chips a finger can press (44px). The row scrolls, it never wraps
   into a wall (round 9: rows with choices slide). */
.fb2a-frequent {
    display: grid;
    min-width: 0;
    gap: 6px;
}

.fb2a-frequent__row {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
    scrollbar-width: none;
}

.fb2a-frequent__row::-webkit-scrollbar {
    display: none;
}

.fb2a-frequent__chip {
    flex-shrink: 0;
    min-height: 44px;
    max-width: 18rem;
    padding: 0 14px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--surface-color);
    color: var(--text-color);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition-property: transform, background-color, border-color, color;
    transition-duration: 160ms;
}

.fb2a-frequent__chip:hover {
    border-color: var(--accent-color);
}

.fb2a-frequent__chip:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.fb2a-frequent__chip:active {
    transform: scale(.97);
    transition-duration: 70ms;
}

.fb2a-frequent__chip[aria-pressed="true"] {
    border-color: var(--accent-color);
    background: var(--surface-muted-color);
    color: var(--accent-text-color);
}

/* The task window's foot: checking off sits quietly before Klaar. */
.fb2a-check-off {
    margin: 0;
}

.fb2a-check-off .noord-digital-button {
    min-height: 44px;
}

/* The legal texts: "Terug" on top of the card, a finger wide, and the button to save the text above it. */
.fb2a-legal-back {
    margin: -8px 0 16px;
}

.fb2a-legal-back__link {
    min-height: 44px;
    padding-right: 8px;
}

.fb2a-legal-back__link:focus-visible {
    border-radius: 4px;
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Two classes, so the 44 points outweigh the button component's stylesheet, which loads after this file. */
.noord-digital-button.fb2a-legal-download {
    min-height: 44px;
    margin: 4px 0 16px;
}

/* Gebruikers: every kind of account its own colour (owner feedback round 2), from the muted accents: a dark fill with
   white initials for the avatar, and a soft fill with the dark colour as text for the tag. Both reach 4.5:1
   (TextContrastTests). Colour is never the only sign: the tag names the role. The application has one light theme. */
:root {
    --kind-employee-color: #414f68;
    --kind-employee-soft-color: #e6e9ef;
    --kind-customer-color: #2a5c5f;
    --kind-customer-soft-color: #e2eeee;
    --kind-prospect-color: #6c3e64;
    --kind-prospect-soft-color: #f1e6ef;
    --kind-admin-color: #7c6021;
    --kind-admin-soft-color: #f3ecdc;
    --kind-on-fill-color: #ffffff;
}

.fb2a-kind--employee {
    --kind-color: var(--kind-employee-color);
    --kind-soft-color: var(--kind-employee-soft-color);
}

.fb2a-kind--customer {
    --kind-color: var(--kind-customer-color);
    --kind-soft-color: var(--kind-customer-soft-color);
}

.fb2a-kind--prospect {
    --kind-color: var(--kind-prospect-color);
    --kind-soft-color: var(--kind-prospect-soft-color);
}

.fb2a-kind--admin {
    --kind-color: var(--kind-admin-color);
    --kind-soft-color: var(--kind-admin-soft-color);
}

.set30-person__avatar.fb2a-kind--employee,
.set30-person__avatar.fb2a-kind--customer,
.set30-person__avatar.fb2a-kind--prospect,
.set30-person__avatar.fb2a-kind--admin {
    background: var(--kind-color);
    color: var(--kind-on-fill-color);
}

.fb2a-role-tag {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 1px 8px;
    border: 1px solid color-mix(in srgb, var(--kind-color) 30%, transparent);
    border-radius: 999px;
    background: var(--kind-soft-color);
    color: var(--kind-color);
    font-size: 11px;
    font-weight: 600;
    vertical-align: 1px;
    white-space: nowrap;
}

/* The filter on the kind of account: links side by side that slide, never wrap (round 9), a finger high. */
.fb2a-kinds {
    margin: 4px 0 12px;
}

.fb2a-kinds__list {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0;
    padding: 0 0 2px;
    overflow-x: auto;
    overflow-y: hidden;
    list-style: none;
    scrollbar-width: none;
}

.fb2a-kinds__list::-webkit-scrollbar {
    display: none;
}

.fb2a-kinds__list > li {
    flex-shrink: 0;
}

.fb2a-kinds__item {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--surface-color);
    color: var(--soft-text-color);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition-property: transform, background-color, border-color, color;
    transition-duration: 160ms;
}

.fb2a-kinds__item:hover {
    border-color: var(--accent-color);
    color: var(--text-color);
}

.fb2a-kinds__item:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.fb2a-kinds__item[aria-current="page"] {
    border-color: var(--text-color);
    background: var(--text-color);
    color: var(--surface-color);
}

.fb2a-kinds__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--kind-color);
}

.fb2a-kinds__item[aria-current="page"] .fb2a-kinds__dot {
    box-shadow: 0 0 0 2px var(--surface-color);
}

.fb2a-kinds__count {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
/* endregion: fb2-a */

/* BERICHTEN (test round 5 October): the thread between the office and the seller or a party, in the portal and on the
   record. The other side on the left, the own messages on the right in the accent's soft tone; the newest at the bottom,
   next to the field. Long words wrap; a line break the writer typed stays. */
.msg-thread {
    display: grid;
    gap: 16px;
}

.msg-thread__list {
    display: grid;
    gap: 10px;
    max-height: min(60vh, 560px);
    margin: 0;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
}

.msg-thread--office .msg-thread__list {
    max-height: 360px;
}

.msg-thread__item {
    max-width: min(560px, 85%);
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 14px 14px 14px 4px;
    background: var(--surface-color);
    justify-self: start;
}

.msg-thread__item--own {
    border-color: color-mix(in srgb, var(--accent-color) 30%, var(--border-color));
    border-radius: 14px 14px 4px 14px;
    background: color-mix(in srgb, var(--accent-color) 10%, var(--surface-color));
    justify-self: end;
}

.msg-thread__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 4px;
    color: var(--muted-text-color);
    font-size: 11px;
}

.msg-thread__meta strong {
    color: var(--text-color);
    font-size: 12px;
    font-weight: 600;
}

.msg-thread__text {
    margin: 0;
    color: var(--text-color);
    font-size: 14px;
    line-height: 1.55;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.msg-thread__empty {
    justify-self: stretch;
}

.msg-compose {
    display: grid;
    gap: 8px;
}

.msg-compose__label {
    color: var(--text-color);
    font-size: 13px;
    font-weight: 600;
}

.msg-compose__field {
    width: 100%;
    min-height: 88px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    background: var(--surface-color);
    color: var(--text-color);
    font: inherit;
    font-size: 16px;
    resize: vertical;
}

.msg-compose--office .msg-compose__field {
    min-height: 64px;
    font-size: 14px;
}

.msg-compose__field:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 1px;
}

.msg-compose__help {
    margin: 0;
    color: var(--muted-text-color);
    font-size: 12px;
}

.msg-compose__actions {
    display: flex;
    justify-content: flex-end;
}

.rec-party__messages {
    margin-top: 12px;
}

/* Touch screens (the touchboard, an iPad, a phone): every control a finger taps is at least 44 by 44 CSS pixels
   (WCAG 2.5.5, Apple's and Google's guidance); with a mouse nothing changes. tools/e2e/specs/92-devices measures it.
   Agenda blocks keep the height of their time: their size is the duration, and the day opens bigger with a tap. */
@media (pointer: coarse) {
    /* The floor for every control, whatever a layout rule of its own says: !important on purpose, it is a minimum. */
    :is(button, summary, select, textarea, input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="range"], [type="file"]), [role="button"], [role="tab"], .noord-digital-button):not(.visually-hidden, .workboard__checkbox, .rec-check) {
        min-height: 44px !important;
    }

    .app-side__link,
    .app-side__search,
    .rec-menu__trigger,
    .rec-close,
    .app-topbar__search,
    .app-topbar__new,
    .app-profile__trigger,
    .rec-note__delete-button,
    .agenda__segment,
    .app-bell__button,
    .portal-bar__bell,
    .portal-profile__trigger,
    .agenda__zoom {
        min-width: 44px;
        min-height: 44px;
    }

    .app-side__brand,
    .portal-side__brand,
    .app-profile__item,
    .portal-profile__item,
    .portal-side__link,
    .portal-side__call,
    .agenda__day-link,
    .agenda__select,
    .rec-work__main,
    .workboard-today__item,
    .portal-choice,
    select {
        min-height: 44px;
    }

    .settings-tabs__tab,
    .rec-tabs__tab,
    .customers__view {
        display: flex;
        align-items: center;
        min-height: 44px;
    }

    /* The mark in the top bar of a phone or tablet leads home: a finger-sized link around the same 32 px mark. */
    .app-topbar__mark,
    .portal-bar__mark {
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        place-items: center;
    }

    /* The tick box of a task stays a small square on the card (24 px on a touch screen); around it lies an invisible
       area of a finger's size that belongs to the same button and ends where the title begins (the gap of the card),
       so the card keeps its layout, a tap beside the box still ticks and a tap on the title still opens the task. */
    .workboard__checkbox,
    .rec-check {
        position: relative;
        width: 24px;
        height: 24px;
    }

    .workboard__checkbox::after,
    .rec-check::after {
        position: absolute;
        inset: -11px;
        content: "";
    }

    /* A finished task under Afgeronde taken: the title a finger high (one line, still cut off with an ellipsis), and
       room around the box that puts the task back, so its invisible finger area stays inside its own row. */
    .rec-done__item {
        padding: 4px 0;
    }

    .rec-done__title {
        line-height: 44px;
    }

    /* A switch or a tick box is tapped through its label: the label is the finger's target. */
    .prf-switch-row__text,
    .cmp3-declaration__label {
        min-height: 44px;
        align-content: center;
        align-items: center;
    }

    /* Inline by nature: a link or summary of one line of text gets the height of a finger around that line. */
    .agenda__segment,
    .link-button,
    .cmp1-legal-links__link,
    .workboard__company,
    .set30-link,
    .rec-head__link,
    .portal-objection__summary {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* Stukken: the files chosen to deliver, in a list with a preview and a cross, until Opslaan sends them. */
.portal-staged {
    display: grid;
    gap: 10px;
    padding: 0 16px 16px;
}

.portal-staged__title {
    color: var(--text-color);
    font-size: 13px;
    font-weight: 600;
}

.portal-staged__help {
    color: var(--soft-text-color);
    font-size: 12px;
    line-height: 1.6;
}

.portal-staged__list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.portal-staged__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--panel-radius);
    background: var(--surface-color);
}

.portal-staged__item--done {
    border-color: color-mix(in srgb, var(--success-text-color) 35%, transparent);
}

.portal-staged__item--failed {
    border-color: color-mix(in srgb, var(--danger-text-color) 40%, transparent);
}

.portal-staged__preview {
    display: grid;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    overflow: hidden;
    place-items: center;
    border-radius: 6px;
    background: var(--page-color);
}

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

.portal-staged__type {
    color: var(--khaki-text-color);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
}

.portal-staged__body {
    display: grid;
    min-width: 0;
    flex: 1;
    gap: 4px;
}

.portal-staged__name {
    overflow: hidden;
    color: var(--text-color);
    font-size: 13px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-staged__view {
    color: var(--accent-text-color);
}

.portal-staged__done {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--success-text-color);
}

.portal-staged__done .icon {
    width: 12px;
    height: 12px;
}

.portal-staged__remove {
    display: grid;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: var(--muted-text-color);
    cursor: pointer;
}

.portal-staged__remove:hover {
    border-color: var(--border-color);
    color: var(--danger-text-color);
}

.portal-staged__remove:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent-color) 28%, transparent);
    outline-offset: 2px;
}

.portal-staged__remove .icon {
    width: 16px;
    height: 16px;
}

@media (pointer: coarse) {
    .portal-staged__remove {
        width: 44px;
        height: 44px;
    }
}

/* The reminder of the seller's open non-disclosure agreement, over every page of his portal (_NdaReminder). */
.nda-reminder {
    display: grid;
    gap: 20px;
}

.nda-reminder__text {
    color: var(--soft-text-color);
    font-size: 14px;
    line-height: 1.65;
}

.nda-reminder__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

/* A message the office has not read yet, on the tab of the record that holds it (Contact, Gegadigden). */
.rec-tabs__new {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 6px;
    border-radius: 50%;
    background: var(--accent-color);
    vertical-align: middle;
}

/* Something came in while the page was open (_UnreadWatch, unread.js): a notice at the bottom, over the page. */
.unread-notice {
    position: fixed;
    z-index: 60;
    right: 16px;
    bottom: 16px;
    display: flex;
    max-width: min(440px, calc(100vw - 32px));
    align-items: center;
    gap: 12px;
    padding: 12px 12px 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--panel-radius);
    background: var(--surface-color);
    box-shadow: 0 12px 32px rgb(0 0 0 / 14%);
}

.unread-notice[hidden] {
    display: none;
}

.unread-notice__icon {
    display: flex;
    color: var(--accent-text-color);
}

.unread-notice__icon .icon {
    width: 18px;
    height: 18px;
}

.unread-notice__text {
    flex: 1;
    color: var(--text-color);
    font-size: 14px;
    line-height: 1.5;
}

.unread-notice__open {
    flex-shrink: 0;
}

.unread-notice__close {
    display: grid;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted-text-color);
    cursor: pointer;
}

.unread-notice__close:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent-color) 28%, transparent);
    outline-offset: 2px;
}

.unread-notice__close .icon {
    width: 16px;
    height: 16px;
}

@media (pointer: coarse) {
    .unread-notice__close {
        width: 44px;
        height: 44px;
    }
}

/* Below the width where the portal's tabs sit at the bottom, the notice stands above them. */
@media (max-width: 63.99rem) {
    body:has(.portal-tabs) .unread-notice {
        bottom: calc(env(safe-area-inset-bottom, 0px) + 84px);
    }
}

/* App installeren (_InstallApp.cshtml): a button that only shows where the browser can install, and the steps for Safari. */
.shell-auth__install {
    margin: 12px 0 0;
    text-align: center;
}

.shell-auth__install .link-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.shell-auth__install .icon {
    width: 14px;
    height: 14px;
}

.install-app {
    display: grid;
    gap: 12px;
}

.install-app__text {
    margin: 0;
    color: var(--soft-text-color);
    line-height: 1.625;
}

.install-app__steps {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 20px;
    line-height: 1.625;
}

.install-app__actions {
    display: flex;
    justify-content: flex-end;
}

/* Last, so no button style of the places it stands in shows it before install.js does. */
.shell-auth__install [data-install-app][hidden],
[data-install-app][hidden] {
    display: none;
}

/* Verwijderde dossiers (Instellingen, the Noord-admin only): name, when and by whom, and the day it is gone for good. */
.deleted-row .settings-row__main {
    display: grid;
    gap: 2px;
}

.deleted-row__meta {
    color: var(--soft-text-color);
    font-size: 13px;
}

/* Klaarzetten, a date of its own per item (feedback of 9 October): the arrow sits on the right inside the card, the
   chosen day beside it, and the calendar opens under the card. */
.prep-items__entry {
    position: relative;
}

.prep-items__entry > .prep-item {
    padding-right: 56px;
}

.prep-item__term {
    position: absolute;
    top: 6px;
    right: 6px;
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--soft-text-color);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.prep-item__term svg {
    width: 16px;
    height: 16px;
    transition: transform .15s ease-out;
}

.prep-item__term:hover,
.prep-item__term:focus-visible {
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
    color: var(--accent-text-color);
}

.prep-item__term.is-open svg {
    transform: rotate(90deg);
}

.prep-item__term.is-set {
    color: var(--accent-text-color);
}

.prep-items__entry:has(.prep-item__term.is-set) > .prep-item {
    padding-right: 104px;
}

.prep-item__own {
    display: grid;
    justify-items: start;
    gap: 6px;
    margin: 6px 0 2px 16px;
    max-width: 280px;
}

/* Where the templates are kept, under the template list of Klaarzetten. */
.prep-templates-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    margin-top: 6px;
}

.prep-templates-link svg {
    width: 14px;
    height: 14px;
}

/* Klaargezet terugzien (feedback of 9 October): what was prepared today carries "Nieuw"; what the customer finished
   waits under one closed line below the open work. */
.rec-tag--new {
    margin-left: 8px;
    background: color-mix(in srgb, var(--accent-color) 16%, transparent);
    color: var(--accent-text-color);
    vertical-align: 2px;
}

.rec-done {
    margin-top: 12px;
}

.rec-done .rec-lines__title {
    color: var(--soft-text-color);
}

/* In Klaarzetten, what is open at the customer reads in full: the title wraps instead of being cut off. */
.prep-open__list li span:first-child {
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
}

/* The appointment, quiet (feedback of 9 October): the note first in a block of its own, who is there below it, and
   what is open at the customer and whose agenda it stands in each behind one line. */
.cal30-note {
    display: grid;
    gap: 8px;
}

.cal30-note__text {
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--surface-color);
    color: var(--text-color);
    font-size: 14px;
    line-height: 1.6;
}

.cal30-note__text p {
    margin: 0;
    white-space: pre-line;
}

.cal30-note__text p + p {
    margin-top: 6px;
}

.cal30-more {
    border-top: 1px solid var(--border-color);
    padding-top: 4px;
}

.cal30-more .cal30-tasks,
.cal30-more .cal30-choices {
    margin-top: 4px;
}

/* The vault now or later in Nieuw dossier (request of 10 October): two choices under one heading; the chosen one
   carries the accent. */
.new-dossier__choice {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

.new-dossier__choice > legend {
    margin-bottom: 8px;
    padding: 0;
}

.new-dossier__option:has(input[type="radio"]:checked) {
    border-color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 8%, var(--surface-color));
}

/* A vault that was never mailed: one sentence and the button that mails it. */
.rec-vault__first {
    display: grid;
    justify-items: start;
    gap: 10px;
}

.rec-vault__first .noord-digital-button svg {
    width: 14px;
    height: 14px;
}