/* Reels Factory team UI: Arabic, RTL, mobile first. No external resources. */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/ui/fonts/IBMPlexSansArabic-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/ui/fonts/IBMPlexSansArabic-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --bg: #f4f6f7;
  --surface: #ffffff;
  --surface-2: #eef2f4;
  --text: #17232b;
  --muted: #56656f;
  --border: #d5dde2;
  --primary: #1f5f74;
  --primary-text: #ffffff;
  --focus: #c26a00;
  --ok-bg: #e3f4ea; --ok-fg: #17603a;
  --warn-bg: #fff3d6; --warn-fg: #7a4b00;
  --bad-bg: #fde8e7; --bad-fg: #9b1c1c;
  --info-bg: #e3eef8; --info-fg: #1d4f80;
  --neutral-bg: #eceff1; --neutral-fg: #3f4b53;
  --radius: 10px;
  --shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 2px 8px rgb(0 0 0 / 4%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f171c;
    --surface: #17232b;
    --surface-2: #1e2d36;
    --text: #e7eef2;
    --muted: #a3b2bb;
    --border: #2f414c;
    --primary: #5fb3cf;
    --primary-text: #0b1418;
    --focus: #ffb454;
    --ok-bg: #143524; --ok-fg: #8fe0b0;
    --warn-bg: #3a2c0b; --warn-fg: #ffd27a;
    --bad-bg: #401717; --bad-fg: #ffaaa5;
    --info-bg: #13304a; --info-fg: #9fcaf2;
    --neutral-bg: #26343d; --neutral-fg: #c5d1d8;
    --shadow: none;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
h1, h2, h3 { line-height: 1.35; margin: 0 0 .5rem; font-weight: 600; }
h1 { font-size: 1.4rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; margin-block-start: 1rem; }
p { margin: 0 0 .5rem; }
a { color: var(--primary); }
bdi.id, .id { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: .85em; }
.server-text { font-size: .9em; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
pre.value { margin: 0; white-space: pre-wrap; font-size: .85rem; font-family: ui-monospace, Consolas, monospace; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.skip-link { position: absolute; inset-inline-start: .5rem; inset-block-start: -3rem; background: var(--surface); padding: .5rem 1rem; border-radius: var(--radius); z-index: 10; }
.skip-link:focus { inset-block-start: .5rem; }

/* ---------------------------------------------------------------- top bar */
.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  padding: .6rem 1rem;
  background: var(--surface);
  border-block-end: 1px solid var(--border);
}
.brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--text); text-decoration: none; }
.brand .logo { inline-size: 1.4rem; block-size: 1.4rem; border-radius: 6px; background: var(--primary); display: inline-block; }
.nav { display: flex; flex-wrap: wrap; gap: .25rem; }
.nav a { padding: .35rem .7rem; border-radius: 999px; text-decoration: none; color: var(--text); }
.nav a[aria-current="page"] { background: var(--surface-2); font-weight: 600; }
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-inline-start: auto; min-inline-size: 0; }
.tools .user { color: var(--muted); font-size: .85rem; max-inline-size: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

main { display: block; max-inline-size: 1200px; margin: 0 auto; padding: 1rem; }
main:focus { outline: none; }

/* ---------------------------------------------------------------- building blocks */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
  margin-block-end: 1rem;
  min-inline-size: 0;
}
.narrow { max-inline-size: 560px; margin-inline: auto; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .5rem 1rem; margin-block-end: 1rem; }
.page-head h1 { margin: 0; }
.head-state { display: flex; align-items: center; gap: .5rem; }
.crumbs { margin: 0 0 .25rem; font-size: .85rem; color: var(--muted); }
.row-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.stack { display: grid; gap: .85rem; }
.empty { color: var(--muted); padding: .75rem 0; margin: 0; }

.field { display: grid; gap: .3rem; min-inline-size: 0; }
.field label { font-weight: 600; font-size: .95rem; }
.hint { color: var(--muted); font-size: .85rem; margin: 0; }
.hint.reason { color: var(--warn-fg); background: var(--warn-bg); padding: .4rem .6rem; border-radius: 6px; }

input[type="email"], input[type="password"], input[type="text"], select, textarea {
  inline-size: 100%;
  max-inline-size: 100%;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .55rem .7rem;
  min-block-size: 44px;
}
textarea { resize: vertical; }
input[type="file"] { font: inherit; max-inline-size: 100%; inline-size: 100%; color: var(--text); }
input[type="checkbox"], input[type="radio"] { inline-size: 1.15rem; block-size: 1.15rem; accent-color: var(--primary); flex-shrink: 0; }
fieldset.choices { border: 1px solid var(--border); border-radius: 8px; padding: .5rem .75rem .75rem; margin: 0; display: grid; gap: .4rem; min-inline-size: 0; }
fieldset.choices legend { font-weight: 600; padding: 0 .25rem; }
.choice-inline { display: flex; align-items: center; gap: .5rem; cursor: pointer; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-block-size: 44px;
  padding: .5rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover:not(:disabled) { filter: brightness(.97); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }
.btn-danger { background: var(--bad-bg); border-color: transparent; color: var(--bad-fg); }
.btn-ghost { background: transparent; }
.btn-small { min-block-size: 36px; padding: .3rem .75rem; font-size: .9rem; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-pressed="true"] { background: var(--primary); color: var(--primary-text); border-color: var(--primary); }
.segmented { display: flex; flex-wrap: wrap; gap: .4rem; margin-block: .5rem; }

.badge { display: inline-block; padding: .1rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.tone-ok { background: var(--ok-bg); color: var(--ok-fg); }
.tone-warn { background: var(--warn-bg); color: var(--warn-fg); }
.tone-bad { background: var(--bad-bg); color: var(--bad-fg); }
.tone-info { background: var(--info-bg); color: var(--info-fg); }
.tone-neutral { background: var(--neutral-bg); color: var(--neutral-fg); }
.tag { display: inline-block; font-size: .75rem; padding: 0 .5rem; border-radius: 4px; background: var(--surface-2); color: var(--muted); }

.alert { border-radius: 8px; padding: .6rem .8rem; margin: 0 0 .5rem; }
.alert p:last-child, .alert ul:last-child { margin-block-end: 0; }
.alert-bad { background: var(--bad-bg); color: var(--bad-fg); }
.alert-ok { background: var(--ok-bg); color: var(--ok-fg); }
.alert-warn { background: var(--warn-bg); color: var(--warn-fg); }
.alert ul, .detail { margin: .25rem 0 0; padding-inline-start: 1.2rem; }
[hidden] { display: none !important; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem 1rem; margin: 0 0 1rem; }
.facts div { min-inline-size: 0; }
.facts dt { font-size: .8rem; color: var(--muted); }
.facts dd { margin: 0; font-weight: 600; }

.toast {
  position: fixed;
  inset-block-end: 1rem;
  inset-inline: 1rem;
  margin-inline: auto;
  max-inline-size: 420px;
  padding: .7rem 1rem;
  border-radius: var(--radius);
  background: var(--text);
  color: var(--bg);
  opacity: 0;
  transform: translateY(1rem);
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 20;
}
.toast.show { opacity: 1; transform: none; }
.toast.bad { background: var(--bad-fg); color: var(--surface); }

/* ---------------------------------------------------------------- login / accounts */
.auth-wrap { display: grid; place-items: center; min-block-size: 70vh; }
.auth-card { inline-size: 100%; max-inline-size: 420px; }
.choice-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.choice { inline-size: 100%; display: grid; gap: .2rem; text-align: start; padding: .8rem 1rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; cursor: pointer; }
.choice-title { font-weight: 600; }

/* ---------------------------------------------------------------- jobs */
.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .5rem; margin-block-end: .75rem; }
.toolbar .field { min-inline-size: 200px; }
.job-list, .version-list, .queue-list, .issue-list, .variant-list, .history, .downloads { list-style: none; margin: 0; padding: 0; }
.job-item { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem 0; border-block-end: 1px solid var(--border); }
.job-item:last-child { border-block-end: 0; }
.job-link { display: grid; gap: .15rem; text-decoration: none; color: var(--text); min-inline-size: 0; flex: 1; }
.job-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.job-meta { color: var(--muted); font-size: .8rem; }

/* ---------------------------------------------------------------- job page */
.job-grid { display: grid; gap: 0 1rem; grid-template-columns: minmax(0, 1fr); }
.player { background: #000; border-radius: 8px; overflow: hidden; display: flex; justify-content: center; margin-block-end: .5rem; }
.player video { display: block; inline-size: 100%; max-block-size: 70vh; aspect-ratio: 9 / 16; object-fit: contain; background: #000; }
.player-frame { position: relative; aspect-ratio: 9 / 16; inline-size: min(100%, calc(70vh * 9 / 16)); }
.player-frame video { inline-size: 100%; block-size: 100%; max-block-size: none; }
.safe-zone-layer { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; pointer-events: none; }
.safe-zone-layer.hidden { display: none; }
.safe-zone-box { fill: rgba(255, 196, 0, .12); stroke: #ffc400; stroke-width: 6; stroke-dasharray: 18 10; }
.safe-zone-box.kind-face { stroke: #ff6b6b; fill: rgba(255, 107, 107, .12); }
.safe-zone-box.kind-hand { stroke: #4dabf7; fill: rgba(77, 171, 247, .12); }
.safe-zone-list { list-style: none; padding: 0; margin: .25rem 0; display: grid; gap: .3rem; }
.player-empty { display: grid; place-items: center; min-block-size: 180px; border: 1px dashed var(--border); border-radius: 8px; color: var(--muted); padding: 1rem; text-align: center; margin-block-end: .5rem; }
.downloads { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: .5rem; }
.version-item { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; padding: .55rem .6rem; border-radius: 8px; border: 1px solid transparent; }
.version-item.selected { border-color: var(--primary); background: var(--surface-2); }
.version-item > a { display: grid; text-decoration: none; color: var(--text); flex: 1; min-inline-size: 0; }
.version-title { font-weight: 600; }
.instruction { flex-basis: 100%; margin: 0; font-size: .9rem; color: var(--muted); }
.compare-form { display: grid; gap: .5rem; margin-block-start: .75rem; grid-template-columns: minmax(0, 1fr); align-items: end; }
.queue-item, .variant { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; padding: .5rem 0; border-block-end: 1px solid var(--border); }
.queue-item:last-child, .variant:last-child { border-block-end: 0; }
.variant .links { display: flex; flex-wrap: wrap; gap: .4rem; margin-inline-start: auto; }
.issue { padding: .7rem 0; border-block-end: 1px solid var(--border); }
.issue:last-child { border-block-end: 0; }
.issue-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.queue-entry .issue-head { flex-wrap: wrap; align-items: center; }
.queue-entry .issue-head > a { flex: 1 0 100%; }
.issue-reason { margin: 0; font-weight: 600; }
details.decide, details.history-box { margin-block-start: .5rem; }
details > summary { cursor: pointer; color: var(--primary); font-weight: 600; min-block-size: 44px; display: flex; align-items: center; }
.issue-form { padding: .75rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.history li { padding: .5rem 0; border-block-end: 1px solid var(--border); }
.note { white-space: pre-wrap; }

/* ---------------------------------------------------------------- compare / admin */
.compare-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.compare-pane h2 { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.compare-page > .compare-form { margin-block-end: 1rem; }
.table-wrap { overflow-x: auto; max-inline-size: 100%; }
table { border-collapse: collapse; inline-size: 100%; }
caption { text-align: start; font-weight: 600; padding-block-end: .5rem; }
th, td { text-align: start; padding: .5rem; border-block-end: 1px solid var(--border); vertical-align: top; }
thead th { font-size: .85rem; color: var(--muted); }
.admin-grid { display: grid; gap: 0 1rem; grid-template-columns: minmax(0, 1fr); }
.progress-box progress { inline-size: 100%; block-size: 1rem; accent-color: var(--primary); }

/* ---------------------------------------------------------------- golden set */
.golden-grid { display: grid; gap: 0 1rem; grid-template-columns: minmax(0, 1fr); }
.meter { margin-block: .5rem .75rem; }
.meter-label { margin: 0 0 .25rem; font-weight: 600; }
.meter progress { inline-size: 100%; block-size: 1.1rem; accent-color: var(--primary); }
.outcome-list, .golden-records { list-style: none; margin: 0; padding: 0; }
.outcome-list li { display: flex; justify-content: space-between; gap: .5rem; padding: .45rem 0; border-block-end: 1px solid var(--border); }
.outcome-list li:last-child { border-block-end: 0; }
.golden-records li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; padding: .5rem 0; border-block-end: 1px solid var(--border); min-inline-size: 0; }
.golden-records li:last-child { border-block-end: 0; }
.golden-records .note { flex-basis: 100%; margin: 0; }
#golden-measurements td, #golden-measurements th { overflow-wrap: normal; }
input[type="number"] { inline-size: 100%; max-inline-size: 100%; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: .55rem .7rem; min-block-size: 44px; }

@media (min-width: 720px) {
  main { padding: 1.5rem; }
  .compare-form { grid-template-columns: 1fr 1fr auto; }
  .admin-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
@media (min-width: 960px) {
  .job-grid, .golden-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .player video { max-block-size: 75vh; }
}
@media (max-width: 420px) {
  .compare-grid { gap: .5rem; }
  .compare-pane { padding: .6rem; }
  .tools .user { display: none; }
  th, td { padding: .4rem .3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
}