/* Handbook composition: existing Modal, Button, Select and Table primitives. */
.payroll-page .payroll-guide-open { align-self: flex-end; width: auto; }
.payroll-guide-card .modal-header p, .payroll-guide-image-card .modal-header p { margin: var(--ui-space-1) 0 0; font-size: var(--ui-font-size-secondary); }
.payroll-guide-layout { display: grid; grid-template-columns: calc(var(--ui-space-16) * 3.5) minmax(0, 1fr); gap: var(--ui-space-6); align-items: start; }
.payroll-guide-navigation { display: grid; gap: var(--ui-space-1); position: sticky; top: 0; }
.payroll-guide-navigation .ui-button { display: flex; gap: var(--ui-space-2); justify-content: flex-start; text-align: left; width: 100%; padding: var(--ui-space-2) var(--ui-space-3); font-size: var(--ui-font-size-secondary); border-color: transparent; box-shadow: none; }
.payroll-guide-navigation button span { color: var(--ui-text-muted); font-variant-numeric: tabular-nums; }
.payroll-guide-navigation button.active { background: var(--ui-accent-soft); color: var(--ui-accent-active); border-color: var(--ui-border-strong); }
.payroll-guide-navigation button.active span { color: inherit; }
.payroll-guide-main { min-width: 0; }
.payroll-guide-mobile-nav { display: none; }
.payroll-guide-article { min-width: 0; color: var(--ui-text-primary); font-size: var(--ui-font-size-body); line-height: var(--ui-line-height-body); }
.payroll-guide-article h4 { margin: var(--ui-space-6) 0 var(--ui-space-3); font-size: var(--ui-font-size-card-title); }
.payroll-guide-article #payrollGuideChapterTitle { margin-top: var(--ui-space-1); font-size: var(--ui-font-size-section-title); }
.payroll-guide-kicker { margin: 0; color: var(--ui-text-muted); font-size: var(--ui-font-size-secondary); }
.payroll-guide-article p { margin-bottom: var(--ui-space-4); }
.payroll-guide-article li { padding-left: var(--ui-space-1); margin-bottom: var(--ui-space-3); }
.payroll-guide-article :is(ol, ul) { padding-left: var(--ui-space-5); }
.payroll-guide-lead { font-size: var(--ui-font-size-card-title); }
.payroll-guide-note, .payroll-guide-equation { margin-block: var(--ui-space-4); padding: var(--ui-space-4); border: var(--ui-border-card); border-left: var(--ui-space-1) solid var(--ui-accent-primary); border-radius: var(--ui-radius-control); background: var(--ui-bg-subtle); }
.payroll-guide-note strong { display: block; margin-bottom: var(--ui-space-1); }
.payroll-guide-figure { margin: var(--ui-space-5) 0; }
.payroll-guide-image-button { display: block; width: 100%; padding: 0; text-align: left; background: var(--ui-bg-subtle); color: var(--ui-text-secondary); border: var(--ui-border-card); border-radius: var(--ui-radius-control); overflow: hidden; box-shadow: none; }
.payroll-guide-image-button img { display: block; width: 100%; height: auto; }
.payroll-guide-image-button span { display: block; padding: var(--ui-space-2) var(--ui-space-3); font-size: var(--ui-font-size-secondary); text-align: right; }
.payroll-guide-figure figcaption { margin-top: var(--ui-space-2); color: var(--ui-text-secondary); font-size: var(--ui-font-size-secondary); }
.payroll-guide-table { min-width: 0; width: 100%; }
.payroll-guide-table :is(th, td) { white-space: normal; vertical-align: top; }
.payroll-guide-table tbody th { width: 28%; color: var(--ui-text-primary); }
.payroll-guide-footer, .payroll-guide-image-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3); border-top: var(--ui-border-card); padding-top: var(--ui-space-3); }
.payroll-guide-footer button, .payroll-guide-image-footer button { flex: 0 0 auto; width: auto; }
.payroll-guide-footer span { text-align: center; font-size: var(--ui-font-size-secondary); }
.payroll-guide-image-footer p { margin: 0; font-size: var(--ui-font-size-secondary); }
#payrollGuideImageBody { display: block; }
#payrollGuideLargeImage { display: block; width: 100%; max-width: 100%; height: auto; }
#payrollGuideImageBody.is-original #payrollGuideLargeImage { width: auto; max-width: none; }
@media (max-width: 760px) {
  .payroll-guide-layout { grid-template-columns: minmax(0, 1fr); }
  .payroll-guide-navigation { display: none; }
  .payroll-guide-mobile-nav { display: grid; gap: var(--ui-space-1); margin-bottom: var(--ui-space-4); }
  .payroll-guide-mobile-nav select { min-width: 0; max-width: 100%; }
  .payroll-guide-image-footer { flex-wrap: wrap; }
}