/* Studio — Speak-Arabi content dashboard
   Plain CSS, no build step, no framework. Edit this file directly.

   Everything is a custom property. Never hard-code a colour in a component:
   the dark theme works by redefining tokens and nothing else. */

:root {
  /* ---- surfaces and text ---- */
  --bg:          #f4f5f7;
  --surface:     #ffffff;
  --surface-2:   #fafbfc;
  --border:      #e3e6ea;
  --border-firm: #c9cfd6;
  --text:        #14171a;
  --text-soft:   #59616b;
  --text-faint:  #858d97;

  /* ---- the one accent, pulled from the video templates so the dashboard
         and the content that comes out of it look related ---- */
  --accent:      #17663a;
  --accent-dark: #0b3d22;
  --accent-soft: #e8f2ec;
  --accent-ring: rgba(23, 102, 58, .28);

  /* ---- status palette: the most important decision in the redesign ----
         Amber means "needs Ali" and nothing else is ever amber. */
  --st-idle:       #6b7280;   --st-idle-soft:    #f0f1f3;
  --st-working:    #1f6feb;   --st-working-soft: #e9f1fe;
  --st-needs-you:  #9a5b00;   --st-needs-you-soft:#fdf1dd;
  --st-done:       #12794a;   --st-done-soft:    #e6f5ee;
  --st-queued:     #12794a;   --st-queued-soft:  transparent;
  --st-finished:   #5b7d6c;   --st-finished-soft:#eef3f0;
  --st-broken:     #b42318;   --st-broken-soft:  #fdecea;

  /* Older component rules still refer to these names. Kept as aliases so a
     token change lands everywhere at once. */
  --good:        var(--st-done);      --good-soft: var(--st-done-soft);
  --bad:         var(--st-broken);    --bad-soft:  var(--st-broken-soft);
  --warn:        var(--st-needs-you); --warn-soft: var(--st-needs-you-soft);

  /* ---- type: system stack, no web font, no extra request ---- */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Arabic reads smaller than Latin at the same point size, so it gets its
     own stack and a size bump wherever it appears. */
  --font-ar: "Noto Naskh Arabic", "Geeza Pro", "Segoe UI", Tahoma, sans-serif;

  --t-12: .75rem;   --t-14: .875rem;  --t-16: 1rem;
  --t-20: 1.25rem;  --t-24: 1.5rem;   --t-32: 2rem;

  /* ---- 8px spacing grid. Nothing off-grid. ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-6: 24px; --s-8: 32px; --s-12: 48px;

  --radius:      10px;
  --radius-sm:   7px;
  --radius-pill: 999px;
  --shadow:    0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --shadow-md: 0 2px 4px rgba(16, 24, 40, .05), 0 4px 12px rgba(16, 24, 40, .08);
}

/* Dark theme redefines tokens only — no component rule knows it exists. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #14171a;
    --surface:     #1c2024;
    --surface-2:   #22272c;
    --border:      #2e343a;
    --border-firm: #444c54;
    --text:        #eef1f4;
    --text-soft:   #a8b1bb;
    --text-faint:  #7d868f;

    --accent:      #3f9e6c;
    --accent-dark: #58b884;
    --accent-soft: #16281f;
    --accent-ring: rgba(63, 158, 108, .35);

    --st-idle:       #9aa3ad;   --st-idle-soft:     #24292e;
    --st-working:    #6aa6ff;   --st-working-soft:  #16233a;
    --st-needs-you:  #e8b04b;   --st-needs-you-soft: #332810;
    --st-done:       #4cbb87;   --st-done-soft:     #14291f;
    --st-queued:     #4cbb87;   --st-queued-soft:   transparent;
    --st-finished:   #86a596;   --st-finished-soft: #1b2420;
    --st-broken:     #ff8a80;   --st-broken-soft:   #2e1a19;

    --shadow:    0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, .5);
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 var(--font);
}

a { color: var(--accent); }
a:hover { color: var(--accent-dark); }

h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 .35rem; letter-spacing: -.01em; }
h2 { font-size: 1.1rem; line-height: 1.3; margin: 0 0 .75rem; letter-spacing: -.005em; }

.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;
}

/* ---------------------------------------------------------------- topbar */

/* One row: brand, account, nav, user. The old two-row header had the switcher,
   a Switch button, the nav, the name and Sign out all competing at the same
   weight. */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-2) var(--s-4);
  min-height: 56px;
}

.brand { display: flex; align-items: center; gap: var(--s-2); text-decoration: none; flex: none; }
.brand-mark {
  width: 26px; height: 26px; border-radius: var(--radius-sm);
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: var(--t-14);
}
.brand-name { color: var(--text); font-weight: 600; font-size: var(--t-16); letter-spacing: -.01em; }

/* The switcher submits on change; the button is the no-JS path and is hidden
   once the script has taken over. */
.account-switcher { display: flex; align-items: center; gap: var(--s-2); flex: none; }
.account-switcher .select {
  font-size: var(--t-14); padding: var(--s-1) var(--s-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text); max-width: 190px;
}

.nav { display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; min-width: 0; }
.nav a {
  font-size: var(--t-14); color: var(--text-soft); text-decoration: none;
  padding: var(--s-1) var(--s-2); border-radius: var(--radius-sm);
  white-space: nowrap;
}
.nav a:hover { background: var(--surface-2); color: var(--text); }
.nav a.is-active { background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; }
.nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.topbar-user { margin-inline-start: auto; display: flex; align-items: center; gap: var(--s-2); flex: none; }
.user-name { font-size: var(--t-14); color: var(--text-soft); }

@media (max-width: 900px) {
  .topbar-inner { flex-wrap: wrap; gap: var(--s-2); }
  .nav { order: 3; width: 100%; overflow-x: auto; padding-bottom: var(--s-1); }
  .topbar-user { margin-inline-start: auto; }
  .user-name { display: none; }
}

/* ------------------------------------------------------------------ page */

.page { max-width: 1180px; margin: 0 auto; padding: var(--s-6) var(--s-4) var(--s-12); }

/* A visible focus ring on everything interactive, not just links. */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px;
}

/* ----------------------------------------------------------------- cards */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem;
}

.card + .card { margin-top: 1rem; }
.card-title { font-size: 1.02rem; font-weight: 600; margin: 0 0 .9rem; }

.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.stat { display: flex; flex-direction: column; gap: .2rem; }
.stat-value { font-size: 1.7rem; font-weight: 650; letter-spacing: -.02em; }
.stat-label { font-size: .82rem; color: var(--text-soft); text-transform: uppercase; letter-spacing: .04em; }

.muted { color: var(--text-soft); }
.faint { color: var(--text-faint); }
.small { font-size: .87rem; }
.mono  { font-family: var(--mono); font-size: .86rem; }

/* ----------------------------------------------------------------- forms */

.field { margin-bottom: 1rem; }
.field label { display: block; font-size: .87rem; font-weight: 550; margin-bottom: .3rem; }
.field .hint { display: block; font-size: .82rem; color: var(--text-soft); margin-top: .3rem; }

.input, .select, textarea.input {
  width: 100%;
  padding: .55rem .7rem;
  border: 1px solid var(--border-firm);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.input:focus, .select:focus, .btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.select { width: auto; min-width: 11rem; padding-right: 1.6rem; }

.checks { display: grid; gap: .4rem; }
.check { display: flex; align-items: center; gap: .5rem; font-size: .92rem; }
.check input { width: 16px; height: 16px; margin: 0; }

.form-actions {
  display: flex; gap: .6rem; align-items: center; flex-wrap: wrap;
  margin-top: 1.25rem; padding-top: 1.1rem;
  border-top: 1px solid var(--border);
}

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .5rem .9rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font: inherit; font-size: .9rem; font-weight: 550;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { background: var(--accent-dark); color: #fff; }

.btn-quiet {
  background: var(--surface);
  color: var(--text-soft);
  border-color: var(--border-firm);
}
.btn-quiet:hover { background: var(--bg); color: var(--text); }

.btn-danger { background: var(--surface); color: var(--bad); border-color: #f0c2bd; }
.btn-danger:hover { background: var(--bad-soft); color: var(--bad); }

.btn-block { width: 100%; }
.btn-sm { padding: .32rem .6rem; font-size: .84rem; }

/* --------------------------------------------------------------- tables */

.table-wrap { overflow-x: auto; }

table.table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}

.table th, .table td {
  text-align: left;
  padding: .65rem .75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.table th {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-soft);
  font-weight: 600;
  white-space: nowrap;
}

.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: #fafbfc; }
.table .row-off td { opacity: .55; }

/* ---------------------------------------------------------------- pills */

.pill {
  display: inline-block;
  padding: .12rem .5rem;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  border: 1px solid transparent;
}

.pill-owner  { background: var(--accent-soft); color: var(--accent-dark); border-color: #cfe0fb; }
.pill-editor { background: var(--bg); color: var(--text-soft); border-color: var(--border-firm); }
.pill-on     { background: var(--good-soft); color: var(--good); border-color: #bfe3d1; }
.pill-off    { background: var(--bad-soft); color: var(--bad); border-color: #f3cbc6; }
.pill-warn   { background: var(--warn-soft); color: var(--warn); border-color: #f0dcb4; }

.tag {
  display: inline-block;
  padding: .1rem .45rem;
  margin: 0 .25rem .25rem 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .8rem;
  color: var(--text-soft);
}

/* --------------------------------------------------------------- flashes */

.flashes { margin-bottom: 1.25rem; display: grid; gap: .5rem; }

.flash {
  padding: .7rem .9rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: .92rem;
}

.flash-success { background: var(--good-soft); color: var(--good); border-color: #bfe3d1; }
.flash-error   { background: var(--bad-soft);  color: var(--bad);  border-color: #f3cbc6; }
.flash-warn    { background: var(--warn-soft); color: var(--warn); border-color: #f0dcb4; }

/* ----------------------------------------------------------------- login */

.auth-body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 1.5rem;
}

.auth-card {
  width: 100%;
  max-width: 22.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.75rem;
}

.auth-head { text-align: center; margin-bottom: 1.4rem; }
.auth-head .brand-mark { width: 34px; height: 34px; font-size: 1rem; margin: 0 auto .7rem; }
.auth-head h1 { font-size: 1.2rem; margin-bottom: .15rem; }
.auth-head p { margin: 0; color: var(--text-soft); font-size: .9rem; }

/* ------------------------------------------------------------ empty state */

.empty {
  text-align: center;
  padding: 2.5rem 1.25rem;
  color: var(--text-soft);
}
.empty h2 { color: var(--text); }
.empty p { max-width: 30rem; margin: 0 auto .5rem; }

/* --------------------------------------------------------------- utility */

.stack > * + * { margin-top: 1rem; }
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.row-between { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

@media (max-width: 640px) {
  .topbar-inner { gap: .6rem; }
  .nav { margin-left: 0; order: 3; width: 100%; }
  .topbar-user { border-left: 0; padding-left: 0; margin-left: auto; }
  .page { padding: 1.25rem 1rem 2.5rem; }
}

/* ------------------------------------------------------------------- chat */
/* Rebuilt to docs/mockups/screens.html (#chat), which Ali approved.
   The change that matters: drafts render inside the reply that created them,
   each with its own live chip — not in a separate box at the bottom. */

.chat {
  display: grid; grid-template-columns: 260px 1fr; gap: var(--s-4);
  height: calc(100vh - 210px); min-height: 520px;
}

.threads { padding: var(--s-3); overflow-y: auto; }
.threads .new { margin-bottom: var(--s-2); }
.btn.wide { display: block; width: 100%; text-align: center; text-decoration: none; }
.th {
  display: block; padding: var(--s-2) var(--s-3); border-radius: var(--radius-sm);
  text-decoration: none; color: inherit; margin-bottom: 2px;
}
.th:hover { background: var(--surface-2); }
.th.on { background: var(--accent-soft); }
.th .t {
  font-size: var(--t-14); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.th .m { font-size: var(--t-12); color: var(--text-faint); margin-top: 2px; }
.th.on .t { color: var(--accent-dark); }

.conv { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.msgs {
  flex: 1; overflow-y: auto; padding: var(--s-4) var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-4);
}
.msg { max-width: 78%; }
.msg.me { align-self: flex-end; }
.msg .b {
  padding: var(--s-3) var(--s-4); border-radius: 14px;
  font-size: var(--t-14); line-height: 1.55; white-space: pre-wrap;
}
.msg.me .b { background: var(--accent); color: #fff; border-bottom-right-radius: 5px; }
.msg.ai .b { background: var(--surface-2); border: 1px solid var(--border); border-bottom-left-radius: 5px; }
.msg .ts { font-size: var(--t-12); color: var(--text-faint); margin-top: 5px; }
.msg.me .ts { text-align: end; }

/* ---- drafts, inside the turn that made them ---- */
.drafts { margin-top: var(--s-3); display: grid; gap: var(--s-2); }
.dr {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface);
  text-decoration: none; color: inherit;
}
.dr:hover { border-color: var(--accent); background: var(--accent-soft); }
.dr .th2 {
  width: 32px; height: 44px; border-radius: 5px; flex: 0 0 auto;
  background: linear-gradient(160deg, #f4efe3, #e9e2d2);
  display: grid; place-items: center; overflow: hidden;
  font-family: var(--font-ar), var(--font);
  font-size: var(--t-12); color: #2d4a3e; text-align: center;
}
.dr .n { flex: 1; min-width: 0; }
.dr .n b {
  display: block; font-size: var(--t-14); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dr .n span { font-size: var(--t-12); color: var(--text-faint); }

/* ---- "working on it", inline in the conversation ---- */
.working { display: flex; align-items: center; gap: var(--s-2); }
.dots { display: inline-flex; gap: 3px; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-faint); animation: bl 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .2s; }
.dots i:nth-child(3) { animation-delay: .4s; }
@keyframes bl { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dots i { animation: none; opacity: .6; } }

.chat-empty { margin: auto; text-align: center; max-width: 420px; }
.chat-empty h2 { font-size: var(--t-20); margin: 0 0 var(--s-2); }

/* ---- composer, stuck to the bottom of the conversation ---- */
.composer { border-top: 1px solid var(--border); padding: var(--s-3) var(--s-4); background: var(--surface); }
.cbox { display: flex; gap: var(--s-2); align-items: flex-end; }
.cbox textarea {
  flex: 1; border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--s-3); background: var(--surface); color: var(--text);
  font: inherit; font-size: var(--t-14); resize: none;
  min-height: 46px; max-height: 140px;
}
.cbox textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.composer .hint { display: block; margin-top: 6px; font-size: var(--t-12); color: var(--text-faint); }

.hints { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--s-2); }
.hint-chip {
  font-size: var(--t-12); padding: 5px var(--s-2); border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-soft); cursor: pointer; font-family: inherit;
}
.hint-chip:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 900px) {
  .chat { grid-template-columns: 1fr; height: auto; }
  .threads { max-height: 220px; }
  .msgs { max-height: 60vh; }
  .msg { max-width: 92%; }
}

/* -------------------------------------------------------------- this week */
/* Rebuilt to docs/mockups/this-week.html, which Ali approved.
   Four principles, and they apply to every screen from here:
     lead with the job, not the data · human words, never system words ·
     only actionable things are visible · the week grid answers
     "do I need to generate more?" */

.head { display: flex; align-items: flex-end; gap: var(--s-4); padding: var(--s-6) 0 var(--s-1); }
.head h1 { font-size: var(--t-24); letter-spacing: -.02em; margin: 0; }
.head .range { color: var(--text-faint); font-size: var(--t-14); padding-bottom: 2px; }
.head .spacer { flex: 1; }
.wknav { display: flex; gap: var(--s-1); }
.icobtn {
  min-width: 32px; height: 32px; padding: 0 var(--s-2);
  border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--radius-sm); color: var(--text-soft);
  display: inline-grid; place-items: center; text-decoration: none;
  font-size: var(--t-14); line-height: 1;
}
.icobtn:hover { background: var(--surface-2); color: var(--text); }

/* The headline. It states the job and how long it takes, because that is the
   question Ali actually opens this screen with. */
.callout {
  margin: var(--s-4) 0 var(--s-6);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--s-4) var(--s-6);
  box-shadow: var(--shadow);
  display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
}
.callout .big { font-size: var(--t-20); font-weight: 650; letter-spacing: -.01em; }
.callout .sub { color: var(--text-soft); font-size: var(--t-14); margin-top: 3px; }
.callout .spacer { flex: 1; }

.sec { margin-bottom: var(--s-6); }
.sec-head { display: flex; align-items: center; gap: var(--s-2); margin: 0 2px var(--s-2); }
.sec-head h2 {
  font-size: var(--t-12); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-soft); margin: 0;
}
.sec-head .n { font-size: var(--t-12); color: var(--text-faint); }
.sec-head .spacer { flex: 1; }

/* ---- a post row ---- */
.rows {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.row {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border);
}
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--surface-2); }
/* The amber edge is the only thing on the screen that says "act now". */
.row.needs { border-inline-start: 3px solid var(--st-needs-you); padding-inline-start: 13px; }

.thumb {
  width: 52px; height: 74px; border-radius: var(--radius-sm); flex: 0 0 auto;
  position: relative; overflow: hidden; border: 1px solid var(--border);
  background: linear-gradient(160deg, #f4efe3, #e9e2d2);
}
.thumb video, .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* No render yet: show the phrase rather than an empty box. */
.thumb .ar {
  position: absolute; inset: 0; display: grid; place-items: center;
  padding: 2px; text-align: center;
  font-family: var(--font-ar), var(--font);
  font-size: var(--t-14); line-height: 1.35; color: #2d4a3e; font-weight: 600;
}
.thumb.empty {
  background: var(--surface-2); display: grid; place-items: center;
  color: var(--text-faint); font-size: var(--t-12);
}

.meta { flex: 1; min-width: 0; }
.meta .l1 { display: flex; align-items: center; gap: var(--s-2); }
.badge {
  font-size: var(--t-12); color: var(--text-soft);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 1px var(--s-2);
}
.meta h3 {
  font-size: var(--t-16); font-weight: 600; margin: var(--s-1) 0 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cap {
  font-size: var(--t-14); color: var(--text-soft); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.clips { display: flex; align-items: center; gap: 7px; font-size: var(--t-12); color: var(--text-faint); margin-top: 6px; }
.track { width: 64px; height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; flex: none; }
.fill { display: block; height: 100%; background: var(--st-working); }
.fill.done { background: var(--st-done); }

.when { text-align: end; flex: 0 0 auto; min-width: 74px; }
.when .t { font-size: var(--t-16); font-weight: 650; font-variant-numeric: tabular-nums; }
.when .d { font-size: var(--t-12); color: var(--text-faint); margin-top: 1px; }
.when .none { font-size: var(--t-14); font-weight: 600; color: var(--st-needs-you); }
.state { flex: 0 0 auto; }

/* ---- status chip: human words only. Never a status name. ---- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-12); font-weight: 600; white-space: nowrap;
  padding: 5px var(--s-2); border-radius: var(--radius-pill);
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.c-need { background: var(--st-needs-you-soft); color: var(--st-needs-you); }
.c-work { background: var(--st-working-soft);   color: var(--st-working); }
.c-ok   { background: var(--st-done-soft);      color: var(--st-done); }
.c-bad  { background: var(--st-broken-soft);    color: var(--st-broken); }
.c-idle { background: var(--st-idle-soft);      color: var(--st-idle); }

.act { flex: 0 0 auto; display: flex; gap: 6px; align-items: center; }
.more {
  width: 30px; height: 30px; border: 1px solid var(--border);
  background: var(--surface); border-radius: var(--radius-sm);
  color: var(--text-faint); display: inline-grid; place-items: center;
  text-decoration: none; font-size: var(--t-14); line-height: 1;
}
.more:hover { background: var(--surface-2); color: var(--text); }

/* ---- the week grid: 5 slots by 7 days ----
   This is how Ali answers "do I need to generate more?" without counting. */
.sched {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--s-4); box-shadow: var(--shadow);
}
.gridwrap { overflow-x: auto; }
table.g { border-collapse: separate; border-spacing: 5px; width: 100%; min-width: 620px; }
table.g th { font-size: var(--t-12); font-weight: 600; color: var(--text-faint); padding-bottom: 2px; text-align: center; }
table.g th.slot, table.g td.slot {
  text-align: end; font-size: var(--t-12); color: var(--text-faint);
  font-variant-numeric: tabular-nums; width: 52px; font-weight: 600;
}
.cell {
  height: 44px; border-radius: var(--radius-sm); border: 1px dashed var(--border);
  display: grid; place-items: center; padding: 0 4px; text-align: center;
  font-size: var(--t-12); color: var(--text-faint); text-decoration: none;
  overflow: hidden;
}
.cell:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.cell.has {
  border: 1px solid transparent; background: var(--st-done-soft);
  color: var(--st-done); font-weight: 600;
}
.cell.has:hover { background: var(--st-done-soft); border-color: var(--st-done); }
.cell.pub { background: var(--st-finished-soft); color: var(--st-finished); border: 1px solid transparent; }
.cell.pub:hover { background: var(--st-finished-soft); border-color: var(--st-finished); }
.cell.need {
  background: var(--st-needs-you-soft); color: var(--st-needs-you);
  border: 1px solid var(--st-needs-you); font-weight: 600;
}
.cell.need:hover { background: var(--st-needs-you-soft); }

.legend { display: flex; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-3); font-size: var(--t-12); color: var(--text-soft); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.sq { width: 11px; height: 11px; border-radius: 3px; display: inline-block; flex: none; }
.sq-has   { background: var(--st-done-soft);      border: 1px solid var(--st-done); }
.sq-need  { background: var(--st-needs-you-soft); border: 1px solid var(--st-needs-you); }
.sq-pub   { background: var(--st-finished-soft);  border: 1px solid var(--border-firm); }
.sq-empty { border: 1px dashed var(--border-firm); }

/* ---- folded groups: nothing actionable, so nothing on screen ---- */
.fold {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.fold summary {
  list-style: none; cursor: pointer; padding: var(--s-3) var(--s-4);
  display: flex; align-items: center; gap: var(--s-3);
}
.fold summary::-webkit-details-marker { display: none; }
.fold summary .caret { color: var(--text-faint); font-size: var(--t-12); transition: transform .15s; }
.fold[open] summary .caret { transform: rotate(90deg); }
.fold summary strong { font-size: var(--t-16); font-weight: 600; }
.fold summary .spacer { flex: 1; }
.fold summary .n { font-size: var(--t-12); color: var(--text-faint); }
.fold .body { border-top: 1px solid var(--border); }
@media (prefers-reduced-motion: reduce) { .fold summary .caret { transition: none; } }

/* Buttons used by this screen, matching the mockup's weights. */
.btn.sm { padding: 6px 11px; font-size: var(--t-14); }
.btn.ghost { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn.ghost:hover { background: var(--surface-2); }

@media (max-width: 760px) {
  .row { flex-wrap: wrap; gap: var(--s-3); }
  .meta { flex-basis: 100%; order: 3; }
  .act { margin-inline-start: auto; }
  .callout { align-items: flex-start; }
  .callout .spacer { display: none; }
}

/* ------------------------------------------------------------- post detail */
/* Rebuilt to docs/mockups/screens.html (#post), which Ali approved. */

.crumb { font-size: var(--t-14); color: var(--text-faint); padding-top: var(--s-6); }
.crumb a { color: var(--text-soft); text-decoration: none; }
.crumb a:hover { color: var(--text); }

.phead { display: flex; align-items: flex-start; gap: var(--s-4); padding: var(--s-2) 0 var(--s-6); }
.phead h1 { font-size: var(--t-24); letter-spacing: -.018em; margin: 0; }
.phead .meta { display: flex; gap: var(--s-2); align-items: center; margin-top: var(--s-2); flex-wrap: wrap; }
.phead .spacer { flex: 1; }
.phead-when { font-size: var(--t-14); color: var(--text-faint); }

/* "Change time" opens in place. <details> rather than JS, so it works with
   scripting off like everything else here. */
.timepop { position: relative; }
.timepop > summary { list-style: none; cursor: pointer; }
.timepop > summary::-webkit-details-marker { display: none; }
.timepop-body {
  position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 5;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  padding: var(--s-3); display: flex; gap: var(--s-2); align-items: center;
  flex-wrap: wrap; min-width: 300px;
}
.timepop-body .hint { flex-basis: 100%; margin: 0; }

/* ---- the pair that publishes ---- */
.final {
  display: grid; grid-template-columns: 250px 1fr; gap: var(--s-6);
  padding: var(--s-4); margin-bottom: var(--s-6);
}
.player {
  aspect-ratio: 9 / 16; border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(160deg, #f4efe3, #e9e2d2);
  border: 1px solid var(--border);
  display: grid; place-items: center; position: relative;
}
.player video, .player img { width: 100%; height: 100%; object-fit: cover; display: block; }
.player-none { font-size: var(--t-12); color: var(--text-soft); text-align: center; padding: var(--s-3); }
.player-cap { font-size: var(--t-12); color: var(--text-faint); margin-top: var(--s-2); text-align: center; }

.capbox { display: flex; flex-direction: column; }
.capbox label {
  font-size: var(--t-12); font-weight: 600; color: var(--text-soft);
  margin-bottom: 6px; display: flex; align-items: center; gap: var(--s-2);
}
.capbox label .spacer { flex: 1; }
.capbox textarea {
  flex: 1; border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--s-3) var(--s-3); background: var(--surface); color: var(--text);
  font: inherit; font-size: var(--t-14); line-height: 1.65;
  resize: vertical; min-height: 190px;
  font-family: var(--font-ar), var(--font);
}
.capbox textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.caprow { display: flex; gap: var(--s-2); margin-top: var(--s-2); align-items: center; flex-wrap: wrap; }
.caprow .spacer { flex: 1; }
.capmeta { font-size: var(--t-12); color: var(--text-faint); }

/* ---- clips ---- */
.clipgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); }
.clip { padding: 0; overflow: hidden; }
.clip .v {
  aspect-ratio: 9 / 16; position: relative; display: grid; place-items: center;
  background: linear-gradient(160deg, #f4efe3, #e9e2d2);
  border-bottom: 1px solid var(--border);
}
.clip .v video, .clip .v img { width: 100%; height: 100%; object-fit: cover; display: block; }
.clip .v .no {
  position: absolute; top: var(--s-2); inset-inline-start: var(--s-2); z-index: 2;
  font-size: var(--t-12); font-weight: 700; background: rgba(0, 0, 0, .55);
  color: #fff; padding: 2px 7px; border-radius: 5px;
}
.v-none { font-size: var(--t-12); color: var(--text-soft); text-align: center; padding: var(--s-3); display: grid; gap: 4px; }
.v-failed { color: var(--st-broken); }
.clip .txt { padding: var(--s-3); }
.clip .txt .a { font-size: var(--t-16); font-weight: 600; font-family: var(--font-ar), var(--font); line-height: 1.7; }
.clip .txt .tr { font-size: var(--t-12); color: var(--text-faint); margin-top: 3px; }
.clip .txt .en { font-size: var(--t-14); color: var(--text-soft); margin-top: 4px; }
.clip .acts { display: flex; gap: 6px; padding: 0 var(--s-3) var(--s-3); }
.clip .acts .grow { flex: 1; }
.btn.full { width: 100%; }

/* An approved clip settles back so progress is seen, not counted. */
.clip.done { opacity: .62; }
.clip.done .v::after {
  content: "✓"; position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center;
  font-size: 32px; font-weight: 700; color: var(--st-done);
  background: rgba(255, 255, 255, .55);
}

/* ---- the finish line, always in view ---- */
.sticky {
  position: sticky; bottom: 0; margin-top: var(--s-6); z-index: 6;
  padding: var(--s-3) var(--s-4); border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
}
.sticky .p { flex: 1; min-width: 200px; }
.sticky .p b { font-size: var(--t-14); }
.sticky .p .s { font-size: var(--t-14); color: var(--text-soft); margin-top: 2px; }
.prog { height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; margin-top: var(--s-2); max-width: 260px; }
.prog i { display: block; height: 100%; background: var(--st-done); }
.sticky .btn:disabled { opacity: .5; cursor: not-allowed; }

.sendbox { margin-top: var(--s-6); }
.sendbox > summary { cursor: pointer; font-size: var(--t-14); font-weight: 600; color: var(--text-soft); }
.sendbox pre { white-space: pre-wrap; overflow-x: auto; margin: var(--s-3) 0 0; }

@media (max-width: 900px) {
  .clipgrid { grid-template-columns: repeat(2, 1fr); }
  .final { grid-template-columns: 1fr; }
  .player { max-width: 260px; margin: 0 auto; }
}