/* Storylinn Lightbox (v1.4)
   Locked UI Layer + Scrolling Glass Content
*/

#lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2000;
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease;

    background-color: var(--glass);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}

/* 1. The Scrolling Layer */
#reader-viewport {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 120px 0;
}

#reader-track {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 40px;
}

/* 2. Fixed UI Layer */
#reader-ui {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2100;
}

/* HOME BUTTON (was Back) — high-contrast per theme */
#back-btn {
    position: fixed;
    bottom: 60px;
    pointer-events: auto;

    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--text);

    background: none;
    color: var(--text);

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    transition: opacity var(--transition), transform 0.15s ease;
    -webkit-appearance: none;

    font-size: 0;
    line-height: 0;
    padding: 0;
}

/* Light theme: black button, white icon */
body[data-theme="light"] #back-btn {
    background-color: #000;
    border-color: #000;
    color: #fff;
}

/* Dark theme: white button, black icon */
body[data-theme="dark"] #back-btn {
    background-color: #fff;
    border-color: #fff;
    color: #000;
}

#back-btn::before {
    content: "⌂";
    font-size: 18px;
    line-height: 1;
}

#back-btn:hover {
    opacity: 0.92;
}

#back-btn:active {
    transform: translateX(-50%) scale(0.96);
}

/* SHARE + COPY + NEXT — round, fixed, sitting next to Home */
#share-btn,
#copy-btn,
#next-btn {
    position: fixed;
    bottom: 60px;
    pointer-events: auto;

    width: 40px;
    height: 40px;
    border-radius: 50%;

    border: 1px solid var(--text);
    background: none;
    color: var(--text);

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    transition: opacity var(--transition), transform 0.15s ease;
    -webkit-appearance: none;

    font-size: 18px;
    line-height: 1;
    padding: 0;
}

/* Order: Home, Copy, Share, Next (even spacing) */
#back-btn {
    left: calc(50% - 84px);
    transform: translateX(-50%);
}

#copy-btn {
    left: calc(50% - 28px);
    transform: translateX(-50%);
}

#share-btn {
    left: calc(50% + 28px);
    transform: translateX(-50%);
}

#next-btn {
    left: calc(50% + 84px);
    transform: translateX(-50%);
}

/* Theme inversion to match Home visibility */
body[data-theme="light"] #share-btn,
body[data-theme="light"] #copy-btn,
body[data-theme="light"] #next-btn {
    background-color: #000;
    border-color: #000;
    color: #fff;
}

body[data-theme="dark"] #share-btn,
body[data-theme="dark"] #copy-btn,
body[data-theme="dark"] #next-btn {
    background-color: #fff;
    border-color: #fff;
    color: #000;
}

#share-btn:hover,
#copy-btn:hover,
#next-btn:hover {
    opacity: 0.92;
}

#share-btn:active,
#copy-btn:active,
#next-btn:active {
    transform: translateX(-50%) scale(0.96);
}

#share-btn:disabled,
#copy-btn:disabled,
#next-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

/* LISTEN BUTTON — same style as Auto-reader (inline under title) */
#tts-btn {
    pointer-events: auto;

    width: 40px;
    height: 40px;
    border-radius: 50%;

    border: 1px solid var(--text);
    background: none;
    color: var(--text);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    transition: opacity var(--transition), transform 0.15s ease;
    -webkit-appearance: none;

    font-size: 18px;
    line-height: 1;
    padding: 0;
}

/* Invert to match the icon buttons */
body[data-theme="light"] #tts-btn {
    background-color: #000;
    border-color: #000;
    color: #fff;
}

body[data-theme="dark"] #tts-btn {
    background-color: #fff;
    border-color: #fff;
    color: #000;
}

#tts-btn:hover {
    opacity: 0.92;
}

#tts-btn:active {
    transform: scale(0.96);
}

#tts-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

/* AUTO-READER BUTTON (inline under title, not fixed) */
#auto-btn {
    pointer-events: auto;

    width: 40px;
    height: 40px;
    border-radius: 50%;

    border: 1px solid var(--text);
    background: none;
    color: var(--text);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    transition: opacity var(--transition), transform 0.15s ease;
    -webkit-appearance: none;

    font-size: 18px;
    line-height: 1;
    padding: 0;
}

/* Invert to match the icon buttons */
body[data-theme="light"] #auto-btn {
    background-color: #000;
    border-color: #000;
    color: #fff;
}

body[data-theme="dark"] #auto-btn {
    background-color: #fff;
    border-color: #fff;
    color: #000;
}

/* Active state (bold arrow) */
#auto-btn[aria-pressed="true"] {
    font-weight: 900;
}

#auto-btn:hover {
    opacity: 0.92;
}

#auto-btn:active {
    transform: scale(0.96);
}

#auto-btn:disabled {
    opacity: 0.35;
    cursor: default;
}


/* TEXT SIZE BUTTON (inline under title, same round style as Listen/Auto-reader) */
#textsize-btn {
    pointer-events: auto;

    width: 40px;
    height: 40px;
    border-radius: 50%;

    border: 1px solid var(--text);
    background: none;
    color: var(--text);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    transition: opacity var(--transition), transform 0.15s ease;
    -webkit-appearance: none;

    /* Big "A" when small text is active */
    font-size: 18px !important;
    line-height: 1;
    padding: 0;
}

/* Invert to match the icon buttons */
body[data-theme="light"] #textsize-btn {
    background-color: #000;
    border-color: #000;
    color: #fff;
}

body[data-theme="dark"] #textsize-btn {
    background-color: #fff;
    border-color: #fff;
    color: #000;
}

/* Small "A" when large text is active */
#textsize-btn[aria-pressed="true"] {
    font-size: 14px !important;
}

#textsize-btn:hover {
    opacity: 0.92;
}

#textsize-btn:active {
    transform: scale(0.96);
}

#textsize-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Toast — “Link copied.” (centered, inverted, above everything) */
#toast {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;

    pointer-events: none;

    padding: 10px 14px;
    border-radius: 0;

    font-family: sans-serif;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1;

    box-shadow: none;

    /* Default (ensures visibility even if theme attribute is missing)
       Theme-specific rules below may override this. */
    background: #000;
    color: #fff;
    border: 1px solid #000;
}

/* Inverted per theme */
body[data-theme="light"] #toast {
    background: #000;
    color: #fff;
    border: 1px solid #000;
}

body[data-theme="dark"] #toast {
    background: #fff;
    color: #000;
    border: 1px solid #fff;
}

/* ---------- Reader Header Upgrade (Full-bleed image + Title “selected”) ---------- */
/* Only applies when ThemeEngine wrapped image+title in the first <div> */
#reader-track > div:first-child {
    position: relative;

    /* Full-bleed image */
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);

    border-radius: 0;
    overflow: hidden;

    /* Remove the empty space above the image caused by #reader-viewport padding */
    margin-top: -120px;

    /* Full-bleed header height */
    height: clamp(260px, 56vh, 560px);

    /* Keep spacing below header */
    margin-bottom: 28px;
}

#reader-track > div:first-child .reader-image {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    margin: 0;
    border-radius: 0;
    display: block;
}

/* Title overlay: same width as the article text below, but positioned on the image */
#reader-track > div:first-child h1 {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);

    margin: 0;

    /* Constrain title block to the same reading width as #reader-track */
    max-width: 800px;
    width: calc(100vw - 80px);

    /* Slightly smaller so it fits comfortably at the bottom of the image */
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.5rem, 3.1vw, 2.4rem);
    line-height: 1.08;

    /* “Selected text” effect (background only behind the text lines) */
    display: inline-block;
    padding: 0.18em 0.28em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* Selected-style inversion per theme */
body[data-theme="light"] #reader-track > div:first-child h1 {
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
}

body[data-theme="dark"] #reader-track > div:first-child h1 {
    background: rgba(255, 255, 255, 0.82);
    color: #000;
}

/* ---------- Default Typography & Content ---------- */
/* Default h1 (used when there is no header image wrapper) */
#reader-track > h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 1.1;
    margin-bottom: 20px;
    color: var(--text);
}

/* Default image style (used for non-header images like instruction image) */
.reader-image {
    width: 100%;
    max-height: 50vh;
    object-fit: cover;
    margin-bottom: 40px;
    border-radius: 8px;
}

.reader-text {
    font-family: 'Lora', serif;
    font-size: 18px;
    line-height: 1.55;
    color: var(--text);
}

/* Text size toggle (default: small) */
#lightbox[data-text-size="small"] .reader-text {
    font-size: 18px;
    line-height: 1.55;
}

#lightbox[data-text-size="large"] .reader-text {
    font-size: 21px;
    line-height: 1.7;
}

.reader-text p {
    margin-bottom: 1.5em;
}

.nav-zone {
    display: none;
}

/* Scrollbar */
#reader-viewport::-webkit-scrollbar {
    width: 6px;
}
#reader-viewport::-webkit-scrollbar-track {
    background: transparent;
}
#reader-viewport::-webkit-scrollbar-thumb {
    background: rgba(var(--text-rgb), 0.2);
    border-radius: 10px;
}


/* ---------- Topics & Sources Picker (v1.0) ---------- */
.filters-panel {
    width: 100%;
}

.filters-section {
    margin: 0;
}

.filters-title {
    font-family: 'Lora', serif;
    font-size: 14px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    opacity: 0.7;
    margin: 0 0 10px 0;
}

.filters-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.filter-chip {
    pointer-events: auto;

    border: 1px solid var(--text);
    background: transparent;
    color: var(--text);

    padding: 8px 12px;
    border-radius: 0;

    font-family: 'Lora', serif;
    font-size: 14px;
    line-height: 1;

    cursor: pointer;
    transition: opacity var(--transition);
    -webkit-appearance: none;
}

.filter-chip:hover {
    opacity: 0.9;
}

.filter-chip.is-selected {
    opacity: 1;
}

/* Invert selection to feel like a calm “highlight” */
body[data-theme="light"] .filter-chip.is-selected {
    background: #000;
    border-color: #000;
    color: #fff;
}

body[data-theme="dark"] .filter-chip.is-selected {
    background: #fff;
    border-color: #fff;
    color: #000;
}

.filters-hint {
    margin-top: 10px;
    font-family: 'Lora', serif;
    font-size: 13px;
    opacity: 0.6;
}


/* Footer note in Topics & Sources picker */
.filters-footer {
    margin-top: 18px; /* same spacing rhythm as sections */
}

/* Small bold title above the footer note */
.filters-footer::before {
    content: "Suggest Topics & Sources";
    display: block;

    font-family: 'Lora', serif;
    font-size: 14px;
    font-weight: 700;

    letter-spacing: 0.5px;
    text-transform: uppercase;

    opacity: 0.7;
    margin: 0 0 10px 0;
}


/* ---------- Continuity (About) ---------- */
/* Uses existing typography and tokens; keep it quiet and consistent. */

/* Continuity inputs reuse .filter-chip; ensure inputs look calm (not like buttons). */
/* Make inline “link buttons” feel like text links without changing tokens */


/* Continuity (About) */
.storylinn-continuity-root .meta {
  opacity: 0.75;
  font-size: 13px;
  line-height: 1.55;
}

.storylinn-continuity-root .divider {
  height: 1px;
  background: rgba(255,255,255,0.12);
  margin: 16px 0;
}

.storylinn-continuity-input {
  width: 100%;
  background: transparent;
  border: 0;
  outline: none;
  font: inherit;
  color: inherit;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.storylinn-continuity-input::placeholder {
  opacity: 0.45;
}

.storylinn-continuity-root button.reader-fullstory {
  text-decoration: underline;
}