/* Anti‑Feudal America — Styles */
:root{
  --bg: #0f1115;
  --panel: #141823;
  --text: #e8ecf1;
  --muted: #b7c0cb;
  --accent: #5dd3ff;
  --accent-2:#a1ff84;
  --border: #263042;
  --link: #8ecbff;
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
}

*{box-sizing: border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji','Segoe UI Emoji', 'Segoe UI Symbol';
  color: var(--text);
  background: radial-gradient(1200px 800px at 10% -10%, #1b2030 0%, #0f1115 60%, #0c0e11 100%);
  line-height:1.65;
}

.wrap{max-width: 1200px; margin: 0 auto; padding: 0 22px}

.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:static;width:auto;height:auto;padding:8px 12px;background:#fff;color:#000;border-radius:6px}

.site-header{
  position:sticky;top:0;z-index:10;
  background: linear-gradient(180deg, rgba(15,17,21,0.95) 0%, rgba(15,17,21,0.7) 100%);
  backdrop-filter: blur(6px);
  border-bottom:1px solid var(--border);
}
.site-header .wrap{display:flex;flex-direction:column;gap:8px;padding:18px 22px;position:relative}
.site-header h1{margin:0;font-size:28px;letter-spacing:0.3px}
.tagline{margin:0;color:var(--muted);font-weight:400}

/* Header share button */
.header-share{
  position:absolute;right:18px;top:18px;
  border:1px solid var(--border);
  background:#0f1320;
  color:var(--text);
  padding:6px 10px;
  border-radius:8px;
  font-size:16px;
  cursor:pointer;
}
.header-share:hover{ border-color:#2b3952 }

.top-nav{display:flex;gap:14px;flex-wrap:wrap}
.top-nav a{color:var(--link);text-decoration:none;padding:6px 10px;border:1px solid transparent;border-radius:8px}
.top-nav a:hover{border-color:var(--border);background:#111520}

.panel{background: linear-gradient(180deg, #141823 0%, #111521 100%);border:1px solid var(--border);border-radius:14px;padding:20px;margin:28px 0;box-shadow: var(--shadow)}
.panel h2{margin-top:0;font-size:26px}
.section{padding:16px 0;border-top:1px dashed var(--border)}
.section:first-of-type{border-top:none}

blockquote{margin:12px 0 10px;padding:12px 16px;border-left:4px solid var(--accent);background:rgba(93,211,255,0.08);border-radius:8px}

summary{cursor:pointer;display:flex;align-items:center;gap:10px;list-style:none;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:#0f1320;color:var(--text);font-weight:600}
summary::-webkit-details-marker{display:none}

details[open] summary{border-color:#2b3952;box-shadow: inset 0 0 0 1px #1f2a3b}
.essay{padding:12px}
.essay h4{margin-bottom:8px;margin-top:14px;color:var(--accent)}

.btn{appearance:none;border:none;background:linear-gradient(180deg, #5dd3ff, #4996ff);color:#061018;padding:10px 14px;border-radius:10px;font-weight:700;cursor:pointer}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(1px)}
.btn-secondary{background:linear-gradient(180deg, #2b3447, #1b2333);color:#e7eef9;border:1px solid #33405a}

.cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}

.site-footer{margin:34px 0 60px;color:var(--muted);text-align:center}
.site-footer a{color:var(--link)}

@media (prefers-color-scheme: light){
  :root{
    --bg: #f7f9fc; --panel:#ffffff; --text:#12161f; --muted:#4b5b70; --accent:#0d79ff; --border:#e3e8f2; --link:#0d79ff;
  }
  body{background: radial-gradient(1000px 700px at 15% -15%, #f2f6ff 0%, #eef2fb 40%, #f8fbff 100%)}
  .top-nav a:hover{background:#f3f6fc}
  summary{background:#f3f6fc}
}

/* =========================
   LIGHT MODE FIXES
   ========================= */
@media (prefers-color-scheme: light){

  /* Global sanity */
  body{
    background: var(--bg);
    color: var(--text);
  }

  /* Header + nav */
  .site-header{
    background: linear-gradient(
            180deg,
            rgba(248,251,255,0.96) 0%,
            rgba(248,251,255,0.85) 100%
    );
    border-bottom: 1px solid var(--border);
  }

  .top-nav a{
    color: var(--text);
  }

  .top-nav a:hover{
    background: #f3f6fc;
  }

  /* Dark-mode islands → light-mode cards */
  .header-share,
  summary,
  .share-row a,
  .share-row .share-copy,
  section,
  article{
    background: #f4f6fb;
    color: var(--text);
    border-color: var(--border);
  }

  /* Ensure panels don't keep dark gradients in light mode */
  .panel{
    background: linear-gradient(180deg, #ffffff 0%, #f6f8fc 100%);
    border-color: var(--border);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  }

  /* Lighter secondary buttons in light mode */
  .btn-secondary{
    background: linear-gradient(180deg, #f4f6fb, #e9eef7);
    color: #162137;
    border: 1px solid var(--border);
  }

  /* Links */
  a{
    color: var(--link);
  }

  a:visited{
    color: color-mix(in srgb, var(--link) 75%, var(--text));
  }

  /* Muted text should still be readable */
  .muted,
  small{
    color: var(--muted);
  }
}


/* Custom turning caret for collapsible summaries */
summary{position:relative}
summary::before{
  content: '';
  display: inline-block;
  width: 0; height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid var(--muted);
  transition: transform 160ms ease, border-left-color 160ms ease, filter 160ms ease;
}

/* Rotate caret when open */
details[open] > summary::before{
  transform: rotate(90deg);
  border-left-color: var(--accent);
}

/* Improve hover/active feedback */
summary:hover::before{ filter: brightness(1.2); }

/* Magnifying glass indicator before each collapsible section */
summary{ padding-left: 38px; }
summary::after{
  content: '🔍';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  line-height: 1;
  opacity: 0.9;
}

@media (prefers-color-scheme: light){
  summary::after{ opacity: 0.8; }
}


/* Byline alignment inside each summary */
summary .byline{ margin-left:auto; color: var(--muted); font-weight:500; font-size:0.95em; }
summary .summary-title{ flex: 1 1 auto; min-width:0; }

/* Shareability UI */
.permalink{ margin-left:10px; font-weight:700; color: var(--link); text-decoration:none; opacity:0.8 }
.permalink:hover{ opacity:1 }

.share-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:6px 0 10px }
.share-row a, .share-row .share-copy{
  border:1px solid var(--border);
  background:#0f1320;
  color:var(--text);
  text-decoration:none;
  padding:6px 10px;
  border-radius:8px;
  font-weight:600;
}
.share-row a:hover, .share-row .share-copy:hover{ border-color:#2b3952 }

#quote-share-tip{ /* runtime styles mostly set in JS; here just to ensure visibility in print off */ }

/* Print adjustments */
@media print{
  nav, .share-row, .permalink, #quote-share-tip, #print-btn{ display:none !important; }
}


/* Amendment consolidated Text box */
.amendment-text{
  margin: 14px 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  background: rgba(93,211,255,0.06);
  border-radius: 12px;
}
.amendment-text-title{
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.amendment-text-blockquote{
  margin: 0;
  padding: 12px 14px;
  border-left: 4px solid var(--accent);
  background: rgba(93,211,255,0.08);
  border-radius: 8px;
}
.amendment-text-blockquote em{
  font-style: italic;
  display: block;
  color: var(--text);
}

@media (prefers-color-scheme: light){
  .amendment-text{ background: rgba(13,121,255,0.06); }
  .amendment-text-blockquote{ background: rgba(13,121,255,0.08); }
}