/* ==========================================================================
   MEDiscuss CDSS Master Stylesheet v8.1 (Unified Architecture & App Mode)
   Architecture: Adaptive Grid, Pure iOS, Strict Theme Overrides
   ========================================================================== */
/* Merriweather is loaded by a <link rel="preconnect"> and <link rel="stylesheet"> in the head
   of index.php rather than by @import here. An @import is fetched only after this file has
   downloaded and parsed, so the font request was serialised behind a 49 KB stylesheet on a ward
   connection. The head links start both requests together. Do not put it back. */

/* ── ACCENTS ─────────────────────────────────────────────────────────────────────────────
   Set by the picker in the navigation bar and remembered per device. Maroon is the default and
   the house colour; the other two exist because a clinician reading a screen all day is
   entitled to choose what colour is shouting at them. */
:root,
/* The dark variant is a rose, not an amber. #800000 has a hue of 0; #f2a65a has a hue of 27 and
   read as orange, which is what it is. A colour that is light enough for a dark ground and still
   recognisably maroon is a desaturated red, and that is #f5a9a9. Deliberately softer than the
   danger tint (#ff8a80) it sits near: the accent is structure, danger is a warning, and the two
   must not be mistaken for each other at a glance. */
html[data-accent="maroon"]     { --mc-accent: #800000; --mc-accent-hover: #660000; --mc-accent-rgb: 128,0,0;    --mc-accent-dark: #f5a9a9; --mc-accent-dark-rgb: 245,169,169; }
html[data-accent="clinical"]   { --mc-accent: #1a4f8a; --mc-accent-hover: #143d6b; --mc-accent-rgb: 26,79,138;  --mc-accent-dark: #7cc4ff; --mc-accent-dark-rgb: 124,196,255; }
html[data-accent="plum"]       { --mc-accent: #6b3a86; --mc-accent-hover: #552e6b; --mc-accent-rgb: 107,58,134; --mc-accent-dark: #c9a4f0; --mc-accent-dark-rgb: 201,164,240; }
/* Terracotta and teal were withdrawn on 15 August 2026, before any accent was stored server
   side. The note that used to sit here recorded that terracotta was the one accent whose own
   9 per cent tint left it at 4.47:1 on the Share control and needed a darker step; that finding
   is kept because it is the reason the tint ratios are swept across every accent rather than
   checked on the default one. */

:root {
    --mc-primary: var(--mc-accent); --mc-primary-hover: var(--mc-accent-hover);
    --mc-primary-rgb: var(--mc-accent-rgb);
    /* What goes ON the accent. White in light, where every accent is deep; the ground in dark,
       where every accent is light. One declaration instead of five dark overrides. */
    --mc-on-primary: #ffffff;
    --mc-gold: #8a5a00; --mc-blue: #005fcc;
    --mc-bg-app: var(--mc-n-25); --mc-bg-card: var(--mc-n-0); --mc-bg-pill: var(--mc-n-100);
    --mc-dark: var(--mc-n-900); --mc-text-main: var(--mc-n-600); --mc-text-muted: var(--mc-n-500);
    --mc-border-light: var(--mc-n-150); --mc-border: var(--mc-n-300);

    /* ── THE NEUTRAL RAMP ────────────────────────────────────────────────────────────────
       Nine steps, one family. Declared now and used by --mc-text-muted only; the remaining
       tokens above still carry their original literals so that stage 1 changes contrast and
       nothing else. Stage 2 re-points them here, which is a one-file edit once every grey in
       the product resolves through this block.

       WHY A RAMP AT ALL. Before this, the neutrals came from four different systems: Apple's
       system greys (#8e8e93, #d1d1d6, #e5e5ea, #f2f2f7), Tailwind slate (#64748b, #475569,
       #cbd5e1), Tailwind zinc (#71717a, #a1a1aa) and Tailwind gray (#6b7280). They do not
       share a hue, so borders and labels drifted warm and cool against each other. */
    /*
     * PURE WHITE, and the "deliberately" that used to sit here has been withdrawn.
     *
     * #fcfdfe on a #eceff4 page is a difference of about four units per channel. It reads as one
     * surface rather than two, which is what "the light version looks very plain" was describing.
     * The card now separates from the page by fifteen units and carries a drawn hairline and a
     * shadow with enough spread to be seen, so a card is an object on a surface rather than a
     * slightly paler region of it.
     */
    --mc-n-0:   #ffffff;   /* cards */
    --mc-n-25:  #e3e8ef;   /* the page itself, one step deeper so the cards lift off it */
    --mc-n-50:  #f4f6f9;   /* raised page tints */
    --mc-n-150: #d5dde7;   /* hairlines inside a card, drawn rather than implied */
    --mc-n-100: #dae1ea;   /* pill and inactive surfaces. One step deeper than it was, because
                              light option A took the page to #e3e8ef and left this within a unit
                              of it: a track the same colour as the page is not a track. */
    --mc-n-200: #d7dee6;   /* hairlines */
    --mc-n-300: #c6cfda;   /* input borders */
    --mc-n-400: #9aa7b5;   /* disabled text, decorative only, never body copy */
    --mc-n-500: #526271;   /* muted text. The lightest step that passes AA everywhere */
    --mc-n-600: #3d4a58;
    --mc-n-700: #26313c;
    --mc-n-900: #0f172a;   /* ink */

    /* Focus ring. Its own token because the ring must stay visible against whatever it
       surrounds, which is a different requirement from any text or border colour. */
    --mc-focus: #005fcc;

    /* THE SANS STACK, NAMED ONCE.
       These pages are served inside a site whose body font is a serif, so anything that does not
       state a stack inherits Georgia. #mc-core-app forces it for the application; every
       container OUTSIDE #mc-core-app has to ask for it, and three of them were each solving that
       privately before this token existed. Anything new that renders outside the application
       reads this. */
    --mc-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mc-shadow-sm: 0 1px 2px rgba(15,23,42,0.04);
    --mc-shadow-card: 0 1px 2px rgba(15,23,42,0.04), 0 8px 24px -12px rgba(15,23,42,0.16);
    --mc-shadow-pill: 0 1px 3px rgba(15,23,42,0.14);
}

#mc-core-app, #mc-core-app * { box-sizing: border-box !important; }

/* THE HIDDEN ATTRIBUTE HAS TO WIN.
   [hidden] is display:none in the user agent stylesheet only, so any author display rule
   overrides it. Several elements here are laid out with display:flex or display:grid and
   toggled with .hidden = true from script, and every one of them was ignoring it. The result
   panel's own [hidden] is not affected; this is about elements that carry a display rule. */
[hidden] { display: none !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: var(--mc-font-sans) !important; }

/* EVERYTHING OUTSIDE #mc-core-app.
   The navigation bar, its menu and the rail all sat outside the rule above and were rendering in
   the host site's Georgia: the menu headings, the theme control, both links, and every label in
   the rail. Stated on the containers and inherited, rather than repeating a stack per component,
   which is what let three separate places solve this privately and a fourth and fifth inherit
   the problem. */
.mc-app-nav, .mc-app-nav button, .mc-app-nav input, .mc-app-nav select, .mc-app-nav a,
.mc-menu, .mc-menu button, .mc-menu a, .mc-menu p,
.mcx-rail, .mcx-rail a, .mcx-rail p, .mcx-rail button, .mcx-rail span, .mcx-rail li {
    font-family: var(--mc-font-sans);
}

#mc-core-app .mc-header {
    background-color: var(--mc-bg-card);
    background-image: linear-gradient(rgba(var(--mc-primary-rgb), 0.035), rgba(var(--mc-primary-rgb), 0.035));
    border: 1px solid var(--mc-border-light);
    border-radius: 14px;
    padding: 22px 22px 20px;
    margin-bottom: 18px;
    text-align: left;
    color: var(--mc-text-main);
    position: relative;
    box-shadow: var(--mc-shadow-sm);
}
#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; }
/* Weight 700 rather than 900. Merriweather's heaviest weight is a display weight and it was
   doing display work in a utility position, which is what made the old banner read as a
   certificate rather than as a tool. */
#mc-core-app .mc-title { font-size: 25px !important; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 4px; color: var(--mc-dark) !important; }
#mc-core-app .mc-subtitle { font-size: 14.5px; font-weight: 400; color: var(--mc-text-muted) !important; display: block; line-height: 1.45; }

/* ==========================================================================
   SEO HEADING RESET (Added for v7.0/v8.2 architecture)
   Ensures H1, H2, H3 tags do not inherit unwanted browser default margins
   ========================================================================== */
#mc-core-app h1.mc-title, 
#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;
}
/* ==========================================================================
   GLOBAL LIST ALIGNMENT FIX
   Ensures all lists remain left-aligned even inside centered result cards
   ========================================================================== */
#mc-core-app ul, 
#mc-core-app ol li {
    text-align: left !important;
    width: 100% !important; /* Forces the list block to span the full container width */
    padding-left: 24px !important; /* Ensures bullets have breathing room from the left edge */
    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 (ROOT & FORTRESS)
   ========================================================================== */
html.mc-dark-mode,
#mc-core-app.mc-dark-mode {
    --mc-primary: var(--mc-accent-dark); --mc-primary-hover: var(--mc-accent-dark);
    --mc-primary-rgb: var(--mc-accent-dark-rgb);
    --mc-on-primary: #070a0e;
    --mc-gold: #f2a65a; --mc-blue: #5ec8f5;
    --mc-bg-app: #070a0e; --mc-bg-card: #171f29; --mc-bg-pill: #212c38;
    --mc-bg-raise: #27333f;
    --mc-dark: #e8eef4; --mc-text-main: #c3cdd7; --mc-text-muted: #8fa0af;
    --mc-border-light: #212c38; --mc-border: #2b3846;
    --mc-shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
    --mc-shadow-card: 0 1px 2px rgba(0,0,0,0.5), 0 10px 28px -14px rgba(0,0,0,0.8);
    --mc-shadow-pill: 0 1px 3px rgba(0,0,0,0.6);
    --mc-focus: #7cc4ff;
}

/* The light theme needs the same name available so a component can raise a surface without
   asking which theme it is in. */
:root { --mc-bg-raise: var(--mc-n-50); }

/* See the note above: the nav is outside #mc-core-app and needs the same value. */
html.mc-dark-mode {
    --mc-focus: #7cc4ff;
}

/* The dark override is gone: the header resolves the same tokens as everything else. */
#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[style], #mc-core-app.mc-dark-mode span[style], #mc-core-app.mc-dark-mode font[style], #mc-core-app.mc-dark-mode div[style], #mc-core-app.mc-dark-mode li { color: var(--mc-text-main) !important; }
#mc-core-app.mc-dark-mode .mc-result-white-box, #mc-core-app.mc-dark-mode .mc-result-white-box[style], #mc-core-app.mc-dark-mode .mc-result-card, #mc-core-app.mc-dark-mode .mc-result-card[style] { 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, SEPARATORS & CLEAR BUTTON
   ========================================================================== */
#mc-core-app {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 16px 16px 0;
    background: transparent;
    border-radius: 0 !important;
    box-shadow: none !important;
    /* overflow:hidden is gone with the sheet. It was also clipping the sticky tab bar's
       containing block, which is why the tabs sometimes did not stick. */
    overflow: visible;
    color: var(--mc-text-main);
    line-height: 1.5;
    font-size: 16px;
}
/* Installed as an app, the page fills the screen and the operating system's own bar sits at the
   bottom. Reported on a phone: the sheet's rounded bottom corners floated above that bar and
   read as a rendering fault. There is no sheet now, and the safe area is respected. */
@media (display-mode: standalone) {
    #mc-core-app { padding-bottom: env(safe-area-inset-bottom, 0px); }
    body { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

.mc-body { padding: 0 0 24px; }
.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; }
/* The colour was #71717a, 3.45:1 on #1e1e1e. Removing it lets the control inherit the dark
   theme's own --mc-text-muted, #a1a1aa, which is 6.50:1. */
#mc-core-app.mc-dark-mode .mc-btn-clear { border-color: var(--mc-border) !important; }
#mc-core-app.mc-dark-mode .mc-btn-clear:hover { color: var(--mc-text-main) !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: 18px !important; font-weight: 700; letter-spacing: -0.01em; color: var(--mc-dark) !important; margin-bottom: 16px; border-bottom: 1px solid var(--mc-border-light); padding-bottom: 10px; padding-right: 80px; position: relative; }
/* A short accent segment under the start of each card heading. It marks where a section begins
   without underlining the whole width in a brand colour, which is what the old gold rule did. */
.mc-heading::after, .mc-heading-lg::after {
    content: ""; position: absolute; left: 0; bottom: -1px; width: 34px; height: 2px;
    background: var(--mc-primary); border-radius: 1px;
}
.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; } }

/* ==========================================================================
   SEAMLESS STICKY TABS & TOOLTIPS
   ========================================================================== */
.mc-tabs-container { position: sticky; top: 0; z-index: 50; background: var(--mc-bg-app); padding: 24px 16px 8px 16px; margin: 0; }
.mc-tabs { display: flex; background: var(--mc-bg-pill) !important; border-radius: 10px !important; padding: 4px; border: none !important; margin: 0 auto; max-width: 500px; } 
.mc-tab { flex: 1; padding: 8px 10px; background: transparent; border: none !important; border-radius: 8px !important; font-size: 15px !important; font-weight: 600 !important; color: var(--mc-text-main) !important; cursor: pointer; transition: all 0.2s; outline: none; }
.mc-tab.active { background: var(--mc-bg-card) !important; color: var(--mc-dark) !important; box-shadow: var(--mc-shadow-pill) !important; font-weight: 700 !important; }
.mc-panel { display: none; animation: mcFadeIn 0.3s ease; padding-top: 16px; }
.mc-panel.active { display: block; }
@keyframes mcFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* The dark override is gone with the opacity: --mc-bg-pill carries its own dark value. */
/* rgba(255,255,255,0.5) on the dark pill was 4.65:1, which passes but only just, and it is a
   value rather than a decision. The muted token is 5.71:1 there and is the same grey every
   other inactive label in the product uses. */
#mc-core-app.mc-dark-mode .mc-tab { color: var(--mc-text-main) !important; background: transparent !important; box-shadow: none !important; }
#mc-core-app.mc-dark-mode .mc-tab.active { background: var(--mc-bg-raise) !important; color: var(--mc-dark) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important; }

.mc-tooltip-trigger { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--mc-bg-pill); color: var(--mc-text-muted); font-size: 11px; font-weight: 800; margin-left: 6px; cursor: help; position: relative; vertical-align: middle; }
.mc-tooltip-trigger::after { content: attr(data-tooltip); position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%); width: max-content; max-width: 220px; padding: 8px 12px; background-color: var(--mc-n-900) !important; color: #ffffff !important; font-size: 12px; font-weight: 500; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important; opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 2147483647 !important; text-transform: none; line-height: 1.4; text-align: center; }.mc-tooltip-trigger:hover::after, .mc-tooltip-trigger:focus::after { opacity: 1; }
.mc-tooltip-trigger:focus { outline: 2px solid var(--mc-blue); outline-offset: 2px; }
#mc-core-app.mc-dark-mode .mc-tooltip-trigger::after { background-color: var(--mc-dark) !important; color: var(--mc-bg-app) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.9) !important; }

/* ==========================================================================
   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, .mc-label font { 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: var(--mc-text-main) !important; }

.mc-input-wrapper { position: relative; display: flex; align-items: center; width: 100%; }
.mc-input-wrapper .mc-input { padding-right: 48px !important; }
.mc-input-unit { position: absolute; right: 16px; color: var(--mc-text-muted); font-size: 15px; font-weight: 600; pointer-events: none; }
.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 rgba(var(--mc-primary-rgb),0.14) !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; }

/* Hide native inputs inside custom UI 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-segment-btn's dark override was #71717a on the #2c2c2e pill, 2.88:1. The rule is
   removed rather than recoloured: the base rule already resolves var(--mc-text-muted), which
   is #a1a1aa in dark mode and gives 5.44:1. */
#mc-core-app.mc-dark-mode .mc-segmented-control input[type="radio"]:checked + .mc-segment-btn { color: var(--mc-on-primary) !important; }

/* Unified styling for Radio and Checkbox cards (.mc-v-card) */
.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: rgba(var(--mc-primary-rgb), 0.05) !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; }

/* ==========================================================================
   ADVANCED LIST CONTROLS (.mc-check-field) - For AFib, VTE, Antimicrobial
   ========================================================================== */
.mc-check-field { display: flex !important; align-items: center !important; gap: 10px !important; padding: 12px 16px !important; background: var(--mc-bg-card) !important; border: 1px solid var(--mc-border-light) !important; border-radius: 10px !important; cursor: pointer !important; transition: all 0.2s !important; margin-bottom: 12px !important; }
.mc-check-field:hover { border-color: var(--mc-border) !important; }
.mc-check-field input[type="checkbox"] { width: 20px !important; height: 20px !important; accent-color: var(--mc-primary) !important; cursor: pointer !important; flex-shrink: 0 !important; }
.mc-check-field span { font-size: 15px !important; font-weight: 600 !important; color: var(--mc-text-main) !important; }
.mc-check-label { flex: 1 !important; }
.mc-check-pts { margin-left: auto !important; font-size: 14px !important; font-weight: 900 !important; color: var(--mc-primary) !important; flex-shrink: 0 !important; white-space: nowrap !important; }

/* Semantic variants for List Controls */
.mc-check-highlight { background: #eff6ff !important; border-color: #bfdbfe !important; }
.mc-check-highlight span { color: var(--mc-blue) !important; }
.mc-check-valvular, .mc-check-danger { background: #fef2f2 !important; border-color: #fca5a5 !important; }
.mc-check-valvular span.mc-check-label, .mc-check-danger span { color: #991b1b !important; }
.mc-check-r2 { background: #fefbf0 !important; border-color: #fde047 !important; }
.mc-check-r2 span.mc-check-label { color: #854d0e !important; }
.mc-check-success { background: #f0fdf4 !important; border-color: #86efac !important; }
.mc-check-success span:not(.mc-check-pts), .mc-check-success .mc-check-pts { color: #166534 !important; }

/* Pathway Score Tags (AFib) */
.mc-score-tag { display: inline-flex !important; align-items: center !important; font-weight: 800 !important; padding: 4px 8px !important; border-radius: 4px !important; font-size: 12px !important; white-space: nowrap !important; margin-left: auto !important; flex-shrink: 0 !important; }
.mc-score-tag + .mc-score-tag { margin-left: 4px !important; }
.mc-score-tag-stroke { color: #991b1b !important; background: #fdf2f2 !important; border: 1px solid #fca5a5 !important; }
.mc-score-tag-bleed { color: #1e3a8a !important; background: #eff6ff !important; border: 1px solid #bfdbfe !important; }

/* Dark Mode Overrides for List Controls */
#mc-core-app.mc-dark-mode .mc-check-field { background: var(--mc-bg-card) !important; border-color: var(--mc-border) !important; }
#mc-core-app.mc-dark-mode .mc-check-field span { color: var(--mc-text-main) !important; }
#mc-core-app.mc-dark-mode .mc-check-highlight { background: rgba(59, 130, 246, 0.1) !important; border-color: rgba(59, 130, 246, 0.3) !important; }
#mc-core-app.mc-dark-mode .mc-check-highlight span { color: #93c5fd !important; }
#mc-core-app.mc-dark-mode .mc-check-valvular, #mc-core-app.mc-dark-mode .mc-check-danger { background: rgba(239, 68, 68, 0.1) !important; border-color: rgba(239, 68, 68, 0.3) !important; }
#mc-core-app.mc-dark-mode .mc-check-valvular span.mc-check-label, #mc-core-app.mc-dark-mode .mc-check-danger span { color: #fca5a5 !important; }
#mc-core-app.mc-dark-mode .mc-check-r2 { background: rgba(253, 224, 71, 0.1) !important; border-color: rgba(253, 224, 71, 0.3) !important; }
#mc-core-app.mc-dark-mode .mc-check-r2 span.mc-check-label { color: #fcd34d !important; }
#mc-core-app.mc-dark-mode .mc-check-success { background: rgba(34, 197, 94, 0.1) !important; border-color: rgba(34, 197, 94, 0.3) !important; }
#mc-core-app.mc-dark-mode .mc-check-success span:not(.mc-check-pts), #mc-core-app.mc-dark-mode .mc-check-success .mc-check-pts { color: #86efac !important; }
#mc-core-app.mc-dark-mode .mc-score-tag-stroke { background: rgba(239, 68, 68, 0.15) !important; color: #fca5a5 !important; border-color: rgba(239, 68, 68, 0.3) !important; }
#mc-core-app.mc-dark-mode .mc-score-tag-bleed { background: rgba(59, 130, 246, 0.15) !important; color: #93c5fd !important; border-color: rgba(59, 130, 246, 0.3) !important; }

/* =========================================================
   DARK MODE FIX FOR TOOL RESULT BOXES
   ========================================================= */
#mc-core-app.mc-dark-mode .mc-result-box,
#mc-core-app.mc-dark-mode .mc-result-card,
#mc-core-app.mc-dark-mode .mc-result-group,
#mc-core-app.mc-dark-mode .mc-data-box {
    background-color: var(--mc-bg-card) !important;
    border-color: var(--mc-border) !important;
}

/* Ensure inner borders inside the results also turn dark */
#mc-core-app.mc-dark-mode .mc-result-box hr,
#mc-core-app.mc-dark-mode .mc-result-card hr {
    border-color: var(--mc-border) !important;
}

/* ==========================================================================
   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: var(--mc-on-primary) !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; }
/* In dark mode --mc-primary is the coral #ff5252, and white on it is 3.19:1. Dark ink gives
   5.33:1, and it is what .mc-serial-btn and .mc-signin-primary already do in dark mode, so
   this closes a contrast failure and an inconsistency in the same line. */
/* The dark override for the primary button label is gone: --mc-on-primary carries it. */
.mc-btn-copy { background: var(--mc-bg-pill) !important; color: var(--mc-dark) !important; font-size: 14px !important; padding: 10px 16px !important; border-radius: 8px !important; margin-top: 16px; display: inline-flex; align-items: center; justify-content: center; width: auto; font-weight: 700 !important; border: none !important; cursor: pointer; }

/* 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%; }

/* THE STICKY RESULT IS WITHDRAWN, 15 August 2026. Stage 3 made a result stick so a long form
   kept its answer in view. On a long result it produced a panel scrolling inside a page that
   also scrolls, with two scrollbars and no way to tell which one is moving. The height guard
   meant it did that only on some screens, which is worse than doing it on all of them. The
   media query is kept as a no-op shell so the note stays with the code it is about. */
@media (min-width: 1024px) and (min-height: 700px) {
    #mc-core-app .mc-result {
        position: static;
    }
    /* A sticky element with its own scrollbar loses the card's rounded corner against the
       scrollbar track on some platforms; padding keeps the numbers clear of it. */
    #mc-core-app .mc-result::-webkit-scrollbar { width: 8px; }
    #mc-core-app .mc-result::-webkit-scrollbar-thumb { background: var(--mc-border); border-radius: 4px; }
    #mc-core-app .mc-result::-webkit-scrollbar-track { background: transparent; }
}
/* Printing a stuck, clipped panel would cut the result off at the fold. */
@media print { #mc-core-app .mc-result { position: static !important; max-height: none !important; overflow: visible !important; } }
.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; }
.mc-result-value-group { display: flex; align-items: baseline; justify-content: center; margin-bottom: 12px; }
.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-unit { font-size: 16px; font-weight: 600; color: var(--mc-text-muted); margin-left: 6px; }
.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; }

.mc-data-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px dashed var(--mc-border-light); }
.mc-data-row:last-child { border-bottom: none; }
.mc-data-label { font-size: 15px; font-weight: 600; color: var(--mc-text-main); }
.mc-data-value { font-size: 16px; font-weight: 700; color: var(--mc-dark); text-align: right; }

/* ==========================================================================
   BADGES, ALERTS, & SEMANTIC COLORS
   ========================================================================== */
.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-alert { background: #ffedd5 !important; color: #c2410c !important; }
.mc-badge-danger { background: #fee2e2 !important; color: #b91c1c !important; }
/* Info Badge Semantic Colors */
.mc-badge-info { background: #e5f0ff !important; color: #0056b3 !important; }
.mc-text-success { color: #166534 !important; font-weight: 700 !important; }
.mc-text-warning { color: #c2410c !important; font-weight: 700 !important; }
.mc-text-alert { color: #c2410c !important; font-weight: 700 !important; }
.mc-text-danger { color: #b91c1c !important; font-weight: 700 !important; }
.mc-text-info { color: var(--mc-blue) !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-alert { color: #fdba74 !important; }
#mc-core-app.mc-dark-mode .mc-text-danger { color: #f87171 !important; }
#mc-core-app.mc-dark-mode .mc-text-info { color: #60a5fa !important; }
#mc-core-app.mc-dark-mode .mc-badge-info { background: rgba(59, 130, 246, 0.15) !important; color: #93c5fd !important; }


/* Pure iOS Alerts */
.mc-alert, .mc-alert[style], div[style*="border-left"] { padding: 16px 16px 16px 19px; 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; }
/* One token per meaning, with a dark value, so a module never names a hue itself. */
:root {
    --mc-sem-info: #005fcc; --mc-sem-success: #15803d;
    --mc-sem-warning: #8a5a00; --mc-sem-danger: #b3261e;
}
html.mc-dark-mode, #mc-core-app.mc-dark-mode {
    --mc-sem-info: #5ec8f5; --mc-sem-success: #4ade80;
    --mc-sem-warning: #f2a65a; --mc-sem-danger: #ff8a80;
}

.mc-alert, .mc-alert[style] {
    background: var(--mc-bg-card) !important;
    color: var(--mc-text-main) !important;
    border-color: var(--mc-border-light) !important;
    box-shadow: var(--mc-shadow-sm);
}
/* The spine, and the emphasis. A label inside one of these carries the meaning; the sentence
   after it is prose and reads as prose. */
.mc-alert-info, .mc-alert-info[style]       { box-shadow: inset 3px 0 0 var(--mc-sem-info), var(--mc-shadow-sm) !important; }
.mc-alert-success, .mc-alert-success[style] { box-shadow: inset 3px 0 0 var(--mc-sem-success), var(--mc-shadow-sm) !important; }
.mc-alert-warning, .mc-alert-warning[style] { box-shadow: inset 3px 0 0 var(--mc-sem-warning), var(--mc-shadow-sm) !important; }
.mc-alert-danger, .mc-alert-danger[style]   { box-shadow: inset 3px 0 0 var(--mc-sem-danger), var(--mc-shadow-sm) !important; }

#mc-core-app .mc-alert-info strong, #mc-core-app .mc-alert-info b,
#mc-core-app .mc-alert-info .mc-result-desc-highlight       { color: var(--mc-sem-info) !important; }
#mc-core-app .mc-alert-success strong, #mc-core-app .mc-alert-success b,
#mc-core-app .mc-alert-success .mc-result-desc-highlight    { color: var(--mc-sem-success) !important; }
#mc-core-app .mc-alert-warning strong, #mc-core-app .mc-alert-warning b,
#mc-core-app .mc-alert-warning .mc-result-desc-highlight    { color: var(--mc-sem-warning) !important; }
#mc-core-app .mc-alert-danger strong, #mc-core-app .mc-alert-danger b,
#mc-core-app .mc-alert-danger .mc-result-desc-highlight     { color: var(--mc-sem-danger) !important; }
/* Modules inline-colour text inside these boxes. The body is prose now, so those are overruled
   at the same ID specificity the dark-mode rule already uses. */
#mc-core-app .mc-alert p[style], #mc-core-app .mc-alert span[style],
#mc-core-app .mc-alert div[style], #mc-core-app .mc-alert li { color: var(--mc-text-main) !important; }

/* AN ALERT INSIDE AN ALERT IS AN ASIDE, NOT A SECOND CARD.
   Several modules put two or three of these inside one milestone or result block. Once each
   carried a border, a background and a shadow, the page was three nested objects deep and the
   reader had to work out which box they were in. The spine stays, because it is the part that
   says what kind of note this is; everything that made it an object goes. */
/* Every surface a module might put an alert inside. The first pass named three and the report
   back was "worked for some and not for the other", which is what an enumerated list of
   containers always earns: .mc-card and the result cards were missing. */
#mc-core-app .mc-alert .mc-alert,
#mc-core-app .mc-result-white-box .mc-alert,
#mc-core-app .mc-milestone-card .mc-alert,
#mc-core-app .mc-card .mc-alert,
#mc-core-app .mc-result-card .mc-alert,
#mc-core-app .mc-references .mc-alert {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 2px 0 2px 14px !important;
    margin-bottom: 12px !important;
}
#mc-core-app .mc-alert .mc-alert-info,
#mc-core-app .mc-result-white-box .mc-alert-info,
#mc-core-app .mc-milestone-card .mc-alert-info,
#mc-core-app .mc-card .mc-alert-info,
#mc-core-app .mc-result-card .mc-alert-info,
#mc-core-app .mc-references .mc-alert-info    { box-shadow: inset 2px 0 0 var(--mc-sem-info) !important; }
#mc-core-app .mc-alert .mc-alert-success,
#mc-core-app .mc-result-white-box .mc-alert-success,
#mc-core-app .mc-milestone-card .mc-alert-success,
#mc-core-app .mc-card .mc-alert-success,
#mc-core-app .mc-result-card .mc-alert-success,
#mc-core-app .mc-references .mc-alert-success { box-shadow: inset 2px 0 0 var(--mc-sem-success) !important; }
#mc-core-app .mc-alert .mc-alert-warning,
#mc-core-app .mc-result-white-box .mc-alert-warning,
#mc-core-app .mc-milestone-card .mc-alert-warning,
#mc-core-app .mc-card .mc-alert-warning,
#mc-core-app .mc-result-card .mc-alert-warning,
#mc-core-app .mc-references .mc-alert-warning { box-shadow: inset 2px 0 0 var(--mc-sem-warning) !important; }
#mc-core-app .mc-alert .mc-alert-danger,
#mc-core-app .mc-result-white-box .mc-alert-danger,
#mc-core-app .mc-milestone-card .mc-alert-danger,
#mc-core-app .mc-card .mc-alert-danger,
#mc-core-app .mc-result-card .mc-alert-danger,
#mc-core-app .mc-references .mc-alert-danger  { box-shadow: inset 2px 0 0 var(--mc-sem-danger) !important; }

/*
 * The four dark alert overrides are gone, 15 August 2026.
 *
 * They set background and colour at ID specificity, so the class-level rewrite three hundred
 * lines above took effect in light mode and did nothing at all in dark, where the boxes kept
 * their saturated fills and their coloured body text. The alert rules resolve --mc-bg-card,
 * --mc-text-main and the --mc-sem-* tokens, all of which carry dark values, so this override
 * has nothing left to say.
 *
 * FOURTH TIME. The others were the primary button label, the selected segment and the hub title.
 * The rule, again: a declaration that overrides an existing themed property has to be written at
 * the specificity of the rule it is overriding, and the way to find out is to look rather than
 * to assume the new rule is the last word.
 */

/* ==========================================================================
   GLOBAL TABLE STYLING
   ========================================================================== */
#mc-core-app table { width: 100%; border-collapse: collapse; margin-bottom: 20px; color: var(--mc-text-main) !important; background: transparent !important; }
#mc-core-app th, #mc-core-app td { padding: 12px; border: 1px solid var(--mc-border) !important; text-align: left; background: transparent !important; }
#mc-core-app th { background: var(--mc-bg-pill) !important; font-weight: 700; color: var(--mc-dark) !important; }
#mc-core-app.mc-dark-mode table, #mc-core-app.mc-dark-mode tr, #mc-core-app.mc-dark-mode td, #mc-core-app.mc-dark-mode th { background-color: transparent !important; }
#mc-core-app.mc-dark-mode td { color: var(--mc-text-main) !important; }

/* Mobile-Safe Table Scroll Wrapper (Added v8.1) */
.mc-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;
}
.mc-table-scroll table {
    min-width: 360px;
    margin-bottom: 0;
}
#mc-core-app.mc-dark-mode .mc-table-scroll::-webkit-scrollbar { height: 6px; }
#mc-core-app.mc-dark-mode .mc-table-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 3px; }
#mc-core-app.mc-dark-mode .mc-table-scroll::-webkit-scrollbar-track { background: transparent; }

/* Scroll overshoot preventer for search box and Calculate button */
.mc-result-header {
    scroll-margin-top: 90px;
}
/* ==========================================================================
   GLOBAL FOOTERS & REFERENCES
   ========================================================================== */
#mc-core-app .mc-references, #mc-core-app .mc-fixed-box { padding: 16px; border-radius: 12px !important; margin-bottom: 16px; box-shadow: var(--mc-shadow-sm) !important; background: var(--mc-bg-card); border: 1px solid var(--mc-border) !important; width: 100%; font-size: 14px; line-height: 1.6; }
#mc-core-app .mc-references summary { font-weight: 700; cursor: pointer; color: var(--mc-dark) !important; margin-bottom: 8px; outline: none; }
#mc-core-app .mc-references ol { margin: 8px 0 0 20px !important; padding: 0 !important; }
#mc-core-app .mc-references li { font-size: 13px !important; margin-bottom: 6px !important; line-height: 1.4 !important; color: var(--mc-text-main) !important; }
#mc-core-app .mc-references p { font-size: 13px !important; margin-top: 8px !important; margin-bottom: 0 !important; line-height: 1.5 !important; color: var(--mc-text-main) !important; }

#mc-core-app .mc-references h1, #mc-core-app .mc-references h2, #mc-core-app .mc-references h3, #mc-core-app .mc-references h4, #mc-core-app .mc-references h5, #mc-core-app .mc-references h6 { font-size: 14px !important; font-family: -apple-system, sans-serif !important; font-weight: 700 !important; margin: 12px 0 4px 0 !important; color: var(--mc-dark) !important; }
#mc-core-app.mc-dark-mode .mc-references h1, #mc-core-app.mc-dark-mode .mc-references h2, #mc-core-app.mc-dark-mode .mc-references h3, #mc-core-app.mc-dark-mode .mc-references h4 { color: #fff !important; }

/* ==========================================================================
   UNIFIED GLOBAL FOOTER
   ========================================================================== */
.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 permanent tricolour line was removed on 15 August 2026. A flag on every page of every tool
   forever is decoration; the same three bands on Independence Day are an occasion. It now appears
   only on 15 August, from the date-gated block in index.php, and the rule that its colours are
   not available for aesthetic adjustment still holds wherever it does appear. */

.mc-footer-content { padding: 20px; }

.mc-footer-disclaimer { font-size: 13px; color: var(--mc-text-muted); line-height: 1.55; }
.mc-footer-fold { margin: 0; }
.mc-footer-fold > summary {
    cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 600; color: var(--mc-text-muted);
    padding: 2px 0; margin-bottom: 2px;
}
.mc-footer-fold > summary::-webkit-details-marker { display: none; }
.mc-footer-fold > summary::before {
    content: ""; width: 0; height: 0; flex: 0 0 auto;
    border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
    transition: transform .15s ease;
}
.mc-footer-fold[open] > summary::before { transform: rotate(90deg); }
.mc-footer-fold > summary:hover { color: var(--mc-dark); }
.mc-footer-fold .mc-footer-disclaimer { margin-top: 8px; }

/* The provenance line, promoted. It was 12.5 px muted below three other boxes. */
.mc-footer-meta {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px;
    font-size: 13px; color: var(--mc-text-muted); margin-bottom: 12px;
}
.mc-footer-meta > span { white-space: nowrap; }
.mc-footer-meta strong { color: var(--mc-dark); font-weight: 700; }
.mc-footer-meta .mc-meta-sep { color: var(--mc-border); }
@media (max-width: 520px) { .mc-footer-meta { gap: 4px 12px; font-size: 12.5px; } }
.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; }
/* The Stealth Link */
.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-core-app.mc-dark-mode .mc-stealth-link:hover { background-color: rgba(255, 255, 255, 0.1); color: #ffffff !important; }

/* Bottom Navigation Actions (Integrated Aesthetic) */
.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-bottom-nav:hover { border-color: var(--mc-primary); }

.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: rgba(var(--mc-primary-rgb), 0.05); color: var(--mc-primary); }
.mc-nav-link:hover svg { transform: translateX(-5px); }
.mc-nav-link:active { background-color: rgba(var(--mc-primary-rgb), 0.09); }

.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); }

/* =========================================================
   DARK MODE OVERRIDES FOR FOOTER
   ========================================================= */
#mc-core-app.mc-dark-mode .mc-global-footer, #mc-core-app.mc-dark-mode .mc-bottom-nav { background-color: var(--mc-bg-card) !important; border-color: var(--mc-border) !important; }
#mc-core-app.mc-dark-mode .mc-footer-divider, #mc-core-app.mc-dark-mode .mc-nav-divider { background-color: var(--mc-border-light) !important; }
#mc-core-app.mc-dark-mode .mc-footer-org { color: var(--mc-dark) !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: var(--mc-text-muted) !important; }
#mc-core-app.mc-dark-mode .mc-footer-disclaimer strong, #mc-core-app.mc-dark-mode .mc-footer-author strong { color: var(--mc-text-main) !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; }
#mc-core-app.mc-dark-mode .mc-nav-link:active { background-color: rgba(255, 255, 255, 0.1) !important; }
#mc-core-app.mc-dark-mode .mc-nav-link.feedback { color: var(--mc-text-muted) !important; }
#mc-core-app.mc-dark-mode .mc-nav-link.feedback:hover { background-color: rgba(255, 255, 255, 0.03) !important; color: var(--mc-text-main) !important; }

/* =========================================================
   STYLING THE SAHRE BUTTON
   ========================================================= */
/*
 * Footer "Share this Tool". Softened from the solid maroon gradient so it no longer
 * competes with "Share Calculation with a Friend" in the result action bar. The two
 * serve different purposes, sharing the tool versus sharing a specific calculation,
 * and the calculation action is the one that should draw the eye at the point of use.
 */
.mc-btn-share { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 16px; margin-bottom: 24px; background: rgba(var(--mc-primary-rgb),.06); color: var(--mc-primary); border: 1px solid rgba(var(--mc-primary-rgb),.26); border-radius: 12px; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: none; transition: background-color .15s ease, border-color .15s ease, transform .1s ease; font-family: inherit; }
.mc-btn-share:hover { background: rgba(var(--mc-primary-rgb),.12); border-color: rgba(var(--mc-primary-rgb),.42); }
.mc-btn-share:active { transform: scale(0.99); }
/* The dark overrides for the share controls are gone: the light rules resolve
   --mc-primary-rgb, which the dark token block repoints to the accent's dark form. */

/* ==========================================================================
   SUPPLEMENTARY CSS: Rabies PEP Vaccination Pathway
   Required by: rabies-pep-module.html
   Inject into: mediscuss-cdss.css (after the existing .mc-result-card rules)
   ========================================================================== */

/* Full-width result card spanning entire grid row */
.mc-result-card-full {
    grid-column: 1 / -1;
}

/* Highlighted result description (bold, slightly larger, spaced) */
.mc-result-desc-highlight {
    font-weight: 700 !important;
    font-size: 15px !important;
    margin-bottom: 8px !important;
}

/* Bottom breathing room for the primary action button */
.mc-action-row {
    margin-bottom: 24px;
}

/* Muted text within table cells (for manufacturer attribution) */
.mc-text-muted {
    color: var(--mc-text-muted) !important;
    font-weight: 400 !important;
    font-size: 12px !important;
}

@media print {
    @page { margin: 1cm; } body * { visibility: hidden; }
    .mc-wrapper.mc-app-mode { position: relative !important; height: auto !important; width: 100% !important; overflow: visible !important; box-shadow: none !important; }
    #mc-core-app, #mc-core-app * { visibility: visible; }
    #mc-core-app { background: #fff !important; color: #000 !important; }
    .mc-tabs-container, .mc-btn, .mc-theme-toggle, .mc-bottom-nav, .mc-btn-clear, .mc-btn-copy, .mc-tooltip-trigger { display: none !important; }
    .mc-panel { display: block !important; padding-top: 0 !important; }
    .mc-result { display: block !important; border: 2px solid #000 !important; box-shadow: none !important; break-inside: avoid; }
    #res-anthro, .mc-result-white-box { display: block !important; opacity: 1 !important; visibility: visible !important; }
    .mc-result-grid { display: flex !important; flex-direction: row !important; gap: 20px !important; }
    .mc-result-card { border: 1px solid #000 !important; break-inside: avoid; }
    .mc-hide-print { display: none !important; }

    /* ── Print hardening (added 2026-07-29) ─────────────────────────────────
       Four things the original block did not cover and which produced poor or
       misleading printouts. */

    /* 1. Dark mode leaked into print as white-on-white. Force light rendering
          for the whole document regardless of the user's theme. */
    html.mc-dark-mode, html.mc-dark-mode body, html.mc-dark-mode #mc-core-app,
    html.mc-dark-mode .mc-card, html.mc-dark-mode .mc-result,
    html.mc-dark-mode .mc-result-white-box, html.mc-dark-mode .mc-references {
        background: #fff !important; color: #000 !important; border-color: #666 !important;
    }
    html.mc-dark-mode * { color: #000 !important; }

    /* 2. References, Abbreviations and How to Cite live in collapsed <details>.
          Collapsed content does not print, so the citation and evidence base
          were silently missing from every printout. Force them open. */
    details { display: block !important; }
    details > summary { display: block !important; font-weight: 700; margin-bottom: 6px; list-style: none; }
    details > *:not(summary) { display: block !important; visibility: visible !important; }

    /* 3. Tables were clipped at the page edge because the mobile scroll wrapper
          keeps its fixed height and overflow. Let them flow and repeat headers
          across page breaks. */
    .mc-table-scroll { overflow: visible !important; max-height: none !important; }
    table { width: 100% !important; border-collapse: collapse !important; page-break-inside: auto; }
    thead { display: table-header-group; }
    tr { page-break-inside: avoid; }
    th, td { border: 1px solid #666 !important; padding: 5px 7px !important; font-size: 11pt; }

    /* 4. A printout handed to a colleague or filed in notes must carry the
          disclaimer, the source URL and the version. Keep the footer, and
          expose link targets so a printed copy is traceable. */
    .mc-global-footer, .mc-footer-disclaimer { display: block !important; visibility: visible !important; }
    #mc-core-app a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
    .mc-header { border-bottom: 2px solid #000 !important; }
    .mc-version { font-weight: 700; }
    h1, h2, h3 { page-break-after: avoid; }
}

/* Version chip in the module subtitle. Rendered by index.php from the registry. */
.mc-version {
    white-space: nowrap; font-variant-numeric: tabular-nums;
    display: inline-block; margin-left: 6px; padding: 1px 7px;
    font-size: 11px; font-weight: 700; line-height: 1.5;
    color: var(--mc-primary); background: rgba(var(--mc-primary-rgb), 0.07);
    border: 1px solid rgba(var(--mc-primary-rgb), 0.20); border-radius: 5px; vertical-align: 1px;
}

/* ── Shared result action bar ────────────────────────────────────────────────
   Three actions in a 1:1:2 grid, rendered once by global-footer.php and moved
   to sit directly beneath the visible result panel. Colour differentiation is
   deliberately subtle: tinted background, coloured border and coloured label,
   rather than solid fills, so the bar reads as one control group. These classes
   are the single definition for every module, present and future. */
.mc-doc-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: stretch;
    margin: 20px 0 4px 0;
    width: 100%;
}
/* Row 1: EMR and Print at 50% each. Row 2: Share across the full width. */
.mc-act-share { grid-column: 1 / -1; }
.mc-act {
    display: inline-flex; align-items: center; justify-content: center; text-align: center;
    gap: 7px; padding: 11px 12px; min-height: 46px;
    font-size: 13.5px; font-weight: 700; line-height: 1.25;
    border-radius: 9px; border: 1px solid transparent;
    cursor: pointer; background: transparent;
    transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
    font-family: inherit;
}
.mc-act:active { transform: scale(0.985); }
.mc-act svg { flex: 0 0 auto; }

/* Row 1 - Copy Results for EMR and Print as PDF: identical neutral treatment.
   These are routine utilities and should recede; only Share invites action. */
.mc-act-emr, .mc-act-print {
    background: rgba(100,116,139,.06);
    border-color: rgba(100,116,139,.30);
    color: #475569;
}
.mc-act-emr:hover, .mc-act-print:hover {
    background: rgba(100,116,139,.13);
    border-color: rgba(100,116,139,.52);
}

/* Row 2 - Share: warm house maroon, full width, the inviting action */
.mc-act-share { background: rgba(var(--mc-primary-rgb),.09);  border-color: rgba(var(--mc-primary-rgb),.32);  color: var(--mc-primary); }
.mc-act-share:hover { background: rgba(var(--mc-primary-rgb),.16); border-color: rgba(var(--mc-primary-rgb),.55); }

.mc-act-done { background: rgba(16,185,129,.12) !important; border-color: rgba(16,185,129,.5) !important; color: #047857 !important; }

html.mc-dark-mode .mc-act-emr, html.mc-dark-mode .mc-act-print {
    background: rgba(143,160,175,.10); border-color: rgba(143,160,175,.30); color: var(--mc-text-main);
}

html.mc-dark-mode .mc-act-done  { background: rgba(52,211,153,.15) !important; border-color: rgba(52,211,153,.45) !important; color: #6ee7b7 !important; }

/* Quiet reporting link beneath the bar. Deliberately a plain text link, not a
   button, so it is always available without competing with the three actions. */
.mc-report-line { text-align: center; margin: 10px 0 2px 0; }
.mc-report-line a {
    font-size: 12.5px; color: var(--mc-text-muted);
    text-decoration: underline; text-decoration-thickness: 1px;
    text-underline-offset: 3px; text-decoration-color: rgba(128,128,128,.45);
}
.mc-report-line a:hover { color: var(--mc-primary); text-decoration-color: var(--mc-primary); }

/*
 * The bar supersedes each module's own "Copy Results to EMR" button, which would
 * otherwise appear twice on the page. The module button is hidden rather than removed,
 * because the bar's EMR action clicks it to reuse the module's purpose-written EMR text.
 */
#mc-core-app.mc-actions-live #btn-copy-emr { display: none !important; }

@media (max-width: 520px) {
    .mc-act { font-size: 12.5px; padding: 10px 8px; }
}

/* Notice shown once when a shared calculation is restored from a link. */
.mc-shared-banner {
    display: flex; gap: 10px; align-items: flex-start;
    margin: 0 0 16px 0; padding: 12px 14px; border-radius: 9px;
    background: rgba(59,130,246,.07); border: 1px solid rgba(59,130,246,.3);
    color: var(--mc-text-main); font-size: 13.5px; line-height: 1.5;
}
html.mc-dark-mode .mc-shared-banner { background: rgba(96,165,250,.10); border-color: rgba(96,165,250,.32); }

/*.For UIP */
/* ── Timeline Card Layout ── */
.mc-timeline-card { margin-bottom: 16px; padding: 16px; border-left: 4px solid var(--mc-blue); }
.mc-timeline-past { opacity: 0.55; border-left-color: var(--mc-border); }
.mc-timeline-current { border-left-color: var(--mc-primary); box-shadow: var(--mc-shadow-card); }
.mc-timeline-future { border-left-color: var(--mc-blue); }
.mc-timeline-label { color: var(--mc-text-muted); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.mc-timeline-date { font-size: 14px; font-weight: 600; margin-bottom: 10px; color: var(--mc-text-main); }
.mc-timeline-title { font-size: 17px; font-weight: 700; margin-bottom: 12px; }
.mc-timeline-highlight { background-color: rgba(var(--mc-primary-rgb), 0.07); transition: background-color 0.8s ease; }
 
/* ── Stacked Vaccine List (replaces table in timeline cards) ── */
.mc-vax-list { margin-bottom: 12px; }
.mc-vax-item { padding: 10px 12px; border-bottom: 1px solid var(--mc-border); }
.mc-vax-item:last-child { border-bottom: none; }
.mc-vax-name { font-weight: 700; font-size: 14px; margin-bottom: 4px; color: var(--mc-text-main); }
.mc-vax-details { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--mc-text-muted); }
.mc-vax-dose, .mc-vax-route { display: inline-block; }
.mc-vax-label { font-weight: 600; color: var(--mc-text-main); margin-right: 2px; }
 
/* ── Responsive Static Tables (Evidence tab) ── */
.mc-resp-table { width: 100%; border-collapse: collapse; }
.mc-resp-table th,
.mc-resp-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--mc-border); font-size: 13px; vertical-align: top; }
.mc-resp-table thead th { font-weight: 700; background: var(--mc-bg-subtle); white-space: nowrap; }
 
@media screen and (max-width: 768px) {
    .mc-resp-table thead { display: none; }
    .mc-resp-table tbody tr { display: block; padding: 12px 0; border-bottom: 2px solid var(--mc-border); }
    .mc-resp-table tbody td { display: block; padding: 4px 12px; border: none; font-size: 13px; }
    .mc-resp-table tbody td::before {
        content: attr(data-label);
        display: block;
        font-weight: 700;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        color: var(--mc-text-muted);
        margin-bottom: 2px;
    }
    /* First cell in each row gets top padding */
    .mc-resp-table tbody td:first-child { padding-top: 0; }
}
 
/* ── Utility Classes ── */
.mc-float-right { float: right; }
.mc-badge-muted { background: var(--mc-border); color: var(--mc-text-muted); font-size: 11px; }
.mc-mt-8 { margin-top: 8px; }
.mc-mt-12 { margin-top: 12px; }
.mc-mt-16 { margin-top: 16px; }
.mc-mb-16 { margin-bottom: 16px; }
.mc-text-primary { color: var(--mc-primary); }
.mc-text-info { color: var(--mc-blue); }
.mc-btn-outline { background: transparent; border: 1px solid var(--mc-primary); color: var(--mc-primary); padding: 6px 14px; font-size: 13px; display: inline-flex; align-items: center; cursor: pointer; border-radius: 6px; }
.mc-btn-outline:hover { background: var(--mc-primary); color: #fff; }

/* ==========================================================================
   STAGE 1 OF THE DESIGN REVIEW, 14 August 2026
   Accessibility and typographic corrections that are independent of any
   visual direction. Full reasoning in cdss-dev/CDSS-DESIGN-REVIEW-2026-08-14.md
   and cdss-dev/CHANGES-2026-08-14-design-stage-1.md.
   ========================================================================== */

/* ── 3. FOCUS VISIBILITY, ONE DEFINITION ────────────────────────────────────
   Three controls stripped focus with nothing in its place: the theme toggle,
   .mc-tab and the references <summary>. The hub's tool cards, which are links,
   had no focus treatment at all, so a keyboard user tabbing the catalogue had
   no idea where they were.

   The five other outline:none declarations in this tree are deliberately left
   alone. Each is paired with a border colour change and a 3 px box-shadow ring,
   which is already a visible indicator; replacing them would be churn.

   :focus-visible rather than :focus, so a clinician tapping a tab on a phone
   does not get a ring they did not ask for. !important because the rules being
   corrected use it. */
/* TWO SURFACES ARE DARK IN BOTH THEMES, so their ring cannot be chosen by theme.
   .mc-app-nav is #1e1e1e !important whatever the toggle says, and .mc-header is the maroon
   gradient on every tool page. The light ring, #005fcc, gives 2.79:1 on the nav, which is
   under the 3:1 that WCAG 1.4.11 asks of a focus indicator: the ring was there and was hard
   to see, which is the failure the rule exists to prevent. Overriding the token on those two
   containers keeps one ring rule and lets each surface answer for itself. */
.mc-app-nav { --mc-focus: #7cc4ff; }
/* The bar and its inner wrapper hold no text of their own, so they were inheriting the
   user agent default black. Naming a colour costs one declaration and means nothing on this
   page renders in a colour that was never chosen. */
.mc-app-nav, .mc-app-nav-inner { color: var(--mc-text-main); }

#mc-core-app a:focus-visible,
#mc-core-app button:focus-visible,
#mc-core-app summary:focus-visible,
#mc-core-app [tabindex]:focus-visible,
.mc-app-nav a:focus-visible,
.mc-app-nav button:focus-visible,
.mc-nav-icon-btn:focus-visible,
.mc-theme-toggle:focus-visible,
.mch-card:focus-visible {
    outline: 2px solid var(--mc-focus, #005fcc) !important;
    outline-offset: 2px !important;
}

/* ── 4. REDUCED MOTION ──────────────────────────────────────────────────────
   The tree had no prefers-reduced-motion block. mcFadeIn runs on every panel
   switch and every result, and scale(0.97) fires on every press.

   Durations are collapsed rather than set to none. A zero-length transition
   still fires transitionend, so any script waiting on one keeps working. */
@media (prefers-reduced-motion: reduce) {
    html, body { scroll-behavior: auto !important; }
    #mc-core-app *, #mc-core-app *::before, #mc-core-app *::after,
    .mc-app-nav *, .mc-signin, .mc-signin *, .mc-serial, .mc-serial * {
        animation-duration: 0.01ms !important;
        animation-delay: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0.01ms !important;
    }
    .mc-panel, .mc-result { animation: none !important; }
    .mc-btn:active, .mc-segment-btn:active, .mc-v-card:active,
    .mc-act:active, .mc-btn-share:active, .mch-card:active,
    .mc-theme-toggle:hover, .mc-nav-icon-btn:hover, .mc-nav-icon-btn:active,
    .mc-nav-link:hover svg, .mch-card:hover {
        transform: none !important;
    }
}

/* ── 6. TABULAR NUMERALS ────────────────────────────────────────────────────
   This is a calculator. Proportional digits mean a column of doses does not
   line up and a serial comparison cannot be read down. Applied to the result
   values, the data rows, the score tags and every table cell, because a table
   in a clinical module is nearly always numbers. */
#mc-core-app .mc-value-lg,
#mc-core-app .mc-unit,
#mc-core-app .mc-result-value-group,
#mc-core-app .mc-data-value,
#mc-core-app .mc-check-pts,
#mc-core-app .mc-score-tag,
#mc-core-app table th,
#mc-core-app table td,
.mc-serial-table th,
.mc-serial-table td {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}