/* Avakode Hub — scene «musterproof» (assets/js/scenes/musterproof.js): the component tree, the finding, the case with the
   clock, the journal (lane 1.1). Loaded by inc/scenes.php on a family page whose stage is this scene. Classes: .mp-* only;
   the common parts (.sc-head, .sc-sample, .sc-panel, .sc-stamp), the stage, the rail and the caption are scene.css. */

/* The height of the stage before the module arrives = the height it takes (measured with ?static=1, the window resized;
   e2e: ≤ 4px apart at 1440, 768, 390). --stage-h: the two-column stage (window ≥ 835px); --stage-h-narrow: a window ≤ 720px
   (rail on top, one column), a little more on the narrowest phones where a line wraps. From 721px to 834px (the stage's
   own width ≤ 800px) the rail is on the left and the stage is already one column, hence the middle value. If the family
   page changes its padding, or a row/panel changes, re-measure. */
.hub-scene[data-scene="musterproof"] { --stage-h: 557px; --stage-h-narrow: 979px; }
@media (min-width: 721px) and (max-width: 834px) {
  .hub-scene[data-scene="musterproof"] { --stage-h: 994px; }
}
@media (max-width: 400px) {
  .hub-scene[data-scene="musterproof"] { --stage-h-narrow: 1003px; }
}
@media (max-width: 370px) {
  .hub-scene[data-scene="musterproof"] { --stage-h-narrow: 1060px; }
}

/* two columns: the tree 46 %, the finding, the case and the journal (a column) 54 % */
.mp-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 24px; align-items: start; }
.mp-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.mp-row {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto 76px; align-items: center; gap: 8px;
  padding: 6px 8px; border-top: 1px solid var(--line);
}
.mp-row:last-child { border-bottom: 1px solid var(--line); }
.mp-row > span { position: relative; }
.mp-name { grid-column: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-left: calc(var(--lv, 0) * 18px); }
.mp-name i { font-style: normal; color: var(--fg-2); }
.mp-name::before { content: ''; display: inline-block; margin-right: 8px; vertical-align: middle; }
.mp-row.d1 { --lv: 0; }
.mp-row.d2 { --lv: 1; }
.mp-row.d3 { --lv: 2; }
.mp-row.d1 .mp-name::before { width: 5px; height: 5px; border-radius: 50%; background: var(--fg-2); }
.mp-row.d2 .mp-name::before,
.mp-row.d3 .mp-name::before { width: 8px; height: 8px; margin-top: -6px; border-left: 1px solid var(--muted); border-bottom: 1px solid var(--muted); }
.mp-tag { grid-column: 2; white-space: nowrap; font-size: 10px; letter-spacing: .06em; color: var(--signal-hot); }
.mp-rel { grid-column: 3; text-align: right; font-size: 11px; color: var(--muted); }
.mp-row > .mp-hot {
  position: absolute; inset: 0; border-left: 2px solid var(--signal); border-radius: 4px;
  background: rgba(124, 92, 252, .16); pointer-events: none;
}

.mp-find, .mp-case, .mp-journal { position: relative; padding: 12px 14px 14px; }
.mp-find-main { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.mp-find-id { font-size: 15px; font-weight: 500; letter-spacing: .02em; color: var(--signal-hot); }
.mp-badge {
  padding: 1px 9px; border: 1px solid var(--signal); border-radius: 999px;
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--signal-hot);
}
.mp-find-sub { margin-top: 6px; color: var(--fg-2); }
.mp-find-act { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.mp-alert { font-size: 11.5px; color: var(--fg-2); }
.mp-open {
  position: relative; display: inline-block; overflow: hidden; padding: 5px 12px; white-space: nowrap;
  border: 1px solid var(--signal); border-radius: 999px; font-size: 11px; letter-spacing: .06em; color: var(--signal-hot);
}
.mp-open b { position: relative; font-weight: 500; }
.mp-open-fill { position: absolute; inset: 0; background: rgba(124, 92, 252, .28); }

/* the stamp straddles the bottom edge, not the top one: the head of this panel is long and would run under it on a narrow
   stage. The slot is a zero-size positioned box on the bottom right corner; .sc-stamp keeps its common place (top -14px,
   right 14px) relative to it, so the stamp spans 17px above the edge to 11px below it (a common class is not redefined here). */
.mp-stamp-slot { position: absolute; right: 0; bottom: 3px; width: 0; height: 0; white-space: nowrap; }
.mp-clock { display: flex; align-items: center; gap: 18px; }
.mp-ring { position: relative; flex: none; width: 64px; height: 64px; }
.mp-ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.mp-ring-track { fill: none; stroke: var(--line); stroke-width: 3; }
.mp-ring-arc { fill: none; stroke: var(--signal); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 176; stroke-dashoffset: 0; }
.mp-ring-num { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; font-weight: 500; color: var(--signal-hot); }
.mp-lines { flex: 1; min-width: 0; }
.mp-line { padding: 5px 0; border-top: 1px solid var(--line); color: var(--fg-2); }
.mp-line.is-now { border-top: 0; padding-top: 0; font-weight: 500; color: var(--signal-hot); }

.mp-entry { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 5px 0; border-top: 1px solid var(--line); }
.mp-entry i { font-style: normal; color: var(--muted); }
.mp-entry code { font: inherit; font-variant-numeric: tabular-nums; color: var(--fg-2); }
.mp-entry:last-child,
.mp-entry:last-child code { color: var(--signal-hot); }

.mp-fly {
  position: absolute; left: 0; top: 0; display: flex; padding: 4px 10px; white-space: nowrap; pointer-events: none;
  border: 1px solid var(--signal); border-radius: 4px; background: #1A1430; color: var(--signal-hot); opacity: 0;
}

/* the relation column (direct / transitive) goes when the tree gets narrow: the indent says it */
@container (max-width: 980px) {
  .mp-row { grid-template-columns: minmax(0, 1fr) auto; }
  .mp-rel { display: none; }
}

/* the stage's own width (not the window's): one column — the tree, then the finding, the case, the journal */
@container (max-width: 800px) {
  .mp-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}