/* ---- the control panel (screen only) ---- */
.pp{max-width:1180px;margin:0 auto;width:100%}
.pp h1{font-family:var(--serif);font-weight:300;font-size:clamp(38px,4.6vw,62px);line-height:1;letter-spacing:-.025em;margin:6px 0 0}
.pp .lede{font-size:17px;line-height:1.6;color:var(--haze);max-width:62ch;margin:16px 0 0}
.pp .ctl{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px 20px;margin-top:28px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px}
.pp .f{display:flex;flex-direction:column;gap:7px;min-width:0}
.pp .f > label,.pp .f > .lab{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--haze)}
.pp select,.pp input[type=text],.pp input[type=number]{font:inherit;font-size:16px;color:var(--moonlight);background:var(--ink);border:1px solid var(--line);border-radius:12px;padding:11px 12px;width:100%;min-width:0}
.pp select:focus-visible,.pp input:focus-visible,.pp button:focus-visible,.pp .seg label:has(input:focus-visible){outline:2px solid var(--moonlight);outline-offset:2px}
.pp .seg{display:flex;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.pp .seg label{flex:1;text-align:center;font-size:15px;padding:11px 8px;cursor:pointer;color:var(--haze);border-right:1px solid var(--line);transition:background 150ms var(--ease-out),color 150ms var(--ease-out)}
.pp .seg label:last-child{border-right:0}
.pp .seg input{position:absolute;opacity:0;pointer-events:none}
.pp .seg label:has(input:checked){background:var(--moonlight);color:var(--ink);font-weight:500}
.pp .go{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:20px}
.pp .pbtn{font:inherit;font-size:17px;font-weight:500;color:var(--ink);background:var(--moonlight);border:0;border-radius:14px;padding:15px 26px;cursor:pointer;transition:transform 150ms var(--ease-out),background 150ms var(--ease-out)}
.pp .pbtn:hover{transform:translateY(-1px);background:#fff}
.pp .hint{font-size:14px;line-height:1.55;color:var(--haze);max-width:60ch;margin:0}
.pp .pframe{margin-top:30px;background:#2A3144;border:1px solid var(--line);border-radius:18px;padding:22px;display:flex;justify-content:center;overflow:hidden}
.pp .pframe .holder{box-shadow:0 18px 50px rgba(0,0,0,.45)}
/* ---- the sheet itself: its own colours, it is paper ---- */
.psheet{--ink:#1D2538;--paper:#FBF8F1;--lit:#F3E7C2;--dim:#1D2538;--line:#CFC8B6;--haze:#6B6F7A;--ps:'Newsreader',Georgia,serif;--pn:'Hanken Grotesk',system-ui,sans-serif;background:var(--paper);color:var(--ink);font-family:var(--pn);display:flex;flex-direction:column;overflow:hidden;position:relative;-webkit-print-color-adjust:exact;print-color-adjust:exact;line-height:1.3;text-align:left}
.psheet *{box-sizing:border-box}
.psheet.ink{--dim:url(#hatch)}
.psheet.month{width:var(--w);height:var(--h);padding:.55in .55in .4in}
.psheet .ps-ph{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;border-bottom:1.5px solid var(--ink);padding-bottom:12px}
.psheet .ps-pt{font-family:var(--ps);font-weight:300;font-size:56px;line-height:.95;letter-spacing:-.02em;margin:0}
.psheet .ps-pt span{font-weight:400;color:var(--haze)}
.psheet .ps-psub{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--haze);text-align:right;line-height:1.5}
.psheet .ps-dow{display:grid;grid-template-columns:repeat(7,1fr);margin-top:14px}
.psheet .ps-dow b{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--haze);font-weight:600;padding:0 4px 6px}
.psheet .ps-grid{display:grid;grid-template-columns:repeat(7,1fr);flex:1;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.psheet .ps-cell{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:6px 6px 5px;display:flex;flex-direction:column;align-items:center;position:relative;min-height:0}
.psheet .ps-cell.ps-out{background:repeating-linear-gradient(135deg,transparent 0 6px,#F1EDE2 6px 7px)}
.psheet .ps-cell .ps-n{position:absolute;left:7px;top:5px;font-family:var(--ps);font-size:16px;font-weight:500}
.psheet .ps-cell svg{margin:auto 0 0;width:52px;height:52px;flex:none}
.psheet .ps-cell .ps-s{font-size:9.5px;letter-spacing:.06em;color:var(--haze);margin-top:5px;text-transform:uppercase}
.psheet .ps-cell .ps-q{position:absolute;right:6px;top:6px;font-size:8.5px;line-height:1.25;text-align:right;font-weight:600;max-width:62%}
.psheet .ps-cell.ps-key{background:#F4EDD6}
.psheet .ps-pfoot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:14px;font-size:10.5px;color:var(--haze);line-height:1.5}
.psheet .ps-pfoot .ps-l{max-width:5in}
.psheet .ps-pfoot .ps-r{text-align:right;font-family:var(--ps);font-size:15px;color:var(--ink)}
.psheet .ps-pfoot .ps-r small{display:block;font-family:var(--pn);font-size:10px;color:var(--haze);letter-spacing:.04em}
/* the year, designed on 420 x 297 mm */
.psheet.year{width:420mm;height:297mm;padding:16mm 18mm 12mm}
.psheet.year .ps-ph{padding-bottom:5mm;border-bottom-width:.5mm}
.psheet.year .ps-pt{font-size:30mm;line-height:.9;letter-spacing:-.025em}
.psheet.year .ps-psub{font-size:3.4mm;letter-spacing:.16em;line-height:1.6}
.psheet.year .ps-board{flex:1;display:grid;grid-template-columns:30mm repeat(31,1fr) 38mm;margin-top:5mm;align-content:stretch}
.psheet.year .ps-hd{font-size:2.6mm;letter-spacing:.06em;color:var(--haze);text-align:center;font-weight:600;padding-bottom:1.5mm;align-self:end}
.psheet.year .ps-hd.ps-l{text-align:left}
.psheet.year .ps-m{font-family:var(--ps);font-size:5.6mm;font-weight:500;border-top:.25mm solid var(--line);height:100%;display:flex;align-items:center}
.psheet.year .ps-d{border-top:.25mm solid var(--line);display:flex;align-items:center;justify-content:center;height:100%;position:relative}
.psheet.year .ps-d svg{width:8.6mm;height:8.6mm}
.psheet.year .ps-d.ps-none{background:repeating-linear-gradient(135deg,transparent 0 1.6mm,#F1EDE2 1.6mm 1.9mm)}
.psheet.year .ps-d .ps-tg{position:absolute;left:0;right:0;bottom:1.1mm;text-align:center;font-size:2mm;letter-spacing:.12em;font-weight:600;color:var(--ink)}
.psheet.year .ps-d svg{margin-bottom:1.6mm}
.psheet.year .ps-k{border-top:.25mm solid var(--line);height:100%;display:flex;flex-direction:column;justify-content:center;gap:.8mm;padding-left:4mm;font-size:3mm;line-height:1.25}
.psheet.year .ps-k b{font-weight:600;font-size:2.5mm;letter-spacing:.1em;text-transform:uppercase;color:var(--haze);margin-right:1.5mm}
.psheet.year .ps-board > :nth-last-child(-n+33){border-bottom:.25mm solid var(--line)}
.psheet.year .ps-pfoot{margin-top:4mm;font-size:3mm;line-height:1.55}
.psheet.year .ps-pfoot .ps-r{font-size:5mm}
.psheet.year .ps-pfoot .ps-r small{font-size:3mm}
@media (max-width:760px){.pp .pframe{padding:10px}}
@media print{
  html,body{background:#fff !important}
  .sky,.grain,.page > header,.sitefoot,.pp > :not(.pframe){display:none !important}
  .page{padding:0 !important;display:block !important;min-height:0}
  main.wrap{padding:0 !important;margin:0 !important;max-width:none !important}
  .pp .pframe{margin:0;padding:0;border:0;background:none;border-radius:0;display:block;overflow:visible}
  .pp .pframe .holder{box-shadow:none}
}

/* ?bare=1: just the sheet, at its own size (used to make the example pictures) */
.bare body,.bare html{background:#fff !important}
.bare .sky,.bare .grain,.bare .page > header,.bare .sitefoot,.bare .pp > :not(.pframe){display:none !important}
.bare .page{padding:0 !important;display:block !important;min-height:0}
.bare main.wrap{padding:0 !important;margin:0 !important;max-width:none !important}
.bare .pp .pframe{margin:0;padding:0;border:0;background:none;border-radius:0;display:block;overflow:visible}
.bare .pp .pframe .holder{box-shadow:none;width:max-content}