/* Algebraic Solution Styles */
.solution-panel { padding: 18px; overflow-y: hidden; display: flex; flex-direction: column; min-height: 0; }
.solution-content-wrapper { padding: 14px; background: var(--bg-secondary); border-radius: 8px; border: 1px solid var(--border); line-height: 1.6; color: var(--text-primary); overflow-y: auto; flex: 1; min-height: 0; }
.solution-empty { color: var(--text-muted); font-style: italic; }

/* Single-variable KMAP unavailability notice */
.kmap-unavailable-note {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    height: 100%;
    min-height: 160px;
    color: var(--text-secondary);
    font-size: 14px;
    text-align: center;
    padding: 24px;
}
.kmap-unavailable-note svg {
    color: var(--text-muted);
    opacity: 0.7;
}
.kmap-unavailable-note strong {
    color: var(--text-primary);
}

.alg-note-footer {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    margin-top: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.alg-note-footer svg {
    margin-top: 2px;
    color: var(--accent);
}
.alg-note-footer .solution-empty { color: var(--text-muted); font-style: italic; }
.thinking-spinner {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--accent);
    font-weight: 500;
}
.thinking-dots::after {
    content: '';
    animation: thinkingPulse 1.4s infinite;
}

@keyframes thinkingPulse {
    0% { content: '.'; }
    33% { content: '..'; }
    66% { content: '...'; }
}

.solution-split-view {
    display: flex;
    gap: 20px;
    height: 100%;
    width: 100%;
}

.solution-split-view.alg-unavailable #panel-alg {
    display: none !important;
}

.solution-split-view.alg-unavailable #panel-qm {
    flex: 1 1 100% !important;
    width: 100% !important;
}

/* Hide the toggle bar on Desktop */
.mobile-bottom-tabs {
    display: none;
    flex-shrink: 0;
    width: 100%;
    height: 44px;
    margin-top: 12px;
}

/* No algebraic proof to switch to - there's nothing to toggle between, so
   the tab bar (and its "Algebraic Proof" pill) is hidden outright. When the
   tab bar is hidden on mobile, CSS overrides panel visibility directly
   instead of relying on JS to change data-active-tab (which caused the
   mid-typing auto-switch bug). */
#solution-mobile-tabs.alg-unavailable {
    display: none !important;
}

/* On mobile, when alg is unavailable, always show QM regardless of
   data-active-tab so the user sees something useful even if JS hasn't
   updated the tab state yet. Only applies inside the mobile breakpoint
   where the two panels are mutually exclusive. */
@media (max-width: 768px) {
    #solution-split-view:has(~ #solution-mobile-tabs.alg-unavailable) #panel-alg {
        display: none !important;
    }
    #solution-split-view:has(~ #solution-mobile-tabs.alg-unavailable) #panel-qm {
        display: flex !important;
    }
}

.mobile-bottom-tabs .pill-toggle {
    width: 100%;
}

/* Higher specificity than the generic ".pill-toggle .pill-option" compact
   override further down (meant for the SOP/POS and theme pills) - without
   this, "Algebraic Proof" / "Quine-McCluskey" were being silently shrunk to
   10.5px (9.5px under 480px) instead of the size intended here, since that
   generic rule wins any tie by being declared later. */
.mobile-bottom-tabs .pill-toggle .pill-option {
    flex: 1;
    font-size: 12.5px;
    padding: 6px 6px;
    white-space: nowrap;
    letter-spacing: -0.01em;
}

/* Algebraic Proof Steps & QM Rows - Thinner, sleeker design */
.qm-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 6px;
    border-radius: 4px;
}

.algebraic-step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    border-radius: 6px;
    margin: 2px 0;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.algebraic-step:last-child {
    border-bottom: none;
}

.algebraic-step:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--accent);
}

.algebraic-step.no-rule-dialog {
    cursor: default;
}

.algebraic-step.no-rule-dialog:hover {
    background-color: transparent;
    border-color: var(--border);
}

.alg-expr {
    font-family: 'STIX Two Text', 'Outfit', serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.alg-reason {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Rule Explanation Interactive Modal */
.rule-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: modalFadeIn 0.2s ease-out;
}

@keyframes modalFadeIn {
    from { opacity: 0; transform: scale(0.97); }
    to { opacity: 1; transform: scale(1); }
}

.rule-modal-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 14px;
    max-width: 520px;
    width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.rule-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-tertiary);
}

.rule-modal-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rule-modal-badge {
    padding: 3px 8px;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.rule-modal-heading {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.rule-modal-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: color 0.15s ease, background 0.15s ease;
}

.rule-modal-close:hover {
    color: var(--text-primary);
    background: var(--bg-secondary);
}

.rule-modal-body {
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.rule-modal-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rule-modal-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.rule-modal-step-diff {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: 'STIX Two Text', 'Outfit', serif;
    font-size: 15px;
}

.rule-diff-before, .rule-diff-after {
    display: flex;
    align-items: center;
    gap: 8px;
}

.diff-tag {
    font-family: 'Outfit', sans-serif;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.05em;
}

.rule-diff-before .diff-tag { background: rgba(255, 69, 58, 0.15); color: #ff453a; }
.rule-diff-after .diff-tag { background: rgba(48, 209, 88, 0.15); color: #30d158; }

.rule-modal-desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.rule-formula-box {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
    font-family: 'Fira Code', 'STIX Two Text', monospace;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
}

.rule-examples-list {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: var(--text-primary);
}

.rule-examples-list code {
    font-family: 'Fira Code', 'STIX Two Text', monospace;
    background: var(--bg-primary);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
}

.solution-split-view > .solution-panel {
    flex: 1;
    min-width: 0;
    min-height: 0;
}

/* K-Map panel with no header - let the visual area use the full card */
.kmap-panel-noheader { padding: 12px; }
.kmap-panel-noheader #kmap-visual-wrapper { flex: 1; min-height: 0; }

/* Wrap view: the loop-group SVG overlay is larger than the visible viewport
   (it draws into off-screen tiles that get scrolled into view via transform).
   Without overflow:visible, anything outside the initial box gets clipped
   and the group boxes silently fail to render once you pan. */
#kmap-wrap-svg-overlay { overflow: visible; }


/* No algebraic proof to switch to - there's nothing to toggle between, so
   the tab bar (and its "Algebraic Proof" pill) is hidden outright. When the
   tab bar is hidden on mobile, CSS overrides panel visibility directly
   instead of relying on JS to change data-active-tab (which caused the
   mid-typing auto-switch bug). */
#solution-mobile-tabs.alg-unavailable {
    display: none !important;
}

/* On mobile, when alg is unavailable, always show QM regardless of
   data-active-tab so the user sees something useful even if JS hasn't
   updated the tab state yet. Only applies inside the mobile breakpoint
   where the two panels are mutually exclusive. */

/* ==========================================================================
   Concept Popover: Learn More button
   ========================================================================== */
.concept-popover-learn-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 10px;
    padding: 8px 10px;
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
    border-radius: 6px;
    font-family: 'Outfit', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.concept-popover-learn-btn:hover {
    background: var(--accent);
    color: #fff;
}

/* ==========================================================================
   Learn Page: detailed teaching modal opened from a concept's Pro Tip
   ========================================================================== */
.learn-page-modal {
    max-width: 720px;
    width: 100%;
}

.learn-page-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.learn-section {
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}

.learn-section:last-child {
    border-bottom: none;
}

.learn-section h4 {
    margin: 0 0 8px 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.01em;
}

.learn-section p {
    margin: 0 0 8px 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--text-primary);
}

.learn-section p:last-child {
    margin-bottom: 0;
}

.learn-section ul {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.learn-section li {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-primary);
}

.learn-section code {
    font-family: 'Fira Code', 'STIX Two Text', monospace;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 13px;
}

@media (max-width: 640px) {
    .learn-page-modal {
        max-width: 100%;
    }
}