/* ===========================================================================
   Method — how the estimate is arrived at.

   This page linked `index1.css`, which was never shipped with the site. Every
   rule it depended on was therefore missing: `.masonryPanel` had no card,
   `<h7>` (not a real element, so it inherits nothing) rendered as ordinary
   inline body text, and the whole page read as one undifferentiated wall.
   This file supplies what was missing, in the site's own design language.

   Content is untouched — this is presentation only, and it changes nothing in
   the prediction pipeline.
   =========================================================================== */

/* The page's own wrapper. `#body_one` already gets its width from ui.css. */
#body_one .main {
    display: block;
    width: 100%;
}

/* --- the panels ----------------------------------------------------------- */

.masonryPanelWrap {
    margin: 0 0 20px;
}

.masonryPanel {
    padding: 30px 34px;
    background: var(--hui-cream);
    border: 1px solid var(--hui-line);
    border-radius: 22px;
    box-shadow: 0 1px 2px rgba(13, 68, 44, .04);
    font-size: 15px;
    line-height: 1.8;
    color: #34473c;
    /* Long formulas and wide tables scroll inside the card rather than
       widening the page. */
    overflow-x: auto;
}

/* --- headings ------------------------------------------------------------- */

/* `h7` is not an HTML element. Browsers keep it in the DOM as an unknown
   inline node with no styling of its own, which is exactly why these headings
   were reading as body text. Making it a block and styling it here is far less
   invasive than rewriting the markup CIRB wrote. */
.masonryPanel h7 {
    display: block;
    font-family: var(--hui-display);
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -.015em;
    line-height: 1.35;
    color: var(--hui-green);
    margin: 0;
}

.masonryPanel h7 b { font-weight: 600; }

/* The same short gold rule the About page uses under a heading. */
.masonryPanel h7::after {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    margin: 12px 0 18px;
    border-radius: 2px;
    background: var(--hui-gold);
}

/* The <br> that follows each heading in the markup would otherwise add a
   blank line on top of the rule's margin. */
.masonryPanel h7 + br { display: none; }

/* --- body ----------------------------------------------------------------- */

.masonryPanel p {
    margin: 0 0 14px;
    text-align: justify;
}

.masonryPanel ul {
    margin: 0 0 16px;
    padding-left: 22px;
}

.masonryPanel li {
    margin-bottom: 7px;
}

.masonryPanel hr {
    border: none;
    border-top: 1px solid var(--hui-line);
    margin: 24px 0;
}

.masonryPanel b { color: var(--hui-ink); }

.masonryPanel a {
    color: var(--hui-green-2) !important;
    text-decoration: none !important;
    font-weight: 600;
}

.masonryPanel a:hover { text-decoration: underline !important; }

/* --- formulas ------------------------------------------------------------- */

/* Every equation on this page sits in a <center>. Give them a tinted band so
   they read as displayed mathematics rather than as a stray line of prose, and
   let a long one scroll on its own. */
.masonryPanel center {
    display: block;
    margin: 6px 0 18px;
    padding: 14px 18px;
    background: #f2f6ef;
    border: 1px solid #dbe6d3;
    border-radius: 12px;
    overflow-x: auto;
    font-size: 15.5px;
    color: var(--hui-ink);
}

/* MathJax's own display blocks, for the $$…$$ formulas. */
.masonryPanel mjx-container[display="true"] {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 0;
}

/* --- the benchmarking figure ---------------------------------------------- */

.masonryPanel img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 8px auto 4px;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--hui-line);
    border-radius: 14px;
}

/* --- references ----------------------------------------------------------- */

/* The reference list was boxed into a 250px window with its own scrollbar, so
   most of it was hidden behind a second scroll inside an already scrolling
   page. The list is short — let it simply be as long as it is.
   Matched on the inline style because that is where the height was set. */
.masonryPanel div[style*="250px"] {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

.masonryPanel ol {
    margin: 0;
    padding-left: 24px;
}

/* Bootstrap's `.well` is a grey inset box from an older era. These are
   citations, so they get a quiet card each instead. */
.masonryPanel li.well {
    margin: 0 0 10px;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid var(--hui-line);
    border-radius: 14px;
    box-shadow: none;
    font-size: 14px;
    line-height: 1.65;
}

/* `.text-warning` is Bootstrap's mustard. It is used here for citation titles,
   where it reads as a warning rather than as a title. */
.masonryPanel .text-warning {
    color: var(--hui-ink) !important;
    font-weight: 700;
}

.masonryPanel li.well a.text-warning {
    color: var(--hui-green-2) !important;
    font-weight: 600;
}

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 700px) {
    .masonryPanel {
        padding: 22px 18px;
        border-radius: 18px;
        font-size: 14.5px;
    }

    .masonryPanel h7 { font-size: 18px; }
    .masonryPanel p { text-align: left; }
    .masonryPanel center { padding: 12px; font-size: 14px; }
}