/* =====================================================================
   AGENTS LENS STUDIO -- shell.
   Tokens, the lock screen, the template gallery, and the buttons those two
   share with the editor. Editor layout lives in editor.css.
   ===================================================================== */

:root {
  --bg:          #0a0a0a;
  --bg-deep:     #000000;
  --surface:     #101010;
  --surface-2:   #161616;

  --line:        rgba(255, 255, 255, 0.07);
  --line-2:      rgba(255, 255, 255, 0.12);

  --ink:         #f4f1ea;
  --ink-2:       rgba(244, 241, 234, 0.70);
  --ink-3:       rgba(244, 241, 234, 0.46);
  --ink-4:       rgba(244, 241, 234, 0.26);

  --gold:        #D4AF37;
  --gold-hi:     #F5D060;
  --gold-10:     rgba(212, 175, 55, 0.10);
  --gold-20:     rgba(212, 175, 55, 0.20);
  --gold-35:     rgba(212, 175, 55, 0.35);
  --gold-grad:   linear-gradient(135deg, #D4AF37 0%, #F5D060 100%);

  --err:         #E08A7A;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;

  --font-ui:    'Montserrat', system-ui, -apple-system, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  min-height: 100%;
  background: var(--bg-deep);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}

body {
  background:
    radial-gradient(1100px 640px at 82% -12%, rgba(212, 175, 55, 0.09), transparent 62%),
    radial-gradient(820px 560px at -8% 108%, rgba(212, 175, 55, 0.05), transparent 58%),
    var(--bg);
  background-attachment: fixed;
}

button { font-family: inherit; color: inherit; background: none; border: none; cursor: pointer; }
button:disabled { cursor: default; }
input, textarea { font-family: inherit; color: inherit; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.09); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-35); }

/* --------------------------------------------------------------- buttons */

.btn-gold {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 26px;
  border-radius: var(--r-sm);
  background: var(--gold-grad);
  color: #14100a;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  box-shadow: 0 8px 26px rgba(212, 175, 55, 0.16);
}
.btn-gold:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 34px rgba(212, 175, 55, 0.26); }
.btn-gold:disabled { opacity: 0.5; box-shadow: none; }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 22px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.btn-ghost:hover:not(:disabled) { border-color: var(--gold-35); color: var(--ink); }
.btn-ghost:disabled { opacity: 0.4; }

.btn-quiet {
  padding: 7px 12px;
  border-radius: var(--r-sm);
  color: var(--ink-3);
  font-size: 12px; font-weight: 600;
  transition: color 0.15s ease, background 0.15s ease;
}
.btn-quiet:hover { color: var(--ink); background: rgba(255, 255, 255, 0.05); }

/* ---------------------------------------------------------------- footer */

.foot {
  margin-top: 34px;
  color: var(--ink-4);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
}

/* ------------------------------------------------------------------ lock */

.lock {
  min-height: 100dvh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 40px 22px calc(env(safe-area-inset-bottom, 0px) + 32px);
}

.lock-card {
  width: 100%; max-width: 384px;
  display: flex; flex-direction: column; align-items: center;
  padding: 46px 34px 40px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

.lock-logo { width: 140px; height: auto; display: block; }

.lock-accent {
  margin-top: 20px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.35;
  color: var(--ink-2);
  text-align: center;
}

/* Shown when a code stopped working while the tab was open. Gold, not red: nothing has
   gone wrong, something changed. */
.lock-notice {
  margin-top: 18px;
  padding: 11px 14px;
  border-left: 2px solid var(--gold);
  background: var(--gold-10);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.5;
  text-align: left;
}

.lock-input {
  width: 100%;
  margin-top: 30px;
  padding: 16px 14px;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: 16px; font-weight: 600;
  letter-spacing: 0.22em;
  text-align: center;
  text-transform: uppercase;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.lock-input::placeholder { color: var(--ink-4); letter-spacing: 0.22em; }
.lock-input:focus { border-color: var(--gold-35); background: rgba(0, 0, 0, 0.6); }

.lock-btn { width: 100%; margin-top: 14px; }

.lock-error {
  margin-top: 16px;
  color: var(--err);
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
}

/* --------------------------------------------------------------- gallery */

.gal { min-height: 100dvh; display: flex; flex-direction: column; }

/* Centred on both axes: with one template on the shelf, top-aligning would leave
   most of the screen empty under the card. */
.gal-body {
  flex: 1;
  width: 100%; max-width: 880px;
  margin: 0 auto;
  padding: 40px 22px 20px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}

.gal-accent {
  font-family: var(--font-serif);
  font-size: 17px; font-weight: 600;
  color: var(--gold);
}

.gal-h1 {
  margin-top: 6px;
  font-size: 30px; font-weight: 700;
  letter-spacing: -0.02em;
}

/* Capped columns, centred. A single template must read as a card, not as a banner
   stretched across the whole page. */
.gal-grid {
  width: 100%;
  margin-top: 38px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(266px, 300px));
  justify-content: center;
  gap: 16px;
}

/* Picture on top, words underneath. The card is one button, so everything inside is a
   span and the layout is done here rather than with nested block elements. */
.tpl {
  display: flex; flex-direction: column; align-items: stretch;
  overflow: hidden;
  padding: 0;
  text-align: left;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.32);
  transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.tpl:hover { border-color: var(--gold-35); transform: translateY(-3px); box-shadow: 0 22px 56px rgba(0, 0, 0, 0.46); }

/* 4:5, the shape of what comes out of the editor. Reserved with aspect-ratio so the
   card does not jump once the thumbnail decodes. */
.tpl-shot {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #0d0d0d;
  border-bottom: 1px solid var(--line);
}
.tpl-shot img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover; object-position: top center;
  transition: transform 0.4s ease;
}
.tpl:hover .tpl-shot img { transform: scale(1.02); }

/* No thumbnail yet. Same frame, the mark on a gold wash, so it reads as a card that is
   waiting rather than one that failed to load. */
.tpl-shot-blank {
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(212, 175, 55, 0.13), transparent 64%),
    var(--surface);
}
.tpl-shot-blank .tpl-mark { width: 34%; height: auto; opacity: 0.5; object-fit: contain; }
.tpl:hover .tpl-shot-blank .tpl-mark { transform: none; }

/* Grows to fill whatever height the tallest card in the row sets, so Open sits on the
   same line across the shelf even when one tagline wraps and another does not. */
.tpl-meta {
  flex: 1;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 6px;
  padding: 18px 20px 20px;
}

.tpl-kind {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold);
}
.tpl-name { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.tpl-tag { font-size: 13px; color: var(--ink-3); line-height: 1.45; }
.tpl-go {
  margin-top: auto; padding-top: 12px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-2);
}
.tpl:hover .tpl-go { color: var(--gold-hi); }

/* ------------------------------------------------------- nothing yet */

.gal-none {
  max-width: 430px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.gal-none-mark { width: 62px; height: auto; margin-bottom: 26px; opacity: 0.65; }
.gal-none .gal-h1 { margin-top: 8px; font-size: 27px; line-height: 1.25; }
.gal-none-p { margin-top: 12px; color: var(--ink-3); font-size: 14px; line-height: 1.6; }

@media (max-width: 560px) {
  .gal-body { padding-top: 40px; }
  .gal-h1 { font-size: 24px; }
  .gal-grid { grid-template-columns: minmax(0, 300px); }
  .gal-none-mark { width: 52px; margin-bottom: 20px; }
  .gal-none .gal-h1 { font-size: 23px; }
}