/* ════════════════════════════════════════════════════════════════════════
   PHASE 157 — Per-page revision badge
   Revision colour is per-page (Tools ▸ Page Color / setActivePageColor). The
   colour alone doesn't say WHICH revision a page is, so a page tinted blue and
   one tinted goldenrod are only distinguishable if you remember the palette.
   This adds a small corner label (the revision name) on any non-white page.
   Screen-only — printing/PDF export is unaffected. Data attr is set by
   setActivePageColor + applyRevisionColor in index.html.
   ════════════════════════════════════════════════════════════════════════ */

@media screen {
  .script-page-sheet[data-page-rev]:not([data-title-page]) { position: relative; }

  .script-page-sheet[data-page-rev]:not([data-title-page])::after {
    content: attr(data-page-rev);
    position: absolute;
    top: 8px;
    right: 8px;
    left: auto;      /* beat a stray global ::after left offset so we pin right */
    bottom: auto;
    z-index: 2;
    padding: 2px 8px;
    font: 700 10px/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #3a2f1a;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
    pointer-events: none;
    /* Don't cover the writing area on very narrow phones. */
  }

  body.dark .script-page-sheet[data-page-rev]:not([data-title-page])::after {
    color: #f0e6d2;
    background: rgba(20, 24, 30, .8);
    border-color: rgba(255, 255, 255, .22);
  }

  /* Phones: keep the badge from crowding the first line of script. */
  @media (max-width: 760px) {
    .script-page-sheet[data-page-rev]:not([data-title-page])::after { top: 4px; right: 4px; font-size: 9px; padding: 1px 6px; }
  }
}