/* Source step: the studio's ink, type and waveform, with output-first
   mode selection. All rules are scoped to the first wizard step. */
.mc-source { --source-ink: var(--strong-text-color); }
.mc-source .mc-source-drop {
  width: 100%; min-height: 0; padding: 0; gap: 0;
  text-align: start; color: var(--source-ink);
  border-color: var(--line-strong-color);
}
.mc-source-drop__main {
  display: flex; align-items: center; gap: 22px;
  width: 100%; padding: 34px 28px;
}
.mc-source-drop .bd-drop__glyph {
  width: 40px; height: 40px; flex-shrink: 0; stroke: currentColor;
}
.mc-source-drop__copy { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; }
.mc-source-drop__title {
  font-family: var(--font-display);
  font-size: 30px; font-weight: 600; line-height: 1.12; letter-spacing: -0.025em;
}
.mc-source-drop__hint { font-size: 13.5px; line-height: 1.55; color: var(--soft-text-color); }
.mc-source-drop .mc-source-drop__cta {
  gap: 20px; padding: 12px 22px; min-height: 44px;
  color: var(--page-bg); background: var(--source-ink); border-color: var(--source-ink);
  font-size: 12px; letter-spacing: 0.04em; flex-shrink: 0;
}
.mc-source-drop__cta > span { font-size: 17px; letter-spacing: 0; }
.mc-source-drop__meta {
  width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap;
  gap: 8px 18px; padding: 13px 28px; border-top: 1px solid var(--line-color);
  font-family: var(--font-mono); font-size: 10.5px; line-height: 1.5; color: var(--soft-text-color);
}
.mc-source-drop__meta > span:first-child { letter-spacing: 0.1em; }
.mc-source-formats { display:flex; flex-direction:column; gap:7px; line-height:1.8; text-align:start; }
.mc-source-formats b { font-weight:500; color:var(--strong-text-color); margin-inline-end:10px; }
.mc-source-drop:hover { border-color: var(--source-ink); }
.mc-source-drop.is-dragging { outline: 2px solid var(--source-ink); outline-offset: 4px; background: var(--button-fill-hover); }

.mc-source-modes { margin-top: 32px; }
.mc-source-modes__heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.mc-source-modes__heading h2 { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.4; letter-spacing: -0.02em; color: var(--source-ink); }
.mc-source-modes__heading > span { flex-shrink: 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--soft-text-color); }
.mc-source-modes__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mc-source .mc-source-mode {
  display: flex; padding: 22px; gap: 0; text-align: start;
  border-color: var(--line-strong-color); background: transparent;
  color: var(--source-ink); min-width: 0;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.mc-source .mc-source-mode:hover:not(:disabled) { border-color: var(--source-ink); }
.mc-source .mc-source-mode.is-active { background: var(--source-ink); border-color: var(--source-ink); color: var(--page-bg); }
.mc-source-mode__check {
  position: absolute; inset-block-start: 13px; inset-inline-end: 14px;
  font-size: 12px; line-height: 18px; opacity: 0;
}
.mc-source-mode.is-active .mc-source-mode__check { opacity: 1; }
.mc-source-mode__body { display: flex; flex-direction: column; gap: 10px; flex: 1; margin-top: 23px; }
.mc-source .mc-source-mode .bd-mode-card__title { color: inherit; font-size: 14px; font-weight: 600; letter-spacing: 0.03em; line-height: 1.45; }
.mc-source .mc-source-mode .bd-mode-card__desc { color: inherit; opacity: 0.78; font-size: 13.5px; line-height: 1.55; letter-spacing: 0; }
.mc-source .mc-source-mode.is-active .bd-mode-card__desc { color: inherit; }
.mc-source-mode__facts { display: flex; flex-direction: column; gap: 5px; margin-top: 22px; padding-top: 15px; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); width: 100%; }
.mc-source-mode__price { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; line-height: 1.5; }
.mc-source-mode__limit { font-family: var(--font-mono); font-size: 10px; line-height: 1.5; opacity: 0.72; }
.mc-source-mode__locked { margin-top: 12px; font-size: 11.5px; line-height: 1.55; color: var(--text-color); }
.mc-source .mc-source-mode:disabled { opacity: 0.52; }
.mc-source-modes__note { min-height: 36px; margin: 14px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--soft-text-color); max-width: 76ch; }

/* Schematic track views reuse .bd-wave; text is a miniature of the
   transcript reader. Their meaning is also stated in each card's copy. */
.mc-source-diagram { display: flex; flex-direction: column; justify-content: center; gap: 8px; height: 84px; width: 100%; padding-top: 7px; direction: ltr; }
.mc-source-track { position: relative; display: flex; align-items: center; gap: 12px; min-height: 20px; }
.mc-source-track__id { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0; opacity: 0.5; flex-shrink: 0; }
.mc-source .mc-source-wave { color: inherit; flex: 1; min-width: 0; gap: 3px; height: 43px; }
.mc-source-wave > span { flex: 1 1 2px; min-width: 1px; width: 2px; }
.mc-source-timeline { display: flex; justify-content: space-between; margin-inline-start: 24px; font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.05em; opacity: 0.48; }
.mc-source-diagram--cast { gap: 4px; }
.mc-source-diagram--cast .mc-source-track::after { content: ''; position: absolute; left: 24px; right: 0; top: 50%; border-top: 1px solid currentColor; opacity: 0.12; z-index: 0; }
.mc-source-clip { display: flex; padding: 3px 5px; border: 1px solid color-mix(in srgb, currentColor 28%, transparent); width: 52%; }
.mc-source-clip--1 { margin-inline-start: 32%; width: 42%; }
.mc-source-clip--2 { margin-inline-start: 13%; width: 44%; }
.mc-source .mc-source-clip .mc-source-wave { height: 14px; gap: 1.5px; }
.mc-source-diagram--text { gap: 10px; }
.mc-source-line { display: flex; gap: 10px; font-size: 10px; line-height: 1.5; white-space: nowrap; letter-spacing: -0.025em; }
.mc-source-line > span:first-child { opacity: 0.5; font-size: 9px; }
.mc-source-docs { display: flex; gap: 9px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; padding-top: 3px; opacity: 0.62; }
.mc-source-docs > span { opacity: 0.5; }

.mc-source-file { display: flex; align-items: center; gap: 20px; padding: 25px; border: 1px solid var(--line-strong-color); background: var(--button-fill-subtle); }
.mc-source-file__preview { display: grid; place-items: center; flex-shrink: 0; width: 84px; height: 68px; overflow: hidden; border: 1px solid var(--line-strong-color); }
.mc-source-file__preview img { width: 100%; height: 100%; object-fit: cover; }
.mc-source-file__info { display: flex; flex-direction: column; gap: 7px; min-width: 0; flex: 1; }
.mc-source-file__ready { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; color: var(--soft-text-color); }
.mc-source-file__name { font-size: 15px; font-weight: 500; line-height: 1.5; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mc-source-file__meta { display: flex; flex-wrap: wrap; gap: 3px 10px; font-family: var(--font-mono); font-size: 10.5px; color: var(--soft-text-color); line-height: 1.6; }
.mc-source-file__meta > span { white-space: nowrap; }
.mc-source-file__replace { font-size: 11px; min-height: 44px; padding: 10px 15px; }
.mc-source-next-hint { font-size: 11.5px; letter-spacing: 0; color: var(--soft-text-color); line-height: 1.5; }
.mc-source .mc-wiznav { margin-top: 18px; }
.mc-source .mc-wiznav.is-awaiting-file { position: static; border: 0; border-top: 1px solid var(--line-strong-color); padding: 18px 0 0; background: transparent; }
.mc-source [data-action="wiz-next"]:disabled { opacity: 0.3; cursor: not-allowed; }
.mc-source [data-action="wiz-next"] { font-size: 12px; }
.mc-source, .mc-wizard { scroll-margin-top: 80px; }

@media (min-width: 901px) and (max-width: 1170px) {
  .mc-source .mc-source-mode { padding: 18px 15px; }
  .mc-source-drop__main { gap: 15px; padding: 28px 22px; }
  .mc-source-drop__title { font-size: 27px; }
  .mc-source-drop .mc-source-drop__cta { padding: 12px 16px; gap: 10px; }
  .mc-source-line { font-size: 8px; gap: 5px; }
}
@media (max-width: 650px) {
  .mc-source > .bd-wiz { margin-bottom: 20px !important; gap: 5px; }
  .mc-source .bd-wiz__step { font-size: 9px; letter-spacing: 0.05em; padding: 7px 9px; gap: 5px; }
  .mc-source-drop__main { flex-wrap: wrap; gap: 15px; padding: 22px 20px 20px; }
  .mc-source-drop .bd-drop__glyph { display: none; }
  .mc-source-drop__copy { flex-basis: 100%; gap: 5px; }
  .mc-source-drop__title { font-size: 26px; }
  .mc-source-drop__hint { font-size: 12.5px; }
  .mc-source-drop .mc-source-drop__cta { width: 100%; justify-content: space-between; min-height: 44px; }
  .mc-source-drop__meta { padding: 11px 20px; font-size: 10px; gap: 5px 12px; }
  .mc-source-modes { margin-top: 24px; }
  .mc-source-modes__heading { margin-bottom: 12px; }
  .mc-source-modes__heading h2 { font-size: 16px; letter-spacing: -0.02em; }
  .mc-source-modes__heading > span { display: none; }
  .mc-source-modes__grid { grid-template-columns: 1fr; gap: 8px; }
  .mc-source .mc-source-mode { display: grid; grid-template-columns: 80px minmax(0, 1fr); column-gap: 15px; row-gap: 9px; padding: 16px 15px; }
  .mc-source-mode__check { inset-block-start: 9px; inset-inline-end: 10px; font-size: 10px; }
  .mc-source-diagram { grid-row: 1 / 3; align-self: center; padding: 0; height: 64px; }
  .mc-source-mode__body { margin: 0; gap: 5px; padding-inline-end: 10px; }
  .mc-source .mc-source-mode .bd-mode-card__title { font-size: 13px; letter-spacing: 0.03em; }
  .mc-source .mc-source-mode .bd-mode-card__desc { font-size: 13px; line-height: 1.5; }
  .mc-source-mode__facts { grid-column: 2; margin: 0; padding: 0; gap: 2px; border: 0; }
  .mc-source-mode__price { font-size: 11px; }
  .mc-source-mode__limit { font-size: 10px; }
  .mc-source-mode__locked { grid-column: 1 / -1; margin: 0; }
  .mc-source-track { gap: 5px; }
  .mc-source-track__id { font-size: 7px; }
  .mc-source .mc-source-wave { height: 37px; gap: 1.5px; }
  .mc-source-wave > span:nth-child(even) { display: none; }
  .mc-source-timeline { margin-inline-start: 0; font-size: 6px; }
  .mc-source-clip { padding: 2px; }
  .mc-source .mc-source-clip .mc-source-wave { height: 12px; gap: 1px; }
  .mc-source-clip .mc-source-wave > span:nth-child(4n + 1) { display: none; }
  .mc-source-diagram--cast .mc-source-track::after { left: 12px; }
  .mc-source-line { display: flex; flex-direction: column; gap: 1px; font-size: 6.5px; }
  .mc-source-line > span:first-child { font-size: 6px; }
  .mc-source-diagram--text { gap: 5px; }
  .mc-source-docs { font-size: 6px; gap: 4px; }
  .mc-source-modes__note { font-size: 12px; line-height: 1.6; margin-top: 12px; }
  .mc-source .mc-wiznav.is-awaiting-file { margin-top: 14px; gap: 10px; }
  .mc-source .mc-wiznav.is-awaiting-file .mc-source-next-hint { font-size: 11px; max-width: 15ch; }
  .mc-source .mc-wiznav:not(.is-awaiting-file) .mc-source-next-hint { display: none; }
  .mc-source .mc-wiznav [data-action="wiz-next"] { font-size: 11px; min-width: 0 !important; }
  .mc-source-file { flex-wrap: wrap; gap: 12px; padding: 18px; }
  .mc-source-file__preview { width: 60px; height: 60px; }
  .mc-source-file__name { font-size: 13.5px; }
  .mc-source-file__meta { font-size: 10px; }
  .mc-source-file__replace { margin-inline-start: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .mc-source .mc-source-mode, .mc-source .mc-source-drop { transition: none; }
}

/* The existing header's localized controls need a tighter fit on the
   smallest phones. Keep every control available without horizontal scroll. */
@media (max-width: 380px) {
  .mc-shell { grid-template-columns: minmax(0, 1fr); }
  .mc-rail { gap: 6px; padding-inline: 8px; min-width: 0; }
  .mc-wallet { gap: 4px !important; }
  .mc-wallet > div:first-child { padding-inline: 6px !important; }
  .mc-wallet > button { padding-inline: 8px !important; font-size: 9px !important; }
  #rail-theme .bd-tabs__btn { padding-inline: 8px; font-size: 9px; }
  .mc-rail .bd-langswitch__btn { padding-inline: 8px; gap: 5px; font-size: 10px; }
  .mc-source .bd-section-head__title { font-size: 24px !important; }
  .mc-source-drop__title { font-size: 24px; }
  .mc-source-drop__main { padding-inline: 16px; }
  .mc-source-drop__meta { padding-inline: 16px; }
  .mc-source .mc-source-mode { grid-template-columns: 66px minmax(0, 1fr); column-gap: 12px; padding-inline: 12px; }
}

/* First run (F-0028): an account without results sees the three steps, what
   the trial buys and a sample clip to try without a file of its own. */
.mc-firstrun { display: flex; flex-direction: column; gap: 18px; margin: 0 0 22px; padding: 24px 28px 22px; border: 1px solid var(--line-strong-color); background: var(--button-fill-subtle); color: var(--source-ink); }
.mc-firstrun__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mc-firstrun__head .bd-eyebrow { margin: 0; }
.mc-firstrun__hide { border: 0; background: transparent; cursor: pointer; padding: 4px 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--soft-text-color); }
.mc-firstrun__hide:hover { color: var(--source-ink); }
.mc-firstrun h2 { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; }
.mc-firstrun__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 22px; margin: 0; padding: 0; list-style: none; }
.mc-firstrun__steps li { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.mc-firstrun__num { flex-shrink: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; line-height: 1.6; color: var(--soft-text-color); }
.mc-firstrun__step { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mc-firstrun__step strong { font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; }
.mc-firstrun__step span { font-size: 12.5px; line-height: 1.55; color: var(--soft-text-color); }
.mc-firstrun__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding-top: 16px; border-top: 1px solid var(--line-color); }
.mc-firstrun__trial { flex: 1 1 280px; margin: 0; font-size: 13px; line-height: 1.6; color: var(--text-color); }
.mc-firstrun__sample { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.mc-firstrun__sample .bd-btn { min-height: 2.4rem; padding: 0.5rem 1.1rem; font-size: 0.66rem; color: var(--source-ink); border-color: var(--line-strong-color); }
.mc-firstrun__sample .bd-hint { max-width: 34ch; line-height: 1.6; }
@media (max-width: 900px) {
  .mc-firstrun { padding: 20px 18px 18px; }
  .mc-firstrun h2 { font-size: 19px; }
  .mc-firstrun__steps { grid-template-columns: 1fr; gap: 12px; }
  .mc-firstrun__sample { align-items: stretch; width: 100%; }
  .mc-firstrun__sample .bd-btn { width: 100%; }
  .mc-firstrun__sample .bd-hint { max-width: none; }
}