/* ── Global Reset ───────────────────────────────────────────
   box-sizing: border-box makes width/height predictable.
   Padding and borders are included in the declared size,
   not added on top of it. This is a modern CSS best practice. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* CSS Custom Properties (shared colour values).
   Change a colour here and it updates everywhere it appears. */
:root {
    --brand-green:  #00ff00; /* Lime green  – skeleton canvas overlay        */
    --brand-orange: #f39c12; /* Orange      – Help button                    */
    --color-ok:     #28a745; /* Green       – angle within the ideal range   */
    --color-warn:   #dc3545; /* Red         – angle outside the ideal range  */
    --color-blue:   #007bff; /* Blue        – PDF download button            */
    --color-teal:   #17a2b8; /* Teal        – Demo button                   */
    --color-gray:   #6c757d; /* Gray        – Clear/Reset button             */
    --color-slate:  #607d8b; /* Slate blue  – More button                   */
}

#cycl3d-app-root {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Segoe UI', sans-serif;
    padding: 20px 0;
}

/* The report wrapper holds everything captured in a PDF or print. */
#report-wrapper {
    width: 100%;
    max-width: 850px;
    background: white;
    padding: 20px;
}

/* The no-print-zone contains UI controls (file upload, dropdown)
   that should NOT appear when the user prints or exports a PDF.
   These are hidden via the @media print rule at the bottom. */
.no-print-zone {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    width:          95%;
    max-width:      850px;
    margin-top:     16px;
}

.no-print-zone label {
    font-weight: 600;
    font-size:   0.95rem;
}

.no-print-zone select,
.no-print-zone input[type="file"] {
    padding:       8px;
    border:        1px solid #ccc;
    border-radius: 6px;
    font-size:     0.95rem;
    width:         100%;
}

#container {
    position: relative;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    line-height: 0;
}

canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    touch-action: none; /* Required for Pointer Events API – browser handles scroll suppression */
}

img#displayImg {
    width: 100%;
    height: auto;
    object-fit: contain;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th, td {
    border: 1px solid #ccc;
    padding: 12px;
    text-align: left;
}

/* Table header row: darker background for clear visual hierarchy. */
th {
    background-color: #f0f0f0;
    font-weight: 700;
}

/* status-ok: angle is within the ideal range – shown in green. */
.status-ok  { color: var(--color-ok);   font-weight: bold; }
/* status-warn: angle is outside the ideal range – shown in red. */
.status-warn { color: var(--color-warn); font-weight: bold; }

/* advice-box: the recommendation cell in the results table. */
.advice-box {
    font-size:  0.9rem;
    font-style: italic;
    color:      #333;
}

/* Wrapper that centres the Flip Image button between the photo and results table. */
.mirror-btn-wrap {
    margin-top: 10px;
    text-align: center;
}

/* Flip Image button: compact, sits inline rather than full-width. */
.mirror-btn {
    background:    var(--color-slate);
    color:         white;
    padding:       8px 22px;
    border-radius: 6px;
    font-size:     0.88rem;
    font-weight:   600;
    width:         auto;   /* Override the global button { width: 100% } rule */
    cursor:        pointer;
}

.action-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 20px;
    width: 95%;
    max-width: 850px;
}

/* Base button styles – width, padding, and appearance in one rule.
   No duplicate declarations needed. All buttons inherit these. */
button {
    width:         100%;
    padding:       12px;
    border:        none;
    border-radius: 6px;
    cursor:        pointer;
    font-weight:   600;
    font-size:     0.95rem;
    transition:    opacity 0.15s ease; /* Subtle hover feedback */
}

button:hover { opacity: 0.88; }

/* Individual button colour themes using CSS variables. */
.gray-btn  { background: var(--color-gray);   color: white; }
.pdf-btn   { background: var(--color-blue);   color: white; }
.help-btn  { background: var(--brand-orange); color: white; }
.demo-btn  { background: var(--color-teal);   color: white; }
.more-btn  { background: var(--color-slate);  color: white; }

/* The Clear/Reset button spans all 4 grid columns. */
#clearBtn { grid-column: span 4; }

.banner img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

.banner {
    text-align: center;
    margin-bottom: 16px;
}

.banner h2 {
    margin: 8px 0 0;
    font-size: 1.1rem;
}

/* Help modal: full-screen overlay with usage instructions.
   Hidden by default; shown when the user clicks the Help button. */
#help-modal {
    display:    none;               /* Hidden until Help button is clicked   */
    position:   fixed;              /* Covers the full viewport              */
    z-index:    1000;               /* Floats above all other page content   */
    left: 0; top: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.8); /* Semi-transparent dark backdrop        */
}

/* The white card that holds the instruction text. */
.modal-content {
    background:    white;
    margin:        10% auto;
    padding:       24px;
    width:         80%;
    max-width:     500px;
    border-radius: 12px;
    position:      relative; /* Allows absolute positioning of the close button */
}

/* The x close button in the top-right corner of the modal. */
.close {
    position:    absolute;
    top:         12px;
    right:       16px;
    font-size:   1.5rem;
    font-weight: bold;
    cursor:      pointer;
    color:       #555;
    line-height: 1;
}

.close:hover { color: #000; }

/* ── "More" Modal – fit theory & resources ─────────────────────────────────
   Full-screen overlay with a scrollable card. Toggled via the `hidden`
   attribute; the higher-specificity [hidden] rule ensures display: none
   wins over the display: flex declared on .modal-overlay.               */
.modal-overlay {
    position:        fixed;
    inset:           0;
    background:      rgba(0, 0, 0, 0.55);
    display:         flex;
    align-items:     center;
    justify-content: center;
    z-index:         1000;
}

.modal-overlay[hidden] {
    display: none;
}

.modal-box {
    background:    white;
    border-radius: 10px;
    padding:       24px;
    max-width:     640px;
    width:         90%;
    max-height:    85vh;
    overflow-y:    auto;
    box-shadow:    0 8px 32px rgba(0, 0, 0, 0.4);
}

.modal-header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-bottom:   16px;
}

.modal-header h2 {
    margin:    0;
    font-size: 1.25rem;
}

/* Close (✕) button – plain icon, no background fill. */
#moreModalClose {
    background:  none;
    border:      none;
    font-size:   1.25rem;
    cursor:      pointer;
    color:       #555;
    padding:     4px 8px;
    line-height: 1;
    width:       auto;
}

#moreModalClose:hover {
    color:   #000;
    opacity: 1;
}

.theory-text p {
    line-height: 1.6;
    margin:      0 0 12px;
    color:       #333;
}

.theory-resources {
    display:    flex;
    flex-wrap:  wrap;
    gap:        16px;
    margin-top: 24px;
}

.book-card {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    width:           120px;
    text-align:      center;
    text-decoration: none;
    color:           inherit;
    gap:             8px;
    transition:      transform 0.15s ease;
}

.book-card:hover {
    transform: translateY(-3px);
}

/* CSS gradient placeholder that mimics a book cover thumbnail. */
.book-cover {
    width:        100%;
    aspect-ratio: 2 / 3;
    border-radius: 4px;
    box-shadow:   0 2px 8px rgba(0, 0, 0, 0.3);
    background-size: cover;
    background-position: center;
}

.book-cover-bikefit {
    background-image: url('Assets/bikefitphilburt.jpg');
}

.book-cover-ctb {
    background-image: url('Assets/cycliststrainingbible.jpg');
}

.book-title {
    font-weight: 600;
    font-size:   0.85rem;
    line-height: 1.3;
}

.book-author {
    font-size: 0.78rem;
    color:     #666;
}

/* Legal disclaimer at the bottom of the report.
   Light yellow background with an orange accent strip. */
.disclaimer {
    margin-top:    20px;
    padding:       12px 16px;
    background:    #fff8e1;
    border-left:   4px solid var(--brand-orange);
    border-radius: 4px;
    font-size:     0.82rem;
    color:         #555;
    line-height:   1.5;
}

/* Session title and notes fields inside #report-wrapper.
   Wrapped in .no-print-zone so they are hidden during print/PDF. */
.fit-title-wrap,
.fit-notes-wrap {
    margin-top: 14px;
}

.fit-title-wrap label,
.fit-notes-wrap label {
    display:      block;
    font-weight:  600;
    font-size:    0.95rem;
    margin-bottom: 4px;
}

#fitTitle,
#fitNotes {
    width:         100%;
    padding:       8px 10px;
    border:        1px solid #ccc;
    border-radius: 6px;
    font-size:     0.95rem;
    font-family:   inherit;
    color:         #333;
    background:    #fafafa;
    resize:        vertical;
}

#fitTitle:focus,
#fitNotes:focus {
    outline:      none;
    border-color: var(--brand-orange);
    background:   #fff;
}

/* ── Mobile Responsive Fixes ───────────────────────────────
   Scroll wrapper for the results table – allows horizontal
   scroll on narrow screens without breaking page layout.  */
.table-scroll-wrap {
    width:                    100%;
    overflow-x:               auto;
    -webkit-overflow-scrolling: touch;
}

/* Prevent the page itself from ever scrolling horizontally. */
body {
    overflow-x: hidden;
    max-width:  100vw;
}

/* Tighten layout and ensure text wraps on phones. */
@media (max-width: 600px) {
    #report-wrapper {
        padding: 10px;
    }

    th, td {
        padding:         8px 6px;
        word-break:      break-word;
        overflow-wrap:   break-word;
    }

    /* Stack action buttons into 2 columns on small screens.
       The 4 action buttons (Help, Demo, PDF, More) flow into 2×2 naturally. */
    .action-buttons {
        grid-template-columns: 1fr 1fr;
    }

    #clearBtn {
        grid-column: span 2;
    }
}

/* Print / PDF Media Query ─────────────────────────────────
   When printing or generating a PDF, hide all interactive
   controls so only the report content is captured.        */
@media print {
    .no-print-zone,
    .action-buttons {
        display: none !important;
    }

    #report-wrapper {
        max-width: 100%;
        padding:   0;
    }
}