.sleeper-pay{margin:24px 0;padding:22px;border:1px solid #b9c4cc;border-radius:16px;background:#faf9f6;color:#253746}.sleeper-pay h3{font-size:1.4rem;margin:0 0 12px}.sleeper-pay h4{margin:24px 0 14px}.sleeper-pay p{line-height:1.6}.pay-inputs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:18px 0}.sleeper-pay label{display:flex;flex-direction:column;gap:8px;font-size:16px;font-weight:650}.sleeper-pay input:not([type=checkbox]){box-sizing:border-box;width:100%;min-width:0;min-height:46px;border:1px solid #8195a4;border-radius:8px;padding:10px;background:#fff;color:#253746;font:inherit}.sleeper-pay .pay-doubles{flex-direction:row;align-items:center;margin-top:20px}.pay-doubles input{width:22px;height:22px;flex-shrink:0}.sleeper-pay .pay-help,.pay-rate-note{font-size:14px;line-height:1.6}.pay-results{margin-top:24px}.pay-results>div{display:flex;justify-content:space-between;gap:18px;padding:14px 0;border-bottom:1px solid #d6dce0;line-height:1.5}.pay-results strong{white-space:nowrap}.pay-results .pay-grand{font-size:20px;border-top:2px solid #8195a4;border-bottom:0;margin-top:10px}.pay-grand small{font-size:14px;font-weight:400}@media(max-width:480px){.pay-inputs{grid-template-columns:1fr}.sleeper-pay{padding:16px}.pay-results>div{flex-wrap:wrap;gap:6px}.pay-results strong{margin-left:auto}}

.sleeper-pay select{width:100%;min-height:46px;border:1px solid #8195a4;border-radius:8px;padding:10px;background:#fff;color:#253746;font:inherit;margin-bottom:12px}

.pay-share-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:20px}.pay-share-actions button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 0;background:transparent;border:0;color:inherit;font:inherit;font-weight:650;cursor:pointer}.pay-share-actions button:disabled{opacity:.45;cursor:default}.pay-share-actions button:focus-visible{outline:2px solid currentColor;outline-offset:4px}

/* Keep native date controls within narrow tiles, including Safari. */
.sleeper-pay,.sleeper-pay label,.pay-inputs{min-width:0;max-width:100%;box-sizing:border-box}
.sleeper-pay select,.sleeper-pay input[type=date]{box-sizing:border-box;min-width:0;max-width:100%;width:100%}
.sleeper-pay input[type=date]{display:block;appearance:none;-webkit-appearance:none;overflow:hidden}
.sleeper-pay input[type=date]::-webkit-date-and-time-value{min-width:0;text-align:left}
.sleeper-pay input[type=date]::-webkit-datetime-edit{min-width:0;padding:0}

.pay-delay-dialog{box-sizing:border-box;width:min(720px,calc(100% - 24px));max-height:90dvh;overflow:auto;border:1px solid #8195a4;border-radius:16px;padding:24px;background:#fff;color:#253746}.pay-delay-dialog::backdrop{background:#0009}.pay-delay-heading{display:flex;align-items:start;justify-content:space-between;gap:16px}.pay-delay-dialog fieldset{min-width:0;margin:20px 0;padding:16px;border:1px solid #b9c4cc;border-radius:10px}.pay-delay-dialog legend{font-weight:700}.pay-delay-dialog button,.pay-delay-open{min-height:44px;padding:10px 16px;border:1px solid #8195a4;border-radius:8px;background:#fff;color:#253746;font:inherit;cursor:pointer}.pay-delay-dialog button:disabled{opacity:.5;cursor:default}.pay-delay-dialog .pay-inputs{margin-top:8px}.delay-row-status{font-weight:600}.pay-delay-dialog p{font-size:14px}.pay-delay-dialog label{min-width:0}@media(max-width:480px){.pay-delay-dialog{padding:16px}.pay-delay-dialog fieldset{padding:12px}}
@media print{.sleeper-pay,.pay-delay-dialog{background:#fff!important;color:#000!important}}

/* Native Safari date/time controls must shrink inside the label's grid track. */
.pay-delay-dialog,.pay-delay-dialog fieldset,.pay-delay-dialog .pay-inputs,.pay-delay-dialog label{min-inline-size:0;max-inline-size:100%;box-sizing:border-box}
.pay-delay-dialog .pay-inputs>label{width:100%;overflow:visible}
.sleeper-pay .pay-delay-dialog input[type=date],.sleeper-pay .pay-delay-dialog input[type=time]{display:block;appearance:none;-webkit-appearance:none;box-sizing:border-box;width:100%;min-width:0;max-width:100%;inline-size:100%;min-inline-size:0;max-inline-size:100%;font-size:16px;overflow:hidden}
.pay-delay-dialog input:is([type=date],[type=time])::-webkit-date-and-time-value{min-width:0;min-inline-size:0;text-align:left}
.pay-delay-dialog input:is([type=date],[type=time])::-webkit-datetime-edit{min-width:0;min-inline-size:0;padding:0}
.pay-delay-dialog input:is([type=date],[type=time])::-webkit-datetime-edit-fields-wrapper{min-width:0;padding:0}
.pay-delay-heading h3{min-width:0;margin:0;flex:1}
.pay-delay-dialog .delay-close{display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;min-width:44px;padding:10px;line-height:1}
.pay-delay-dialog .delay-close svg{display:block;flex:none}
.pay-delay-dialog{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

.pay-stop-fields{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:14px 0}.pay-stop-fields>label{flex:0 1 140px;font-size:14px}.pay-stop-fields>.pay-stop-number{flex:0 0 90px}.pay-stop-fields input[type=number]{color:#000;background:#fff}.pay-stop-fields output{display:flex;align-items:center;min-height:46px;font-weight:700}.pay-stop-fields>.pay-doubles{flex:0 1 110px;margin:0;min-height:46px;font-size:13px}.pay-stop-difference{font-size:14px;margin:6px 0}.pay-stop-fields .pay-stop-clock{font-size:16px;padding:8px}.pay-stop-fields>label:first-child{flex-basis:100px}@media(max-width:480px){.pay-stop-fields{gap:10px}.pay-stop-fields>label{flex-basis:calc(50% - 10px)}}

.pay-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pay-title-row h3{margin:0}
.sleeper-pay .pay-info-open{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:8px;flex-shrink:0}
.pay-info-dialog{width:min(640px,calc(100vw - 32px));max-height:80vh;overflow:auto;padding:24px;border:1px solid #b79b73;border-radius:14px}
.pay-info-dialog::backdrop{background:rgb(0 0 0 / .5)}
.pay-info-dialog p{line-height:1.5}

.pay-info-dialog,.pay-title-row{box-sizing:border-box;min-width:0;max-width:100%}.pay-title-row h3{min-width:0;flex:1;overflow-wrap:normal;word-break:normal;line-height:1.25}.sleeper-pay button{max-width:100%;overflow-wrap:anywhere}

.pay-draft-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:12px 0 18px;min-width:0}.pay-draft-row .pay-help{flex:1 1 240px;margin:0}.sleeper-pay .pay-reset{flex:0 0 auto;white-space:nowrap;overflow-wrap:normal;min-height:44px;padding:10px 14px;border:1px solid #8195a4;border-radius:8px;background:#fff;color:#253746;font:inherit;cursor:pointer}@media(max-width:480px){.pay-draft-row{flex-direction:column;align-items:flex-start}.pay-draft-row .pay-help{flex:auto;width:100%}}