/* ============================================================ */
/* MOBILE-ARTICLE.CSS — Phone-Only Overrides for Article.html   */
/* Loaded ONLY via: <link href="mobile-article.css"             */
/*                        media="(max-width: 480px)">           */
/* ============================================================ */


/* ========================================= */
/* [BASE]                                    */
/* ========================================= */
html, body {
    font-size: 16px !important;
}

body {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--bg-outside) !important;
}

/* ========================================= */
/* [TERMINAL — Floating terminal on mobile] */
/* ========================================= */
.terminal {
    width: 96vw !important;
    height: 96vh !important;
    height: 96dvh !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.75) !important;
}


/* ========================================= */
/* [TOP BAR]                                 */
/* ========================================= */
.bar {
    padding: 6px 12px;
    min-height: 38px;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    flex-shrink: 0 !important;
}

.window-dots {
    gap: 6px;
}

.window-dot {
    width: 10px;
    height: 10px;
}

.bar-right {
    gap: 6px;
}



.themeToggle {
    width: 1.4em;
    height: 1.4em;
}


/* ========================================= */
/* [CONTENT AREA]                            */
/* ========================================= */
.content {
    padding: 16px 14px !important;
    min-height: 0 !important;
}

.content.fade-in {
    padding: 16px 14px !important;
    min-height: 0 !important;
}

/* Headings */
h1 {
    font-size: 1.3rem !important;
}

h2 {
    font-size: 1.1rem !important;
}

h3 {
    font-size: 0.95rem !important;
}

/* Code blocks */
.code-container {
    padding: 10px 14px;
    border-radius: 12px;
    max-width: 100% !important;
    width: 100% !important;
}

.code-container code,
.code-container pre {
    font-size: 0.75rem !important;
    white-space: pre-wrap !important;
    word-break: break-word;
}

/* Copy button */
.code-container button {
    font-size: 0.65rem;
    padding: 3px 6px;
}

/* Images */
.content img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px;
}

/* Tables */
.content table {
    font-size: 0.75rem;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* ========================================= */
/* [VIEW TAG MODAL]                          */
/* ========================================= */
#viewTagModalOverlay .tag-modal {
    max-width: 90% !important;
    border-radius: 14px !important;
}

#viewTagMessage {
    font-size: 0.8rem !important;
    padding: 8px !important;
}


/* ========================================= */
/* [TAG MODAL (Create)]                      */
/* ========================================= */
#tagModalOverlay .tag-modal {
    max-width: 90% !important;
    border-radius: 14px !important;
}


/* ========================================= */
/* [LOADING / ERROR STATE]                   */
/* ========================================= */
.loading-state {
    gap: 10px;
}

.loading-spinner {
    width: 26px;
    height: 26px;
}

.loading-state span {
    font-size: 0.72rem;
}

.loading-state button {
    padding: 10px 24px;
    font-size: 0.75rem;
}


/* ========================================= */
/* [TAG MARKERS]                             */
/* ========================================= */
.intel-tag-marker {
    transform: scale(0.8);
}


/* ========================================= */
/* [SCROLLBAR]                               */
/* ========================================= */
::-webkit-scrollbar {
    width: 2px !important;
    height: 2px !important;
}

::-webkit-scrollbar-button {
    display: none !important;
}

/* ========================================= */
/* [CHAPTER PLANS - SCROLLING OVERRIDE]      */
/* ========================================= */
.plans-panel,
.plans-panel-content {
    touch-action: pan-x pan-y !important;
    -webkit-overflow-scrolling: touch !important;
}

.timeline-wrapper {
    touch-action: pan-x pan-y !important;
    -webkit-overflow-scrolling: touch !important;
    justify-content: flex-start !important;
    padding: 0 20px !important;
}