/* Index + intro — topbar left controls, info popover, intro drawer */

.topbar-left{
  display:flex;
  align-items:center;
  gap:var(--tb-gap, 8px);
  flex:0 0 auto;
  min-width:0;
}

.topbar-center.brand,
.topbar .brand{
  display:flex;
  align-items:baseline;
  gap:8px;
  font-weight:700;
  font-size:14px;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.topbar .brand small,
.topbar-center.brand small{
  font-weight:500;
  color:var(--muted);
  font-size:12px;
  margin-left:6px;
}

.intro-nav-wrap{position:relative; min-width:0;}
.intro-nav-wrap.drawer-open .intro-nav-trigger .nav-name{color:var(--accent);}
.intro-nav-wrap.drawer-open .intro-nav-trigger .nav-caret{transform:rotate(180deg);}
.intro-nav-trigger .nav-name{font-weight:700; font-size:13.5px;}
.intro-nav-trigger .nav-caret{
  display:inline-flex;
  color:var(--muted);
  transition:transform .15s;
}

.intro-drawer{width:min(400px, 92vw);}
.intro-drawer-title{
  flex:1;
  font-size:14px;
  font-weight:700;
  color:var(--ink);
}
.intro-nav-item{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:inherit;
}
.intro-nav-num{
  flex:0 0 auto;
  min-width:26px;
  height:26px;
  padding:0 5px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  background:var(--accent-soft);
  color:var(--accent);
  font-weight:700;
  font-size:11px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.intro-nav-item.active .intro-nav-num{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
.intro-nav-title{
  flex:1;
  min-width:0;
  font-size:13.5px;
  font-weight:600;
  line-height:1.35;
}
.intro-nav-empty{
  padding:16px 8px;
  font-size:13px;
  color:var(--muted);
  text-align:center;
}

/* Index hero */
.hero h1{color:var(--accent);}
.hero-arabic-link{
  display:block;
  width:min(220px, 62vw);
  margin:10px auto 0;
  padding:6px 0 8px;
  border-radius:12px;
  transition:opacity .2s ease, transform .2s ease;
}
.hero-arabic-link:hover{
  opacity:.88;
  transform:translateY(-1px);
}
.hero-arabic-link .hero-arabic-title{
  margin:0;
  width:100%;
  height:auto;
  display:block;
}
@media (max-width:980px){
  .hero-arabic-link{
    width:min(176px, 54vw);
    margin:6px auto 0;
    padding:4px 0 6px;
  }
}

/* Info popover (chapter-style bottom sheet) */
.index-info-popover.chc-info-popover{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:75;
  display:flex;
  flex-direction:column;
  background:var(--surface);
  border-top:1px solid var(--border);
  border-radius:24px 24px 0 0;
  box-shadow:0 -12px 40px rgba(0,0,0,.12);
  overflow:hidden;
  transform-origin:top center;
  transform:scaleY(0.94) translateY(-6px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:transform .34s cubic-bezier(.4,0,.2,1),
             opacity .26s ease,
             visibility 0s linear .34s;
}
.index-info-popover.chc-info-popover.open{
  transform:scaleY(1) translateY(0);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:transform .34s cubic-bezier(.4,0,.2,1),
             opacity .26s ease,
             visibility 0s;
}
.index-info-popover[hidden]{display:none !important;}
.index-info-popover .chc-info-popover-header{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px 12px;
  border-bottom:1px solid var(--border);
  flex:0 0 auto;
}
.index-info-popover .chc-info-popover-title{
  flex:1;
  min-width:0;
  font-size:15px;
  font-weight:700;
  color:var(--ink);
}
.index-info-popover .chc-info-popover-tools{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:auto;
}
.index-info-popover .chc-info-popover-body{
  flex:1 1 auto;
  min-height:0;
  padding:16px 18px 28px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  font-size:var(--modal-size, 14.5px);
}

/* Om content inside info popover */
.om-info-content .om-info-inner{
  max-width:480px;
  margin:0 auto;
  text-align:center;
}
.om-info-content .title-spread{
  text-align:center;
  padding:28px 18px 24px;
  margin:0 0 20px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--surface)) 0%, var(--surface) 100%);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
}
.om-info-content .display-title{
  font-family:'Libre Baskerville',Georgia,serif;
  font-size:clamp(1.35rem, 4vw, 1.75rem);
  font-weight:700;
  letter-spacing:.12em;
  line-height:1.25;
  color:var(--ink);
  margin:0 0 14px;
}
.om-info-content .display-sub{
  font-family:'Libre Baskerville',Georgia,serif;
  font-size:clamp(.72rem, 2vw, .85rem);
  letter-spacing:.18em;
  text-transform:uppercase;
  line-height:1.65;
  color:var(--ink-soft);
  margin-bottom:18px;
}
.om-info-content .patronage{
  max-width:36em;
  margin:0 auto;
  padding-top:14px;
  border-top:1px solid color-mix(in srgb, var(--border) 80%, transparent);
}
.om-info-content .patronage .lead{
  font-family:'Inter',system-ui,sans-serif;
  font-size:13px;
  color:var(--muted);
  margin:0 0 6px;
}
.om-info-content .patronage .name{
  font-family:'Libre Baskerville',Georgia,serif;
  font-size:1.05rem;
  font-weight:700;
  margin:0 0 8px;
  color:var(--ink);
}
.om-info-content .patronage .body{
  font-family:'Inter',system-ui,sans-serif;
  font-size:var(--modal-size, 15px);
  line-height:1.72;
  color:var(--ink-soft);
  margin:0;
  text-align:center;
}
.om-info-content .imprint-stack{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:20px;
}
.om-info-content .info-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px 18px;
  box-shadow:var(--shadow);
  text-align:center;
}
.om-info-content .info-card h2{
  margin:0 0 10px;
  font-family:'Inter',system-ui,sans-serif;
  font-size:10px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent-deep);
}
.om-info-content .info-card .card-title{
  font-family:'Libre Baskerville',Georgia,serif;
  font-size:1rem;
  font-weight:700;
  margin:0 0 6px;
  line-height:1.35;
}
.om-info-content .info-card p,
.om-info-content .info-card .lines{
  margin:0 0 6px;
  font-family:'Inter',system-ui,sans-serif;
  font-size:14px;
  line-height:1.65;
  color:var(--ink-soft);
}
.om-info-content .info-card .lines div{margin-bottom:2px;}
.om-info-content .info-card .en-title{
  font-family:'Inter',system-ui,sans-serif;
  font-size:13px;
  font-style:italic;
  color:var(--muted);
  margin:0 0 8px;
}
.om-info-content .meta-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin:0 0 20px;
}
.om-info-content .meta-chip{
  font-family:'Inter',system-ui,sans-serif;
  font-size:11px;
  line-height:1.45;
  color:var(--ink-soft);
  background:color-mix(in srgb, var(--accent) 8%, var(--surface));
  border:1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius:999px;
  padding:5px 10px;
}
.om-info-content .copyright{
  font-family:'Inter',system-ui,sans-serif;
  text-align:center;
  font-size:11px;
  color:var(--muted);
  margin:4px 0 8px;
}
.om-info-content .info-card a,
.om-info-content .contact-email{
  color:var(--accent-deep);
  text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  font-family:'Inter',system-ui,sans-serif;
  font-size:14px;
}
.om-info-content .contact-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:6px 8px;
  margin-bottom:8px;
}
.om-info-content .contact-sep{
  color:var(--muted);
  font-size:14px;
  user-select:none;
}
.om-info-content .contact-email{
  display:inline-block;
}
.om-info-content .isbn{
  font-family:'Inter',system-ui,sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--ink);
  margin-top:4px;
}

/* Chapter-drawer + nav-item (shared with chapter pages) */
.nav-search{
  width:100%;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--ink);
  border-radius:999px;
  padding:9px 14px;
  font-size:13px;
  font-family:'Inter',sans-serif;
  outline:none;
}
.nav-search:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--ring);}
.cn-col-head{padding:10px 12px; border-bottom:1px solid var(--border); flex-shrink:0;}
.cn-scroll{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding:6px 8px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.cn-header{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.chapter-drawer{
  position:fixed;
  top:0;
  left:0;
  height:100%;
  width:min(720px, 96vw);
  max-width:96vw;
  background:var(--surface);
  border-right:1px solid var(--border);
  box-shadow:8px 0 32px rgba(0,0,0,.12);
  transform:translateX(-105%);
  transition:transform .32s cubic-bezier(.32,.72,.28,1);
  z-index:68;
  display:flex;
  flex-direction:column;
}
.chapter-drawer.open{transform:translateX(0); z-index:71;}
.chapter-drawer-inner{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
}
.nav-item{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  border:1px solid transparent;
  background:transparent;
  border-radius:999px;
  padding:8px 12px;
  min-height:40px;
  cursor:pointer;
  font-family:'Inter',sans-serif;
  font-size:13.5px;
  color:var(--ink);
  text-align:left;
  transition:border-color .12s, background .12s, color .12s;
  box-sizing:border-box;
}
.nav-item:hover{background:var(--bg); border-color:var(--border);}
.nav-item.active{
  background:var(--accent-soft);
  border-color:var(--accent);
  color:var(--accent);
  font-weight:600;
}
.nav-trigger{
  display:flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  white-space:nowrap;
}

@media (max-width:560px){
  .intro-nav-trigger .nav-name{font-size:12.5px;}
}

@media (max-width:400px){
  .topbar-left{gap:6px;}
  .intro-nav-trigger{padding:0 8px;}
}

@media (max-width:560px){
  .topbar .topbar-left{flex:0 0 auto;}
  .topbar.searching .topbar-left{opacity:.35; pointer-events:none;}
}