/*
 * Site foundation: layout wrappers, sections and panel shells.
 * Extracted from legacy shell core on 2026-04-07.
 */

/* Layout */
/* Center the main content on wide screens while keeping the background full-bleed */
.wrap{ width: 100%; max-width: var(--page-max-w); margin: var(--page-gap-top) auto var(--page-gap-bottom); padding: 0 var(--page-pad-x); position: relative; z-index: 1;
  flex: 1 0 auto;
  /* Phase 5: protect against long unbroken strings causing page-level horizontal scroll */
  overflow-wrap: anywhere;
}
@media (max-width: 520px){
  .wrap{ width: 100%; }
}
.grid{ display:grid; grid-template-columns: minmax(0, 1fr) var(--sidebar-w); gap: var(--grid-gap); align-items:start; }
/* Responsive layout modes (stable):
   - Home: keep sidebar visible longer (tablet landscape), collapse only on mobile
   - Other pages: collapse earlier to prevent narrow content
*/
@media (max-width: 980px){ html:not(.page-home) .grid{ grid-template-columns: 1fr; } }
/* Home: collapse a bit earlier for tablet portrait (better readability) */
@media (max-width: 920px){ html.page-home .grid{ grid-template-columns: 1fr; } }

.stack{ display:flex; flex-direction:column; gap: var(--stack-gap); }

/* Section utilities (Stage 3) */
.section{ display:flex; flex-direction:column; gap: 10px; }
.section__head{ display:flex; align-items:flex-end; justify-content:space-between; gap: 12px; }
.section__title{ font-size: 18px; font-weight: 1000; letter-spacing: .2px; }
.section__kicker{ font-size: 12px; color: var(--text700); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.section__actions{ display:flex; gap: 10px; align-items:center; flex-wrap:wrap; }

/* Panel */
.panel{
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  box-shadow: var(--panel-shadow);
  border-radius: var(--panel-radius);
  overflow:hidden;
}
.panel__head{
  display:flex;
  justify-content:space-between;
   align-items:flex-end;
  gap:12px;
  padding: var(--panel-head-pad-y) var(--panel-head-pad-x);
  border-bottom: 1px solid var(--panel-head-border);
  background: var(--panel-head-bg);
}
.panel__actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }


/* Sidebar: compact refresh button */
#monitor-refresh{
  padding: 7px 10px;
  border-radius: 12px;
  line-height: 1;
}
.h1{ margin:0 0 6px; font-size:20px; font-weight:950; letter-spacing:.2px; }

.panel-head{
  display:flex;
  justify-content:space-between;
   align-items:flex-end;
  gap: 12px;
  padding: var(--panel-head-pad-y) var(--panel-head-pad-x);
  border-bottom: 1px solid var(--panel-head-border);
  background: var(--panel-head-bg);
}
.panel-title{ display:flex; align-items:center; gap:10px; font-weight: 950; letter-spacing:.2px; font-size: 15px; text-transform:none; }
.panel-title .bar{ display:inline-block; width: 10px; height: 10px; background: var(--accent); border-radius: 3px; box-shadow: 0 0 0 2px rgba(240,140,40,.12); flex:0 0 auto; }
.panel-body{ padding: var(--panel-pad); }
.panel-foot{ margin-top: 12px; display:flex; justify-content:center; }