/**
 * Salary Calculator — C2 Broadsheet editorial reskin.
 * Loaded on the use_editorial + use_v4_styles stack. Tokens only.
 * Scoped under .im-calc (the section wrapping _calculator_form.html) plus the
 * JS-hook IDs the calculator toggles.
 *
 * The JS-injected result internals ARE themed here, as of 2026-08. The July
 * reskin left them alone and the result state stayed visibly Bootstrap — a
 * blue tint panel and a blue pill beside a warm-paper form — once the initial
 * state moved to the editorial rail. The rule that still holds is the reason
 * that boundary existed: the copy inside those JS template strings is
 * IAA-reviewed, so it is restyled from CSS and never edited to restyle it.
 */

/* ---- Page header ---- */
.im-calc-badges { display: flex; gap: var(--im-space-3); flex-wrap: wrap; margin-top: var(--im-space-6); }
.im-calc-cta-actions { display: flex; gap: var(--im-space-3); flex-wrap: wrap; margin-top: var(--im-space-6); }

/* ---- Section rhythm ----
   The numbered circles are gone. Four numbered steps promised a wizard the page
   does not have: it is one continuous scroll, and step 3 was a heavyweight
   number over two checkboxes. A rule and a heading carry the same grouping
   without the false promise. */
.im-calc-section { display: grid; gap: var(--im-space-6); }

/* ---- Answer-first disclosures ----
   Sections 2 to 4 sit behind these. Each summary carries the group's current
   value on the right, which is what makes progressive disclosure honest: a
   closed panel still tells you what you have not set. Local to the calculator
   because it has exactly one consumer; promote to forms.css at the second. */
/* The label above the group. .im-form__seclab supplies the voice; this supplies
   the grouping. .im-form's 24px grid gap sits on both sides of the label, which
   reads as belonging to the row above it. Pulling the group up halves the gap
   below, so the label binds downward to what it names. */
.im-disclose__heading { margin-bottom: calc(var(--im-space-3) - var(--im-space-6)); }
.im-disclose { display: grid; border: 1px solid var(--im-hairline);
    border-radius: var(--im-radius-control); overflow: hidden; }
.im-disclose__item + .im-disclose__item { border-top: 1px solid var(--im-hairline); }
.im-disclose__summary { display: flex; align-items: center; gap: var(--im-space-3);
    padding: var(--im-space-4) var(--im-space-5); cursor: pointer; list-style: none;
    background: var(--im-card-bg); font-family: var(--im-font-display);
    font-weight: 600; font-size: 14px; color: var(--im-ink); }
.im-disclose__summary::-webkit-details-marker { display: none; }
.im-disclose__summary::marker { content: ""; }
.im-disclose__summary:hover { background: var(--im-paper); }
.im-disclose__summary:focus-visible { outline: 2px solid var(--im-accent-200); outline-offset: -2px; }
.im-disclose__caret { flex: 0 0 auto; width: 8px; height: 8px; margin-left: 2px;
    border-right: 1.5px solid var(--im-text-muted); border-bottom: 1.5px solid var(--im-text-muted);
    transform: rotate(-45deg); transition: transform var(--im-dur) var(--im-ease); }
details[open] > .im-disclose__summary .im-disclose__caret { transform: rotate(45deg); }
.im-disclose__label { flex: 1 1 auto; min-width: 0; }
.im-disclose__value { flex: 0 0 auto; font-weight: 400; font-size: 12.5px;
    color: var(--im-text-muted); font-variant-numeric: tabular-nums; text-align: right;
    max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.im-disclose__panel { padding: var(--im-space-2) var(--im-space-5) var(--im-space-6);
    background: var(--im-paper); border-top: 1px solid var(--im-hairline);
    display: grid; gap: var(--im-space-6); }
.im-calc-secttl { font-family: var(--im-font-display); font-weight: 600; font-size: 20px;
    line-height: 1.25; color: var(--im-ink); margin: 0;
    display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--im-space-3); }

/* Label sharing its line with the "see all 6 criteria" toggle. */
.im-calc-labelrow { display: flex; align-items: center; justify-content: space-between;
    gap: var(--im-space-3); flex-wrap: wrap; }

.im-calc-fine { font-size: 0.75rem; margin: var(--im-space-2) 0 0; padding-left: var(--im-space-5); }
.im-calc-fine li { line-height: 1.5; }

/* ---- Honeypot (off-screen bot trap) ---- */
.im-calc-honeypot { position: absolute; left: -9999px; }

/* ---- Inline link button (See all 6 criteria) ----
   .im-btn--quiet + --sm own colour, metrics and hover. This class only adds the
   micro-label voice (display face, uppercase, tracking). */
.im-calc-linkbtn { font-family: var(--im-font-display); letter-spacing: .04em;
    text-transform: uppercase; }

/* ---- New-entrant expandable panel ---- */
.im-calc-panel { background: var(--im-band); border: 1px solid var(--im-hairline);
    border-radius: var(--im-radius-control); padding: var(--im-space-5);
    display: grid; gap: var(--im-space-3); }
.im-calc-panel__lead { font-family: var(--im-font-display); font-weight: 600; font-size: 13px;
    color: var(--im-ink); margin: 0; }
/* A date field revealed under the checkbox it belongs to. */
.im-calc-subfield { margin-left: var(--im-space-8); }

/* ---- Conditional field insets (revealed by JS) ---- */
.im-calc-cond { border-left: 3px solid var(--im-accent-200); background: var(--im-band);
    padding: var(--im-space-4) var(--im-space-5); border-radius: 0 var(--im-radius-control) var(--im-radius-control) 0;
    animation: im-calc-slide .2s ease-out; }

@keyframes im-calc-slide {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---- Alerts (editorial, monochrome + teal; icons/headings carry meaning) ----
   These stay on Bootstrap .alert classes because salary-calculator.js toggles
   them by id and the result panel injects .alert-info variants of its own. */
.im-calc .alert { font-family: var(--im-font-body); font-size: 13.5px; line-height: 1.55;
    background: var(--im-band); border: 1px solid var(--im-hairline); border-radius: var(--im-radius-control);
    color: var(--im-text-200); padding: var(--im-space-3) var(--im-space-4); margin: 0; }
.im-calc .alert p { margin: var(--im-space-1) 0 0; }
.im-calc .alert-info { border-left: 3px solid var(--im-accent-200); }
.im-calc .alert-warning { border-left: 3px solid var(--im-ink); }
.im-calc .alert-danger { border-left: 3px solid var(--im-danger-ink); }

/* ---- Submit button + remaining counter ----
   Metrics and the disabled state come from .im-btn; only the spinner is local.
   The rule and the spacing above it now come from .im-form__actions, which is
   what stops the button colliding with the last field's hint. */
.im-calc-submit .spinner-border { width: 1rem; height: 1rem; }

/* ---- Results rail ----
   Not a card. The initial state is a reference table, and a bordered card of
   equal weight beside the form card made the page read as two competing
   panels; a single accent rule subordinates it to the form. */
.im-calc-results { border-left: 2px solid var(--im-accent-200); padding-left: var(--im-space-6); }
@media (min-width: 992px) {
    .im-calc-results { position: sticky; top: 7rem; align-self: start; }
}
.im-calc-rail__kicker { font-family: var(--im-font-display); font-size: 10.5px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--im-text-muted); margin: 0 0 var(--im-space-1); }
.im-calc-rail__lead { font-family: var(--im-font-serif); font-weight: 400; font-size: 20px;
    line-height: 1.2; letter-spacing: var(--im-track-head); color: var(--im-ink);
    margin: 0 0 var(--im-space-2); }
.im-calc-rail__note { font-family: var(--im-font-body); font-size: 13px; color: var(--im-text-muted);
    margin: 0 0 var(--im-space-6); }

/* Threshold reference table. Tables are what get extracted into snippets and
   AI overviews, and four figures in a column are read by comparing them. */
.im-calc-thr { width: 100%; border-collapse: collapse; }
.im-calc-thr th { font-family: var(--im-font-display); font-size: 10px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: var(--im-text-muted);
    text-align: left; padding: 0 0 var(--im-space-2); border-bottom: 1px solid var(--im-hairline); }
.im-calc-thr th:last-child, .im-calc-thr td:last-child { text-align: right; }
.im-calc-thr td { font-family: var(--im-font-body); font-size: 13px; color: var(--im-text-200);
    padding: var(--im-space-3) 0; border-bottom: 1px solid var(--im-hairline); }
.im-calc-thr td:last-child { font-family: var(--im-font-display); font-weight: 600;
    color: var(--im-ink); font-variant-numeric: tabular-nums; white-space: nowrap;
    padding-left: var(--im-space-4); }
.im-calc-thr tr:last-child td { border-bottom: 0; }

.im-calc-hairline-top { border-top: 1px solid var(--im-hairline); }

/* =========================================================================
   Result state (JS-injected markup)

   salary-calculator.js builds the verdict panel as a Bootstrap string, so the
   copy in those templates is IAA-reviewed and must not be edited to restyle
   it. Everything below themes the classes the JS emits instead: the initial
   state moved to the editorial rail in 2026-08 and the result state did not,
   leaving a Bootstrap-blue tint panel, a blue pill and 44px centred figures
   beside a warm-paper form. None of those blues exist in the Portland palette.

   Above/below is a factual comparison, not a verdict, and the copy carries it.
   The two states differ by the colour of a left rule (accent vs ink), which is
   the same device .im-calc .alert-info / .alert-warning already use, rather
   than by a filled tint.
   ========================================================================= */
#result-badge { text-align: left !important; padding: var(--im-space-4) var(--im-space-5) !important;
    border-radius: 0 var(--im-radius-control) var(--im-radius-control) 0 !important;
    background: var(--im-band) !important; border-left: 3px solid var(--im-ink); }
#result-badge.bg-info { border-left-color: var(--im-accent-200); }
#result-badge i { display: none; }
#result-badge h4 { font-family: var(--im-font-display); font-weight: 600; font-size: 16px;
    line-height: 1.3; color: var(--im-ink) !important; margin: 0 0 var(--im-space-2); }
#result-badge p { font-family: var(--im-font-body); font-size: 13px; line-height: 1.55;
    color: var(--im-text-muted) !important; margin: 0; }

/* Comparison rows: two figures either side of a relational operator. */
.comparison-row { padding: var(--im-space-4) 0; }
.comparison-row.border-top { border-top: 1px solid var(--im-hairline) !important; }
.comparison-row .small { font-family: var(--im-font-display); font-size: 10.5px !important;
    letter-spacing: .1em; text-transform: uppercase; color: var(--im-text-muted) !important; }
.comparison-row .fs-4,
.comparison-row .fs-5 { font-family: var(--im-font-display); font-weight: 600;
    font-size: 20px !important; line-height: 1.15; color: var(--im-ink);
    font-variant-numeric: tabular-nums; }
.comparison-badge { width: 28px; height: 28px; font-size: 12px;
    display: inline-flex !important; align-items: center; justify-content: center;
    background: var(--im-paper) !important; color: var(--im-text-200) !important;
    border: 1px solid var(--im-hairline); font-family: var(--im-font-display); }

/* Option pill ("Option A / Standard") and any other injected badge. */
#result-details .badge,
#result-recommendation .badge { background: var(--im-band) !important; color: var(--im-text-200) !important;
    font-family: var(--im-font-display); font-weight: 600; font-size: 10px; letter-spacing: .1em;
    text-transform: uppercase; padding: 4px 10px; border-radius: var(--im-radius-pill); }

#result-details dl { margin-bottom: 0; }
#result-details dt { font-family: var(--im-font-body); color: var(--im-text-200); font-weight: 500; }
#result-details dd { font-family: var(--im-font-display); color: var(--im-ink); font-weight: 600; }
#result-details .row > dt,
#result-details .row > dd { padding-top: 0.5rem; padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--im-hairline); }
#result-details .row > dt:last-of-type,
#result-details .row > dd:last-of-type { border-bottom: none; }

#result-recommendation h6 { font-family: var(--im-font-display); font-weight: 600; font-size: 13px;
    letter-spacing: .04em; color: var(--im-ink); margin-bottom: var(--im-space-2); }
#result-recommendation h6 i,
#result-recommendation .text-info { color: var(--im-accent-200) !important; }
#result-recommendation p { font-family: var(--im-font-body); font-size: 13px; line-height: 1.6;
    color: var(--im-text-200); }

/* Warnings and the ISL note, injected as .alert-info variants. */
.isl-warning,
#result-warnings .alert-info { background: var(--im-band); border: 1px solid var(--im-hairline);
    border-left: 3px solid var(--im-accent-200); }

/* ---- Disclaimer ---- */
.im-calc-disclaimer { background: var(--im-band); border: 1px solid var(--im-hairline);
    border-left: 3px solid var(--im-accent-200); border-radius: 0 var(--im-radius-card) var(--im-radius-card) 0;
    padding: var(--im-space-6); margin-top: var(--im-space-8); }
.im-calc-disclaimer__title { font-family: var(--im-font-display); font-weight: 600; font-size: 15px;
    color: var(--im-ink); margin: 0 0 var(--im-space-2);
    display: flex; align-items: center; gap: var(--im-space-2); }
.im-calc-disclaimer__title i { color: var(--im-accent-200); }
.im-calc-disclaimer p { font-family: var(--im-font-body); font-size: 13px;
    color: var(--im-text-muted); line-height: 1.6; margin: 0; }

/* ---- Rate-limit modal ---- */
.im-calc-modal-icon { width: 80px; height: 80px; margin: 0 auto var(--im-space-5);
    display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
    background: var(--im-band); color: var(--im-accent-200); }

/* ---- Tooltip trigger ---- */
[data-bs-toggle="tooltip"] { cursor: help; }

/* =========================================================================
   SOC Code search autocomplete
   ========================================================================= */
.soc-search-container { position: relative; }
.soc-search-clear { position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    border: none; background: none; font-size: 1.25rem; color: var(--im-text-muted);
    cursor: pointer; padding: 0 4px; line-height: 1; z-index: 2; }
.soc-search-clear:hover { color: var(--im-ink); }
#soc_search { padding-right: 2rem; }
#soc_search.soc-search-selected { background-color: var(--im-band); font-weight: 500; }
.soc-search-results { position: absolute; top: 100%; left: 0; right: 0; z-index: 100;
    max-height: 300px; overflow-y: auto; background: var(--im-card-bg);
    border: 1px solid var(--im-hairline); border-top: none;
    border-radius: 0 0 var(--im-radius-control) var(--im-radius-control); box-shadow: var(--im-shadow-1); }
.soc-search-item { display: flex; flex-wrap: wrap; align-items: center; padding: 0.5rem 0.75rem;
    cursor: pointer; border-bottom: 1px solid var(--im-hairline); gap: 0.25rem; }
.soc-search-item:last-child { border-bottom: none; }
.soc-search-item:hover,
.soc-search-item--active { background-color: var(--im-band); }
.soc-search-item-main { flex: 1; min-width: 0; }
.soc-search-code { font-family: var(--im-font-display); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 0.85rem;
    margin-right: 0.5rem; color: var(--im-accent-200); }
.soc-search-title { font-family: var(--im-font-body); font-size: 0.85rem; color: var(--im-ink); }
.soc-search-related { width: 100%; font-size: 0.75rem; color: var(--im-text-muted); padding-left: 0.5rem; }
.soc-search-empty { padding: 1rem; text-align: center; color: var(--im-text-muted); font-size: 0.85rem; }
.soc-search-results mark { background-color: color-mix(in srgb, var(--im-accent-200) 20%, transparent);
    padding: 0; border-radius: 2px; }

@media (max-width: 575.98px) {
    .soc-search-item { padding: 0.75rem; }
    .soc-search-results { max-height: 250px; }
}

/* Smooth transitions for conditional fields */
#nhs-band-section,
#medical-grade-section,
#education-role-section,
#london-area-section,
#isl-experience-section,
#isl-info-alert { transition: opacity 0.2s ease, max-height 0.3s ease; }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .im-calc-cond { animation: none; }
    .im-disclose__caret { transition: none; }
    #nhs-band-section,
    #medical-grade-section,
    #education-role-section,
    #london-area-section,
    #isl-experience-section,
    #isl-info-alert { transition: none; }
}