/* ── 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(31, 63, 209, 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(31, 63, 209, 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(18, 18, 18, 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(31, 63, 209, 0.05); }
.qb-shell .bx-canvas .qb-inline:focus { background: rgba(255, 212, 69, 0.18); box-shadow: 0 0 0 2px rgba(31, 63, 209, 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, #1f3fd1); 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, #1f3fd1); outline-offset: 3px; background: rgba(31, 63, 209, 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(18, 18, 18, 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, #1f3fd1); }
.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, #ffd445); }

/* 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(255, 212, 69, 0.22); box-shadow: 0 0 0 2px rgba(255, 212, 69, 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(255, 212, 69, 0.18); }
.qb-todo-item small { font-weight: 400; font-size: 0.74rem; color: var(--bx-ink-3); white-space: nowrap; }
.qb-todo-more { font-size: 0.8rem; color: var(--bx-ink-3); padding: 0.2rem 0.65rem; }

@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; }