/* =================================================================
   The Begonia Collection — FWBG Design System build
   Tokens loaded separately by the HTML shell (tokens-fwbg.css or
   tokens-unbranded.css) before this file, so both token packs can
   publish side by side without touching this stylesheet.
   Display: New Kansas (Georgia fallback) · UI: Satoshi
   Surfaces: Limestone · Accent: Evergreen/Sunstone
   ================================================================= */

:root{
  --paper:var(--color-bg);
  --card:var(--color-bg-lighter);
  --ink:var(--color-contrast-higher);
  --ink-soft:var(--color-contrast-medium);
  --line:var(--color-bg-dark);
  --accent:var(--color-primary);
  --accent-soft:hsla(var(--color-primary-h),var(--color-primary-s),var(--color-primary-l),.07);
  --hot:var(--color-accent);
  --fs:1;
  --display:"new-kansas",Georgia,serif;
  --sans:Satoshi,Arial,sans-serif;
  --mono:Satoshi,Arial,sans-serif;
  --card-radius:var(--radius-xl);
  --shadow:var(--shadow-xs);
  --shadow-hover:var(--shadow-md);
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:500;font-size:calc(16px * var(--fs));line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
em{font-style:italic}
button{font-family:inherit;color:inherit;cursor:pointer}
a{color:var(--link-color);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--link-color-hover)}
:focus-visible{outline:2px solid var(--color-bg-darker);outline-offset:2px}

.app{max-width:1240px;margin:0 auto;padding:clamp(20px,4vw,56px) clamp(16px,4vw,48px) 96px}
.app--embed{padding-top:16px}

/* ---------- Masthead ---------- */
.masthead{position:relative;padding-bottom:28px;border-bottom:1px solid var(--line);overflow:hidden}
.masthead--embed .statbar{margin-top:0}
.masthead__leaf{position:absolute;top:-120px;right:-120px;width:320px;height:320px;opacity:.1;mix-blend-mode:multiply;pointer-events:none}
.masthead__brand{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.masthead__logo{height:52px;width:auto;flex:none}
.masthead__rule{width:1px;align-self:stretch;background:var(--line)}
.masthead__wordmark{font-size:calc(18px * var(--fs));font-weight:700;color:var(--ink);letter-spacing:.01em}
.masthead__eyebrow{font-size:calc(12px * var(--fs));letter-spacing:.12em;text-transform:uppercase;color:var(--color-primary-lighter);font-weight:700}
.masthead__title{font-family:var(--display);font-weight:100;font-size:clamp(34px,5.4vw,58px);line-height:1.1;margin:14px 0 0;letter-spacing:-.005em}
.masthead__title em{font-style:normal;font-weight:500}
.masthead__lede{font-size:calc(18px * var(--fs));line-height:1.5;color:var(--text-body);max-width:62ch;margin:16px 0 0;text-wrap:pretty}
.masthead__lede em{font-style:italic}

/* ---------- Stat bar ---------- */
.statbar{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,3vw,40px);margin-top:32px}
.stat{border-left:2px solid var(--color-secondary);padding-left:16px}
.stat__num{font-size:clamp(28px,4vw,42px);font-weight:300;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat__lbl{font-size:calc(14px * var(--fs));font-weight:700;margin-top:8px}
.stat__sub{font-size:calc(13px * var(--fs));color:var(--ink-soft);margin-top:2px}

/* ---------- Tabs + search ---------- */
.tabs{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:28px 0 0;position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(8px);padding:12px 0;border-bottom:1px solid var(--line)}
.tabs__group{display:flex;gap:6px;min-width:0;max-width:100%;overflow-x:auto}
.tab{border:none;background:none;font-size:calc(15px * var(--fs));font-weight:700;color:var(--ink-soft);padding:9px 18px;border-radius:var(--btn-radius);display:flex;align-items:center;gap:8px;transition:all .2s ease;flex-shrink:0;white-space:nowrap}
.tab:hover{color:var(--ink);background:var(--accent-soft)}
.tab.is-active{background:var(--color-primary);color:var(--color-bg-lighter)}
.tab.is-active:hover{background:var(--color-primary-dark)}
.tab__n{font-size:.8em;background:hsla(0,0%,100%,.2);padding:2px 8px;border-radius:var(--radius-full);font-variant-numeric:tabular-nums}
.tab:not(.is-active) .tab__n{background:var(--accent-soft);color:var(--accent)}

.search{position:relative;display:flex;align-items:center;flex:1;max-width:380px;min-width:200px}
.search__icon{width:17px;height:17px;position:absolute;left:14px;color:var(--ink-soft)}
.search input{width:100%;font-family:var(--sans);font-weight:500;font-size:calc(14px * var(--fs));color:var(--ink);background:var(--card);border:none;box-shadow:inset 0 0 0 1px var(--color-bg-darker);border-radius:var(--radius-full);padding:10px 34px 10px 38px;outline:none;transition:all .2s ease}
.search input:focus{box-shadow:inset 0 0 0 1px var(--color-primary),0 0 0 2px var(--color-bg-darker)}
.search input::placeholder{color:var(--ink-soft)}
.search__clear{position:absolute;right:10px;border:none;background:none;font-size:20px;color:var(--ink-soft);line-height:1;padding:4px}

.toolbar{display:flex;align-items:center;gap:12px;flex:1;justify-content:flex-end}
.segmented{display:inline-flex;padding:3px;gap:2px;background:var(--card);box-shadow:inset 0 0 0 1px var(--color-bg-darker);border-radius:var(--radius-full);flex-shrink:0}
.segmented__btn{border:none;background:none;font-size:calc(13px * var(--fs));font-weight:700;color:var(--ink-soft);padding:6px 15px;border-radius:var(--radius-full);transition:all .2s ease}
.segmented__btn:hover{color:var(--ink)}
.segmented__btn.is-active{background:var(--color-primary);color:var(--color-bg-lighter)}
@media (max-width:640px){.toolbar{flex-wrap:wrap}.search{max-width:none}}

/* ---------- Filter bar ---------- */
.filterbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;font-size:calc(13.5px * var(--fs))}
.filterbar__count{color:var(--ink-soft)}
.filterbar__count strong{color:var(--ink);font-variant-numeric:tabular-nums}
.filterbar__pct{color:var(--color-accent-darker);margin-left:8px;font-weight:700}
.fchip{display:inline-flex;align-items:center;gap:6px;border:none;box-shadow:inset 0 0 0 1px var(--color-primary);color:var(--accent);background:var(--accent-soft);border-radius:var(--radius-full);padding:5px 12px;font-size:calc(12.5px * var(--fs));font-weight:700;transition:all .2s ease}
.fchip:hover{background:hsla(var(--color-primary-h),var(--color-primary-s),var(--color-primary-l),.14)}
.fchip__x{font-size:1.1em;opacity:.7}
.fchip:hover .fchip__x{opacity:1}
.filterbar__clear{border:none;background:none;color:var(--ink-soft);text-decoration:underline;font-size:calc(12.5px * var(--fs))}
.filterbar__clear:hover{color:var(--color-accent-darker)}

/* ---------- Dashboard grid ---------- */
.content{margin-top:24px}
.dashgrid{display:grid;grid-template-columns:2fr 1fr;gap:20px}
.panel{background:var(--card);border-radius:var(--card-radius);padding:24px 26px;box-shadow:var(--shadow);transition:box-shadow .2s ease;min-width:0}
.panel:hover{box-shadow:var(--shadow-hover)}
.panel--wide{grid-column:1 / -1}
.panel__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:18px}
.panel__title{font-size:calc(20px * var(--fs));font-weight:700;margin:0;letter-spacing:-.01em}
.panel__sub{font-size:calc(13.5px * var(--fs));color:var(--ink-soft);margin:4px 0 0}
.panel__hint,.panel__action{font-size:calc(11.5px * var(--fs));color:var(--ink-soft);text-transform:uppercase;letter-spacing:.09em;font-weight:700}
@media (max-width:860px){.dashgrid{grid-template-columns:1fr}.statbar{grid-template-columns:repeat(2,1fr);row-gap:22px}}

/* ---------- Bar list ---------- */
.barlist{display:flex;flex-direction:column;gap:7px}
.barrow{display:grid;grid-template-columns:minmax(120px,.9fr) 1fr auto auto;align-items:center;gap:12px;border:none;background:none;padding:6px 8px;border-radius:var(--radius-lg);text-align:left;transition:all .2s ease}
.barrow:hover,.barrow.is-active{background:var(--accent-soft)}
.barrow.is-dim{opacity:.4}
.barrow__label{font-size:calc(13.5px * var(--fs));font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barrow__track{height:12px;background:var(--color-bg-dark);border-radius:var(--radius-full);overflow:hidden}
.barrow__fill{display:block;height:100%;border-radius:var(--radius-full);transition:width .5s var(--ease-out)}
.barrow__count{font-size:calc(13px * var(--fs));font-weight:700;text-align:right;min-width:44px;font-variant-numeric:tabular-nums}
.barrow__pct{font-size:calc(11.5px * var(--fs));color:var(--ink-soft);text-align:right;min-width:34px;font-variant-numeric:tabular-nums}

/* ---------- Donut ---------- */
.donutwrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.donut{width:150px;height:150px;flex:none}
.donut__num{font-size:26px;font-weight:300;fill:var(--ink);font-family:var(--sans)}
.donut__lbl{font-family:var(--sans);font-size:10px;font-weight:700;fill:var(--ink-soft);letter-spacing:.09em;text-transform:uppercase}
.donut__legend{display:flex;flex-direction:column;gap:4px;flex:1;min-width:150px}
.leg{display:flex;align-items:center;gap:9px;border:none;background:none;padding:6px 8px;border-radius:var(--radius-lg);text-align:left;transition:all .2s ease}
.leg:hover,.leg.is-active{background:var(--accent-soft)}
.leg.is-dim{opacity:.4}
.leg__dot{width:10px;height:10px;border-radius:var(--radius-full);flex:none}
.leg__lbl{flex:1;font-size:calc(13px * var(--fs))}
.leg__num{font-size:calc(13px * var(--fs));font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- Timeline ---------- */
.timeline{display:flex;align-items:flex-end;gap:4px;height:200px;padding-top:8px;overflow-x:auto}
.tl__col{flex:1;min-width:24px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;border:none;background:none;height:100%;border-radius:var(--radius-lg);transition:all .2s ease}
.tl__col:hover,.tl__col.is-active{background:var(--accent-soft)}
.tl__col.is-dim{opacity:.42}
.tl__count{font-size:calc(11px * var(--fs));color:var(--ink-soft);height:14px;font-variant-numeric:tabular-nums}
.tl__bar{width:100%;max-width:46px;background:var(--color-primary);border-radius:4px 4px 0 0;min-height:0;transition:height .5s var(--ease-out),background .2s ease}
.tl__col.is-active .tl__bar{background:var(--color-accent)}
.tl__year{font-size:calc(11px * var(--fs));color:var(--ink-soft);font-variant-numeric:tabular-nums}

/* ---------- Table ---------- */
.tablewrap{background:var(--card);border-radius:var(--card-radius);box-shadow:var(--shadow);overflow-x:auto;overflow-y:hidden}
.dtable{width:100%;border-collapse:collapse;font-size:calc(13.5px * var(--fs))}
.dtable thead th{position:sticky;top:57px;z-index:5;background:var(--color-bg-light);text-align:left;font-size:calc(11.5px * var(--fs));text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);font-weight:700;padding:13px 16px;border-bottom:1px solid var(--line);white-space:nowrap;cursor:pointer;user-select:none;transition:color .2s ease}
.dtable thead th:hover{color:var(--ink)}
.dtable thead th.is-sorted{color:var(--accent)}
.dtable thead th.is-num{text-align:right}
.th__inner{display:inline-flex;align-items:center;gap:5px}
.th__arrow{font-size:8px}
.dtable tbody td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.dtable tbody tr{transition:background .2s ease;cursor:pointer}
.dtable tbody tr:hover{background:var(--accent-soft)}
.dtable tbody tr.is-open{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--color-accent)}
.dtable tbody tr:last-child td{border-bottom:none}
.is-num{text-align:right;font-variant-numeric:tabular-nums}
.is-mono{font-variant-numeric:tabular-nums;color:var(--ink-soft)}
.taxon__g{color:var(--ink-soft);font-style:italic}
.taxon em{font-weight:700}
.cell-empty{color:var(--color-contrast-low)}
.loadmore{padding:16px;text-align:center;font-size:calc(12.5px * var(--fs));color:var(--ink-soft)}

/* chips */
.chip{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:calc(12.5px * var(--fs))}
.chip__dot{width:9px;height:9px;border-radius:var(--radius-full);flex:none}
.chip--status{padding:3px 11px;border-radius:var(--radius-full);font-size:calc(11.5px * var(--fs));font-weight:700;color:var(--sc);background:color-mix(in srgb,var(--sc) 14%,transparent)}

/* ---------- Detail panel ---------- */
.scrim{position:fixed;inset:0;background:hsla(var(--color-primary-darker-h),var(--color-primary-darker-s),var(--color-primary-darker-l),.35);backdrop-filter:blur(2px);z-index:40;animation:fade .2s ease}
/* TODO: in index-embed.html, the parent auto-resizes the iframe to full content
   scrollHeight, so 100vh here can end up much taller than a normal screen once
   that height is applied. Still works (overflow-y:auto), just visually oversized. */
.detail{position:fixed;top:0;right:0;height:100vh;width:min(470px,94vw);z-index:50;background:var(--card);box-shadow:var(--shadow-xl);overflow-y:auto;padding:30px 32px 60px;animation:slidein .26s var(--ease-out)}
@keyframes fade{from{opacity:0}}
@keyframes slidein{from{transform:translateX(30px);opacity:0}}
.detail__close{position:absolute;top:18px;right:18px;border:none;box-shadow:inset 0 0 0 1px var(--color-bg-darker);background:var(--paper);width:34px;height:34px;border-radius:var(--radius-full);font-size:20px;line-height:1;color:var(--ink-soft);display:grid;place-items:center;transition:all .2s ease}
.detail__close:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--color-primary)}
.detail__head{border-bottom:1px solid var(--line);padding-bottom:18px}
.detail__acc{font-size:calc(12.5px * var(--fs));color:var(--color-accent-darker);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.detail__name{font-family:var(--display);font-weight:100;font-size:calc(30px * var(--fs));margin:8px 0 0;line-height:1.15}
.detail__genus{font-style:italic}
.detail__name em{font-style:normal;font-weight:500}
.detail__recv{font-size:calc(14px * var(--fs));color:var(--ink-soft);margin-top:6px}
.detail__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.tag{display:inline-flex;align-items:center;gap:7px;border:none;box-shadow:inset 0 0 0 1px var(--color-bg-darker);background:var(--paper);border-radius:var(--radius-full);padding:6px 13px;font-size:calc(12.5px * var(--fs));font-weight:500;transition:all .2s ease}
.tag:hover{box-shadow:inset 0 0 0 1px var(--color-primary);background:var(--accent-soft)}
.detail__habitnote{font-style:italic;color:var(--ink-soft);font-size:calc(15px * var(--fs));margin:16px 0 0;line-height:1.5}
.detail__sec{margin-top:24px}
.detail__sec h3{font-size:calc(11.5px * var(--fs));text-transform:uppercase;letter-spacing:.1em;color:var(--color-primary-lighter);font-weight:700;margin:0 0 10px}
.detail__sec dl{margin:0}
.drow{display:grid;grid-template-columns:132px 1fr;gap:12px;padding:8px 0;border-bottom:1px solid var(--color-contrast-lower)}
.drow dt{font-size:calc(12.5px * var(--fs));color:var(--ink-soft)}
.drow dd{margin:0;font-size:calc(13.5px * var(--fs))}
.muted{color:var(--ink-soft)}
.note{font-size:calc(14.5px * var(--fs));line-height:1.55;margin:0 0 10px;padding:13px 16px;background:var(--paper);border-radius:var(--radius-lg);box-shadow:inset 3px 0 0 var(--color-secondary)}
.note.muted{box-shadow:inset 3px 0 0 var(--color-bg-darker)}

@media (max-width:560px){.statbar{grid-template-columns:1fr 1fr}.barrow{grid-template-columns:minmax(90px,.9fr) 1fr auto}.barrow__pct{display:none}}

/* ---------- Species cell ---------- */
.speciescell{border:none;background:none;padding:3px 9px;margin:-3px -9px;border-radius:var(--radius-full);font-size:inherit;color:var(--ink);transition:all .2s ease;white-space:nowrap;display:inline-block}
.speciescell em{font-style:italic}
.speciescell:hover{background:var(--accent-soft);color:var(--accent)}
.speciescell.is-active{background:var(--color-primary);color:var(--color-bg-lighter)}

/* ---------- Conservation ---------- */
.consv__intro{display:flex;flex-direction:column;gap:26px}
.consv__lede .panel__sub{max-width:64ch;font-size:calc(15px * var(--fs));line-height:1.55;margin-top:8px}
.consv__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,3vw,36px)}

.tiers{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:center}
.tiers__bar{display:flex;height:46px;border-radius:var(--radius-lg);overflow:hidden;gap:2px}
.tiers__seg{border:none;padding:0;min-width:8px;position:relative;transition:all .2s ease;display:flex;align-items:center;justify-content:center}
.tiers__seg:hover{filter:brightness(1.08)}
.tiers__seg.is-dim{opacity:.4}
.tiers__seg.is-active{box-shadow:inset 0 0 0 2px hsla(0,0%,100%,.75)}
.tiers__seglbl{font-size:calc(11.5px * var(--fs));font-weight:700;color:hsla(0,0%,100%,.95);font-variant-numeric:tabular-nums}
.tiers__legend{display:flex;flex-direction:column;gap:2px}
.tierleg{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:11px;border:none;background:none;text-align:left;padding:9px;border-radius:var(--radius-lg);transition:all .2s ease}
.tierleg:hover,.tierleg.is-active{background:var(--accent-soft)}
.tierleg.is-dim{opacity:.45}
.tierleg__dot{width:11px;height:11px;border-radius:var(--radius-full);margin-top:4px}
.tierleg__txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.tierleg__lbl{font-size:calc(13.5px * var(--fs));font-weight:700}
.tierleg__note{font-size:calc(12px * var(--fs));color:var(--ink-soft);line-height:1.4;text-wrap:pretty}
.tierleg__num{font-size:calc(14px * var(--fs));font-weight:700;font-variant-numeric:tabular-nums}

.wildgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:12px}
.wildcard{box-shadow:inset 0 0 0 1px var(--color-bg-darker),inset 3px 0 0 var(--color-accent);background:var(--paper);border:none;border-radius:var(--radius-lg);padding:15px 18px;text-align:left;display:flex;flex-direction:column;gap:8px;transition:all .2s ease}
.wildcard:hover{box-shadow:inset 0 0 0 1px var(--color-accent),inset 3px 0 0 var(--color-accent),var(--shadow-md)}
.wildcard__top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.wildcard__acc{font-size:calc(11.5px * var(--fs));color:var(--ink-soft);white-space:nowrap;font-variant-numeric:tabular-nums}
.wildcard__country{font-size:calc(10.5px * var(--fs));font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-accent-darker);background:hsla(var(--color-accent-h),var(--color-accent-s),var(--color-accent-l),.18);padding:3px 10px;border-radius:var(--radius-full);white-space:nowrap}
.wildcard__name{font-size:calc(18px * var(--fs));font-weight:500;margin:0;line-height:1.2}
.wildcard__g{font-style:italic;color:var(--ink-soft);font-weight:400}
.wildcard__name em{font-style:italic;font-weight:700}
.wildcard__meta{margin:0;display:flex;flex-direction:column;gap:5px}
.wildcard__meta div{display:grid;grid-template-columns:64px 1fr;gap:8px}
.wildcard__meta dt{font-size:calc(11px * var(--fs));color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em;padding-top:1px}
.wildcard__meta dd{margin:0;font-size:calc(12.5px * var(--fs));line-height:1.4;text-wrap:pretty}

.collectors{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.collector{display:grid;grid-template-columns:minmax(120px,1.2fr) 1fr auto;align-items:center;gap:12px}
.collector__name{font-size:calc(13.5px * var(--fs));font-weight:500}
.collector__track{height:10px;background:var(--color-bg-dark);border-radius:var(--radius-full);overflow:hidden}
.collector__fill{display:block;height:100%;background:var(--color-accent);border-radius:var(--radius-full);transition:width .5s var(--ease-out)}
.collector__n{font-size:calc(13px * var(--fs));text-align:right;min-width:24px;font-variant-numeric:tabular-nums;font-weight:700}

.consv__empty{font-style:italic;color:var(--ink-soft);font-size:calc(15px * var(--fs));padding:8px 2px}

@media (max-width:860px){.consv__stats{grid-template-columns:repeat(2,1fr);row-gap:22px}.tiers{grid-template-columns:1fr;gap:18px}}