/* it-210 — the Shark Tank: the holder's time-to-act banner, the countdown chip, the header timer badge and its list,
   and the Shark Tank page. Linked globally (layouts/_shared.html): the banner draws in the contact quickview too. */

/* ---- The holder's banner (contacts/_lead_clock.html) ----------------------------------------------------------
   The house .notice bar; these rules only seat the actions at its end and give the countdown tabular digits. */
.lead-clock { flex-wrap: wrap; margin: 0.75rem 0 1rem; }
.lead-clock__text { flex: 1 1 22rem; min-width: 0; }
.lead-clock__left { font-variant-numeric: tabular-nums; }
.lead-clock__actions { display: flex; gap: 0.25rem; flex-wrap: wrap; margin-left: auto; }
.lead-clock.is-lapsed .lead-clock__left { color: var(--md-sys-color-error); }

/* ---- The countdown badge (shared/_lead_clock_chip.html) — a house .badge; this only adds the icon and digits ---- */
.lead-clock-chip { gap: 0.25rem; font-variant-numeric: tabular-nums; vertical-align: middle; }
.lead-clock-chip .material-symbols-rounded { font-size: 18px; }
td .lead-clock-chip { margin-left: 0.5rem; }
/* The list's compact form: a house .count-pill with the timer glyph. */
.lead-clock-pill { display: inline-flex; align-items: center; gap: 0.2rem; margin-left: 0.4rem; padding: 1px 8px; font-variant-numeric: tabular-nums; vertical-align: middle; }
.lead-clock-pill .material-symbols-rounded { font-size: 15px; }
.lead-clock-pill.is-lapsed { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.badge.lead-clock-chip.is-lapsed { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }

/* ---- The header timer badge + its list (layouts/base.html, lead_clocks/_mine.html) -----------------------------
   The list takes the header's own dropdown look (.contact-type-switcher__menu). */
.lead-clock-hdr { position: relative; display: inline-flex; }
/* The badge hides at zero with the hidden attribute — the wrapper sets a display, which would otherwise win. */
.lead-clock-hdr[hidden] { display: none !important; }
.lead-clock-hdr__count {
  position: absolute;
  top: -4px;
  right: -6px;
  pointer-events: none;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: var(--r-full);
  background: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.lead-clock-pop {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  width: 22rem;
  max-width: calc(100vw - 2rem);
  z-index: 70;
  padding: 0.25rem 0;
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-medium);
  box-shadow: var(--md-sys-elevation-level2);
  color: var(--md-sys-color-on-surface);
}
.lead-clock-pop__title { padding: 0.5rem 0.75rem 0.25rem; font-size: var(--md-sys-typescale-label-medium-size); font-weight: 600; color: var(--md-sys-color-on-surface-variant); }
.lead-clock-pop__row { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; color: var(--md-sys-color-on-surface); text-decoration: none; }
.lead-clock-pop__row:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); text-decoration: none; }
.lead-clock-pop__row .lead-clock-chip { margin-left: 0; }
.lead-clock-pop__who { display: flex; flex-direction: column; min-width: 0; font-size: var(--md-sys-typescale-label-large-size); }
.lead-clock-pop__who small { color: var(--md-sys-color-on-surface-variant); font-size: var(--md-sys-typescale-body-small-size); }
.lead-clock-pop__empty { margin: 0; padding: 0.5rem 0.75rem; color: var(--md-sys-color-on-surface-variant); }
.lead-clock-pop__foot { display: flex; align-items: center; gap: 0.25rem; padding: 0.5rem 0.75rem; font-size: var(--md-sys-typescale-label-large-size); color: var(--md-sys-color-primary); text-decoration: none; }
.lead-clock-pop__foot .material-symbols-rounded { font-size: 18px; }

/* ---- The Shark Tank page (shark_tank/index.html) — .float-card + .float-table; these only space the cells ------ */
.shark-tank__sec { margin-top: 1.5rem; }
.shark-tank__hd { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.shark-tank__hd h2 { margin: 0; font-size: var(--md-sys-typescale-title-medium-size); }
.shark-tank__lead { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.shark-tank__name { font-weight: 600; }
.shark-tank__ico { font-size: 16px; margin-right: 0.25rem; }
.shark-tank__sub { font-size: var(--md-sys-typescale-body-small-size); margin-top: 0.25rem; }

/* ---- The distribution editor's Time to act section (lead_distribution/edit.html) ------------------------------
   House drawer pieces only (.cmp-sec, .cmp-toggle, MWC fields, .segmented-control, md-filter-chip, .chip-multiselect);
   these two rules just lay a control row out and space the hours block. */
.tta { display: flex; flex-direction: column; gap: 1.1rem; margin-top: .6rem; }
.tta > .cmp-fld { margin: 0; }
.tta .segmented-control { align-self: flex-start; width: max-content; }
.tta-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.tta-hours { display: flex; flex-direction: column; gap: .5rem; margin-top: .6rem; }
.tta .chip-multiselect { margin-top: .5rem; }