/* fetch-1183: the event's imported source diagrams, using portal primitives. */
.event-diagrams { min-width: 0; }
.event-diagram-toolbar, .event-diagram-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-4); }
.event-diagram-toolbar { margin-bottom: var(--s-4); }
.event-diagram-toolbar p { margin: var(--s-1) 0 0; }
.event-diagram-lead { font-size: var(--t-section); font-weight: 600; color: var(--navy-dark); }
.event-diagram-form { padding: var(--s-4); margin-bottom: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-m); background: var(--wash); }
.event-diagram-form .grid { grid-template-columns: 1fr 1fr; }
.event-diagram-form input { width: 100%; min-width: 0; min-height: var(--control-height-touch); }
.event-diagram-list { display: grid; gap: var(--s-2); margin: var(--s-3) 0; }
.event-diagram-row { padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-m); }
.event-diagram-row.is-selected { border-color: var(--gold-dark); }
.event-diagram-row p { margin: var(--s-1) 0 0; overflow-wrap: anywhere; }
.event-diagram-row .actions, .event-diagram-toolbar .actions { flex-wrap: wrap; flex-shrink: 0; }
.event-diagrams .btn { min-height: var(--control-height-touch); }
.event-diagrams .event-diagram-icon-button { display: inline-flex; align-items: center; justify-content: center; width: var(--control-height-touch); padding: var(--s-2); border-color: transparent; background: transparent; color: var(--navy-dark); flex-shrink: 0; }
.event-diagrams .event-diagram-icon-button:hover:not(:disabled) { border-color: var(--line); background: var(--mute-bg); }
.event-diagram-icon { width: 1.15rem; height: 1.15rem; pointer-events: none; }
.event-diagram-options { position: relative; }
.event-diagram-options > summary { list-style: none; cursor: pointer; }
.event-diagram-options > summary::-webkit-details-marker { display: none; }
.event-diagram-options-list { position: absolute; top: calc(100% + var(--s-1)); right: 0; z-index: 25; width: 16rem; max-width: 80vw; padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-s); background: var(--paper); box-shadow: 0 var(--s-2) var(--s-5) color-mix(in srgb, var(--navy-dark) 12%, transparent); }
.event-diagram-options-list .btn { display: block; width: 100%; border-color: transparent; background: transparent; text-align: left; }
.event-diagram-options-list .btn:hover:not(:disabled) { background: var(--wash); }
.event-diagram-options-list p { margin: var(--s-2); }
.event-diagram-viewer { margin-top: var(--s-5); border-top: 1px solid var(--line); padding-top: var(--s-4); }
.event-diagram-viewer iframe { display: block; width: 100%; height: 70vh; min-height: 24rem; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-card); }
.event-diagram-image { overflow: auto; max-height: 75vh; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-card); }
.event-diagram-image img { display: block; max-width: 100%; height: auto; margin: auto; }
/* fetch-1254: the shared source reference never mounts a second staff-map editor. */
.event-diagram-reference { min-width: 0; margin-block: var(--s-4); }
.event-diagram-reference .btn { min-height: var(--control-height-touch); display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); }
.event-diagram-reference .event-diagram-icon-button { width: var(--control-height-touch); padding: var(--s-2); flex-shrink: 0; }
.event-diagram-source { overflow: auto; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--wash); margin-top: var(--s-3); }
.event-diagram-source img { display: block; max-width: 100%; max-height: 70vh; width: auto; height: auto; margin: auto; object-fit: contain; }
.event-diagram-source iframe { display: block; width: 100%; height: 65vh; min-height: 20rem; border: 0; background: var(--surface-card); }
/* fetch-1256: enlarge the source without leaving the Staff Plan. */
button.event-diagram-source { display: block; width: 100%; padding: 0; cursor: zoom-in; }
button.event-diagram-source:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: var(--s-1); }
.event-diagram-enlarged { width: min(76rem, calc(100vw - var(--s-5) * 2)); max-width: none; max-height: calc(100dvh - var(--s-5) * 2); margin: auto; padding: 0; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--paper); color: var(--ink); box-shadow: 0 var(--s-4) var(--s-6) color-mix(in srgb, var(--navy-dark) 25%, transparent); }
.event-diagram-enlarged[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); height: min(88dvh, 70rem); }
.event-diagram-enlarged::backdrop { background: color-mix(in srgb, var(--navy-dark) 32%, transparent); }
.event-diagram-enlarged-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--gold); background: var(--navy); color: var(--paper); }
.event-diagram-enlarged-head h2 { margin: 0; color: inherit; font-family: inherit; font-size: var(--t-section); overflow-wrap: anywhere; }
.event-diagram-enlarged-head p { margin: var(--s-1) 0 0; font-size: var(--t-sub); }
.event-diagram-enlarged-head > div:first-child { min-width: 0; }
.event-diagram-enlarged-head .actions { flex-shrink: 0; align-items: center; flex-wrap: wrap; }
.event-diagram-enlarged-head .btn, .event-diagram-enlarged-head .sel { min-height: var(--control-height-touch); }
.event-diagram-enlarged-head .event-diagram-page { margin: 0; color: inherit; }
.event-diagram-enlarged-body { min-height: 0; min-width: 0; overflow: auto; display: flex; align-items: center; justify-content: center; padding: var(--s-3); background: var(--wash); }
.event-diagram-enlarged-body img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.event-diagram-enlarged-body p { align-self: flex-start; }
.event-diagram-attach { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-3); margin-block: var(--s-3); border-radius: var(--r-s); background: var(--warn-bg); color: var(--warn-fg); }
.event-diagram-attach strong { font-size: var(--t-sub); }
.event-diagram-attach p { margin-block: var(--s-1) 0; font-size: var(--t-sub); }
.event-diagram-attach .actions { flex-wrap: wrap; flex-shrink: 0; }
.event-diagram-attach .btn-primary { background: var(--navy); border-color: var(--navy); color: var(--paper); }
.event-diagram-reference-caption { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.event-diagram-reference-caption > span { min-width: 0; flex: 1 1 10rem; overflow-wrap: anywhere; }
.event-diagram-page { display: flex; align-items: center; gap: var(--s-2); margin-block: var(--s-2); }
.event-diagram-page .sel { width: auto; min-height: var(--control-height-touch); }
.readiness-reference .event-diagram-toolbar, .readiness-reference .event-diagram-attach { flex-direction: column; align-items: stretch; }
.readiness-reference .event-diagram-form .grid { grid-template-columns: 1fr; }
@media (max-width: 640px) {
  .event-diagram-enlarged { width: calc(100vw - var(--s-3) * 2); max-height: calc(100dvh - var(--s-3) * 2); }
  .event-diagram-enlarged-head { align-items: flex-start; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-3); }
  .event-diagram-enlarged-head .actions { margin-left: auto; }
  .event-diagram-toolbar, .event-diagram-row { flex-direction: column; }
  .event-diagram-form .grid { grid-template-columns: 1fr; }
  .event-diagram-row .actions, .event-diagram-toolbar .actions { flex-shrink: 1; }
  .event-diagram-viewer iframe { min-height: 20rem; }
  .event-diagram-attach { flex-direction: column; align-items: stretch; }
  .event-diagram-reference .event-diagram-toolbar .actions { width: 100%; }
  .event-diagram-reference .event-diagram-toolbar .actions > :first-child { flex-grow: 1; }
}