/* The agency monitoring page, part "finale": the round of the agency's clients on the night. The section, its head,
   its two calls, the card's panel and the motto are the landing kit's (theme/assets/css/kit.css: section.k-finale,
   .k-eyebrow, .k-finale-h, .k-finale-sub, .k-btns, .k-finale-art, .k-navy-card, .k-motto, .k-sq); this file holds the
   card's caption, its rows and its foot, laid out as /white-label/'s brand checklist lays its rows: a client's mark,
   its name and its state on one line, the state under the name on the narrowest phones. The night is the same in both
   themes, so the colours are the kit's fixed navy tokens, each state's dot a fixed tone that reads on it. Every rule
   is scoped to .pg-agencies-monitoring and every class of its own starts with mo-fin-. Nothing moves. */

.pg-agencies-monitoring .mo-fin-card{max-width:520px;margin:0 auto 60px;padding:16px 22px 4px}
.pg-agencies-monitoring .mo-fin-card figcaption{display:flex;align-items:center;gap:12px;padding:2px 0 14px;border-bottom:1px solid var(--k-navy-line)}
.pg-agencies-monitoring .mo-fin-t{min-width:0;font:600 16px/1.25 var(--sans);color:#FFFFFF}
.pg-agencies-monitoring .mo-fin-card .k-sample{margin-left:auto}
.pg-agencies-monitoring .mo-fin-rows{margin:0;padding:0;list-style:none}
.pg-agencies-monitoring .mo-fin-rows li{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;column-gap:14px;min-height:54px;margin:0;padding:10px 0;border-bottom:1px solid #1D2147}
.pg-agencies-monitoring .mo-fin-rows li:last-child{border-bottom:0}
.pg-agencies-monitoring .mo-fin-n{min-width:0;font:500 16.5px/1.3 var(--sans);color:var(--k-on-navy)}
.pg-agencies-monitoring .mo-fin-s{display:inline-flex;align-items:center;gap:9px;font:500 12.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#F4F1E6;white-space:nowrap}
.pg-agencies-monitoring .mo-fin-s::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--mo-fin-c)}
.pg-agencies-monitoring .mo-fin-ok{--mo-fin-c:#2CC283}
.pg-agencies-monitoring .mo-fin-you{--mo-fin-c:var(--k-amber)}
.pg-agencies-monitoring .mo-fin-att{--mo-fin-c:#FF7A66}
.pg-agencies-monitoring .mo-fin-new{--mo-fin-c:var(--k-navy-eye)}
.pg-agencies-monitoring .mo-fin-foot{margin:0;padding:13px 0 12px;border-top:1px solid var(--k-navy-line);font:400 14.5px/1.5 var(--sans);color:var(--k-navy-mute);text-wrap:pretty}

@media (max-width:760px){
  .pg-agencies-monitoring .mo-fin-card{margin-bottom:44px;padding:14px 16px 4px}
  .pg-agencies-monitoring .mo-fin-n{font-size:15.5px}
  .pg-agencies-monitoring .mo-fin-s{font-size:11.5px;letter-spacing:.06em}
  .pg-agencies-monitoring .mo-fin-foot{font-size:14px}
}
@media (max-width:420px){
  .pg-agencies-monitoring .mo-fin-rows li{grid-template-columns:24px minmax(0,1fr);row-gap:6px}
  .pg-agencies-monitoring .mo-fin-s{grid-column:2}
}