/* public/css/tribute-templates.css — Tribute Express DESIGN TEMPLATES (2026-09-26). Loaded only when a template is
   listed (views/tribute.ejs). The templates band on Choose Design, the Your front screen, and the pinned front + the
   back choice on Your Details. Tokens from tribute.css (:root --te-*). */

/* elements this file gives a display rule still obey the hidden attribute */
#screen-tf [hidden], #te-tf-pin[hidden], #te-tf-pin [hidden], #screen-2 [hidden], #te-tpl-band [hidden] { display: none !important; }

/* ── Choose Design: the templates band, first ─────────────────────────────────────────────────────────────── */
.te-tpl-band { margin: 0 0 6px; }
.te-tpl-band__head { margin: 0 0 12px; }
.te-tpl-band__title { font-size: 1.05rem; color: #333; margin: 0 0 2px; display: flex; align-items: center; gap: 8px; }
.te-tpl-band__new {
  font-family: Arial, Helvetica, sans-serif; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff; background: var(--te-orange); border-radius: 999px; padding: 2px 8px;
}
.te-tpl-band__sub { font-size: 0.85rem; color: #777; margin: 0; }
.te-tpl-band__title--stock { margin: 26px 0 12px; }
@media (min-width: 700px) {
  .te-tpl-band__head, .te-tpl-band__title--stock {
    width: calc(100vw - 32px); max-width: 1150px; position: relative; left: 50%; transform: translateX(-50%);
  }
}
.te-tpl-card { position: relative; }
.te-tpl-card__tag { font-size: 0.72rem; color: var(--te-orange-dark); padding: 0 6px 10px; margin-top: -6px; }
.te-tpl-card:focus-visible { outline: 3px solid var(--te-orange); outline-offset: 2px; }

/* ── Your front ────────────────────────────────────────────────────────────────────────────────────────────── */
.te-tf__grid { display: grid; grid-template-columns: minmax(104px, 34%) minmax(0, 1fr); gap: 12px; align-items: start; }
@media (min-width: 760px) { .te-tf__grid { grid-template-columns: 240px minmax(0, 1fr); gap: 24px; } }
.te-tf__controls { min-width: 0; }
.te-tf__controls select { max-width: 100%; }
.te-tf__preview { position: sticky; top: 8px; align-self: start; min-width: 0; }
.te-tf__preview-card {
  position: relative; width: 100%; aspect-ratio: 1 / 3; border-radius: 10px; overflow: hidden; cursor: zoom-in;
  background: #f0ebe5; border: 1px solid #d0d0d0; box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}
.te-tf__preview-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.te-tf__preview-card--stale img { opacity: 0.45; filter: grayscale(0.4); }
.te-tf__preview-busy {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); white-space: nowrap;
  font-family: Arial, Helvetica, sans-serif; font-size: 0.72rem; color: #fff; background: rgba(40,40,40,0.78);
  border-radius: 999px; padding: 5px 10px; display: flex; align-items: center; gap: 6px;
}
.te-tf__spin {
  display: inline-block; width: 12px; height: 12px; border: 2px solid rgba(255,255,255,0.45); border-top-color: #fff;
  border-radius: 50%; animation: teTfSpin 0.7s linear infinite; vertical-align: -1px; margin-right: 6px;
}
.te-tf__preview-busy .te-tf__spin { margin-right: 0; }
#btn-next-tf .te-tf__spin { margin-right: 8px; }
@keyframes teTfSpin { to { transform: rotate(360deg); } }
.te-tf__cross-toggle { margin-top: 10px; }                    /* rev 33: the cross row under the heading menu */
.te-tf__preview-hint { font-size: 0.72rem; color: #999; text-align: center; margin-top: 6px; }
.te-tf__preview-error { font-size: 0.78rem; color: var(--te-red); text-align: center; margin-top: 6px; line-height: 1.35; }

#screen-tf .te-card { margin-bottom: 12px; }
@media (max-width: 559px) {
  #screen-tf .te-card { padding: 14px 12px; }
  #screen-tf .te-screen__sub { margin-bottom: 12px; }
  #te-tf-namedates .te-field-row { flex-direction: column; gap: 0; }
  #te-tf-namedates .te-field__head { flex-wrap: wrap; gap: 2px 10px; }
  #te-tf-namedates .te-field__head .te-toggle--inline-end { white-space: normal; }
}

.te-tf__photo-zone { padding: 14px; }
.te-tf__photo-set { display: flex; align-items: center; gap: 12px; justify-content: center; }
.te-tf__photo-set img { width: 72px; height: 90px; object-fit: cover; border-radius: 6px; border: 1.5px solid #ddd; background: #eee; }
.te-tf__photo-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.te-tf__link {
  font-family: inherit; font-size: 0.82rem; color: var(--te-orange-dark); text-decoration: underline; background: none;
  border: none; cursor: pointer; padding: 0;
}
.te-tf__adjust { margin-top: 12px; }
.te-tf__adjust-label { display: block; font-size: 0.8rem; font-weight: 700; color: #444; margin-bottom: 6px; }
.te-tf__adjust-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.te-tf__adjust-buttons button {
  min-width: 40px; height: 40px; border-radius: 8px; border: 1.5px solid #d4d0cb; background: #fff; cursor: pointer;
  font-size: 1.05rem; color: #333; font-family: Arial, Helvetica, sans-serif;
}
.te-tf__adjust-buttons button:hover { border-color: var(--te-orange); background: var(--te-orange-light); }
.te-tf__adjust-buttons button:active { transform: translateY(1px); }
.te-tf__adjust-buttons .te-tf__adjust-reset { font-size: 0.8rem; padding: 0 12px; }

.te-tf__note { font-size: 0.8rem; line-height: 1.4; margin-top: 8px; color: #666; }
.te-tf__note--info { color: #6b5a2e; }
.te-tf__note--warn { color: #9a5b00; background: #fff6e5; border: 1px solid #f3d9a4; border-radius: 6px; padding: 6px 8px; }
.te-tf__note--error { color: var(--te-red); background: #fdeeee; border: 1px solid #f3c4c4; border-radius: 6px; padding: 6px 8px; }

#te-tf-verse { font-size: 0.9rem; }
#te-tf-own { min-height: 150px; }

/* ── Your Details: the front, pinned, and the back choice ─────────────────────────────────────────────────────
   With a template (JS puts .te-tf-mode on #screen-2): from 560 px two columns — the drawn front on the left (sticky: it
   stays in view while the back is chosen), everything else on the right; on a phone one column with the front as a
   strip on top. .te-tf-pin is display:contents, so its two children (the front, the back choice) are items of the
   screen itself; `order` puts the second photo card right after the back choice. */
.te-tf-pin { display: contents; }
#screen-2.te-tf-mode #te-imprint-edit { min-width: 0; }     /* the stock 320 px floor is for the full-width card */
@media (max-width: 559px) { #screen-2.te-tf-mode #te-imprint-edit { width: 100% !important; } }
/* phones: one column — the front is a strip above the back choice (the cards keep the full width, as in the stock
   flow); the order puts the second photo right after the back choice */
#screen-2.te-screen--active.te-tf-mode { display: flex; flex-direction: column; }
#screen-2.te-tf-mode > * { order: 4; min-width: 0; }
#screen-2.te-tf-mode > .te-screen__title { order: 0; }
#screen-2.te-tf-mode > .te-nav { order: 9; }
#screen-2.te-tf-mode > .te-tf-photo2 { order: 3; }
.te-tf-pin > .te-tf-back { order: 2; }
/* rev 31 (owner 9/27: "show an image of the back … slide the front to the left to make room"): the front and the back
   side by side — .te-tf-pin__pics is the pinned item now (was .te-tf-pin__front alone). */
.te-tf-pin__pics { order: 1; display: flex; align-items: flex-start; gap: 12px; margin: 0 0 12px; }
.te-tf-pin__front, .te-tf-pin__back { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.te-tf-pin__front img, .te-tf-pin__back-pic {
  width: 72px; aspect-ratio: 1 / 3; display: block; border-radius: 6px; border: 1px solid #d0d0d0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.10); background: #f0ebe5; flex-shrink: 0;
}
.te-tf-pin__front img { object-fit: cover; }
.te-tf-pin__back-pic { position: relative; overflow: hidden; background: #fff; cursor: zoom-in; }
.te-tf-pin__back-pic canvas { width: 100%; height: 100%; display: block; }
.te-tf-pin__back-pic .te-tf__preview-busy { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.55); font-size: 0; }
.te-tf-pin__label { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: #8a8a8a; }
.te-tf-pin__front .te-tf__link { font-size: 0.8rem; text-align: center; line-height: 1.25; max-width: 90px; }
.te-tf-pin__back-pic .te-tf__sample-tag--back { left: 4px; right: 4px; top: 38%; transform: none; white-space: normal; text-align: center; font-size: 0.62rem; line-height: 1.25; padding: 4px 5px; border-radius: 8px; }
/* wider screens: two columns, the front and the back pinned on the left while the back is chosen */
@media (min-width: 560px) {
  #screen-2.te-screen--active.te-tf-mode { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 16px; align-items: start; }
  #screen-2.te-tf-mode > * { grid-column: 2; }
  #screen-2.te-tf-mode > .te-screen__title { grid-column: 1 / -1; }
  #screen-2.te-tf-mode > .te-nav { grid-column: 1 / -1; }
  .te-tf-pin > .te-tf-back { grid-column: 2; }
  .te-tf-pin__pics { grid-column: 1; grid-row: 2 / span 4; gap: 10px; margin: 0; position: sticky; top: 8px; align-self: start; }
  .te-tf-pin__front, .te-tf-pin__back { flex: 1 1 0; min-width: 0; }
  .te-tf-pin__front img, .te-tf-pin__back-pic { width: 100%; }
  .te-tf-pin__front .te-tf__link { font-size: 0.74rem; }
}
@media (min-width: 760px) { #screen-2.te-screen--active.te-tf-mode { grid-template-columns: 260px minmax(0, 1fr); column-gap: 20px; } }
/* rev 31: the verse for the back, and "Also on the back: their name / the dates" */
.te-tf-bverse { margin-top: 10px; }
.te-tf-bverse select { width: 100%; }
.te-tf-bverse textarea { width: 100%; min-height: 120px; }
.te-tf-bshow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 14px; font-size: 0.88rem; }
.te-tf-bshow__k { font-weight: 600; color: #555; }
#te-tf-bshow-note { margin-top: 6px; }
.te-tf-back { margin-bottom: 16px; }
.te-tf-back__opt {
  display: flex; align-items: flex-start; gap: 10px; border: 1.5px solid var(--te-border); border-radius: 8px;
  padding: 10px 12px; margin-top: 8px; cursor: pointer; font-size: 0.88rem; line-height: 1.4; background: #fff;
}
.te-tf-back__opt input { accent-color: var(--te-orange); width: 18px; height: 18px; margin-top: 1px; flex-shrink: 0; cursor: pointer; }
.te-tf-back__opt:has(input:checked) { border-color: var(--te-orange); background: var(--te-orange-light); }

/* 9/26 (owner's screen, "Name and dates"): Date of Birth and Date of Passing sit side by side on ONE line. The "No dates"
   toggle shared the Date of Passing label's line (nowrap), squeezed the label onto two lines and dropped its box below
   Date of Birth's. Side by side it is taken out of that line and set on its own line under the two fields; stacked (600 px
   and under, where tribute.css stacks the row) it goes in the flow under Date of Passing's box. The same checkbox, the
   same id, nothing else moves. Scoped to the template flow's block; the stock page's dates row is untouched. */
#te-tf-namedates .te-field-row { position: relative; padding-bottom: 26px; }
#te-tf-namedates .te-field-row > .te-field { min-width: 0; }   /* a narrow window (~600-650 px): the two boxes shrink to fit the card instead of running past it */
#te-tf-namedates .te-field-row .te-field__head .te-toggle--inline-end { position: absolute; left: 0; right: 0; bottom: 2px; white-space: normal; margin: 0; }
@media (max-width: 600px) {
  #te-tf-namedates .te-field-row { padding-bottom: 0; }
  #te-tf-namedates .te-field-row .te-field:last-child { display: flex; flex-direction: column; }
  #te-tf-namedates .te-field-row .te-field:last-child .te-field__head { display: contents; }
  #te-tf-namedates .te-field-row .te-field:last-child label[for="te-died"] { margin-bottom: 3px; }
  #te-tf-namedates .te-field-row .te-field__head .te-toggle--inline-end { position: static; order: 2; margin: 8px 0 0; }
}

/* ── rev 30 (2026-09-27, owner): the sample face's tag over the preview's window (page chrome — never in the picture) ── */
.te-tf__sample-tag {
  position: absolute; transform: translate(-50%, -135%); z-index: 2; pointer-events: none; white-space: nowrap;
  padding: 3px 9px; border-radius: 999px; background: rgba(34, 32, 28, 0.78); color: #fff;
  font: 600 0.68rem/1.3 Arial, Helvetica, sans-serif; letter-spacing: 0.1px;
}
.te-tf__sample-tag[hidden] { display: none; }
.te-tf__sample-tag--narrow { font-size: 0.6rem; padding: 2px 7px; }
.te-tf__preview-card--stale .te-tf__sample-tag { opacity: 0.6; }