/* ===== Design Tokens ===== */
#elves-sizing-guide{
    /* Surfaces */
    --color-bg:#ffffff;
    --color-surface-subtle:#fafafa;
    --color-surface-muted:#f5f5f5;
    --color-surface-strong:#f0f0f0;

    /* Text */
    --color-text:#111111;
    --color-text-muted:#555555;
    --color-text-inverse:#ffffff;

    /* Borders */
    --color-border:#e5e5e5;
    --color-border-light:#eeeeee;
    --color-border-strong:#e0e0e0;

    /* Table */
    --color-table-header:#000000;
    --color-table-stripe:#fafafa;

    /* Brand accent */
    --color-accent:#4179E1;
    --color-accent-strong:#2f5cb4;
    --color-accent-soft:#e3f2fd;
    --color-accent-text:#0d47a1;

    /* Status — success */
    --color-ok-bg:#e8f5e9;
    --color-ok-fg:#2e7d32;
    --color-ok-text:#1b5e20;

    /* Status — warning */
    --color-warn-bg:#fff3e0;
    --color-warn-fg:#b34700;

    /* Status — danger */
    --color-danger-bg:#ffebee;
    --color-danger-fg:#c62828;

    /* Status — advisory (frame size adjusted) */
    --color-advisory-bg:#fff8e1;
    --color-advisory-line:#f0a500;
    --color-advisory-fg:#8a5200;

    /* Motion */
    --transition-fast:0.2s ease;
    --transition-med:0.3s ease;

    /* Typography */
    --font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
}

/* ===== Reset & Base ===== */
#elves-sizing-guide,#elves-sizing-guide *{margin:0;padding:0;box-sizing:border-box;font-family:var(--font-family)}
/* keep theme heading styles from leaking in (font, colour, line-height) */
#elves-sizing-guide h1,#elves-sizing-guide h2,#elves-sizing-guide h3,#elves-sizing-guide h4,#elves-sizing-guide h5,#elves-sizing-guide h6{
    color:var(--color-text);
    line-height:1.5;
    font-weight:400;
}
#elves-sizing-guide{
    background:var(--color-bg);
    font-family:var(--font-family);
    color:var(--color-text);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
#elves-sizing-guide .page-wrap{max-width:1600px;margin:0 auto}

/* ===== Guide Intro ===== */
#elves-sizing-guide .guide-intro{
    padding:56px 40px 0;
}
#elves-sizing-guide .intro-head{
    max-width:820px;
    margin:0 auto;
    text-align:center;
}
#elves-sizing-guide .intro-title{
    font-size:clamp(28px,4vw,46px);
    font-weight:400;
    font-style:italic;
    letter-spacing:2px;
    line-height:1.15;
    margin-bottom:20px;
}
#elves-sizing-guide .intro-lead{
    font-size:clamp(15px,1.1vw,16px);
    line-height:1.7;
    color:var(--color-text-muted);
    max-width:620px;
    margin:0 auto;
}
#elves-sizing-guide .intro-lead strong{color:var(--color-text);font-weight:600}

/* Guidance grid — rows are synchronised so the rules in both columns line up.
   The wider left column carries the longer copy, which keeps both rows close in height. */
#elves-sizing-guide .intro-columns{
    max-width:1180px;
    margin:44px auto 0;
    border-top:1px solid var(--color-border);
    border-bottom:1px solid var(--color-border);
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
}
#elves-sizing-guide .intro-block{
    padding:30px 40px 34px 0;
    border-bottom:1px solid var(--color-border);
}
/* right-hand column */
#elves-sizing-guide .intro-block:nth-child(even){
    padding-right:0;
    padding-left:40px;
    border-left:1px solid var(--color-border);
}
/* the closing row needs no rule of its own — the section border closes it */
#elves-sizing-guide .intro-block:nth-last-child(-n+2){border-bottom:none}

#elves-sizing-guide .guide-label{
    display:block;
    font-size:11px;
    font-weight:700;
    letter-spacing:2.5px;
    text-transform:uppercase;
    color:var(--color-text-muted);
    margin-bottom:12px;
}
#elves-sizing-guide .guide-heading{
    font-size:clamp(18px,1.6vw,22px);
    font-weight:700;
    letter-spacing:0.5px;
    margin-bottom:10px;
}
#elves-sizing-guide .intro-block p{
    font-size:15px;
    line-height:1.7;
    color:var(--color-text-muted);
}
#elves-sizing-guide .intro-block p + p{margin-top:10px}
#elves-sizing-guide .intro-block strong{color:var(--color-text);font-weight:600}

/* The measurements checklist sits inside the contact block, under the email */
#elves-sizing-guide .measure-label{
    margin-top:18px;
    margin-bottom:10px;
}

/* ===== A note on responsibility =====
   This block is a liability statement, not guidance, so it is deliberately
   louder than the three blocks around it: advisory-amber panel, warning icon
   and full-strength body copy rather than the muted grey used elsewhere. */
#elves-sizing-guide .responsibility-note{
    padding:22px 24px 24px;
    background:var(--color-advisory-bg);
    border:1px solid var(--color-advisory-line);
    border-left:4px solid var(--color-advisory-line);
    border-radius:8px;
}
#elves-sizing-guide .responsibility-head{
    display:flex;
    align-items:center;
    gap:9px;
    font-size:12px;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--color-advisory-fg);
    margin-bottom:12px;
}
#elves-sizing-guide .responsibility-head svg{flex:none}
#elves-sizing-guide .responsibility-note p{
    font-size:14px;
    line-height:1.7;
    color:var(--color-text);
}
#elves-sizing-guide .responsibility-note strong{font-weight:600}

/* Ape Index pairs — tight inside, real separation from the paragraph above.
   Both the term and its definition run at the same 15px as the surrounding copy,
   so the block sits in the paragraph rhythm instead of looking like a smaller
   inset; the term carries the hierarchy through weight and colour alone. */
#elves-sizing-guide .ape-index{
    margin-top:16px;
    border-top:1px solid var(--color-border-light);
}
#elves-sizing-guide .ape-item{
    padding:11px 0;
    border-bottom:1px solid var(--color-border-light);
}
#elves-sizing-guide .ape-item:last-child{border-bottom:none;padding-bottom:0}
/* two classes deep so it wins over the ".intro-block p + p" spacing rule */
#elves-sizing-guide .ape-index .ape-term{
    font-size:15px;
    font-weight:600;
    line-height:1.7;
    color:var(--color-text);
    margin:0 0 2px;
}
#elves-sizing-guide .ape-index .ape-def{
    font-size:15px;
    line-height:1.7;
    color:var(--color-text-muted);
    margin:0;
}

#elves-sizing-guide .foot-email{margin-top:10px}
#elves-sizing-guide .foot-email a{
    font-size:clamp(17px,1.5vw,20px);
    font-weight:600;
    color:var(--color-text);
    text-decoration:underline;
    text-underline-offset:4px;
    text-decoration-thickness:1px;
}
#elves-sizing-guide .foot-email a:hover{color:var(--color-accent-strong)}
#elves-sizing-guide .measure-list{
    list-style:none;
    display:grid;
    gap:6px;
}
#elves-sizing-guide .measure-list li{
    position:relative;
    padding-left:18px;
    font-size:14px;
    line-height:1.6;
    color:var(--color-text);
}
#elves-sizing-guide .measure-list li::before{
    content:'';
    position:absolute;
    left:0;
    top:0.72em;
    width:9px;
    height:1px;
    background:var(--color-text-muted);
}

/* ===== Back to Top Button ===== */
#elves-sizing-guide .back-to-top{
    position:fixed;
    bottom:32px;
    right:32px;
    width:48px;
    height:48px;
    background:var(--color-text);
    color:var(--color-text-inverse);
    border:none;
    border-radius:50%;
    cursor:pointer;
    opacity:0;
    visibility:hidden;
    transform:translateY(20px);
    transition:opacity var(--transition-med),visibility var(--transition-med),transform var(--transition-med),background var(--transition-fast);
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 4px 16px rgba(0,0,0,0.18);
}
#elves-sizing-guide .back-to-top.visible{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}
#elves-sizing-guide .back-to-top:hover{
    background:#333333;
    transform:translateY(-2px);
}
#elves-sizing-guide .back-to-top:disabled,#elves-sizing-guide .back-to-top[disabled]{
    background:#cccccc;
    cursor:not-allowed;
    transform:none;
    box-shadow:none;
}

/* ===== Bike Block ===== */
#elves-sizing-guide .bike-block{
    display:grid;
    grid-template-columns:minmax(300px,1fr) minmax(400px,1.2fr);
    align-items:start;
    gap:64px;
    padding:64px 40px;
    border-bottom:1px solid var(--color-border-light);
    transition:background var(--transition-fast);
}
#elves-sizing-guide .bike-block:hover{background:var(--color-surface-subtle)}
#elves-sizing-guide .bike-block:last-child{border-bottom:none}

#elves-sizing-guide .bike-pic{
    position:relative;
    border-radius:8px;
    overflow:hidden;
    transition:box-shadow var(--transition-med);
}
#elves-sizing-guide .bike-block:hover .bike-pic{
    box-shadow:0 6px 24px rgba(65,121,225,0.35);
}
/* The shop photos range from square (1.0) to very wide (2.2), and every one of them is
   shot on a white or transparent background. Pinning the frame to the 4:3 shape the
   layout was designed around keeps all ten sections the same height and stops the page
   reflowing as each image arrives. contain — never cover — so no bike is ever cropped,
   and no background of its own, so the letterboxing blends with the page in both the
   resting and hover states. */
#elves-sizing-guide .bike-pic img{
    width:100%;
    height:auto;
    aspect-ratio:4/3;
    object-fit:contain;
    display:block;
    transition:transform 0.4s ease;
    content-visibility:auto;
}
#elves-sizing-guide .bike-block:hover .bike-pic img{transform:scale(1.02)}
#elves-sizing-guide .bike-pic::after{
    content:'';
    position:absolute;
    inset:0;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,0.05);
    border-radius:8px;
    pointer-events:none;
}

/* min-width:0 keeps the grid item from being widened by the widest table inside it,
   so a table can only ever scroll within its own frame — never push the page wide. */
#elves-sizing-guide .size-content{width:100%;min-width:0}

/* ===== Titles ===== */
#elves-sizing-guide .model-main{
    font-size:clamp(24px,3vw,40px);
    font-weight:700;
    text-align:center;
    margin-bottom:4px;
}
#elves-sizing-guide .model-sub{
    font-size:clamp(16px,1.5vw,24px);
    font-weight:400;
    color:var(--color-text-muted);
}
#elves-sizing-guide .size-guide-title{
    font-size:13px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:2px;
    color:var(--color-text-muted);
    text-align:center;
    margin:12px 0 28px;
    padding-bottom:12px;
    border-bottom:1px solid var(--color-border-light);
}

/* ===== Table with Sticky Header ===== */
#elves-sizing-guide .table-scroll{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scrollbar-color:var(--color-border) transparent;
    border-radius:8px;
    background:#fff;
    position:relative;
}
#elves-sizing-guide .table-scroll::-webkit-scrollbar{height:6px}
#elves-sizing-guide .table-scroll::-webkit-scrollbar-track{background:transparent}
#elves-sizing-guide .table-scroll::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}

/* Scroll affordance for the one table that is wider than a phone. It is hidden
   wherever the table fits, so desktop and tablet never see it. */
#elves-sizing-guide .table-swipe-hint{display:none}

#elves-sizing-guide .size-table{
    width:100%;
    min-width:360px;
    border-collapse:separate;
    border-spacing:0;
    font-variant-numeric:tabular-nums;
    caption-side:bottom;
}
#elves-sizing-guide .size-table caption{
    padding:8px 12px;
    font-size:12px;
    color:var(--color-text-muted);
    text-align:left;
    caption-side:bottom;
}
#elves-sizing-guide .size-table thead th{
    background:var(--color-table-header);
    color:#fff;
    font-size:12px;
    font-weight:600;
    padding:16px 12px;
    text-align:center;
    text-transform:uppercase;
    letter-spacing:1px;
    line-height:1.3;
    position:sticky;
    top:0;
    z-index:10;
}
#elves-sizing-guide .size-table thead th:first-child{border-top-left-radius:8px}
#elves-sizing-guide .size-table thead th:last-child{border-top-right-radius:8px}

#elves-sizing-guide .size-table tbody tr{
    transition:background var(--transition-fast);
}
#elves-sizing-guide .size-table tbody tr:hover{
    background:var(--color-table-stripe);
}
#elves-sizing-guide .size-table tbody tr:hover td{
    box-shadow:0 4px 12px var(--color-accent);
}
#elves-sizing-guide .size-table tbody tr:last-child td:first-child{border-bottom-left-radius:8px}
#elves-sizing-guide .size-table tbody tr:last-child td:last-child{border-bottom-right-radius:8px}

#elves-sizing-guide .size-table td{
    font-size:15px;
    padding:14px 12px;
    text-align:center;
    border-bottom:1px solid var(--color-border-light);
}
#elves-sizing-guide .size-table td:first-child{
    font-weight:600;
    color:var(--color-text);
}

/* Focus visible for keyboard navigation (>=3:1 on both light and dark surfaces) */
#elves-sizing-guide :focus-visible,#elves-sizing-guide:focus-visible{
    outline:3px solid var(--color-accent-strong);
    outline-offset:2px;
}
#elves-sizing-guide button:focus:not(:focus-visible){
    outline:none;
}

/* Screen-reader only utility */
#elves-sizing-guide .visually-hidden{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    clip-path:inset(50%);
    white-space:nowrap;
    border:0;
}

/* ===== Note Text ===== */
#elves-sizing-guide .note-text{
    margin-top:16px;
    font-size:13px;
    text-align:center;
    color:var(--color-text-muted);
    line-height:1.5;
    padding:12px 16px;
    background:var(--color-surface-subtle);
    border-radius:6px;
    border-left:3px solid var(--color-text);
}

/* ===== Responsive ===== */
@media(max-width:1024px){
    #elves-sizing-guide .guide-intro{padding:60px 24px 0}
    #elves-sizing-guide .intro-columns{
        grid-template-columns:1fr;
        margin-top:44px;
    }
    #elves-sizing-guide .intro-block{padding:28px 0}
    #elves-sizing-guide .intro-block:nth-child(even){
        padding:28px 0;
        border-left:none;
    }
    #elves-sizing-guide .intro-block:nth-last-child(-n+2){border-bottom:1px solid var(--color-border)}
    #elves-sizing-guide .intro-block:last-child{border-bottom:none}
    #elves-sizing-guide .bike-block{
        grid-template-columns:1fr;
        gap:32px;
        padding:48px 24px;
    }
    #elves-sizing-guide .bike-pic{max-width:500px;margin:0 auto}
    #elves-sizing-guide .model-main{text-align:center}
    #elves-sizing-guide .size-guide-title{text-align:center}
    #elves-sizing-guide .back-to-top{bottom:20px;right:20px}
}

@media(max-width:640px){
    #elves-sizing-guide .page-wrap{padding:0}
    #elves-sizing-guide .guide-intro{padding:40px 20px 0}
    #elves-sizing-guide .intro-title{font-size:26px;letter-spacing:1px;margin-bottom:16px}
    #elves-sizing-guide .intro-lead{font-size:15px;text-align:left}
    #elves-sizing-guide .intro-columns{margin-top:36px}
    #elves-sizing-guide .intro-block{padding:22px 0}
    #elves-sizing-guide .intro-block:nth-child(even){padding:22px 0}
    #elves-sizing-guide .guide-label{margin-bottom:10px}
    #elves-sizing-guide .measure-label{margin-top:16px}
    #elves-sizing-guide .responsibility-note{padding:18px 18px 20px}
    #elves-sizing-guide .responsibility-head{letter-spacing:1px;margin-bottom:10px}
    #elves-sizing-guide .bike-block{gap:24px;padding:36px 20px}
    #elves-sizing-guide .bike-pic{border-radius:6px}
    #elves-sizing-guide .model-main{font-size:24px}
    #elves-sizing-guide .model-sub{font-size:16px}
    #elves-sizing-guide .size-guide-title{font-size:11px;margin:8px 0 20px}

    /* ==== Size tables on a phone ====
       The desktop 360px minimum was wider than the column on every phone narrower
       than ~410px (375px screen = 335px of content), so the table was clipped at the
       right edge and read as off-centre. Letting the table size to the column makes
       the left and right margins match, and the frame below keeps any genuinely
       scrollable table looking deliberate rather than cut off. */
    #elves-sizing-guide .table-scroll{
        border:1px solid var(--color-border);
        border-radius:10px;
    }
    #elves-sizing-guide .size-table{min-width:0}
    #elves-sizing-guide .size-table thead th{padding:12px 6px;font-size:clamp(10px,2.9vw,11px);letter-spacing:0.5px;line-height:1.35}
    #elves-sizing-guide .size-table td{padding:13px 6px;font-size:clamp(12.5px,3.5vw,13px)}
    #elves-sizing-guide .size-table thead th:first-child{border-top-left-radius:9px}
    #elves-sizing-guide .size-table thead th:last-child{border-top-right-radius:9px}
    #elves-sizing-guide .size-table caption{padding:10px 12px 4px;font-size:11.5px;line-height:1.5}

    /* FALATH EXP carries a saddle column pair, so it works to a tighter type scale
       rather than a horizontal scroll. Five columns do fit a phone once the tracking
       and side padding come down — and it means all ten tables now read the same way:
       every column visible, inset evenly on both sides. */
    #elves-sizing-guide .size-table--wide thead th{padding:11px 4px;font-size:clamp(9.5px,2.7vw,10.5px);letter-spacing:0;line-height:1.3}
    #elves-sizing-guide .size-table--wide td{padding:12px 4px;font-size:clamp(11px,3.1vw,12px)}

    /* Insurance for the narrowest phones: if the table does have to scroll, the frame
       size stays pinned so the row you are reading is still identifiable. */
    #elves-sizing-guide .table-scroll--wide .size-table thead th:first-child{
        position:sticky;
        left:0;
        z-index:11;
        background:var(--color-table-header);
    }
    #elves-sizing-guide .table-scroll--wide .size-table td:first-child{
        position:sticky;
        left:0;
        z-index:2;
        background:var(--color-bg);
    }
    #elves-sizing-guide .table-scroll--wide .size-table tbody tr:hover td:first-child{background:var(--color-table-stripe)}

    #elves-sizing-guide .note-text{font-size:12px;padding:10px 12px}
    #elves-sizing-guide .back-to-top{width:44px;height:44px;bottom:20px;right:20px}
}

/* 320-340px class phones are the only ones where a five-column table still needs to
   scroll (measured: it needs 246px and has 240px at 320px), so the prompt appears
   exactly there and nowhere else. */
@media(max-width:340px){
    #elves-sizing-guide .table-swipe-hint{
        display:block;
        margin-top:10px;
        font-size:12px;
        line-height:1.5;
        color:var(--color-text-muted);
        text-align:center;
    }
}

/* ===== Reduced Motion ===== */
@media(prefers-reduced-motion:reduce){
    #elves-sizing-guide,#elves-sizing-guide *,#elves-sizing-guide *::before,#elves-sizing-guide *::after{
        animation-duration:0.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:0.01ms !important;
        scroll-behavior:auto !important;
    }
    #elves-sizing-guide .bike-block:hover .bike-pic img{transform:none}
    #elves-sizing-guide .bike-pic img{content-visibility:visible}
}

/* ===== Print Styles ===== */
@media print{
    #elves-sizing-guide .guide-intro{padding:0 0 20px}
    #elves-sizing-guide .intro-columns{margin-top:24px}
    #elves-sizing-guide .intro-block{padding:14px 22px 16px 0}
    #elves-sizing-guide .intro-block:nth-child(even){padding:14px 0 16px 22px}
    #elves-sizing-guide .measure-guide{gap:12px;margin-bottom:18px}
    #elves-sizing-guide .measure-guide figcaption{font-size:10px}
    #elves-sizing-guide .bike-block{
        grid-template-columns:1fr;
        gap:20px;
        padding:20px;
        break-inside:avoid;
        page-break-inside:avoid;
    }
    #elves-sizing-guide .bike-pic{display:none}
    #elves-sizing-guide .back-to-top,#elves-sizing-guide .unit-toggle{display:none}
    #elves-sizing-guide .sizing-tool{padding:20px;background:none;border:none}
    #elves-sizing-guide .tool-form{display:none}
    #elves-sizing-guide .table-scroll{border:none;overflow:visible}
    #elves-sizing-guide .size-table{min-width:0}
    #elves-sizing-guide .table-swipe-hint{display:none}
    #elves-sizing-guide .size-table thead th{background:#333333 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
    #elves-sizing-guide .size-table tbody tr:hover{background:none}
    #elves-sizing-guide .size-table tbody tr:hover td{box-shadow:none}
    #elves-sizing-guide .bike-block:hover{background:none}
    #elves-sizing-guide .note-text{background:var(--color-surface-strong);-webkit-print-color-adjust:exact;print-color-adjust:exact}
    #elves-sizing-guide{font-size:12px}
    #elves-sizing-guide .model-main{font-size:18px}
    #elves-sizing-guide .size-table{font-size:11px}
    #elves-sizing-guide .size-table th,#elves-sizing-guide .size-table td{padding:8px 6px}
    #elves-sizing-guide .step-down-note,#elves-sizing-guide .bar-block,#elves-sizing-guide .result-card,#elves-sizing-guide .responsibility-note,#elves-sizing-guide .disclaimer{-webkit-print-color-adjust:exact;print-color-adjust:exact}
    #elves-sizing-guide .responsibility-note{padding:12px 14px 14px;border-left-width:3px}
    #elves-sizing-guide .responsibility-note p{font-size:11px}
}

/* ===== Sizing Recommendation Tool ===== */
#elves-sizing-guide .sizing-tool{
    max-width:960px;
    margin:56px auto 40px;
    padding:44px 40px;
    background:var(--color-surface-subtle);
    border-radius:12px;
    border:1px solid var(--color-border-light);
}
#elves-sizing-guide .sizing-tool-title{
    font-size:clamp(22px,2.8vw,32px);
    font-weight:700;
    text-align:center;
    margin-bottom:8px;
    letter-spacing:1px;
}
#elves-sizing-guide .sizing-tool-desc{
    font-size:14px;
    color:var(--color-text-muted);
    text-align:center;
    margin-bottom:36px;
    line-height:1.6;
    max-width:600px;
    margin-left:auto;
    margin-right:auto;
}
#elves-sizing-guide .tool-form{display:grid;gap:36px}

/* Grouped fields — group label left, units control right */
#elves-sizing-guide .form-set{display:grid;gap:20px}
#elves-sizing-guide .set-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    padding-bottom:14px;
    border-bottom:1px solid var(--color-border);
}
#elves-sizing-guide .set-label{
    font-size:11px;
    font-weight:700;
    letter-spacing:2.5px;
    text-transform:uppercase;
    color:var(--color-text-muted);
}

/* Measurement reference figure — how to take the four readings the form asks for */
#elves-sizing-guide .measure-guide{
    display:grid;
    gap:20px;
    margin:0 0 36px;
}
#elves-sizing-guide .measure-guide img{
    display:block;
    width:100%;
    height:auto;
    border-radius:8px;
    background:var(--color-bg);
}
#elves-sizing-guide .measure-guide figcaption{
    max-width:680px;
    font-size:12px;
    line-height:1.65;
    color:var(--color-text-muted);
}
#elves-sizing-guide .measure-guide figcaption strong{color:var(--color-text);font-weight:600}

#elves-sizing-guide .form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
#elves-sizing-guide .form-group{display:grid;align-content:start}
#elves-sizing-guide .form-group label{
    display:block;
    font-size:13px;
    font-weight:600;
    color:var(--color-text);
    margin-bottom:8px;
    letter-spacing:0.5px;
}
#elves-sizing-guide .form-group .hint{
    display:block;
    font-size:12px;
    font-weight:400;
    color:var(--color-text-muted);
    margin-top:7px;
    line-height:1.5;
    letter-spacing:0;
}

/* In-field unit suffix */
#elves-sizing-guide .input-wrap{position:relative}
#elves-sizing-guide .input-wrap input{padding-right:56px}
#elves-sizing-guide .input-unit{
    position:absolute;
    right:16px;
    top:50%;
    transform:translateY(-50%);
    font-size:13px;
    font-weight:600;
    color:var(--color-text-muted);
    pointer-events:none;
}

/* Feet / inches pair */
#elves-sizing-guide .ftin-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* Unit visibility — only one input block shows at a time */
#elves-sizing-guide .unit-cm,#elves-sizing-guide .unit-in{display:none}
#elves-sizing-guide .tool-form.unit-is-cm .unit-cm{display:block}
#elves-sizing-guide .tool-form.unit-is-in .unit-in{display:block}

/* Field-level validation — the tint carries the state, so a rejected field goes pale red
   rather than only swapping its border colour. */
#elves-sizing-guide .form-group input.has-error,#elves-sizing-guide .form-group select.has-error{
    background-color:var(--color-danger-bg);
    border-color:var(--color-danger-fg);
    box-shadow:0 0 0 3px rgba(198,40,40,0.16);
}
#elves-sizing-guide .field-error{
    display:block;
    margin-top:8px;
    font-size:12px;
    font-weight:600;
    line-height:1.5;
    color:var(--color-danger-fg);
}
#elves-sizing-guide .field-error[hidden]{display:none}

/* Actions */
#elves-sizing-guide .form-actions{display:grid;justify-items:center;gap:12px}
#elves-sizing-guide .form-note{
    order:-1;
    font-size:13px;
    color:var(--color-text-muted);
    text-align:center;
}
#elves-sizing-guide .btn-clear{
    min-height:44px;
    padding:8px 14px;
    background:none;
    border:none;
    font-family:var(--font-family);
    font-size:13px;
    font-weight:600;
    letter-spacing:0.5px;
    color:var(--color-text-muted);
    text-decoration:underline;
    text-underline-offset:4px;
    cursor:pointer;
    transition:color var(--transition-fast);
}
#elves-sizing-guide .btn-clear:hover{color:var(--color-text)}
#elves-sizing-guide .form-group input,#elves-sizing-guide .form-group select{
    width:100%;
    min-height:48px;
    padding:14px 16px;
    /* Tinted fill so a field reads as the one thing on the page you type into, and so it
       separates from the #fafafa tool panel behind it — a white field on a near-white
       panel had almost no edge. Deeper than --color-accent-soft (which stays reserved for
       the informational callouts), because as a fill it has to hold its own: a pale tint
       only measures ~1.1:1 against the panel, this reads as a definite box, and the inset
       shadow gives it the depth of a well rather than a flat rectangle. */
    background-color:#d6e9fd;
    border:1.5px solid #9dc0ef;
    box-shadow:inset 0 1px 2px rgba(20,60,120,0.06);
    border-radius:8px;
    font-size:15px;
    font-family:var(--font-family);
    color:var(--color-text);
    transition:background-color var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast);
    -webkit-appearance:none;
    appearance:none;
}
/* the browser default placeholder is too faint to read on the tint */
#elves-sizing-guide .form-group input::placeholder{
    color:var(--color-text-muted);
    opacity:1;
}
#elves-sizing-guide .form-group select{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23555' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 16px center;
    padding-right:40px;
}
/* The field you are actually in clears to white, so the active one is the brightest
   thing on the panel and typing sits on the highest contrast available. */
#elves-sizing-guide .form-group input:focus,#elves-sizing-guide .form-group select:focus{
    background-color:var(--color-bg);
    border-color:var(--color-accent);
    box-shadow:0 0 0 4px rgba(65,121,225,0.28);
}
#elves-sizing-guide .btn-recommend{
    min-height:48px;
    padding:16px 40px;
    background:var(--color-text);
    color:var(--color-text-inverse);
    border:none;
    border-radius:8px;
    font-size:15px;
    font-weight:600;
    letter-spacing:1px;
    text-transform:uppercase;
    cursor:pointer;
    transition:background var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);
    justify-self:center;
}
#elves-sizing-guide .btn-recommend:hover{
    background:#333;
    transform:translateY(-1px);
    box-shadow:0 4px 16px rgba(0,0,0,0.2);
}
#elves-sizing-guide .btn-recommend:active{transform:translateY(0)}
#elves-sizing-guide .result-card{
    margin-top:28px;
    padding:28px;
    scroll-margin-top:24px;
    background:var(--color-bg);
    border-radius:10px;
    border:1.5px solid var(--color-border);
    display:none;
}
#elves-sizing-guide .result-card.show{display:block;animation:elvesGuide_fadeIn 0.3s ease}
@keyframes elvesGuide_fadeIn{
    from{opacity:0;transform:translateY(8px)}
    to{opacity:1;transform:translateY(0)}
}
#elves-sizing-guide .result-card h3{
    font-size:16px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
    color:var(--color-text-muted);
    margin-bottom:20px;
    padding-bottom:12px;
    border-bottom:1px solid var(--color-border-light);
}
#elves-sizing-guide .result-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin-bottom:20px;
}
#elves-sizing-guide .result-item{
    padding:20px;
    background:var(--color-surface-subtle);
    border-radius:8px;
    text-align:center;
    border:1px solid var(--color-border-light);
}
#elves-sizing-guide .result-item .label{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:1.5px;
    color:var(--color-text-muted);
    margin-bottom:8px;
}
#elves-sizing-guide .result-item .value{
    font-size:28px;
    font-weight:700;
    color:var(--color-text);
    overflow-wrap:anywhere;
}
#elves-sizing-guide .result-details{
    font-size:14px;
    color:var(--color-text-muted);
    line-height:1.8;
}
#elves-sizing-guide .result-details strong{color:var(--color-text);font-weight:600}
#elves-sizing-guide .ape-advice{
    margin-top:8px;
    padding:2px 0 2px 14px;
    border-left:2px solid var(--color-border);
    color:var(--color-text);
}

/* Handlebar option blocks — grouped by a left rule instead of nested cards */
#elves-sizing-guide .bar-block{
    margin:14px 0;
    padding:16px 18px;
    background:var(--color-surface-subtle);
    border-radius:8px;
    border-left:3px solid var(--color-border-strong);
}
#elves-sizing-guide .bar-block-alt{
    background:transparent;
    border-left-style:dashed;
}
#elves-sizing-guide .bar-name{
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
    color:var(--color-text);
    margin-bottom:8px;
}
#elves-sizing-guide .bar-tag{
    display:inline-block;
    padding:2px 8px;
    border-radius:4px;
    font-size:11px;
    font-weight:700;
    letter-spacing:0.5px;
    background:var(--color-accent-strong);
    color:var(--color-text-inverse);
    vertical-align:middle;
}
#elves-sizing-guide .bar-tag-alt{
    background:var(--color-border-strong);
    color:var(--color-text-muted);
}
#elves-sizing-guide .bar-sub{
    font-size:12px;
    font-style:italic;
    color:var(--color-text-muted);
    margin:-4px 0 8px;
}
#elves-sizing-guide .bar-comfort,#elves-sizing-guide .bar-tip,#elves-sizing-guide .bar-alert{
    margin-top:10px;
    padding:10px 12px;
    font-size:13px;
    line-height:1.5;
    border-radius:6px;
}
#elves-sizing-guide .bar-comfort{
    color:var(--color-ok-text);
    background:var(--color-ok-bg);
    border-left:3px solid var(--color-ok-fg);
}
#elves-sizing-guide .bar-tip{
    color:var(--color-accent-text);
    background:var(--color-accent-soft);
    border-left:3px solid var(--color-accent);
}
#elves-sizing-guide .result-badge{
    display:inline-block;
    padding:2px 10px;
    border-radius:4px;
    font-size:12px;
    font-weight:600;
    margin-left:8px;
}
#elves-sizing-guide .badge-ok{background:var(--color-ok-bg);color:var(--color-ok-fg)}
#elves-sizing-guide .badge-warn{background:var(--color-warn-bg);color:var(--color-warn-fg)}
#elves-sizing-guide .badge-no{background:var(--color-danger-bg);color:var(--color-danger-fg)}
#elves-sizing-guide .badge-neutral{background:var(--color-surface-muted);color:var(--color-text-muted)}
#elves-sizing-guide .result-note{
    margin-top:16px;
    padding:14px 16px;
    font-size:13px;
    color:var(--color-text-muted);
    line-height:1.5;
    background:var(--color-surface-subtle);
    border-radius:6px;
    border-left:3px solid var(--color-accent);
}

/* ===== Recommendation Disclaimer — styled as a caution notice ===== */
#elves-sizing-guide .disclaimer{
    margin-top:24px;
    padding:20px 22px;
    background:var(--color-advisory-bg);
    border:1px solid var(--color-advisory-line);
    border-left:4px solid var(--color-advisory-line);
    border-radius:8px;
}
#elves-sizing-guide .disclaimer-head{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--color-advisory-fg);
    margin-bottom:14px;
}
#elves-sizing-guide .disclaimer-head svg{flex:none}
#elves-sizing-guide .disclaimer p{
    font-size:13px;
    line-height:1.7;
    color:var(--color-text-muted);
    margin-bottom:10px;
}
#elves-sizing-guide .disclaimer p:last-child{margin-bottom:0}
#elves-sizing-guide .disclaimer strong{color:var(--color-text);font-weight:600}
#elves-sizing-guide .disclaimer ul{
    margin:0 0 12px;
    padding-left:20px;
    list-style:disc;
    font-size:13px;
    line-height:1.7;
    color:var(--color-text-muted);
}
#elves-sizing-guide .disclaimer ul:last-child{margin-bottom:0}
#elves-sizing-guide .disclaimer li{margin-bottom:8px}
#elves-sizing-guide .disclaimer li:last-child{margin-bottom:0}
#elves-sizing-guide .disclaimer-statement{
    margin-top:14px;
    padding-top:12px;
    border-top:1px dashed var(--color-advisory-line);
    font-size:13px;
    line-height:1.7;
    color:var(--color-text);
}
#elves-sizing-guide .step-down-note{
    margin-bottom:20px;
    padding:18px 20px;
    font-size:14px;
    line-height:1.7;
    color:var(--color-text);
    background:var(--color-advisory-bg);
    border-radius:8px;
    border-left:4px solid var(--color-advisory-line);
}
#elves-sizing-guide .step-down-title{
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
    color:var(--color-advisory-fg);
    margin-bottom:8px;
}
#elves-sizing-guide .step-down-comp{
    margin-top:8px;
    padding-top:8px;
    border-top:1px dashed var(--color-advisory-line);
    color:var(--color-text-muted);
}
#elves-sizing-guide .arm-up-note{
    background:var(--color-ok-bg);
    border-left-color:var(--color-ok-fg);
}
#elves-sizing-guide .arm-up-note .step-down-title{color:var(--color-ok-text)}
#elves-sizing-guide .arm-up-note .step-down-comp{border-top-color:var(--color-ok-fg)}
#elves-sizing-guide .note-danger{
    background:var(--color-danger-bg);
    border-left-color:var(--color-danger-fg);
}
#elves-sizing-guide .note-danger .step-down-title{color:var(--color-danger-fg)}
#elves-sizing-guide .unit-toggle{
    display:inline-flex;
    gap:0;
    border-radius:8px;
    overflow:hidden;
    /* matches the field fill so the switch reads as part of the same control family */
    border:1.5px solid #9dc0ef;
    background-color:#d6e9fd;
}
#elves-sizing-guide .unit-toggle button{
    min-height:44px;
    padding:11px 22px;
    border:none;
    background:transparent;
    color:var(--color-text-muted);
    font-size:13px;
    font-weight:600;
    font-family:var(--font-family);
    cursor:pointer;
    transition:background var(--transition-fast),color var(--transition-fast);
    letter-spacing:0.5px;
}
#elves-sizing-guide .unit-toggle button[aria-pressed="true"]{
    background:var(--color-text);
    color:var(--color-text-inverse);
}
#elves-sizing-guide .unit-toggle button:hover:not([aria-pressed="true"]){
    background-color:rgba(65,121,225,0.12);
}
@media(max-width:640px){
    #elves-sizing-guide .sizing-tool{padding:28px 20px;margin:40px auto 28px}
    #elves-sizing-guide .tool-form{gap:28px}
    #elves-sizing-guide .form-row{grid-template-columns:1fr;gap:18px}
    #elves-sizing-guide .set-head{gap:12px}
    #elves-sizing-guide .result-grid{grid-template-columns:1fr}
    #elves-sizing-guide .result-item .value{font-size:24px}
    #elves-sizing-guide .unit-toggle{width:100%}
    #elves-sizing-guide .unit-toggle button{flex:1;padding:11px 10px;font-size:12px}
    #elves-sizing-guide .result-card{padding:20px}
    #elves-sizing-guide .disclaimer{padding:16px 16px;border-left-width:3px}
    #elves-sizing-guide .disclaimer ul{padding-left:18px}
}