/* ==========================================================================
   Dark Mode Bridge
   Newstalgia uses prefers-color-scheme on :root. Paperboat also supports
   explicit body.theme-dark / body.theme-light classes for user-toggled mode.
   ========================================================================== */

body.theme-dark {
    color-scheme: dark;
    --fg: #ffffff;
    --bg: #1a1a1a;
    --border-color: var(--fg);
    --fg-muted: color-mix(in srgb, var(--fg) 50%, var(--bg));
    --fg-subtle: color-mix(in srgb, var(--fg) 45%, var(--bg));
    --fg-border: color-mix(in srgb, var(--fg) 22%, var(--bg));
    --fg-faint: color-mix(in srgb, var(--fg) 15%, var(--bg));
    --fg-ghost: color-mix(in srgb, var(--fg) 7%, var(--bg));
    --icon-filter: invert(1);
    --icon-active-filter: invert(0);
}

body.theme-light {
    color-scheme: light;
    --fg: #1a1a1a;
    --bg: #ffffff;
    --border-color: var(--fg);
    --fg-muted: color-mix(in srgb, var(--fg) 50%, var(--bg));
    --fg-subtle: color-mix(in srgb, var(--fg) 45%, var(--bg));
    --fg-border: color-mix(in srgb, var(--fg) 22%, var(--bg));
    --fg-faint: color-mix(in srgb, var(--fg) 15%, var(--bg));
    --fg-ghost: color-mix(in srgb, var(--fg) 7%, var(--bg));
    --icon-filter: invert(0);
    --icon-active-filter: invert(1);
}

/* Dark mode images: add fg-colored background so transparent PNGs remain visible */
body.theme-dark img {
    background-color: var(--fg);
}

/* System mode: let light-dark() follow the OS preference */
body.theme-system {
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    body.theme-system img {
        background-color: var(--fg);
    }
}

/* ==========================================================================
   Messages / Alerts
   ========================================================================== */

.messages {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.message {
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    border-left: 4px solid var(--fg-border);
    background-color: var(--fg-ghost);
}

.message.success {
    border-left-color: #28a745;
    background-color: rgba(40, 167, 69, 0.1);
}

.message.error {
    border-left-color: #dc3545;
    background-color: rgba(220, 53, 69, 0.1);
}

.message.warning,
.warning {
    border-left: 4px solid #ffc107;
    background-color: rgba(255, 193, 7, 0.1);
    padding: 0.75rem 1rem;
}

.message.info {
    border-left-color: #17a2b8;
    background-color: rgba(23, 162, 184, 0.1);
}

/* ==========================================================================
   Components
   ========================================================================== */

article.distinct {
    border-left: 2px solid var(--fg-border);
    padding-left: 1em;
    margin-bottom: 2em;
}

.entry {
    border: 1px solid var(--fg-border);
    border-radius: var(--element-radius);
    padding: 1em;
    margin-bottom: var(--element-spacing);
}

span.links a:not(:last-child) {
    margin-right: 0.5em;
}

/* ==========================================================================
   Task Lists (Markdown Checkboxes)
   ========================================================================== */

ul.task-list {
    list-style: none;
    padding-left: 0;
}

li.task-list-item {
    display: flex;
    align-items: baseline;
    margin-bottom: 0.5rem;
}

li.task-list-item input[type="checkbox"] {
    margin-right: 0.5rem;
    margin-top: 0.25rem;
    flex-shrink: 0;
}

/* ==========================================================================
   Forms (Paperboat-specific)
   ========================================================================== */

textarea {
    field-sizing: content;
    min-height: 50px;
}

/* ==========================================================================
   Gallery
   ========================================================================== */

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin: 1rem 0;
}

.gallery-grid a.gallery-thumb {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
}

.gallery-grid a.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-single figure {
    margin: 0;
}

.gallery-single figure img {
    width: 100%;
    height: auto;
}

.gallery-single figcaption {
    margin-top: 0.5rem;
}

.gallery-nav {
    display: flex;
    justify-content: space-between;
    margin: 1rem 0;
}

.gallery-nav span {
    min-width: 6rem;
}

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

/* ==========================================================================
   Landing theme
   ========================================================================== */

body.layout-landing figure img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
}

.locale-links--right {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-block: 0.5rem;
}

body.layout-landing footer.content {
    text-align: center;
}

.landing-page-nav {
    border-top: 1px solid var(--border-color);
    padding-block: 1.5rem;
    margin-top: 2rem;
}

.landing-page-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: center;
}

.landing {
    padding-block: 1rem;
}

.landing-hero {
    padding-block: 3rem 2rem;
    text-align: center;
}

.landing-hero__image {
    margin-inline: auto;
    margin-bottom: 1.5rem;
    max-width: 20rem;
}

.landing-hero__image img {
    width: 100%;
    height: auto;
}

.landing-hero h1 {
    font-size: 2rem;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.landing-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 1.5rem;
}

.landing-cta a {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    border: 1px solid;
    border-color: var(--border-n) var(--border-e) var(--border-s) var(--border-w);
    border-radius: var(--element-radius);
    padding: 0.5em 1.25em;
    text-decoration: none;
    font: inherit;
    cursor: pointer;
    box-shadow: 0 1px 2px var(--shadow-color);
    background: linear-gradient(to bottom, var(--bg), var(--fg-ghost));
    color: var(--fg);
}

.landing-cta a:hover {
    background: linear-gradient(to bottom, var(--fg-ghost), var(--fg-faint));
}

.landing-cta a.secondary {
    border-color: var(--fg-border);
    color: var(--fg);
    background: none;
    box-shadow: none;
}

.landing-cta a.secondary:hover {
    background: var(--fg-ghost);
}

.landing-section,
.landing-blocks > div {
    border-top: 1px solid var(--border-color);
    padding-block: 2rem;
    max-width: 40rem;
    margin-inline: auto;
}

.landing-blocks > div:first-child {
    border-top: none;
    padding-top: 0;
}

.landing-section h2,
.landing-blocks > div h2 {
    margin-bottom: 0.75rem;
}

.landing-final-cta {
    text-align: center;
    padding-block-end: 3rem;
}

.landing-final-cta .landing-cta {
    margin-bottom: 0.5rem;
}

@media (max-width: 480px) {
    .landing-hero h1 {
        font-size: 1.5rem;
    }

    .landing-cta {
        flex-direction: column;
        align-items: center;
    }
}

/* ==========================================================================
   Forms inside a button group
   ========================================================================== */

/* A form is a box, so putting one inside [role="group"] makes the form the
   group child instead of the button. The group's joined corners then land on
   the form and the button keeps its own full radius, which shows up as a
   button with a stray rounded corner where it should meet its neighbour.
   display: contents removes the form from the box tree so the button becomes
   the group child and the corners join up. Use this on any form that sits
   directly inside a [role="group"] next to other controls. */
.group-form {
    display: contents;
}

/* ==========================================================================
   Post card preview
   ========================================================================== */

.post-preview__image {
    margin: 0;
}

.post-preview__image img {
    width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   Embed blocks
   ========================================================================== */

.embed-block {
    text-align: center;
}

.embed-block img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* ==========================================================================
   Editor Blocks
   ========================================================================== */

.text-center {
    text-align: center;
}

.editor-blocks article {
    border: 1px solid var(--fg);
    padding: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    box-shadow: var(--fg) 4px 4px 0px;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.default-font-size {
    font-size: 1rem;
}

.site-name a {
    font-size: 1.3em;
    text-decoration: none;
    color: var(--fg);
}

.block-titlebar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5em;
}
.feed-filter-form {
    margin-bottom: 1rem;
}

.feed-filter-label {
    display: inline;
    margin: 0;
}

.toc ol {
    list-style: none;
    padding: 0;
    margin: 0;
}
.toc li { padding-left: 0; }
.toc li.toc-level-2 { padding-left: 1rem; }
.toc li.toc-level-3 { padding-left: 2rem; }
.toc li.toc-level-4 { padding-left: 3rem; }
.toc li.toc-level-5 { padding-left: 4rem; }
.toc li.toc-level-6 { padding-left: 5rem; }

/* ==========================================================================
   Multilingual / Locale Editor
   ========================================================================== */

/* Locale switcher nav in editor */
.locale-switcher {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.locale-switcher a {
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--fg);
    text-decoration: none;
}
.locale-switcher a[aria-current="page"] {
    background: var(--fg);
    color: var(--bg);
}

/* Locale title input row */
.locale-title-row {
    margin-bottom: 1.5rem;
}

/* Mobile tab radios, hidden, used for CSS-only tab switching */
.locale-tab-radio {
    display: none;
}

/* Tab labels, shown as a tab bar on mobile */
.locale-tab-bar {
    display: none;
    gap: 0;
    border-bottom: 1px solid var(--fg);
    margin-bottom: 1rem;
}
.locale-tab-label {
    padding: 0.4rem 1rem;
    cursor: pointer;
    border: 1px solid transparent;
    border-bottom: none;
}

/* Widen the content area when locale editor is active */
.content:has(.locale-editor-columns) {
    max-width: 1200px;
}

/* Desktop: two-column grid, paired rows */
.locale-editor-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

/* Column headings */
.locale-col-heading {
    margin-top: 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--fg);
}

/* Read-only default text block */
.block-readonly {
    opacity: 0.75;
}
.block-readonly-text {
    white-space: pre-wrap;
    font-family: inherit;
    font-size: 0.95rem;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    overflow-wrap: break-word;
}

/* Language links in public site menu */
.locale-links {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-left: auto;
}
.locale-links a {
    text-decoration: none;
    color: var(--fg);
    opacity: 0.7;
}
.locale-links a[aria-current="true"],
.locale-links a:hover {
    opacity: 1;
    text-decoration: underline;
}

/* Mobile: switch to single-column with tabs */
@media (max-width: 860px) {
    .locale-editor-columns {
        grid-template-columns: 1fr;
    }
    .locale-tab-bar {
        display: flex;
    }

    /* Default: show readonly column, hide editing column */
    #locale-tab-default:checked ~ .locale-editor-columns .block-editing {
        display: none;
    }
    #locale-tab-editing:checked ~ .locale-editor-columns .block-readonly {
        display: none;
    }

    /* Active tab style */
    #locale-tab-default:checked ~ .locale-tab-bar label[for="locale-tab-default"],
    #locale-tab-editing:checked ~ .locale-tab-bar label[for="locale-tab-editing"] {
        border-color: var(--fg);
        font-weight: bold;
    }
}

/* On mobile, hide the editing column by default (default tab is pre-checked) */
@media (max-width: 860px) {
    .locale-editor-columns .block-editing { display: none; }
}

/* Language rows in site settings, flex layout for inline inputs */
.language-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
}
.language-row input {
    margin-bottom: 0;
}
.language-row input:first-child {
    max-width: 6rem;
}
.language-row small {
    white-space: nowrap;
}

.webring-switcher ul li {
    list-style-type: none;
}

.webring-switcher a.block {
    margin-bottom: 0px;
}


nav.centered {
    display: flex;
    justify-content: center;
}

.site-name {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.locale-links {
    align-content: center;
}

.locale-links a {
    font-size: 1rem;
}

/* ==========================================================================
   OpenMoji icons, colour SVGs, never invert
   ========================================================================== */

img.openmoji {
    display: inline-block;
    vertical-align: middle;
    filter: none !important;
    background-color: transparent !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
}

.landing-cta a img.openmoji {
    vertical-align: middle;
    margin-left: -0.25em;
}

img.nav-logo {
    display: inline;
    height: 2em;
    width: auto;
    vertical-align: -0.65em;
    margin-right: 0.5em;
    filter: var(--icon-filter);
    background-color: transparent !important;
}

/* ==========================================================================
   OpenMoji picker
   ========================================================================== */

.openmoji-picker-field {
    margin-bottom: var(--element-spacing);
}

.openmoji-picker-preview {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2rem;
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
}

.openmoji-picker-preview img.openmoji {
    width: 2rem !important;
    height: 2rem !important;
}

.openmoji-picker-clear {
    border: none;
    background: none;
    color: var(--fg-muted);
    cursor: pointer;
    padding: 0 0.25rem;
    margin: 0;
    box-shadow: none;
    font-size: 1.1rem;
    line-height: 1;
}

.openmoji-picker-search {
    margin-bottom: 0.5rem;
}

.openmoji-picker-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    max-height: 220px;
    overflow-y: auto;
    margin-bottom: 0.5rem;
    border: 1px solid var(--fg-border);
    border-radius: var(--element-radius);
    padding: 4px;
}

.openmoji-picker-grid:empty {
    display: none;
}

.openmoji-picker-btn {
    border: 1px solid transparent;
    background: none;
    padding: 3px;
    border-radius: var(--element-radius);
    cursor: pointer;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    box-shadow: none;
}

.openmoji-picker-btn:hover {
    border-color: var(--fg-border);
    background: var(--fg-ghost);
}

.openmoji-picker-btn img.openmoji {
    width: 1.5rem !important;
    height: 1.5rem !important;
}

/* ==========================================================================
   Button-styled links
   ========================================================================== */

a.btn {
    display: inline-block;
    border: 1px solid;
    border-color: var(--border-n) var(--border-e) var(--border-s) var(--border-w);
    border-radius: var(--element-radius);
    padding: 0.5em 1em;
    color: var(--fg);
    background: linear-gradient(to bottom, var(--bg), var(--fg-ghost));
    font: inherit;
    cursor: pointer;
    margin-bottom: var(--element-spacing);
    box-shadow: 0 1px 2px var(--shadow-color);
    text-decoration: none;
}

a.btn:hover {
    background: linear-gradient(to bottom, var(--fg-ghost), var(--fg-faint));
}

/* Tandem */

.tandem-badge {
    display: inline-block;
    font-size: 0.75rem;
    padding: 0.1em 0.5em;
    border: 1px solid var(--fg-border);
    border-radius: 3px;
    vertical-align: middle;
    color: var(--fg-muted);
}

.content-readonly {
    opacity: 0.7;
}

.proposal-card {
    border: 1px solid var(--fg-border);
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
}

.proposal-card .fg-muted {
    color: var(--fg-muted);
}

.inline-button {
    display: inline;
    background: none;
    border: none;
    color: var(--fg-muted);
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    font-size: inherit;
}

/* ==========================================================================
   Site List Cards (Panel)
   ========================================================================== */

.site-card {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.site-doc-stack {
    position: relative;
    flex-shrink: 0;
    width: 106px;
    height: 148px;
}

.site-doc {
    position: absolute;
    width: 100px;
    height: 141px;
    border-radius: 3px;
    border: 1px solid var(--fg-border);
}

.site-doc--back {
    background-color: var(--fg-ghost);
    top: 6px;
    left: 6px;
    z-index: 0;
}

.site-doc--mid {
    background-color: var(--fg-faint);
    top: 3px;
    left: 3px;
    z-index: 1;
}

.site-doc--front {
    background-color: var(--bg);
    color: var(--fg);
    top: 0;
    left: 0;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 1px 4px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    text-align: center;
}

.site-doc__title {
    font-size: 0.7rem;
    font-weight: bold;
    word-break: break-word;
    line-height: 1.3;
    overflow: hidden;
}

.site-card__body {
    flex: 1;
    min-width: 0;
    padding-top: 0.25rem;
}

.site-actions--disabled {
    color: var(--fg-muted);
}

/* ==========================================================================
   Quick post: CSS-only type tabs, no JavaScript
   ========================================================================== */

.quick-post input[name="post_type"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.quick-post-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 1px solid var(--fg);
    margin-bottom: 1rem;
}

.quick-post-tab {
    padding: 0.4rem 1rem;
    cursor: pointer;
    border: 1px solid transparent;
    border-bottom: none;
    text-decoration: none;
    color: var(--fg);
}

.quick-post-tab.locked {
    opacity: 0.6;
}

/* The radios are off screen, so show focus on the tab bar instead */
.quick-post:has(input[name="post_type"]:focus-visible) .quick-post-tabs {
    outline: 1px dotted var(--fg);
}

.quick-post-field {
    display: none;
}

.quick-post:has(input[name="post_type"][value="text"]:checked) .quick-post-field[data-type="text"],
.quick-post:has(input[name="post_type"][value="image"]:checked) .quick-post-field[data-type="image"],
.quick-post:has(input[name="post_type"][value="embed"]:checked) .quick-post-field[data-type="embed"],
.quick-post:has(input[name="post_type"][value="audio"]:checked) .quick-post-field[data-type="audio"] {
    display: block;
}

.quick-post:has(input[name="post_type"][value="text"]:checked) .quick-post-tab[data-type="text"],
.quick-post:has(input[name="post_type"][value="image"]:checked) .quick-post-tab[data-type="image"],
.quick-post:has(input[name="post_type"][value="embed"]:checked) .quick-post-tab[data-type="embed"],
.quick-post:has(input[name="post_type"][value="audio"]:checked) .quick-post-tab[data-type="audio"] {
    border-color: var(--fg);
    font-weight: bold;
}

/* The caption only means something for uploads */
.quick-post-caption {
    display: none;
}

.quick-post:has(input[name="post_type"][value="image"]:checked) .quick-post-caption,
.quick-post:has(input[name="post_type"][value="audio"]:checked) .quick-post-caption {
    display: block;
}

/* Browsers without :has() support (Firefox < 121, Safari < 15.4, Chrome < 105)
   cannot run the rules above, so .quick-post-field and .quick-post-caption
   would stay hidden with no input visible at all. Show every field instead;
   an ugly fallback beats a page that cannot be used. */
@supports not selector(:has(*)) {
    .quick-post-field, .quick-post-caption {
        display: block;
    }
}

/* The way out to the block editor, kept quieter than the Post button */
.quick-post-longer {
    margin-top: 2rem;
    border-top: 1px solid var(--fg);
    padding-top: 1rem;
}
.quick-post-longer small {
    display: block;
}