/* Standalone adapters for the WordPress site's shared design system.
   Palette, type scale, text measure and document components live in sfc-shared.css. */
*{box-sizing:border-box}
body{margin:0;-webkit-font-smoothing:antialiased}
a{color:inherit}
.skip-link{position:absolute;left:24px;top:-100px;z-index:10;padding:12px;background:var(--sfc-paper);font-family:var(--sfc-sans)}
.skip-link:focus{top:12px}
.header-row{min-height:80px;display:flex;align-items:center;justify-content:space-between;gap:24px}
#masthead .brand{display:flex;align-items:center;gap:18px;text-decoration:none}
#masthead .brand img{display:block;flex:none}
#masthead .site-title{white-space:nowrap}
.desktop-navigation{display:flex;align-items:center;gap:0}
.desktop-navigation a{display:block;font-family:var(--sfc-sans);font-size:13px;line-height:1.6;font-weight:600;text-decoration:none;padding:7.8px}
.desktop-navigation a:hover{color:var(--sfc-accent-text)}
.nav-dropdown{position:relative}
.nav-parent>span{padding-right:13px}
.nav-submenu-toggle{position:absolute;right:0;top:0;display:grid;place-items:center;width:20px;height:100%;padding:0;border:0;background:none;color:inherit;cursor:pointer}
.nav-submenu-toggle svg{width:10.5234375px;height:10.5234375px}
.nav-submenu{position:absolute;right:0;top:100%;z-index:6;min-width:210px;margin:0;padding:8px;list-style:none;background:var(--sfc-paper);border:1px solid var(--sfc-line)}
.nav-submenu[hidden]{display:none}
.nav-submenu li{margin:0;padding:0}
.nav-submenu a{padding:10px 12px}
.desktop-navigation a:focus-visible,.nav-submenu-toggle:focus-visible{outline:2px solid var(--sfc-accent-text);outline-offset:2px}
.mobile-navigation{display:none;position:relative;font-family:var(--sfc-sans)}
.mobile-navigation summary{list-style:none;display:grid;place-items:center;width:40px;height:44px;cursor:pointer;color:var(--sfc-accent-text)}
.mobile-navigation summary::-webkit-details-marker{display:none}
.menu-icon{width:22px;height:14px;border-block:1.5px solid currentColor;position:relative}
.menu-icon::before{content:"";position:absolute;top:5px;left:0;width:22px;border-top:1.5px solid currentColor}
.mobile-navigation nav{position:absolute;right:0;top:54px;z-index:5;width:230px;padding:8px 16px;background:var(--sfc-paper);border:1px solid var(--sfc-line)}
.mobile-navigation nav a{display:block;font-weight:600;font-size:18px;line-height:1.6;padding:10px 0;text-decoration:none}
.mobile-navigation nav a:hover{color:var(--sfc-accent-text)}
.mobile-navigation .mobile-submenu{padding-left:16px;border-left:1px solid var(--sfc-line)}
.mobile-navigation .mobile-submenu a{font-size:15px}
#sfc .doc-intro .lede{font-size:var(--sfc-prose);line-height:var(--sfc-leading);font-variation-settings:"opsz" 16;color:var(--sfc-ink)}
#sfc .doc-intro p:last-child{margin-bottom:0}
#sfc .doc-body>h2:first-child{margin-top:0}
#sfc .method-steps{max-width:var(--sfc-measure);margin-inline:auto}
#sfc .method-steps section{margin:0;padding:0;border:0}
#sfc .doc-body figure{max-width:var(--sfc-wide);margin:32px auto}
#sfc .doc-body figure img{display:block;width:100%;height:auto}
#sfc .doc-body figcaption{max-width:var(--sfc-measure);margin:10px auto 0;font-family:var(--sfc-sans);font-size:13px;font-weight:400;line-height:1.5;font-variation-settings:normal;color:var(--sfc-gray)}
#colophon>.site-container{max-width:var(--sfc-shell);margin-inline:auto}
#colophon .site-bottom-footer-inner-wrap{display:block}
@media(min-width:1080px){
  #sfc .doc.has-toc .doc-head .doc-intro{max-width:none}
  #sfc .doc.has-toc .doc-head .doc-intro p{margin-left:288px;margin-right:0}
  #sfc .doc.has-toc .doc-body .method-steps{margin-left:0;margin-right:0}
  #sfc .doc-body figure{margin-inline:0}
  #sfc .doc-body figcaption{margin-left:0;margin-right:0}
}
@media(max-width:1079px){#sfc .doc-head{margin-bottom:56px}}
@media(max-width:1023px){.desktop-navigation{display:none}.mobile-navigation{display:block}}
@media(max-width:781px){#sfc .doc-head{margin-bottom:40px}.header-row{gap:12px}.mobile-navigation nav{max-width:calc(100vw - 48px)}}
@media(max-width:600px){#masthead .brand{gap:12px}}
@media(max-width:359px){#masthead .site-branding .site-title{font-size:20px}#masthead .brand{gap:8px}.header-row{gap:8px}}

#sfc .method-steps h3{margin-top:24px;}

/* Method overview: a labeled sequence with non-interactive stages. */
#sfc .method-overview{max-width:var(--sfc-measure);margin:20px auto 28px;padding:0;container-type:inline-size;}
#sfc .method-flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;max-width:none;margin:0;padding:0;list-style:none;}
#sfc .method-flow>li{position:relative;min-width:0;max-width:none;margin:0;padding:0;}
#sfc .method-flow .flow-arrow{position:absolute;top:0;right:4px;color:var(--sfc-gray);font:18px/1.4 var(--sfc-sans);pointer-events:none;}
#sfc .method-flow .flow-stage{display:grid;align-content:start;gap:8px;min-height:104px;padding:0 4px 4px 0;color:var(--sfc-ink);}
#sfc .method-flow .flow-index{font:12px/1.5 var(--sfc-mono);color:var(--sfc-accent-text);}
#sfc .method-flow .flow-copy{display:grid;align-content:start;gap:8px;}
#sfc .method-flow .flow-title{width:fit-content;font:500 22px/1.25 var(--sfc-serif);font-variation-settings:"opsz" 24;}
#sfc .method-flow .flow-purpose{font:400 14px/1.45 var(--sfc-sans);font-variation-settings:normal;color:var(--sfc-gray);}
#sfc .method-steps section{scroll-margin-top:28px;}
@media(min-width:1080px){#sfc .method-overview{max-width:none;margin-inline:0;}}
@container(max-width:620px){
  #sfc .method-flow{grid-template-columns:1fr;gap:0;}
  #sfc .method-flow .flow-stage{grid-template-columns:24px minmax(0,1fr);align-items:baseline;gap:12px;min-height:52px;padding:10px 0;}
  #sfc .method-flow .flow-copy{grid-template-columns:92px minmax(0,1fr);align-items:baseline;gap:12px;}
  #sfc .method-flow .flow-title{font-size:20px;}
  #sfc .method-flow .flow-arrow{font-size:0;top:36px;bottom:0;left:7px;right:auto;border-left:1px solid var(--sfc-line);}
}

/* Use the text accent for readable small type; the brand accent stays unchanged. */
#sfc .toc p.toc-label,
#sfc .toc a:hover,
#sfc .toc a.is-active,
#sfc .toc a[aria-current="location"]{color:var(--sfc-accent-text);}
#sfc .toc a[aria-current="location"]{text-decoration:underline;text-underline-offset:3px;}
#sfc .toc a:focus-visible{outline:2px solid var(--sfc-accent-text);outline-offset:2px;}
body .footer-html .f-contact{display:block;margin-bottom:12px;font:400 13px/1.5 var(--sfc-sans);color:var(--sfc-gray);}
body .footer-html .f-contact a{color:var(--sfc-ink);text-decoration:underline;text-decoration-color:var(--sfc-accent);text-underline-offset:3px;overflow-wrap:anywhere;}
body .footer-html .f-contact a:hover{color:var(--sfc-accent-text);}
body .footer-html .f-contact a:focus-visible{outline:2px solid var(--sfc-accent-text);outline-offset:3px;}


/* A single illustrative problem, followed through the existing five-step method. */
#sfc .doc-body .method-example{max-width:var(--sfc-measure);margin:40px auto;}
#sfc .method-example h2{margin-top:0;}
#sfc .method-example-steps{margin:24px 0;padding:0;}
#sfc .method-example-steps>div{display:grid;grid-template-columns:100px minmax(0,1fr);gap:20px;padding:16px 0;border-top:1px solid var(--sfc-line);}
#sfc .method-example-steps dt{margin:0;font:600 15px/1.6 var(--sfc-sans);color:var(--sfc-ink);}
#sfc .method-example-steps dd{margin:0;font:400 18px/1.6 var(--sfc-serif);color:var(--sfc-ink);}
@media(min-width:1080px){#sfc .doc.has-toc .doc-body .method-example{margin-left:0;margin-right:0;}}
@media(max-width:600px){#sfc .method-example-steps>div{grid-template-columns:1fr;gap:6px;}}