/* AntTree stylesheet. Colours come from config.js (injected as CSS variables).
   You normally don't need to touch this file — change colours in config.js. */

:root{
  --primary:#5a3a22; --accent:#c8862b; --text:#2b2b2b;
  --bg:#f6f1e7; --header-text:#fff;
  --font:'Segoe UI',system-ui,Helvetica,Arial,sans-serif;
  --maxw:1600px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font); color:var(--text);
  background-color:var(--bg); background-size:cover; background-position:center;
  background-attachment:fixed; background-repeat:no-repeat;
  line-height:1.6;
  /* sticky footer: fill at least the full window height */
  min-height:100vh; display:flex; flex-direction:column;
}
/* when a background image is set, keep page text readable */
body.has-bg main .card{background:rgba(255,255,255,.96)}
a{color:var(--primary)}
img{max-width:100%}

/* ---------- header / nav ---------- */
header.site{background:var(--primary); color:var(--header-text)}
.nav-wrap{max-width:var(--maxw); margin:0 auto; display:flex; align-items:center;
  gap:20px; padding:12px 20px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--header-text)}
.brand img{height:60px; width:auto}
.brand .name{font-size:1.5rem; font-weight:700; letter-spacing:.5px}
nav.main{margin-left:auto; display:flex; gap:4px; flex-wrap:wrap}
nav.main .item{position:relative}
nav.main a,nav.main .toplabel{
  display:block; color:var(--header-text); text-decoration:none; padding:10px 14px;
  border-radius:6px; font-weight:600; cursor:pointer; white-space:nowrap}
nav.main a:hover,nav.main .toplabel:hover,nav.main a.active{background:var(--accent)}
nav.main .dropdown{
  position:absolute; top:100%; left:0; background:var(--primary);
  min-width:190px; border-radius:6px; padding:6px; display:none;
  box-shadow:0 8px 20px rgba(0,0,0,.25); z-index:50}
nav.main .item:hover .dropdown{display:block}
nav.main .dropdown a{padding:8px 12px}

/* ---------- layout ---------- */
main{max-width:var(--maxw); margin:0 auto; padding:32px 20px 60px;
  width:100%; flex:1 0 auto}   /* grow to push the footer to the bottom */
.card{background:#fff; border:1px solid #e6ddcd; border-radius:12px;
  padding:24px 28px; margin-bottom:24px; box-shadow:0 2px 8px rgba(0,0,0,.04)}
h1{color:var(--primary); margin-top:0}
h2{color:var(--primary)}
.subtitle{color:var(--accent); font-style:italic; margin-top:-6px}
.hero{width:100%; border-radius:12px; margin-bottom:24px; object-fit:cover; max-height:340px}
.citation{background:#faf6ee; border-left:4px solid var(--accent);
  padding:12px 16px; border-radius:6px; font-size:.95rem}

/* ---------- stat cards ---------- */
.stats{display:flex; flex-wrap:wrap; gap:16px; margin:14px 0 4px}
.stat{flex:1 1 160px; background:var(--primary); color:#fff; border-radius:12px;
  padding:20px; text-align:center}
.stat .v{font-size:2rem; font-weight:800; color:var(--accent)}
.stat .l{font-size:.9rem; opacity:.95}

/* ---------- tables ---------- */
table.data{width:100%; border-collapse:collapse; font-size:.94rem}
table.data th,table.data td{padding:10px 12px; border-bottom:1px solid #ece3d3; text-align:left}
table.data th{background:var(--primary); color:#fff; cursor:pointer; position:sticky; top:0}
table.data tr:nth-child(even) td{background:#faf7f0}
table.data tr:hover td{background:#f2e9d8}
.table-scroll{max-height:70vh; overflow:auto; border-radius:10px; border:1px solid #e6ddcd}
.search{width:100%; max-width:340px; padding:9px 12px; border:1px solid #cbb79a;
  border-radius:8px; margin-bottom:14px; font-size:.95rem}

/* ---------- buttons ---------- */
.btn{display:inline-block; background:var(--primary); color:#fff; text-decoration:none;
  padding:11px 18px; border-radius:8px; border:none; font-weight:700; cursor:pointer;
  font-size:.95rem}
.btn:hover{background:var(--accent)}
.btn.secondary{background:#fff; color:var(--primary); border:2px solid var(--primary)}
.btn.secondary:hover{background:var(--primary); color:#fff}
.btn[disabled]{opacity:.5; cursor:not-allowed}

/* ---------- pruner ---------- */
.pruner-tabs{display:flex; gap:8px; margin-bottom:16px}
.pruner-tabs .tab{padding:10px 16px; border-radius:8px 8px 0 0; cursor:pointer;
  background:#eaddc7; font-weight:600}
.pruner-tabs .tab.active{background:#fff; border:1px solid #e6ddcd; border-bottom:none}
.pane{display:none}
.pane.active{display:block}
textarea.species{width:100%; min-height:160px; padding:12px; border:1px solid #cbb79a;
  border-radius:8px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.9rem}
.taxo{border:1px solid #e6ddcd; border-radius:8px; padding:10px; max-height:420px; overflow:auto; background:#fff}
.taxo details{margin:2px 0}
.taxo summary{cursor:pointer; font-weight:600; color:var(--primary); padding:3px 0}
.taxo label{display:block; padding:2px 0 2px 24px; font-size:.92rem}
.taxo .genus{padding-left:20px}
.taxo .species-list{padding-left:36px}
.result-box{background:#faf6ee; border:1px solid #e6ddcd; border-radius:8px;
  padding:14px; margin-top:16px; font-size:.92rem}
.result-box code{word-break:break-all}
.pill{display:inline-block; background:var(--accent); color:#fff; border-radius:20px;
  padding:2px 12px; font-size:.85rem; font-weight:700}

/* ---------- pruner: rank selector + group buttons ---------- */
.rank-tabs{display:flex; gap:8px; margin:6px 0 16px; flex-wrap:wrap}
.rank-tab{padding:8px 18px; border-radius:22px; border:2px solid var(--primary);
  background:#fff; color:var(--primary); font-weight:700; cursor:pointer; font-size:.92rem}
.rank-tab:hover{border-color:var(--accent); color:var(--accent)}
.rank-tab.active{background:var(--primary); color:#fff; border-color:var(--primary)}
.group-grid{display:flex; flex-wrap:wrap; gap:8px; min-height:44px}
.group-btn{display:inline-flex; align-items:center; gap:7px; padding:8px 14px;
  border-radius:8px; border:1px solid #cbb79a; background:#fff; color:var(--text);
  cursor:pointer; font-size:.92rem}
.group-btn:hover{border-color:var(--accent)}
.group-btn.active{background:var(--accent); color:#fff; border-color:var(--accent)}
.group-btn .gcount{font-size:.76rem; background:rgba(0,0,0,.12); border-radius:10px; padding:1px 8px}
.group-btn.active .gcount{background:rgba(255,255,255,.28)}

/* ---------- team ---------- */
.members{display:flex; flex-wrap:wrap; gap:22px; margin-top:8px}
.member{flex:1 1 320px; display:flex; gap:18px; background:#fff;
  border:1px solid #e6ddcd; border-radius:14px; padding:20px}
.member .avatar{width:104px; height:104px; border-radius:14px; object-fit:cover;
  background:#efe7d8; border:1px solid #e6ddcd; flex:0 0 auto}
.member .minfo{min-width:0}
.member .mname{font-size:1.2rem; font-weight:700; color:var(--primary)}
.member .role{color:var(--accent); font-weight:700}
.member .affil{color:#6f5f49; font-size:.95rem}
.member .mdesc{margin:10px 0 8px}
.member .mlinks{display:flex; gap:8px; flex-wrap:wrap}
.member .mlinks .btn{padding:6px 12px; font-size:.85rem}
@media(max-width:480px){ .member{flex-direction:column} }

/* ---------- footer ---------- */
footer.site{background:var(--primary); color:var(--header-text); flex-shrink:0}
footer.site .in{max-width:var(--maxw); margin:0 auto; padding:22px 20px;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  flex-wrap:wrap; font-size:.9rem}
footer.site a{color:var(--accent)}
.footer-logos{display:flex; align-items:center; gap:50px; flex-wrap:wrap; justify-content:center}
.footer-logos .flogo{background:#fff; border-radius:8px; padding:6px 10px; display:inline-flex}
.footer-logos .flogo img{height:80px; width:auto; display:block}

@media(max-width:720px){
  .nav-wrap{flex-wrap:wrap}
  nav.main{margin-left:0; width:100%}
}