/* Approved Content Studio layout, master specification D-113, D-124, and D-125 (current dark theme). */
.content-studio-mode {
  --ink: #eceef2;
  --muted: #b4bdc9;
  --paper: #171a1f;
  --line: #404650;
  --green: #40566d;
  --surface: #23272f;
  --soft: #2c313b;
  --error: #ffb4ac;
  --success: #243b30;
  --cs-field: #1b1f26;
  --cs-hover: #303641;
  color-scheme: dark;
  color: var(--ink);
  background: var(--paper);
  font-family: Arial, Helvetica, sans-serif;
}
.content-studio-mode .topbar,
.content-studio-mode .app-footer {
  display: none;
}
.content-studio-mode #workspace {
  max-width: none;
  padding: 0;
  margin: 0;
}
.cs-workspace {
  max-width: 1500px;
  margin: 0 auto;
  padding: 50px 5.7vw 70px;
}
.cs-header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: start;
  margin-bottom: 16px;
}
.cs-header h1 {
  margin: 0 0 3px;
  font:
    700 40px/1.25 Arial,
    Helvetica,
    sans-serif;
  letter-spacing: -1.2px;
}
.cs-header p {
  color: var(--muted);
  font-size: 24px;
  margin: 0;
}
.cs-save {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 8px;
}
.cs-save .cs-note {
  margin: 0;
}
.cs-columns {
  display: grid;
  grid-template-columns: minmax(230px, 34%) minmax(0, 1fr);
  gap: 4.3%;
  align-items: start;
}
.cs-cascade {
  padding-top: 24px;
  min-width: 0;
}
.cs-cascade .field {
  margin: 0 0 20px;
  font-size: 18px;
  line-height: 1.4;
  color: var(--muted);
  gap: 4px;
  display: flex;
  flex-direction: column;
}
.cs-cascade select {
  width: 100%;
  height: 58px;
  padding: 12px 42px 12px 18px;
  font-size: 20px;
  font-weight: 400;
  text-overflow: ellipsis;
}
.content-studio-mode input:not([type="checkbox"]),
.content-studio-mode select,
.content-studio-mode textarea {
  border: 1px solid var(--line);
  border-radius: 5px;
  background-color: var(--cs-field);
  color: var(--ink);
  box-shadow: none;
}
.content-studio-mode select:disabled {
  opacity: 1;
  color: var(--muted);
  background-color: var(--cs-field);
}
.cs-selected {
  margin-bottom: 12px;
}
.cs-selected > span {
  font-size: 18px;
  color: var(--muted);
}
.cs-selected h2 {
  font:
    700 26px/1.3 Arial,
    Helvetica,
    sans-serif;
  margin: 2px 0 0;
  letter-spacing: -0.35px;
  overflow-wrap: anywhere;
}
.cs-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 5px;
  margin: 0 0 9px;
  overflow: hidden;
}
.cs-section > summary {
  min-height: 57px;
  padding: 14px 19px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.35;
}
.cs-section > summary::-webkit-details-marker {
  display: none;
}
.cs-section > summary::after {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 1.6px solid var(--muted);
  border-bottom: 1.6px solid var(--muted);
  transform: rotate(45deg);
  margin: -5px 6px 0 20px;
  flex: 0 0 auto;
}
.cs-section[open] > summary {
  border-bottom: 1px solid var(--line);
}
.cs-section[open] > summary::after {
  transform: rotate(225deg);
  margin-top: 5px;
}
.cs-section-body {
  padding: 12px 19px 17px;
}
.cs-section-body > :last-child {
  margin-bottom: 0;
}
.cs-section-body .field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 18px;
  color: var(--muted);
  margin: 0 0 15px;
}
.cs-section-body input:not([type="checkbox"]),
.cs-section-body textarea,
.cs-section-body select {
  padding: 12px 17px;
  font-size: 18px;
  width: 100%;
  line-height: 1.5;
}
.cs-section-body textarea {
  min-height: 100px;
  resize: vertical;
}
.cs-note {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.5;
  margin: 8px 0 12px;
}
.cs-label {
  font-size: 18px;
  margin: 0 0 8px;
  color: var(--muted);
}
.cs-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.cs-inner {
  margin: 14px 0;
}
.cs-inner > summary {
  cursor: pointer;
  margin-bottom: 12px;
  color: var(--muted);
}
.cs-linked-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}
.cs-linked-row button {
  text-align: left;
}
.cs-checks {
  max-height: 250px;
  overflow: auto;
  margin-bottom: 20px;
}
.cs-source {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.cs-source-text {
  white-space: pre-wrap;
  max-height: 250px;
  overflow: auto;
}
.cs-form {
  min-width: 0;
}
.cs-form .panel {
  border-radius: 5px;
  box-shadow: none;
}
.content-studio-mode .notice {
  margin: 12px auto 0;
  max-width: 1320px;
  border-radius: 5px;
  font-size: 14px;
}
.content-studio-mode .checkline {
  align-items: start;
}
.content-studio-mode :focus-visible {
  outline: 2px solid #aac2df;
  outline-offset: 3px;
}
@media (min-width: 1600px) {
  .cs-workspace {
    padding-left: 60px;
    padding-right: 60px;
  }
}
@media (max-width: 900px) {
  .cs-workspace {
    padding: 30px 24px 60px;
  }
  .cs-header h1 {
    font-size: 34px;
  }
  .cs-header p {
    font-size: 20px;
  }
  .cs-save {
    justify-content: end;
    max-width: 200px;
  }
  .cs-columns {
    grid-template-columns: minmax(210px, 32%) minmax(0, 1fr);
    gap: 26px;
  }
  .cs-cascade select {
    font-size: 17px;
  }
  .cs-selected h2 {
    font-size: 23px;
  }
}
@media (max-width: 650px) {
  .cs-workspace {
    padding: 24px 18px 45px;
  }
  .cs-header {
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
  }
  .cs-header h1 {
    font-size: 32px;
  }
  .cs-save {
    max-width: none;
    justify-content: start;
    padding: 0;
  }
  .cs-columns {
    display: block;
  }
  .cs-cascade {
    padding: 0;
    margin-bottom: 30px;
  }
  .cs-cascade .field {
    margin-bottom: 14px;
  }
  .cs-cascade select {
    height: 52px;
  }
  .cs-section-body {
    padding: 12px 14px 16px;
  }
  .cs-section > summary {
    padding: 14px;
  }
  .cs-form .build-grid {
    display: block;
  }
}

/* Keep label weight consistent with the approved plain form. */
.cs-cascade .field,
.cs-section-body .field {
  font-weight: 400;
}

/* Keep the selected theme consistent in authoring controls and dialogs. */
.content-studio-mode
  :where(
    button,
    .button,
    .panel,
    .page-editor,
    .target-card,
    .preview-shell,
    .optional,
    .task,
    .piece,
    dialog
  ):not(.cs-plan-preview *) {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}
.content-studio-mode
  :where(
    .answer-row,
    .id-pill,
    .flow-context,
    .teaching,
    .model-text,
    .prompt,
    .slot,
    .chip,
    .preview-label,
    .notice,
    .badge
  ):not(.cs-plan-preview *) {
  background: var(--soft);
  border-color: var(--line);
  color: var(--ink);
}
.content-studio-mode :where(button:hover, .button:hover):not(.cs-plan-preview *) {
  background: var(--cs-hover);
}
.content-studio-mode .quiet:not(.cs-plan-preview *) {
  background: transparent;
  border-color: transparent;
}
.content-studio-mode .quiet:hover:not(.cs-plan-preview *) {
  background: var(--cs-hover);
}
.content-studio-mode .primary:not(.cs-plan-preview *),
.content-studio-mode .page-nav button.active:not(.cs-plan-preview *) {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.content-studio-mode .primary:hover:not(.cs-plan-preview *) {
  background: #4c6682;
}
.content-studio-mode :where(.danger, .notice.error):not(.cs-plan-preview *) {
  color: var(--error);
}
.content-studio-mode .notice.error:not(.cs-plan-preview *) {
  background: #38272b;
}
.content-studio-mode a:not(.cs-plan-preview *) {
  color: var(--ink);
}
.content-studio-mode .flow-context h3:not(.cs-plan-preview *) {
  color: var(--muted);
}
.content-studio-mode .badge.approved:not(.cs-plan-preview *) {
  background: var(--success);
  color: #b7dfc5;
}
.content-studio-mode .badge.pending:not(.cs-plan-preview *) {
  background: var(--soft);
  color: var(--muted);
}
.content-studio-mode dialog:not(.cs-plan-preview *)::backdrop {
  background: #0009;
}
.content-studio-mode .cs-cascade select:not(.cs-plan-preview *) {
  background: var(--surface);
}
.content-studio-mode .reader-frame {
  --cs-field: #fff;
  --cs-hover: #eef2ea;
  --error: #8b3934;
  color-scheme: light;
}