/* SeqWeb 2.x look: grey left frame, serif headings, blue underlined links,
   grey bottom button bar. Plain CSS, no frameset. */
:root {
  --frame: #c0c0c0; --frame-dark: #808080; --page: #ffffff; --page-grey: #e8e8e8;
  --ink: #000; --link: #0000ee; --visited: #551a8b; --head: #000;
  --cell: #e0e0e0; --err: #b00000; --ok: #006000; --btn: #d4d0c8;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 15px/1.35 "Times New Roman", Times, serif; color: var(--ink); background: var(--page); }
body.grey { --page: var(--page-grey); background: var(--page-grey); }
a { color: var(--link); }
a:visited { color: var(--visited); }
.frame { display: grid; grid-template-columns: 210px 1fr; min-height: calc(100vh - 46px); }
nav.left { background: var(--frame); border-right: 3px ridge #e0e0e0; font-family: Arial, Helvetica, sans-serif; }
.logo { text-align: center; padding: 8px 6px 10px; border-bottom: 3px ridge #e0e0e0; }
.logo img { display: block; margin: 0 auto 6px; }
.navmode { text-align: left; display: inline-block; font-weight: bold; color: #1a3aa8; }
.navmode label { display: block; font-size: 15px; cursor: pointer; }
.navlist { padding: 10px 10px 30px; }
.navlist a { display: block; margin: 0 0 14px; font-size: 14px; }
.navlist a small { color: #333; }
.navlist a.mgr { font-size: 15px; text-decoration: none; }
.navlist .icon { display: inline-block; width: 1.6em; }
main.right { background: var(--page); padding: 10px 22px 70px; overflow-x: auto; }
h1 { font-size: 30px; margin: 6px 0 2px; }
h2 { font-size: 17px; margin: 0 0 6px 30px; }
h3 { font-size: 17px; margin: 14px 0 6px; }
hr { border: 0; border-top: 2px groove #ccc; margin: 10px 0; }
.proghead { display: flex; justify-content: space-between; align-items: flex-start; }
.proghead .book { font-size: 34px; text-decoration: none; }
.center { text-align: center; }
.catprog h3 { margin-bottom: 2px; }
.catprog p { margin: 2px 0 6px 20px; }
.modes { list-style: none; padding-left: 40px; margin: 6px 0 14px; }
.modes li { margin: 10px 0; display: flex; align-items: center; gap: 8px; }
.typeicon { display: inline-block; width: 30px; height: 22px; background: no-repeat center/contain; }
.typeicon.dna { background-image: url("dna.svg"); }
.typeicon.prot { background-image: url("protein.svg"); }
.typeicon.both { background-image: url("protein.svg"); }
.inputblock { font-family: "Courier New", monospace; font-size: 13px; margin-left: 8px; }
.kv th { text-align: left; font-weight: normal; padding-right: 8px; }
.seqlist { max-height: 260px; overflow: auto; border: 2px inset #ccc; width: max-content; min-width: 420px; background: #fff; margin: 6px 0; }
table.seqs, table.hits, table.jobs { border-collapse: collapse; }
table.seqs th { color: #0000c0; font-weight: normal; text-align: left; padding: 2px 8px; background: #f4f4f4; position: sticky; top: 0; }
table.seqs td { padding: 1px 8px; }
table.seqs tr:hover td { background: #eef; }
table.seqs .empty, .empty { color: #555; padding: 18px; font-style: italic; }
td.num { text-align: right; }
input.rng { width: 6em; font: inherit; }
input.long { width: 26em; max-width: 100%; }
input.short { width: 7em; }
.btnrow, .addfrom { margin: 6px 0; }
button, a.btn { font: 13px Arial, sans-serif; background: var(--btn); border: 2px outset #eee; padding: 3px 10px; color: #000; text-decoration: none; cursor: pointer; display: inline-block; }
button:active, a.btn:active { border-style: inset; }
button[disabled] { color: #888; cursor: default; }
.addfrom button { margin-right: 0; }
table.params { border-collapse: collapse; margin-left: 8px; }
table.params th { text-align: left; vertical-align: top; padding: 6px 12px 6px 0; max-width: 380px; font-weight: bold; }
table.params th a, table.params td label a { color: #007000; }
table.params td { padding: 5px 0; vertical-align: top; }
label.opt { display: block; }
.hint { color: #333; font-size: 13px; font-family: Arial, sans-serif; }
.note { color: #6a4a00; font-style: italic; }
.error { color: var(--err); border: 1px solid var(--err); background: #fff0f0; padding: 6px 10px; margin: 8px 0; }
.ok { color: var(--ok); border: 1px solid var(--ok); background: #f0fff0; padding: 6px 10px; margin: 8px 0; }
pre.out { font: 13px/1.25 "Courier New", monospace; background: #fff; border: 1px solid #bbb; padding: 8px; overflow: auto; max-height: 70vh; white-space: pre; }
img.plot { max-width: 100%; border: 1px solid #999; background: #fff; }
footer.bottom { position: fixed; left: 0; right: 0; bottom: 0; height: 46px; background: var(--frame); border-top: 3px ridge #e0e0e0; display: flex; justify-content: space-between; align-items: center; padding: 0 14px 0 224px; font-family: Arial, sans-serif; }
footer.bottom .buttons button { font-size: 15px; padding: 3px 26px; margin-right: 4px; }
footer.bottom .links a { color: #1a3aa8; margin-left: 18px; text-decoration: none; font-size: 15px; }
table.jobs { margin: 10px 0 10px 30px; border-spacing: 6px; border-collapse: separate; font-size: 16px; }
table.jobs th { background: var(--cell); text-align: left; vertical-align: top; padding: 6px 30px 20px 4px; font-size: 18px; }
table.jobs td { padding: 4px; }
table.jobs tbody tr:nth-child(even) td:not(:nth-last-child(-n+2)) { background: var(--cell); }
.st-running { color: #00008b; } .st-failed { color: var(--err); } .st-completed { color: #000; } .st-cancelled { color: #666; }
.waiting { text-align: center; margin-top: 40px; font-family: Arial, sans-serif; }
.waiting .clock { font-size: 64px; animation: spin 2s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.menubar { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0; font-family: Arial, sans-serif; font-size: 14px; }
.menubar details { border: 1px solid #aaa; background: #eee; padding: 2px 8px; }
.menubar details[open] { flex-basis: 100%; }
.menubar details > *:not(summary) { margin: 4px 6px 4px 0; display: inline-block; }
.menubar summary { cursor: pointer; font-weight: bold; }
body.popup { padding: 10px 18px; }
.req { color: var(--err); font-size: 12px; }
.entries { columns: 3; font-family: monospace; }
.entries label { display: block; }
.chooser { display: flex; gap: 14px; align-items: flex-start; font-family: monospace; }
.chooser select { min-width: 260px; font-family: monospace; }
.chooser .mid { display: flex; flex-direction: column; gap: 6px; margin-top: 60px; }
.hitviewer { margin: 10px 0; border: 1px solid #888; background: #fff; padding: 6px; font-family: Arial, sans-serif; font-size: 12px; }
.hitviewer canvas { display: block; width: 100%; }
.hitviewer .filters label { margin-right: 10px; }
table.hits { font-size: 13px; font-family: Arial, sans-serif; }
table.hits th, table.hits td { border-bottom: 1px solid #ddd; padding: 2px 6px; text-align: left; }
details.steps { margin-top: 20px; font-family: Arial, sans-serif; }
section.output { margin-bottom: 20px; }
section.output h3 small { font-weight: normal; font-size: 13px; margin-left: 10px; }
a.dbref { color: #0000cc; }
@media (max-width: 760px) {
  .frame { grid-template-columns: 1fr; }
  nav.left { border-right: 0; }
  .navlist { display: flex; flex-wrap: wrap; gap: 4px 14px; }
  .navlist a { margin: 0; }
  footer.bottom { padding-left: 14px; }
  main.right { padding: 10px 16px 80px; }
}

/* NCBI Gene & Genome */
a.ncbi { color: #006a6a; }
a.haloweb { color: #8a4b00; font-size: 85%; }
.ncbipanel { border: 1px solid #9cc; background: #f3fbfb; padding: 6px 10px; margin: 8px 0; max-width: 60em; }
.ncbipanel .summary, p.summary { max-width: 60em; }
fieldset.gene { margin: 8px 0; border: 1px solid #bbb; }
fieldset.gene div { margin: 2px 0 2px 8px; }
form.region { margin: 6px 0; }
p.links a { white-space: nowrap; }

/* sign-in page */
.signin { max-width: 420px; margin: 60px auto; padding: 20px 28px; background: #fff; border: 2px outset #ddd; font: 13px Arial, sans-serif; }
.signin h1 { font-size: 18px; color: #003366; }
.signin a.btn { display: block; text-align: center; padding: 8px 10px; font-size: 14px; }
.signin .small { font-size: 12px; color: #444; }