/* ---- auth ---- the screens (sign in / sign up / reset / account, one shown at a time) = feature; the page's main is the [data-main] (today: a 26rem card
   centred under a slim header). Any arrangement keeps main a block (one screen at a time). Desktop only. heads / mirror = a split screen, the header as a
   full-height brand panel on the left / right of the screen; rail / dock = the header as a left / right column; chartsfirst = the screen on the page's left
   edge under the header; wide = a wider screen in a framed card on the right; trio = the rail header and a framed card on the right. */
html[data-app-kit=auth][data-l-app] [data-main]{display:block}
@media (min-width:960px){
html[data-app-kit=auth]:is([data-l-app=heads],[data-l-app=mirror],[data-l-app=dock]) body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(100vh,auto);max-width:none;margin:0;padding:0;column-gap:0;row-gap:0;align-items:stretch}
html[data-app-kit=auth]:is([data-l-app=heads],[data-l-app=mirror],[data-l-app=dock]) body > *{grid-row:1;grid-column:2}
html[data-app-kit=auth]:is([data-l-app=heads],[data-l-app=mirror],[data-l-app=dock]) body > [data-sec=nav]{grid-column:1;max-width:none;margin:0;padding:var(--s-8) clamp(24px,5vw,72px);display:flex;flex-direction:column;justify-content:space-between;background:var(--wash);border-right:1px solid var(--line);min-width:0;overflow-wrap:break-word;hyphens:auto}
html[data-app-kit=auth]:is([data-l-app=heads],[data-l-app=mirror],[data-l-app=dock]) body > [data-sec=nav] .brand{font-size:clamp(1.8rem,3.4vw,3rem);line-height:1.1}
html[data-app-kit=auth]:is([data-l-app=heads],[data-l-app=mirror]) body > main{align-self:center;width:100%;margin-inline:auto;padding-block:var(--s-7)}
html[data-app-kit=auth][data-l-app=mirror] body > *{grid-column:1}
html[data-app-kit=auth][data-l-app=mirror] body > [data-sec=nav]{grid-column:2;border-right:0;border-left:1px solid var(--line)}
html[data-app-kit=auth][data-l-app=dock] body{grid-template-columns:minmax(0,1fr) 280px}
html[data-app-kit=auth][data-l-app=dock] body > *{grid-column:1}
html[data-app-kit=auth][data-l-app=dock] body > [data-sec=nav]{grid-column:2;padding:var(--s-7) var(--s-5);border-right:0;border-left:1px solid var(--line);justify-content:flex-start}
html[data-app-kit=auth][data-l-app=dock] body > [data-sec=nav] .brand{font-size:clamp(1.4rem,2vw,1.9rem)}
html[data-app-kit=auth][data-l-app=dock] body > main{padding-top:var(--s-8)}
html[data-app-kit=auth][data-l-app=chartsfirst] body > main{margin-left:max(0px,calc((100vw - var(--page,1200px)) / 2))}
html[data-app-kit=auth]:is([data-l-app=wide],[data-l-app=trio]) body > main{max-width:34rem;margin-top:var(--s-6);padding:var(--s-7);border:1px solid var(--line);border-radius:var(--r-card,10px);background:var(--surface)}
html[data-app-kit=auth][data-l-app=wide] body > main{margin-right:max(var(--gutter,16px),calc((100vw - var(--page,1200px)) / 2));margin-left:auto}
html[data-app-kit=auth][data-l-app=trio] body > main{margin-left:auto;margin-right:max(var(--s-7),calc((100vw - 260px - 34rem) / 6))}
}