/* ============================================================
   gameroni.com - shared design tokens & base styles
   Load this on every public-facing page before any page-specific CSS.
   ============================================================ */

:root {
    /* --- Brand --- */
    --color-brand: #2390FF;
    --color-brand-dark: #1672D1;   /* hover/active states, ~20% darker */
    --color-brand-darker: #0F4D8C; /* pressed states, text-on-light use */
    --color-brand-tint: #EAF4FF;    /* light backgrounds, badges, selected states */

    /* --- Neutrals --- */
    --color-ink: #16181D;          /* primary text - soft black, not pure #000 */
    --color-ink-muted: #5B6470;    /* secondary text, timestamps, bylines */
    --color-ink-faint: #8993A1;    /* tertiary text, placeholder-level */
    --color-bg: #FFFFFF;
    --color-bg-subtle: #F5F7FA;    /* card backgrounds, alternating sections */
    --color-border: #E2E5EA;
    --color-border-strong: #C9CFD8;

    /* --- Feedback (used sparingly - status labels, form validation) --- */
    --color-danger: #D64545;
    --color-success: #1E9E5A;

    /* --- Typography --- */
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-display: var(--font-body); /* swap this alone later if you add a headline webfont */

    --text-xs: 0.8125rem;   /* 13px - meta, timestamps */
    --text-sm: 0.9375rem;   /* 15px - secondary body */
    --text-base: 1rem;      /* 16px - body */
    --text-lg: 1.125rem;    /* 18px - lede/intro paragraphs */
    --text-xl: 1.375rem;    /* 22px - card headlines */
    --text-2xl: 1.75rem;    /* 28px - section headers */
    --text-3xl: 2.25rem;    /* 36px - article H1 */

    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.7; /* article body copy */

    /* --- Spacing scale (4px base unit) --- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* --- Layout --- */
    --content-max-width: 1200px;
    --content-narrow-width: 760px; /* article reading column */
    --radius: 6px;
    --shadow-sm: 0 1px 2px rgba(22, 24, 29, 0.06), 0 1px 1px rgba(22, 24, 29, 0.04);
    --shadow-md: 0 4px 12px rgba(22, 24, 29, 0.08);
}

/* --- Breakpoints (referenced in comments; media queries below use the raw px) ---
   sm: 480px   phones, landscape included
   md: 768px   tablets / small laptops
   lg: 1024px  desktop
   xl: 1280px  wide desktop
*/

/* --- Reset & base --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-ink);
    background: var(--color-bg);
}
img, picture, video { max-width: 100%; display: block; }
a { color: var(--color-brand); text-decoration: none; }
a:hover { color: var(--color-brand-dark); text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: var(--leading-tight); margin: 0 0 var(--space-3); }
p { margin: 0 0 var(--space-4); }
ul, ol { margin: 0 0 var(--space-4); padding-left: 1.25em; }
button, input, textarea, select { font-family: inherit; font-size: inherit; }

/* --- Layout primitives --- */
.site-container {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 var(--space-4);
}
@media (min-width: 768px) {
    .site-container { padding: 0 var(--space-6); }
}

/* --- Reusable card, used by article listings on the homepage/section pages --- */
.card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.card:hover { box-shadow: var(--shadow-md); }

/* --- Buttons --- */
.btn {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius);
    border: 1px solid transparent;
    background: var(--color-brand);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.btn:hover { background: var(--color-brand-dark); color: #fff; text-decoration: none; }
.btn-outline {
    background: transparent;
    border-color: var(--color-border-strong);
    color: var(--color-ink);
}
.btn-outline:hover { border-color: var(--color-brand); color: var(--color-brand); background: transparent; }

/* --- Type badges (News, Review, Guide, etc.) --- */
.type-badge {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-brand-dark);
    background: var(--color-brand-tint);
    padding: 2px 8px;
    border-radius: 3px;
}

/* --- Site header --- */
.site-header {
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
}
.site-header-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
    min-height: calc(40px + 2 * var(--space-3)); /* avatar + 12px above and below, logged in or out */
}
.site-logo {
    font-size: var(--text-xl);
    font-weight: 800;
    color: var(--color-brand);
    margin-right: auto;
}
.site-logo:hover { color: var(--color-brand-dark); text-decoration: none; }

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-weight: 600;
}
.site-nav > a { color: var(--color-ink); }
.site-nav > a:hover { color: var(--color-brand); text-decoration: none; }

.site-nav-dropdown { position: relative; }
.site-nav-dropdown > summary {
    list-style: none;
    cursor: pointer;
    color: var(--color-ink);
    padding: var(--space-1) 0;
}
.site-nav-dropdown > summary::-webkit-details-marker { display: none; }
.site-nav-dropdown > summary:hover { color: var(--color-brand); }
.site-nav-dropdown[open] > summary { color: var(--color-brand); }
.site-nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: var(--space-2);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    min-width: 180px;
    padding: var(--space-2) 0;
    z-index: 20;
}
.site-nav-dropdown-menu a {
    display: block;
    padding: var(--space-2) var(--space-4);
    color: var(--color-ink);
    font-weight: 500;
}
.site-nav-dropdown-menu a:hover {
    background: var(--color-bg-subtle);
    color: var(--color-brand);
    text-decoration: none;
}

.site-search {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    overflow: hidden;
}
.site-search input {
    border: none;
    padding: var(--space-2) var(--space-3);
    width: 180px;
    font-size: var(--text-sm);
}
.site-search input:focus { outline: none; }
.site-search button {
    border: none;
    background: var(--color-bg-subtle);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    font-size: var(--text-sm);
}
.site-search button:hover { background: var(--color-border); }

.site-account-nav {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-weight: 600;
}
.site-account-nav > a:not(.btn) { color: var(--color-ink); }
.site-account-nav > a:not(.btn):hover { color: var(--color-brand); text-decoration: none; }

.btn-sm { padding: var(--space-1) var(--space-3); font-size: var(--text-sm); }

@media (max-width: 767px) {
    .site-header-inner { gap: var(--space-3); }
    .site-search input { width: 120px; }
}

/* --- Site footer --- */
.site-footer {
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-subtle);
    margin-top: var(--space-12);
}
.site-footer-inner {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-6);
    align-items: center;
    justify-content: space-between;
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
}
.site-footer-inner p { margin: 0; }
.site-footer-inner a { color: var(--color-ink-muted); }
.site-footer-inner a:hover { color: var(--color-brand); }

/* --- Homepage / article listings --- */
.featured-card {
    display: block;
    color: inherit;
    text-decoration: none;
    margin: 0 0 var(--space-8);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--color-border);
}
.featured-card:hover { text-decoration: none; box-shadow: var(--shadow-md); }
.featured-card-image {
    aspect-ratio: 16 / 9;
    background: #333;
    overflow: hidden;
}
.featured-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.featured-card-body { padding: var(--space-6); }
.featured-card-title {
    font-size: var(--text-3xl);
    color: var(--color-ink);
    margin: var(--space-2) 0 var(--space-2);
}
.featured-card-summary {
    font-size: var(--text-lg);
    color: var(--color-ink-muted);
    margin: 0 0 var(--space-3);
}

.section-heading {
    font-size: var(--text-2xl);
    margin: var(--space-8) 0 var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-border);
}

.article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-12);
}
.article-card { color: inherit; text-decoration: none; }
.article-card:hover { text-decoration: none; }
.article-card-image {
    aspect-ratio: 16 / 9;
    background: var(--color-bg-subtle);
    overflow: hidden;
}
.article-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.article-card-image-placeholder { background: var(--color-bg-subtle); }
.article-card-body { padding: var(--space-4); }
.article-card-title {
    font-size: var(--text-lg);
    color: var(--color-ink);
    margin: var(--space-2) 0 var(--space-2);
    line-height: var(--leading-tight);
}
.article-card:hover .article-card-title { color: var(--color-brand); }

.card-meta {
    font-size: var(--text-xs);
    color: var(--color-ink-faint);
    margin: 0;
}

.empty-state {
    text-align: center;
    color: var(--color-ink-muted);
    padding: var(--space-16) 0;
}

@media (max-width: 767px) {
    .article-title { font-size: var(--text-2xl); }
    .article-body { font-size: var(--text-base); }
}

/* --- Article page --- */
.site-container-narrow { max-width: var(--content-narrow-width); }

.preview-banner {
    background: #FFF6D9;
    border: 1px solid #E8D27A;
    color: #6B5B00;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    margin: var(--space-6) 0 0;
    font-size: var(--text-sm);
}

.article-page { padding-bottom: var(--space-16); }

.article-meta-top { margin: var(--space-8) 0 var(--space-3); }

.article-title {
    font-size: var(--text-3xl);
    line-height: var(--leading-tight);
    margin: 0 0 var(--space-3);
}

.article-byline {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    margin: 0 0 var(--space-6);
}

.article-header-image {
    margin-bottom: var(--space-6);
    aspect-ratio: 16 / 9;
    background: #333;
    overflow: hidden;
    border-radius: var(--radius);
}
.article-header-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.article-summary {
    font-size: var(--text-lg);
    font-style: italic;
    color: var(--color-ink-muted);
    margin-bottom: var(--space-4);
}

.article-body {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-ink);
}
.article-body h2 { font-size: var(--text-2xl); margin-top: var(--space-8); }
.article-body h3 { font-size: var(--text-xl); margin-top: var(--space-6); }
.article-body blockquote {
    margin: var(--space-6) 0;
    padding: var(--space-2) var(--space-4);
    border-left: 3px solid var(--color-border-strong);
    color: var(--color-ink-muted);
}
.article-body table { width: 100%; border-collapse: collapse; margin: var(--space-6) 0; }
.article-body table td, .article-body table th { border: 1px solid var(--color-border); padding: var(--space-2) var(--space-3); }

@media (max-width: 767px) {
    .article-title { font-size: var(--text-2xl); }
    .article-header-image img { max-height: 280px; }
    .article-body { font-size: var(--text-base); }
}

/* --- Two-column layout with sticky sidebar (homepage, article pages, eventually sections) --- */
.page-columns {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--space-8);
    align-items: start;
    margin-top: var(--space-8);
}
.page-main-col { min-width: 0; }

@media (max-width: 1023px) {
    .page-columns { grid-template-columns: 1fr; }
    .page-side-col { margin-top: var(--space-8); }
}

/* --- Ad placeholders, sized to standard IAB units. Swap the background/text
   for real ad markup once you've got a network or direct-sold creative. --- */
.ad-slot {
    background: var(--color-bg-subtle);
    border: 1px dashed var(--color-border-strong);
    color: var(--color-ink-faint);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: var(--radius);
    margin: 0 auto var(--space-6);
}
.ad-slot-mrec { width: 300px; height: 250px; }       /* medium rectangle */
.ad-slot-half-page { width: 300px; height: 600px; }   /* half page / skyscraper-ish */

/* --- "Recent Articles" sidebar widget --- */
.side-widget { margin-bottom: var(--space-8); }
.side-widget-heading {
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-ink-muted);
    margin: 0 0 var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-border);
}
.side-article-list { display: flex; flex-direction: column; gap: var(--space-4); }
.side-article-item { display: flex; align-items: flex-start; gap: var(--space-3); color: inherit; text-decoration: none; }
.side-article-item:hover { text-decoration: none; }
.side-article-item-image {
    flex: 0 0 90px;
    width: 90px;
    aspect-ratio: 16 / 9;
    background: var(--color-bg-subtle);
    overflow: hidden;
    border-radius: var(--radius);
}
.side-article-item-image img { width: 100%; height: 100%; object-fit: contain; display: block; }
.side-article-item-body { min-width: 0; }
.side-article-item-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-ink);
    line-height: var(--leading-tight);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.side-article-item:hover .side-article-item-title { color: var(--color-brand); }

/* --- Section pages --- */
.section-page-title { margin-bottom: var(--space-6); }

.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-12);
}
.pagination-status { font-size: var(--text-sm); color: var(--color-ink-muted); }

/* --- Homepage --- */
.home-lead {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}
.home-lead .featured-card { margin: 0; height: 100%; }
.home-lead .featured-card-title { font-size: var(--text-2xl); }
.home-lead-side { display: flex; flex-direction: column; gap: var(--space-6); }

.home-block { margin-bottom: var(--space-8); }
.home-block-heading {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-border);
}
.home-block-heading h2 { font-size: var(--text-2xl); margin: 0; }
.home-block-heading h2 a { color: var(--color-ink); text-decoration: none; }
.home-block-heading h2 a:hover { color: var(--color-brand); }
.home-block-more { font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }

.card-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.headline-list { display: flex; flex-direction: column; }
.headline-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
    color: inherit;
    text-decoration: none;
}
.headline-row:last-child { border-bottom: none; }
.headline-row:hover { text-decoration: none; }
.headline-row-title { font-weight: 600; color: var(--color-ink); line-height: var(--leading-tight); }
.headline-row:hover .headline-row-title { color: var(--color-brand); }
.headline-row-date { font-size: var(--text-xs); color: var(--color-ink-faint); white-space: nowrap; }

.side-article-item-meta { font-size: var(--text-xs); color: var(--color-ink-faint); margin: var(--space-1) 0 0; }

@media (max-width: 767px) {
    .home-lead { grid-template-columns: 1fr; }
    .card-row { grid-template-columns: 1fr; }
}

/* --- Account pages --- */
.account-page {
    max-width: 640px;
    margin: var(--space-8) auto var(--space-12);
}
.account-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: var(--space-8);
}
.account-identity {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}
.account-eyebrow {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-ink-faint);
    margin: 0;
}
.account-username { font-size: var(--text-2xl); margin: 0; }
.account-level { font-size: var(--text-sm); color: var(--color-ink-muted); margin: 0; }

.account-notice {
    background: var(--color-brand-tint);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    margin-bottom: var(--space-6);
}

.account-section-heading {
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-ink-muted);
    margin: 0 0 var(--space-2);
}
.account-links {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: var(--space-6);
}
.account-links a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    color: var(--color-ink);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--color-border);
}
.account-links a:last-child { border-bottom: none; }
.account-links a::after { content: "\203A"; font-size: var(--text-xl); color: var(--color-ink-faint); line-height: 1; }
.account-links a:hover { background: var(--color-bg-subtle); color: var(--color-brand); }

.account-danger { font-size: var(--text-sm); margin: 0; }
.account-danger a { color: var(--color-danger); }

/* --- Avatars (round). Sizes: add more modifiers as needed. --- */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-brand-tint);
    color: var(--color-brand-dark);
    font-weight: 700;
}
.avatar-lg { width: 88px; height: 88px; font-size: var(--text-2xl); }

@media (max-width: 480px) {
    .account-card { padding: var(--space-6) var(--space-4); }
}

/* --- Account pages: extras --- */
.account-page-narrow { max-width: 440px; }
.account-title { font-size: var(--text-2xl); margin: 0 0 var(--space-6); }
.account-intro { color: var(--color-ink-muted); }
.account-footer-links {
    margin: var(--space-6) 0 0;
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
    line-height: 1.9;
}
.account-card .account-section-heading { margin-top: var(--space-8); }
.account-card form > .account-section-heading:first-child { margin-top: 0; }

/* --- Forms (site-wide) --- */
.form-field { margin-bottom: var(--space-4); }
.form-field > label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: var(--space-1);
}
.form-input {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: var(--color-ink);
    line-height: var(--leading-normal);
}
.form-input:focus {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px var(--color-brand-tint);
}
textarea.form-input { resize: vertical; }
.form-hint {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
    margin: var(--space-1) 0 0;
}
.form-check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    cursor: pointer;
}
.form-check input { margin-top: 0.3em; flex-shrink: 0; }
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-4);
}
.form-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-6);
}
.form-errors, .form-success {
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    margin: 0 0 var(--space-6);
}
.form-errors { background: #FDECEC; color: #A32F2F; }
ul.form-errors { list-style: none; }
ul.form-errors li + li { margin-top: var(--space-1); }
.form-success { background: #E6F5EC; color: #176B3E; }

.btn-block { display: block; width: 100%; text-align: center; }
.btn-danger { background: var(--color-danger); }
.btn-danger:hover { background: #B33636; }

.avatar-upload {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}
.avatar-upload .btn { cursor: pointer; }
.avatar-upload input:focus-visible + .btn { border-color: var(--color-brand); box-shadow: 0 0 0 3px var(--color-brand-tint); }

/* Hides an element visually while keeping it usable by screen readers
   and keyboard (e.g. a file input behind a styled label). */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
}

@media (max-width: 480px) {
    .form-grid { grid-template-columns: 1fr; }
}

/* --- Workspace pages (article editor; later the submissions tracker) --- */
.workspace-page { padding-top: var(--space-8); padding-bottom: var(--space-12); }
.workspace-title { font-size: var(--text-2xl); margin: 0 0 var(--space-6); }

.editor-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-8);
    align-items: start;
}
.editor-title-input { font-size: var(--text-xl); font-weight: 700; }
.editor-counter { text-align: right; }

/* Right-hand settings panel. Sticky, with its own scrollbar if it's ever
   taller than the window, so the action buttons never scroll away. */
.editor-side {
    position: sticky;
    top: var(--space-4);
    max-height: calc(100vh - 2 * var(--space-4));
    overflow-y: auto;
}
.editor-panel {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.editor-panel-section {
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}
.editor-panel-section:last-child { border-bottom: none; }
.editor-panel-label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-ink-muted);
    margin: 0 0 var(--space-2);
}
.editor-status { font-size: var(--text-lg); margin: 0; }
#save-indicator { margin: var(--space-1) 0 0; min-height: 1.2em; }
.editor-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* The actions sit at the bottom of the panel. If the window is too short to
   show the whole panel, they stick to the bottom of it anyway, so Save and
   Publish never end up hidden below the fold. */
.editor-panel-actions {
    position: sticky;
    bottom: 0;
    background: var(--color-bg);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 -6px 8px -8px rgba(22, 24, 29, 0.25);
}
.editor-actions-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.editor-exit {
    background: none;
    border: none;
    padding: var(--space-1) 0;
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    cursor: pointer;
}
.editor-exit:hover { color: var(--color-brand); text-decoration: underline; }

.header-image-preview {
    aspect-ratio: 16 / 9;
    background: #333;
    color: #fff;
    font-size: var(--text-sm);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.header-image-preview:hover { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.header-image-preview img { width: 100%; height: 100%; object-fit: contain; }

/* Tag pickers: the article's (#tag-...) and the image upload form's (#imgtag-...) */
#tag-chips, #imgtag-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
#tag-chips:not(:empty), #imgtag-chips:not(:empty) { margin-bottom: var(--space-2); }
.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px 3px 10px;
    border-radius: 999px;
    background: var(--color-brand-tint);
    color: var(--color-brand-darker);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.3;
}
.tag-chip-kind { font-size: var(--text-xs); font-weight: 400; color: var(--color-ink-muted); }
.tag-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
.tag-chip-remove:hover { background: #fff; color: var(--color-danger); }

#tag-search-results, #imgtag-search-results {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-top: var(--space-1);
    max-height: 220px;
    overflow-y: auto;
    font-size: var(--text-sm);
}
#tag-search-results:empty, #imgtag-search-results:empty { display: none; }
.tag-result {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: none;
    border-bottom: 1px solid var(--color-border);
    background: none;
    font: inherit;
    color: var(--color-ink);
    text-align: left;
    cursor: pointer;
}
.tag-result:last-child { border-bottom: none; }
.tag-result:hover, .tag-result:focus-visible { background: var(--color-bg-subtle); color: var(--color-brand); outline: none; }
.tag-result-kind { font-size: var(--text-xs); color: var(--color-ink-muted); }
#tag-create-row, #imgtag-create-row { margin-top: var(--space-3); font-size: var(--text-sm); }
.tag-create-types { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: var(--space-2) 0; }
.tag-create-types label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }

/* Body editor (TipTap) */
.editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    position: sticky;
    top: 0;
    z-index: 10;
    padding: var(--space-2);
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border-strong);
    border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
}
.editor-toolbar button {
    min-width: 32px;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: none;
    color: var(--color-ink);
    font-size: var(--text-sm);
    cursor: pointer;
}
.editor-toolbar button:hover { background: var(--color-bg); border-color: var(--color-border-strong); }
.editor-toolbar button.is-active { background: var(--color-ink); border-color: var(--color-ink); color: #fff; }
.editor-toolbar button:disabled { opacity: 0.4; cursor: not-allowed; background: none; border-color: transparent; }
.editor-toolbar-divider { width: 1px; height: 20px; background: var(--color-border-strong); margin: 0 var(--space-1); }

.tiptap-editor {
    min-height: 420px;
    padding: var(--space-4) var(--space-6);
    background: var(--color-bg);
    border: 1px solid var(--color-border-strong);
    border-radius: 0 0 var(--radius) var(--radius);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
}
.tiptap-editor:focus-within { border-color: var(--color-brand); }
.tiptap-editor .ProseMirror { outline: none; min-height: 380px; }
.tiptap-editor .ProseMirror p { margin: 0 0 1em; }
.tiptap-editor .ProseMirror blockquote {
    margin: 1em 0;
    padding-left: 1em;
    border-left: 4px solid var(--color-border-strong);
    color: var(--color-ink-muted);
}
.tiptap-editor table { border-collapse: collapse; width: 100%; }
.tiptap-editor table td, .tiptap-editor table th { border: 1px solid #999; padding: 4px 8px; }

.tiptap-source-editor {
    display: block;
    width: 100%;
    min-height: 420px;
    padding: var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: 0 0 var(--radius) var(--radius);
    font-family: monospace;
    font-size: 13px;
    resize: vertical;
}

@media (max-width: 1023px) {
    .editor-layout { grid-template-columns: 1fr; }
    .editor-side { position: static; max-height: none; overflow: visible; }
    .editor-panel-actions { position: static; box-shadow: none; }
}

/* --- Editor: published-article notice, hidden buttons --- */
.editor-notice {
    background: var(--color-brand-tint);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    margin: 0 0 var(--space-6);
}
.btn[hidden] { display: none; }
.form-input[readonly] { background: var(--color-bg-subtle); color: var(--color-ink-muted); cursor: not-allowed; }

/* --- Submissions queue (articles/index.php) --- */
.queue-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}
.queue-head .workspace-title { margin: 0; }

.queue-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    border-bottom: 2px solid var(--color-border);
    margin-bottom: var(--space-4);
}
.queue-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    margin-bottom: -2px;
    border-bottom: 2px solid transparent;
    color: var(--color-ink-muted);
    font-weight: 600;
    text-decoration: none;
}
.queue-tab:hover { color: var(--color-brand); text-decoration: none; }
.queue-tab.is-active { color: var(--color-brand); border-bottom-color: var(--color-brand); }
.queue-tab-count {
    font-size: var(--text-xs);
    background: var(--color-bg-subtle);
    color: var(--color-ink-muted);
    border-radius: 999px;
    padding: 1px 8px;
}
.queue-tab.is-active .queue-tab-count { background: var(--color-brand-tint); color: var(--color-brand-dark); }

/* The table scrolls sideways inside this box on narrow screens. */
.queue-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}
.queue-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.queue-table th {
    background: var(--color-brand);
    color: #fff;
    font-weight: 700;
    font-size: var(--text-base);
    text-align: left;
    padding: var(--space-3) var(--space-4);
    white-space: nowrap;
}
.queue-table th a { color: #fff; text-decoration: none; }
.queue-table th a:hover { text-decoration: underline; }
.queue-table td {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border);
    vertical-align: top;
}
.queue-table tbody tr:nth-child(even) { background: var(--color-bg-subtle); }
.queue-table tbody tr:hover { background: var(--color-brand-tint); }
.queue-title { min-width: 260px; }
.queue-title > a:first-child { font-weight: 600; color: var(--color-ink); }
.queue-title > a:first-child:hover { color: var(--color-brand); }
.queue-view-link { display: inline-block; margin-left: var(--space-2); font-size: var(--text-xs); }
.queue-num { text-align: right; }
.queue-date { white-space: nowrap; }
.queue-muted { color: var(--color-ink-faint); font-size: var(--text-xs); }

.status-pill {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
    margin: 0 4px 4px 0;
}
.status-draft     { background: #EEF0F3; color: #4A5260; }
.status-submitted { background: #FFF1D6; color: #8A5A00; }
.status-scheduled { background: #EDE7FB; color: #5B3BB0; }
.status-published { background: #E6F5EC; color: #176B3E; }
.status-pending   { background: var(--color-brand-tint); color: var(--color-brand-darker); }

.queue-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-4);
}
.queue-pages { display: flex; align-items: center; gap: var(--space-3); }
.queue-per-page { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-ink-muted); }
.queue-per-page select {
    padding: 4px 8px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    background: var(--color-bg);
}
/* --- Byline additions --- */
.form-hint-block { margin: calc(-1 * var(--space-2)) 0 var(--space-6); }
.editor-notice-warning { background: #FFF1D6; color: #6B4600; }
.editor-notice-warning a { color: inherit; text-decoration: underline; }

/* --- Author pages and author box --- */
.avatar-xl { width: 120px; height: 120px; font-size: var(--text-3xl); }

.author-hero {
    display: flex;
    align-items: flex-start;
    gap: var(--space-6);
    padding: var(--space-8) 0 var(--space-6);
    border-bottom: 1px solid var(--color-border);
}
.author-hero-body { min-width: 0; }
.author-hero-name { font-size: var(--text-3xl); margin: 0 0 var(--space-1); }
.author-hero-meta { color: var(--color-ink-muted); font-size: var(--text-sm); margin: 0 0 var(--space-3); }
.author-handle { font-weight: 600; color: var(--color-brand-dark); }
.author-hero-bio { max-width: 680px; margin: 0 0 var(--space-4); }

.author-links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.author-links a {
    display: inline-block;
    padding: 2px 12px;
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-ink);
    text-decoration: none;
}
.author-links a:hover { border-color: var(--color-brand); color: var(--color-brand); text-decoration: none; }

.article-byline-author { font-weight: 600; }

.author-box {
    display: flex;
    gap: var(--space-6);
    margin: var(--space-12) 0 var(--space-8);
    padding: var(--space-6);
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}
.author-box-avatar { flex-shrink: 0; }
.author-box-avatar:hover { text-decoration: none; }
.author-box-body { min-width: 0; }
.author-box-eyebrow {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-ink-faint);
    margin: 0 0 var(--space-1);
}
.author-box-name { font-size: var(--text-xl); margin: 0 0 var(--space-2); }
.author-box-name a { color: var(--color-ink); }
.author-box-name a:hover { color: var(--color-brand); }
.author-box-bio { font-size: var(--text-sm); color: var(--color-ink-muted); margin: 0 0 var(--space-3); }
.author-box .author-links { margin-bottom: var(--space-3); }
.author-box-more { font-size: var(--text-sm); font-weight: 600; }

@media (max-width: 600px) {
    .author-hero, .author-box { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
    .avatar-xl { width: 96px; height: 96px; }
}
/* --- Form label notes and character counters --- */
.form-label-note { font-weight: 400; color: var(--color-ink-muted); }
.form-counter { text-align: right; }
.form-counter.is-near-limit { color: var(--color-danger); font-weight: 600; }
/* --- Unpublish link in the editor panel --- */
.editor-danger-link { color: var(--color-danger); }
.editor-danger-link:hover { color: #B33636; }

/* --- Editorial notes and "returned" status --- */
.status-returned { background: #FDECEC; color: #A32F2F; }

.editor-notes {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 2px solid var(--color-border);
}
.editor-notes-heading {
    font-size: var(--text-lg);
    margin: 0 0 var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}
.editor-notes-placeholder { margin-top: var(--space-8); }
.notes-list { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); }
.note {
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-border-strong);
    border-radius: var(--radius);
}
.note-return { border-left-color: var(--color-danger); background: #FFF7F7; }
.note-meta { font-size: var(--text-xs); color: var(--color-ink-muted); font-weight: 400; margin: 0 0 var(--space-1); }
.note-meta strong { font-weight: 700; color: var(--color-ink); }
.note-body { margin: 0; white-space: pre-wrap; font-size: var(--text-sm); }
.notes-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
/* --- Version history --- */
.editor-history-link { display: inline-block; margin-top: var(--space-2); font-size: var(--text-sm); font-weight: 600; }
.history-subtitle { margin: var(--space-1) 0 0; color: var(--color-ink-muted); }
.history-actions { white-space: nowrap; text-align: right; }
.history-actions .btn { margin-left: var(--space-1); }


/* --- Edit locking --- */
.editor-lock-banner {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    background: #FDECEC;
    color: #A32F2F;
    border: 1px solid #F5C2C2;
    border-left: 4px solid var(--color-danger);
    border-radius: var(--radius);
    padding: var(--space-4);
    margin: 0 0 var(--space-8);
    font-size: var(--text-sm);
}
.editor-lock-banner[hidden] { display: none; }
.editor-lock-icon { flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; }
.editor-lock-body { flex: 1; min-width: 0; }
.editor-lock-banner p { margin: 0 0 var(--space-3); }
.editor-lock-banner strong { color: #7A1F1F; }
.editor-lock-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.editor-lock-banner.is-free { background: #E6F5EC; color: #176B3E; border-color: #BFE3CD; border-left-color: var(--color-success); }
.editor-lock-banner.is-free strong { color: #0F4F2C; }

/* Read-only editor: nothing that changes the article can be clicked */
.editor-readonly #body-toolbar,
.editor-readonly #tag-chips,
.editor-readonly .header-image-preview,
.editor-readonly .gallery-block-node,
.editor-readonly .video-block-node {
    pointer-events: none;
    opacity: 0.55;
}
.editor-readonly .tiptap-editor { background: var(--color-bg-subtle); }
.editor-readonly .form-input:disabled { background: var(--color-bg-subtle); color: var(--color-ink-muted); }
.editor-readonly button:disabled { opacity: 0.45; cursor: not-allowed; }

/* Lock badge in the submissions queue */
.queue-lock {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    font-weight: 600;
    color: #A32F2F;
}
.queue-lock-icon { flex-shrink: 0; width: 13px; height: 13px; }
.queue-lock-mine { color: var(--color-ink-muted); }


/* --- Account avatar and menu in the top bar --- */
.avatar-nav { width: 40px; height: 40px; font-size: var(--text-base); }
.site-account-menu { position: relative; }
.site-account-avatar {
    display: block;
    list-style: none;
    cursor: pointer;
    border-radius: 50%;
    line-height: 0; /* no stray space under the image */
}
.site-account-avatar::-webkit-details-marker { display: none; }
.site-account-avatar .avatar { transition: box-shadow 0.15s ease; }
.site-account-avatar:hover .avatar,
.site-account-avatar:focus-visible .avatar,
.site-account-menu[open] .site-account-avatar .avatar { box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-brand); }
.site-account-avatar:focus-visible { outline: none; }

.site-account-menu-panel {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: var(--space-2);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    min-width: 220px;
    padding: var(--space-2) 0;
    z-index: 20;
    font-weight: 500;
}
.site-account-menu-who {
    padding: var(--space-2) var(--space-4) var(--space-3);
    margin-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
    line-height: var(--leading-tight);
}
.site-account-menu-who strong { display: block; color: var(--color-ink); }
.site-account-menu-who span { font-size: var(--text-sm); color: var(--color-ink-muted); }
.site-account-menu-panel a {
    display: block;
    padding: var(--space-2) var(--space-4);
    color: var(--color-ink);
}
.site-account-menu-panel a:hover {
    background: var(--color-bg-subtle);
    color: var(--color-brand);
    text-decoration: none;
}
.site-account-menu-panel .site-account-menu-logout {
    margin-top: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}


/* --- Queue: "All submissions / Just mine" switch (editors) --- */
.queue-head-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.queue-scope {
    display: inline-flex;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    overflow: hidden;
    font-size: var(--text-sm);
    font-weight: 600;
}
.queue-scope a { padding: var(--space-2) var(--space-3); color: var(--color-ink-muted); }
.queue-scope a + a { border-left: 1px solid var(--color-border-strong); }
.queue-scope a:hover { background: var(--color-bg-subtle); color: var(--color-ink); text-decoration: none; }
.queue-scope a.is-active { background: var(--color-brand-tint); color: var(--color-brand-darker); }


/* --- Header search button icon --- */
.site-search button {
    display: flex;
    align-items: center;
    align-self: stretch;
    color: var(--color-ink-muted);
}
.site-search button:hover { color: var(--color-brand); }
.site-search button svg { display: block; }

/* --- Search page --- */
.search-page-form {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.search-page-form .form-input { flex: 1; min-width: 0; }
.search-summary { color: var(--color-ink-muted); font-size: var(--text-sm); margin-bottom: var(--space-6); }

.search-results { list-style: none; margin: 0 0 var(--space-8); padding: 0; }
.search-results li + li { border-top: 1px solid var(--color-border); }
.search-result {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    color: var(--color-ink);
}
.search-result:hover { text-decoration: none; }
.search-result:hover .search-result-title { color: var(--color-brand); }
.search-result-image {
    flex-shrink: 0;
    width: 180px;
    aspect-ratio: 16 / 9;
    background: var(--color-bg-subtle);
    border-radius: var(--radius);
    overflow: hidden;
}
.search-result-image img { width: 100%; height: 100%; object-fit: cover; }
.search-result-body { flex: 1; min-width: 0; }
.search-result-title { font-size: var(--text-lg); margin: var(--space-2) 0 var(--space-1); }
.search-result-summary { font-size: var(--text-sm); color: var(--color-ink-muted); margin: 0 0 var(--space-2); }
.search-result mark { background: #FFF1B8; color: inherit; padding: 0 1px; border-radius: 2px; }

@media (max-width: 600px) {
    .search-result-image { width: 110px; }
    .search-result-summary { display: none; }
}


/* Account menu near the left edge (narrow screens): open to the right */
.site-account-menu-panel.is-left { right: auto; left: 0; }


/* --- Stats page (articles/stats.php) --- */
.stats-subtitle { margin: var(--space-1) 0 0; color: var(--color-ink-muted); }
.stats-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}
.stats-ranges { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.stats-ranges a {
    padding: var(--space-1) var(--space-3);
    border-radius: 999px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-ink-muted);
}
.stats-ranges a:hover { background: var(--color-bg-subtle); color: var(--color-ink); text-decoration: none; }
.stats-ranges a.is-active { background: var(--color-brand-tint); color: var(--color-brand-darker); }
.stats-custom-range { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); font-size: var(--text-sm); }
.stats-custom-range .form-input { width: auto; padding: var(--space-1) var(--space-2); }

.stats-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}
.stats-tile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}
.stats-tile-label { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-muted); }
.stats-tile-value { font-size: var(--text-3xl); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stats-tile-note { font-size: var(--text-xs); color: var(--color-ink-faint); }

.stats-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    min-width: 0;
}
.stats-card-title { font-size: var(--text-base); margin: 0 0 var(--space-3); }
.stats-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-4); }
.stats-section-heading { font-size: var(--text-xl); margin: var(--space-8) 0 var(--space-4); }
.stats-section-note { font-size: var(--text-sm); font-weight: 400; color: var(--color-ink-muted); }
.stats-empty { color: var(--color-ink-muted); font-size: var(--text-sm); margin: 0; }
.stats-muted { color: var(--color-ink-faint); }
.stats-footnote { font-size: var(--text-xs); color: var(--color-ink-muted); margin: var(--space-4) 0 var(--space-12); }

.stats-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.stats-table th {
    text-align: left;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-ink-muted);
    padding: 0 var(--space-2) var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
}
.stats-table td { padding: var(--space-2) var(--space-2) var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.stats-table tr:last-child td { border-bottom: none; }
.stats-table a { color: var(--color-ink); }
.stats-table a:hover { color: var(--color-brand); }
.stats-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stats-table th.stats-num { text-align: right; }
.stats-share { color: var(--color-ink-muted); width: 3.5em; }
.stats-zero { color: var(--color-danger); font-weight: 600; }

/* Share-of-total bar behind each breakdown label */
.stats-label { position: relative; }
.stats-bar {
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    background: var(--color-brand-tint);
    border-radius: 0 4px 4px 0;
}
.stats-label-text { position: relative; padding-left: var(--space-2); overflow-wrap: anywhere; }

.stats-subhead { font-size: var(--text-xs); font-weight: 600; color: var(--color-ink-muted); margin: var(--space-4) 0 var(--space-2); }
.stats-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; }
.stats-chip { font-size: var(--text-xs); padding: 2px 8px; border-radius: 999px; background: #FDECEC; color: #A32F2F; }

/* Views chart */
.stats-chart { position: relative; }
.stats-chart svg { display: block; width: 100%; height: auto; }
.stats-grid { stroke: var(--color-border); stroke-width: 1; }
.stats-baseline { stroke: var(--color-border-strong); stroke-width: 1; }
.stats-axis { font-size: 12px; fill: var(--color-ink-muted); font-family: inherit; }
.stats-mark { fill: var(--color-brand); }
.stats-hit { fill: transparent; }
.stats-col.is-hover .stats-hit { fill: var(--color-bg-subtle); }
.stats-col.is-hover .stats-mark { fill: var(--color-brand-dark); }
.stats-tooltip {
    position: absolute;
    pointer-events: none;
    background: var(--color-ink);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: 600;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius);
    white-space: nowrap;
}
.stats-table-toggle { margin-top: var(--space-3); font-size: var(--text-sm); }
.stats-table-toggle summary { cursor: pointer; color: var(--color-ink-muted); }
.stats-table-toggle .stats-table { max-width: 320px; margin-top: var(--space-2); }

@media (max-width: 900px) {
    .stats-tiles { grid-template-columns: 1fr 1fr; }
    .stats-grid-2 { grid-template-columns: 1fr; }
}


/* Country list note at the bottom of the stats page (editors) */
.stats-tools { font-size: var(--text-xs); color: var(--color-ink-muted); margin: calc(-1 * var(--space-8)) 0 var(--space-12); }
.stats-tools a { font-weight: 600; margin-left: var(--space-1); }
.stats-tools.is-due { color: #6B4600; }


/* --- Privacy policy (and future long-form site pages) --- */
.policy { max-width: 760px; margin: var(--space-8) auto var(--space-16); font-size: var(--text-base); }
.policy-title { font-size: var(--text-3xl); margin-bottom: var(--space-1); }
.policy-updated { color: var(--color-ink-muted); font-size: var(--text-sm); margin-bottom: var(--space-8); }
.policy h2 { font-size: var(--text-xl); }
.policy li + li { margin-top: var(--space-2); }
.policy table { font-size: var(--text-sm); }
.policy th { text-align: left; background: var(--color-bg-subtle); }
@media (max-width: 600px) {
    .policy table { display: block; overflow-x: auto; }
}

/* Footer: privacy policy + cookie settings side by side */
.site-footer-links { display: flex; flex-wrap: wrap; gap: var(--space-4); }


/* --- Editor pop-ups (header image, upload, body images) --- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(22, 24, 29, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    z-index: 1000;
}
#image-add-modal { z-index: 1001; }
.modal-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 760px;
    max-height: calc(100vh - 2 * var(--space-8));
    background: var(--color-bg);
    border-radius: var(--radius);
    box-shadow: 0 12px 40px rgba(22, 24, 29, 0.25);
    overflow: hidden;
}
.modal-box-narrow { max-width: 540px; }
.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--color-border);
}
.modal-title { font-size: var(--text-lg); margin: 0; }
.modal-close {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--color-ink-muted);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}
.modal-close:hover { background: var(--color-bg-subtle); color: var(--color-ink); }
.modal-toolbar { display: flex; gap: var(--space-2); padding: var(--space-4) var(--space-6) 0; }
.modal-toolbar .form-input { flex: 1; min-width: 0; }
.modal-toolbar .btn { flex-shrink: 0; }
.modal-notice { margin: var(--space-4) var(--space-6) 0; }
.modal-hint { margin: var(--space-2) var(--space-6) 0; font-size: var(--text-xs); color: var(--color-ink-muted); }
.modal-body { flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-6); }
.modal-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-subtle);
}
.modal-status { margin: 0 auto 0 0; font-size: var(--text-sm); color: var(--color-ink-muted); }
.modal-foot .btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Image grids inside the pop-ups */
.image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); }
.image-grid-item {
    position: relative;
    border: 2px solid transparent;
    border-radius: var(--radius);
    background: var(--color-bg-subtle);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s ease;
}
.image-grid-item:hover { border-color: var(--color-border-strong); }
.image-grid-item.is-selected { border-color: var(--color-brand); box-shadow: 0 0 0 2px var(--color-brand-tint); }
.image-grid-item img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--color-border); }
.image-grid-item .caption {
    padding: 4px 8px;
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 1.6em;
}
.image-select-checkbox {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--color-brand);
    cursor: pointer;
}
.image-grid-empty { grid-column: 1 / -1; margin: var(--space-8) 0; text-align: center; color: var(--color-ink-muted); }

/* Image groups and videos inside the article body (click to edit) */
.gallery-block-node, .video-block-node {
    margin: var(--space-4) 0;
    padding: var(--space-3);
    border: 2px solid var(--color-brand-tint);
    border-radius: var(--radius);
    background: #F7FAFF;
    cursor: pointer;
    transition: border-color 0.15s ease;
}
.gallery-block-node:hover, .video-block-node:hover { border-color: var(--color-brand); }
.gallery-block-node-label, .video-block-node-label {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-brand-darker);
}
.gallery-block-node-label { margin-bottom: var(--space-2); }
.gallery-block-node-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.gallery-block-node-row img { width: 96px; height: 60px; object-fit: cover; border-radius: 4px; display: block; }
.gallery-block-node-more {
    width: 96px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--color-brand);
    border-radius: 4px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-brand);
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .modal-overlay { padding: 0; align-items: stretch; }
    .modal-box { max-height: none; border-radius: 0; }
    .modal-head, .modal-body, .modal-foot { padding-left: var(--space-4); padding-right: var(--space-4); }
    .modal-toolbar { padding: var(--space-4) var(--space-4) 0; }
    .modal-notice, .modal-hint { margin-left: var(--space-4); margin-right: var(--space-4); }
    .image-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}


/* Video pop-up preview */
.video-preview {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-bg-subtle);
}
.video-preview[hidden] { display: none; }
.video-preview img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--color-border); }
.video-preview-label { margin: 0; padding: var(--space-2) var(--space-3); font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-muted); }


/* ===== Image pickers: pencil button to edit an image's details ===== */
.image-edit-btn {
    position: absolute; top: 6px; left: 6px;
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0;
    border: 0; border-radius: 50%;
    background: rgba(0, 0, 0, 0.6); color: #fff;
    cursor: pointer; opacity: 0.85;
    transition: opacity 0.15s, background 0.15s;
}
.image-edit-btn:hover, .image-edit-btn:focus-visible { opacity: 1; background: var(--color-brand); }
.image-edit-preview {
    display: block; width: 100%; max-height: 220px; object-fit: contain;
    margin-bottom: var(--space-4); border-radius: var(--radius);
    background: var(--color-border);
}
.image-edit-note { margin: calc(-1 * var(--space-2)) 0 var(--space-4); }
.image-edit-preview[hidden], .image-edit-note[hidden] { display: none; }


/* ===== Image credits ("Credit: ...") in the upper right of full-size images ===== */
.article-header-image { position: relative; }
.image-credit {
    position: absolute; top: 0; right: 0;
    max-width: 70%;
    padding: 3px 8px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 11px;
    line-height: 1.4;
    text-align: right;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    border-bottom-left-radius: 4px;
    pointer-events: none; /* clicks still open the full-screen view */
}
.image-credit[hidden] { display: none; }


/* ===== Logo in the top bar ===== */
.site-logo { display: flex; align-items: center; line-height: 0; }
.site-logo img { display: block; height: 34px; width: auto; }
@media (max-width: 600px) {
    .site-logo img { height: 28px; }
}

/* ===== 404 page ===== */
.not-found { max-width: 620px; }
.not-found-code {
    margin: 0;
    font-size: 72px;
    font-weight: 800;
    line-height: 1;
    color: var(--color-brand);
}
.not-found .section-page-title { margin: var(--space-2) 0 var(--space-4); }
.not-found .search-page-form { margin: var(--space-6) 0; }
.not-found-heading { font-size: var(--text-lg); margin: 0 0 var(--space-3); }
.not-found-sections {
    display: flex; flex-wrap: wrap; gap: var(--space-2);
    list-style: none; margin: 0 0 var(--space-6); padding: 0;
}
.not-found-sections a {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--color-ink);
}
.not-found-sections a:hover { border-color: var(--color-brand); color: var(--color-brand); text-decoration: none; }


/* ===== Notices holding more than one paragraph ===== */
.editor-notice p { margin: 0; }
.editor-notice p + p { margin-top: var(--space-2); }


/* ===== Ads ===== */
.ad-unit { margin: 0 0 var(--space-8); }
.ad-label {
    display: block;
    margin-bottom: 4px;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ink-faint);
}
.ad-creative { overflow: hidden; }
.ad-creative img { display: block; width: 100%; height: auto; }
.page-side-col .ad-unit { max-width: 300px; margin-left: auto; margin-right: auto; }
.ad-unit-banner { max-width: 728px; margin: var(--space-8) auto; }

/* Gutter ads: beside the page, only where there's room for them. */
main { position: relative; }
.ad-gutter-rail { display: none; }
@media (min-width: 1560px) {
    .ad-gutter-rail {
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        width: 160px;
    }
    .ad-gutter-rail-left { left: calc(50% - 760px); }
    .ad-gutter-rail-right { right: calc(50% - 760px); }
    .ad-gutter { position: sticky; top: var(--space-6); margin-top: var(--space-8); }
    .ad-gutter .ad-unit { margin: 0; }
}

/* --- Ads dashboard and editor (staff) --- */
.ads-filters { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0 0 var(--space-4); font-size: var(--text-sm); }
.ads-filters label { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; }
.ads-filters .form-input { width: auto; padding: var(--space-1) var(--space-2); }
.ads-thumb-col { width: 72px; }
.ads-thumb {
    display: flex; align-items: center; justify-content: center;
    width: 64px; height: 40px; object-fit: contain;
    background: var(--color-bg-subtle); border-radius: 4px;
    font-size: var(--text-xs); color: var(--color-ink-muted); font-family: monospace;
}
.ads-toggle { display: inline; margin: 0; }
.ads-toggle button {
    padding: 0; border: 0; background: none; cursor: pointer;
    font: inherit; font-size: var(--text-xs); font-weight: 600; color: var(--color-brand);
}
.ads-toggle button:hover { text-decoration: underline; }
.ads-row-meta { margin-top: 2px; font-size: var(--text-xs); }
.ads-kind { margin-right: var(--space-2); }
.ads-table .queue-title { min-width: 180px; }
.ads-note { margin-top: var(--space-4); }
.ads-back { margin: 0 0 var(--space-2); font-size: var(--text-sm); }
.ads-edit-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-8); align-items: start; margin-top: var(--space-4); }
@media (max-width: 1023px) {
    .ads-edit-layout { grid-template-columns: 1fr; }
}
.ads-form { max-width: 640px; }
.ads-form fieldset { border: 0; padding: 0; margin: 0 0 var(--space-4); }
.ads-form legend { font-weight: 600; margin-bottom: var(--space-2); }
.ads-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.ads-hint-tight { margin: calc(-1 * var(--space-2)) 0 var(--space-4); }
.ads-code { font-family: monospace; font-size: var(--text-xs); }
.ads-side-heading { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-ink-muted); margin: 0 0 var(--space-3); }
.ads-preview { margin-bottom: var(--space-6); }
.ads-preview img { max-width: 100%; height: auto; border: 1px solid var(--color-border); }
.ads-totals { display: flex; gap: var(--space-4); margin-bottom: var(--space-2); }
.ads-totals div { display: flex; flex-direction: column; }
.ads-totals strong { font-size: var(--text-xl); }
.ads-totals span { font-size: var(--text-xs); color: var(--color-ink-muted); }
.ads-days { width: 100%; border-collapse: collapse; font-size: var(--text-xs); margin-bottom: var(--space-6); }
.ads-days th, .ads-days td { text-align: right; padding: 3px 6px; border-bottom: 1px solid var(--color-border); }
.ads-days th:first-child, .ads-days td:first-child { text-align: left; }
.ads-delete { margin-top: var(--space-4); }


/* Banners inside an article, and at the bottom of a page */
.article-body .ad-unit-banner { margin: var(--space-8) auto; }
.article-body .ad-unit-banner .ad-label { font-family: inherit; line-height: 1.4; }
.article-body .ad-unit-banner img { margin: 0; border-radius: 0; box-shadow: none; }
.page-main-col > .ad-unit-banner:last-child { margin-bottom: 0; }