/* Site-wide styles for Easy Tracking Calories: fonts (self-hosted) and the shared tokens. App rules are in app/app.css. */
@font-face{font-family:"Bricolage Grotesque";font-weight:500;font-display:swap;src:url(assets/fonts/bricolage-grotesque-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-weight:700;font-display:swap;src:url(assets/fonts/bricolage-grotesque-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-weight:400;font-display:swap;src:url(assets/fonts/source-sans-3-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-weight:600;font-display:swap;src:url(assets/fonts/source-sans-3-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:swap;src:url(assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}

/* BEGIN shared:tokens — generated from shared/web/tokens.css by tools/sync_shared_web.py; do not edit here */
/* Shared design tokens — one source for ETT, ETG and ESS (see tools/sync_shared_web.py).
   Edit THIS file, then run `python3 tools/sync_shared_web.py`; never edit the
   copies between the BEGIN/END markers in each site's styles.css.

   Sites keep their own extras AFTER the markers (ETG's accent pair, the hero
   band, --radius). The accent here is the ETT/ESS red: #DA070E on paper,
   #E02C32 on ink, sampled from the app icon so white text on it and the red as
   text both clear 4.5:1 against its own ground. */

:root {
  color-scheme: dark;

  --ground: #0b0b0c;
  --surface: #141416;
  --surface-2: #1e1e21;
  --rim: #2e2e33;

  --ink: #f5f2ec;
  --ink-soft: #afaaa2;
  --ink-faint: #837d75;

  --accent: #e02c32;
  --accent-ink: #ffffff;
  --accent-wash: rgba(224, 44, 50, 0.16);
  --good: #5fc793;

  --display: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --measure: 62ch;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --ground: #faf8f5;
    --surface: #ffffff;
    --surface-2: #f0ede7;
    --rim: #dfd9cf;
    --ink: #14120f;
    --ink-soft: #55504a;
    --ink-faint: #7a746c;
    --accent: #da070e;
    --accent-ink: #ffffff;
    --accent-wash: rgba(218, 7, 14, 0.1);
    --good: #1c7a51;
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --ground: #faf8f5;
  --surface: #ffffff;
  --surface-2: #f0ede7;
  --rim: #dfd9cf;
  --ink: #14120f;
  --ink-soft: #55504a;
  --ink-faint: #7a746c;
  --accent: #da070e;
  --accent-ink: #ffffff;
  --accent-wash: rgba(218, 7, 14, 0.1);
  --good: #1c7a51;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0b0b0c;
  --surface: #141416;
  --surface-2: #1e1e21;
  --rim: #2e2e33;
  --ink: #f5f2ec;
  --ink-soft: #afaaa2;
  --ink-faint: #837d75;
  --accent: #e02c32;
  --accent-ink: #ffffff;
  --accent-wash: rgba(224, 44, 50, 0.16);
  --good: #5fc793;
}

/* Appearance: System / Light / Dark (shared/web/i18n.js fills every <div data-setting="appearance">). .appearance-row is the
   card the library apps put it in: the label on the left, the choice on the right. */
[data-setting="appearance"] { display: flex; gap: 2px; padding: 3px; min-width: 190px; background: var(--surface-2); border-radius: 999px; }
[data-setting="appearance"] button {
  flex: 1; margin: 0; padding: 6px 10px; border: 0; border-radius: 999px; background: transparent; box-shadow: none;
  font-family: inherit; font-size: .8125rem; font-weight: 600; line-height: 1.3; color: var(--ink-soft); white-space: nowrap; cursor: pointer;
}
[data-setting="appearance"] button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.appearance-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }

/* The Settings header: the login chip on the left, the three flags on the right (shared/web/i18n.js builds the chip). */
.set-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 10px; }
.chip-login { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: .85rem; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--rim); background: var(--surface-2); color: var(--ink-soft); cursor: pointer; }
.chip-login.on { color: var(--good, #2e9a78); border-color: var(--good, #2e9a78); }
.chip-login .chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); }
.chip-login.on .chip-dot { background: var(--good, #2e9a78); }

/* The eye at the end of every password field (shared/web/i18n.js adds it). The app's own input styles stay; only room
   for the eye is made on the right. */
.pw-wrap { position: relative; display: block; }
.pw-wrap > input { width: 100%; box-sizing: border-box; padding-right: 44px !important; }
.pw-wrap > .pw-eye {
  position: absolute; top: 0; right: 0; bottom: 0; width: 44px; height: auto; min-width: 0; min-height: 0;
  margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  display: flex; align-items: center; justify-content: center; color: var(--ink-faint); cursor: pointer;
}
.pw-wrap > .pw-eye:hover, .pw-wrap > .pw-eye:focus-visible { color: var(--ink); }
.pw-wrap .pw-slash { display: none; }
.pw-wrap.pw-shown .pw-slash { display: inline; }
.pw-forgot > button { background: none; border: 0; padding: 4px 0; font: inherit; font-size: .875em; color: inherit; opacity: .75; text-decoration: underline; cursor: pointer; }
.pw-forgot > button:hover, .pw-forgot > button:focus-visible { opacity: 1; }
.pw-forgot > p { margin: 2px 0 0; font-size: .875em; }
.pw-forgot > p:empty { display: none; }
/* END shared:tokens */