/* sc-brand-a v2, gap measured 9px on 24 Sep and closed to 3px (second line margin -1px; measured on the homepage, 0px at -4px); 2026-09-24: header brand, option A, shared by the public, app and wellness headers.
   Selectors are qualified (html body a.nav-brand .x) so they outrank the older single-class rules, including
   those in page-body style blocks that load after this file. Sizes, spacing and case only; colours
   stay with each header. */
html body a.nav-brand, html body a.header-brand, html body a.sc-head-brand {
    display: inline-flex !important; align-items: center !important; gap: 10px !important;
    flex-shrink: 0 !important; max-width: none !important; white-space: nowrap; text-decoration: none;
}
html body a.nav-brand img.nav-logo, html body a.header-brand img.header-logo, html body a.sc-head-brand img.sc-head-logo {
    display: block !important; width: 40px !important; height: 40px !important; flex-shrink: 0 !important;
    object-fit: contain; background: none !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important;
}
html body a.nav-brand .nav-brand-text, html body a.header-brand .header-brand-text, html body a.sc-head-brand > span {
    display: inline-flex !important; flex-direction: column !important; justify-content: center !important;
    gap: 0 !important; line-height: 1 !important; white-space: nowrap; padding: 0 !important; margin: 0 !important;
}
html body a.nav-brand .nav-brand-title, html body a.header-brand .header-title-main, html body a.sc-head-brand .sc-head-name {
    display: block !important; font-size: 19px !important; font-weight: 800 !important; line-height: 1 !important;
    letter-spacing: -0.01em !important; margin: 0 !important; padding: 0 !important;
    white-space: nowrap; overflow: visible !important; text-overflow: clip !important;
}
html body a.nav-brand .nav-brand-subtitle, html body a.header-brand .header-title-sub, html body a.sc-head-brand .sc-head-sub {
    display: block !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1.15 !important;
    letter-spacing: 0.07em !important; text-transform: none !important; margin: -1px 0 0 !important; padding: 0 !important;
    white-space: nowrap;
}
html body a.sc-head-brand br { display: none !important; }
@media (max-width: 640px) {
    html body a.nav-brand, html body a.header-brand, html body a.sc-head-brand { gap: 9px !important; }
    html body a.nav-brand img.nav-logo, html body a.header-brand img.header-logo, html body a.sc-head-brand img.sc-head-logo { width: 36px !important; height: 36px !important; }
    html body a.nav-brand .nav-brand-title, html body a.header-brand .header-title-main, html body a.sc-head-brand .sc-head-name { font-size: 17px !important; }
    html body a.nav-brand .nav-brand-subtitle, html body a.header-brand .header-title-sub, html body a.sc-head-brand .sc-head-sub { font-size: 10px !important; letter-spacing: 0.06em !important; }
}

/* sc-brand-span 2026-09-24: the coloured "Cemic" is its own span inside the title, and an older rule
   sized it on its own (measured: capital C 12px against capital S 14px). It now takes the title's
   size and weight; its colour is left alone. */
html body a.nav-brand .nav-brand-title span, html body a.header-brand .header-title-main span, html body a.sc-head-brand .sc-head-name span {
    font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important;
    letter-spacing: inherit !important; vertical-align: baseline !important;
}

/* sc-header-geometry 2026-09-24: the app header's top row takes the wellness header's geometry, so the
   logo sits in the same place on every signed-in page: the same side rail as .sc-head
   (max(--sc-gutter, (100% - --sc-max) / 2)), the same 0.5rem top padding over the safe area, and the same
   80px row with its content vertically centred. Values copied from wellness-shared.css. Phones below the
   wellness breakpoint take its 14px rail; their height is left alone until measured. */
html body header.header.header {
    box-sizing: border-box !important;
    padding: calc(env(safe-area-inset-top, 0px) + 0.5rem) max(24px, calc((100% - 1600px) / 2)) 0 !important;
    height: calc(80px + 0.5rem + env(safe-area-inset-top, 0px)) !important;
    min-height: calc(80px + 0.5rem + env(safe-area-inset-top, 0px)) !important;
    max-height: none !important;
    display: flex !important; align-items: center !important;
}
@media(max-width: 768px) {
    html body header.header.header {
        /* sc-header-env 2026-09-24: on the Android app, History, Reports and Settings sat cramped under the
           status bar next to the wellness pages. Both headers now take the status-bar height from the phone
           itself (env), the way .sc-head does, instead of the app_base script's fallback guess, and the
           selector outranks the older .capacitor-android .header rules. */
        padding: calc(env(safe-area-inset-top, 0px) + 0.5rem) 14px 0 !important;
        height: calc(80px + 0.5rem + env(safe-area-inset-top, 0px)) !important;
        min-height: calc(80px + 0.5rem + env(safe-area-inset-top, 0px)) !important;
    }
}

/* sc-edge-web 2026-09-25: edge-to-edge (Android 4.3.87+, iPhone). The bottom inset is 0 outside the apps, so browsers are unchanged. */
html body #scChatbotTrigger, html body .sc-chatbot-trigger { bottom: calc(20px + max(var(--safe-area-bottom, 0px), env(safe-area-inset-bottom, 0px))) !important; }
html body #smartNotificationBanners, html body .smart-notification-banners { bottom: calc(12px + max(var(--safe-area-bottom, 0px), env(safe-area-inset-bottom, 0px))) !important; }
html body #mobile-menu.nav-mobile-menu { padding-bottom: calc(20px + max(var(--safe-area-bottom, 0px), env(safe-area-inset-bottom, 0px))) !important; }
html::after { content: ""; display: block; height: max(var(--safe-area-bottom, 0px), env(safe-area-inset-bottom, 0px)); }