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 icons ----------------------------------------------------------- */

/* One icon set for everything Taskplan draws itself: Material Symbols, at
   FILL 0, wght 200, GRAD 0, opsz 24 (D-150). The four axes are set once, here,
   and nowhere else -- that is the whole of why the icons look like one family.

   An icon in the markup is its own name as text, because the font carries
   ligatures: <span class="tp-i">calendar_month</span>. Readable, greppable, and
   a good deal shorter than the eighty characters of SVG path data each of these
   used to be.

   The file is subsetted to exactly the names listed below. To add one, fetch the
   subset again with the name in it -- the list is here so that nobody has to
   open a font to find out what is inside it.

   *** And bump `?v=` on the two lines that ask for the file: here and on the
   preload in App.razor. *** The name never changes, so to a browser that has the
   old one there is nothing to fetch -- it goes on using it, the new names are not
   in it, and a page then spells out `settings` and `more_horiz` in plain letters
   where the icons should be. That happened on an iPhone on 2026-09-19, and it is
   the only way this can go wrong: the glyphs a reader already had kept working,
   so the fault looked like two broken icons rather than one stale file.

     add · arrow_back · calendar_month · check · check_circle · checklist
     chevron_left · chevron_right · content_copy · event_repeat · expand_more
     filter_alt · folder · format_list_bulleted · grid_view · group · inbox
     layers · lock · login · logout · more_horiz · notifications · person
     person_add · settings · target · translate · visibility · visibility_off

   `workspaces` is off this list because nothing uses it any more -- the sidebar's
   workspace row asks for `layers` now (Jan, 2026-09-20). It is *not* off it for
   being broken: that row was blank for two days and the font was blamed twice,
   wrongly, for what turned out to be a colour. See `.tp-i-plain` below.

   *** And if the button is a `btn-link`, give it `text-decoration: none`. ***
   Bootstrap underlines one, and that line never showed while the mark inside was
   an <svg> -- an image is not text and takes no underline. A glyph is text, so
   the line appears beneath it the moment a drawing becomes a name, close enough
   to read as part of the icon. It has caught us three times now: the floating
   plus, and both buttons in the phone calendar's header. It is not fixed from
   here -- the line is painted by the button across everything on its row, and a
   rule on the glyph cannot reach it.

   Self-hosted and not linked from fonts.googleapis.com: a link there sends every
   visitor's IP address to Google, which LG Muenchen I held to be a GDPR breach
   in 2022 (3 O 17493/20). Taskplan is a German product with German customers. */

/* `font-display: block` and this is the one setting that must not be changed.
   The rule this replaced argued against an icon font on the grounds that a font
   arriving late leaves a row of empty boxes -- a fair objection, and worse than
   it sounds with ligatures: the fallback would spell out `calendar_month` in the
   sidebar in plain letters. `block` says draw nothing until the font is here.
   With 3 KB, preloaded in App.razor, "until" is the same paint. */
/* The weight is a *range*, and 200 is only where it rests. The bar at the
   bottom of a telephone marks the page one is on by drawing its icon heavier,
   which is what the stroke width did before this (see MobileBar.razor.css) --
   and a font pinned to exactly 200 has nothing to thicken. Everything else
   takes 200 from `.tp-i` below and never asks for anything else. */
@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 200 400;
    font-display: block;
    src: url('fonts/material-symbols.woff2?v=4') format('woff2');
}

.tp-i {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 1.25rem;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    flex: 0 0 auto;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'liga';
    font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24;

    /* A glyph sits on the baseline like any letter, and an icon beside a word
       wants its middle on the word's middle. */
    vertical-align: -.25em;
}

/* The row of a structure node, one size down: these stand indented under the
   entries above them, and an icon as large as a navigation entry's would make a
   child row shout louder than its parent. */
.nav-item .tp-i-row {
    font-size: 1rem;
    margin-right: .4rem;
    vertical-align: -.2em;
}

/* The accent (D-057), and the two lines are not interchangeable.

   `color`, because a glyph is painted in the text colour -- where the masked
   version this replaced used background-color, the mask being the shape.

   And `background: none` because .tp-accent-red sets a background-color of its
   own: on a mask that WAS the icon, on a glyph it would be a coloured block
   behind it. Two classes here outrank the one there, which is what makes this
   work at all -- see the note above the accent list. */
.nav-item .tp-i {
    background: none;
    color: var(--tp-mark, rgba(255, 255, 255, .8));
}

/* The navigation's own icons take the colour of the row they sit in, like the
   word beside them. Only the nodes carry an accent.

   *** Only for a mark inside a `.nav-link`. *** "The row it sits in" is a link,
   and a link has a colour; a `div.nav-item` does not, so a glyph put straight
   into one inherits the body's near-black and disappears against the sidebar.
   That is exactly what happened to the workspace row (WorkspaceTree), and it
   cost two days: a mark drawn in an invisible colour and a mark whose glyph is
   missing look identical, so the font was suspected twice. A mark that is not
   inside a link leaves this class off and takes the off-white above. */
.nav-item .tp-i-plain {
    color: inherit;
}

/* The tree's own folding arrow. Smaller than a row's mark, because it is not one
   of the things the tree lists -- it is the handle on one. */
.nav-item .tp-i-fold {
    font-size: 1rem;
    vertical-align: -.2em;
}

/* An icon standing alone in a button, wherever that button is.

   These replaced typographic characters -- a gear, a midline ellipsis, single
   and double angle quotes -- which every system drew at its own weight and which
   Windows drew as a colour emoji (D-150). A glyph at the font's own 1.25rem is a
   shade large inside a small button, and this is the one number that says so for
   all of them at once. */
.btn > .tp-i:only-child,
.page-link > .tp-i:only-child {
    font-size: 1.125rem;
    vertical-align: -.2em;
}


/* --- 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;
}

/* The circle on its own, as a button: beside a heading there is no room for a bordered control saying
   "Keine Farbe", and the circle already says it. Bootstrap's own padding and border are taken away so
   that the target is the swatch and the line it sits in does not grow -- what makes it findable is
   that it is the only round thing in the row, and what makes it pressable is the pointer. */
.tp-swatch-button {
    padding: 0;
    border: 0;
    line-height: 0;
    background: none;
}

/* 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;
}

/* Which of a picker's two halves is on screen (D-127).

   `DateField`, `TimeField` and `DateTimeField` each render the vendor's picker and the browser's own
   field, and exactly one of them is ever visible: the vendor above the breakpoint, where it reads the
   workspace's culture and a mouse does the picking, and the platform's own below it, where a wheel
   with real momentum and a wrap-around beats anything a library draws.

   Here rather than in three scoped stylesheets, for the reason the Telerik rules above give and one
   more: the vendor's picker is a child component, so a scoped rule would have to reach it with
   `::deep` -- three files saying the same thing in the more awkward of the two spellings.

   `!important` because of what these two class names are up against. The vendor's root carries several
   of its own -- `.k-datetimepicker.k-input` is already (0,2,0) -- and the scoped stylesheet loads
   after this file with an attribute selector on every rule, so a page that sizes one of these fields
   from its own component would win too. A rule whose whole job is "not this one, here" should not be
   the one that quietly loses: a field that is hidden must be hidden. */
@media (max-width: 767.98px) {
    .tp-picker-wide {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .tp-picker-touch {
        display: none !important;
    }
}