/* ---------------------------------------------------------------------------
   Condensed calculator styling.

   The QTools calculators (qrisk.org, qdiabetes.org and the rest) put the whole
   form on one screen: small type, thin rules, labels and controls on the same
   line, no decorative space. People have used them for fifteen years and know
   where everything is. This sheet brings that density to the EP calculator
   page, which inherits NHS.UK styling designed for long single-column public
   service forms - large type and generous spacing, both of which work against
   a clinician filling in thirty fields during a consultation.

   Everything is scoped under .calc-page so the existing multi-calculator page
   is untouched. The NHS classes are baked into the generated form snippets, so
   this overrides them in place rather than changing the snippets: the same
   markup has to keep working on both pages.
   --------------------------------------------------------------------------- */

.calc-page {
    --calc-rule: #c8ccd0;
    --calc-band: #eef1f4;
    --calc-ink: #212b32;
    --calc-accent: #005eb8;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 1.35;
    color: var(--calc-ink);
}

/* --- header strip: which calculator, which patient, and the way out -------- */

.calc-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 6px 10px;
    background: var(--calc-band);
    border: 1px solid var(--calc-rule);
    border-radius: 3px;
    margin-bottom: 8px;
}

.calc-bar__name {
    font-size: 15px;
    font-weight: bold;
    margin: 0;
    white-space: nowrap;
}

.calc-bar__desc {
    color: #4c5860;
    flex: 1 1 auto;
    min-width: 120px;
}

.calc-bar select {
    font-size: 13px;
    padding: 2px 6px;
    height: auto;
    border: 1px solid var(--calc-rule);
    border-radius: 3px;
    background-color: #fff;
    max-width: 230px;
}

/* Nothing entered, nothing to discard. */
.calc-reset--empty { display: none; }

/* Outlined and red, against Calculate's filled blue: the one to think about
   before pressing, not the one to reach for. */
.calc-page .calc-reset {
    font-size: 13px;
    padding: 3px 12px;
    border-radius: 3px;
    border: 1px solid #a8303a;
    background: #fff;
    color: #a8303a;
    font-weight: bold;
    cursor: pointer;
}

.calc-page .calc-reset:hover { background: #fdf2f3; }

/* Link to this algorithm's own explanatory page. Follows the switcher, so it
   always points at the calculator currently on screen. */
.calc-page .calc-info-link {
    white-space: nowrap;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

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

.calc-cols {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.calc-col--input  { flex: 1 1 62%; min-width: 0; }
.calc-col--output { flex: 1 1 38%; min-width: 0; position: sticky; top: 8px; }

.calc-panel {
    border: 1px solid var(--calc-rule);
    border-radius: 3px;
    background: #fff;
}

.calc-panel__head {
    padding: 4px 10px;
    background: var(--calc-band);
    border-bottom: 1px solid var(--calc-rule);
    font-weight: bold;
}

.calc-panel__body { padding: 8px 10px; }

/* A header with a control on the right as well as a title on the left. */
.calc-panel__head--split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 3px 10px;
}

/* Calculate. The primary action on the page, so it is filled rather than
   outlined - the Reset beside the patient strap is the one that should look
   like something to think about before pressing. */
.calc-page .calc-go {
    font-size: 13px;
    font-weight: bold;
    padding: 3px 16px;
    border: 1px solid var(--calc-accent);
    border-radius: 3px;
    background: var(--calc-accent);
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
}

.calc-page .calc-go:hover { background: #004e9a; border-color: #004e9a; }

/* --- the generated form --------------------------------------------------- */

/* Section headings arrive as nhsuk-heading-xl with a large top margin. At this
   density they need to read as a rule with a word on it, not as a title.

   Scoped to that one class on purpose. NHS.UK wraps every *field* legend in an
   h1 as well - that is its pattern for a question that owns its fieldset - so a
   blanket h1 rule turns every field label into a section heading and the page
   reads as thirty sections of one field each. */
.calc-page .nhsuk-heading-xl {
    font-size: 13px !important;
    font-weight: bold;
    margin: 12px 0 4px !important;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--calc-rule);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #37474f;
}

.calc-page .nhsuk-heading-xl:first-child { margin-top: 0 !important; }

/* A field's own legend. It is a question, so it reads as a label: normal weight,
   same size as the answer beside it, no rule and no capitals. */
.calc-page .nhsuk-fieldset__heading,
.calc-page .nhsuk-fieldset__legend,
.calc-page legend {
    font-size: 13px !important;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
    border: 0;
    margin: 0 0 1px !important;
    padding: 0;
    color: var(--calc-ink);
    float: none;
    width: auto;
}

.calc-page .nhsuk-fieldset { margin: 0; padding: 0; border: 0; }

/* The generated form wraps each question in a form group with NHS spacing. */
.calc-page .nhsuk-form-group { margin: 0 0 4px; padding: 0; }

/* Two columns of fields. main2.css already makes #dynamic-form-loader a two-column
   grid, with a 10px gap in both directions - and it does it with an ID selector,
   so it wins against anything scoped by class. Rather than fight that, this keeps
   the grid and tightens it: the row gap is what makes the checkbox list feel
   loose, while the column gutter needs to stay wide enough to keep the two
   columns apart. Hence different values for each. */
.calc-page #dynamic-form-loader {
    gap: 2px 18px;
    /* main2.css sets 50% 50%, which together with any column gap adds up to more
       than the container and pushes the right-hand column past the panel edge and
       over the results. Fractions take the gap into account. */
    grid-template-columns: 1fr 1fr;
}

/* A section heading introduces the fields under it, so it spans both columns.
   Left in one column it reads as a label on whichever field happens to follow. */
.calc-page #dynamic-form-loader .nhsuk-heading-xl {
    grid-column: 1 / -1;
}

/* A group with sub-groups (the conditions): its blocks flow down two columns in the
   order the meta model gives them, which is Julia's order (22 September 2026), and a
   block never splits across the columns. Spans the grid, and lays its own columns out
   inside, because a grid places blocks across then down and this must read down then
   across. */
.calc-page #dynamic-form-loader .calc-group--blocks {
    grid-column: 1 / -1;
    columns: 2;
    column-gap: 18px;
}

.calc-page .calc-subgroup {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin: 0 0 8px;
}

.calc-page .calc-subgroup[hidden] { display: none; }

/* A question that does not apply for this patient - pre-eclampsia for a man - is
   greyed out and disabled rather than removed, so the form keeps its shape and an
   answer already given keeps its place for when the sex is changed back. */
.calc-page .form-item-wrapper.calc-dependent-off { opacity: .45; }
.calc-page .form-item-wrapper.calc-dependent-off .nhsuk-checkboxes__label,
.calc-page .form-item-wrapper.calc-dependent-off .nhsuk-label { cursor: default; }

/* One checkbox per cell, so a list of conditions runs down two columns rather than
   one long one. main2.css spans every checkbox across both columns, which suited the
   multi-calculator page; here the conditions are the longest thing on the form and
   two columns halve the scrolling. A long label wraps within its cell. */
.calc-page #dynamic-form-loader .nhsuk-checkboxes__item,
.calc-page #dynamic-form-loader .form-item-wrapper:has(input[type="checkbox"]) {
    grid-column: auto;
}

.calc-page .form-item-wrapper {
    margin: 0 0 3px;
    padding: 0;
}

.calc-page .nhsuk-checkboxes__item,
.calc-page .nhsuk-radios__item {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin: 0 0 2px;
    padding: 0;
    min-height: 0;
}

.calc-page .nhsuk-checkboxes__label,
.calc-page .nhsuk-radios__label,
.calc-page .nhsuk-label {
    font-size: 13px;
    padding: 0;
    margin: 0;
    font-weight: normal;
    display: flex;
    align-items: baseline;
    gap: 5px;
    cursor: pointer;
}

.calc-page .nhsuk-checkboxes__input,
.calc-page .nhsuk-radios__input {
    position: static;
    width: 14px;
    height: 14px;
    margin: 0;
    opacity: 1;
    flex: 0 0 auto;
}

.calc-page .nhsuk-hint {
    font-size: 11px;
    color: #6b7680;
    margin: 0 0 0 19px;
    display: block;
}

.calc-page input[type="text"],
.calc-page input[type="number"],
.calc-page select {
    font-size: 13px;
    padding: 2px 5px;
    height: auto;
    border: 1px solid var(--calc-rule);
    border-radius: 2px;
    max-width: 100%;
}

/* Every dropdown wears the same grey end-cap with a chevron on it, so that a box
   that opens a list looks like one. Bootstrap's own chevron floats 12px in from the
   edge with 36px of padding reserved for it, and the tighter padding this page uses
   put the text underneath it: Julia took the BMI and blood pressure choosers for
   plain boxes (22 September 2026). Drawn rather than native, so it is the same cap
   in every browser. The padding is forced because the switcher and the horizon
   controls set their own and would otherwise run their text under the cap. */
.calc-page select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 28px !important;
    background-color: #fff;
    background-image:
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1 3l4 4 4-4' fill='none' stroke='%23212b32' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
        linear-gradient(to right, var(--calc-rule) 0, var(--calc-rule) 1px, var(--calc-band) 1px, var(--calc-band) 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: right 6px center, right 0 top;
    background-size: 10px 10px, 22px 100%;
}

/* A value the calculator would refuse, marked the moment its box is left, with the
   range written beside it. */
.calc-page input.calc-invalid {
    outline: 2px solid #d5281b;
    outline-offset: 1px;
    border-color: #d5281b;
}

.calc-page .field-validation-error {
    display: block;
    font-size: 11px;
    font-weight: normal;
    color: #d5281b;
    margin-top: 1px;
}

.calc-page .nhsuk-input--width-5 { width: 6em; }
.calc-page .nhsuk-input--width-10 { width: 10em; }

/* Unit labels such as "mmHg". Bootstrap sizes these to match a full-height form
   control, which at this density makes the unit louder than the number it belongs
   to, and stretches its input taller than every other box on the page. */
.calc-page .input-group-text {
    font-size: 11px;
    padding: 1px 5px;
    line-height: 1.5;
    color: #4c5860;
    background: var(--calc-band);
    border: 1px solid var(--calc-rule);
    /* Match the height of the box it is attached to. Sized to its own text it ends
       up shorter than the input, and the pair reads as two controls that happen to
       be touching rather than one field with its unit on the end.

       The stretch has to go on .input-group-append: that is the flex item inside
       the input group, and the chip is a span inside it, so align-self on the chip
       itself has nothing to stretch against. */
    display: flex;
    align-items: center;
    height: 100%;
}

.calc-page .input-group-append {
    align-self: stretch;
    display: flex;
}

/* The value half of a chooser-plus-value field carries a pt-2 utility, from when the
   value sat on the line below its chooser. Side by side that 8px lands the box a few
   pixels lower than the chooser next to it. */
.calc-page .form-item-wrapper [class*="-input-set"] {
    padding-top: 0 !important;
}

/* Fields the engine reported as missing. Outlined rather than bordered so that
   highlighting cannot nudge the layout: in a two-column grid a one-pixel border
   appearing on a dozen fields at once reflows the whole form. */
.calc-page .form-item-wrapper.calc-missing {
    outline: 2px solid #d5281b;
    outline-offset: 2px;
    border-radius: 2px;
    background: #fdf2f1;
}

.calc-page .form-item-wrapper.calc-missing > .nhsuk-fieldset > legend,
.calc-page .form-item-wrapper.calc-missing > label,
.calc-page .form-item-wrapper.calc-missing .nhsuk-fieldset__heading {
    color: #d5281b;
    font-weight: bold;
}

/* Radio groups run across rather than down. Two or three short options stacked
   vertically cost three rows for what reads fine in one. Wrapping, not nowrap,
   because some groups (learning disability) have options too long for a line. */
.calc-page .nhsuk-radios {
    display: flex;
    flex-wrap: wrap;
    gap: 1px 14px;
}

.calc-page .nhsuk-radios__item { margin: 0; }

/* Compound fields - a chooser plus a value, or a set of readings - are built as a
   Bootstrap row. Postcode, cholesterol and BMI each put their chooser and their
   value box in separate full-width columns, so by default they stack and the
   chooser stretches the panel for the sake of two short options.

   Flexing the row fixes that, but it must wrap. An earlier version of this rule
   used nowrap, which suited the two-column fields and sent the three systolic
   readings straight off the side of the panel and over the results. */
.calc-page .form-item-wrapper .row {
    display: flex;
    flex-wrap: wrap;
    /* Bottom edges, not centres. Some of these columns carry their own little label
       and some do not - Height and Weight do, a plain BMI does not - so centring
       floated the units chooser above the boxes it belongs to by exactly the height
       of those labels. Aligning on the bottom puts every box on one line whatever
       sits above it. */
    align-items: flex-end;
    gap: 3px 6px;
    margin: 0;
}

/* Columns size to their content rather than to a fraction of the row. Bootstrap's
   col-12 means "a whole line", which is what stacks these in the first place, and
   picking flex-basis values by hand just moves the problem: too small and the
   chooser truncates, too large and the pair wraps anyway. */
.calc-page .form-item-wrapper .row > [class*="col"] {
    padding: 0;
    min-width: 0;
    width: auto;
    flex: 0 1 auto;
}

/* The blood pressure control: a single value with its optional standard deviation,
   or any number of readings. Either way it wants the whole line, so it spans both
   grid columns as the three readings it replaced did. */
.calc-page #dynamic-form-loader .form-item-wrapper.calc-sbp { grid-column: 1 / -1; }
.calc-page .calc-sbp .row > .col-12:has(.calc-sbp__single) { flex: 1 1 auto; }
.calc-page .calc-readings { display: flex; flex-wrap: wrap; gap: 3px 8px; }
.calc-page .calc-readings__item input { width: 5.5em; }
.calc-page .calc-readings__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-top: 3px; }

.calc-page .calc-readings__add {
    background: none;
    border: 0;
    padding: 0;
    color: var(--calc-accent);
    text-decoration: underline;
    cursor: pointer;
    font-size: 12px;
}

.calc-page .calc-readings__summary { font-size: 12px; color: #4c5860; }

/* A common width for the choosers, so the value boxes beside them start at the
   same offset in both grid columns. Left to size themselves, "Cholesterol/HDL
   ratio" and "Body Mass Index (BMI)" end at different places and the two value
   boxes sit a couple of centimetres out of line with each other. */
.calc-page .form-item-wrapper .row select.input-method-select { width: 11em; max-width: 100%; }
.calc-page .form-item-wrapper .row input { width: 6em; }

/* BMI and cholesterol: the chooser has a line of its own and the boxes go beneath it.
   Beside it, 11em cut the options off ("Height/Weight (Imp"), the metric boxes'
   labels pushed them out of line with the chooser, and the four imperial boxes
   wrapped round under it wherever the line ran out (John, 27 Oct 2026). On its own
   line the chooser can be as wide as its longest option, and the boxes start at the
   same place whichever way of entering the value is chosen. Blood pressure keeps its
   chooser beside its value: it spans both grid columns, so there is room. */
.calc-page .form-item-wrapper:not(.calc-sbp) .row > .col-12:has(> .input-group > select.input-method-select) {
    flex: 1 1 100%;
}

.calc-page .form-item-wrapper:not(.calc-sbp) .row select.input-method-select {
    /* Bootstrap's input group stretches its select to fill the line. */
    flex: 0 0 auto;
    width: auto;
    min-width: 11em;
}

/* A measurement in two units - feet and inches, stones and pounds - is one answer:
   one label, its boxes side by side on one line (InputWrapper.cshtml). */
.calc-page .calc-measure__boxes {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
}

/* Each such measurement has a line to itself, and every box and every unit is the
   same width, so the lines match column for column: feet over stones, inches over
   pounds (John, 27 Oct 2026). They take whole numbers (Calculator.cshtml), so two
   characters is the most any of them needs - 5 ft 11 in, 13 st 13 lb - against the
   six of a metric box, which also has to show its range ("140 to 210"). The width
   allows for the 5px padding and the border either side, and a little to spare. */
.calc-page .form-item-wrapper .row > .calc-measure { flex: 1 1 100%; }
.calc-page .form-item-wrapper .calc-measure input { width: calc(2ch + 16px); }
.calc-page .calc-measure .input-group-text {
    width: 4.2em;
    justify-content: center;
}

/* QDiabetes' two blood tests are one grid cell, the glucose above the HbA1c, in the
   column beside BMI (RunController builds the cell; John, 27 Oct 2026). On any other
   calculator both questions are hidden, and an empty cell would leave a hole in the
   grid, so the cell goes too. */
.calc-page .calc-stack:not(:has(> .form-item-wrapper:not([style*="display: none"]))) {
    display: none;
}

/* A dropdown that is the answer sizes to its longest option, up to the column, so
   that "British, English, Northern Irish, Scottish, or Welsh" is not cut off at
   "British". Julia asked for the ethnicity box to be wider (22 September 2026). */
.calc-page .form-item-wrapper .row select:not(.input-method-select) {
    width: auto;
    min-width: 12em;
    max-width: 100%;
}

.calc-page .form-item-wrapper .row .form-label {
    font-size: 11px;
    color: #6b7680;
    margin: 0;
}

.calc-page #townsendResult { font-size: 12px !important; }

/* Wide enough for a postcode and for its own placeholder. */
.calc-page #postcode { width: 8.5em; }

/* The one question about time two calculators ask, sitting with the form. */
.calc-page .calc-horizon {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 2px 0 8px;
    font-size: 13px;
}

.calc-page .calc-horizon input,
.calc-page .calc-horizon select {
    padding: 2px 6px;
    border: 1px solid var(--calc-rule);
    border-radius: 3px;
    background-color: #fff;
    font-size: 13px;
}

.calc-page .calc-horizon input { width: 4em; }
.calc-page .calc-horizon__error { color: #a8303a; }
.calc-page .calc-horizon__input--error { border-color: #a8303a !important; }

/* qrisk.org/lifetime's two-row table: the lifetime figure, the figure to the chosen
   age, each against "what if". */
.calc-page .calc-lifetime th,
.calc-page .calc-lifetime td { font-size: 12px; padding: 3px 8px; }

/* The device label on the UKCA page: the symbols are the ISO 15223-1 ones the QTools
   sites use, at the size they use them. */
.calc-page .calc-label { max-width: 560px; margin-bottom: 10px; }
.calc-page .calc-label td { vertical-align: middle; font-size: 12px; padding: 4px 8px; }
.calc-page .calc-label td:first-child { width: 120px; }
.calc-page .calc-label img { width: 56px; height: 56px; display: block; }
.calc-page .calc-ukca-mark { width: 100px; height: 100px; }

/* --- results -------------------------------------------------------------- */

.calc-score {
    font-size: 30px;
    font-weight: bold;
    line-height: 1.1;
    color: var(--calc-accent);
}

.calc-score__unit { font-size: 15px; font-weight: normal; }

.calc-placeholder {
    color: #6b7680;
    font-style: italic;
    padding: 10px 0;
}

/* Sits above the score, because it qualifies it. Amber rather than red: the score
   is usable, it just rests on assumptions the reader has to know about. */
.calc-assumed {
    border: 1px solid #e0d3ac;
    background: #fdf6e3;
    border-radius: 3px;
    padding: 6px 10px;
    margin-bottom: 8px;
    font-size: 12px;
}

.calc-assumed p { margin: 0 0 4px; }
.calc-assumed p:last-child { margin-bottom: 0; }
.calc-assumed ul { margin: 0 0 4px; padding-left: 18px; }

/* A calculator's own note on reading its score. Plain rather than boxed: it is
   background, where the assumed-values note above it is a warning. */
.calc-note { margin-top: 10px; font-size: 12px; }
.calc-note h4 { font-size: 12px; font-weight: bold; margin: 0 0 3px; }
.calc-note p { margin: 0 0 5px; }
.calc-note p:last-child { margin-bottom: 0; }

/* A result that no longer matches the form. Dimmed so it cannot be read as the
   current answer, and not removed, because it is often what the user is comparing
   against while they change something. */
.calc-page #results.calc-stale {
    opacity: .4;
    filter: grayscale(1);
}

.calc-page .calc-stale-note {
    border: 1px solid #e0b000;
    background: #fff8e1;
    border-left: 4px solid #e0b000;
    border-radius: 3px;
    padding: 6px 10px;
    margin-bottom: 8px;
    font-weight: bold;
}

/* The result's accordion header, now that it no longer folds anything. Reads as a
   heading rather than a button: no chevron, no hover, no pointer. */
.calc-page #results .accordion-button.calc-static-head,
.calc-page #results .accordion-button {
    cursor: default;
    box-shadow: none;
    background: transparent;
}

.calc-page #results .accordion-button::after { display: none; }

/* Bootstrap hides a collapse that has not been opened; there is nothing to open. */
.calc-page #results .accordion-collapse { display: block !important; }

/* The answer in reading order, as Julia asked: one sentence with the number in it,
   the faces, the chart with its caption, then the detail folded away. */
.calc-page .calc-headline { margin: 0 0 8px; }
.calc-page .calc-headline__main { font-size: 15px; margin: 0 0 5px; }
.calc-page .calc-headline__main b { color: var(--calc-accent); font-size: 20px; }
.calc-page .calc-headline__line { margin: 0 0 3px; font-size: 12px; }
.calc-page .calc-faces { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 8px; }
.calc-page .calc-faces p { margin: 0; max-width: 360px; }
.calc-page .calc-chart-note { font-size: 11px; color: #4c5860; margin: 4px 0 8px; }
.calc-page .calc-details { margin: 6px 0 8px; font-size: 12px; }
.calc-page .calc-details summary { cursor: pointer; color: var(--calc-accent); }
.calc-page .calc-subs th,
.calc-page .calc-subs td { font-size: 12px; padding: 3px 8px; }
.calc-page #results h3 { font-size: 14px; margin: 4px 0; }
/* QCancer's two lists, today's scores and the 10-year ones, each under a heading. */
.calc-page #results .calc-model-heading { font-size: 14px; font-weight: 700; color: var(--calc-accent); margin: 12px 0 4px; }
.calc-page #results .calc-model-note { font-size: 11px; color: #4c5860; margin: 0 0 4px; }
.calc-page #results .calc-qcancer { width: auto; min-width: 320px; margin: 0 0 8px; }
.calc-page #results .calc-qcancer th,
.calc-page #results .calc-qcancer td { font-size: 12px; padding: 3px 8px; }
.calc-page #results .calc-qcancer__risk { text-align: right; white-space: nowrap; }
.calc-page #results hr { margin: 4px 0; }

/* --- landing page --------------------------------------------------------- */

/* The list of calculators is the front door, so each row is a generous click
   target with the name doing the work and the description explaining which one
   you want. */
.calc-page .calc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.calc-page .calc-list li {
    padding: 5px 0;
    border-bottom: 1px solid var(--calc-rule);
}

.calc-page .calc-list li:last-child { border-bottom: 0; }

.calc-page .calc-list a {
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
    display: inline-block;
    min-width: 11em;
}

.calc-page .calc-list a:hover { text-decoration: underline; }

.calc-page .calc-list span { color: #4c5860; }

@media (max-width: 700px) {
    .calc-page .calc-list a { display: block; min-width: 0; }
}

/* A call to action that is a link rather than a form control. */
.calc-page .calc-cta {
    display: inline-block;
    padding: 4px 12px;
    background: #007f3b;
    color: #fff;
    border-radius: 3px;
    text-decoration: none;
    font-weight: bold;
}

.calc-page .calc-cta:hover { background: #00672f; }
.calc-page .calc-hint { color: #6b7680; font-size: 11px; margin-left: 6px; }

/* --- publications --------------------------------------------------------- */

/* Jump links, so a page of eight algorithms' papers can be used as a reference
   rather than read from the top. */
.calc-page .pub-index {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
}

.calc-page .pub-index a {
    padding: 2px 8px;
    border: 1px solid var(--calc-rule);
    border-radius: 3px;
    background: #fff;
    text-decoration: none;
    white-space: nowrap;
}

.calc-page .pub-index a:hover { background: var(--calc-band); }

.calc-page .pub-body h2 {
    font-size: 14px;
    font-weight: bold;
    margin: 16px 0 4px;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--calc-rule);
    /* Clears the heading of the sticky bar when arriving from a jump link. */
    scroll-margin-top: 8px;
}

.calc-page .pub-body h2:first-child { margin-top: 0; }
.calc-page .pub-body p { margin: 0 0 6px; }
.calc-page .pub-body ul { margin: 0 0 10px; padding-left: 18px; }
.calc-page .pub-body li { margin-bottom: 5px; }

/* The calculator this page belongs to is worth reaching from the papers, and the
   papers are worth reaching from the calculator. */
.calc-page .pub-body .pub-back { font-size: 12px; }

/* --- narrow screens ------------------------------------------------------- */

/* Below tablet width two columns of fields stop being readable and the sticky
   results panel would cover the form it belongs to, so both are dropped. */
@media (max-width: 991px) {
    .calc-cols { flex-direction: column; }
    .calc-col--output { position: static; width: 100%; }
}

/* A phone gets one column of everything: below about 640px two columns leave each
   label a few words wide. The earlier version of this rule set column-count, which
   a grid never reads, so phones were getting two columns all along. */
@media (max-width: 640px) {
    .calc-page #dynamic-form-loader { grid-template-columns: 1fr; }
    .calc-page #dynamic-form-loader .calc-group--blocks { columns: 1; }
}

@media print {
    .calc-bar button, .calc-bar select { display: none; }
    .calc-col--output { position: static; }
}