/**
 * HYROX Calculator Templates — Missing Class Definitions
 * Covers calculator pages: finish-time, pace, standards, readiness,
 * age-graded, division, doubles, nutrition, training-plan, venue-difficulty.
 * Scoped to .entry-content to match hyrox-missing.css convention.
 * Uses design tokens from .hx-app (hyrox.css lines 12–133).
 *
 * @package Hyrox
 * @since 1.0.0
 */

/* ==========================================================================
   1. OPTIONAL / REQUIRED LABELS
   ========================================================================== */

.entry-content .hx-optional {
    font-size: 0.6875rem;
    font-weight: 400;
    color: #6C757D;
    margin-left: 3px;
    font-style: italic;
}

/* ==========================================================================
   2. SPINNER WRAP
   Used as: <span class="hx-spinner-wrap"><span class="hx-spinner"></span> Text</span>
   ========================================================================== */

.entry-content .hx-spinner-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* ==========================================================================
   3. CHECKBOX CONTROLS
   ========================================================================== */

.entry-content .hx-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.entry-content .hx-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: #495057;
    line-height: 1.4;
    padding: 0.25rem 0;
}

.entry-content .hx-checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #1A1A1A;
    cursor: pointer;
    flex-shrink: 0;
}

.entry-content .hx-checkbox-label:hover {
    color: #1A1A1A;
}

/* ==========================================================================
   4. LIST VARIANTS
   ========================================================================== */

/* Base list reset inside calculator results */
.entry-content .hx-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.entry-content .hx-list li {
    padding: 0.3125rem 0;
    color: #495057;
    font-size: 0.9375rem;
    border-bottom: 1px solid #F1F3F5;
    line-height: 1.5;
}

.entry-content .hx-list li:last-child {
    border-bottom: none;
}

/* Small variant — tighter spacing */
.entry-content .hx-list-sm li {
    padding: 0.25rem 0;
    font-size: 0.875rem;
}

/* Compact variant — for inline list inside timeline */
.entry-content .hx-list-compact {
    margin: 0.375rem 0 0;
}

.entry-content .hx-list-compact li {
    font-size: 0.8125rem;
    padding: 0.1875rem 0;
    color: #495057;
}

/* Checkmark list — for training recommendations */
.entry-content .hx-list-check li {
    padding-left: 1.5rem;
    position: relative;
    font-size: 0.9375rem;
    color: #495057;
    border-bottom: none;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

.entry-content .hx-list-check li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6rem;
    width: 14px;
    height: 14px;
    background: #E8FF00;
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2.5 7l3 3 6-6' stroke='%231A1A1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
}

/* ==========================================================================
   5. RESULT HERO EXTRAS
   ========================================================================== */

/* Sub-label beneath result value (e.g. "1h race duration") */
.entry-content .hx-result-sub {
    display: block;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.375rem;
    font-weight: 400;
}

/* Classification text (e.g. "Race Ready", "Competitive") */
.entry-content .hx-result-classification {
    display: inline-block;
    margin-top: 0.75rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.375rem 1rem;
    border-radius: 2rem;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Per-classification colour tints applied via Alpine :class binding */
.entry-content .hx-level-not-ready        { color: #FF3366; }
.entry-content .hx-level-building         { color: #FFB300; }
.entry-content .hx-level-race-ready       { color: #00C853; }
.entry-content .hx-level-competitive      { color: #2196F3; }
.entry-content .hx-level-peak            { color: #E8FF00; }

/* ==========================================================================
   6. GAUGE / READINESS SCORE
   ========================================================================== */

.entry-content .hx-gauge-wrap {
    display: flex;
    justify-content: center;
    margin: 1rem 0 0.5rem;
}

/* The numeric readiness score displayed large */
.entry-content .hx-gauge {
    display: flex;
    align-items: baseline;
    gap: 0.125rem;
    justify-content: center;
}

.entry-content .hx-gauge-value {
    font-size: 4rem;
    font-weight: 900;
    color: #E8FF00;
    line-height: 1;
    letter-spacing: -0.04em;
}

.entry-content .hx-gauge-max {
    font-size: 1.25rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    align-self: flex-end;
    padding-bottom: 0.375rem;
}

/* Colour variants applied by :class="'hx-gauge-' + classificationKey()" */
.entry-content .hx-gauge-not-ready .hx-gauge-value  { color: #FF3366; }
.entry-content .hx-gauge-building .hx-gauge-value    { color: #FFB300; }
.entry-content .hx-gauge-race-ready .hx-gauge-value  { color: #00C853; }
.entry-content .hx-gauge-competitive .hx-gauge-value { color: #2196F3; }
.entry-content .hx-gauge-peak .hx-gauge-value        { color: #E8FF00; }

/* ==========================================================================
   9. DIMENSIONS GRID — READINESS BREAKDOWN
   ========================================================================== */

.entry-content .hx-dimensions-grid {
    margin: 1.5rem 0;
}

/* ==========================================================================
   10. PROGRESS BAR VARIANTS
   ========================================================================== */

/* Slim variant used inside stat cards */
.entry-content .hx-progress-bar-sm {
    width: 100%;
    height: 5px;
    background: #E9ECEF;
    border-radius: 9999px;
    overflow: hidden;
    margin-top: 0.625rem;
}

.entry-content .hx-progress-bar-sm .hx-progress-fill {
    height: 100%;
    background: #E8FF00;
    border-radius: 9999px;
    transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Progress bar wrapper with label text above it */
.entry-content .hx-progress-bar-wrap {
    margin: 1rem 0;
}

.entry-content .hx-progress-text {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 0.375rem;
}

/* ==========================================================================
   11. WARNING CARD VARIANT
   Used for "Areas to Improve" in readiness results
   ========================================================================== */

.entry-content .hx-card-warning {
    background: rgba(255, 179, 0, 0.06);
    border: 1.5px solid rgba(255, 179, 0, 0.3);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin: 1rem 0;
}

.entry-content .hx-card-warning .hx-section-title {
    color: #7A5500;
    border-bottom-color: rgba(255, 179, 0, 0.3);
}

.entry-content .hx-card-warning .hx-list li {
    color: #7A5500;
}

/* ==========================================================================
   12. LEVEL BADGES — STANDARDS CALCULATOR
   Applied as: hx-level-badge hx-level-{level}
   Levels: beginner, novice, intermediate, advanced, elite, world_class
   ========================================================================== */

.entry-content .hx-level-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    line-height: 1.6;
}

.entry-content .hx-level-badge-sm {
    padding: 2px 8px;
    font-size: 0.625rem;
}

/* Level-specific colours matching the design token vars */
.entry-content .hx-level-badge.hx-level-beginner {
    background: rgba(0, 200, 83, 0.12);
    color: #007A31;
}

.entry-content .hx-level-badge.hx-level-novice {
    background: rgba(33, 150, 243, 0.1);
    color: #0B5FB5;
}

.entry-content .hx-level-badge.hx-level-intermediate {
    background: rgba(33, 150, 243, 0.12);
    color: #0B5FB5;
}

.entry-content .hx-level-badge.hx-level-advanced {
    background: rgba(156, 39, 176, 0.12);
    color: #6A0080;
}

.entry-content .hx-level-badge.hx-level-elite {
    background: rgba(255, 143, 0, 0.12);
    color: #8A5000;
}

.entry-content .hx-level-badge.hx-level-world_class,
.entry-content .hx-level-badge.hx-level-world-class {
    background: rgba(232, 255, 0, 0.15);
    color: #1A1A1A;
    border: 1px solid rgba(232, 255, 0, 0.5);
}

/* ==========================================================================
   13. TABLE ROW VARIANTS — PACE CALCULATOR
   ========================================================================== */

/* Run splits rows */
.entry-content .hx-row-run td:first-child {
    font-weight: 600;
    color: #1A1A1A;
}

.entry-content .hx-row-run:nth-child(n+5) td:first-child {
    /* Later runs visually distinct — slight muted tone */
    color: #495057;
}

/* Station rows */
.entry-content .hx-row-station td:first-child {
    font-weight: 600;
    color: #1A1A1A;
}

/* Highlighted recommended row in division table */
.entry-content .hx-row-highlight {
    background: rgba(232, 255, 0, 0.08) !important;
}

.entry-content .hx-row-highlight td:first-child {
    font-weight: 700;
}

/* ==========================================================================
   14. REFERENCE TABLE (DIVISION PAGE WEIGHT TABLE)
   ========================================================================== */

.entry-content .hx-table-reference tbody td:first-child {
    font-weight: 600;
    color: #1A1A1A;
    white-space: nowrap;
}

.entry-content .hx-table-reference tbody td[colspan] {
    color: #6C757D;
    font-style: italic;
    font-size: 0.875rem;
}

/* ==========================================================================
   15. ALL-STATIONS GRID — STANDARDS CALCULATOR
   ========================================================================== */

.entry-content .hx-all-stations-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem;
    margin-bottom: 1.25rem;
}

@media (max-width: 480px) {
    .entry-content .hx-all-stations-grid {
        grid-template-columns: 1fr;
    }
}

/* Small time inputs variant used inside all-stations grid */
.entry-content .hx-time-inputs-sm {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.entry-content .hx-time-inputs-sm .hx-input {
    width: 3.5rem;
    text-align: center;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    font-size: 0.875rem;
}

.entry-content .hx-time-inputs-sm .hx-input-suffix {
    font-size: 0.75rem;
}

.entry-content .hx-time-inputs-sm .hx-time-sep {
    font-size: 1rem;
    font-weight: 700;
    color: #ADB5BD;
}

/* ==========================================================================
   16. NUTRITION CALCULATOR — PHASE BLOCKS
   ========================================================================== */

.entry-content .hx-nutrition-phase {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #E9ECEF;
}

.entry-content .hx-nutrition-phase:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* ==========================================================================
   17. TIMELINE — NUTRITION CALCULATOR
   The base .hx-timeline is in hyrox.css (section 19).
   These are the missing sub-elements used in nutrition.php.
   ========================================================================== */

/* Marker dot on timeline spine */
.entry-content .hx-timeline-marker {
    position: absolute;
    left: -1.625rem;
    top: 0.3125rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #DEE2E6;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #DEE2E6;
    flex-shrink: 0;
}

/* Active marker — gel timing / hydration highlight */
.entry-content .hx-timeline-marker-active,
.entry-content .hx-timeline-marker.hx-timeline-marker-active {
    background: #E8FF00;
    box-shadow: 0 0 0 2px rgba(232, 255, 0, 0.35);
}

/* Water marker — blue */
.entry-content .hx-timeline-marker-water {
    background: #2196F3;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.3);
}

/* Warning marker — amber */
.entry-content .hx-timeline-marker-warn {
    background: #FFB300;
    box-shadow: 0 0 0 2px rgba(255, 179, 0, 0.3);
}

/* Content block to the right of the marker */
.entry-content .hx-timeline-content {
    flex: 1;
}

/* Time / heading label above the detail */
.entry-content .hx-timeline-time {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #6C757D;
    margin-bottom: 0.25rem;
}

/* Detail block containing description + examples */
.entry-content .hx-timeline-details {
    background: #F8F9FA;
    border: 1px solid #E9ECEF;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-top: 0.25rem;
}

/* Food/description text inside timeline */
.entry-content .hx-timeline-food {
    font-size: 0.9375rem;
    color: #1A1A1A;
    margin: 0 0 0.25rem;
    font-weight: 500;
    line-height: 1.5;
}

/* Wrapper for the whole timeline in nutrition */
.entry-content .hx-timeline {
    position: relative;
    padding-left: 2rem;
}

.entry-content .hx-timeline::before {
    content: '';
    position: absolute;
    left: 0.3125rem;
    top: 0.375rem;
    bottom: 0.375rem;
    width: 2px;
    background: #E9ECEF;
}

.entry-content .hx-timeline-item {
    position: relative;
    padding-bottom: 1.5rem;
}

.entry-content .hx-timeline-item:last-child {
    padding-bottom: 0;
}

/* ==========================================================================
   18. CTA CARDS — BOTTOM "EXPLORE MORE" GRID
   The dark hx-cta-section is in hyrox.css (section 27).
   These card elements are missing.
   ========================================================================== */

.entry-content .hx-cta-card {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 1.25rem 1.5rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    text-decoration: none !important;
    color: inherit;
    transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.entry-content .hx-cta-card:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(232, 255, 0, 0.35);
    transform: translateY(-2px);
    color: inherit;
}

.entry-content .hx-cta-card-title {
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
    line-height: 1.3;
}

.entry-content .hx-cta-card-desc {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
}

/* CTA section heading override — white on dark background */
.entry-content .hx-cta-section h2 {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    letter-spacing: -0.02em;
}

/* ==========================================================================
   19. CALCULATOR LAYOUT — SCOPED OVERRIDES
   The base .hx-calculator-layout and .hx-calc-form are in hyrox.css
   (section 30+). These cover edge cases and missing sub-structure.
   ========================================================================== */

.entry-content .hx-calculator-section .hx-calculator-layout {
    max-width: 780px;
    margin: 0 auto;
}

/* ==========================================================================
   20. ALERT DANGER ALIAS
   hyrox-missing.css has hx-alert-danger; hyrox.css uses hx-alert-error.
   Templates use hx-alert-danger — ensure it works.
   ========================================================================== */

.entry-content .hx-alert-danger {
    background: rgba(255, 51, 102, 0.08);
    border-left: 4px solid #FF3366;
    color: #CC0033;
    padding: 0.875rem 1.25rem;
    border-radius: 6px;
    margin: 1rem 0;
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* ==========================================================================
   21. RESPONSIVE GRID UTILITIES USED IN TEMPLATES
   ========================================================================== */

/* .hx-grid .hx-grid-3 used in CTA sections */
.entry-content .hx-grid {
    display: grid;
    gap: 1rem;
}

.entry-content .hx-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
    .entry-content .hx-grid-3 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .entry-content .hx-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   22. FORM ROW 3COL — SCOPED FALLBACK
   Defined in hyrox.css but needs .entry-content scope for theme compat.
   ========================================================================== */

.entry-content .hx-form-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.entry-content .hx-form-row-3col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 600px) {
    .entry-content .hx-form-row-2col,
    .entry-content .hx-form-row-3col {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   23. PRINT — PACE PLAN
   ========================================================================== */

@media print {
    .entry-content .hx-calc-form,
    .entry-content .hx-cta-section,
    .entry-content .hx-faq-section {
        display: none;
    }

    .entry-content .hx-results-section,
    .entry-content .hx-table-wrap {
        break-inside: avoid;
    }
}

/* ==========================================================================
   MODERN CALCULATOR FORM LAYER
   Shared support for grouped time inputs, segmented controls, and dense rows.
   ========================================================================== */

.entry-content .hx-calculator-section .hx-form-row {
    gap: 1rem;
}

.entry-content .hx-calculator-section .hx-time-inputs {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
}

.entry-content .hx-calculator-section .hx-time-inputs .hx-input-wrapper {
    flex: 1 1 0;
}

.entry-content .hx-calculator-section .hx-time-sep {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 10px;
    font-weight: 700;
    color: var(--hx-text-muted);
}

.entry-content .hx-calculator-section .hx-toggle-group,
.entry-content .hx-calculator-section .hx-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.entry-content .hx-calculator-section .hx-toggle-group .hx-unit-btn,
.entry-content .hx-calculator-section .hx-radio-group .hx-radio-option {
    border-radius: 999px;
}

@media (max-width: 768px) {
    .entry-content .hx-calculator-section .hx-time-inputs {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .entry-content .hx-calculator-section .hx-time-inputs .hx-input-wrapper {
        min-width: 0;
    }

    .entry-content .hx-calculator-section .hx-form-row-2col,
    .entry-content .hx-calculator-section .hx-form-row-3col,
    .entry-content .hx-calculator-section .hx-form-row-4 {
        grid-template-columns: 1fr;
    }
}