/* ============================================================
   DJ-1 / PARK7 Structure Explorer
   ------------------------------------------------------------
   Palette note: the four pLDDT band colours below are the single
   source of truth for confidence colouring. js/viewer.js reads
   them back out via getComputedStyle so the 3D render, the legend
   swatches and the sequence map can never drift apart.
   ============================================================ */

:root{
  --bg:#11151c;
  --panel:#161c25;
  --panel-2:#1c2430;
  --line:#2a3340;
  --text:#e9e6dd;
  --muted:#8d97a3;
  --copper:#d98a4f;
  --copper-dim:#8a5a36;
  --teal:#5fc3ad;
  --red-warn:#c75c5c;

  /* pLDDT confidence bands */
  --very-high:#2e6fd9;
  --confident:#5fc3ad;
  --low:#e0c34c;
  --very-low:#e0793f;
  --unscored:#6b7684;

  /* element colours, shared by the 3D view and the side-chain diagrams */
  --aa-blue:#4f8fd9;
  --sulfur:#d8b84a;
  --sulfur-active:#f3d878;
  --carbon:#aab2bd;
  --carbon-highlight:#f1f3f6;
  --cartoon-dim:#3a4250;

  --focus:#f3d878;
}
*{box-sizing:border-box;}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:'IBM Plex Sans',sans-serif;}
.wrap{max-width:1180px;margin:0 auto;padding:28px 22px 80px;}

/* Visible keyboard focus everywhere. */
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---- Header ---- */
header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:18px;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:22px;}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;color:var(--copper);text-transform:uppercase;margin:0 0 6px;}
h1{font-family:'Fraunces',serif;font-weight:600;font-size:42px;line-height:1.05;margin:0;}
h1 em{font-style:italic;color:var(--teal);font-weight:400;}
.sub{color:var(--muted);font-size:14.5px;max-width:480px;margin-top:8px;}
.idbox{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--muted);text-align:right;line-height:1.7;}
.idbox b{color:var(--text);}
.idbox a{color:var(--teal);text-decoration:none;}
.idbox a:hover{text-decoration:underline;}

/* ---- Layout ---- */
.grid{display:grid;grid-template-columns:1.35fr 1fr;gap:20px;}
@media (max-width:880px){.grid{grid-template-columns:1fr;}}

.card{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:18px;}
.card h2{font-family:'Fraunces',serif;font-weight:600;font-size:18px;margin:0 0 4px;}
.card h2.h2-sm{font-size:16px;}
.card .desc{color:var(--muted);font-size:13px;margin-bottom:12px;}
.card .desc.desc-flush{margin:0;}

/* ---- Viewer ---- */
#viewer-card{padding:0;overflow:hidden;}
#viewer-top{display:flex;justify-content:space-between;align-items:center;padding:14px 16px 10px;}
#viewer-top h2{margin-bottom:2px;}
#viewer{width:100%;height:440px;position:relative;background:#0d1117;}
#viewer-status{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted);font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.04em;padding:0 18px;}
.toggle-row{display:flex;gap:6px;padding:10px 16px 14px;border-top:1px solid var(--line);flex-wrap:wrap;}
button.tbtn{
  background:var(--panel-2);border:1px solid var(--line);color:var(--muted);
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;padding:7px 10px;border-radius:3px;cursor:pointer;letter-spacing:.02em;
}
button.tbtn:hover:not(:disabled){color:var(--text);border-color:var(--copper-dim);}
button.tbtn.active{background:var(--copper);color:#1a1410;border-color:var(--copper);}
button.tbtn:disabled{opacity:.4;cursor:not-allowed;}

.legend{display:flex;gap:14px;padding:0 16px 14px;font-size:11.5px;color:var(--muted);flex-wrap:wrap;}
.legend span{display:inline-flex;align-items:center;gap:5px;}
.legend[hidden]{display:none;}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:0 0 auto;}
.dot--very-high{background:var(--very-high);}
.dot--confident{background:var(--confident);}
.dot--low{background:var(--low);}
.dot--very-low{background:var(--very-low);}
.dot--nitrogen{background:var(--teal);}
.dot--oxygen{background:var(--aa-blue);}
.dot--sulfur{background:var(--sulfur);}
.dot--carbon{background:var(--carbon);}
.dot--copper{background:var(--copper);}
.dot--faded{background:var(--muted);opacity:.6;}

.dim-row{display:flex;align-items:center;gap:10px;padding:0 16px 16px;}
.dim-row[hidden]{display:none;}
.dim-row label{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);letter-spacing:.04em;white-space:nowrap;}
.dim-row input[type="range"]{flex:1;accent-color:var(--copper);}
.dim-row .dim-value{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);min-width:78px;text-align:right;}

.picker-row{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--line);flex-wrap:wrap;}
.picker-row label{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);letter-spacing:.04em;}
#residue-picker{
  background:var(--panel-2);border:1px solid var(--line);color:var(--text);
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;padding:6px 8px;border-radius:3px;
  max-width:220px;
}
#residue-readout{font-size:12.5px;color:var(--muted);flex:1;min-width:160px;}
#residue-readout b{color:var(--text);}
#residue-readout .cys-flag{color:var(--copper);font-weight:600;}

/* ---- Cysteine switch panel ---- */
/* The pills and the oxidation steps are real <button>s so they are reachable
   and operable from the keyboard; these reset the UA button defaults they
   inherit while keeping the original look. */
.cys-pill, .ox-step{appearance:none;-webkit-appearance:none;margin:0;font:inherit;}

#redox-card .desc{margin-bottom:16px;}
.cys-row{display:flex;gap:8px;margin-bottom:14px;}
.cys-pill{
  flex:1;background:var(--panel-2);border:1px solid var(--line);border-radius:3px;
  padding:10px 8px;text-align:center;cursor:pointer;font-family:'IBM Plex Mono',monospace;
  color:inherit;
}
.cys-pill:hover{border-color:var(--copper-dim);}
.cys-pill.active{border-color:var(--copper);background:#241a12;}
.cys-pill .label{font-size:13px;color:var(--text);font-weight:600;}
.cys-pill .tag{font-size:10px;color:var(--muted);display:block;margin-top:3px;}

.ox-track{display:flex;align-items:center;gap:0;margin:14px 0 10px;}
.ox-step{
  flex:1;text-align:center;padding:8px 4px;border:1px solid var(--line);
  font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);
  cursor:pointer;background:var(--panel-2);line-height:1.4;
}
.ox-step:hover{color:var(--text);}
.ox-step:first-child{border-radius:3px 0 0 3px;}
.ox-step:last-child{border-radius:0 3px 3px 0;}
.ox-step + .ox-step{border-left:none;}
.ox-step.current{background:var(--copper);color:#1a1410;font-weight:600;}
/* Keep the focus ring above neighbouring steps, which overlap by one border. */
.ox-step:focus-visible{position:relative;z-index:1;}
#ox-readout{font-size:13px;line-height:1.55;min-height:74px;}
#ox-readout b{color:var(--copper);}

/* ---- Facts ---- */
.facts dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font-size:13px;}
.facts dt{color:var(--muted);font-family:'IBM Plex Mono',monospace;font-size:11.5px;align-self:start;padding-top:1px;}
.facts dd{margin:0;}

/* ---- Sequence strip ---- */
#seq-card{margin-top:20px;}
#seq-wrap{font-family:'IBM Plex Mono',monospace;font-size:12px;line-height:1.9;letter-spacing:1px;word-break:break-all;}
.res{
  display:inline-block;width:14px;text-align:center;cursor:pointer;border-radius:2px;
  color:var(--text);background:rgba(107,118,132,.2);
}
/* Band tints are the --very-high/--confident/--low/--very-low hues at 20% alpha. */
.res--very-high{background:rgba(46,111,217,.2);}
.res--confident{background:rgba(95,195,173,.2);}
.res--low{background:rgba(224,195,76,.2);}
.res--very-low{background:rgba(224,121,63,.2);}
.res--unscored{background:rgba(107,118,132,.2);}
.res:hover{background:var(--teal);color:#0d1117;}
.res.hot{outline:1px solid var(--copper);color:var(--copper);font-weight:700;}
.res.hot:hover{background:var(--copper);color:#1a1410;}
.res.sel{background:var(--copper);color:#1a1410;box-shadow:0 0 0 2px var(--copper);}
.res.picked{background:var(--teal);color:#0d1117;box-shadow:0 0 0 2px var(--teal);}

.lane-label{color:var(--muted);font-size:10.5px;font-family:'IBM Plex Mono',monospace;margin-top:6px;}

/* ---- Disease strip ---- */
#disease-card{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:0;overflow:hidden;padding:0;}
#disease-card .half{padding:18px;}
#disease-card .half:first-child{border-right:1px solid var(--line);}
.disease-copy{font-size:13.5px;color:var(--muted);line-height:1.6;}
@media (max-width:700px){
  #disease-card{grid-template-columns:1fr;}
  #disease-card .half:first-child{border-right:none;border-bottom:1px solid var(--line);}
}

/* ---- Side chain spotlight ---- */
#sidechain-card{margin-top:20px;}
#sidechain-placeholder{color:var(--muted);font-size:13px;}
#sidechain-placeholder[hidden]{display:none;}
.sidechain-content{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start;margin-top:14px;}
.sidechain-content[hidden]{display:none;}
.sidechain-svg-wrap{flex:0 0 280px;max-width:280px;}
.sidechain-svg-wrap svg{width:100%;display:block;}
.sidechain-text{flex:1;min-width:240px;font-size:13.5px;color:var(--muted);line-height:1.6;}
.sidechain-text h3{font-family:'Fraunces',serif;font-weight:600;font-size:16px;color:var(--text);margin:0 0 8px;}
.atom-key-label{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:14px 0 4px;}
.atom-key{margin:12px 0 0;padding:0 0 0 16px;font-family:'IBM Plex Mono',monospace;font-size:12px;line-height:1.65;}
.atom-key li{margin-bottom:6px;}
.atom-key li::marker{color:var(--copper-dim);}
.atom-key b{color:var(--text);}
.sidechain-legend{display:flex;gap:14px;margin-top:12px;font-size:11.5px;color:var(--muted);flex-wrap:wrap;}
.sidechain-legend span{display:inline-flex;align-items:center;gap:5px;}

footer{margin-top:30px;color:var(--muted);font-size:11.5px;border-top:1px solid var(--line);padding-top:14px;font-family:'IBM Plex Mono',monospace;line-height:1.7;}
footer a{color:var(--teal);text-decoration:none;}
footer a:hover{text-decoration:underline;}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}