/* Die Maske, umgedreht — die öffentliche Hülle der „Praxis Taskero".
 *
 * Eine gerahmte Arbeitsfläche in gesättigtem Tintenblau. Darauf liegen Masken: flache
 * Flächen hohen Hellwerts, von Haarlinien begrenzt, ohne Rundung, ohne Schatten, ohne
 * vorgetäuschte Tiefe. Jede Maske hat eine Beschriftungsspalte fester Breite und daneben
 * ihren Wert. Ein einziges Amber liegt auf genau einer Fläche der Seite. Der Fokus ist
 * der Cursor dieser Welt: ein Block, der von Maske zu Maske springt und stehen bleibt.
 *
 * Diese Datei laden nur die Overlay-Seiten dieses Pakets über {% block extra_head %};
 * die Token, die @font-face-Regeln und die Kosmetik der geteilten Kopfleiste, Fußzeile
 * und des Einwilligungsfensters stehen in ../../customer/tokens.css, das auf jeder
 * Seite liegt. Hier steht alles pd-* und die Umstilisierung der DaisyUI-Klassen, die in
 * den geteilten Formular-Teilstücken sichtbar werden.
 *
 * Spezifität: Die .tz-*-Regeln im Tailwind-Bundle sind unlayered, diese Datei ebenfalls
 * und sie kommt später — bei gleicher Spezifität gewinnt sie damit ohne !important. Zu
 * schlagen sind .tz-shell p / .tz-shell a (0,1,1) und .tz-card .input /
 * .tz-card .btn-primary (0,2,0). Die Formular-Teilstücke der Anmeldung tragen deshalb
 * .pd-card statt .tz-card: dann greift die Karte des Bundles gar nicht erst, und ihre
 * Polsterung, ihr Grund und ihr Schatten müssen nicht rückgängig gemacht werden.
 *
 * Die Typ-Rampe steht in px, nicht in rem: rem rechnet gegen die 16 px des Wurzelelements,
 * der Body dieser Hülle steht auf 17 px.
 *
 * Keine neue Tailwind-Utility: Das Bundle wird einmal für alle Kunden gebaut, eine Klasse,
 * die heute nicht darin steht, existiert auf dem Gerät nicht. In den Vorlagen stehen nur
 * pd-*, tz-* und Utilities, die wörtlich im committeten Bundle vorkommen.
 */

/* ==========================================================================
   Gerüst
   ========================================================================== */

.pd-shell {
    /* Der Block-Cursor liegt absolut in diesem Kasten. */
    position: relative;
}

/* Alles innerhalb einer Maske wird invertiert ausgewählt: Tinte als Grund, Maske als
   Schrift (15,7:1). Ausserhalb gilt die Auswahlfarbe der Arbeitsfläche aus dem Bundle. */
.pd-mask ::selection {
    background: var(--pd-ink);
    color: var(--tz-card-bg);
}

.pd-main {
    flex: 1 0 auto;
    /* Die Kopfleiste ist fest und ≤ 64 px; derselbe Ausdruck wie dort, damit die erste
       Maske bei vergrößerter Schrift nicht darunter rutscht. */
    padding-top: max(64px, 4rem);
}

/* Die Spalte, in der die Masken liegen. Die Polsterung wächst mit, deckelt aber früh:
   Sonst schrumpft der Inhalt, während das Fenster breiter wird. */
.pd-spine {
    width: 100%;
    max-width: 1008px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 24px);
}

.pd-spine--narrow {
    max-width: calc(var(--tz-card-narrow) + 48px);
}

.pd-stack {
    padding-block: 24px 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (min-width: 768px) {
    .pd-stack {
        padding-block: 40px 72px;
        gap: 24px;
    }
}

/* ==========================================================================
   Die Maske
   ========================================================================== */

.pd-mask {
    background: var(--tz-card-bg);
    border: 1px solid var(--pd-edge); /* 6,9:1 gegen die Arbeitsfläche */
    color: var(--pd-ink);
    border-radius: 0;
    box-shadow: none;
}

/* Die Kopfzeile der Maske: der Balken, der den geöffneten Datensatz trägt. */
.pd-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding: 10px 16px;
    background: var(--pd-mask-deep);
    border-bottom: 1px solid var(--pd-edge);
}

@media (min-width: 640px) {
    .pd-bar {
        padding: 10px 24px;
    }
}

.pd-bar__record {
    margin: 0;
    font-size: 12.5px;
    line-height: 20px;
    font-weight: 600;
    font-stretch: 92%;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pd-ink); /* 14,0:1 auf dem Balken */
}

/* Die Zustandszeile. Eine Verwaltungsmaske sagt oben, in welchem Betrieb sie läuft;
   diese sagt Musterbetrieb. Gefüllt, damit sie als Systemzustand liest und nicht als
   Fußnote: Maskenfarbe auf Tinte, 15,7:1. */
.pd-state {
    margin-inline-start: auto;
    padding: 3px 8px;
    background: var(--pd-ink);
    color: var(--tz-card-bg);
    font-size: 12.5px;
    line-height: 18px;
    font-weight: 600;
    font-stretch: 92%;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.pd-row {
    padding: 14px 16px;
}

@media (min-width: 640px) {
    .pd-row {
        padding: 16px 24px;
    }
}

.pd-row + .pd-row {
    border-top: 1px solid var(--pd-rule);
}

/* Die beschriftete Zeile: links die Spalte fester Breite, rechts der Wert. Unter 640 px
   steht die Beschriftung über ihrem Wert — gestapelt, nicht verkleinert. */
.pd-row--labeled {
    display: grid;
    gap: 6px;
}

@media (min-width: 640px) {
    .pd-row--labeled {
        grid-template-columns: 192px minmax(0, 1fr);
        gap: 24px;
        align-items: baseline;
    }

    /* In der schmalen Maske bliebe dem Wert sonst zu wenig: Die Anschrift der Praxis
       fiele über drei Zeilen und der Inhabername bräche mitten im Wort. */
    .pd-spine--narrow .pd-row--labeled {
        grid-template-columns: 148px minmax(0, 1fr);
    }
}

/* Der eine Beschriftungsblock, der jede Einheit regiert. Er bekommt seine feste Breite
   aus dem Satz, nicht aus einer Schreibmaschinenschrift. */
.pd-label {
    margin: 0;
    font-size: 12.5px;
    line-height: 20px;
    font-weight: 600;
    font-stretch: 92%;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pd-ink-2); /* 7,0:1 auf der Maske */
    text-wrap: balance;
}

.pd-value {
    min-width: 0;
    max-width: var(--tz-measure);
}

.pd-value > * + * {
    margin-top: 12px;
}

/* ==========================================================================
   Satz — eine Rampe, in px autorisiert
   ========================================================================== */

.pd-mask p,
.pd-mask li,
.pd-mask dd {
    font-size: 17px;
    line-height: 27px;
    color: var(--pd-ink); /* 15,7:1 */
    max-width: var(--tz-measure);
    text-wrap: pretty;
    margin: 0;
}

.pd-h1 {
    margin: 0;
    font-size: 34px;
    line-height: 1.06;
    font-weight: 600;
    font-stretch: 92%;
    letter-spacing: -0.02em;
    color: var(--pd-ink);
    text-wrap: balance;
    hyphens: none;
}

@media (min-width: 640px) {
    .pd-h1 {
        font-size: 44px;
    }
}

@media (min-width: 1024px) {
    .pd-h1 {
        font-size: 52px; /* deutlich unter der Obergrenze von 6 rem */
    }
}

.pd-h2 {
    margin: 0;
    font-size: 22px;
    line-height: 1.22;
    font-weight: 600;
    font-stretch: 96%;
    letter-spacing: -0.01em;
    color: var(--pd-ink);
    text-wrap: balance;
}

@media (min-width: 640px) {
    .pd-h2 {
        font-size: 26px;
    }
}

/* Die Leitzeile ist die Äußerung der Praxis, nicht eine Anrede an die Leserin. Sie steht
   unter dem Titel, im Lesefluss zum Namen. */
.pd-motto {
    margin: 16px 0 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
    color: var(--pd-ink);
    text-wrap: balance;
}

.pd-mask .pd-small {
    font-size: 15px;
    line-height: 22px;
    color: var(--pd-ink-2); /* 7,0:1 */
}

.pd-mask address {
    font-style: normal;
    font-size: 17px;
    line-height: 27px;
    color: var(--pd-ink);
}

/* In einer Fläche voller Text trägt Farbe allein den Link nicht — die Tinte des Links
   ist die Tinte des Textes. Deshalb ist er immer unterstrichen (SC 1.4.1). */
.pd-mask a {
    color: var(--pd-ink);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.pd-mask a:hover {
    text-decoration-thickness: 2px;
}

.pd-num {
    font-variant-numeric: tabular-nums;
}

/* Die Zeilenliste: kein Aufzählungszeichen, eine Haarlinie zwischen zwei Einträgen —
   dieselbe Kante, die zwei Zeilen einer Maske trennt. */
.pd-lines {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: var(--tz-measure);
}

.pd-lines li + li {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--pd-rule);
}

/* Die Fähigkeiten: eine Reihe identischer Einheiten, jede mit demselben
   Beschriftungsblock. Keine Kachelreihe, kein Symbol. */
.pd-caps {
    margin: 0;
}

.pd-caps > div {
    display: grid;
    gap: 4px;
    padding-block: 10px;
}

.pd-caps > div + div {
    border-top: 1px solid var(--pd-rule);
}

.pd-caps > div:first-child {
    padding-top: 0;
}

.pd-caps > div:last-child {
    padding-bottom: 0;
}

/* Dieselbe Spaltenbreite wie .pd-row--labeled: Die Seite hat genau zwei senkrechte
   Kanten — die der Beschriftung und die des Wertes. Eine dritte las sich als Versehen. */
@media (min-width: 640px) {
    .pd-caps > div {
        grid-template-columns: 192px minmax(0, 1fr);
        gap: 24px;
        align-items: baseline;
    }

    .pd-spine--narrow .pd-caps > div {
        grid-template-columns: 148px minmax(0, 1fr);
    }
}

/* Die sechs Fähigkeitsnamen in Schaugröße: die Wörter des Portals tragen die Seite selbst,
   als Bauteil und nicht als Bildunterschrift.

   Die Spannung zwischen zwei Regeln dieser Welt ist echt: Ein überall gleicher
   Beschriftungsblock regiert jede Einheit, und die Reihe der Fähigkeiten muss sich in einem
   Schwenk als identische Einheiten lesen. Beide halten, wenn sich nicht die Einheit ändert,
   sondern nur ihr Maßstab — derselbe Block (dieselbe gesperrte Versal-Grotesk, dasselbe
   Gewicht, dieselbe Breite, dieselbe Tinte, 7,0:1), nur größer, und der Wert rückt unter
   seinen Namen statt neben ihn. Aus zwei senkrechten Kanten wird dabei eine: die der
   Beschriftung, die schon da war. Eine dritte entsteht nicht.

   Der Maßstab bleibt auf 390 px absichtlich unter dem der Türen (24 px): Sechs Schaugrößen
   untereinander machen sonst ein Plakat aus der Seite. */
.pd-caps--display > div {
    /* Ohne den Zwang bemisst sich die Spur an ihrem längsten Wort und wächst über die
       Fläche hinaus, sobald die Schrift steigt; minmax(0, 1fr) deckelt sie auf die
       Fläche, und der Umbruch unten fängt das Wort auf. */
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding-block: 14px;
}

.pd-caps--display .pd-label {
    font-size: 22px;
    line-height: 1.16;
    /* „Benachrichtigungen" ist bei 390 px das längste Wort der Seite und passt dort in
       eine Zeile. Wächst die Schrift darüber hinaus — reiner Textzoom, eine schmalere
       Fläche —, bricht der Name um, statt die Seite nach rechts zu schieben. */
    overflow-wrap: break-word;
}

@media (min-width: 640px) {
    /* Eine Spalte statt zweier: Der Name steht über seinem Wert, beide an derselben Flucht. */
    .pd-caps--display > div,
    .pd-spine--narrow .pd-caps--display > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
        padding-block: 18px;
    }

    .pd-caps--display .pd-label {
        font-size: 28px;
    }
}

@media (min-width: 1024px) {
    .pd-caps--display .pd-label {
        font-size: 32px;
    }
}

.pd-caps dt {
    margin: 0;
}

.pd-caps dd {
    margin: 0;
}

/* ==========================================================================
   Die beiden Türen
   ========================================================================== */

.pd-doors {
    display: grid;
    gap: 16px;
}

@media (min-width: 640px) {
    .pd-doors {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }
}

/* Eine Tür ist eine Maske, die man anfassen kann. Ihre Zustände wechseln die Füllung,
   nie die Tiefe: kein Schatten, kein Anheben, keine Rundung.

   Mit .pd-shell davor, nicht als blosse Klasse: Die Tür ist ein <a>, und `.tz-shell a`
   im Bundle ist (0,1,1). Ohne den zweiten Namen setzte dieses Blatt weder die Tinte der
   Tür noch nähme es ihr die Unterstreichung beim Überfahren — das Türwort erschien in
   der Linkfarbe der Arbeitsfläche, auf dem Amber gemessene 2,4:1. */
.pd-shell .pd-door {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 16px 22px;
    background: var(--tz-card-bg);
    border: 1px solid var(--pd-edge);
    color: var(--pd-ink); /* 15,7:1 */
    text-decoration: none;
    transition: background-color 160ms ease;
}

@media (min-width: 640px) {
    .pd-shell .pd-door {
        padding: 24px 24px 26px;
    }
}

.pd-shell .pd-door:hover {
    background: var(--pd-mask-deep);
    text-decoration: none;
}

.pd-shell .pd-door:active {
    background: var(--pd-mask-deep);
    transform: none;
}

/* Das eine Amber der Seite. Füllung unter dunkler Tinte, nie Schriftfarbe. */
.pd-shell .pd-door--form {
    background: var(--tz-stamp-orange);
    border-color: var(--tz-fill-caption);
    color: var(--tz-fill-caption); /* 7,8:1 auf dem Amber */
}

.pd-shell .pd-door--form:hover,
.pd-shell .pd-door--form:active {
    background: var(--pd-amber-deep); /* Tinte darauf 5,8:1 */
}

.pd-door__label {
    font-size: 24px;
    line-height: 1.16;
    font-weight: 600;
    font-stretch: 92%;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

@media (min-width: 640px) {
    .pd-door__label {
        font-size: 28px;
    }
}

.pd-door__caption {
    font-size: 15px;
    line-height: 22px;
    color: var(--pd-ink-2); /* 7,0:1 auf der Maske */
    text-wrap: pretty;
}

/* Auf dem Amber ist --pd-ink-2 nur 3,5:1 — genug für nichts Textliches, zu wenig für
   eine Bildunterschrift. Die Unterzeile der Amber-Tür nimmt deshalb dieselbe Tinte wie
   ihr Wort: 7,8:1. */
.pd-door--form .pd-door__caption {
    color: var(--tz-fill-caption);
}

/* ==========================================================================
   Der Fokus als Cursor dieser Welt
   --------------------------------------------------------------------------
   Ein Ton kann nicht zugleich auf der Arbeitsfläche, der Maske und dem Amber über 3:1
   liegen. Also liegt der Cursor nie auf der Arbeitsfläche: um Masken und Türen sitzt er
   nach innen versetzt, um alles innerhalb einer Maske nach außen auf deren Grund.
   ========================================================================== */

.pd-mask :focus-visible,
.pd-shell .pd-mask .btn:focus-visible {
    outline: 2px solid var(--tz-perf); /* 15,7:1 auf der Maske */
    outline-offset: 2px;
    box-shadow: none;
}

.pd-shell .pd-door:focus-visible {
    outline: 2px solid var(--tz-perf);
    outline-offset: -4px; /* nach innen, damit der Umriss auf der Tür liegt */
}

.pd-shell .pd-door--form:focus-visible {
    outline-color: var(--tz-fill-caption); /* 7,8:1 auf dem Amber */
}

/* Der Block. Er springt von Maske zu Maske und bleibt stehen — der eine gestaltete
   Moment dieser Seite. Als Übergang, nicht als Keyframe: so lässt er sich von dort
   unterbrechen, wo er gerade ist.

   Vier Balken statt eines Umrisses. Ein Umriss kann seine Größe nur über width/height
   ändern, und das ist Layout: jedes Bild einer Bewegung zöge Stil, Layout und Anstrich
   über den Hauptfaden. Vier Kanten, die je nur in ihrer Länge skaliert werden, bewegen
   sich ausschließlich über transform — der Kompositor genügt. Die Stärke steht in der
   Grundgröße und wird nie skaliert; sie bleibt damit genau die Haarlinie dieser Welt,
   während ein skalierter Umriss mitwüchse. */
.pd-cursor {
    --pd-cursor-ink: var(--tz-perf);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    width: 0;
    height: 0;
    pointer-events: none;
}

.pd-cursor[hidden] {
    display: none;
}

.pd-cursor--amber {
    --pd-cursor-ink: var(--tz-fill-caption);
}

/* Die Kanten überlappen sich an den Ecken. Bei voller Deckung ist das nicht zu sehen,
   dafür bleibt der Block in jeder Zwischenstellung ein geschlossenes Rechteck: Alle vier
   Werte werden linear zwischen Anfang und Ziel geführt, und eine Summe von Interpolationen
   ist die Interpolation der Summe — die Ecken können also nicht auseinanderlaufen. */
.pd-cursor > span {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--pd-cursor-ink);
    transform-origin: 0 0;
    will-change: transform;
    transition: transform 180ms var(--tz-ease-out);
}

.pd-cursor > span:nth-child(1),
.pd-cursor > span:nth-child(2) {
    width: 1px;
    height: 2px;
}

.pd-cursor > span:nth-child(3),
.pd-cursor > span:nth-child(4) {
    width: 2px;
    height: 1px;
}

/* Übernimmt der Block, tritt der eigene Umriss des Elements zurück. Läuft das Skript
   nicht, bleibt er stehen — die Seite ist dann ohne den Moment, nie ohne den Fokus. */
.pd-cursor-live .pd-mask :focus-visible,
.pd-cursor-live .pd-door:focus-visible {
    outline-color: transparent;
}

/* Der Kasten eines Eingabefeldes trägt seinen Ring über :has und damit über einer höheren
   Spezifität als die Regel darüber; übernimmt der Block, tritt auch dieser Ring zurück. */
.pd-cursor-live .pd-card label.input:has(input:focus-visible) {
    outline-color: transparent;
}

/* ==========================================================================
   Die Formular-Teilstücke
   --------------------------------------------------------------------------
   users/partials/_login_form.html und seine Geschwister sind geteilt, werden per HTMX
   getauscht und tragen DaisyUI-Klassen. Sie werden nicht angefasst; was von ihnen
   sichtbar wird, wird hier unter .pd-card umstilisiert — nur so sehen die erste und die
   zweite Stufe der Anmeldung gleich aus.
   ========================================================================== */

.pd-card {
    accent-color: var(--pd-ink);
}

.pd-card form {
    margin-top: 0;
}

/* Die Feldbeschriftung ist derselbe Block, der jede Zeile der Maske regiert. Nicht
   .label-text: DaisyUI hängt die Klasse im Anmelde-Teilstück an den Link „Passwort
   vergessen?", der dann in Versalien schriee. */
.pd-card .fieldset-label,
.pd-card .label {
    color: var(--pd-ink-2);
    font-size: 12.5px;
    line-height: 20px;
    font-weight: 600;
    font-stretch: 92%;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pd-card .text-base-content\/60,
.pd-card .text-base-content\/80,
.pd-card .label-text {
    color: var(--pd-ink-2); /* 7,0:1 — abgetönt aus dem Ton der Fläche, nie grau */
}

/* Der Platzhalter ist Text und braucht seine 4,5:1. DaisyUI setzt ihn als aktuelle Tinte
   mit halber Deckung — auf dieser Maske rund 2,5:1. */
.pd-card .input input::placeholder,
.pd-card input::placeholder,
.pd-card textarea::placeholder {
    color: var(--pd-ink-2); /* 7,0:1 */
    opacity: 1;
}

.pd-card .input {
    background: var(--tz-card-bg);
    border: 1px solid var(--pd-control); /* 4,5:1 — ein Bedienelement braucht 3:1 */
    border-radius: 0;
    color: var(--pd-ink);
    min-height: 48px;
    box-shadow: none;
    outline: none;
}

.pd-card .input input,
.pd-card .input textarea,
.pd-card input,
.pd-card textarea {
    caret-color: var(--pd-ink);
}

.pd-card .input:focus,
.pd-card .input:focus-within {
    border-color: var(--pd-ink);
    outline: 2px solid var(--tz-perf);
    outline-offset: 2px;
}

/* Denselben Wähler noch einmal, weil das Bundle ihn hat: `.tz-shell label.input:has(input:
   focus-visible)` ist (0,3,2) und schlug die Regel darüber — der Kasten trug dann den Ring
   der Arbeitsfläche, auf der Maske gemessene 1,62:1. Gleiche Spezifität, spätere Stelle. */
.pd-card label.input:has(input:focus-visible) {
    outline: 2px solid var(--tz-perf); /* 15,7:1 auf der Maske */
    outline-offset: 2px;
}

/* Den Umriss trägt der Kasten, nicht das Feld darin — sonst stehen zwei. */
.pd-card .input input:focus-visible {
    outline: none;
}

/* Landet der Fokus auf dem Augen-Schalter, gehört der Umriss ihm, nicht dem Kasten. */
.pd-card label.input:has(.swap input:focus-visible) {
    outline: none;
}

.pd-card .input .swap:has(input:focus-visible) {
    outline: 2px solid var(--tz-perf);
    outline-offset: 2px;
}

.pd-card .input .iconify {
    color: var(--pd-ink-2);
}

.pd-card .input-error,
.pd-card .input[data-error] {
    border-color: var(--pd-error);
}

.pd-card .text-error {
    color: var(--pd-error); /* 7,4:1 */
}

/* Der Knopf ist gefüllt: In dieser Welt ist er das eine Bedienelement der Maske, und das
   Amber daneben gehört der Tür zum Formular. Ohne Rundung, ohne Schatten; gedrückt
   wechselt er die Füllung, nicht die Tiefe. */
.pd-card .btn-primary {
    background: var(--pd-ink);
    border: 1px solid var(--pd-ink);
    border-radius: 0;
    color: var(--tz-card-bg); /* 15,7:1 */
    font-weight: 600;
    font-stretch: 96%;
    letter-spacing: 0.01em;
    min-height: 48px;
    padding-block: 12px;
    box-shadow: none;
    transition: background-color 160ms ease;
}

.pd-card .btn-primary:hover {
    background: var(--pd-btn-hover); /* Schrift darauf 11,2:1 */
    border-color: var(--pd-btn-hover);
    color: var(--tz-card-bg);
}

.pd-card .btn-primary:active {
    background: var(--pd-btn-hover);
    transform: none;
}

.pd-card .btn-primary:disabled,
.pd-card .btn-primary[disabled],
.pd-card .btn-primary.btn-disabled {
    background: var(--pd-mask-deep);
    border-color: var(--pd-rule);
    color: var(--pd-ink-2); /* 6,3:1 auf dem Grund der abgeschalteten Fläche */
    cursor: not-allowed;
}

.pd-card .btn-primary:disabled:hover,
.pd-card .btn-primary[disabled]:hover,
.pd-card .btn-primary.btn-disabled:hover {
    background: var(--pd-mask-deep);
    border-color: var(--pd-rule);
    color: var(--pd-ink-2);
}

/* Ein abgeschalteter Knopf verblasst nicht. Auf der Bestätigungsseite trägt der Knopf
   „Erneut senden in 2:58" den Rest des Countdowns, und das ist Information, nicht bloß eine
   Beschriftung: Sie muss lesbar bleiben, solange sie dasteht. Das geteilte Teilstück legt ihm
   dafür die Utility opacity-50 an. Deckkraft mischt das ganze Element in seinen Grund: Aus
   #0d1b2c auf #f2f4f1 wird #80888e, und das Verhältnis fällt von 15,7:1 auf 3,26:1 — unter
   die 4,5:1, die ein Text braucht.

   Volle Deckkraft also, und dafür dieselbe gedämpfte Tinte, die in dieser Welt jede
   Beschriftungsspalte trägt: 7,0:1. Abgeschaltet bleibt der Knopf sichtbar abgeschaltet —
   über Farbe und Zeiger, und dadurch, dass er seine Unterstreichung ablegt, mit der er
   sonst als Weg liest.

   Gegen eine Utility aus @layer utilities braucht es kein !important: Dieses Blatt ist
   schichtlos, und Schichtloses gewinnt gegen jede Schicht. Der Primärknopf behält seinen
   eigenen abgeschalteten Zustand von oben — .pd-card .btn-primary:disabled ist (0,3,0) und
   damit spezifischer als der Wähler hier (0,2,1); nur die Deckkraft nimmt auch er mit. */
.pd-card button:disabled,
.pd-card button[disabled] {
    opacity: 1;
    color: var(--pd-ink-2); /* 7,0:1 auf der Maske */
    cursor: not-allowed;
    text-decoration-line: none;
}

/* Der Augen-Schalter im Feld und der Knopf „Code erneut senden": flach, quadratisch. */
.pd-card .btn-ghost {
    background: transparent;
    border-color: transparent;
    border-radius: 0;
    color: var(--pd-ink-2);
    box-shadow: none;
}

.pd-card .btn-ghost:hover {
    background: var(--pd-mask-deep);
    color: var(--pd-ink);
}

.pd-card .btn-circle {
    border-radius: 0;
}

/* Die Meldungen. .pd-card .alert ist (0,2,0) und DaisyUIs Varianten sind (0,1,0) — ohne
   eigene Regel je Zustand sähen Erfolg, Hinweis und Fehler gleich aus. Jede unterscheidet
   sich in Grund, Linie und Tinte, alle aus der Palette dieser Welt. */
.pd-card .alert {
    background: var(--pd-mask-deep);
    border: 1px solid var(--pd-edge);
    border-radius: 0;
    color: var(--pd-ink); /* 14,0:1 */
    box-shadow: none;
}

.pd-card .alert-info {
    background: var(--pd-mask-deep);
    border-color: var(--pd-edge);
    color: var(--pd-ink);
}

.pd-card .alert-success {
    background: var(--tz-card-bg);
    border-color: var(--pd-ok);
    color: var(--pd-ok); /* 5,9:1 */
}

.pd-card .alert-warning {
    background: var(--tz-card-bg);
    border-color: var(--tz-stamp-ink);
    color: var(--tz-stamp-ink); /* 6,6:1 */
}

.pd-card .alert-error {
    background: var(--tz-card-bg);
    border-color: var(--pd-error);
    color: var(--pd-error); /* 7,4:1 */
}

.pd-card .text-primary,
.pd-card .link-primary {
    color: var(--pd-ink);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.pd-card .text-primary:hover,
.pd-card .link-primary:hover {
    text-decoration-thickness: 2px;
}

/* Das Passwortmeter: fünf Felder, kein Balken mit runden Enden. */
.pd-card .bg-base-200 {
    background-color: var(--pd-rule);
}

.pd-card .bg-success {
    background-color: var(--pd-ok);
}

.pd-card .text-success {
    color: var(--pd-ok); /* 5,9:1 */
}

.pd-card .rounded-full {
    border-radius: 0;
}

.pd-card .loading {
    color: var(--pd-ink);
}

.pd-card .countdown,
.pd-card .tabular-nums {
    font-variant-numeric: tabular-nums;
}

.pd-card .checkbox-primary {
    border-radius: 0;
    border-color: var(--pd-control);
}

/* ==========================================================================
   Reduzierte Bewegung
   --------------------------------------------------------------------------
   Der Auffangsatz des Bundles (.tz-shell *) neutralisiert jede Übergangsdauer, auch die
   der per HTMX getauschten Teilstücke. Hier steht, was diese Datei selbst mitbringt:
   Der Cursor sitzt dann einfach dort, wo der Fokus ist.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .pd-cursor > span,
    .pd-shell .pd-door,
    .pd-card .btn-primary {
        transition: none;
    }

    /* Der Auffangsatz nimmt den getauschten Teilstücken die Dauer, nicht die Eigenschaft:
       Alpine legt seine Übergangsklassen weiter an, und ein Übergang über 0,01 ms wird
       angelegt, ehe er im selben Bild endet — er steht damit für die Länge eines Bildes in
       document.getAnimations(). Zu sehen ist davon nichts; hier fällt er ganz weg, sodass
       bei reduzierter Bewegung wirklich keine Bewegung mehr geführt wird. Ohne !important:
       Dieses Blatt ist unlayered und kommt später als die Utilities des Bundles. */
    .pd-card *,
    .pd-card *::before,
    .pd-card *::after {
        transition-property: none;
    }
}