/* Guide pages (guides/open.php, includes/guides.php). Each guide sets
   --guide-color (its link and heading color) and, if it has one, the
   wallpaper on body; .guide-dark is a guide written on a black page. The
   guides' own content (old HTML: c_shell tables, [image] screenshots,
   intro images) is styled at the bottom, as the old guide stylesheet had it. */

.guide-sheet { --guide-color: #4081E1; }
.guide-sheet .page-main-col a:not(.btn),
.guide-sheet .guide-toc a { color: var(--guide-color); }
.guide-sheet .page-main-col a:not(.btn):hover,
.guide-sheet .guide-toc a:hover { color: #FAB952; text-decoration: underline; }

/* --- Black pages --- */
.guide-sheet.guide-dark { background: #000; color: #EEE;
    --color-ink: #EEEEEE; --color-ink-muted: #A9B0BA; --color-ink-faint: #8993A1;
    --color-border: #333; --color-bg-subtle: #151515; }
.guide-dark .page-main-col, .guide-dark .page-side-col { color: #EEE; }
.guide-dark .guide-search input { background: #111; color: #EEE; border-color: #444; }

/* --- The guide's header --- */
.guide-sheet .guide-head { display: flex; align-items: center; gap: var(--space-4); padding-bottom: var(--space-4);
    border-bottom: 3px solid var(--guide-color); font-family: var(--font-body); text-align: left; }
.guide-sheet .guide-cover img { display: block; width: 88px; height: 88px; object-fit: cover; border: 1px solid var(--color-border); border-radius: 4px; }
.guide-sheet .guide-head-text { flex: 1; min-width: 0; }
.guide-sheet .guide-head p { margin: 0; }
.guide-sheet .guide-eyebrow { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.guide-sheet .guide-eyebrow a { color: var(--color-ink-muted) !important; }
.guide-sheet .guide-name { font-size: 1.6rem; font-weight: 800; line-height: 1.2; margin: 2px 0 !important; }
.guide-sheet .guide-name a { color: var(--color-ink) !important; text-decoration: none !important; }
.guide-sheet .guide-meta { font-size: var(--text-sm); color: var(--color-ink-muted); }
.guide-sheet .guide-search { display: flex; gap: var(--space-2); flex: 0 1 300px; }
.guide-sheet .guide-search input { flex: 1; min-width: 0; padding: 6px 12px; font: inherit; font-size: var(--text-sm);
    border: 1px solid var(--color-border-strong); border-radius: 999px; }
.guide-sheet .guide-search button { padding: 6px 14px; font: inherit; font-size: var(--text-sm); font-weight: 600; color: #fff;
    background: var(--guide-color); border: 0; border-radius: 999px; cursor: pointer; }
.guide-sheet .guide-links { display: flex; flex-wrap: wrap; gap: var(--space-1) 20px; margin: var(--space-3) 0 var(--space-4);
    font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; text-align: left; }
.guide-sheet .guide-notice { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius);
    font-family: var(--font-body); font-size: var(--text-sm); text-align: left; color: #1F2937; }
.guide-sheet .guide-notice-staff { background: #DCE8FB; }
.guide-sheet .guide-notice-sponsor { background: #F1F1F1; border-left: 4px solid var(--guide-color); }
.guide-page > .ad-unit-banner { margin: var(--space-4) auto var(--space-6); }
@media (max-width: 640px) {
.guide-sheet .guide-head { flex-wrap: wrap; }
.guide-sheet .guide-cover img { width: 64px; height: 64px; }
.guide-sheet .guide-name { font-size: 1.3rem; }
.guide-sheet .guide-search { flex-basis: 100%; }
}

.guide-sheet .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- Previous / next --- */
.guide-sheet .guide-pager { display: flex; justify-content: space-between; gap: var(--space-4); margin: var(--space-8) 0 var(--space-2);
    padding-top: var(--space-4); border-top: 1px solid var(--color-border); font-family: var(--font-body); }
.guide-sheet .guide-pager a { display: flex; flex-direction: column; max-width: 48%; font-weight: 700; text-decoration: none !important; }
.guide-sheet .guide-pager span { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-ink-muted); }
.guide-sheet .guide-pager-next { margin-left: auto; text-align: right; }

/* --- The guide's contents in the right-hand column --- */
.guide-sheet .guide-toc-list, .guide-sheet .guide-toc-list ol { list-style: none; margin: 0; padding: 0; }
.guide-sheet .guide-toc-list > li { padding: 6px 0; border-bottom: 1px solid var(--color-border); font-weight: 600; }
.guide-sheet .guide-toc-list > li:last-child { border-bottom: 0; }
.guide-sheet .guide-toc-list ol { margin: 4px 0 2px 12px; font-weight: 400; font-size: var(--text-sm); }
.guide-sheet .guide-toc-list ol li { padding: 2px 0; }
.guide-sheet .guide-toc-list a { text-decoration: none; }
.guide-sheet .guide-toc-list a.is-current { color: var(--color-ink) !important; font-weight: 800; }
.guide-sheet .guide-toc-list a.is-current::before { content: "\25B8\00a0"; color: var(--guide-color); }
.guide-sheet .guide-toc-tools { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-3) 0 0; font-size: var(--text-xs); font-weight: 600; }

/* --- The guide itself (old HTML, as the old guide stylesheet showed it) --- */
.guide-content { font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 1.55; text-align: left; overflow-x: auto; }
.guide-content h1 { font-size: 1.25rem; font-weight: 700; margin: 0 0 var(--space-3); }
.guide-content h1 a { text-decoration: none; }
.guide-content h2 { font-size: 1.1rem; font-weight: 700; text-decoration: underline; margin: var(--space-3) 0 0; }
.guide-content h3 { font-size: 1rem; font-weight: 700; margin: var(--space-2) 0 0; }
.guide-content img { max-width: 100%; height: auto; }
.guide-content .screenshot-standard { display: block; width: 640px; margin: var(--space-2) auto; border: 1px solid currentColor; }
.guide-content .screenshot-double { width: 320px; max-width: calc(50% - 12px); border: 1px solid currentColor; margin: 0 6px 6px; }
.guide-content .introimage { width: 160px; border: 1px solid currentColor; }
.guide-content .alert { color: red; }
.guide-content .tiny { font-size: 11px; }
.guide-content table { max-width: 100%; }
.guide-content .c_shell { width: 100%; max-width: 723px; border: 1px solid currentColor; border-collapse: collapse; margin: 0; text-align: center; }
.guide-content .c_shell thead td { color: #fff; padding: 2px 5px; font-weight: 700; vertical-align: top; }
.guide-content .c_shell thead tr:nth-child(odd) { background: var(--guide-color); text-align: left; }
.guide-content .c_shell thead tr:nth-child(even) { background: #404040; }
.guide-content .c_shell tbody td { color: #000; padding: 2px 5px; vertical-align: top; }
.guide-content .c_shell tbody tr:nth-child(odd) { background: #fff; }
.guide-content .c_shell tbody tr:nth-child(even) { background: #E7E7E7; }
.guide-content .c_shell_left { text-align: left; }
.guide-content .m1 { background: #404040; color: #fff; width: 36px; height: 27px; text-align: center; }
.guide-content .m2 { background: #E7E7E7; color: #fff; width: 36px; height: 27px; text-align: center; }
.guide-content .m3 { background: brown; color: #fff; width: 36px; height: 27px; text-align: center; }
.guide-content .m4 { background: yellow; color: #fff; width: 36px; height: 27px; text-align: center; }
.guide-content .m5 { background: red; color: #fff; width: 36px; height: 27px; text-align: center; }
.guide-content .writershell, .guide-content .staffshell { background: #E7E7E7; color: #1F2937; padding: 4px; border-radius: 4px; margin: var(--space-2) 0; }
.guide-content .writershell a, .guide-content .staffshell a { color: #1F5FBF !important; }
.guide-content .color-1, .guide-content .color-2, .guide-content .color-3, .guide-content .color-4,
.guide-content .color-5, .guide-content .color-6, .guide-content .color-7, .guide-content .color-8 {
    color: #fff; height: 20px; width: 20px; font-weight: 700; padding: 5px; text-align: center; margin: 5px; }
.guide-content .color-1 { background: #4081E1; } .guide-content .color-2 { background: #CC0000; }
.guide-content .color-3 { background: #056430; } .guide-content .color-4 { background: #634B78; }
.guide-content .color-5 { background: #E47ACC; } .guide-content .color-6 { background: #5D4008; }
.guide-content .color-7 { background: #E57B1D; } .guide-content .color-8 { background: #575758; }

/* The old site stylesheet pins every link to 13px; links in guides follow their text. */
.guide-sheet a { font-size: inherit; }
.guide-sheet .guide-search, .guide-sheet .guide-search * { box-sizing: border-box; }
.guide-sheet .guide-search { min-width: 0; max-width: 100%; }

/* Pages written in the editor: tables get the old guide tables' look. */
.guide-content .guide-body table { width: 100%; border: 1px solid currentColor; border-collapse: collapse; }
.guide-content .guide-body td, .guide-content .guide-body th { border: 0; padding: 3px 6px; vertical-align: top; text-align: left; }
.guide-content .guide-body tr:first-child > * { background: var(--guide-color); color: #fff; font-weight: 700; }
.guide-content .guide-body tr:nth-child(even) > * { background: #E7E7E7; color: #000; }
.guide-content .guide-body tr:nth-child(odd):not(:first-child) > * { background: #fff; color: #000; }
.guide-dark .guide-body figcaption { color: #A9B0BA; }
.guide-editor .form-field { margin-bottom: var(--space-4); }
/* On a black guide, the editor sits on a white card so its text stays readable. */
.guide-dark .guide-editor { background: #fff; color: #16181D; padding: var(--space-4); border-radius: var(--radius);
    --color-ink: #16181D; --color-ink-muted: #5B6470; --color-ink-faint: #8993A1;
    --color-border: #E2E5EA; --color-bg-subtle: #F5F7FA; }
.guide-dark .guide-editor .workspace-title, .guide-dark .guide-editor label { color: #16181D; }
/* The page editor's toolbar stays in view while scrolling: the guide's
   sideways scrolling (for wide old tables) would stop "position: sticky", so
   it's off while editing. */
.guide-content:has(.guide-editor) { overflow: visible; }
/* Less room between the banner above a page and the page's title. The old
   pages wrap their headings in <p>, which leaves empty paragraphs behind. */
.guide-sheet .guide-page > .ad-unit-banner { margin-bottom: var(--space-3); }
.guide-content > p:empty { display: none; }
.guide-content > p:first-child { margin-top: 0; }
.guide-content > p:first-child:has(+ h1) { margin: 0; }
/* "Edit" beside the contents heading, for staff and the guide's writer. */
.guide-sheet .guide-toc-heading { display: flex; justify-content: space-between; align-items: baseline; }
.guide-sheet .guide-toc-edit { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--guide-color) !important; }
.guide-sheet .guide-head + .guide-notice { margin-top: var(--space-4); }
/* With no banner above the page, its title still needs room below the header line. */
.guide-sheet .guide-page > .guide-head + .guide-content { margin-top: 20px; }
/* Search results (guides/index.php action=results). */
.guide-content .guide-results-note { margin: 0 0 var(--space-4); }
.guide-content .guide-results { list-style: none; margin: 0; padding: 0; }
.guide-content .guide-results li { padding: var(--space-3) 0; border-top: 1px solid var(--color-border); }
.guide-content .guide-results li:first-child { border-top: 0; padding-top: 0; }
.guide-content .guide-result-title { font-weight: 700; font-size: 1.05rem; }
.guide-content .guide-result-section { font-size: var(--text-sm); color: var(--color-ink-muted); }
.guide-content .guide-results p { margin: 4px 0 0; color: var(--color-ink-muted); font-size: 14px; }
.guide-content .guide-results mark { background: #FFF1B8; color: inherit; padding: 0 1px; border-radius: 2px; }
.guide-dark .guide-content .guide-results mark { background: #5C4B00; }