/* READMADE studio theme: reuse the public site's playful creator palette
   without changing the editor or PageFlip structure. */
body.publishing-app[data-page="project"] {
  --ss-ink: #16161c;
  --ss-ink-soft: #55545e;
  --ss-paper: #fffefa;
  --ss-paper-warm: #fff8e9;
  --ss-panel: #f4f4f8;
  --ss-line: #dedde6;
  --ss-purple: #6439e8;
  --ss-purple-deep: #4d2cc0;
  --ss-coral: #f42c8d;
  --ss-yellow: #ffc223;
  --ss-aqua: #08bdb9;
  --ss-mint: #dcf9f7;
  --header-height: 70px;
  --ss-shadow: 0 22px 54px rgba(37, 30, 69, 0.12);
  --bg: #ffffff;
  --surface: var(--ss-paper);
  --surface-strong: #ffffff;
  --surface-muted: var(--ss-panel);
  --surface-tint: #edf9f6;
  --text: var(--ss-ink);
  --text-soft: #414252;
  --muted: var(--ss-ink-soft);
  --line: var(--ss-line);
  --line-strong: #bbb8cb;
  --brand: var(--ss-purple);
  --brand-strong: var(--ss-purple-deep);
  --brand-soft: #eeeaff;
  --accent: var(--ss-coral);
  --accent-soft: #ffe4f0;
  --success: #277e6d;
  --success-soft: var(--ss-mint);
  --warning: #a96c16;
  --warning-soft: #fff0bf;
  --danger: #d85259;
  --focus: #4d35ca;
  --ink: var(--ss-ink);
  --ink-text: var(--ss-paper);
  --shadow: var(--ss-shadow);
  --shadow-small: 0 10px 25px rgba(37, 30, 69, 0.1);
  --radius: 22px;
  --radius-small: 12px;
  background: #ffffff;
}

html[data-theme="dark"] body.publishing-app[data-page="project"] {
  --ss-ink: #f9f7ff;
  --ss-ink-soft: #c3bfce;
  --ss-paper: #18171e;
  --ss-paper-warm: #24202a;
  --ss-panel: #24202a;
  --ss-line: #464150;
  --ss-purple: #a491ff;
  --ss-purple-deep: #c3b8ff;
  --ss-coral: #ff7ab8;
  --ss-yellow: #ffc223;
  --ss-aqua: #08bdb9;
  --ss-mint: #173c3d;
  --ss-shadow: 0 22px 54px rgba(0, 0, 0, 0.32);
  --surface-strong: #211f2a;
  --surface-tint: #202d2d;
  --text-soft: #dfd9e9;
  --line-strong: #575264;
  --brand-soft: #302752;
  --accent-soft: #512f3d;
  --warning-soft: #4c3a1f;
  --ink: #12111a;
  --bg: var(--ss-paper-warm);
  background: var(--ss-paper-warm);
}

body.publishing-app[data-page="project"] .prototype-chip {
  border-color: color-mix(in srgb, var(--ss-purple) 34%, var(--ss-line));
  background: color-mix(in srgb, var(--ss-purple) 9%, var(--ss-paper));
  color: var(--ss-purple-deep);
}

body.publishing-app[data-page="project"] .project-workspace {
  padding-block: 22px 72px;
}

body.publishing-app[data-page="project"] .studio-appbar {
  position: sticky;
  isolation: isolate;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--ss-ink) 18%, var(--ss-line));
  border-radius: 24px 24px 18px 24px;
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--ss-paper) 96%, var(--ss-yellow)), var(--ss-paper) 58%, color-mix(in srgb, var(--ss-paper) 90%, var(--ss-aqua)));
  box-shadow: 9px 9px 0 color-mix(in srgb, var(--ss-coral) 72%, transparent), var(--ss-shadow);
}

body.publishing-app[data-page="project"] .studio-appbar::before {
  position: absolute;
  z-index: -1;
  top: -70px;
  right: 27%;
  width: 145px;
  height: 145px;
  border: 2px dashed color-mix(in srgb, var(--ss-purple) 35%, transparent);
  border-radius: 50%;
  content: "";
  pointer-events: none;
  transform: rotate(-15deg);
}

body.publishing-app[data-page="project"] .studio-back {
  border-color: color-mix(in srgb, var(--ss-ink) 20%, var(--ss-line));
  border-radius: 10px 10px 4px 10px;
  background: var(--ss-yellow);
  color: var(--ss-ink);
}

body.publishing-app[data-page="project"] .studio-back:hover {
  border-color: var(--ss-ink);
  color: var(--ss-purple-deep);
}

body.publishing-app[data-page="project"] .mini-cover-small {
  border: 2px solid var(--ss-ink);
  border-radius: 8px 4px 12px 4px;
  background:
    linear-gradient(135deg, transparent 0 19px, color-mix(in srgb, var(--ss-yellow) 92%, transparent) 20px 33px, transparent 34px),
    linear-gradient(145deg, var(--ss-purple), var(--ss-purple-deep) 58%, var(--ss-coral));
  box-shadow: 5px 5px 0 color-mix(in srgb, var(--ss-aqua) 85%, transparent);
}

body.publishing-app[data-page="project"] .project-app-title > div {
  color: var(--ss-ink-soft);
}

body.publishing-app[data-page="project"] .project-app-title h1 {
  font-family: var(--font-ui);
  font-weight: 900;
  letter-spacing: -0.055em;
}

body.publishing-app[data-page="project"] .project-app-title p {
  color: var(--ss-ink-soft);
}

body.publishing-app[data-page="project"] .project-workload {
  border-color: var(--ss-line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--ss-paper) 76%, var(--ss-panel));
}

body.publishing-app[data-page="project"] .project-workload > span {
  border-right-color: var(--ss-line);
}

body.publishing-app[data-page="project"] .project-workload > span:first-child {
  background: color-mix(in srgb, var(--ss-yellow) 36%, var(--ss-paper));
}

body.publishing-app[data-page="project"] .project-workload > span:nth-child(2) {
  background: color-mix(in srgb, var(--ss-aqua) 18%, var(--ss-paper));
}

body.publishing-app[data-page="project"] .project-workload .workload-chip {
  background: var(--ss-mint);
}

body.publishing-app[data-page="project"] .studio-appbar .button-primary,
body.publishing-app[data-page="project"] .studio-proof > .button-primary {
  border-color: var(--ss-ink);
  background: var(--ss-ink);
  color: var(--ss-paper);
}

body.publishing-app[data-page="project"] .studio-appbar .button-primary:hover:not(:disabled),
body.publishing-app[data-page="project"] .studio-proof > .button-primary:hover:not(:disabled) {
  border-color: var(--ss-purple-deep);
  background: var(--ss-purple-deep);
  color: #fff;
}

body.publishing-app[data-page="project"] .button-outline {
  border-color: var(--ss-line);
  background: var(--ss-paper);
}

body.publishing-app[data-page="project"] .button-outline:hover:not(:disabled) {
  border-color: var(--ss-purple);
  background: color-mix(in srgb, var(--ss-purple) 8%, var(--ss-paper));
  color: var(--ss-purple-deep);
}

body.publishing-app[data-page="project"] .studio-card {
  margin-top: 22px;
  border: 1px solid color-mix(in srgb, var(--ss-ink) 16%, var(--ss-line));
  border-radius: 24px;
  background: var(--ss-paper);
  box-shadow: var(--ss-shadow);
}

body.publishing-app[data-page="project"] .studio-toolbar {
  position: relative;
  overflow: hidden;
  padding: 20px 22px 22px;
  border-bottom-color: var(--ss-line);
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--ss-yellow) 38%, var(--ss-paper)), var(--ss-paper) 46%, color-mix(in srgb, var(--ss-aqua) 18%, var(--ss-paper)));
}

body.publishing-app[data-page="project"] .studio-toolbar::after {
  position: absolute;
  right: 24px;
  bottom: -37px;
  width: 92px;
  height: 92px;
  border: 2px solid color-mix(in srgb, var(--ss-coral) 35%, transparent);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

body.publishing-app[data-page="project"] .studio-toolbar .kicker,
body.publishing-app[data-page="project"] .studio-toolbar h2 {
  position: relative;
  z-index: 1;
}

body.publishing-app[data-page="project"] .studio-toolbar .rm-page-tag {
  margin-bottom: 8px;
}

body.publishing-app[data-page="project"] .studio-toolbar h2 {
  color: var(--ss-ink);
  font-family: var(--font-ui);
  font-weight: 900;
}

body.publishing-app[data-page="project"] .studio-toolbar h2 em {
  color: var(--ss-coral);
  font-style: normal;
}

body.publishing-app[data-page="project"] .author-guide-path {
  border-color: var(--ss-line);
  background: linear-gradient(90deg, color-mix(in srgb, var(--ss-purple) 7%, var(--ss-paper)), color-mix(in srgb, var(--ss-yellow) 16%, var(--ss-paper)));
}

body.publishing-app[data-page="project"] .author-guide-path > button {
  color: var(--ss-ink-soft);
}

body.publishing-app[data-page="project"] .author-guide-path > button > span {
  border-color: color-mix(in srgb, var(--ss-purple) 38%, var(--ss-line));
  background: var(--ss-paper);
}

body.publishing-app[data-page="project"] .author-guide-path > button:nth-of-type(2) > span {
  border-color: color-mix(in srgb, var(--ss-coral) 48%, var(--ss-line));
}

body.publishing-app[data-page="project"] .author-guide-path > button:nth-of-type(3) > span {
  border-color: color-mix(in srgb, var(--ss-aqua) 64%, var(--ss-line));
}

body.publishing-app[data-page="project"] .author-guide-path > button.is-active {
  border-color: color-mix(in srgb, var(--ss-purple) 42%, var(--ss-line));
  background: var(--ss-paper);
  color: var(--ss-purple-deep);
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--ss-purple) 15%, transparent);
}

body.publishing-app[data-page="project"] .author-guide-path > button.is-active > span {
  border-color: var(--ss-purple);
  background: var(--ss-purple);
}

body.publishing-app[data-page="project"] .author-guide-path > p {
  border-left-color: color-mix(in srgb, var(--ss-coral) 48%, var(--ss-line));
}

body.publishing-app[data-page="project"] .author-guide-path > p strong {
  color: var(--ss-coral);
}

body.publishing-app[data-page="project"] .book-structure {
  background: linear-gradient(180deg, color-mix(in srgb, var(--ss-panel) 84%, var(--ss-purple)), var(--ss-panel));
}

body.publishing-app[data-page="project"] .nav-panel-header,
body.publishing-app[data-page="project"] .workspace-tabs,
body.publishing-app[data-page="project"] .panel-search,
body.publishing-app[data-page="project"] .asset-queue-list > button:hover,
body.publishing-app[data-page="project"] .issue-actions button {
  background: var(--ss-paper);
}

body.publishing-app[data-page="project"] .workspace-tabs button.is-active {
  background: var(--ss-purple);
  color: #fff;
}

body.publishing-app[data-page="project"] .workspace-tabs button.is-active > span {
  background: color-mix(in srgb, #fff 88%, var(--ss-purple));
  color: var(--ss-purple-deep);
}

body.publishing-app[data-page="project"] .content-editor {
  background: color-mix(in srgb, var(--ss-panel) 70%, var(--ss-paper));
}

body.publishing-app[data-page="project"] .analysis-receipt {
  border-color: color-mix(in srgb, var(--ss-aqua) 52%, var(--ss-line));
  box-shadow: 0 7px 20px rgba(37, 30, 69, 0.05);
}

body.publishing-app[data-page="project"] .analysis-receipt .import-receipt-strip {
  background: color-mix(in srgb, var(--ss-mint) 78%, var(--ss-paper));
}

body.publishing-app[data-page="project"] .analysis-receipt .layer-receipt-heading {
  background: color-mix(in srgb, var(--ss-purple) 9%, var(--ss-paper));
}

body.publishing-app[data-page="project"] .layer-kind {
  background: color-mix(in srgb, var(--ss-purple) 14%, var(--ss-paper));
  color: var(--ss-purple-deep);
}

body.publishing-app[data-page="project"] .asset-layer .layer-kind {
  background: color-mix(in srgb, var(--ss-yellow) 54%, var(--ss-paper));
  color: #875d00;
}

body.publishing-app[data-page="project"] .free-editor-document {
  border-color: var(--ss-line);
  background: #f7f6fb;
  box-shadow: 7px 7px 0 color-mix(in srgb, var(--ss-aqua) 18%, transparent);
}

html[data-theme="dark"] body.publishing-app[data-page="project"] .free-editor-document {
  background: #201f29;
}

body.publishing-app[data-page="project"] .editor-page {
  background: var(--ss-paper);
}

body.publishing-app[data-page="project"] .studio-job-tray {
  border-top-color: var(--ss-line);
  background: linear-gradient(90deg, color-mix(in srgb, var(--ss-aqua) 16%, var(--ss-paper)), color-mix(in srgb, var(--ss-purple) 8%, var(--ss-paper)));
}

body.publishing-app[data-page="project"] .job-pulse {
  background: var(--ss-coral);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--ss-coral) 15%, transparent);
}

body.publishing-app[data-page="project"] .job-progress > span > i {
  background: linear-gradient(90deg, var(--ss-purple), var(--ss-aqua), var(--ss-coral));
}

body.publishing-app[data-page="project"] .studio-job-tray > button {
  border-color: color-mix(in srgb, var(--ss-purple) 42%, var(--ss-line));
  background: var(--ss-paper);
  color: var(--ss-purple-deep);
}

body.publishing-app[data-page="project"] .prototype-boundary {
  padding: 7px 12px;
  border: 1px dashed color-mix(in srgb, var(--ss-purple) 32%, var(--ss-line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--ss-paper) 86%, var(--ss-yellow));
  color: var(--ss-ink-soft);
}

body.publishing-app[data-page="project"] .compact-footer {
  border-top-color: var(--ss-line);
  background: color-mix(in srgb, var(--ss-paper) 86%, var(--ss-panel));
}

/* The preview stays an actual book, but its cover and data accents now belong
   to the same READMADE visual system as the public-facing studio. */
body.publishing-app[data-page="project"] .magazine-stage {
  background:
    radial-gradient(circle at 14% 13%, color-mix(in srgb, var(--ss-yellow) 65%, transparent) 0 68px, transparent 69px),
    radial-gradient(circle at 88% 82%, color-mix(in srgb, var(--ss-aqua) 46%, transparent) 0 105px, transparent 106px),
    linear-gradient(145deg, color-mix(in srgb, var(--ss-purple) 15%, var(--ss-paper)), color-mix(in srgb, var(--ss-coral) 11%, var(--ss-paper)));
}

body.publishing-app[data-page="project"] .page-turn-coach::before {
  border-color: color-mix(in srgb, var(--ss-yellow) 52%, transparent);
  background: color-mix(in srgb, var(--ss-ink) 88%, transparent);
}

body.publishing-app[data-page="project"] .magazine-page {
  background: #fffefd;
  box-shadow: inset 0 0 0 1px rgba(24, 25, 34, 0.08);
  color: #181922;
}

body.publishing-app[data-page="project"] .magazine-page > p:not(.magazine-kicker, .magazine-caption) {
  color: #5f6070;
}

body.publishing-app[data-page="project"] .magazine-kicker,
body.publishing-app[data-page="project"] .magazine-contents b {
  color: var(--ss-purple);
}

body.publishing-app[data-page="project"] .magazine-cover {
  background: linear-gradient(145deg, var(--ss-purple), var(--ss-purple-deep) 58%, var(--ss-coral));
  color: #fffdf7;
}

body.publishing-app[data-page="project"] .magazine-cover::before {
  background: var(--ss-yellow);
  box-shadow: -25px 30px 0 color-mix(in srgb, var(--ss-aqua) 68%, transparent);
}

body.publishing-app[data-page="project"] .magazine-cover::after {
  position: absolute;
  right: -39px;
  bottom: 31px;
  width: 160px;
  height: 16px;
  border: 2px solid rgba(255, 253, 247, 0.6);
  border-radius: 999px;
  content: "";
  pointer-events: none;
  transform: rotate(-24deg);
}

body.publishing-app[data-page="project"] .magazine-art {
  background:
    radial-gradient(circle at 71% 28%, var(--ss-yellow) 0 28px, transparent 29px),
    linear-gradient(155deg, transparent 47%, var(--ss-aqua) 48% 65%, var(--ss-purple) 66% 82%, var(--ss-coral) 83%);
}

body.publishing-app[data-page="project"] .magazine-diagram-page {
  background: #fff5e6;
}

body.publishing-app[data-page="project"] .magazine-diagram {
  background: #eeeaff;
}

body.publishing-app[data-page="project"] .magazine-diagram span {
  border-color: #a695ee;
  background: #fffefd;
}

body.publishing-app[data-page="project"] .magazine-diagram i,
body.publishing-app[data-page="project"] .magazine-caption {
  color: var(--ss-purple);
}

body.publishing-app[data-page="project"] .magazine-bars {
  border-color: #cbc5e4;
}

body.publishing-app[data-page="project"] .magazine-bars span {
  background: var(--ss-purple);
}

body.publishing-app[data-page="project"] .magazine-bars span:nth-child(2) {
  background: var(--ss-coral);
}

body.publishing-app[data-page="project"] .magazine-bars span:nth-child(3) {
  background: var(--ss-aqua);
}

body.publishing-app[data-page="project"] .magazine-data-page th,
body.publishing-app[data-page="project"] .magazine-data-page td,
body.publishing-app[data-page="project"] .magazine-contents li {
  border-bottom-color: #dedee7;
}

body.publishing-app[data-page="project"] .magazine-back {
  background: linear-gradient(145deg, #181922, #38218e);
  color: #fffdf7;
}

body.publishing-app[data-page="project"] .magazine-back p {
  color: #fffdf7 !important;
}

@media (max-width: 1180px) {
  body.publishing-app[data-page="project"] .studio-appbar {
    position: static;
    box-shadow: 6px 6px 0 color-mix(in srgb, var(--ss-coral) 62%, transparent), var(--ss-shadow);
  }
}

@media (max-width: 767px) {
  body.publishing-app[data-page="project"] .project-workspace {
    padding-block: 12px 48px;
  }

  body.publishing-app[data-page="project"] .studio-appbar,
  body.publishing-app[data-page="project"] .studio-card {
    border-radius: 18px;
  }

  body.publishing-app[data-page="project"] .studio-appbar {
    box-shadow: 5px 5px 0 color-mix(in srgb, var(--ss-coral) 62%, transparent), var(--ss-shadow);
  }

  body.publishing-app[data-page="project"] .studio-toolbar::after {
    right: -11px;
  }

  body.publishing-app[data-page="project"] .author-guide-path > p {
    border-top-color: color-mix(in srgb, var(--ss-coral) 48%, var(--ss-line));
    border-left: 0;
  }

  body.publishing-app[data-page="project"] .free-editor-document {
    box-shadow: 4px 4px 0 color-mix(in srgb, var(--ss-aqua) 18%, transparent);
  }
}