/* CARE top bar and the shared site footer (top bar redesigned 2026-11-11).
   Standalone: also loaded by the public registration page, which does not use care.css. */

/* ---------- Shared site footer (public pages, My CARE, participant pages, guide) ---------- */
/* Pages with the shared footer: the page is at least as tall as the window,
   the block before the footer grows, so the footer always ends at the bottom
   of the window, however short the page. (The public registration page and
   the admin console have no shared footer and are not affected.) */
body.has-site-footer { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body.has-site-footer > #app { flex: 1 0 auto; display: flex; flex-direction: column; }
body.has-site-footer > :is(header, main, footer, p, #app, .guide),
body.has-site-footer > #app > :is(header, main, footer) { width: 100%; flex-shrink: 0; }
body.has-site-footer > :has(+ .site-footer),
body.has-site-footer > #app > :has(+ .site-footer) { flex-grow: 1; }

/* One footer for every page: same gap above it, text and divider aligned
   with the page content. */
.site-footer { margin-top: 64px; padding: 0 var(--gutter); border-top: 1px solid #E6E9EE; background: #FAFBFC; color: #4D5C66; font-family: "Geist", "Inter", system-ui, sans-serif; font-size: 13.5px; }
.site-footer .sf-inner, .site-footer .sf-base { max-width: calc(var(--page-max) - 2 * var(--gutter)); margin: 0 auto; }
.site-footer .sf-inner { padding: 40px 0 28px; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, .7fr) minmax(0, 1fr); gap: 32px; }
.site-footer .sf-brand img { height: 34px; width: auto; }
.site-footer .sf-brand p { margin: 14px 0 0; max-width: 44ch; line-height: 1.6; color: #5B6A74; }
.site-footer .sf-col { display: flex; flex-direction: column; gap: 8px; }
.site-footer .sf-col strong { color: #005793; font-weight: 650; margin-bottom: 4px; }
.site-footer a { color: #4D5C66; text-decoration: none; width: fit-content; }
.site-footer a:hover { color: #005793; text-decoration: underline; text-underline-offset: 3px; }
.site-footer .sf-base { padding: 16px 0 28px; box-sizing: border-box; border-top: 1px solid #EEF1F4; display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; font-size: 12.5px; color: #62707A; }
@media (max-width: 760px) {
  .site-footer { margin-top: 40px; }
  .site-footer .sf-inner { grid-template-columns: 1fr 1fr; padding: 28px 0 20px; gap: 24px; }
  .site-footer .sf-brand { grid-column: 1 / -1; }
  .site-footer .sf-base { padding: 14px 0 24px; }
  .site-footer a { overflow-wrap: break-word; max-width: 100%; }
  /* Phones with the bottom menu: the room kept free for the menu is part of
     the footer, so the footer colour reaches the bottom of the screen. */
  body.has-bottom-nav.has-site-footer { padding-bottom: 0; }
  body.has-bottom-nav .site-footer { margin-bottom: 0; padding-bottom: var(--bottom-nav-h, 0px); }
}
:root[data-theme="dark"] .site-footer { background: #0D1925; border-top-color: #213444; color: #A6B5C1; }
:root[data-theme="dark"] .site-footer .sf-col strong { color: #EEF3F7; }
:root[data-theme="dark"] .site-footer a { color: #A6B5C1; }
:root[data-theme="dark"] .site-footer .sf-brand p, :root[data-theme="dark"] .site-footer .sf-base { color: #8A99A3; }
:root[data-theme="dark"] .site-footer .sf-brand img { background: #fff; padding: 6px 10px; border-radius: 10px; }
:root[data-theme="dark"] .site-footer .sf-base { border-top-color: #1A2B3B; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-footer { background: #0D1925; border-top-color: #213444; color: #A6B5C1; }
  :root:not([data-theme="light"]) .site-footer .sf-col strong { color: #EEF3F7; }
  :root:not([data-theme="light"]) .site-footer a { color: #A6B5C1; }
  :root:not([data-theme="light"]) .site-footer .sf-brand p, :root:not([data-theme="light"]) .site-footer .sf-base { color: #8A99A3; }
  :root:not([data-theme="light"]) .site-footer .sf-brand img { background: #fff; padding: 6px 10px; border-radius: 10px; }
  :root:not([data-theme="light"]) .site-footer .sf-base { border-top-color: #1A2B3B; }
}
/* Privacy and legal notice links (2026-11-07). */
.site-footer .sf-base a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.site-footer .sf-base a:hover { color: var(--navy); }

.site-footer .sf-base { flex-wrap: wrap; }
.site-footer .sf-theme { display: inline-flex; align-items: center; gap: 10px; }
.site-footer .sf-theme .gb-theme { width: auto; }

/* ==========================================================================
   Top bar — the same on every page.
   [logo] [public pages]   ...   [workspaces] [account]
   ========================================================================== */
:root { --gbar-h: 64px; scrollbar-gutter: stable; }
/* One content width for every page of the platform (same values as care.css). */
:root { --page-max: 1360px; --gutter: 36px; }
@media (min-width: 1680px) { :root { --page-max: 1560px; --gutter: 48px; } }
@media (min-width: 2200px) { :root { --page-max: 1760px; } }
@media (max-width: 1080px) { :root { --gutter: 24px; } }
@media (max-width: 760px) { :root { --gutter: 16px; } }
@media (max-width: 760px) { :root { --gbar-h: 56px; } }
.gbar, .gb-pop, .gb-sheet {
  --gb-bg: rgba(255, 255, 255, .9); --gb-solid: #FFFFFF; --gb-line: #E3E8EE; --gb-ink: #005793; --gb-text: #45535D; --gb-soft: #F1F4F8;
  --gb-tab-on: #E7F0F6; --gb-navy: #203050; --gb-on-navy: #FFFFFF; --gb-focus: #007B9F; --gb-shadow: 0 18px 48px -18px rgba(8, 22, 38, .35);
  --gb-events: #00775C; --gb-pub: #930070; --gb-fund: #6A5C00; --gb-my: #007B9F; --gb-admin: #203050;
}
:root[data-theme="dark"] :is(.gbar, .gb-pop, .gb-sheet) { --gb-bg: rgba(13, 25, 37, .88); --gb-solid: #12212F; --gb-line: #22364A; --gb-ink: #EEF3F7; --gb-text: #A6B5C1; --gb-soft: #1A2B3B; --gb-tab-on: #1E3346; --gb-navy: #8EBAE5; --gb-on-navy: #0D1925; --gb-events: #7CB99F; --gb-pub: #C980B7; --gb-fund: #D4C46A; --gb-my: #78A4BE; --gb-admin: #8EBAE5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.gbar, .gb-pop, .gb-sheet) { --gb-bg: rgba(13, 25, 37, .88); --gb-solid: #12212F; --gb-line: #22364A; --gb-ink: #EEF3F7; --gb-text: #A6B5C1; --gb-soft: #1A2B3B; --gb-tab-on: #1E3346; --gb-navy: #8EBAE5; --gb-on-navy: #0D1925; --gb-events: #7CB99F; --gb-pub: #C980B7; --gb-fund: #D4C46A; --gb-my: #78A4BE; --gb-admin: #8EBAE5; } }
.gbar {
  position: sticky; top: 0; z-index: 320;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px;
  height: var(--gbar-h); min-height: var(--gbar-h); padding: 0 20px; margin: 0;
  background: var(--gb-bg); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
  border-bottom: 1px solid var(--gb-line); box-sizing: border-box;
  font-family: "Geist", "Inter", system-ui, sans-serif; color: var(--gb-ink);
}
.gbar .sp-i, .gb-pop .sp-i, .gb-sheet .sp-i, .site-footer .sp-i { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gbar-logo { display: inline-flex; align-items: center; height: 40px; padding: 0 2px; border-radius: 10px; text-decoration: none; min-width: 0; }
.gbar-logo img { display: block; }
.gbar-logo .gl-full { height: 32px; width: auto; }
.gbar-logo .gl-mark { display: none; height: 30px; width: 30px; }
.gbar-logo:focus-visible { outline: 2px solid var(--gb-focus); outline-offset: 2px; }
:root[data-theme="dark"] .gbar .gl-full { background: #fff; padding: 4px 8px; border-radius: 9px; height: 34px; box-sizing: border-box; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gbar .gl-full { background: #fff; padding: 4px 8px; border-radius: 9px; height: 34px; box-sizing: border-box; } }
.gbar :is(a, button):focus-visible, .gb-pop :is(a, button):focus-visible, .gb-sheet :is(a, button):focus-visible { outline: 2px solid var(--gb-focus); outline-offset: 2px; }

/* Public pages: menu tabs with icons (on public pages) */
.gb-left { display: flex; align-items: center; min-width: 0; height: 100%; }
.gb-public { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 12px; background: var(--gb-soft); }
.gb-tab { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 11px; border-radius: 9px; color: var(--gb-text); text-decoration: none; font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; transition: background .15s, color .15s; }
.gb-tab:hover { color: var(--gb-ink); background: color-mix(in srgb, var(--gb-solid) 70%, transparent); }
.gb-tab.is-current { background: var(--gb-solid); color: var(--gb-ink); box-shadow: 0 1px 2px rgba(0, 40, 80, .08), 0 4px 12px -6px rgba(0, 40, 80, .2); }
.gb-tab.sp-events .sp-i { color: var(--gb-events); } .gb-tab.sp-publications .sp-i { color: var(--gb-pub); } .gb-tab.sp-funding .sp-i { color: var(--gb-fund); }
.gb-tab .gb-s { display: none; }
/* ...and one "Public pages" menu inside My CARE and the Admin console */
.gb-public-menu { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--gb-line); border-radius: 10px; background: var(--gb-solid); color: var(--gb-text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.gb-public-menu:hover, .gb-public-menu[aria-expanded="true"] { color: var(--gb-ink); border-color: color-mix(in srgb, var(--gb-ink) 30%, var(--gb-line)); }
.gb-public-menu .gb-chev { width: 15px; height: 15px; opacity: .7; }

/* Right: workspaces, then the account */
.gb-right { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 10px; min-width: 0; }
.gb-work { display: flex; align-items: center; gap: 6px; }
.gb-ws, .gb-signin { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 15px 0 12px; border: 1px solid var(--gb-line); border-radius: 10px; background: var(--gb-solid); color: var(--gb-ink); text-decoration: none; font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; transition: border-color .15s, box-shadow .15s, background .15s; }
.gb-ws:hover, .gb-signin:hover { border-color: color-mix(in srgb, var(--gb-ink) 35%, var(--gb-line)); box-shadow: 0 6px 16px -10px rgba(0, 60, 110, .45); }
.gb-ws.sp-my .sp-i { color: var(--gb-my); } .gb-ws.sp-admin .sp-i { color: var(--gb-admin); }
.gb-ws.is-current, .gb-signin { background: var(--gb-navy); border-color: var(--gb-navy); color: var(--gb-on-navy); }
.gb-ws.is-current .sp-i, .gb-signin .sp-i { color: inherit; }
.gb-signin.is-current { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gb-navy) 25%, transparent); }
.gb-ws .gb-s { display: none; }
.gbar-end { display: flex; align-items: center; gap: 8px; min-width: 0; }
.gbar-end:empty, .gb-account:empty { display: none; }
.gb-right:has(.gbar-end .gbar-account) .gb-account { display: none; }
/* The account: initials in a circle (generic on public pages, My CARE's and the console's own elsewhere) */
.gb-avatar, .gbar .gbar-end .gbar-account { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: linear-gradient(135deg, #203050, #007B9F); color: #FFFFFF; font: inherit; font-size: 13px; font-weight: 650; letter-spacing: .02em; cursor: pointer; flex: 0 0 auto; box-shadow: 0 0 0 2px var(--gb-solid), 0 0 0 3px var(--gb-line); }
.gb-avatar:hover, .gbar .gbar-end .gbar-account:hover, .gb-avatar[aria-expanded="true"], .gbar .gbar-end .gbar-account[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--gb-solid), 0 0 0 4px var(--gb-focus); }
.gbar .gbar-end .gbar-account .ga-avatar { width: auto; height: auto; background: none; font-size: 13px; }
.gbar .gbar-end .gbar-account :is(.ga-who, svg) { display: none; }
.gb-avatar.is-static { cursor: default; box-shadow: none; }
/* Phones: one Menu button */
.gb-menu { display: none; align-items: center; gap: 7px; height: 40px; padding: 0 13px 0 11px; border: 1px solid var(--gb-line); border-radius: 10px; background: var(--gb-solid); color: var(--gb-ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }

/* Dropdowns (public pages, account) and the phone sheet */
.gb-pop { position: fixed; z-index: 1200; max-height: calc(100vh - 90px); overflow: auto; padding: 8px; border: 1px solid var(--gb-line); border-radius: 16px; background: var(--gb-solid); color: var(--gb-ink); box-shadow: var(--gb-shadow); font-family: "Geist", "Inter", system-ui, sans-serif; animation: gb-in .14s ease-out; }
@keyframes gb-in { from { opacity: 0; transform: translateY(-4px); } }
.gb-group { padding: 10px 10px 4px; font-size: 12px; font-weight: 600; color: var(--gb-text); }
.gb-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; color: var(--gb-ink); text-decoration: none; }
.gb-item:hover, .gb-item.is-current { background: var(--gb-soft); }
.gb-ic { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 10px; background: var(--gb-soft); }
.gb-item:hover .gb-ic, .gb-item.is-current .gb-ic { background: var(--gb-solid); }
.gb-item.sp-events .gb-ic { color: var(--gb-events); } .gb-item.sp-publications .gb-ic { color: var(--gb-pub); } .gb-item.sp-funding .gb-ic { color: var(--gb-fund); } .gb-item.sp-my .gb-ic, .gb-item.is-signin .gb-ic { color: var(--gb-my); } .gb-item.sp-admin .gb-ic { color: var(--gb-admin); }
.gb-tx { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.gb-tx strong { font-size: 14.5px; font-weight: 650; }
.gb-tx small { font-size: 12.5px; color: var(--gb-text); line-height: 1.35; }
.gb-here { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--gb-text); }
.gb-who { display: flex; align-items: center; gap: 12px; padding: 8px 10px 10px; border-bottom: 1px solid var(--gb-line); margin-bottom: 4px; }
.gb-who > span:last-child { display: grid; gap: 2px; min-width: 0; }
.gb-who strong { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb-who small { font-size: 12.5px; color: var(--gb-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb-line { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: none; color: var(--gb-ink); font: inherit; font-size: 14px; text-align: left; text-decoration: none; cursor: pointer; }
.gb-line:hover { background: var(--gb-soft); }
.gb-sep { height: 1px; margin: 6px 4px; background: var(--gb-line); }
.gb-theme { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin: 2px 6px 6px; padding: 3px; border-radius: 10px; background: var(--gb-soft, #F1F4F8); }
.gb-theme button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--gb-text, #45535D); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.gb-theme button.on { background: var(--gb-solid, #FFFFFF); color: var(--gb-ink, #005793); box-shadow: 0 1px 2px rgba(0, 40, 80, .12); }
.gb-theme .sp-i { width: 15px; height: 15px; }
.gb-sheet { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: flex-end; background: rgba(9, 22, 35, .42); animation: gb-fade .16s ease-out; font-family: "Geist", "Inter", system-ui, sans-serif; }
@keyframes gb-fade { from { opacity: 0; } }
.gb-sheet-panel { width: 100%; max-height: 88vh; overflow: auto; padding: 8px 8px max(14px, env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; background: var(--gb-solid); color: var(--gb-ink); }
.gb-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 4px; font-size: 16px; }
.gb-x { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--gb-soft); color: var(--gb-text); cursor: pointer; }

/* Narrower screens */
@media (max-width: 1180px) {
  .gbar { gap: 16px; }
  .gb-tab { padding: 0 12px 0 10px; }
  .gb-ws.sp-admin .gb-l { display: none; } .gb-ws.sp-admin .gb-s { display: inline; }
}
@media (max-width: 1024px) {
  .gbar-logo .gl-full { height: 28px; }
  .gb-tab.sp-publications .gb-l, .gb-tab.sp-funding .gb-l { display: none; } .gb-tab.sp-publications .gb-s, .gb-tab.sp-funding .gb-s { display: inline; }
}
@media (max-width: 900px) { .gb-public-menu span { display: none; } }
@media (max-width: 900px) {
  .gb-tab .sp-i { display: none; }
  .gb-tab { padding: 0 11px; }
}
/* Phones: [logo] [Menu] [account or Sign in] */
@media (max-width: 760px) {
  .gbar { padding: 0 12px; gap: 10px; }
  .gbar-logo .gl-full { display: none; }
  .gbar-logo .gl-mark { display: block; }
  .gb-left, .gb-work { display: none; }
  .gb-menu { display: inline-flex; }
  .gb-right { gap: 8px; }
  .gb-right:not(:has(.gb-avatar, .gbar-account)) .gb-work { display: flex; }
  .gb-signin { padding: 0 13px 0 11px; }
}
@media print { .gbar { display: none !important; } }
/* Pages change at once (no cross-fade), so moving around feels immediate. */
.p-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 14px; font-weight: 600; text-decoration: none; }