/* =========================================================
   GLOBAL
========================================================= */

* {
    box-sizing: border-box;
}


:root {
    --navy: #071a2c;
    --navy2: #0e3152;
    --blue: #168eb8;

    --bg: #f2f5f8;
    --line: #d8e1e8;
    --muted: #687789;

    --green: #279b83;
    --amber: #daa83a;
    --red: #d45c52;

    --white: #ffffff;
    --panel: #f6f8fa;
    --panel2: #f8fafb;
}


/* =========================================================
   BODY
========================================================= */

body {
    margin: 0;

    color: #182536;
    background: var(--bg);

    font:
        14px/1.4
        "Segoe UI",
        Arial,
        sans-serif;
}


/* =========================================================
   WEBSITE HEADER
========================================================= */

.hero {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 30px;

    padding:
        34px
        max(
            22px,
            calc((100vw - 1320px) / 2)
        );

    color: var(--white);

    background:
        linear-gradient(
            120deg,
            var(--navy),
            var(--navy2)
        );
}


.hero h1 {
    margin: 0;

    font-size: 46px;
    line-height: 1.1;
}


.hero p {
    margin:
        8px
        0
        0;

    color: #d6e4ef;
}


.eyebrow {
    margin-bottom: 6px !important;

    color: #74e3ff !important;

    font-size: 12px;
    font-weight: 900;

    letter-spacing: .16em;
}


/* =========================================================
   MAIN APPLICATION SHELL
========================================================= */

.shell {
    width:
        min(
            1320px,
            calc(100% - 26px)
        );

    margin:
        20px
        auto
        45px;
}


/* =========================================================
   CARDS
========================================================= */

.card {
    margin-bottom: 15px;

    padding: 19px;

    background: var(--white);

    border:
        1px solid
        var(--line);

    border-radius: 15px;

    box-shadow:
        0
        10px
        28px
        rgba(7, 26, 44, .08);
}


.card h2 {
    margin:
        0
        0
        13px;

    color: var(--navy);

    font-size: 20px;
}


/* =========================================================
   GRID
========================================================= */

.grid {
    display: grid;

    gap: 11px;
}


.grid.three {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}


.grid.two {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}


.grid.one {
    grid-template-columns:
        1fr;
}


/* =========================================================
   FORM CONTROLS
========================================================= */

label {
    display: flex;

    flex-direction: column;

    gap: 5px;

    min-width: 0;

    color: #405367;

    font-size: 12px;
    font-weight: 800;

    text-transform: uppercase;
}


input,
select,
textarea {
    width: 100%;

    padding: 9px;

    border:
        1px solid
        #bac8d3;

    border-radius: 8px;

    color: #182536;
    background: var(--white);

    font: inherit;

    text-transform: none;
}


input,
select {
    min-height: 40px;
}


input[readonly] {
    color: #4f6070;

    background: #eef3f6;

    font-weight: 700;
}


textarea {
    min-height: 95px;

    resize: vertical;
}


input:focus,
select:focus,
textarea:focus {
    outline:
        2px solid
        rgba(24, 168, 223, .18);

    border-color: var(--blue);
}


.file-help {
    margin:
        8px
        0
        0;

    color: var(--muted);

    font-size: 12px;
}


/* =========================================================
   DATA ACTIONS
========================================================= */

.data-actions {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 8px;

    margin-top: 10px;
}


/* =========================================================
   BUTTONS
========================================================= */

.btn {
    min-height: 39px;

    padding:
        9px
        15px;

    border:
        1px solid
        var(--navy2);

    border-radius: 8px;

    color: var(--white);
    background: var(--navy2);

    font-weight: 800;

    cursor: pointer;

    transition:
        background .15s ease,
        color .15s ease,
        border-color .15s ease,
        opacity .15s ease;
}


.btn.alt {
    color: var(--navy2);

    background: var(--white);
}


.btn:hover:not(:disabled) {
    border-color: var(--blue);

    filter: brightness(1.04);
}


.btn:disabled {
    opacity: .45;

    cursor: not-allowed;
}


/* =========================================================
   STATUS
========================================================= */

.status {
    display: inline-block;

    padding: 9px;

    border:
        1px solid
        #c7dce8;

    border-radius: 8px;

    color: #27536b;
    background: #ecf8fc;
}


.status.error {
    color: #a1261b;

    border-color: #efc6c0;

    background: #fff2f0;
}


.status.success {
    color: #067647;

    border-color: #a7e0c8;

    background: #ecfdf3;
}


/* =========================================================
   BENCHMARK HELP
========================================================= */

.benchmark-help {
    margin-top: 14px;

    padding:
        12px
        14px;

    border-left:
        4px solid
        var(--blue);

    border-radius: 7px;

    background: #f2f9fc;
}


.benchmark-help strong {
    color: var(--navy);
}


.benchmark-help p {
    margin:
        4px
        0
        0;

    color: #526578;
}


/* =========================================================
   SECTION HEADERS
========================================================= */

.rowhead,
.preview-heading {
    display: flex;

    justify-content: space-between;
    align-items: flex-start;

    gap: 20px;
}


.rowhead h2,
.rowhead p,
.preview-heading h2,
.preview-heading p {
    margin: 0;
}


.rowhead p,
.preview-heading p {
    margin-top: 4px;

    color: var(--muted);
}


.pill {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding:
        6px
        9px;

    border-radius: 999px;

    color: #15536f;
    background: #e6f6fb;

    font-size: 12px;
    font-weight: 900;

    white-space: nowrap;
}


/* =========================================================
   METRIC HEADER ACTIONS
========================================================= */

.metric-header-actions {
    display: flex;

    align-items: center;

    gap: 8px;
}


.metric-reset-btn {
    min-height: 30px;

    padding:
        5px
        10px;

    border-color: #b9cbd6;

    color: var(--navy2);
    background: var(--white);

    font-size: 11px;
}


.metric-reset-btn:hover {
    color: #087ba8;

    border-color: var(--blue);

    background: #f1f9fc;
}


/* =========================================================
   METRIC PICKER
========================================================= */

.picker {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 7px;

    max-height: 430px;

    overflow: auto;

    margin-top: 15px;

    padding-right: 4px;
}


.picker label {
    flex-direction: row;

    align-items: center;

    gap: 7px;

    padding: 7px;

    border:
        1px solid
        var(--line);

    border-radius: 7px;

    background: #fafcfd;

    font-size: 11px;

    text-transform: none;

    cursor: pointer;
}


.picker label:hover {
    border-color: #9bcddd;

    background: #f3fafc;
}


.picker input {
    width: 16px;
    height: 16px;
    min-height: 16px;

    flex:
        0
        0
        16px;

    margin: 0;

    accent-color: var(--blue);
}


/* =========================================================
   STANDARD CHECKBOX
========================================================= */

.check {
    display: flex;

    flex-direction: row;

    align-items: center;

    gap: 8px;

    padding: 7px;

    border:
        1px solid
        var(--line);

    border-radius: 7px;

    background: #f8fafb;

    text-transform: none;
}


.check input {
    width: 16px;
    height: 16px;
    min-height: 16px;

    flex:
        0
        0
        16px;

    margin: 0;

    accent-color: var(--blue);
}


.hidden {
    display: none !important;
}


/* =========================================================
   STAR RATING INPUT
========================================================= */

.rating-field {
    padding: 10px;

    border:
        1px solid
        var(--line);

    border-radius: 9px;
}


.rating-field legend {
    color: #405367;

    font-size: 12px;
    font-weight: 800;

    text-transform: uppercase;
}


.stars-input {
    display: flex;

    flex-wrap: wrap;

    gap: 4px;

    margin-top: 4px;
}


.star-btn {
    width: auto;

    padding: 0;

    border: 0;

    color: #aeb9c4;
    background: transparent;

    font-size: 31px;
    line-height: 1;

    cursor: pointer;
}


.star-btn.active,
.star-btn:hover {
    color: #f0b323;
}


.star-btn:focus-visible {
    outline:
        2px solid
        var(--blue);

    outline-offset: 2px;
}


.rating-field output {
    display: block;

    margin-top: 6px;

    color: var(--muted);

    font-size: 12px;
}


/* =========================================================
   MAIN ACTIONS
========================================================= */

.actions {
    display: flex;

    flex-wrap: wrap;

    gap: 9px;

    margin-top: 13px;
}


/* =========================================================
   PREVIEW SECTION
========================================================= */

.preview-section {
    margin:
        25px
        0
        50px;
}


.preview-heading {
    align-items: flex-end;

    margin-bottom: 18px;
}


.preview-heading h2 {
    color: var(--navy);

    font-size: 25px;
}


.preview-workspace {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        340px;

    gap: 24px;

    align-items: start;
}


.preview-pages {
    min-width: 0;
}


/* =========================================================
   VISUAL CONTROL PANEL
========================================================= */

.visual-control-panel {
    position: sticky;

    top: 20px;

    width: 100%;

    padding: 16px;

    border:
        1px solid
        var(--line);

    border-radius: 14px;

    background: var(--white);

    box-shadow:
        0
        8px
        24px
        rgba(7, 26, 44, .10);
}


.visual-control-header {
    margin-bottom: 16px;

    padding-bottom: 12px;

    border-bottom:
        1px solid
        var(--line);
}


.visual-control-header h3 {
    margin:
        3px
        0
        0;

    color: var(--navy);

    font-size: 16px;
}


.visual-eyebrow {
    color: var(--blue);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .14em;
}


/* =========================================================
   VISUAL CONTROL TWO COLUMN LAYOUT
========================================================= */

.visual-controls-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        120px;

    gap: 18px;

    align-items: start;
}


.visual-sliders {
    min-width: 0;
}


.visual-control-group {
    margin-bottom: 16px;
}


.visual-control-group:last-child {
    margin-bottom: 0;
}


.control-title {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 8px;

    margin-bottom: 6px;
}


.control-title label {
    display: block;

    margin: 0;

    font-size: 10px;
    line-height: 1.2;
}


.control-title output {
    flex:
        0
        0
        auto;

    min-width: 34px;

    padding:
        2px
        5px;

    border-radius: 5px;

    color: #087ba8;
    background: #e9f7fc;

    font-size: 10px;
    font-weight: 900;

    text-align: center;
}


/* =========================================================
   VISUAL RANGE SLIDERS
========================================================= */

.visual-range {
    display: block;

    width: 100%;

    height: 18px;
    min-height: 18px;

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;

    accent-color: var(--blue);

    cursor: pointer;
}


.visual-range:focus {
    outline: none;
}


/* Chrome / Edge */

.visual-range::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;

    border-radius: 999px;

    background: #d2dce3;
}


.visual-range::-webkit-slider-thumb {
    width: 14px;
    height: 14px;

    margin-top: -5px;

    border: 0;
    border-radius: 50%;

    background: var(--blue);

    -webkit-appearance: none;

    cursor: grab;
}


.visual-range:active::-webkit-slider-thumb {
    cursor: grabbing;
}


/* Firefox */

.visual-range::-moz-range-track {
    width: 100%;
    height: 4px;

    border-radius: 999px;

    background: #d2dce3;
}


.visual-range::-moz-range-progress {
    height: 4px;

    border-radius: 999px;

    background: var(--blue);
}


.visual-range::-moz-range-thumb {
    width: 14px;
    height: 14px;

    border: 0;
    border-radius: 50%;

    background: var(--blue);

    cursor: grab;
}


/* =========================================================
   VISUAL TOGGLE SWITCHES
========================================================= */

.visual-toggles {
    display: flex;

    flex-direction: column;

    gap: 14px;

    padding-left: 14px;

    border-left:
        1px solid
        var(--line);
}


.visual-switch {
    display: grid;

    grid-template-columns:
        30px
        minmax(0, 1fr);

    gap: 7px;

    align-items: center;

    width: 100%;

    margin: 0;
    padding: 0;

    border: 0;

    color: #405367;
    background: transparent;

    font-size: 10px;
    font-weight: 700;

    line-height: 1.2;

    text-transform: none;

    cursor: pointer;
}


.visual-switch input {
    position: absolute;

    width: 1px;
    height: 1px;
    min-height: 1px;

    margin: 0;
    padding: 0;

    opacity: 0;

    pointer-events: none;
}


.switch-control {
    position: relative;

    display: block;

    width: 30px;
    height: 17px;

    border-radius: 999px;

    background: #cbd5dc;

    transition:
        background
        .15s
        ease;
}


.switch-control::after {
    content: "";

    position: absolute;

    top: 3px;
    left: 3px;

    width: 11px;
    height: 11px;

    border-radius: 50%;

    background: var(--white);

    box-shadow:
        0
        1px
        3px
        rgba(0, 0, 0, .25);

    transition:
        transform
        .15s
        ease;
}


.visual-switch input:checked + .switch-control {
    background: var(--blue);
}


.visual-switch input:checked + .switch-control::after {
    transform:
        translateX(13px);
}


.visual-switch input:focus-visible + .switch-control {
    outline:
        2px solid
        var(--blue);

    outline-offset: 2px;
}


.switch-label {
    min-width: 0;
}


.visual-explanation {
    margin-top: 16px;

    padding:
        9px
        10px;

    border-radius: 7px;

    color: #596c7a;
    background: #f4f8fa;

    font-size: 9px;
}


.visual-explanation strong {
    color: var(--navy);
}


.visual-explanation p {
    margin:
        3px
        0
        0;

    line-height: 1.4;
}


/* =========================================================
   A4 REPORT PAGE
========================================================= */

.report-page {
    position: relative;

    width: 210mm;
    height: 297mm;

    margin:
        0
        auto
        14px;

    padding: 9mm;

    overflow: hidden;

    background: var(--white);

    box-shadow:
        0
        15px
        38px
        rgba(0, 0, 0, .13);

    font-family:
        Arial,
        sans-serif;
}


/* =========================================================
   REPORT HEADER
========================================================= */

.rhead {
    display: grid;

    grid-template-columns:
        27mm
        1fr
        35mm;

    gap: 5mm;

    align-items: center;

    height: 39mm;

    padding-bottom: 3mm;

    border-bottom:
        2px solid
        var(--navy2);
}


.rhead.compact {
    height: 36mm;
}


.rhead h1 {
    margin:
        1mm
        0;

    color: var(--navy);

    font-size: 22px;
}


.rhead p {
    margin: 0;

    color: #586675;
}


.rhead small {
    color: #168bbb;

    font-weight: 900;

    letter-spacing: .15em;
}


/* =========================================================
   REPORT IMAGES
========================================================= */

.imagebox {
    display: grid;

    place-items: center;

    height: 31mm;

    overflow: hidden;

    border:
        1px solid
        #cbd5df;

    border-radius: 3mm;

    color: #7b8794;

    background: #f3f6f8;
}


.imagebox img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.imagebox.logo img {
    object-fit: contain;
}


/* =========================================================
   REPORT SECTION HEADINGS
========================================================= */

.report-page h3 {
    margin:
        0
        0
        1mm;

    color: var(--navy2);

    font-size: 7.5px;

    text-transform: uppercase;
}


/* =========================================================
   PAGE 1 HEADER AND SUMMARY
========================================================= */
#page1 .rhead {
    grid-template-columns: 27mm minmax(0, 1fr) 45mm;
    height: 48mm;
    gap: 5mm;
}

#page1 #photo1 {
    height: 43mm;
}

#page1 #photo1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page1-summary-row {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(30mm, 1.35fr) minmax(31mm, 1.45fr);
    gap: 1px;
    min-height: 31mm;
    margin: 3.2mm 0 3mm;
    background: #d7e1e8;
    border: 1px solid #d7e1e8;
}

.player-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 1px;
    min-width: 0;
    background: #d7e1e8;
}

.summary-item {
    min-width: 0;
    min-height: 14.5mm;
    padding: 2mm 1.35mm;
    overflow: hidden;
    background: #f7f9fb;
}

.summary-item span {
    display: block;
    margin-bottom: 1.1mm;
    color: #657686;
    font-size: 4.6px;
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
}

.summary-item b {
    display: block;
    overflow-wrap: anywhere;
    color: #142536;
    font-size: 6.6px;
    font-weight: 800;
    line-height: 1.2;
}

.summary-item small {
    display: block;
    margin-top: .5mm;
    overflow-wrap: anywhere;
    color: #7d8c98;
    font-size: 4.2px;
    line-height: 1.15;
}

.summary-recommendation,
.summary-rating {
    height: 100%;
    padding: 2.2mm 1.8mm;
    color: var(--white);
}

.summary-recommendation {
    background: var(--navy);
}

.summary-rating {
    background: linear-gradient(135deg, var(--navy), var(--navy2));
}

.summary-recommendation span,
.summary-rating span {
    color: #9bdcf3;
}

.summary-recommendation b,
.summary-rating b {
    color: var(--white);
    font-size: 6.3px;
}

.summary-stars {
    margin: .6mm 0 1mm;
    color: #f0b323;
    font-size: 10.5px;
    line-height: 1;
}

/* =========================================================
   PAGE 1 MAIN DATA AREA
========================================================= */
.page1-main {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 3mm;
    height: 101mm;
}

.pizza-panel,
.performance-panel {
    min-width: 0;
}

.performance-panel {
    display: flex;
    flex-direction: column;
    gap: 1.4mm;
    min-height: 0;
}

.selected-metrics-box {
    flex: 0 0 auto;
    margin: 0;
    padding: 1.8mm;
}

.selected-pizza-attributes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8mm;
    max-height: 28mm;
    overflow: hidden;
}

.selected-pizza-attribute {
    display: flex;
    align-items: center;
    gap: 1mm;
    min-width: 0;
    padding: 1mm 1.1mm;
    border: 1px solid #dce5eb;
    border-radius: 1.4mm;
    color: #26394b;
    background: #fff;
    font-size: 4.8px;
    font-weight: 700;
    line-height: 1.1;
}

.selected-pizza-attribute::before {
    content: "";
    width: 1.7mm;
    height: 1.7mm;
    flex: 0 0 1.7mm;
    border-radius: 50%;
    background: var(--blue);
}

.selected-pizza-attribute span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.performance-panel .performance-box {
    flex: 1 1 0;
    min-height: 0;
    margin: 0;
    overflow: hidden;
}

.performance-panel .stat-row {
    grid-template-columns: minmax(0, 1fr) 8mm 15mm;
    gap: .6mm;
    font-size: 4.9px;
}

.performance-panel .stat-item {
    margin: .42mm 0;
}

.performance-panel .track {
    height: 1.6mm;
}

/* =========================================================
   PIZZA PLOT
========================================================= */

.pizza {
    height: 82mm;
}


.pizza svg {
    width: 100%;
    height: 100%;

    overflow: visible;
}


.bench {
    margin-top: .8mm;

    padding:
        1mm
        1.4mm;

    border-radius: 1.5mm;

    color: #536b7b;

    background: #f4f8fa;

    font-size: 5.4px;

    text-align: center;
}


/* =========================================================
   GENERIC REPORT BOX
========================================================= */

.box {
    margin-bottom: 1.8mm;

    padding: 2.1mm;

    border-radius: 2mm;

    background: var(--panel);
}


.performance-box {
    min-height: 47mm;
}


/* =========================================================
   STATISTIC ROWS
========================================================= */

.stat-item {
    margin: .65mm 0;
}


.stat-row {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        12mm
        20mm;

    gap: 1mm;

    align-items: center;

    font-size: 5.9px;
}


.stat-row span {
    min-width: 0;

    overflow-wrap: anywhere;
}


.stat-row b,
.stat-row em {
    text-align: right;
}


.stat-row em {
    font-style: normal;
    font-weight: 900;
}


.track {
    height: 2.1mm;

    margin-top: .3mm;

    overflow: hidden;

    border-radius: 99px;

    background: #e8eef2;
}


.fill {
    height: 100%;

    border-radius: 99px;
}


/* =========================================================
   PAGE 1 DATA SNAPSHOT
========================================================= */

.snapshot-section {
    height: 27mm;

    margin:
        1.8mm
        0
        2mm;

    padding: 2mm;

    border-radius: 2.5mm;

    background: var(--panel);
}


.snapshot-section h3 {
    margin-bottom: 1.3mm;
}


.snapshot-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 1.8mm;
}


.snapshot-card {
    min-width: 0;

    padding:
        1.8mm
        2mm;

    border:
        1px solid
        #dce5eb;

    border-radius: 2mm;

    background: var(--white);
}


.snapshot-card b {
    display: block;

    color: var(--blue);

    font-size: 12px;
    line-height: 1;
}


.snapshot-card span {
    display: block;

    margin-top: 1mm;

    color: var(--navy);

    font-size: 5.8px;
    font-weight: 900;

    line-height: 1.1;

    text-transform: uppercase;
}


.snapshot-card small {
    display: block;

    margin-top: .5mm;

    color: #7b8996;

    font-size: 4.7px;
    line-height: 1.15;
}


/* =========================================================
   PAGE 1 LOWER SUMMARY
========================================================= */

.data-bottom {
    display: grid;

    grid-template-columns:
        .95fr
        1.1fr
        1.25fr;

    gap: 2mm;

    height: 61mm;
}


.data-bottom .box {
    height: 100%;

    margin-bottom: 0;

    overflow: hidden;
}


/* =========================================================
   PERCENTILE DISTRIBUTION
========================================================= */

.distribution-row {
    display: grid;

    grid-template-columns:
        19mm
        1fr
        6mm;

    align-items: center;

    gap: 1mm;

    margin:
        1.05mm
        0;

    font-size: 5.9px;
}


.distribution-row .track {
    margin: 0;
}


/* =========================================================
   STATISTICAL STRENGTH CARDS
========================================================= */

.strength-grid {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 1.25mm;
}


.strength-card {
    min-height: 21.5mm;

    padding: 1.7mm;

    border:
        1px solid
        #dce5eb;

    border-radius: 1.7mm;

    background: var(--white);
}


.strength-card strong {
    display: block;

    color: var(--blue);

    font-size: 10px;
    line-height: 1;
}


.strength-card span {
    display: block;

    margin-top: .9mm;

    overflow-wrap: anywhere;

    color: var(--navy);

    font-size: 5.4px;
    font-weight: 800;

    line-height: 1.15;
}


.strength-card small {
    display: block;

    margin-top: .7mm;

    color: #778692;

    font-size: 4.8px;
    line-height: 1.15;
}


/* =========================================================
   DEVELOPMENT
========================================================= */

.development-copy {
    font-size: 6.2px;

    line-height: 1.3;

    white-space: pre-wrap;
}


.dev-section-title {
    margin:
        .9mm
        0
        .45mm;

    color: #496478;

    font-size: 5.5px;
    font-weight: 900;

    text-transform: uppercase;
}


.dev-columns {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 1.3mm;
}


.dev-columns .stat-row {
    grid-template-columns:
        minmax(0, 1fr)
        9mm
        17mm;

    font-size: 5.2px;
}


.dev-columns .track {
    height: 1.8mm;
}


.dev-comment {
    margin-top: .9mm;

    padding-top: .9mm;

    border-top:
        1px solid
        #dce4ea;

    color: #31475a;

    font-size: 5.8px;

    line-height: 1.25;

    white-space: pre-wrap;
}


/* =========================================================
   FOUR CATEGORY PROFILE
   TEMPORARILY HIDDEN
========================================================= */

#categoryProfileBox,
#categoryScores {
    display: none !important;
}


/* =========================================================
   PAGE 2 RECRUITMENT SUMMARY
========================================================= */

.decision-grid {
    display: grid;

    grid-template-columns:
        1.2fr
        1.1fr
        .75fr
        1.35fr;

    gap: 3mm;

    margin:
        5mm
        0
        4mm;
}


.decision-grid.no-confidence {
    grid-template-columns:
        1.15fr
        1.05fr
        1.3fr;
}


.decision {
    min-height: 27mm;

    padding: 4mm;

    border-radius: 3mm;

    color: var(--white);

    background: var(--navy);
}


.decision span {
    display: block;

    margin-bottom: 2mm;

    color: #9bdcf3;

    font-size: 6.2px;
    font-weight: 800;

    letter-spacing: .04em;

    text-transform: uppercase;
}


.decision b {
    display: block;

    margin: 0;

    color: var(--white);

    font-size: 9px;

    line-height: 1.35;
}


.rating-card {
    background:
        linear-gradient(
            135deg,
            var(--navy),
            var(--navy2)
        );
}


.report-stars {
    margin:
        1mm
        0
        1.5mm;

    color: #f0b323;

    font-size: 18px;

    line-height: 1;

    letter-spacing: .5px;
}


/* =========================================================
   PAGE 2 ASSESSMENTS
========================================================= */

.assessment-grid {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 4mm;

    margin-top: 0;
}


.assessment {
    height: 65mm;

    padding: 4mm;

    overflow: hidden;

    border:
        1px solid
        #dbe4ea;

    border-radius: 3mm;

    background: var(--panel2);
}


.assessment p {
    margin: 0;

    overflow-wrap: anywhere;

    font-size: 9px;

    line-height: 1.5;

    white-space: pre-wrap;
}


.other-comments {
    height: 53mm;

    margin-top: 4mm;
}


/* =========================================================
   REPORT FOOTER
========================================================= */

.report-page footer {
    position: absolute;

    left: 9mm;
    right: 9mm;
    bottom: 7mm;

    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 4mm;

    padding-top: 2mm;

    border-top:
        1px solid
        #dce4ea;

    color: #6c7785;

    font-size: 6px;
}


/* =========================================================
   SITE FOOTER
========================================================= */

.sitefoot {
    padding: 25px;

    color: var(--muted);

    text-align: center;
}


/* =========================================================
   RESPONSIVE - TABLET / NARROW DESKTOP
========================================================= */

@media (max-width: 1150px) {

    .preview-workspace {
        grid-template-columns: 1fr;
    }


    .visual-control-panel {
        position: static;
    }


    .visual-controls-layout {
        grid-template-columns:
            minmax(0, 1fr)
            200px;
    }

}


/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media (max-width: 900px) {

    .grid.three,
    .grid.two {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .picker {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .preview-heading {
        align-items: flex-start;
    }

}


/* =========================================================
   RESPONSIVE - SMALL TABLET
========================================================= */

@media (max-width: 650px) {

    .visual-controls-layout {
        grid-template-columns: 1fr;
    }


    .visual-toggles {
        display: grid;

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 8px;

        padding-top: 12px;
        padding-left: 0;

        border-top:
            1px solid
            var(--line);

        border-left: 0;
    }

}


/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */

@media (max-width: 620px) {

    .grid.three,
    .grid.two,
    .picker {
        grid-template-columns: 1fr;
    }


    .hero {
        flex-direction: column;

        align-items: flex-start;
    }


    .hero h1 {
        font-size: 34px;
    }


    .preview-heading {
        flex-direction: column;

        align-items: flex-start;
    }


    .metric-header-actions {
        flex-direction: column;

        align-items: flex-end;
    }


    /*
        Keep the report at its true A4 proportions
        while making it easier to inspect on mobile.
    */

    .report-page {
        zoom: .5;
    }

}


/* =========================================================
   RESPONSIVE - VERY SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .visual-toggles {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   PRINT
========================================================= */

@media print {

    body {
        background: var(--white);
    }


    .hero,
    .card,
    .preview-heading,
    .visual-control-panel,
    .sitefoot {
        display: none;
    }


    .preview-workspace {
        display: block;
    }


    .report-page {
        margin: 0;

        box-shadow: none;

        page-break-after: always;
    }


    .report-page:last-child {
        page-break-after: auto;
    }

}

/* Native seven-star rating */
.stars-input .rating-radio {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    pointer-events: none;
}
.stars-input label {
    color: #aeb9c4;
    font-size: 31px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
}
.stars-input label.active,
.stars-input label:hover {
    color: #f0b323;
}
.stars-input .rating-radio:focus-visible + label {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
    border-radius: 3px;
}

/* =========================================================
   RESPONSIVE REPORT PREVIEW
========================================================= */
.preview-pages {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
}

#report {
    width: max-content;
    min-width: 100%;
}

@media (max-width: 1150px) {
    .preview-workspace {
        grid-template-columns: 1fr;
    }

    .visual-control-panel {
        position: static;
    }

    .visual-controls-layout {
        grid-template-columns: minmax(0, 1fr) 200px;
    }
}

@media (max-width: 760px) {
    .shell {
        width: min(100% - 16px, 1320px);
    }

    .card {
        padding: 15px;
        border-radius: 12px;
    }

    .grid.three,
    .grid.two,
    .picker {
        grid-template-columns: 1fr;
    }

    .rowhead,
    .preview-heading {
        flex-direction: column;
        align-items: stretch;
    }

    .metric-header-actions,
    .actions {
        width: 100%;
    }

    .actions .btn {
        flex: 1 1 160px;
    }

    .visual-controls-layout {
        grid-template-columns: 1fr;
    }

    .visual-toggles {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding-top: 12px;
        padding-left: 0;
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    .report-page {
        zoom: .72;
    }
}

@media (max-width: 520px) {
    .hero {
        padding: 24px 16px;
    }

    .hero h1 {
        font-size: 32px;
    }

    .metric-header-actions,
    .actions {
        flex-direction: column;
        align-items: stretch;
    }

    .visual-toggles {
        grid-template-columns: 1fr;
    }

    .report-page {
        zoom: .52;
    }
}



/* =========================================================
   FINAL INTEGRATION FIXES
========================================================= */

/* Report readability */
.report-page h3 { font-size: 8.6px; }
.summary-item span { font-size: 5.2px; }
.summary-item b { font-size: 7.4px; }
.summary-item small { font-size: 4.8px; }
.stat-row { font-size: 5.7px; }
.performance-panel .stat-row { font-size: 5.4px; }
.bench { font-size: 6px; }
.snapshot-card b { font-size: 13px; }
.snapshot-card span { font-size: 6.4px; }
.snapshot-card small { font-size: 5.2px; }
.distribution-row { font-size: 6.4px; }
.strength-card strong { font-size: 11px; }
.strength-card span { font-size: 6px; }
.strength-card small { font-size: 5.3px; }
.development-copy,
.dev-comment { font-size: 6.4px; }
.dev-section-title { font-size: 6px; }
.decision span { font-size: 6.8px; }
.decision b { font-size: 9.7px; }
.assessment p { font-size: 10px; line-height: 1.45; }
.report-page footer { font-size: 6.5px; }

/* Transparent, frameless club logo */
.imagebox.logo {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.imagebox.logo img {
    object-fit: contain;
    background: transparent;
}

/* Pizza plot live scaling */
.pizza {
    display: grid;
    place-items: center;
    overflow: visible;
}
.pizza > svg {
    transform-origin: center center;
    transition: transform .12s ease;
}

/* Selected pizza attributes with percentile bars */
.selected-pizza-attribute {
    display: block;
    font-size: 5.3px;
}
.selected-pizza-attribute::before {
    display: none;
}
.selected-pizza-attribute-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .8mm;
    align-items: center;
}
.selected-pizza-attribute-value {
    color: var(--blue);
    font-size: 5.2px;
    font-weight: 900;
    white-space: nowrap;
}
.selected-pizza-attribute .track {
    height: 1.5mm;
    margin-top: .7mm;
}

/* Move only the chart content upward, not the right-hand column */
#page1 .pizza-panel {
    position: relative;
}
#page1 .pizza {
    transform: translateY(-8mm);
}
#page1 .bench {
    transform: translateY(-8mm);
}

/* =========================================================
   PAGE 1 REFINED COMPACT LAYOUT
========================================================= */

/* Hide the Pizza Plot Attributes panel without disturbing JS state. */
#page1 .selected-metrics-box {
    display: none;
}

/* Keep the full summary as a horizontal strip. */
#page1 .page1-summary-row {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(30mm, 1.35fr) minmax(31mm, 1.45fr);
    gap: 1px;
    min-height: 23mm;
    height: 23mm;
    margin: 2.2mm 0 2.2mm;
    background: #d7e1e8;
    border: 1px solid #d7e1e8;
}

/* Eight information fields remain 2 rows x 4 columns. */
#page1 .player-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, 11.5mm);
    gap: 1px;
    min-width: 0;
    height: 23mm;
    background: #d7e1e8;
}

#page1 .summary-item {
    min-width: 0;
    min-height: 0;
    height: auto;
    padding: 1.2mm 1.35mm;
    overflow: hidden;
    background: #f7f9fb;
}

#page1 .summary-item span {
    margin-bottom: .55mm;
    font-size: 5px;
    line-height: 1;
}

#page1 .summary-item b {
    font-size: 7px;
    line-height: 1.1;
}

#page1 .summary-item small {
    margin-top: .2mm;
    font-size: 4.5px;
    line-height: 1;
}

/* Recommendation and rating span both information rows. */
#page1 .summary-recommendation,
#page1 .summary-rating {
    min-height: 23mm;
    height: 23mm;
    padding: 1.35mm 1.65mm;
}

#page1 .summary-recommendation {
    background: var(--navy);
}

#page1 .summary-rating {
    background: linear-gradient(135deg, var(--navy), var(--navy2));
}

#page1 .summary-recommendation span,
#page1 .summary-rating span {
    font-size: 4.9px;
}

#page1 .summary-recommendation b,
#page1 .summary-rating b {
    font-size: 6.6px;
}

#page1 .summary-stars {
    margin: .35mm 0 .55mm;
    font-size: 10px;
}

/* Preserve the intended two-thirds / one-third main report split. */
#page1 .page1-main {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 3mm;
    height: 101mm;
}

/* With Pizza Plot Attributes hidden, use the entire RHS for performance. */
#page1 .performance-panel {
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 2mm;
    min-height: 0;
}

#page1 .performance-panel .performance-box {
    min-height: 0;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

/* Keep the pizza high in its panel without changing document flow. */
#page1 .pizza {
    transform: translateY(-7mm);
}

#page1 .bench {
    transform: translateY(-7mm);
}

/* =========================================================
   PAGE 1 EXPORT LAYOUT STABILITY - 2026-11-05
   Keeps the three lower summary panels anchored above the
   footer in both PDF and PNG captures and improves legibility.
========================================================= */

#page1 {
    box-sizing: border-box;
}

/* Reserve a fixed lower band so dynamic content above cannot
   push these panels into the footer or over one another. */
#page1 .data-bottom {
    position: absolute;
    left: 9mm;
    right: 9mm;
    bottom: 17mm;
    z-index: 2;
    grid-template-columns: .92fr 1.08fr 1.30fr;
    gap: 2.4mm;
    height: 61mm;
    margin: 0;
}

#page1 .data-bottom > .box {
    min-width: 0;
    height: 61mm;
    padding: 2.4mm;
    overflow: hidden;
}

/* Keep the content above the anchored lower band. */
#page1 .snapshot-section {
    height: 26mm;
    margin-top: 1.6mm;
    margin-bottom: 0;
}

/* Slightly larger, more consistent page-one text. */
#page1 h3 {
    font-size: 9.2px;
    line-height: 1.15;
    letter-spacing: .015em;
}

#page1 .summary-item span {
    font-size: 5.4px;
}

#page1 .summary-item b {
    font-size: 7.5px;
    line-height: 1.12;
}

#page1 .summary-item small {
    font-size: 4.8px;
}

#page1 .summary-recommendation span,
#page1 .summary-rating span {
    font-size: 5.2px;
}

#page1 .summary-recommendation b,
#page1 .summary-rating b {
    font-size: 7px;
}

#page1 .stat-row,
#page1 .performance-panel .stat-row {
    font-size: 5.9px;
    line-height: 1.14;
}

#page1 .distribution-row {
    grid-template-columns: 20mm minmax(0, 1fr) 6mm;
    gap: 1.1mm;
    margin: 1.2mm 0;
    font-size: 6.7px;
    line-height: 1.15;
}

#page1 .strength-grid {
    grid-template-columns: 1fr;
    gap: 1.25mm;
}

#page1 .strength-card {
    min-height: 0;
    height: 16.3mm;
    padding: 1.55mm 1.8mm;
}

#page1 .strength-card strong {
    font-size: 11.5px;
}

#page1 .strength-card span {
    margin-top: .7mm;
    font-size: 6.3px;
    line-height: 1.16;
}

#page1 .strength-card small {
    margin-top: .55mm;
    font-size: 5.4px;
    line-height: 1.15;
}

#page1 .development-copy,
#page1 .dev-comment {
    font-size: 6.7px;
    line-height: 1.28;
}

#page1 .dev-section-title {
    font-size: 6.3px;
    line-height: 1.15;
}

#page1 .dev-columns {
    gap: 1.8mm;
}

#page1 .dev-columns .stat-row {
    grid-template-columns: minmax(0, 1fr) 8mm 16mm;
    gap: .7mm;
    font-size: 5.45px;
    line-height: 1.15;
}

#page1 footer {
    z-index: 3;
    background: #fff;
}


/* =========================================================
   FINAL REPORT VISUAL CORRECTIONS - 2026-11-05
========================================================= */
/* Report visual corrections: 2026-11-05 */

/* Remove the pizza heading and the horizontal benchmark strip. */
#page1 .pizza-panel > h3,
#page1 #benchNote {
    display: none !important;
}

/* Pull the pizza into the space released by the removed heading. */
#page1 .pizza-panel {
    position: relative;
    overflow: visible;
    padding-top: 0 !important;
}

#page1 .pizza {
    height: 94mm;
    margin-top: -9mm;
    transform: none !important;
    overflow: visible;
}

#page1 .pizza > svg {
    transform-origin: center center;
}

/* Replace the old strength cards with a percentile dot-profile. */
#page1 .metric-profile {
    display: grid;
    gap: 2.1mm;
    margin-top: 1.3mm;
}

#page1 .metric-profile-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 31mm;
    gap: 1.6mm;
    align-items: center;
}

#page1 .metric-profile-copy {
    min-width: 0;
}

#page1 .metric-profile-copy strong {
    display: block;
    overflow: hidden;
    color: var(--navy);
    font-size: 6.1px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#page1 .metric-profile-copy small {
    display: block;
    margin-top: .45mm;
    color: #738290;
    font-size: 5px;
    line-height: 1.1;
}

#page1 .metric-profile-scale {
    position: relative;
    height: 5.2mm;
}

#page1 .metric-profile-axis {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #cfd9e0;
    transform: translateY(-50%);
}

#page1 .metric-profile-quartile {
    position: absolute;
    top: 1.1mm;
    bottom: 1.1mm;
    width: 1px;
    background: #dde5ea;
}

#page1 .metric-profile-quartile.q25 { left: 25%; }
#page1 .metric-profile-quartile.q50 { left: 50%; background: #aebdc8; }
#page1 .metric-profile-quartile.q75 { left: 75%; }

#page1 .metric-profile-dot {
    position: absolute;
    top: 50%;
    width: 3.4mm;
    height: 3.4mm;
    border: .65mm solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 .35mm currentColor;
    transform: translate(-50%, -50%);
}

#page1 .metric-profile-value {
    position: absolute;
    top: -1.6mm;
    transform: translateX(-50%);
    color: #42576a;
    font-size: 4.7px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

#page1 .metric-profile-legend {
    display: flex;
    justify-content: space-between;
    margin-top: 1mm;
    color: #82909b;
    font-size: 4.4px;
}