/* Nucleora reference section.
   Extends the site design system; inherits every colour token from styles.css
   so the palette rules enforced by test_design_system.js still hold. */

.crumbs{font-size:13.5px;color:var(--text-dim);margin-bottom:14px;}
.crumbs a{color:var(--text-dim);text-decoration:none;border-bottom:1px solid transparent;}
.crumbs a:hover{color:var(--teal);border-bottom-color:var(--teal-line);}
.crumbs span[aria-hidden]{opacity:.4;margin:0 4px;}
.latin{color:var(--text-dim);font-size:16px;margin:-6px 0 16px;}

.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:26px 0 30px;}
.stat{border:1px solid var(--border);border-radius:10px;padding:16px 14px;background:var(--panel);}
.stat-n{display:block;font-size:25px;font-weight:650;color:var(--teal);letter-spacing:-.01em;}
.stat-n .of{font-size:15px;color:var(--text-dim);font-weight:400;}
.stat-l{display:block;font-size:12.5px;color:var(--text-dim);margin-top:5px;line-height:1.35;}

.gc-note{margin:26px 0 34px;}
.gc-note p{margin-bottom:10px;}
.gc-note .mini-table{margin-top:14px;}

.table-scroll{overflow-x:auto;margin-bottom:8px;}
.mini-table,.codon-table{width:100%;border-collapse:collapse;font-size:14px;margin:14px 0 30px;}
.mini-table th,.mini-table td,.codon-table th,.codon-table td{
  text-align:left;padding:7px 10px;border-bottom:1px solid var(--border);vertical-align:middle;}
.mini-table thead th,.codon-table thead th{
  font-size:12px;text-transform:none;letter-spacing:.02em;color:var(--text-dim);
  font-weight:600;border-bottom:1px solid var(--border);white-space:nowrap;}
.mini-table tbody th,.codon-table tbody th{font-weight:500;white-space:nowrap;}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums;}
.aa1{color:var(--text-dim);font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}

.is-opt-cell{color:var(--teal);font-weight:600;}
.is-rare-cell{color:var(--text-dim);}
.codon-table tr.is-opt td.mono:first-of-type{color:var(--teal);font-weight:600;}
.codon-table tr.is-rare td.mono:first-of-type{color:var(--text-dim);}
.barcell{width:32%;min-width:110px;}
.freqbar{display:block;height:7px;border-radius:3px;background:var(--teal);opacity:.55;}

.caveat{border-left:2px solid var(--border);padding-left:14px;color:var(--text-dim);font-size:14.5px;}
.cta-card{margin-top:36px;}
.cta-card .btn{margin-right:10px;margin-top:12px;}

/* Hub */
.hub-table{width:100%;border-collapse:collapse;font-size:14px;margin-top:8px;}
.hub-table th,.hub-table td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--border);}
.hub-table thead th{font-size:12px;color:var(--text-dim);font-weight:600;cursor:pointer;
  user-select:none;white-space:nowrap;}
.hub-table thead th:hover{color:var(--teal);}
.hub-table thead th[aria-sort="ascending"]::after{content:" \2191";color:var(--teal);}
.hub-table thead th[aria-sort="descending"]::after{content:" \2193";color:var(--teal);}
.hub-table tbody tr:hover{background:var(--panel);}
.hub-table a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--teal-line);}
.hub-table a:hover{color:var(--teal);}
.hub-latin{color:var(--text-dim);font-size:12.5px;font-style:italic;display:block;}
.gcbar-wrap{display:flex;align-items:center;gap:8px;}
.gcbar{height:6px;border-radius:3px;background:var(--teal);opacity:.5;flex:0 0 auto;}

@media(max-width:760px){
  .stat-row{grid-template-columns:repeat(2,1fr);}
  .mini-table,.codon-table,.hub-table{font-size:13px;}
}