/* ============================================================================
   Help
   --------------------------------------------------------------------------
   The book, and the two places it leaks into the rest of the application: a
   pane on the back of a tile, and a panel under a page header.

   Everything here renders Markdown output, so the rules are on bare elements
   inside .help-content (typography.css owns those) and the classes below only
   own the containers. That split is deliberate: the renderer emits <p>, <ul>,
   <h2> and <table> with no classes at all, and nothing in the book can be
   styled by asking an author to remember a class name.
   ========================================================================== */

/* ---- Chapter index ------------------------------------------------------ */

.help-toc { list-style: none; margin: 0; padding: 0; }
.help-toc li {
    padding: var(--space-4) 0;
    border-bottom: var(--border-width) solid var(--border-subtle);
}
.help-toc li:last-child { border-bottom: none; }
.help-toc a {
    display: block;
    font-weight: var(--weight-semibold);
    font-size: var(--text-md);
    color: var(--text-link);
}
/* The one-sentence answer to "what it shows", lifted from the article itself.
   No summary field exists, so this cannot disagree with the entry it links to. */
.help-toc-note {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--text-muted);
}

/* ---- One rendered article ----------------------------------------------- */

.help-article > :first-child { margin-top: 0; }
.help-article > :last-child { margin-bottom: 0; }

/* ---- The short form on a tile ------------------------------------------- */

/* Section one and section four, and nothing else. The second of those is the
   reason the book exists, so it is the one that carries the accent. */
.help-brief { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--text-body); }
.help-brief p { margin: 0 0 var(--space-4); }
.help-brief p:last-of-type { margin-bottom: 0; }
.help-brief-heading {
    margin: var(--space-5) 0 var(--space-3);
    padding-left: var(--space-4);
    border-left: var(--border-width-thick) solid var(--warning);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--warning-on-soft);
}
.help-brief-more {
    display: inline-block;
    margin-top: var(--space-5);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--text-link);
}

/* ---- The help pane on a tile's back face -------------------------------- */

/* The card has two faces and the back one holds two panes: settings and help.
   Exactly one is visible, and ckwm-tiles.js is what switches them. A third
   face would mean rewriting the rotateY(180deg) the flip is built on. */
.tile-pane {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
.tile-pane[hidden] { display: none; }

.tile-help-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-6) var(--space-8);
}
.tile-help-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-8) var(--space-6);
    flex-shrink: 0;
}

/* ---- The panel under a page header --------------------------------------- */

/* A <details>, so the open state, the keyboard behaviour and the toggle event
   htmx loads the article on are all the browser's rather than ours. */
.page-help {
    margin-bottom: var(--space-8);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}
.page-help-summary {
    padding: var(--space-4) var(--space-7);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-body);
    list-style: none;
}
.page-help-summary::-webkit-details-marker { display: none; }
.page-help-summary:hover { color: var(--brand); }
.page-help[open] .page-help-summary {
    border-bottom: var(--border-width) solid var(--border-subtle);
    color: var(--text);
}
.page-help-panel {
    padding: var(--space-6) var(--space-7) var(--space-7);
    max-height: 60vh;
    overflow-y: auto;
}
.page-help-loading { display: flex; justify-content: center; padding: var(--space-6); }