/* ══ COCKPIT — dock.css · Doc-Dock (U1) + Reiseplan (U3) ══
   ROBUST v3: Dock ist IMMER position:fixed (entkoppelt vom Content-Fluss),
   Panel-Modus ab 1240px, darunter Drawer. Geschlossener Drawer = unsichtbar.
   Der Reiseplan (.voyage) steht bewusst am Dateianfang und ist von jeder
   Dock-Media-Query unabhängig. */

/* ══════════ REISEPLAN (Detail) — eigenständig, keine Media-Query nötig ══════════ */
.voyage {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(1rem, 3vw, 2.4rem); align-items: center;
  background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 1rem 1.3rem; margin-bottom: 1.5rem;
  box-shadow: 0 1px 3px rgba(27, 24, 19, .05);
}
.voyage__k { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .13em; text-transform: uppercase; color: var(--fg-dim); }
.voyage__port { font-family: var(--f-disp); font-weight: 800; font-stretch: 116%; font-size: 1.05rem; margin-top: .15rem; }
.voyage__date { font-family: var(--f-mono); font-size: .74rem; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.voyage__end--r { text-align: right; }
.voyage__track { min-width: 0; }
.voyage__meta { display: flex; justify-content: space-between; gap: 1rem; font-family: var(--f-mono); font-size: .66rem; letter-spacing: .04em; color: var(--fg-dim); margin-bottom: .5rem; }
.voyage__bar { position: relative; height: 3px; background: var(--bg-3); border-radius: 2px; }
.voyage__fill { display: block; height: 100%; background: var(--brass-srf); border-radius: 2px; }
.voyage__fill--done { background: var(--st-clear); }
.voyage__ship {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  color: var(--brass-disp); font-size: .8rem; line-height: 1;
}
.voyage__fill--done + .voyage__ship { color: var(--st-clear); }
.voyage__now { margin-top: .6rem; font-family: var(--f-mono); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-align: center; }
.voyage__now.eta--done { color: var(--st-clear); }
.voyage__now.eta--now { color: var(--st-block); }
.voyage__now.eta--soon { color: var(--st-dok); }
/* Live ohne Reisedaten: gedämpfter, ruhiger Plan — kein erfundener Fortschritt */
.voyage--unknown .voyage__bar { opacity: .5; }
.voyage--unknown .voyage__now { color: var(--fg-dim); font-weight: 500; }
@media (max-width: 640px) {
  .voyage { grid-template-columns: 1fr; gap: .8rem; text-align: left; }
  .voyage__end--r { text-align: left; }
}

/* ══════════ PDF-Leiste unter dem Detail-Dokument ══════════ */
.docbar { display: flex; align-items: center; gap: 1rem; margin-top: .5rem; flex-wrap: wrap; }
.docbar .docnote { margin: 0; flex: 1 1 auto; }
.docbar__pdf {
  font-family: var(--f-mono); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--brass); padding: .4rem .8rem; border: 1px solid color-mix(in srgb, var(--brass) 45%, transparent); border-radius: 3px;
  white-space: nowrap; transition: background var(--dur), color var(--dur);
}
.docbar__pdf:hover { background: var(--brass-srf); color: var(--on-brass); border-color: var(--brass-srf); }

/* ══════════ DAS DOCK ══════════ */
/* Failsafe-Basis: das Dock ist NIE im Dokumentfluss. Auch bevor JS greift. */
.dock {
  position: fixed; top: var(--top-h); right: 0; bottom: 0; z-index: 45;
  width: 400px; max-width: 88vw;
  background: var(--night); color: var(--bone);
  border-left: 1px solid rgba(234, 229, 217, .1);
  /* Standard: Drawer-Modus (aus dem Viewport geschoben, unsichtbar) */
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dur) var(--ease-out), visibility var(--dur);
}
.dock[hidden] { display: none !important; }   /* Route ohne Dock — komplett weg */
.dock.dock--open { transform: none; visibility: visible; }

/* Panel-Modus ab 1240px: Dock permanent sichtbar, Content weicht aus.
   Breite kommt aus --dock-w — Listen-Views 400px, Review-Views Breit-Modus. */
@media (min-width: 1240px) {
  .dock { width: var(--dock-w); transform: none; visibility: visible; transition: none; }
  .dock__close { display: none; }                 /* permanent — kein Schließen nötig */
  body.has-dock .view { max-width: none; margin-right: var(--dock-w); }
  body.has-dock .topbar { right: var(--dock-w); }
}
/* E10 (06.08.): auf breiten Schirmen wächst das Dock von selbst mit — die PDF
   ist neben der Liste direkt lesbar; der ←→-Umschalter holt bei Bedarf mehr.
   (Steht VOR dem dock-wide-Override unten — der gewinnt per Kaskade.) */
@media (min-width: 1360px) {
  body.has-dock { --dock-w: clamp(400px, 34vw, 720px); }
}
/* Breit-Modus (Review-Routen, F2/F3): die Korrektur-Spalte behält ~660px
   Arbeitsbreite, das Dock nimmt den GESAMTEN Rest — PDF zum direkten Ablesen.
   Ab 1200px Dockbreite wächst wieder der Content (rsplit wird 2-spaltig). */
@media (min-width: 1360px) {
  body.dock-wide {
    --dock-w: clamp(560px, calc(100vw - var(--rail-w) - 2 * var(--pad) - 660px), 1200px);
  }
}

.dock__inner { display: flex; flex-direction: column; height: 100%; }
.dock__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem;
  padding: .7rem .9rem .6rem; border-bottom: 1px solid rgba(234, 229, 217, .1);
}
.dock__id { min-width: 0; }
.dock__title { font-family: var(--f-mono); font-size: .82rem; font-weight: 700; letter-spacing: .03em; color: var(--bone); overflow-wrap: anywhere; }
.dock__sub { font-family: var(--f-mono); font-size: .64rem; color: var(--bone-dim); letter-spacing: .03em; margin-top: .2rem; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.dock__sub .chip { border-color: rgba(234, 229, 217, .2); color: var(--bone-dim); background: transparent; }
.dock__close { font-size: 1rem; color: var(--bone-dim); width: 32px; height: 32px; border-radius: 3px; flex: none; }
.dock__close:hover { color: var(--bone); background: var(--night-2); }

/* Breit/Schmal-Umschalter — nur auf Review-Routen im Panel-Modus sinnvoll */
.dock__widebtn {
  display: none; align-items: center; gap: .4rem; flex: none;
  min-height: 44px; padding: .5rem .75rem;
  font-family: var(--f-mono); font-size: .62rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--bone-dim);
  border: 1px solid rgba(234, 229, 217, .2); border-radius: 3px;
  transition: color var(--dur), border-color var(--dur);
}
.dock__widebtn:hover { color: var(--brass-srf); border-color: var(--brass-srf); }
.dock__widebtn[aria-pressed="true"] { color: var(--brass-srf); }
/* E10 (06.08.): der Breit/Schmal-Umschalter steht auf ALLEN Panel-Dock-Views
   zur Verfügung (vorher nur Review) — erst ab 1360px, wo der Breit-Modus wirkt. */
@media (min-width: 1360px) {
  .dock__widebtn { display: inline-flex; }
}
.dock__tabs { display: flex; gap: .3rem; padding: .5rem .7rem 0; flex-wrap: wrap; }
.dock__tab {
  padding: .4rem .7rem .35rem; font-family: var(--f-mono); font-size: .64rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--bone-dim);
  border: 1px solid rgba(234, 229, 217, .14); border-bottom: 0; border-radius: 3px 3px 0 0;
  transition: color var(--dur), background var(--dur);
}
.dock__tab:hover { color: var(--bone); }
.dock__tab.on { color: var(--brass-srf); background: var(--night-2); font-weight: 700; border-color: rgba(234, 229, 217, .2); }
/* Anzeigebereich füllt den GESAMTEN Dock-Rest (Owner-Fix R2/2: kein toter Leerraum) */
.dock__frame { position: relative; flex: 1 1 auto; margin: .5rem .7rem 0; background: #fff; border: 1px solid rgba(234, 229, 217, .14); overflow: hidden; min-height: 0; }
.dock__frame--pdf { background: #f4f2ec; }
.dock__pdf { position: relative; z-index: 1; width: 100%; height: 100%; border: 0; display: block; }
.dock__fallback { position: absolute; inset: 0; z-index: 0; display: grid; place-content: center; text-align: center; gap: .4rem; padding: 1rem; font-family: var(--f-mono); font-size: .72rem; color: var(--fg-dim); }
/* Platzhalter (kein PDF geladen) — dunkle Bühne, PDF erst auf Klick */
.dock__frame--idle { background: var(--night-2); border-color: rgba(234, 229, 217, .12); }
.dock__pick { display: grid; justify-items: center; gap: .55rem; place-content: center; height: 100%; padding: 1.5rem; text-align: center; color: var(--bone-dim); }
.dock__pick svg { color: var(--brass-srf); }
.dock__pickh { font-family: var(--f-mono); font-size: .74rem; font-weight: 700; letter-spacing: .06em; color: var(--bone); }
.dock__pickbtn {
  min-height: 44px; padding: .55rem 1.2rem;
  font-family: var(--f-mono); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--on-brass); background: var(--brass-srf); border-radius: 3px;
  transition: background var(--dur) var(--ease-out);
}
.dock__pickbtn:hover { background: var(--bone); }
.dock__picksub { font-family: var(--f-mono); font-size: .64rem; color: var(--bone-dim); max-width: 28ch; line-height: 1.5; }
.dock__fallback a { color: var(--brass); text-decoration: underline; text-underline-offset: 3px; }
.dock__foot { display: flex; align-items: center; gap: .8rem; padding: .5rem .7rem .6rem; flex-wrap: wrap; flex: 0 0 auto; }
.dock__note { flex: 1 1 auto; font-family: var(--f-mono); font-size: .62rem; color: var(--bone-dim); letter-spacing: .03em; }
.dock__open { font-family: var(--f-mono); font-size: .64rem; font-weight: 700; letter-spacing: .06em; color: var(--brass-srf); white-space: nowrap; }
.dock__open:hover { color: var(--bone); }
.dock__empty { display: grid; justify-items: center; gap: .5rem; padding: 3rem 1.5rem; text-align: center; color: var(--bone-dim); }
.dock__empty svg { color: var(--brass-srf); }
.dock__empty p { font-family: var(--f-mono); font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bone); }
.dock__empty span { font-size: .82rem; max-width: 30ch; }

/* ausgewählte Zeile im Dock-Modus */
.srow.is-sel { background: color-mix(in srgb, var(--brass-srf) 20%, transparent); box-shadow: inset 3px 0 0 var(--brass); }

/* ══════════ DRAWER-MODUS (< 1240px): Floating-Toggle ══════════ */
.dock-toggle { display: none; }
@media (max-width: 1239px) {
  body.has-dock .dock-toggle {
    display: inline-flex; align-items: center; gap: .4rem;
    position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 70;
    padding: .6rem .9rem; border-radius: 2rem;
    background: var(--night); color: var(--bone);
    font-family: var(--f-mono); font-size: .68rem; font-weight: 700; letter-spacing: .08em;
    box-shadow: 0 6px 20px rgba(27, 24, 19, .28);
  }
  /* Drawer nimmt breiten Panel-Look, gleitet aber von rechts als Overlay ein */
  .dock { width: min(400px, 92vw); box-shadow: -12px 0 40px rgba(11, 12, 14, .4); }
}
@media (max-width: 720px) {
  body.has-dock .dock-toggle { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  /* Vollbild-Drawer auf dem Handy — z-index 55 hebt ihn ÜBER die Topbar (50):
     vorher lag deren fixe Leiste auf den ersten 56px des Drawers und fing die
     Klicks auf den Schließen-✕ ab (Fund Intake-Verifikation 21.08.). Die
     Bottom-Nav (Rail, 60) bleibt bewusst darüber — Navigation schließt den
     Drawer-Kontext ohnehin. */
  .dock { top: 0; width: 100vw; max-width: 100vw; z-index: 55; }
}

@media (prefers-reduced-motion: reduce) {
  .dock { transition: none; }
}