/* ==========================================================================
   MEDiscuss Swasthya Master Stylesheet v2.1
   Architecture: Adaptive Grid, Pure iOS, MEDiscuss Maroon Palette
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700;900&display=swap');

:root {
    /* =======================================================================
       SWASTHYA THEME. Consolidated 9 August 2026.

       THE THEME IS THIS BLOCK AND NOTHING ELSE.

       Before this, 24 teal values were hard-coded across the stylesheet and index.php:
       tier titles, the header gradient, seven dark-mode rules and nine rgba() hover and
       focus tints. Changing --mc-primary moved most of the page and left a dozen details
       behind, so the theme looked like one variable and was not. Changing the palette is
       now the lines below, and the swap from teal to maroon on 9 August 2026 was in fact
       done by editing them and nothing else.

       Why the -rgb tokens exist: CSS cannot decompose a hex into channels, so a translucent
       tint of the brand colour needs the raw channels separately. KEEP THEM IN STEP. If
       --mc-primary changes, --mc-primary-rgb must change with it, and likewise for the dark
       pair. Nothing enforces that but the eye, which is why it is written here.

       ON THE MAROON, AND WHAT NOW CARRIES THE DISTINCTION.

       Swasthya was teal from March 2026 precisely so that a reader could tell at a glance
       that a page was written for the public rather than for a clinician. Adopting the
       MEDiscuss maroon gives that up, and something has to replace it, or the two systems
       become one undifferentiated site and the CDSS pages start being read by people the
       CDSS was never written for.

       What replaces it is the header, which is now textured and gold-ruled on Swasthya and
       stays flat on the CDSS. See the .mc-header block below. That is not decoration: it is
       the signal, and it should not be removed without putting something else in its place.
       ======================================================================= */

    /* --- the six that define the theme ------------------------------------- */
    --mc-primary:            #800000;          /* MEDiscuss maroon */
    --mc-primary-rgb:        128, 0, 0;
    --mc-primary-hover:      #660000;
    /* Dark mode cannot use the maroon for text and controls: #800000 on a #121212 page is
       roughly 1.5:1 and unreadable. The CDSS solved this with a light red accent, and the
       same pair is used here so the two systems behave identically in dark mode. */
    --mc-primary-dark:       #ff5252;
    --mc-primary-dark-rgb:   255, 82, 82;
    --mc-primary-hover-dark: #ff7675;

    /* The header is a brand band rather than an accent surface, so it keeps the deep maroon
       in BOTH modes. Deriving it from --mc-primary would turn it bright red in dark mode. */
    --mc-header-from:        #800000;
    --mc-header-to:          #5c0000;

    /* Standard tint strengths, so a hover state is the same weight everywhere. */
    --mc-tint-faint:  rgba(var(--mc-primary-rgb), 0.03);
    --mc-tint-light:  rgba(var(--mc-primary-rgb), 0.05);
    --mc-tint-medium: rgba(var(--mc-primary-rgb), 0.07);
    --mc-tint-focus:  rgba(var(--mc-primary-rgb), 0.10);
    --mc-tint-shadow: rgba(var(--mc-primary-rgb), 0.30);

    /* Shared with the CDSS. The orange rule under every heading is the one piece of
       MEDiscuss brand both systems carry, and it is deliberately not themed. */
    --mc-gold: #d97706;
    --mc-blue: #0284c7;

    --mc-bg-app: #f2f2f7; --mc-bg-card: #ffffff; --mc-bg-pill: #e5e5ea;
    --mc-dark: #1c1c1e; --mc-text-main: #3a3a3c; --mc-text-muted: #8e8e93;
    --mc-border-light: #e5e5ea; --mc-border: #d1d1d6;
    --mc-shadow-sm: 0 1px 2px rgba(0,0,0,0.04); --mc-shadow-card: 0 4px 12px rgba(0,0,0,0.05); --mc-shadow-pill: 0 3px 8px rgba(0,0,0,0.12);
}


/* ==========================================================================
   BILINGUAL TOGGLE LOGIC
   ========================================================================== */
body:not(.lang-kn) .kn-text { display: none !important; }
body.lang-kn .en-text { display: none !important; }
.mc-lang-toggle { font-weight: 800; font-size: 15px; font-family: -apple-system, sans-serif; }
html:not(.mc-dark-mode) .mc-lang-toggle { color: var(--mc-primary) !important; }
html.mc-dark-mode .mc-lang-toggle { color: var(--mc-primary-dark) !important; }

#mc-core-app, #mc-core-app * { box-sizing: border-box !important; }
#mc-core-app, #mc-core-app p, #mc-core-app span, #mc-core-app div, #mc-core-app li, #mc-core-app a, #mc-core-app details, #mc-core-app summary, #mc-core-app input, #mc-core-app select, #mc-core-app button, #mc-core-app label { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; }

/* ==========================================================================
   THE HEADER, AND WHY IT IS TEXTURED. Added 9 August 2026.

   Swasthya and the CDSS now share the MEDiscuss maroon. Colour therefore no longer tells a
   reader which of the two systems they are on, and that difference matters more here than
   almost anywhere: a clinician tool read by a member of the public is the failure this
   project has already had once.

   So the distinction moved into the header:

     Swasthya   maroon, concentric rings, gold rule at the base
     CDSS       maroon, flat, no rings, no rule

   The rings are drawn with a repeating-radial-gradient centred below the header, so they
   read as arcs sweeping across it rather than as circles. They are the compass in Swasthya
   Compass, which is why this treatment and not a texture that means nothing.

   Three things here are load-bearing and easy to remove by accident:

     overflow: hidden     clips the arcs to the band. Without it they spill down the page.
     pointer-events: none on ::before, or the pseudo-element swallows taps on the theme
                          toggle, which sits inside the header.
     z-index              an absolutely positioned ::before paints ABOVE in-flow text in the
                          same stacking context, so the title would sit behind the rings.
                          The title and subtitle are given position: relative to lift them.

   The white is 5.5%. On a maroon that is at the edge of visible, which is the intent: it
   should register as texture, not as a pattern. Raising it makes the header look busy and
   competes with the title.
   ========================================================================== */
/* The 84px bottom padding reserves room for .mc-header-lang, which is positioned absolutely
   at the foot of the band. Reduce one and the other overlaps the subtitle. */
#mc-core-app .mc-header { background: linear-gradient(135deg, var(--mc-header-from), var(--mc-header-to)); padding: 28px 24px 84px; text-align: center; color: #fff; position: relative; overflow: hidden; border-bottom: 3px solid var(--mc-gold); }
#mc-core-app .mc-header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: repeating-radial-gradient(circle at 50% 132%, rgba(255,255,255,0) 0 38px, rgba(255,255,255,0.055) 38px 39px);
}
#mc-core-app .mc-header .mc-title, #mc-core-app .mc-header .mc-subtitle { position: relative; z-index: 1; }

/* ==========================================================================
   THE BILINGUAL BANNER AND LANGUAGE SWITCH

   Markup and reasoning in shared/header-lang.php. Two notes belong here rather than there.

   WHY IT IS POSITIONED ABSOLUTELY RATHER THAN PLACED IN FLOW.

   The block is injected immediately after the opening .mc-header tag, which puts it first in
   the DOM, above the title. Moving it visually to the foot of the band could be done with
   flex ordering, but that would turn .mc-header into a flex container and change how the
   existing title and subtitle lay out in five modules at once, and there is no browser here
   to check the result in. Absolute positioning changes the layout of nothing already on the
   page: the only requirement is that the band reserve room for it, which is the 84px bottom
   padding on .mc-header above. That is the safer of the two, deliberately chosen.

   WHY THE ACTIVE STATE IS HERE AND NOT IN JAVASCRIPT.

   body.lang-kn is the single source of truth for the chosen language. Both selectors below
   read it. The nav button and this switch therefore cannot disagree, and a language set by a
   restored preference rather than by a click still highlights correctly.
   ========================================================================== */
#mc-core-app .mc-header-lang { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 16px; }

/* No en-text or kn-text on this, by design. It is the one line that must reach a reader in
   whichever language they cannot read. */
#mc-core-app .mc-bilingual-banner { display: block; font-size: 11px; font-weight: 800; color: var(--mc-gold); letter-spacing: 1.5px; text-transform: uppercase; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

#mc-core-app .mc-lang-switch { display: inline-flex; align-items: center; gap: 3px; padding: 3px; border-radius: 999px; background: rgba(0,0,0,0.24); border: 1px solid rgba(255,255,255,0.26); }
#mc-core-app .mc-lang-opt { appearance: none; border: none; background: transparent; color: rgba(255,255,255,0.85); font-size: 13px; font-weight: 600; line-height: 1.2; padding: 7px 18px; border-radius: 999px; cursor: pointer; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; transition: background-color 0.15s ease, color 0.15s ease; }
#mc-core-app .mc-lang-opt:hover { background: rgba(255,255,255,0.14); color: #fff; }

/* The active option. White fill, header maroon text: 10.95:1, and tests/theme.js checks it. */
body:not(.lang-kn) #mc-core-app .mc-lang-opt[data-lang="en"],
body.lang-kn       #mc-core-app .mc-lang-opt[data-lang="kn"] { background: #fff; color: var(--mc-header-from); font-weight: 700; }
body:not(.lang-kn) #mc-core-app .mc-lang-opt[data-lang="en"]:hover,
body.lang-kn       #mc-core-app .mc-lang-opt[data-lang="kn"]:hover { background: #fff; color: var(--mc-header-from); }

@media (max-width: 380px) {
    #mc-core-app .mc-lang-opt { padding: 7px 13px; font-size: 12.5px; }
    #mc-core-app .mc-bilingual-banner { letter-spacing: 1px; }
}

/* ==========================================================================
   ABBREVIATIONS

   All 66 CDSS modules end with a .mc-references line expanding every abbreviation used on
   the page. Swasthya had the same need and no such rule, so the class existed in nobody's
   stylesheet and would have rendered as unstyled body text.

   THE FIRST ATTEMPT AT THIS RULE WAS WRONG IN TWO WAYS, both visible only on the page.

   It set background: var(--mc-bg-app), which is the colour of the page the block sits on, so
   the "tinted panel" was invisible and the block read as loose text hanging off a stray left
   border. And it had margin-top only, so it butted directly against the disclaimer beneath
   it, with the disclaimer's tricolour edge appearing to belong to the abbreviations.

   It is now the CDSS card: bg-card, full border, 12px radius, small shadow. Same reasoning as
   the share button. A control or block that exists in both systems should look the same in
   both, and copying the CDSS values is cheaper and safer than inventing a second look.

   The label is display: block so the list starts on its own line. On the heart risk module
   the expansion runs to thirteen terms, and an inline label leaves a paragraph with no
   entry point. text-transform: uppercase is inert on Kannada script, which has no case, so
   the same rule serves both languages.
   ========================================================================== */
#mc-core-app .mc-references { margin: 28px 0; padding: 16px; border-radius: 12px; background: var(--mc-bg-card); border: 1px solid var(--mc-border); box-shadow: var(--mc-shadow-sm); font-size: 13px; line-height: 1.75; color: var(--mc-text-muted); }
#mc-core-app .mc-references strong { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--mc-text-main); }
#mc-core-app.mc-dark-mode .mc-references { background: rgba(255,255,255,0.04); border-color: var(--mc-border); }

/* The provenance stamp, matching the CDSS one. Border colour is set inline because it
   carries meaning: neutral when current, amber when stale or unrecorded. */
#mc-core-app .mc-provenance { text-align: center; font-size: 12.5px; line-height: 1.6; color: var(--mc-text-muted); padding: 10px 14px; margin: 24px auto 0 auto; max-width: 640px; border: 1px solid var(--mc-border); border-radius: 8px; }

/* The hub pull-quote, matching the CDSS placement directly under the header. */
#mc-core-app .mch-pullquote { max-width: 620px; margin: 24px auto 0 auto; padding: 16px 20px; border-radius: 12px; background: var(--mc-tint-light); border: 1px solid var(--mc-tint-focus); color: var(--mc-primary); font-size: 15px; font-weight: 600; line-height: 1.6; text-align: center; }
#mc-core-app.mc-dark-mode .mch-pullquote { color: var(--mc-primary); }
#mc-core-app .mc-title, #mc-core-app .mc-heading, #mc-core-app .mc-heading-lg, #mc-core-app .mc-pearl-title { font-family: 'Merriweather', serif !important; display: block; }
#mc-core-app .mc-title { font-size: 24px !important; font-weight: 900; margin-bottom: 6px; color: #fff !important; margin-top: 0 !important; line-height: 1.3 !important; }
#mc-core-app .mc-subtitle { font-size: 15px; font-weight: 400; color: #fff !important; display: block; }

#mc-core-app h2.mc-heading, #mc-core-app h2.mc-heading-lg, #mc-core-app h3.mc-pearl-title { margin-top: 0 !important; line-height: 1.3 !important; }
#mc-core-app ul, #mc-core-app ol li { text-align: left !important; width: 100% !important; padding-left: 24px !important; box-sizing: border-box !important; }
#mc-core-app li { text-align: left !important; }
#mc-core-app .mc-pearl-title { font-size: 17px !important; font-weight: 700; color: var(--mc-dark) !important; margin-top: 24px; margin-bottom: 8px; }
#mc-core-app .mc-pearl-text { font-size: 15px !important; color: var(--mc-text-main) !important; line-height: 1.6 !important; margin-top: 0; margin-bottom: 16px; }
#mc-core-app .mc-card ul, #mc-core-app .mc-card ol { padding-left: 20px !important; margin-top: 8px !important; margin-bottom: 16px !important; }
#mc-core-app .mc-card li { font-size: 15px !important; color: var(--mc-text-main) !important; line-height: 1.6 !important; margin-bottom: 8px !important; }

/* ==========================================================================
   MANUAL DARK MODE
   ========================================================================== */
#mc-core-app.mc-dark-mode {
    --mc-primary: var(--mc-primary-dark);
    --mc-primary-hover: var(--mc-primary-hover-dark);
    /* The tints must follow the dark primary too, or every hover state in dark mode stays
       tinted with the light-mode channels. */
    --mc-tint-faint:  rgba(var(--mc-primary-dark-rgb), 0.06);
    --mc-tint-light:  rgba(var(--mc-primary-dark-rgb), 0.08);
    --mc-tint-medium: rgba(var(--mc-primary-dark-rgb), 0.12);
    --mc-tint-focus:  rgba(var(--mc-primary-dark-rgb), 0.15);
    --mc-tint-shadow: rgba(var(--mc-primary-dark-rgb), 0.30);
    --mc-blue: #3b82f6;
    --mc-bg-app: #121212; --mc-bg-card: #1e1e1e; --mc-bg-pill: #2c2c2e;
    --mc-dark: #ffffff; --mc-text-main: #ebebf5; --mc-text-muted: #a1a1aa; 
    --mc-border-light: #2c2c2e; --mc-border: #38383a; --mc-shadow-card: 0 4px 12px rgba(0,0,0,0.4);
}

/* The header keeps its maroon band and its gold rule in dark mode. This rule used to set a
   flat #1e1e1e with !important, and index.php then set the gradient back with a second
   !important, so which one won depended on whether .mc-dark-mode sat on <html> or on
   #mc-core-app. Both overrides are gone: the header is defined once, at .mc-header, and
   needs no dark-mode variant because --mc-header-from and --mc-header-to do not change.
   Only the title colour is restated here, because the generic dark-mode text rule below
   would otherwise recolour it against the maroon. */
#mc-core-app.mc-dark-mode .mc-header .mc-title, #mc-core-app.mc-dark-mode .mc-header .mc-subtitle { color: #fff !important; }
#mc-core-app.mc-dark-mode .mc-title { color: #fff !important; }
#mc-core-app.mc-dark-mode .mc-icon-moon { display: none !important; }
#mc-core-app.mc-dark-mode .mc-icon-sun { display: block !important; }

#mc-core-app.mc-dark-mode p, #mc-core-app.mc-dark-mode span, #mc-core-app.mc-dark-mode font, #mc-core-app.mc-dark-mode div, #mc-core-app.mc-dark-mode li { color: var(--mc-text-main); }
#mc-core-app.mc-dark-mode .mc-result-white-box, #mc-core-app.mc-dark-mode .mc-result-card { background: rgba(255,255,255,0.05) !important; border-color: var(--mc-border) !important; color: var(--mc-text-main) !important; }
#mc-core-app.mc-dark-mode .mc-result-desc, #mc-core-app.mc-dark-mode .mc-result-desc * { color: var(--mc-text-main) !important; }

.mc-theme-toggle { position: absolute !important; top: 16px !important; right: 16px !important; background: rgba(255, 255, 255, 0.15) !important; border: none !important; border-radius: 50% !important; width: 36px !important; height: 36px !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #fff !important; cursor: pointer !important; padding: 0 !important; outline: none !important; box-shadow: none !important; z-index: 10; transition: all 0.2s; }
.mc-theme-toggle:hover { background: rgba(255, 255, 255, 0.3) !important; transform: scale(0.95); }
.mc-theme-toggle svg { width: 20px !important; height: 20px !important; fill: none !important; stroke: currentColor !important; border: none !important; background: transparent !important; }
.mc-icon-moon { display: block !important; }
.mc-icon-sun { display: none !important; }

/* ==========================================================================
   LAYOUT, GRID & CARDS
   ========================================================================== */
#mc-core-app { width: 100%; max-width: 800px; margin: 20px auto; background: var(--mc-bg-app); border-radius: 20px !important; box-shadow: var(--mc-shadow-card) !important; overflow: hidden; color: var(--mc-text-main); line-height: 1.5; font-size: 16px; }
.mc-body { padding: 0 16px 24px 16px; }
.mc-card { position: relative; background: var(--mc-bg-card); border: none !important; border-radius: 16px !important; padding: 24px; margin-bottom: 20px; box-shadow: var(--mc-shadow-card) !important; width: 100%; }

.mc-btn-clear { position: absolute; top: 20px; right: 20px; background: transparent !important; color: var(--mc-text-muted) !important; font-size: 13px !important; padding: 6px 14px !important; border: 1px solid var(--mc-border) !important; border-radius: 8px !important; font-weight: 600 !important; cursor: pointer; transition: all 0.2s; z-index: 10; box-shadow: none !important;}
.mc-btn-clear:hover { background: var(--mc-bg-pill) !important; color: var(--mc-dark) !important; }
#mc-core-app.mc-dark-mode .mc-btn-clear { color: #71717a !important; border-color: #38383a !important; }
#mc-core-app.mc-dark-mode .mc-btn-clear:hover { color: #ebebf5 !important; background: rgba(255,255,255,0.1) !important; }

.mc-divider { height: 1px; background: var(--mc-border-light); width: 100%; margin: 24px 0; border: none; }
.mc-heading, .mc-heading-lg { font-size: 19px !important; font-weight: 700; color: var(--mc-dark) !important; margin-bottom: 14px; border-bottom: 2px solid var(--mc-gold); padding-bottom: 8px; padding-right: 80px; }
.mc-row { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; }
.mc-field { flex: 1; }
.mc-v-stack { display: flex; flex-direction: column; gap: 12px; }

@media (min-width: 600px) { .mc-row { flex-direction: row; } .mc-v-stack-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .mc-segmented-control { max-width: 400px; } }

/* ==========================================================================
   INPUTS, LABELS & RADIO/CHECKBOX CARDS
   ========================================================================== */
.mc-label { display: block; font-size: 13px; font-weight: 700; color: var(--mc-text-muted) !important; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.mc-label span { color: inherit !important; font-weight: normal !important; text-transform: none !important; opacity: 0.7; letter-spacing: 0; margin-left: 4px;}
#mc-core-app.mc-dark-mode .mc-label { color: #d1d1d6 !important; }

.mc-input, .mc-select { width: 100%; padding: 14px 16px; border: 1px solid var(--mc-border) !important; border-radius: 10px !important; font-size: 17px !important; color: var(--mc-dark) !important; background: var(--mc-bg-card) !important; min-height: 48px; box-shadow: var(--mc-shadow-sm) !important; transition: border-color 0.2s, box-shadow 0.2s; }
.mc-input:focus, .mc-select:focus { border-color: var(--mc-primary) !important; outline: none; box-shadow: 0 0 0 3px var(--mc-tint-focus) !important; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

.mc-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%238e8e93%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E") !important; background-repeat: no-repeat !important; background-position: right 16px top 50% !important; background-size: 12px auto !important; }

/* Segmented Controls */
.mc-segmented-control input[type="radio"], .mc-v-card input[type="radio"], .mc-v-card input[type="checkbox"], .mc-v-stack input[type="radio"] { position: absolute !important; opacity: 0 !important; width: 0 !important; height: 0 !important; margin: 0 !important; pointer-events: none !important; appearance: none !important; }
.mc-btn:active, .mc-segment-btn:active, .mc-v-card:active { transform: scale(0.97); transition: transform 0.1s !important; }

.mc-segmented-control { display: flex !important; align-items: stretch !important; background: var(--mc-bg-pill) !important; border-radius: 10px !important; padding: 4px !important; width: 100% !important; }
.mc-segmented-control label { flex: 1 1 0% !important; display: flex !important; margin: 0 !important; padding: 0 !important; cursor: pointer !important; width: 100% !important; }
.mc-segment-btn { width: 100% !important; flex: 1 1 0% !important; text-align: center !important; padding: 10px 8px !important; border-radius: 8px !important; font-size: 15px !important; font-weight: 500 !important; color: var(--mc-text-muted) !important; cursor: pointer !important; transition: all 0.2s !important; min-height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; user-select: none !important; margin: 0 !important; border: none !important; background: transparent !important; }
.mc-segmented-control input[type="radio"]:checked + .mc-segment-btn { background: var(--mc-bg-card) !important; color: var(--mc-primary) !important; box-shadow: var(--mc-shadow-pill) !important; font-weight: 700 !important; }

#mc-core-app.mc-dark-mode .mc-segment-btn { color: #71717a !important; }
#mc-core-app.mc-dark-mode .mc-segmented-control input[type="radio"]:checked + .mc-segment-btn { color: var(--mc-primary) !important; }

/* V-Cards (Stackable Options) */
.mc-v-card { display: flex; align-items: flex-start; padding: 16px; background: var(--mc-bg-card); border: 2px solid var(--mc-border-light) !important; border-radius: 12px !important; cursor: pointer; transition: all 0.2s; user-select: none; margin: 0 !important; box-shadow: var(--mc-shadow-sm) !important; position: relative; height: 100%; }
.mc-v-radio-circle { position: relative; width: 24px; height: 24px; border-radius: 50% !important; border: 2px solid var(--mc-border) !important; margin-right: 16px; margin-top: 2px; flex-shrink: 0; background: transparent; transition: all 0.2s; }
.mc-v-card:has(input[type="radio"]:checked), .mc-v-card:has(input[type="checkbox"]:checked) { border-color: var(--mc-primary) !important; background: var(--mc-tint-faint) !important; }
.mc-v-card input[type="radio"]:checked ~ .mc-v-radio-circle, .mc-v-card input[type="checkbox"]:checked ~ .mc-v-radio-circle { border-color: var(--mc-primary) !important; background: var(--mc-primary) !important; }
.mc-v-card input[type="radio"]:checked ~ .mc-v-radio-circle::after, .mc-v-card input[type="checkbox"]:checked ~ .mc-v-radio-circle::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; background-color: #fff !important; border-radius: 50% !important; display: block !important; }

.mc-v-card-content { display: flex; flex-direction: column; }
.mc-v-title { font-size: 16px; font-weight: 700; color: var(--mc-dark); margin-bottom: 4px; }
.mc-v-desc { font-size: 13px; color: var(--mc-text-muted); line-height: 1.4; }
.mc-action-row { margin-top: 24px; margin-bottom: 24px; }

/* ==========================================================================
   BUTTONS & RESULTS
   ========================================================================== */
.mc-btn { display: inline-block; padding: 16px 24px; border-radius: 12px !important; font-size: 17px !important; font-weight: 700 !important; text-align: center; cursor: pointer; transition: all 0.2s; border: none !important; user-select: none; min-height: 52px; width: 100%; box-sizing: border-box; }
.mc-btn-primary { background: var(--mc-primary) !important; color: #fff !important; box-shadow: var(--mc-shadow-card) !important; }
.mc-btn-primary:disabled { background: var(--mc-border) !important; color: var(--mc-text-muted) !important; cursor: not-allowed; box-shadow: none !important; opacity: 0.7; }

/* RESULT BOXES */
.mc-result { padding: 24px; background: var(--mc-bg-card); border: none !important; border-radius: 16px !important; box-shadow: var(--mc-shadow-card) !important; margin-top: 24px; animation: mcFadeIn 0.4s ease; width: 100%; }
.mc-result-white-box { background: #ffffff !important; border: 1px solid var(--mc-border); padding: 20px; border-radius: 12px; margin-bottom: 16px; box-shadow: var(--mc-shadow-sm); }
.mc-result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; }
.mc-result-card { background: #ffffff !important; border: 1px solid var(--mc-border); border-radius: 12px; padding: 20px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mc-result-card-full { grid-column: 1 / -1; }
.mc-result-header { font-size: 14px; font-weight: 700; color: var(--mc-text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; scroll-margin-top: 90px; }
.mc-value-lg { font-size: 36px !important; font-weight: 800 !important; color: var(--mc-dark) !important; line-height: 1; transition: color 0.3s ease; }
.mc-result-desc { font-size: 13px !important; color: var(--mc-text-main) !important; margin: 0; line-height: 1.5; }
.mc-result-desc-highlight { font-weight: 700 !important; font-size: 15px !important; margin-bottom: 8px !important; }

/* BADGES & ALERTS */
.mc-badge { display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.mc-badge-success { background: #dcfce7 !important; color: #166534 !important; }
.mc-badge-warning { background: #fef08a !important; color: #854d0e !important; }
.mc-badge-danger { background: #fee2e2 !important; color: #b91c1c !important; }

.mc-text-success { color: #166534 !important; font-weight: 700 !important; }
.mc-text-warning { color: #c2410c !important; font-weight: 700 !important; }
.mc-text-danger { color: #b91c1c !important; font-weight: 700 !important; }

#mc-core-app.mc-dark-mode .mc-text-success { color: #4ade80 !important; }
#mc-core-app.mc-dark-mode .mc-text-warning { color: #fb923c !important; }
#mc-core-app.mc-dark-mode .mc-text-danger { color: #f87171 !important; }

.mc-alert { padding: 16px; border-radius: 12px !important; font-size: 15px; margin-bottom: 20px; line-height: 1.6; border: 1px solid var(--mc-border) !important; border-left: none !important; }
.mc-alert-info { background: #e5f0ff !important; color: #0056b3 !important; }

/* Added 9 August 2026 with the heart risk calculator, which switches one alert between
   four states to carry the risk band.

   These three had no rule before, and lint did not report them, because every one of them
   appears as a string inside an engine and lint treats a class named in a script as a
   JavaScript hook that needs no rule. That exemption is right for hooks and wrong here: the
   class is a hook AND the thing that colours the box. Worth remembering when reading a
   clean advisory line.

   Colours are held to the same weight as .mc-alert-info rather than being made louder. On a
   page read by the public, a risk band is information, and a red panel that shouts does not
   make the number more accurate. */
.mc-alert-success { background: #e6f4ea !important; color: #1b5e20 !important; }
.mc-alert-warning { background: #fff4e5 !important; color: #8a5200 !important; }
.mc-alert-danger  { background: #fdecea !important; color: #9b1c1c !important; }

#mc-core-app.mc-dark-mode .mc-alert-success { background: rgba(46,125,50,0.18) !important; color: #a5d6a7 !important; }
#mc-core-app.mc-dark-mode .mc-alert-warning { background: rgba(217,119,6,0.18) !important; color: #ffcc80 !important; }
#mc-core-app.mc-dark-mode .mc-alert-danger  { background: rgba(155,28,28,0.18) !important; color: #ef9a9a !important; }

/* ==========================================================================
   HEART RISK CALCULATOR
   Added 9 August 2026. Kept here rather than in the module so that the module
   carries no inline style attributes, per the .mc-nav-request note below.
   ========================================================================== */

/* A hint sits under a field and explains where to find the number being asked for.
   Deliberately quieter than the label and larger than a footnote: readers filling in a
   lipid report need it, and readers who already know can skip it. */
.mc-hint { display: block; margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--mc-text-muted); }
#mc-core-app.mc-dark-mode .mc-hint { color: #a1a1aa; }

.mc-radio-group { display: flex; gap: 12px; }
.mc-radio { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 12px; min-height: 48px; border: 1px solid var(--mc-border); border-radius: 10px; background: var(--mc-bg-card); font-size: 15px; font-weight: 600; color: var(--mc-dark); cursor: pointer; transition: border-color 0.2s, background-color 0.2s; }
.mc-radio:hover { border-color: var(--mc-primary); background: var(--mc-tint-faint); }
.mc-radio input[type="radio"] { width: 20px; height: 20px; accent-color: var(--mc-primary); cursor: pointer; flex-shrink: 0; }
.mc-radio:has(input[type="radio"]:checked) { border-color: var(--mc-primary); background: var(--mc-tint-medium); }
#mc-core-app.mc-dark-mode .mc-radio { background: var(--mc-bg-pill); color: #ffffff; }

.mc-btn-secondary { background: var(--mc-bg-pill) !important; color: var(--mc-dark) !important; margin-top: 12px; }
.mc-btn-secondary:hover { background: var(--mc-border) !important; }
#mc-core-app.mc-dark-mode .mc-btn-secondary { background: #2c2c2e !important; color: #ebebf5 !important; }

/* The number itself. Large, because it is the answer, and centred so that the percent sign
   sits with it rather than trailing off the baseline. */
.mc-result-figure { text-align: center; padding: 12px 0 20px 0; }
.mc-result-number { font-size: 56px; font-weight: 800; line-height: 1; color: var(--mc-primary); letter-spacing: -1px; }
.mc-result-unit { font-size: 28px; font-weight: 700; color: var(--mc-primary); margin-left: 2px; }
#mc-core-app.mc-dark-mode .mc-result-number, #mc-core-app.mc-dark-mode .mc-result-unit { color: var(--mc-primary-dark); }

.mc-list { margin: 0; padding-left: 22px; }
.mc-list li { margin-bottom: 14px; line-height: 1.65; font-size: 15px; color: var(--mc-text-main); }
.mc-list li:last-child { margin-bottom: 0; }
#mc-core-app.mc-dark-mode .mc-list li { color: #d1d1d6; }

/* The health profile line, above the number. It repeats back what the reader entered, so
   that a result seen a week later still says what it was calculated from, and so that a
   mistyped age is visible next to the figure it produced rather than three screens up. */
.mc-profile-line { padding: 14px 16px; margin-bottom: 20px; border-radius: 10px; background: var(--mc-bg-pill); font-size: 15px; line-height: 1.6; color: var(--mc-text-main); }
#mc-core-app.mc-dark-mode .mc-profile-line { background: #2c2c2e; color: #d1d1d6; }

/* Heart age. Smaller than the risk percentage on purpose: it is the supporting figure, and
   two numbers competing at the same size leave the reader unsure which is the answer. */
.mc-result-number-sm { font-size: 40px; font-weight: 800; line-height: 1; color: var(--mc-primary); letter-spacing: -0.5px; }
#mc-core-app.mc-dark-mode .mc-result-number-sm { color: var(--mc-primary-dark); }

/* Advanced analysis panels. The title carries the weight; the body is set at reading size
   rather than footnote size, because these paragraphs are the substance of the section. */
.mc-analysis-title { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.mc-analysis-body { font-size: 15px; line-height: 1.65; }

/* Per-habit verdict pill, convenience-risk. Added 9 August 2026.

   Written by hand here rather than left to lint to catch, because lint would NOT have
   caught it: these class names appear only inside an engine, and the unstyled-class check
   treats any class named in a script as a JavaScript hook needing no rule. That exemption
   already hid three missing alert colours once. A class that is both a hook and the thing
   that colours the element is the case the exemption gets wrong.

   Deliberately quiet. A verdict on somebody's sleep is information, and a loud red pill
   beside the word "Sleep" changes how the reader feels without telling them anything more. */
.mc-verdict { display: inline-block; margin-left: 10px; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; letter-spacing: 0.2px; text-transform: none; vertical-align: middle; }
.mc-verdict-good { background: #e6f4ea; color: #1b5e20; }
.mc-verdict-fair { background: #fff4e5; color: #8a5200; }
.mc-verdict-work { background: #fdecea; color: #9b1c1c; }

#mc-core-app.mc-dark-mode .mc-verdict-good { background: rgba(46,125,50,0.22); color: #a5d6a7; }
#mc-core-app.mc-dark-mode .mc-verdict-fair { background: rgba(217,119,6,0.22); color: #ffcc80; }
#mc-core-app.mc-dark-mode .mc-verdict-work { background: rgba(155,28,28,0.22); color: #ef9a9a; }
#mc-core-app.mc-dark-mode .mc-alert-info { background: rgba(59, 130, 246, 0.15) !important; color: #93c5fd !important; }

/* ==========================================================================
   GLOBAL FOOTERS & REFERENCES
   ========================================================================== */
.mc-global-footer { position: relative; background: var(--mc-bg-card); border: 1px solid var(--mc-border); border-radius: 16px; margin-bottom: 24px; box-shadow: var(--mc-shadow-sm); overflow: hidden; width: 100%; }

/* The Tri-Color Glow Accent Line */
.mc-footer-accent { height: 5px; width: 100%; background: linear-gradient(to right, #FF9933 0%, #FFFFFF 50%, #138808 100%); box-shadow: 0 2px 15px rgba(255, 153, 51, 0.4), 0 2px 15px rgba(19, 136, 8, 0.4); border-bottom: none; }
.mc-footer-content { padding: 20px; }
.mc-footer-disclaimer { font-size: 13px; color: var(--mc-text-muted); line-height: 1.5; text-align: justify; }
.mc-footer-disclaimer strong { color: var(--mc-text-main); font-weight: 700; }
.mc-footer-divider { height: 1px; background: var(--mc-border-light); width: 100%; margin: 16px 0; border: none; }
.mc-footer-copyright { text-align: center; display: flex; flex-direction: column; gap: 4px; }
.mc-footer-org { font-size: 15px; font-weight: 800; color: var(--mc-dark); }
.mc-footer-author { font-size: 13px; color: var(--mc-text-muted); }
.mc-footer-author strong { color: var(--mc-text-main); font-weight: 600; }
.mc-stealth-link { color: inherit !important; text-decoration: none !important; padding: 2px 6px; margin: 0 -2px; border-radius: 6px; transition: all 0.2s ease; }
.mc-stealth-link:hover { background-color: rgba(142, 142, 147, 0.15); color: var(--mc-dark) !important; }

.mc-bottom-nav { background: var(--mc-bg-card); border: 1px solid var(--mc-border); border-radius: 12px; margin: 0 auto 24px auto; box-shadow: var(--mc-shadow-sm); display: flex; flex-direction: column; overflow: hidden; width: 100%; transition: border-color 0.2s; }
.mc-nav-link { display: flex; align-items: center; justify-content: center; padding: 18px 16px; font-size: 16px; font-weight: 700; color: var(--mc-dark); text-decoration: none; transition: background-color 0.2s, color 0.2s; cursor: pointer; }
.mc-nav-link svg { transition: transform 0.2s ease; }
.mc-nav-link:hover { background-color: var(--mc-tint-light); color: var(--mc-primary); }
.mc-nav-link:hover svg { transform: translateX(-5px); }

.mc-nav-divider { height: 1px; background: var(--mc-border); width: 100%; margin: 0; border: none; }
.mc-nav-link.feedback { color: var(--mc-text-muted); font-size: 14px; font-weight: 500; }
.mc-nav-link.feedback:hover { background-color: rgba(0, 0, 0, 0.02); color: var(--mc-text-main); }

/* The tool-request link on the hub. Added 8 August 2026: the class was on the markup with
   no rule anywhere, and its layout was carried by an inline style attribute instead.

   The second rule is the reason this is worth writing down. .mc-nav-link:hover svg slides
   the icon five pixels left, which reads correctly on the back link because it is a left
   arrow. This link is a plus in a circle, stacked above its own label, and the same rule
   made it drift sideways away from the text under it. Resetting the transform here is not
   cosmetic tidying, it is undoing a rule that was written for a different icon. */
.mc-nav-link.mc-nav-request { flex-direction: column; text-align: center; }
.mc-nav-link.mc-nav-request:hover svg { transform: none; }

#mc-core-app.mc-dark-mode .mc-global-footer, #mc-core-app.mc-dark-mode .mc-bottom-nav { background-color: #1e1e1e !important; border-color: #38383a !important; }
#mc-core-app.mc-dark-mode .mc-footer-accent { border-bottom-color: #38383a !important; }
#mc-core-app.mc-dark-mode .mc-footer-divider, #mc-core-app.mc-dark-mode .mc-nav-divider { background-color: #2c2c2e !important; }
#mc-core-app.mc-dark-mode .mc-footer-org { color: #ffffff !important; }
#mc-core-app.mc-dark-mode .mc-footer-disclaimer, #mc-core-app.mc-dark-mode .mc-footer-author, #mc-core-app.mc-dark-mode .mc-nav-link.feedback { color: #a1a1aa !important; }
#mc-core-app.mc-dark-mode .mc-footer-disclaimer strong, #mc-core-app.mc-dark-mode .mc-footer-author strong { color: #ebebf5 !important; }
#mc-core-app.mc-dark-mode .mc-nav-link { color: #ffffff !important; }
#mc-core-app.mc-dark-mode .mc-nav-link:hover { background-color: rgba(255, 255, 255, 0.05) !important; color: var(--mc-primary) !important; }

/* Share Button */
/* ==========================================================================
   SHARE BUTTON

   This was a full-width solid maroon gradient with a drop shadow and 700 weight: the loudest
   element on the page, louder than the calculate button that is the actual purpose of the
   page, and sitting directly beneath a disclaimer asking the reader to take their result to
   a doctor. Visual weight is a claim about importance, and that one was making the wrong
   claim on a page about somebody's heart risk.

   It now matches the CDSS share button exactly: tinted fill, hairline border, primary-
   coloured text. Offered, not urged. The two systems having the same control look the same
   way is the point, and it is why the values below are the CDSS values rather than new ones.
   ========================================================================== */
/* The 24px top margin is not decoration. The button previously had a bottom margin only, so
   it sat flush against whatever preceded it, and once the provenance stamp was added above it
   the two boxes touched: a bordered box and a bordered button sharing an edge read as one
   control, and the stamp looked clickable. Keep both margins. */
.mc-btn-share { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 16px; margin: 24px 0; background: var(--mc-tint-light); color: var(--mc-primary); border: 1px solid var(--mc-tint-shadow); border-radius: 12px; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: none; transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.mc-btn-share:hover { background: var(--mc-tint-focus); }
.mc-btn-share:active { transform: scale(0.99); }

@keyframes mcFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ==========================================================================
   TABS (PILL BOX MENU) & PANELS
   ========================================================================== */
/*
 * These are the CDSS values, adopted 9 August 2026 so the two systems present tabs the same
 * way. Two things changed and both were faults rather than preferences.
 *
 * THE OVERLAP. The container used to carry margin-top: -20px, which lifted the bar up over
 * the bottom edge of the header. That worked while the header ended just below the subtitle.
 * It stopped working the moment the header grew a language switch: the bar rode up over the
 * switch and the gold rule, half-covering both. A negative margin tuned to the height of
 * something else is a dependency that nothing declares and no test can see, and it broke on
 * the first day that other thing changed. The bar now sits below the header in normal flow.
 *
 * THE STICKY OFFSET. The CDSS uses top: 0 here. Copying that would be wrong on this site,
 * because .mc-app-nav is itself sticky at top: 0 and 61px tall, so a tab bar sticking to 0
 * slides underneath it and disappears exactly when a reader scrolling a long form most needs
 * it. It sticks below the nav instead. This is the one deliberate divergence from the CDSS
 * values, and it is a divergence because the CDSS has the same latent problem.
 *
 * The active tab takes --mc-dark rather than --mc-primary, matching the CDSS. On maroon,
 * primary-coloured active text against a white pill reads as a link rather than a selection.
 */
.mc-tabs-container { position: sticky; top: 61px; z-index: 50; background: var(--mc-bg-app); padding: 24px 16px 8px 16px; margin: 0 0 8px 0; }
.mc-tabs { display: flex; background: rgba(0,0,0,0.06); border-radius: 10px; padding: 4px; margin: 0 auto; max-width: 500px; border: none; }
.mc-tab { flex: 1; padding: 8px 10px; background: transparent; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; color: var(--mc-text-muted); cursor: pointer; transition: all 0.2s; outline: none; font-family: inherit; }
.mc-tab:hover { color: var(--mc-text-main); }
.mc-tab.active { background: #ffffff; color: var(--mc-dark); box-shadow: var(--mc-shadow-pill); font-weight: 700; }

.mc-panel { display: none; animation: mcFadeIn 0.3s ease; }
.mc-panel.active { display: block; }

#mc-core-app.mc-dark-mode .mc-tabs { background: rgba(255,255,255,0.1); }
#mc-core-app.mc-dark-mode .mc-tab { color: rgba(255,255,255,0.5); background: transparent; box-shadow: none; }
#mc-core-app.mc-dark-mode .mc-tab.active { background: #3a3a3c; color: #ffffff; box-shadow: 0 2px 8px rgba(0,0,0,0.5); }

/* ==========================================================================
   CHECKBOX FIELDS (For Clinical Tools)
   ========================================================================== */
.mc-check-field { display: flex; align-items: flex-start; padding: 16px; border: 1px solid var(--mc-border); border-radius: 12px; cursor: pointer; transition: all 0.2s; background: var(--mc-bg-card); margin-bottom: 12px; text-decoration: none; }
.mc-check-field:hover { border-color: var(--mc-primary); background: var(--mc-tint-faint); }
.mc-check-field input[type="checkbox"] { margin-top: 2px; margin-right: 14px; width: 20px; height: 20px; accent-color: var(--mc-primary); cursor: pointer; flex-shrink: 0; }
.mc-check-label { display: flex; flex-direction: column; cursor: pointer; }
.mc-check-label .en-text, .mc-check-label .kn-text { font-size: 15px; font-weight: 600; color: var(--mc-dark); line-height: 1.4; }
.mc-check-danger { border-left: 4px solid var(--mc-primary); }

#mc-core-app.mc-dark-mode .mc-check-field { background: var(--mc-bg-pill); border-color: var(--mc-border); }
#mc-core-app.mc-dark-mode .mc-check-field:hover { border-color: var(--mc-primary); background: rgba(var(--mc-primary-dark-rgb), 0.1); }
#mc-core-app.mc-dark-mode .mc-check-label .en-text, #mc-core-app.mc-dark-mode .mc-check-label .kn-text { color: #ffffff; }
/* =========================================================
   PERSPECTIVE CARD
   Added 7 August 2026, replacing the Integration Toolbox toggles.

   .mc-tool-btn and .mc-tool-content were used by mind-spirit-compass but had no rules in
   this stylesheet at all, so the toggles rendered as bare outlined labels with the text
   running loose underneath. An invented class name is not a visual error, it is silently
   unstyled inline flow, which reads as clutter rather than as breakage. Check that a class
   exists here before using it.
   ========================================================= */
#mc-core-app .mc-perspective-card {
    background: var(--mc-bg-card);
    border-left: 4px solid var(--mc-primary);
    border-radius: 12px;
    padding: 20px 22px;
    margin-top: 28px;
    box-shadow: var(--mc-shadow-card);
}
#mc-core-app .mc-perspective-title {
    font-size: 17px !important;
    font-weight: 800;
    color: var(--mc-primary) !important;
    margin: 0 0 10px 0;
    line-height: 1.4;
    font-family: 'Merriweather', Georgia, serif;
}
#mc-core-app .mc-perspective-body {
    font-size: 16px !important;
    color: var(--mc-text-main) !important;
    line-height: 1.7 !important;
    margin: 0;
}
#mc-core-app.mc-dark-mode .mc-perspective-card { background: var(--mc-bg-card); }

/* =========================================================
   RECOMMENDATION BLOCKS
   convenience-risk, 7 August 2026. The output used to be one generic paragraph per band;
   it now gives a goal and a concrete next step for each of the five habits.
   ========================================================= */
#mc-core-app .mc-rec-block {
    background: var(--mc-bg-card);
    border: 1px solid var(--mc-border-light);
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 14px;
    box-shadow: var(--mc-shadow-sm);
}
#mc-core-app .mc-rec-domain {
    font-size: 12px !important;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--mc-text-muted) !important;
    margin-bottom: 6px;
}
#mc-core-app .mc-rec-goal {
    font-size: 16px !important;
    font-weight: 700;
    color: var(--mc-primary) !important;
    line-height: 1.45;
    margin-bottom: 8px;
}
#mc-core-app .mc-rec-body {
    font-size: 15px !important;
    color: var(--mc-text-main) !important;
    line-height: 1.7 !important;
    margin: 0;
}
#mc-core-app .mc-rec-score {
    font-size: 13px !important;
    color: var(--mc-text-muted) !important;
    margin-top: 4px;
}
#mc-core-app .mc-rec-list { margin: 0; padding-left: 20px; }
#mc-core-app .mc-rec-list li {
    font-size: 15px !important;
    color: var(--mc-text-main) !important;
    line-height: 1.7 !important;
    margin-bottom: 12px !important;
}
#mc-core-app .mc-rec-list li:last-child { margin-bottom: 0 !important; }