/* Sacred Command Center · Portals. Semantic tokens only: no hex, no rgba (tests/static.mjs S-a2). The frames are the real portals; the
   card around each is the Command Center's. A signal is a word: a crimson icon for what is late, the Live mark for what is live. Class prefix pv-. */

.pv-page { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.pv-lead { margin: 0; max-width: var(--measure); color: var(--text-2); }
.pv-tools { display: flex; align-items: center; gap: var(--s-3); }
.pv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: var(--s-3); align-items: start; }

/* ── A card ───────────────────────────────────────────────────────────────────────────── */
.pv-card { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.pv-card.is-other { border-style: dashed; }
.pv-top { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); }
.pv-nm { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pv-nm b { font-size: var(--fs-cell); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-nm .caption { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); padding: var(--s-2) var(--s-3) 0; min-height: 2.25rem; }
.pv-sig { font-size: var(--fs-caption); }
.pv-frame { position: relative; margin: var(--s-2) var(--s-3) 0; }
.pv-stage { position: relative; overflow: hidden; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-button); }
.pv-iframe { display: block; border: 0; transform-origin: top left; background: var(--bg); }
.pv-skel { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--fs-caption); color: var(--text-3); }
.pv-needs { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: var(--s-1) var(--s-2); background: var(--surface); border-top: 1px solid var(--line); font-size: var(--fs-caption); line-height: 1.3; color: var(--text-2); text-align: center; pointer-events: none; }
.pv-veil { position: absolute; inset: 0; width: 100%; height: 100%; cursor: zoom-in; background: transparent; border-radius: var(--r-button); }
.pv-veil:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pv-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3) var(--s-3); }
.pv-foot .tbtn { padding-inline: var(--s-2); }
.pv-foot-sp { flex: 1 1 0; }
.pv-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2); padding: var(--s-4); text-align: center; background: var(--surface); }
.pv-fallback .i { color: var(--accent-mark); }
.pv-fallback-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin-top: var(--s-1); }

/* ── The full-size viewer (a sheet) ───────────────────────────────────────────────────── */
.pv-viewer { display: flex; justify-content: center; }
.pv-stage--full { width: 100%; max-width: 400px; margin: 0 auto; }
.pv-stage--full .pv-iframe { width: 100%; }
@media (max-width: 719px) { .pv-grid { gap: var(--s-3); } }

.module--portals a.tbtn, .module--portals a.tbtn:hover { text-decoration: none; }