/* ----------------- Consolidated index.css (deduped) ----------------- */
/* Single source of theme vars + layered-cake + core layout */
/* Theme variables (merge of cores + layered-cake) */
:root{
  /* Core theme */
  --bg-dark: #000000;
  --text-high: #e6ffff;
  --accent-cyan: #00eaff;
  --accent-cyan-strong: rgba(0,234,255,1);
  --accent-cyan-muted: rgba(0,234,255,0.12);
  --accent-cyan-border: rgba(0,234,255,0.22);
  --accent-cyan-shadow: 0 10px 36px rgba(0,234,255,0.12);
  --accent-blue: #2563eb;
  --accent-red: #ff2b6d;
  --outline-glow: 0 0 22px rgba(0,234,255,0.16);

  /* Layered-cake */
  --layer-bg-odd:  #071017;
  --layer-bg-even: #0b1620;
  --layer-text:    #dbeef6;
  --layer-muted:   #9fb8c2;
  --layer-accent:  #68b7ff;
}

/* Document scroll (single scrollbar) */
html, body {
  height: 100%;
  min-height: 100%;
  overflow-y: auto; /* single page scrollbar */
  overflow-x: hidden;
}

/* Base body layout */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--bg-dark);
  color: var(--text-high);
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Container */
.container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 10px;
  box-sizing: border-box;
  border: 2px solid var(--accent-cyan-border);
  background-color: #111;
  display: flex;
  flex-direction: column;
}

/* --- Force full-width layout (desktop → mobile) --- */
html, body, .container, #main-container, #scrollable-content,
.block, .block > *, .card, .gallery-grid, .gallery-item,
.resource-group, .grid, .grid > div {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Media (images / iframes / video / canvas) full-span & stable */
img, video, canvas {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover;
}

/* Make embeds responsive and give a sensible min-height */
iframe, .truthsocial-embed, .lazy-iframe {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;        /* let CSS control height */
  min-height: 220px !important;   /* reasonable fallback */
  aspect-ratio: 16 / 9 !important;
  display: block !important;
  border: none !important;
}

/* Buttons & anchors behave like full-span blocks */
a.btn, a.fullspan, button > a {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Keep pre readable on narrow viewports */
.layer pre {
  white-space: pre-wrap;
  overflow: auto;
  word-break: break-word;
}

/* ----------------- Layered-cake: full-span layers & media ----------------- */
/* Layer base */
.layer {
  width: 100%;
  box-sizing: border-box;
  padding: 1rem 0;
  margin: 0;
}

/* Alternating dark backgrounds & readable text */
#main-container > .layer:nth-of-type(odd),
#scrollable-content > .layer:nth-of-type(odd) {
  background: var(--layer-bg-odd);
  color: var(--layer-text);
}
#main-container > .layer:nth-of-type(even),
#scrollable-content > .layer:nth-of-type(even) {
  background: var(--layer-bg-even);
  color: var(--layer-text);
}

/* Full-span anchor/button helpers */
a.fullspan,
a.btn.fullspan {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-decoration: none;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
}

/* Images: full width, preserve aspect */
img,
img.fullspan,
a.fullspan img,
a.btn.fullspan img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
  object-fit: cover;
  border-radius: 6px;
}

/* Iframes: responsive, stable aspect */
.layer iframe,
.lazy-iframe,
iframe {
  width: 100%;
  display: block;
  border: none;
  aspect-ratio: 16 / 9;
  min-height: 280px;
  background-color: #000;
}

/* Inline link contrast inside layers (non-button links) */
#scrollable-content a:not(.btn):not(.fullspan) {
  color: var(--layer-accent);
  background: rgba(104,183,255,0.06);
  padding: 0.12rem 0.4rem;
  border-radius: 6px;
  text-decoration: none;
}
#scrollable-content a:not(.btn):not(.fullspan):hover,
#scrollable-content a:not(.btn):not(.fullspan):focus {
  background: rgba(104,183,255,0.12);
  color: color-mix(in srgb, var(--layer-accent) 90%, var(--layer-text));
  transform: translateY(-1px);
}

/* Readable pre formatting for layers */
.layer pre {
  background-color: rgba(255,255,255,0.02);
  color: var(--layer-muted);
  padding: 0.75rem 1rem;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Segoe UI Mono", monospace;
  font-size: 0.95rem;
  line-height: 1.45;
  overflow: auto;
  word-break: break-word;
  max-width: 100%;
}

/* Accessibility focus for fullspan links */
a.fullspan:focus,
a.btn.fullspan:focus {
  outline: 3px solid rgba(11,102,208,0.18);
  outline-offset: 2px;
}

/* Fix overlays/container flow */
.container,
#main-container {
  height: auto !important;
  max-height: none !important;
}
#scrollable-content {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}

/* ----------------- Vote overlay (kept intact) ----------------- */
.vote-overlay {
  position: fixed;
  inset: 0;
  background: transparent;
  background-image: none;
  backdrop-filter: none;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--accent-cyan-border);
}
.vote-overlay::before {
  content: '';
  position: absolute;
  left: -2%; right: -2%; top: -2%; bottom: -2%;
  border: 1px solid rgba(0,234,255,0.05);
  pointer-events: none;
  z-index: 90;
}
.vote-overlay.hidden { display: none !important; }
.vote-overlay-content {
  border: 1px solid var(--accent-cyan-border);
  border-radius: 0.75rem;
  padding: 1.25rem;
  max-width: 50rem;
  width: min(96%, 960px);
  margin: 1rem;
  position: relative;
  overflow: visible;
}

/* Vote styles (kept) */
.vote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; height: 100%; }
.vote-choice { border-width: 2px; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; cursor: pointer; height: 100%; min-height: 6rem; }
.vote-choice:hover { transform: translateY(-2px) scale(1.02); }
.vote-square { width: 64px; height: 64px; border-radius: 8px; background: transparent; box-shadow: none; }
.vote-choice.tapped .vote-checkmark { display:flex; align-items:center; justify-content:center; width:66px; height:66px; border-radius:8px; background:transparent; border:3px solid currentColor; color:currentColor; font-size:2.2rem; }

/* ----------------- Resource hub & cards (kept) ----------------- */
#resource-hub .btn {
  display:flex; justify-content:space-between; align-items:center; width:100%;
  padding:10px 15px; background-color:#0f1416; color:#e8f7fb; text-align:left; text-decoration:none; border-radius:4px; font-size:0.95em; border:1px solid var(--accent-cyan-border);
}
#resource-hub .btn:nth-child(odd) { background-color: #383838; }
.card { border:1px solid rgba(0,0,0,0.35); background-color:#171717; padding:10px; margin:10px 0; cursor:pointer; }

/* ----------------- Misc helpful defaults ----------------- */
.block { border: 1px solid var(--accent-cyan-border); padding: 10px; margin-bottom: 10px; box-shadow: var(--accent-cyan-shadow); }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 10px; padding: 10px 0; }
.gallery-item img { width:100%; height:150px; object-fit:cover; display:block; }

/* Stable embeds defaults */
#renderCanvas, #sodomCanvas { width:100%; aspect-ratio:16/10; height:auto; max-height:25vh; display:block; border-radius:4px; background-color:#000; }

/* Keep iframe fallbacks reasonable */
iframe { width:100%; aspect-ratio:16/9; height:auto; max-height:25vh; display:block; border-radius:4px; background-color:#000; }
/* --- civic-dashboard tile grid restore (surgical) --- */
#civic-dashboard .grid {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(36px, 1fr)) !important; /* 12-col layout */
  gap: 6px !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* reset per-tile forced full-width and provide stable square tiles */
#civic-dashboard .grid > div {
  width: auto !important;           /* undo earlier width:100% */
  max-width: none !important;
  aspect-ratio: 1 / 1 !important;   /* keep tiles square */
  min-height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  user-select: none !important;
}

/* visual styles for empty vs state tiles */
#civic-dashboard .grid > .o {
  background: rgba(255,255,255,0.04) !important;
  color: rgba(255,255,255,0.18) !important;
  border: 1px solid rgba(255,255,255,0.03) !important;
}
#civic-dashboard .grid > .x {
  background: linear-gradient(180deg, rgba(104,183,255,0.12), rgba(68,140,200,0.06)) !important;
  color: var(--layer-text, #dbeef6) !important;
  border: 1px solid rgba(68,140,200,0.12) !important;
}
#civic-dashboard .grid > .x:focus,
#civic-dashboard .grid > .x:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  outline: 2px solid rgba(104,183,255,0.18) !important;
}

/* ensure grid children do not create an internal scrollbar */
#civic-dashboard, #civic-dashboard .grid { overflow: visible !important; }
/* --- High-Contrast "Night sky" theme (opt-in via body.hc-night-sky) --- */
body.hc-night-sky {
  --bg-dark:         #000000;
  --text-high:       #ffffff;
  --layer-bg-odd:    #000000;
  --layer-bg-even:   #060406;
  --layer-text:      #ffffff;
  --layer-muted:     #bfbfbf;
  --layer-accent:    #6a5cff; /* purple accent */
  --hc-highlight:    #ffd400; /* yellow outline/highlight */
  --accent-cyan-border: #ffd400;

  background-color: var(--bg-dark) !important;
  color: var(--text-high) !important;
}

/* container / panels */
body.hc-night-sky .container,
body.hc-night-sky .vote-overlay-content {
  background-color: #070707 !important;
  border-color: var(--accent-cyan-border) !important;
}

/* links, buttons, nav */
body.hc-night-sky a,
body.hc-night-sky a:visited {
  color: var(--layer-accent) !important;
  text-decoration: underline !important;
}
body.hc-night-sky a.fullspan,
body.hc-night-sky a.btn.fullspan,
body.hc-night-sky .btn {
  color: var(--layer-text) !important;
  border: 2px solid var(--hc-highlight) !important;
  background: transparent !important;
}

/* focus / keyboard outlines — very visible */
body.hc-night-sky *:focus {
  outline: 3px solid var(--hc-highlight) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* pre / muted text */
body.hc-night-sky .layer pre,
body.hc-night-sky .layer .muted {
  color: var(--layer-muted) !important;
  background: rgba(255,255,255,0.02) !important;
  border-color: rgba(255,255,255,0.04) !important;
}

/* make the vote overlay title / callouts pop on high contrast */
body.hc-night-sky .vote-overlay-content h1,
body.hc-night-sky .vote-overlay-content h2 {
  color: var(--hc-highlight) !important;
}

/* ensure grid / civic tiles remain visible */
body.hc-night-sky #civic-dashboard .grid > div.o {
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.16) !important;
}
body.hc-night-sky #civic-dashboard .grid > div.x {
  background: linear-gradient(180deg, rgba(106,92,255,0.12), rgba(106,92,255,0.04)) !important;
  border-color: rgba(106,92,255,0.18) !important;
}

/* keep everything readable & high-contrast on small screens too */
body.hc-night-sky img, body.hc-night-sky iframe, body.hc-night-sky canvas {
  filter: none !important;
}

/* --- Performance: disable hover/transition effects (keeps focus outlines) --- */
/* Globally stop transitions/animations that can cost CPU on hover/scroll */
*,
*::before,
*::after {
  transition: none !important;
  animation: none !important;
  will-change: auto !important;
}

/* Neutralize hover-only visual changes (transforms, shadows, background shifts) */
a:hover,
a.btn:hover,
button:hover,
button .btn:hover,
.card:hover,
.vote-choice:hover,
.vote-choice.tapped:hover,
#civic-dashboard .grid > div:hover,
#civic-dashboard .grid > .x:hover,
#civic-dashboard .grid > .o:hover,
.gallery-item:hover,
.gallery-item img:hover,
.layer pre:hover {
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
  background-image: none !important;
  background-color: inherit !important;
}

/* Remove tiny movement/translate on focusable interactive :hover rules but keep :focus outlines */
#civic-dashboard .grid > .x:focus,
#civic-dashboard .grid > .o:focus,
a:focus,
button:focus,
input:focus,
textarea:focus {
  /* preserve visible focus ring, but remove any transition */
  transition: none !important;
  animation: none !important;
}

/* Reduce pointer-sensor work by avoiding hover media queries on touch devices */
@media (hover: none), (pointer: coarse) {
  a:hover,
  button:hover,
  .card:hover,
  .vote-choice:hover,
  #civic-dashboard .grid > div:hover {
    /* no-op on touch */
    transform: none !important;
    box-shadow: none !important;
  }
}

/* --- Surgical: remove all box/text/filter shadows (override) --- */
:root {
  --accent-cyan-shadow: none !important;
  --outline-glow: none !important;
}

/* Neutralize shadows globally */
*,
*::before,
*::after {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

/* Specific overrides for known elements that previously used shadows */
.block,
.vote-overlay::before,
.vote-overlay_content,
.vote-choice,
.vote-choice.tapped .vote-checkmark,
.card,
.gallery-item,
.gallery-item img,
#civic-dashboard .grid > .x,
#civic-dashboard .grid > .x:focus,
#civic-dashboard .grid > .x:hover,
a.fullspan,
a.btn.fullspan,
button,
button:focus {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

/* ensure no shadows from CSS variables used elsewhere */
[style*="box-shadow"],
[style*="text-shadow"] {
  box-shadow: none !important;
  text-shadow: none !important;
}

/* --- Single global scrollbar: remove internal scroll panes (surgical) --- */
html, body {
  height: 100%;
  min-height: 100%;
  overflow-y: auto; /* single page scrollbar */
  overflow-x: hidden;
}

/* undo any internal scroll trapping */
#main-container,
.container,
#scrollable-content,
.content,
.panel,
.vote-overlay-content {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
}

/* ensure fixed overlays don't create scrollbars and float above content */
.vote-overlay,
#vote-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  overflow: visible !important;
}

/* hide residual inner scrollbars (Chrome/WebKit + Firefox) */
#main-container::-webkit-scrollbar,
.container::-webkit-scrollbar,
#scrollable-content::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}
#main-container,
.container,
#scrollable-content { scrollbar-width: none !important; -ms-overflow-style: none !important; }


/* --- Force full-width layout (desktop → mobile) --- */
/* Removed html, body from this selector to avoid forcing the document root into full-span rules that can create duplicate scrollbars */
.container, #main-container, #scrollable-content,
.block, .block > *, .card, .gallery-grid, .gallery-item,
.resource-group, .grid, .grid > div {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}


/* --- Enforce single global scrollbar (html only) --- */
/* Put this at the end of the file as a surgical override */
html {
  height: 100%;
  overflow-y: auto !important;    /* document scrollbar only */
  overflow-x: hidden !important;
}
body {
  height: auto !important;
  min-height: 100% !important;
  overflow: visible !important;   /* let html handle scrolling */
}

/* Prevent accidental full-viewport children from creating second scrollbars */
*:not(html):not(body) {
  max-height: none !important;
  overflow: visible !important;
}