/*!
 * LaShota Albums — the editor's own additions.
 *
 * Everything the storefront already defines lives in editor-base.css (or in the
 * theme, when the LaShota theme is active). This file is only what the prototype
 * never needed, because it had no server: a sign-in gate, a save state that can fail,
 * and a measured low-resolution warning.
 */

/* ============================================================
   Plugin-only rules — things the prototype did not need
   because it had no server, no accounts and no money.
   ============================================================ */

/* The error card the script falls back to when the editor cannot open. */
.lashota-gate{max-width:420px;margin:var(--s8) auto;padding:var(--s6);text-align:center;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper)}
.lashota-gate p{margin-bottom:var(--s4);color:var(--body)}

/* The account gate (parts/gate.php) is built entirely from the storefront's own
   classes, and its two forms come from the theme — so its styling lives there too,
   next to the rest of the house form kit. Nothing for it here. */

.lashota-editor{position:relative;min-height:320px}
.lashota-editor[data-state="loading"]{display:grid;place-items:center}
.lashota-editor .ls-spinner{width:26px;height:26px;border:2px solid var(--line);
  border-top-color:var(--brass);border-radius:50%;animation:ls-spin .8s linear infinite}
@keyframes ls-spin{to{transform:rotate(360deg)}}

/* Save state. The prototype could claim "saved automatically" unconditionally;
   a real save can be in flight, or can fail, and the customer has to be able to
   tell which — losing an hour of placement silently is unforgivable. */
.ls-save{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;letter-spacing:.04em;
  padding:3px 9px;border-radius:999px;border:1px solid var(--line);background:var(--paper);
  color:var(--muted);white-space:nowrap}
.ls-save .dot{width:6px;height:6px;border-radius:50%;background:var(--muted);flex:none}
.ls-save[data-s="saved"]{color:var(--ok);border-color:var(--ok-bg);background:var(--ok-bg)}
.ls-save[data-s="saved"] .dot{background:var(--ok)}
.ls-save[data-s="saving"] .dot{background:var(--brass-soft);animation:ls-pulse 1s ease-in-out infinite}
.ls-save[data-s="dirty"] .dot{background:var(--brass-soft)}
.ls-save[data-s="error"]{color:var(--danger);border-color:var(--danger-bg);background:var(--danger-bg)}
.ls-save[data-s="error"] .dot{background:var(--danger)}
@keyframes ls-pulse{50%{opacity:.3}}

/* Upload tray. Photos are WordPress attachments now, so this is a real upload
   queue with per-file progress rather than a FileReader loop. */
.ls-drop{border:1px dashed var(--line);border-radius:var(--r);padding:var(--s4);text-align:center;
  background:var(--paper);cursor:pointer;transition:border-color .2s,background .2s}
.ls-drop:hover,.ls-drop.over{border-color:var(--brass);background:var(--brass-wash)}
.ls-drop b{display:block;font-size:13px;color:var(--ink);font-weight:500}
.ls-drop span{font-size:11px;color:var(--faint)}
.ls-drop input{display:none}

.ls-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:var(--s3)}
.ls-ph{position:relative;aspect-ratio:1;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:var(--sand);cursor:pointer;padding:0}
.ls-ph img{width:100%;height:100%;object-fit:cover;display:block}
.ls-ph.sel{box-shadow:0 0 0 2px var(--ink) inset;border-color:var(--ink)}
.ls-ph.used::after{content:"";position:absolute;inset:0;border:2px solid var(--brass);border-radius:2px}
.ls-ph .n{position:absolute;top:3px;inset-inline-start:3px;min-width:16px;height:16px;border-radius:999px;
  background:var(--brass);color:#fff;font-size:9.5px;display:grid;place-items:center;padding:0 4px}
.ls-ph .lo{position:absolute;inset-inline:0;bottom:0;font-size:9px;padding:2px 4px;text-align:center;
  background:var(--warn-bg);color:var(--warn)}
.ls-ph .bar{position:absolute;inset-inline:0;bottom:0;height:3px;background:var(--line)}
.ls-ph .bar i{display:block;height:100%;background:var(--brass);width:0;transition:width .2s}

/* Preflight. The resolution guard has to be visible while there is still time to
   swap the photo, not discovered by the printer. */
.ls-pf{margin-top:var(--s3);border-radius:var(--r);padding:var(--s3);font-size:12px;line-height:1.5}
.ls-pf[data-l="ok"]{background:var(--ok-bg);color:var(--ok)}
.ls-pf[data-l="warn"]{background:var(--warn-bg);color:var(--warn)}
.ls-pf[data-l="fail"]{background:var(--danger-bg);color:var(--danger)}
.ls-pf ul{margin:6px 0 0;padding-inline-start:16px}
.ls-pf li{margin-top:2px}

/* The safe-margin guide, drawn from the spec's own percentages so the editor and
   the renderer cannot disagree about where the margin is. */
.ls-safe{position:absolute;inset:var(--safey,4%) var(--safex,4%);z-index:40;pointer-events:none;
  border:1px dashed rgba(60,45,25,.45);border-radius:1px}
.ls-safe.off{display:none}

/* A slot whose photo is too small to print at the size it is placed. */
.slot.ls-low::before{content:"";position:absolute;inset:0;z-index:30;pointer-events:none;
  box-shadow:0 0 0 2px var(--warn) inset}

.ls-toast{position:fixed;inset-inline:0;bottom:18px;display:flex;justify-content:center;
  z-index:var(--z-toast);pointer-events:none}
.ls-toast span{background:var(--ink);color:var(--bone);font-size:13px;padding:9px 16px;border-radius:999px;
  box-shadow:var(--sh-2);max-width:min(420px,88vw)}

/* Mobile: the two-column editor collapses to canvas over panel. */
@media (max-width:860px){
  .lashota-editor .editor{grid-template-columns:1fr;height:auto}
  .lashota-editor .eside{border-inline-end:0;border-top:1px solid var(--line-soft);order:2}
  .lashota-editor .ecanvas{order:1;padding:var(--s3);min-height:46vh}
  .lashota-editor .epanel{max-height:46vh}
  .ls-grid{grid-template-columns:repeat(4,1fr)}
}

/* The upload screen reaches one step past the storefront's spacing scale, which stops
   at mt7. Added rather than changed in the markup — the prototype's class stays. */
.mt8{margin-top:var(--s8)}