/* ============================================================
   USER GUIDE MODULE
   ============================================================ */

.guide-wrap {
    max-width: 760px;
}

/* ── Search ─────────────────────────────────────────────────── */
.guide-search {
    margin-bottom: var(--space-5);
}
.guide-search input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    box-sizing: border-box;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.guide-search input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-subtle);
}

/* ── Guide cards (one per topic) ────────────────────────────── */
.guide-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-3);
    background: var(--color-bg);
    overflow: hidden;
}

.guide-card__head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    color: var(--color-text);
    font-size: var(--font-size-base);
    font-weight: 600;
    transition: background .12s;
}
.guide-card__head:hover {
    background: var(--color-bg-subtle);
}

.guide-card__icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}
.guide-card__label {
    flex: 1;
}
.guide-card__chevron {
    font-size: .7rem;
    color: var(--color-text-secondary);
    transition: transform .18s;
    flex-shrink: 0;
}
.guide-card__head[aria-expanded="true"] .guide-card__chevron {
    transform: rotate(90deg);
}

/* ── Card body ──────────────────────────────────────────────── */
.guide-card__body {
    padding: 0 var(--space-5) var(--space-5);
    border-top: 1px solid var(--color-border-subtle);
}
.guide-card__overview {
    margin: var(--space-4) 0 var(--space-3);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

/* ── Sections (<details>) ───────────────────────────────────── */
.guide-section {
    border-top: 1px solid var(--color-border-subtle);
    padding: var(--space-1) 0;
}
.guide-section summary {
    padding: var(--space-3) 0;
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    color: var(--color-text);
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.guide-section summary::-webkit-details-marker { display: none; }
.guide-section summary::before {
    content: '›';
    font-size: 1rem;
    color: var(--color-text-secondary);
    transition: transform .15s;
    flex-shrink: 0;
}
.guide-section[open] summary::before {
    transform: rotate(90deg);
}
.guide-section summary:hover {
    color: var(--color-link);
}

.guide-section__body {
    padding: 0 0 var(--space-3) var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    line-height: 1.65;
}
.guide-section__body p  { margin: 0 0 var(--space-3); }
.guide-section__body p:last-child { margin-bottom: 0; }
.guide-section__body ul,
.guide-section__body ol { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
.guide-section__body li { margin-bottom: var(--space-1); }
.guide-section__body strong { font-weight: 600; }
.guide-section__body code {
    font-family: monospace;
    font-size: .85em;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border-subtle);
    border-radius: 3px;
    padding: 1px 5px;
}

/* ── States ─────────────────────────────────────────────────── */
.guide-loading,
.guide-empty,
.guide-error {
    padding: var(--space-10);
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}
.guide-error { color: var(--color-danger); }

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .guide-card__head  { padding: var(--space-3) var(--space-4); }
    .guide-card__body  { padding: 0 var(--space-4) var(--space-4); }
}

/* ============================================================
   ❓ HELP — (2026-10-18). The Help screen, the side drawer, and the ❓ beside a screen's name and on every
   dialog. The text and maps are the guide's (api/data/user_guide.php) and workflowmap.js; help.js draws them.
   ============================================================ */

/* ── The ❓ buttons ──────────────────────────────────────────── */
#topbar > #topbar-title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-help {
    margin: 0 auto 0 var(--space-2);
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}
.topbar-help:hover, .topbar-help:focus-visible { border-color: var(--color-link); background: var(--color-bg-subtle); }
.modal-header .modal-help { margin-left: auto; margin-right: var(--space-1); font-size: 15px; }
.modal-header .modal-help + .modal-close { margin-left: 0; }

/* ── Sidebar: its own line at the bottom ─────────────────────── */
.sidebar-footer .sidebar-help { width: 100%; margin-bottom: var(--space-3); }

/* ── The Help screen ─────────────────────────────────────────── */
.help-wrap {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: var(--space-6);
    max-width: 1280px;
    align-items: start;
}
.help-nav { position: sticky; top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.help-nav__list { display: flex; flex-direction: column; gap: 2px; }
.help-nav__item {
    text-align: left;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    cursor: pointer;
}
.help-nav__item:hover { background: var(--color-bg-subtle); }
.help-nav__item.active { background: var(--color-bg-muted); border-color: var(--color-link); font-weight: 600; }
.help-main { min-width: 0; }

/* ── One topic ───────────────────────────────────────────────── */
.help-topic__head { display: flex; align-items: center; gap: var(--space-3); }
.help-topic__icon { font-size: 1.6rem; }
.help-topic__title { margin: 0; font-size: var(--font-size-xl); font-weight: 700; }
.help-topic__overview { margin: var(--space-3) 0 var(--space-4); color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: 1.6; max-width: 820px; }
.help-map { border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: var(--space-5); background: var(--color-bg); }
.help-map > summary { padding: var(--space-3) var(--space-4); font-weight: 600; font-size: var(--font-size-sm); cursor: pointer; }
.help-map__body { padding: 0 var(--space-4) var(--space-4); }
.help-howto { font-size: var(--font-size-base); font-weight: 700; margin: var(--space-4) 0 var(--space-2); }
.help-sections { max-width: 820px; }
.help-section { border-top: 1px solid var(--color-border-subtle); padding: var(--space-1) 0; scroll-margin-top: var(--space-4); }
.help-section summary {
    padding: var(--space-3) 0; font-size: var(--font-size-sm); font-weight: 600; cursor: pointer; user-select: none;
    color: var(--color-text); list-style: none; display: flex; align-items: center; gap: var(--space-2);
}
.help-section summary::-webkit-details-marker { display: none; }
.help-section summary::before { content: '›'; font-size: 1rem; color: var(--color-text-secondary); transition: transform .15s; flex-shrink: 0; }
.help-section[open] summary::before { transform: rotate(90deg); }
.help-section summary:hover { color: var(--color-link); }
.help-section--here { border-left: 3px solid var(--color-link); padding-left: var(--space-3); background: var(--color-bg-subtle); border-radius: var(--radius-sm); }
.help-section__body { padding: 0 0 var(--space-3) var(--space-4); font-size: var(--font-size-sm); color: var(--color-text); line-height: 1.65; }
.help-section__body p  { margin: 0 0 var(--space-3); }
.help-section__body p:last-child { margin-bottom: 0; }
.help-section__body ul, .help-section__body ol { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
.help-section__body li { margin-bottom: var(--space-1); }
.help-section__body strong { font-weight: 600; }
.help-section__body code { font-family: monospace; font-size: .85em; background: var(--color-bg-subtle); border: 1px solid var(--color-border-subtle); border-radius: 3px; padding: 1px 5px; }

/* ── Search results ──────────────────────────────────────────── */
.help-results { display: flex; flex-direction: column; gap: var(--space-2); max-width: 820px; }
.help-results__count { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.help-result {
    text-align: left; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4); cursor: pointer; display: flex; flex-direction: column; gap: 2px; color: var(--color-text);
}
.help-result:hover { border-color: var(--color-link); }
.help-result__where { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.help-result__title { font-size: var(--font-size-sm); font-weight: 600; }
.help-empty { padding: var(--space-8); text-align: center; color: var(--color-text-secondary); font-size: var(--font-size-sm); }

/* ── The side drawer: over the right of the screen; what is open stays open (Owner 17:55 "Side drawer") ── */
.help-drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(620px, 100vw);
    background: var(--color-bg-surface);
    border-left: 1px solid var(--color-border);
    box-shadow: -12px 0 32px rgba(0,0,0,.28);
    z-index: calc(var(--z-overlay) + 50);      /* above dialogs (400) and overlays (500), under toasts (600) */
    display: flex; flex-direction: column;
    transform: translateX(104%);
    transition: transform .2s ease;
    visibility: hidden;
}
.help-drawer.open { transform: translateX(0); visibility: visible; }
.help-drawer__head {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    padding-top: calc(var(--space-3) + env(safe-area-inset-top, 0px));
    border-bottom: 1px solid var(--color-border-subtle);
}
.help-drawer__brand { font-weight: 700; white-space: nowrap; }
.help-drawer__topic { flex: 1; min-width: 0; }
.help-drawer__body { flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom, 0px)); }
.help-drawer .help-topic__title { font-size: var(--font-size-lg); }

/* ── Narrow screens ──────────────────────────────────────────── */
@media (max-width: 860px) {
    .help-wrap { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
    .help-nav { position: static; }
    .help-nav__list { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: var(--space-2); padding-bottom: var(--space-1); }
    .help-nav__item { white-space: nowrap; border-color: var(--color-border); }
}
@media (max-width: 600px) {
    .help-drawer { width: 100vw; border-left: none; }
    .help-drawer__body { padding: var(--space-3) var(--space-3) calc(var(--space-6) + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .help-drawer { transition: none; } }