/* Editor layout: form on the left, live preview on the right.
   On phones the two become one column with a Preview/Edit toggle. */

/* The editor does not load site.css — it shares none of the public furniture
   (hero, cards, guides, footer) and that sheet is 13 KB of render-blocking
   weight on the one page where speed converts. These five rules are everything
   it actually borrowed; the palette and focus ring come from the inlined
   critical sheet. Keep them in step with site.css if those change. */
.small { font-size: .9rem; }
.brand.small { font-size: 1rem; }
.muted { color: var(--muted); }
.btn-small { padding: 8px 15px; font-size: .88rem; }
.btn-big { width: 100%; padding: 15px; font-size: 1.02rem; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.editor-body { background: var(--paper-deep); }

.ed { display: flex; flex-direction: column; height: 100dvh; }

.ed-head {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding: 10px 18px; flex: 0 0 auto;
}
.ed-design { margin: 0; font-size: .88rem; color: var(--muted); }
.ed-change { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.ed-tab-toggle { display: none; margin-left: auto; font: inherit; font-size: .88rem; padding: 7px 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; cursor: pointer; }

.ed-body { flex: 1 1 auto; display: grid; grid-template-columns: minmax(360px, 480px) 1fr; min-height: 0; min-width: 0; }
/* Grid and flex items default to min-width:auto, which lets a wide child (the
   scaled sheet, or the product tabs) push the whole page sideways. */
.ed-form, .ed-preview, .ed-stage, .ed-prod-tabs, .ed-steps { min-width: 0; }

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

.ed-form { overflow-y: auto; overflow-x: hidden; padding: 0 0 60px; background: var(--surface); border-right: 1px solid var(--line); -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.ed-form::-webkit-scrollbar { width: 8px; }
.ed-form::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; border: 2px solid var(--surface); }
.ed-form::-webkit-scrollbar-track { background: transparent; }

.ed-steps { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 14px 8px; position: sticky; top: 0; background: var(--surface); z-index: 3; border-bottom: 1px solid var(--line); }
.ed-steplist { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; }
.ed-progress { width: 100%; margin: 0 0 6px; font-size: .78rem; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
/* The step you are on is unmistakable: a filled numbered pill. Steps behind
   you show a tick; steps ahead are quiet. */
.ed-step {
  font: inherit; font-size: .8rem; white-space: nowrap; padding: 6px 12px 6px 6px;
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 1px solid transparent; border-radius: 999px; color: var(--muted); cursor: pointer;
}
.ed-step-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: .74rem; font-weight: 600; }
.ed-step:hover { border-color: var(--line-strong); color: var(--ink); }
.ed-step.is-on { background: var(--ink); color: var(--on-ink); font-weight: 500; }
.ed-step.is-on .ed-step-n { background: var(--on-ink); color: var(--ink); }
.ed-step.is-done { color: var(--ink); }
.ed-step.is-done .ed-step-n { background: var(--good-soft); color: var(--good); }
.ed-step.is-done .ed-step-n::before { content: "✓"; }
.ed-step.is-done .ed-step-n span { display: none; }
.ed-step-final.is-on { background: var(--accent); }

.ed-panel { display: none; padding: 22px 22px 0; }
.ed-panel.is-on { display: block; }
.ed-panel > h2 { font-size: 1.2rem; margin-bottom: .9em; }

.ed-field { margin-bottom: 20px; }
.ed-field[hidden] { display: none; }
.ed-field label { display: block; font-weight: 500; font-size: .9rem; margin-bottom: 5px; }
.req { font-weight: 400; font-size: .76rem; color: var(--accent); letter-spacing: .04em; text-transform: uppercase; }
.ed-help { font-size: .82rem; color: var(--muted); margin: 0 0 6px; }
.ed-help.center { text-align: center; margin-top: 12px; }
.ed-field input[type=text], .ed-field input[type=date], .ed-field input[type=email], .ed-field textarea, .ed-field select {
  font: inherit; width: 100%; padding: 10px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface-2); color: var(--ink);
}
.ed-field textarea { resize: vertical; line-height: 1.5; min-height: 90px; }
/* :focus-within as well: a date input moves focus into its own shadow parts
   (month, day, year, the picker button) and the host stops matching :focus. */
.ed-field input:focus, .ed-field input:focus-within, .ed-field textarea:focus { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; }
.ed-count { font-size: .76rem; color: var(--muted); text-align: right; margin: 4px 0 0; font-variant-numeric: tabular-nums; }
.ed-count.near { color: var(--warn); }
.ed-err { font-size: .84rem; color: var(--bad); background: var(--bad-soft); padding: 7px 10px; border-radius: var(--radius); margin: 6px 0 0; }
.ed-err-global { margin: 12px 0; }
.ed-nav { padding: 6px 0 30px; }
.ed-next-label { font-weight: 400; opacity: .85; }
.ed-bar { display: none; }

/* photo */
.ed-photo { display: grid; grid-template-columns: 132px 1fr; gap: 16px; align-items: start; }
.ed-photo-drop {
  aspect-ratio: 1; border: 2px dashed var(--line-strong); border-radius: var(--radius);
  display: grid; place-items: center; cursor: pointer; overflow: hidden; background: var(--accent-soft);
}
.ed-photo-drop.over { border-color: var(--accent); background: var(--surface-2); }
.ed-photo-drop img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 42%); transform: scale(var(--pz, 1)); transform-origin: var(--fx, 50%) var(--fy, 42%); }
.ed-photo-drop { overflow: hidden; }
.ed-slack { color: var(--warn); }
.ed-focus input:disabled { opacity: .35; }
.ed-photo-empty { display: grid; place-items: center; gap: 6px; color: var(--muted); font-size: .8rem; text-align: center; padding: 8px; }
.ed-photo-empty.busy { opacity: .6; }
.ed-photo-side { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ed-dpi { font-size: .8rem; padding: 7px 10px; border-radius: var(--radius); }
.ed-dpi.good { background: var(--good-soft); color: var(--good); }
.ed-dpi.ok { background: var(--warn-soft); color: var(--warn); }
.ed-dpi.bad { background: var(--bad-soft); color: var(--bad); }
.ed-focus { width: 100%; font-size: .84rem; display: grid; gap: 4px; }
.ed-focus label { font-weight: 500; font-size: .82rem; margin: 6px 0 0; }
.ed-focus input[type=range] { width: 100%; accent-color: var(--accent); height: 28px; margin: 2px 0; cursor: pointer; }

/* checkout panel */
.ed-proof { background: var(--accent-soft); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 20px; }
.ed-proof-head { font-weight: 600; margin: 0 0 .7em; font-size: .93rem; }
.ed-proof dl { margin: 0; display: grid; gap: 8px; }
.ed-proof dl > div { display: grid; grid-template-columns: 130px 1fr; gap: 10px; font-size: .89rem; }
.ed-proof dt { color: var(--muted); }
.ed-proof dd { margin: 0; font-weight: 500; }
.ed-proof dd.big { font-family: var(--serif); font-size: 1.12rem; }
.ed-check { display: flex; gap: 9px; align-items: flex-start; margin-top: 14px; font-size: .88rem; font-weight: 500; cursor: pointer; }
.ed-check input { margin-top: 1px; width: 24px; height: 24px; flex: 0 0 24px; }

.ed-buy { border: 0; padding: 0; margin: 0 0 20px; display: grid; gap: 10px; }
.ed-buy legend { font-weight: 600; font-size: .93rem; padding: 0; margin-bottom: 8px; }
.ed-buy-opt { display: flex; gap: 11px; align-items: flex-start; border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 13px 15px; cursor: pointer; background: #fff; }
.ed-buy-opt:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ed-buy-opt input { margin-top: 4px; }
.ed-buy-body { display: grid; gap: 3px; font-size: .88rem; }
.ed-buy-body strong { font-size: .96rem; }
.ed-buy-body span { color: var(--muted); }

.ed-restore { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px; font-size: .88rem; }
.ed-issues { background: var(--warn-soft); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 16px; font-size: .88rem; }
.ed-issues-head { font-weight: 600; margin: 0 0 .5em; }
.ed-issues ul { margin: 0; padding-left: 1.1em; }
.ed-issues li { margin-bottom: .4em; }

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

.ed-preview { display: flex; flex-direction: column; min-height: 0; background: var(--paper-deep); overflow: hidden; }
.ed-preview-bar { display: flex; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--surface); flex-wrap: wrap; }
.ed-prod-tabs { display: flex; gap: 3px; flex-wrap: wrap; flex: 1 1 auto; }
.ed-prod-tabs button { font: inherit; font-size: .8rem; white-space: nowrap; padding: 6px 12px; border: 1px solid transparent; border-radius: 999px; background: none; color: var(--muted); cursor: pointer; }
.ed-prod-tabs button.is-on { background: var(--surface-2); border-color: var(--line-strong); color: var(--ink); }
.ed-page-nav { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ed-page-nav button { font: inherit; font-size: 1.1rem; line-height: 1; width: 30px; height: 30px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface-2); cursor: pointer; color: var(--ink); }

/* One explicit track the size of the stage. Without it the implicit row grows
   to the sheet's unscaled height, the sheet sits at the top and its bottom is
   clipped once the window is shorter than the page. */
.ed-stage { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); place-items: center; padding: 12px; min-height: 0; overflow: hidden; }
.ed-stage > * { grid-area: 1 / 1; }
.ed-sheet { position: relative; transform-origin: center center; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.10), 0 20px 50px -24px rgba(0,0,0,.35); overflow: hidden; }
.ed-preview-note { text-align: center; font-size: .78rem; color: var(--muted); margin: 0; padding: 0 12px 12px; }
.ed-load-err { padding: 30px; text-align: center; color: var(--bad); }

.pv-bg { position: absolute; object-fit: fill; max-width: none; }
/* The PDF places glyphs with raw advance widths — no kerning, no ligatures,
   no hinted rounding — because that is what the shared layout arithmetic
   measures. The browser must render the same way or the words drift apart
   within a line even though the line breaks agree. */
.pv-t {
  position: absolute; white-space: pre;
  font-kerning: none;
  font-variant-ligatures: none;
  font-feature-settings: "kern" 0, "liga" 0, "clig" 0, "calt" 0;
  text-rendering: geometricPrecision;
}
.pv-rect { position: absolute; }
.pv-clip { position: absolute; overflow: hidden; }
.pv-clip.oval { border-radius: 50%; }
.pv-clip img { position: absolute; max-width: none; object-fit: cover; }
.pv-ph { position: absolute; display: grid; place-items: center; background: rgba(120,105,80,.08); color: rgba(120,105,80,.55); overflow: hidden; }
.pv-ph.oval { border-radius: 50%; }
.pv-ph svg { width: 62%; height: 62%; }
.pv-ph span { position: absolute; bottom: 9%; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; font-family: var(--sans); }

/* ------------------------------------------------------------------ mobile */

@media (max-width: 880px) {
  .ed-body { grid-template-columns: 1fr; }
  .ed-form { padding-bottom: 96px; }
  .ed-bar { display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); z-index: 5; }
  .ed-bar .btn { flex: 1 1 0; text-align: center; padding: 13px 10px; }
  .ed-bar-next { flex: 1.6 1 0; }
  .ed.show-preview .ed-bar-next { display: none; }
  .ed-tab-toggle { display: none; }
  .ed-preview { padding-bottom: 80px; }
  .ed-step { font-size: .78rem; padding: 5px 10px 5px 5px; }
  .ed-step-t { display: none; }
  .ed-step.is-on .ed-step-t { display: inline; }
  .ed-preview { display: none; }
  .ed.show-preview .ed-form { display: none; }
  .ed.show-preview .ed-preview { display: flex; }
  .ed-form { border-right: 0; }
  .ed-proof dl > div { grid-template-columns: 1fr; gap: 1px; }
  .ed-proof dt { font-size: .8rem; }
}
@media (max-width: 420px) {
  .ed-photo { grid-template-columns: 104px 1fr; gap: 12px; }
  .ed-panel { padding: 18px 16px 0; }
}
.ed-buy-body .was { color: var(--muted); font-weight: 400; font-size: .9rem; margin-left: 4px; }
.ed-buy-body .save { font-style: normal; font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--good); background: var(--good-soft); padding: 2px 7px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }

/* Library picker under the verse / reading fields */
.ed-pick { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 8px; font-size: .86rem; color: var(--muted); }
.ed-pick-select { font: inherit; font-size: .88rem; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--surface); max-width: 100%; }
.ed-addon { background: var(--accent-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin: 0 0 18px; font-size: .92rem; }
.ed-addon .ed-check { margin: 0; }

/* Live-preview pill (phones) and the floating mini preview */
.ed-live-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 0 0 rgba(46,204,113,.7); animation: live-pulse 1.6s ease-out infinite; margin-right: 8px; vertical-align: middle; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(46,204,113,.7); } 70% { box-shadow: 0 0 0 7px rgba(46,204,113,0); } 100% { box-shadow: 0 0 0 0 rgba(46,204,113,0); } }
.ed-tab-toggle { display: none; margin-left: auto; font: inherit; font-size: .86rem; font-weight: 500; padding: 7px 14px 7px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface-2); color: var(--ink); cursor: pointer; align-items: center; white-space: nowrap; }
.ed-tab-toggle[aria-pressed="true"] .ed-live-dot { background: var(--accent); animation: none; box-shadow: none; }
.ed-mini { display: none; position: fixed; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 6; padding: 0; border: 2px solid var(--surface); border-radius: 6px; background: var(--surface); box-shadow: 0 6px 22px -6px rgba(0,0,0,.45), 0 0 0 2px rgba(46,204,113,.55); cursor: pointer; overflow: hidden; }
.ed-mini .ed-sheet { position: absolute; left: 0; top: 0; transform-origin: 0 0; box-shadow: none; pointer-events: none; }
.ed-mini .ed-live-dot { position: absolute; right: 4px; top: 4px; margin: 0; }
.ed.show-preview .ed-mini { display: none !important; }
@media (max-width: 880px) {
  .ed-tab-toggle { display: inline-flex; }
  .ed-mini:not([hidden]) { display: block; }
  .ed-head { position: sticky; top: 0; z-index: 7; }
}
@media (prefers-reduced-motion: reduce) { .ed-live-dot { animation: none; } }
.ed-head .theme-toggle { margin-left: auto; }
.ed-head .ed-tab-toggle { margin-left: auto; }
.ed-head .ed-tab-toggle + .theme-toggle { margin-left: 0; }
.ed-head .brand-word { white-space: nowrap; }
@media (max-width: 520px) { .ed-design { display: none; } .ed-head { gap: 10px; padding: 8px 12px; } .ed-head .brand { font-size: .95rem; } }
.ed-licence { margin: 0 0 18px; border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 8px 14px; }
.ed-licence summary { cursor: pointer; font-size: .92rem; font-weight: 500; }
.ed-licence[open] summary { margin-bottom: 8px; }
.ed-licence .ed-field { margin-bottom: 4px; }

/* Multi-photo field (slideshow) */
.ed-photos { border: 1.5px dashed var(--line-strong); border-radius: var(--radius); padding: 12px; }
.ed-photos.over { border-color: var(--accent); background: var(--accent-soft); }
.ed-photos-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.ed-photos-list li { position: relative; aspect-ratio: 1; border-radius: 4px; overflow: hidden; background: var(--paper-deep); cursor: grab; }
.ed-photos-list img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-photos-rm { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 15px; line-height: 22px; cursor: pointer; padding: 0; }
.ed-photos-n { position: absolute; left: 4px; bottom: 3px; font-size: .68rem; background: rgba(0,0,0,.55); color: #fff; padding: 1px 5px; border-radius: 3px; }
.ed-photos-bar { margin: 0; display: flex; gap: 10px; align-items: center; }
.ed-switch { margin-left: auto; }
#prod-switch { font: inherit; font-size: .84rem; padding: 6px 28px 6px 10px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface-2); color: var(--ink-soft); max-width: 190px; }
.ed-preview-bar .ed-page-nav { margin-left: 0; }