/* ---------- Site-wide navigation: one bar on every page, a learn bar for the exercises, a picker for pathways ---------- */

/* The bar */
.sitebar{display:flex; align-items:center; gap:6px 22px; padding:2px 0 8px; border-bottom:1.5px solid var(--line)}
.sitebar a.brand{font-weight:700; font-size:18px; letter-spacing:-.01em; color:var(--ink); text-decoration:none; white-space:nowrap}
.sitenav{display:flex; gap:4px; flex:1; min-width:0}
.sitebar .sitenav a{position:relative; padding:7px 14px; font-weight:600; font-size:15px; color:var(--muted); text-decoration:none; border-radius:8px; white-space:nowrap}
.sitebar .sitenav a:hover{color:var(--ink); background:var(--surface-2)}
.sitebar .sitenav a[aria-current="page"]{color:var(--ink)}
.sitenav a[aria-current="page"]::after{content:""; position:absolute; left:14px; right:14px; bottom:-9px; height:3px; border-radius:2px; background:var(--accent)}
.sitenav a:focus-visible,.brand:focus-visible,.seticon:focus-visible,.setrow:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.setwrap{position:relative}
.seticon{display:grid; place-items:center; width:38px; height:38px; padding:0; border:1.5px solid transparent; border-radius:10px; background:transparent; color:var(--muted); cursor:pointer}
.seticon:hover,.seticon[aria-expanded="true"]{color:var(--ink); border-color:var(--line-strong); background:var(--surface)}
.seticon svg{width:20px; height:20px}
.setpop,.menupop{position:absolute; right:0; top:calc(100% + 6px); z-index:40; min-width:230px; padding:6px; border:1.5px solid var(--line-strong); border-radius:12px; background:var(--surface); box-shadow:0 10px 30px rgba(0,0,0,.28)}
.setpop[hidden],.menupop[hidden]{display:none}
.setrow{display:flex; width:100%; align-items:center; justify-content:space-between; gap:14px; padding:9px 10px; border:0; border-radius:8px; background:transparent; color:var(--ink); font:inherit; font-size:14.5px; font-weight:500; cursor:pointer; text-align:left}
.setrow:hover{background:var(--surface-2)}
.setrow svg{width:16px; height:16px; flex:none}
#themeBtn.setrow{justify-content:flex-start; gap:10px}
.setrow .track{width:34px; height:20px; border-radius:10px; background:var(--line-strong); position:relative; flex:none; transition:background .15s}
.setrow .knob{position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:var(--surface); transition:left .15s}
.setrow[aria-checked="true"] .track{background:var(--accent)}
.setrow[aria-checked="true"] .knob{left:17px}
.pagehead{display:block}
.pagehead h1{font-size:clamp(20px,3vw,26px)}

/* The learn bar: the five exercises in order */
.learnbar{display:flex; gap:8px; flex-wrap:wrap}
.learnbar[hidden]{display:none}
.learnbar .stepbtn{font-size:14px}

/* The Pathways head: previous, the pathway you are on (opens the picker), next */
.stext:has(.pwanchor){flex:1 1 auto; min-width:0}
.pwanchor{position:relative}
.pwbar{display:flex; align-items:stretch; gap:6px}
.pwcur{display:flex; align-items:center; gap:10px; min-width:0; max-width:min(100%, 520px); padding:6px 14px; border:1.5px solid var(--line-strong); border-radius:10px; background:var(--surface); color:var(--ink); font:inherit; text-align:left; cursor:pointer}
.pwcur:hover,.pwcur[aria-expanded="true"]{border-color:var(--accent)}
.pwcur .pwt{font-size:19px; font-weight:700; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pwcur .pws{color:var(--muted); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pwcur{flex:0 1 auto; flex-wrap:nowrap}
.chev{width:12px; height:8px; flex:none; margin-left:2px; color:var(--muted)}
.btn .chev{margin-left:0}
.pwstep{width:38px; border:1.5px solid var(--line-strong); border-radius:10px; background:var(--surface); color:var(--ink); font-size:24px; line-height:1; cursor:pointer}
.pwstep:hover:not(:disabled){border-color:var(--accent)}
.pwstep:disabled{opacity:.35; cursor:default}
.pwcur:focus-visible,.pwstep:focus-visible,.pwitem:focus-visible,.pwq:focus-visible,.pwgrp > summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.pwlede{margin-top:6px}

/* The picker panel */
.pwpanel{position:absolute; left:0; top:calc(100% + 8px); z-index:40; width:min(560px, 92vw); max-height:min(72vh, 640px); display:flex; flex-direction:column; border:1.5px solid var(--line-strong); border-radius:14px; background:var(--surface); box-shadow:0 14px 40px rgba(0,0,0,.32)}
.pwpanel[hidden]{display:none}
.pwp-head{display:flex; gap:8px; padding:10px; border-bottom:1.5px solid var(--line)}
.pwq{flex:1; min-width:0; font:inherit; font-size:15px; padding:8px 12px; border:1.5px solid var(--line-strong); border-radius:8px; background:var(--bg); color:var(--ink)}
.pwp-x{padding:4px 12px; font-size:22px; line-height:1}
.pwp-body{overflow-y:auto; padding:6px 8px; overscroll-behavior:contain}
.pwgrp{border-bottom:1px solid var(--line)}
.pwgrp:last-child{border-bottom:0}
.pwgrp > summary{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 6px; font-weight:700; font-size:15px; cursor:pointer; list-style:none}
.pwgrp > summary::-webkit-details-marker{display:none}
.pwgrp > summary::before{content:"\25B8"; color:var(--muted); margin-right:8px; transition:transform .12s}
.pwgrp[open] > summary::before{transform:rotate(90deg)}
.pwgrp > summary span{flex:1}
.pwgrp > summary small{color:var(--muted); font-weight:500; font-size:13px}
.pwgrp h5{margin:8px 6px 2px; font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted)}
.pwitem{display:flex; align-items:center; gap:10px; width:100%; padding:7px 8px 7px 12px; border:0; border-radius:8px; background:transparent; color:var(--ink); font:inherit; font-size:14.5px; text-align:left; cursor:pointer}
.pwitem:hover{background:var(--surface-2)}
.pwitem.on{background:var(--accent); color:var(--on-accent); font-weight:600}
.pwrt{flex:1; min-width:0}
.pwitem small{color:var(--muted); font-size:12.5px; white-space:nowrap}
.pwitem.on small{color:inherit; opacity:.85}
.pwm{display:inline-grid; place-items:center; width:16px; flex:none; font-size:13px; font-weight:700; color:var(--muted)}
.pwm.done{color:var(--ok)}
.pwitem.on .pwm{color:inherit}
.pwp-foot{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 14px; border-top:1.5px solid var(--line); font-size:14px}
.pwclear{border:0; background:transparent; color:var(--muted); font:inherit; font-size:13.5px; text-decoration:underline; text-underline-offset:2px; cursor:pointer}
.pwclear:hover{color:var(--ink)}
.pwnone{margin:14px 8px; color:var(--muted)}

/* The Display menu */
.menuwrap{position:relative}
.menupop{min-width:250px}
.menuwrap .btn{gap:6px}

/* Fit mode: the bar replaces the old header on laptop-sized windows */
@media (min-width:1000px) and (min-height:600px){
  .sitebar{padding-bottom:6px}
  .sitenav a[aria-current="page"]::after{bottom:-7px}
  .learnbar .stepbtn{padding:4px 12px 4px 5px}
}

/* Phones: brand and settings on one line, the four places under them, the picker as a full-screen sheet */
@media (max-width: 700px){
  .sitebar{flex-wrap:wrap; gap:2px 8px; padding-bottom:0}
  .sitebar .brand{flex:1; font-size:17px}
  .sitenav{order:3; flex:0 0 100%; gap:0; margin-top:2px}
  .sitenav a{flex:1; text-align:center; padding:9px 4px; font-size:15px}
  .sitenav a[aria-current="page"]::after{left:8px; right:8px; bottom:0}
  .seticon{width:42px; height:42px}
  .setpop{right:0; min-width:min(260px, 86vw)}
  .learnbar{flex-wrap:nowrap; overflow-x:auto; width:100%; padding-bottom:2px; scrollbar-width:none}
  .learnbar .stepbtn{flex:none; padding:5px 8px 5px 5px}
  .learnbar .stepbtn:not([aria-current="step"]) .lbl{display:none}
  .pwcur{flex:1; padding:6px 10px}
  .pwcur .pwt{font-size:17px}
  .pwcur .pws{display:none}
  body.pwsheet{overflow:hidden}
  .pwpanel{position:fixed; inset:0; z-index:60; width:auto; max-height:none; border:0; border-radius:0; box-shadow:none; padding-top:env(safe-area-inset-top, 0px); padding-bottom:env(safe-area-inset-bottom, 0px)}
  .pwq{font-size:16px}
  .pwitem{padding:11px 10px}
  .pwgrp > summary{padding:13px 6px}
  .menupop{left:0; right:auto; min-width:min(260px, calc(100vw - 24px))}
  .setrow{padding:13px 12px}
}

/* the attempt log is for the quick exercises; a pathway has its own progress marks */
.step[data-step="4"] .times,.step[data-step="4"] .bestline{display:none}

/* the map and the document pages must not widen the page on a phone */
.maprow > *{min-width:0}
@media (max-width: 700px){
  body.origins .wrap{padding-left:12px; padding-right:12px}
}