/* =====================================================================
   Bioinformatics algorithms in Python – the notebook, exercises,
   files and cheat sheet (the rest of the page is in app.css)
   ===================================================================== */
.spinner.small { width: 12px; height: 12px; border-width: 2px; display: inline-block; vertical-align: -2px; }
.grow { flex: 1; }
.kdot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: #9aa6b5; flex: none; }
.kdot.ok { background: #1baf7a; }
.kdot.busy { background: #e0a526; animation: pulse 1.2s ease-in-out infinite; }
.kdot.bad { background: var(--bad); }
@keyframes pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .kdot.busy, .nb-cell.running .nb-runbtn, .nb-cell.flash { animation: none; } }
.tbtn { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); border-radius: 6px; padding: 3px 8px; cursor: pointer; font-size: 0.8rem; white-space: nowrap; }
.tbtn:hover { border-color: var(--accent); color: var(--accent-2); }
.tbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tbtn .ic { width: 14px; height: 14px; }
.brand-mark { border-radius: 7px; }
a.brand { color: inherit; text-decoration: none; }
a.brand:hover { color: inherit; }
.brand-sub { color: #9fb6c8; }
.btn.ghost { background: transparent; }
.btn .ic { width: 15px; height: 15px; }

/* ---------------- chapter tabs: with many chapters, only the open one shows its name ---------------- */
.ch-nav.compact { gap: 2px; padding: 7px 12px; }
.ch-nav.compact .ch-tab:not(.on) { padding: 2px; }
.ch-nav.compact .ch-tab:not(.on) .ch-name { display: none; }
.ch-nav.compact .ch-tab .num { width: 22px; height: 22px; font-size: 0.72rem; }
.ch-nav.compact .ch-tab.on { padding-right: 9px; min-width: 0; }
.ch-nav.compact .ch-tab.on .ch-name { max-width: 12em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the steps of the practical, on the first page */
.lp-flow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0.8em 0; }
.lp-flow span { background: var(--panel-3); border-radius: 99px; padding: 2px 10px; font-size: 0.82rem; font-weight: 600; color: var(--ink-2); }
.lp-flow i { color: var(--muted); font-style: normal; }

/* ---------------- notebook ---------------- */
.nb { display: flex; flex-direction: column; height: 100%; background: #fbfcfd; }
.nb-bar { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-bottom: 1px solid var(--line); background: var(--panel); flex-wrap: wrap; }
.nb-head { display: flex; align-items: center; gap: 8px; padding: 6px 14px; font-size: 0.82rem; font-weight: 650; color: var(--accent-2); background: var(--accent-soft); border-bottom: 1px solid #cfe5ee; }
.nb-title { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.nb-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-title .ic { width: 15px; height: 15px; flex: none; }
.nb-kernel { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--muted); white-space: nowrap; max-width: 44ch; overflow: hidden; text-overflow: ellipsis; }
.nb-status { font-size: 0.8rem; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.nb-pages { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.nb-cells { flex: 1; overflow: auto; padding: 10px 12px 120px; }
.nb-cells[hidden] { display: none; }
.nb-cell { display: flex; gap: 6px; padding: 6px 6px 6px 0; border-radius: 8px; border: 1px solid transparent; margin-bottom: 6px; position: relative; }
.nb-cell.sel { border-color: #c9dbe6; background: #fff; box-shadow: var(--shadow); }
.nb-cell.sel::before { content: ''; position: absolute; left: -1px; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: var(--accent); }
.nb-cell.flash { animation: flash 1.3s ease-out; }
.nb-cell[data-tag^='sol:'] .nb-editor { border-color: #bfe0cc; background: #f3faf6; }
.nb-cell[data-tag^='sol:'] .nb-editor::before { content: 'solution'; position: absolute; right: 6px; top: 2px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.03em; color: var(--good); z-index: 3; }
@keyframes flash { 0% { background: #fff4c2; } 100% { background: #fff; } }
.nb-gutter { width: 48px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 3px; }
.nb-runbtn { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); background: #fff; color: var(--accent); cursor: pointer; display: grid; place-items: center; padding: 0; }
.nb-runbtn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.nb-runbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.nb-runbtn .ic { width: 13px; height: 13px; margin-left: 2px; }
.nb-cell.running .nb-runbtn { animation: pulse 1s infinite; }
.nb-count { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); }
.nb-main { flex: 1; min-width: 0; }
.nb-edrow { display: flex; gap: 4px; align-items: flex-start; }
.nb-editor { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 6px; background: #f6f8fa; overflow: hidden; position: relative; }
.nb-cell.sel .nb-editor { border-color: #b8cfdd; }
.nb-editor .CodeMirror { height: auto; background: transparent; font-family: var(--mono); font-size: 13.2px; line-height: 1.45; padding: 3px 2px; }
.nb-editor .CodeMirror-scroll { min-height: 26px; }
.nb-editor .cm-comment { color: #5f6b7a; font-style: normal; }
.nb-tools { display: flex; flex-direction: row; align-items: center; gap: 2px; opacity: 0.35; transition: opacity 0.15s; }
.nb-cell:hover .nb-tools, .nb-cell.sel .nb-tools, .nb-tools:focus-within { opacity: 1; }
.nb-tools .icon-btn { padding: 2px; }
.nb-tools .icon-btn .ic { width: 14px; height: 14px; }
.nb-out { margin-top: 4px; }
.nb-out:empty { display: none; }
.nb-stream, .nb-text { margin: 2px 0; padding: 4px 8px; font-family: var(--mono); font-size: 12.5px; white-space: pre-wrap; word-break: break-word; background: transparent; max-height: 420px; overflow: auto; }
.nb-stream.err { background: #fff8e8; color: #7a5200; border-radius: 5px; }
.nb-html { overflow: auto; max-height: 460px; margin: 2px 0; padding: 2px 4px; }
.nb-figure { position: relative; display: inline-block; max-width: 100%; margin: 4px 0; }
.nb-img { max-width: 100%; height: auto; display: block; border-radius: 4px; background: #fff; }
.nb-imgdl { position: absolute; top: 4px; right: 4px; background: rgba(255, 255, 255, 0.9); opacity: 0; }
.nb-figure:hover .nb-imgdl, .nb-imgdl:focus-visible { opacity: 1; }
.nb-error { border: 1px solid #f1c2bf; background: var(--bad-soft); border-radius: 6px; padding: 6px 10px; margin: 4px 0; }
.nb-error pre { margin: 0; font-family: var(--mono); font-size: 12.5px; white-space: pre-wrap; color: #8a1c15; }
.nb-hint { display: flex; gap: 6px; align-items: flex-start; font-size: 0.86rem; margin-top: 6px; color: var(--ink); background: #fffdf3; border: 1px solid #f0e2b0; border-radius: 6px; padding: 5px 8px; }
.nb-hint-i { flex: none; color: #a87a00; display: inline-flex; }
.nb-hint-i .ic { width: 16px; height: 16px; }
.vars td { vertical-align: top; }
.vars code.vdesc { white-space: pre-wrap; word-break: break-word; }

/* ---------------- exercises in the instructions ---------------- */
.ex-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; clear: both; }
.ex-check { border-color: var(--accent); color: var(--accent-2); }
.ex-check.running { opacity: 0.6; pointer-events: none; }
.ex-fb { font-size: 0.86rem; font-weight: 600; flex-basis: 100%; }
.ex-fb:empty { display: none; }
.ex-fb.ok { color: var(--good); }
.ex-fb.no { color: var(--bad); font-weight: 500; }
.ex-fb.quiet { color: var(--warn); }
.ex-n { font-weight: 750; color: var(--act, #b4531c); margin-right: 2px; }
.optional-box { border: 1px dashed #c9d3df; border-radius: var(--radius); padding: 8px 14px 4px; margin: 1.2em 0; background: #fbfcfe; }
.optional-box > .opt-t { font-weight: 700; font-size: 0.86rem; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.optional-box > .opt-t::before { content: 'Optional'; font-size: 0.7rem; font-weight: 800; color: #fff; background: #8a96a8; border-radius: 99px; padding: 1px 8px; letter-spacing: 0.02em; }
.codeblock { background: #f6f8fa; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-family: var(--mono); font-size: 12.8px; white-space: pre-wrap; margin: 0.5em 0; overflow-x: auto; }
.codeblock.out { background: #fff; border-style: dashed; color: var(--ink-2); }
.code-wrap { position: relative; }
.code-wrap .copy-to-nb { position: absolute; top: 6px; right: 6px; }
pre.seqbox { background: #f6f8fa; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-family: var(--mono); font-size: 12.5px; white-space: pre-wrap; word-break: break-all; }
.formula { font-family: var(--mono); background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; display: inline-block; margin: 0.3em 0; font-size: 0.9rem; }
.name-field { margin: 1em 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.name-field input { border: 1px solid var(--line-2); border-radius: 7px; padding: 5px 8px; min-width: 240px; }
.map-tbl td:first-child { white-space: nowrap; font-weight: 650; }
.part-h { margin: 1.4em 0 0.3em; font-size: 0.78rem; font-weight: 800; color: var(--muted); letter-spacing: 0.06em; }
.help-list li { margin: 0.35em 0; }
.next-row { flex-wrap: wrap; gap: 8px; }
.tut .do { white-space: normal; max-width: 100%; text-align: left; }
.tut table code { overflow-wrap: anywhere; }
@media (min-width: 1001px) { .tut { overflow-x: hidden; } }

/* ---------------- Files tab ---------------- */
.files { display: flex; flex-direction: column; height: 100%; overflow: auto; padding: 12px 14px 40px; }
.files-h h3 { margin: 0 0 2px; font-size: 1rem; }
.files-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px; margin: 10px 0; }
.file-item { display: flex; gap: 8px; align-items: flex-start; text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 7px 9px; cursor: pointer; font: inherit; color: inherit; }
.file-item:hover { border-color: var(--accent); }
.file-item.on { border-color: var(--accent); background: var(--accent-soft); }
.file-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fi-ic { color: var(--accent); flex: none; display: inline-flex; padding-top: 1px; }
.fi-ic .ic { width: 16px; height: 16px; }
.fi-t { display: flex; flex-direction: column; min-width: 0; font-size: 0.86rem; }
.fi-t b { font-family: var(--mono); font-size: 0.84rem; overflow-wrap: anywhere; }
.fi-d { color: var(--muted); font-size: 0.8rem; }
.file-view { border-top: 1px solid var(--line); padding-top: 10px; }
.fv-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.fv-h b { font-family: var(--mono); }
.fv-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.fv-text { background: #f6f8fa; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-family: var(--mono); font-size: 12px; line-height: 1.4; white-space: pre; overflow: auto; max-height: 60vh; }

/* ---------------- Cheat sheet tab ---------------- */
.cheat { height: 100%; overflow: auto; padding: 12px 16px 60px; font-size: 0.9rem; }
.cheat h3 { font-size: 0.98rem; margin: 1.2em 0 0.4em; color: var(--accent-2); }
.cheat h3:first-child { margin-top: 0.2em; }
.cheat table { width: 100%; border-collapse: collapse; margin: 0.3em 0 0.8em; }
.cheat td { border-bottom: 1px solid var(--line); padding: 4px 6px; vertical-align: top; }
.cheat td:first-child { width: 48%; }
.cheat td code { background: #f3f5f8; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.82rem; }
.cheat pre { background: #f6f8fa; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: 0.82rem; white-space: pre-wrap; }

/* narrow screens: the workbench slides over the instructions */
@media (max-width: 1000px) {
  .nb-gutter { width: 36px; }
}
@media (max-width: 620px) {
  .brand { min-width: 0; flex: 1 1 auto; }
  .brand > div { min-width: 0; }
  .brand-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar .spacer { display: none; }
  .progress-wrap { flex: none; }
  .wb-tabs { overflow-x: auto; scrollbar-width: none; }
  .wb-tab { white-space: nowrap; flex: none; padding: 7px 9px 8px; }
  .wb-tab .ic { display: none; }
  .bench-close { position: sticky; right: 0; flex: none; white-space: nowrap; box-shadow: -10px 0 8px var(--bg); }
  .nb-bar .tbtn span { display: none; }
  .nb-kernel { max-width: 18ch; }
  .cheat td { display: block; width: auto !important; border-bottom: 0; }
  .cheat tr { display: block; border-bottom: 1px solid var(--line); padding: 3px 0; }
}
@media (max-width: 420px) { .progress-wrap { display: none; } }