:root {
  --cw-canvas: var(--tl-background);
  --cw-surface: var(--tl-surface);
  --cw-surface-raised: var(--tl-surface-muted);
  --cw-line: var(--tl-border);
  --cw-line-soft: rgb(var(--tl-divider-rgb));
  --cw-ink: var(--tl-text-primary);
  --cw-body: var(--tl-text-secondary);
  --cw-muted: var(--tl-text-muted);
  --cw-brand: var(--tl-accent);
  --cw-brand-hi: rgb(var(--tl-accent-hover-rgb));
  --cw-brand-soft: rgb(var(--tl-accent-rgb) / 0.12);
  --cw-good: var(--tl-success);
  --cw-danger: var(--tl-error);
  --cw-ease: var(--tl-ease-standard);
  --cw-control-height: var(--tl-control-md);
  --cw-control-radius: var(--tl-radius-md);
  --cw-panel-radius: var(--tl-radius-xl);
  --cw-panel-padding: var(--tl-space-5);
}

.cw-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--tl-space-8);
  padding: var(--tl-space-1) 0 var(--tl-space-6);
}

.cw-page-head-compact {
  max-width: var(--tl-content);
}

.cw-page-head h1 {
  max-width: 18ch;
  color: var(--cw-ink);
  font-family: var(--tl-font-display);
  font-size: var(--tl-text-3xl);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: var(--tl-leading-tight);
  text-wrap: balance;
}

.cw-page-head > div > p:last-child {
  max-width: 65ch;
  margin-top: var(--tl-space-2);
  color: var(--cw-muted);
  font-size: var(--tl-text-md);
  line-height: var(--tl-leading-body);
  text-wrap: pretty;
}

.cw-context-label {
  margin-bottom: var(--tl-space-2);
  color: var(--cw-brand-hi);
  font-size: var(--tl-text-xs);
  font-weight: 700;
}

.cw-side-channel {
  padding: var(--tl-space-3);
  border: var(--tl-border-width) solid var(--cw-line-soft);
  border-radius: var(--tl-radius-md);
  background: var(--cw-surface);
}

.cw-side-channel label {
  display: block;
  margin-bottom: var(--tl-space-1);
  color: var(--cw-muted);
  font-size: var(--tl-text-xs);
  font-weight: 700;
}

/* The card is the field here, so the select stays borderless - but it still
 * needs a real touch target, a pointer cursor, the shared chevron and a focus
 * ring, none of which it had while it was a bare native control. */
.cw-side-channel select {
  width: 100%;
  min-height: var(--tl-control-md);
  padding-inline-end: var(--tl-space-6);
  color: var(--cw-ink);
  border: 0;
  border-radius: var(--tl-radius-sm);
  background-color: transparent;
  background-image: var(--tl-select-chevron);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: var(--tl-icon-sm) var(--tl-icon-sm);
  appearance: none;
  cursor: pointer;
  font-size: var(--tl-text-sm);
  font-weight: 700;
}

.cw-side-channel:hover select {
  color: var(--cw-brand-hi);
}

.cw-side-channel select:focus-visible {
  outline: var(--tl-border-width-strong) solid var(--cw-brand-hi);
  outline-offset: var(--tl-space-1);
}

.cw-onboarding {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(var(--tl-space-96), 1.14fr);
  min-height: var(--tl-layout-onboarding-min);
  overflow: hidden;
  border: var(--tl-border-width) solid var(--cw-line);
  border-radius: var(--tl-radius-2xl);
  background: var(--cw-surface);
  box-shadow: var(--tl-shadow-md);
}

.cw-onboarding.hidden {
  display: none;
}

/* Work first.
 *
 * A creator with tracked videos has already started, so the pipeline outranks
 * the setup card: setup drops below the work and loses the tall pitch panel.
 * Postponing channel setup should cost a creator their pitch, not their work.
 */
#view-home[data-setup="secondary"] {
  display: flex;
  flex-direction: column;
}

/* An ID plus attribute easily outranks the shared .hidden utility, so the
 * composition has to honour its own hidden state or Home leaks into every
 * other view. */
#view-home[data-setup="secondary"].hidden {
  display: none;
}

#view-home[data-setup="secondary"] > #homeWorkspace {
  order: 1;
}

#view-home[data-setup="secondary"] > #homeOnboarding {
  order: 2;
  margin-top: var(--tl-space-10);
}

.cw-onboarding[data-secondary="true"] {
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  box-shadow: var(--tl-shadow-xs);
}

.cw-onboarding[data-secondary="true"] .cw-check-list,
.cw-onboarding[data-secondary="true"] .cw-step-mark {
  display: none;
}

.cw-onboarding[data-secondary="true"] .cw-onboarding-copy {
  padding: var(--tl-space-8) var(--tl-space-8) 0;
  background: none;
}

/* The pitch is for someone who has not started. This creator has, so it drops
 * to a section heading rather than a display headline. */
.cw-onboarding[data-secondary="true"] .cw-onboarding-copy h2 {
  max-width: none;
  font-family: var(--tl-font-sans);
  font-size: var(--tl-text-lg);
  font-weight: 700;
}

.cw-onboarding[data-secondary="true"] .cw-onboarding-copy > p {
  margin-top: var(--tl-space-2);
  font-size: var(--tl-text-sm);
}

.cw-onboarding[data-secondary="true"] .cw-onboarding-actions {
  padding-top: var(--tl-space-6);
}

/* The hero is a grid, so it needs its own hidden state or the shared utility
 * loses to it on equal specificity. */
.cw-channel-hero.hidden,
.cw-idea-starters.hidden {
  display: none;
}

.cw-onboarding-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--tl-space-14);
  background:
    radial-gradient(
      circle at 18% 12%,
      rgb(var(--tl-accent-rgb) / 0.12),
      transparent 38%
    ),
    var(--cw-surface-raised);
}

.cw-step-mark {
  display: inline-grid;
  width: var(--tl-control-md);
  height: var(--tl-control-md);
  margin-bottom: var(--tl-space-6);
  place-items: center;
  color: rgb(var(--tl-on-accent-rgb));
  border-radius: var(--tl-radius-full);
  background: var(--cw-brand);
  font-family: var(--tl-font-mono);
  font-size: var(--tl-text-xs);
  font-weight: 600;
}

.cw-step-mark svg {
  width: var(--tl-icon-md);
  height: var(--tl-icon-md);
  transform: translateX(var(--tl-border-width));
}

.cw-onboarding-copy h2 {
  max-width: 13ch;
  color: var(--cw-ink);
  font-family: var(--tl-font-display);
  font-size: var(--tl-text-2xl);
  font-weight: 800;
  line-height: var(--tl-leading-tight);
  text-wrap: balance;
}

.cw-onboarding-copy > p {
  max-width: 46ch;
  margin-top: var(--tl-space-4);
  color: var(--cw-body);
  font-size: var(--tl-text-md);
  line-height: var(--tl-leading-body);
}

.cw-check-list {
  display: grid;
  gap: var(--tl-space-3);
  margin-top: var(--tl-space-8);
  color: var(--cw-body);
  font-size: var(--tl-text-sm);
}

.cw-check-list li {
  display: grid;
  grid-template-columns: var(--tl-space-5) 1fr;
  gap: var(--tl-space-3);
  line-height: var(--tl-leading-snug);
}

.cw-check-list li::before {
  content: "✓";
  color: var(--cw-brand-hi);
  font-weight: 800;
}

.cw-onboarding-actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--tl-space-8);
}

.cw-setup-back {
  align-self: flex-end;
  margin: -var(--tl-space-2) 0 var(--tl-space-4);
}

.cw-import-form {
  padding-bottom: var(--tl-space-8);
  border-bottom: var(--tl-border-width) solid var(--cw-line);
}

.cw-path-heading {
  display: flex;
  align-items: flex-start;
  gap: var(--tl-space-3-5);
}

.cw-path-heading h3 {
  color: var(--cw-ink);
  font-size: var(--tl-text-md);
  font-weight: 800;
}

.cw-path-heading p {
  margin-top: var(--tl-space-0-5);
  color: var(--cw-muted);
  font-size: var(--tl-text-sm);
  line-height: var(--tl-leading-label);
}

.cw-path-icon {
  display: inline-grid;
  width: var(--tl-space-11);
  height: var(--tl-space-11);
  flex: 0 0 auto;
  place-items: center;
  color: var(--cw-brand-hi);
  border: var(--tl-border-width) solid rgb(var(--tl-accent-rgb) / 0.25);
  border-radius: var(--tl-radius-md);
  background: var(--cw-brand-soft);
}

.cw-path-icon svg {
  width: var(--tl-space-5);
  height: var(--tl-space-5);
}

.cw-import-form > label,
.cw-next-form > label,
.cw-ideas-form label {
  display: block;
  margin-top: var(--tl-space-5);
  margin-bottom: var(--tl-space-2);
  color: var(--cw-body);
  font-size: var(--tl-text-sm);
  font-weight: 700;
}

.cw-field-action {
  display: flex;
  align-items: stretch;
  gap: var(--tl-space-2-5);
}

.cw-field-action input,
.cw-next-form textarea,
.cw-ideas-form input {
  min-width: 0;
  color: var(--cw-ink);
  border: var(--tl-border-width) solid var(--cw-line);
  border-radius: var(--tl-radius-md);
  background: var(--cw-canvas);
  font-size: var(--tl-text-md);
  line-height: var(--tl-leading-label);
  transition:
    border-color var(--tl-duration-base) var(--cw-ease),
    box-shadow var(--tl-duration-base) var(--cw-ease);
}

.cw-field-action input,
.cw-ideas-form input {
  flex: 1;
  min-height: var(--tl-control-lg);
  padding: var(--tl-space-3) var(--tl-space-3-5);
}

.cw-next-form textarea {
  width: 100%;
  min-height: var(--tl-field-multiline-min);
  padding: var(--tl-space-3-5) var(--tl-space-4);
  resize: vertical;
}

.cw-field-action input::placeholder,
.cw-next-form textarea::placeholder,
.cw-ideas-form input::placeholder {
  color: var(--tl-text-muted);
  opacity: 1;
}

.cw-field-action input:focus-visible,
.cw-next-form textarea:focus-visible,
.cw-ideas-form input:focus-visible {
  border-color: var(--cw-brand-hi);
  box-shadow: 0 0 0 3px rgb(var(--tl-accent-rgb) / 0.14);
}

.cw-help,
.cw-status {
  margin-top: var(--tl-space-2);
  color: var(--cw-muted);
  font-size: var(--tl-text-xs);
  line-height: var(--tl-leading-label);
}

.cw-status[data-state="error"] {
  color: var(--cw-danger);
}

.cw-status[data-state="success"] {
  color: var(--cw-good);
}

.cw-new-creator {
  padding-top: var(--tl-space-8);
}

.cw-new-actions {
  display: flex;
  align-items: center;
  gap: var(--tl-space-4);
  margin-top: var(--tl-space-5);
  padding-left: var(--tl-space-14);
}

.cw-channel-hero {
  display: grid;
  grid-template-columns: var(--tl-space-44) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--tl-space-6);
  min-height: var(--tl-layout-channel-hero-min);
  padding: var(--tl-space-5);
  overflow: hidden;
  border: var(--tl-border-width) solid var(--cw-line);
  border-radius: var(--tl-radius-2xl);
  background: var(--cw-surface);
}

.cw-channel-visual {
  position: relative;
  height: var(--tl-media-preview-height);
  overflow: hidden;
  border-radius: var(--tl-radius-lg);
  background: var(--cw-surface-raised);
}

.cw-channel-visual img {
  position: absolute;
  width: 75%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: var(--tl-border-width) solid rgb(var(--tl-border-strong-rgb));
  border-radius: var(--tl-radius-md);
  box-shadow: var(--tl-shadow-md);
}

.cw-channel-visual img:nth-child(1) {
  inset: 0 auto auto 0;
  z-index: 3;
}

.cw-channel-visual img:nth-child(2) {
  inset: var(--tl-space-8) 0 auto auto;
  z-index: 2;
}

.cw-channel-visual img:nth-child(3) {
  inset: auto auto 0 var(--tl-space-6);
  z-index: 1;
}

.cw-channel-fallback {
  display: grid;
  height: 100%;
  place-items: center;
  color: var(--cw-brand-hi);
  border: var(--tl-border-width) solid var(--cw-line);
  background: var(--cw-surface-raised);
  font-family: var(--tl-font-display);
  font-size: var(--tl-text-3xl);
  font-weight: 800;
}

.cw-channel-line {
  display: flex;
  align-items: center;
  gap: var(--tl-space-3-5);
}

.cw-source-pill {
  display: inline-flex;
  align-items: center;
  min-height: var(--tl-space-7);
  padding: var(--tl-space-1) var(--tl-space-2-5);
  color: var(--cw-good);
  border: var(--tl-border-width) solid rgb(var(--tl-success-rgb) / 0.24);
  border-radius: var(--tl-radius-full);
  background: rgb(var(--tl-success-rgb) / 0.08);
  font-size: var(--tl-text-xs);
  font-weight: 700;
}

.cw-channel-summary h2 {
  margin-top: var(--tl-space-2-5);
  color: var(--cw-ink);
  font-family: var(--tl-font-display);
  font-size: var(--tl-text-2xl);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.cw-channel-summary > p {
  max-width: 64ch;
  margin-top: var(--tl-space-2);
  color: var(--cw-body);
  font-size: var(--tl-text-sm);
  line-height: var(--tl-leading-body);
}

.cw-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tl-space-1-5);
  margin-top: var(--tl-space-3);
}

.cw-pill {
  display: inline-flex;
  align-items: center;
  min-height: var(--tl-control-xs);
  padding: var(--tl-space-1) var(--tl-space-2-5);
  color: var(--cw-body);
  border: var(--tl-border-width) solid var(--cw-line);
  border-radius: var(--tl-radius-full);
  background: var(--cw-surface-raised);
  font-size: var(--tl-text-xs);
  font-weight: 700;
}

.cw-home-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--tl-space-80);
  gap: var(--tl-space-8);
  margin-top: var(--tl-space-8);
}

.cw-home-main {
  min-width: 0;
}

.cw-next-video {
  padding: var(--tl-space-6);
  border: var(--tl-border-width) solid var(--cw-line);
  border-radius: var(--tl-radius-xl);
  background: var(--cw-surface);
}

.cw-section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--tl-space-2) var(--tl-space-4);
}

/* The trailing action ("Open library", "Generate more ideas") is two or three
 * words and reads as a single unit. Let the heading wrap the action onto its own
 * line on a narrow screen instead of breaking the label itself in half. */
.cw-section-heading > .cw-text-btn {
  white-space: nowrap;
}

.cw-section-heading h2 {
  color: var(--cw-ink);
  font-size: var(--tl-text-md);
  font-weight: 800;
}

.cw-section-heading p {
  margin-top: var(--tl-space-1);
  color: var(--cw-muted);
  font-size: var(--tl-text-xs);
  line-height: var(--tl-leading-label);
}

.cw-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tl-space-2-5);
  margin-top: var(--tl-space-3);
}

.cw-idea-starters,
.cw-pipeline,
.cw-recent-work {
  margin-top: var(--tl-space-10);
}

/* The pipeline: every video in flight and what it needs next.
 *
 * Deliberately a list, not a kanban board. A creator's slate is small and read
 * top-to-bottom on a phone as often as on a desktop; columns would force
 * horizontal scrolling and hide the stages with nothing in them, which is
 * exactly where the useful signal lives ("nothing is scheduled").
 */
.cw-pipeline-list {
  margin-top: var(--tl-space-4);
  border-top: var(--tl-border-width) solid var(--cw-line);
}

.cw-pipeline-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--tl-space-5);
  padding: var(--tl-space-4-5) 0;
  border-bottom: var(--tl-border-width) solid var(--cw-line);
}

.cw-pipeline-main {
  min-width: 0;
}

.cw-pipeline-stage {
  display: flex;
  align-items: center;
  gap: var(--tl-space-2);
}

.cw-pipeline-dots {
  display: inline-flex;
  gap: 3px;
}

/* Six dots, one per stage: position in the pipeline read at a glance without
 * spending a whole column on it. */
.cw-pipeline-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--tl-radius-full);
  background: rgb(var(--tl-border-rgb));
}

.cw-pipeline-dot.is-done {
  background: rgb(var(--tl-accent-rgb) / 0.45);
}

.cw-pipeline-dot.is-current {
  background: rgb(var(--tl-accent-rgb));
  box-shadow: 0 0 0 3px rgb(var(--tl-accent-rgb) / 0.16);
}

.cw-pipeline-stage-label {
  color: var(--tl-text-muted, rgb(var(--tl-text-muted-rgb)));
  font-size: var(--tl-text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.cw-pipeline-title {
  margin-top: var(--tl-space-1-5);
  color: var(--cw-ink);
  font-size: var(--tl-text-md);
  font-weight: 800;
  line-height: var(--tl-leading-label);
  overflow-wrap: anywhere;
}

.cw-pipeline-note {
  max-width: 70ch;
  margin-top: var(--tl-space-1);
  color: rgb(var(--tl-text-muted-rgb));
  font-size: var(--tl-text-sm);
}

.cw-pipeline-when {
  margin-top: var(--tl-space-1-5);
  color: rgb(var(--tl-text-subtle-rgb));
  font-size: var(--tl-text-xs);
  font-weight: 600;
}

/* A scheduled slot that has passed is the most expensive thing to miss, so it
 * is the one status that earns a colour. */
.cw-pipeline-when.is-overdue {
  color: rgb(var(--tl-warning-rgb));
}

.cw-pipeline-actions {
  display: flex;
  align-items: center;
  gap: var(--tl-space-2);
}

.cw-pipeline-empty {
  margin-top: var(--tl-space-4);
  padding: var(--tl-space-6) 0;
  color: rgb(var(--tl-text-muted-rgb));
  font-size: var(--tl-text-sm);
}

.cw-pipeline.hidden,
.cw-pipeline-list.hidden,
.cw-pipeline-empty.hidden {
  display: none;
}

@media (max-width: 40rem) {
  .cw-pipeline-card {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--tl-space-3);
  }

  .cw-pipeline-actions {
    justify-content: flex-start;
  }
}

.cw-idea-list,
.cw-idea-results {
  margin-top: var(--tl-space-4);
  border-top: var(--tl-border-width) solid var(--cw-line);
}

.cw-idea-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--tl-space-5);
  padding: var(--tl-space-4-5) 0;
  border-bottom: var(--tl-border-width) solid var(--cw-line);
}

.cw-idea-row h3 {
  color: var(--cw-ink);
  font-size: var(--tl-text-md);
  font-weight: 800;
  line-height: var(--tl-leading-label);
}

.cw-idea-row p {
  max-width: 70ch;
  margin-top: var(--tl-space-1);
  color: var(--cw-muted);
  font-size: var(--tl-text-sm);
  line-height: var(--tl-leading-label);
}

.cw-idea-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tl-space-2) var(--tl-space-3);
  margin-top: var(--tl-space-2-5);
  color: var(--cw-body);
  font-size: var(--tl-text-xs);
}

.cw-idea-row-actions {
  display: flex;
  align-items: center;
  gap: var(--tl-space-2);
}

.cw-idea-row-actions .cw-btn {
  white-space: nowrap;
}

.cw-recent-list {
  display: flex;
  gap: var(--tl-space-3);
  margin-top: var(--tl-space-4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
}

.cw-recent-item {
  width: min(var(--tl-space-60), 70vw);
  flex: 0 0 auto;
  overflow: hidden;
  color: var(--cw-ink);
  border: var(--tl-border-width) solid var(--cw-line);
  border-radius: var(--tl-radius-md);
  background: var(--cw-surface);
  scroll-snap-align: start;
  text-align: left;
}

.cw-recent-item img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.cw-recent-item span {
  display: block;
  overflow: hidden;
  padding: var(--tl-space-2-5) var(--tl-space-3);
  font-size: var(--tl-text-xs);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cw-empty-inline {
  padding: var(--tl-space-4) 0;
  color: var(--cw-muted);
  font-size: var(--tl-text-sm);
  line-height: var(--tl-leading-label);
}

.cw-dna-rail {
  align-self: start;
  padding: var(--tl-space-5);
  border: var(--tl-border-width) solid var(--cw-line);
  border-radius: var(--tl-radius-xl);
  background: var(--cw-surface);
}

.cw-dna-list {
  margin-top: var(--tl-space-5);
}

.cw-dna-list > div {
  padding: var(--tl-space-3) 0;
  border-bottom: var(--tl-border-width) solid var(--cw-line);
}

.cw-dna-list dt {
  color: var(--cw-muted);
  font-size: var(--tl-text-xs);
  font-weight: 700;
}

.cw-dna-list dd {
  margin-top: var(--tl-space-1);
  color: var(--cw-body);
  font-size: var(--tl-text-sm);
  line-height: var(--tl-leading-label);
}

.cw-brand-readiness {
  margin-top: var(--tl-space-5);
  padding-top: var(--tl-space-4);
}

.cw-readiness-head {
  display: flex;
  justify-content: space-between;
  color: var(--cw-muted);
  font-size: var(--tl-text-xs);
}

.cw-readiness-head strong {
  color: var(--cw-body);
}

.cw-readiness-list {
  display: grid;
  gap: var(--tl-space-2);
  margin-top: var(--tl-space-3);
}

.cw-readiness-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--tl-control-md);
  color: var(--cw-body);
  font-size: var(--tl-text-xs);
}

.cw-readiness-state {
  color: var(--cw-muted);
  font-size: var(--tl-text-xs);
}

.cw-readiness-state.is-ready {
  color: var(--cw-good);
}

.cw-create-context {
  min-height: 0;
  margin-bottom: var(--tl-space-4);
}

.cw-builder {
  padding: var(--tl-space-5);
  border-color: rgb(var(--tl-border-rgb));
  background: rgb(var(--tl-surface-rgb));
}

.cw-builder-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--tl-space-2);
  margin-bottom: var(--tl-space-4);
}

.cw-builder-tabs {
  width: max-content;
  max-width: 100%;
}

.cw-style-preview-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--tl-duration-slow) var(--tl-ease-standard);
}

.group:hover .cw-style-preview-image {
  transform: scale(1.02);
}

.cw-style-check {
  position: absolute;
  top: var(--tl-space-2);
  right: var(--tl-space-2);
  display: grid;
  width: var(--tl-icon-md);
  height: var(--tl-icon-md);
  place-items: center;
  color: rgb(var(--tl-on-primary-rgb));
  border-radius: var(--tl-radius-full);
  background: rgb(var(--tl-primary-rgb));
  box-shadow: 0 0 0 var(--tl-border-width-strong)
    rgb(var(--tl-overlay-rgb) / 0.36);
  font-size: var(--tl-text-2xs);
  font-weight: 800;
}

.cw-style-badge {
  position: absolute;
  top: var(--tl-space-1);
  left: var(--tl-space-1);
  min-height: var(--tl-control-xs);
  padding-inline: var(--tl-space-2);
  font-size: var(--tl-text-2xs);
}

.cw-style-add {
  display: flex;
  width: 100%;
  aspect-ratio: 16 / 9;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--tl-space-1);
  color: var(--tl-text-muted);
  border: var(--tl-border-width) dashed rgb(var(--tl-border-strong-rgb));
  border-radius: var(--tl-radius-lg);
  background: rgb(var(--tl-surface-rgb));
  font-size: var(--tl-text-xs);
  font-weight: 700;
  transition:
    color var(--tl-duration-base) var(--tl-ease-standard),
    border-color var(--tl-duration-base) var(--tl-ease-standard),
    background-color var(--tl-duration-base) var(--tl-ease-standard);
}

.cw-style-add:hover {
  color: rgb(var(--tl-accent-hover-rgb));
  border-color: rgb(var(--tl-accent-rgb) / 0.55);
  background: var(--tl-interactive-selected);
}

.cw-loading-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--tl-space-8);
  text-align: center;
}

.cw-view-section {
  padding-top: var(--tl-space-1);
}

.cw-account-metrics {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tl-space-3);
  margin-top: var(--tl-space-6);
}

.cw-account-metric {
  display: flex;
  min-height: calc(var(--tl-control-lg) * 2);
  flex-direction: column;
  justify-content: center;
  padding: var(--tl-space-4);
  border: var(--tl-border-width) solid rgb(var(--tl-border-rgb));
  border-radius: var(--tl-radius-lg);
  background: rgb(var(--tl-surface-rgb));
}

.cw-account-metric[data-tone="accent"] {
  border-color: rgb(var(--tl-accent-rgb) / 0.34);
  background: rgb(var(--tl-accent-rgb) / 0.08);
}

.cw-account-metric-label {
  color: var(--tl-text-muted);
  font-size: var(--tl-text-xs);
  font-weight: 700;
}

.cw-account-metric-value {
  margin-top: var(--tl-space-1);
  color: var(--tl-text-primary);
  font-family: var(--tl-font-mono);
  font-size: var(--tl-text-2xl);
  font-weight: 700;
  line-height: var(--tl-leading-tight);
}

.cw-account-panel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tl-space-6);
  margin-top: var(--tl-space-6);
}

.cw-account-panel {
  padding: var(--tl-space-5);
}

.cw-account-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tl-space-3);
}

.cw-account-panel-head h2 {
  color: var(--tl-text-primary);
  font-family: var(--tl-font-sans);
  font-size: var(--tl-text-lg);
  font-weight: 750;
}

@media (min-width: 40rem) {
  .cw-account-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .cw-account-panel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cw-library-card {
  overflow: hidden;
}

.cw-library-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tl-space-2);
  color: var(--tl-text-muted);
  font-family: var(--tl-font-mono);
  font-size: var(--tl-text-2xs);
}

.cw-library-title {
  margin-top: var(--tl-space-1);
  color: var(--tl-text-primary);
  font-size: var(--tl-text-sm);
  font-weight: 700;
}

.cw-create-channel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tl-space-4);
  padding: var(--tl-space-3) var(--tl-space-4);
  color: var(--cw-body);
  border: var(--tl-border-width) solid var(--cw-line);
  border-radius: var(--tl-radius-md);
  background: var(--cw-surface);
}

.cw-create-channel strong {
  color: var(--cw-ink);
}

.cw-create-channel p {
  margin-top: var(--tl-space-0-5);
  color: var(--cw-muted);
  font-size: var(--tl-text-xs);
}

/* Idea suggestions, inside Create.
 *
 * This used to be a top-level destination reached by two devices in thirty
 * days. It now sits under the topic field it fills in, closed by default so it
 * costs nothing to the creator who already knows what they are making.
 */
.cw-suggest-row {
  display: flex;
  margin-top: var(--tl-space-2);
}

.cw-suggest-panel {
  margin-top: var(--tl-space-4);
  padding: var(--tl-space-5);
  border: var(--tl-border-width) solid var(--cw-line);
  border-radius: var(--tl-radius-xl);
  background: var(--cw-surface-raised);
}

.cw-suggest-panel.hidden {
  display: none;
}

.cw-suggest-heading {
  margin-bottom: var(--tl-space-4);
  color: var(--cw-ink);
  font-size: var(--tl-text-md);
  font-weight: 700;
}

.cw-ideas-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--tl-space-72);
  gap: var(--tl-space-5);
  padding: var(--tl-space-5);
  border: var(--tl-border-width) solid var(--cw-line);
  border-radius: var(--tl-radius-xl);
  background: var(--cw-surface);
}

.cw-ideas-form {
  min-width: 0;
}

.cw-ideas-form > div:first-child {
  display: flex;
  align-items: baseline;
  gap: var(--tl-space-3);
}

.cw-ideas-form label {
  margin: 0;
  color: var(--cw-ink);
  font-size: var(--tl-text-sm);
}

.cw-ideas-form > div:first-child p {
  color: var(--cw-muted);
  font-size: var(--tl-text-xs);
}

.cw-ideas-form .cw-field-action {
  margin-top: var(--tl-space-2-5);
}

.cw-ideas-context {
  padding-left: var(--tl-space-5);
  border-left: var(--tl-border-width) solid var(--cw-line);
}

.cw-ideas-context strong {
  display: block;
  color: var(--cw-ink);
  font-size: var(--tl-text-sm);
}

.cw-ideas-context p {
  margin-top: var(--tl-space-1-5);
  color: var(--cw-muted);
  font-size: var(--tl-text-xs);
  line-height: var(--tl-leading-label);
}

.cw-ideas-status {
  min-height: var(--tl-space-6);
}

.cw-ideas-empty {
  padding: var(--tl-space-18) var(--tl-space-4);
  text-align: center;
}

/* Inside Create the empty state is a one-line hint under a disclosure, not a
 * full-page placeholder, so it drops the page-sized padding. */
.cw-suggest-panel .cw-ideas-empty {
  padding: var(--tl-space-4) 0 0;
  text-align: left;
}

.cw-suggest-panel .cw-ideas-empty p {
  margin-left: 0;
}

.cw-ideas-empty h2 {
  color: var(--cw-ink);
  font-size: var(--tl-text-lg);
  font-weight: 800;
}

.cw-ideas-empty p {
  max-width: 48ch;
  margin: var(--tl-space-2) auto 0;
  color: var(--cw-muted);
  font-size: var(--tl-text-sm);
  line-height: var(--tl-leading-body);
}

.cw-result-idea {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--tl-space-68);
  gap: var(--tl-space-8);
  padding: var(--tl-space-6) 0;
  border-bottom: var(--tl-border-width) solid var(--cw-line);
}

.cw-result-idea h2 {
  max-width: 48ch;
  color: var(--cw-ink);
  font-size: var(--tl-text-md);
  font-weight: 800;
  line-height: var(--tl-leading-label);
}

.cw-result-hook {
  margin-top: var(--tl-space-2);
  color: var(--cw-body);
  font-size: var(--tl-text-sm);
  line-height: var(--tl-leading-body);
}

.cw-result-why {
  margin-top: var(--tl-space-2);
  color: var(--cw-muted);
  font-size: var(--tl-text-xs);
  line-height: var(--tl-leading-label);
}

.cw-result-support {
  display: grid;
  align-content: start;
  gap: var(--tl-space-2-5);
}

.cw-result-support div {
  color: var(--cw-body);
  font-size: var(--tl-text-xs);
  line-height: var(--tl-leading-label);
}

.cw-result-support span {
  display: block;
  margin-bottom: var(--tl-space-0-5);
  color: var(--cw-muted);
  font-size: var(--tl-text-2xs);
  font-weight: 700;
}

.cw-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tl-space-2);
  margin-top: var(--tl-space-4);
}

.cw-skeleton-row {
  padding: var(--tl-space-6) 0;
  border-bottom: var(--tl-border-width) solid var(--cw-line);
}

.cw-skeleton-line {
  height: var(--tl-space-3);
  overflow: hidden;
  border-radius: var(--tl-radius-full);
  background: var(--cw-surface-raised);
}

.cw-skeleton-line + .cw-skeleton-line {
  width: 72%;
  margin-top: var(--tl-space-2-5);
}

.cw-skeleton-line::after {
  display: block;
  width: 40%;
  height: 100%;
  content: "";
  background: linear-gradient(
    90deg,
    transparent,
    rgb(var(--tl-text-primary-rgb) / 0.08),
    transparent
  );
  animation: cw-shimmer var(--tl-duration-loop) ease-in-out infinite;
}

.cw-publish-page {
  padding-top: var(--tl-space-10);
}

.cw-publish-notice {
  margin-bottom: var(--tl-space-4);
}

.cw-publish-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--tl-space-76);
  gap: var(--tl-space-5);
  align-items: start;
}

.cw-publish-workbench,
.cw-publish-rail > section {
  border: var(--tl-border-width) solid var(--cw-line);
  border-radius: var(--cw-panel-radius);
  background: var(--cw-surface);
}

.cw-publish-workbench {
  min-width: 0;
  overflow: hidden;
}

.cw-publish-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: var(--tl-border-width) solid var(--cw-line);
  background: var(--cw-surface-raised);
}

.cw-publish-step {
  display: flex;
  min-height: var(--tl-space-14);
  align-items: center;
  justify-content: center;
  gap: var(--tl-space-2);
  padding: var(--tl-space-2-5);
  color: var(--cw-muted);
  font-size: var(--tl-text-xs);
  font-weight: 700;
  transition:
    color var(--tl-duration-base) var(--cw-ease),
    background-color var(--tl-duration-base) var(--cw-ease);
}

.cw-publish-step + .cw-publish-step {
  border-left: var(--tl-border-width) solid var(--cw-line);
}

.cw-publish-step span {
  display: inline-grid;
  width: var(--tl-space-6);
  height: var(--tl-space-6);
  place-items: center;
  border: var(--tl-border-width) solid var(--cw-line);
  border-radius: var(--tl-radius-full);
  font-family: var(--tl-font-mono);
  font-size: var(--tl-text-2xs);
}

.cw-publish-step:hover {
  color: var(--cw-ink);
  background: var(--tl-surface-elevated);
}

.cw-publish-step.is-active,
.cw-publish-step[aria-current="step"] {
  color: var(--cw-ink);
  background: var(--cw-surface);
}

.cw-publish-step.is-active span,
.cw-publish-step[aria-current="step"] span {
  color: rgb(var(--tl-on-accent-rgb));
  border-color: var(--cw-brand);
  background: var(--cw-brand);
}

.cw-publish-step:focus-visible,
.cw-file-input:focus-visible,
.cw-choice:has(input:focus-visible),
.cw-publish-checks label:has(input:focus-visible) {
  outline: var(--tl-border-width-strong) solid var(--cw-brand-hi);
  outline-offset: -3px;
}

[data-publish-panel] {
  padding: var(--tl-space-6);
}

.cw-publish-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--tl-space-4);
  padding-bottom: var(--tl-space-5);
  border-bottom: var(--tl-border-width) solid var(--cw-line-soft);
}

.cw-publish-panel-head h2 {
  color: var(--cw-ink);
  font-size: var(--tl-text-lg);
  font-weight: 800;
}

.cw-publish-panel-head p {
  max-width: 64ch;
  margin-top: var(--tl-space-1-5);
  color: var(--cw-muted);
  font-size: var(--tl-text-sm);
  line-height: var(--tl-leading-label);
}

.cw-source-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--tl-space-5);
  margin-top: var(--tl-space-5);
}

.cw-source-field {
  min-width: 0;
}

.cw-field-heading,
.cw-rail-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--tl-space-4);
}

.cw-field-heading label,
.cw-choice-group legend,
.cw-choice-group-compact > p {
  color: var(--cw-ink);
  font-size: var(--tl-text-sm);
  font-weight: 800;
}

.cw-field-heading p,
.cw-publish-field small,
.cw-choice small,
.cw-publish-checks small {
  display: block;
  margin-top: var(--tl-space-1);
  color: var(--cw-muted);
  font-size: var(--tl-text-xs);
  font-weight: 500;
  line-height: var(--tl-leading-label);
}

.cw-file-state {
  flex: none;
  color: var(--cw-muted);
  font-size: var(--tl-text-xs);
  font-weight: 700;
}

.cw-file-state[data-state="ready"] {
  color: var(--cw-good);
}

.cw-generated-images {
  display: flex;
  gap: var(--tl-space-2);
  margin-top: var(--tl-space-3-5);
  overflow-x: auto;
  padding-bottom: var(--tl-space-1-5);
}

.cw-generated-image {
  position: relative;
  flex: 0 0 var(--tl-space-26);
  overflow: hidden;
  border: var(--tl-border-width-strong) solid transparent;
  border-radius: var(--tl-radius-md);
  background: var(--cw-surface-raised);
}

.cw-generated-image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.cw-generated-image[aria-pressed="true"] {
  border-color: var(--cw-brand);
}

.cw-file-input {
  width: 100%;
  min-height: var(--tl-control-lg);
  margin-top: var(--tl-space-3);
  padding: var(--tl-space-2-5);
  color: var(--cw-body);
  border: var(--tl-border-width) dashed var(--cw-line);
  border-radius: var(--cw-control-radius);
  background: var(--cw-surface-raised);
  font-size: var(--tl-text-xs);
}

.cw-file-input::file-selector-button {
  min-height: var(--tl-space-8);
  margin-right: var(--tl-space-2-5);
  padding-inline: var(--tl-space-3);
  color: var(--cw-ink);
  border: var(--tl-border-width) solid var(--cw-line);
  border-radius: var(--tl-radius-sm);
  background: var(--tl-surface-elevated);
  font-family: inherit;
  font-weight: 700;
  /* It looks like a button, so it has to behave like one: pointer, hover and
   * pressed states. Without them the only affordance was the border. */
  cursor: pointer;
  transition:
    background-color var(--tl-duration-fast) var(--tl-ease-standard),
    border-color var(--tl-duration-fast) var(--tl-ease-standard);
}

.cw-file-input::file-selector-button:hover {
  border-color: var(--cw-brand-hi);
  background: var(--cw-surface-raised);
}

.cw-file-input::file-selector-button:active {
  background: var(--cw-surface);
}

.cw-file-input:hover {
  border-color: var(--cw-brand-hi);
}

.cw-image-preview,
.cw-audio-summary {
  margin-top: var(--tl-space-3);
  overflow: hidden;
  border: var(--tl-border-width) solid var(--cw-line-soft);
  border-radius: var(--tl-radius-lg);
  background: var(--cw-surface-raised);
}

.cw-image-preview {
  display: grid;
  min-height: var(--tl-space-40);
  place-items: center;
}

.cw-image-preview img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.cw-image-preview p {
  max-width: 28ch;
  padding: var(--tl-space-4);
  color: var(--cw-muted);
  font-size: var(--tl-text-xs);
  line-height: var(--tl-leading-label);
  text-align: center;
}

.cw-audio-summary {
  display: flex;
  min-height: var(--tl-space-24);
  align-items: center;
  gap: var(--tl-space-3);
  padding: var(--tl-space-4);
}

.cw-audio-summary svg {
  width: var(--tl-space-8);
  flex: none;
  color: var(--cw-brand-hi);
}

.cw-audio-summary strong,
.cw-audio-summary span {
  display: block;
}

.cw-audio-summary strong {
  overflow: hidden;
  color: var(--cw-ink);
  font-size: var(--tl-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cw-audio-summary span {
  margin-top: var(--tl-space-1);
  color: var(--cw-muted);
  font-size: var(--tl-text-xs);
}

.cw-publish-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tl-space-3);
  margin-top: var(--tl-space-6);
  padding-top: var(--tl-space-5);
  border-top: var(--tl-border-width) solid var(--cw-line-soft);
}

.cw-publish-fields,
.cw-choice-group,
.cw-publish-checks,
.cw-review-layout {
  margin-top: var(--tl-space-5);
}

.cw-publish-fields {
  display: grid;
  gap: var(--tl-space-4);
}

.cw-publish-field > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tl-space-4);
  margin-bottom: var(--tl-space-2);
  color: var(--cw-ink);
  font-size: var(--tl-text-sm);
  font-weight: 800;
}

.cw-publish-field > span strong {
  color: var(--cw-muted);
  font-family: var(--tl-font-mono);
  font-size: var(--tl-text-2xs);
  font-weight: 500;
}

.cw-publish-field textarea {
  resize: vertical;
}

.cw-choice-group {
  display: grid;
  gap: var(--tl-space-2);
  padding: 0;
  border: 0;
}

.cw-choice-group legend {
  margin-bottom: var(--tl-space-1);
}

.cw-choice {
  display: flex;
  min-height: calc(var(--tl-control-lg) + var(--tl-space-5));
  align-items: flex-start;
  gap: var(--tl-space-3);
  padding: var(--tl-space-3-5);
  border: var(--tl-border-width) solid var(--cw-line);
  border-radius: var(--tl-radius-lg);
  background: var(--cw-surface-raised);
}

.cw-choice:has(input:checked) {
  border-color: var(--cw-brand);
  background: var(--cw-brand-soft);
}

.cw-choice input {
  margin-top: var(--tl-space-1);
  accent-color: var(--cw-brand);
}

.cw-choice strong,
.cw-publish-checks strong {
  display: block;
  color: var(--cw-ink);
  font-size: var(--tl-text-sm);
}

.cw-choice-group-compact {
  padding-top: var(--tl-space-4-5);
  border-top: var(--tl-border-width) solid var(--cw-line-soft);
}

.cw-choice-group-compact > p {
  margin-top: -var(--tl-space-1);
}

.cw-inline-choices {
  display: flex;
  gap: var(--tl-space-5);
}

.cw-inline-choices label {
  display: inline-flex;
  min-height: var(--tl-space-11);
  align-items: center;
  gap: var(--tl-space-2);
  color: var(--cw-body);
  font-size: var(--tl-text-sm);
  font-weight: 700;
}

.cw-inline-choices input {
  accent-color: var(--cw-brand);
}

.cw-publish-checks {
  display: grid;
  gap: var(--tl-space-3);
}

/* The hint explains the checkbox directly above it, so it sits tight against
 * that card and indents to its label rather than floating between two
 * equally-weighted controls. */
.cw-publish-checks > .cw-help {
  margin-top: calc(var(--tl-space-3) * -1 + var(--tl-space-1));
  padding-inline-start: var(--tl-space-4);
  border-inline-start: var(--tl-border-width-strong) solid var(--cw-line);
}

.cw-publish-checks > label {
  display: flex;
  min-height: calc(var(--tl-control-md) + var(--tl-space-4));
  align-items: flex-start;
  gap: var(--tl-space-3);
  padding: var(--tl-space-3-5);
  border: var(--tl-border-width) solid var(--cw-line-soft);
  border-radius: var(--tl-radius-lg);
}

.cw-review-layout {
  display: grid;
  grid-template-columns: minmax(var(--tl-space-52), 0.85fr) minmax(0, 1.15fr);
  gap: var(--tl-space-5);
}

.cw-review-media {
  overflow: hidden;
  border: var(--tl-border-width) solid var(--cw-line);
  border-radius: var(--tl-radius-lg);
  background: var(--cw-surface-raised);
}

.cw-review-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.cw-review-media > div {
  padding: var(--tl-space-3);
}

.cw-review-media strong,
.cw-review-media span {
  display: block;
}

.cw-review-media strong {
  color: var(--cw-ink);
  font-size: var(--tl-text-sm);
}

.cw-review-media span {
  margin-top: var(--tl-space-1);
  color: var(--cw-muted);
  font-size: var(--tl-text-xs);
}

.cw-review-details {
  display: grid;
  align-content: start;
}

.cw-review-details > div {
  display: grid;
  grid-template-columns: var(--tl-space-28) minmax(0, 1fr);
  gap: var(--tl-space-4);
  padding: var(--tl-space-3) 0;
  border-bottom: var(--tl-border-width) solid var(--cw-line-soft);
}

.cw-review-details dt {
  color: var(--cw-muted);
  font-size: var(--tl-text-xs);
  font-weight: 700;
}

.cw-review-details dd {
  overflow-wrap: anywhere;
  color: var(--cw-ink);
  font-size: var(--tl-text-sm);
  font-weight: 700;
}

.cw-publish-rail {
  display: grid;
  min-width: 0;
  gap: var(--tl-space-4);
}

.cw-publish-rail > section {
  min-width: 0;
  padding: var(--tl-space-4);
}

.cw-rail-heading {
  align-items: center;
}

.cw-rail-heading h2 {
  color: var(--cw-ink);
  font-size: var(--tl-text-sm);
  font-weight: 800;
}

.cw-channel-identity {
  display: flex;
  align-items: center;
  gap: var(--tl-space-3);
  margin: var(--tl-space-4) 0;
}

.cw-channel-avatar {
  display: grid;
  width: var(--tl-space-11);
  height: var(--tl-space-11);
  flex: none;
  overflow: hidden;
  place-items: center;
  border: var(--tl-border-width) solid var(--cw-line);
  border-radius: var(--tl-radius-full);
  background: var(--cw-surface-raised);
  color: var(--cw-muted);
  font-weight: 800;
}

.cw-channel-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cw-channel-identity strong,
.cw-channel-identity span {
  display: block;
}

.cw-channel-identity strong {
  color: var(--cw-ink);
  font-size: var(--tl-text-sm);
}

.cw-channel-identity span {
  margin-top: var(--tl-space-1);
  color: var(--cw-muted);
  font-size: var(--tl-text-xs);
}

.cw-publish-channel > .cw-btn {
  width: 100%;
}

.cw-publish-channel > .cw-text-btn {
  width: 100%;
  margin-top: var(--tl-space-1-5);
}

.cw-job-list {
  display: grid;
  min-width: 0;
  gap: var(--tl-space-1-5);
  margin-top: var(--tl-space-3-5);
}

.cw-job-item {
  min-width: 0;
  padding: var(--tl-space-3) 0;
  border-bottom: var(--tl-border-width) solid var(--cw-line-soft);
}

.cw-job-item:last-child {
  border-bottom: 0;
}

.cw-job-line,
.cw-job-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--tl-space-2-5);
}

.cw-job-item h3 {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  color: var(--cw-ink);
  font-size: var(--tl-text-xs);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cw-job-line .tl-badge {
  flex: none;
}

.cw-job-item p {
  margin-top: var(--tl-space-1);
  color: var(--cw-muted);
  font-size: var(--tl-text-2xs);
  line-height: var(--tl-leading-label);
}

.cw-job-item p[data-state="error"] {
  color: var(--cw-danger);
}

.cw-job-actions {
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: var(--tl-space-2);
}

.cw-job-actions a,
.cw-job-actions button {
  min-height: var(--tl-control-sm);
  color: var(--cw-body);
  font-size: var(--tl-text-xs);
  font-weight: 700;
}

.cw-job-actions a:hover,
.cw-job-actions button:hover {
  color: var(--cw-ink);
}

@keyframes cw-shimmer {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(250%);
  }
}

@media (max-width: 72rem) {
  .cw-home-layout {
    grid-template-columns: minmax(0, 1fr) var(--tl-space-72);
  }

  .cw-channel-hero {
    grid-template-columns: var(--tl-space-36) minmax(0, 1fr);
  }

  .cw-channel-hero > .cw-btn {
    grid-column: 2;
    justify-self: start;
  }

  .cw-publish-layout {
    grid-template-columns: 1fr;
  }

  .cw-publish-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 62rem) {
  .cw-onboarding {
    grid-template-columns: 1fr;
  }

  .cw-onboarding-copy {
    padding: var(--tl-space-9);
  }

  .cw-onboarding-copy h2 {
    max-width: 18ch;
  }

  .cw-home-layout {
    grid-template-columns: 1fr;
  }

  .cw-dna-rail {
    order: initial;
  }

  .cw-dna-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--tl-space-6);
  }

  .cw-ideas-workbench {
    grid-template-columns: 1fr;
  }

  .cw-ideas-context {
    padding: var(--tl-space-4) 0 0;
    border-top: var(--tl-border-width) solid var(--cw-line);
    border-left: 0;
  }

  .cw-publish-layout {
    grid-template-columns: 1fr;
  }

  .cw-account-panel-grid {
    grid-template-columns: 1fr;
  }

  .cw-publish-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 44rem) {
  .cw-page-head {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--tl-space-4);
    padding-bottom: var(--tl-space-5);
  }

  .mobile-tab {
    min-height: var(--tl-space-14);
    padding-bottom: max(var(--tl-space-2), env(safe-area-inset-bottom));
  }

  .cw-page-head h1 {
    max-width: 20ch;
    font-size: var(--tl-text-2xl);
  }

  .cw-page-head > .cw-btn {
    width: 100%;
  }

  .cw-builder,
  .cw-loading-panel {
    padding: var(--tl-space-4);
  }

  .cw-builder-tabs {
    width: 100%;
  }

  .cw-builder-tabs .tl-tab {
    flex: 1 1 0;
  }

  .cw-mode-cost {
    display: none;
  }

  .cw-account-metrics {
    grid-template-columns: 1fr;
  }

  .cw-onboarding {
    min-height: 0;
    border-radius: var(--tl-radius-xl);
  }

  .cw-onboarding-copy,
  .cw-onboarding-actions {
    padding: var(--tl-space-5);
  }

  .cw-onboarding-actions {
    order: -1;
    border-bottom: var(--tl-border-width) solid var(--cw-line);
  }

  .cw-onboarding-copy h2 {
    font-size: var(--tl-text-2xl);
  }

  .cw-check-list {
    margin-top: var(--tl-space-6);
  }

  .cw-field-action,
  .cw-new-actions,
  .cw-action-row,
  .cw-idea-row-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .cw-new-actions {
    padding-left: 0;
  }

  .cw-field-action .cw-btn,
  .cw-action-row .cw-btn,
  .cw-idea-row-actions .cw-btn {
    width: 100%;
  }

  .cw-channel-hero {
    grid-template-columns: 1fr;
    gap: var(--tl-space-4);
  }

  .cw-channel-visual {
    height: var(--tl-space-40);
  }

  .cw-channel-hero > .cw-btn {
    grid-column: auto;
    width: 100%;
  }

  .cw-channel-line {
    align-items: flex-start;
    justify-content: space-between;
  }

  .cw-home-layout {
    gap: var(--tl-space-6);
    margin-top: var(--tl-space-6);
  }

  .cw-dna-list {
    grid-template-columns: 1fr;
  }

  .cw-idea-row {
    grid-template-columns: 1fr;
    gap: var(--tl-space-3);
  }

  .cw-ideas-form > div:first-child {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--tl-space-1);
  }

  .cw-result-idea {
    grid-template-columns: 1fr;
    gap: var(--tl-space-4);
  }

  .cw-result-support {
    padding-top: var(--tl-space-3-5);
    border-top: var(--tl-border-width) solid var(--cw-line);
  }

  .cw-create-channel {
    align-items: flex-start;
    flex-direction: column;
  }

  .cw-publish-page {
    padding-top: var(--tl-space-6);
  }

  .cw-publish-step {
    min-height: var(--tl-space-12);
    flex-direction: column;
    gap: var(--tl-space-1);
    padding: var(--tl-space-2) var(--tl-space-1);
    font-size: var(--tl-text-2xs);
  }

  [data-publish-panel] {
    padding: var(--tl-space-4);
  }

  .cw-source-grid,
  .cw-review-layout,
  .cw-publish-rail {
    grid-template-columns: 1fr;
  }

  .cw-publish-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .cw-publish-actions > .cw-btn {
    width: 100%;
  }

  .cw-review-details > div {
    grid-template-columns: var(--tl-space-22) minmax(0, 1fr);
  }

  #builderCard > div:first-child > div:first-child {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #builderCard [data-mode] {
    min-height: var(--tl-space-12);
    padding-inline: var(--tl-space-2-5);
    line-height: var(--tl-leading-snug);
  }

  #channelModalBody > div:last-child {
    gap: var(--tl-space-2);
  }

  #chDelete,
  #chCancel,
  #chSave {
    padding-inline: var(--tl-space-3);
    font-size: var(--tl-text-xs);
    white-space: nowrap;
  }
}

@media (pointer: coarse) {
  .cw-text-btn {
    min-height: var(--tl-space-11);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cw-btn,
  .cw-text-btn,
  .cw-icon-btn {
    transition: none;
  }

  .cw-skeleton-line::after {
    animation: none;
    opacity: 0.35;
  }
}

/* ---------------------------------------------------------------------------
 * Publish pack
 *
 * The primary publish path: assemble everything YouTube needs, check it against
 * YouTube's own rules, copy, paste. No OAuth, so it works for every creator on
 * day one - which matters because an unaudited app has its API uploads locked
 * private with no appeal.
 * ------------------------------------------------------------------------- */
.cw-pack {
  margin-top: var(--tl-space-6);
  padding: var(--tl-space-6);
  border: var(--tl-border-width) solid var(--cw-line);
  border-radius: var(--tl-radius-lg);
  background: rgb(var(--tl-surface-rgb));
}

.cw-pack-issues {
  margin-top: var(--tl-space-4);
  display: grid;
  gap: var(--tl-space-2);
}

.cw-pack-issues.hidden {
  display: none;
}

.cw-pack-issue {
  display: flex;
  gap: var(--tl-space-2);
  align-items: baseline;
  font-size: var(--tl-text-sm);
  color: rgb(var(--tl-text-muted-rgb));
}

/* The label carries the severity, so colour is reinforcement rather than the
 * only signal - it still reads correctly in monochrome or with low vision. */
.cw-pack-issue > span {
  flex: none;
  padding: 1px var(--tl-space-2);
  border-radius: var(--tl-radius-full);
  font-size: var(--tl-text-xs);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.cw-pack-issue[data-level="error"] > span {
  color: rgb(var(--tl-error-rgb));
  background: rgb(var(--tl-error-rgb) / 0.12);
}

.cw-pack-issue[data-level="warn"] > span {
  color: rgb(var(--tl-warning-rgb));
  background: rgb(var(--tl-warning-rgb) / 0.14);
}

.cw-pack-grid {
  display: grid;
  gap: var(--tl-space-5);
  margin-top: var(--tl-space-5);
}

@media (min-width: 64rem) {
  .cw-pack-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cw-pack-field {
  min-width: 0;
  padding-top: var(--tl-space-4);
  border-top: var(--tl-border-width) solid var(--cw-line);
}

.cw-pack-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tl-space-3);
}

.cw-pack-field-head h3 {
  color: var(--cw-ink);
  font-size: var(--tl-text-sm);
  font-weight: 800;
}

.cw-pack-badge {
  padding: 2px var(--tl-space-2);
  border: var(--tl-border-width) solid rgb(var(--tl-border-rgb));
  border-radius: var(--tl-radius-full);
  color: rgb(var(--tl-text-subtle-rgb));
  font-size: var(--tl-text-xs);
  font-weight: 700;
  white-space: nowrap;
}

.cw-pack-value {
  margin-top: var(--tl-space-2);
  color: var(--cw-ink);
  font-size: var(--tl-text-sm);
  line-height: var(--tl-leading-body);
  overflow-wrap: anywhere;
}

/* The description has to be shown exactly as it will be pasted - chapters only
 * parse when they sit on their own lines, so whitespace is content here. */
.cw-pack-pre {
  max-height: 16rem;
  overflow: auto;
  white-space: pre-wrap;
  font-family: inherit;
}

.cw-pack-meta {
  margin-top: var(--tl-space-2);
  color: rgb(var(--tl-text-subtle-rgb));
  font-size: var(--tl-text-xs);
}

.cw-pack-testset {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tl-space-2);
  margin-top: var(--tl-space-2);
}

.cw-pack-shot {
  position: relative;
  margin: 0;
}

.cw-pack-shot img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: var(--tl-border-width) solid rgb(var(--tl-border-rgb));
  border-radius: var(--tl-radius-sm);
}

.cw-pack-shot figcaption {
  position: absolute;
  top: var(--tl-space-1);
  left: var(--tl-space-1);
  min-width: 1.25rem;
  padding: 0 4px;
  border-radius: var(--tl-radius-xs, 4px);
  background: rgb(0 0 0 / 0.66);
  color: #fff;
  font-size: var(--tl-text-xs);
  font-weight: 800;
  text-align: center;
}

/* Direct upload is deliberately a disclosure, not a tab: it is the secondary
 * path until YouTube's audit clears. */
.cw-direct {
  margin-top: var(--tl-space-8);
  border-top: var(--tl-border-width) solid var(--cw-line);
  padding-top: var(--tl-space-5);
}

.cw-direct-summary {
  display: flex;
  align-items: center;
  gap: var(--tl-space-3);
  min-height: 44px;
  cursor: pointer;
  list-style: none;
}

.cw-direct-summary::-webkit-details-marker {
  display: none;
}

/* Removing the default marker without replacing it leaves a heading that gives
 * no hint it opens. This is the affordance. */
.cw-direct-summary::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid rgb(var(--tl-text-muted-rgb));
  border-bottom: 2px solid rgb(var(--tl-text-muted-rgb));
  transform: rotate(-45deg);
  transition: transform var(--tl-duration-fast, 120ms) var(--tl-ease-standard);
}

.cw-direct[open] > .cw-direct-summary::before {
  transform: rotate(45deg);
}

.cw-direct-summary:focus-visible {
  outline: 2px solid rgb(var(--tl-accent-rgb));
  outline-offset: 3px;
  border-radius: var(--tl-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  .cw-direct-summary::before {
    transition: none;
  }
}

.cw-direct-title {
  color: var(--cw-ink);
  font-size: var(--tl-text-md);
  font-weight: 800;
}

.cw-direct-tag {
  padding: 2px var(--tl-space-2);
  border-radius: var(--tl-radius-full);
  background: rgb(var(--tl-warning-rgb) / 0.14);
  color: rgb(var(--tl-warning-rgb));
  font-size: var(--tl-text-xs);
  font-weight: 800;
  text-transform: uppercase;
}

.cw-direct-warning {
  max-width: 70ch;
  margin-top: var(--tl-space-3);
  color: rgb(var(--tl-text-muted-rgb));
  font-size: var(--tl-text-sm);
  line-height: var(--tl-leading-body);
}

.cw-pack-empty {
  margin-top: var(--tl-space-5);
  padding-top: var(--tl-space-5);
  border-top: var(--tl-border-width) solid var(--cw-line);
}

.cw-pack-empty p:first-child {
  color: var(--cw-ink);
  font-size: var(--tl-text-md);
  font-weight: 800;
}

.cw-pack-empty p + p {
  max-width: 56ch;
  margin-top: var(--tl-space-2);
  color: rgb(var(--tl-text-muted-rgb));
  font-size: var(--tl-text-sm);
  line-height: var(--tl-leading-body);
}

.cw-pack-empty .cw-btn {
  margin-top: var(--tl-space-4);
}

.cw-pack-empty.hidden,
.cw-pack-grid.hidden {
  display: none;
}