/*
  Review Mode, Paperboy press aesthetic.
  Scoped under [data-review-mode="on"] so the customer site is untouched when off.
  Token sheet per Research/paperboy_aesthetic.md section 9.
*/

:root {
  --rm-paper:         #FAFAF7;
  --rm-ink:           #0A0A0A;
  --rm-errata:        #B42B1F;
  --rm-errata-wash:   rgba(180, 43, 31, 0.08);
  --rm-ink-60:        rgba(10, 10, 10, 0.6);
  --rm-line:          #0A0A0A;
  --rm-rule-soft:     #D9D9D9;
  --rm-shadow:        4px 4px 0 #0A0A0A;
  --rm-shadow-hover:  5px 5px 0 #0A0A0A;
  --rm-shadow-press:  3px 3px 0 #0A0A0A;

  --rm-font-display:  'Fraunces', 'Bodoni Moda', Georgia, 'Times New Roman', serif;
  --rm-font-ui:       'Inter', system-ui, sans-serif;
  --rm-font-mono:     'JetBrains Mono', ui-monospace, monospace;

  --rm-tracking-kicker: 0.18em;
  --rm-radius: 0;

  --rm-z-pins:     2147482500;
  --rm-z-popover:  2147482700;
  --rm-z-toast:    2147482900;
  --rm-z-banner:   2147483000;
  --rm-z-fab:      2147481000;
}

/* Default hidden. Enabled only when the overlay is on or paused. */
#rm-banner, #rm-toast, #rm-fab-add, #rm-resume-pill { display: none; }
#rm-pins { display: none; }

/* PositioningCase (Chapter 02, The Case) is Paperboy's business development pitch.
   Customers never see it. Only visible when review mode is active. */
#case { display: none !important; }
html[data-review-mode="on"] #case { display: block !important; }

/* When Review Mode is active */
html[data-review-mode="on"] #rm-banner { display: block; }
html[data-review-mode="on"] #rm-pins { display: block; }
html[data-review-mode="on"] #rm-fab-add { display: none; } /* hidden everywhere: tap-to-pin works on mobile too */
html[data-review-mode="on"] { scroll-padding-top: 56px; }
html[data-review-mode="on"] body { padding-top: 52px; }

/* Cursor: custom crosshair site-wide, default on interactive elements. */
html[data-review-mode="on"] body {
  cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%230A0A0A' stroke-width='1.5' stroke-linecap='round'%3E%3Cline x1='16' y1='2' x2='16' y2='11' stroke='%23FFFFFF' stroke-width='3'/%3E%3Cline x1='16' y1='21' x2='16' y2='30' stroke='%23FFFFFF' stroke-width='3'/%3E%3Cline x1='2' y1='16' x2='11' y2='16' stroke='%23FFFFFF' stroke-width='3'/%3E%3Cline x1='21' y1='16' x2='30' y2='16' stroke='%23FFFFFF' stroke-width='3'/%3E%3Cline x1='16' y1='2' x2='16' y2='11'/%3E%3Cline x1='16' y1='21' x2='16' y2='30'/%3E%3Cline x1='2' y1='16' x2='11' y2='16'/%3E%3Cline x1='21' y1='16' x2='30' y2='16'/%3E%3C/g%3E%3Crect x='13' y='13' width='6' height='6' fill='%23FFFFFF'/%3E%3Crect x='14' y='14' width='4' height='4' fill='%230A0A0A'/%3E%3C/svg%3E") 16 16, crosshair;
}
html[data-review-mode="on"] a,
html[data-review-mode="on"] button,
html[data-review-mode="on"] input,
html[data-review-mode="on"] select,
html[data-review-mode="on"] [data-no-annotate],
html[data-review-mode="on"] [data-no-annotate] * {
  cursor: pointer;
}
html[data-review-mode="on"] textarea,
html[data-review-mode="on"] input[type="text"],
html[data-review-mode="on"] input[type="email"],
html[data-review-mode="on"] input[type="number"],
html[data-review-mode="on"] input[type="search"],
html[data-review-mode="on"] .rm-popover textarea {
  cursor: text;
}

/* ============================================================
   9a. Top banner (press masthead)
   ============================================================ */
#rm-banner {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: var(--rm-z-banner);
  background: var(--rm-paper);
  color: var(--rm-ink);
  border-bottom: 1px solid var(--rm-line);
  height: 52px;
  font-family: var(--rm-font-ui);
  /* Paper noise overlay, subtle fractal noise at 4.5% opacity */
  background-image:
    linear-gradient(180deg, var(--rm-paper), var(--rm-paper)),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/></svg>");
  background-blend-mode: multiply;
}
@media (max-width: 780px) { #rm-banner { height: 44px; } }
@media (min-width: 781px) and (max-width: 1024px) { #rm-banner { height: 48px; } }
@media (max-width: 780px) { html[data-review-mode="on"] body { padding-top: 44px; } }
@media (min-width: 781px) and (max-width: 1024px) { html[data-review-mode="on"] body { padding-top: 48px; } }

.rm-banner-inner {
  max-width: 1400px; height: 100%; margin: 0 auto;
  padding: 0 40px;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 20px;
}
@media (max-width: 780px) { .rm-banner-inner { padding: 0 14px; gap: 10px; } }

.rm-masthead { justify-self: start; }
.rm-masthead-name {
  font-family: var(--rm-font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.22em;
  color: var(--rm-ink);
}
@media (max-width: 780px) { .rm-masthead-name { font-size: 12px; letter-spacing: 0.18em; } }

.rm-dateline {
  justify-self: center;
  font-family: var(--rm-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rm-ink);
  white-space: nowrap;
}
@media (max-width: 780px) { .rm-dateline { font-size: 9px; letter-spacing: 0.14em; } }

.rm-banner-right {
  justify-self: end;
  display: flex; align-items: center; gap: 10px;
}

.rm-counter {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  background: var(--rm-ink); color: var(--rm-paper);
  font-family: var(--rm-font-mono); font-size: 11px; font-weight: 500;
  border-radius: 0;
  font-variant-numeric: tabular-nums;
}

#rm-banner button {
  font-family: var(--rm-font-ui);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: var(--rm-radius);
  cursor: pointer;
  transition: transform 60ms ease-out, background 120ms ease-out, color 120ms ease-out, box-shadow 120ms ease-out;
  box-shadow: var(--rm-shadow);
}
#rm-banner button:not(:disabled):hover { box-shadow: var(--rm-shadow-hover); }
#rm-banner button:not(:disabled):active {
  transform: translate(1px, 1px);
  box-shadow: var(--rm-shadow-press);
}
#rm-banner button:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: var(--rm-shadow-press); }

#rm-send {
  background: var(--rm-paper); color: var(--rm-ink);
  border: 1.5px solid var(--rm-ink);
}
#rm-send:not(:disabled):active {
  background: var(--rm-errata); color: var(--rm-ink); border-color: var(--rm-ink);
}

#rm-exit {
  background: var(--rm-paper); color: var(--rm-ink);
  border: 1.5px solid var(--rm-ink);
}
#rm-exit:hover { background: var(--rm-ink); color: var(--rm-paper); }

/* ============================================================
   9b. Numbered comment pins
   ============================================================ */
#rm-pins {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  z-index: var(--rm-z-pins);
}

.rm-pin {
  position: absolute;
  width: 28px; height: 28px;
  background: var(--rm-paper);
  border: 1px solid var(--rm-line);
  border-radius: 0;
  transform: translate(-50%, -50%);
  box-shadow: var(--rm-shadow);
  cursor: pointer;
  pointer-events: auto;
  font-family: var(--rm-font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--rm-ink);
  display: grid; place-items: center;
  padding: 0;
  transition: box-shadow 160ms ease-out, transform 160ms ease-out;
}
.rm-pin:hover {
  transform: translate(calc(-50% - 1px), calc(-50% - 1px));
  box-shadow: var(--rm-shadow-hover);
}
.rm-pin:hover .rm-pin-del { opacity: 1; }
.rm-pin span { font-variant-numeric: tabular-nums; }

.rm-pin-del {
  position: absolute; top: -8px; right: -8px;
  width: 14px; height: 14px;
  background: var(--rm-ink); color: var(--rm-paper);
  font-family: var(--rm-font-mono); font-size: 9px;
  display: grid; place-items: center;
  border: none; padding: 0; cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease-out;
  border-radius: 0;
}

/* ============================================================
   9c. Comment popover
   ============================================================ */
.rm-popover {
  position: absolute;
  z-index: var(--rm-z-popover);
  width: 280px;
  max-width: calc(100vw - 24px);
  background: var(--rm-paper);
  border: 1px solid var(--rm-line);
  border-radius: var(--rm-radius);
  box-shadow: var(--rm-shadow);
  padding: 14px 16px 12px;
  font-family: var(--rm-font-ui);
  color: var(--rm-ink);
  background-image:
    linear-gradient(180deg, var(--rm-paper), var(--rm-paper)),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/></svg>");
  background-blend-mode: multiply;
  animation: rmPopIn 180ms cubic-bezier(0.22, 0.8, 0.28, 1);
}

@keyframes rmPopIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.rm-pop-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--rm-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rm-errata);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rm-line);
  margin-bottom: 10px;
}

.rm-pop-placeholder {
  font-family: var(--rm-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  color: var(--rm-ink-60);
  margin: 0 0 6px;
}

.rm-popover textarea {
  width: 100%; min-height: 72px; resize: vertical;
  background: transparent;
  color: var(--rm-ink);
  border: none;
  border-bottom: 1px solid var(--rm-line);
  padding: 4px 0;
  font-family: var(--rm-font-ui);
  font-size: 14px;
  line-height: 1.5;
  border-radius: var(--rm-radius);
  outline: none;
}
.rm-popover textarea::placeholder {
  color: var(--rm-ink-60);
  font-family: var(--rm-font-display);
  font-style: italic;
}
.rm-popover textarea:focus { border-bottom-color: var(--rm-ink); }

.rm-pop-actions {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; margin-top: 12px;
}
.rm-pop-actions .rm-left { display: flex; gap: 8px; }
.rm-pop-actions .rm-right { display: flex; gap: 8px; }

.rm-popover button {
  font-family: var(--rm-font-ui);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: var(--rm-radius);
  cursor: pointer;
  box-shadow: var(--rm-shadow);
  transition: transform 60ms ease-out, box-shadow 120ms ease-out, background 120ms ease-out, color 120ms ease-out;
}
.rm-popover button:hover { box-shadow: var(--rm-shadow-hover); }
.rm-popover button:active {
  transform: translate(1px, 1px);
  box-shadow: var(--rm-shadow-press);
}
.rm-popover .rm-save {
  background: var(--rm-errata); color: var(--rm-ink);
  border: 1.5px solid var(--rm-ink);
}
.rm-popover .rm-cancel {
  background: var(--rm-paper); color: var(--rm-ink);
  border: 1.5px solid var(--rm-ink);
}
.rm-popover .rm-delete {
  background: var(--rm-errata-wash); color: var(--rm-errata);
  border: 1px solid var(--rm-errata);
  box-shadow: 3px 3px 0 var(--rm-errata);
  font-family: var(--rm-font-mono);
  letter-spacing: 0.14em;
  font-size: 10px;
  padding: 7px 10px;
}
.rm-popover .rm-delete:hover { box-shadow: 4px 4px 0 var(--rm-errata); }

/* ============================================================
   9d. Success toast with SENT rubber stamp
   ============================================================ */
#rm-toast {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: var(--rm-z-toast);
  width: 280px; height: 60px;
  background: var(--rm-paper);
  border: 1px solid var(--rm-line);
  border-radius: var(--rm-radius);
  box-shadow: var(--rm-shadow);
  font-family: var(--rm-font-ui);
  color: var(--rm-ink);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
  pointer-events: none;
  overflow: hidden;
}
#rm-toast.show {
  display: block;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.rm-toast-stamp {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-6deg);
  font-family: var(--rm-font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.08em;
  color: var(--rm-errata);
  border: 2px solid var(--rm-errata);
  padding: 2px 14px;
  text-transform: uppercase;
  opacity: 0.92;
  pointer-events: none;
}

/* ============================================================
   Floating "+ Note" FAB, mobile only where the crosshair cursor is moot
   ============================================================ */
#rm-fab-add {
  position: fixed; right: 16px; bottom: 88px; z-index: var(--rm-z-fab);
  background: var(--rm-paper); color: var(--rm-ink);
  border: 1.5px solid var(--rm-ink);
  border-radius: 0;
  padding: 12px 16px;
  font-family: var(--rm-font-ui);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: var(--rm-shadow);
  cursor: pointer;
}
/* The mobile FAB used to drop a comment at viewport center, which felt
   disconnected from where the user actually wanted to pin. Tap-to-pin
   on mobile is the primary flow; the FAB is hidden site-wide and kept
   in the markup for backwards compatibility. */

/* ============================================================
   9e. Minimize button in banner
   ============================================================ */
#rm-minimize {
  background: var(--rm-paper); color: var(--rm-ink);
  border: 1.5px solid var(--rm-ink);
  display: inline-flex; align-items: center; gap: 8px;
}
#rm-minimize:hover { background: var(--rm-ink); color: var(--rm-paper); }
#rm-minimize svg { display: block; }
@media (max-width: 780px) {
  #rm-minimize .rm-mini-label { display: none; }
  #rm-minimize { padding: 8px 10px; }
}

/* ============================================================
   9f. Paused state: banner tucked, resume pill in corner
   ============================================================ */
html[data-review-mode="paused"] #rm-banner,
html[data-review-mode="paused"] #rm-pins,
html[data-review-mode="paused"] #rm-fab-add { display: none; }
html[data-review-mode="paused"] body { padding-top: 0; }
html[data-review-mode="paused"] #rm-resume-pill { display: inline-flex; }

/* Paused state, no custom cursor, the site reads normally */
html[data-review-mode="paused"] body { cursor: auto; }

#rm-resume-pill {
  position: fixed;
  left: 16px; bottom: 16px;
  z-index: var(--rm-z-banner);
  align-items: stretch;
  font-family: var(--rm-font-ui);
}

.rm-resume {
  background: var(--rm-paper); color: var(--rm-ink);
  border: 1.5px solid var(--rm-ink);
  box-shadow: var(--rm-shadow);
  padding: 10px 14px;
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer;
  transition: transform 60ms ease-out, box-shadow 120ms ease-out;
  border-radius: var(--rm-radius);
  background-image:
    linear-gradient(180deg, var(--rm-paper), var(--rm-paper)),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/></svg>");
  background-blend-mode: multiply;
}
.rm-resume:hover { box-shadow: var(--rm-shadow-hover); }
.rm-resume:active {
  transform: translate(1px, 1px);
  box-shadow: var(--rm-shadow-press);
}

.rm-resume-kicker {
  font-family: var(--rm-font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--rm-ink);
}
.rm-resume-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  background: var(--rm-ink); color: var(--rm-paper);
  font-family: var(--rm-font-mono); font-size: 10px; font-weight: 500;
  font-variant-numeric: tabular-nums;
  border-radius: 0;
}
.rm-resume-cta {
  font-family: var(--rm-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rm-ink-60);
}

.rm-mini-exit {
  background: var(--rm-paper); color: var(--rm-ink);
  border: 1.5px solid var(--rm-ink);
  box-shadow: var(--rm-shadow);
  margin-left: 6px;
  width: 40px; height: 42px;
  font-family: var(--rm-font-mono);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: transform 60ms ease-out, box-shadow 120ms ease-out, background 120ms ease-out, color 120ms ease-out;
  border-radius: 0;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.rm-mini-exit:hover { background: var(--rm-ink); color: var(--rm-paper); box-shadow: var(--rm-shadow-hover); }
.rm-mini-exit:active { transform: translate(1px, 1px); box-shadow: var(--rm-shadow-press); }

@media (max-width: 780px) {
  #rm-resume-pill { left: 12px; bottom: 84px; }
  .rm-resume { padding: 8px 12px; }
  .rm-resume-cta { display: none; }
  .rm-mini-exit { width: 34px; height: 34px; font-size: 14px; }
}

/* ============================================================
   9g. Sign out link in banner
   ============================================================ */
#rm-signout {
  background: transparent; color: var(--rm-ink-60);
  border: none;
  box-shadow: none !important;
  font-family: var(--rm-font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  padding: 6px 8px !important;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  display: none;
}
#rm-signout:hover { color: var(--rm-ink); box-shadow: none !important; }
#rm-signout:active { box-shadow: none !important; transform: none !important; }
@media (max-width: 780px) {
  #rm-signout { font-size: 9px !important; padding: 4px 6px !important; }
}

/* ============================================================
   9g'. Drag-to-select marquee (live during pointermove)
   Duotone border (errata over paper) so it stands out on any
   background, dark or light. Brighter fill so the user can see what
   they're selecting against an Eight-Agency-navy hero.
   ============================================================ */
#rm-marquee {
  position: fixed;
  z-index: var(--rm-z-pins);
  border: 2px dashed var(--rm-errata);
  outline: 1px solid var(--rm-paper);
  outline-offset: -3px;
  background: rgba(255, 255, 255, 0.10);
  pointer-events: none;
  box-sizing: border-box;
  /* Subtle pulse so the user gets visual feedback that something's happening */
  animation: rmMarqueePulse 1.4s ease-in-out infinite;
}
@keyframes rmMarqueePulse {
  0%, 100% { background: rgba(255, 255, 255, 0.10); }
  50%      { background: rgba(255, 255, 255, 0.18); }
}

/* While dragging, suppress native text selection on the page and the
   blue highlight that the browser would otherwise paint under the
   marquee. */
html[data-rm-dragging] body {
  user-select: none !important;
  -webkit-user-select: none !important;
}
html[data-rm-dragging] body ::selection { background: transparent; }

/* Saved rectangle pin (a comment that has a drag-selected region).
   Heavy errata-red border with a paper inner stroke so it reads on
   both dark and light hosts. Translucent ink fill with subtle dim.
   Override .rm-pin's transform: translate(-50%, -50%) since a rectangle
   anchors at its top-left, not centered like a dot pin. */
.rm-pin.rm-pin-rect {
  position: absolute;
  background: rgba(0, 0, 0, 0.16);
  border: 2px solid var(--rm-errata);
  color: var(--rm-errata);
  border-radius: 0;
  padding: 0;
  width: auto;
  height: auto;
  cursor: pointer;
  font-family: var(--rm-font-mono);
  display: block;
  box-shadow: none;
  transform: none;
  transition: background 120ms ease;
}
.rm-pin.rm-pin-rect:hover {
  transform: none;
  background: rgba(0, 0, 0, 0.26);
  box-shadow: none;
}
.rm-pin.rm-pin-rect .rm-pin-rect-num {
  position: absolute;
  top: -1px; left: -1px;
  background: var(--rm-errata);
  color: var(--rm-paper);
  font-family: var(--rm-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border: 1px solid var(--rm-errata);
  box-shadow: 1px 1px 0 var(--rm-paper);
}
.rm-pin.rm-pin-rect .rm-pin-del {
  position: absolute;
  top: -1px; right: -1px;
  bottom: auto; left: auto;
}
/* Admin viewer rectangles read the same as author rectangles; only the
   subtle background ramp distinguishes them so the admin can immediately
   see "this is the reviewer's selection." */
.rm-pin.rm-pin-rect.rm-pin-admin {
  background: rgba(0, 0, 0, 0.22);
  border-color: var(--rm-errata);
}
.rm-pin.rm-pin-rect.rm-pin-admin:hover {
  background: rgba(0, 0, 0, 0.32);
}

/* ============================================================
   9h. Admin viewer mode
   Read-only banner + pin variant when an admin opens the client site
   with an admin viewer token. Same Paperboy aesthetic, distinguished
   by an errata-coloured tag.
   ============================================================ */
html[data-review-mode="admin"] #rm-banner { display: block; }
html[data-review-mode="admin"] #rm-pins   { display: block; }
html[data-review-mode="admin"] #rm-fab-add,
html[data-review-mode="admin"] #rm-resume-pill,
html[data-review-mode="admin"] #rm-toast {
  display: none !important;
}
html[data-review-mode="admin"] body { padding-top: 52px; }

#rm-banner.rm-banner-admin .rm-banner-tag {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 8px;
  border: 1px solid var(--rm-errata);
  color: var(--rm-errata);
  font-family: var(--rm-font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
#rm-banner.rm-banner-admin #rm-admin-close {
  background: var(--rm-paper);
  color: var(--rm-ink);
  border: 1.5px solid var(--rm-ink);
}
#rm-banner.rm-banner-admin #rm-admin-close:hover {
  background: var(--rm-ink);
  color: var(--rm-paper);
}

/* Admin pins are filled in errata red so they're obviously different
   from the reviewer's own (in-progress) ink-coloured pins. */
.rm-pin.rm-pin-admin {
  background: var(--rm-errata);
  color: var(--rm-paper);
  border-color: var(--rm-errata);
}
.rm-pin.rm-pin-admin:hover {
  background: var(--rm-paper);
  color: var(--rm-errata);
}

/* ============================================================
   9i. Mobile-friendly popover sheet
   On coarse-pointer or narrow viewports, the popover docks to the
   bottom edge of the viewport as a full-width sheet with a larger
   typing target instead of trying to anchor a 280px box near the tap.
   ============================================================ */
.rm-popover.rm-popover-sheet {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 0 !important;
  box-shadow: 0 -4px 0 var(--rm-line) !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  padding: 18px 18px max(18px, env(safe-area-inset-bottom)) !important;
  animation: rmSheetIn 220ms cubic-bezier(0.22, 0.8, 0.28, 1) !important;
}
.rm-popover.rm-popover-sheet textarea {
  min-height: 120px;
  font-size: 16px; /* prevents iOS zoom-in on focus */
}
/* Lock the page while the bottom sheet is open. The brick toggles
   data-rm-popover-open on <html> from openPopoverForRMComment / closePopover.
   Without this iOS routinely scrolls the page underneath the sheet as
   the user types, breaking their sense of where the pin is anchored. */
html[data-rm-popover-open] body {
  overflow: hidden !important;
  touch-action: none;
}
@keyframes rmSheetIn {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* Larger touch targets across the board on coarse-pointer devices. */
@media (pointer: coarse), (max-width: 600px) {
  .rm-pin {
    width: 36px; height: 36px;
    font-size: 13px;
  }
  .rm-pin .rm-pin-del {
    width: 22px; height: 22px;
    bottom: -10px; right: -10px;
  }
  #rm-fab-add {
    /* Hidden by the parent rule; styles retained for backwards compat
       in case the FAB is ever re-enabled. */
    bottom: 18px; right: 18px;
    padding: 14px 18px;
    font-size: 13px;
  }
  #rm-banner .rm-banner-right { gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
  #rm-banner button { padding: 6px 10px; font-size: 11px; }
  /* Hide the dateline strip on mobile, the masthead alone communicates state */
  #rm-banner .rm-dateline { display: none; }
  /* Brand wordmark stays, "REVIEW MODE" tag falls off */
  #rm-banner .rm-masthead-name { display: none; }
}

/* Below 480px the banner is too narrow even for icon labels. The Sign out
   pill collapses into a small initial-circle in the masthead, the Hide and
   Exit labels go icon-only. */
@media (max-width: 480px) {
  #rm-banner #rm-signout {
    font-size: 0; /* hide text */
    padding: 6px;
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    position: relative;
  }
  #rm-banner #rm-signout::before {
    content: "@";
    font-size: 13px;
    font-family: var(--rm-font-mono);
  }
  #rm-banner #rm-exit {
    font-size: 0;
    padding: 6px;
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  #rm-banner #rm-exit::before {
    content: "×";
    font-size: 18px;
    line-height: 1;
  }
  #rm-banner #rm-minimize .rm-mini-label { display: none; }
  #rm-banner #rm-minimize { padding: 6px; width: 28px; height: 28px; }
}

/* ============================================================
   9j. Read-only popover variant for admin viewer
   ============================================================ */
.rm-popover.rm-popover-readonly textarea { display: none; }
.rm-popover.rm-popover-readonly .rm-pop-body {
  font-family: var(--rm-font-ui);
  font-size: 15px;
  line-height: 1.5;
  margin: 8px 0 12px;
  color: var(--rm-ink);
  white-space: pre-wrap;
}
.rm-popover.rm-popover-readonly .rm-pop-meta {
  font-family: var(--rm-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rm-ink-60);
  margin: 4px 0;
}

/* ============================================================
   9k. Reviewer email gate modal
   ============================================================ */
#rm-email-modal {
  position: fixed; inset: 0;
  z-index: 2147483100;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--rm-font-ui);
  padding: 16px;
}
#rm-email-modal .rm-email-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.35);
}
#rm-email-modal .rm-email-card {
  position: relative;
  background: var(--rm-paper);
  color: var(--rm-ink);
  border: 1.5px solid var(--rm-ink);
  box-shadow: var(--rm-shadow);
  padding: 22px 22px 18px;
  width: 100%;
  max-width: 380px;
  background-image:
    linear-gradient(180deg, var(--rm-paper), var(--rm-paper)),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/></svg>");
  background-blend-mode: multiply;
}
#rm-email-modal .rm-email-kicker {
  font-family: var(--rm-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rm-errata);
  margin-bottom: 8px;
}
#rm-email-modal .rm-email-title {
  font-family: var(--rm-font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.1;
  margin: 0 0 8px;
  color: var(--rm-ink);
}
#rm-email-modal .rm-email-copy {
  font-family: var(--rm-font-ui);
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 14px;
  color: var(--rm-ink-60);
}
#rm-email-modal .rm-email-label {
  display: block;
  font-family: var(--rm-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rm-ink);
  margin-bottom: 6px;
}
#rm-email-modal #rm-email-input {
  width: 100%;
  background: var(--rm-paper);
  color: var(--rm-ink);
  border: 1.5px solid var(--rm-ink);
  padding: 10px 12px;
  font-family: var(--rm-font-ui);
  font-size: 14px;
  outline: none;
  border-radius: 0;
  box-sizing: border-box;
}
#rm-email-modal #rm-email-input:focus { box-shadow: var(--rm-shadow); }
#rm-email-modal #rm-email-input.rm-email-invalid {
  border-color: var(--rm-errata);
  box-shadow: 3px 3px 0 var(--rm-errata);
}
#rm-email-modal .rm-email-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 16px;
}
#rm-email-modal .rm-email-actions button {
  font-family: var(--rm-font-ui);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 9px 14px;
  border-radius: 0;
  cursor: pointer;
  box-shadow: var(--rm-shadow);
  transition: transform 60ms ease-out, box-shadow 120ms ease-out, background 120ms ease-out, color 120ms ease-out;
}
#rm-email-modal .rm-email-actions button:hover { box-shadow: var(--rm-shadow-hover); }
#rm-email-modal .rm-email-actions button:active {
  transform: translate(1px, 1px);
  box-shadow: var(--rm-shadow-press);
}
#rm-email-modal .rm-email-skip {
  background: var(--rm-paper); color: var(--rm-ink);
  border: 1.5px solid var(--rm-ink);
}
#rm-email-modal .rm-email-save {
  background: var(--rm-errata); color: var(--rm-ink);
  border: 1.5px solid var(--rm-ink);
}

/* ============================================================
   9l. Generic confirm modal. Reuses .rm-email-card paper styling.
   ============================================================ */
#rm-confirm-modal {
  position: fixed; inset: 0;
  z-index: 2147483200;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--rm-font-ui);
  padding: 16px;
}
#rm-confirm-modal .rm-email-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.35);
}
#rm-confirm-modal .rm-confirm-card { max-width: 420px; }
#rm-confirm-modal .rm-email-actions { gap: 10px; }
#rm-confirm-modal .rm-email-actions button {
  font-family: var(--rm-font-ui);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: 0;
  cursor: pointer;
  box-shadow: var(--rm-shadow);
  transition: transform 60ms ease-out, box-shadow 120ms ease-out;
}
#rm-confirm-modal .rm-confirm-cancel {
  background: var(--rm-paper); color: var(--rm-ink);
  border: 1.5px solid var(--rm-ink);
}
#rm-confirm-modal .rm-confirm-ok {
  background: var(--rm-ink); color: var(--rm-paper);
  border: 1.5px solid var(--rm-ink);
}
#rm-confirm-modal .rm-confirm-ok.rm-danger {
  background: var(--rm-errata);
  color: var(--rm-ink);
}
#rm-confirm-modal .rm-email-actions button:hover { box-shadow: var(--rm-shadow-hover); }
#rm-confirm-modal .rm-email-actions button:active {
  transform: translate(1px, 1px);
  box-shadow: var(--rm-shadow-press);
}

/* ============================================================
   9m. First-run onboarding coach card. One-time, self-dismissing.
   Sits in the bottom-left corner so the banner across the top has
   a clear path. On mobile it pins to the bottom of the viewport.
   ============================================================ */
#rm-coach {
  position: fixed;
  left: 16px; bottom: 16px;
  z-index: 2147483050;
  max-width: 320px;
  font-family: var(--rm-font-ui);
}
#rm-coach .rm-coach-card {
  background: var(--rm-paper);
  color: var(--rm-ink);
  border: 1.5px solid var(--rm-ink);
  box-shadow: var(--rm-shadow);
  padding: 16px 18px 14px;
  background-image:
    linear-gradient(180deg, var(--rm-paper), var(--rm-paper)),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/></svg>");
  background-blend-mode: multiply;
  animation: rmCoachIn 220ms cubic-bezier(0.22, 0.8, 0.28, 1);
}
#rm-coach .rm-coach-kicker {
  font-family: var(--rm-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rm-errata);
  margin-bottom: 6px;
}
#rm-coach h3 {
  font-family: var(--rm-font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 6px;
}
#rm-coach p {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--rm-ink-60);
  margin: 0 0 12px;
}
#rm-coach .rm-coach-dismiss {
  font-family: var(--rm-font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--rm-ink);
  color: var(--rm-paper);
  border: 1.5px solid var(--rm-ink);
  padding: 8px 14px;
  cursor: pointer;
  box-shadow: var(--rm-shadow);
}
@keyframes rmCoachIn {
  from { transform: translateY(8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@media (max-width: 600px) {
  #rm-coach {
    left: 12px; right: 12px;
    bottom: 12px; max-width: none;
  }
}

/* ============================================================
   9n. Resolved-state visual treatment for read-only popovers.
   ============================================================ */
.rm-popover.rm-popover-resolved { border-left: 4px solid #2f7a3f; }
.rm-pop-resolved {
  color: #2f7a3f !important;
  font-weight: 600;
}
.rm-pop-warn {
  color: var(--rm-errata) !important;
}
.rm-popover .rm-resolve {
  background: var(--rm-ink); color: var(--rm-paper);
  border: 1.5px solid var(--rm-ink);
  padding: 8px 12px;
  font-family: var(--rm-font-ui);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--rm-shadow);
}
.rm-popover .rm-reopen {
  background: var(--rm-paper); color: var(--rm-ink);
  border: 1.5px solid var(--rm-ink);
  padding: 8px 12px;
  font-family: var(--rm-font-ui);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--rm-shadow);
}

/* Visually hidden aria-live region. */
#rm-live {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Accessibility / reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .rm-popover { animation: none; }
  #rm-toast { transition: opacity 120ms linear; }
}


/* ============================================================
   9l. Paperboy brand mark in the masthead + language toggle
   ============================================================ */
.rm-paperboy-logo {
  display: inline-block;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background-image: url("data:image/png;base64,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");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: 8px;
}
.rm-paperboy-brand {
  font-family: var(--rm-font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--rm-ink);
  margin-right: 10px;
  vertical-align: middle;
}
.rm-masthead {
  display: flex;
  align-items: center;
  gap: 0;
}

.rm-lang-toggle {
  display: inline-flex;
  border: 1px solid var(--rm-ink);
  border-radius: 0;
  overflow: hidden;
  margin-right: var(--rm-space-2, 8px);
  align-items: stretch;
  flex-shrink: 0;
}
.rm-lang-toggle button {
  font-family: var(--rm-font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  padding: 4px 8px;
  background: transparent;
  color: var(--rm-ink);
  border: 0;
  cursor: pointer;
  text-transform: uppercase;
  line-height: 1;
}
.rm-lang-toggle button + button {
  border-left: 1px solid var(--rm-ink);
}
.rm-lang-toggle button.on {
  background: var(--rm-ink);
  color: var(--rm-paper);
}
.rm-lang-toggle button:not(.on):hover {
  background: rgba(10, 10, 10, 0.08);
}
@media (max-width: 600px) {
  .rm-paperboy-brand { display: none; }
  .rm-lang-toggle button { padding: 4px 6px; }
}


/* ============================================================
   9m. Movable / resizable author pins
   ============================================================ */
/* Dot pins in author mode show a grab cursor over the body and
   the pin-num text is non-selectable so drag feels native. */
.rm-pin.rm-pin-movable:not(.rm-pin-rect) {
  cursor: grab;
}
.rm-pin.rm-pin-movable:not(.rm-pin-rect) span {
  pointer-events: none;
  user-select: none;
}
html[data-rm-pin-dragging] .rm-pin.rm-pin-movable:not(.rm-pin-rect) {
  cursor: grabbing;
}

/* Rect pins in author mode: drag the body to move, drag a corner to
   resize. The number badge and X delete still work as before. */
.rm-pin.rm-pin-rect.rm-pin-movable {
  cursor: move;
}
html[data-rm-pin-dragging] .rm-pin.rm-pin-rect.rm-pin-movable {
  cursor: grabbing;
}
.rm-pin.rm-pin-rect.rm-pin-movable .rm-pin-rect-num,
.rm-pin.rm-pin-rect.rm-pin-movable .rm-pin-del {
  pointer-events: auto;
}

.rm-pin-resize {
  position: absolute;
  width: 12px; height: 12px;
  background: var(--rm-paper);
  border: 1.5px solid var(--rm-errata);
  box-sizing: border-box;
  z-index: 2;
  pointer-events: auto;
}
.rm-pin-resize[data-corner="nw"] { top: -7px; left: -7px;  cursor: nwse-resize; }
.rm-pin-resize[data-corner="ne"] { top: -7px; right: -7px; cursor: nesw-resize; }
.rm-pin-resize[data-corner="sw"] { bottom: -7px; left: -7px;  cursor: nesw-resize; }
.rm-pin-resize[data-corner="se"] { bottom: -7px; right: -7px; cursor: nwse-resize; }
.rm-pin-resize:hover {
  background: var(--rm-errata);
}
@media (pointer: coarse) {
  .rm-pin-resize { width: 18px; height: 18px; }
  .rm-pin-resize[data-corner="nw"] { top: -10px; left: -10px; }
  .rm-pin-resize[data-corner="ne"] { top: -10px; right: -10px; }
  .rm-pin-resize[data-corner="sw"] { bottom: -10px; left: -10px; }
  .rm-pin-resize[data-corner="se"] { bottom: -10px; right: -10px; }
}

/* While dragging a pin, suppress text selection and pin transitions
   so positions track the cursor 1:1. */
html[data-rm-pin-dragging] body { user-select: none; }
html[data-rm-pin-dragging] .rm-pin { transition: none !important; }