/* =====================================================================
   Bioinformatics workbench – the page around the tools:
   the help pane (topics, search, pages), hiding it, full screen, the
   notebook's extra parts, and the narrow-screen layout.
   (Built on app.css, genomics.css, nb-ai.css and pipe.css.)
   ===================================================================== */
:root {
  --tut-w: 34%;
  --help-bg: #ffffff;
  --help-ink: #1d2733;
  --help-rule: #e4e8ee;
  --help-accent: #0b6b8a;
  --code-bg: #f3f6f9;
}
body[data-page='workbench'] { overflow: hidden; }
body.dragging { user-select: none; cursor: col-resize; }

/* ---------------- top bar ---------------- */
.topbar .top-toggle { width: 34px; height: 32px; padding: 0; justify-content: center; border-radius: 8px; background: #1c3a52; border: 1px solid #2b5170; color: #dbe8f1; display: inline-flex; align-items: center; cursor: pointer; }
.topbar .top-toggle:hover { background: #24496a; color: #fff; }
.topbar .top-toggle .ic { width: 18px; height: 18px; }
.store-status { display: inline-flex; align-items: center; gap: 7px; font-size: 0.78rem; color: #a9c0d1; white-space: nowrap; }
.store-status i { width: 8px; height: 8px; border-radius: 50%; background: #3fb7a0; box-shadow: 0 0 0 3px rgba(63, 183, 160, 0.18); }
.store-status[data-state='busy'] i { background: #e0b341; box-shadow: 0 0 0 3px rgba(224, 179, 65, 0.2); }
.store-status[data-state='off'] i { background: #e5675e; box-shadow: 0 0 0 3px rgba(229, 103, 94, 0.2); }
.store-status[data-state='off'] { color: #f3c2bd; }
/* the person's name (workbench.js: initUser, nameDialog) */
#userBtn .user-name { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-form > p:first-child { margin-top: 0; color: var(--ink-2); line-height: 1.5; }
.user-label { display: block; font-weight: 650; margin: 14px 0 5px; }
.user-form .prompt-input { box-sizing: border-box; font-family: var(--mono); font-size: 0.95rem; }
.user-prev { margin: 12px 0 0; }
.user-prompt { font-family: var(--mono); font-size: 0.88rem; background: #10263a; color: #cfeee6; padding: 3px 9px; border-radius: 6px; white-space: pre; }
.user-note { min-height: 1.4em; margin: 8px 0 0; font-size: 0.84rem; color: var(--muted); }
.user-note.bad { color: var(--bad); }

/* ---------------- the help pane ---------------- */
.help-pane { display: flex; flex-direction: column; background: var(--help-bg); color: var(--help-ink); min-width: 280px; max-width: 60%; }
.help-head { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(6px); border-bottom: 1px solid var(--help-rule); }
.help-head .icon-btn { padding: 5px; color: var(--ink-2); }
.help-head .icon-btn .ic { width: 18px; height: 18px; }
.help-search { flex: 1; display: flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); border-radius: 8px; padding: 0 8px; background: var(--panel-2); min-width: 0; }
.help-search:focus-within { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px var(--accent-soft); }
.help-search .ic { width: 16px; height: 16px; color: var(--muted); flex: none; }
.help-search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 6px 0; outline: none; font-size: 0.9rem; }
.help-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 7px 18px 0; font-size: 0.8rem; color: var(--muted); }
.help-crumbs a { color: var(--muted); text-decoration: none; }
.help-crumbs a:hover { color: var(--accent); text-decoration: underline; }
.help-crumbs b { color: var(--ink-2); font-weight: 600; }
.help-crumbs .sep { color: #b4bdc9; }
.help-back { font-size: 0.8rem; margin-right: 6px; }
.help-tablink { align-self: flex-start; margin: 6px 18px 0; display: inline-flex; align-items: center; gap: 6px; border: 1px dashed #b9d4df; background: #f4fafc; color: var(--accent-2); border-radius: 99px; padding: 2px 10px 2px 6px; font-size: 0.78rem; cursor: pointer; }
.help-tablink:hover { border-style: solid; background: var(--accent-soft); }
.help-tablink .ic { width: 14px; height: 14px; }
.help-body { padding: 4px 22px 80px; }
.help-results { padding: 8px 12px 60px; display: flex; flex-direction: column; gap: 2px; }
.help-hit { text-align: left; border: 0; background: none; border-radius: 8px; padding: 8px 10px; cursor: pointer; display: flex; flex-direction: column; gap: 1px; }
.help-hit:hover, .help-hit:focus { background: var(--accent-soft); outline: none; }
.hh-t { font-weight: 650; color: var(--ink); }
.hh-g { font-size: 0.76rem; color: var(--muted); }
.hh-s { font-size: 0.82rem; color: var(--ink-2); margin-top: 2px; }
.hh-s mark { background: #ffe9a8; color: inherit; border-radius: 2px; }
.help-noresult { padding: 10px; }

/* the pages */
.help-page { max-width: 760px; }
.help-page > h1 { font-size: 1.42rem; line-height: 1.25; margin: 0.55em 0 0.15em; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; }
.help-page > h1 .ic { width: 24px; height: 24px; color: var(--help-accent); }
.help-page .lede { font-size: 1rem; color: var(--ink-2); margin: 0.3em 0 1em; }
.help-page h2 { font-size: 1.08rem; margin: 1.6em 0 0.45em; padding-top: 0.7em; border-top: 1px solid var(--help-rule); scroll-margin-top: 64px; }
.help-page h3 { font-size: 0.98rem; margin: 1.2em 0 0.35em; scroll-margin-top: 64px; }
.help-page p, .help-page li { color: var(--ink-2); font-size: 0.93rem; }
.help-page ul, .help-page ol { padding-left: 1.3em; }
.help-page li { margin: 0.22em 0; }
.help-page table { width: 100%; border-collapse: collapse; font-size: 0.86rem; margin: 0.7em 0; }
.help-page th, .help-page td { border-bottom: 1px solid var(--help-rule); padding: 5px 8px; text-align: left; vertical-align: top; }
.help-page th { background: var(--panel-2); font-weight: 650; color: var(--ink-2); }
.help-page td code { white-space: nowrap; }
.help-page dl { margin: 0.6em 0; }
.help-page dt { font-weight: 650; margin-top: 0.6em; }
.help-page dd { margin: 0.1em 0 0 1.2em; color: var(--ink-2); font-size: 0.92rem; }
.help-page dl.cite-list dd { margin: 0.25em 0 0 1.2em; font-size: 0.86rem; line-height: 1.45; overflow-wrap: anywhere; }
.help-page dl.cite-list dd.cite-note { color: var(--muted); }
.help-page .do { margin: 2px 2px; }
.help-page .tryrow { display: flex; flex-wrap: wrap; gap: 6px; margin: 0.6em 0; }
.code-box { margin: 0.6em 0 0.9em; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--code-bg); }
.code-box pre.code { margin: 0; padding: 9px 12px; font-family: var(--mono); font-size: 12.6px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; overflow: auto; max-height: 420px; }
.code-box pre.code code { background: none; padding: 0; font-size: 1em; }
.code-bar { display: flex; justify-content: flex-end; gap: 4px; padding: 3px 6px; background: #eaeff4; border-bottom: 1px solid var(--line); }
.code-btn { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; color: var(--ink-2); font-size: 0.74rem; padding: 2px 6px; border-radius: 5px; cursor: pointer; }
.code-btn:hover { background: #fff; color: var(--accent-2); }
.code-btn .ic { width: 13px; height: 13px; }
pre.code:not(.code-box pre) { background: var(--code-bg); border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; font-size: 12.6px; white-space: pre-wrap; }

/* the topic index (the help's first page): groups in two columns, each a list */
.help-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 22px; margin: 0.8em 0 1.4em; }
.help-topics section { break-inside: avoid; }
.help-topics h2 { border-top: 0; padding-top: 0; margin: 0.9em 0 0.25em; font-size: 0.8rem; color: var(--muted); font-weight: 650; letter-spacing: 0.02em; display: flex; align-items: center; gap: 6px; }
.help-topics h2 .ic { width: 15px; height: 15px; color: var(--help-accent); }
.help-topics ul { list-style: none; padding: 0; margin: 0; }
.help-topics li { margin: 0; }
.help-topics a { display: block; padding: 3px 0; color: var(--ink); text-decoration: none; font-size: 0.92rem; border-bottom: 1px solid transparent; }
.help-topics a:hover { color: var(--accent-2); border-bottom-color: var(--accent-soft); }
.help-topics a small { color: var(--muted); font-size: 0.78rem; display: block; line-height: 1.25; }
.help-page ul.help-grouplist { list-style: none; padding: 0; margin: 1em 0 1.4em; }
.help-grouplist li { margin: 0; border-top: 1px solid var(--line); }
.help-grouplist li:last-child { border-bottom: 1px solid var(--line); }
.help-grouplist a { display: block; padding: 9px 2px; color: var(--ink); text-decoration: none; font-weight: 600; }
.help-grouplist a:hover, .help-grouplist a:focus-visible { color: var(--accent-2); }
.help-grouplist a small { color: var(--muted); font-size: 0.86rem; font-weight: 400; display: block; line-height: 1.35; margin-top: 2px; }
.help-start { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin: 0.8em 0; }
.help-start button { text-align: left; border: 1px solid var(--line); background: var(--panel-2); border-radius: 10px; padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.help-start button:hover { border-color: var(--accent); background: var(--accent-soft); }
.help-start b { display: flex; align-items: center; gap: 7px; font-size: 0.92rem; }
.help-start b .ic { width: 17px; height: 17px; color: var(--help-accent); }
.help-start span { font-size: 0.8rem; color: var(--muted); }
.help-page .tool-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0.2em 0 0.8em; }
.help-page .tool-meta .pill { font-weight: 550; }
.help-page .keys td:first-child { white-space: nowrap; }

/* ---------------- the help hidden: the workbench fills the window ---------------- */
.wb-tab.rail-btn { color: var(--accent-2); border: 1px dashed #b9d4df; border-bottom: 0; margin-right: 4px; }
.wb-tab.rail-btn:hover { background: var(--accent-soft); }
body.help-off .help-pane, body.help-off .splitter { display: none; }
.splitter:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.help-scrim { display: none; }

/* ---------------- the tabs of the workbench ---------------- */
.wb-tabs { overflow-x: auto; scrollbar-width: thin; }
.wb-tab { white-space: nowrap; flex: none; }
.wb-loading, .wb-failed { padding: 30px; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.wb-failed { flex-direction: column; align-items: flex-start; color: var(--ink-2); }
.spinner { width: 18px; height: 18px; border: 2.5px solid var(--line-2); border-top-color: var(--accent); border-radius: 50%; display: inline-block; animation: wbspin 0.8s linear infinite; }
@keyframes wbspin { to { transform: rotate(360deg); } }
.btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.danger:hover { background: #962019; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
label.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.prompt-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.table-scroll { max-height: 60vh; overflow: auto; }
.modal { max-width: min(680px, 94vw); }

/* ---------------- the notebook ---------------- */
.nb-bar { gap: 8px; padding: 6px 10px; }
.nb-bar2 { padding: 5px 10px; background: var(--panel-2); gap: 5px; }
.nb-sep { width: 1px; height: 18px; background: var(--line-2); margin: 0 3px; }
.nb-listbtn { font-weight: 600; }
.nb-namebox { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 1 auto; }
.nb-name { border: 1px solid transparent; background: transparent; border-radius: 6px; padding: 3px 6px; font-weight: 650; font-size: 0.95rem; color: var(--ink); min-width: 8ch; width: 26ch; max-width: 100%; text-overflow: ellipsis; }
.nb-name:hover { border-color: var(--line-2); }
.nb-name:focus { border-color: var(--accent); outline: none; background: #fff; }
.nb-save { font-size: 0.74rem; color: var(--muted); white-space: nowrap; }
.nb-save[data-state='unsaved'] { color: #9a6b00; }
.nb-save[data-state='error'] { color: var(--bad); }
.nb-kernel { border: 1px solid var(--line-2); background: #fff; border-radius: 99px; padding: 2px 10px 2px 3px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-size: 0.78rem; color: var(--ink-2); max-width: 46ch; }
.nb-kernel:hover { border-color: var(--accent); }
.nb-ktext { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-lang { font-weight: 750; font-size: 0.7rem; letter-spacing: 0.02em; border-radius: 99px; padding: 2px 8px; color: #fff; }
.nb-lang-python { background: #2f6f9f; }
.nb-lang-r { background: #2a6e4b; }
.kdot.off { background: #c3cad4; }
.nb-stopbtn { border-color: #e7b6b2; color: var(--bad); }
.nb-stopbtn:hover { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
.nb-banner { display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: var(--warn-soft); border-bottom: 1px solid #f0dca3; color: var(--warn); font-size: 0.86rem; }
.nb-banner .ic { width: 16px; height: 16px; flex: none; }
.nb-body { flex: 1; min-height: 0; position: relative; display: flex; }
.nb-body > .nb-cells { flex: 1; overflow: auto; outline: none; }
.nb.dropping { outline: 3px dashed var(--accent); outline-offset: -3px; }
.nb-cell:focus { outline: none; }
.nb-cell.sel:focus-visible { box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow); }
.nb-cell[data-type='markdown'] .nb-count, .nb-cell[data-type='raw'] .nb-count { display: none; }
.nb-cell[data-type='markdown'] .nb-runbtn { opacity: 0; }
.nb-cell[data-type='markdown'].sel .nb-runbtn, .nb-cell[data-type='markdown']:hover .nb-runbtn { opacity: 1; }
.nb-cell[data-type='markdown'] .nb-editor { background: #fffdf6; }
.nb-cell[data-type='raw'] .nb-editor { background: #f4f4f4; }
.nb-md { flex: 1; min-width: 0; padding: 2px 10px; font-size: 0.95rem; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; cursor: default; }
.nb-md h1 { font-size: 1.45rem; margin: 0.35em 0 0.3em; }
.nb-md h2 { font-size: 1.2rem; margin: 0.6em 0 0.3em; }
.nb-md h3 { font-size: 1.04rem; margin: 0.6em 0 0.25em; }
.nb-md p { margin: 0.4em 0; }
.nb-md pre { background: #f3f6f9; border-radius: 6px; padding: 8px 10px; overflow: auto; font-size: 12.5px; }
.nb-md table { border-collapse: collapse; font-size: 0.88rem; }
.nb-md th, .nb-md td { border: 1px solid var(--line); padding: 3px 8px; }
.nb-md img { max-width: 100%; }
.nb-md blockquote { margin: 0.4em 0; padding: 2px 12px; border-left: 3px solid var(--line-2); color: var(--ink-2); }
.nb-md-empty { color: var(--muted); font-style: italic; }
.nb-mdout { padding: 2px 4px; cursor: auto; }
.nb-svg { max-width: 100%; overflow: auto; margin: 4px 0; }
.nb-svg svg { max-width: 100%; height: auto; }
.nb-dfinfo { font-size: 0.76rem !important; color: var(--muted); margin: 3px 0 !important; }
.nb-html table.dataframe th small { font-weight: 450; color: var(--muted); }
.nb-end { display: flex; gap: 6px; padding: 6px 0 0 54px; opacity: 0.55; }
.nb-end:hover { opacity: 1; }
.nb-cells { padding: 10px 14px 140px; }

/* ---------------- narrow windows ---------------- */
/* (app.css turns the workbench into a sliding panel below 1000 px; here it stays the main view) */
@media (max-width: 1000px) {
  body[data-page='workbench'] .app { height: 100vh; min-height: 0; }
  body[data-page='workbench'] .main { display: flex; }
  body[data-page='workbench'] .bench { position: static; transform: none; box-shadow: none; z-index: auto; }
  body[data-page='workbench'] .tut { overflow: auto; }
  body[data-page='workbench'] .splitter { display: block; }
  body[data-page='workbench'] .topbar { position: static; }
}
@media (min-width: 901px) and (max-width: 1000px) {
  body[data-page='workbench'] .tut { width: var(--tut-w) !important; min-width: 280px; max-width: 60%; border-right: 1px solid var(--line); }
}
@media (max-width: 900px) {
  body[data-page='workbench'] .help-pane { position: fixed; left: 0; top: var(--header-h); bottom: 0; width: min(92vw, 540px) !important; max-width: none; z-index: 90; transform: translateX(-104%); transition: transform 0.22s ease; box-shadow: var(--shadow-l); border-right: 1px solid var(--line); }
  body[data-page='workbench'].help-open .help-pane { transform: none; }
  body[data-page='workbench'] .splitter { display: none; }
  body[data-page='workbench'] .help-scrim { display: block; position: fixed; inset: var(--header-h) 0 0 0; background: rgba(15, 25, 40, 0.28); z-index: 85; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
  body[data-page='workbench'].help-open .help-scrim { opacity: 1; pointer-events: auto; }
  body[data-page='workbench'] .bench { width: 100%; }
  .brand-sub, .store-status span { display: none; }
  #fullBtn span, #projectBtn span, #userBtn span { display: none; }
  .wb-tab { padding: 7px 10px 8px; font-size: 0.84rem; }
  .nb-name { width: 18ch; }
  .nb-bar2 .tbtn:not(.nb-add) span { display: none; }   /* (+ Code and + Text keep their names: without them, both would be just a +) */
  .nb-ktext { max-width: 14ch; }
}
@media (max-width: 560px) {
  .brand-title { font-size: 0.92rem; }
  .help-body { padding: 4px 14px 80px; }
  .nb-cells { padding: 8px 6px 120px; }
  .nb-gutter { width: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation-duration: 0.01ms !important; }
}
@media print {
  .topbar, .bench, .splitter, .help-head, .help-crumbs, .help-tablink { display: none !important; }
  .help-pane { width: 100% !important; max-width: none; overflow: visible; }
}

/* the tab bar: labels give way to icons when the workbench is narrow */
.bench { container-type: inline-size; container-name: bench; }
.wb-tab { padding: 7px 12px 8px; gap: 6px; }
@container bench (max-width: 1020px) {
  .wb-tab:not(.on) .lbl { display: none; }
  .wb-tab { padding: 7px 10px 8px; }
}
/* narrower still (a phone held upright): smaller tabs, so that all of them fit across the screen. The open tab keeps
   its name, shortened with … when there isn't room for all of it, and on the narrowest screens it shows only its icon. */
@container bench (max-width: 560px) {
  .wb-tabs { gap: 0; padding: 6px 4px 0; }
  .wb-tab { padding: 7px 5px 8px; gap: 5px; }
  .wb-tab .ic { flex: none; }
  .wb-tab.on { padding: 7px 8px 8px; flex: 0 1 auto; min-width: 0; }
  .wb-tab.on .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
@container bench (max-width: 430px) {
  .wb-tab { padding: 7px 4px 8px; }
}
@container bench (max-width: 359px) {
  .wb-tab, .wb-tab.on { flex: 1 1 0; min-width: 0; padding: 7px 0 8px; justify-content: center; }
  .wb-tab.on .lbl { display: none; }
}
/* the notebook's second toolbar on a phone: its buttons closer together, so that it stays on one row with the names
   of + Code and + Text */
@container bench (max-width: 560px) {
  .nb-bar2 { padding: 5px 6px; gap: 3px; }
  .nb-bar2 .tbtn { padding: 3px 5px; }
}
@container bench (max-width: 359px) {
  .nb-bar2 { padding: 5px 4px; }
  .nb-bar2 .tbtn { padding: 3px 4px; gap: 3px; }
  .nb-bar2 .nb-sep { display: none; }
}

/* ---------------- Files ---------------- */
.ed { display: flex; height: 100%; min-height: 0; }
.ed.dropping { outline: 3px dashed var(--accent); outline-offset: -3px; }
.ed-side { width: 270px; }
.ed-row { position: relative; }
.ed-row.root { margin-top: 6px; font-weight: 650; color: var(--ink); }
.ed-row.root .ed-name { font-family: var(--font); font-size: 0.82rem; white-space: pre; }
.ed-row.drop-on { background: var(--accent-soft); outline: 2px dashed var(--accent); outline-offset: -2px; }
.ed-more { border: 0; background: none; color: var(--muted); padding: 0 2px; cursor: pointer; opacity: 0; display: inline-flex; border-radius: 4px; }
.ed-row:hover .ed-more, .ed-row:focus-within .ed-more, .ed-row.on .ed-more { opacity: 1; }
.ed-more:hover { background: #dfe6ee; color: var(--ink); }
.ed-more .ic { width: 14px; height: 14px; }
.ed-hint { font-size: 0.78rem; color: var(--muted); padding: 2px 14px 6px 30px; margin: 0; }
.ed-usage { flex: none; border-top: 1px solid var(--line); padding: 6px 10px; font-size: 0.72rem; color: var(--muted); display: flex; gap: 6px; align-items: flex-start; line-height: 1.35; }
.ed-usage .ic { width: 13px; height: 13px; flex: none; margin-top: 1px; }
.ed-usage.bad { color: var(--bad); background: var(--bad-soft); }
.ed-acts { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.ed-welcome { max-width: 520px; margin: 40px auto; }
.ed-welcome > .ic { width: 42px; height: 42px; }
.ed-welcome p { color: var(--ink-2); font-size: 0.9rem; }
.ed-tip { display: inline-flex; margin: 4px; font-family: var(--mono); font-size: 0.78rem; }
.ed-table th { cursor: pointer; user-select: none; }
.ed-table th[data-sort]::after { content: ' ' attr(data-sort); color: var(--accent); }
.ed-fasta p, .ed-aln > p, .ed-tree-view > p { margin: 0 0 8px; font-size: 0.9rem; }
.ed-seq { font-size: 11.5px; color: var(--ink-2); background: none; }
.ed-aln { font-size: 0.9rem; }
.aln-rows { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; overflow-x: auto; font-family: var(--mono); font-size: 12px; line-height: 1.45; }
.aln-block { margin-bottom: 10px; white-space: pre; }
.aln-ruler, .aln-cons { color: #8a96a8; }
.aln-name { color: var(--ink-2); }
.aln-seq i { font-style: normal; }
.aln-seq .gap { color: #b8c0cb; }
.aln-seq .nA { background: #c9f0c9; } .aln-seq .nC { background: #c7dcf7; } .aln-seq .nG { background: #ffe0b3; } .aln-seq .nT, .aln-seq .nU { background: #f8c8c8; }
.aln-seq .ah { background: #a9c8ec; } .aln-seq .aa { background: #8ec9e6; } .aln-seq .ap { background: #f2a49c; } .aln-seq .an { background: #d6a5e8; }
.aln-seq .ao { background: #b7e3b0; } .aln-seq .ag { background: #f6c98d; } .aln-seq .ar { background: #f3e38c; } .aln-seq .ac { background: #f4c4c4; } .aln-seq .ax { background: #e2e2e2; }
.ed-img.tree { padding: 12px 16px; overflow: auto; max-width: 100%; }
.ed-img.tree svg { display: block; max-width: none; }

/* ---------------- Databases ---------------- */
.api { height: 100%; min-height: 0; display: flex; flex-direction: column; background: #fbfcfd; }
.api-home { flex: 1; min-height: 0; overflow: auto; padding: 16px 22px 40px; }
.api-intro h2 { margin: 0 0 4px; font-size: 1.3rem; }
.api-intro p { margin: 0 0 14px; color: var(--ink-2); max-width: 72ch; font-size: 0.92rem; }
.api-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 6px 22px; }
.api-group h3 { font-size: 0.8rem; color: var(--muted); font-weight: 650; margin: 12px 0 6px; letter-spacing: 0.02em; }
.api-cards { display: flex; flex-direction: column; gap: 6px; }
.api-card { display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; column-gap: 10px; text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 9px 12px; cursor: pointer; }
.api-card:hover { border-color: var(--accent); box-shadow: 0 2px 10px rgba(11, 107, 138, 0.1); }
.api-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.api-card-ic { grid-row: span 2; width: 36px; height: 36px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-2); display: grid; place-items: center; }
.api-card-ic .ic { width: 19px; height: 19px; }
.api-card-t { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.api-card-t b { font-size: 0.95rem; }
.api-card-t small { color: var(--muted); font-size: 0.74rem; }
.api-card-d { font-size: 0.8rem; color: var(--ink-2); line-height: 1.35; }
.api-log { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 6px; max-width: 900px; }
.api-log h3 { font-size: 0.95rem; margin: 8px 0; }
.api-log h3 small { color: var(--muted); font-weight: 500; }
.api-logbtns { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.api-loglist { font-size: 0.82rem; color: var(--ink-2); margin: 4px 0; padding-left: 1.4em; }
.api-loglist li { margin: 2px 0; }
.api-bad { color: var(--bad); }
.api-foot { margin-top: 24px; max-width: 80ch; }
.api-panels { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.api-panels:empty { display: none; }
.api-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.api-panel[hidden] { display: none; }
.api-head { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-bottom: 1px solid var(--line); background: var(--panel); flex: none; flex-wrap: wrap; }
.api-head-ic { width: 30px; height: 30px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-2); display: grid; place-items: center; }
.api-head-ic .ic { width: 17px; height: 17px; }
.api-head-t { display: flex; flex-direction: column; line-height: 1.2; }
.api-head-t small { color: var(--muted); font-size: 0.74rem; }
.api-head a.tbtn { text-decoration: none; }
.api-body { flex: 1; min-height: 0; overflow: auto; padding: 12px 16px 40px; }
.api-body > .api-explorer { height: 100%; margin: -12px -16px -40px; }
.api-blurb { margin: 0 0 10px; color: var(--ink-2); font-size: 0.9rem; max-width: 80ch; }
.api-forms { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.api-ftab { border: 1px solid var(--line-2); background: #fff; border-radius: 99px; padding: 3px 12px; font-size: 0.84rem; cursor: pointer; color: var(--ink-2); }
.api-ftab.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.api-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 12px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; max-width: 980px; }
.api-field { display: flex; flex-direction: column; gap: 3px; font-size: 0.8rem; color: var(--ink-2); }
.api-field.wide { grid-column: 1 / -1; }
.api-field.check { flex-direction: row; align-items: center; gap: 7px; }
.api-field.small { font-size: 0.76rem; color: var(--muted); margin-top: -4px; }
.api-field input[type='text'], .api-field input[type='email'], .api-field input[type='number'], .api-field select, .api-field textarea { border: 1px solid var(--line-2); border-radius: 7px; padding: 6px 9px; font-size: 0.9rem; background: var(--panel-2); color: var(--ink); width: 100%; }
.api-field textarea { font-family: var(--mono); font-size: 12.5px; resize: vertical; min-height: 92px; }
.api-field input:focus, .api-field select:focus, .api-field textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); background: #fff; }
.api-go { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.api-examples { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.8rem; }
.api-out { margin-top: 14px; max-width: 1200px; }
.api-wait { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.api-error { display: flex; gap: 8px; align-items: flex-start; border: 1px solid #f1c2bf; background: var(--bad-soft); color: #7d1c16; border-radius: 8px; padding: 9px 12px; }
.api-error .ic { width: 17px; height: 17px; }
.api-reshead h3 { margin: 0 0 2px; font-size: 1.05rem; }
.api-reshead p { margin: 0 0 8px; font-size: 0.86rem; }
.api-acts { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 12px; }
.api-tablebox { overflow: auto; max-height: 62vh; background: #fff; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 10px; }
.api-table { margin: 0; }
.api-table th { position: sticky; top: 0; z-index: 1; cursor: pointer; user-select: none; white-space: nowrap; }
.api-table th[data-sort]::after { content: ' ' attr(data-sort); color: var(--accent); }
.api-table td { font-size: 0.82rem; }
.api-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.api-btns { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.api-btns .btn { padding: 1px 7px; font-size: 0.74rem; }
.api-pre { font-family: var(--mono); font-size: 12px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; white-space: pre-wrap; word-break: break-all; max-height: 60vh; overflow: auto; }
.api-fig { margin: 4px 0 12px; }
.api-fig img { max-width: min(100%, 640px); border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.api-fig.small img { max-width: 260px; }
.api-fig figcaption { font-size: 0.78rem; color: var(--muted); }
.api-svg { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px; margin-bottom: 10px; }
.api-note { font-size: 0.86rem; }
.api-more { margin: 8px 0; }
.api-more summary { cursor: pointer; color: var(--accent-2); font-size: 0.86rem; }

/* ---------- AI assistant ---------- */
#aiRoot { height: 100%; }
.ai-bar { gap: 8px; }
.ai-bar .tbtn .ic { width: 15px; height: 15px; }
.ai-mode { max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-msg.ai-setup { border-color: #cdb8ee; background: #f6f0fe; }
.ai-setup-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 9px; }
.ai-msg.flash { outline: 3px solid #cdb8ee; outline-offset: 2px; }
.ai-ctx { display: flex; flex-wrap: wrap; gap: 3px 12px; align-items: center; margin-top: 6px; font-size: 0.76rem; color: var(--muted); }
.ai-ctx label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; color: var(--ink-2); }
.ai-ctx input { margin: 0; }
.ai-ctx code { font-size: 0.95em; }
.ai-body h1, .ai-body h2, .ai-body h3, .ai-body h4, .ai-body h5, .ai-body h6 { font-size: 0.97rem; margin: 0.75em 0 0.25em; line-height: 1.3; }
.ai-body > :first-child { margin-top: 0; }
.ai-body > :last-child { margin-bottom: 0; }
.ai-body blockquote { margin: 0.4em 0; padding-left: 10px; border-left: 3px solid #e6def5; color: var(--ink-2); }
.ai-body hr { border: 0; border-top: 1px solid var(--line); margin: 0.7em 0; }
.ai-body a { color: #5b2f94; }
.ai-code-head { padding: 3px 10px; background: #eef1f5; border-bottom: 1px solid var(--line); font: 11.5px/1.5 var(--mono); color: var(--muted); }
.ai-code-acts .btn .ic { width: 13px; height: 13px; }
.ag-note:empty { display: none; }
.ag-file .btn { padding: 2px 8px; }
.ai-msg.ag .ai-body { margin-top: 6px; }

/* ---------- Galaxy (workbench additions) ---------- */
.gx-hname { display: block; border: 0; background: none; padding: 0; font: inherit; font-weight: 700; text-align: left; cursor: pointer; color: var(--ink); }
.gx-hname:hover { text-decoration: underline; }
.gx-hacts { display: flex; gap: 6px; margin-top: 6px; }
.gx-ds.deleted { opacity: 0.6; border-style: dashed; }
.gx-uptabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 6px 0 10px; }
.gx-uptab { border: 1px solid var(--line-2); background: #fff; border-radius: 99px; padding: 3px 12px; font-size: 0.84rem; cursor: pointer; color: var(--ink-2); }
.gx-uptab.on { background: #2c3143; border-color: #2c3143; color: #fff; }
.gx-uplist { display: flex; flex-direction: column; gap: 2px; max-height: 46vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 4px; margin: 6px 0; max-width: 760px; }
.gx-uprow { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: center; padding: 3px 6px; border-radius: 6px; font-size: 0.82rem; }
.gx-uprow[hidden] { display: none; }
.gx-uprow:hover { background: var(--panel-2); }
.gx-uprow code { word-break: break-all; }
.gx-uprow select { font-size: 0.78rem; max-width: 150px; }
.gx-drop { border: 2px dashed var(--line-2); border-radius: 10px; padding: 18px; text-align: center; max-width: 760px; }
.gx-drop.over { border-color: var(--accent); background: var(--accent-soft); }
.gx-drop p { margin: 0 0 8px; display: inline-flex; align-items: center; gap: 6px; }
.gx-paste { width: 100%; font-family: var(--mono); font-size: 12.5px; border: 1px solid var(--line-2); border-radius: 6px; padding: 6px 8px; resize: vertical; }
.gx-frame { width: 100%; height: 70vh; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.gx-runrow { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.gx-center .gx-runrow + p { margin-top: 10px; }
.api-home[hidden], .api-panels[hidden] { display: none; }

/* UniProt entry: keep the sequence, send the code to a notebook */
.entry-h .entry-keep { display: inline-flex; flex-wrap: wrap; gap: 6px; }

/* narrow screens: toolbars scroll sideways instead of widening the page; code in help tables may wrap */
.term-bar, .gx-nav { min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
.term-bar > *, .gx-nav > * { flex-shrink: 0; }
.term-bar .grow { flex: 1 1 0; min-width: 0; }
.help-page td code { white-space: normal; overflow-wrap: break-word; }
.help-page table { table-layout: auto; }
@media (max-width: 900px) {
  .help-page td code { overflow-wrap: anywhere; }
  .gx-navb span { white-space: nowrap; }
}