/* Компоненты Marketing Master. Копия 00_Platform_Spec/design/style/components/bundle.css курса (снимок 2026-10-15).
   Изменено при переносе (design/README.md): 1) убран @import Google Fonts — шрифты со своего сервера (fonts/fonts.css);
   2) правило ссылок не перекрашивает ссылки-кнопки: a:not(.mm-btn) — известное расхождение справочника. */

/* Сцены: обёртка задаёт цвета всем компонентам внутри */
.mm-night {
  --mm-text: var(--night-ink); --mm-text-2: var(--night-ink-2); --mm-text-3: var(--night-ink-3);
  --mm-line: var(--night-line); --mm-control: var(--night-control);
  --mm-field-edge: var(--night-field-edge); --mm-field-bg: var(--night);
  --mm-link: var(--spark); --mm-link-hover: var(--spark-hover);
  --mm-done: var(--green); --mm-here: var(--amber-text); --mm-error: var(--red-glow);
  --mm-focus: var(--focus-night); --mm-bar-fill: var(--night-bar); --mm-bar-empty: var(--night-station);
  --mm-ground: var(--night);
  background: var(--night); color: var(--night-ink); font-family: var(--font-sans);
}
.mm-paper {
  --mm-text: var(--ink); --mm-text-2: var(--ink-2); --mm-text-3: var(--ink-3);
  --mm-line: var(--paper-line); --mm-control: var(--paper-control);
  --mm-field-edge: var(--paper-field-edge); --mm-field-bg: var(--paper-field);
  --mm-link: var(--blue-ink); --mm-link-hover: var(--blue-ink-hover);
  --mm-done: var(--green-ink); --mm-here: var(--ochre); --mm-error: var(--red-ink);
  --mm-focus: var(--focus-paper); --mm-bar-fill: var(--ink); --mm-bar-empty: var(--paper-dots);
  --mm-ground: var(--paper);
  background: var(--paper); color: var(--ink); font-family: var(--font-sans);
}
.mm-night a:not(.mm-btn), .mm-paper a:not(.mm-btn) { color: var(--mm-link); }
.mm-night a:not(.mm-btn):hover, .mm-paper a:not(.mm-btn):hover { color: var(--mm-link-hover); }
.mm-night :focus-visible, .mm-paper :focus-visible { outline: 2px solid var(--mm-focus); outline-offset: 3px; }

/* Sheet: лист под лампой */
.mm-sheet {
  background: radial-gradient(110% 320px at 50% 0%, var(--lamp), transparent 100%), var(--paper);
  border-radius: var(--radius-sheet); box-shadow: var(--shadow-sheet);
  padding: var(--space-14) max(var(--space-6), 5%) 64px;
}
.mm-sheet--phone {
  background: radial-gradient(130% 16% at 50% 0%, var(--lamp), transparent 70%), var(--paper);
  border-radius: var(--radius-sheet-phone) var(--radius-sheet-phone) 0 0; box-shadow: var(--shadow-sheet-phone);
  padding: 30px var(--space-5) 36px;
}

/* Button */
.mm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 0 var(--space-5);
  border: 1px solid var(--mm-control); border-radius: var(--radius-1);
  background: transparent; color: var(--mm-text);
  font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 500;
  text-decoration: none; cursor: pointer;
}
.mm-btn:hover { border-color: var(--mm-text-3); }
.mm-btn svg { width: 16px; height: 16px; flex: none; }
.mm-btn--primary {
  min-height: 54px; padding: 0 28px; border-color: var(--amber); background: var(--amber); color: var(--on-amber);
  font-size: 17px; line-height: 24px; font-weight: 600;
}
.mm-btn--primary:hover { border-color: var(--amber-text); background: var(--amber-text); }
.mm-btn--continue {
  flex-direction: column; align-items: flex-start; gap: 2px; min-height: 60px; padding: 10px 18px;
  border-color: var(--amber); background: var(--amber); color: var(--on-amber);
}
.mm-btn--continue:hover { border-color: var(--amber-text); background: var(--amber-text); }
.mm-btn__title { font-size: 16px; line-height: 20px; font-weight: 600; }
.mm-btn__sub { font-size: 13px; line-height: 17px; font-weight: 400; color: var(--on-amber-2); }
.mm-btn--ink { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.mm-btn--block { display: flex; width: 100%; }
.mm-btn:disabled, .mm-btn[aria-disabled="true"] {
  border-color: var(--paper-disabled); background: var(--paper-disabled); color: var(--ink-disabled); cursor: not-allowed;
}
.mm-night .mm-btn:disabled, .mm-night .mm-btn[aria-disabled="true"] {
  border-color: var(--night-edge); background: var(--night-panel); color: var(--night-ink-3);
}

/* Status */
.mm-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; line-height: 20px; color: var(--mm-text-2); white-space: nowrap;
}
.mm-status svg { width: 12px; height: 12px; flex: none; }
.mm-status--done { color: var(--mm-done); }
.mm-status--here, .mm-status--wait { color: var(--mm-here); }
.mm-status--error { color: var(--mm-error); }
.mm-status--muted { color: var(--mm-text-3); }
.mm-status--strong { font-weight: 600; }
.mm-status--soon {
  padding: 1px 6px; border: 1px solid var(--mm-control); border-radius: var(--radius-0);
  font-size: 12px; line-height: 16px; color: var(--mm-text-3);
}
.mm-status--wait svg { animation: mm-spin var(--time-spinner) steps(4) infinite; }
@keyframes mm-spin { 0%, 100% { transform: scaleX(1); } 25% { transform: scaleX(0.5); } 50% { transform: scaleX(0.15); } 75% { transform: scaleX(0.5); } }

/* Progress: ASCII-полоса */
.mm-bar {
  font-family: var(--font-mono); font-size: 13px; line-height: 20px; letter-spacing: 0.02em;
  color: var(--mm-bar-empty); white-space: nowrap;
}
.mm-bar__fill { color: var(--mm-bar-fill); }
.mm-bar__num { margin-left: 0.6em; color: var(--mm-text); letter-spacing: 0; }
.mm-bar--course { font-size: 12px; line-height: 16px; letter-spacing: 0; color: var(--night-ink-3); }
.mm-bar--course .mm-bar__fill { color: var(--green); }
.mm-bar--course .mm-bar__num { margin-left: 0.3em; color: var(--night-ink-3); }

/* CourseMap: нить курса со станциями (ночь) */
.mm-map { list-style: none; margin: 0; padding: 0; }
.mm-map__row {
  position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) 40px; column-gap: 10px; padding: 9px 0;
}
.mm-map__rail { position: absolute; left: 13px; top: 0; bottom: 0; width: 2px; background: var(--green-rail); }
.mm-map__row:first-child .mm-map__rail { top: 18px; }
.mm-map__row:last-child .mm-map__rail { bottom: auto; height: 18px; }
.mm-map__station { position: relative; align-self: start; margin: 5px 0 0 9px; width: 10px; height: 10px; background: var(--green-station); }
.mm-map__text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mm-map__name { font-size: 14px; line-height: 19px; color: var(--night-ink-2); }
.mm-map__note { font-size: 13px; line-height: 17px; color: var(--night-ink-3); }
.mm-map__glyph { font-family: var(--font-mono); font-size: 12px; line-height: 19px; text-align: right; color: var(--green-station); }
.mm-map__row--last-done .mm-map__rail { background: linear-gradient(to bottom, var(--green-rail) 0 55%, var(--amber)); }
.mm-map__row--here { padding: 12px 0; }
.mm-map__row--here .mm-map__rail { top: 20px; background: repeating-linear-gradient(to bottom, var(--night-control) 0 3px, transparent 3px 7px); }
.mm-map__row--here::before { content: ""; position: absolute; left: 13px; top: 0; height: 20px; width: 2px; background: var(--amber); }
.mm-map__row--here .mm-map__station {
  margin: 2px 0 0 7px; width: 14px; height: 14px; background: var(--amber);
  box-shadow: var(--glow-here); animation: mm-breathe var(--time-breathe) ease-in-out infinite;
}
.mm-map__row--here .mm-map__name { font-size: 15px; line-height: 20px; font-weight: 500; color: var(--night-ink); }
.mm-map__row--here .mm-map__note, .mm-map__row--here .mm-map__glyph { color: var(--amber-text); }
.mm-map__row--next .mm-map__rail, .mm-map__row--locked .mm-map__rail {
  background: repeating-linear-gradient(to bottom, var(--night-control) 0 3px, transparent 3px 7px);
}
.mm-map__row--next .mm-map__station, .mm-map__row--locked .mm-map__station { border: 1px solid var(--night-station); background: var(--night); }
.mm-map__row--locked .mm-map__name { color: var(--night-ink-3); }
.mm-map__row--next .mm-map__glyph, .mm-map__row--locked .mm-map__glyph { color: var(--night-station); }
@keyframes mm-breathe { 0%, 100% { box-shadow: var(--glow-here); } 50% { box-shadow: var(--glow-here-peak); } }

/* Field */
.mm-field { display: flex; flex-direction: column; gap: 6px; }
.mm-field__label { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--mm-text); }
.mm-field__input {
  height: 48px; padding: 0 14px; border: 1px solid var(--mm-field-edge); border-radius: var(--radius-1);
  background: var(--mm-field-bg); color: var(--mm-text); font-family: var(--font-sans); font-size: 16px;
}
.mm-field__input::placeholder { color: var(--mm-text-3); }
.mm-field__input--code {
  height: 64px; padding: 0 18px; border-color: var(--amber);
  font-family: var(--font-mono); font-size: 30px; letter-spacing: 0.5em;
}
.mm-field__hint { font-size: 13px; line-height: 18px; color: var(--mm-text-3); }
.mm-field__error { font-size: 13px; line-height: 18px; color: var(--mm-error); }
.mm-field--invalid .mm-field__input { border-color: var(--mm-error); }

/* Option: вариант ответа в тесте (лист) */
.mm-option {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px;
  border: 1px solid var(--paper-control); border-radius: var(--radius-1);
  font-size: 16px; line-height: 22px; color: var(--ink); cursor: pointer;
}
.mm-option input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--ink); }
.mm-option--selected, .mm-option:has(input:checked) { padding: 9px 13px; border: 2px solid var(--ink); background: var(--paper-field); }
.mm-option--correct { padding: 9px 13px; border: 2px solid var(--green-ink); background: var(--green-soft); font-weight: 600; cursor: default; }
.mm-option--rest { color: var(--ink-3); cursor: default; }
.mm-option__note { display: block; font-size: 13px; line-height: 18px; font-weight: 400; }
.mm-option--correct .mm-option__note { color: var(--green-ink); }
.mm-option--selected .mm-option__note { color: var(--ink-3); }

/* Tabs: переключатель, например Windows / Mac */
.mm-tabs {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  border: 1px solid var(--mm-text); border-radius: var(--radius-1); overflow: hidden;
}
.mm-tab {
  min-height: 46px; padding: 0 var(--space-4); border: 0; background: transparent; color: var(--mm-text);
  font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 600; cursor: pointer;
  transition: background-color var(--time-toggle) ease, color var(--time-toggle) ease;
}
.mm-tab[aria-selected="true"] { background: var(--mm-text); color: var(--mm-ground); }
.mm-tab:focus-visible { outline-offset: -5px; }

/* Steps: нумерованные шаги инструкции */
.mm-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.mm-steps > li { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; }
.mm-steps__num { font-family: var(--font-mono); font-size: 15px; line-height: 24px; color: var(--mm-here); }
.mm-steps__body { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.mm-steps__title { margin: 0; font-size: 17px; line-height: 24px; font-weight: 600; }

/* Command: команда с кнопкой «Скопировать» */
.mm-command { position: relative; background: var(--night-panel); border-radius: var(--radius-1); }
.mm-command pre {
  margin: 0; padding: 14px 52px 14px 14px; overflow-x: auto;
  font-family: var(--font-mono); font-size: 13px; line-height: 20px; color: var(--night-ink);
}
.mm-command--desk pre { padding: 16px 56px 16px 18px; font-size: 14px; line-height: 22px; }
.mm-command__copy {
  position: absolute; right: 4px; top: 4px; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--night-ink-2); cursor: pointer;
}
.mm-command__copy:hover { color: var(--night-ink); }
.mm-command__copy svg { width: 18px; height: 18px; }
.mm-command__copy:focus-visible { outline-color: var(--focus-night); outline-offset: -6px; }
.mm-command__done { position: absolute; right: 50px; top: 13px; font-size: 13px; line-height: 18px; color: var(--green); }

/* Disclosure: раскрывающийся блок */
.mm-disclosure { border-top: 1px solid var(--mm-line); border-bottom: 1px solid var(--mm-line); }
.mm-disclosure + .mm-disclosure { border-top: 0; }
.mm-disclosure > summary {
  min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  list-style: none; font-size: 15px; line-height: 20px; color: var(--mm-text-2); cursor: pointer;
}
.mm-disclosure > summary::-webkit-details-marker { display: none; }
.mm-disclosure__hint { font-size: 13px; line-height: 18px; color: var(--mm-text-3); }
.mm-disclosure__hint--open { display: none; }
.mm-disclosure[open] .mm-disclosure__hint--open { display: inline; }
.mm-disclosure[open] .mm-disclosure__hint--closed { display: none; }
.mm-disclosure__count { font-family: var(--font-mono); font-size: 13px; color: var(--mm-text-3); }
.mm-disclosure__body { padding: 0 0 14px; font-size: 14px; line-height: 21px; color: var(--mm-text-2); }

/* DataTable: таблица данных в полоску (лист) */
.mm-table-wrap { overflow-x: auto; }
.mm-table-wrap--bleed { margin: 0 calc(-1 * var(--space-5)); padding: 0 var(--space-5); }
.mm-table {
  border-collapse: collapse; width: 100%; color: var(--ink);
  font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums;
}
.mm-table caption { caption-side: top; text-align: left; padding: 0 0 8px; font-size: 13px; line-height: 18px; color: var(--ink-3); }
.mm-table thead tr { border-bottom: 1px solid var(--ink); }
.mm-table th { padding: 9px 10px; text-align: left; font-weight: 600; }
.mm-table td { padding: 9px 10px; }
.mm-table tbody tr:nth-child(odd) { background: var(--paper-zebra); }
.mm-table .mm-num { text-align: right; }
.mm-table td.mm-num { font-family: var(--font-mono); font-size: 13px; }
.mm-table .mm-key { font-family: var(--font-mono); font-weight: 500; }
.mm-table .mm-soft { color: var(--ink-2); }
.mm-table .mm-flag { color: var(--ochre); }

/* VideoPlayer: вертикальный мультик 9:16 */
.mm-video { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mm-video__frame {
  position: relative; box-sizing: border-box; width: 324px; max-width: 100%; aspect-ratio: 9 / 16;
  border: 2px solid var(--ink); background: var(--night);
}
.mm-video__frame img, .mm-video__frame video { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.mm-video__play {
  position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink); background: var(--amber); color: var(--on-amber); box-shadow: var(--glow-play); cursor: pointer;
}
.mm-video__play svg { width: 30px; height: 30px; margin-left: 4px; }
.mm-video__time {
  position: absolute; right: 8px; bottom: 8px; padding: 3px 7px;
  background: var(--night-veil); color: var(--night-ink); font-family: var(--font-mono); font-size: 12px; line-height: 16px;
}
.mm-video__caption { width: 324px; max-width: 100%; display: flex; flex-direction: column; gap: 2px; }
.mm-video__title { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink); }
.mm-video__note { font-size: 13px; line-height: 18px; color: var(--ink-3); }
.mm-video .mm-disclosure { width: 324px; max-width: 100%; }

/* PixelWindow: пиксельное окно — момент успеха, 404, «скоро» */
.mm-pixel {
  position: relative; height: 290px; border: 2px solid var(--mm-text); overflow: hidden;
  background: radial-gradient(60% 55% at 50% 40%, var(--pixel-sky-1) 0%, var(--pixel-sky-2) 55%, var(--pixel-sky-3) 100%);
}
.mm-pixel__floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 56px;
  background: repeating-linear-gradient(to bottom, var(--pixel-floor-1) 0 2px, var(--pixel-floor-2) 2px 12px, var(--pixel-floor-3) 12px 22px);
}
.mm-pixel__title {
  position: absolute; left: 0; right: 0; top: 18px; margin: 0; text-align: center;
  font-family: var(--font-pixel); font-size: 15px; line-height: 22px; color: var(--pixel-white);
  text-shadow: 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink), 2px 2px 0 var(--ink);
}
.mm-pixel__plaque {
  position: absolute; top: 24px; padding: 10px 12px;
  background: var(--pixel-plaque); border: 3px solid var(--pixel-plaque-edge);
  font-family: var(--font-pixel); font-size: 14px; line-height: 18px;
}
.mm-pixel__plaque--404 { left: 50%; transform: translateX(-50%); padding: 10px 18px; font-size: 22px; line-height: 26px; color: var(--pixel-red); }
.mm-pixel__plaque--soon { right: 22px; color: var(--pixel-green); animation: mm-blink var(--time-blink) steps(1) infinite; }
.mm-pixel__sprite { position: absolute; left: 50%; bottom: 26px; width: 140px; height: 180px; margin-left: -70px; }
.mm-pixel__sprite--cheer { bottom: 30px; animation: mm-hop var(--time-sprite) steps(3) infinite; }
.mm-pixel__sprite--shrug { animation: mm-shrug var(--time-shrug) steps(2) infinite; }
.mm-pixel__sprite--think { left: 34px; margin-left: 0; animation: mm-think var(--time-think) steps(2) infinite; }
.mm-pixel__coin { position: absolute; top: 0; width: 20px; height: 20px; animation: mm-fall var(--time-fall) steps(26) infinite; }
@keyframes mm-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes mm-shrug { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-6px); } }
@keyframes mm-think { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes mm-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.35; } }
@keyframes mm-fall { 0% { transform: translateY(-30px); } 100% { transform: translateY(300px); } }

@media (prefers-reduced-motion: reduce) {
  .mm-night *, .mm-paper * { animation: none !important; transition: none !important; }
}