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;
  /* Class Celebrations on the roster (sc-48962): the gold row and its pill. The row surface sits
     under the row's inherited --color-text, so it flips with the theme (dark value in each app's
     .root.dark) and the pair stays readable. The pill carries its own ink on its own fill, so it
     is the same gold in both themes. Kept in step with web/static/global.css. */
  --color-celebration-row-surface: #fffaeb;
  --color-celebration-row-accent: #fdd54f;
  --color-celebration-pill-surface: #fdd54f;
  --color-celebration-pill-ink: #5c4a03;
  /* 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;
  /* The generic ERROR tone for status pills, aliased onto the terminated trio
     as web and dashboard do. */
  --color-error-text: var(--color-terminated-text);
  --color-error-surface: var(--color-terminated-surface);
  --color-error-border: var(--color-terminated-border);
  /* 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;
  /* CAUTION: the pale-yellow status pill, the same values web and dashboard use. */
  --color-caution-text: #7c6104;
  --color-caution-surface: #feeeb9;
  --color-caution-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;
  }
}