/* =============================================================================
   ics-jobstatus — the paint layer of the job / process status family: the
   progress bar, the page overlay that hosts it, and the busy state of the
   control that fired the job.
     PART A  the bar        `.ics-jobstatus` — a rounded track, the fill, and a
                            two-tone caption.
     PART B  the overlay    `.ics-jobstatus-overlay` — the full-cover page status
                            (the shell's #icsprogressbarParent, or the host the
                            component builds) and its SECTION variant over one
                            element.
     the busy action        `.ics-busy` — the control that fired a job.
   CLASSES OWNED: .ics-jobstatus .ics-jobstatus__text .ics-jobstatus__value
   .ics-jobstatus-overlay (+ --own / --section) .ics-jobstatus-overlay__box
   .ics-busy. Only the own names are painted: a `.progressbar-*` element belongs
   to another implementation on the page and is untouched.
   TOKENS read: --ics-jobstatus-h · --ics-jobstatus-overlay-bar-h ·
   --ics-progress-track · --ics-progress-fill · --ics-z-overlay · --ics-surface ·
   --ics-text · --ics-border · --radius-3 · --border-1 · --font-400 · --font-600 ·
   --fw-semibold · --space-2 · --space-3.
   LINK ORDER. Link after tokens.css. Linked by _Meta, _MobileLayout, _AuthMeta
   and the PdfViewer page; the shell's overlay markup relies on it, so a shell
   never authors inline geometry for the overlay.
   ============================================================================= */

/* ============================ 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 (the class is added at first use) or the
   component's own host (a shell without the markup). Full-cover on the surface,
   the job box centred; the box = the label above the bar. The overlay's geometry
   (a 550px box capped at 90%, the label size, the bar height, the z-band) lives
   HERE and nowhere else — never as inline style on the shell markup. */
.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: 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);
}

/* ---- THE BUSY ACTION BUTTON — the control that fired a job, while the job runs. Every
   shell links this sheet, so the paint belongs here rather than in a runtime injection.
   `pointer-events: none` is the load-bearing declaration, and it is here for the ANCHOR
   families: on <button>/<input> the native `disabled` property makes the browser suppress the
   click itself, but an anchor has no such property and the Button component's soft disable
   deliberately keeps jQuery handlers bound - so without this line a dimmed anchor still fires
   its handler on every press. The flag is the contract; this makes the surface agree with it.
   Opacity and cursor are stated because a bare anchor-as-button matches neither
   `.ess-btn.disabled` nor the utility framework's `.btn.disabled` and would otherwise go busy
   with no visible change. This is the ONLY declaration of `.ics-busy`; keep it that way. */
.ics-busy {
  opacity: .5;
  cursor: default;
  pointer-events: none;
}