/* studio-ds — the David.AI Studio design language, extracted from the live pages
   (board.html · clients.html · review.html on studio.genidea-video.app).
   Dark navy world, blue→pink gradient identity, mono for numbers/labels. */

:root {
  /* backgrounds */
  --sds-bg: #070d1c;
  --sds-bg2: #0a1428;
  --sds-surface: #101b31;
  --sds-surface2: #0c1526;
  --sds-panel: #0e1f3d;
  --sds-panel2: #0c1830;

  /* text */
  --sds-ink: #eaf1fb;
  --sds-muted: #93a5c2;
  --sds-dim: #9fb2cc;
  --sds-faint: #6f86a6;

  /* lines */
  --sds-line: rgba(150, 180, 230, .14);
  --sds-line2: rgba(150, 180, 230, .24);

  /* brand + status */
  --sds-blue: #2f8bff;
  --sds-blue-bg: rgba(47, 139, 255, .12);
  --sds-pink: #ff5cc8;
  --sds-pink-bg: rgba(255, 92, 200, .12);
  --sds-mint: #5fe0a3;
  --sds-ok-bg: rgba(95, 224, 163, .10);
  --sds-warn: #f0b64d;
  --sds-warn-bg: rgba(240, 182, 77, .10);
  --sds-err: #ff8a8a;
  --sds-hold: #93a5c2;
  --sds-hold-bg: rgba(147, 165, 194, .10);

  /* the identity gradient */
  --sds-grad: linear-gradient(135deg, var(--sds-blue), var(--sds-pink));

  /* type — Rubik FIRST (Front 2026-07-16). It sat 4th, behind -apple-system, so on any Mac the system
     font always won and the design's own family NEVER RENDERED — every surface loaded the Rubik file on
     every visit and then didn't use it. The handoff design (63e44369) was built in Rubik and approved in
     Rubik; this makes the token deliver what the design promised. Pages that don't load the font fall
     through to the same system stack as before, so nothing breaks where Rubik isn't served. */
  --sds-sans: Rubik, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --sds-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

/* ── StudioProvider — the studio backdrop every screen sits on ── */
.sds-provider {
  min-height: 100%;
  background:
    radial-gradient(1100px 560px at 85% -10%, rgba(47, 139, 255, .14), transparent 60%),
    radial-gradient(900px 480px at -8% 6%, rgba(255, 92, 200, .10), transparent 55%),
    linear-gradient(180deg, var(--sds-bg2), var(--sds-bg));
  color: var(--sds-ink);
  font: 15px/1.55 var(--sds-sans);
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  padding: 20px;
}
.sds-provider *, .sds-provider *::before, .sds-provider *::after { box-sizing: border-box; }

/* ── Card — the studio's unit of content; left stripe carries the tone ── */
.sds-card {
  position: relative;
  background: var(--sds-surface);
  border: 1px solid var(--sds-line);
  border-radius: 13px;
  padding: 13px 15px 12px 18px;
  overflow: hidden;
}
.sds-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--sds-stripe, transparent);
}
.sds-card--act { --sds-stripe: var(--sds-pink); }
.sds-card--live { --sds-stripe: var(--sds-blue); }
.sds-card--ok { --sds-stripe: var(--sds-mint); }
.sds-card--optional { --sds-stripe: var(--sds-warn); }
.sds-card--hold { --sds-stripe: var(--sds-hold); }
.sds-card-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.sds-card-title { font-weight: 650; font-size: 14.5px; color: var(--sds-ink); }
.sds-card-note { color: var(--sds-muted); font-size: 13.5px; margin-top: 5px; max-width: 80ch; }
.sds-card-note b, .sds-card-note strong { color: var(--sds-ink); }
.sds-card-note code {
  font-family: var(--sds-mono); font-size: 12px;
  background: var(--sds-surface2); border: 1px solid var(--sds-line);
  padding: 1px 5px; border-radius: 5px;
}
.sds-card-row { display: flex; gap: 12px; align-items: flex-start; }
.sds-card-thumb {
  width: 86px; height: 108px; border-radius: 9px; object-fit: cover;
  flex: 0 0 auto; border: 1px solid var(--sds-line); background: var(--sds-surface2);
}
.sds-card-body { flex: 1; min-width: 0; }
.sds-card-acts { display: flex; gap: 7px; margin-top: 9px; flex-wrap: wrap; align-items: center; }

/* ── Chip — mono status pill ── */
.sds-chip {
  font-family: var(--sds-mono);
  font-size: 10.5px; font-weight: 650;
  text-transform: uppercase; letter-spacing: .07em;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  display: inline-block;
}
.sds-chip--act { color: var(--sds-pink); background: var(--sds-pink-bg); }
.sds-chip--live { color: var(--sds-blue); background: var(--sds-blue-bg); }
.sds-chip--ok { color: var(--sds-mint); background: var(--sds-ok-bg); }
.sds-chip--optional { color: var(--sds-warn); background: var(--sds-warn-bg); }
.sds-chip--hold { color: var(--sds-hold); background: var(--sds-hold-bg); }
.sds-chip--who {
  color: var(--sds-muted); background: transparent;
  border: 1px solid var(--sds-line2); padding: 2.5px 8px; font-weight: 400;
  text-transform: none; letter-spacing: 0;
}

/* ── Button ── */
.sds-btn {
  appearance: none;
  border: 1px solid var(--sds-line2);
  background: var(--sds-surface2);
  color: var(--sds-ink);
  border-radius: 9px;
  padding: 6px 12px;
  font: 600 12.5px var(--sds-sans);
  cursor: pointer;
}
.sds-btn:hover { border-color: var(--sds-blue); }
.sds-btn:disabled { opacity: .5; cursor: default; }
.sds-btn--primary { background: var(--sds-grad); border: 0; color: #fff; }
.sds-btn--ghost { background: transparent; }
.sds-btn--mini { padding: 3px 9px; font-size: 11px; }

/* ── StatTile — the scoreboard number ── */
.sds-stat {
  background: var(--sds-surface);
  border: 1px solid var(--sds-line);
  border-radius: 13px;
  padding: 13px 15px;
  min-width: 120px;
}
.sds-stat-n {
  font-family: var(--sds-mono);
  font-size: 26px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--sds-ink);
}
.sds-stat--pink .sds-stat-n { color: var(--sds-pink); }
.sds-stat--blue .sds-stat-n { color: var(--sds-blue); }
.sds-stat--ok .sds-stat-n { color: var(--sds-mint); }
.sds-stat--hold .sds-stat-n { color: var(--sds-hold); }
.sds-stat-l { font-size: 12px; color: var(--sds-muted); margin-top: 6px; }

/* ── SectionHeader ── */
.sds-sechead {
  display: flex; align-items: baseline; gap: 10px;
  margin: 0 0 12px; padding-bottom: 9px;
  border-bottom: 1px solid var(--sds-line);
}
.sds-sechead h2 { font-size: 15.5px; margin: 0; color: var(--sds-ink); font-weight: 650; }
.sds-sechead-tag {
  font-family: var(--sds-mono); font-size: 11px; color: var(--sds-faint);
  text-transform: uppercase; letter-spacing: .11em;
}
.sds-sechead-count { margin-left: auto; font-family: var(--sds-mono); font-size: 12px; color: var(--sds-faint); }

/* ── StatusDot — live glow ── */
.sds-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.sds-dot--ok { background: var(--sds-mint); box-shadow: 0 0 0 3px rgba(95, 224, 163, .18); }
.sds-dot--warn { background: var(--sds-warn); box-shadow: 0 0 0 3px rgba(240, 182, 77, .18); }
.sds-dot--err { background: var(--sds-err); box-shadow: 0 0 0 3px rgba(255, 138, 138, .18); }

/* ── Input / Textarea ── */
.sds-field { display: flex; flex-direction: column; gap: 5px; }
.sds-field-label { font-size: 12px; color: var(--sds-muted); }
.sds-input, .sds-ta {
  background: var(--sds-panel2);
  border: 1px solid var(--sds-line);
  color: var(--sds-ink);
  border-radius: 11px;
  padding: 9px 12px;
  font: 13.5px var(--sds-sans);
  color-scheme: dark;
}
.sds-input:focus, .sds-ta:focus { outline: none; border-color: var(--sds-blue); }
.sds-ta { resize: vertical; }

/* ── Toast ── */
.sds-toast {
  display: inline-block;
  background: var(--sds-surface);
  border: 1px solid var(--sds-line2);
  color: var(--sds-ink);
  padding: 10px 18px;
  border-radius: 11px;
  font: 13.5px var(--sds-sans);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}

/* ── Fab — the ✦ floating agent button ── */
.sds-fab {
  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--sds-grad); color: #fff; font-size: 23px;
  display: grid; place-items: center;
  box-shadow: 0 10px 30px rgba(47, 139, 255, .4);
  transition: transform .15s;
}
.sds-fab:hover { transform: scale(1.06); }
.sds-fab:active { transform: scale(.97); }

/* ── Motion (Board v2 handoff, 2026-07-15) — the only animations the DS ships;
      keep every other motion in host apps subtle and finite. ── */
@keyframes sdsFeedIn {                       /* new feed/list line entering */
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}
@keyframes sdsPulse {                        /* live/status breathing */
  0%, 100% { opacity: .45; }
  50%      { opacity: 1; }
}
@keyframes sdsShimmer {                      /* indeterminate progress (QA lane) */
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}