html,
body,
#sapper {
  height: 100%;
  width: 100%;
}

body {
  --font-size: 14px;
  --font-family: "Suisse Int'l", Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;

  --space: 10px;
  --space-small: calc(var(--space) / 2);
  --space-xsmall: calc(var(--space-small) / 2);
  --space-large: calc(var(--space) * 2);
  --space-xlarge: calc(var(--space-large) * 2);

  /* this is particularly important for the carousels */
  --space-body-horizontal: var(--space-xlarge);

  --color-primary: #FDD54F;
  --color-primary-rgb: 253, 213, 79;
  --color-primary-contrast: #26293d;
  --color-primary-content-rgb: 38, 41, 61;
  /* --color-primary: #3880ff; */
  /* --color-primary-rgb: 56, 128, 255; */
  --color-primary-shade: #ffba49;
  /* --color-primary-tint: #4c8dff; */
  --color-secondary: #D2E5F7;
  --color-secondary-rgb: 210, 229, 247;
  --color-secondary-contrast: #26293d;
  --color-secondary-contrast-rgb: 38, 41, 61;
  --color-secondary-shade: #b9cad9;
	--color-secondary-tint: #d7e8f8;
  --color-tertiary: #FFFD48;
  --color-tertiary-rgb: 255, 253, 72;
  --color-tertiary-contrast: #26293d;
  --color-tertiary-contrast-rgb: 38, 41, 61;
  /* --color-tertiary-shade: #633ce0; */
  /* --color-tertiary-tint: #7e57ff; */
  --color-quaternary: #4068AF;
  --color-quaternary-rgb: 64,104,175;
  --color-quaternary-contrast: #ffffff;
  --color-quaternary-contrast-rgb: 255, 255, 255;
  --color-success: #10dc60;
  --color-success-rgb: 16, 220, 96;
  --color-activity-green: #34c759;
  --color-activity-green-rgb: 52, 199, 89;
  --color-activity-today-text: #0b7438;
  --color-activity-today-bg: #ecfdf3;
  --color-activity-today-line: #a0e7c7;
  --color-activity-pill-border: #fdd54f;
  --color-activity-pill-bg: #feeeb9;
  --color-activity-pill-blue-border: #d3e5f7;
  --color-activity-pill-text: #994a13;
  --color-activity-pill-blue-bg: #eaf2fc;
  --color-activity-pill-blue-text: #3a64a8;
  --color-activity-cancel: #ce432a;
  --color-activity-cancel-rgb: 206, 67, 42;
  --color-activity-cancel-bg: #ffddd7;
  --color-success-contrast: #ffffff;
  --color-success-contrast-rgb: 255, 255, 255;
  --color-success-shade: #0ec254;
  --color-success-tint: #28e070;
  /* Deep forest green for success status chips — used at full strength for the
     label text and as an rgba tint for the chip background + border. */
  --color-success-text: #0b7438;
  --color-success-text-rgb: 11, 116, 56;
  /* Companion surface + border for the success/signed status chips (Figma
     values). Solid so the chip stays a fixed mint in both themes. */
  --color-success-surface: #eaf7f0;
  --color-success-border: #A0E7C7;
  /* NEUTRAL -- the default status pill. The only tone that had no trio of its
     own, so it inherited --color-background-secondary / --color-text-secondary,
     which are not a pair: the background flips per theme while
     --color-text-secondary is identical in both blocks. That measured 4.97:1 in
     light and 1.88:1 in dark. Solid values like every trio above, so the chip is
     a fixed pale grey in both themes.
     MUST exist in every app's global.css -- custom properties resolve from the
     OWNING app's file, and a missing one makes the declaration invalid rather
     than falling back, which strips the pill's background entirely. */
  --color-neutral-text: #656877;
  --color-neutral-surface: #f1f3f5;
  --color-neutral-border: #dee2e6;
  /* Deep amber for caution status chips (not renewing, out of credits) — used
     at full strength for icon/text and as an rgba tint for background + border. */
  --color-warning-text: #994A13;
  --color-warning-text-rgb: 153, 74, 19;
  /* Companion surface + border for the caution chips (Figma values). Solid (not
     rgba) so the chip stays a fixed peach in both light and dark themes. */
  --color-warning-surface: #FFF2E9;
  --color-warning-border: #FFE5D2;
  /* Soft red for terminated status chips. Solid (not rgba) so the chip stays a
     fixed value in both light and dark themes, matching the success/warning
     chips. */
  --color-terminated-text: #CE432A;
  --color-terminated-surface: #FFEEEB;
  --color-terminated-border: #FFDDD7;
  /* Amber for paused membership status chips. Solid (not rgba) so the chip stays
     a fixed value in both light and dark themes, matching the success/warning/
     terminated chips. */
  --color-pause-text: #4F4110;
  --color-pause-surface: #FDDD72;
  --color-pause-border: #FDD54F;
  /* Early-bird (Purchase Date) promo pill + detail panel on the consumer
     program-browse surface (sc-40157). Mirrors the same tokens in
     web/static/global.css — the badge is a @recess/web component but renders in
     this (studio) app, so the tokens must exist here too. */
  --color-early-bird-text: #4F4110;
  --color-early-bird-surface: #FDDD72;
  --color-early-bird-border: #FDD54F;
  --color-early-bird-panel-surface: #FEEEB9;
  /* Companion surface/border/text for the soft-blue info chips (e.g. the
     scheduled-pause indicator on the package card). Solid (not rgba) so the dark
     blue text stays legible on the light-blue surface in both themes, matching
     the success/warning/terminated/pause chips above. */
  --color-info-surface: #EDF5FC;
  --color-info-border: #D3E5F7;
  --color-info-text: #4068AF;
  /* The ink that sits ON the info blue, for a filled chip or badge. Named by role
     rather than written as a literal so a component never hard-codes #fff, and
     kept beside its partner so the pair moves together if the blue is ever
     retuned. NOT --color-primary-contrast: that is the ink for the yellow
     primary, and falling back to it on a blue fill is how a chip ends up
     unreadable. */
  --color-info-text-contrast: #FFFFFF;
  --color-warning: #ffce00;
  --color-warning-rgb: 255, 206, 0;
  /* Dark ink on the warning yellow, in both themes -- the same ink as --color-primary-contrast on
     the other yellow buttons. White on #ffce00 is about 1.5:1, unreadable. */
  --color-warning-contrast: var(--color-dark);
  --color-warning-contrast-rgb: var(--color-dark-rgb);
  --color-warning-shade: #e0b500;
  --color-warning-tint: #ffd31a;
  /* Amber INK for warning text and outlines drawn on the page's own surface -- an outlined
     warning button (the class Progress tab's "Promote anyway"). The yellow above is about 1.5:1
     as text on white, so light takes this deep amber: 5.58:1 on white, 4.58:1 on #e6e9ec. It
     FLIPS: the dark theme's `.root.dark` block in the app's root layout sets it back to the yellow
     (6.95:1 on #404040), where this amber would be about 2.5:1. Same amber as web's and studio's
     --color-text-on-tint-warning. */
  --color-warning-ink: #7b6620;
  --color-warning-ink-rgb: 123, 102, 32;
  /* Info: soft blue for lower-emphasis paired actions (e.g. "Save as Inactive"
     beside a primary "Save as Active"). Pairs visually with the yellow primary. */
  --color-info: #dbeafe;
  --color-info-rgb: 219, 234, 254;
  --color-info-contrast: #000000;
  --color-info-contrast-rgb: 0, 0, 0;
  --color-info-shade: #c5d8ef;
  --color-info-tint: #e7f0fd;
  --color-danger: #f04141;
  --color-danger-rgb: 245, 61, 61;
  --color-danger-contrast: #ffffff;
  --color-danger-contrast-rgb: 255, 255, 255;
  --color-danger-shade: #d33939;
  --color-danger-tint: #f25454;
  --color-dark: #26293d;
  --color-dark-rgb: 38, 41, 61;
  --color-dark-contrast: #ffffff;
  --color-dark-contrast-rgb: 255, 255, 255;
  --color-dark-shade: #1e2023;
  --color-dark-tint: #494c52;
  --color-medium: #656877;
  --color-medium-rgb: 101, 104, 119;
  --color-medium-contrast: #ffffff;
  --color-medium-contrast-rgb: 255, 255, 255;
  --color-medium-shade: #86888f;
  --color-medium-tint: #a2a4ab;
  --color-light: #ffffff;
  --color-light-rgb: 255, 255, 255;
  --color-light-contrast: #000000;
  --color-light-contrast-rgb: 0, 0, 0;
  --color-light-shade: #d7d8da;
  --color-light-shade-rgb: 215, 216, 218;
  --color-light-tint: #f5f6f9;
  --color-facebook: #4267B2;
  --color-google: #4285F4;
  --color-apple: #000000;
  --color-outlook: #2372C5;
  /* --color-background: #2b2d42;
  --color-background-secondary: #4b4e6d;
  --color-text: #fff;
  --color-text-secondary: #a2a4ab; */
  --color-virtual: #D2E5F3;
  --color-virtual-tint: #EDF6FD;
  --color-irl: #F8EABE;
  --color-irl-tint: #FFF7DC;
  --color-private: #E0C8E7;
  --color-private-tint: #E8DEFD;
  --color-past: #A4A5AB;
  --color-past-rgb: 164, 165, 171;

  /* Tinted notice surfaces (waitlist / already-enrolled / similar banners) stay
     a fixed light color in every theme, so their text must also be fixed dark.
     `--color-text` flips to white in the dark and embed themes and would vanish
     on the tint, which is why these roles are theme-invariant rather than mapped
     to the standard text tokens.

     Defined here as well as in web's global.css because /embed/* is served by
     THIS app while the components that consume them (the enrollment checkout
     drawer's waitlist / already-enrolled panels) live in web. An undefined
     custom property drops the whole declaration, so a missing role rendered the
     embed's notice text white-on-white and its background transparent. Keep the
     values in step with web/static/global.css. */
  --color-surface-tint-warning: #fff8e1;
  --color-surface-tint-success: #eafaf0;
  --color-text-on-tint: #1f2937;
  --color-text-on-tint-secondary: #4b5563;
  /* Amber text + border that read against the warning tint surface, and soft
     danger borders for destructive-action callouts. Theme-invariant for the
     same reason as the tint surfaces above. */
  --color-text-on-tint-warning: #7b6620;
  --color-border-tint-warning: #f0e2b0;
  --color-border-tint-danger: #f6c5c5;
  --color-border-tint-danger-strong: #c98c8c;

  /* Email Builder design-foundations color ramps (Figma: Email Builder / Foundations -> Colors).
     Full self-consistent ramps: every step from the Figma panel is defined here with its hex
     value, so the builder can reference complete --color-<group>-<step> ramps. Some hexes also
     exist under legacy semantic --color-* names (e.g. --color-primary = accent-500); these are
     intentional duplicates kept for ramp consistency.

     Light-only at the GLOBAL level: the Figma foundations frame defines light values only, so
     these ramps have no `.root.dark` override here. Components that need dark support map these
     ramps to their own dark-aware local vars — see the Email Builder, which defines `--eb-*`
     roles in Builder.svelte and flips them onto the navy ramp's dark end (brand-300/400/500)
     under `.root.dark`, keeping the dark theme coherent with this same ramp without global dark
     tokens. Other consumers of these steps remain light until a designer supplies dark values;
     don't add guessed global dark hexes for the ramp piecemeal. */
  --color-brand-50: #edf5fc;
  --color-brand-100: #d3e5f7;
  --color-brand-150: #aec7e1;
  --color-brand-175: #6a8cc8;
  --color-brand-200: #4068af;
  --color-brand-300: #373b56;
  --color-brand-400: #25283d;
  --color-brand-500: #171a28;
  --color-accent-100: #fff7dc;
  --color-accent-200: #feeeb9;
  --color-accent-300: #fee695;
  --color-accent-400: #fddd72;
  --color-accent-500: #fdd54f;
  --color-accent-600: #d2b03f;
  --color-accent-700: #a68b2f;
  --color-accent-800: #7b6620;
  --color-accent-900: #4f4110;
  --color-neutral-0: #ffffff;
  --color-neutral-50: #f8f8f8;
  --color-neutral-100: #f0f0f0;
  --color-neutral-150: #f1f3f5;
  --color-neutral-200: #e5e5e5;
  --color-neutral-300: #cccccc;
  --color-neutral-400: #b3b3b3;
  --color-neutral-500: #999999;
  --color-neutral-600: #808080;
  --color-neutral-700: #666666;
  --color-neutral-800: #3d3d3d;
  --color-neutral-900: #292929;
  --color-success-50: #eefef7;
  --color-success-100: #c6fce4;
  --color-success-200: #a0e7c7;
  --color-success-300: #7ad2ab;
  --color-success-400: #2da972;
  --color-success-500: #079455;
  --color-success-600: #067644;
  --color-success-700: #045933;
  --color-error-50: #ffeeeb;
  --color-error-100: #ffddd7;
  --color-error-200: #ffbaae;
  --color-error-500: #ff5335;
  --color-error-600: #ce432a;
  --color-error-700: #9e3320;
  --color-warning-50: #fff2e9;
  --color-warning-100: #ffe5d2;
  --color-warning-500: #ff7c1f;
  --color-warning-700: #994a13;

  --border-radius: 5px;

  --header-height: 55px;
  --content-height: calc(100% - var(--header-height));

  --button-space: var(--space);
  --input-border-color: rgba(var(--color-light-rgb), 0.25);
  --input-border: 1px solid var(--input-border-color);
  --input-placeholder-color: rgba(var(--color-light-rgb), 0.5);

  /* Redefine default SMUI variables with base values */
  --mdc-ripple-focus-opacity: 0;

  --mdc-theme-primary: var(--color-primary);
  --mdc-theme-secondary: var(--color-secondary);
  --mdc-theme-background: var(--color-background);
  --mdc-theme-surface: var(--color-background);
  --mdc-theme-error: var(--color-danger);
  --mdc-theme-on-primary: var(--color-primary-contrast);
  --mdc-theme-on-secondary: var(--color-secondary-contrast);
  --mdc-theme-on-surface: var(--color-text);
  --mdc-theme-on-error: var(--color-light);

  --mdc-theme-text-primary-on-background: var(--color-text);
  --mdc-theme-text-secondary-on-background: var(--color-text-secondary);
  --mdc-theme-text-hint-on-background: var(--color-light-shade);
  --mdc-theme-text-disabled-on-background: var(--color-light-shade);
  --mdc-theme-text-icon-on-background: var(--color-light-shade);
  --mdc-theme-text-primary-on-light: var(--color-dark);
  --mdc-theme-text-secondary-on-light: var(--color-dark-shade);
  --mdc-theme-text-hint-on-light: var(--color-dark-tint);
  --mdc-theme-text-disabled-on-light: rgba(var(--color-text-rgb), 0.4);
  --mdc-theme-text-icon-on-light: var(--color-dark-tint);

  --mdc-theme-text-primary-on-dark: var(--color-light);
  --mdc-theme-text-secondary-on-dark: var(--color-light);
  --mdc-theme-text-hint-on-dark: var(--color-light);
  --mdc-theme-text-disabled-on-dark: rgba(var(--color-text-rgb), 0.4);
  --mdc-theme-text-icon-on-dark: var(--color-light);

  --mdc-typography-font-family: var(--font-family);
}

body {
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

body, button {
  font-family: var(--font-family);
}

* {
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 0.5em 0;
  font-weight: 400;
  line-height: 1.2;
}

a {
  color: inherit;
}
dd {
  margin-inline-start: 0px;
}

textarea:disabled,
input:disabled {
  cursor: not-allowed;
}

textarea,
input[type="text"],
input[type="date"],
input[type="email"],
input[type="password"],
input[type="number"] {
  background-color: transparent;
  border: var(--input-border);
  border-radius: var(--border-radius);
  box-shadow: none;
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--font-size);
  margin: 0;
  outline: none;
  padding: var(--space) 15px;
  transition: border-color 200ms;
}
textarea::placeholder,
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="number"]::placeholder {
  color: var(--input-placeholder-color);
}
input[type="checkbox"] {
  margin: 0;
}
textarea:focus,
input:focus {
  border-color: var(--color-primary);
}
textarea {
  font-family: inherit;
  font-size: var(--font-size);
  line-height: 1.4em;
}

img {
  max-width: 100%;
}

/* REDUNDANT STYLE */
.notice {
  color: rgba(var(--color-text-rgb),0.5);
  font-size: 0.8em;
}

/* /fonts/ holds more Suisse Int'l weights than are declared here — every weight
   plus the italics, as woff2 + woff. That is deliberate: a face with no
   @font-face block is never requested, so the extra files cost nothing to
   serve, and enabling a weight is a block below rather than a hunt for the
   original files.

   ⛔ Don't delete them as "unused assets". The one thing that does fetch them is
   the service worker precaching all of static/ — fix that in service-worker.js,
   not by removing the files. Legacy eot/ttf/svg were dropped for real: no
   browser we serve can use them.

   Italics need an explicit block; with no italic face declared the browser
   synthesises one by slanting the upright. */

/* Black (900) carries the big numbers on the Achievements cards and screens. It was
   already in /fonts/; this block is what lets the browser ask for it. */
@font-face {
  font-family: "Suisse Int'l";
  font-weight: 900;
  src:
    url("/fonts/SuisseIntl-Black-WebM.woff2") format("woff2"),
    url("/fonts/SuisseIntl-Black-WebM.woff") format("woff");
}

@font-face {
  font-family: "Suisse Int'l";
  font-weight: 700;
  src:
    url("/fonts/SuisseIntl-Bold-WebM.woff2") format("woff2"),
    url("/fonts/SuisseIntl-Bold-WebM.woff") format("woff");
}

@font-face {
  font-family: "Suisse Int'l";
  font-weight: 600;
  src:
    url("/fonts/SuisseIntl-SemiBold-WebM.woff2") format("woff2"),
    url("/fonts/SuisseIntl-SemiBold-WebM.woff") format("woff");
}

@font-face {
  font-family: "Suisse Int'l";
  font-weight: 500;
  src:
    url("/fonts/SuisseIntl-Medium-WebM.woff2") format("woff2"),
    url("/fonts/SuisseIntl-Medium-WebM.woff") format("woff");
}
@font-face {
  font-family: "Suisse Int'l";
  font-weight: 400;
  src:
    url("/fonts/SuisseIntl-Regular-WebM.woff2") format("woff2"),
    url("/fonts/SuisseIntl-Regular-WebM.woff") format("woff");
}

@media (max-width: 767px) {
  .hide-on-mobile {
    display: none !important;
  }
  body {
    --space-body-horizontal: var(--space);
  }
  svg {
    height: 100% !important;
  }
  input[type="date" i] {
    font-family: Arial;
  }
  textarea,
  input[type="text"],
  input[type="date"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"] {
    /* This avoid zoom on mobile input tap */
    font-size: 16px;
  }
  /* Set a default value for svelte-select input font-size variable to fix zoom on mobile issue */
  .selectContainer > input {
    --inputFontSize: 16px;
  }
}

@media (min-width: 768px) {
  .show-only-on-mobile {
    display: none !important;
  }
}
@media (min-width: 1024px) {
  .hide-on-desktop {
    display: none !important;
  }
}