/* assets/chrome.css — shared level-2 chrome (header, letter row, scope filter,
   two-pane index/category layout). Relies on the CSS variables (--accent, --paper,
   --serif, …) already defined by cards.css / lexiquepro.css. */

/* ---- sticky header ---- */
.hdr{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:18px;
  padding:12px 24px;background:rgba(251,246,236,.92);backdrop-filter:blur(6px);
  border-bottom:1px solid #e7dcc2;}
.hdr .brand{font-family:var(--serif);font-size:19px;color:var(--ink);white-space:nowrap;text-decoration:none;}
.hdr .brand b{color:var(--accent);font-weight:600;}
.hdr nav{display:flex;gap:4px;flex-wrap:wrap;}
.hdr nav a{font-size:13px;color:var(--ink-soft);padding:6px 11px;border-radius:8px;text-decoration:none;}
.hdr nav a:hover{background:var(--paper-2);color:var(--accent);}
.hdr nav a.active{background:var(--accent);color:#fff;}

/* ---- Show filter: single-select facet pills + ETYM source dropdown ----
   Sticky sub-bar directly under the header. Sticky offsets for the panes below
   come from --chrome-top / --chrome-top-lb, measured in chrome.js (measureChrome). */
.filterbar{position:sticky;top:var(--hdr-h,57px);z-index:18;display:flex;flex-wrap:nowrap;
  align-items:center;gap:8px;padding:9px 18px;background:var(--paper-2);
  border-bottom:1px solid #e7dcc2;overflow-x:auto;}
.filterbar .flab{flex:0 0 auto;font-size:9px;letter-spacing:.6px;text-transform:uppercase;
  color:var(--ink-mute);margin-right:2px;}
.filterbar .pill{flex:0 0 auto;font-family:var(--sans);font-size:12.5px;color:var(--ink-soft);
  background:#fff;border:1px solid #e1d4b4;border-radius:999px;padding:5px 13px;cursor:pointer;white-space:nowrap;}
.filterbar .pill:hover{border-color:var(--accent-soft);color:var(--accent);}
.filterbar .pill.active{background:var(--accent);color:#fff;border-color:var(--accent);}
.filterbar .pill .ct{font-size:10px;opacity:.65;margin-left:6px;}
.filterbar .pill.active .ct{opacity:.85;}

/* ---- Etymology source popover (anchored under the Etymology pill) ---- */
.srcpop{position:fixed;z-index:40;min-width:208px;max-width:264px;max-height:60vh;overflow:auto;
  background:#fff;border:1px solid var(--accent-soft);border-radius:12px;
  box-shadow:0 14px 34px rgba(80,55,20,.20);padding:6px;}
.srcpop[hidden]{display:none;}
.srcpop-h{font-size:9px;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-mute);padding:7px 10px 5px;}
.srcpop-list{display:flex;flex-direction:column;}
.srcpop-row{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:none;background:none;
  font-family:var(--sans);font-size:13px;color:var(--ink-soft);padding:8px 10px;border-radius:8px;cursor:pointer;}
.srcpop-row:hover{background:var(--paper-2);}
.srcpop-row.on{background:#f3e4ce;color:var(--accent);}
.srcpop-row .dot{width:13px;height:13px;border-radius:50%;border:1.5px solid var(--accent-soft);flex:0 0 auto;}
.srcpop-row.on .dot{background:var(--accent);border-color:var(--accent);box-shadow:inset 0 0 0 2px #fff;}
.srcpop-row .nm{flex:1;}
.srcpop-row .ct{font-size:10.5px;color:var(--ink-mute);}
.srcpop-row.on .ct{color:var(--accent);}

/* ---- top letter row + script toggle ---- */
.letterbar{position:sticky;top:var(--chrome-top,99px);z-index:15;display:flex;flex-wrap:nowrap;gap:2px;justify-content:center;
  align-items:center;padding:8px 16px;background:rgba(251,246,236,.92);backdrop-filter:blur(6px);
  border-bottom:1px solid #e7dcc2;overflow-x:auto;}
.letterbar.labeled{justify-content:flex-start;}
.letterbar a{font-family:var(--serif);font-size:14px;color:var(--ink-soft);padding:2px 7px;border-radius:7px;
  cursor:pointer;text-decoration:none;white-space:nowrap;flex:0 0 auto;}
.letterbar a:hover{background:var(--paper-2);color:var(--accent);}
.letterbar a.active{background:var(--accent);color:#fff;}
.scriptseg{display:inline-flex;border:1px solid var(--accent-soft);border-radius:8px;overflow:hidden;
  margin-right:14px;align-self:center;}
.scriptseg button{border:none;background:#fff;color:var(--ink-soft);font-family:var(--sans);
  font-size:12px;padding:4px 12px;cursor:pointer;}
.scriptseg button.active{background:var(--accent);color:#fff;}

/* ---- two-pane index (term list + entry) ---- */
.layout{display:flex;}
.idx{position:sticky;top:var(--chrome-top-lb,143px);align-self:flex-start;height:calc(100vh - var(--chrome-top-lb,143px));overflow:auto;
  width:340px;border-right:1px solid #e7dcc2;background:var(--paper);}
.idx .ttl{font-family:var(--serif);font-size:15px;color:var(--ink);padding:14px 16px 10px;border-bottom:1px solid #eadfc6;}
.ilist a{display:flex;justify-content:space-between;gap:12px;padding:9px 16px;
  border-bottom:1px solid #f0e7d3;color:var(--ink-soft);font-size:14px;align-items:baseline;cursor:pointer;text-decoration:none;}
.ilist a:hover{background:var(--paper-2);}
.ilist a.active{background:#fff;box-shadow:inset 3px 0 0 var(--accent);color:var(--ink);}
.ilist a.ga-filtered-out{display:none;}
.ilist .ipa{font-family:var(--serif);color:var(--accent);font-size:15px;white-space:nowrap;}
.pane{flex:1;padding:0 24px;}
.pane .hint{max-width:680px;margin:28px auto;color:var(--ink-mute);font-size:13px;text-align:center;}
.pane .cards{max-width:680px;margin:0 auto;padding-top:6px;}

/* ---- categories left list ---- */
.catlist{position:sticky;top:var(--chrome-top,99px);align-self:flex-start;height:calc(100vh - var(--chrome-top,99px));overflow:auto;
  width:260px;border-right:1px solid #e7dcc2;background:var(--paper);padding:12px 0;}
.catlist .ttl{font-family:var(--serif);font-size:14px;color:var(--ink-mute);padding:4px 18px 10px;
  text-transform:uppercase;letter-spacing:.5px;}
.catlist a{display:block;padding:7px 18px;color:var(--ink-soft);font-size:13px;border-left:3px solid transparent;cursor:pointer;text-decoration:none;}
.catlist a:hover{background:var(--paper-2);}
.catlist a.active{background:#fff;border-left-color:var(--accent);color:var(--ink);font-weight:600;}

/* ---- responsive: stack the two-pane on narrow screens ---- */
@media (max-width:720px){
  .layout{flex-direction:column;}
  .idx,.catlist{position:static;width:auto;height:auto;max-height:40vh;border-right:none;border-bottom:1px solid #e7dcc2;}
  .hdr{gap:10px;padding:10px 14px;}
  .hdr nav a{padding:5px 8px;}
  .filterbar{padding:8px 12px;gap:6px;}
}