/* Lock screen vision board maker.
   Layered on top of legal.css, which supplies the Nocturne tokens. Mobile is
   the design target, not the fallback: the whole point is that you make a
   phone wallpaper on the phone it goes on. */

.tool {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 34px 0 90px;
}

.tool-head { margin-bottom: 26px; }
.tool-head h1 { margin-bottom: 18px; font-size: clamp(38px, 9vw, 56px); }

/* Editor: stage above, controls below on a phone; side by side once there is
   room for both without either being cramped. */
.editor {
  display: grid;
  gap: 26px;
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 900px) {
  .editor { grid-template-columns: minmax(280px, 360px) 1fr; }
  .stage-wrap { position: sticky; top: 24px; }
}

.stage-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* The canvas must stay exactly 9:16 or the drag mapping and the preview both
   lie about where a layer will land.
   Height drives the box and aspect-ratio derives the width. Capping height
   with max-height instead would let the clamp win and squash the ratio —
   which it did, and the mobile matrix caught it on Chromium. 569px is
   320 x 16/9, the widest the stage is ever allowed to get. */
.stage {
  position: relative;
  height: min(62vh, 569px);
  aspect-ratio: 9 / 16;
  max-width: 100%;
  border: .5px solid rgba(216,185,124,.3);
  background: #0b0917;
  touch-action: none;
  overflow: hidden;
}

.stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
}
.stage canvas:active { cursor: grabbing; }

.stage-note {
  color: var(--fg-ivory-50);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-align: center;
  text-transform: uppercase;
}

/* Controls */
.panel { display: grid; gap: 22px; }

.group {
  padding: 18px 20px;
  border: .5px solid rgba(216,185,124,.22);
  background: rgba(216,185,124,.025);
}
.group > h2 {
  margin: 0 0 14px;
  color: var(--fg-gold);
  font-family: "Jost", sans-serif;
  font-size: 9.5px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.row + .row { margin-top: 12px; }

button, .filebtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: .5px solid rgba(216,185,124,.35);
  background: transparent;
  color: var(--fg-ivory);
  cursor: pointer;
  font-family: "Jost", sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  transition: border-color 240ms ease, color 240ms ease, background-color 240ms ease;
}
button:hover, .filebtn:hover {
  border-color: var(--fg-gold);
  background: rgba(216,185,124,.07);
  color: var(--fg-gold-lit);
}
button[aria-pressed="true"] { border-color: var(--fg-gold); color: var(--fg-gold); background: rgba(216,185,124,.1); }
button:disabled { opacity: .38; cursor: not-allowed; }
button:disabled:hover { border-color: rgba(216,185,124,.35); background: transparent; color: var(--fg-ivory); }

.primary { border-color: var(--fg-gold); color: var(--fg-gold); }
.primary:hover { background: rgba(216,185,124,.12); }

.filebtn input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Swatches. Real generated gradients, not stock imagery — every one of these
   is drawn by the tool itself, so there is no licence question. */
.swatches { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
.swatch {
  aspect-ratio: 9 / 16;
  min-height: 0;
  padding: 0;
  border: .5px solid rgba(216,185,124,.25);
}
.swatch[aria-pressed="true"] { border-color: var(--fg-gold-lit); border-width: 1px; }

label { display: block; margin-bottom: 6px; color: var(--fg-ivory-72); font-size: 12px; }

input[type="text"], textarea, select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: .5px solid rgba(216,185,124,.3);
  background: rgba(8,7,17,.6);
  color: var(--fg-ivory);
  font-family: "Jost", sans-serif;
  font-size: 15px;
}

/* Safari renders a native select at its own intrinsic height and ignores
   min-height entirely — it came out 26px tall, well under the 44px touch
   minimum, which the WebKit run of the mobile matrix caught. Dropping the
   native appearance is the only way to control the box, so the disclosure
   arrow has to be drawn back on. */
select {
  -webkit-appearance: none;
  appearance: none;
  height: 44px;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23D8B97C' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 11px 8px;
}
/* The select sits in a flex row beside a button, where 100% width would push
   the button onto its own line. */
.row select { width: auto; min-width: 132px; flex: 1 1 auto; }
textarea { min-height: 76px; resize: vertical; line-height: 1.5; }
input[type="text"]:focus, textarea:focus, select:focus { border-color: var(--fg-gold); outline: none; }

input[type="range"] { width: 100%; accent-color: var(--fg-gold); }

.checkline { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; }
.checkline input { margin-top: 3px; accent-color: var(--fg-gold); width: 18px; height: 18px; }
.checkline label { margin: 0; font-size: 13px; }

.layers { display: grid; gap: 8px; margin-top: 12px; }
.layer {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border: .5px solid rgba(216,185,124,.18);
  font-size: 13px;
}
.layer[aria-current="true"] { border-color: var(--fg-gold-55, rgba(216,185,124,.55)); background: rgba(216,185,124,.05); }
.layer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layer button { min-height: 34px; padding: 0 10px; font-size: 10px; letter-spacing: 1.2px; }

.status {
  margin-top: 14px;
  color: var(--fg-ivory-72);
  font-size: 13px;
  line-height: 1.6;
}
.status[data-tone="warn"] { color: var(--fg-gold-lit); }

/* The export result. On iOS Safari a download attribute is unreliable, so the
   PNG is also shown as an <img> the visitor can long-press and save. */
.result { margin-top: 18px; }
.result img {
  display: block;
  width: min(100%, 220px);
  border: .5px solid rgba(216,185,124,.3);
}

/* The single upsell. Dismissible, and it never covers the board. */
.upsell {
  position: relative;
  margin: 30px 0 0;
  padding: 20px 46px 20px 22px;
  border-left: 1px solid var(--fg-gold-55, rgba(216,185,124,.55));
  background: rgba(216,185,124,.04);
}
.upsell p { margin: 0 0 6px; }
.upsell p:last-of-type { margin-bottom: 0; }
.upsell .dismiss {
  position: absolute;
  top: 10px;
  right: 10px;
  min-height: 34px;
  padding: 0 10px;
  border-color: transparent;
  color: var(--fg-ivory-50);
  font-size: 15px;
  letter-spacing: 0;
}
.upsell[hidden] { display: none; }

/* Template gallery */
.gallery { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin: 30px 0 10px; }
.gallery figure { margin: 0; }
.gallery img { display: block; width: 100%; height: auto; border: .5px solid rgba(216,185,124,.25); }
.gallery figcaption { margin-top: 10px; font-size: 13px; }
.gallery figcaption strong { display: block; color: var(--fg-ivory); font-weight: 400; }
.gallery figcaption span { color: var(--fg-ivory-50); font-size: 12px; }

.preview-single { display: block; width: min(100%, 300px); margin: 26px 0; border: .5px solid rgba(216,185,124,.28); }

@media (prefers-reduced-motion: reduce) {
  button, .filebtn { transition: none; }
}