html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    min-width: 360px;
    height: 100%;
}

@media (min-width: 768px) {
    .calc-tools-column {
        position: sticky;
        top: 0;
        align-self: flex-start;
        max-height: 100%;
    }
}

.account-page {
    min-height: calc(100vh - 12rem);
}

.account-card {
    max-width: 32rem;
    padding: 2rem;
    border: 1px solid #dce5ef;
    border-radius: .75rem;
    background: #fff;
}

.mobile-calc-nav {
    display: none;
}

.right-triangle-inputs fieldset,
.oblique-triangle-inputs fieldset {
    background: var(--bs-tertiary-bg);
}

.circle-inputs fieldset {
    background: var(--bs-tertiary-bg);
}

.right-triangle-inputs .form-select,
.oblique-triangle-inputs .form-select {
    flex: 0 0 9.5rem;
}

.right-triangle-results th,
.oblique-triangle-results th {
    vertical-align: middle;
}

.right-triangle-results .badge,
.oblique-triangle-results .badge {
    float: right;
    font-size: 0.65rem;
    font-weight: 500;
}

.right-triangle-diagram,
.oblique-triangle-diagram {
    min-height: 340px;
    overflow: hidden;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
}

@media (max-width: 991.98px) {
    .right-triangle-diagram,
    .oblique-triangle-diagram {
        min-height: 260px;
    }
}

@media (max-width: 420px) {
    .right-triangle-inputs .form-select,
    .oblique-triangle-inputs .form-select {
        flex-basis: 8.25rem;
    }
}

.calculator-walkthrough {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1080;
    width: min(24rem, calc(100vw - 2rem));
}


.walkthrough-highlight {
    position: relative;
    z-index: 1070;
    outline: .25rem solid rgba(var(--bs-warning-rgb), .75) !important;
    outline-offset: .2rem;
}

.tape-scroll {
    height: 15rem;
    overflow-y: auto;
}

.tape-expression {
    color: var(--bs-secondary-color);
}

.tape-result {
    color: var(--bs-primary);
    font-size: 1.05em;
}

.tape-entry-pinned {
    border-left: .25rem solid var(--bs-warning);
}

.tape-type {
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    font-size: .65rem;
}

.tape-actions .btn {
    min-height: 1.9rem;
    padding: .1rem .4rem;
    font-size: .72rem;
}

/* Prevents iOS Safari auto-zoom on focus (triggers when font-size < 16px) */
@media (max-width: 767px) {
    input, textarea, select {
        font-size: 1rem !important;
    }
}

/* Fixed viewport layout — ONLY applied on the calculator page */
/* svh = small viewport height: excludes collapsible address bar on iOS/Android */
.calc-page-body {
    height: calc(100svh - 46px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* All other pages scroll normally */
.page-body {
    overflow-y: auto;
    padding: 1rem 0;
}

/* Geometry toolbar stays fixed height */
.calc-toolbar {
    flex: 0 0 auto;
}

/* Each toolbar dropdown wrapper sets z-index:1050 inline, creating its own
   stacking context. Later siblings (Area, Convert) would otherwise paint over
   an earlier open menu (Shapes), obstructing its items. Promote whichever
   wrapper currently holds an open menu so it stacks above the others. */
.calc-toolbar .d-flex > div:has(> .dropdown-menu.show) {
    z-index: 1060 !important;
}

/* The three-column row fills all remaining space */
.calc-columns {
    flex: 1 1 0;
    min-height: 0;       /* critical: allows flex children to shrink */
    overflow: hidden;
}

/* Each column scrolls independently */
.calc-col-scroll {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.settings-panel {
    max-width: 64rem;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.settings-group {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

.settings-group legend {
    float: none;
    width: auto;
    margin: 0 0 .75rem;
    padding: 0 .25rem;
    font-size: 1rem;
    font-weight: 600;
}

.settings-preview {
    padding: .75rem 1rem;
    border-left: .25rem solid var(--brand);
    border-radius: var(--bs-border-radius);
    background: var(--brand-light);
}

@media (max-width: 991px) {
    .settings-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Brand color ─────────────────────────────────────────────────────────────
   One place to change the accent across the entire app.
   Blueprint steel blue — professional, engineering-grade, not generic Bootstrap.
   ────────────────────────────────────────────────────────────────────────── */
:root {
    --brand:        #2c6e9e;   /* primary accent                  */
    --brand-dark:   #1f5278;   /* hover / active state            */
    --brand-light:  #d6e8f5;   /* tinted backgrounds, focus ring  */
    --brand-rgb:    44, 110, 158;
}

/* Bootstrap CSS-variable overrides — hits text-primary, border-primary, etc. */
:root {
    --bs-primary:        var(--brand);
    --bs-primary-rgb:    var(--brand-rgb);
    --bs-link-color:     var(--brand);
    --bs-link-hover-color: var(--brand-dark);
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: var(--brand);
}

a:hover, .btn-link:hover {
    color: var(--brand-dark);
}

/* btn-primary */
.btn-primary {
    color: #fff;
    background-color: var(--brand);
    border-color: var(--brand);
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary.active {
    color: #fff;
    background-color: var(--brand-dark);
    border-color: var(--brand-dark);
}

/* btn-outline-primary */
.btn-outline-primary {
    color: var(--brand);
    border-color: var(--brand);
}

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active {
    color: #fff;
    background-color: var(--brand);
    border-color: var(--brand);
}

/* Focus ring — consistent across buttons and inputs */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem var(--brand-light);
}

/* Navbar brand */
.navbar-brand {
    color: var(--brand) !important;
}

/* Landing page dark-accent border — stays dark, not brand blue */
.home-cat-card {
    border-top-color: var(--brand) !important;
}

.home-callout {
    border-left-color: var(--brand) !important;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

#solver-report-print {
    visibility: hidden;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    pointer-events: none;
}

/* Virtual tape */
.tape-entry:last-child {
    border-bottom: none !important;
}
.tape-entry:nth-child(even) {
    background-color: #f8f9fa;
}

/* ── Print: hide everything except the beam/column/stair report ── */
@media print {
    /* Use visibility so deeply-nested report containers can override their ancestors */
    body * { visibility: hidden; }
    #beam-report-print,
    #beam-report-print * { visibility: visible; }
    #column-report-print,
    #column-report-print * { visibility: visible; }
    #stair-report-print,
    #stair-report-print * { visibility: visible; }
    #traverse-report-print,
    #traverse-report-print * { visibility: visible; }
    #plate-report-print,
    #plate-report-print * { visibility: visible; }
    #survey-report-print,
    #survey-report-print * { visibility: visible; }
    #solver-report-print,
    #solver-report-print * { visibility: visible; }

    /* Break layout containers so position:absolute resolves to the page */
    .calc-page-body,
    .calc-columns,
    .calc-col-scroll {
        overflow: visible !important;
        height: auto !important;
        display: block !important;
        position: static !important;
    }

    /* Pull the report to the top-left corner of the page */
    #beam-report-print {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }
    #column-report-print {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }
    #stair-report-print {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }
    #traverse-report-print {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }
    #plate-report-print {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }
    #survey-report-print {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }
    #solver-report-print {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }

    /* Page margins and base font */
    @page { margin: 15mm 12mm; }
    body  { font-size: 11pt; color: #000; }

    /* Keep SVG diagrams on the same page if possible */
    .beam-report-diagram  { page-break-inside: avoid; }
    .stair-report-diagram { page-break-inside: avoid; }
    .solver-report-diagram { page-break-inside: avoid; }

    /* Hide the print button and collapse toggle inside the report */
    .beam-report-no-print   { visibility: hidden !important; display: none !important; }
    .stair-report-no-print  { visibility: hidden !important; display: none !important; }
    .traverse-report-no-print { visibility: hidden !important; display: none !important; }
    .plate-report-no-print   { visibility: hidden !important; display: none !important; }
    .survey-report-no-print  { visibility: hidden !important; display: none !important; }
    .solver-report-no-print  { visibility: hidden !important; display: none !important; }
}

/* ── Calc keypad — 4-group color system ──────────────────────────────────────
   Group 1: keypad-digit  — neutral entry keys       (0-9, decimal)
   Group 2: keypad-op     — operator keys             (÷ × − + solid brand)
   Group 3: keypad-eq     — equals key                (brand, slightly deeper)
   Group 4: keypad-conv   — unit conversion keys      (teal-shifted brand)
            keypad-trig   — trig function keys        (muted violet)
            keypad-math   — math constants             (outline brand)
            keypad-unit   — suffix/label keys          (lightest grey outline)
            keypad-mem    — memory keys                (outline secondary)
            keypad-angle-active — active angle suffix  (warm amber)
   ────────────────────────────────────────────────────────────────────────── */

/* Base size for all keypad buttons */
.calc-keypad .btn {
    font-size: 0.82rem;
    line-height: 1.35;
}

/* Group 1 — digits: larger, clear contrast */
.keypad-digit {
    font-size: 1rem;
    padding: 0.35rem 0.2rem;
    background-color: #f0f4f8;
    border: 1px solid #c8d3de;
    color: #1a2a38;
}
.keypad-digit:hover {
    background-color: #dce8f2;
    border-color: var(--brand);
    color: var(--brand-dark);
}

/* Group 2 — operators: solid brand fill, larger */
.keypad-op {
    font-size: 1.1rem;
    padding: 0.35rem 0.2rem;
    background-color: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.keypad-op:hover {
    background-color: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
}

/* Group 3 — equals: deeper brand, larger */
.keypad-eq {
    font-size: 1.1rem;
    padding: 0.35rem 0.2rem;
    background-color: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
}
.keypad-eq:hover {
    background-color: #163d5c;
    border-color: #163d5c;
    color: #fff;
}

/* Group 4a — conversions: teal-shifted, outline */
.keypad-conv {
    color: #0c7a6e;
    border-color: #0c7a6e;
    background: transparent;
}
.keypad-conv:hover {
    background-color: #0c7a6e;
    border-color: #0c7a6e;
    color: #fff;
}

/* Group 4b — trig: muted violet, outline */
.keypad-trig {
    color: #6432c0;
    border-color: #6432c0;
    background: transparent;
}
.keypad-trig:hover {
    background-color: #6432c0;
    border-color: #6432c0;
    color: #fff;
}

/* Group 4c — math constants: brand outline, subtle */
.keypad-math {
    color: var(--brand);
    border-color: var(--brand);
    background: transparent;
}
.keypad-math:hover {
    background-color: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

/* Group 4d — unit suffix / label keys: very light, recessive */
.keypad-unit {
    color: #495057;
    border-color: #ced4da;
    background: #fff;
}
.keypad-unit:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
    color: #212529;
}

/* Group 4e — memory keys */
.keypad-mem {
    color: #5a6a7a;
    border-color: #adb5bd;
    background: transparent;
    font-size: 0.8rem;
}
.keypad-mem:hover {
    background-color: #e9ecef;
    border-color: #6c757d;
    color: #212529;
}

/* Active angle-mode suffix highlight */
.keypad-angle-active {
    color: #92400e;
    border-color: #d97706;
    background-color: #fef3c7;
}
.keypad-angle-active:hover {
    background-color: #fde68a;
    border-color: #b45309;
    color: #78350f;
}

/* ── Home / landing page ─────────────────────────────────────────────────── */
.home-hero {
    border-bottom: 1px solid #dee2e6;
}

.home-cat-card {
    border: 1px solid #dee2e6;
    border-top: 3px solid #212529;
    border-radius: 4px;
    transition: box-shadow 0.15s ease;
}

.home-cat-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.10) !important;
}

.home-cat-header {
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
}

.home-cat-icon {
    display: inline-flex;
    align-items: center;
    color: #495057;
}

.home-tool-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.875rem;
}

.home-tool-list li {
    padding: 0.3rem 0;
    border-bottom: 1px solid #f1f3f5;
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}

.home-tool-list li:last-child {
    border-bottom: none;
}

.home-tool-icon {
    flex-shrink: 0;
    width: 1.25rem;
    text-align: center;
    color: #6c757d;
}

.home-cat-note {
    font-size: 0.78rem;
    color: #6c757d;
    border-top: 1px solid #f1f3f5;
    padding-top: 0.5rem;
}

.home-cat-footer {
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
    padding: 0.5rem 1rem;
}

.home-open-link {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--brand);
    text-decoration: none;
}

.home-open-link:hover {
    text-decoration: underline;
    color: var(--brand-dark);
}

.home-callout {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-left: 4px solid #212529;
    border-radius: 4px;
    padding: 1.25rem 1.5rem;
}

.home-callout-icon {
    font-size: 1.75rem;
    line-height: 1;
}

/* ── Shapes page ─────────────────────────────────────────────────────────── */
.shapes-page {
    padding-top: 0.75rem;
}

.shapes-card-header {
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.4rem 0.75rem;
}

.shapes-match-list {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background: #fff;
}

.shapes-match-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.25rem 0.6rem;
    font-size: 0.8rem;
    font-family: monospace;
    background: transparent;
    border: none;
    border-bottom: 1px solid #f1f3f5;
    cursor: pointer;
    color: #212529;
}

.shapes-match-item:last-child {
    border-bottom: none;
}

.shapes-match-item:hover {
    background: var(--brand-light);
    color: var(--brand-dark);
}

.shapes-match-item.active {
    background: var(--brand);
    color: #fff;
}

.shapes-prop-table td,
.shapes-prop-table th {
    font-size: 0.78rem;
    padding: 0.25rem 0.5rem;
}

.shapes-weight-result {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background: #f8f9fa;
    margin-top: 0.5rem;
}

.shapes-weight-value {
    font-size: 1.3rem;
    font-weight: 700;
    font-family: monospace;
    color: var(--brand-dark);
    line-height: 1.2;
}

.shapes-weight-unit {
    font-size: 0.72rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Phase D — Mobile responsive layout (Option A: stack + scroll) ──────────
   At < 768px the three-column desktop layout stacks vertically and scrolls.
   Toolbar scrolls horizontally. Keypad buttons get 44px touch targets.
   Desktop (≥ 768px) is completely unaffected — all rules below are mobile-only.
   ─────────────────────────────────────────────────────────────────────────── */
.mobile-calculator-fab,
.mobile-calculator-backdrop,
.mobile-calculator-sheet {
    display: none;
}

@media (max-width: 767px) {

    /* 1. Unlock the fixed-height scroll lock so columns can stack and scroll */
    .calc-page-body {
        height: auto;
        overflow: visible;
    }

    .calc-columns {
        overflow: visible;
        height: auto;
    }

    .calc-col-scroll {
        height: auto;
        overflow: visible;
    }

    .mobile-calc-nav {
        position: sticky;
        top: 0;
        z-index: 1030;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: .25rem;
        padding: .35rem 0;
        margin-bottom: .35rem;
        background: var(--bs-body-bg);
    }

    .mobile-calc-nav .btn {
        min-height: 44px;
    }

    .mobile-section-inactive {
        display: none !important;
    }

    .mobile-section-active {
        display: block;
    }

    .mobile-calc-left:has(.mobile-section-tape.mobile-section-inactive):has(.mobile-section-calculator.mobile-section-inactive) {
        display: none;
    }

    .mobile-section-tape .tape-scroll {
        height: min(60vh, 30rem);
    }

    .mobile-calculator-fab {
        display: inline-block;
        position: fixed;
        right: 1rem;
        bottom: max(1rem, env(safe-area-inset-bottom));
        z-index: 1060;
        min-height: 48px;
        border-radius: 999px;
        padding-inline: 1.25rem;
        box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .25);
    }

    .mobile-calculator-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1065;
        background: rgba(0, 0, 0, .45);
    }

    .mobile-calculator-sheet {
        display: flex;
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1070;
        max-height: min(88svh, 48rem);
        border-radius: 1rem 1rem 0 0;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .mobile-calculator-sheet-body {
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* 2. Toolbar: wrap buttons onto multiple rows on mobile.
       A horizontal scroll strip (overflow-x:auto) forces overflow-y to clip too,
       which trapped the Shapes/Area/Convert dropdown menus inside the strip and
       made their items overlap the adjacent buttons. Wrapping keeps overflow
       visible so the dropdowns render below their button and stay tappable. */
    .calc-toolbar .d-flex {
        flex-wrap: wrap;
        overflow: visible;
        row-gap: .35rem;
    }

    /* Larger touch targets for the toolbar buttons */
    .calc-toolbar .btn {
        min-height: 40px;
    }

    /* Ensure open dropdown menus float above sibling buttons and stay usable */
    .calc-toolbar .dropdown-menu.show {
        z-index: 1055;
        max-height: 60vh;
        overflow-y: auto;
    }

    .calc-toolbar .dropdown-menu.show .dropdown-item {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* 3. Keypad — 44px minimum touch target (Apple HIG / Google Material) */
    .calc-keypad .btn {
        min-height: 44px;
        font-size: 0.9rem;
    }

    /* 4. Virtual tape — auto height on mobile; desktop fixed height unchanged */
    .vtape-box {
        height: auto;
        max-height: 180px;
    }
}
}