@font-face{font-family:"PS Text";src:url(fonts/text.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"PS Figures";src:url(fonts/figures.woff2) format("woff2");font-weight:600;font-display:swap}
:root{--ink:#16202A;--muted:#5B6775;--line:#CDD5DE;--blue:#1D4F91;--red:#D2283A;--hatch:rgba(91,103,117,.17);--bg:#fff}
html,body{font-family:"PS Text",system-ui,sans-serif;color:var(--ink);background:var(--bg)}
.piece-fallback table{font-size:15px}
.piece-sources a{color:var(--muted)}

.piece-app{container-type:inline-size}
.ps-controls{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:end;margin:0 0 16px}
.ps-field{display:flex;gap:10px;align-items:center;font-size:15px;color:var(--muted)}
.ps-field input{font:inherit;font-size:17px;color:var(--ink);padding:8px 10px;min-height:44px;border:1.5px solid var(--ink);border-radius:2px;background:#fff}
.ps-field input:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.ps-tick{position:relative;display:flex;gap:10px;align-items:center;min-height:44px;max-width:32ch;font-size:15px;line-height:1.3;text-wrap:balance;cursor:pointer}
.ps-tick input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.ps-box{flex:none;display:grid;place-items:center;width:20px;height:20px;border:1.5px solid var(--ink);border-radius:2px;background:#fff}
.ps-tick input:checked+.ps-box::after{content:"";width:10px;height:5px;border-left:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue);transform:translateY(-2px) rotate(-45deg)}
.ps-tick input:focus-visible+.ps-box{outline:2px solid var(--blue);outline-offset:2px}

.ps-lead{margin:0;font-size:15px;color:var(--muted)}
.ps-due{margin:2px 0 4px;font-size:clamp(21px,7.1cqi,36px);line-height:1.15;font-weight:700;letter-spacing:-.01em;text-wrap:balance}
.ps-sub{margin:0 0 14px;font-size:14px;line-height:1.45;color:var(--muted);text-wrap:pretty}
.ps-msg{margin:0 0 8px;font-size:17px;line-height:1.45}

.ps-cal{width:100%;border-collapse:collapse;table-layout:fixed}
.ps-cal th{padding:0 0 6px 5px;text-align:left;font:600 13px/1 "PS Figures",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ps-day{position:relative;height:54px;padding:4px 4px;border:1px solid var(--line);vertical-align:top}
.ps-date{display:block;font:600 12px/1.1 "PS Figures",sans-serif;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.ps-num{position:absolute;right:5px;bottom:3px;font:600 25px/1 "PS Figures",sans-serif;color:var(--blue)}
.ps-tag{display:block;margin-top:2px;font:600 10.5px/1 "PS Figures",sans-serif;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.is-weekend,.is-holiday{background:repeating-linear-gradient(135deg,transparent 0 5px,var(--hatch) 5px 6.5px)}
.is-holiday{--hatch:rgba(91,103,117,.32)}
/* Labels on hatching sit on paper, so the stripes never run through the letters. */
.is-weekend .ps-date,.is-holiday .ps-date,.is-holiday .ps-tag{width:fit-content;background:var(--bg);box-shadow:0 0 0 2px var(--bg)}
.is-outside .ps-date{opacity:.45}
.is-payday{box-shadow:inset 0 3px 0 var(--ink)}
.is-due .ps-date{position:relative;z-index:3;color:var(--ink)} /* the ring passes behind the date, never over it */
.is-payday .ps-num{color:var(--ink)}
.is-payday .ps-date{color:var(--ink);font-weight:700}
/* Part-state days: a ring marker everywhere, the state only where there is room. */
.ps-tag.is-part{color:var(--muted);font-size:0}
.ps-tag.is-part::before{content:"";display:inline-block;width:6px;height:6px;border:1.2px solid currentColor;border-radius:50%}

/* The ring lives on the numeral and is sized in its em, so it circles the count at every width and
   never the date above it. The due numeral sits low: the due day is always in the last row, so the
   ring has room below the grid. Its part-state marker sits in the date line, out of the way. */
.ps-ring{position:absolute;z-index:2;left:-.5em;top:-.37em;width:calc(100% + 1.05em);height:calc(100% + .65em);overflow:visible;pointer-events:none}
.is-due .ps-num{right:9px;bottom:2px}
.ps-date .ps-tag.is-part{display:inline-block;margin:0 0 0 4px;font-size:0;vertical-align:1px}
.ps-ring path{fill:none;stroke:var(--red);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
/* The ring is stretched to the cell, so a dash animation miscounts its length. A conic mask sweeps
   round the centre instead, starting where the pen does. */
@property --ps-a{syntax:"<angle>";inherits:false;initial-value:360deg}
.ps-ring{--ps-a:360deg;-webkit-mask:conic-gradient(from 300deg,#000 var(--ps-a),transparent 0);mask:conic-gradient(from 300deg,#000 var(--ps-a),transparent 0);animation:ps-draw .7s cubic-bezier(.5,.1,.3,1) calc(var(--n,7)*70ms + 200ms) both}
.is-business .ps-num{animation:ps-pop .3s ease-out calc(var(--i,0)*70ms) both}
@keyframes ps-pop{from{opacity:0;transform:translateY(5px)}}
@keyframes ps-draw{from{--ps-a:0deg}to{--ps-a:360deg}}
.ps-still .ps-num{animation:none}
.ps-still .ps-ring{animation:none}
@media (prefers-reduced-motion:reduce){.is-business .ps-num,.ps-ring{animation:none}}

.ps-note{margin:10px 0 0;font-size:13.5px;line-height:1.45}
.ps-rules{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.45;color:var(--muted)}
.ps-checked .piece-sources{margin:8px 0 0;font-size:12.5px;line-height:1.5}
.ps-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@container (min-width:560px){
  .ps-sub{font-size:15px;margin-bottom:16px}
  .ps-note{margin-top:12px;font-size:14px}
  .ps-day{height:70px;padding:6px 8px}
  .ps-date{font-size:13.5px}
  .ps-num{right:9px;bottom:7px;font-size:36px}
  .ps-tag{margin-top:4px;font-size:12px;letter-spacing:.05em}
  .ps-tag.is-part,.ps-date .ps-tag.is-part{font-size:11px} /* the due cell names its state too, where there is room */
  .ps-tag.is-part::before{margin:0 4px 1px 0}
  .is-due .ps-num{right:14px;bottom:4px}
}
/* Narrow posts: a 360 px phone in a theme with 30 px gutters leaves the piece 300 px. Shorter cells,
   smaller labels and the first cell without its month keep every payday under WordPress's 1000 px. */
@container (max-width:289px){
  .ps-sub{font-size:13.5px;margin-bottom:12px}
  .ps-cal th{padding-left:3px;font-size:11.5px;letter-spacing:.04em}
  .ps-day{height:48px;padding:3px}
  .ps-date{font-size:11px;letter-spacing:.02em}
  .ps-date.is-lead .ps-mon{display:none}
  .ps-num{right:3px;bottom:2px;font-size:22px}
  .is-due .ps-num{right:6px;bottom:1px}
  .ps-tag{font-size:9.5px;letter-spacing:0}
  .ps-note{margin-top:8px;font-size:12.5px}
  .ps-rules{margin-top:12px;padding-top:10px;font-size:12.5px}
}