/* MB MEDIA — Built for MOHAMAD BASSEM MEFTAH — mftahbassem@gmail.com */
/* ============================================================
   tts.css — MB Voice Lab tool pages
   Generic, reusable classes (vl-*). Uses --mb-* design tokens the
   ONLY source of truth (design-tokens.css). No hardcoded colors.
   Intended to also serve STT/SRT pages in a later batch.
   ============================================================ */

/* ---- base (light reset, no overflow-x:hidden on html/body) ---- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-block-size: 100vh;
  margin: 0;
  font-family: var(--mb-font-body);
  font-size: var(--mb-t-base);
  line-height: var(--mb-lh-normal);
  color: var(--mb-fg);
  background-color: var(--mb-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  font-family: var(--mb-font-heading);
  font-weight: var(--mb-w-semibold);
  line-height: var(--mb-lh-tight);
  letter-spacing: var(--mb-ls-tight);
  color: var(--mb-fg);
  margin: 0 0 var(--mb-s-3);
}

p { margin: 0; }
a { color: var(--mb-accent); text-underline-offset: 3px; }

input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[disabled] { cursor: not-allowed; opacity: 0.6; }

:focus { outline: none; }
:focus-visible {
  outline: var(--mb-ring-w) solid var(--mb-focus-ring);
  outline-offset: var(--mb-ring-offset);
  border-radius: var(--mb-r-sm);
}

img, canvas, video { display: block; max-inline-size: 100%; }

/* ---- helpers ---- */
.container { width: min(var(--mb-width-page), 100% - (var(--mb-s-5) * 2)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mono { font-family: var(--mb-font-mono); }
.muted { color: var(--mb-fg-muted); }

/* ---- page layout: two columns desktop, one on mobile ---- */
.vl-main { padding-block: var(--mb-s-6) var(--mb-s-8); }
.vl-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mb-s-5);
}
@media (min-width: 768px) {
  .vl-layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  /* logical placement: controls on inline-START, text on inline-END (auto mirrors
     between RTL and LTR so the entry point sits on the reading side) */
  .vl-layout > .vl-col-controls { order: 1; }
  .vl-layout > .vl-col-text { order: 2; }
  /* balance column heights: let the text column stretch and grow the field */
  .vl-col-text { display: flex; flex-direction: column; }
  .vl-col-text form { display: flex; flex-direction: column; flex: 1 1 auto; }
  .vl-col-text #tts-text { flex: 1 1 auto; }
}

/* ---- cards ---- */
.vl-card {
  padding: var(--mb-card-pad);
  background: var(--mb-bg-elevated);
  border: 1px solid var(--mb-border);
  border-radius: var(--mb-card-radius);
  box-shadow: var(--mb-shadow-sm);
}
.vl-card__title { font-family: var(--mb-font-heading); font-weight: var(--mb-w-semibold); font-size: var(--mb-t-xl); margin-block-end: var(--mb-s-2); color: var(--mb-fg); }
.vl-card__sub { color: var(--mb-fg-muted); font-size: var(--mb-t-sm); margin-block-end: var(--mb-s-5); }

/* ---- fields ---- */
.vl-field { display: grid; gap: var(--mb-s-2); margin-block-end: var(--mb-s-4); }
.vl-field > span { font-size: var(--mb-t-sm); font-weight: var(--mb-w-medium); color: var(--mb-fg-muted); }
input#tts-text, textarea,
.vl-field input[type="text"],
.vl-field input[type="email"],
.vl-field select {
  inline-size: 100%;
  padding: var(--mb-input-pad);
  border: 1px solid var(--mb-input-border);
  border-radius: var(--mb-input-radius);
  background: var(--mb-input-bg);
  color: var(--mb-input-fg);
  transition: border-color var(--mb-dur-fast) var(--mb-ease), box-shadow var(--mb-dur-fast) var(--mb-ease);
}
/* browser autofill must not force its own light background over identity vars */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--mb-input-fg);
  -webkit-box-shadow: 0 0 0 1000px var(--mb-input-bg) inset;
  caret-color: var(--mb-input-fg);
  transition: background-color 9999s ease-in-out 0s;
}
.vl-field select { min-block-size: var(--mb-input-h); }
textarea#tts-text {
  min-block-size: 180px;
  resize: vertical;
}
textarea::placeholder { color: var(--mb-input-placeholder); }
input#tts-text:focus, textarea:focus,
.vl-field select:focus { border-color: var(--mb-accent); box-shadow: 0 0 0 var(--mb-ring-offset) var(--mb-focus-ring-offset), 0 0 0 var(--mb-ring-w) var(--mb-focus-ring); }

/* ---- char counter (JetBrains Mono, LTR inside RTL) ---- */
.vl-char-count {
  display: inline-flex; align-items: center; gap: 0.25em;
  font-family: var(--mb-font-mono);
  font-size: var(--mb-t-sm);
  color: var(--mb-fg-subtle);
  direction: ltr;
  text-align: right;
}
.vl-char-count .count-now { color: var(--mb-fg); min-inline-size: 3ch; text-align: right; }
.vl-char-count.is-warn, .vl-char-count.is-warn .count-now { color: var(--mb-cta); }
.vl-hint {
  display: block;
  margin-block-start: var(--mb-s-2);
  font-size: var(--mb-t-xs);
  color: var(--mb-fg-subtle);
  line-height: 1.5;
}
.vl-hint:first-of-type { margin-block-start: var(--mb-s-1); }

/* ---- control groups with thin divider ---- */
.vl-group { padding-block: var(--mb-s-4); }
.vl-group + .vl-group { border-block-start: 1px solid var(--mb-border); }
.vl-group h3 { font-family: var(--mb-font-heading); font-size: var(--mb-t-sm); font-weight: var(--mb-w-semibold); color: var(--mb-fg-muted); text-transform: uppercase; letter-spacing: var(--mb-ls-wide); margin-block-end: var(--mb-s-4); }

/* ---- advanced (mobile details) ---- */
.vl-advanced { margin-block-start: var(--mb-s-2); }
.vl-advanced summary { cursor: pointer; color: var(--mb-accent); font-size: var(--mb-t-sm); font-weight: var(--mb-w-medium); padding: var(--mb-s-2) 0; }
@media (min-width: 768px) {
  .vl-advanced summary { display: none; }
}
.vl-advanced[open] .vl-advanced__body { padding-block-start: var(--mb-s-2); }

/* ---- enhance checkbox ---- */
.vl-check { display: flex; align-items: center; gap: var(--mb-s-3); cursor: pointer; padding-block: var(--mb-s-1); }
/* The "enhance Arabic pronunciation" flag is currently hidden: it is sent to the
   server but no engine consumes it yet, so it must not advertise an unavailable
   feature. Code, IDs and i18n keys are kept for a future real implementation. */
.vl-check:has(#tts-enhance) { display: none !important; }
.vl-check input {
  appearance: none;
  -webkit-appearance: none;
  inline-size: 24px;
  block-size: 24px;
  margin: 0;
  accent-color: var(--mb-accent);
  background-color: var(--mb-bg-sunken);
  border: 1px solid var(--mb-border);
  border-radius: var(--mb-r-sm);
  display: grid;
  place-content: center;
  flex: none;
  transition: border-color var(--mb-dur-fast) var(--mb-ease), background-color var(--mb-dur-fast) var(--mb-ease);
  cursor: pointer;
}
.vl-check input::before {
  content: "";
  inline-size: 14px;
  block-size: 14px;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transition: transform var(--mb-dur-fast) var(--mb-ease);
  background: var(--mb-accent-fg);
}
.vl-check input:checked { background-color: var(--mb-accent); border-color: var(--mb-accent); }
.vl-check input:checked::before { transform: scale(1); }
.vl-check input:hover:not(:checked) { border-color: var(--mb-accent); }
.vl-check input:checked:hover { border-color: var(--mb-accent-hover); }
.vl-check input:focus-visible { outline: var(--mb-ring-w) solid var(--mb-focus-ring); outline-offset: var(--mb-ring-offset); }
.vl-check span { font-size: var(--mb-t-sm); color: var(--mb-fg-muted); }

/* ---- range sliders ---- */
.vl-range { display: grid; gap: var(--mb-s-2); margin-block-end: var(--mb-s-4); }
.vl-range .vl-range__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--mb-s-3); }
.vl-range .vl-range__label { font-size: var(--mb-t-sm); font-weight: var(--mb-w-medium); color: var(--mb-fg-muted); }
.vl-range .vl-range__val { font-family: var(--mb-font-mono); font-size: var(--mb-t-sm); color: var(--mb-fg); }
.vl-range input[type="range"] { inline-size: 100%; accent-color: var(--mb-accent); background: transparent; }
.vl-range .vl-range__warn { display: none; font-size: var(--mb-t-xs); color: var(--mb-warning); }
.vl-range.is-warn .vl-range__warn { display: block; }

/* thumb styling for consistency */
.vl-range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; block-size: 18px; inline-size: 18px; border-radius: var(--mb-r-full); background: var(--mb-accent); border: 2px solid var(--mb-bg); margin-block-start: -7px; box-shadow: 0 0 0 1px var(--mb-accent); }
.vl-range input[type="range"]::-webkit-slider-runnable-track { block-size: 4px; background: var(--mb-border); border-radius: var(--mb-r-full); }
.vl-range input[type="range"]::-moz-range-thumb { block-size: 18px; inline-size: 18px; border-radius: var(--mb-r-full); background: var(--mb-accent); border: 2px solid var(--mb-bg); box-shadow: 0 0 0 1px var(--mb-accent); }
.vl-range input[type="range"]::-moz-range-track { block-size: 4px; background: var(--mb-border); border-radius: var(--mb-r-full); }

/* ---- buttons ---- */
.vl-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--mb-s-2); min-block-size: var(--mb-btn-h); padding: 0 var(--mb-btn-pad); border: var(--mb-btn-border-w) solid transparent; border-radius: var(--mb-btn-radius); font-family: var(--mb-font-body); font-size: var(--mb-btn-size); font-weight: var(--mb-btn-weight); line-height: 1; text-decoration: none; cursor: pointer; transition: border-color var(--mb-dur-fast) var(--mb-ease), background-color var(--mb-dur-fast) var(--mb-ease), color var(--mb-dur-fast) var(--mb-ease), transform var(--mb-dur-fast) var(--mb-ease); }
.vl-btn:active { transform: translateY(1px); }

/* secondary buttons: thin cyan border, transparent bg */
.vl-btn--ghost { background: transparent; color: var(--mb-accent); border-color: var(--mb-accent); }
.vl-btn--ghost:hover { background: var(--mb-nav-pill); color: var(--mb-accent-hover); }

/* primary generate button: ONE coral per page */
.vl-btn--cta { background: var(--mb-cta); color: var(--mb-cta-fg); }
.vl-btn--cta:hover { background: var(--mb-cta-hover); }
.vl-btn--cta[disabled] { background: var(--mb-border-strong); color: var(--mb-fg-muted); }

.vl-btn--block { inline-size: 100%; }
.vl-btn--sm { min-block-size: 38px; padding: 0 var(--mb-s-4); font-size: var(--mb-t-sm); }

/* primary generate button: content width + comfy padding on desktop,
   full-width on phones for a larger tap target */
.vl-cta-row { margin-block-start: var(--mb-s-5); display: flex; justify-content: center; }
.vl-cta-row .vl-btn--cta { inline-size: auto; }
@media (max-width: 767px) {
  .vl-cta-row { display: block; }
  .vl-cta-row .vl-btn--cta { inline-size: 100%; }
}

.vl-actions { display: flex; flex-wrap: wrap; gap: var(--mb-s-3); margin-block-start: var(--mb-s-4); }
.vl-actions .spacer { margin-inline-start: auto; }

/* ---- result (hidden until first generation) ---- */
.vl-result { display: none; margin-block-start: var(--mb-s-6); }
.vl-result.is-open { display: block; animation: vl-rise 300ms var(--mb-ease-out) once; }
@keyframes vl-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---- waveform canvas ---- */
.vl-wave-wrap { margin-block-start: var(--mb-s-5); }
.vl-wave {
  inline-size: 100%;
  block-size: 56px;
  border: 1px solid var(--mb-border);
  border-radius: var(--mb-r-md);
  background: var(--mb-bg-sunken);
}
@media (min-width: 768px) {
  .vl-wave { block-size: 80px; }
}

/* ---- audio player + meta ---- */
.vl-media { margin-block-start: var(--mb-s-4); }
.vl-media audio { inline-size: 100%; }
.vl-media__stats { font-family: var(--mb-font-mono); font-size: var(--mb-t-sm); color: var(--mb-fg-muted); margin-block-start: var(--mb-s-2); }

/* ---- quota line ---- */
.vl-quota { margin: 0; margin-block-start: var(--mb-s-5); font-size: var(--mb-t-xs); color: var(--mb-fg-subtle); }
.vl-quota meter { inline-size: 100%; block-size: 6px; }

/* ---- upload drop area (STT/SRT) ---- */
.vl-drop {
  display: grid;
  place-items: center;
  gap: var(--mb-s-3);
  text-align: center;
  padding: var(--mb-s-8) var(--mb-s-5);
  border: 1px dashed var(--mb-border-strong);
  border-radius: var(--mb-card-radius);
  background: var(--mb-bg-sunken);
  cursor: pointer;
  color: var(--mb-fg-subtle);
  transition: border-color var(--mb-dur-fast) var(--mb-ease), background-color var(--mb-dur-fast) var(--mb-ease);
}
.vl-drop:hover, .vl-drop.is-drag { border-color: var(--mb-accent); background: var(--mb-bg-elevated); }
.vl-drop__ico { font-size: 26px; color: var(--mb-accent); }
.vl-drop__hint { font-size: var(--mb-t-sm); color: var(--mb-fg-subtle); }
.vl-fileinfo { display: flex; align-items: center; justify-content: space-between; gap: var(--mb-s-3); margin-block-start: var(--mb-s-3); font-size: var(--mb-t-sm); color: var(--mb-fg-muted); }
.vl-fileinfo .mono { color: var(--mb-fg); }

/* ---- output / result box (STT text, SRT preview) ---- */
.vl-out {
  inline-size: 100%;
  min-block-size: 160px;
  padding: var(--mb-input-pad);
  border: 1px solid var(--mb-input-border);
  border-radius: var(--mb-input-radius);
  background: var(--mb-bg-sunken);
  color: var(--mb-fg);
  direction: inherit;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: var(--mb-t-base);
}
.vl-field textarea.vl-out { resize: vertical; }

/* ---- content sections (features + FAQ) ---- */
.vl-sec { margin-block-start: var(--mb-s-8); }
.vl-sec__title { font-family: var(--mb-font-heading); font-size: var(--mb-t-2xl); font-weight: var(--mb-w-semibold); color: var(--mb-fg); margin-block-end: var(--mb-s-5); }
.vl-feats { display: grid; grid-template-columns: 1fr; gap: var(--mb-s-4); }
@media (min-width: 768px) {
  .vl-feats { grid-template-columns: repeat(3, 1fr); }
}
.vl-feat {
  padding: var(--mb-card-pad);
  background: var(--mb-bg-elevated);
  border: 1px solid var(--mb-border);
  border-radius: var(--mb-card-radius);
}
.vl-feat__ico {
  display: grid; place-items: center;
  inline-size: 44px; block-size: 44px;
  margin-block-end: var(--mb-s-3);
  font-size: 22px;
  color: var(--mb-accent);
  border: 1px solid var(--mb-border-strong);
  border-radius: var(--mb-r-lg);
}
.vl-feat h3 { font-family: var(--mb-font-heading); font-size: var(--mb-t-lg); font-weight: var(--mb-w-semibold); margin-block-end: var(--mb-s-2); color: var(--mb-fg); }
.vl-feat p { font-size: var(--mb-t-sm); color: var(--mb-fg-muted); margin: 0; }

.vl-faq {
  border: 1px solid var(--mb-border);
  border-radius: var(--mb-r-md);
  background: var(--mb-bg-elevated);
  margin-block-end: var(--mb-s-3);
}
.vl-faq summary { cursor: pointer; padding: var(--mb-s-4); font-weight: var(--mb-w-semibold); color: var(--mb-fg); font-size: var(--mb-t-base); }
.vl-faq summary:hover { color: var(--mb-accent); }
.vl-faq p { margin: 0; padding: 0 var(--mb-s-4) var(--mb-s-4); color: var(--mb-fg-muted); font-size: var(--mb-t-sm); }

@media (prefers-reduced-motion: reduce) {
  .vl-result.is-open { animation: none; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---- unified message bar (extended acc-alert: ok / warn / err + close) ---- */
.acc-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mb-s-3);
  padding: var(--mb-s-3) var(--mb-s-4);
  margin-block-end: var(--mb-s-4);
  border: 1px solid var(--mb-border);
  border-radius: var(--mb-r-md);
  background: var(--mb-bg-elevated);
  color: var(--mb-fg);
  font-size: var(--mb-t-sm);
}
.acc-alert[hidden] { display: none; }
.acc-alert.is-ok { border-color: var(--mb-success); }
.acc-alert.is-warn { border-color: var(--mb-warning); }
.acc-alert.is-err { border-color: var(--mb-danger); }
.acc-alert__close {
  flex: none;
  display: inline-grid; place-items: center;
  min-inline-size: var(--mb-tap); min-block-size: var(--mb-tap);
  border: none;
  background: none;
  color: var(--mb-fg);
  font-size: var(--mb-t-lg);
  line-height: 1;
  cursor: pointer;
  border-radius: var(--mb-r-md);
}
.acc-alert__close:hover { color: var(--mb-fg); background: var(--mb-bg-sunken); }