@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* Global Box Sizing prevents horizontal scrolling on mobile */
* { box-sizing: border-box; }

:root {
  --bg-base: #0a0a0a;
  --bg-surface: #121212;
  --bg-elevated: #1a1a1a;
  --accent: #1ed760;
  --danger: #ff4b4b;
  --text-main: #ffffff;
  --text-muted: #aaaaaa;
  --border: #222222;
  --radius: 8px;
}

body {
  background-color: var(--bg-base);
  color: var(--text-main);
  font-family: 'Inter', -apple-system, sans-serif;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  width: 100vw;
  overflow-x: hidden;
}

.hidden { display: none !important; }

/* Navigation */
.top-bar {
  position: sticky;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: rgba(10, 10, 10, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  z-index: 100;
}

.nav-links { display: flex; gap: 8px; }
.nav-links button { background: transparent; color: var(--text-muted); padding: 8px 12px; font-size: 0.9rem; border-radius: 40px; white-space: nowrap; border: none; cursor: pointer; font-weight: 600; }
.nav-links button.active { background: var(--accent); color: black; font-weight: 800; }
#lad-name-display { white-space: nowrap; font-size: 0.9rem; }

@media (max-width: 768px) {
  .top-bar { flex-direction: column; align-items: stretch; gap: 15px; padding: 15px; }
  #lad-name-display { text-align: right; font-size: 0.85rem; width: 100%; margin-bottom: -5px; }
  .nav-links { overflow-x: auto; white-space: nowrap; padding-bottom: 5px; justify-content: flex-start; }
}

/* Page Containers */
.constitution-panel { width: 100%; max-width: 800px; padding: 30px 15px; margin: 0 auto; }
.standalone-form-container { background: var(--bg-surface); padding: 30px; border-radius: 12px; border: 1px solid var(--border); max-width: 600px; margin: 0 auto; }

/* Content Tiles */
.proposal-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px; padding: 24px; margin-bottom: 20px; text-align: left; overflow-wrap: anywhere; word-wrap: break-word; }

.rule-comparison { display: flex; flex-direction: column; gap: 12px; margin: 15px 0; }
.rule-block { background: #000; border: 1px solid #222; border-radius: 8px; padding: 15px; }
.rule-block-new { border-left: 3px solid var(--accent); }
.rule-block-old { border-left: 3px solid var(--danger); opacity: 0.7; }
.rule-block-label { display: block; font-size: 0.7rem; text-transform: uppercase; font-weight: 800; letter-spacing: 1px; margin-bottom: 8px; }
.rule-block-text { color: #fff; font-size: 0.95rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }

.provision-text { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #333; color: var(--text-muted); font-size: 0.85rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }

/* Constitution Accordions (STRICT CHILD SELECTORS '>' PREVENT GREEN BUG) */
details.article-accordion { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
details.article-accordion > summary { 
  padding: 20px 24px; 
  font-weight: 800; 
  font-size: 1.45rem; 
  cursor: pointer; 
  color: var(--accent); 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  list-style: none; 
}
details.article-accordion > summary::-webkit-details-marker { display: none; }
details.article-accordion > summary::after { content: '▼'; font-size: 0.8rem; color: var(--text-muted); transition: transform 0.2s ease; }
details[open].article-accordion > summary::after { transform: rotate(180deg); color: var(--accent); }

/* Update this block to include pre-wrap */
.article-content { 
  padding: 0 24px 10px 24px; 
  white-space: pre-wrap; /* This forces the browser to show new lines */
}

/* Nested Statute Accordions */
.statute-accordion { border-top: 1px solid #222; overflow-wrap: anywhere; }
.statute-accordion > summary { padding: 15px 0; color: #fff !important; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; }
.statute-accordion > summary::-webkit-details-marker { display: none; }
.statute-accordion > summary::after { content: '▼'; font-size: 0.7rem; color: #555; margin-top: 4px; transition: transform 0.2s; }
.statute-accordion[open] > summary::after { transform: rotate(180deg); color: var(--accent); }
.statute-accordion[style*="pointer-events:none"] > summary::after { content: ''; }

.statute-item { padding: 15px 0; border-top: 1px solid #222; color: #fff; word-break: break-word; overflow-wrap: anywhere; }

/* Form Elements */
input, select, textarea { background: #000; border: 1px solid var(--border); color: white; padding: 12px; border-radius: var(--radius); margin-bottom: 1rem; width: 100%; font-family: inherit; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }

/* Buttons */
button { background-color: var(--accent); color: black; border: none; padding: 12px 24px; border-radius: 40px; cursor: pointer; font-weight: 800; transition: all 0.2s ease; }
button:hover { transform: scale(1.02); filter: brightness(1.1); }
.vote-controls { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; border-top: 1px solid var(--border); padding-top: 20px; }
.vote-btn { border-radius: 8px; padding: 10px 20px; color: white; border: 2px solid transparent; font-weight: 600; opacity: 1; cursor: pointer; background: transparent; }
.btn-mine { background-color: #166534; }
.btn-yours { background-color: #991b1b; }
.btn-mine.active-vote { background-color: #22c55e; border-color: white; }
.btn-yours.active-vote { background-color: #ef4444; border-color: white; }