/* ============================================================
   FICTION CONVERGENCE / THE WRITERS ROOM
   ============================================================
   Dedicated stylesheet for fiction_convergence.html.

   Captain 2026-04-26: page was rendering as raw text because
   quantum-theme.css does not contain any fc__* classes and no
   fiction_convergence.css existed. The HTML uses 65 fc__-prefixed
   classes; without this file every chart, hero stat row, calendar
   grid, lead-time canvas, sources list and modal renders as a
   plain unstyled list.

   Typography rule (feedback_typography_rule.md): NO font-family
   declarations here - those live in quantum-theme.css only. Use
   --text-sm / --text-med / --text-lg / --text-xlg for size.

   ============================================================ */

/* -------- PAGE WRAP -------- */
.fc__page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
    color: var(--text, #e8e8ff);
    font-size: var(--text-med);
    line-height: 1.6;
}

/* ============================================================
   HERO
   ============================================================ */
.fc__hero {
    text-align: center;
    padding: 2.5rem 1.25rem 1.75rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid rgba(212, 175, 55, 0.18);
}
.fc__hero__kicker {
    font-size: var(--text-sm);
    letter-spacing: 0.18em;
    color: #B89030;
    margin-bottom: 0.5rem;
}
.fc__hero__title {
    font-size: var(--text-xlg);
    font-weight: 700;
    color: #D4AF37;
    letter-spacing: 2px;
    margin: 0 0 0.85rem;
    text-shadow: 0 0 18px rgba(212, 175, 55, 0.25);
}
.fc__hero__sub {
    max-width: 780px;
    margin: 0 auto 1.25rem;
    color: #cfcfcf;
    font-size: var(--text-lg);
    line-height: 1.65;
}
.fc__hero__verdict {
    display: inline-block;
    margin: 0.5rem 0 1.5rem;
    padding: 0.5rem 1.25rem;
    border: 1px solid rgba(212, 175, 55, 0.45);
    border-radius: 999px;
    font-style: italic;
    color: #E0C060;
    letter-spacing: 0.08em;
    background: rgba(212, 175, 55, 0.05);
}
.fc__stat-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    max-width: 920px;
    margin: 1.25rem auto 0;
}
.fc__stat {
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(212, 175, 55, 0.30);
    border-radius: 8px;
    padding: 1rem 0.75rem;
    text-align: center;
    transition: border-color 0.2s, transform 0.2s;
}
.fc__stat:hover {
    border-color: rgba(212, 175, 55, 0.6);
    transform: translateY(-2px);
}
.fc__stat__num {
    display: block;
    font-size: var(--text-xlg);
    font-weight: 700;
    color: #D4AF37;
    letter-spacing: 1px;
}
.fc__stat__label {
    display: block;
    font-size: var(--text-sm);
    color: #999;
    letter-spacing: 0.1em;
    margin-top: 0.25rem;
}

/* ============================================================
   SECTIONS
   ============================================================ */
.fc__section {
    margin: 2.25rem 0;
    padding: 1.5rem 1.25rem;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 10px;
}
.fc__section__head {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(212, 175, 55, 0.18);
}
.fc__section__label {
    font-size: var(--text-sm);
    letter-spacing: 0.18em;
    color: #8B7355;
    margin-bottom: 0.35rem;
}
.fc__section__title {
    font-size: var(--text-xlg);
    font-weight: 700;
    color: #D4AF37;
    letter-spacing: 1.5px;
    margin: 0 0 0.6rem;
}
.fc__section__desc {
    color: #bbb;
    font-size: var(--text-med);
    line-height: 1.6;
    margin: 0;
    max-width: 880px;
}
.fc__divider {
    border: 0;
    border-top: 1px solid rgba(212, 175, 55, 0.20);
    margin: 2rem 0;
}

/* ============================================================
   ESCALATOR (horizontal bar chart, one row per decade)
   ============================================================ */
.fc__escalator {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 0.5rem;
}
.fc__esc-row {
    display: grid;
    grid-template-columns: 64px 1fr 56px auto;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
}
.fc__esc-label {
    font-size: var(--text-sm);
    color: #999;
    text-align: right;
    letter-spacing: 0.05em;
}
.fc__esc-bar-wrap {
    position: relative;
    height: 22px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 3px;
    overflow: hidden;
}
.fc__esc-bar {
    height: 100%;
    width: 0;            /* JS animates width via .style.width = pct + '%' */
    border-radius: 3px;
    transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.fc__esc-bar--past {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.55), rgba(212, 175, 55, 0.85));
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.18);
}
.fc__esc-bar--now {
    background: linear-gradient(90deg, #D4AF37, #FFD86B);
    box-shadow: 0 0 18px rgba(212, 175, 55, 0.5);
}
.fc__esc-bar--cz {
    background: linear-gradient(90deg, rgba(255, 90, 90, 0.7), rgba(255, 140, 80, 0.95));
    box-shadow: 0 0 12px rgba(255, 100, 80, 0.35);
}
.fc__esc-bar--future {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.18), rgba(212, 175, 55, 0.30));
    border: 1px dashed rgba(212, 175, 55, 0.40);
}
.fc__esc-count {
    font-size: var(--text-sm);
    color: #ddd;
    font-weight: 600;
    text-align: right;
}
.fc__esc-now-marker {
    display: inline-block;
    padding: 2px 8px;
    background: #D4AF37;
    color: #000;
    border-radius: 999px;
    font-size: var(--text-sm);
    letter-spacing: 0.15em;
    font-weight: 700;
}

/* ============================================================
   CALENDAR GRID (decade cells)
   ============================================================ */
.fc__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-top: 0.5rem;
}
.fc__cell {
    position: relative;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 8px;
    padding: 0.75rem;
    min-height: 110px;
    cursor: pointer;
    transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
    display: flex;
    flex-direction: column;
}
.fc__cell:hover {
    transform: translateY(-3px);
    border-color: rgba(212, 175, 55, 0.7);
    box-shadow: 0 6px 18px rgba(212, 175, 55, 0.18);
}
.fc__cell:focus { outline: 2px solid #D4AF37; outline-offset: 2px; }
.fc__cell--past    { opacity: 0.95; }
.fc__cell--now     {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.22), rgba(212, 175, 55, 0.08));
    border-color: #D4AF37;
    box-shadow: 0 0 22px rgba(212, 175, 55, 0.35);
}
.fc__cell--cz      {
    background: linear-gradient(135deg, rgba(255, 100, 80, 0.18), rgba(255, 140, 80, 0.05));
    border-color: rgba(255, 120, 80, 0.65);
}
.fc__cell--future  {
    opacity: 0.55;
    background: rgba(0, 0, 0, 0.3);
    border-style: dashed;
}
.fc__cell__label {
    font-size: var(--text-lg);
    font-weight: 700;
    color: #D4AF37;
    letter-spacing: 1px;
}
/* h3.fc__cell__era inherits Cinzel Decorative from quantum-theme.css h3.
   Reset the heading defaults (margin, border, color) so it sits flush.
   Captain 2026-04-26: dropped text-transform:uppercase - all-caps not
   working for her. */
h3.fc__cell__era {
    font-size: var(--text-sm);
    color: #aaa;
    margin: 0 0 1px;
    padding: 0;
    border: 0;
    letter-spacing: 0.04em;
}
.fc__cell__era {
    font-size: var(--text-sm);
    color: #aaa;
    margin-top: 1px;
    letter-spacing: 0.04em;
}
.fc__cell__count {
    margin-top: auto;
    font-size: var(--text-lg);
    color: #fff;
    font-weight: 700;
}
.fc__cell__themes {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 6px;
}
.fc__cell__theme {
    font-size: var(--text-sm);
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(212, 175, 55, 0.12);
    color: #B89030;
    letter-spacing: 0.04em;
}
.fc__cell__now-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 2px 6px;
    background: #D4AF37;
    color: #000;
    font-size: var(--text-sm);
    border-radius: 4px;
    letter-spacing: 0.12em;
    font-weight: 700;
}
.fc__cell__cz-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 2px 6px;
    background: rgba(255, 100, 80, 0.85);
    color: #fff;
    font-size: var(--text-sm);
    border-radius: 4px;
    letter-spacing: 0.12em;
    font-weight: 700;
}

/* ============================================================
   LEAD TIME COLLAPSE (line chart in canvas)
   ============================================================ */
.fc__ltc {
    margin-top: 0.5rem;
}
.fc__ltc-canvas-wrap {
    position: relative;
    width: 100%;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(212, 175, 55, 0.20);
    border-radius: 8px;
    padding: 1rem;
}
#ltc-canvas {
    width: 100% !important;
    height: 320px;
    display: block;
}
.fc__ltc-caption {
    margin-top: 0.85rem;
    text-align: center;
    color: #aaa;
    font-size: var(--text-med);
    font-style: italic;
}

/* ============================================================
   SOURCES
   ============================================================ */
.fc__sources {
    margin: 2.25rem 0 1rem;
    padding: 1.25rem;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(212, 175, 55, 0.18);
    border-radius: 8px;
}
.fc__sources__head {
    font-size: var(--text-med);
    color: #D4AF37;
    letter-spacing: 0.1em;
    margin-bottom: 0.6rem;
}
.fc__sources__list {
    margin: 0;
    padding-left: 1.25rem;
    color: #bbb;
    font-size: var(--text-med);
    line-height: 1.7;
}

/* ============================================================
   MODAL (3-panel triple: prev / center / next decade)
   ============================================================ */
.fc__modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9000;
    padding: 1.5rem;
}
.fc__modal-overlay--open {
    display: flex;
}
.fc__modal {
    position: relative;
    width: 100%;
    max-width: 1280px;
    max-height: 88vh;
    overflow: auto;
    background: rgba(10, 10, 15, 0.97);
    border: 1px solid rgba(212, 175, 55, 0.5);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 0 40px rgba(212, 175, 55, 0.20);
}
.fc__modal__close {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid rgba(212, 175, 55, 0.4);
    color: #D4AF37;
    border-radius: 50%;
    cursor: pointer;
    font-size: var(--text-xlg);
    line-height: 1;
    z-index: 1;
}
.fc__modal__close:hover {
    background: rgba(212, 175, 55, 0.15);
    border-color: #D4AF37;
}
/* Captain 2026-04-26: scrap the 3-column grid - prev/next become a
   breadcrumb row at the top so the body owns the screen.
   No more all-caps anywhere - Captain says it is not working. */
.fc__modal__triple {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.fc__modal__crumbs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.85rem;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(212, 175, 55, 0.18);
    border-radius: 6px;
    flex-wrap: wrap;
}
.fc__modal__crumb {
    font-size: var(--text-med);
    color: #B89030;
    text-decoration: none;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    transition: color 0.18s, background 0.18s;
}
.fc__modal__crumb--prev,
.fc__modal__crumb--next {
    cursor: pointer;
}
.fc__modal__crumb--prev:hover,
.fc__modal__crumb--next:hover {
    color: #D4AF37;
    background: rgba(212, 175, 55, 0.10);
}
.fc__modal__crumb--current {
    color: #D4AF37;
    font-weight: 700;
    font-size: var(--text-lg);
    flex: 1;
    text-align: center;
}
.fc__modal__crumb--disabled {
    color: rgba(139, 115, 85, 0.45);
    cursor: default;
}
.fc__modal__body {
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(212, 175, 55, 0.30);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
}
.fc__modal__era {
    font-size: var(--text-lg);
    color: #D4AF37;
    letter-spacing: 1px;
    margin-bottom: 0.4rem;
}
.fc__modal__count {
    font-size: var(--text-med);
    color: #ccc;
    margin-bottom: 0.6rem;
}
.fc__modal__cz-note {
    font-size: var(--text-sm);
    color: rgba(255, 120, 80, 0.95);
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
}
.fc__modal__narrative {
    color: #ccc;
    font-size: var(--text-med);
    line-height: 1.7;
    margin-bottom: 0.85rem;
}
.fc__modal__events {
    margin: 0;
    padding-left: 1.1rem;
    color: #aaa;
    font-size: var(--text-med);
    line-height: 1.55;
}
.fc__modal__event { margin-bottom: 0.2rem; }

.fc__modal__works-head {
    font-size: var(--text-med);
    color: #D4AF37;
    letter-spacing: 0.1em;
    margin: 0.85rem 0 0.5rem;
    border-bottom: 1px solid rgba(212, 175, 55, 0.18);
    padding-bottom: 0.25rem;
}
.fc__modal__work {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.fc__modal__work__img {
    flex: 0 0 56px;
    width: 56px;
    height: 76px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 4px;
    object-fit: cover;
}
/* Captain 2026-04-26: __body wraps title+meta+preview so they stack
   vertically inside the flex row (img + body). Without this wrapper,
   the description was treated as a fourth flex-row sibling and got
   squeezed to one-word-per-line widths. */
.fc__modal__work__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.fc__modal__work__preview {
    color: #bbb;
    font-size: var(--text-sm);
    line-height: 1.55;
    margin-top: 4px;
}
.fc__modal__work__title {
    font-size: var(--text-med);
    color: #E0C060;
    line-height: 1.2;
    margin-bottom: 2px;
}
.fc__modal__work__meta {
    font-size: var(--text-sm);
    color: #888;
    letter-spacing: 0.04em;
}
.fc__modal__work__link {
    color: #B89030;
    font-size: var(--text-sm);
    text-decoration: none;
}
.fc__modal__work__link:hover { color: #D4AF37; text-decoration: underline; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
    .fc__stat-row { grid-template-columns: repeat(2, 1fr); }
    .fc__grid { grid-template-columns: repeat(3, 1fr); }
    /* Modal already flex column at all sizes (Captain 2026-04-26).
       Just tighten padding on mobile. */
    .fc__modal__body { padding: 1rem 1rem; }
    .fc__modal__crumbs { font-size: var(--text-sm); padding: 0.4rem 0.6rem; }
    .fc__esc-row { grid-template-columns: 56px 1fr 48px auto; gap: 8px; }
}
@media (max-width: 600px) {
    .fc__page { padding: 1rem 0.75rem 3rem; }
    .fc__section { padding: 1rem 0.85rem; }
    .fc__grid { grid-template-columns: repeat(2, 1fr); }
    .fc__cell { min-height: 96px; }
    .fc__esc-row { grid-template-columns: 50px 1fr 44px; }
    .fc__esc-row .fc__esc-now-marker { display: none; }
}