/* Phone / tablet / touch adaptations layered over the base styles in index.html. */

html{-webkit-text-size-adjust:100%}
a,button{-webkit-tap-highlight-color:transparent}
#hero{min-height:100vh;min-height:100svh}

/* Custom cursor only for a real mouse, and only once it's running */
#cur,#cur-r,.trail-dot{visibility:hidden}
.has-cursor.cursor-live #cur,.has-cursor.cursor-live #cur-r,.has-cursor.cursor-live .trail-dot{visibility:visible}
.has-cursor.cursor-live body,.has-cursor.cursor-live a,.has-cursor.cursor-live button{cursor:none}

/* Touch: hover styles stick after a tap — neutralise them */
@media (hover:none){
  .proj:hover .proj-num{color:var(--faint)}
  .proj:hover .proj-arrow{color:var(--faint);transform:none}
  .ct-link:hover{color:var(--ink)}
  .ct-link:hover .ct-arr{color:var(--dim);transform:none}
  .btn-outline:hover{border-color:var(--ink);color:var(--ink)}
  .af-v a:hover{text-decoration:none}
}

/* Tablet / small laptop: make room for the centred tab picker */
@media (max-width:1180px){
  .n-id,.avail{display:none}
}

/* Phone: tab picker becomes a floating bottom bar */
@media (max-width:768px){
  .seg{
    --item-h:40px;
    top:auto;bottom:calc(12px + env(safe-area-inset-bottom));
    grid-auto-columns:minmax(0,1fr);
    width:min(calc(100vw - 24px),380px);
    background:color-mix(in srgb,var(--paper2) 82%,transparent);
    -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
    box-shadow:0 10px 30px rgba(0,0,0,.25);
  }
  .seg-item,.seg-thumb-row span{padding:0 4px;font-size:10px;letter-spacing:.1em}
  footer{padding-bottom:calc(16px + 76px + env(safe-area-inset-bottom))}
  nav{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
  .ct-link{min-height:56px}
  .af-v a{padding:6px 0;margin:-6px 0}
}

@media (max-width:360px){
  .seg-item,.seg-thumb-row span{font-size:9px;letter-spacing:.06em}
}