/* -------------------------------------------------------------------------
 * Hilfe im Portal
 *
 * Der Panel ist kein Modal. Das ist keine Geschmacksfrage: beim Zeigen auf ein
 * Bedienelement muss das echte Element auf der Seite hervorgehoben werden, und
 * ein Modal legt einen Vorhang darüber und fängt den Fokus ein. Die Seite
 * bleibt deshalb vollständig bedienbar.
 *
 * Er ist auch keine Schublade am rechten Rand mehr, sondern ein frei
 * verschiebbares Kärtchen - so wie das „Template Elemente"-Panel im
 * Template-Editor (template/show.blade.php, jQuery UI draggable). Eine
 * randständige Schublade verdeckte die rechten 400 px jeder Seite und damit
 * rund die Hälfte der Bedienelemente, auf die sie zeigen wollte; dazu die
 * Benutzerleiste samt dem Fragezeichen, mit dem man sie geöffnet hat.
 * ---------------------------------------------------------------------- */

:root {
    /* Die Hausfarbe (dsx4u.css: .text-mediativ, .btn-mediativ) - und zugleich
       die Farbe, in der die Bildpunkte in den Abbildungen des Handbuchs
       stecken (shot_runner.mjs: background:#ED7E23). Die Ziffer, die hier über
       einem Bedienelement erscheint, sieht deshalb genauso aus wie dieselbe
       Ziffer im Bild daneben. */
    --help-accent: #ed7e23;
    --help-accent-dark: #ed5000;
    --help-accent-soft: #fdf1e6;
}

#help-drawer {
    position: fixed;
    /* Vorgabeplatz: unten rechts. Gemessen über Dashboard, Mediathek,
       Templates und Gruppen verdeckt das Panel dort 21 % der Bedienelemente,
       oben rechts dagegen 56 % - die Werkzeugleisten, Suchfelder und
       Baumansichten sitzen alle im oberen Teil der Seite, unten ist Platz.
       jQuery UI schreibt beim Verschieben top/left als Inline-Stil dazu. */
    bottom: 24px;
    right: 24px;
    width: 380px;
    max-width: calc(100vw - 2rem);
    /* Ein Kasten, keine Spalte: nur so viel Höhe, wie der Inhalt braucht. */
    max-height: 60vh;
    background: #fff;
    border: 1px solid #d4d7d5;
    border-radius: 6px;
    /* derselbe Schatten wie .shadow-grey in dsx4u.css */
    box-shadow: 0 0 15px 0 rgba(200, 200, 200, 1);
    /* über den Leisten (1030), aber unter Modals und dem Live-Stream-Fenster.
       Das Template-Panel nimmt 1000000 - das läge über allem und verdeckte
       Dialoge, die der Benutzer gerade beantworten soll. */
    z-index: 1080;
    display: none;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: scale(.98);
    transition: opacity .14s ease-out, transform .14s ease-out;
}

/* `display` lässt sich nicht überblenden, deshalb schaltet .open erst ein und
   .shown eine Bildfolge später sichtbar (help-panel.js). */
#help-drawer.open { display: flex; }
#help-drawer.open.shown { opacity: 1; transform: scale(1); }

/* Verschieben am Kopf, nicht am ganzen Kärtchen - sonst ließe sich der Text
   im Körper nicht mehr markieren. */
#help-drawer .help-head { cursor: grab; }
#help-drawer.dragging .help-head { cursor: grabbing; }

.help-drag-grip {
    color: #b9bdba;
    cursor: grab;
    flex: 0 0 auto;
}

#help-drawer .help-head {
    flex: 0 0 auto;
    padding: .7rem .9rem;
    border-bottom: 1px solid #e3e6e4;
    display: flex;
    align-items: center;
    gap: .5rem;
}

#help-drawer .help-head h2 {
    font-size: 1.05rem;
    margin: 0;
    flex: 1 1 auto;
    line-height: 1.3;
}

#help-drawer .help-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: .9rem;
    font-size: .9rem;
    line-height: 1.5;
}

#help-drawer .help-foot {
    flex: 0 0 auto;
    padding: .6rem .9rem;
    border-top: 1px solid #e3e6e4;
    background: #f7f8f7;
}

/* Das Fragezeichen in der Kopfleiste ------------------------------------ */

.help-nav {
    color: var(--help-accent);
    display: inline-block;
    padding: .1rem .4rem;
    border-radius: 4px;
    line-height: 1;
}

.help-nav:hover { color: var(--help-accent-dark); text-decoration: none; }

/* Auf einer Handbuchseite ist die Hilfe der aktuelle Ort - dieselbe
   Hervorhebung, die die Hauptleiste ihrem aktiven Eintrag gibt. */
.help-nav.active {
    background: var(--help-accent);
    color: #fff;
}

/* Bedienelemente dieser Seite ------------------------------------------- */

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

.help-controls > li {
    display: flex;
    gap: .55rem;
    padding: .4rem .3rem;
    border-radius: 4px;
    cursor: default;
}

.help-controls > li.hit { cursor: pointer; }
.help-controls > li.hit:hover { background: var(--help-accent-soft); }

.help-controls .n {
    flex: 0 0 auto;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: var(--help-accent);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.4rem;
    text-align: center;
}

/* Ein Bedienelement, das es auf dieser Seite gerade nicht gibt: die
   Beschreibung bleibt lesbar, aber sie verspricht kein Hervorheben. */
.help-controls > li.miss { opacity: .45; }
.help-controls > li.miss .n { background: #9aa0a6; }

.help-group { margin-bottom: .9rem; }
.help-group > h4 {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7280;
    margin: 0 0 .25rem;
}

/* Das Hervorheben auf der Seite selbst ---------------------------------- */

.help-highlight {
    outline: 3px solid var(--help-accent) !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, .12);
    transition: outline-color .1s;
}

#help-marker {
    position: absolute;
    z-index: 1090;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 50%;
    background: var(--help-accent);
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    line-height: 1.65rem;
    text-align: center;
    pointer-events: none;
    /* Derselbe weiße Ring wie bei den Bildpunkten im Handbuch, damit die
       Ziffer auch auf einer farbigen Schaltfläche ablesbar bleibt. */
    box-shadow: 0 0 0 2px #fff, 0 1px 5px rgba(0, 0, 0, .55);
}

/* Links --------------------------------------------------------------- */

/* Bootstrap färbt Links blau; im Portal ist die Hausfarbe orange. Bewusst nur
   innerhalb der Hilfe gesetzt - der Rest des Portals bleibt, wie er ist. */
.help-page a,
#help-drawer a {
    color: var(--help-accent);
}

.help-page a:hover,
.help-page a:focus,
#help-drawer a:hover,
#help-drawer a:focus {
    color: var(--help-accent-dark);
}

/* Fließtext des Handbuchs ---------------------------------------------- */

.help-note {
    background: #fff8e1;
    border-left: 3px solid #f0b400;
    padding: .5rem .7rem;
    margin: .6rem 0;
}

.help-figure { margin: 1rem 0; }
.help-figure img { max-width: 100%; height: auto; border: 1px solid #dcdfdd; }
.help-figure figcaption { font-size: .82rem; color: #6b7280; margin-top: .3rem; }

.help-callout-list { font-size: .85rem; padding-left: 1.2rem; margin-top: .4rem; }
.help-callout-list li.mark { background: var(--help-accent-soft); }

.help-deflist dt { font-weight: 600; }
.help-deflist dd { margin-left: 1rem; margin-bottom: .35rem; }

/* Breite Tabellen scrollen in ihrem eigenen Kasten, nicht die Seite. */
.help-tablewrap { overflow-x: auto; }

.help-ref { text-decoration: underline dotted; }

/* Die Handbuchseite ----------------------------------------------------- */

/* Die Seite steht in einem container-fluid, also über die ganze Breite. Der
   Lesetext bekommt seine Zeilenlänge über max-width - und gehört dann in die
   Mitte, nicht an den linken Rand. */
.help-page { max-width: 62rem; margin-inline: auto; }

/* Zwei fixierte Leisten stehen über der Seite. Ohne das landet jeder Sprung
   auf eine Überschrift oder eine Abbildung - also jedes [[kap:…]] und jedes
   [[abb:…]] - hinter ihnen. */
.help-page [id] { scroll-margin-top: 7rem; }
.help-page h1 { font-size: 1.6rem; }
.help-page h2 { font-size: 1.25rem; margin-top: 1.6rem; }
.help-page h3 { font-size: 1.05rem; margin-top: 1.2rem; }
.help-toc a { display: block; padding: .15rem 0; }
.help-hit { border-bottom: 1px solid #eceeed; padding: .6rem 0; }
.help-hit .where { font-size: .8rem; color: #6b7280; }

/* Auf dem Telefon bleibt es, was es war: eine Fläche über die ganze Breite,
   die nicht verschoben wird (help-panel.js schaltet draggable dort ab). */
@media (max-width: 575.98px) {
    #help-drawer {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100vw;
        max-width: 100vw;
        max-height: 80vh;
        border-radius: 6px 6px 0 0;
    }

    .help-drag-grip { display: none; }
}