/* Biodiversity Atlas of Armenia, formal edition: institutional look (white, forest green, one typeface), a title bar with sections. */
:root, :root[data-theme="light"] { --bg:#f4f5f2; --panel:#ffffff; --fg:#1b2420; --fg2:#38443e; --mute:#5e6a64; --dim:#87918b; --line:#e2e6e1; --line2:#cfd6cf; --accent:#1f5a3c; --accent-soft:rgba(31,90,60,.08);
  --tile:#f6f7f4; --card:#ffffff; --glass:#ffffff; --body:"Inter", "Segoe UI", system-ui, sans-serif; --serif:var(--body); --mono:var(--body); --brand:#13372a }
body { font-family:var(--body); font-feature-settings:"cv11", "ss01"; -webkit-font-smoothing:antialiased }
/* one typeface: hierarchy from weight and size; figures line up */
.hstats b, #fpage td.n, #fpage .kv b, [class*=num], #legend { font-variant-numeric:tabular-nums }
html, body { height:100% } body { display:flex; flex-direction:column } #app { flex:1 1 auto; height:auto !important; min-height:0 }

/* the title bar */
#topbar { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px; height:58px; padding:0 22px; box-sizing:border-box; color:var(--brand); z-index:30; position:relative; border-bottom:1px solid #c9dcc4;
  background:linear-gradient(90deg, #eaf3e6 0%, #eaf3e6 28%, rgba(234,243,230,.45) 50%, rgba(234,243,230,0) 85%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='252' height='72.75' viewBox='0 0 252 72.75'%3E%3Cpath d='M21 0l21 12.12v24.25L21 48.5 0 36.37V12.12z' fill='%232f6b33' fill-opacity='.32'/%3E%3Cpath d='M105 24.25l21 12.12v24.26l-21 12.12-21-12.12V36.37z' fill='%2378a85e' fill-opacity='.38'/%3E%3Cpath d='M147 0l21 12.12v24.25L147 48.5l-21-12.13V12.12z' fill='%232f6b33' fill-opacity='.22'/%3E%3Cpath d='M231 24.25l21 12.12v24.26l-21 12.12-21-12.12V36.37z' fill='%23a9d18e' fill-opacity='.6'/%3E%3Cpath d='M189 24.25l21 12.12v24.26l-21 12.12-21-12.12V36.37z' fill='%2313372a' fill-opacity='.16'/%3E%3C/svg%3E") right -20px top -6px / 252px 72.75px repeat-x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='72.75' viewBox='0 0 42 72.75'%3E%3Cg fill='none' stroke='%231f5a3c' stroke-opacity='.24' stroke-width='1'%3E%3Cpath d='M21 0l21 12.12v24.25L21 48.5 0 36.37V12.12z'/%3E%3Cpath d='M0 36.37v24.26L21 72.75 42 60.63V36.37'/%3E%3C/g%3E%3C/svg%3E") right top / 42px 72.75px, #e2eedd }
#topbar .tb-l { display:flex; align-items:center; gap:12px; min-width:0; color:inherit; text-decoration:none }
#topbar .tb-l img { width:30px; height:28px; flex:none; background:#fff; border-radius:4px; padding:3px; box-sizing:content-box; box-shadow:0 0 0 1px #c9dcc4 }
#topbar .tb-t b { display:block; font:600 17px/1.15 var(--serif); letter-spacing:-.01em; white-space:nowrap }
#topbar .tb-t span { display:block; font:400 11.5px var(--body); color:#4c6b58; white-space:nowrap }
#topbar nav { display:flex; gap:4px; height:100% }
#topbar nav button { background:none; border:0; color:#2f5641; font:500 13.5px var(--body); padding:0 12px; cursor:pointer; border-bottom:2px solid transparent; border-top:2px solid transparent; height:100% }
#topbar nav button:hover { color:var(--brand) } #topbar nav button[aria-current="page"] { color:var(--brand); font-weight:600; border-bottom-color:#2f6b33 }
#topbar .tb-menu { display:none; background:rgba(255,255,255,.7); border:1px solid #b9d0b3; color:var(--brand); border-radius:4px; width:40px; height:36px; font-size:18px; cursor:pointer }

/* the map screen: no BETA, promo or repeated title; quiet panels with hairlines */
.beta, #side header .brandrow, #side header h1, #side header .lede { display:none !important }
#topbar .tb-t b .tb-beta { display:inline-block !important; vertical-align:3px; margin-left:8px; font:700 10px/1 var(--body); letter-spacing:.1em; text-transform:uppercase; color:#8a5a1c; background:#f6ead2; border:1px solid #e3cfa4; border-radius:3px; padding:3px 6px }
/* the other Geopix products, in the formal palette */
.promo { background:var(--tile) !important; border-bottom:1px solid var(--line) !important } .promo b { font:600 14px var(--serif) !important; color:var(--brand) !important }
.promo .lock { color:var(--accent) !important } .promo .go3 { background:var(--accent) !important; border-radius:3px !important; font:600 12.5px var(--body) !important } .promo .pmini { color:var(--accent) !important }
#side { background:var(--panel); border-right:1px solid var(--line) } #side header { padding-top:18px !important }
.hstats b { font:600 21px var(--serif) !important; letter-spacing:-.02em; color:var(--brand) !important }
#side h2, .grp, #gal h2, #nums summary, .fold summary { font:600 10.5px var(--body) !important; letter-spacing:.12em !important; text-transform:uppercase; color:var(--accent) !important }
.card, #det, #gal, #legend, #tools .tbtn, #tour, #sheet { border-radius:4px !important; box-shadow:0 1px 2px rgba(20,40,30,.06) !important; border:1px solid var(--line) !important; background:var(--panel) !important; backdrop-filter:none !important }
#tools .tbtn { font:500 13px var(--body) !important; color:var(--fg) } #tools .tbtn[aria-pressed="true"] { background:var(--accent) !important; color:#fff !important; border-color:var(--accent) !important }
#det h3, #tour h3 { font:600 18px/1.25 var(--serif) !important; letter-spacing:-.01em } .sp { border-radius:3px !important } .iu { border-radius:2px !important }
#det .svp, #det .svb .trk i { background:var(--accent) !important } #songBtn[aria-pressed="true"] { background:var(--accent) !important; border-color:var(--accent) !important }

/* the loading screen keeps its show until the visitor goes in */
#boot .bgo { position:relative; z-index:6; display:flex; gap:12px; margin-top:16px; animation:rise .5s ease-out both }
#boot .bgo button { font:600 13px var(--body); letter-spacing:.04em; padding:11px 20px; border-radius:3px; cursor:pointer; border:1px solid #1e90d4; background:transparent; color:#e8f4ff }
#boot .bgo button.p { background:#1e90d4; color:#03121c } #boot .bgo button:hover { filter:brightness(1.15) } #boot .bgo button:focus-visible { outline:2px solid #e8f4ff; outline-offset:3px }
#intro { display:none !important }

/* section pages over the map */
#fpage { position:absolute; left:0; right:0; bottom:0; top:58px; z-index:25; background:var(--bg); overflow-y:auto; display:none }
#fpage.on { display:block }
#fpage .wrap { max-width:1120px; margin:0 auto; padding:34px 28px 60px }
#fpage h1 { font:700 28px/1.15 var(--serif); letter-spacing:-.02em; color:var(--brand); margin:0 0 6px } #fpage .lead { color:var(--mute); font-size:15px; max-width:760px; margin:0 0 24px; line-height:1.55 }
#fpage h2 { font:600 18px var(--serif); letter-spacing:-.01em; text-transform:none; color:var(--brand); margin:30px 0 10px } #fpage p, #fpage li { line-height:1.6; font-size:14px; color:var(--fg2) }
#fpage .fbar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:0 0 16px }
#fpage input[type=search] { -webkit-appearance:none; appearance:none; height:auto; box-sizing:border-box; font:inherit; font-size:14px; padding:9px 12px; border:1px solid var(--line2); border-radius:4px; min-width:260px; background:var(--panel); color:var(--fg) }
#fpage .chip { font:500 12.5px var(--body); padding:6px 12px; border:1px solid var(--line2); border-radius:99px; background:#fff; cursor:pointer; color:var(--fg2); background:var(--panel) } #fpage .chip[aria-pressed="true"] { background:var(--accent); color:#fff; border-color:var(--accent) }
#fpage .tw { overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); background:var(--panel) }
#fpage .tw table { border:0 }
#fpage table { width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--line); font-size:13.5px }
#fpage th { text-align:left; font:600 11px var(--body); letter-spacing:.08em; text-transform:uppercase; color:var(--mute); background:var(--tile); padding:10px 12px; border-bottom:1px solid var(--line) }
#fpage td { padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:middle } #fpage tr:hover td { background:var(--tile) }
#fpage td.n, #fpage th.n { text-align:right; font-variant-numeric:tabular-nums } #fpage .la { color:var(--mute); font-style:italic; font-size:12.5px }
#fpage .thumb { width:64px; height:44px; border-radius:3px; overflow:hidden; background:var(--tile) } #fpage .thumb img { width:100%; height:100%; object-fit:cover; display:block }
#fpage .act { display:flex; gap:6px; justify-content:flex-end } #fpage .act button, #fpage .btn { font:500 12.5px var(--body); padding:6px 11px; border:1px solid var(--line2); border-radius:3px; background:var(--panel); color:var(--accent); cursor:pointer; white-space:nowrap }
#fpage .act button:hover, #fpage .btn:hover { border-color:var(--accent) } #fpage .btn.p { background:var(--accent); color:#fff; border-color:var(--accent) }
#fpage .grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:18px }
#fpage .hcard { background:var(--panel); border:1px solid var(--line); border-radius:4px; overflow:hidden; display:flex; flex-direction:column }
#fpage .hcard img { width:100%; aspect-ratio:1 / 1; object-fit:contain; background:#fff; border-bottom:1px solid var(--line) }
#fpage .hcard .b { padding:12px 14px 14px; display:flex; flex-direction:column; gap:6px; flex:1 } #fpage .hcard h3 { font:600 15.5px var(--serif); letter-spacing:-.005em; margin:0; color:var(--brand) }
#fpage .kv { display:grid; grid-template-columns:auto 1fr; gap:3px 12px; font-size:12.5px } #fpage .kv span { color:var(--mute) } #fpage .kv b { font-weight:600; text-align:right }
#fpage .conf { display:inline-block; font:600 10.5px var(--body); letter-spacing:.06em; text-transform:uppercase; padding:2px 7px; border-radius:2px; background:var(--accent-soft); color:var(--accent) } #fpage .conf.Low { background:#f6eee4; color:#8a5a1c }
#fpage .note { font-size:12.5px; color:var(--mute); border-left:3px solid #c9d6a8; padding:6px 12px; background:var(--panel); margin:12px 0 }
#fpage .kind { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:7px; vertical-align:-1px }
#fpage .cols { columns:2; column-gap:36px } #fpage .cols > * { break-inside:avoid }

@media (max-width:760px) {
  #topbar { height:52px; padding:0 12px } #topbar .tb-t b { font-size:16px } #topbar .tb-t span { display:none }
  #topbar .tb-menu { display:block } #topbar nav { display:none; position:absolute; top:52px; right:0; left:0; flex-direction:column; height:auto; background:#eaf3e6; padding:6px 0 10px; box-shadow:0 8px 20px rgba(20,40,30,.15); border-bottom:1px solid #c9dcc4 }
  #topbar nav.open { display:flex } #topbar nav button { height:46px; text-align:left; padding:0 18px; border:0; font-size:15px } #topbar nav button[aria-current="page"] { background:rgba(47,107,51,.08) }
  #mtitle { display:none !important } #fpage { top:52px } #fpage .wrap { padding:22px 14px 50px } #fpage h1 { font-size:24px } #fpage .cols { columns:1 }
  #fpage table .hide-m { display:none } #fpage td, #fpage th { padding:8px 9px } #fpage .tw table { min-width:520px } #fpage input[type=search] { -webkit-appearance:none; appearance:none; height:auto; box-sizing:border-box; min-width:0; width:100% }
  #boot .bgo { flex-direction:column; width:min(280px, 80vw) } #boot .bgo button { padding:14px 20px }
}
@media print { #topbar nav, #tools, #gal, #rcol { display:none !important } }


/* dark */
:root[data-theme="dark"] { --bg:#0f1513; --panel:#161e1b; --fg:#e7ece8; --fg2:#c3ccc6; --mute:#94a19a; --dim:#6f7c75; --line:#26312c; --line2:#34413a; --accent:#4f9e6b; --accent-soft:rgba(111,191,138,.12);
  --tile:#1c2622; --card:#161e1b; --glass:#161e1b; --brand:#d6ebdc }
:root[data-theme="dark"] #topbar { color:var(--brand); border-bottom-color:#26312c; background:linear-gradient(90deg, #12201a 0%, #12201a 28%, rgba(18,32,26,.45) 50%, rgba(18,32,26,0) 85%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='252' height='72.75' viewBox='0 0 252 72.75'%3E%3Cpath d='M21 0l21 12.12v24.25L21 48.5 0 36.37V12.12z' fill='%234f9e6b' fill-opacity='.32'/%3E%3Cpath d='M105 24.25l21 12.12v24.26l-21 12.12-21-12.12V36.37z' fill='%2378a85e' fill-opacity='.38'/%3E%3Cpath d='M147 0l21 12.12v24.25L147 48.5l-21-12.13V12.12z' fill='%234f9e6b' fill-opacity='.22'/%3E%3Cpath d='M231 24.25l21 12.12v24.26l-21 12.12-21-12.12V36.37z' fill='%23a9d18e' fill-opacity='.22'/%3E%3Cpath d='M189 24.25l21 12.12v24.26l-21 12.12-21-12.12V36.37z' fill='%23cfe6d4' fill-opacity='.16'/%3E%3C/svg%3E") right -20px top -6px / 252px 72.75px repeat-x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='72.75' viewBox='0 0 42 72.75'%3E%3Cg fill='none' stroke='%23a9d18e' stroke-opacity='.24' stroke-width='1'%3E%3Cpath d='M21 0l21 12.12v24.25L21 48.5 0 36.37V12.12z'/%3E%3Cpath d='M0 36.37v24.26L21 72.75 42 60.63V36.37'/%3E%3C/g%3E%3C/svg%3E") right top / 42px 72.75px, #15241d }
:root[data-theme="dark"] #topbar .tb-t span, :root[data-theme="dark"] #topbar nav button { color:#a9bdb0 } :root[data-theme="dark"] #topbar nav button:hover, :root[data-theme="dark"] #topbar nav button[aria-current="page"] { color:#e7ece8; border-bottom-color:#8fe0a8 }
:root[data-theme="dark"] #topbar .tb-menu { background:rgba(22,30,27,.8); border-color:#34413a; color:#e7ece8 } :root[data-theme="dark"] #topbar nav { background:#12201a; border-bottom-color:#26312c }
:root[data-theme="dark"] #topbar .tb-t b .tb-beta { color:#f0c987; background:#3a2e17; border-color:#5a4724 }
:root[data-theme="dark"] .card, :root[data-theme="dark"] #det, :root[data-theme="dark"] #gal, :root[data-theme="dark"] #legend, :root[data-theme="dark"] #tour { box-shadow:0 1px 2px rgba(0,0,0,.4) !important }
:root[data-theme="dark"] #fpage .conf.Low { background:#3a2e17; color:#f0c987 } :root[data-theme="dark"] #fpage .note { border-left-color:#4f9e6b }
:root[data-theme="dark"] #legend .selnm { color:#8fe0a8 !important }
/* insights: a section of the layer list that opens on a click */
.ins-h { display:flex; justify-content:space-between; align-items:center; width:100%; background:none; border:0; border-top:1px solid var(--line2); padding:10px 0 4px; margin-top:12px; cursor:pointer; text-align:left }
.ins-h span { font-weight:500; letter-spacing:.04em; color:var(--dim) }
.ins-h:hover span, .ins-h:focus-visible span { color:var(--accent) }