/* =====================================================================
   Guest trial editor — adds a dismissible upsell banner row and the
   empty "drop a photo" state on top of the shared editor.css/photo.css shell.
   ===================================================================== */
.editor.pe.try-shell {
  grid-template-rows: auto 54px 1fr;
  grid-template-areas: "banner banner banner" "top top top" "rail stage panel";
}
.editor.pe.try-shell.no-banner {
  grid-template-rows: 54px 1fr;
  grid-template-areas: "top top top" "rail stage panel";
}

.try-banner {
  grid-area: banner;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--accent-soft); color: var(--text);
  border-bottom: 1px solid var(--border);
  font-size: .85rem;
}
.try-banner > span:first-child { color: var(--accent); flex: none; }
.try-banner > span:nth-child(2) { flex: 1; min-width: 200px; }
.try-banner .btn { flex: none; }

.try-drop {
  position: absolute; inset: 24px;
  display: grid; place-items: center;
  border: 2px dashed var(--border-strong);
  border-radius: var(--r-xl);
  transition: border-color var(--t-med), background var(--t-med);
}
.try-drop .empty { max-width: 380px; }
.ed-top .ed-back { flex: none; width: 40px; height: 40px; margin-right: -4px; }
.try-signin-icon { display: none; }

/* Phones: the banner already offers "Create free account"; Sign in and Download become icons. */
@media (max-width: 600px) {
  .try-header-signup { display: none; }
  .ed-top .try-signin { width: 36px; padding: 0; }
  .try-signin-icon { display: inline-flex; }
  .try-signin-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ed-top [data-cmd="download"] > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ed-top [data-cmd="download"] { width: 40px; padding: 0; }
  .try-shell .ed-top .ed-home { width: 36px; }
  .try-shell .pe-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* keeps the H1 for screen readers */
}
/* Semantic H1/H2 on the try page, sized like the original title and empty-state heading. */
.pe-title .pe-heading { margin: 0; font-family: var(--font-ui); font-size: .92rem; font-weight: 700; letter-spacing: normal; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.try-drop .empty h2 { margin-bottom: 6px; font-size: 1.2rem; font-weight: 600; }
.ed-stage.drag .try-drop {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 60%, transparent);
}

.link-btn {
  background: none; border: 0; padding: 0; margin: 0;
  color: var(--accent); font-weight: 600; text-decoration: underline;
  cursor: pointer; font-size: inherit;
}

@media (max-width: 900px) {
  .editor.pe.try-shell, .editor.pe.try-shell.no-banner {
    grid-template-columns: 1fr;
  }
  .editor.pe.try-shell {
    grid-template-rows: auto 52px 1fr auto 64px;
    grid-template-areas: "banner" "top" "stage" "panel" "rail";
  }
  .editor.pe.try-shell.no-banner {
    grid-template-rows: 52px 1fr auto 64px;
    grid-template-areas: "top" "stage" "panel" "rail";
  }
  .try-banner { font-size: .8rem; padding: 8px 12px; }
  .try-drop { inset: 12px; }
}