/* Tokens (base/root.css) are linked once site-wide — see fragments/header.html. */
@import url(animations.css);
/* Canonical text-field look + the shared character counter. Pulled in here so
   every page gets the same input styling without each stylesheet redefining it
   (same reasoning as tag.css below). */
@import url(field.css);
@import url(../component/pagination.css);
@import url(buttons.css);
@import url(badge.css);
/* Canonical .tag chip. Pulled in here so every page gets the same tag
   styling without each stylesheet redefining it. */
@import url(tag.css);
@import url(../component/photo-viewer.css);
@import url(../component/result-header.css);
/* One stacking order for every item page when its two columns collapse:
   Actions, Artist, content, the rest of the sidebar, comments last. */
@import url(item-stack.css);

option{
    color: black;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-main);
    background: var(--gradient-body);
    color: #fff;
    min-height: 100vh;
    overflow-x: hidden;
}

img{
    object-fit: cover;
}

/* Animated background stars */


.container {
    max-width: 1850px;
    margin: 0 auto;
    padding: 3rem 0;
    position: relative;
    z-index: 10;
    width: 90%;
}

.form-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 3rem 0;
    position: relative;
    z-index: 10;
    width: 90%;
}

a{
    text-decoration: inherit;
    color: inherit;
    cursor: pointer;
    display: block;
    /*text-align: center;*/
}

.error-code{
    color: #ffee00;
    padding-left: 20px;
}

/* Marks a form field the submitter may legitimately leave empty. Quiet on purpose: it is a note
   about what is NOT required, so it must not compete with the label it sits beside. */
.optional-hint {
    color: var(--color-text-subtle);
    font-weight: 400;
    font-size: 0.85em;
}

iframe.active {
    opacity: 1;
    visibility: visible;
}

/* Two legacy popup wrappers. They predate .modal-overlay but do the same job,
   so they take the same scrim/blur tokens — a popup must never darken the page
   by a different amount depending on which wrapper it happens to sit in. */
.character-search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--popup-scrim);
    backdrop-filter: var(--popup-scrim-blur);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.event-suggest-overlay {
    color: white;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--popup-scrim);
    backdrop-filter: var(--popup-scrim-blur);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.3s ease;
    overflow-y: auto;
}

.progress-tracker {
    background: var(--overlay-sm);
    padding: 2rem;
    border-radius: var(--radius-lg);
    margin-top: 1rem;
}

.progress-bar {
    width: 100%;
    height: 30px;
    background: var(--overlay-sm);
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 1rem;
    position: relative;
}

.progress-fill {
    height: 100%;
    min-width: 3%;
    background: var(--gradient-primary);
    width: 0%;
    transition: width 0.5s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

/* A finished bar (100%) goes green; everything below stays brand-gradient. */
.progress-fill.is-complete {
    background: var(--gradient-success);
}

#progressSlider { padding-right: 0; padding-left: 0; }


.cmi-toast {
    position: absolute;
    top: calc(100% + 8px);   /* 8px gap below the button */
    transform: translateX(-20%) translateY(-20px);
    opacity: 0;
    background: rgb(57 239 0 / 0.92);
    backdrop-filter: blur(10px);
    padding: 0.9rem 1.8rem;
    border-radius: 12px;
    font-weight: 600;
    transition: transform 0.4s, opacity 0.4s;
    z-index: 9999;
    pointer-events: none;
    white-space: nowrap;
}

.cmi-toast.show {
    transform: translateX(-20%) translateY(0);
    opacity: 1;
}

/* =====================================================================
   RESPONSIVE FIX — global mobile baseline.
   Applies to every page that imports base/common.css. Page-specific
   rules live in their own files under the same "RESPONSIVE FIX" marker,
   so grep for "RESPONSIVE FIX" to find every change.
   Target: usable down to 360px wide. Breakpoints: 1024 / 768 / 480.
   ===================================================================== */

/* Single-line "…" helper for any text that must fit its box width.
   Used by the card components (titles, usernames, subtitles). */
.u-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    max-width: 100%;
    display: block;
}

/* Media never wider than its container. */
img, video, iframe, canvas { max-width: 100%; }

/* RESPONSIVE FIX: was `overflow-wrap: anywhere`, which is why text like
   "Continent" broke letter-by-letter — `anywhere` also reduces every
   word's MIN-CONTENT width to ~1 character, so grid/flex tracks happily
   shrink below the word and the browser splits it at any letter.
   `break-word` still wraps genuinely too-long words but keeps normal
   min-content sizing, so columns can't collapse under the text. */
body { overflow-wrap: break-word; }
pre, code { white-space: pre-wrap; }

@media (max-width: 768px) {
    .container, .form-container {
        width: 94%;
        padding: 1.25rem 0;
    }

    /* 16px inputs prevent iOS Safari from zooming the page on focus. */
    input, select, textarea { font-size: 16px; }

    .cmi-toast { white-space: normal; }
}

@media (max-width: 480px) {
    .container, .form-container { width: 96%; }
    .progress-tracker { padding: 1rem; }
}
/* ── Dates ───────────────────────────────────────────────────────────────────
   Every date on the site is a <time> written by fragments/date.html and re-rendered
   by js/component/date-display.js. These rules only make it behave like the rest of
   the text around it — the element is dropped inside spans and divs that already
   carry their own colour and size (.comment-time, .post-time, .stat-value), and it
   must not fight them.

   `cursor: help` and the dotted underline are the affordance for the tooltip: a
   relative date is lossy ("3 weeks ago" is not a date) and nothing else on the page
   would tell a reader that hovering gives them the exact timestamp. Modes that are
   already showing the full date carry no title attribute, so the [title] selector
   leaves them alone rather than promising a tooltip that never appears. */
.ck-date {
    color: inherit;
    font: inherit;
    white-space: nowrap;
}

.ck-date[title] {
    cursor: help;
    text-decoration: underline dotted transparent;
    text-underline-offset: 0.2em;
    transition: text-decoration-color 0.15s ease;
}

.ck-date[title]:hover,
.ck-date[title]:focus-visible {
    text-decoration-color: currentColor;
}

/* TOUCH: there is no hover on a phone, so both halves of the old design failed
   there - the dotted underline never appeared and the `title` tooltip it was
   advertising could not be opened at all. A tap now swaps the element to the
   exact reading (js/component/date-display.js), and the underline is drawn
   permanently on pointer-less devices so there is something to tap at. */
@media (hover: none) {
    .ck-date[title] {
        cursor: pointer;
        text-decoration-color: currentColor;
    }
}

/* Open: the element is showing the full date and time until it is tapped again
   or the hold expires. It is longer than "1 day ago", so it is allowed to wrap
   rather than push its row sideways. */
.ck-date[data-ck-exact="open"] {
    white-space: normal;
    text-decoration-color: currentColor;
}

/* A date range ("16 Dec – 18 Dec 2025") is one reading, so it may wrap as a unit
   but never in the middle of either end. */
.ck-date-range {
    white-space: normal;
}