/* ===========================================================================
   UFC.GG — frontend enhancement layer
   ===========================================================================

   Loaded AFTER style-ufc-dark.css and custom.css, so it refines the ported
   template rather than replacing it. Kept in its own file deliberately: the
   whole visual pass can be disabled by removing one <link>, which makes it
   safe to iterate on without risking the working theme underneath.

   Design intent: futuristic and technical, but restrained enough to read as a
   professional publication rather than a game UI. The rules below lean on
   three devices and reuse them consistently instead of decorating everything:

     1. Edge lighting   — a hairline highlight on the top edge of surfaces,
                          as though lit from above. Cheap, and it gives depth
                          without heavy shadows or borders.
     2. Angular cuts    — a clipped corner on primary surfaces and actions.
                          Reads as combat-sport/HUD, and echoes the octagon.
     3. Accent glow     — a soft red bloom used ONLY on hover/active/focus,
                          so it signals interactivity rather than being noise.

   Colours are derived from the template's own palette (#f34141 accent,
   #292c31 panels, #31404b borders) so this sits with the theme, not on top
   of it.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------------------- */

:root {
    /* Tells the browser which way round the page is, so the parts of the UI
       CSS cannot reach - scrollbars, the caret, spin buttons, date pickers,
       the autofill wash - come out matching. Without it a light page keeps
       dark scrollbars, which is the single most obvious "this theme is half
       finished" tell. Declared as a plain property here and re-declared under
       [data-theme="light"] below, so it needs no script. */
    color-scheme: dark;

    /* Accent ramp, built around the theme's existing #f34141. */
    --u-accent: #f34141;
    --u-accent-bright: #ff5a5a;
    --u-accent-deep: #c81f1f;
    --u-accent-glow: rgba(243, 65, 65, .45);
    --u-accent-soft: rgba(243, 65, 65, .12);

    /* Surfaces, darkest to lightest. */
    --u-bg: #131417;
    --u-surface: #1c1f24;
    --u-surface-2: #22262c;
    --u-surface-3: #2a2f36;

    /* Lines. Hairline is for edge lighting, line for real borders. */
    --u-hairline: rgba(255, 255, 255, .07);
    --u-line: #31404b;

    /* Text, brightest to quietest.

       --u-text-muted was used in six places before it was ever defined, which
       makes the whole declaration invalid at computed-value time: the property
       is dropped and the element silently inherits its parent's colour. It
       looked fine by luck. */
    --u-text: #e9ecef;
    --u-text-muted: #c2c6cc;
    --u-text-dim: #9a9da2;
    --u-text-faint: #6b7075;

    /* Overlays. Every rgba(255,255,255,x) and rgba(0,0,0,x) in this file
       assumes a dark ground; naming the two directions lets light mode invert
       them in one place instead of in ninety. */
    --u-raise: rgba(255, 255, 255, .04);
    --u-raise-2: rgba(255, 255, 255, .07);
    --u-sink: rgba(0, 0, 0, .28);
    --u-shadow: rgba(0, 0, 0, .5);

    /* Motion. One easing curve everywhere keeps the whole UI feeling like
       one object rather than a collection of independently animated parts. */
    --u-ease: cubic-bezier(.2, .7, .3, 1);
    --u-fast: .16s;
    --u-slow: .32s;

    /* The angular cut, as a single value so every clipped surface agrees. */
    --u-cut: 14px;
}

/* ---------------------------------------------------------------------------
   1b. Light theme

   Dark is the default and always will be: the template, the imagery and the
   whole visual language were built for it. Light exists because some people
   need it - bright rooms, low vision, or simply preference - and a site that
   cannot be read in daylight is a site those people leave.

   Only the tokens are redefined. Nothing structural changes, so a rule written
   once works in both modes as long as it uses a token rather than a literal.

   Scoped to [data-theme="light"] on <html>, set before first paint by an
   inline script so the page never flashes the wrong palette.
   --------------------------------------------------------------------------- */

:root[data-theme="light"] {
    color-scheme: light;

    /* The accent holds. It is the brand, and it reads on both grounds -
       though it is darkened slightly here, because #f34141 on white is
       fractionally too hot to sit next to body copy. */
    --u-accent: #d92d2d;
    --u-accent-bright: #f34141;
    --u-accent-deep: #a81717;
    --u-accent-glow: rgba(217, 45, 45, .28);
    --u-accent-soft: rgba(217, 45, 45, .10);

    /* Surfaces invert: the darkest token becomes the lightest ground, so
       "surface-3 sits above surface-2" still holds. */
    --u-bg: #f4f5f7;
    --u-surface: #ffffff;
    --u-surface-2: #ffffff;
    --u-surface-3: #f0f1f4;

    --u-hairline: rgba(0, 0, 0, .09);
    --u-line: #d6dae0;

    --u-text: #16181c;
    --u-text-muted: #454a52;
    --u-text-dim: #5f656e;
    --u-text-faint: #808790;

    /* Overlays flip direction: on a light ground you sink with black and
       raise with white, which is the opposite of dark mode. */
    --u-raise: rgba(0, 0, 0, .03);
    --u-raise-2: rgba(0, 0, 0, .06);
    --u-sink: rgba(0, 0, 0, .04);
    --u-shadow: rgba(16, 18, 22, .14);
}

/* ---------------------------------------------------------------------------
   2. Typography

   Rajdhani carries headings, numerals and labels: condensed, geometric and
   technical, which is what does most of the "futuristic" work. Montserrat
   stays for body copy, because a condensed face is tiring to read at length.
   --------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
.page-heading__title,
.card-title,
.widget__title h4,
.main-nav__list > li > a,
.btn,
.label,
.posts__cat-label {
    font-family: Rajdhani, Montserrat, system-ui, sans-serif;
    letter-spacing: .01em;
}

.page-heading__title {
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.08;
}

/* Numerals — records, counts, countdowns — get tabular figures so columns of
   digits line up instead of jittering as values change. */
.fighter-card__record,
.record-grid__cell strong,
.rankings-table__position,
.p4p-row__position,
.countdown,
.board-row__stats,
.thread-row__stats,
.tier-card__price,
.product-card__price,
.product-detail__price {
    font-family: Rajdhani, Montserrat, system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
}

/* Small uppercase labels read as technical rather than shouty when the
   tracking is opened up. */
.label,
.posts__cat-label,
.admin-node__type,
.bout-card__billing,
.record-grid__cell span {
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
}

body {
    background: var(--u-bg);
    color: var(--u-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---------------------------------------------------------------------------
   3. Surfaces

   The ::before hairline is the "edge lighting" device. It fades out toward
   the right so the highlight looks directional rather than like a border.
   --------------------------------------------------------------------------- */

.card,
.widget--sidebar {
    position: relative;
    background: linear-gradient(180deg, var(--u-surface-2) 0%, var(--u-surface) 100%);
    border: 1px solid var(--u-hairline);

    /* The angular cut, not a 10px radius. Every other surface in the design -
       buttons, chips, avatars, bout cards - is cut at the corners, and a
       rounded card sitting among them was the one shape that did not belong. */
    border-radius: 2px;
    clip-path: polygon(
        var(--u-cut) 0, 100% 0,
        100% calc(100% - var(--u-cut)), calc(100% - var(--u-cut)) 100%,
        0 100%, 0 var(--u-cut)
    );

    overflow: hidden;
    transition: border-color var(--u-slow) var(--u-ease),
                transform var(--u-slow) var(--u-ease),
                box-shadow var(--u-slow) var(--u-ease);
}

.card::before,
.widget--sidebar::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, .18) 0%,
        rgba(255, 255, 255, .05) 45%,
        transparent 100%);
    pointer-events: none;
}

/* Scoped to real cards. The footer and pushy-panel use the
   widget--footer / widget--side-panel variants, which the template renders
   without card chrome - styling those here would box in the footer columns. */
.card__header {
    background: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent);
    border-bottom: 1px solid var(--u-hairline);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.card__header h4,
.widget--sidebar .widget__title h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    position: relative;
    padding-left: 12px;
}

/* Accent tick before every card title — a single repeated motif does more for
   coherence than varied ornamentation. */
.card__header h4::before,
.widget--sidebar .widget__title h4::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 14px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--u-accent-bright), var(--u-accent-deep));
    box-shadow: 0 0 8px var(--u-accent-glow);
}

.card__content { padding: 18px; }

/* ---------------------------------------------------------------------------
   4. Page heading

   The angular cut plus a faint grid texture. The grid is drawn with two
   repeating gradients rather than an image, so it costs no request and scales
   cleanly on any display.
   --------------------------------------------------------------------------- */

.page-heading {
    position: relative;

    /* Above .site-content, which is the actual reason this looked washed out.
     *
     * .site-content sets z-index: 0, which makes it a stacking context, and it
     * comes after .page-heading in the DOM - so its fixed backdrop and scrim
     * were painting straight over the heading. The heading was never
     * transparent; it was underneath the artwork. */
    z-index: 1;

    /* The flat black layer goes FIRST in the stack, which puts it on top of
       the gradients below it. Backgrounds paint in reverse order, so listing
       it last would bury it under the surface gradient and change nothing. */
    background:
        linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, .4)),
        radial-gradient(120% 140% at 12% 0%, rgba(243, 65, 65, .16) 0%, transparent 55%),
        linear-gradient(180deg, var(--u-surface-2), var(--u-bg));

    border-bottom: 1px solid var(--u-hairline);
    padding: 42px 0 34px;
    overflow: hidden;
}

.page-heading::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 64px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 64px);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .8), transparent 75%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .8), transparent 75%);
    pointer-events: none;
}

/* Accent rule along the bottom, brightest at the left where the eye starts. */
.page-heading--accent {
    border-bottom: 0;
}

.page-heading--accent::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg,
        var(--u-accent) 0%,
        var(--u-accent-deep) 22%,
        rgba(243, 65, 65, .15) 55%,
        transparent 100%);
}

.page-heading__title .highlight {
    color: var(--u-accent);
    text-shadow: 0 0 22px var(--u-accent-glow);
}

.page-heading__lede {
    color: var(--u-text-dim);
    font-size: 14.5px;
    line-height: 1.65;
}

.page-heading__breadcrumb {
    background: transparent;
    padding: 0;
    margin-top: 14px;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   5. Buttons

   Clipped top-left/bottom-right corners, a gradient fill, and a shine that
   sweeps across on hover. The sweep is a pseudo-element transform rather than
   a background-position animation, so it stays on the compositor.
   --------------------------------------------------------------------------- */

.btn {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: transform var(--u-fast) var(--u-ease),
                box-shadow var(--u-slow) var(--u-ease),
                filter var(--u-fast) var(--u-ease);
}

.btn-danger,
.btn-primary {
    background: linear-gradient(135deg, var(--u-accent-bright) 0%, var(--u-accent-deep) 100%);
    border: 0;
    clip-path: polygon(var(--u-cut) 0, 100% 0, 100% calc(100% - var(--u-cut)), calc(100% - var(--u-cut)) 100%, 0 100%, 0 var(--u-cut));
    box-shadow: 0 2px 14px rgba(243, 65, 65, .22);
}

.btn-danger::after,
.btn-primary::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
    transform: skewX(-20deg);
    transition: left .55s var(--u-ease);
    pointer-events: none;
}

.btn-danger:hover::after,
.btn-primary:hover::after { left: 130%; }

.btn-danger:hover,
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(243, 65, 65, .38);
    filter: saturate(1.08);
}

.btn-danger:active,
.btn-primary:active { transform: translateY(0); }

/* The ported theme paints the pressed state gold.
 *
 * style-ufc-dark.css carries a Bootstrap 4 button set whose active rule is
 *
 *   .btn-primary:not(:disabled):not(.disabled):active { background-color: #cca300 }
 *
 * Three pseudo-classes plus a class outranks the plain .btn-primary:active
 * above, so pressing Login turned it mustard - a colour that appears nowhere
 * else in the palette. Matching that specificity is what it takes to win;
 * !important would work too but would then have to be fought again by
 * anything that legitimately needs a different pressed state.
 */
.btn-danger:not(:disabled):not(.disabled):active,
.btn-danger:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    background: linear-gradient(135deg, var(--u-accent-deep) 0%, var(--u-accent-bright) 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, .35);
}

/* Same story for the focus ring: the theme drops a blue Bootstrap glow on a
   red button. Keyboard focus still gets a clearly visible ring - it is the
   only way a keyboard user can tell where they are - just in the accent. */
.btn-danger:focus,
.btn-primary:focus,
.btn-danger:focus-visible,
.btn-primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(243, 65, 65, .35);
}

.btn-secondary {
    background: var(--u-surface-3);
    border: 1px solid var(--u-hairline);
    color: var(--u-text);
}

.btn-secondary:hover {
    background: var(--u-surface-3);
    border-color: rgba(243, 65, 65, .5);
    color: #fff;
}

/* ---------------------------------------------------------------------------
   6. Navigation

   An underline that grows from the centre. Transform-based so it animates on
   the GPU and does not trigger layout on every hover.
   --------------------------------------------------------------------------- */

.main-nav__list > li > a {
    position: relative;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    transition: color var(--u-fast) var(--u-ease);
}

/* The theme already draws the indicator with ::before - a full-width 2px bar
   that simply changes background-colour on hover and active. Adding a second
   bar here produced two underlines, so this enhances the existing element
   instead of introducing another.

   The bar is always painted and revealed with a transform, which animates on
   the compositor; the theme's colour transition alone cannot grow from the
   centre. */
.main-nav__list > li > a::before {
    bottom: 0;
    background: linear-gradient(90deg, var(--u-accent-bright), var(--u-accent-deep)) !important;
    box-shadow: 0 0 10px var(--u-accent-glow);
    transform: scaleX(0);
    transform-origin: 50% 50%;
    transition: transform var(--u-slow) var(--u-ease);
}

.main-nav__list > li:hover > a::before,
.main-nav__list > li.active > a::before { transform: scaleX(1); }

.main-nav__list > li.active > a { color: #fff; }

.main-nav__sub {
    background: var(--u-surface-2);
    border: 1px solid var(--u-hairline);
    border-radius: 8px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
    overflow: hidden;
}

/* The theme sets these to #6b6d70 - about 3.0:1 on our panel, which fails AA
   and is why the account menu read as a set of empty grey shapes. The panel
   was restyled dark here without the text being restyled with it.

   Specificity has to clear two rules, not one: the theme's .main-nav__sub li a
   AND .header__top-bar .nav-account__item a, which paints the top-bar strip
   deliberately dim and was reaching into the dropdown nested inside it. */
.main-nav__sub li a,
.header__top-bar .nav-account__item .main-nav__sub li a {
    color: var(--u-text-muted);

    /* The theme's divider is #e4e7ed - a light rule drawn for a white panel. */
    border-bottom: 1px solid var(--u-hairline);

    transition: background var(--u-fast) var(--u-ease),
                padding-left var(--u-fast) var(--u-ease),
                color var(--u-fast) var(--u-ease);
}

.main-nav__sub li:last-child a { border-bottom: 0; }

.main-nav__sub li a:hover,
.header__top-bar .nav-account__item .main-nav__sub li a:hover {
    background: var(--u-accent-soft);
    padding-left: 22px;
    color: var(--u-text);
}

/* ---------------------------------------------------------------------------
   7. Content components
   --------------------------------------------------------------------------- */

/* Rows lift slightly and light their left edge on hover, which gives the long
   lists (threads, boards, bouts, events) a sense of being interactive without
   adding buttons. */
.board-row,
.thread-row,
.event-row,
.news-row,
.ticket-row {
    position: relative;
    transition: background var(--u-fast) var(--u-ease),
                transform var(--u-fast) var(--u-ease);
}

.board-row::before,
.thread-row::before,
.event-row::before,
.news-row::before,
.ticket-row::before {
    content: "";
    position: absolute;
    left: -18px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(180deg, var(--u-accent-bright), var(--u-accent-deep));
    border-radius: 2px;
    opacity: 0;
    transition: opacity var(--u-fast) var(--u-ease);
}

.board-row:hover,
.thread-row:hover,
.event-row:hover,
.news-row:hover,
.ticket-row:hover {
    background: rgba(255, 255, 255, .022);
    transform: translateX(2px);
}

.board-row:hover::before,
.thread-row:hover::before,
.event-row:hover::before,
.news-row:hover::before,
.ticket-row:hover::before { opacity: 1; }

/* Fighter and product cards: clipped corner, hover lift, image push-in. */
.fighter-card,
.product-card,
.news-card,
.tier-card,
.award-card {
    clip-path: polygon(var(--u-cut) 0, 100% 0, 100% calc(100% - var(--u-cut)), calc(100% - var(--u-cut)) 100%, 0 100%, 0 var(--u-cut));
}

.fighter-card:hover,
.product-card:hover,
.news-card:hover,
.tier-card:hover {
    transform: translateY(-4px);
    border-color: rgba(243, 65, 65, .35);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .5), 0 0 0 1px rgba(243, 65, 65, .18);
}

.fighter-card__avatar {
    transition: transform var(--u-slow) var(--u-ease),
                box-shadow var(--u-slow) var(--u-ease);
}

.fighter-card:hover .fighter-card__avatar {
    transform: scale(1.06);
    box-shadow: 0 0 0 3px rgba(243, 65, 65, .25), 0 0 26px var(--u-accent-glow);
}

.product-card__image,
.news-card__image,
.news-row__image {
    transition: transform var(--u-slow) var(--u-ease), filter var(--u-slow) var(--u-ease);
}

.product-card:hover .product-card__image,
.news-card:hover .news-card__image {
    transform: scale(1.04);
    filter: saturate(1.1);
}

/* Champion belt and rank chips get the accent treatment. */
.fighter-card__belt {
    background: linear-gradient(135deg, #f5d67b, #c9a227);
    color: #17181a;
    box-shadow: 0 0 16px rgba(201, 162, 39, .35);
}

.label--live {
    background: linear-gradient(135deg, var(--u-accent-bright), var(--u-accent-deep));
    animation: u-pulse 2s var(--u-ease) infinite;
}

@keyframes u-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(243, 65, 65, .5); }
    50%      { box-shadow: 0 0 0 7px rgba(243, 65, 65, 0); }
}

/* Countdown reads as an instrument panel. */
.countdown {
    display: inline-flex;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 14px;
    background: rgba(0, 0, 0, .35);
    border: 1px solid var(--u-hairline);
    border-radius: 8px;
    font-weight: 700;
    font-size: 15px;
    color: var(--u-text);
}

.countdown span {
    color: var(--u-accent);
    text-shadow: 0 0 12px var(--u-accent-glow);
}

/* Ranking ladder: champion row lit from the left. */
.rankings-table tr.is-champion {
    background: linear-gradient(90deg, rgba(201, 162, 39, .14), transparent 60%);
}

.rankings-table tbody tr {
    transition: background var(--u-fast) var(--u-ease);
}

.rankings-table tbody tr:hover { background: rgba(255, 255, 255, .03); }

/* Prefix pills and tags. */
.prefix-pill,
.tagcloud .btn {
    border-radius: 3px;
    letter-spacing: .06em;
    transition: transform var(--u-fast) var(--u-ease), box-shadow var(--u-fast) var(--u-ease);
}

.tagcloud .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .4);
}

/* Empty states: quieter, so they read as a considered state rather than a gap. */
.empty-state {
    padding: 52px 24px;
}

.empty-state i {
    color: var(--u-text-faint);
    opacity: .5;
    margin-bottom: 18px;
}

.empty-state h4 {
    font-size: 17px;
    letter-spacing: .02em;
}

.empty-state p,
.empty-state__text {
    color: var(--u-text-dim);
    font-size: 13.5px;
}

/* ---------------------------------------------------------------------------
   8. Forms
   --------------------------------------------------------------------------- */

.form-control,
select.form-control {
    background: rgba(0, 0, 0, .28);
    border: 1px solid var(--u-line);
    border-radius: 6px;
    color: var(--u-text);
    transition: border-color var(--u-fast) var(--u-ease),
                box-shadow var(--u-fast) var(--u-ease),
                background var(--u-fast) var(--u-ease);
}

.form-control::placeholder { color: var(--u-text-faint); }

.form-control:focus {
    background: rgba(0, 0, 0, .38);
    border-color: var(--u-accent);
    box-shadow: 0 0 0 3px var(--u-accent-soft);
    color: #fff;
    outline: 0;
}

.post-filter__label {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--u-text-dim);
    margin-bottom: 6px;
    display: block;
}

/* ---------------------------------------------------------------------------
   9. Accessibility and platform polish

   A visible focus ring is not optional; the template ships without one. Using
   :focus-visible keeps it off mouse clicks and on for keyboard users.
   --------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--u-accent-bright);
    outline-offset: 2px;
    border-radius: 3px;
}

::selection {
    background: rgba(243, 65, 65, .32);
    color: #fff;
}

/* Firefox */
* { scrollbar-color: var(--u-surface-3) transparent; }

/* WebKit */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--u-bg); }
::-webkit-scrollbar-thumb {
    background: var(--u-surface-3);
    border-radius: 6px;
    border: 2px solid var(--u-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--u-accent-deep); }

/* Honour the OS setting. Every effect above is decorative, so this disables
   motion wholesale rather than trying to tune each one. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    .fighter-card:hover,
    .product-card:hover,
    .news-card:hover,
    .tier-card:hover,
    .board-row:hover,
    .thread-row:hover,
    .event-row:hover,
    .news-row:hover,
    .ticket-row:hover { transform: none; }
}

/* The clip-path corners collapse awkwardly at very small widths. */
@media (max-width: 575.98px) {
    :root { --u-cut: 8px; }

    .page-heading { padding: 28px 0 24px; }
    .card__content { padding: 14px; }
}

@media print {
    .header, .pushy-panel, .footer, .btn { display: none !important; }
    .card, .widget { border: 1px solid #ccc; background: #fff; color: #000; }
}

/* ---------------------------------------------------------------------------
   10. Page background

   Rebuilt. The previous version paired a red bloom top-left with a blue one
   top-right, and across the middle of the header the two mixed into a purple
   wash that belonged to neither. Every light on the page is now warm - red
   through amber - so overlaps stay inside the accent family and can only ever
   blend toward orange.

   The field is also no longer an abstract gradient. It is a venue, built from
   four fixed layers, back to front:

     -3  the ground: warm haze low and centre, the way light spills off a
         canvas, breathing on a long cycle so the page is never quite static
     -2  a house light drifting across on a slow pass
     -1  the cage: a chain-link diamond mesh, the one texture unmistakably
         from this sport, masked so it only reads in the upper third, plus a
         vignette holding focus on the centre column

   No image requests, and nothing here animates a property that triggers
   layout or paint - only opacity and transform, on fixed layers the browser
   has already promoted to their own compositing layers. Scrolling stays on
   the fast path. The reduced-motion block in section 9 stops all of it.
   --------------------------------------------------------------------------- */

/* The ground moves up to the root element. body must stay transparent so the
   layers behind it are not buried; it painted an opaque colour before. */
html {
    background-color: var(--u-bg);
}

body {
    background: transparent;
}

/* Layer -3: the ground haze. Safe to animate opacity because the solid
   colour now lives on html - fading this can never expose bare white. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    background:
        radial-gradient(72% 54% at 10% -10%, rgba(243, 65, 65, .17), transparent 62%),
        radial-gradient(54% 42% at 92% 0%, rgba(226, 140, 58, .09), transparent 64%),
        radial-gradient(130% 58% at 50% 112%, rgba(243, 65, 65, .10), transparent 70%);
    animation: u-arena-breathe 19s var(--u-ease) infinite;
}

/* Slow and shallow on purpose: enough that the page feels lit rather than
   printed, not enough to notice while reading. */
@keyframes u-arena-breathe {
    0%, 100% { opacity: .82; }
    50%      { opacity: 1; }
}

/* Layer -2: a house light making a pass. Oversized and angled so the leading
   edge enters before the trailing edge leaves, which reads as one light
   travelling rather than a band being redrawn. */
html::before {
    content: "";
    position: fixed;
    top: -40vh;
    left: -70vw;
    width: 46vw;
    height: 180vh;
    z-index: -2;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 226, 196, .045) 42%,
        rgba(255, 238, 220, .06) 52%,
        transparent
    );
    transform: rotate(14deg) translate3d(0, 0, 0);
    animation: u-house-light 28s linear infinite;
    will-change: transform, opacity;
}

@keyframes u-house-light {
    0%       { transform: rotate(14deg) translate3d(0, 0, 0);      opacity: 0; }
    14%      { opacity: 1; }
    86%      { opacity: 1; }
    100%     { transform: rotate(14deg) translate3d(230vw, 0, 0);  opacity: 0; }
}

/* Layer -1: the cage plus the vignette.

   Two hairlines crossed at opposing 45 degree angles give the diamond of
   chain link. The pitch is deliberately wide - a true-to-life gauge would
   moire against text at this contrast. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 38px),
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 38px),
        radial-gradient(125% 100% at 50% 38%, transparent 42%, rgba(0, 0, 0, .6) 100%);
    /* The mesh belongs behind the masthead, not behind body copy. */
    mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .42) 38%, rgba(0, 0, 0, .12) 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .42) 38%, rgba(0, 0, 0, .12) 100%);
}

/* The wrappers must not paint over the layers above. */
.site-wrapper,
.site-content {
    background: transparent;
}

/* Phones get the ground and the cage but not the travelling light: it is the
   one layer whose value is ambient rather than structural, and it is the only
   thing on the page asking a battery to composite a frame every 16ms. */
@media (max-width: 767.98px) {
    html::before {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   11. Footer

   Previously the footer used the same flat ground as the page, so the site
   just stopped rather than ended. It is now a distinct slab: a bright accent
   rule, an angled leading edge, its own darker surface and a diagonal
   texture that appears nowhere else.

   The angle is drawn with a ::before wedge instead of clip-path on .footer,
   because clipping the element would also clip the accent rule and the
   glow sitting on its top edge.
   --------------------------------------------------------------------------- */

.footer {
    position: relative;
    /* Was 80 + 64. That is 144px of nothing before the first word of the
       footer, which on a short page is more empty space than content. */
    margin-top: 48px;
    padding-top: 40px;
    background:
        linear-gradient(180deg, #15171b 0%, #0e1013 100%);
    box-shadow: 0 -30px 60px rgba(0, 0, 0, .55);
    overflow: hidden;
}

/* Angled leading edge, cut out of the page ground above it.
 *
 * The wedge is a FIXED width, not the full width of the footer. Spanning
 * 100% meant the same 42px drop was spread across whatever the viewport
 * happened to be: a visible diagonal at 1140px, and at 2000px a 1.2 degree
 * slope that renders as a pale horizontal seam straight across the top of
 * the footer. That seam was the "white line". A fixed 420px wedge holds the
 * same angle on any display. */
.footer::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 420px;
    max-width: 45%;
    height: 42px;
    background: var(--u-bg);
    clip-path: polygon(0 0, 100% 0, 0 100%);
    pointer-events: none;
}

/* Diagonal hatch, unique to the footer. Masked so it is strongest at the top
   edge and gone by the time it reaches the copyright line. */
.footer::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(255, 255, 255, .026) 0 1px,
        transparent 1px 11px);
    mask-image: linear-gradient(180deg, #000, transparent 70%);
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%);
}

/* The accent rule that separates footer from page. */
.footer-widgets {
    position: relative;

    /* The theme fills this with a flat #131517 while .footer above it runs a
       gradient from #15171b down to #0e1013. Where the child's fill began,
       the two tones met in a hard horizontal edge across the whole width -
       the pale seam under the top of the footer. Letting the gradient show
       through removes it, and the footer reads as one surface. */
    background: transparent;
}

.footer-widgets::before {
    content: "";
    position: absolute;
    top: -40px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--u-accent-deep) 18%,
        var(--u-accent-bright) 50%,
        var(--u-accent-deep) 82%,
        transparent 100%);
    box-shadow: 0 0 22px var(--u-accent-glow);
    z-index: 2;
}

.footer-widgets__inner {
    position: relative;
    z-index: 1;

    /* The theme adds 60px on top of the footer's own padding at >=768px,
       which stacked to 100px of empty space above the first heading. */
    padding-top: 34px;
    padding-bottom: 38px;
}

/* Column headings: accent kicker, matching the card titles elsewhere. */
.widget--footer .widget__title h4 {
    position: relative;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #fff;
    padding-bottom: 14px;
    margin-bottom: 18px;
}

.widget--footer .widget__title h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    height: 2px;
    background: linear-gradient(90deg, var(--u-accent-bright), transparent);
}

.widget--footer .widget__content {
    color: var(--u-text-dim);
    font-size: 13.5px;
    line-height: 1.75;
}

/* Quick-link lists get a marker that slides in on hover. */
.footer-nav__item a,
.widget--footer .posts__title a {
    position: relative;
    color: var(--u-text-dim);
    transition: color var(--u-fast) var(--u-ease),
                padding-left var(--u-fast) var(--u-ease);
}

.footer-nav__item a:hover,
.widget--footer .posts__title a:hover {
    color: #fff;
    padding-left: 6px;
}

.footer-nav__item a::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 50%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--u-accent);
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity var(--u-fast) var(--u-ease);
}

.footer-nav__item a:hover::before { opacity: 1; }

/* Newsletter field, so it reads as one control rather than two parts. */
.widget--footer .form-control {
    background: rgba(0, 0, 0, .4);
    border-color: var(--u-line);
}

/* Social row. */
.social-links__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border: 1px solid var(--u-hairline);
    border-radius: 6px;
    color: var(--u-text-dim);
    font-size: 12px;
    transition: border-color var(--u-fast) var(--u-ease),
                color var(--u-fast) var(--u-ease),
                background var(--u-fast) var(--u-ease),
                transform var(--u-fast) var(--u-ease);
}

.social-links__link:hover {
    border-color: rgba(243, 65, 65, .5);
    background: var(--u-accent-soft);
    color: #fff;
    transform: translateY(-2px);
}

/* --- Bottom bar -----------------------------------------------------------

   The template ships .footer-secondary--has-decor with skewed red blocks
   bleeding off both edges. At this scale they read as stray artefacts rather
   than decoration, so the pseudo-elements are suppressed and replaced with a
   single restrained accent seam.
   ------------------------------------------------------------------------- */

.footer-secondary {
    position: relative;
    background: rgba(0, 0, 0, .42);
    border-top: 1px solid var(--u-hairline);
    padding: 22px 0;
    z-index: 1;
}

/* The template's skewed red slabs sit on the INNER element. Targeting the
   outer one left them on screen, bleeding off both edges of the bottom bar. */
.footer-secondary--has-decor .footer-secondary__inner::before,
.footer-secondary--has-decor .footer-secondary__inner::after {
    display: none !important;
}

.footer-secondary--has-decor,
.footer-secondary--has-decor .footer-secondary__inner {
    background-color: transparent;
}

.footer-secondary__inner {
    position: relative;
    z-index: 1;
}

.footer-secondary .footer-nav__item a {
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.footer-copyright {
    color: var(--u-text-faint);
    font-size: 11.5px;
    letter-spacing: .03em;
}

.footer-copyright a { color: var(--u-text-dim); }
.footer-copyright a:hover { color: var(--u-accent-bright); }

@media (max-width: 767.98px) {
    .footer { margin-top: 48px; padding-top: 44px; }
    .footer::before { height: 24px; }
    .footer-widgets::before { top: -44px; }
}


/* ===========================================================================
   12. Header — rebuilt

   The template's header is built around a small wordmark: the logo is
   absolutely positioned so it overhangs the nav bar, the nav reserves a fixed
   gutter for it, and two skewed slabs sit behind it. That geometry is tuned
   for a 17px-tall mark and falls apart with the UFC.GG octagon lockup, which
   is both taller and far wider.

   Rather than keep guessing offsets, this replaces the whole layout with a
   flex system the logo cannot break, and neutralises the template geometry it
   would otherwise fight:

     - .header-logo comes out of absolute positioning
     - the nav's reserved gutter is zeroed
     - the skewed slabs behind the logo and beside the hamburger are removed
     - the logo scales with clamp() rather than a fixed pixel height

   All the class names and ids the theme's JS binds to are preserved
   (#header-mobile, #header-mobile__toggle, #header-mobile__search-icon,
   .main-nav, .main-nav__list, .main-nav__sub), so the mobile menu, the search
   toggle and the dropdowns keep working.
   =========================================================================== */

/* --- Shell ---------------------------------------------------------------- */

.header {
    position: relative;
    background: linear-gradient(180deg, rgba(28, 31, 36, .98), rgba(19, 20, 23, .98));
    border-bottom: 1px solid var(--u-hairline);
}

.header__top-bar {
    background: rgba(0, 0, 0, .35);
    border-bottom: 1px solid var(--u-hairline);
}

.header__top-bar .nav-account__item a {
    font-size: 11px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--u-text-dim);
    transition: color var(--u-fast) var(--u-ease);
}

.header__top-bar .nav-account__item a:hover { color: #fff; }

/* Search and auth row.
 *
 * This row was the loudest thing in the header. It sat on the lightest stop
 * of the header gradient - the same surface as a card - so a utility strip
 * carrying a search box and two buttons read as the primary element, above
 * the logo. Two changes fix it:
 *
 *   1. It recedes. The row is now darker than the header around it rather
 *      than lighter, so it reads as a recess the controls sit in. The logo
 *      row below keeps the lit surface and becomes the focus again.
 *   2. It loses 22px of height. 14px of padding around a 42px field made a
 *      70px band for one input and two small buttons.
 */
.header__secondary {
    background: rgba(0, 0, 0, .3);
    border-bottom: 1px solid rgba(0, 0, 0, .35);
}

.header__secondary > .container {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Desktop only. init.js clones .header-search-form into #header-mobile for
   the mobile drop-down, so anything unscoped here lands on that clone too -
   and a max-width of 380px on a full-width drop-down is not what it wants. */
@media (min-width: 992px) {
    .header-search-form {
        flex: 1 1 auto;
        max-width: 380px;
        margin: 0;
    }

    .header-search-form .form-control {
        width: 100%;
        height: 34px;
        font-size: 13px;
        padding-right: 38px;
        border-radius: 17px;
        background: rgba(0, 0, 0, .45);
        border: 1px solid var(--u-hairline);
    }

    .header-search-form .header-mobile__search-submit {
        position: absolute;
        top: 0;
        right: 0;
        height: 34px;
        width: 38px;
        border: 0;
        background: transparent;
        color: var(--u-accent);
    }
}

.header-search-form .search-form { position: relative; }

/* The buttons shrink with the row rather than setting its height. */
.info-block--header .btn-sm {
    padding: 6px 14px;
    font-size: 11px;
    letter-spacing: .07em;
}

/* Desktop only - the theme gates this row's display by breakpoint. */
@media (min-width: 992px) {
    .info-block--header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0 0 0 auto;
        padding: 0;
        list-style: none;
        flex: 0 0 auto;
    }

    .info-block--header .info-block__item { margin: 0; padding: 0; }
}

/* --- Primary row ---------------------------------------------------------- */

/* Remove the template geometry this layout replaces. */
.header--layout-1 .header__primary::after,
.header--layout-1 .header__primary-inner::before {
    display: none !important;
}

.header__primary {
    position: relative;
    background: transparent;
}

.header__primary-inner {
    display: flex;
    align-items: center;
    gap: clamp(14px, 2.5vw, 34px);
    background-color: transparent;
    min-height: 68px;
}

/* Accent seam under the primary row. On its own element, because
   .header__primary::after belongs to the template. */
.header__primary::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(243, 65, 65, .5), transparent);
    z-index: 2;
}

/* --- Logo ----------------------------------------------------------------- */

/* Desktop only, and this one mattered.
 *
 * The theme already hides .header-logo below 992px:
 *
 *     @media (max-width: 991px) { .header-logo { display: none } }
 *
 * Setting display:flex on the bare selector defeated that gate, which is the
 * actual cause of the two logos on mobile - .header-mobile carries its own
 * mark and this one was being forced back into view alongside it. Section 18
 * was hiding it again by hand, which treated the symptom. Scoped here, the
 * theme's own gate does the work. */
@media (min-width: 992px) {
    .header-logo {
        position: static;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        margin: 0;
        padding: 6px 0;
    }
}

/* Fluid between 38px and 62px. The lockup keeps presence on a desktop without
   forcing the bar taller than the nav needs on a laptop. */
.header-logo__img {
    display: block;
    width: auto;
    height: clamp(38px, 4.6vw, 62px);
    max-width: 100%;
    position: relative;
    transition: filter var(--u-slow) var(--u-ease);
}

.header-logo:hover .header-logo__img {
    filter: drop-shadow(0 0 14px var(--u-accent-glow));
}

/* --- Navigation ----------------------------------------------------------- */

/* Desktop only.
 *
 * Below 992px the template turns .main-nav into the off-canvas panel -
 * position:fixed, 270px wide, full height. Laying it out as a centred,
 * right-justified flex row there fought that completely: the menu became a
 * horizontal strip inside a vertical drawer. This is the fourth unscoped rule
 * in this file to break a control the theme gates by breakpoint, so it is
 * spelled out here as well as at the others. */
@media (min-width: 992px) {
    .main-nav {
        margin-left: 0 !important;
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        min-width: 0;
    }

    .main-nav__list {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        min-width: 0;
    }

    .main-nav__list > li { flex: 0 0 auto; }

    .main-nav__list > li > a {
        display: block;
        position: relative;
        padding: 0 clamp(10px, 1.4vw, 26px);
        line-height: 66px;
        font-size: clamp(12px, 1.05vw, 14px);
        white-space: nowrap;
    }
}

/* The panel toggle keeps its slab, sized to the row.
 *
 * Scoped to the desktop breakpoint. The theme gates this control with
 * display:none below 992px and inline-block above it; setting display on the
 * bare selector overrode the gate at every width, so the desktop toggle also
 * rendered on phones - the second red hamburger sitting beside the mobile
 * one. Same mistake as the unscoped .header-mobile rule in section 12. */
@media (min-width: 992px) {
    .pushy-panel__toggle {
        flex: 0 0 auto;
        align-self: stretch;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 62px;
        margin-left: 12px;
        background: linear-gradient(135deg, var(--u-accent-bright), var(--u-accent-deep));
        transition: filter var(--u-fast) var(--u-ease);
    }

    .pushy-panel__toggle:hover { filter: brightness(1.1); }
}

/* --- Responsive ----------------------------------------------------------- */

/* Below the desktop nav breakpoint the template swaps to .header-mobile.
   Collapsing .header itself happens in section 18 - this comment used to
   claim it happened here, which is why two logos shipped. */
@media (max-width: 1199.98px) {
    .main-nav__list > li > a { padding: 0 10px; font-size: 12px; }
}

@media (max-width: 991.98px) {
    .header__secondary > .container {
        flex-wrap: wrap;
        gap: 12px;
    }

    .header-search-form { max-width: none; order: 2; width: 100%; }
    .info-block--header { order: 1; margin-left: 0; width: 100%; justify-content: flex-end; }
}

/* ---------------------------------------------------------------------------
   13. Forum index tabs

   HackForums splits a large board tree across tabs rather than making the
   visitor scroll one enormous accordion, and with the Sherdog-shaped tree
   seeded by ForumStructureSeeder there are eight categories and twenty-six
   boards - far too many for a single column.

   Styled as a control surface rather than as links: one continuous rail, the
   active tab lifted out of it with the same angular cut used on cards
   elsewhere, so the bar belongs to the rest of the UI.

   The markup is a plain <ul> of <a>, so this is presentation only - the tab
   still works with CSS off, and each tab is a real URL (?tab=slug) that can
   be linked and indexed.
   --------------------------------------------------------------------------- */

.forum-tabs {
    list-style: none;
    margin: 0 0 22px;
    padding: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    position: relative;
    background: linear-gradient(180deg, var(--u-surface), var(--u-surface-2));
    border: 1px solid var(--u-hairline);
    border-radius: 2px;
    clip-path: polygon(
        var(--u-cut) 0, 100% 0,
        100% calc(100% - var(--u-cut)), calc(100% - var(--u-cut)) 100%,
        0 100%, 0 var(--u-cut)
    );
}

/* The accent rule along the top edge, matching the card headers. */
.forum-tabs::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--u-cut);
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--u-accent), transparent 70%);
    pointer-events: none;
}

.forum-tabs__item {
    display: flex;
}

.forum-tabs__link {
    display: block;
    padding: 10px 20px;
    font-family: Rajdhani, Montserrat, sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--u-text-dim);
    background: transparent;
    border-radius: 1px;
    white-space: nowrap;
    transition:
        color var(--u-fast) var(--u-ease),
        background-color var(--u-fast) var(--u-ease);
}

.forum-tabs__link:hover,
.forum-tabs__link:focus-visible {
    color: var(--u-text);
    background: rgba(255, 255, 255, .04);
    text-decoration: none;
}

.forum-tabs__link.is-active {
    color: #fff;
    background: linear-gradient(180deg, var(--u-accent), var(--u-accent-deep));
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, .35),
        0 6px 18px -6px var(--u-accent-glow);
    clip-path: polygon(
        8px 0, 100% 0,
        100% calc(100% - 8px), calc(100% - 8px) 100%,
        0 100%, 0 8px
    );
}

/* Below the fold of a phone the rail would wrap to three rows and push the
   boards off screen, so it scrolls sideways instead. */
@media (max-width: 575.98px) {
    .forum-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .forum-tabs::-webkit-scrollbar {
        display: none;
    }

    .forum-tabs__link {
        padding: 9px 15px;
        font-size: 14px;
    }
}

/* ---------------------------------------------------------------------------
   14. Card header actions and sidebar lists

   Two things the review caught on the home and news pages.

   1. Header actions were inconsistent and too loud. "All news" and "Open the
      forum" were btn-danger while "All" and "Rankings" were btn-secondary -
      the same kind of action, a link to the full listing, rendered two ways.
      The red ones then out-shouted the card contents they were labelling.
      They are all btn-secondary in the markup now, and this gives them a
      compact chip treatment that picks up the accent only on hover. A create
      action in a card header (Support's "New ticket") stays red, because that
      one really is primary.

      The size cap also matters: the theme's .card__header--has-btn pads to
      24px to fit a full-size button, so an unconstrained button decides the
      header's height instead of sitting inside it.

   2. The news "Sections" list was inheriting a bare list style and read as
      unstyled next to the cards around it. It now behaves like navigation,
      with a hit area, a hover state and a marker on the current section.
   --------------------------------------------------------------------------- */

.card__header .btn-sm {
    flex: 0 0 auto;
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.6;
    white-space: nowrap;
    border-radius: 2px;
}

/* The quiet default for "go to the full listing". */
.card__header .btn-secondary {
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--u-hairline);
    color: var(--u-text-dim);
    box-shadow: none;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
    transition:
        color var(--u-fast) var(--u-ease),
        background-color var(--u-fast) var(--u-ease),
        border-color var(--u-fast) var(--u-ease);
}

.card__header .btn-secondary:hover,
.card__header .btn-secondary:focus-visible {
    background: var(--u-accent-soft);
    border-color: rgba(243, 65, 65, .45);
    color: #fff;
}

/* A red action in a header is a create action, not navigation. Keep it, but
   at the same size as its neighbours so headers stay a uniform height. */
.card__header .btn-danger {
    box-shadow: 0 2px 10px rgba(243, 65, 65, .2);
}

/* --- Sidebar section lists ------------------------------------------------ */

.side-nav {
    list-style: none;
    margin: -6px 0;
    padding: 0;
}

.side-nav__item + .side-nav__item {
    border-top: 1px solid var(--u-hairline);
}

.side-nav__item > a {
    display: flex;
    align-items: center;

    /* Was space-between, which was written for the news sections list where
       every row is a single label. .side-nav is shared with the side panel,
       whose rows are "<icon> Label" - so space-between shoved the icon hard
       left and the text hard right with a void between them. flex-start with
       a gap is correct for both. */
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 2px 10px 12px;
    position: relative;
    color: var(--u-text-dim);
    font-size: 14px;
    transition:
        color var(--u-fast) var(--u-ease),
        padding-left var(--u-fast) var(--u-ease);
}

/* The accent marker slides in on hover rather than appearing, so the list
   reads as one control surface instead of eleven independent links. */
.side-nav__item > a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 0;
    border-radius: 2px;
    background: var(--u-accent);
    transform: translateY(-50%);
    transition: height var(--u-fast) var(--u-ease);
}

.side-nav__item > a:hover,
.side-nav__item > a:focus-visible {
    color: #fff;
    padding-left: 16px;
    text-decoration: none;
}

.side-nav__item > a:hover::before,
.side-nav__item > a:focus-visible::before,
.side-nav__item > a.is-active::before {
    height: 16px;
}

.side-nav__item > a.is-active {
    color: #fff;
    padding-left: 16px;
    font-weight: 700;
}

/* ---------------------------------------------------------------------------
   15. Newsroom

   Follows psn.gg's outline: section chips in the masthead rather than a
   sidebar, one lead story as a split panel, then a three-across grid of tiles
   with real artwork. Dropping the sidebar is what makes the grid possible -
   the previous layout spent a third of the width on six links, which left the
   cards too narrow to carry an image.
   --------------------------------------------------------------------------- */

.news-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 26px;
}

.news-filter__chip {
    display: inline-block;
    padding: 8px 16px;
    font-family: Rajdhani, Montserrat, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--u-text-dim);
    background: var(--u-surface);
    border: 1px solid var(--u-hairline);
    clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
    transition:
        color var(--u-fast) var(--u-ease),
        background-color var(--u-fast) var(--u-ease),
        border-color var(--u-fast) var(--u-ease);
}

.news-filter__chip:hover,
.news-filter__chip:focus-visible {
    color: #fff;
    border-color: rgba(243, 65, 65, .5);
    background: var(--u-accent-soft);
    text-decoration: none;
}

.news-filter__chip.is-active {
    color: #fff;
    background: linear-gradient(135deg, var(--u-accent-bright), var(--u-accent-deep));
    border-color: transparent;
}

/* --- Lead story ----------------------------------------------------------- */

.news-lead {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    overflow: hidden;
    margin-bottom: 28px;
}

.news-lead__media {
    position: relative;
    display: block;
    min-height: 340px;
    background: var(--u-bg);
    overflow: hidden;
}

.news-lead__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s var(--u-ease);
}

.news-lead:hover .news-lead__image { transform: scale(1.03); }

/* Gradient tying the artwork into the panel beside it, so the two halves read
   as one object rather than an image glued to a box. */
.news-lead__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 40%, rgba(19, 20, 23, .85) 100%);
    pointer-events: none;
}

.news-lead__flag {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 1;
    padding: 6px 12px;
    font-family: Rajdhani, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, var(--u-accent-bright), var(--u-accent-deep));
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

.news-lead__panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    padding: 30px;
    background: linear-gradient(160deg, var(--u-surface), var(--u-bg));
}

.news-lead__eyebrow {
    font-family: Rajdhani, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--u-accent);
}

.news-lead__sep { color: var(--u-text-faint); margin: 0 4px; }

.news-lead__title {
    margin: 14px 0 0;
    font-size: 27px;
    line-height: 1.18;
    text-transform: uppercase;
}

.news-lead__title a { color: #fff; }
.news-lead__title a:hover { color: var(--u-accent); text-decoration: none; }

.news-lead__excerpt {
    margin: 14px 0 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--u-text-dim);
}

/* --- Tile grid ------------------------------------------------------------ */

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.news-tile {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition:
        transform var(--u-slow) var(--u-ease),
        border-color var(--u-fast) var(--u-ease);
}

.news-tile:hover {
    transform: translateY(-3px);
    border-color: rgba(243, 65, 65, .4);
}

.news-tile__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--u-bg);
    overflow: hidden;
}

.news-tile__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--u-slow) var(--u-ease);
}

.news-tile:hover .news-tile__image { transform: scale(1.05); }

/* The section label sits on the artwork, so it needs its own scrim rather
   than relying on the image being dark in that corner. */
.news-tile__media::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 70px;
    background: linear-gradient(180deg, transparent, rgba(14, 16, 19, .92));
    pointer-events: none;
}

.news-tile__section {
    position: absolute;
    left: 14px;
    bottom: 10px;
    z-index: 1;
    font-family: Rajdhani, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.news-tile__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 18px;
}

.news-tile__date {
    font-family: Rajdhani, sans-serif;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--u-text-faint);
}

.news-tile__title {
    margin: 8px 0 0;
    font-size: 17px;
    line-height: 1.3;
}

.news-tile__title a { color: #fff; }
.news-tile__title a:hover { color: var(--u-accent); text-decoration: none; }

.news-tile__excerpt {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--u-text-dim);

    /* Three lines, so tiles in a row stay the same height whatever the copy
       length. The meta strip below is pushed to the bottom by margin-top auto
       rather than depending on this. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Shared meta strip ---------------------------------------------------- */

.news-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-family: Rajdhani, sans-serif;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--u-text-faint);
}

.news-tile__meta {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--u-hairline);
}

.news-lead__meta {
    padding-top: 16px;
    border-top: 1px solid var(--u-hairline);
}

.news-meta__go { color: var(--u-accent); font-weight: 700; }

.news-pagination { margin-top: 30px; }

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 991.98px) {
    .news-grid { grid-template-columns: repeat(2, 1fr); }

    .news-lead { grid-template-columns: 1fr; }
    .news-lead__media { min-height: 220px; aspect-ratio: 16 / 9; }

    /* Stacked, the horizontal fade would darken the wrong edge. */
    .news-lead__media::after {
        background: linear-gradient(180deg, transparent 45%, rgba(19, 20, 23, .9) 100%);
    }

    .news-lead__title { font-size: 23px; }
}

@media (max-width: 575.98px) {
    .news-grid { grid-template-columns: 1fr; }
    .news-lead__panel { padding: 22px; }
    .news-lead__title { font-size: 20px; }

    /* Four items will not fit across a phone; drop the least useful. */
    .news-meta span:nth-child(2) { display: none; }
}

/* ---------------------------------------------------------------------------
   16. Fight cards

   The event page was the most generic screen on the site: bouts were rows
   separated by hairlines, both fighters rendered in the same red, and the only
   other colour was grey - grey records, a grey "vs", grey status pills. It
   read like a table that had lost its table.

   The fix is not more decoration, it is using the information already there.
   MMA has red and blue corners. The markup already carried
   bout-card__corner--red and --blue and the stylesheet ignored both, so every
   bout was one colour and the two fighters were visually interchangeable.
   Colouring the corners is authentic to the sport, gives the card an axis, and
   removes most of the grey by replacing it with meaning rather than with more
   red.

   Layout is a three-column grid: red corner, centre medallion, blue corner.
   The blue corner mirrors, so both fighters read outward from the middle the
   way they do on a broadcast graphic.
   --------------------------------------------------------------------------- */

:root {
    --u-corner-red: #f34141;
    --u-corner-blue: #3d8bff;
    --u-winner: #22c55e;
}

.bout-card {
    position: relative;
    margin: 0 0 14px;
    padding: 0;
    border: 1px solid var(--u-hairline);
    border-bottom: 1px solid var(--u-hairline);
    background: linear-gradient(180deg, var(--u-surface), var(--u-bg));
    clip-path: polygon(
        var(--u-cut) 0, 100% 0,
        100% calc(100% - var(--u-cut)), calc(100% - var(--u-cut)) 100%,
        0 100%, 0 var(--u-cut)
    );
    overflow: hidden;
    transition:
        border-color var(--u-fast) var(--u-ease),
        transform var(--u-fast) var(--u-ease);
}

.bout-card:hover {
    border-color: rgba(243, 65, 65, .35);
    transform: translateY(-1px);
}

.bout-card:last-child { border-bottom: 1px solid var(--u-hairline); }

/* The corner colours, as a hairline down each edge of the card. */
.bout-card::before,
.bout-card::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    pointer-events: none;
}

.bout-card::before { left: 0; background: linear-gradient(180deg, var(--u-corner-red), transparent); }
.bout-card::after { right: 0; background: linear-gradient(180deg, var(--u-corner-blue), transparent); }

/* --- Billing strip -------------------------------------------------------- */

.bout-card__billing {
    padding: 9px 16px;
    background: rgba(0, 0, 0, .3);
    border-bottom: 1px solid var(--u-hairline);
    font-family: Rajdhani, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--u-text-dim);
}

/* --- Corners -------------------------------------------------------------- */

.bout-card__corners {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    padding: 18px 16px;
}

.bout-card__corner {
    position: relative;
    min-width: 0;
    padding-left: 12px;
}

.bout-card__corner--blue {
    text-align: right;
    padding-left: 0;
    padding-right: 12px;
}

/* Corner tick, matching the accent tick on card headers. */
.bout-card__corner::before {
    content: "";
    position: absolute;
    top: 50%;
    width: 3px;
    height: 26px;
    border-radius: 2px;
    transform: translateY(-50%);
}

.bout-card__corner--red::before {
    left: 0;
    background: var(--u-corner-red);
    box-shadow: 0 0 10px rgba(243, 65, 65, .5);
}

.bout-card__corner--blue::before {
    right: 0;
    background: var(--u-corner-blue);
    box-shadow: 0 0 10px rgba(61, 139, 255, .5);
}

.bout-card__corner h6 {
    margin: 0 0 3px;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: .02em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.bout-card__corner--red h6 a { color: #ffe3e3; }
.bout-card__corner--blue h6 a { color: #dfe9ff; }

.bout-card__corner--red h6 a:hover { color: var(--u-corner-red); text-decoration: none; }
.bout-card__corner--blue h6 a:hover { color: var(--u-corner-blue); text-decoration: none; }

/* The record was grey. It is a number, so it gets the numeric face and enough
   contrast to actually be read. */
.bout-card__record {
    font-family: Rajdhani, sans-serif;
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: .06em;
    color: var(--u-text-dim);
}

/* --- Winner --------------------------------------------------------------- */

.bout-card__corner.is-winner h6 a { color: var(--u-winner); }

.bout-card__corner.is-winner::before {
    background: var(--u-winner);
    box-shadow: 0 0 12px rgba(34, 197, 94, .6);
    height: 34px;
}

/* A "DEF." flag rather than relying on colour alone, which nobody with a
   red/green colour deficiency can read. */
.bout-card__corner.is-winner h6::after {
    content: "DEF.";
    display: inline-block;
    margin-left: 8px;
    padding: 2px 6px;
    font-family: Rajdhani, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
    vertical-align: middle;
    color: #0c1a10;
    background: var(--u-winner);
    border-radius: 2px;
}

.bout-card__corner--blue.is-winner h6::after { margin: 0 8px 0 0; }

/* --- Centre medallion ----------------------------------------------------- */

.bout-card__versus {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    font-family: Rajdhani, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--u-text-dim);
    background: var(--u-surface-2);
    border: 1px solid var(--u-hairline);

    /* A diamond via clip-path rather than transform: rotate(45deg). The
       markup is <div class="versus">vs</div> with a bare text node and no
       child element, so a rotation on the box would rotate the word with it
       and there is nothing to counter-rotate. */
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

/* --- Footer --------------------------------------------------------------- */

.bout-card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 11px 16px;
    background: rgba(0, 0, 0, .22);
    border-top: 1px solid var(--u-hairline);
    font-size: 13px;
}

/* Was flat grey. A result is the single most important line on a finished
   bout, so it reads as content rather than as a caption. */
.bout-card__result {
    color: var(--u-text);
    font-weight: 600;
}

/* The status chip: outlined in the accent instead of a grey fill. */
.bout-card__footer .label,
.bout-card__footer .bout-card__status {
    display: inline-block;
    padding: 4px 10px;
    font-family: Rajdhani, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--u-text-dim);
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--u-hairline);
    border-radius: 2px;
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 575.98px) {
    .bout-card__corners {
        grid-template-columns: 1fr;
        gap: 10px;
        text-align: left;
    }

    /* Stacked, mirroring the blue corner would put its name against the wrong
       edge and its tick in mid-air. */
    .bout-card__corner--blue {
        text-align: left;
        padding-left: 12px;
        padding-right: 0;
    }

    .bout-card__corner--blue::before { right: auto; left: 0; }

    .bout-card__corner--blue.is-winner h6::after { margin: 0 0 0 8px; }

    .bout-card__versus {
        justify-self: start;
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-size: 10px;
    }
}

/* ---------------------------------------------------------------------------
   17. Forum posts

   The classic two-column forum post: author on the left, message on the
   right. That layout is not nostalgia - the author column is what makes a
   forum a forum. Knowing who is talking, what their standing is and how long
   they have been here is most of the signal in a discussion, and the previous
   version buried it in a thin strip with a broken avatar.

   Each post is its own panel rather than a row in a shared card, so the
   author column can have a background of its own and the posts have an
   obvious boundary when several people reply in a row.
   --------------------------------------------------------------------------- */

.post-list { display: flex; flex-direction: column; gap: 14px; }
.post-list__pagination { margin-top: 22px; }

.post {
    display: grid;
    grid-template-columns: 190px 1fr;
    background: linear-gradient(180deg, var(--u-surface), var(--u-bg));
    border: 1px solid var(--u-hairline);
    clip-path: polygon(
        var(--u-cut) 0, 100% 0,
        100% calc(100% - var(--u-cut)), calc(100% - var(--u-cut)) 100%,
        0 100%, 0 var(--u-cut)
    );
    scroll-margin-top: 90px;   /* so #post-N anchors clear the sticky header */
}

/* --- Author column -------------------------------------------------------- */

.post__author {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 14px;
    text-align: center;
    background: rgba(0, 0, 0, .28);
    border-right: 1px solid var(--u-hairline);
}

.post__avatar {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border: 2px solid var(--u-hairline);
    background: var(--u-surface-2);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    transition: border-color var(--u-fast) var(--u-ease);
}

.post__avatar-link:hover .post__avatar { border-color: var(--u-accent); }

.post__avatar--empty {
    display: grid;
    place-items: center;
    font-size: 28px;
    color: var(--u-text-faint);
}

.post__name {
    font-family: Rajdhani, sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .04em;
    overflow-wrap: anywhere;
}

/* The group colour arrives as a custom property from the template, so a group
   with no colour simply falls through to the default. */
.post__name a { color: var(--post-name-color, #fff); }
.post__name a:hover { color: var(--u-accent); text-decoration: none; }
.post__name--deleted { color: var(--u-text-faint); font-style: italic; }

.post__usertitle {
    font-family: Rajdhani, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--u-text-dim);
}

.post__stats {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 6px 0 0;
    padding: 10px 0 0;
    width: 100%;
    border-top: 1px solid var(--u-hairline);
}

.post__stat { text-align: center; }

.post__stat dt {
    font-family: Rajdhani, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--u-text-faint);
}

.post__stat dd {
    margin: 2px 0 0;
    font-family: Rajdhani, sans-serif;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--u-text);
}

.post__stat dd.is-positive { color: #22c55e; }
.post__stat dd.is-negative { color: #f87171; }

.post__awards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.post__award {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    font-size: 13px;
    line-height: 1;
    background: var(--u-surface-2);
    border: 1px solid var(--u-hairline);
    border-radius: 3px;
}

.post__award img { width: 16px; height: 16px; object-fit: contain; }

/* --- Message -------------------------------------------------------------- */

.post__main {
    display: flex;
    flex-direction: column;
    min-width: 0;      /* lets long words wrap instead of stretching the grid */
    padding: 16px 20px 0;
}

.post__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--u-hairline);
}

.post__permalink {
    font-family: Rajdhani, sans-serif;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--u-text-faint);
}

.post__permalink:hover { color: var(--u-accent); text-decoration: none; }

.post__flag {
    padding: 3px 8px;
    font-family: Rajdhani, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    border-radius: 2px;
}

.post__flag--pending { color: #f5a623; background: rgba(245, 166, 35, .14); }
.post__flag--op      { color: var(--u-accent); background: var(--u-accent-soft); }
.post__flag--banned  { color: #f87171; background: rgba(248, 113, 113, .14); }

.post__body {
    padding: 16px 0;
    font-size: 15px;
    line-height: 1.75;
    color: var(--u-text);
    overflow-wrap: anywhere;
}

.post__edited,
.post__signature {
    margin: 0 0 14px;
    font-size: 12px;
    color: var(--u-text-faint);
}

.post__signature {
    padding-top: 12px;
    border-top: 1px dashed var(--u-hairline);
    font-style: italic;
}

/* --- Footer --------------------------------------------------------------- */

.post__footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
    padding: 10px 0;
    border-top: 1px solid var(--u-hairline);
}

.post__reactions { display: flex; flex-wrap: wrap; gap: 6px; }
.post__react-form { margin: 0; }

.post__react {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    font-family: Rajdhani, sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--u-text-faint);
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--u-hairline);
    border-radius: 999px;
    cursor: pointer;
    transition:
        color var(--u-fast) var(--u-ease),
        border-color var(--u-fast) var(--u-ease),
        background-color var(--u-fast) var(--u-ease);
}

.post__react:hover {
    color: #fff;
    border-color: rgba(243, 65, 65, .45);
    background: var(--u-accent-soft);
}

.post__react.is-active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--u-accent-bright), var(--u-accent-deep));
}

.post__react.is-readonly { cursor: default; }
.post__react.is-readonly:hover { color: var(--u-text-faint); border-color: var(--u-hairline); background: rgba(255, 255, 255, .04); }

.post__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.post__actions form { margin: 0; }

.post__action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    font-family: Rajdhani, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--u-text-dim);
    background: transparent;
    border: 1px solid var(--u-hairline);
    border-radius: 2px;
    cursor: pointer;
    transition: color var(--u-fast) var(--u-ease), border-color var(--u-fast) var(--u-ease);
}

.post__action:hover { color: #fff; border-color: rgba(255, 255, 255, .25); text-decoration: none; }
.post__action--danger:hover { color: #f87171; border-color: rgba(248, 113, 113, .45); }

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 767.98px) {
    /* The author column becomes a header strip: a 190px sidebar on a phone
       leaves the message about 30 characters wide. */
    .post { grid-template-columns: 1fr; }

    .post__author {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        text-align: left;
        padding: 12px 16px;
        border-right: 0;
        border-bottom: 1px solid var(--u-hairline);
    }

    .post__avatar { width: 44px; height: 44px; }

    .post__stats {
        width: auto;
        margin: 0 0 0 auto;
        padding: 0;
        border-top: 0;
    }

    .post__awards { margin-left: 0; }
    .post__main { padding: 14px 16px 0; }
    .post__actions { margin-left: 0; }
}

/* ---------------------------------------------------------------------------
   18. Mobile header

   Two bugs, one cause: section 12 rebuilt the desktop header and left the
   mobile swap half-finished.

   1. Two logos. The comment in section 12 claims "the template swaps to
      .header-mobile and hides .header" - and nothing ever hid .header. It was
      asserted in a comment and never written, so below 992px the desktop
      masthead and the mobile bar both rendered, each with a logo.

   2. No menu - the burger was mispositioned by that same flex rebuild. That
      half is now fixed in section 18b, which puts the template's own mobile
      bar back rather than replacing it. Only the collapse below belongs here.

   .header cannot simply be display:none. .main-nav is the off-canvas menu and
   it lives inside .header__primary; display:none on an ancestor removes it
   from rendering no matter that it is position:fixed, so the burger would
   then toggle a menu that cannot appear. The header is collapsed instead -
   its own chrome removed, its logo hidden - which leaves the fixed nav intact
   and takes up no space.
   --------------------------------------------------------------------------- */

@media (max-width: 991.98px) {

    /* The shell keeps rendering, for the off-canvas nav inside it, but paints
       nothing and occupies no height. */
    .header,
    .header--layout-1 .header__primary {
        background: none;
        border: 0;
        box-shadow: none;
        padding: 0;
        min-height: 0;
    }

    /* Section 12's decorations belong to the desktop masthead only. */
    .header--layout-1 .header__primary::before,
    .header--layout-1 .header__primary::after,
    .header::before,
    .header::after {
        display: none !important;
    }

    .header__primary > .container,
    .header__primary-inner {
        padding: 0;
        margin: 0;
        min-height: 0;
    }

    /* .header-logo is not hidden here any more. The theme already does it at
       this breakpoint; the reason it was not working is that an unscoped
       display:flex further up defeated the gate. That rule is scoped now, so
       hiding it again here would just be a second answer to a solved
       problem. */

    /* --- Off-canvas panel -------------------------------------------------- */

    /* init.js clones the logo into the top of the menu; give it room and a
       divider so the panel does not open with the logo jammed against the
       edge. */
    /* The panel needs to read as a slab sitting ON the page, so it must not
       resolve to the page's own colour anywhere. The gradient here ran from
       --u-surface down to --u-bg, and --u-bg IS the page ground - so the
       lower half of the drawer dissolved into the background behind it and
       looked like a hole in the menu. Solid surface, and a lit right edge to
       separate it from whatever it is covering. */
    .main-nav {
        background: var(--u-surface) !important;
        border-right: 1px solid rgba(243, 65, 65, .35);
        box-shadow: 6px 0 28px rgba(0, 0, 0, .6);

        /* 100vh on a phone measures the viewport with the URL bar hidden, so
           the drawer runs past the bottom of the screen and its last item
           cannot be reached. dvh tracks the visible area. */
        height: 100dvh;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* The theme already gives .main-nav overflow:auto. Adding a second
       scroll box on the list meant the list could size independently of its
       content and leave dead space under the last item. */
    .main-nav__list {
        flex: 0 0 auto;
        margin: 0;
        padding: 0;
    }

    /* The menu's own logo. Reset the bar's absolute placement, then give it
       real presence: it is the first thing in the panel and the only piece of
       branding once the menu covers the page. */
    .main-nav .header-mobile__logo {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 30px 16px 26px !important;

        /* The mark sits on its own lit plate at the head of the drawer, with
           an accent rule under it, so it reads as a masthead rather than as
           the first row of the list. */
        background:
            radial-gradient(120% 90% at 50% 0%, rgba(243, 65, 65, .22), transparent 70%),
            rgba(0, 0, 0, .3);
        border-bottom: 2px solid var(--u-accent);
        box-shadow: 0 8px 20px -12px rgba(243, 65, 65, .8);
    }

    /* No height here on purpose.
     *
     * The theme sets width: 97px on this image, and pinning a height against
     * that fixed width stretches the mark instead of scaling it. Size is
     * driven by width alone - max-width lets it fill the drawer - and the
     * height follows the aspect ratio. */
    .main-nav .header-mobile__logo-img {
        width: auto;
        max-width: 90%;
        filter: drop-shadow(0 0 26px rgba(243, 65, 65, .6));
    }

    /* The template's back arrow sits over the logo row; keep it clear of the
       larger mark. */
    .main-nav .main-nav__back {
        z-index: 2;
    }

    .main-nav__list > li > a {
        padding: 13px 16px !important;
        font-size: 14px;
    }
}

/* ---------------------------------------------------------------------------
   19. Board last-post identity

   Just the avatar and the author link. The column's LAYOUT lives with the
   board-row grid in section 24 - this block previously also declared the
   layout, for the flex markup that preceded the psn.gg structure, and its
   flex-direction: column then fought the row layout that replaced it. The
   dead .board-row__last-by rule went with it.
   --------------------------------------------------------------------------- */

.board-row__last-avatar {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    object-fit: cover;
    border: 1px solid var(--u-hairline);
    background: var(--u-surface-2);
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
    transition: border-color var(--u-fast) var(--u-ease);
}

.board-row__last-avatar-link { flex: 0 0 auto; }
.board-row__last-avatar-link:hover .board-row__last-avatar { border-color: var(--u-accent); }

.board-row__last-avatar--empty {
    display: grid;
    place-items: center;
    font-size: 12px;
    color: var(--u-text-faint);
}

.board-row__last-user {
    font-weight: 600;
    color: var(--u-text-dim);
}

a.board-row__last-user:hover { color: var(--u-accent); text-decoration: none; }

.board-row__last-time {
    font-size: 11px;
    color: var(--u-text-faint);
}

/* ---------------------------------------------------------------------------
   18b. Mobile header, using the template's own mechanism

   The previous attempt rebuilt .header-mobile as a flex row. That threw away
   the template's mobile behaviour and broke the search with it: init.js clones
   .header-search-form into #header-mobile and toggles
   .header-mobile--expanded, and the template slides the form from top:-62px
   to top:0 underneath the bar. Making .header-mobile__inner a flex child also
   shrank it to a small box, which is the grey rectangle that appeared beside
   the icons.

   Nothing here re-implements any of that. The template's structure stands -
   125px bar with the logo absolutely centred, icons absolutely placed inside
   it, search dropping down beneath - and only three things change:

     - both icons move to the right, search first then the burger
     - the burger becomes the red square used by the desktop panel toggle
     - the bar is shorter, because 125px of near-empty header on a phone is
       most of the first screen

   The JS is untouched. .header-mobile--expanded still does the work.
   --------------------------------------------------------------------------- */

@media (max-width: 991.98px) {

    /* Shorter bar. The template's icons sit at top:54px inside 125px; both
       move up with it. */
    .header-mobile__inner {
        height: clamp(84px, 21vw, 104px);
        background: linear-gradient(180deg, var(--u-surface), var(--u-bg));
        border-bottom: 1px solid var(--u-hairline);
    }

    /* Scoped with a CHILD combinator on .header-mobile, not a descendant of
       .header-mobile__inner.
       
       .header-mobile__logo is a SIBLING of .header-mobile__inner, not a
       child of it, so ".header-mobile__inner .header-mobile__logo-img"
       matched nothing at all and the logo kept the theme's width:97px - which
       is why it stayed tiny after being "made bigger" twice. The child
       combinator still excludes the copy init.js clones into .main-nav. */
    /* Left-aligned, not centred.
     *
     * Centring was the actual ceiling on the size. The search and burger take
     * the right ~130px, so a mark centred in the bar can only ever grow until
     * it collides with them - on a 375px phone that caps it around 95px wide,
     * which is why raising the height twice changed almost nothing. Anchored
     * left, it runs from the edge to wherever the controls begin and has
     * roughly twice the room, and the dead space on the left is used. */
    .header-mobile > .header-mobile__logo {
        left: 18px;
        top: 50%;
        transform: translateY(-50%);
    }

    /* Fills the bar rather than floating in it. The mark is the only
       branding on screen once the desktop masthead collapses. */
    .header-mobile > .header-mobile__logo .header-mobile__logo-img {
        width: auto !important;
        height: clamp(54px, 16vw, 65px);

        /* Hard stop before the controls. 200px covers all three 44px buttons,
           the gaps between them and the bar's right padding, so the mark can
           never run underneath them however narrow the screen. It was 150px
           for two buttons; the theme switch is the third. */
        max-width: calc(100vw - 200px);

        filter: drop-shadow(0 0 18px rgba(243, 65, 65, .5));
    }

    /* --- Icons, right-aligned: theme, search, then burger ----------------- */

    /* Leftmost of the three, so the two controls that change what is on
       screen right now - search and the menu - stay under the thumb, and the
       one that changes how it looks sits past them.

       .header-mobile__inner is position:relative, which is what these absolute
       offsets are measured from: 14 + 44 (burger) + 14 + 44 (search) + 14. */
    .header-mobile .theme-switch--icon {
        position: absolute;
        top: 50%;
        right: 130px;
        z-index: 102;
        transform: translateY(-50%);
    }

    /* The burger is the rightmost control, as the red square from the desktop
       panel toggle so the two read as the same button. */
    .header-mobile .burger-menu-icon {
        top: 50%;
        left: auto;
        right: 14px;
        transform: translateY(-50%);

        display: block;
        width: 44px;
        height: 44px;
        background: linear-gradient(135deg, var(--u-accent-bright), var(--u-accent-deep));
        box-shadow: 0 2px 12px rgba(243, 65, 65, .3);
        clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
    }

    /* The template draws the three bars from a single element plus its two
       pseudo-elements, offset 8px and 16px from the top of the box. Centring
       them inside a 44px button means insetting by (44 - 19) / 2. */
    .header-mobile .burger-menu-icon__line {
        top: 12px;
        left: 50%;
        width: 22px;
        margin-left: -11px;
        background-color: #fff;
    }

    .header-mobile .burger-menu-icon__line::before,
    .header-mobile .burger-menu-icon__line::after {
        background-color: #fff;
    }

    /* Search sits immediately left of the burger. */
    .header-mobile .header-mobile__search-icon {
        top: 50%;
        right: 72px;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        line-height: 44px;
        font-size: 19px;
        color: var(--u-text);
        transition: color var(--u-fast) var(--u-ease);
    }

    .header-mobile .header-mobile__search-icon:hover { color: var(--u-accent); }

    /* --- Search drop-down -------------------------------------------------- */

    /* The template animates top and height; it only needs dressing. */
    .header-mobile .header-search-form {
        background: var(--u-surface);
        border-bottom: 1px solid var(--u-hairline);
    }

    .header-mobile--expanded .header-search-form {
        height: 68px;
        box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .8);
    }

    .header-mobile .header-search-form .search-form {
        display: flex;
        align-items: center;
        gap: 8px;
        height: 100%;
    }

    .header-mobile input.header-mobile__search-control {
        flex: 1 1 auto;
        margin-top: 0;
        height: 42px;
        padding: 0 14px;
        font-size: 14px;
        color: var(--u-text);
        background: rgba(0, 0, 0, .45);
        border: 1px solid var(--u-hairline);
        border-radius: 2px;
    }

    .header-mobile input.header-mobile__search-control:focus {
        outline: none;
        border-color: rgba(243, 65, 65, .5);
    }

    /* A real submit button beside the field rather than an icon floating on
       top of it - a thumb needs something to hit. */
    .header-mobile .header-mobile__search-submit {
        position: static;
        flex: 0 0 auto;
        width: 46px;
        height: 42px;
        border: 0;
        color: #fff;
        background: linear-gradient(135deg, var(--u-accent-bright), var(--u-accent-deep));
        clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
    }
}

/* ---------------------------------------------------------------------------
   20. Wide and ultrawide displays

   The bundled Bootstrap is v4, whose largest container breakpoint is 1200px
   and caps at 1140px. Nothing overrode it, so a 2560 or 3440px monitor showed
   a 1140px column of content in the middle of an ocean of background - the
   site looked like a phone layout that had been left running on a desktop.

   The container now steps up with the viewport rather than jumping straight
   to one huge number. A single 1686px cap fixes the 1920px case and does
   nothing for 1440px, which is the far more common "wide" screen.

     >= 1400   1320    the width Bootstrap 5 would have used
     >= 1600   1480
     >= 1920   1686    full HD and most ultrawides
     >= 2560   1860    4K and 3440-wide panels

   It stops at 1860 on purpose. Container width is not the goal - a layout
   that stays readable is, and past roughly 1900px a grid row starts holding
   so many cards that scanning it costs more than scrolling would.

   The hard rule below all of this: LINE LENGTH DOES NOT SCALE. Prose stays
   between about 60 and 80 characters however wide the window gets. Letting a
   post body run the full 1860px would make the site technically responsive
   and genuinely unreadable, which is a worse outcome than the empty margins
   it replaced.
   --------------------------------------------------------------------------- */

@media (min-width: 1400px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl { max-width: 1320px; }
}

@media (min-width: 1600px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl { max-width: 1480px; }
}

@media (min-width: 1920px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl { max-width: 1686px; }
}

@media (min-width: 2560px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl { max-width: 1860px; }
}

/* --- Use the width, do not just occupy it -------------------------------- */

@media (min-width: 1600px) {
    /* A fourth column costs nothing here and turns two rows into one. */
    .news-grid { grid-template-columns: repeat(4, 1fr); gap: 22px; }

    /* The lead story gets proportionally more artwork, since the panel beside
       it only needs enough room for a headline and a standfirst. */
    .news-lead { grid-template-columns: 1.45fr .55fr; }
    .news-lead__media { min-height: 420px; }

    /* The author column can afford to be roomier before the message starts. */
    .post { grid-template-columns: 220px 1fr; }
}

@media (min-width: 2200px) {
    .news-grid { grid-template-columns: repeat(5, 1fr); }
}

/* --- Reading measure ------------------------------------------------------ */

/* Prose columns cap regardless of container width. 78ch is roughly the upper
   end of comfortable; beyond it the eye loses the line it is returning to. */
@media (min-width: 1600px) {
    .post__body,
    .article__body,
    .news-lead__excerpt {
        max-width: 78ch;
    }

    /* Centred rather than left-aligned in its column, so a wide post does not
       leave one enormous gutter on the right. */
    .article__body { margin-inline: auto; }
}

/* Cards in a very wide grid get a floor on their height so a three-word
   headline does not produce a card a third the height of its neighbours. */
@media (min-width: 1920px) {
    .news-tile__body { min-height: 210px; }
}

/* --- Very short viewports ------------------------------------------------- */

/* A wide monitor is often also a short one once browser chrome is accounted
   for, and a laptop in landscape is shorter still. The masthead is the first
   thing worth reclaiming space from. */
@media (min-height: 0px) and (max-height: 620px) and (min-width: 992px) {
    .header__secondary > .container { padding-top: 5px; padding-bottom: 5px; }
    .page-heading { padding-top: 22px; padding-bottom: 22px; }
}

/* ---------------------------------------------------------------------------
   21. Footer news list

   .posts--simple-list is only styled by the theme inside .pushy-panel, so in
   the footer it had no layout at all: the item was a plain block and the
   thumbnail rendered at the column's full width. With article artwork now
   seeded, that meant each "Breaking News" entry carried a ~200x112 panel of
   almost-black SVG above its headline - which read as a large empty gap
   rather than as an image, and stretched the column to roughly three times
   the height it needed.

   Laid out as a proper media row: small fixed thumbnail, text beside it.
   --------------------------------------------------------------------------- */

.widget--footer .posts--simple-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.widget--footer .posts--simple-list .posts__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.widget--footer .posts--simple-list .posts__item:last-child { border-bottom: 0; }

.widget--footer .posts--simple-list .posts__thumb {
    flex: 0 0 76px;
    width: 76px;
    height: 54px;
    margin: 0;
    overflow: hidden;
    background: var(--u-bg);
    border: 1px solid var(--u-hairline);
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

.widget--footer .posts--simple-list .posts__thumb a,
.widget--footer .posts--simple-list .posts__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.widget--footer .posts--simple-list .posts__inner {
    min-width: 0;   /* lets long headlines ellipsis instead of forcing width */
    flex: 1 1 auto;
}

.widget--footer .posts--simple-list .posts__cat { margin: 0 0 4px; }

.widget--footer .posts--simple-list .posts__cat-label {
    display: inline-block;
    padding: 2px 7px;
    font-family: Rajdhani, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    background: var(--u-accent-deep);
    border-radius: 2px;
}

.widget--footer .posts--simple-list .posts__title {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
}

/* The headlines were rendering in the accent, which made a list of three
   articles the loudest thing in the footer. Body colour, accent on hover. */
.widget--footer .posts--simple-list .posts__title a { color: var(--u-text); }
.widget--footer .posts--simple-list .posts__title a:hover { color: var(--u-accent); text-decoration: none; }

.widget--footer .posts--simple-list .posts__date {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    color: var(--u-text-faint);
}

/* ---------------------------------------------------------------------------
   22. Side panel

   The panel opened white. The template keeps its dark palette on a
   .pushy-panel--dark modifier and the markup only carried .pushy-panel, so
   .pushy-panel__inner fell back to its default light background - a white
   slab sliding out of a black site.

   The modifier is on the markup now. What follows takes it the rest of the
   way from the template's mid-grey #292c31 to the palette the site actually
   uses, so the panel matches the cards rather than approximating them.
   --------------------------------------------------------------------------- */

.pushy-panel--dark .pushy-panel__inner {
    background: linear-gradient(180deg, var(--u-surface), var(--u-bg));
    border-left: 1px solid var(--u-hairline);
}

.pushy-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--u-hairline);
    background: rgba(0, 0, 0, .28);
}

/* The close arrow, relit.
 *
 * The template's is a data: URI with fill='%2331404b' baked in -- a dark
 * slate drawn for the panel's ORIGINAL white background. The panel is dark
 * here in both modes, so the only control for shutting it was a dark arrow on
 * a dark strip. Same path, light fill. No colour substitution can reach
 * inside a data: URI, which is why this is a whole new declaration rather
 * than an override of the fill. */
.pushy-panel__back-btn {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 8'%3E%3Cpath transform='translate(-238.75 -17.75)' fill='%23e9ecf1' d='M240,21h12v2H240V21Zm0.171-.415,4.243,4.243L243,26.242,238.757,22Zm4.243-1.414-4.243,4.242L238.757,22,243,17.757Z'/%3E%3C/svg%3E");
    opacity: .75;
    transition: opacity var(--u-fast) var(--u-ease);
}

.pushy-panel__back-btn:hover { opacity: 1; }

.pushy-panel__logo img {
    height: 40px;
    width: auto;
}

.pushy-panel__content { padding: 18px 22px 28px; }

/* Section headings, matching the accent kicker used on card titles. */
.pushy-panel .widget--side-panel .widget__title { margin: 0 0 4px; }

.pushy-panel--dark .widget--side-panel .widget__title > h4 {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--u-text-faint);
}

.pushy-panel .widget--side-panel + .widget--side-panel { margin-top: 24px; }

/* Rows: tighter than the theme's, and the icon carries the accent rather than
   the label - a column of red text is not a menu, it is a warning. */
.pushy-panel .side-nav__item > a {
    padding: 9px 4px;
    font-size: 14px;
    color: var(--u-text-dim);
}

.pushy-panel .side-nav__item > a i {
    flex: 0 0 20px;
    font-size: 14px;
    text-align: center;
    color: var(--u-accent);
    transition: transform var(--u-fast) var(--u-ease);
}

.pushy-panel .side-nav__item > a:hover { color: #fff; }
.pushy-panel .side-nav__item > a:hover i { transform: translateX(2px); }

.pushy-panel .side-nav__link--danger,
.pushy-panel .side-nav__link--danger i { color: #f87171; }

/* The panel's own news list, same media row as the footer's. */
.pushy-panel .posts--simple-list .posts__item {
    display: flex;
    gap: 11px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.pushy-panel .posts--simple-list .posts__thumb {
    flex: 0 0 68px;
    width: 68px;
    height: 48px;
    margin: 0;
    overflow: hidden;
    background: var(--u-bg);
}

.pushy-panel .posts--simple-list .posts__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pushy-panel--dark .posts--simple-list .posts__title a { font-size: 13px; }
.pushy-panel--dark .posts--simple-list .posts__title a:hover { color: var(--u-accent); }

/* ---------------------------------------------------------------------------
   23. Registration

   Matches the donor's form: two columns of fields, then the agreements block,
   then the submit. The agreements are deliberately the heaviest thing on the
   page short of the button - they are the part a member is actually agreeing
   to, and burying them in small grey text is how you end up with a consent
   record nobody can defend.
   --------------------------------------------------------------------------- */

.page-heading--horizontal .page-heading__breadcrumb { margin-bottom: 0; }

.form-group { margin-bottom: 16px; }

.form-group > label {
    display: block;
    margin-bottom: 6px;
    font-family: Rajdhani, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--u-text-dim);
}

.form-label__hint {
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: none;
    color: var(--u-text-faint);
}

/* Bootstrap 4's .help-block is what the donor used for field errors. */
.help-block {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: #f87171;
}

.form-control.is-invalid { border-color: rgba(248, 113, 113, .6); }

/* Three selects on one row that stay usable when the names are long. */
.dob-group {
    display: flex;
    gap: 8px;
}

.dob-group .form-control {
    flex: 1 1 0;
    min-width: 0;
}

/* --- Agreements ----------------------------------------------------------- */

.agreements {
    margin: 22px 0 20px;
    padding: 18px;
    background: rgba(0, 0, 0, .3);
    border: 1px solid var(--u-hairline);
    border-left: 3px solid var(--u-accent);
    border-radius: 2px;
}

.agreements__title {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--u-accent);
}

.agreements__item { margin-bottom: 12px; }
.agreements__item:last-of-type { margin-bottom: 0; }

.agreements__label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: normal;
    text-transform: none;
    color: var(--u-text-dim);
    cursor: pointer;
}

.agreements__label input[type="checkbox"] {
    flex: 0 0 auto;
    margin-top: 3px;
    width: 16px;
    height: 16px;
    accent-color: var(--u-accent);
    cursor: pointer;
}

.agreements__label a {
    color: var(--u-accent);
    text-decoration: underline;
}

.agreements__required { color: #f87171; }

.agreements__error {
    margin-top: 5px;
    font-size: 11px;
    color: #f87171;
}

.agreements__note {
    margin: 14px 0 0;
    padding-top: 12px;
    font-size: 11px;
    line-height: 1.6;
    color: var(--u-text-faint);
    border-top: 1px solid var(--u-hairline);
}

.agreements__note strong { color: var(--u-text-dim); }

/* --- Closed / footer ------------------------------------------------------ */

.register-closed {
    padding: 30px 10px;
    text-align: center;
}

.register-closed h5 { color: var(--u-text); }
.register-closed p { margin: 8px 0 0; color: var(--u-text-dim); }

.register-signin {
    margin: 16px 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--u-text-dim);
}

/* ---------------------------------------------------------------------------
   24. Forum index, psn.gg structure

   The board row becomes a five-column grid rather than a flex line:

       [icon] [name / description / sub-boards] [threads] [posts] [last post]

   Fixed columns for the counts and the last post are the point. A forum index
   exists to answer "how busy is this board and what happened most recently",
   and letting those wrap wherever the description ends means the reader has to
   find the answer on every row instead of scanning one column.

   The tabs change from filled chips to psn.gg's underline bar. Five chips in a
   bordered rail competed with the section headers below them; an underline
   reads as navigation and gets out of the way.
   --------------------------------------------------------------------------- */

/* --- Tabs ----------------------------------------------------------------- */

.forum-tabs {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--u-hairline);
    border-radius: 0;
    clip-path: none;
    padding: 0;
    gap: 0;
    margin-bottom: 22px;
}

.forum-tabs::before { display: none; }

.forum-tabs__link {
    position: relative;
    padding: 13px 20px;
    background: none;
    border-radius: 0;
    color: var(--u-text-faint);
}

.forum-tabs__link:hover,
.forum-tabs__link:focus-visible {
    background: none;
    color: var(--u-text);
}

.forum-tabs__link.is-active {
    background: none;
    color: #fff;
    box-shadow: none;
    clip-path: none;
}

/* The indicator sits on the shared rule, so the active tab reads as attached
   to the panel below it. */
.forum-tabs__link.is-active::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--u-accent-bright), var(--u-accent-deep));
    box-shadow: 0 0 12px var(--u-accent-glow);
}

/* --- Section headers ------------------------------------------------------ */

.forum-section { margin-bottom: 16px; }

.forum-section__header { align-items: flex-start; }

.forum-section__description {
    margin: 4px 0 0 12px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--u-text-dim);
}

/* Column captions, aligned to the grid tracks below. Hidden on narrow screens
   where those columns collapse and the captions would label nothing. */
.forum-section__legend {
    display: none;
    flex: 0 0 auto;
    gap: 0;
    font-family: Rajdhani, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--u-text-faint);
}

.forum-section__body { padding: 0; }

/* --- Board row ------------------------------------------------------------ */

.board-row {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    transition: background-color var(--u-fast) var(--u-ease);
}

.board-row:last-child { border-bottom: 0; }
.board-row:hover { background: rgba(243, 65, 65, .04); }

.board-row--sub {
    padding-left: 40px;
    background: rgba(0, 0, 0, .16);
}

.board-row__icon-cell { position: relative; }

.board-row__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    font-size: 15px;
    color: var(--u-accent);
    background: var(--u-accent-soft);
    border: 1px solid rgba(243, 65, 65, .28);
    border-radius: 3px;
    transition: border-color var(--u-fast) var(--u-ease), box-shadow var(--u-fast) var(--u-ease);
}

.board-row:hover .board-row__icon {
    border-color: var(--u-accent);
    box-shadow: 0 0 14px rgba(243, 65, 65, .3);
}

/* Somebody posted this week. */
.board-row__hot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid var(--u-surface);
    box-shadow: 0 0 8px rgba(34, 197, 94, .7);
}

.board-row__main { min-width: 0; }

.board-row__name {
    display: block;
    font-family: Rajdhani, sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
}

.board-row__name:hover { color: var(--u-accent); text-decoration: none; }
.board-row__external { font-size: 11px; opacity: .6; }

.board-row__description {
    margin: 2px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--u-text-dim);
}

.board-row__subs {
    margin-top: 4px;
    font-size: 11px;
    color: var(--u-text-faint);
}

.board-row__subs-label {
    margin-right: 5px;
    font-family: Rajdhani, sans-serif;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.board-row__subs a { color: var(--u-text-dim); }
.board-row__subs a:hover { color: var(--u-accent); }

.board-row__stat { display: none; text-align: center; }

.board-row__stat-number {
    display: block;
    font-family: Rajdhani, sans-serif;
    font-size: 19px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--u-text);
}

.board-row__stat-label {
    display: block;
    margin-top: 3px;
    font-family: Rajdhani, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--u-text-faint);
}

.board-row__last-post {
    display: none;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.board-row__last-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.35;
}

.board-row__last-subject {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--u-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Author and time on one line, with the time pushed right so the eye can run
   down the timestamps without reading past a variable-length username. */
.board-row__last-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.board-row__last-meta .board-row__last-user {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.board-row__last-meta .board-row__last-time { flex: 0 0 auto; }

.board-row__last-subject:hover { color: var(--u-accent); text-decoration: none; }

.board-row__last-empty {
    font-size: 12px;
    color: var(--u-text-faint);
}

/* --- Wide enough for the full grid ---------------------------------------- */

/* The track widths live in custom properties so the row and the column
   legend above it read from ONE definition. Declaring them twice is how the
   captions end up a few pixels out of line with the columns they label. */
@media (min-width: 768px) {
    .forum-section,
    .thread-list__legend,
    .board-row {
        --board-stat: 76px;
        --board-last: 260px;
        --board-gap: 14px;
    }

    .board-row {
        grid-template-columns:
            46px
            minmax(0, 1fr)
            var(--board-stat)
            var(--board-stat)
            var(--board-last);
        gap: var(--board-gap);
    }

    .board-row__stat { display: block; }
    .board-row__last-post { display: flex; }

    .forum-section__legend {
        display: grid;
        grid-template-columns: var(--board-stat) var(--board-stat) var(--board-last);
        gap: var(--board-gap);
        padding-right: 18px;
        text-align: center;
    }

    .forum-section__legend span:last-child { text-align: left; }
}

/* The last-post column grows with the viewport.
 *
 * It was a flat 300px at every width. On a 1686px container that left the
 * name column around 1080px - far more than a board name and a one-line
 * description need - while the column carrying a thread title, an author and
 * a timestamp stayed cramped enough to ellipsis almost everything. The extra
 * width goes where there is actually content to show. */
@media (min-width: 992px) {
    .forum-section,
    .thread-list__legend,
    .board-row { --board-stat: 84px; --board-last: 330px; }
}

@media (min-width: 1200px) {
    .forum-section,
    .thread-list__legend,
    .board-row { --board-stat: 90px; --board-last: 400px; }
}

@media (min-width: 1600px) {
    .forum-section,
    .thread-list__legend,
    .board-row { --board-stat: 96px; --board-last: 460px; }
}

.forum-guest-note {
    margin: 18px 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--u-text-dim);
}

.forum-guest-note a { color: var(--u-accent); }

/* ---------------------------------------------------------------------------
   25. Thread status strip and poll

   psn.gg carries thread state in banners with a coloured left border rather
   than in the heading. Two reasons it is worth copying: the state stays
   visible from anywhere in a long thread, and each state gets its own colour
   instead of pending, pinned and locked all sharing one "warning" yellow.
   --------------------------------------------------------------------------- */

.thread-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 12px 16px;
    background: var(--u-surface);
    border: 1px solid var(--u-hairline);
    border-left-width: 4px;
    border-radius: 2px;
    font-size: 13px;
    color: var(--u-text-dim);
}

.thread-banner i { flex: 0 0 auto; font-size: 14px; }

.thread-banner--pending { border-left-color: #f5a623; }
.thread-banner--pending i { color: #f5a623; }

.thread-banner--sticky { border-left-color: #3B9EFF; }
.thread-banner--sticky i { color: #3B9EFF; }

.thread-banner--locked { border-left-color: var(--u-accent); }
.thread-banner--locked i { color: var(--u-accent); }

/* --- Poll ----------------------------------------------------------------- */

.thread-poll {
    margin-bottom: 16px;
    padding: 18px 20px;
    background: linear-gradient(180deg, var(--u-surface), var(--u-bg));
    border: 1px solid var(--u-hairline);
    border-left: 3px solid var(--u-accent);
    border-radius: 2px;
}

.thread-poll__eyebrow {
    font-family: Rajdhani, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--u-accent);
}

.thread-poll__question {
    margin: 8px 0 0;
    font-size: 17px;
    color: #fff;
}

.thread-poll__description {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--u-text-dim);
}

.thread-poll__options {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.thread-poll__option + .thread-poll__option { margin-top: 12px; }

.thread-poll__label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 5px;
    font-size: 13px;
    color: var(--u-text);
}

.thread-poll__count {
    flex: 0 0 auto;
    font-family: Rajdhani, sans-serif;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--u-text-dim);
}

.thread-poll__bar {
    height: 8px;
    background: rgba(0, 0, 0, .45);
    border: 1px solid var(--u-hairline);
    border-radius: 999px;
    overflow: hidden;
}

.thread-poll__bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--u-accent-deep), var(--u-accent-bright));
    box-shadow: 0 0 12px var(--u-accent-glow);
    transition: width var(--u-slow) var(--u-ease);
}

.thread-poll__total {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--u-hairline);
    font-family: Rajdhani, sans-serif;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--u-text-faint);
}

/* ---------------------------------------------------------------------------
   26. Match preview

   The template's "Top Next Match" panel, carrying a fight instead of a
   fixture. Its 68 rules in style-ufc-dark.css do the layout; what follows is
   the part that does not survive the swap:

     - team logos become fighter portraits. A club badge is a flat graphic on
       a transparent background and looks right at any size; a photograph
       needs a frame, a fixed aspect and object-fit, or two fighters with
       differently cropped headshots render at visibly different scales
     - the panel was designed light, so the countdown strip and the action
       button need the dark palette
     - a compact variant for the Upcoming list, where the same panel repeats
       and cannot be full height each time
   --------------------------------------------------------------------------- */

.match-preview__title {
    font-size: 17px;
    line-height: 1.25;
    text-transform: uppercase;
}

.match-preview__title a { color: #fff; }
.match-preview__title a:hover { color: var(--u-accent); text-decoration: none; }

.match-preview__date {
    display: block;
    margin-top: 5px;
    font-family: Rajdhani, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--u-accent);
}

/* --- Fighter portraits ---------------------------------------------------- */

.match-preview__team-logo {
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    margin: 0 auto 10px;
    overflow: hidden;
    background: radial-gradient(circle at 50% 30%, var(--u-surface-2), var(--u-bg));
    border: 1px solid var(--u-hairline);
    border-radius: 50%;
}

/* Square-cropped and top-weighted: a portrait cropped at the centre cuts the
   head off, which is the only part that identifies the fighter. */
.match-preview__team-logo img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 50% 18%;
}

.match-preview__team-silhouette {
    font-size: 30px;
    color: var(--u-text-faint);
}

/* The corner each fighter is in, as a ring. Same convention as the bout
   cards, so red and blue mean the same thing in both places. */
.match-preview__team--first .match-preview__team-logo {
    border-color: rgba(243, 65, 65, .55);
    box-shadow: 0 0 18px rgba(243, 65, 65, .22);
}

.match-preview__team--second .match-preview__team-logo {
    border-color: rgba(61, 139, 255, .55);
    box-shadow: 0 0 18px rgba(61, 139, 255, .22);
}

.match-preview__team-name {
    margin: 0;
    font-size: 15px;
    line-height: 1.2;
    text-transform: uppercase;
}

.match-preview__team-name a { color: #fff; }
.match-preview__team-name a:hover { color: var(--u-accent); text-decoration: none; }

.match-preview__team-info {
    margin-top: 3px;
    font-family: Rajdhani, sans-serif;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: .06em;
    color: var(--u-text-dim);
}

/* --- Centre column -------------------------------------------------------- */

.match-preview__conj {
    font-family: Rajdhani, sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--u-text);
}

.match-preview__match-time {
    display: block;
    font-family: Rajdhani, sans-serif;
    font-weight: 700;
    color: var(--u-text);
}

.match-preview__match-place,
.match-preview__stake {
    font-size: 11px;
    line-height: 1.45;
    color: var(--u-text-faint);
}

.match-preview__stake {
    margin-top: 3px;
    font-family: Rajdhani, sans-serif;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--u-accent);
}

.match-preview__unmatched {
    padding: 18px 0;
    text-align: center;
    font-size: 13px;
    color: var(--u-text-dim);
}

/* --- Action and countdown ------------------------------------------------- */

.match-preview__action { margin-top: 18px; }

/* The template's btn-default is a light grey slab. */
.match-preview__action .btn-default {
    display: block;
    width: 100%;
    padding: 12px 16px;
    font-family: Rajdhani, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, var(--u-accent-bright), var(--u-accent-deep));
    border: 0;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    transition: filter var(--u-fast) var(--u-ease);
}

.match-preview__action .btn-default:hover { filter: brightness(1.08); text-decoration: none; }

.match-preview__countdown {
    margin: 18px -18px -18px;
    padding: 14px 18px 16px;
    background: rgba(0, 0, 0, .32);
    border-top: 1px solid var(--u-hairline);
}

.countdown__title {
    margin: 0 0 10px;
    font-family: Rajdhani, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-align: center;
    color: var(--u-text-faint);
}

.countdown-counter {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.countdown-counter__item {
    flex: 1 1 0;
    text-align: center;
    font-family: Rajdhani, sans-serif;
    font-size: 24px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    color: #fff;
}

.countdown-counter__label {
    display: block;
    margin-top: 2px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--u-text-faint);
}

/* --- Compact variant for the Upcoming list -------------------------------- */

.match-preview--compact + .match-preview--compact {
    margin-top: 14px;
    padding-top: 16px;
    border-top: 1px solid var(--u-hairline);
}

.match-preview--compact .match-preview__title { font-size: 14px; }
.match-preview--compact .match-preview__date { font-size: 10px; }

.match-preview--compact .match-preview__team-logo {
    width: 54px;
    height: 54px;
    margin-bottom: 7px;
}

.match-preview--compact .match-preview__team-silhouette { font-size: 19px; }
.match-preview--compact .match-preview__team-name { font-size: 12px; }
.match-preview--compact .match-preview__team-info { font-size: 11px; }
.match-preview--compact .match-preview__conj { font-size: 16px; }

/* One route into the card is enough at this size. */
.match-preview--compact .match-preview__action { display: none; }

/* ---------------------------------------------------------------------------
   27. Bootstrap defaults, themed

   Two families of component were still rendering in stock Bootstrap: the
   paginator (now emitting Bootstrap 4 markup - see AppServiceProvider) and
   the alerts, which are light-on-light and appeared as a pale grey slab in
   the middle of a dark page.
   --------------------------------------------------------------------------- */

.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    justify-content: center;
}

.page-item { display: flex; }

.page-link {
    display: block;
    min-width: 40px;
    padding: 9px 13px;
    font-family: Rajdhani, sans-serif;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: var(--u-text-dim);
    background: var(--u-surface);
    border: 1px solid var(--u-hairline);
    border-radius: 2px;
    transition:
        color var(--u-fast) var(--u-ease),
        border-color var(--u-fast) var(--u-ease),
        background-color var(--u-fast) var(--u-ease);
}

.page-link:hover,
.page-link:focus-visible {
    color: #fff;
    background: var(--u-accent-soft);
    border-color: rgba(243, 65, 65, .45);
    text-decoration: none;
}

.page-item.active .page-link {
    color: #fff;
    background: linear-gradient(135deg, var(--u-accent-bright), var(--u-accent-deep));
    border-color: transparent;
    box-shadow: 0 3px 14px -4px var(--u-accent-glow);
}

.page-item.disabled .page-link {
    color: var(--u-text-faint);
    background: rgba(255, 255, 255, .02);
    border-color: var(--u-hairline);
    opacity: .6;
    pointer-events: none;
}

/* Laravel's Bootstrap 4 view wraps the "showing x to y of z" line in these. */
.pagination-wrapper,
.pagination + p,
nav[role="navigation"] p.small {
    margin-top: 10px;
    text-align: center;
    font-size: 12px;
    color: var(--u-text-faint);
}

/* --- Alerts --------------------------------------------------------------- */

/* Tinted from the page surface rather than Bootstrap's near-white fills, and
   carrying the meaning on a left border so the four variants stay
   distinguishable without four loud background colours. */
.alert {
    padding: 13px 16px;
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--u-text-dim);
    background: var(--u-surface);
    border: 1px solid var(--u-hairline);
    border-left-width: 4px;
    border-radius: 2px;
}

.alert a { color: var(--u-accent); text-decoration: underline; }

.alert-success   { border-left-color: #22c55e; }
.alert-warning   { border-left-color: #f5a623; }
.alert-danger    { border-left-color: #f87171; }
.alert-info      { border-left-color: #3B9EFF; }
.alert-secondary { border-left-color: var(--u-text-faint); }

.alert-success .alert-heading  { color: #22c55e; }
.alert-warning .alert-heading  { color: #f5a623; }
.alert-danger .alert-heading   { color: #f87171; }

/* Bootstrap's validation feedback is the same problem. */
.invalid-feedback { color: #f87171; font-size: 12px; }
.valid-feedback { color: #22c55e; font-size: 12px; }

/* ---------------------------------------------------------------------------
   28. Content and footer artwork

   Two supplied images, applied differently because they are different files.

   site-content.png (1672x941, NO alpha) is the page backdrop. It is FIXED to
   the viewport rather than scrolling with the content: the artwork is a
   single composed image, so scrolling it means most of it is off screen most
   of the time and the part you can see slides around. Pinned, it behaves like
   a backdrop the content moves over.

   Being opaque, it cannot sit on top of anything - as a literal overlay it
   would hide the page. It sits behind, at an opacity high enough to actually
   read as artwork.

   footer.png (2172x724, WITH alpha) is a true overlay and sits above the
   footer surface, below its text.
   --------------------------------------------------------------------------- */

.site-content {
    position: relative;
    z-index: 0;   /* the stacking context the backdrop sits inside */
}

.site-content::before {
    content: "";

    /* Fixed, not absolute. Absolute made it scroll away with the page. */
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background-image: url("../../images/site-content.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    /* Opaque source, so this is the dial between "visible artwork" and
       "unreadable text". Paired with the scrim below, which darkens the
       middle of the frame where body copy sits. */
    opacity: .45;
}

/* A scrim over the backdrop, not over the content: the artwork stays visible
   at the edges while the centre column keeps the contrast text needs. */
.site-content::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(19, 20, 23, .82) 0%, rgba(19, 20, 23, .62) 40%, rgba(19, 20, 23, .88) 100%);
}

/* --- Footer --------------------------------------------------------------- */

/* The artwork spans the whole footer, so it goes on .footer itself. .footer
   already uses ::before for the angled wedge and ::after for the diagonal
   hatch, and .footer-widgets is only the top half - putting it there cropped
   the image to that band, which is why it read as a stray logo in a corner
   rather than as a backdrop. */
.footer-widgets::after { content: none; }

.footer__art {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background-image: url("../../images/footer.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: .55;

    /* Fades before the copyright bar so the artwork does not collide with the
       small print at the very bottom. */
    mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 96%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 96%);
}

/* Everything in the footer sits above the artwork. */
.footer-widgets,
.footer-secondary { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------------
   29. Cards that contain cards

   A card wrapping bout cards, posts or news tiles was drawing a border around
   a stack of things that already have borders - two nested frames, an outer
   padding gutter between them, and a background behind a background. The
   inner items are the cards; the outer element is only a section.

   So it stops being a card: the shell, the accent rule and the content
   padding all come off, and the header is demoted to a section heading. The
   inner items then run the full width and their own edges do the work.

   The list is only things that are ACTUALLY bordered cards. Compact match
   previews were in it and should not have been: they carry no border or
   background of their own, only a rule between siblings, so stripping the
   shell left the Upcoming widget floating with no card at all.

   Uses :has(). Where it is unsupported the selector simply does not match and
   the previous nested-frame look returns - visually busier, never broken.
   --------------------------------------------------------------------------- */

.card:has(> .card__content > .bout-card),
.card:has(> .widget__content > .bout-card),
.card:has(> .card__content > .post),
.card:has(> .widget__content > .post),
.card:has(> .card__content > .news-tile),
.card:has(> .widget__content > .news-tile) {
    background: none;
    border: 0;
    border-radius: 0;
    clip-path: none;
    box-shadow: none;
    overflow: visible;
}

/* The accent hairline belongs to the card shell that just went away. */
.card:has(> .card__content > .bout-card)::before,
.card:has(> .widget__content > .bout-card)::before,
.card:has(> .card__content > .post)::before,
.card:has(> .widget__content > .post)::before,
.card:has(> .card__content > .news-tile)::before,
.card:has(> .widget__content > .news-tile)::before {
    display: none;
}

/* The header becomes a section title: no fill, no bottom rule, no inner
   padding to indent it away from the items it labels. */
.card:has(> .card__content > .bout-card) > .card__header,
.card:has(> .widget__content > .bout-card) > .card__header,
.card:has(> .card__content > .post) > .card__header,
.card:has(> .widget__content > .post) > .card__header,
.card:has(> .card__content > .news-tile) > .card__header,
.card:has(> .widget__content > .news-tile) > .card__header {
    background: none;
    border-bottom: 0;
    padding-left: 0;
    padding-right: 0;
}

/* And the body loses its gutter so the inner cards align to the column edge
   rather than sitting inset by 18px on both sides. */
.card:has(> .card__content > .bout-card) > .card__content,
.card:has(> .widget__content > .bout-card) > .widget__content,
.card:has(> .card__content > .post) > .card__content,
.card:has(> .widget__content > .post) > .widget__content,
.card:has(> .card__content > .news-tile) > .card__content,
.card:has(> .widget__content > .news-tile) > .widget__content {
    padding: 0;
}

/* The bout cards were spaced by the card's padding; now they space
   themselves. */
.card:has(> .widget__content > .bout-card) .bout-card:last-child,
.card:has(> .card__content > .bout-card) .bout-card:last-child {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   30. Thread rows

   A board is the same kind of screen as the forum index - a list of things
   with activity counts and a most-recent item - so a thread row IS a board
   row. It carries both classes and inherits the five-column grid, which is
   what keeps the two screens aligned instead of merely similar.

   Only the differences live here.
   --------------------------------------------------------------------------- */

/* The icon reads the thread's state rather than always meaning "board". */
.thread-row__icon {
    background: rgba(255, 255, 255, .04);
    border-color: var(--u-hairline);
    color: var(--u-text-faint);
}

.thread-row:hover .thread-row__icon {
    border-color: rgba(243, 65, 65, .5);
    color: var(--u-accent);
    box-shadow: none;
}

/* Pinned and closed are worth spotting from the top of the list. */
.thread-row:has(.fa-thumbtack) .thread-row__icon {
    color: #3B9EFF;
    border-color: rgba(59, 158, 255, .4);
    background: rgba(59, 158, 255, .1);
}

.thread-row:has(.fa-lock) .thread-row__icon {
    color: #f5a623;
    border-color: rgba(245, 166, 35, .4);
    background: rgba(245, 166, 35, .1);
}

/* Titles are sentence-cased content, not board names, so they keep their own
   casing and wrap rather than being clipped to one line. */
.thread-row__title {
    text-transform: none;
    letter-spacing: 0;
    font-size: 15px;
    line-height: 1.35;
    white-space: normal;
}

.thread-row__title .prefix-pill { margin-right: 6px; vertical-align: middle; }

.thread-row__byline a { color: var(--u-text-dim); }
.thread-row__byline a:hover { color: var(--u-accent); text-decoration: none; }

.thread-row__flag {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 7px;
    font-family: Rajdhani, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #f5a623;
    background: rgba(245, 166, 35, .14);
    border-radius: 2px;
}

/* --- Column captions ------------------------------------------------------ */

/* Hidden by default, as on the index: below 768px those columns collapse and
   the captions would label nothing. */
.thread-list__legend {
    display: none;
    padding: 10px 18px;
    border-bottom: 1px solid var(--u-hairline);
    font-family: Rajdhani, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--u-text-faint);
}

@media (min-width: 768px) {
    /* The full row grid, not just the three stat tracks - the two leading
       cells are what push the captions over their columns. */
    .thread-list__legend {
        display: grid;
        grid-template-columns:
            46px
            minmax(0, 1fr)
            var(--board-stat)
            var(--board-stat)
            var(--board-last);
        gap: var(--board-gap);
        text-align: center;
    }

    .thread-list__legend span:nth-child(1) { grid-column: 3; }
    .thread-list__legend span:nth-child(2) { grid-column: 4; }
    .thread-list__legend span:nth-child(3) { grid-column: 5; text-align: left; }
}

/* ---------------------------------------------------------------------------
   31. Category badge alignment

   The theme floats .posts__cat-label. A float leaves the flow, so the heading
   that follows does not start below the badge - its line boxes wrap around
   it, and the title ends up on the same line jammed against the badge with no
   gap. The theme papers over this with

       .posts__cat-label + .posts__title { margin-top: .55em }

   which only matches its own .posts__title. Every card here uses its own
   title class (.news-row__title, .news-card__title, .news-lead__title), so
   that compensation never applied and the badge collided with the headline in
   all of them.

   Unfloated rather than patched per component. The float was only ever a way
   to sit the badge beside something, and nothing in this design wants that -
   the badge is a label above a headline, or an inline item in a meta row.
   Removing it also un-collapses .posts__cat in the footer and side panel,
   whose height was being zeroed by the floated child.
   --------------------------------------------------------------------------- */

.posts__cat-label {
    float: none;
    display: inline-block;
    padding: 3px 9px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1.5;
    color: #fff;
    border-radius: 2px;
    vertical-align: middle;
}

/* Space below the badge, whatever the heading beside it is called. */
.posts__cat-label + h1,
.posts__cat-label + h2,
.posts__cat-label + h3,
.posts__cat-label + h4,
.posts__cat-label + h5,
.posts__cat-label + h6,
.posts__cat-label + .posts__title,
.posts__cat-label + .news-row__title,
.posts__cat-label + .news-card__title {
    margin-top: 8px;
}

/* Two badges on one row sit beside each other rather than stacking. */
.posts__cat-label + .posts__cat-label { margin-left: 6px; }

/* Wrappers that held a floated child no longer need to clear it. */
.posts__cat { margin-bottom: 6px; }
.posts__cat::after { content: none; }

/* ---------------------------------------------------------------------------
   32. Fighter hero

   UFC.com boxes this into a white panel with the portrait floating in the
   middle and the record set as small body text. The three changes that beat
   it are structural, not decorative:

     - full bleed and dark, so the portrait has somewhere to sit
     - the RECORD is the largest thing on the page. It is the one number
       anyone came for, and on UFC.com it is 14px body copy
     - the portrait is bottom-anchored and allowed to overflow the panel,
       which is what makes a cutout read as a figure standing in the frame
       rather than as an image pasted into a box

   The silhouette is designed rather than tolerated: most fighters will have
   no portrait, so the empty state has to look deliberate.
   --------------------------------------------------------------------------- */


/* Cage mesh and an accent bloom behind the figure. */






/* The headline figure. */







/* --- Portrait ------------------------------------------------------------- */


/* Bottom-aligned and allowed to meet the panel edge, so a cutout stands in
   the frame instead of floating in it. */

/* Absolutely positioned rather than added to the flex row: the credit has to
   appear, but it must not push the portrait around or change its alignment.
   Small and low-contrast because it is a legal notice, not a caption - it
   needs to be legible and present, not prominent. */




/* ==========================================================================
   33  API documentation
   ==========================================================================
   Reference pages are read, not skimmed, so this is the one place on the site
   that deliberately runs quieter than the rest: no angular cuts, no red
   accents competing with the code. The measure is capped because long lines of
   prose between code blocks are what makes documentation tiring.
   -------------------------------------------------------------------------- */

.api-docs {
    max-width: 82ch;
    color: var(--u-text);
}

.api-docs h1 { font-size: 34px; }

.api-docs h2 {
    margin: 46px 0 14px;
    padding-top: 22px;
    font-size: 22px;
    border-top: 1px solid var(--u-hairline);
}

.api-docs section:first-of-type h2 { border-top: 0; padding-top: 0; margin-top: 0; }

.api-docs h3 { font-size: 17px; }
.api-docs p { line-height: 1.68; }

.api-docs code {
    padding: 2px 6px;
    font-size: .88em;
    color: var(--u-text);
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--u-hairline);
    border-radius: 4px;
}

/* Blocks scroll on their own rather than widening the page - a curl example
   with a long URL must never make the whole document scroll sideways. */
.api-docs pre {
    overflow-x: auto;
    margin: 0 0 18px;
    padding: 16px 18px;
    background: rgba(0, 0, 0, .38);
    border: 1px solid var(--u-hairline);
    border-radius: 8px;
}

.api-docs pre code {
    padding: 0;
    background: none;
    border: 0;
    font-size: 13px;
    line-height: 1.6;
    white-space: pre;
}

/* --- Endpoint headings ---------------------------------------------------- */

.api-docs__endpoint {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 24px 0 12px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--u-hairline);
    border-radius: 8px;
}

.api-docs__method {
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    color: #0b0e12;
    background: #24d9b0;
    border-radius: 4px;
}

.api-docs__endpoint code {
    padding: 0;
    background: none;
    border: 0;
    font-size: 15px;
}

.api-docs__base {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--u-hairline);
    border-radius: 8px;
}

.api-docs__label {
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--u-text-faint);
}

/* --- Tables --------------------------------------------------------------- */

.api-docs__table { font-size: 14px; }
.api-docs__table th { color: var(--u-text-faint); font-weight: 600; }
.api-docs__table td, .api-docs__table th { border-color: var(--u-hairline); }

/* --- Notes ---------------------------------------------------------------- */

.api-docs__note {
    margin: 18px 0;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.6;
    background: rgba(59, 158, 255, .07);
    border-left: 3px solid #3b9eff;
    border-radius: 0 6px 6px 0;
}

/* Amber, not red: these are obligations to read, not errors to fix. Red here
   would make a licence note look like a broken build. */
.api-docs__note--warn {
    background: rgba(226, 140, 58, .09);
    border-left-color: #e28c3a;
}

/* --- Plans ---------------------------------------------------------------- */

.api-docs__plan {
    margin-bottom: 18px;
    padding: 20px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--u-hairline);
    border-radius: 10px;
}

.api-docs__plan-head {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
    justify-content: space-between;
}

.api-docs__price { font-size: 24px; font-weight: 700; }
.api-docs__price span { font-size: 13px; font-weight: 400; color: var(--u-text-faint); }

.api-docs__terms {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13.5px;
}

.api-docs__terms li {
    position: relative;
    padding: 4px 0 4px 20px;
    line-height: 1.55;
    color: var(--u-text-muted);
}

.api-docs__terms li::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 4px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--u-text-faint);
}

/* --- Contents ------------------------------------------------------------- */

.api-docs__nav {
    position: sticky;
    top: 96px;
    padding-right: 18px;
}

.api-docs__nav-title {
    display: block;
    margin-bottom: 10px;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--u-text-faint);
}

.api-docs__nav ul { margin: 0; padding: 0; list-style: none; }

.api-docs__nav a {
    display: block;
    padding: 5px 0 5px 12px;
    font-size: 13.5px;
    color: var(--u-text-muted);
    border-left: 2px solid var(--u-hairline);
    transition: color .15s ease, border-color .15s ease;
}

.api-docs__nav a:hover {
    color: var(--u-text);
    border-left-color: var(--u-accent, #f34141);
    text-decoration: none;
}

/* Anchored headings land below the fixed header instead of under it. */
.api-docs section { scroll-margin-top: 96px; }

/* ==========================================================================
   34  Legal documents
   ==========================================================================
   A licence agreement is read to find one clause, not front to back, so the
   priority is that numbered headings stay findable while scrolling. Measure is
   tighter than the docs page because there is no code to accommodate.
   -------------------------------------------------------------------------- */

.legal-doc {
    max-width: 74ch;
    margin: 0 auto;
    color: var(--u-text-muted);
    font-size: 15px;
    line-height: 1.75;
}

.legal-doc h1 {
    margin: 0 0 6px;
    font-size: 28px;
    color: var(--u-text);
}

/* Clause headings sit on a rule so the eye can find "9." while scrolling
   rather than reading every line. */
.legal-doc h2 {
    margin: 44px 0 14px;
    padding-top: 20px;
    font-size: 19px;
    color: var(--u-text);
    border-top: 1px solid var(--u-hairline);
}

.legal-doc h3 {
    margin: 26px 0 10px;
    font-size: 16px;
    color: var(--u-text);
}

.legal-doc p { margin-bottom: 14px; }

.legal-doc strong { color: var(--u-text); }

/* Capitalised blocks are the limitation and disclaimer clauses. Left as the
   author wrote them - the convention signals "this one limits your rights" to
   anyone who has read a contract before, and restyling it away would remove a
   signal that courts in several jurisdictions expect to see. */
.legal-doc em { color: var(--u-text); font-style: italic; }

.legal-doc ul, .legal-doc ol { margin-bottom: 16px; padding-left: 22px; }
.legal-doc li { margin-bottom: 6px; }

.legal-doc hr {
    margin: 40px 0;
    border: 0;
    border-top: 1px solid var(--u-hairline);
}

.legal-doc code {
    padding: 1px 5px;
    font-size: .88em;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--u-hairline);
    border-radius: 3px;
}

/* The tier table is the one part anyone screenshots, so it gets to be wider
   than the measure and scrolls rather than wrapping. */
.legal-doc table {
    display: block;
    width: 100%;
    overflow-x: auto;
    margin: 0 0 20px;
    border-collapse: collapse;
    font-size: 13.5px;
}

.legal-doc th,
.legal-doc td {
    padding: 9px 12px;
    text-align: left;
    border: 1px solid var(--u-hairline);
    white-space: nowrap;
}

.legal-doc th {
    color: var(--u-text);
    background: rgba(255, 255, 255, .04);
}

.legal-doc blockquote {
    margin: 0 0 16px;
    padding: 12px 16px;
    border-left: 3px solid var(--u-hairline);
    color: var(--u-text-faint);
}

/* ==========================================================================
   35  Fighter filter bar
   ==========================================================================
   The search field was rendering its label on top of its own placeholder.

   The theme pins the label absolutely inside the field:

       .post-filter__select .post-filter__label { position: absolute;
                                                  left: 24px; top: 20px; }

   That works for the division dropdown because the cs-select plugin's inner
   span pads 26px/24px/12px and leaves a gap for it. The search field is a
   plain Bootstrap .form-control with neither that padding nor that height, so
   the label landed on the placeholder AND the short control left the taller
   container showing beneath it.

   Fixed by giving the input the select's own metrics rather than by moving the
   label - moving it would misalign the two fields against each other, which is
   the thing the absolute positioning exists to guarantee.
   -------------------------------------------------------------------------- */

/* Flex so the input stretches to whatever height the dropdown beside it
   settles on, instead of guessing at a fixed height that breaks the moment the
   theme's padding changes. */
.post-filter__select--wide {
    display: flex;
    align-items: stretch;
}

.post-filter__select--wide .form-control {
    flex: 1 1 auto;
    height: auto;

    /* Matches .cs-select span exactly, so the placeholder sits on the same
       baseline as the dropdown's value and clears the pinned label. */
    padding: 26px 24px 12px;

    font-size: 13px;
    line-height: 1.2;
    border-radius: 0;
}

@media (min-width: 992px) {
    .post-filter__select--wide .form-control {
        /* .cs-select span at the same breakpoint. */
        padding-top: 32px;
        padding-bottom: 24px;
    }
}

/* The outer ring would break the seam between the two joined fields, so focus
   is drawn inside the control instead. */
.post-filter__select--wide .form-control:focus {
    box-shadow: inset 0 0 0 1px var(--u-accent);
}

/* Uppercase to match the dropdown's value, which is set that way by
   div.cs-skin-border. Without it the two halves of one control read as two
   different components. */
.post-filter__select--wide .form-control,
.post-filter__select--wide .form-control::placeholder {
    text-transform: uppercase;
    letter-spacing: -.02em;
    font-weight: 700;
}

.post-filter__select--wide .form-control::placeholder {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

/* ==========================================================================
   36  API pricing
   ==========================================================================
   The monthly/yearly switch is a checkbox plus sibling selectors, with both
   prices rendered into the page. No script, so the page still answers "what
   does it cost" with JavaScript off - which on a pricing page is the whole
   point of the page.
   -------------------------------------------------------------------------- */

/* No visually-hidden utility exists in this project or in the bundled theme,
   and the switch needs one so its label is announced without being drawn. */
.u-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.pricing__header { text-align: center; margin-bottom: 38px; }

.pricing__title { font-size: 36px; margin-bottom: 10px; }

.pricing__lede {
    max-width: 56ch;
    margin: 0 auto 26px;
    color: var(--u-text-muted);
    line-height: 1.65;
}

/* --- Billing switch ------------------------------------------------------- */

.pricing__billing {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--u-hairline);
    border-radius: 999px;
}

/* Off-screen rather than display:none - a hidden input cannot be focused, and
   the switch has to stay keyboard operable. */
.pricing__billing-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.pricing__billing-option {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--u-text-faint);
    transition: color var(--u-fast) var(--u-ease);
}

.pricing__billing-option--monthly { color: var(--u-text); }

.pricing__billing-switch {
    position: relative;
    display: block;
    width: 44px;
    height: 24px;
    margin: 0;
    cursor: pointer;
    background: rgba(255, 255, 255, .1);
    border-radius: 999px;
    transition: background var(--u-fast) var(--u-ease);
}

.pricing__billing-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: var(--u-text);
    border-radius: 50%;
    transition: transform var(--u-fast) var(--u-ease);
}

.pricing__billing-save {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .02em;
    text-transform: none;
    color: #24d9b0;
}

/* --- Toggled state -------------------------------------------------------- */

.pricing__billing-input:checked ~ .pricing__billing-switch { background: var(--u-accent); }
.pricing__billing-input:checked ~ .pricing__billing-switch .pricing__billing-knob { transform: translateX(20px); }
.pricing__billing-input:checked ~ .pricing__billing-option--monthly { color: var(--u-text-faint); }
.pricing__billing-input:checked ~ .pricing__billing-option--yearly { color: var(--u-text); }

.pricing__billing-input:focus-visible ~ .pricing__billing-switch {
    outline: 2px solid var(--u-accent);
    outline-offset: 3px;
}

/* Monthly is the default view; yearly is revealed by :has() on the checked
   input. Scoped to .site-content so it cannot leak into another page. */
.pricing-card__amount--yearly,
.pricing-card__equivalent--yearly { display: none; }

.site-content:has(.pricing__billing-input:checked) .pricing-card__amount--monthly { display: none; }
.site-content:has(.pricing__billing-input:checked) .pricing-card__amount--yearly { display: inline; }
.site-content:has(.pricing__billing-input:checked) .pricing-card__equivalent--yearly { display: block; }

/* --- Cards ---------------------------------------------------------------- */

.pricing__grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    align-items: stretch;
}

.pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 26px 22px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--u-hairline);
    border-radius: 12px;
}

.pricing-card--featured {
    border-color: var(--u-accent);
    background: rgba(243, 65, 65, .06);
}

.pricing-card__flag {
    position: absolute;
    top: -10px;
    left: 22px;
    padding: 3px 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    background: var(--u-accent);
    border-radius: 999px;
}

.pricing-card__name { font-size: 18px; margin-bottom: 2px; }

.pricing-card__audience {
    font-size: 12.5px;
    color: var(--u-text-faint);
    margin-bottom: 16px;
}

.pricing-card__price { margin-bottom: 2px; }

.pricing-card__amount { font-size: 32px; font-weight: 700; line-height: 1; }
.pricing-card__currency { font-size: 18px; vertical-align: top; }

.pricing-card__period {
    font-size: 13px;
    font-weight: 400;
    color: var(--u-text-faint);
}

.pricing-card__equivalent {
    font-size: 11.5px;
    color: var(--u-text-faint);
    margin: 4px 0 0;
}

.pricing-card__quota {
    margin: 14px 0 12px;
    padding-top: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--u-text);
    border-top: 1px solid var(--u-hairline);
}

.pricing-card__perks {
    flex: 1;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    font-size: 13px;
}

.pricing-card__perks li {
    position: relative;
    padding: 5px 0 5px 18px;
    color: var(--u-text-muted);
    line-height: 1.5;
}

.pricing-card__perks li::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--u-accent);
}

.pricing-card__cta { width: 100%; }

.pricing-card__licence {
    margin: 12px 0 0;
    font-size: 11.5px;
    text-align: center;
    color: var(--u-text-faint);
}

/* --- Notes ---------------------------------------------------------------- */

.pricing__notes {
    max-width: 68ch;
    margin: 34px auto 0;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--u-text-muted);
}

.pricing__notes p { margin-bottom: 10px; }

@media (max-width: 575.98px) {
    .pricing__title { font-size: 28px; }
    .pricing__billing { gap: 9px; padding: 7px 12px; }
    .pricing__billing-option { font-size: 12px; }
}

/* ==========================================================================
   37  Theme switch
   ==========================================================================
   A sliding pill in the desktop top bar, a round icon button in the mobile
   header. Both are the same component and the same button; only the chrome
   around the glyphs differs, because a 54px slider is the wrong shape for a
   bar whose other two controls are 44px thumb targets.

   The state is expressed entirely in CSS off [data-theme] on <html>, which is
   stamped before first paint. Nothing here waits for script, so the switch
   never renders in the wrong position and then jumps.

   The switch lives in the masthead, which stays dark in both modes, so its
   own colours do NOT invert - see theme-light.css, which skips it.
   -------------------------------------------------------------------------- */

.theme-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    color: inherit;
    line-height: 1;
    background: none;
    border: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}

/* The ring goes on the track, not the button: the button box is flush with
   the track, so an outline on it would sit tight against the pill. */
.theme-switch:focus { outline: none; }

.theme-switch:focus-visible .theme-switch__track {
    outline: 2px solid var(--u-accent);
    outline-offset: 3px;
}

.theme-switch__icon {
    z-index: 2;
    line-height: inherit;
}

/* --- Pill, for the desktop top bar ---------------------------------------- */

.theme-switch--bar {
    /* Named so the travel below can be derived rather than hardcoded: get the
       knob or the padding wrong and a magic number silently misaligns it. */
    --sw-w: 54px;
    --sw-h: 26px;
    --sw-knob: 20px;
    --sw-pad: 2px;
}

.theme-switch--bar .theme-switch__track {
    position: relative;
    display: block;
    width: var(--sw-w);
    height: var(--sw-h);
    background: rgba(0, 0, 0, .45);
    border: 1px solid var(--u-hairline);
    border-radius: 999px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45);
    transition: background var(--u-slow) var(--u-ease),
                border-color var(--u-fast) var(--u-ease);
}

.theme-switch--bar:hover .theme-switch__track {
    border-color: var(--u-accent);
}

/* The top bar is LIGHT in light mode, so the track is a recess in a pale
   surface rather than a highlight in a dark one. The mobile variant below
   keeps the opposite treatment, because the mobile bar stays dark. */
:root[data-theme="light"] .theme-switch--bar .theme-switch__track {
    background: rgba(0, 0, 0, .07);
    border-color: rgba(0, 0, 0, .14);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08);
}

.theme-switch--bar .theme-switch__icon {
    position: absolute;
    top: 50%;
    width: var(--sw-knob);
    margin-top: calc(var(--sw-knob) / -2);
    font-size: 10px;
    line-height: var(--sw-knob);
    text-align: center;
    transition: color var(--u-slow) var(--u-ease);
}

.theme-switch--bar .theme-switch__icon--moon { left: var(--sw-pad); }
.theme-switch--bar .theme-switch__icon--sun { right: var(--sw-pad); }

/* The knob parks over the glyph for the mode you are IN, so that glyph is
   drawn dark to read on the white knob and the other is left dim on the
   track. The pair reads as "here, and there" without any text. */
.theme-switch--bar .theme-switch__icon--moon { color: #1a1c20; }
.theme-switch--bar .theme-switch__icon--sun { color: rgba(255, 255, 255, .45); }

:root[data-theme="light"] .theme-switch--bar .theme-switch__icon--moon { color: rgba(0, 0, 0, .38); }
:root[data-theme="light"] .theme-switch--bar .theme-switch__icon--sun { color: #a9741c; }

.theme-switch--bar .theme-switch__knob {
    position: absolute;
    top: 50%;
    left: var(--sw-pad);
    z-index: 1;
    width: var(--sw-knob);
    height: var(--sw-knob);
    margin-top: calc(var(--sw-knob) / -2);
    background: linear-gradient(180deg, #fdfdfe, #ccd1d8);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .55);
    transition: transform var(--u-slow) var(--u-ease),
                background var(--u-slow) var(--u-ease);
}

/* Travel = track inner width - knob - both paddings. The -2px is the track's
   own 1px border on each side, which box-sizing counts inside --sw-w. */
:root[data-theme="light"] .theme-switch--bar .theme-switch__knob {
    transform: translateX(calc(var(--sw-w) - 2px - var(--sw-knob) - var(--sw-pad) * 2));

    /* White on a pale track needs an edge to read as a raised object; the
       dark-mode knob got that for free from the contrast with the track. */
    background: linear-gradient(180deg, #ffffff, #e4e8ee);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .28), 0 0 0 1px rgba(0, 0, 0, .06);
}

/* --- Icon button, for the mobile header ----------------------------------- */

.theme-switch--icon {
    width: 44px;
    height: 44px;
}

/* Literal colours, not tokens, all through this variant. It sits in the
   mobile bar, which stays dark in both modes like the desktop masthead does -
   so var(--u-hairline) would flip to a black hairline that is invisible on
   it, and var(--u-text) would flip the glyph to near-black on near-black. */
.theme-switch--icon .theme-switch__track {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    transition: background var(--u-fast) var(--u-ease),
                border-color var(--u-fast) var(--u-ease);
}

.theme-switch--icon:hover .theme-switch__track,
.theme-switch--icon:active .theme-switch__track {
    background: var(--u-accent-soft);
    border-color: var(--u-accent);
}

.theme-switch--icon .theme-switch__knob { display: none; }

.theme-switch--icon .theme-switch__icon {
    font-size: 17px;
    color: #e9ecf1;
}

/* One glyph, and it is the destination rather than the current state: a
   button that shows you where you already are has nothing to say. */
.theme-switch--icon .theme-switch__icon--moon { display: none; }
.theme-switch--icon .theme-switch__icon--sun { display: block; color: #f0c14b; }

:root[data-theme="light"] .theme-switch--icon .theme-switch__icon--moon { display: block; }
:root[data-theme="light"] .theme-switch--icon .theme-switch__icon--sun { display: none; }

/* .nav-account is display:flex, so the item can be one too and the pill
   centres against the text rows beside it. Margins are left to the theme's
   own .nav-account .nav-account__item rule, which outranks a single class
   anyway.

   Scoped to .header__top-bar, and this matters. init.js clones every child of
   .nav-account into .main-nav__list for the mobile menu, and the theme hides
   the clones with `.main-nav__list .nav-account__item { display: none }` -
   two classes, exactly the same weight as a bare .nav-account__item--theme.
   The unscoped rule was later in the cascade, so it won the tie and put a
   second, orphaned switch in the mobile menu. The clone is not inside
   .header__top-bar, so now the selector simply does not reach it. */
.header__top-bar .nav-account__item--theme {
    display: flex;
    align-items: center;
}

/* Said out loud as well, because the clone is invisible in the markup and the
   next person to touch this will not know it exists. The mobile switch is the
   one in .header-mobile. */
.main-nav__list .nav-account__item--theme { display: none; }

/* The knob slide is the only thing on the page that animates a control the
   user is looking directly at when they press it. */
@media (prefers-reduced-motion: reduce) {
    .theme-switch__knob,
    .theme-switch__track,
    .theme-switch__icon {
        transition: none;
    }
}

/* ==========================================================================
   38  Light theme
   ==========================================================================
   The corrections that used to live here have MOVED to theme-light.css,
   which partials/css.blade.php loads after this file.

   This section was about fifteen selectors - body, .card, .widget, headings,
   .form-control, .table - written against a stylesheet that hardcodes a dark
   value in roughly nine hundred places. Flipping the toggle therefore changed
   almost nothing on screen, and the switch read as broken when it was in fact
   working: there was nothing for it to change. Fifteen hand-written overrides
   was never going to close that gap, so the list is now derived from the
   source stylesheets instead of maintained by hand.

   See resources/build/theme-light/generate.py.

   What stays dark in both modes is a design decision, not an omission: the
   masthead, the slide-out panel and the footer carry the logo and the accent,
   and inverting them makes the site look like a different product rather than
   the same one lit differently.
   -------------------------------------------------------------------------- */

/* The header keeps its dark treatment in both modes. That is deliberate: the
   masthead carries the logo and the accent, and inverting it makes the site
   look like a different product rather than the same one lit differently. */

/* ==========================================================================
   39  Account settings
   ==========================================================================
   Tabs carry a label and a line of copy, the way psn.gg's do: "Security" alone
   does not tell somebody looking for the delete button which panel to open.
   -------------------------------------------------------------------------- */

.settings__tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 14px;
    margin: 0;
    overflow-x: auto;
    list-style: none;
    border-bottom: 1px solid var(--u-hairline);
}

.settings__tab {
    min-width: 190px;
    padding: 12px 16px;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: background var(--u-fast) var(--u-ease),
                border-color var(--u-fast) var(--u-ease);
}

.settings__tab:hover { background: var(--u-raise); }

.settings__tab.active {
    background: var(--u-raise-2);
    border-color: var(--u-hairline);
}

.settings__tab:focus-visible {
    outline: 2px solid var(--u-accent);
    outline-offset: 2px;
}

.settings__tab-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--u-text-dim);
}

.settings__tab.active .settings__tab-label { color: var(--u-accent); }

.settings__tab-copy {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.45;
    color: var(--u-text-faint);
}

.settings__panels { padding: 24px; }

.settings__heading {
    margin-bottom: 18px;
    padding-bottom: 12px;
    font-size: 15px;
    border-bottom: 1px solid var(--u-hairline);
}

.settings__heading--danger { color: var(--u-accent); }

/* --- Two-step verification -------------------------------------------------
   The status word sits inside the subheading rather than beside it, so the
   member reads "Authenticator app: On" as one line instead of scanning for a
   badge somewhere to the right of it. */

.settings__subheading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.settings__2fa .row + .row,
.settings__2fa form + form { margin-top: 14px; }

/* The QR gets a light plate in BOTH modes. A QR code is black modules on
   white; inverted, most phone cameras will not read it at all, and the one
   place that must not fail is the one where the member is holding a phone up
   to the screen. */
.settings__qr {
    display: inline-block;
    padding: 12px;
    margin-bottom: 14px;
    background: #fff;
    border-radius: 6px;
    line-height: 0;
}

.settings__qr svg { display: block; width: 200px; height: 200px; }

.settings__secret {
    display: inline-block;
    padding: 6px 10px;
    font-size: 14px;
    letter-spacing: .12em;
    word-break: break-all;
    background: var(--u-raise);
    border: 1px solid var(--u-hairline);
    border-radius: 4px;
}

/* Recovery codes are transcribed by hand more often than copied, so they get
   a monospace grid with generous tracking -- 0/O and 1/l are what get
   mistyped, and this is the one screen where a typo means losing the account. */
.settings__recovery-codes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
    margin: 12px 0;
}

.settings__recovery-codes code {
    padding: 8px 10px;
    font-size: 14px;
    letter-spacing: .08em;
    text-align: center;
    background: var(--u-sink);
    border: 1px solid var(--u-hairline);
    border-radius: 4px;
}

/* --- Avatar ---------------------------------------------------------------- */

.settings__avatar { display: flex; gap: 14px; align-items: flex-start; }

.settings__avatar-preview {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--u-hairline);
}

.settings__avatar-controls { flex: 1; min-width: 0; }

@media (max-width: 575.98px) {
    /* The tab strip already scrolls; below this the two-line tabs are wider
       than the viewport and the copy stops earning its space. */
    .settings__tab { min-width: 140px; padding: 10px 12px; }
    .settings__tab-copy { display: none; }
    .settings__panels { padding: 16px; }
}

/* --------------------------------------------------------------------------
   Search results
   --------------------------------------------------------------------------
   Tabs here are anchors, not buttons -- each section is a real URL. They are
   styled to match .settings__tab without inheriting from it, because the two
   have different markup and sharing a class would tie a forum page to a
   profile page for no reason beyond looking alike.
   -------------------------------------------------------------------------- */

.search-page__form {
    display: flex;
    gap: 10px;
    max-width: 640px;
    margin-top: 18px;
}

.search-page__form .form-control { flex: 1 1 auto; }

.search-page__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.search-page__tab {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 9px 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--u-text-dim);
    background: var(--u-surface);
    border: 1px solid var(--u-hairline);
    border-radius: 999px;
    transition: color var(--u-fast) var(--u-ease),
                background var(--u-fast) var(--u-ease),
                border-color var(--u-fast) var(--u-ease);
}

.search-page__tab:hover {
    color: var(--u-text);
    background: var(--u-surface-2);
}

.search-page__tab.active {
    color: #fff;
    background: var(--u-accent);
    border-color: var(--u-accent);
}

.search-page__tab:focus-visible {
    outline: 2px solid var(--u-accent);
    outline-offset: 2px;
}

.search-page__count {
    padding: 1px 7px;
    font-size: 11px;
    background: var(--u-raise-2);
    border-radius: 999px;
}

.search-page__tab.active .search-page__count { background: rgba(0, 0, 0, .22); }

.search-page__results {
    padding: 0;
    margin: 0;
    list-style: none;
}

.search-page__result {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 0;
    border-bottom: 1px solid var(--u-hairline);
}

.search-page__result:last-child { border-bottom: 0; }

.search-page__result-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    font-size: 13px;
    line-height: 34px;
    text-align: center;
    color: var(--u-text-dim);
    background: var(--u-raise);
    border-radius: 8px;
}

.search-page__result-body { min-width: 0; }

.search-page__result-title {
    display: block;
    font-weight: 600;
    color: var(--u-text);
    text-decoration: none;
}

.search-page__result-title:hover { color: var(--u-accent); }

.search-page__result-meta {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--u-text-dim);
}

@media (max-width: 575.98px) {
    .search-page__form { flex-wrap: wrap; }
    .search-page__tab { padding: 8px 12px; font-size: 11px; }
}

/* --------------------------------------------------------------------------
   Polls
   --------------------------------------------------------------------------
   The results half already had styling; these are the ballot, the closing
   badge and the <details> block on the new-thread form.
   -------------------------------------------------------------------------- */

.thread-poll__badge {
    padding: 2px 8px;
    margin-left: 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--u-text-dim);
    background: var(--u-raise-2);
    border-radius: 999px;
}

.thread-poll__options--ballot { margin-bottom: 4px; }

.thread-poll__choice {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 9px 12px;
    cursor: pointer;
    background: var(--u-raise);
    border: 1px solid transparent;
    border-radius: 8px;
    transition: background var(--u-fast) var(--u-ease),
                border-color var(--u-fast) var(--u-ease);
}

.thread-poll__choice:hover {
    background: var(--u-raise-2);
    border-color: var(--u-hairline);
}

/* :has means the whole row highlights when its input is checked, with no
   script keeping a class in sync. Unsupported browsers simply do not
   highlight; the radio itself still shows the state. */
.thread-poll__choice:has(input:checked) {
    background: var(--u-accent-soft);
    border-color: var(--u-accent);
}

.thread-poll__choice input { margin: 0; }

.thread-poll__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
}

.poll-fields {
    padding: 0;
    margin-bottom: 18px;
    background: var(--u-raise);
    border: 1px solid var(--u-hairline);
    border-radius: 10px;
}

.poll-fields__summary {
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--u-text);
    cursor: pointer;
    list-style: none;
}

.poll-fields__summary::-webkit-details-marker { display: none; }

.poll-fields__summary i {
    margin-right: 8px;
    color: var(--u-accent);
}

.poll-fields__summary:focus-visible {
    outline: 2px solid var(--u-accent);
    outline-offset: 2px;
}

.poll-fields__optional {
    margin-left: 6px;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--u-text-faint);
}

.poll-fields__body {
    padding: 4px 16px 16px;
    border-top: 1px solid var(--u-hairline);
}

/* --------------------------------------------------------------------------
   Leaderboard
   -------------------------------------------------------------------------- */

.leaderboard__standing {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 14px 18px;
    margin-bottom: 18px;
    font-size: 14px;
    color: var(--u-text);
    background: var(--u-accent-soft);
    border: 1px solid var(--u-accent);
    border-radius: 10px;
}

.leaderboard__standing-rank {
    font-size: 20px;
    font-weight: 800;
    color: var(--u-accent);
}

.leaderboard {
    padding: 0;
    margin: 0;
    list-style: none;
    counter-reset: none;
}

.leaderboard__row {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--u-hairline);
}

.leaderboard__row:last-child { border-bottom: 0; }

.leaderboard__rank {
    flex: 0 0 auto;
    width: 32px;
    font-size: 15px;
    font-weight: 800;
    text-align: center;
    color: var(--u-text-faint);
}

/* Gold, silver, bronze. Fixed hex rather than tokens: these three read as
   medals in both themes and swapping them for theme colours would make the
   podium look like the rest of the list. */
.leaderboard__rank--1 { color: #f4c343; }
.leaderboard__rank--2 { color: #c9ced6; }
.leaderboard__rank--3 { color: #cd8032; }

.leaderboard__avatar {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 50%;
}

.leaderboard__row--podium .leaderboard__avatar {
    width: 52px;
    height: 52px;
    border: 2px solid var(--u-accent);
}

.leaderboard__member {
    flex: 1 1 auto;
    min-width: 0;
}

.leaderboard__name {
    display: block;
    font-weight: 600;
    color: var(--u-text);
    text-decoration: none;
}

.leaderboard__name:hover { color: var(--u-accent); }

.leaderboard__meta {
    display: block;
    font-size: 12px;
    color: var(--u-text-dim);
}

.leaderboard__score {
    flex: 0 0 auto;
    font-size: 17px;
    font-weight: 800;
    text-align: right;
    color: var(--u-text);
}

.leaderboard__score small {
    display: block;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--u-text-faint);
}

@media (max-width: 575.98px) {
    .leaderboard__meta { display: none; }
    .leaderboard__score { font-size: 15px; }
}

/* --------------------------------------------------------------------------
   Status page
   --------------------------------------------------------------------------
   The three state colours are fixed rather than tokenised. Green-amber-red is
   the convention every status page on the internet uses, and a visitor reads
   it before reading a word; re-skinning it to the brand palette would cost
   more in comprehension than it gains in consistency.
   -------------------------------------------------------------------------- */

.status-banner {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 18px 20px;
    border: 1px solid var(--u-hairline);
    border-radius: 10px;
    background: var(--u-surface);
}

.status-banner--operational { border-color: rgba(38, 176, 116, .5); }
.status-banner--degraded    { border-color: rgba(230, 162, 60, .5); }
.status-banner--down        { border-color: rgba(214, 61, 61, .5); }

.status-banner__time {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--u-text-dim);
}

.status-dot {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.status-dot--operational { background: #26b074; }
.status-dot--degraded    { background: #e6a23c; }
.status-dot--down        { background: #d63d3d; }

.status-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.status-list__row {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--u-hairline);
}

.status-list__row:last-child { border-bottom: 0; }

.status-list__body {
    flex: 1 1 auto;
    min-width: 0;
}

.status-list__name {
    display: block;
    font-weight: 600;
    color: var(--u-text);
}

.status-list__detail {
    display: block;
    font-size: 12px;
    color: var(--u-text-dim);
}

.status-list__state {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.status-list__state--operational { color: #26b074; }
.status-list__state--degraded    { color: #e6a23c; }
.status-list__state--down        { color: #d63d3d; }

/* --------------------------------------------------------------------------
   Predictions
   --------------------------------------------------------------------------
   The corner selector is a <label> wrapping a radio, so the whole panel is the
   hit target and the keyboard still moves between the two with arrow keys.
   Nothing here depends on script: the radio carries the state and :has draws
   it.
   -------------------------------------------------------------------------- */

.prediction-stat {
    padding: 18px;
    text-align: center;
}

.prediction-stat__value {
    display: block;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--u-accent);
}

.prediction-stat__label {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--u-text-dim);
}

.prediction-card {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--u-hairline);
}

.prediction-card:last-child { border-bottom: 0; }

.prediction-card__body {
    flex: 1 1 240px;
    min-width: 0;
}

.prediction-card__name {
    display: block;
    font-weight: 600;
    color: var(--u-text);
    text-decoration: none;
}

.prediction-card__name:hover { color: var(--u-accent); }

.prediction-card__meta {
    display: block;
    font-size: 12px;
    color: var(--u-text-dim);
}

.prediction-bout { margin-bottom: 16px; }

.prediction-bout__header {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--u-hairline);
}

.prediction-bout__division {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--u-text-dim);
}

.prediction-bout__rounds {
    font-size: 12px;
    color: var(--u-text-faint);
}

.prediction-bout__corners {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.prediction-corner {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    cursor: pointer;
    background: var(--u-raise);
    border: 1px solid transparent;
    border-radius: 10px;
    transition: background var(--u-fast) var(--u-ease),
                border-color var(--u-fast) var(--u-ease);
}

.prediction-corner:hover {
    background: var(--u-raise-2);
    border-color: var(--u-hairline);
}

.prediction-corner:has(input:checked),
.prediction-corner--picked {
    background: var(--u-accent-soft);
    border-color: var(--u-accent);
}

/* A locked card still shows the pick, so it must not read as clickable. */
.prediction-corner--locked {
    cursor: default;
    opacity: .85;
}

.prediction-corner:has(input:focus-visible) {
    outline: 2px solid var(--u-accent);
    outline-offset: 2px;
}

.prediction-corner input { margin: 0; }

.prediction-corner__avatar {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    object-fit: cover;
    border-radius: 50%;
}

.prediction-corner__avatar--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--u-text-faint);
    background: var(--u-surface-3);
}

.prediction-corner__name {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    color: var(--u-text);
}

.prediction-corner__split {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 700;
    color: var(--u-text-dim);
}

.prediction-bout__result {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    margin-top: 12px;
    font-size: 13px;
    color: var(--u-text-dim);
    border-top: 1px solid var(--u-hairline);
}

.prediction-submit {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    padding: 18px 0 8px;
}

@media (max-width: 575.98px) {
    .prediction-bout__corners { grid-template-columns: 1fr; }
    .prediction-corner__avatar { width: 38px; height: 38px; }
}

/* --------------------------------------------------------------------------
   Player card profile
   --------------------------------------------------------------------------
   The player-card profile structure rebuilt on this site's tokens: hero
   banner, stat strip, then a three-column body. Every colour is a --u-*
   variable, so the whole page follows the dark/light toggle rather than
   pinning the donor's blue-and-magenta palette.

   The body is one grid declared at desktop and collapsed twice, rather than
   three Bootstrap column classes in the markup - the order on a phone (hero,
   stats, activity, then the sidebars) is not the source order, and only grid
   can say that without duplicating the panels.
   -------------------------------------------------------------------------- */

.player { padding-top: 26px; }

.player__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0 0 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    list-style: none;
    color: var(--u-text-faint);
}

.player__breadcrumb li + li::before {
    margin-right: 8px;
    content: "/";
    color: var(--u-text-faint);
}

.player__breadcrumb a {
    color: var(--u-text-dim);
    text-decoration: none;
}

.player__breadcrumb a:hover { color: var(--u-accent); }

/* --- Hero ---------------------------------------------------------------- */

.player-hero {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    padding: 26px 30px;
    overflow: hidden;
    background: var(--u-surface);
    border: 1px solid var(--u-hairline);
    border-radius: var(--u-cut);
}

/* The site name ghosted across the banner. Sized in vw so it scales with the
   card instead of wrapping, and clipped by the overflow above. */
.player-hero__watermark {
    position: absolute;
    top: 50%;
    right: 4%;
    font-size: clamp(48px, 7vw, 104px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--u-text);
    white-space: nowrap;
    pointer-events: none;
    opacity: .04;
    transform: translateY(-50%);
}

.player-hero__identity {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    align-items: center;
}

.player-hero__avatar-wrap { position: relative; flex: 0 0 auto; }

.player-hero__avatar {
    width: 118px;
    height: 118px;
    object-fit: cover;
    border: 2px solid var(--u-accent);
    border-radius: 50%;
    box-shadow: 0 0 0 6px var(--u-accent-soft), 0 0 34px var(--u-accent-glow);
}

.player-hero__presence {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 16px;
    height: 16px;
    background: #26b074;
    border: 3px solid var(--u-surface);
    border-radius: 50%;
}

.player-hero__eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--u-text-dim);
}

.player-hero__name {
    margin: 6px 0 0;
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 800;
    line-height: 1.05;
    color: var(--u-accent);
}

.player-hero__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.player-tag {
    padding: 4px 12px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--u-accent);
    background: var(--u-accent-soft);
    border: 1px solid var(--u-accent);
    border-radius: 4px;
}

.player-tag--tier {
    color: var(--u-text);
    background: var(--u-raise-2);
    border-color: var(--u-hairline);
}

.player-hero__edit {
    position: relative;
    z-index: 1;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* --- Stat strip ---------------------------------------------------------- */

.player-stats {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 14px;
    margin-top: 14px;
}

.player-stats__pair,
.player-stats__group {
    display: grid;
    gap: 14px;
}

.player-stats__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* One card holding four cells, divided by rules - the group reads as a single
   block, which the two feature tiles beside it deliberately do not. */
.player-stats__group {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    background: var(--u-surface);
    border: 1px solid var(--u-hairline);
    border-radius: var(--u-cut);
}

.player-stats__group .player-stat + .player-stat {
    border-left: 1px solid var(--u-hairline);
}

.player-stat {
    padding: 18px 14px;
    text-align: center;
}

.player-stat--feature {
    background: var(--u-surface);
    border: 1px solid var(--u-hairline);
    border-radius: var(--u-cut);
}

.player-stat__value {
    display: block;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--u-text);
}

.player-stat__value--pos { color: #26b074; }
.player-stat__value--alt { color: var(--u-accent); }

.player-stat__label {
    display: block;
    margin-top: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--u-text-dim);
}

/* --- Body grid ----------------------------------------------------------- */

.player-grid {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr) 300px;
    gap: 18px;
    align-items: start;
    margin-top: 18px;
}

.player-grid__left,
.player-grid__right,
.player-grid__main {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

/* --- Panels -------------------------------------------------------------- */

.player-panel { margin: 0; }

.player-panel__title {
    padding: 14px 18px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--u-text-dim);
    border-bottom: 1px solid var(--u-hairline);
}

.player-panel__title--split {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.player-panel__count { color: var(--u-accent); }

.player-panel__heading {
    padding: 16px 18px 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--u-text);
}

.player-panel__body { padding: 16px 18px; }

.player-panel__empty {
    margin: 0;
    font-size: 13px;
    color: var(--u-text-dim);
}

/* A left rule marks the panel as its own section rather than another row of
   the intel list above it. */
.player-panel--flagged { border-left: 2px solid var(--u-accent); }

.player-about {
    font-size: 14px;
    line-height: 1.65;
    color: var(--u-text-muted);
}

/* --- Intel list ---------------------------------------------------------- */

.player-intel { margin: 0; }

.player-intel__row {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid var(--u-hairline);
}

.player-intel__row:last-child { border-bottom: 0; }

.player-intel dt {
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    color: var(--u-text-dim);
}

.player-intel dd {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    color: var(--u-text);
}

.player-intel dd.is-online {
    font-weight: 700;
    color: #26b074;
}

.player-intel dd a {
    color: var(--u-accent);
    text-decoration: none;
}

.player-link {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 13px;
    color: var(--u-text-muted);
}

.player-link + .player-link { margin-top: 10px; }
.player-link a { color: var(--u-text); text-decoration: none; }
.player-link a:hover { color: var(--u-accent); }
.player-link__verified { color: #26b074; }

/* --- Groups -------------------------------------------------------------- */

.player-groups {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
    padding: 16px 18px 20px;
}

/* Group banners are pre-made images of varying size; capping the height and
   letting the width follow keeps a row of them aligned. */
.player-groups__banner {
    height: 42px;
    width: auto;
    max-width: 100%;
}

.player-groups__chip {
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--u-text);
    border: 1px solid var(--u-hairline);
    border-radius: 4px;
}

/* --- Tabs ---------------------------------------------------------------- */

.player-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 0;
    margin: 0;
    list-style: none;
    border-bottom: 1px solid var(--u-hairline);
}

.player-tab {
    padding: 13px 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--u-text-dim);
    cursor: pointer;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    transition: color var(--u-fast) var(--u-ease),
                border-color var(--u-fast) var(--u-ease);
}

.player-tab:hover { color: var(--u-text); }

.player-tab.active {
    color: var(--u-accent);
    background: var(--u-raise);
    border-bottom-color: var(--u-accent);
}

.player-tab:focus-visible {
    outline: 2px solid var(--u-accent);
    outline-offset: -2px;
}

.player-tab__count {
    margin-left: 6px;
    color: var(--u-text-faint);
}

.player-tab.active .player-tab__count { color: var(--u-accent); }

/* --- Activity feed ------------------------------------------------------- */

.player-feed {
    padding: 0;
    margin: 0;
    list-style: none;
}

.player-feed__row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 18px;
    border-bottom: 1px solid var(--u-hairline);
}

.player-feed__row:last-child { border-bottom: 0; }

.player-feed__dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-top: 6px;
    background: var(--u-text-dim);
    border-radius: 50%;
}

/* A started thread is marked differently from a reply - rotated into a
   diamond, so the two are told apart without relying on colour. */
.player-feed__dot--thread {
    background: var(--u-accent);
    border-radius: 1px;
    transform: rotate(45deg);
}

.player-feed__body { min-width: 0; }

.player-feed__title {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--u-accent);
    text-decoration: none;
}

a.player-feed__title:hover { color: var(--u-accent-bright); }

.player-feed__meta {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--u-text-dim);
}

.player-feed__excerpt {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--u-text-muted);
}

/* --- Standing and awards ------------------------------------------------- */

.player-standing {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 16px 18px;
    margin: 0;
    border-left: 2px solid var(--u-accent);
}

.player-standing__mark {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    font-size: 14px;
    color: var(--u-accent);
    background: var(--u-accent-soft);
    border: 1px solid var(--u-accent);
    border-radius: 50%;
}

.player-standing__title {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--u-text);
}

.player-standing__sub {
    display: block;
    font-size: 12px;
    color: var(--u-text-dim);
}

.player-panel__body:has(.player-award) {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.player-award {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    font-size: 22px;
    background: var(--u-raise);
    border: 1px solid var(--u-hairline);
    border-radius: 8px;
}

.player-award img {
    max-width: 34px;
    max-height: 34px;
}

.player-award__count {
    position: absolute;
    right: -4px;
    bottom: -4px;
    min-width: 18px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    color: #fff;
    background: var(--u-accent);
    border-radius: 999px;
}

/* --- Collapse ------------------------------------------------------------ */

@media (max-width: 1199.98px) {
    /* The right column carries the least, so it folds under the main one
       first and the intel list keeps its place beside the activity. */
    .player-grid {
        grid-template-columns: 280px minmax(0, 1fr);
    }

    .player-grid__right {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .player-grid__right > * { flex: 1 1 260px; }
}

@media (max-width: 991.98px) {
    .player-grid { grid-template-columns: minmax(0, 1fr); }

    /* Activity above the sidebars: on a phone it is what the visitor came for,
       and source order would bury it under the intel list. */
    .player-grid__main { order: -1; }

    .player-stats { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 575.98px) {
    .player-hero { padding: 20px; }
    .player-hero__identity { gap: 16px; }
    .player-hero__avatar { width: 84px; height: 84px; }
    .player-hero__edit { width: 100%; }
    .player-stats__group { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* At two per row the vertical rules alone leave the second row
       unseparated from the first. */
    .player-stats__group .player-stat:nth-child(odd) { border-left: 0; }
    .player-stats__group .player-stat:nth-child(n+3) { border-top: 1px solid var(--u-hairline); }

    .player-tab { padding: 11px 13px; font-size: 11px; }
}

/* --------------------------------------------------------------------------
   Athlete profile
   --------------------------------------------------------------------------
   The ufc.com/athlete page structure on this site's tokens: hero, bio band,
   a statistics section built from dials and bars, then the fight history
   beside a career panel.

   The old page put the same figures in three <dl> lists. Everything measurable
   is now drawn - a ring for a percentage, a stacked bar for a distribution -
   because the point of a fighter profile is comparison at a glance, and a
   column of decimals does not give you that.

   The colours are the same --u-* tokens as the rest of the site, so the page
   follows the dark/light toggle. Win green and loss red are fixed: they mean
   the same thing on every results page in the sport, and re-skinning them to
   the brand would cost comprehension.
   -------------------------------------------------------------------------- */

.athlete { padding-bottom: 40px; }

.athlete__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0 0 22px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    list-style: none;
    color: var(--u-text-faint);
}

.athlete__breadcrumb li + li::before {
    margin-right: 8px;
    content: "/";
    color: var(--u-text-faint);
}

.athlete__breadcrumb a { color: var(--u-text-dim); text-decoration: none; }
.athlete__breadcrumb a:hover { color: var(--u-accent); }

.athlete__sections {
    display: flex;
    flex-direction: column;
    gap: 34px;
    margin-top: 34px;
}

/* --- Hero ---------------------------------------------------------------- */

.athlete-hero {
    position: relative;
    padding: 26px 0 0;
    overflow: hidden;
    background: var(--u-surface);
    border-bottom: 1px solid var(--u-hairline);
}

/* A wash behind the portrait rather than a photograph: there is no licensed
   backdrop art, and a flat panel behind a cut-out fighter reads as deliberate
   where a stretched thumbnail would not. */
.athlete-hero__backdrop {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(120% 90% at 78% 100%, var(--u-accent-soft) 0%, transparent 62%),
        linear-gradient(180deg, transparent 0%, var(--u-sink) 100%);
}

.athlete-hero__inner { position: relative; z-index: 1; }

.athlete-hero__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    gap: 24px;
    align-items: end;
}

.athlete-hero__identity { padding-bottom: 30px; }

.athlete-hero__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.athlete-tag {
    padding: 5px 13px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--u-text-dim);
    background: var(--u-raise);
    border: 1px solid var(--u-hairline);
    border-radius: 4px;
}

a.athlete-tag:hover { color: var(--u-accent); border-color: var(--u-accent); }

.athlete-tag--belt {
    color: #f4c343;
    background: rgba(244, 195, 67, .1);
    border-color: rgba(244, 195, 67, .5);
}

.athlete-tag--rank {
    color: var(--u-accent);
    background: var(--u-accent-soft);
    border-color: var(--u-accent);
}

.athlete-tag--active { color: #26b074; border-color: rgba(38, 176, 116, .45); }

.athlete-hero__nickname {
    margin: 0 0 4px;
    font-size: 16px;
    font-style: italic;
    color: var(--u-text-dim);
}

.athlete-hero__name {
    margin: 0;
    font-size: clamp(38px, 6.5vw, 76px);
    line-height: .96;
    text-transform: uppercase;
}

.athlete-hero__given {
    display: block;
    font-weight: 300;
    letter-spacing: .01em;
    color: var(--u-text-muted);
}

.athlete-hero__family {
    display: block;
    font-weight: 900;
    letter-spacing: -.01em;
    color: var(--u-text);
}

.athlete-hero__record {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: baseline;
    margin-top: 18px;
}

.athlete-hero__record-line {
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    color: var(--u-accent);
}

.athlete-hero__record-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--u-text-dim);
}

.athlete-hero__finishes {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    margin-top: 18px;
}

.athlete-hero__finish span {
    display: block;
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    color: var(--u-text);
}

.athlete-hero__finish small {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--u-text-dim);
}

.athlete-hero__portrait {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 240px;
}

.athlete-hero__image {
    display: block;
    width: 100%;
    max-width: 380px;
    height: auto;
    object-fit: contain;
}

.athlete-hero__silhouette {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 180px;
    margin-bottom: 30px;
    font-size: 76px;
    color: var(--u-text-faint);
    background: var(--u-raise);
    border-radius: 50%;
}

.athlete-hero__credit {
    position: absolute;
    right: 0;
    bottom: 4px;
    margin: 0;
    font-size: 10px;
    color: var(--u-text-faint);
}

.athlete-hero__credit a { color: var(--u-text-faint); }

/* --- Bio band ------------------------------------------------------------ */

.athlete-bio {
    padding: 22px 0;
    background: var(--u-surface-2);
    border-bottom: 1px solid var(--u-hairline);
}

.athlete-bio__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 20px 18px;
    margin: 0;
}

.athlete-bio__cell dt {
    margin: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--u-text-dim);
}

.athlete-bio__cell dd {
    margin: 5px 0 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--u-text);
}

/* Biography, filling the band under the tale-of-the-tape. Separated from the
   stat grid by a hairline and capped for readability - a bio is prose, and a
   line that runs the full band width is tiring to read. */
.athlete-bio__about {
    max-width: 80ch;
    margin-top: 18px;
    padding-top: 16px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--u-text-muted);
    border-top: 1px solid var(--u-hairline);
}

/* --- Sections ------------------------------------------------------------ */

.athlete-section__title {
    margin: 0 0 18px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--u-text-dim);
}

.athlete-empty {
    padding: 28px 18px;
    margin: 0;
    text-align: center;
    color: var(--u-text-dim);
}

/* --- Dials --------------------------------------------------------------- */

.athlete-dials {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    padding: 24px 18px;
    background: var(--u-surface);
    border: 1px solid var(--u-hairline);
    border-radius: var(--u-cut);
}

.donut {
    position: relative;
    margin: 0;
    text-align: center;
}

.donut__svg {
    display: block;
    width: 128px;
    height: 128px;
    margin: 0 auto;
}

.donut__track,
.donut__fill {
    fill: none;
    stroke-width: 9;
}

.donut__track { stroke: var(--u-raise-2); }

.donut__fill {
    stroke: var(--u-accent);
    stroke-linecap: round;
}

/* Centred over the ring rather than inside the SVG: text in an SVG does not
   inherit the page font stack reliably across browsers. */
.donut__centre {
    position: absolute;
    top: 64px;
    left: 0;
    width: 100%;
    pointer-events: none;
    transform: translateY(-50%);
}

.donut__value {
    font-size: 26px;
    font-weight: 800;
    color: var(--u-text);
}

.donut__caption { margin-top: 10px; }

.donut__label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--u-text);
}

.donut__sub {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    color: var(--u-text-dim);
}

/* --- Rate tiles ---------------------------------------------------------- */

.athlete-rates {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0;
    margin-top: 16px;
    background: var(--u-surface);
    border: 1px solid var(--u-hairline);
    border-radius: var(--u-cut);
    overflow: hidden;
}

/* Rules on two sides give a grid of cells whatever the column count resolves
   to, which auto-fit means the stylesheet cannot know. */
.athlete-rate {
    padding: 18px 16px;
    text-align: center;
    border-right: 1px solid var(--u-hairline);
    border-bottom: 1px solid var(--u-hairline);
}

.athlete-rate__value {
    display: block;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--u-accent);
}

.athlete-rate__label {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--u-text);
}

.athlete-rate__unit {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--u-text-dim);
}

/* --- Method splits ------------------------------------------------------- */

.athlete-splits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.athlete-split {
    padding: 20px 18px;
    background: var(--u-surface);
    border: 1px solid var(--u-hairline);
    border-radius: var(--u-cut);
}

.athlete-split__title {
    margin: 0 0 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--u-text-dim);
}

.athlete-split__bar {
    display: flex;
    height: 12px;
    overflow: hidden;
    background: var(--u-raise-2);
    border-radius: 999px;
}

.athlete-split__seg { display: block; height: 100%; }

/* Three distinguishable steps of the accent rather than three unrelated hues:
   these are parts of one quantity, and a rainbow would imply otherwise. */
.athlete-split__seg--ko { background: var(--u-accent); }
.athlete-split__seg--sub { background: var(--u-accent-bright); }
.athlete-split__seg--dec { background: var(--u-text-faint); }

/* Strike-breakdown segments. Graded steps of the accent, deepest for the
   dominant target/position, so the three read as one quantity split three ways
   rather than three separate colours. */
.athlete-split__seg--head,
.athlete-split__seg--standing { background: var(--u-accent); }
.athlete-split__seg--body,
.athlete-split__seg--clinch { background: var(--u-accent-bright); }
.athlete-split__seg--leg,
.athlete-split__seg--ground { background: var(--u-text-faint); }

.athlete-split__legend {
    padding: 0;
    margin: 14px 0 0;
    list-style: none;
}

.athlete-split__legend li {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid var(--u-hairline);
}

.athlete-split__legend li:last-child { border-bottom: 0; }

.athlete-split__key {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.athlete-split__key--ko { background: var(--u-accent); }
.athlete-split__key--sub { background: var(--u-accent-bright); }
.athlete-split__key--dec { background: var(--u-text-faint); }

.athlete-split__key--head,
.athlete-split__key--standing { background: var(--u-accent); }
.athlete-split__key--body,
.athlete-split__key--clinch { background: var(--u-accent-bright); }
.athlete-split__key--leg,
.athlete-split__key--ground { background: var(--u-text-faint); }

.athlete-split__name {
    flex: 1 1 auto;
    font-size: 13px;
    color: var(--u-text-muted);
}

.athlete-split__figure {
    font-size: 14px;
    font-weight: 700;
    color: var(--u-text);
}

.athlete-split__figure small {
    margin-left: 6px;
    font-size: 11px;
    font-weight: 400;
    color: var(--u-text-dim);
}

/* --- Body ---------------------------------------------------------------- */

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

.athlete-body__side {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* --- Fight history ------------------------------------------------------- */

.athlete-bout {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    padding: 16px 18px;
    border-bottom: 1px solid var(--u-hairline);
}

.athlete-bout:last-child { border-bottom: 0; }

.athlete-result {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-radius: 8px;
}

.athlete-result--win { color: #26b074; background: rgba(38, 176, 116, .13); }
.athlete-result--loss { color: #d63d3d; background: rgba(214, 61, 61, .13); }
.athlete-result--draw { color: #e6a23c; background: rgba(230, 162, 60, .13); }

.athlete-result--scheduled {
    font-size: 10px;
    color: var(--u-text-dim);
    background: var(--u-raise-2);
}

.athlete-bout__main { flex: 1 1 220px; min-width: 0; }

.athlete-bout__opponent {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--u-text);
}

.athlete-bout__opponent a { color: var(--u-text); text-decoration: none; }
.athlete-bout__opponent a:hover { color: var(--u-accent); }

.athlete-bout__vs {
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--u-text-faint);
}

.athlete-bout__opponent small {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 400;
    color: var(--u-text-dim);
}

.athlete-bout__meta {
    margin-top: 4px;
    font-size: 12px;
    color: var(--u-text-dim);
}

.athlete-bout__meta a { color: var(--u-text-dim); }
.athlete-bout__meta a:hover { color: var(--u-accent); }

.athlete-bout__flag {
    padding: 1px 7px;
    margin-left: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--u-accent);
    border: 1px solid var(--u-accent);
    border-radius: 3px;
}

.athlete-bout__result {
    flex: 0 0 auto;
    font-size: 12px;
    text-align: right;
    color: var(--u-text-muted);
}

/* --- Side panels --------------------------------------------------------- */

.athlete-panel { margin: 0; }

.athlete-panel__title {
    padding: 14px 18px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--u-text-dim);
    border-bottom: 1px solid var(--u-hairline);
}

.athlete-panel__body {
    padding: 16px 18px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--u-text-muted);
}

.athlete-reigns {
    padding: 0;
    margin: 0;
    list-style: none;
}

.athlete-reign {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 18px;
    border-bottom: 1px solid var(--u-hairline);
}

.athlete-reign:last-child { border-bottom: 0; }

.athlete-reign__icon {
    margin-top: 3px;
    font-size: 13px;
    color: #f4c343;
}

.athlete-reign__name {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--u-text);
}

.athlete-reign__meta {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--u-text-dim);
}

.athlete-intel { margin: 0; }

.athlete-intel > div {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 11px 18px;
    border-bottom: 1px solid var(--u-hairline);
}

.athlete-intel > div:last-child { border-bottom: 0; }

.athlete-intel dt {
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    color: var(--u-text-dim);
}

.athlete-intel dd {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--u-text);
}

/* --- Collapse ------------------------------------------------------------ */

@media (max-width: 991.98px) {
    .athlete-body { grid-template-columns: minmax(0, 1fr); }

    .athlete-hero__body {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Portrait above the name on a narrow screen: at this width the cut-out
       is the thing that identifies the fighter fastest. */
    .athlete-hero__portrait {
        order: -1;
        min-height: 0;
    }

    .athlete-hero__image { max-width: 260px; }
    .athlete-hero__identity { padding-bottom: 24px; }
}

@media (max-width: 575.98px) {
    .athlete-hero__finishes { gap: 18px; }
    .athlete-hero__record-line { font-size: 26px; }
    .athlete-bio__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .athlete-bout__result { flex-basis: 100%; text-align: left; }
    .donut__svg { width: 108px; height: 108px; }
    .donut__centre { top: 54px; }
    .donut__value { font-size: 22px; }
}