/* ============================================================
   FuelLog · RESPONSIVE
   Every @media in the kit, apart from the colour scheme switch
   in tokens.css and reduced motion in base.css. Always loads last.
   ============================================================ */

/* Hover only where a pointer can actually hover. On a phone a hover
   style sticks after the tap and reads as a stuck button. */
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--border2);}
  .btn-primary:hover{background:var(--amber-press);}
  .btn-ghost:hover{background:var(--bg3);}
  .btn-danger:hover{background:var(--no-wash);}
  .btn-icon:hover{background:var(--bg3);}
  .fab:hover{background:var(--amber-press);}
  .link:hover{text-decoration-color:currentColor;}
  .row:hover{background:var(--bg2);}
  .row-more:hover{background:var(--bg2);}
  .check-row:not(.is-off):hover{background:var(--bg2);}
  .field-area:hover:not(:focus-visible){border-color:var(--border2);}
  .bar-title:hover{opacity:.7;}
  .field-box:hover:not(:focus-within):not(.is-invalid):not(.is-warn){border-color:var(--border2);}
  .toast-action:hover{opacity:.8;}
}

/* A wide screen: the sheet becomes a dialog in the middle. */
@media (min-width:641px){
  .sheet{align-items:center;padding:var(--s-5);}
  .sheet-panel{border-radius:var(--r-lg);max-height:calc(100dvh - var(--s-8));padding-bottom:0;}
  .sheet-grabber{display:none;}
  .sheet-head{padding-top:var(--s-3);}
  .page-first{padding-top:var(--s-7);}
}