/* ===================================================================
   dist/material.css — Material Design 3 component layer
   (batch 9, 2026-10-02: apply Material / Google design language properly)

   Loaded LAST among stylesheets (after losses.css, before app.js) so the
   whole system can be restyled from one file without editing 15 others.
   Scope: M3 colour roles + surface containers, elevation, state layers,
   focus rings, buttons (40/20 standard, 36/18 chart-internal, 32/16 pager),
   segmented control, outlined fields, cards, chips, table spec, M3 type
   roles, top-app-bar elevation, details markers.

   EXEMPTIONS — do not "fix" these here (site script checks pin them):
   1. .evolution-clade-ring .silhouette-callout must stay transparent,
      box-shadow:none, border-width:0
      -> scripts/check_loss_tree_readability.cjs `plain`
   2. #site-search-input background must stay var(--panel)
      (dark = rgb(20,37,48)) -> scripts/check_search.cjs
   3. :root background stays var(--paper) (rgb(255,255,255) light /
      rgb(14,27,35) dark) -> scripts/check_theme.cjs; the M3 canvas is
      therefore painted on body, not on :root
   4. --inv-bg / --inv-fg dark values (#1e4b60 | #eaf3f6) and light
      --ink #202124 -> scripts/check_theme.cjs
   5. #theme-toggle text content must read exactly Auto / Light / Dark
      -> scripts/check_theme.cjs (icons may be added, text may not change)
   6. .primary-nav a count === 5, .resource-library-dot count === 168
      -> scripts/check_experience.cjs (structure untouched)
   =================================================================== */

/* ---------- 1. M3 colour roles (light) ---------- */
:root{
  --md-primary:#0b57d0;--md-on-primary:#fff;
  --md-primary-container:#d3e3fd;--md-on-primary-container:#041e49;
  --md-secondary-container:#c9e7ca;--md-on-secondary-container:#002204;
  --md-canvas:#f8f9fa;
  --md-surface-container-lowest:#fff;
  --md-surface-container-low:#f8f9fa;
  --md-surface-container:#f1f3f4;
  --md-surface-container-high:#eceff1;
  --md-surface-container-highest:#e8eaed;
  --md-on-surface:#202124;
  --md-on-surface-variant:#444746;
  --md-outline:#747775;
  --md-outline-variant:#c4c7c5;
  --md-state-hover:#1f1f1f14;
  --md-state-press:#1f1f1f24;
  --md-state-hover-on:#ffffff1f;
  --md-state-press-on:#ffffff33;
  --md-elev-1:0 1px 2px rgba(60,64,67,.30),0 1px 3px 1px rgba(60,64,67,.15);
  --md-elev-2:0 1px 2px rgba(60,64,67,.30),0 2px 6px 2px rgba(60,64,67,.15);
}
html[data-theme=dark]{
  --md-primary:#a8c7fa;--md-on-primary:#062e6f;
  --md-primary-container:#004a77;--md-on-primary-container:#c2e7ff;
  --md-secondary-container:#123a2b;--md-on-secondary-container:#7ee0b0;
  --md-canvas:#0a1419;
  --md-surface-container-lowest:#0a1419;
  --md-surface-container-low:#0c1920;
  --md-surface-container:#142530;
  --md-surface-container-high:#182d39;
  --md-surface-container-highest:#1a303b;
  --md-on-surface:#e6eef2;
  --md-on-surface-variant:#c4d2d8;
  --md-outline:#8e9194;
  --md-outline-variant:#304957;
  --md-state-hover:#e8eaed14;
  --md-state-press:#e8eaed24;
  --md-state-hover-on:#1f1f1f1f;
  --md-state-press-on:#1f1f1f33;
  --md-elev-1:0 1px 2px rgba(0,0,0,.30),0 1px 3px 1px rgba(0,0,0,.15);
  --md-elev-2:0 1px 2px rgba(0,0,0,.30),0 2px 6px 2px rgba(0,0,0,.15);
}
@media print{html[data-theme=dark]{
  --md-primary:#0b57d0;--md-on-primary:#fff;
  --md-primary-container:#d3e3fd;--md-on-primary-container:#041e49;
  --md-secondary-container:#c9e7ca;--md-on-secondary-container:#002204;
  --md-canvas:#fff;
  --md-surface-container-lowest:#fff;--md-surface-container-low:#f8f9fa;
  --md-surface-container:#f1f3f4;--md-surface-container-high:#eceff1;
  --md-surface-container-highest:#e8eaed;
  --md-on-surface:#202124;--md-on-surface-variant:#444746;
  --md-outline:#747775;--md-outline-variant:#c4c7c5;
  --md-state-hover:#1f1f1f14;--md-state-press:#1f1f1f24;
  --md-state-hover-on:#ffffff1f;--md-state-press-on:#ffffff33;
}}

/* ---------- 2. Canvas: grey surface behind white cards (M3 surface system) ---------- */
body{background:var(--md-canvas)}
@media print{body{background:#fff}}

/* ---------- 3. Focus ring (M3: 3px primary, 2px offset) ---------- */
:focus-visible{outline:3px solid var(--md-primary);outline-offset:2px}

/* ---------- 4. Buttons ---------- */
/* Standard tier: page-level actions (40px / radius 20 / label-large) */
.button,
.toolbar button,
.find-topbar button,
.block-filter-tools button,
.gb-zoom button,
.gb-seq-tools button,
.block-controls button,
.section-head button,
[data-copy],
.download-row button,
.download-row a,
[data-copyurl],
.theme-toggle{
  min-height:40px;
  padding:0 20px;
  font-size:14px;
  font-weight:500;
  letter-spacing:.1px;
  border:1px solid var(--md-outline);
  border-radius:20px;
  background:transparent;
  color:var(--md-on-surface);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-sizing:border-box;
  position:relative;
  transition:background-color .15s,border-color .15s,box-shadow .15s,color .15s;
}
.button:hover,.toolbar button:hover,.find-topbar button:hover,
.block-filter-tools button:hover,.gb-zoom button:hover,.gb-seq-tools button:hover,
.block-controls button:hover,.section-head button:hover,[data-copy]:hover,
.download-row button:hover,.download-row a:hover,[data-copyurl]:hover,
.theme-toggle:hover{border-color:var(--md-on-surface-variant);background:transparent}

/* Chart-internal tier: keeps the canvas footprint (36px / radius 18) */
.branch-mini-go button,
.rs-controls button,
.rs-export,
.be-controls button,
.le-species-tools button,
.le-species-pagination button,
.le-view-mode button,
.tree-toolbar button{
  min-height:36px;
  padding:0 14px;
  font-size:13px;
  font-weight:500;
  border:1px solid var(--md-outline);
  border-radius:18px;
  background:transparent;
  color:var(--md-on-surface);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  box-sizing:border-box;
  position:relative;
}

/* Filled (primary) */
.button.primary,
.tab-row a.active,
.loss-page .tab-row a.active{
  background:var(--md-primary);
  color:var(--md-on-primary);
  border-color:var(--md-primary);
  box-shadow:var(--md-elev-1);
}
.button.primary:hover,
.tab-row a.active:hover,
.loss-page .tab-row a.active:hover{background:var(--md-primary);border-color:var(--md-primary);color:var(--md-on-primary)}
/* On the inverted feature band the primary fill would collide with the band */
.feature .button.primary{background:transparent;color:var(--inv-fg);border-color:var(--inv-line);box-shadow:none}

/* Text buttons (pager, inline Related links) */
.pager button{
  min-height:32px;
  padding:0 14px;
  font-size:13px;
  font-weight:500;
  border:1px solid transparent;
  border-radius:16px;
  background:transparent;
  color:var(--md-primary);
}
.pager button:hover{background:var(--md-state-hover);border-color:transparent}
.evidence-links.inline .button{min-height:0;padding:0;border:0;background:none;box-shadow:none;position:static}
.evidence-links.inline .button::before{display:none}

/* State layers (M3: 8% hover / 14% pressed).
   position:relative is required: the ::before is absolutely placed with
   inset:0, so without a positioning context it would cover the viewport. */
button,.button{position:relative}
button::before,.button::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:currentColor;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s;
}
button:hover::before,.button:hover::before{opacity:.08}
button:active::before,.button:active::before{opacity:.14}
/* Ring silhouette callouts must stay visually plain (check: loss-tree `plain`) */
button.silhouette-callout::before{display:none}
button:disabled::before,button[aria-disabled=true]::before{display:none}

/* ---------- 5. Segmented control (M3) ---------- */
.segmented{
  gap:2px;
  padding:3px;
  border:1px solid var(--md-outline-variant);
  border-radius:22px;
  background:var(--md-surface-container-low);
  display:inline-flex;
  flex-wrap:wrap;
  align-items:center;
}
.segmented button{
  min-height:34px;
  padding:0 16px;
  font-size:14px;
  font-weight:500;
  letter-spacing:.1px;
  border:0;
  border-radius:18px;
  background:transparent;
  color:var(--md-on-surface-variant);
  position:relative;
}
.segmented button:hover{background:transparent;color:var(--md-on-surface)}
.segmented button[aria-pressed=true]{background:var(--md-primary);color:var(--md-on-primary);border-color:transparent}

/* ---------- 6. Text fields ---------- */
input[type=search],
select,
.toolbar input,
.toolbar select,
.find-topbar input,
.find-topbar select,
.block-filter-tools select,
.block-filter-tools input,
.block-controls select,
.cline-search-input{
  height:40px;
  padding:0 12px;
  font-size:14px;
  border:1px solid var(--md-outline);
  border-radius:4px;
  background:var(--md-surface-container-lowest);
  color:var(--md-on-surface);
  box-sizing:border-box;
}
input[type=search]{border-radius:20px;padding:0 16px}
input::placeholder{color:var(--md-on-surface-variant)}
input:focus,select:focus{
  outline:none;
  border-color:var(--md-primary);
  box-shadow:0 0 0 4px var(--md-primary-container);
}
input:focus-visible,select:focus-visible{outline:none}
/* check:search — the dark header field must keep the --panel token */
#site-search-input{background:var(--panel);border-radius:20px}
.site-search input{border-radius:20px;height:40px;padding:0 16px;background:var(--panel)}
.site-search-results{
  background:var(--panel);
  border:1px solid var(--md-outline-variant);
  border-radius:12px;
  box-shadow:var(--md-elev-2);
}
.site-search-hit{border-radius:8px}
.site-search-hit:hover{background:var(--md-state-hover)}
.site-search-hit[aria-selected=true]{background:var(--md-primary-container);color:var(--md-on-primary-container)}
.site-search-hit .code{color:var(--teal-text)}

/* ---------- 7. Cards & surfaces ---------- */
.panel{border-radius:12px;border-color:var(--md-outline-variant);background:var(--md-surface-container-lowest)}
.stats{border-radius:12px;overflow:hidden;border-color:var(--md-outline-variant);background:var(--md-surface-container-lowest)}
.lineage-drawer .stats{border-radius:0}
.table-wrap{border-radius:12px;border-color:var(--md-outline-variant);background:var(--md-surface-container-lowest);--tb-radius:12px;clip-path:inset(0 round var(--tb-radius))}
.callout{border-radius:12px}
.feature{border-radius:12px}
.resource-gallery{border-color:var(--md-outline-variant);border-radius:12px;background:var(--md-surface-container-lowest)}
.resource-gallery-card{border-radius:12px;border-color:var(--md-outline-variant)}
.resource-gallery-card:hover{outline-color:rgba(11,87,208,.30)}
.clade-card{border-radius:12px;border-color:var(--md-outline-variant)}
.drawer-silhouette-wrap{border-radius:12px}
#toast{border-radius:8px;box-shadow:var(--md-elev-2)}

/* ---------- 8. Chips / pills ---------- */
.pill{border-radius:8px;padding:4px 8px;font-size:12px;font-weight:500;letter-spacing:.1px}
.chip-group a{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 12px;
  border:1px solid var(--md-outline);
  border-radius:8px;
  font-size:13px;
  font-weight:500;
}
.chip-group a:hover{background:var(--md-state-hover)}

/* ---------- 9. Tables ---------- */
th{
  background:var(--md-surface-container-highest);
  color:var(--md-on-surface-variant);
  font-size:12px;
  font-weight:500;
  letter-spacing:.5px;
  text-transform:none;
}
th,td{border-bottom-color:var(--md-outline-variant)}
tbody tr:hover{background:var(--md-state-hover)}
td a{color:var(--teal-text)}
td a:hover{color:var(--md-primary)}

/* ---------- 10. Tabs ---------- */
.tab-row a{
  min-height:40px;
  padding:0 18px;
  border-radius:20px;
  display:inline-flex;
  align-items:center;
  font-weight:500;
  border-color:transparent;
}
.tab-row a:hover{background:var(--md-state-hover);border-color:transparent;text-decoration:none}
.loss-page .tab-row{
  background:var(--md-surface-container-low);
  border:1px solid var(--md-outline-variant);
  border-radius:22px;
  padding:3px;
  gap:2px;
}
.loss-page .tab-row a{
  min-height:34px;
  padding:0 16px;
  border:0;
  border-radius:18px;
  font-size:14px;
  font-weight:500;
  color:var(--md-on-surface-variant);
}
.loss-page .tab-row a:hover{background:transparent;color:var(--md-on-surface)}
.loss-page .tab-row a.active{background:var(--md-primary);color:var(--md-on-primary);box-shadow:none}

/* ---------- 11. Type scale (M3 roles) ---------- */
h1,.page-title h1{font-size:34px;font-weight:400;line-height:1.2}
@media(max-width:850px){h1,.page-title h1{font-size:32px}}
@media(max-width:520px){h1,.page-title h1{font-size:30px}}
h2{font-size:22px;font-weight:400;line-height:1.3}
h3{font-weight:500}
.eyebrow{font-size:11px;font-weight:500;letter-spacing:.5px;color:var(--md-primary)}
.stat strong{font-size:28px}

/* ---------- 12. Navigation ---------- */
.primary-nav>a{font-weight:500}
.primary-nav>a.active{color:var(--md-primary);border-bottom-color:var(--md-primary);border-radius:0;font-weight:500}
.primary-nav>a:hover{text-decoration:none;border-bottom-color:#aecbfa}
/* Sidebar / legacy rail (never the header bar, which is underline-style) */
.legacy-navigation>a.active{background:var(--md-secondary-container);color:var(--md-on-secondary-container);border-radius:16px;font-weight:500}

/* ---------- 13. Top app bar elevation on scroll (added by app.js) ---------- */
header.elevated{box-shadow:var(--md-elev-1);border-bottom-color:transparent}

/* ---------- 14. Disclosure markers (Material expand_more) ---------- */
summary::-webkit-details-marker{display:none}
summary::marker{content:""}
summary::after{
  content:"";
  display:inline-block;
  width:18px;
  height:18px;
  margin-left:8px;
  vertical-align:-4px;
  background:currentColor;
  opacity:.7;
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15.4 5.6 9l1.1-1.1L12 13.2l5.3-5.3L18.4 9z'/%3E%3C/svg%3E") center/18px no-repeat;
  mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15.4 5.6 9l1.1-1.1L12 13.2l5.3-5.3L18.4 9z'/%3E%3C/svg%3E") center/18px no-repeat;
  transition:transform .15s;
}
details[open]>summary::after{transform:rotate(180deg)}
.tree-view summary::after{display:none}

/* ---------- 15. Icons (Material Symbols, inlined — see icons.js) ---------- */
.md-icon{display:inline-block;flex:0 0 auto;vertical-align:-.15em;fill:currentColor;pointer-events:none}
/* Icon-only controls collapse to the M3 icon-button footprint.
   Keyed on an explicit class: `:only-child` would also match icon+label
   buttons (text nodes are not elements) and strip their padding. */
button.icon-only,
a.button.icon-only{
  min-width:40px;
  padding-left:0;
  padding-right:0;
}
.tree-toolbar button.icon-only,
.pager button.icon-only,
.le-zoom button.icon-only,
.rs-controls button.icon-only,
.block-controls button.icon-only{min-width:36px}
.pager button{padding:0 10px}
.pager button.icon-only{gap:0}
#site-search-close{
  padding:0;
  line-height:0;
  color:var(--md-on-surface-variant);
}
#site-search-close:hover{color:var(--md-on-surface)}

/* Back-to-top: M3 extended/standard FAB */
#totop{
  width:44px;
  height:44px;
  padding:0;
  border:0;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--md-primary-container);
  color:var(--md-on-primary-container);
  box-shadow:var(--md-elev-2);
}
#totop.show{display:flex}
#totop:hover{background:var(--md-primary-container);color:var(--md-on-primary-container)}

/* ---------- 16. Drawer tabs (M3 secondary pill tabs) ---------- */
.drawer-tabs{
  gap:2px;
  padding:3px;
  width:max-content;
  max-width:100%;
  overflow-x:auto;
  border:1px solid var(--md-outline-variant);
  border-radius:22px;
  background:var(--md-surface-container-low);
}
.drawer-tabs button{
  min-height:34px;
  padding:0 16px;
  border:0;
  border-radius:18px;
  font-size:14px;
  font-weight:500;
  letter-spacing:.1px;
  background:transparent;
  color:var(--md-on-surface-variant);
  position:relative;
}
.drawer-tabs button:hover{background:transparent;color:var(--md-on-surface)}
.drawer-tabs button.active,
.drawer-tabs button.active:hover{
  background:var(--md-primary);
  color:var(--md-on-primary);
  border-color:transparent;
  box-shadow:none;
}

/* ---------- 17. Layout toggle (M3 segmented; replaces the native select popup) ---------- */
.layout-field{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.layout-field>.meta{white-space:nowrap}
.layout-toggle{
  display:inline-flex;
  gap:2px;
  padding:3px;
  border:1px solid var(--md-outline-variant);
  border-radius:20px;
  background:var(--md-surface-container-low);
}
.layout-toggle button{
  min-height:30px;
  padding:0 12px;
  border:0;
  border-radius:15px;
  background:transparent;
  color:var(--md-on-surface-variant);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.1px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  position:relative;
}
.layout-toggle button:hover{background:transparent;color:var(--md-on-surface)}
.layout-toggle button[aria-pressed=true],
.layout-toggle button[aria-pressed=true]:hover{
  background:var(--md-primary);
  color:var(--md-on-primary);
}

/* ---------- 18. Segmented single-select (sr-only select + visible group) ---------- */
.segmented-select{
  display:inline-flex;
  flex-wrap:wrap;
  gap:2px;
  padding:3px;
  max-width:100%;
  border:1px solid var(--md-outline-variant);
  border-radius:20px;
  background:var(--md-surface-container-low);
}
.segmented-select button{
  min-height:30px;
  padding:0 12px;
  border:0;
  border-radius:15px;
  background:transparent;
  color:var(--md-on-surface-variant);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.1px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  position:relative;
  white-space:nowrap;
}
.segmented-select button:hover{background:transparent;color:var(--md-on-surface)}
.segmented-select button[aria-pressed=true],
.segmented-select button[aria-pressed=true]:hover{
  background:var(--md-primary);
  color:var(--md-on-primary);
}
.segmented-select button:disabled{opacity:.42}