/* EvoPolyGen redesign theme — cream/green academic (Claude Design) */
:root {
  --bg: #F4F2EA; --bgblur: rgba(244,242,234,0.94); --surface: #FBFAF5; --well: #F1EFE5;
  --ink: #12180F; --ink2: #3A4436; --muted: #55604E; --faint: #8A9184;
  --line: #D8D4C4; --line2: #E7E4D8; --line3: #C9C4B2; --grid: #EAE7DB;
  --thead: #EFEDE2; --hover: #EDEBDF; --thresh: #CBAFAF; --null: #B9B4A2;
  --a1: #1F5D3F; --a2: #5B3F86; --a3: #A0631F;
  --chipbg: #E4EADF; --chipbr: #C4D2BC; --ringc: rgba(31,93,63,0.22);
  /* measured at runtime by the header/table observers (see footer.php) */
  --hdr: 60px; --tabletop-h: 46px;
}

/* base — override Bootstrap defaults (this sheet loads last) */
html, body { margin: 0; }
body {
  background: var(--bg) !important;
  color: var(--ink) !important;
  font-family: 'Libre Franklin', system-ui, -apple-system, Segoe UI, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
a { color: var(--a1); text-decoration: none; }
a:hover { color: var(--ink); }
::selection { background: var(--chipbg); }
h1, h2, h3, h4, h5 { font-family: 'Libre Franklin', sans-serif; color: var(--ink); }

/* keep page content full-bleed for the design's own max-width sections */
.container { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; }

/* DataTables — themed to match */
.dataTables_wrapper { font-family: 'Libre Franklin', sans-serif; color: var(--muted); margin-top: 4px; }
.dataTables_wrapper .dataTables_filter { margin-bottom: 12px; }
.dataTables_wrapper .dataTables_filter input {
  padding: 8px 12px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); border-radius: 2px; font-size: 14px; margin-left: 8px;
}
.dataTables_wrapper .dataTables_length select {
  padding: 6px 8px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); border-radius: 2px;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { font-size: 12px; color: var(--muted); padding-top: 10px; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 5px 11px !important; border: 1px solid var(--line) !important;
  background: var(--surface) !important; color: var(--ink) !important;
  border-radius: 2px; margin-left: 4px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--a1) !important; border-color: var(--a1) !important; color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: .45; }
table.dataTable tbody tr.selected > * { box-shadow: inset 0 0 0 9999px var(--hover) !important; color: var(--ink) !important; }
table.dataTable tbody tr:hover > * { background: var(--hover); }
table.dataTable thead th { outline: none; }

/* loading */
#loading { transition: opacity .4s ease; }

/* smooth anchor scrolling + offset for the sticky header (measured, not guessed) */
html { scroll-behavior: smooth; }
#top, #traits, #documentation, #contact { scroll-margin-top: calc(var(--hdr) + 8px); }

/* header nav links + active state (scroll-spy) */
.epg-nav { color: var(--muted); border-bottom: 2px solid transparent; padding-bottom: 2px; transition: color .15s ease, border-color .15s ease; }
.epg-nav:hover { color: var(--ink); }
.epg-nav.active { color: var(--ink); border-bottom-color: var(--a1); }

/* ---- alternate color styles (all light so charts stay readable) ---- */
:root[data-theme="sand"] {
  --bg: #F5EFE4; --bgblur: rgba(245,239,228,0.94); --surface: #FCF7EE; --well: #EFE7D6;
  --ink: #211A10; --ink2: #453724; --muted: #6A5B44; --faint: #9C8E76;
  --line: #DBCFB8; --line2: #E9E1CE; --line3: #CBBB9C; --grid: #ECE4D2;
  --thead: #F1E9D6; --hover: #EEE5D1; --thresh: #C6A489; --null: #B6A88E;
  --a1: #A0631F; --a2: #7C4A2A; --a3: #5B7A3F;
  --chipbg: #EEE3CB; --chipbr: #D8C39B; --ringc: rgba(160,99,31,0.22);
}
:root[data-theme="indigo"] {
  --bg: #EFF0F4; --bgblur: rgba(239,240,244,0.94); --surface: #F9FAFC; --well: #E7E9F0;
  --ink: #141826; --ink2: #333A52; --muted: #565E77; --faint: #8990A6;
  --line: #D2D6E1; --line2: #E3E6EE; --line3: #C0C5D6; --grid: #E5E8F0;
  --thead: #EAECF3; --hover: #E7E9F2; --thresh: #B0A6C8; --null: #A8AEBE;
  --a1: #3B4B9A; --a2: #7A3F86; --a3: #A0631F;
  --chipbg: #E1E4F1; --chipbr: #C3C9E4; --ringc: rgba(59,75,154,0.22);
}

/* domain filter chips */
.domain-chip { font-family: 'JetBrains Mono', monospace; font-size: 12px; padding: 8px 11px; border-radius: 2px; cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--ink); transition: background .12s ease, border-color .12s ease; }
.domain-chip:hover { background: var(--hover); }
.domain-chip.active { background: var(--chipbg); border-color: var(--chipbr); color: var(--a1); font-weight: 600; }

/* Table: pagination bar on top (sticky) + sticky header, no inner scroll.
   styles.css ships .dataTables_wrapper{overflow:scroll}; that turns the wrapper
   into a scroll container and a sticky <th> would then stick to the wrapper
   instead of the page, so the wrapper must stay overflow:visible. Narrow screens
   drop the low-value columns (below) instead of scrolling sideways. */
.dataTables_wrapper { overflow: visible; }
#example_wrapper { overflow: visible; }
#example_wrapper table.dataTable { margin: 0 !important; }
/* p-values are monospace numbers — never break them across two lines */
#example th:nth-child(6), #example td:nth-child(6),
#example th:nth-child(7), #example td:nth-child(7) { white-space: nowrap; }

/* pagination + info, moved above the table and stuck under the site header */
.epg-tabletop {
  position: sticky; top: var(--hdr); z-index: 6;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  min-height: 46px; padding: 8px 2px;
  background: var(--bg); border-bottom: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--muted);
}
.epg-tabletop .dataTables_paginate { font-family: 'Libre Franklin', sans-serif; }
.epg-tabletop .dataTables_info { padding-top: 0 !important; }

/* sticky table header, sits just below the pagination bar */
#example thead th { position: sticky; top: calc(var(--hdr) + var(--tabletop-h)); z-index: 5; background: var(--thead); }

/* selected row (design: --chipbg) */
table.dataTable tbody tr.selected > * {
  box-shadow: inset 0 0 0 9999px var(--chipbg) !important; color: var(--ink) !important;
}

/* phones: no sideways scrolling — drop Chapter/Subchapter (and Domain when very
   narrow); both stay searchable and are on the trait page anyway. */
/* 960, not 900: the table's inline min-width is 880px and the section gutters
   eat ~76px, so anything under ~960px would push the page sideways. */
@media (max-width: 960px) {
  #example { min-width: 0 !important; }
  #example th:nth-child(4), #example td:nth-child(4),
  #example th:nth-child(5), #example td:nth-child(5) { display: none; }
}
@media (max-width: 560px) {
  /* the floating color-style button sits bottom-right; keep the reset button clear of it */
  #reset-filters-btn { margin-left: 0 !important; }
  #example th:nth-child(3), #example td:nth-child(3) { display: none; }
  #example th, #example td { padding-left: 8px !important; padding-right: 8px !important; font-size: 12px; }
  .epg-tabletop { font-size: 11px; gap: 8px; }
  .dataTables_wrapper .dataTables_paginate .paginate_button { padding: 4px 9px !important; }
}

/* FAQ read-more — button sits below the (fade-clipped) text, never over it */
.epg-faq { display: flex; flex-direction: column; }
.epg-faq-clip { position: relative; }
.epg-faq .epg-readmore { align-self: flex-start; margin-top: 14px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--a1); font-weight: 600; font-size: 14px; font-family: 'Libre Franklin', sans-serif; }
.epg-faq .epg-readmore:hover { text-decoration: underline; }

/* applied-filter chips (design: --chipbg/--chipbr, not Bootstrap badges) */
.epg-chip {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px;
  padding: 5px 10px; background: var(--chipbg); border: 1px solid var(--chipbr);
  border-radius: 2px; color: var(--ink);
}
.epg-chip button { border: 0; background: none; cursor: pointer; color: var(--a1); font-size: 14px; line-height: 1; padding: 0; }

/* chart legend + selected readout */
.epg-legend { display: flex; align-items: center; gap: 20px; margin-top: 16px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.epg-legend span.k { display: inline-flex; align-items: center; gap: 7px; }
.epg-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.epg-selected { margin-top: 16px; padding: 12px 15px; background: var(--well); border: 1px solid var(--line2); }

/* DataTables default chrome (trait page keeps the stock table) */
table.dataTable.display tbody tr.even > *,
table.dataTable.display tbody tr.even > .sorting_1 { background: var(--surface); }
table.dataTable.display tbody tr.odd > *,
table.dataTable.display tbody tr.odd > .sorting_1 { background: var(--well); }
table.dataTable.display tbody td, table.dataTable.display tbody th { border-top-color: var(--line2); color: var(--ink2); }
table.dataTable thead th, table.dataTable thead td {
  border-bottom: 1px solid var(--line) !important;
  font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
  background: var(--thead);
}
table.dataTable.no-footer { border-bottom-color: var(--line); }
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { color: var(--muted); font-size: 13px; }

/* ---- legacy pages -------------------------------------------------------
   ?page=traits|network|documentation|contact|privacy still carry the old
   Bootstrap markup (the redesign folded docs/contact into the home page).
   They stay reachable, so give them the theme's gutters, surfaces and — most
   importantly — keep their wide tables inside their own scroller instead of
   dragging the whole page sideways. */
.container.is-small,
body > .container > h1,
body > .container > .accordion,
body > .container > p { max-width: 1280px; margin-left: auto; margin-right: auto; }
body > .container { padding: clamp(24px, 4vw, 48px) clamp(16px, 4vw, 44px) !important; }
.container.page-home, .container.page-trait { padding: 0 !important; }  /* these manage their own */
.section.is-post { padding: 0; }
.card, .card-page-custom {
  background: var(--surface) !important; border: 1px solid var(--line) !important;
  border-radius: 2px !important;
}
.card-body { padding: clamp(12px, 2vw, 20px); overflow-x: auto; }
.accordion-item { background: var(--surface); border-color: var(--line); }
.accordion-button { background: var(--surface); color: var(--ink); box-shadow: none; }
.accordion-button:not(.collapsed) { background: var(--well); color: var(--ink); }
.accordion-body { color: var(--ink2); }
table.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: var(--well); color: var(--ink2); }
table.table-bordered > :not(caption) > * > * { border-color: var(--line2); }

/* ---- cookie notice (third-party freeprivacypolicy widget) ----------------
   Stock styling is a grey card with two identical #008000 buttons that covers
   most of the fold on a phone. Bring it into the theme, give the accept button
   the only filled treatment, and dock it as a slim bar at the bottom on phones. */
#freeprivacypolicy-com---nb { font-family: 'Libre Franklin', sans-serif !important; z-index: 60 !important; }
#freeprivacypolicy-com---nb .cc-nb-main-container {
  background: var(--surface) !important; border: 1px solid var(--line) !important;
  border-radius: 2px !important; padding: 18px !important;
}
#freeprivacypolicy-com---nb .cc-nb-title { color: var(--ink) !important; font-size: 17px !important; font-weight: 700 !important; }
#freeprivacypolicy-com---nb .cc-nb-text { color: var(--ink2) !important; font-size: 13px !important; line-height: 1.55 !important; }
#freeprivacypolicy-com---nb .cc-nb-buttons-container button {
  padding: 9px 14px !important; border-radius: 2px !important; font-size: 14px !important; font-weight: 600 !important;
  border: 1px solid var(--line3) !important; background: var(--surface) !important; color: var(--ink) !important;
}
/* needs the same specificity as the generic button rule above to win */
#freeprivacypolicy-com---nb .cc-nb-buttons-container button.cc-nb-okagree {
  background: var(--a1) !important; border-color: var(--a1) !important; color: var(--bg) !important;
}
#freeprivacypolicy-com---nb .cc-nb-buttons-container button.cc-nb-changep {
  background: none !important; border: 0 !important; color: var(--muted) !important;
  font-weight: 500 !important; text-decoration: underline !important;
}
@media (max-width: 640px) {
  #freeprivacypolicy-com---nb {
    position: fixed !important; inset: auto 8px 8px 8px !important;
    width: auto !important; max-width: none !important;
  }
  #freeprivacypolicy-com---nb .cc-nb-main-container { padding: 14px !important; }
  #freeprivacypolicy-com---nb .cc-nb-title { font-size: 15px !important; }
  #freeprivacypolicy-com---nb .cc-nb-text { font-size: 12px !important; }
  #freeprivacypolicy-com---nb .cc-nb-buttons-container { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; }
  #freeprivacypolicy-com---nb .cc-nb-buttons-container button { margin: 0 !important; }
  #freeprivacypolicy-com---nb .cc-nb-buttons-container button.cc-nb-okagree,
  #freeprivacypolicy-com---nb .cc-nb-buttons-container button.cc-nb-reject { flex: 1 1 calc(50% - 4px) !important; }
  #freeprivacypolicy-com---nb .cc-nb-buttons-container button.cc-nb-changep { flex: 1 1 100% !important; padding: 4px 0 !important; }
}