/* The public site in other scripts (docs/LANGUAGE.md). The page sets --script to its language's Noto font. */
html:not([data-script="Latn"]){--sans:var(--script),"Jost",system-ui,sans-serif;--display:var(--script),"Marcellus",Georgia,serif;--mono:var(--script),"JetBrains Mono",ui-monospace,monospace;--body:var(--script),"Archivo",system-ui,sans-serif;--m-font:var(--script),"Archivo",system-ui,sans-serif;--m-display:var(--script),"Marcellus",serif}
/* Letter-spacing and capitals are Latin conventions: they break joined scripts and mean nothing in others. */
html:not([data-script="Latn"]) *{letter-spacing:normal!important;text-transform:none!important}
html:not([data-script="Latn"]) body{line-height:1.8}
html:not([data-script="Latn"]) :is(h1,h2,h3){line-height:1.3;overflow-wrap:break-word}
html[data-script="Arab"] body{line-height:2.1}
html[data-script="Arab"] :is(h1,h2,h3){line-height:1.6}
/* Right to left: arrows point the way she reads. */
[dir="rtl"] i[aria-hidden="true"]{display:inline-block;transform:scaleX(-1)}
[dir="rtl"] .tx-dialog .tx-x{right:auto;left:14px}
[dir="rtl"] .tx-dialog h2{padding-right:0;padding-left:30px}
/* Numbers, codes and email addresses stay left to right inside right-to-left text. */
[dir="rtl"] :is(input[type="email"],input[inputmode="numeric"],.tx-code){direction:ltr;text-align:left}

.tx-lang{display:inline-flex;align-items:center}
.tx-lang select{font:inherit;font-size:14px;color:inherit;background:transparent;border:1px solid currentColor;border-radius:999px;padding:6px 28px 6px 12px;max-width:11em;opacity:.8;cursor:pointer;min-height:36px}
[dir="rtl"] .tx-lang select{padding:6px 12px 6px 28px}
.tx-lang select:focus-visible{outline:1.5px solid currentColor;outline-offset:3px;opacity:1}
.tx-lang option{color:#15100C;background:#EFE7DB}
.tx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tx-langs{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:14px;font-size:14px}
.tx-langs a{text-decoration:none;opacity:.75}
.tx-langs a[aria-current]{opacity:1;text-decoration:underline}
.tx-suggest{position:sticky;top:0;z-index:50;display:flex;justify-content:center;align-items:center;gap:12px;padding:10px 16px;background:#D9B98D;color:#15100C;font-size:16px}
.tx-suggest a{color:inherit;font-weight:500}
.tx-suggest button{border:0;background:transparent;color:inherit;font-size:22px;line-height:1;cursor:pointer;min-width:44px;min-height:44px}
/* Below desktop the header picker is a globe: the select is still there (and still says which language), its
   name just isn't spelled out in a header that longer scripts already fill. The footer lists every language by name. */
@media (max-width:1100px){
nav .tx-lang{position:relative}
nav .tx-lang::before{content:"";position:absolute;inset:0;margin:auto;width:20px;height:20px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z'/%3E%3C/svg%3E") center/contain no-repeat;pointer-events:none;opacity:.85}
nav .tx-lang select,[dir="rtl"] nav .tx-lang select{width:40px;max-width:40px;height:40px;min-height:40px;padding:0;border-radius:50%;color:transparent;background:transparent;appearance:none;-webkit-appearance:none}
}
/* Long words in long scripts wrap rather than push the page sideways. */
html:not([data-script="Latn"]) :is(h1,h2,h3,h4,p,li,dt,dd,a,button,label,b,strong,span,td,th){overflow-wrap:anywhere}
html:not([data-script="Latn"]) :is(.eyebrow,.tag){white-space:normal}
/* The header on a phone: logo, globe and one action. "Sign in" is inside the sign-up dialog ("Already signed up?"),
   so it leaves the header while "Sign up" is showing; signed in, the one link is "My record". */
@media (max-width:560px){
header nav a[data-auth="signin"]:has(~ a[data-auth="signup"]:not([hidden])){display:none}
header > :first-child{flex-shrink:1;min-width:0}
header > :first-child img{max-width:100%}
header nav{min-width:0}
header nav a{white-space:normal;text-align:center;line-height:1.2}
}
/* Longer scripts: the header links wrap onto a second line rather than run off the edge. */
html:not([data-script="Latn"]) header nav{flex-wrap:wrap;justify-content:flex-end;row-gap:6px;min-width:0}