html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ---------------------------------------------------------------------------
   One blue, named once.

   Bootstrap ships its own blue (#0d6efd); Taskplan's is a little deeper. Fixing
   that per rule is how a screen ends up with two blues that nobody chose: the
   Save button was ours while its hover state was Bootstrap's, every checkbox
   ticked in Bootstrap blue, and the account navigation was Bootstrap's
   throughout. The values below are the whole of Taskplan's blue, and everything
   drawn in it reads them from here.

   Where Bootstrap exposes a custom property, the override sets that property
   rather than the rule -- hover, focus, active and disabled then keep working
   exactly as they were built to, in our colour. Only where Bootstrap hard-codes
   a value (a ticked checkbox, a focused border) is a rule overridden, and those
   are marked below.
   --------------------------------------------------------------------------- */
:root {
    /* The fill: buttons, the page you are on, a ticked box. */
    --tp-blue: #1b6ec2;
    --tp-blue-border: #1861ac;

    /* Hover and active, shaded from the fill by the same steps Bootstrap uses
       (15% and 20% toward black), so a button behaves as a Bootstrap button. */
    --tp-blue-hover: #175ea5;
    --tp-blue-hover-border: #144e8a;
    --tp-blue-active: #16589b;
    --tp-blue-active-border: #124981;

    /* 15% toward white -- Bootstrap wants the focus ring as bare rgb numbers. */
    --tp-blue-tint-rgb: 61, 132, 203;

    /* Text, and a shade darker than the fill on purpose: this colour carries
       words on white, where the fill alone reads thin. */
    --tp-link: #006bb7;
    --tp-link-hover: #1861ac;

    /* Backgrounds that hint rather than state: a hovered pager cell. */
    --tp-blue-wash: #e9f1fa;
    --tp-blue-wash-border: #c9dcf0;

    /* Half-way to white, the same relation Bootstrap's #86b7fe has to its own
       blue, so a focused field reads as focused and not as broken. */
    --tp-blue-soft: #8db6e0;
}

a, .btn-link {
    color: var(--tp-link);
}

.btn-primary {
    --bs-btn-bg: var(--tp-blue);
    --bs-btn-border-color: var(--tp-blue-border);
    --bs-btn-hover-bg: var(--tp-blue-hover);
    --bs-btn-hover-border-color: var(--tp-blue-hover-border);
    --bs-btn-active-bg: var(--tp-blue-active);
    --bs-btn-active-border-color: var(--tp-blue-active-border);
    --bs-btn-disabled-bg: var(--tp-blue);
    --bs-btn-disabled-border-color: var(--tp-blue-border);
    --bs-btn-focus-shadow-rgb: var(--tp-blue-tint-rgb);
}

/* The ring stays its own brighter blue. A focus indicator is not decoration --
   it has to be findable against everything around it, including our own fill --
   so it is deliberately not one of the tokens above. The select was missing from
   this list and drew Bootstrap's ring while every field beside it drew ours. */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-select:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* Hard-coded in Bootstrap, so overridden as rules rather than as properties. */
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--tp-blue-soft);
}

.form-check-input:checked {
    background-color: var(--tp-blue);
    border-color: var(--tp-blue-border);
}

/* The account pages navigate with pills. Left alone they draw Bootstrap's blue
   twice over -- once for the links, once for the pill you are standing on -- a
   hand's width from buttons in ours. The sidebar is a plain `.nav` and keeps its
   own colours, which is why this is scoped to `.nav-pills`. */
.nav-pills {
    --bs-nav-link-color: var(--tp-link);
    --bs-nav-link-hover-color: var(--tp-link-hover);
    --bs-nav-pills-link-active-bg: var(--tp-blue);
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Bootstrap's pager ships in its own blue, which is a different blue from the one
   the buttons above the list use. Two blues on one screen read as two systems, so
   the pager is told to use ours: the link colour for the numbers and the primary
   button's fill for the page you are on. Set through Bootstrap's own variables
   rather than by overriding its rules, so hover, focus and disabled keep working
   as they were built to. */
.pagination {
    --bs-pagination-color: var(--tp-link);
    --bs-pagination-hover-color: var(--tp-link-hover);
    --bs-pagination-hover-bg: var(--tp-blue-wash);
    --bs-pagination-hover-border-color: var(--tp-blue-wash-border);
    --bs-pagination-focus-color: var(--tp-link-hover);
    --bs-pagination-focus-bg: var(--tp-blue-wash);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(27, 110, 194, .25);
    --bs-pagination-active-bg: var(--tp-blue);
    --bs-pagination-active-border-color: var(--tp-blue-border);
}

/* ---------------------------------------------------------------------------
   Accent marks (D-057)

   Global rather than scoped, and that is the point: the same colours are drawn
   on the dark sidebar, on the white work list and in the picker. Three copies in
   three component stylesheets would be three things to keep in step, which is
   the fault the structure page taught us. This is a token set, not one
   component's private styling.

   Twelve hues in two tones. Every value clears 3.6:1 against BOTH grounds -- the
   sidebar's dark blue and a white page -- because each lightness was chosen by
   maximising the *worse* of its two contrasts. Twelve rather than sixteen
   because the wheel is not perceptually even: the hues are spent where the eye
   can use them, five between red and lime and three from purple to pink, and
   only three across the whole green-to-cyan span where everything reads as "some
   green".

   Each class publishes its colour twice: as background-color for anything that
   is simply a coloured shape, and as --tp-mark for anything whose own rule wins
   on specificity and has to read the value instead -- the masked icons in the
   tree.
   --------------------------------------------------------------------------- */

:root {
    --tp-accent-red: #eb4c4c;
    --tp-accent-red-soft: #c66c6c;
    --tp-accent-orange: #d86518;
    --tp-accent-orange-soft: #b87447;
    --tp-accent-amber: #ae7b13;
    --tp-accent-amber-soft: #a2813f;
    --tp-accent-yellow: #938610;
    --tp-accent-yellow-soft: #8f8638;
    --tp-accent-lime: #679310;
    --tp-accent-lime-soft: #728f38;
    --tp-accent-green: #119c34;
    --tp-accent-green-soft: #3b9752;
    --tp-accent-teal: #109388;
    --tp-accent-teal-soft: #39938b;
    --tp-accent-cyan: #148fb8;
    --tp-accent-cyan-soft: #428fa9;
    --tp-accent-blue: #4783eb;
    --tp-accent-blue-soft: #6184c2;
    --tp-accent-purple: #bf55ec;
    --tp-accent-purple-soft: #ab6cc6;
    --tp-accent-magenta: #e935bc;
    --tp-accent-magenta-soft: #c365ab;
    --tp-accent-pink: #eb477e;
    --tp-accent-pink-soft: #c46887;
}

/* The rail beside a heading or a list row. Always rendered, transparent when
   there is no mark, so that names line up whether or not somebody has coloured
   something -- the same rule as the note's empty checkbox slot.

   Not used in the tree: there the rows are indented, so a rail at the left edge
   floats away from the thing it belongs to. The mark goes on the icon instead. */
.tp-accent {
    flex: 0 0 auto;
    align-self: stretch;
    width: 3px;
    min-height: 1rem;
    border-radius: 2px;
    background-color: transparent;
}

/* No margin of its own: every place it is used is a flex row with a gap, and a
   margin on top of that would space this one child differently from the rest. */

/* Beside a page heading, where 3px next to 2rem of type would read as a slip of
   the mouse rather than a mark. */
.tp-accent-lg {
    width: 5px;
    border-radius: 3px;
}

.tp-accent-red { background-color: var(--tp-accent-red); --tp-mark: var(--tp-accent-red); }
.tp-accent-red-soft { background-color: var(--tp-accent-red-soft); --tp-mark: var(--tp-accent-red-soft); }
.tp-accent-orange { background-color: var(--tp-accent-orange); --tp-mark: var(--tp-accent-orange); }
.tp-accent-orange-soft { background-color: var(--tp-accent-orange-soft); --tp-mark: var(--tp-accent-orange-soft); }
.tp-accent-amber { background-color: var(--tp-accent-amber); --tp-mark: var(--tp-accent-amber); }
.tp-accent-amber-soft { background-color: var(--tp-accent-amber-soft); --tp-mark: var(--tp-accent-amber-soft); }
.tp-accent-yellow { background-color: var(--tp-accent-yellow); --tp-mark: var(--tp-accent-yellow); }
.tp-accent-yellow-soft { background-color: var(--tp-accent-yellow-soft); --tp-mark: var(--tp-accent-yellow-soft); }
.tp-accent-lime { background-color: var(--tp-accent-lime); --tp-mark: var(--tp-accent-lime); }
.tp-accent-lime-soft { background-color: var(--tp-accent-lime-soft); --tp-mark: var(--tp-accent-lime-soft); }
.tp-accent-green { background-color: var(--tp-accent-green); --tp-mark: var(--tp-accent-green); }
.tp-accent-green-soft { background-color: var(--tp-accent-green-soft); --tp-mark: var(--tp-accent-green-soft); }
.tp-accent-teal { background-color: var(--tp-accent-teal); --tp-mark: var(--tp-accent-teal); }
.tp-accent-teal-soft { background-color: var(--tp-accent-teal-soft); --tp-mark: var(--tp-accent-teal-soft); }
.tp-accent-cyan { background-color: var(--tp-accent-cyan); --tp-mark: var(--tp-accent-cyan); }
.tp-accent-cyan-soft { background-color: var(--tp-accent-cyan-soft); --tp-mark: var(--tp-accent-cyan-soft); }
.tp-accent-blue { background-color: var(--tp-accent-blue); --tp-mark: var(--tp-accent-blue); }
.tp-accent-blue-soft { background-color: var(--tp-accent-blue-soft); --tp-mark: var(--tp-accent-blue-soft); }
.tp-accent-purple { background-color: var(--tp-accent-purple); --tp-mark: var(--tp-accent-purple); }
.tp-accent-purple-soft { background-color: var(--tp-accent-purple-soft); --tp-mark: var(--tp-accent-purple-soft); }
.tp-accent-magenta { background-color: var(--tp-accent-magenta); --tp-mark: var(--tp-accent-magenta); }
.tp-accent-magenta-soft { background-color: var(--tp-accent-magenta-soft); --tp-mark: var(--tp-accent-magenta-soft); }
.tp-accent-pink { background-color: var(--tp-accent-pink); --tp-mark: var(--tp-accent-pink); }
.tp-accent-pink-soft { background-color: var(--tp-accent-pink-soft); --tp-mark: var(--tp-accent-pink-soft); }


/* --- the navigation marks ------------------------------------------------ */

/* One mark per kind, drawn rather than typed. Inline data URIs and not an icon
   font: the sidebar must render on the first paint, and a font that arrives
   late leaves a row of empty boxes behind it. Four marks -- workspace, area,
   project, calendar -- because those are the four things the sidebar lists.

   Global rather than scoped to WorkspaceTree, where these began: the calendar
   list is its own component, and a scoped rule reaches only the markup written
   in the component it belongs to.

   Masked, not painted. The shape is a mask and the colour is a background,
   which is what lets a node's accent (D-057) tint its own icon: the tree is
   indented, so a colour rail at the left edge of a row floats away from the
   thing it belongs to, and the icon is where the eye already is. Without an
   accent it falls back to a plain off-white.

   The fallback is read from a variable rather than written here, and that is
   not decoration: this selector carries two classes and outranks the single
   `.tp-accent-red`. Setting background-color here would win every time and no
   icon would ever take a colour. Reading `--tp-mark` inverts that -- the accent
   class sets the variable, this rule uses it. */
.nav-item .tp-icon {
    display: inline-block;
    flex: 0 0 auto;
    width: .85rem;
    height: .85rem;
    margin-right: .4rem;

    /* Pulled down onto the optical middle of the line. An empty inline-block
       sits with its *bottom* on the baseline, which puts its centre about
       .47em above it while the text's centre is nearer .3em -- so it rides
       high by roughly the difference. A relative `top` was the first attempt
       and is the wrong tool: it moves the painted box and leaves the layout
       where it was.

       Trimmed from -.17em, which was the arithmetic answer and about two
       pixels too low in practice: the text's optical middle sits higher than
       its geometric one, because lower case has more weight above the
       baseline than below it. */
    vertical-align: -.08em;
    background-color: var(--tp-mark, rgba(255, 255, 255, .8));
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Two blocks of unequal height: the workspace is the whole place, not one
   thing inside it. A shade larger than the node marks, because it stands
   beside an uppercase label and would otherwise read as an afterthought. */
.nav-item .tp-icon-workspace {
    width: .95rem;
    height: .95rem;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M2 14V3h5v11H2zm6 0V7h6v7H8z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M2 14V3h5v11H2zm6 0V7h6v7H8z'/%3E%3C/svg%3E");
}

/* A folder, because a Bereich is defined by what is inside it and by nothing
   else. */
.nav-item .tp-icon-container {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M1.5 12.5V4a1 1 0 0 1 1-1h3.2l1.3 1.6H13.5a1 1 0 0 1 1 1v6.9a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M1.5 12.5V4a1 1 0 0 1 1-1h3.2l1.3 1.6H13.5a1 1 0 0 1 1 1v6.9a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

/* A target: a project is the one node with an aim and an end. Outline against
   the folder's solid shape, so the two are told apart by silhouette and not
   only by detail -- at this size detail is gone. */
.nav-item .tp-icon-project {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='none' stroke='%23ffffff' stroke-width='1.7'/%3E%3Ccircle cx='8' cy='8' r='2.4' fill='%23ffffff'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='none' stroke='%23ffffff' stroke-width='1.7'/%3E%3Ccircle cx='8' cy='8' r='2.4' fill='%23ffffff'/%3E%3C/svg%3E");
}

/* A calendar: an outlined sheet with a solid band across the top and two tabs
   above it. Outline where the folder is solid and square where the project is
   round, so the three are told apart by silhouette alone -- at .85rem the
   detail inside any of them is gone. */
.nav-item .tp-icon-calendar {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.4 1v1.8M11.6 1v1.8' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round'/%3E%3Crect x='1.6' y='2.6' width='12.8' height='11.8' rx='1.6' fill='none' stroke='%23ffffff' stroke-width='1.6'/%3E%3Cpath d='M2.4 6.2h11.2v1.7H2.4z' fill='%23ffffff'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.4 1v1.8M11.6 1v1.8' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round'/%3E%3Crect x='1.6' y='2.6' width='12.8' height='11.8' rx='1.6' fill='none' stroke='%23ffffff' stroke-width='1.6'/%3E%3Cpath d='M2.4 6.2h11.2v1.7H2.4z' fill='%23ffffff'/%3E%3C/svg%3E");
}


/* --- the picker ---------------------------------------------------------- */

/* Deliberately WITHOUT a background-color of its own. The first version set one
   to transparent here, and because .tp-swatch and .tp-accent-red have the same
   specificity the later rule won: every colour rendered as an empty circle. A
   base class that resets the property its modifiers exist to set is a trap. */
.tp-swatch {
    display: inline-block;
    width: 1.35rem;
    height: 1.35rem;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 50%;
    cursor: pointer;
}

.tp-swatch:hover {
    transform: scale(1.12);
}

/* The chosen one is named by a ring outside it, not by a tick drawn on top:
   a mark on the swatch would hide the very colour it is confirming. */
.tp-swatch.tp-chosen {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #495057;
}

/* "No colour" has to look like an absence and still be a target. */
.tp-swatch-none {
    background-color: #fff;
    background-image: linear-gradient(45deg, transparent 45%, #adb5bd 45%, #adb5bd 55%, transparent 55%);
}

.tp-swatch-sm {
    width: 1rem;
    height: 1rem;
}

/* A popover, not a row of two dozen circles across the form. The grid is twelve
   wide and two deep: the top row is the vivid tones, the bottom the soft ones,
   so a hue sits in the same column in both. */
.tp-accent-popover {
    position: absolute;
    z-index: 1051;
    top: calc(100% + .35rem);
    left: 0;
    padding: .6rem;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: .5rem;
    background-color: #fff;
}

.tp-accent-grid {
    display: grid;
    grid-template-columns: repeat(12, 1.35rem);
    gap: .4rem;
}

/* Closing by clicking anywhere else, without a line of JavaScript: an invisible
   sheet under the popover and over everything else. */
.tp-accent-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
}

/* ---------------------------------------------------------------------------
   The vendor's theme, tuned to Taskplan's (D-028).

   Loaded after the Kendo theme on purpose -- see App.razor. Both declare on
   `:root`, so this only works second.

   Almost the whole palette is derived: Kendo computes hover, active, subtle and
   the rest with oklch() from one variable. Setting that one to Bootstrap's own
   blue re-tunes twenty shades at once, and there is nothing to keep in step by
   hand. That is why this block is four lines and not forty.
   --------------------------------------------------------------------------- */
:root {
    /* Taskplan's own blue, not Bootstrap's. `--tp-blue` is a little deeper than
       `#0d6efd`, which is exactly why the picker's "Übernehmen" and the page's
       "Speichern" still read as two different blues after the first attempt --
       the vendor had been given Bootstrap's value rather than ours.

       Referenced rather than copied: it is declared a few lines above in this same
       file, and a custom property substitutes textually, so Kendo's
       oklch(from var(--kendo-color-primary) ...) sees `#1b6ec2` and derives the
       rest from it. One blue in one place. */
    --kendo-color-primary: var(--tp-blue);

    /* One notch down from the vendor's 1rem. Kendo sizes padding and heights from
       its font size, so this is what makes a picker and a "+ Neuer Termin" sit
       beside our own btn-sm instead of towering over them -- Bootstrap's small
       button is 0.875rem, and now so is theirs. */
    --kendo-font-size: 0.875rem;
    --kendo-font-family: inherit;
}

/* The scheduler keeps the page's own radius, so a calendar does not read as a
   different application pasted into the middle of one. */
.k-scheduler,
.k-datepicker,
.k-datetimepicker,
.k-timepicker,
.k-calendar {
    border-radius: var(--bs-border-radius, 0.375rem);
}

/* The vendor's links -- the month name in a picker's header, "Heute" -- come from
   its own link colour rather than from the primary, so they need saying as well.
   Taskplan's link blue is a shade lighter than its button blue on purpose (see
   `--tp-link` above); the two must not be collapsed into one. */
:root {
    --kendo-color-link: var(--tp-link);
    --kendo-color-link-hover: var(--tp-link-hover);
}

/* The week-number column in a picker's calendar, quieter than the days beside it (D-076).

   The vendor already draws it a size down and in the subtle colour, and it was still read as a
   date -- because at that size the only difference from the day next to it is the colour, and a
   column of numbers on the left of a calendar is a column of numbers. Smaller again, and lighter,
   so it reads as a label on the row rather than as one of the days in it.

   Here and not in a scoped stylesheet: the picker hangs its calendar in a popup appended to the
   body, outside every component's scope. Same reason the theme tuning above lives here (D-077). */
.k-calendar-td.k-alt {
    font-size: .7rem;
    font-weight: 400;
    opacity: .65;
}

/* The sidebar shell, shared by both layouts that draw one: the application's `MainLayout` and the
   `AccountLayout` the Identity pages got when they were taken out of the workspace boundary (D-083).
   Unscoped for exactly that reason -- a component stylesheet reaches only its own component, and the
   alternative was a second copy of every rule below.

   The sidebar runs from the blue behind the navigation down into the tone of its own title bar.

   It used to end in the template's purple, which was a colour Taskplan never chose and never used
   anywhere else: nothing in the palette, the logo or the accents answers it, so the bottom half of
   the sidebar was the one place on screen speaking a different language.

   #03173e is not a new colour either -- it is exactly what the header above already is. That strip is
   the same blue under `rgba(0, 0, 0, .4)`, and 60% of rgb(5, 39, 103) is rgb(3, 23, 62). So the
   sidebar begins and ends in the same two tones the brand row already puts side by side, and the long
   fade between them is the only thing in it. */
.page {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Scoped to `.page` rather than left as a bare `main`, because this file is global and `main` is a
   tag anybody may reach for later. */
.page main {
    flex: 1;
}

/* Below the breakpoint a fixed row of four sits at the bottom of the screen (D-098). Without this the
   last line of every page is behind it, and the page that suffers most is the one somebody scrolled
   to the end of -- which is the one they were reading. */
@media (max-width: 767.98px) {
    .page main {
        padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
    }

    /* The top bar stays put while the page moves under it (D-098).

       On the sidebar and not on the `.top-row` inside it, which is where one would reach first and
       where it does nothing: below the breakpoint the sidebar is a short block at the top of the
       column, so a bar stuck to the top of *it* is a bar that leaves with it after two lines of
       scrolling. Sticking the block itself is what keeps the brand, the hamburger and the bell on
       screen -- and with the drawer open the whole drawer stays with them, which is what somebody
       reading a long tree wants anyway.

       Under the bottom row's z-index rather than over it: the two never overlap, and if a popover
       ever makes them, the row a thumb is aiming at should win. */
    .sidebar {
        position: sticky;
        top: 0;
        z-index: 1025;
    }
}

.sidebar {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #03173e 70%);
}

@media (min-width: 768px) {
    .page {
        flex-direction: row;
    }

    /* `position: sticky` creates a stacking context, which is what made the notification panel
       disappear behind the page: anything the sidebar contains is then ordered *inside* it, however
       high its own z-index, and the sidebar itself sits at level auto -- below `main`, which follows
       it in the document. Lifting the sidebar puts its popovers over the content again. Kept under
       1050, so the colour picker's own backdrop and popover still cover it while they are open. */
    .sidebar {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
        z-index: 1040;
    }
}

/* The editor's two colour tools (D-096).

   Here rather than in `RichTextField.razor.css`, for the reason the calendar rules above give: the
   palette hangs in a popup appended to the body, outside every component's scope. The toolbar half is
   written here too, so the two halves of one control are not in two files.

   The picker buttons sit outside the button groups on purpose -- they open a palette rather than
   toggling -- but that left them on white while everything around them had a grey field, and the pair
   read as two disabled controls rather than two tools. Same ground, same shape as the groups beside
   them. */
.k-editor-toolbar .k-colorpicker,
.k-editor-toolbar .k-picker {
    background-color: var(--kendo-color-base, #f5f5f5);
    border-radius: var(--kendo-border-radius-md, .25rem);
}

/* And the palette itself as circles, because Taskplan already has a colour picker -- the accent on an
   item -- and two pickers in one product that disagree about what a colour looks like are two
   products. The measurements are `.tp-swatch`'s, deliberately: the same 1.35rem, the same hairline,
   the same lift on hover.

   Both spellings of the tile class are given. The vendor renamed it between theme generations, and a
   selector that silently stops matching would leave squares behind with nothing to explain them. */
.k-colorpalette-tile,
.k-color-palette-tile {
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .15);
}

.k-colorpalette-tile:hover,
.k-color-palette-tile:hover {
    transform: scale(1.12);
}

/* Kendo lays the tiles out in a table, where circles would otherwise touch. */
.k-colorpalette-table,
.k-color-palette-table {
    border-spacing: .25rem;
    border-collapse: separate;
}