/* Shared chrome for the WtMTA species-tree views (cladogram.html + cladogram_circular.html).
   View-specific tree/track mark styling lives in each page's own <style> block. */
:root{  /* LIGHT is the default — the datasette site around these plots has no dark mode (0.64.3), so we
           keep the plots light for site-wide consistency and let users opt just the plots into dark. */
  --fg:#1a1a1a; --muted:#666; --line:#b3b3b3; --card:#fff; --border:#e2e2e2; --bg:#fff;
  --ink-sci:#2a2a2a; --track-bg:#ececec; --cell-stroke:#00000022;
}
/* Three-state plot theme toggle (theme.js sets data-theme on <html>): default is LIGHT (no/unknown attr),
   "dark" forces dark, "auto" follows the OS. Default is light — NOT auto — so a dark-OS user doesn't get
   dark plots on an otherwise-all-light site unless they opt in. The dark var block is shared by both the
   explicit-dark selector and the auto+OS-dark case. */
:root[data-theme="dark"],
:root[data-theme="auto"] { color-scheme: light dark; }
:root[data-theme="dark"]{
  --fg:#e8e8e8; --muted:#9a9a9a; --line:#666; --card:#161616; --bg:#0f0f0f;
  --border:#2c2c2c; --ink-sci:#d8d8d8; --track-bg:#2a2a2a; --cell-stroke:#ffffff33;
}
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"]{
    --fg:#e8e8e8; --muted:#9a9a9a; --line:#666; --card:#161616; --bg:#0f0f0f;
    --border:#2c2c2c; --ink-sci:#d8d8d8; --track-bg:#2a2a2a; --cell-stroke:#ffffff33;
  }
}
html,body{margin:0}
body{font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--fg);background:var(--bg);padding:16px}
h1{font-size:1.55rem;margin:.2em 0 .3em;font-weight:800;letter-spacing:-.01em}
.sub{color:var(--muted);max-width:64ch;margin:0 0 .8em}
.sub b{color:var(--fg)}

.legend{display:flex;align-items:center;gap:.15rem .45rem;flex-wrap:wrap;margin:0 0 .5em;color:var(--muted);font-size:11.5px}
/* #35: search + label checkboxes + expand share one wrapping row; the tracks legend stays visible (compact)
   while only the clade legend collapses into its own disclosure. */
.topbar-controls{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .85rem;margin:0 0 .4em}
.topbar-controls .tree-find,.topbar-controls .toggle{margin:0}
.legend-row{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .9rem;margin:0 0 .35em}
.legend-row .legend{margin:0}
.legend-row .legend-box{margin:0}
/* Keep each glyph+label on ONE line so a slash-label ("partial / uncertain", "absent / n.a.") can't wrap
   and drop its icon out of alignment; the legend wraps whole items to a new row instead of shrinking them. */
.legend .sw{display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap;flex-shrink:0}
.legend .chip{display:inline-block;width:11px;height:11px;border-radius:2px}
.legend .grad{display:inline-block;width:74px;height:11px;border-radius:2px;border:1px solid var(--cell-stroke)}
.legend .hatch{display:inline-block;width:11px;height:11px;border-radius:2px;border:1px solid var(--cell-stroke);
  background-image:repeating-linear-gradient(45deg,var(--muted) 0 1.5px,transparent 1.5px 4px);background-color:var(--track-bg)}
.legend .sep{width:1px;height:14px;background:var(--border)}

/* breadcrumb trail floats at the top of the scroll area so "back" is reachable without scrolling up */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;margin:0;font-size:12.5px;
  position:sticky;top:0;z-index:5;background:var(--bg);padding:.45em 0}
.crumbs:empty{display:none}
.crumbs a{color:var(--muted);cursor:pointer;text-decoration:none;padding:1px 6px;border-radius:6px;background:var(--track-bg)}
.crumbs a:hover{text-decoration:underline}
.crumbs a.here{color:var(--fg);font-weight:600;background:var(--border)}
.crumbs .arr{color:var(--muted)}

/* #33: pin the search box + legends + controls to the top of the (fixed-height) /explore view frame so
   the tree stays usable while you search/toggle, and a search result is never left hidden above the fold.
   The whole cluster is one sticky bar; the inner .crumbs drops its own sticky (the parent handles it). */
.topbar{position:sticky;top:0;z-index:20;background:var(--bg);padding-top:.2em;
  box-shadow:0 6px 12px -9px rgba(0,0,0,.4)}
.topbar .crumbs{position:static;z-index:auto;padding:.1em 0 .35em}
/* #33: fold the (bulky) legends into a default-closed disclosure so the sticky bar stays compact;
   the color/track key is one click away when needed. buildLegends() still targets #legClade/#legTracks. */
.legend-box{margin:0 0 .45em}
.legend-box>summary{cursor:pointer;color:var(--muted);font-size:12px;font-weight:600;user-select:none;
  list-style:none;display:inline-flex;align-items:center;gap:.35rem;padding:2px 9px;
  border:1px solid var(--border);border-radius:999px}
.legend-box>summary::-webkit-details-marker{display:none}
.legend-box>summary::before{content:"▸";font-size:9px;transition:transform .15s ease}
.legend-box[open]>summary::before{transform:rotate(90deg)}
.legend-box>summary:hover{border-color:var(--fg);color:var(--fg)}
.legend-box[open]>summary{margin-bottom:.5em}
.legend-box .legend:last-child{margin-bottom:0}

.wrap{position:relative;border:1px solid var(--border);border-radius:12px;background:var(--card);overflow:hidden}
/* Float the zoom controls fixed to the view frame so they stay reachable while scrolling a tall tree.
   Pinned TOP-right, hugging the bottom of the sticky topbar: JS (Clado.pinControls) keeps `top` in sync
   with the topbar's bottom edge so the panel sits at the top of the visible tree canvas at every scroll
   position (the tall rect SVG scrolls UNDER the pinned topbar). The `top` here is just a pre-JS fallback. */
.controls{position:fixed;right:16px;top:120px;display:flex;flex-direction:column;gap:4px;z-index:30}
.controls button{width:32px;height:32px;border:1px solid var(--border);background:var(--card);color:var(--fg);
  border-radius:7px;font-size:17px;line-height:1;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.controls button:active{transform:translateY(1px)}
.controls button.reset{font-size:11px;font-weight:600}
svg{display:block;width:100%;height:auto;touch-action:pan-x pan-y;-webkit-tap-highlight-color:transparent}

/* vector-effect:non-scaling-stroke holds stroke width + dash pattern CONSTANT on screen under
   zoom — without it, branches/leaders scale into thick bars and giant dashes as you zoom in. */
.link{fill:none;stroke-width:1.6px;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.leader{stroke:var(--line);stroke-width:1px;stroke-dasharray:2 3;opacity:.6;vector-effect:non-scaling-stroke}
.labelbg{fill:var(--card);fill-opacity:.72;stroke:none}
.inode{cursor:pointer}
.inode:hover text{text-decoration:underline}
.inode .idot{fill:var(--card);stroke-width:1.4px;vector-effect:non-scaling-stroke}

.toggle{display:inline-flex;align-items:center;gap:.35rem;color:var(--muted);font-size:12.5px;cursor:pointer;user-select:none;margin:0 0 .5em}
.hint{color:var(--muted);font-size:12.5px;margin:.5em 2px 0}

/* species search typeahead (shared by both tree views; JS in cladogram_common.js installFind) */
.tree-find{position:relative;display:inline-block;margin:0 0 .6em;vertical-align:middle}
.tree-find-input{font:inherit;font-size:13px;color:var(--fg);background-color:var(--card);
  border:1px solid var(--border);border-radius:8px;padding:5px 10px 5px 28px;width:230px;max-width:70vw;
  background-repeat:no-repeat;background-position:9px center;background-size:14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23888' stroke-width='1.6'%3E%3Ccircle cx='7' cy='7' r='4.2'/%3E%3Cpath d='M10.5 10.5L14 14'/%3E%3C/svg%3E")}
.tree-find-input::-webkit-search-cancel-button{cursor:pointer}
.tree-find-input:focus{outline:none;border-color:var(--fg)}
.tree-find-menu{position:absolute;left:0;top:calc(100% + 3px);z-index:20;min-width:250px;max-width:min(380px,92vw);
  max-height:min(320px,60vh);overflow-y:auto;background:var(--card);border:1px solid var(--border);
  border-radius:9px;box-shadow:0 8px 26px rgba(0,0,0,.22);padding:4px}
.tree-find-menu .tf-row{display:flex;flex-direction:column;gap:1px;padding:5px 9px;border-radius:6px;cursor:pointer}
.tree-find-menu .tf-row.active{background:var(--track-bg)}
.tree-find-menu .tf-sci{font-style:italic;font-size:13px;color:var(--ink-sci);line-height:1.25}
.tree-find-menu .tf-common{font-size:11px;color:var(--muted);line-height:1.15}
.tree-find-menu .tf-empty{padding:6px 9px;color:var(--muted);font-size:12.5px}

/* rectangular tree: flash a searched-to species (persistent amber, removed after ~2.6s) */
.tip.tip-found circle.node{stroke:#e8a800;stroke-width:4px}
.tip.tip-found .tip-sci{fill:#c8890c;font-weight:700;text-decoration:underline}
