/* Chapter page editor — layout. The preview on the right is the real
   chapter page (chapter.css + chapter.js), rendered at 1200px and scaled
   to fit; nothing here restyles it. */

.site-main.chapter-page-main { max-width: none; }

.cpe {
  display: grid;
  grid-template-columns: minmax(320px, 440px) minmax(0, 1fr);
  gap: var(--s5);
  align-items: start;
}
@media (max-width: 960px) {
  .cpe { grid-template-columns: minmax(0, 1fr); }
  .cpe-preview { order: -1; }
}

/* ---------- form column ---------- */

.cpe-form { font-family: var(--font-sans); }
.cpe-head .field { margin-bottom: var(--s3); }
.cpe-head .hint { margin-bottom: var(--s4); }
.cpe-opt { font-weight: 400; color: var(--muted); }

.cpe-group { border: 0; padding: 0; margin: 0 0 var(--s5); }
.cpe-group legend {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: var(--s3);
  padding: 0;
}
.cpe-group .field { margin-bottom: var(--s3); }
.cpe-group .field label { font-size: 0.85rem; }
.cpe-count { float: right; font-weight: 400; color: var(--muted); font-size: 0.75rem; }
.cpe-field-error { color: var(--red); font-size: 0.82rem; margin: 0.25rem 0 0; }
.cpe-field-error:empty { display: none; }
.field.is-changed label::after {
  content: "edited";
  margin-left: 8px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
}
.cpe-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.cpe-pair .field { margin-bottom: var(--s2); }
.cpe-pair-3 { grid-template-columns: 1fr 1fr; }

/* accent swatches */
.cpe-accents { display: flex; gap: 8px; flex-wrap: wrap; }
.cpe-accent {
  display: inline-flex; align-items: center; gap: 6px;
  border: 2px solid transparent; border-radius: 999px; padding: 4px 10px 4px 4px;
  background: #fff; cursor: pointer; font-size: 0.82rem;
}
.cpe-accent input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cpe-accent .sw { width: 18px; height: 18px; border-radius: 50%; display: inline-block; }
.cpe-accent:has(input:checked) { border-color: var(--navy); }
.cpe-accent:has(input:focus-visible) { outline: 3px solid var(--red); outline-offset: 2px; }

/* photo */
.cpe-photo { display: flex; gap: var(--s3); align-items: flex-start; }
.cpe-photo-thumb {
  width: 96px; height: 72px; flex: none; border: 1.5px solid var(--navy); border-radius: 6px;
  background: #fff center/cover no-repeat; display: grid; place-items: center;
  color: var(--muted); font-size: 0.7rem; text-align: center;
}
.cpe-photo input[type="file"] { font-family: var(--font-sans); font-size: 0.85rem; max-width: 100%; }
.cpe-photo-actions { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.cpe-link { background: none; border: 0; padding: 0; color: var(--red); text-decoration: underline; font: inherit; font-size: 0.82rem; cursor: pointer; }

/* submit block */
.cpe-submit { border-top: 1.5px solid var(--rule); padding-top: var(--s4); margin-top: var(--s2); }
.cpe-submit h2 { font-family: var(--font-serif); font-size: 1.15rem; margin-bottom: var(--s3); }
.cpe-diff { font-size: 0.85rem; margin-bottom: var(--s4); }
.cpe-diff ul { margin: 0.3rem 0 0; padding-left: 1.1rem; }
.cpe-diff li span { color: var(--muted); }
.cpe-diff.is-empty { color: var(--muted); }
.cpe-hp { display: none !important; } /* spam trap: unfocusable, so autofill skips it */
.cpe-turnstile:empty { display: none; }
.cpe-error { color: var(--red); font-size: 0.9rem; margin: 0 0 var(--s3); }
.cpe-error:empty { display: none; }
.cpe-actions { display: flex; gap: var(--s3); flex-wrap: wrap; }
.button { box-shadow: var(--btn-shadow); }
.cpe-done h2 { font-family: var(--font-serif); }
.cpe-done a { word-break: break-all; }

/* ---------- preview column ---------- */

.cpe-preview {
  min-width: 0;
  /* Stay on screen while the form column scrolls. */
  position: sticky;
  top: var(--s4);
  max-height: calc(100vh - var(--s4) * 2);
  display: flex;
  flex-direction: column;
}
@media (max-width: 960px) {
  .cpe-preview { position: static; max-height: none; }
}
.cpe-preview-bar {
  display: flex; align-items: baseline; gap: var(--s3);
  font-family: var(--font-sans); margin-bottom: var(--s2);
}
.cpe-preview-bar .disp { font-size: 11px; color: var(--red); }
.cpe-preview-note { font-size: 0.82rem; color: var(--muted); }

/* The stage is a fixed-size viewport; the canvas inside is the page at
   1200px wide, transform-scaled by tool.js to the stage width. */
.cpe-stage {
  position: relative; overflow: auto; flex: 1 1 auto; min-height: 0;
  border: 2px solid var(--navy); border-radius: var(--radius-card);
  box-shadow: var(--card-shadow); margin-right: 6px; margin-bottom: 6px;
  background: #FDFBE9;
}
.cpe-canvas { width: 1200px; transform-origin: top left; }
.cpe-canvas .cnl-page { max-width: none; }
/* the live page's sticky rail fights a scaled container; let it flow */
.cpe-canvas .cnl-rail { position: static; }

/* proposal view */
.cpe-banner {
  font-family: var(--font-sans); font-size: 0.9rem;
  border: 1.5px solid var(--red); border-radius: 8px; padding: 10px 14px;
  background: rgba(159, 60, 57, 0.06); margin-bottom: var(--s4);
}
.cpe-banner strong { color: var(--red); }

/* ---------- the page in the tools home's look (2026-10-09) ----------
   The page wears the home's rail (assets/rail.js + home.js page mode): body.landing. The rail's
   chapter replaces the Chapter dropdown (it stays in the page, hidden, for the editor's own use);
   the home's header; the form as a home card with badge-headed sections (the event form's); HQ's
   fields; a card head over the preview. The preview itself (the live page's chapter.css) is
   untouched. Embedded (no rail) none of this applies. */

.landing .cpe { gap: 24px; }
body.landing[data-chapter]:not(.rail-chapter-missing) .cpe-head .field { display: none; }
.landing .cpe-head .hint { display: none; }   /* (said in the page header now) */

.landing .cpe-form.card { padding: 20px 22px 24px; font-family: var(--font-serif); }
.landing .cpe-group { margin: 0; padding: 18px 0 6px; border-top: 1px solid var(--home-rule); }
.landing .cpe-fields .cpe-group:first-child { border-top: 0; padding-top: 0; }
.landing .cpe-group legend {
  display: flex; align-items: center; gap: 12px; float: left; width: 100%; margin: 0 0 12px;
  font-family: var(--font-serif); font-size: 18px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--navy);
}
.landing .cpe-group legend + * { clear: both; }
.landing .cpe-group legend::before {
  content: ""; flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--navy) center / 16px 16px no-repeat;
}
.landing .cpe-group:nth-child(1) legend::before { background-color: var(--red); background-image: var(--ic-type-cream); }
.landing .cpe-group:nth-child(2) legend::before { background-image: var(--ic-note-cream); }
.landing .cpe-group:nth-child(3) legend::before { background-color: var(--home-blue); background-image: var(--ic-camera-navy); }
.landing .cpe-group:nth-child(4) legend::before { background-color: var(--red); background-image: var(--ic-link-cream); }
.landing .cpe-group:nth-child(5) legend::before { background-image: var(--ic-users-cream); }
.landing .cpe-group:nth-child(n+6) legend::before { background-color: var(--home-blue); background-image: var(--ic-flag-navy); }
.landing .cpe-form label { font-family: var(--font-serif); font-size: 14px; font-weight: 700; color: var(--navy); }
.landing .cpe-form :is(input[type=text], input[type=email], input[type=url], select, textarea) { border-radius: 8px; border: 1.5px solid rgba(44, 54, 89, 0.55); font-family: var(--font-serif); font-size: 15px; }
.landing .cpe-form .hint { font-family: var(--font-serif); color: var(--home-meta); }
.landing .cpe-accent { border: 1.5px solid rgba(44, 54, 89, 0.2); font-family: var(--font-serif); }

/* The preview: a card head over the live page's frame. */
.landing .cpe-preview-bar { align-items: center; gap: 12px; margin: 0 0 12px; font-family: var(--font-serif); }
.landing .cpe-preview-bar::before {
  content: ""; flex: none; width: 30px; height: 30px; border-radius: 9px;
  background: var(--home-blue) var(--ic-eye-navy, none) center / 16px 16px no-repeat;
}
.landing .cpe-preview-t { font-size: 18px; font-weight: 700; color: var(--navy); }
.landing .cpe-preview-note { font-family: var(--font-serif); font-size: 13px; color: var(--home-meta); }
.landing .cpe-stage { border: 2px solid var(--red); border-radius: 14px; }