/* ============================================================================
   XF-SHIMS — styling for XenForo-RENDERED content inside redesign surfaces
   (things the static mockup doesn't have: bb_code output, xf:avatar output,
   quick-reply form, page-node block wrappers, server pagination).
   Loaded globally by PAGE_CONTAINER (style 2) AFTER xf-reset.css.
   ========================================================================= */

/* bb_code() bodies mapped onto the mockup's thread typography */
.thread-card .op-card .bbWrapper{font-size:18px;font-weight:500;line-height:1.62;color:var(--ink)}
.thread-card .op-card .bbWrapper p{margin:0 0 12px}
.thread-card .reply .bbWrapper{font-size:14.5px;line-height:1.6;color:var(--ink-soft)}
.thread-card .reply .bbWrapper p{margin:0 0 8px}

/* XF quick-reply + cross-page "more replies" (no mockup counterpart) */
.lbp-thread-reader .lbp-quickreply{margin-top:22px}
.lbp-thread-reader .lbp-morewrap{margin:16px 0}
.lbp-thread-reader .lbp-morewrap .more{font-weight:700;color:var(--blue)}

/* xf:avatar output normalised to the mockup's 84px member-profile circle */
.mp-av .avatar{width:84px!important;height:84px!important;border-radius:50%!important;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:800;color:#fff;line-height:84px;text-decoration:none}
.mp-av .avatar img{width:84px;height:84px;border-radius:50%;object-fit:cover;display:block}
.mp-av .avatar > span{font-size:34px;font-weight:800;color:#fff}

/* XF page-node wrapper stripped so #pageRoot hubs are full-bleed like the mockup */
.block-container:has(#pageRoot){background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important}
.block-body:has(#pageRoot),.block-row:has(#pageRoot){padding:0!important;border:0!important;margin:0!important}

/* XF server pagination renders <a class="more-btn"> where the mockup uses <button> —
   chrome's generic `.more-row a` blue pill outranks board.css's `.more-btn`; re-assert
   the mockup button look at higher specificity. `.more-end` = mockup's inline-styled span. */
.more-row a.more-btn{display:inline-block;font-family:var(--body);font-weight:800;font-size:13.5px;color:var(--orange);background:var(--card);border:1px solid var(--line);border-radius:11px;padding:10px 20px;box-shadow:var(--shadow);transition:border-color .15s,background .15s}
.more-row a.more-btn:hover{border-color:var(--orange);background:var(--paper-2);color:var(--orange)}
.more-row .more-end{color:var(--ink-faint);font-size:12.5px}

/* XF @mentions render as <a class="username"> in bb_code output — style them as the
   mockup's .mention (accent-aware via --orange) inside redesign thread bodies */
.lbp-thread-reader .bbWrapper a.username{color:var(--orange);font-weight:700;background:var(--orange-tint);padding:0 4px;border-radius:5px;text-decoration:none}

/* XF numbered pagination (<xf:pagenav>) — built from the SAME pill component the rest
   of the site uses for interactive chips (.rtab on /reviews, .nchip on /news): card
   background, 1px --line border, 30px radius, orange when active. Bare floating numbers
   with one orange square read as stock XF no matter how the colours are tuned.
   Selectors are 3 classes deep because XF core styles these as
   `.pageNav-main .pageNav-page a`; a 2-class override loses regardless of load order. */
.lbp-pagenav,.pageNav{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:22px 0 6px}
.pageNav-main{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0;margin:0;list-style:none}
/* the <li> itself carries XF's own tinted box — the pill is the <a>, so the row read as
   a pill sitting inside a pale square. Strip the list item back to a bare container. */
.lbp-pagenav .pageNav-main .pageNav-page,
.pageNav-page{
  list-style:none;background:none;border:0;padding:0;margin:0;box-shadow:none;border-radius:0;
}
.lbp-pagenav .pageNav-main .pageNav-page a,
.lbp-pagenav .pageNav-main .pageNav-jump,
.lbp-pagenav .pageNav-jump{
  min-width:40px;height:34px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;
  padding:0 14px;border-radius:30px;
  border:1px solid var(--line);background:var(--card);color:var(--ink-soft);
  font-family:var(--body);font-size:13px;font-weight:700;text-decoration:none;
  transition:color .14s,border-color .14s,background .14s;
}
.lbp-pagenav .pageNav-main .pageNav-page a:hover,
.lbp-pagenav .pageNav-jump:hover{color:var(--ink);border-color:var(--orange);background:var(--card)}
.lbp-pagenav .pageNav-main .pageNav-page--current a,
.lbp-pagenav .pageNav-main .pageNav-page--current a:hover{
  background:var(--orange);border-color:var(--orange);color:#fff;box-shadow:none;
}
/* prev/next carry a label AND an arrow; the shared inline-flex above keeps them on one
   line instead of stacking the arrow under the word. */
.pageNav-jump--prev,.pageNav-jump--next{font-weight:800;gap:6px;line-height:1}
.pageNav-jump--prev i,.pageNav-jump--next i,
.pageNav-jump--prev svg,.pageNav-jump--next svg{display:inline-block;vertical-align:middle}
.pageNav-el--skip,.pageNav-jump.is-disabled{opacity:.4;pointer-events:none}
/* the "…" skip pill matches the numbers instead of sitting as bare text */
.lbp-pagenav .pageNav-main .pageNav-page--skip a{cursor:pointer;color:var(--ink-faint);letter-spacing:.06em}
.lbp-pagenav .pageNav-main .pageNav-page--skip a:hover{color:var(--ink);border-color:var(--orange)}
/* "Go to page" popover — stock XF chrome bled through: a blue accent bar across the
   top (XF's .menu border-top), blue-bordered +/- spinners and a two-tone input border.
   Every border is re-declared rather than only the box, because .menu sets them
   individually and a single `border:` shorthand loses to the later longhand. */
.menu--pageJump{
  background:var(--card);border-radius:var(--r-sm);
  box-shadow:0 14px 34px rgba(10,46,67,.18);overflow:hidden;
}
.menu--pageJump,
.menu--pageJump.menu--structural{
  border:1px solid var(--line);
  border-top:1px solid var(--line);
  border-top-color:var(--line);
}
.menu--pageJump .menu-content{background:var(--card);border:0}
/* the joined number-box: one continuous control, not three bordered boxes */
.menu--pageJump .inputGroup--joined,
.menu--pageJump .inputNumber{
  border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--bg);
}
.menu--pageJump .inputGroup--joined .input,
.menu--pageJump .inputNumber .input{border:0;border-radius:0;background:transparent;box-shadow:none}
/* three classes deep: XF styles these as `.inputNumber .inputNumber-button`, which
   outranks a two-class override no matter how late it loads. */
.menu--pageJump .inputNumber .inputNumber-button,
.menu--pageJump .inputGroup--joined .inputGroup-text.inputNumber-button{
  border:0;border-left:1px solid var(--line);border-radius:0;
  background:transparent;color:var(--ink-soft);width:30px;cursor:pointer;
}
.menu--pageJump .inputNumber .inputNumber-button:hover{background:var(--blue-tint);color:var(--link)}
.menu--pageJump .inputGroup--joined .input:focus{outline:none}
.menu--pageJump .inputGroup--joined:focus-within{border-color:var(--orange-2)}
.menu--pageJump .inputGroup--numbers{gap:8px;align-items:center}
.menu--pageJump .menu-header{
  font-family:var(--display);font-size:13px;font-weight:700;color:var(--ink);
  background:transparent;border-bottom:1px solid var(--line);padding:10px 13px;margin:0;
}
.menu--pageJump .menu-row{padding:11px 13px}
.menu--pageJump .input,
.menu--pageJump .input--number{
  font-family:var(--sans);font-size:13px;color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:8px;padding:6px 9px;box-shadow:none;
}
.menu--pageJump .input:focus{border-color:var(--orange-2);outline:none}
.menu--pageJump .inputNumber-button{background:transparent;border:0;color:var(--ink-soft)}
.menu--pageJump .inputGroup-text{background:transparent;border:0;padding-left:7px}
.menu--pageJump .button{
  font-family:var(--sans);font-size:12.5px;font-weight:800;color:#fff;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--orange-2),var(--orange));border-radius:9px;padding:7px 15px;
  box-shadow:0 2px 8px rgba(156,58,14,.32);
}
.menu--pageJump .button:hover{filter:brightness(1.06)}
.menu--pageJump .button-text{color:#fff}

/* Guest reply gate on threads + the promo pages' "add your experience" block —
   both replace dead ends (no prompt at all / a fake anonymous reply form). */
.lbp-replygate p,.pt-join p{margin:0 0 14px;font-size:14px;color:var(--ink-soft)}
.rg-btns,.pt-join-btns{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.rg-alt,.pt-join-alt{font-family:var(--sans);font-size:13px;font-weight:700;color:var(--link);text-decoration:none;padding:9px 14px;border-radius:9px;border:1px solid var(--line)}
.rg-alt:hover,.pt-join-alt:hover{background:var(--blue-tint)}
a.rf-submit{display:inline-block;text-decoration:none;text-align:center}

/* Breadcrumb trail (PAGE_CONTAINER -> .lbp-crumbs) — the "back up a level" nav on
   interior pages: thread -> its forum -> forum index. Chevron-separated text links. */
.lbp-crumbs{margin:14px 0 2px}
.lbp-crumbs .p-breadcrumbs{display:flex;align-items:center;flex-wrap:wrap;gap:2px 0;padding:0;margin:0;list-style:none;font-family:var(--sans);font-size:12.5px}
.lbp-crumbs .p-breadcrumbs li{list-style:none;display:inline-flex;align-items:center}
/* XF core appends its own trailing separator to every crumb -> a dangling chevron
   after the last item. Ours is drawn BETWEEN items with li + li::before. */
.lbp-crumbs .p-breadcrumbs li::after{content:none;display:none}
.lbp-crumbs .p-breadcrumbs li + li::before{
  content:"";width:5px;height:5px;margin:0 9px;flex:0 0 auto;
  border-right:1.6px solid var(--ink-faint);border-bottom:1.6px solid var(--ink-faint);
  transform:rotate(-45deg);
}
.lbp-crumbs .p-breadcrumbs a{
  color:var(--ink-soft);font-weight:600;text-decoration:none;
  padding:3px 8px;border-radius:8px;transition:background .15s,color .15s;
}
.lbp-crumbs .p-breadcrumbs a:hover{color:var(--link);background:var(--blue-tint)}
.lbp-crumbs .p-breadcrumbs li:last-child a{color:var(--ink);font-weight:700}
/* page-node bodies carry their own flat "← Home" link from the mockup; the trail above
   now says the same thing. Keep the ones that point somewhere the trail doesn't (e.g.
   a review page's "← Reviews"). */
.lbp-crumbs ~ main a.crumb[href="/"]{display:none}

/* ============================================================================
   THEME COHERENCE — one semantic palette, dark-mode repairs, and the fixes whose
   natural home is a file this layer must not fork (css/lbp-chrome.css is Layer 0
   VERBATIM; lbp-review.css / lbp-thread.css likewise). Everything below either
   (a) declares the shared semantic tokens, or (b) is a counter-rule against a
   Layer-0 / XF-core declaration. Never color-mix()/hsl(calc()) — see port/README.
   ========================================================================= */

/* ---- (1) THE semantic set. Orange = brand/CTA (already --orange, accent-aware).
   ONE green = resolved/positive. ONE red = open/negative. Everything else neutral.
   Mirrored verbatim into each mockup page's <style> so the static pages and the
   XF port resolve the same values. ---- */
:root{
  --sem-pos:#1C7A4C; --sem-pos-tint:rgba(28,122,76,.14); --sem-pos-line:rgba(28,122,76,.34);
  --sem-neg:#C0392B; --sem-neg-tint:rgba(192,57,43,.13); --sem-neg-line:rgba(192,57,43,.34);
  --sem-mute:var(--ink-soft); --sem-mute-tint:var(--paper-2);
  /* neutral plate for brand logo tiles — pure #fff in light is fine */
  --logo-plate:#FFFFFF; --logo-plate-line:var(--line);
}
html[data-theme="dark"]{
  --sem-pos:#4FBE87; --sem-pos-tint:rgba(79,190,135,.17); --sem-pos-line:rgba(79,190,135,.36);
  --sem-neg:#F0776A; --sem-neg-tint:rgba(240,119,106,.16); --sem-neg-line:rgba(240,119,106,.36);
  /* #82 — pure-white logo tiles glare against the navy; tinted plate instead */
  --logo-plate:#C7D3DB; --logo-plate-line:rgba(255,255,255,.14);
}

/* ---- (2) Newswire ticker clipped mid-word at both edges.
   The fade belongs on .tick-track in css/lbp-chrome.css, but that file is Layer 0
   (verbatim) — so the mask is re-asserted here, with the -webkit- prefix the
   original omitted (unprefixed mask-image is what silently no-ops). The chrome
   news strip only ever had a RIGHT fade; give it a left one too. ---- */
.tick-track{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34px,#000 calc(100% - 34px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 34px,#000 calc(100% - 34px),transparent 100%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
}
#newsStrip .ns-viewport::before{
  content:"";position:absolute;top:0;left:0;bottom:0;width:38px;z-index:1;
  background:linear-gradient(270deg,transparent,var(--card));pointer-events:none;
}
#newsStrip .ns-viewport::after{z-index:1}

/* ---- (3) #86 — ONE vote component everywhere: upvote, count, downvote.
   thread_view.html emits down/count/up (reading as "down 0 up"); flex `order`
   fixes the reading order without touching the markup. Never wraps. ---- */
.votes{flex-wrap:nowrap;white-space:nowrap}
.votes .vbtn.up{order:1}
.votes .vnum{order:2}
.votes .vbtn.down{order:3}
/* the Casino Watch pair ("💬 12" + "▲ 3") wrapped to two lines in the narrow cards */
.wc-meta,.wc-vote,.wc-rep{white-space:nowrap;flex:0 0 auto}
.wc-meta{display:inline-flex;align-items:center;gap:9px}

/* ---- (4) #97 — XF core ships `a:hover{text-decoration:underline}`. Our cards ARE
   anchors, so hovering one underlined every text node inside it. Kill the bleed and
   confine the whole hover treatment to real pointers, so it can't stick after a tap. ---- */
a.rbcard:hover,a.rbcard:hover *,
a.gcard:hover,a.gcard:hover *,
a.na-rcard:hover,a.na-rcard:hover *,
a.ncard:hover,a.ncard:hover *,
a.wcard:hover,a.wcard:hover *,
a.lrow:hover,a.lrow:hover *,
a.rvf-card:hover,a.rvf-card:hover *{text-decoration:none}
@media (hover:none){
  .rbcard:hover,.gcard:hover,.na-rcard:hover,.ncard:hover,.wcard:hover,.rvf-card:hover,.lrow:hover{
    border-color:var(--line);transform:none;box-shadow:var(--shadow);
  }
}

/* ---- (5) #85 — the XF share row rendered as an unlabelled low-contrast grey strip. ---- */
.shareButtons{
  display:flex;align-items:center;flex-wrap:wrap;gap:9px;
  margin:16px 0 4px;padding:12px 15px;
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-sm);
}
.shareButtons:not(:has(.shareButtons-label))::before{
  content:"Share this thread";flex:0 0 auto;
  font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);
}
.shareButtons .shareButtons-label{
  flex:0 0 auto;font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);opacity:1;
}
.shareButtons .shareButtons-button{
  color:var(--ink-soft);background:var(--card);border:1px solid var(--line);
  border-radius:9px;padding:6px 11px;font-size:12.5px;font-weight:700;text-decoration:none;
  transition:color .15s,border-color .15s,background .15s;
}
.shareButtons .shareButtons-button:hover{color:var(--orange);border-color:var(--orange);background:var(--card);text-decoration:none}

/* ---- (6) Review-detail repairs (source: lbp-review.css, Layer 0 verbatim) ---- */
/* #82 "Fast facts" label column was --ink-faint (#6E828F on #152A37) — near-invisible */
.rc-ff span{color:var(--ink-soft)}
.rc-ff b{color:var(--ink)}
/* #82 score bars shifted hue between themes / palette drift: one accent, one green, one red */
.rc-sb-bar i{background:linear-gradient(90deg,var(--orange-2),var(--orange))}
.rc-sent.pos .rc-sent-lbl{color:var(--sem-pos)}
.rc-sent.mix .rc-sent-lbl{color:var(--ink-soft)}
.rc-sent.cau .rc-sent-lbl{color:var(--sem-neg)}
.rc-sent.pos .rc-meter i{background:var(--sem-pos)}
.rc-sent.mix .rc-meter i{background:var(--ink-faint)}
.rc-sent.cau .rc-meter i{background:var(--sem-neg)}
.rc-like h4,.rc-like .rc-list li::before{color:var(--sem-pos)}
.rc-flag h4,.rc-flag .rc-list li::before{color:var(--sem-neg)}
/* #103 — at mobile width the two columns collapse into one and "+" vs "–" stopped
   reading as opposite. Distinct GLYPH + distinct colour + a tinted marker plate. */
.rc-like .rc-list li::before{content:"\2713"}
.rc-flag .rc-list li::before{content:"\2715"}
.rc-list li{padding-left:27px}
.rc-list li::before{
  top:1px;width:17px;height:17px;line-height:17px;text-align:center;border-radius:5px;
  font-size:11px;font-weight:800;
}
.rc-like .rc-list li::before{background:var(--sem-pos-tint)}
.rc-flag .rc-list li::before{background:var(--sem-neg-tint)}
/* #82 dark-mode logo plate */
.rc-logo{background:var(--logo-plate);border-color:var(--logo-plate-line)}
.rc-lt{background:linear-gradient(135deg,var(--orange-2),var(--orange));border:0}
/* #89 — the community's-take prose ran the full card width (~150 char lines) */
.rc-take p,.rc-take h3,.rc-take h2.rc-sech{max-width:72ch}
.rc-take .rc-body-cols p{max-width:none}

/* ---- (7) #89 — the thread reader was pinned hard left with the right half of the
   viewport empty. Centre the measure inside its column. ---- */
.lbp-thread-reader{margin-left:auto;margin-right:auto}

/* ---- (8) #83 / fade-gradients — the staggered entrance uses `animation-fill-mode:both`
   with a per-index delay, so on a long list the tail sat at opacity 0→30% and read as a
   fade-to-transparent overlay (or a disabled row) while you scrolled. Cap the stagger so
   the final state is reached almost immediately and the reveal is effectively idempotent. ---- */
.reveal{animation-delay:min(var(--d,0ms),240ms)!important}

/* ═══════════════════════════════════════════════════════════════════════════════════
   XF UTILITY PAGES — redesign body, not just redesign chrome        (added 2026-07-30)

   Operator: "the login and new post takes the user to the old design". These routes keep
   XenForo's own body markup inside our header/footer, so they read as a different site.

   SCOPED TO data-template, deliberately: `.block`, `.button` and `.input` are XF-wide
   classes — the thread quick-reply is a `.block`, and the home feed lives in `.p-body`.
   An unscoped restyle would hit both. Template names verified live, not guessed:
     login · register_form · search_form · member_notable · whats_new · whats_new_posts
     · help_page
   ⚠ /forums/<board>/post-thread AND /account/ both render data-template=login for
   guests (XF redirects them), so styling `login` is what fixes "new post" too.

   Everything below uses the theme tokens, so dark mode follows automatically.

   ⚠⚠ EVERY selector here is additionally scoped to `main`. The first version was not, and the
   broad `a:not(.button){color:var(--link)}` reached the HEADER NAV and FOOTER — --link is the
   deep petrol blue #0A2E43, which is exactly the dark chrome's background, so the nav pills and
   all 12 footer links rendered INVISIBLE (measured: footer link colour rgb(10,46,67) on a
   rgb(10,46,67) background). Computed-style checks all passed; only a screenshot showed it.
   Scope XF-body restyles to the XF body. */

/* the card shell */
:is(html[data-template=login],html[data-template=register_form],html[data-template=search_form],
    html[data-template=member_notable],html[data-template=whats_new],html[data-template=whats_new_posts],
    html[data-template=help_page]) main .block{
  background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:0 1px 2px rgba(10,46,67,.05)}
:is(html[data-template=login],html[data-template=register_form],html[data-template=search_form],
    html[data-template=member_notable],html[data-template=whats_new],html[data-template=whats_new_posts],
    html[data-template=help_page]) main .block-container{background:transparent;border:0}
:is(html[data-template=login],html[data-template=register_form],html[data-template=search_form],
    html[data-template=member_notable],html[data-template=whats_new],html[data-template=whats_new_posts],
    html[data-template=help_page]) main .block-body{padding:18px 20px}
:is(html[data-template=login],html[data-template=register_form],html[data-template=search_form],
    html[data-template=member_notable],html[data-template=whats_new],html[data-template=whats_new_posts],
    html[data-template=help_page]) main .block-header{
  padding:15px 20px;border-bottom:1px solid var(--line);background:transparent;
  color:var(--ink);font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:-.01em}

/* typography + links: XF ships its own blue and Segoe stack */
:is(html[data-template=login],html[data-template=register_form],html[data-template=search_form],
    html[data-template=member_notable],html[data-template=whats_new],html[data-template=whats_new_posts],
    html[data-template=help_page]) main .block-body,
:is(html[data-template=login],html[data-template=register_form],html[data-template=search_form],
    html[data-template=member_notable],html[data-template=whats_new],html[data-template=whats_new_posts],
    html[data-template=help_page]) main .blockMessage{color:var(--ink);font-size:14.5px;line-height:1.62}
:is(html[data-template=login],html[data-template=register_form],html[data-template=search_form],
    html[data-template=member_notable],html[data-template=whats_new],html[data-template=whats_new_posts],
    html[data-template=help_page]) main a:not(.button){color:var(--link)}
:is(html[data-template=login],html[data-template=register_form],html[data-template=search_form],
    html[data-template=member_notable],html[data-template=whats_new],html[data-template=whats_new_posts],
    html[data-template=help_page]) main .formRow-label,
:is(html[data-template=login],html[data-template=register_form],html[data-template=search_form],
    html[data-template=member_notable],html[data-template=whats_new],html[data-template=whats_new_posts],
    html[data-template=help_page]) label{color:var(--ink-soft);font-family:var(--sans);font-size:12.5px;font-weight:700}

/* inputs */
:is(html[data-template=login],html[data-template=register_form],html[data-template=search_form],
    html[data-template=member_notable],html[data-template=whats_new],html[data-template=whats_new_posts],
    html[data-template=help_page]) main .input,
:is(html[data-template=login],html[data-template=register_form],html[data-template=search_form],
    html[data-template=member_notable],html[data-template=whats_new],html[data-template=whats_new_posts],
    html[data-template=help_page]) main input[type=text],
:is(html[data-template=login],html[data-template=register_form],html[data-template=search_form],
    html[data-template=member_notable],html[data-template=whats_new],html[data-template=whats_new_posts],
    html[data-template=help_page]) main input[type=password],
:is(html[data-template=login],html[data-template=register_form],html[data-template=search_form],
    html[data-template=member_notable],html[data-template=whats_new],html[data-template=whats_new_posts],
    html[data-template=help_page]) main input[type=email]{
  padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px}
:is(html[data-template=login],html[data-template=register_form],html[data-template=search_form],
    html[data-template=member_notable],html[data-template=whats_new],html[data-template=whats_new_posts],
    html[data-template=help_page]) main .input:focus{outline:2px solid var(--orange);outline-offset:1px}

/* buttons — primary takes the brand gradient, secondary goes quiet */
:is(html[data-template=login],html[data-template=register_form],html[data-template=search_form],
    html[data-template=member_notable],html[data-template=whats_new],html[data-template=whats_new_posts],
    html[data-template=help_page]) main .button--primary,
:is(html[data-template=login],html[data-template=register_form],html[data-template=search_form],
    html[data-template=member_notable],html[data-template=whats_new],html[data-template=whats_new_posts],
    html[data-template=help_page]) main .button--cta{
  border:0;border-radius:10px;padding:9px 20px;color:#fff;
  background:linear-gradient(135deg,var(--orange-2),var(--orange));
  font-family:var(--sans);font-size:13px;font-weight:700}
:is(html[data-template=login],html[data-template=register_form],html[data-template=search_form],
    html[data-template=member_notable],html[data-template=whats_new],html[data-template=whats_new_posts],
    html[data-template=help_page]) main .button:not(.button--primary):not(.button--cta){
  border:1px solid var(--line);border-radius:10px;padding:8px 16px;
  background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:13px;font-weight:700}

/* the missing page heading — these routes emit NO <h1> at all, which is why they read as
   bare white boxes. help_page is excluded: it has its own .block-header whose title varies
   (Terms, Privacy Policy, …) and CSS cannot know which.
   ⚠ Target is `main::before`, the SHARED content container. Two earlier attempts
   matched nothing: `.p-body-main > .blocks` (no such wrapper exists on these routes) and
   `main .blocks` (only /login has a .blocks list — the others hold a single bare .block).
   Verified per-template against the live DOM. The data-template scope is what keeps this
   off the homepage and thread views, which use the same .wrap-wide. */
:is(html[data-template=login],html[data-template=register_form],html[data-template=search_form],
    html[data-template=member_notable],html[data-template=whats_new],html[data-template=whats_new_posts])
  main::before{
  display:block;margin:0 0 16px;color:var(--ink);
  font-family:var(--display);font-size:27px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
html[data-template=login]           main::before{content:"Log in"}
html[data-template=register_form]   main::before{content:"Create your account"}
html[data-template=search_form]     main::before{content:"Search"}
html[data-template=member_notable]  main::before{content:"Members"}
html[data-template=whats_new]       main::before{content:"What\2019s new"}
html[data-template=whats_new_posts] main::before{content:"New posts"}

/* XF's own pale-blue submit bar + grey label gutter read as a different product inside our
   card. Flatten both; the primary button already carries the emphasis. */
:is(html[data-template=login],html[data-template=register_form],html[data-template=search_form],
    html[data-template=member_notable],html[data-template=whats_new],html[data-template=whats_new_posts],
    html[data-template=help_page]) main :is(.formSubmitRow-bar,.block-footer,.formRow-labelWrapper,dl.formRow > dt){
  background:transparent!important;border:0}

/* mobile: XF's own simple pager takes over below the redesign breakpoint unstyled
   (blue links, amber current chip, 2px radius). Give it the redesign pill treatment. */
@media (max-width:600px){
  .pageNavSimple{display:flex;align-items:center;gap:6px;font-family:var(--sans)}
  .pageNavSimple a,.pageNavSimple .pageNavSimple-el{
    padding:7px 11px;border:1px solid var(--line);border-radius:999px;
    background:var(--card);color:var(--ink);font-size:12.5px;font-weight:700;text-decoration:none}
  .pageNavSimple .pageNavSimple-el--current{
    border-color:transparent;color:#fff;background:linear-gradient(135deg,var(--orange-2),var(--orange))}
}