/* ==========================================================================
   EZUI Foundations (ezui-foundations.css)

   The groundwork every EZUI page needs before any component: the font,
   shared tokens, and a couple of base rules. Load this FIRST, before
   ezui-button / ezui-field / anything else.

   Everything is local (EZUI rule: no CDNs, no outside requests).
   Keep this file next to its fonts/ folder so the relative url() below works:

     ezui-foundations.css
     fonts/InterVariable.woff2      (Inter 4.1, rsms/inter, one EZUI tweak:
                                     see "Password dots" below)
     fonts/Inter-LICENSE.txt        (SIL Open Font License 1.1)

   Recommended in the page <head>, before this stylesheet, so the font starts
   downloading straight away (the href must match the url() below exactly,
   with no ?v= tag, or the browser downloads it twice):

     <link rel="preload" href="/path/to/fonts/InterVariable.woff2"
           as="font" type="font/woff2" crossorigin>
   ========================================================================== */

/* ---- Font: Inter, one variable file with every weight (100-900) and every
   character, as ONE @font-face. Never split into per-language pieces or
   extra unicode-range faces: iOS draws hidden password dots as "missing
   character" boxes when they fall in a piece that hasn't loaded.

   Password dots: iOS hides passwords with a big circle (U+25CF), which
   Inter draws much larger than the small bullet (U+2022) used elsewhere.
   This copy of the file has ONE change from the official release: U+25CF
   uses Inter's bullet shape, so hidden passwords look the same on every
   device. Redo that change whenever Inter is updated (see
   EZY UI Foundations.md).
   ---- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/InterVariable.woff2") format("woff2");
}

/* ---- Shared tokens. The colours and the text sizes are not here: they
   are in ezui-colour.css and ezui-type.css, which every project gets
   alongside this file. ---- */
:root {
  --ezui-font: "Inter", system-ui, sans-serif;

  /* Press, for a touch screen. The timings are shared by every control.
     The scale is only for controls you push (see rule 8): a field uses
     its fill instead. There is no pressed colour: a pointer is already
     showing hover while the control is held down. */
  --ezui-press-in: .07s;
  --ezui-press-out: .3s;
  --ezui-press-scale: .96;

  --ezui-radius-s: 4px;
  --ezui-radius: 6px;
  --ezui-radius-m: 8px;
  --ezui-radius-pill: 9999px;
}

/* ---- Base rules ---- */
/* No grey tap-highlight box on touch screens when tapping anything. */
html { -webkit-tap-highlight-color: transparent; }

/* ---- Links ----
   A link in running text: the colour at rest, and that colour's darker
   text colour on hover, so a live link gets deeper rather than paler.
   Underlined, so it is not told apart from the text round it by colour
   alone. Opt in with the class; a bare <a> is left alone. */
.ezui-link {
  --ezui-link: var(--ezui-accent);
  --ezui-link-hover: var(--ezui-text-accent);
  color: var(--ezui-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--ezui-press-out);
}
.ezui-link[data-variant="destructive"] {
  --ezui-link: var(--ezui-destructive);
  --ezui-link-hover: var(--ezui-text-destructive);
}
@media (hover: hover) {
  .ezui-link:hover { color: var(--ezui-link-hover); transition-duration: var(--ezui-press-in); }
}
/* Touch: a link is text, not something you push, so it takes its hover
   colour instead of shrinking. */
@media (hover: none) {
  .ezui-link[data-ezui-pressed] { color: var(--ezui-link-hover); transition-duration: var(--ezui-press-in); }
}

/* ---- the blur iOS paints over the top of an installed app ----------------
   See the guide for what this is and how each line of it was established.
   In short: iOS 26 and 27 blur the top of a home screen web app, this is the
   only known cure, nobody knows why it works, and every part written here
   has been shown on the device to be necessary.

   Two that look redundant and are not: the wrapper, because as a direct
   child of the body this does nothing at all, and the z-index, because
   without it the blur comes back. The height is the one thing that does not
   matter; 11px is what the people who found it used.

   Outside an installed app none of it exists. */
.ezui-ios-blur-fix { display: none; }

@media (display-mode: standalone) {
  .ezui-ios-blur-fix { display: block; }
  .ezui-ios-blur-fix__strip {
    position: fixed;
    inset: 0 0 auto;
    height: 11px;
    z-index: 2147483647;
    pointer-events: none;
    background: var(--ezui-page);
    -webkit-background-clip: text;
    background-clip: text;
  }
}