/* BIZ-34 С4 (docs/spec/templates.ux.md 2): галерията (К1), пълният преглед (К2), листовете „Дизайн“ и „Украса“,
   проверката преди публикуване (К6) и „Покажи на близък“. Токените са от style.css :root и theme.css. Мострите са
   истинският рендер (invite.css / site.css / design.css), смален със zoom (CSSOM в planner-design.js). */

/* ---------- Диалогът (цял екран на телефон, широк лист на компютър) ---------- */
.pld-dlg {
  width: min(1180px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--cream);
  color: var(--ink);
  box-shadow: var(--shadow-pop);
}
.pld-dlg::backdrop {
  background: rgba(41, 39, 37, 0.45);
}
.pld-sheet {
  padding: 20px 24px 28px;
}
.pld-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.pld-head h2 {
  flex: 1;
  margin: 0;
  font: 500 24px/1.25 var(--font-display);
}
.pld-lead {
  margin: 0 0 12px;
  color: var(--ink-muted);
}
.pld-names {
  margin: 0 0 16px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--paper);
}
.pld-names-missing {
  border-color: var(--gold-line);
  background: var(--gold-soft);
}
.pld-sec {
  margin: 20px 0 10px;
  font: 700 12px/1.4 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.pld-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.pld-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  content-visibility: auto;
  contain-intrinsic-size: 260px 420px;
}
.pld-card-main {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--paper);
  overflow: hidden;
  cursor: pointer;
}
.pld-card-main:hover,
.pld-card-main:focus-visible {
  border-color: var(--gold);
}
.pld-thumb,
.pld-current-thumb {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  pointer-events: none;
  background: var(--paper-sunk);
}
.pld-thumb-in {
  transform-origin: 0 0;
}
.pld-thumb-error {
  display: block;
  padding: 24px 12px;
  font-size: 13px;
  color: var(--ink-muted);
  text-align: center;
}
.pld-card-meta {
  display: flex;
  /* VIS-W1-05: името и чипът – на една основа; точките на съчетанията – винаги на свой ред (еднаква височина). */
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.pld-card-meta strong {
  font: 500 17px/1.3 var(--font-display);
}
.pld-dots {
  display: flex;
  flex-basis: 100%;
  order: -1; /* веднага под мострата – на еднакво място във всяка карта, колкото и дълго да е името */
  gap: 2px;
  margin: -6px 0 -6px -12px; /* кръгчето (20 px в 44 px бутон) – на една линия с името */
}
.pld-dot {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.pld-dot span {
  display: block;
  width: 20px;
  height: 20px;
  border: 3px solid var(--paper);
  border-radius: 50%;
  outline: 1px solid var(--line-strong);
  background: var(--gold);
}
.pld-dot[aria-pressed='true'] span {
  outline: 2px solid var(--ink);
}
.pld-basics {
  margin-top: 20px;
}
.pld-basics summary {
  cursor: pointer;
  font-weight: 600;
  padding: 10px 0;
}

/* ---------- К2 ---------- */
.pld-k2 .pl-segment {
  margin: 8px 0 12px;
}
.pld-nav {
  display: flex;
  gap: 4px;
}
.pld-nav button {
  min-width: 44px;
  min-height: 44px;
}
.pld-stage {
  display: flex;
  justify-content: center;
  padding: 8px 0 16px;
}
.pld-phone {
  position: relative;
  width: min(390px, 100%);
  max-height: 62vh;
  overflow-y: auto;
  border: 10px solid var(--ink);
  border-radius: 32px;
  background: var(--paper);
}
.pld-doc {
  transform-origin: 0 0;
}
.pld-foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  max-width: 560px;
  margin: 0 auto;
}
.pld-combos,
.pld-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pld-choose {
  min-height: 48px;
  font-size: 16px;
}
.pld-sub {
  margin: 8px 0 4px;
  font-weight: 600;
}

/* ---------- К3 · Редакторът: разделите ---------- */
.pli-kinds {
  margin: 0 0 12px;
}
.pld-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 16px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--paper-sunk);
}
.pld-tabs [role='tab'] {
  min-height: 44px;
  min-width: 0;
  padding: 0 4px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  font-weight: 600;
}
.pld-tabs [aria-selected='true'] {
  background: var(--paper);
  box-shadow: 0 1px 3px rgba(41, 39, 37, 0.12);
}
.pld-h {
  margin: 20px 0 8px;
  font: 700 12px/1.4 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.pld-current {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--paper);
}
.pld-current > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.pld-current strong {
  font: 500 19px/1.3 var(--font-display);
}
.pld-common,
.pld-prev {
  margin: 8px 0;
  font-size: 14px;
  color: var(--ink-muted);
}
.pld-palettes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.pld-palette {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 44px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--paper);
  text-align: left;
}
.pld-palette[aria-pressed='true'] {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.pld-fonts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
.pld-blocks {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pld-blocks li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid var(--line);
}
.pld-toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  min-height: 44px;
}
.pld-toggle small {
  flex-basis: 100%;
}
.pld-more {
  margin-top: 20px;
}
.pld-more summary {
  cursor: pointer;
  min-height: 44px;
  font-weight: 600;
}
.pld-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-field);
  background: var(--gold-soft);
}
.pld-banner span {
  flex: 1;
}
.pld-saved {
  font-size: 13px;
  color: var(--ink-muted);
}
.pld-studio-link {
  margin-top: 16px;
}

/* Центърът на снимката */
.pld-focus-box {
  position: relative;
  max-width: 320px;
  cursor: crosshair;
}
.pld-focus-box img {
  display: block;
  width: 100%;
  border-radius: var(--radius-field);
}
.pld-focus-dot {
  position: absolute;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  padding: 0;
  border: 3px solid var(--paper);
  border-radius: 50%;
  background: rgba(41, 39, 37, 0.35);
  box-shadow: 0 0 0 1px var(--ink);
}

/* ---------- К6 / К7 / „Покажи на близък“ ---------- */
.pld-k6,
.pld-k7,
.pld-share {
  max-width: 640px;
  margin: 0 auto;
}
/* К6 (VIS-TM3-06): знакът и текстът на един ред; ✓ – мента, ! – злато (червеното е само за грешка 422); текстът винаги
   --ink; поправката – под текста, в неговата колона. */
.pld-k6 > h2 {
  margin: 4px 0 16px;
  font: 500 24px/1.25 var(--font-display);
}
.pld-checks {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pld-ck {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.pld-ck-icon {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font: 700 13px/1 var(--font-body, inherit);
}
.pld-ck-ok .pld-ck-icon {
  background: var(--mint);
  color: var(--success);
}
.pld-ck-warn .pld-ck-icon {
  border: 1px solid var(--gold-line);
  background: var(--gold-soft);
  color: var(--gold-ink);
}
.pld-ck-body p {
  margin: 2px 0 0;
  color: var(--ink);
}
.pld-ck-fix {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 6px;
}
.pld-ck-fix .pl-link-button {
  min-height: 44px;
  margin: 0;
}
.pld-inline {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  max-width: 240px;
  margin: 0;
  font-size: 13px;
  color: var(--ink-muted);
}
.pld-inline input {
  width: 100%;
  margin: 0;
}
.pld-sync {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0 0;
}
.pld-k6 .pld-foot {
  position: sticky;
  bottom: 0;
  max-width: none;
  padding: 12px 0 calc(4px + env(safe-area-inset-bottom));
  background: var(--cream);
}

/* К7 (VIS-TM3-07): затвореният плик на дизайна, печатът „пада“ веднъж (≤ 1 s); всичко в средата, ритъм 8/16/24. */
.pld-k7 {
  text-align: center;
}
.pld-k7 > h2 {
  margin: 24px 0 8px;
  font: 500 26px/1.25 var(--font-display);
}
.pld-k7 > p {
  max-width: 420px;
  margin: 0 auto 24px;
}
.pld-k7-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 360px;
  margin: 0 auto;
}
.pld-k7-actions .pld-choose {
  width: 100%;
}
.pld-k7-actions > * {
  align-self: center;
}
/* VIS-TM3-38: на телефон блокът е по средата на височината (без празнина отдолу). */
@media (max-width: 900px) {
  .pld-k7 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100svh - 40px);
  }
}
.pld-pill {
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--gold-ink);
}
.pld-k7-env {
  position: relative;
  display: block;
  width: min(280px, 72vw);
  aspect-ratio: 1.42;
  margin: 16px auto 0;
}
.pld-k7-mark {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 16px auto 0;
  border-radius: 50%;
  background: var(--gold-soft);
  color: var(--gold-ink);
  font: 600 32px/1 var(--font-display);
}
.pld-k7-env .dz-env-seal {
  animation: pld-seal-drop 600ms cubic-bezier(0.2, 0.7, 0.2, 1) 250ms both;
}
@keyframes pld-seal-drop {
  from {
    opacity: 0;
    transform: translateY(-24px) scale(1.15);
  }
}

/* „Да сменим ли и сайта?“, конфликтът (2.4.6), отделният дизайн, отбелязаното поле (422) */
.pld-ask {
  max-width: 480px;
  margin: 0 auto;
}
.pld-ask h2 {
  margin: 0 0 8px;
  font: 500 22px/1.3 var(--font-display);
}
.pld-ask-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}
.pld-ask-actions button {
  min-height: 48px;
}
.pld-differs {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--ink-muted);
}
.pld-invalid {
  outline: 2px solid var(--danger);
  outline-offset: 4px;
  border-radius: var(--radius-field);
}

/* К2 (VIS-TM3-05): „Избери този дизайн“ винаги видим – залепен долу; описанието и съчетанията са над него. */
.pld-k2 .pld-cta {
  position: sticky;
  bottom: 0;
  z-index: 6;
  max-width: 560px;
  margin: 12px auto 0;
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
  background: var(--cream);
  box-shadow: 0 -1px 0 var(--line);
}
.pld-k2 .pld-cta .pld-choose {
  width: 100%;
}
.pld-after {
  margin: 16px 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--paper);
}
.pld-after h3 {
  margin: 0 0 6px;
  font-size: 15px;
}
.pld-qr {
  max-width: 220px;
  margin: 8px auto 12px;
}
.pld-share input {
  width: 100%;
  margin-bottom: 10px;
}

/* ---------- Телефон (390) ---------- */
@media (max-width: 900px) {
  .pld-dlg {
    width: 100vw;
    max-width: 100vw;
    height: 100%;
    max-height: 100%;
    margin: 0;
    border-radius: 0;
  }
  .pld-sheet {
    padding: 14px 16px 24px;
  }
  .pld-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .pld-tabs [role='tab'] {
    font-size: 14px;
  }
  .pld-phone {
    border-width: 6px;
    border-radius: 26px;
  }
  .pld-k2 .pld-cta {
    padding-inline: 16px;
    margin-inline: -16px;
  }
}

/* ---------- К3 на телефон (VIS-TM3-04, UX 2.4.1): режим „фокус“ ----------
   Прегледът е отгоре и залепен (≈ 40 % от екрана), свива се до 160 px при превъртане на разделите (pldPvScroll);
   разделите са залепени под него; долу – само „Преглед и публикуване“; долната лента на приложението е скрита. */
@media (max-width: 900px) {
  body.pld-focus #lux-tabbar {
    display: none;
  }
  body.pld-focus.has-lux-tabbar {
    padding-bottom: 0;
  }
  body.pld-focus.has-lux-tabbar .pli-savebar {
    bottom: 0;
  }
  body.pld-focus #pl-body > .pl-page-head {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
  }
  body.pld-focus #pl-body > .pl-page-head .pl-eyebrow {
    display: none;
  }
  body.pld-focus #pl-body > .pl-page-head > div:first-child {
    min-width: 0;
  }
  body.pld-focus #pl-body > .pl-page-head .pl-title {
    margin: 0;
    font-size: 20px;
  }
  body.pld-focus #pl-body > .pl-page-head .pl-actions {
    flex-wrap: wrap;
    gap: 6px;
    margin-left: auto;
  }
  body.pld-focus #pl-body > .pl-page-head .pl-actions button {
    min-height: 40px;
    padding: 0 12px;
    font-size: 13px;
    white-space: nowrap;
  }
  body.pld-focus #pl-body > .pl-page-head .pld-saved {
    font-size: 12px;
    white-space: nowrap;
  }
  body.pld-focus #pl-body > .pl-page-head .pl-chip {
    display: none;
  }
  /* VIS-TM3-37: лентата – на два реда (текстът цял, бутонът под него), не отрязана. */
  body.pld-focus #pl-body > .pld-banner {
    margin-bottom: 8px;
    padding: 8px 12px;
    font-size: 13px;
  }
  body.pld-focus #pl-body > .pld-banner span {
    flex-basis: 100%;
  }
  /* VIS-TM3-36: в режим „фокус“ менюто на раздела не е залепено – прегледът е горе, без да е под него. */
  body.pld-focus #lux-subnav {
    position: static;
  }
  .pld-editor {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .pld-editor > * {
    min-width: 0;
  }
  .pld-editor .pl-invite-preview-wrap {
    order: -1;
    position: sticky;
    top: 0;
    z-index: 4;
    height: var(--pld-pv, 40svh);
    margin: 0 0 8px;
    padding: 8px 0;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    align-items: stretch;
    transition: height 240ms ease;
  }
  .pld-editor.pld-pv-small {
    --pld-pv: 160px;
  }
  .pld-editor .pl-device-pick {
    display: none;
  }
  .pld-editor .pl-device,
  .pld-editor .pl-device-phone {
    width: 100%;
    max-width: none;
    height: 100%;
    aspect-ratio: auto;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-field);
    background: var(--paper);
    box-shadow: none;
  }
  .pld-editor .pl-device-phone::before,
  .pld-editor .pl-device-phone::after,
  .pld-editor .pl-device-hw {
    display: none;
  }
  .pld-editor .pl-device-phone .pl-device-screen {
    border-radius: var(--radius-field);
  }
  .pld-editor .pld-undo {
    position: absolute;
    right: 8px;
    bottom: 16px;
    z-index: 6;
    margin: 0;
  }
  /* При свит преглед „↶ Отмени“ не закрива името (визия, кръг 3) – скрито, докато прегледът е свит. */
  .pld-editor.pld-pv-small .pld-undo {
    display: none;
  }
  .pld-editor .pld-undo button {
    background: var(--paper);
    box-shadow: 0 2px 8px rgba(41, 39, 37, 0.18);
  }
  .pld-editor .pld-tabs {
    position: sticky;
    top: var(--pld-pv, 40svh);
    z-index: 3;
    margin: 0 0 8px;
    padding: 0;
    background: var(--paper);
    /* плътно и над лентата – съдържанието отдолу не наднича (VIS-TM3-36) */
    box-shadow: 0 -16px 0 var(--paper), 0 1px 0 var(--line);
    transition: top 240ms ease;
  }
}
/* QA-TM3-02: „Преглед“ на цял екран (pli-full) е над режима „фокус“ – без височината на залепения преглед. */
@media (max-width: 900px) {
  .pld-editor.pli-full .pl-invite-preview-wrap {
    top: 0;
    height: auto;
    margin: 0;
    padding: 0 12px calc(16px + env(safe-area-inset-bottom));
    border-bottom: 0;
    transition: none;
  }
  .pld-editor.pli-full .pl-device,
  .pld-editor.pli-full .pl-device-phone {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    margin: 0;
  }
  .pld-editor.pli-full .pld-undo {
    display: none;
  }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .pld-editor .pl-invite-preview-wrap,
  .pld-editor .pld-tabs {
    transition: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pld-card-main,
  .pld-tabs [role='tab'] {
    transition: none;
  }
  .pld-k7-env .dz-env-seal {
    animation: none;
  }
}

/* Отмени / Повтори – хапче над прегледа (2.4.6); картата „Вашият дизайн“ в „Събитието → Дизайн“ */
.pld-undo {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  min-height: 0;
  margin-bottom: 8px;
}
.pld-undo button {
  min-height: 44px;
  border-radius: var(--radius-pill);
}
.pld-style-card {
  margin-bottom: 20px;
}
.pld-style-card .pld-current {
  max-width: 560px;
}

/* С5: пликът в прегледа на редактора е в екрана на устройството. */
.pld-editor .pl-device-screen {
  position: relative;
}

/* Превключвателите и изборите в листовете – в ред (темата прави label колона). */
.pld-editor .pld-toggle,
#pls-design .pld-toggle {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 4px 10px;
}
.pld-toggle input {
  width: auto;
  min-height: 0;
  margin: 0;
}
.pld-music-up .check,
.pld-blocks .check {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}
.pld-music-up .pli-drop {
  margin-top: 10px;
}
.pld-music-note {
  margin: 6px 0;
  font-size: 13px;
  color: var(--ink-muted);
}
/* QA-TM3-04: партньорът – дизайнът и мелодията само за четене */
.pld-locked {
  opacity: 0.6;
}
.pld-partner-note {
  margin: 0 0 12px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--cream);
  color: var(--ink-muted);
  font-size: 13px;
}
/* QA-TM3-07: целите за докосване ≥ 44 px (затваряне на листовете, „Обратно към поканата“ в К7). .pl-link-button е с
   min-height: 0 !important (planner.css) – тук зоната трябва да е 44 px, както в QA BUG-07. */
.pld-head .pl-link-button,
.pld-k7-actions .pl-link-button,
.pld-banner .pl-link-button {
  display: inline-flex;
  align-items: center;
  min-height: 44px !important;
  min-width: 44px;
}