/* ==========================================================================
   Barlin Games — Guide / How-to Layout   ·   .gp  (guide page)
   --------------------------------------------------------------------------
   Drives the CMS how-to pages rendered by <x-public.guide-page />, currently
   /how-to-disable-ad-blocker. Self-contained on purpose: layouts/public has
   no @stack('styles'), so this sheet is linked from the component itself and
   must not depend on game-ui.css being present on the page.

   Token names mirror legal-policy.css's `.lp` namespace so the two documents
   read as one system. Light is the designed state; the dark blocks keep
   parity rather than claiming a finished dark design.

   Every grid column that holds flowing content is minmax(0, …). A bare 1fr
   floors at min-content, which is how a long word or a wide <pre> pushes a
   document past the viewport — the one failure this layout must not have.
   ========================================================================== */

.gp {
    --gp-red:        #E51B23;
    --gp-red-dark:   #C2151C;
    --gp-red-soft:   rgba(229, 27, 35, .07);
    --gp-red-ring:   rgba(229, 27, 35, .18);

    --gp-green:      #15803D;
    --gp-green-soft: rgba(21, 128, 61, .06);
    --gp-green-line: rgba(21, 128, 61, .20);

    --gp-ink:        #0F1115;
    --gp-body:       #3A4048;
    --gp-muted:      #6B7280;
    --gp-faint:      #9CA3AF;

    --gp-canvas:     #F6F7F9;
    --gp-surface:    #FFFFFF;
    --gp-line:       #E7EAF0;
    --gp-line-soft:  #F0F2F6;

    --gp-r:          14px;
    --gp-r-lg:       20px;
    --gp-ease:       cubic-bezier(.22, .61, .36, 1);

    /* One reading measure for every long-form block. Capped in ch so the line
       length stays right when the reader zooms, and so a 4K display widens the
       margins instead of the sentences. */
    --gp-measure:    72ch;

    max-width: var(--bg-w-1240, 1240px);
    margin-inline: auto;
    color: var(--gp-body);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-align: left;
}

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

@media (prefers-color-scheme: dark) {
    /* `:not(.theme-light)` so a reader on a dark OS who has explicitly chosen
       light on this site still gets the light palette — the precedence rule
       legal-policy.css and game-ui.css already use. */
    body:not(.theme-light) .gp {
        --gp-ink: #F3F5F8; --gp-body: #C3C8D2; --gp-muted: #8B93A2; --gp-faint: #6B7280;
        --gp-canvas: #0D0F13; --gp-surface: #14171E;
        --gp-line: #242936; --gp-line-soft: #1C212B;
        --gp-red-soft: rgba(229, 27, 35, .14);
        --gp-green: #4ADE80; --gp-green-soft: rgba(74, 222, 128, .10); --gp-green-line: rgba(74, 222, 128, .26);
    }
}
body.theme-dark .gp {
    --gp-ink: #F3F5F8; --gp-body: #C3C8D2; --gp-muted: #8B93A2; --gp-faint: #6B7280;
    --gp-canvas: #0D0F13; --gp-surface: #14171E;
    --gp-line: #242936; --gp-line-soft: #1C212B;
    --gp-red-soft: rgba(229, 27, 35, .14);
    --gp-green: #4ADE80; --gp-green-soft: rgba(74, 222, 128, .10); --gp-green-line: rgba(74, 222, 128, .26);
}

/* Focus is never removed, only restyled — this page is read by people who
   navigate it with a keyboard. */
.gp :focus-visible:not(input):not(textarea):not(select) {
    outline: 2px solid var(--gp-red);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

.gp-hero {
    padding: 4px 0 30px;
    border-bottom: 1px solid var(--gp-line);
    margin-bottom: 30px;
}

.gp-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.gp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 14px;
    padding: 6px 13px 6px 11px;
    border: 1px solid var(--gp-red-ring);
    border-radius: 999px;
    background: var(--gp-red-soft);
    color: var(--gp-red);
    font-size: .705rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    line-height: 1;
}
.gp-eyebrow svg { flex: none; }

.gp-title {
    margin: 0 0 16px;
    color: var(--gp-ink);
    font-size: clamp(1.95rem, 1.2rem + 2.7vw, 3.4rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.024em;
    /* A long unbroken word in an admin-typed title must wrap, not scroll. */
    overflow-wrap: anywhere;
}
.gp-title__accent { color: var(--gp-red); }

.gp-lede {
    margin: 0;
    max-width: var(--gp-measure);
    color: var(--gp-muted);
    font-size: clamp(.985rem, .93rem + .22vw, 1.1rem);
    line-height: 1.62;
}

/* ── Benefit strip ──────────────────────────────────────────────────────── */

.gp-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.gp-benefit {
    display: flex;
    align-items: center;
    gap: 9px;
    /* Shrinkable, so four chips on a narrow screen wrap instead of widening
       the document. */
    min-width: 0;
    color: var(--gp-ink);
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.35;
}

.gp-benefit__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--gp-red-soft);
    color: var(--gp-red);
}

/* ── Hero wordmark ──────────────────────────────────────────────────────── */
/* Typography only. Hidden below 1100px, where it would compete with the
   heading for the reader's first look. */

.gp-hero__mark { display: none; }

@media (min-width: 1100px) {
    .gp-hero__grid { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; }

    .gp-hero__mark {
        display: block;
        margin: 6px 0 0;
        padding-right: 2px;
        text-align: right;
        border-right: 3px solid var(--gp-red);
        padding-right: 18px;
    }
    .gp-hero__mark span {
        display: block;
        color: var(--gp-ink);
        font-size: .8rem;
        font-weight: 800;
        letter-spacing: .16em;
        line-height: 1.75;
        text-transform: uppercase;
    }
    .gp-hero__mark span:nth-child(n + 3) { color: var(--gp-faint); }
}

/* ── Two-column body ────────────────────────────────────────────────────── */

.gp-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

@media (min-width: 992px) {
    .gp-body { grid-template-columns: minmax(0, 1fr) 330px; gap: 34px; }
}
@media (min-width: 1280px) {
    .gp-body { grid-template-columns: minmax(0, 1fr) 352px; gap: 40px; }
}

.gp-main { min-width: 0; }

.gp-side {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (min-width: 992px) {
    .gp-side {
        position: sticky;
        /* Clears the sticky navbar, and caps its own height so a rail taller
           than the screen scrolls inside itself. Without the cap, a sidebar
           longer than the viewport pins its top and puts its last card
           permanently out of reach. */
        top: 84px;
        max-height: calc(100vh - 104px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-right: 4px;

        /* The rail almost always fits, and a permanent second scrollbar beside
           the page's own reads as a defect rather than an affordance. The
           track stays, so the area is still scrollable by wheel, keyboard and
           touch; only the thumb waits to be approached. */
        scrollbar-width: thin;
        scrollbar-color: transparent transparent;
    }
    .gp-side:hover,
    .gp-side:focus-within { scrollbar-color: var(--gp-line) transparent; }

    .gp-side::-webkit-scrollbar { width: 6px; }
    .gp-side::-webkit-scrollbar-track { background: transparent; }
    .gp-side::-webkit-scrollbar-thumb {
        background: transparent;
        border-radius: 3px;
        transition: background-color .18s var(--gp-ease);
    }
    .gp-side:hover::-webkit-scrollbar-thumb,
    .gp-side:focus-within::-webkit-scrollbar-thumb { background: var(--gp-line); }
}

/* ── Information callout ────────────────────────────────────────────────── */

.gp-note {
    display: flex;
    gap: 14px;
    margin: 0 0 26px;
    padding: 16px 18px;
    border: 1px solid var(--gp-red-ring);
    border-radius: var(--gp-r);
    background: var(--gp-red-soft);
}

.gp-note__icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--gp-surface);
    border: 1px solid var(--gp-red-ring);
    color: var(--gp-red);
}

.gp-note__text { min-width: 0; }

.gp-note__title {
    margin: 2px 0 4px;
    color: var(--gp-ink);
    font-size: .975rem;
    font-weight: 700;
    line-height: 1.4;
}

.gp-note__body p { margin: 0; font-size: .9rem; }
.gp-note__body p + p { margin-top: 6px; }

/* ── Intro prose ────────────────────────────────────────────────────────── */

.gp-intro { margin: 0 0 30px; }
.gp-intro p:last-child { margin-bottom: 0; }
.gp-intro .article-lead {
    font-size: 1.02rem;
    line-height: 1.68;
    color: var(--gp-body);
}

/* ── Section cards ──────────────────────────────────────────────────────── */

.gp-sections {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.gp-card {
    position: relative;
    padding: 20px 22px 22px;
    border: 1px solid var(--gp-line);
    border-radius: var(--gp-r-lg);
    background: var(--gp-surface);
    /* Clears the sticky navbar when a table-of-contents link jumps here. */
    scroll-margin-top: 96px;
    transition: border-color .18s var(--gp-ease), box-shadow .18s var(--gp-ease);
}
.gp-card:hover { border-color: #DBE0EA; box-shadow: 0 1px 2px rgba(15, 17, 21, .04); }
body.theme-dark .gp-card:hover { border-color: #2E3442; box-shadow: none; }

/* The section a table-of-contents link has just jumped to. */
.gp-card.is-current { border-color: var(--gp-red-ring); }

.gp-card__head {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.gp-card__num {
    flex: none;
    min-width: 30px;
    padding-top: 5px;
    color: var(--gp-faint);
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
}

.gp-card__icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid var(--gp-line);
    background: var(--gp-canvas);
    color: var(--gp-red);
}
body.theme-dark .gp-card__icon { background: #191D26; }

.gp-card__main { min-width: 0; padding-top: 2px; }

.gp-card__h {
    margin: 0;
    color: var(--gp-ink);
    font-size: 1.09rem;
    font-weight: 700;
    line-height: 1.34;
    letter-spacing: -.01em;
    overflow-wrap: anywhere;
}

.gp-card__excerpt {
    margin: 5px 0 0;
    max-width: var(--gp-measure);
    color: var(--gp-muted);
    font-size: .885rem;
    line-height: 1.55;
}

/* ── Steps ──────────────────────────────────────────────────────────────── */
/* One list, not a card per step: the steps of a three-step task are a list,
   and boxing each one triples the page's height for no added clarity. */

.gp-steps {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
    border-top: 1px solid var(--gp-line-soft);
    padding-top: 14px;
}
/* Aligns the steps under the heading rather than the card edge, on screens
   wide enough for the indent to read as structure instead of a stray gap. */
@media (min-width: 640px) {
    .gp-steps { margin-left: 56px; }
}

.gp-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    padding: 7px 0;
}

.gp-step__num {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    border-radius: 8px;
    background: var(--gp-red-soft);
    color: var(--gp-red);
    font-size: .74rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.gp-step__text {
    min-width: 0;
    color: var(--gp-body);
    font-size: .925rem;
    line-height: 1.58;
    overflow-wrap: anywhere;
}
.gp-step__text strong { color: var(--gp-ink); font-weight: 650; }

/* A section with no steps is prose — a note, not a procedure. */
.gp-card--note .gp-card__icon { color: var(--gp-muted); }
.gp-card__body { margin: 14px 0 0; }
@media (min-width: 640px) {
    .gp-card__body { margin-left: 56px; }
}
.gp-card__body > :last-child { margin-bottom: 0; }

/* ── Shared prose ───────────────────────────────────────────────────────── */

.gp-prose {
    max-width: var(--gp-measure);
    font-size: .93rem;
    line-height: 1.66;
    overflow-wrap: anywhere;
}
.gp-prose p { margin: 0 0 12px; }
.gp-prose > :last-child { margin-bottom: 0; }
.gp-prose strong { color: var(--gp-ink); font-weight: 650; }
.gp-prose a {
    color: var(--gp-red);
    text-decoration-color: var(--gp-red-ring);
    text-underline-offset: 3px;
}
.gp-prose a:hover { color: var(--gp-red-dark); text-decoration-color: currentColor; }
.gp-prose ul, .gp-prose ol { margin: 0 0 12px; padding-left: 1.25em; }
.gp-prose li { margin: 5px 0; }
.gp-prose code {
    padding: 1px 5px;
    border-radius: 5px;
    background: var(--gp-canvas);
    border: 1px solid var(--gp-line);
    font-size: .875em;
}
/* Wide content scrolls inside its own box; the page never does. */
.gp-prose table { display: block; width: 100%; overflow-x: auto; }
.gp-prose img { max-width: 100%; height: auto; }

/* ── Sidebar panels ─────────────────────────────────────────────────────── */

.gp-panel {
    padding: 16px 18px 18px;
    border: 1px solid var(--gp-line);
    border-radius: var(--gp-r-lg);
    background: var(--gp-surface);
}

.gp-panel__head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 10px;
}

.gp-panel__icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
}
.gp-panel__icon--red   { background: var(--gp-red-soft);   color: var(--gp-red); }
.gp-panel__icon--green { background: var(--gp-green-soft); color: var(--gp-green); }

.gp-panel__h {
    margin: 0;
    color: var(--gp-ink);
    font-size: .985rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.005em;
}

.gp-panel__sub {
    margin: 2px 0 0;
    color: var(--gp-faint);
    font-size: .77rem;
    font-weight: 500;
}

.gp-panel__p {
    margin: 0;
    color: var(--gp-muted);
    font-size: .875rem;
    line-height: 1.58;
}

.gp-panel--done {
    border-color: var(--gp-green-line);
    background: var(--gp-green-soft);
}

/* ── Table of contents ──────────────────────────────────────────────────── */

.gp-toc { padding-bottom: 8px; }

.gp-toc__head {
    display: flex;
    align-items: center;
    gap: 11px;
}
.gp-toc__label { min-width: 0; flex: 1 1 auto; }

.gp-toc__toggle {
    display: none;
    align-items: center;
    gap: 6px;
    flex: none;
    margin: 0;
    padding: 7px 11px;
    border: 1px solid var(--gp-line);
    border-radius: 9px;
    background: var(--gp-surface);
    color: var(--gp-ink);
    font: inherit;
    font-size: .78rem;
    font-weight: 650;
    line-height: 1;
    cursor: pointer;
    /* Comfortably past the 44px touch minimum once padding is counted. */
    min-height: 34px;
}
.gp-toc__toggle:hover { border-color: var(--gp-red-ring); color: var(--gp-red); }

.gp-toc__chev {
    display: inline-flex;
    transition: transform .2s var(--gp-ease);
}
.gp-toc__toggle[aria-expanded="true"] .gp-toc__chev { transform: rotate(180deg); }

.gp-toc__region { padding-top: 10px; }

.gp-toc__list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}
.gp-toc__list li + li { border-top: 1px solid var(--gp-line-soft); }

.gp-toc__list a {
    display: flex;
    align-items: baseline;
    gap: 11px;
    padding: 10px 4px;
    color: var(--gp-body);
    text-decoration: none;
    font-size: .875rem;
    line-height: 1.4;
    border-radius: 8px;
    transition: color .15s var(--gp-ease), background-color .15s var(--gp-ease);
}
.gp-toc__list a:hover { color: var(--gp-red); background: var(--gp-red-soft); }

.gp-toc__num {
    flex: none;
    color: var(--gp-faint);
    font-size: .74rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.gp-toc__text { min-width: 0; overflow-wrap: anywhere; }

.gp-toc__list a.is-current { color: var(--gp-red); font-weight: 650; }
.gp-toc__list a.is-current .gp-toc__num { color: var(--gp-red); }

/*
 * Collapsed state. Applied by the script only, and only while the toggle is
 * on screen — with JavaScript off the class is never added and the list
 * renders open, which is why the markup ships expanded.
 */
@media (max-width: 991.98px) {
    .gp--js .gp-toc__toggle { display: inline-flex; }
    .gp--js .gp-toc[data-collapsed="true"] .gp-toc__region { display: none; }
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

.gp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 14px;
}

.gp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 15px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: .855rem;
    font-weight: 650;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .16s var(--gp-ease),
                border-color .16s var(--gp-ease),
                color .16s var(--gp-ease);
}
.gp-btn svg { flex: none; transition: transform .16s var(--gp-ease); }
.gp-btn:hover svg { transform: translateX(2px); }

.gp-btn--primary {
    background: var(--gp-red);
    color: #fff;
}
.gp-btn--primary:hover { background: var(--gp-red-dark); color: #fff; }

.gp-btn--ghost {
    background: var(--gp-surface);
    border-color: var(--gp-line);
    color: var(--gp-ink);
}
.gp-btn--ghost:hover { border-color: var(--gp-red-ring); color: var(--gp-red); }

/* ── Motion ─────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .gp *, .gp *::before, .gp *::after {
        transition-duration: .001ms !important;
        animation-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Small screens ──────────────────────────────────────────────────────── */

@media (max-width: 575.98px) {
    .gp-hero { padding-bottom: 24px; margin-bottom: 24px; }
    .gp-card { padding: 17px 15px 18px; border-radius: 16px; }
    .gp-card__head { gap: 11px; }
    .gp-card__num { min-width: 24px; font-size: .76rem; }
    .gp-card__icon { width: 36px; height: 36px; border-radius: 10px; }
    .gp-note { padding: 14px; gap: 11px; }
    .gp-panel { padding: 15px 15px 16px; border-radius: 16px; }
    .gp-benefits { gap: 9px 18px; }
    .gp-benefit { font-size: .82rem; }
    .gp-actions .gp-btn { flex: 1 1 100%; }
}

/* ── Host page reset ────────────────────────────────────────────────────── */
/*
 * layouts/public wraps every CMS page body in .card > .card-body. A guide
 * draws its own surfaces, so the wrapper's panel is flattened here rather
 * than by editing the shared layout markup — every other page keeps the card
 * it was designed inside.
 */
body.guide-doc-page #content-box > .card {
    border: 0;
    background: none;
    box-shadow: none;
}
body.guide-doc-page #content-box > .card > .card-body { padding: 0; }
body.guide-doc-page #content-box { margin-bottom: 0 !important; }