*{margin:0;padding:0;box-sizing:border-box} :root{ /* Compact UI scale. Rem units respect the browser's default text size. */ --type-caption:.6875rem;--type-small:.75rem;--type-body:.8125rem; --type-reading:.875rem;--type-title:1.375rem; --bg:#fafafa;--bg2:#ffffff;--bg3:#f3f4f6;--bg4:#e9eaec; --border:#e5e7eb;--border2:#d1d5db; --text:#111827;--text2:#4b5563;--text3:#667085; --accent:#6a8fbf;--accent-hover:#5078a8;--accent-light:#eff4fb; /* --accent is the brand color (logo, decorative fills). Text and filled buttons use --accent-ink: the smallest darkening of the accent that reaches WCAG AA (4.5:1) on every light surface. Recomputed per accent by _applyBrandSettings() (ui-shell.js) when an admin picks another one. */ --accent-ink:#516d91;--accent-ink-hover:#435a78;--on-accent:#fff; --green:#059669;--yellow:#d97706;--red:#dc2626;--orange:#ea580c; --green-ink:#066647;--yellow-ink:#92400e;--orange-ink:#9a3412; --mono:'JetBrains Mono','SF Mono',Menlo,ui-monospace,"Cascadia Code","Courier New",monospace; --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; --header-bg:rgba(255,255,255,0.96);--overlay-bg:rgba(255,255,255,0.99);--divider:#e5e7eb; --shadow-sm:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04); --shadow-md:0 4px 12px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.04); --shadow-lg:0 16px 48px rgba(0,0,0,.12),0 4px 8px rgba(0,0,0,.04); --r-xs:4px;--r-sm:6px;--r-md:8px;--r-lg:12px;--r-xl:16px; --chip-blue-bg:#dbeafe;--chip-blue-fg:#1d4ed8; --chip-green-bg:#dcfce7;--chip-green-fg:#166534; --chip-purple-bg:#f3e8ff;--chip-purple-fg:#6b21a8; --chip-red-bg:#fee2e2;--chip-red-fg:#991b1b; --warn-bg:#fff3cd;--warn-border:#ffc107;--warn-fg:#856404; color-scheme:light; } /* ── DARK THEME ─ real dark, not pure black: cool graphite surfaces, near-white text ── */ :root[data-theme="dark"]{ --bg:#15181d;--bg2:#1c2128;--bg3:#252b34;--bg4:#2e3540; --border:#2c333d;--border2:#3d4653; --text:#e6e8eb;--text2:#aab2bd;--text3:#8a94a1; --accent:#82a7d6;--accent-hover:#9bbae3;--accent-light:#243348; /* Dark: the (light) accent already reads on dark surfaces; filled buttons take dark text instead of white (white on #82a7d6 is 2.5:1). */ --accent-ink:var(--accent);--accent-ink-hover:var(--accent-hover);--on-accent:#15181d; --green:#3fb884;--yellow:#e0a63e;--red:#ef7168;--orange:#ef8e50; --green-ink:#65d6a1;--yellow-ink:#e8bd6a;--orange-ink:#f4a36c; --header-bg:rgba(21,24,29,0.94);--overlay-bg:rgba(21,24,29,0.98);--divider:#2c333d; --shadow-sm:0 1px 3px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.25); --shadow-md:0 4px 12px rgba(0,0,0,.45),0 2px 4px rgba(0,0,0,.3); --shadow-lg:0 16px 48px rgba(0,0,0,.55),0 4px 8px rgba(0,0,0,.3); --chip-blue-bg:#1f3352;--chip-blue-fg:#8fb8f6; --chip-green-bg:#1c3b2c;--chip-green-fg:#7dd8a8; --chip-purple-bg:#372a4d;--chip-purple-fg:#c8a8f0; --chip-red-bg:#462423;--chip-red-fg:#f0918a; --warn-bg:#332b18;--warn-border:#8a6d1a;--warn-fg:#e8c86a; color-scheme:dark; } /* Dark-mode fixes for third-party / hardcoded-light components */ :root[data-theme="dark"] .ql-toolbar.ql-snow, :root[data-theme="dark"] .ql-container.ql-snow{border-color:var(--border2);background:var(--bg2);color:var(--text)} :root[data-theme="dark"] .ql-editor{color:var(--text)} :root[data-theme="dark"] .ql-editor.ql-blank::before{color:var(--text3)} :root[data-theme="dark"] .ql-snow .ql-stroke{stroke:var(--text2)} :root[data-theme="dark"] .ql-snow .ql-fill{fill:var(--text2)} :root[data-theme="dark"] .ql-snow .ql-picker{color:var(--text2)} :root[data-theme="dark"] .ql-snow .ql-picker-options{background:var(--bg2);border-color:var(--border2)} :root[data-theme="dark"] .ql-snow .ql-tooltip{background:var(--bg2);border-color:var(--border2);color:var(--text);box-shadow:var(--shadow-md)} :root[data-theme="dark"] .ql-snow .ql-tooltip input[type=text]{background:var(--bg3);border-color:var(--border2);color:var(--text)} :root[data-theme="dark"] .ql-snow.ql-toolbar button:hover .ql-stroke, :root[data-theme="dark"] .ql-snow.ql-toolbar button.ql-active .ql-stroke{stroke:var(--accent)} :root[data-theme="dark"] .ql-snow.ql-toolbar button:hover .ql-fill, :root[data-theme="dark"] .ql-snow.ql-toolbar button.ql-active .ql-fill{fill:var(--accent)} /* Chemical structures & reaction schemes: RDKit draws near-black bonds on a transparent/white canvas. In dark mode, invert the drawing so bonds render light on the dark surface; hue-rotate(180deg) restores heteroatom colors (O red, N blue) after inversion. RDKit SVGs are identified by their xmlns:rdkit attribute (inline) or data-URI (reaction schemes / thumbs). Screen only — printed reports and vial labels stay black-on-white. */ @media screen { :root[data-theme="dark"] svg[xmlns\:rdkit], :root[data-theme="dark"] img[src^="data:image/svg+xml"], :root[data-theme="dark"] img[src^="/api/structure/svg"], :root[data-theme="dark"] img[src^="/api/svg"], :root[data-theme="dark"] #lib-struct-thumb, :root[data-theme="dark"] #browser-struct-thumb, :root[data-theme="dark"] #rs-struct-thumb, :root[data-theme="dark"] .browser-eln-thumb, :root[data-theme="dark"] .bio-exp-modal-card img, :root[data-theme="dark"] #bio-exp-tooltip .tt-struct{filter:invert(.88) hue-rotate(180deg)} /* The forced --bg3 plate would invert to a light block — keep it transparent */ :root[data-theme="dark"] .card-struct svg rect:first-child, :root[data-theme="dark"] .dp-struct svg rect:first-child, :root[data-theme="dark"] #cm-struct-preview svg rect:first-child{fill:transparent!important} } /* Reaction-table role colors: brighter variants for dark surfaces */ :root[data-theme="dark"] .rxn-row-reagent,:root[data-theme="dark"] .rxn-role-reagent,:root[data-theme="dark"] .rxn-role-reactant{color:#e3a94f} :root[data-theme="dark"] .rxn-row-catalyst,:root[data-theme="dark"] .rxn-role-catalyst{color:#b79bf2} :root[data-theme="dark"] .rxn-row-solvent,:root[data-theme="dark"] .rxn-role-solvent{color:#4ecbbd} :root[data-theme="dark"] .rxn-row-product,:root[data-theme="dark"] .rxn-role-product{color:#5fce8f} /* html needs its own overflow-x:hidden, not just body's — on iOS Safari the document's own elastic/rubber-band scroll is driven by (documentElement), so body's overflow-x:hidden alone doesn't stop it: any descendant slightly wider than the viewport (the top nav's row of tabs is the usual culprit on a phone) still lets the whole page rubber-band-scroll sideways, and — unlike vertical bounce, which snaps back — there's no affordance to swipe back to x:0, so the page just stays shifted, with the left edge (logo, first nav tabs, sidebar) scrolled out of view. */ html{overflow-x:hidden} /* body is overflow-x:clip, not hidden: with html already hidden, a hidden body becomes its own scroll container and the sticky
sticks to a body that never scrolls (the document does) — so on Home, the only page taller than the window, it scrolled away. */ :where(button,input,select,textarea){font-family:inherit} body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;min-height:100vh;overflow-x:clip;-webkit-font-smoothing:antialiased} ::selection{background:var(--accent-light);color:var(--accent-ink)} ::-webkit-scrollbar{width:6px;height:6px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--border2);border-radius:var(--r-xs)} ::-webkit-scrollbar-thumb:hover{background:var(--text3)} :focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* rows made focusable by _kbdClickableInit (ui-shell.js): draw inside, list containers clip overflow */ [data-kbd-click]:focus-visible{outline:2px solid var(--accent-ink);outline-offset:-2px} /* ── AUTH OVERLAY ─────────────────────────────────────────────── */ #auth-overlay{position:fixed;inset:0;background:var(--overlay-bg);z-index:999;display:flex;align-items:center;justify-content:center} .auth-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-xl);padding:36px 40px;width:380px;max-width:95vw;box-shadow:var(--shadow-lg)} .auth-card h1{font-size:16px;font-weight:600;letter-spacing:-.3px;margin-bottom:4px} .auth-card .subtitle{font-size:12px;color:var(--text3);margin-bottom:28px} .auth-form .form-row{margin-bottom:14px} .auth-form label{display:block;font-size:11px;color:var(--text3);margin-bottom:5px;font-weight:500} .auth-form input{width:100%;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r-sm);padding:9px 12px;color:var(--text);font-size:13px;font-family:var(--sans);outline:none;transition:border .15s,box-shadow .15s} .auth-form input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light)} .auth-error{font-size:12px;color:var(--red);margin-bottom:12px;display:none} .auth-btn{width:100%;padding:10px;background:var(--accent-ink);color:var(--on-accent);border:none;border-radius:var(--r-md);font-size:13px;font-family:var(--sans);font-weight:500;cursor:pointer;transition:background .15s,box-shadow .15s;margin-top:4px;box-shadow:var(--shadow-sm)} .auth-btn:hover{background:var(--accent-hover);box-shadow:var(--shadow-md)} .auth-logo{display:flex;align-items:center;gap:10px;margin-bottom:24px} .auth-lab-logo{display:block;max-width:100%;max-height:64px;width:auto;object-fit:contain;margin:0 0 20px} /* a logo is drawn for a light page: on the dark theme it sits on a white plate so dark ink stays readable */ :root[data-theme="dark"] .auth-lab-logo{background:#fff;padding:8px 12px;border-radius:8px;box-sizing:content-box} .auth-logo-suffix{font-size:15px;font-weight:600;letter-spacing:-.2px;color:var(--text)} #auth-network-bg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0} .auth-card{position:relative;z-index:1} .logo-img{width:22px;height:22px;object-fit:contain;border-radius:var(--r-xs);vertical-align:middle;margin-right:2px} /* ── HEADER ───────────────────────────────────────────────────── */ header{position:sticky;top:0;z-index:200;background:var(--header-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);height:56px;display:flex;align-items:stretch;padding:0 20px;gap:16px;box-shadow:var(--shadow-sm)} .logo{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:-.02em;display:flex;align-items:center;gap:8px;flex-shrink:0} .logo-badge{background:var(--accent-light);color:var(--accent-ink);font-size:9px;padding:2px 6px;border-radius:var(--r-xs);font-weight:600;letter-spacing:.02em} .logo-mark-wrap{transition:transform .4s cubic-bezier(.34,1.56,.64,1)} .logo:hover .logo-mark-wrap{transform:scale(1.12)} /* overflow-x:auto (not visible/clipped) — on a narrow screen the tab row is wider than what's left of the header once the logo and the icon group on the right take their share, so it needs its own scroll container. Without this, blocking horizontal scroll on the page itself (html/body, overflow-x:hidden — see below) leaves the tabs past whatever fits with literally no way to reach them at all. Scrollbar hidden since this reads as a toolbar, not a scrollable list — the tabs' own :active/hover state and the swipe itself are enough affordance. */ nav{display:flex;gap:2px;flex:1;align-items:center;padding:0 4px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none} nav::-webkit-scrollbar{display:none} .nav-item{display:flex;align-items:center;padding:5px 12px;border-radius:var(--r-md);border:none;font-size:13px;color:var(--text3);cursor:pointer;background:transparent;transition:color .12s,background .12s;height:36px;font-weight:500;flex-shrink:0} .nav-dot{display:inline-flex;align-items:center;justify-content:center;background:var(--red);color:#fff;font-size:9px;font-weight:700;min-width:14px;height:14px;padding:0 3px;border-radius:var(--r-sm);margin-left:5px;line-height:1} .nav-item:hover{color:var(--text2);background:var(--bg3)} .nav-item.active{color:var(--accent-ink);font-weight:600;background:var(--accent-light)} .module-locked{opacity:.5!important;pointer-events:none!important;filter:grayscale(.3)} .module-lock-icon{display:inline-flex;vertical-align:middle;margin-left:5px;flex-shrink:0} .module-lock-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--text2);background:var(--bg2);z-index:5;text-align:center;font-size:13px;font-weight:500} .user-menu{display:flex;align-items:center;gap:10px;flex-shrink:0;align-self:center} .user-badge{display:flex;align-items:center;gap:7px;padding:5px 10px;border-radius:var(--r-md);background:var(--bg3);border:1px solid var(--border);font-size:12px;color:var(--text2);cursor:pointer;position:relative;transition:background .12s,border-color .12s} .user-badge:hover{background:var(--bg4);border-color:var(--border2)} .user-badge-compact{padding:5px 6px;gap:0;background:none;border-color:transparent} .user-badge-compact:hover{background:none;border-color:transparent} .user-badge-compact:hover .user-avatar{filter:brightness(1.12)} .user-badge-compact:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px;border-radius:999px} .user-badge-compact>div:not(.user-avatar){display:none} .user-avatar{min-width:22px;height:22px;border-radius:999px;background:var(--accent-ink);color:var(--on-accent);font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center;padding:0 3px;box-sizing:border-box;letter-spacing:-.2px;overflow:hidden} .user-avatar img{width:100%;height:100%;object-fit:cover} .user-avatar svg{flex-shrink:0} .user-role{font-size:10px;color:var(--text3);font-family:var(--mono)} .user-dropdown{position:absolute;top:calc(100% + 6px);right:0;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r-lg);min-width:180px;z-index:300;display:none;overflow:hidden;box-shadow:var(--shadow-md)} .user-dropdown.open{display:block} .user-dropdown button{width:100%;padding:9px 14px;text-align:left;background:transparent;border:none;color:var(--text2);font-size:12px;font-family:var(--sans);cursor:pointer;transition:background .1s,color .1s} .user-dropdown button:hover{background:var(--bg3);color:var(--text)} .user-dropdown .dd-sep,.help-hud-body .dd-sep{height:1px;background:var(--border);margin:8px 0} /* ── NOTIFICATION CENTER ──────────────────────────────────────── */ /* Notifications — a popover under the bell (renderNotifCenter). Tone carries meaning through theme tokens, never the brand accent. */ .notif-backdrop{display:none;position:fixed;inset:0;z-index:299} .notif-backdrop.open{display:block} .notif-pop{position:fixed;top:60px;right:16px;width:392px;max-width:calc(100vw - 16px);max-height:min(600px,calc(100vh - 80px));display:none;flex-direction:column;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);z-index:300;overflow:hidden} .notif-pop.open{display:flex;animation:notif-in .14s ease-out} @keyframes notif-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} .notif-head{display:flex;align-items:center;gap:10px;padding:12px 14px 10px;border-bottom:1px solid var(--border)} .notif-head-title{font-size:14px;font-weight:600;color:var(--text)} .notif-filter{display:flex;gap:2px;padding:2px;background:var(--bg3);border-radius:var(--r-sm)} .notif-filter button{border:none;background:none;padding:3px 9px;font-size:12px;color:var(--text2);border-radius:var(--r-xs);cursor:pointer;display:inline-flex;align-items:center;gap:5px} .notif-filter button.active{background:var(--bg2);color:var(--text);box-shadow:var(--shadow-sm);font-weight:500} .notif-count:empty{display:none} .notif-count{font-size:10px;font-weight:600;min-width:16px;padding:0 4px;height:16px;line-height:16px;text-align:center;border-radius:8px;background:var(--accent-ink);color:var(--on-accent)} .notif-markall{margin-left:auto;background:none;border:none;padding:2px 0;font-size:12px;color:var(--accent-ink);cursor:pointer} .notif-markall:hover{text-decoration:underline} .notif-list{overflow-y:auto;padding:4px 0 6px} .notif-section{padding:10px 16px 4px;font-size:11px;font-weight:600;color:var(--text3)} .notif-item{position:relative;display:flex;align-items:flex-start;gap:11px;padding:10px 14px 10px 16px;cursor:pointer;transition:background .12s} .notif-item:hover,.notif-item:focus-visible{background:var(--bg3);outline:none} .notif-icon{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px} .notif-icon svg{width:14px;height:14px} .notif-icon.tone-action{background:color-mix(in srgb,var(--accent-ink) 14%,transparent);color:var(--accent-ink)} .notif-icon.tone-alert{background:color-mix(in srgb,var(--red) 14%,transparent);color:var(--red)} .notif-icon.tone-warn{background:color-mix(in srgb,var(--orange) 16%,transparent);color:var(--orange-ink)} .notif-icon.tone-ok{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green-ink)} .notif-icon.tone-task,.notif-icon.tone-neutral{background:var(--bg3);color:var(--text2)} .notif-item:hover .notif-icon.tone-task,.notif-item:hover .notif-icon.tone-neutral{background:var(--bg4)} .notif-body{flex:1;min-width:0} .notif-title{font-size:13px;line-height:1.4;color:var(--text2)} .notif-item.unread .notif-title{color:var(--text);font-weight:600} .notif-meta{font-size:12px;line-height:1.4;color:var(--text3);margin-top:1px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .notif-actions{display:flex;gap:6px;margin-top:8px} .notif-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0;padding-top:2px} .notif-when{font-size:11px;color:var(--text3);white-space:nowrap} .notif-dot{width:16px;height:16px;padding:0;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%} .notif-dot::before{content:"";width:8px;height:8px;border-radius:50%;background:transparent;border:1.5px solid transparent;transition:background .12s,border-color .12s} .notif-item.unread .notif-dot::before{background:var(--accent-ink)} .notif-item:not(.unread):hover .notif-dot::before{border-color:var(--text3)} .notif-dot:hover{background:var(--bg4)} .notif-more{display:block;width:100%;background:none;border:none;border-top:1px solid var(--border);padding:10px;font-size:12px;color:var(--accent-ink);cursor:pointer;margin-top:4px} .notif-empty{padding:36px 24px 40px;text-align:center} .notif-empty-icon{display:inline-flex;width:40px;height:40px;border-radius:50%;align-items:center;justify-content:center;background:var(--bg3);color:var(--text3);margin-bottom:10px} .notif-empty-icon svg{width:18px;height:18px} .notif-empty-title{font-size:14px;font-weight:600;color:var(--text)} .notif-empty-sub{font-size:12px;color:var(--text3);margin-top:4px} .notif-empty-sub a{color:var(--accent-ink)} /* ── LAYOUT ───────────────────────────────────────────────────── */ .page{display:none} .page.active{display:contents} #page-home.active{display:block;padding:32px 24px;max-width:1100px;margin:0 auto;width:100%} /* Stock-ticker-style scrolling strip for active announcements, bleeding edge-to-edge above #page-home's own padding so it reads as sitting right under the header, not as another card in the content column. Track holds the item list duplicated twice back-to-back so the loop has no visible seam. Keeps scrolling on hover by design — pausing made the strip feel broken/stuck, and every item is short enough to read mid-scroll anyway. */ /* #page-home is a centered max-width:1100px column, so plain negative margins only break out to that column's own edges — the "break out of a centered container" trick (100vw + 50% left offset via position:relative) is what actually reaches the real browser window edges either side. */ .home-ticker{position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw;overflow:hidden;background:var(--bg2);border-bottom:1px solid var(--border);margin-top:-32px;margin-bottom:20px;white-space:nowrap} .home-ticker-track{display:inline-flex;align-items:center;animation:home-ticker-scroll 15s linear infinite} .home-ticker-item{display:inline-flex;align-items:center;gap:6px;padding:7px 28px;font-size:12px;color:var(--text2);flex-shrink:0} .home-ticker-item strong{color:var(--text);font-weight:600} .home-ticker-item .home-ticker-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0} @media(prefers-reduced-motion:reduce){.home-ticker-track{animation:none}} @keyframes home-ticker-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* Docking job progress bar while a ligand is actively being docked — real progress_current/progress_total only advances between whole ligands, so it sits frozen at the same width for however long a single Vina run takes (minutes). This sweeping segment is a deliberately fake "it's alive" cue for that in-between time, not a real progress indicator. */ .comp-dock-indeterminate{position:absolute;top:0;bottom:0;left:0;width:35%;background:var(--accent);border-radius:3px;animation:comp-dock-sweep 1.4s ease-in-out infinite} @keyframes comp-dock-sweep{0%{left:-35%}100%{left:100%}} /* Docking sidebar (grouped preps/jobs) + detail pane — .cv-dock-row is the shared selectable-card look for both a prep header and a job row so selection highlighting (--active) reads the same regardless of which kind of row it's on. */ .cv-dock-row{transition:border-color .12s,background .12s} .cv-dock-row--active{border-color:var(--accent) !important;background:color-mix(in srgb,var(--accent) 10%,var(--bg2)) !important} .cv-dock-group{margin-bottom:14px} .cv-dock-detail-empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text3);font-size:13px;text-align:center} .home-hero{margin-bottom:28px} .home-hero h2{font-size:var(--ui-title);font-weight:600;letter-spacing:-.02em;margin-bottom:4px} .home-hero p{font-size:13px;color:var(--text3)} .home-hero p a{color:var(--text2);cursor:pointer;text-decoration:none} .home-hero p a:hover{color:var(--accent-ink)} .home-hero p strong{font-family:var(--mono);font-weight:600} .home-section{margin-bottom:32px} .home-section:last-child{margin-bottom:0} .home-section-title{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text3);margin-bottom:12px;display:flex;align-items:center;gap:6px} .home-relations-icon{display:inline-flex;color:var(--text3);cursor:pointer;transition:color .15s} .home-relations-icon:hover{color:var(--accent-ink)} .home-relations-icon.static{cursor:default;pointer-events:none} .home-relations-icon svg{width:13px;height:13px;flex-shrink:0} .home-empty-note{font-size:12px;color:var(--text3);padding:10px 2px} .home-title-count:empty{display:none} .home-title-count{font-size:10px;font-weight:600;letter-spacing:0;min-width:18px;height:17px;padding:0 5px;border-radius:9px;background:var(--bg3);color:var(--text2);display:inline-flex;align-items:center;justify-content:center} .home-title-link{margin-left:auto;font-size:11px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--text3);cursor:pointer;text-decoration:none} .home-title-link:hover{color:var(--accent-ink)} /* My Queue on Home (_mqHomeRowHtml) */ .mq-sec{display:flex;align-items:center;gap:6px;margin:10px 0 2px;font-size:11px;font-weight:600;color:var(--text3)} .mq-sec:first-child{margin-top:0} .mq-sec.overdue{color:var(--red)} .mq-sec.missed{color:var(--red)} .mq-sec-n{font-weight:500;opacity:.8} .mq-sec-toggle{cursor:pointer;user-select:none} .mq-chev{display:inline-flex;transition:transform .15s}.mq-chev svg{width:10px;height:10px} .mq-chev.open{transform:rotate(90deg)} .mq-row{display:flex;align-items:flex-start;gap:10px;padding:6px 8px;margin:0 -8px;border-radius:var(--r-sm);transition:background .12s} .mq-row:hover{background:var(--bg3)} .mq-row .mq-hover{opacity:0;transition:opacity .12s} .mq-row:hover .mq-hover,.mq-row:focus-within .mq-hover{opacity:1} .mq-row .mq-hover.danger:hover{color:var(--red);background:color-mix(in srgb,var(--red) 10%,transparent)} @media(hover:none){.mq-row .mq-hover{opacity:1}} .mq-row-link{cursor:pointer} .mq-check{width:16px;height:16px;margin-top:1px;flex-shrink:0;border-radius:50%;border:1.5px solid var(--border2);background:var(--bg2);color:transparent;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;transition:border-color .12s,background .12s,color .12s} .mq-check svg{width:10px;height:10px} .mq-check:hover{border-color:var(--green-ink);color:var(--green-ink)} .mq-check.done{background:var(--green);border-color:var(--green-ink);color:#fff} .mq-kind-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin:6px 4.5px 0} .mq-cal-error .mq-kind-dot{background:var(--orange)} .mq-main{flex:1;min-width:0;cursor:pointer} .mq-main[role=button]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)} .mq-title{font-size:13px;color:var(--text);line-height:1.35;display:flex;align-items:center;gap:6px;min-width:0} .mq-row.done .mq-title{color:var(--text3);text-decoration:line-through} .mq-row-deadline.is-finished{opacity:.5} .mq-row-deadline.is-finished .mq-title{text-decoration:line-through} .mq-row-deadline.is-finished:hover{opacity:.9} .mq-prio{display:inline-flex;color:var(--accent-ink)}.mq-prio svg{width:12px;height:12px} .mq-doing{font-size:10px;font-weight:600;padding:1px 6px;border-radius:var(--r-xs);background:color-mix(in srgb,var(--accent-ink) 12%,transparent);color:var(--accent-ink)} .mq-missed{font-size:10px;font-weight:600;padding:1px 6px;border-radius:var(--r-xs);background:color-mix(in srgb,var(--red) 11%,transparent);color:var(--red)} .mq-meta{font-size:var(--ui-caption);color:var(--text3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mq-meta .overdue{color:var(--red);font-weight:500} /* Home's columns are a third of the page: let the detail line wrap instead of cutting off its actions (Reschedule, subtasks) */ #home-queue-tasks-row .mq-meta{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.45} .mq-meta .today{color:var(--text2);font-weight:500} .mq-add{position:relative;display:flex;align-items:center;gap:10px;padding:6px 8px;margin:6px -8px 0;border-radius:var(--r-sm)} .mq-add-plus{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex-shrink:0;padding:0;border:none;border-radius:var(--r-sm);background:none;color:var(--text3);cursor:pointer;transition:background .12s,color .12s}.mq-add-plus svg{width:14px;height:14px;pointer-events:none} .mq-add-plus.ready{color:var(--accent-ink)} .mq-add-plus:not(:disabled):hover{background:var(--accent-light)} .mq-add-plus:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px} .mq-add-plus:disabled{cursor:default} .mq-add-input{flex:1;border:none;background:none;outline:none;font-size:13px;color:var(--text);padding:0;min-width:0} .mq-add-input::placeholder{color:var(--text3)} .mq-add:focus-within{background:var(--bg3)} /* Optional due date, all the way to the right of the row — a calendar icon at rest (an empty native date input still shows dd/mm/yyyy-shaped placeholder text, which read as a pre-filled "today"), swapping to the picked date's text once one is set (click it again to reopen the picker), plus a ✕ button to clear it. */ .mq-add-date-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:var(--r-sm);color:var(--text3);cursor:pointer;flex-shrink:0;transition:background .12s,color .12s} .mq-add-date-wrap:hover{background:var(--bg3);color:var(--text)} .mq-add-date-wrap.has-date{width:auto;padding:0 6px;color:var(--accent-ink)} .mq-add-date-icon{display:inline-flex;pointer-events:none} .mq-add-date-wrap.has-date .mq-add-date-icon{display:none} .mq-add-date-label{display:none;font-size:11px;font-weight:600;white-space:nowrap;pointer-events:none} .mq-add-date-wrap.has-date .mq-add-date-label{display:inline} /* The real control, stacked on the icon/label (later in source order = on top) and fully covering it so any click there actually clicks this — the browser's own picker then opens exactly like a normal date input. */ .mq-add-date-hidden{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:none;background:none;opacity:0;cursor:pointer} .mq-add-date-clear{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;border:none;background:none;border-radius:var(--r-sm);color:var(--text3);cursor:pointer;flex-shrink:0;transition:background .12s,color .12s} .mq-add-date-clear:hover{background:var(--bg3);color:var(--red)} .mq-add-date-clear[hidden]{display:none} .mq-add-chip{display:inline-flex;align-items:center;gap:4px;height:22px;min-width:22px;justify-content:center;padding:0 4px;border:none;background:none;border-radius:var(--r-sm);color:var(--text3);cursor:pointer;flex-shrink:0;font:inherit;font-size:11px;font-weight:600;transition:background .12s,color .12s} .mq-add-chip:hover{background:var(--bg3);color:var(--text)} .mq-add-chip[hidden]{display:none} .mq-add-chip.has-value{color:var(--accent-ink)} .mq-add:not(.has-title) .mq-add-chip,.mq-add:not(.has-title) .mq-add-date-wrap,.mq-add:not(.has-title) .mq-add-time,.mq-add:not(.has-title) .mq-add-date-clear{display:none} .mq-add-chip-ic{display:inline-flex;pointer-events:none}.mq-add-chip-ic svg{width:14px;height:14px} .mq-add-chip-label{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mq-add-chip-label:empty{display:none} .mq-add-pop{position:fixed;z-index:3000;min-width:200px;max-width:280px;max-height:280px;overflow:auto;padding:4px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:0 8px 24px color-mix(in srgb,var(--text) 18%,transparent)} .mq-add-pop-item{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border:none;background:none;border-radius:var(--r-sm);color:var(--text);font:inherit;font-size:13px;text-align:left;cursor:pointer} .mq-add-pop-item:hover{background:var(--bg3)} .mq-add-pop-item.active{color:var(--accent-ink);font-weight:600} .mq-add-pop-item svg{flex-shrink:0} /* Team rota on Home (loadHomeNextTasks) — same row language as My Queue */ .rota-row.mine{background:color-mix(in srgb,var(--accent-ink) 7%,transparent)} .rota-row.mine:hover{background:color-mix(in srgb,var(--accent-ink) 11%,transparent)} .rota-row>.home-task-icon-btn{margin-top:1px} .rota-you{font-size:10px;font-weight:600;padding:0 6px;border-radius:var(--r-xs);background:var(--accent-ink);color:var(--on-accent)} .rota-who{display:flex;align-items:center;gap:5px} .rota-who .pj-av{flex-shrink:0} .rota-stack{display:inline-flex}.rota-stack .pj-av+.pj-av{margin-left:-5px;box-shadow:0 0 0 1.5px var(--bg)} .rota-out{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;padding:7px 10px;margin:0 0 10px;border-radius:var(--r-sm);background:var(--bg3);font-size:12px;color:var(--text2)} .rota-out-label{font-size:11px;font-weight:600;color:var(--text3)} .rota-out-person{display:inline-flex;align-items:center;gap:5px} .rota-out-why{font-size:var(--ui-caption);color:var(--text3)} .rota-next{display:flex;align-items:center;gap:7px;margin-top:10px;padding-top:9px;border-top:1px solid var(--border);font-size:12px;color:var(--text2)} .rota-next svg{width:13px;height:13px;color:var(--text3);flex-shrink:0} #home-banners{margin-bottom:20px} .home-2col{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start;margin-bottom:32px} /* Without min-width:0, a 1fr grid track still won't shrink below its item's min-content width — the heatmap's own horizontal-scroll container doesn't matter if the column itself refuses to go below "wide enough for the whole year unscrolled", which is exactly what was stretching this column past its intended 50% and squeezing Recent activity into the rest. */ .home-2col .home-section{margin-bottom:0;min-width:0} .home-2col.single{grid-template-columns:1fr} @media(max-width:700px){.home-2col{grid-template-columns:1fr}} /* Home's bottom row: activity graph + figures, recent activity, people online — three equal columns that share one body height, so none of them is left with a blank gap below it. */ .home-3col{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;align-items:start;margin-bottom:32px} .home-3col .home-section{margin-bottom:0;min-width:0} .home-3col .home-section-title{height:24px;margin-bottom:8px} @media(max-width:900px){.home-3col{grid-template-columns:1fr;gap:24px}} .home-people-count{font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--accent-ink);background:color-mix(in srgb,var(--accent-ink) 14%,transparent);border-radius:999px;padding:1px 8px} .home-people-list{display:flex;flex-direction:column} .home-person{display:flex;align-items:center;gap:10px;padding:4px 0;border-bottom:1px solid var(--border);min-width:0} .home-person-text{min-width:0;flex:1} .home-person-name{font-size:var(--ui-body);font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .home-person-name small{font-weight:400;color:var(--text3);margin-left:4px} .home-person-st{font-size:var(--ui-caption);color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .home-person-pause{font-size:10px;padding:1px 6px;border-radius:var(--r-xs);background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red);flex-shrink:0;white-space:nowrap} .home-person-msg{flex-shrink:0;color:var(--text2)} @media (hover:hover){.home-person-msg{opacity:0;transition:opacity var(--mo-fast)}.home-person:hover .home-person-msg,.home-person-msg:focus-visible{opacity:1}} .home-mini-av[role=button],.home-person[role=button]{cursor:pointer} .home-person[role=button]:focus-visible{outline:none;box-shadow:0 0 0 2px var(--accent);border-radius:var(--r-sm)} .person-pop{min-width:220px} .person-pop-head{display:flex;align-items:center;gap:10px;padding:6px 8px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;min-width:0} .person-pop-text{display:flex;flex-direction:column;min-width:0} .person-pop-text b{font-size:var(--ui-body);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .person-pop-text b small{font-weight:400;color:var(--text3)} .person-pop-text span{font-size:var(--ui-caption);color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .chat-popup.person-pop .person-pop-acts{display:flex;gap:4px;padding:0 2px} .chat-popup.person-pop .person-pop-acts button{width:auto;min-width:40px;min-height:40px;justify-content:center;padding:0;color:var(--text2)} .home-away{display:flex;align-items:center;gap:8px;padding-top:9px;margin-top:6px;border-top:1px solid var(--border);font-size:var(--ui-caption);color:var(--text2);min-width:0} .home-away-lbl{font-weight:600;color:var(--text3);flex-shrink:0} .home-away-stack{display:flex;flex-shrink:0} .home-away-stack .pj-av{filter:grayscale(.85);opacity:.8;box-shadow:0 0 0 2px var(--bg)} .home-away-stack .pj-av+.pj-av{margin-left:-6px} .home-away-tx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .home-away-tx b{font-weight:600;color:var(--text)} /* more than three connected: the rest as small avatars on the right, name + status on hover/focus */ .home-more{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid var(--border)} .home-more-lbl{font-size:var(--ui-caption);font-weight:600;color:var(--text3);flex-shrink:0} .home-mini{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end;min-width:0} .home-mini-av{position:relative;display:inline-flex;border-radius:50%;outline:none} .home-mini-av:focus-visible{box-shadow:0 0 0 2px var(--accent)} .home-mini-tip{display:none;position:absolute;bottom:calc(100% + 8px);right:-6px;z-index:20;white-space:nowrap;background:var(--bg);color:var(--text);border:1px solid var(--border2);border-radius:var(--r-sm);box-shadow:var(--shadow-md);padding:6px 9px;font-size:var(--ui-caption);line-height:1.35;text-align:left} .home-mini-tip b{display:block;font-weight:600} .home-mini-tip i{display:block;font-style:normal;color:var(--text2)} .home-mini-av:hover .home-mini-tip,.home-mini-av:focus .home-mini-tip{display:block} .home-mini-more{font-size:var(--ui-caption);color:var(--text3);align-self:center;padding:0 2px} .home-next-item{display:flex;align-items:center;gap:6px;padding:2px 0;font-size:12px} .home-next-item .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0} .home-next-group>summary{list-style:none;cursor:pointer} .home-next-group>summary::-webkit-details-marker{display:none} .home-next-group>summary .home-next-item:hover{opacity:.8} .mq-status-chip{font-family:var(--sans);font-size:11px;font-weight:500;text-transform:none;color:var(--text3); background:var(--bg3);border-radius:var(--r-xs);padding:1px 6px;flex-shrink:0} .home-task-icon-btn{display:flex;align-items:center;justify-content:center;width:19px;height:19px;padding:0;border:none;background:none;border-radius:var(--r-sm);color:var(--text3);cursor:pointer;transition:background .15s,color .15s;flex-shrink:0} .home-task-icon-btn:hover{background:var(--bg3);color:var(--text)} .home-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .home-grid.home-grid-small{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px} .home-grid.home-grid-big{grid-template-columns:repeat(2,minmax(0,1fr))} @media(max-width:1100px){ .home-grid.home-grid-small{grid-template-columns:repeat(4,minmax(0,1fr))} } @media(max-width:900px){ .home-grid,.home-grid.home-grid-small,.home-grid.home-grid-big{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:560px){ .home-grid,.home-grid.home-grid-small,.home-grid.home-grid-big{grid-template-columns:minmax(0,1fr)} } /* Small: 6 modules in one row — same icon-left structure as Medium/Big, just narrower. No room for the stat number, so that's dropped; title and description wrap instead of ellipsis-truncating. Description is always exactly 2 lines — clamped so it never grows past that, and a min-height reserving that same 2-line space so every card lines up even when its text is short enough to only need one. */ .home-grid-small .home-card{padding:12px;gap:8px;min-width:0} .home-grid-small .home-card-stat{display:none} .home-grid-small .home-card-icon{width:32px;height:32px} .home-grid-small .home-card-title{white-space:normal;font-size:13px;overflow-wrap:anywhere;overflow:visible;text-overflow:clip} .home-grid-small .home-card-desc{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:11px;line-height:1.35;min-height:calc(1.35em * 2)} .home-links-row{display:flex;flex-wrap:wrap;justify-content:center;gap:36px} .home-link-btn{display:flex;flex-direction:column;align-items:center;gap:6px;width:72px;padding:8px 4px;border-radius:var(--r-md);text-decoration:none;color:var(--text2);transition:background .15s,transform .15s} .home-link-btn:hover{background:var(--bg2);transform:translateY(-2px)} .home-link-btn img{width:18px;height:18px;object-fit:contain;filter:grayscale(1);opacity:.6;transition:filter .15s,opacity .15s} .home-link-btn:hover img{filter:grayscale(0);opacity:1} .home-link-fallback{width:18px;height:18px;border-radius:var(--r-xs);background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:var(--text3)} .hl-preset-btn{display:flex;flex-direction:column;align-items:center;gap:5px;width:66px;padding:8px 4px;border:1px solid var(--border2);border-radius:var(--r-md);background:var(--bg2);color:var(--text2);font-size:11px;cursor:pointer;transition:border-color .15s,background .15s} .hl-preset-btn:hover{border-color:var(--accent);background:var(--bg2)} .hl-preset-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px} .home-link-btn span{font-size:11px;text-align:center;overflow-wrap:break-word;white-space:normal;line-height:1.25;max-width:100%} .home-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px;cursor:pointer;transition:border-color .18s,box-shadow .18s,transform .18s;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;box-shadow:var(--shadow-sm);animation:card-in .42s cubic-bezier(.22,1,.36,1) backwards;min-width:0} .home-card-main{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1} .home-card-stat{text-align:right;flex-shrink:0} .home-card:nth-child(1){animation-delay:.04s}.home-card:nth-child(2){animation-delay:.09s}.home-card:nth-child(3){animation-delay:.14s}.home-card:nth-child(4){animation-delay:.19s}.home-card:nth-child(5){animation-delay:.24s}.home-card:nth-child(6){animation-delay:.29s}.home-card:nth-child(7){animation-delay:.34s} @keyframes card-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}} .home-card:hover{border-color:color-mix(in srgb,var(--card-color,var(--border2)) 45%,var(--border));box-shadow:var(--shadow-md),0 0 0 1px color-mix(in srgb,var(--card-color,transparent) 12%,transparent);transform:translateY(-3px)} .home-card-icon{width:38px;height:38px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s,color .2s,transform .22s cubic-bezier(.34,1.56,.64,1)} .home-card:hover .home-card-icon{background:var(--card-bg,var(--bg3))!important;color:var(--card-color,var(--text2))!important;transform:scale(1.1)} .home-card:hover .home-card-icon svg{animation:none} /* Chemistry: flask rocks + liquid rises + bubbles */ .ico-bubble1,.ico-bubble2,.ico-bubble3{transform-box:fill-box;transform-origin:center} .home-card[data-tab="eln"]:hover .home-card-icon svg{animation:flask-rock .75s cubic-bezier(.36,.07,.19,.97) forwards;transform-box:fill-box;transform-origin:center bottom} .home-card[data-tab="eln"]:hover .ico-flask-fill{animation:flask-rise .45s ease .05s forwards} .home-card[data-tab="eln"]:hover .ico-bubble1{animation:bubble-up 1.4s ease 0s infinite} .home-card[data-tab="eln"]:hover .ico-bubble2{animation:bubble-up 1.4s ease .45s infinite} .home-card[data-tab="eln"]:hover .ico-bubble3{animation:bubble-up 1.4s ease .9s infinite} /* Biology: DNA rotation handled by _initDnaRotation() RAF loop */ /* Lab: sun/moon day-night cycle behind the building (home card only; nav icon is static) */ /* Library: loupe scans shelf in loop */ .ico-loupe{opacity:0;transition:opacity .2s ease} .ico-openbook{opacity:0} .home-card[data-tab="library"]:hover .ico-loupe{opacity:1;animation:loupe-circle 2s linear infinite} @keyframes loupe-circle{0%{transform:translate(4px,0)}25%{transform:translate(0,4px)}50%{transform:translate(-4px,0)}75%{transform:translate(0,-4px)}100%{transform:translate(4px,0)}} /* Workspace: panels settle in sequence; the icon toggle also gates this motion. */ .ico-workspace-main,.ico-workspace-top,.ico-workspace-bottom{transform-box:fill-box;transform-origin:center} #home-grid:not(.home-icons-static) .home-card[data-tab="projects"]:hover .ico-workspace-main{animation:workspace-panel-settle .6s ease both} #home-grid:not(.home-icons-static) .home-card[data-tab="projects"]:hover .ico-workspace-top{animation:workspace-panel-settle .6s ease .08s both} #home-grid:not(.home-icons-static) .home-card[data-tab="projects"]:hover .ico-workspace-bottom{animation:workspace-panel-settle .6s ease .16s both} @keyframes workspace-panel-settle{0%,100%{transform:translateY(0);fill-opacity:.08}45%{transform:translateY(-1px);fill-opacity:.22}} @media(prefers-reduced-motion:reduce){#home-grid:not(.home-icons-static) .home-card[data-tab="projects"]:hover .home-card-icon svg rect{animation:none}} /* Lab building: sun and moon swing in an arc over the roof (pivot below the building), taking turns (loop) */ .ico-lab-sun,.ico-lab-moon{opacity:0;transform-box:view-box;transform-origin:9px 16.5px;transform:rotate(75deg)} .home-card[data-tab="equipment"]:hover .ico-lab-sun{animation:lab-sun-cycle 5s linear infinite} .home-card[data-tab="equipment"]:hover .ico-lab-moon{animation:lab-moon-cycle 5s linear infinite} @keyframes lab-sun-cycle{0%{transform:rotate(75deg);opacity:0}12%{transform:rotate(45deg);opacity:1}38%{transform:rotate(-45deg);opacity:1}50%{transform:rotate(-75deg);opacity:0}100%{transform:rotate(-75deg);opacity:0}} @keyframes lab-moon-cycle{0%,50%{transform:rotate(75deg);opacity:0}62%{transform:rotate(45deg);opacity:1}88%{transform:rotate(-45deg);opacity:1}100%{transform:rotate(-75deg);opacity:0}} /* Lab easter egg: 30s hover → a UFO flies in, abducts the "Lab" title (and a cow) */ .home-card-header{position:relative} .lab-ufo-scene{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:12} .ufo-craft{position:absolute;left:0;top:-8px;animation:ufo-flyover-header 4.2s cubic-bezier(.4,0,.2,1) forwards} .ufo-light{animation:ufo-lights-blink .5s steps(1) infinite} .ufo-light:nth-child(2){animation-delay:.12s} .ufo-light:nth-child(3){animation-delay:.24s} .ufo-beam{position:absolute;left:44px;top:4px;width:34px;height:28px;background:linear-gradient(to bottom,rgba(125,211,252,.6),rgba(125,211,252,0));clip-path:polygon(38% 0,62% 0,100% 100%,0% 100%);opacity:0;transition:opacity .3s ease} .lab-ufo-scene.beaming .ufo-beam{opacity:1;animation:ufo-beam-pulse 1s ease-in-out infinite} .ufo-cow{position:absolute;left:56px;top:24px;font-size:12px;opacity:0;line-height:1} .lab-ufo-scene.beaming .ufo-cow{animation:ufo-cow-abduct .9s ease-in forwards} @keyframes ufo-flyover-header{ 0%{transform:translate(-24px,6px) scale(.6);opacity:0} 10%{opacity:1} 30%{transform:translate(30px,0) scale(.9)} 50%,75%{transform:translate(48px,-2px) scale(1)} 88%{opacity:1} 100%{transform:translate(100px,8px) scale(.6);opacity:0} } @keyframes ufo-beam-pulse{0%,100%{opacity:.7}50%{opacity:1}} @keyframes ufo-lights-blink{0%,49%{opacity:1}50%,100%{opacity:.25}} @keyframes ufo-cow-abduct{ 0%{opacity:0;transform:translateY(0) scale(.6) rotate(0deg)} 20%{opacity:1;transform:translateY(-2px) scale(.8) rotate(-10deg)} 100%{opacity:0;transform:translateY(-26px) scale(.15) rotate(20deg)} } .home-card-title.ufo-abducted{animation:title-abduct 1s ease-in forwards} .home-card-title.ufo-restored{animation:title-restore .5s cubic-bezier(.34,1.56,.64,1) forwards} @keyframes title-abduct{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-22px) scale(.7)}} @keyframes title-restore{0%{opacity:0;transform:translateY(-10px) scale(.7)}60%{opacity:1;transform:translateY(2px) scale(1.08)}100%{opacity:1;transform:translateY(0) scale(1)}} @media(prefers-reduced-motion:reduce){.lab-ufo-scene{display:none}.home-card-title.ufo-abducted,.home-card-title.ufo-restored{animation:none!important}} @keyframes flask-rock{0%{transform:rotate(0)}25%{transform:rotate(-10deg)}60%{transform:rotate(8deg)}80%{transform:rotate(-4deg)}100%{transform:rotate(0)}} @keyframes flask-rise{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}} @keyframes bubble-up{0%{opacity:0;transform:translateY(0)}15%{opacity:.9}75%{opacity:.7;transform:translateY(-5px)}100%{opacity:0;transform:translateY(-8px)}} /* DNA rotation is handled by _initDnaRotation() in app.js (RAF, path computation) */ @keyframes chart-march{to{stroke-dashoffset:-6.5}} /* Orders tab — shopping cart wheels */ .ico-wheel-l,.ico-wheel-r{transform-box:fill-box;transform-origin:center} .home-card[data-tab="orders"]:hover .ico-wheel-l{animation:wheel-spin .45s linear infinite} .home-card[data-tab="orders"]:hover .ico-wheel-r{animation:wheel-spin .45s linear infinite} @keyframes wheel-spin{to{transform:rotate(360deg)}} /* Chemistry easter egg: long hover → flask disappears, leaves a sad face */ .flask-heating svg{animation:flask-shake-mild .3s ease-in-out infinite!important;transform-box:fill-box;transform-origin:center bottom} @keyframes flask-shake-mild{0%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}70%{transform:rotate(9deg)}} .flask-kaboom svg{animation:flask-vanish .35s ease-in forwards!important;transform-box:fill-box;transform-origin:center} @keyframes flask-vanish{0%{transform:scale(1);opacity:1}40%{transform:scale(1.1);opacity:.6}100%{transform:scale(0);opacity:0}} .home-card-icon{position:relative;overflow:visible} /* A rotated ":(" reads as an actual face (colon → two eyes side by side, parenthesis → a frown underneath) instead of flat sideways punctuation. The rotation lives on the inner span (shrink-wrapped to the glyphs, so it pivots around its own visual center) — the outer div just centers that span in the icon box, untransformed. */ .flask-sadface{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;color:var(--red)} .flask-sadface span{display:inline-block;font-size:15px;font-weight:700;line-height:1;white-space:nowrap;animation:sadface-pop .35s ease-out forwards} @keyframes sadface-pop{0%{transform:rotate(90deg) scale(0);opacity:0}60%{transform:rotate(90deg) scale(1.2);opacity:1}100%{transform:rotate(90deg) scale(1);opacity:1}} /* Neutral (no fire-colored) explosion flash right as the flask vanishes */ .flask-boom{position:absolute;inset:-6px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.95) 0%,var(--text3) 55%,transparent 100%);animation:boom-expand .5s ease-out forwards;pointer-events:none;z-index:10} .flask-boom::after{content:'';position:absolute;inset:-8px;border-radius:50%;border:3px solid var(--text3);opacity:.6;animation:boom-shockwave .5s ease-out .03s forwards} @keyframes boom-expand{0%{transform:scale(0);opacity:1}60%{opacity:.85}100%{transform:scale(3);opacity:0}} @keyframes boom-shockwave{0%{transform:scale(.3);opacity:.7}100%{transform:scale(4);opacity:0}} .home-card-title{font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .home-card-desc{font-size:12px;color:var(--text3);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .home-stat-main{font-size:20px;font-weight:600;font-family:var(--mono);letter-spacing:-.04em;line-height:1;color:var(--text)} .home-stat-sub{font-size:11px;color:var(--text3);margin-top:3px} .home-card[data-tab="computational"]:hover .ico-comp-bar{opacity:.85;animation:ico-comp-bar-slide 1s ease-in-out infinite} @keyframes ico-comp-bar-slide{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}} @media(prefers-reduced-motion:reduce){.home-card[data-tab="computational"]:hover .ico-comp-bar{animation:none;opacity:.85}} /* Admin → Site → Home page → Icon behavior: "Animate module icons on hover" off. DNA rotation is skipped at the JS level (_initDnaRotation's animate arg); Workspace panel motion is gated above. CSS keyframes are neutralized the same way prefers-reduced-motion already handles Computational above. */ #home-grid.home-icons-static .home-card[data-tab="eln"]:hover .home-card-icon svg, #home-grid.home-icons-static .home-card[data-tab="eln"]:hover .ico-flask-fill, #home-grid.home-icons-static .home-card[data-tab="eln"]:hover .ico-bubble1, #home-grid.home-icons-static .home-card[data-tab="eln"]:hover .ico-bubble2, #home-grid.home-icons-static .home-card[data-tab="eln"]:hover .ico-bubble3, #home-grid.home-icons-static .home-card[data-tab="equipment"]:hover .ico-lab-sun, #home-grid.home-icons-static .home-card[data-tab="equipment"]:hover .ico-lab-moon, #home-grid.home-icons-static .home-card[data-tab="library"]:hover .ico-loupe, #home-grid.home-icons-static .home-card[data-tab="computational"]:hover .ico-comp-bar{animation:none!important} #page-library.active{display:flex;flex-direction:column;height:calc(100vh - 56px);overflow:hidden} /* Flexbox, same as every other sidebar+content pane (ELN/Bio/Projects/ Equipment/Reagents/Orders) — this used to be a CSS Grid with a second, separately-toggled .sidebar-collapsed class on this container to swap grid-template-columns, kept in sync with #library-sidebar's own .collapsed by hand in toggleLibrarySidebar()/initLibrarySidebar(). Two elements' classes staying frame-perfectly in sync (plus the aside's own width transition animating independently of the grid's instant column snap) was the actual cause behind "sidebar sometimes collapses wrong, especially in Library" — a flex child's width transition alone, like every other sidebar already uses, has nothing else to fall out of sync with. */ #lib-compounds-inner{display:flex;flex:1;overflow:hidden;min-height:0} #main-compounds{flex:1;min-width:0} #lib-boxes-inner{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden} /* Boxes gets its own filter sidebar (search/project/location/sort) — same flex sidebar+content shape as bio-results (#lib-bio-results-inner); Plates keeps the old simple centered/padded layout, now on itself since the padding moved off the shared #lib-boxes-inner wrapper. */ .storage-shell{display:flex;min-height:0;flex:1;overflow:hidden} #lib-bio-results-inner{display:flex;flex:1;overflow:hidden;min-height:0} #lib-charts-inner{display:flex;flex:1;overflow:hidden;min-height:0} #page-eln.active,#page-bio.active,#page-projects.active,#page-orders.active,#page-admin.active{display:flex;flex-direction:column;min-height:calc(100vh - 56px);padding:0;max-width:none} #page-equipment.active,#page-computational.active{display:flex;flex-direction:column;height:calc(100vh - 56px);padding:0;max-width:none;overflow:hidden} #page-orders.active{height:calc(100vh - 56px)} #page-eln.active,#page-bio.active,#page-projects.active,#page-admin.active{height:calc(100vh - 56px)} #admin-content{flex:1;overflow-y:auto;padding:24px;width:100%;box-sizing:border-box} /* Shared shell for every left filter/list sidebar that isn't .eln-list (Equipment, Maintenance, Team, Dissemination, Projects) -- same base layout and header padding repeated 5x byte-for-byte before this; each module still owns its own collapsed-state hide rule below since which children get hidden differs per module. */ .side-panel{width:260px;height:100%;flex-shrink:0;border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:visible;transition:width .2s ease} .side-panel.collapsed{width:0;border-right:none} .side-panel-header{padding:14px 14px 10px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;flex-shrink:0} #maint-sidebar.collapsed #maint-sidebar-header>:not(.sidebar-toggle-btn),#maint-sidebar.collapsed>:not(#maint-sidebar-header){display:none!important} #team-sidebar.collapsed #team-sidebar-header>:not(.sidebar-toggle-btn),#team-sidebar.collapsed>:not(#team-sidebar-header){display:none!important} #diss-sidebar.collapsed #diss-sidebar-header>:not(.sidebar-toggle-btn),#diss-sidebar.collapsed>:not(#diss-sidebar-header){display:none!important} .equip-list-row{display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer;border-bottom:1px solid var(--border);transition:background .1s;font-size:13px;color:var(--text2)} .equip-list-row:hover{background:var(--bg3)} .equip-list-row.active{background:var(--accent-light);color:var(--accent-ink);font-weight:600} .equip-list-row.active .equip-status{box-shadow:0 0 0 2px var(--accent-light)} .equip-list-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500} .equip-list-meta{font-size:11px;color:var(--text3);white-space:nowrap} .equip-list-group-header{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);padding:10px 14px 4px;margin-top:4px} .equip-list-group-header:first-child{margin-top:0} #equip-detail-panel{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0} .bk-provider-btn:hover{border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--accent-light)} .integration-card:hover{border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--accent-light)} #equip-detail-bar{justify-content:space-between;flex-shrink:0} #equip-cards-inner{padding:16px} .network-equipment-card{display:flex;flex-direction:column;gap:5px;width:100%;padding:13px 14px;text-align:left;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg2);color:var(--text);font:inherit;cursor:pointer;transition:border-color .12s,box-shadow .12s} .network-equipment-card:hover,.network-equipment-card:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light);outline:none} .network-equipment-head{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:var(--ui-section)} .network-equipment-lab{font-size:var(--ui-label);font-weight:600;color:var(--accent-ink)} .network-equipment-meta,.network-equipment-desc{font-size:var(--ui-caption);color:var(--text3)} .network-equipment-desc{color:var(--text2);line-height:1.45} .network-section-title{font-size:var(--ui-section);font-weight:650;margin-bottom:5px} .network-bookings{border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg2);padding:10px 14px;margin-bottom:10px} .network-booking-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--border)} .network-booking-row>div{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;font-size:var(--ui-body)} .network-booking-row span{font-size:var(--ui-caption);color:var(--text3)} .network-busy{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:32px;padding:7px 9px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg3);font-size:var(--ui-caption);color:var(--text2);margin-bottom:8px} .network-busy strong{font-size:var(--ui-caption)} .network-free{color:var(--green-ink)} .org-limit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} @media(max-width:820px){.network-booking-row{padding:10px 0}.network-equipment-card{padding:14px}.network-bookings{padding:10px 12px}.org-limit-grid{grid-template-columns:1fr}} .subtab-strip{display:flex;align-items:center;gap:2px;padding:8px 14px;min-height:48px;box-sizing:border-box;border-bottom:1px solid var(--border);background:var(--bg2);flex-shrink:0} /* Work/resources own the old views without retaining duplicate module bars. */ #page-resources.active{display:flex;flex-direction:column;height:calc(100vh - 56px);padding:0;max-width:none;overflow:hidden} .workspace-host{display:flex;flex:1;min-height:0;min-width:0;overflow:hidden} .workspace-host>div{min-height:0;min-width:0;flex:1} .workspace-tabs{gap:5px;overflow-x:auto;white-space:nowrap} .workspace-tabs>*{flex-shrink:0} .workspace-title{padding-right:14px;margin-right:5px;border-right:1px solid var(--border);border-bottom:none;margin-bottom:0;padding-bottom:0} #projects-host #projects-workspace{width:100%} .dashboard-info-card{cursor:pointer} #pj-dashboard-queue .dashboard-work-card{border-left:3px solid var(--work-accent,var(--accent))} #pj-dash-kanban .proj-task-col-body{max-height:clamp(300px,55vh,600px)} .dashboard-card-label{font-size:10px;font-weight:600;color:var(--text3)} .dashboard-card-kind{display:flex;align-items:center;gap:5px;margin-bottom:5px} .dashboard-card-meta{font-size:11px;color:var(--text3);margin-top:4px} .dashboard-card-head{display:flex;align-items:flex-start;gap:6px} .dashboard-card-head .proj-task-title{flex:1} .dashboard-card-actions{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px} .dashboard-card-head .dashboard-card-actions{margin-top:0;flex-wrap:nowrap} .dashboard-card-actions:empty{display:none} .dashboard-new-menu{position:relative} .dashboard-new-menu summary{list-style:none;cursor:pointer} .dashboard-new-menu summary::-webkit-details-marker{display:none} .dashboard-new-options{position:absolute;right:0;top:100%;display:flex;flex-direction:column;min-width:150px;padding:5px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--shadow-sm);z-index:30} .dashboard-new-options button{text-align:left} .dashboard-calendar-notice{font-size:11px;color:var(--text3);margin:8px 0} .pj-calendar-absence-toggle{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text3)} .pj-calendar-absences{border-top:1px solid var(--border);margin-top:5px;padding-top:3px} .pj-calendar-absence{font-size:10px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pj-cal-bar{flex-wrap:wrap} /* Sub-navigation system: .subtab (pill, default) + variants .subtab--tab (underline tabs in Chem/Bio sidebars) and .subtab--row (full-width sidebar rows in Reagents/Orders). */ .subtab{padding:5px 14px;border-radius:var(--r-md);font-size:12px;color:var(--text3);cursor:pointer;border:none;background:transparent;transition:all .12s;font-weight:500} .subtab:hover{color:var(--text2);background:var(--bg3)} .subtab.active{color:var(--accent-ink);font-weight:600;background:var(--accent-light)} .subtab--tab{flex:1;padding:6px 4px;font-size:11px;border-radius:0;border-bottom:2px solid transparent;margin-bottom:-1px} .subtab--tab:hover{background:transparent} .subtab--tab.active{background:transparent;border-bottom-color:var(--accent)} .subtab--row{display:block;width:100%;text-align:left;padding:7px 14px;font-size:13px;color:var(--text2);border-radius:0;white-space:nowrap} /* ── SIDEBAR ──────────────────────────────────────────────────── */ /* Background lives on each sidebar's own class/id below, not here — this bare-tag rule used to carry it too, which meant only the sidebars that happen to be an