/*
    Disease Quick Summary (MSP-2132).

    Measurements taken from Figma "AI Initiatives_fy2026_SPR", desktop frame 180:1922 and
    mobile frame 202:5855 (UI-SPEC section 0). Mobile-first: the base rules are the 360px
    layout, and the desktop layout is layered on at 1024px.
*/

.quick-summary {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ---------- Gated wall (MSP-2222) ---------- */

/*
    Rows from the fourth displayed section on are wrapped in .quick-summary__gated by the panel.
    For a reader who can see everything the wrapper takes no part in layout. For a signed-out
    reader (the layout marks the article partial-gated-content) the first three sections stay
    readable, only the top of the fourth shows - blurred and not clickable - and the cropped
    FAQ below is left out, so the gated wall follows straight after (Figma 505:1702).

    Scoped to the Quick Summary: the old template keeps its 220px crop, and other pages their
    own gating (MSP-331).
*/
.quick-summary__gated {
    display: contents;
}

.partial-gated-content > .quick-summary .quick-summary__gated {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 140px;
    overflow: hidden;
    filter: blur(4px);
    pointer-events: none;
    user-select: none;
}

.partial-gated-content > .quick-summary:has(.quick-summary__gated) ~ .disease-content {
    display: none;
}

/* ---------- Section card ---------- */

.quick-summary__section {
    background: #f4f7fb;
    border-top: 3px solid #1b365d;
    border-radius: 8px;
    padding: 23px;
}

.quick-summary__section-head {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.quick-summary__heading {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    color: #1b365d;
}

/* Drawn with currentColor, so it follows whatever colour its heading is. */
.quick-summary__icon {
    flex: 0 0 auto;
}

.quick-summary__overview {
    margin: 0;
    line-height: 1.6;
}

/* ---------- Key Presenting Symptoms (FR-028) ---------- */

.quick-summary__symptom-grid {
    display: grid;
    grid-template-columns: 1fr;          /* 1 per row on mobile */
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.quick-summary__symptom-card {
    background: #fff;
    border: 1px solid #d8e0ea;
    border-left: 3px solid #00a3e0;
    border-radius: 6px;
    padding: 16px;
}

.quick-summary__symptom-name {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 4px;
}

.quick-summary__symptom-description {
    margin: 0;
    color: #4a5a70;
}

/* ---------- Assessment Workflow (FR-037) ---------- */

/* Mobile: vertical timeline with a continuous connector. */
.quick-summary__workflow {
    display: flex;
    flex-direction: column;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0 0 0 24px;
}

.quick-summary__workflow-step {
    position: relative;
}

.quick-summary__workflow-connector {
    position: absolute;
    left: -24px;
    top: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #00a3e0;
}

.quick-summary__workflow-step:not(:last-child) .quick-summary__workflow-connector::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 10px;
    width: 2px;
    height: calc(100% + 28px);
    background: #d8e0ea;
}

.quick-summary__workflow-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 4px;
}

.quick-summary__workflow-number {
    margin-right: 4px;
}

.quick-summary__workflow-description {
    margin: 0;
    color: #4a5a70;
}

/* ---------- Dosage Guidelines (FR-016) ---------- */

/* One card per drug, two across on desktop (see the desktop block below). */
.quick-summary__dosage-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: start;
}

.quick-summary__dosage-card {
    background: #fff;
    border: 1px solid #d8e0ea;
    border-radius: 6px;
    padding: 16px;
}

.quick-summary__dosage-drug {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 8px;
    color: #17324d;
}

.quick-summary__dosage-class {
    display: inline-block;
    background: #efe7fb;
    color: #5b3fa8;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.quick-summary__dosage-value {
    margin: 8px 0 0;
    line-height: 1.5;
}

.quick-summary__dosage-label {
    font-weight: 700;
}

/* ---------- Red Flags (FR-029, NFR-003) ---------- */

/*
    The section card itself is the callout: red rule, tinted ground, red heading and flag icon
    (Figma frame 180:1922). An earlier version drew a bordered box inside the card, which put a
    red box inside a red box and matched neither the design nor the deck.

    Urgency is carried by the flag icon and the visually-hidden prefix as well as the colour, so
    it survives for anyone who cannot perceive the red.
*/
.quick-summary__section--warning-signs {
    background: #fdf3f2;
    border: 1px solid #f0b4b4;
    border-top: 3px solid #c62828;
}

.quick-summary__section--warning-signs .quick-summary__heading {
    color: #c62828;
}

.quick-summary__warning-body {
    color: #3d1414;
}

.quick-summary__warning-body :where(ul, ol) {
    margin: 0;
    padding-left: 20px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Rich text (FR-017, FR-034) ---------- */

.quick-summary__rich-text {
    line-height: 1.6;
}

.quick-summary__rich-text :where(ul, ol) {
    padding-left: 20px;
}

.quick-summary__rich-text a {
    color: #0b6bb5;
    text-decoration: underline;
}

/*
    Author-inserted tables must not force the page to scroll sideways (NFR-004).
    MSP-2202: at most 703px wide on desktop, full width and scrolling inside itself on mobile.
*/
.quick-summary__rich-text table {
    display: block;
    width: 100%;
    max-width: 703px;
    overflow-x: auto;
    border-collapse: collapse;
}

/* MSP-2202 - 1px light grey borders and the same space on all four sides of a cell. */
.quick-summary__rich-text :where(th, td) {
    border: 1px solid #b2adad;
    padding: 8px;
    text-align: left;
}

.quick-summary__rich-text th {
    background: #eaf0f7;
    font-weight: 700;
}

/*
    MSP-2205 - on mobile the Disease Algorithm button sits below the steps, on desktop beside
    the heading. The markup keeps it in the header (one element, so the rendered href and the
    hasPart relatedLink stay one value); below desktop the header box is dissolved so the
    button can be ordered after the content.
*/
.quick-summary__section--assessment-workflow {
    display: flex;
    flex-direction: column;
}

.quick-summary__section--assessment-workflow .quick-summary__section-head {
    display: contents;
}

.quick-summary__section--assessment-workflow .quick-summary__heading {
    margin-bottom: 24px;
}

.quick-summary .quick-summary__section--assessment-workflow .quick-summary__view-more--button {
    order: 1;
    margin-top: 24px;
}

/* ---------- View More (FR-032) ---------- */

.quick-summary__view-more {
    display: inline-block;
    margin-top: 16px;
}

/* Blue in every link state, qualified with the panel class for the reason given on the button
   below: `.specialty-content a` (mims-specialty.css) otherwise turned these links MIMS red. Its
   `text-decoration: none !important` is why the hover underline needs !important too. */
.quick-summary .quick-summary__view-more--link,
.quick-summary .quick-summary__view-more--link:link,
.quick-summary .quick-summary__view-more--link:visited {
    color: #0b6bb5;
    font-weight: 600;
    text-decoration: none;
}

.quick-summary .quick-summary__view-more--link:hover,
.quick-summary .quick-summary__view-more--link:focus-visible,
.quick-summary .quick-summary__view-more--link:active {
    color: #0b6bb5;
    text-decoration: underline !important;
}

/*
    The red button takes its look from the shared btn btn-red btn-sm f-h6 text-white classes,
    as the Disease Algorithm page's button does: MIMS red, white 15px bold label, no change on
    hover. Only its place in the section is set here. text-white is !important, so the label
    stays white in every link state despite the page's red anchor rule.
*/
.quick-summary .quick-summary__view-more--button {
    margin-top: 0;
}

.quick-summary__view-more:focus-visible {
    outline: 2px solid #00a3e0;
    outline-offset: 2px;
}

/* ---------- Paired sections (Differential Diagnosis + Diagnostics) ---------- */

/*
    Stacked by default, side by side from 1024px.

    These base rules must stay ABOVE the desktop media query. A media query adds no
    specificity, so a same-specificity rule declared after it wins regardless of viewport —
    which is exactly how the first attempt at this failed: flex-direction: column sat below
    the media query and silently cancelled the row.
*/
.quick-summary__pair {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: stretch;
}

.quick-summary__pair-item {
    min-width: 0;
}

/* ---------- Specialist Referral cards ---------- */

/*
    Styled by descendant selector, not by class on the cards themselves.

    This section is stored HTML and passes through DiseaseSummarySanitizer, whose allowlist
    carries no "class" attribute — any class the mapper emits is stripped before it reaches the
    page. The section wrapper class below is emitted by the component and never sanitized, so it
    is the only stable hook. The structure matched here is written by
    AiDiseaseSummaryMapper.BuildReferrals: an outer div of card divs, each holding labelled
    paragraphs.
*/
.quick-summary__section--specialist-referral .quick-summary__rich-text > div {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.quick-summary__section--specialist-referral .quick-summary__rich-text > div > div {
    background: #fff;
    border: 1px solid #d8e0ea;
    border-radius: 6px;
    padding: 16px;
}

.quick-summary__section--specialist-referral .quick-summary__rich-text > div > div > p {
    margin: 0 0 8px;
    line-height: 1.5;
}

.quick-summary__section--specialist-referral .quick-summary__rich-text > div > div > p:last-child {
    margin-bottom: 0;
}

/* MSP-2198 - Specialist Referral rows, styled as the rich-text cards were. */
.quick-summary__referral-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.quick-summary__referral-card {
    background: #fff;
    border: 1px solid #d8e0ea;
    border-radius: 6px;
    padding: 16px;
}

.quick-summary__referral-line {
    margin: 0 0 8px;
    line-height: 1.5;
}

.quick-summary__referral-line:last-child {
    margin-bottom: 0;
}

.quick-summary__referral-label {
    font-weight: 700;
}

/* ---------- Tablet ---------- */

@media (min-width: 768px) {
    .quick-summary__symptom-grid {
        grid-template-columns: repeat(2, 1fr);   /* min 2 per row (MSP-2133) */
    }
}

/* ---------- Desktop ---------- */

@media (min-width: 1024px) {
    .quick-summary {
        gap: 20px;
    }

    /* Figma uses exactly 3 across the 1003px content column; there is no 4-up variant. */
    .quick-summary__symptom-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .quick-summary__section-head {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: 32px;
    }

    /* MSP-2202 - more room in a cell once the screen allows it, still equal all round. */
    .quick-summary__rich-text :where(th, td) {
        padding: 12px;
    }

    /* MSP-2205 - the header is a box again, with the button on its right. */
    .quick-summary__section--assessment-workflow {
        display: block;
    }

    .quick-summary__section--assessment-workflow .quick-summary__section-head {
        display: flex;
    }

    .quick-summary__section--assessment-workflow .quick-summary__heading {
        margin-bottom: 0;
    }

    .quick-summary .quick-summary__section--assessment-workflow .quick-summary__view-more--button {
        margin-top: 0;
    }

    /* Two drug cards across, as the deck lays them out. */
    .quick-summary__dosage-list {
        grid-template-columns: repeat(2, 1fr);
    }

    /*
        Assessment Workflow flips to a horizontal row of cards joined by arrows.
        Reserving a min-height keeps the row from reflowing as content loads (CLS, §3.4).
    */
    .quick-summary__workflow {
        flex-direction: row;
        align-items: stretch;
        gap: 30px;
        padding: 0;
        min-height: 195px;
    }

    .quick-summary__workflow-step {
        flex: 1 1 0;
        background: #fff;
        border: 1px solid #d8e0ea;
        border-radius: 6px;
        padding: 16px;
    }

    .quick-summary__workflow-connector {
        left: auto;
        right: -20px;
        top: 50%;
        width: 10px;
        height: 10px;
        background: transparent;
        border-top: 2px solid #00a3e0;
        border-right: 2px solid #00a3e0;
        transform: translateY(-50%) rotate(45deg);
        border-radius: 0;
    }

    .quick-summary__workflow-step:not(:last-child) .quick-summary__workflow-connector::after {
        content: none;
    }

    .quick-summary__workflow-step:last-child .quick-summary__workflow-connector {
        display: none;
    }

    /*
        Differential Diagnosis and Diagnostics sit side by side as two columns
        (UI-SPEC §11, conflict F-6).

        Done with flex on a wrapper the panel emits, not with float on the sections themselves.
        The earlier float rule could never have worked: .quick-summary is a flex column, and
        flex items ignore float, so both sections always rendered full width.
    */
    .quick-summary__pair {
        flex-direction: row;
    }

    /* Referral cards go two across, as the design lays them out. */
    .quick-summary__section--specialist-referral .quick-summary__rich-text > div {
        grid-template-columns: repeat(2, 1fr);
    }

    .quick-summary__referral-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .quick-summary__pair-item {
        /* Equal halves that may shrink; min-width:0 lets a wide table scroll inside its own
           container instead of forcing the row wider than the column. */
        flex: 1 1 0;
        min-width: 0;
    }
}

/*
    Inline advertisement (MSP-2132, Figma 292:2674).

    The design pairs the ad with Key Presenting Symptoms only: a 1003px content column split
    683 / 20 / 300. Expressed as flex rather than fixed widths so it holds at any container
    width, with the ad pinned to its fixed slot size and the section taking the rest.

    Everything below the breakpoint stacks, matching the rail's own behaviour — the ad slot is
    300px wide and cannot share a phone-width row with a card grid.
*/
.quick-summary__with-ad {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
}

.quick-summary__with-ad-main {
    min-width: 0;
    width: 100%;
}

.quick-summary__ad {
    /* Never grows or shrinks: a Primesight slot is exactly 300px and a stretched or squeezed
       ad container reports the wrong size to the ad script. */
    flex: 0 0 300px;
    width: 300px;
    max-width: 100%;
}

@media (min-width: 1024px) {
    .quick-summary__with-ad {
        flex-direction: row;
    }

    .quick-summary__with-ad-main {
        flex: 1 1 auto;
    }
}


/* ---------- MSP-2133 ---------- */

/*
    Key Presenting Symptoms takes the whole row when no ad is served. The ad script marks an
    unfilled slot msp-adbanner-nofill (ad-banner-loaded.js); without this the 300px column
    stayed reserved beside the symptoms with nothing in it.
*/
.quick-summary__with-ad:has(.msp-adbanner-nofill) .quick-summary__ad {
    display: none;
}

/*
    Differential Diagnosis, Diagnostics and Pharmacological Management are tables on desktop
    and cards on mobile: each row becomes a card, its first cell the title. Header rows are
    left out on cards - each card already reads as one item, and the sanitizer keeps no
    data attributes from which per-cell labels could be drawn.

    A header row is one with no data cell. Matching any row that holds a <th> also hid body
    rows written with a row header (<th>Danazol</th><td>200 mg</td>), so a phone showed a
    pharmacological table with drugs missing and nothing to say so (THREATMODEL-MSP-2133 T-204).
*/
@media (max-width: 767.98px) {
    .quick-summary__section--differential-diagnosis .quick-summary__rich-text table,
    .quick-summary__section--diagnostics .quick-summary__rich-text table,
    .quick-summary__section--pharmacological-management .quick-summary__rich-text table {
        display: block;
        max-width: none;
        overflow: visible;
        border: 0;
    }

    .quick-summary__section--differential-diagnosis .quick-summary__rich-text :is(thead, tbody, tfoot, tr, th, td),
    .quick-summary__section--diagnostics .quick-summary__rich-text :is(thead, tbody, tfoot, tr, th, td),
    .quick-summary__section--pharmacological-management .quick-summary__rich-text :is(thead, tbody, tfoot, tr, th, td) {
        display: block;
    }

    .quick-summary__section--differential-diagnosis .quick-summary__rich-text :is(thead, tr:not(:has(> td))),
    .quick-summary__section--diagnostics .quick-summary__rich-text :is(thead, tr:not(:has(> td))),
    .quick-summary__section--pharmacological-management .quick-summary__rich-text :is(thead, tr:not(:has(> td))) {
        display: none;
    }

    .quick-summary__section--differential-diagnosis .quick-summary__rich-text tr,
    .quick-summary__section--diagnostics .quick-summary__rich-text tr,
    .quick-summary__section--pharmacological-management .quick-summary__rich-text tr {
        background: #fff;
        border: 1px solid #b2adad;
        border-radius: 8px;
        padding: 12px;
        margin-bottom: 12px;
    }

    .quick-summary__section--differential-diagnosis .quick-summary__rich-text :is(th, td),
    .quick-summary__section--diagnostics .quick-summary__rich-text :is(th, td),
    .quick-summary__section--pharmacological-management .quick-summary__rich-text :is(th, td) {
        border: 0;
        padding: 4px 0;
        /* A row header keeps the card's ground, not the desktop header shading. */
        background: none;
    }

    .quick-summary__section--differential-diagnosis .quick-summary__rich-text :is(th, td):first-child,
    .quick-summary__section--diagnostics .quick-summary__rich-text :is(th, td):first-child,
    .quick-summary__section--pharmacological-management .quick-summary__rich-text :is(th, td):first-child {
        font-weight: 700;
    }
}

/*
    The design's Pharmacological Management, Differential Diagnosis and Diagnostics tables span
    their section (Figma 292:2630) rather than stopping at the MSP-2202 703px cap. A real table
    box, not the block one: a block-displayed table only wraps a table sized to its content, so
    it would still stop short of the edge. Phones keep the cards above.
*/
@media (min-width: 768px) {
    .quick-summary__section--differential-diagnosis .quick-summary__rich-text table,
    .quick-summary__section--diagnostics .quick-summary__rich-text table,
    .quick-summary__section--pharmacological-management .quick-summary__rich-text table {
        display: table;
        width: 100%;
        max-width: none;
    }

    /* Without the block box there is no inner scroll, so a long word wraps instead of
       pushing the table past the section (NFR-004). */
    .quick-summary__section--differential-diagnosis .quick-summary__rich-text :where(th, td),
    .quick-summary__section--diagnostics .quick-summary__rich-text :where(th, td),
    .quick-summary__section--pharmacological-management .quick-summary__rich-text :where(th, td) {
        overflow-wrap: anywhere;
    }

    /* mims-specialty.css gives every tr, thead, tbody and tfoot on the page a 1px border
       (`.disease-content-section > tbody, td, tfoot, th, thead, tr`: only tbody is scoped),
       solid by Bootstrap's reboot. Those drew an outer frame and a rule under the header that
       the cells' own borders below do not, so they are cleared here. */
    .quick-summary__section--differential-diagnosis .quick-summary__rich-text :is(table, thead, tbody, tfoot, tr),
    .quick-summary__section--diagnostics .quick-summary__rich-text :is(table, thead, tbody, tfoot, tr),
    .quick-summary__section--pharmacological-management .quick-summary__rich-text :is(table, thead, tbody, tfoot, tr) {
        border: 0;
    }

    /* The design's rows: a shaded header, a light rule under each row, and no vertical or
       outer borders, in place of the MSP-2202 grid the other sections' tables keep. */
    .quick-summary__section--differential-diagnosis .quick-summary__rich-text :is(th, td),
    .quick-summary__section--diagnostics .quick-summary__rich-text :is(th, td),
    .quick-summary__section--pharmacological-management .quick-summary__rich-text :is(th, td) {
        border: 0;
        border-bottom: 1px solid #d5dbe3;
        padding: 20px 22px;
        vertical-align: middle;
    }

    /* A header row is one with no data cell, as on the cards; a row header in a body row
       (<th>Danazol</th><td>200 mg</td>) reads as an ordinary first cell, as in the design. */
    .quick-summary__section--differential-diagnosis .quick-summary__rich-text :is(thead th, tr:not(:has(> td)) > th),
    .quick-summary__section--diagnostics .quick-summary__rich-text :is(thead th, tr:not(:has(> td)) > th),
    .quick-summary__section--pharmacological-management .quick-summary__rich-text :is(thead th, tr:not(:has(> td)) > th) {
        background: #e8eef7;
        border-bottom: 0;
        font-weight: 700;
    }

    .quick-summary__section--differential-diagnosis .quick-summary__rich-text tr:has(> td) > th,
    .quick-summary__section--diagnostics .quick-summary__rich-text tr:has(> td) > th,
    .quick-summary__section--pharmacological-management .quick-summary__rich-text tr:has(> td) > th {
        background: none;
        font-weight: 400;
    }
}