/* The Dashboard: the owner's two panels (owner decision, 26 Sep 2026: the
   approved image is the authority for what is on this page and where), set
   in the product's own type (owner decision, 1 Oct 2026).

   The image is no longer the authority for SIZE. Scaled up to fill a wide
   window, it stood at up to 1.7 times the other pages: a 46px Agent name
   and 34px headings under a 20px page title. Nothing here is magnified any
   more. The two panels fill the page by layout, the figure fills its panel,
   and every size of type starts from one another Labbie page already uses,
   named beside the rule that takes it. The cards' own words then stand 10%
   above that size (--cc-home-type, below), and nothing else does.

   The shell is the one shared shell and the page head is the one shared
   head (.lb-page-head, in coldcalling.css): neither is restyled here. The
   image has no mobile frame; the one-column layout below is the smallest
   responsive adaptation. */

body.lb-console #dashboardPanel.cc-home {
  width: 100%;
  min-width: 0;
  /* The product's one family, by the product's own token. */
  font-family: var(--cc-font-ui, var(--font-ui));
  /* THE CARDS' OWN WORDS STAND 10% LARGER (owner, 1 Oct 2026). The Agent's
     name, the three headings, the line under each and the readiness are
     each a product size times this, and so is what a Campaign in progress
     prints. Each keeps the line it stood on, so nothing on the page moves:
     only the letters grow. The controls do not take it: Needs Attention,
     the Campaign slot's one-line state, the menu and the Balance card. */
  --cc-home-type: 1.1;
}
.lb-console #dashboardPanel .cc-home__grid {
  display: grid;
  grid-template-columns: minmax(0, 400fr) minmax(0, 510fr);
  /* Usage & Billing's gap between its two cards. */
  gap: 16px;
  width: 100%;
  min-width: 0;
}
.lb-console #dashboardPanel .cc-home__agent,
.lb-console #dashboardPanel .cc-home__overview {
  box-sizing: border-box;
  min-width: 0;
  min-height: 461px;
  border-radius: 11px;
  background: rgba(28, 24, 16, .05);
}
/* A column: the name, then the figure and its readiness in whatever height
   is left. */
.lb-console #dashboardPanel .cc-home__agent {
  display: flex;
  flex-direction: column;
  padding: 20px 24px 32px;
  overflow: hidden;
}
.lb-console #dashboardPanel .cc-home__agent-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
/* The Agent's name is this page's one large heading: the size and weight of
   the Campaigns page's "No campaigns yet". */
.lb-console #dashboardPanel .cc-home__agent-head h2 {
  margin: 0;
  min-width: 0;
  font-size: calc(1.25rem * var(--cc-home-type));
  font-weight: 600 !important;
  line-height: calc(1.25rem * 1.3);
  overflow-wrap: anywhere;
  color: #000;
}
/* The Campaign cards' menu button: 44px to press, a faint wash while it is
   pointed at or open. The margins take back what the 44px adds, so the dots
   sit on the name's first line and on the card's own edge. */
.lb-console #dashboardPanel .cc-home__agent-menu { position: relative; flex: none; }
.lb-console #dashboardPanel .cc-home__agent-menu > button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -9px -10px -9px 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md, 10px);
  background: transparent;
  color: #000;
  cursor: pointer;
}
.lb-console #dashboardPanel .cc-home__agent-menu > button:hover,
.lb-console #dashboardPanel .cc-home__agent-menu > button[aria-expanded="true"] {
  background: rgba(0, 0, 0, .05);
}
/* Drawn at 24px its dots are the Leads Library card's: 3.9px, 9px apart. */
.lb-console #dashboardPanel .cc-home__agent-menu svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}
/* Under the button's own box, right edge to right edge, 4px below it. */
.lb-console #dashboardPanel .cc-home__menu {
  position: absolute;
  top: 39px;
  right: -10px;
  z-index: 5;
  min-width: 130px;
  padding: 4px;
  border: 1px solid #e5e7eb;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
/* A menu item as the Campaign cards' menu sets one. */
.lb-console #dashboardPanel .cc-home__menu button {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #111;
  font-size: 0.88rem;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.lb-console #dashboardPanel .cc-home__menu button:hover { background: #f1f2f6; }
/* The figure and its readiness take the height the card has left, and sit
   together in the middle of it. */
.lb-console #dashboardPanel .cc-home__figure {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}
/* The figure is as large as that leaves it room to be, up to the image's
   own 318px: a square across the card's width that gives way when the card
   is short, drawn whole inside whatever box that leaves and standing on the
   readiness line. */
.lb-console #dashboardPanel .cc-home__avatar {
  display: block;
  flex: 0 1 auto;
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 0;
  max-height: 318px;
  object-fit: contain;
  object-position: 50% 100%;
}
/* Decoration: it never takes a tap, so on a narrow phone — where it sits
   just under the Agent menu — the menu's whole 44px hit area stays the
   menu's. */
.lb-console #dashboardPanel .cc-home__avatar { pointer-events: none; }
/* The words under a picture, at the size the empty states set theirs. */
.lb-console #dashboardPanel .cc-home__readiness {
  flex: none;
  margin: 12px 0 0;
  color: #727272;
  font-size: calc(0.95rem * var(--cc-home-type));
  font-weight: 600;
  line-height: calc(0.95rem * 1.35);
  text-align: center;
}
/* Only setup still needing work is an action. Ready remains the text above. */
.lb-console #dashboardPanel .cc-home__readiness-action {
  flex: none;
  align-self: center;
  margin: 12px 0 0;
  padding: 7px 20px;
  border: 0;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font: inherit;
  font-size: calc(0.95rem * var(--cc-home-type));
  font-weight: 600;
  line-height: calc(0.95rem * 1.35);
  text-align: center;
  cursor: pointer;
}
.lb-console #dashboardPanel .cc-home__readiness-action:focus-visible {
  outline: 2px solid #000;
  outline-offset: 3px;
}
/* Ready and Not ready keep the grey above, as the owner's image shows
   them: the word is the state, so no colour has to carry it. */

.lb-console #dashboardPanel .cc-home__overview { padding: 21px 22px; }
/* A section's heading is the shared section title (.section-title, as
   Settings carries it), and the line under it the shared hint (.lb-hint). */
.lb-console #dashboardPanel .cc-home__section h2 {
  margin: 0;
  color: #000;
  font-size: calc(0.94rem * var(--cc-home-type));
  font-weight: 600 !important;
  line-height: calc(0.94rem * 1.35);
}
.lb-console #dashboardPanel .cc-home__sub {
  margin: 0;
  color: rgba(0,0,0,.56);
  font-size: calc(0.78rem * var(--cc-home-type));
  font-weight: 400;
  line-height: calc(0.78rem * 1.5);
}
/* THE CAMPAIGN SLOT IS DRAWN BY WHAT IT HOLDS (owner, 1 Oct 2026). A
   Campaign in progress is the black card below, with its state, its name
   and its progress, printed 10% larger with the rest of the cards' words.
   With none to draw — still loading, none in progress, the projection
   unread — the slot holds one line, .cc-home__campaign-state, drawn as the
   Needs Attention box is (one rule, further down): the same size, the same
   colour, the same arrow, other words. "No ongoing campaign" is a button to
   the Campaigns page; the loading and unread lines are text. */
.lb-console #dashboardPanel .cc-home__campaign { margin-top: 12px; }
.lb-console #dashboardPanel .cc-home__campaign-link {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;
  width: 307px;
  max-width: 100%;
  height: 100px;
  padding: 10px 12px;
  border: 0;
  border-radius: 11px;
  background: #000;
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.lb-console #dashboardPanel .cc-home__campaign-label {
  color: #34c759;
  font-size: calc(0.88rem * var(--cc-home-type));
  line-height: 19px;
}
/* Green is "Ongoing". A Campaign that holds the slot but is not calling —
   paused, outside its hours, waiting for credit — is named in a muted
   white instead. */
.lb-console #dashboardPanel .cc-home__campaign-label[data-state]:not([data-state="running"]) {
  color: rgba(255,255,255,.72);
}
.lb-console #dashboardPanel .cc-home__campaign-link strong {
  display: block;
  max-width: calc(100% - 20px);
  overflow: hidden;
  color: #fff;
  font-size: calc(0.88rem * var(--cc-home-type));
  font-weight: 600;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-console #dashboardPanel .cc-home__chevron {
  position: absolute;
  right: 10px;
  top: 35px;
  font-size: 23px;
  line-height: 20px;
}
.lb-console #dashboardPanel .cc-home__progress-title {
  margin-top: 7px;
  color: rgba(255,255,255,.55);
  font-size: calc(0.72rem * var(--cc-home-type));
  line-height: 14px;
}
.lb-console #dashboardPanel .cc-home__progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: calc(0.72rem * var(--cc-home-type));
  line-height: 15px;
}
.lb-console #dashboardPanel .cc-home__progress-track {
  display: block;
  width: 231px;
  max-width: calc(100% - 32px);
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #fff;
}
.lb-console #dashboardPanel .cc-home__progress-track > span {
  display: block;
  height: 100%;
  background: #34c759;
}
.lb-console #dashboardPanel .cc-home__attention-section { margin-top: 22px; }
/* ONE BOX, TWO PLACES (owner, 1 Oct 2026). Needs Attention, and the
   Campaign slot with no Campaign in progress, look the same: this one rule
   draws both, so their size, colour and arrow cannot differ. Only the words
   do — and where they lead. Needs Attention is a button to its page, and
   "No ongoing campaign" is a button to Campaigns; the pointer is theirs
   (below), and not the loading or unread Campaign line's, which is text.

   GREY UNLESS A LEAD IS WAITING (owner's reference, 1 Oct 2026). It is its
   own dark grey with white words whenever nothing is waiting: none to
   follow up, a count still being read, a count that could not be read, no
   Campaign in progress. The words say which. */
.lb-console #dashboardPanel .cc-home__attention,
.lb-console #dashboardPanel .cc-home__campaign-state {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-sizing: border-box;
  max-width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0 11px;
  border: 0;
  border-radius: 11px;
  background: #555;
  color: #fff;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: normal;
  text-align: left;
}
.lb-console #dashboardPanel .cc-home__attention span,
.lb-console #dashboardPanel .cc-home__campaign-state span { font-size: 22px; font-weight: 400; }
/* …AND ONE WIDTH. A button is as wide as its words, and these words are of
   different lengths, so the grey ones are held to one width: room for the
   longest of them ("No leads needs attention now" is 254px). On a card
   narrower than that it is the card's own width instead. */
.lb-console #dashboardPanel .cc-home__attention:not([data-waiting="true"]),
.lb-console #dashboardPanel .cc-home__campaign-state {
  min-width: min(256px, 100%);
}
.lb-console #dashboardPanel .cc-home__attention { margin-top: 12px; }
.lb-console #dashboardPanel .cc-home__attention,
.lb-console #dashboardPanel button.cc-home__campaign-state { cursor: pointer; }
/* Red is for leads that are waiting, and only then: the server's count is
   one or more. It is as wide as its words, as it always was. */
.lb-console #dashboardPanel .cc-home__attention[data-waiting="true"] {
  background: rgba(255,0,4,.85);
}
.lb-console #dashboardPanel .cc-home__balance-section { margin-top: 22px; }
/* The figure on its own line; under it the auto-reload line and Add funds
   share one, so neither can run into the other whatever the server wrote. */
.lb-console #dashboardPanel .cc-home__balance {
  position: relative;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  width: 224px;
  max-width: 100%;
  min-height: 68px;
  margin-top: 12px;
  padding: 8px 12px 9px 14px;
  border-radius: 11px;
  background: rgba(28,24,16,.3);
}
/* THE WHOLE CARD OPENS USAGE & BILLING (owner, 1 Oct 2026). One button the
   size of the card, under its text: the figure, the line beneath it and
   Add funds let a click through to it, so there is no part of the card
   that does nothing — Add funds while it is disabled included. Pointed at,
   it washes the card as the menus wash their items. */
.lb-console #dashboardPanel .cc-home__balance-open {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}
.lb-console #dashboardPanel .cc-home__balance-open:hover { background: rgba(0, 0, 0, .05); }
.lb-console #dashboardPanel .cc-home__balance strong,
.lb-console #dashboardPanel .cc-home__balance > span,
.lb-console #dashboardPanel .cc-home__add {
  pointer-events: none;
}
/* The figure on a summary card, at the size the Campaigns page counts in. */
.lb-console #dashboardPanel .cc-home__balance strong {
  display: block;
  position: relative;
  grid-column: 1 / -1;
  min-width: 0;
  overflow: hidden;
  color: #000;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 28px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-console #dashboardPanel .cc-home__balance > span {
  display: block;
  position: relative;
  min-width: 0;
  overflow: hidden;
  color: rgba(60,60,67,.6);
  font-size: 0.72rem;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-console #dashboardPanel .cc-home__add {
  position: relative;
  padding: 2px 10px;
  border: 0;
  border-radius: 8px;
  background: #000;
  color: #ccc;
  font: inherit;
  font-size: 0.78rem;
  line-height: 18px;
}
.lb-console #dashboardPanel .cc-home__add:disabled { opacity: .5; }
.lb-console #dashboardPanel button:focus-visible {
  outline: 2px solid #111;
  outline-offset: 2px;
}
/* ── THE PAIR FILLS THE PAGE (owner, 26 Sep 2026; restated 1 Oct 2026) ──
   The approved image draws the two cards across the page's whole width, and
   held at its own 936px a wide window showed them small beside an empty
   strip. They were then magnified as one picture, which took their text to
   1.7 times every other page's. So the pair fills the page as a layout
   instead: it takes the Dashboard's whole width in the image's own 400:510,
   and reaches the line the sidebar ends on by the one-panel pages' own rule
   (flex: 1 0 auto in #dashboardPanel's column, in coldcalling.css). Only
   the cards and the figure grow; no size of type does. The figure may grow
   to 540px, the largest it was ever drawn, and the corners are the shared
   card's 18px, the sidebar box's beside them. */
@media (min-width: 1111px) {
  .lb-console #dashboardPanel .cc-home__grid { flex: 1 0 auto; }
  .lb-console #dashboardPanel .cc-home__agent,
  .lb-console #dashboardPanel .cc-home__overview { border-radius: 18px; }
  .lb-console #dashboardPanel .cc-home__avatar { max-height: 540px; }
}
@media (max-width: 1110px) {
  .lb-console #dashboardPanel .cc-home__grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 510px;
    gap: 20px;
  }
  .lb-console #dashboardPanel .cc-home__agent,
  .lb-console #dashboardPanel .cc-home__overview { width: 100%; }
}
@media (max-width: 720px) {
  .lb-console #dashboardPanel .cc-home__agent { min-height: 440px; }
}