/* =============================================================================
   ics-jobstatus - THE paint of the job/process status family (owner mission
   2026-08-26). PART A the bar (merged from components/progressbar.css, RETIRED),
   PART B the page overlay (merged from the inline `#icsprogressbarParent` blocks
   the shells carried - _Layout, _LayoutDashboard (and the since-retired V2 shell) - and from
   the view-local copies of the same splash that full deployment retires).
   Theme only: --ics-progress-* tokens (tokens/component.css), the theme surface
   and ink, the own type scale. No vendor vocabulary (.progressbar-* is EasyUI's
   and is NOT painted here - an unconverted local bar keeps its own paint).
   ============================================================================= */

/* ============================ PART A - THE BAR ============================= */
/* a rounded track holding the fill and the caption rendered TWICE (base layer +
   inside the fill, where the fill's overflow clips it) - the caption flips tone
   exactly at the progress edge. NO width transition: the component sets the
   width per frame and a transition would lag the value it reports. */
.ics-jobstatus {
  position: relative;
  height: var(--ics-jobstatus-h, 22px);
  border: var(--border-1) solid var(--ics-border);
  border-radius: var(--radius-3);
  overflow: hidden;
  background: var(--ics-progress-track);
  box-sizing: border-box;
}
.ics-jobstatus[hidden] { display: none; }   /* an in-place bar between start()/done() */
.ics-jobstatus__text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-400);
  color: var(--ics-text);
  white-space: nowrap;
}
.ics-jobstatus__value {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  overflow: hidden;                 /* clips the inner text layer (two-tone) */
  background: var(--ics-progress-fill);
  border-radius: var(--radius-3) 0 0 var(--radius-3);
}
.ics-jobstatus__value .ics-jobstatus__text {
  inset: 0 auto 0 0;                /* left-anchored; its width is pinned to the bar */
}

/* ============================ PART B - THE PAGE OVERLAY ==================== */
/* the shell's #icsprogressbarParent (adopted: the class is added at first use)
   or the component's own host (a shell without the markup). Full-cover on the
   theme surface, the job box centred; the box = the label above the bar. The
   shells' old inline geometry (margin-top:251px, width:550px, 37px bar, 18px
   label, z-index 1) is restated here in theme terms and NOWHERE else. */
.ics-jobstatus-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: var(--ics-z-overlay, 6000);
  background: var(--ics-surface);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ics-jobstatus-overlay--own { position: fixed; }         /* the built host covers the viewport */
/* a SECTION job (2026-08-27): the same overlay over ONE element - translucent so the stale content stays
   readable, a narrower box, a slimmer bar; z-index above the element's own content only */
.ics-jobstatus-overlay--section {
  position: absolute;
  z-index: 50;
  background: color-mix(in srgb, var(--ics-surface) 72%, transparent);
}
.ics-jobstatus-overlay--section > div { width: min(320px, 80%); }
.ics-jobstatus-overlay--section label { font-size: var(--font-400); margin-bottom: var(--space-2); }
.ics-jobstatus-overlay--section .ics-jobstatus { height: 18px; }
.ics-jobstatus-overlay[style*="display: none"],
.ics-jobstatus-overlay[style*="display:none"] { display: none; }
.ics-jobstatus-overlay > div,
.ics-jobstatus-overlay__box {
  margin: 0 auto;
  width: min(550px, 90%);
  text-align: center;
}
.ics-jobstatus-overlay label {
  display: block;
  margin: 0 0 var(--space-3);
  font-size: var(--font-600);
  font-weight: var(--fw-semibold);
  color: var(--ics-text);
}
.ics-jobstatus-overlay .ics-jobstatus {
  width: 100%;
  height: var(--ics-jobstatus-overlay-bar-h, 26px);
}