/* Beta 0.2 additions on top of the skeleton's euler.css (verbatim). Server-rendered pages use links, not buttons. */
nav a{background:none;border:0;font:inherit;font-weight:600;color:var(--sub);padding:7px 11px;border-radius:6px;text-decoration:none}
nav a:hover{color:var(--text)}
nav a.on{color:var(--red)}
a.mark{text-decoration:none;color:inherit}
form.inline{display:inline;margin:0}
footer a{color:inherit}
.linklike{background:none;border:0;padding:0;font:inherit;color:var(--red);cursor:pointer;text-decoration:underline}
.field input[type=text],.field input[type=email],.field input[type=password],.field select{width:100%;font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px 12px;box-sizing:border-box}
a.btn{text-decoration:none;display:inline-block}
a.card.homecard{display:block;text-decoration:none;color:inherit}
a.card.homecard:hover h2{color:var(--red)}
footer .legallinks{padding-top:8px;font-size:.85rem;color:var(--sub)}
mark.ph{background:#fff3c4;color:#5a4600;padding:0 3px;border-radius:3px}
article.legal h1{margin-top:0}
article.legal h2{margin-top:28px}
article.legal p,article.legal li{line-height:1.55}
article.legal table.legal{width:100%;border-collapse:collapse;margin:12px 0;font-size:.92rem}
article.legal table.legal th,article.legal table.legal td{border:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
article.legal table.legal th{background:var(--card,#f7f6f3)}
article.legal blockquote{border-inline-start:3px solid var(--line);margin:12px 0;padding:4px 12px;color:var(--sub)}
.legal table.legal{display:block;overflow-x:auto}
/* Item 5: the Level 2–3 pools carry 4- and 5-row number pyramids (the skeleton had three rows); five bricks fit a 375 px screen only when smaller. */
@media (max-width:430px){.pyr{gap:4px}.pyr .r{gap:4px}.pyr b{width:54px;height:46px;font-size:1.3rem}}
/* Item 6: the header pills are links on the server-rendered pages; the Ask Leo pill is a <details> summary. */
a.eitick{text-decoration:none;display:inline-block}
a.eulos{text-decoration:none}
.emark.purse{height:1.25em;margin:-.15em 0}
.purse-card{display:flex;align-items:center;gap:.5em;flex-wrap:wrap;color:var(--gold);font-weight:700}
.purse-card .emark.purse{height:2.1em}
.purse-card .bal{font-size:1.5rem;line-height:1}
.purse-card .ln{font-weight:400;color:var(--sub);font-size:.85rem;flex-basis:100%}
details.leoask{display:block;margin-top:16px}
details.leoask summary{list-style:none;display:inline-flex;margin:0 auto;cursor:pointer}
details.leoask summary::-webkit-details-marker{display:none}
details.leoask[open] summary{margin-bottom:10px}
details.sol summary{list-style:none;cursor:pointer;display:inline-flex}
details.sol summary::-webkit-details-marker{display:none}
.probmini .stage{font-size:1.4rem}
.probmini .pyr b{width:44px;height:38px;font-size:1.1rem}
.leobtn[aria-disabled="true"]{opacity:.6;cursor:default}
.btabs a{font:inherit;font-weight:600;font-size:.85rem;border:1.5px solid var(--line);background:var(--card);color:var(--sub);border-radius:999px;padding:5px 12px;text-decoration:none}
.btabs a.on{border-color:var(--red);background:var(--tint);color:var(--text)}
.go form{display:contents}
@media (max-width:430px){.top .bar{row-gap:6px}.eitick .tb{font-size:.8rem}}

/* Item 7: each adventure report folds (newest open); the skeleton's .rphead row is the summary */
details.rp>summary.rphead{cursor:pointer;list-style:none}
details.rp>summary.rphead::-webkit-details-marker{display:none}
details.rp>summary.rphead::before{content:"▸";color:var(--sub);font-size:.8rem;margin-right:2px}
details.rp[open]>summary.rphead::before{content:"▾"}
.rprow form.inline{display:inline}

/* Item 9: classes the STELLA pages share with the Euler skeleton's CSS (the header chip, the "soon" tag, the per-level cells); stella.css is the STELLA skeleton verbatim and has none of them */
.whochip{font-size:.8rem;color:var(--sub);border:1px solid var(--line);border-radius:999px;padding:3px 10px;white-space:nowrap}
.hdrout{font:inherit;font-size:.8rem;cursor:pointer;padding:3px 10px;color:var(--red);border-color:var(--red)}
.tag.soon{background:var(--line);color:var(--sub)}
.lvlcells{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:8px 0}
.lvlcells div{border:1px solid var(--line);border-radius:8px;padding:6px 4px;text-align:center}
.lvlcells .lab{font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--sub)}
.lvlcells .n{font-family:var(--serif);font-size:1.25rem;font-weight:700}
.btn.small{padding:6px 12px;font-size:.85rem}
/* seven cells fit a 375 px screen only when tighter (Faculty record, honours, tutor profile) */
@media (max-width:430px){.lvlcells{gap:3px}.lvlcells div{padding:5px 1px}.lvlcells .lab{font-size:.56rem;letter-spacing:0}.lvlcells .n{font-size:1.05rem}}
/* the Orbit calendar's month grid and the STELLA nav on narrow screens */
nav a.on{color:var(--red)}
.probmini{max-width:100%;overflow-x:auto}
/* the tutor profile's header row wraps on a phone so the (coming) booking button never pushes past the edge */
@media (max-width:600px){.tprof{flex-wrap:wrap}.tprof>div:last-child{flex-basis:100%}}

/* item 11 accessibility: the adventure title is the page's one heading, at the skeleton's h2 size */
.advh1{margin:0;font-size:1.45rem;font-weight:700;line-height:1.25}
/* item 11 accessibility at 375 px: the Studio's view toggle is a pair of links (the skeleton styled buttons); problem art never wider than its column;
   footer links reach a 24 px tap height without moving the layout */
.vtog a{font:inherit;font-weight:600;border:0;background:var(--card);color:var(--sub);padding:5px 12px;display:inline-block;text-decoration:none}
.vtog a.on{background:var(--text);color:var(--bg)}
.probmini svg{max-width:100%;height:auto}
footer a{display:inline-block;padding:3px 0}
input[type=checkbox],input[type=radio]{min-width:18px;min-height:18px;accent-color:var(--red)}

/* Item 13 (UAT): the parent's "everything" tables scroll inside their card on a phone; the Faculty queue cells may shrink below their content */
.evwrap{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.evwrap:focus{outline:2px solid var(--red);outline-offset:2px}
.qcell{min-width:0}
/* UAT-14 (founder, 8 Oct): the i beside the Euler Index opens a plain-language explainer; a <details>, so it works without script */
details.eiinfo{position:relative;display:inline-block;vertical-align:middle;font-family:var(--sans);font-weight:400;line-height:1.45}
details.eiinfo>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:999px;border:1.5px solid var(--sub);color:var(--sub);font-family:var(--serif);font-style:italic;font-weight:700;font-size:.85rem;line-height:1;background:var(--card);user-select:none}
details.eiinfo>summary::-webkit-details-marker{display:none}
details.eiinfo>summary:hover,details.eiinfo[open]>summary{border-color:var(--red);color:var(--red);background:var(--tint)}
details.eiinfo>summary:focus-visible{outline:2px solid var(--red);outline-offset:2px}
details.eiinfo>.eib{position:absolute;left:0;top:calc(100% + 8px);z-index:40;width:min(360px,calc(100vw - 32px));background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:12px;padding:12px 14px;box-shadow:0 8px 24px rgba(0,0,0,.12);text-align:left;font-size:.85rem;white-space:normal;letter-spacing:0}
details.eiinfo>.eib .eibt{display:block;font-family:var(--serif);font-size:1rem;margin-bottom:6px;color:var(--text)}
details.eiinfo>.eib p{margin:0 0 8px}
details.eiinfo>.eib p:last-child{margin-bottom:0}
details.eiinfo.hdr>.eib{right:0;left:auto}
.boardhead details.eiinfo>summary{width:20px;height:20px;font-size:.75rem}

/* ARC-56: the honeypot field of the Contact and feedback forms — off-screen for people, present for form-fillers */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
/* ARC-56: the candidate's thumb on the finish screen */
.thumbs{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:12px}
.thumbs button{font-size:1.35rem;line-height:1;padding:8px 14px}

/* ARC-63: Stones — the header pill (S 138 beside the Ei and the Eulos), the cairn glyph, the cairns per Level, the care line */
.stones{font-weight:700;color:var(--sub);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:.9rem;white-space:nowrap;display:inline-flex;align-items:center;gap:.38em;text-decoration:none}
.stones:hover{border-color:var(--red);color:var(--red)}
.cairn{height:1em;width:auto;flex:none;display:block}
.cairnpill{display:inline-flex;align-items:center;gap:.35em;font-size:.9rem;font-weight:700;color:var(--sub);flex-wrap:wrap}
.cairns{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;font-size:.95rem}
.cairnrow{display:inline-flex;align-items:center;gap:.3em;white-space:nowrap}
.care{text-align:center;font-family:var(--serif);font-size:1.05rem;color:var(--text);background:var(--gold-tint);border-radius:10px;padding:10px 14px;margin:0 0 12px}
.go .practice{margin-left:8px}

/* ARC-65 (founder ruling 19 Oct on the ETH Zurich review): one door, one dashboard. The signed-out header carries Home · Levels · Sign in;
   Sign in is a native dialog (Escape closes, focus stays inside); signed in, a left sidebar carries the pages and under 720 px becomes a bottom tab bar. */
main{min-width:0}
.hero.landing{padding-block:28px 24px}
/* FBK-01 (2) amended (26 Oct 2026): the sub-line balanced as the headline is, so that no one-word last line ("2027.") falls at the common widths */
.hero.landing .lede{text-wrap:balance}
.landing-ctas{margin-top:18px;gap:12px}
.whatis{max-width:40em;padding-block:10px 20px}
.whochip .ini{display:inline-flex;align-items:center;justify-content:center;width:1.5em;height:1.5em;border-radius:50%;background:var(--red);color:var(--on-red);font-size:.75rem;margin-right:.45em;vertical-align:-.2em}
/* the sign-in card: one door, one form (ARC-65 defect, 20 Oct 2026; FBK-01 (3), 23 Oct 2026: the parent's and the player's doors are two pages) */
.sih{margin:0 0 10px;font-size:1.05rem}
.signin .field{margin-bottom:10px}
.sinew{margin:12px 0 0;border-top:1px solid var(--line);padding-top:10px}
.simodal{border:1px solid var(--line);border-radius:14px;padding:0;background:var(--card);color:var(--text);max-width:min(92vw,440px);width:100%;box-shadow:0 24px 60px rgba(0,0,0,.25)}
.simodal::backdrop{background:rgba(35,31,32,.55)}
.simbox{padding:18px 22px 22px}
.simhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.simhead h2{margin:0}
.simclose{font-size:1.1rem;line-height:1;cursor:pointer;padding:2px 10px}
/* the signed-in shell */
.wrap.shell{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;align-items:start}
.wrap.shell>main.wrap{max-width:none;margin:0;padding-inline:0;min-width:0}
.side{position:sticky;top:84px;display:flex;flex-direction:column;gap:12px;padding-top:34px}
.sidecard{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.sidecard b{font-family:var(--serif);font-size:1.05rem}
.sidecard.summit b{color:var(--red)}
.sidenav{display:flex;flex-direction:column;gap:2px;margin:0}
.sidenav a{font-weight:600;color:var(--sub);text-decoration:none;padding:9px 12px;border-radius:8px}
.sidenav a:hover{color:var(--text);background:var(--card)}
.sidenav a.on{color:var(--red);background:var(--tint)}
.tabbar{display:none}
.overview .upnext{margin:14px 0 18px}
/* ARC-65 defect 3 (20 Oct 2026): one navigation per width — the sidebar at 720 px and above, the tab bar below; the tab bar is
   `hidden` in the markup, so a browser holding an older copy of this file shows the sidebar alone, never both */
@media (max-width:719px){
  .wrap.shell{display:block}
  .side{display:none}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--card);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));gap:2px;margin:0}
  .tabbar a,.tabbar summary{flex:1;text-align:center;font-weight:600;font-size:.8rem;color:var(--sub);text-decoration:none;padding:8px 2px;border-radius:8px;cursor:pointer;list-style:none}
  .tabbar summary::-webkit-details-marker{display:none}
  .tabbar a.on{color:var(--red)}
  .tabbar details{flex:1;position:relative}
  .tabbar .morelist{position:absolute;bottom:100%;right:0;min-width:160px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:6px;display:flex;flex-direction:column;box-shadow:0 -8px 24px rgba(0,0,0,.15)}
  .tabbar .morelist a,.tabbar .morelist button{text-align:left;font:inherit;font-weight:600;color:var(--text);background:none;border:0;padding:9px 12px;text-decoration:none;cursor:pointer}
  body:has(.tabbar){padding-bottom:68px}
}

/* ARC-65 (4)–(5): the Overview tiles, Recent adventures, the Levels rows with the progress bar, the Profile's candidates list */
.tiles{margin:16px 0}
.tiles .stat{display:flex;flex-direction:column;gap:4px}
.tiles .stat .lab{min-height:0;gap:.4em;align-items:center}
.tiles .stat .big{display:flex;align-items:center;gap:.3em;flex-wrap:wrap;font-size:1.5rem}
.tiles .stat .big.gold{color:var(--gold)}
.tiles .stat .big.red{color:var(--red)}
.tiles .stat .big.lock{color:var(--lock)}
.tiles .stat .big .emark.purse{height:1.3em;margin:0}
.tiles .stat .big .cairn{height:1.1em}
.tiles .eiinfo,.tiles .stonesinfo{display:inline-block;margin:0}
.recent .row{display:flex;gap:12px;flex-wrap:wrap;align-items:baseline;padding:8px 0;border-top:1px solid var(--line);font-size:.95rem;color:inherit;text-decoration:none}
.recent a.row:hover b{color:var(--red)}
.candbar a{font:inherit;font-weight:700;border:1.5px solid var(--line);background:var(--card);color:var(--text);border-radius:999px;padding:6px 14px;display:inline-flex;gap:8px;align-items:center}
.candbar a.on{border-color:var(--red);background:var(--tint)}
.levelrows{gap:10px}
.lvl.current{border-color:var(--red);box-shadow:0 0 0 2px var(--tint)}
.lvl .prog{width:180px;max-width:100%;height:8px;background:var(--line);border-radius:4px;overflow:hidden}
.lvl .prog span{display:block;height:100%;background:var(--red)}
.lvl .lockword{font-size:.8rem;color:var(--sub);margin-left:auto;white-space:nowrap}
.candrows .crow{display:flex;gap:12px;flex-wrap:wrap;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.candrows .crow.on b{color:var(--red)}
.candrows .acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:720px){.lvl{flex-wrap:wrap}.lvl .go{margin-left:0;align-items:flex-start;flex-basis:100%}.lvl .lockword{margin-left:0;white-space:normal}.candrows .acts{margin-left:0;flex-basis:100%}}

/* ARC-67: the World Rankings table — one table, scrolls sideways on a phone; the "you" row in the gold tint as on the boards. */
.rankwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ranktable{width:100%;border-collapse:collapse;font-size:.88rem;font-variant-numeric:tabular-nums}
.ranktable th{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sub);text-align:left;padding:4px 8px;white-space:nowrap;font-weight:600}
.ranktable th a{color:inherit;text-decoration:underline;text-underline-offset:2px}.ranktable th b{color:var(--text)}
.ranktable td{padding:6px 8px;border-top:1px solid var(--line);white-space:nowrap;vertical-align:middle}
.ranktable .rk{width:2.6em;color:var(--sub)}.ranktable td.eidc{font-size:.82rem;color:var(--sub)}
.ranktable td.eulostrip{color:var(--gold);font-weight:700}.ranktable td.pe{font-weight:700}
.ranktable tr.you td{background:var(--gold-tint);font-weight:700}.ranktable tr.climbing td{color:var(--sub)}
.ranktable .up{color:var(--good);font-weight:700}.ranktable .down{color:var(--red);font-weight:700}
.ranktable .flag{font-size:1.05em;margin-right:2px}
.ranktable th details.eiinfo>summary{width:20px;height:20px;font-size:.75rem}
/* FBK-01 (2): the home page for a stranger — the championship's name above the headline, the How it works strip, the FAQ */
.champname{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red);font-weight:700;margin-bottom:10px}
.howit{padding-block:6px 18px}
.howstrip{list-style:none;margin:12px 0 18px;padding:0;display:grid;gap:12px}
@media(min-width:640px){.howstrip{grid-template-columns:repeat(3,1fr)}}
.howstrip li{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.howstrip li b{font-family:var(--serif);font-size:1.1rem;display:flex;align-items:center;gap:10px}
.howstrip .n{display:inline-flex;align-items:center;justify-content:center;width:1.7em;height:1.7em;border-radius:50%;background:var(--red);color:var(--on-red);font-family:var(--sans);font-size:.85rem;font-weight:700}
.faq{margin:0;max-width:44em;display:grid;gap:10px}
.faq dt{font-weight:700;margin:0}
.faq dd{margin:2px 0 0}
.disentis{margin:0 0 18px}.disentis img{display:block;width:100%;height:auto;border-radius:12px}
/* FBK-01 (3) (advisory board, founder ruling 23 Oct 2026): the registration path — one field style site-wide (the skeleton's 1.5 px
   box; app.css's earlier 1 px rule yields), the eye inside the box on every password and PIN field, the select with a visible arrow,
   the error at the field (red outline, the message right under the box) in the same place on every page, the named progress steps */
.field input[type=text],.field input[type=email],.field input[type=password],.field select,.field .pwrap input,.signin .pwrap input{width:100%;font:inherit;color:var(--text);background:var(--bg);border:1.5px solid var(--line);border-radius:8px;padding:10px 12px;box-sizing:border-box}
.field .pwrap,.signin .pwrap{display:block;width:100%}
.pwrap input{padding-right:44px}
.field select{-webkit-appearance:none;appearance:none;padding-right:40px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23231f20' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;cursor:pointer}
.field.err input,.field.err select,.field.err .pwrap input{border-color:var(--red);box-shadow:0 0 0 2px var(--tint)}
.ferr{display:block;color:var(--red);font-size:.85rem;font-weight:600;margin-top:6px}
.fieldnote{margin:6px 0 0;font-size:.82rem;color:var(--sub);line-height:1.4}
.fieldnote a{color:inherit}
.tickrow.err{border-color:var(--red);background:var(--tint)}
.tickrow .ferr{flex-basis:100%;margin-top:0}
ol.steps.named{list-style:none;padding:0;margin:18px 0 22px;gap:8px}
.steps.named li{flex:1;min-width:88px;display:flex;flex-direction:column;gap:5px}
.steps.named .bar{display:block;height:5px;border-radius:3px;background:var(--line)}
.steps.named li.done .bar,.steps.named li.now .bar{background:var(--red)}
.steps.named .stepname{font-size:.72rem;font-weight:600;color:var(--sub);letter-spacing:.02em}
.steps.named li.now .stepname{color:var(--red)}
.signin .ferr{margin-top:6px}
.sinew.siother{border-top:0;padding-top:0;margin-top:14px}
/* FBK-02 Levels (advisory board, 23 Oct 2026): the red ? as elsewhere (39); locked rows darker but visibly locked — a padlock, not a fade (40); the For parents and teachers drop-down (41) */
.lvl .q{color:var(--red);font-weight:700}
.lvl.locked{opacity:.82}
.lvl.locked .art{opacity:.45}
.lvl.locked h3,.lvl.locked .n{color:var(--sub)}
.lvl .lockword{display:inline-flex;align-items:center;gap:6px}
.lvl .lock{flex:none}
.forparents{margin-top:14px;padding:14px 18px}
.forparents summary{cursor:pointer;font-size:.95rem}
.forparents summary::marker{color:var(--red)}
.forparents .fpl{margin:6px 0 0;padding-left:1.2em;display:grid;gap:10px}
.forparents .fpl li div{margin-top:2px;line-height:1.45}
/* FBK-02 Insights (advisory board, 23 Oct 2026): larger, darker stat labels (52) on every stat tile; Applied set apart as a skill measure (46); the Example tag (47) */
.stat .lab{font-size:.9rem;letter-spacing:.06em;color:var(--text);font-weight:600}
.bars .row.applied{margin-top:6px;padding-top:10px;border-top:1px dashed var(--line)}
.tag.exTag{vertical-align:middle;margin-right:4px}
/* FBK-02 Profile (advisory board, 23 Oct 2026): the parent area and the child area named (54); one active-menu style on every page — header, sidebar and tab bar alike (59) */
.arealabel{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sub);font-weight:700;margin:20px 0 -8px}
.card .arealabel{margin:0 0 6px}
nav a.on,.sidenav a.on,.tabbar a.on{color:var(--red);background:var(--tint);font-weight:600;border-radius:6px}
/* FBK-02 Faculty (advisory board, 23 Oct 2026): the safeguarding text in the body size, above the form (70); the submission stages on the private log (69) */
.safeguarding{font-size:1rem;line-height:1.5;margin:0 0 14px;padding:12px 14px;border-left:3px solid var(--red);background:var(--tint);border-radius:0 8px 8px 0}
.stages{display:flex;flex-wrap:wrap;gap:4px 0;margin:0 0 4px;padding:0;list-style:none;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--sub)}
.stages li{display:inline-flex;align-items:center}
.stages li+li::before{content:"→";margin:0 6px;color:var(--line)}
.stages li.done{color:var(--good)}
.stages li.now{color:var(--text);font-weight:700}
.stages li.stop{color:var(--red);font-weight:700}
/* ARC-65 defect 3 (24 Oct 2026): the staff /debug page's key–value lists */
.kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 16px;margin:8px 0}.kv dt{color:var(--sub)}.kv dd{margin:0;overflow-wrap:anywhere}
@media(max-width:600px){.kv{grid-template-columns:1fr}.kv dd{margin-bottom:6px}}
:root{--build-app:"2daac0a399a9611f22c34ed56d43baaa5662345c"}