/*
 * The panel's own corrections to the framework's styles, kept to what an
 * accessibility check found rather than a theme.
 *
 * A table cell showing a placeholder ("-", "Geen") used the framework's
 * lightest grey, which reads at a contrast of 2.6:1 on white and fails the
 * 4.5:1 the level AA rule asks for. A placeholder is content, not
 * decoration: "Geen" is the answer to the question the column asks. The
 * same grey sits under a placeholder on a record's page ("Zonder
 * onderwerp"), so both are lifted together.
 */
.fi-ta-placeholder,
.fi-in-placeholder {
    color: rgb(82 82 91);
}

.dark .fi-ta-placeholder,
.dark .fi-in-placeholder {
    color: rgb(161 161 170);
}

/*
 * The sidebar navigation scrolls when it is taller than the window, and
 * the bar it shows while doing so sits beside the menu as a permanent
 * grey stripe on most desktops. The office asked for it to go. The list
 * still scrolls with the wheel, a swipe or the keyboard; only the bar is
 * hidden, and the gutter the framework reserves for it with it.
 */
.fi-sidebar-nav {
    scrollbar-width: none;
    scrollbar-gutter: auto;
    -ms-overflow-style: none;
    /* Without a bar, a cut-off list looks finished; the fade says it goes on. */
    mask-image: linear-gradient(to bottom, black calc(100% - 2rem), transparent);
}

.fi-sidebar-nav::-webkit-scrollbar {
    display: none;
}

/*
 * A card's heading gets a ground of its own, so the eye finds where one
 * block ends and the next begins on a page that stacks several. A light
 * blue, quiet enough to leave the slate primary colour the only accent.
 */
.fi-section:not(.fi-section-not-contained):not(.fi-aside) > .fi-section-header {
    background-color: rgb(239 246 255);
    border-start-start-radius: inherit;
    border-start-end-radius: inherit;
}

/* The framework's grey for a heading's description reads at 4.4:1 on the
   tint, under the 4.5:1 the level AA rule asks for; one step darker. */
.fi-section:not(.fi-section-not-contained):not(.fi-aside) > .fi-section-header .fi-section-header-description {
    color: rgb(82 82 91);
}

.dark .fi-section:not(.fi-section-not-contained):not(.fi-aside) > .fi-section-header .fi-section-header-description {
    color: rgb(161 161 170);
}

/* A collapsed card is its heading alone, so the ground rounds off below too. */
.fi-section.fi-collapsed:not(.fi-section-not-contained):not(.fi-aside) > .fi-section-header {
    border-end-start-radius: inherit;
    border-end-end-radius: inherit;
}

.dark .fi-section:not(.fi-section-not-contained):not(.fi-aside) > .fi-section-header {
    background-color: rgb(39 39 42);
    border-bottom: 1px solid rgb(63 63 70);
}

/*
 * The help articles. The package marks them "prose" for a typography
 * plugin nobody here installs, so headings, paragraphs and lists rendered
 * as one grey block a colleague could not read. These are the rules that
 * plugin would have brought, written by hand and kept to what an article
 * needs: a heading that stands out, a paragraph with air, a list with its
 * marks, a table with its lines.
 */
.gu-kb-article {
    max-width: none;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: rgb(39 39 42);
}

.dark .gu-kb-article {
    color: rgb(228 228 231);
}

.gu-kb-article h1 {
    font-size: 1.5rem;
    line-height: 1.3;
    font-weight: 700;
    margin: 0 0 1rem;
}

.gu-kb-article h2 {
    font-size: 1.125rem;
    line-height: 1.4;
    font-weight: 600;
    margin: 1.75rem 0 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgb(228 228 231);
}

.dark .gu-kb-article h2 {
    border-top-color: rgb(63 63 70);
}

.gu-kb-article h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 1.25rem 0 0.375rem;
}

.gu-kb-article p {
    margin: 0 0 0.875rem;
}

.gu-kb-article ul,
.gu-kb-article ol {
    margin: 0 0 0.875rem;
    padding-inline-start: 1.5rem;
}

.gu-kb-article ul {
    list-style: disc;
}

.gu-kb-article ol {
    list-style: decimal;
}

.gu-kb-article li {
    margin: 0.25rem 0;
}

.gu-kb-article li > p {
    margin: 0;
}

.gu-kb-article strong {
    font-weight: 600;
    color: rgb(24 24 27);
}

.dark .gu-kb-article strong {
    color: rgb(250 250 250);
}

.gu-kb-article a {
    color: rgb(37 99 235);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.dark .gu-kb-article a {
    color: rgb(147 197 253);
}

.gu-kb-article code {
    font-size: 0.875em;
    padding: 0.1rem 0.3rem;
    border-radius: 0.25rem;
    background-color: rgb(244 244 245);
}

.dark .gu-kb-article code {
    background-color: rgb(39 39 42);
}

.gu-kb-article blockquote {
    margin: 0 0 0.875rem;
    padding-inline-start: 1rem;
    border-inline-start: 3px solid rgb(212 212 216);
    color: rgb(82 82 91);
}

.gu-kb-article table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1rem;
    font-size: 0.875rem;
}

.gu-kb-article th,
.gu-kb-article td {
    text-align: start;
    vertical-align: top;
    padding: 0.375rem 0.5rem;
    border-bottom: 1px solid rgb(228 228 231);
}

.gu-kb-article th {
    font-weight: 600;
    background-color: rgb(250 250 250);
}

.dark .gu-kb-article th,
.dark .gu-kb-article td {
    border-bottom-color: rgb(63 63 70);
}

.dark .gu-kb-article th {
    background-color: rgb(39 39 42);
}

.gu-kb-article hr {
    margin: 1.5rem 0;
    border: 0;
    border-top: 1px solid rgb(228 228 231);
}

/* The modal and the help page both repeat the article's title as its
   first heading while their own header already carries it, so the
   article's is not needed; and the heading that then comes first should
   not open on a rule. */
.gu-kb-article-modal > h1:first-child,
.gu-kb-article-full > h1:first-child {
    display: none;
}

.gu-kb-article-modal > h1:first-child + h2,
.gu-kb-article-full > h1:first-child + h2 {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/*
 * The cross that clears a chosen value in a select is drawn 16 pixels
 * square, under the 24 the level AA target-size rule asks for, and sits
 * next to the chevron on a form a packer works through in a hurry. The
 * button grows to 24; the cross inside stays the size it was.
 */
.fi-select-input-value-remove-btn {
    width: 1.5rem;
    height: 1.5rem;
    mask-size: 1rem;
    -webkit-mask-size: 1rem;
}

/*
 * The help package keeps every cell of an article's table on one line, so
 * a table with a long column scrolls sideways on a tablet and the box it
 * scrolls in has no tab stop. Cells wrap instead, a run of joined words
 * (the columns of an import file, written as one code) breaking where it
 * must, so the table fits the screen it is read on.
 */
/* One selector heavier than the package's, which wins on order otherwise. */
.gu-kb-article table tbody {
    white-space: normal;
}

.gu-kb-article td code {
    overflow-wrap: anywhere;
}

/*
 * The top bar stays put while the page scrolls under it. The framework
 * keeps a form field clear of it when the browser scrolls to an error, and
 * nothing else: a link or a button reached by keyboard from further down
 * was scrolled to the very top edge and sat under the bar, focused and
 * unseen. The document keeps that much clear for whatever it scrolls to.
 */
html {
    scroll-padding-top: 5rem;
}

/*
 * Once a photo has been uploaded the upload field laid a green wash over
 * the whole preview and turned the panel behind the file green, which read
 * as a green screen rather than as the photo just chosen. The photo itself
 * is the confirmation: the wash goes and the panel keeps the field's own
 * grey, while the file's name and the remove button stay as they were.
 */
.filepond--image-preview-overlay-success {
    display: none;
}

[data-filepond-item-state='processing-complete'] .filepond--item-panel {
    background-color: #64605e;
}