/* layout.css — page shell primitives + pagination.
   Loaded after tokens.css, before style.css. Header/nav chrome stays in style.css for now. */

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

/* Desktop: make top controls truly translucent. */
@media(min-width:769px) {
    .site-header .desktop-nav .nav-item,
    .page-toolbar-row .directory-tabs-scroll > .filter-chip,
    .page-toolbar-row .directory-tabs-scroll > .forum-index-context.filter-chip,
    .page-toolbar-page .page-toolbar-row > .btn.btn-toolbar,
    .page-toolbar-page .page-toolbar-row > a.btn.btn-toolbar,
    .page-toolbar-page .page-toolbar-row .forum-index-actions .btn.btn-toolbar,
    .page-toolbar-page .page-toolbar-row .forum-index-actions a.btn.btn-toolbar,
    .site-header .header-right .nav-btn-icon,
    .site-header .header-right .profile-link-btn,
    .site-header .header-right .logout-btn,
    .site-header .header-right .admin-btn {
        background:rgba(10,11,14,0.03) !important;
    }

    .site-header .desktop-nav .nav-item:hover,
    .page-toolbar-row .directory-tabs-scroll > .filter-chip:hover,
    .page-toolbar-row .directory-tabs-scroll > .forum-index-context.filter-chip:hover,
    .page-toolbar-row .directory-tabs-scroll > .filter-chip.active,
    .page-toolbar-row .directory-tabs-scroll > .filter-chip.active:hover,
    .page-toolbar-row .directory-tabs-scroll > .forum-index-context.filter-chip.active,
    .page-toolbar-row .directory-tabs-scroll > .forum-index-context.filter-chip.active:hover,
    .page-toolbar-page .page-toolbar-row > .btn.btn-toolbar:hover,
    .page-toolbar-page .page-toolbar-row > a.btn.btn-toolbar:hover,
    .page-toolbar-page .page-toolbar-row .forum-index-actions .btn.btn-toolbar:hover,
    .page-toolbar-page .page-toolbar-row .forum-index-actions a.btn.btn-toolbar:hover {
        background:rgba(10,11,14,0.06) !important;
        box-shadow:none !important;
    }
}

::selection {
    background:rgba(255,255,255,0.2);
    color:var(--text-primary)
}

::-moz-selection {
    background:rgba(255,255,255,0.2);
    color:var(--text-primary)
}

body {
    background-color:var(--bg-color);
    background-image:linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px);
    background-size:30px 30px;
    color:var(--text-primary);
    font-family:var(--font-main);
    line-height:1.6;
    margin:0;
    padding:0;
    padding-top:calc(64px + env(safe-area-inset-top,0px));
    overflow-x:hidden;
    max-width:100vw
}

@media(min-width:768px) {
    body {
        background-size:50px 50px
    }
}

#site-header-wrapper {
    position:fixed !important;
    top:0 !important;
    left:0;
    right:0;
    z-index:9999 !important;
    width:100%;
    padding-top:env(safe-area-inset-top,0px);
    box-sizing:border-box;
    pointer-events:none
}

.page-toolbar-page {
    margin-top:var(--page-content-top-offset);
    padding-top:var(--panel-content-inset-top)
}

.container {
    max-width:var(--content-max-width);
    margin:0 auto;
    padding:.65rem 1rem 1rem;
    width:100%;
    box-sizing:border-box
}

@media(max-width:768px) {
    .container {
        padding:.5rem;
        max-width:100%
    }
}

@media(min-width:769px) and (max-width:1024px) {
    :root {
        --content-max-width:min(calc(100vw - 2rem),1420px)
    }

    .container {
        padding:.65rem clamp(0.85rem,2.4vw,1.5rem) 1rem
    }
}

/* ─── Pagination (matches filter-chip / toolbar segmented control) ─ */

.site-pagination,
.adm-pagination-actions {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:2px;
    flex-wrap:wrap;
    padding:2px;
    border-radius:var(--modern-rounded-md);
    background:var(--header-glass-bg);
    backdrop-filter:var(--header-glass-blur);
    -webkit-backdrop-filter:var(--header-glass-blur);
    box-shadow:var(--header-glass-edge),var(--header-glass-drop)
}

.site-pagination {
    margin:1rem auto 0;
    width:fit-content;
    max-width:100%
}

.adm-pagination-actions {
    margin-left:auto
}

:is(.site-pagination,.adm-pagination-actions) :is(a,button).site-page-btn,
:is(.site-pagination,.adm-pagination-actions) :is(a,button).adm-page-btn {
    box-sizing:border-box;
    min-width:calc(var(--filter-chip-height, 40px) - 4px);
    height:calc(var(--filter-chip-height, 40px) - 4px);
    padding:0 .62rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:var(--modern-rounded-sm);
    border:1px solid transparent;
    background:transparent;
    color:rgba(245,250,255,0.88);
    font-family:var(--font-mono);
    font-size:.8rem;
    font-weight:400;
    letter-spacing:0;
    text-transform:none;
    text-decoration:none;
    line-height:1;
    white-space:nowrap;
    cursor:pointer;
    flex-shrink:0;
    box-shadow:none;
    transition:background var(--header-hover-ms) ease,color var(--header-hover-ms) ease,border-color var(--header-hover-ms) ease,box-shadow var(--header-hover-ms) ease
}

:is(.site-pagination,.adm-pagination-actions) :is(a,button).site-page-btn:hover,
:is(.site-pagination,.adm-pagination-actions) :is(a,button).adm-page-btn:hover {
    background:var(--header-hover-fill);
    border-color:transparent;
    color:var(--header-hover-text);
    box-shadow:none;
    text-shadow:none;
    transform:none !important
}

:is(.site-pagination,.adm-pagination-actions) :is(a,button).site-page-btn:active,
:is(.site-pagination,.adm-pagination-actions) :is(a,button).site-page-btn.press-feedback,
:is(.site-pagination,.adm-pagination-actions) :is(a,button).adm-page-btn:active,
:is(.site-pagination,.adm-pagination-actions) :is(a,button).adm-page-btn.press-feedback {
    transform:var(--ulp-press-transform) !important;
    background:var(--header-press-fill);
    color:var(--header-press-text)
}

:is(.site-pagination,.adm-pagination-actions) :is(a,button).site-page-btn.active,
:is(.site-pagination,.adm-pagination-actions) :is(a,button).adm-page-btn.active {
    background:rgba(0,255,157,0.12);
    border-color:rgba(0,255,157,0.28);
    color:#eafff6;
    box-shadow:inset 0 0 0 1px rgba(0,255,157,0.12)
}

:is(.site-pagination,.adm-pagination-actions) :is(a,button).site-page-btn.active:hover,
:is(.site-pagination,.adm-pagination-actions) :is(a,button).adm-page-btn.active:hover {
    background:rgba(0,255,157,0.14);
    border-color:rgba(0,255,157,0.32);
    color:#eafff6;
    box-shadow:inset 0 0 0 1px rgba(0,255,157,0.16);
    text-shadow:none
}

:is(.site-pagination,.adm-pagination-actions) :is(a,button).site-page-btn i,
:is(.site-pagination,.adm-pagination-actions) :is(a,button).adm-page-btn i {
    font-size:.72rem;
    color:inherit;
    pointer-events:none
}

:is(.site-pagination,.adm-pagination-actions) :is(.site-page-dots,.adm-page-dots) {
    color:var(--text-secondary);
    font-family:var(--font-mono);
    font-size:.78rem;
    opacity:.75;
    padding:0 .35rem;
    background:transparent;
    border:0;
    cursor:pointer;
    line-height:1;
    min-width:auto;
    height:auto
}

:is(.site-pagination,.adm-pagination-actions) :is(.site-page-dots,.adm-page-dots):hover {
    opacity:1;
    color:var(--header-hover-text)
}

.page-jump-popover {
    display:none;
    position:fixed;
    z-index:2147483640;
    transform:translate(-50%,calc(-100% - 12px));
    pointer-events:none
}

.page-jump-popover.active {
    pointer-events:auto
}

.page-jump-popover-inner {
    position:relative;
    min-width:220px;
    max-width:min(94vw,280px);
    border-radius:var(--modern-rounded-md);
    overflow:hidden;
    background:var(--header-glass-bg);
    backdrop-filter:var(--header-glass-blur);
    -webkit-backdrop-filter:var(--header-glass-blur);
    box-shadow:var(--header-glass-edge),var(--header-glass-drop);
    animation:page-jump-popover-in .16s ease-out
}

@keyframes page-jump-popover-in {
    from {
        opacity:0;
        transform:translateY(5px)
    }

    to {
        opacity:1;
        transform:translateY(0)
    }
}

.page-jump-popover-header {
    padding:.62rem .75rem .55rem;
    border-bottom:1px solid var(--surface-border)
}

.page-jump-popover-title {
    display:flex;
    align-items:center;
    gap:.45rem;
    font-family:var(--font-mono);
    font-size:.84rem;
    font-weight:600;
    letter-spacing:0;
    text-transform:none;
    color:var(--text-primary);
    margin:0;
    line-height:1.25
}

.page-jump-popover-title i {
    font-size:.72rem;
    color:var(--text-secondary);
    opacity:.9
}

.page-jump-popover-range {
    font-family:var(--font-mono);
    font-size:.72rem;
    color:var(--text-secondary);
    margin:.28rem 0 0;
    line-height:1.35
}

.page-jump-popover-body {
    padding:.72rem .75rem .78rem
}

.page-jump-popover-row {
    display:flex;
    align-items:stretch;
    gap:.45rem
}

.page-jump-popover-input {
    flex:1;
    min-width:0;
    width:auto;
    height:calc(var(--filter-chip-height, 40px) - 4px);
    padding:0 .62rem;
    border-radius:var(--modern-rounded-sm);
    border:1px solid var(--surface-border);
    background:rgba(0,0,0,0.35);
    color:var(--text-primary);
    font-family:var(--font-mono);
    font-size:.82rem;
    box-sizing:border-box;
    transition:border-color var(--header-hover-ms) ease,box-shadow var(--header-hover-ms) ease,background var(--header-hover-ms) ease
}

.page-jump-popover-input::placeholder {
    color:var(--text-secondary);
    opacity:.75
}

.page-jump-popover-input:focus {
    outline:0;
    border-color:rgba(0,255,157,0.38);
    background:rgba(0,0,0,0.42);
    box-shadow:0 0 0 2px rgba(0,255,157,0.1)
}

.page-jump-popover .page-jump-popover-go {
    margin:0;
    height:calc(var(--filter-chip-height, 40px) - 4px);
    min-width:calc(var(--filter-chip-height, 40px) - 4px);
    padding:0 .72rem;
    flex-shrink:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.35rem;
    border-radius:var(--modern-rounded-sm);
    cursor:pointer;
    font-family:var(--font-mono);
    font-size:.8rem;
    font-weight:500;
    letter-spacing:0;
    text-transform:none;
    border:1px solid rgba(0,255,157,0.28);
    color:#eafff6;
    background:rgba(0,255,157,0.12);
    box-shadow:inset 0 0 0 1px rgba(0,255,157,0.12);
    transition:background var(--header-hover-ms) ease,border-color var(--header-hover-ms) ease,box-shadow var(--header-hover-ms) ease,transform var(--ulp-press-ms) var(--ulp-press-ease)
}

.page-jump-popover .page-jump-popover-go:hover {
    background:rgba(0,255,157,0.16);
    border-color:rgba(0,255,157,0.36);
    box-shadow:inset 0 0 0 1px rgba(0,255,157,0.18)
}

.page-jump-popover .page-jump-popover-go:active,
.page-jump-popover .page-jump-popover-go.press-feedback {
    transform:var(--ulp-press-transform)
}

.page-jump-popover .page-jump-popover-go .page-jump-popover-go-label {
    position:static
}

.page-jump-popover .page-jump-popover-go i {
    font-size:.68rem;
    color:inherit;
    opacity:.85
}

.page-jump-popover-backdrop {
    position:fixed;
    inset:0;
    z-index:2147483639;
    background:rgba(0,0,0,0.42);
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px)
}