/* Presentation only: custom history/toggle controls never enter help handling.
   Keep the visible glyph independent of each control's hit target. */
button.ui-help, .ui-info {
  position:relative;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;
  width:24px;min-width:24px;height:24px;min-height:24px;margin-inline-start:4px;padding:0;
  border:0;border-radius:0;background:transparent;color:var(--tx3,#555);font-size:0!important;line-height:1;
  flex:none;vertical-align:middle;font-family:var(--f);text-transform:none;letter-spacing:normal;
}
button.ui-help, button.ui-info { cursor:pointer;padding:0!important; }
/* Spreadsheet button rules size hit targets, not the hidden source glyph. */
.payroll-workspace .tbl button.ui-help,
.payroll-workspace .tbl button.ui-info {font-size:0!important;padding:0!important}
button.ui-help::before, .ui-info::before {
  content:'i';display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
  width:16px;height:16px;flex:none;border:1px solid var(--bdr,#ccc);border-radius:0;background:var(--bg3,#fff);
  color:var(--tx3,#555);font-family:var(--f);font-size:10px;font-weight:700;font-style:normal;line-height:1;text-transform:none;letter-spacing:normal;
}
button.ui-help:hover::before, .ui-info:hover::before,
button.ui-help:focus-visible::before, .ui-info:focus-visible::before {color:var(--acc,#234bb0);border-color:var(--acc,#234bb0)}
button.ui-help:focus-visible, button.ui-info:focus-visible {outline:2px solid var(--acc,#234bb0)!important;outline-offset:1px!important}
.ui-info.rev-progress-history, .ui-info.rev-mq-history {width:20px;min-width:20px;height:20px;min-height:20px;margin:0}
.est-drv[role="button"]:focus-visible { outline: 3px solid var(--acc, #234bb0); outline-offset: 3px; }
.ui-help-dialog {
  box-sizing: border-box;
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 24px;
  border: 1px solid var(--brd, #777);
  border-radius:0;
  background: var(--bg2, #fff);
  color: var(--tx, #172334);
  box-shadow: 0 16px 60px #0005;
}
.ui-help-dialog::backdrop { background: #0007; }
.ui-help-dialog h2 { margin: 0 0 12px; font-size: 18px; }
.ui-help-dialog p { font-size: 15px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.ui-help-dialog button { min-height: 44px; min-width: 72px; }
/* KPI help shares the established glyph, with a larger touch hit area. */
.kpi{display:flex;flex-direction:column}
.kpi-l{flex:1}
.kpi-l,.snapshot-metric-label,.est-kpi-ll,.get-workbook .gw-kpi>small {min-height:24px}
@media(pointer:coarse) {
  .kpi .ui-help,.snapshot-metric .ui-help,.est-kpi .ui-help,.est-kpi-lg .ui-help,.gw-kpi .ui-help {
    width:44px;min-width:44px;height:44px;min-height:44px;
  }
  .kpi-l,.snapshot-metric-label,.est-kpi-ll,.get-workbook .gw-kpi>small {min-height:44px}
}