#main {
        background-color: rgba(255, 255, 255, var(--bg-alpha));
}

#calculation {
    width: min(1200px, 88%);
    margin: 0 auto;
    box-sizing: border-box;
}

/* #simulator-intro sits directly in #main, not inside a .section-base — so it
 * gets none of that class's `display:flex; align-items:center`. A <p>
 * dropped in there would still get general.css's `#main p { width: min(50%,
 * 1140px) }`, but with no flex parent to center it, that width collapses it
 * against the left edge instead — the same recurring bug as
 * .criteria-unranked-notice below. Recreated here explicitly rather than
 * depending on an ancestor we don't have. */
#simulator-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(1200px, 88%);
    margin: 0 auto;
    box-sizing: border-box;
}
/* #calculation's `align-items: center` only centers its own direct flex
 * children — #simulator-notice-anchor itself, not the width-capped <p>/<div>
 * notes inside it. Without its own flex context those notes default to the
 * left edge of the anchor's full-width box. */
#simulator-notice-anchor {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
#main .live-verify-note,
#main .live-guest-note {
    width: min(50%, 1140px);
    max-width: 112ch;
    box-sizing: border-box;
    /* general.css's `#main p { text-align: justify }` reads as ragged,
     * uneven spacing on a short one/two-line notice — centered instead. */
    text-align: center;
}

.form-row.inline-row {
    display: flex;
    gap: 12px;
    align-items: center;
}

.form-row { margin-bottom: 1.25rem; }

#main .personal-info-hint { color: #6b777b; text-align: center; }

/* Guest consent opt-ins. Checkbox first, then the label text, each on its own
   line — the wording is a sentence rather than a field name, so the trailing
   label the other rows use would read as a question with the answer in front
   of it. */
/* Centred to match the member fieldset above it. The options are centred as a
   BLOCK rather than individually: centring each label on its own would align
   them to their own text widths and stagger the two checkboxes against each
   other. The inline-block wrapper shrink-wraps to the wider option, so both
   checkboxes share one left edge while the group sits centred. */
#guest-consent-row {
    text-align: center;
}

#guest-consent-row .consent-options {
    display: inline-block;
    text-align: left;
}

#guest-consent-row .consent-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
    cursor: pointer;
}

#guest-consent-row .consent-option input[type="checkbox"] {
    margin: 0.2rem 0 0 0;
    flex: 0 0 auto;
}

/* Keeps general.css's `#main p { width: min(50%, 1140px) }` deliberately: a
 * two-line hint at half width reads better than one long line spanning the
 * whole form. That width is not auto-centred though, so it needs the `auto`
 * side margins to sit under the centred options rather than flush left, and an
 * explicit text-align to override general.css's `#main p { text-align: justify }`. */
#main #guest-consent-row .consent-hint {
    margin: 10px auto 0 auto;
    font-size: 0.875rem;
    color: #6b777b;
    text-align: center;
}

.form-row.inline-row .form-field {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
}

.form-field label { margin-bottom: 6px; font-weight: 600; }
.form-field input[type="text"], .form-field input[type="email"], .form-field input[type="number"] {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    padding: 10px 12px;
    border-radius: 8px;
    transition: box-shadow 120ms ease, transform 80ms ease;
}
.form-field select {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    padding: 10px 12px;
    border-radius: 8px;
    transition: box-shadow 120ms ease, transform 80ms ease;
}

.form-field select, #year-select, #country {
    position: relative;
    z-index: 1160; 
}
.form-field input[type="text"]:hover, .form-field input[type="email"]:hover, .form-field input[type="number"]:hover,
.form-field input[type="text"]:focus, .form-field input[type="email"]:focus, .form-field input[type="number"]:focus {
    box-shadow: 0 6px 18px rgba(16,32,42,0.06);
    outline: none;
}
.form-field select:hover, .form-field select:focus { box-shadow: 0 6px 18px rgba(16,32,42,0.06); outline: none; }

.crit-input.prefilled {
    background: #f0f0f0;
}

.criteria-category summary {
    cursor: pointer;
    list-style: none;
}
.criteria-category summary::-webkit-details-marker {
    display: none;
}
.criteria-category summary h3 {
    display: inline;
}
.criteria-category summary::before {
    content: '▸ ';
    font-size: 0.9em;
}
.criteria-category[open] summary::before {
    content: '▾ ';
}

.switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}
.switch input { display: none; }
.switch .track {
    width: 44px; height: 24px; border-radius: 14px; background: rgba(0,0,0,0.08); position: relative; transition: background 160ms ease;
}
.switch .thumb { width: 18px; height: 18px; background: #fff; border-radius: 50%; position: absolute; top: 3px; left: 3px; box-shadow: 0 6px 16px rgba(16,32,42,0.08); transition: left 160ms ease, background 160ms ease; }
.switch input:checked + .track { background: rgba(165,204,212,1); }
.switch input:checked + .track .thumb { left: 23px; }
.switch .labeltext { font-size: 0.95rem; }

.criteria-category {
    margin-bottom: 18px;
}
.criteria-list {
    display: grid;
    gap: 12px;
}

.criterion-row {
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.criterion-row .crit-name { font-weight: 700; margin-bottom: 6px; text-align: center; }
.criterion-row .crit-input-wrap { display:flex; align-items:center; gap:8px; flex: 1 1 auto; justify-content: center; }
/* Right-aligned so the entered value sits next to the "/ max" separator and
 * reads as a single "value / max" unit rather than being split by a gap. */
.criterion-row input.crit-input { background: #fff; border: 1px solid rgba(0,0,0,0.06); padding: 8px 10px; border-radius: 6px; text-align: right; }
.criterion-row .crit-total { color: #666; }
.criterion-row .crit-percent { margin-left: 8px; font-weight:600; color:#0f2430; }
.criterion-row .crit-rank { margin: 6px 0 0 0; color:#6b777b; font-weight:600; text-align: center; }

#category-summaries { display:flex; gap: 18px; justify-content: center; margin-top: 18px; }
.category-summary { background: transparent; padding: 8px 12px; border-radius:8px; min-width:260px; }
.category-summary strong { display:block; margin-bottom:6px; }

.specific-categories {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

/* Unranked criteria (Story 8.8) span the full width below quality/quantity —
 * they are not a third scored category, so they don't share the 2-column
 * grid those two occupy. */
.criteria-category--unranked { grid-column: 1 / -1; }

.criteria-unranked-notice {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-left-width: 4px;
    border-radius: 6px;
    padding: 0.6rem 0.8rem;
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    color: #1e3a8a;
}
/* It's a <p>, so general.css's `#main p { width: min(50%, 1140px) }` caps it
 * — and this box's parent (.specific-categories, a CSS grid, not a flex
 * container with align-items:center) never centers that capped width, so it
 * sits flush against the left edge of the OTHER category instead of spanning
 * it. Neutralize the cap: #main outranks the plain type selector, so this is
 * the fix, not a workaround. */
#main .criteria-unranked-notice {
    width: auto;
    max-width: none;
    text-align: left;
}

.criterion-row--unranked { opacity: 0.85; }
.crit-unranked-hint { color: #6b777b; font-style: italic; }

/* `summary` (the arrow toggle from the ::before below plus the h3) is the flex
 * container itself, so `space-between` pushed the title off to one side —
 * away from the arrow rather than centered. `center` with a small gap groups
 * them and centers the pair. */
.category-header { display:flex; align-items:center; justify-content:center; gap:6px; margin-bottom:8px; }
.cat-toggle { background: transparent; border: 1px solid rgba(0,0,0,0.06); border-radius:6px; padding:4px 8px; cursor:pointer; font-weight:700; }
.criteria-category.collapsed .criterion-row:not(.category-total-row) { display: none; }

.section-base h2 { margin-top: 0; margin-bottom: 10px; font-size: 1.05rem; }

#overall-summary { text-align: left; margin-top: 12px; padding: 8px 10px; border-radius: 8px; display:flex; align-items:center; gap:10px; }
#overall-summary .overall-value { font-weight: 700; margin-left: 8px; }
#overall-summary .overall-rank { font-weight:700; color:#6b777b; }

.criterion-row.category-total-row { background: rgba(0,0,0,0.02); padding: 10px; border-radius: 6px; }
.criterion-row.category-total-row .crit-name { text-transform: uppercase; }
.criterion-row.category-total-row .crit-percent { font-weight:700; }
.cat-total-wrap { display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; }
.criterion-row.category-total-row .cat-total-wrap { align-items:center; justify-content:center; }
.criterion-row.category-total-row .crit-input-wrap { flex: 1 1 auto; }
.criterion-row.category-total-row .crit-percent { display:block; text-align:center; width:100%; }

@media (max-width: 900px){
    .form-row.inline-row {
        flex-direction: column;
        align-items: stretch;
    }
    .specific-categories { grid-template-columns: 1fr; }
    #calculation { width: min(900px, 96%); }
    #criteria-section .overall-row { width: 100%; }
}

#calculation-result { text-align: center; margin-top: 18px; padding: 10px; }

#overall-summary { display: none; }
.actions-row { display: none; justify-content: center; }

#criteria-section .overall-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    background: rgba(0,0,0,0.02);
    padding: 10px;
    border-radius: 6px;
    width: calc((100% - 24px) / 2);
    margin-left: auto;
    margin-right: auto;
}
#criteria-section .overall-row strong { display:block; text-transform:uppercase; font-weight:700; }
#criteria-section .overall-row .overall-rank { color:#6b777b; font-weight:700; }
#criteria-section .overall-row .overall-value { font-weight:700; font-size:1.05rem; }

.calculate-index{
    margin-top: 0.75rem;
    font-size: clamp(0.9rem, 1.6vw, 1.0rem);
    color: white;
    background-color: #A5CCD4;
    padding: 0.6rem 1.2rem;
    border: 2px solid transparent;
    border-radius: 10px;
    transition: background-color 180ms ease, transform 120ms ease, border-color 180ms ease;
}
.calculate-index:hover{ cursor: pointer; background-color: #BDD9DF; border-color: rgba(0,0,0,0.08); transform: translateY(-2px); }

.submit-live {
    margin-top: 0.75rem;
    font-size: clamp(0.9rem, 1.6vw, 1.0rem);
    color: white;
    background-color: #0f5132;
    padding: 0.6rem 1.2rem;
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 180ms ease, transform 120ms ease, border-color 180ms ease;
}
.submit-live:hover { background-color: #198754; border-color: rgba(0,0,0,0.08); transform: translateY(-2px); }
.submit-live:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

#criteria-section{
    padding-top: 0;
}

/* Rank Display */
.rank-display {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-top: var(--space-4);
    text-align: center;
}

.rank-display.rank-gold {
    border-color: #d4a843;
    box-shadow: 0 2px 12px rgba(212, 168, 67, 0.2);
}

.rank-total {
    margin-bottom: var(--space-3);
}

.rank-total-value {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1.1;
}

.rank-gold .rank-total-value {
    color: #b8860b;
}

.rank-total-label {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text-light);
    margin-top: var(--space-1);
}

.rank-scores {
    display: flex;
    justify-content: center;
    gap: var(--space-5);
    margin-bottom: var(--space-3);
}

.rank-score-item {
    text-align: center;
}

.rank-score-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text);
}

.rank-score-label {
    display: block;
    font-size: 0.8rem;
    color: var(--color-text-light);
}

.rank-comparison {
    font-size: 1.1rem;
    margin-bottom: var(--space-3);
    color: var(--color-text);
}

.rank-percentile {
    color: var(--color-text-light);
}

.rank-dual {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.rank-dual-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.rank-dual-label {
    font-size: 0.8rem;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.rank-bar {
    position: relative;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: visible;
    margin: 0 auto;
    max-width: 400px;
}

.rank-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: var(--color-accent);
    border-radius: 4px;
    transition: width 300ms ease;
}

.rank-gold .rank-bar-fill {
    background: #d4a843;
}

.rank-bar-marker {
    position: absolute;
    top: -4px;
    width: 16px;
    height: 16px;
    background: var(--color-accent);
    border: 2px solid #fff;
    border-radius: 50%;
    transform: translateX(-50%);
    box-shadow: var(--shadow-sm);
}

.rank-gold .rank-bar-marker {
    background: #d4a843;
}

@media (max-width: 600px) {
    .rank-total-value {
        font-size: 2rem;
    }

    .rank-scores {
        gap: var(--space-3);
    }

    .rank-score-value {
        font-size: 1.1rem;
    }

    .rank-comparison {
        font-size: 0.95rem;
    }
}