/* Shared layer for every lesson page on the site, linked by bundle.py after the page's own styles.
   It adds the way home, the Sections menu that replaces the chip row on phones, phone-sized tap targets,
   display maths that fits the screen, and a formula sheet you can zoom. Uses the page's own tokens. */

/* way home + links to the other lessons */
.bar .home{display:inline-flex;align-items:center;gap:7px;font:650 .82rem var(--display);color:var(--ink);text-decoration:none;white-space:nowrap;padding:4px 2px;flex:none}
.bar .home img{width:22px;height:22px;border-radius:6px;display:block}
.bar .home:hover{color:var(--accent)}
.lnav{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}

/* Sections menu: hidden on wide screens, where the chip row has room */
.secbtn{display:none;align-items:center;gap:6px;min-width:0;max-width:13rem;border:1px solid var(--rule);background:var(--card);color:var(--ink);border-radius:9px;padding:6px 10px;font:600 .82rem var(--display);cursor:pointer}
.secbtn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.secbtn svg{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;transition:transform .15s}
.secbtn[aria-expanded="true"]{border-color:var(--accent);color:var(--accent)}
.secbtn[aria-expanded="true"] svg{transform:rotate(180deg)}
.secmenu{position:absolute;left:0;right:0;top:100%;z-index:30;background:var(--paper);border-bottom:1px solid var(--rule);box-shadow:0 18px 30px -12px rgba(8,14,24,.28);max-height:min(70vh,calc(100dvh - 70px));overflow:auto;overscroll-behavior:contain;padding:4px 16px 12px}
.secmenu[hidden]{display:none}
.secmenu ol{list-style:none;margin:0 auto;padding:0;max-width:44rem;counter-reset:s}
.secmenu li{border-bottom:1px solid var(--rule)}
.secmenu li:last-child{border-bottom:0}
.secmenu a{display:flex;gap:12px;align-items:baseline;padding:13px 2px;color:var(--ink);text-decoration:none;font:600 1rem/1.3 var(--display)}
.secmenu a::before{counter-increment:s;content:counter(s,decimal-leading-zero);font:500 .78rem var(--mono);color:var(--muted);min-width:1.6rem}
.secmenu a[aria-current="true"]{color:var(--accent)}
.secmenu a[aria-current="true"]::before{color:var(--accent)}

.chips a.on{border-color:var(--accent);color:var(--accent)}

@media (max-width:760px){
  .bar-in{gap:10px}
  .bar-in>.chips{display:none}
  .secbtn{display:inline-flex}
}
@media (max-width:380px){
  .bar .home .t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* display maths: site.js shrinks wide equations to fit; very wide ones scroll, with an edge fade as the hint */
mjx-container[display="true"]{max-width:100%}
mjx-container.mj-scroll{overflow-x:auto!important;overflow-y:hidden;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);padding-bottom:4px}
mjx-container.mj-scroll.mj-end{-webkit-mask-image:none;mask-image:none}
mjx-container.mj-scroll:not([display]){display:inline-block;max-width:100%;vertical-align:middle}

/* formula sheet: tap a page to zoom it, then pan; the PDF opens in the phone's own viewer */
.fs-box img{cursor:zoom-in}
.fsheet.z{justify-content:flex-start}
.fsheet.z .fs-box{flex:none;max-width:none;width:220%}
.fsheet.z .fs-box img{cursor:zoom-out}
.fsheet.z .fs-h{left:0;width:calc(100vw - 44px)}
.fs-tools{display:flex;gap:8px;align-items:center;flex:none}
.fs-tools a.btn{text-decoration:none;display:inline-flex;align-items:center}
.fs-hint{font:500 .8rem var(--display);color:var(--muted);margin:8px 4px 0}
@media (min-width:900px){.fs-hint{display:none}}

/* finger-sized targets on touch screens */
@media (pointer:coarse){
  button.btn,.secbtn{min-height:40px}
  button.btn.sm{min-height:38px}
  a.btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px}
  .bar .home{min-height:40px}
  .chips a{padding:9px 12px}
  .presets .btn{min-height:38px}
  .lm-here{padding:9px 8px;margin-left:2px}
  summary{padding-block:9px}
  .lm-b{width:44px;height:44px}
  .lm-s{min-height:36px;min-width:44px}
  input[type=range]{min-height:30px}
}

/* lecture-mode player: let the title shrink (the grid would otherwise size the row to its widest content) */
.lm-in{grid-template-columns:minmax(0,1fr)}
.lm-in>*{min-width:0}

/* phones: keep the lecture-mode player compact */
@media (max-width:520px){
  .lm{padding-inline:10px}
  .lm-row{gap:6px}
}