*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:IBM Plex Mono,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-y-0{top:0;bottom:0}.-bottom-2{bottom:-.5rem}.-bottom-20{bottom:-5rem}.-left-20{left:-5rem}.-right-2{right:-.5rem}.-top-2{top:-.5rem}.-top-20{top:-5rem}.left-0{left:0}.left-1\/2{left:50%}.right-0{right:0}.right-5{right:1.25rem}.top-0{top:0}.top-5{top:1.25rem}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-50{z-index:50}.col-span-2{grid-column:span 2/span 2}.col-span-full{grid-column:1/-1}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-auto{margin-left:auto;margin-right:auto}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.my-8{margin-top:2rem;margin-bottom:2rem}.my-auto{margin-top:auto;margin-bottom:auto}.-mt-2{margin-top:-.5rem}.mb-0\.5{margin-bottom:.125rem}.mb-1{margin-bottom:.25rem}.mb-1\.5{margin-bottom:.375rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-3{margin-left:.75rem}.ml-auto{margin-left:auto}.mr-1\.5{margin-right:.375rem}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-1\.5{margin-top:.375rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.aspect-\[3\/1\]{aspect-ratio:3/1}.aspect-square{aspect-ratio:1/1}.h-1{height:.25rem}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-2{height:.5rem}.h-20{height:5rem}.h-24{height:6rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-80{height:20rem}.h-9{height:2.25rem}.h-96{height:24rem}.h-fit{height:-moz-fit-content;height:fit-content}.h-full{height:100%}.max-h-48{max-height:12rem}.max-h-56{max-height:14rem}.max-h-64{max-height:16rem}.max-h-72{max-height:18rem}.max-h-80{max-height:20rem}.max-h-96{max-height:24rem}.max-h-\[420px\]{max-height:420px}.max-h-\[500px\]{max-height:500px}.max-h-\[90vh\]{max-height:90vh}.max-h-full{max-height:100%}.min-h-screen{min-height:100vh}.w-0{width:0}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-12{width:3rem}.w-14{width:3.5rem}.w-16{width:4rem}.w-20{width:5rem}.w-24{width:6rem}.w-28{width:7rem}.w-32{width:8rem}.w-4{width:1rem}.w-40{width:10rem}.w-48{width:12rem}.w-5{width:1.25rem}.w-52{width:13rem}.w-56{width:14rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-80{width:20rem}.w-9{width:2.25rem}.w-96{width:24rem}.w-\[320px\]{width:320px}.w-\[340px\]{width:340px}.w-\[380px\]{width:380px}.w-\[420px\]{width:420px}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.min-w-0{min-width:0}.min-w-\[1000px\]{min-width:1000px}.min-w-\[1100px\]{min-width:1100px}.min-w-\[1500px\]{min-width:1500px}.min-w-\[200px\]{min-width:200px}.min-w-\[220px\]{min-width:220px}.min-w-\[240px\]{min-width:240px}.min-w-\[260px\]{min-width:260px}.min-w-\[400px\]{min-width:400px}.min-w-\[500px\]{min-width:500px}.min-w-\[550px\]{min-width:550px}.min-w-\[560px\]{min-width:560px}.min-w-\[600px\]{min-width:600px}.min-w-\[640px\]{min-width:640px}.min-w-\[650px\]{min-width:650px}.min-w-\[700px\]{min-width:700px}.min-w-\[750px\]{min-width:750px}.min-w-\[800px\]{min-width:800px}.min-w-\[900px\]{min-width:900px}.min-w-\[950px\]{min-width:950px}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-\[200px\]{max-width:200px}.max-w-\[220px\]{max-width:220px}.max-w-\[280px\]{max-width:280px}.max-w-full{max-width:100%}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.max-w-sm{max-width:24rem}.max-w-xl{max-width:36rem}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.break-inside-avoid{-moz-column-break-inside:avoid;break-inside:avoid}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-3\.5{gap:.875rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.gap-y-1{row-gap:.25rem}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.75rem*var(--tw-space-x-reverse));margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-ink-100\/5>:not([hidden])~:not([hidden]){border-color:rgb(var(--c-ink-100)/.05)}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.truncate{overflow:hidden;text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-t-2{border-top-width:2px}.border-dashed{border-style:dashed}.border-amber-600\/10{border-color:rgba(217,119,6,.1)}.border-amber-600\/20{border-color:rgba(217,119,6,.2)}.border-amber-600\/30{border-color:rgba(217,119,6,.3)}.border-chalk-200{--tw-border-opacity:1;border-color:rgb(var(--c-chalk-200)/var(--tw-border-opacity,1))}.border-green-300{--tw-border-opacity:1;border-color:rgb(134 239 172/var(--tw-border-opacity,1))}.border-ink-100\/10{border-color:rgb(var(--c-ink-100)/.1)}.border-ink-100\/15{border-color:rgb(var(--c-ink-100)/.15)}.border-ink-100\/20{border-color:rgb(var(--c-ink-100)/.2)}.border-ink-100\/5{border-color:rgb(var(--c-ink-100)/.05)}.border-kraft-300{--tw-border-opacity:1;border-color:rgb(var(--c-kraft-300)/var(--tw-border-opacity,1))}.border-paper-100\/10{border-color:rgb(var(--c-paper-100)/.1)}.border-red-400{--tw-border-opacity:1;border-color:rgb(248 113 113/var(--tw-border-opacity,1))}.border-register-200{--tw-border-opacity:1;border-color:rgb(var(--c-register-200)/var(--tw-border-opacity,1))}.border-register-200\/20{border-color:rgb(var(--c-register-200)/.2)}.border-register-200\/30{border-color:rgb(var(--c-register-200)/.3)}.bg-amber-100{--tw-bg-opacity:1;background-color:rgb(254 243 199/var(--tw-bg-opacity,1))}.bg-amber-50{--tw-bg-opacity:1;background-color:rgb(255 251 235/var(--tw-bg-opacity,1))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity,1))}.bg-chalk-200{--tw-bg-opacity:1;background-color:rgb(var(--c-chalk-200)/var(--tw-bg-opacity,1))}.bg-chalk-200\/10{background-color:rgb(var(--c-chalk-200)/.1)}.bg-chalk-200\/5{background-color:rgb(var(--c-chalk-200)/.05)}.bg-green-100{--tw-bg-opacity:1;background-color:rgb(220 252 231/var(--tw-bg-opacity,1))}.bg-green-100\/40{background-color:rgba(220,252,231,.4)}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(22 163 74/var(--tw-bg-opacity,1))}.bg-green-700{--tw-bg-opacity:1;background-color:rgb(21 128 61/var(--tw-bg-opacity,1))}.bg-ink-100{--tw-bg-opacity:1;background-color:rgb(var(--c-ink-100)/var(--tw-bg-opacity,1))}.bg-ink-200{--tw-bg-opacity:1;background-color:rgb(var(--c-ink-200)/var(--tw-bg-opacity,1))}.bg-ink-200\/60{background-color:rgb(var(--c-ink-200)/.6)}.bg-kraft-100{--tw-bg-opacity:1;background-color:rgb(var(--c-kraft-100)/var(--tw-bg-opacity,1))}.bg-kraft-200{--tw-bg-opacity:1;background-color:rgb(var(--c-kraft-200)/var(--tw-bg-opacity,1))}.bg-kraft-200\/10{background-color:rgb(var(--c-kraft-200)/.1)}.bg-kraft-200\/15{background-color:rgb(var(--c-kraft-200)/.15)}.bg-kraft-300{--tw-bg-opacity:1;background-color:rgb(var(--c-kraft-300)/var(--tw-bg-opacity,1))}.bg-paper-100{--tw-bg-opacity:1;background-color:rgb(var(--c-paper-100)/var(--tw-bg-opacity,1))}.bg-paper-100\/10{background-color:rgb(var(--c-paper-100)/.1)}.bg-paper-100\/5{background-color:rgb(var(--c-paper-100)/.05)}.bg-paper-200{--tw-bg-opacity:1;background-color:rgb(var(--c-paper-200)/var(--tw-bg-opacity,1))}.bg-paper-200\/40{background-color:rgb(var(--c-paper-200)/.4)}.bg-paper-200\/50{background-color:rgb(var(--c-paper-200)/.5)}.bg-paper-200\/60{background-color:rgb(var(--c-paper-200)/.6)}.bg-paper-200\/95{background-color:rgb(var(--c-paper-200)/.95)}.bg-red-100{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity,1))}.bg-red-700{--tw-bg-opacity:1;background-color:rgb(185 28 28/var(--tw-bg-opacity,1))}.bg-register-200{--tw-bg-opacity:1;background-color:rgb(var(--c-register-200)/var(--tw-bg-opacity,1))}.bg-register-200\/10{background-color:rgb(var(--c-register-200)/.1)}.bg-register-200\/5{background-color:rgb(var(--c-register-200)/.05)}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-cover{background-size:cover}.bg-center{background-position:50%}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-10{padding:2.5rem}.p-12{padding:3rem}.p-2{padding:.5rem}.p-2\.5{padding:.625rem}.p-3{padding:.75rem}.p-3\.5{padding:.875rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-0{padding-top:0;padding-bottom:0}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-1{padding-bottom:.25rem}.pb-1\.5{padding-bottom:.375rem}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pb-4{padding-bottom:1rem}.pl-11{padding-left:2.75rem}.pl-3{padding-left:.75rem}.pl-4{padding-left:1rem}.pl-6{padding-left:1.5rem}.pr-10{padding-right:2.5rem}.pr-12{padding-right:3rem}.pr-4{padding-right:1rem}.pt-1{padding-top:.25rem}.pt-1\.5{padding-top:.375rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.pt-5{padding-top:1.25rem}.pt-6{padding-top:1.5rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-top{vertical-align:top}.font-body{font-family:Public Sans,sans-serif}.font-display{font-family:"Source Serif 4",serif}.font-mono{font-family:IBM Plex Mono,monospace}.font-sans{font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[9px\]{font-size:9px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.normal-case{text-transform:none}.italic{font-style:italic}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-\[0\.15em\]{letter-spacing:.15em}.tracking-\[0\.25em\]{letter-spacing:.25em}.tracking-\[0\.2em\]{letter-spacing:.2em}.tracking-\[0\.4em\]{letter-spacing:.4em}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.text-amber-700{--tw-text-opacity:1;color:rgb(180 83 9/var(--tw-text-opacity,1))}.text-amber-800{--tw-text-opacity:1;color:rgb(146 64 14/var(--tw-text-opacity,1))}.text-amber-800\/50{color:rgba(146,64,14,.5)}.text-blue-700{--tw-text-opacity:1;color:rgb(29 78 216/var(--tw-text-opacity,1))}.text-chalk-200{--tw-text-opacity:1;color:rgb(var(--c-chalk-200)/var(--tw-text-opacity,1))}.text-emerald-600{--tw-text-opacity:1;color:rgb(5 150 105/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.text-green-600{--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity,1))}.text-green-700{--tw-text-opacity:1;color:rgb(21 128 61/var(--tw-text-opacity,1))}.text-ink-100{--tw-text-opacity:1;color:rgb(var(--c-ink-100)/var(--tw-text-opacity,1))}.text-ink-100\/20{color:rgb(var(--c-ink-100)/.2)}.text-ink-100\/30{color:rgb(var(--c-ink-100)/.3)}.text-ink-100\/40{color:rgb(var(--c-ink-100)/.4)}.text-ink-100\/50{color:rgb(var(--c-ink-100)/.5)}.text-ink-100\/60{color:rgb(var(--c-ink-100)/.6)}.text-ink-100\/70{color:rgb(var(--c-ink-100)/.7)}.text-ink-100\/80{color:rgb(var(--c-ink-100)/.8)}.text-kraft-100{--tw-text-opacity:1;color:rgb(var(--c-kraft-100)/var(--tw-text-opacity,1))}.text-kraft-200{--tw-text-opacity:1;color:rgb(var(--c-kraft-200)/var(--tw-text-opacity,1))}.text-kraft-300{--tw-text-opacity:1;color:rgb(var(--c-kraft-300)/var(--tw-text-opacity,1))}.text-paper-100{--tw-text-opacity:1;color:rgb(var(--c-paper-100)/var(--tw-text-opacity,1))}.text-paper-100\/30{color:rgb(var(--c-paper-100)/.3)}.text-paper-100\/40{color:rgb(var(--c-paper-100)/.4)}.text-paper-100\/60{color:rgb(var(--c-paper-100)/.6)}.text-paper-100\/70{color:rgb(var(--c-paper-100)/.7)}.text-paper-100\/80{color:rgb(var(--c-paper-100)/.8)}.text-paper-100\/90{color:rgb(var(--c-paper-100)/.9)}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.text-red-700{--tw-text-opacity:1;color:rgb(185 28 28/var(--tw-text-opacity,1))}.text-red-800{--tw-text-opacity:1;color:rgb(153 27 27/var(--tw-text-opacity,1))}.text-register-200{--tw-text-opacity:1;color:rgb(var(--c-register-200)/var(--tw-text-opacity,1))}.text-register-300{--tw-text-opacity:1;color:rgb(var(--c-register-300)/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.placeholder-ink-100\/40::-moz-placeholder{color:rgb(var(--c-ink-100)/.4)}.placeholder-ink-100\/40::placeholder{color:rgb(var(--c-ink-100)/.4)}.opacity-10{opacity:.1}.opacity-20{opacity:.2}.opacity-40{opacity:.4}.opacity-60{opacity:.6}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.shadow-2xl,.shadow-inner{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-inner{--tw-shadow:inset 0 2px 4px 0 rgba(0,0,0,.05);--tw-shadow-colored:inset 0 2px 4px 0 var(--tw-shadow-color)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-ink-100\/20{--tw-shadow-color:rgb(var(--c-ink-100)/0.2);--tw-shadow:var(--tw-shadow-colored)}.blur-3xl{--tw-blur:blur(64px)}.blur-3xl,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur{--tw-backdrop-blur:blur(8px)}.backdrop-blur,.backdrop-blur-sm{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-150,.transition-all{transition-duration:.15s}.duration-300{transition-duration:.3s}.hover\:border-kraft-200:hover{--tw-border-opacity:1;border-color:rgb(var(--c-kraft-200)/var(--tw-border-opacity,1))}.hover\:bg-chalk-200\/10:hover{background-color:rgb(var(--c-chalk-200)/.1)}.hover\:bg-chalk-300:hover{--tw-bg-opacity:1;background-color:rgb(var(--c-chalk-300)/var(--tw-bg-opacity,1))}.hover\:bg-green-700:hover{--tw-bg-opacity:1;background-color:rgb(21 128 61/var(--tw-bg-opacity,1))}.hover\:bg-green-800:hover{--tw-bg-opacity:1;background-color:rgb(22 101 52/var(--tw-bg-opacity,1))}.hover\:bg-ink-50:hover{--tw-bg-opacity:1;background-color:rgb(var(--c-ink-50)/var(--tw-bg-opacity,1))}.hover\:bg-kraft-300:hover{--tw-bg-opacity:1;background-color:rgb(var(--c-kraft-300)/var(--tw-bg-opacity,1))}.hover\:bg-kraft-300\/10:hover{background-color:rgb(var(--c-kraft-300)/.1)}.hover\:bg-paper-100:hover{--tw-bg-opacity:1;background-color:rgb(var(--c-paper-100)/var(--tw-bg-opacity,1))}.hover\:bg-paper-100\/10:hover{background-color:rgb(var(--c-paper-100)/.1)}.hover\:bg-paper-100\/5:hover{background-color:rgb(var(--c-paper-100)/.05)}.hover\:bg-paper-200:hover{--tw-bg-opacity:1;background-color:rgb(var(--c-paper-200)/var(--tw-bg-opacity,1))}.hover\:bg-paper-200\/50:hover{background-color:rgb(var(--c-paper-200)/.5)}.hover\:bg-red-800:hover{--tw-bg-opacity:1;background-color:rgb(153 27 27/var(--tw-bg-opacity,1))}.hover\:bg-register-200\/10:hover{background-color:rgb(var(--c-register-200)/.1)}.hover\:bg-register-300:hover{--tw-bg-opacity:1;background-color:rgb(var(--c-register-300)/var(--tw-bg-opacity,1))}.hover\:text-ink-100:hover{--tw-text-opacity:1;color:rgb(var(--c-ink-100)/var(--tw-text-opacity,1))}.hover\:text-kraft-200:hover{--tw-text-opacity:1;color:rgb(var(--c-kraft-200)/var(--tw-text-opacity,1))}.hover\:text-paper-100:hover{--tw-text-opacity:1;color:rgb(var(--c-paper-100)/var(--tw-text-opacity,1))}.hover\:text-red-700:hover{--tw-text-opacity:1;color:rgb(185 28 28/var(--tw-text-opacity,1))}.hover\:text-register-300:hover{--tw-text-opacity:1;color:rgb(var(--c-register-300)/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-90:hover{opacity:.9}.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\:border-kraft-200:focus{--tw-border-opacity:1;border-color:rgb(var(--c-kraft-200)/var(--tw-border-opacity,1))}.focus\:bg-white:focus{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-kraft-200:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(var(--c-kraft-200)/var(--tw-ring-opacity,1))}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}.active\:scale-\[0\.99\]:active{--tw-scale-x:0.99;--tw-scale-y:0.99;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-ink-100\/20:disabled{background-color:rgb(var(--c-ink-100)/.2)}.disabled\:opacity-40:disabled{opacity:.4}@media (min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:p-12{padding:3rem}}@media (min-width:768px){.md\:col-span-1{grid-column:span 1/span 1}.md\:col-span-2{grid-column:span 2/span 2}.md\:col-span-3{grid-column:span 3/span 3}.md\:col-span-4{grid-column:span 4/span 4}.md\:flex{display:flex}.md\:w-1\/2{width:50%}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.md\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.md\:grid-cols-\[1fr_160px_auto\]{grid-template-columns:1fr 160px auto}.md\:flex-row{flex-direction:row}.md\:gap-6{gap:1.5rem}.md\:p-6{padding:1.5rem}.md\:p-8{padding:2rem}.md\:px-8{padding-left:2rem;padding-right:2rem}}@media (min-width:1024px){.lg\:col-span-2{grid-column:span 2/span 2}.lg\:flex{display:flex}.lg\:w-2\/5{width:40%}.lg\:w-3\/5{width:60%}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:p-16{padding:4rem}.lg\:text-4xl{font-size:2.25rem;line-height:2.5rem}}/* ===== Theme palettes (CSS variables so the theme switcher can swap them instantly) ===== */
:root, [data-theme="blue"] {
  --c-ink-50: 35 72 118;    --c-ink-100: 22 58 102;   --c-ink-200: 15 40 71;
  --c-kraft-100: 91 143 242; --c-kraft-200: 47 111 237; --c-kraft-300: 30 79 190;
}
[data-theme="green"] {
  --c-ink-50: 46 107 69;    --c-ink-100: 30 77 48;    --c-ink-200: 18 51 32;
  --c-kraft-100: 92 190 126; --c-kraft-200: 52 160 90;  --c-kraft-300: 34 122 66;
}
[data-theme="purple"] {
  --c-ink-50: 74 59 124;    --c-ink-100: 54 42 92;    --c-ink-200: 36 28 62;
  --c-kraft-100: 167 139 250; --c-kraft-200: 124 92 224; --c-kraft-300: 93 63 184;
}
[data-theme="slate"] {
  --c-ink-50: 43 52 68;     --c-ink-100: 26 33 46;    --c-ink-200: 16 20 28;
  --c-kraft-100: 147 163 184; --c-kraft-200: 100 116 139; --c-kraft-300: 71 83 106;
}
[data-theme="maroon"] {
  --c-ink-50: 122 48 56;    --c-ink-100: 92 33 41;    --c-ink-200: 62 21 25;
  --c-kraft-100: 224 138 138; --c-kraft-200: 194 76 76; --c-kraft-300: 152 54 47;
}

/* ===== Item 7 — Portal self-service theme palettes =====
   Two new curated sets, one per portal audience, deliberately distinct
   from the 5 staff palettes above AND from each other:
   Student Portal ("children-oriented", bright/playful): sunshine, coral, sky, grape, mint.
   Parent Portal ("adult-oriented", muted/professional): navy, charcoal, burgundy, teal, olive. */
[data-theme="sunshine"] {
  --c-ink-50: 168 92 15;    --c-ink-100: 138 74 10;   --c-ink-200: 97 51 7;
  --c-kraft-100: 255 193 82; --c-kraft-200: 245 158 11; --c-kraft-300: 194 120 3;
}
[data-theme="coral"] {
  --c-ink-50: 180 60 82;    --c-ink-100: 148 44 66;   --c-ink-200: 104 28 46;
  --c-kraft-100: 255 148 158; --c-kraft-200: 244 63 94;  --c-kraft-300: 190 40 66;
}
[data-theme="sky"] {
  --c-ink-50: 30 116 150;   --c-ink-100: 20 90 122;   --c-ink-200: 12 62 86;
  --c-kraft-100: 125 211 252; --c-kraft-200: 56 189 248; --c-kraft-300: 14 148 199;
}
[data-theme="grape"] {
  --c-ink-50: 111 60 168;   --c-ink-100: 88 44 138;   --c-ink-200: 61 28 97;
  --c-kraft-100: 216 180 254; --c-kraft-200: 192 132 252; --c-kraft-300: 147 51 234;
}
[data-theme="mint"] {
  --c-ink-50: 20 130 110;   --c-ink-100: 13 105 88;   --c-ink-200: 8 74 62;
  --c-kraft-100: 110 231 183; --c-kraft-200: 52 211 153; --c-kraft-300: 16 160 116;
}
[data-theme="navy"] {
  --c-ink-50: 30 41 71;     --c-ink-100: 17 27 51;    --c-ink-200: 9 15 32;
  --c-kraft-100: 96 122 168; --c-kraft-200: 62 89 138;  --c-kraft-300: 41 61 102;
}
[data-theme="charcoal"] {
  --c-ink-50: 51 51 56;     --c-ink-100: 33 33 38;    --c-ink-200: 20 20 24;
  --c-kraft-100: 148 148 158; --c-kraft-200: 107 107 120; --c-kraft-300: 74 74 87;
}
[data-theme="burgundy"] {
  --c-ink-50: 82 30 46;     --c-ink-100: 59 18 32;    --c-ink-200: 38 10 20;
  --c-kraft-100: 168 96 116; --c-kraft-200: 133 51 74;  --c-kraft-300: 97 33 51;
}
[data-theme="teal"] {
  --c-ink-50: 21 71 74;     --c-ink-100: 12 51 54;    --c-ink-200: 6 33 35;
  --c-kraft-100: 94 163 166; --c-kraft-200: 51 122 125; --c-kraft-300: 33 92 95;
}
[data-theme="olive"] {
  --c-ink-50: 71 68 30;     --c-ink-100: 51 48 17;    --c-ink-200: 33 30 9;
  --c-kraft-100: 163 156 94; --c-kraft-200: 122 114 51; --c-kraft-300: 92 84 33;
}
:root {
  /* Backgrounds and semantic status colors stay constant across themes for readability/UX consistency */
  --c-paper-0: 247 249 252;   --c-paper-100: 255 255 255; --c-paper-200: 238 242 249; --c-paper-300: 225 232 242;
  --c-register-100: 206 90 79; --c-register-200: 179 56 45; --c-register-300: 134 42 34;
  --c-chalk-100: 62 139 84;   --c-chalk-200: 47 107 60;   --c-chalk-300: 31 74 41;
  --sidebar-w: 16rem;
}

.ruled-paper { background-image: repeating-linear-gradient(180deg, transparent 0 27px, rgb(var(--c-ink-100) / 0.06) 27px 28px); }
.seal-ring { box-shadow: 0 0 0 2px rgb(var(--c-paper-100)), 0 0 0 3.5px rgb(var(--c-kraft-200)); }
::selection { background: rgb(var(--c-kraft-200)); color: rgb(var(--c-paper-100)); }

/* ===== Print-friendly reports =====
   STANDARD PROCEDURE: print only ever shows .print-area, regardless of
   what else is on the page (sidebar, topbar, tabs, filter forms). This
   used to rely on tagging every piece of surrounding chrome with
   .no-print individually — easy to miss one, and it was: the Print
   button calls window.print() on the current page as-is, so anything
   not explicitly hidden (the sidebar/topbar/tabs) printed right along
   with the report. Hiding everything by default and only revealing
   .print-area is the robust version — nothing new needs tagging. */
@media print {
  body * { visibility: hidden; }
  .print-area, .print-area * { visibility: visible; }
  .print-area { position: absolute; top: 0; left: 0; width: 100%; margin: 0 !important; padding: 0 !important; }
  .no-print { display: none !important; }
  body { background: white !important; }
  .a4-sheet { width: 210mm; min-height: 297mm; padding: 15mm; }
  /* 2026-09-29 — Payment Slip rework, v2→v4. True A5 PORTRAIT slips
     (148.5 x 210mm — the orientation people mean by default when they
     say "A5 size") placed SIDE BY SIDE on an A4 LANDSCAPE sheet: two
     A5-portrait widths (148.5 x 2 = 297mm) exactly equal A4 landscape's
     width, at the same 210mm height — an exact tiling, no rotation.
     v4 fix: v2/v3 tried to scope the landscape page size with a CSS
     NAMED page (`@page a5-pair` + a `page: a5-pair;` property on this
     class) so only this report went landscape while every other report
     here keeps printing A4 portrait — but named-page support turned out
     too unreliable in practice (content "flowing beyond A5 size" with a
     blank page after each pair — classic symptom of the browser
     silently falling back to the default PORTRAIT page while this CSS
     still laid content out at LANDSCAPE width, so content wider than
     the real page triggered extra pagination). Fixed by dropping the
     named-page trick entirely: report-parts/payslip.php now embeds a
     plain, unscoped `<style>@page{size:landscape;margin:0}</style>`
     directly in its own markup instead — @page rules apply document-
     wide regardless of where the <style> tag sits in the DOM, but since
     only reports.php?type=payslip ever includes payslip.php, no other
     report's print output is affected. Plain @page size has far better
     cross-browser support than named pages. page-break-after also moved
     OFF this class (was unconditional, forcing one extra blank page
     after the LAST pair too) and onto a per-pair inline style in the
     PHP loop instead, skipped on the final pair. */
  /* v5 fix — real print-out (a PDF the user sent) showed a spurious
     BLANK page after every single pair, even with plenty of vertical
     room to spare on the content page itself (so it wasn't a height-
     overflow problem — the @page landscape fix from v4 was confirmed
     working, the 2-up layout renders at the correct width). Root cause:
     forcing BOTH .a5-pair-sheet and .a5-sheet to an exact height
     (210mm) while also being `display: flex` and carrying an explicit
     `page-break-after`/`page-break-inside` is a known Chromium print-
     fragmentation weak spot — a flex box sized to EXACTLY one page's
     height, combined with a forced break, can produce a spurious extra
     (near-empty) page fragment. Fixed by dropping the forced height on
     both: let each sheet size itself naturally to its own content
     (comfortably under 210mm regardless — see the PDF's own generous
     leftover whitespace) instead of being stretched/clipped to fill it.
     The explicit page-break-after (still applied per-pair in payslip.php,
     skipped on the last pair) still forces one pair per physical page
     either way; flexbox's own default `align-items: stretch` already
     equalizes both slips in a pair to match the taller one's natural
     height, so the vertical cut line between them still spans evenly
     without needing an explicit shared height. */
  .a5-pair-sheet { width: 297mm; display: flex; flex-direction: row; }
  .a5-sheet { width: 148.5mm; page-break-inside: avoid; display: flex; flex-direction: column; }
}
/* On screen, reports size to their container instead of a fixed A4 width so they're usable on any device. */
.a4-sheet { width: 100%; max-width: 100%; margin: 0 auto; padding: 1.5rem; background: white; }
.a5-pair-sheet { display: flex; flex-direction: row; gap: 0; margin: 0 auto 1.5rem; max-width: 100%; }
.a5-sheet { width: 50%; max-width: 50%; background: white; overflow: hidden; display: flex; flex-direction: column; }
@media (min-width: 768px) {
  .a4-sheet { padding: 2.5rem; }
}
/* Dashed cut line + hint between the two A5 slips paired side by side on
   one A4-landscape sheet (Payment Slip, 2026-09-29 v2 rework) — applied
   to the FIRST (left) slip of each pair so the line sits between it and
   the second. VERTICAL this time (v1 was horizontal, for top/bottom
   stacking) since the slips are now left/right. Visible on both screen
   and print since it's useful in both (screen: shows the pair boundary;
   print: shows where to actually cut). */
.a5-cut-line { border-right: 1px dashed rgb(var(--c-ink-100) / 0.3); position: relative; }
.a5-cut-line::after {
  content: "✂";
  position: absolute; top: 50%; right: -7px; transform: translate(50%, -50%) rotate(90deg);
  background: rgb(var(--c-paper-100)); padding: 4px 0;
  font-family: IBM Plex Mono, monospace; font-size: 9px;
  color: rgb(var(--c-ink-100) / 0.4);
}
/* Payment Slip image-match redesign (2026-09-29) — full-bleed colored
   header/footer bands (.a5-band, themed via the same --c-ink-100 the
   rest of the app already uses so it follows the school's chosen color
   theme rather than a hardcoded blue) and the padded content area
   between them (.a5-body — replaces the padding .a5-sheet used to carry
   directly). A signature-style line for the approver block, matching
   the same "name on a ruled line" convention report-parts/
   bankschedule.php's letter signature already uses. */
.a5-band { background: rgb(var(--c-ink-100)); color: rgb(var(--c-paper-100)); flex: 0 0 auto; }
.a5-body { padding: 0.75rem 1rem; flex: 1 1 auto; }
/* Blank ruled line for the approver's signature, same "sign above,
   printed name below" convention report-parts/bankschedule.php's
   letter already uses (re-added 2026-09-29 v2 — dropped by mistake
   in an earlier edit this same day). */
.a5-signature-line { border-top: 1px solid rgb(var(--c-ink-100) / 0.3); }

/* ===== Collapsible sidebar: manual toggle (persisted) + responsive auto-collapse ===== */
html.sidebar-pref-collapsed { --sidebar-w: 5rem; }
html.sidebar-pref-expanded { --sidebar-w: 16rem; }
@media (max-width: 1024px) {
  :root { --sidebar-w: 5rem; }
  html.sidebar-pref-expanded { --sidebar-w: 16rem; }
}
#appSidebar { width: var(--sidebar-w); transition: width .18s ease; }
.app-main-offset { margin-left: var(--sidebar-w); transition: margin-left .18s ease; }
.sidebar-label { transition: opacity .12s ease; white-space: nowrap; }
html.sidebar-pref-collapsed .sidebar-label { opacity: 0; width: 0; overflow: hidden; display: inline-block; }
@media (max-width: 1024px) {
  .sidebar-label { opacity: 0; width: 0; overflow: hidden; display: inline-block; }
  html.sidebar-pref-expanded .sidebar-label { opacity: 1; width: auto; overflow: visible; }
}

/* ===== Phone-width override (2026-09-21 mobile-responsiveness audit) =====
   Below 1024px the rules above force a permanent icon-only rail (5rem,
   80px) UNLESS the user has ever clicked the sidebar toggle to "expanded"
   (persisted to localStorage), in which case it forces a full 16rem
   (256px) rail with no cap — on a real 375px phone that is 68% of the
   entire screen, permanently, with no way to dismiss it. Even the normal
   80px rail is a real usability problem on a phone: 21% of a 375px
   screen gone forever, confirmed live via screenshot (dashboard title
   forced to truncate to "Dashbo...").
   Below 640px the sidebar becomes a true off-canvas drawer instead:
   hidden by default (off-screen via transform, not display:none, so the
   width transition stays smooth), toggled by the SAME #sidebarToggleBtn
   hamburger via a new `sidebar-open` class (kept separate from the
   sidebar-pref-collapsed/expanded classes above, which still drive the
   desktop/tablet icon-rail-vs-full-label choice at 641-1024px and keep
   working unchanged there). Content always gets the full viewport width
   at this size since the drawer overlays rather than pushes it. Same
   off-canvas pattern already proven on the marketing site's mobile nav
   and the user manual's TOC drawer. */
@media (max-width: 640px) {
  #appSidebar {
    transform: translateX(-100%);
    transition: transform .22s ease;
    width: min(16rem, 85vw);
    box-shadow: 0 0 40px rgba(0,0,0,.25);
  }
  html.sidebar-open #appSidebar { transform: translateX(0); }
  .app-main-offset { margin-left: 0; }
  .sidebar-label { opacity: 1; width: auto; overflow: visible; }
  .sidebar-backdrop { display: none; position: fixed; inset: 0; z-index: 25; background: rgba(0,0,0,.45); }
  html.sidebar-open .sidebar-backdrop { display: block; }
}