/* Site-specific additions on top of restored.css */

/* dropdown nav */
.has-menu { position: relative; }
.menu-btn { background:none; border:0; font:inherit; color:var(--text); padding:.45rem .7rem; border-radius:8px; cursor:pointer; }
.menu-btn:hover, .menu-btn[aria-expanded=true] { background:var(--bg-sunken); }
.menu { position:absolute; top:100%; left:0; min-width:240px; background:var(--bg-raised); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:.4rem; display:none; z-index:50; }
.menu.open { display:block; }
.menu a { display:block; padding:.5rem .6rem; border-radius:8px; text-decoration:none; color:var(--text); font-size:.95rem; }
.menu a:hover { background:var(--bg-sunken); }
.menu .lbl { font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim); padding:.4rem .6rem .2rem; }

/* library browser */
.browser-head { padding:2.2rem 0 1.4rem; border-bottom:1px solid var(--border); }
.browser-head h1 { font-size:clamp(2rem,5vw,3rem); margin:.3rem 0 .4rem; }
.sub-block { padding:1.6rem 0; border-bottom:1px solid var(--border); }
.sub-block h2 { font-size:1.3rem; margin:0 0 .2rem; }
.sub-block .sub-meta { font-size:.85rem; color:var(--text-dim); margin:0 0 1rem; }
.text-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; }
@media(max-width:900px){ .text-grid{grid-template-columns:1fr 1fr} }
@media(max-width:600px){ .text-grid{grid-template-columns:1fr} }
.text-link { display:flex; justify-content:space-between; align-items:center; gap:.6rem; text-decoration:none; color:var(--text); background:var(--bg-raised); border:1px solid var(--border); border-radius:10px; padding:.7rem .85rem; }
.text-link:hover { border-color:var(--accent); transform:translateY(-1px); }
.text-link .tt { font-family:var(--font-serif); font-size:1rem; line-height:1.2; }
.text-link .wc { font-size:.72rem; color:var(--text-dim); white-space:nowrap; }
.text-link .todo { font-size:.66rem; color:var(--bronze); border:1px solid var(--border); border-radius:999px; padding:.1rem .45rem; }

/* table of contents on text page */
.toc { font-size:.85rem; }
.toc a { display:block; padding:.25rem 0; color:var(--text-dim); text-decoration:none; border-left:2px solid transparent; padding-left:.6rem; }
.toc a:hover { color:var(--accent); border-left-color:var(--accent); }

/* document body rendering */
.docbody h2 { font-size:1.5rem; margin:1.6rem 0 .6rem; }
.docbody h3 { font-size:1.2rem; margin:1.3rem 0 .5rem; color:var(--text); }
.docbody h4 { font-size:1.02rem; margin:1.1rem 0 .4rem; font-family:var(--font-sans); letter-spacing:.02em; color:var(--text-dim); text-transform:uppercase; font-weight:700; }

/* search */
.search-wrap { max-width:48rem; margin:2rem auto; }
.search-input { width:100%; font-size:1.15rem; padding:.9rem 1.1rem; border-radius:12px; border:1px solid var(--border); background:var(--bg-raised); color:var(--text); }
.facets { display:flex; gap:.4rem; flex-wrap:wrap; margin:1rem 0; }
.facet { font-size:.82rem; border:1px solid var(--border); background:var(--bg-raised); color:var(--text); border-radius:999px; padding:.35rem .8rem; cursor:pointer; }
.facet[aria-pressed=true] { background:var(--olive); color:#fbf6ea; border-color:var(--olive-deep); }
.result { display:block; text-decoration:none; color:var(--text); padding:1rem 0; border-bottom:1px solid var(--border); }
.result h3 { margin:0 0 .25rem; font-size:1.15rem; }
.result .rmeta { font-size:.78rem; color:var(--text-dim); margin-bottom:.35rem; display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.result .snip { font-family:var(--font-serif); color:var(--text-dim); font-size:.95rem; line-height:1.5; }
.result mark { background:color-mix(in srgb,var(--gold) 38%, transparent); color:inherit; padding:0 .1em; border-radius:3px; }
.count-line { color:var(--text-dim); font-size:.9rem; }

/* Ask the Library */
.ask-wrap { max-width:52rem; margin:1.5rem auto; }
.ask-bar { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin-bottom:1rem; }
.ask-bar select { padding:.5rem .6rem; border-radius:8px; border:1px solid var(--border); background:var(--bg-raised); color:var(--text); font:inherit; }
#thread { display:flex; flex-direction:column; gap:1rem; margin:1.2rem 0; }
.bubble { max-width:100%; }
.bubble.user { align-self:flex-end; background:var(--olive); color:#fbf6ea; padding:.7rem 1rem; border-radius:14px 14px 4px 14px; font-size:.98rem; max-width:80%; }
.bubble.ai { align-self:flex-start; width:100%; }
.bubble .ai-text { font-family:var(--font-sans); line-height:1.6; }
.bubble .ai-text p { margin:0 0 .8rem; }
.bubble .ai-text.err { border-left-color:#9a3b2f; background:color-mix(in srgb,#9a3b2f 8%,transparent); }
.cite { font-size:.72rem; color:var(--bronze); background:color-mix(in srgb,var(--bronze) 14%,transparent); border-radius:4px; padding:0 .3em; font-weight:600; }
.sources { margin-top:.8rem; border-top:1px dashed var(--border); padding-top:.7rem; }
.sources h4 { font-family:var(--font-sans); font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim); margin:0 0 .5rem; }
details.src { border:1px solid var(--border); border-radius:8px; padding:.4rem .7rem; margin-bottom:.4rem; background:var(--bg-raised); }
details.src summary { cursor:pointer; font-size:.9rem; display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
details.src .srctext { font-family:var(--font-serif); font-size:.92rem; color:var(--text-dim); margin:.5rem 0 0; line-height:1.5; }
.snum { font-weight:700; color:var(--bronze); }
.ask-input-row { display:flex; gap:.6rem; position:sticky; bottom:0; background:var(--bg); padding:.6rem 0; }
.ask-input-row input { flex:1; padding:.9rem 1rem; border-radius:12px; border:1px solid var(--border); background:var(--bg-raised); color:var(--text); font-size:1rem; }
#settings { border:1px solid var(--border); background:var(--bg-sunken); border-radius:12px; padding:1rem 1.1rem; margin-bottom:1rem; }
#settings input, #settings select { width:100%; padding:.6rem .7rem; border-radius:8px; border:1px solid var(--border); background:var(--bg-raised); color:var(--text); font:inherit; margin:.3rem 0 .6rem; }
.keystate { font-size:.82rem; color:var(--text-dim); }

/* disabled/placeholder feature hint */
.feat-note { font-size:.78rem; color:var(--text-dim); }
.text-link.disabled, .btn.disabled { opacity:.55; pointer-events:none; }

/* ---- Mobile navigation + responsive reading layout ---- */
.nav-toggle { display:none; }

/* text-page two-column layout that stacks on small screens */
.reading-grid { display:grid; grid-template-columns:1fr 17rem; gap:2rem; align-items:start; margin-top:1.2rem; }
@media (max-width:900px){
  .reading-grid { grid-template-columns:1fr; }
  .reading-grid > aside { order:2; }
}

@media (max-width:620px){
  /* hamburger button shows; full nav collapses into a panel */
  .nav-toggle { display:inline-flex; align-items:center; justify-content:center; font-size:1.25rem;
    background:var(--bg-raised); border:1px solid var(--border); border-radius:8px; padding:.4rem .65rem;
    cursor:pointer; color:var(--text); line-height:1; }
  .site-header .row { flex-wrap:wrap; height:auto; padding-top:.55rem; padding-bottom:.55rem; gap:.5rem; }
  .brand { font-size:1.15rem; }
  .header-tools { margin-left:auto; gap:.4rem; }
  .searchbox { display:none; }              /* Search is in the menu on mobile */
  .mainnav { display:none; flex-direction:column; width:100%; order:5; gap:.15rem; margin:.2rem 0 .3rem; }
  .site-header.nav-open .mainnav { display:flex; }
  .mainnav > a, .mainnav .has-menu { width:100%; }
  .mainnav > a { padding:.8rem .6rem; border-radius:8px; font-size:1.02rem; }
  .mainnav .has-menu { position:static; }
  .mainnav .has-menu .menu-btn { width:100%; text-align:left; padding:.8rem .6rem; font-size:1.02rem; }
  .mainnav .has-menu .menu { position:static; box-shadow:none; border:0; padding:.1rem 0 .1rem .8rem; min-width:0; }
  /* roomier tap targets in the reading toolbar */
  .reader-toolbar { gap:.35rem; }
  .reader-toolbar .iconbtn, .seg button { padding:.55rem .7rem; }
  /* stack hero buttons full width */
  .hero .cta { flex-direction:column; }
  .hero .cta .btn { width:100%; justify-content:center; }
}