/* Feed Container */
.feed-container {
    position: relative;
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    z-index: 10;
}

.feed-container::-webkit-scrollbar { display: none; }

/* Individual Article Slide */
.tron-slide {
    min-width: 100vw;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: calc(env(safe-area-inset-top, 10px) + 8px) 16px calc(env(safe-area-inset-bottom, 10px) + 4px) 16px;
    position: relative;
    flex-shrink: 0;
}

/* Header Top HUD */
.hud-top {
    width: 100%;
    max-width: 720px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 42px;
    z-index: 50;
    flex-shrink: 0;
}

.brand-mark {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: 2px;
    color: var(--neon-cyan);
    text-shadow: 0 0 10px var(--neon-cyan);
    user-select: none;
}

.hud-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hud-btn {
    background: var(--dock-bg);
    border: 1.5px solid var(--neon-cyan);
    border-radius: 50%;
    width: 36px; height: 36px;
    color: var(--neon-cyan);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.25);
    transition: all 0.2s ease;
}

.hud-btn svg { stroke: currentColor; }
.hud-btn:hover { box-shadow: 0 0 15px var(--neon-cyan); }
.hud-btn:active { transform: scale(0.9); border-color: var(--neon-pink); color: var(--neon-pink); }

/* Full-Height Article Reading Viewport */
.article-viewport {
    width: 100%;
    max-width: 720px;
    flex: 1;
    height: calc(100dvh - 54px);
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px;
    position: relative;
    z-index: 10;
}

.article-viewport::-webkit-scrollbar { width: 4px; }
.article-viewport::-webkit-scrollbar-thumb {
    background: var(--neon-cyan);
    border-radius: 4px;
}

.article-header {
    margin-bottom: 16px;
    flex-shrink: 0;
}

.neon-title {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(1.4rem, 5.5vw, 2.1rem);
    color: var(--text-title);
    text-shadow: 0 0 8px var(--neon-cyan), 0 0 18px var(--neon-cyan);
    margin-bottom: 6px;
    line-height: 1.2;
}

.neon-sub {
    color: var(--text-sub);
    font-size: 0.92rem;
    font-weight: bold;
    margin-bottom: 8px;
    text-shadow: 0 0 8px rgba(255, 0, 85, 0.6);
}

.article-tags {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.82rem;
    color: var(--neon-cyan);
    margin-bottom: 16px;
    letter-spacing: 0.5px;
}

.article-content {
    font-size: clamp(0.92rem, 3.6vw, 1.04rem);
    line-height: 1.55;
    padding-bottom: 70px;
}

.tron-p { margin-bottom: 14px; }
.cyan-highlight { color: var(--neon-cyan); text-shadow: 0 0 6px var(--neon-cyan); }

.tron-list { list-style: none; margin: 12px 0; }
.tron-list li {
    margin-bottom: 8px;
    position: relative;
    padding-left: 18px;
    line-height: 1.45;
}

.tron-list li::before {
    content: "▹";
    position: absolute;
    left: 0;
    color: var(--neon-green);
    font-weight: bold;
    text-shadow: 0 0 5px var(--neon-green);
}

.unc-quote {
    margin: 16px 0;
    padding: 12px 16px;
    border-left: 3px solid var(--quote-border);
    background: var(--quote-bg);
    color: var(--quote-text);
    font-style: italic;
    font-size: clamp(0.85rem, 3.2vw, 0.95rem);
    line-height: 1.45;
    border-radius: 0 6px 6px 0;
}

/* Stamped Author Meta at the Bottom of Content */
.article-footer-meta {
    margin-top: 36px;
    padding-top: 14px;
    border-top: 1px solid var(--grid-line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
    color: var(--meta-color);
    letter-spacing: 0.5px;
}

/* Floating Action Dock */
.action-dock {
    position: fixed;
    right: 14px;
    bottom: calc(env(safe-area-inset-bottom, 16px) + 20px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 20;
}

.dock-btn {
    background: var(--dock-bg);
    border: 1px solid var(--neon-cyan);
    border-radius: 50%;
    width: 44px; height: 44px;
    color: var(--neon-cyan);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.25);
    transition: all 0.15s ease;
}

.dock-btn svg { stroke: currentColor; }
.dock-btn:hover { box-shadow: 0 0 18px var(--neon-cyan); }
.dock-btn:active { transform: scale(0.88); border-color: var(--neon-pink); color: var(--neon-pink); }

/* Global Readable Mode Typography */
body.readable-mode,
body.readable-mode .article-content,
body.readable-mode .tron-p,
body.readable-mode .tron-list li,
body.readable-mode .unc-quote,
body.readable-mode .article-tags,
body.readable-mode .article-footer-meta,
body.readable-mode .modal-body,
body.readable-mode .consent-text {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
    letter-spacing: 0.15px !important;
    text-shadow: none !important;
}