/* Validated.Directory 2.0.0 · the questions owners ask (DIR 2.0.0 part D, BEA-432). Loads after scene.css. The main act,
   at night: a trail from your web address to your record, past five questions owners ask, in order. The scroll walks
   it: a light runs to each question, which lights as its answer shows in the step line, and at the trail's end your
   record's Box V burns. guide.js pins the run and sets --u1 to --u5 and the signs' .on and .now; page.js draws the trail.
   Still (reduced motion, scripts off): every question lit, every answer written out, the record confirmed. */

.qv { background: var(--canvas); color: var(--cream); }
.qv .gs-stage > .sky { z-index: 0; }
.qv .gs-stage > :not(.sky) { position: relative; z-index: 1; }
.qv .gs-head h2 { max-width: 16ch; color: var(--white); }
.qv .gs-n { color: var(--cream-2); }
.qv .gs-k { font-family: var(--display); font-weight: 400; font-size: 21px; line-height: 1.15; color: var(--white); }
.qv .gs-t { color: var(--cream); }
.qv .gs-steps > li { border-top-color: rgba(240, 230, 207, 0.22); }
.m .qv .gs-out { border-top-color: rgba(240, 230, 207, 0.24); }
.m .qv .gs-t { min-height: calc(4 * 1.45em); }
.m .qv .gs-tk i { background: rgba(240, 230, 207, 0.2); }
.m .qv .gs-tk i.on { background: var(--gold-bright); }

/* The trail: its head, five signs winding left and right, its end. */
.qv-art { display: grid; gap: 16px; width: min(100%, 520px); padding: 4px 0; }
.qv-fx { display: none; }
.js .qv-fx { display: block; position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.qv-head, .qv-end, .qv-sign { position: relative; z-index: 2; }
.qv-head { justify-self: center; padding: 4px 8px 5px; border: 1px solid rgba(240, 230, 207, 0.5); background: var(--canvas); font: 500 11.5px/1.2 var(--mono); letter-spacing: 0.06em; color: var(--cream); }
.qv-signs { display: grid; gap: 16px; }
.qv-sign { display: flex; align-items: baseline; gap: 9px; width: 74%; padding: 8px 11px 9px; background: var(--night-2); border: 1px solid rgba(240, 230, 207, 0.4); color: var(--cream); transition: background-color 0.35s, border-color 0.35s, color 0.35s, box-shadow 0.35s; --cm: rgba(240, 230, 207, 0.5); }
.qv-sign:nth-child(even) { justify-self: end; }
.qv-n { font: 500 11px/1 var(--mono); color: var(--gold-bright); }
.qv-q { font: 400 16px/1.2 var(--display); }
.qv-sign.on, html:not(.m) .qv-sign { border-color: var(--gold-bright); }
.m .qv-sign.now { background: var(--paper-hi); border-color: var(--gold-bright); color: var(--ink); box-shadow: 0 0 0 1px var(--gold-bright), 0 0 26px -6px rgba(244, 196, 90, 0.6); --cm: var(--gold-bright); }
.m .qv-sign.now .qv-n { color: var(--gold-ink); }
.m .qv-sign:not(.on) { opacity: 0.55; }
.qv-end { justify-self: center; display: flex; align-items: center; gap: 10px; padding: 6px 12px 7px; background: var(--paper-hi); border: 1px solid var(--gold-ink); color: var(--ink); }
.qv-end .brand { position: relative; top: auto; right: auto; }
.qv-end .brand-day { flex-direction: row; gap: 8px; margin: 0; }
.qv-end .brand-day .iron { width: 34px; height: 34px; }
.qv-end .brand-day .b-label { text-align: left; font-size: 10px; }
.qv-end .brand-day .b-word { font-size: 10.5px; }
.qv-end-k { font: 500 11.5px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }

@media (max-width: 380px) {
  .qv-art, .qv-signs { gap: 12px; }
  .qv-sign { width: 82%; padding: 7px 9px 8px; }
  .qv-q { font-size: 15px; }
  .qv .gs-k { font-size: 19px; }
}
@media (max-width: 899px) and (max-height: 760px) {
  .m .qv .gs-head h2 { max-width: 20ch; }
  .m .qv .gs-t { min-height: calc(4 * 1.45em); font-size: 14.5px; }
}
@media (min-width: 900px) {
  .qv .gs-stage { max-width: none; padding-left: var(--read-x); padding-right: var(--read-x); }
  .qv .gs-k { font-size: 28px; }
  .m .qv .gs-t { min-height: calc(3 * 1.42em); }
  .qv-art { width: min(100%, 620px); gap: 22px; }
  .qv-signs { gap: 22px; }
  .qv-sign { width: 66%; padding: 11px 15px 12px; }
  .qv-n { font-size: 12.5px; }
  .qv-q { font-size: 22px; }
  .qv-head { font-size: 13px; }
  .qv-end .brand-day .iron { width: 42px; height: 42px; }
  .qv-end .brand-day .b-label { font-size: 11px; }
  .qv-end .brand-day .b-word { font-size: 11.5px; }
  .qv-end-k { font-size: 13px; }
}
/* Before the burn the end of the trail is an empty survey square beside "your record"; the label arrives with the burn. */
.m .qv-end .brand-day:not(.burn) .b-label { display: none; }
.m .qv-end .brand-day:not(.burn) .iron { outline: 1px dashed rgba(35, 31, 26, 0.45); outline-offset: -5px; }