/* F1/F6: die Hülle. Die sechs Maß-Variablen (--frame-w, --frame-h,
   --slide-h, --rail-h, --rail-progress-h, --rail-tabs-h) kommen nicht als
   Zahl in dieser Datei vor, sondern werden von tools/build.ts aus
   src/manifest.ts (der einzigen Quelle für diese Zahlen) in den Kopf von
   dist/index.html geschrieben. So kann die Schnittkante y=1864 nie
   zwischen Code und Bild auseinanderlaufen.

   Letterbox ohne JavaScript (ISC-34): #stage trägt aspect-ratio und wird
   von #viewport zentriert; was nicht in die Fläche passt, bleibt schwarzer
   Rand statt Verzerrung, bei jedem Seitenverhältnis.

   Farben, aus dem Entwurf gemessen (grill.md, Python/PIL gegen
   /private/tmp/pptx-probe/stitched/slide-01.png): Orange 237/114/47,
   dunkler Kachelgrund der Leiste 39/25/24. Schriftart bewusst nur
   System-Stack (F6, ISC-33: die Wand läuft nach dem ersten Laden ohne
   Netz, ein nachgeladenes Webfont wäre offline ein Risiko). */

:root {
  --color-orange: #ed722f;
  --color-track: #271918;
  --font-sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
}

#viewport {
  width: 100vw;
  height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

#stage {
  aspect-ratio: var(--frame-w) / var(--frame-h);
  width: min(100vw, calc(100vh * var(--frame-w) / var(--frame-h)));
  height: min(100vh, calc(100vw * var(--frame-h) / var(--frame-w)));
  display: flex;
  flex-direction: column;
  background: #0a0a0a;
  overflow: hidden;
  /* Erlaubt cqw/cqh in jedem Nachfahren (Leiste, Familienleiste, Hotspot):
     da #stage ein festes Seitenverhältnis hat, bleibt 1cqw immer derselbe
     Anteil von 3840, egal wie groß die Bühne tatsächlich gerendert wird. */
  container-type: size;
  container-name: stage;
}

/* F1/F4: #slide-frame trägt das Flex-Maß, das früher direkt auf
   #slide-area lag. #slide-area (Bild- oder HTML-Träger) und #slide-overlay
   (Familienleiste, Hotspot Folie 12) sind beide absolut positionierte
   Kinder darüber -- #slide-area wird bei jedem Folienwechsel komplett
   ersetzt (viewer.ts), ein Kind darin würde jeden Wechsel verlieren.
   #slide-overlay lebt deshalb daneben, nicht darin. */
#slide-frame {
  flex: var(--slide-h) 1 0;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

#slide-area {
  position: absolute;
  inset: 0;
}

#slide-area img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* pointer-events:none auf dem Überzug selbst, damit ein Klick auf die
   Bildfläche unter der Familienleiste normal vorblättert (ISC-11); die
   beiden bedienbaren Kinder holen sich ihre Klickbarkeit gezielt zurück. */
#slide-overlay {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* S8 (27.08.2026): die Bedienleiste, zeichengenau nach dem Vorbild
   uebernommen -- Werte aus ~/Developer/biz/active/architecture-view/src/
   03-styles.css (.jv-rail/.jv-rail-btn/.jv-rail-collapsed), die dieselbe
   Leiste bereits in reinem HTML/CSS zeigen, plus den Kartentoken aus
   ViewControls.tsx (TOKENS). Feste Pixelwerte, bewusst KEINE cqw/cqh-
   Einheiten: die Leiste sitzt (anders als #rail-slot/.rail-tabs) nicht
   im mitskalierenden #stage, sondern in #rail-icon-slot, einem
   Geschwister von #stage direkt in #viewport (siehe index.html-Kommentar)
   -- exakt derselbe Aufbau wie in den drei Geschwister-Anwendungen, wo
   die Leiste ebenfalls ausserhalb der skalierten Flaeche liegt. So bleibt
   top:16px/left:16px/40px-Knopf bei jeder Fenstergroesse identisch mit
   hub.journai.ch, workforce.journai.ch und architecture.journai.ch. */
.jv-rail {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 50;
  background: #ffffff;
  border: 1px solid rgba(39, 25, 24, 0.08);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(39, 25, 24, 0.06);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jv-rail-btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 6px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 120ms ease;
  cursor: pointer;
  background: transparent;
  color: #271918;
  font-family: var(--font-sans);
}

.jv-rail-btn svg {
  width: 18px;
  height: 18px;
  flex: none;
  display: block;
}

.jv-rail-btn:hover,
.jv-rail-btn:focus-visible {
  background: #f4f2ef;
}

.jv-rail-btn:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 2px;
}

/* Stumm (der eigene Eintrag, S8-LEISTE-SPEZIFIKATION.md): sichtbar,
   gedaempft, ohne Verweis, nicht anklickbar. disabled im Markup ist die
   eigentliche Abnahmestelle, diese Regel traegt nur die Optik dazu. */
.jv-rail-btn[disabled] {
  background: transparent;
  color: rgba(39, 25, 24, 0.72);
  opacity: 0.4;
  cursor: default;
}

.jv-rail-btn[disabled]:hover,
.jv-rail-btn[disabled]:focus-visible {
  background: transparent;
}

/* Aktiv-Zustand (Kadenz-Knopf bei geoeffnetem Popover): TOKENS.accentTint
   / TOKENS.accent aus ViewControls.tsx, keine Geschwister-Referenz noetig,
   weil kein Geschwister derzeit ein aufklappendes Feld besitzt. */
.jv-rail-btn-active {
  background: rgba(237, 114, 47, 0.1);
  color: var(--color-orange);
}

.jv-rail-divider {
  height: 1px;
  background: rgba(39, 25, 24, 0.08);
  margin: 4px 6px;
}

.jv-rail-collapsed {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 50;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(39, 25, 24, 0.08);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(39, 25, 24, 0.06);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 120ms ease;
  cursor: pointer;
  background: #ffffff;
  color: #271918;
}

.jv-rail-collapsed svg {
  width: 18px;
  height: 18px;
  flex: none;
  display: block;
}

.jv-rail-collapsed:hover,
.jv-rail-collapsed:focus-visible {
  background: #f4f2ef;
}

.jv-rail-collapsed:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 2px;
}

/* Kadenz-Feld: kein Geschwister besitzt derzeit ein aufklappendes Feld
   (architecture-view-Kommentar: "Aktiv-Balken, Trenner und aufklappendes
   Feld ... fehlen hier bewusst", weil jene Wand keinen
   anwendungsspezifischen Teil hat). Werte deshalb von SidePopover in
   ViewControls.tsx uebernommen (Karte, Rundung, Schatten, Kopfzeile),
   Breite an den kurzen Inhalt angepasst statt der dortigen festen 260px. */
.jv-popover {
  position: absolute;
  top: 0;
  left: calc(100% + 8px);
  background: #ffffff;
  border: 1px solid rgba(39, 25, 24, 0.08);
  border-radius: 8px;
  box-shadow:
    0 8px 28px rgba(39, 25, 24, 0.1),
    0 2px 6px rgba(39, 25, 24, 0.05);
  padding: 14px;
  z-index: 10;
  white-space: nowrap;
}

.jv-popover-title {
  font-family: var(--font-sans);
  font-size: 12px;
  color: rgba(39, 25, 24, 0.72);
  font-weight: 600;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.jv-popover-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.jv-popover-btn {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(39, 25, 24, 0.08);
  border-radius: 6px;
  background: #f4f2ef;
  color: #271918;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.jv-popover-btn:hover,
.jv-popover-btn:focus-visible {
  background: rgba(237, 114, 47, 0.1);
  color: var(--color-orange);
}

.jv-popover-value {
  min-width: 34px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 600;
  color: #271918;
  font-family: var(--font-sans);
}

/* F4 (ISC-20): der eingebrannte Knopf "EXPLORE JOURNAI ORGCHART" auf
   Folie 12, gemessen als Anteil der Folienfläche (grill.md, Nachtrag
   27.08.). Unsichtbar -- die orange Fläche darunter ist bereits Teil des
   Bilds, der Hotspot macht sie nur klickbar. */
.hotspot-orgchart {
  position: absolute;
  left: 5.2%;
  top: 63.5%;
  width: 33.4%;
  height: 7.5%;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
}

.hotspot-orgchart:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* F3: die lebendige Leiste. #rail-slot trägt weiterhin exakt die Höhe
   296/2160 der Bühne (unverändert seit F1); intern teilt sie sich in die
   Fortschrittsreihe und die Sektionsspur, im selben Verhältnis wie im
   Entwurf gemessen (116 zu 180 von 296). */
#rail-slot {
  flex: var(--rail-h) 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-track);
  font-family: var(--font-sans);
  color: #fff;
}

.rail-progress {
  flex: var(--rail-progress-h) 1 0;
  min-height: 0;
  position: relative;
  overflow: hidden;
  background: var(--color-track);
}

/* ISC-15: die Breite entspricht Folie/13, als Inline-style von rail.ts
   gesetzt. transition macht den Sprung bei jedem Folienwechsel sichtbar
   statt hart. */
.rail-progress-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: var(--color-orange);
  transition: width 0.4s ease;
}

/* S8: Durchlauf (Play/Pause) und Kadenz sind in die Bedienleiste
   gewandert (.jv-rail oben) -- die linke Zelle dieses Rasters bleibt
   deshalb leer (kein Element mehr), aber grid-template-columns bleibt
   unverändert 1fr/auto/1fr, und Zähler wie Sektionsname bekommen ihre
   Spalte jetzt ausdrücklich zugewiesen (grid-column). So sitzen beide
   exakt an derselben Stelle wie zuvor: eine leere erste Spalte verschiebt
   an einem 3-Spalten-Grid nichts, ein stillschweigendes Nachrücken durch
   die fehlende Auto-Platzierung (ohne grid-column) hätte sie dagegen
   nach links gezogen. */
.rail-progress-content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1cqw;
  padding: 0 1.6cqw;
}

.rail-btn {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  border-radius: 0.6cqw;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 1.05cqw;
  line-height: 1;
  padding: 0.7cqh 0.9cqw;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rail-btn:hover,
.rail-btn:focus-visible {
  background: rgba(255, 255, 255, 0.2);
}

/* ISC-17: einzeilig, ausdrücklich der Fehler, der im Entwurf verschwinden
   soll (Zähler bricht dort über zwei Zeilen um). white-space:nowrap plus
   ein flex-Kind ohne Umbruchmöglichkeit garantiert das strukturell, nicht
   nur zufällig bei diesem einen Viewport. grid-column:2 haelt ihn in der
   mittleren Rasterspalte, unabhängig davon, dass die erste Spalte jetzt
   leer ist (S8, siehe .rail-progress-content-Kommentar oben). */
.rail-counter {
  display: flex;
  align-items: center;
  gap: 0.6cqw;
  grid-column: 2;
  justify-self: center;
  white-space: nowrap;
}

.rail-counter-value {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: 1.2cqw;
  font-weight: 700;
}

.rail-prev,
.rail-next {
  width: 2.2cqw;
  height: 2.2cqw;
  padding: 0;
  border-radius: 50%;
  font-size: 1.3cqw;
}

.rail-section-name {
  grid-column: 3;
  justify-self: end;
  font-size: 1.1cqw;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rail-tabs {
  flex: var(--rail-tabs-h) 1 0;
  min-height: 0;
  display: flex;
  background: var(--color-track);
}

.rail-tab {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 1.05cqw;
  font-weight: 500;
  cursor: pointer;
  padding: 0 0.6cqw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rail-tab:last-child {
  border-right: 0;
}

.rail-tab:hover,
.rail-tab:focus-visible {
  background: rgba(255, 255, 255, 0.08);
}

.rail-tab-active {
  background: var(--color-orange);
  font-weight: 700;
}

.rail-tab-active:hover,
.rail-tab-active:focus-visible {
  background: var(--color-orange);
}