/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-m805e1pnza] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #F8F8F5;
}

/* Navbar shell - rendered directly by MainLayout, no ::deep needed */
.top-navbar[b-m805e1pnza] {
    background: #1F5E60;
    box-shadow: 0 2px 4px rgba(0,0,0,.18);
    position: relative;
    z-index: 1000;
}

.top-navbar-inner[b-m805e1pnza] {
    max-width: 1080px;
    margin: 0 auto;
    width: 100%;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;
}

/* Brand container - <NavLink> is a child component, so ::deep is required */
[b-m805e1pnza] .brand {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
    height: 100%;
    color: #fff !important;
    text-decoration: none !important;
}

    [b-m805e1pnza] .brand:link,
    [b-m805e1pnza] .brand:visited,
    [b-m805e1pnza] .brand:hover,
    [b-m805e1pnza] .brand:focus,
    [b-m805e1pnza] .brand:active {
        color: #fff !important;
        text-decoration: none !important;
    }

    [b-m805e1pnza] .brand:focus-visible {
        outline: 2px solid rgba(255,255,255,0.6);
        border-radius: 0.2rem;
    }

[b-m805e1pnza] .brand-text {
    color: #fff !important;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none !important;
}

[b-m805e1pnza] .brand-logo {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    flex: 0 0 40px !important;
    object-fit: contain !important;
    display: block !important;
    filter: brightness(0) invert(1);
}

/* Nav links container - rendered directly by MainLayout */
.f4l-nav-links[b-m805e1pnza] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Nav links - ::deep matches both <NavLink>'s <a> AND the logout <button>, so a single rule keeps font/size/color identical across both */
[b-m805e1pnza] .f4l-nav-link {
    color: #fff !important;
    font-family: inherit !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.85rem;
    border-radius: 0.3rem;
    white-space: nowrap;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

    [b-m805e1pnza] .f4l-nav-link:link,
    [b-m805e1pnza] .f4l-nav-link:visited,
    [b-m805e1pnza] .f4l-nav-link:active {
        color: #fff !important;
        text-decoration: none !important;
    }

    [b-m805e1pnza] .f4l-nav-link:hover,
    [b-m805e1pnza] .f4l-nav-link:focus {
        background: rgba(255,255,255,0.12);
        color: #fff !important;
        text-decoration: none !important;
        outline: none;
    }

    [b-m805e1pnza] .f4l-nav-link:focus-visible {
        outline: 2px solid rgba(255,255,255,0.55);
        outline-offset: 1px;
    }

    [b-m805e1pnza] .f4l-nav-link.active {
        background: rgba(255,255,255,0.18);
        color: #fff !important;
        text-decoration: none !important;
    }

/* Logout - same font/size as nav links, distinguished only by visible border */
[b-m805e1pnza] .logout-button {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(255,255,255,0.45) !important;
    margin-left: 0.5rem;
}

    [b-m805e1pnza] .logout-button:hover,
    [b-m805e1pnza] .logout-button:focus {
        border-color: rgba(255,255,255,0.85) !important;
        background: rgba(255,255,255,0.16);
    }

/* Hamburger - rendered directly */
.hamburger[b-m805e1pnza] {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 0.35rem;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 0.3rem;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}

    .hamburger:hover[b-m805e1pnza],
    .hamburger:focus[b-m805e1pnza] {
        background: rgba(255,255,255,0.12);
        outline: none;
    }

    .hamburger:focus-visible[b-m805e1pnza] {
        outline: 2px solid rgba(255,255,255,0.55);
    }

.hamburger-bar[b-m805e1pnza] {
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    border-radius: 2px;
}

main[b-m805e1pnza] {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.content[b-m805e1pnza] {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

@media (max-width: 640px) {
    .top-navbar-inner[b-m805e1pnza] {
        height: auto;
        min-height: 56px;
        flex-wrap: wrap;
        padding: 0 1rem;
        gap: 0;
    }

    [b-m805e1pnza] .brand {
        height: 56px;
    }

    [b-m805e1pnza] .brand-logo {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        flex: 0 0 36px !important;
    }

    .hamburger[b-m805e1pnza] {
        display: flex;
        margin: 0.6rem 0;
    }

    .f4l-nav-links[b-m805e1pnza] {
        display: none;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        padding: 0.5rem 0 0.75rem;
        gap: 0.15rem;
        border-top: 1px solid rgba(255,255,255,0.15);
    }

        .f4l-nav-links.open[b-m805e1pnza] {
            display: flex;
        }

    [b-m805e1pnza] .f4l-nav-link {
        padding: 0.6rem 0.75rem;
        font-size: 0.95rem !important;
    }
}
/* /Pages/DeviceLabelling.razor.rz.scp.css */
.device-labelling-container[b-utk3g2gmc9] {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1.25rem;
}

.device-labelling-header[b-utk3g2gmc9] {
    margin-bottom: 1.5rem;
}

.device-labelling-title[b-utk3g2gmc9] {
    margin-bottom: 0.25rem;
    color: #0C2426;
}

.device-labelling-subtitle[b-utk3g2gmc9] {
    opacity: 0.9;
    margin: 0;
    font-size: 1.05rem;
}

.device-labelling-section[b-utk3g2gmc9] {
    margin-bottom: 2rem;
}

.device-labelling-section-title[b-utk3g2gmc9] {
    font-size: 1.15rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    color: #0F3D3E;
}

.device-labelling-fields[b-utk3g2gmc9] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin: 0;
}

.device-labelling-field[b-utk3g2gmc9] {
    display: grid;
    grid-template-columns: 72px 1fr;
    column-gap: 1rem;
    align-items: center;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.5rem;
    background: #fff;
}

.device-labelling-field-symbol[b-utk3g2gmc9] {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.device-labelling-field-symbol-text[b-utk3g2gmc9] {
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #0F3D3E;
    font-size: 1rem;
}

.device-labelling-symbol[b-utk3g2gmc9] {
    width: 56px;
    height: 56px;
    object-fit: contain;
}

/* The UKCA mark has legally-defined proportions and must never be distorted.
   Size it by height and let the width follow its intrinsic aspect ratio
   instead of constraining it into the square symbol box. */
.device-labelling-symbol-ukca[b-utk3g2gmc9] {
    width: auto;
    height: 56px;
}

.device-labelling-field-body[b-utk3g2gmc9] {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.device-labelling-field-label[b-utk3g2gmc9] {
    font-weight: 600;
    color: #0C2426;
}

.device-labelling-field-value[b-utk3g2gmc9] {
    opacity: 0.95;
    word-break: break-word;
}

.device-labelling-field-value-address[b-utk3g2gmc9] {
    opacity: 0.85;
    white-space: pre-line;
}

.device-labelling-field-link[b-utk3g2gmc9] {
    color: #0071c1;
    text-decoration: underline;
    align-self: flex-start;
}

.device-labelling-field-link:focus[b-utk3g2gmc9] {
    outline: 2px solid #1F5E60;
    outline-offset: 2px;
    border-radius: 2px;
}

.device-labelling-field-preview[b-utk3g2gmc9] {
    border-color: rgba(220, 53, 69, 0.35);
    background: rgba(220, 53, 69, 0.06);
}

.device-labelling-field-value-preview[b-utk3g2gmc9] {
    color: #842029;
}

.device-labelling-intended-use[b-utk3g2gmc9],
.device-labelling-safety-key-intro[b-utk3g2gmc9] {
    margin: 0;
    opacity: 0.95;
}

@media (max-width: 767.98px) {
    .device-labelling-container[b-utk3g2gmc9] {
        padding: 1.25rem 0.75rem;
    }

    .device-labelling-field[b-utk3g2gmc9] {
        grid-template-columns: 48px 1fr;
        column-gap: 0.75rem;
        padding: 0.75rem;
    }

    .device-labelling-symbol[b-utk3g2gmc9] {
        width: 40px;
        height: 40px;
    }

    .device-labelling-symbol-ukca[b-utk3g2gmc9] {
        width: auto;
        height: 40px;
    }
}
/* /Pages/InstructionsForUse.razor.rz.scp.css */
/* "Back to input" link — matches the report/explanation pages exactly (the style is
   component-scoped, so the rules are repeated here as on RiskReport and RiskExplanation). */
.back-link[b-u7fp9rx3m3] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: 0;
    padding: 0.25rem 0;
    margin-bottom: 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    color: #4c6272;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    cursor: pointer;
}

    .back-link:hover[b-u7fp9rx3m3] {
        color: #212b32;
        text-decoration-thickness: 2px;
    }

    .back-link:focus-visible[b-u7fp9rx3m3] {
        outline: 3px solid #ffeb3b;
        outline-offset: 2px;
        background: #ffeb3b;
        color: #212b32;
        text-decoration: none;
    }

.back-link-chevron[b-u7fp9rx3m3] {
    width: 0.85em;
    height: 0.85em;
    flex-shrink: 0;
}
/* /Pages/RiskExplanation.razor.rz.scp.css */
.risk-explanation-page[b-rhgj0ovzq1] {
    max-width: 100%;
    padding: 0 1rem 1rem;
    margin: 0 auto;
    position: relative;
}

/* Risk advisories sit full-bleed on the report (inside its card); here they have no
   card, so constrain and centre them rather than letting them span the whole viewport. */
.explanation-advisories[b-rhgj0ovzq1] {
    max-width: 790px;
    margin: 0 auto;
}

/* Graph title now sits directly above the (often very wide) waterfall chart. */
.explanation-title-row[b-rhgj0ovzq1] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}

.explanation-title[b-rhgj0ovzq1] {
    text-align: center;
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 0;
}

/* Info tooltip explaining how to read the waterfall chart. Mirrors the per-row
   feature-info pattern, but anchored under the heading icon and wider for the longer copy. */
.waterfall-info[b-rhgj0ovzq1] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    color: #4c6272;
    cursor: help;
    flex-shrink: 0;
}

.waterfall-info-icon[b-rhgj0ovzq1] {
    width: 100%;
    height: 100%;
}

.waterfall-info-tooltip[b-rhgj0ovzq1] {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 360px;
    background: #1B4332;
    color: #fff;
    padding: 0.55rem 0.7rem;
    border-radius: 4px;
    font-size: 0.875rem; /* matches the chart's feature-label text (SVG font-size 14) */
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    z-index: 6;
}

.waterfall-info:hover .waterfall-info-tooltip[b-rhgj0ovzq1],
.waterfall-info:focus .waterfall-info-tooltip[b-rhgj0ovzq1],
.waterfall-info:focus-visible .waterfall-info-tooltip[b-rhgj0ovzq1] {
    opacity: 1;
    visibility: visible;
}

/* Aligned chart region with horizontal scroll fallback for narrow viewports. */
.explanation-scroll-wrapper[b-rhgj0ovzq1] {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Bounds track the SVG viewBox width (1330 + RightPadding = 1490) so the chart renders at full scale
   when there's room; min-width keeps the same proportion (1100 * 1490/1360 ~= 1200) before it scrolls. */
.explanation-content[b-rhgj0ovzq1] {
    min-width: 1200px;
    max-width: 1490px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Waterfall SVG */
.waterfall-wrapper[b-rhgj0ovzq1] {
    width: 100%;
    /* Anchor for the absolutely-positioned per-row info-icon overlay. */
    position: relative;
}

.waterfall-svg[b-rhgj0ovzq1] {
    width: 100%;
    height: auto;
    display: block;
}

.waterfall-svg text.feature-label[b-rhgj0ovzq1] {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Per-row info icons */
.feature-info-overlay[b-rhgj0ovzq1] {
    position: absolute;
    inset: 0;
    /* Only the icon buttons should capture pointer events; 
       the rest of the overlay must let clicks fall through to the chart underneath. */
    pointer-events: none;
}

.feature-info-button[b-rhgj0ovzq1] {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    padding: 0;
    background: none;
    border: 0;
    color: #4c6272;
    cursor: help;
    pointer-events: auto;
    line-height: 0;
    outline: none;
}

    .feature-info-button:hover[b-rhgj0ovzq1],
    .feature-info-button:focus[b-rhgj0ovzq1] {
        color: #1B6EC2;
    }

    .feature-info-button:focus-visible[b-rhgj0ovzq1] {
        outline: 2px solid #1B6EC2;
        outline-offset: 2px;
        border-radius: 50%;
    }

.feature-info-icon[b-rhgj0ovzq1] {
    display: block;
    width: 100%;
    height: 100%;
}

.feature-info-tooltip[b-rhgj0ovzq1] {
    position: absolute;
    top: 50%;
    left: calc(100% + 8px);
    transform: translateY(-50%);
    background: #1B4332;
    color: #fff;
    padding: 0.4rem 0.65rem;
    border-radius: 4px;
    font-size: 0.78rem;
    line-height: 1.3;
    width: max-content;
    max-width: 240px;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    z-index: 4;
}

    .feature-info-tooltip[b-rhgj0ovzq1]::after {
        /* Speech-bubble tail, pointing left toward the icon */
        content: "";
        position: absolute;
        top: 50%;
        right: 100%;
        transform: translateY(-50%);
        border: 5px solid transparent;
        border-right-color: #1B4332;
    }

.feature-info-button:hover .feature-info-tooltip[b-rhgj0ovzq1],
.feature-info-button:focus:not(.is-dismissed) .feature-info-tooltip[b-rhgj0ovzq1] {
    opacity: 1;
    visibility: visible;
}

.back-link[b-rhgj0ovzq1] {
    position: absolute;
    top: 0;
    left: 0.75rem; /* matches Bootstrap container gutter; tweak to taste */

    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: 0;
    padding: 0.25rem 0;
    font-size: 1rem;
    font-weight: 400;
    color: #4c6272; 
    text-decoration: underline;
    text-underline-offset: 0.15em;
    cursor: pointer;
}

    .back-link:hover[b-rhgj0ovzq1] {
        color: #212b32;
        text-decoration-thickness: 2px;
    }

    .back-link:focus-visible[b-rhgj0ovzq1] {
        outline: 3px solid #ffeb3b;
        outline-offset: 2px;
        background: #ffeb3b;
        color: #212b32;
        text-decoration: none;
    }

.back-link-chevron[b-rhgj0ovzq1] {
    width: 0.85em;
    height: 0.85em;
    flex-shrink: 0;
}


/* Empty/error state */
.empty-state[b-rhgj0ovzq1] {
    padding: 3rem 1rem;
}

    /* 429 state: centre the rate-limit notice above the actions, at a readable width. */
    .empty-state[b-rhgj0ovzq1]  .rate-limit-notice {
        justify-content: center;
        max-width: 32rem;
        margin: 0 auto 1.5rem auto;
    }

/* ===== Portrait-mobile rotate prompt =====
   Shown only on touch devices (hover: none) in portrait orientation below 768px. 
   On desktop with a narrow window the prompt does NOT appear — the user gets the horizontal-scroll fallback instead. */
.portrait-rotate-prompt[b-rhgj0ovzq1] {
    display: none;
}

@media (max-width: 767px) and (orientation: portrait) and (hover: none) {
    .portrait-rotate-prompt[b-rhgj0ovzq1] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 3rem 1rem;
        gap: 1rem;
        color: #555;
        min-height: 50vh;
    }

    .rotate-prompt-icon[b-rhgj0ovzq1] {
        width: 72px;
        height: 72px;
        color: #1B6EC2;
    }

    .rotate-prompt-text[b-rhgj0ovzq1] {
        font-size: 1rem;
        max-width: 280px;
        line-height: 1.4;
        margin: 0;
    }

    /* Hide the chart (and its title) entirely while the rotate prompt is showing,
       so there's no vertical scrolling on the page either. */
    .explanation-title-row[b-rhgj0ovzq1],
    .explanation-scroll-wrapper[b-rhgj0ovzq1] {
        display: none;
    }
}

@media (max-width: 950px) {
    .explanation-title[b-rhgj0ovzq1] {
        font-size: 1.35rem;
    }

    .back-link[b-rhgj0ovzq1] {
        position: static;
        display: flex; 
        width: fit-content;
        margin-bottom: 0.5rem;
    }
}
/* /Pages/RiskFactorInput.razor.rz.scp.css */
.risk-factor-input-page[b-no7xkaon3n] {
    max-width: 980px;
    padding-bottom: 1.5rem;
}

.variability-select[b-no7xkaon3n] {
    max-width: 260px;
}

/* Amber accent draws attention to the gate while keeping the card style consistent with the inputs below. */
.ctg-gate[b-no7xkaon3n] {
    border-left: 4px solid #fd7e14;
}

/* Wraps the EditForm contents when the gate is unanswered or "Yes" — dims the form and blocks pointer interaction. 
   The <fieldset disabled> on the same element handles the actual control disabling and keyboard blocking. */
.form-disabled[b-no7xkaon3n] {
    opacity: 0.5;
    pointer-events: none;
}

/* Informational warning for baseline FHR outside the normal term range (still within the physiological range, so submission is allowed). */
.baseline-fhr-soft-warning[b-no7xkaon3n] {
    color: #E65100;
    font-weight: 500;
}

/* Inline advisories shown directly under an input when CTG length is below the
   sinusoidal-review threshold (sinusoidal prompt under CTG length, baseline-confidence
   prompt under Baseline FHR). Shared styling keeps the two consistent when shown together —
   tighter padding and a smaller font than the page-level alerts. */
.ctg-length-input-advisory[b-no7xkaon3n],
.baseline-confidence-input-advisory[b-no7xkaon3n] {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
}

/* Shown in place of the input form when the CTG abnormality gate is answered "Yes".
   Red left border signals a hard stop, consistent with the amber accent on .ctg-gate. */
.abnormal-ctg-guidance[b-no7xkaon3n] {
    border-left: 4px solid #dc3545;
}

/* Date of birth — GOV.UK/NHS "memorable date" entry: three typed numeric fields.
   ::deep is required because the inputs are rendered by the InputNumber child component. */
.dob-fieldset[b-no7xkaon3n] {
    border: 0;
    padding: 0;
    margin: 0;
}

.dob-legend[b-no7xkaon3n] {
    float: none; /* undo the browser legend default so it flows like a normal label */
    width: auto;
    font-size: inherit;
    margin-bottom: 0.5rem;
}

.dob-parts[b-no7xkaon3n]  .dob-part {
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Typed entry — the number-input spinners only invite slow click-stepping. */
.dob-parts[b-no7xkaon3n]  .dob-part::-webkit-outer-spin-button,
.dob-parts[b-no7xkaon3n]  .dob-part::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.dob-parts[b-no7xkaon3n]  .dob-part-dm {
    width: 4.5rem;
}

.dob-parts[b-no7xkaon3n]  .dob-part-year {
    width: 6.5rem;
}
/* /Pages/RiskReport.razor.rz.scp.css */
/* Page layout */
.risk-report-page[b-6axz0pgj73] {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 3rem;
}

.back-link[b-6axz0pgj73] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: 0;
    padding: 0.25rem 0;
    margin-bottom: 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    color: #4c6272;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    cursor: pointer;
}

    .back-link:hover[b-6axz0pgj73] {
        color: #212b32;
        text-decoration-thickness: 2px;
    }

    .back-link:focus-visible[b-6axz0pgj73] {
        outline: 3px solid #ffeb3b;
        outline-offset: 2px;
        background: #ffeb3b;
        color: #212b32;
        text-decoration: none;
    }

.back-link-chevron[b-6axz0pgj73] {
    width: 0.85em;
    height: 0.85em;
    flex-shrink: 0;
}

.risk-report-card[b-6axz0pgj73] {
    padding: 3.75rem 1.5rem;
    position: relative;
}

.calculation-timestamp[b-6axz0pgj73] {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    font-size: 0.85rem;
    color: #666;
    text-align: right;
    line-height: 1.3;
    white-space: nowrap;
}

/* Patient identifiers (NHS number, surname initials, age) */
.patient-identifier-line[b-6axz0pgj73] {
    position: absolute;
    top: 1rem;
    left: 1.25rem;
    font-size: 0.85rem;
    color: #666;
    text-align: left;
    line-height: 1.3;
    white-space: nowrap;
}

.risk-actions[b-6axz0pgj73] {
    margin-top: 2.25rem;
}

/* Risk centile display */
.risk-centile-display[b-6axz0pgj73] {
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 0.5rem;
}

.empty-state[b-6axz0pgj73] {
    padding: 3rem 1rem;
}

.empty-state-icon svg[b-6axz0pgj73] {
    opacity: 0.5;
}

@media (max-width: 833px) {
    .risk-report-page[b-6axz0pgj73] {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .risk-report-card[b-6axz0pgj73] {
        padding: 1.5rem 1rem;
    }

    .risk-centile-display[b-6axz0pgj73] {
        font-size: 1.05rem;
        margin-top: 1rem;
    }

    .calculation-timestamp[b-6axz0pgj73] {
        position: static;
        text-align: right;
        margin-bottom: 0.75rem;
        font-size: 0.8rem;
    }

    .patient-identifier-line[b-6axz0pgj73] {
        position: static;
        text-align: left;
        margin-bottom: 0.25rem;
        font-size: 0.8rem;
    }
}
/* /Shared/CtgLengthAdvisories.razor.rz.scp.css */
/* CTG-length advisories — moved verbatim from RiskReport.razor.css so the block
   renders identically on the risk report and the explanation page.
   The wrapper stacks the two <50 messages vertically with a small gap. */
.ctg-length-advisories[b-89u7804k5o] {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    .ctg-length-advisories .alert[b-89u7804k5o] {
        margin-bottom: 0;
    }

.ctg-length-reevaluation-advisory .advisory-intro[b-89u7804k5o] {
    margin-bottom: 0.75rem;
}

.ctg-length-reevaluation-advisory ul[b-89u7804k5o] {
    margin-bottom: 0; /* kill Bootstrap's default trailing margin inside the alert */
    padding-left: 1.25rem;
}

.ctg-length-sinusoidal-warning[b-89u7804k5o] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Tooltip-bearing info icon next to the sinusoidal warning. Tooltip text is shown on hover/focus. Real guideline URL is TBD. */
.ctg-sinusoidal-info[b-89u7804k5o] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    color: #856404;
    cursor: help;
}

    .ctg-sinusoidal-info svg[b-89u7804k5o] {
        width: 100%;
        height: 100%;
    }

.ctg-sinusoidal-tooltip[b-89u7804k5o] {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #212b32;
    color: #fff;
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    font-size: 0.8rem;
    line-height: 1.3;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease-in;
    z-index: 5;
}

.ctg-sinusoidal-info:hover .ctg-sinusoidal-tooltip[b-89u7804k5o],
.ctg-sinusoidal-info:focus .ctg-sinusoidal-tooltip[b-89u7804k5o],
.ctg-sinusoidal-info:focus-visible .ctg-sinusoidal-tooltip[b-89u7804k5o] {
    opacity: 1;
}
/* /Shared/RateLimitNotice.razor.rz.scp.css */
/* 429 "too many requests" notice. Bootstrap's alert-warning supplies colours and spacing so it matches the
   other advisories; this only lays out the icon and keeps the countdown from shifting as digits change. */
.rate-limit-notice[b-nc68j32o56] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rate-limit-icon[b-nc68j32o56] {
    flex: 0 0 auto;
    font-size: 1.1rem;
    line-height: 1;
}

.rate-limit-countdown[b-nc68j32o56] {
    display: inline-block;
    min-width: 2ch;
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
/* /Shared/RequireSession.razor.rz.scp.css */
/* Session check states (rate limited / API unreachable), laid out like the pages' empty states. Bootstrap's
   alert and button classes supply colours and spacing. */
.session-check[b-qdgq5sevkv] {
    padding: 3rem 1rem;
}

    .session-check[b-qdgq5sevkv]  .rate-limit-notice {
        justify-content: center;
        max-width: 32rem;
        margin: 0 auto 1.5rem auto;
    }

.session-check-error[b-qdgq5sevkv] {
    max-width: 32rem;
    margin: 0 auto 1.5rem auto;
}
/* /Shared/RiskBar.razor.rz.scp.css */
.risk-bar-wrapper[b-pt58diswhq] {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.risk-bar-container[b-pt58diswhq] {
    position: relative;
    width: 100%;
    max-width: 1000px;
    padding-top: 28px; /* space for the marker above the bar */
}

.risk-bar[b-pt58diswhq] {
    display: flex;
    height: 40px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* Segment widths match centile boundaries */
.risk-segment[b-pt58diswhq] {
    height: 100%;
    position: relative;
    transition: box-shadow 0.2s ease, transform 0.2s ease, filter 0.2s ease;
}

    .risk-segment.is-active[b-pt58diswhq] {
        z-index: 1;
        box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.15);
    }

.risk-segment-low[b-pt58diswhq] {
    flex: 0 0 25%;
    background: #2E7D32;
}

.risk-segment-background[b-pt58diswhq] {
    flex: 0 0 60%;
    background: #8BC34A;
}

.risk-segment-medium[b-pt58diswhq] {
    flex: 0 0 10%;
    background: #FFC107;
}

.risk-segment-high[b-pt58diswhq] {
    flex: 0 0 5%;
    background: #E65100;
}

.risk-segment-low.is-active[b-pt58diswhq] {
    border-top-left-radius: inherit;
    border-bottom-left-radius: inherit;
}

.risk-segment-high.is-active[b-pt58diswhq] {
    border-top-right-radius: inherit;
    border-bottom-right-radius: inherit;
}

/* Marker (blue triangle) */
.risk-marker[b-pt58diswhq] {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    z-index: 2;
    transition: left 0.3s ease;
    left: var(--marker-left);
    cursor: help;
    outline: none;
}

    .risk-marker:focus-visible[b-pt58diswhq] {
        /* Keyboard focus ring only � not shown on tap/click */
        outline: 2px solid #1B6EC2;
        outline-offset: 4px;
        border-radius: 2px;
    }

    /* Brief attention pulse on initial render � draws the eye to the marker so users discover that hover/tap reveals the tooltip. */
    .risk-marker.with-pulse[b-pt58diswhq]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        width: 24px;
        height: 20px;
        transform: translateX(-50%);
        transform-origin: 50% 33.3%;
        background: rgba(27, 110, 194, 0.55);
        clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
        pointer-events: none;
        opacity: 0;
        animation-name: risk-marker-discover-b-pt58diswhq;
        animation-duration: 1.1s;
        animation-timing-function: ease-out;
        animation-iteration-count: 3;
    }

@keyframes risk-marker-discover-b-pt58diswhq {
    0% {
        transform: translateX(-50%) scale(1);
        opacity: 0.55;
    }

    100% {
        transform: translateX(-50%) scale(2.4);
        opacity: 0;
    }
}

/* Suppress the pulse if the user is already interacting */
.risk-marker:hover[b-pt58diswhq]::before,
.risk-marker:focus[b-pt58diswhq]::before,
.risk-marker:focus-within[b-pt58diswhq]::before {
    opacity: 0;
}

.risk-marker-arrow[b-pt58diswhq] {
    display: block;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
    width: 24px;
    height: 20px;
    fill: #1B6EC2;
}

/* Tooltip � revealed on hover and focus (focus covers tap on touch devices) */
.risk-marker-tooltip[b-pt58diswhq] {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #1B4332;
    color: #fff;
    padding: 0.4rem 0.65rem;
    border-radius: 4px;
    font-size: 0.78rem;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    z-index: 3;
}

    .risk-marker-tooltip[b-pt58diswhq]::after {
        /* Speech-bubble tail */
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 5px solid transparent;
        border-top-color: #1B4332;
    }

.risk-marker:hover .risk-marker-tooltip[b-pt58diswhq],
.risk-marker:focus .risk-marker-tooltip[b-pt58diswhq] {
    opacity: 1;
    visibility: visible;
}

/* Labels under the bar */
.risk-labels[b-pt58diswhq] {
    display: flex;
    margin-top: 6px;
    font-size: 0.85rem;
    color: #444;
    line-height: 1.35;
}

.risk-label[b-pt58diswhq] {
    text-align: center;
    padding: 0 2px;
}

.risk-label-low[b-pt58diswhq] {
    flex: 0 0 25%;
    text-align: center;
}

.risk-label-background[b-pt58diswhq] {
    flex: 0 0 60%;
    text-align: center;
}

.risk-label-upper[b-pt58diswhq] {
    flex: 0 0 10%;
    text-align: center;
    white-space: nowrap;
}

.risk-label-top[b-pt58diswhq] {
    flex: 0 0 5%;
    text-align: center;
    white-space: nowrap;
}

.risk-label-line-1[b-pt58diswhq],
.risk-label-line-2[b-pt58diswhq] {
    display: block;
}

.label-compact[b-pt58diswhq] {
    display: none;
}

/* Risk legend mobile */
.risk-legend-mobile[b-pt58diswhq] {
    display: none;
}

.risk-legend-item[b-pt58diswhq] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.82rem;
    line-height: 1.35;
    color: #333;
}

.legend-swatch[b-pt58diswhq] {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex: 0 0 12px;
    margin-top: 0.18rem;
}

.legend-swatch-low[b-pt58diswhq] {
    background: #2E7D32;
}

.legend-swatch-background[b-pt58diswhq] {
    background: #8BC34A;
}

.legend-swatch-medium[b-pt58diswhq] {
    background: #FFC107;
}

.legend-swatch-high[b-pt58diswhq] {
    background: #E65100;
}

@media (max-width: 1080px) {
    .risk-bar-container[b-pt58diswhq] {
        max-width: 100%;
    }

    .risk-labels[b-pt58diswhq] {
        font-size: 0.75rem;
    }

    .risk-label-upper[b-pt58diswhq] {
        flex: 0 0 15%;
        text-align: left;
    }

    .risk-label-top[b-pt58diswhq] {
        flex: 0 0 10%;
        text-align: left;
        transform: translateX(-29px);
    }

        .risk-label-top .label-full[b-pt58diswhq],
        .risk-label-upper .label-full[b-pt58diswhq] {
            display: none;
        }

        .risk-label-top .label-compact[b-pt58diswhq],
        .risk-label-upper .label-compact[b-pt58diswhq] {
            display: inline;
        }
}

@media (max-width: 833px) {
    .risk-bar[b-pt58diswhq] {
        height: 36px;
        border-radius: 14px;
    }

    .risk-marker-arrow[b-pt58diswhq] {
        width: 22px;
        height: 18px;
    }

    /* Hide cramped inline labels */
    .risk-labels[b-pt58diswhq] {
        display: none;
    }

    /* Show stacked mobile legend */
    .risk-legend-mobile[b-pt58diswhq] {
        display: grid;
        gap: 0.45rem;
        margin-top: 0.9rem;
        margin-bottom: 0.25rem;
    }
}
/* /Shared/RiskCategoryHeading.razor.rz.scp.css */
/* Category text — moved verbatim from RiskReport.razor.css so the heading renders
   identically on the risk report and the explanation page. */
.risk-category-text[b-hh01k3v307] {
    text-align: center;
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 2rem;
    letter-spacing: 0.02em;
}

    .risk-category-text.risk-lower[b-hh01k3v307] {
        color: #2E7D32;
    }

    .risk-category-text.risk-background[b-hh01k3v307] {
        color: #558B2F;
    }

    .risk-category-text.risk-medium[b-hh01k3v307] {
        color: #E65100;
    }

    .risk-category-text.risk-increased[b-hh01k3v307] {
        color: #E65100;
    }

@media (max-width: 1080px) {
    .risk-category-text[b-hh01k3v307] {
        font-size: 1.35rem;
    }
}

@media (max-width: 833px) {
    .risk-category-text[b-hh01k3v307] {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }
}
/* /Shared/SessionTimeoutWarning.razor.rz.scp.css */
/* Session expiry warning. Bootstrap's .modal / .modal-backdrop / .modal-content supply the overlay, dialog chrome
   and stacking (above the fixed top navbar); this only styles the heading icon and keeps the countdown from shifting
   as digits change, matching the rate-limit notice. */
.session-timeout-modal .modal-title[b-7sjabld0tk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #0C2426;
}

.session-timeout-icon[b-7sjabld0tk] {
    flex: 0 0 auto;
    font-size: 1.1rem;
    line-height: 1;
}

.session-timeout-countdown[b-7sjabld0tk] {
    display: inline-block;
    min-width: 4ch;
    text-align: center;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}