/* Guides page — layout + quest tabs (theme vars from site-rs-theme.css) */
.guides-page .layout {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}
@media (min-width: 960px) {
    .guides-page .layout { grid-template-columns: 1fr 340px; align-items: start; }
}

.guides-card { padding: 1rem 1.1rem; }
.guides-hero-cta { margin-top: 1rem; justify-content: center; }

.section-tabs-scroll,
.quest-nav-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: .25rem;
    scrollbar-width: thin;
}
.section-tabs-scroll .section-tab,
.quest-nav-scroll .quest-tab { flex: 0 0 auto; white-space: nowrap; }

.section-tab, .quest-tab, .quest-cat-tab {
    font-family: var(--font);
    font-size: .82rem;
    font-weight: 600;
    padding: .45rem .8rem;
    border-radius: 4px;
    border: 2px solid var(--border);
    background: linear-gradient(180deg, var(--stone-dark) 0%, var(--panel) 100%);
    color: var(--text-dim);
    cursor: pointer;
    box-shadow: var(--panel-inset);
}
.section-tab.active, .quest-tab.active, .quest-cat-tab.active {
    border-color: rgba(0,255,128,.4);
    color: var(--live);
    background: linear-gradient(180deg, #2a4a38 0%, #1a3a28 100%);
}
.section-tab:hover, .quest-tab:hover, .quest-cat-tab:hover {
    border-color: var(--border-gold);
    color: var(--text);
}

.section-tabs, .quest-cat-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: 1rem;
}
.quest-cat-tabs { margin-top: .5rem; }

.section-panel, .quest-panel, .quest-cat-panel { display: none; }
.section-panel.active, .quest-panel.active, .quest-cat-panel.active { display: block; }

.quest-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: .85rem;
}

.guide-intro, .phase-intro, .phase-text {
    margin: 0 0 .85rem;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--text-dim);
}
.guide-phase { margin-bottom: 1.25rem; }
.phase-title {
    margin: 0 0 .5rem;
    font-size: .95rem;
    color: var(--text);
}

.step-list, .hub-list, .checklist {
    list-style: none;
    margin: 0;
    padding: 0;
}
.checklist li {
    position: relative;
    padding: .35rem 0 .35rem 1.1rem;
    font-size: .85rem;
    color: var(--text-body);
}
.checklist li::before {
    content: '◆';
    position: absolute;
    left: 0;
    color: var(--gold);
    font-size: .65rem;
    top: .5rem;
}

.guide-step, .hub-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem .85rem;
    margin-bottom: .5rem;
    border-radius: var(--radius);
    border: 2px solid var(--stone-dark);
    background: rgba(0,0,0,.18);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.guide-step:hover, .hub-item:hover {
    border-color: var(--border-gold);
    background: rgba(0,255,128,.04);
}
.guide-step.active, .hub-item.active {
    border-color: rgba(0,255,128,.45);
    background: rgba(0,255,128,.08);
}
.step-body { flex: 1; min-width: 0; display: flex; gap: .35rem; }
.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: rgba(0,255,128,.12);
    color: var(--live);
    font-size: .75rem;
    font-weight: 800;
    flex-shrink: 0;
}
.step-title { display: block; margin-bottom: .15rem; color: var(--text); }
.step-text { margin: .2rem 0 0; color: var(--text-dim); font-size: .88rem; line-height: 1.5; }
.step-coords {
    margin: .35rem 0 0;
    font-family: var(--mono);
    font-size: .75rem;
    color: var(--gold);
}
.map-link {
    flex-shrink: 0;
    font-size: .78rem;
    font-weight: 600;
    color: var(--accent);
    align-self: center;
}
.prereq {
    margin: 0 0 .75rem;
    padding: .5rem .75rem;
    border-radius: var(--radius);
    background: rgba(153,69,255,.08);
    border: 1px solid rgba(153,69,255,.25);
    color: var(--text-dim);
    font-size: .85rem;
}
.tip-box {
    margin: .65rem 0 0;
    padding: .55rem .75rem;
    border-radius: var(--radius);
    border: 1px solid rgba(245,200,66,.35);
    background: rgba(245,200,66,.06);
    font-size: .82rem;
    color: var(--text-dim);
}
.note { color: var(--text-dim); font-size: .88rem; }

.guides-page .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: .5rem 0;
}
.guides-page .info-table {
    width: 100%;
    min-width: 280px;
    border-collapse: collapse;
    font-size: .82rem;
}
.guides-page .info-table th,
.guides-page .info-table td {
    padding: .45rem .5rem;
    border-bottom: 1px solid var(--stone-dark);
    text-align: left;
}
.guides-page .info-table th {
    color: var(--text-dim);
    font-size: .72rem;
    text-transform: uppercase;
}

.map-sticky { position: sticky; top: 1rem; }
.map-card h2 { margin: 0 0 .35rem; font-size: 1rem; color: var(--live); }
.map-hint {
    margin: 0 0 .65rem;
    font-size: .78rem;
    color: var(--text-dim);
    font-family: var(--mono);
    line-height: 1.45;
}
.map-frame {
    width: 100%;
    height: 260px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: #000;
}
@media (min-width: 960px) {
    .map-frame { height: 420px; }
}
.map-tip {
    margin: .65rem 0 0;
    font-size: .78rem;
    color: var(--text-dim);
}

@media (max-width: 767px) {
    .guides-page .map-sticky { position: static; order: -1; }
    .guides-page .layout { display: flex; flex-direction: column; }
    .map-frame { height: 220px; }
}

/* ── Quest guide check-off + progress (2026-07-23) ───────────────────────── */
.quest-filter { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin:0 0 .6rem; }
.quest-filter .quest-search { flex:1 1 200px; min-width:0; padding:.4rem .6rem; border-radius:6px;
  border:1px solid var(--stone-dark,#3a3324); background:rgba(0,0,0,.25); color:var(--text,#efe7d6); font:inherit; }
.quest-hidedone { display:inline-flex; align-items:center; gap:.35rem; font-size:.85rem; color:var(--text-dim,#b7ab92); cursor:pointer; }
.quest-overall { margin-left:auto; font-size:.85rem; color:var(--accent,#ff981f); font-weight:700; }
.quest-tab.tab-complete::before { content:"✓ "; color:#3fb950; font-weight:700; }
.quest-head { margin:0 0 .75rem; }
.qp-facts { display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:.5rem; }
.qp-chip { font-size:.78rem; padding:.15rem .5rem; border-radius:999px;
  background:rgba(255,152,31,.12); border:1px solid rgba(255,152,31,.35); color:var(--accent,#ff981f); }
.qp-progress { display:flex; align-items:center; gap:.6rem; }
.qp-bar { flex:1 1 auto; height:8px; border-radius:999px; background:rgba(0,0,0,.35); overflow:hidden; }
.qp-bar-fill { display:block; height:100%; width:0; background:linear-gradient(90deg,#ff981f,#3fb950); transition:width .25s ease; }
.qp-count { font-size:.8rem; color:var(--text-dim,#b7ab92); white-space:nowrap; }
.qp-reset { font-size:.75rem; padding:.2rem .5rem; border-radius:6px; cursor:pointer;
  background:transparent; border:1px solid var(--stone-dark,#3a3324); color:var(--text-dim,#b7ab92); }
.qp-reset:hover { color:var(--text,#efe7d6); border-color:var(--accent,#ff981f); }
.qp-done-banner { margin:.5rem 0 0; color:#3fb950; font-weight:600; font-size:.9rem; }
.qp-hint { margin:.4rem 0 0; font-size:.8rem; }
.step-check { display:inline-flex; align-items:center; gap:.4rem; cursor:pointer; }
.step-check input { width:16px; height:16px; accent-color:#3fb950; cursor:pointer; flex:none; }
.guide-step.step-done .step-text { opacity:.55; text-decoration:line-through; }
.guide-step.step-done .step-num { background:#3fb950; color:#10240f; }
@media (max-width:520px){ .quest-overall{ margin-left:0; width:100%; } }