/* Scoped to the report pages so their own generic label and button styles never reach it.
   The date control every work report page shares (report-period.js): period buttons, ‹ date ›,
   back to today, how fresh the figures are, and refresh. One look on the overview, the analysis
   and the daily records. */
:is(#workOverview, #agentAnalysis, #dailyReportView) .rp-bar { --rp-line: rgba(31, 35, 33, .1); --rp-soft: #f6f5f1; --rp-ink: #1f2321; --rp-muted: #6d726f; --rp-honey: #ffb028; --rp-link: #9a6500;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-width: 0; }
:is(#workOverview, #agentAnalysis, #dailyReportView) .rp-spans { display: inline-flex; gap: 3px; padding: 3px; border-radius: 12px; background: #eceeed; }
:is(#workOverview, #agentAnalysis, #dailyReportView) .rp-spans button { min-height: 36px; border: 0; background: transparent; padding: 6px 14px; border-radius: 9px; color: #64696b; font: inherit; font-size: 14px; line-height: 1.2; cursor: pointer; white-space: nowrap; }
:is(#workOverview, #agentAnalysis, #dailyReportView) .rp-spans button:hover { color: var(--rp-ink); }
:is(#workOverview, #agentAnalysis, #dailyReportView) .rp-spans button[aria-pressed="true"] { background: #fff; color: #262a2c; font-weight: 650; box-shadow: 0 1px 4px #182a3510; }
:is(#workOverview, #agentAnalysis, #dailyReportView) .rp-date { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--rp-line); border-radius: 12px; background: #fff; }
:is(#workOverview, #agentAnalysis, #dailyReportView) .rp-step, :is(#workOverview, #agentAnalysis, #dailyReportView) .rp-refresh { display: grid; place-items: center; width: 36px; height: 36px; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 9px; background: none; color: #5f6461; cursor: pointer; }
:is(#workOverview, #agentAnalysis, #dailyReportView) .rp-step svg, :is(#workOverview, #agentAnalysis, #dailyReportView) .rp-refresh svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
:is(#workOverview, #agentAnalysis, #dailyReportView) .rp-step:hover:not(:disabled), :is(#workOverview, #agentAnalysis, #dailyReportView) .rp-refresh:hover:not(:disabled) { background: var(--rp-soft); color: var(--rp-ink); }
:is(#workOverview, #agentAnalysis, #dailyReportView) .rp-step:disabled { color: #cfccc4; cursor: default; }
:is(#workOverview, #agentAnalysis, #dailyReportView) .rp-pick { position: relative; display: inline-flex; flex-direction: row; align-items: center; min-width: 0; min-height: 36px; margin: 0; padding: 0 10px; border-radius: 9px; cursor: pointer; font-size: 14px; font-weight: 650; line-height: 1; color: var(--rp-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
:is(#workOverview, #agentAnalysis, #dailyReportView) .rp-pick:hover { background: var(--rp-soft); }
:is(#workOverview, #agentAnalysis, #dailyReportView) .rp-pick .rp-label { overflow: hidden; text-overflow: ellipsis; }
:is(#workOverview, #agentAnalysis, #dailyReportView) .rp-pick input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
:is(#workOverview, #agentAnalysis, #dailyReportView) .rp-today { min-height: 36px; border: 0; background: none; padding: 0 4px; font: inherit; font-size: 13px; font-weight: 650; color: var(--rp-link); cursor: pointer; white-space: nowrap; }
:is(#workOverview, #agentAnalysis, #dailyReportView) .rp-today:hover { text-decoration: underline; }
:is(#workOverview, #agentAnalysis, #dailyReportView) .rp-today.hidden { display: none; }
:is(#workOverview, #agentAnalysis, #dailyReportView) .rp-fresh { margin-left: auto; font-size: 12px; line-height: 1.4; color: var(--rp-muted); white-space: nowrap; }
:is(#workOverview, #agentAnalysis, #dailyReportView) .rp-fresh:empty { display: none; }
:is(#workOverview, #agentAnalysis, #dailyReportView) .rp-fresh:not(:empty)::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #1baf7a; vertical-align: 1px; }
:is(#workOverview, #agentAnalysis, #dailyReportView) .rp-fresh.is-off::before { background: #b9b4a8; }
:is(#workOverview, #agentAnalysis, #dailyReportView) .rp-refresh { width: 38px; height: 38px; border: 1px solid var(--rp-line); border-radius: 12px; background: #fff; }
:is(#workOverview, #agentAnalysis, #dailyReportView) .rp-refresh:disabled { cursor: default; }
:is(#workOverview, #agentAnalysis, #dailyReportView) .rp-refresh.is-busy svg { animation: rp-spin .8s linear infinite; }
@keyframes rp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rp-refresh.is-busy svg { animation: none; } }
:is(#workOverview, #agentAnalysis, #dailyReportView) .rp-step:focus-visible, :is(#workOverview, #agentAnalysis, #dailyReportView) .rp-refresh:focus-visible, :is(#workOverview, #agentAnalysis, #dailyReportView) .rp-today:focus-visible, :is(#workOverview, #agentAnalysis, #dailyReportView) .rp-spans button:focus-visible, :is(#workOverview, #agentAnalysis, #dailyReportView) .rp-pick:focus-within { outline: 2px solid var(--rp-honey); outline-offset: 1px; }

/* Phones: the period buttons take a full row; ‹ date › and refresh share the next; how fresh
   the figures are goes last, on its own line. */
@media (max-width: 720px) {
  :is(#workOverview, #agentAnalysis, #dailyReportView) .rp-spans { display: flex; width: 100%; }
  :is(#workOverview, #agentAnalysis, #dailyReportView) .rp-spans button { flex: 1; padding: 6px 4px; }
  :is(#workOverview, #agentAnalysis, #dailyReportView) .rp-date { flex: 1 1 0; min-width: 0; justify-content: space-between; }
  :is(#workOverview, #agentAnalysis, #dailyReportView) .rp-step { width: 40px; height: 40px; }
  :is(#workOverview, #agentAnalysis, #dailyReportView) .rp-pick { min-height: 40px; justify-content: center; }
  :is(#workOverview, #agentAnalysis, #dailyReportView) .rp-refresh { width: 42px; height: 42px; order: 3; }
  :is(#workOverview, #agentAnalysis, #dailyReportView) .rp-today { order: 2; }
  :is(#workOverview, #agentAnalysis, #dailyReportView) .rp-fresh { order: 4; flex-basis: 100%; margin-left: 0; }
}

/* Content that is being replaced dims while the next day or period is on its way. */
#agentAnalysis .analysis-data-body { transition: opacity .15s; }
#agentAnalysis .analysis-data-body.is-stepping { opacity: .45; pointer-events: none; }

/* Page intro: one line on wide screens; phones go straight to the tabs. */
@media (max-width: 720px) { #reports .report-intro { display: none; } }

/* Loading placeholders shaped like each page. */
#workOverview .overview-skeleton-bars { display: flex; align-items: flex-end; gap: 8px; height: 150px; padding: 0 4px; }
#workOverview .overview-skeleton-bars .sk { flex: 1; border-radius: 4px 4px 0 0; }
#agentAnalysis .analysis-sk-headline { min-height: 0; }
#agentAnalysis .analysis-sk-headline .sk { background: linear-gradient(90deg, #3a3631 0%, #4a453f 45%, #3a3631 90%); background-size: 240% 100%; }
#agentAnalysis .analysis-sk-spark { height: 40px; margin-top: auto; }
#agentAnalysis .analysis-data > .analysis-section-head { align-items: center; }
#agentAnalysis .analysis-period { flex: 1 1 480px; justify-content: flex-end; }
#agentAnalysis .analysis-period .rp-fresh { margin-left: 0; }
@media (max-width: 720px) { #agentAnalysis .analysis-period { flex-basis: 100%; } }
#agentAnalysis .analysis-sk-chart { height: 180px; margin-top: 14px; border-radius: 10px; }
#dailyReportView .daily-skeleton .daily-summary header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
#dailyReportView .daily-skeleton .daily-card .sk-block { margin-top: 12px; }