/* gen-mono.css (neutered, layout-only)
   Purpose: provide grids, layout regions, spacing and responsive utilities
   WITHOUT overriding any theme colors, variables, or component skins.

   Intentionally omitted selectors to avoid collisions:
   - :root, body, a, .panel, .card, .badge, input/textarea/select, .button,
     .navbar, .footer, footer, footer.app-footer
*/

/* Base structural helpers (safe) */
html, body { height: 100%; }
* { box-sizing: border-box; }

/* App shell (no colors, no borders) */
.app {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto; /* header, content, footer */
}

/* Layout regions (padding only, no color/border) */
.header, .content, .footer, .sidebar {
  padding: 12px;
}

/* Sticky header (no background/border) */
.header.is-sticky {
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Content area with optional sidebar layout */
.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 900px) {
  .layout.has-sidebar {
    grid-template-columns: 260px 1fr;  /* sidebar + main */
  }
  .layout.has-sidebar.sidebar-right {
    grid-template-columns: 1fr 260px;  /* main + sidebar */
  }
}

/* Sidebar sizing helpers */
.sidebar.is-narrow { width: 220px; }
.sidebar.is-wide   { width: 320px; }

/* Container (no theme vars, just widths) */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 12px;
}

.container.narrow  { max-width: 860px; }
.container.wide    { max-width: 1440px; }

/* Grid utilities (structure only) */
.grid { display: grid; gap: 12px; }
.grid.xs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.sm { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.md { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.lg { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 599px){
  .grid.responsive { grid-template-columns: repeat(1, minmax(0,1fr)); }
}
@media (min-width: 600px) and (max-width: 959px){
  .grid.responsive { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 960px) and (max-width: 1279px){
  .grid.responsive { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (min-width: 1280px){
  .grid.responsive { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* Flex utilities (structure only) */
.row { display: flex; gap: 12px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.row.nowrap { flex-wrap: nowrap; }
.row.center { justify-content: center; }
.row.between { justify-content: space-between; }
.row.end { justify-content: flex-end; }

.col { flex: 1 1 0; min-width: 0; }
.col.auto { flex: 0 0 auto; }
.col.grow { flex: 1 0 auto; }
.col.shrink { flex: 0 1 auto; }

/* Simple responsive show/hide */
.hide-on-mobile { display: none !important; }
@media (min-width: 700px){ .hide-on-mobile { display: initial !important; } }

.show-on-mobile { display: initial !important; }
@media (min-width: 700px){ .show-on-mobile { display: none !important; } }

/* Spacing utilities (rem-based, no theme vars) */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 0.75rem !important; }
.mt-4 { margin-top: 1rem !important; }
.mt-6 { margin-top: 1.5rem !important; }
.mt-8 { margin-top: 2rem !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 0.75rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.mb-6 { margin-bottom: 1.5rem !important; }
.mb-8 { margin-bottom: 2rem !important; }

.my-2 { margin-block: 0.5rem !important; }
.my-4 { margin-block: 1rem !important; }
.mx-auto { margin-inline: auto !important; }

.pt-0 { padding-top: 0 !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-4 { padding-top: 1rem !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-4 { padding-bottom: 1rem !important; }

.p-0  { padding: 0 !important; }
.p-2  { padding: 0.5rem !important; }
.p-3  { padding: 0.75rem !important; }
.p-4  { padding: 1rem !important; }
.p-6  { padding: 1.5rem !important; }

.px-2 { padding-inline: 0.5rem !important; }
.px-4 { padding-inline: 1rem !important; }
.py-2 { padding-block: 0.5rem !important; }
.py-4 { padding-block: 1rem !important; }

/* Width/height utilities */
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.min-h-screen { min-height: 100dvh !important; }

/* Overflow utilities */
.overflow-auto { overflow: auto !important; }
.overflow-hidden { overflow: hidden !important; }

/* Z-index helpers */
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-50 { z-index: 50; }

/* Visually hidden (a11y helper) */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Simple divider (unskinned) */
.hr, .divider {
  height: 1px;
  width: 100%;
  background: currentColor;       /* uses current text color from theme */
  opacity: 0.15;                  /* gentle, but themed via text color */
}

/* Media block (image + content) */
.media {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
}
.media.rev { grid-template-columns: 1fr auto; }

/* Utility for max content width on prose */
.prose { max-width: 70ch; }

/* Clamp utility */
.clamp-1, .line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clamp-2, .line-clamp-2 { -webkit-line-clamp: 2; }
.clamp-3, .line-clamp-3 { -webkit-line-clamp: 3; }