/*
 * Die Hilfe: Fragezeichen in der Kopfzeile, Box am rechten Rand, Hilfeseiten
 * und der Rundgang.
 *
 * Wird von base.html.twig auf jeder Seite geladen, weil das Fragezeichen
 * ueberall in der Kopfzeile steht. Die Datei bleibt deshalb klein und
 * beschreibt die Typografie der Hilfetexte selbst, statt sich auf `.markdown`
 * aus task.css zu stuetzen — die liegt nur auf den Board- und Kartenseiten vor,
 * und eine Hilfe, die je nach Seite anders aussieht, waere ein Raetsel.
 */

/* ---- Das Fragezeichen in der Kopfzeile ---------------------------------- */

/* Dasselbe Maß wie die Glocke daneben: 2,75 rem sind 44 Pixel — die übliche
   Untergrenze für ein Ziel, das auch auf einem Berührungsbildschirm getroffen
   werden soll. Vorher war es mit 2,25 rem spürbar zu klein. */
.help-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.35rem;
    color: var(--c-text-muted);
    border-radius: var(--radius-pill);
    transition: color var(--t), background var(--t);
}

.help-toggle:hover {
    color: var(--c-text);
    background: var(--c-surface-alt);
}

.help-toggle[aria-expanded="true"] {
    color: var(--c-accent);
    background: var(--c-accent-soft);
}

/* ---- Die Box am rechten Rand -------------------------------------------- */

.help-panel {
    position: fixed;
    z-index: 60;
    top: 0;
    right: 0;
    bottom: 0;

    /* Ein Drittel, aber nicht breiter als eine gut lesbare Zeile. Zwei
       getrennte Werte statt `min()` in der Breite: Ein zusammengesetzter Wert
       laesst sich nicht zuverlaessig interpolieren — dieselbe Erfahrung wie bei
       der Chatleiste, dort ausfuehrlich begruendet. */
    width: 33vw;
    min-width: 20rem;
    max-width: 30rem;

    display: flex;
    flex-direction: column;
    background: var(--c-surface);
    border-left: 1px solid var(--c-border);
    box-shadow: var(--shadow-3);

    /* Sie faehrt herein und legt sich ueber die Seite. Anders als die
       Chatleiste schiebt sie nichts zur Seite: Was nur kurz da ist, darf das
       Layout darunter nicht umbauen. */
    transform: translateX(100%);
    transition: transform 220ms cubic-bezier(.2, .8, .3, 1);
}

.help-panel.is-open { transform: translateX(0); }
.help-panel[hidden] { display: none; }

.help-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    flex: none;
    height: var(--header-h);
    padding: 0 .5rem 0 1rem;
    border-bottom: 1px solid var(--c-border);
}

.help-panel__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: var(--c-text-muted);
    background: none;
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
}

.help-panel__close:hover { color: var(--c-text); background: var(--c-surface-alt); }

.help-panel__search {
    position: relative;
    flex: none;
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--c-border);
}

.help-panel__search .icon {
    position: absolute;
    top: 50%;
    left: 1.35rem;
    transform: translateY(-50%);
    color: var(--c-text-muted);
    pointer-events: none;
}

.help-panel__search input {
    width: 100%;
    height: var(--control-h);
    padding-left: 2.1rem;
}

.help-panel__body {
    flex: 1;
    min-height: 0;
    padding: 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.help-panel__foot {
    flex: none;
    padding: .6rem 1rem;
    font-size: .85rem;
    border-top: 1px solid var(--c-border);
    background: var(--c-surface-alt);
}

/* Auf schmalen Bildschirmen nimmt die Box die ganze Breite. Ein Drittel von
   wenig ist zum Lesen zu wenig — und daneben arbeiten kann man dort ohnehin
   nicht. */
@media (max-width: 48rem) {
    .help-panel {
        width: 100vw;
        max-width: none;
        min-width: 0;
    }
}

/* ---- Der Hilfetext selbst ----------------------------------------------- */

.help-body { line-height: 1.6; }
.help-body > :first-child { margin-top: 0; }
.help-body > :last-child { margin-bottom: 0; }

.help-body h2 {
    margin: 1.6rem 0 .5rem;
    font-size: 1.05rem;
    font-weight: 650;
    letter-spacing: -.01em;
}

.help-body h3 {
    margin: 1.2rem 0 .4rem;
    font-size: .95rem;
    font-weight: 650;
}

.help-body p { margin: 0 0 .7rem; }
.help-body ul, .help-body ol { margin: 0 0 .8rem; padding-left: 1.25rem; }
.help-body li { margin-bottom: .3rem; }
.help-body li > ul, .help-body li > ol { margin-top: .3rem; }

.help-body__title { margin-top: 0; }
.help-body__summary { margin: -.3rem 0 1rem; }
.help-body__more { margin-top: 1.5rem; font-size: .85rem; }

.help-body code {
    padding: .1rem .3rem;
    font-size: .875em;
    background: var(--c-surface-sunk);
    border-radius: var(--radius-sm);
}

.help-body kbd {
    padding: .1rem .35rem;
    font-family: inherit;
    font-size: .85em;
    background: var(--c-surface-alt);
    border: 1px solid var(--c-border-strong);
    border-bottom-width: 2px;
    border-radius: var(--radius-sm);
}

.help-body blockquote {
    margin: 0 0 .8rem;
    padding: .5rem .8rem;
    color: var(--c-text-muted);
    background: var(--c-surface-alt);
    border-left: 3px solid var(--c-border-strong);
    border-radius: 0 var(--radius) var(--radius) 0;
}

/* Tabellen in der Hilfe.
   -----------------------------------------------------------------------
   Diese Regeln standen hier von Anfang an, kamen aber nie zum Einsatz: Der
   Markdown-Wandler kannte keine Tabellen und gab sie als Absatz voller
   Striche aus. Genau deshalb fiel niemandem auf, dass sie nie geprüft wurden.
   Seit 1.25.0 entstehen wirklich Tabellen — und die Hilfe ist nur 20 bis 30
   rem breit, weshalb hier mehr nötig ist als Rahmen und Abstände. */
.help-body table {
    /* `block` statt `table`, damit `overflow-x` überhaupt greift: Ein
       `display: table` scrollt nicht, es wächst. Eine vierspaltige Tabelle
       sprengte sonst die Box und schöbe den ganzen Text nach links. */
    display: block;
    width: max-content;
    max-width: 100%;
    margin: 0 0 .9rem;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: .9rem;
    /* Die Bildlaufleiste soll erkennbar sein — ohne sie sieht eine
       abgeschnittene Tabelle einfach nach einer kaputten Tabelle aus. */
    scrollbar-width: thin;
}

.help-body th, .help-body td {
    padding: .35rem .5rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--c-border);
}

.help-body th { font-weight: 650; }

/* Die Ausrichtung aus `:-:` und `---:` kommt als **align-Attribut** aus dem
   Wandler, nicht als style — CommonMarks Tabellen-Erweiterung schreibt
   `<td align="center">`. Ohne diese Regeln stünden die Häkchen einer
   Vergleichstabelle linksbündig statt unter ihrer Überschrift. */
.help-body th[align="center"], .help-body td[align="center"] { text-align: center; white-space: nowrap; }
.help-body th[align="right"], .help-body td[align="right"] { text-align: right; }

/* Das Ziel eines Sprungs aus der Trefferliste soll nicht unter der Kopfzeile
   liegen. */
.help-body h2[id], .help-body h3[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }

/* ---- Inhaltsverzeichnis und Trefferliste -------------------------------- */

.help-toc {
    margin: 0;
    padding: 0;
    list-style: none;
}

.help-toc li {
    padding: .45rem 0;
    border-bottom: 1px solid var(--c-border);
}

.help-toc li:last-child { border-bottom: 0; }
.help-toc a { font-weight: 600; }

.help-results {
    margin: 0;
    padding: 0;
    list-style: none;
}

.help-results__count { margin: 0 0 .6rem; font-size: .85rem; }

.help-results__item + .help-results__item { margin-top: .35rem; }

.help-results__link {
    display: block;
    padding: .5rem .6rem;
    color: inherit;
    text-decoration: none;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    transition: border-color var(--t), background var(--t);
}

.help-results__link:hover {
    background: var(--c-surface-alt);
    border-color: var(--c-border-strong);
}

.help-results__title { display: block; font-weight: 600; }
.help-results__section { font-weight: 400; color: var(--c-text-muted); }

.help-results__excerpt {
    display: block;
    margin-top: .2rem;
    font-size: .85rem;
    line-height: 1.45;
    color: var(--c-text-muted);
}

.help-results mark {
    padding: 0 .1em;
    color: inherit;
    background: var(--c-warning-soft);
    border-radius: 2px;
}

.help-start p:last-child { margin-bottom: 0; }

@media (prefers-color-scheme: dark) {

:root:not([data-theme="light"]) .help-results mark { background: rgb(163 90 9 / .35); }
}

/* Dieselben Werte fuer die ausdrueckliche Wahl „dunkel". Eine
   Medienabfrage laesst sich nicht mit einem Attributselektor verunden,
   deshalb steht der Block zweimal da; erzeugt aus dem Block darueber. */

:root[data-theme="dark"] .help-results mark { background: rgb(163 90 9 / .35); }



/* ---- Der Rundgang ------------------------------------------------------- */

/*
 * Die Abdunkelung liegt unter der Sprechblase, aber ueber allem anderen. Das
 * hervorgehobene Element wird nicht ausgespart, sondern hochgeholt: Ein echtes
 * Loch im Schatten braucht entweder vier Rechtecke oder eine Maske und geht bei
 * jedem Scrollen kaputt. Ein `z-index` auf dem Element selbst tut dasselbe mit
 * einer Zeile.
 */
.tour-backdrop {
    position: fixed;
    z-index: 90;
    inset: 0;
    background: rgb(16 24 40 / .5);
}

.tour-target {
    position: relative;
    z-index: 91;

    /* Der Rahmen liegt aussen, damit das Element seine Groesse behaelt —
       sonst rutscht beim Hervorheben das halbe Board zur Seite. */
    outline: 3px solid var(--c-accent);
    outline-offset: 3px;
    border-radius: var(--radius);
    background: var(--c-surface);
}

.tour-bubble {
    position: fixed;
    z-index: 92;
    width: min(22rem, calc(100vw - 2rem));
    padding: .9rem 1rem 1rem;
    background: var(--c-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-3);
}

.tour-bubble__step {
    margin: 0 0 .2rem;
    font-size: .75rem;
    color: var(--c-text-muted);
}

.tour-bubble__title { margin: 0 0 .35rem; font-size: 1rem; }

.tour-bubble__text {
    margin: 0 0 .9rem;
    font-size: .9rem;
    line-height: 1.5;
}

.tour-bubble__text kbd {
    padding: .1rem .35rem;
    font-family: inherit;
    font-size: .85em;
    background: var(--c-surface-alt);
    border: 1px solid var(--c-border-strong);
    border-bottom-width: 2px;
    border-radius: var(--radius-sm);
}

.tour-bubble__actions { display: flex; align-items: center; gap: .4rem; }
.tour-bubble__spacer { flex: 1; }

/* Wer Bewegung abgeschaltet hat, bekommt keine — das Rollen zum naechsten
   Schritt springt dann. */
@media (prefers-reduced-motion: reduce) {
    .help-panel { transition: none; }
}