/* ======================================================================
   Verse Studio — GLOBAL UI POLISH (V1.8)
   Modern, feasible-by-default styling for every screen size.
   Loaded BEFORE mobile-app.css, so the phone app layer always wins
   on small screens. Desktop gets the refinement, mobile keeps the app.

   Design system: same CSS variables as the rest of the studio
   (--bg --panel --line --text --muted --green) — light mode included.
   ====================================================================== */

/* ---------- focus & selection: visible, brand-tinted ---------- */
:focus-visible{
  outline:2px solid color-mix(in srgb, var(--green) 65%, transparent);
  outline-offset:2px; border-radius:8px;
}
::selection{ background:color-mix(in srgb, var(--green) 30%, transparent); }

/* ---------- app bar: sticky + frosted on desktop too ---------- */
.app-header{
  position:sticky; top:0; z-index:300;
  background:color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s ease;
}
.app-header h1{ letter-spacing:.2px; }
.ver-badge{ transition:transform .2s ease; }
.ver-badge:hover{ transform:translateY(-1px); }

/* ---------- buttons: one consistent motion language ---------- */
button{ transition:background-color .16s ease, border-color .16s ease,
        color .16s ease, box-shadow .16s ease, transform .1s ease; }
button:not(:disabled):active{ transform:scale(.97); }
button:disabled{ opacity:.45; cursor:not-allowed; filter:saturate(.6); }
.primary, .home-primary{
  box-shadow:0 6px 18px -8px color-mix(in srgb, var(--green) 55%, transparent);
}
.primary:not(:disabled):hover, .home-primary:not(:disabled):hover{
  box-shadow:0 10px 24px -8px color-mix(in srgb, var(--green) 70%, transparent);
}
.icon-btn:not(:disabled):hover{ border-color:color-mix(in srgb, var(--green) 45%, var(--line)); }

/* ---------- stepper: keep the studio's gold/green state colors, add only
   motion (recoloring here clashed with the original design system) ------- */
.step-btn{ border-radius:999px; }
.step-btn .num{ transition:background-color .16s ease, color .16s ease; }

/* ---------- cards & panels: consistent depth ---------- */
.panel, .home-hero, .home-section, .ed-bin, .ed-player, .ed-details, .ed-timeline{
  box-shadow:0 12px 34px -22px rgba(0,0,0,.55);
}
.home-hero{
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--green) 12%, transparent), transparent 55%),
    var(--surface-grad), var(--panel);
}
.home-project-card{ transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.home-project-card:hover{ transform:translateY(-2px); border-color:color-mix(in srgb, var(--green) 40%, var(--line));
  box-shadow:0 16px 36px -20px rgba(0,0,0,.6); }

/* ---------- inputs: calm, rounded, glowing on focus ---------- */
input[type=text], input[type=number], input[type=email], input[type=password],
textarea, select{
  transition:border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
input:focus, textarea:focus, select:focus{
  border-color:color-mix(in srgb, var(--green) 55%, var(--line));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent);
}

/* ---------- translation fields: fonts match the slide automatically ------
   Urdu script in ANY field switches it to Nastaliq (studio.css .has-urdu);
   this adds the missing half — Latin text in the Roman/reference fields
   switches them to the same Montserrat the slide renders, with LTR/left
   alignment, so what you type is what you get. */
#urduText, #romanText, #refText{ transition:font-family .15s ease; }
#romanText:not(.has-urdu), #refText:not(.has-urdu){
  font-family:'MontserratLocal','Montserrat',system-ui,sans-serif;
  direction:ltr; text-align:left; font-size:14.5px; line-height:1.7;
}

/* ---------- range sliders: brand accent everywhere ---------- */
input[type=range]{ accent-color:var(--green); }

/* ---------- scrollbars: slim + themed ---------- */
*{ scrollbar-width:thin; scrollbar-color:color-mix(in srgb, var(--text) 22%, transparent) transparent; }
*::-webkit-scrollbar{ width:9px; height:9px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{
  background:color-mix(in srgb, var(--text) 20%, transparent);
  border-radius:8px; border:2px solid transparent; background-clip:content-box;
}
*::-webkit-scrollbar-thumb:hover{ background-color:color-mix(in srgb, var(--text) 34%, transparent); }

/* ---------- toasts: glass pill ---------- */


/* ---------- overlays: softer entrance ---------- */
.overlay, .set-overlay, .q-overlay, .ex-overlay{
  animation:vsOverlayIn .18s ease;
}
@keyframes vsOverlayIn{ from{ opacity:0; } to{ opacity:1; } }
.set-card, .q-card, .ex-card{ animation:vsCardIn .22s cubic-bezier(.25,.8,.3,1); }
@keyframes vsCardIn{ from{ opacity:0; transform:translateY(10px) scale(.985); } to{ opacity:1; transform:none; } }

/* ---------- view transitions: gentle, no jank ---------- */
.view.active{ animation:vsViewIn .22s ease; }
@keyframes vsViewIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* ---------- editor: calmer chrome ---------- */
.ed-player-head, .ed-bin-head{
  letter-spacing:.04em; text-transform:uppercase; font-size:10px; color:var(--muted);
}
.bin-item{ transition:transform .14s ease, border-color .14s ease; }
.bin-item:hover{ transform:translateY(-2px); }
#edExportBtn{ font-weight:700; letter-spacing:.02em; }

/* ---------- prefers-reduced-motion: honor it ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* Step 2: "Re-align sections" */
.s2-realign{
  display:inline-flex; align-items:center; gap:6px; margin:8px 0 2px; padding:7px 13px; border-radius:10px;
  border:1px solid var(--line); background:var(--panel2); color:var(--muted); font-size:12px; font-weight:600; cursor:pointer;
}
.s2-realign:hover{ color:var(--gold); border-color:var(--gold); }
body.m-ui .s2-realign{ min-height:38px; font-size:13px; }