/* ── Quick Build, made easier ─────────────────────────────────────────────────
   The customer's editor only (.qb-shell), layered over builder.css and the
   newspaper's own edit-mode styles. Everything here is about the paper looking
   like a paper while you work on it, and the words being where you type.
   ────────────────────────────────────────────────────────────────────────── */

/* The grip and the cross no longer live in each piece's corners — they sat on
   top of the words. The floating toolbar over the selected piece does their
   job from outside the page. */
.qb-shell .bx-canvas .sb-item-grip,
.qb-shell .bx-canvas .sb-item-del { display: none; }

/* The columns' dashed outlines only while you're pointing at a column or
   carrying a piece to one. At rest the page reads as printed. */
.qb-shell .bx-canvas .np-lay-edit .np-lay-slot { outline-color: transparent; transition: outline-color 0.12s; }
.qb-shell .bx-canvas .np-lay-edit .np-lay-slot:hover,
.qb-shell .bx-canvas.is-dragging .np-lay-edit .np-lay-slot { outline-color: rgba(91, 132, 238, 0.35); }
.qb-shell .bx-canvas .np-lay-edit .np-lay-slot.np-lay-empty { background: transparent; }
.qb-shell .bx-canvas .np-lay-edit .np-lay-slot.np-lay-empty:hover { background: rgba(91, 132, 238, 0.04); }

/* The floating toolbar's grip is a thing you hold, so it says so. */
.qb-shell .bx-float-grip { font-size: 0.72rem; font-weight: 700; opacity: 0.85; user-select: none; cursor: grab; touch-action: none; }
.qb-shell .bx-float-grip:active { cursor: grabbing; }
@media (hover: none), (max-width: 1024px) {
  .qb-shell .bx-float button, .qb-shell .bx-float-grip { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
}

/* "Style this piece": the typography, folded away under the words. Most
   couples never open it — the design already looks right. */
.qb-style {
  margin-top: 1rem; border-top: 2px solid var(--bx-line); padding-top: 0.6rem;
}
.qb-style > summary {
  display: flex; align-items: center; gap: 0.4rem; list-style: none; cursor: pointer;
  font-family: var(--bx-mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bx-ink-2);
}
.qb-style > summary::-webkit-details-marker { display: none; }
.qb-style > summary::before { content: "▸"; font-size: 0.7rem; transition: transform 0.15s; }
.qb-style[open] > summary::before { transform: rotate(90deg); }
.qb-style > summary:hover { color: var(--bx-accent-ink); }
.qb-style-body { padding-top: 0.6rem; display: flex; flex-direction: column; gap: 0.5rem; }
.qb-style-body .bx-label { margin-top: 0.3rem; }

/* "Whose wedding is it?" — the card a design opens behind, asked once. */
.qb-basics {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(45, 56, 73, 0.42);
}
.qb-basics[hidden] { display: none; }
.qb-basics-card {
  width: min(28rem, 100%); max-height: calc(100vh - 32px); overflow-y: auto;
  padding: 1.4rem 1.4rem 1.2rem;
  border: 2px solid var(--bx-line-strong); border-radius: 20px;
  background: var(--bx-panel); color: var(--bx-ink);
  box-shadow: 6px 6px 0 var(--bx-shadow);
}
.qb-basics-kicker { margin: 0; font-family: var(--bx-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bx-ink-3); }
.qb-basics-title { margin: 0.2rem 0 0.4rem; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.qb-basics-lede { margin: 0 0 0.6rem; font-size: 0.86rem; line-height: 1.45; color: var(--bx-ink-2); }
.qb-basics-names { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem; }
.qb-basics-names span { font-family: "Playfair Display", Georgia, serif; font-size: 1.3rem; }
.qb-basics-error { margin: 0.6rem 0 0; font-size: 0.8rem; color: var(--bx-danger); }
.qb-basics-acts { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-top: 1.1rem; flex-wrap: wrap; }

/* Words you can type straight onto. A text cursor over them, and a quiet ring
   once you're in, so it's plain where the typing is going. */
.qb-shell .bx-canvas .qb-inline { cursor: text; outline: none; border-radius: 2px; }
.qb-shell .bx-canvas .qb-inline:hover { background: rgba(91, 132, 238, 0.05); }
.qb-shell .bx-canvas .qb-inline:focus { background: rgba(207, 220, 255, 0.18); box-shadow: 0 0 0 2px rgba(91, 132, 238, 0.45); }

/* A picture carried in from the desktop: the photo it would land in lights up,
   and so does the drop zone in the panel. */
.qb-shell .bx-canvas .qb-file-over { outline: 3px solid var(--bx-accent, #5b84ee); outline-offset: 2px; }
.qb-shell .bx-canvas .qb-file-over .np-g-photo-frame { filter: brightness(1.08); }
.qb-shell [data-photo-drop].is-over { outline: 3px dashed var(--bx-accent, #5b84ee); outline-offset: 3px; background: rgba(91, 132, 238, 0.06); }

/* "Frame your photo": choose what part of the picture shows, before it's
   uploaded, in the shape of the frame it's going into. */
.qb-crop {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(45, 56, 73, 0.55);
}
.qb-crop-card {
  width: min(44rem, 100%); max-height: calc(100vh - 32px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 0.8rem; padding: 1.2rem;
  border: 2px solid var(--bx-line-strong); border-radius: 20px;
  background: var(--bx-panel); color: var(--bx-ink);
  box-shadow: 6px 6px 0 var(--bx-shadow);
}
.qb-crop-head h2 { margin: 0; font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; }
.qb-crop-head p { margin: 0.2rem 0 0; font-size: 0.82rem; color: var(--bx-ink-2); }
.qb-crop-stage { height: min(60vh, 30rem); background: #1b1b1b; border-radius: 12px; overflow: hidden; }
.qb-crop-stage img { display: block; max-width: 100%; }
.qb-crop-zoom { width: 100%; accent-color: var(--bx-accent, #5b84ee); }
.qb-crop-acts { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.qb-crop-gap { flex: 1; }

/* ── On a phone ────────────────────────────────────────────────────────────────
   The paper first. The toolbar is one line (back, the name, undo); everything
   else in it goes to a bar pinned along the bottom with checkout in it; the
   tools and the steps shrink to a line each; and the writing sheet comes up
   only part of the way, above that bar, with Done / Next pinned at its foot so
   the box you're typing in and the page it's going on are both in view. */
.qb-narrow-only { display: none; }
@media (max-width: 1024px) {
  .qb-shell { --qb-bar: calc(60px + env(safe-area-inset-bottom, 0px)); --qb-sheet: 44vh; }
  .qb-wide-only { display: none; }
  .qb-narrow-only { display: inline; }

  /* One line up top. */
  .qb-shell > .bx-toolbar { flex-wrap: nowrap; padding: 0.4rem 0.6rem; gap: 0.4rem; }
  .qb-shell > .bx-toolbar > .bx-toolbar-group:first-child { flex: 1 1 auto; flex-wrap: nowrap; min-width: 0; }
  .qb-shell > .bx-toolbar > .bx-toolbar-group:first-child > div { flex: 1 1 auto; min-width: 0; }
  .qb-shell > .bx-toolbar .bx-toolbar-sep { display: none; }
  .qb-shell > .bx-toolbar .bx-toolbar-label { display: none; }
  .qb-shell > .bx-toolbar .bx-toolbar-name { font-size: 1.05rem; padding: 0.2rem 0; }

  /* The rest of the toolbar, pinned to the bottom of the screen. */
  .qb-shell > .bx-toolbar > .bx-toolbar-group:last-child {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    flex-wrap: nowrap; justify-content: flex-end; gap: 0.5rem;
    min-height: var(--qb-bar); padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
    background: var(--bx-panel); border-top: 2px solid var(--bx-line-strong);
  }
  .qb-shell > .bx-toolbar > .bx-toolbar-group:last-child .bx-status {
    flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .qb-shell > .bx-toolbar .bx-btn-go { flex: 0 0 auto; padding: 0.55rem 1rem; font-size: 0.92rem; }
  .qb-shell > .bx-toolbar [data-action="quick-builder#devPdf"] { display: none; }

  /* The tools: one slim row of icons with their names beside them. */
  .qb-shell .bx-rail { padding: 0.15rem 0.4rem; gap: 0.2rem; }
  .qb-shell .bx-rail-btn { flex-direction: row; gap: 0.35rem; min-height: 40px; padding: 0.3rem 0.6rem; }

  /* The steps: the chips are the count, so the sentence under them goes. */
  .qb-shell .bx-guide-progress { display: none; }

  /* The writing sheet, part way up and clear of the bottom bar. */
  .qb-shell .bx-props { bottom: var(--qb-bar); max-height: var(--qb-sheet); box-shadow: 0 -3px 0 var(--bx-primary);
                        transform: translateY(calc(101% + var(--qb-bar))); }
  .qb-shell .bx-props.is-open { transform: none; }
  .qb-shell .bx-props:not(.is-open) { box-shadow: none; }
  .qb-shell .bx-props-head { padding-top: 0.45rem; padding-bottom: 0.45rem; }
  .qb-shell [data-quick-builder-target="properties"] { display: flex; flex-direction: column; }
  .qb-shell [data-focus-acts] {
    order: 99; position: sticky; bottom: 0; z-index: 2;
    margin: 0.6rem -0.85rem 0; padding: 0.5rem 0.85rem;
    background: var(--bx-panel); border-top: 2px solid var(--bx-line);
  }
  .qb-shell [data-focus-acts] .bx-prop-progress { display: none; }
  .qb-shell [data-focus-acts] .bx-prop-acts { margin: 0; }
  .qb-shell.has-sheet .bx-stage { padding-bottom: calc(var(--qb-sheet) + var(--qb-bar) + 1rem); }
  .qb-shell .bx-stage { padding-bottom: calc(var(--qb-bar) + 1rem); }
  .qb-shell .bx-stage-hint { display: none; }
  .qb-shell .bx-zoom-corner { bottom: calc(var(--qb-bar) + 0.6rem); }
  .qb-shell.has-sheet .bx-zoom-corner { display: none; }
}
@media (max-width: 1024px) {
  /* Writing a piece, the sheet's own title ("Text") only repeats what the
     piece's name under it says better. */
  .qb-shell .bx-props:has([data-focus-acts]) .bx-props-head { display: none; }
}

/* "Nearly there": what's still to do before checkout, each one a way back to it. */
.qb-check-lines { margin: 0.4rem 0 0.6rem; padding-left: 1.1rem; font-size: 0.9rem; line-height: 1.5; }
.qb-check-jumps { margin: 0; padding: 0.6rem 0.8rem; list-style: none; border: 2px solid var(--bx-line); border-radius: 12px; font-size: 0.86rem; line-height: 1.9; }
.qb-check-jumps span { color: var(--bx-ink-3); }

/* ── Simple, until you ask for the layout tools ────────────────────────────────
   A paper started from a design opens with only what makes it yours: the
   words, the photos and the steps. Everything that changes the design itself
   (the tool rail, the page tabs, the ＋ in each column, the Move/Remove bar over
   a piece) waits behind "Change the layout" in the toolbar. */
.qb-shell.qb-simple .bx-rail,
.qb-shell.qb-simple [data-quick-builder-target="pageBar"],
.qb-shell.qb-simple .bx-canvas .sb-slot-add,
.qb-shell.qb-simple .bx-float,
.qb-shell.qb-simple .qb-layout-only { display: none !important; }
.qb-shell.qb-simple .bx-canvas [data-sb-item] { cursor: pointer; }
/* With the rail gone its column goes too, so the paper takes the room. */
@media (min-width: 1025px) {
  .bx-shell.bx-rails.qb-simple > .bx-body { grid-template-columns: minmax(0, 1fr) var(--bx-props); }
}
.qb-layout-toggle[hidden] { display: none; }
.qb-layout-toggle { padding: 0.35rem 0.75rem; font-size: 0.82rem; white-space: nowrap; }
.qb-layout-toggle[aria-pressed="true"] { background: var(--bx-primary, #cfdcff); }

/* The steps are the one way through a guided paper, so all of them show: they
   wrap onto a second line rather than running off the edge of the stage. */
@media (min-width: 1025px) {
  .qb-shell .bx-guide-row { flex-wrap: wrap; overflow: visible; }
}

/* Words that are still the design's example: a faint highlighter, edit mode
   only. Gone the moment they're your own. */
.qb-shell .bx-canvas .qb-example { background: rgba(207, 220, 255, 0.22); box-shadow: 0 0 0 2px rgba(207, 220, 255, 0.22); border-radius: 2px; }
.qb-shell .bx-canvas.qb-focus .qb-example:not(.sb-selected) { background: transparent; box-shadow: none; }

/* "Make it yours": what's left, with nothing open. */
.qb-todo { text-align: left; }
.qb-todo .bx-btn-block { margin-top: 0.8rem; }
.qb-todo-head { margin: 1.1rem 0 0.35rem; font-family: var(--bx-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bx-ink-3); }
.qb-todo-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.3rem; }
.qb-todo-item {
  width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem;
  padding: 0.5rem 0.65rem; border: 2px solid var(--bx-line); border-radius: 10px; background: var(--bx-panel);
  font: inherit; font-size: 0.88rem; font-weight: 600; color: var(--bx-ink); text-align: left; cursor: pointer;
}
.qb-todo-item:hover { border-color: var(--bx-line-strong); background: rgba(207, 220, 255, 0.18); }
.qb-todo-item small { margin-left: auto; font-weight: 400; font-size: 0.74rem; color: var(--bx-ink-3); white-space: nowrap; }
.qb-todo-item { justify-content: flex-start; align-items: center; }
/* Each line: the tick, then the piece. The tick is an empty ring still to do
   and a filled one with a check when done; where it's a button it ticks the
   piece off as it is. */
.qb-todo-row { display: flex; align-items: center; gap: 0.45rem; }
.qb-todo-row .qb-todo-item { flex: 1 1 auto; min-width: 0; }
.qb-todo-tick {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; padding: 0; border: 2px solid var(--bx-line-strong); border-radius: 999px;
  background: var(--bx-panel); color: var(--bx-ink);
  font: inherit; font-style: normal; font-size: 0.8rem; font-weight: 800; line-height: 1;
}
button.qb-todo-tick { cursor: pointer; }
button.qb-todo-tick:hover { background: var(--bx-sel-soft, rgba(207, 220, 255, 0.4)); }
.qb-todo-row.is-done .qb-todo-item { border-color: transparent; background: none; color: var(--bx-ink-3); }
.qb-todo-row.is-done .qb-todo-item > span { text-decoration: line-through; text-decoration-thickness: 1px; }
.qb-todo-row.is-done .qb-todo-tick { border-color: var(--bx-primary); background: var(--bx-primary); color: var(--bx-on-primary); }
.qb-todo-meter { height: 6px; margin: 0 0 0.6rem; border-radius: 999px; background: var(--bx-line); overflow: hidden; }
.qb-todo-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--bx-primary); transition: width 0.25s ease-out; }

@media (max-width: 1024px) {
  /* Done / Next stay on top of whatever the form has in it (the icon picker
     on a timeline row used to sit over Done). */
  .qb-shell [data-focus-acts] { z-index: 30; }
  .qb-layout-toggle { padding: 0.35rem 0.6rem; }
}

/* A timeline row in the editor's narrow panel: the icon on its own line above
   the boxes, so each box gets the panel's whole width and its words show. */
.qb-shell .bx-props [data-rf-row] > .flex { flex-direction: column; align-items: stretch; }
.qb-shell .bx-props [data-rf-icon-control] { display: flex; align-items: center; gap: 0.5rem; }
.qb-shell .bx-props [data-rf-icon-control] .rf-row-label { margin: 0; }

/* ── When a page runs out of room ──────────────────────────────────────────
   A meter in the margin beside each open page fills as the page does: blue
   while there's room, amber from 90%, coral once something hangs off the
   bottom. It sits inside the scaled book, so its own sizes are divided by the
   book's scale to stay the same on screen. */
.qb-shell .qb-meter {
  --qb-s: var(--bx-book-scale, 1);
  position: absolute; top: 0; right: calc(-18px / var(--qb-s));
  width: calc(6px / var(--qb-s)); height: 297mm;
  border-radius: 999px; background: rgba(45, 56, 73, 0.1);
  z-index: 4;
}
.qb-shell .qb-meter.is-left { right: auto; left: calc(-18px / var(--qb-s)); }
.qb-shell .qb-meter-fill {
  position: absolute; left: 0; right: 0; top: 0; height: var(--qb-fill, 0%);
  border-radius: inherit; background: #8fc6f2;
  transition: height 0.35s ease, width 0.35s ease, background-color 0.2s;
}
.qb-shell .qb-meter.is-near .qb-meter-fill { background: #f0a73a; }
.qb-shell .qb-meter.is-over .qb-meter-fill { background: #e8725c; }
.qb-shell .qb-meter-label {
  position: absolute; top: 0; left: calc(100% + 5px / var(--qb-s));
  writing-mode: vertical-rl;
  font-family: var(--bx-font); font-size: calc(11px / var(--qb-s)); font-weight: 600; line-height: 1;
  color: var(--bx-ink-2, #5b6577); white-space: nowrap;
  opacity: 0; transition: opacity 0.2s;
}
.qb-shell .qb-meter.is-left .qb-meter-label { left: auto; right: calc(100% + 5px / var(--qb-s)); transform: rotate(180deg); }
.qb-shell .qb-meter:hover .qb-meter-label,
.qb-shell .qb-meter.is-near .qb-meter-label,
.qb-shell .qb-meter.is-over .qb-meter-label { opacity: 1; }
.qb-shell .qb-meter.is-near .qb-meter-label { color: #a86a0c; }
.qb-shell .qb-meter.is-over .qb-meter-label { color: #c2513b; }

/* A phone has no margin beside the page, so the meter runs along the top edge
   of the sheet instead, filling left to right. */
@media (max-width: 700px) {
  .qb-shell .qb-meter, .qb-shell .qb-meter.is-left {
    top: 0; left: 0; right: 0; width: auto; height: calc(4px / var(--qb-s)); border-radius: 0;
  }
  .qb-shell .qb-meter-fill { right: auto; bottom: 0; height: auto; width: var(--qb-fill, 0%); }
  .qb-shell .qb-meter-label { display: none; }
  .qb-fix.is-sheet .qb-fix-sub { display: none; }
}

/* The fix-it card: beside the piece that runs over, with the fixes that would
   make it fit. */
.qb-fix {
  position: absolute; z-index: 41;
  width: 15.5rem; padding: 0.85rem 0.85rem 0.75rem;
  border: 2px solid var(--bx-line-strong); border-radius: 16px;
  background: var(--bx-panel); color: var(--bx-ink);
  box-shadow: 4px 4px 0 var(--bx-shadow);
  font-family: var(--bx-font);
  animation: qb-fix-in 0.18s ease-out;
}
@keyframes qb-fix-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .qb-fix { animation: none; } .qb-shell .qb-meter-fill { transition: none; } }
.qb-fix-title { margin: 0 1.4rem 0.2rem 0; font-size: 0.86rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.qb-fix-sub { margin: 0 0 0.55rem; font-size: 0.72rem; line-height: 1.4; color: var(--bx-ink-3, #6b7487); }
.qb-fix-x {
  position: absolute; top: 0.45rem; right: 0.5rem;
  width: 1.6rem; height: 1.6rem; border: 0; border-radius: 999px;
  background: none; color: var(--bx-ink-3, #6b7487); font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.qb-fix-x:hover { background: var(--bx-accent-soft); color: var(--bx-ink); }
.qb-fix-list { display: flex; flex-direction: column; gap: 0.35rem; }
.qb-fix-btn {
  display: flex; align-items: center; gap: 0.5rem; width: 100%;
  padding: 0.5rem 0.6rem; border: 1.5px solid var(--bx-line); border-radius: 10px;
  background: var(--bx-panel); color: var(--bx-ink);
  font: inherit; font-size: 0.76rem; font-weight: 600; line-height: 1.25; text-align: left; cursor: pointer;
}
.qb-fix-btn:hover { border-color: var(--bx-accent); background: var(--bx-sel-soft); }
.qb-fix-btn:focus-visible, .qb-fix-x:focus-visible { outline: 3px solid var(--bx-ring); outline-offset: 1px; }
.qb-fix-btn.is-primary { border-color: var(--bx-line-strong); background: var(--bx-primary); color: var(--bx-on-primary); }
.qb-fix-ico { flex: 0 0 1.3rem; text-align: center; font-weight: 800; opacity: 0.8; }
.qb-fix-btn small { margin-left: auto; padding-left: 0.4rem; font-size: 0.66rem; font-weight: 600; color: var(--bx-ink-3, #6b7487); white-space: nowrap; }
.qb-fix-more { margin: 0.55rem 0 0; font-size: 0.7rem; line-height: 1.4; color: var(--bx-ink-3, #6b7487); }
/* On a phone, a sheet along the bottom, clear of the editor's bottom bar. */
.qb-fix.is-sheet {
  position: fixed; left: 12px; right: 12px; top: auto; width: auto;
  bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 55;
}

/* What a fix just did, with its own Undo. */
.qb-toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 70;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.9rem; max-width: calc(100vw - 32px);
  padding: 0.6rem 0.7rem 0.6rem 1rem; border-radius: 999px;
  background: #2d3849; color: #fff;
  font-family: var(--bx-font); font-size: 0.8rem; font-weight: 500;
  box-shadow: 0 10px 30px rgba(20, 30, 50, 0.25);
}
.qb-toast button {
  border: 0; border-radius: 999px; padding: 0.3rem 0.7rem;
  background: rgba(143, 198, 242, 0.22); color: #9fd2f7; font: inherit; font-weight: 700; cursor: pointer;
}
.qb-toast button:hover { background: rgba(143, 198, 242, 0.35); }
@media (max-width: 700px) {
  .qb-toast {
    left: 12px; right: 12px; transform: none; max-width: none; justify-content: space-between;
    border-radius: 14px; bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }
}
/* Pages that aren't open, drawn at full size out of sight to see how much room
   they have — so "Move it to page 3" is only offered when page 3 can take it. */
.qb-measure { position: absolute; left: -100000px; top: 0; width: max-content; visibility: hidden; pointer-events: none; }
.qb-measure .sb-slot-add { display: none !important; }