/* Site-wide styles */
html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f8f9fa;
}

/* Ensure entire site max-width matches banner (1140px) */
header .container,
main.container {
    max-width: 1140px;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: #ffffff;
    border-top: 1px solid #e9ecef;
}

.footer .container {
    max-width: 1140px;
}

/* Custom Color Palette - Softer, Modern Colors */
:root {
    --soft-blue: #5B9BD5;
    --soft-blue-dark: #4A7FB8;
    --soft-cyan: #70B8C9;
    --soft-cyan-dark: #5A9BAA;
    --soft-orange: #F2994A;
    --soft-orange-dark: #E67E22;
    --soft-green: #7BB68A;
    --soft-green-dark: #649B70;
    --soft-coral: #E89F8D;
    --soft-lavender: #B4A7D6;
}

/* ============================================
   TIGHTER, MORE POLISHED UI IMPROVEMENTS
   ============================================ */

/* Compact page header */
.page-header-compact {
    padding: 1rem 0 0.5rem;
    margin-bottom: 1rem;
}

    .page-header-compact h1 {
        font-size: 2rem;
        margin-bottom: 0.5rem;
        font-weight: 700;
        line-height: 1.2;
    }

    .page-header-compact .lead {
        font-size: 1rem;
        margin-bottom: 0;
        line-height: 1.4;
    }

/* Tighter card spacing */
.card-compact {
    margin-bottom: 1rem;
}

    .card-compact .card-header {
        padding: 0.65rem 1rem;
        font-size: 0.95rem;
    }

    .card-compact .card-body {
        padding: 1rem;
    }

/* Form optimizations */
.form-control-compact {
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
}

.form-label-compact {
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
    font-weight: 600;
}

/* Tighter form-check spacing */
.form-check-compact {
    margin-bottom: 0.4rem;
    padding-left: 1.75rem;
}

    .form-check-compact .form-check-input {
        margin-top: 0.2rem;
    }

    .form-check-compact .form-check-label {
        font-size: 0.9rem;
    }

/* Compact options panel */
#optionsPanel .card-body {
    padding: 0.85rem;
}

#optionsPanel .form-label {
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
}

#optionsPanel .form-check {
    margin-bottom: 0.35rem;
}

/* Tighter instructions */
#instructions ol {
    margin-bottom: 0;
    padding-left: 1.25rem;
}

    #instructions ol li {
        margin-bottom: 0.75rem;
        font-size: 0.95rem;
    }

        #instructions ol li:last-child {
            margin-bottom: 0;
        }

#instructions p, #instructions ul {
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

#instructions ul {
    padding-left: 1.25rem;
    margin-bottom: 0;
}

    #instructions ul li {
        margin-bottom: 0.25rem;
    }

/* Compact sidebar */
.sidebar-compact .card {
    margin-bottom: 1rem;
}

.sidebar-compact .card-header {
    padding: 0.65rem 1rem;
}

.sidebar-compact .card-body {
    padding: 0.85rem;
}

.sidebar-compact .list-group-item {
    padding: 0.65rem 1rem;
    font-size: 0.9rem;
}

.sidebar-compact ul.small {
    font-size: 0.875rem;
}

    .sidebar-compact ul.small li {
        margin-bottom: 0.5rem;
    }

/* Tighter ad spacing */
.ad-container-compact {
    margin-bottom: 1rem;
}

/* Compact button group */
.btn-group-compact .btn {
    padding: 0.4rem 0.8rem;
    font-size: 0.9rem;
}

/* Translation results compact */
.translation-results-compact {
    padding: 0.75rem;
}

/* Responsive spacing adjustments */
@media (min-width: 992px) {
    /* Desktop gets slightly more breathing room */
    .page-header-compact {
        padding: 1.5rem 0 1rem;
        margin-bottom: 1.5rem;
    }

        .page-header-compact h1 {
            font-size: 2.25rem;
        }

        .page-header-compact .lead {
            font-size: 1.1rem;
        }
}

/* Utility classes for spacing control */
.mb-compact {
    margin-bottom: 0.75rem !important;
}

.mt-compact {
    margin-top: 0.75rem !important;
}

.p-compact {
    padding: 0.75rem !important;
}

.px-compact {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

.py-compact {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

/* Existing styles continued below... */

/* Hero Section */
.hero-section {
    padding: 2rem 0 1rem;
}

    .hero-section h1 {
        color: #2c3e50;
        font-weight: 700;
    }

    .hero-section .lead {
        color: #6c757d;
        font-size: 1.1rem;
    }

/* Translation CTA Section */
.translation-cta-section {
    animation: fadeInUp 0.6s ease-out;
}

.bg-gradient {
    background: linear-gradient(135deg, var(--soft-blue) 0%, var(--soft-blue-dark) 100%);
}

.btn-xl {
    font-size: 1.1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    border: none;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn-xl:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 16px rgba(0,0,0,0.15) !important;
    }

    .btn-xl i {
        flex-shrink: 0;
    }

    /* The label block must be allowed to wrap and shrink. `.btn` sets white-space: nowrap
       site-wide, and a flex item will not shrink below its content by default, so a long label
       ("Traditional Chinese to Pinyin & English") ran past the screen edge and the homepage
       scrolled sideways on phones: right edge 422-471px at 390px wide (2026-10-09). Scoped to
       .btn-xl so the header buttons keep nowrap and stay one line tall. */
    .btn-xl .d-inline-block {
        flex-grow: 1;
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }

/* Step Numbers */
.step-number {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--soft-blue) 0%, var(--soft-blue-dark) 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    flex-shrink: 0;
    box-shadow: 0 4px 8px rgba(91, 155, 213, 0.3);
}

/* Translation Output Display */
.translation-output {
    border-left: 4px solid var(--soft-blue);
}

/* Homepage "How It Works": source/device artwork and the three translator chips */
.step-body {
    flex: 1 1 auto;
    min-width: 0;
}

/* The artwork includes dark labels: keep its pale stage in both site themes. */
.device-stage {
    margin: 0 0 1rem;
    padding: clamp(.5rem, 2.5vw, 1.25rem);
    border-radius: 1rem;
    background:
        radial-gradient(circle at 15% 15%, #dbeafe, transparent 55%),
        radial-gradient(circle at 90% 85%, #ccfbf1, transparent 50%),
        #f1f5f9;
}

    .device-stage picture {
        display: block;
    }

    .device-stage img {
        display: block;
        width: 100%;
        max-width: 640px;
        height: auto;
        aspect-ratio: 640 / 380;
        margin: 0 auto;
    }

    .text-source-stage img {
        aspect-ratio: 640 / 320;
    }

/* On a phone the step text is indented past the 35px step number (and its me-3), which left the
   picture 234px wide at 390. Let the stage take that indent back so it spans the card. */
@media (max-width: 767px) {
    .device-stage {
        margin-left: calc(-35px - 1rem);
    }

    .device-stage img {
        max-width: 360px;
        aspect-ratio: 360 / 592;
    }

    .text-source-stage img {
        aspect-ratio: 360 / 414;
    }
}

.step-kicker {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.step-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .9rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}

    .step-chip:hover,
    .step-chip:focus-visible {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(15, 23, 42, .12);
    }

.step-chip-chinese { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.step-chip-pinyin { background: #f0fdfa; border-color: #99f6e4; color: #0f766e; }
.step-chip-english { background: #fffbeb; border-color: #fde68a; color: #92400e; }

[data-bs-theme="dark"] .step-chip-chinese { background: rgba(59, 130, 246, .15); border-color: rgba(96, 165, 250, .4); color: #93c5fd; }
[data-bs-theme="dark"] .step-chip-pinyin { background: rgba(20, 184, 166, .15); border-color: rgba(45, 212, 191, .4); color: #5eead4; }
[data-bs-theme="dark"] .step-chip-english { background: rgba(245, 158, 11, .15); border-color: rgba(251, 191, 36, .4); color: #fcd34d; }

.step-options li {
    padding: .25rem .65rem;
    border-radius: 999px;
    background: var(--bs-tertiary-bg, #f8f9fa);
    font-size: .8125rem;
}

@media (prefers-reduced-motion: reduce) {
    .step-chip {
        transition: none;
    }

        .step-chip:hover,
        .step-chip:focus-visible {
            transform: none;
        }
}

/* Ad Container */
.ad-container {
    max-width: 100%;
    overflow: hidden;
}

/* Lazy ad slots (filled by adlazy.js when scrolled near the viewport).
   Min-heights reserve space so the injected ad doesn't shift content (CLS). */
.ad-slot {
    display: block;
}

.ad-slot-banner {
    min-height: 100px;
}

.ad-slot-infeed {
    min-height: 250px;
}

/* Native in-article unit. Fluid units size themselves to the rendered creative, so this
   reserves a typical native height rather than a fixed one - enough to blunt CLS without
   leaving a tall gap when a short creative serves. */
.ad-slot-inarticle {
    min-height: 200px;
}

/* Thin banner above the card on the subject flashcard decks, phones and tablets
   (_AdThinBanner, 2026-10-08). An exact size, not "auto": auto renders a 300x250 on a phone,
   and the card plus Previous/Next must still fit one screen with the banner above them.
   Google's documented way to fix a responsive unit's size is a CSS width and height on the
   <ins> with no data-ad-format (adlazy.js data-ad-fixed-class). The slot reserves the same
   height, so a late fill cannot push the card and the held-still button row down. */
.ad-thin-banner {
    display: inline-block;
    width: 320px;
    height: 100px;
}

.ad-slot-thin,
.ad-placeholder.ad-thin {
    min-height: 100px;
    margin: 0;
}

@media (min-width: 576px) {
    .ad-thin-banner {
        width: 468px;
        height: 60px;
    }

    .ad-slot-thin,
    .ad-placeholder.ad-thin {
        min-height: 60px;
    }
}

@media (min-width: 992px) {
    /* Sticky sidebar rail - sized for a 300x250 rectangle (2026-08-07). It was 620px for a
       300x600 half-page, but the vertical sizes were the worst-earning inventory on the
       site (160x600: CA$0.35 impression RPM and zero clicks) so the rail now requests
       data-ad-format="rectangle". Reserving 620px for a 250px creative would leave a
       ~370px hole in the sidebar. */
    .ad-slot-rail {
        min-height: 280px;
    }
}

/* Internal "Where to go next" links (Pages/Shared/_RelatedLinks.cshtml).
   Never printed: the block sits on printable pages too (worksheet generators, practice
   sheets, HSK word lists, the translators) and a nav card on a printed worksheet is noise.
   Pages with their own no-print convention (.hsk-no-print, .st-no-print, .pb-no-print)
   keep it; this is the global rule so a new page cannot forget. */
@media print {
    .related-links {
        display: none !important;
    }
}

/* The results-view "Next:" row (Pages/Shared/_ResultsNextStep.cshtml).

   Only one rule, and it is a contrast fix rather than a look. The buttons are
   .btn-outline-secondary, which this stylesheet hardcodes to #6c757d at line ~726 with no
   dark-mode override; on the dark card surface (--pl-surface, #24282e) that measures 3.16:1,
   under the 4.5:1 floor for text. The whole value of this block is that it gets clicked, so
   it takes the theme's own text colour instead of the fixed grey. Scoped deliberately: the
   same low contrast applies to ~215 other .btn-outline-secondary uses across the site, and
   fixing those is a separate change with a much wider blast radius. */
[data-bs-theme="dark"] .results-next-step .next-step-link {
    color: var(--pl-text);
    border-color: var(--pl-border);
}

    [data-bs-theme="dark"] .results-next-step .next-step-link:hover,
    [data-bs-theme="dark"] .results-next-step .next-step-link:focus-visible {
        background-color: var(--pl-surface-2);
        border-color: var(--pl-text-muted);
        color: var(--pl-text);
    }

/* Navbar */
.navbar {
    background: linear-gradient(135deg, var(--soft-blue) 0%, var(--soft-blue-dark) 100%);
    padding: 1rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.navbar-brand {
    color: white !important;
    font-weight: bold;
    font-size: 1.5rem;
}

.nav {
    list-style: none;
    display: flex;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
}

    .nav a {
        color: white;
        text-decoration: none;
        transition: opacity 0.2s ease;
    }

        .nav a:hover {
            opacity: 0.85;
            text-decoration: underline;
        }

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Bootstrap-like utilities */
.text-center {
    text-align: center;
}

.mb-1 {
    margin-bottom: 0.25rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-3 {
    margin-bottom: 1rem;
}

.mb-4 {
    margin-bottom: 1.5rem;
}

.mb-5 {
    margin-bottom: 3rem;
}

.my-3 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.my-4 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.mt-3 {
    margin-top: 1rem;
}

.mt-4 {
    margin-top: 1.5rem;
}

.me-1 {
    margin-right: 0.25rem;
}

.me-2 {
    margin-right: 0.5rem;
}

.me-3 {
    margin-right: 1rem;
}

.p-2 {
    padding: 0.5rem;
}

.p-3 {
    padding: 1rem;
}

.p-4 {
    padding: 1.5rem;
}

.p-5 {
    padding: 3rem;
}

.py-3 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.py-4 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.w-100 {
    width: 100%;
}

.h-100 {
    height: 100%;
}

.d-block {
    display: block;
}

.d-inline-block {
    display: inline-block;
}

.d-flex {
    display: flex;
}

.align-items-start {
    align-items: flex-start;
}

.align-items-center {
    align-items: center;
}

.justify-content-center {
    justify-content: center;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.flex-grow-1 {
    flex-grow: 1;
}

.text-start {
    text-align: left;
}

.text-muted {
    color: #6c757d !important;
}

.text-primary {
    color: var(--soft-blue) !important;
}

.text-info {
    color: var(--soft-cyan) !important;
}

.text-warning {
    color: var(--soft-orange) !important;
}

.text-success {
    color: var(--soft-green) !important;
}

.text-danger {
    color: #dc3545 !important;
}

.fw-bold {
    font-weight: 700;
}

.opacity-90 {
    opacity: 0.9;
}

.shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
}

.shadow-lg {
    box-shadow: 0 1rem 3rem rgba(0,0,0,0.175);
}

.rounded {
    border-radius: 0.375rem;
}

.border-0 {
    border: 0 !important;
}

.sticky-top {
    position: sticky;
}

/* Cards */
.card {
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: box-shadow 0.2s ease;
    background-color: #ffffff;
}

    .card:hover {
        box-shadow: 0 4px 6px rgba(0,0,0,0.12);
    }

.card-header {
    padding: 0.75rem 1.25rem;
    background-color: #f8f9fa;
    border-bottom: 1px solid rgba(0,0,0,.125);
    border-radius: 0.5rem 0.5rem 0 0;
}

.card-body {
    padding: 1.25rem;
}

.border-info {
    border-color: var(--soft-cyan) !important;
}

.border-warning {
    border-color: var(--soft-orange) !important;
}

.bg-info {
    background: linear-gradient(135deg, var(--soft-cyan) 0%, var(--soft-cyan-dark) 100%) !important;
    border-color: var(--soft-cyan-dark) !important;
    color: #fff !important;
}

.bg-warning {
    background: linear-gradient(135deg, var(--soft-orange) 0%, var(--soft-orange-dark) 100%) !important;
    border-color: var(--soft-orange-dark) !important;
    color: #fff !important;
}

    .bg-warning strong {
        color: #fff !important;
    }

.bg-light {
    background-color: #f8f9fa !important;
}

.text-white {
    color: #fff !important;
}

/* Buttons */
.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.5rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* A full-width button stack is as wide as the screen and no wider, so its labels must wrap.
   With .btn's nowrap, a label longer than a phone pushed the page sideways: the pinyin
   translator's "Translate Pinyin to Chinese & English" reached x=401 on a 320px screen, and
   the name generator's style options x=457 at 390px (2026-10-09). Text only wraps when it
   does not fit, so nothing changes on wider screens. */
.d-grid > .btn {
    white-space: normal;
}

.btn-lg {
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--soft-blue) 0%, var(--soft-blue-dark) 100%);
    border-color: var(--soft-blue-dark);
    box-shadow: 0 2px 4px rgba(91, 155, 213, 0.3);
}

    .btn-primary:hover {
        background: linear-gradient(135deg, var(--soft-blue-dark) 0%, #3D6A9A 100%);
        box-shadow: 0 4px 8px rgba(91, 155, 213, 0.4);
        color: #fff;
        text-decoration: none;
    }

.btn-games {
    --bs-btn-color: #fff;
    --bs-btn-bg: #6f42c1;
    --bs-btn-border-color: #6f42c1;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #59359a;
    --bs-btn-hover-border-color: #59359a;
    --bs-btn-focus-shadow-rgb: 111, 66, 193;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #4c2d84;
    --bs-btn-active-border-color: #4c2d84;
}

.btn-videos {
    --bs-btn-color: #fff;
    --bs-btn-bg: #d63384;
    --bs-btn-border-color: #d63384;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #b02a6f;
    --bs-btn-hover-border-color: #b02a6f;
    --bs-btn-focus-shadow-rgb: 214, 51, 132;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #9a2562;
    --bs-btn-active-border-color: #9a2562;
}

/* Header nav on narrow screens (owner, 2026-10-09). The nav row in both layouts wraps, and every
   row it adds pushes _AdTop (7511680253, ~79% of manual revenue) down on every page on phones. At
   390x844 the English header was 7 rows and the banner started at y=570 on /. Four buttons hide
   as the screen narrows, in the owner's order: TODAY first, then VIDEOS, FLASHCARDS, GAMES.
   Each threshold was measured (injected-CSS what-if, 2026-10-09) to save a header row somewhere
   inside its band, and below 480px, i.e. every phone, all four are gone. At 768px and up nothing
   hides: the banner already sits at y=314-350 there, so hiding would cost navigation for nothing.
   Each hidden destination stays one menu away: the Learning Center dropdown carries it as
   a .nav-narrow-only-N item that appears at the same width its button disappears (N matches).
   Videos needs no item in the English menu (SHORT LESSON VIDEOS is already there), and the /chs
   menu already lists the flashcards and games. */
.nav-narrow-only-1,
.nav-narrow-only-2,
.nav-narrow-only-3,
.nav-narrow-only-4 {
    display: none;
}

@media (max-width: 767.98px) {
    .nav-narrow-hide-1 { display: none !important; }
    .nav-narrow-only-1 { display: list-item; }
}

@media (max-width: 639.98px) {
    .nav-narrow-hide-2 { display: none !important; }
    .nav-narrow-only-2 { display: list-item; }
}

@media (max-width: 575.98px) {
    .nav-narrow-hide-3 { display: none !important; }
    .nav-narrow-only-3 { display: list-item; }
}

@media (max-width: 479.98px) {
    .nav-narrow-hide-4 { display: none !important; }
    .nav-narrow-only-4 { display: list-item; }
}

.btn-info {
    color: #fff;
    background: linear-gradient(135deg, var(--soft-cyan) 0%, var(--soft-cyan-dark) 100%);
    border-color: var(--soft-cyan-dark);
    box-shadow: 0 2px 4px rgba(112, 184, 201, 0.3);
}

    .btn-info:hover {
        background: linear-gradient(135deg, var(--soft-cyan-dark) 0%, #4A8391 100%);
        box-shadow: 0 4px 8px rgba(112, 184, 201, 0.4);
        color: #fff;
        text-decoration: none;
    }

.btn-warning {
    color: #fff;
    background: linear-gradient(135deg, var(--soft-orange) 0%, var(--soft-orange-dark) 100%);
    border-color: var(--soft-orange-dark);
    box-shadow: 0 2px 4px rgba(242, 153, 74, 0.3);
}

    .btn-warning:hover {
        background: linear-gradient(135deg, var(--soft-orange-dark) 0%, #D35400 100%);
        box-shadow: 0 4px 8px rgba(242, 153, 74, 0.4);
        color: #fff;
        text-decoration: none;
    }

.btn-success {
    color: #fff;
    background: linear-gradient(135deg, var(--soft-green) 0%, var(--soft-green-dark) 100%);
    border-color: var(--soft-green-dark);
    box-shadow: 0 2px 4px rgba(123, 182, 138, 0.3);
}

    .btn-success:hover {
        background: linear-gradient(135deg, var(--soft-green-dark) 0%, #547F5C 100%);
        box-shadow: 0 4px 8px rgba(123, 182, 138, 0.4);
        color: #fff;
        text-decoration: none;
    }

.btn-outline-primary {
    color: var(--soft-blue);
    border-color: var(--soft-blue);
    background-color: transparent;
}

    .btn-outline-primary:hover {
        background-color: var(--soft-blue);
        border-color: var(--soft-blue);
        color: #fff;
    }

.btn-outline-secondary {
    color: #6c757d;
    border-color: #6c757d;
    background-color: transparent;
}

    .btn-outline-secondary:hover {
        background-color: #6c757d;
        border-color: #6c757d;
        color: #fff;
    }

/* Alert */
.alert {
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
}

.alert-info {
    color: #3A6B77;
    background-color: #E3F4F7;
    border-color: var(--soft-cyan);
}

/* List Group */
.list-group {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
}

.list-group-flush {
    border-radius: 0;
}

    .list-group-flush .list-group-item {
        border-width: 0 0 1px;
    }

        .list-group-flush .list-group-item:last-child {
            border-bottom-width: 0;
        }

.list-group-item {
    position: relative;
    display: block;
    padding: 0.75rem 1.25rem;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.125);
}

.list-group-item-action {
    color: #495057;
    text-decoration: none;
    transition: all 0.2s ease;
}

    .list-group-item-action:hover {
        background-color: #f8f9fa;
        color: var(--soft-blue);
    }

/* Responsive grid */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.g-3 {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
}

    .g-3 > * {
        padding-right: calc(var(--bs-gutter-x) * 0.5);
        padding-left: calc(var(--bs-gutter-x) * 0.5);
        margin-top: var(--bs-gutter-y);
    }

.g-4 {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
}

    .g-4 > * {
        padding-right: calc(var(--bs-gutter-x) * 0.5);
        padding-left: calc(var(--bs-gutter-x) * 0.5);
        margin-top: var(--bs-gutter-y);
    }

.col-12 {
    flex: 0 0 100%;
    max-width: 100%;
    position: relative;
    padding-right: 15px;
    padding-left: 15px;
}

.col-md-5,
.col-md-6,
.col-md-7,
.col-lg-4,
.col-lg-8 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 768px) {
    .col-md-5 {
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-md-7 {
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .p-md-5 {
        padding: 3rem !important;
    }
}

@media (min-width: 992px) {
    .col-lg-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-lg-8 {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
}

/* Images */
.img-fluid {
    max-width: 100%;
    height: auto;
}

/* Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Translation page specific */
.translation-area {
    width: 100%;
    min-height: 200px;
    padding: 10px;
    border: 1px solid #ced4da;
    border-radius: 0.5rem;
    font-family: monospace;
}

.results-area {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 0.5rem;
    margin-top: 20px;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .btn-xl {
        font-size: 1rem;
        padding: 0.75rem 1rem !important;
    }

    .hero-section h1 {
        font-size: 1.75rem;
    }

    .step-number {
        width: 35px;
        height: 35px;
        font-size: 1.25rem;
    }
}

/* ============================================
   MOBILE-FIRST RESPONSIVE ENHANCEMENTS
   ============================================ */

/* Mobile: Hide sidebar ads completely, show only top ad */
@media (max-width: 991px) {
    /* Hide sidebar on mobile */
    .col-lg-4 .sticky-top {
        position: static !important;
    }

    /* Reduce ad space on mobile */
    .ad-placeholder {
        min-height: 150px;
        font-size: 14px;
    }

    /* Stack content vertically */
    .col-lg-8,
    .col-lg-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Mobile: Touch-friendly buttons */
@media (max-width: 767px) {
    /* Larger, more touch-friendly buttons */
    .btn {
        min-height: 44px; /* Apple's recommended touch target size */
        padding: 0.75rem 1rem;
        font-size: 1rem;
    }

    .btn-lg {
        min-height: 56px;
        padding: 1rem 1.5rem;
        font-size: 1.125rem;
    }

    .btn-sm {
        min-height: 38px;
        padding: 0.5rem 0.75rem;
        font-size: 0.9375rem;
    }

    /* Main translate button - extra prominent on mobile */
    #btnTranslate {
        font-size: 1.25rem !important;
        padding: 1.25rem 1rem !important;
        font-weight: 600 !important;
    }

    /* Radio buttons and checkboxes - larger touch targets */
    .form-check-input {
        width: 1.25rem;
        height: 1.25rem;
        margin-top: 0.125rem;
    }

    .form-check-label {
        padding-left: 0.5rem;
        font-size: 0.9375rem;
        line-height: 1.6;
    }

    /* Textarea - better mobile sizing */
    #txtEnglish {
        font-size: 16px !important; /* Prevents iOS zoom on focus */
        min-height: 150px;
    }

    /* Reduce padding on cards for mobile */
    .card-body {
        padding: 1rem;
    }

    .card-header {
        padding: 0.75rem 1rem;
    }

    /* Compact options panel on mobile */
    #optionsPanel .row {
        margin: 0;
    }

    #optionsPanel .col-md-6 {
        padding: 0.5rem;
    }

    /* Smaller headings on mobile */
    h1.display-6 {
        font-size: 1.75rem !important;
    }

    h2.h5 {
        font-size: 1.125rem !important;
    }

    h3.h6 {
        font-size: 1rem !important;
    }

    .lead {
        font-size: 1rem !important;
    }

    /* Reduce icon sizes on mobile */
    .fa-lg {
        font-size: 1.25rem !important;
    }

    /* Compact step numbers */
    .step-number {
        width: 35px;
        height: 35px;
        font-size: 1.125rem;
    }

    /* Better spacing for instructions */
    #instructions ol li {
        margin-bottom: 1rem !important;
    }

        #instructions ol li p {
            font-size: 0.9375rem;
        }

    /* Compact translation results on mobile */
    .translation-output {
        border-left-width: 3px;
    }

    /* Hide "Advertisement" text on mobile to save space */
    .ad-container small.text-muted {
        display: none;
    }
}

/* Mobile: Landscape orientation optimizations */
@media (max-width: 767px) and (orientation: landscape) {
    /* Reduce vertical spacing in landscape */
    .mb-4 {
        margin-bottom: 1rem !important;
    }

    .mb-3 {
        margin-bottom: 0.75rem !important;
    }

    /* Compact header */
    h1.display-6 {
        font-size: 1.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .lead {
        font-size: 0.9375rem !important;
    }
}

/* Tablet optimizations (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    /* Two-column layout for options on tablet */
    #optionsPanel .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Slightly smaller ads on tablet */
    .ad-placeholder {
        min-height: 200px;
    }

    /* Keep sidebar visible but not sticky on tablet */
    .sticky-top {
        position: static !important;
    }
}

/* Small phones (max-width: 375px) */
@media (max-width: 375px) {
    .container {
        padding: 0 10px;
    }

    /* .row's negative margin must equal .container's padding, or every grid sits outside the
       page. Above 375px both are 15px. Here the padding drops to 10px, and a -15px row put each
       grid 5px past both screen edges: /games and /PinyinLearningCenter (and any page with a
       .row directly in its content) scrolled sideways on 320-375px phones (2026-10-09). */
    .row {
        margin-right: -10px;
        margin-left: -10px;
    }

    .card-body {
        padding: 0.75rem;
    }

    h1.display-6 {
        font-size: 1.5rem !important;
    }

    .btn-lg {
        font-size: 1rem !important;
    }

    /* Stack form options vertically on very small screens */
    #optionsPanel .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Print styles */

/* Copyright + licensing footer on every printable (Pages/Shared/_PrintFooter.cshtml).
   Absent from the screen and present on paper: a printable leaves this site, and the footer is
   the only thing on the saved PDF that says where it came from and what may be done with it.
   Set out of the print block so it is hidden by default even where a page ships its own
   @media print rules and never sees the one below. */
.print-notice {
    display: none;
}

@media print {
    .ad-container,
    .ad-placeholder,
    .btn,
    #optionsPanel,
    .card-header button,
    .sticky-top,
    .navbar {
        display: none !important;
    }

    .card {
        box-shadow: none;
        border: 1px solid #ddd;
    }

    body {
        background-color: white;
    }

    /* !important because several print stylesheets on this site work by hiding everything and
       re-showing one wrapper; the notice has to win that, or it silently prints nothing. */
    .print-notice {
        display: block !important;
        margin-top: 10px;
        padding-top: 6px;
        border-top: 1px solid #999;
        font-size: 7.5pt;
        line-height: 1.35;
        color: #444;
        text-align: left;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .print-notice-line {
        margin: 0 0 2px;
    }

    .print-notice a {
        color: inherit;
        text-decoration: none;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Ad placeholder for development */
.ad-placeholder {
    background-color: #f0f0f0;
    border: 2px dashed #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-family: Arial, sans-serif;
    min-height: 250px;
    margin: 10px 0;
}

.ad-placeholder::before {
    content: "📢 Ad Space (Development Mode)";
    font-size: 16px;
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Increase touch target sizes */
    .btn,
    .list-group-item-action,
    .form-check-input {
        cursor: pointer;
    }

        /* Remove hover effects that don't work on touch */
        .btn:hover {
            transform: none;
        }

        /* Add active states for touch feedback */
        .btn:active {
            transform: scale(0.98);
        }

        .list-group-item-action:active {
            background-color: #e9ecef;
        }
}

/* Fix for card header text and button visibility */
.card-header.bg-gradient h2,
.card-header.bg-success h2 {
    color: #ffffff !important;
}

.card-header.bg-gradient h2,
.card-header.bg-success h2 {
    color: #ffffff !important;
}

/* Fix for collapse button icon visibility in colored headers */
.card-header.bg-gradient .btn-light,
.card-header.bg-success .btn-light {
    color: #212529 !important;
    background-color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.9);
}

    .card-header.bg-gradient .btn-light:hover,
    .card-header.bg-success .btn-light:hover {
        color: #212529 !important;
        background-color: rgba(255, 255, 255, 1);
        border-color: rgba(255, 255, 255, 1);
    }

    .card-header.bg-gradient .btn-light:focus,
    .card-header.bg-gradient .btn-light:active,
    .card-header.bg-gradient .btn-light.active,
    .card-header.bg-success .btn-light:focus,
    .card-header.bg-success .btn-light:active,
    .card-header.bg-success .btn-light.active {
        color: #212529 !important;
        background-color: rgba(255, 255, 255, 1) !important;
        border-color: rgba(255, 255, 255, 1) !important;
        box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5) !important;
    }

    .card-header.bg-gradient .btn-light .fa,
    .card-header.bg-success .btn-light .fa {
        color: #212529 !important;
    }

/* Ensure button text stays dark in all states */
.card-header .btn-light,
.card-header .btn-light:hover,
.card-header .btn-light:focus,
.card-header .btn-light:active,
.card-header .btn-light.active {
    color: #212529 !important;
}

/* Force black text color for translation input header */
#translationInput .card-header h2,
#translationInput .card-header h2 span,
#translationInput .card-header h2 i {
    color: #000000 !important;
}

/* Keep collapse button icon dark and visible */
#translationInput .card-header .btn-light,
#translationInput .card-header .btn-light:hover,
#translationInput .card-header .btn-light:focus,
#translationInput .card-header .btn-light:active,
#translationInput .card-header .btn-light.active {
    color: #212529 !important;
    background-color: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.9) !important;
}

    #translationInput .card-header .btn-light .fa {
        color: #212529 !important;
    }

.card-header.bg-gradient h2[style*="color: black"] {
    color: black !important;
}

/* Home page "Choose Your Translation Type" header: the blanket white h2 rule above
   is unreadable on the light-mode blue gradient (~3:1). Dark text in light mode only;
   html:not(...) keeps dark mode on the .dark-mode-text colour. */
html:not([data-bs-theme="dark"]) .translation-cta-section .card-header.bg-gradient h2,
html:not([data-bs-theme="dark"]) .translation-cta-section .card-header.bg-gradient h2 i {
    color: #1a1a1a !important;
}
/* Footer text - responsive for small screens */
.footer-text {
    font-size: 0.85rem;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cloud-outline {
    color: #ffffff !important;
    /* Very light WebKit stroke */
    -webkit-text-stroke: 1px rgba(0,0,0,0.32);
    /* Very light fallback multi-shadow outline */
    text-shadow: -1px -1px 0 rgba(0,0,0,0.32), 1px -1px 0 rgba(0,0,0,0.32), -1px 1px 0 rgba(0,0,0,0.32), 1px 1px 0 rgba(0,0,0,0.32), 0 0 2px rgba(0,0,0,0.18);
}

@media (min-width: 576px) {
    .footer-text {
        font-size: 0.875rem;
        white-space: normal;
    }
}

@media (min-width: 768px) {
    .footer-text {
        font-size: 1rem;
    }
}

/* ----- Word-by-word translation output: contain the float column.
   The .ggc word tables TranslationService emits are float:left and nothing
   after them clears, so the results container's height collapsed and the
   floats spilled out of the card that is supposed to hold them. Anything
   rendered after that container — the "Keep these words" deck panel
   tpl-study.js inserts — then started level with the FIRST row of tables and
   was narrowed to the leftover gutter beside them, so on a long translation
   the whole card rendered one character per line. flow-root puts the floats
   in the container's own formatting context, so the card wraps its output and
   what follows can only start below it. Fixes the layout for every translator
   page at once; the tables themselves are untouched, so the Table <-> Ruby
   toggle is unaffected. ----- */
.card-body > div:has(> table.ggc) {
    display: flow-root;
}

/* ============================================
   DARK MODE
   Bootstrap 5.3 restyles its own components when [data-bs-theme="dark"]
   is set on <html>. These overrides cover the custom surfaces in this
   stylesheet that hardcode light colors.
   ============================================ */
[data-bs-theme="dark"] {
    --pl-bg: #1a1d21;
    --pl-surface: #24282e;
    --pl-surface-2: #2c313a;
    --pl-border: #3a4049;
    --pl-text: #e4e6eb;
    --pl-text-muted: #adb5bd;
}

[data-bs-theme="dark"] body {
    background-color: var(--pl-bg);
    color: var(--pl-text);
}

[data-bs-theme="dark"] .footer {
    background-color: var(--pl-surface);
    border-top: 1px solid var(--pl-border);
}

[data-bs-theme="dark"] .card {
    background-color: var(--pl-surface);
    border-color: var(--pl-border);
    color: var(--pl-text);
}

[data-bs-theme="dark"] .card-header {
    background-color: var(--pl-surface-2);
    border-bottom-color: var(--pl-border);
}

[data-bs-theme="dark"] .list-group-item {
    background-color: var(--pl-surface);
    border-color: var(--pl-border);
    color: var(--pl-text);
}

[data-bs-theme="dark"] .list-group-item-action {
    color: var(--pl-text);
}

    [data-bs-theme="dark"] .list-group-item-action:hover {
        background-color: var(--pl-surface-2);
        color: var(--soft-blue);
    }

[data-bs-theme="dark"] .results-area,
[data-bs-theme="dark"] .bg-light {
    background-color: var(--pl-surface-2) !important;
    color: var(--pl-text);
}

[data-bs-theme="dark"] .bg-white {
    background-color: var(--pl-surface) !important;
}

[data-bs-theme="dark"] .translation-area {
    background-color: var(--pl-surface);
    border-color: var(--pl-border);
    color: var(--pl-text);
}

[data-bs-theme="dark"] .hero-section h1 {
    color: var(--pl-text);
}

[data-bs-theme="dark"] .hero-section .lead,
[data-bs-theme="dark"] .text-muted {
    color: var(--pl-text-muted) !important;
}

[data-bs-theme="dark"] .text-dark {
    color: var(--pl-text) !important;
}

[data-bs-theme="dark"] .alert-info {
    color: #cfe9ef;
    background-color: rgba(112, 184, 201, 0.15);
    border-color: var(--soft-cyan-dark);
}

[data-bs-theme="dark"] .dark-mode-text {
    color: var(--pl-text) !important;
}

/* ----- Translation input-card header titles. The rule above
   (#translationInput .card-header h2/span/i { color:#000 !important })
   forces these black for the light gradient header, and its #id outranks
   any plain-class override — which is why earlier dark-mode rules lost.
   Re-use the same #id (plus the theme attribute) so this wins in dark
   mode. Light mode stays black via that existing rule. ----- */
[data-bs-theme="dark"] #translationInput .card-header h2,
[data-bs-theme="dark"] #translationInput .card-header h2 span,
[data-bs-theme="dark"] #translationInput .card-header h2 i {
    color: var(--pl-text) !important;
}

/* ----- Info strips that hardcode an inline #f8f9fa background (e.g. the
   "Translation Source" note) otherwise read as a light box in dark mode;
   pull them onto the dark surface. Must precede the results rule below so
   the results panel still wins its pure-black background. ----- */
[data-bs-theme="dark"] .card-body[style*="#f8f9fa"] {
    background-color: var(--pl-surface) !important;
}

/* ----- Translation results panel: black background with light text.
   Hooks: the word-by-word output renders .ggc tables / td.cgc cells
   and .input-line/.pinyin-line/.english-line/.chinese-line spans.
   The card-body wrapping the results hardcodes an inline #f8f9fa bg. ----- */
[data-bs-theme="dark"] .card-body:has(.ggc) {
    background-color: #000 !important;
}

[data-bs-theme="dark"] td.cgc {
    border-color: #444 !important;
    color: #fff;
}

[data-bs-theme="dark"] .chinese-line { color: #fff !important; }
[data-bs-theme="dark"] .input-line   { color: #bbb !important; }
[data-bs-theme="dark"] .pinyin-line  { color: #4dff4d !important; }
[data-bs-theme="dark"] .english-line { color: #7ab8f5 !important; }

[data-bs-theme="dark"] td.cgc input[type="checkbox"] {
    filter: invert(1);
    accent-color: #fff;
}

[data-bs-theme="dark"] .ad-placeholder {
    background-color: var(--pl-surface-2);
    border-color: var(--pl-border);
    color: var(--pl-text-muted);
}

/* Dictionary word links (growth plan T3)
   ------------------------------------------------------------------
   Applied wherever a hanzi on another page links to its own dictionary entry:
   translator output, graded-reader words, radical examples, HSK word tables.

   These must NOT look like ordinary links. On a translation result every word
   would become blue and underlined at once, which swamps the thing the reader
   came to read; the same is true of a story page. So the affordance is a faint
   dotted underline that turns solid and primary-coloured on hover/focus, and
   the text keeps its inherited colour in both states. That also keeps the
   print stylesheets in translation.js correct, which set colours on the
   .chinese-line span and would otherwise be overridden by the anchor. */
.dict-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: .2em;
    text-decoration-color: var(--bs-secondary-color, #6c757d);
}

.dict-link:hover,
.dict-link:focus {
    color: inherit;
    text-decoration-style: solid;
    text-decoration-color: var(--bs-primary, #0d6efd);
}

@media print {
    .dict-link {
        color: inherit !important;
        text-decoration: none;
    }
}

/* Lesson video (growth plan D127) - Pages/Shared/_LessonVideo.cshtml, driven by lesson-video.js.
   Square, capped at 480px so it reads on a phone (full column width) without towering on desktop.
   aspect-ratio reserves the space before the poster loads, so nothing below it shifts. */
.tpl-lesson-video {
    scroll-margin-top: 4.5rem;
    max-width: 480px;
    margin: 1.25rem auto 1.5rem;
}
.tpl-lesson-video-frame {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: .75rem;
    overflow: hidden;
    background: #0a1432;
    box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .18);
}
/* A YouTube Short's site copy (9:16, new-video-youtube-shorts skill). Narrower than the square
   lessons, so on a 390px phone the whole frame (533px) and the byline under it still fit a screen. */
.tpl-lesson-video--portrait { max-width: 300px; }
.tpl-lesson-video--portrait .tpl-lesson-video-frame { aspect-ratio: 9 / 16; }
/* Below-video ads use the content column even when the portrait lesson above is narrow.
   The caption, transcript, prose recap and this gap separate ads from playback controls. */
.tpl-lesson-video-ad {
    max-width: 728px;
    margin: 0 auto 2rem;
    padding-top: 1.5rem;
}
.tpl-lesson-video-recap { margin-bottom: 1.5rem; }
.tpl-lesson-video-ad-label { margin-bottom: .5rem; }
.tpl-lesson-video-frame > video,
.tpl-lesson-video-play img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tpl-lesson-video-play {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.tpl-lesson-video-play[hidden] { display: none; }
.tpl-lesson-video-frame > video[hidden] { display: none; }
.tpl-lesson-video-play:focus-visible { outline: 3px solid #fff; outline-offset: -4px; }
/* In the poster's empty caption band (video/tools/prepare.mjs picks a frame with no caption), so
   the button never covers the lesson text the poster is there to show. */
.tpl-lesson-video-icon {
    position: absolute;
    left: 50%;
    top: 86%;
    width: 4.5rem;
    height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(13, 110, 253, .92);
    color: #fff;
    font-size: 1.75rem;
    box-shadow: 0 0 0 .5rem rgba(255, 255, 255, .22);
    transform: translate(-50%, -50%);
    transition: transform .15s ease;
}
.tpl-lesson-video-icon .fa { margin-left: .2rem; }
.tpl-lesson-video-play:hover .tpl-lesson-video-icon,
.tpl-lesson-video-play:focus-visible .tpl-lesson-video-icon {
    transform: translate(-50%, -50%) scale(1.07);
}
.tpl-lesson-video-length {
    position: absolute;
    right: .6rem;
    bottom: .6rem;
    padding: .1rem .45rem;
    border-radius: .25rem;
    background: rgba(0, 0, 0, .72);
    color: #fff;
    font-size: .8rem;
}
.tpl-lesson-video-end {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 1.25rem;
    background: rgba(4, 9, 21, .9);
    color: #fff;
    text-align: center;
}
.tpl-lesson-video-end[hidden] { display: none; }
.tpl-lesson-video-end-title { margin: 0 0 .25rem; font-weight: 700; font-size: 1.1rem; }
.tpl-lesson-video-end a {
    display: block;
    width: 100%;
    max-width: 20rem;
    padding: .6rem .9rem;
    border-radius: .5rem;
    background: #0d6efd;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}
.tpl-lesson-video-end a:hover,
.tpl-lesson-video-end a:focus-visible { background: #0b5ed7; color: #fff; }
.tpl-lesson-video-replay {
    margin-top: .25rem;
    padding: .35rem .9rem;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: .5rem;
    background: transparent;
    color: #fff;
}
.tpl-lesson-video-byline {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin-top: .5rem;
    font-size: .85rem;
    color: var(--bs-secondary-color, #6c757d);
}
.tpl-lesson-video-title { font-weight: 600; color: var(--bs-body-color); }
.tpl-lesson-video-transcript { margin-top: .35rem; font-size: .9rem; }
.tpl-lesson-video-transcript summary { cursor: pointer; color: var(--bs-link-color, #0d6efd); }
.tpl-lesson-video-transcript ol { margin: .5rem 0 0; padding-left: 1.25rem; }
@media (prefers-reduced-motion: reduce) {
    .tpl-lesson-video-icon { transition: none; }
}

/* Share bar (growth plan D12, 2026-09-12) - Pages/Shared/_ShareBar.cshtml, driven by share.js. */
.tpl-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    padding: .75rem 1rem;
    border-radius: .5rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.tpl-share-label {
    font-weight: 600;
}

.tpl-share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
}

.tpl-share-net {
    min-width: 2.25rem;
}