/* Saved statements (2026-09-05, claim-preparation extractor-import handoff,
   Checkpoint 3). The /my-statements editor page and the compact Statements
   section on Profile and My Preparation. Reuses the rf-* form and button
   vocabulary from record-findings.css (2px accent border, 44px, card-fx
   glow via cardfx-pop), tokens only, dark mode through the shared tokens
   plus both mechanisms where a colour is set here. */

.st-main { padding-top: var(--space-5); padding-bottom: var(--space-6); }
.st-card { max-width: 1040px; margin: 0 auto; }
.st-h1 { margin: 0 0 var(--space-2); font-family: var(--font-serif); font-size: var(--text-2xl, 1.9rem); line-height: 1.2; color: var(--color-text-strong, var(--color-text)); overflow-wrap: anywhere; }
.st-lead { margin: 0 auto var(--space-4); font-size: var(--text-body); line-height: 1.55; color: var(--color-text); max-width: var(--prose-measure); }
.st-note { margin: 0 0 var(--space-3); font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-muted); }
.st-state { text-align: center; padding: var(--space-5) 0; }
.st-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0 0 var(--space-4); }
/* The way back (2026-09-07): one link when there is one destination, several
   named ones when a statement is connected to more than one claim. Wraps on a
   phone rather than pushing the heading sideways; every target keeps its 44px
   height. */
.st-back { margin: 0 0 var(--space-3); font-size: var(--text-sm); display: flex; flex-wrap: wrap; gap: var(--space-3); }
.st-back a { color: var(--color-primary); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; overflow-wrap: anywhere; min-width: 0; }
/* The same actions beside the editor's own controls, so a veteran at the
   bottom of a long statement does not have to scroll back up for them. */
.st-back-actions { margin-top: var(--space-2); }

/* The compact section (Profile, My Preparation index). */
.st-panel { border: 2px solid var(--color-accent); border-radius: var(--radius-md); background: var(--color-surface); padding: var(--space-4); margin: 0 0 var(--space-5); }
.st-panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--space-3) var(--space-4); }
.st-panel-head p { margin: var(--space-1) 0 0; font-size: var(--text-body); line-height: 1.5; color: var(--color-text); }

/* Saved statement cards. */
.st-list { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.st-item { 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); min-width: 0; }
.st-item:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.st-item-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--space-2) var(--space-4); }
.st-item-title { margin: 0; font-size: var(--text-md); line-height: 1.3; color: var(--color-text-strong, var(--color-text)); overflow-wrap: anywhere; }
.st-item-meta { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); overflow-wrap: anywhere; }
.st-excerpt { margin: var(--space-2) 0 0; font-size: var(--text-body); line-height: 1.5; color: var(--color-text); overflow-wrap: anywhere; }
.st-badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: var(--text-sm); font-weight: 700; border: 1px solid var(--color-border); color: var(--color-text); background: var(--color-bg-alt, var(--color-bg)); white-space: nowrap; }
.st-badge-review { border-color: var(--color-warning); }
.st-badge-ready { border-color: var(--color-success); }
.st-review-note { margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-3); border-left: 4px solid var(--color-warning); background: color-mix(in srgb, var(--color-warning) 10%, transparent); font-size: var(--text-sm); line-height: 1.5; color: var(--color-text); }
.st-item-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.st-connections { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); overflow-wrap: anywhere; }
.st-empty { margin: var(--space-3) 0; padding: var(--space-4); border: 1px dashed var(--color-border); border-radius: var(--radius-sm); font-size: var(--text-body); color: var(--color-text-muted); }

/* The editor. */
.st-editor { margin-top: var(--space-4); }
.st-editor .rf-form { border-top: 0; margin-top: 0; padding-top: 0; }
.st-editor textarea.rf-input { min-height: 18rem; line-height: 1.55; font-family: inherit; }
.st-counter { display: block; margin-top: var(--space-1); font-size: var(--text-sm); color: var(--color-text-muted); }
.st-counter.is-over { color: var(--color-danger); font-weight: 700; }
.st-prompts { margin: var(--space-3) 0; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); }
.st-prompts summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--color-primary); }
.st-prompts ul { margin: var(--space-2) 0 var(--space-2) var(--space-4); padding: 0; font-size: var(--text-body); line-height: 1.55; }
.st-prompts li { margin: 0 0 var(--space-1); }
.st-buddy-box { margin: var(--space-3) 0 0; padding: var(--space-3) var(--space-4); border-left: 4px solid var(--color-warning); background: color-mix(in srgb, var(--color-warning) 10%, transparent); font-size: var(--text-body); line-height: 1.5; }
.st-buddy-box strong { display: block; margin-bottom: 2px; }
.st-fieldset { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); margin: var(--space-4) 0 0; }
.st-fieldset legend { font-size: var(--text-body); font-weight: 700; padding: 0 var(--space-1); }
.st-checks { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: var(--space-2) 0; }
.st-checks label { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; font-size: var(--text-body); }
.st-checks input { width: 22px; height: 22px; accent-color: var(--color-primary); margin: 0; }
.st-saved-state { margin: var(--space-2) 0 0; font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); }
.st-saved-state.is-unsaved { color: var(--color-warning); }
.st-conflict { margin: var(--space-3) 0 0; padding: var(--space-3) var(--space-4); border: 2px solid var(--color-danger); border-radius: var(--radius-sm); background: var(--color-surface); }
.st-conflict p { margin: 0 0 var(--space-2); font-size: var(--text-body); line-height: 1.5; }
.st-conflict .st-actions { margin: 0; }

/* Print preview of ONE statement: shown only while printing, isolated.
   The paper sits INSIDE #my-statements (the .st-card), so isolation hides
   the card's siblings and then the paper's siblings. Hiding every child of
   #main-content except .st-paper hid the card the paper lives in, and every
   print came out as one blank page (fixed 2026-09-06). */
.st-paper { display: none; }
@media print {
  body.printing-statement > *:not(#main-content) { display: none !important; }
  body.printing-statement #main-content > *:not(#my-statements) { display: none !important; }
  body.printing-statement #my-statements > *:not(.st-paper) { display: none !important; }
  body.printing-statement #my-statements { border: 0; padding: 0; box-shadow: none; background: none; }
  body.printing-statement .st-paper { display: block; }
  /* Paper is black on white whatever theme the screen was in: the dark theme's
     pale text printed as a near-invisible wash on white (seen 2026-09-06). */
  body.printing-statement,
  body.printing-statement .st-paper,
  body.printing-statement .st-paper * { color: #000 !important; background: #fff !important; }
}
.st-paper h1 { font-family: var(--font-serif); font-size: 1.5rem; margin: 0 0 .5rem; }
.st-paper .st-paper-meta { margin: 0 0 .25rem; font-size: .95rem; }
.st-paper .st-paper-state { margin: .5rem 0 1rem; padding: .5rem .75rem; border: 1px solid #000; font-size: .95rem; }
.st-paper .st-paper-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1.05rem; line-height: 1.6; }
.st-paper .st-paper-foot { margin-top: 1.5rem; font-size: .85rem; }

@media (max-width: 640px) {
  .st-actions .rf-btn, .st-item-actions .rf-btn { width: 100%; }
  .st-editor textarea.rf-input { min-height: 14rem; }
}

/* The attached file (2026-09-05, Checkpoint 4): a bordered box after the
   Connect fieldset; the two states (draft text, attached file) as a small
   definition list; the file chooser; pages in the print-only paper. */
.st-file-box { margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4); border: 2px solid var(--color-accent); border-radius: var(--radius-sm); background: var(--color-surface); }
.st-file-box > strong { display: block; margin-bottom: var(--space-2); font-size: var(--text-md); }
.st-file-states { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-2); }
.st-file-states dt { font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.st-file-states dd { margin: 2px 0 0; font-size: var(--text-body); color: var(--color-text); overflow-wrap: anywhere; }
.st-file-chooser { margin-top: var(--space-3); display: grid; gap: var(--space-2); }
.st-file-chooser input[type="file"] { min-height: 44px; padding: var(--space-2); font-size: 16px; }
.st-paper .st-paper-page { display: block; width: 100%; max-width: 8.5in; margin: 0 auto .5in; break-inside: avoid; page-break-inside: avoid; }
@media (max-width: 640px) { .st-file-states { grid-template-columns: 1fr; } }
.st-file-status { margin: var(--space-2) 0 0; min-height: 1.2em; font-size: var(--text-sm); line-height: 1.5; color: var(--color-text); }
.st-file-chooser[hidden] { display: none; }

/* Upload mode (2026-09-05, statement upload and packet handoff, R01-R09):
   files first, then one full-width card per queued file. Same rf-* button
   and field vocabulary as the editor; tokens only; stacks at 640px. */
.st-upload { margin-top: var(--space-3); }
.st-upload-chooser { border: 2px solid var(--color-accent); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); background: var(--color-surface); }
.st-upload-chooser input[type="file"] { min-height: 44px; padding: var(--space-2); font-size: 16px; }
.st-upload-rows { display: grid; gap: var(--space-3); margin: var(--space-4) 0; }
.st-upload-row { border: 2px solid var(--color-accent); border-radius: var(--radius-sm); background: var(--color-surface); padding: var(--space-4); min-width: 0; }
.st-upload-row.is-saved { border-color: var(--color-success, var(--color-accent)); }
.st-upload-row .rf-form-grid { margin-top: var(--space-2); }
.st-upload-row input[type="file"] { min-height: 44px; font-size: 16px; }
.st-row-connections { margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.st-upload-done { border: 2px solid var(--color-accent); border-radius: var(--radius-sm); background: var(--color-surface); padding: var(--space-4); }
.st-upload-done h3 { margin: 0 0 var(--space-2); font-size: var(--text-md); }
.st-write-done { margin-top: var(--space-3); }
@media (max-width: 640px) {
  .st-upload-row .rf-btn, .st-upload-done .rf-btn { width: 100%; }
  .st-upload-rows { gap: var(--space-4); }
}