/* ConformerLab app styles, from the "ConformerLab Screens" design. * * Tokens and components are the design's own, carried over verbatim so the * pages and the canvas cannot drift apart. Two things are added around them: * the theme is chosen on (OS preference by default, the toggle wins * both ways), and the older token names that structure-view.js and viewer.js * read are mapped onto the design's, so those modules follow the theme too. */ :root { --ground:#F5F2EC; --panel:#FFFDFA; --raised:#EFEAE1; --rail:#F1EDE5; --tint:#FBF9F5; --rule:#DDD5C8; --rule2:#C3B8A6; --rulesoft:#E6DFD3; --track:#EAE3D7; --rulefaint:#EFE9DF; --toolrule:#E2DACD; --text:#1E2422; --text2:#2A3230; --text3:#3A4442; --text4:#4F5956; --muted:#5C6663; --placeholder:#6B7572; --dim:#8A928E; --accent:#1F6C9A; --accenthover:#185A82; --accentdeep:#154E70; --accenttext:#1A5E87; --accentink:#1A4A68; --accentsoft:#E3EEF5; --accentline:#C9DCEA; --opthover:#F6F9FB; --onaccent:#FFFFFF; --ok:#1F7A50; --oktext:#1B6B46; --oksoft:#E1F0E7; --warn:#96620C; --warntext:#7F530A; --warnink:#6B4708; --warnsoft:#F7EBD6; --block:#A93B2C; --blocksoft:#F8E4E0; --live:#4A56B8; --livesoft:#E7E9F7; --rep2:#D0822E; --occlow:#7FA8C6; --bubble:#1E2423; --onbubble:#F5F2ED; --bubblechip:#2F3836; --avatarbg:#1E2421; --vp:#0D171A; color-scheme: light; } /* Dark is its own set of steps, chosen for the dark ground -- not an inversion. Declared twice: once for the OS preference, once for the toggle, which must win in both directions. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ground:#0D171A; --panel:#132328; --raised:#1A2E34; --rail:#0F1C20; --tint:#16292E; --rule:#2B454C; --rule2:#3D5F69; --rulesoft:#22393F; --track:#1F353B; --rulefaint:#1C3036; --toolrule:#24393F; --text:#E2EDEB; --text2:#D3E0DE; --text3:#C3D3D1; --text4:#A9BDBB; --muted:#8CA5A3; --placeholder:#7F9896; --dim:#6E8886; --accent:#58ACDF; --accenthover:#7BBFE8; --accentdeep:#8CC8EE; --accenttext:#8CC8EE; --accentink:#A9D6F2; --accentsoft:#17323F; --accentline:#24506A; --opthover:#16303A; --onaccent:#0B1A20; --ok:#6BC496; --oktext:#7FD1A6; --oksoft:#14301F; --warn:#E0A44A; --warntext:#E8B866; --warnink:#F0C98A; --warnsoft:#33280F; --block:#E56B60; --blocksoft:#3A1A17; --live:#7E8DEA; --livesoft:#1B2040; --rep2:#E0A44A; --occlow:#3E6F90; --bubble:#2A4148; --onbubble:#E2EDEB; --bubblechip:#36525C; --avatarbg:#243A40; --vp:#060D10; color-scheme: dark; } } :root[data-theme="dark"] { --ground:#0D171A; --panel:#132328; --raised:#1A2E34; --rail:#0F1C20; --tint:#16292E; --rule:#2B454C; --rule2:#3D5F69; --rulesoft:#22393F; --track:#1F353B; --rulefaint:#1C3036; --toolrule:#24393F; --text:#E2EDEB; --text2:#D3E0DE; --text3:#C3D3D1; --text4:#A9BDBB; --muted:#8CA5A3; --placeholder:#7F9896; --dim:#6E8886; --accent:#58ACDF; --accenthover:#7BBFE8; --accentdeep:#8CC8EE; --accenttext:#8CC8EE; --accentink:#A9D6F2; --accentsoft:#17323F; --accentline:#24506A; --opthover:#16303A; --onaccent:#0B1A20; --ok:#6BC496; --oktext:#7FD1A6; --oksoft:#14301F; --warn:#E0A44A; --warntext:#E8B866; --warnink:#F0C98A; --warnsoft:#33280F; --block:#E56B60; --blocksoft:#3A1A17; --live:#7E8DEA; --livesoft:#1B2040; --rep2:#E0A44A; --occlow:#3E6F90; --bubble:#2A4148; --onbubble:#E2EDEB; --bubblechip:#36525C; --avatarbg:#243A40; --vp:#060D10; color-scheme: dark; } /* Older token names, read by structure-view.js and viewer.js. */ :root { --sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --serif: "Newsreader", Georgia, serif; --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace; --panel-solid: var(--panel); --rule-strong: var(--rule2); --accent-soft: var(--accentsoft); --ok-soft: var(--oksoft); --warn-soft: var(--warnsoft); --block-soft: var(--blocksoft); --live-soft: var(--livesoft); --protein: #4E8FD0; --rna: #6FAE7A; --dna: #B584C9; --peptide: #7FBBD6; --other: #9AA5AB; --ligandc: #D89440; --metalc: #C96A5B; /* Replica identity in charts. Validated with the dataviz validator against --panel in each theme: all eight pass on adjacent pairs, and the first three on all pairs. The design's third colour (indigo) sat 9 normal-vision units from the blue and is replaced by aqua. Light-mode slots 2-5 fall under 3:1 on the panel, so every chart also labels its lines and offers a table view. */ --s1: #1F6C9A; --s2: #D0822E; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; --s6: #008300; --s7: #4a3aa7; --s8: #e34948; --s-other: #8A928E; /* Element labels in the 2D map: the chemist's convention, readable on each ground. The letter itself names the element. */ --elO: #B8382B; --elN: #1F5FA8; --elS: #8A6400; --elX: #2E7D32; /* Kinds of residue in the 2D map: the ring in a series colour, a soft fill of it behind the residue's written name. Validated as a set (all pairs, each theme): red and green sit in the colour-blind floor band, legal because every circle names its residue and the charged carry their sign; the polar amber is under 3:1 in light, likewise labelled. Glycine is neutral, outside the set; a ligand, ion or anything else not an amino acid is a dashed ring of it on the panel. */ --rc-hyd: #DDEFD9; --rc-hyd-line: #008300; --rc-pol: #F8EDCF; --rc-pol-line: #C29200; --rc-pos: #E6E2F6; --rc-pos-line: #4A3AA7; --rc-neg: #FBE0DF; --rc-neg-line: #E34948; --rc-oth: #F1EEE8; --rc-oth-line: #9A958C; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767; --s-other: #6E8886; --elO: #FF8E80; --elN: #86B8F2; --elS: #E3C35E; --elX: #8FD493; --rc-hyd: #173A1C; --rc-hyd-line: #008300; --rc-pol: #3A3410; --rc-pol-line: #A89000; --rc-pos: #2A2752; --rc-pos-line: #9085E9; --rc-neg: #4A2022; --rc-neg-line: #E66767; --rc-oth: #22302F; --rc-oth-line: #6E8886; } } :root[data-theme="dark"] { --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767; --s-other: #6E8886; --elO: #FF8E80; --elN: #86B8F2; --elS: #E3C35E; --elX: #8FD493; --rc-hyd: #173A1C; --rc-hyd-line: #008300; --rc-pol: #3A3410; --rc-pol-line: #A89000; --rc-pos: #2A2752; --rc-pos-line: #9085E9; --rc-neg: #4A2022; --rc-neg-line: #E66767; --rc-oth: #22302F; --rc-oth-line: #6E8886; } html, body { margin: 0; background: var(--ground); } /* ── the design's components ─────────────────────────────────────────── */ :root[data-theme="dark"] .card{box-shadow:0 1px 2px rgba(0,0,0,.35),0 10px 30px rgba(0,0,0,.25)} :root[data-theme="dark"] .vp{box-shadow:inset 0 0 0 1px #1C3036} a{color:var(--accent);text-decoration:none} a:hover{color:var(--accentdeep)} .cl{font-family:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;background:var(--ground)} .cl *{box-sizing:border-box} .serif{font-family:"Newsreader",Georgia,serif} .mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums} .shell{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100vh} .side{background:var(--raised);border-right:1px solid var(--rule);padding:22px 16px;display:flex;flex-direction:column;gap:22px} .main{min-width:0;display:flex;flex-direction:column} .topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 32px;border-bottom:1px solid var(--rule);background:var(--ground);flex-wrap:wrap} .card{background:var(--panel);border:1px solid var(--rule);border-radius:16px;box-shadow:0 1px 2px rgba(30,36,34,.04),0 10px 30px rgba(30,36,34,.05)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:11px;border:1px solid var(--rule2);background:var(--panel);color:var(--text);font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap} .btn:hover{background:var(--raised);color:var(--text)} .btn-primary{background:var(--accent);border-color:var(--accent);color:var(--onaccent)} .btn-primary:hover{background:var(--accenthover);border-color:var(--accenthover);color:var(--onaccent)} .btn-lg{min-height:52px;padding:0 24px;font-size:16px;border-radius:13px} .btn-quiet{background:transparent;border-color:transparent;color:var(--accent)} .btn-quiet:hover{background:var(--accentsoft);color:var(--accentdeep)} .chip{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:6px 14px;border-radius:999px;border:1px solid var(--rule);background:var(--panel);color:var(--text);font-family:inherit;font-size:14px;cursor:pointer;text-align:left} .chip:hover{border-color:var(--accent);color:var(--accent)} .tag{display:inline-flex;align-items:center;gap:5px;padding:1px 9px;border-radius:999px;font-size:12.5px;font-weight:600;line-height:21px;white-space:nowrap} .t-ok{background:var(--oksoft);color:var(--oktext)} .t-warn{background:var(--warnsoft);color:var(--warntext)} .t-block{background:var(--blocksoft);color:var(--block)} .t-live{background:var(--livesoft);color:var(--live)} .t-accent{background:var(--accentsoft);color:var(--accenttext)} .t-plain{background:var(--raised);color:var(--text4)} .label{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)} .muted{color:var(--muted)} .h1{font-family:"Newsreader",Georgia,serif;font-weight:500;font-size:38px;line-height:1.12;letter-spacing:-.015em;margin:0} .h2{font-family:"Newsreader",Georgia,serif;font-weight:500;font-size:25px;line-height:1.2;letter-spacing:-.01em;margin:0} .h3{font-size:16.5px;font-weight:700;margin:0;line-height:1.3} .vp{background:var(--vp);border-radius:12px;position:relative;overflow:hidden} .vp-cap{position:absolute;left:12px;bottom:10px;font-size:12px;color:#A9BDBB} .vp-tools{position:absolute;right:10px;top:10px;display:flex;gap:6px} .vp-btn{width:32px;height:32px;border-radius:8px;border:1px solid #2B454C;background:#132328;color:#C9D8D6;display:inline-flex;align-items:center;justify-content:center;cursor:pointer} .row{display:flex;align-items:center;gap:10px} .kbd{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;border:1px solid var(--rule2);background:var(--ground);font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:500;color:var(--text);flex:none} .opts{display:flex;flex-direction:column;gap:8px} .opt{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;padding:12px 14px;border-radius:12px;border:1px solid var(--rule);background:var(--panel);font-family:inherit;font-size:15px;color:var(--text);cursor:pointer;line-height:1.4} .opt:hover{border-color:var(--accent);background:var(--opthover)} .opt-sub{display:block;font-size:13.5px;color:var(--muted);margin-top:2px} .opt-on{border-color:var(--accent);background:var(--accentsoft);box-shadow:inset 0 0 0 1px var(--accent)} .opt-on .kbd{background:var(--accent);border-color:var(--accent);color:var(--onaccent)} .opt-dim{opacity:.55} .hint{font-size:13px;color:var(--muted)} .thread{display:flex;flex-direction:column;gap:26px} .turn-user{align-self:flex-end;max-width:600px;background:var(--bubble);color:var(--onbubble);padding:12px 16px;border-radius:18px 18px 5px 18px;font-size:15.5px} .turn-ai{display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px} .turn-body{display:flex;flex-direction:column;gap:12px;min-width:0;font-size:15.5px} .turn-body p{margin:0} .avatar{width:36px;height:36px;border-radius:11px;background:var(--avatarbg);display:flex;align-items:center;justify-content:center;flex:none} .tool{display:flex;flex-direction:column;gap:10px;padding:12px 14px;border-radius:12px;background:var(--raised);border:1px solid var(--toolrule)} .tool-head{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600} /* A request's live steps (stepLine): one line that changes while it works, folded once done, opening to every step and its time. */ .steps{display:flex;flex-direction:column;gap:6px;min-width:0} .steps-head{display:flex;align-items:center;gap:10px;width:fit-content;max-width:100%;min-height:34px;padding:5px 12px 5px 10px;border-radius:10px;border:1px solid var(--toolrule);background:var(--raised);color:var(--text);font:inherit;font-size:14px;cursor:pointer;text-align:left} .steps-head:hover{border-color:var(--accent)} .steps-icon{display:inline-flex;justify-content:center;width:16px;flex:none;color:var(--live)} .steps-done .steps-icon{color:var(--oktext)} .steps-failed .steps-icon{color:var(--warntext)} .steps-now{min-width:0;overflow-wrap:anywhere} .steps-time{color:var(--muted);font-size:13px;white-space:nowrap} .steps-chev{display:inline-flex;color:var(--muted);transition:transform .15s} .steps-head[aria-expanded="true"] .steps-chev{transform:rotate(90deg)} .steps-list{display:flex;flex-direction:column;gap:6px;margin:0 0 0 17px;padding:6px 0 6px 14px;list-style:none;border-left:2px solid var(--rule);font-size:13.5px} .steps-list li{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:8px;align-items:start} .steps-mark{display:inline-flex;justify-content:center;padding-top:2px;color:var(--oktext)} .steps-list li.bad .steps-mark{color:var(--warntext)} .steps-list li.note,.steps-list li.note .steps-mark{color:var(--muted)} .turn-answer{display:flex;flex-direction:column;gap:12px;min-width:0} /* Under a reply (replyActions): copy, ask again, helpful or not. */ .reply-acts{display:flex;align-items:center;gap:2px;margin-top:-4px;color:var(--muted)} .reply-acts .act{width:30px;height:30px;border-radius:8px;border:0;background:transparent;color:inherit;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0} .reply-acts .act:hover{background:var(--raised);color:var(--text)} .reply-acts .act[aria-pressed="true"]{color:var(--accenttext);background:var(--raised)} .act-said{font-size:12.5px;margin-left:6px} .act-why{display:flex;gap:8px;align-items:center;max-width:520px} .act-why input{flex:1;min-width:0} /* A run followed in the thread (followRun): its steps, CPU and GPU. */ .runcard{display:flex;flex-direction:column;gap:10px;padding:14px 16px;box-shadow:none} .rc-steps{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;font-size:14.5px} .rc-steps li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;align-items:start} .rc-mark{display:inline-flex;justify-content:center;padding-top:2px;color:var(--muted)} .rc-done .rc-mark{color:var(--oktext)} .rc-now .rc-mark{color:var(--live)} .rc-failed .rc-mark{color:var(--warntext)} .rc-todo{color:var(--muted)} .stepper{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .step{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--muted)} .step-dot{width:22px;height:22px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;background:var(--raised);color:var(--muted);border:1px solid var(--rule)} .step-done{color:var(--text)} .step-done .step-dot{background:var(--ok);border-color:var(--ok);color:var(--onaccent)} .step-now{background:var(--accentsoft);color:var(--accenttext)} .step-now .step-dot{background:var(--accent);border-color:var(--accent);color:var(--onaccent)} .step-sep{width:14px;height:1px;background:var(--rule2)} .navitem{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;color:var(--text);font-size:14.5px;line-height:1.3} .navitem:hover{background:var(--rulesoft);color:var(--text)} .nav-on{background:var(--panel);box-shadow:0 1px 2px rgba(30,36,34,.08)} .dot{width:9px;height:9px;border-radius:999px;flex:none} .bar{height:8px;border-radius:999px;background:var(--track);overflow:hidden} .bar-fill{height:100%;border-radius:999px} .divider{height:1px;background:var(--rulesoft)} .grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px} .stat{padding:16px 18px;display:flex;flex-direction:column;gap:4px} .stat-v{font-family:"Newsreader",Georgia,serif;font-size:32px;line-height:1.05;letter-spacing:-.01em} .composer{display:flex;align-items:flex-end;gap:8px;padding:10px 10px 10px 14px;border:1px solid var(--rule2);border-radius:18px;background:var(--panel);box-shadow:0 10px 30px rgba(30,36,34,.08)} .composer textarea{flex:1;border:0;outline:0;resize:none;background:transparent;font-family:inherit;font-size:15.5px;color:var(--text);min-height:44px;padding:11px 0;line-height:1.45} .composer textarea::placeholder{color:var(--placeholder)} .icon-btn{width:44px;height:44px;border-radius:11px;border:1px solid transparent;background:transparent;display:inline-flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer;flex:none} .icon-btn:hover{background:var(--raised);color:var(--text)} .send{background:var(--accent);color:var(--onaccent)} .send:hover{background:var(--accenthover);color:var(--onaccent)} .kv{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;font-size:14.5px;align-items:center} .prov{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);white-space:nowrap} .pdot{width:7px;height:7px;border-radius:999px;display:inline-block} .field{display:flex;flex-direction:column;gap:5px;min-width:0} .field-l{font-size:12.5px;color:var(--muted);font-weight:600} .select{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px;padding:0 12px;border:1px solid var(--rule);border-radius:10px;background:var(--panel);font-size:14.5px;color:var(--text);font-family:inherit;cursor:pointer;width:100%;text-align:left} .select:hover{border-color:var(--accent)} .why{display:flex;gap:8px;font-size:14px;color:var(--text4);background:var(--ground);border-radius:10px;padding:9px 12px;line-height:1.45} table.t{width:100%;border-collapse:collapse;font-size:14.5px} table.t th{text-align:left;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:10px 14px;border-bottom:1px solid var(--rule)} table.t td{padding:12px 14px;border-bottom:1px solid var(--rulefaint);vertical-align:middle} table.t tr:last-child td{border-bottom:0} .legend{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--text4)} .sw{width:14px;height:3px;border-radius:2px;display:inline-block;margin-right:6px;vertical-align:middle} .seg{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--rule);border-radius:999px;background:var(--raised)} .seg-b{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 13px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer} .seg-b:hover{color:var(--text)} .seg-on{background:var(--panel);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.14)} .occ{display:grid;grid-template-columns:150px minmax(0,1fr) 48px;gap:12px;align-items:center;font-size:14.5px} .pill-num{font-family:"IBM Plex Mono",monospace;font-size:13px} @media (max-width: 1100px){ .rail{display:none !important} .cols{grid-template-columns:minmax(0,1fr) !important} } @media (max-width: 900px){ .shell{grid-template-columns:minmax(0,1fr)} .side{display:none} .grid3,.grid4{grid-template-columns:repeat(2,minmax(0,1fr))} .topbar{padding:12px 16px} .pad{padding-left:16px !important;padding-right:16px !important} .hide-sm{display:none !important} .h1{font-size:30px} } @media (max-width: 560px){ .grid2,.grid3,.grid4{grid-template-columns:minmax(0,1fr)} .occ{grid-template-columns:110px minmax(0,1fr) 44px} .h1{font-size:27px} } /* ── added for the working app ───────────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .card { box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.25); } :root:not([data-theme="light"]) .vp { box-shadow: inset 0 0 0 1px #1C3036; } } [hidden] { display: none !important; } button { font-family: inherit; } button:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; } .btn:focus-visible, .chip:focus-visible, .opt:focus-visible, .select:focus-visible, .navitem:focus-visible, .seg-b:focus-visible, .icon-btn:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .wrap-any { overflow-wrap: anywhere; word-break: break-word; } .grow { flex: 1 1 auto; min-width: 0; } .right { text-align: right; } .danger { color: var(--block); } .btn-danger { color: var(--block); border-color: var(--rule2); } .btn-danger:hover { background: var(--blocksoft); color: var(--block); } /* The menu button sits in the sidebar, left of the logo. Wider than a phone it folds the sidebar to a strip of icons -- the logo, a new study, the studies, the guide, API access, credits and the account -- and back, and the page has nearly the whole window (data-side="off" on the root, set before the first paint from what this browser remembers: app.html, app.js). On a phone the sidebar is a drawer, opened over the page by the top bar's own menu button (.menu-top) and closed by the one beside the logo. */ /* The menu button's three lines start where New study's edge does. */ .side-head { display: flex; align-items: center; gap: 4px; margin-left: -12px; } .side-head .icon-btn { width: 36px; height: 36px; } .side-brand { gap: 10px; padding: 2px 4px; color: var(--text); min-width: 0; } .side-rail { display: none; } .menu-top { display: none; } .rail-btn { width: 40px; height: 40px; border-radius: 11px; border: 1px solid transparent; background: transparent; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); cursor: pointer; flex: none; padding: 0; transition: background-color .12s, color .12s; } /* An icon's wrapper is a box of its own, so the glyph is centred exactly: inline, it sat on a text baseline, 3px above the middle of its button. */ .rail-btn > span[data-icon], .side-head .icon-btn > span[data-icon] { display: flex; } .rail-btn:hover { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); } /* The page you are on: a blue tint that shows on the sidebar in both themes (--accentsoft is all but the sidebar's own colour in the dark one). */ .rail-btn.nav-on { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); } .rail-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* New study is the strip's one blue button, as it is the sidebar's. */ .rail-btn.rail-new { background: var(--accent); border-color: var(--accent); color: var(--onaccent); margin-bottom: 6px; } .rail-btn.rail-new:hover { background: var(--accenthover); border-color: var(--accenthover); color: var(--onaccent); } .rail-me { margin-top: auto; } #railInitial { width: 30px; height: 30px; border-radius: 999px; background: var(--text); color: var(--panel); display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; } @media (max-width: 900px) { .menu-top { display: inline-flex; } .side.open { display: flex; position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); z-index: 60; overflow-y: auto; box-shadow: 0 10px 40px rgba(0,0,0,.3); } .scrim { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 55; } } @media (min-width: 901px) { :root[data-side="off"] .shell { grid-template-columns: 64px minmax(0,1fr); } :root[data-side="off"] .side { padding: 14px 0; gap: 10px; align-items: center; } /* !important: the links and the credits card set their display inline. */ :root[data-side="off"] .side > :not(.side-head):not(.side-rail) { display: none !important; } :root[data-side="off"] .side-head { flex-direction: column; gap: 8px; margin-left: 0; } :root[data-side="off"] .side-word { display: none; } :root[data-side="off"] .side-rail { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1 1 auto; } } /* The sidebar's study list takes the height the rest of the sidebar leaves and scrolls on its own once it is long. A short window takes some of it back, but never below three studies and a half (or all of them, when there are fewer): flexing starts from its 220px height, and a flex item shrinks no lower than the smaller of that and its content. Past that the sidebar itself scrolls, so nothing at its foot -- the links, the credits, the account -- is ever squeezed, overlapped or cut off. */ .side-studies { flex: 1 1 auto; height: 220px; display: flex; flex-direction: column; gap: 4px; } .studies { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; scrollbar-width: thin; } .side-link { justify-content: flex-start; min-height: 36px; padding: 0 10px; font-size: 13.5px; } /* Desktop: the sidebar stays in the window while the page scrolls, so your credits and your account are always at its foot -- not at the bottom of the longest page. */ @media (min-width: 901px) { .side { position: sticky; top: 0; align-self: start; height: 100vh; height: 100dvh; overflow-y: auto; scrollbar-width: thin; } } /* A short window spends less of its height on the sidebar's spacing and keeps it for the list: at 1280x720 the list shows three rows and more with the account in view. */ @media (max-height: 860px) { .side { padding-top: 14px; padding-bottom: 14px; gap: 12px; } .side-link { min-height: 30px; } } .navitem .meta { display: flex; flex-direction: column; min-width: 0; } .navitem .name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Attachments under the composer: acknowledged the instant a file lands. */ .attached { display: flex; flex-wrap: wrap; gap: 8px; } .att { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--rule); background: var(--tint); font-size: 13.5px; max-width: 100%; } .att b { font-weight: 600; } /* The detail gives way before the name: a long one (a file refused as it was read says why) broke "lig.pdb" into a letter or two a line. */ .att .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 0; } .att.ok { border-color: var(--ok); background: var(--oksoft); } .att.bad { border-color: var(--block); background: var(--blocksoft); color: var(--block); } .att button { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0 2px; font-size: 16px; line-height: 1; } .pdbform { display: flex; gap: 8px; margin-top: 4px; } .pdbform input, .field input, .field select, .inline-edit input, .inline-edit select, textarea.plain, input.plain { min-height: 40px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--panel); color: var(--text); font: inherit; font-size: 14.5px; min-width: 0; } textarea.plain { padding: 10px 12px; min-height: 80px; width: 100%; resize: vertical; } .pdbform input { flex: 1; font-family: "IBM Plex Mono", monospace; text-transform: uppercase; } /* What the composer is waiting for -- a name, a sequence -- once a way of finding the structure is picked, with the way out beside it. */ .mode-pill { display: inline-flex; align-items: center; gap: 2px; align-self: center; flex: none; min-height: 30px; padding: 0 3px 0 11px; border-radius: 999px; background: var(--accentsoft); color: var(--accenttext); font-size: 13px; font-weight: 600; white-space: nowrap; } .mode-pill button { border: 0; background: transparent; color: inherit; width: 24px; height: 24px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .mode-pill button:hover { background: var(--accentline); } .pdbform input:focus, .field input:focus, .field select:focus, .inline-edit input:focus, .inline-edit select:focus, textarea.plain:focus, input.plain:focus { outline: none; border-color: var(--accent); } .card[aria-disabled="true"] { opacity: .62; cursor: default; } .notice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--rule); background: var(--panel); font-size: 14.5px; } .notice.warn { border-color: var(--warn); background: var(--warnsoft); color: var(--warnink); } .notice.block { border-color: var(--block); background: var(--blocksoft); color: var(--block); } .notice.ok { border-color: var(--ok); background: var(--oksoft); color: var(--oktext); } /* The study is a workspace (viewStudy): the structure fills the page on the viewport's dark ground, with what was done listed under it, and the conversation is a panel on the right, as wide as it is dragged (--chatw, wireChatGrip in app.js), or narrower while the window has no room for that beside 360 px of structure. The page itself does not scroll; the thread does. */ body.ws-mode .main { height: 100vh; overflow: hidden; } body.ws-mode #view { flex: 1; min-height: 0; display: flex; } .ws { flex: 1; min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(360px, 1fr) 6px minmax(380px, var(--chatw, 480px)); } .ws-view { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--vp); color: #DCE7E5; } .ws-stage { position: relative; flex: 1; min-height: 0; } .ws-fill { position: absolute; inset: 0; } .ws-stage .viewer3d { position: absolute; inset: 0; height: auto; background: transparent; cursor: grab; } .ws-stage .viewer3d:active { cursor: grabbing; } .ws-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; } .ws-empty .card { width: min(420px, 100%); padding: 18px; display: flex; flex-direction: column; gap: 10px; color: var(--text); } /* What is on the stage, over its top-left corner: the structure, and its chains and bound molecules as layers to show or hide. */ .ws-head { position: absolute; left: 14px; top: 12px; max-width: calc(100% - 90px); z-index: 2; display: flex; flex-direction: column; gap: 6px; pointer-events: none; } .ws-head > * { pointer-events: auto; } .ws-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; color: #F2F7F6; } .ws-sub { font-size: 12.5px; color: #9FB4B1; } .ws-layers { display: flex; flex-wrap: wrap; gap: 6px; } .ws-layer { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 2px 10px; border-radius: 999px; border: 1px solid #2B454C; background: rgba(11,20,22,.72); color: #DCE7E5; font: inherit; font-size: 12.5px; cursor: pointer; } .ws-layer .sw { width: 9px; height: 9px; border-radius: 999px; display: inline-block; } .ws-layer[aria-pressed="false"] { opacity: .45; text-decoration: line-through; } /* The stage's tools, down its right edge, as in a viewer. */ .ws-tools { position: absolute; right: 12px; top: 12px; z-index: 2; display: flex; flex-direction: column; gap: 6px; } .ws-tool { width: 34px; height: 34px; border-radius: 9px; border: 1px solid #2B454C; background: rgba(11,20,22,.72); color: #C9D8D6; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .ws-tool:hover, .ws-tool[aria-pressed="true"] { color: #FFFFFF; border-color: var(--accent); } .stage-cap { position: absolute; left: 14px; bottom: 12px; max-width: calc(100% - 28px); z-index: 2; font-size: 12.5px; padding: 5px 11px; border-radius: 8px; border: 1px solid #2B454C; background: rgba(11,20,22,.8); color: #EAF2F0; } .stage-cap .reslink { font-size: inherit; color: #9CC9F5; } /* What was done, in order, in words: the workspace's activity list. */ .ws-log { flex: none; border-top: 1px solid #1E3338; background: #081114; display: flex; flex-direction: column; max-height: 26%; } .ws-log-head { display: flex; align-items: center; gap: 8px; padding: 7px 14px; border: 0; background: transparent; color: #9FB4B1; font: inherit; font-size: 12.5px; cursor: pointer; text-align: left; } .ws-log-head .n { margin-left: auto; font-family: "IBM Plex Mono", monospace; } .ws-log-list { list-style: none; margin: 0; padding: 0 14px 10px; overflow-y: auto; font-size: 13px; line-height: 1.5; min-height: 0; } .ws-log-list li { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 10px; } .ws-log-list .t { color: #5E7A77; font-family: "IBM Plex Mono", monospace; font-size: 12px; } .ws-log-list .did { color: #CFE3F7; overflow-wrap: anywhere; } .ws-log-list .out { display: block; color: #8FB08C; overflow-wrap: anywhere; } .ws-log-list .note { color: #7E9693; } .ws-log[data-open="false"] .ws-log-list { display: none; } .ws-grip { cursor: col-resize; background: var(--rule); touch-action: none; } .ws-grip:hover, .ws-grip:focus-visible, .ws-grip.on { background: var(--accent); outline: none; } /* The conversation, on the right: the thread scrolls, the composer stays. */ .ws-chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--ground); container: chat / inline-size; } /* Positioned, so what is placed absolutely inside the thread -- the labels kept for screen readers (.sr-only) -- scrolls and clips with it. Placed against the page instead, a label far down a long conversation hung below the window and made the whole page scroll, leaving an empty band under it. */ .ws-thread { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 22px 20px 14px; } .ws-chat .thread { gap: 20px; } .ws-chat .turn-ai { grid-template-columns: 28px minmax(0,1fr); gap: 10px; } .ws-chat .avatar { width: 28px; height: 28px; border-radius: 9px; } .ws-chat .turn-body, .ws-chat .turn-user { font-size: 14.5px; } .ws-chat .turn-user { max-width: 88%; } /* 18px under the composer, at any width: the development service's badge is a 16px tab at the foot of the window (BADGE in devgate.py), clear of it. */ .ws-chat .dock { position: static; padding: 10px 16px 18px; border-top: 1px solid var(--rulesoft); } .dock { display: flex; flex-direction: column; gap: 10px; background: var(--ground); z-index: 3; } .chiprow { gap: 8px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; } .chiprow .chip { flex: none; } .methods p { margin: 0 0 12px; } .methods code { font-family: "IBM Plex Mono", monospace; font-size: .85em; background: var(--raised); padding: 1px 5px; border-radius: 5px; } /* Narrow: the structure on top, the conversation under it, the page scrolling. */ @media (max-width: 1100px) { body.ws-mode .main { height: auto; overflow: visible; } body.ws-mode #view { display: block; } .ws { display: flex; flex-direction: column; } .ws-view { height: 52vh; min-height: 320px; } .ws-log { max-height: 30%; } .ws-grip { display: none; } .ws-thread { overflow: visible; padding: 18px 16px 12px; } .ws-chat .dock { position: sticky; bottom: 0; } } .turn-body .aside { font-size: 14px; color: var(--muted); margin: 0; } .cannot { border: 1px solid var(--warn); background: var(--warnsoft); color: var(--warnink); border-radius: 10px; padding: 10px 14px; font-size: 14px; } .finding { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; } .finding + .finding { border-top: 1px solid var(--rulesoft); padding-top: 10px; } .ask { border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: 12px; background: var(--panel); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; } .ask.spent { opacity: .5; pointer-events: none; border-left-color: var(--rule); } .ask .q { margin: 0; font-weight: 600; } .ask-grid { display: flex; flex-direction: column; gap: 8px; } .ask-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; } .ask-row .q { font-weight: 500; font-size: 14.5px; overflow-wrap: anywhere; } .ask-row small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 400; } .ask-row input { width: 96px; text-align: right; } .ask-row input.smi { flex: 1; width: auto; text-align: left; font-family: "IBM Plex Mono", monospace; font-size: 13px; } /* A structure prediction's chains (askPredict): each a card of its own, its kind, name and copies on one line and its sequence under them, so a long sequence wraps in its own box rather than stretching the conversation. */ .pred-chains { display: flex; flex-direction: column; gap: 10px; } .pred-chain { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 12px; background: var(--ground); } .pred-chain-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .pred-chain-head [data-cname] { flex: 1 1 120px; text-align: left; } select.plain { min-height: 40px; padding: 0 10px; border: 1px solid var(--rule); border-radius: 10px; background: var(--panel); color: var(--text); font: inherit; font-size: 14.5px; } select.plain:focus { outline: none; border-color: var(--accent); } .pred-copies { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--muted); } .pred-copies input { width: 56px; text-align: center; padding: 0 6px; } .pred-del { width: 36px; height: 36px; margin-left: auto; } .pred-del:disabled { display: none; } textarea.pred-seq { min-height: 64px; font-size: 13px; line-height: 1.5; word-break: break-all; } .pred-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 14.5px; } .pred-check input { margin-top: 4px; width: 16px; height: 16px; accent-color: var(--accent); flex: none; } .pred-aff { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--tint); border: 1px solid var(--rule); } /* A prediction's models: a row each, wrapping in the conversation's narrow column -- the model and its pLDDT band, its numbers, its buttons -- and on one line on a run's own page. */ .pred-models { display: flex; flex-direction: column; } .pred-model { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 12px 0; } .pred-model + .pred-model { border-top: 1px solid var(--rulefaint); } .pred-model-id { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; min-width: 190px; } .pred-model-nums { flex: 1 1 220px; font-size: 13.5px; color: var(--muted); } .pred-model-nums strong { color: var(--text); font-weight: 500; } .pred-model-go { display: flex; align-items: center; gap: 6px; margin-left: auto; } .ask-row.need .q { color: var(--warntext); } .ask-row.need input, .ask-row.need .seg { border-color: var(--warn); } /* A question answers itself with one option taken and the rest folded away (foldOpts): the chat stays a conversation, and the list is a click away for anyone who wants it. */ .opts.folded > .opt:not(.opt-on) { display: none; } .opts-more { align-self: flex-start; border: 0; background: none; padding: 2px 0; font: inherit; font-size: 13.5px; color: var(--accenttext); cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; } .opts-more:hover { text-decoration-style: solid; } .spin { display: inline-block; width: 13px; height: 13px; border: 2px solid var(--rule); border-top-color: var(--accent); border-radius: 50%; animation: clspin .7s linear infinite; vertical-align: -2px; } @keyframes clspin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .spin { animation: none; } } /* Structure viewer: 3Dmol needs a positioned box with a real height. */ .viewer3d { position: relative; height: 230px; background: var(--raised); cursor: pointer; } .viewer3d canvas { border-radius: 0; } .viewer3d .empty { color: var(--muted); font-size: 13px; } .bigview { position: fixed; inset: 0; z-index: 80; background: var(--ground); display: flex; align-items: center; justify-content: center; } .bigview .stage3d { width: min(1100px, 94vw); height: 84vh; position: relative; } .bigview .close { position: absolute; top: 16px; right: 16px; z-index: 2; } .veil { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; background: color-mix(in srgb, var(--ground) 92%, transparent); border: 3px dashed var(--accent); font-size: 19px; padding: 24px; text-align: center; } .veil.on { display: flex; } .provrow { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 8px; align-items: center; font-size: 13.5px; padding: 3px 0; } .pv { width: 8px; height: 8px; border-radius: 999px; display: inline-block; } .pv.read { background: var(--ok); } .pv.user { background: var(--live); } .pv.assumed { background: var(--warn); } .pv.unknown { background: transparent; box-shadow: inset 0 0 0 2px var(--block); } .chips { display: flex; flex-wrap: wrap; gap: 6px; } .chips .chip { min-height: 28px; padding: 2px 10px; font-size: 12.5px; cursor: default; } .chips .dot { width: 8px; height: 8px; } details.more summary { cursor: pointer; color: var(--muted); font-size: 13.5px; list-style: none; } details.more summary::-webkit-details-marker { display: none; } details.more summary::before { content: "▸ "; } details.more[open] summary::before { content: "▾ "; } /* A finding's specialist wording under its plain sentence: small, and out of the way until asked for. */ details.more.tech { margin-top: 4px; } details.more.tech summary { font-size: 12.5px; } details.more.tech > span { display: block; margin-top: 4px; font-size: 13px; color: var(--text3); } /* A setting's line of help, under its value. */ .field-h { font-size: 12.5px; color: var(--muted); line-height: 1.35; } /* Plan page parameter editing. */ .select.editing { padding: 0; border-color: var(--accent); } .inline-edit { display: flex; gap: 6px; width: 100%; } .inline-edit input, .inline-edit select { flex: 1; min-height: 38px; } .fingerprint { font-family: "IBM Plex Mono", monospace; font-size: 13.5px; letter-spacing: .02em; } /* Charts. Hairline solid grid, 2px lines, text in text tokens. */ .chart { position: relative; width: 100%; } .chart svg { display: block; width: 100%; height: auto; overflow: visible; } .chart .grid line { stroke: var(--rulesoft); stroke-width: 1; } .chart .axis text { fill: var(--muted); font-size: 11px; font-family: "Source Sans 3", sans-serif; } .chart .axis .title { fill: var(--muted); font-size: 11px; } .chart .series path { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .chart .endlabel { fill: var(--text4); font-size: 11.5px; font-family: "Source Sans 3", sans-serif; } .chart .enddot { stroke: var(--panel); stroke-width: 2; } .chart .cross { stroke: var(--rule2); stroke-width: 1; } .chart .hit { fill: transparent; cursor: crosshair; } .chart .hit:focus { outline: none; } .chart:focus-within .cross { stroke: var(--accent); } .tip { position: absolute; pointer-events: none; z-index: 5; background: var(--panel); border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 8px 10px; font-size: 12.5px; min-width: 120px; color: var(--text); } .tip .x { color: var(--muted); margin-bottom: 4px; } .tip .r { display: flex; align-items: center; gap: 8px; } .tip .r b { font-family: "IBM Plex Mono", monospace; font-weight: 500; } .tip .key, .legend .key { width: 14px; height: 2px; border-radius: 2px; display: inline-block; flex: none; } .legend .item { display: inline-flex; align-items: center; gap: 6px; } .chart-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .linkish { border: 0; background: none; color: var(--accent); font: inherit; font-size: 13px; cursor: pointer; padding: 0; } .linkish:hover { text-decoration: underline; } .tableview { max-height: 260px; overflow: auto; border: 1px solid var(--rulesoft); border-radius: 10px; } .tableview table.t td, .tableview table.t th { padding: 6px 10px; font-size: 12.5px; } .tableview td.num { font-family: "IBM Plex Mono", monospace; text-align: right; } .stat-v { font-variant-numeric: normal; } .bar.thin { height: 6px; } .timeline { display: flex; flex-direction: column; gap: 12px; font-size: 14.5px; } .timeline .row { align-items: flex-start; } .timeline .todo { color: var(--placeholder); } .methods { margin: 0; font-size: 17px; line-height: 1.6; color: var(--text2); white-space: pre-wrap; } .filelist a { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--rulefaint); color: var(--text); } .filelist a:last-child { border-bottom: 0; } .filelist .group { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-top: 10px; } /* Admin */ .tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--rule); } .tab { border: 0; background: none; padding: 10px 14px; font: inherit; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; cursor: pointer; min-height: 44px; } .tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); } table.t tbody tr.clickable { cursor: pointer; } table.t tbody tr.clickable:hover { background: var(--opthover); } table.t tbody tr.row-on, table.t tbody tr.row-on:hover { background: var(--accent-soft); } .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(640px, 100vw); background: var(--ground); border-left: 1px solid var(--rule); z-index: 70; overflow-y: auto; padding: 24px; box-shadow: -10px 0 40px rgba(0,0,0,.18); display: flex; flex-direction: column; gap: 16px; } .kvs { display: grid; grid-template-columns: max-content minmax(0,1fr); gap: 6px 16px; font-size: 14px; } .kvs dt { color: var(--muted); } .kvs dd { margin: 0; overflow-wrap: anywhere; } pre.code { background: var(--raised); border-radius: 10px; padding: 10px 12px; font-size: 12px; overflow: auto; max-height: 240px; margin: 0; } /* Pills that open what they count. */ button.tag { border: 0; cursor: pointer; font-family: inherit; } button.tag:hover { text-decoration: underline; text-underline-offset: 2px; } /* The trajectory player and residue contacts on the results page. */ .movie { overflow: hidden; display: flex; flex-direction: column; } .movie-view { height: 340px; border-radius: 0; } .movie-wait { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 10px; color: #CFD8D6; font-size: 14px; padding: 16px; text-align: center; } .movie-wait[hidden] { display: none; } .movie-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px 2px; } .movie-bar input[type=range] { flex: 1 1 auto; min-width: 80px; accent-color: var(--accent); } .movie-bar select { font: inherit; font-size: 13.5px; border: 1px solid var(--rule); border-radius: 8px; padding: 4px 6px; background: var(--panel); color: var(--text); } .movie-tools { display: flex; gap: 2px; flex-wrap: wrap; padding: 0 6px 8px; } .movie-tools .btn { min-height: 36px; font-size: 14px; padding: 0 10px; } .reslink { border: 0; background: none; padding: 0; font: inherit; color: var(--accenttext); cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; } .reslink:hover { text-decoration-style: solid; } .contacts { display: flex; flex-direction: column; gap: 2px; } .reslink.contact-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 44px; align-items: center; gap: 10px; text-decoration: none; color: var(--text); padding: 4px 0; text-align: left; font-size: 14px; } .contact-row .bar { height: 6px; background: var(--track); border-radius: 999px; overflow: hidden; } .contact-row .bar span { display: block; height: 100%; background: var(--accent); } .contact-row:hover span:first-child { text-decoration: underline; } /* Finding a structure by name or sequence. */ .lookup { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; box-shadow: none; } .lk-list { display: flex; flex-direction: column; } .lk-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--rulefaint); flex-wrap: wrap; } .lk-list .lk-row:first-child { border-top: 0; } .lk-id { min-width: 64px; font-size: 13.5px; color: var(--accenttext); } .lk-main { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .lk-actions { display: flex; flex-wrap: wrap; gap: 2px; } .lk-actions .btn, .lk-row > .btn { min-height: 36px; font-size: 14px; padding: 0 12px; } /* The pills under a lookup's reply: each opens what it names, and is lit while that is open. */ /* What a question points to, under Claude's answer (converse): each target with the entries the PDB confirmed, and a lookup by name. */ .talk-target { display: flex; flex-direction: column; gap: 4px; } .talk-target + .talk-target { border-top: 1px solid var(--rulefaint); padding-top: 10px; } .talk-find { align-self: flex-start; min-height: 32px; padding: 0 10px; font-size: 13.5px; } /* The question put to plan, with its steps: planned only once confirmed. */ .confirm-q { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; box-shadow: none; border-color: var(--accentline); background: var(--accentsoft); } .confirm-q .cq { margin: 0; font-weight: 600; } .cq-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 3px; font-size: 14px; } .confirm-q.spent { opacity: .62; } .lk-pills { display: flex; flex-wrap: wrap; gap: 8px; } .lk-pills .chip { min-height: 34px; padding: 4px 14px; font-size: 14px; } .lk-pills .chip[aria-expanded="true"] { border-color: var(--accent); color: var(--accenttext); background: var(--accentsoft); } /* Each list under a heading that opens and closes it. */ details.lk-fold + details.lk-fold { border-top: 1px solid var(--rulefaint); padding-top: 8px; } details.lk-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 32px; } details.lk-fold > summary::-webkit-details-marker { display: none; } details.lk-fold > summary::before { content: "▸"; color: var(--muted); font-size: 12px; width: 10px; } details.lk-fold[open] > summary::before { content: "▾"; } details.lk-fold > summary::after { content: "Show"; margin-left: auto; font-size: 13.5px; color: var(--accenttext); } details.lk-fold[open] > summary::after { content: "Hide"; } details.lk-fold > summary:hover .label { color: var(--text); } details.lk-fold[open] > summary { margin-bottom: 4px; } .lk-count { font-size: 12px; font-weight: 600; color: var(--muted); border: 1px solid var(--rule); border-radius: 999px; padding: 0 8px; line-height: 18px; } /* Interactions in 2D. */ .ixcard { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; } .ixhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; } .ixtools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ixtools .btn { min-height: 36px; font-size: 14px; padding: 0 12px; } .ixtools .seg-b { max-width: 220px; overflow: hidden; text-overflow: ellipsis; } .ixmin { font-size: 13.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; } .ixmin select, .movie-bar #movieSpeed { font: inherit; font-size: 13.5px; border: 1px solid var(--rule); border-radius: 8px; padding: 4px 6px; background: var(--panel); color: var(--text); } .ixview { overflow: auto; max-height: 760px; border: 1px solid var(--rulefaint); border-radius: 12px; background: var(--panel); padding: 6px; } .ixsvg { display: block; width: 100%; height: auto; max-height: 620px; margin: 0 auto; } .ixnode { cursor: pointer; outline: none; } .ixnode:hover rect, .ixnode:hover circle, .ixnode:focus-visible rect, .ixnode:focus-visible circle { stroke-width: 3px; } .ixedge { outline: none; } .ixedge[data-pair] { cursor: pointer; } .ixedge:hover line:not(.ixhit), .ixedge:focus-visible line:not(.ixhit) { stroke-width: 4px; } .ixkey { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--text3); } .ixkey-i { display: inline-flex; align-items: center; gap: 6px; } .ixkey-break { flex-basis: 100%; height: 0; } .ixpairbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 4px 8px; } .ixpairs { list-style: none; margin: 4px 0 0; padding: 8px 6px 2px; border-top: 1px solid var(--rulefaint); display: grid; gap: 6px; font-size: 13.5px; color: var(--text2); } .ixpairs li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ixpct { color: var(--muted); font-variant-numeric: tabular-nums; } .ixhow { font-size: 13px; color: var(--muted); } .ixhow summary { cursor: pointer; } .ixhow ul { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; } .contact-wrap { display: flex; flex-direction: column; } .ixtags { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 0 6px 106px; } .ixtag { font-size: 12px; line-height: 1; padding: 4px 7px; border-radius: 999px; border: 1.5px solid var(--k); color: var(--text2); white-space: nowrap; } @media (max-width: 720px) { .ixtags { padding-left: 0; } } .ixempty { padding: 30px 18px; text-align: center; color: var(--muted); font-size: 14.5px; } /* One structure's contacts (contacts-view.js): the map beside its table where the panel is wide -- a docking's card -- and above it where it is narrow: a chat turn, a phone. */ .pcx { display: flex; flex-direction: column; gap: 10px; min-width: 0; container-type: inline-size; } .pcx-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; align-items: start; } @container (max-width: 680px) { .pcx-body { grid-template-columns: minmax(0, 1fr); } } .pcx .ixview { max-height: 520px; } .pcx .ixsvg { max-height: 480px; } .pcx-table { overflow: auto; max-height: 520px; border: 1px solid var(--rulefaint); border-radius: 12px; background: var(--panel); } .pcx-table table.t { width: 100%; } .pcx-table table.t th, .pcx-table table.t td { padding: 7px 10px; font-size: 13.5px; } .pcx-table table.t th { position: sticky; top: 0; background: var(--panel-solid); z-index: 1; } .pcx-map { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .pcx-note { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 13.5px; color: var(--text3); } /* Exact contacts, under a structure read by distance: the offer at its price, the confirmation that says what happens, the preparation going. */ .pcx-exact { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .pcx-exact:empty { display: none; } .pcx-exact-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13.5px; } .pcx-exact-row .muted { flex: 1 1 220px; min-width: 0; } .pcx-exact-busy { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--rule); background: var(--panel); font-size: 13.5px; } .pcx-exact-busy .spin { flex: none; margin-top: 2px; } .pcx-confirm { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--accent); background: var(--panel); font-size: 14px; min-width: 0; } .pcx-confirm p { margin: 0; } .pcx-confirm ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 3px; } .pcx-confirm-h { font-size: 15px; } .pcx-confirm-price { font-size: 14px; } .pcx-smiles { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .pcx-smiles input { width: 100%; text-align: left; font-size: 13px; } .pcx-why { font-size: 13px; color: var(--muted); } .pcx-host { padding: 12px 16px; border-top: 1px solid var(--rulefaint); } .pcx-btn { min-height: 30px; padding: 0 8px; font-size: 13px; margin-top: 4px; } /* On the study's stage, beside the structure's name. */ .ws-cx { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--accent); background: rgba(11,20,22,.72); color: #CFE6F7; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; } .ws-cx[aria-pressed="true"] { background: var(--accent); color: #FFFFFF; } /* The plan's starting structure, its contacts full screen. */ .bigview.pcx-big { display: block; overflow: auto; } .pcx-big-title { position: absolute; left: 16px; top: 22px; right: 120px; font-weight: 700; font-size: 16px; } .pcx-big-grid { position: absolute; inset: 64px 16px 16px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 46%); gap: 16px; min-height: 0; } .pcx-big-grid .stage3d { position: relative; width: auto; height: auto; min-height: 320px; border-radius: 12px; overflow: hidden; } .pcx-big-panel { overflow: auto; min-height: 0; padding: 14px 16px; border-radius: 12px; background: var(--panel-solid); color: var(--text); } .pcx-big-panel .ixview, .pcx-big-panel .pcx-table { max-height: none; } @media (max-width: 900px) { .pcx-big-grid { position: static; margin: 64px 12px 16px; grid-template-columns: minmax(0, 1fr); } .pcx-big-grid .stage3d { height: 52vh; } } /* Notifications. */ .bell-wrap { position: relative; display: inline-flex; } .bell-n { position: absolute; top: 2px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--block); color: #fff; font-size: 11px; font-weight: 700; line-height: 17px; text-align: center; } .bell-panel { position: absolute; right: 0; top: calc(100% + 8px); width: min(380px, calc(100vw - 32px)); z-index: 40; display: flex; flex-direction: column; padding: 0; overflow: hidden; } .bell-list { max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; } /* One notice: an icon for how it went, what happened, the run on a line of its own (cut to fit), the time; its full text only on Details. */ .bell-item { display: flex; flex-direction: column; border-top: 1px solid var(--rulefaint); position: relative; } .bell-item.unread { background: color-mix(in srgb, var(--accent) 7%, transparent); } .bell-item.unread::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); } .bell-main { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: start; gap: 10px; width: 100%; text-align: left; padding: 10px 14px; border: 0; background: transparent; color: var(--text); font: inherit; cursor: pointer; } .bell-main:hover { background: var(--opthover); } .bell-ic { width: 26px; height: 26px; border-radius: 999px; display: flex; align-items: center; justify-content: center; } .bell-ic.tone-ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); } .bell-ic.tone-block { color: var(--block); background: color-mix(in srgb, var(--block) 14%, transparent); } .bell-ic.tone-warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); } .bell-ic.tone-plain { color: var(--muted); background: color-mix(in srgb, var(--muted) 14%, transparent); } .bell-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .bell-t { font-weight: 700; font-size: 14px; line-height: 1.3; } .bell-n2 { font-size: 13px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bell-w { font-size: 12px; color: var(--muted); white-space: nowrap; padding-top: 2px; } /* Details: a chevron under the time, on the run's line; it turns up when open. */ .bell-more { position: absolute; right: 10px; top: 30px; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; } .bell-more:hover { color: var(--text); background: var(--opthover); } .bell-more svg { transition: transform .15s; transform: rotate(90deg); } .bell-item.open .bell-more svg { transform: rotate(-90deg); } .bell-item:has(.bell-more) .bell-txt { padding-right: 14px; } .bell-b { margin: -2px 14px 10px 50px; font-size: 13px; line-height: 1.45; color: var(--text3); } .bell-foot { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px 12px; border-top: 1px solid var(--rule); } /* Short messages, at the foot of the window. */ #toasts { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 8px; width: min(520px, calc(100vw - 32px)); pointer-events: none; } .toast { background: var(--bubble); color: var(--onbubble); padding: 11px 16px; border-radius: 12px; font-size: 14.5px; box-shadow: 0 6px 24px rgba(0,0,0,.25); transition: opacity .5s, transform .5s; pointer-events: auto; border-left: 4px solid var(--ok); } .toast-warn { border-left-color: var(--warn); } .toast-block { border-left-color: var(--block); } .toast-out { opacity: 0; transform: translateY(8px); } /* What a reply cost. */ .usage-note { font-size: 12.5px; color: var(--muted); } .ans-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; } .ans-tools .btn { min-height: 32px; font-size: 13.5px; padding: 0 10px; } /* The report card. */ .rep { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; } .rep-sec { border-top: 1px solid var(--rulefaint); padding-top: 8px; } .rep-sec > summary { cursor: pointer; font-weight: 600; font-size: 14.5px; } .rep-grid { display: grid; grid-template-columns: 1fr; gap: 2px; margin-top: 6px; } .rep-opt { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; padding: 3px 0; cursor: pointer; } .rep-opt input, .rep-shot input, .rep-ans input { margin-top: 3px; accent-color: var(--accent); } .rep-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .rep-h { font-size: 13.5px; font-weight: 600; margin-top: 4px; } .rep-none { font-size: 13px; } .rep-chips { display: flex; flex-wrap: wrap; gap: 6px; } .rep-chip { min-height: 30px; padding: 2px 4px 2px 10px; font-size: 13px; gap: 4px; cursor: default; } .rep-chip button { border: 0; background: transparent; color: var(--muted); font-size: 16px; cursor: pointer; padding: 0 6px; } .rep-shots { display: flex; flex-direction: column; gap: 6px; } .rep-shot, .rep-ans { display: grid; grid-template-columns: auto 64px minmax(0,1fr) auto; gap: 8px; align-items: center; font-size: 13px; } .rep-ans { grid-template-columns: auto minmax(0,1fr) auto; align-items: flex-start; } .rep-shot img { width: 64px; height: 44px; object-fit: cover; border-radius: 6px; background: var(--vp); } .rep-shot .btn, .rep-ans .btn { min-height: 30px; font-size: 12.5px; padding: 0 8px; } .rep-foot { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--rulefaint); padding-top: 8px; } .rep-price { font-size: 13.5px; color: var(--text3); } /* The one card that runs it. */ .confirm { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; box-shadow: none; border-color: var(--accentline); } .cf-rows { display: flex; flex-direction: column; } .cf-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-top: 1px solid var(--rulefaint); font-size: 15px; } .cf-row:first-child { border-top: 0; } .cf-k { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding-top: 2px; } .cf-v { min-width: 0; overflow-wrap: anywhere; } .cf-confirm { display: flex; flex-direction: column; gap: 8px; background: var(--tint); border-radius: 10px; padding: 10px 12px; } .cf-item { display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; } .cf-more summary, .readmore summary { cursor: pointer; font-size: 14px; color: var(--accenttext); } .cf-more ol { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; } .cf-fit { display: flex; flex-direction: column; gap: 6px; } /* What the plan chose (loadChoices): each setting, whose it was, and its priced alternatives. */ .cf-choices { display: flex; flex-direction: column; gap: 8px; border-radius: 10px; padding: 10px 12px; border: 1px solid var(--rulefaint); } .cf-choice { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 12px; align-items: center; font-size: 14.5px; } .cf-choice > .row { grid-column: 2; } .cf-choice .tag { margin-left: 6px; } @media (max-width: 520px) { .cf-row { grid-template-columns: 1fr; gap: 2px; } .cf-choice { grid-template-columns: 1fr; } .cf-choice > .row { grid-column: 1; } } /* In the workspace's conversation panel the card is as narrow as the panel is dragged, whatever the window: its rows stack below 600 px. */ @container chat (max-width: 600px) { .cf-row { grid-template-columns: 1fr; gap: 2px; } .cf-choice { grid-template-columns: 1fr; } .cf-choice > .row { grid-column: 1; } } /* The account (#/account, #/billing, #/api): one header, a row of tabs, and the tab's cards under it. The tabs scroll sideways on a phone. */ .hub-head { display: flex; flex-direction: column; gap: 6px; } .hub-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none; } .hub-tabs::-webkit-scrollbar { display: none; } .hub-tab { padding: 10px 14px; font-size: 14.5px; font-weight: 600; color: var(--muted); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; } .hub-tab:hover { color: var(--text); } .hub-tab.on { color: var(--text); border-bottom-color: var(--accent); } .hub-card { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; } .hub-card .head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; } .hub-card .head .h3 { margin: 0; } .hub-stats .stat { min-width: 0; } .hub-stats .stat .btn { align-self: flex-start; margin-top: 6px; min-height: 36px; font-size: 14px; } /* What credits went on: a bar split by kind, and its legend with amounts (the legend says every number; the colours only group them). */ .spend { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--raised); } .spend > span { display: block; height: 100%; min-width: 2px; } .legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; margin: 0; padding: 0; list-style: none; } .legend li { display: inline-flex; align-items: center; gap: 7px; } .legend .sw { width: 10px; height: 10px; border-radius: 3px; flex: none; } .months { display: flex; flex-direction: column; gap: 12px; } .month-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) minmax(120px, auto); gap: 14px; align-items: center; font-size: 13.5px; } .month-row .amt { text-align: right; white-space: nowrap; } @media (max-width: 560px) { .month-row { grid-template-columns: 64px minmax(0, 1fr); } .month-row .amt { grid-column: 2; text-align: left; } } .credit-in { color: var(--oktext); } .filters { display: flex; flex-wrap: wrap; gap: 6px; } .filters .chip { min-height: 32px; padding: 4px 12px; font-size: 13px; } .filters .chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accentsoft); color: var(--accentdeep); } .doc-btns { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .doc-btns .btn { min-height: 30px; padding: 0 10px; font-size: 13px; } .period { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; } .period .field { min-width: 150px; } /* A docking's results: the candidates beside their 3D view (hits-view.js). Stacked in a narrow column (the conversation), side by side from 900px. */ .hitwrap { container-type: inline-size; } .hitsplit { display: grid; grid-template-columns: minmax(0, 1fr); } .hitlist { min-width: 0; container-type: inline-size; container-name: hitlist; } .hitside { display: flex; flex-direction: column; min-width: 0; border-bottom: 1px solid var(--rulefaint); } .hitside-head { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--rulefaint); } .hitside-head .icon-btn { width: 36px; height: 36px; } .hitside-head .icon-btn:disabled { opacity: .35; cursor: default; } .hitside-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; } .hitside-title .muted { font-size: 13px; } .hitstage { position: relative; height: 340px; } .hitstage .viewer3d { position: absolute; inset: 0; height: auto; } .hitstage:fullscreen { height: 100vh; background: var(--panel-solid); } .hitstage .vp-tools { z-index: 2; } .vp-btn[aria-pressed="true"] { color: #FFFFFF; border-color: var(--accent); } .hitside-facts { padding: 10px 14px; font-size: 13.5px; display: flex; flex-direction: column; gap: 6px; } .hitside-facts:empty { display: none; } .hitside .pcx-host { padding: 0 14px 12px; } .hittools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--rulefaint); } .hittools input.plain { flex: 1 1 200px; min-width: 150px; min-height: 34px; } .hittools .chip { min-height: 32px; padding: 4px 12px; font-size: 13px; } .hittools .chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accentsoft); color: var(--accentdeep); } .hittools .chip:disabled { opacity: .5; cursor: default; } .hitloading { margin: 0; padding: 0 14px; font-size: 13px; } .hitloading:empty { display: none; } .hitscroll { overflow: auto; max-height: 520px; } .hitscroll:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } table.t.hits-t th { position: sticky; top: 0; z-index: 1; background: var(--panel-solid); padding: 8px 7px; vertical-align: bottom; } table.t.hits-t td { padding: 8px 7px; } table.t.hits-t td.mono { font-size: 13.5px; white-space: nowrap; } table.t.hits-t .btn { min-height: 32px; padding: 0 10px; font-size: 13px; } table.t.hits-t td:first-child, table.t.hits-t th:first-child { padding-right: 2px; } .sorter { border: 0; background: none; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; } .sorter:hover { color: var(--accent); } th[aria-sort="ascending"] .sorter::after { content: " ↑"; } th[aria-sort="descending"] .sorter::after { content: " ↓"; } .hitmol { display: flex; align-items: center; gap: 10px; min-width: 170px; } .hitrank { font-family: "IBM Plex Mono", monospace; font-size: 12.5px; color: var(--muted); } .hitmol .hitform { font-size: 12.5px; } .moldraw-slot { width: 84px; height: 62px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--raised); overflow: hidden; } .moldraw { width: 100%; height: 100%; object-fit: contain; display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .moldraw { filter: invert(.92) hue-rotate(180deg); } } :root[data-theme="dark"] .moldraw { filter: invert(.92) hue-rotate(180deg); } @container hitlist (max-width: 820px) { .hits-t .hide-lg { display: none !important; } } @container hitlist (max-width: 520px) { .hits-t .hide-md { display: none !important; } .moldraw-slot { width: 72px; height: 54px; } } .molstrip { display: flex; gap: 16px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--rulefaint); flex-wrap: wrap; } .molstrip[hidden] { display: none; } .molstrip-draw { width: 180px; height: 130px; flex: none; border-radius: 10px; background: var(--raised); padding: 6px; } .molstrip-text { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .hitchart { padding: 12px 16px; border-top: 1px solid var(--rulefaint); display: flex; flex-direction: column; gap: 8px; } .hitchart-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .hitchart-head select { min-height: 32px; } .scatter .dot { fill: var(--accent); opacity: .7; } .scatter .dot.dim { opacity: .14; } .scatter .dot.on { fill: var(--ligandc); opacity: 1; } .scatter .ring { fill: none; stroke: var(--ligandc); stroke-width: 2; pointer-events: none; } .scatter .band { fill: var(--accentsoft); fill-opacity: .55; stroke: var(--accent); stroke-dasharray: 4 3; pointer-events: none; } .scatter .guide { stroke: var(--rule2); stroke-width: 1.5; stroke-dasharray: 6 4; } .scatter .hit { cursor: crosshair; } @container (min-width: 900px) { .hitsplit { grid-template-columns: minmax(0, 1.75fr) minmax(320px, 1fr); } .hitside { order: 2; border-bottom: 0; border-left: 1px solid var(--rulefaint); } .hitstage { height: 420px; } .hitscroll { max-height: 660px; } } /* A 3D view's command line and Style panel (view-style.js). The command line sits on the view's dark ground, a console under the picture; the panel shows each choice as what it looks like: colour schemes as strips of their colours, the protein's drawings as pictures, backgrounds as swatches, what is shown as switches. A pose's interactions are a legend on the view, each kind's line in its own dash. */ .vcmd { position: relative; background: var(--vp, #0D171A); border-top: 1px solid #22383E; } .vcmd-line { display: flex; align-items: center; gap: 8px; padding: 0 12px; cursor: text; } .vcmd-prompt { color: #6FD3A9; font: 600 15px/1 "IBM Plex Mono", ui-monospace, monospace; } .vcmd-in { flex: 1; min-width: 0; padding: 10px 0; border: 0; outline: none; background: transparent; color: #E3EEEC; font: 13px/1.4 "IBM Plex Mono", ui-monospace, monospace; } .vcmd-in::placeholder { color: #7E9A97; } .vcmd:focus-within { box-shadow: inset 0 0 0 1px #3E6B66; } .vcmd-say { padding: 0 12px 9px 31px; color: #A9C1BE; font: 12.5px/1.5 "IBM Plex Mono", ui-monospace, monospace; } .vcmd-say:empty { display: none; } .vcmd-say.vcmd-bad { color: #F2A48F; } .vcmd-help { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 14px; } .vcmd-help code { color: #6FD3A9; font: inherit; } .vcmd-help span { color: #C9D8D6; } .vcmd-hints { position: absolute; left: 8px; right: 8px; bottom: 100%; z-index: 5; margin: 0 0 6px; padding: 4px; list-style: none; background: #132328; border: 1px solid #2B454C; border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, .3); } .vcmd-hints[hidden] { display: none; } .vcmd-hints li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 5px 8px; border-radius: 6px; cursor: pointer; } .vcmd-hints li code { color: #E3EEEC; font: 12.5px "IBM Plex Mono", ui-monospace, monospace; white-space: nowrap; } .vcmd-hints li span { min-width: 0; overflow: hidden; color: #7E9A97; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .vcmd-hints li:hover, .vcmd-hints li[aria-selected="true"] { background: #1E3A41; } .vstyle { border-bottom: 1px solid var(--rulefaint); container: vstyle / inline-size; } .vstyle[hidden] { display: none; } .vstyle > summary { display: flex; align-items: baseline; gap: 10px; padding: 10px 12px; cursor: pointer; list-style: none; font-size: 13.5px; font-weight: 600; } .vstyle > summary::-webkit-details-marker { display: none; } .vstyle > summary::before { content: "▸"; color: var(--muted); font-size: 11px; } .vstyle[open] > summary::before { content: "▾"; } .vstyle-now { min-width: 0; overflow: hidden; color: var(--muted); font-weight: 400; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; } .vstyle-body { padding: 0 12px 14px; } .vstyle-body > * + * { margin-top: 14px; } @container vstyle (min-width: 560px) { .vstyle-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; } .vstyle-body > * + * { margin-top: 0; } } .vs-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .vs-h { margin: 0 0 6px; color: var(--text3); font-size: 12.5px; font-weight: 600; } .vs-list { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--rulefaint); border-radius: 10px; background: var(--panel); } .vs-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) 14px; align-items: center; gap: 10px; padding: 7px 10px; border: 0; border-top: 1px solid var(--rulefaint); background: none; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; } .vs-row:first-child { border-top: 0; } .vs-row:hover { background: var(--raised); } .vs-row b { font-weight: 600; } .vs-row small { display: block; color: var(--muted); font-size: 12px; line-height: 1.3; } .vs-row svg { color: var(--muted); } .vs-row::after { content: ""; color: var(--accent); font-weight: 700; } .vs-row[aria-checked="true"] { background: color-mix(in srgb, var(--accent) 8%, var(--panel)); } .vs-row[aria-checked="true"]::after { content: "✓"; } .vs-row[aria-checked="true"] svg { color: var(--accent); } .vs-scheme { grid-template-columns: 54px minmax(0, 1fr) 14px; } .vs-strip { display: block; width: 54px; height: 12px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); } .vs-wells { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; color: var(--muted); font-size: 12.5px; } .vs-wells label { display: inline-flex; align-items: center; gap: 6px; } .vs-wells input[type="color"] { width: 28px; height: 22px; padding: 0; border: 1px solid var(--rule); border-radius: 6px; background: none; cursor: pointer; } .vs-draw { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .vs-pic { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 6px; border: 1px solid var(--rulefaint); border-radius: 10px; background: var(--panel); color: var(--text3); font: inherit; font-size: 12.5px; cursor: pointer; } .vs-pic:hover { border-color: var(--accent); } .vs-pic svg { max-width: 100%; } .vs-pic[aria-checked="true"] { border-color: var(--accent); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .vs-solid { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--muted); font-size: 12px; } .vs-solid input { flex: 1; min-width: 60px; } .vs-nosurface .vs-solid { opacity: .45; } .vs-grounds { display: flex; gap: 18px; } .vs-ground { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; } .vs-ground i { width: 26px; height: 26px; border: 1px solid var(--rule); border-radius: 50%; } .vs-ground[aria-checked="true"] { color: var(--text); } .vs-ground[aria-checked="true"] i { box-shadow: 0 0 0 2px var(--panel-solid), 0 0 0 4px var(--accent); } .vs-switches { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px 14px; } .vs-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; } .vs-switch input { position: relative; flex: none; width: 30px; height: 18px; margin: 0; border-radius: 9px; background: var(--rule); appearance: none; cursor: pointer; transition: background .15s; } .vs-switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .15s; } .vs-switch input:checked { background: var(--accent); } .vs-switch input:checked::after { transform: translateX(12px); } .vs-switch input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .ilegend { position: absolute; left: 8px; bottom: 8px; z-index: 2; display: flex; flex-direction: column; max-width: calc(100% - 16px); padding: 4px; border: 1px solid var(--rule); border-radius: 10px; background: color-mix(in srgb, var(--panel-solid) 90%, transparent); } .ilegend[hidden] { display: none; } .ilg-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 2px 6px; border: 0; border-radius: 6px; background: none; color: var(--text); font: inherit; font-size: 12px; text-align: left; cursor: pointer; } .ilg-row:hover { background: var(--raised); } .ilg-row[aria-pressed="false"] { color: var(--muted); text-decoration: line-through; } .ilg-row[aria-pressed="false"] svg { opacity: .3; } .ilg-n { color: var(--muted); font-family: "IBM Plex Mono", ui-monospace, monospace; } .molhost { position: absolute; inset: 0; } .molhost[hidden], .hitstage .viewer3d[hidden] { display: none; } .hitstage:has(.molhost:not([hidden])) .vp-tools, .hitstage:has(.molhost:not([hidden])) .ilegend { display: none; } .molback { position: absolute; left: 8px; bottom: 8px; z-index: 3; padding: 4px 10px; border: 1px solid var(--rule); border-radius: 8px; background: var(--panel-solid); color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; } .molback[hidden] { display: none; } /* A prediction's models in 3D, coloured by confidence, and its error map (pred-view.js). */ [data-predview] { container-type: inline-size; } .predview { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } .predview .hitstage { height: 380px; border-radius: 12px; overflow: hidden; border: 1px solid var(--rulefaint); } .plddt-key { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--muted); } .plddt-key span { display: inline-flex; align-items: center; gap: 6px; } .plddt-key i { width: 14px; height: 10px; border-radius: 3px; display: inline-block; } .pae { display: flex; flex-direction: column; gap: 8px; } .pae-plot { position: relative; align-self: flex-start; } .pae-plot canvas { display: block; width: 320px; height: 320px; max-width: 100%; image-rendering: pixelated; border: 1px solid var(--rulefaint); border-radius: 6px; cursor: crosshair; } .pae-scale[hidden] { display: none; } .pae-scale { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); } .pae-scale i { width: 140px; height: 10px; border-radius: 3px; background: linear-gradient(90deg, #0A5D2D, #6FBF73, #F2F7F2); } .pred-model.clickable { cursor: pointer; border-radius: 10px; } .pred-model.clickable:hover { background: var(--opthover); } .pred-model.row-on { background: var(--accent-soft); } @container (min-width: 760px) { .predview { grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); } }