/* HEARIM article house style: phone / tablet / laptop. Injected after Quarto CSS. */

/* ---- all devices ---- */
main img:not(.hs-skip){max-width:100%;height:auto}
.hz-zoomable{cursor:zoom-in}
main figure,main .quarto-figure{margin-left:0;margin-right:0}
main table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
  background:linear-gradient(to right,#f6f5f0 30%,rgba(246,245,240,0)),linear-gradient(to left,#f6f5f0 30%,rgba(246,245,240,0)) 100% 0,
  radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.18),transparent),radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.18),transparent) 100% 0;
  background-repeat:no-repeat;background-size:40px 100%,40px 100%,12px 100%,12px 100%;background-attachment:local,local,scroll,scroll}
main mjx-container[display="true"],main .katex-display{overflow-x:auto;overflow-y:hidden;max-width:100%}
main pre{overflow-x:auto;white-space:pre}
main p,main li{overflow-wrap:break-word}

/* ---- phone (≤ 600px) ---- */
@media (max-width:600px){
  main{padding-left:0;padding-right:0;overflow-x:clip}
  main p,main li{font-size:17px;line-height:1.7}
  main h1.title{font-size:1.6rem;line-height:1.3}
  main h2{font-size:1.3rem;margin-top:2.2rem}
  main h3{font-size:1.1rem}
  main figure img,main .quarto-figure img,main img.hz-zoomable{width:100%}
  main figcaption,main .figure-caption{font-size:.92rem;line-height:1.55}
  main table{font-size:.9rem}
  main table td,main table th{min-width:6.5em;padding:.4rem .5rem}
  main table td:first-child,main table th:first-child{min-width:4em}
  #hi18n{transform:scale(.8);transform-origin:top right;opacity:.9}
}

/* ---- tablet (601–1024px) ---- */
@media (min-width:601px) and (max-width:1024px){
  main p,main li{font-size:17.5px;line-height:1.7}
  main figure img,main .quarto-figure img{max-width:100%}
  main table{font-size:.95rem}
}

/* ---- laptop / monitor (≥ 1025px) ---- */
@media (min-width:1025px){
  main p,main li{font-size:17px;line-height:1.65;max-width:72ch}
  main figure img,main .quarto-figure img{max-width:min(100%,900px)}
}

/* touch devices: bigger tap targets */
@media (hover:none) and (pointer:coarse){
  main a{padding:.1em 0}
  #TOC a,nav a{display:inline-block;padding:.25em 0}
}

/* ---- zoom viewer ---- */
.hz-ov{position:fixed;inset:0;z-index:99999;background:rgba(15,15,15,.94);display:flex;flex-direction:column;touch-action:none;animation:hzIn .15s ease-out}
.hz-stage{flex:1;overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:zoom-in}
.hz-stage.zoomed{cursor:grab}
.hz-stage img{max-width:96vw;max-height:calc(100vh - 110px);background:#fff;border-radius:4px;transform-origin:0 0;will-change:transform;user-select:none;-webkit-user-drag:none}
.hz-bar{display:flex;align-items:center;gap:.75rem;padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom));color:#ddd;font-size:.85rem}
.hz-cap{flex:1;max-height:3.2em;overflow:auto;line-height:1.5}
.hz-btn{border:1px solid #666;background:#222;color:#fff;border-radius:999px;min-width:44px;height:44px;font-size:1.1rem;cursor:pointer}
.hz-hint{position:absolute;top:.8rem;left:50%;transform:translateX(-50%);color:#bbb;font-size:.8rem;pointer-events:none}
@keyframes hzIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.hz-ov{animation:none}}
@media print{.hz-ov,#hearim-stats{display:none!important}main table{display:table}}