/* Phone layout for /learn, /practice, and /discuss only.
   Shared shell, overlay, and tokens stay in their own files. */

.cu-shell .cu-learn :focus,
.cu-shell .cu-learn :focus-visible,
.cu-shell .cu-map :focus,
.cu-shell .cu-map :focus-visible,
.cu-shell .cu-practice-page :focus,
.cu-shell .cu-practice-page :focus-visible,
.cu-shell .cu-discuss-page :focus,
.cu-shell .cu-discuss-page :focus-visible {
    outline: none;
}

html.cu-kbd .cu-shell .cu-learn :focus-visible,
html.cu-kbd .cu-shell .cu-map :focus-visible,
html.cu-kbd .cu-shell .cu-practice-page :focus-visible,
html.cu-kbd .cu-shell .cu-discuss-page :focus-visible {
    outline: 2px solid #0f766e;
    outline-offset: 2px;
}

html.cu-kbd .cu-shell[data-theme="dark"] .cu-learn :focus-visible,
html.cu-kbd .cu-shell[data-theme="dark"] .cu-map :focus-visible,
html.cu-kbd .cu-shell[data-theme="dark"] .cu-practice-page :focus-visible,
html.cu-kbd .cu-shell[data-theme="dark"] .cu-discuss-page :focus-visible {
    outline-color: #5eead4;
}

.cu-learn,
.cu-map,
.cu-practice-page,
.cu-discuss-page {
    max-width: 100%;
    min-width: 0;
}

.cu-learn .cu-gfx,
.cu-learn .cu-gfx__stage,
.cu-learn .cu-gfx-fork,
.cu-learn .cu-gfx-branches,
.cu-learn .cu-gfx-track,
.cu-learn .cu-learn-stage,
.cu-learn .cu-civic-diagram,
.cu-learn .cu-civic-diagram__frame,
.cu-learn .cu-civic-diagram__scroll,
.cu-learn .cu-civic-diagram__viewport,
.cu-learn .cu-diagram,
.cu-map .cu-map-stage,
.cu-map .cu-map-canvas {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.cu-learn .cu-gfx-svg,
.cu-learn .cu-learn-svg,
.cu-learn .cu-gfx svg,
.cu-learn .cu-civic-diagram svg,
.cu-learn svg.cu-tactics {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
}

.cu-learn .cu-gfx-fork > div,
.cu-learn .cu-gfx-col,
.cu-learn .cu-gfx-track > li {
    min-width: 0;
    max-width: 100%;
}

.cu-learn a,
.cu-map button,
.cu-map a,
.cu-practice-page a,
.cu-practice-page button,
.cu-practice-page .cu-mc-option,
.cu-discuss-page a,
.cu-discuss-page button,
.cu-discuss-page .cu-tactic__summary,
.cu-discuss-page .cu-fallacy-chip__vote {
    box-sizing: border-box;
}

.cu-learn .cu-learn-kicker a,
.cu-learn .cu-learn-sources a,
.cu-learn .cu-tactic-more a,
.cu-learn .cu-learn-stage a,
.cu-learn .cu-learn-see a,
.cu-learn .cu-learn-sections a,
.cu-discuss-page .cu-tactic__panel a,
.cu-discuss-page .cu-bill-text-links a,
.cu-discuss-page .cu-bill-index a,
.cu-discuss-page .cu-bill-topics .cu-pill,
.cu-discuss-page .cu-civic-discussion a,
.cu-discuss-page .cu-prov__link,
.cu-discuss-page .cu-chip-btn,
.cu-practice-page .cu-overflow a,
.cu-practice-page .cu-chip-btn,
.cu-practice-page .cu-gym-prompt,
.cu-practice-page .cu-cta,
.cu-practice-page p a,
.cu-practice-page li a,
.cu-discuss-page .cu-overflow a,
.cu-map .cu-map__search-label {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
}

.cu-discuss-page .cu-tactic__summary,
.cu-discuss-page .cu-tactic__more,
.cu-discuss-page .cu-fallacy-chip__vote,
.cu-practice-page .cu-gym-choice,
.cu-practice-page .cu-mc-option,
.cu-practice-page .cu-gym-gate-arrow,
.cu-practice-page .cu-gym-gate-step,
.cu-map .cu-map__hits button,
.cu-map .cu-map__chip,
.cu-map .cu-map__tools button {
    min-height: 44px;
    min-width: 44px;
}

.cu-shell[data-theme="light"] .cu-practice-page .cu-gym-dot:not(.cu-gym-dot--done):not(.cu-gym-dot--current)::after {
    background: rgba(28, 25, 23, 0.4);
}

.cu-practice-page .cu-gym-gate-arrow {
    width: 44px;
    height: 44px;
}

.cu-learn select,
.cu-learn summary,
.cu-practice-page select,
.cu-practice-page summary,
.cu-practice-page label,
.cu-discuss-page select,
.cu-discuss-page summary,
.cu-map select,
.cu-map input,
.cu-map label {
    box-sizing: border-box;
    min-height: 44px;
}

.cu-practice-page summary,
.cu-learn summary,
.cu-discuss-page summary {
    display: flex;
    align-items: center;
}

.cu-practice-page .cu-gym-dot,
.cu-practice-page .cu-gym-dot--current {
    position: relative;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.cu-practice-page .cu-gym-dot::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: rgba(245, 240, 230, 0.45);
}

.cu-practice-page .cu-gym-dot--done::after {
    background: #0f766e;
}

.cu-practice-page .cu-gym-dot--current::after {
    width: 12px;
    height: 12px;
    background: #0d9488;
    box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.35);
}

@media (max-width: 768px) {
    .cu-learn .cu-learn-sections ul,
    .cu-learn .cu-bill-topics,
    .cu-discuss-page .cu-bill-topics,
    .cu-learn .cu-tactics__row,
    .cu-discuss-page .cu-tactics__row,
    .cu-practice-page .cu-hub-tabs,
    .cu-practice-page .cu-overflow,
    .cu-practice-page .cu-fallacy-quickref-bar,
    .cu-discuss-page .cu-overflow,
    .cu-practice-page .cu-gym-dots,
    .cu-practice-page .cu-gym-gate-timeline {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        overflow-x: auto;
        max-width: 100%;
        min-width: 0;
        gap: 0.4rem;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        mask-image: linear-gradient(to right, #000 calc(100% - 1.75rem), transparent);
    }

    .cu-learn .cu-learn-sections a,
    .cu-learn .cu-bill-topics .cu-pill,
    .cu-discuss-page .cu-bill-topics .cu-pill,
    .cu-learn .cu-tactic,
    .cu-discuss-page .cu-tactic,
    .cu-learn .cu-tactic__more,
    .cu-discuss-page .cu-tactic__more,
    .cu-practice-page .cu-overflow a,
    .cu-practice-page .cu-fallacy-quickref-bar .cu-chip-btn,
    .cu-discuss-page .cu-overflow a,
    .cu-practice-page .cu-gym-gate-step,
    .cu-practice-page .cu-gym-dot {
        flex: 0 0 auto;
        scroll-snap-align: start;
        white-space: nowrap;
    }

    .cu-learn .cu-tactics__row:has(details[open]),
    .cu-discuss-page .cu-tactics__row:has(details[open]) {
        flex-wrap: wrap;
        overflow-x: visible;
        mask-image: none;
    }

    .cu-practice-page .cu-gym-choices,
    .cu-practice-page .cu-gym-prompts,
    .cu-practice-page .cu-debate .cu-gym-prompts {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        max-width: 100%;
        max-height: none;
        overflow: visible;
    }

    .cu-practice-page .cu-gym-choice,
    .cu-practice-page .cu-gym-prompt,
    .cu-practice-page .cu-mc-option {
        width: 100%;
        max-width: 100%;
        min-height: 44px;
        white-space: normal;
        text-align: left;
        justify-content: flex-start;
    }

    .cu-discuss-page .cu-discuss-hero__actions,
    .cu-discuss-page .cu-thread__actions,
    .cu-discuss-page .cu-post-actions {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        max-width: 100%;
        min-width: 0;
        mask-image: linear-gradient(to right, #000 calc(100% - 1.75rem), transparent);
    }

    .cu-discuss-page .cu-discuss-hero__actions .cu-chip-btn,
    .cu-discuss-page .cu-thread__actions .cu-chip-btn,
    .cu-discuss-page .cu-post-actions .cu-chip-btn {
        flex: 0 0 auto;
        min-height: 44px;
        white-space: nowrap;
    }
}

@media (max-width: 420px) {
    .cu-shell .cu-practice-page .cu-rule-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.4rem;
        max-width: 100%;
    }

    .cu-shell .cu-practice-page .cu-rule-grid__cell {
        width: 100%;
        min-height: 44px;
        text-align: left;
    }

    .cu-learn .cu-gfx-fork,
    .cu-learn .cu-gfx-fork:has(> :nth-child(3)),
    .cu-learn .cu-gfx-branches {
        grid-template-columns: minmax(0, 1fr);
    }

    .cu-learn .cu-learn-stage .cu-civic-diagram[data-cu-civic-diagram^="learn-"]:not(.cu-civic-diagram--open) .cu-civic-diagram__preview,
    .cu-learn .cu-civic-diagram__frame {
        max-width: 100%;
        overflow-x: clip;
    }
}