/* ============================================
   Catalog Home — browse-first action hub
   (Phase 2b, UNIT_DISPLAY_REWORK_PLAN §12)
   Uses only tokens defined in styles.css :root.
   ============================================ */

/* When the catalog is rendered and pre-call is visible, the whole
   call-screen becomes one scrolling column (mockup layout). The class
   is toggled by catalog-home.js and removed while in-call. */
#call-screen.catalog-active {
    overflow-y: auto;
}

#call-screen.catalog-active .top-section {
    flex: 0 0 auto;
    overflow-y: visible;
}

/* On the home screen the transcript area is empty and unused (it only fills
   during a call, when .catalog-active is removed), but its min-height:100% +
   padding otherwise reserve a big empty band under the header and push the home
   card down. Drop it from layout entirely while browsing. */
#call-screen.catalog-active .transcript-container {
    display: none;
}

#call-screen.catalog-active .bottom-section {
    background: transparent;
}

#call-screen.catalog-active .pre-call-state {
    text-align: left;
}

/* ---------- Home top bar (home-only header) ---------- */
.home-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    margin-bottom: 12px;
}

.home-topbar-slot {
    flex: 0 0 auto;
    width: 37px;
    height: 37px;
}

/* The settings gear (#settings-icon) is absolute-positioned by styles.css for
   its legacy top-section mount; inside the home top bar it is a flow item. */
.home-topbar .settings-icon {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    margin: 0;
    /* Mockup: gear sits on a hero-soft rounded-square tile (overrides the
       bare circular .settings-icon from styles.css — that file is not ours). */
    width: 37px;
    height: 37px;
    border-radius: 13px;
    background: var(--hero-soft, #F7E6C0);
    box-shadow: none;
    border: none;
}

/* Balance rendered as a compact chip, colour by state */
.home-topbar .balance-container {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    width: auto;
    margin: 0;
    padding: 6px 11px;
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-primary);
    white-space: nowrap;
    cursor: default;
}

.home-topbar .balance-container.low {
    background: rgba(212, 160, 74, 0.22);
    color: var(--accent-warning-text);
}

.home-topbar .balance-container.empty {
    background: rgba(176, 82, 82, 0.16);
    color: var(--accent-danger);
    cursor: pointer;
}

/* Mockup: subscription badge is a honey pill with dark brown text/check */
.home-topbar .balance-container.subscription {
    background: var(--hero-soft, #F7E6C0);
    color: var(--accent-primary);
}

.home-topbar .balance-amount {
    font-size: 12px;
    font-weight: 600;
}

/* The verbose message (purchase prompt / low warning) is surfaced elsewhere
   (exhausted-prompt block / chip colour), so keep the chip itself compact. */
.home-topbar .balance-message {
    display: none;
}

/* Chip glyphs, matching the mockup: ⏳ for time-remaining (normal + low),
   no glyph for the danger "Нет баланса", ✓ for subscription (from styles.css).
   Overrides the legacy 🎁/⚠️/❌ ::before content for the home-topbar chip. */
.home-topbar .balance-container:not(.empty):not(.subscription) .balance-amount::before {
    content: "⏳ ";
}

.home-topbar .balance-container.empty .balance-amount::before {
    content: "";
}

.home-radar-chip {
    flex: 0 0 auto;
    width: 37px;
    height: 37px;
    border-radius: 13px;
    border: none;
    background: var(--hero-soft, #F7E6C0);
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}

/* ---------- Continue card (Honey Brew hero card) ---------- */
.continue-card {
    background: var(--hero, #F3DCA5);
    border: none;
    border-radius: 18px;
    box-shadow: var(--shadow-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    text-align: left;
    color: #4A3324;
}

@media (prefers-color-scheme: dark) {
    .continue-card {
        color: #EAE0D5;
    }
}

/* Hero card text uses the hard-coded on-honey colour, not the grey tokens */
.continue-card .continue-heading {
    font-family: ui-serif, Georgia, 'Times New Roman', serif;
    font-size: 18px;
    color: inherit;
}

.continue-card .continue-sub {
    color: inherit;
    opacity: 0.85;
}

/* Icon tile inside the honey hero sits on translucent white */
.continue-card .continue-icon {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 13px;
}

/* Primary CTA inside the hero: brown accent, radius 14, no extra shadow */
.continue-card .btn {
    border-radius: var(--radius-btn, 14px);
    box-shadow: none;
}

/* Zero balance: mockup fades ONLY the hero CTA (card stays full-color) */
.continue-card.exhausted .btn {
    opacity: 0.55;
}

.continue-card.hidden {
    display: none;
}

/* Exhausted trial keeps the full-colour hero card (mockup): the CTA below the
   card carries the "buy" action; no washed-out opacity on the card itself. */

/* Language-review card: white surface card with a 44px hero-soft tile */
.language-review-card {
    background: var(--bg-surface);
    border: none;
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    padding: 12px 14px;
    margin-bottom: var(--spacing-sm);
    text-align: left;
}

.language-review-card.hidden { display: none; }
.language-review-card .continue-card-head { margin-bottom: var(--spacing-sm); }
.language-review-icon { color: var(--text-primary); font-weight: 700; }
.language-review-card #language-review-count {
    align-self: flex-start;
    background: var(--bg-surface);
    border-radius: var(--radius-full);
    padding: 2px var(--spacing-sm);
    margin: 2px 0;
}
.language-review-card .btn-secondary {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
}

.continue-card-head {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.continue-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.continue-heading {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

/* Continue-card icon (▶️ returning / 🚀 first-run) — mockup 44px .tile */
.continue-icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: var(--hero-soft, #F7E6C0);
    flex: 0 0 auto;
}

/* Trial-exhausted headline block (between Continue and Subscribe) */
.exhausted-prompt {
    text-align: center;
    margin: 6px 0 10px;
}

.exhausted-prompt.hidden {
    display: none;
}

.exhausted-prompt-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.exhausted-prompt-sub {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* Larger subscribe CTA in the exhausted state (mockup .subcta) */
.subscribe-btn.subcta {
    box-shadow: var(--shadow-floating);
    font-size: 16px;
    padding: 16px;
}

/* ---------- Subscription / pay block (Honey Brew, DESIGN.md Pay CTA) ----------
   Deep-green card + green CTA. The HTML/JS side attaches .home-pay-card to the
   wrapper and .btn-pay to the button; defined here even before markup lands. */
.home-pay-card {
    border: 2px solid var(--accent-pay, #2F6B45);
    background: rgba(88, 129, 87, 0.10);
    border-radius: 16px;
    padding: 14px;
    margin-bottom: var(--spacing-sm);
    text-align: center;
}

.home-pay-card.hidden {
    display: none;
}

.home-pay-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.btn-pay,
.home-pay-card .subscribe-btn,
.home-pay-card .btn {
    background: var(--accent-pay, #2F6B45);
    color: #FFFFFF;
    border: none;
    border-radius: var(--radius-btn, 14px);
    box-shadow: 0 6px 16px rgba(47, 107, 69, 0.35);
    margin-top: 10px;
}

.continue-sub {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The tutorial empty-review message and the course-deck disclosure are full
   sentences — let them wrap instead of clipping to one ellipsised line. The
   disclosure especially: ellipsised after "разберём т…" it hides the very
   fact it exists to state. */
#language-review-empty,
#language-review-default-note {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

/* ---------- "Мой курс" section ---------- */
.catalog-home.hidden {
    display: none;
}

.catalog-home {
    text-align: left;
    margin-top: var(--spacing-md);
}

.catalog-section-title {
    font-family: ui-serif, Georgia, 'Times New Roman', serif;
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-primary);
    margin: var(--spacing-sm) var(--spacing-xs);
}

/* Level pills — wrapped rows, all levels visible */
.course-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 2px 2px 6px;
}

.course-pill {
    flex: 0 0 auto;
    border-radius: var(--radius-full);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 10px;
    border: 1.5px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--text-secondary);
    white-space: nowrap;
    cursor: pointer;
}

.course-pill.selected {
    background: var(--hero, #F3DCA5);
    color: var(--text-primary);
    border-color: transparent;
}

.course-pill.locked {
    opacity: 0.5;
    cursor: default;
}

/* "A1 · 0 из 12 юнитов" count line, under the pills */
.catalog-unit-count {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 2px var(--spacing-xs) 8px;
}

.catalog-unit-count:empty {
    display: none;
}

/* ---------- Unit cards ---------- */
.unit-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding-bottom: var(--spacing-md);
}

.unit-card {
    background: var(--bg-surface);
    border: none;
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    padding: 12px 14px;
    text-align: left;
}

/* Mockup unit cards carry no accent border — the «активный» status text and
   warm exercise highlight carry the meaning. */
.unit-card.active-unit {
    border: none;
}

.unit-card.locked {
    opacity: 0.6;
}

.unit-card-head {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
}

.unit-card.locked .unit-card-head {
    cursor: default;
}

.unit-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.unit-card-label {
    font-size: 12px;
    color: var(--text-secondary);
}

/* «активный» tag: bold gold/brown accent, distinct from the muted prefix */
.unit-card-active-tag {
    font-weight: 700;
    color: var(--accent-warning-text);
}

.unit-card-topic {
    font-family: ui-serif, Georgia, 'Times New Roman', serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.22;
    color: var(--text-primary);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.unit-card-status {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-primary);
}

.unit-card-status.locked-hint {
    color: var(--text-muted);
    font-weight: 400;
}

.unit-card-chevron {
    font-size: 20px;
    color: var(--accent-primary);
    font-weight: 700;
    flex: 0 0 auto;
}

.unit-card.locked .unit-card-chevron {
    color: var(--text-muted);
}

.unit-ring {
    flex: 0 0 auto;
}

.unit-ring .ring-track {
    stroke: var(--bg-tertiary);
}

.unit-ring .ring-fill {
    stroke: var(--accent-primary);
}

.unit-ring .ring-check {
    fill: var(--accent-success);
    font-size: 18px;
    font-weight: 700;
}

.unit-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background: var(--bg-secondary);
    flex: 0 0 auto;
}

/* ---------- Exercise rows inside expanded unit ---------- */
.unit-exercises {
    margin-top: 4px;
}

.unit-exercises.hidden {
    display: none;
}

.unit-section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin: 8px 4px 4px;
}

.exercise-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 3px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
}

.exercise-row:last-child {
    border-bottom: none;
}

.exercise-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background: var(--hero-soft, #F7E6C0);
    flex: 0 0 auto;
}

.exercise-title {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.exercise-chip {
    font-size: 12px;
    font-weight: 700;
    border-radius: var(--radius-sm);
    padding: 3px 7px;
    white-space: nowrap;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    flex: 0 0 auto;
}

.exercise-chip.done {
    background: rgba(88, 129, 87, 0.14);
    color: var(--accent-success);
}

/* ---- Done state: the row recedes behind a green check ---- */
.exercise-icon.done {
    background: rgba(88, 129, 87, 0.16);
    color: var(--accent-success);
    font-size: 14px;
    font-weight: 800;
}

.exercise-row.done .exercise-title {
    color: var(--text-secondary);
    font-weight: 600;
}

/* ---- Next state: the one exercise the learner should do now — the row is
   highlighted as a honey pill (mockup .ex-cur), icon on translucent white. */
.exercise-row.next {
    background: var(--hero, #F3DCA5);
    border-bottom-color: transparent;
    border-radius: 12px;
    margin-left: -6px;
    margin-right: -6px;
    padding-left: 12px;
    padding-right: 12px;
}

.exercise-row.next .exercise-icon {
    background: rgba(255, 255, 255, 0.55);
}

.exercise-row.next .exercise-title {
    color: var(--text-primary);
}

.exercise-chip.next {
    background: var(--accent-primary);
    color: var(--bg-surface);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-radius: 9px;
    padding: 4px 10px;
}

.unit-loading-row {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    padding: 8px 0;
}

/* ---------- First-run welcome screen ---------- */
.course-welcome-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--spacing-lg) var(--spacing-md) var(--spacing-md);
}

.course-welcome-icon {
    font-size: 48px;
    text-align: center;
    margin-top: var(--spacing-lg);
}

.course-welcome-title {
    font-family: ui-serif, Georgia, 'Times New Roman', serif;
    font-size: 29px;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    margin-top: var(--spacing-xs);
}

.course-welcome-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin-top: var(--spacing-lg);
    text-align: center;
    padding: 18px 16px;
}

.course-welcome-recommend {
    font-size: 16px;
    color: var(--text-primary);
    line-height: 1.4;
}

/* Mockup: recommendation body is regular weight with only the course level
   bold (level is wrapped in <strong> by catalog-home.js). Overrides the
   font-weight: 600 set in styles.css (not ours to edit). */
#course-welcome-screen .course-welcome-recommend {
    font-weight: 400;
}

#course-welcome-screen .course-welcome-recommend strong {
    font-weight: 700;
}

/* Mockup: books-emoji tile sits on hero-soft honey, not translucent white.
   Overrides styles.css (incl. its dark-mode rgba rule — hero-soft has its
   own dark token). */
#course-welcome-screen .course-welcome-icon {
    background: var(--hero-soft, #F7E6C0);
}

@media (prefers-color-scheme: dark) {
    #course-welcome-screen .course-welcome-icon {
        background: var(--hero-soft, #4A3F2A);
    }
}

.course-welcome-hint {
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
    margin: var(--spacing-md) var(--spacing-md) 0;
}

.course-welcome-step {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.course-welcome-step.hidden {
    display: none;
}

#course-welcome-next-btn,
#course-welcome-share-next-btn,
#course-welcome-speed-next-btn {
    margin-top: auto;
}