/* Speech lab: Rabta design tokens (from the Rabta design system, colors_and_type.css). */
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('brand/fonts/Inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url('brand/fonts/Inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('brand/fonts/Inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-display: swap; src: url('brand/fonts/Inter-700.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 100 900; font-display: swap; src: url('brand/fonts/Montserrat-VariableFont_wght.ttf') format('truetype'); }

:root {
  --rabta-deep-clay: #2F2F3F; --rabta-mosaic-purple: #9CA6FF; --rabta-mosaic-green: #6ED3C4;
  --rabta-sky-blue: #4459D8; --rabta-sunburst: #FCC447; --rabta-white: #FFFFFF;
  --clay-900: #1A1A24; --clay-700: #3F3F52; --clay-600: #545468; --clay-500: #71718A; --clay-400: #9494AB;
  --clay-300: #BCBCCB; --clay-200: #D9D9E3; --clay-100: #ECECF1; --clay-50: #F6F6F9;
  --blue-700: #2B3CB0; --blue-600: #3848C4; --blue-50: #EEF0FC; --green-600: #4FB5A5; --green-50: #ECF9F6;
  --bg: #FFFFFF; --bg-subtle: var(--clay-50); --bg-muted: var(--clay-100);
  --fg: var(--rabta-deep-clay); --fg-muted: var(--clay-500); --fg-subtle: var(--clay-400);
  --border: var(--clay-200); --border-strong: var(--clay-300);
  --action: var(--rabta-sky-blue); --action-hover: var(--blue-600); --action-pressed: var(--blue-700);
  --danger: #DC2626; --danger-bg: #FEF2F2;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Montserrat', 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-urdu: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Noto Naskh Arabic', 'Geeza Pro', serif;
  --radius: 0.5rem;
  --shadow-sm: 0 1px 2px rgba(47,47,63,.06), 0 1px 3px rgba(47,47,63,.08);
  --shadow-md: 0 4px 12px rgba(47,47,63,.08), 0 2px 4px rgba(47,47,63,.06);
  --shadow-focus: 0 0 0 3px rgba(68,89,216,.30);
  --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg-subtle); color: var(--fg); font-family: var(--font-sans); font-size: 14px; line-height: 1.5; }
.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon-hero { width: 24px; height: 24px; }

/* Top bar */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 32px; background: var(--bg); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 5; }
.brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
.lockup { height: 26px; width: auto; display: block; }
.divider { width: 1px; height: 24px; background: var(--border); }
.product { display: flex; align-items: center; gap: 10px; }
.product-name { font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; font-size: 12px; font-weight: 500; padding: 3px 10px; white-space: nowrap; }
.badge .icon { width: 14px; height: 14px; }
.badge-outline { border: 1px solid var(--border); color: var(--fg-muted); padding: 1px 8px; }
.badge-status { border: 1px solid var(--border); background: var(--bg); color: var(--fg); font-family: var(--font-mono); font-size: 11.5px; }
.badge-status .dot, .state-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--clay-300); }
.badge-status[data-state="ready"] .dot { background: var(--rabta-mosaic-green); }
.badge-status[data-state="error"] .dot { background: var(--danger); }
.badge-status[data-state="error"] { color: var(--danger); border-color: #FECACA; background: var(--danger-bg); }

/* Layout */
.layout { max-width: 1240px; margin: 0 auto; padding: 24px 32px 16px; display: grid; gap: 24px; grid-template-columns: minmax(340px, 5fr) minmax(0, 7fr); grid-template-areas: "stage feed" "upload upload"; }
.stage { grid-area: stage; } .feed { grid-area: feed; } .upload { grid-area: upload; }

.card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 24px; min-width: 0; }
.card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.card-title { font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.card-description { margin: 4px 0 0; color: var(--fg-muted); font-size: 13px; }
.card-actions { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--bg-muted); border-radius: var(--radius); margin-right: 4px; }
.segmented button { height: 26px; padding: 0 10px; border: 0; border-radius: calc(var(--radius) - 2px); background: transparent; color: var(--fg-muted); font: 500 12.5px/1 var(--font-sans); cursor: pointer; white-space: nowrap; transition: background 150ms var(--ease), color 150ms var(--ease); }
.segmented button:hover { color: var(--fg); }
.segmented button[aria-pressed="true"] { background: var(--bg); color: var(--fg); box-shadow: var(--shadow-sm); }
.segmented button:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Voice stage (brand moment) */
.card-dark { overflow: hidden;  background: radial-gradient(120% 80% at 50% 38%, #3A3A52 0%, var(--rabta-deep-clay) 55%, var(--clay-900) 100%); color: #fff; border-radius: var(--radius); padding: 28px 24px 24px; box-shadow: 0 10px 30px rgba(26,26,36,.25); display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.eyebrow { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rabta-mosaic-purple); }
.stage-title { font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin: 8px 0 4px; }
.stage-sub { margin: 0; color: rgba(255,255,255,.65); font-size: 13px; }

.orb-wrap { position: relative; width: min(340px, 100%); aspect-ratio: 1; margin: 12px 0 4px; display: grid; place-items: center; }
#orb { position: absolute; inset: -20%; width: 140%; height: 140%; pointer-events: none; }
.orb-core { position: relative; width: 38%; aspect-ratio: 1; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(255,255,255,.6), 0 8px 30px rgba(26,26,36,.35); transition: transform 200ms var(--ease); }
.mark { width: 62%; height: 62%; }

/* Approved build-in of the mark (brand "diamond bloom"); geometry and colours never change. */
.mark .r-frame, .mark .r-facet, .mark .r-petal, .mark .r-star { transform-origin: 50% 50%; }
.bloom .mark .r-frame { animation: r-fadein 700ms var(--ease-enter) both; }
.bloom .mark .r-facet { animation: r-bloom 700ms var(--ease-enter) 150ms both; }
.bloom .mark .r-petal { animation: r-bloom 700ms var(--ease-enter) 300ms both; }
.bloom .mark .r-star  { animation: r-pop 600ms cubic-bezier(0.175, 0.885, 0.32, 1.45) 600ms both; }
@keyframes r-fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes r-bloom { from { opacity: 0; transform: scale(0.4) rotate(-12deg); } to { opacity: 1; transform: none; } }
@keyframes r-pop { 0% { opacity: 0; transform: scale(0); } 70% { opacity: 1; transform: scale(1.18); } 100% { opacity: 1; transform: scale(1); } }

.stage-state { min-height: 30px; margin-top: 4px; }
.state-pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.85); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); }
.state-pill .dot { background: var(--clay-400); }
.state-pill[data-state="listening"] .dot { background: var(--rabta-mosaic-green); box-shadow: 0 0 0 3px rgba(110,211,196,.25); }
.state-pill[data-state="speaking"] .dot { background: var(--rabta-mosaic-green); animation: live 1s var(--ease) infinite; }
.state-pill[data-state="processing"] .dot { background: var(--rabta-sunburst); }
@keyframes live { 0%, 100% { box-shadow: 0 0 0 2px rgba(110,211,196,.45); } 50% { box-shadow: 0 0 0 7px rgba(110,211,196,0); } }

.stage-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; justify-content: center; }
.stage-status { margin: 12px 0 0; min-height: 20px; font-size: 12.5px; color: rgba(255,255,255,.6); }
.stage-status.error { color: #FCA5A5; }

/* Buttons (shadcn vocabulary) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: var(--radius); border: 1px solid transparent; font: 500 14px/1 var(--font-sans); letter-spacing: 0.01em; cursor: pointer; transition: background 150ms var(--ease), border-color 150ms var(--ease), color 150ms var(--ease), transform 150ms var(--ease); white-space: nowrap; }
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-lg { height: 42px; padding: 0 20px; }
.btn-sm { height: 32px; padding: 0 10px; font-size: 13px; }
.btn-sm .icon { width: 16px; height: 16px; }
.btn-primary { background: var(--action); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--action-hover); }
.btn-ghost { background: transparent; color: var(--fg-muted); }
.btn-ghost:hover:not(:disabled) { background: var(--bg-muted); color: var(--fg); }
.btn-on-dark { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.18); }
.btn-on-dark:hover:not(:disabled) { background: rgba(255,255,255,.14); }

/* Transcript */
.feed { display: flex; flex-direction: column; }
.phrases { display: flex; flex-direction: column; gap: 10px; }
#live-results { flex: 1; min-height: 360px; max-height: 620px; overflow-y: auto; padding-right: 4px; scroll-behavior: smooth; }
.phrase { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; background: var(--bg); animation: enter 300ms var(--ease-enter) both; }
.phrase.fresh { border-color: var(--rabta-mosaic-green); box-shadow: 0 0 0 3px rgba(110,211,196,.18); transition: border-color 1200ms var(--ease), box-shadow 1200ms var(--ease); }
.phrase-meta { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-subtle); font-variant-numeric: tabular-nums; }
.phrase-meta .pill { font-family: var(--font-sans); font-size: 11px; color: var(--fg-muted); background: var(--bg-muted); border-radius: 999px; padding: 1px 8px; }
.transcript { margin: 4px 0 0; font-family: var(--font-urdu); font-size: 21px; line-height: 2.2; color: var(--fg); overflow-wrap: anywhere; unicode-bidi: isolate; text-align: start; }
.transcript .latin { font-family: var(--font-sans); font-size: 0.8em; font-weight: 500; unicode-bidi: isolate; direction: ltr; }
@keyframes enter { from { opacity: 0; transform: translateY(10px) scale(0.99); } to { opacity: 1; transform: none; } }

.empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--fg-muted); padding: 40px 16px; }
.empty .icon-hero { color: var(--fg-subtle); margin-bottom: 8px; }
.empty-title { margin: 0; font-weight: 600; color: var(--fg); }
.empty-sub { margin: 4px 0 0; font-size: 13px; max-width: 360px; }

/* Upload */
.upload-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: stretch; }
.dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 22px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius); background: var(--bg-subtle); color: var(--fg-muted); cursor: pointer; text-align: center; transition: border-color 150ms var(--ease), background 150ms var(--ease); }
.dropzone:hover, .dropzone.drag { border-color: var(--action); background: var(--blue-50); }
.dropzone.has-file { border-style: solid; border-color: var(--action); background: var(--blue-50); color: var(--fg); }
.dropzone .icon-hero { color: var(--action); }
.drop-title { font-weight: 500; color: var(--fg); }
.drop-sub { font-size: 12.5px; }
.dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dropzone:focus-within { box-shadow: var(--shadow-focus); border-color: var(--action); }
.upload-actions { display: flex; flex-direction: column; justify-content: center; gap: 10px; min-width: 240px; }
.status { margin: 0; font-size: 12.5px; color: var(--fg-muted); min-height: 18px; }
.status.error { color: var(--danger); }
.progress { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border: 0; border-radius: 999px; background: var(--bg-muted); overflow: hidden; color: var(--action); }
.progress::-webkit-progress-bar { background: var(--bg-muted); border-radius: 999px; }
.progress::-webkit-progress-value { background: var(--action); border-radius: 999px; transition: width 300ms var(--ease); }
.progress::-moz-progress-bar { background: var(--action); border-radius: 999px; }
.progress:indeterminate { background: linear-gradient(90deg, var(--bg-muted) 0%, var(--blue-50) 30%, var(--mosaic-tint, #C9CEFF) 50%, var(--blue-50) 70%, var(--bg-muted) 100%) 0 0 / 200% 100%; animation: shimmer 1.4s linear infinite; }
.progress:indeterminate::-webkit-progress-bar { background: transparent; }
.progress:indeterminate::-moz-progress-bar { background: transparent; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.status-quiet { font-family: var(--font-mono); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 20px 0 16px; }
.stat { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.stat-label { font-size: 12px; color: var(--fg-muted); }
.stat-value { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.phrases-upload { max-height: 520px; overflow-y: auto; padding-right: 4px; }
.phrases-upload .phrase { cursor: pointer; transition: border-color 150ms var(--ease), background 150ms var(--ease); }
.phrases-upload .phrase:hover { border-color: var(--border-strong); }
.phrases-upload .phrase[aria-current="true"] { border-color: var(--action); box-shadow: inset 3px 0 0 var(--action); background: var(--blue-50); }
.play { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px 0 6px; margin-left: -6px; border: 0; border-radius: 999px; background: transparent; color: var(--fg-muted); font: inherit; cursor: pointer; }
.play .icon { width: 12px; height: 12px; fill: currentColor; }
.play:hover { background: var(--bg-muted); color: var(--action); }
.play:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.phrase[aria-current="true"] .play { color: var(--action); }
.player { display: block; width: 100%; height: 40px; margin: 16px 0 0; }

/* Samples */
.samples { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; margin: 0 0 16px; }
.samples-label { font-size: 13px; color: var(--fg-muted); }
.samples-list { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-outline { background: var(--bg); color: var(--fg); border-color: var(--border); }
.btn-outline:hover:not(:disabled) { border-color: var(--action); color: var(--action); background: var(--blue-50); }

/* Annotations: identifiers (Sunburst tint) and words the model is unsure of (Mosaic Purple dotted underline) */
.transcript .ident { background: rgba(252,196,71,.28); border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 2px; }
.transcript .ident-check { background: transparent; text-decoration: underline dotted var(--rabta-sunburst); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.transcript .unsure { text-decoration: underline dotted var(--rabta-mosaic-purple); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.transcript .ident.unsure { text-decoration-color: var(--rabta-mosaic-purple); }
.legend { margin: 12px 0 0; font-size: 12px; color: var(--fg-muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.legend .ident { background: rgba(252,196,71,.28); border-radius: 4px; padding: 0 4px; color: var(--fg); font-family: var(--font-mono); font-size: 11px; }
.legend .unsure { color: var(--fg); text-decoration: underline dotted var(--rabta-mosaic-purple); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.legend-sep { color: var(--fg-subtle); }
.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; }

/* Live placeholder while a queued phrase is transcribed */
.phrase.pending { border-style: dashed; background: var(--bg-subtle); }
.phrase.pending .transcript { font-family: var(--font-sans); font-size: 13px; line-height: 2; color: var(--fg-subtle); }
.dots::after { content: '…'; display: inline-block; animation: dots 1.2s steps(4, end) infinite; overflow: hidden; vertical-align: bottom; width: 0; }
@keyframes dots { to { width: 1.1em; } }
.phrases-upload:empty { display: none; }
.upload .upload-form + .stats[hidden] + .phrases-upload:empty { display: none; }

.footer { max-width: 1240px; margin: 0 auto; padding: 8px 32px 28px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--fg-subtle); font-size: 12px; }
.footer span { display: inline-flex; align-items: center; gap: 6px; }
.footer .icon { width: 14px; height: 14px; }

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; grid-template-areas: "stage" "feed" "upload"; padding: 16px; gap: 16px; }
  .topbar { padding: 12px 16px; }
  .upload-form { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #live-results { min-height: 220px; }
}
@media (max-width: 600px) {
  .card-header { flex-direction: column; gap: 12px; } .card-actions { justify-content: flex-start; flex-wrap: nowrap; gap: 0; }
  .card-actions .btn-sm { padding: 0 8px; } .card-actions .btn-label { display: none; } .segmented button { padding: 0 8px; }
  .topbar { flex-wrap: wrap; row-gap: 8px; }
  .lockup { height: 22px; }
  .brand { gap: 10px; }
  .product .badge-outline { display: none; }
  .samples { align-items: flex-start; flex-direction: column; }
  .topbar-meta { width: 100%; }
  .badge-status { font-size: 10.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .stage-title { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* Passcode page */
.login-body { min-height: 100vh; display: grid; place-items: center; padding: 24px; box-sizing: border-box; }
.login { width: min(400px, 100%); }
.login-card { display: flex; flex-direction: column; gap: 18px; padding: 32px; }
.login-card .lockup { margin-bottom: 4px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 13px; font-weight: 500; }
.input { height: 38px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius); font: 14px var(--font-sans); background: var(--bg); color: var(--fg); }
.input:focus-visible { outline: none; border-color: var(--action); box-shadow: var(--shadow-focus); }
.login-note { margin: 0; font-size: 12px; color: var(--fg-muted); text-align: center; }