/* ============================================================
   FuelLog · BASE
   Reset, typography and the polish every screen gets for free.
   None of this needs a class. Ported from hdw-ui: same reset,
   same focus and reduced-motion handling, cut to what a phone
   fuel log actually uses.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

/* `hidden` always wins. A component with display:flex beats the
   browser's own [hidden]{display:none}, which is how a sheet ends
   up open on page load. Toggle visibility with el.hidden. */
[hidden]{display:none !important;}

html{
  height:100%;
  background:var(--canvas);
  color:var(--fg);
  -webkit-text-size-adjust:100%;
  overscroll-behavior-y:none;
  scroll-behavior:smooth;
}

body{
  min-height:100%;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:var(--lh);
  color:var(--fg);
  background:var(--canvas);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-variant-numeric:tabular-nums;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
}

::selection{background:var(--fg);color:var(--canvas);}
b,strong{font-weight:400;}

/* nothing pushes a 320px layout sideways: one long word or number
   breaks rather than dragging the whole screen with it */
body :where(div,p,span,li,dd,dt,blockquote,figcaption,label,summary,h1,h2,h3,h4,h5,h6){
  overflow-wrap:break-word;
}

h1,h2,h3,h4,h5,h6{font-weight:400;line-height:var(--lh-snug);text-wrap:balance;}
p{text-wrap:pretty;}
p + p{margin-top:var(--s-3);}

a{color:inherit;text-decoration:none;}

/* ---- TAP FEEDBACK ----
   Phones have no hover. The browser's own grey tap flash is
   killed so each component's own states can answer instead. */
a,button,[role="button"],label,summary,input,select,textarea{
  -webkit-tap-highlight-color:transparent;
}

button,input,select,textarea{font:inherit;color:inherit;}
button{background:none;border:none;cursor:pointer;}

/* ---- DISABLED ----
   One shared rule for every disabled control, native or aria. */
[disabled],[aria-disabled="true"]{opacity:.45;cursor:not-allowed;pointer-events:none;}

/* ---- FOCUS ----
   Mouse users never see a ring. Keyboard users always do.
   Removing this without replacing it locks people out. */
:focus{outline:none;}
:focus-visible{
  outline:var(--focus-w) solid var(--focus);
  outline-offset:var(--focus-offset);
  border-radius:inherit;
}

/* ---- REDUCED MOTION ----
   Not optional. Everything still works, it just arrives instead
   of moving. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}