.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.case-page [hidden] { display:none !important; }
.case-page .shell { width:min(1440px, calc(100% - 64px)); }
.case-page select { max-width:100%; min-height:42px; font:14px var(--sans); color:var(--ink); border:1px solid var(--line); border-radius:6px; padding:9px 30px 9px 12px; background:#fcfbf8; }
#target-select { max-width:360px; }
.case-page button { cursor:pointer; }
.case-page select:focus-visible, .case-page input:focus-visible, .msa-viewport:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.case-navigation { display:flex; gap:24px; align-items:center; font-size:15px; }
.case-navigation a { text-decoration:none; color:var(--green); }
.case-main { padding:40px 0 64px; }
.case-hero { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:48px; align-items:center; padding:0 0 32px; }
.case-hero .eyebrow { color:var(--accent); font-size:14px; }
.case-hero h1 { margin:12px 0 8px; font:64px/1.05 var(--serif); letter-spacing:-2px; }
.target-system { font:24px/1.45 var(--serif); }
.case-hero-copy > .case-tags { margin:16px 0; }
.case-context summary { color:var(--green); font-size:14px; cursor:pointer; }
.search-mode-switch { display:flex; gap:8px; flex-wrap:wrap; margin:16px 0; }
.search-mode-switch a { padding:10px 14px; font-size:15px; text-decoration:none; border:1px solid var(--line); border-radius:6px; color:var(--green); }
.search-mode-switch a[aria-current] { background:var(--green); color:white; border-color:var(--green); }
.target-description { max-width:800px; margin-top:12px; color:var(--muted); font-size:16px; line-height:1.7; }
.case-hero-stats { border-left:1px solid var(--line); padding-left:32px; }
.case-hero-stats span { font:13px/1.6 var(--sans); color:var(--muted); }
.case-hero-stats strong { display:flex; gap:18px; align-items:center; margin:12px 0 24px; font:40px/1 var(--serif); }
.case-hero-stats strong span { font:inherit; color:var(--ink); }
.case-hero-stats strong i { color:var(--muted); font-size:26px; font-style:normal; }
.case-hero-stats strong em { color:var(--accent); font-style:normal; }
.case-stat-pair { display:flex; gap:40px; }
.case-stat-pair span, .case-stat-pair b { display:block; }
.case-stat-pair b { margin-top:6px; font:28px var(--serif); }
.trajectory-panel { border:1px solid var(--line); border-radius:10px; background:#fcfbf8; padding:24px 28px 18px; }
.panel-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.panel-heading h2, .panel-heading h3 { margin:0; font:28px/1.25 var(--serif); letter-spacing:-.5px; }
.chart-legend { display:flex; flex-wrap:wrap; gap:20px; font:14px var(--sans); align-items:center; }
.chart-legend span { display:flex; gap:7px; align-items:center; }
.chart-legend i { width:9px; height:9px; border-radius:50%; }
.dockq-dot { background:var(--accent); }
.iptm-dot { background:var(--green); }
.chart-legend small { color:var(--muted); font-size:13px; }
.nomination-legend { color:var(--green); }
.trajectory-chart { width:100%; margin-top:20px; }
.trajectory-chart svg { display:block; width:100%; height:240px; overflow:visible; }
.trajectory-chart .curve-point { cursor:pointer; outline:none; }
.point-ring { opacity:0; }
.trajectory-chart .curve-point:hover .point-ring, .trajectory-chart .curve-point:focus-visible .point-ring, .trajectory-chart .curve-point[aria-pressed="true"] .point-ring { opacity:1; }
.trajectory-footer { border-top:1px solid var(--line); margin-top:12px; padding-top:12px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 20px; color:var(--muted); font:13px/1.6 var(--sans); }
.trajectory-footer span:first-child { color:var(--green); }
.round-workspace { margin-top:32px; scroll-margin-top:100px; }
.round-sidebar { border:1px solid var(--line); border-radius:8px; overflow:hidden; margin-bottom:28px; }
.round-sidebar-heading { padding:14px 18px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); background:#eeeee7; }
.round-sidebar-heading .eyebrow { font:14px var(--sans); letter-spacing:.5px; }
.round-sidebar-heading > span:last-child { font:13px var(--sans); color:var(--muted); }
#round-list { display:flex; overflow-x:auto; scroll-snap-type:x proximity; }
.round-option { flex:0 0 220px; text-align:left; padding:16px 18px; border:0; border-right:1px solid var(--line); border-bottom:3px solid transparent; background:transparent; color:var(--ink); scroll-snap-align:start; }
.round-option:hover { background:#f0f1e9; }
.round-option[aria-current="step"] { background:#e9eee4; border-bottom-color:var(--green); }
.round-option-top { display:flex; align-items:center; justify-content:space-between; gap:8px; font:14px var(--sans); font-weight:600; }
.round-badge { color:var(--green); font:12px var(--sans); }
.round-option-scores { display:flex; flex-wrap:wrap; gap:14px; color:var(--muted); font:13px var(--mono); margin-top:10px; }
.round-option-scores b { color:var(--accent); font-weight:500; }
.round-option-scores i { color:var(--green); font-style:normal; }
.round-content { min-width:0; }
.round-heading { display:flex; justify-content:space-between; gap:24px; align-items:center; }
.round-heading .eyebrow { color:var(--green); font-size:14px; letter-spacing:.5px; }
.round-heading h2 { font:30px/1.3 var(--sans); font-weight:600; letter-spacing:-.5px; margin-top:10px; overflow-wrap:anywhere; }
.round-stepper { display:flex; gap:8px; flex-shrink:0; }
.round-stepper button { width:44px; height:44px; }
.round-stepper button, #structure-reset, .msa-panel button:not([role="tab"]) { color:var(--green); border:1px solid var(--line); border-radius:6px; background:#fcfbf8; padding:9px 14px; font-size:14px; }
.round-stepper button:disabled { opacity:.35; cursor:default; }
.round-scores { display:flex; flex-wrap:wrap; gap:18px 32px; border-block:1px solid var(--line); margin-top:20px; padding:16px 0; font:14px/1.6 var(--sans); color:var(--muted); }
.round-scores b { color:var(--ink); font:21px var(--mono); margin-left:8px; font-weight:500; }
.round-scores > span:first-child b { color:var(--accent); }
.round-scores > span:nth-child(2) b { color:var(--green); }
.round-hypothesis { max-width:1000px; margin:20px 0 24px; font-size:17px; color:var(--muted); line-height:1.7; overflow-wrap:anywhere; }
.experiment-panel { min-width:0; background:#fcfbf8; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.experiment-panel > .panel-heading { padding:24px; }
.text-link { white-space:nowrap; color:var(--green); font:14px var(--sans); text-decoration:none; }
.text-link:hover { text-decoration:underline; }
.panel-view-tabs { display:flex; flex-wrap:wrap; gap:8px; padding:0 24px 18px; }
.panel-view-tabs button { padding:11px 16px; color:var(--muted); font:15px/1.4 var(--sans); border:1px solid var(--line); border-radius:6px; background:transparent; }
.panel-view-tabs button[aria-selected="true"] { background:var(--green); color:#fff; border-color:var(--green); }
.source-overview { margin:0 24px 20px; overflow-x:auto; }
.source-overview table { width:100%; border-collapse:collapse; min-width:520px; }
.source-overview caption { text-align:left; color:var(--muted); font:14px/1.6 var(--sans); padding-bottom:12px; }
.source-overview th { padding:14px 16px; color:var(--ink); font:14px var(--sans); font-weight:600; background:#eeeee7; text-align:left; border-bottom:1px solid var(--line); }
.source-overview td { padding:14px 16px; font:16px/1.6 var(--sans); color:var(--ink); border-bottom:1px solid var(--line); }
.source-overview td:not(:first-child) { font-family:var(--mono); }
.source-overview button { text-decoration:underline; text-underline-offset:4px; }
.structure-panel { margin-top:28px; }
.structure-tools { display:flex; flex-wrap:wrap; align-items:center; gap:18px; padding:0 24px 18px; }
.structure-tools label, .overlay-tools label { display:flex; align-items:center; gap:8px; color:var(--muted); font:14px var(--sans); }
.structure-tools select:disabled { color:var(--muted); }
#structure-reset { margin-left:auto; }
.overlay-tools { display:flex; gap:24px; flex-wrap:wrap; padding:0 24px 18px; }
.overlay-tools label { color:var(--ink); cursor:pointer; }
.overlay-tools input { width:18px; height:18px; accent-color:var(--green); }
.overlay-tools i { width:18px; height:4px; border-radius:2px; }
.overlay-tools .prediction-swatch { background:var(--accent); }
.overlay-tools .gt-swatch { background:#b6bec8; }
.structure-stage { position:relative; height:500px; background:#fcfbf8; border-block:1px solid var(--line); }
#structure-viewer { position:absolute; inset:0; }
#structure-viewer canvas { touch-action:none; }
.viewer-status { position:absolute; inset:0; display:grid; place-items:center; color:var(--muted); background:#eeeee7; font:16px var(--sans); pointer-events:none; }
.viewer-watermark { position:absolute; bottom:16px; left:20px; pointer-events:none; color:#5b6955; font:13px var(--sans); letter-spacing:.5px; }
.chain-legend { display:flex; flex-wrap:wrap; gap:12px 20px; padding:18px 24px 0; font:14px/1.6 var(--sans); }
.chain-legend span { display:flex; align-items:center; gap:8px; }
.chain-legend i { width:9px; height:9px; border-radius:50%; }
.structure-caption { padding:16px 24px 20px; color:var(--muted); font:14px/1.6 var(--sans); }
.structure-caption > span { color:var(--green); }
.structure-caption p { margin-top:8px; }
#confidence-legend { padding-top:12px; }
#confidence-legend i { display:inline-block; width:12px; height:12px; margin:0 4px 0 10px; }
.msa-panel-actions { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:16px; }
.msa-downloads { display:flex; gap:16px; flex-wrap:wrap; }
.msa-downloads a { color:var(--green); font:14px var(--sans); text-decoration:none; }
.msa-downloads a:hover { text-decoration:underline; }
.msa-toolbar { display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:0 24px 16px; }
.msa-toolbar label { display:flex; align-items:center; gap:10px; color:var(--muted); font:14px var(--sans); min-width:0; }
.msa-toolbar select { max-width:380px; }
.msa-counts { color:var(--green); font:14px/1.6 var(--mono); margin-left:auto; }
.msa-view-controls { display:flex; align-items:center; flex-wrap:wrap; gap:18px 28px; padding:0 24px 16px; }
.msa-scale-buttons { display:flex; gap:8px; }
.msa-panel .msa-scale-buttons button[aria-pressed="true"] { color:white; background:var(--green); border-color:var(--green); }
.msa-zoom { display:flex; align-items:center; gap:12px; color:var(--muted); font:14px var(--sans); }
.msa-zoom input { width:130px; accent-color:var(--green); }
.msa-zoom input:disabled { opacity:.4; }
.msa-layout-note { padding:0 24px 16px; font:14px/1.6 var(--sans); color:var(--muted); }
.msa-occupancy { display:flex; flex-wrap:wrap; gap:8px; padding:0 24px 18px; }
.msa-occupancy:empty { display:none; }
.msa-occupancy span { border-radius:5px; padding:7px 10px; color:var(--green); font:14px/1.4 var(--sans); background:#eef2e7; }
.msa-chain-map { display:flex; margin:0 24px 16px; gap:6px; min-height:42px; }
.msa-chain-map span { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 8px; min-width:0; padding:8px 4px; border-radius:5px; background:#e9ede2; color:var(--green); font:14px var(--sans); overflow-wrap:anywhere; text-align:center; }
.msa-chain-map small { font-size:13px; }
.msa-viewport { position:relative; height:520px; overflow:auto; border-block:1px solid var(--line); background:#fcfbf8; overscroll-behavior:contain; scrollbar-color:#8b9d80 #e9ede2; }
.msa-spacer { min-width:100%; }
#msa-canvas { position:absolute; top:0; left:0; pointer-events:none; }
.msa-status { position:absolute; top:65px; left:24px; font:16px var(--sans); color:var(--muted); }
.msa-footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 20px; color:var(--muted); font:13px/1.6 var(--sans); padding:16px 24px 0; }
.msa-footer span:first-child { color:var(--green); }
.msa-residue-detail { min-height:54px; padding:12px 24px 18px; font:14px/1.6 var(--mono); color:var(--muted); overflow-wrap:anywhere; }
.msa-expanded { overflow:hidden; }
.msa-panel.is-expanded { position:fixed; inset:16px; z-index:30; display:flex; flex-direction:column; box-shadow:0 0 0 100vmax rgba(36,52,46,.6); }
.msa-panel.is-expanded #msa-display { display:flex; flex-direction:column; flex:1; min-height:0; }
.msa-panel.is-expanded .msa-viewport { flex:1; height:auto; min-height:120px; }
.msa-panel.is-expanded .source-overview { max-height:180px; flex-shrink:0; }
.msa-panel.is-expanded .msa-residue-detail { max-height:90px; overflow:auto; }
.algorithm-panel, .reflection-panel { margin-top:24px; border:1px solid var(--line); border-radius:8px; padding:22px 24px; background:#fcfbf8; }
.algorithm-panel summary, .reflection-panel summary { cursor:pointer; color:var(--green); font:18px/1.5 var(--sans); font-weight:600; }
.algorithm-panel summary > span, .reflection-panel summary > span { padding-left:14px; color:var(--muted); font-size:14px; font-weight:400; }
.builder-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:20px 0; }
.builder-heading p { font:15px/1.6 var(--sans); color:var(--muted); overflow-wrap:anywhere; }
.builder-code { margin:0; padding:20px; max-height:520px; overflow:auto; font:14px/1.8 var(--mono); color:#34503f; background:#f0f1e9; border-radius:6px; tab-size:4; }
#round-reflection { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:24px; }
#round-reflection h4 { font:16px var(--sans); font-weight:600; color:var(--ink); margin:0 0 12px; }
#round-reflection ul { padding-left:20px; margin:0; }
#round-reflection li, #round-reflection p { color:var(--muted); font-size:16px; line-height:1.7; margin-top:8px; overflow-wrap:anywhere; }
.reflection-note { margin-top:24px; color:var(--muted); font:14px/1.6 var(--sans); }
.case-load-error { padding:40px 0; color:var(--accent); font-size:16px; }
@media (max-width:900px) {
  .case-page .shell { width:calc(100% - 40px); }
  .case-hero { grid-template-columns:minmax(0,1fr) 300px; gap:28px; }
  .case-hero-stats { padding-left:24px; }
  .panel-heading { align-items:flex-start; flex-wrap:wrap; }
  .msa-toolbar select { max-width:300px; }
  .msa-counts { margin-left:0; }
  .structure-stage { height:440px; }
}
@media (max-width:650px) {
  .case-page .shell { width:calc(100% - 32px); }
  .case-page .header-inner { height:auto; min-height:80px; flex-wrap:wrap; padding:16px 0; gap:12px; }
  .case-navigation { width:100%; justify-content:space-between; gap:12px; font-size:14px; }
  .case-navigation select { min-width:100px; }
  #target-select { max-width:210px; }
  .case-main { padding-top:28px; }
  .case-hero { grid-template-columns:1fr; gap:24px; }
  .case-hero h1 { font-size:52px; }
  .target-system { font-size:22px; }
  .case-hero-stats { border-left:0; border-top:1px solid var(--line); padding:22px 0 0; display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; }
  .case-hero-stats strong { font-size:34px; margin-bottom:0; gap:12px; }
  .case-stat-pair { gap:24px; }
  .trajectory-panel { padding:20px 16px 16px; }
  .trajectory-panel .panel-heading { gap:16px; }
  .chart-legend { gap:12px; }
  .round-option { flex-basis:210px; }
  .round-heading h2 { font-size:24px; }
  .round-stepper button { padding:8px; width:40px; height:40px; }
  .round-scores { gap:14px 22px; }
  .round-hypothesis { font-size:16px; }
  .experiment-panel > .panel-heading { padding:20px 16px; }
  .panel-heading h2, .panel-heading h3 { font-size:25px; }
  .msa-panel-actions { justify-content:flex-start; }
  .panel-view-tabs, .structure-tools, .overlay-tools, .msa-toolbar, .msa-view-controls, .msa-layout-note, .msa-occupancy { padding-inline:16px; }
  .panel-view-tabs button { padding:10px 12px; }
  .msa-toolbar label { width:100%; }
  .msa-toolbar select { flex:1; min-width:0; max-width:100%; }
  .msa-counts { width:100%; }
  .msa-scale-buttons { flex-wrap:wrap; }
  .msa-chain-map { margin-inline:16px; flex-wrap:wrap; }
  .msa-chain-map span { flex:1 1 90px !important; font-size:14px; padding:10px 8px; }
  .msa-chain-map small { font-size:13px; }
  .msa-viewport { height:440px; }
  .msa-footer, .msa-residue-detail, .structure-caption, .chain-legend { padding-inline:16px; }
  .msa-residue-detail { font-size:13px; }
  .source-overview { margin-inline:16px; }
  .structure-stage { height:400px; }
  .algorithm-panel, .reflection-panel { padding:20px 16px; }
  .algorithm-panel summary > span, .reflection-panel summary > span { display:block; padding:6px 0 0 20px; }
  .builder-heading { align-items:flex-start; }
  #round-reflection { grid-template-columns:1fr; }
  .msa-panel.is-expanded { inset:0; border-radius:0; overflow:auto; }
  .msa-panel.is-expanded .msa-layout-note, .msa-panel.is-expanded .msa-occupancy, .msa-panel.is-expanded .msa-footer { display:none; }
  .case-page .footer-inner { align-items:flex-start; flex-direction:column; gap:12px; }
}
