/* =====================================================================
   FEEDBACK  -  capture, annotate, submit to the Rate Card feedback doc
   ---------------------------------------------------------------------
   Everything here is prefixed .rcf- and nothing outside that prefix is
   touched, so the feature can be lifted out in one file pair without
   unpicking it from the prototype's own styles.

   The palette is borrowed from the Atlas deck rather than re-invented:
   #020024 navy, #6CB8FF sky, #D6A85F gold, #F5F7FA ink. Those are the
   literal values the slides already use.

   Two rules govern the layout and both come from the brief. Nothing is
   ever hidden to make it fit: every region that can overflow scrolls.
   And no scrollbar is styled away, because a scrollbar the reviewer
   cannot see is a corner of the screenshot they cannot reach.
   ===================================================================== */

.rcf-root {
  --rcf-navy:      #020024;
  --rcf-panel:     #0E1030;
  --rcf-panel-2:   #151845;
  --rcf-line:      rgba(245, 247, 250, 0.14);
  --rcf-line-soft: rgba(245, 247, 250, 0.08);
  --rcf-ink:       #F5F7FA;
  --rcf-muted:     #A9B0C6;
  --rcf-sky:       #6CB8FF;
  --rcf-gold:      #D6A85F;
  --rcf-mark:      #FF4D4D;
  --rcf-radius:    12px;
  --rcf-shadow:    0 18px 48px rgba(0, 0, 0, 0.52);
  --rcf-gap:       12px;
}

/* ---------------------------------------------------------------- launcher
   32px is the hard ceiling for the whole visible control, border
   included, so box-sizing must be border-box and nothing may scale it
   on hover. The focus ring is drawn with box-shadow rather than
   outline so it can sit outside the circle without being clipped by
   any ancestor. */
.rcf-launch {
  position: fixed;
  right: calc(24px + env(safe-area-inset-right, 0px));
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 10040;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  min-width: 0;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(245, 247, 250, 0.28);
  border-radius: 50%;
  background: #131636;
  color: var(--rcf-ink);
  /* Optical centring: the question mark's ink sits high in its em box,
   * so the glyph is nudged down by half a pixel rather than relying on
   * line-height alone. */
  font: 700 17px/1 "Open Sans", system-ui, sans-serif;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  transition: background 140ms ease, border-color 140ms ease;
  -webkit-appearance: none;
  appearance: none;
}

.rcf-launch > span {
  display: block;
  transform: translateY(0.5px);
  pointer-events: none;
}

.rcf-launch:hover {
  background: #1B1F4C;
  border-color: rgba(108, 184, 255, 0.62);
}

.rcf-launch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--rcf-navy), 0 0 0 4px var(--rcf-sky);
}

.rcf-launch[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .rcf-launch { transition: none; }
}

/* --------------------------------------------------------- corner ambience
   A faint blue light that breathes behind the widget for about ten
   seconds every three minutes, then goes dark again. It is a reminder
   that the feedback tool is there, not a notification: no border, no
   hard edge, no colour added to the card itself, and nothing to click.

   The interval is the animation. One 180s cycle holds zero opacity for
   the first 170s and does the whole fade in, breathe, fade out inside
   the last 10s, which means no timer to run, nothing to restart when
   the card opens, and no work for the browser while it is dormant. */
.rcf-glow {
  position: fixed;
  right: calc(-40px + env(safe-area-inset-right, 0px));
  bottom: calc(-40px + env(safe-area-inset-bottom, 0px));
  z-index: 10039;                /* under the launcher, over the page */
  width: 380px;
  height: 320px;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(closest-side at 79% 75%,
    rgba(108, 184, 255, 0.30) 0%,
    rgba(108, 184, 255, 0.13) 45%,
    rgba(108, 184, 255, 0) 100%);
  filter: blur(26px);
  animation: rcf-glow-breathe 180s ease-in-out infinite;
}

@keyframes rcf-glow-breathe {
  0%, 94.44%  { opacity: 0;    transform: scale(1); }      /* 0s to 170s */
  95.83%      { opacity: 1;    transform: scale(1.01); }   /* fades in by 172.5s */
  96.94%      { opacity: 0.72; transform: scale(1.02); }   /* breathes out */
  98.06%      { opacity: 1;    transform: scale(1.01); }   /* breathes in */
  100%        { opacity: 0;    transform: scale(1); }      /* dark again by 180s */
}

/* No ambient motion at all here. A slow glow in the corner is precisely
   the kind of peripheral movement this setting is asked to remove. */
@media (prefers-reduced-motion: reduce) {
  .rcf-glow { animation: none; opacity: 0; }
}

/* ------------------------------------------------------------- live dock
   Deliberately not a modal. The reviewer is looking at the real running
   prototype, so the page stays interactive and focus is not trapped;
   this is only a small bar parked out of the way. */
.rcf-dock {
  position: fixed;
  right: calc(24px + env(safe-area-inset-right, 0px));
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 10041;
  box-sizing: border-box;
  /* 38px wider than it was, which is exactly the width the close button
   * gave up when it left the second row. The controls keep the rows they
   * were already on instead of reflowing to pay for the new corner. */
  max-width: min(558px, calc(100vw - 48px));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  /* The right inset is the corner the close button is pinned into. It is
   * container padding rather than a margin on whichever control happens
   * to land last, so no row can ever flow underneath the X, at any
   * width and at any wrap point. */
  padding: 8px 48px 8px 10px;
  border: 1px solid var(--rcf-line);
  border-radius: var(--rcf-radius);
  background: rgba(14, 16, 48, 0.96);
  box-shadow: var(--rcf-shadow);
  color: var(--rcf-ink);
  font: 400 13px/1.35 "Open Sans", system-ui, sans-serif;
}

.rcf-dock[hidden] { display: none; }

.rcf-dock__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border: 1px solid rgba(108, 184, 255, 0.4);
  border-radius: 999px;
  color: var(--rcf-sky);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.rcf-dock__tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rcf-sky);
}

.rcf-dock__hint {
  color: var(--rcf-muted);
  font-size: 12px;
  flex: 1 1 160px;
  min-width: 0;
}

/* Belongs to the panel, not to the row it used to sit in, so it is
   pinned to the container's own padding box: level with the top of the
   first row of controls, and on the same 10px right edge the rest of
   the bar is measured from. */
.rcf-dock__close {
  position: absolute;
  top: 10px;
  right: 10px;
}

/* ----------------------------------------------------------------- editor
   The shell is a column: a short head, a body that takes the remaining
   height, and a foot. Only the body scrolls, and inside it the preview
   has its own scroller. That is the whole hierarchy, deliberately two
   levels and no more.

   Height uses dvh so an opening mobile keyboard shrinks the dialog
   instead of pushing the actions off the bottom of the screen; vh is
   kept first as the fallback for browsers without dvh. */
.rcf-editor {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(8px, 2vw, 24px);
  padding-left: max(clamp(8px, 2vw, 24px), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(8px, 2vw, 24px), env(safe-area-inset-right, 0px));
  padding-top: max(clamp(8px, 2vw, 24px), env(safe-area-inset-top, 0px));
  padding-bottom: max(clamp(8px, 2vw, 24px), env(safe-area-inset-bottom, 0px));
  background: rgba(2, 0, 36, 0.72);
  box-sizing: border-box;
}

.rcf-editor[hidden] { display: none; }

.rcf-dialog {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  /* The screenshot is the reason this dialog exists, so it gets the screen.
     1180px was fine on a laptop and left ~390px of a 1570px display unused,
     which is what made a correctly fitted capture read as a postage stamp.
     92vw keeps a comfortable gutter on any width; the upper bound stops the
     right-hand panel stretching into a stripe on an ultrawide. */
  max-width: min(1720px, 92vw);
  /* No px min-width: a 320px phone must never be given a horizontal
   * scrollbar by the shell itself. */
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 100vh;
  max-height: 100dvh;
  border: 1px solid var(--rcf-line);
  border-radius: var(--rcf-radius);
  background: var(--rcf-navy);
  box-shadow: var(--rcf-shadow);
  color: var(--rcf-ink);
  font: 400 14px/1.5 "Open Sans", system-ui, sans-serif;
  overflow: hidden;              /* rounds the corners only; every inner
                                    region that can overflow scrolls */
}

.rcf-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--rcf-line-soft);
  min-height: 0;
}

.rcf-head__title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rcf-state {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border: 1px solid rgba(108, 184, 255, 0.4);
  border-radius: 999px;
  color: var(--rcf-sky);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.rcf-body {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
  gap: 0;
}

.rcf-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid var(--rcf-line-soft);
}

.rcf-side {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  scrollbar-gutter: stable;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ---------------------------------------------------------------- toolbar */
.rcf-toolbar {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--rcf-line-soft);
  min-width: 0;
}

.rcf-toolbar__sep {
  width: 1px;
  align-self: stretch;
  background: var(--rcf-line-soft);
  margin: 0 2px;
}

.rcf-toolbar__spacer { flex: 1 1 auto; min-width: 0; }

.rcf-hint {
  color: var(--rcf-muted);
  font-size: 12px;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- preview
   The one scroll container that matters. It must reach all four corners
   of an oversized capture, which is what `safe center` is for: it
   centres a small image but falls back to start-alignment the moment
   the image is bigger than the box, so the top and left never end up
   in unreachable negative overflow. */
.rcf-preview {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  display: flex;
  justify-content: center;
  justify-content: safe center;
  align-items: center;
  align-items: safe center;
  padding: 12px;
  background:
    repeating-conic-gradient(#0A0C24 0% 25%, #0E1030 0% 50%) 50% / 20px 20px;
  /* stable, not both-edges. Reserving a gutter on the trailing edge as
     well inflates the scroll extent by a gutter the browser will not let
     you scroll into, so the right-hand strip of an oversized screenshot
     became unreachable. One leading gutter still prevents the layout
     jumping when the scrollbars appear on switching to 100%. */
  scrollbar-gutter: stable;
  overscroll-behavior: contain;   /* keeps preview scrolling out of the
                                     slide deck's navigation */
}

.rcf-stage {
  position: relative;
  flex: none;
  line-height: 0;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
}

.rcf-stage img {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: auto;
  -webkit-user-drag: none;
  user-select: none;
}

.rcf-stage svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* Pan is the default: dragging inspects. Only the drawing tools take
 * the gesture away from the browser, and only inside the image. */
.rcf-stage[data-tool="pan"] svg   { touch-action: auto; cursor: grab; }
.rcf-stage[data-tool="arrow"] svg { cursor: crosshair; }
.rcf-stage[data-tool="rect"] svg  { cursor: crosshair; }

.rcf-empty {
  margin: auto;
  max-width: 380px;
  text-align: center;
  color: var(--rcf-muted);
  font-size: 13px;
  line-height: 1.6;
}

.rcf-scrollhint {
  flex: none;
  padding: 4px 10px 6px;
  color: var(--rcf-muted);
  font-size: 11px;
  border-bottom: 1px solid var(--rcf-line-soft);
}

.rcf-scrollhint[hidden] { display: none; }

/* ------------------------------------------------------------------ copy */
.rcf-intro__head {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

.rcf-intro__body {
  margin: 0 0 6px;
  color: var(--rcf-muted);
  font-size: 13px;
  line-height: 1.55;
}

/* Louder than the body, quieter than the headline. This is the line that
   has to be believed, not the line that has to be read first. */
.rcf-intro__emphasis {
  margin: 0 0 8px;
  color: var(--rcf-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

.rcf-intro__sign {
  margin: 0;
  color: var(--rcf-sky);
  font-size: 13px;
  font-weight: 600;
}

.rcf-intro__reassurance {
  margin: 6px 0 0;
  color: var(--rcf-muted);
  font-size: 12px;
  line-height: 1.5;
}

/* One light line rather than a card. It carries the sky accent already
   used for the sign-in outcome, never a status colour, so it reads as
   guidance and not as an error. No motion of any kind. */
.rcf-callout {
  display: flex;
  gap: 8px;
  margin: 10px 0 0;
  padding: 8px 10px;
  border-left: 2px solid var(--rcf-sky);
  border-radius: 0 8px 8px 0;
  background: rgba(108, 184, 255, 0.07);
  color: var(--rcf-ink);
  font-size: 12.5px;
  line-height: 1.55;
}

.rcf-callout__icon {
  flex: none;
  color: var(--rcf-sky);
  font-size: 11px;
  line-height: 1.9;
}

.rcf-callout__text { min-width: 0; }

/* Weight plus the accent, but no underline: neither phrase is a link.
   Both are short enough to hold together at the narrowest panel width,
   and a name broken across two lines stops reading as a name. */
.rcf-callout__key {
  color: var(--rcf-sky);
  font-weight: 700;
  white-space: nowrap;
}

.rcf-card {
  border: 1px solid var(--rcf-line-soft);
  border-radius: 10px;
  background: var(--rcf-panel);
  padding: 12px;
}

.rcf-field__label {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
}

.rcf-textarea {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 84px;
  max-height: 40vh;
  resize: vertical;
  padding: 8px 10px;
  border: 1px solid var(--rcf-line);
  border-radius: 8px;
  background: #080A22;
  color: var(--rcf-ink);
  font: 400 13px/1.5 "Open Sans", system-ui, sans-serif;
}

.rcf-textarea:focus-visible {
  outline: 2px solid var(--rcf-sky);
  outline-offset: 1px;
}

.rcf-count {
  display: block;
  margin-top: 4px;
  color: var(--rcf-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.rcf-count[data-over="true"] { color: #FF8A8A; }

.rcf-meta {
  margin: 0;
  color: var(--rcf-muted);
  font-size: 12px;
  line-height: 1.5;
  word-break: break-word;
}

.rcf-meta strong { color: var(--rcf-ink); font-weight: 600; }

.rcf-note {
  margin: 0;
  color: var(--rcf-muted);
  font-size: 12px;
  line-height: 1.55;
}

/* --------------------------------------------------------------- buttons */
.rcf-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  padding: 5px 11px;
  border: 1px solid var(--rcf-line);
  border-radius: 8px;
  background: var(--rcf-panel-2);
  color: var(--rcf-ink);
  font: 600 12.5px/1.2 "Open Sans", system-ui, sans-serif;
  cursor: pointer;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
}

.rcf-btn:hover:not(:disabled) { border-color: rgba(108, 184, 255, 0.55); }

.rcf-btn:focus-visible {
  outline: 2px solid var(--rcf-sky);
  outline-offset: 2px;
}

.rcf-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.rcf-btn[aria-pressed="true"] {
  border-color: var(--rcf-sky);
  background: rgba(108, 184, 255, 0.16);
  color: #DCEBFF;
}

.rcf-btn--primary {
  border-color: rgba(214, 168, 95, 0.75);
  background: rgba(214, 168, 95, 0.16);
  color: #F6E3C4;
}

.rcf-btn--primary:hover:not(:disabled) { border-color: var(--rcf-gold); }

.rcf-btn--quiet { background: transparent; }

.rcf-btn--icon {
  width: 30px;
  padding: 0;
  font-size: 15px;
}

.rcf-btn--block { width: 100%; }

/* The label cycles through Submit feedback, Preparing, Submitting and
 * Confirming. A floor on the width means the footer never twitches as it
 * changes, which is the difference between a status and a distraction. */
.rcf-btn--submit { min-width: 148px; }

.rcf-btn[aria-busy="true"] { cursor: progress; }

/* ------------------------------------------------------------- result card
   One card, three outcomes, distinguished by an icon and a border rather
   than by colour alone so the state survives a monochrome display. */
.rcf-result {
  border-color: var(--rcf-line);
  animation: rcf-result-in 200ms ease-out both;
}

.rcf-result[hidden] { display: none; }

@keyframes rcf-result-in {
  from { opacity: 0; transform: scale(0.985); }
  to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .rcf-result { animation: none; }
}

.rcf-result__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.rcf-result__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.rcf-result__title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}

.rcf-result__body {
  margin: 0;
  color: var(--rcf-muted);
  font-size: 12.5px;
  line-height: 1.55;
}

.rcf-result__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.rcf-result__row > [hidden] { display: none; }

.rcf-result[data-kind="success"] {
  border-color: rgba(155, 231, 180, 0.5);
  background: rgba(155, 231, 180, 0.07);
}
.rcf-result[data-kind="success"] .rcf-result__icon,
.rcf-result[data-kind="success"] .rcf-result__title { color: #9BE7B4; }

.rcf-result[data-kind="auth"] {
  border-color: rgba(108, 184, 255, 0.5);
  background: rgba(108, 184, 255, 0.07);
}
.rcf-result[data-kind="auth"] .rcf-result__icon,
.rcf-result[data-kind="auth"] .rcf-result__title { color: var(--rcf-sky); }

.rcf-result[data-kind="error"] {
  border-color: rgba(255, 154, 154, 0.5);
  background: rgba(255, 154, 154, 0.07);
}
.rcf-result[data-kind="error"] .rcf-result__icon,
.rcf-result[data-kind="error"] .rcf-result__title { color: #FF9A9A; }

/* Cards the result card replaces. Kept as a rule rather than an inline
 * style so the hiding is visible in the stylesheet. */
.rcf-card[hidden] { display: none; }

/* ------------------------------------------------------------------ foot */
.rcf-foot {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--rcf-line-soft);
  min-width: 0;
}

.rcf-foot__spacer { flex: 1 1 auto; min-width: 0; }

.rcf-status {
  flex: 1 1 100%;
  order: -1;
  margin: 0;
  color: var(--rcf-muted);
  font-size: 12px;
  min-height: 0;
}

.rcf-status[data-tone="error"] { color: #FF9A9A; }
.rcf-status[data-tone="ok"]    { color: #9BE7B4; }
.rcf-status:empty              { display: none; }

/* ---------------------------------------------------------- narrow screens
   One column, and the body itself becomes the scroller. The preview
   keeps a floor of 34dvh so it never collapses to nothing, which is
   the failure the brief calls out by name. */
@media (max-width: 899px) {
  /* Flow, not grid. A constrained grid row sizes itself to the space
   * available and then the preview's own minimum pushes straight through
   * the bottom of it, printing the side panel underneath. Letting the
   * body lay out in normal flow means each block takes the height it
   * needs and the body is the single thing that scrolls, which is also
   * the one scroll region the brief asks for on this breakpoint. */
  .rcf-body {
    display: block;
    overflow: auto;
    scrollbar-gutter: stable;
  }
  .rcf-main {
    display: block;
    border-right: 0;
    border-bottom: 1px solid var(--rcf-line-soft);
  }
  /* The side panel stops being its own scroller here so there is never a
   * second vertical scrollbar competing with the body's. */
  .rcf-side { overflow: visible; }
  .rcf-preview {
    min-height: 34vh;
    min-height: 34dvh;
    max-height: 60vh;
    max-height: 60dvh;
  }
  .rcf-side { padding: 12px; }
  .rcf-editor { padding: 0; }
  .rcf-dialog { border-radius: 0; border: 0; max-width: none; }
}

/* ----------------------------------------------------------- short screens
   Trim the chrome rather than the content, and let the side panel do
   the scrolling. The close button and the primary action stay put. */
@media (max-height: 620px) {
  .rcf-head { padding: 6px 10px; }
  .rcf-toolbar { padding: 5px 8px; }
  .rcf-foot { padding: 6px 10px; }
  .rcf-intro__head { font-size: 14px; }
  .rcf-textarea { min-height: 58px; }
}

@media (max-width: 899px) and (max-height: 620px) {
  .rcf-preview {
    min-height: 30vh;
    min-height: 30dvh;
    max-height: 44vh;
    max-height: 44dvh;
  }
}

.rcf-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------ intro card
   Shown once, when the feature opens, so the reviewer knows who is asking
   before they start looking. It sits in the same corner as the dock it
   collapses into, and it is sized to wrap rather than truncate: on a
   phone the copy is the point, so it is allowed to be tall and scroll. */
.rcf-intro-card {
  position: fixed;
  right: calc(24px + env(safe-area-inset-right, 0px));
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 10042;
  box-sizing: border-box;
  width: min(360px, calc(100vw - 48px));
  max-height: min(70vh, calc(100dvh - 48px));
  overflow: auto;
  scrollbar-gutter: stable;
  padding: 14px;
  border: 1px solid var(--rcf-line);
  border-radius: var(--rcf-radius);
  background: rgba(14, 16, 48, 0.98);
  box-shadow: var(--rcf-shadow);
  color: var(--rcf-ink);
  font: 400 13px/1.5 "Open Sans", system-ui, sans-serif;
}

.rcf-intro-card[hidden] { display: none; }

.rcf-intro-card__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* ------------------------------------------------------- reminder halo
   A reviewer who has been reading for three minutes has formed opinions
   the tool never hears, because nothing in the corner asks. This is the
   one thing that asks, and it gets a single 30 second window to do it.

   The halo is a pseudo-element rather than a box-shadow on the button so
   it animates on its own compositor layer: the launcher keeps its resting
   shadow, its size and its position throughout. Nothing here moves the
   control — a target that drifts under the cursor is a worse offence than
   being ignored. */
.rcf-launch[data-rcf-remind="1"]::after {
  content: "";
  position: absolute;
  /* Inset rather than width/height so the ring is concentric whatever
     the launcher measures. */
  inset: -6px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(91, 194, 231, 0) 55%,
    rgba(91, 194, 231, 0.38) 72%,
    rgba(91, 194, 231, 0) 100%
  );
  animation: rcf-breathe 2800ms ease-in-out infinite;
}

@keyframes rcf-breathe {
  0%, 100% { opacity: 0.15; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.18); }
}

/* Reduced motion still gets the signal, just not the movement: a static
   ring for the same window. Silently dropping the reminder would leave
   these users with no prompt at all, which is a worse answer than a
   still one. */
@media (prefers-reduced-motion: reduce) {
  .rcf-launch[data-rcf-remind="1"]::after {
    animation: none;
    background: none;
    border: 2px solid rgba(91, 194, 231, 0.55);
  }
}

/* ================================================================== SIMBA
   Typography floor.

   Rate Card draws this tool at a utility scale -- 11px tags, 12px hints,
   12.5px buttons. That reads as developer chrome, and SIMBA is shown to
   finance reviewers who are being asked to read it properly. Nothing here
   is smaller than 14px.

   Kept as one block at the end rather than retuned rule by rule so the
   port stays a copy of the original: the upstream file can be replaced
   wholesale and only this block needs reapplying. Sizes only -- no
   spacing, colour or layout is touched, and the controls absorb the
   extra through their existing padding. */
[data-rcf-root] .rcf-dock__tag,
[data-rcf-root] .rcf-state,
[data-rcf-root] .rcf-count,
[data-rcf-root] .rcf-scrollhint,
[data-rcf-root] .rcf-callout__icon,
[data-rcf-root] .rcf-dock__hint,
[data-rcf-root] .rcf-note,
[data-rcf-root] .rcf-field__label,
[data-rcf-root] .rcf-intro__reassurance,
[data-rcf-root] .rcf-callout__key,
[data-rcf-root] .rcf-callout,
[data-rcf-root] .rcf-btn,
[data-rcf-root] .rcf-intro__sign {
  font-size: 14px;
}

/* Body copy earns the extra pixel: these are the two paragraphs actually
   asking for the reviewer's opinion. */
[data-rcf-root] .rcf-intro__body,
[data-rcf-root] .rcf-intro__emphasis {
  font-size: 15px;
}

/* The textarea is where the reviewer writes, so it matches body copy
   rather than the controls around it. */
[data-rcf-root] .rcf-field textarea,
[data-rcf-root] textarea {
  font-size: 15px;
}

/* Failure-path copy. These render only when a submission goes wrong, which
   is exactly when nobody is checking type sizes, so they are named here
   explicitly rather than left to a catch-all. (A `*` rule cannot do this
   job: `1em` resolves against the parent, so it would pull headings down
   as readily as it pushed small text up.) */
[data-rcf-root] .rcf-result__title,
[data-rcf-root] .rcf-result__message,
[data-rcf-root] .rcf-auth__title,
[data-rcf-root] .rcf-auth__body,
[data-rcf-root] .rcf-status {
  font-size: 14px;
}

/* ================================================== SIMBA theme firewall
   The application theme reaches into this component and repaints it.

   assets/ads-theme.css styles every dialog on the page:

     html[data-theme="ads"] .modal,
     html[data-theme="ads"] [role="dialog"], ... {
       background: var(--ads-card-bg);   -- resolves to white
       color: var(--ads-gray-600);       -- resolves to near-black
     }

   Two elements here are dialogs and carry role="dialog" for assistive
   technology: the corner intro card and the annotation editor. So the
   theme matches them, and it wins on specificity -- (0,2,1) for
   `html[data-theme="ads"] [role="dialog"]` against (0,1,0) for a bare
   `.rcf-intro-card`. That is the whole cause of the white surfaces and
   the unreadable near-black text on them. The tokens were never wrong:
   --rcf-navy and --rcf-ink resolve correctly, they were simply overruled.

   The fix is scope, not force. Repeating the component's own root
   attribute lifts these rules to (0,3,0), which clears the theme
   outright without a single !important and without touching ads-theme.css
   -- the product's real dialogs must keep the light treatment. The
   doubled attribute is deliberate and load-bearing; collapsing it to one
   drops the rules back below the theme and the white returns.

   Only the properties the theme actually sets are restored here. */
[data-rcf-root][data-rcf-root] .rcf-intro-card {
  background: rgba(14, 16, 48, 0.98);
  border: 1px solid var(--rcf-line);
  border-radius: var(--rcf-radius);
  box-shadow: var(--rcf-shadow);
  color: var(--rcf-ink);
  font-family: "Open Sans", system-ui, sans-serif;
}

[data-rcf-root][data-rcf-root] .rcf-dialog {
  background: var(--rcf-navy);
  border: 1px solid var(--rcf-line);
  border-radius: var(--rcf-radius);
  box-shadow: var(--rcf-shadow);
  color: var(--rcf-ink);
  font-family: "Open Sans", system-ui, sans-serif;
}