/* Base theme tokens */
:root{
  --bg: #ffffff;
  --fg: #111111;
  --muted: #5b616e;
  --rule: #e5e7eb;
  --link: #0b5bd3;
  --accent: #007acc; /* default; updates by section */
  --code-bg: #f6f8fa;
  --shadow: 0 8px 24px rgba(0,0,0,0.08);
  --header-h: 64px; /* will be updated by JS */
  --chip-bg: color-mix(in hsl, var(--bg) 86%, white 14%);
}

[data-theme="dark"]{
  --bg: #0f1216;
  --fg: #e6e6e6;
  --muted: #a3adbb;
  --rule: #23272e;
  --link: #88b5ff;
  --accent: #4da3ff;
  --code-bg: #161a22;
  --shadow: 0 8px 24px rgba(0,0,0,0.4);
  --chip-bg: color-mix(in hsl, var(--bg) 86%, black 14%);
}

/* Essentials */
*{box-sizing:border-box}
html,body{
  height:100%;
  overflow-x:hidden;
}
body{
  margin:0; color:var(--fg); background:var(--bg);
  font: 16px/1.7 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; height:auto;}
hr{border:0; border-top:1px solid var(--rule); margin:2rem 0}

/* Skip link */
.skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{position:fixed; left:16px; top:10px; width:auto; height:auto; padding:8px 10px; background:var(--chip-bg); color:var(--fg); border:1px solid var(--rule); border-radius:8px; z-index:10000}

/* Header */
.site-header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.2) blur(8px); background:color-mix(in hsl, var(--bg) 80%, transparent); border-bottom:1px solid var(--rule)}
.site-header .wrap{max-width:1100px; margin:0 auto; padding:10px 20px; display:flex; align-items:center; gap:12px}
.brand{font-weight:700; letter-spacing:0.2px}
.primary{display:flex; gap:14px; margin-left:20px}
.nav-link{color:var(--muted); padding:6px 4px; border-radius:6px}
.nav-link:hover{color:var(--fg); background:color-mix(in hsl, var(--bg) 94%, white 6%)}
.nav-link.active{color:var(--fg); background:color-mix(in hsl, var(--bg) 90%, white 10%)}
.actions{margin-left:auto; display:flex; gap:8px; align-items:center}
.menu-toggle{display:none; align-items:center; gap:8px; font-weight:600}
.menu-toggle .hamburger{display:inline-flex; flex-direction:column; gap:4px; margin-right:2px}
.menu-toggle .hamburger span{display:block; width:18px; height:2px; background:var(--fg); border-radius:2px; transition:transform .2s ease, opacity .2s ease}
.menu-toggle.is-active .hamburger span:nth-child(1){transform: translateY(6px) rotate(45deg)}
.menu-toggle.is-active .hamburger span:nth-child(2){opacity:0}
.menu-toggle.is-active .hamburger span:nth-child(3){transform: translateY(-6px) rotate(-45deg)}
.btn{background:transparent; border:1px solid var(--rule); color:var(--fg); padding:6px 10px; border-radius:8px; cursor:pointer}
.btn:hover{box-shadow:var(--shadow)}
.btn.subtle{border-color:transparent; padding:6px}
#toc-toggle{white-space:nowrap}
#progress{
  position:fixed; left:0; top:0; width:100%; height:3px;
  background:linear-gradient(90deg, var(--accent) var(--progress, 0%), transparent 0);
  z-index:9999; pointer-events:none;
}

/* Layout */
.site-main{max-width:1100px; margin:0 auto; padding:24px 20px; display:grid; grid-template-columns: 260px 1fr; gap:28px; position:relative}
@media (max-width: 960px){
  .site-main{grid-template-columns: 1fr}
}

.toc{position:sticky; top: calc(var(--header-h) + 12px); align-self:start; border:1px solid var(--rule); border-radius:12px; padding:14px; background: color-mix(in hsl, var(--bg) 96%, white 4%); max-height: calc(100vh - var(--header-h) - 24px); overflow:auto; overscroll-behavior: contain}
.toc-title{font-weight:600; margin-bottom:8px}
.toc-list{display:flex; flex-direction:column; gap:6px}
.toc-section{border-radius:8px; padding:4px 6px}
.toc-row{display:flex; align-items:center; gap:6px}
.toc-toggle{appearance:none; -webkit-appearance:none; border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:0.9em; line-height:1; transform: translateY(-1px);}
.toc-section.expanded .toc-toggle{transform: translateY(-1px) rotate(90deg)}
.toc-link{display:block; padding:4px 6px; border-radius:6px; color:var(--muted)}
.toc-link:hover{color:var(--fg); background:color-mix(in hsl, var(--bg) 94%, white 6%)}
.toc-link.active{color:var(--fg); background:color-mix(in hsl, var(--bg) 90%, white 10%);}
.toc-link.level-1{font-weight:600}
.toc-link.level-2{padding-left:14px}
.toc-link.level-3{padding-left:24px; font-size:0.95em}
.toc-children{display:none; flex-direction:column; gap:6px; margin-top:4px}
.toc-section.expanded > .toc-children{display:flex}

/* Mobile ToC drawer */
@media (max-width: 960px){
  .toc{position:fixed; inset:auto 0 0 auto; top:var(--header-h); right:0; width:min(92vw, 420px); max-height: calc(100vh - var(--header-h)); transform: translateX(100%); transition: transform .25s ease; z-index: 9998; box-shadow: var(--shadow)}
  body.toc-open .toc{transform: translateX(0%)}
  .toc-scrim{display:none}
  body.toc-open .toc-scrim{display:block; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index: 9997}
}

.content{min-width:0; max-width:68ch}
.content > :first-child{margin-top:0}
/* Prevent headings from hiding under sticky header on hash navigation */
.content h1[id], .content h2[id], .content h3[id]{ scroll-margin-top: calc(var(--header-h) + 12px) }

/* Drop caps on first paragraph after major headings */
.dropcap:first-letter{
  float:left; font-size:3.2em; line-height:0.9; padding-right:0.08em; padding-top:0.08em; font-weight:700; color: var(--fg);
}

/* Typography */
h1,h2,h3{line-height:1.25; margin:1.6rem 0 0.8rem}
h1{font-size: clamp(1.8rem, 2.6vw + 1rem, 2.4rem)}
h2{font-size: clamp(1.3rem, 1.2vw + 1rem, 1.6rem)}
h3{font-size: 1.15rem}

/* Sans-serif display for titles */
h1,h2,h3{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  letter-spacing: 0.2px;
}

blockquote{margin:1.2rem 0; padding:0.1rem 1rem; border-left:4px solid var(--accent); color:var(--muted)}
code, pre code{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace}
code{background:var(--code-bg); padding:0.15em 0.35em; border-radius:6px}
pre{background:var(--code-bg); padding:1rem; border-radius:10px; overflow:auto}

table{border-collapse:collapse; width:100%; margin:1rem 0}
th,td{border:1px solid var(--rule); padding:8px 10px; text-align:left}
thead th{background:color-mix(in hsl, var(--bg) 90%, white 10%)}
tbody tr:hover{background:color-mix(in hsl, var(--bg) 95%, white 5%)}

/* Images & figures */
.content img{border-radius:12px; box-shadow: var(--shadow)}
.content p img:first-child{margin-top:0.3rem}
.content img{opacity:0; transform: translateY(4px); transition: opacity .3s ease, transform .3s ease}
.content img.in{opacity:1; transform:none}

/* Heading anchors */
.anchor{margin-left:8px; opacity:0; color:var(--muted); font-size:0.8em}
.content h1:hover .anchor,
.content h2:hover .anchor,
.content h3:hover .anchor{opacity:1}

/* Stage directions */
.stage{display:block; margin:0.6rem 0; padding:0.6rem 0.75rem; border-left:4px solid var(--rule); background: color-mix(in hsl, var(--bg) 98%, white 2%); border-radius:8px}
.stage::before{content:"🎭"; margin-right:6px; opacity:0.75}

/* Speaker badges */
.line{display:block; margin:0.6rem 0}
.badge{display:inline-block; font-size:0.75rem; font-weight:700; padding:2px 6px; border-radius:999px; margin-right:8px; vertical-align:middle}
.role-human{background:#e6f0ff; color:#0b5bd3}
.role-machine{background:#efe6ff; color:#6b21a8}
.role-logos{background:#fff4d6; color:#b45309; font-variant: small-caps}
.role-chorus{background:#e6fff6; color:#0f766e}
.lyrics-label{
  display:inline-block;
  margin:0.25rem 0 0.45rem;
  padding:2px 10px;
  background:color-mix(in hsl, var(--accent) 18%, var(--bg) 82%);
  color:var(--accent);
  border-radius:999px;
  font-size:0.8rem;
  font-weight:700;
  letter-spacing:0.02em;
}

.lyrics{
  white-space:pre-line;
  margin:0 0 0.8rem;
  padding-left:0.25rem;
}
.lyrics .line{
  margin:0;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:0.35rem;
}
.lyrics .badge{
  margin-right:0;
}
.lyrics .lyric-text{
  flex:1;
  min-width:0;
}
.line-direction{
  font-style:italic;
  color:var(--muted);
}
.lyrics .line-direction{
  margin-right:0.35rem;
}

/* Footer */
.site-footer{border-top:1px solid var(--rule); margin-top:40px}
.site-footer .wrap{max-width:1100px; margin:0 auto; padding:16px 20px; display:flex; gap:12px; align-items:center}
.site-footer .spacer{flex:1}
.site-footer .top{color:var(--muted)}
.site-footer .top:hover{color:var(--fg)}

@media (max-width: 640px){
  .site-header .wrap{
    flex-wrap:wrap;
    gap:10px 12px;
    align-items:center;
    position:relative;
  }
  .brand{
    flex:1 0 auto;
  }
  body.nav-ready .menu-toggle{
    display:inline-flex;
  }
  body.nav-ready .primary{
    position:absolute;
    top:calc(100% + 8px);
    left:20px;
    right:20px;
    margin-left:0;
    display:none;
    flex-direction:column;
    gap:6px;
    padding:12px;
    border:1px solid var(--rule);
    border-radius:12px;
    background:color-mix(in hsl, var(--bg) 96%, white 4%);
    box-shadow:var(--shadow);
    z-index:100;
  }
  body.nav-ready .primary.is-open{
    display:flex;
  }
  .primary .nav-link{
    text-align:left;
    padding:10px;
  }
  .actions{
    gap:6px;
  }
  .actions .btn{
    padding:6px 8px;
  }
}

/* Act chip removed */

/* Underline animation & focus rings */
.content a{background:
  linear-gradient(currentColor, currentColor) bottom / 0 2px no-repeat;
  transition: background-size .2s ease}
.content a:hover{background-size: 100% 2px}
*:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}

/* Subtle accent background at top */
.site-main::before{content:""; position:fixed; left:0; right:0; top:0; height:32vh; pointer-events:none; background: linear-gradient(to bottom, color-mix(in hsl, var(--accent) 14%, transparent), transparent 65%); z-index:-1}

/* Print */
@media print{ .site-header, .toc, .site-footer, #progress{display:none!important} body{background:#fff; color:#000} }

/* Enhancements */
.toc-title{font-weight:600; margin-bottom:8px}
.toc .toc-toggle-all{margin-bottom:8px}
#toc-toggle{display:inline-block}
@media (min-width: 961px){ #toc-toggle{ display:none } }
.stage::before{content:"◆"; margin-right:6px; opacity:0.6; color:var(--muted)}
.page-meta{color:var(--muted); font-size:0.9rem; display:flex; gap:12px; margin:0.25rem 0 1rem}