/* Opt-in enhancements for calculators with explainable results. */
.scope-note { border-left: 3px solid #2d8b73; padding: .75rem 1rem; background: #edf6f2; border-radius: 0 .5rem .5rem 0; }
.scope-note p { margin: .3rem 0; }
.example-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; }
.example-actions p { width: 100%; margin: 0; font-size: .875rem; color: #4b5b70; }
.calculator button[type="submit"] + .example-actions { margin-top: 1rem; }
.example-actions button, .secondary-button { width: auto; max-width: 100%; min-height: 44px; margin: 0; padding: .6rem .85rem; background: #f1f5fa; color: #173c70; border: 1px solid #b9c9dc; font-size: .9rem; }
.example-actions button:hover, .secondary-button:hover { background: #e3eefb; color: #13243c; }
.example-actions button:disabled { background: #edf0f3; color: #5b6778; cursor: not-allowed; }
.calculation-steps { margin: 1.25rem 0; padding: 1rem; background: #f3f6fb; border-radius: .6rem; overflow-wrap: anywhere; }
.calculation-steps h3 { font-size: 1rem; margin: 0 0 .5rem; }
.calculation-steps ol { margin: 0; padding-left: 1.3rem; }
.calculation-steps li + li { margin-top: .65rem; }
.next-step { display: grid; gap: .4rem; border-left: 3px solid #2d8b73; padding: .7rem 1rem; }
.next-step a, .content-jumps a, article a { color: #1754a5; text-underline-offset: .18em; }
.result-actions { display: grid; gap: .5rem; margin-top: 1.25rem; }
.result-actions p:empty { display: none; }
.result-actions textarea { box-sizing: border-box; width: 100%; min-width: 0; font: inherit; padding: .75rem; border: 1px solid #8999af; border-radius: .4rem; }
.content-jumps { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .9rem; }
.content-jumps a { padding: .4rem 0; }
.worked-example { background: #fff; border: 1px solid #d9e0eb; border-radius: .75rem; padding: 1rem; margin: 1rem 0; }
.worked-example h3 { font-size: 1rem; margin-top: 0; }
.worked-example p:last-child { margin-bottom: 0; }
.result-number { overflow-wrap: anywhere; }
.result-summary { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
.calculator :focus-visible, .content-jumps :focus-visible { outline: 3px solid #1754a5; outline-offset: 3px; }
#annual-leave-result:not(:empty) { border-top: 1px solid #d9e0eb; margin-top: 1.5rem; padding-top: 1rem; }
@media (max-width: 36rem) { .example-actions button { flex: 1 1 9rem; } }