/* RF palette: per approved mockup 2026-04. Do not reintroduce the previous
   brown/orange palette without updating docs/requirements/rf-tool-overview.html. */
:root {
  --rf-teal: #1A6B63;
  --rf-teal-dark: #134E48;
  --rf-orange: #B45309;
  --rf-orange-soft: #FEF3C7;
  --rf-amber: #D97706;
  --rf-ink: #111827;
  --rf-ink-soft: #374151;
  --rf-muted: #6B7280;
  --rf-rule: #E5E7EB;
  --rf-page: #F9FAFB;
  --rf-white: #FFFFFF;
  --rf-green: #047857;
  --rf-green-soft: #D1FAE5;
  --rf-red: #DC2626;
  /* Slate-blue for the paraphrased reliability tier. Chosen for >=4.5:1
     contrast against the chip's pale tinted background (#DBEAFE-ish) so
     the text label keeps its WCAG 1.4.3 contrast budget. */
  --rf-blue: #1D4ED8;
  --rf-blue-soft: #DBEAFE;
  --rf-yellow-bg: #FEF3C7;
  --rf-yellow-highlight: #FDE68A;
  --rf-chrome: #1F2937;
}

/* -----------------------------------------------------------------------
   Resilient Futures Interview Analysis: supplementary styles.
   Loaded alongside app/static/style.css on all pages (via base.html).

   Authoring rule (adopted 2026-04-17): prefer the shared components in
   app/templates/components/*.html and the shared design tokens in
   app/static/style.css. Only add styles here when there is a genuine
   product reason: e.g. the internal-only `.rf-watermark` marker that
   must be visually distinct from a transient alert, or the review-page
   two-pane layout which has no shared equivalent.

   If you find yourself inventing a new class name (`.rf-cta-label`,
   `.rf-action-title`, …) because you "need the text on two lines",
   that's a cue to check whether a shared component or an existing utility
   already does the job before writing more CSS here.
   ----------------------------------------------------------------------- */

/* WCAG 2.4.13: 3:1 minimum focus indicator. Applied page-wide on RF screens.
   Scoped to .rf-page descendants so it doesn't bleed to non-RF pages that
   share base.html (those keep the browser default). */
.rf-page :focus-visible {
  outline: 3px solid #1669b2;
  outline-offset: 2px;
}

.rf-page {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.6rem 1.4rem 4rem;
  color: #2f2a24;
}

/* Home-page vertical rhythm: give each section room to breathe so the
   page doesn't feel cramped stacked inside the narrow workbench container. */
.rf-home > section,
.rf-home > details.info-box { margin-bottom: 2rem; }
.rf-home .workflow-header { margin-bottom: 1rem; }
.rf-home .rf-watermark { margin: 0 0 1.5rem; }

/* Long-form prose typography for the guide page now lives in the global
   `.prose` utility in style.css. The guide template applies it via
   `class="rf-page prose"`. See docs/component-reference.md → ".prose". */

.rf-lede { color: #4a443c; max-width: 50rem; margin-top: 0; }
.rf-watermark {
  background: #fff3dd;
  border-left: 4px solid #c1511f;
  padding: 0.7rem 1rem;
  color: #5c3a14;
  font-size: 0.9rem;
  border-radius: 3px;
  margin: 0.7rem 0;
}

.rf-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 0.9rem 0 1.4rem; }

/* "Your work right now" action cards. Uses shared tokens from style.css. */
.rf-action-group h2 { margin-bottom: 0.75rem; }
.rf-action-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: stretch;
  margin: 0.5rem 0 0;
}
.rf-action-primary {
  /* Keep the primary .btn its natural height: align-items:stretch on the
     flex parent would otherwise stretch it to the tallest card. */
  align-self: flex-start;
}
.rf-action-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 16rem;
  flex: 1 1 18rem;
  padding: 0.85rem 1.1rem;
  background: var(--surface, #fff);
  border: 1.5px solid var(--border, #d5cfcc);
  border-radius: var(--radius, 0.75rem);
  text-decoration: none;
  color: var(--text, #111);
  transition: border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.rf-action-item:hover,
.rf-action-item:focus-visible {
  border-color: var(--primary, #ad5415);
  color: var(--primary, #ad5415);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.rf-action-title { font-weight: 600; font-size: 0.95rem; line-height: 1.3; }
.rf-action-sub { font-size: 0.85rem; color: var(--text-secondary, #655b55); line-height: 1.4; }
/* Urgent state must read distinct from the hover state (hover also tints
   border-color): use a thicker border + soft background so a resting urgent
   card is obviously urgent even before the user hovers. */
.rf-action-item--urgent {
  border-width: 2px;
  border-color: var(--primary, #ad5415);
  background: var(--primary-light, #fcf0d8);
}
.rf-action-badge {
  align-self: flex-start;
  margin-top: 0.4rem;
  padding: 0.15rem 0.6rem;
  /* Amber: deliberately distinct from --primary so urgency reads separately
     from brand accent. */
  background: #fef3c7;
  color: #78350f;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
}
.rf-action-item--disabled {
  cursor: not-allowed;
  opacity: 0.6;
  border-style: dashed;
}
.rf-action-item--disabled:hover,
.rf-action-item--disabled:focus-visible {
  color: var(--text, #111);
  border-color: var(--border, #d5cfcc);
  box-shadow: none;
}
.rf-action-hint {
  flex-basis: 100%;
  font-size: 0.85rem;
  color: var(--text-secondary, #655b55);
  margin: 0.2rem 0 0;
}

.rf-cta {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: #c1511f;
  color: #fff;
  border: none;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.94rem;
  cursor: pointer;
}
.rf-cta:hover, .rf-cta:focus-visible { background: #a04118; outline: 2px solid #632d03; outline-offset: 2px; }
.rf-cta[disabled] { background: #d3c7b9; color: #fff; cursor: not-allowed; }
.rf-cta--secondary {
  background: #fff; color: #632d03; border: 1px solid #c1511f;
}
.rf-cta--secondary:hover, .rf-cta--secondary:focus-visible {
  background: #fdeadb; outline: 2px solid #632d03;
}
.rf-cta--small { padding: 0.25rem 0.6rem; font-size: 0.85rem; }

.rf-link { color: #632d03; }

.rf-table { width: 100%; border-collapse: collapse; }
.rf-table th, .rf-table td {
  border-bottom: 1px solid #e7e0d4; padding: 0.5rem 0.6rem; text-align: left;
  vertical-align: top;
}
.rf-table th { background: #faf4ea; }

.rf-status { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.8rem; }
.rf-status--done { background: #d6edd4; color: #14572d; }
.rf-status--review { background: #fff1c8; color: #5c4200; }
.rf-status--pending { background: #e4e0da; color: #403b33; }

.rf-meta { color: #6b635a; font-size: 0.88rem; }
.rf-empty { color: #6b635a; }
.rf-error { background: #fad6d6; border: 1px solid #c57474; padding: 0.6rem 0.9rem; border-radius: 4px; margin: 0.8rem 0; color: #7a1414; }

.rf-form { display: grid; gap: 0.8rem; max-width: 40rem; }
.rf-form .rf-field { display: grid; gap: 0.25rem; }
.rf-form input[type="text"],
.rf-form input[type="date"],
.rf-form input[type="number"],
.rf-form select,
.rf-form textarea {
  font: inherit; padding: 0.45rem 0.55rem; border: 1px solid #d5cec3; border-radius: 4px;
}
.rf-form input:focus-visible, .rf-form select:focus-visible, .rf-form textarea:focus-visible {
  outline: 2px solid #c1511f; outline-offset: 1px;
}
.rf-fieldset { border: 1px solid #e1d7c9; padding: 0.6rem 0.9rem; border-radius: 4px; }
.rf-fieldset legend { padding: 0 0.3rem; font-weight: 600; }
.rf-inline-form { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: end; }

.rf-round-list { list-style: disc; padding-left: 1.4rem; }

/* -----------------------------------------------------------------------
   Review page: two-pane layout (narrative + cleaned transcript).
   Scrolls independently per pane. WCAG AA contrast throughout.
   ----------------------------------------------------------------------- */

.rf-review-page { padding: 0 1.2rem 4rem; }
.rf-review-header {
  position: sticky; top: 0; z-index: 20; background: #fff;
  border-bottom: 1px solid #dbd6cf;
  padding: 0.7rem 1rem 0.85rem;
  display: flex; flex-direction: column; gap: 0.4rem;
}
.rf-review-header-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.8rem 1.6rem;
}
.rf-review-header h1 { margin: 0; font-size: 1.05rem; }
.rf-review-header .rf-name {
  display: inline-flex; gap: 0.35rem; align-items: center;
  padding: 0.2rem 0.55rem; border-radius: 999px; background: #fce9dc;
  color: #632d03;
}
/* Review-page watermark overrides only font/colour/margin; the boxed
   background + orange border-left come from the index-page .rf-watermark
   rule above via the cascade. Keep these three properties exactly to
   preserve the pre-refactor appearance. */
.rf-review-header .rf-watermark {
  font-size: 0.85rem; color: #6b635a; margin: 0;
}

/* Container rules below are scoped to .rf-review-page so they don't leak
   to other RF templates that happen to use the same classnames
   (e.g. analysis_detail.html, irr_form.html also use .rf-section). */
.rf-review-page .rf-tags-bar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.4rem 1.1rem; padding: 0.5rem 0;
  font-size: 0.88rem; border-top: 1px dashed #dbd6cf;
}
.rf-review-page .rf-tags-bar dt { font-weight: 600; display: inline; margin-right: 0.25rem; }
.rf-review-page .rf-tags-bar dd { display: inline; margin: 0; }
.rf-review-page .rf-review-panes {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.4rem; margin-top: 0.8rem;
}
@media (max-width: 900px) {
  .rf-review-page .rf-review-panes { grid-template-columns: 1fr; }
}
.rf-review-page .rf-pane h2 { font-size: 1rem; margin: 0.5rem 0 0.4rem; }
.rf-review-page .rf-pane pre.rf-transcript {
  max-height: 70vh; overflow: auto; white-space: pre-wrap; word-break: break-word;
  background: #fbf8f4; border: 1px solid #e5dfd6; border-radius: 6px;
  padding: 0.8rem; font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.9rem;
}
.rf-review-page .rf-section {
  border: 1px solid #e5dfd6; border-radius: 6px; padding: 0.7rem 0.9rem;
  margin-bottom: 0.7rem; background: #fff;
}
.rf-review-page .rf-section h3 {
  margin: 0 0 0.3rem; font-size: 1rem;
  display: flex; align-items: center; gap: 0.4rem;
}
.rf-review-page .rf-section textarea {
  width: 100%; min-height: 7.5em; font: inherit; padding: 0.45rem 0.55rem;
  border: 1px solid #d5cec3; border-radius: 4px;
}
.rf-review-page .rf-section-render p { margin: 0 0 0.45rem; }
.rf-review-page .rf-finalize-bar {
  margin-top: 1rem; padding: 0.7rem 0.9rem; border-radius: 6px;
  background: #f4efe7; border: 1px solid #e1d7c9;
  display: flex; justify-content: space-between; align-items: center;
  gap: 0.7rem; flex-wrap: wrap;
}

/* Citation badges, empty-section notes, and flag pills stay unscoped -
   they're reusable semantic indicators that may appear wherever
   narrative content renders. */
.rf-cite {
  display: inline-flex; align-items: center; gap: 0.1rem;
  padding: 0 0.3rem; margin: 0 0.1rem;
  border-radius: 3px; text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.rf-cite:focus-visible { outline: 2px solid #e5671e; outline-offset: 1px; }
.rf-cite sup { font-size: 0.78em; }
.rf-empty-section { color: #6b635a; font-style: italic; }
.rf-acknowledged { color: #3d6b34; }
.rf-flag-warn {
  background: #fff1c8; color: #5c4200; padding: 2px 8px;
  border-radius: 999px; font-size: 0.8rem;
}

/* Review screen: scoped to .rf-screen so nothing leaks to other RF pages. */
.rf-screen {
  background: var(--rf-white);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.05);
  margin: 1rem 0 0;
}
.rf-screen-chrome {
  background: var(--rf-chrome);
  color: #E5E7EB;
  padding: 12px 16px;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.rf-screen-chrome strong { color: var(--rf-white); }
.rf-screen-chrome a { color: #93C5FD; text-decoration: underline; cursor: pointer; }
.rf-screen-chrome .rf-chrome-link {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: #93C5FD;
  text-decoration: underline;
  cursor: pointer;
}
.rf-screen-chrome .rf-chrome-link:focus-visible {
  outline: 2px solid #93C5FD;
  outline-offset: 2px;
}
.rf-chrome-divider { color: var(--rf-muted); margin: 0 6px; }
.rf-status-pill {
  background: #065F46;
  color: var(--rf-white);
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.rf-status-pill--skipped {
  background: #6B7280;
}
.rf-panes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rf-rule);
}
.rf-pane {
  background: var(--rf-white);
  padding: 20px;
  max-height: 560px;
  overflow-y: auto;
}
.rf-pane .rf-eyebrow {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rf-muted);
  margin-bottom: 12px;
  font-weight: 600;
}
.rf-pane h3 {
  font-size: 15px;
  margin: 2px 0 6px 0;
  color: var(--rf-ink);
  font-weight: 700;
}
.rf-pane.narrative { font-size: 14px; line-height: 1.6; }
.rf-pane.transcript { font-size: 13px; line-height: 1.55; }
.rf-pane.transcript p { margin: 0 0 10px 0; }
.rf-pane.transcript .interviewer { color: var(--rf-muted); }

/* Citation markers: inline glyphs, no background fill. */
.rf-cite {
  font-weight: 700;
  font-size: 12px;
  margin-left: 1px;
  position: relative;
  top: -0.2em;
  cursor: pointer;
  text-decoration: none;
  padding: 0;
  background: transparent;
}
.rf-cite.ok { color: var(--rf-green); }
.rf-cite.warn { color: var(--rf-amber); }
.rf-cite.fail { color: var(--rf-red); }
.rf-cite:focus-visible { outline: 2px solid var(--rf-teal); outline-offset: 2px; }

/* Active sentence and transcript highlight. */
.rf-active-sentence {
  background: var(--rf-yellow-bg);
  padding: 10px;
  border-left: 3px solid var(--rf-amber);
  border-radius: 3px;
  margin: 4px 0;
}
.rf-active-badge {
  font-size: 11px;
  color: #92400E;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 6px;
}
.rf-highlighted-passage {
  background: var(--rf-yellow-highlight);
  padding: 1px 2px;
}

.rf-legend {
  margin-top: 18px;
  padding: 12px 20px;
  border-top: 1px solid var(--rf-rule);
  font-size: 12px;
  color: var(--rf-muted);
  background: var(--rf-white);
}
.rf-legend .rf-cite { margin-right: 2px; position: static; top: 0; }

.rf-screen-actions {
  background: var(--rf-white);
  border-top: 1px solid var(--rf-rule);
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  gap: 16px;
  flex-wrap: wrap;
}
.rf-counts { color: var(--rf-ink-soft); }
.rf-counts .ok { color: var(--rf-green); font-weight: 700; }
.rf-counts .warn { color: var(--rf-amber); font-weight: 700; }
.rf-counts .fail { color: var(--rf-red); font-weight: 700; }
.rf-counts .mute { color: var(--rf-muted); }

.rf-btn {
  font-family: inherit;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  border: 0;
}
.rf-btn-secondary {
  background: var(--rf-white);
  border: 1px solid #D1D5DB;
  color: var(--rf-ink-soft);
  margin-right: 6px;
}
.rf-btn-primary {
  background: var(--rf-teal);
  color: var(--rf-white);
}
.rf-btn-primary:hover, .rf-btn-primary:focus-visible {
  background: var(--rf-teal-dark);
  outline: 2px solid var(--rf-teal-dark);
  outline-offset: 2px;
}
.rf-btn-secondary:hover, .rf-btn-secondary:focus-visible {
  background: var(--rf-page);
  outline: 2px solid var(--rf-teal);
  outline-offset: 2px;
}

.rf-empty-section-note { color: var(--rf-muted); font-style: italic; }
.rf-ack-form { margin: 6px 0 10px; }
.rf-edit-summary { font-size: 12px; color: var(--rf-muted); cursor: pointer; }
.rf-save-status-line { font-size: 12px; margin: 4px 0 8px; }
.rf-finalize-form { display: inline; }
.rf-gate-hint { padding: 6px 20px 12px; font-size: 12px; }

/* Voice provenance (sentence-level, added 2026-04-18). Distinguishes
   participant-voice sentences (the participant's own words or close
   paraphrase) from evaluator-voice bridging prose. Colour-mix keeps the
   evaluator tone subtly muted without changing weight or italic. Italic
   is reserved for user emphasis and must not be used for voice. */
.rf-screen .rf-sentence {
  display: inline;
}
.rf-screen .rf-sentence--participant {
  color: var(--rf-ink);
  font-weight: 500;
}
.rf-screen .rf-sentence--evaluator {
  color: color-mix(in srgb, var(--rf-ink) 65%, var(--rf-white));
  font-weight: 400;
}
/* WCAG 1.4.1 (Use of Color): evaluator-voice sentences must not rely on
   colour alone. A leading middle-dot renders as a visible non-colour
   marker; the pseudo-element content is not part of the accessibility
   tree, and the span itself carries aria-label="evaluator commentary". */
.rf-screen .rf-sentence--evaluator::before {
  content: "\00b7\00a0";
  color: var(--rf-muted);
  font-weight: 400;
  speak: none;
}
/* Fallback for older browsers lacking color-mix (-8% contrast hint). */
@supports not (color: color-mix(in srgb, red, blue)) {
  .rf-screen .rf-sentence--evaluator { color: var(--rf-ink-soft); }
}

/* Explicit "no content for this section" marker. Distinct from both an
   empty-string legacy section and a missing citation. */
.rf-screen .rf-section--empty {
  color: var(--rf-muted);
  font-style: italic;
  margin: 0;
}

/* Reliability-tier chips (added 2026-04-18, Task D; contrast fix 2026-04-18).
   Used in the expanded citation list on the review page. Four-state text+icon
   element; distinct from the three-state inline `.rf-cite` glyph in narrative
   prose. WCAG 1.4.1 accommodation: tier is conveyed by icon + label, not
   colour alone.

   WCAG 1.4.3 contrast: the chip sits on .rf-screen's white background. The
   background is color-mix(colour 18%, transparent) which composites to
   colour 18% + white 82% on a white surface. The saturated palette values
   did NOT clear 4.5:1 against that tint (verbatim 4.25, timestamp 2.63,
   unverified 3.64). The text is therefore darkened to color-mix(colour 70%,
   black). Ratios measured 2026-04-18 against the composited 18% tint:
     - verbatim       (#035437 on rgb(210,231,225)):  6.95:1
     - paraphrased    (#143797 on rgb(214,223,248)):  7.79:1
     - timestamp_only (#985304 on rgb(248,231,210)):  4.85:1
     - unverified     (#9A1B1B on rgb(249,216,216)):  6.22:1
   The border still uses the saturated 35% tint so the chip reads as the
   same colour family at a glance; only the text itself is darkened.
   An @supports fallback below keeps older browsers legible with the same
   darkening rule applied to solid soft-tint backgrounds. */
.rf-screen .citation-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.15em 0.55em;
  border-radius: 999px;
  font-size: 0.85em;
  font-weight: 500;
  line-height: 1.4;
  vertical-align: baseline;
  white-space: nowrap;
  border: 1px solid transparent;
}
.rf-screen .citation-chip__icon {
  font-weight: 700;
}
.rf-screen .citation-chip--verbatim {
  background: color-mix(in srgb, var(--rf-green) 18%, transparent);
  color: color-mix(in srgb, var(--rf-green) 70%, black);
  border-color: color-mix(in srgb, var(--rf-green) 35%, transparent);
}
.rf-screen .citation-chip--paraphrased {
  background: color-mix(in srgb, var(--rf-blue) 18%, transparent);
  color: color-mix(in srgb, var(--rf-blue) 70%, black);
  border-color: color-mix(in srgb, var(--rf-blue) 35%, transparent);
}
.rf-screen .citation-chip--timestamp_only {
  background: color-mix(in srgb, var(--rf-amber) 18%, transparent);
  color: color-mix(in srgb, var(--rf-amber) 70%, black);
  border-color: color-mix(in srgb, var(--rf-amber) 35%, transparent);
}
.rf-screen .citation-chip--unverified {
  background: color-mix(in srgb, var(--rf-red) 18%, transparent);
  color: color-mix(in srgb, var(--rf-red) 70%, black);
  border-color: color-mix(in srgb, var(--rf-red) 35%, transparent);
}
/* Fallback for browsers without color-mix(): a soft solid tint plus a full
   border in the saturated variant. Matches the pattern used for
   .rf-sentence--evaluator above. Uses hard-coded darkened hex values
   (equivalent to 70% colour + 30% black) since color-mix is unavailable.
   Ratios measured 2026-04-18 on the soft-tint backgrounds:
     - verbatim       (#035437 on #D1FAE5):  7.92:1
     - paraphrased    (#143797 on #DBEAFE):  8.51:1
     - timestamp_only (#985304 on #FEF3C7):  5.28:1
     - unverified     (#9A1B1B on #FEE2E2):  6.75:1 */
@supports not (color: color-mix(in srgb, red, blue)) {
  .rf-screen .citation-chip--verbatim {
    background: var(--rf-green-soft);
    color: #035437;
    border-color: var(--rf-green);
  }
  .rf-screen .citation-chip--paraphrased {
    background: var(--rf-blue-soft);
    color: #143797;
    border-color: var(--rf-blue);
  }
  .rf-screen .citation-chip--timestamp_only {
    background: var(--rf-yellow-bg);
    color: #985304;
    border-color: var(--rf-amber);
  }
  .rf-screen .citation-chip--unverified {
    background: #FEE2E2;
    color: #9A1B1B;
    border-color: var(--rf-red);
  }
}

/* Expanded citation list panel on the review page. Each row carries a
   chip, timestamp, and excerpt preview so evaluators can scan reliability
   at a glance without re-reading the narrative. */
.rf-screen .rf-citation-list {
  padding: 14px 20px 18px;
  border-top: 1px solid var(--rf-rule);
  background: var(--rf-white);
}
.rf-screen .rf-citation-list-heading {
  margin: 0 0 4px 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--rf-ink);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.rf-screen .rf-citation-list-help {
  margin: 0 0 10px 0;
  font-size: 12px;
  color: var(--rf-muted);
}
.rf-screen .rf-citation-list-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}
.rf-screen .rf-citation-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  color: var(--rf-ink-soft);
  padding: 6px 8px;
  border-radius: 4px;
}
.rf-screen .rf-citation-item__index {
  color: var(--rf-muted);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  min-width: 2.5em;
}
.rf-screen .rf-citation-item__timestamp {
  color: var(--rf-teal);
  text-decoration: underline;
  font-variant-numeric: tabular-nums;
}
.rf-screen .rf-citation-item__excerpt {
  color: var(--rf-muted);
  font-style: italic;
  flex: 1 1 20rem;
  min-width: 0;
}

/* Legend: stacked rows so the three distinct sets of markers don't run
   together on narrow widths. */
.rf-screen .rf-legend-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 6px;
  padding: 2px 0;
}
.rf-screen .rf-legend-row + .rf-legend-row {
  margin-top: 4px;
}

/* Evaluator notes block. Analyst commentary lives here, not inside the
   participant-voice narrative. Thin top rule keeps it visibly separated. */
.rf-screen .rf-evaluator-notes {
  margin-top: 20px;
  padding-top: 12px;
  border-top: 1px solid var(--rf-rule);
  color: var(--rf-ink-soft);
  font-size: 13px;
}
.rf-screen .rf-evaluator-notes-heading {
  margin: 0 0 6px 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--rf-ink);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.rf-screen .rf-evaluator-notes p {
  margin: 0 0 6px 0;
}

@media (max-width: 1000px) {
  .rf-panes { grid-template-columns: 1fr; }
  .rf-pane { max-height: none; }
}

.rf-edit-textarea {
  width: 100%;
  min-height: 7em;
  font: inherit;
  padding: 0.45rem;
  border: 1px solid var(--rf-rule);
  border-radius: 4px;
  margin-top: 6px;
}

/* Scoped width bump for RF pages only. Global .main-content caps at 960 px. */
body.rf .main-content {
  max-width: 72rem;  /* 1152 px */
}

/* --- Status strip --- */
.rf-status-strip {
  border: 1px solid var(--color-border, #ccc);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  margin-block: 1rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem 1.5rem;
}
.rf-status-strip-window { font-size: 1.1rem; margin: 0; }
.rf-status-strip-counts { margin: 0; }
.rf-status-strip-counts a { margin-inline-end: 0.25rem; }
.rf-status-strip-sep { color: var(--color-meta, #666); margin-inline: 0.35rem; }
.rf-status-strip-lang { justify-self: end; }

/* --- Action group --- */
.rf-action-group { margin-block: 1.5rem; }
.rf-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.75rem;
}
.rf-action-grid .rf-cta {
  display: grid;
  grid-template-rows: auto auto auto;
  padding: 1rem 1.25rem;
  min-height: 5rem;
}
.rf-cta-label { font-size: 1.05rem; font-weight: 600; }
.rf-cta-subtitle { font-size: 0.9rem; opacity: 0.8; }
.rf-cta-badge {
  display: inline-block;
  background: var(--color-warning-bg, #fff4d6);
  color: var(--color-warning-text, #5a4100);
  padding: 0.15rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.85rem;
  margin-top: 0.25rem;
}
.rf-cta--urgent { border-width: 2px; }
.rf-cta--disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Research questions --- */
.rf-research-questions { margin-block: 1.5rem; }
.rf-rq-list { list-style: none; padding: 0; }
.rf-rq-list li { margin-block: 0.4rem; }
.rf-rq-list a { text-decoration: underline; }

/* --- Setup & records --- */
.rf-setup-records { margin-top: 2rem; opacity: 0.85; }
.rf-setup-list { list-style: none; padding: 0; }
.rf-setup-list li { margin-block: 0.25rem; }

/* --- Settings page --- */
.rf-settings-table th, .rf-settings-table td { padding: 0.4rem; }
.rf-settings-table input[type=date],
.rf-settings-table input[type=text],
.rf-settings-table select { min-width: 8rem; }

/* --- Proposed-tags list --- */
.rf-proposed-tags-list { list-style: none; padding: 0; }
.rf-proposed-tags-list li { margin-block: 0.75rem; padding-inline-start: 0; }

/* --- Narrative version link --- */
.rf-narr-version-link { margin-block: 0.5rem; }
.rf-narr-version-list { list-style: none; padding-inline-start: 0; }
.rf-narr-version-list li { margin-block: 0.25rem; }

/* --- Selection forms --- */
.rf-selection-full fieldset, .rf-selection-light fieldset {
  margin-block: 1rem;
  border: 1px solid var(--color-border, #ccc);
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
}
.rf-selection-full legend, .rf-selection-light legend { padding: 0 0.4rem; font-weight: 600; }
.rf-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.3rem 1rem;
}
.rf-checkbox-grid label { display: flex; gap: 0.4rem; align-items: baseline; }
/* #5a4100 on #fef8ee (warmest page bg): ~9:1. If overriding --color-warning-text, re-verify WCAG AA. */
.rf-req { color: var(--color-warning-text, #5a4100); font-size: 0.85rem; }
.rf-quote-list { list-style: none; padding: 0; }
.rf-quote-card {
  border-inline-start: 4px solid var(--color-accent, #f18f01);
  padding: 0.5rem 0.75rem;
  margin-block: 0.5rem;
}
.rf-save-status { font-size: 0.9rem; opacity: 0.85; }
.rf-live[aria-live="polite"] { font-size: 0.9rem; }
.rf-form-actions { display: flex; gap: 0.75rem; margin-top: 1rem; }

/* --- Hidden support forms for non-nested button associations --- */
.rf-hidden-form { display: none; }

/* --- Visible focus outlines, AA-compliant --- */
:focus-visible {
  outline: 3px solid var(--color-focus, #1669b2);
  outline-offset: 2px;
}

/* --- Discrepancy cards --- */
.rf-discrepancy { max-width: 68rem; }
.rf-discrepancy-card {
  border: 1px solid var(--color-border, #ccc);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  margin-block: 1rem;
}
.rf-discrepancy-card-head h3 { margin: 0 0 0.25rem 0; }
.rf-discrepancy-rows { list-style: none; padding: 0; margin: 0; }
.rf-discrepancy-row {
  border-top: 1px solid var(--color-border, #eee);
  padding-block: 0.75rem;
}
.rf-discrepancy-row:first-child { border-top: 0; }
.rf-discrepancy-row-head { margin: 0 0 0.5rem 0; }
.rf-rationale summary { cursor: pointer; color: var(--color-meta, #555); }
.rf-group-note-form { margin-top: 0.5rem; padding: 0.75rem; background: var(--color-surface-alt, #f7f7f7); border-radius: 0.3rem; }

/* --- Export links --- */
.rf-export-links { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-block: 1rem; }

/* --- Banners --- */
.rf-banner { padding: 0.75rem 1rem; border-radius: 0.4rem; margin-block: 1rem; }
.rf-banner-warning { background: var(--color-warning-bg, #fff4d6); color: var(--color-warning-text, #5a4100); }

/* --- PII findings panel (Task E, 2026-04-18) -------------------------------
   Added for the second PII pass: a deterministic scan of the generated
   narrative for third-party names that should not appear in the final
   text. Semantically distinct from citations (reliability of quoted
   sources) and from voice provenance (who is speaking): overloading
   either would confuse the evaluator and fail WCAG 1.4.1 by collapsing
   multiple meanings into one colour signal. */
.rf-screen .rf-pii-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.8rem;
  margin: 0.75rem 20px 0;
}
.rf-screen .rf-pii-banner__icon {
  font-weight: 700;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2em;
  height: 1.2em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--rf-amber) 25%, transparent);
  color: color-mix(in srgb, var(--rf-amber) 80%, black);
}
.rf-screen .rf-pii-banner__link {
  color: color-mix(in srgb, var(--rf-amber) 80%, black);
  font-weight: 600;
  text-decoration: underline;
}

.rf-screen .rf-findings-panel {
  margin: 1rem 20px;
  padding: 1rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--rf-amber) 40%, transparent);
  background: color-mix(in srgb, var(--rf-amber) 8%, var(--rf-white));
  border-radius: 6px;
}
.rf-screen .rf-findings-panel__heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.4rem;
  font-size: 1rem;
  color: var(--rf-ink);
}
.rf-screen .rf-findings-panel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4em;
  height: 1.4em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--rf-amber) 25%, transparent);
  color: color-mix(in srgb, var(--rf-amber) 80%, black);
  font-weight: 700;
}
.rf-screen .rf-findings-panel__help {
  font-size: 0.9rem;
  color: var(--rf-ink-soft);
  margin: 0 0 0.75rem;
  max-width: 62rem;
}
.rf-screen .rf-finding-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.6rem;
}
.rf-screen .rf-finding-row {
  padding: 0.6rem 0.75rem;
  background: var(--rf-white);
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--rf-amber) 25%, transparent);
}
.rf-screen .rf-finding-row--kept,
.rf-screen .rf-finding-row--scrubbed {
  background: color-mix(in srgb, var(--rf-ink) 4%, var(--rf-white));
  border-color: color-mix(in srgb, var(--rf-ink) 12%, transparent);
}
.rf-screen .rf-finding-row__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.6rem;
  font-size: 0.92rem;
}
.rf-screen .rf-finding-row__entity { color: var(--rf-ink); }
.rf-screen .rf-finding-row__type,
.rf-screen .rf-finding-row__section { color: var(--rf-ink-soft); font-size: 0.85rem; }
.rf-screen .rf-finding-row__anchor {
  color: var(--rf-teal);
  text-decoration: underline;
  font-size: 0.85rem;
}
.rf-screen .rf-finding-row__status {
  margin-left: auto;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rf-screen .rf-finding-row__status--pending {
  background: color-mix(in srgb, var(--rf-amber) 22%, transparent);
  color: color-mix(in srgb, var(--rf-amber) 85%, black);
}
.rf-screen .rf-finding-row__status--kept {
  background: color-mix(in srgb, var(--rf-ink) 10%, transparent);
  color: var(--rf-ink);
}
.rf-screen .rf-finding-row__status--scrubbed {
  background: color-mix(in srgb, var(--rf-green) 20%, transparent);
  color: color-mix(in srgb, var(--rf-green) 75%, black);
}
.rf-screen .rf-finding-row__reason {
  margin: 0.3rem 0 0.5rem;
  font-size: 0.85rem;
  color: var(--rf-ink-soft);
}
.rf-screen .rf-finding-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  margin-top: 0.45rem;
}
.rf-screen .rf-finding-actions__form {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.rf-screen .rf-finding-actions__label input[type="text"] {
  padding: 0.3rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--rf-ink) 18%, transparent);
  border-radius: 4px;
  font-size: 0.85rem;
  min-width: 12rem;
}
.rf-screen .rf-finding-actions__clear { opacity: 0.75; }

/* Inline highlight on the offending sentence in the narrative prose.
   Uses a dashed underline so the flag is visible without relying on
   colour alone (WCAG 1.4.1). aria-label on the span tells screen readers
   about the pending review. Decided findings (kept / scrubbed) are not
   flagged in the prose: only `pending` highlights carry this class. */
.rf-screen .rf-pii-flag {
  background: color-mix(in srgb, var(--rf-amber) 18%, transparent);
  border-bottom: 2px dashed color-mix(in srgb, var(--rf-amber) 70%, black);
  padding: 0 2px;
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .rf-screen .rf-pii-flag {
    background: #fff4d6;
    border-bottom: 2px dashed #7a4b00;
  }
}

/* ---------------------------------------------------------------------
   Task F (2026-04-18): client-review page + structured tag chips.

   The client-review page is the partner-facilitated participant review
   of the draft narrative and the structured tag record. Chips show the
   current record as key+value pairs that pair a role label with a
   plain-text value. Distinct semantics from `.citation-chip` (a four-
   state reliability tier) and `.rf-cite` (a three-state inline glyph).
--------------------------------------------------------------------- */

.rf-client-review {
  max-width: 960px;
  margin: 1.5rem auto;
  padding: 1rem 1.25rem;
  background: var(--rf-white);
  border: 1px solid var(--rf-rule);
  border-radius: 6px;
}
.rf-client-review__header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--rf-rule);
  font-size: 0.9rem;
  color: var(--rf-ink-soft);
}
.rf-client-review__narrative {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  background: var(--rf-page);
  border-radius: 4px;
}
.rf-client-review__narrative h2 {
  font-size: 1rem;
  margin: 0 0 0.5rem;
  color: var(--rf-ink-soft);
}
.rf-client-review__narrative-text {
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--rf-ink);
  background: transparent;
  margin: 0;
}

.rf-tag-review { margin-top: 1.5rem; }
.rf-tag-review__meta {
  font-size: 0.85rem;
  color: var(--rf-ink-soft);
  margin: 0.25rem 0 0.75rem;
}
.rf-tag-review__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}
.rf-tag-review__fieldset {
  border: 1px solid var(--rf-rule);
  border-radius: 4px;
  padding: 0.75rem 1rem;
}
.rf-tag-review__fieldset legend {
  font-weight: 600;
  padding: 0 0.4rem;
}
.rf-tag-review__help {
  font-size: 0.85rem;
  color: var(--rf-ink-soft);
  margin: 0.1rem 0 0.5rem;
}
.rf-tag-review__radio-group,
.rf-tag-review__checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
}
.rf-tag-review__radio,
.rf-tag-review__checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.9rem;
  padding: 0.1rem 0.2rem;
}
.rf-tag-review__label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.85rem;
  color: var(--rf-ink-soft);
}
.rf-tag-review__label input[type="text"],
.rf-tag-review__label input[type="number"],
.rf-tag-review__label select,
.rf-tag-review__text-input {
  padding: 0.35rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--rf-ink) 18%, transparent);
  border-radius: 4px;
  font-size: 0.9rem;
  min-width: 0;
}
.rf-tag-review__text-input { width: 100%; }
.rf-tag-review__dollar {
  display: grid;
  grid-template-columns: repeat(4, minmax(8rem, 1fr));
  gap: 0.6rem;
}
.rf-tag-review__label--wide { grid-column: 1 / -1; }
.rf-tag-review__entity-list {
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0;
}
.rf-tag-review__entity {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0.6rem;
  margin-bottom: 0.45rem;
}
.rf-tag-review__actions {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-start;
}
.rf-tag-review__history { margin-top: 1.25rem; }
.rf-tag-review__history-list {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
  font-size: 0.9rem;
  color: var(--rf-ink-soft);
}

.rf-tag-chips { margin-top: 1.25rem; }
.rf-tag-chips h3 {
  font-size: 0.95rem;
  color: var(--rf-ink-soft);
}
.rf-tag-chip-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.rf-tag-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  line-height: 1.3;
  background: color-mix(in srgb, var(--rf-teal) 12%, transparent);
  color: color-mix(in srgb, var(--rf-teal-dark) 80%, black);
  border: 1px solid color-mix(in srgb, var(--rf-teal) 25%, transparent);
}
.rf-tag-chip__key {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.7rem;
  font-weight: 700;
}
.rf-tag-chip__value { font-weight: 500; }

.rf-tag-chip--domain {
  background: color-mix(in srgb, var(--rf-blue) 12%, transparent);
  color: color-mix(in srgb, var(--rf-blue) 75%, black);
  border-color: color-mix(in srgb, var(--rf-blue) 25%, transparent);
}
.rf-tag-chip--sub-theme {
  background: color-mix(in srgb, var(--rf-ink) 8%, transparent);
  color: var(--rf-ink);
  border-color: color-mix(in srgb, var(--rf-ink) 18%, transparent);
}
.rf-tag-chip--food {
  background: color-mix(in srgb, var(--rf-green) 14%, transparent);
  color: color-mix(in srgb, var(--rf-green) 75%, black);
  border-color: color-mix(in srgb, var(--rf-green) 25%, transparent);
}
.rf-tag-chip--benefit {
  background: color-mix(in srgb, var(--rf-teal) 12%, transparent);
  color: color-mix(in srgb, var(--rf-teal-dark) 80%, black);
  border-color: color-mix(in srgb, var(--rf-teal) 25%, transparent);
}
.rf-tag-chip--dollar {
  background: color-mix(in srgb, var(--rf-amber) 16%, transparent);
  color: color-mix(in srgb, var(--rf-amber) 85%, black);
  border-color: color-mix(in srgb, var(--rf-amber) 30%, transparent);
}
.rf-tag-chip--entity {
  background: color-mix(in srgb, var(--rf-orange) 12%, transparent);
  color: color-mix(in srgb, var(--rf-orange) 80%, black);
  border-color: color-mix(in srgb, var(--rf-orange) 25%, transparent);
}

@supports not (color: color-mix(in srgb, red, blue)) {
  .rf-tag-chip {
    background: #e0f2f1;
    color: #0b3c38;
    border-color: #b2dfdb;
  }
  .rf-tag-chip--domain { background: #dbeafe; color: #1e3a8a; border-color: #93c5fd; }
  .rf-tag-chip--sub-theme { background: #f3f4f6; color: #111827; border-color: #e5e7eb; }
  .rf-tag-chip--food { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }
  .rf-tag-chip--benefit { background: #e0f2f1; color: #0b3c38; border-color: #b2dfdb; }
  .rf-tag-chip--dollar { background: #fef3c7; color: #78350f; border-color: #fde68a; }
  .rf-tag-chip--entity { background: #ffedd5; color: #7c2d12; border-color: #fed7aa; }
}

/* ----------------------------------------------------------------------
   Analysis detail page (bead 6y3j, 2026-04-18)
   Scoped to .rf-analysis-detail so the .rf-section / group rules here
   do not collide with the .rf-review-page workbench styles above.
   ---------------------------------------------------------------------- */

.rf-analysis-detail__cta-row {
  margin: 1rem 0 1.5rem;
}

.rf-analysis-detail .rf-analysis-group {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  background: #fff;
  border: 1px solid #e8e0d5;
  border-radius: 6px;
}

.rf-analysis-detail .rf-analysis-group > h2 {
  margin: 0 0 1rem;
  font-size: 1.3rem;
  color: #5c3a14;
  border-bottom: 2px solid #e8e0d5;
  padding-bottom: 0.5rem;
}

.rf-analysis-detail .rf-section {
  margin: 1.25rem 0;
}

.rf-analysis-detail .rf-section + .rf-section {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #f0eae0;
}

.rf-analysis-detail .rf-section > h3 {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: #3a2a18;
}

/* Each <dt>/<dd> pair is wrapped in a .rf-counts-row div so the pair
   can align as a flex row — <dl> children cannot be flex items directly. */
.rf-analysis-detail .rf-counts-table {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.rf-analysis-detail .rf-counts-row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.4rem 0.6rem;
  border-radius: 3px;
}

.rf-analysis-detail .rf-counts-row:nth-child(odd) {
  background: #faf6f0;
}

.rf-analysis-detail .rf-counts-row dt {
  flex: 1 1 auto;
  font-weight: 500;
  color: #3a2a18;
}

.rf-analysis-detail .rf-counts-row dd {
  margin: 0;
  flex: 0 0 auto;
  text-align: right;
  font-variant-numeric: tabular-nums;
  min-width: 6rem;
}

.rf-analysis-detail .rf-counts-count {
  font-weight: 600;
  color: #3a2a18;
}

.rf-analysis-detail .rf-counts-pct {
  color: #6b635a;
  margin-left: 0.4rem;
}

/* Layer 2 theme cards */
.rf-analysis-detail .rf-theme {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  background: #faf6f0;
  border-left: 3px solid #c1511f;
  border-radius: 0 4px 4px 0;
}

.rf-analysis-detail .rf-theme > h4 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  color: #3a2a18;
}

.rf-analysis-detail .rf-theme > p {
  margin: 0 0 0.75rem;
}

.rf-analysis-detail .rf-theme__quotes {
  margin: 0;
  padding-left: 1.25rem;
  list-style: disc;
}

.rf-analysis-detail .rf-theme__quotes li {
  margin: 0.3rem 0;
}

.rf-analysis-detail .rf-theme__section {
  color: #6b635a;
  font-size: 0.88rem;
  margin: 0 0.3rem;
}