/* ============================================
   IR vs. RF Remote Diagnostic Decision Tree — Stylesheet
   Theme-aware (uses themes.css variables), responsive, a11y
   ============================================ */

/* --- Non-invasive note --- */
.rid-note {
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--text-secondary);
    padding: 0.7rem 1rem;
    margin-bottom: 1.25rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-left: 3px solid var(--warning);
    border-radius: var(--radius);
}

.rid-note strong { color: var(--warning); }

/* --- Progress breadcrumbs --- */
.rid-progress {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 1.25rem;
    padding: 0.6rem 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: 0.72rem;
}

.rid-crumb {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.55rem;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.rid-crumb:hover,
.rid-crumb:focus-visible {
    color: var(--accent);
    border-color: var(--border-hover);
    background: var(--accent-glow);
    outline: none;
}

.rid-crumb--current {
    color: var(--text-primary);
    font-weight: 600;
    cursor: default;
}

.rid-crumb-sep { color: var(--text-muted); }

.rid-crumb-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 0.25rem;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--bg-primary);
    background: var(--accent);
    border-radius: 4px;
}

.rid-crumb-chip {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    border: 1px solid currentColor;
}

.rid-crumb-chip--yes    { color: var(--success); }
.rid-crumb-chip--no     { color: var(--error); }
.rid-crumb-chip--unsure { color: var(--warning); }
.rid-crumb-chip--info   { color: var(--text-secondary); }

/* --- Stage / question surface --- */
.rid-stage {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    min-height: 320px;
}

.rid-step-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.rid-step-badge {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--bg-primary);
    background: var(--accent);
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
}

.rid-step-of {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--text-muted);
}

.rid-heading {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1.1rem;
    line-height: 1.4;
    outline: none;
}

.rid-heading:focus-visible {
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-underline-offset: 4px;
}

/* --- Option buttons --- */
.rid-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
    padding: 0.85rem 1.1rem;
    margin-bottom: 0.6rem;
    background: var(--gradient-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: var(--text-primary);
    transition: border-color var(--transition), box-shadow var(--transition), transform 0.15s ease;
}

.rid-option:hover,
.rid-option:focus-visible {
    border-color: var(--border-hover);
    box-shadow: 0 2px 14px var(--accent-glow);
    outline: none;
}

.rid-option-chip {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    border: 1px solid currentColor;
    white-space: nowrap;
}

.rid-option-chip--yes    { color: var(--success); }
.rid-option-chip--no     { color: var(--error); }
.rid-option-chip--unsure { color: var(--warning); }
.rid-option-chip--info   { color: var(--text-secondary); }

.rid-option-label {
    flex: 1 1 auto;
    line-height: 1.45;
}

.rid-option-go {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--accent);
    transition: transform 0.2s ease;
}

.rid-option:hover .rid-option-go,
.rid-option:focus-visible .rid-option-go {
    transform: translateX(4px);
}

/* --- Hint disclosure --- */
.rid-hint {
    margin-top: 1rem;
    padding: 0.8rem 1rem;
    background: var(--bg-card-solid);
    border: 1px solid var(--border);
    border-left: 3px solid var(--warning);
    border-radius: var(--radius);
}

.rid-hint summary {
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    list-style: none;
}

.rid-hint summary::-webkit-details-marker { display: none; }

.rid-hint summary::before {
    content: '+';
    display: inline-block;
    width: 1rem;
    margin-right: 0.4rem;
    color: var(--warning);
    font-weight: 700;
}

.rid-hint[open] summary::before { content: '\2212'; }

.rid-hint summary:hover { color: var(--accent); }

.rid-hint p {
    margin: 0.6rem 0 0;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* --- Verdict card --- */
.rid-verdict {
    background: var(--gradient-card);
    border: 1px solid var(--border);
    border-top: 2px solid var(--rid-verdict-color, var(--accent));
    border-radius: var(--radius);
    padding: 1.5rem;
}

.rid-verdict--ir     { --rid-verdict-color: var(--warning); }
.rid-verdict--rf     { --rid-verdict-color: var(--accent); }
.rid-verdict--hybrid { --rid-verdict-color: var(--accent-secondary); }

.rid-verdict-badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--bg-primary);
    background: var(--rid-verdict-color, var(--accent));
    padding: 0.3rem 0.55rem;
    border-radius: 4px;
    margin-bottom: 0.75rem;
}

.rid-verdict-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--rid-verdict-color, var(--text-primary));
    margin: 0 0 0.4rem;
    outline: none;
}

.rid-verdict-title:focus-visible {
    text-decoration: underline;
    text-decoration-color: var(--rid-verdict-color, var(--accent));
    text-underline-offset: 4px;
}

.rid-verdict-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    border: 1px solid var(--border-hover);
    border-radius: 12px;
    padding: 0.15rem 0.6rem;
    margin-bottom: 1rem;
}

.rid-verdict-summary {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text-primary);
    margin: 0 0 1.25rem;
}

/* --- Shared section label --- */
.rid-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
}

/* --- How your answers read --- */
.rid-answers {
    margin-bottom: 1.25rem;
}

.rid-answers-list {
    margin: 0;
    padding-left: 1.2rem;
    list-style: none;
    counter-reset: ridans;
}

.rid-answers-list li {
    counter-increment: ridans;
    position: relative;
    padding: 0.4rem 0 0.4rem 1.6rem;
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--text-secondary);
    border-bottom: 1px dashed var(--border);
}

.rid-answers-list li:last-child { border-bottom: none; }

.rid-answers-list li::before {
    content: counter(ridans);
    position: absolute;
    left: 0;
    top: 0.45rem;
    width: 1.1rem;
    height: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-glow);
    border: 1px solid var(--border-hover);
    border-radius: 50%;
}

/* --- Typical specs grid --- */
.rid-specs { margin-bottom: 1.25rem; }

.rid-spec-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.rid-spec {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.65rem 0.85rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.rid-spec-k {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.rid-spec-v {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-primary);
}

/* --- Bench tests --- */
.rid-tests { margin-bottom: 1.25rem; }

.rid-tests-list {
    margin: 0;
    padding-left: 0;
    list-style: none;
    counter-reset: ridtest;
}

.rid-tests-list li {
    counter-increment: ridtest;
    position: relative;
    padding: 0.6rem 0 0.6rem 2.4rem;
    border-bottom: 1px dashed var(--border);
}

.rid-tests-list li:last-child { border-bottom: none; }

.rid-tests-list li::before {
    content: counter(ridtest);
    position: absolute;
    left: 0;
    top: 0.65rem;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-glow);
    border: 1px solid var(--border-hover);
    border-radius: 50%;
}

.rid-tests-list li strong {
    display: block;
    font-size: 0.86rem;
    color: var(--text-primary);
    margin-bottom: 0.15rem;
}

.rid-tests-list li span {
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

/* --- Cross-link to the RF reference sheet --- */
.rid-rf-link {
    margin-top: 0.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

.rid-rf-note {
    margin: 0.6rem 0 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-muted);
}

/* --- Action buttons --- */
.rid-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.25rem;
}

.rid-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1.15rem;
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--transition);
}

.rid-btn svg { flex-shrink: 0; }

.rid-btn--primary {
    background: var(--accent);
    color: var(--bg-primary);
}

.rid-btn--primary:hover {
    background: var(--accent-hover);
    box-shadow: 0 4px 15px var(--accent-glow);
}

.rid-btn--ghost {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--border);
}

.rid-btn--ghost:hover {
    color: var(--accent);
    border-color: var(--accent);
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .rid-spec-grid { grid-template-columns: minmax(0, 1fr); }
    .rid-stage { padding: 1.1rem; }
    .rid-verdict { padding: 1.1rem; }
    .rid-progress { font-size: 0.68rem; }
}

@media (max-width: 480px) {
    .rid-crumb-title { display: none; }
    .rid-stage { padding: 0.9rem; }
    .rid-verdict { padding: 0.9rem; }
    .rid-step-badge,
    .rid-verdict-badge { font-size: 0.58rem; }
    .rid-heading { font-size: 0.98rem; }
    .rid-verdict-title { font-size: 1.08rem; }
    .rid-option { padding: 0.75rem 0.9rem; font-size: 0.84rem; flex-wrap: wrap; align-items: center; }
    .rid-option-go { margin-left: auto; }
    .rid-option-label { flex: 1 1 100%; order: 3; margin-top: 0.35rem; }
}

/* Non-rid- rule: clear the fixed nav when the RF cross-link scrolls the
   sheet into view. 120px matches the scroll-margin used in
   repair-page.css / protocol-page.css. */
#panel-rf { scroll-margin-top: 120px; }