/* PETAR-MASTER header toggle layer. UI only; genealogy data/engine are untouched. */
.diagram-header{position:relative;overflow:visible}
.header-collapse-btn{
  position:absolute;right:10px;bottom:-15px;z-index:80;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  width:30px;height:30px;padding:0;
  border:1px solid #8d7f6d;border-radius:7px;
  background:#fffaf3;color:#342a20;
  box-shadow:0 2px 6px rgba(0,0,0,.22);
  font:900 16px/1 Arial,sans-serif;cursor:pointer;
}
.header-collapse-btn:hover,.header-collapse-btn:focus-visible{
  border-color:#5b4230;background:#fff;outline:2px solid rgba(49,93,73,.22);outline-offset:1px
}
.header-collapse-label{display:none;font:700 12px/1 Arial,sans-serif;white-space:nowrap}
.diagram-header.header-collapsed>.topbar,
.diagram-header.header-collapsed>.toolbar,
.diagram-header.header-collapsed>.guidebar{display:none!important}
.diagram-header.header-collapsed{
  min-height:0;height:0;border-bottom-color:transparent;box-shadow:none;background:transparent;overflow:visible
}
/* When the header is hidden, keep the restore control completely inside the visible iframe.
   It sits over the top-right of the diagram instead of being half clipped above the viewport. */
.diagram-header.header-collapsed .header-collapse-btn{
  top:10px;right:10px;bottom:auto;
  width:auto;min-width:172px;height:34px;padding:0 10px;
  border-width:1px;border-radius:8px;background:#fffaf3
}
.diagram-header.header-collapsed .header-collapse-label{display:inline}
@media(max-width:590px){
  .header-collapse-btn{right:6px;width:32px;height:32px;bottom:-16px}
  .diagram-header.header-collapsed .header-collapse-btn{top:8px;right:6px;min-width:0;width:auto;max-width:calc(100vw - 12px);height:36px;padding:0 9px}
  .diagram-header.header-collapsed .header-collapse-label{font-size:11px}
}
@media print{.header-collapse-btn{display:none!important}}