/* Record findings (2026-09-03, Section 3B records-and-codes package).
   One component, four hosts: the tailored Help journey's condition phase,
   the first claim step, My Preparation, and the ICD lookup. Tokens only;
   BUTTON LAW on every action (2px accent border, hover to primary, 44px);
   16px inputs so phones do not zoom; dark mode through both mechanisms. */

.rf-panel {
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-5) var(--space-5) var(--space-4);
  margin: var(--space-3) 0 var(--space-5);
}
.rf-panel-compact { margin: 0 auto var(--space-5); max-width: 880px; }
.rf-eyebrow {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.rf-panel-h {
  margin: var(--space-1) 0 var(--space-2);
  font-size: var(--text-lg);
  line-height: 1.25;
  color: var(--color-text-strong, var(--color-text));
}
.rf-panel-lede, .rf-form-lede {
  margin: 0 0 var(--space-4);
  font-size: var(--text-body);
  line-height: 1.55;
  color: var(--color-text);
}
.rf-routes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}
.rf-route {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt, var(--color-bg));
  padding: var(--space-4);
  min-width: 0;
}
.rf-route strong { font-size: var(--text-body); color: var(--color-text-strong, var(--color-text)); }
.rf-route p { flex: 1; margin: var(--space-2) 0 var(--space-3); font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-muted); }
.rf-route .rf-btn { width: 100%; }

.rf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-bg);
  font: inherit;
  font-size: var(--text-body);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s, transform .05s;
}
.rf-btn:hover, .rf-btn:focus-visible { border-color: var(--color-primary); text-decoration: none; }
.rf-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.rf-btn:active { transform: translateY(1px); }
.rf-btn:disabled { opacity: .55; cursor: not-allowed; }
.rf-btn-secondary, .rf-btn-quiet { background: var(--color-surface); color: var(--color-primary); }
.rf-btn-quiet { font-weight: 600; font-size: var(--text-sm); min-height: 44px; padding: var(--space-1) var(--space-3); }
.rf-btn-danger { color: var(--color-danger); }

.rf-flow-note {
  margin: 0 0 var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-left: 4px solid var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--color-text);
}

/* Form */
.rf-form { border-top: 1px solid var(--color-border); margin-top: var(--space-4); padding-top: var(--space-4); }
.rf-form-h { margin: 0 0 var(--space-1); font-size: var(--text-lg); color: var(--color-text-strong, var(--color-text)); }
.rf-form-h:focus { outline: none; }
.rf-signed-out {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-left: 4px solid var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  font-size: var(--text-body);
  line-height: 1.5;
}
.rf-signed-out a { color: var(--color-primary); font-weight: 600; }
.rf-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.rf-field { min-width: 0; }
.rf-field-wide { grid-column: 1 / -1; }
.rf-field-label { display: block; font-size: var(--text-body); font-weight: 600; margin-bottom: var(--space-1); color: var(--color-text); }
.rf-input, .rf-select {
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  font: inherit;
  font-size: var(--text-body);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
}
textarea.rf-input { resize: vertical; line-height: 1.5; }
.rf-input:focus, .rf-select:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; border-color: var(--color-primary); }
.rf-input[aria-invalid="true"], .rf-select[aria-invalid="true"] { border-color: var(--color-danger); }
.rf-input:disabled { opacity: .6; }
.rf-hint { display: block; margin-top: var(--space-1); font-size: var(--text-sm); line-height: 1.45; color: var(--color-text-muted); }
/* The orphans band and the single-finding gate (2026-09-09). Danger colour on
   both, because what they describe is a finding that will not be used. */
.rf-orphans { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border: 3px solid var(--color-danger);
  border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-danger) 7%, transparent); line-height: 1.5; }
.rf-orphans-h { margin: 0 0 var(--space-1); font-size: 1.15rem; color: var(--color-text); }
.rf-orphans p { margin: 0 0 var(--space-2); }
.rf-orphans-row { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-2); margin: 0 0 var(--space-2); }
.rf-orphans-row .rf-field-label { flex: 1 1 100%; margin: 0; }
.rf-orphans-row .rf-select { flex: 1 1 260px; min-width: 0; }
.rf-orphans-row .rf-btn { flex: 0 0 auto; }
.rf-gate { margin: var(--space-2) 0 0; padding: var(--space-3); border: 3px solid var(--color-danger);
  border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-danger) 7%, transparent); line-height: 1.5; }
.rf-gate-h { margin: 0 0 var(--space-1); font-weight: 700; }
.rf-gate-h:focus { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.rf-gate p { margin: 0 0 var(--space-2); }
.rf-field-error { display: block; margin-top: var(--space-1); font-size: var(--text-sm); font-weight: 600; color: var(--color-danger); }
.rf-check { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-height: 44px; }
.rf-check input { width: 22px; height: 22px; accent-color: var(--color-primary); margin: 0; flex: 0 0 auto; }
.rf-check label { font-size: var(--text-body); font-weight: 600; color: var(--color-text); }
.rf-check .rf-hint { flex-basis: 100%; margin-top: 0; }
.rf-check-inline { margin-top: var(--space-1); }
.rf-check-review { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg-alt, var(--color-bg)); }
.rf-form-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.rf-form-status, .rf-status, .rf-row-status { margin: var(--space-2) 0 0; min-height: 1.3em; font-size: var(--text-body); line-height: 1.5; color: var(--color-text); }
.rf-status-ok { color: var(--color-success); font-weight: 600; }
.rf-status-error { color: var(--color-danger); font-weight: 600; }
.rf-status-link { color: var(--color-primary); font-weight: 600; margin-left: var(--space-1); }
/* "Record another entry" is an action, not a destination, so it is a real
   button; it is styled as the sibling links are so the row reads as one set
   of next steps (2026-09-04). 44px min target, same as every other control. */
.rf-status-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--color-primary); cursor: pointer; text-decoration: underline; }
.rf-status-btn:hover { text-decoration: none; }
.rf-status-btn:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

/* Conflict: the other version, shown in full, with the two explicit choices */
.rf-conflict { margin: var(--space-4) 0 0; padding: var(--space-4); border: 2px solid var(--color-warning); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-warning) 8%, transparent); }
.rf-conflict-h { margin: 0 0 var(--space-2); font-size: var(--text-md); color: var(--color-text-strong, var(--color-text)); }
.rf-conflict-h:focus { outline: none; }
.rf-conflict-dl { margin: 0 0 var(--space-3); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-4); }
.rf-conflict-dl dt { font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.rf-conflict-dl dd { margin: 2px 0 0; font-size: var(--text-body); color: var(--color-text); white-space: pre-wrap; overflow-wrap: anywhere; }

/* List */
.rf-list-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); margin: var(--space-5) 0 var(--space-2); }
.rf-list-h { margin: 0; font-size: var(--text-md); color: var(--color-text-strong, var(--color-text)); }
.rf-count { font-size: var(--text-sm); color: var(--color-text-muted); }
.rf-note { margin: 0 0 var(--space-2); font-size: var(--text-body); line-height: 1.5; color: var(--color-text-muted); }
.rf-note-error { color: var(--color-danger); }
.rf-group { margin: 0 0 var(--space-4); }
.rf-group-h { margin: 0 0 var(--space-2); font-size: var(--text-body); font-weight: 700; color: var(--color-text); overflow-wrap: anywhere; }
.rf-finding {
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  padding: var(--space-4);
  margin: 0 0 var(--space-3);
}
.rf-finding-main { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); }
.rf-cell { min-width: 0; overflow-wrap: anywhere; }
.rf-label { display: block; margin-bottom: 2px; font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.rf-text { display: block; font-size: var(--text-body); color: var(--color-text-strong, var(--color-text)); white-space: pre-wrap; }
.rf-code { font-weight: 700; color: var(--color-primary); font-size: var(--text-body); }
.rf-meta, .rf-source { font-size: var(--text-sm); line-height: 1.5; color: var(--color-text); white-space: pre-wrap; }
.rf-meta { color: var(--color-text-muted); }
.rf-placement { font-size: var(--text-body); font-weight: 600; color: var(--color-text); }
.rf-review { margin-top: var(--space-2); font-size: var(--text-sm); font-weight: 700; }
.rf-review-ok { color: var(--color-success); }
.rf-review-needs { color: var(--color-warning); }
.rf-followup { margin: var(--space-3) 0 0; font-size: var(--text-body); line-height: 1.5; color: var(--color-text); white-space: pre-wrap; }
.rf-finding-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.rf-place { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--color-border); }

/* Dark mode, both mechanisms. */
:root[data-theme="dark"] .rf-btn-secondary,
:root[data-theme="dark"] .rf-btn-quiet { background: var(--color-surface); }
:root[data-theme="dark"] .rf-input,
:root[data-theme="dark"] .rf-select { background: var(--color-bg); color: var(--color-text); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rf-btn-secondary,
  :root:not([data-theme="light"]) .rf-btn-quiet { background: var(--color-surface); }
  :root:not([data-theme="light"]) .rf-input,
  :root:not([data-theme="light"]) .rf-select { background: var(--color-bg); color: var(--color-text); }
}

@media (max-width: 640px) {
  .rf-panel { padding: var(--space-4) var(--space-3); }
  .rf-routes, .rf-form-grid, .rf-finding-main, .rf-conflict-dl { grid-template-columns: 1fr; }
  .rf-form-actions .rf-btn { width: 100%; }
  .rf-finding-actions .rf-btn { flex: 1 1 45%; }
}

/* Private suggestions and carry-forward (2026-09-05, FR-09 / FR-10). A
   combobox over the veteran's own saved values: 44px options, visible
   focus, at most 10 shown; the carried-value note is a bordered line with
   its own Clear button. Dark mode through both mechanisms. */
.rf-combo { position: relative; }
.rf-combo-list {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 2px);
  margin: 0; padding: var(--space-1) 0; list-style: none; max-height: 22rem; overflow-y: auto;
  border: 2px solid var(--color-accent); border-radius: var(--radius-sm); background: var(--color-surface); box-shadow: var(--shadow-md);
}
.rf-combo-list[hidden] { display: none; }
.rf-combo-opt { display: flex; align-items: center; min-height: 44px; padding: var(--space-2) var(--space-3); font-size: var(--text-body); color: var(--color-text); cursor: pointer; overflow-wrap: anywhere; }
.rf-combo-opt[aria-selected="true"], .rf-combo-opt:hover { background: color-mix(in srgb, var(--color-accent) 14%, transparent); }
.rf-combo-note { display: block; margin-top: var(--space-1); font-size: var(--text-sm); color: var(--color-text-muted); }
.rf-carried { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-3); border-left: 4px solid var(--color-accent); background: color-mix(in srgb, var(--color-accent) 10%, transparent); font-size: var(--text-sm); color: var(--color-text); }
.rf-carried .rf-btn-quiet { min-height: 36px; padding: 0 var(--space-3); }
.rf-carry-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-4); margin-top: var(--space-3); }
:root[data-theme="dark"] .rf-combo-list { background: var(--color-surface); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rf-combo-list { background: var(--color-surface); } }
@media (max-width: 640px) { .rf-carry-row { grid-template-columns: 1fr; } }

/* Bulk source review (2026-09-07, post-SI-2 handoff, part B). A tick beside
   each finding that still needs one, and a sticky bar holding the count and
   the action, so confirming a hundred imported findings is one press instead
   of a hundred trips through the editor.

   `position: sticky` keeps the count and the button reachable while the
   veteran scrolls the list. It sits at the TOP of the list rather than
   floating over the bottom of the viewport, so on a phone it never covers a
   row the veteran is reading, and it takes its own height in the flow rather
   than overlapping content. */
.rf-review-bar {
  position: sticky; top: 0; z-index: 20;
  margin: 0 0 var(--space-3); padding: var(--space-3);
  border: 2px solid var(--color-accent); border-radius: var(--radius-sm);
  background: var(--color-surface); box-shadow: var(--shadow-sm);
}
.rf-review-bar-line { margin: 0 0 var(--space-2); font-size: var(--text-body); font-weight: 700; color: var(--color-text); }
.rf-review-bar-btns { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rf-review-bar-note { margin: var(--space-2) 0 0; font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-muted); }
.rf-review-bar .rf-note { margin: var(--space-2) 0 0; }
.rf-review-bar .rf-note:empty { display: none; }
/* A 44px target with the label inside it, so the whole line is clickable and
   the checkbox is reachable by keyboard with a visible focus ring. */
.rf-review-pick {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: 44px; margin-top: var(--space-2);
  font-size: var(--text-sm); font-weight: 600; color: var(--color-text); cursor: pointer;
}
.rf-review-pick input { width: 22px; height: 22px; accent-color: var(--color-primary); cursor: pointer; }
.rf-review-pick input:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
:root[data-theme="dark"] .rf-review-bar { background: var(--color-surface); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rf-review-bar { background: var(--color-surface); } }
@media (max-width: 640px) {
  .rf-review-bar-btns .rf-btn { width: 100%; }
}

/* Browsing a long list (Phase 2, P2-1, 2026-09-08). An account with 352
   findings loaded fifty tall cards into one column, so confirming a source
   meant scrolling the whole document between the row and the sticky bar that
   acts on it. Three plain boxes narrow what is shown, ten rows at a time.
   The boxes sit BELOW the sticky review bar in the flow and are not sticky
   themselves: two stacked sticky blocks on a phone leave almost no room for
   the list they are filtering. */
.rf-browse {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3);
  margin: 0 0 var(--space-4); padding: var(--space-3);
  border: 1px solid var(--color-accent); border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.rf-browse-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 200px; }
.rf-browse-field label { font-size: var(--text-sm); font-weight: 700; color: var(--color-text); }
.rf-browse-field select, .rf-browse-field input {
  width: 100%; min-height: 44px; padding: 6px 8px; font: inherit; font-size: 16px;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-bg); color: var(--color-text);
}
.rf-browse-field select:focus-visible, .rf-browse-field input:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.rf-browse-count { flex: 1 1 100%; margin: 0; font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-muted); }
.rf-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin: var(--space-4) 0; }
.rf-pager-at { font-size: var(--text-body); color: var(--color-text); }
/* What an extractor knew about an imported finding, folded away. Whether it
   has been checked against its source stays on the summary line, because
   that is what the review action is about. */
.rf-import-more { margin: var(--space-2) 0 0; }
.rf-import-more summary { min-height: 32px; display: inline-flex; align-items: center; font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); cursor: pointer; overflow-wrap: anywhere; }
.rf-import-more summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.rf-import-more .rf-import { margin: var(--space-2) 0 0; }
@media (max-width: 640px) {
  .rf-browse-field { flex: 1 1 100%; }
  .rf-pager { justify-content: center; }
  .rf-pager-at { order: -1; flex: 1 1 100%; text-align: center; }
  .rf-pager .rf-btn { flex: 1 1 40%; }
}