/* «Потік» — уніфікований концепт (potik-two-screens-unified / potik-design-system v1.0, 1 листопада 2026).
   Шар поверх style.css і flow.css: змінює лише вигляд (колір, матеріал, радіуси, поля), не структуру й не тексти.
   Токени з potik-design-system/tokens.css. Тільки світла тема: концепт не має темного варіанта. */
:root,
:root[data-theme="dark"] {
  color-scheme: light;
  --canvas: #FAF7F2;
  --surface-start: #FFFEFB;
  --surface-end: #F4EEE6;
  --accent-start: #F4E4D1;
  --accent-end: #EBCBB0;
  --border-strong: #98705A;
  --border-soft: #DED5CD;
  --badge-neutral: #EEE7DE;
  --material: linear-gradient(120deg, #FFFEFB, #F4EEE6);
  --material-active: linear-gradient(120deg, #F4E4D1, #EBCBB0);
  --material-edge: #FFFEFB;
  --material-shadow: 0 4px 16px rgba(89, 66, 53, .04);
  --r-card: 44px 56px 46px 54px / 48px 42px 54px 40px;
  --r-step: 36px 44px 34px 42px;
  --r-step-active: 42px 34px 44px 36px;
  --r-banner: 44px 54px 46px 52px / 48px 42px 52px 42px;
  --r-banner-next: 52px 44px 54px 46px / 42px 48px 42px 52px;
  --r-row: 30px 38px 32px 40px;
  --r-row-alt: 38px 30px 40px 32px;

  --flow-background: #FAF7F2; --flow-foreground: #302923; --flow-card: #FFFEFB;
  --flow-action: #594235; --flow-on-action: #FFFDF9; --flow-secondary: #F4EEE6;
  --flow-muted: #70615A; --flow-hover: #EEE7DE; --flow-border: #DED5CD;
  --flow-input: #98705A; --flow-ring: #98705A;
  --flow-success: #466255; --flow-success-surface: #EAF0EA;
  --flow-info: #315B70; --flow-info-surface: #E7EFF3;
  --flow-attention: #805334; --flow-attention-surface: #F6E9DB;
  --flow-error: #8C4B43; --flow-error-surface: #F5E8E3;
  --progress-color: #594235;
  --badge-neutral-text: #685248; --badge-neutral-surface: #EEE7DE;
  --nav-background: #FFFEFB;
  --action-radius: 24px; --action-height: 48px;
  --radius-sm: 20px; --radius-md: 28px; --radius-lg: 36px;
  --line: #DED5CD; --line-soft: #EEE7DE;
  --app-nav-panel-height: 64px;
}
:root[data-theme="dark"] { --flow-secondary: #F4EEE6; }

html, body { background: var(--canvas); color: var(--flow-foreground); }

/* ---------- Typography ---------- */
.page-title, .state-card .page-title, .course-title, .lesson-header .page-title, .lesson-rich-text h1 {
  font-size: 28px; line-height: 34px; font-weight: 500; letter-spacing: -.8px;
}
.section-title, .lesson-subtitle, .homework-title, .lesson-rich-text h2, .lesson-rich-text h3 {
  font-size: 24px; line-height: 30px; font-weight: 500; letter-spacing: -.5px;
}
.card-title, .notebook-step, .purchase-course, .event-row-title { font-size: 22px; line-height: 29px; font-weight: 500; letter-spacing: -.4px; }
.page-intro { font-size: 16px; line-height: 24px; color: var(--flow-muted); }
.eyebrow { font-size: 12px; line-height: 18px; letter-spacing: 1.7px; text-transform: uppercase; color: var(--flow-muted); }
.brand-wordmark { font-size: 14px; font-weight: 600; }
.home-feature-section + .page-header .page-title { font-size: 26px; line-height: 32px; letter-spacing: -.8px; }
@media (max-width: 600px) {
  .page-title, .state-card .page-title, .course-title, .lesson-header .page-title { font-size: 28px; }
}

/* ---------- Buttons ---------- */
.button, .program-card .card-action, .offer-choice .offer-action, .access-card .offer-action,
.lesson-action .button, .lesson-homework .homework-submit, .homework-screen .homework-submit,
.purchase-actions .button, .error-actions .button, .gift-actions .button, .course-notebook-entry {
  min-height: 48px; padding: 12px 20px; border-radius: 24px; font-size: 16px; line-height: 22px; font-weight: 500;
}
.button-primary { background: #594235; border: 1px solid #594235; color: #FFFDF9; }
.button-primary:hover:not(:disabled) { background: #463328; border-color: #463328; color: #FFFDF9; }
.button-primary:active:not(:disabled) { background: #463328; }
.button:disabled, .button-primary:disabled { opacity: 1; background: #E7E2DC; border-color: #E7E2DC; color: #756A63; }
.button-secondary, .course-notebook-entry {
  background: linear-gradient(120deg, #FFFEFB, #F4EEE6); border: 1px solid #D8C8BB; color: #594235;
}
.button-secondary:hover:not(:disabled), .course-notebook-entry:hover:not(:disabled) {
  background: linear-gradient(120deg, #FFFEFB, #EEE7DE); border-color: #D8C8BB; color: #594235;
}
.button-secondary:disabled { background: #E7E2DC; border-color: #D8C8BB; color: #756A63; }
.button-tertiary, .lesson-action .homework-skip { background: transparent; border: 0; color: #302923; }
.button-tertiary:hover:not(:disabled) { background: transparent; }
:where(a, button, input, textarea, select, summary):focus-visible { outline: 2px solid #98705A; outline-offset: 3px; }

/* ---------- Badges ---------- */
.badge, .course-cover-fact, .homework-meta, .module-state-label, .outline-current-label, .purchase-status, .gift-history-status {
  min-height: 0; padding: 6px 12px; border-radius: 999px; font-size: 12px; line-height: 18px; font-weight: 400;
  background: #EEE7DE; color: #685248; border: 0;
}
.badge--info { background: #E7EFF3; color: #315B70; }
.badge--success { background: #EAF0EA; color: #466255; }
.badge--attention { background: #F6E9DB; color: #805334; }
.badge--error { background: #F5E8E3; color: #8C4B43; }
.badge--neutral { background: #EEE7DE; color: #685248; }
.program-card > .badge { background: #EEE7DE; color: #685248; }

/* ---------- Progress ---------- */
.progress-track { height: 3px; border-radius: 3px; background: #CFBCAD; }
.progress-fill { border-radius: 3px; background: #594235; }
.progress-row { font-size: 12px; line-height: 18px; font-weight: 400; color: #302923; }

/* ---------- Base material: one normal card ---------- */
.program-card, .home-course-banner, .flow-card, .access-card, .gift-offer-card, .gift-detail-card, .gift-create-card,
.gift-claim-card, .purchase-entry, .notebook-entry, .notebook-course-card, .course-author, .course-bonuses-card,
.purchase-guide, .state-card, .gift-history-card:not(:has(.gift-history-row)), .homework-answer, .event-card {
  background: var(--material); border: 1px solid var(--material-edge); box-shadow: var(--material-shadow);
}
.program-card, .flow-card, .access-card, .gift-offer-card, .gift-detail-card, .gift-create-card, .gift-claim-card,
.purchase-entry, .notebook-entry, .notebook-course-card, .course-bonuses-card, .purchase-guide, .state-card {
  border-radius: var(--r-card); padding: 24px;
}
.course-author, .homework-answer, .event-card { border-radius: var(--r-step); padding: 20px; }
.program-card.is-featured, .home-course-banner { border-radius: var(--r-card); }
.home-course-banner { overflow: hidden; }

/* ---------- Home: course card ---------- */
.program-card .flow-current-step { gap: 4px; margin-bottom: 18px; }
.program-card .flow-current-step > span { font-size: 12px; line-height: 18px; color: #685248; }
.program-card .flow-current-step > strong {
  display: block; padding: 12px 16px; border: 1px solid #FFFAF1; border-radius: 26px;
  background: var(--material-active); color: #302923; font-size: 16px; line-height: 24px; font-weight: 400;
}
.program-card .card-title { font-size: 24px; line-height: 31px; font-weight: 500; letter-spacing: -.5px; margin: 16px 0 20px; }
.program-card > .progress-line { margin: 0 0 18px; }
.program-card > .card-action { align-self: flex-start; }
.program-card > .flow-programme-link { margin: 12px 0 0 -12px; font-size: 14px; color: #493C32; }

/* ---------- Rows (Мій зошит, Допомога…) ---------- */
.flow-home-shortcuts { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.flow-row {
  min-height: 82px; padding: 16px 20px; border: 1px solid var(--material-edge); border-radius: var(--r-row);
  background: var(--material); box-shadow: var(--material-shadow);
}
.flow-row:nth-child(2n) { border-radius: var(--r-row-alt); }
.flow-row:hover { background: linear-gradient(120deg, #FFFEFB, #EEE7DE); }
.flow-row-copy strong { font-size: 16px; line-height: 24px; font-weight: 400; }
.flow-row-copy > span { font-size: 12px; line-height: 18px; color: #70615A; }
.flow-row::after {
  content: ""; flex: none; width: 17px; height: 17px; background: #70615A;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m9 5 7 7-7 7'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m9 5 7 7-7 7'/></svg>") center / contain no-repeat;
}
.flow-profile-support > .flow-row { border-top: 1px solid var(--material-edge); }

/* ---------- Announcement banners ---------- */
.home-feature-slider.is-scroller { gap: 11px; }
.home-feature-card, .home-feature-media { border-radius: var(--r-banner); }
.home-feature-slide:nth-child(n+2) .home-feature-card, .home-feature-slide:nth-child(n+2) .home-feature-media { border-radius: var(--r-banner-next); }
.home-feature-media {
  border: 1px solid #DCCAB9; background-color: #756553; overflow: hidden;
}
.home-feature-media::before {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
  border-top: 1px solid #FFF8E8; border-left: 1px solid #FFF8E8;
  background: linear-gradient(145deg, rgba(255, 247, 226, .13), rgba(255, 247, 226, 0) 35%, rgba(18, 12, 8, 0) 65%, rgba(18, 12, 8, .12));
}
.home-feature-media.is-fallback { background: #756553; }
.home-feature-media.is-fallback .home-feature-copy { background: transparent; color: #FFF8EE; }
.home-media-frame.is-fallback { background: #756553; }

/* ---------- Program / outline ---------- */
.module-card { border: 0; background: transparent; }
.module-toggle { color: #493C32; }
.module-title { font-size: 16px; line-height: 24px; font-weight: 400; color: #493C32; }
.outline-list { border-top: 0; gap: 10px; margin-top: 10px; }
.outline-row { border-radius: var(--r-step); }
.outline-link, .outline-row:last-child .outline-link {
  min-height: 108px; padding: 20px 16px; border: 1px solid var(--material-edge); border-radius: var(--r-step);
  background: var(--material); box-shadow: var(--material-shadow);
}
.outline-row.is-locked .outline-link { border-style: solid; border-color: var(--material-edge); background: var(--material); }
.outline-row.is-current .outline-link, .outline-row.is-open .outline-link {
  border: 1px solid #FFFAF1; border-radius: var(--r-step-active); background: var(--material-active);
}
.outline-link:hover:not(:disabled) { background: var(--material); }
.outline-row.is-current .outline-link:hover:not(:disabled), .outline-row.is-open .outline-link:hover:not(:disabled) { background: var(--material-active); }
.outline-title, .outline-row.is-done .outline-title, .outline-row.is-locked .outline-title { font-size: 16px; line-height: 22px; font-weight: 400; color: #302923; }
.outline-kind, .outline-details, .outline-time { font-size: 12px; line-height: 18px; color: #70615A; }
.outline-row.is-current .outline-details, .outline-row.is-open .outline-details, .outline-row.is-current .outline-kind, .outline-row.is-open .outline-kind { color: #685248; }
.outline-chevron { color: #70615A; }

/* ---------- Bottom navigation ---------- */
.bottom-nav {
  padding: 5px; border: 1px solid var(--material-edge); border-radius: 30px; background: var(--material);
  box-shadow: 0 4px 16px rgba(89, 66, 53, .08); min-height: 64px; height: 64px; gap: 2px;
}
.nav-item { min-height: 54px; height: 54px; border-radius: 24px; color: #70615A; }
.nav-item:hover { background: transparent; color: #302923; }
.nav-item.is-active, .nav-item.is-active:hover {
  border: 1px solid #FFFAF1; background: var(--material-active); color: #302923;
}
.nav-item.is-active .icon, .nav-item.is-active .nav-icon { color: #302923; }
.nav-label { font-size: 11px; line-height: 15px; font-weight: 400; }

/* ---------- Fields, choices ---------- */
.answer-field, .homework-panel .answer-field, textarea, input[type="text"], input[type="email"], input[type="tel"] {
  border: 2px solid #98705A; border-radius: 20px; padding: 16px; background: #FFFEFB; color: #302923;
}
.block-choice-pick, .block-choice--read-only {
  min-height: 60px; padding: 14px 20px; border: 1px solid var(--material-edge); border-radius: 28px;
  background: var(--material); box-shadow: var(--material-shadow);
}
.block-choice-pick[aria-pressed="true"], .block-choice-pick.is-selected { border: 2px solid #98705A; background: var(--material); }

/* ---------- Statuses and feedback ---------- */
.homework-status { padding: 20px 0; border-block: 0; background: transparent; }
.homework-feedback, .homework-panel .homework-feedback {
  padding: 20px; border: 1px solid var(--material-edge); border-radius: 28px; background: var(--material);
}
.flow-result-icon { background: #EAF0EA; color: #466255; }

/* ---------- Profile ---------- */
.profile-portrait { background: #EEE7DE; color: #685248; }
.profile-menu-row, .profile-menu .course-notebook-entry {
  border: 1px solid var(--material-edge); border-radius: var(--r-row); background: var(--material); margin-bottom: 10px;
}

/* ---------- Event detail ---------- */
.event-detail-cover { border-radius: var(--r-banner); }

/* ---------- Refinements after first visual pass ---------- */
.home-feature-media, .home-feature-media.is-fallback { min-height: 178px; aspect-ratio: auto; }
.home-feature-slide { flex: 0 0 calc(100% - 42px); }
.home-feature-media .home-feature-action, .home-feature-media.is-typographic .home-feature-action { color: #FFF8EE; }
.home-feature-media.is-fallback .home-feature-copy { padding: 24px; color: #FFF8EE; }
.home-feature-title { font-size: 22px; font-weight: 500; letter-spacing: -.4px; color: #FFF8EE; }
.progress-value { font-size: 12px; line-height: 18px; font-weight: 400; color: #302923; }
.flow-programme-link::after {
  content: ""; display: inline-block; width: 16px; height: 16px; margin-left: 8px; vertical-align: -3px; background: #302923;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 18 18 6M7 6h11v11'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 18 18 6M7 6h11v11'/></svg>") center / contain no-repeat;
}
.module-list { border: 0; }
.module-list > .module-card + .module-card { margin-top: 8px; }
.outline-row.is-locked .outline-mark {
  font-size: 0; width: 18px; height: 18px; background: #302923;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='10' width='16' height='12' rx='2'/><path d='M8 10V6a4 4 0 0 1 8 0v4M12 15v3'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='10' width='16' height='12' rx='2'/><path d='M8 10V6a4 4 0 0 1 8 0v4M12 15v3'/></svg>") center / contain no-repeat;
}
.outline-mark { color: #466255; }
.outline-row.is-open .outline-mark, .outline-row.is-current .outline-mark { color: #302923; }
.event-row, .notebook-course-row, .catalog-card, .gift-history-card {
  border: 1px solid var(--material-edge); border-radius: var(--r-card); background: var(--material); box-shadow: var(--material-shadow);
}
.event-row, .notebook-course-row, .catalog-card { padding: 24px; overflow: hidden; }
.gift-history-card { padding: 24px; margin-top: 32px; }
.event-list .event-detail-cover { border-radius: var(--r-banner); }
.learning-ui { --radius-md: 28px; --radius-lg: 28px; }
.home-course-banner > .course-cover-facts { position: static; display: flex; flex-wrap: wrap; gap: 6px; padding: 24px 24px 0; max-width: none; }
/* Pre-purchase course card on Home: the facts are the first thing inside the card, not a page-level overlay. */
.flow-card > .course-cover-facts { position: static; inset: auto; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 4px; max-width: none; }
.flow-home-shortcuts, .flow-profile-support, .profile-menu { border-top: 0; }

/* ---------- Saved-answer status (design screen 32) ---------- */
.answer-saved { display: grid; justify-items: start; gap: 8px; margin: 24px 0 0; }
.answer-saved .flow-result-icon { margin-bottom: 4px; }
.answer-saved-title { margin: 0; color: #302923; font-size: 24px; line-height: 30px; font-weight: 500; letter-spacing: -.5px; }
.answer-saved-copy { margin: 0; font-size: 14px; line-height: 20px; color: #70615A; }
.flow-card > .course-cover-facts .course-cover-fact, .flow-card > .course-cover-facts .badge { border: 0; background: #EEE7DE; color: #685248; }