/* Payroll reference: snow surface, quiet outlines and a cyan progress ring. */
@media screen {
  body:is(.payroll-workspace-view,.payhub-view,.payhub-preview) {
    --pay-snow:#f8fafb; --pay-card:#ffffff; --pay-ink:#292e31;
    --pay-muted:#64757c; --pay-line:#dae4e7; --pay-cyan:#48cddd;
    --pay-soft:#e3f6f8; --pay-track:#dce6e9;
    background:var(--pay-snow);
  }
  :root[data-theme="dark"] body:is(.payroll-workspace-view,.payhub-view,.payhub-preview) {
    --pay-snow:#1c252a; --pay-card:#232f35; --pay-ink:#edf3f5;
    --pay-muted:#b0c1c8; --pay-line:#3a4b53; --pay-cyan:#66dbe7;
    --pay-soft:#263f45; --pay-track:#364950;
  }
  body.payroll-workspace-view .pm-workspace-page,
  body:is(.payhub-view,.payhub-preview) :is(#main,#public-payroll-first-page)>.pm-dashboard[data-payroll-ui] {
    background:radial-gradient(ellipse at 100% 100%,var(--pay-soft),transparent 65%),var(--pay-snow)!important;
    color:var(--pay-ink); --pm-accent:var(--pay-cyan);
  }
  body.payroll-workspace-view .pm-workspace-page :is(.pm-topbar,.pm-month,.pm-icon-button,.pm-workspace-back),
  body:is(.payhub-view,.payhub-preview) :is(#main,#public-payroll-first-page)>.pm-dashboard[data-payroll-ui] :is(.pm-topbar,.pm-icon-button,.pm-return-home,.pm-month,.pm-tool,.pm-panel.pm-distribution) {
    background:var(--pay-card); color:var(--pay-ink); border-color:transparent; box-shadow:none;
  }
  .pm-workspace-page .pm-one-team-return .pm-workspace-back { border-radius:16px; min-height:44px; gap:8px; }
  body:is(.payhub-view,.payhub-preview) :is(#main,#public-payroll-first-page)>.pm-dashboard[data-payroll-ui] .pm-heading h2 { font-weight:500; }
  body:is(.payhub-view,.payhub-preview) :is(#main,#public-payroll-first-page)>.pm-dashboard[data-payroll-ui] .pm-tool.primary { background:var(--pay-card); color:var(--pay-ink); }
  body:is(.payhub-view,.payhub-preview) :is(#main,#public-payroll-first-page)>.pm-dashboard[data-payroll-ui] .pm-reference-track { stroke:var(--pay-line); stroke-width:.8; stroke-dasharray:2 3; }
  .pm-dashboard .pm-snow-track { fill:none; stroke:var(--pay-track); stroke-width:6.5; }
  .pm-dashboard .pm-snow-arc { fill:none; stroke:var(--pay-cyan); stroke-width:6.5; stroke-linecap:butt; }
  body:is(.payhub-view,.payhub-preview) :is(#main,#public-payroll-first-page)>.pm-dashboard[data-payroll-ui] .pm-donut strong { font-weight:400; color:var(--pay-ink); }
  body:is(.payhub-view,.payhub-preview) :is(#main,#public-payroll-first-page)>.pm-dashboard[data-payroll-ui] .pm-donut :is(span,small) { color:var(--pay-muted); }
  body:is(.payroll-workspace-view,.payhub-view,.payhub-preview) .payroll-workspace .pm-nav.payroll-shortcuts { background:var(--pay-card); border:1px solid var(--pay-line); box-shadow:none; }
  body:is(.payroll-workspace-view,.payhub-view,.payhub-preview) .payroll-workspace .pm-nav.payroll-shortcuts button { background:transparent; color:var(--pay-muted); }
  :root[data-theme] body:is(.payroll-workspace-view,.payhub-view,.payhub-preview) .payroll-workspace .pm-nav.payroll-shortcuts button.active { background:var(--pay-soft); color:var(--pay-ink); }

  /* Native iOS form fills must not cover the text or the page surface. */
  #main .payroll-statement .ttools { gap:10px; margin-block:18px; }
  #main .payroll-statement .ttools :is(.srch,input,select),
  .pm-workspace-page .pmr-search :is(label,input,select) {
    background:transparent!important; background-image:none!important;
    color:var(--pay-ink,var(--ink)); box-shadow:none; opacity:1;
  }
  #main .payroll-statement .ttools :is(.srch,select),
  .pm-workspace-page .pmr-search :is(label,select) { border:1px solid var(--pay-line,var(--line)); border-radius:16px; min-height:46px; }
  #main .payroll-statement .ttools input,
  .pm-workspace-page .pmr-search input { min-width:0; font-size:16px; caret-color:var(--pay-ink); }
  #main .payroll-statement .ttools .srch input:focus { outline:none; box-shadow:none; }
  #main .payroll-statement .ttools input::placeholder,
  .pm-workspace-page .pmr-search input::placeholder { color:var(--pay-muted,var(--muted)); opacity:1; }
  #main .payroll-statement .ttools select,
  .pm-workspace-page .pmr-search select { color-scheme:light; font:inherit; font-size:14px; padding:10px 12px; }
  :root[data-theme="dark"] #main .payroll-statement .ttools select,
  :root[data-theme="dark"] .pm-workspace-page .pmr-search select { color-scheme:dark; }
  #main .payroll-statement .ttools select option { background:var(--pay-card,var(--panel)); color:var(--pay-ink,var(--ink)); }
  #main .payroll-statement .ttools :is(.tcount,.srch svg) { color:var(--pay-muted,var(--muted)); }
  #main .payroll-statement .ttools .srch:focus-within,
  #main .payroll-statement .ttools select:focus-visible { outline:2px solid var(--pay-cyan); outline-offset:2px; }
  #main .payroll-statement .ttools .srch { position:relative; padding-inline-start:40px; }
  #main .payroll-statement .ttools .srch>svg { display:none; }
  #main .payroll-statement .ttools .srch::before { content:""; position:absolute; inset-inline-start:15px; top:14px; width:12px; height:12px; border:1.7px solid var(--pay-muted); border-radius:50%; pointer-events:none; }
  #main .payroll-statement .ttools .srch::after { content:""; position:absolute; inset-inline-start:28px; top:27px; width:6px; height:1.7px; background:var(--pay-muted); transform:rotate(45deg); transform-origin:left center; pointer-events:none; }
}
@media screen and (max-width:760px) {
  #main .payroll-statement .ttools { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  #main .payroll-statement .ttools .srch { grid-column:1/-1; width:100%; }
  #main .payroll-statement .ttools select { width:100%; }
  #main .payroll-statement .ttools .tcount { grid-column:1/-1; font-size:11px; text-align:end; }
  #main .payroll-statement .payroll-mobile-list { background:transparent; border-color:var(--pay-line); border-radius:24px; padding-inline:14px; }
  #main .payroll-statement .payroll-mobile-employee { color:var(--pay-ink); border-bottom-color:var(--pay-line); }
  #main .payroll-statement .payroll-mobile-avatar { background:var(--pay-card); color:var(--pay-ink); border:1px solid var(--pay-line); border-radius:14px; }
  #main .payroll-statement .payroll-mobile-avatar:is(.avatar-1,.avatar-2) { background:var(--pay-soft); color:var(--pay-ink); border-color:transparent; }
  #main .payroll-statement .payroll-mobile-person small,
  #main .payroll-statement .payroll-mobile-money>bdi { color:var(--pay-muted); }
}