/* briefing-layout.css — top-level Phase 7 two-column layout:
   sidebar (sticky, full-height) + main pane. The sidebar's nav
   internals live in briefing-sidebar.css; this file owns just the
   structural layout. */

.app{display:flex;min-height:100vh}

/* Phase 36 follow-up — padding-top + padding-bottom both zeroed so
   the sticky .sidebar-header can pin flush against the top edge and
   the sticky .sidebar-footer can pin flush against the bottom edge.
   Header and footer each carry their own vertical padding internally. */
.sidebar{width:325px;flex:0 0 325px;background:#fff;border-right:1px solid #d9dce6;position:sticky;top:0;height:100vh;overflow-y:auto;padding:0 10px;display:flex;flex-direction:column;gap:10px;z-index:50}

.main{flex:1;min-width:0;padding:24px 32px}

/* Header is now an invisible inline container — no sticky pin, no
   background, no border. The mobile sidebar toggle and the
   stale-banner still render inside it when relevant. */
.main-header{display:contents}
.main-header .generated{font-size:11px;color:#8a93a6;margin-top:4px}
/* "Generated …" timestamps were visually noisy in the flat Phase 7
   layout (1 page-level + 4 per-region). Hide them in the UI but
   keep the elements so .generated[data-iso] still feeds
   getGeneratedAt() for the stale-banner check on file:// loads. */
.generated, .col-generated{display:none}

/* Region-panel wrappers stay in HTML for semantic grouping but don't
   participate in layout — their topic-sections become flat children
   of .content. */
.region-panel{display:contents}

.content{max-width:900px;margin:0;padding:0 0 24px;font-family:'Slabo 13px',Georgia,serif}

/* When the user has filtered to a single region or section via the
   sidebar, both the per-region header (flag + "France") and the
   per-section topic header (e.g. "🤖 Tech & AI") duplicate what the
   sidebar already says — hide both. */
body[data-filter^="region:"] .topic-header,
body[data-filter^="section:"] .topic-header,
body[data-filter^="region:"] .region-col-header,
body[data-filter^="section:"] .region-col-header{display:none}

/* ───────── Phase 50c — mobile shell (≤800px) ─────────
   The sidebar + ☰ hamburger are RETIRED on mobile. Primary nav now lives in
   the sticky frosted .mobile-chrome (relocated header + News/Manga/Comics/
   Settings tabs + filter chips) built by briefing/mobile-nav.js — see
   briefing-mobile-nav.css. Desktop (>800px) is unchanged. */
@media (max-width: 800px) {
  .sidebar{ display:none; }
  .sidebar-toggle{ display:none; }
  .main-header{ display:none; }
  /* No top padding — .mobile-chrome sits flush at the very top.
     Phase 127 follow-up — tighter side gutter on mobile (was 16px) so the
     library/grid reclaim horizontal space; inner sections sit flush to it. */
  .main{ padding:0 12px 14px; }
  .content{ max-width:100%; }
}