/* RETRO-DECK MD-1 — aperçu navigateur : bandeau et ajustements de hauteur. */
:root { --demo-h: 38px; }
body { padding-top: var(--demo-h); box-sizing: border-box; }
#app { height: calc(100vh - var(--demo-h)); }
.write { height: calc(100vh - var(--demo-h) - 88px); }
body[data-view="write"] .write { height: calc(100vh - var(--demo-h) - 86px); }
:root.tunnel .write { height: calc(100vh - var(--demo-h) - 116px); }

#demo-bar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--demo-h); z-index: 30;
  display: flex; align-items: center; gap: 14px; padding: 0 14px;
  background: var(--ink); color: var(--paper); font: 400 12.5px var(--mono);
  white-space: nowrap; overflow: hidden;
}
#demo-bar b { letter-spacing: .06em; }
#demo-bar .db-t { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
#demo-bar form { display: flex; gap: 6px; align-items: center; }
#demo-bar input[type=email] {
  width: 190px; padding: 3px 8px; border: 1px solid var(--paper); background: var(--ink); color: var(--paper);
  font: 400 12.5px var(--mono);
}
#demo-bar input::placeholder { color: #9a9993; }
#demo-bar button, #demo-bar a.db-cta {
  background: var(--paper); color: var(--ink); border: 0; padding: 4px 10px; font: 700 12px var(--mono);
  text-decoration: none; cursor: pointer; letter-spacing: .03em;
}
#demo-bar button#demo-reset { background: transparent; color: var(--paper); border: 1px solid var(--paper); }
#demo-bar a.db-cta.o { background: transparent; color: var(--paper); border: 1px solid var(--paper); }
#demo-bar #demo-msg { min-width: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* parcours réduit : les écrans qui demandent de vrais fichiers n'ont pas de sens dans l'aperçu */
#nav button[data-v="review"], #nav button[data-v="dump"], #nav button[data-v="bilan"] { display: none; }

/* bouton de sortie toujours visible pendant le tunnel et le sprint */
.tbar .demo-exit {
  margin-left: 14px; background: var(--paper); color: var(--ink); border: 0; padding: 2px 10px;
  font: 700 12px var(--mono); cursor: pointer; pointer-events: auto;
}

@media (max-width: 980px) { #demo-bar .db-t { display: none; } }
@media (max-width: 760px) { #demo-bar input[type=email] { width: 120px; } #demo-bar a.db-cta.o { display: none; } }

/* la barre de raccourcis façon nano et le bouton « → FICHE » n'ont pas de sens dans l'aperçu */
#nano, #to-card { display: none; }

/* pack de fiches : le formulaire d'attente laisse la place au bouton quand le pack est actif */
html.pack-on #demo-form { display: none; }
#pack-ovl .packwrap { max-width: 560px; }
#pack-ovl .pack-form input[type=email] { background: var(--paper); }