/* Brand your photos (js/tools/brand-photo.js): the brand form, the frames, the photo cards and the bar at the bottom of a
   phone. Loaded when the tool opens, and the first screen waits for it, so nothing here moves a screen after it is drawn.
   Colours and sizes come from the tokens in app.css, so the text-size button works here too. */

/* ---------- step 1: your brand ---------- */
.bp-form { display: grid; gap: 22px; }
.bp-sec { display: grid; gap: 12px; padding: 18px 16px; border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.bp-sec h3 { font-size: 1.2rem; }
.bp-status { min-height: 1.4em; font-weight: 700; }
.bp-status:empty { display: none; }
.bp-progress { width: 100%; height: .9rem; accent-color: var(--brand-2); }

/* the frames */
.bp-frames { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.bp-frame { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 12px; border: 2px solid var(--line); border-radius: 14px; background: var(--surface); }
.bp-frame.bad { border-color: var(--bad-line); background: var(--bad-soft); }
.bp-frame-box { display: grid; place-items: center; width: 6.5rem; min-height: 6.5rem; padding: 4px; border-radius: 10px; background: var(--checker); }
.bp-frame-pic { display: block; max-width: 100%; height: auto; }
.bp-frame-text { display: grid; gap: 6px; min-width: 0; }
.bp-ok { color: var(--ok); font-weight: 700; font-size: .95rem; }
.bp-warn { color: var(--bad); font-weight: 700; }
.bp-fix { display: grid; gap: 10px; }
.bp-fix-pic { width: 100%; max-width: 16rem; height: auto; border-radius: 8px; box-shadow: 0 0 0 1px var(--line-2); }
.bp-fix-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.bp-fix-btns .btn { flex: 1 1 8rem; }
/* A phone: the warning and its buttons take the whole width under the picture. */
@media (max-width: 520px) {
  .bp-frame { grid-template-columns: 5rem minmax(0, 1fr) auto; }
  .bp-frame-box { width: 5rem; min-height: 5rem; }
  .bp-frame.bad .bp-frame-text { grid-column: 1 / -1; grid-row: 2; }
}

/* the colour */
.bp-colours { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bp-swatch { position: relative; width: 48px; height: 48px; border: 3px solid var(--surface); border-radius: 50%; box-shadow: 0 0 0 2px var(--line-2); cursor: pointer; }
.bp-swatch[aria-checked="true"] { box-shadow: 0 0 0 3px var(--ink); }
.bp-swatch[aria-checked="true"]::after { content: "✓"; position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: var(--surface); color: var(--ink); font-size: .9rem; font-weight: 700; }
.bp-other { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 12px 0 6px; border: 2px solid var(--line-2); border-radius: 12px; background: var(--surface); font-weight: 700; cursor: pointer; }
.bp-other input { width: 38px; height: 38px; padding: 0; border: 0; background: none; cursor: pointer; }

/* the items */
.bp-currency-row { max-width: 12rem; }
.bp-items { display: grid; gap: 10px; }
.bp-items:empty { display: none; }
.bp-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(5rem, 30%) 48px; align-items: center; gap: 8px; }

/* no design yet: the simple layout */
.bp-layout summary { font-size: 1.05rem; }
.bp-logo { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; gap: 14px; }
.bp-logo-box { display: grid; place-items: center; width: 7.5rem; height: 7.5rem; padding: 6px; overflow: hidden; border: 2px solid var(--line); border-radius: 14px; background: var(--checker); }
.bp-logo-box canvas { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.bp-logo-empty { color: var(--muted); font-size: .9rem; text-align: center; }
.bp-logo-btns { display: grid; gap: 8px; justify-items: start; }
.bp-logo-btns .btn { width: 100%; }
.bp-looks .choice { min-height: 104px; padding-top: 10px; padding-bottom: 10px; }
.bp-looks .choice-icon, .bp-designs .choice-icon { font-size: 0; }
.bp-look-pic { width: 88px; height: 88px; border-radius: 8px; box-shadow: 0 0 0 1px var(--line); }
.bp-figure { display: grid; justify-items: center; gap: 6px; margin: 0; }
.bp-preview { width: min(100%, 20rem); height: auto; border-radius: 10px; box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.bp-save { display: grid; gap: 10px; }
.bp-confirm { display: grid; gap: 10px; padding: 14px; border: 2px solid var(--bad-line); border-radius: 14px; background: var(--bad-soft); }
.bp-confirm-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.bp-confirm-btns .btn { flex: 1 1 9rem; }

/* ---------- steps 2 and 3: the brand at the top ---------- */
.bp-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.bp-bar-pic { flex: none; width: auto; max-width: 5rem; height: auto; max-height: 3rem; border-radius: 6px; background: var(--checker); }
.bp-bar-text { display: grid; flex: 1; min-width: 0; }
.bp-bar-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-bar-text span { color: var(--muted); font-size: .88rem; }
.bp-bar .btn { flex: none; }
.bp-or { margin: 2px 0; }
.bp-camera .btn svg { flex: none; }
.bp-back { margin-top: 14px; }

/* ---------- step 3: the controls ---------- */
.bp-controls { display: grid; gap: 16px; padding: 14px; border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.bp-controls .choices.small .choice { flex: 1 1 8rem; min-height: 60px; padding: 8px 40px 8px 12px; }
.bp-controls .choices.bp-designs .choice { flex-basis: 12rem; }
/* The seven sizes: four to a row on a laptop, two on a phone, so their words are not squeezed. */
.bp-controls .choices.bp-sizes .choice { flex-basis: 11rem; }
@media (max-width: 520px) { .bp-controls .choices.bp-sizes .choice { flex-basis: 8rem; } }
.bp-designs .choice { grid-template-columns: auto 1fr; }
.bp-designs .choice-icon canvas { width: 3.4rem; height: auto; max-height: 4.4rem; border-radius: 4px; background: var(--checker); }
.bp-framebox, .bp-layoutbox { display: grid; gap: 14px; }
.bp-store { display: grid; gap: 10px; }
.bp-go { display: grid; gap: 8px; }
.bp-go .file-name { margin: 0; }

/* the photos */
.bp-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 16px 0 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .bp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bp-card { display: grid; align-content: start; gap: 12px; min-width: 0; padding: 12px; border: 2px solid var(--line); border-radius: 14px; background: var(--surface); }
.bp-shot { position: relative; display: grid; place-items: center; overflow: hidden; border-radius: 10px; background: var(--surface-2); }
.bp-pic { width: 100%; height: auto; max-height: 30rem; object-fit: contain; }
.bp-busy { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-items: center; padding: 16px; background: rgba(255, 255, 255, .78); color: var(--ink); font-weight: 700; text-align: center; }
.bp-card-body { display: grid; gap: 10px; min-width: 0; }
.bp-card-title { font-size: 1.1rem; }
.bp-card-note { color: var(--bad); font-size: .92rem; font-weight: 700; }
.bp-card-note:empty { display: none; }
.bp-card-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.bp-card-btns .btn { flex: 1 1 auto; padding: 0 12px; }
.bp-card-btns .icon-btn { flex: none; width: 56px; height: 56px; }
.bp-editor { display: grid; gap: 10px; }
.bp-spots { display: grid; grid-template-columns: repeat(3, 52px); gap: 6px; }
.bp-spot { width: 52px; height: 52px; border: 2px solid var(--line-2); border-radius: 10px; background: var(--surface); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.bp-spot[aria-checked="true"] { border-color: var(--brand-2); background: var(--brand-2); color: #fff; }
@media (forced-colors: active) { .bp-spot[aria-checked="true"], .bp-swatch[aria-checked="true"] { forced-color-adjust: none; outline: 3px solid Highlight; } }
.bp-more { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.bp-more .btn { flex: 1 1 12rem; }

/* A phone: a second Download button stays at the bottom of the screen while the one above is out of view. It always keeps
   its room at the end of the screen and only turns visible or not, so nothing moves when it does. */
.bp-dock { display: none; }
@media (max-width: 759px) {
  .bp-dock { position: sticky; bottom: 0; z-index: 5; display: block; margin: 0 -16px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--bg); box-shadow: 0 -6px 18px rgba(11, 18, 32, .08); }
  .bp-dock.off { visibility: hidden; }
  html:has(.bp-dock:not(.off)) { scroll-padding-bottom: 104px; }
  html:has(.bp-dock:not(.off)) .toast { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}