/* system-application-compass.css - the System Application journey's new Compass chrome (cmp-sa-*).
   Lifted into Compass (SA-06) after compass.css and compass-decisions.css. Canon's phone body scope
   .cmp-m-body is the production phone body .cmp-m-content (the compass.css mapping); the phone amendments
   to canon chrome (F8, F9) are folded into compass.css as the canon README directs. Every value is an existing --cmp-* token or a structural length; no new
   colors. Everything else on these screens is the shipped canon class, unchanged. */

/* ---------------------------------------------------------------- rail groups and sub-lines (D20) */
.cmp-sa-rail__group {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cmp-rail-title-color);
  padding: 14px 12px 4px;
}
.cmp-rail__list > .cmp-sa-rail__group:first-child { padding-top: 0; }
.cmp-sa-rail__group--sheet { padding: 14px 12px 4px; color: var(--cmp-text-subtle); }
.cmp-sa-rail__end { height: 10px; }
.cmp-sa-rail__item, .cmp-sa-sheet__item { align-items: flex-start; }
.cmp-sa-rail__item .cmp-rail__icon, .cmp-sa-sheet__item .cmp-rail__icon { margin-top: -2px; }
.cmp-sa-rail__item .cmp-rail__num, .cmp-sa-sheet__item .cmp-m-sheet__num { margin-top: 2px; }
.cmp-sa-rail__label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* A campus name wraps rather than truncates: "Lakeview Community College" must read whole. */
.cmp-sa-rail__name { overflow-wrap: anywhere; }
.cmp-sa-rail__sub { font-size: 12px; font-weight: 400; color: var(--cmp-rail-progress-fg); line-height: 1.35; }
.cmp-m-sheet__item.cmp-sa-sheet__item .cmp-sa-rail__sub { font-size: 13px; }

/* ---------------------------------------------------------------- choose campuses */
.cmp-sa-policy {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  padding: 12px 16px; margin: 0 0 16px;
  background: var(--cmp-bg-panel); border: 1px solid var(--cmp-border); border-radius: var(--cmp-radius-md);
}
.cmp-sa-policy__count { font-size: 15px; color: var(--cmp-text); }
.cmp-sa-policy__count strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.cmp-sa-policy__rule { font-size: 13.5px; color: var(--cmp-text-muted); }
.cmp-sa-campuses { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cmp-sa-campus {
  background: var(--cmp-bg-panel); border: 1px solid var(--cmp-border); border-radius: var(--cmp-radius-md);
  padding: 16px 18px;
}
.cmp-sa-campus--chosen { border-color: var(--cmp-primary); box-shadow: inset 3px 0 0 var(--cmp-primary); }
.cmp-sa-campus--off { background: var(--cmp-bg-soft); border-style: dashed; border-color: var(--cmp-border-strong); }
.cmp-sa-campus__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.cmp-sa-campus__name { font-size: 17px; font-weight: 600; line-height: 1.3; }
.cmp-sa-campus--off .cmp-sa-campus__name { color: var(--cmp-text-muted); }
.cmp-sa-campus__chip {
  font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: var(--cmp-radius-pill);
  background: var(--cmp-primary-soft); color: var(--cmp-primary);
}
.cmp-sa-campus__facts { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 10px 0 0; }
.cmp-sa-campus__facts div { display: flex; flex-direction: column; gap: 1px; }
.cmp-sa-campus__facts dt { font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cmp-text-subtle); }
.cmp-sa-campus__facts dd { margin: 0; font-size: 14.5px; color: var(--cmp-text); }
.cmp-sa-campus__terms { margin-top: 14px; }
.cmp-sa-campus__legend { display: block; font-size: 13.5px; font-weight: 600; color: var(--cmp-text); margin: 14px 0 8px; }
.cmp-sa-campus__terms .cmp-sa-campus__legend { margin-top: 0; }
.cmp-sa-campus__act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 14px; }
.cmp-sa-campus__state { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; font-weight: 600; color: var(--cmp-success); }
.cmp-sa-campus__term { font-weight: 400; color: var(--cmp-text-muted); }
.cmp-sa-campus__remove { margin-left: auto; }
.cmp-sa-campus__note { margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--cmp-text-muted); }
.cmp-sa-campus__off { margin: 6px 0 0; font-size: 14px; color: var(--cmp-text-muted); }
/* At the cap: the campus can still be chosen once a slot is free, so it keeps full ink; only Add is withheld. */
.cmp-sa-campus--capped .cmp-sa-campus__note { color: var(--cmp-text); }
.cmp-sa-campus .cmp-fee__processing { margin-left: 0; }
.cmp-sa-campus .cmp-fb--field { margin-top: 12px; }

/* ---------------------------------------------------------------- a campus section */
.cmp-sa-privacy { margin: -18px 0 22px; font-size: 13.5px; color: var(--cmp-text-muted); }
.cmp-group__body.cmp-sa-groupbody { display: block; }
.cmp-sa-line { margin: 0; font-size: 15px; color: var(--cmp-text); }
.cmp-sa-fee { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 0; }
.cmp-sa-fee div { display: contents; }
.cmp-sa-fee dt { font-size: 13.5px; color: var(--cmp-text-muted); }
.cmp-sa-fee dd { margin: 0; font-size: 15px; color: var(--cmp-text); }
.cmp-sa-fee__note { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--cmp-border); font-size: 13.5px; color: var(--cmp-text-muted); }
.cmp-sa-radio__tag { margin-left: 8px; font-size: 12px; font-weight: 600; color: var(--cmp-text-muted); }
.cmp-sa-radio--pending { border-style: dashed; }
.cmp-sa-term__wait .cmp-fee__processing { margin-left: 0; margin-top: 10px; }

/* ---------------------------------------------------------------- review and submit */
.cmp-sa-revgroup {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cmp-text-subtle); margin: 18px 0 2px;
}

/* ---------------------------------------------------------------- status pages */
.cmp-sa-section { margin-top: 28px; }
.cmp-sa-section__note { margin: -4px 0 12px; font-size: 13.5px; color: var(--cmp-text-muted); }
.cmp-sa-times { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 6px 0 0; }
.cmp-sa-times div { display: flex; flex-direction: column; gap: 2px; }
.cmp-sa-times dt { font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cmp-text-subtle); }
.cmp-sa-times dd { margin: 0; font-size: 14.5px; color: var(--cmp-text); font-variant-numeric: tabular-nums; }
.cmp-sa-sentlist { list-style: none; margin: 0 0 24px; padding: 0; border: 1px solid var(--cmp-border); border-radius: var(--cmp-radius-md); background: var(--cmp-bg-panel); }
.cmp-sa-sentlist li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 12px 16px; border-top: 1px solid var(--cmp-border); font-size: 14.5px; }
.cmp-sa-sentlist li:first-child { border-top: 0; }
.cmp-sa-sentlist__name { font-weight: 600; color: var(--cmp-text); }
.cmp-sa-sentlist__term, .cmp-sa-sentlist__shared { color: var(--cmp-text-muted); }

.cmp-sa-dlv { list-style: none; margin: 0; padding: 0; border: 1px solid var(--cmp-border); border-radius: var(--cmp-radius-md); background: var(--cmp-bg-panel); }
.cmp-sa-dlv__row { padding: 16px 18px; border-top: 1px solid var(--cmp-border); }
.cmp-sa-dlv__row:first-child { border-top: 0; }
.cmp-sa-dlv__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; }
.cmp-sa-dlv__id { min-width: 0; }
.cmp-sa-dlv__name { font-size: 16.5px; font-weight: 600; line-height: 1.3; }
.cmp-sa-dlv__term { font-size: 13px; color: var(--cmp-text-muted); margin-top: 2px; }
.cmp-sa-dlv__facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 10px; }
.cmp-sa-dlv__facts .cmp-confirm-chip { margin: 0; }
.cmp-sa-dlv__when { font-size: 13.5px; color: var(--cmp-text-muted); font-variant-numeric: tabular-nums; }
.cmp-sa-dlv__line { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--cmp-text-muted); max-width: 62ch; }
.cmp-sa-continue { margin-top: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cmp-sa-continue .cmp-btn { gap: 8px; }
.cmp-sa-continue__hint { margin: 0; font-size: 13px; color: var(--cmp-text-muted); max-width: 60ch; }
.cmp-sa-doclist { margin: 12px 0 0; padding: 0; list-style: none; }

/* ---------------------------------------------------------------- Full mode campus cards (D23, O9) */
.cmp-sa-cards { display: flex; flex-direction: column; gap: 16px; }
.cmp-sa-card { background: var(--cmp-bg-panel); border: 1px solid var(--cmp-border); border-radius: var(--cmp-radius-lg); overflow: hidden; }
.cmp-sa-card__head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; background: var(--cmp-primary-soft); border-bottom: 1px solid var(--cmp-border);
}
.cmp-sa-card--waiting .cmp-sa-card__head { background: var(--cmp-bg-soft); }
.cmp-sa-card__logo { width: 40px; height: 40px; border-radius: var(--cmp-radius-sm); flex-shrink: 0; object-fit: contain; background: var(--cmp-bg-panel); }
.cmp-sa-card__mono {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--cmp-radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--cmp-primary); color: var(--cmp-primary-fg);
  font-family: var(--cmp-font-headline); font-weight: 700; font-size: 19px; line-height: 1;
}
.cmp-sa-card__id { flex: 1; min-width: 0; }
.cmp-sa-card__name { font-size: 17px; font-weight: 600; line-height: 1.25; }
.cmp-sa-card__meta { font-size: 13px; color: var(--cmp-text-muted); margin-top: 2px; }
.cmp-sa-card__body { padding: 16px 18px 18px; }
.cmp-sa-card--waiting .cmp-sa-card__body { padding-top: 6px; padding-bottom: 14px; }
.cmp-sa-card__code { margin-bottom: 4px; }
.cmp-sa-card__code .cmp-confirm-chip { margin: 0; }
.cmp-sa-card__body > .cmp-fb--strip { margin: 12px 0 0; }
.cmp-sa-card__part { margin-top: 18px; }
.cmp-sa-card__parthead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.cmp-sa-card__parthead h4 { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; color: var(--cmp-text); }
.cmp-sa-card__parthead span { font-size: 13px; color: var(--cmp-text-subtle); }
.cmp-sa-card__msg.cmp-mfc--inline { margin: 0; }
.cmp-sa-card__note { margin: 10px 0 0; font-size: 13.5px; color: var(--cmp-text-muted); }
.cmp-sa-card__unavail { margin: 0; padding: 14px 16px; border: 1px dashed var(--cmp-border-strong); border-radius: var(--cmp-radius-md); font-size: 14px; color: var(--cmp-text-muted); }
.cmp-sa-card__foot { padding: 12px 18px; border-top: 1px solid var(--cmp-border); }
.cmp-sa-card__portal { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--cmp-text-muted); }
.cmp-sa-dz { display: flex; flex-direction: column; gap: 12px; }

/* ---------------------------------------------------------------- dashboard cards */
.cmp-sa-source {
  display: inline-block; margin-bottom: 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cmp-eyebrow-color);
}
/* Campus names are longer than the decision card's keys: a fixed key column keeps the states aligned. */
.cmp-sa-dzrows .cmp-dzcard__k { width: 210px; }
.cmp-sa-dzrows .cmp-dzcard__v small { display: block; }
.cmp-m-dash-body .cmp-sa-dzrows .cmp-dzcard__row { flex-direction: column; gap: 2px; }
.cmp-m-dash-body .cmp-sa-dzrows .cmp-dzcard__k { width: auto; }

/* Handoff: the campus fee is one fee, payable here or at the campus. Indented under the row like the fee panel. */
.cmp-sa-feenote { margin: 6px 0 0 30px; font-size: 13px; line-height: 1.5; color: var(--cmp-text-muted); }
.cmp-m-scroll .cmp-sa-feenote { margin-left: 0; }

/* Returned after the window closed (C10b): a campus with no grace left carries the only caution; the action closes the page. */
.cmp-sa-late__passed .cmp-fb--strip { margin: 8px 0 0; }
.cmp-sa-late__act { margin-top: 24px; }
.cmp-m-scroll .cmp-sa-late__act .cmp-btn { width: 100%; justify-content: center; min-height: 48px; }

/* ---------------------------------------------------------------- uploads in place */
.cmp-sa-upload { margin: 10px 0 0 30px; }

/* ---------------------------------------------------------------- phone */
.cmp-m-scroll .cmp-sa-section, .cmp-m-content .cmp-sa-section { margin-top: 24px; }
.cmp-m-content .cmp-sa-privacy { margin: 0 0 14px; }
.cmp-m-content .cmp-sa-policy { margin-bottom: 14px; }
.cmp-m-content .cmp-sa-campus { padding: 14px 16px; }
.cmp-m-content .cmp-sa-campus__act .cmp-btn { min-height: 44px; }
.cmp-m-content .cmp-sa-campus__act > .cmp-btn--outline { width: 100%; justify-content: center; }
.cmp-m-content .cmp-sa-campus__remove { min-width: 44px; }
.cmp-m-scroll .cmp-sa-dlv__row { padding: 14px; }
.cmp-m-scroll .cmp-sa-continue .cmp-btn { width: 100%; justify-content: center; min-height: 44px; white-space: normal; text-align: center; }
.cmp-m-scroll .cmp-sa-card__head, .cmp-m-scroll .cmp-sa-card__body { padding-left: 14px; padding-right: 14px; }
.cmp-m-scroll .cmp-sa-card__foot { padding: 12px 14px; }
.cmp-m-scroll .cmp-sa-card__portal { min-height: 44px; }
.cmp-m-scroll .cmp-sa-card .cmp-dz-actions .cmp-btn { width: 100%; justify-content: center; }
.cmp-m-scroll .cmp-sa-upload { margin-left: 0; }
/* The canon phone task row pushes its right column 30px in at full width; inside a card that overflows. */
.cmp-m-scroll .cmp-sa-card .cmp-task__right { width: calc(100% - 30px); }
.cmp-m-scroll .cmp-sa-times { gap: 8px 20px; }
.cmp-m-scroll .cmp-sa-sentlist li { flex-direction: column; }