User:Gibcus/common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* ============================================================
   BioMicro Center Wiki Wrapper — CSS-only
   For: MediaWiki Vector (legacy) skin
   ============================================================ */

/* ── Base & Reset ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* Universal sans-serif — covers every element MW might leave in a serif/system font */
body.bmc-active, body.bmc-active * { font-family: 'Helvetica Neue', Arial, sans-serif !important; }
body.bmc-active code, body.bmc-active pre, body.bmc-active kbd,
body.bmc-active tt, body.bmc-active samp { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace !important; }

body, html {
  font-family: 'Helvetica Neue', Arial, sans-serif !important;
  color: #1a1a1a !important;
  background: #f4f4f4 !important;
  line-height: 1.6 !important;
  font-size: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
}

a { color: #750014 !important; text-decoration: none !important; }
a:hover { text-decoration: underline !important; color: #5c0010 !important; }

/* ── Contact topbar (CSS pseudo-element, decorative) ─────────── */
/* Shows contact info as a red strip above the header */
#mw-page-base {
  background: #750014 !important;
  height: 32px !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 200 !important;
}

#mw-page-base::after {
  content: "biomicro@mit.edu  ·  617-715-4533  ·  Building 68-322";
  display: block;
  text-align: right;
  color: rgba(255,255,255,0.9);
  font-size: 0.72rem;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  padding: 7px 28px;
  letter-spacing: 0.02em;
}

/* ── Header (#mw-head) ──────────────────────────────────────── */
#mw-head {
  background: #fff !important;
  border-bottom: 1px solid #e0e0e0 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07) !important;
  height: 60px !important;
  top: 32px !important; /* sit below the red topbar */
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 150 !important;
}

#mw-head-base {
  height: 92px !important; /* 32px topbar + 60px header */
  background: #fff !important;
}

/* Page tabs (Read / Edit / History) */
#left-navigation {
  margin-left: 0 !important;
}
#left-navigation li a,
#right-navigation li a {
  font-family: 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 0.83rem !important;
  font-weight: 500 !important;
  color: #555 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 6px 12px !important;
  transition: background 0.15s, color 0.15s !important;
}
#left-navigation li.selected a,
#left-navigation li a:hover,
#right-navigation li a:hover {
  background: #f5f5f5 !important;
  color: #750014 !important;
  border: none !important;
}

/* Search box in header */
#p-search {
  margin-top: 14px !important;
}
#searchInput {
  border: 1px solid #e0e0e0 !important;
  border-radius: 4px !important;
  padding: 5px 10px !important;
  font-size: 0.83rem !important;
  font-family: 'Helvetica Neue', Arial, sans-serif !important;
  color: #333 !important;
  width: 180px !important;
  outline: none !important;
  transition: border-color 0.15s !important;
  background: #fff !important;
}
#searchInput:focus { border-color: #750014 !important; }
#searchButton, #mw-searchButton {
  background: #750014 !important;
  border: none !important;
  border-radius: 4px !important;
  color: #fff !important;
  font-size: 0.83rem !important;
  padding: 5px 10px !important;
  cursor: pointer !important;
  margin-left: 4px !important;
}

/* Personal tools (login/logout) */
#p-personal li a {
  font-size: 0.8rem !important;
  color: #666 !important;
  font-family: 'Helvetica Neue', Arial, sans-serif !important;
}
#p-personal li a:hover { color: #750014 !important; }

/* ── Logo & Sidebar container (#mw-navigation) ──────────────── */
#mw-navigation {
  background: #fff !important;
  border-right: 1px solid #e8e8e8 !important;
  top: 92px !important; /* below topbar + header */
  position: fixed !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 180px !important;
  overflow-y: auto !important;
  z-index: 100 !important;
}

/* Logo area */
#p-logo {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 20px 16px 16px !important;
  border-bottom: 1px solid #e8e8e8 !important;
}

/* Hide the actual logo image; replace with CSS text badge */
#p-logo a {
  background-image: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  height: auto !important;
  width: auto !important;
  float: none !important;
}

#p-logo a::before {
  content: "BMC";
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  background: #750014;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: 4px;
  letter-spacing: -0.5px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

#p-logo a::after {
  content: "MIT BioMicro Center";
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: #1a1a1a;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.3;
  letter-spacing: -0.1px;
}

/* ── Sidebar navigation portlets (#mw-panel) ─────────────────── */
#mw-panel {
  position: static !important;
  width: auto !important;
  float: none !important;
  padding: 12px 0 !important;
  background: transparent !important;
}

.portlet,
.mw-portlet {
  margin: 0 !important;
  padding: 0 0 8px !important;
  border: none !important;
  background: transparent !important;
}

/* Portlet headings */
.portlet h3,
.mw-portlet-heading,
div.portlet h3 {
  font-family: 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #999 !important;
  padding: 10px 16px 4px !important;
  margin: 0 !important;
  border: none !important;
  background: none !important;
}

/* Portlet links */
.portlet li,
.mw-portlet-body li {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  border: none !important;
}
.portlet li a,
.mw-portlet-body li a {
  display: block !important;
  padding: 5px 16px !important;
  font-size: 0.82rem !important;
  font-family: 'Helvetica Neue', Arial, sans-serif !important;
  color: #444 !important;
  border-radius: 4px !important;
  margin: 0 6px !important;
  transition: background 0.12s, color 0.12s !important;
  text-decoration: none !important;
}
.portlet li a:hover,
.mw-portlet-body li a:hover {
  background: #f0e8ea !important;
  color: #750014 !important;
  text-decoration: none !important;
}

/* ── Main content area (#content) ───────────────────────────── */
#content,
#mw-content-wrapper {
  margin-left: 180px !important; /* match sidebar width */
  margin-top: 92px !important;   /* topbar 32 + header 60 */
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  background: #fff !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  float: none !important;
  min-height: calc(100vh - 92px) !important;
}

/* Hide MediaWiki "From bmcwiki..." subtitle */
#siteSub,
#contentSub { display: none !important; }

/* ── Page Hero: style #firstHeading as the about.html hero ───── */
#firstHeading,
.mw-first-heading {
  background: linear-gradient(135deg, #750014 0%, #5c0010 100%) !important;
  color: #fff !important;
  font-family: 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 1.9rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px !important;
  padding: 36px 40px 32px !important;
  margin: 0 !important;
  border: none !important;
  width: 100% !important;
  display: block !important;
}

/* Breadcrumb "Home ›" before the title */
#firstHeading::before {
  content: "Home  ›";
  display: block;
  font-size: 0.78rem;
  font-weight: 400;
  color: rgba(255,255,255,0.75);
  margin-bottom: 8px;
  letter-spacing: 0;
}

/* ── Body content area ──────────────────────────────────────── */
#bodyContent {
  padding: 36px 40px 60px !important;
  max-width: 860px !important;
  background: #fff !important;
}

/* ── Typography ─────────────────────────────────────────────── */
.mw-parser-output {
  font-family: 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
  color: #333 !important;
}

.mw-parser-output h2 {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid #750014 !important;
  border-left: none !important;
  border-top: none !important;
  border-right: none !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 40px 0 16px !important;
  letter-spacing: -0.2px !important;
  scroll-margin-top: 100px !important;
}
.mw-parser-output h2:first-child { margin-top: 0 !important; }

.mw-parser-output h3 {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
  margin: 24px 0 8px !important;
}

.mw-parser-output h4 {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  margin: 16px 0 6px !important;
  letter-spacing: -0.1px !important;
}

.mw-parser-output p {
  margin-bottom: 14px !important;
  color: #333 !important;
}

.mw-parser-output ul,
.mw-parser-output ol {
  margin: 0 0 14px 22px !important;
  color: #333 !important;
}
.mw-parser-output li { margin-bottom: 4px !important; }

/* ── TOC (Table of Contents) ────────────────────────────────── */
#toc, .toc {
  background: #f9f9f9 !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 8px !important;
  padding: 18px 20px !important;
  display: inline-block !important;
  min-width: 200px !important;
  font-size: 0.82rem !important;
  float: none !important;
  margin: 0 0 28px !important;
}
.toctitle h2,
#toc .toctitle h2 {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #999 !important;
  margin-bottom: 10px !important;
  border: none !important;
  background: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}
#toc ul, .toc ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
#toc ul li, .toc ul li { margin: 0 0 2px !important; }
#toc ul li a, .toc ul li a {
  font-size: 0.82rem !important;
  color: #444 !important;
  padding: 3px 8px !important;
  display: block !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  transition: background 0.12s, color 0.12s !important;
}
#toc ul li a:hover, .toc ul li a:hover {
  background: #f0e8ea !important;
  color: #750014 !important;
  text-decoration: none !important;
}
/* Sub-items */
#toc ul ul li a, .toc ul ul li a {
  padding-left: 18px !important;
  font-size: 0.78rem !important;
  color: #666 !important;
}

/* ── Edit section links ──────────────────────────────────────── */
.mw-editsection { display: inline !important; }
.mw-editsection a {
  font-size: 0.72rem !important;
  color: #999 !important;
  margin-left: 8px !important;
}
.mw-editsection a:hover { color: #750014 !important; }
.mw-editsection-bracket { color: #ddd !important; }

/* ── Tables ─────────────────────────────────────────────────── */
/* Scoped to .wikitable only — layout tables (no class) handled separately below */

.wikitable {
  border-collapse: collapse !important;
  width: 100% !important;
  margin: 1em 0 !important;
  font-size: 0.875rem !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
  border: none !important;
  border-radius: 6px !important;
  border-spacing: 0 !important;  
  overflow: hidden !important;
  background: #fff !important;
  table-layout: auto !important;
}
.wikitable th {
  background: #750014 !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  padding: 13px 18px !important;
  text-align: left !important;
  border: none !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  line-height: 1.4 !important;
}
.wikitable td {
  padding: 12px 18px !important;
  border: none !important;
  vertical-align: top !important;
  color: #222 !important;
  font-size: 0.875rem !important;
  text-align: left !important;
  line-height: 1.5 !important;
  background: #fff !important;
  overflow-wrap: break-word !important;
}
/* Row separator — excluded from rowspan cells so lines don't cut through them */
.wikitable td:not([rowspan]) {
  border-bottom: 1px solid #e0e0e0 !important;
}
/* Row separator */
.wikitable tr:last-child td { border-bottom: none !important; }
/* Section-description rows (colspan td used as sub-headers in Pricing tables) */
.wikitable td[colspan] {
  background: #f5f5f5 !important;
  color: #444 !important;
  font-size: 0.82rem !important;
  text-align: left !important;
  line-height: 1.5 !important;
}
/* Links inside table cells */
.wikitable td a { color: #750014 !important; }
.wikitable td a:hover { color: #750014 !important; text-decoration: underline !important; }

/* Images inside table cells */
.wikitable td img {
  max-width: 160px !important;
  height: auto !important;
  display: block !important;
  margin: 6px 0 8px !important;
}

/* Paragraphs inside table cells */
.wikitable td p {
  margin: 0 0 6px !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  color: #222 !important;
}
.wikitable td p:last-child { margin-bottom: 0 !important; }

/* ── Code ───────────────────────────────────────────────────── */
.mw-parser-output code,
.mw-parser-output pre,
.mw-parser-output tt {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace !important;
  background: #f4f4f4 !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 4px !important;
  font-size: 0.85rem !important;
}
.mw-parser-output code,
.mw-parser-output tt { padding: 1px 5px !important; }
.mw-parser-output pre { padding: 12px 16px !important; overflow-x: auto !important; }

/* ── Component classes (wiki editors add these to markup) ────── */

.service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 20px 0 28px;
}
.service-card {
  background: #f9f9f9;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 20px 22px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.service-card:hover { border-color: #c8a0a8; box-shadow: 0 2px 10px rgba(117,0,20,0.07); }
.service-card h4 { font-size: 0.88rem !important; font-weight: 700 !important; color: #1a1a1a !important; margin-bottom: 6px !important; }
.service-card p { font-size: 0.82rem !important; color: #555 !important; margin: 0 !important; line-height: 1.5 !important; }

.staff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.staff-card { background: #f9f9f9; border: 1px solid #e8e8e8; border-radius: 8px; padding: 16px 18px; }
.staff-card .staff-name { font-size: 0.88rem; font-weight: 700; color: #1a1a1a; display: block; }
.staff-card .staff-role { font-size: 0.78rem; color: #666; margin-top: 3px; line-height: 1.4; display: block; }
.staff-card.director { grid-column: 1 / -1; background: #fdf5f6; border-color: #d4a0a8; display: flex; align-items: center; gap: 18px; }
.director-badge { width: 44px; height: 44px; background: #750014; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 1rem; flex-shrink: 0; }
.staff-card.director .staff-name { font-size: 1rem !important; }
.staff-card.director .staff-role { font-size: 0.82rem !important; color: #444 !important; font-weight: 500; }

.pub-list { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.pub-list li { padding: 14px 0 !important; border-bottom: 1px solid #f0f0f0 !important; font-size: 0.85rem !important; }
.pub-list li:last-child { border-bottom: none !important; }
.pub-list .pub-lab { font-weight: 700; color: #1a1a1a; display: block; }
.pub-list .pub-desc { color: #444; margin-top: 3px; line-height: 1.5; display: block; }
.pub-list .pub-cite { display: inline-block; margin-top: 5px; font-size: 0.75rem; background: #f0f0f0; color: #555; padding: 2px 8px; border-radius: 10px; }

.affil-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 18px 0 24px; }
.affil-card { background: #f9f9f9; border: 1px solid #e8e8e8; border-radius: 8px; padding: 16px 18px; }
.affil-card .affil-name { font-size: 0.85rem; font-weight: 700; color: #1a1a1a; display: block; }
.affil-card .affil-rep { font-size: 0.78rem; color: #666; margin-top: 4px; display: block; }

.note { background: #fdf6f0; border-left: 3px solid #e07b39; padding: 10px 14px; border-radius: 0 6px 6px 0; font-size: 0.82rem; color: #555; margin: 12px 0 18px; }
.note strong { color: #1a1a1a; }
.note.note-info { background: #f0f6ff; border-left-color: #3b7dd8; }

.contact-block { background: #f9f9f9; border: 1px solid #e8e8e8; border-radius: 8px; padding: 22px 24px; display: flex; gap: 40px; flex-wrap: wrap; font-size: 0.85rem; }
.contact-item { display: flex; flex-direction: column; gap: 3px; }
.contact-item .label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #999; }
.contact-item .value { color: #1a1a1a; font-weight: 500; }
.contact-item a { color: #750014 !important; }

/* ── Footer ─────────────────────────────────────────────────── */
#footer {
  background: #1a1a1a !important;
  color: #aaa !important;
  font-size: 0.82rem !important;
  display: flex !important;
  gap: 32px !important;
  padding: 40px 24px 0 !important;
  margin-top: 48px !important;
  border-top: 3px solid #750014 !important;
}
#footer .bmc-footer-col { flex: 1 1 0; min-width: 0; }
#footer h4 { font-size: 0.75rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: #fff !important; margin: 0 0 12px !important; border: none !important; background: none !important; padding: 0 !important; box-shadow: none !important; }
#footer ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
#footer ul li { margin-bottom: 6px !important; padding: 0 !important; }
#footer a { color: #aaa !important; text-decoration: none !important; }
#footer a:hover { color: #fff !important; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 860px) {
  #mw-navigation {
    position: static !important;
    width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid #e8e8e8 !important;
  }
  #content, #mw-content-wrapper {
    margin-left: 0 !important;
    margin-top: 0 !important;
  }
  #footer { margin-left: 0 !important; }
  .service-grid, .staff-grid, .affil-grid { grid-template-columns: 1fr !important; }
  .contact-block { flex-direction: column !important; gap: 16px !important; }
}

/* ── Hide original MW chrome once the BMC wrapper is injected ── */
/* common.js adds .bmc-active to <body> after injecting #bmc-wrapper,
   so this only fires on view pages, leaving edit/special pages intact.
   The child selector hides ALL original MW elements regardless of skin
   version (Vector legacy, Vector 2022, etc.) without needing to list
   every possible ID.                                                    */
body.bmc-active > *:not(#bmc-wrapper):not(script):not(style) {
  display: none !important;
}

/* ── BMC Shell (injected by common.js) ─────────────────────── */

#bmc-wrapper {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: #1a1a1a;
  background: #fff;
  line-height: 1.6;
}

/* Topbar */
.bmc-topbar { background: #750014; color: rgba(255,255,255,0.9); font-size: 0.75rem; padding: 6px 0; text-align: right; }
.bmc-topbar .inner { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.bmc-topbar a { color: rgba(255,255,255,0.85) !important; text-decoration: none !important; }
.bmc-topbar a:hover { color: #fff !important; text-decoration: none !important; }
.bmc-topbar span { margin: 0 6px; opacity: 0.5; }

/* Header */
.bmc-header { background: #fff; border-bottom: 1px solid #e0e0e0; position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 4px rgba(0,0,0,0.07); }
.bmc-header-inner { max-width: 1140px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; height: 68px; }
.bmc-header-right { display: flex; align-items: center; gap: 16px; }

/* Logo */
.bmc-logo { display: flex !important; align-items: center !important; text-decoration: none !important; }
.bmc-logo-img { height: 56px !important; width: auto !important; display: block !important; }

/* Nav */
.bmc-nav { display: flex; align-items: center; }
.bmc-nav > ul { list-style: none !important; display: flex !important; gap: 2px; margin: 0 !important; padding: 0 !important; }
.bmc-nav > ul > li { position: relative; }
.bmc-nav > ul > li > a { display: block !important; padding: 8px 14px !important; font-size: 0.85rem !important; font-weight: 500 !important; color: #333 !important; border-radius: 4px !important; white-space: nowrap; transition: background 0.15s, color 0.15s; text-decoration: none !important; background: transparent !important; border: none !important; }
.bmc-nav > ul > li > a:hover { background: #f5f5f5 !important; color: #750014 !important; text-decoration: none !important; }
.bmc-nav > ul > li.bmc-active > a { background: transparent !important; color: #750014 !important; text-decoration: none !important; }
.bmc-nav > ul > li.bmc-active > a:hover { background: #f5f5f5 !important; }

/* Dropdown */
.bmc-dropdown { position: relative; }
.bmc-dropdown > a::after { content: ' ▾'; font-size: 0.65rem; opacity: 0.6; }
.bmc-dropdown-menu { display: none; position: absolute; top: calc(100% + 4px); left: 0; background: #fff; border: 1px solid #e0e0e0; border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); min-width: 200px; padding: 6px 0; z-index: 200; }
.bmc-dropdown-menu::before { content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 8px; background: transparent; }
.bmc-dropdown:hover .bmc-dropdown-menu { display: block; }
.bmc-dropdown-menu a { display: block !important; padding: 8px 18px !important; font-size: 0.83rem !important; color: #333 !important; white-space: nowrap; text-decoration: none !important; background: transparent !important; transition: background 0.12s; }
.bmc-dropdown-menu a:hover { background: #faf0f0 !important; color: #750014 !important; text-decoration: none !important; }
.bmc-divider { border-top: 1px solid #eee; margin: 4px 0; }
.bmc-group-label { padding: 6px 18px 2px; font-size: 0.7rem; font-weight: 600; color: #999; text-transform: uppercase; letter-spacing: 0.05em; }

/* Logged-in username display */
.bmc-user-info {
  font-size: 0.8rem;
  color: #555;
  font-weight: 500;
  white-space: nowrap;
  padding-left: 12px;
  border-left: 1px solid #e0e0e0;
  margin-left: 4px;
}

/* Search form */
.bmc-search-form { display: flex; align-items: center; gap: 4px; }
.bmc-search-form input[type="search"] { border: 1px solid #e0e0e0; border-radius: 4px; padding: 5px 10px; font-size: 0.83rem; font-family: 'Helvetica Neue', Arial, sans-serif; color: #333; width: 180px; outline: none; background: #fff; }
.bmc-search-form input[type="search"]:focus { border-color: #750014; }
.bmc-search-form button { background: #750014; border: none; border-radius: 4px; color: #fff; font-size: 0.85rem; padding: 5px 10px; cursor: pointer; }
.bmc-search-form button:hover { background: #5c0010; }

/* Page hero */
.bmc-page-hero { background: linear-gradient(135deg, #750014 0%, #5c0010 100%); color: #fff; padding: 40px 0 36px; }
.bmc-home .bmc-page-hero { padding: 14px 0; }
.bmc-page-hero .inner { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.bmc-breadcrumb { font-size: 0.78rem; margin-bottom: 10px; opacity: 0.75; }
.bmc-breadcrumb a { color: #fff !important; text-decoration: none !important; }
.bmc-breadcrumb .sep { margin: 0 6px; }
.bmc-page-hero h1 { font-size: 2rem !important; font-weight: 700 !important; letter-spacing: -0.5px !important; color: #fff !important; margin: 0 !important; border: none !important; background: none !important; padding: 0 !important; box-shadow: none !important; }
.bmc-hero-links {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  margin: 0 !important;
  overflow-x: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255,255,255,0.35) transparent !important;
  padding-bottom: 2px !important;
}
.bmc-hero-links::-webkit-scrollbar { height: 4px !important; }
.bmc-hero-links::-webkit-scrollbar-track { background: transparent !important; }
.bmc-hero-links::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.35) !important; border-radius: 2px !important; }
.bmc-hero-link { color: #fff !important; background: rgba(255,255,255,0.15) !important; border: 1px solid rgba(255,255,255,0.38) !important; border-radius: 16px !important; padding: 5px 12px !important; font-size: 0.72rem !important; font-weight: 500 !important; text-decoration: none !important; transition: background 0.18s ease, border-color 0.18s ease !important; white-space: nowrap !important; flex: 0 0 auto !important; }
.bmc-hero-link:hover { background: rgba(255,255,255,0.28) !important; border-color: rgba(255,255,255,0.65) !important; text-decoration: none !important; }

/* Page layout */
.bmc-page-layout { max-width: 1140px; margin: 0 auto; padding: 40px 24px 80px; display: grid; grid-template-columns: 220px 1fr; gap: 40px; }
.bmc-home .bmc-page-layout { padding-top: 20px !important; }

/* Sidebar */
.bmc-sidebar { position: sticky; top: 84px; align-self: start; }
.bmc-toc { background: #f9f9f9; border: 1px solid #e8e8e8; border-radius: 8px; padding: 20px; }
.bmc-toc h3 { font-size: 0.78rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: #999 !important; margin-bottom: 12px !important; border: none !important; background: none !important; padding: 0 !important; box-shadow: none !important; }
.bmc-toc ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.bmc-toc ul li { margin-bottom: 2px !important; }
.bmc-toc ul li a { font-size: 0.82rem !important; color: #444 !important; padding: 4px 8px !important; display: block !important; border-radius: 4px !important; text-decoration: none !important; transition: background 0.12s, color 0.12s; }
.bmc-toc ul li a:hover { background: #f0e8ea !important; color: #750014 !important; text-decoration: none !important; }
.bmc-toc ul li.bmc-sub a { padding-left: 20px !important; color: #666 !important; font-size: 0.78rem !important; }

/* Content */
.bmc-content { min-width: 0; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.9rem; line-height: 1.6; color: #333; }
.bmc-content h2 { font-size: 1.35rem !important; font-weight: 700 !important; color: #1a1a1a !important; padding-bottom: 10px !important; border-bottom: 2px solid #750014 !important; border-left: none !important; border-top: none !important; border-right: none !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; margin: 48px 0 18px !important; letter-spacing: -0.2px !important; scroll-margin-top: 88px !important; }
.bmc-content h2:first-child { margin-top: 0 !important; }
.bmc-content h3 { font-size: 1rem !important; font-weight: 600 !important; color: #1a1a1a !important; margin: 28px 0 10px !important; scroll-margin-top: 88px !important; }
.bmc-content p { margin-bottom: 14px; font-size: 0.9rem; color: #333; }
.bmc-content p:last-child { margin-bottom: 0; }
.bmc-content ul, .bmc-content ol { margin: 0 0 14px 22px; color: #333; }
.bmc-content li { margin-bottom: 4px; }

/* Edit bar — shown to logged-in users at top of content area */
.bmc-edit-bar { display: flex !important; gap: 12px !important; align-items: center !important; }
.bmc-edit-bar a { font-size: 0.78rem !important; color: #750014 !important; text-decoration: none !important; font-weight: 500 !important; }
.bmc-edit-bar a:hover { text-decoration: underline !important; }

/* Responsive (bmc shell) */
@media (max-width: 860px) {
  .bmc-page-layout { grid-template-columns: 1fr; }
  .bmc-sidebar { position: static; }
  #footer { flex-wrap: wrap; }
  #footer .bmc-footer-col { flex: 1 1 45%; }
}
@media (max-width: 580px) {
  #footer .bmc-footer-col { flex: 1 1 100%; }
  .bmc-nav > ul { display: none !important; }
  .bmc-page-hero h1 { font-size: 1.5rem !important; }
}

/* ── Content overrides: clean up main-page legacy styling ─── */

/* Hide the BMC header/logo sticker images (JS handles this by src; CSS is a fallback) */
img[src*="BMC_Header"],
img[src*="bmc_logo_square"],
img[src*="Bmc_logo"] {
  display: none !important;
}

/* Keep header background even if inline style is present */
.wikitable th[style*="background"] { background: #750014 !important; }

/* ── Layout tables (non-wikitable): clean up legacy styling ──── */
/* The wiki uses plain tables (no .wikitable) for service grids and
   column layouts. Keep them as standard HTML tables — do NOT flex —
   but replace the legacy black borders with subtle card styling.      */

/* Outer layout table: remove legacy table-level border/background */
.bmc-content .mw-parser-output > table:not(.wikitable):not(.navbox):not(.infobox) {
  border: none !important;
  background: transparent !important;
  width: 100% !important;
  max-width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 6px !important;
  margin-bottom: 24px !important;
}

/* Layout cells with inline border (service grid cards) */
.bmc-content .mw-parser-output > table:not(.wikitable) td[style*="border"] {
  border: 1px solid #e8e8e8 !important;
  border-radius: 6px !important;
  padding: 18px 20px !important;
  vertical-align: top !important;
  background: #ffffff !important;
  transition: background 0.18s ease !important;
}

/* Section-header cells (Assisted Services / Walkup / Informatics) — colspan rows */
.bmc-content .mw-parser-output > table:not(.wikitable) td[colspan][style*="border"] {
  background: transparent !important;
  border-radius: 6px !important;
  padding: 10px 16px !important;
  text-align: left !important;
}

/* Inner nested tables inside service cards — strip borders (non-wikitable only) */
.bmc-content .mw-parser-output td > table:not(.wikitable) {
  border: none !important;
  background: transparent !important;
  border-spacing: 0 !important;
  width: 100% !important;
}
.bmc-content .mw-parser-output td > table:not(.wikitable) td {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Service card headings: wiki uses <big><b>title</b></big> */
.bmc-content .mw-parser-output big b,
.bmc-content .mw-parser-output big strong {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  display: block !important;
  margin-bottom: 6px !important;
  font-family: 'Helvetica Neue', Arial, sans-serif !important;
}

/* Lists inside service cards */
.bmc-content .mw-parser-output > table:not(.wikitable) ul,
.bmc-content .mw-parser-output > table:not(.wikitable) li {
  font-size: 1rem !important;
  color: #444 !important;
  margin-bottom: 3px !important;
}

/* Plain layout cells without border (e.g. News page columns) */
.bmc-content .mw-parser-output > table:not(.wikitable) td:not([style*="border"]) {
  border: none !important;
  padding: 6px 8px !important;
  vertical-align: top !important;
  background: transparent !important;
}

/* ── Home page: overview/service table ───────────────────────────
   Plain table (class added by JS: 'wikitable bmc-home-table'), styled
   with the same look as the site's other data tables. Cells that act
   as category headers (bold text, no <ul> of items) get a maroon
   header treatment; cells containing a <ul> stay as plain list cells. */
.bmc-home-table {
  margin: 0.4em 0 !important;
}
.bmc-home-table td {
  vertical-align: top !important;
  padding: 8px 12px !important;
  line-height: 1.35 !important;
}
.bmc-home-table td ul {
  margin: 3px 0 0 !important;
  padding-left: 14px !important;
}
.bmc-home-table td ul li {
  font-size: 0.875rem !important;
  color: #444 !important;
  padding: 1px 0 !important;
  line-height: 1.35 !important;
}

/* Group-header rows ("Assisted Services" / "Walkup Services" over the
   first table row, "Bioinformatics/Informatics Services" spanning its own
   row further down). These are real <tr>/<td> cells with the table's own
   colspan, so they align exactly with the columns beneath them.

   Color is assigned by category (matched from the cell's own text in JS),
   not by column position, so each service type keeps its color no matter
   how the columns get reordered:
   - Walkup       → maroon (existing site brand color, unchanged)
   - Assisted     → slate blue
   - Bioinformatics → forest green
   - Anything else (fallback) → neutral gray */
.bmc-home-table .bmc-home-header-row td.bmc-home-header-cell {
  border-bottom: none !important;
  padding: 10px 12px !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  line-height: 1.3 !important;
}
.bmc-home-header-cell big,
.bmc-home-header-cell big b,
.bmc-home-header-cell big strong {
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  display: inline !important;
}
.bmc-home-table td.bmc-home-header-cell.bmc-home-header-wide {
  background: #f5f5f5 !important;
  color: #444 !important;
}
.bmc-home-table td.bmc-home-header-cell.bmc-home-header-wide a { color: #444 !important; }
.bmc-home-table td.bmc-home-header-cell.bmc-home-header-walkup {
  background: #750014 !important;
  color: #fff !important;
}
.bmc-home-table td.bmc-home-header-cell.bmc-home-header-walkup,
.bmc-home-table td.bmc-home-header-cell.bmc-home-header-walkup a,
.bmc-home-table td.bmc-home-header-cell.bmc-home-header-walkup big,
.bmc-home-table td.bmc-home-header-cell.bmc-home-header-walkup big b,
.bmc-home-table td.bmc-home-header-cell.bmc-home-header-walkup big strong {
  color: #fff !important;
}
.bmc-home-table td.bmc-home-header-cell.bmc-home-header-assisted {
  background: #2c5f7c !important;
  color: #fff !important;
}
.bmc-home-table td.bmc-home-header-cell.bmc-home-header-assisted,
.bmc-home-table td.bmc-home-header-cell.bmc-home-header-assisted a,
.bmc-home-table td.bmc-home-header-cell.bmc-home-header-assisted big,
.bmc-home-table td.bmc-home-header-cell.bmc-home-header-assisted big b,
.bmc-home-table td.bmc-home-header-cell.bmc-home-header-assisted big strong {
  color: #fff !important;
}
.bmc-home-table td.bmc-home-header-cell.bmc-home-header-bioinformatics {
  background: #3f6b4f !important;
  color: #fff !important;
}
.bmc-home-table td.bmc-home-header-cell.bmc-home-header-bioinformatics,
.bmc-home-table td.bmc-home-header-cell.bmc-home-header-bioinformatics a,
.bmc-home-table td.bmc-home-header-cell.bmc-home-header-bioinformatics big,
.bmc-home-table td.bmc-home-header-cell.bmc-home-header-bioinformatics big b,
.bmc-home-table td.bmc-home-header-cell.bmc-home-header-bioinformatics big strong {
  color: #fff !important;
}
.bmc-home-table td.bmc-home-header-cell.bmc-home-header-walkup a:hover,
.bmc-home-table td.bmc-home-header-cell.bmc-home-header-assisted a:hover,
.bmc-home-table td.bmc-home-header-cell.bmc-home-header-bioinformatics a:hover,
.bmc-home-table td.bmc-home-header-cell.bmc-home-header-wide a:hover { text-decoration: underline !important; }

/* ── Pricing page: proper table layout (preserves colspan/rowspan) ──
   Use border-separate so each cell owns its borders independently.
   This prevents adjacent-row borders from drawing lines through
   rowspan cells.                                                   */
.bmc-pricing .wikitable {
  display: table !important;
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 1px 1px !important;
  border-radius: 8px !important;
  border: 1px solid #e0e0e0 !important;
  margin: 1em 0 !important;
  overflow: hidden !important;
  table-layout: auto !important;
  background: #b0b0b0 !important;
}
.bmc-pricing .wikitable thead,
.bmc-pricing .wikitable tbody,
.bmc-pricing .wikitable tfoot {
  display: table-row-group !important;
}
.bmc-pricing .wikitable tr {
  display: table-row !important;
}
/* Vertical dividers only — no horizontal row lines at all.
   This is the only reliable way to avoid borders cutting through rowspan cells.
   Row separation is handled by alternating background tints instead. */
.bmc-pricing .wikitable th,
.bmc-pricing .wikitable td {
  display: table-cell !important;
  box-sizing: border-box !important;
  padding: 10px 14px !important;
  border: none !important;
  border-right: 1px solid #d8d8d8 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  vertical-align: top !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
}
/* No right border on last column */
.bmc-pricing .wikitable th:last-child,
.bmc-pricing .wikitable td:last-child {
  border-right: none !important;
}
/* Header row */
.bmc-pricing .wikitable th {
  background: #750014 !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  text-align: left !important;
  border-bottom-color: #5c0010 !important;
  border-right-color: rgba(255,255,255,0.2) !important;
}
/* Data cells */
.bmc-pricing .wikitable td {
  background: #fff !important;
  color: #222 !important;
}
/* Alternating row tint — stronger contrast since there are no row borders */
.bmc-pricing .wikitable tbody tr:nth-child(odd) td:not([rowspan]) {
  background: #fff !important;
}
.bmc-pricing .wikitable tbody tr:nth-child(even) td:not([rowspan]) {
  background: #f5f5f5 !important;
}
/* Hover */
.bmc-pricing .wikitable tbody tr:hover td:not([rowspan]) {
  background: #f5eaec !important;
}
/* colspan description rows — grey tint */
.bmc-pricing .wikitable td[colspan] {
  background: #f5f5f5 !important;
  color: #555 !important;
  font-size: 0.82rem !important;
  font-style: italic !important;
}
/* rowspan cells — neutral white, vertically centered, stronger right border
   to visually separate the group label from the data columns.
   Critically: NO border-bottom, so no lines cut through the spanned area. */
.bmc-pricing .wikitable td[rowspan] {
  background: #fff !important;
  font-weight: 600 !important;
  border-bottom: none !important;
  border-right: 1px solid #d8d8d8 !important;
  vertical-align: middle !important;
  color: #1a1a1a !important;
}

/* Row separators are now provided purely by the table's gray background
   showing through the 1px border-spacing gap between rows (set above).
   No explicit border-bottom needed — this keeps line thickness uniform
   between regular row gaps and rowspan group-boundary gaps. */

/* Group boundary marker — JS adds this class to the last row of every
   rowspan group. No additional border needed; the gap-background line
   already appears automatically since this row is followed by a new row. */

/* ── Card-grid tables (e.g. Alumni/Staff bio grids) ───────────────────
   Old-school tables where each row is N profile cells + narrow gap cells,
   sized with a bare width="n" HTML attribute per <td>. Under automatic
   table layout those widths are only a hint, so columns with denser
   content end up wider than columns with sparse content.

   Fix: force fixed table layout, and let the gap cells keep their exact
   declared pixel width (untouched — fixed layout honors that as-is),
   while the content cells (flagged by JS as .bmc-card-grid-content-cell)
   get width:auto. Per the CSS fixed-table-layout algorithm, any
   remaining space after the fixed-width columns are subtracted is
   divided EQUALLY among the columns left at "auto" — so the gap stays
   pixel-exact and the profile columns render genuinely equal-width,
   regardless of how much text is in any one of them. */
.bmc-card-grid-table {
  table-layout: fixed !important;
  width: 100% !important;
  border-collapse: collapse !important;
}
.bmc-card-grid-table td {
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
}
.bmc-card-grid-content-cell {
  width: auto !important;
}