/* Shared styles: fonts, base, header and footer. Page sections keep their own inline styles. */

/* Archivo (variable: weight and width) and IBM Plex Mono, self-hosted from fonts/. Both are SIL Open Font License. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(../fonts/archivo-var-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(../fonts/archivo-var-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-mono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-mono-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-mono-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

*{box-sizing:border-box}
/* The sticky header's height, border included. In-page anchors land below it, and the docs sidebar sticks under it. */
:root{--header-h:69px}
html{scroll-padding-top:var(--header-h)}
[hidden]{display:none!important}
body{margin:0;background:#F4F6F8;color:#14202B;font-family:'Archivo',system-ui,sans-serif;font-size:17px;line-height:1.6}
a{color:#0B6E8F}
a:hover{color:#08506A}
h1,h2{font-stretch:112%}
summary{cursor:pointer}
summary::-webkit-details-marker{color:#0B6E8F}
/* One focus style for everything the keyboard can reach, so the inline-styled buttons need nothing of their own;
   white where the background is dark. The skip link (inc/head.php) sits off-screen until it has focus and lands on
   the page's #content, which must not show a ring of its own. */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #0B6E8F;outline-offset:2px}
.site-footer :focus-visible{outline-color:#FFFFFF}
.skip-link{position:absolute;top:-200px;left:16px;z-index:100;padding:10px 16px;border-radius:0 0 8px 8px;background:#0B6E8F;color:#FFFFFF;font-weight:600;text-decoration:none}
.skip-link:focus{top:0}
#content:focus{outline:none}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:#FFFFFF;border-bottom:1px solid #DDE2E8}
.site-header .bar{max-width:1200px;margin:0 auto;padding:14px 24px;display:flex;flex-wrap:nowrap;gap:16px 32px;align-items:center;justify-content:space-between}
a.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#14202B}
.brand .mark{display:inline-flex;width:36px;height:36px;border-radius:8px;background:#0B6E8F;align-items:center;justify-content:center}
.brand .words{display:flex;flex-direction:column;line-height:1.15}
.brand .co{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#4F5D6B;font-weight:600}
.brand .name{font-size:17px;font-weight:700}
.site-nav{display:flex;flex-wrap:wrap;gap:6px 26px;font-size:15px;font-weight:500}
.site-nav a{color:#14202B;text-decoration:none}
.site-nav a[aria-current="page"]{color:#0B6E8F}
a.btn-download{display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border-radius:8px;background:#0B6E8F;color:#FFFFFF;text-decoration:none;font-weight:600;font-size:15px}
.nav-download{display:none}
.nav-toggle{display:none;flex:none;width:44px;height:44px;border:0;border-radius:8px;background:transparent;color:#14202B;cursor:pointer;align-items:center;justify-content:center}
.nav-toggle:hover{background:#F4F6F8}
.nav-toggle .icon-close{display:none}
html.nav-open .nav-toggle .icon-open{display:none}
html.nav-open .nav-toggle .icon-close{display:block}
/* Below this width the links fold into a menu under the bar (js/site.js) and the Download button leaves the bar. */
@media (max-width:1000px){
:root{--header-h:57px}
.site-header .bar{padding:6px 16px}
.brand .mark{width:32px;height:32px}
a.btn-download{display:none}
.nav-toggle{display:inline-flex}
.site-nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;padding:4px 16px 12px;background:#FFFFFF;border-bottom:1px solid #DDE2E8;box-shadow:0 12px 24px rgba(20,32,43,.12);font-size:17px}
html.nav-open .site-nav{display:flex}
.site-nav a{padding:12px 8px;border-top:1px solid #EEF1F4}
.site-nav a:first-child{border-top:0}
.site-nav .nav-download{display:block;font-weight:600;color:#0B6E8F}
}

/* Footer */
.site-footer{background:#101820;color:#B9C4D0;font-size:15px}
.site-footer .wrap{max-width:1200px;margin:0 auto;padding:64px 24px 0}
.site-footer .cols{display:flex;flex-wrap:wrap;gap:48px 64px;padding-bottom:56px}
.site-footer .dim{color:#7F8EA0}
.foot-header{flex:1 1 280px;min-width:0;font-family:'IBM Plex Mono',monospace;font-size:14px;line-height:1.75;color:#E6EDF3;overflow-wrap:anywhere}
.foot-header .title{font-weight:600;color:#FFFFFF}
.foot-nav{flex:3 1 600px;min-width:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:36px 20px}
.foot-nav nav{display:flex;flex-direction:column;gap:10px}
.foot-nav .head{font-family:'IBM Plex Mono',monospace;font-size:13.5px;line-height:1.5;margin-bottom:4px}
.foot-nav .letter{color:#8FD3FF}
.foot-nav .rule{color:#3A4756}
.foot-nav a{color:#E6EDF3;text-decoration:none}
.site-footer .base{border-top:1px solid #2B3542;padding:28px 0 32px;display:flex;flex-wrap:wrap;gap:20px 40px;align-items:flex-end;justify-content:space-between}
.site-footer .brandline{display:flex;flex-direction:column;gap:10px}
.site-footer .brandline a{display:inline-flex;align-self:flex-start}
.site-footer .brandline img{display:block;height:28px;width:auto}
.site-footer .brandline p{margin:0;font-size:15px;font-weight:500;color:#E6EDF3}
.site-footer .brandline .tw{color:#009FF3}
.site-footer .brandline .about{font-size:14px;font-weight:400;color:#B9C4D0;max-width:520px}
.site-footer .brandline .about a{color:#E6EDF3;text-decoration:none}
.site-footer .legal{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:14px;line-height:1.6;color:#B9C4D0;text-align:right}
.site-footer .legal a{color:#E6EDF3;text-decoration:none;white-space:nowrap}
/* Below this width the brand block and the legal block stack, and the legal block goes back to left-aligned. */
@media (max-width:940px){.site-footer .base{flex-direction:column;align-items:flex-start}.site-footer .legal{align-items:flex-start;text-align:left}}

/* Download flow: the modal (inc/download-modal.php) on every page, the card on /download. */
.dl-modal{width:min(580px,calc(100vw - 32px));max-width:none;padding:0;border:0;border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.3);color:#14202B;background:#FFFFFF}
.dl-modal[data-step="2"]{width:min(440px,calc(100vw - 32px))}
.dl-modal[data-step="3"]{width:min(520px,calc(100vw - 32px))}
.dl-modal::backdrop{background:rgba(16,24,32,.55)}
html.dl-open,html.zoom-open{overflow:hidden}
.dl-card{max-width:580px;margin:64px auto 96px;background:#FFFFFF;border:1px solid #DDE2E8;border-radius:12px;box-shadow:0 8px 24px rgba(20,32,43,.08);overflow:hidden}
.dl-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 24px;border-bottom:1px solid #DDE2E8}
.dl-head h1,.dl-head h2{margin:0;font-size:20px;line-height:1.3;font-stretch:100%}
.dl-close{width:44px;height:44px;margin:-10px -12px -10px 0;border:0;border-radius:8px;background:transparent;color:#4F5D6B;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.dl-close:hover{color:#14202B}
.dl-body{padding:20px 24px;display:flex;flex-direction:column;gap:16px;font-size:15px;line-height:1.5}
.dl-body p{margin:0}
.dl-foot{display:flex;justify-content:space-between;align-items:center;gap:12px 16px;flex-wrap:wrap;padding:16px 24px;border-top:1px solid #DDE2E8;background:#F8F9FB}
.dl-foot-end{justify-content:flex-end}
.dl-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:520px){.dl-grid2{grid-template-columns:1fr}}
.dl-field{display:flex;flex-direction:column;gap:6px}
.dl-field label,.dl-label{font-weight:500}
.dl-field input[type=text],.dl-field input[type=email],.dl-field select{height:44px;border:1px solid #C5CDD6;border-radius:8px;padding:0 12px;font:inherit;background:#FFFFFF;color:#14202B;width:100%}
.dl-field select{padding:0 10px}
.dl-field input.dl-code-input{height:48px;font-family:'IBM Plex Mono',monospace;font-size:20px;letter-spacing:.3em;text-align:center}
.dl-check{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.dl-check input{width:18px;height:18px;margin:2px 0 0;flex:none}
.dl-req{color:#B42318}
/* A field's own message, under it; js/download.js and the page's server answer both use it. */
.dl-field-error{margin:0;font-size:13.5px;line-height:1.4;color:#B42318;font-weight:500}
.dl-field input[aria-invalid="true"],.dl-field select[aria-invalid="true"]{border-color:#B42318}
.dl-check input[aria-invalid="true"]{outline:2px solid #B42318;outline-offset:1px}
.dl-hint{font-size:13.5px;color:#4F5D6B}
.dl-foot .dl-hint{flex:1 1 260px}   /* beside the button only; in a column (the hash field) that basis would be height */
.dl-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:0;border-radius:8px;background:#0B6E8F;color:#FFFFFF;font:inherit;font-weight:600;text-decoration:none;cursor:pointer}
a.dl-btn{color:#FFFFFF}
.dl-btn-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border:1px solid #C5CDD6;border-radius:8px;background:#FFFFFF;color:#14202B;font:inherit;font-weight:600;cursor:pointer}
.dl-btn:disabled,.dl-btn-secondary:disabled{opacity:.6;cursor:default}
.dl-filecard{display:flex;gap:14px;align-items:center;border:1px solid #DDE2E8;border-radius:10px;padding:14px 16px}
.dl-filename{font-family:'IBM Plex Mono',monospace;font-weight:600;overflow-wrap:anywhere}
.dl-filemeta{font-size:13.5px;color:#4F5D6B}
.dl-hashrow{display:flex;gap:8px;align-items:stretch}
.dl-hash{flex:1;min-width:0;font-family:'IBM Plex Mono',monospace;font-size:13px;background:#F4F6F8;border:1px solid #DDE2E8;border-radius:8px;padding:10px 12px;overflow-wrap:anywhere}
.dl-error{color:#B42318;font-weight:500}
.dl-note{color:#1F7A4A;font-weight:500}
.dl-notice{margin:0;padding:20px 24px;color:#3A4756}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Screenshots: a.zoom wraps each one; js/site.js opens it large in a dialog at 1000px and wider. */
.zoom{display:block;color:inherit}
@media (min-width:1001px){.zoom{cursor:zoom-in}}
/* The dialog shrink-wraps the image (fit-content is a dialog's normal width; never set it to auto, which stretches
   it to its maximum). The image is sized against the viewport, and the caption lies over its bottom edge so neither
   can make the box wider or taller than the picture. */
.zoom-modal{width:fit-content;height:fit-content;max-width:calc(100vw - 48px);max-height:calc(100vh - 48px);padding:0;border:0;border-radius:12px;overflow:hidden;background:#101820;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.zoom-modal::backdrop{background:rgba(16,24,32,.7)}
.zoom-modal figure{position:relative;margin:0;line-height:0}
.zoom-modal img{display:block;max-width:min(1400px,calc(100vw - 48px));max-height:calc(100vh - 110px);width:auto;height:auto}
/* width:0 + min-width:100% keeps the caption from counting toward the dialog's width; it wraps inside the picture's. */
.zoom-modal figcaption{width:0;min-width:100%;padding:12px 56px 14px 16px;color:#B9C4D0;font-size:14px;line-height:1.5;background:#101820}
.zoom-close{position:absolute;top:8px;right:8px;width:40px;height:40px;border:0;border-radius:8px;background:rgba(16,24,32,.6);color:#FFFFFF;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.zoom-close:hover{background:rgba(16,24,32,.85)}
.zoom-close:focus-visible{outline:2px solid #FFFFFF;outline-offset:2px}