/* Reusable helper classes (Bootstrap-style utilities), built on the spacing
   scale in tokens.css. Use these for new layout/spacing instead of one-off
   values in a component's own CSS. Existing block styles aren't retrofitted
   to use these yet — migrate opportunistically as blocks get touched.

   Spacing scale reference (tokens.css): 0..12 steps map to
   0,4,8,12,16,20,24,32,40,48,64,80,96px. */

/* Visually hidden but accessible to assistive tech (form labels, skip links). */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Margin — all sides, per-axis, per-side. */
.m-0{margin:var(--space-0)}
.m-1{margin:var(--space-1)}
.m-2{margin:var(--space-2)}
.m-3{margin:var(--space-3)}
.m-4{margin:var(--space-4)}
.m-5{margin:var(--space-5)}
.m-6{margin:var(--space-6)}
.m-7{margin:var(--space-7)}
.m-8{margin:var(--space-8)}
.m-9{margin:var(--space-9)}
.m-10{margin:var(--space-10)}
.m-11{margin:var(--space-11)}
.m-12{margin:var(--space-12)}
.m-auto{margin:auto}

.mt-0{margin-top:var(--space-0)} .mb-0{margin-bottom:var(--space-0)}
.mt-1{margin-top:var(--space-1)} .mb-1{margin-bottom:var(--space-1)}
.mt-2{margin-top:var(--space-2)} .mb-2{margin-bottom:var(--space-2)}
.mt-3{margin-top:var(--space-3)} .mb-3{margin-bottom:var(--space-3)}
.mt-4{margin-top:var(--space-4)} .mb-4{margin-bottom:var(--space-4)}
.mt-5{margin-top:var(--space-5)} .mb-5{margin-bottom:var(--space-5)}
.mt-6{margin-top:var(--space-6)} .mb-6{margin-bottom:var(--space-6)}
.mt-7{margin-top:var(--space-7)} .mb-7{margin-bottom:var(--space-7)}
.mt-8{margin-top:var(--space-8)} .mb-8{margin-bottom:var(--space-8)}
.mt-9{margin-top:var(--space-9)} .mb-9{margin-bottom:var(--space-9)}
.mt-10{margin-top:var(--space-10)} .mb-10{margin-bottom:var(--space-10)}
.mt-11{margin-top:var(--space-11)} .mb-11{margin-bottom:var(--space-11)}
.mt-12{margin-top:var(--space-12)} .mb-12{margin-bottom:var(--space-12)}
.mt-auto{margin-top:auto} .mb-auto{margin-bottom:auto}

.ml-0{margin-left:var(--space-0)} .mr-0{margin-right:var(--space-0)}
.ml-1{margin-left:var(--space-1)} .mr-1{margin-right:var(--space-1)}
.ml-2{margin-left:var(--space-2)} .mr-2{margin-right:var(--space-2)}
.ml-3{margin-left:var(--space-3)} .mr-3{margin-right:var(--space-3)}
.ml-4{margin-left:var(--space-4)} .mr-4{margin-right:var(--space-4)}
.ml-5{margin-left:var(--space-5)} .mr-5{margin-right:var(--space-5)}
.ml-6{margin-left:var(--space-6)} .mr-6{margin-right:var(--space-6)}
.ml-7{margin-left:var(--space-7)} .mr-7{margin-right:var(--space-7)}
.ml-8{margin-left:var(--space-8)} .mr-8{margin-right:var(--space-8)}
.ml-9{margin-left:var(--space-9)} .mr-9{margin-right:var(--space-9)}
.ml-10{margin-left:var(--space-10)} .mr-10{margin-right:var(--space-10)}
.ml-11{margin-left:var(--space-11)} .mr-11{margin-right:var(--space-11)}
.ml-12{margin-left:var(--space-12)} .mr-12{margin-right:var(--space-12)}
.ml-auto{margin-left:auto} .mr-auto{margin-right:auto}

.mx-0{margin-left:var(--space-0);margin-right:var(--space-0)}
.mx-1{margin-left:var(--space-1);margin-right:var(--space-1)}
.mx-2{margin-left:var(--space-2);margin-right:var(--space-2)}
.mx-3{margin-left:var(--space-3);margin-right:var(--space-3)}
.mx-4{margin-left:var(--space-4);margin-right:var(--space-4)}
.mx-5{margin-left:var(--space-5);margin-right:var(--space-5)}
.mx-6{margin-left:var(--space-6);margin-right:var(--space-6)}
.mx-7{margin-left:var(--space-7);margin-right:var(--space-7)}
.mx-8{margin-left:var(--space-8);margin-right:var(--space-8)}
.mx-9{margin-left:var(--space-9);margin-right:var(--space-9)}
.mx-10{margin-left:var(--space-10);margin-right:var(--space-10)}
.mx-11{margin-left:var(--space-11);margin-right:var(--space-11)}
.mx-12{margin-left:var(--space-12);margin-right:var(--space-12)}
.mx-auto{margin-left:auto;margin-right:auto}

.my-0{margin-top:var(--space-0);margin-bottom:var(--space-0)}
.my-1{margin-top:var(--space-1);margin-bottom:var(--space-1)}
.my-2{margin-top:var(--space-2);margin-bottom:var(--space-2)}
.my-3{margin-top:var(--space-3);margin-bottom:var(--space-3)}
.my-4{margin-top:var(--space-4);margin-bottom:var(--space-4)}
.my-5{margin-top:var(--space-5);margin-bottom:var(--space-5)}
.my-6{margin-top:var(--space-6);margin-bottom:var(--space-6)}
.my-7{margin-top:var(--space-7);margin-bottom:var(--space-7)}
.my-8{margin-top:var(--space-8);margin-bottom:var(--space-8)}
.my-auto{margin-top:auto;margin-bottom:auto}

/* Padding — all sides, per-axis, per-side. */
.p-0{padding:var(--space-0)}
.p-1{padding:var(--space-1)}
.p-2{padding:var(--space-2)}
.p-3{padding:var(--space-3)}
.p-4{padding:var(--space-4)}
.p-5{padding:var(--space-5)}
.p-6{padding:var(--space-6)}
.p-7{padding:var(--space-7)}
.p-8{padding:var(--space-8)}
.p-9{padding:var(--space-9)}
.p-10{padding:var(--space-10)}
.p-11{padding:var(--space-11)}
.p-12{padding:var(--space-12)}

.pt-0{padding-top:var(--space-0)} .pb-0{padding-bottom:var(--space-0)}
.pt-1{padding-top:var(--space-1)} .pb-1{padding-bottom:var(--space-1)}
.pt-2{padding-top:var(--space-2)} .pb-2{padding-bottom:var(--space-2)}
.pt-3{padding-top:var(--space-3)} .pb-3{padding-bottom:var(--space-3)}
.pt-4{padding-top:var(--space-4)} .pb-4{padding-bottom:var(--space-4)}
.pt-5{padding-top:var(--space-5)} .pb-5{padding-bottom:var(--space-5)}
.pt-6{padding-top:var(--space-6)} .pb-6{padding-bottom:var(--space-6)}
.pt-7{padding-top:var(--space-7)} .pb-7{padding-bottom:var(--space-7)}
.pt-8{padding-top:var(--space-8)} .pb-8{padding-bottom:var(--space-8)}
.pt-9{padding-top:var(--space-9)} .pb-9{padding-bottom:var(--space-9)}
.pt-10{padding-top:var(--space-10)} .pb-10{padding-bottom:var(--space-10)}
.pt-11{padding-top:var(--space-11)} .pb-11{padding-bottom:var(--space-11)}
.pt-12{padding-top:var(--space-12)} .pb-12{padding-bottom:var(--space-12)}

.pl-0{padding-left:var(--space-0)} .pr-0{padding-right:var(--space-0)}
.pl-1{padding-left:var(--space-1)} .pr-1{padding-right:var(--space-1)}
.pl-2{padding-left:var(--space-2)} .pr-2{padding-right:var(--space-2)}
.pl-3{padding-left:var(--space-3)} .pr-3{padding-right:var(--space-3)}
.pl-4{padding-left:var(--space-4)} .pr-4{padding-right:var(--space-4)}
.pl-5{padding-left:var(--space-5)} .pr-5{padding-right:var(--space-5)}
.pl-6{padding-left:var(--space-6)} .pr-6{padding-right:var(--space-6)}
.pl-7{padding-left:var(--space-7)} .pr-7{padding-right:var(--space-7)}
.pl-8{padding-left:var(--space-8)} .pr-8{padding-right:var(--space-8)}
.pl-9{padding-left:var(--space-9)} .pr-9{padding-right:var(--space-9)}
.pl-10{padding-left:var(--space-10)} .pr-10{padding-right:var(--space-10)}
.pl-11{padding-left:var(--space-11)} .pr-11{padding-right:var(--space-11)}
.pl-12{padding-left:var(--space-12)} .pr-12{padding-right:var(--space-12)}

.px-0{padding-left:var(--space-0);padding-right:var(--space-0)}
.px-1{padding-left:var(--space-1);padding-right:var(--space-1)}
.px-2{padding-left:var(--space-2);padding-right:var(--space-2)}
.px-3{padding-left:var(--space-3);padding-right:var(--space-3)}
.px-4{padding-left:var(--space-4);padding-right:var(--space-4)}
.px-5{padding-left:var(--space-5);padding-right:var(--space-5)}
.px-6{padding-left:var(--space-6);padding-right:var(--space-6)}
.px-7{padding-left:var(--space-7);padding-right:var(--space-7)}
.px-8{padding-left:var(--space-8);padding-right:var(--space-8)}
.px-9{padding-left:var(--space-9);padding-right:var(--space-9)}
.px-10{padding-left:var(--space-10);padding-right:var(--space-10)}
.px-11{padding-left:var(--space-11);padding-right:var(--space-11)}
.px-12{padding-left:var(--space-12);padding-right:var(--space-12)}

.py-0{padding-top:var(--space-0);padding-bottom:var(--space-0)}
.py-1{padding-top:var(--space-1);padding-bottom:var(--space-1)}
.py-2{padding-top:var(--space-2);padding-bottom:var(--space-2)}
.py-3{padding-top:var(--space-3);padding-bottom:var(--space-3)}
.py-4{padding-top:var(--space-4);padding-bottom:var(--space-4)}
.py-5{padding-top:var(--space-5);padding-bottom:var(--space-5)}
.py-6{padding-top:var(--space-6);padding-bottom:var(--space-6)}
.py-7{padding-top:var(--space-7);padding-bottom:var(--space-7)}
.py-8{padding-top:var(--space-8);padding-bottom:var(--space-8)}
.py-9{padding-top:var(--space-9);padding-bottom:var(--space-9)}
.py-10{padding-top:var(--space-10);padding-bottom:var(--space-10)}
.py-11{padding-top:var(--space-11);padding-bottom:var(--space-11)}
.py-12{padding-top:var(--space-12);padding-bottom:var(--space-12)}

/* Gap — for flex/grid containers. */
.gap-0{gap:var(--space-0)}
.gap-1{gap:var(--space-1)}
.gap-2{gap:var(--space-2)}
.gap-3{gap:var(--space-3)}
.gap-4{gap:var(--space-4)}
.gap-5{gap:var(--space-5)}
.gap-6{gap:var(--space-6)}
.gap-7{gap:var(--space-7)}
.gap-8{gap:var(--space-8)}
.gap-9{gap:var(--space-9)}

/* Display. */
.d-block{display:block}
.d-inline-block{display:inline-block}
.d-flex{display:flex}
.d-inline-flex{display:inline-flex}
.d-grid{display:grid}
.d-none{display:none}

/* Flex layout. */
.flex-row{flex-direction:row}
.flex-column{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.flex-nowrap{flex-wrap:nowrap}
.flex-1{flex:1}
.items-start{align-items:flex-start}
.items-center{align-items:center}
.items-end{align-items:flex-end}
.items-stretch{align-items:stretch}
.justify-start{justify-content:flex-start}
.justify-center{justify-content:center}
.justify-end{justify-content:flex-end}
.justify-between{justify-content:space-between}
.justify-around{justify-content:space-around}

/* Text. */
.text-left{text-align:left}
.text-center{text-align:center}
.text-right{text-align:right}
.text-muted{color:var(--muted)}

/* Typography scale — 6 heading roles + 2 body roles, standardized from the
   ~25 near-duplicate one-off heading/paragraph rules found across
   styles.css (each was setting its own slightly different font-size/
   line-height/letter-spacing combo for what was visually the same role).
   Font-size/line-height/letter-spacing only — margin and color stay out of
   these, handled by the spacing utilities above and the existing color
   tokens respectively. Existing blocks aren't retrofitted yet; apply as
   each block gets touched (same opportunistic-migration approach as the
   spacing utilities). */
.text-hero{font-size:var(--fs-hero);line-height:var(--lh-display);letter-spacing:var(--tracking-display)}
.text-section{font-size:var(--fs-section);line-height:var(--lh-tight);letter-spacing:var(--tracking-heading)}
.text-panel{font-size:var(--fs-panel);line-height:var(--lh-tight);letter-spacing:var(--tracking-heading)}
.text-subhead{font-size:var(--fs-subhead);line-height:var(--lh-title);letter-spacing:var(--tracking-title)}
.text-title{font-size:var(--fs-card-title);line-height:var(--lh-title);letter-spacing:var(--tracking-title)}
.text-title-sm{font-size:var(--fs-card-title-sm);line-height:var(--lh-title);letter-spacing:var(--tracking-title)}

.text-body{font-size:var(--fs-body);line-height:var(--lh-body)}
.text-body-sm{font-size:var(--fs-body-sm);line-height:1.55}

/* Width. */
.w-full{width:100%}
.max-w-full{max-width:100%}

@media (max-width:820px){
  .d-none-mobile{display:none}
  .d-block-mobile{display:block}
}