:root {
  --blue: #407ca7;
  --ink: #102333;
  --muted: #667085;
  --border: #d7dee6;
  --bg: #f4f6f8;
  --card: #ffffff;
  --panel: #f9fafb;
  --danger: #8a1f1f;
  --reveal: 50;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

a {
  color: var(--blue);
}

.shell {
  width: min(1120px, calc(100% - 32px));
  margin: 32px auto;
}

.shell.narrow {
  width: min(520px, calc(100% - 32px));
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.admin-url-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.admin-primary-card h2,
.admin-primary-card h3 {
  margin-top: 0;
}

.admin-secondary-tools summary {
  cursor: pointer;
  font-weight: 800;
}

.admin-secondary-tools[open] summary {
  margin-bottom: 12px;
}

.admin-inline-tool {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  background: #fff;
}

.stack {
  display: grid;
  gap: 16px;
}

label {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
  font-weight: 600;
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  font: inherit;
}

textarea {
  min-height: 110px;
}

/* The generic `button { display: inline-block }` rule below is an author style
   and therefore overrides the user-agent `[hidden] { display: none }` rule
   (cascade origin beats specificity), which would leave hidden buttons like the
   disabled "Interact" mode visible. Restore the intended behavior. */
[hidden] {
  display: none !important;
}

button,
.button {
  display: inline-block;
  border: 0;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  padding: 10px 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.2;
}

.button.secondary,
button.secondary {
  background: #e9eef3;
  color: var(--ink);
}

.actions,
.feedback-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.eyebrow {
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 6px;
}

.muted {
  color: var(--muted);
}

.notice.error {
  background: #ffe7e7;
  border: 1px solid #ffb5b5;
  color: var(--danger);
  padding: 12px;
  border-radius: 12px;
}

.result-item {
  border-left: 4px solid var(--blue);
  padding: 10px 0 10px 16px;
}

.review-body {
  background: #dfe5eb;
}

.review-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 12px 20px;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
}

.review-topbar h1 {
  margin: 0;
  font-size: 18px;
}

.review-nav {
  display: flex;
  gap: 8px;
  align-items: center;
  white-space: nowrap;
}

.review-nav form {
  margin: 0;
}

.review-deck {
  width: min(1800px, calc(100% - 24px));
  margin: 0 auto;
  padding: 12px 0 28px;
}

.review-page {
  min-height: calc(100vh - 82px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  margin-bottom: 18px;
  scroll-margin-top: 88px;
}

.review-page--work {
  padding: 14px;
}

.review-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 14px;
  min-height: calc(100vh - 130px);
}

.review-canvas {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
}

.page-heading {
  padding: 6px 4px 0;
}

.page-heading h2 {
  margin: 0 0 6px;
  font-size: 22px;
}

.page-heading p {
  margin-top: 0;
}

.feedback-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  align-self: start;
  position: sticky;
  top: 88px;
  max-height: calc(100vh - 110px);
  overflow: auto;
}

.feedback-panel h3 {
  margin-top: 0;
}

.cover-slide {
  display: grid;
  place-content: center;
  text-align: center;
  padding: 48px;
}

.cover-slide h1 {
  font-size: clamp(44px, 7vw, 96px);
  line-height: 1;
  margin: 0 0 18px;
}

.cover-slide h2 {
  font-size: clamp(22px, 3vw, 38px);
  margin: 0 0 20px;
  color: var(--blue);
}

.cover-slide p {
  max-width: 800px;
  margin-inline: auto;
  font-size: 20px;
}

.compare {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #eef1f4;
  border-radius: 0;
  overflow: hidden;
  user-select: none;
}

.wide-compare {
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
}

.compare.is-placing-dot {
  cursor: crosshair;
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

.compare img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  background: #fff;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.compare img.before {
  clip-path: inset(0 calc(100% - (var(--reveal) * 1%)) 0 0);
  z-index: 2;
}

.compare img.after {
  position: static;
  clip-path: inset(0 0 0 calc(var(--reveal) * 1%));
  z-index: 1;
}

.divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--reveal) * 1%);
  width: 3px;
  background: var(--blue);
  z-index: 4;
  cursor: ew-resize;
}

.handle {
  position: absolute;
  top: 50%;
  left: calc(var(--reveal) * 1%);
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  z-index: 5;
  background: #fff;
  border: 2px solid var(--blue);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  cursor: ew-resize;
}

.badge {
  position: absolute;
  top: 16px;
  z-index: 6;
  background: rgba(0, 0, 0, .75);
  color: #fff;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 700;
}

.before-label {
  left: 16px;
}

.after-label {
  right: 16px;
}

.comment-dot {
  position: absolute;
  z-index: 8;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
}

.comment-dot.is-temp {
  background: var(--blue);
}

.comment-dot[data-position-url] {
  cursor: grab;
  touch-action: none;
}

.comment-dot[data-position-url].is-dragging {
  cursor: grabbing;
  z-index: 12;
}

.comment-popover {
  position: fixed;
  z-index: 10001;
  width: min(260px, calc(100vw - 24px));
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .22);
  font-size: 13px;
}

.comment-popover strong,
.comment-popover span {
  display: block;
}

.comment-popover span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.comment-popover p {
  margin: 8px 0 10px;
  white-space: pre-wrap;
}

.comment-popover button {
  padding: 6px 9px;
  border-radius: 8px;
  font-size: 12px;
}

.feedback {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  margin-top: 14px;
}

.feedback-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.dot-location {
  color: var(--blue);
  font-weight: 700;
  margin-bottom: 0;
  font-size: 13px;
}

.screen-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0;
}

.screen-tabs button {
  background: #e9eef3;
  color: var(--ink);
}

.screen-tabs button.active {
  background: var(--blue);
  color: #fff;
}

.screen-feedback {
  display: none;
}

.screen-feedback.active {
  display: block;
}

.url-note,
.empty-preview {
  background: #f9fafb;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
}

.empty-preview {
  display: grid;
  place-content: center;
  min-height: 420px;
  text-align: center;
}

@media (max-width: 1100px) {
  .review-workspace {
    grid-template-columns: 1fr;
  }

  .feedback-panel {
    position: static;
    max-height: none;
  }

  .wide-compare {
    min-height: 420px;
    height: 68vh;
  }
}

@media (max-width: 900px) {
  .grid {
    grid-template-columns: 1fr;
  }

  .admin-url-grid {
    grid-template-columns: 1fr;
  }

  .review-topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .review-nav {
    width: 100%;
    justify-content: space-between;
  }

  .cover-slide {
    padding: 28px;
  }
}

/* Debug panel, only appears when review URL has ?debug=1 */
.debug-panel {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 9999;
  width: min(420px, calc(100vw - 24px));
  max-height: 70vh;
  overflow: auto;
  background: #111827;
  color: #f9fafb;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
  padding: 12px;
  font-size: 12px;
}

.debug-panel__header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}

.debug-panel__header button {
  background: transparent;
  color: #f9fafb;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 8px;
  padding: 2px 8px;
}

.debug-panel dl {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 6px 10px;
  margin: 0;
}

.debug-panel dt {
  color: #93c5fd;
  font-weight: 700;
}

.debug-panel dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* Screen-size preview widths for Dev / Live reference pages */
.review-page[data-preview-size] .review-canvas {
  justify-items: center;
}

/* .review-canvas is display:contents, so center the children directly within
   the parent grid cell instead of relying on justify-items on the canvas. */
.review-page[data-preview-size="laptop-15-6"] .compare,
.review-page[data-preview-size="laptop-15-6"] .empty-preview,
.review-page[data-preview-size="laptop-14-5"] .compare,
.review-page[data-preview-size="laptop-14-5"] .empty-preview,
.review-page[data-preview-size="laptop-13"] .compare,
.review-page[data-preview-size="laptop-13"] .empty-preview,
.review-page[data-preview-size="mobile"] .compare,
.review-page[data-preview-size="mobile"] .empty-preview {
  justify-self: center;
}

.review-page[data-preview-size] .shots-stage {
  display: block;
}

.review-page[data-preview-size] .shots-size.active {
  display: grid;
  justify-items: center;
}

.review-page[data-preview-size] .page-heading,
.review-page[data-preview-size] .url-note,
.review-page[data-preview-size] .screen-tabs,
.review-page[data-preview-size] .viewport-note,
.review-page[data-preview-size] .webpage-preview-controls,
.review-page[data-preview-size] .preview-scale-controls,
.review-page[data-preview-size] .preview-status,
.review-page[data-preview-size] .empty-preview,
.review-page[data-preview-size] .compare {
  width: 100%;
}

.review-page[data-preview-size] .shots-size .compare,
.review-page[data-preview-size] .shots-size .empty-preview {
  width: min(100%, var(--preview-width));
}

.review-page[data-preview-size="desktop"] .review-canvas {
  --preview-width: 1440px;
}

.review-page[data-preview-size="desktop-1440"] .review-canvas {
  --preview-width: 1440px;
}

.review-page[data-preview-size="laptop"] .review-canvas {
  --preview-width: 1280px;
}

.review-page[data-preview-size="laptop-15-6"] .review-canvas {
  --preview-width: 1366px;
}

.review-page[data-preview-size="laptop-14-5"] .review-canvas {
  --preview-width: 1280px;
}

.review-page[data-preview-size="laptop-13"] .review-canvas {
  --preview-width: 1180px;
}

.review-page[data-preview-size="tablet"] .review-canvas {
  --preview-width: 768px;
}

.review-page[data-preview-size="mobile"] .review-canvas {
  --preview-width: 390px;
}

.review-page[data-preview-size] .compare,
.review-page[data-preview-size] .empty-preview {
  max-width: min(100%, var(--preview-width));
}

.preview-scale-controls,
.preview-status,
.webpage-preview-controls {
  grid-column: 1 / -1;
  min-width: 0;
  max-width: 100%;
}

.review-page[data-preview-size="tablet"] .wide-compare,
.review-page[data-preview-size="mobile"] .wide-compare {
  height: min(76vh, 900px);
}

.review-page[data-preview-size="mobile"] .compare,
.review-page[data-preview-size="mobile"] .empty-preview {
  border-radius: 0;
}

/* Dev / Live embedded webpage preview */
.webpage-preview-controls {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin: -4px 0 8px;
}

.screen-tabs .webpage-preview-controls {
  width: auto;
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: flex-start;
  margin: 0 0 0 6px;
  padding-left: 12px;
  border-left: 1px solid rgba(150, 164, 181, .48);
}

.screen-tabs button[data-webpage-mode="interact"] {
  margin-left: 6px;
  box-shadow: -13px 0 0 -12px rgba(150, 164, 181, .72);
}

.webpage-preview-controls button {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 800;
}

.webpage-preview-controls button.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.webpage-preview-stage {
  --reveal: 50;
  --webpage-height: 720px;
  width: 100%;
  min-height: 640px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  position: relative;
  overflow: visible;
}

.webpage-frame-card {
  min-width: 0;
  background: #f9fafb;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}

/* Overlay that holds note pins. JS keeps it aligned to the rendered iframe
   content box (not the clipped stage) so pins stay glued to the same spot on
   the page regardless of preview width or scale. */
.webpage-annotation-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 6;
}

.webpage-annotation-overlay .comment-dot {
  pointer-events: auto;
}

.webpage-preview-stage.is-slider {
  display: block;
  height: var(--webpage-height);
  min-height: var(--webpage-height);
  overflow: hidden;
  background: #eef1f4;
  border: 0;
  border-radius: 0;
}

.webpage-preview-stage.is-slider .webpage-frame-card {
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: 0;
}

.webpage-preview-stage.is-slider .webpage-frame-card--live {
  z-index: 1;
}

.webpage-preview-stage.is-slider .webpage-frame-card--dev {
  z-index: 2;
  clip-path: inset(0 calc(100% - (var(--reveal) * 1%)) 0 0);
}

.webpage-preview-stage.is-slider iframe,
.webpage-preview-stage.is-slider .webpage-frame-empty {
  height: 100%;
  pointer-events: none;
}

.webpage-preview-stage.is-annotating iframe {
  pointer-events: none;
}

.webpage-preview-stage.is-slider .webpage-frame-card__header {
  display: none;
}

.webpage-slider-only {
  display: none;
}

.webpage-preview-stage.is-slider .webpage-slider-only {
  display: grid;
}

.webpage-preview-stage.is-slider .divider {
  display: block;
}

.webpage-preview-stage.is-slider .handle {
  display: block;
}

.webpage-mark-layer {
  position: absolute;
  inset: 0;
  z-index: 7;
  border: 0;
  border-radius: 0;
  padding: 0;
  cursor: crosshair;
  background: rgba(64, 124, 167, .08);
}

/* The generic `.review-body button` rule (specificity 0,2,1) sets a solid
   white background that would otherwise beat the class above and paint an
   opaque overlay over the whole preview, blanking it in Annotate mode. Keep
   the annotate overlay translucent. */
.review-body button.webpage-mark-layer {
  background: rgba(64, 124, 167, .08);
}

/* Note pins are <button>s, so the generic `.review-body button` rule (border,
   radius, padding, colour, box-shadow) clobbers them. Restore EVERY property in
   one place so a pin renders exactly like the demo's `.demo-comment-dot`: a
   28px circle, white 2px ring, centred white bold glyph, soft drop shadow.
   Background is intentionally NOT set here so per-reviewer inline colours and
   the pending `.is-temp` blue keep working. */
.review-body button.comment-dot {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(16, 35, 51, .35);
}

.webpage-preview-stage.is-annotating .handle {
  z-index: 8;
}

.webpage-diff-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.webpage-diff-box {
  position: absolute;
  border: 2px solid rgba(32, 143, 214, .92);
  border-radius: 8px;
  background: rgba(98, 190, 255, .2);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .72), 0 10px 28px rgba(20, 74, 112, .2);
  line-height: 1;
  pointer-events: auto;
  cursor: copy;
  padding: 0;
  animation: diffPulse 1.8s ease-in-out infinite;
}

.admin-highlight {
  position: absolute;
  z-index: 6;
  min-width: 28px;
  min-height: 12px;
  border: 0;
  padding: 0;
  background: transparent;
  color: #0b375c;
  box-shadow: none;
  line-height: 1;
  pointer-events: auto;
  cursor: copy;
}

.admin-highlight span {
  position: absolute;
  left: 0;
  top: calc(100% + 5px);
  max-width: 240px;
  width: max-content;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(39, 128, 193, .4);
  color: #0b375c;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .14);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.admin-highlight--box {
  border: 2px solid rgba(32, 143, 214, .9);
  border-radius: 8px;
  background: rgba(98, 190, 255, .18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 12px 26px rgba(20, 74, 112, .16);
}

.admin-highlight--underline {
  border-bottom: 5px solid rgba(32, 143, 214, .94);
  border-radius: 0;
  background: linear-gradient(to top, rgba(98, 190, 255, .28), rgba(98, 190, 255, 0));
}

.admin-highlight--arrow {
  min-height: 28px;
}

.admin-highlight--arrow::before {
  content: "";
  position: absolute;
  left: 0;
  right: 12px;
  top: 50%;
  height: 4px;
  border-radius: 999px;
  background: rgba(32, 143, 214, .94);
  transform: translateY(-50%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}

.admin-highlight--arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 14px solid rgba(32, 143, 214, .94);
  transform: translateY(-50%);
}

.admin-highlight--left::before {
  left: 12px;
  right: 0;
}

.admin-highlight--left::after {
  left: 0;
  right: auto;
  border-left: 0;
  border-right: 14px solid rgba(32, 143, 214, .94);
}

.admin-highlight--up::before,
.admin-highlight--down::before {
  left: 50%;
  right: auto;
  top: 12px;
  bottom: 12px;
  width: 4px;
  height: auto;
  transform: translateX(-50%);
}

.admin-highlight--up::after {
  left: 50%;
  right: auto;
  top: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 14px solid rgba(32, 143, 214, .94);
  border-top: 0;
  transform: translateX(-50%);
}

.admin-highlight--down::after {
  left: 50%;
  right: auto;
  top: auto;
  bottom: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 14px solid rgba(32, 143, 214, .94);
  border-bottom: 0;
  transform: translateX(-50%);
}

.admin-highlight:hover,
.admin-highlight:focus-visible,
.webpage-diff-box:hover,
.webpage-diff-box:focus-visible {
  transform: none;
  box-shadow: none;
  outline: 3px solid rgba(32, 143, 214, .34);
  outline-offset: 2px;
}

@keyframes diffPulse {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .72), 0 10px 28px rgba(20, 74, 112, .2);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(98, 190, 255, .18), 0 10px 28px rgba(20, 74, 112, .2);
  }
}

.webpage-preview-stage.is-placing-dot,
.webpage-preview-stage.is-annotating {
  outline: none;
}

.webpage-frame-card__header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: #fff;
  border-bottom: 1px solid var(--border);
}

.webpage-frame-card iframe {
  display: block;
  width: 100%;
  height: 720px;
  border: 0;
  background: #fff;
}

.webpage-frame-empty {
  display: grid;
  place-items: center;
  min-height: 420px;
  color: var(--muted);
}

/* Let screen-size tabs resize the embedded preview area */
.review-page[data-preview-size="desktop"] .webpage-preview-stage {
  max-width: min(100%, 1440px);
}

.review-page[data-preview-size="desktop-1440"] .webpage-preview-stage {
  max-width: min(100%, 1440px);
}

.review-page[data-preview-size="laptop"] .webpage-preview-stage {
  max-width: min(100%, 1280px);
}

.review-page[data-preview-size="laptop-15-6"] .webpage-preview-stage {
  max-width: min(100%, 1366px);
}

.review-page[data-preview-size="laptop-14-5"] .webpage-preview-stage {
  max-width: min(100%, 1280px);
}

.review-page[data-preview-size="laptop-13"] .webpage-preview-stage {
  max-width: min(100%, 1180px);
}

.review-page[data-preview-size="tablet"] .webpage-preview-stage {
  --webpage-height: 900px;
  max-width: min(100%, 768px);
  grid-template-columns: 1fr;
}

.review-page[data-preview-size="mobile"] .webpage-preview-stage {
  --webpage-height: 844px;
  max-width: min(100%, 390px);
  grid-template-columns: 1fr;
}

.review-page[data-preview-size="tablet"] .webpage-frame-card iframe {
  height: 900px;
}

.review-page[data-preview-size="mobile"] .webpage-frame-card iframe {
  height: 844px;
}

@media (max-width: 900px) {
  .webpage-preview-stage {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   Merged from review-layout.css
   ============================================================ */
/* Clean review layout
   Base goal:
   - No top review header
   - Preview remains the primary full-width desktop surface
   - Notes float above the preview instead of taking layout width
   - Screen tabs below top area
   - Preview full width below tabs
   - Desktop/laptop: Dev on top, Live below
   - Mobile: Dev and Live side by side
*/

/* Overall review page */
.review-deck {
  width: min(1800px, calc(100% - 12px));
  max-width: 100%;
  margin: 0 auto;
  padding: 6px 0 18px;
}

.review-page {
  min-height: calc(100vh - 12px);
  margin-bottom: 12px;
  border-radius: 10px;
  scroll-margin-top: 8px;
}

.review-page--work {
  padding: 6px;
}

/* Main page layout */
.review-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 8px 12px;
  min-height: calc(100vh - 24px);
  align-items: start;
}

/* Let the review-canvas children participate in the parent grid */
.review-canvas {
  display: contents;
}

/* Full-width page info. Notes float over the right edge when expanded. */
.page-heading {
  grid-column: 1 / -1;
  grid-row: 1;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}

.page-heading h2 {
  margin: 0 0 4px;
  font-size: 18px;
}

.page-heading p {
  margin: 0;
  font-size: 13px;
}

/* Full-width URL note/buttons. */
.url-note {
  grid-column: 1 / -1;
  grid-row: 2;
  padding: 8px 10px;
  border-radius: 10px;
}

.url-note p {
  margin: 0 0 6px;
  font-size: 13px;
}

.url-note .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Floating notes panel. It overlays the preview instead of shrinking it. */
.feedback-panel {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  position: sticky;
  top: 6px;
  z-index: 18;
  justify-self: end;
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 8px;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .18);
}

.feedback-panel h3 {
  margin: 0 0 6px;
  font-size: 15px;
}

.feedback-panel > p.muted {
  display: none;
}

/* Tabs below the top area */
.screen-tabs {
  grid-column: 1 / -1;
  grid-row: 3;
  margin: 0;
  padding: 2px 0;
}

/* Hide tablet */
.screen-tabs button[data-size="tablet"] {
  display: none !important;
}

/* Preview area below everything */
.webpage-preview-stage,
.compare,
.empty-preview {
  grid-column: 1 / -1;
  grid-row: 4;
  min-width: 0;
}

/* URL preview base */
.webpage-preview-stage {
  display: grid;
  width: 100%;
  max-width: 100%;
  gap: 16px;
  height: auto;
}

/* Desktop and laptop: Dev top, Live bottom */
.review-page[data-preview-size="desktop"] .webpage-preview-stage {
  grid-template-columns: 1fr;
  max-width: 100%;
  margin: 0;
}

.review-page[data-preview-size="desktop-1440"] .webpage-preview-stage,
.review-page[data-preview-size="laptop"] .webpage-preview-stage {
  grid-template-columns: 1fr;
  max-width: 100%;
  margin: 0;
}

.review-page[data-preview-size="desktop"] .webpage-frame-card iframe,
.review-page[data-preview-size="desktop-1440"] .webpage-frame-card iframe,
.review-page[data-preview-size="laptop"] .webpage-frame-card iframe {
  width: 100%;
  height: 78vh;
  min-height: 700px;
}

/* Mobile: Dev and Live side by side */
.review-page[data-preview-size="mobile"] .webpage-preview-stage {
  grid-template-columns: 1fr 1fr;
  max-width: 900px;
  margin-inline: auto;
}

.review-page[data-preview-size="mobile"] .webpage-frame-card iframe {
  width: 100%;
  height: 844px;
  min-height: 844px;
}

/* Screenshot compare */
.wide-compare {
  height: auto;
  min-height: 0;
}

/* Compact feedback form */
.feedback {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 0;
  padding: 8px;
}

.feedback-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.feedback label {
  margin: 0;
  font-size: 12px;
}

.feedback textarea {
  min-height: 56px;
  height: 56px;
}

.feedback-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.feedback-actions button {
  width: 100%;
}

/* Saved public notes */
.public-notes {
  margin: 0 0 8px;
  padding: 8px;
}

.public-notes h4 {
  margin: 0 0 6px;
  font-size: 13px;
}

.public-note p,
.public-note__meta {
  font-size: 12px;
}

/* Responsive */
@media (max-width: 1100px) {
  .review-workspace {
    grid-template-columns: 1fr;
  }

  .page-heading,
  .url-note,
  .feedback-panel,
  .screen-tabs,
  .webpage-preview-stage,
  .compare,
  .empty-preview {
    grid-column: 1;
    grid-row: auto;
  }

  .feedback-panel {
    position: static;
    max-height: none;
  }
}

@media (max-width: 700px) {
  .webpage-preview-stage,
  .review-page[data-preview-size="mobile"] .webpage-preview-stage {
    grid-template-columns: 1fr;
  }
}

/* Restored review notes styling after CSS cleanup */
.feedback-panel {
  background: #f9fafb;
  border: 1px solid var(--border);
}

.screen-feedback h4 {
  margin: 0 0 6px;
  font-size: 13px;
  text-transform: capitalize;
}

.public-notes {
  margin: 0 0 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}

.public-notes h4 {
  margin: 0 0 6px;
  font-size: 13px;
}

.public-notes__list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.public-notes__empty {
  margin: 0;
  font-size: 13px;
}

.public-note {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 8px;
  align-items: start;
  padding: 6px;
  border-radius: 9px;
  background: #f9fafb;
  border: 1px solid var(--border);
}

.public-note__icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  color: #fff;
  font-weight: 900;
  line-height: 1;
  font-size: 13px;
}

.public-note.is-approved .public-note__icon {
  background: #15803d;
}

.public-note.is-not-approved .public-note__icon {
  background: #b91c1c;
}

.public-note.is-approved-after-changes .public-note__icon {
  background: #b45309;
}

.public-note.is-needs-review .public-note__icon {
  background: #475569;
}

.public-note__meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: baseline;
  font-size: 12px;
}

.public-note__meta span {
  color: var(--muted);
}

.public-note p {
  margin: 3px 0 0;
  font-size: 12px;
}

.note-editor {
  margin-top: 10px;
  border-top: 1px solid rgba(15, 23, 42, .08);
  padding-top: 8px;
}

.note-editor summary {
  cursor: pointer;
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
}

.note-editor form {
  margin-top: 10px;
}

.note-editor label {
  font-size: 12px;
}

.note-editor textarea {
  min-height: 82px;
}

.note-editor__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0;
}

/* Open editor mimics the demo's blue "Edit selected pin" panel. */
.note-editor[open] {
  border: 1px solid rgba(23, 92, 211, .35);
  border-top: 1px solid rgba(23, 92, 211, .35);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(23, 92, 211, .06), rgba(255, 255, 255, 0) 60%), #fff;
  padding: 10px 12px 4px;
  margin-top: 12px;
}

.note-editor[open] summary {
  margin-bottom: 6px;
}

.note-editor.is-selected {
  box-shadow: 0 0 0 3px rgba(23, 92, 211, .3);
  transition: box-shadow .2s ease;
}

.dot-location {
  margin: 0;
  color: var(--blue);
  font-weight: 700;
  font-size: 12px;
}


/* ============================================================
   Merged from review-overrides.css
   ============================================================ */
/* Review panel follows along as you scroll on wide layouts. */
.feedback-panel {
  position: sticky;
  top: 12px;
  align-self: start;
  z-index: 18;
  max-height: calc(100vh - 24px);
  overflow: auto;
}

/* On stacked / narrow layouts it sits in normal flow instead of pinning. */
@media (max-width: 1100px) {
  .feedback-panel {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

/* Collapsible notes panel so it does not cover the review while scrolling. */
.feedback-panel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.feedback-panel__toggle {
  flex: none;
  min-width: 120px;
  border: 1px solid var(--border);
  background: #fff;
  color: #111827;
  border-radius: 8px;
  padding: 4px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.feedback-panel.is-collapsed {
  width: auto;
  min-width: 0;
  max-height: none;
  overflow: visible;
}

.feedback-panel.is-collapsed > *:not(.feedback-panel__bar) {
  display: none;
}

.webpage-frame-card img,
.preview-screenshot {
  display: block;
  width: 100%;
  height: auto;
  min-height: 520px;
  object-fit: cover;
  background: #fff;
}

.viewport-note {
  grid-column: 1 / -1;
  margin: 4px 0 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f9fafb;
  color: #475569;
  font-size: 13px;
}

/* Preview scale controls and viewport status.
   The JavaScript sets the real test viewport size on each frame and scales the
   preview visually. These styles only cover the control row and status text. */
.preview-scale-controls {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
}

.preview-scale-controls__label {
  font-size: 12px;
  font-weight: 700;
  color: #475569;
}

.preview-scale-controls button {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: #111827;
  padding: 6px 10px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.preview-scale-controls button.active {
  background: var(--blue, #407ca7);
  border-color: var(--blue, #407ca7);
  color: #fff;
}

.preview-status {
  grid-column: 1 / -1;
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  color: #334155;
}

.preview-status p {
  margin: 0 0 2px;
}

.preview-status p:last-child {
  margin-bottom: 0;
}

/* Visual scaler wrapper around each preview frame. */
.viewport-scaler {
  position: relative;
  display: block;
  background: #fff;
  border-radius: 0 0 10px 10px;
}

.webpage-preview-stage {
  grid-column: 1;
  min-width: 0;
  max-width: 100%;
}

/* Admin-only edit control on each review page section. */
.admin-edit-bar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  padding: 6px 10px;
  border: 1px dashed #b45309;
  border-radius: 8px;
  background: #fffbeb;
}

.admin-edit-bar .admin-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #b45309;
}

.admin-edit-bar a.button {
  font-size: 12px;
}

/* Admin-only clear notes control. */
.clear-notes-form {
  margin: 6px 0 0;
}

.clear-notes-form button {
  border: 1px solid #b91c1c;
  color: #b91c1c;
  background: #fff;
  border-radius: 8px;
  padding: 6px 10px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

/* Danger button used on the admin packet list. */
.button.danger {
  border: 1px solid #b91c1c;
  color: #b91c1c;
  background: #fff;
}

.actions form {
  display: inline;
  margin: 0;
}

/* Auto screenshot display on the review page. */
.shots-stage {
  grid-column: 1 / -1;
  min-width: 0;
}

.screenshot-reference {
  grid-column: 1 / -1;
  width: 100%;
}

.screenshot-reference .shots-pair {
  margin-top: 12px;
}

.shots-size {
  display: none;
}

.shots-size.active {
  display: block;
}

.shots-size__caption {
  margin: 0 0 8px;
  font-size: 12px;
  color: #475569;
}

.shots-size .screenshot-compare {
  width: min(100%, var(--preview-width, 1440px));
}

.shots-size .screenshot-compare.is-annotating {
  cursor: crosshair;
}

.shot-fullsize-links {
  width: min(100%, var(--preview-width, 1440px));
}

.shots-pair {
  display: grid;
  gap: 16px;
}

.shots-pair--col {
  grid-template-columns: 1fr;
}

.shots-pair--row {
  grid-template-columns: 1fr 1fr;
  max-width: 900px;
  margin-inline: auto;
}

.shots-pair--mobile-fixed {
  grid-template-columns: 1fr 1fr;
  max-width: 900px;
  margin-inline: auto;
}

@media (max-width: 700px) {
  .shots-pair--row {
    grid-template-columns: 1fr;
  }
}

.shot-card {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.shot-card figcaption {
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 700;
  background: #f9fafb;
  border-bottom: 1px solid var(--border);
}

.shot-card img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
}

.shot-empty {
  padding: 24px;
  color: var(--muted);
  font-size: 13px;
}

/* Auto screenshot controls on the edit page. */
.capture-block {
  margin-top: 12px;
  padding: 10px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: #f9fafb;
}

.capture-block h4 {
  margin: 0 0 4px;
  font-size: 14px;
}

.capture-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.capture-cell {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  background: #fff;
}

.capture-cell__label {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
}

.capture-thumbs {
  display: flex;
  gap: 8px;
  font-size: 12px;
}

/* Toast for the triple-click fill helper. */
.app-fill-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 12px);
  z-index: 10000;
  max-width: 90vw;
  padding: 10px 14px;
  border-radius: 10px;
  background: #111827;
  color: #fff;
  font: 600 13px system-ui, sans-serif;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.app-fill-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Quick edit panel - hidden until triple-click toggles quick edit mode. */
.quick-edit {
  grid-column: 1 / -1;
  display: none;
  margin: 0 0 12px;
  padding: 12px;
  border: 1px dashed #2563eb;
  border-radius: 10px;
  background: #eff6ff;
}

body.quick-edit-on .quick-edit {
  display: block;
}

/* Controls that should only appear while quick edit mode is on. */
.quick-edit-only {
  display: none;
}

body.quick-edit-on .quick-edit-only {
  display: inline-flex;
}

.review-body .button.danger {
  border-color: #b91c1c;
  color: #b91c1c;
}

.review-body .button.danger:hover {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #fff;
}

.quick-edit__head {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #1d4ed8;
  margin: 0 0 8px;
}

.quick-edit__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 10px;
}

@media (max-width: 700px) {
  .quick-edit__row {
    grid-template-columns: 1fr;
  }
}

.quick-edit__form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
}

.quick-edit__form input[type="url"],
.quick-edit__form input[type="text"],
.quick-edit__form input[type="file"] {
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}

.quick-edit__form button[type="submit"] {
  border: 1px solid #2563eb;
  background: #2563eb;
  color: #fff;
  border-radius: 8px;
  padding: 7px 12px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.quick-edit__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.quick-edit__form button[type="submit"].is-selected {
  outline: 3px solid rgba(37, 99, 235, .2);
  outline-offset: 2px;
}

/* View all notes page */
.notes-page {
  max-width: 880px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}

.notes-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.notes-header h1 {
  margin: 4px 0;
}

.notes-actions {
  display: flex;
  gap: 8px;
}

.notes-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  margin-bottom: 20px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #f9fafb;
}

.notes-filter label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
}

.notes-filter select {
  font: inherit;
  font-weight: 400;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}

.cover-notes-link {
  margin-top: 16px;
}

.notes-empty {
  padding: 24px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  color: #475569;
}

.notes-group {
  margin-bottom: 28px;
}

.notes-group h2 {
  font-size: 18px;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.notes-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.note-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  padding: 12px 14px;
}

.note-card__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.note-pill {
  font-size: 12px;
  font-weight: 700;
  color: #1d4ed8;
  background: #eff6ff;
  border-radius: 999px;
  padding: 2px 10px;
}

.note-size {
  font-size: 12px;
  color: #475569;
}

.note-comment {
  margin: 6px 0;
  white-space: pre-wrap;
}

.note-meta {
  font-size: 12px;
  margin: 6px 0 0;
}

/* ============================================================
   UI polish layer
   ============================================================ */
:root {
  --blue: #2f75a8;
  --blue-dark: #0f3858;
  --blue-soft: #e8f2f8;
  --green: #176f4a;
  --green-soft: #e8f6ee;
  --amber: #9a5b12;
  --amber-soft: #fff3db;
  --ink: #122333;
  --muted: #617083;
  --border: #d8e0e8;
  --bg: #f3f6f9;
  --panel: #f8fafc;
  --ring: rgba(47, 117, 168, .28);
  --shadow-sm: 0 1px 2px rgba(18, 35, 51, .06);
  --shadow-md: 0 10px 28px rgba(18, 35, 51, .10);
}

body {
  background:
    linear-gradient(180deg, #eef4f8 0, var(--bg) 280px, #f7f9fb 100%);
}

.shell {
  width: min(1180px, calc(100% - 36px));
  margin: 28px auto 56px;
}

.shell > h1,
.notes-header h1,
.admin-hero h1 {
  letter-spacing: 0;
}

.admin-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding: 4px 0;
}

.admin-hero h1 {
  margin: 0;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.04;
}

.card,
.feedback-panel,
.public-notes,
.notes-filter,
.note-card,
.shot-card,
.capture-cell,
.webpage-frame-card,
.url-note,
.empty-preview,
.preview-status {
  border-color: rgba(150, 164, 181, .42);
  box-shadow: var(--shadow-sm);
}

.card {
  border-radius: 14px;
  padding: 22px;
}

.card h2,
.card h3 {
  color: var(--ink);
}

.admin-primary-card {
  position: relative;
  overflow: hidden;
  border-top: 4px solid var(--blue);
}

.admin-primary-card::before {
  content: "";
  position: absolute;
  inset: 0;
  height: 56px;
  background: linear-gradient(180deg, rgba(47, 117, 168, .08), rgba(47, 117, 168, 0));
  pointer-events: none;
}

.admin-secondary-tools {
  background: #fbfcfe;
}

.admin-secondary-tools summary,
.advanced-tools summary {
  list-style: none;
}

.admin-secondary-tools summary::-webkit-details-marker,
.advanced-tools summary::-webkit-details-marker {
  display: none;
}

.admin-secondary-tools summary,
.advanced-tools summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-secondary-tools summary::after,
.advanced-tools summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue-dark);
  font-weight: 900;
}

.admin-secondary-tools[open] summary::after,
.advanced-tools[open] summary::after {
  content: "-";
}

.packet-list {
  margin-top: 18px;
}

.packet-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
}

.packet-card h2 {
  margin: 0 0 10px;
  font-size: 21px;
}

.packet-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  color: var(--muted);
  font-size: 14px;
}

.status-pill,
.note-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.status-pill.is-open {
  background: var(--green-soft);
  color: var(--green);
  border: 1px solid rgba(23, 111, 74, .18);
}

.status-pill.is-draft {
  background: var(--amber-soft);
  color: var(--amber);
  border: 1px solid rgba(154, 91, 18, .2);
}

label {
  color: #26384a;
  font-size: 14px;
}

input,
textarea,
select {
  border-color: #cdd8e2;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

input:hover,
textarea:hover,
select:hover {
  border-color: #afbfcc;
}

input:focus,
textarea:focus,
select:focus {
  outline: 0;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px var(--ring);
}

button,
.button {
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--blue-dark);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .16) inset;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}

button:hover,
.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(18, 35, 51, .13);
}

button:focus-visible,
.button:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 4px var(--ring), 0 8px 18px rgba(18, 35, 51, .13);
}

.button.secondary,
button.secondary,
.screen-tabs button,
.preview-scale-controls button,
.webpage-preview-controls button,
.feedback-panel__toggle {
  background: #e8eef4;
  color: var(--ink);
  border-color: rgba(150, 164, 181, .28);
}

.screen-tabs button,
.preview-scale-controls button,
.webpage-preview-controls button {
  border-radius: 999px;
}

.screen-tabs button.active,
.preview-scale-controls button.active,
.webpage-preview-controls button.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 8px 18px rgba(47, 117, 168, .24);
}

.button.danger,
button.danger,
.clear-notes-form button {
  background: #fff;
  border-color: #ef4444;
  color: #b91c1c;
}

.review-body {
  background: #e5ebf1;
}

.review-topbar {
  padding: 10px 22px;
  border-bottom-color: rgba(150, 164, 181, .5);
  box-shadow: 0 8px 20px rgba(18, 35, 51, .08);
}

.review-topbar h1 {
  font-size: 19px;
}

.review-page {
  border-radius: 12px;
  border-color: rgba(150, 164, 181, .46);
  box-shadow: 0 10px 30px rgba(18, 35, 51, .08);
}

.review-page--work {
  padding: 8px;
}

.page-heading,
.url-note {
  border-radius: 12px;
}

.page-heading {
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.feedback-panel {
  background: rgba(248, 250, 252, .96);
  border-radius: 12px;
}

.feedback-panel__bar h3 {
  color: var(--ink);
}

.webpage-frame-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow-md);
}

.webpage-frame-card__header,
.shot-card figcaption {
  background: #f8fafc;
}

.webpage-frame-card__header strong,
.shot-card figcaption {
  color: var(--ink);
}

.preview-status,
.viewport-note {
  background: #fff;
}

.public-note {
  background: #fff;
}

.note-card {
  border-radius: 14px;
}

.notes-page {
  max-width: 980px;
}

.notes-header {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(150, 164, 181, .38);
}

.notes-filter {
  background: #fff;
}

.cover-slide {
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(47, 117, 168, .08), rgba(255, 255, 255, 0) 44%),
    #fff;
}

.comment-dot {
  background: var(--blue);
  box-shadow: 0 5px 16px rgba(18, 35, 51, .32);
}

.app-version-badge {
  box-shadow: 0 8px 20px rgba(18, 35, 51, .16);
}

@media (max-width: 760px) {
  .shell {
    width: min(100% - 24px, 1180px);
    margin-top: 18px;
  }

  .admin-hero,
  .packet-card {
    grid-template-columns: 1fr;
  }

  .admin-hero {
    align-items: flex-start;
  }

  .packet-card .actions {
    width: 100%;
  }

  .packet-card .actions .button,
  .packet-card .actions button {
    flex: 1 1 auto;
  }

  .review-nav {
    width: 100%;
    justify-content: flex-start;
    white-space: normal;
    flex-wrap: wrap;
  }

  .review-nav form {
    display: inline-flex;
  }

  .review-nav .button,
  .review-nav button {
    padding: 9px 10px;
    font-size: 14px;
  }
}
.edit-packet-page button {
  margin-top: 1rem;
}

.capture-choice {
  gap: .35rem;
  margin-top: 1rem;
  padding: .9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
}

.capture-choice > span,
.radio-choice {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-weight: 700;
}

.capture-choice input,
.radio-choice input {
  width: auto;
}

.capture-choice small,
.capture-submit-status {
  color: var(--muted);
}

.capture-options {
  margin-top: .75rem;
}

.capture-options .radio-choice {
  margin-top: .65rem;
}

.capture-submit-status {
  margin-bottom: 0;
}

button:disabled {
  cursor: wait;
  opacity: .7;
}

[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  z-index: 120;
  width: max-content;
  max-width: min(300px, calc(100vw - 24px));
  padding: 7px 9px;
  transform: translate(-50%, 4px);
  border-radius: 7px;
  background: #102333;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.admin-notice {
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid;
  border-radius: 10px;
  font-weight: 650;
}

.admin-notice--success {
  color: #185c37;
  border-color: #8fd1aa;
  background: #edf9f1;
}

.admin-notice--error {
  color: #7a2323;
  border-color: #e0a4a4;
  background: #fff1f1;
}

/* ============================================================
   Polished reviewer layout — scoped to the review page only.
   Adopts the GitHub Pages demo's look on the Cloud Run backend
   without altering admin pages or any backend/JS wiring.
   Remove this block (and the header markup in views/review.ejs)
   to revert to the previous styling.
   ============================================================ */
.review-body {
  background: var(--bg);
}

/* Branded, solid sticky header */
.review-body .review-topbar {
  z-index: 200;
  padding: 12px 20px;
  background: #fff;
  backdrop-filter: none;
}

/* Left cluster: logo + notes buttons together, like the demo header-actions */
.review-body .review-topbar__left {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  min-width: 0;
}

.review-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  cursor: pointer;
  user-select: none;
}

.review-brand__logo {
  position: relative;
  display: grid;
  place-items: center;
  height: 40px;
  min-width: 96px;
  flex: 0 0 auto;
}

.review-brand__logo img {
  max-width: 160px;
  max-height: 40px;
  object-fit: contain;
}

.review-brand__fallback {
  display: none;
  color: var(--blue);
  font-weight: 900;
  font-size: 20px;
  letter-spacing: .06em;
}

.review-brand__logo img[hidden] + .review-brand__fallback {
  display: inline;
}

.review-body .review-topbar h1 {
  font-size: 19px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(50vw, 560px);
  padding-left: 14px;
  border-left: 1px solid var(--border);
}

/* Light pill buttons like the polished demo */
.review-body button,
.review-body .button {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 8px 11px;
  font-weight: 700;
  font-size: 13px;
  box-shadow: none;
}

.review-body .review-header-action {
  font-family: inherit;
  font-size: 13px;
  line-height: 1.2;
}

.review-body button:hover,
.review-body .button:hover {
  border-color: var(--blue);
}

.review-body button.active,
.review-body .button.primary {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

/* Grouped, de-emphasized admin controls in the header */
.review-nav__admin {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 10px;
  margin-left: 4px;
  border-left: 1px solid var(--border);
}

.review-nav__admin form {
  margin: 0;
}

.review-admin-flag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.review-body .button.ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
  padding: 6px 9px;
}

.review-body .button.ghost:hover {
  color: var(--ink);
  border-color: var(--muted);
}

.review-body .button.ghost.danger {
  color: #b91c1c;
  border-color: #e6bcbc;
}

.review-body .button.ghost.danger:hover {
  border-color: #b91c1c;
  background: #fff5f5;
}

/* Keep destructive admin buttons visibly red, just subtler */
.review-body .clear-notes-form button {
  background: #fff;
  border: 1px solid #e6bcbc;
  color: #b91c1c;
  font-size: 12px;
}

/* Compact stacked cards instead of full-viewport slides */
.review-body .review-page {
  min-height: 0;
  border-radius: 12px;
  margin-bottom: 16px;
  scroll-margin-top: 96px;
  box-shadow: 0 1px 3px rgba(16, 35, 51, .05);
}

.review-body .review-page--work {
  padding: 12px;
}

/* Match the demo: single-column canvas with the notes panel floating over the
   top-right, instead of a permanent 360px right column. */
.review-body .review-workspace {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  position: relative;
}

.review-body .review-canvas {
  grid-column: 1;
  grid-row: 1;
}

/* Zero-height sticky dock keeps the panel following scroll without letting its
   height grow the grid row (so expanding never pushes the page down). */
/* The panel is position:fixed and self-positioning, so the dock must NOT create
   a stacking context (a sticky/z-index dock would trap the fixed panel beneath
   the sticky header). Keep it inert so the panel floats above everything. */
.review-body .feedback-dock {
  position: static;
  height: 0;
  z-index: auto;
}

.review-body .feedback-panel {
  position: fixed;
  top: 12px;
  right: 16px;
  z-index: 999;
  width: min(420px, calc(100vw - 40px));
  max-height: calc(100vh - 24px);
  overflow: auto;
  box-shadow: 0 12px 32px rgba(16, 35, 51, .2);
}

/* Collapsed pill hugs the corner and stops reserving panel height/width */
.review-body .feedback-panel.is-collapsed {
  max-height: none;
  overflow: visible;
  width: auto;
  box-shadow: 0 4px 12px rgba(16, 35, 51, .18);
}

/* Bordered page heading card, matching the demo */
.review-body .page-heading {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}

.review-body .page-heading h2 {
  font-size: 18px;
}

/* Feedback panel + screen tabs polish */
.review-body .feedback-panel {
  border-radius: 12px;
}

/* Collapsed notes panel becomes a blue "Add Notes" pill, like the demo */
.review-body .feedback-panel.is-collapsed {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.review-body .feedback-panel.is-collapsed .feedback-panel__bar h3 {
  color: #fff;
  white-space: nowrap;
}

.review-body .feedback-panel.is-collapsed .feedback-panel__toggle {
  border-color: rgba(255, 255, 255, .75);
  background: transparent;
  color: #fff;
}

.review-body .feedback-panel.is-collapsed .feedback-panel__toggle:hover {
  background: rgba(255, 255, 255, .14);
}

.review-body .screen-tabs button {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink);
  border-radius: 8px;
  font-size: 13px;
}

.review-body .screen-tabs button.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

/* Demo-style controls row: labeled Screen size / Review mode groups */
.review-body .review-controls {
  display: flex;
  position: sticky;
  top: var(--review-topbar-offset, 72px);
  z-index: 190;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 6px 4px;
  background: rgba(255, 255, 255, .98);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 5px 12px rgba(16, 35, 51, .06);
}

.review-body .review-control-label {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.review-body .review-controls .screen-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

/* Demo had no preview-scale controls; hide them to match */
.review-body .preview-scale-controls {
  display: none;
}

/* Demo-style compare slider handle + divider */
.review-body .handle {
  background: var(--blue);
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(16, 35, 51, .4);
}

/* Keep the slider handle locked to the horizontal centerline: the generic
   button hover/active rules apply transform: translateY(-1px), which would
   wipe out the handle's translate(-50%,-50%) centering and make it jump up/
   down (diagonally). Pin the transform so it only slides left/right. */
.review-body .handle,
.review-body .handle:hover,
.review-body .handle:active,
.review-body .handle:focus,
.review-body .handle:focus-visible {
  transform: translate(-50%, -50%);
  transition: box-shadow .12s ease, background .12s ease, border-color .12s ease;
}

.review-body .handle::before {
  content: "\2194";
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 20px;
  line-height: 1;
}

.review-body .divider {
  background: #fff;
  box-shadow: 0 0 0 1px rgba(16, 35, 51, .3);
}

.review-body .badge {
  background: rgba(16, 35, 51, .82);
}

@media (max-width: 900px) {
  .review-nav__admin {
    border-left: 0;
    padding-left: 0;
    margin-left: 0;
    width: 100%;
    flex-wrap: wrap;
  }
}

/* --- Mobile friendliness for the review page ---
   The tool is desktop-first, but on phones we keep it usable: the header wraps,
   the screen-size / review-mode tabs wrap, and the floating notes panel stops
   overlaying the preview and instead stacks below it in normal flow. */
@media (max-width: 760px) {
  /* Keep the whole header on a single line, even on phones. */
  .review-body .review-topbar {
    flex-wrap: nowrap;
    gap: 8px;
    padding: 10px 12px;
  }

  .review-body .review-topbar__left {
    gap: 8px;
    flex: 1 1 auto;
    overflow: hidden;
  }

  .review-body .review-topbar__left .button {
    padding: 6px 10px;
    font-size: 12px;
    white-space: nowrap;
  }

  .review-body .review-topbar .review-brand__logo img {
    max-height: 26px;
  }

  .review-body .review-nav {
    flex: 0 0 auto;
  }

  /* Keep the admin flag inline instead of dropping to its own row. */
  .review-body .review-nav__admin {
    width: auto;
    flex: 0 0 auto;
    flex-wrap: nowrap;
  }

  .review-body .review-deck {
    width: min(100%, calc(100% - 16px));
    padding: 8px 0 24px;
  }

  .review-body .review-page--work {
    padding: 10px;
  }

  /* Let the notes panel flow below the preview instead of covering it. */
  .review-body .feedback-dock {
    position: static;
    height: auto;
    grid-column: 1;
    grid-row: 2;
    justify-self: stretch;
    margin-top: 12px;
  }

  .review-body .feedback-panel {
    position: static;
    width: auto;
    max-height: none;
    overflow: visible;
  }

  /* Keep the collapsed pill compact and left-aligned when stacked. */
  .review-body .feedback-panel.is-collapsed {
    width: max-content;
    max-width: 100%;
  }

  /* Keep the tab groups on one line; scroll horizontally if needed. */
  .review-body .review-controls {
    overflow-x: auto;
    overflow-y: hidden;
  }

  .review-body .review-controls .screen-tabs {
    flex-wrap: nowrap;
  }

  .review-body .screen-tabs button {
    font-size: 12px;
    padding: 6px 10px;
  }
}

/* ============================================================
   Match the GitHub Pages demo look: flat, light cards with thin
   borders and minimal shadow (the app was glossier/heavier).
   Scoped to .review-body so admin/login/edit pages are untouched.
   ============================================================ */
.review-body {
  background: #f5f7fa;
}

/* Lighter sticky header, like the demo */
.review-body .review-topbar {
  box-shadow: none;
  border-bottom: 1px solid var(--border);
}

/* Flat page cards: 1px border, 10px radius, no drop shadow */
.review-body .review-page {
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: none;
  padding: 8px;
  margin-bottom: 14px;
}

.review-body .review-page--work {
  padding: 8px;
}

.review-body .page-heading,
.review-body .url-note {
  border-radius: 10px;
  box-shadow: none;
}

/* Notes panel: flat light card matching the demo */
.review-body .feedback-panel {
  background: #f9fafb;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(16, 35, 51, .12);
}

/* Dev / Live preview frame cards: flat with a light grey header bar */
.review-body .webpage-frame-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: none;
  overflow: hidden;
}

.review-body .webpage-frame-card__header {
  background: #f9fafb;
  border-bottom: 1px solid var(--border);
  padding: 8px 10px;
}

/* Note items: flat white cards like the demo's .note */
.review-body .public-note {
  border: 1px solid var(--border);
  border-radius: 9px;
  box-shadow: none;
  background: #fff;
}

/* Roomier, more readable note text, matching the demo */
.review-body .public-note {
  padding: 8px;
  gap: 10px;
}

.review-body .public-note p {
  font-size: 13px;
}

.review-body .public-notes__list {
  gap: 8px;
}

/* Wider toggle on the Add Notes panel, pinned to the right of the bar */
.review-body .feedback-panel__toggle {
  min-width: 104px;
  width: auto;
  height: 34px;
  margin-left: auto;
  padding: 0 16px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  border-radius: 8px;
}

/* Whole collapsed pill is clickable to expand */
.review-body .feedback-panel.is-collapsed .feedback-panel__bar {
  cursor: pointer;
}

/* Test viewport readout sits inline in the header, right of Clear Local Notes */
.review-body .header-preview-status {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0;
  padding: 7px 10px;
  min-height: 35px;
  line-height: 1.2;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f9fafb;
  color: var(--muted);
  font-size: 12px;
}

.review-body .header-preview-status p {
  margin: 0;
}

.review-body .header-preview-status:empty {
  display: none;
}