/* Visual language shared with SlyGolds (github.com/knuutti/sly-gold-sheets,
   styles.css): same layout, components, shadows, radii and typography, so the
   two community sites read as one family. The wiki uses its own night purple
   palette instead of SlyGolds' blue so the sites are still easy to tell apart.
   Dark-only. Posts are coloured by post type (--type-*). */

:root {
    /* SlyGolds shapes and shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
    --radius: 8px;
    --radius-sm: 6px;

    /* Wiki palette: SlyGolds' structure, tinted night purple */
    --bg: #15131e;
    --surface: #1e1a2b;
    --surface-raised: #282238;
    --surface-hover: #362d4c;
    --surface-sunken: #100e17;
    --border: rgba(228, 224, 240, 0.15);
    --border-strong: rgba(228, 224, 240, 0.4);
    --border-hover: rgba(228, 224, 240, 0.6);
    --text: #dee2e6;
    --text-strong: #ffffff;
    --muted: rgba(255, 255, 255, 0.6);

    /* White text on --accent and --accent-hover meets 4.5:1 */
    --accent: #5b3fb5;
    --accent-hover: #6849c7;
    --accent-ring: rgba(139, 108, 240, 0.35);
    --accent-glow: rgba(139, 108, 240, 0.4);
    --highlight: #c3b1ff;
    --link: #c3b1ff;
    --link-hover: #ddd3ff;
    --warn-tint: rgba(243, 255, 74, 0.16);
    --warn-bar: rgba(243, 255, 74, 0.7);
    --focus: #f3ff4a;

    /* Post type colours (card stripe, type badge, type page header) */
    --type-tutorial: #5aaeff;
    --type-resource: #d4af37;
    --type-route: #ff7a93;
    --type-setup: #3fd0b0;
    --type-misc: #b0adbd;

    --content-width: 1100px;
    --measure: 46rem;
    color-scheme: dark;
}

.type-tutorial { --type-color: var(--type-tutorial); }
.type-resource { --type-color: var(--type-resource); }
.type-route { --type-color: var(--type-route); }
.type-setup { --type-color: var(--type-setup); }
.type-misc { --type-color: var(--type-misc); }

* {
    scrollbar-color: #4a3d68 var(--bg);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
    background-color: #4a3d68;
    border-radius: 10px;
    border: 2px solid var(--bg);
}

*, *::before, *::after { box-sizing: border-box; }

/* Fieldsets default to min-width: min-content, which overflows narrow screens. */
fieldset { min-width: 0; }

/* Component display rules must never override the hidden attribute. */
[hidden] { display: none !important; }
/* Login-dependent content. html.signed-in is set by nav-account.js (and before
   the first paint by an inline script in layouts/base.njk). */
html:not(.signed-in) .signed-in-only,
html.signed-in .signed-out-only { display: none !important; }

html {
    -webkit-text-size-adjust: 100%;
    /* --nav-height is the sticky navbar's height, kept up to date by nav.js.
       Jumps to anchors land below it instead of under it. */
    scroll-padding-top: calc(var(--nav-height, 62px) + 8px);
}

/* The navbar stays on screen while scrolling (on phones it scrolls away:
   wrapped onto several lines it would cover too much of a small screen). */
body > header { position: sticky; top: 0; z-index: 900; }

body {
    margin: 0;
    background-color: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    overflow-wrap: break-word;
    /* room for the fixed footer */
    padding-bottom: 48px;
}

h1, h2, h3, h4 {
    color: var(--text-strong);
    font-weight: 500;
    line-height: 1.2;
    margin: 0 0 .5rem;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; margin-top: 2rem; }
h3 { font-size: 1.25rem; }
/* Subheadings on pages (post-type groups on hubs, job groups on episode
   pages) get room above them, so they don't sit right under a card list;
   less when they open the section their h2 starts. Classed headings (card
   titles, panels) keep their own margins. */
main h3, main h4 { margin-top: 1.5rem; }
main :is(h2, .page-head) + :is(h3, h4),
main :is(h2, summary) + section > :is(h3, h4):first-child { margin-top: .5rem; }

p { margin: 0 0 1rem; }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

img, iframe { max-width: 100%; height: auto; }

/* Content is at most --content-width wide, with a gutter that grows with the
   window only up to 48px. (Padding in % inside a max-width box made the
   content narrower the wider the window was.) */
.wrap {
    max-width: calc(var(--content-width) + 2 * var(--gutter));
    margin: 0 auto;
    padding: 0 var(--gutter);
    --gutter: clamp(16px, 5vw, 48px);
}

main.wrap { padding-top: 32px; padding-bottom: 60px; }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    left: 1rem;
    top: -3rem;
    z-index: 2000;
    padding: .5rem 1rem;
    background: var(--accent);
    color: #fff;
    border-radius: var(--radius-sm);
}
.skip-link:focus { top: .5rem; color: #fff; }

/* Section labels, like SlyGolds' .gotd-eyebrow */
.eyebrow {
    display: block;
    color: var(--muted);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    margin: 0 0 14px;
}

/* ── Navbar (SlyGolds .navbar) ─────────────────────────────────────────── */

.navbar {
    position: relative;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding: 8px 16px;
    min-height: 62px;
    background-color: var(--surface-raised);
    box-shadow: var(--shadow-md);
}

.navbar-brand {
    color: var(--text-strong);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
    margin-right: 8px;
}
.navbar-brand:hover { color: var(--text-strong); text-decoration: none; }
.brand-accent { color: var(--highlight); }

.navbar-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-link {
    display: block;
    padding: 8px;
    color: #fff;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-link:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.06);
    text-decoration: none;
}
.nav-link[aria-current="page"] { background-color: rgba(255, 255, 255, 0.06); }

.nav-dropdown { position: relative; }
.nav-dropdown summary { list-style: none; }
.nav-dropdown summary::-webkit-details-marker { display: none; }
.nav-dropdown summary::after {
    content: "";
    display: inline-block;
    margin-left: .3em;
    vertical-align: .2em;
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-left: .3em solid transparent;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 200px;
    padding: 6px 0;
    background-color: var(--surface-raised);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    box-shadow: var(--shadow-md);
}

.dropdown-item {
    display: block;
    padding: 6px 16px;
    color: #fff;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}
.dropdown-item:hover {
    background-color: var(--surface-hover);
    color: #fff;
    text-decoration: none;
}

.navbar-search {
    display: flex;
    gap: 6px;
    margin-left: auto;
    flex: 0 1 18rem;
    min-width: 0;
}

/* Discord login (nav-account.js), at the navbar's right end */
.nav-account { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.navbar:has(.navbar-search) .nav-account { margin-left: 0; }

/* The phone menu (see Mobile below). Elsewhere the drawer's contents sit in
   the navbar as usual, in this order, and the buttons stay hidden. */
.nav-drawer { display: contents; }
.navbar-nav { order: 1; }
.navbar-search { order: 2; }
.nav-account { order: 3; }
.nav-toggles, .nav-drawer-head, .nav-backdrop { display: none; }
.nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: #fff;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
}
.nav-toggle:hover, .nav-toggle[aria-expanded="true"] {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: transparent;
    box-shadow: none;
}
.nav-user {
    max-width: 16rem;
    overflow: hidden;
    color: #fff;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.button-login { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.discord-icon { flex: none; }

/* ── Form controls (SlyGolds .stats-select / buttons) ─────────────────── */

input[type=search] {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    font: inherit;
    font-size: 15px;
    color: #fff;
    background-color: var(--surface-sunken);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input[type=search]::placeholder { color: rgba(255, 255, 255, 0.5); }
input[type=search]:hover { border-color: var(--border-hover); }
input[type=search]:focus {
    outline: none;
    border-color: var(--highlight);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

button, .button {
    display: inline-block;
    padding: 6px 16px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background-color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
button:hover, .button:hover {
    color: #fff;
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    box-shadow: 0 4px 14px var(--accent-glow);
    text-decoration: none;
}

/* Secondary button, like SlyGolds .stats-more / .board-info-btn */
.button-secondary {
    background-color: var(--surface-raised);
    border-color: var(--border-strong);
    color: rgba(255, 255, 255, 0.85);
    font-weight: 400;
}
.button-secondary:hover {
    background-color: var(--surface-hover);
    border-color: var(--border-hover);
    box-shadow: none;
}

.big-search label { display: block; color: var(--muted); font-size: 14px; margin-bottom: 6px; }
.search-row { display: flex; gap: 8px; }
.search-row input[type=search] { font-size: 17px; padding: 8px 12px; }

/* ── Footer (SlyGolds .footer) ─────────────────────────────────────────── */

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    padding: 8px 0;
    background-color: var(--surface-raised);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.35);
}

.footer-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-nav a {
    display: block;
    color: #fff;
    padding: 2px 16px;
    font-size: 15px;
    border-radius: var(--radius-sm);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.footer-nav a:hover {
    color: var(--link-hover);
    background-color: rgba(255, 255, 255, 0.06);
    text-decoration: none;
}

/* ── Home: one centred column ───────────────────────────────────────────── */

/* The search and the browse rows are centred at reading width; the recent
   posts below use the full content width, in as many columns as fit. */
.home-hero { max-width: 44rem; margin: 0 auto; padding-top: 32px; text-align: center; }
.home-hero .big-search { text-align: left; }
.home-hero h1 { font-size: 2.5rem; margin-bottom: 12px; }
.home-hero .lead { font-size: 18px; color: var(--text); margin-bottom: 24px; }
.home-hero .search-row input[type=search] { font-size: 19px; padding: 12px 16px; }
.home-hero .search-row button { font-size: 16px; padding: 10px 22px; }

/* Secondary ways in: plain rows of links under the search box */
.browse { max-width: 44rem; margin: 28px auto 0; }
.browse-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 4px 16px;
    margin: 0 0 8px;
}
.browse-label {
    min-width: 4.5rem;
    color: var(--muted);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
}

/* Sidebar panel, like SlyGolds .gotd-card */
.panel {
    padding: 20px 24px 24px;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-top: 3px solid var(--accent-hover);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}

/* As wide as its longest row, centred under the search. */
.home-recent { width: fit-content; max-width: 100%; margin: 48px auto 0; }
/* One post per row: title, then type, games and date on the same line
   (the details wrap under the title only when the window is too narrow). */
.recent-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.recent-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 12px;
    padding-left: 10px;
    border-left: 2px solid var(--type-color, var(--border-strong));
}
.recent-list a { color: #fff; font-weight: 600; }
.recent-list a:hover { color: #fff; }
.recent-meta { color: var(--muted); font-size: 13px; }
.recent-type { color: var(--type-color); font-weight: 600; }

/* ── Result cards (SlyGolds .stats-card), coloured by post type ────────── */

.card-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }

.card {
    padding: 16px 20px 16px 22px;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm), inset 3px 0 0 0 var(--type-color, var(--accent-hover));
    transition: box-shadow 0.15s ease;
}
.card:hover { box-shadow: var(--shadow-md), inset 3px 0 0 0 var(--type-color, var(--accent-hover)); }

.card-title { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.card-title a { color: #fff; }
.card-title a:hover { color: #fff; }
.card-authors { margin: -2px 0 6px; color: var(--muted); font-size: 14px; }
.card-summary { margin: 0 0 10px; font-size: 15px; }

.card-meta, .tag-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
}

/* Badges, styled like SlyGolds .board-nav-tab */
.badge {
    display: inline-block;
    padding: 2px 10px;
    color: #fff;
    background-color: var(--surface-raised);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    line-height: 1.5;
}
a.badge { transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; }
a.badge:hover {
    color: #fff;
    background-color: var(--surface-hover);
    border-color: var(--border-hover);
    transform: translateY(-1px);
    text-decoration: none;
}
/* The post type badge carries the type colour (set on the card or post). */
.badge-type {
    color: var(--type-color, #fff);
    border-color: var(--type-color, var(--border-strong));
    font-weight: 600;
}
a.badge-type:hover { color: var(--type-color, #fff); border-color: var(--type-color, var(--border-hover)); }

.marker { color: var(--muted); font-weight: 600; }
.marker-outdated {
    color: #fff;
    background-color: var(--warn-tint);
    box-shadow: inset 3px 0 0 0 var(--warn-bar);
    padding: 2px 10px 2px 12px;
    border-radius: var(--radius-sm);
}
.card-date { color: var(--muted); margin-left: auto; white-space: nowrap; }

/* ── Search ────────────────────────────────────────────────────────────── */

.search-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-top: 10px;
}
.search-hint { margin: 0; color: var(--muted); font-size: 13px; }
.search-hint em { color: var(--text); font-style: normal; font-weight: 600; }
.advanced-toggle::after {
    content: "";
    display: inline-block;
    margin-left: .45em;
    vertical-align: .2em;
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-left: .3em solid transparent;
    transition: transform 0.15s ease;
}
.advanced-toggle[aria-expanded="true"] {
    background-color: var(--surface-hover);
    border-color: var(--border-hover);
}
.advanced-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }

/* Filters panel (SlyGolds .board-nav) */
.filters {
    margin-top: 12px;
    padding: 12px 16px;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.filters fieldset {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin: 0;
    padding: 6px 0;
    border: 0;
}
.filters fieldset + fieldset { border-top: 1px solid rgba(228, 224, 240, 0.08); }
.filters legend {
    float: left;
    min-width: 6.5rem;
    padding: 0;
    margin-right: 4px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
}
.filters-foot { display: flex; justify-content: flex-end; padding-top: 6px; }
/* Episode and level/job selects (search page). */
.place-selects { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.place-select { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--muted); }
.place-select select { min-width: 12rem; max-width: 100%; }
#place-filter .chips { width: 100%; margin: 4px 0 0; }
/* Episode, level and job pages that match the query, above the results. */
.place-box ul { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.place-box-item {
    padding: 10px 14px;
    background-color: var(--surface);
    box-shadow: inset 3px 0 0 0 var(--accent-hover);
    border-radius: var(--radius-sm);
}
.place-box-item > a { font-weight: 600; }
.place-box-kind { margin-left: 8px; color: var(--muted); font-size: 14px; }

/* A checkbox rendered as a SlyGolds board tab; the input stays focusable. */
.tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    color: #fff;
    background-color: var(--surface-raised);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.tab input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.tab:hover {
    background-color: var(--surface-hover);
    border-color: var(--border-hover);
    transform: translateY(-1px);
}
.tab:has(input:checked) {
    background-color: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}
.tab:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

.notice {
    padding: 10px 14px;
    color: #fff;
    background-color: var(--warn-tint);
    box-shadow: inset 3px 0 0 0 var(--warn-bar);
    border-radius: var(--radius-sm);
}
/* Search page: link to the filtered category's guide. */
/* Search page: the definition of a glossary term typed exactly. */
.definition-box {
    margin: 0 0 12px;
    padding: 10px 14px;
    background-color: var(--surface);
    box-shadow: inset 3px 0 0 0 var(--link);
    border-radius: var(--radius-sm);
}
.definition-box strong { color: #fff; }
.hub-guide {
    margin: 0 0 12px;
    padding: 10px 14px;
    background-color: var(--surface);
    box-shadow: inset 3px 0 0 0 var(--accent-hover);
    border-radius: var(--radius-sm);
}
.hub-guide a { font-weight: 600; }
/* A confirmation the reader can dismiss, e.g. after submitting a post. */
.success-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    padding: 10px 14px;
    color: var(--text-strong);
    background-color: rgba(63, 208, 176, 0.14);
    box-shadow: inset 3px 0 0 0 var(--type-setup);
    border-radius: var(--radius-sm);
}
.success-note p { flex: 1; margin: 0; }
.search-status { color: var(--muted); margin: 16px 0 12px; }
#show-more { margin-top: 16px; }

/* ── Post page ─────────────────────────────────────────────────────────── */

.post { max-width: var(--measure); }
.post h1 { margin-bottom: 12px; }
.tag-row { margin-bottom: 10px; }
.tag-row-custom a { font-weight: 600; }
.post-meta { color: var(--muted); font-size: 14px; }

.banner-outdated {
    padding: 10px 14px;
    color: #fff;
    background-color: var(--warn-tint);
    box-shadow: inset 3px 0 0 0 var(--warn-bar);
    border-radius: var(--radius-sm);
}

/* Link post call to action: a wide card rather than a small button, so it
   stands out next to body text and still looks deliberate when it is the
   post's only content. Icons are CSS masks, shared with the editor preview. */
.open-resource { margin: 20px 0 24px; }
.resource-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px 14px 14px;
    color: var(--text-strong);
    background-color: var(--surface-raised);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm), inset 3px 0 0 0 var(--type-color, var(--accent-hover));
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
a.resource-link:hover {
    color: var(--text-strong);
    background-color: var(--surface-hover);
    border-color: var(--highlight);
    box-shadow: var(--shadow-md), 0 0 0 3px var(--accent-ring), inset 3px 0 0 0 var(--type-color, var(--accent-hover));
    text-decoration: none;
}
.resource-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    background-color: var(--accent);
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 10px var(--accent-glow);
}
.resource-icon::before,
.resource-arrow {
    content: "";
    display: block;
    background-color: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}
.resource-icon::before {
    width: 22px;
    height: 22px;
    color: #fff;
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3C/svg%3E");
}
.resource-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.resource-label { font-size: 1.1rem; font-weight: 700; line-height: 1.3; }
.resource-link .domain {
    color: var(--highlight);
    font-size: 14px;
    overflow-wrap: anywhere;
}
.resource-arrow {
    flex: none;
    width: 20px;
    height: 20px;
    color: var(--muted);
    transition: transform 0.15s ease, color 0.15s ease;
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E");
}
a.resource-link:hover .resource-arrow { color: var(--highlight); transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
    .resource-arrow { transition: none; }
    a.resource-link:hover .resource-arrow { transform: none; }
}

.post-body { margin-top: 24px; }
.post-body h2 { font-size: 1.4rem; }
/* Room above each section heading, less for subsections; none when the
   heading starts the body. */
.post-body h2 { margin-top: 2rem; }
.post-body :is(h3, h4, h5, h6) { margin-top: 1.5rem; }
.post-body > :is(h2, h3, h4, h5, h6):first-child { margin-top: 0; }
/* Linked sections land below the sticky navbar. */
.post-body :is(h2, h3, h4, h5, h6) { scroll-margin-top: calc(var(--nav-height, 0px) + 1rem); }
/* "#" after each heading: shown on hover and keyboard focus, always on touch screens. */
.heading-anchor {
    margin-left: 0.4em;
    padding: 0 0.15em;
    color: var(--muted);
    font-weight: 400;
    text-decoration: none;
    opacity: 0;
}
.heading-anchor:hover { color: var(--link); }
:is(h2, h3, h4, h5, h6):hover > .heading-anchor, .heading-anchor:focus { opacity: 1; }
@media (hover: none) { .heading-anchor { opacity: 1; } }

/* Contents box (post pages with 3+ sections). The list is in the page twice:
   open on wide screens, a closed <details> on phones. */
.toc { margin-top: 24px; padding: 16px 20px; }
.toc-title { margin: 0 0 8px; font-size: 1.1rem; }
.toc ol { margin: 0; padding-left: 1.4em; }
.toc ol ol { margin-top: 2px; }
.toc li { margin: 4px 0; }
.toc-narrow summary { cursor: pointer; font-weight: 600; color: var(--text-strong); }
.toc-narrow[open] summary { margin-bottom: 8px; }
.toc-narrow { display: none; }
@media (max-width: 767px) {
    .toc-title, .toc-wide { display: none; }
    .toc-narrow { display: block; }
}
.post-body img { display: block; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.post-body blockquote {
    margin: 0 0 1rem;
    padding: 8px 16px;
    background-color: var(--surface);
    border-left: 3px solid var(--type-color, var(--accent-hover));
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.post-body blockquote p:last-child { margin-bottom: 0; }
.post-body code {
    padding: 1px 5px;
    background-color: var(--surface-raised);
    border-radius: 4px;
    font-size: .9em;
}
.post-body pre {
    overflow-x: auto;
    padding: 12px 16px;
    background-color: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.post-body pre code { padding: 0; background: none; }
.post-body table { display: block; overflow-x: auto; border-collapse: collapse; }
.post-body th, .post-body td { padding: 6px 10px; border: 1px solid #3a3150; }
.post-body th { color: #fff; font-weight: 600; background-color: var(--surface); border-bottom: 2px solid var(--accent-hover); }

.related { margin-top: 2rem; }
/* "What links here": compact links, not cards. */
.linked-from { margin-top: 2rem; }
.linked-from-list { margin: 0; padding-left: 1.2em; }
.linked-from-list li { margin: 6px 0; }
/* A [[slug]] link to no post: only seen in the editor preview, as the build
   fails on it. */
.broken-link { color: var(--type-route); text-decoration: underline wavy; }
.edit-post { margin-top: 1rem; }

/* ── Videos (SlyGolds .gotd-frame) ─────────────────────────────────────── */

.video { margin: 2rem 0; }
.video + .video { margin-top: 2.5rem; }
.video-facade, .video-frame {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 0;
    overflow: hidden;
    background-color: #000;
    border: 0;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
}
.video-facade:hover { box-shadow: var(--shadow-lg); background-color: #000; }
.video-facade img { width: 100%; height: 100%; object-fit: cover; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-placeholder {
    display: grid;
    place-items: center;
    height: 100%;
    color: #fff;
    font-size: 1.5rem;
    background-color: var(--surface-sunken);
}
.play-icon {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 68px;
    height: 48px;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.75);
    border-radius: 12px;
    transition: background-color 0.15s ease;
}
.video-facade:hover .play-icon { background-color: var(--accent); }
.play-icon::after {
    content: "";
    position: absolute;
    left: 27px;
    top: 14px;
    border-style: solid;
    border-width: 10px 0 10px 17px;
    border-color: transparent transparent transparent #fff;
}
/* The label sits above its video so it stays with it when several are stacked. */
.video-title {
    margin: 0 0 10px;
    color: var(--text-strong);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
}
.video-watch { margin: 8px 0 0; font-size: 14px; }
/* Sticky navbar: a chapter click scrolls the figure into view below it. */
.video { scroll-margin-top: calc(var(--nav-height, 0px) + 1rem); }
.post-body .video-chapters {
    margin: 12px 0 0;
    padding: 8px 0;
    list-style: none;
    font-size: 15px;
    border-top: 1px solid var(--border);
}
.post-body .video-chapters li { margin: 0; }
.video-chapters a, .video-chapters li > span:first-child { display: flex; gap: 12px; padding: 4px 0; }
.video-chapters a { text-decoration: none; }
.video-chapters a:hover .chapter-title, .video-chapters a:focus-visible .chapter-title { text-decoration: underline; }
.chapter-time { flex: 0 0 4.5em; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.chapter-title { color: var(--text); }
.video-chapters a .chapter-title { color: var(--link); }

/* ── Browse pages ──────────────────────────────────────────────────────── */

.page-head {
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--type-color, var(--accent-hover));
}
.page-head p { color: var(--muted); margin: 0; }
.page-head .lead { margin-top: 6px; color: var(--text); font-size: 17px; }

/* ── Category hubs (/games/<game>/<category>/) ─────────────────────────── */

.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 12px; padding: 0; list-style: none; font-size: 14px; }
.breadcrumb li + li::before { content: "›"; margin-right: 4px; color: var(--muted); }
.breadcrumb [aria-current="page"] { color: var(--text); text-decoration: none; }
/* A post in several places has one trail per line. */
.post-breadcrumb { margin-bottom: 12px; }
.post-breadcrumb ol { margin-bottom: 2px; }
/* "Write a post for this job" on episode, level and job pages. */
.place-write { margin: -8px 0 24px; }
.hub-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
/* Under a card list ("Search this level" on place pages), not touching it.
   Under the page head the margins collapse, so hubs are unchanged. */
main .hub-actions { margin-top: 1.5rem; }
.hub-intro { margin: 0 0 8px; }
.section-intro { color: var(--muted); }
.hub-path { margin: 0; padding-left: 1.6em; }
.hub-path > li { margin: 0 0 12px; padding-left: 4px; }
.hub-path > li::marker { color: var(--type-color, var(--muted)); font-weight: 600; }
.hub-path > li > a { font-weight: 600; }
.hub-path-meta { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 6px; font-size: 13px; vertical-align: middle; }
.hub-note { margin: 4px 0 0; color: var(--muted); font-size: 15px; }
.hub-more > summary { cursor: pointer; margin-bottom: 12px; color: var(--link); font-weight: 600; }

/* ── Change history (/changes/, /posts/<slug>/history/) ───────────────── */

.history-list, .changes-list { margin: 0; padding: 0; list-style: none; }
.history-list li, .changes-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}
.history-list time, .changes-list time { min-width: 7.5rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.history-action { min-width: 4rem; color: var(--text); font-weight: 600; }
.home-more { margin: 12px 0 0; font-size: 15px; }
/* Post editor: "This edit changes the guide's content". */
.check-option { display: inline-flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.check-option input { width: 1.1rem; height: 1.1rem; margin-top: 3px; flex: none; accent-color: var(--accent); }

/* ── Glossary ─────────────────────────────────────────────────────────── */

/* Automatic links to definitions: text colour, dotted underline, so posts
   don't turn into a sea of links. */
a.term { color: inherit; text-decoration: underline dotted var(--link); text-underline-offset: 3px; }
a.term:hover { color: var(--link); }
.letter-bar ul { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 16px; padding: 0; list-style: none; }
.letter-bar a { display: inline-block; min-width: 2rem; padding: 4px 6px; text-align: center; font-weight: 600; border: 1px solid var(--border); border-radius: var(--radius-sm); text-decoration: none; }
.letter-bar a:hover { border-color: var(--border-hover); }
.glossary-letter h2 { scroll-margin-top: calc(var(--nav-height, 0px) + 1rem); }
.glossary { margin: 0 0 1rem; }
.glossary-entry { padding: 10px 0; border-bottom: 1px solid var(--border); }
.glossary dt { color: #fff; font-size: 17px; font-weight: 600; scroll-margin-top: calc(var(--nav-height, 0px) + 1rem); }
.glossary dt:target { color: var(--link); }
.glossary dd { margin: 4px 0 0; }
.glossary dd p { margin: 4px 0 0; }
.glossary-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; }
.glossary-links { font-size: 14px; }

/* ── Episodes, levels and jobs ────────────────────────────────────────── */

.browse-row.place-row { justify-content: flex-start; }
.place-overview h2 { font-size: 1.3rem; }
.place-about { margin: 2px 0 0; color: var(--muted); font-size: 15px; }
.place-list { margin: 0 0 1rem; padding-left: 1.6em; }
.place-list > li { margin: 4px 0; }
.place-list-detailed > li { margin: 0 0 10px; }
.place-description { margin: 0 0 1.5rem; }
.place-empty { margin: 0 0 1.5rem; }
/* The pinned guide post: first on the page, set apart from the lists. */
.place-guide { margin: 0 0 1.5rem; padding: 12px 14px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius); background-color: var(--surface-raised); }
.place-guide h2 { margin: 0 0 8px; }
.badge-place { border-style: dashed; }
.badge-small { padding: 0 8px; font-size: 13px; }
.place-pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 2rem; padding-top: 16px; border-top: 1px solid var(--border); }
.place-pager a { display: flex; flex-direction: column; max-width: 48%; font-weight: 600; }
.place-pager .place-next { margin-left: auto; text-align: right; }
.pager-label { color: var(--muted); font-size: 13px; font-weight: 400; }
@media (max-width: 480px) {
    .place-pager a { max-width: 100%; }
}

/* Category tiles on game pages */
.category-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 12px; margin: 0 0 8px; padding: 0; list-style: none; }
.category-tile { display: block; height: 100%; color: var(--text); text-decoration: none; }
.category-tile:hover { color: var(--text); }
.category-tile .category-name { display: block; color: #fff; font-weight: 600; font-size: 17px; }
.category-tile:hover .category-name { text-decoration: underline; }
.category-tile .count { display: block; margin-top: 2px; }
.category-tile .category-summary { display: block; margin-top: 6px; color: var(--muted); font-size: 14px; }

.tag-index {
    columns: 20rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.tag-index li { padding: 6px 0; break-inside: avoid; }
.tag-description { display: block; color: var(--muted); font-size: 14px; }
.count { color: var(--muted); font-size: 14px; }

/* ── Post editor (/editor/) ────────────────────────────────────────────── */

.editor-page { max-width: none; }
/* The editor is a two-column tool, so it uses the full window width with
   small gutters instead of the reading-width column other pages use. */
main.wrap:has(.editor-page) { --gutter: clamp(16px, 2vw, 32px); max-width: calc(1920px + 2 * var(--gutter)); }
.editor-page .page-head p { max-width: var(--measure); }
/* A maintainer editing someone's submission (/editor/?review=<id>). */
.review-banner { margin-bottom: 16px; }
.review-banner p { margin: 0 0 4px; }

.editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-bottom: 20px;
    padding: 12px 16px;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.editor-mode { color: var(--muted); font-size: 14px; margin-left: auto; }

.editor-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
    align-items: start;
    gap: 24px;
}
.editor-main, .editor-form { min-width: 0; }
.editor-side {
    position: sticky;
    top: calc(var(--nav-height, 62px) + 16px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
.editor-side .panel { padding: 16px 18px 18px; }
/* Checks and Save sit under the form, styled like its sections. */
.editor-main > section.editor-section { padding-bottom: 16px; }
.editor-main > section.editor-section > h2 {
    margin: 0 0 10px;
    color: var(--text-strong);
    font-size: 17px;
    font-weight: 600;
}
.file-view { margin-top: 10px; }
.file-view > summary { cursor: pointer; color: var(--link); font-size: 14px; }

.editor-section {
    margin: 0 0 16px;
    padding: 14px 18px 4px;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
/* The floated legend sits inside the box; content clears it, otherwise nested
   fieldsets (which can shrink to zero width) squeeze in beside it. */
.editor-section > :not(legend) { clear: both; }
.editor-section > legend {
    float: left;
    width: 100%;
    margin-bottom: 10px;
    color: var(--text-strong);
    font-size: 17px;
    font-weight: 600;
}

.field { margin: 0 0 14px; min-width: 0; }
.field > label:not(.tab), .field-label, .field > legend {
    display: block;
    margin: 0 0 4px;
    padding: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    font-weight: 600;
}
.field-help { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.req { color: var(--muted); font-weight: 400; font-size: 12px; margin-left: 4px; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 16px; }
.input-row { display: flex; flex-wrap: wrap; gap: 6px; }
.input-row > input, .input-row > select { flex: 1 1 12rem; }

fieldset.tab-group { display: flex; flex-wrap: wrap; gap: 6px 8px; border: 0; padding: 0; }
fieldset.tab-group > legend { float: left; width: 100%; }
fieldset.tab-group > .field-help { width: 100%; }

input[type=text], input[type=url], input[type=number], input[type=date], select, textarea {
    width: 100%;
    min-width: 0;
    padding: 6px 10px;
    font: inherit;
    font-size: 15px;
    color: #fff;
    background-color: var(--surface-sunken);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
textarea { resize: vertical; line-height: 1.5; }
input[type=file] { color: var(--muted); font-size: 14px; flex: 1 1 12rem; min-width: 0; }
input[type=text]:hover, input[type=url]:hover, input[type=number]:hover, input[type=date]:hover, select:hover, textarea:hover { border-color: var(--border-hover); }
input[type=text]:focus, input[type=url]:focus, input[type=number]:focus, input[type=date]:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--highlight);
    box-shadow: 0 0 0 3px var(--accent-ring);
}
.check { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; }
.check input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent-hover); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; padding: 0; list-style: none; }
.chips:empty { display: none; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 4px 2px 10px;
    background-color: var(--surface-raised);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: 14px;
}
.chip-remove {
    padding: 0 6px;
    background: none;
    border: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.2;
}
.chip-remove:hover { background: none; box-shadow: none; color: #fff; }
/* Suggested tags: dashed outline chips that add the tag when pressed. */
.tag-suggestions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 14px; color: var(--muted); }
#tag-suggestion-list { display: contents; }
.chip-suggest {
    padding: 2px 10px;
    color: var(--link);
    font-size: 14px;
    background: none;
    border: 1px dashed var(--border-strong);
    border-radius: 999px;
    box-shadow: none;
}
.chip-suggest::before { content: "+ "; }
.chip-suggest:hover { color: #fff; background-color: var(--surface-raised); border-style: solid; box-shadow: none; }

/* Editor dialogs (image, link, video, table) */
.modal {
    width: min(34rem, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    padding: 18px 20px 20px;
    color: var(--text);
    background-color: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}
.modal-wide { width: min(56rem, calc(100vw - 32px)); }
.modal::backdrop { background-color: rgba(8, 6, 14, 0.7); }
.modal h2 { margin: 0 0 14px; color: var(--text-strong); font-size: 19px; }
.modal-error { margin: 0 0 10px; color: var(--warn-bar); font-size: 14px; }
.modal-error:empty { display: none; }
.modal-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.table-grid-wrap { overflow-x: auto; margin: 10px 0 14px; }
.table-grid { border-collapse: collapse; }
.table-grid td { padding: 2px; }
.table-grid input, .table-grid select { min-width: 8rem; font-size: 14px; }
.table-grid select { padding: 4px 6px; color: var(--muted); }
.table-grid-head input { font-weight: 600; border-color: var(--accent-hover); }
.grid-col-tools { display: flex; gap: 2px; }
.grid-col-tools select { flex: 1; min-width: 0; }
.grid-row-tools { white-space: nowrap; }
.grid-button { min-width: 28px; padding: 2px 6px; font-size: 14px; line-height: 1.4; }
.grid-button:disabled { opacity: 0.4; cursor: default; }
.table-delete { margin-left: auto; color: var(--type-route); }

/* Post body: a formatting toolbar over the visual view and the Markdown
   (body-editor.js), one box like the other inputs. */
.body-editor {
    position: relative;
    background-color: var(--surface-sunken);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.body-editor:hover { border-color: var(--border-hover); }
.body-editor:has(.rich-body:focus, #f-body:focus) { border-color: var(--highlight); box-shadow: 0 0 0 3px var(--accent-ring); }
.body-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 6px;
    background-color: var(--surface-raised);
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.tool-group { display: flex; flex-wrap: wrap; gap: 2px; }
.tool-group + .tool-group { padding-left: 10px; border-left: 1px solid var(--border); }
.body-toolbar select { width: auto; padding: 5px 8px; font-size: 14px; background-color: var(--surface); }
.tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 15px;
    font-weight: 400;
    font-family: Georgia, "Times New Roman", serif;
    background: none;
    border: 1px solid transparent;
}
.tool:hover { color: #fff; background-color: var(--surface-hover); border-color: transparent; box-shadow: none; }
.tool[aria-pressed="true"] { color: #fff; background-color: var(--surface-hover); border-color: var(--border-strong); }
.tool:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.tool b { font-weight: 700; }
.tool-icon {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* The view switch, like the screenshot's segmented control. */
.body-modes {
    display: flex;
    gap: 2px;
    margin-left: auto;
    padding: 2px;
    background-color: var(--surface-sunken);
    border-radius: var(--radius-sm);
}
.tool-mode { font-family: inherit; font-size: 14px; height: 30px; }
.tool-mode[aria-pressed="true"] { background-color: var(--accent); border-color: var(--accent); }
.tool-mode[aria-pressed="true"]:hover { background-color: var(--accent-hover); }

.rich-body, #f-body {
    display: block;
    width: 100%;
    height: 28rem;
    min-height: 12rem;
    margin: 0;
    padding: 12px 16px;
    overflow: auto;
    resize: vertical;
    background: none;
    border: 0;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
#f-body { font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; font-size: 14px; }
#f-body:focus, .rich-body:focus { outline: none; box-shadow: none; }
.rich-body { position: relative; line-height: 1.6; overflow-wrap: anywhere; }
.rich-body > :first-child { margin-top: 0; }
/* The visual view keeps Markdown levels ("#" is <h1>); the page shows each
   one level down, so these look like the published h2, h3 and h4. */
.rich-body h1 { font-size: 1.4rem; margin: 2rem 0 .5rem; }
.rich-body h2 { font-size: 1.25rem; margin-top: 1.5rem; }
.rich-body h3 { font-size: 1rem; margin-top: 1.5rem; }
.rich-body > :is(h1, h2, h3):first-child { margin-top: 0; }
.rich-body.is-empty::before {
    content: attr(data-placeholder);
    position: absolute;
    color: rgba(255, 255, 255, 0.45);
    pointer-events: none;
}
.rich-body th, .rich-body td { overflow-wrap: normal; }
/* "Edit table", on the table under the pointer or the cursor (body-editor.js). */
.table-edit {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 13px;
    box-shadow: var(--shadow-sm);
}
.table-edit .tool-icon { width: 15px; height: 15px; }
.rich-body img { max-width: 100%; height: auto; cursor: default; }
.rich-body img:hover { outline: 2px solid var(--border-hover); }
/* Videos and raw HTML: kept as they are, changed in Markdown view. */
.rich-atomic {
    margin: 1rem 0;
    padding: 8px 10px 10px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    user-select: none;
}
.rich-atomic-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 6px; color: var(--muted); font-size: 13px; }
.rich-atomic-label { color: var(--highlight); font-weight: 600; }
.rich-atomic-remove { margin-left: auto; padding: 1px 10px; font-size: 13px; background-color: var(--surface-raised); border-color: var(--border-strong); font-weight: 400; }
.rich-atomic-remove:hover { background-color: var(--surface-hover); border-color: var(--border-hover); box-shadow: none; }
.rich-atomic-body .video { margin: 0; }
.rich-atomic-body .video-facade { max-width: 24rem; }

.new-tag { margin: 0 0 14px; padding: 14px 16px; box-shadow: var(--shadow-sm); }


.check-summary { margin: 0 0 8px; font-weight: 600; }
.check-summary.is-ready { color: var(--link); }
.check-summary.has-errors { color: var(--type-route); }
.check-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.check-list li { padding: 6px 10px; border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.check-error { background-color: rgba(255, 122, 147, 0.12); border-left: 3px solid var(--type-route); }
.check-warning { background-color: var(--warn-tint); border-left: 3px solid var(--warn-bar); }
/* Suggestions are advice: quieter than errors and warnings. */
.hints { margin-top: 16px; }
.hints h3 { margin: 0 0 4px; font-size: 1rem; }
.check-hint { color: var(--muted); border-left: 3px solid var(--border-strong); }

.save-steps { margin: 0 0 12px; padding-left: 1.25rem; font-size: 14px; }
.save-steps > li + li { margin-top: 8px; }
.save-steps ul { margin: 4px 0 0; padding-left: 1.1rem; }
.save-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.submit-box .field-help:empty { display: none; }
/* The editor's end point: Submit, with the maintainers' file tools below. */
.editor-finish { border-top: 3px solid var(--accent-hover); }
.editor-finish .submit-box .save-actions button { padding: 10px 22px; font-size: 16px; }
.file-tools { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.file-tools h3 { margin: 0 0 8px; color: var(--text-strong); font-size: 15px; font-weight: 600; }
.submit-box .check-list { margin-top: 8px; }
.submission-list { margin: 0; padding: 0; list-style: none; font-size: 14px; }
.submission { padding: 6px 0; border-top: 1px solid var(--border); }
.submission-title { display: block; color: var(--text-strong); overflow-wrap: anywhere; }
.submission-status { color: var(--muted); font-size: 13px; }
.submission-published .submission-status { color: var(--type-setup); }
.submission-ready .submission-status { color: var(--link); }
.submission-rejected .submission-status, .submission-outdated .submission-status { color: var(--type-route); }
.submission-note { margin: 4px 0 0; color: var(--text); font-size: 13px; }

/* Review page (/editor/review/) */
.review-page h2 { margin: 0 0 8px; font-size: 20px; color: var(--text-strong); }
.review-page section + section { margin-top: 28px; }
.review-status { color: var(--muted); }
.review-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.review-item { padding: 0; }
.review-item > details > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    padding: 14px 18px;
    cursor: pointer;
}
.review-title { color: var(--text-strong); font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.review-meta { color: var(--muted); font-size: 14px; }
.review-details, .review-form { padding: 0 18px 16px; }
.review-details > .eyebrow { margin: 16px 0 6px; }
.review-preview { padding: 14px 18px; background-color: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.review-file { margin-top: 12px; }
.review-file > summary { cursor: pointer; color: var(--link); }
.review-form { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--border); padding-top: 14px; }
.review-form label { font-weight: 600; font-size: 14px; }
.review-item.is-done { opacity: 0.7; }
.review-item.is-done .review-form button { display: none; }
.publish-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; }
.publish-bar .review-result { margin: 0; flex: 1 1 16rem; }
.publish-problems .check-list { margin: 6px 0 0; }
.diff { white-space: pre-wrap; overflow-wrap: anywhere; }
.diff span { display: block; }
.diff-add { color: #9df0c8; background-color: rgba(63, 208, 176, 0.14); }
.diff-del { color: #ffb3c1; background-color: rgba(255, 122, 147, 0.14); }
.diff-skip { color: var(--muted); font-style: italic; }
.button-small { padding: 2px 10px; font-size: 13px; }

.file-output {
    margin: 6px 0;
    max-height: 32rem;
    overflow: auto;
    padding: 10px 12px;
    background-color: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
/* The preview fills the sticky right column, scrolling on its own. */
.preview { max-height: calc(100vh - var(--nav-height, 62px) - 150px); overflow: auto; }
.preview .post h1 { font-size: 1.6rem; }

@media (max-width: 960px) {
    .editor-layout { grid-template-columns: 1fr; }
    .editor-side { position: static; }
}

/* ── Mobile (SlyGolds breakpoints) ─────────────────────────────────────── */

@media (max-width: 767px) {
    body { padding-bottom: 0; }
    .footer { position: static; }
    body > header { position: static; }
    html { scroll-padding-top: 0; }
    .navbar-search { flex-basis: 100%; margin-left: 0; }
    .nav-account { margin-left: 0; }
    .nav-user { max-width: 60vw; }
    /* Menus span the navbar instead of hanging off their toggle. */
    .nav-dropdown { position: static; }
    .dropdown-menu { left: 16px; right: 16px; min-width: 0; top: auto; }
    .dropdown-item { white-space: normal; }
    .home-hero h1 { font-size: 2rem; }
    .tab { font-size: 12px; padding: 4px 10px; }
    .filters legend { font-size: 12px; min-width: 100%; margin-bottom: 2px; }
    .card-date { margin-left: 0; }
    .editor-mode { margin-left: 0; width: 100%; }
    .body-modes { margin-left: 0; }
    .tool-mode span { display: none; }

    /* With JavaScript (html.js), the navbar is one row: the brand, then a
       search button and a menu button. Search opens as a row below; the menu
       is a drawer from the right (nav.js), so reading gets the screen. */
    html.js .navbar { z-index: 1000; min-height: 56px; padding: 6px 8px 6px 16px; }
    html.js .nav-toggles { display: flex; gap: 4px; margin-left: auto; }
    html.js .navbar-search { display: none; order: 5; padding: 2px 8px 6px 0; }
    html.js .navbar.search-open .navbar-search { display: flex; }
    html.js .nav-drawer {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1100;
        display: flex;
        flex-direction: column;
        width: min(20rem, 85vw);
        padding: 6px 16px 24px;
        overflow-y: auto;
        overscroll-behavior: contain;
        background-color: var(--surface-raised);
        box-shadow: var(--shadow-lg);
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.2s ease, visibility 0s linear 0.2s;
    }
    html.js .nav-drawer.open { transform: none; visibility: visible; transition: transform 0.2s ease; }
    html.js .nav-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 -8px 8px 0;
        padding-bottom: 6px;
        border-bottom: 1px solid var(--border);
    }
    .nav-drawer-title { color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
    html.js .nav-drawer .navbar-nav { flex-direction: column; align-items: stretch; }
    html.js .nav-drawer .nav-link { padding: 11px 8px; font-size: 1.05rem; }
    html.js .nav-drawer details[open] > summary::after { transform: rotate(180deg); }
    html.js .nav-drawer .dropdown-menu {
        position: static;
        padding: 0 0 6px 12px;
        background: transparent;
        border: 0;
        box-shadow: none;
    }
    html.js .nav-drawer .dropdown-item { padding: 9px 8px; border-radius: var(--radius-sm); }
    html.js .nav-drawer .nav-account { flex-wrap: wrap; margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--border); }
    html.js .nav-drawer .nav-user { max-width: 100%; flex-basis: 100%; }
    html.js .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 1050; background: rgba(0, 0, 0, 0.55); }
    html.nav-open { overflow: hidden; }
}

@media (max-width: 380px) {
    html.js .navbar-brand { font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
}