/* MetaboAnalyst 7.0 - layout and page classes.
   Components (buttons, inputs, tables, tabs, dialogs, tree) are styled by the PrimeFaces theme
   (primefaces-ma7: Verona 7 in the MetaboAnalyst blue, built by tools/build_theme.sh). This file
   only lays out the frame (header, rail, content, footer) and defines the MetaboAnalyst page
   classes; it must not restyle .ui-* components. */

:root {
    /* palette (Verona "Couple"): navy rail, steel-blue accent, burgundy highlight line, white ground with cool light cards */
    --ma-font: -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --ma-mono: Menlo, Consolas, "Courier New", monospace;
    --ma-ink: #1F2937;
    --ma-muted: #5B6470;
    --ma-primary: #21395C;
    --ma-accent: #3A6186;
    --ma-accent-dark: #2E4E6B;
    --ma-accent-tint: #E3EAF2;
    --ma-highlight: #89253E;
    --ma-line: #D6DDE5;
    --ma-line-soft: #E6EBF0;
    --ma-ground: #FFFFFF;
    --ma-card: #F3F6F9;
    --ma-rail: #21395C;
    --ma-rail-dark: #1A2D49;
    --ma-nav-active: #E3EAF2;
}

/* ---------- frame ---------- */
html, body { margin: 0; padding: 0; }
html { font-size: 14px; }   /* the theme sizes in rem: 1rem = the 14 px base */
body { font-family: var(--ma-font); font-size: 14px; line-height: 1.5; color: var(--ma-ink); background: var(--ma-ground); }
a, a:link, a:visited { color: var(--ma-accent); text-decoration: none; }
a:hover { color: var(--ma-accent-dark); text-decoration: underline; }
code, pre, .mono { font-family: var(--ma-mono); }
#cover { background: var(--ma-ground) !important; }

.ui-layout, .ui-layout-doc, .ui-layout-unit, .ui-layout-wrap, .ui-layout-bd, .ui-layout-hd { border: none; }
.ui-layout-north { z-index: 20 !important; overflow: visible !important; }
.ui-layout-north .ui-layout-unit-content { overflow: visible !important; }
.ui-layout-unit .ui-layout-unit-content { padding: 0 !important; }
body > .ui-layout-north, .ui-layout-north .ui-layout-unit-content { background: #FFFFFF; }
body > .ui-layout-center, .ui-layout-center .ui-layout-unit-content { background: var(--ma-ground); }
body > .ui-layout-west, .ui-layout-west .ui-layout-unit-content { background: var(--ma-rail) !important; border: 0 !important; }
body > .ui-layout-east, .ui-layout-east .ui-layout-unit-content { background: #FFFFFF !important; border-left: 1px solid var(--ma-line) !important; }

#header { height: 120px; margin: 0; padding: 0 !important; position: relative; background: #FFFFFF; border: 0; border-bottom: 2px solid var(--ma-highlight); border-radius: 0; color: var(--ma-ink); }
#header.ui-widget-header { padding-left: 0 !important; }
#header.ui-widget-header { padding-left: 0 !important; }
.ma7-header { display: flex; align-items: center; gap: 22px; height: 120px; padding: 0 28px 0 36px; }
.ma7-header a.ma7-brand { display: flex; align-items: center; gap: 18px; text-decoration: none; }
.ma7-header a.ma7-brand:hover { text-decoration: none; }
.ma7-logo { height: 110px; width: auto; display: block; }
.ma7-wordmark { font-family: Helvetica, Arial, sans-serif; font-size: 34px; font-weight: 700; color: var(--ma-primary); letter-spacing: 1.1px; white-space: nowrap; }
.ma7-wordmark .v { color: var(--ma-highlight); }

/* slim header of the analysis pages: small brand + the navigation history (breadcrumb) */
#header.ma-slim { height: 56px; display: flex; align-items: center; gap: 20px; padding: 0 24px 0 24px !important; background: var(--ma-rail); border-bottom: 2px solid var(--ma-highlight); box-sizing: content-box; }
#header.ma-slim .ma-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
#header.ma-slim .ma-brand img { height: 42px; width: auto; }
#header.ma-slim .ma-crumbs { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; overflow: hidden; margin-left: 4px; padding-left: 20px; border-left: 1px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.8); font-size: 14px; font-weight: 400; line-height: 24px; }
#header.ma-slim .ma-crumbs a { color: rgba(255,255,255,0.8); white-space: nowrap; }
#header.ma-slim .ma-crumbs a:hover { color: #FFFFFF; text-decoration: underline; }
#header.ma-slim .ma-crumbs .sep { color: rgba(255,255,255,0.55); font-size: 10px; }
#header.ma-slim .ma-crumbs .cur { color: #FFFFFF; white-space: nowrap; }
#header.ma-slim .ma-spacer { flex-grow: 1; }
#header.ma-slim .ma-rcmd a { color: #FFFFFF; font-size: 13.5px; margin-left: 8px; white-space: nowrap; opacity: 0.9; }
.ma7-tagline { font-family: Helvetica, Arial, sans-serif; font-size: 18px; white-space: nowrap; color: var(--ma-muted); border-left: 2px solid var(--ma-line); padding-left: 22px; line-height: 1.25; }
.ma7-header .ma7-nav { display: flex; gap: 4px; margin-left: 8px; }
.ma7-header .ma7-nav a { color: var(--ma-muted); font-size: 13.5px; white-space: nowrap; padding: 6px 10px; border-radius: 6px; }
.ma7-header .ma7-nav a:hover { background: var(--ma-card); color: var(--ma-primary); text-decoration: none; }
.ma7-spacer { flex-grow: 1; }
/* menu and text-size toggle sit on the bottom edge of the header; logo, title and tagline stay centred */
.ma7-header .ma7-nav, .ma7-header .ma-fs { align-self: flex-end; margin-bottom: 10px; }

#footer { clear: both; padding: 0; position: relative; text-align: center; vertical-align: middle; background: var(--ma-card) !important; border: 0 !important; border-top: 2px solid var(--ma-highlight) !important; border-radius: 0 !important; color: var(--ma-muted) !important; }
#footer a { color: var(--ma-accent) !important; }

/* ---------- rail: the navigation tree on a teal band, in a white card (6.0) ---------- */
#navi { padding: 18px 8px 12px 8px !important; line-height: 22px; font-size: 14px; }
#navi .pi-home, #navi .pi-comments { color: #FFFFFF !important; }
#navi .ui-tree { background: #FFFFFF; border: 1px solid var(--ma-rail-dark); border-radius: 4px; width: 100% !important; padding: 6px 4px; }
#navi .ui-tree .ui-treenode-icon { display: none; }
/* a narrow slot for the expand arrow (the empty slot of a leaf keeps the labels aligned) */
#navi .ui-tree .ui-tree-toggler, #navi .ui-tree .ui-treenode-leaf-icon { width: 16px; min-width: 16px; height: 22px; margin-right: 2px; }
#navi .ui-tree .ui-treenode-content { padding: 2px 4px; }
#navi .ui-tree .ui-treenode-label { padding: 1px 6px; font-size: 14px; white-space: normal; flex: 0 1 auto; min-width: 0; }   /* a long node label wraps instead of being cut */
#navi .ui-tree .ui-treenode-content.ui-state-highlight,
#navi .ui-tree .ui-treenode-content.ui-state-highlight .ui-treenode-label { background: var(--ma-nav-active); color: var(--ma-primary); font-weight: 700; }
#navi .ui-tree .ui-treenode-children { padding-left: 14px; }
/* one current node (bold, tinted); the pages already visited keep a muted check mark */
#navi .ui-tree .ma-visited > .ui-treenode-content .ui-treenode-label { color: var(--ma-accent-dark); }
#navi .ui-tree .ma-visited > .ui-treenode-content .ui-treenode-label::after { content: "\2713"; margin-left: 6px; font-size: 11px; color: var(--ma-accent); }
#navi #accountPane .ui-button { width: 100%; }

/* documentation / overview pages: a white rail with plain site links and the sponsor logos (no tree) */
body.ma-doc-body > .ui-layout-west, body.ma-doc-body .ui-layout-west .ui-layout-unit-content { background: #FFFFFF !important; border-right: 1px solid var(--ma-line) !important; }
#navi.ma-doc-nav { padding: 26px 15px 8px 24px !important; line-height: 34px; font-size: 14px; }
#navi.ma-doc-nav a { color: var(--ma-ink); display: inline-block; padding: 0 10px; border-radius: 4px; }
#navi.ma-doc-nav a:hover { background: var(--ma-card); text-decoration: none; }
#navi.ma-doc-nav br { display: none; }
#navi.ma-doc-nav a { display: block; }
.ma-sponsors { padding: 16px 0 30px 0; text-align: center; line-height: 30px; }
.ma-sponsors img { max-width: 145px; }

/* ---------- page contract (parameter / upload / result pages) ---------- */
/* legacy pages carry bare h2 / h3 titles: give them the .ma-title / .ma-subtitle scale so a module
   reads the same from its 7.0 pages to its 6.0 pages (documentation pages override below) */
.ui-layout-center h2 { font-size: 20px; font-weight: 700; color: var(--ma-ink); margin: 0 0 8px 0; line-height: 26px; }
.ui-layout-center h3 { font-size: 14px; font-weight: 700; color: var(--ma-ink); margin: 16px 0 6px 0; line-height: 20px; }
/* figure and table options next to a plot (was a raster palette icon) */
.ma-figopt { color: var(--ma-accent); font-size: 17px; vertical-align: middle; cursor: pointer; }
a:hover .ma-figopt, .ma-figopt:hover { color: var(--ma-accent-dark); }
.ma-page { width: 92%; max-width: 1320px; box-sizing: border-box; margin: 0 auto; padding: 40px 48px 36px 56px; line-height: 20px; }   /* 92% of the pane, capped so cards do not stretch on very wide screens, and centred so the page does not sit in the top-left corner */
.ma-title { font-size: 20px; font-weight: 700; color: var(--ma-ink); margin: 0 0 8px 0; }
.ma-subtitle { font-size: 14px; font-weight: 700; color: var(--ma-ink); margin: 18px 0 4px 0; }
.ma-lead { margin: 0 0 14px 0; color: var(--ma-muted); }
.ma-card { background: var(--ma-card); border: 1px solid var(--ma-line-soft); border-radius: 4px; padding: 12px 16px; margin: 6px 0 14px 0; }
.ma-card table { border-collapse: collapse; }
.ma-card td { padding: 4px 6px; vertical-align: middle; }
.ma-card .ma-label, .ma-label { font-weight: 700; white-space: nowrap; width: 140px; }
.ma-card .ma-help { color: var(--ma-muted); font-size: 12.5px; line-height: 18px; }
.ma-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 3px 0; }
.ma-submit { text-align: center; padding: 6px 0 2px 0; }
.ma-submit-right { text-align: right; }
.ma-note { color: var(--ma-muted); font-style: italic; font-size: 12.5px; line-height: 18px; margin: 4px 0 10px 0; }
.ma-fig { text-align: center; padding: 8px 0; }
.ma-fig img { max-width: 100%; border: 1px solid var(--ma-line-soft); background: #FFFFFF; }
.ma-msgs { margin: 6px 0 0 0; padding-left: 18px; }
.ma-msgs li { margin: 2px 0; }
hr.style-one { border: 0; height: 1px; background: var(--ma-line); margin: 12px 0; }

/* ---------- legacy helper classes used across the 6.0 pages ---------- */
.helpTip { width: 600px; line-height: 1.6em; background: #FFF4DF; border: 1px solid #F0DDB5; border-radius: 4px; padding: 6px 10px; }
.noBorders tr, .noBorders td { background: none !important; border: none !important; }
table.nopadding td { padding: 0; }
.ui-panelgrid .firstcolumn { background: #EAF0F8; color: #000000; font-weight: bold; }
.ui-datalist-content { border: 0; background: none; }
.selectable td.ui-selection-column input { display: none; }
.unselectable td.ui-selection-column input { display: block; }
.panelColumns td { vertical-align: top; }
.ui-selectonemenu label.ui-selectonemenu-label { width: 100% !important; }
.ui-datatable table, .ui-datatable-resizable table { table-layout: auto !important; }
/* links stay readable on a selected (highlighted) row */
.ui-datatable .ui-datatable-data > tr.ui-state-highlight a, .ui-datatable .ui-datatable-data > tr.ui-state-highlight a:hover { color: #FFFFFF; text-decoration: underline; }
/* a wide result table scrolls inside its wrapper instead of pushing the page past the pane */
.ui-datatable .ui-datatable-tablewrapper { overflow-x: auto; }
table.ma-page { table-layout: fixed; }
table.ma-page > tbody > tr > td { overflow: hidden; }
/* result tables wider than the page scroll sideways instead of being cut off */
table.ma-page .ui-datatable-wrapper { overflow-x: auto; }
/* result pages with wide tables use the full pane */
.ma-page.ma-page-wide { width: 100%; max-width: none; padding: 40px 64px 40px 56px; }
/* the results of a page start below the parameters with some air; downloads as one labelled row */
.ma-results { margin-top: 28px; }
.ma-downloads { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; margin: 22px 0 24px 0; font-size: 13.5px; }
/* each download link carries the download icon (PrimeIcons pi-download) */
.ma-downloads a::before { font-family: 'primeicons'; content: "\e956"; font-size: 12px; margin-right: 5px; speak: none; }
/* two-way view switch of an interactive figure (e.g. By group / Per sample) */
.ma-seg { display: inline-flex; }
.ma-seg button { font: inherit; font-size: 13px; padding: 5px 14px; border: 1px solid var(--ma-accent); background: #FFFFFF; color: var(--ma-accent); cursor: pointer; }
.ma-seg button + button { border-left: 0; }
.ma-seg button:first-child { border-radius: 4px 0 0 4px; }
.ma-seg button:last-child { border-radius: 0 4px 4px 0; }
.ma-seg button.on { background: var(--ma-accent); color: #FFFFFF; }
.ui-datatable .ui-datatable-footer { text-align: right; padding: 4px 10px; }
.ui-menu .ui-menu-parent .ui-menu-child { margin-left: 4px; margin-right: 20px; }
.ui-growl-icon-close { width: 100%; height: 100%; background-image: none !important; }
.ui-dialog.customDialog .ui-dialog-content { font-size: 14px; }
.ui-dialog-titlebar.ui-widget-header.customDialog { font-size: 15px; }

/* ---------- module overview (ModuleView.xhtml): the 6.0 layout ---------- */
.ma7-page { padding: 30px 40px 32px 40px; max-width: 1480px; }
.ma7-page h1 { margin: 0 0 14px 0; font-size: 20px; font-weight: 700; color: rgb(74, 91, 112); }
/* a table-like CSS grid: one row per input data type, modules in fixed columns */
.ma7-grid { display: grid; grid-template-columns: 210px repeat(4, minmax(0, 1fr)); border-top: 1px solid #C7CCD3; border-bottom: 1px solid #C7CCD3; margin: 0 20px; }
.ma7-grid > * { box-sizing: border-box; height: 88px; overflow: hidden; }   /* every row the same height: all cards the same size */
.ma7-gh { height: 40px; padding: 10px 8px 8px 8px; font-size: 15px; color: var(--ma-ink); border-bottom: 1px solid #C7CCD3; }
.ma7-gh-mod { grid-column: 2 / -1; padding-left: 18px; }
.ma7-gh-mod a { color: #8B1A1A; font-weight: 600; text-decoration: underline; }
.ma7-gr { padding: 10px 8px; border-right: 1px solid #C7CCD3; border-bottom: 1px solid #DCE0E5; display: flex; flex-direction: column; justify-content: center; gap: 2px; font-size: 15px; color: var(--ma-ink); }
.ma7-gr span { font-size: 12px; line-height: 15px; color: #6B7280; }
.ma7-gr em { font-style: normal; font-size: 11px; font-weight: 600; color: #2F6DB5; }
.ma7-ge { background: #EEF3FA; border-bottom: 1px solid #DCE0E5; }
a.ma7-gm, a.ma7-gm:link, a.ma7-gm:visited { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; height: 88px; margin: 0; padding: 6px; font-size: 16px; line-height: 23px; color: #FFFFFF; text-decoration: none; background: var(--gm); border-radius: 0; border: 2px solid; border-color: rgba(255, 255, 255, 0.55) rgba(0, 0, 0, 0.38) rgba(0, 0, 0, 0.38) rgba(255, 255, 255, 0.55); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.20); transition: transform 0.15s ease, box-shadow 0.15s ease; }
/* 3D: the card rises towards the viewer on hover, presses down on click */
a.ma7-gm:hover, a.ma7-gm:focus { color: #FFFFFF; text-decoration: none; cursor: pointer; z-index: 2; transform: translateY(-6px) scale(1.04); box-shadow: 0 12px 20px rgba(0, 0, 0, 0.30), 0 3px 6px rgba(0, 0, 0, 0.18); filter: brightness(1.06); }
a.ma7-gm:active { transform: translateY(-1px) scale(1.01); border-color: rgba(0, 0, 0, 0.38) rgba(255, 255, 255, 0.55) rgba(255, 255, 255, 0.55) rgba(0, 0, 0, 0.38); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); filter: brightness(0.96); }
.ma7-gm.c1 { --gm: #08B2E3; }   /* spectra and peaks */
.ma7-gm.c2 { --gm: #8CB369; }   /* peaks (6.0) */
.ma7-gm.c3 { --gm: #1F7A8C; }   /* tables */
.ma7-gm.c4 { --gm: #F4A259; }   /* annotated features */
.ma7-gm.c5 { --gm: #EE6352; }   /* translational and utilities */
.ma7-gm.c6 { --gm: #7B61A8; }   /* spatial */
.ma7-gm.c7 { --gm: #374785; }   /* the 6.0 default pane */
.ma7-h2 { margin: 30px 20px 12px 20px; font-size: 20px; font-weight: 700; color: rgb(74, 91, 112); }
@media (max-width: 1100px) {
    .ma7-grid { grid-template-columns: 160px repeat(4, minmax(0, 1fr)); }
    .ma7-gm { font-size: 14px; line-height: 20px; }
}

/* example-data tables inside a card */
.ma-examples td { padding: 5px 8px; vertical-align: top; line-height: 18px; }
.ma-examples td.ma-label { width: auto; }

/* p:panelGrid is used as a layout table on every page: no cell borders (as in 6.0) */
.ui-panelgrid, .ui-panelgrid > * > tr, .ui-panelgrid .ui-panelgrid-cell { border: 0 !important; }
.ui-panelgrid .ui-panelgrid-cell { padding: 4px 6px; }
table.ma-page { border-collapse: separate; border-spacing: 0; }
table.ma-page > tbody > tr > td { padding: 0; }
table.ma-page > tbody > tr > td > p { margin: 0 0 12px 0; color: var(--ma-muted); }
.ui-panelgrid.ma-card { width: 100%; table-layout: fixed; }   /* fixed: the nowrap control column cannot push the card past the page */
.ui-panelgrid.ma-card, .ui-panelgrid.ma-card > tbody > tr, .ui-panelgrid.ma-card .ui-panelgrid-cell { background: var(--ma-card) !important; }
.ma-card .ui-panelgrid-cell { padding: 4px 6px; }
.ma-card.ui-panelgrid > tbody > tr > td:nth-child(3) { width: 300px; color: var(--ma-muted); font-size: 12.5px; line-height: 18px; }
.ma-card.ui-panelgrid > tbody > tr > td:nth-child(2) { overflow: visible; }
.ma-card.ui-panelgrid > tbody > tr > td:nth-child(2) td { white-space: normal; }   /* labels may wrap when the column is tight */
.ma-card.ui-panelgrid > tbody > tr > td:nth-child(1) { width: 200px; white-space: nowrap; font-weight: 700; }

/* ---------- home page ---------- */
.ma-home { padding: 0; }
.ma-home-body { padding: 0 5% 30px 40px; }
/* news: a navy block with white text (the 6.0 teal block in the 7.0 navy), full width at the top of the pane as in 6.0 */
.ma-news-card { background: var(--ma-primary); color: #FFFFFF; padding: 22px 5% 12px 40px; }
.ui-layout-center .ma-news-card h2 { margin: 0 0 6px; font-size: 15px; line-height: 20px; font-weight: 700; color: #FFFFFF; }
ul.ma-news { margin: 0; padding-left: 18px; line-height: 21px; }
.ma-news-card a, .ma-news-card a:link, .ma-news-card a:visited { color: #FFFFFF; text-decoration: underline; }
.ma-news-card .ma-news-more { text-align: right; font-size: 14px; }
.ma-start { position: sticky; top: 0; z-index: 5; text-align: center; padding: 16px 0 14px 0; margin: 4px 0 6px 0; background: var(--ma-ground); border-bottom: 1px solid var(--ma-line); }
.ma-start .ma-start-btn { font-size: 15px !important; font-weight: 700 !important; padding: 9px 28px !important; background: var(--ma-highlight) !important; border-color: var(--ma-highlight) !important; color: #FFFFFF !important; }
.ma-start .ma-start-btn:hover, .ma-start .ma-start-btn:focus { background: #6E1D31 !important; border-color: #6E1D31 !important; }
.ma-home-mods { border-collapse: separate; }
.ma-home-mods > tbody > tr > td { vertical-align: top; padding: 6px 4px 14px 4px; }
.ma-home-mods img { width: 250px; border: 1px solid var(--ma-line-soft); border-radius: 4px; background: #FFFFFF; }
.ma-home-mods h3 { margin: 4px 0 6px 0; font-size: 15px; font-weight: 700; color: var(--ma-ink); }
.ma-home-mods p { margin: 0 0 8px 0; line-height: 20px; color: var(--ma-muted); font-size: 13.5px; }
/* home: module descriptions by research area (the order of the module overview), plain: navy titles, no boxes or colour bands */
.hm-overview { margin: 22px 0 0; }
.hm-sep { display: flex; align-items: center; gap: 16px; margin: 30px 0 0; font-size: 17px; font-weight: 700; color: var(--ma-primary); }
.hm-sep::before, .hm-sep::after { content: ""; flex: 1; border-top: 1px solid var(--ma-line); }
.hm-overview h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--ma-primary); }
.hm-overview p { margin: 0 0 8px; font-size: 14px; line-height: 22px; color: var(--ma-ink); }
.hm-area { margin: 28px 0 0; }
#modules { scroll-margin-top: 80px; }   /* the link from the module overview lands below the sticky start button */
.hm-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--ma-primary); }
.hm-head small { font-size: 13px; font-weight: 400; color: var(--ma-muted); }
.hm-body { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: start; }
.hm-fig { width: 250px; border: 1px solid var(--ma-line-soft); border-radius: 4px; background: #FFFFFF; }
.hm-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; }
.hm-card a.hm-name, .hm-card a.hm-name:visited { font-size: 14.5px; font-weight: 700; color: var(--ma-primary); }
.hm-card a.hm-name:hover { color: var(--ma-accent); }
.hm-card .hm-q { font-weight: 600; font-size: 13px; }
.hm-card p { margin: 4px 0 0; font-size: 13.5px; line-height: 20px; color: var(--ma-muted); }
.hm-util { margin: 18px 0 8px; font-size: 13.5px; color: var(--ma-muted); }
@media (max-width: 1100px) { .hm-body { grid-template-columns: minmax(0, 1fr); } .hm-fig { display: none; } }
@media (max-width: 760px) { .hm-cards { grid-template-columns: minmax(0, 1fr); } }

/* ---------- documentation frame (_doc_template: docs/*, home, module overview) ---------- */
.ma-doc { padding: 26px 5% 30px 40px; }
.ma-doc > table.ui-panelgrid, .ma-doc > table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; line-height: 21px; }
.ma-doc > table > tbody > tr > td { padding: 0; }
.ma-doc h2 { font-size: 18px; font-weight: 700; color: var(--ma-ink); margin: 0 0 10px 0; }
.ma-doc h3 { font-size: 15px; font-weight: 700; color: var(--ma-ink); margin: 18px 0 6px 0; }
.ma-doc h4 { font-size: 13.5px; font-weight: 700; color: var(--ma-ink); margin: 14px 0 4px 0; }
.ma-doc p { margin: 0 0 10px 0; }
.ma-doc li { margin: 2px 0; }
.ma-doc .ma7-page { padding: 0; }
.ma-doc:has(> .ma-home) { padding: 0; }
.ma-doc:has(.mo) { padding: 0; }                              /* module overview: the grid spans the pane (.mo carries the padding) */
.ma-doc:has(.mo) .ma7-page { max-width: none; }   /* home: the news band spans the pane; .ma-home-body carries the frame padding */
.ma-doc .ma7-page { max-width: 1400px; }

/* aligned parameter rows: label column, control, optional help icon with a tooltip */
table.ma-form { border-collapse: separate; border-spacing: 0; }
table.ma-form td { padding: 3px 6px 3px 0; vertical-align: middle; line-height: 24px; }
table.ma-form td.ma-label { width: 218px; min-width: 218px; font-weight: 600; white-space: nowrap; }
table.ma-form td .ma-help { padding-left: 8px; }
.ma-help-icon { vertical-align: middle; margin-left: 6px; cursor: help; color: var(--ma-accent); font-size: 15px; }
.ma-help-icon:hover { color: var(--ma-accent-dark); }

/* task groups (Study Design): name and description on the left, parameters on the right, one rule between groups */
table.ma-tasks { width: 100%; border-collapse: separate; border-spacing: 0; }
table.ma-tasks > tbody > tr > td { vertical-align: top; padding: 14px 10px 14px 0; border-top: 1px solid var(--ma-line-soft); }
table.ma-tasks > tbody > tr:first-child > td { border-top: 0; padding-top: 4px; }
table.ma-tasks td.ma-task-head { width: 250px; padding-right: 20px; }
.ma-task-name { font-weight: 700; font-size: 13.5px; line-height: 24px; }
.ma-task-name span { padding-left: 2px; }
.ma-task-desc { color: var(--ma-muted); font-size: 12.5px; line-height: 18px; padding-left: 28px; }

/* layout helpers */
.topAlign { vertical-align: top !important; }
/* compact count table inside a result summary (one row per contrast; the open contrast is marked) */
.ui-datatable.ma-counts { font-size: 12.5px; }
.ui-datatable.ma-counts .ui-datatable-data > tr > td, .ui-datatable.ma-counts thead th { padding: 3px 10px; }
.ui-datatable.ma-counts .ma-row-cur > td { background: var(--ma-accent-tint) !important; font-weight: 700; }

/* secondary block (summaries, example data, notes): bordered, not shaded - one shaded focus per page */
.ma-panel { background: #FFFFFF; border: 1px solid var(--ma-line-soft); border-radius: 4px; padding: 12px 16px; margin: 6px 0 14px 0; }
/* a result summary spans the page like the parameter card above it (a content-sized box sat alone at the left) */
table.ma-panel { width: 100%; box-sizing: border-box; }
.ma-panel table { border-collapse: collapse; }
.ma-panel td { padding: 4px 6px; vertical-align: middle; }

/* ---------- Module overview (ModuleView.xhtml): seven research areas of four modules, one colour per area ----------
   The area label carries a bar of its colour; the modules are bevelled "brick" tiles, as in 6.0, that lift on hover and press in
   on click. Module descriptions are tooltips of the tiles. */
.mo { --mo-royal: #21395C; width: 100%; box-sizing: border-box; margin: 0; padding: 34px 6% 24px;
      font-family: var(--ma-font); color: var(--ma-ink); }
.mo h1 { margin: 0 0 4px; font-size: 20px; font-weight: 700; color: var(--mo-royal); text-align: center; }
.mo-intro { margin: 0 0 24px; text-align: center; color: var(--ma-muted); font-size: 14px; }
.mo-intro a { color: var(--mo-royal); font-weight: 600; }
.mo-r1 { --mc: #1F7A8C; --mcd: #155766; }   /* Statistics */
.mo-r2 { --mc: #E08A3C; --mcd: #B0651F; }   /* Targeted metabolomics */
.mo-r3 { --mc: #6FA04C; --mcd: #4E7834; }   /* Global metabolomics */
.mo-r4 { --mc: #0797C2; --mcd: #056F8F; }   /* Spatial metabolomics */
.mo-r5 { --mc: #7E6BC4; --mcd: #5A4A9A; }   /* Lipidomics */
.mo-r6 { --mc: #E0554A; --mcd: #B23A31; }   /* Exposomics */
.mo-r7 { --mc: #B8911E; --mcd: #8A6C12; }   /* Microbiomics */
.mo-grid { display: grid; grid-template-columns: 220px repeat(4, minmax(0, 1fr)); gap: 8px; }
.mo-lbl { display: flex; flex-direction: column; justify-content: center; min-height: 88px; padding: 0 14px;
          border-left: 4px solid var(--mc, var(--mo-royal)); color: var(--ma-ink); font-size: 15.5px; font-weight: 700; }
.mo-lbl small { margin-top: 3px; font-size: 12.5px; font-weight: 400; color: var(--ma-muted); }
/* research areas new in 7.0: a small star after the name (module overview, home) */
.ma-new-star { font-size: 11px; color: var(--ma-highlight); vertical-align: 2px; margin-left: 2px; cursor: help; }
.mo a.mo-mod, .mo a.mo-mod:link, .mo a.mo-mod:visited {
          display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 88px; padding: 10px 12px;
          box-sizing: border-box; text-align: center; text-wrap: balance; font-size: 15px; font-weight: 600; line-height: 20px; color: #fff;
          border: 1px solid; border-radius: 2px;
          background: linear-gradient(to bottom, color-mix(in srgb, var(--mc) 82%, #fff) 0%, var(--mc) 55%, color-mix(in srgb, var(--mc) 88%, #000) 100%);
          border-color: rgba(255,255,255,.55) rgba(0,0,0,.28) rgba(0,0,0,.38) rgba(255,255,255,.45);
          box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 4px rgba(0,0,0,.18);
          text-shadow: 0 1px 1px rgba(0,0,0,.25); transition: transform .12s, box-shadow .12s, filter .12s; }
.mo a.mo-mod:hover { text-decoration: none; cursor: pointer; position: relative; z-index: 1; transform: translateY(-5px) scale(1.03); filter: brightness(1.07);
          box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 12px 20px rgba(0,0,0,.28), 0 3px 6px rgba(0,0,0,.16);
          border-color: rgba(255,255,255,.6) rgba(0,0,0,.28) rgba(0,0,0,.38) rgba(255,255,255,.5); }
.mo a.mo-mod:active { transform: translateY(-1px) scale(1.01); filter: brightness(.96);
          border-color: rgba(0,0,0,.38) rgba(255,255,255,.5) rgba(255,255,255,.5) rgba(0,0,0,.38); box-shadow: inset 0 2px 4px rgba(0,0,0,.25); }
.mo a.mo-mod.mo-pending { cursor: default; }  /* tile of a module still being built: no link */
/* qualifier of a module name ([MS2], [one factor], [New] ...) on its own line */
.mo .mo-q { display: block; margin: 0; font-size: 13px; font-weight: 600; line-height: 20px; opacity: .92; letter-spacing: .01em; }
.mo .mo-util { margin: 22px 0 0; text-align: center; font-size: 14px; color: var(--ma-muted); }
.mo-util a { color: var(--mo-royal); font-weight: 600; cursor: pointer; }
@media (max-width: 1400px) { .mo a.mo-mod, .mo a.mo-mod:link, .mo a.mo-mod:visited { font-size: 14px; } .mo .mo-q { font-size: 12px; } .mo-lbl { font-size: 14.5px; } }
@media (max-width: 900px) { .mo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mo-lbl { grid-column: 1 / -1; min-height: 40px; } }

/* ---------- text size control (header): scales the content pane and the navigation tree ---------- */
html[data-fs="s"] .ui-layout-center > *, html[data-fs="s"] #navi { zoom: 0.9; }
html[data-fs="l"] .ui-layout-center > *, html[data-fs="l"] #navi { zoom: 1.15; }
/* pop-up lists, dialogs, menus, tooltips and messages follow the same size: the zoom is set on their inner parts, not on the positioned box,
   so PrimeFaces still places them at the trigger / in the centre */
html[data-fs="s"] .ui-selectonemenu-items-wrapper,
html[data-fs="s"] .ui-selectcheckboxmenu-items-wrapper,
html[data-fs="s"] .ui-autocomplete-panel .ui-autocomplete-items,
html[data-fs="s"] .ui-dialog .ui-dialog-titlebar,
html[data-fs="s"] .ui-dialog .ui-dialog-content,
html[data-fs="s"] .ui-dialog .ui-dialog-footer,
html[data-fs="s"] .ui-overlaypanel-content,
html[data-fs="s"] .ui-tooltip .ui-tooltip-text,
html[data-fs="s"] .ui-menu-overlay .ui-menu-list,
html[data-fs="s"] .ui-growl-item-container { zoom: 0.9; }
html[data-fs="l"] .ui-selectonemenu-items-wrapper,
html[data-fs="l"] .ui-selectcheckboxmenu-items-wrapper,
html[data-fs="l"] .ui-autocomplete-panel .ui-autocomplete-items,
html[data-fs="l"] .ui-dialog .ui-dialog-titlebar,
html[data-fs="l"] .ui-dialog .ui-dialog-content,
html[data-fs="l"] .ui-dialog .ui-dialog-footer,
html[data-fs="l"] .ui-overlaypanel-content,
html[data-fs="l"] .ui-tooltip .ui-tooltip-text,
html[data-fs="l"] .ui-menu-overlay .ui-menu-list,
html[data-fs="l"] .ui-growl-item-container { zoom: 1.15; }
.ma-fs { display: inline-flex; align-items: baseline; gap: 2px; margin-left: 10px; }
.ma-fs button { font-family: var(--ma-font); font-weight: 600; line-height: 1; background: transparent; border: 1px solid transparent; border-radius: 4px;
                padding: 3px 6px; cursor: pointer; color: var(--ma-muted); }
.ma-fs button[data-fs="s"] { font-size: 12px; }
.ma-fs button[data-fs="m"] { font-size: 15px; }
.ma-fs button[data-fs="l"] { font-size: 18px; }
.ma-fs button:hover { border-color: var(--ma-line); }
html[data-fs="s"] .ma-fs button[data-fs="s"], html[data-fs="m"] .ma-fs button[data-fs="m"], html[data-fs="l"] .ma-fs button[data-fs="l"] { color: var(--ma-primary); border-color: var(--ma-primary); }
#header.ma-slim .ma-fs button { color: rgba(255,255,255,0.75); }
#header.ma-slim .ma-fs button:hover { border-color: rgba(255,255,255,0.4); }
html[data-fs="s"] #header.ma-slim .ma-fs button[data-fs="s"], html[data-fs="m"] #header.ma-slim .ma-fs button[data-fs="m"], html[data-fs="l"] #header.ma-slim .ma-fs button[data-fs="l"] { color: #FFFFFF; border-color: #FFFFFF; }

/* header on laptop widths: the tagline wraps (and is hidden on narrow screens) so the page never gets wider than the window */
@media (max-width: 1560px) { .ma7-tagline { white-space: normal; max-width: 360px; font-size: 15px; } .ma7-wordmark { font-size: 30px; } }
@media (max-width: 1180px) { .ma7-tagline { display: none; } }
table.ma7-page { table-layout: fixed; }

/* a figure with its download icon at the top-right corner (graphics dialog: PNG, PDF, SVG at the chosen DPI) */
.ma-fig { position: relative; display: inline-block; max-width: 100%; vertical-align: top; }
.ma-fig > img { display: block; max-width: 100%; }
.ma-fig > .ma-fig-dl { position: absolute; top: 6px; right: 6px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px;
                       border: 1px solid var(--ma-line); border-radius: 4px; background: rgba(255, 255, 255, .92); color: var(--ma-accent); }
.ma-fig > .ma-fig-dl:hover { color: #FFFFFF; background: var(--ma-accent); border-color: var(--ma-accent); text-decoration: none; }
.ma-fig > .ma-fig-dl .pi { font-size: 14px; }

/* check pages: a summary box of one message per line, as wide as its longest line (within the page), buttons below */
.ma-checkbox { display: inline-block; max-width: 100%; }
.ma-checklines { padding: 14px 22px; line-height: 26px; overflow-x: auto; }
.ma-checklines > div { white-space: nowrap; }

/* toolbar above a result table: options on the left, downloads on the right */
.ma-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin: 14px 0 8px 0; }
.ma-downloads.ma-dl-right { justify-content: flex-end; }

/* a row of page buttons: centred, well apart, of equal minimum width */
.ma-btnrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px; margin-top: 24px; }
.ma-btnrow .ui-button { min-width: 150px; }

/* three kinds of buttons: actions solid (theme default), navigation outlined, downloads flat with the download icon */
body .ui-button.ma-btn-nav, body .ui-button.ma-btn-nav:enabled { background: #FFFFFF; color: var(--ma-accent); border: 1px solid var(--ma-accent); font-weight: 600; }
body .ui-button.ma-btn-nav .ui-button-text, body .ui-button.ma-btn-nav .ui-icon { color: var(--ma-accent); }
body .ui-button.ma-btn-nav.ui-state-hover, body .ui-button.ma-btn-nav:enabled:hover { background: var(--ma-accent-tint); border-color: var(--ma-accent-dark); }
body .ui-button.ma-btn-dl, body .ui-button.ma-btn-dl:enabled { background: transparent; color: var(--ma-accent); border-color: transparent; }
body .ui-button.ma-btn-dl .ui-button-text, body .ui-button.ma-btn-dl .ui-icon { color: var(--ma-accent); }
body .ui-button.ma-btn-dl.ui-state-hover, body .ui-button.ma-btn-dl:enabled:hover { background: var(--ma-accent-tint); }