/* ==========================================================================
   Template picker thumbnails
   --------------------------------------------------------------------------
   Abstract tiles for the 30 designs. Every shape here is an <i> so the markup
   stays inert and tiny; layout is flex, colour comes from --t-accent which
   js/templates.js sets per tile from the user's chosen brand colour.

   Kept in its own file: these rules are self-contained and none of them leak
   into the signature output.
   ========================================================================== */

.t-card {
  --t-accent: #2563eb;
  --t-ink: #cbd2dc;
  --t-ink-strong: #94a2b5;
  --t-paper: #fff;
  --t-blk: #1f2733;   /* the "dark panel" some designs use */

  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 11px;
  overflow: hidden;
  background: var(--t-paper);
  border-radius: 7px;
  box-sizing: border-box;
}

/* These tiles are abstract interface, not a render of the signature, so they
   follow the theme. (The mailbox preview is the opposite case and stays white
   in both themes — see the note on .mailbox in style.css.) --t-accent is left
   alone: js/templates.js sets it inline per tile from the brand colour. */
[data-theme="dark"] .t-card {
  --t-ink: #3f4859;
  --t-ink-strong: #6d7a8e;
  --t-paper: #212734;
  --t-blk: #0b0e14;
}

/* Older Safari/Firefox without aspect-ratio still need a sensible box. */
@supports not (aspect-ratio: 4 / 3) {
  .t-card { height: 96px; }
}

/* --- Structure ----------------------------------------------------------- */

.t-row,
.t-col {
  display: flex;
  min-width: 0;
  gap: 5px;
}

.t-row { flex-direction: row; align-items: center; }
.t-col { flex-direction: column; flex: 1 1 auto; justify-content: center; }

.t-gap { gap: 4px; }

.t-mid { align-items: center; text-align: center; }
.t-mid .t-b { margin-inline: auto; }

/* --- Primitives ---------------------------------------------------------- */

.t-b {
  display: block;
  height: 4px;
  flex: 0 0 auto;
  background: var(--t-ink);
  border-radius: 2px;
}

.t-n { height: 6px; background: var(--t-ink-strong); }   /* name    */
.t-t { height: 4px; background: var(--t-accent); }        /* title   */
.t-d { height: 3px; }                                     /* details */
.t-f { height: 2px; opacity: .55; }                       /* legal fine print */

.t-ph {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  background: var(--t-ink);
  border-radius: 50%;
}

.t-sq { border-radius: 4px; }

.t-blk {
  display: block;
  width: 100%;
  flex: 0 0 auto;
  border-radius: 3px;
  background: var(--t-ink);
}

.t-accent { background: var(--t-accent); }
.t-soft   { background: var(--t-ink); opacity: .4; }
.t-logo   { width: 34px; background: var(--t-ink-strong); border-radius: 3px; }
.t-code   { background: var(--t-blk); }

.t-pill {
  display: block;
  height: 9px;
  flex: 0 0 auto;
  background: var(--t-accent);
  border-radius: 5px;
}

.t-dots {
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
  align-items: center;
}

.t-mid .t-dots,
.t-dots-mid { justify-content: center; }

.t-dot {
  display: block;
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  background: var(--t-ink);
  border-radius: 50%;
}

.t-dot.t-accent { background: var(--t-accent); }

.t-dot.t-wide {
  width: 20px;
  height: 8px;
  border-radius: 4px;
  background: var(--t-ink);
  opacity: .5;
}

.t-rule {
  display: block;
  width: 100%;
  height: 1px;
  flex: 0 0 auto;
  background: var(--t-ink);
}

.t-accent-rule { background: var(--t-accent); opacity: .8; }

.t-vr {
  flex: 0 0 auto;
  width: 3px;
  align-self: stretch;
  min-height: 34px;
  background: var(--t-accent);
  border-radius: 2px;
}

.t-thick { width: 7px; }

.t-panel {
  flex: 0 0 auto;
  width: 30%;
  align-self: stretch;
  background: var(--t-accent);
  border-radius: 4px;
}

.t-mono {
  display: flex;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  background: var(--t-accent);
  border-radius: 5px;
  color: #fff;
  font: 600 11px/1 system-ui, sans-serif;
  font-style: normal;
  letter-spacing: .04em;
}

/* --- Variants ------------------------------------------------------------ */

.t-card-in {
  flex: 1 1 auto;
  justify-content: center;
  padding: 8px;
  border: 1px solid var(--t-ink);
  border-radius: 5px;
}

.t-dark {
  flex: 1 1 auto;
  justify-content: center;
  margin: -3px;
  padding: 10px;
  background: var(--t-blk);
  border-radius: 5px;
}

.t-dark .t-b  { background: #566275; }
.t-dark .t-n  { background: #97a5b8; }
.t-dark .t-t  { background: var(--t-accent); }
.t-dark .t-ph { background: #566275; }

/* --- States -------------------------------------------------------------- */

/* Pro tiles for free users: visible, clearly not yet yours. */
.is-locked .t-card { filter: saturate(.35); opacity: .62; }

@media (prefers-reduced-motion: no-preference) {
  .t-card { transition: transform .18s ease; }
  .tpl-option:hover .t-card { transform: translateY(-2px); }
}

@media (prefers-contrast: more) {
  .t-card { --t-ink: #9aa3b0; --t-ink-strong: #5b6675; }
}