/* ============================================================================
   STAGING-CHROME Z-BAND — the single source of truth for stacking order.
   Every z-index in the review tool AND the responsive previewer is declared here
   and nowhere else. Change stacking by editing THIS TABLE, never by bumping one
   selector: the bug this replaced was exactly that — .rc-panel was raised to
   99999 to clear the 99998 dock while .rc-popover was left behind at 99992, so
   an open comment thread near the right edge was silently click-jacked by the
   device dock (elementFromPoint over the thread's Delete/Resolve returned
   .rp-btn). One selector moved; the layer did not.

   THE REVIEW LAYER IS NOT ONE BLOCK — IT IS TWO, AND THE DOCK SITS BETWEEN THEM.
   That is deliberate and it is load-bearing. The obvious fix ("put every rc-*
   above the dock") is wrong, and measurably so: .rc-capture is a full-viewport
   click catcher, so above the dock it swallows all five dock buttons the instant
   review mode turns on (measured: every dock button hit-tested to .rc-capture /
   .rc-box). A large .rc-box region does the same. The dock has to stay reachable
   while you are commenting, so the split is:

     2000000  --z-rp-overlay   device-preview modal — owns the screen. Safe at the
                               top because the review chrome is display:none'd
                               under it (body.rp-preview-open, responsive-preview.css).

     ---- REVIEW UI SURFACES — above the dock. These are the things the reviewer
          is actively pointing at, and the things the dock used to eat. ----
     1000060  --z-rc-controls  💬 Comment / ☰ All buttons
     1000050  --z-rc-hint      mode hint            (pointer-events: none)
     1000040  --z-rc-brand     T-Bolt Mockup bar    (pointer-events: none)
     1000030  --z-rc-panel     side drawer
     1000020  --z-rc-popover   thread + composer  <-- THE FIX (was 99992, under 99998)

      950000  --z-rp-dock      responsive previewer dock (responsive-preview.css)

     ---- REVIEW PAGE-ANNOTATION LAYER — below the dock, as it always was. These
          are marks ON the page, not UI the reviewer is working inside. Keeping
          them under the dock is what keeps the dock clickable in review mode. ----
      900020  --z-rc-marks     pins / boxes / live draw rect
      900010  --z-rc-capture   click-capture sheet (full viewport — see above)

          <60 site chrome (shell.css tops out at 60)

   Known, accepted trade-off of that split: a pin or box lying under the dock's
   right-edge strip can't be clicked directly. It is still reachable from the ☰ All
   panel (click-to-jump), and this is the pre-existing behaviour — the dock has
   always outranked the marks. The alternative costs the whole dock.

   STACKING IS ONLY HALF THE FIX. The dock and the drawer are both pinned to the
   right edge, so ordering them merely chooses which one is broken: dock on top
   click-jacks the drawer, drawer on top hides the dock while its five buttons stay
   in the tab order behind an opaque panel. So the overlap is RESOLVED, not stacked —
   ResponsivePreview watches `body.rc-panel-open` / `body.rc-surface-open` and moves
   the dock clear of the drawer (or unmounts it when there is no room, and while a
   thread is open). That is the mirror of the body.rp-preview-open discipline which
   hides the review chrome under a device preview. See ResponsivePreview.tsx.

   The review chrome is portaled to <body> (see CommentLayer) so `position: fixed`
   is always resolved against the viewport, never against a transformed ancestor.
   Each use site repeats its literal as a var() fallback, so the band still holds if
   one of these DEV-only stylesheets loads without the other. */
:root {
  --z-rp-overlay: 2000000;
  --z-rc-controls: 1000060;
  --z-rc-hint: 1000050;
  --z-rc-brand: 1000040;
  --z-rc-panel: 1000030;
  --z-rc-popover: 1000020;
  --z-rp-dock: 950000;
  --z-rc-marks: 900020;
  --z-rc-capture: 900010;

  /* Panel width. Read back by ResponsivePreview (getComputedStyle) to work out
     how far to move the dock, so the two never drift apart. */
  --rc-panel-w: 320px;
}

/* bottom-left control dock — groups the mode toggle + list button reliably */
.rc-controls { position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: var(--z-rc-controls, 1000060); display: flex; align-items: center; gap: .5rem; }
.rc-toggle, .rc-list-btn { display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(20,25,37,.96); color: #fff; border: none; border-radius: 999px; padding: .6rem 1.05rem; cursor: pointer;
  font-family: 'Lato', system-ui, sans-serif; font-weight: 700; font-size: .9rem; line-height: 1; white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0,0,0,.3); transition: background .15s; }
.rc-toggle:hover, .rc-list-btn:hover { background: #1B2230; }
.rc-toggle.is-on { background: #00B1EE; }
.rc-list-btn.is-on { background: #00B1EE; }
/* Passive status text — it sits ABOVE the popover in the band, so if it were ever
   hit-testable it would click-jack an open thread that reaches the bottom of the
   screen (it did: elementFromPoint over a thread's link returned .rc-mode-hint at
   390). Nothing in this element is interactive, so it must never absorb a click.
   Same guarantee the brand bar already has. */
.rc-mode-hint { position: fixed; left: 50%; bottom: 3.75rem; transform: translateX(-50%); z-index: var(--z-rc-hint, 1000050);
  pointer-events: none;
  background: rgba(0,101,173,.92); color: #fff; padding: .4rem .9rem; border-radius: 8px; font-size: .85rem; font-family: 'Lato', system-ui, sans-serif; }
/* permanent branding bar — bottom center, click-through (Thunderbolt agency branding, not site palette) */
.rc-brandbar { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: var(--z-rc-brand, 1000040); pointer-events: none;
  display: flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.94); backdrop-filter: blur(4px);
  border: 1px solid #dce5ec; border-radius: 999px; padding: .35rem .9rem; box-shadow: 0 6px 18px rgba(0,0,0,.15);
  font-family: 'Lato', system-ui, sans-serif; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: #6b7580; }
.rc-brandbar__logo { height: 24px; width: auto; display: block; }
.rc-brandbar__txt { font-weight: 700; color: #0065AD; letter-spacing: .02em; }
.rc-capture { position: fixed; inset: 0; z-index: var(--z-rc-capture, 900010); cursor: crosshair; background: rgba(0,177,238,.06); touch-action: none; }
.rc-pin { position: absolute; z-index: var(--z-rc-marks, 900020); width: 26px; height: 26px; transform: translate(-50%,-100%);
  background: #00B1EE; color: #fff; border: 2px solid #fff; border-radius: 50% 50% 50% 0; rotate: -45deg;
  display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,.4); }
.rc-pin span { rotate: 45deg; font-size: 12px; font-weight: 700; font-family: 'Lato', system-ui, sans-serif; }
.rc-pin.is-resolved { background: #9aa7b0; opacity: .6; }

/* region/box comment + the live drawing rectangle */
.rc-box { position: absolute; z-index: var(--z-rc-marks, 900020); border: 2px solid #00B1EE; background: rgba(0,177,238,.15);
  border-radius: 4px; cursor: pointer; }
.rc-box.is-resolved { border-color: #9aa7b0; background: rgba(154,167,176,.12); opacity: .65; }
.rc-box__num, .rc-pin-num { position: absolute; top: -12px; left: -12px; width: 24px; height: 24px; border-radius: 50%;
  background: #00B1EE; color: #fff; border: 2px solid #fff; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; font-family: 'Lato', system-ui, sans-serif; box-shadow: 0 3px 8px rgba(0,0,0,.4); }
.rc-box.is-resolved .rc-box__num { background: #9aa7b0; }
.rc-draw { position: absolute; z-index: var(--z-rc-marks, 900020); border: 2px dashed #00B1EE; background: rgba(0,177,238,.12); border-radius: 4px; pointer-events: none; }
/* panel header */
.rc-panel__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.rc-panel__title { font-size: 1rem; white-space: nowrap; }
.rc-panel__brandbar { display: flex; align-items: center; padding-bottom: .7rem; margin-bottom: .85rem; border-bottom: 2px solid #00B1EE; }
.rc-panel__logo { height: 40px; width: auto; display: block; }
.rc-panel__actions { display: flex; align-items: center; gap: .4rem; flex: none; }
.rc-chip { background: transparent; border: 1px solid #dce5ec; color: #0065AD; border-radius: 999px; cursor: pointer;
  padding: .25rem .7rem; font: inherit; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.rc-chip:hover { border-color: #004E86; color: #004E86; }
.rc-panel__close { display: grid; place-items: center; width: 28px; height: 28px; background: transparent; border: 1px solid #dce5ec;
  border-radius: 6px; cursor: pointer; font-size: .9rem; line-height: 1; color: #0065AD; flex: none; }
.rc-panel__close:hover { border-color: #004E86; color: #004E86; }
.rc-item__num { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #00B1EE;
  color: #fff; font-size: 11px; font-weight: 700; margin-right: .4rem; flex: none; }
.rc-item__num.is-resolved { background: #9aa7b0; }
/* Self-explaining empty state: when the filter or the page scope is hiding rows,
   the panel says so and offers the way out inline, instead of a bare "no comments"
   that contradicts the count on the ☰ All button. */
.rc-empty { background: #fff; border: 1px dashed #dce5ec; border-radius: 8px; padding: .7rem; margin-bottom: .5rem; }
.rc-empty .rc-meta { margin: 0; line-height: 1.45; }
.rc-inline-btn { display: inline; background: none; border: none; padding: 0; font: inherit; font-weight: 700;
  color: #0065AD; text-decoration: underline; cursor: pointer; }
.rc-inline-btn:hover { color: #004E86; }
/* This page / All pages tabs */
.rc-tabs { display: flex; gap: .3rem; margin-bottom: .75rem; }
.rc-tab { flex: 1; background: #eef4f9; border: 1px solid #dce5ec; color: #424242; border-radius: 7px; cursor: pointer;
  padding: .35rem .5rem; font: inherit; font-size: .8rem; font-weight: 600; }
.rc-tab.is-on { background: #00B1EE; color: #fff; border-color: #00B1EE; }
/* All-pages grouping */
.rc-group { margin-bottom: 1rem; }
.rc-group__head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .4rem;
  padding-bottom: .3rem; border-bottom: 1px solid #dce5ec; }
.rc-group__name { font-weight: 700; font-size: .85rem; color: #0065AD; }
.rc-group__count { font-size: .72rem; color: #6b7580; white-space: nowrap; }
.rc-group__count.has-open { color: #0065AD; font-weight: 700; }
/* Thunderbolt Group branding footer */
.rc-brand { display: flex; align-items: center; gap: .5rem; margin-top: 1.25rem; padding-top: .85rem;
  border-top: 1px solid #dce5ec; color: #6b7580; font-size: .72rem; letter-spacing: .03em; }
.rc-brand__logo { height: 22px; width: auto; display: block; }
.rc-brand__txt { font-weight: 700; color: #0065AD; }
.rc-popover, .rc-panel { font-family: 'Lato', system-ui, sans-serif; color: #1f2933; }
/* A thread with several replies is easily taller than a phone screen; unbounded, it
   ran off the bottom of the page where the reviewer could neither read nor click it
   (probes over its lower half hit nothing at all at 390). Cap it and scroll inside. */
.rc-popover { position: absolute; z-index: var(--z-rc-popover, 1000020); width: min(300px, calc(100vw - 24px)); background: #fff; border: 1px solid #dce5ec;
  border-radius: 10px; box-shadow: 0 18px 50px rgba(0,0,0,.25); padding: .85rem; transform: translate(-50%, 12px);
  max-height: min(70vh, 560px); overflow-y: auto; overscroll-behavior: contain; }
.rc-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(var(--rc-panel-w, 320px), 100vw); z-index: var(--z-rc-panel, 1000030); background: #eef4f9;
  border-left: 1px solid #dce5ec; box-shadow: -8px 0 30px rgba(0,0,0,.12); padding: 1rem; overflow: auto; }
.rc-row { display: flex; gap: .5rem; align-items: center; }
.rc-input, .rc-textarea { width: 100%; border: 1px solid #dce5ec; border-radius: 6px; padding: .45rem .6rem; font: inherit; }
.rc-textarea { min-height: 64px; resize: vertical; }
.rc-btn { background: #00B1EE; color: #fff; border: none; border-radius: 6px; padding: .4rem .8rem; cursor: pointer; font: inherit; font-weight: 600; white-space: nowrap; }
.rc-btn--ghost { background: transparent; color: #0065AD; border: 1px solid #dce5ec; }
.rc-meta { font-size: .75rem; color: #6b7580; }
.rc-author { display: inline-flex; align-items: baseline; gap: .35rem; min-width: 0; }
.rc-time { font-weight: 400; font-size: .72rem; color: #6b7580; white-space: nowrap; }
.rc-item { background: #fff; border: 1px solid #dce5ec; border-radius: 8px; padding: .6rem; margin-bottom: .5rem; }
.rc-reply { border-top: 1px dashed #dce5ec; margin-top: .5rem; padding-top: .5rem; }
.rc-reply__head { margin-bottom: .2rem; }

/* --- editing --------------------------------------------------------------
   Any reviewer may edit any comment or reply (identity is an unauthenticated
   per-browser id, so owner-locking would be theatre). The safeguard is the
   `edited by` attribution below, not a lock. */
.rc-btn:disabled { opacity: .5; cursor: not-allowed; }
.rc-edit { margin: .4rem 0; }
.rc-edit .rc-textarea { min-height: 72px; }

/* low-emphasis inline "Edit" affordance for replies + side-panel rows */
.rc-linkbtn { background: none; border: none; padding: 0; cursor: pointer; font: inherit; font-size: .75rem;
  font-weight: 600; color: #0065AD; text-decoration: underline; text-underline-offset: 2px; }
.rc-linkbtn:hover { color: #004E86; }
/* the resting state of a two-click Delete when it sits inline next to an Edit link */
.rc-linkbtn--danger { color: #b3261e; }
.rc-linkbtn--danger:hover { color: #8c1d18; }
.rc-rowactions { flex: none; gap: .6rem; }

/* --- bodies & links -------------------------------------------------------
   Reviewers paste long URLs (the Drive links in this project run ~85 chars). The
   popover is a fixed 300px card, so an unbroken URL MUST be allowed to break
   mid-token or it blows the card's width out / clips. overflow-wrap is inherited,
   so setting it on the containers covers every descendant, but it's repeated on
   the body/anchor so a future container can't quietly drop it. */
.rc-popover, .rc-item, .rc-body, .rc-link { overflow-wrap: anywhere; word-break: break-word; }
.rc-body { display: inline; min-width: 0; }
.rc-link { color: #0065AD; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.rc-link:hover { color: #004E86; }

/* --- status chip ----------------------------------------------------------
   Status used to render as the bare word "Open" in a .rc-meta line. Sitting directly
   under a body that ENDS in a pasted URL, it read as a second, dead link — a client
   asked what the broken "Open" link was. It is now unmistakably a status: a dot + a
   muted pill. Deliberately NOT underlined, NOT the link colour (#0065AD / .rc-link /
   .rc-linkbtn), and default-cursor + non-interactive. Don't restyle it toward a link. */
.rc-status { display: inline-flex; align-items: center; gap: .35rem; flex: none; white-space: nowrap;
  padding: .1rem .5rem; border-radius: 999px; background: #eef0f2; border: 1px solid #e0e3e6; color: #5a6570;
  font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
  cursor: default; user-select: none; }
.rc-status__dot { width: 6px; height: 6px; border-radius: 50%; background: #2e7d47; flex: none; }
.rc-status.is-resolved { background: #f2f3f4; color: #6b7580; }
.rc-status.is-resolved .rc-status__dot { background: #9aa7b0; }
.rc-status__when { font-weight: 400; text-transform: none; letter-spacing: 0; color: #6b7580; }
/* status chip + "· edited" note on one line, wrapping instead of overflowing */
.rc-metarow { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; margin: .35rem 0 .1rem; }

/* audit trail — "· edited <date>", or "· edited by <name> · <date>" when the
   editor isn't the original author (never let an edit impersonate the author) */
.rc-edited { font-size: .72rem; color: #6b7580; font-style: italic; }

/* Edit + Delete now share these feet, so they wrap rather than overflow the 300px card */
.rc-reply__foot, .rc-item__foot { display: flex; align-items: baseline; justify-content: space-between;
  gap: .5rem; margin-top: .25rem; flex-wrap: wrap; row-gap: .3rem; }
.rc-item__foot { margin-top: .35rem; }
.rc-reply__foot .rc-edited { flex: 1 1 auto; min-width: 0; }
/* the panel row has no left-hand content when a comment has no replies — keep the
   Edit/Delete pair pinned right instead of letting it drift left */
.rc-item__foot { justify-content: flex-end; }
.rc-item__foot .rc-meta { margin-right: auto; }

/* destructive confirm (2nd click of Delete) */
.rc-btn--danger { background: #b3261e; }
.rc-btn--danger:hover { background: #8c1d18; }

/* Resolve/Edit/Delete row — wraps rather than overflowing the 300px popover
   once a confirm expands into two buttons */
.rc-actions { flex-wrap: wrap; row-gap: .4rem; }

/* small screens: stack the bottom controls / brand / hint so they don't overlap.
   Order bottom-to-top is Comment dock → T-Bolt Mockup bar: the interactive
   Comment/All controls sit ON TOP (higher up, primary), the passive mockup brand
   bar below them — the reverse of the desktop layering, per the small-screen
   request. */
@media (max-width: 640px) {
  .rc-controls { left: .6rem; bottom: 3rem; }
  .rc-toggle, .rc-list-btn { padding: .5rem .8rem; font-size: .82rem; }
  .rc-brandbar { left: .6rem; right: auto; transform: none; bottom: .6rem; padding: .3rem .7rem; }
  .rc-mode-hint { left: 50%; transform: translateX(-50%); bottom: 6rem; font-size: .78rem; max-width: 92vw; text-align: center; }
}

/* Devy's avatar on her review replies (AuthorBadge in CommentLayer.tsx). */
.rc-authorbadge { display: inline-flex; align-items: center; gap: 5px; }
.rc-avatar {
  width: 18px; height: 18px; flex: 0 0 18px;
  border-radius: 50%; object-fit: cover; background: #111;
}

/* --- inside the responsive previewer's iframe --------------------------------
   ResponsivePreview loads the CURRENT route inside a device-sized <iframe> and
   tags that inner document `html.rp-frame-doc` (the same hook it uses to hide the
   iframe's scrollbars). That inner page mounts the SAME review chrome — the
   Comment/All dock and the T-Bolt Mockup bar — which already sit on the OUTER
   window. Rendering them again inside the scaled-down device frame is pure
   duplication and just clutters the preview (you're checking layout there, not
   commenting). Suppress the review chrome inside the frame; the real controls
   live on the outer page. Scoped to .rp-frame-doc, so nothing changes outside a
   preview. */
html.rp-frame-doc .rc-controls,
html.rp-frame-doc .rc-brandbar { display: none; }