/* YOKE: one CMOS setup screen. Double-ruled frame, sticky menu bar, settings
   rows, F-key bar. Flat by design: no gradients, shadows or rounded corners,
   and nothing outside the palette below (taken from the Yoke briefing deck). */
@font-face{font-family:"Inconsolata";src:url(/assets/fonts/inconsolata-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inconsolata";src:url(/assets/fonts/inconsolata-700.woff2) format("woff2");font-weight:700;font-display:swap}
:root{
  --navy:#000080; --navy-deep:#00006a; --grey:#D6D6D6; --silver:#C0C0C0;
  --yellow:#FFFF55; --cyan:#55FFFF; --white:#FFFFFF;
  --mono:Consolas,"Inconsolata",ui-monospace,Menlo,monospace;
  --s1:.8125rem; --s2:1rem; --s3:1.25rem; --s4:1.75rem;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--navy);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--navy);color:var(--grey);font-family:var(--mono);font-size:var(--s2);line-height:1.55;
  padding:20px max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px))}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--grey)}
img{max-width:100%}
[hidden]{display:none!important}
a{color:inherit}
::selection{background:var(--yellow);color:var(--navy)}
:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
p{max-width:65ch}
.small{font-size:var(--s1)}
.skip{position:absolute;left:-9999px;top:0;background:var(--yellow);color:var(--navy);padding:.4rem .8rem;z-index:20}
.skip:focus{left:16px;top:16px}

.screen{max-width:1180px;margin:0 auto;border:4px double var(--grey);min-width:0}
.titlebar{display:block;text-align:center;padding:.5rem 1rem;letter-spacing:.06em;margin:0;max-width:none}

/* menu */
.menubar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--grey);color:var(--navy);display:flex;overflow-x:auto;scrollbar-width:none}
.menubar::-webkit-scrollbar{display:none}
.menubar a{padding:.25rem 1rem;text-decoration:none;white-space:nowrap;color:var(--navy)}
.menubar a:hover,.menubar a.on{background:var(--navy);color:var(--grey)}
.menubar a:focus-visible{outline-offset:-3px}

.crumb{color:var(--yellow);font-weight:700;padding:.35rem 1rem;border-bottom:1px solid var(--silver);font-size:var(--s3);margin:0}
section{border-bottom:4px double var(--grey);scroll-margin-top:2rem}
main>section:last-child{border-bottom:0}
.main{padding:2rem 1.25rem;min-width:0}
.note{font-size:var(--s1);opacity:.85;border-top:1px solid var(--silver);padding:.6rem 1.25rem;margin:0;max-width:none}
.statement{color:var(--yellow);font-size:var(--s4);line-height:1.2;margin:0 0 1.25rem;text-wrap:balance;font-weight:700}

/* hero */
#main .main{padding-block:2.5rem}
.logo{display:block;width:min(560px,100%);height:auto;aspect-ratio:1308/384;margin:.5rem 0 1.75rem}
.tag{color:var(--white);font-size:clamp(1.4rem,3.2vw,2.1rem);margin:0;font-weight:700}
.sub{color:var(--yellow);font-size:clamp(1.05rem,2vw,1.35rem);margin:.4rem 0 1.25rem}
/* the text-mode cursor: a thin underscore, as on the real thing */
.cursor{display:inline-block;width:.55em;height:max(2px,.12em);background:currentColor;vertical-align:-.1em;margin-left:.2em;animation:blink 1.06s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.cursor{animation:none}}
.keys{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.key{background:var(--grey);color:var(--navy);padding:.4rem .9rem;text-decoration:none;font:inherit;font-weight:700;border:0;cursor:pointer;display:inline-block}
.key:hover{background:var(--yellow)}
.key.alt{background:transparent;color:var(--cyan);outline:1px solid var(--cyan);outline-offset:-1px}
.key.alt:hover{background:var(--cyan);color:var(--navy)}
.key:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.key[disabled]{opacity:.55;cursor:progress}

.lead{font-size:var(--s3);color:var(--white);max-width:52ch;margin:0}
.lead+p{margin:1.25rem 0 0}

/* principle and ethos columns */
.pr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin:0}
.pr div{border-top:2px solid var(--yellow);padding-top:.6rem;min-width:0}
.pr dt{color:var(--white);letter-spacing:.08em;font-weight:700}
.pr .v{color:var(--yellow);font-size:var(--s1);display:block;margin:.15rem 0 .4rem}
.pr p{margin:0;font-size:var(--s1)}
.pr dd{margin:0}
.thesis{margin:1.75rem 0 0;color:var(--white);font-weight:700}

/* Item Help: the right-hand column of a setup page */
.pane{display:grid;grid-template-columns:minmax(0,1fr) 300px}
.ihelp{border-left:1px solid var(--silver);padding:1.25rem;min-width:0;font-size:var(--s1)}
.ihelp .ih-t{margin:0 0 .75rem;color:var(--grey);font-size:var(--s2);font-weight:700;border-bottom:1px solid var(--silver);padding-bottom:.4rem;text-align:center}
.ihelp .ih-s{margin:1.1rem 0 .3rem;color:var(--yellow);font-size:var(--s1);letter-spacing:.08em;text-transform:uppercase}
.ihelp p{margin:0}
.ihelp .touch{display:none}
@media (hover:none) and (pointer:coarse){.ihelp .kb{display:none}.ihelp .touch{display:block}}
.sys{margin:0;display:grid;gap:.3rem}
.sys div{display:flex;justify-content:space-between;gap:1rem}
.sys dd{margin:0;color:var(--yellow);font-variant-numeric:tabular-nums;white-space:nowrap}
.ih-v{color:var(--yellow)}
.item #ih-d{margin-top:.4rem;color:var(--white)}

/* setting rows: the selection bar follows the pointer, focus and arrow keys */
.rows{display:grid;gap:.15rem;margin:0;padding:0;list-style:none}
.row{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:1rem;padding:.3rem .6rem;min-width:0}
.row .k{padding-left:1rem;position:relative}
.row .v{color:var(--yellow)}
.row .v b{font-weight:400}
.row .v small{display:block;color:var(--grey);font-size:var(--s1)}
.rows.live .row{cursor:default}
.rows.live .row:focus-visible{outline:none}
/* With Item Help beside them, product rows are one line each and the help shows the detail. */
@media (min-width:901px){
  .rows.live .row.sel{background:var(--grey);color:var(--navy)}
  .rows.live .row.sel .v,.rows.live .row.sel .v small{color:var(--navy)}
  .rows.live .row.sel .k::before{content:">";position:absolute;left:0}
  #areas .v small{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  #areas{gap:.35rem}
  #areas .row{padding-block:.45rem}
}

/* exit dialog and enquiry form */
#exit .main{padding-block:2rem}
.dialog{max-width:720px;margin:0 auto;border:4px double var(--cyan);background:var(--navy-deep);padding:1.5rem}
.dialog .q{color:var(--white);font-size:var(--s3);font-weight:700;margin:0 auto 1.25rem;text-align:center;max-width:none}
.form{display:grid;gap:.15rem;margin:0}
.field{display:grid;grid-template-columns:minmax(0,9.5rem) minmax(0,1fr);gap:1rem;align-items:baseline;padding:.3rem .6rem;position:relative}
.field label{padding-left:1rem;position:relative}
.field label .opt{font-size:var(--s1);opacity:.75}
.field:focus-within{background:var(--grey);color:var(--navy)}
.field:focus-within label::before{content:">";position:absolute;left:0}
.field .in{display:flex;align-items:baseline;color:var(--yellow);min-width:0}
.field:focus-within .in{color:var(--navy)}
.field .in::before{content:"["}
.field .in::after{content:"]"}
.field.area .in::before,.field.area .in::after{align-self:flex-start}
.field input,.field textarea{flex:1;min-width:0;width:100%;background:transparent;border:0;border-radius:0;color:inherit;font:inherit;padding:0 .25rem;margin:0;outline:none;caret-color:currentColor}
.field textarea{resize:none;field-sizing:content;min-height:6.2em;max-height:24em;line-height:1.55;display:block}
.field input::placeholder,.field textarea::placeholder{color:inherit;opacity:.45}
.field .err{grid-column:2;font-size:var(--s1);color:var(--white)}
.field .err::before{content:"! "}
.field:focus-within .err{color:var(--navy)}
.field.bad .in{color:var(--white)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ts{min-height:0;margin:.5rem .6rem 0}
.ts:empty{margin:0}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:1.25rem}
.status{text-align:center;margin:1rem auto 0;min-height:1.55em;color:var(--cyan);font-size:var(--s1)}
.status.bad{color:var(--white)}
.done{text-align:center;padding:1rem 0}
.done .seq{display:inline-block;text-align:left;margin:0 auto 1.25rem;font:inherit;font-size:var(--s1);white-space:pre-wrap}
.done .seq .y{color:var(--yellow)}
#done:focus,#done-text:focus{outline:none}
.done .ok{color:var(--yellow);font-size:var(--s3);font-weight:700;margin:0 auto .5rem;max-width:none}
.done p{margin:0 auto}
.alt-mail{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1rem;align-items:center;margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--silver);font-size:var(--s1)}
.alt-mail a{color:var(--yellow);text-decoration:none;border-bottom:1px dotted var(--yellow)}
.alt-mail a:hover{background:var(--yellow);color:var(--navy)}
.privacy{text-align:center;font-size:var(--s1);opacity:.85;margin:1rem auto 0;max-width:60ch}
.privacy a,.legal a{color:var(--grey);text-decoration:underline dotted}
.privacy a:hover,.legal a:hover{color:var(--yellow)}
.legal a{margin-left:.75rem}

/* footer keys */
/* The F-key bar stays on screen, so the page always reads as one setup screen. */
.keybar{position:sticky;bottom:0;z-index:4;background:var(--navy);border-top:4px double var(--grey);display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;align-items:center;padding:.5rem 1rem calc(.5rem + env(safe-area-inset-bottom,0px));font-size:var(--s1);justify-content:space-between}
.keybar .kk{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem 1.25rem}
.keybar a,.keybar button{background:none;border:0;color:var(--grey);font:inherit;cursor:pointer;padding:0;text-decoration:underline dotted}
.keybar a:hover,.keybar button:hover{color:var(--yellow)}
.legal{max-width:1180px;margin:0 auto;padding:1rem 0 calc(1.25rem + env(safe-area-inset-bottom,0px));font-size:var(--s1);opacity:.8}

/* F1 general help */
.help{border:0;padding:0;background:transparent;color:inherit;width:min(520px,calc(100% - 32px));max-width:none}
.help::backdrop{background:transparent}
.help .box{border:4px double var(--grey);background:var(--navy)}
.help h2{font-size:var(--s2);color:var(--navy);background:var(--grey);margin:0;padding:.25rem 1rem;text-align:center}
.help dl{display:grid;grid-template-columns:max-content 1fr;gap:.35rem 1.25rem;margin:0;padding:1.25rem}
.help dt{color:var(--yellow)}
.help dd{margin:0}
.help .close{display:flex;justify-content:center;padding:0 1.25rem 1.25rem}

/* power-on self test: once per visit, any key or tap skips it */
.post{display:none;position:fixed;inset:0;z-index:40;background:var(--navy);color:var(--grey);padding:max(24px,env(safe-area-inset-top,0px)) 24px 24px;font-size:var(--s2);line-height:1.6;cursor:pointer}
.post pre{margin:0;font:inherit;white-space:pre-wrap;max-width:calc(100% - 96px)}
.post .mark{position:absolute;top:max(24px,env(safe-area-inset-top,0px));right:24px;width:clamp(52px,7vw,84px);height:auto}
.post .bid{position:absolute;left:24px;bottom:max(24px,env(safe-area-inset-bottom,0px));margin:0;font-size:var(--s1)}
.post .y{color:var(--yellow)}
.post .w{color:var(--white);font-weight:700}
/* If site.js never runs, the screen still clears itself. */
html[data-post] .post{display:block;animation:post-off 0s 4s forwards}
@keyframes post-off{to{visibility:hidden}}

@media (max-width:900px){
  .pr{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pane{grid-template-columns:minmax(0,1fr)}
  .ihelp{border-left:0;border-top:1px solid var(--silver)}
  .ihelp.item{display:none}
}
@media (max-width:620px){
  body{font-size:15px}
  /* All six tabs at once: two rows of three, nothing to scroll sideways. */
  .menubar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}
  .menubar a{text-align:center;padding:.3rem .25rem}
  section{scroll-margin-top:3.75rem}
  .keybar .kb,.keybar .ver{display:none}
  .keybar .kk{flex:1;justify-content:space-between}
  .ihelp .ih-s,.ihelp .kb,.ihelp .touch{display:none!important}
  .pr{grid-template-columns:minmax(0,1fr)}
  .row,.field{grid-template-columns:minmax(0,1fr);gap:0}
  .row .v{padding-left:1rem}
  .field .err{grid-column:1;padding-left:1rem}
  .dialog{padding:1.25rem .75rem}
  .main{padding-inline:1rem}
}

/* long-form rows (privacy) */
.rows.doc{margin-top:1.5rem;gap:.6rem}
.rows.doc .row{grid-template-columns:minmax(0,12rem) minmax(0,1fr)}
.rows.doc .v small{font-size:var(--s2);max-width:70ch;margin-top:.15rem}
.rows.doc a{color:var(--cyan)}
.rows.doc a:hover{background:var(--cyan);color:var(--navy)}
@media (max-width:620px){.rows.doc .row{grid-template-columns:minmax(0,1fr)}}
/* Touch screens have no F-keys: the bar keeps Top and a proper Talk to us key. */
@media (hover:none) and (pointer:coarse){
  .keybar #f1{display:none}
  .keybar .f10{background:transparent;color:var(--cyan);outline:1px solid var(--cyan);outline-offset:-1px;padding:.3rem .7rem;text-decoration:none;font-weight:700}
}