/* "Simulate now" (js/ui/simulate.js + js/sim/engine.js). Fact = sage, Simulation = violet: never blended. */
:root { --fact: #4f6f45; --fact-bg: #e4ecd9; --fic: #6a4fa0; --fic-bg: #ece6f6; }
.sim {
  position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; background: var(--color-canvas); color: var(--color-ink); opacity: 0; transition: opacity .35s ease; }
.sim.is-open { opacity: 1; }
.sim.is-out { opacity: 0; pointer-events: none; }
.sim__top { display: flex; align-items: center; gap: 12px; padding: 12px clamp(14px, 3vw, 28px); border-bottom: 1px solid var(--color-border); }
.sim__title { display: grid; gap: 2px; margin-right: auto; min-width: 0; }
.sim__title b { font-family: var(--font-display); font-size: clamp(1.15rem, 2.4vw, 1.6rem); line-height: 1.1; }
.sim__title .mono { font-size: 10px; color: var(--color-ink-soft); }
.sim__body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 0; }
.sim__stage { display: flex; flex-direction: column; gap: 10px; padding: 14px clamp(14px, 2vw, 22px); min-width: 0; overflow: auto; }
.sim__frame { position: relative; border-radius: 16px; overflow: hidden; background: #1a140f; aspect-ratio: 480 / 272; max-height: calc(100dvh - 230px); margin: 0 auto; width: min(100%, calc((100dvh - 230px) * 480 / 272)); box-shadow: 0 18px 40px rgba(42, 31, 23, .2); }
.sim__frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.sim__year { position: absolute; left: 14px; bottom: 12px; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 4vw, 2.6rem); color: #fbf6ec; text-shadow: 0 2px 12px rgba(0, 0, 0, .7); pointer-events: none; }
.sim__frame > .sim__tag { position: absolute; left: 12px; top: 12px; }
.sim__toast { position: absolute; left: 12px; right: 12px; top: 44px; max-width: 520px; padding: 8px 12px; border-radius: 12px; background: rgba(251, 246, 236, .94); font-size: 13px; line-height: 1.4; opacity: 0; transform: translateY(-6px); transition: opacity .3s, transform .3s; pointer-events: none; }
.sim__toast.is-in { opacity: 1; transform: none; }
.sim__loading { position: absolute; inset: 0; display: grid; place-items: center; color: #fbf6ec; font-size: 11px; }
.sim__controls { display: flex; align-items: center; gap: 10px; width: min(100%, calc((100dvh - 230px) * 480 / 272)); margin: 0 auto; }
.sim__track { position: relative; flex: 1; }
.sim__track input { width: 100%; accent-color: var(--color-ink); }
.sim__ticks { position: absolute; left: 8px; right: 8px; top: -6px; height: 6px; pointer-events: none; }
.sim__ticks i { position: absolute; top: 0; width: 2px; height: 6px; margin-left: -1px; background: var(--fact); border-radius: 1px; }
.sim__simnote { margin: 0 auto; width: min(100%, calc((100dvh - 230px) * 480 / 272)); font-size: 12px; line-height: 1.5; color: var(--color-ink-soft); }
.sim__facts { border-left: 1px solid var(--color-border); overflow: auto; padding: 14px; display: grid; gap: 12px; align-content: start; background: var(--color-canvas-alt); }
.sim__card { border: 1px solid var(--color-border); border-radius: 14px; padding: 12px 14px; background: var(--color-surface); }
.sim__blurb { margin: 8px 0 6px; font-family: var(--font-display); font-size: 1.05rem; line-height: 1.35; }
.sim__dl { margin: 0; display: grid; gap: 8px; }
.sim__dl dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-brass, #A0672E); }
.sim__dl dd { margin: 2px 0 0; font-size: 14px; line-height: 1.4; }
.sim__dl small { display: block; margin-top: 2px; font-size: 9px; color: var(--color-ink-soft); }
.sim__log { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; max-height: 260px; overflow: auto; }
.sim__log li { font-size: 13px; line-height: 1.4; padding-left: 10px; border-left: 2px solid var(--fact); }
.sim__log .mono { font-size: 10px; color: var(--fact); display: block; }
.sim__ev { border: 0; background: none; padding: 0; color: var(--fact); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }
.sim__links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sim__tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; vertical-align: middle; }
.sim__tag--fact { background: var(--fact-bg); color: var(--fact); }
.sim__tag--sim { background: var(--fic-bg); color: var(--fic); }
.sim-cert { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; background: var(--color-surface-sunk); color: var(--color-ink-soft); vertical-align: 1px; }
.sim-cert--debated { background: #f6e4d6; color: #8a4b1f; }
@media (max-width: 900px) {
  .sim__body { grid-template-columns: 1fr; overflow: auto; }
  .sim__stage { overflow: visible; }
  .sim__facts { border-left: 0; border-top: 1px solid var(--color-border); overflow: visible; }
  .sim__frame, .sim__controls, .sim__simnote { width: min(100%, calc((100dvh - 150px) * 480 / 272)); max-height: none; }
}
@media (orientation: landscape) and (max-height: 540px) { .sim__top { padding: 6px 14px; } .sim__title .nasha-eyebrow { display: none; } .sim__stage { padding: 8px 14px; } }
@media (prefers-reduced-motion: no-preference) { .sim__log li:first-child { animation: film-rise .45s var(--ease-out, ease) both; } }

/* Tours page: the simulation cards */
.sim-list { margin: var(--space-4, 20px) 0 var(--space-5, 32px); }
.sim-list__head .lede { max-width: 62ch; }
.sim-list__grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin-top: 14px; }
.sim-card { display: grid; gap: 6px; align-content: start; text-align: left; cursor: pointer; padding: 12px; font: inherit; color: inherit; }
.sim-card .mono { font-size: 10px; color: var(--color-ink-soft); }
.sim-card b { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.15; }
.sim-card__blurb { font-size: 13px; color: var(--color-ink-soft); line-height: 1.4; }
.sim-card__art { aspect-ratio: 16 / 9; }
.sim-card__go { margin-top: 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #6a4fa0; }
.sim-btn::before { content: '▶ '; }

/* Inspect: tap anything in the scene to learn what it is, and which layer it belongs to */
.sim__inspect { position: absolute; z-index: 3; width: min(260px, 80%); transform: translate(-50%, calc(-100% - 12px)); padding: 10px 12px; border-radius: 12px; background: rgba(255, 252, 245, .97); color: var(--color-ink); box-shadow: 0 10px 30px rgba(0, 0, 0, .3); font-size: 13px; line-height: 1.4; pointer-events: none; animation: sim-pop .18s ease-out; }
.sim__inspect.is-below { transform: translate(-50%, 14px); }
.sim__inspect p { margin: 4px 0 0; color: var(--color-ink-soft, #5a4a3a); }
@keyframes sim-pop { from { opacity: 0; scale: .94; } }
.sim__hint { position: absolute; right: 12px; top: 12px; padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, .45); color: #fff; font-size: 10px; letter-spacing: .06em; pointer-events: none; }
.sim__how { margin-top: 6px; font-size: 12px; color: var(--color-ink-soft, #5a4a3a); }
.sim__how summary { cursor: pointer; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--fic); }
.sim__how ul { margin: 6px 0 0; padding-left: 18px; }
.chip--go { background: var(--fic-bg); color: var(--fic); }
.sim-btn__star { font-size: .85em; opacity: .8; }

/* Every chronicle card can be simulated */
.chron-item > .chron-card { padding-bottom: 38px; }
.chron-sim { position: absolute; right: 10px; bottom: 10px; z-index: 1; padding: 3px 9px; border: 0; border-radius: 999px; background: var(--fic-bg); color: var(--fic); font: 600 11px/1.4 var(--font-mono); letter-spacing: .04em; cursor: pointer; opacity: .8; transition: opacity .15s, transform .15s; }
.chron-sim:hover, .chron-sim:focus-visible { opacity: 1; transform: translateY(-1px); }

/* Tours: coverage of the auto-generated simulations */
.sim-any { display: grid; gap: 10px; margin-top: 14px; padding: 16px; border-radius: 16px; background: var(--fic-bg); }
.sim-any__kinds { display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--font-mono); font-size: 11px; color: var(--fic); }
.sim-any__kinds b { font-size: 14px; }

/* Tours on wide and ultrawide screens: use the width — simulations and guided tours side by side */
.tours-col__h { margin-top: 0; }
@media (min-width: 1700px) {
  .page--tours { max-width: min(2560px, 100%); }
  .tours-cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 0 var(--space-5, 32px); align-items: start; }
  .tours-cols > .sim-list { margin-top: 0; }
  .sim-list__grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .tours-col .tour-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); }
}