/* Video Studio — shared components (used by index.html and design.html). Requires tokens.css. */

*, *::before, *::after { box-sizing: border-box; }

/* ---------- panel ---------- */
.panel {
  background: var(--surface);
  border: var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: var(--sp-4);
  min-width: 0;
}
.panel__head {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
}
.panel__title {
  font-size: var(--fs-lg); font-weight: var(--fw-bold); margin: 0; letter-spacing: .02em;
  display: flex; align-items: center; gap: var(--sp-2);
}
.panel__title::before {
  content: ""; width: 4px; height: 16px; border-radius: 2px; background: var(--orange-500);
}
.panel__sub { color: var(--ink-500); font-size: var(--fs-sm); }
.panel__tools { margin-left: auto; display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }

/* ---------- avatar ---------- */
.avatar {
  --c: var(--ink-400);
  --size: 36px;
  position: relative; flex: none;
  width: var(--size); height: var(--size); border-radius: 50%;
  display: inline-grid; place-items: center;
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c) 55%, white), var(--c));
  color: #fff; font-weight: var(--fw-bold);
  font-size: calc(var(--size) * .44);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px color-mix(in srgb, var(--c) 45%, transparent);
  font-family: var(--font-serif);
}
.avatar__clip { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
.avatar img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%;
  transform: scale(1.65); transform-origin: 50% 12%;
}
.avatar--photo { background: #fff; }
/* live avatar from the adventure party: already a finished picture, so no demo-photo zoom/crop */
.avatar--live img { object-fit: cover; object-position: 50% 50%; transform: none; }
.avatar--depleted img { filter: grayscale(.6) brightness(.95); }
.avatar__emoji {
  position: absolute; right: -4px; bottom: -4px;
  width: calc(var(--size) * .46); height: calc(var(--size) * .46);
  min-width: 14px; min-height: 14px;
  display: grid; place-items: center;
  font-size: calc(var(--size) * .28);
  background: var(--surface); border-radius: 50%;
  box-shadow: 0 0 0 1px var(--ink-100);
  font-family: var(--font-sans);
}
.avatar--xs { --size: 20px; box-shadow: 0 0 0 1.5px var(--surface); }
.avatar--xs .avatar__emoji { display: none; }
.avatar--sm { --size: 26px; }
.avatar--sm .avatar__emoji { display: none; }
.avatar--lg { --size: 52px; }
.avatar--xl { --size: 72px; }

.who { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.who__name { font-weight: var(--fw-bold); white-space: nowrap; }

/* ---------- engine badge ---------- */
.engine-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font: var(--fw-medium) var(--fs-xs)/1 var(--font-mono);
  padding: 3px 7px; border-radius: var(--r-pill);
  background: var(--ink-900); color: #fff; letter-spacing: .02em; white-space: nowrap;
}
.engine-badge::before { content: "⚙"; font-size: 10px; opacity: .7; }
.engine-badge--none { background: var(--ink-100); color: var(--ink-500); }
.engine-badge--none::before { content: none; }

/* ---------- role chips ---------- */
.chip-role {
  --c: var(--role-team);
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: 1;
  padding: 5px 9px; border-radius: var(--r-pill);
  color: var(--c);
  background: color-mix(in srgb, var(--c) 10%, white);
  border: 1px solid color-mix(in srgb, var(--c) 35%, white);
  white-space: nowrap;
}
.chip-role__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.chip-role__mode { font-size: 10px; opacity: .85; }
.chip-role--manual {
  background: var(--c); color: #fff; border-color: var(--c);
}
.chip-role--manual .chip-role__dot { background: #fff; }
.chip-fixed {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-sm); font-weight: var(--fw-bold); line-height: 1;
  padding: 5px 9px; border-radius: var(--r-sm);
  color: var(--gold-100); background: var(--role-edit);
  border: 1px dashed var(--gold-500);
  white-space: nowrap;
}
.chip-fixed__mode { color: var(--gold-500); font-size: 10px; font-weight: var(--fw-medium); }
.chip-light {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-sm); line-height: 1; padding: 5px 9px; border-radius: var(--r-pill);
  color: #9c3f58; background: #FCEBF0; border: 1px dashed #E98AA0; white-space: nowrap;
}

/* ---------- source tag ---------- */
.src-tag {
  --c: var(--ink-500);
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: 1;
  padding: 4px 7px; border-radius: var(--r-sm);
  color: var(--c); background: color-mix(in srgb, var(--c) 10%, white);
  white-space: nowrap;
}
.src-tag--memory { --c: var(--src-memory); }
.src-tag--trend { --c: var(--src-trend); }
.src-tag--aiscript { --c: var(--src-aiscript); }

/* ---------- status pill ---------- */
.status-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: 1;
  padding: 4px 8px; border-radius: var(--r-pill); white-space: nowrap;
  color: var(--st-pending); background: var(--st-pending-bg);
}
.status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-pill--active, .status-pill--packing { color: var(--orange-600); background: var(--st-active-bg); }
.status-pill--active::before, .status-pill--packing::before { animation: vs-pulse 1.2s ease-in-out infinite; }
.status-pill--done { color: var(--st-done); background: var(--st-done-bg); }
.status-pill--redo { color: var(--st-redo); background: var(--st-redo-bg); }
.status-pill--queued { color: var(--st-queued); background: var(--st-queued-bg); }
.status-pill--waiting { color: var(--orange-600); background: var(--orange-100); box-shadow: inset 0 0 0 1px var(--orange-300); }
@keyframes vs-pulse { 50% { opacity: .25; } }

/* ---------- progress ---------- */
.progress {
  --c: var(--orange-500);
  height: 6px; border-radius: var(--r-pill); background: var(--ink-100); overflow: hidden;
}
.progress > i {
  display: block; height: 100%; width: 0; border-radius: inherit;
  background: var(--c); transition: width .25s var(--ease);
}
.progress--done { --c: var(--st-done); }
.progress--redo { --c: var(--st-redo); }

/* ---------- buttons ---------- */
.btn {
  appearance: none; border: 1px solid var(--ink-200); background: var(--surface); color: var(--ink-800);
  font: var(--fw-medium) var(--fs-md)/1 var(--font-sans);
  height: 32px; padding: 0 12px; border-radius: var(--r-md);
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s, color .15s;
  white-space: nowrap;
}
.btn:hover { border-color: var(--ink-300); background: var(--surface-2); }
a.btn { text-decoration: none; }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-glow); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--primary { background: var(--orange-500); border-color: var(--orange-500); color: #fff; }
.btn--primary:hover { background: var(--orange-600); border-color: var(--orange-600); }
.btn--dark { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.btn--dark:hover { background: var(--ink-700); border-color: var(--ink-700); }
.btn--ghost { background: transparent; border-color: transparent; }
.btn--ghost:hover { background: var(--ink-100); }
.btn--sm { height: 26px; padding: 0 9px; font-size: var(--fs-sm); border-radius: var(--r-sm); }

.seg-ctrl { display: inline-flex; border: 1px solid var(--ink-200); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.seg-ctrl button {
  appearance: none; border: 0; background: transparent; color: var(--ink-700);
  font: var(--fw-medium) var(--fs-sm)/1 var(--font-mono); height: 30px; padding: 0 9px; cursor: pointer;
}
.seg-ctrl button + button { border-left: 1px solid var(--ink-100); }
.seg-ctrl button[aria-pressed="true"] { background: var(--ink-900); color: #fff; }

.select {
  appearance: none; height: 30px; border-radius: var(--r-sm); border: 1px solid var(--ink-200);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236B655E'/%3E%3C/svg%3E") no-repeat right 9px center;
  padding: 0 26px 0 9px; font: var(--fs-md) var(--font-sans); color: var(--ink-800); cursor: pointer;
}
.select:disabled { opacity: .55; cursor: not-allowed; }
.select:focus-visible { outline: none; box-shadow: var(--shadow-glow); }

.toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: var(--fs-md); user-select: none; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle__track { width: 32px; height: 18px; border-radius: 9px; background: var(--ink-200); position: relative; transition: background .15s; flex: none; }
.toggle__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-1); transition: transform .15s var(--ease); }
.toggle input:checked + .toggle__track { background: var(--orange-500); }
.toggle input:checked + .toggle__track::after { transform: translateX(14px); }
.toggle input:focus-visible + .toggle__track { box-shadow: var(--shadow-glow); }
.toggle input:disabled + .toggle__track { opacity: .5; }

/* ---------- stage node (header stepper / pipeline) ---------- */
.stage-node {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); color: var(--ink-400); white-space: nowrap;
}
.stage-node__dot {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font: var(--fw-bold) 10px/1 var(--font-mono);
  border: 1.5px solid currentColor; color: inherit; background: transparent;
}
.stage-node--active { color: var(--orange-500); font-weight: var(--fw-bold); }
.stage-node--active .stage-node__dot { background: var(--orange-500); color: #fff; border-color: var(--orange-500); box-shadow: 0 0 0 4px rgba(232, 118, 43, .22); }
.stage-node--done { color: var(--ink-300); }
.stage-node--done .stage-node__dot { background: var(--ink-300); border-color: var(--ink-300); color: var(--ink-900); }

/* task node (dependency graph) */
.task-node {
  --c: var(--role-team);
  position: absolute; width: 112px; min-height: 76px;
  border-radius: var(--r-md); background: var(--surface);
  border: 1px solid var(--ink-100); border-left: 4px solid var(--c);
  padding: 11px 8px 7px; box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; justify-content: space-between; gap: 4px; font-size: var(--fs-sm);
  transition: box-shadow .2s, border-color .2s, opacity .2s;
}
/* full title, wraps to at most two lines (titles are ≤ 8 chars) — never ellipsised */
.task-node__name { font-weight: var(--fw-bold); color: var(--ink-800); line-height: 1.3; word-break: break-all; }
.task-node__meta { display: flex; align-items: center; gap: 5px; color: var(--ink-700); font-size: var(--fs-sm); min-width: 0; }
.task-node__who { white-space: nowrap; font-weight: var(--fw-medium); }
/* status badge sits on the node's top edge, clear of the title and of the edges (which enter mid-left) */
.task-node__st { position: absolute; top: -9px; right: 6px; line-height: 0; }
.task-node__st .status-pill { box-shadow: 0 0 0 2px var(--surface); padding: 3px 7px; }
.task-node--pending { background: #FDFCFA; }
.task-node--pending .task-node__name, .task-node--pending .task-node__meta { opacity: .7; }
.task-node--active { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 45%, transparent), var(--shadow-2); }
.task-node--done { background: var(--surface-2); }
.task-node--fixed { border-left-style: dashed; border-left-color: var(--role-edit); }

/* ---------- swimlane bar ---------- */
.lane-bar {
  --c: var(--role-team);
  position: absolute; top: 5px; height: 22px; border-radius: 5px;
  background: color-mix(in srgb, var(--c) 82%, white); color: #fff;
  font-size: var(--fs-xs); line-height: 22px; padding: 0 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}
/* label rendered beside a bar that is too narrow for its own text */
.lane-label {
  position: absolute; top: 5px; height: 22px; line-height: 22px;
  font-size: var(--fs-xs); color: var(--ink-700); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; cursor: default;
}
.lane-bar--team { background: var(--ink-200); color: var(--ink-700); }
.lane-bar--fun { background: #F7C9D5; color: #8c2f48; }
.lane-bar--fixed { background: var(--role-edit); color: var(--gold-100); box-shadow: inset 0 0 0 1px var(--gold-500); }
.lane-bar--running { background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.18) 0 6px, transparent 6px 12px); background-size: 17px 17px; animation: vs-stripes 1s linear infinite; }
.lane-bar--redo { background: var(--st-redo); }
.lane-bar--segdone { background: color-mix(in srgb, var(--role-package) 75%, white); }
@keyframes vs-stripes { to { background-position: 17px 0; } }

/* ---------- topic card ---------- */
.topic-card {
  position: relative; border: 1px solid var(--ink-100); border-radius: var(--r-lg);
  background: var(--surface); padding: var(--sp-3) var(--sp-3) var(--sp-3);
  display: flex; flex-direction: column; gap: 8px; min-height: 150px;
  transition: box-shadow .25s var(--ease), border-color .25s, transform .25s var(--ease);
}
.topic-card__head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.topic-card__head .src-tag { margin-left: auto; }
.topic-card__title { font: var(--fw-bold) var(--fs-lg)/1.35 var(--font-serif); margin: 0; color: var(--ink-900); }
.topic-card__hook { font-size: var(--fs-md); color: var(--ink-500); line-height: 1.55; margin: 0; }
.topic-card__foot { margin-top: auto; display: flex; align-items: center; gap: 6px; min-height: 22px; }
.topic-card__votes { display: flex; }
.topic-card__votes .avatar + .avatar { margin-left: -5px; }
.topic-card__count { margin-left: auto; font: var(--fw-bold) var(--fs-sm) var(--font-mono); color: var(--ink-500); }
.topic-card--pending .topic-card__title,
.topic-card--pending .topic-card__hook { color: transparent; border-radius: 4px; background: linear-gradient(90deg, var(--ink-100), var(--surface-2), var(--ink-100)); background-size: 200% 100%; animation: vs-shimmer 1.4s linear infinite; }
.topic-card--pending .topic-card__title { width: 70%; }
@keyframes vs-shimmer { to { background-position: -200% 0; } }
.topic-card--winner { border-color: var(--orange-500); box-shadow: 0 0 0 2px rgba(232, 118, 43, .35), var(--shadow-2); }
.topic-card--loser { opacity: .62; }
.topic-card__ribbon {
  position: absolute; top: -9px; left: 12px;
  background: var(--orange-500); color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-bold);
  padding: 3px 8px; border-radius: var(--r-pill); box-shadow: var(--shadow-1);
}
.fav-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: 1;
  padding: 4px 8px; border-radius: var(--r-pill);
  color: #9c3f58; background: #FCEBF0; border: 1px solid #F3B8C7; white-space: nowrap;
}

/* ---------- vote tally ---------- */
.vote-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) 120px 24px; align-items: center; gap: 8px; font-size: var(--fs-md); padding: 3px 0; }
.vote-row__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vote-row__bar { height: 8px; border-radius: 4px; background: var(--ink-100); overflow: hidden; }
.vote-row__bar i { display: block; height: 100%; background: var(--ink-400); border-radius: inherit; transition: width .3s var(--ease); }
.vote-row--winner .vote-row__bar i { background: var(--orange-500); }
.vote-row--winner .vote-row__title { font-weight: var(--fw-bold); }
.vote-row__n { font: var(--fw-bold) var(--fs-sm) var(--font-mono); text-align: right; }

/* ---------- segment tile ---------- */
.seg-tile {
  border: 1px solid var(--ink-100); border-radius: var(--r-md); padding: 8px 10px; background: var(--surface);
  display: flex; flex-direction: column; gap: 6px; min-width: 0; position: relative;
  transition: border-color .2s, background .2s;
}
.seg-tile__head { display: flex; align-items: center; gap: 6px; }
.seg-tile__no { font: var(--fw-bold) var(--fs-sm) var(--font-mono); color: var(--ink-500); }
.seg-tile__head .status-pill { margin-left: auto; }
.seg-tile__title { font-weight: var(--fw-bold); font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg-tile__meta { display: flex; justify-content: space-between; color: var(--ink-400); font-size: var(--fs-xs); font-family: var(--font-mono); }
.seg-tile__file { font: var(--fs-xs) var(--font-mono); color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg-tile--packing { border-color: var(--orange-300); background: #FFFAF5; }
.seg-tile--done { background: var(--surface-2); }
.seg-tile--redo { border-color: #EBA7A2; background: #FFF7F6; }
.seg-tile__thumb {
  height: 34px; border-radius: 6px;
  background: repeating-linear-gradient(90deg, var(--ink-100) 0 10px, var(--surface-2) 10px 12px);
}
.seg-tile--packing .seg-tile__thumb { background: linear-gradient(90deg, var(--orange-100), #fff, var(--orange-100)); background-size: 200% 100%; animation: vs-shimmer 1.2s linear infinite; }
.seg-tile--done .seg-tile__thumb { background: linear-gradient(135deg, color-mix(in srgb, var(--role-package) 70%, #000) , var(--role-package) 55%, var(--orange-300)); }
.seg-tile--redo .seg-tile__thumb { background: repeating-linear-gradient(-45deg, #F7D5D2 0 6px, #FFF 6px 12px); }

/* ---------- log row ---------- */
.log-row { display: grid; grid-template-columns: 42px 20px minmax(0, 1fr); gap: 8px; align-items: start; padding: 6px 0; border-bottom: 1px dashed var(--ink-100); font-size: var(--fs-md); line-height: 1.5; }
.log-row__time { font: var(--fs-xs)/20px var(--font-mono); color: var(--ink-400); }
.log-row__text { min-width: 0; color: var(--ink-700); }
.log-row__engine { font: var(--fw-medium) var(--fs-xs) var(--font-mono); color: var(--orange-600); }
.log-row__name { font-weight: var(--fw-bold); color: var(--ink-900); }
.log-row--system .log-row__text { color: var(--ink-500); }
.log-row--system .log-row__engine { color: var(--ink-400); }
.log-row--fail .log-row__text { color: var(--st-redo); }
.log-row--stamp .log-row__text { color: #9c3f58; font-weight: var(--fw-medium); }
.log-row__sys { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--ink-900); color: var(--orange-500); font-size: 11px; }

/* ---------- stamp ---------- */
.stamp {
  width: 96px; height: 96px; border-radius: 50%;
  border: 3px double #D2486C; color: #D2486C;
  display: grid; place-items: center; text-align: center;
  font: var(--fw-bold) 15px/1.15 var(--font-serif); transform: rotate(-12deg);
  background: rgba(255, 255, 255, .9);
  box-shadow: inset 0 0 0 4px rgba(210, 72, 108, .12);
}
.stamp small { display: block; font: var(--fw-medium) 10px var(--font-sans); letter-spacing: .1em; }

/* ---------- kbd / misc ---------- */
.mono { font-family: var(--font-mono); }
.muted { color: var(--ink-500); }
.stars { color: var(--orange-500); letter-spacing: 1px; font-size: var(--fs-xs); white-space: nowrap; }
.stars i { color: var(--ink-200); font-style: normal; }