/* ==================================================================
   file-engagement.css - the Applicant File card "How this application
   was completed", on the Application destination's effective view
   between the readiness line and the Effective application.

   Loads AFTER threshold-tokens.css, threshold-chrome.css (.cc-pill,
   .cc-btn), th-grid.css, all-files.css and in-progress.css. Consumed
   unchanged: the error list and its marker from in-progress.css
   (.ip-failures, .ip-failure, .ip-failure-label, .ip-failure-count,
   .ip-repeated, .ip-unknown) and the read-state block from
   all-files.css (.af-app-state*). New classes are under one prefix, fe-.
   .fe-more is also used by the In progress draft page's error list,
   which shares this card's vocabulary.

   TOKENS: no `--token:` declaration appears in this file (ADR-0035).
   Every colour resolves through --th-*; the only literals are sizes.
   No tone anywhere: no dot, pill, colour or icon marks a value as good
   or bad, and nothing here is risk, warn or ok ink.

   Light and dark are the same rules: every value is a token that the
   theme layer redefines. Narrow rules are container queries on
   .af-file, like all-files.css, converted to @media one-for-one at lift.
   ================================================================== */

/* Placement: the readiness line's measure (full width, 24px gutters). */
.fe-wrap { padding: 12px 24px 0; }

.fe-card {
    position: relative;
    border: 1px solid var(--th-line);
    border-radius: var(--th-radius-5);
    background: var(--th-paper-sunk);
}
.fe-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fe-title {
    margin: 0;
    padding: 10px 16px 0;
    font-family: var(--th-font-serif);
    font-weight: 600;
    font-size: var(--th-size-15);
    color: var(--th-ink);
}
.fe-title:focus { outline: none; }
.fe-title:focus-visible { outline: 2px solid var(--th-advant); outline-offset: 2px; border-radius: var(--th-radius-2); }

/* Three facts side by side, label above value. Values are tabular so a
   count or a duration sits in the same place on every file. */
.fe-facts { display: flex; flex-wrap: wrap; gap: 6px 36px; margin: 0; padding: 8px 16px 10px; }
.fe-fact { min-width: 0; }
.fe-fact dt { font-size: var(--th-size-12); color: var(--th-ink-2); line-height: 1.4; font-weight: 400; }
.fe-fact dd { margin: 1px 0 0; font-size: var(--th-size-15); color: var(--th-ink); line-height: 1.4; font-variant-numeric: tabular-nums; }
.fe-fact dd .ip-unknown { font-size: var(--th-size-14); }
/* All Files contrast rule B2 (../all-files/README.md, open item 13): informational text reaches 4.5:1
   in both themes, so an unknown value is ink-2 here, still apart from a real value's ink. */
.fe-card .ip-unknown { color: var(--th-ink-2); }

/* Errors: only when any were recorded. Recorded history, never an open
   problem: neutral ink, the word "Repeated" at three or more, and the
   sentence that the form accepted every answer at submission. */
.fe-errors { border-top: 1px solid var(--th-line); padding: 9px 16px 10px; }
.fe-errors-label { margin: 0 0 4px; font-size: var(--th-size-12); color: var(--th-ink-2); }
.fe-errors .ip-failure-label { font-size: var(--th-size-14); overflow-wrap: anywhere; min-width: 0; }
.fe-errors-note { margin: 6px 0 0; font-size: var(--th-size-12); color: var(--th-ink-2); line-height: 1.45; }
/* A disclosure, so it carries a chevron: plain ghost text alone reads as a row label. */
.fe-more { margin-top: 4px; margin-left: -8px; }
/* .cc-btn.is-ghost makes the focus border transparent and .cc-btn:focus-visible drops the outline,
   which leaves only a faint shadow; the disclosure keeps a visible ring. */
.cc-btn.fe-more:focus-visible { outline: 2px solid var(--th-advant); outline-offset: 2px; }
.fe-more + .fe-errors-note { margin-top: 10px; }
.fe-more-icon { color: var(--th-ink-2); transition: transform 120ms ease; }
.fe-more[aria-expanded="true"] .fe-more-icon { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .fe-more-icon { transition: none; } }
/* Past the fifth, while collapsed: .ip-failure is display:flex, which would beat the UA [hidden] rule. */
.ip-failures > .ip-failure[hidden] { display: none; }

.fe-note { margin: 0; padding: 0 16px 11px; font-size: var(--th-size-12); color: var(--th-ink-2); line-height: 1.45; max-width: 760px; text-wrap: pretty; }
.fe-errors + .fe-note { padding-top: 0; }

/* No activity recorded, pending, unavailable: the title stays; one
   plain statement replaces the facts. Every measurement absent. */
.fe-state { margin: 0; padding: 6px 16px 12px; font-size: var(--th-size-13); color: var(--th-ink-2); line-height: 1.5; }
.fe-state-head { display: block; margin-bottom: 1px; font-size: var(--th-size-14); font-weight: 600; color: var(--th-ink); }

/* Loading: three quiet bars where the facts go and one where the note goes, so the
   answers below move little when the facts arrive. No spinner, no shimmer. */
.fe-skel { display: flex; flex-wrap: wrap; gap: 8px 36px; padding: 10px 16px 10px; }
.fe-skel-line { padding: 0 16px 13px; }
.fe-skel-f { width: 360px; max-width: 100%; height: 8px; }
.fe-skel-fact { display: flex; flex-direction: column; gap: 6px; }
.fe-skel-bar { display: block; height: 10px; border-radius: var(--th-radius-2); background: var(--th-paper-2); }
.fe-skel-a { width: 56px; }
.fe-skel-b { width: 24px; }
.fe-skel-c { width: 70px; }
.fe-skel-d { width: 120px; }
.fe-skel-e { width: 170px; }

/* Did not load, rate limited: the Applicant File read-state block,
   inside the card. */
.fe-card .af-app-state { margin: 6px 16px 12px; padding: 12px 14px; }

/* ------------------------------------------------------------------
   Narrow (400): the readiness line's 16px gutters; Devices drops under
   Sessions and Active time by wrapping.
   ------------------------------------------------------------------ */
@media (max-width: 952px) {
    .fe-wrap { padding: 12px 16px 0; }
    .fe-title, .fe-facts, .fe-errors, .fe-state, .fe-skel, .fe-skel-line { padding-left: 14px; padding-right: 14px; }
    .fe-note { padding-left: 14px; padding-right: 14px; }
    .fe-facts, .fe-skel { gap: 8px 28px; }
    .fe-card .af-app-state { margin: 6px 14px 12px; }
    .fe-card .af-app-state-body, .fe-card .af-app-state-actions { margin-left: 0; }
}