/* Shared topbar layout — index, intro, and chapter pages */
:root{
  --tb-pad-y:9px;
  --tb-pad-x:12px;
  --tb-gap:8px;
  --tb-min-h:52px;
}
@media (min-width:721px){
  :root{--tb-pad-x:20px;}
}
@media (max-width:430px){
  :root{--tb-min-h:50px;}
}

.topbar{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  gap:var(--tb-gap);
  padding:var(--tb-pad-y) var(--tb-pad-x);
  min-height:var(--tb-min-h);
  box-sizing:border-box;
  overflow:visible;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  transition:transform .28s ease;
}
.topbar-left,
.tb-main{
  display:flex;
  align-items:center;
  gap:var(--tb-gap);
  flex:0 0 auto;
  min-width:0;
}
.tb-main{flex:1 1 auto;}
.topbar-center,
.topbar .brand{
  flex:1 1 auto;
  min-width:0;
}
.topbar-spacer,
.topbar .spacer{flex:1 1 auto; min-width:0;}
.topbar-right,
.tb-actions{
  display:flex;
  align-items:center;
  gap:var(--tb-gap);
  flex:0 0 auto;
  margin-left:auto;
}
@media (max-width:720px){
  .topbar.topbar-hidden{transform:translateY(-105%);}
}
/* Wide screens: keep the bar full-width but center its content near the reading column */
@media (min-width:1100px){
  .topbar{
    padding-left:max(var(--tb-pad-x), calc((100% - 1000px) / 2));
    padding-right:max(var(--tb-pad-x), calc((100% - 1000px) / 2));
  }
}

#themeToggle .icon-moon,
#themeToggle .icon-book,
#themeToggle .icon-auto{display:none;}
html[data-theme-pref="system"] #themeToggle .icon-sun{display:none;}
html[data-theme-pref="system"] #themeToggle .icon-auto{display:block;}
html[data-theme-pref="dark"] #themeToggle .icon-sun{display:none;}
html[data-theme-pref="dark"] #themeToggle .icon-moon{display:block;}
html[data-theme-pref="paper"] #themeToggle .icon-sun{display:none;}
html[data-theme-pref="paper"] #themeToggle .icon-book{display:block;}

.theme-menu-wrap{position:relative; flex:0 0 auto;}
.theme-menu-popover{
  position:fixed;
  z-index:120;
  min-width:min(92vw, 220px);
  padding:6px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:4px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.theme-menu-popover.open{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition:opacity .2s ease, transform .2s ease, visibility 0s;
}
.theme-menu-popover[hidden]{display:none !important;}
.theme-menu-opt{
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-size:13px;
  font-weight:600;
  text-align:left;
  line-height:1.35;
  white-space:nowrap;
  padding:8px 12px;
  cursor:pointer;
  transition:border-color .12s, background .12s, color .12s;
}
.theme-menu-opt:hover{
  background:var(--bg);
  border-color:var(--border);
}
.theme-menu-opt.active{
  background:var(--accent-soft);
  border-color:var(--accent);
  color:var(--accent);
}

/* Shared topbar control buttons — index + intro */
.btn-icon,
a.btn-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  min-width:34px;
  padding:0;
  border-radius:50%;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--ink-soft);
  font-family:'Inter',sans-serif;
  text-decoration:none;
  cursor:pointer;
  transition:border-color .15s, color .15s, background .15s;
  flex:0 0 auto;
  box-sizing:border-box;
}
.btn-icon svg{display:block;}
.btn-icon:hover,
a.btn-icon:hover{
  border-color:var(--faint);
  color:var(--ink);
}
.btn-icon.active,
a.btn-icon.active{
  background:var(--accent-soft);
  border-color:var(--accent);
  color:var(--accent);
}

/* Short text toggle (e.g. Sv) — same circle footprint as icons */
.btn-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  min-width:34px;
  padding:0;
  border-radius:50%;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--ink-soft);
  font-family:'Inter',sans-serif;
  font-size:12px;
  font-weight:700;
  line-height:1;
  letter-spacing:-0.02em;
  cursor:pointer;
  transition:border-color .15s, color .15s, background .15s;
  flex:0 0 auto;
  box-sizing:border-box;
}
.btn-chip:hover{
  border-color:var(--faint);
  color:var(--ink);
}
.btn-chip.active{
  background:var(--accent-soft);
  border-color:var(--accent);
  color:var(--accent);
}

/* Wide selector pill (chapter picker, etc.) */
.btn-select{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:34px;
  max-width:100%;
  padding:0 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  cursor:pointer;
  transition:border-color .15s, background .15s, color .15s;
  box-sizing:border-box;
  line-height:1;
  overflow:hidden;
}
.btn-select:hover{border-color:var(--faint);}
.btn-select.active,
.nav-wrap.drawer-open .nav-trigger.btn-select{
  background:var(--accent-soft);
  border-color:var(--accent);
  color:var(--accent);
}

.btn-chip.btn-size{
  font-size:11px;
  letter-spacing:0;
}

/* Centered AMC logo on index */
.logo-btn{
  overflow:visible;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:3px 0;
}
.logo-btn img{
  height:28px;
  width:auto;
  display:block;
  object-fit:contain;
}
html[data-theme="dark"] .logo-btn{
  filter:brightness(0) invert(1);
}

@media (max-width:430px){
  .btn-icon,
  a.btn-icon,
  .btn-chip{
    width:32px;
    height:32px;
    min-width:32px;
  }
  .btn-chip{font-size:11px;}
  .btn-select{height:32px; padding:0 8px; gap:4px;}
  .logo-btn img{height:26px;}
}