/* ==========================================================================
   MOBILE.CSS — touch, small-screen, and cross-device refinements.
   Loaded after pages.css. Adds what a desktop-first build always misses:
   safe-area insets, real touch targets, pressed-state feedback to replace
   :hover, and a few small-screen breakpoints the base system doesn't cover.
   ========================================================================== */

/* ---- Safe-area support (notches / gesture bars / rounded corners) ------ */
.chrome{
  padding-inline-start:max(16px, env(safe-area-inset-left));
  padding-inline-end:max(16px, env(safe-area-inset-right));
}
.navbar__inner{
  padding-inline-start:max(var(--gutter), calc(env(safe-area-inset-left) + 8px));
  padding-inline-end:max(var(--gutter), calc(env(safe-area-inset-right) + 8px));
}
.statusbar{
  padding-inline-start:max(14px, env(safe-area-inset-left));
  padding-inline-end:max(14px, env(safe-area-inset-right));
  padding-bottom:env(safe-area-inset-bottom);
  height:calc(var(--statusbar-h) + env(safe-area-inset-bottom));
}
body{
  padding-bottom:calc(var(--statusbar-h) + 8px + env(safe-area-inset-bottom));
}

/* ---- Kill the default grey tap flash; we supply our own pressed state -- */
a,button,.card,[data-tilt],.tag,.btn,.filter-chip,.tool-chip{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

/* ---- Real touch targets + explicit pressed state (hover doesn't exist
        on a touchscreen, so tilt.js/​:hover effects need a substitute) ---- */
@media (hover:none) and (pointer:coarse){
  .navlist a,.navdrawer .navlist a{min-height:44px;}
  .btn{min-height:46px;}
  .navtoggle{min-width:44px;min-height:44px;align-items:center;justify-content:center;}
  .filter-chip,.tool-chip{min-height:38px;}
  .masonry-item{cursor:pointer;}
}

.is-pressed{transition:transform .12s var(--ease), opacity .12s var(--ease), background .12s var(--ease) !important;}
.btn.is-pressed{transform:scale(.96);}
.card.is-pressed,[data-tilt].is-pressed,.masonry-item.is-pressed{transform:scale(.97) !important;border-color:var(--line);}
.filter-chip.is-pressed,.tool-chip.is-pressed,.tag.is-pressed{opacity:.68;}
.navlist a.is-pressed{background:var(--ink-800);color:var(--text-hi);}

/* ---- Filter chips become a horizontal swipe row on phones -------------- */
@media (max-width:640px){
  .filter-row{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter);
    padding-bottom:4px;
  }
  .filter-row::-webkit-scrollbar{display:none;}
  .filter-row .filter-chip{flex:0 0 auto;scroll-snap-align:start;}
}

/* ---- Small phones (<=380px, iPhone SE / small Android) ----------------- */
@media (max-width:380px){
  h1{font-size:clamp(1.9rem,9.5vw,2.5rem);}
  h2{font-size:clamp(1.4rem,7.5vw,1.9rem);}
  .lead{font-size:var(--fs-16);}
  .chrome{height:32px;}
  .chrome__path{font-size:.625rem;}
  .navbar{top:32px;}
  .navdrawer{top:calc(32px + var(--navbar-h));}
  .card{padding:18px;}
  .btn{padding:12px 18px;font-size:var(--fs-12);}
}

/* ---- Short / landscape phones: reclaim vertical space from the chrome
        bar since it's decorative, not functional ------------------------- */
@media (max-height:440px) and (orientation:landscape){
  .chrome{display:none;}
  .navbar{top:0;}
  body{padding-top:var(--navbar-h);}
  .navdrawer{top:var(--navbar-h);max-height:80vh;overflow-y:auto;}
}

/* ---- Gallery masonry: tighter columns on narrow phones ------------------ */
@media (max-width:420px){
  .masonry{columns:2 130px;column-gap:8px;}
  .masonry-item{margin-bottom:8px;}
}

/* ---- Tighter section rhythm on mobile so content reaches the fold faster*/
@media (max-width:600px){
  .section{padding-block:clamp(40px,10vw,64px);}
  .term__body{font-size:var(--fs-12);}
}

/* ---- Floating scroll-to-top button (markup injected by touch.js) ------- */
.scrolltop{
  position:fixed;
  right:16px;
  bottom:calc(var(--statusbar-h) + 16px + env(safe-area-inset-bottom));
  width:44px;height:44px;
  border-radius:50%;
  background:var(--amber);
  color:var(--on-accent);
  font-family:var(--font-mono);
  font-size:var(--fs-18);
  line-height:1;
  display:flex;align-items:center;justify-content:center;
  border:none;
  box-shadow:0 12px 26px -8px rgba(0,0,0,.55);
  z-index:58;
  opacity:0;
  transform:translateY(14px) scale(.85);
  pointer-events:none;
  transition:opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease), background var(--dur-fast) var(--ease);
}
.scrolltop.is-visible{opacity:1;transform:none;pointer-events:auto;}
.scrolltop:active{background:var(--amber-hi);transform:scale(.9);}
@media (min-width:900px){
  .scrolltop:hover{background:var(--amber-hi);}
}
@media (prefers-reduced-motion: reduce){
  .scrolltop{transition:opacity .01ms;}
}

/* ---- Lightbox: let the frame be swipe-down-to-close without the image
        or text getting selected/dragged mid-gesture ------------------------ */
[data-lightbox-frame]{
  touch-action:pan-y;
  user-select:none;
}
[data-lightbox-frame] img{-webkit-user-drag:none;}

/* ---- iOS auto-zooms any input with font-size under 16px on focus ------- */
@media (max-width:900px){
  input,textarea,select{font-size:max(var(--fs-16),16px);}
}