/* =============================================================================
   ECOSOUND · THE FLIER DEMO  (docs/plans/PLAN-DEMO.md)

   The demo's only new parts, in the portal's own make: the guide (a Mint
   band under the ink bar, and the note at the top of the page), the intro
   and the closing card. Loaded by demo.html only, after portal.css. Tokens
   only; every class is `dm-`. Markup: js/demo/views.js.
   ============================================================================= */

/* ---- the guide: the band -------------------------------------------------------- */
.dm-guide { flex: none; position: relative; z-index: 20; background: var(--ecs-green-200); border-bottom: 1px solid var(--ecs-green-300); }
.dm-guide__in { max-width: var(--wk-max); height: 48px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 18px; box-sizing: border-box; }
.dm-guide__sp { flex: 1; }

/* "Example data": an outline tag, on every page. */
.dm-tag { flex: none; display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border: 1px solid rgba(44, 46, 53, 0.22); font: 500 11px var(--ecs-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ecs-text-mint); white-space: nowrap; }

/* The stops, as text tabs on the band: the open one in ink over a 2px ink rule. */
.dm-steps { display: flex; align-self: stretch; gap: 2px; min-width: 0; }
.dm-step { display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; border: 0; background: none; box-shadow: inset 0 -2px 0 transparent; font: 500 14px var(--ecs-font-display); color: var(--ecs-text-mint); white-space: nowrap; cursor: pointer; transition: color var(--ecs-dur-fast) var(--ecs-ease), box-shadow var(--ecs-dur-fast) var(--ecs-ease); }
.dm-step:hover { color: var(--ecs-ink); }
.dm-step.is-here { color: var(--ecs-ink); box-shadow: inset 0 -2px 0 var(--ecs-ink); }
.dm-step__n { font: 500 12px var(--ecs-font-mono); }
.dm-step:focus-visible { outline-offset: -4px; }

.dm-next { display: inline-flex; align-items: center; gap: 6px; padding: 6px 2px; border: 0; background: none; font: 500 14px var(--ecs-font-display); color: var(--ecs-green-600); white-space: nowrap; cursor: pointer; }
.dm-next:hover { color: var(--ecs-forest-600); text-decoration: underline; text-underline-offset: 3px; }
.dm-next svg, .dm-book svg { transition: transform var(--ecs-dur-fast) var(--ecs-ease-out); }
.dm-next:hover svg { transform: translateX(2px); }

/* PT | EN, a two-way switch: the language in use is ink on white. */
.dm-lang { flex: none; display: inline-flex; height: 28px; border: 1px solid rgba(44, 46, 53, 0.22); }
.dm-lang__it { min-width: 34px; padding: 0 8px; border: 0; background: transparent; font: 500 12px var(--ecs-font-mono); letter-spacing: 0.06em; color: var(--ecs-text-mint); cursor: pointer; }
.dm-lang__it + .dm-lang__it { border-left: 1px solid rgba(44, 46, 53, 0.22); }
.dm-lang__it:hover { color: var(--ecs-ink); }
.dm-lang__it[aria-pressed="true"] { background: var(--ecs-surface); color: var(--ecs-ink); cursor: default; }

.wk-screen a.dm-book, .dm-book { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 2px; font: 500 14px var(--ecs-font-display); color: var(--ecs-green-600); text-decoration: none; white-space: nowrap; }
.wk-screen a.dm-book:hover { color: var(--ecs-forest-600); text-decoration: underline; text-underline-offset: 3px; }
.dm-book:hover svg { transform: translate(2px, -2px); }

/* The phone's reading of the stops: hidden until the band has no room. */
.dm-reader { display: none; }
.dm-arrow { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--ecs-ink); cursor: pointer; }
button.dm-arrow:hover { background: var(--ecs-green-300); }
.dm-reader__now { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.dm-reader__tag { font: 500 11px/1.2 var(--ecs-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ecs-text-mint); }
.dm-reader__step { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 15px/1.2 var(--ecs-font-display); color: var(--ecs-ink); }

/* ---- the guide: the note at the top of the page ---------------------------------- */
.dm-note { background: var(--ecs-green-100); border-bottom: 1px solid var(--ecs-green-300); }
.dm-note.is-bare { display: none; }
.dm-note__in { max-width: var(--wk-max); margin: 0 auto; padding: 12px 24px 13px; box-sizing: border-box; }
.dm-note__tx { margin: 0; max-width: 80ch; font: 400 15px/1.5 var(--ecs-font-body); color: var(--ecs-text-meadow); text-wrap: pretty; }
.dm-note__phone { display: none; }

/* The upload moment's one button, under its line while the draft is empty. */
.dm-note__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 12px; }
.dm-note__fine { font-size: 13px; line-height: 1.45; color: var(--ecs-text-meadow); }

/* The upload plays sped up (js/demo/play.js), so its speed and time left would
   be false. The guide's line says what a real one takes. */
#ecs-up-rate, #ecs-up-eta { display: none; }

/* ---- the intro ----------------------------------------------------------------------- */
.dm-intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: start; padding-top: 20px; }
.dm-intro__lead { padding-top: 8px; }
.dm-intro__title { margin: 0; max-width: 24ch; font: 700 36px/1.12 var(--ecs-font-display); letter-spacing: -0.02em; color: var(--ecs-ink); text-wrap: balance; }
.dm-intro .wk-meta { margin-top: 16px; }
.dm-intro__line { margin: 16px 0 0; max-width: 52ch; font: 400 16px/1.55 var(--ecs-font-body); color: var(--ecs-text-2); text-wrap: pretty; }
.dm-intro__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* The batch's moments, in order: the journey rail's marks, laid out as a list. */
.dm-routecard { padding-bottom: 8px; }
.dm-route { margin: 4px -24px 0; padding: 0; list-style: none; }
.dm-route li { position: relative; }
.dm-route li:not(:last-child)::after { content: ""; position: absolute; left: 37px; top: 44px; bottom: -14px; width: 2px; background: var(--ecs-line); }
.dm-route__it { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) 16px; gap: 14px; align-items: start; width: 100%; box-sizing: border-box; padding: 14px 24px; border: 0; background: transparent; text-align: left; font: inherit; color: inherit; }
button.dm-route__it { cursor: pointer; transition: background var(--ecs-dur-fast) var(--ecs-ease); }
button.dm-route__it:hover { background: var(--ecs-surface-2); }
.dm-route__it:focus-visible { outline-offset: -3px; box-shadow: none; }
.dm-route__mk { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 28px; height: 28px; border-radius: 999px; border: 2px solid var(--ecs-line-field); background: var(--ecs-surface); font: 500 12px var(--ecs-font-mono); color: var(--ecs-text-muted); }
.dm-route__it.is-ready { background: var(--ecs-green-100); }
button.dm-route__it.is-ready:hover { background: var(--ecs-green-200); }
.is-ready > .dm-route__mk { border-color: var(--ecs-ink); color: var(--ecs-ink); }
.dm-route__it:not(.is-ready) .dm-route__nm { color: var(--ecs-text-muted); }
.dm-route__tx { min-width: 0; padding-top: 3px; }
.dm-route__nm { display: block; font: 500 15px/1.3 var(--ecs-font-display); color: var(--ecs-ink); }
.dm-route__ln { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--ecs-text-muted); }
.dm-route__go { align-self: center; display: inline-flex; color: var(--ecs-green-600); transition: transform var(--ecs-dur-fast) var(--ecs-ease-out); }
button.dm-route__it:hover .dm-route__go { transform: translateX(2px); }

/* ---- the closing card --------------------------------------------------------------- */
.dm-end { max-width: 860px; padding-top: 28px; }
.dm-end__card { padding: 40px 44px 36px; background: var(--ecs-forest-900); color: var(--ecs-on-dark); }
.dm-end__card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 28px 40px; }
.dm-end__qr { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0; }
.dm-end__code { display: block; box-sizing: border-box; width: 176px; height: 176px; padding: 12px; background: #fff; color: var(--ecs-ink-deep, #24262C); }
.dm-end__qr figcaption { display: flex; flex-direction: column; align-items: center; gap: 2px; font: 500 13px/1.35 var(--ecs-font-body); color: var(--ecs-on-dark-2); text-align: center; text-wrap: balance; }
.dm-end__qr figcaption span { white-space: nowrap; font: 400 12px/1.35 var(--ecs-font-mono); color: var(--ecs-on-dark-3); }
.dm-end__title { margin: 0; max-width: 20ch; font: 700 30px/1.15 var(--ecs-font-display); letter-spacing: -0.01em; color: var(--ecs-on-dark); text-wrap: balance; }
.dm-end__line { margin: 14px 0 0; max-width: 54ch; font: 400 16px/1.6 var(--ecs-font-body); color: var(--ecs-on-dark-2); text-wrap: pretty; }
.dm-end__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.wk-screen .dm-end__acts a.ecs-btn--bright { color: var(--ecs-forest-900); }
.wk-screen .dm-end__acts a.ecs-btn--ondark { color: var(--ecs-on-dark); }
.dm-end__acts .ecs-btn svg { transition: transform var(--ecs-dur-fast) var(--ecs-ease-out); }
.dm-end__acts .ecs-btn:hover svg { transform: translate(2px, -2px); }
.dm-end__inbox { margin: 20px 0 0; font-size: 13px; color: var(--ecs-on-dark-3); }
.dm-end__card :focus-visible { outline: 2px solid var(--ecs-focus-on-dark); outline-offset: 2px; box-shadow: none; }
.dm-end__more { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 18px; }

/* ---- narrower ---------------------------------------------------------------------- */
@media (max-width: 920px) {
  .dm-guide__in { gap: 0; padding: 0 4px; }
  .dm-guide .dm-tag, .dm-guide .dm-steps, .dm-guide .dm-next, .dm-guide .dm-lang, .wk-screen .dm-guide a.dm-book, .dm-guide__sp { display: none; }
  .dm-guide.is-intro { display: none; }
  .dm-reader { display: flex; align-items: center; width: 100%; }

  .dm-note.is-bare { display: block; }
  .dm-note__phone { display: flex; align-items: center; gap: 12px; }
  .dm-note__phone .dm-book { margin-left: auto; }
  .dm-note__tx { margin-top: 10px; }
  .dm-note__acts .ecs-btn { flex: 1 1 auto; justify-content: center; }

  .dm-intro { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 8px; }
}
@media (max-width: 640px) {
  .dm-note__in { padding: 10px 16px 12px; }
  /* The switch and Book a call within a thumb's reach (44px, like the reader's
     arrows). Portuguese and the intro's tag can outrun one row at 390px, so the
     row wraps rather than pushing the page sideways. */
  .dm-note__phone { flex-wrap: wrap; row-gap: 4px; }
  .dm-lang { height: 40px; }
  .dm-lang__it { position: relative; min-width: 44px; font-size: 13px; }
  .dm-lang__it::after { content: ""; position: absolute; inset: -3px 0; }
  .wk-screen a.dm-book, .dm-book { min-height: 44px; padding: 0 2px; }
  .dm-intro__title { max-width: none; font-size: 30px; }
  .dm-intro__line { font-size: 15px; }
  .dm-intro__acts .ecs-btn { flex: 1 1 auto; }
  .dm-route { margin: 4px -16px 0; }
  .dm-route__it { padding: 14px 16px; }
  .dm-route li:not(:last-child)::after { left: 29px; }
  .dm-end { padding-top: 8px; }
  .dm-end__card { display: block; padding: 28px 20px 26px; }
  /* A phone is already on the demo: the code is for the screen it is scanned from. */
  .dm-end__qr { display: none; }
  .dm-end__title { font-size: 22px; }
  .dm-end__line { font-size: 15px; }
  .dm-end__acts .ecs-btn { flex: 1 1 auto; }
}