/* The agency monitoring page, part "blocks": the three pictures this bundle draws on the kit's atoms (the window and
   card frames of kit.css, .k-sq, .k-ch, .k-av and .k-ini; .k-yb, .k-sl and .k-wl-lift of wl.css, which the wl-sprite
   marker loads) and the one rule that lifts a card over a window's corner. Block 01: the agency's clients, a card
   each (.mo-hub); block 04: the Sender profiles page filtered to Needs attention (.mo-sp) with the workflow's sender card
   over its corner (.mo-wf); block 05: the Dashboard's Sender profiles card (.mo-db). A state is a dot and its words
   (.mo-st), each tone a theme token, so the dark theme follows. Every rule is scoped to .pg-agencies-monitoring and
   every class of its own starts with mo-. Nothing moves. */

/* a state: the dot in its tone, then the words; the dot keeps to the first line when the words wrap */
.pg-agencies-monitoring .mo-st{display:inline-flex;align-items:flex-start;gap:8px;margin:0;font:500 13.5px/1.35 var(--sans);color:var(--k-text);text-wrap:pretty}
.pg-agencies-monitoring .mo-st::before{content:"";flex:none;width:8px;height:8px;margin-top:.33em;border-radius:50%;background:var(--mo-c,var(--mute))}
.pg-agencies-monitoring .mo-st-ok{--mo-c:var(--ok)}
.pg-agencies-monitoring .mo-st-you{--mo-c:var(--k-em)}
.pg-agencies-monitoring .mo-st-att{--mo-c:var(--coral)}
.pg-agencies-monitoring .mo-st-new{--mo-c:var(--ai)}
.pg-agencies-monitoring .mo-pic :where(p){margin:0}

/* a card lifted over the corner of the window before it, as wl.css lifts an email (.k-wl-lift) */
.pg-agencies-monitoring .k-wl-lift>.mo-wf{position:relative;z-index:1;align-self:flex-end;margin-top:-40px}
/* a demo still inside the lift takes the lift's width */
.pg-agencies-monitoring .k-wl-lift>.gsd{width:100%}

/* ---- 01: the agency's clients, a card each ------------------------------------------------------------- */
.pg-agencies-monitoring .mo-hub{width:100%;max-width:620px}
.pg-agencies-monitoring .mo-hub .k-win-title span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.pg-agencies-monitoring .mo-hub-cl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:18px 18px 14px}
.pg-agencies-monitoring .mo-hub-cl li{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0;padding:16px;border-radius:14px;background:var(--sunk);box-shadow:inset 0 0 0 1px var(--line-2)}
.pg-agencies-monitoring .mo-cl-n{display:flex;align-items:center;gap:10px;max-width:100%}
.pg-agencies-monitoring .mo-cl-n b{min-width:0;overflow:hidden;font:600 15.5px/1.2 var(--sans);color:var(--ink);text-overflow:ellipsis;white-space:nowrap}
.pg-agencies-monitoring .mo-cl-ch{display:flex;flex-wrap:wrap;gap:6px}
.pg-agencies-monitoring .mo-cl-ch i{font-style:normal}
.pg-agencies-monitoring .mo-foot{padding:0 18px 18px;font:400 13px/1.4 var(--sans);color:var(--mute);text-align:center}

/* ---- 04: the Sender profiles page, filtered to Needs attention, and the workflow's sender card ---------- */
.pg-agencies-monitoring .mo-sp{width:94%}
.pg-agencies-monitoring .mo-sp .k-win-title span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.pg-agencies-monitoring .mo-sp-fl{display:flex;flex-wrap:wrap;gap:6px;padding:14px 16px;border-bottom:1px solid var(--line-2)}
.pg-agencies-monitoring .mo-sp-fl span{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:9px;box-shadow:inset 0 0 0 1px var(--line);font:500 13px/1 var(--sans);color:var(--k-text);white-space:nowrap}
.pg-agencies-monitoring .mo-sp-fl small{font:500 11.5px/1 var(--mono);color:var(--mute)}
.pg-agencies-monitoring .mo-sp-fl .mo-on{background:color-mix(in srgb,var(--coral) 9%,var(--panel));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--coral) 42%,transparent);color:var(--ink)}
.pg-agencies-monitoring .mo-sp-rows{padding:2px 16px 54px}
.pg-agencies-monitoring .mo-sp-rows li{display:grid;grid-template-columns:30px minmax(0,1fr) minmax(0,1.1fr) auto;align-items:center;column-gap:12px;padding:14px 0}
.pg-agencies-monitoring .mo-sp-rows li+li{border-top:1px solid var(--line-2)}
.pg-agencies-monitoring .mo-sp-who{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-width:0}
.pg-agencies-monitoring .mo-sp-who b{font:600 14.5px/1.2 var(--sans);color:var(--ink)}
.pg-agencies-monitoring .mo-sp-who i,.pg-agencies-monitoring .mo-sp-rows .k-ini{font-style:normal}
.pg-agencies-monitoring .mo-sp-rows .k-ini{font-size:12px}
.pg-agencies-monitoring .mo-sp-st{display:flex;flex-direction:column;gap:4px;min-width:0}
.pg-agencies-monitoring .mo-sp-st small{padding-left:16px;font:400 12.5px/1.3 var(--sans);color:var(--mute)}
.pg-agencies-monitoring .mo-sp-act{display:inline-flex;align-items:center;height:32px;padding:0 13px;border-radius:9px;background:var(--ink2);color:var(--ground);font:600 13px/1 var(--sans);white-space:nowrap}
.pg-agencies-monitoring .mo-wf{display:grid;gap:10px;width:272px;padding:14px 16px 16px}
.pg-agencies-monitoring .mo-wf-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--line-2)}
.pg-agencies-monitoring .mo-wf-h b{font:600 15px/1.2 var(--sans);color:var(--ink)}
.pg-agencies-monitoring .mo-wf-h small{font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.pg-agencies-monitoring .mo-wf-r{font:400 13.5px/1.3 var(--sans);color:var(--k-text)}

/* ---- 05: the Dashboard's Sender profiles card ------------------------------------------------------------ */
.pg-agencies-monitoring .mo-db{width:100%;max-width:640px}
.pg-agencies-monitoring .mo-db .k-win-title span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.pg-agencies-monitoring .mo-db-in{padding:16px 18px 8px}
.pg-agencies-monitoring .mo-db-h{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.pg-agencies-monitoring .mo-db-h b{font:600 15.5px/1.2 var(--sans);color:var(--ink)}
.pg-agencies-monitoring .mo-db-h small{font:400 12.5px/1.35 var(--sans);color:var(--mute)}
.pg-agencies-monitoring .mo-db-t{width:100%;border-collapse:collapse;font:400 13.5px/1.3 var(--mono);color:var(--k-text)}
.pg-agencies-monitoring .mo-db-t :is(th,td){padding:12px 7px;text-align:right;white-space:nowrap}
.pg-agencies-monitoring .mo-db-t :is(th,td):first-child{padding-left:0;text-align:left}
.pg-agencies-monitoring .mo-db-t :is(th,td):last-child{padding-right:0}
.pg-agencies-monitoring .mo-db-t thead th{padding-top:8px;padding-bottom:10px;border-bottom:1px solid var(--line);font:500 10.5px/1.2 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}
.pg-agencies-monitoring .mo-db-t tbody tr+tr>*{border-top:1px solid var(--line-2)}
.pg-agencies-monitoring .mo-db-t tbody th{font:500 14px/1.2 var(--sans);color:var(--ink)}
.pg-agencies-monitoring .mo-db-who{display:inline-flex;align-items:center;gap:9px}
.pg-agencies-monitoring .mo-db .k-ini{width:26px;height:26px;font-size:11px;font-style:normal}
/* today: the meter alone, no figure (a LinkedIn profile's daily limit is never a number on a page) */
.pg-agencies-monitoring .mo-db-today{display:inline-flex;align-items:center}
.pg-agencies-monitoring .mo-db-today i{display:block;width:56px;height:6px;border-radius:3px;background:linear-gradient(var(--ai),var(--ai)) 0 0/var(--v,0%) 100% no-repeat,var(--sunk);box-shadow:inset 0 0 0 1px var(--line)}

@media (max-width:760px){
  .pg-agencies-monitoring .mo-sp{width:100%}
  .pg-agencies-monitoring .mo-sp-rows{padding-bottom:40px}
  /* the card keeps over the window's corner as wl.css keeps its email on a phone */
  .pg-agencies-monitoring .k-wl-lift>.mo-wf{width:calc(100% - 22px);margin-top:-30px}
  /* the Dashboard keeps the sender profile, today, the replies and the rate */
  .pg-agencies-monitoring .mo-db-t :is(th,td):is(:nth-child(3),:nth-child(6)){display:none}
}
@media (max-width:560px){
  .pg-agencies-monitoring .mo-hub-cl{grid-template-columns:minmax(0,1fr);padding:14px 14px 12px;gap:10px}
  .pg-agencies-monitoring .mo-hub-cl li{padding:14px}
  .pg-agencies-monitoring .mo-sp-rows li{grid-template-columns:30px minmax(0,1fr);row-gap:8px}
  .pg-agencies-monitoring .mo-sp-rows li>:not(.k-ini){grid-column:2}
  .pg-agencies-monitoring .mo-sp-act{justify-self:start}
  .pg-agencies-monitoring .mo-db-in{padding:14px 14px 6px}
  .pg-agencies-monitoring .mo-db-today i{width:40px}
  /* four columns in a phone's width: the heads may take two lines, the cells come closer */
  .pg-agencies-monitoring .mo-db-t{font-size:12.5px}
  .pg-agencies-monitoring .mo-db-t :is(th,td){padding-left:5px;padding-right:5px}
  .pg-agencies-monitoring .mo-db-t :is(th,td):first-child{padding-left:0}
  .pg-agencies-monitoring .mo-db-t :is(th,td):last-child{padding-right:0}
  .pg-agencies-monitoring .mo-db-t thead th{white-space:normal;letter-spacing:.02em;vertical-align:bottom}
  .pg-agencies-monitoring .mo-db-t tbody th{font-size:13px}
}