/* controls.css
   toolbar, time panel, facets, map controls, attribution, search
   Extracted from map/index.html (2026-08) to shrink the index and give agents smaller, named CSS to parse. */

    /* toolbar sits ABOVE the centered time panel's vertical band so the two never intersect at any width */
    /* centered over the time panel (was right-anchored → offset-tetris look); both now share one centre axis */
    #toolbar { display:flex; flex-wrap:wrap; gap:5px 6px; margin:2px 0 11px; padding-bottom:11px; border-bottom:1px solid var(--line); }
    #langtog { display:flex; border:1px solid var(--panel-edge); border-radius:7px; overflow:hidden; }
    #langtog button { font-family:'EB Garamond',serif; font-size:13px; border:0; background:transparent;
      padding:4px 11px; cursor:pointer; color:var(--ink-soft); }
    #langtog button.active { background:#7a5230; color:#f3ead0; }
    /* Toolbar buttons — uniform parchment (no white browser default) + monochrome line icons */
    #toolbar button { font-family:'EB Garamond',serif; font-size:13.5px; background:#e7dcbf; color:var(--ink);
      border:1px solid var(--panel-edge); border-radius:7px; padding:4px 10px; cursor:pointer;
      display:inline-flex; align-items:center; gap:3px; transition:background .12s; }
    #toolbar button:hover { background:#dcc99e; }
    #toolbar .tb-ic { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.6; flex:0 0 auto; }
    #guideBtn { background:#e9dab3; font-weight:600; }   /* Start — subtly emphasised, same family */

    #controls { top:14px; right:14px; width:290px; padding:12px 14px 14px; max-height:calc(100% - 28px); overflow:auto; }
    #controls h2 { font-family:'IM Fell English',serif; font-size:15px; margin:14px 0 6px;
      border-bottom:1px solid var(--line); padding-bottom:3px; font-weight:400; }
    #controls h2:first-child { margin-top:0; }
    #controls h2.leg-head { cursor:pointer; user-select:none; display:flex; align-items:center; }
    #controls h2.leg-head::before { content:'▾'; font-size:9px; margin-right:7px; color:var(--line); display:inline-block; width:9px; transition:transform .12s; }
    #controls h2.leg-head.collapsed::before { content:'▸'; }
    #controls h2.leg-head { cursor:pointer; user-select:none; }
    #controls h2.leg-head.collapsed + .leg-body { display:none; }
    #controls { position:absolute; }
    #ctrlToggle { position:absolute; top:8px; right:10px; border:none; background:none; cursor:pointer; font-size:16px; color:var(--ink-soft); line-height:1; padding:2px 6px; z-index:2; }
    #ctrlToggle:hover { color:var(--ink); }
    #controls.panel-collapsed { width:auto; max-height:none; overflow:visible; padding:6px 8px; }
    #controls.panel-collapsed > *:not(#ctrlToggle) { display:none; }
    #controls.panel-collapsed #ctrlToggle { position:static; }
    .leg-body.collapsed { display:none; }
    .row.subrow { margin-left:22px; font-size:12.5px; }
    .row { display:flex; align-items:center; gap:8px; font-size:14px; padding:2px 0; cursor:pointer; }
    .row input { accent-color:#7a5230; }
    .sw { width:13px; height:13px; border-radius:3px; border:1px solid rgba(0,0,0,.35); flex:0 0 auto; }
    .swline { width:16px; height:0; border-top-width:3px; border-top-style:solid; }
    .legdisc { width:23px; height:23px; border-radius:50%; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(0,0,0,.4); box-shadow:inset 0 0 3px rgba(0,0,0,.25); }
    .legdisc svg { display:block; }
    .muted { color:var(--ink-soft); font-size:12.5px; font-style:italic; }
    .legendnote { font-size:12px; color:var(--ink-soft); margin-top:6px; line-height:1.35; }
    .dash { display:inline-block; width:22px; border-top:2px dashed #7a5230; vertical-align:middle; }

    /* centered & width-capped so it never reaches the right toolbar nor covers the bottom-right map attribution */
    #timewrap { bottom:8px; left:50%; transform:translateX(-50%); width:min(560px, calc(100vw - 120px)); padding:1px 16px 2px; }
    /* Smart facets — derived-semantic filter chips (Tufte-style, à la lineara.xyz): navigate the corpus by MEANING */
    #facets { position:absolute; bottom:64px; left:50%; transform:translateX(-50%); z-index:3; display:flex; flex-wrap:nowrap; gap:5px; justify-content:center; max-width:calc(100vw - 26px); overflow-x:auto; padding:2px; scrollbar-width:none; }
    #facets::-webkit-scrollbar { display:none; }
    .facet { flex:0 0 auto; font:600 11.5px/1 'EB Garamond',serif; letter-spacing:.01em; background:rgba(239,228,200,.86); color:var(--ink-soft); border:1px solid var(--panel-edge); border-radius:11px; padding:4px 8px; cursor:pointer; white-space:nowrap; box-shadow:0 1px 3px rgba(90,74,52,.14); transition:background .12s, color .12s; display:inline-flex; align-items:center; }
    .facet .fi { display:inline-block; width:1.1em; margin-right:2px; font-size:11.5px; line-height:1; text-align:center; }
    .facet:hover { color:var(--ink); background:rgba(239,228,200,.97); }
    .facet.on { background:#5c4a34; color:#efe4c8; border-color:#4a3826; }
    /* Language toggle — segmented control in the title masthead, always visible, OUT of the menu */
    #langToggle { display:inline-flex; align-items:center; gap:1px; margin-top:9px;
      background:rgba(239,228,200,.55); border:1px solid var(--panel-edge); border-radius:11px; padding:2px 5px; }
    #langToggle button { font:600 12.5px/1 'EB Garamond',serif; letter-spacing:.05em; background:none; border:none;
      color:var(--ink-soft); cursor:pointer; padding:2px 7px; border-radius:8px; transition:color .12s, background .12s; }
    #langToggle button:hover { color:var(--ink); }
    #langToggle button.on { color:#efe4c8; background:#5c4a34; }
    #langToggle .lang-sep { color:var(--line); font-size:11px; padding:0 1px; }
    /* Map controls sit INSIDE the engraved frame (frame is inset 10px + a 13px outer mat) */
    .maplibregl-ctrl-bottom-left { margin:0 0 22px 22px !important; z-index:2; }
    .maplibregl-ctrl-bottom-right { z-index:2; margin:0 22px 22px 0 !important; }
    /* Map attribution — contained parchment caption chip (was raw dark text sprawled over the map & into the toolbar) */
    .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib { background:rgba(239,228,200,.82) !important; margin:0 !important;
      border:1px solid var(--panel-edge); border-radius:8px;
      padding:1px 9px 2px; box-shadow:0 1px 6px rgba(90,74,52,.14); max-width:min(340px, 60vw); }
    .maplibregl-ctrl-attrib-inner, .maplibregl-ctrl-attrib-inner a { color:var(--ink-soft) !important;
      font:italic 10.5px/1.55 'EB Garamond',serif !important; }
    .maplibregl-ctrl-attrib a { text-decoration:none; } .maplibregl-ctrl-attrib a:hover { text-decoration:underline; }
    .maplibregl-ctrl-attrib-button { background-color:rgba(239,228,200,.9) !important; }
    #yearlabel { text-align:center; font-family:'IM Fell English',serif; font-size:13px; letter-spacing:.5px; margin-bottom:0; line-height:1.0; }
    #slider { width:100%; accent-color:#7a5230; height:10px; margin:0; }
    .ticks { display:flex; justify-content:space-between; font-size:9.5px; color:var(--ink-soft); margin-top:-4px; }
    .playbar { display:flex; gap:8px; justify-content:center; margin-top:8px; }
    .playbar button { font-family:'EB Garamond',serif; font-size:14px; background:#e2d3ad;
      border:1px solid var(--panel-edge); border-radius:4px; padding:3px 12px; cursor:pointer; color:var(--ink); }
    .playbar button:hover { background:#d8c69a; }

    /* search — collapsed into a facet pill; opens as a top-center palette */
    #search { display:none; position:absolute; z-index:4; top:16px; left:50%; transform:translateX(-50%);
      width:min(430px,44vw); font-family:'EB Garamond',Georgia,serif; }
    #search.open { display:block; }
    .facet.search-pill .fi svg { display:block; margin:0 auto; vertical-align:middle; }
    #searchbox { display:flex; align-items:center; gap:8px; padding:9px 12px;
      background:rgba(247,240,223,.82); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
      border:1px solid rgba(120,90,45,.35); border-radius:13px; box-shadow:0 8px 26px rgba(40,25,5,.22); color:#7a5f38; }
    #searchbox:focus-within { border-color:rgba(120,90,45,.6); box-shadow:0 10px 30px rgba(40,25,5,.3); }
    #searchInput { flex:1; border:0; background:transparent; outline:none; font-family:inherit; font-size:16.5px; color:var(--ink); }
    #searchInput::placeholder { color:#9a8560; font-style:italic; }
    #searchClear { font-family:system-ui,sans-serif; font-size:11px; color:#6f5a38; border:1px solid rgba(120,90,45,.3);
      border-radius:5px; padding:1px 5px; opacity:0; transition:opacity .15s; cursor:pointer; }
    #searchbox.has-text #searchClear { opacity:1; }
    #searchCount { font-family:system-ui,sans-serif; font-size:11px; color:#1a5f9e; background:rgba(29,111,184,.12);
      border:1px solid rgba(29,111,184,.32); border-radius:11px; padding:2px 9px; cursor:pointer; white-space:nowrap; user-select:none; }
    #searchCount:hover { background:rgba(29,111,184,.2); }
    #searchMode { font-family:system-ui,sans-serif; font-size:10.5px; color:#7a5230; background:transparent;
      border:1px solid rgba(120,90,45,.3); border-radius:11px; padding:2px 8px; cursor:pointer; white-space:nowrap; }
    #searchMode.hide { background:rgba(29,111,184,.14); border-color:rgba(29,111,184,.42); color:#1d6fb8; }
    #searchResults { margin-top:8px; background:rgba(247,240,223,.94); backdrop-filter:blur(18px) saturate(140%);
      -webkit-backdrop-filter:blur(18px) saturate(140%); border:1px solid rgba(120,90,45,.28); border-radius:13px;
      box-shadow:0 12px 34px rgba(40,25,5,.26); max-height:60vh; overflow:auto; display:none; }
    #searchResults.open { display:block; }
    .sgroup { font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:#7a5f30; padding:9px 14px 3px; font-style:italic; }
    .sitem { display:flex; align-items:baseline; gap:10px; padding:7px 14px; cursor:pointer; }
    .sitem.active, .sitem:hover { background:rgba(120,90,45,.13); }
    .sicon { width:11px; height:11px; border-radius:3px; flex:0 0 auto; position:relative; top:2px; }
    .sname { font-size:15.5px; color:var(--ink); }
    .ssub { font-size:12.5px; color:var(--ink-soft); font-style:italic; margin-left:auto; padding-left:12px; white-space:nowrap; }
    .smatch { background:rgba(200,150,40,.35); border-radius:3px; }
    .snone { padding:12px 14px; color:var(--ink-soft); font-style:italic; font-size:14px; }