/**
 * Race Finish Readiness Calculator — Tool Styles.
 *
 * All rules are scoped to #dadjogger-race-readiness-calculator to prevent
 * leaking into the theme or other tools.
 *
 * Color, spacing, typography, and border tokens come from the shared
 * dadjogger-tools.css stylesheet. Do not hardcode color values here —
 * use --djt-* tokens so this tool responds automatically to branding
 * changes made in the plugin admin.
 *
 * Shared plugin styles (header block, disclaimer) live in
 * assets/css/dadjogger-tools.css. This file handles tool-specific
 * layout and presentation only.
 *
 * @package DadJogger_Tools
 */


/* ==========================================================================
   Body wrapper
   ========================================================================== */

#dadjogger-race-readiness-calculator .dadjogger-rrc__body {
    padding: var(--djt-spacing-lg);
}


/* ==========================================================================
   Sections
   ========================================================================== */

#dadjogger-race-readiness-calculator .dadjogger-rrc__section {
    margin-bottom: var(--djt-spacing-lg);
}

#dadjogger-race-readiness-calculator .dadjogger-rrc__section-label {
    display: block;
    font-size: var(--djt-font-size-xs);
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--djt-color-text-muted);
    margin: 0 0 var(--djt-spacing-md) 0;
    padding: 0 0 var(--djt-spacing-xs) 0;
    border: none;
    border-bottom: 1px solid var(--djt-color-border);
}


/* ==========================================================================
   Fields and labels
   ========================================================================== */

#dadjogger-race-readiness-calculator .dadjogger-rrc__field {
    margin-bottom: var(--djt-spacing-md);
}

#dadjogger-race-readiness-calculator .dadjogger-rrc__label {
    display: block;
    font-size: var(--djt-font-size-sm);
    font-weight: 600;
    color: var(--djt-color-text-primary);
    margin: 0 0 var(--djt-spacing-xs) 0;
    padding: 0;
    float: none;
    width: auto;
    text-align: left;
}

#dadjogger-race-readiness-calculator .dadjogger-rrc__hint {
    font-weight: 400;
    font-style: italic;
    color: var(--djt-color-text-muted);
    font-size: var(--djt-font-size-xs);
    margin-left: 0.25em;
}


/* ==========================================================================
   Two-column grid for number inputs
   ========================================================================== */

#dadjogger-race-readiness-calculator .dadjogger-rrc__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--djt-spacing-md);
}


/* ==========================================================================
   Inputs and selects
   ========================================================================== */

#dadjogger-race-readiness-calculator .dadjogger-rrc__input,
#dadjogger-race-readiness-calculator .dadjogger-rrc__select {
    display: block;
    width: 100%;
    padding: 8px 12px;
    font-family: inherit;
    font-size: var(--djt-font-size-base);
    color: var(--djt-color-text-primary);
    background: var(--djt-color-bg);
    border: 1px solid var(--djt-color-border);
    border-radius: var(--djt-border-radius);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    appearance: none;
    -webkit-appearance: none;
    height: auto;
    line-height: normal;
    box-shadow: none;
}

#dadjogger-race-readiness-calculator .dadjogger-rrc__input:focus,
#dadjogger-race-readiness-calculator .dadjogger-rrc__select:focus {
    outline: 2px solid var(--djt-color-accent);
    outline-offset: 1px;
    border-color: var(--djt-color-accent);
    box-shadow: none;
}


/* ==========================================================================
   Custom select arrow
   ========================================================================== */

#dadjogger-race-readiness-calculator .dadjogger-rrc__select-wrap {
    position: relative;
}

#dadjogger-race-readiness-calculator .dadjogger-rrc__select-wrap::after {
    content: '\25BE';
    position: absolute;
    right: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--djt-color-text-muted);
    pointer-events: none;
    font-size: 0.8rem;
    line-height: 1;
}


/* ==========================================================================
   Goal time side-by-side inputs
   ========================================================================== */

#dadjogger-race-readiness-calculator .dadjogger-rrc__time-inputs {
    display: flex;
    gap: var(--djt-spacing-sm);
    align-items: center;
}

#dadjogger-race-readiness-calculator .dadjogger-rrc__time-group {
    display: flex;
    align-items: center;
    gap: var(--djt-spacing-xs);
}

#dadjogger-race-readiness-calculator .dadjogger-rrc__input--time {
    width: 5rem;
}

#dadjogger-race-readiness-calculator .dadjogger-rrc__time-label {
    font-size: var(--djt-font-size-xs);
    color: var(--djt-color-text-muted);
    white-space: nowrap;
}


/* ==========================================================================
   Yes/No toggle buttons
   ========================================================================== */

#dadjogger-race-readiness-calculator .dadjogger-rrc__toggle-group {
    display: flex;
    gap: var(--djt-spacing-sm);
}

#dadjogger-race-readiness-calculator .dadjogger-rrc__toggle-group input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
}

#dadjogger-race-readiness-calculator .dadjogger-rrc__toggle-btn {
    flex: 1;
    display: block;
    text-align: center;
    padding: 8px 0;
    border: 1px solid var(--djt-color-border);
    border-radius: var(--djt-border-radius);
    cursor: pointer;
    font-size: var(--djt-font-size-sm);
    font-weight: 600;
    color: var(--djt-color-text-muted);
    background: var(--djt-color-bg);
    transition: all 0.15s ease;
    margin: 0;
    float: none;
    width: auto;
}

#dadjogger-race-readiness-calculator .dadjogger-rrc__toggle-group input[type="radio"]:checked + .dadjogger-rrc__toggle-btn {
    background: var(--djt-color-header-bg);
    border-color: var(--djt-color-header-bg);
    color: #ffffff;
}


/* ==========================================================================
   Calculate button — uses brand accent, matches pace calculator pattern
   ========================================================================== */

#dadjogger-race-readiness-calculator .dadjogger-rrc__btn-calc {
    display: block;
    width: 100%;
    padding: 10px 16px;
    font-family: inherit;
    font-size: var(--djt-font-size-base);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--djt-color-header-bg);
    background: var(--djt-color-accent);
    border: none;
    border-radius: var(--djt-border-radius);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
    text-transform: none;
    text-decoration: none;
    box-shadow: none;
    line-height: normal;
    height: auto;
    -webkit-appearance: none;
    appearance: none;
}

#dadjogger-race-readiness-calculator .dadjogger-rrc__btn-calc:hover,
#dadjogger-race-readiness-calculator .dadjogger-rrc__btn-calc:focus {
    background: #1ab8e6;
    outline: none;
    box-shadow: none;
}

#dadjogger-race-readiness-calculator .dadjogger-rrc__btn-calc:active {
    transform: scale(0.98);
}


/* ==========================================================================
   Validation error
   ========================================================================== */

#dadjogger-race-readiness-calculator .dadjogger-rrc__error {
    display: none;
    margin-top: var(--djt-spacing-md);
    padding: var(--djt-spacing-sm) var(--djt-spacing-md);
    background: #fff3f2;
    border: 1px solid #e08080;
    border-radius: var(--djt-border-radius);
    font-size: var(--djt-font-size-sm);
    color: #8b1a1a;
}

#dadjogger-race-readiness-calculator .dadjogger-rrc__error.is-visible {
    display: block;
}


/* ==========================================================================
   Results panel
   ========================================================================== */

#dadjogger-race-readiness-calculator .dadjogger-rrc__results {
    display: none;
    margin-top: var(--djt-spacing-lg);
    padding-top: var(--djt-spacing-lg);
    border-top: 2px solid var(--djt-color-border);
    animation: dadjogger-rrc-fade-in 0.3s ease forwards;
}

#dadjogger-race-readiness-calculator .dadjogger-rrc__results.is-visible {
    display: block;
}

@keyframes dadjogger-rrc-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0);   }
}


/* ==========================================================================
   Score display
   ========================================================================== */

#dadjogger-race-readiness-calculator .dadjogger-rrc__score-row {
    display: flex;
    align-items: center;
    gap: var(--djt-spacing-md);
    margin-bottom: var(--djt-spacing-md);
}

#dadjogger-race-readiness-calculator .dadjogger-rrc__score-num {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
    min-width: 4rem;
    text-align: center;
}

#dadjogger-race-readiness-calculator .dadjogger-rrc__score-meta {
    flex: 1;
}

#dadjogger-race-readiness-calculator .dadjogger-rrc__score-cat {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.15rem 0;
    padding: 0;
    border: none;
}

#dadjogger-race-readiness-calculator .dadjogger-rrc__score-sub {
    font-size: var(--djt-font-size-xs);
    color: var(--djt-color-text-muted);
    font-style: italic;
}


/* ==========================================================================
   Score progress bar
   ========================================================================== */

#dadjogger-race-readiness-calculator .dadjogger-rrc__bar-track {
    height: 7px;
    background: var(--djt-color-border);
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: var(--djt-spacing-md);
}

#dadjogger-race-readiness-calculator .dadjogger-rrc__bar-fill {
    height: 100%;
    border-radius: 99px;
    width: 0%;
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}


/* ==========================================================================
   Guidance text block
   ========================================================================== */

#dadjogger-race-readiness-calculator .dadjogger-rrc__guidance {
    background: var(--djt-color-surface-muted);
    border-left: 3px solid var(--djt-color-accent);
    border-radius: 0 var(--djt-border-radius) var(--djt-border-radius) 0;
    padding: var(--djt-spacing-md);
    font-size: var(--djt-font-size-sm);
    line-height: 1.65;
    color: var(--djt-color-text-primary);
    margin-bottom: var(--djt-spacing-md);
}


/* ==========================================================================
   Score breakdown
   ========================================================================== */

#dadjogger-race-readiness-calculator .dadjogger-rrc__breakdown {
    font-size: var(--djt-font-size-sm);
}

#dadjogger-race-readiness-calculator .dadjogger-rrc__breakdown-title {
    font-size: var(--djt-font-size-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--djt-color-text-muted);
    margin: 0 0 var(--djt-spacing-sm) 0;
    padding: 0;
    border: none;
}

#dadjogger-race-readiness-calculator .dadjogger-rrc__breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--djt-color-border);
    gap: var(--djt-spacing-sm);
}

#dadjogger-race-readiness-calculator .dadjogger-rrc__breakdown-row:last-child {
    border-bottom: none;
}

#dadjogger-race-readiness-calculator .dadjogger-rrc__breakdown-name {
    color: var(--djt-color-text-primary);
}

#dadjogger-race-readiness-calculator .dadjogger-rrc__breakdown-pts {
    font-weight: 700;
    font-size: var(--djt-font-size-sm);
    white-space: nowrap;
}


/* ==========================================================================
   Disclaimer placement override
   ========================================================================== */

#dadjogger-race-readiness-calculator .dadjogger-tool__disclaimer {
    margin-top: var(--djt-spacing-md);
    text-align: center;
}


/* ==========================================================================
   Responsive — narrow viewports
   ========================================================================== */

@media ( max-width: 480px ) {

    #dadjogger-race-readiness-calculator .dadjogger-rrc__body {
        padding: var(--djt-spacing-md);
    }

    #dadjogger-race-readiness-calculator .dadjogger-rrc__grid {
        grid-template-columns: 1fr;
    }

    #dadjogger-race-readiness-calculator .dadjogger-rrc__score-num {
        font-size: 2.8rem;
        min-width: 3.2rem;
    }
}