/* ============================================================
   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-primary);
}

.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); }
}