/**
 * Calibrated responsive layer — light, non-destructive.
 * Global scale = Chromium zoom from rmrp-responsive.js.
 * This file only: shell fit, no horizontal overflow, soft reflow.
 * Does NOT force overflow:hidden on panels / kill internal scroll.
 */

:root {
    --rmrp-scale: 1;
    --rmrp-sidebar-w: 240px;
    --rmrp-content-pad: 28px;
}

/* ----- Shell: window-bound, no document rubber-band ----- */
html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html.rmrp-scaled {
    /* zoom handles density; keep rem stable */
    font-size: 14px;
}

body {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
    margin: 0;
    box-sizing: border-box;
}

/* Flex shell when page uses classic sidebar layout */
body:has(> .sidebar),
body:has(> .sidebar-wrapper) {
    display: flex;
}

/* ----- Sidebar: readable, scales via zoom, nav can scroll if needed ----- */
body:has(> .sidebar) > .sidebar,
.sidebar {
    flex-shrink: 0;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    box-sizing: border-box;
}

.sidebar-wrapper {
    min-height: 0;
    max-height: 100%;
    box-sizing: border-box;
}

.sidebar-nav-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
}
.sidebar-nav-scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* ----- Main content: fills rest, vertical scroll OK ----- */
.main-content,
.app-page-scroll,
.tr-page,
.ach-scroll,
.profile-page .app-page-scroll,
.content-area,
.notes-app {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Prefer page-level padding from each page; only soft cap width */
.main-content > *,
.app-page-scroll > *,
.section-card,
.panel,
.card,
.tr-card,
.quick-card,
.article-card,
.hero-card,
.account-panel {
    max-width: 100%;
    box-sizing: border-box;
}

/* Grids: don't force 260px min that blows small windows */
.quick-access {
    grid-template-columns: repeat(2, minmax(min(100%, 220px), 1fr));
    max-width: 100%;
}

.articles-grid,
.avatar-grid,
.eq-grid,
.binds-grid,
.ach-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}

/* Shell heights: prefer % over 100vh when zoom is on (avoids double-viewport bugs) */
html.rmrp-scaled body,
html.rmrp-scaled .main-content,
html.rmrp-scaled .content-area,
html.rmrp-scaled .notes-app,
html.rmrp-scaled .timer-page,
html.rmrp-scaled .tr-page,
html.rmrp-scaled .main-wrapper,
html.rmrp-scaled .app-page {
    max-height: 100%;
}

/* Toolbars */
.top-bar,
.page-toolbar,
.tr-header,
.ach-header {
    min-width: 0;
    max-width: 100%;
}

.top-bar > *,
.page-toolbar > * {
    min-width: 0;
}

/* Media */
img,
svg,
video,
canvas {
    max-width: 100%;
}

input,
textarea,
select,
button {
    max-width: 100%;
    box-sizing: border-box;
}

/* Modals: stay in viewport; body of modal may scroll */
.modal-overlay,
.premium-paywall-overlay,
.avatar-crop-overlay {
    box-sizing: border-box;
    padding: 16px;
}

.modal-card,
.premium-paywall-card,
.avatar-crop-card {
    max-width: min(96vw, 720px);
    max-height: min(90vh, 860px);
    overflow-y: auto;
    box-sizing: border-box;
}

/* Soft reflow only when window is genuinely small (before/at min zoom) */
@media (max-width: 1000px), (max-height: 600px) {
    .quick-access {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
    .quick-card {
        height: auto;
        min-height: 180px;
    }
}

@media (max-width: 820px), (max-height: 520px) {
    .quick-access {
        grid-template-columns: 1fr;
    }
    .tr-modes {
        grid-template-columns: 1fr;
    }
    .tr-stats,
    .stat-grid,
    .ach-summary-row {
        grid-template-columns: 1fr 1fr;
    }
}

/* Floating dock: do not force full-height black sidebar column */
body.sidebar-floating {
    overflow: hidden;
}
body.sidebar-floating > .sidebar {
    height: auto !important;
    max-height: none !important;
    background: transparent !important;
    background-color: transparent !important;
    overflow: visible !important;
}
body.sidebar-floating .main-content,
body.sidebar-floating .app-page-scroll {
    /* leave room for bottom dock */
    padding-bottom: 118px;
}

/* Mini App / skipped zoom pages — restore normal document flow */
html[data-rmrp-zoom="off"] {
    overflow: auto;
    height: auto;
}
html[data-rmrp-zoom="off"] body {
    overflow: auto;
    height: auto;
    max-height: none;
}