/*
 * loadedDiceAppStyles.css
 * TNT | Loaded Dice Analyzer — app page styles
 * Created: 10/28/2026
 * Palette: warm gold dice + green probability icon
 */

/* ═══ CUSTOM PROPERTIES ═══ */
:root {
    --ld-green:      #1e7a3e;
    --ld-green-lt:   rgba(30,122,62,0.15);
    --ld-green-glow: rgba(30,122,62,0.28);
    --ld-gold:       #c4892b;
    --ld-gold-lt:    rgba(196,137,43,0.15);
    --ld-red:        #c03030;
    --ld-dark:       #060e08;
    --ld-card:       #0b1a0e;
    --ld-border:     rgba(30,122,62,0.22);
}

/* ═══ HERO ═══ */
#hero {
    min-height: 38vh;
    background:
        linear-gradient(135deg, rgba(6,14,8,0.82) 0%, rgba(14,30,16,0.65) 100%),
        url('../images/Five_ivory_dice.jpg') center 55% / cover no-repeat;
    background-color: var(--ld-dark);
    padding: 3.5rem 1rem 2.5rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--ld-border);
}

.hero-content {
    width: 100%;
}

.hero-eyebrow {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(30,122,62,0.90);
    margin-bottom: 0.6rem;
}

.hero-title {
    font-family: 'Boogaloo', sans-serif;
    font-size: clamp(2rem, 5vw, 3rem);
    color: #e8f5e8;
    text-shadow: 0 0 22px var(--ld-green-glow);
    margin-bottom: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.hero-icon {
    height: 1.8rem;
    filter: drop-shadow(0 0 8px var(--ld-green-glow));
}

.hero-subtitle {
    font-size: 1.05rem;
    color: rgba(210,240,215,0.78);
    max-width: 620px;
    margin: 0 auto 1rem;
    line-height: 1.55;
}

/* ═══ SPARK BAR ═══ */
.spark-bar {
    background: #040a08;
    border-bottom: 1px solid var(--ld-border);
    padding: 0.52rem 1.1rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    font-size: 0.83rem;
}

.spark-bar a {
    color: var(--ld-gold);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.18s;
}

.spark-bar a:hover {
    color: #e8b84a;
    text-decoration: underline;
}

.spark-bar span {
    color: rgba(196,137,43,0.42);
    font-size: 0.79rem;
}

/* ═══ APP SECTION ═══ */
#appSection {
    background: linear-gradient(160deg, rgba(6,14,8,0.98) 0%, rgba(9,20,11,0.99) 100%);
    padding: 2.5rem 0 3rem;
    min-height: 60vh;
}

/* ═══ ABOUT PANEL ═══ */
.about-panel {
    background: var(--ld-card);
    border: 1px solid var(--ld-border);
    border-radius: 10px;
    overflow: hidden;
}

.about-panel summary {
    padding: 0.8rem 1.1rem;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--ld-gold);
    letter-spacing: 0.5px;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.about-panel summary::-webkit-details-marker { display: none; }
.about-panel summary::before {
    content: '\f055';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--ld-green);
    font-size: 0.85rem;
}
.about-panel[open] summary::before { content: '\f056'; }

.about-panel summary:hover { color: #e8b84a; }

.about-body {
    padding: 0.2rem 1.3rem 1.1rem;
    color: rgba(208,238,215,0.82);
    font-size: 0.88rem;
    line-height: 1.65;
    border-top: 1px solid var(--ld-border);
}

.about-body p { margin-bottom: 0.6rem; }
.about-body strong { color: rgba(225,248,230,0.95); }

/* ═══ LD PANEL ═══ */
.ld-panel {
    background: var(--ld-card);
    border: 1px solid var(--ld-border);
    border-radius: 10px;
    padding: 1.2rem 1.3rem 1rem;
}

.ld-panel-title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ld-green);
    margin-bottom: 0.85rem;
}

/* ═══ FORM ELEMENTS ═══ */
.ld-label {
    display: block;
    font-size: 0.77rem;
    font-weight: 600;
    color: rgba(180,220,190,0.72);
    margin-bottom: 0.28rem;
    letter-spacing: 0.3px;
}

.ld-textarea {
    width: 100%;
    background: rgba(4,10,5,0.90);
    border: 1px solid rgba(30,122,62,0.30);
    border-radius: 6px;
    color: #c8eacb;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.83rem;
    padding: 0.6rem 0.8rem;
    resize: vertical;
    transition: border-color 0.18s, box-shadow 0.18s;
    line-height: 1.55;
}

.ld-textarea:focus {
    outline: none;
    border-color: var(--ld-green);
    box-shadow: 0 0 0 3px var(--ld-green-lt);
    background: rgba(5,14,7,0.95);
}

.ld-textarea::placeholder { color: rgba(100,150,110,0.50); }

.ld-input {
    width: 100%;
    background: rgba(4,10,5,0.90);
    border: 1px solid rgba(30,122,62,0.30);
    border-radius: 6px;
    color: #c8eacb;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    padding: 0.42rem 0.75rem;
    transition: border-color 0.18s, box-shadow 0.18s;
}

.ld-input:focus {
    outline: none;
    border-color: var(--ld-green);
    box-shadow: 0 0 0 3px var(--ld-green-lt);
    background: rgba(5,14,7,0.95);
}

.ld-input::placeholder { color: rgba(100,150,110,0.50); font-size:0.76rem; }

/* Remove number-input spinners in WebKit */
.ld-input[type="number"]::-webkit-inner-spin-button,
.ld-input[type="number"]::-webkit-outer-spin-button { opacity: 0.4; }

/* ═══ BUTTONS ═══ */
.btn-ld-primary {
    background: var(--ld-green);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.46rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, box-shadow 0.18s, transform 0.1s;
}

.btn-ld-primary:hover {
    background: #248f49;
    box-shadow: 0 0 10px var(--ld-green-glow);
    transform: translateY(-1px);
}

.btn-ld-primary:active { transform: translateY(0); }

.btn-ld-secondary {
    background: transparent;
    color: var(--ld-green);
    border: 1px solid var(--ld-green);
    border-radius: 6px;
    padding: 0.44rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.1s;
}

.btn-ld-secondary:hover {
    background: var(--ld-green-lt);
    color: #6de898;
    box-shadow: 0 0 8px var(--ld-green-lt);
    transform: translateY(-1px);
}

.btn-ld-clear {
    background: transparent;
    color: var(--ld-red);
    border: 1px solid rgba(192,48,48,0.50);
    border-radius: 6px;
    padding: 0.44rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, transform 0.1s;
}

.btn-ld-clear:hover {
    background: rgba(192,48,48,0.12);
    color: #ef6060;
    transform: translateY(-1px);
}

/* ═══ UPDATE RANGE BUTTON ═══ */
/* Muted by default (data within range or no data); highlights when data extends beyond the model */
.btn-ld-update {
    width: 100%;
    background: transparent;
    color: rgba(196,137,43,0.50);
    border: 1px solid rgba(196,137,43,0.28);
    border-radius: 6px;
    padding: 0.42rem 1rem;
    font-size: 0.81rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.1s;
}

.btn-ld-update:hover {
    background: rgba(196,137,43,0.10);
    color: rgba(196,137,43,0.82);
    border-color: rgba(196,137,43,0.52);
    transform: translateY(-1px);
}

.btn-ld-update:active { transform: translateY(0); }

/* Alert state — data extends outside the declared model range */
.btn-ld-update.update-alert {
    background: var(--ld-gold);
    color: #0a0a0a;
    border-color: var(--ld-gold);
    box-shadow: 0 0 12px rgba(196,137,43,0.55);
    animation: updatePulse 2s ease-in-out infinite;
}

.btn-ld-update.update-alert:hover {
    background: #e8b84a;
    color: #000;
    border-color: #e8b84a;
    box-shadow: 0 0 20px rgba(196,137,43,0.78);
    animation: none;
    transform: translateY(-1px);
}

@keyframes updatePulse {
    0%,  100% { box-shadow: 0 0 7px  rgba(196,137,43,0.38); }
    50%        { box-shadow: 0 0 22px rgba(196,137,43,0.82); }
}

/* ═══ COUNT PARA ═══ */
.ld-count-para {
    margin-top: 0.65rem;
    font-size: 0.80rem;
    font-style: italic;
    color: rgba(196,137,43,0.68);
    min-height: 1.3em;
    margin-bottom: 0;
}

/* ═══ HINT TEXT ═══ */
.ld-hint {
    font-size: 0.74rem;
    color: rgba(150,180,160,0.55);
    line-height: 1.4;
    margin-bottom: 0;
}

/* ═══ NAV PILLS (generator) ═══ */
.ld-pills .nav-link {
    color: rgba(170,210,180,0.70);
    font-size: 0.82rem;
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
    transition: all 0.18s;
}

.ld-pills .nav-link:hover {
    color: var(--ld-green);
    background: var(--ld-green-lt);
}

.ld-pills .nav-link.active {
    background: var(--ld-green);
    color: #fff;
    box-shadow: 0 0 8px var(--ld-green-glow);
}

/* ═══ RESULTS SECTION ═══ */
.ld-results-hidden {
    display: none;
}

/* ═══ SCORE CARD ═══ */
.ld-score-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 1rem 0.5rem;
}

.ld-score-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid var(--ld-green);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--ld-card);
    box-shadow: 0 0 20px var(--ld-green-glow);
    transition: border-color 0.4s, box-shadow 0.4s;
}

/* Score circle grades — border color via data-grade */
.ld-score-circle[data-grade="A"] {
    border-color: var(--ld-green);
    box-shadow: 0 0 20px var(--ld-green-glow);
}
.ld-score-circle[data-grade="B"] {
    border-color: #4aaa6e;
    box-shadow: 0 0 18px rgba(74,170,110,0.30);
}
.ld-score-circle[data-grade="C"] {
    border-color: var(--ld-gold);
    box-shadow: 0 0 18px var(--ld-gold-lt);
}
.ld-score-circle[data-grade="D"] {
    border-color: #d07020;
    box-shadow: 0 0 18px rgba(208,112,32,0.28);
}
.ld-score-circle[data-grade="F"] {
    border-color: var(--ld-red);
    box-shadow: 0 0 18px rgba(192,48,48,0.30);
}

.ld-score-value {
    font-family: 'Boogaloo', sans-serif;
    font-size: 2.4rem;
    color: #e0f5e4;
    line-height: 1;
}

.ld-score-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(180,220,190,0.55);
    margin-top: 0.1rem;
}

.ld-score-verdict {
    font-size: 1rem;
    font-style: italic;
    color: rgba(210,240,220,0.85);
    text-align: center;
    max-width: 580px;
    line-height: 1.5;
}

/* ═══ TEST CARDS ═══ */
.ld-test-card {
    background: var(--ld-card);
    border: 1px solid var(--ld-border);
    border-radius: 8px;
    padding: 1rem 1.1rem;
    height: 100%;
}

.ld-test-title {
    font-weight: 700;
    font-size: 0.84rem;
    color: var(--ld-gold);
    margin-bottom: 0.6rem;
}

.ld-test-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(150,190,160,0.55);
}

.ld-test-stat,
.ld-test-p {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.84rem;
    color: rgba(210,245,220,0.88);
}

.ld-test-verdict {
    font-style: italic;
    font-size: 0.80rem;
    line-height: 1.4;
}

.ld-test-verdict.pass { color: #4fd47a; }
.ld-test-verdict.warn { color: var(--ld-gold); }
.ld-test-verdict.fail { color: #ef7070; }
.ld-test-verdict.na   { color: rgba(160,180,165,0.55); }

/* ═══ MODALS ═══ */
.ld-modal-content {
    background: rgba(6,14,9,0.97);
    border: 1px solid rgba(30,122,62,0.30);
    color: rgba(200,238,210,0.90);
}

.ld-modal-header {
    border-bottom: 1px solid rgba(30,122,62,0.20);
}

.ld-modal-footer {
    border-top: 1px solid rgba(30,122,62,0.20);
}

/* ═══ RESPONSIVE TWEAKS ═══ */
@media (max-width: 575px) {
    .hero-title { font-size: 1.75rem; }
    .spark-bar  { font-size: 0.77rem; gap: 0.5rem; }
}

/* ═══ TEST 4 ORDERED-PAIR TOGGLE ═══ */
.ld-pairs-toggle .form-check-input {
    background-color: rgba(4,10,5,0.90);
    border-color: rgba(30,122,62,0.38);
    cursor: pointer;
}

.ld-pairs-toggle .form-check-input:checked {
    background-color: var(--ld-gold);
    border-color: var(--ld-gold);
}

.ld-pairs-toggle .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(196,137,43,0.22);
    border-color: rgba(196,137,43,0.70);
}

.ld-pairs-toggle .form-check-label {
    font-size: 0.81rem;
    font-weight: 600;
    color: rgba(196,137,43,0.52);
    cursor: pointer;
    transition: color 0.18s;
}

.ld-pairs-toggle .form-check-input:checked + .form-check-label {
    color: var(--ld-gold);
}

/* Pairs test card — amber accent instead of green border */
.ld-test-card-pairs {
    border-color: rgba(196,137,43,0.32);
}