.tile.salary-tile{grid-column:span 2}
.salary-tile .card.salary-card{display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;gap:0;width:100%;height:100%;padding:10px;border:1px solid #e7e8eb;border-radius:20px;background:#fff8e8;text-align:left;color:var(--text,#202123);overflow:hidden;line-height:1;transition:transform 120ms cubic-bezier(.2,.8,.2,1),background-color .2s,border-color .2s}
.salary-tile .salary-card:hover{transform:translateY(-1px)}
.salary-tile .salary-card:active{transform:scale(.985)}
.salary-heading{display:flex;align-items:center;justify-content:space-between;gap:4px;height:14px;white-space:nowrap;font-size:11px;line-height:14px;font-weight:600;color:#747980;flex:none}
.salary-state{color:#747980;font-size:11px;font-weight:400}
.salary-amount{--salary-digit-count:6;display:flex;align-items:baseline;height:34px;line-height:34px;color:#97601c;font-size:min(30px,calc((100cqw - 32px)/((var(--salary-digit-count) + .95)*.6)));font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.2px;white-space:nowrap;flex:none}
.salary-currency{font-size:.68em;line-height:1;margin-right:.16em;flex:none}
.salary-digits{display:flex;align-items:baseline;line-height:34px;height:34px;overflow:hidden}
/* In-flow overlapping grid faces provide a real text baseline to the currency,
   while retaining the two-face rolling animation without changing cell widths. */
.salary-digit{position:relative;display:grid;flex:none;width:.6em;height:34px;line-height:34px;text-align:center;overflow:hidden}
.salary-face{grid-area:1/1;display:block;line-height:34px;will-change:auto}
/* money() always renders two decimal places; the third-last cell is the dot. */
.salary-amount:not(.salary-unset) .salary-digit:nth-last-child(3){width:.28em}
.salary-copy{position:relative;display:block;height:14px;line-height:14px;font-size:11px;color:#747980;white-space:nowrap;overflow:hidden;flex:none}
.salary-copy-face{display:block;position:absolute;inset:0;overflow:hidden;text-overflow:ellipsis}
.salary-countdown{display:block;text-align:right;font-size:11px;line-height:14px;height:14px;color:#747980;white-space:nowrap;flex:none}
.salary-unset{font-size:27px}
.salary-unset .salary-digit{width:1em;text-align:left}
.editing .salary-tile .salary-card{padding:10px;transform:none;pointer-events:none}
[data-theme=dark] .salary-tile .salary-card{background:#29251c;border-color:#383b40}
[data-theme=dark] .salary-amount{color:#f2c979}
[data-theme=dark] .salary-heading,[data-theme=dark] .salary-state,[data-theme=dark] .salary-copy,[data-theme=dark] .salary-countdown{color:#acb0b7}
@container(max-width:155px){
 .salary-tile .card.salary-card{padding:9px}
 .salary-heading{font-size:10px;line-height:12px;height:12px}.salary-state{font-size:10px}
 .salary-amount{font-size:min(26px,calc((100cqw - 28px)/((var(--salary-digit-count) + .95)*.6)));height:30px;line-height:30px}
 .salary-digits,.salary-digit,.salary-face{height:30px;line-height:30px}
 .salary-copy,.salary-countdown{font-size:10px;line-height:12px;height:12px}
 .editing .salary-tile .salary-card{padding:9px}
}
#salary-dialog.salary-dialog{width:min(354px,calc(100vw - 28px));max-height:min(88dvh,780px);padding:24px;margin:auto;border-radius:28px;border:1px solid var(--border,#e7e8eb);background:var(--surface,#fff);color:var(--text,#202123);overflow:auto;overscroll-behavior:contain;animation:none;box-shadow:0 24px 80px #0002}
#salary-dialog::backdrop{background:#20212340;backdrop-filter:blur(3px)}
[data-theme=dark] #salary-dialog::backdrop{background:#0009}
.salary-dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
#salary-dialog h2{margin:0;font-size:22px;line-height:32px;font-weight:600;letter-spacing:-.4px}
.salary-close{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:50%;padding:0;background:var(--control,#f1f2f5);color:var(--muted,#747980)}
.salary-close img{display:block;width:16px;height:16px;filter:var(--icon-filter,none)}
.salary-close:hover{background:var(--border,#e7e8eb)}
.salary-dialog-content{display:flex;flex-direction:column;gap:16px}
.salary-day-date{font-size:12px;line-height:16px;color:var(--muted,#747980)}
.salary-day-time{font-size:20px;line-height:28px;font-weight:600;letter-spacing:-.3px}
.salary-note{margin:0;font-size:13px;line-height:20px;color:var(--muted,#747980);text-wrap:pretty}
.salary-day-summary{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:18px;background:var(--control,#f1f2f5);font-size:13px;line-height:20px}
.salary-day-summary p{margin:0}
.salary-day-actions{display:grid;gap:8px}
.salary-action{min-height:44px;width:100%;padding:11px 14px;border-radius:14px;font-size:14px;line-height:20px;background:var(--control,#f1f2f5);color:var(--text,#202123);transition:transform 120ms cubic-bezier(.2,.8,.2,1),background-color .16s}
.salary-action:active,.salary-close:active,.salary-link:active{transform:scale(.985)}
.salary-primary{background:#516f59;color:#fff}
[data-theme=dark] .salary-primary{background:#94b99b;color:#20241e}
.salary-quiet{background:transparent;color:var(--muted,#747980)}
.salary-link{background:transparent;color:var(--muted,#747980);border-radius:14px;padding:10px 6px;min-height:44px;line-height:20px;font-size:13px;transition:transform 120ms}
.salary-time-details{padding:12px 14px;border:1px solid var(--border,#e7e8eb);border-radius:18px}
.salary-time-details summary{font-size:13px;line-height:20px;cursor:pointer;min-height:24px}
.salary-time-details[open] summary{margin-bottom:12px}
.salary-time-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#salary-dialog .salary-field{display:flex;flex-direction:column;gap:7px;margin:0;font-size:12px;line-height:18px;color:var(--muted,#747980)}
#salary-dialog .salary-field input,#salary-dialog .salary-field select{width:100%;min-height:44px;padding:10px 12px;font-size:16px;line-height:22px;background:var(--control,#f1f2f5);color:var(--text,#202123);border:1px solid var(--border,#e7e8eb);border-radius:12px}
#salary-dialog .salary-field select{height:44px}
.salary-time-details .salary-note{font-size:12px;margin:12px 0;line-height:18px}
.salary-settings-form{display:grid;gap:16px}
.salary-weekdays{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;border:0;padding:0;margin:0;min-width:0}
.salary-weekdays legend{padding:0;margin-bottom:8px;font-size:12px;line-height:18px;color:var(--muted,#747980)}
#salary-dialog .salary-weekday{position:relative;display:flex;align-items:center;justify-content:center;min-height:38px;font-size:12px;line-height:16px;margin:0;cursor:pointer;background:var(--control,#f1f2f5);border:1px solid transparent;border-radius:12px;gap:4px}
.salary-weekday input{appearance:none;position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;margin:0}
.salary-weekday:has(input:checked){background:#f9edd4;border-color:#e7cfa5;color:#97601c}
.salary-weekday:has(input:focus-visible){outline:2px solid var(--accent,#678b82);outline-offset:3px}
[data-theme=dark] .salary-weekday:has(input:checked){background:#423722;border-color:#6c5737;color:#f2c979}
#salary-dialog .salary-check{display:flex;flex-direction:row;align-items:center;gap:10px;margin:0;font-size:13px;line-height:20px;min-height:38px;cursor:pointer}
#salary-dialog .salary-check input{width:18px;height:18px;flex:none;accent-color:var(--accent,#678b82);padding:0;margin:0}
.salary-dialog-message{font-size:12px;line-height:18px;margin:12px 0 0;color:var(--muted,#747980);min-height:0}
.salary-dialog-message:empty{display:none}
.salary-dialog-message.salary-error{color:#a64335}
[data-theme=dark] .salary-dialog-message.salary-error{color:#f1a397}
.reduced .salary-tile .salary-card:hover,.reduced .salary-tile .salary-card:active{transform:none}
@media(prefers-reduced-motion:reduce){.salary-tile .salary-card:hover,.salary-tile .salary-card:active{transform:none}}
@media(max-width:370px){#salary-dialog.salary-dialog{padding:20px;max-height:calc(100dvh - 24px)}}