/* <dev> Developer Handbook view.
   Its own file, not part of styles.css: styles.css is minified in place on the
   server at boot, so it is a build artefact there and cannot be patched. A
   separate stylesheet can be dropped into a running deployment as-is.
   Tokens (--rule, --bg) come from styles.css, which loads first. */

/* The `hidden` attribute must always win over the display below. Without this
   the section renders on the calendar page for everyone, and — because it is
   only ever opened through toggle(), which is what sets the iframe src — it
   renders as an empty white box. styles.css:6543 records the same bug for the
   exec panes; same fix, same reason. */
.dev-view[hidden] { display: none !important; }

/* Full viewport, not a panel in the document flow.
   In the flow the iframe never resolved to a usable height: .exec-view is a
   plain block with no height of its own, so `flex: 1 1 auto` had nothing to
   divide and the frame collapsed — the handbook was only reachable through
   "open in new tab". Anchoring the view to the viewport gives the frame a real
   box to fill, and a 736-page handbook wants the whole screen anyway. */
.dev-view {
  position: fixed;
  inset: 0;
  /* Ueber dem Dashboard-Header (.dashboard-header, z-index 200) und ueber dem
     Process-Map-Overlay (1211) — sonst schiebt sich die Kopfzeile des Dashboards
     vor die Ueberschrift dieser Ansicht. Bleibt unter den Toasts (1400) und der
     Tour (12000), die weiterhin obenauf gehoeren. */
  z-index: 1250;
  display: flex;
  flex-direction: column;
  /* undo the .exec-view card styling — this is a surface, not a card */
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--bg, #FFFFFF);
}

.dev-view > .exec-header {
  flex: 0 0 auto;
  border-bottom: 1px solid var(--rule, #E4E4E4);
}

.dev-frame {
  flex: 1 1 auto;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;          /* let the frame shrink inside the flex column */
  border: 0;
  background: var(--bg, #FFFFFF);
}

/* Stop the dashboard scrolling behind the overlay. */
body.dev-open { overflow: hidden; }

#dev-open-tab { text-decoration: none; }