/* shared system classes (prop-system, 2026-10-22 evening; notes/prop-system.md). Tokens come from /_style/tokens.css. */
@import url("/_style/system.css");
/* swarm R24 home-marketing: muted labels on shaded bands (#f2f2ef) and stages (#e9e9e5) pass 4.5:1 in light mode */
html:not(.dark){--muted:#5f6864}
/* Marketing uses the canonical tokens for inherited shared chrome too. */
.nav,.mobile-menu,.foot{border-radius:var(--radius-0)}
.skip,.brand{border-radius:var(--radius-m)}
.skip,.btn-primary{color:var(--btn-text)}
.btn-ghost,.dd-panel,.menu-btn,.dd-foot{background:var(--sheet)}
.nav-link,.dd-btn{color:var(--text)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--muted),var(--shadow-rest)}
.btn:active,.btn-primary:active{transition-duration:calc(var(--dur-1) / 2)}

/* Focus follows the same shape as the control it identifies. */
:focus-visible{outline-color:var(--green);border-radius:var(--radius-0)}
.skip:focus-visible,.brand:focus-visible,.nav-link:focus-visible,.dd-btn:focus-visible,
.dd-item:focus-visible,.dd-foot:focus-visible,.menu-btn:focus-visible,
.sx-theme:focus-visible{border-radius:var(--radius-m)}
.btn:focus-visible,.btn-sm:focus-visible{border-radius:var(--radius-pill)}
.foot :focus-visible{outline-color:var(--green)}

/* The footer remains dark in either theme. */
.foot .brand,.foot .mail,.foot :is(h3,h4),.foot ul a:hover,.foot .social a:hover{color:var(--foot-text)}
.foot-about a.mail{text-decoration-color:var(--foot-line)}

/* Repeated rows use the same dashed paper rules as the shared page. */
.list .pp,.ways li,.tier,.toc li{border-bottom-style:dashed;border-bottom-color:var(--rule-dash)}
.mo+.mo,.roles li,.ws-rows li+li,.ws-list li{border-top-style:dashed;border-top-color:var(--rule-dash)}
.tbl td{border-bottom-style:dashed;border-bottom-color:var(--rule-dash)}

@media (prefers-reduced-motion:reduce){
  .sx-theme:active svg{transform:none!important;translate:none!important;scale:none!important;rotate:none!important}
}

/* Surface rhythm (repropagation 2026-10-22 evening, DESIGN-PRINCIPLES "Current system"): sections not yet converted to
   .sx-band classes get the same neutral bands automatically. Opening section paper with the faint graph-paper grid,
   middle sections alternate white / shade with the dot field, the closing section paper with its grid. Never green.
   Both textures fade to nothing at all four edges (tokens --tex-*). */
main>section:not(.sx-band){position:relative;isolation:isolate}
main>section:not(.sx-band):first-child{background-color:var(--band-paper)!important;--stage-bg:var(--panel-on-paper)}
main>section:not(.sx-band):first-child::before,main>section.final-sec:not(.sx-band)::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--tex-grid);opacity:var(--tex-opacity);
  --g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M32 .5H0M.5 0v32' fill='none' stroke='%23000'/%3E%3C/svg%3E");
  -webkit-mask:var(--g) 50% 0/32px 32px,var(--tex-fade);-webkit-mask-composite:source-in;
  mask:var(--g) 50% 0/32px 32px,var(--tex-fade);mask-composite:intersect}
main>section.final-sec:not(.sx-band){background-color:var(--band-paper)!important;--stage-bg:var(--panel-on-paper)}
main>section:not(.sx-band):not(:first-child):not(.final-sec):nth-of-type(even){background:var(--band-white)!important;--stage-bg:var(--panel-on-white)}
main>section:not(.sx-band):not(:first-child):not(.final-sec):nth-of-type(odd){background:var(--band-shade)!important;--stage-bg:var(--panel-on-shade)}
main>section:not(.sx-band):not(:first-child):not(.final-sec):nth-of-type(odd)::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--tex-dot);opacity:var(--tex-opacity);
  --d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Ccircle cx='7' cy='7' r='1' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask:var(--d) 50% 0/14px 14px,var(--tex-fade);-webkit-mask-composite:source-in;
  mask:var(--d) 50% 0/14px 14px,var(--tex-fade);mask-composite:intersect}
/* the closing section no longer needs its rule: the band change separates it */
.final3{border-top:0!important}
/* the footer wordmark is sized in vw: zoomed out (3800 css px) it grew to an 840px word */
html footer:is(.foot,#sx-foot)::after{font-size:min(22vw,420px)!important}
/* every banded section gets the same room at both ends (the old ".sec.tight" sections had none on top, so their
   content touched the new band edge) */
main>section:not(.sx-band).sec:not(:first-child){padding-top:96px!important;padding-bottom:96px!important}
@media (max-width:720px){main>section:not(.sx-band).sec:not(:first-child){padding-top:64px!important;padding-bottom:64px!important}}

/* Marketing propagation, 2026-10-22. Shared classes own every converted section.
   Legacy automatic bands above apply only to pages awaiting their own propagation. */
main>.sx-band{padding-block:var(--sec-y);border-block:0;border-radius:var(--radius-0)}
main>.sx-band--tight{padding-block:var(--sec-y-tight)}
main>.sx-band--white{background-color:var(--band-white)}
main>.sx-band--paper{background-color:var(--band-paper)}
main>.sx-band--shade{background-color:var(--band-shade)}
.sx-band .ruled{border-top:0;padding-top:0}
.sx-band .final3{padding-top:0;border-top:0}
.sx-band .ph-note{color:var(--muted)}
.sx-band .go svg{color:currentColor}
.sx-band .sx-rv{
  opacity:0;transform:none;translate:0 var(--rise);
  transition:opacity var(--dur-3) var(--ease),translate var(--dur-3) var(--ease);
  transition-delay:calc(var(--i,0) * var(--stagger))}
.sx-band .sx-sheet-pop.sx-rv{
  translate:0 calc(var(--rise) * 1.6);
  transition-delay:calc(120ms + var(--i,0) * var(--stagger))}
.sx-band .sx-rv.sx-in{opacity:1;transform:none;translate:0 0}
.sx-band .btn{transition:translate var(--dur-2) var(--ease),scale var(--dur-1) var(--ease),box-shadow var(--dur-2) var(--ease),background-color var(--dur-1) var(--ease)}
.sx-band .btn:hover{transform:none;translate:none;scale:none;rotate:none;translate:0 var(--lift-btn)}
.sx-band .btn-primary:hover{box-shadow:var(--shadow-raised)}
.sx-band .btn:active{transform:none;translate:none;scale:none;rotate:none;translate:0 0;scale:.98;transition-duration:calc(var(--dur-1) / 2)}
@media(prefers-reduced-motion:reduce){
  .sx-band .sx-rv,.sx-band .sx-rv.sx-in{opacity:1;transform:none;translate:none;transition:none}
  .sx-band .btn,.sx-band .btn:hover,.sx-band .btn:active{transform:none;translate:none;scale:none;rotate:none;translate:none;scale:none;transition:none}
}