/* AGN full-site interface workover
   Shared visual language, controls, card treatments and routed-page overflow rules. */

:root {
    --agn-bg: #1d1f22;
    --agn-surface-1: #24262b;
    --agn-surface-2: #2a2c31;
    --agn-surface-3: #303238;
    --agn-surface-raised: #34363c;
    --agn-border: rgba(255,255,255,.12);
    --agn-border-strong: rgba(255,255,255,.22);
    --agn-text: #f4f6f8;
    --agn-muted: #b8c0c8;
    --agn-accent: #ffd94a;
    --agn-blue: #56b8e6;
    --agn-bronze: #c58a36;
    --agn-silver: #c7ccd3;
    --agn-admin: #f39c12;
    --agn-success: #42b878;
    --agn-danger: #e84d5b;
    --agn-radius-sm: 6px;
    --agn-radius-md: 9px;
    --agn-radius-lg: 12px;
    --agn-shadow: 0 6px 18px rgba(0,0,0,.22);
    --agn-control-h: 36px;
    --agn-control-h-sm: 32px;
}

html, body {
    height: 100%;
    overflow: hidden;
    background: var(--agn-bg);
}

body {
    color: var(--agn-text);
    line-height: 1.4;
}

.main-container {
    height: 100dvh !important;
    min-height: 0;
    overflow: hidden !important;
}

.sidebar {
    height: 100dvh !important;
    min-height: 0;
}

.content {
    height: auto !important;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable;
}

#contentWindow {
    isolation: isolate;
}

#contentWindow > :first-child:not(.agn-route-state):not(.agn-route-error) {
    min-width: 0;
}

/* Routed page frame */
.agn-page-root {
    --agn-page-accent-rgb: 255, 217, 74;
    width: 100%;
    min-width: 0;
    min-height: 100%;
    padding: 8px;
    box-sizing: border-box;
}

.agn-page-root *,
.agn-page-root *::before,
.agn-page-root *::after {
    box-sizing: border-box;
}

#contentWindow[data-page-key="home"] { --agn-page-accent-rgb: 255, 217, 74; }
#contentWindow[data-page-key="news"],
#contentWindow[data-page-key="faq"],
#contentWindow[data-page-key="terminology"],
#contentWindow[data-page-key="clubs"],
#contentWindow[data-page-key="ball-flight"],
#contentWindow[data-page-key="club-build"] { --agn-page-accent-rgb: 86, 184, 230; }
#contentWindow[data-page-key="iron-heatmaps"],
#contentWindow[data-page-key="driver-heatmaps"] { --agn-page-accent-rgb: 197, 138, 54; }
#contentWindow[data-page-key="iron-data"],
#contentWindow[data-page-key="driver-data"],
#contentWindow[data-page-key="iron-radar"] { --agn-page-accent-rgb: 199, 204, 211; }
#contentWindow[data-page-key="driver-dashboard"],
#contentWindow[data-page-key="driver-spin-profile"],
#contentWindow[data-page-key="bag-gapping"],
#contentWindow[data-page-key="iron-fit"],
#contentWindow[data-page-key="driver-fit"],
#contentWindow[data-page-key="dispersions"],
#contentWindow[data-page-key="impact-position"] { --agn-page-accent-rgb: 255, 217, 74; }
#contentWindow[data-page-key^="admin"],
#contentWindow[data-page-key="driver-flights"],
#contentWindow[data-page-key="club-import"],
#contentWindow[data-page-key="csv-import"],
#contentWindow[data-page-key="shot-dispersion"] { --agn-page-accent-rgb: 243, 156, 18; }

/* Reusable restrained top-left glow */
.agn-surface,
.agn-card-enhanced,
.agn-page-root .card,
.agn-page-root .disp-card,
.agn-page-root .df-card,
.agn-page-root .ge-card,
.agn-page-root .agn-block,
.agn-page-root .panel,
.agn-page-root .section-card,
.agn-page-root .content-card,
.agn-page-root .dashboard-card,
.agn-page-root .chart-card,
.agn-page-root .metric-card,
.agn-page-root .tool-card {
    position: relative;
    border: 1px solid var(--agn-border);
    border-radius: var(--agn-radius-md);
    background-color: var(--agn-surface-1);
    background-image: radial-gradient(circle at 0 0,
        rgba(var(--agn-page-accent-rgb), .105) 0,
        rgba(var(--agn-page-accent-rgb), .045) 24%,
        transparent 48%);
    box-shadow: 0 2px 7px rgba(0,0,0,.18);
}

.agn-page-root .card:hover,
.agn-page-root .disp-card:hover,
.agn-page-root .df-card:hover,
.agn-page-root .ge-card:hover,
.agn-card-enhanced:hover {
    border-color: rgba(var(--agn-page-accent-rgb), .32);
}

/* Typography */
.agn-page-root h1,
.agn-page-root h2,
.agn-page-root h3,
.agn-page-root h4,
.agn-page-root h5,
.agn-page-root h6 {
    color: var(--agn-text);
    letter-spacing: -.015em;
}

.agn-page-root h1,
.agn-page-root h2 {
    text-wrap: balance;
}

.agn-page-root .text-muted,
.agn-page-root small,
.agn-page-root .tiny,
.agn-page-root .help-text,
.agn-page-root .form-text {
    color: var(--agn-muted) !important;
}

.agn-page-root a:not(.btn) {
    color: var(--agn-blue);
    text-underline-offset: 2px;
}

/* Inputs */
.agn-page-root .form-control,
.agn-page-root .form-select,
.agn-page-root input[type="number"],
.agn-page-root input[type="text"],
.agn-page-root input[type="search"],
.agn-page-root input[type="email"],
.agn-page-root input[type="password"],
.agn-page-root select,
.agn-page-root textarea,
.agn-page-root .ge-select {
    min-height: var(--agn-control-h-sm);
    border: 1px solid var(--agn-border-strong);
    border-radius: var(--agn-radius-sm);
    background-color: #202226;
    color: var(--agn-text);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.24);
}

.agn-page-root .form-control:not(.form-control-sm),
.agn-page-root .form-select:not(.form-select-sm) {
    min-height: var(--agn-control-h);
}

.agn-page-root .form-control:hover,
.agn-page-root .form-select:hover,
.agn-page-root select:hover,
.agn-page-root textarea:hover {
    border-color: rgba(var(--agn-page-accent-rgb), .45);
}

.agn-page-root .form-control:focus,
.agn-page-root .form-select:focus,
.agn-page-root input:focus,
.agn-page-root select:focus,
.agn-page-root textarea:focus {
    color: var(--agn-text);
    background-color: #23262a;
    border-color: rgba(var(--agn-page-accent-rgb), .82);
    box-shadow: 0 0 0 3px rgba(var(--agn-page-accent-rgb), .14);
    outline: none;
}

.agn-page-root .form-control:disabled,
.agn-page-root .form-select:disabled,
.agn-page-root input:disabled,
.agn-page-root select:disabled {
    opacity: .58;
    cursor: not-allowed;
}

.agn-page-root .form-label,
.agn-page-root label {
    color: #dfe4e8;
    font-weight: 600;
}

.agn-page-root input[type="range"] {
    accent-color: rgb(var(--agn-page-accent-rgb));
}

/* Buttons */
.agn-page-root .btn,
.agn-page-root button:not(.nav-link):not(.accordion-button) {
    border-radius: var(--agn-radius-sm);
    font-weight: 650;
    transition: border-color .14s ease, background-color .14s ease, color .14s ease, transform .14s ease, box-shadow .14s ease;
}

.agn-page-root .btn:hover:not(:disabled),
.agn-page-root button:hover:not(:disabled):not(.nav-link):not(.accordion-button) {
    transform: translateY(-1px);
}

.agn-page-root .btn:focus-visible,
.agn-page-root button:focus-visible,
.agn-page-root a:focus-visible {
    outline: 2px solid rgba(var(--agn-page-accent-rgb), .9);
    outline-offset: 2px;
}

.agn-page-root .btn-primary,
.agn-page-root .btn-warning,
.agn-page-root .agn-primary-action {
    color: #151515;
    border-color: rgba(var(--agn-page-accent-rgb), .95);
    background: linear-gradient(180deg,
        rgba(var(--agn-page-accent-rgb), 1),
        rgba(var(--agn-page-accent-rgb), .78));
    box-shadow: 0 2px 8px rgba(var(--agn-page-accent-rgb), .16);
}

.agn-page-root .btn-primary:hover,
.agn-page-root .btn-warning:hover,
.agn-page-root .agn-primary-action:hover {
    color: #111;
    filter: brightness(1.06);
}

.agn-page-root .btn-secondary,
.agn-page-root .btn-outline-secondary,
.agn-page-root .btn-outline-light,
.agn-page-root .save-btn,
.agn-page-root .info-btn {
    color: var(--agn-text);
    border: 1px solid var(--agn-border-strong);
    background: #292c31;
}

.agn-page-root .btn-secondary:hover,
.agn-page-root .btn-outline-secondary:hover,
.agn-page-root .btn-outline-light:hover,
.agn-page-root .save-btn:hover,
.agn-page-root .info-btn:hover {
    color: rgb(var(--agn-page-accent-rgb));
    border-color: rgba(var(--agn-page-accent-rgb), .58);
    background: rgba(var(--agn-page-accent-rgb), .09);
}

.agn-page-root .btn-danger {
    background: #b73745;
    border-color: #d84a59;
}

.agn-page-root .btn-success {
    background: #287b50;
    border-color: #3aa76c;
}

.agn-page-root .btn-group > .btn-check:checked + .btn,
.agn-page-root [aria-pressed="true"],
.agn-page-root .agn-unit-toggle.active,
.agn-page-root .active.left-sheet-tab,
.agn-page-root .active.disp-tab {
    color: #151515 !important;
    border-color: rgba(var(--agn-page-accent-rgb), .95) !important;
    background: rgb(var(--agn-page-accent-rgb)) !important;
    box-shadow: none;
}

/* Tabs */
.agn-page-root .nav-tabs,
.agn-page-root .left-sheetbar,
.agn-page-root .disp-tabs,
.agn-page-root [role="tablist"] {
    gap: 4px;
    border-bottom: 1px solid var(--agn-border);
    scrollbar-width: thin;
}

.agn-page-root .nav-tabs .nav-link,
.agn-page-root .left-sheet-tab,
.agn-page-root .disp-tab,
.agn-page-root [role="tab"] {
    min-height: 34px;
    color: var(--agn-muted);
    border: 1px solid transparent;
    border-radius: 7px 7px 0 0;
    background: transparent;
    font-weight: 650;
    white-space: nowrap;
}

.agn-page-root .nav-tabs .nav-link:hover,
.agn-page-root .left-sheet-tab:hover,
.agn-page-root .disp-tab:hover,
.agn-page-root [role="tab"]:hover {
    color: var(--agn-text);
    border-color: var(--agn-border);
    background: rgba(255,255,255,.035);
}

.agn-page-root .nav-tabs .nav-link.active,
.agn-page-root [role="tab"][aria-selected="true"] {
    color: rgb(var(--agn-page-accent-rgb));
    border-color: var(--agn-border) var(--agn-border) var(--agn-surface-1);
    background: var(--agn-surface-1);
}

/* Accordions */
.agn-page-root .accordion-item {
    overflow: hidden;
    color: var(--agn-text);
    border: 1px solid var(--agn-border);
    background: var(--agn-surface-1);
}

.agn-page-root .accordion-button {
    color: var(--agn-text);
    background: var(--agn-surface-2);
    font-weight: 700;
}

.agn-page-root .accordion-button:not(.collapsed) {
    color: rgb(var(--agn-page-accent-rgb));
    background: rgba(var(--agn-page-accent-rgb), .08);
    box-shadow: inset 0 -1px 0 var(--agn-border);
}

/* Tables: vertical page scroll, horizontal table scroll */
.agn-page-root .table-responsive,
.agn-page-root .table-container,
.agn-page-root .table-wrapper,
.agn-page-root .data-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-gutter: stable;
}

.agn-page-root table {
    color: var(--agn-text);
    border-color: var(--agn-border);
}

.agn-page-root .table > :not(caption) > * > * {
    color: inherit;
    background-color: transparent;
    border-color: var(--agn-border);
}

.agn-page-root thead th {
    background: #303238;
    color: #f7f8fa;
    border-color: var(--agn-border-strong);
}

.agn-page-root tbody tr:nth-child(even) {
    background: rgba(255,255,255,.018);
}

.agn-page-root tbody tr:hover {
    background: rgba(var(--agn-page-accent-rgb), .055);
}

/* Remove nested viewport ownership from routed fragments */
#contentWindow .agn-page-root,
#contentWindow .agn-page-root.container-fluid,
#contentWindow .agn-page-root > .container-fluid,
#contentWindow .iron-picker-page,
#contentWindow .df-wrap,
#contentWindow .disp-wrap,
#contentWindow .ge-page,
#contentWindow .heatmap-page,
#contentWindow .radar-container,
#contentWindow .main-container,
#contentWindow .content-expanded {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

#contentWindow .agn-page-root .table-container,
#contentWindow .agn-page-root .content-expanded,
#contentWindow .agn-page-root .table-area {
    max-height: none;
}

/* Known pages that previously took ownership of the viewport */
#contentWindow[data-page-key="iron-data"] .table-container,
#contentWindow[data-page-key="driver-data"] .table-container {
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: auto !important;
}

#contentWindow[data-page-key="iron-data"] body,
#contentWindow[data-page-key="driver-data"] body,
#contentWindow[data-page-key="iron-radar"] body {
    height: auto !important;
    overflow: visible !important;
}

#contentWindow[data-page-key="iron-radar"] .radar-container,
#contentWindow[data-page-key="iron-radar"] .chart-container {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

#contentWindow[data-page-key="iron-radar"] canvas {
    max-height: min(72vh, 760px);
}

#contentWindow[data-page-key="ball-flight"] > .agn-page-root {
    height: auto !important;
}

/* Page-specific cleanup without changing application logic */
#contentWindow[data-page-key="csv-import"] .left-controls {
    position: sticky;
    top: 8px;
}

#contentWindow[data-page-key="csv-import"] .card,
#contentWindow[data-page-key="shot-dispersion"] .card,
#contentWindow[data-page-key="admin-panel"] .card {
    --agn-page-accent-rgb: 243, 156, 18;
}

#contentWindow[data-page-key="iron-fit"] .slider-wrapper,
#contentWindow[data-page-key="driver-fit"] .slider-wrapper {
    border: 1px solid var(--agn-border);
    border-radius: var(--agn-radius-md);
    background-image: radial-gradient(circle at 0 0, rgba(var(--agn-page-accent-rgb), .08), transparent 52%);
}

#contentWindow[data-page-key="bag-gapping"] .ge-shell,
#contentWindow[data-page-key="driver-fit"] .df-grid,
#contentWindow[data-page-key="dispersions"] .disp-grid {
    min-width: 0;
}

/* Scrollbars */
.content,
.sidebar-top,
.agn-page-root * {
    scrollbar-color: #5a5d64 #24262a;
    scrollbar-width: thin;
}

.content::-webkit-scrollbar,
.sidebar-top::-webkit-scrollbar,
.agn-page-root *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.content::-webkit-scrollbar-thumb,
.sidebar-top::-webkit-scrollbar-thumb,
.agn-page-root *::-webkit-scrollbar-thumb {
    border: 2px solid #24262a;
    border-radius: 999px;
    background: #5a5d64;
}

/* Route states */
.agn-route-state,
.agn-route-error {
    min-height: 55vh;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 10px;
    padding: 30px;
    color: var(--agn-muted);
    text-align: center;
}

/* Responsive normalization */
@media (max-width: 1100px) {
    #contentWindow[data-page-key="csv-import"] .left-controls {
        position: static;
    }

    .agn-page-root .row > [class*="col-2"]:has(.left-controls) {
        width: 28%;
    }
}

@media (max-width: 760px) {
    .agn-page-root {
        padding: 6px;
    }

    .agn-page-root .card,
    .agn-page-root .disp-card,
    .agn-page-root .df-card,
    .agn-page-root .ge-card,
    .agn-page-root .agn-block {
        border-radius: 8px;
    }

    .agn-page-root .nav-tabs,
    .agn-page-root .left-sheetbar,
    .agn-page-root .disp-tabs,
    .agn-page-root [role="tablist"] {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    #contentWindow[data-page-key="csv-import"] .row > [class*="col-2"],
    #contentWindow[data-page-key="csv-import"] .row > [class*="col-10"] {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .agn-page-root *,
    .sidebar * {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ========================================================================== 
   nav75 – Phase 2: shared component enforcement and workflow-page refinement
   ========================================================================== */

/* Explicit component primitives used by existing and future pages. */
.agn-page-root .agn-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 10px;
    padding: 12px 14px;
    border: 1px solid var(--agn-border);
    border-radius: var(--agn-radius-lg);
    background:
        radial-gradient(circle at 0 0, rgba(var(--agn-page-accent-rgb), .13), transparent 48%),
        var(--agn-surface-1);
}

.agn-page-root .agn-page-title {
    margin: 0;
    color: var(--agn-accent);
    font-size: clamp(1.15rem, 1rem + .7vw, 1.75rem);
    line-height: 1.15;
}

.agn-page-root .agn-page-summary {
    max-width: 76ch;
    margin: 4px 0 0;
    color: var(--agn-muted);
    font-size: .92rem;
}

.agn-page-root .agn-page-actions,
.agn-page-root .agn-toolbar,
.agn-page-root .agn-action-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.agn-page-root .agn-toolbar {
    min-width: 0;
    padding: 7px 8px;
    border: 1px solid var(--agn-border);
    border-radius: var(--agn-radius-md);
    background: rgba(20,22,25,.72);
}

.agn-page-root .agn-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 7px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--agn-border);
    color: rgb(var(--agn-page-accent-rgb));
    font-size: .92rem;
    font-weight: 750;
    letter-spacing: .01em;
}

.agn-page-root .agn-field {
    min-width: 0;
}

.agn-page-root .agn-field > label:first-child,
.agn-page-root .agn-field-label {
    display: block;
    margin: 0 0 3px;
    color: #dce2e7;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.15;
}

.agn-page-root .agn-field-help {
    margin-top: 3px;
    color: var(--agn-muted);
    font-size: .72rem;
    line-height: 1.25;
}

.agn-page-root .agn-segmented {
    display: inline-flex;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--agn-border-strong);
    border-radius: var(--agn-radius-sm);
    background: #202226;
}

.agn-page-root .agn-segmented > button,
.agn-page-root .agn-segmented > .btn {
    min-height: 30px;
    margin: 0;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

.agn-page-root .agn-segmented > * + * {
    border-left: 1px solid var(--agn-border) !important;
}

/* Button semantics: primary actions remain prominent; support controls stay neutral. */
.agn-page-root .agn-action-primary,
.agn-page-root button[data-agn-action="primary"] {
    color: #151515;
    border-color: rgba(var(--agn-page-accent-rgb), .95);
    background: linear-gradient(180deg, rgba(var(--agn-page-accent-rgb), 1), rgba(var(--agn-page-accent-rgb), .78));
}

.agn-page-root .agn-action-secondary,
.agn-page-root button[data-agn-action="secondary"] {
    color: var(--agn-text);
    border-color: var(--agn-border-strong);
    background: #292c31;
}

.agn-page-root .agn-action-danger,
.agn-page-root button[data-agn-action="danger"] {
    color: #fff;
    border-color: #db5360;
    background: #a93440;
}

/* Workflow pages: consistent major regions and restrained glow hierarchy. */
.agn-page-root .agn-workflow-page {
    min-width: 0;
}

.agn-page-root .agn-workflow-page .card,
.agn-page-root .agn-workflow-page .disp-card,
.agn-page-root .agn-workflow-page .df-card,
.agn-page-root .agn-workflow-page .ge-card,
.agn-page-root .agn-workflow-page .agn-block {
    background-image:
        radial-gradient(circle at 0 0, rgba(var(--agn-page-accent-rgb), .095), transparent 46%),
        linear-gradient(180deg, rgba(255,255,255,.012), rgba(0,0,0,.025));
}

/* Do not let local Bootstrap utility backgrounds erase the card treatment. */
.agn-page-root .agn-workflow-page .card.bg-dark,
.agn-page-root .agn-workflow-page .modal-content.bg-dark {
    background-color: var(--agn-surface-1) !important;
}

/* Forms are visually aligned even where legacy pages mix form-control and native inputs. */
.agn-page-root .agn-workflow-page .form-control-sm,
.agn-page-root .agn-workflow-page .form-select-sm,
.agn-page-root .agn-workflow-page .toolbar-inline-select,
.agn-page-root .agn-workflow-page .toolbar-inline-input,
.agn-page-root .agn-workflow-page .ge-select,
.agn-page-root .agn-workflow-page .ge-text-input {
    min-height: var(--agn-control-h-sm) !important;
    height: var(--agn-control-h-sm);
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: .82rem;
}

.agn-page-root .agn-workflow-page .btn-sm,
.agn-page-root .agn-workflow-page .ge-small-btn,
.agn-page-root .agn-workflow-page .save-btn,
.agn-page-root .agn-workflow-page .info-btn {
    min-height: var(--agn-control-h-sm);
    padding: 4px 9px;
    font-size: .79rem;
    line-height: 1.15;
}

/* CSV Import: clearer workflow cards, one page scrollbar, and a stable control rail. */
#contentWindow[data-page-key="csv-import"] #csvImportPageRoot {
    padding-bottom: 18px;
}

#contentWindow[data-page-key="csv-import"] #csvImportPageRoot > .row {
    align-items: flex-start;
}

#contentWindow[data-page-key="csv-import"] #csvImportPageRoot .card {
    margin-bottom: 8px;
}

#contentWindow[data-page-key="csv-import"] #csvImportPageRoot .card-header {
    padding: 7px 9px;
    color: rgb(var(--agn-page-accent-rgb));
    border-bottom: 1px solid var(--agn-border);
    background: rgba(0,0,0,.16);
    font-weight: 750;
}

#contentWindow[data-page-key="csv-import"] #csvImportPageRoot .card-body {
    padding: 9px;
}

#contentWindow[data-page-key="csv-import"] #csvImportPageRoot .table-responsive {
    max-height: none !important;
    overflow-y: visible !important;
}

#contentWindow[data-page-key="csv-import"] #csvImportPageRoot .left-controls {
    max-height: calc(100dvh - 22px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Dispersions: inputs stay compact while result tabs remain the visual focus. */
#contentWindow[data-page-key="dispersions"] #dispersionPageRoot .disp-card {
    padding: 9px;
}

#contentWindow[data-page-key="dispersions"] #dispersionPageRoot .hdr,
#contentWindow[data-page-key="dispersions"] #dispersionPageRoot .disp-title {
    color: rgb(var(--agn-page-accent-rgb));
}

#contentWindow[data-page-key="dispersions"] #dispersionPageRoot .disp-lower-tabs {
    position: sticky;
    top: -8px;
    z-index: 8;
    padding-top: 4px;
    background: var(--agn-bg);
}

#contentWindow[data-page-key="dispersions"] #dispersionPageRoot .disp-lower-tab-panel {
    min-height: 0;
    max-height: none !important;
    overflow-y: visible !important;
}

/* Iron Picker: preserve its existing Static/Loft Fit model while clarifying regions. */
#contentWindow[data-page-key="iron-fit"] #ironPickerPageRoot .left-sheetbar {
    position: sticky;
    top: -8px;
    z-index: 8;
    padding: 5px 2px 0;
    background: var(--agn-bg);
}

#contentWindow[data-page-key="iron-fit"] #ironPickerPageRoot .slider-container,
#contentWindow[data-page-key="iron-fit"] #ironPickerPageRoot .slider-wrapper {
    padding: 7px;
}

#contentWindow[data-page-key="iron-fit"] #ironPickerPageRoot .table-container {
    max-height: none !important;
    overflow: hidden !important;
}

#contentWindow[data-page-key="iron-fit"] #ironPickerPageRoot .left-table-scroll {
    /* Use the available screen height instead of capping the table at 500px. */
    height: calc(90vh - 125px) !important;
    height: calc(90dvh - 125px) !important;
    min-height: 240px;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
}

#contentWindow[data-page-key="iron-fit"] #ironPickerPageRoot .left-sheetbar {
    flex-wrap: nowrap;
    overflow: visible;
}

#contentWindow[data-page-key="iron-fit"] #ironPickerPageRoot thead th {
    position: sticky;
    top: 0;
    z-index: 4;
}

/* Gapping: reinforce control/results separation and remove arbitrary internal heights. */
#contentWindow[data-page-key="bag-gapping"] #gappingEstimatorRoot .ge-panel,
#contentWindow[data-page-key="bag-gapping"] #gappingEstimatorRoot .ge-results-card,
#contentWindow[data-page-key="bag-gapping"] #gappingEstimatorRoot .ge-club-picker-card {
    border-color: var(--agn-border);
}

#contentWindow[data-page-key="bag-gapping"] #gappingEstimatorRoot .ge-panel-title,
#contentWindow[data-page-key="bag-gapping"] #gappingEstimatorRoot .ge-results-title {
    color: rgb(var(--agn-page-accent-rgb));
}

#contentWindow[data-page-key="bag-gapping"] #gappingEstimatorRoot .ge-row-list,
#contentWindow[data-page-key="bag-gapping"] #gappingEstimatorRoot .ge-chart-wrap,
#contentWindow[data-page-key="bag-gapping"] #gappingEstimatorRoot .ge-table-wrap {
    max-height: none !important;
}

/* Driver Fit: result space remains flexible; inputs are consistent with Iron Fit. */
#contentWindow[data-page-key="driver-fit"] #driverFitPageRoot .df-card {
    padding: 9px;
}

#contentWindow[data-page-key="driver-fit"] #driverFitPageRoot .table-container {
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: auto !important;
}

#contentWindow[data-page-key="driver-fit"] #driverFitPageRoot .slider-container {
    padding: 6px 8px;
    border: 1px solid var(--agn-border);
    border-radius: var(--agn-radius-sm);
    background: rgba(0,0,0,.12);
}

/* Ball Flight: input cards use shared hierarchy while chart/table retain trajectory colors. */
#contentWindow[data-page-key="ball-flight"] #trajectoryPageRoot .agn-block {
    padding: 8px;
}

#contentWindow[data-page-key="ball-flight"] #trajectoryPageRoot .agn-block-title {
    color: rgb(var(--agn-page-accent-rgb));
}

#contentWindow[data-page-key="ball-flight"] #trajectoryPageRoot .agn-unit-group {
    display: inline-flex;
    overflow: hidden;
    border: 1px solid var(--agn-border-strong);
    border-radius: var(--agn-radius-sm);
}

#contentWindow[data-page-key="ball-flight"] #trajectoryPageRoot .agn-unit-toggle {
    margin: 0;
    border: 0;
    border-radius: 0;
    transform: none;
}

#contentWindow[data-page-key="ball-flight"] #trajectoryPageRoot .agn-unit-toggle + .agn-unit-toggle {
    border-left: 1px solid var(--agn-border);
}

/* Modal consistency across the migrated workflow pages. */
.agn-page-root .agn-workflow-page .modal-content,
.agn-page-root .agn-workflow-page .agn-modal__panel {
    color: var(--agn-text);
    border: 1px solid var(--agn-border-strong);
    border-radius: var(--agn-radius-lg);
    background:
        radial-gradient(circle at 0 0, rgba(var(--agn-page-accent-rgb), .11), transparent 42%),
        #24262b;
    box-shadow: 0 18px 55px rgba(0,0,0,.48);
}

.agn-page-root .agn-workflow-page .modal-header,
.agn-page-root .agn-workflow-page .agn-modal__hdr {
    border-bottom-color: var(--agn-border);
}

/* Desktop data-table headers remain visible without creating another vertical scroller. */
@media (min-width: 761px) {
    .agn-page-root .agn-workflow-page .table-responsive > table > thead > tr > th,
    .agn-page-root .agn-workflow-page .table-container > table > thead > tr > th {
        position: sticky;
        top: 0;
        z-index: 3;
    }
}

@media (max-width: 900px) {
    .agn-page-root .agn-page-header {
        flex-direction: column;
    }

    #contentWindow[data-page-key="csv-import"] #csvImportPageRoot .left-controls {
        position: static;
        max-height: none;
        overflow-y: visible;
    }
}

@media (max-width: 760px) {
    .agn-page-root .agn-page-actions,
    .agn-page-root .agn-toolbar,
    .agn-page-root .agn-action-row {
        align-items: stretch;
    }

    .agn-page-root .agn-toolbar > .form-control,
    .agn-page-root .agn-toolbar > .form-select,
    .agn-page-root .agn-toolbar > select,
    .agn-page-root .agn-toolbar > input {
        flex: 1 1 150px;
    }
}


/* ======================================================================
   nav76 – Phase 3: analytics templates, heatmap consolidation and legacy
   fit-page isolation.
   ====================================================================== */

.agn-analytics-page,
.agn-heatmap-page,
.self-fit-page {
    width: 100%;
    min-width: 0;
    min-height: 100%;
    padding: 8px;
}

.agn-analytics-header {
    margin-bottom: 10px;
}

.agn-page-eyebrow {
    margin-bottom: 3px;
    color: rgb(var(--agn-page-accent-rgb));
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.agn-data-hint {
    display: inline-flex;
    max-width: 430px;
    padding: 7px 10px;
    color: var(--agn-text-muted);
    border: 1px solid var(--agn-border);
    border-radius: var(--agn-radius-sm);
    background: rgba(0,0,0,.15);
    font-size: .78rem;
    line-height: 1.35;
}

.agn-data-table-shell {
    width: 100%;
    min-width: 0;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scrollbar-gutter: stable;
    background:
        radial-gradient(circle at 0 0, rgba(var(--agn-page-accent-rgb), .08), transparent 32%),
        var(--agn-surface-1);
}

.agn-data-table-shell > table {
    min-width: 1040px;
}

.agn-data-table-shell thead th {
    top: 0;
    z-index: 5;
    white-space: nowrap;
}

.agn-data-table-shell tbody tr:nth-child(even) td {
    background-color: rgba(255,255,255,.018);
}

.agn-data-table-shell tbody tr:hover td {
    background-color: rgba(var(--agn-page-accent-rgb), .085);
}

.agn-heatmap-page.content-expanded {
    overflow: visible !important;
    padding: 8px !important;
    background: transparent !important;
}

.agn-comparison-grid {
    --bs-gutter-x: 10px;
    --bs-gutter-y: 10px;
}

.agn-comparison-card {
    height: 100%;
    position: relative;
    overflow: hidden;
    border-color: var(--agn-border) !important;
    background:
        radial-gradient(circle at 0 0, rgba(var(--agn-page-accent-rgb), .11), transparent 39%),
        var(--agn-surface-1) !important;
}

.agn-comparison-card .row-topbar {
    position: relative;
    z-index: 2;
    margin-bottom: 8px;
}

.agn-comparison-card .img-wrap,
.agn-comparison-card .image-wrap {
    box-shadow: none;
    background: rgba(0,0,0,.2);
}

.agn-heatmap-page .hm-page-tools,
.agn-heatmap-page .key-section {
    margin-top: 10px;
}

.self-fit-page.content-expanded {
    overflow: visible !important;
    padding: 8px !important;
}

.self-fit-page .agn-fit-section,
.self-fit-page .agn-fit-results {
    margin-bottom: 10px;
    padding: 12px;
}

.self-fit-page .agn-fit-section > .row:last-child,
.self-fit-page .agn-fit-section .form-group > :last-child {
    margin-bottom: 0;
}

.self-fit-page .form-group label {
    display: block;
    margin-bottom: 5px;
    color: var(--agn-text-muted);
    font-size: .78rem;
    font-weight: 700;
}

.self-fit-page .form-group p {
    margin: 5px 0 0;
    color: var(--agn-text-muted);
    font-size: .78rem;
}

.self-fit-page .form-group p span {
    color: rgb(var(--agn-page-accent-rgb));
    font-weight: 800;
}

.self-fit-page .center-table th {
    color: #151515;
    background: rgb(var(--agn-page-accent-rgb));
}

#driverSpinProfileRoot .gauge-card,
#driverSpinProfileRoot .card {
    border: 1px solid var(--agn-border);
    background:
        radial-gradient(circle at 0 0, rgba(var(--agn-page-accent-rgb), .09), transparent 38%),
        var(--agn-surface-1);
}

@media (max-width: 760px) {
    .agn-analytics-page,
    .agn-heatmap-page,
    .self-fit-page {
        padding: 5px;
    }

    .agn-data-table-shell > table {
        min-width: 920px;
    }

    .agn-data-hint {
        max-width: none;
        width: 100%;
    }
}


/* ========================================================================== 
   nav78 – Phase 4: overflow, responsive workspace and interaction hardening
   ========================================================================== */

/* Routed fragments never own the browser viewport. The shell remains the one
   page-level vertical scroller; tables may still scroll horizontally. */
#contentWindow .agn-page-root {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

#contentWindow[data-page-key="iron-data"] .table-container,
#contentWindow[data-page-key="driver-data"] .table-container,
#contentWindow[data-page-key="iron-radar"] .radar-card,
#contentWindow[data-page-key="iron-radar"] .chart-wrapper {
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
}

#contentWindow[data-page-key="iron-data"] .agn-data-table-shell,
#contentWindow[data-page-key="driver-data"] .agn-data-table-shell {
    overflow-x: auto !important;
    overflow-y: visible !important;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
}

/* CSV controls now participate in the page scroll instead of creating a
   second full-height vertical scrollbar. Keep them visible on wide screens. */
#contentWindow[data-page-key="csv-import"] #csvImportPageRoot .left-controls {
    max-height: none !important;
    overflow: visible !important;
}

@media (min-width: 1200px) {
    #contentWindow[data-page-key="csv-import"] #csvImportPageRoot .sticky-col {
        position: sticky;
        top: 8px;
        align-self: flex-start;
    }
}

/* Main dispersion tables use the page scroll. Only horizontal table overflow
   remains; modal/dialog content retains its own necessary scrolling. */
#contentWindow[data-page-key="dispersions"] #dispersionPageRoot .auto-table-wrap,
#contentWindow[data-page-key="dispersions"] #dispersionPageRoot .disp-table-wrap {
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
}

/* Radar uses available content width and a stable square chart instead of a
   fragment-level 100vh workspace. */
#contentWindow[data-page-key="iron-radar"] #radarPageRoot {
    padding-bottom: 16px;
}

#contentWindow[data-page-key="iron-radar"] .radar-card {
    min-width: 0;
}

#contentWindow[data-page-key="iron-radar"] .control-row {
    width: 100%;
    max-width: 680px;
}

#contentWindow[data-page-key="iron-radar"] .chart-wrapper {
    width: 100%;
    min-height: clamp(420px, 68dvh, 760px);
    aspect-ratio: 1 / 1;
}

#contentWindow[data-page-key="iron-radar"] #radarChart {
    width: 100% !important;
    height: 100% !important;
    max-width: 760px;
    max-height: 760px;
}

/* Admin tables remain practical data workspaces but no longer use unrelated
   hard-coded pixel heights. They scale to the active viewport. */
#contentWindow[data-page-key^="admin"] .admin-main-table-scroll,
#contentWindow[data-page-key^="admin"] .admin-payment-table-scroll {
    max-height: clamp(360px, 62dvh, 760px) !important;
    overflow: auto;
    overscroll-behavior: contain;
}

#contentWindow[data-page-key^="admin"] .admin-page-tabs {
    position: sticky;
    top: -8px;
    z-index: 12;
    padding-top: 6px;
    background: var(--agn-bg);
}

/* Consistent user feedback and keyboard focus for routed tools. */
.agn-page-root [aria-busy="true"] {
    cursor: progress;
}

.agn-page-root [aria-disabled="true"] {
    opacity: .58;
    cursor: not-allowed;
}

.agn-page-root [role="status"],
.agn-page-root [role="alert"] {
    border-radius: var(--agn-radius-sm);
}

.agn-page-root [role="tabpanel"][hidden] {
    display: none !important;
}

.agn-page-root button[aria-expanded]::after {
    transition: transform .16s ease;
}

@media (max-width: 760px) {
    .agn-page-root .agn-page-header {
        flex-direction: column;
        align-items: stretch;
        padding: 10px;
    }

    .agn-page-root .agn-page-actions {
        width: 100%;
    }

    .agn-page-root .agn-page-actions > .btn,
    .agn-page-root .agn-page-actions > button,
    .agn-page-root .agn-toolbar > .btn,
    .agn-page-root .agn-toolbar > button {
        min-height: 40px;
    }

    #contentWindow[data-page-key="iron-radar"] .control-row {
        align-items: stretch;
        flex-direction: column;
    }

    #contentWindow[data-page-key="iron-radar"] #addButton {
        min-height: 40px !important;
    }

    #contentWindow[data-page-key="iron-radar"] .chart-wrapper {
        min-height: min(88vw, 560px);
    }
}

/* ========================================================================== 
   nav79 – Compact left-aligned page framing
   ========================================================================== */

/* Tool pages should read from the left edge of the available workspace rather
   than appearing as a centered website panel inside the application shell. */
.agn-page-root {
    text-align: left;
}

.agn-page-root > .agn-card-enhanced,
.agn-page-root > .agn-surface,
.agn-page-root > .card,
.agn-page-root > .panel,
.agn-page-root > .section-card,
.agn-page-root > .content-card,
.agn-page-root > .dashboard-card,
.agn-page-root > .chart-card,
.agn-page-root > .tool-card {
    margin-left: 0;
    margin-right: 0;
}

/* Keep headers informative, but do not let them displace the primary tool. */
.agn-page-root .agn-page-header {
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 6px;
    padding: 7px 10px;
    min-height: 0;
    border-radius: var(--agn-radius-md);
}

.agn-page-root .agn-page-header > div:first-child {
    min-width: 0;
    text-align: left;
}

.agn-page-root .agn-page-eyebrow {
    margin: 0 0 2px;
    font-size: .66rem;
    line-height: 1.05;
}

.agn-page-root .agn-page-title {
    font-size: clamp(1.05rem, .98rem + .48vw, 1.48rem);
    line-height: 1.08;
}

.agn-page-root .agn-page-summary {
    max-width: 88ch;
    margin-top: 2px;
    font-size: .82rem;
    line-height: 1.25;
}

.agn-page-root .agn-page-actions {
    margin-left: auto;
    align-self: center;
}

/* Broad legacy wrappers that used auto margins should sit against the left
   edge when they are the principal page workspace. */
.agn-page-root > .container,
.agn-page-root > .container-fluid,
.agn-page-root > [class$="-page"] > .agn-card-enhanced:first-of-type {
    margin-left: 0;
}

@media (max-width: 720px) {
    .agn-page-root .agn-page-header {
        padding: 7px 8px;
    }

    .agn-page-root .agn-page-summary {
        font-size: .79rem;
    }
}

/* ========================================================================== 
   nav80 – Edge-efficient page density
   ========================================================================== */

/* Routed tools should use the available workspace. Keep only a minimal safety
   inset so borders are not clipped by the shell scrollbar. */
#contentWindow .agn-page-root {
    padding: 2px 3px 4px !important;
}

/* Remove decorative outer spacing between the page frame and its primary
   sections. Internal control padding remains intact for usability. */
.agn-page-root > .agn-page-header {
    margin: 0 0 3px !important;
    padding: 4px 8px !important;
    border-radius: 5px !important;
}

.agn-page-root > .agn-card-enhanced,
.agn-page-root > .agn-surface,
.agn-page-root > .card,
.agn-page-root > .panel,
.agn-page-root > .section-card,
.agn-page-root > .content-card,
.agn-page-root > .dashboard-card,
.agn-page-root > .chart-card,
.agn-page-root > .tool-card,
.agn-page-root > [class$="-page"] {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Common layout wrappers should not introduce broad gutters inside routed
   tools. More specific page CSS can retain padding where controls need it. */
.agn-page-root > .container,
.agn-page-root > .container-fluid {
    max-width: none !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
}

.agn-page-root .row {
    --bs-gutter-x: .35rem;
    --bs-gutter-y: .35rem;
}

.agn-page-root .agn-page-eyebrow {
    margin-bottom: 1px !important;
}

.agn-page-root .agn-page-title {
    margin: 0 !important;
}

.agn-page-root .agn-page-summary {
    margin: 1px 0 0 !important;
}

/* Radar-specific use of the full workspace. The chart is allowed to fill a
   rectangular viewport; Chart.js handles the radar geometry internally. */
#contentWindow[data-page-key="iron-radar"] #radarPageRoot {
    padding-bottom: 2px !important;
}

#contentWindow[data-page-key="iron-radar"] .radar-card {
    width: 100% !important;
    max-width: none !important;
    padding: 2px !important;
    border-radius: 6px !important;
}

#contentWindow[data-page-key="iron-radar"] .control-row {
    margin: 0 0 3px !important;
    padding: 4px !important;
}

#contentWindow[data-page-key="iron-radar"] #selectedModels {
    margin-top: 2px !important;
}

#contentWindow[data-page-key="iron-radar"] .chart-wrapper {
    width: 100% !important;
    min-height: max(460px, calc(100dvh - 150px)) !important;
    aspect-ratio: auto !important;
    margin-top: 3px !important;
    border-radius: 6px !important;
}

#contentWindow[data-page-key="iron-radar"] #radarChart {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
}

@media (max-width: 720px) {
    #contentWindow .agn-page-root {
        padding: 1px 2px 3px !important;
    }

    .agn-page-root > .agn-page-header {
        padding: 4px 6px !important;
    }

    #contentWindow[data-page-key="iron-radar"] .chart-wrapper {
        min-height: max(390px, calc(100dvh - 175px)) !important;
    }
}

/* ========================================================================== 
   nav81 – Viewport containment correction
   ========================================================================== */

/* Every routed page and direct child must remain inside the shell content
   column. Width:100% on an element with borders/padding is not sufficient when
   legacy descendants retain fixed or intrinsic widths. */
#contentWindow,
#contentWindow .agn-page-root,
#contentWindow .agn-page-root > *,
#contentWindow .agn-page-root .container,
#contentWindow .agn-page-root .container-fluid {
    min-width: 0 !important;
    max-width: 100% !important;
}

#contentWindow .agn-page-root {
    width: auto !important;
    overflow-x: clip;
}

/* Undo the nav80 rule that forcibly expanded every legacy page wrapper. Some
   wrappers calculate child dimensions from their own width, causing charts and
   grids to grow beyond the visible content area. */
.agn-page-root > .agn-card-enhanced,
.agn-page-root > .agn-surface,
.agn-page-root > .card,
.agn-page-root > .panel,
.agn-page-root > .section-card,
.agn-page-root > .content-card,
.agn-page-root > .dashboard-card,
.agn-page-root > .chart-card,
.agn-page-root > .tool-card,
.agn-page-root > [class$="-page"] {
    width: auto !important;
    max-width: 100% !important;
}

/* Wide content may scroll inside its own table/chart viewport, but it must not
   enlarge the application shell or create document-level horizontal overflow. */
.agn-page-root .table-responsive,
.agn-page-root .table-container,
.agn-page-root .chart-container,
.agn-page-root .chart-wrapper,
.agn-page-root canvas,
.agn-page-root svg {
    min-width: 0;
    max-width: 100%;
}

/* Radar uses a height-bounded square canvas. Letting Chart.js stretch a radar
   chart across a very wide rectangular canvas makes its radial labels and grid
   extend outside the visible area. */
#contentWindow[data-page-key="iron-radar"] .radar-card {
    width: auto !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

#contentWindow[data-page-key="iron-radar"] .chart-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: clamp(460px, calc(100dvh - 145px), 760px) !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    overflow: hidden !important;
}

#contentWindow[data-page-key="iron-radar"] #radarChart {
    width: min(100%, 760px) !important;
    height: min(100%, 760px) !important;
    max-width: 760px !important;
    max-height: 760px !important;
    aspect-ratio: 1 / 1 !important;
    flex: 0 1 auto;
}

@media (max-width: 820px) {
    #contentWindow[data-page-key="iron-radar"] .chart-wrapper {
        height: min(82vw, 620px) !important;
        min-height: 390px !important;
    }

    #contentWindow[data-page-key="iron-radar"] #radarChart {
        width: 100% !important;
        height: 100% !important;
    }
}


/* Shared chart workspace glow. Chart canvases remain transparent so the
   route-specific AGN accent wash is visible behind the plotted data. */
.agn-page-root .agn-chart-surface {
    --agn-chart-glow-opacity: .115;
    position: relative;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    border: 1px solid var(--agn-border);
    border-radius: var(--agn-radius-md);
    background-color: var(--agn-surface-1);
    background-image:
        radial-gradient(circle at 0 0,
            rgba(var(--agn-page-accent-rgb), var(--agn-chart-glow-opacity)) 0,
            rgba(var(--agn-page-accent-rgb), .045) 26%,
            transparent 50%),
        radial-gradient(circle at 50% 52%,
            rgba(255,255,255,.018) 0,
            transparent 58%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.agn-page-root .agn-chart-surface > canvas.agn-chart-canvas {
    position: relative;
    z-index: 1;
    max-width: 100%;
    background: transparent !important;
}

/* Radar benefits from a slightly broader wash because its plotted geometry
   occupies the middle of a large square workspace. */
#contentWindow[data-page-key="iron-radar"] .agn-chart-surface,
#contentWindow[data-page-key="driver-dashboard"] .agn-chart-surface:has(#driverRadarChart),
#contentWindow[data-page-key="driver-spin-profile"] .agn-chart-surface:has(#driverRadarChart) {
    --agn-chart-glow-opacity: .14;
    background-image:
        radial-gradient(circle at 0 0,
            rgba(var(--agn-page-accent-rgb), var(--agn-chart-glow-opacity)) 0,
            rgba(var(--agn-page-accent-rgb), .05) 28%,
            transparent 54%),
        radial-gradient(circle at 50% 50%,
            rgba(255,255,255,.025) 0,
            transparent 60%);
}

/* Avoid stacking a second border when an existing chart card already supplies it. */
.agn-page-root .chart-card.agn-chart-surface,
.agn-page-root .card.agn-chart-surface,
.agn-page-root .disp-card.agn-chart-surface,
.agn-page-root .df-card.agn-chart-surface {
    border-color: var(--agn-border);
}

/* nav100: mobile shell must use one scrolling model.
   This file loads after agn-shell.css, so the final override belongs here. */
@media (max-width: 720px) {
    html,
    body {
        width: 100% !important;
        height: auto !important;
        min-height: 100% !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .main-container {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 100dvh !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .content,
    #contentWindow {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 100dvh !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        scrollbar-gutter: auto !important;
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Lock only while the off-canvas menu is actually open. */
    html:has(body.agn-mobile-nav-open),
    body.agn-mobile-nav-open {
        height: 100% !important;
        overflow: hidden !important;
        overscroll-behavior: none !important;
        touch-action: none !important;
    }

    body:not(.agn-mobile-nav-open),
    body:not(.agn-mobile-nav-open) .main-container,
    body:not(.agn-mobile-nav-open) .content,
    body:not(.agn-mobile-nav-open) #contentWindow {
        touch-action: pan-y !important;
    }
}

/* ===== Iron Spin Profile ===== */
#contentWindow[data-page-key="iron-spin-profile"] { overflow-y:auto; }
.isp-page{padding:12px 14px 18px;color:#eef2f7;background:#090a0c;min-height:100%;}
.isp-header{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:12px;}
.isp-header h2{margin:0;font-size:1.55rem;font-weight:700;}.isp-sub{color:#9ca3af;font-size:.86rem;margin-top:2px;}
.isp-key{font-size:.74rem;color:#aeb4bd;white-space:nowrap}.isp-key span{display:inline-block;width:24px;height:5px;border-radius:4px;margin:0 5px 1px 10px}.isp-key-green{background:#36c75c}.isp-key-yellow{background:#e4b536}.isp-key-red{background:#e4473e}
.isp-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.isp-club{border:1px solid #34373d;border-radius:16px;background:#111317;overflow:hidden;min-width:0;}
.isp-select-row{height:52px;display:flex;align-items:center;gap:9px;padding:8px 10px;border-bottom:1px solid #2c2f34;}
.isp-slot{width:28px;height:28px;border-radius:7px;background:#d9a52c;color:#111;display:inline-flex;align-items:center;justify-content:center;font-weight:800}.isp-club[data-slot="2"] .isp-slot{background:#3e8ed9;color:#fff}
.isp-select{flex:1;min-width:0;background:#191c21;color:#f3f4f6;border:1px solid #444951;border-radius:8px;padding:6px 8px;font-size:.93rem}
.isp-visual-row{display:grid;grid-template-columns:118px 1fr;min-height:470px;}
.isp-lf-wrap{border-right:1px solid #2b2f35;padding:18px 10px 15px;position:relative;display:flex;flex-direction:column;align-items:center;}
.isp-lf-title{align-self:stretch;font-size:.77rem;font-weight:700;line-height:1.35;margin-bottom:17px}.isp-lf-high,.isp-lf-low{font-size:.7rem;color:#b5bac2}.isp-lf-high{margin-bottom:7px}.isp-lf-low{margin-top:7px}
.isp-lf-gauge{position:relative;width:54px;height:280px}.isp-lf-track{position:absolute;left:11px;top:0;width:16px;height:100%;border-radius:10px;background:linear-gradient(to top,#e43d3d 0%,#e7b937 50%,#42c85b 100%)}
.isp-lf-gauge:after{content:"";position:absolute;left:32px;top:0;height:100%;width:12px;background:repeating-linear-gradient(to bottom,#5e636b 0 1px,transparent 1px 7px);opacity:.65}
.isp-lf-avg{position:absolute;left:5px;width:44px;height:2px;background:#fff;opacity:.85;z-index:2}.isp-lf-avg:after{content:"AVG";position:absolute;left:47px;top:-7px;font-size:.58rem;color:#cfd3d8}
.isp-lf-marker{position:absolute;left:0;width:32px;height:5px;background:#f4f4f5;border-radius:5px;z-index:3;transform:translateY(50%)}.isp-lf-marker span{position:absolute;left:30px;top:-5px;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:10px solid #d9a52c}
.isp-club[data-slot="2"] .isp-lf-marker span{border-left-color:#3e8ed9}.isp-lf-value{font-size:1rem;font-weight:800;margin-top:8px;color:#f0bf3c}.isp-club[data-slot="2"] .isp-lf-value{color:#55a4ee}
.isp-cross-wrap{position:relative;min-width:0;overflow:hidden;padding:24px 16px 20px;}
.isp-cross{position:absolute;left:50%;top:50%;width:64%;height:64%;transform:translate(-50%,-50%)}
.isp-vbar,.isp-hbar{position:absolute;border-radius:8px;box-shadow:0 0 10px rgba(0,0,0,.24)}.isp-vbar{width:9px;height:78%;left:50%;top:11%;transform:translateX(-50%);transition:height .25s ease,top .25s ease,background .25s ease}.isp-hbar{height:9px;width:78%;left:11%;top:50%;transform:translateY(-50%);transition:width .25s ease,left .25s ease,background .25s ease}
.isp-vcenter{position:absolute;left:50%;top:4%;height:92%;border-left:1px dashed rgba(255,255,255,.5)}.isp-hcenter{position:absolute;top:50%;left:4%;width:92%;border-top:1px dashed rgba(255,255,255,.5)}
.isp-bias-dot{position:absolute;left:50%;top:50%;width:28px;height:28px;border-radius:50%;background:#d6a435;border:2px solid #fff;box-shadow:0 0 0 3px rgba(214,164,53,.18);z-index:5;transition:transform .25s ease}.isp-club[data-slot="2"] .isp-bias-dot{background:#3f8dd4;box-shadow:0 0 0 3px rgba(63,141,212,.2)}
.isp-axis-label{position:absolute;font-size:.84rem;font-weight:700;color:#f1f3f5}.isp-high-label{top:14px;left:50%;transform:translateX(-50%)}.isp-low-label{bottom:13px;left:50%;transform:translateX(-50%)}.isp-toe-label{left:12px;top:49%;transform:translateY(-50%)}.isp-heel-label{right:12px;top:49%;transform:translateY(-50%)}
.isp-value{position:absolute;font-size:.72rem;line-height:1.45;color:#d4d8de;min-width:92px}.isp-value b{color:#8f97a2;font-weight:600}.isp-value span{font-weight:700;color:#f5f6f7}.isp-high-value{top:43px;left:54%}.isp-low-value{bottom:41px;left:54%}.isp-toe-value{left:14px;top:55%}.isp-heel-value{right:14px;top:55%;text-align:right}
.isp-response{position:absolute;font-size:.65rem;color:#aeb4bc;background:#191c20;border:1px solid #343840;border-radius:999px;padding:3px 7px}.isp-v-response{left:50%;top:9%;transform:translateX(-50%)}.isp-h-response{left:50%;bottom:9%;transform:translateX(-50%)}
@media(max-width:1050px){.isp-grid{grid-template-columns:1fr}.isp-visual-row{min-height:430px}.isp-key{display:none}}
@media(max-width:600px){.isp-visual-row{grid-template-columns:95px 1fr}.isp-value{font-size:.65rem;min-width:78px}.isp-cross{width:72%;height:60%}}

/* Iron Spin Profile: two independent response crosses per club */
.isp-dual-charts{display:grid;grid-template-rows:1fr 1fr;min-height:620px;}
.isp-metric-chart{position:relative;min-height:310px;border-bottom:1px solid #2b2f35;}
.isp-metric-chart:last-child{border-bottom:0;}
.isp-chart-title{position:absolute;left:14px;top:12px;z-index:6;font-size:.82rem;font-weight:800;color:#f1f3f5;}
.isp-chart-sub{position:absolute;left:14px;top:31px;z-index:6;font-size:.66rem;color:#8f97a2;}
.isp-metric-chart .isp-cross-wrap{position:absolute;inset:0;min-width:0;overflow:hidden;padding:44px 16px 18px;}
.isp-metric-chart .isp-cross{width:58%;height:58%;}
.isp-metric-chart .isp-high-label{top:48px;}
.isp-metric-chart .isp-low-label{bottom:12px;}
.isp-metric-chart .isp-toe-label{left:12px;top:52%;}
.isp-metric-chart .isp-heel-label{right:12px;top:52%;}
.isp-metric-chart .isp-high-value{top:66px;left:55%;}
.isp-metric-chart .isp-low-value{bottom:32px;left:55%;}
.isp-metric-chart .isp-toe-value{left:14px;top:60%;}
.isp-metric-chart .isp-heel-value{right:14px;top:60%;text-align:right;}
.isp-metric-chart .isp-bias-dot{width:22px;height:22px;}
@media(max-width:1050px){.isp-dual-charts{min-height:580px}.isp-metric-chart{min-height:290px}}
@media(max-width:600px){.isp-dual-charts{min-height:540px}.isp-metric-chart{min-height:270px}.isp-metric-chart .isp-cross{width:64%;height:54%}}

/* Iron Spin Profile: golfer-facing club summary */
.isp-club-summary{border-top:1px solid #2b2f35;padding:12px 15px 14px;background:#0e1013;}
.isp-summary-title{font-size:.76rem;font-weight:800;color:#d9a52c;margin-bottom:5px;}
.isp-club[data-slot="2"] .isp-summary-title{color:#55a4ee;}
.isp-summary-text{font-size:.78rem;line-height:1.48;color:#c3c8d0;}