/* Parcours ITI: cinematic map, live agent window, speed control. Sizes follow screen height. */
html, body.tour { height: 100%; margin: 0; overflow: hidden; background: var(--night); font-size: clamp(14px, 1.85vh, 26px); line-height: 1.42; }
#map { position: fixed; inset: 0; background: #EDE6D8; }

#ttl { position: fixed; left: 2.4vw; bottom: 12vh; z-index: 5; max-width: 56vw; pointer-events: none; color: var(--ink); text-shadow: 0 0 1.4vh rgba(255, 255, 255, .95), 0 0 .3vh rgba(255, 255, 255, .9); }
#ttl.in { animation: ttlIn 1.2s var(--ease); }
#ttl b { display: block; font: 380 7.4vh/1.02 var(--serif); letter-spacing: -.014em; }
#ttl span { font-size: 1.35rem; }
@keyframes ttlIn { from { opacity: 0; transform: translateY(2vh); } }

#metrics { position: fixed; left: 2.4vw; top: 3vh; z-index: 5; display: flex; gap: .7vw; }
#metrics[hidden] { display: none; }
#metrics div { background: rgba(251, 248, 241, .95); border-radius: 6px; padding: 1vh 1.1vw; min-width: 8.4vw; box-shadow: 0 .6vh 2vh rgba(23, 33, 31, .14); }
#metrics b { display: block; font: 380 3.9vh/1.05 var(--serif); font-feature-settings: "tnum"; white-space: nowrap; }
#metrics span { font-size: .76rem; color: var(--ink-2); display: block; max-width: 11vw; line-height: 1.25; margin-top: .3vh; }
#source { position: fixed; left: 2.4vw; top: 15.4vh; z-index: 5; font-size: .74rem; max-width: 56vw; background: rgba(251, 248, 241, .88); padding: .2em .7em; border-radius: 4px; }
#source[hidden] { display: none; }

#chat { position: fixed; right: 1.2vw; top: 2vh; bottom: 8.4vh; width: min(32vw, 540px); z-index: 6; display: flex; flex-direction: column; background: rgba(16, 27, 26, .94); color: var(--paper); border-radius: 10px; box-shadow: 0 1.6vh 5vh rgba(16, 27, 26, .4); }
#chat header { display: flex; gap: .8vw; align-items: center; padding: 1.6vh 1.2vw; border-bottom: 1px solid rgba(246, 241, 231, .14); }
#chat h3 { font: 420 2.7vh/1.1 var(--serif); margin: 0; }
#chat header p { margin: 0; font-size: .74rem; color: #AEB6AE; }
.live { width: 1.1vh; height: 1.1vh; border-radius: 50%; background: #57C98A; box-shadow: 0 0 0 .4vh rgba(87, 201, 138, .22); animation: pulse 1.6s ease-in-out infinite; flex: none; }
@keyframes pulse { 50% { box-shadow: 0 0 0 .8vh rgba(87, 201, 138, .06); } }
#log { flex: 1; min-height: 0; overflow-y: auto; padding: 1.4vh 1.2vw; scrollbar-width: none; }
#log article { margin-bottom: 2.6vh; }
#log h4 { margin: 0 0 .7vh; font-size: .72rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: #E6A070; }
#log p { margin: 0 0 1.1vh; font-size: 1.14rem; line-height: 1.42; }
#log p b { color: #FFD9B8; font-weight: 600; }
.think { font-size: .84rem; color: #AEB6AE; padding: .2vh 0 .9vh 1.4em; position: relative; }
.think::before { content: ""; position: absolute; left: .1em; top: .42em; width: .6em; height: .6em; border-radius: 50%; border: 2px solid #E6A070; border-right-color: transparent; animation: spin .8s linear infinite; }
.think.done::before { animation: none; background: #E6A070; }
@keyframes spin { to { transform: rotate(360deg); } }
#chat footer { background: none; padding: 1vh 1.2vw; font-size: .68rem; color: #8E978F; border-top: 1px solid rgba(246, 241, 231, .14); line-height: 1.3; }

#closing { position: fixed; left: 2.4vw; top: 20vh; max-width: 58vw; z-index: 7; background: rgba(246, 241, 231, .92); padding: 3.4vh 2.2vw; border-radius: 10px; box-shadow: 0 1.4vh 4vh rgba(23, 33, 31, .16); animation: ttlIn 1.4s var(--ease); }
#closing[hidden] { display: none; }
#closing blockquote { margin: 0; font: 380 8vh/1.06 var(--serif); letter-spacing: -.014em; color: var(--terra); text-shadow: 0 0 1.6vh rgba(255, 255, 255, .9); }
#closing p { font-size: 1.2rem; }
#replay { border: 0; background: var(--ink); color: var(--paper); border-radius: 999px; padding: .8vh 1.4vw; cursor: pointer; }

#bar { position: fixed; left: 0; right: 0; bottom: 0; height: 6.6vh; min-height: 46px; z-index: 12; display: flex; align-items: center; gap: .7vw; padding: 0 1.2vw; background: rgba(16, 27, 26, .95); color: var(--paper); font-size: .84rem; }
#bar button, #bar .back { border: 0; background: rgba(246, 241, 231, .12); color: var(--paper); height: 3.8vh; min-height: 30px; min-width: 3vw; padding: 0 .7vw; border-radius: 4px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; font-size: .84rem; white-space: nowrap; }
#bar button:hover, #bar .back:hover { background: var(--terra); }
#dots { flex: 1; display: flex; gap: .3vw; align-items: center; min-width: 0; }
#dots button { flex: 1; min-width: 0; padding: 0; height: .7vh; min-height: 5px; border-radius: 3px; background: rgba(246, 241, 231, .22); }
#dots button.done { background: #E6A070; }
#dots button.on { background: #fff; }
#nextUp { white-space: nowrap; color: #BEC5BC; font-size: .78rem; }
#nextUp i { font-style: normal; color: #E6A070; margin-left: .3em; }
#nextUp i.ok { color: #57C98A; }
.spd { display: inline-flex; align-items: center; gap: .5vw; white-space: nowrap; }
.spd input { width: 9vw; min-width: 90px; accent-color: #E6A070; }
.spd output { min-width: 2.6em; font-feature-settings: "tnum"; font-weight: 600; color: #FFD9B8; }
.pin { position: relative; width: 0; height: 0; z-index: 4; }
.pin i { position: absolute; left: -1.2vh; top: -1.2vh; width: 2.4vh; height: 2.4vh; border-radius: 50%; background: var(--terra); box-shadow: 0 0 0 .4vh #fff; }
.pin i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--terra); animation: ping 1.8s ease-out infinite; }
@keyframes ping { to { transform: scale(4.5); opacity: 0; } }
.pin b { position: absolute; left: 2vh; top: -1.6vh; white-space: nowrap; background: var(--ink); color: var(--paper); font: 600 1rem var(--sans); padding: .15em .6em; border-radius: 4px; }
.maplibregl-ctrl-bottom-right { bottom: 6.6vh; right: min(33.5vw, 565px); }