/* ==========================================================================
   page-phenotypes.css: the Phenotype data table (phenotypes/index.html).
   Loaded after site.css and page-sequences.css, whose .seq-* filter, bar,
   table and notes rules this page reuses. Only what differs lives here.
   ========================================================================== */

/* ------------------------------------------------------------ filters */
.ph-check{display:flex;align-items:center;gap:var(--sp-2);font-family:var(--font-mono);
  font-size:var(--t-micro);color:var(--ink-dim);min-height:2.25rem}
.ph-check input{accent-color:var(--accent)}

/* Tick-box dropdowns: several values per filter; none ticked means all. */
.ph-multi details{position:relative}
.ph-multi summary{list-style:none;cursor:pointer;font-family:var(--font-mono);font-size:var(--t-label);color:var(--ink);
  background:var(--bg);border:1px solid var(--rule);padding:var(--sp-2) var(--sp-5) var(--sp-2) var(--sp-3);
  min-height:2.25rem;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:16rem}
.ph-multi summary::-webkit-details-marker{display:none}
.ph-multi summary::after{content:"\25BE";position:absolute;right:var(--sp-2);top:50%;transform:translateY(-50%);
  color:var(--ink-dim)}
.ph-multi summary:hover,.ph-multi details[open] summary{border-color:var(--ink-dim)}
.ph-multi-list{position:absolute;z-index:20;top:calc(100% + 2px);left:0;min-width:100%;width:max-content;
  max-width:min(24rem,90vw);max-height:18rem;overflow:auto;background:var(--bg);border:1px solid var(--ink-dim);
  padding:var(--sp-2) var(--sp-3);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.ph-multi-opt{display:flex;align-items:center;gap:var(--sp-2);padding-block:3px;cursor:pointer;
  font-size:var(--t-small);line-height:1.35}
.seq-field .ph-multi-opt input{accent-color:var(--accent);flex:none;min-height:0;padding:0;margin:0;border:0}
/* .seq-field span styles the filter heading; option labels are body text. */
.seq-field .ph-multi-opt span{font-family:var(--font-serif);font-size:var(--t-small);text-transform:none;
  letter-spacing:0;color:inherit}
.ph-multi-opt:hover{color:var(--accent)}
.ph-multi-tools{display:flex;gap:var(--sp-2);margin:0 0 var(--sp-2);padding-bottom:var(--sp-2);
  border-bottom:1px solid var(--rule)}
.ph-multi-tools button{font-family:var(--font-mono);font-size:var(--t-micro);text-transform:uppercase;
  letter-spacing:var(--track-label);color:var(--ink-dim);background:none;border:1px solid var(--rule);
  padding:2px var(--sp-2);cursor:pointer}
.ph-multi-tools button:hover{color:var(--accent);border-color:var(--accent)}

/* ------------------------------------------------------ column picker */
.ph-cols{border-bottom:1px solid var(--rule);padding-block:var(--sp-3)}
.ph-cols summary{cursor:pointer;font-family:var(--font-mono);font-size:var(--t-label);
  text-transform:uppercase;letter-spacing:var(--track-label);color:var(--ink)}
.ph-cols summary:hover{color:var(--accent)}
.ph-cols-n{color:var(--ink-dim);margin-left:var(--sp-2)}
.ph-cols-tools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);margin-block:var(--sp-3);
  font-family:var(--font-mono);font-size:var(--t-micro)}
.ph-cols-tools button{font:inherit;text-transform:uppercase;letter-spacing:var(--track-label);color:var(--ink-dim);
  background:none;border:1px solid var(--rule);padding:var(--sp-1) var(--sp-2);cursor:pointer}
.ph-cols-tools button:hover{color:var(--accent);border-color:var(--accent)}
.ph-cols-body{display:grid;gap:var(--sp-4) var(--sp-6);grid-template-columns:repeat(auto-fill,minmax(17rem,1fr))}
.ph-colgroup{border:0;margin:0;padding:0;min-width:0}
.ph-colgroup legend{font-family:var(--font-mono);font-size:var(--t-micro);text-transform:uppercase;
  letter-spacing:var(--track-label);color:var(--accent);margin-bottom:var(--sp-1)}
.ph-colopt{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--sp-2);align-items:baseline;
  font-size:var(--t-small);line-height:1.35;padding-block:2px;cursor:pointer}
.ph-colopt input{accent-color:var(--accent)}
.ph-colcount{font-family:var(--font-mono);font-size:var(--t-micro);color:var(--ink-dim)}

/* ----------------------------------------------------------------- table */
.ph-scroll{max-height:75vh;overflow:auto}
.ph-table{width:auto;min-width:100%}
.ph-table thead th{position:sticky;top:0;z-index:2;vertical-align:bottom}
.ph-table thead button{white-space:normal;min-width:7.5rem;max-width:12rem;text-transform:none;letter-spacing:0;
  font-size:var(--t-micro);line-height:1.3}
.ph-th-group{display:block;text-transform:uppercase;letter-spacing:var(--track-label)}
.ph-th-unit{display:block;color:var(--ink-dim)}
.ph-th-group{color:var(--accent);margin-bottom:2px}
.ph-th-label{display:block;color:var(--ink)}
.ph-th-unit{margin-top:2px}
.ph-table thead button::after{display:none}
.ph-table th[aria-sort="ascending"] .ph-th-label::after{content:" \2191"}
.ph-table th[aria-sort="descending"] .ph-th-label::after{content:" \2193"}

/* The sample column stays put while the trait columns scroll sideways. */
.ph-table .ph-sample{position:sticky;left:0;z-index:1;background:var(--bg);text-align:left;font-weight:400;
  border-right:1px solid var(--rule);min-width:12rem}
.ph-table thead .ph-sample{z-index:3}
.ph-table thead .ph-sample button{min-width:0}
.ph-table tbody tr:hover .ph-sample{background:var(--surface)}
.ph-table .ph-sample .sub{white-space:normal;max-width:16rem}

.ph-table td{white-space:nowrap}
.ph-empty{color:var(--rule);text-align:center}
.ph-v{all:unset;display:block;cursor:pointer;font-family:var(--font-mono);font-size:var(--t-label);color:var(--ink);
  border-bottom:1px dotted transparent}
.ph-v+.ph-v{margin-top:2px}
.ph-v:hover,.ph-v:focus-visible{color:var(--accent);border-bottom-color:var(--accent)}
.ph-v:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ph-v.ph-approx{color:var(--amber-ink)}
.ph-list{color:var(--ink-dim);font-size:var(--t-micro);text-transform:uppercase;letter-spacing:var(--track-label)}
.ph-table td.num .ph-v{text-align:right}

/* --------------------------------------------------------------- popover */
.ph-pop{position:fixed;z-index:50;width:min(26rem,calc(100vw - 16px));max-height:min(60vh,32rem);overflow:auto;
  background:var(--bg);border:1px solid var(--ink-dim);padding:var(--sp-4);font-size:var(--t-small);
  line-height:1.45;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.ph-pop-close{position:absolute;top:var(--sp-2);right:var(--sp-2);background:none;border:0;color:var(--ink-dim);
  font-size:1.25rem;line-height:1;cursor:pointer}
.ph-pop-close:hover{color:var(--accent)}
.ph-pop-head{font-family:var(--font-mono);font-size:var(--t-micro);text-transform:uppercase;
  letter-spacing:var(--track-label);color:var(--ink-dim);margin:0 var(--sp-5) var(--sp-3) 0}
.ph-pop-head strong{color:var(--ink);font-weight:500;text-transform:none;letter-spacing:0}
.ph-pop-item+.ph-pop-item{border-top:1px solid var(--rule);margin-top:var(--sp-3);padding-top:var(--sp-3)}
.ph-pop-item p{margin:0 0 var(--sp-1)}
.ph-pop-item strong{color:var(--ink);font-weight:500}
.ph-pop-value{font-family:var(--font-mono);font-size:var(--t-label);color:var(--ink)}
.ph-pop .dim{color:var(--ink-dim)}
.ph-pop-src{margin-top:var(--sp-2)!important;color:var(--ink-dim);font-family:var(--font-mono);font-size:var(--t-micro)}

/* ----------------------------------------------------- strain categories */
.ph-kinds{width:100%;border-collapse:collapse;font-size:var(--t-small);line-height:1.5}
.ph-kinds th,.ph-kinds td{text-align:left;vertical-align:top;padding:var(--sp-3) var(--sp-3) var(--sp-3) 0;
  border-bottom:1px solid var(--rule)}
.ph-kinds thead th{font-family:var(--font-mono);font-size:var(--t-micro);font-weight:400;text-transform:uppercase;
  letter-spacing:var(--track-label);color:var(--ink-dim);border-bottom-color:var(--ink-dim)}
.ph-kinds tbody th{font-family:var(--font-mono);font-size:var(--t-label);font-weight:500;color:var(--ink);
  white-space:nowrap;width:12rem}
.ph-kinds td{color:var(--ink-dim)}
@media (max-width:640px){.ph-kinds tbody th{white-space:normal;width:auto}}

/* ---------------------------------------------------------- trait guide */
.ph-guide{display:grid;gap:var(--sp-4) var(--sp-6);grid-template-columns:minmax(10rem,14rem) minmax(0,1fr)}
.ph-guide dt{font-family:var(--font-mono);font-size:var(--t-label);color:var(--ink);font-weight:500}
.ph-guide dd{margin:0;color:var(--ink-dim);font-size:var(--t-small);line-height:1.5}
@media (max-width:640px){
  .ph-guide{grid-template-columns:minmax(0,1fr);gap:var(--sp-1)}
  .ph-guide dd{margin-bottom:var(--sp-3)}
  .ph-table .ph-sample{min-width:9rem}
}