/* HRA page additions: loaded after app.css, same tokens. */
.warn-box, .info-note { display: flex; gap: var(--space-xs); align-items: flex-start; margin-top: var(--space-xs); font-size: var(--text-sm); line-height: 1.5; }
.warn-box { padding: var(--space-sm); border-radius: var(--radius-input); background: var(--color-paper-2); color: var(--color-ink); }
.warn-box .icon { color: var(--color-stamp); margin-top: var(--space-3xs); }
.info-note { color: var(--color-ink-2); }
.info-note .icon { color: var(--color-accent); margin-top: var(--space-3xs); }

/* the three-way range switch: a segmented control with all states */
.seg { display: flex; gap: var(--space-2xs); padding: var(--space-2xs); border: 1px solid var(--color-edge); border-radius: var(--radius-input); background: var(--color-sheet); }
.seg button { flex: 1; min-height: 44px; padding: 0 var(--space-xs); border: 0; border-radius: var(--space-xs); background: transparent; color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.seg button:hover { background: var(--color-paper-2); }
.seg button:active { transform: translateY(1px); }
.seg button:disabled { opacity: 0.55; cursor: not-allowed; }
.seg button.on { background: var(--color-ink); color: var(--color-paper); }
@media (max-width: 420px) { .seg button { font-size: var(--text-xs); } }

/* batch preview pager */
.pager { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); margin-bottom: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.pager button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--color-edge); border-radius: var(--radius-input); background: var(--color-sheet); color: var(--color-ink); font-size: var(--text-lg); line-height: 1; cursor: pointer; transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.pager button:hover:not(:disabled) { border-color: var(--color-accent); color: var(--color-accent-2); }
.pager button:active:not(:disabled) { transform: translateY(1px); }
.pager button:disabled { opacity: 0.55; cursor: not-allowed; }

/* the HRA receipt itself */
.doc-hra .doc-title { font-size: var(--text-xl); }
.hra-parties { display: grid; gap: 0; margin-bottom: var(--space-md); }
.hra-parties--landlord { margin-top: var(--space-md); }
.hra-row { display: flex; justify-content: space-between; gap: var(--space-sm); padding: var(--space-xs) var(--space-2xs); border-bottom: 1px dashed var(--color-rule); }
.hra-row span:first-child { flex: none; color: var(--color-muted); }
.hra-row span:last-child { text-align: right; white-space: pre-line; }
.hra-amt { margin: var(--space-md) 0 var(--space-2xs); padding: var(--space-sm) var(--space-md); border: 2px solid var(--color-ink); border-radius: var(--space-xs); background: var(--color-paper); }
.hra-amt .top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); }
.hra-amt .lbl { font-size: var(--text-xs); font-weight: 700; color: var(--color-accent-2); }
.hra-amt .amt { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; font-size: var(--text-xl); font-weight: 700; }
.amt-words { margin-top: var(--space-2xs); font-size: var(--text-sm); font-style: italic; color: var(--color-ink-2); }
.hra-sign { display: flex; justify-content: flex-end; margin-top: var(--space-2xl); }
.hra-sign div { width: 220px; padding-top: var(--space-2xs); border-top: 1.5px solid var(--color-ink); font-size: var(--text-xs); color: var(--color-muted); text-align: center; }
.rstamp { position: absolute; bottom: var(--space-2xl); left: var(--space-xl); display: flex; flex-direction: column; align-items: center; justify-content: center; width: 72px; height: 88px; border: 2px dashed var(--color-stamp); border-radius: var(--space-2xs); color: var(--color-stamp); text-align: center; transform: rotate(-4deg); background: repeating-linear-gradient(45deg, color-mix(in oklab, var(--color-stamp) 6%, transparent) 0 4px, transparent 4px 8px); }
.rstamp .r1 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); line-height: 1; }
.rstamp .rl { margin-top: var(--space-2xs); font-size: var(--text-xs); line-height: 1.2; }