/* 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-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-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-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-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-label {
    display: block;
    margin-top: 2px;
    color: var(--muted-text-color);
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.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;
}

.app-side__portfolio-list {
    display: grid;
    gap: 8px;
    margin: 12px 0 0;
    padding: 0 12px;
}

.app-side__portfolio-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.app-side__portfolio-row dt {
    color: var(--soft-text-color);
    font-size: 12px;
    white-space: nowrap;
}

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

.app-side__portfolio-note {
    margin: 12px 0 0;
    padding: 0 12px;
    color: var(--muted-text-color);
    font-size: 11px;
    line-height: 1.625;
}

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

    .app-side__brand {
        justify-content: flex-start;
        padding-inline: 8px;
    }

    .app-side__link,
    .app-side__search {
        justify-content: flex-start;
        padding-inline: 12px;
    }

    .app-side .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-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-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-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-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-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-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-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-color);
}

.validation-summary:empty {
    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-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-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-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-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-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. */
.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-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-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-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-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-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-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-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-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-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-color);
}

.task-card--overdue .task-card__term {
    background: color-mix(in srgb, var(--danger-color) 10%, var(--surface-color));
    color: var(--danger-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-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-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;
}

.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-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-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-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-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-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-color);
}

.signal--quiet,
.signal--waitingforcustomer,
.signal--waitingforcounterparty {
    border-color: color-mix(in srgb, var(--accent-color) 45%, var(--border-color));
    color: var(--accent-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-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-color);
}

.board__card--overdue .board__title {
    color: var(--danger-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-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-color);
}

.letter__status {
    margin: .5rem 0 0;
    color: var(--accent-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. */
.agenda__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

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

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

.agenda__back {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .375rem .625rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--accent-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;
}

.agenda__nav {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.agenda__nav-arrow,
.agenda__nav-today {
    display: inline-flex;
    align-items: center;
    padding: .375rem .5rem;
    color: var(--muted-text-color);
    text-decoration: none;
    transition: color .15s ease-out;
}

.agenda__nav-arrow:hover {
    color: var(--accent-color);
}

.agenda__nav-today {
    padding-inline: .75rem;
    border-inline: 1px solid var(--border-color);
    color: var(--text-color);
    font-size: 12px;
    font-weight: 600;
}

.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-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-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-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);
}

.agenda__hour span {
    position: absolute;
    top: -.5rem;
    right: .5rem;
    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-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;
}

.agenda__now-time {
    position: absolute;
    right: .375rem;
    z-index: 2;
    transform: translateY(-9px);
    padding: 2px .375rem;
    border-radius: 999px;
    background: #ff453a;
    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. */
@view-transition {
    navigation: auto;
}

.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-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-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-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-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-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--priority {
    background: var(--danger-soft-color);
    color: var(--danger-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-color);
}

.workboard__card--nearing .workboard__term {
    color: var(--warning-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-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-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-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-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-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-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-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-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) {
    .workboard-today__list {
        display: grid;
        gap: 12px;
        padding: 0;
        overflow: visible;
    }

    .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-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-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-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--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-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-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-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-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-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-color);
}

.shell-auth__signed-out-title {
    margin: 0;
    color: var(--accent-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-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-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-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-color);
}

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

.record-pill--none,
.record-pill--success {
    background: var(--success-soft-color);
    color: var(--success-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-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-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; }
}

@keyframes rec-slide-in {
    from { opacity: 0; 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-color);
}

.rec-signal--closed {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.rec-signal--quiet {
    color: var(--accent-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-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-color);
}

.rec-head__portal--overdue {
    color: var(--danger-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-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-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: hidden;
    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;
}

.rec-menu--up .rec-menu__list {
    top: auto;
    bottom: calc(100% + 6px);
}

@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-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-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-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--priority {
    background: var(--danger-soft-color);
    color: var(--danger-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-color);
}

.rec-work__item--critical .rec-work__due,
.rec-work__item--overdue .rec-work__due {
    color: var(--danger-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-color);
}

.rec-due--overdue {
    color: var(--danger-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-color);
}

.rec-state--danger {
    background: var(--danger-soft-color);
    color: var(--danger-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-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-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-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-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-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) {
    .rec-edit {
        grid-template-columns: 1fr 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-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-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-color);
}

.rec-icon-button--danger:hover,
.rec-icon-button--danger:focus-visible {
    color: var(--danger-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-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 {
    min-width: 0;
}

.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-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;
    align-content: start;
    gap: 24px;
    min-width: 0;
}

.prep__main > .validation-summary:empty {
    display: none;
}

.prep__proposal {
    margin: 0;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: color-mix(in srgb, var(--page-color) 40%, transparent);
    color: var(--soft-text-color);
    font-size: 11px;
    line-height: 1.625;
}

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

.prep__label--spaced {
    margin-top: 20px;
}

.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.is-open {
    opacity: .5;
    cursor: not-allowed;
}

.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__open {
    color: var(--accent-color);
    font-size: 11px;
}

.prep-item__why {
    display: block;
    margin-top: 4px;
    color: var(--muted-text-color);
    font-size: 11px;
    line-height: 1.625;
}

.prep-item__reason {
    display: inline-flex;
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--surface-muted-color);
    color: var(--muted-text-color);
    font-size: 10px;
    line-height: 1.2;
}

.prep-item__reason.is-on {
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
    color: var(--accent-color);
}

.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-color);
}

/* The three ways to a document. */
.prep-ways {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

@container (min-width: 36rem) {
    .prep-ways {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.prep-way {
    position: relative;
    display: grid;
    align-content: start;
    padding: 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 {
    margin-top: 8px;
    color: var(--text-color);
    font-size: 13px;
    font-weight: 600;
}

.prep-way span {
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.625;
}

.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-color);
}

.prep-way.is-on strong {
    color: var(--accent-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-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;
    gap: 8px;
    margin-top: 10px;
    padding-bottom: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}

.prep-chips::-webkit-scrollbar {
    display: none;
}

.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-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;
}

.prep__more {
    margin-top: 0;
}

/* How the customer sees it: the customer's own light screen, with the colour of each kind as a stripe. */
.prep__side {
    display: grid;
    align-content: start;
    gap: 16px;
    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-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-color);
    font-size: 10px;
    font-weight: 600;
}

.prep-preview__why {
    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;
    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-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-color);
    font-size: 13px;
    font-weight: 600;
}

.letter__count.is-ready {
    color: var(--success-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-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-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-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-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-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-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-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-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-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-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-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-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-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-color);
}

.settings-danger-link .icon {
    width: 12px;
    height: 12px;
}

.settings-remove:hover {
    color: var(--danger-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-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-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-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-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-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-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-color);
}

.settings-state--warning {
    color: var(--warning-color);
}

.settings-state--failed {
    color: var(--danger-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-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-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-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-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-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-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-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-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-color);
}

.set30-pill--danger {
    background: var(--danger-soft-color);
    color: var(--danger-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-color);
}

.portal-doc__state--failed {
    background: var(--danger-soft-color);
    color: var(--danger-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-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-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-color);
}

.portal-upload__state .icon {
    width: 14px;
    height: 14px;
}

.portal-upload__state--done {
    background: var(--success-soft-color);
    color: var(--success-color);
}

.portal-upload__state--failed {
    background: var(--danger-soft-color);
    color: var(--danger-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-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--section > :not(.portal-back) {
    max-width: 672px;
}

.portal-back__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--khaki-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-color);
}

.portal-save__line.save-bar__error .icon {
    color: var(--danger-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-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-color);
}

.portal-response__mark--yes {
    background: var(--success-soft-color);
    color: var(--success-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-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-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-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-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-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;
}

/* 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-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-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-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-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-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-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-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: 24px;
    width: auto;
}

/* 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-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-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-new .icon {
    width: 14px;
    height: 14px;
}

.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;
}

.cal30-sheet {
    width: 100%;
    max-width: 768px;
    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__body {
    display: grid;
    gap: 20px;
    padding: 20px;
}

.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-color);
}

.cal30-sheet__foot-actions {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.cal30-cancel {
    padding: 8px 14px;
    border-radius: var(--control-radius);
    color: var(--soft-text-color);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s ease-out, color .15s ease-out;
}

.cal30-cancel:hover,
.cal30-cancel:focus-visible {
    background: var(--surface-muted-color);
    color: var(--text-color);
}

.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-form-grid {
    display: grid;
    gap: 16px;
}

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

.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--small {
    display: inline-block;
    width: auto;
    margin-top: 0;
    padding: 6px 10px;
    font-size: 12px;
}

.cal30-control.is-invalid {
    border-color: var(--danger-color);
    color: var(--danger-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-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-dimmed .cal30-control {
    background: var(--page-color);
    color: var(--muted-text-color);
}

.cal30-duration {
    margin-top: 16px;
}

.cal30-choices {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.cal30-choices form {
    margin: 0;
}

.cal30-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;
}

.cal30-choice:hover {
    border-color: var(--khaki-color);
}

.cal30-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;
}

.cal30-until {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted-text-color);
    font-size: 12px;
}

.cal30-more {
    padding-top: 0;
    border-top: 0;
}

.cal30-more > .noord-digital-disclosure__summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 16px;
    padding-inline: 0;
}

.cal30-more > .noord-digital-disclosure__summary::after {
    display: none;
}

.cal30-more > .noord-digital-disclosure__summary:hover,
.cal30-more > .noord-digital-disclosure__summary:focus-visible {
    background: none;
}

.cal30-more__now {
    color: var(--muted-text-color);
    font-weight: 400;
}

.cal30-more__open {
    color: var(--accent-color);
}

.cal30-more > .noord-digital-disclosure__summary:hover .cal30-more__open {
    color: var(--accent-hover-color);
}

.cal30-more__content {
    gap: 16px;
}

.cal30-agendas {
    margin: 0;
    padding: 0;
    border: 0;
}

.cal30-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 6px;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    color: var(--muted-text-color);
    font-size: 12px;
    cursor: pointer;
    transition: border-color .15s ease-out, background-color .15s ease-out, color .15s ease-out;
}

.cal30-chip input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.cal30-chip .cal30-legend__dot {
    width: 12px;
    height: 12px;
}

.cal30-chip:hover {
    border-color: var(--khaki-color);
}

.cal30-chip:has(input:checked) {
    border-color: transparent;
    background: color-mix(in srgb, var(--block-accent) 14%, var(--surface-color));
    color: var(--block-accent);
    font-weight: 600;
}

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

/* 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-cover {
    margin: -12px 0 0;
    color: var(--muted-text-color);
    font-size: 11px;
}

.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-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-columns {
    display: grid;
    gap: 24px;
}

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

.cal30-know,
.cal30-tasks,
.cal30-people,
.cal30-plain {
    display: grid;
    gap: 6px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.cal30-know li {
    padding-left: 10px;
    border-left: 1px solid var(--border-color);
    color: var(--soft-text-color);
    font-size: 12px;
    line-height: 1.6;
}

.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-color);
}

.cal30-tasks__term--late {
    color: var(--danger-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-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-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-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-color);
    font-size: 12px;
}

.cal30-recorded .icon {
    width: 14px;
    height: 14px;
}

.cal30-edit {
    width: 100%;
    padding-top: 0;
    border-top: 0;
}

.cal30-edit > .noord-digital-disclosure__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 0;
}

.cal30-edit > .noord-digital-disclosure__summary::after {
    display: none;
}

.cal30-edit > .noord-digital-disclosure__summary:hover,
.cal30-edit > .noord-digital-disclosure__summary:focus-visible {
    background: none;
}

.cal30-edit__text {
    color: var(--muted-text-color);
    font-weight: 400;
}

.cal30-edit__button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    background: var(--surface-color);
    color: var(--text-color);
    transition: border-color .15s ease-out, color .15s ease-out;
}

.cal30-edit > .noord-digital-disclosure__summary:hover .cal30-edit__button {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.cal30-edit__button .icon {
    width: 14px;
    height: 14px;
}

.cal30-edit__form {
    margin-top: 16px;
}

@media (max-width: 40rem) {
    .cal30-sheet__head,
    .cal30-sheet__body,
    .cal30-sheet__foot {
        padding-inline: 16px;
    }

    .cal30-sheet-page {
        align-items: stretch;
    }
}
/* === /region: agenda === */