/* The agreement is always white paper with dark text, in every theme, so it reads like the printed contract. The agreement as paper: used by the signing page and by the staff preview. Scoped to .agp so it never touches the app's own styles. */
.agp { --p-bg: #fff; --p-ink: #1F2328; --p-muted: #5C6670; --p-line: #DDE3E8; --p-navy: #172B46; --p-green: #2B4A7A; --p-green-soft: #E8EDF5; --p-accent: #2B4F8C; --p-mark-bg: #E3EAF5; --p-mark-ink: #1F3A63; --p-mint: #9DB8E6;
  background: var(--p-bg); color: var(--p-ink); border: 1px solid var(--p-line); border-radius: 6px; padding: 30px 36px; font: 14px/1.55 Roboto, Arial, sans-serif; box-shadow: 0 8px 28px rgba(23,43,70,.12); }
@media (max-width: 600px) { .agp { padding: 18px 14px; } }
.agp h1 { font: 600 23px/1.2 Georgia, serif; margin: 0; }
.agp .between { color: var(--p-muted); margin: 4px 0 2px; }
.agp h4 { font: 600 16px Georgia, serif; margin: 20px 0 6px; color: var(--p-navy); }
.agp p { margin: 6px 0; max-width: 80ch; }
.agp ul { margin: 6px 0; padding-left: 20px; }
.agp ol.sec { list-style: none; margin: 6px 0; padding: 0; }
.agp ol.sec li { margin: 6px 0; max-width: 80ch; padding-left: 34px; position: relative; }
.agp ol.sec .no { position: absolute; left: 0; color: var(--p-muted); font-variant-numeric: tabular-nums; }
.agp mark.dyn { background: var(--p-mark-bg); color: var(--p-mark-ink); padding: 0 4px; border-radius: 4px; font-weight: 500; }
.agp table { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 13px; }
.agp th { background: var(--p-green); color: #fff; text-align: left; padding: 6px 9px; font-weight: 500; }
.agp td { border-bottom: 1px solid var(--p-line); padding: 6px 9px; vertical-align: top; }
.agp .stamp { font-size: 11px; color: var(--p-muted); }
.agp .initbox { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; }
.agp .initbtn { width: 92px; height: 40px; border: 2px dashed var(--p-green); background: var(--p-green-soft); color: var(--p-accent); border-radius: 8px; font: 500 12px Roboto, Arial, sans-serif; cursor: pointer; }
.agp .initbtn.done { border-style: solid; font: 600 22px "Brush Script MT", "Segoe Script", cursive; color: var(--p-navy); background: var(--p-bg); cursor: default; }
.agp .sigl { margin-top: 22px; color: var(--p-muted); font-size: 13px; }