/* ==========================================================================
Table of contents:
0. Brand & design system (FlySync identity — recolors Tabler via its own vars)
1. General styling
2. Custom utils
    - Lightbox
3. Page specific styles
    - Gear pages
    - Public tools (wingload, aadestimate)
4. Compat styles for External Libraries (TomSelect, NoUISlider, Highcharts)
    - TomSelect Tabler Theme Overrides
    - NoUISlider Tabler Theme Overrides
    - Highcharts Theme Adjustments
5. Mobile/desktop/print specific styles
==========================================================================  */


/* ==========================================================================
   0. BRAND & DESIGN SYSTEM
   A restrained "flight-instrument / altitude" identity layered on top of
   Tabler. We reskin through Tabler's OWN custom properties, so buttons,
   links, focus rings, badges, active states, etc. all follow automatically.
   general.css loads after tabler.min.css, so these :root values win.
   Only dark-specific link/texture/shadow tweaks are scoped to dark mode.
   ========================================================================== */
:root {
    /* Brand blue — sampled from the FlySync logo. Tabler derives
       --tblr-primary-darken / --tblr-primary-lt from this via color-mix(),
       so hovers and tints recompute for free. The -rgb form MUST match the
       hex (it powers tints, focus rings, ::selection). #2780c3 = 39,128,195. */
    --tblr-primary: #2780c3;
    --tblr-primary-rgb: 39, 128, 195;

    /* Links track the brand in light mode */
    --tblr-link-color: var(--tblr-primary);
    --tblr-link-color-rgb: var(--tblr-primary-rgb);

    /* Deep instrument navy — dense table heads, dark accents, emphasis */
    --fs-ink: #1c2b4d;
    --fs-ink-rgb: 28, 43, 77;
    --fs-ink-dark: #141d33;

    /* A hair rounder than stock Tabler (6/8px) for a more crafted feel.
       Single lever: reshapes buttons, cards, inputs, dropdowns, modals. */
    --tblr-border-radius-scale: 1.25;

    /* Cooler, slightly recessed canvas so white cards read as elevated.
       This figure/ground contrast is the single biggest "not-a-template" win. */
    --tblr-body-bg: #eceff5;
    --tblr-body-bg-rgb: 236, 239, 245;

    /* Layered soft shadows — "lifted paper", not a hard drop shadow */
    --fs-shadow-sm: 0 1px 2px rgba(var(--fs-ink-rgb), .06), 0 1px 3px rgba(var(--fs-ink-rgb), .05);
    --fs-shadow: 0 2px 4px rgba(var(--fs-ink-rgb), .05), 0 8px 20px rgba(var(--fs-ink-rgb), .07);
    --fs-shadow-lg: 0 4px 8px rgba(var(--fs-ink-rgb), .06), 0 18px 44px rgba(var(--fs-ink-rgb), .12);
}

[data-bs-theme="dark"] {
    /* The cooler light canvas set in :root has equal specificity but loads
       later, so it would leak into dark mode. Re-assert Tabler's dark canvas
       (gray-900 body, gray-800 cards already give good figure/ground). */
    --tblr-body-bg: #111827;
    --tblr-body-bg-rgb: 17, 24, 39;

    /* Lighten links so brand-coloured text stays legible on dark surfaces */
    --tblr-link-color: #6ea8f0;
    --tblr-link-color-rgb: 110, 168, 240;

    /* Shadows read deeper on dark backgrounds */
    --fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --fs-shadow: 0 2px 6px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .3);
    --fs-shadow-lg: 0 4px 10px rgba(0, 0, 0, .4), 0 18px 48px rgba(0, 0, 0, .45);
}

/* Crisper text rendering — subtle, but reads as more "product-grade" */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Clean divider under the top navbar */
.navbar.navbar-expand-md {
    border-bottom: 1px solid var(--tblr-border-color);
}

/* Typography — intentional headings + data-grade numerals */
h1,
h2,
.h1,
.h2,
.page-title,
.card-title,
.lm-title,
.modal-title {
    letter-spacing: -0.01em;
}

/* Tabular figures wherever numbers carry meaning (logbook, metrics, badges) */
.table,
.badge,
.tsm-row__value,
.tsm-summary__value,
.font-monospace {
    font-variant-numeric: tabular-nums;
}

/* Page header — a confident title + a restrained, muted eyebrow. */
.page-title {
    font-size: 1.6rem;
    font-weight: 700;
}

.page-pretitle {
    letter-spacing: .08em;
}

/* Cards — crisp 1px border + a soft lift so they clearly float above the
   canvas; headers get their own weight and a divider. */
.card {
    border: 1px solid var(--tblr-border-color);
    box-shadow: var(--fs-shadow-sm);
}

.card-header {
    border-bottom: 1px solid var(--tblr-border-color);
}

.card-title {
    font-weight: 600;
    font-size: .9375rem;
}

/* Dark canvas: give cards a faintly lighter edge so they don't merge with bg */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .tsm-group {
    border-color: rgba(255, 255, 255, .08);
}

.card-hover,
a.card {
    transition: transform .15s ease, box-shadow .15s ease;
}

.card-hover:hover,
a.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--fs-shadow);
}

/* Metric groups (the app's signature data readouts) read as instrument tiles */
.tsm-group {
    box-shadow: var(--fs-shadow-sm);
}

.tsm-row__value {
    font-weight: 600;
}

/* Light buttons feel a touch more tactile against the canvas */
.btn-white {
    box-shadow: var(--fs-shadow-sm);
}

/* Overlay surfaces read as considered, elevated layers */
.modal-content {
    box-shadow: var(--fs-shadow-lg) !important;
}

/* ── Motion — subtle, consistent transitions make the UI feel crafted/alive.
   Kept short (≤150ms) so dense, data-heavy pages never feel sluggish. ── */
.btn,
.nav-link,
.lm-nav__item,
.list-group-item,
.badge,
.form-control,
.form-select,
.dropdown-item,
.page-link {
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .08s ease;
}

.btn:active {
    transform: translateY(1px);
}

.table-hover > tbody > tr {
    transition: background-color .12s ease;
}

/* Brand-tinted text selection — a small detail that signals intent */
::selection {
    background: rgba(var(--tblr-primary-rgb), .2);
}

@media (prefers-reduced-motion: reduce) {
    .btn:active {
        transform: none;
    }
}


/* 1. GENERAL STYLES */
body {
    overflow-y: scroll;
    /* background: url('/images/topography.svg')*/
}

/* HIDE INPUT NUMBER ARROWS */
/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.navbar .fa,
.navbar .fas,
.navbar .far {
    font-size: 1rem;
    vertical-align: middle;
}

.brand-unified {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0.75rem;
    padding: 0;
}

.btn .fa,
.btn .fas,
.btn .far {
    vertical-align: middle;
    font-size: 1rem;
}

.btn-icon {
    padding: 0.5rem;
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Custom Backgrounds for Dark Mode compat */
.bg-secondary-lt {
    background-color: rgba(var(--tblr-secondary-rgb), 0.1) !important;
}

.bg-purple-lt {
    background-color: rgba(var(--tblr-purple-rgb), 0.1) !important;
}

.bg-blue-lt {
    background-color: rgba(var(--tblr-blue-rgb), 0.1) !important;
}

/* Consistent small sizing for tag badges everywhere */
.tag-badge {
    font-size: 0.7rem;
    font-weight: 400;
    padding: 0.2em 0.5em;
    margin-right: 0.1rem;
}

.bg-green-lt {
    background-color: rgba(var(--tblr-green-rgb), 0.1) !important;
}

.tracker-icon {
    height: 22px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
}

.video {
    aspect-ratio: 16/9;
    width: 100%;
    height: 100%;
    min-width: 200px;
}

#goup {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    opacity: .5;
}

.avatar {
    border-radius: 50%;
    aspect-ratio: 1/1;
}

.border-dashed {
    border-style: dashed !important;
}

.cursor-pointer {
    cursor: pointer;
}

.bg-azure-lt {
    background-color: var(--tblr-azure-lt) !important;
}

.border-bottom-2 {
    border-bottom-width: 2px !important;
}

/* Min Height adjustment for compact headers */
.min-h-0 {
    min-height: 0 !important;
}

/* Scale down switches slightly for mobile density */
.scale-90 {
    transform: scale(0.9);
    transform-origin: left center;
}

.scale-75 {
    transform: scale(0.75);
    transform-origin: right center;
}

/* Cursor fix */
.cursor-pointer {
    cursor: pointer;
}

#returnAjax {
    z-index: 2000;
    top: 3.75rem;
}

/* ============================================
                2. CUSTOM UTILS 
=============================================== */
/* Lightbox styles */
.lightbox {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}


.lightbox-content {
    position: relative;
    margin: auto;
    width: 90%;
    max-height: 80%;
    background: #000;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.lightbox-image {
    width: auto;
}

.lightbox-close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 30px;
    color: #fff;
    background: transparent;
    border: none;
    cursor: pointer;
}

.lightbox-close:hover {
    color: #ccc;
}



/* ============================================
            3. PAGE SPECIFIC STYLES 
========================================== */
/* Gear page cover gear image */

.coverGear {
    max-width: 300px;
    width: 100%;
    height: auto;
    display: block;
}

#mobileGearAnchorBar {
    position: fixed;
    bottom: 70px;
    right: 20px;
    background-color: rgba(var(--tblr-body-bg-rgb), 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--tblr-border-color);
    border-radius: 0.5rem;
    z-index: 1020;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

#mobileGearAnchorBar a {
    padding: 0.75rem 0.5rem;
    color: var(--tblr-secondary);
}



/* SCROLLBAR DARK MODE FIX */
[data-bs-theme="dark"] #scroll-top::-webkit-scrollbar-track,
[data-bs-theme="dark"] #scroll-bottom::-webkit-scrollbar-track {
    background: #1f2937;
    /* Dark background matching Tabler */
}

[data-bs-theme="dark"] #scroll-top::-webkit-scrollbar-thumb,
[data-bs-theme="dark"] #scroll-bottom::-webkit-scrollbar-thumb {
    background: #4b5563;
    /* Dark Grey Handle */
    border-radius: 4px;
}

[data-bs-theme="dark"] #scroll-top::-webkit-scrollbar-thumb:hover,
[data-bs-theme="dark"] #scroll-bottom::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

/* PUBLIC TOOL SHARED STYLES
   Shared classes for public-facing utility pages (wing loading, AAD estimator, …).
   Each tool keeps its own <style> block for tool-specific rules; only
   truly identical patterns live here under the "pt-" (public tool) prefix.
   ========================================================================== */

:root {
    --pt-radius: .75rem;
    --pt-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .05);
    --pt-shadow-lg: 0 4px 12px rgba(0, 0, 0, .08), 0 16px 40px rgba(0, 0, 0, .08);
}

[data-bs-theme="dark"] {
    --pt-shadow: 0 1px 3px rgba(0, 0, 0, .2), 0 8px 24px rgba(0, 0, 0, .15);
    --pt-shadow-lg: 0 4px 12px rgba(0, 0, 0, .25), 0 16px 40px rgba(0, 0, 0, .2);
}

/* bg-light/-lt are fixed light colors (stay bright in dark). Map to a theme-aware
   surface so all views adapt without touching markup. */
[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .bg-light-lt {
    background-color: var(--tblr-bg-surface-secondary) !important;
}

/* ── Hero ── */
.pt-hero {
    padding: 3rem 0 2rem;
}

.pt-hero__badge {
    display: inline-block;
    background: rgba(var(--tblr-azure-rgb), .1);
    color: var(--tblr-azure);
    font-weight: 600;
    font-size: .8rem;
    padding: .35rem .9rem;
    border-radius: 2rem;
    margin-bottom: 1rem;
    letter-spacing: .02em;
}

.pt-hero__title {
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--tblr-body-color);
    line-height: 1.15;
    margin-bottom: 1rem;
}

.pt-hero__subtitle {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--tblr-secondary-color);
    margin-bottom: 1.5rem;
}

/* ── Calculator card ── */
.pt-calc-card {
    background: var(--tblr-bg-surface);
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--pt-radius);
    box-shadow: var(--pt-shadow-lg);
    overflow: hidden;
}

.pt-inputs-col {
    padding: 2rem 2.5rem;
    border-right: 1px solid var(--tblr-border-color);
}

/* ── Disclaimer / info block ── */
.pt-disclaimer {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: rgba(var(--tblr-info-rgb), .07);
    border: 1px solid rgba(var(--tblr-info-rgb), .2);
    border-left: 3px solid var(--tblr-info);
    border-radius: var(--pt-radius);
    padding: 1.1rem 1.4rem;
    color: var(--tblr-body-color);
}

.pt-disclaimer__icon {
    font-size: 1.1rem;
    color: var(--tblr-info);
    padding-top: .1rem;
    flex-shrink: 0;
}

.pt-disclaimer__title {
    font-weight: 700;
    font-size: .9rem;
    margin-bottom: .35rem;
    color: var(--tblr-body-color);
}

.pt-disclaimer__text {
    font-size: .85rem;
    line-height: 1.6;
    color: var(--tblr-secondary-color);
}

/* ── CTA banner ── */
.pt-cta-banner {
    background: linear-gradient(135deg, #1a3a5c 0%, #0d2340 100%);
    border-radius: var(--pt-radius);
    padding: 2.5rem 2rem;
    box-shadow: var(--pt-shadow-lg);
}

/* ── Responsive ── */
@media (max-width: 991.98px) {
    .pt-inputs-col {
        border-right: none;
        border-bottom: 1px solid var(--tblr-border-color);
    }
}

@media (max-width: 767.98px) {
    .pt-hero {
        padding: 2rem 0 1rem;
    }

    .pt-hero__title {
        font-size: 1.8rem;
    }

    .pt-hero__subtitle {
        font-size: .95rem;
    }

    .pt-cta-banner {
        padding: 1.75rem 1.25rem;
        text-align: center;
    }

    .pt-cta-banner .text-md-end {
        text-align: center !important;
    }
}



/* ==========================================================================
                    MINIMAL SLIDER THEME
========================================================================== */
.noUi-target {
    background: rgba(var(--tblr-body-color-rgb), 0.1) !important;
    /* Subtle track */
    border: none !important;
    box-shadow: none !important;
    height: 2px !important;
    /* Thinner track */
}

.noUi-connect {
    background: var(--tblr-primary) !important;
}

.noUi-handle {
    background: var(--tblr-bg-surface) !important;
    /* Handle matches card background */
    border: 2px solid var(--tblr-primary) !important;
    /* Ring border */
    box-shadow: none !important;
    width: 14px !important;
    /* Smaller */
    height: 14px !important;
    /* Smaller */
    border-radius: 50% !important;
    right: -7px !important;
    top: -6px !important;
    /* Centered on 2px track */
    cursor: grab !important;
    transition: transform 0.1s ease, border-color 0.1s ease;
}

.noUi-handle:active {
    cursor: grabbing !important;
    transform: scale(1.2);
    /* Visual feedback on press */
    background: var(--tblr-primary) !important;
    /* Fill on press */
}

/* Remove default lines */
.noUi-handle:before,
.noUi-handle:after {
    display: none !important;
}

/* ==========================================================================
   TOMSELECT TABLER THEME OVERRIDES (GLOBAL)
   Forces TomSelect to respect Tabler CSS Variables and Dark/Light Modes
   ========================================================================== */

/* Ensure TomSelect dropdowns attached to body stay above Bootstrap modals */
.ts-dropdown {
    z-index: 2000 !important;
    /* Higher than Bootstrap's 1050-1060 */
}

/* Prevents the table from snapping when TomSelect gains focus */
.ts-wrapper .ts-control input {
    scroll-margin-inline: 100vw;
}


/* Map TomSelect's hardcoded white/grey to Tabler vars so it follows both themes */
.ts-control,
.ts-dropdown {
    background-color: var(--tblr-bg-forms, var(--tblr-bg-surface)) !important;
    color: var(--tblr-body-color) !important;
    border-color: var(--tblr-border-color) !important;
}

/* TomSelect hardcodes its own radius, ignoring --tblr-border-radius-scale;
   match the plain .form-control corners instead of the stock 4px */
.ts-control {
    border-radius: var(--tblr-border-radius) !important;
}

.ts-wrapper.single .ts-control,
.ts-wrapper.single .ts-control input {
    color: var(--tblr-body-color) !important;
}

.ts-control input::placeholder {
    color: var(--tblr-secondary) !important;
}

/* Selected pills in multi-select */
.ts-control .item {
    background-color: var(--tblr-bg-surface-secondary, var(--tblr-bg-surface)) !important;
    color: var(--tblr-body-color) !important;
    border-color: var(--tblr-border-color) !important;
}

.ts-dropdown .option,
.ts-dropdown .optgroup-header,
.ts-dropdown .no-results,
.ts-dropdown .create {
    color: var(--tblr-body-color) !important;
}

/* Keyboard/hover highlight: subtle tint so child text (text-body/text-muted) stays readable */
.ts-dropdown .active {
    background-color: rgba(var(--tblr-primary-rgb), 0.12) !important;
    color: var(--tblr-body-color) !important;
}

.ts-dropdown .option.selected {
    background-color: rgba(var(--tblr-primary-rgb), 0.18) !important;
}

.ts-dropdown .optgroup-header {
    background-color: var(--tblr-bg-surface) !important;
}

/* Dropdown divider + dim disabled options */
.ts-dropdown .optgroup:not(:first-child) {
    border-top-color: var(--tblr-border-color) !important;
}

.ts-control.disabled,
.ts-wrapper.disabled .ts-control {
    background-color: var(--tblr-bg-surface-secondary, var(--tblr-bg-surface)) !important;
    opacity: 0.6;
}

/*      ============================
        Highcharts theme adjustments 
        ============================ */
.highcharts-series path {
    stroke-width: 1.2px !important;
}

.highcharts-background {
    fill: transparent !important;
}

.signalLoss {
    fill: orange !important;
    fill-opacity: 0.2 !important;
}

.planePhase.highcharts-plot-band,
.landedPhase.highcharts-plot-band,
.phase-plane.highcharts-plot-band,
.phase-ground.highcharts-plot-band,
.phase-landed.highcharts-plot-band {
    fill: grey !important;
    fill-opacity: 0.03 !important;
}

.phase-climb.highcharts-plot-band {
    fill: #6366f1 !important;
    fill-opacity: 0.05 !important;
}

.phase-jumprun.highcharts-plot-band {
    fill: #e990ff !important;
    fill-opacity: 0.05 !important;
}

.freefallPhase.highcharts-plot-band,
.phase-freefall.highcharts-plot-band {
    fill: #0ea5e9 !important;
    fill-opacity: 0.05 !important;
}

.OpeningPhase.highcharts-plot-band,
.phase-opening.highcharts-plot-band {
    fill: yellow !important;
    fill-opacity: 0.05 !important;
}

.canopyPhase.highcharts-plot-band,
.phase-canopy.highcharts-plot-band {
    fill: #10b981 !important;
    fill-opacity: 0.05 !important;
}

.speed-fastest-3s.highcharts-plot-band {
    fill: rgb(255, 12, 12);
    fill-opacity: 0.1
}

.speed-scoring-end-line {
    stroke: red;
    stroke-width: 1px;
    stroke-dasharray: 4, 4;
}

/* Dark mode: boost plot band opacity (nearly invisible at 0.03-0.05 on dark bg) */
[data-bs-theme="dark"] .phase-freefall.highcharts-plot-band,
[data-bs-theme="dark"] .freefallPhase.highcharts-plot-band {
    fill-opacity: 0.08 !important;
}

[data-bs-theme="dark"] .phase-opening.highcharts-plot-band,
[data-bs-theme="dark"] .OpeningPhase.highcharts-plot-band {
    fill-opacity: 0.06 !important;
}

[data-bs-theme="dark"] .phase-canopy.highcharts-plot-band,
[data-bs-theme="dark"] .canopyPhase.highcharts-plot-band {
    fill-opacity: 0.08 !important;
}

[data-bs-theme="dark"] .phase-climb.highcharts-plot-band,
[data-bs-theme="dark"] .phase-jumprun.highcharts-plot-band {
    fill-opacity: 0.08 !important;
}


:root {
    /* Altitude */
    --highcharts-altitude: #646973;

    /* Speeds */
    --highcharts-speed: #2fb344;
    /* Green (Vertical) */
    --highcharts-gspeed: #d63939;
    /* Red (Ground) */
    --highcharts-total-speed: #4285f4;
    /* Blue (Total) */

    /* Forces */
    --highcharts-acceleration: #9e4848;
    /* Maroon */
    --highcharts-jerk: #f76707;
    /* Orange */
    --highcharts-gforce: #d63939;
    /* Red */

    /* Distances */
    --highcharts-distance: #ae3ec9;
    /* Grape (2D) */
    --highcharts-3d-distance: #4263eb;
    /* Indigo (3D) */

    /* Aerodynamics */
    --highcharts-gr: #2aaba0;
    /* Teal (Glide Ratio) */
    --highcharts-dive-angle: #bf5fbf;
    /* Magenta (Dive Angle) */
    --highcharts-bearing: #48b5bf;
    /* Cyan (Bearing) */
    --highcharts-turn-rate: #358f89;
    /* Teal (Rate of Turn) */

    /* Signal Quality */
    --highcharts-satellites: #8568a8;
    /* Purple */
    --highcharts-haccuracy: #a05858;
    /* Maroon */
    --highcharts-vaccuracy: #4d914d;
    /* Green */
}



/* Mobile specific styles */
@media (max-width: 767.98px) {
    #notif-drop {
        position: static !important;
    }

    #notif-drop .dropdown-menu {
        width: 94%;
        margin: 0 3%;
    }

    #notif-drop .dropdown-menu-arrow.dropdown-menu-end::before {
        right: calc(0.75em + 55px) !important;
    }

    .coverGear {
        margin: 0 auto 20px auto;
    }

    .nomobile {
        display: none !important;
    }
}

/* Desktop specific styles */
@media (min-width: 768px) {
    #notif-drop {
        position: relative !important;
    }

    #notif-drop .dropdown-menu {
        width: 25rem;
    }

    .brand-unified {
        position: static !important;
        transform: none !important;
        margin-top: 0.5rem;
        padding-right: 1rem;
    }

    .coverGear {
        float: left;
        margin-right: 20px;
        margin-bottom: 20px;
    }

    #mobileGearAnchorBar {
        display: none;
    }

    h1#gearName {
        font-size: 2rem !important;
    }

    .nodesktop {
        display: none !important;
    }
}

/* Tracker / segment metrics panels (segment_modal, tracker data) */
.tsm-summary {
    padding: .75rem 1rem;
    background: var(--tblr-bg-surface-secondary);
    border-radius: var(--tblr-border-radius-lg);
}
.tsm-summary__label {
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tblr-secondary-color);
    margin-bottom: .15rem;
}
.tsm-summary__value {
    font-size: .9rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.tsm-group {
    border: 1px solid var(--tblr-border-color);
    border-radius: .375rem;
    overflow: hidden;
    background: var(--tblr-bg-surface);
}
.tsm-group__head {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .65rem;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    background: var(--tblr-bg-surface-secondary);
    color: var(--tblr-secondary-color);
}
.tsm-group__head i {
    opacity: .7;
    font-size: .75rem;
}
.tsm-group__head-dur {
    font-variant-numeric: tabular-nums;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}
.tsm-group__body {
    padding: .15rem .5rem .25rem;
}
.tsm-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .75rem;
    padding: .3rem .15rem;
    font-size: .85rem;
}
.tsm-row + .tsm-row {
    border-top: 1px solid var(--tblr-border-color-translucent, rgba(0, 0, 0, .05));
}
.tsm-row__label {
    color: var(--tblr-secondary-color);
}
.tsm-row__value {
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.tsm-subhead {
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tblr-secondary-color);
    padding: .45rem .15rem .15rem;
    margin-top: .1rem;
    border-top: 1px solid var(--tblr-border-color-translucent, rgba(0, 0, 0, .05));
}
.tsm-group__body > .tsm-subhead:first-child {
    margin-top: 0;
    padding-top: .25rem;
    border-top: 0;
}
.tsm-group__extra {
    padding: .35rem .15rem .15rem;
    border-top: 1px solid var(--tblr-border-color-translucent, rgba(0, 0, 0, .05));
}
.tsm-section-title {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tblr-secondary-color);
    margin-bottom: .5rem;
}
.tsm-quality-footer {
    padding: .5rem .75rem;
    background: var(--tblr-bg-surface-secondary);
    border: 1px solid var(--tblr-border-color);
    border-radius: .375rem;
}
.segment-display-overlay-modal .tsm-summary {
    padding: .4rem .5rem;
    margin-bottom: .5rem;
}
.segment-display-overlay-modal .tsm-summary__label {
    font-size: .58rem;
}
.segment-display-overlay-modal .tsm-summary__value {
    font-size: .75rem;
}
.segment-display-overlay-modal .tsm-group__head {
    font-size: .62rem;
    padding: .2rem .4rem;
}
.segment-display-overlay-modal .tsm-row {
    font-size: .72rem;
    padding: .15rem .1rem;
}
/* ── Local Menu (app-wide section navigation) ─────────────────────── */
.lm {
    margin-bottom: 1.25rem;
}

/* Row 1 — title + section shortcuts */
.lm-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .5rem;
}

.lm-title-block {
    min-width: 0;
}

.lm-title {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}

.lm-desc {
    font-size: .8rem;
    color: var(--tblr-secondary-color);
    margin: .15rem 0 0;
    line-height: 1.4;
}

.lm-shortcuts {
    flex-shrink: 0;
}

.lm-shortcuts .dropdown-toggle {
    white-space: nowrap;
}

/* Single-shortcut variant (rendered as a direct button) */
a.lm-shortcuts {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
}

.lm .dropdown-item {
    display: flex;
    align-items: center;
}

.lm .dropdown-item i {
    width: 1.1rem;
    margin-right: .5rem;
    text-align: center;
}

/* Row 2 — tabs + page actions.
   Mobile-first: stacked (tabs, then actions on their own row) so action
   buttons can never eat into the tab strip. Inline side-by-side at md+. */
.lm-bar {
    display: flex;
    flex-direction: column;
}

/* Tabs (scroll horizontally) */
.lm-nav-wrap {
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-bottom: 1px solid var(--tblr-border-color);
}

.lm-nav-wrap::-webkit-scrollbar {
    display: none;
}

.lm-nav {
    display: inline-flex;
    gap: .25rem;
    min-width: 100%;
}

.lm-nav__item {
    padding: .55rem .85rem;
    font-size: .825rem;
    font-weight: 600;
    color: var(--tblr-secondary-color);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
}

.lm-nav__item:hover {
    color: var(--tblr-body-color);
    border-bottom-color: var(--tblr-border-color);
    text-decoration: none;
}

.lm-nav__item--active {
    color: var(--tblr-primary);
    border-bottom-color: var(--tblr-primary);
}

/* Page actions — own row below the tabs on mobile */
.lm-page {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .4rem;
    padding-top: .5rem;
}

.lm-page__btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
    font-size: .8rem;
}

/* md+ : tabs and page actions share one row + one baseline border */
@media (min-width: 768px) {
    .lm-bar {
        flex-direction: row;
        align-items: flex-end;
        gap: .75rem;
        border-bottom: 1px solid var(--tblr-border-color);
    }

    .lm-nav-wrap {
        flex: 1 1 auto;
        border-bottom: 0;
        margin-bottom: -1px;
    }

    .lm-page {
        flex-shrink: 0;
        flex-wrap: nowrap;
        padding-top: 0;
        padding-bottom: .4rem;
    }
}

/* Small screens */
@media (max-width: 575.98px) {
    .lm-title {
        font-size: 1.15rem;
    }

    .lm-nav__item {
        padding: .5rem .7rem;
    }
}