/* ==========================================================================
   GERMAN-ACCELERATED-READING-COURSE.CSS — scoped styles for
   german-accelerated-reading-course.html, the "Accelerated Reading Course"
   level x part picker reached from german-course-type-selection.html.

   .card/.card-badge/.platform-title-card/.status-pill/.lang-arrow-action/
   .lang-lock-action are inherited from see-test.css (same shared components
   german-courses-page.html uses). .course-level-circle/.level-a1.../.level-c1
   are page-specific additions there too, not in see-test.css, so they're
   redefined here rather than inherited — same values, so the level colors
   stay consistent with german-courses-page.html's A1/A2/B1/B2/C1 circles.

   This file carries the same "modern Bauhaus" redesign as every other
   redesigned page: it redeclares the shared design tokens (--bg/--surface/
   --ink/--accent/--gold/--line/--serif/--color-*) with the same values,
   plus the same redesigned navbar. Since this stylesheet only ever loads
   on this one page, every shared component that reads those tokens picks
   up the new palette here only — no other page is affected.

   The level x part layout (.arc-level-section/.arc-parts-row/.arc-part-card)
   is new — german-courses-page.html has one card per level, this page
   needs one row of 3 part-cards per level, so .arc-part-card is a
   narrower sibling of .lang-bubble-card rather than a reuse of it.
   ========================================================================== */

:root {
    --bg: #f7f2e7;
    --surface: #ffffff;
    --surface-2: #fbf7ee;
    --ink: #191726;
    --ink-soft: #5a5470;
    --ink-faint: #9089a3;
    --accent: #e0432b;
    --accent-2: #c23621;
    --accent-soft: rgba(224, 67, 43, 0.12);
    --gold: #b4870a;
    --gold-soft: rgba(239, 176, 0, 0.18);
    --line: #e7dec7;

    --shadow-sm: 0 1px 2px rgba(25, 23, 38, 0.06), 0 1px 1px rgba(25, 23, 38, 0.04);
    --shadow-md: 0 10px 24px -8px rgba(25, 23, 38, 0.16), 0 2px 8px -2px rgba(25, 23, 38, 0.06);
    --shadow-lg: 0 0 0 1px rgba(25, 23, 38, 0.04), 0 16px 40px -16px rgba(224, 67, 43, 0.28);

    --serif: "Futura", "Avenir Next", Avenir, "Century Gothic", system-ui, sans-serif;
    --line-strong: #d8cba8;

    /* --- A1 six-topic palette (Bauhaus retint, matches the other redesigned pages) --- */
    --color-nom: #1d5fa6; --color-nom-bg: #e5eef8;
    --color-acc: #e0432b; --color-acc-bg: #fbe7e3;
    --color-irr: #b4870a; --color-irr-bg: #faf1d6;
    --color-coo: #0f7168; --color-coo-bg: #e2f2f0;
    --color-sub: #6c4ba6; --color-sub-bg: #eee8f7;
    --color-neg: #b8355f; --color-neg-bg: #f8e5eb;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #131220;
        --surface: #1c1a2c;
        --surface-2: #211f34;
        --ink: #f3eee1;
        --ink-soft: #b3abc9;
        --ink-faint: #867f9c;
        --accent: #ff5b41;
        --accent-2: #ff7b62;
        --accent-soft: rgba(255, 91, 65, 0.16);
        --gold: #ffcb3d;
        --gold-soft: rgba(255, 203, 61, 0.18);
        --line: #33304a;
        --line-strong: #413c5c;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 10px 28px -10px rgba(0, 0, 0, 0.55);
        --shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 16px 44px -16px rgba(255, 91, 65, 0.35);

        --color-nom: #5b98e8; --color-nom-bg: rgba(91, 152, 232, 0.16);
        --color-acc: #ff5b41; --color-acc-bg: rgba(255, 91, 65, 0.16);
        --color-irr: #ffcb3d; --color-irr-bg: rgba(255, 203, 61, 0.18);
        --color-coo: #2fb6a8; --color-coo-bg: rgba(47, 182, 168, 0.16);
        --color-sub: #9a7bd6; --color-sub-bg: rgba(154, 123, 214, 0.18);
        --color-neg: #e06a94; --color-neg-bg: rgba(224, 106, 148, 0.18);
    }
}

.arc-page-body {
    background-color: var(--bg);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ================= NAVBAR (redesigned, scoped to this page only) =================
   Identical to the other redesigned pages' navbar — see-test.css's shared
   .navbar/.brand-box/.dropdown-item rules still exist and are used by
   every other page unchanged; these selectors only apply here because
   this file is only ever linked from german-accelerated-reading-course.html. */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 28px;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.brand-mark {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
}

.brand-word {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
    color: var(--ink);
}

.brand-word b {
    color: var(--accent);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.nav-links > a {
    font-family: var(--mono);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    padding: 9px 14px;
    border-radius: 8px;
    color: var(--ink-soft);
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-links > a:hover {
    background: var(--surface-2);
    color: var(--ink);
}

.navbar .dropdown-item {
    position: relative;
}

.navbar .dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font-family: var(--mono);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 9px 14px;
    border-radius: 8px;
    color: var(--ink-soft);
    text-decoration: none;
    border: none;
    background: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.navbar .dropdown-trigger:hover,
.navbar .dropdown-item.open .dropdown-trigger {
    background: var(--surface-2);
    color: var(--ink);
}

.navbar .dropdown-trigger.active {
    color: var(--accent);
}

.navbar .caret {
    transition: transform 0.18s ease;
    font-size: 0.7em;
}

.navbar .dropdown-item.open .caret {
    transform: rotate(180deg);
}

.navbar .dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 230px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow-md);
    padding: 14px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
    overflow: hidden;
}

/* Vibrant Bauhaus accent strip across the top of the popup — same three
   primaries used throughout the site's topic-color system. */
.navbar .dropdown-menu::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--gold), var(--color-nom));
}

.navbar .dropdown-item.open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.navbar .dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--ink-soft);
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.navbar .dropdown-menu a:hover {
    background: var(--surface-2);
    color: var(--ink);
    transform: translateX(2px);
}

/* --- Language flag swatches + "Soon" badges --- */
.dropdown-flag {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.15s ease;
}

.dropdown-flag-es {
    background: linear-gradient(to bottom, #c60b1e 0 25%, #ffc400 25% 75%, #c60b1e 75% 100%);
}

.dropdown-flag-fr {
    background: linear-gradient(to right, #0055a4 0 33.33%, #ffffff 33.33% 66.66%, #ef4135 66.66% 100%);
}

.navbar .dropdown-menu a:hover .dropdown-flag-es {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 3px var(--color-acc-bg);
}

.navbar .dropdown-menu a:hover .dropdown-flag-fr {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 3px var(--color-nom-bg);
}

.dropdown-lang-name {
    flex: 1;
}

.dropdown-soon-badge {
    font-family: var(--mono);
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gold);
    background: var(--gold-soft);
    padding: 3px 7px;
    border-radius: 999px;
    flex-shrink: 0;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.nav-toggle span {
    width: 22px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

@media (max-width: 860px) {
    .nav-links {
        position: fixed;
        inset: 60px 0 auto 0;
        background: var(--surface);
        flex-direction: column;
        align-items: stretch;
        padding: 10px;
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow-md);
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
        gap: 2px;
    }

    .nav-links.open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .nav-links > a,
    .navbar .dropdown-trigger {
        width: 100%;
    }

    .navbar .dropdown-menu {
        position: static;
        box-shadow: none;
        border: none;
        padding-left: 14px;
        margin-top: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
    }

    .navbar .dropdown-menu::before {
        display: none;
    }

    .navbar .dropdown-item.open .dropdown-menu {
        display: flex;
    }

    .nav-toggle {
        display: flex;
    }
}

/* ================= PAGE ================= */
.arc-selection-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 88px 20px 60px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.arc-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    text-decoration: none;
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: 999px;
    padding: 6px 16px 6px 6px;
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.arc-back-link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--surface);
    color: var(--accent);
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.arc-back-link:hover {
    background: var(--accent);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.arc-back-link:hover .arc-back-link-icon {
    transform: translateX(-2px);
}

.card.platform-title-card {
    padding: 36px 32px;
    border-radius: 26px;
    box-shadow: var(--shadow-lg);
}

/* --- One section per CEFR level: a level circle + heading, then a row of
   3 part-cards. --- */
.arc-level-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.arc-level-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

.arc-level-heading h3 {
    font-family: var(--serif);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 2px;
    letter-spacing: -0.005em;
}

.arc-level-heading small {
    font-size: 0.82rem;
    color: var(--ink-soft);
    font-weight: 500;
    line-height: 1.3;
}

/* --- Level circles: same geometric Bauhaus badge as german-courses-page.html,
   cycling through the six-topic grammar-highlight palette. --- */
.course-level-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-weight: 700;
    font-size: 0.95rem;
    border: 2px solid transparent;
}

.course-level-circle.level-a1 { background: var(--color-acc-bg); color: var(--color-acc); border-color: var(--color-acc); }
.course-level-circle.level-a2 { background: var(--color-irr-bg); color: var(--color-irr); border-color: var(--color-irr); }
.course-level-circle.level-b1 { background: var(--color-coo-bg); color: var(--color-coo); border-color: var(--color-coo); }
.course-level-circle.level-b2 { background: var(--color-sub-bg); color: var(--color-sub); border-color: var(--color-sub); }
.course-level-circle.level-c1 { background: var(--color-neg-bg); color: var(--color-neg); border-color: var(--color-neg); }

/* --- Part cards: a narrower sibling of .lang-bubble-card, 3 to a row
   instead of one full-width row per item, since each just needs to show
   "Part N" + a status pill + an arrow/lock instead of a full description. --- */
.arc-parts-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.arc-part-card {
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    box-sizing: border-box;
    position: relative;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.arc-part-card.track-active {
    cursor: pointer;
}

.arc-part-card.track-active:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent);
}

.arc-part-card.track-active:active {
    transform: translateY(0);
}

.arc-part-card.track-disabled {
    cursor: not-allowed;
    background-color: var(--surface-2);
    opacity: 0.75;
}

.arc-part-card h4 {
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
}

.arc-part-card .lang-arrow-action,
.arc-part-card .lang-lock-action {
    align-self: flex-end;
    margin-top: auto;
    padding-right: 0;
}

/* --- Responsive --- */
@media (max-width: 640px) {
    .card.platform-title-card {
        padding: 28px 22px;
    }

    .arc-parts-row {
        grid-template-columns: 1fr;
    }
}