/* public/css/tribute-flow2.css — Tribute Express, the flow's second cut: rev 107 "Back in View" (2026-10-18).
   Loaded only when routes/tribute-routes.js GET / lets this visitor see the flow (TE_FLOW2=public, or the easel token —
   views/tribute.ejs FLOW2). Three things:
     1. the live back — one picture of the back of the card, pinned on the left of Memorial Details (both flows) and of
        Add Tribute, filling in as the family goes (public/js/te-flow2.js owns it; #te-lb);
     2. Your front: the Position dialog (drag, zoom, a finger) and the Shape row in place of the zoom / move buttons;
     3. the step bar without a step that does not apply (a hidden step takes no room);
     4. rev 113 "Sharp Tiles": Choose a Design's grid 5 across on a wide screen (below);
     5. rev 114 "Photo First": the pictures as drop targets, the back photo's Position row, the Photo card first (below).
   Tokens from tribute.css (:root --te-*); the template flow's classes from tribute-templates.css. */

/* elements this file gives a display rule still obey the hidden attribute */
#te-lb [hidden], #te-pos [hidden], .te-pos-row [hidden], .te-progress__step[hidden], #te-pos-row[hidden], #te-pos-hit[hidden], #te-bpos-row[hidden] { display: none !important; }

/* ── 3. the step bar: a step that does not apply is gone, the rest are renumbered by the script ─────────────── */
.te-progress__step[hidden] { display: none; }

/* ── 1. the live back ─────────────────────────────────────────────────────────────────────────────────────────
   The panel is the first thing after the screen's title. Phones: a row — the picture (88 px wide, a 3 × 9) on the
   left, the words on the right — in the flow, not pinned (a 264 px tall strip pinned to the top would eat the screen).
   From 560 px: two columns like the template flow's Your Details — the panel in a 220 px (260 px from 760 px) column,
   pinned while the family scrolls; the card as wide as the column or as tall as the window allows, whichever is less,
   so the whole back stays in view on a laptop. */
.te-lb { margin: 0 0 14px; min-width: 0; }
.te-lb__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 4px; }
.te-lb__label { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: #8a8a8a; }
.te-lb__front { font-size: 0.78rem; }
.te-lb__pic {
  position: relative; width: 88px; aspect-ratio: 1 / 3; border-radius: 6px; border: 1px solid #d0d0d0; overflow: hidden;
  background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.10); cursor: zoom-in; flex-shrink: 0;
}
.te-lb__pic canvas { width: 100%; height: 100%; display: block; }
.te-lb__pic--empty canvas { visibility: hidden; }
.te-lb__tag {
  position: absolute; left: 4px; right: 4px; top: 38%; z-index: 2; pointer-events: none; text-align: center; white-space: normal;
  padding: 4px 5px; border-radius: 8px; background: rgba(34, 32, 28, 0.78); color: #fff;
  font: 600 0.62rem/1.25 Arial, Helvetica, sans-serif; letter-spacing: 0.1px;
}
.te-lb__busy {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.55); z-index: 3;
}
.te-lb__spin {
  display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(0,0,0,0.18); border-top-color: var(--te-orange);
  border-radius: 50%; animation: teLbSpin 0.7s linear infinite;
}
@keyframes teLbSpin { to { transform: rotate(360deg); } }
.te-lb__hint { font-size: 0.74rem; color: #888; line-height: 1.4; margin: 6px 0 0; }
.te-lb__err { font-size: 0.76rem; color: var(--te-red); line-height: 1.35; margin: 6px 0 0; }
.te-lb__row { display: flex; align-items: flex-start; gap: 12px; }
.te-lb__words { min-width: 0; }
.te-lb__words .te-lb__hint { margin-top: 2px; }

/* the screen as two columns (the template flow's #screen-2.te-tf-mode grid, repeated here for both flows and both
   screens; the template flow's own pinned pictures stand down — the panel is the back now) */
#screen-2.te-lb-mode .te-tf-pin__pics { display: none !important; }
#screen-2.te-screen--active.te-lb-mode, #screen-3.te-screen--active.te-lb-mode { display: flex; flex-direction: column; }
#screen-2.te-lb-mode > *, #screen-3.te-lb-mode > * { min-width: 0; order: 4; }   /* every child after the panel (the template flow's own rule, repeated for the stock flow) */
#screen-2.te-lb-mode > .te-screen__title, #screen-3.te-lb-mode > .te-screen__title { order: 0; }
#screen-2.te-lb-mode > #te-lb, #screen-3.te-lb-mode > #te-lb { order: 1; }
#screen-2.te-lb-mode > .te-nav, #screen-3.te-lb-mode > .te-nav { order: 9; }
/* the template flow's own order on a phone (tribute-templates.css gives every child order 4, the second photo 3, the
   back choice 2) is kept — the panel goes first, with the title */
#screen-2.te-tf-mode.te-lb-mode > #te-lb { order: 1; }
@media (min-width: 560px) {
  #screen-2.te-screen--active.te-lb-mode, #screen-3.te-screen--active.te-lb-mode {
    display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 16px; align-items: start;
  }
  #screen-2.te-lb-mode > *, #screen-3.te-lb-mode > * { grid-column: 2; }
  #screen-2.te-lb-mode > .te-screen__title, #screen-3.te-lb-mode > .te-screen__title { grid-column: 1 / -1; }
  #screen-2.te-lb-mode > .te-nav, #screen-3.te-lb-mode > .te-nav { grid-column: 1 / -1; }
  #screen-2.te-lb-mode > #te-lb, #screen-3.te-lb-mode > #te-lb {
    grid-column: 1; grid-row: 2 / span 40; position: sticky; top: 8px; align-self: start; margin: 0;
  }
  #screen-2.te-tf-mode.te-lb-mode .te-tf-pin > .te-tf-back { grid-column: 2; }
  .te-lb__row { display: block; }
  .te-lb__pic { width: min(100%, calc((100vh - 230px) / 3)); }   /* the whole back above the sticky nav once pinned */
  .te-lb__tag { font-size: 0.68rem; padding: 4px 8px; }
}
@media (min-width: 760px) {
  #screen-2.te-screen--active.te-lb-mode, #screen-3.te-screen--active.te-lb-mode { grid-template-columns: 260px minmax(0, 1fr); column-gap: 20px; }
}
/* Add Tribute: the paste box beside the back — rev 109 (owner 10/18): the script sets its height so the box ends where the
   card ends (te-flow2.js fitPaste); this is the height before the script runs. A phone keeps the stock 400 px. */
#screen-3.te-lb-mode #te-paste-input { height: 340px; }
#screen-3.te-lb-mode #te-body { min-height: 300px; }
@media (max-width: 559px) { #screen-3.te-lb-mode #te-paste-input { height: 400px; } }

/* rev 109 (owner 10/18: "that date of birth and date of passing doesn't look pretty, horizontally... maybe 'no dates' is
   beneath it?"): the dates row on Memorial Details (the stock flow's — a template's sits on Your front with its own rule,
   rev 29) — the two boxes side by side with their labels on one line, "No dates" on its own line under them; stacked under
   700 px (the column is narrow there), with "No dates" in the flow under the Date of Passing box. The template flow's
   treatment (tribute-templates.css #te-tf-namedates), repeated for this screen. */
#screen-2.te-lb-mode .te-card .te-field-row { position: relative; padding-bottom: 26px; }
#screen-2.te-lb-mode .te-card .te-field-row > .te-field { min-width: 0; }
#screen-2.te-lb-mode .te-card .te-field-row .te-field__head { flex-wrap: nowrap; }
#screen-2.te-lb-mode .te-card .te-field-row .te-field__head label { white-space: nowrap; }
#screen-2.te-lb-mode .te-card .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: 699px) {
  #screen-2.te-lb-mode .te-card .te-field-row { flex-direction: column; padding-bottom: 0; }
  #screen-2.te-lb-mode .te-card .te-field-row .te-field:last-child { display: flex; flex-direction: column; }
  #screen-2.te-lb-mode .te-card .te-field-row .te-field:last-child .te-field__head { display: contents; }
  #screen-2.te-lb-mode .te-card .te-field-row .te-field__head label { margin-bottom: 3px; }
  #screen-2.te-lb-mode .te-card .te-field-row .te-field__head .te-toggle--inline-end { position: static; order: 2; margin: 8px 0 0; }
}

/* ── 2. Your front: Position and Shape in place of the zoom / move buttons ─────────────────────────────────── */
#screen-tf #te-tf-adjust { display: none !important; }
.te-pos-row { margin-top: 12px; }
.te-pos-btn { font-size: 0.86rem; padding: 10px 16px; }
.te-pos-shape { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 10px; font-size: 0.86rem; }
.te-pos-shape__k { font-weight: 700; color: #444; font-size: 0.8rem; }
.te-pos-shape input[type="radio"] { accent-color: var(--te-orange); width: 16px; height: 16px; cursor: pointer; }
.te-pos-row .te-pos-hint { font-size: 0.76rem; color: #888; margin: 8px 0 0; line-height: 1.4; }
/* the photo's window on the drawn front is a click away from the dialog (page chrome over the picture — never in it) */
#te-pos-hit { position: absolute; z-index: 3; cursor: move; border-radius: 4px; outline: 2px dashed transparent; outline-offset: 2px; transition: outline-color 0.15s; }
#te-pos-hit:hover, #te-pos-hit:focus-visible { outline-color: rgba(230, 81, 0, 0.75); }
#te-pos-hit:focus { outline-color: rgba(230, 81, 0, 0.75); }

/* the dialog */
.te-pos { z-index: 16000; padding: 12px; cursor: default; }
.te-pos__box { background: #fff; border-radius: 12px; padding: 18px 20px 16px; width: min(94vw, 440px); box-shadow: 0 8px 40px rgba(0,0,0,0.22); }
.te-pos__title { font-size: 1.05rem; margin: 0 0 4px; text-align: left; }
.te-pos__sub { font-size: 0.8rem; color: #666; line-height: 1.45; margin: 0 0 12px; }
.te-pos__stage { display: flex; justify-content: center; margin: 0 auto; }
.te-pos__stage canvas {
  display: block; border-radius: 6px; box-shadow: 0 2px 12px rgba(0,0,0,0.18); background: #ddd; touch-action: none;
  cursor: grab; max-width: 100%;
}
.te-pos__stage canvas.te-pos__drag { cursor: grabbing; }
.te-pos__zoom { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; font-size: 0.82rem; color: #444; }
.te-pos__zoom label { font-weight: 700; font-size: 0.8rem; }
.te-pos__zoom input[type="range"] { flex: 1; accent-color: var(--te-orange); min-width: 0; }
.te-pos__zoom output { width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; }
.te-pos__shape { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 10px; font-size: 0.86rem; }
.te-pos__shape .te-pos-shape__k { font-size: 0.8rem; }
.te-pos__shape input[type="radio"] { accent-color: var(--te-orange); width: 16px; height: 16px; cursor: pointer; }
.te-pos__actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; }
.te-pos__actions .te-tf__link { font-size: 0.82rem; }
.te-pos__actions .te-pos__right { display: flex; gap: 8px; }
.te-pos__actions .te-btn { padding: 10px 18px; font-size: 0.88rem; }
.te-pos__finger { display: none; font-size: 0.76rem; color: #888; margin: 8px 0 0; text-align: center; }
@media (pointer: coarse) { .te-pos__finger { display: block; } .te-pos__wheel { display: none; } }
@media (max-width: 480px) {
  .te-pos__box { padding: 14px 14px 12px; }
  .te-pos__actions { flex-wrap: wrap; }
}

/* ── 4. rev 113 "Sharp Tiles" (2026-10-18, owner: "are these large tiles too large??"): Choose a Design's grid ──────
   tribute.css sets 4 across the 1150-px band from 700 px (~273 CSS px a tile, 819 tall: a 900-px window shows four
   half-cards, and 12 templates + 31 designs run 10,400 px). Here 5 across from 1100 px (~219 x 657; 6,900 px) — the
   detail the 5/10 tuning lost at 160 px came from a 480 picture shrunk 3 x, not from the tile: the tiles' srcset now
   names a copy near the tile's size (280 for the designs, 300 / 600 for the templates — views/tribute.ejs). Phones
   (2 across) and 700–1099 px (4 across) are as before. */
@media (min-width: 1100px) {
  .te-design-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ── 5. rev 114 "Photo First" (2026-10-19, owner: "drag photos into the example photo area, too...on the sample card";
   "the photo adjuster pops up...i like that...that feature doesnt work for the 'all designs' styles"; "we should do that
   similarly for the 'all designs' back only path") ──────────────────────────────────────────────────────────────── */
/* a photo held over a picture that takes it: the live back (both flows, where the back has a photo), the drawn front */
.te-lb__pic.te-lb__pic--drop, #te-tf-preview.te-tf__preview-card--drop { outline: 3px dashed var(--te-orange); outline-offset: 3px; }
.te-lb__pic.te-lb__pic--drop canvas, #te-tf-preview.te-tf__preview-card--drop img { opacity: 0.75; }
/* the back photo's row under the photo zone — the same look as Your front's row (#te-pos-row) */
#te-bpos-row { margin-top: 10px; }
#te-photo-preview img#te-photo-img { cursor: pointer; }
/* the Photo card before "About Your Loved One" on the stock flow's Memorial Details (the template flow keeps its own
   order: Your front asks for the photo first already, and its second-photo card sits after the back choice) */
#screen-2.te-lb-mode.te-lb-photo-first > .te-lb-photo-card { order: 2; }

/* ── 6. rev 121 "One Heading" (2026-10-19, owner: "is that too much? choose a design...and then design templates new
   their photo on front... seems like that can be consolidated"; "a sort tool... in this middle blank area") ────── */
/* the chip row under the heading: one pill per kind of design, All first; the pressed one in the house orange */
.te-cat-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 18px; }
.te-cat-chip { font: inherit; font-size: 0.86rem; font-weight: 600; line-height: 1; padding: 8px 14px; border: 1.5px solid #d9d2c7; border-radius: 999px;
  background: #fff; color: #5a534a; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; }
.te-cat-chip:hover { border-color: var(--te-orange); color: var(--te-orange); }
.te-cat-chip[aria-pressed="true"] { background: var(--te-orange); border-color: var(--te-orange); color: #fff; }
.te-cat-chip:focus-visible { outline: 3px solid var(--te-orange-light, #f5d5bd); outline-offset: 2px; }
/* a tile the chip hides — [hidden] loses to a display: rule (law 158), so say it here */
.te-design-card[hidden], #te-template-grid[hidden], #te-classic-head[hidden] { display: none !important; }
/* the classic grid's divider: the other half of the one line under the heading */
#te-classic-head { margin-top: 26px; }
@media (max-width: 699px) { .te-cat-row { gap: 6px; margin-bottom: 14px; } .te-cat-chip { font-size: 0.8rem; padding: 7px 12px; } }
/* rev 122 "One Line": the row sits on the 1150-px rail the heading and the grids escape to (tribute.css, 5/15/2026 — the
   page's column is 900 px), so the ten chips fit one line on a desktop; below 700 px the column is the page's, and the
   chips wrap as they must */
@media (min-width: 700px) {
  #screen-1 > .te-cat-row { width: calc(100vw - 32px); max-width: 1150px; position: relative; left: 50%; transform: translateX(-50%); }
}