/* Wall Quotes Design Center editor. Everything is scoped under #wqdc-app. */

#wqdc-app {
  --wqdc-ink: #1d2327;
  --wqdc-muted: #5c6670;
  --wqdc-line: #d5d9de;
  --wqdc-panel: #ffffff;
  --wqdc-stage: #e9ebee;
  --wqdc-accent: #1a73e8;
  --wqdc-radius: 10px;
  --wqdc-touch: 44px;

  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "topbar"
    "stage"
    "tools";
  /* Break out of the theme's content width: up to 1280px, 16px gutters on small
     screens, centered on the parent. --wqdc-sb is the scrollbar width, set by the
     editor script, so the page never scrolls sideways. If the parent is already
     wider than the app, the margin is simply positive and the app stays centered. */
  --wqdc-w: min(1280px, calc(100vw - 32px - var(--wqdc-sb, 0px)));
  width: var(--wqdc-w);
  margin-inline: calc(50% - var(--wqdc-w) / 2);
  color: var(--wqdc-ink);
  background: var(--wqdc-panel);
  border: 1px solid var(--wqdc-line);
  border-radius: var(--wqdc-radius);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  /* clip, not hidden: hidden makes #wqdc-app a scroll container and the sticky top
     bar would stick to it instead of the page. Old browsers keep hidden. */
  overflow: hidden;
  overflow: clip;
}

/* Block themes cap the shortcode's width and force auto margins with
   .is-layout-constrained > :where(...). The id beats that rule; !important is
   needed because the theme's margins are !important too. */
#wqdc-app.wqdc-app {
  max-width: none !important;
  margin-inline: calc(50% - var(--wqdc-w) / 2) !important;
}

#wqdc-app *,
#wqdc-app *::before,
#wqdc-app *::after {
  box-sizing: border-box;
}

#wqdc-app button,
#wqdc-app select,
#wqdc-app input,
#wqdc-app textarea {
  font: inherit;
  font-size: 16px; /* 16px keeps iOS from zooming into fields */
  color: inherit;
}

#wqdc-app button,
#wqdc-app select,
#wqdc-app input[type="text"],
#wqdc-app input[type="number"] {
  min-height: var(--wqdc-touch);
}

#wqdc-app button {
  min-width: var(--wqdc-touch);
  padding: 0 16px;
  border: 1px solid var(--wqdc-line);
  border-radius: 8px;
  background: var(--wqdc-panel);
  cursor: pointer;
  touch-action: manipulation;
}

#wqdc-app button:focus-visible,
#wqdc-app a:focus-visible,
#wqdc-app select:focus-visible,
#wqdc-app input:focus-visible,
#wqdc-app textarea:focus-visible {
  outline: 3px solid var(--wqdc-accent);
  outline-offset: 2px;
}

#wqdc-app a {
  display: inline-block;
  padding: 10px 0; /* tall enough to tap */
  color: var(--wqdc-accent);
}

/* Top bar: final size, price and Add to Cart. Sticks to the top of the page while
   it scrolls. A theme with a fixed header can set --wqdc-sticky-top on #wqdc-app. */
#wqdc-topbar {
  grid-area: topbar;
  position: -webkit-sticky;
  position: sticky;
  top: var(--wqdc-sticky-top, 0px);
  z-index: 5;
  min-height: 56px;
  padding: 8px 12px;
  background: var(--wqdc-panel);
  border-bottom: 1px solid var(--wqdc-line);
}

#wqdc-app .wqdc-topbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 16px;
}

#wqdc-app .wqdc-size {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  flex-wrap: nowrap;
}

#wqdc-app .wqdc-size-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wqdc-muted);
}

#wqdc-app .wqdc-size > label {
  align-self: center;
  margin-right: 2px;
}

#wqdc-app .wqdc-width {
  width: 5.5em;
  padding: 0 10px;
  border: 1px solid var(--wqdc-line);
  border-radius: 8px;
  background: var(--wqdc-panel);
  text-align: right;
}

#wqdc-app .wqdc-width[aria-invalid="true"] {
  border-color: #c62828;
  box-shadow: inset 0 0 0 1px #c62828;
}

#wqdc-app .wqdc-unit,
#wqdc-app .wqdc-times {
  align-self: center;
  color: var(--wqdc-muted);
}

#wqdc-app .wqdc-height,
#wqdc-app .wqdc-price {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: var(--wqdc-touch);
}

#wqdc-app .wqdc-height-value {
  font-weight: 600;
  white-space: nowrap;
}

#wqdc-app .wqdc-price-value {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

#wqdc-app .wqdc-primary.wqdc-add {
  width: auto;
  margin-left: auto;
  padding: 0 24px;
}

#wqdc-app .wqdc-size-msg {
  margin: 6px 0 0;
  font-size: 14px;
  color: #8a1f11;
}

#wqdc-app .wqdc-size-msg:empty {
  display: none;
}

/* Canvas stage. */
#wqdc-app .wqdc-stage {
  grid-area: stage;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--wqdc-stage);
}

#wqdc-canvas-host {
  position: relative;
  flex: 1 1 auto;
  min-height: 300px;
  height: 50vh;
  overflow: hidden;
  touch-action: none;
}

/* The canvas lives in an absolutely placed layer so its size never feeds back into
   the host's size, which would make the resize observer loop. */
#wqdc-app .wqdc-canvas-surface {
  position: absolute;
  inset: 0;
}

#wqdc-app .wqdc-outlink {
  margin: 0;
  padding: 0 12px 4px;
  text-align: center;
  background: var(--wqdc-panel);
  border-top: 1px solid var(--wqdc-line);
}

/* Tools: bottom sheet on phones. */
#wqdc-tools {
  grid-area: tools;
  max-height: 45vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px;
  background: var(--wqdc-panel);
  border-top: 1px solid var(--wqdc-line);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
}

#wqdc-app .wqdc-unavailable {
  padding: 24px 16px;
  text-align: center;
}

/* Tools panel (Task 10). */
#wqdc-app .wqdc-section {
  padding: 12px 0;
  border-bottom: 1px solid var(--wqdc-line);
}

#wqdc-app .wqdc-section:last-child {
  border-bottom: 0;
}

#wqdc-app .wqdc-heading {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wqdc-muted);
}

#wqdc-app .wqdc-label {
  display: block;
  margin: 10px 0 6px;
  font-size: 14px;
  color: var(--wqdc-muted);
}

#wqdc-app .wqdc-hint {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--wqdc-muted);
}

#wqdc-app .wqdc-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

#wqdc-app .wqdc-alerts:empty,
#wqdc-app .wqdc-status:empty {
  display: none;
}

#wqdc-app .wqdc-alerts p,
#wqdc-app .wqdc-status {
  margin: 0 0 8px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
}

#wqdc-app .wqdc-alerts p {
  color: #8a1f11;
  background: #fdecea;
}

/* The latest message (for example the 30 item limit) stays in view while the panel scrolls. */
#wqdc-app .wqdc-status {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--wqdc-ink);
  background: #fff6d6;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

#wqdc-app button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#wqdc-app button[aria-pressed="true"] {
  border-color: var(--wqdc-accent);
  box-shadow: inset 0 0 0 2px var(--wqdc-accent);
}

#wqdc-app .wqdc-primary {
  width: 100%;
  color: #ffffff;
  background: var(--wqdc-accent);
  border-color: var(--wqdc-accent);
  font-weight: 600;
}

#wqdc-app .wqdc-textarea {
  display: block;
  width: 100%;
  min-height: 88px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--wqdc-line);
  border-radius: 8px;
  resize: vertical;
  background: var(--wqdc-panel);
}

#wqdc-app .wqdc-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

#wqdc-app .wqdc-align button {
  flex: 1 1 0;
  padding: 0 8px;
}

#wqdc-app .wqdc-fonts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
}

#wqdc-app .wqdc-font {
  width: 100%;
  text-align: left;
  font-size: 22px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#wqdc-app .wqdc-embs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
}

#wqdc-app .wqdc-emb {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 88px;
  padding: 8px;
  font-size: 12px;
}

#wqdc-app .wqdc-emb img {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
  pointer-events: none;
}

#wqdc-app .wqdc-emb span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#wqdc-app .wqdc-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 8px;
}

#wqdc-app .wqdc-swatch {
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 50%;
}

#wqdc-app .wqdc-swatch[aria-pressed="true"] {
  box-shadow: 0 0 0 3px var(--wqdc-panel), 0 0 0 5px var(--wqdc-accent);
}

#wqdc-app .wqdc-color-name {
  margin: 8px 0 0;
}

#wqdc-app .wqdc-wall {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 0;
  padding: 0 10px;
}

#wqdc-app .wqdc-chip {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 4px;
}

#wqdc-app .wqdc-arrange {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#wqdc-app .wqdc-arrange button {
  padding: 0 8px;
}

/* The canvas takes keyboard focus so Delete works; show where focus is. */
#wqdc-app .canvas-container:focus {
  outline: none;
}

#wqdc-app .canvas-container:focus-visible {
  outline: 3px solid var(--wqdc-accent);
  outline-offset: -3px;
}

/* Summary before the cart: a native modal dialog, in the top layer. */
#wqdc-app .wqdc-summary {
  width: min(560px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px;
  color: var(--wqdc-ink);
  background: var(--wqdc-panel);
  border: 0;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

#wqdc-app .wqdc-summary::backdrop {
  background: rgba(20, 24, 28, 0.55);
}

#wqdc-app .wqdc-summary-title {
  margin: 0 0 4px;
  font-size: 22px;
  line-height: 1.25;
}

#wqdc-app .wqdc-summary-title:focus {
  outline: none;
}

#wqdc-app .wqdc-summary-figure {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  margin: 12px 0;
  padding: 8px;
  background: #e5e5e5;
  border-radius: 8px;
}

#wqdc-app .wqdc-summary-figure img {
  display: block;
  max-width: 100%;
  max-height: 40vh;
  height: auto;
}

#wqdc-app .wqdc-summary-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px 16px;
  margin: 0 0 12px;
}

#wqdc-app .wqdc-summary-fact dt {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wqdc-muted);
}

#wqdc-app .wqdc-summary-fact dd {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

#wqdc-app .wqdc-summary-problems:empty {
  display: none;
}

#wqdc-app .wqdc-summary-problems p,
#wqdc-app .wqdc-summary-error:not(:empty) {
  margin: 0 0 8px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 15px;
  color: #8a1f11;
  background: #fdecea;
}

#wqdc-app .wqdc-summary-error:empty,
#wqdc-app .wqdc-summary-status:empty {
  display: none;
}

#wqdc-app .wqdc-summary-texts {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

#wqdc-app .wqdc-summary-text {
  margin: 0 0 8px;
  padding: 10px 12px;
  border: 1px solid var(--wqdc-line);
  border-radius: 8px;
}

#wqdc-app .wqdc-summary-text.wqdc-has-problem {
  border-color: #c62828;
  box-shadow: inset 0 0 0 1px #c62828;
}

#wqdc-app .wqdc-summary-words {
  margin: 4px 0 0;
  font-size: 26px;
  line-height: 1.3;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

#wqdc-app .wqdc-summary-item-problem {
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: #8a1f11;
}

#wqdc-app .wqdc-summary-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 16px 0 8px;
  padding: 12px;
  background: #fff6d6;
  border-radius: 8px;
}

#wqdc-app .wqdc-summary-check input {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin: 8px;
  accent-color: var(--wqdc-accent);
}

#wqdc-app .wqdc-summary-check label {
  flex: 1 1 auto;
  min-height: var(--wqdc-touch);
  padding: 8px 0;
  font-weight: 600;
  cursor: pointer;
}

#wqdc-app .wqdc-summary-status {
  margin: 0 0 8px;
  font-size: 15px;
  color: var(--wqdc-muted);
}

#wqdc-app .wqdc-summary-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 12px;
}

#wqdc-app .wqdc-summary-actions button {
  flex: 1 1 0;
  max-width: 220px;
}

#wqdc-app .wqdc-summary-actions .wqdc-primary {
  width: auto;
}

/* Tablets in landscape and computers: tools on the left, canvas in the middle. */
@media (min-width: 768px) {
  #wqdc-app {
    grid-template-columns: 320px minmax(0, 1fr);
    grid-template-rows: auto minmax(560px, calc(100vh - 160px));
    grid-template-areas:
      "topbar topbar"
      "tools  stage";
  }

  #wqdc-canvas-host {
    height: auto;
    min-height: 0;
  }

  #wqdc-tools {
    max-height: none;
    border-top: 0;
    border-right: 1px solid var(--wqdc-line);
    border-radius: 0;
    box-shadow: none;
  }
}

/* Computers: a slimmer tools column and a taller canvas, now that the app is wide. */
@media (min-width: 1024px) {
  #wqdc-app {
    grid-template-columns: 300px minmax(0, 1fr);
    grid-template-rows: auto minmax(600px, calc(100vh - 160px));
  }
}