/* Lifted verbatim from docs/design-canon/system-application-journey/threshold/system-application.css
   (the Threshold blocks; the "Form builder" block lives in FormEditor form-editor.css and the
   "Rules editor" block in rules-editor.css). Loaded after all-files.css, application-fee.css and
   appdef.css. Change the canon first, then re-lift. */

/* System Application journey - Threshold atoms, namespace th-sa-*. Every colour is a shipped token:
   --th-* on Threshold pages, --cx-* inside the form builder. Literals are sizes and radii only.
   Lifts (see README "Files"): the Threshold blocks into
   src/Advant.Crossroads.Threshold/wwwroot/css/threshold-system-applications.css, loaded after
   all-files.css, application-fee.css and appdef.css; the "Form builder" block into
   src/Advant.Crossroads.FormEditor/wwwroot/form-editor.css; the "Rules editor" block into
   rules-editor.css beside the field picker. Everything else on these pages is shipped: the cc-*
   chrome, ThresholdGrid (th-grid-*), the All Files list and file shell (af-*), the definition page
   (apd-*, dec-*), the fee panel (rd-*), ThresholdDialog (th-modal, th-fb) and the builder (fb-*).

   Page roots are size containers, so the tablet reflow follows the pane, not the viewport. */

/* ---------------------------------------------------------------- shared */
.th-sa-page { container-type: inline-size; container-name: th-sa; position: relative; }
.th-sa-grow { flex: 1 1 auto; }
.th-sa-gutter { padding: 0 24px 28px; display: flex; flex-direction: column; gap: 12px; }
.th-sa-fbi { display: inline-block; flex: none; vertical-align: -2px; }
.th-sa-code { font-family: var(--th-font-mono); font-size: 12px; color: var(--th-ink); letter-spacing: 0.01em; }
.th-sa-reason { font-family: var(--th-font-mono); font-size: 11.5px; padding: 1px 5px; border-radius: var(--th-radius-2); background: var(--th-paper-2); border: 1px solid var(--th-line); color: var(--th-ink-2); overflow-wrap: anywhere; }
.th-sa-link { color: var(--th-advant); text-decoration: none; font-size: var(--th-size-13); }
.th-sa-link:hover { color: var(--th-advant-deep); text-decoration: underline; }
.th-sa-link:focus-visible { outline: 2px solid var(--th-advant); outline-offset: 2px; border-radius: 2px; }

/* A delivery pill (staff words): the shipped cc-pill; the word carries the status, the dot decorates. */
.th-sa-dchip { flex: none; }
.th-sa-dchip { gap: 5px; }

/* Facts: a definition list of label / value pairs used by every card. */
.th-sa-facts { margin: 0; display: grid; grid-template-columns: minmax(110px, 150px) minmax(0, 1fr); gap: 6px 14px; font-size: var(--th-size-13); }
.th-sa-facts > dt { color: var(--th-ink-2); font-size: 12px; line-height: 1.5; }
.th-sa-facts > dd { margin: 0; color: var(--th-ink); line-height: 1.5; overflow-wrap: break-word; min-width: 0; }
.th-sa-fact-sub { display: block; font-size: 11.5px; color: var(--th-ink-2); }
.th-sa-side .th-sa-facts { grid-template-columns: 84px minmax(0, 1fr); }

/* Cards and the detail grid (system office detail, campus arriving panel). */
.th-sa-detail { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; padding: 16px 24px 28px; align-items: start; }
.th-sa-main, .th-sa-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@container th-sa (max-width: 1060px) {
  .th-sa-detail { grid-template-columns: minmax(0, 1fr); }
  .th-sa-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .th-sa-side > .rd-fee { grid-column: 1 / -1; }
}
.th-sa-card { border: 1px solid var(--th-line); border-radius: var(--th-radius-5); background: var(--th-paper-sunk); padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.th-sa-card-title { margin: 0; font-family: var(--th-font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--th-ink-2); }
.th-sa-card-note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--th-ink-2); display: flex; gap: 6px; align-items: flex-start; }
.th-sa-card-note > svg { margin-top: 2px; flex: none; }
.th-sa-card-text { margin: 0; font-size: var(--th-size-13); line-height: 1.5; color: var(--th-ink); }
.th-sa-section-note { margin: 0 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--th-ink-2); }
.th-sa-answers { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.th-sa-answers > .th-sa-card-title { margin-bottom: -2px; }
.th-sa-answers .af-section { margin: 0; }
.th-sa-unanswered { color: var(--th-ink-3); font-style: italic; }

/* The banner under the summary: what this state means, in one sentence. */
.th-sa-banner { margin: 12px 24px 0; display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: var(--th-radius-5); border: 1px solid var(--th-line-2); background: var(--th-paper-2); color: var(--th-ink); font-size: var(--th-size-13); line-height: 1.5; }
.th-sa-banner > svg { margin-top: 2px; flex: none; color: var(--th-ink-3); }
.th-sa-banner.is-preparing { border-color: var(--th-advant); background: var(--th-advant-soft); }
.th-sa-banner.is-preparing > svg { color: var(--th-advant-deep); }
.th-sa-banner.is-returned { border-color: var(--th-warn); background: var(--th-warn-soft); }
.th-sa-banner.is-returned > svg { color: var(--th-warn-ink); }

/* ---------------------------------------------------------------- T01-T03 Shared applications list */
.th-sa-viewhelp { display: flex; gap: 8px; align-items: flex-start; margin: 2px 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--th-ink-2); max-width: 90ch; }
.th-sa-viewhelp > svg { margin-top: 3px; flex: none; color: var(--th-ink-3); }
.th-sa-view-count { margin-left: 7px; font-family: var(--th-font-mono); font-size: 11px; font-variant-numeric: tabular-nums; color: var(--th-ink-3); }
.th-sa-view-count.is-attention { color: var(--th-risk-ink); font-weight: 600; }
.th-sa-nav-count { color: var(--th-risk-ink); font-weight: 600; }
.cc-nav-child.active .th-sa-nav-count { color: var(--th-risk-ink); }

.th-sa-list .th-sa-col-app { width: 170px; }
.th-sa-list .th-sa-col-status { width: 176px; }
.th-sa-list .th-sa-col-sub { width: 150px; }
.th-sa-list .th-sa-col-name { width: 220px; }
.th-sa-list td { vertical-align: top; }
.th-sa-status { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.th-sa-status .af-attn { white-space: normal; }
.th-sa-camps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.th-sa-camps > li { display: grid; grid-template-columns: 124px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 22px; }
.th-sa-camps > li > .th-sa-dchip { justify-self: start; }
.th-sa-camps-name { font-size: var(--th-size-13); color: var(--th-ink); line-height: 1.35; min-width: 0; }
.th-sa-camps-name.is-plain { grid-column: 1 / -1; color: var(--th-ink-2); }
.th-sa-none { font-size: var(--th-size-13); color: var(--th-ink-3); }
.th-sa-when { display: block; font-size: var(--th-size-13); color: var(--th-ink); white-space: nowrap; }
.th-sa-when.is-dim { color: var(--th-ink-3); }
.th-sa-when-sub { display: block; font-size: 11.5px; color: var(--th-ink-3); white-space: nowrap; }
.th-sa-fold { display: none; }
@container th-sa (max-width: 1040px) {
  .th-sa-list .th-sa-c-app { display: none; }
  .th-sa-fold { display: block; }
  .th-sa-list .th-sa-col-name { width: 190px; }
  .th-sa-list .th-sa-col-status { width: 150px; }
  .th-sa-list .th-sa-col-sub { width: 112px; }
  .th-sa-when { white-space: normal; }
  .th-sa-camps > li { grid-template-columns: 116px minmax(0, 1fr); gap: 6px; }
}

/* ---------------------------------------------------------------- T04-T10 detail */
.th-sa-camplist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.th-sa-camp { padding: 12px 0; border-top: 1px solid var(--th-line-soft); display: flex; flex-direction: column; gap: 8px; }
.th-sa-camp:first-child { border-top: 0; padding-top: 2px; }
.th-sa-camp:last-child { padding-bottom: 0; }
.th-sa-camp.is-failed { box-shadow: inset 3px 0 0 var(--th-risk); padding-left: 12px; margin-left: -16px; padding-right: 0; border-radius: 0; }
.th-sa-camp-head { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; min-width: 0; }
.th-sa-camp-title { margin: 0; font-family: var(--th-font-serif); font-size: var(--th-size-15); font-weight: 500; color: var(--th-ink); }
.th-sa-camp-term { font-size: 12px; color: var(--th-ink-2); }
.th-sa-camp-term::before { content: "·"; margin-right: 8px; color: var(--th-ink-4); }
.th-sa-camp .th-sa-facts { padding-left: 0; }
.th-sa-camp-note { margin: 0; display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--th-ok-ink); }
.th-sa-retry { flex: none; }
.th-sa-retry-off { display: inline-flex; gap: 5px; align-items: center; font-size: 12px; color: var(--th-ink-2); }
.th-sa-oneline.af-app-state { padding: 12px 14px; border: 1px solid var(--th-line); border-radius: var(--th-radius-5); background: var(--th-paper-sunk); }
.th-sa-oneline .af-app-state-head { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: var(--th-size-13); font-weight: 500; color: var(--th-ink); line-height: 1.5; }
.th-sa-oneline .af-app-state-head > svg { margin-top: 2px; flex: none; color: var(--th-ink-3); }
.th-sa-fee-owner { margin: -2px 0 2px; font-size: 12px; line-height: 1.5; color: var(--th-ink-2); }
.th-sa-side .rd-fee.th-sa-card { gap: 12px; }
.th-sa-fee-facts { grid-template-columns: 120px minmax(0, 1fr); }
.th-sa-fee-refresh { align-self: flex-start; }
.rd-unavail > svg { flex: none; }

/* ---------------------------------------------------------------- T11, T16 definition tab */
.th-sa-appdef { container-type: inline-size; container-name: th-sa-def; }
.th-sa-tab { display: flex; flex-direction: column; gap: 16px; }
/* Amends the shipped tab strip: with a ninth tab it outgrows a tablet pane, so it scrolls inside itself
   (appdef.css already does this below 760px) instead of widening the page. */
.th-sa-appdef .apd-tabs { overflow-x: auto; scrollbar-width: thin; }
.th-sa-appdef .apd-tab { flex: none; white-space: nowrap; }
.th-sa-panel .apd-panel-head { flex-wrap: wrap; }
.th-sa-panel .dec-saved { white-space: normal; }
.th-sa-foot { font-family: var(--th-f-serif); font-style: italic; color: var(--th-ink-2); }
.th-sa-tabfoot { margin: 0; display: flex; gap: 6px; align-items: flex-start; font-size: 12px; line-height: 1.5; color: var(--th-ink-2); }
.th-sa-tabfoot > svg { margin-top: 2px; flex: none; }
.th-sa-roster td, .th-sa-doctypes td { vertical-align: top; }
.th-sa-roster-name { display: inline-flex; gap: 8px; align-items: center; font-weight: 500; color: var(--th-ink); }
.th-sa-roster-name > svg { color: var(--th-ink-3); }
.th-sa-roster-hint { display: block; margin-top: 4px; font-size: 12px; line-height: 1.45; color: var(--th-ink-2); max-width: 46ch; }
/* A setting row: label and help on the left, the control on the right; one column on a narrow pane. */
.th-sa-set { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 300px); gap: 6px 24px; align-items: center; padding: 12px 0; border-top: 1px solid var(--th-line-soft); }
.th-sa-set:first-child { border-top: 0; padding-top: 2px; }
.th-sa-set:last-child { padding-bottom: 0; }
.th-sa-set.rd-field-changed { padding-left: 12px; margin-left: -12px; }
.th-sa-set-lbl { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.th-sa-set-lbl .t { font-size: var(--th-size-13); font-weight: 500; color: var(--th-ink); }
.th-sa-set-lbl .s { font-size: 12px; line-height: 1.45; color: var(--th-ink-2); }
.th-sa-set-ctl { display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-width: 0; }
.th-sa-num { width: 96px; font-family: var(--th-font-mono); }
.th-sa-date { width: 100%; max-width: 260px; font-family: var(--th-font-mono); font-size: 12.5px; }
.th-sa-readval { font-size: var(--th-size-13); color: var(--th-ink); font-family: var(--th-font-mono); }
@container th-sa-def (max-width: 720px) {
  .th-sa-set { grid-template-columns: minmax(0, 1fr); }
}
.th-sa-feeline { display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; font-size: var(--th-size-13); color: var(--th-ink); }
.th-sa-status-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.th-sa-status-line { font-size: var(--th-size-13); color: var(--th-ink); line-height: 1.5; min-width: 0; flex: 1 1 320px; }
.th-sa-meaning { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--th-ink-2); max-width: 90ch; }
.th-sa-help { margin: 0 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--th-ink-2); max-width: 90ch; }
.th-sa-help.th-sa-pad { margin: 0; padding: 14px 18px; }
.th-sa-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.th-sa-checks > li { display: flex; align-items: flex-start; gap: 10px; }
.th-sa-checks input { margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--th-advant); flex: none; }
.th-sa-checks label { display: flex; flex-direction: column; gap: 1px; cursor: pointer; }
.th-sa-checks .t { font-size: var(--th-size-13); font-weight: 500; color: var(--th-ink); }
.th-sa-checks .s { font-size: 12px; color: var(--th-ink-2); }
.th-sa-srctype { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; font-weight: 500; color: var(--th-ink); }
.th-sa-totype { display: flex; gap: 6px 12px; align-items: center; flex-wrap: wrap; }
.th-sa-matched { display: inline-flex; gap: 6px; align-items: baseline; color: var(--th-ink); }
.th-sa-matched > svg { color: var(--th-ink-3); align-self: center; }
.th-sa-matched .s { font-size: 12px; color: var(--th-ink-2); }
.th-sa-select { width: 260px; max-width: 100%; }
.th-sa-unclassified { font-size: 12px; color: var(--th-ink-2); font-style: italic; }
.th-sa-doctypes th:first-child { width: 42%; }

/* ---------------------------------------------------------------- T12 arriving rows in All Files */
.th-grid-row.th-sa-arriving > td { background: var(--th-paper-2); color: var(--th-ink-2); }
.th-grid-row.th-sa-arriving .th-grid-link.pri { color: var(--th-ink-2); font-weight: 500; }
.th-grid-row.th-sa-arriving:hover > td { background: var(--th-paper-3); }
.th-sa-arr-line { display: inline-flex !important; gap: 6px; align-items: center; flex-wrap: wrap; }
.th-sa-arr-pill { gap: 4px; }
.th-sa-arr-pill > svg { flex: none; }
.th-sa-src { font-size: 11.5px; color: var(--th-ink-2); }
.th-sa-wait { font-size: 12.5px; line-height: 1.4; color: var(--th-ink-2); }
.th-sa-wait.is-yours { color: var(--th-warn-ink); font-weight: 600; }
.th-sa-wait-cell { white-space: normal; }
.th-sa-arr-count { display: inline-flex; gap: 4px; align-items: center; color: var(--th-ink-2); }

/* ---------------------------------------------------------------- T13, T14 arriving panel and identity */
.th-sa-banner.is-arriving { border-style: dashed; }
.th-sa-waitcard.is-yours { border-color: var(--th-warn); box-shadow: inset 3px 0 0 var(--th-warn); }
.th-sa-wait-long { margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: var(--th-size-13); line-height: 1.5; color: var(--th-ink); }
.th-sa-wait-long > .th-sa-wait { font-size: var(--th-size-14); font-weight: 600; color: var(--th-ink); }
.th-sa-group-head { margin: 4px 0 -2px; font-family: var(--th-font-serif); font-size: var(--th-size-17); font-weight: 500; color: var(--th-ink); display: flex; flex-direction: column; gap: 2px; }
.th-sa-group-note { font-family: var(--th-font-sans); font-size: 12px; font-weight: 400; color: var(--th-ink-2); }
.af-app-main > .th-sa-group-head { margin: 8px 0 10px; }
.af-app-main > .th-sa-group-head:first-child { margin-top: 0; }
.th-sa-identity { gap: 14px; border-color: var(--th-warn); }
.th-sa-lede { margin: 0; font-size: var(--th-size-13); line-height: 1.55; color: var(--th-ink); max-width: 80ch; }
.th-sa-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@container th-sa (max-width: 720px) { .th-sa-compare { grid-template-columns: minmax(0, 1fr); } }
.th-sa-person { border: 1px solid var(--th-line); border-radius: var(--th-radius-3); background: var(--th-paper); padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.th-sa-person.is-prev { border-style: dashed; }
.th-sa-person-title { margin: 0; font-size: 12px; font-weight: 600; color: var(--th-ink-2); }
.th-sa-person .th-sa-facts { grid-template-columns: minmax(90px, 120px) minmax(0, 1fr); }
.th-sa-choices { margin: 0; padding: 0; border: 0; min-width: 0; }
.th-sa-legend { padding: 0; margin: 0 0 8px; font-size: var(--th-size-13); font-weight: 600; color: var(--th-ink); }
.th-sa-choices > ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.th-sa-choice { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 4px 10px; padding: 9px 12px; border: 1px solid var(--th-line); border-radius: var(--th-radius-3); background: var(--th-paper); }
.th-sa-choice.is-on { border-color: var(--th-advant); background: var(--th-advant-soft); }
.th-sa-choice > input, .th-sa-results input { margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--th-advant); }
.th-sa-choice > label, .th-sa-results label { display: flex; flex-direction: column; gap: 1px; cursor: pointer; min-width: 0; }
.th-sa-choice .t, .th-sa-results .t { font-size: var(--th-size-13); font-weight: 500; color: var(--th-ink); }
.th-sa-choice .s, .th-sa-results .s { font-size: 12px; line-height: 1.45; color: var(--th-ink-2); overflow-wrap: anywhere; }
.th-sa-search { grid-column: 2; display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.th-sa-search .th-grid-search { max-width: 360px; background: var(--th-paper); }
.th-sa-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--th-line); border-radius: var(--th-radius-3); background: var(--th-paper); }
.th-sa-results > li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; padding: 8px 10px; border-top: 1px solid var(--th-line-soft); }
.th-sa-results > li:first-child { border-top: 0; }
.th-sa-actions { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.th-sa-actions-note { font-size: 12px; color: var(--th-ink-2); }

.th-sa-compare.is-single { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
.th-sa-choices-sub { margin: -2px 0 8px; font-size: 12px; font-weight: 600; color: var(--th-ink-2); }
.th-sa-choice.is-after-matches { margin-top: 8px; }

/* Reasons: the plain sentence first; the safe code small and secondary, for support. */
.th-sa-why { display: block; color: var(--th-ink); }
.th-sa-why + .th-sa-reason { display: inline-block; margin-top: 3px; font-size: 10.5px; padding: 0 4px; color: var(--th-ink-3); background: transparent; border-color: var(--th-line-soft); }

/* T04b: held by the office's own setup. */
.th-sa-fixcard { border-color: var(--th-warn); box-shadow: inset 3px 0 0 var(--th-warn); }
.th-sa-fix-title { margin: 0; display: flex; gap: 8px; align-items: center; font-family: var(--th-font-serif); font-size: var(--th-size-15); font-weight: 500; color: var(--th-ink); }
.th-sa-fix-title > svg { color: var(--th-warn-ink); flex: none; }
.th-sa-fixlink { align-self: flex-start; text-decoration: none; }
.af-file a.th-sa-fixlink.cc-btn.is-primary, .af-file a.th-sa-fixlink.cc-btn.is-primary:hover,
.th-sa-appdef a.th-sa-fixlink.cc-btn.is-primary, .th-sa-appdef a.th-sa-fixlink.cc-btn.is-primary:hover { color: var(--th-advant-fg); }
.th-sa-wait-why { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--th-ink-2); }

/* T16, T16e: corrections after a deadline; T08b: how long each campus keeps a correction on time. */
.th-sa-readval.is-text { font-family: var(--th-font-sans); font-weight: 500; }
.th-sa-corr { display: flex; flex-direction: column; gap: 8px; }
.th-sa-corr-opt { display: inline-flex; gap: 8px; align-items: center; font-size: var(--th-size-13); color: var(--th-ink); cursor: pointer; }
.th-sa-corr-opt > input[type="radio"] { width: 16px; height: 16px; margin: 0; accent-color: var(--th-advant); }
.th-sa-corr-opt .th-sa-num { width: 72px; }
.th-sa-ontime { font-weight: 600; color: var(--th-ink); }
.th-sa-passed { font-weight: 600; color: var(--th-risk-ink); }

/* T11: a value the operator sets, read only here. */
.th-sa-setby { display: inline-flex; gap: 4px; align-items: center; font-size: 11.5px; color: var(--th-ink-2); white-space: nowrap; }

/* ---------------------------------------------------------------- T15 received file */
.th-sa-dates { white-space: normal; }
.th-sa-source { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 12.5px; color: var(--th-ink); }
.th-sa-source > svg { color: var(--th-ink-3); flex: none; }
.th-sa-source .th-sa-code { color: var(--th-ink-2); }
.th-sa-source .th-sa-code::before { content: "·"; margin-right: 8px; color: var(--th-ink-4); }


/* ---------------------------------------------------------------- Not drawn by the canon (product states)
   A setting value to correct, and a failed save's notice inside its panel (error canon). */
.th-sa-set-err { color: var(--th-risk-ink); }
.th-sa-panel-notice { padding: 12px 18px 0; }