/* ═══════════════════════════════════════════════════════════════════════════════════════════
   THE EVIDENCE GALLERY — Portal room `gallery`.

   ── PICTURE FIRST IS THE LAYOUT, NOT A PREFERENCE ───────────────────────────────────────────
   Every card opens with the picture at a size you can actually judge, and a pair reads
   left-to-right with an arrow between the halves. A frame with no bytes yet still gets the SAME
   BOX — an absence occupies space and explains itself, because a wall that quietly omits what it
   could not fetch reads as a complete wall.

   ── COURT-HONEST COLOUR ─────────────────────────────────────────────────────────────────────
   Chrome --canopy. Held proof --signal. Thin proof is amber, calm, and never a shout. NO RED
   ANYWHERE and NO --action: alarm is Craig-court only, and this room has no owner action in it.
   The class dot is the only colour that carries meaning, and it carries exactly one bit — which
   of the three evidence classes this picture is.

   ── TYPE ────────────────────────────────────────────────────────────────────────────────────
   The --fs-* dashboard tokens are DENSITY tokens and they are wrong in a room you read. Same
   call the Command Desk made: one reading scale, --eg-read, nothing under 11.5px. The future
   reader is a hired seat, not the person who built this.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

#portal-room-gallery{
  --canopy:#1e3b2f; --signal:#306844;
  --line:#e7e2d4; --line-cool:#e6e9e6; --card:#fff; --bg:#f7f8f7; --sand:#fbfaf6;
  --ink-1:#24332c; --ink-2:#46564d; --ink-3:#8a8f88;
  --warn-ink:#8a5a0f; --warn-line:#ecd9a8; --warn-fill:#fdf6e7;
  --hard-line:#c5dccd; --hard-fill:#eef5f0;

  --eg-read:15.5px; --eg-h2:22px; --eg-sub:12.5px; --eg-label:11.5px;

  font:400 var(--eg-read)/1.5 Inter,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  color:var(--ink-1); background:var(--bg);
}

.eg-headwrap{ flex:0 0 auto }
.eg-headwrap .fgr-head{ border-bottom:1px solid var(--line-cool) }

/* The engine's contract: the room element itself never scrolls. This is the frame; the scroller
   inside it owns the bar, so the nav stays where the eye left it. */
.eg-body{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow:hidden }
.eg-scroll{ flex:1 1 auto; min-height:0; overflow:auto }
.eg-in{ max-width:1680px; margin:0 auto; padding:18px 26px 40px; box-sizing:border-box }

/* ── nav: no numbers on its face (calm law) ──────────────────────────────────────────────── */
.eg-nav{ display:flex; align-items:center; gap:8px; padding:4px 0 14px; flex-wrap:wrap }
.eg-tab{ font:600 13.5px Inter,system-ui,sans-serif; color:var(--ink-2); background:#fff;
  border:1px solid var(--line-cool); border-radius:999px; padding:7px 16px; cursor:pointer }
.eg-tab:hover{ border-color:var(--hard-line); color:var(--canopy) }
.eg-tab.is-on{ background:var(--canopy); border-color:var(--canopy); color:#fff }
.eg-navsp{ flex:1 1 auto }
.eg-q{ font:400 13.5px Inter,system-ui,sans-serif; color:var(--ink-1); background:#fff;
  border:1px solid var(--line-cool); border-radius:8px; padding:7px 12px; min-width:250px }
.eg-q:focus{ outline:2px solid var(--hard-line); outline-offset:1px; border-color:var(--signal) }

.eg-chips{ display:flex; gap:6px; flex-wrap:wrap; padding:0 0 16px }
.eg-chip{ font:600 var(--eg-label) Inter,system-ui,sans-serif; letter-spacing:.03em;
  color:var(--ink-2); background:var(--sand); border:1px solid var(--line);
  border-radius:999px; padding:5px 12px; cursor:pointer }
.eg-chip:hover{ border-color:var(--hard-line) }
.eg-chip.is-on{ background:var(--hard-fill); border-color:var(--signal); color:var(--canopy) }
.eg-order{ padding:0 0 16px; font:400 12px/1.55 Inter,system-ui,sans-serif; color:var(--ink-3); max-width:760px }

/* ── the lede on a narrowed lens ─────────────────────────────────────────────────────────── */
.eg-lede{ padding:2px 0 16px }
.eg-back{ font:600 12.5px Inter,system-ui,sans-serif; color:var(--signal); background:none;
  border:0; padding:0 0 8px; cursor:pointer }
.eg-back:hover{ text-decoration:underline }
.eg-lede h2{ margin:0; font:650 var(--eg-h2)/1.25 Inter,system-ui,sans-serif; color:var(--canopy) }
.eg-lede .eg-sub{ margin:4px 0 0; font:400 var(--eg-sub) Inter,system-ui,sans-serif; color:var(--ink-3) }
.eg-off-in{ margin:8px 0 0; padding:10px 14px; background:var(--warn-fill);
  border:1px solid var(--warn-line); border-radius:8px;
  font:400 13px/1.55 Inter,system-ui,sans-serif; color:var(--warn-ink); max-width:800px }

/* ── THE WALL ────────────────────────────────────────────────────────────────────────────── */
.eg-wall{ display:grid; grid-template-columns:repeat(auto-fill,minmax(430px,1fr)); gap:20px }
@media (max-width:900px){ .eg-wall{ grid-template-columns:1fr } }

.eg-x{ background:var(--card); border:1px solid var(--line-cool); border-radius:12px;
  padding:14px 14px 12px; display:flex; flex-direction:column; min-width:0 }

/* the pair — the whole reason this room exists */
.eg-pair{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px }
.eg-arrow{ font:400 20px Inter,system-ui,sans-serif; color:var(--ink-3); padding:0 2px }
.eg-solo{ display:block }

.eg-fr{ margin:0; min-width:0; display:flex; flex-direction:column }
.eg-fr-side{ font:700 var(--eg-label) Inter,system-ui,sans-serif; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); padding:0 0 5px }
.eg-fr-b{ background:var(--sand); border:1px solid var(--line); border-radius:8px;
  min-height:150px; display:flex; align-items:center; justify-content:center; overflow:hidden }
.eg-solo .eg-fr-b{ min-height:230px }
.eg-fr-b img{ width:100%; height:auto; display:block; max-height:340px; object-fit:cover;
  object-position:top center; cursor:zoom-in }
.eg-fr-wait,.eg-fr-wait2{ font:400 12px/1.5 Inter,system-ui,sans-serif; color:var(--ink-3);
  text-align:center; padding:16px 12px }
.eg-fr-wait span,.eg-fr-wait2{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px; color:var(--ink-3); word-break:break-all }
.eg-load{ font:600 12px Inter,system-ui,sans-serif; color:var(--signal); background:#fff;
  border:1px solid var(--hard-line); border-radius:7px; padding:7px 14px; cursor:pointer }
.eg-load:hover{ background:var(--hard-fill) }
.eg-fr-q{ font:500 10.5px Inter,system-ui,sans-serif; color:var(--ink-3); padding:5px 0 0 }

/* the missing half, said out loud */
.eg-flag{ margin:10px 0 0; padding:9px 12px; background:var(--warn-fill);
  border:1px solid var(--warn-line); border-left:3px solid #d9a441; border-radius:7px;
  font:400 12.5px/1.5 Inter,system-ui,sans-serif; color:var(--warn-ink) }
.eg-flag b{ font-weight:700 }

.eg-cap{ margin:11px 0 0; font:500 14px/1.45 Inter,system-ui,sans-serif; color:var(--ink-1) }
.eg-cap.is-admit{ color:var(--ink-3); font-style:italic; font-weight:400 }

.eg-cls{ margin:5px 0 0; font:500 11.5px Inter,system-ui,sans-serif; color:var(--ink-3);
  display:flex; align-items:center; gap:6px }
.eg-dot{ width:7px; height:7px; border-radius:50%; background:var(--ink-3); flex:0 0 auto }
.eg-cls-object .eg-dot{ background:var(--signal) }
.eg-cls-glass  .eg-dot{ background:var(--signal) }
.eg-cls-portal .eg-dot{ background:#5b7fa8 }
.eg-cls-context .eg-dot{ background:#d9a441 }
.eg-cls-unknown .eg-dot{ background:#b9bdb6 }

.eg-honest{ margin:7px 0 0; padding:8px 11px; background:var(--warn-fill);
  border:1px solid var(--warn-line); border-radius:7px;
  font:400 12.5px/1.5 Inter,system-ui,sans-serif; color:var(--warn-ink) }

/* ── raw_memo: the source line, verbatim, monospace, never restyled into prose ───────────── */
.eg-memo{ margin:10px 0 0; padding:9px 11px; background:#f4f6f4;
  border:1px solid var(--line-cool); border-left:3px solid var(--signal); border-radius:7px }
.eg-memo-h{ font:700 var(--eg-label) Inter,system-ui,sans-serif; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3); padding:0 0 5px }
.eg-memo-r{ padding:3px 0 }
.eg-memo-i{ display:block; font:600 11.5px Inter,system-ui,sans-serif; color:var(--ink-2) }
.eg-memo code{ font:400 12px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--ink-1); word-break:break-word; white-space:pre-wrap }
.eg-memo-cut{ display:block; font:400 10.5px Inter,system-ui,sans-serif; color:var(--warn-ink) }

.eg-meta{ margin:11px 0 0; display:flex; gap:8px; flex-wrap:wrap;
  font:500 11.5px Inter,system-ui,sans-serif; color:var(--ink-3) }
.eg-book{ color:var(--canopy); font-weight:650 }
.eg-title{ margin:3px 0 0; font:500 13px/1.45 Inter,system-ui,sans-serif; color:var(--ink-2) }

.eg-story{ margin:7px 0 0; display:flex; gap:8px; flex-wrap:wrap;
  font:500 11px Inter,system-ui,sans-serif; color:var(--ink-3) }
.eg-story span{ background:var(--sand); border:1px solid var(--line); border-radius:999px; padding:3px 9px }
.eg-tie{ color:var(--canopy) !important; background:var(--hard-fill) !important;
  border-color:var(--hard-line) !important }
.eg-flags{ color:var(--warn-ink) !important; background:var(--warn-fill) !important;
  border-color:var(--warn-line) !important }
.eg-nostory{ margin:7px 0 0; font:400 12px/1.5 Inter,system-ui,sans-serif; color:var(--ink-3) }

/* ── doors — every one of them opens something ───────────────────────────────────────────── */
.eg-doors{ margin:11px 0 0; display:flex; gap:6px; flex-wrap:wrap;
  border-top:1px solid var(--line-cool); padding-top:10px }
.eg-door{ font:600 11.5px Inter,system-ui,sans-serif; color:var(--signal); background:#fff;
  border:1px solid var(--line-cool); border-radius:999px; padding:5px 12px; cursor:pointer }
.eg-door:hover{ background:var(--hard-fill); border-color:var(--hard-line) }
.eg-door.is-payee{ background:var(--sand); color:var(--canopy); font-weight:650 }

.eg-panel{ margin:10px 0 0 }
.eg-note{ background:var(--sand); border:1px solid var(--line); border-radius:9px; padding:12px 14px }
.eg-note-h{ font:700 var(--eg-label) Inter,system-ui,sans-serif; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3); padding:0 0 6px }
.eg-note p{ margin:0 0 8px; font:400 13px/1.6 Inter,system-ui,sans-serif; color:var(--ink-1) }
.eg-note-f{ font:400 11px Inter,system-ui,sans-serif; color:var(--ink-3) }
.eg-note code,.eg-note pre{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace }
.eg-note pre{ margin:0 0 10px; padding:9px 11px; background:#f0f2f0; border-radius:6px;
  font-size:11.5px; overflow:auto; color:var(--ink-1) }
.eg-dl{ margin:0 0 8px }
.eg-dl dt{ font:700 var(--eg-label) Inter,system-ui,sans-serif; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-3); margin:8px 0 3px }
.eg-dl dd{ margin:0; font:400 13px/1.55 Inter,system-ui,sans-serif; color:var(--ink-1) }
.eg-dl ul,.eg-schemaflags ul{ margin:0; padding-left:18px }
.eg-dl li,.eg-schemaflags li{ margin:0 0 3px }
.eg-src{ font:500 11px Inter,system-ui,sans-serif; color:var(--ink-3) }
.eg-schemaflags{ margin:8px 0 0; padding:9px 11px; background:var(--warn-fill);
  border:1px solid var(--warn-line); border-radius:7px;
  font:400 12.5px/1.55 Inter,system-ui,sans-serif; color:var(--warn-ink) }
.eg-payeebox{ margin:0 0 16px }

/* ── the book wall ───────────────────────────────────────────────────────────────────────── */
.eg-books{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:10px }
.eg-bk{ text-align:left; background:var(--card); border:1px solid var(--line-cool);
  border-radius:10px; padding:13px 15px; cursor:pointer; display:flex; flex-direction:column; gap:3px }
.eg-bk:hover{ border-color:var(--hard-line); background:var(--hard-fill) }
.eg-bk-n{ font:650 15px Inter,system-ui,sans-serif; color:var(--canopy) }
.eg-bk-s{ font:400 12px Inter,system-ui,sans-serif; color:var(--ink-3) }
.eg-bk.is-off{ background:var(--sand) }
.eg-bk-off{ font:500 11px/1.45 Inter,system-ui,sans-serif; color:var(--warn-ink) }

.eg-off{ margin:22px 0 0; padding:14px 16px; background:var(--sand);
  border:1px solid var(--line); border-radius:10px; max-width:900px }
.eg-off-h{ font:700 var(--eg-label) Inter,system-ui,sans-serif; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3); padding:0 0 6px }
.eg-off p{ margin:0 0 8px; font:400 13px/1.6 Inter,system-ui,sans-serif; color:var(--ink-1) }
.eg-off ul{ margin:0; padding-left:18px; font:400 12.5px/1.6 Inter,system-ui,sans-serif; color:var(--ink-1) }

/* ── paging, and it never hides anything silently ────────────────────────────────────────── */
.eg-more{ margin:22px 0 0; display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.eg-more button{ font:600 13px Inter,system-ui,sans-serif; color:#fff; background:var(--canopy);
  border:0; border-radius:8px; padding:9px 20px; cursor:pointer }
.eg-more button:hover{ background:#163026 }
.eg-more span{ font:400 12.5px Inter,system-ui,sans-serif; color:var(--ink-3) }
.eg-empty{ padding:36px 4px; font:400 14px Inter,system-ui,sans-serif; color:var(--ink-3) }

/* ── the foot: counts, with their denominator ────────────────────────────────────────────── */
.eg-foot{ margin:34px 0 0; padding:18px 0 0; border-top:1px solid var(--line-cool) }
.eg-foot-h{ font:700 var(--eg-label) Inter,system-ui,sans-serif; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-3); padding:0 0 12px }
.eg-foot-g{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px }
.eg-tile{ background:var(--card); border:1px solid var(--line-cool); border-radius:10px; padding:12px 14px }
.eg-tile-n{ font:700 24px/1.05 Inter,system-ui,sans-serif; color:var(--canopy) }
.eg-tile-l{ margin:4px 0 0; font:600 12.5px/1.35 Inter,system-ui,sans-serif; color:var(--ink-1) }
.eg-tile-w{ margin:5px 0 0; font:400 11.5px/1.5 Inter,system-ui,sans-serif; color:var(--ink-3) }
.eg-foot-cls{ margin:14px 0 0; font:400 12.5px/1.7 Inter,system-ui,sans-serif; color:var(--ink-2) }
.eg-foot-cls span{ font-weight:650; color:var(--ink-1); margin-right:6px }
.eg-foot-cls b{ color:var(--canopy) }
.eg-foot-s{ margin:10px 0 0; font:400 12.5px/1.65 Inter,system-ui,sans-serif; color:var(--ink-3);
  max-width:900px }

/* ── the two refusals ────────────────────────────────────────────────────────────────────── */
.eg-blank{ max-width:660px; margin:70px auto; text-align:center }
.eg-blank .h{ font:650 19px/1.35 Inter,system-ui,sans-serif; color:var(--canopy) }
.eg-blank .b{ margin:10px 0 0; font:400 14px/1.65 Inter,system-ui,sans-serif; color:var(--ink-2) }
.eg-blank code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px }