/* ═══════════════════════════════════════════════════════════════════════ NUCLEORA DESIGN SYSTEM — Phase 8, W0 (shared shell). SINGLE SOURCE OF TRUTH. ─────────────────────────────────────────────────────────────────────── OWNERSHIP: W0 owns this file. W1–W10 CONSUME tokens and must never add, rename or re-point one. A workspace that needs a value no token expresses files a request to W0 rather than writing a local literal. NAMING: the `--n-*` names below are the primitives. Every pre-Phase-8 name (`--acc`, `--panel2`, `--line`, `--ink`, `--muted`, `--bg2`, `--on-acc`, `--warn`, `--err`, `--good`, `--sp-*`, `--radius-*`, `--ease*`, …) is kept as an ALIAS pointing into the new palette — never deleted. 270 uses of `--acc` across 51 files depend on that. HAIRLINE SPLIT (WCAG 1.4.11): `--n-line-1` is DECORATIVE (~1.3:1 — correct for a card edge) and `--n-line-3` is the CONTROL BOUNDARY (>=3:1). Borders on inputs/buttons/other interactive controls must use `--n-line-3`; `--line` stays aliased to the decorative one for backward compatibility. ─────────────────────────────────────────────────────────────────────── PHASE 8b RETUNE (de-AI-aesthetic pass). The Phase-8 palette above was a dark-first surface set with saturated cyan/teal accents, diffuse glow shadows and a header gradient. That reads as generated-startup chrome rather than instrument software, so the VALUES below were re-pointed. Every one of the 116 token NAMES is unchanged, so the retune propagates through all 56 adopting module files without editing any of them. The four rules the new values follow: 1. LIGHT IS THE DEFAULT. `:root` is now the light surface set; dark is an explicit opt-in via [data-theme="dark"]. (This is the inverse of Phase 8 — index.html's pre-paint script was flipped to match.) 2. SATURATED COLOUR IS DATA SEMANTICS ONLY. Accents are desaturated navy/green so that a green "pass" or a red "risk" in a result table is the most saturated thing on screen, not the chrome. 3. NO GLOW, NO GRADIENT, NO GLASS. --glow-acc/--glow-acc2 are zeroed (names kept: they resolve, they just paint nothing); --header-from/--header-to are the SAME value so the header gradient computes flat; --glass is a solid surface, not a translucent one. Shadows are tight 1-4px offsets for real floating layers (popovers, modals) instead of 12-32px cinematic diffusion. 4. SMALL RADII. The scale is re-pointed 4/6/10/16 -> 2/3/4/6px. ⚠ --radius-pill IS NO LONGER A PILL. It is re-pointed 999px -> 3px. The NAME is kept because 30 module files consume it for status chips and badges, and re-pointing the value is the only way to de-pill them all without editing files this track does not own. If you are adding new markup, do not read "pill" as a promise of a 999px radius. Contrast was computed, not eyeballed: every text-role token clears WCAG AA 4.5:1 against ALL FIVE surfaces --n-bg-0..--n-bg-4 in BOTH themes, and --n-line-3/--n-ink-3/--n-focus-ring clear the 3:1 non-text floor. Worst measured cases: light --n-base-c 4.73:1, dark --n-base-a 4.50:1, dark --n-line-3 3.22:1, light --n-line-3 3.30:1. ═══════════════════════════════════════════════════════════════════════ */ :root, :root[data-theme="light"]{ /* ---- surfaces: 5 elevation steps. Light mode inverts the Phase-8 ordering: bg-0 is the recessed app background (light grey), and bg-1/bg-2 are the white working surfaces that sit ON it. ---- */ --n-bg-0:#f2f4f6; /* app background, behind everything */ --n-bg-1:#ffffff; /* rail, header, tab strip */ --n-bg-2:#ffffff; /* card / panel surface */ --n-bg-3:#f1f3f5; /* raised: inputs, hover fills, popovers */ --n-bg-4:#e4e8ec; /* highest: active/pressed fills, tooltips */ /* ---- hairlines ---- */ --n-line-1:#dce0e5; /* decorative divider, card border */ --n-line-2:#c2c8cf; /* stronger structural divider */ --n-line-3:#767f89; /* CONTROL boundary: input/button borders (3.30:1) */ /* ---- ink ---- */ --n-ink-1:#13181d; /* primary text (14.5:1 worst surface) */ --n-ink-2:#4a535d; /* secondary text (6.35:1 worst surface) */ --n-ink-3:#6b747e; /* tertiary/disabled; large text + UI glyphs only */ /* ---- semantics. Desaturated navy/green: chrome must never out-saturate a data verdict. Green = pass, red = risk, amber = caution. ---- */ --n-accent:#17457c; /* deep navy — primary action, selection */ --n-accent-2:#0b6b45; /* forest green — pass / validated */ --n-warn:#7a5206; /* amber-brown — caution */ --n-err:#a91f16; /* oxide red — risk / failure */ --n-info:#17457c; --n-on-accent:#ffffff; /* text on an accent fill (9.64:1) */ /* ---- tinted states (pre-resolved flat fills, never alpha over glass) ---- */ --n-accent-tint:#e9eef4; /* selected row background */ --n-accent-tint-2:#dae3ee; /* selected + hover */ --n-focus-ring:#17457c; /* >=3:1 against every surface above */ /* ---- nucleotide hues (functional, never decorative) ---- */ --n-base-a:#1f5fa9; --n-base-t:#7a5206; --n-base-g:#0b6b45; --n-base-c:#0f6f80; --n-base-u:#2f6f4f; /* ---- elevation: tight offsets for genuinely-floating layers only. A card does NOT get a shadow in this design; it gets a 1px line. ---- */ --n-shadow-1:0 1px 1px rgba(19,24,29,.06); --n-shadow-2:0 2px 4px rgba(19,24,29,.10); --n-shadow-3:0 4px 10px rgba(19,24,29,.14); /* ---- legacy aliases — DO NOT REMOVE (270 uses of --acc alone) ---- */ --bg:var(--n-bg-0); --bg2:var(--n-bg-1); --panel:var(--n-bg-2); --panel2:var(--n-bg-3); --ink:var(--n-ink-1); --muted:var(--n-ink-2); --line:var(--n-line-1); --acc:var(--n-accent); --acc2:var(--n-accent-2); --acc3:var(--n-info); --warn:var(--n-warn); --err:var(--n-err); --on-acc:var(--n-on-accent); --good:var(--n-accent-2); --ok:var(--n-warn); --low:var(--n-err); --a:var(--n-base-a); --t:var(--n-base-t); --g:var(--n-base-g); --c:var(--n-base-c); --u:var(--n-base-u); --hue-blue:var(--n-base-a); --shadow:rgba(19,24,29,.10); --shadow-strong:rgba(19,24,29,.16); /* Header is FLAT: both stops are the same colour, so every existing `linear-gradient(180deg,var(--header-from),var(--header-to))` call site computes a solid fill without being edited. */ --header-from:var(--n-bg-1); --header-to:var(--n-bg-1); /* Glows are OFF. The names still resolve (116-token contract) but paint nothing, which removes the accent glow everywhere at once. */ --glow-acc:0 0 0 rgba(0,0,0,0); --glow-acc2:0 0 0 rgba(0,0,0,0); /* ---- previously UNDEFINED but referenced in 6+ files — define them ---- Measured before Phase 8: 10 custom properties were consumed by static/*.js/css and defined nowhere (--border x6 files, --mono x4, --accent x2, --fg x2, --panel-bg, --bd, --pnl, --chip, --card-bg, --card), plus --glass consumed by lab.html. Each resolved to the empty string, so those declarations silently did nothing. All 11 are defined here so nothing in the codebase references an undefined variable. --glass is deliberately a SOLID surface: lab.html used it for frosted translucent panels, and pointing it at an opaque colour removes the glassmorphism there without editing that file. */ --border:var(--n-line-1); --bd:var(--n-line-1); --fg:var(--n-ink-1); --card:var(--n-bg-2); --card-bg:var(--n-bg-2); --panel-bg:var(--n-bg-2); --pnl:var(--n-bg-2); --chip:var(--n-bg-3); --glass:var(--n-bg-2); --accent:var(--n-accent); --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace; /* ---- Phase 8b: two tokens a module asked W0 for and never got ---- ws_home_project_management.js consumes --n-bg-5 (a surface one step above --n-bg-4, for a modal panel) and --n-scrim (the modal backdrop). Both were undefined, so `background:var(--n-bg-5)` painted NOTHING and the modal backdrop was fully transparent. The W0 contract says a workspace needing a value no token expresses files a request to W0 rather than writing a local literal -- this is that request, honoured. The scrim is deliberately a flat 55% neutral, NOT a backdrop-filter blur. */ --n-bg-5:#d6dbe1; --n-scrim:rgba(19,24,29,.55); } /* ── Dark mode: now an explicit opt-in, not the default. A high-contrast neutral charcoal — not a blue-black "night mode" glow surface. Every text-role token here was lifted until it cleared 4.5:1 against all five surfaces (worst case --n-base-a at 4.50:1). ── */ :root[data-theme="dark"]{ --n-bg-0:#16191d; --n-bg-1:#1c2025; --n-bg-2:#21262c; --n-bg-3:#2a3037; --n-bg-4:#353c45; --n-line-1:#2f353c; --n-line-2:#414952; --n-line-3:#818b95; --n-ink-1:#e7eaee; --n-ink-2:#a9b1bb; --n-ink-3:#818b95; --n-accent:#7baad5; --n-accent-2:#44b989; --n-warn:#d29b40; --n-err:#e58d85; --n-info:#7baad5; --n-on-accent:#101418; --n-accent-tint:#1e2b3a; --n-accent-tint-2:#26364a; --n-focus-ring:#7baad5; --n-base-a:#72a9e1; --n-base-t:#d29b40; --n-base-g:#44b989; --n-base-c:#5fb1bf; --n-base-u:#86bd9a; --n-shadow-1:0 1px 1px rgba(0,0,0,.18); --n-shadow-2:0 2px 4px rgba(0,0,0,.24); --n-shadow-3:0 4px 10px rgba(0,0,0,.30); --n-bg-5:#3c444c; --n-scrim:rgba(0,0,0,.60); /* dark-mode overrides of the non-var() legacy aliases */ --shadow:rgba(0,0,0,.24); --shadow-strong:rgba(0,0,0,.34); } /* ── Spacing (4px grid), type scale, radius, border-width, motion. `--sp-*` and `--ease*` already existed and keep their values; --sp-0/--sp-8/--sp-px are added, and the radius scale is re-pointed to the Phase-8 values (§1.7). ── */ :root{ --sp-0:0; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-px:1px; --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace; /* Phase 8b: line-heights tightened one notch across the scale (denser readout, less marketing airiness) and the two display steps pulled down — a 28px headline is a landing page, not a tool window. */ --fs-1:11px; --lh-1:1.35; /* micro: badges, counts, table sub-labels */ --fs-2:12px; --lh-2:1.38; /* dense UI: rail items, table cells, chips */ --fs-3:13px; --lh-3:1.45; /* BODY DEFAULT — forms, prose, buttons */ --fs-4:14px; --lh-4:1.30; /* card title (h2/h3) */ --fs-5:16px; --lh-5:1.25; /* view title (h1 inside a view) */ --fs-6:19px; --lh-6:1.18; /* page/app title */ --fs-7:24px; --lh-7:1.12; /* numeric readout, dashboard KPI */ /* Weights pulled back: 750 headings read as advertising. Scientific software tops out around semibold. */ --fw-normal:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; /* --ls-tight is now ZERO. Negative tracking on large headings is one of the most reliable generated-marketing tells; the name is kept because module files consume it. */ --ls-tight:0; --ls-normal:0; --ls-caps:.04em; --fs-mono-1:12px; --fs-mono-2:12.5px; /* sequence text */ /* Phase 8b: the whole radius scale re-pointed DOWN. Sharp practical panels, not rounded-2xl marketing cards. See the --radius-pill warning in the header comment — it is 3px now, not 999px. */ --radius-xs:2px; /* chips, badges, tags */ --radius-sm:3px; /* buttons, inputs, rail items */ --radius-md:4px; /* cards, panels, popovers */ --radius-lg:6px; /* modals, sheets */ --radius-pill:3px; --bw-1:1px; --bw-2:2px; /* Phase 8b: MOTION IS OFF. All three durations are 0ms, so every every `transition` duration and token-driven animation across the 56 adopting module files becomes an instant state change without editing any of them. The --ease* curves are retained (names are consumed) but are inert at zero duration. Updates should feel like a native control repainting, not like a page animating in. */ --ease:cubic-bezier(.22,.75,.32,1); --ease-out:cubic-bezier(.16,1,.3,1); --dur-1:0ms; /* hover, colour change */ --dur-2:0ms; /* disclosure open/close */ --dur-3:0ms; /* view transition, modal */ } /* ── Density (§1.10). ONE global control, persisted, on . W1–W10 must express row heights as var(--row-h) so the switch works everywhere at once. `comfortable` is the default and is also declared on bare :root so --row-h/--density-pad always resolve even before the attribute is written (ws_subapp_settings.js also writes data-density; same two values, so the two controls agree rather than fight). Phase 8b: both steps tightened (34/28 -> 28/24) and comfortable's vertical padding cut a step. 34px rows are a touch-target height; this is a desktop workbench where 428 destinations have to fit a rail. ── */ :root, :root[data-density="comfortable"]{ --row-h:28px; --density-pad:var(--sp-1) var(--sp-3); } :root[data-density="compact"] { --row-h:24px; --density-pad:var(--sp-px) var(--sp-2); } /* ── Tier filter (§3.1). Pure CSS: no JS re-render, so switching tiers cannot trigger the §6.2 page-wipe failure mode. Absence of [data-ui-tier] == "full" (everything visible), so an un-tagged item is never hidden — items without data-tier are ALWAYS visible. ── */ :root[data-ui-tier="guided"] [data-tier="standard"], :root[data-ui-tier="guided"] [data-tier="full"], :root[data-ui-tier="standard"] [data-tier="full"]{display:none} /* ── Motion: honour prefers-reduced-motion globally (§1.7). ── */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} } *{box-sizing:border-box} html,body{margin:0;height:100%} body{font-family:var(--font-ui); background:var(--bg);color:var(--ink);font-size:var(--fs-3);line-height:var(--lh-3); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px; padding:7px 14px;border-bottom:var(--bw-1) solid var(--n-line-2);background:var(--n-bg-1)} .brand{display:flex;gap:12px;align-items:center;min-width:0} .logo{display:block;flex-shrink:0} header h1{margin:0;font-size:var(--fs-6);line-height:var(--lh-6); font-weight:var(--fw-semibold);letter-spacing:0} .tagline{color:var(--muted);font-size:12px;letter-spacing:.01em} .header-right{display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0} .badges{display:flex;gap:5px;margin-right:8px;flex-wrap:wrap} .badge{font-size:var(--fs-1);padding:1px 5px;border-radius:var(--radius-xs); font-weight:var(--fw-medium);font-family:var(--font-mono)} .badge.on{background:rgba(75,191,151,.16);color:var(--acc2)} .badge.off{background:rgba(224,104,95,.14);color:var(--err)} .tabs{display:flex;gap:2px;padding:0 20px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap} .tab{padding:11px 17px;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent;font-weight:600; user-select:none;transition:color .15s var(--ease),border-color .15s var(--ease)} .tab:hover{color:var(--ink)} .tab.active{color:var(--acc);border-bottom-color:var(--acc)} main{padding:22px 22px 56px;max-width:1400px;margin:0 auto} .view{display:none} /* Phase 8b: no entrance animation. A view appears when you click its rail item; fading + sliding it in is a marketing-site affordance that costs 220ms of every navigation. `view-in` is retained as an EMPTY keyframe because .empty-coach and .cal-row still reference it by name. */ .view.active{display:block} @keyframes view-in{from{opacity:1}to{opacity:1}} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);margin-bottom:var(--sp-4)} @media(max-width:1000px){.grid-2{grid-template-columns:1fr}} .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--sp-3) var(--sp-4)} .card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--sp-3)} .card h2{margin:0 0 2px;font-size:var(--fs-4);line-height:var(--lh-4);font-weight:var(--fw-semibold);letter-spacing:0} .card-actions{display:flex;gap:6px;align-items:center} .sub{color:var(--muted);font-size:12.5px;margin-bottom:var(--sp-3);line-height:1.55} label{display:block;font-size:11.5px;color:var(--muted);margin:var(--sp-2) 0 4px;font-weight:650; text-transform:uppercase;letter-spacing:.03em} label.chk{display:inline-flex;gap:5px;align-items:center;color:var(--ink);margin:0;cursor:pointer; font-weight:500;text-transform:none;letter-spacing:normal;font-size:13px} /* Controls carry the AA control boundary (--n-line-3), not the decorative hairline, and focus is a crisp 2px ring rather than a 3px accent bloom. */ input[type=text],input[type=number],textarea,select{width:100%;background:var(--n-bg-1); border:var(--bw-1) solid var(--n-line-3); color:var(--ink);border-radius:var(--radius-sm);padding:5px 8px;font-size:var(--fs-3);font-family:inherit} input[type=text]:focus,input[type=number]:focus,textarea:focus,select:focus{outline:var(--bw-2) solid var(--n-focus-ring); outline-offset:-1px;border-color:var(--n-line-3)} /* Numeric entry is monospaced with tabular figures so digits align in a column and a changing value does not reflow the field. */ input[type=number]{font-family:var(--font-mono);font-variant-numeric:tabular-nums} input.mini{width:130px;padding:5px 8px;font-size:12px} textarea.seq-edit{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:12.5px;letter-spacing:.4px; resize:vertical;line-height:1.7} .seq-edit{min-height:64px} #editorSeq{min-height:150px} .row{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:flex-start} .row>div{flex:1;min-width:120px} button{background:var(--acc);color:var(--on-acc);border:var(--bw-1) solid transparent; border-radius:var(--radius-sm);padding:5px 12px;font-size:var(--fs-3); font-weight:var(--fw-medium);cursor:pointer} button:hover{filter:brightness(1.08)} button:active{transform:translateY(1px)} button:focus-visible{outline:var(--bw-2) solid var(--n-focus-ring);outline-offset:1px} button.ghost{background:var(--n-bg-1);color:var(--ink);border:var(--bw-1) solid var(--n-line-3); font-weight:var(--fw-medium)} button.ghost:hover{background:var(--n-bg-3)} button.sm{padding:3px 9px;font-size:var(--fs-2)} button:disabled{opacity:.5;cursor:not-allowed;filter:none;transform:none} .btn-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px} .opts-row{display:flex;gap:16px;flex-wrap:wrap;margin:12px 0} .opts-group-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em; color:var(--muted);margin:14px 0 2px;border-top:var(--bw-1) solid var(--border);padding-top:var(--sp-3)} .opts-group-label:first-child{border-top:none;padding-top:0;margin-top:2px} .gc-target-row{align-items:center} /* Phase 8b: index.html no longer contains a type=range (all 5 became numeric inputs with explicit units). This rule is retained for any range input a module injects, with the dead hex fallback removed -- --accent is defined. */ .gc-target-row input[type=range]{flex:1;min-width:140px;max-width:280px;accent-color:var(--accent)} /* the numeric GC field + its unit sit inline on the same row */ .gc-target-row input[type=number]{flex:0 0 auto;width:76px} .gc-target-row input[type=range]:disabled{opacity:.4} .wide-input{width:100%;box-sizing:border-box} .editor-stats{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px} .stat{background:var(--panel2);border:1px solid var(--line);border-radius:7px;padding:5px 10px;font-size:12px} .stat b{color:var(--acc)} /* Sequence/plasmid map holder. Phase 8b: the radial vignette and inset highlight are gone -- a flat plotting surface with a 1px frame, like any other instrument canvas. The ring itself is drawn by Nucleora's own SVG map renderer (static/nvp_map.js); seqviz was removed. */ .map-holder{height:420px;background:var(--n-bg-1); border:var(--bw-1) solid var(--n-line-2);border-radius:var(--radius-md);overflow:hidden} /* C1: map legend + zoom */ .map-zoom{display:inline-flex;gap:3px;align-items:center} .map-zoom .xs,.map-sel .xs,.fd-body .xs{padding:2px 7px;font-size:11px} button.xs{padding:2px 7px;font-size:11px;background:var(--panel2);color:var(--ink);border:1px solid var(--line);font-weight:600} .map-legend{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 2px 8px;font-size:11px;color:var(--muted)} .map-legend .lg{display:inline-flex;align-items:center;gap:5px} .lg-sw{width:12px;height:12px;border-radius:3px;display:inline-block} .lg-sw.lg-line{width:2px;height:13px;border-radius:0;background:var(--muted)} .lg-hint{margin-left:auto;font-style:italic;opacity:.8} /* C2: clicked-feature detail */ .map-feat-detail{display:none;margin-top:8px;padding:9px 12px;background:var(--bg2); border-left:3px solid var(--acc);border-radius:8px} .fd-head{font-size:13px;margin-bottom:3px} .fd-type{font-size:10px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:1px 7px;color:var(--muted);margin-left:6px} .fd-body{font-size:12px;color:var(--muted);font-family:ui-monospace,monospace} .fd-aa{margin-top:5px;color:var(--acc2);word-break:break-all} .scroll-out{max-height:360px;overflow:auto} .muted{color:var(--muted)} .seqbox{font-family:ui-monospace,monospace;font-size:12.5px;word-break:break-all;background:var(--bg2); border:1px solid var(--line);border-radius:8px;padding:11px;line-height:1.85;max-height:200px;overflow:auto} .nt-A{color:var(--a)}.nt-T{color:var(--t)}.nt-G{color:var(--g)}.nt-C{color:var(--c)}.nt-U{color:var(--u)} .protein-seq{font-family:ui-monospace,monospace;font-size:12.5px;word-break:break-all;line-height:1.8;color:var(--muted)} table{border-collapse:collapse;width:100%;font-size:var(--fs-2);margin-top:var(--sp-2)} /* Phase 8b: table padding cut 7px/9px -> 3px/7px. A results table is meant to show many rows at once. Numerals are tabular so columns align. */ th,td{border:var(--bw-1) solid var(--line);padding:3px 7px;text-align:left; font-variant-numeric:tabular-nums} tbody tr{transition:background .12s var(--ease)} tbody tr:hover{background:var(--panel2)} th{background:var(--panel2);color:var(--muted);position:sticky;top:0} tr.hit{cursor:pointer}tr.hit:hover td{background:var(--panel2)} .pill{display:inline-block;padding:1px 6px;border-radius:var(--radius-xs);font-size:var(--fs-1); font-weight:var(--fw-medium);margin:1px 4px 1px 0;border:var(--bw-1) solid transparent} .pill.good{background:rgba(75,191,151,.16);color:var(--good)} .pill.ok{background:rgba(224,164,74,.16);color:var(--ok)} .pill.low,.pill.high{background:rgba(224,104,95,.16);color:var(--low)} .pill.info{background:rgba(149,169,160,.16);color:var(--muted)} .src-tabs{display:flex;gap:4px;margin-bottom:14px} .src{padding:4px 11px;border-radius:var(--radius-sm);background:var(--n-bg-1); border:var(--bw-1) solid var(--n-line-3); cursor:pointer;font-size:var(--fs-2);font-weight:var(--fw-medium);color:var(--muted)} .src.active{background:var(--acc);color:var(--on-acc)} .err-msg{color:var(--err);font-size:12.5px;margin-top:8px; background:rgba(224,104,95,.10);border:1px solid var(--err);border-radius:8px; padding:9px 12px;display:flex;align-items:center;gap:8px} .err-msg::before{content:"[WARN]";flex:0 0 auto} .ok-msg{color:var(--acc2);font-size:12.5px} .spinner{display:inline-block;width:13px;height:13px;border:2px solid var(--line);border-top-color:var(--acc); border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;margin-left:6px} @keyframes spin{to{transform:rotate(360deg)}} .qc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:10px 0} .qc-item{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:9px} .qc-item .m{font-size:11px;color:var(--muted)} .qc-item .v{font-size:17px;font-weight:700;margin-top:2px} .seg-map{font-family:ui-monospace,monospace;font-size:11.5px;word-break:break-all;line-height:1.9; background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:11px;max-height:150px;overflow:auto} .seg{padding:1px 2px;border-radius:3px} .legend{display:flex;gap:14px;flex-wrap:wrap;margin:10px 0;font-size:11.5px} .legend span{display:inline-flex;gap:5px;align-items:center} .swatch{width:13px;height:13px;border-radius:3px;display:inline-block} /* Parts & provenance panel */ .prov-mapwrap{background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:6px 4px;margin:6px 0 14px} .prov-svg{width:100%;height:64px;display:block} .prov-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px} .prov-card{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:10px 11px;border-left:3px solid var(--acc)} .prov-head{display:flex;align-items:center;gap:7px;margin-bottom:4px} .prov-origin{font-weight:600;font-size:12.5px;color:var(--ink);margin-bottom:5px} .prov-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:5px} .prov-tag{font-size:10px;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:1px 7px;color:var(--muted)} .prov-tag.mono{font-family:ui-monospace,monospace} .prov-why{font-size:11px;color:var(--muted);line-height:1.5} .prov-ref{font-size:10px;color:var(--muted);opacity:.8;margin-top:4px;font-style:italic} /* Cloning method gallery */ .clone-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-bottom:12px} .clone-tile{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:12px 10px; text-align:center;cursor:pointer;transition:transform .1s,border-color .1s,background .1s;user-select:none} /* Phase 8b: no hover lift (see the .designer-fab note). Surface + border only, so the tile does not move under the cursor. */ .clone-tile:hover{background:var(--n-bg-3);border-color:var(--acc)} .clone-tile.active{border-color:var(--acc);background:var(--n-accent-tint);box-shadow:none} .clone-tile .ct-ico{display:inline-flex;align-items:center;justify-content:center; width:30px;height:30px;margin:0 auto 7px;border-radius:7px;background:var(--panel2); border:1px solid var(--line);color:var(--acc);font-size:12px;font-weight:700;letter-spacing:.5px} .clone-tile.active .ct-ico,.clone-tile:hover .ct-ico{background:var(--acc);color:var(--on-acc);border-color:var(--acc)} .clone-tile b{display:block;font-size:13px;color:var(--ink)} .clone-tile span{display:block;font-size:10.5px;color:var(--muted);margin-top:2px;line-height:1.3} .clone-desc{background:var(--bg2);border-left:3px solid var(--acc);border-radius:7px;padding:9px 12px; margin-bottom:12px;font-size:12.5px;color:var(--muted);line-height:1.55} .c-panel{margin-bottom:6px} .prebuilt-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;margin-bottom:10px; background:var(--panel2);border:1px solid var(--line);border-radius:8px} .prebuilt-bar select{max-width:260px} .prebuilt-bar #prebuiltNote{flex-basis:100%;margin-top:2px} /* History tree (DAG) viewer */ .hist-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:10px} .dag-canvas{overflow:auto;background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:8px;min-height:120px;max-height:460px} .dag-svg{display:block} .dag-edge{fill:none;stroke:var(--line);stroke-width:1.5} .dag-node rect{fill:var(--panel2);stroke:var(--line);stroke-width:1} .dag-node:hover rect{stroke:var(--acc)} .dag-node.cur rect{fill:color-mix(in srgb,var(--acc) 22%,var(--panel2));stroke:var(--acc);stroke-width:2} .dag-node.sel rect{stroke:var(--acc2);stroke-width:2} .dag-node .dag-op{fill:var(--ink);font-size:11px;font-weight:600} .dag-node .dag-sub{fill:var(--muted);font-size:9.5px} .dag-detail{margin-top:12px;padding:10px 12px;background:var(--bg2);border-radius:8px;border-left:3px solid var(--acc)} .dag-diff{margin-top:12px;padding:10px 12px;background:var(--bg2);border-radius:8px;border-left:3px solid var(--acc2)} .dag-diff h4{margin:0 0 6px;font-size:13px;color:var(--ink)} /* Parts bin */ .parts-bin summary{cursor:pointer;font-weight:600;color:var(--acc);padding:6px 0} .parts-bin-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin:8px 0} .pb-card{background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:10px} .pb-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .pb-head b{font-size:12.5px;color:var(--ink)} .pb-dg{font-size:10.5px;font-weight:600;color:var(--acc2);background:color-mix(in srgb,var(--acc2) 15%,transparent);padding:1px 6px;border-radius:8px} .pb-meta{font-size:10.5px;color:var(--muted)} .pb-src{font-size:10.5px;color:var(--muted);margin:4px 0} .pb-note{font-size:11px;color:var(--ink);opacity:.85;line-height:1.4;margin-bottom:6px} /* Severity-badge validation system (green / sandstone / terracotta) */ /* Phase 8b: the severity trio was a private hardcoded palette on the old eco greens/sands, so a "pass" here did not match a "pass" anywhere else. Now aliased onto the semantic tokens: one definition, both themes, and severity colour is the same colour the rest of the app uses for the same meaning. */ :root{--sev-green:var(--n-accent-2);--sev-sand:var(--n-warn);--sev-terra:var(--n-err)} .sev-summary{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0} .sev-chip{font-size:var(--fs-1);font-weight:var(--fw-medium);padding:1px 6px;border-radius:var(--radius-xs)} .sev-chip.green{background:color-mix(in srgb,var(--sev-green) 18%,transparent);color:var(--sev-green)} .sev-chip.sandstone{background:color-mix(in srgb,var(--sev-sand) 20%,transparent);color:var(--sev-sand)} .sev-chip.terracotta{background:color-mix(in srgb,var(--sev-terra) 20%,transparent);color:var(--sev-terra)} .sev-grade{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--muted)} .sev-verdict{padding:8px 12px;border-radius:8px;font-weight:600;font-size:13px;margin:6px 0 12px} .sev-verdict.green{background:color-mix(in srgb,var(--sev-green) 12%,transparent);color:var(--sev-green)} .sev-verdict.sandstone{background:color-mix(in srgb,var(--sev-sand) 14%,transparent);color:var(--sev-sand)} .sev-verdict.terracotta{background:color-mix(in srgb,var(--sev-terra) 14%,transparent);color:var(--sev-terra)} .sev-row{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)} .sev-badge{font-size:16px;flex:0 0 auto;width:22px;text-align:center} .sev-body{flex:1} .sev-title{font-weight:600;font-size:12.5px;color:var(--ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap} .sev-cat{font-size:10px;font-weight:500;color:var(--muted);background:var(--panel2);padding:1px 7px;border-radius:8px} .sev-pos{font-family:ui-monospace,monospace;font-size:11px;color:var(--acc);cursor:pointer;text-decoration:underline} .sev-msg{font-size:12px;color:var(--ink);opacity:.85;margin-top:2px;line-height:1.4} .sev-fix{font-size:11.5px;color:var(--acc2);margin-top:3px} .sev-clean{color:var(--sev-green);font-weight:600;padding:8px 0} .sev-row.sandstone .sev-badge{filter:none} .sev-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:5px} .sev-reopt-out{margin-top:6px} .sev-reopt-out:empty{margin-top:0} /* Multi-objective (Pareto) explorer */ .pareto-panel summary{cursor:pointer;font-weight:600;color:var(--acc);padding:6px 0} .pareto-sliders{display:flex;flex-direction:column;gap:6px;margin:8px 0} .pareto-sliders label{display:flex;align-items:center;gap:10px;font-size:12px} .pareto-sliders input[type=range]{flex:1;max-width:220px} .pareto-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:10px} @media(max-width:760px){.pareto-grid{grid-template-columns:1fr}} .pareto-svg{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:8px} .pareto-svg .ax{stroke:var(--line);stroke-width:1} .pareto-svg .axl{fill:var(--muted);font-size:9px} .pareto-svg .pt{fill:color-mix(in srgb,var(--acc) 55%,transparent);stroke:var(--acc);stroke-width:1} .pareto-svg .pt.best{fill:var(--acc2);stroke:var(--ink);stroke-width:1.5} .pareto-table{width:100%;border-collapse:collapse;font-size:12px} .pareto-table th{text-align:left;color:var(--muted);font-weight:600;padding:3px 6px;border-bottom:1px solid var(--line)} .pareto-table td{padding:3px 6px;border-bottom:1px solid var(--line)} .pareto-table tr.best{background:color-mix(in srgb,var(--acc2) 12%,transparent)} .pareto-table .mono{font-family:ui-monospace,monospace} /* Sequence-tuning card (GC / motifs / Kozak / poly(A)) */ #tuneCard h4{margin:0 0 6px;font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em} .gc-svg{width:100%;height:90px;background:var(--bg2);border:1px solid var(--line);border-radius:8px} .gc-svg .gc-ok{fill:color-mix(in srgb,var(--acc2) 9%,transparent)} .gc-svg .gc-mid{stroke:var(--line);stroke-dasharray:3 3} .gc-svg .gc-line{fill:none;stroke:var(--acc);stroke-width:1.5} .gc-svg .gc-cliff{fill:var(--warn)} .kz-box{display:flex;gap:14px;align-items:flex-start;background:var(--bg2);border-radius:8px;padding:10px 12px} .kz-score{font-size:26px;font-weight:800;line-height:1} .kz-score span{font-size:12px;font-weight:500;color:var(--muted)} .kz-score.green{color:var(--sev-green)} .kz-score.sandstone{color:var(--sev-sand)} .kz-score.terracotta{color:var(--sev-terra)} .kz-notes{margin:4px 0 0;padding-left:16px;font-size:11.5px;color:var(--ink);opacity:.85} .mo-list{display:flex;flex-direction:column;gap:2px;margin-top:6px} .mo-row{padding:7px 0;border-bottom:1px solid var(--line);font-size:12.5px} .mo-row .mo-pos{color:var(--acc);cursor:pointer;margin-right:8px} .mo-row.warn{border-left:3px solid var(--sev-sand);padding-left:8px} .mo-why{font-size:11px;color:var(--muted);margin-top:2px} /* Translation ribbon */ .rb-modes{display:flex;gap:6px} .rb-strip{display:flex;flex-wrap:wrap;font-family:ui-monospace,monospace;font-size:12px;line-height:1;margin:4px 0;gap:1px} .rb-aa{width:15px;height:19px;display:flex;align-items:center;justify-content:center;color:var(--on-acc); background:var(--c);border-radius:2px;cursor:default;font-weight:600} .rb-aa.rare{outline:2px solid var(--sev-terra);outline-offset:-2px} /* Phase 8b: no hover scale. Magnifying a residue on hover moves the neighbours the user is trying to read; the outline marks it instead. */ .rb-aa:hover{outline:var(--bw-2) solid var(--n-ink-1);outline-offset:-1px;z-index:2;position:relative} .rb-track{position:relative;height:18px;margin-bottom:3px} .rb-sub{position:absolute;top:0;height:16px;background:color-mix(in srgb,var(--acc) 25%,transparent); border:1px solid var(--acc);border-radius:3px;font-size:9.5px;color:var(--ink);white-space:nowrap; overflow:hidden;padding:0 3px;box-sizing:border-box} .rb-leg{display:inline-flex;gap:10px;font-size:11px;color:var(--muted);align-items:center;margin-top:4px} .rb-leg i{width:11px;height:11px;border-radius:2px;display:inline-block;margin-right:3px;vertical-align:-1px} .rb-readout{margin-top:8px;padding:7px 10px;background:var(--bg2);border-radius:6px;font-size:12px;min-height:18px} .rb-readout .mono{font-family:ui-monospace,monospace} /* Advanced IVT chemistry QC */ .ivt-adv-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:12px 0 6px;padding:10px;background:var(--bg2);border-radius:8px} .ivt-adv-bar label{font-size:11.5px;color:var(--muted);display:flex;flex-direction:column;gap:3px} .ivt-adv-bar select,.ivt-adv-bar input{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:5px;padding:3px 6px;font-size:12px} .dsrna-svg{width:100%;height:54px;background:var(--bg2);border-radius:6px;margin:4px 0} /* Module 4: structure arc diagram + LNP */ .arc-svg{width:100%;height:180px;background:var(--bg2);border:1px solid var(--line);border-radius:8px} .arc-svg .arc{fill:none;stroke:var(--acc);stroke-width:1.2} .arc-svg .arc-base{stroke:var(--ink);stroke-width:1.5;opacity:.5} .uw-box{display:flex;gap:12px;align-items:flex-start;background:var(--bg2);border-radius:8px;padding:10px 12px} .lnp-controls{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:8px 0;padding:10px;background:var(--bg2);border-radius:8px} .lnp-controls label{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:8px} .lnp-controls input[type=range]{max-width:160px} .lnp-controls select{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:5px;padding:3px 6px} .lnp-cards{display:flex;gap:12px;flex-wrap:wrap;margin:6px 0} .lnp-metric{background:var(--bg2);border-radius:8px;padding:10px 16px;text-align:center;min-width:96px} .lnp-metric .n{font-size:22px;font-weight:800;color:var(--acc)} .lnp-metric .n span{font-size:12px;font-weight:500;color:var(--muted);margin-left:2px} .lnp-metric .l{font-size:11px;color:var(--muted);margin-top:2px} /* Module 1: sourcing tools */ .mini-link{font-size:11px;color:var(--acc);cursor:pointer;margin-left:8px;font-weight:500} .mini-link:hover{text-decoration:underline} .fetch-card,.swap-card,.anc-card{background:var(--bg2);border-radius:8px;padding:12px;margin-top:8px} .fetch-feats,.batch-table,.swap-table{width:100%;border-collapse:collapse;margin:8px 0;font-size:12px} .fetch-feats th,.batch-table th,.swap-table th{text-align:left;color:var(--muted);font-weight:600;border-bottom:1px solid var(--line);padding:3px 6px} .fetch-feats td,.batch-table td,.swap-table td{padding:3px 6px;border-bottom:1px solid var(--line)} .batch-table tr.bi-dup td{opacity:.6} .batch-table tr.bi-warn td{color:var(--sev-terra)} .btn-row{display:flex;gap:8px;align-items:center;margin-top:8px} .anc-cov{width:100%;height:40px;background:var(--panel);border-radius:6px;margin:6px 0} .anc-seq{font-size:11px;word-break:break-all;background:var(--panel);padding:6px;border-radius:6px;margin-top:6px} .sp-bar{display:inline-block;width:70px;height:8px;background:var(--panel);border-radius:4px;overflow:hidden;vertical-align:middle;margin-right:6px} .sp-bar>span{display:block;height:100%;background:var(--acc2)} /* Module 5: sequencing QC + RNA gel */ .rgel-wrap{display:flex;gap:16px;align-items:flex-start;margin-top:8px} .rgel-lane{position:relative;width:64px;background:var(--n-bg-4); border:var(--bw-1) solid var(--n-line-2);border-radius:var(--radius-xs)} .rgel-well{position:absolute;top:0;left:8px;right:8px;height:5px;background:var(--ink);opacity:.4;border-radius:2px} /* Phase 8b: bands are solid, not glowing. Band INTENSITY carries meaning on a gel; a decorative bloom around every band corrupts that reading. */ .rgel-band{position:absolute;left:6px;right:6px;height:4px;background:var(--acc2);border-radius:0} /* The smear IS the degradation readout, so the fade is meaningful data and is kept -- only the corner radius is squared off. */ .rgel-smear{position:absolute;left:10px;right:10px;background:linear-gradient(var(--acc2),transparent);border-radius:0} .rgel-trace{width:100%;height:90px;background:var(--bg2);border-radius:6px} .rgel-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--acc2);margin-right:5px} .chrom-svg{width:100%;height:70px;background:var(--bg2);border-radius:6px;margin:6px 0} .ngs-cov{width:100%;height:44px;background:var(--bg2);border-radius:6px;margin:4px 0} .ivtp-card{background:var(--bg2);border-radius:8px;padding:12px;margin-top:8px} .ivtp-row{margin:3px 0} .ivtp-row .mono{background:var(--panel);padding:2px 6px;border-radius:4px} /* Map layer toolbar */ .map-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 12px;margin-bottom:var(--sp-2); background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius-sm);font-size:12px} .map-toolbar .mt-label{color:var(--muted);font-weight:600;font-size:11px} .map-toolbar .chk.sm{font-size:12px;color:var(--ink);display:inline-flex;align-items:center;gap:4px} .map-toolbar .mini{padding:2px 6px;font-size:11.5px} .map-sel{margin-left:auto;font-size:11.5px;color:var(--muted);font-family:ui-monospace,monospace} .map-sel b{color:var(--acc)} .map-topology{font-size:11px;font-weight:600;padding:2px 8px;border-radius:10px;background:var(--panel2);color:var(--muted)} .map-topology.topo-circular{color:var(--acc2)} .map-topology.topo-linear{color:var(--muted)} .map-tooltip{display:none;position:absolute;z-index:400;background:var(--panel2);color:var(--ink); border:1px solid var(--line);border-radius:6px;padding:6px 10px;font-size:11.5px;line-height:1.4; box-shadow:var(--n-shadow-2);pointer-events:none;max-width:220px} .ed-ctx-menu{display:none;position:absolute;z-index:500;background:var(--panel2);border:1px solid var(--line); border-radius:var(--radius-sm);padding:3px;font-size:var(--fs-2);box-shadow:var(--n-shadow-3);min-width:180px} .ed-ctx-item{padding:6px 12px;border-radius:5px;cursor:pointer;color:var(--ink)} .ed-ctx-item:hover{background:var(--acc);color:var(--on-acc)} .feat-bulk-recolor{display:inline-flex;align-items:center;gap:6px;margin-left:10px} .feat-bulk-recolor input[type=color]{width:22px;height:22px;padding:0;border:1px solid var(--line);border-radius:4px;background:none} #featEditorTable th:first-child,#featEditorBody td:first-child{width:22px;text-align:center} .toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(100px); background:var(--panel2);border:1px solid var(--line);color:var(--ink);padding:10px 18px;border-radius:8px; font-size:var(--fs-3);z-index:100;box-shadow:var(--n-shadow-3)} .toast.show{transform:translateX(-50%) translateY(0)} details{margin-top:8px}summary{cursor:pointer;color:var(--acc);font-size:12.5px} .small{font-size:11.5px} a{color:var(--acc);text-decoration:none;transition:opacity .12s var(--ease)} a:hover{opacity:.82;text-decoration:underline} h3{font-size:13px;margin:14px 0 6px} .frame-row{font-family:ui-monospace,monospace;font-size:11.5px;white-space:pre-wrap;word-break:break-all} /* ===== Multiple sequence alignment ===== */ .msa-summary{font-size:12.5px;margin:8px 0} .msa-block{overflow-x:auto;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:12px; border:1px solid var(--line);border-radius:8px;padding:8px;background:var(--bg2);white-space:nowrap} .msa-row{display:flex;gap:10px;line-height:1.5} .msa-name{flex:0 0 120px;color:var(--muted);text-align:right;user-select:none;overflow:hidden;text-overflow:ellipsis} .msa-seq{letter-spacing:1px} .msa-ch{display:inline-block;width:1ch} .msa-match{color:var(--acc2)} .msa-mis{color:var(--sev-terra);font-weight:700} .msa-gap{color:var(--line)} .msa-consensus{border-top:1px solid var(--line);margin-top:4px;padding-top:4px;font-weight:700} /* ===== Application-aware auto-configure ===== */ .autoconfig-bar{display:flex;flex-wrap:wrap;align-items:end;gap:12px;margin:10px 0;padding:10px; border:1px dashed var(--acc);border-radius:9px;background:color-mix(in srgb,var(--acc) 6%,transparent)} .autoconfig-bar label{font-size:11.5px;color:var(--muted);display:flex;flex-direction:column;gap:3px} .ac-picks{margin-top:6px;display:flex;flex-direction:column;gap:3px} .ac-pick{font-size:11.5px} /* ===== Multi-antigen (polyvalent) design panel ===== */ .multi-panel{margin:10px 0;border:1px solid var(--line);border-radius:9px;padding:4px 10px;background:var(--panel2)} .multi-list{display:flex;flex-direction:column;gap:8px;margin-bottom:8px} .multi-row{display:flex;gap:8px;align-items:flex-start} .multi-row .mini{flex:0 0 130px} .multi-seq{flex:1;min-height:44px;font-size:11.5px;letter-spacing:.3px;resize:vertical; border:1px solid var(--line);border-radius:7px;padding:6px 8px;background:var(--bg2);color:var(--ink);word-break:break-all} .ok-msg{color:var(--acc2);font-size:12.5px;padding:6px 0} /* ===== Cap-fix action row (advanced chemistry QC) ===== */ .ivt-fix-row{display:flex;align-items:center;gap:9px;margin-top:7px} .ivt-fix-row button.sm{white-space:nowrap} /* ===== Protein / peptide view in the editor ===== */ .pep-view{padding:14px} .pep-head{margin-bottom:10px} .pep-cards{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px} .pep-metric{flex:1 1 120px;min-width:110px;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--panel2)} .pep-metric .n{font-size:19px;font-weight:800} .pep-metric .n span{font-size:11px;color:var(--muted);font-weight:600} .pep-metric .n.pos{color:var(--acc2)} .pep-metric .n.neg{color:var(--sev-terra)} .pep-metric .l{font-size:10.5px;color:var(--muted);margin-top:2px} .aa-legend{display:flex;flex-wrap:wrap;gap:12px;font-size:11px;color:var(--muted);margin:6px 0 8px} .aa-legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:4px;vertical-align:-1px} .aa-legend .aa-pos{background:var(--acc2)} .aa-legend .aa-neg{background:var(--err)} .aa-legend .aa-hydro{background:var(--warn)} .aa-legend .aa-polar{background:var(--hue-blue)} .aa-legend .aa-special{background:var(--acc3)} .pep-ribbon{line-height:2;word-break:break-all;background:var(--bg2);border-radius:8px;padding:10px} .pep-ribbon .aa{padding:1px 0;border-radius:2px} .pep-ribbon .aa-pos{color:var(--acc2);font-weight:700} .pep-ribbon .aa-neg{color:var(--err);font-weight:700} .pep-ribbon .aa-hydro{color:var(--warn)} .pep-ribbon .aa-polar{color:var(--hue-blue)} .pep-ribbon .aa-special{color:var(--acc3);font-weight:700} .pep-ribbon .aa-other{color:var(--muted)} /* ===== ProteinEnzymePredictionSuite ===== */ .pep-suite-launch{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)} .ps-loading{padding:14px;color:var(--muted)} .ps-summary{padding:10px 0 14px;font-size:14px} .ps-cats{display:flex;flex-direction:column;gap:8px} .ps-cat{border:1px solid var(--line);border-radius:9px;background:var(--panel2);overflow:hidden} .ps-cat summary{cursor:pointer;padding:10px 12px;font-weight:700;font-size:13px;list-style:none} .ps-cat summary::-webkit-details-marker{display:none} .ps-cat summary::before{content:"▸ ";color:var(--muted)} .ps-cat[open] summary::before{content:"▾ "} .ps-cat-body{padding:4px 12px 12px} .ps-field{margin:8px 0;padding-left:8px;border-left:2px solid var(--line)} .ps-field-name{font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.02em;margin-bottom:3px} .ps-leaf{margin:2px 0 8px} .ps-leaf-val{font-size:13px} .ps-cite{font-size:10.5px;color:var(--muted);margin-top:2px;font-style:italic} .ps-kv{border-collapse:collapse;font-size:12.5px} .ps-kv td{padding:2px 8px 2px 0;vertical-align:top} .ps-kv td:first-child{color:var(--muted);white-space:nowrap} .ps-hitlist{margin:2px 0;padding-left:16px;font-size:12px} .ps-hitlist li{margin:1px 0} /* ===== Calibration & verification — same conic-ring treatment as the Construct Health Score, plus a subtle row-reveal stagger so a long pass/fail list doesn't dump onto screen all at once ===== */ .cal-summary{display:flex;align-items:center;gap:18px;padding:15px 17px;border-radius:var(--radius-md); margin-bottom:var(--sp-4);border:1px solid var(--line);background:var(--panel2)} .cal-summary.cal-good{border-color:var(--sev-green)} .cal-summary.cal-bad{border-color:var(--sev-terra)} .cal-score{position:relative;width:64px;height:64px;border-radius:50%;display:flex;align-items:center; justify-content:center;font-size:20px;font-weight:800;line-height:1;flex:0 0 auto; background:conic-gradient(var(--gauge-c,var(--muted)) calc(var(--pct,0)*1%),var(--line) 0)} .cal-score::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--panel2)} .cal-score>*{position:relative} .cal-good .cal-score{--gauge-c:var(--sev-green);color:var(--sev-green)} .cal-bad .cal-score{--gauge-c:var(--sev-terra);color:var(--sev-terra)} .cal-score span{display:block;font-size:10px;color:var(--muted);font-weight:600} .cal-list{display:flex;flex-direction:column;gap:2px} .cal-row{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:7px;font-size:12.5px; /* Phase 8b: staggered row entrance removed (see @keyframes below). */} .cal-row:nth-child(odd){background:var(--panel2)} .cal-row:hover{background:var(--bg2)} @keyframes cal-row-in{from{opacity:1}to{opacity:1}} .cal-mark{flex:0 0 auto;width:18px;text-align:center;font-weight:800} .cal-row.ok .cal-mark{color:var(--sev-green)} .cal-row.bad .cal-mark{color:var(--sev-terra)} .cal-row.skip .cal-mark{color:var(--muted)} .cal-row.skip{opacity:.7} .cal-row.skip .cal-detail{color:var(--muted)} .cal-label{flex:1;min-width:0} .cal-detail{color:var(--sev-terra);font-size:11px;overflow-wrap:anywhere} /* ===== Multi-construct tabs ===== */ .tab-bar{display:flex;align-items:flex-end;gap:3px;padding:6px 14px 0;background:var(--panel); border-bottom:1px solid var(--line);overflow-x:auto;flex-wrap:nowrap} .tab-bar .tab{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:8px 8px 0 0; border:1px solid var(--line);border-bottom:none;background:var(--panel2);color:var(--muted); cursor:pointer;font-size:12.5px;font-weight:600;max-width:220px;white-space:nowrap;flex:0 0 auto} .tab-bar .tab.active{background:var(--bg);color:var(--ink);border-color:var(--acc);position:relative;top:1px} .tab-bar .tab-dot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:0 0 auto} .tab-bar .tab.active .tab-dot{background:var(--acc)} .tab-bar .tab-title{overflow:hidden;text-overflow:ellipsis;max-width:160px} .tab-bar .tab-x{font-size:15px;line-height:1;opacity:.6;border-radius:4px;padding:0 3px} .tab-bar .tab-x:hover{opacity:1;background:var(--panel);color:var(--sev-terra)} .tab-bar .tab-new{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px; border:1px solid var(--line);border-radius:8px;background:var(--panel2);color:var(--muted);cursor:pointer;flex:0 0 auto;margin-left:2px} .tab-bar .tab-new:hover{color:var(--acc);border-color:var(--acc)} .tab-bar .tab-new .icn{width:15px;height:15px} /* ===== Recent antigens ===== */ .recent-antigens{margin-bottom:14px;padding:9px 12px;border:var(--bw-1) solid var(--line); border-radius:var(--radius-sm);background:var(--n-bg-3)} .ra-head{display:flex;align-items:center;gap:8px;margin-bottom:9px} .ra-list{display:flex;flex-wrap:wrap;gap:8px} .ra-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 12px; border:1px solid var(--line);border-radius:9px;background:var(--panel);cursor:pointer;text-align:left;min-width:150px} .ra-item:hover{border-color:var(--acc)} .ra-name{font-weight:650;font-size:12.5px;color:var(--ink);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ra-meta{font-size:10.5px;color:var(--muted)} /* ===== Construct Health Score — the flat ring became a conic-gradient progress dial (--pct set inline by JS from the numeric score) so the score reads at a glance rather than needing the number underneath. ===== */ .health-card{display:flex;gap:18px;align-items:center;margin:4px 0 var(--sp-4);padding:15px 17px; border:1px solid var(--line);border-radius:var(--radius-md);background:var(--panel2); } /* Phase 8b: no hover shadow lift on a status card (it is not clickable). */ .hs-gauge{--pct:0;flex:0 0 auto;width:76px;height:76px;border-radius:50%;display:flex;flex-direction:column; align-items:center;justify-content:center;position:relative; background:conic-gradient(var(--gauge-c,var(--muted)) calc(var(--pct)*1%),var(--line) 0); transition:background 1s var(--ease-out)} .hs-gauge::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--panel2)} .hs-gauge.hs-good{--gauge-c:var(--sev-green)} .hs-gauge.hs-ok{--gauge-c:var(--sev-sand)} .hs-gauge.hs-bad{--gauge-c:var(--sev-terra)} .hs-num{position:relative;font-size:24px;font-weight:800;line-height:1} .hs-good .hs-num{color:var(--sev-green)} .hs-ok .hs-num{color:var(--sev-sand)} .hs-bad .hs-num{color:var(--sev-terra)} .hs-of{position:relative;font-size:10px;color:var(--muted);margin-top:1px} .hs-grade{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%; display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:var(--on-acc); box-shadow:var(--n-shadow-1)} .hs-good .hs-grade{background:var(--sev-green)} .hs-ok .hs-grade{background:var(--sev-sand)} .hs-bad .hs-grade{background:var(--sev-terra)} .hs-body{min-width:0;flex:1} .hs-title{font-weight:700;font-size:14.5px;margin-bottom:5px;letter-spacing:-.005em} .hs-ded{font-size:12px;line-height:1.6;margin-bottom:5px;overflow-wrap:anywhere} .hs-pts{color:var(--sev-terra);font-weight:700;font-size:11px} .hs-clean{font-size:12.5px;color:var(--sev-green);font-weight:600;margin-bottom:5px} /* ===== A3: guided-workflow step progress ===== */ .step-progress{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:14px} .sp-step{display:inline-flex;align-items:center;gap:7px;background:var(--panel2);color:var(--muted); border:var(--bw-1) solid var(--n-line-3);border-radius:var(--radius-sm);padding:3px 10px; font-size:var(--fs-2);font-weight:var(--fw-medium);cursor:pointer} .sp-step .sp-n{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px; border-radius:50%;background:var(--bg2);font-size:11px} .sp-step.current{border-color:var(--acc);color:var(--ink)} .sp-step.current .sp-n{background:var(--acc);color:var(--on-acc)} .sp-step.done{color:var(--acc2);border-color:var(--acc2)} .sp-step.done .sp-n{background:var(--acc2);color:var(--on-acc)} .sp-step:disabled{opacity:.45;cursor:not-allowed} .sp-arrow{color:var(--muted)} /* ===== D1: guided tour ===== */ .tour-overlay{display:none;position:fixed;inset:0;z-index:250;background:rgba(0,0,0,.55)} .tour-overlay.show{display:block} .tour-spot{position:absolute;border-radius:var(--radius-sm);box-shadow:0 0 0 9999px rgba(0,0,0,.55); border:2px solid var(--acc);transition:all .25s ease;pointer-events:none} .tour-card{position:absolute;width:300px;background:var(--panel);border:1px solid var(--line); border-radius:var(--radius-md);padding:12px 14px;box-shadow:var(--n-shadow-3);z-index:251} .tour-title{font-weight:700;font-size:14px;margin-bottom:6px;color:var(--acc)} .tour-body{font-size:12.5px;color:var(--ink);line-height:1.55} .tour-foot{display:flex;align-items:center;justify-content:space-between;margin-top:12px} .tour-count{font-size:11px;color:var(--muted)} .tour-foot button{margin-left:6px} /* ===== expanded Sequence Editor: find/replace, jump-to-position, feature editor ===== */ .ed-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:7px 10px;margin-bottom:8px; background:var(--bg2);border:1px solid var(--line);border-radius:8px} .ed-tb-group{display:inline-flex;align-items:center;gap:5px} .ed-tb-group .mini{width:140px} .ed-find-count{color:var(--muted);font-size:11px;min-width:44px} .ed-inline-label{display:inline;margin:0;color:var(--muted);font-size:11px;font-weight:600} .ed-tb-jump{margin-left:auto} .seq-edit.ed-has-match{outline:2px solid var(--acc)} /* highlight overlay: an inert, identically-metriced div sits directly behind the transparent-background textarea so find-hits / the current match / selection ranges can be painted as -style spans without touching the real value. */ .ed-edit-wrap{position:relative} .ed-highlight-overlay{position:absolute;inset:0;margin:0;color:transparent;background:transparent; overflow:auto;white-space:pre-wrap;word-break:break-all;pointer-events:none;border-color:transparent} .ed-edit-wrap textarea.seq-edit{position:relative;background:transparent;z-index:1} .ed-edit-wrap{background:var(--panel2);border-radius:8px} .eh-hit{background:rgba(90,169,255,.28);border-radius:2px} .eh-hit-current{background:var(--acc);color:var(--on-acc);border-radius:2px} .ed-caret-readout{color:var(--muted);font-size:11px;margin-top:4px} .feat-editor{margin-top:14px;border-top:1px solid var(--line);padding-top:12px} .feat-editor-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px} .feat-editor-head h3{margin:0;font-size:13px} .feat-editor-table{width:100%;border-collapse:collapse;font-size:12px} .feat-editor-table th{background:var(--panel2);color:var(--muted);text-align:left;padding:5px 6px} .feat-editor-table td{padding:3px 6px;border-bottom:1px solid var(--line)} .feat-editor-table input[type=text]{padding:4px 6px;font-size:11.5px;width:100%;min-width:60px} .feat-editor-table input[type=number]{padding:4px 6px;font-size:11.5px;width:72px} .feat-editor-table select{padding:4px 6px;font-size:11.5px} .feat-editor-table input[type=color]{width:30px;height:24px;padding:0;border:1px solid var(--line);border-radius:4px;cursor:pointer} .feat-row-invalid td{background:rgba(224,104,95,.08)} .feat-row-err{color:var(--err);font-size:10.5px} /* ===== persistent "back to guided Design workflow" control ===== */ .designer-fab{position:fixed;right:20px;bottom:20px;z-index:230;display:inline-flex;align-items:center;gap:7px; background:var(--acc);color:var(--on-acc);border:var(--bw-1) solid var(--n-line-3); border-radius:var(--radius-sm);padding:6px 12px; font-size:var(--fs-2);font-weight:var(--fw-medium);cursor:pointer;box-shadow:var(--n-shadow-2); text-decoration:none} /* Phase 8b: no lift-on-hover. Surface change only -- hover must never move a control the user is aiming at. */ .designer-fab:hover{background:var(--n-accent-tint-2);color:var(--n-accent)} .designer-fab .icn{width:16px;height:16px;flex:0 0 auto} body.rail-collapsed .designer-fab{right:20px} @media(max-width:640px){.designer-fab span:not(.icn){display:none}.designer-fab{padding:7px}} /* ===== B3: top progress bar (shown while any request is in flight) ===== */ .topbar{position:fixed;top:0;left:0;height:3px;width:100%;z-index:300; background:transparent;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .2s} .topbar.show{opacity:1} /* Phase 8b: the 3px progress bar no longer sweeps. An indeterminate animation implies progress information the app does not have; a static accent rule is an honest "busy" signal. The keyframe name is retained because the reduced-motion block below still references it. */ .topbar::before{content:"";position:absolute;height:100%;width:100%;left:0; background:var(--acc)} @keyframes tb-slide{from{left:0}to{left:0}} body.busy{cursor:progress} /* ===== B1: inline error panel with retry ===== */ .err-panel{display:flex;align-items:center;gap:10px;background:rgba(224,104,95,.10); border:1px solid var(--err);border-radius:8px;padding:10px 12px;margin:8px 0} .err-ic{color:var(--err);font-size:16px;flex:0 0 auto} .err-txt{flex:1;color:var(--ink);font-size:12.5px} /* ===== D3: empty-state coach. Phase 8b: the dotted "illustration" backdrop and the entrance animation are gone -- it is a bordered notice, which is what it actually is. ===== */ .empty-coach{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap; background:var(--n-bg-3); border:var(--bw-1) solid var(--n-line-2);border-left:3px solid var(--n-line-3); border-radius:var(--radius-sm);padding:var(--sp-3) var(--sp-4);margin:0 0 var(--sp-4)} .ec-txt{color:var(--muted);font-size:13px;line-height:1.5} .ec-btns{display:flex;gap:6px} /* ===== A1: persistent active-construct bar ===== */ .construct-bar{background:var(--panel2);border-bottom:1px solid var(--line); padding:7px 22px;font-size:12.5px;cursor:pointer;position:sticky;top:0;z-index:40} .construct-bar:hover{filter:brightness(1.05)} .cb-empty{color:var(--muted)} .cb-empty a{color:var(--acc);cursor:pointer} /* E281. The backend-unreachable banner. Fixed to the top of the VIEWPORT (not the page flow) because the condition applies to the whole app and must stay visible wherever the user has scrolled to. High z-index for the same reason: a modal that cannot talk to the server must not cover the explanation of why. */ .gl-srvdown{position:fixed;top:0;left:0;right:0;z-index:9999; background:var(--n-err,#a91f16);color:#fff;padding:10px 16px; font-size:13px;line-height:1.5;box-shadow:0 2px 8px rgba(0,0,0,.3)} .gl-srvdown code{background:rgba(255,255,255,.18);padding:1px 5px;border-radius:3px; font-family:var(--mono,ui-monospace,monospace)} .gl-srvdown .cb-act{color:#fff;font-weight:600} /* E283. The boot indicator, shown by index.html before the first API call returns and removed by app.js once the backend answers. Centred rather than a top bar: at that moment there is nothing else on screen to displace. */ .gl-booting{position:fixed;inset:0;z-index:9998;display:flex;align-items:center; justify-content:center;background:var(--bg,#0f1216);color:var(--muted,#8b95a1); font-size:14px;gap:10px;flex-direction:column} .gl-booting small{opacity:.75;max-width:44ch;text-align:center;line-height:1.5} /* E123. The banner's actions are