/* Generated by `rake css:build` from app/assets/stylesheets. Do not edit. */
@layer fonts, vars, reset, layout, plugins, components, utils;

/* FONTS */
/* _fonts.css */
@layer fonts {
@font-face {
  font-display: swap;
  font-family: "Roboto Flex";
  font-style: normal;
  font-weight: 450 750;
  /* Flat logical path: app/assets/fonts is its own Propshaft load path root, and Propshaft rewrites
     this to the digested URL when serving. */
  src: url("/assets/RobotoFlex-737bec3e.woff2") format("woff2");
}

}

/* VARIABLES */
/* vars/_colors.css */
:root {
  --color-black: #000000;
  --color-white: #ffffff;

  --color-neutral-50: #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #e5e5e5;
  --color-neutral-300: #d4d4d4;
  --color-neutral-400: #a1a1a1;
  --color-neutral-500: #737373;
  --color-neutral-600: #545454;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;
  --color-neutral-950: #0a0a0a;

  --color-green-100: #d7f3c6;
  --color-green-500: #a6e081;
  --color-green-700: #629940;
  --color-green-900: #436c29;

  --color-blue-100: #c8e3ff;
  --color-blue-500: #80bfff;
  --color-blue-700: #3283d6;
  --color-blue-900: #325272;

  --color-lime-100: #f3ffad;
  --color-lime-500: #dae470;
  --color-lime-700: #698415;
  --color-lime-900: #526c24;

  --color-pink-100: #ffc3eb;
  --color-pink-500: #e585c6;
  --color-pink-700: #c03f97;
  --color-pink-900: #7d1f5e;

  --color-purple-100: #e8dcf3;
  --color-purple-500: #8b67ac;
  --color-purple-700: #6d3e98;
  --color-purple-900: #401b62;

  --color-red-100: #f6d5d5;
  --color-red-500: #e2adad;
  --color-red-700: #b02727;
  --color-red-900: #6b1f1f;

  --color-teal-100: #b5eaed;
  --color-teal-500: #009ba5;
  --color-teal-700: #017078;
  --color-teal-900: #004347;
  --color-yellow-100: #fcf9df;
  --color-yellow-500: #ffe600;
  --color-yellow-700: #968803;
  --color-yellow-900: #786c00;

  /* SEMANTIC */

  --color-error: var(--color-red-700);
  --color-error-light: var(--color-red-500);

  --color-success: var(--color-green-700);
  --color-success-light: var(--color-green-500);
}
/* vars/_easing.css */
/* Easings */
:root {
  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);

  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);

  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
  --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
/* vars/_font-sizes.css */
:root {
  --text-step--2: clamp(0.813rem, 0.79rem + 0.11vw, 0.875rem);
  --text-step--1: clamp(0.875rem, 0.8393rem + 0.1786vw, 1rem);
  --text-step-0: clamp(1rem, 0.9643rem + 0.1786vw, 1.125rem);
  --text-step-1: clamp(1.125rem, 0.9821rem + 0.7143vw, 1.625rem);
  --text-step-2: clamp(1.25rem, 1.0357rem + 1.0714vw, 2rem);
  --text-step-3: clamp(1.5rem, 1.1786rem + 1.6071vw, 2.625rem);
  --text-step-4: clamp(1.625rem, 1.0179rem + 3.0357vw, 3.75rem);
  --text-step-5: clamp(2rem, 1.2857rem + 3.5714vw, 4.5rem);
  --text-step-6: clamp(2.8125rem, 0.9375rem + 9.375vw, 9.375rem);
}
/* vars/_font-weight.css */
:root {
  --weight-normal: 450;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 750;
}
/* vars/_line-height.css */
:root {
  --line-height-tight: 1.1;
  --line-height-snug: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;
}
/* vars/_spacing.css */
:root {
  --space-3xs: clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem);
  --space-2xs: clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem);
  --space-xs: clamp(0.75rem, 0.6429rem + 0.5357vw, 1.125rem);
  --space-s: clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem);
  --space-m: clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem);
  --space-l: clamp(2rem, 1.7143rem + 1.4286vw, 3rem);
  --space-xl: clamp(3rem, 2.5714rem + 2.1429vw, 4.5rem);
  --space-2xl: clamp(4rem, 3.4286rem + 2.8571vw, 6rem);
  --space-3xl: clamp(6rem, 5.1429rem + 4.2857vw, 9rem);
  --space-3xs-2xs: clamp(0.25rem, 0.1071rem + 0.7143vw, 0.75rem);
  --space-2xs-xs: clamp(0.5rem, 0.3214rem + 0.8929vw, 1.125rem);
  --space-xs-s: clamp(0.75rem, 0.5357rem + 1.0714vw, 1.5rem);
  --space-s-m: clamp(1rem, 0.6429rem + 1.7857vw, 2.25rem);
  --space-m-l: clamp(1.5rem, 1.0714rem + 2.1429vw, 3rem);
  --space-l-xl: clamp(2rem, 1.2857rem + 3.5714vw, 4.5rem);
  --space-xl-2xl: clamp(3rem, 2.1429rem + 4.2857vw, 6rem);
  --space-2xl-3xl: clamp(4rem, 2.5714rem + 7.1429vw, 9rem);
}

/* RESET */
/* _reset.css */
@layer reset {
/* A modified version of my "modern reset" https://github.com/hankchizljaw/modern-css-reset */

/* Box sizing rules */

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

/* Allow percentage-based heights in the application*/
html,
body {
  min-block-size: 100%;
}

/* Set core root defaults */
html {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  line-height: 1.4;
  text-rendering: optimizeSpeed;
}

/* Default link styles */
a {
  color: inherit;
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture,
video,
canvas,
svg {
  display: block;
  block-size: auto;
  max-inline-size: 100%;
}

svg {
  flex-shrink: 0;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Fix blue color on Safari */
button,
input[type="submit"],
select {
  color: inherit;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul:where([role="list"]),
ol:where([role="list"]) {
  padding: 0;
  list-style-type: none;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01s !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01s !important;
  }
}

}
/* _root.css */
@layer reset {
body {
  background-color: var(--color-neutral-50);
  color: rgb(0 0 0 / 0.9);
  font-family: "Roboto Flex", sans-serif;
  -webkit-font-smoothing: antialiased;
  font-stretch: 70%;
  font-weight: 450;
  letter-spacing: 0.01em;
}

h1,
h2,
h3,
h4 {
  font-stretch: 50%;
  font-weight: 750;
  line-height: 1;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

button {
  border: none;
  background: transparent;
}

:focus-visible {
  outline: 4px solid var(--focus-outline-color, var(--color-pink-700));
}

@view-transition {
  navigation: auto;
}

}

/* LAYOUT */
/* layout/_app-layout.css */
@layer layout {
.app-layout {
  --sidebar-width: 15rem;

  > main {
    padding-block: var(--space-m-l);
    padding-inline: var(--space-s);
  }

  @media (width >= 64em) {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);

    > main {
      padding: clamp(1.5rem, 0.955rem + 2.73vw, 3rem);
      grid-column: 2;
      max-inline-size: 100rem;
    }
  }
}

}
/* layout/_auto-grid.css */
@layer layout {
/**
 * AUTO-GRID LAYOUT
 *
 * This CSS utility creates a responsive grid layout that automatically adjusts the number of columns
 * based on the available space and specified constraints. It aims to fit as many cells as possible
 * in a single row, while respecting minimum cell width and maximum columns constraints.
 *
 * Customizable Properties:
 * --auto-grid-min-size: Sets the minimum width for each cell in the grid.
 *                       Default is 16rem.
 * --auto-grid-max-columns: Sets the maximum number of columns in the grid.
 *                          Default is 'infinity' (as many as can fit).
 * --auto-grid-gap: Sets the horizontal gap between grid cells. It also sets
 *                  the vertical gap if --auto-grid-gap-vertical is not defined.
 *                  Default is 1rem.
 * --auto-grid-gap-vertical: Specifically sets the vertical gap between rows
 *                           of cells. If not set, it falls back to the value
 *                           of '--auto-grid-gap'.
 *
 * The grid utilizes CSS 'display: grid' with the 'auto-fit' feature and the 'minmax()'
 * function to ensure that cells expand to fill available space while maintaining
 * the set minimum size.
 *
 * Example Usage:
 * <div class="auto-grid" style="--auto-grid-min-size: 10rem; --auto-grid-max-columns: 3; --auto-grid-gap: 0.5rem;">
 *   \3c !-- grid items here -->
 * </div>
 *
 * The above example will create a grid with a minimum cell width of 10rem, a maximum
 * of 3 columns, and a gap of 0.5rem between both rows and columns.
 */

.auto-grid {
  --_default-gap: var(--space-s);
  --max-column-width: 100% / var(--auto-grid-max-columns, 2) -
    var(--auto-grid-gap, var(--_default-gap));
  --column-width: max(
    var(--max-column-width),
    min(var(--auto-grid-min-size, 18rem), 100%)
  );

  display: grid;

  /* vertical gap falls back to general gap then falls back to 1rem*/
  gap: var(--auto-grid-gap-vertical, var(--auto-grid-gap, var(--_default-gap)))
    var(--auto-grid-gap, var(--_default-gap));

  grid-template-columns: repeat(auto-fill, minmax(var(--column-width), 1fr));

  > .span-full {
    grid-column: 1 / -1;
  }
}

}
/* layout/_centerflex.css */
@layer layout {
.centerflex {
  /* ↓ Save the large negative or large positive value to a variable */
  --multiplier: calc((var(--centerflex-threshold, 38rem) - 100%) * 666);

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* ↓ Multiply by -1 to make negative */
  margin-block: calc(var(--centerflex-gap, 1rem) / 2 * -1);
  margin-inline: 0;

  &:before {
    /* ↓ If --multiplier is negative, use 0px instead */
    flex-basis: Max(0px, var(--multiplier));
    flex-grow: 666;
    margin: 0;
    background: #f09;
    content: "";
  }

  > * {
    /* ↓ Half the value to each element, combining to make the whole */
    margin-block: calc(var(--centerflex-gap, 1rem) / 2);
    margin-inline: auto;

    &:first-child {
      order: -1;
    }
  }
}

}
/* layout/_cluster.css */
@layer layout {
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: var(--cluster-alignment, flex-start);
  justify-content: var(--cluster-justification, flex-start);
  gap: var(--cluster-gap-vertical, var(--cluster-gap, var(--space-xs)))
    var(--cluster-gap, var(--space-xs));
}

[data-variant="space-between"] {
  --cluster-justification: space-between;
}

}
/* layout/_frontpage-layout.css */
@layer layout {
.frontpage-layout {
  isolation: isolate;
  padding-block-end: var(--space-2xl);

  &::before {
    position: absolute;
    background-image:
      linear-gradient(
        0deg,
        rgb(255 255 255 / 0.3) 0%,
        rgb(255 255 255 / 0.3) 100%
      ),
      radial-gradient(
        81.34% 70.71% at 100% 0%,
        rgb(255 230 0 / 0.4) 0%,
        rgb(255 230 0 / 0) 100%
      ),
      linear-gradient(53deg, #80c1ff 0%, #009ba4 102.3%);
    block-size: max(40rem, 60svb);
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
    content: "";
    inline-size: 100%;
    inset-block-start: 0;
    inset-inline: auto;
    pointer-events: none;
  }
}

}
/* layout/_grid-switcher.css */
@layer layout {
/*
  This switcher layout accepts two breakpoints. At the first breakpoint (--gs-bp-medium) it switches from the
  initial column count (--gs-columns-small) to the medium column count (--gs-columns-medium).
  Then when reaching the second breakpoint (--gs-bp-large) it switches to the large column count (--gs-columns-large)
*/
.grid-switcher {
  /* define fallback values once, so they don't need to be repeated every time */
  --_gs-columns-small: var(--gs-columns-small, 1);
  --_gs-bp-medium: var(--gs-bp-medium, 25rem);
  --_gs-columns-medium: var(--gs-columns-medium, 2);
  --_gs-bp-large: var(--gs-bp-large, 50rem);
  --_gs-columns-large: var(--gs-columns-large, 4);
  --_gs-gap: var(--gs-gap, 1rem);

  display: grid;
  gap: var(--gs-gap-vertical, var(--_gs-gap)) var(--_gs-gap);
  grid-template-columns: repeat(
    auto-fill,
    minmax(
      clamp(
        clamp(
          100% / var(--_gs-columns-large) - var(--_gs-gap),
          (var(--_gs-bp-large) - 100%) * 1000,
          100% / var(--_gs-columns-medium) - var(--_gs-gap)
        ),
        (var(--_gs-bp-medium) - 100%) * 1000,
        100% / var(--_gs-columns-small) - var(--_gs-gap)
      ),
      1fr
    )
  );
}

}
/* layout/_wrapper.css */
@layer layout {
/**
 * WRAPPER
 * Sets a max width, adds a consisten gutter and horizontally
 * centers the contents
 */
.wrapper {
  --_wrapper-max-default: 88rem;
  position: relative;
  inline-size: min(
    100% - var(--wrapper-padding, var(--space-s)) * 2,
    var(--wrapper-max, var(--_wrapper-max-default))
  );

  &:not(.wrapper--left) {
    margin-inline: auto;
  }
}

.wrapper--left {
  inline-size: min(100%, var(--wrapper-max, var(--_wrapper-max-default)));
}

}

/* COMPONENTS */
/* base components */
/* components/base/_badge.css */
@layer components.base {
.badge {
  display: inline-flex;
  align-items: center;
  border: 2px solid rgb(0 0 0 / 0.15);
  background-color: var(--badge-bg, var(--color-white));
  color: var(--badge-color, var(--color-neutral-900));
  font-weight: var(--weight-medium);
  line-height: 1;
  text-box: trim-both cap alphabetic;

  /* SIZES */
  &:not([data-size]),
  &[data-size="default"] {
    border-radius: 0.25rem;
    font-size: var(--text-step--1);
    min-block-size: 1.75em;
    padding-inline: var(--space-2xs);
  }

  &[data-size="small"] {
    border-width: 1px;
    border-radius: 3rem;
    font-size: var(--text-step--2);
    min-block-size: 1.25rem;
    padding-inline: 0.5rem;
  }

  /* COLORS */
  &[data-color="green"] {
    --badge-bg: var(--color-green-100);
    --badge-color: var(--color-green-900);
  }

  &[data-color="blue"] {
    --badge-bg: var(--color-blue-100);
    --badge-color: var(--color-blue-900);
  }

  &[data-color="lime"] {
    --badge-bg: var(--color-lime-100);
    --badge-color: var(--color-lime-900);
  }

  &[data-color="pink"] {
    --badge-bg: var(--color-pink-100);
    --badge-color: var(--color-pink-900);
  }

  &[data-color="purple"] {
    --badge-bg: var(--color-purple-100);
    --badge-color: var(--color-purple-900);
  }

  &[data-color="red"] {
    --badge-bg: var(--color-red-100);
    --badge-color: var(--color-red-900);
  }

  &[data-color="teal"] {
    --badge-bg: var(--color-teal-100);
    --badge-color: var(--color-teal-900);
  }

  &[data-color="yellow"] {
    --badge-bg: var(--color-yellow-100);
    --badge-color: var(--color-yellow-900);
  }
}

}
/* components/base/_button.css */
@layer components.base {
.button,
::file-selector-button {
  --icon-size: 1.25em;
  --gap: var(--space-3xs);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: var(--color-black);
  color: var(--color-white);
  cursor: pointer;
  filter: saturate(0.7);
  font-size: var(--text-step--1);
  font-stretch: 50%;
  font-weight: var(--weight-medium);
  gap: calc(var(--gap) + var(--icon-size) / 2.5);
  letter-spacing: 0.02em;
  line-height: 1;
  min-block-size: 3rem;
  padding-inline: 1.25rem;
  text-align: center;
  text-decoration: none;
  transition:
    0.2s background-color,
    0.2s color,
    0.2s box-shadow;

  > span {
    text-box: trim-both cap alphabetic;
  }

  > svg {
    block-size: var(--icon-size);
    inline-size: var(--icon-size);
    margin-inline: calc(var(--icon-size) / -3.5);
  }

  &[data-variant="secondary"] {
    border: 2px solid rgb(0 0 0 / 0.1);
    background-color: var(--color-neutral-100);
    color: var(--color-black);

    > svg {
      opacity: 0.6;
    }
  }

  &[data-variant="outline"] {
    border: 2px solid var(--color-black);
    background-color: var(--color-white);
    color: var(--color-black);
  }

  &[data-variant="ghost"] {
    background-color: transparent;
    color: var(--color-neutral-600);

    &:is(:hover, :focus-visible) {
      background-color: color-mix(in srgb, currentColor 10%, transparent);
    }

    > svg {
      opacity: 0.6;
    }
  }

  &[data-variant="success"] {
    --focus-outline-color: var(--color-green-900);
    border: 2px solid rgb(0 0 0 / 0.1);
    background-color: var(--color-success);
  }

  &[data-variant="error"] {
    --focus-outline-color: var(--color-red-900);
    border: 2px solid rgb(0 0 0 / 0.1);
    background-color: var(--color-error);
  }

  &[data-icon-only] {
    aspect-ratio: 1;
    padding-inline: 0;

    > svg {
      margin-inline: 0;
    }
  }

  &[data-full-width] {
    inline-size: 100%;
    justify-self: stretch;
  }

  &[data-align="start"] {
    justify-content: start;
  }
}

}
/* components/base/_card.css */
@layer components.base {
.card {
  padding: var(--space-s);
  border: 2px solid var(--color-black);
  background-color: var(--color-white);

  &:not(.card--no-shadow) {
    box-shadow: 0 0.5rem 1.5rem 0 rgb(25 0 12 / 0.1);
  }
}

.card--subtle {
  border: 1px solid var(--color-neutral-200);
}

.card--no-padding {
  padding: 0;
}

}
/* components/base/_input.css */
@layer components.base {
.input-outer {
  --inner-gap: 0.375rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;

  &:has(:disabled) {
    opacity: 0.5;

    &,
    & * {
      cursor: not-allowed !important;
    }
  }
}

.input-inner {
  display: flex;
  flex-direction: column;
  gap: var(--inner-gap);
  reading-flow: flex-visual;

  &:has(input:is([type="checkbox"], [type="radio"])) {
    flex-direction: row;
    gap: 0.5rem;

    & label {
      cursor: pointer;
      font-size: var(--text-step-0);
      font-weight: var(--weight-normal);
      padding-block-start: 0.1em;
      vertical-align: middle;
    }

    &:has(+ span) + span {
      /* Increase margin-top from error/description if shown */
      margin-block-start: var(--space-3xs);
    }
  }

  & label {
    font-weight: bold;
    line-height: var(--line-height-snug);
  }

  & input,
  & textarea,
  & select {
    &::placeholder {
      color: rgb(0 0 0 / 0.4);
    }
  }

  & input:not([type="checkbox"], [type="radio"], [type="range"]),
  & textarea,
  & select {
    border: 2px solid var(--color-black);
    min-block-size: 3rem;
    padding-inline: var(--space-2xs);
    transition: box-shadow 0.2s;
  }

  & textarea {
    field-sizing: content;
    padding-block: var(--space-2xs);
    resize: vertical;
  }

  & select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M480-344%20240-584l56-56%20184%20184%20184-184%2056%2056-240%20240Z%22%2F%3E%3C%2Fsvg%3E");
    background-position: right var(--space-2xs) center;
    background-repeat: no-repeat;
    background-size: 1.5rem;
    cursor: pointer;
    padding-inline-end: calc(var(--space-2xs) + 1.5rem);
  }

  & input:is([type="checkbox"], [type="radio"]) {
    order: -1;
  }

  & input[type="file"] {
    border: none;
    padding-inline: 0;

    &::file-selector-button {
      font-family: inherit;
      margin-inline-end: var(--space-2xs);
    }
  }

  &:has(~ .input-error) {
    color: var(--color-error);

    & input {
      --focus-outline-color: var(--color-error-light);
      border-color: var(--color-error);
    }
  }
}

.input-error,
.input-description {
  display: flex;
  align-items: flex-start;
  font-size: var(--text-step--2);
  font-weight: 600;
  gap: var(--space-3xs);

  > svg {
    inline-size: 1.25em;
    translate: 0 0.05em;
  }
}

.input-error {
  color: var(--color-error);
  padding-inline-start: 0.125rem;
}

.input-description {
  color: var(--color-gray);
  padding-inline-start: 0.25rem;
}

input:is([type="checkbox"], [type="radio"]) {
  --default-input-size: 1.5rem;

  flex-shrink: 0;
  border: 2px solid var(--color-black);
  appearance: none;
  block-size: var(--input-size, var(--default-input-size));
  cursor: pointer;
  inline-size: var(--input-size, var(--default-input-size));
  transition:
    0.2s background-size,
    0.2s background-color,
    0.2s border-color,
    0.2s box-shadow;
}

input[type="checkbox"] {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%20fill%3D%22%23fff%22%3E%3Cpath%20d%3D%22M382-240%20154-468l57-57%20171%20171%20367-367%2057%2057z%22%2F%3E%3C%2Fsvg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0;

  &:checked {
    background-color: var(--color-success);
    background-size: 100%;
  }
}

input[type="radio"] {
  display: grid;
  border-radius: 99px;
  grid-template: 1fr / 1fr;

  &::before {
    align-self: center;
    border-radius: 99px;
    background-color: var(--color-black);
    block-size: calc(100% - 4px);
    content: "";
    inline-size: calc(100% - 4px);
    justify-self: center;
    scale: 0;
    transition: 0.2s scale;
  }

  &:checked {
    &::before {
      scale: 1;
    }
  }
}

}
/* components/base/_search-bar.css */
@layer components.base {
.search-bar {
  position: relative;
  display: flex;
  flex-grow: 1;
  align-items: center;
  max-inline-size: 25.625rem;
  min-inline-size: min(13.75rem, 100%);

  > svg {
    position: absolute;
    block-size: 1.25rem;
    color: var(--color-neutral-500);
    inline-size: 1.25rem;
    inset-block-start: 50%;
    inset-inline-start: var(--space-2xs);
    pointer-events: none;
    transition: color 0.2s;
    translate: 0 -50%;
  }

  &:focus-within > svg {
    color: var(--color-black);
  }

  > input {
    border: 1px solid var(--color-neutral-300);
    background-color: var(--color-white);
    inline-size: 100%;
    line-height: 1;
    min-block-size: 3rem;
    padding-inline-end: var(--space-2xs);
    padding-inline-start: calc(var(--space-2xs) + 1.25rem + var(--space-2xs));
    transition: border-color 0.2s;

    &::placeholder {
      color: var(--color-neutral-500);
    }

    &:hover {
      border-color: var(--color-neutral-400);
    }

    &:focus-visible {
      border-color: var(--color-black);
    }

    &::-webkit-search-cancel-button {
      appearance: none;
    }
  }
}

}

/* other components */
/* components/_app-header.css */
@layer components {
.app-header-toggle-wrapper {
  position: sticky;
  z-index: 90;
  display: flex;
  justify-content: space-between;
  block-size: 3rem;
  inset-block-start: var(--space-2xs);
  inset-inline-end: var(--space-s);
  margin-block-start: var(--space-s);
  margin-inline: var(--space-s);

  > a > svg {
    block-size: 3rem;
    filter: drop-shadow(0 2px 4px var(--color-white));
    inline-size: auto;
  }

  @media (width >= 64em) {
    display: none;
  }
}

.app-header {
  display: flex;
  flex-direction: column;
  border: none;
  background-color: var(--color-white);
  block-size: 100dvh;
  border-inline-end: 1px solid var(--color-neutral-200);

  @media (width < 64em) {
    position: fixed;
    display: none;
    inline-size: min(100%, var(--sidebar-width));
    inset-block: 0;
    inset-inline-start: 0;
    transition: 0.35s var(--ease-in-out-cubic);
    transition-behavior: allow-discrete;
    transition-property: display, overlay, translate;
    translate: -100% 0;

    /* Un-open starting style for entry animation */
    @starting-style {
      translate: -100% 0;
    }

    &:popover-open {
      display: flex;
      translate: 0 0;

      @starting-style {
        translate: -100% 0;
      }

      &::backdrop {
        opacity: 1;

        @starting-style {
          opacity: 0;
        }
      }
    }
  }

  @media (width >= 64em) {
    position: sticky;
    inset-block-start: 0;

    &::backdrop {
      display: none;
    }
  }
}

.app-header__head {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-s);
  padding-block-end: var(--space-m);

  > .button {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;

    @media (width >= 64em) {
      display: none;
    }
  }
}

.app-header__logo {
  display: inline-block;
  max-inline-size: calc(100% - var(--space-xs));

  > svg {
    inline-size: 7.375rem;
  }
}

.app-header__nav {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding-block-end: var(--space-xs-s);
  padding-inline: 1rem;

  & ul {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-3xs);
  }

  /* User Menu */
  & li:last-child {
    margin-block-start: auto;
  }
}

.app-header__link {
  display: flex;
  align-items: center;
  border: 2px solid transparent;
  font-size: var(--text-step-0);
  gap: 1.5ch;
  line-height: 1;
  min-block-size: 2.75rem;
  padding-inline: var(--space-2xs);
  text-decoration: none;
  transition: 0.2s background-color;

  &:not([aria-current="page"]):is(:hover, :focus-visible) {
    background-color: var(--color-neutral-200);
  }

  &[aria-current="page"] {
    background-image:
      linear-gradient(rgb(255 255 255 / 0.6), rgb(255 255 255 / 0.6)),
      linear-gradient(
        0deg,
        rgb(255 255 255 / 0.3) 0%,
        rgb(255 255 255 / 0.3) 100%
      ),
      radial-gradient(
        81.34% 70.71% at 100% 0%,
        rgb(255 230 0 / 0.4) 0%,
        rgb(255 230 0 / 0) 100%
      ),
      linear-gradient(53deg, #80c1ff 0%, #009ba4 102.3%);
    border-image: linear-gradient(
        53deg,
        color-mix(in srgb, #80c1ff, #fff 40%) 0%,
        color-mix(in srgb, #009ba4, #fff 40%) 102.3%
      )
      1;
  }

  > svg {
    --size: 1.125em;
    block-size: var(--size);
    inline-size: var(--size);
  }
}

.app-header__notice {
  border-block-start: 1px solid var(--color-neutral-200);
  color: var(--color-neutral-700);
  font-size: var(--text-step--2);
  padding-block: var(--space-2xs-xs);
  padding-inline: var(--space-3xs);
  text-align: center;
}

}
/* components/_batch-card.css */
@layer components {
.batch-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  transition: 0.2s background-color;

  &:has(a:is(:hover, :focus-visible)) {
    background-color: rgb(0 0 0 / 0.01);
  }

  > a {
    position: absolute;
    inset: 0;
  }
}

.batch-card__header {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--space-s);
  gap: var(--space-2xs);
}

.batch-card__active-dot {
  position: absolute;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--color-success);
  block-size: 0.5rem;
  inline-size: 0.5rem;
  inset-block-start: var(--space-xs);
  inset-inline-end: var(--space-xs);
}

/* ADMIN VIEW */

.batch-card__stats {
  display: grid;
  border-block-start: 1px solid var(--color-neutral-200);
  grid-template-columns: 1fr 1fr;
}

.batch-card__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding-block: var(--space-2xs);
  padding-inline: var(--space-s);

  &:not(:last-child) {
    border-inline-end: 1px solid var(--color-neutral-200);
  }
}

.batch-card__stat-label {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);

  > svg {
    block-size: 1.25em;
    inline-size: 1.25em;
  }
}

/* MENTOR VIEW */
.batch-card__mentees {
  display: flex;
  flex-direction: column;
  border-block-start: 1px solid var(--color-neutral-200);
  gap: var(--space-3xs);
  padding-block: var(--space-2xs);
  padding-inline: var(--space-s);
}

}
/* components/_batch-list-item.css */
@layer components {
.batch-list-item {
  position: relative;
  display: flex;
  flex-direction: column;
  border-block-end: 1px solid var(--color-neutral-200);
  gap: var(--space-2xs);
  padding-block: var(--space-s);
  padding-inline: var(--space-s);
  transition: 0.2s background-color;

  &:has(a:is(:hover, :focus-visible)) {
    background-color: var(--color-neutral-100);
  }

  > a {
    position: absolute;
    inset: 0;
  }
}

.batch-list-item__active-dot {
  position: absolute;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--color-success);
  block-size: 0.5rem;
  inline-size: 0.5rem;
  inset-block-start: var(--space-s);
  inset-inline-end: var(--space-s);
}

}
/* components/_batch-suggestion.css */
@layer components {
.batch-suggestion__header,
.batch-suggestion__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: var(--space-s);
}

.batch-suggestion__header {
  align-items: flex-start;
  border-block-end: 1px solid var(--color-neutral-200);
  gap: var(--space-s);
}

.batch-suggestion__footer {
  align-items: flex-end;
}

}
/* components/_batches-list.css */
@layer components {
.batches-list {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.batches-list__header {
  display: flex;
  flex-direction: column;
  padding: var(--space-s);
  border-block-end: 1px solid var(--color-neutral-200);
  gap: var(--space-3xs);
}

.batches-list__list {
  display: flex;
  flex-direction: column;
}

.batches-list__view-all {
  flex: 1;
  padding-block: var(--space-xs);
}

}
/* components/_batches-section.css */
@layer components {
.batches-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.batches-section__title {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.batches-section__dot {
  border-radius: 50%;
  block-size: 0.75rem;
  inline-size: 0.75rem;

  &[data-color="green"] {
    background-color: var(--color-green-700);
  }

  &[data-color="yellow"] {
    background-color: var(--color-yellow-700);
  }

  &[data-color="neutral"] {
    background-color: var(--color-neutral-400);
  }
}

}
/* components/_checkbox-group.css */
@layer components {
/* Applied as wrapper class, displays all checkbox inputs as inline boxes */
.checkbox-group,
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);

  > .input-outer {
    --input-size: 1.25rem;
    border: 2px solid var(--color-black);
    min-inline-size: 2.75rem;
    padding-block: 0.75rem;
    padding-inline: 0.75rem 1rem;
    transition:
      0.2s background-color,
      0.2s color;

    &:has(:checked) {
      background-color: var(--color-black);
      color: var(--color-white);

      input {
        border-color: var(--color-success);
      }
    }

    &:has(input[type="radio"]) {
      padding-inline: 1rem;
    }
  }

  & .input-inner {
    gap: 0.625rem;
  }

  & input[type="radio"] {
    position: absolute;
    overflow: hidden;
    padding: 0;
    border: 0;
    margin: 0;
    block-size: auto;
    clip-path: inset(50%);
    inline-size: 1px;
    white-space: nowrap;
  }

  & label {
    align-self: center;
    font-size: var(--text-step--1);
    line-height: 1;
    padding-block-start: 0;

    &::after {
      position: absolute;
      content: "";
      inset: 0;
    }
  }
}

}
/* components/_checkbox-list-item.css */
@layer components {
.checkbox-list-item {
  display: flex;
  align-items: center;
  border: 2px solid var(--color-neutral-200);
  background-color: var(--color-white);
  box-shadow: 0 0.5rem 1.5rem 0 rgb(0 0 0 / 0.05);
  cursor: pointer;
  gap: var(--space-xs);
  min-block-size: 4.75rem;
  padding-block: var(--space-3xs);
  padding-inline: var(--space-s);
  transition:
    0.2s border-color,
    0.2s background-color;

  &:has(input:checked) {
    border-color: var(--color-black);
    background-color: var(--color-neutral-100);
  }
}

.checkbox-list-item__content {
  flex: 1;
  min-inline-size: 0;
}

}
/* components/_checkbox-list.css */
@layer components {
.checkbox-list {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: none;
  gap: var(--space-3xs);
  margin-block: calc(-1 * var(--space-2xs));
  mask-image: linear-gradient(
    to bottom,
    transparent,
    black var(--space-2xs),
    black calc(100% - var(--space-2xs)),
    transparent
  );
  max-block-size: var(--checkbox-list-max-height, 29rem);
  min-block-size: var(--checkbox-list-min-height, 12rem);
  overflow-y: auto;
  padding-block: var(--space-2xs);
}

}
/* components/_counter.css */
@layer components {
.counter {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.counter-input {
  -moz-appearance: textfield;
  appearance: textfield;
  inline-size: 6rem;
  min-inline-size: 0;
  text-align: center;

  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
    display: none;
  }
}

}
/* components/_frontpage-header.css */
@layer components {
html {
  --frontpage-header-height: clamp(3.75rem, 3.386rem + 1.82vw, 4.75rem);
}

.frontpage-header {
  position: sticky;
  z-index: 100;
  background-color: var(--color-white);
  inline-size: 100%;
  inset-block-start: 0;

  > .wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    block-size: var(--frontpage-header-height);
    gap: var(--space-m);
  }

  & svg {
    position: relative;
    block-size: calc(var(--frontpage-header-height) + 0.25rem);
    inline-size: auto;
    inset-block-start: 0.375rem;
  }
}

}
/* components/_info-card.css */
@layer components {
.info-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-xs);
  background-color: var(--color-white);
  gap: var(--space-2xs);
}

.info-card__label {
  display: flex;
  align-items: center;
  color: var(--color-neutral-600);
  font-size: var(--text-step--1);
  font-weight: var(--weight-medium);
  gap: var(--space-3xs);
  line-height: 1;

  > span {
    text-box: trim-both cap alphabetic;
  }

  > svg {
    block-size: 1.25em;
    inline-size: 1.25em;
  }
}

}
/* components/_match-card.css */
@layer components {
.match-card {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2xs);
  block-size: 100%;
  box-shadow: 0 0.5rem 1.5rem 0 rgb(25 0 12 / 0.1);
  gap: var(--space-2xs);

  &[data-highlight="true"] {
    border: 1px solid var(--color-purple-500);
    background: var(--color-neutral-100);

    @container (width <= 50rem) {
      background-color: rgb(255 255 255 / 0.5);
    }
  }

  > .badge {
    margin-inline-end: var(--space-3xs);
  }

  @container (width <= 50rem) {
    padding: var(--space-3xs);
    box-shadow: none;
  }
}

}
/* components/_match-row.css */
@layer components {
.match-row {
  display: grid;
  align-items: stretch;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;

  &[data-color="yellow"] {
    --icon-bg: var(--color-yellow-100);
    --icon-border: var(--color-yellow-500);
    --icon-color: var(--color-yellow-700);
    --icon-label: var(--color-yellow-900);
  }

  &[data-color="green"] {
    --icon-bg: var(--color-green-100);
    --icon-border: var(--color-green-500);
    --icon-color: var(--color-green-700);
    --icon-label: var(--color-green-900);
  }

  &[data-color="pink"] {
    --icon-bg: var(--color-pink-100);
    --icon-border: var(--color-pink-500);
    --icon-color: var(--color-pink-700);
    --icon-label: var(--color-pink-900);
  }

  &[data-color="purple"] {
    --icon-bg: var(--color-purple-100);
    --icon-border: var(--color-purple-500);
    --icon-color: var(--color-purple-700);
    --icon-label: var(--color-purple-900);
  }

  @container (width <= 50rem) {
    display: flex;
    flex-direction: column;
    padding: var(--space-3xs);
    border: 1px solid var(--icon-border, var(--color-neutral-200));
    background-color: var(--icon-bg, var(--color-white));
    box-shadow: 0 0.5rem 1.5rem 0 rgb(25 0 12 / 0.1);
    gap: var(--space-2xs);

    &:not([data-color]) .match-row__status {
      display: none;
    }
  }
}

.match-row__status {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--icon-label);
  font-size: var(--text-step--2);
  font-weight: var(--weight-medium);
  gap: var(--space-3xs);
  inline-size: 7.5rem;
  line-height: 1;
  text-align: center;

  @container (width <= 50rem) {
    flex-direction: row;
    align-items: center;
    align-self: center;
    inline-size: fit-content;

    > span {
      text-box: trim-both cap alphabetic;
    }
  }
}

.match-row__status-icon {
  --size: 2rem;
  --icon-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--icon-border);
  border-radius: 0.25rem;
  background-color: var(--icon-bg);
  block-size: var(--size);
  inline-size: var(--size);

  > svg {
    block-size: var(--icon-size);
    color: var(--icon-color);
    inline-size: var(--icon-size);
  }

  @container (width <= 50rem) {
    padding: 0;
    border: none;
    block-size: auto;
    inline-size: auto;
  }
}

.match-row__placeholder-button {
  padding: var(--space-2xs);
  border: 1px dashed var(--color-neutral-300);
  color: var(--color-neutral-500);
}

}
/* components/_match-table.css */
@layer components {
.match-table {
  display: grid;
  column-gap: var(--space-s);
  container-type: inline-size;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  row-gap: var(--space-3xs);
}

.match-table__header,
.match-table__content {
  display: grid;
  gap: inherit;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

.match-table__header {
  > p {
    color: var(--color-neutral-700);
    font-size: var(--text-step--1);
    font-weight: var(--weight-bold);
    justify-self: center;
    padding-block: var(--space-3xs);
    text-align: center;
  }

  > p:last-child {
    grid-column: 3;
  }

  @container (width <= 50rem) {
    display: none;
  }
}

.match-table__content {
  @container (width <= 50rem) {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
  }
}

.match-table__extend-button {
  grid-column: 1 / -1;
  margin-block-start: var(--space-2xs);
}

}
/* components/_person-card.css */
@layer components {
.person-card {
  --border: 1px solid var(--color-neutral-600);

  display: flex;
  flex-direction: column;
  border: var(--border);
}

.person-card__header {
  padding: var(--space-xs);
  background-color: var(--color-neutral-100);
}

.person-card__avatar {
  overflow: hidden;
  border-radius: 50%;
  background-color: var(--color-neutral-200);
  block-size: 3rem;
  inline-size: 3rem;
  object-fit: cover;
}

.person-card__identity {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-inline-size: 0;
}

.person-card__description {
  color: var(--color-neutral-600);
}

.person-card__contact {
  display: flex;
  flex-wrap: wrap;
  border-block-start: var(--border);
}

.person-card__contact-item {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  border-block-start: var(--border);
  border-inline-start: var(--border);
  color: inherit;
  font-size: var(--text-step--1);
  gap: var(--space-2xs);
  margin-block-start: -1px;
  margin-inline-start: -1px;
  min-inline-size: max-content;
  overflow-wrap: anywhere;
  padding-block: var(--space-2xs);
  padding-inline: var(--space-xs);
  text-decoration: none;

  > svg {
    --size: 1.25rem;
    block-size: var(--size);
    inline-size: var(--size);
  }
}

}
/* components/_rating-scale.css */
@layer components {
.rating-scale-outer {
  --block-size: 1.5rem;

  & label {
    font-weight: var(--weight-normal);
    text-align: center;
  }
}

.rating-scale {
  display: flex;
  align-items: flex-start;
  align-self: stretch;
  gap: var(--space-xs-s);

  > div {
    flex: 1;
  }
}

.rating-scale-input {
  appearance: none;
  inline-size: 100%;
  transition: box-shadow 0.2s;

  &::-webkit-slider-runnable-track {
    border: 2px solid var(--color-black);
    block-size: var(--block-size);
    cursor: pointer;
  }

  &::-moz-range-track {
    display: flex;
    align-items: end;
    border: 2px solid var(--color-black);
    block-size: var(--block-size);
    cursor: pointer;
  }

  &::-webkit-slider-thumb {
    border-radius: 0;
    appearance: none;
    background-color: var(--color-black);
    block-size: calc(var(--block-size) - 4px);
    cursor: grab;
    inline-size: calc(100% / var(--score-count));
  }

  &::-moz-range-thumb {
    border: none;
    border-radius: 0;
    appearance: none;
    background-color: var(--color-black);
    block-size: var(--block-size);
    cursor: grab;
    inline-size: calc(100% / var(--score-count));
  }

  &:active::-webkit-slider-thumb {
    cursor: grabbing;
  }
}

.rating-scale__label {
  display: inline-flex;
  align-items: center;
  block-size: var(--block-size);
  font-size: var(--text-step--1);
  inline-size: 12ch;
  line-height: var(--line-height-tight);
  text-wrap: balance;

  &:first-child {
    justify-content: end;
    text-align: end;
  }
}

.rating-scale__ticks {
  display: flex;
  inline-size: 100%;
  inset-block-end: calc(var(--block-size) + var(--inner-gap));
  pointer-events: none;

  > span {
    display: inline-block;
    flex: 1;
    font-weight: var(--weight-normal);
    text-align: center;
  }
}

}
/* components/_stat-card.css */
@layer components {
.stat-card {
  --icon-wrapper-size: 3rem;
  --icon-size: 1.5rem;

  display: grid;
  padding: var(--space-m);
  gap: var(--space-xs);
  grid-template-columns: minmax(0, 1fr) var(--icon-wrapper-size);

  /*"pink" | "purple" | "blue" | "green"*/
  &[data-icon-theme="pink"] {
    --icon-gradient-start: var(--color-pink-500);
    --icon-gradient-end: var(--color-pink-700);
  }

  &[data-icon-theme="purple"] {
    --icon-gradient-start: var(--color-purple-500);
    --icon-gradient-end: var(--color-purple-700);
  }

  &[data-icon-theme="blue"] {
    --icon-gradient-start: var(--color-blue-500);
    --icon-gradient-end: var(--color-blue-700);
  }

  &[data-icon-theme="green"] {
    --icon-gradient-start: var(--color-green-500);
    --icon-gradient-end: var(--color-green-700);
  }
}

.stat-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background-image: linear-gradient(
    to bottom right,
    var(--icon-gradient-start),
    var(--icon-gradient-end)
  );
  block-size: var(--icon-wrapper-size);
  inline-size: var(--icon-wrapper-size);

  > svg {
    block-size: var(--icon-size);
    color: var(--color-white);
    inline-size: var(--icon-size);
  }
}

.stat-card__subline {
  font-weight: var(--weight-semibold);
  grid-column: 1 / -1;
  line-height: 1;

  &[data-color="success"] {
    color: var(--color-success);
  }

  &[data-color="error"] {
    color: var(--color-error);
  }
}

}
/* components/_two-factor-input.css */
@layer components {
.two-factor-input {
  block-size: 4.75rem;
  font-size: var(--text-step-2);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-bold);
  text-align: center;
}

}
/* components/_user-identity.css */
@layer components {
.user-identity {
  --avatar-size: 2.25rem;
  display: flex;
  align-items: center;
  padding: 0.125rem;
  gap: var(--space-2xs);
  text-align: start;

  &[data-size="large"] {
    --avatar-size: 3rem;
  }
}

.user-identity__avatar,
.user-identity__avatar-fallback {
  border: 1px solid var(--color-neutral-200);
  border-radius: 50%;
  background-color: var(--color-neutral-200);
  block-size: var(--avatar-size);
  inline-size: var(--avatar-size);
}

.user-identity__avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;

  > svg {
    --size: 1.5rem;
    block-size: var(--size);
    color: var(--color-neutral-500);
    inline-size: var(--size);
  }
}

.user-identity__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
  min-inline-size: 0;

  /* User Name */
  > span:first-child {
    overflow: hidden;
    inline-size: 100%;
    line-height: 1.4;
    min-inline-size: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  > .badge {
    margin-block-start: 0.25rem;
  }

  @media (width <= 40em) {
    .frontpage-header & {
      position: absolute;
      overflow: hidden;
      padding: 0;
      border: 0;
      margin: 0;
      block-size: auto;
      clip-path: inset(50%);
      inline-size: 1px;
      white-space: nowrap;
    }
  }
}

}
/* components/_user-list-card.css */
@layer components {
.user-list-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: var(--space-xs);
}

.user-list-card__header {
  display: flex;
  flex-direction: column;
  padding: var(--space-s);
  border-block-end: 1px solid var(--color-neutral-200);
  gap: var(--space-3xs);
}

.user-list-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-block-start: calc(var(--space-s) * -1);
  mask-image: linear-gradient(
    to bottom,
    transparent,
    black var(--space-s),
    black calc(100% - var(--space-s)),
    transparent
  );
  max-block-size: calc(12.5rem + 4 * var(--space-s));
  overflow-y: auto;
  padding-block: var(--space-s);
  padding-inline: var(--space-s);
}

}
/* components/_user-menu.css */
@layer components {
.user-menu-wrapper {
  position: relative;
}

.user-menu-trigger {
  anchor-name: --user-menu-trigger;
  cursor: pointer;
}

.user-menu {
  --initial-translate: -0.5rem;

  overflow: visible;
  opacity: 0;
  padding-block: var(--space-3xs);
  padding-inline: 0;
  transition:
    display 0.2s allow-discrete,
    opacity 0.2s,
    overlay 0.2s allow-discrete,
    translate 0.2s;
  translate: 0 var(--initial-translate);

  &:popover-open {
    opacity: 1;
    translate: 0 0;

    @starting-style {
      opacity: 0;
      translate: 0 var(--initial-translate);
    }
  }

  .app-header & {
    --initial-translate: 0.5rem;
  }

  @supports (anchor-name: --any) {
    margin-block-start: var(--space-3xs);
    min-inline-size: anchor-size(width);
    position-anchor: --user-menu-trigger;
    position-area: bottom span-right;
    position-try-fallbacks: flip-block;

    .frontpage-header & {
      margin-inline-end: var(--space-s);
    }
  }

  @supports not (anchor-name: --any) {
    position: fixed;
    inset: auto;

    .frontpage-header & {
      --header-width: min(
        var(--wrapper-max, var(--_wrapper-max-default)),
        100%
      );
      inset-block-start: calc(var(--frontpage-header-height) - 0.25rem);
      inset-inline-end: max((100svi - var(--header-width)) / 2, 1rem);
    }

    .app-header & {
      inline-size: calc(var(--sidebar-width) - 2rem);
      inset-block-end: calc(2.5rem + var(--space-xs-s) + var(--space-xl));
      inset-inline-start: 1rem;
    }
  }

  /* Due to popover + @starting-style + transition bugs on safari, we disable the transition for now */
  @supports (font: -apple-system-body) {
    transition: none;
  }

  > ul {
    display: flex;
    flex-direction: column;
  }

  & a {
    display: block;
    font-size: var(--text-step-0);
    font-weight: var(--weight-bold);
    line-height: 1;
    min-inline-size: 14ch;
    padding-block: var(--space-2xs);
    padding-inline: var(--space-s);
    text-decoration: none;
    transition:
      0.2s box-shadow,
      0.2s background-color;

    &:is(:hover, :focus-visible) {
      background-color: var(--color-neutral-200);
    }
  }
}

}
/* components/_user-table.css */
@layer components {
.user-table-wrapper {
  overflow-x: auto;
}

.user-table {
  border-collapse: collapse;
  inline-size: 100%;
  text-align: start;

  th,
  td {
    padding-block: var(--space-2xs);
    padding-inline: var(--space-xs);
    vertical-align: middle;
  }

  thead {
    border-block-end: 1px solid var(--color-neutral-200);

    th {
      background-color: var(--color-neutral-200);
      color: var(--color-purple-900);
      font-size: var(--text-step--1);
      font-weight: var(--weight-semibold);
      text-align: start;

      &.user-table__actions-head {
        text-align: end;
      }
    }
  }

  tbody tr {
    &:not(:last-child) {
      border-block-end: 1px solid var(--color-neutral-200);
    }
  }
}

.user-table__actions {
  text-align: end;

  .cluster {
    justify-content: flex-end;
  }
}

}
/* components/_view-header.css */
@layer components {
.view-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: var(--space-2xs);
  row-gap: var(--space-xs);
}

.view-header__headline {
  .view-header__back-link + & {
    margin-block-start: 0.25rem;
  }
}

.view-header__subline {
  color: var(--color-neutral-600);
  font-size: var(--text-step-0);
  margin-block-start: 0.25em;
  max-inline-size: 65ch;
  text-wrap: balance;
}

.view-header__back-link {
  margin-inline-start: -1rem;
}

}

/* APP-SPECIFIC — components with no counterpart in the design prototype. Keep this list short and
   move anything the prototype later designs into ./components/ instead. */
/* app/_dialog.css */
@layer components {
/* App-specific: the design prototype has no modal, so this is built from its own tokens rather than
   ported. Keep it minimal – a centred panel and a dimmed backdrop. */

.dialog {
  --dialog-max: 34rem;

  border: 0;
  margin: auto;
  padding: 0;
  background: transparent;
  inline-size: min(100% - var(--space-s), var(--dialog-max));
  max-block-size: min(85dvh, 48rem);

  &::backdrop {
    background: rgb(0 0 0 / 0.5);
  }
}

.dialog__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  max-block-size: inherit;
  overflow-y: auto;
}

/* A card that is itself the control: the submit button is stretched across it, the same way
   .batch-card stretches its link. */
.choice-card {
  position: relative;
  transition: 0.2s background-color;

  > button {
    position: absolute;
    border: 0;
    background: transparent;
    cursor: pointer;
    inset: 0;
  }

  &:has(> button:hover),
  &:has(> button:focus-visible) {
    background-color: var(--color-neutral-100);
  }

  &:has(> button:focus-visible) {
    outline: 2px solid var(--color-black);
    outline-offset: 2px;
  }
}

}
/* app/_people-picker.css */
@layer components {
/* The people picker (admin/batches/_people_picker): heading, search, the select buttons, the list
   and the submit row. Spaced with gaps rather than a stack's margins, so the dialog below can lay
   it out as a grid. */
.people-picker,
.people-picker__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

/* Inside the dialog there is one scrolling area, not two: the list takes the height the dialog has
   left and scrolls on its own, while the heading, search and buttons above it and the submit row
   below stay put. The dialog itself never scrolls.

   A grid with minmax(0, 1fr) rather than flex shrinking: the list is a fieldset, which browsers do
   not shrink reliably, so the plain wrapper around it is what scrolls. The standalone page (no
   JavaScript) keeps the list's own fixed height. */
.dialog__content:has(.people-picker__form) {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;

  .people-picker {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    min-block-size: 0;
  }

  .people-picker__form {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-block-size: 0;
  }

  .people-picker__list {
    min-block-size: 0;
    overflow-y: auto;
  }

  .checkbox-list {
    --checkbox-list-max-height: none;
    --checkbox-list-min-height: 0;

    margin-block: 0;
    mask-image: none;
    overflow: visible;
  }
}

/* The submit row is the dialog's footer: a rule across the full width of the card sets it apart
   from the list scrolling above it, and the list runs right up to that rule – the grid's gap would
   otherwise leave a strip of nothing between where the scrolling ends and the line. */
.dialog__content:has(.people-picker__form) .people-picker__form > .button-row {
  border-block-start: 1px solid var(--color-neutral-200);
  margin-block-start: calc(-1 * var(--space-s));
  margin-inline: calc(-1 * var(--space-s));
  padding-block-start: var(--space-s);
  padding-inline: var(--space-s);
}

}
/* app/_question-options.css */
@layer components {
/* The options of a questionnaire's multi_select. The prototype's .checkbox-list is a scrolling box,
   built for picking people out of a long list – in a questionnaire that hides options below the fold
   of a small box, and someone answering "which topics are on your mind" never sees half of them.
   So every option is on the page, in as many columns as fit, and nothing scrolls or fades. */
.checkbox-list.question-options {
  --checkbox-list-max-height: none;
  --checkbox-list-min-height: 0;

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  margin-block: 0;
  mask-image: none;
  overflow: visible;
  padding-block: 0;

  .checkbox-list-item {
    min-block-size: 3rem;
  }
}

}
/* app/_rating-scale-poles.css */
@layer components {
/* A scale's question reads like every other question: bold and on the left. The prototype centres it
   in normal weight, which made the scales look like a different kind of form. */
.rating-scale-outer label {
  font-weight: bold;
  text-align: start;
}

/* What the two ends of a scale mean, under a slider that keeps the full width. The prototype's
   .rating-scale__label puts them beside the slider instead, which squeezes it, and pairs them with
   numbers that mean nothing on a scale between two positions – so where a scale has ends, they
   replace the ticks (shared/_question_field). */
.rating-scale__poles {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-step--1);
  gap: var(--space-s);
  line-height: var(--line-height-tight);
  margin-block-start: var(--inner-gap);

  > span:last-child {
    text-align: end;
  }
}

}
/* app/_skip-link.css */
@layer components {
/* App-specific: the design prototype has no skip link, because it has no signed-in shell to skip
   past. Off-screen until focused, then pinned to the top left – deliberately not display:none,
   which would take it out of the tab order and defeat the point. */
.skip-link {
  position: absolute;
  z-index: 10;
  padding: var(--space-2xs) var(--space-xs);
  border: 1px solid var(--color-black);
  background-color: var(--color-white);
  color: var(--color-black);
  inset-block-start: var(--space-2xs);
  inset-inline-start: var(--space-2xs);
  translate: 0 -200%;
  transition: translate 0.15s;
}

.skip-link:focus-visible {
  translate: 0;
}

}
/* app/_hidden.css */
@layer utils {
/* App-specific, and a bug fix rather than a design decision.

   The browser hides [hidden] through `display: none` in its own stylesheet, which any author rule
   setting `display` overrides – and .checkbox-list-item sets `display: flex`. So the picker's search
   set the attribute, assistive technology treated the row as hidden, and it stayed on screen for
   everyone else. Found by spec/system/mentor_picker_spec.rb, which is the only kind of test that
   could have: the markup was right, only the rendering was not.

   Scoped by element rather than declared !important: specificity is enough here, and a blanket
   override would be a rule nobody could work around later. */
[hidden] {
  display: none;
}

}
/* app/_flash.css */
@layer utils {
/* A notice belongs to the page beneath it, so it keeps a small distance from it – the app shell's
   main is a stack-m, whose gap is meant for sections and made the notice float on its own. The
   frontpage's main is no stack at all, so without this the notice touched the heading. In the utils
   layer so it outranks the stack's own spacing. */
.flash + * {
  margin-block-start: var(--space-s);
}

}
/* app/_badge-shape.css */
@layer utils {
/* One shape for every badge: fully rounded. The prototype rounds only its small size and gives the
   default one square-ish corners, so a status looked different depending on where it appeared. The
   size still differs – a status is the default size, a tag the small one – the shape does not. In
   the utils layer so it outranks the size rules, which are more specific. */
.badge {
  border-radius: 3rem;
}

}
/* app/_match-row-send.css */
@layer components {
/* The send button beside a mentor card. The design prototype has no counterpart – its match row
   ends at the mentor card – so this lives here rather than in components/, per CLAUDE.md.

   It sits inside the mentor column instead of getting a fourth grid column, because .match-table
   defines three and the header labels are positioned against them. */
.match-row__mentor {
  display: flex;
  align-items: stretch;
  gap: var(--space-3xs);

  /* The card or the "add a mentor" placeholder, whichever the row has. */
  > :first-child {
    flex: 1;
    min-inline-size: 0;
  }
}

/* Always present, empty or not, so every card in this column ends at the same edge. */
.match-row__send-slot {
  display: flex;
  flex: none;
  inline-size: 2.5rem;
}

/* The stretch has to sit on the form, because that is the flex item – button_to wraps the button in
   one, and stretching the button alone leaves it at its own intrinsic height. A fixed width rather
   than an aspect-ratio: the row's height comes from the card, and a ratio on a stretched item sizes
   itself off the wrong axis. */
.match-row__send {
  display: flex;
  flex: 1;

  > .button {
    flex: 1;
    padding: 0;
  }
}

/* The prototype's .match-card spaces its children apart, which leaves a badge floating in the middle
   when actions follow it. Pushed right instead, so a tag sits at the same edge in every card whether
   or not that card has actions. */
.match-card > .badge {
  margin-inline-start: auto;
}

/* The batch page stacks its sections with plain margins; this frame follows the row of actions,
   which the design prototype does not have, so the gap has to be stated here. */
.matching-frame:not(:empty) {
  display: block;
  margin-block-start: var(--space-m);
}

/* button_to wraps its button in a form, so in a stretched row it is the form that gets the column
   and the button inside keeps its own width. The design prototype has no forms in a button row, so
   it never had to say this. Same cause as .match-row__send above. */
.button-row[data-justify="stretch"] > .button_to {
  display: flex;

  > .button {
    flex: 1;
  }
}

/* A status standing where a row of buttons would otherwise be: same width, same height, so a card
   keeps its shape whether it is asking for an answer or reporting one. The height mirrors the
   button's min-block-size in components/base/_button.css. */
.status-block {
  justify-content: center;
  inline-size: 100%;
  min-block-size: 3rem;
}

/* Separates one mentee from the next inside the shared chemistry-check card. The reset leaves hr
   unstyled, and the design prototype only ever shows a single mentee there. */
.chemistry-check__rule {
  border: 0;
  border-block-start: 1px solid var(--color-neutral-200);
  margin-block: var(--space-2xs);
}

/* Name and state on one line inside a batch card. The design prototype lists names only, so it has
   nothing to say about a badge beside them. */
.batch-card__pairing {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2xs);

  /* The state sits beside the name while it fits and drops underneath when it does not. A state can
     be two badges – accepted, and what has happened since – and breaking "Mentoring has begun"
     across two lines inside its own pill reads worse than moving the pair down a line. */
  > dl {
    flex: none;
  }

  & .badge {
    white-space: nowrap;
  }
}

}
/* app/_language-switcher.css */
@layer components {
/* The language switcher, which the design prototype has no counterpart for.

   Inside the user menu it sits in a row of its own, and that menu styles every link as a full-width
   menu item – 14ch wide, bold, with its own padding (components/_user-menu.css). A switcher built
   from links came out as one oversized grey block with the second language pushed out of the menu.
   It is a form now, for a different reason – switching writes the choice down – and the buttons are
   stripped back to look like the plain text they replace. The row takes the menu's own inline
   padding, which is what lines it up with "My profile" and "Log out" above and below it.

   Only inside the menu: the frontpage header renders the same partial without a menu around it. */
.user-menu .language-switcher {
  /* Set outright: the partial gives the cluster its gap as an inline style, which a variable set
     here could not override. */
  gap: var(--space-3xs) var(--space-xs);

  padding-block: var(--space-3xs);
  padding-inline: var(--space-s);

  /* The label on a line of its own and the two languages beneath it. On one line, three sizes and
     weights side by side – small grey label, bold current language, underlined other one – read
     as three unrelated things in a menu this narrow. */
  .language-switcher__label {
    flex-basis: 100%;
  }

  & button {
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: var(--text-step--1);
    padding: 0;
    text-decoration: underline;
  }
}

}
/* app/_batch-message.css */
@layer components {
/* The "email to the batch" form, which the design prototype has no counterpart for. */

/* Not .checkbox-list: that is the picker for long lists of people. It masks its own top and bottom
   edge so the list fades where it scrolls – which greyed out the legend sitting at the top – and it
   reserves 12rem whether or not there is anything to scroll. Two tick boxes need neither. */
.audience-list {
  display: flex;
  flex-direction: column;
  border: 0;
  gap: var(--space-3xs);
  padding: 0;

  > legend {
    margin-block-end: var(--space-3xs);
  }
}

/* `field-sizing: content` lets the box grow with the text, but it starts one line high – too small
   to write a message in, and the rows attribute has no say once field-sizing is on. */
.batch-message-body textarea {
  min-block-size: 6rem;
}

}
/* app/_avatar-fit.css */
@layer components {
/* The design prototype draws the avatar as a fixed circle and assumes a square image – it only ever
   had square mock data. A portrait photograph in that box is squashed, and a face is the one thing
   people notice being the wrong shape. The seeds crop square, so this matters the day somebody can
   upload one. */
.user-identity__avatar {
  object-fit: cover;
}

}
/* app/_status-line.css */
@layer components {
/* A short message next to its icon – waiting for a language model, a failed attempt, a note – and
   the turning indicator used while waiting. Shared by the bio step and the evaluation summary. */
.status-line {
  --cluster-alignment: flex-start;
  --cluster-gap: var(--space-2xs);

  /* Icon and text stay side by side. As a wrapping cluster, a message longer than its line put the
     text on a line of its own below the icon; this way the text wraps beside it instead. */
  flex-wrap: nowrap;

  > svg {
    flex: none;
    /* Level with the first line of text rather than the middle of the whole message. */
    margin-block-start: calc((1lh - 1em) / 2);
  }
}

.spinner {
  animation: spinner-turn 1s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation-duration: 3s;
  }
}

@keyframes spinner-turn {
  to {
    rotate: 1turn;
  }
}

}
/* app/_site-footer.css */
@layer components {
/* The last line of every page (layouts/_footer). Both layouts are at least as tall as the window and
   give the main content whatever is left over, so the footer sits at the bottom of the window on a
   short page and after the content on a long one. */
/* Set like the sidebar's last line (.app-header__notice) – same size, colour, rule and padding – so
   that on a wide screen the two read as one line across the page, their rules level. */
.site-footer {
  border-block-start: 1px solid var(--color-neutral-200);
  color: var(--color-neutral-700);
  font-size: var(--text-step--2);

  a {
    color: inherit;
  }
}

.site-footer__inner {
  --cluster-gap: var(--space-m);
  --cluster-gap-vertical: var(--space-3xs);

  padding-block: var(--space-2xs-xs);
  padding-inline: var(--space-s);

  > nav {
    --cluster-gap: var(--space-s);
  }
}

/* Public pages: full width, the line from edge to edge and the text on the same wrapper as the
   header above – the copyright under the logo, the links under the language switcher. */
.frontpage-layout {
  display: flex;
  flex-direction: column;
  min-block-size: 100dvh;
  padding-block-end: 0;

  > main {
    flex-grow: 1;
    padding-block-end: var(--space-2xl);
  }

  .site-footer__inner {
    padding-inline: 0;
  }
}

/* The signed-in shell: below the content column, never under the sidebar. On a wide screen the
   sidebar spans both rows, so it stays put beside the footer; on a narrow one it is a popover and
   the page is a plain column. */
.app-layout {
  display: flex;
  flex-direction: column;
  min-block-size: 100dvh;

  > main {
    flex-grow: 1;
  }

  @media (width >= 64em) {
    display: grid;
    grid-template-rows: 1fr auto;

    > .app-header {
      grid-column: 1;
      grid-row: 1 / -1;
      /* A popover, which the browser sizes to its content; the layout means it to fill its 15rem
         column, or the footer's line starts in mid-air beside it. */
      inline-size: auto;
    }

    > main,
    > .site-footer {
      grid-column: 2;
    }

    .site-footer__inner {
      max-inline-size: 100rem;
      padding-inline: clamp(1.5rem, 0.955rem + 2.73vw, 3rem);
    }
  }
}

}
/* app/_evaluation-summary.css */
@layer components {
/* Not in the design. The evaluation summary reads like a document, so it keeps to one column at a
   reading width – the figures, the sections and the line above them share it, rather than text of
   65 characters sitting in boxes as wide as the page. */
#evaluation_summary {
  display: block;
  max-inline-size: calc(65ch + 2 * var(--space-m));
}

.evaluation-summary__section {
  padding: var(--space-m);
}

/* A key figure: the fact itself – value and what it counts – and, set apart below it, why it
   matters. The fact is Ruby's, the explanation is the model's, and the grey band keeps the two
   from reading as one. */
.key-figure {
  display: flex;
  flex-direction: column;
}

.key-figure__fact {
  display: flex;
  flex-direction: column;
  padding: var(--space-s);
  gap: var(--space-3xs);
}

.key-figure__explanation {
  flex-grow: 1;
  padding: var(--space-xs) var(--space-s);
  background-color: var(--color-neutral-100);
  border-block-start: 1px solid var(--color-neutral-200);
}

/* Text rendered from markdown (MarkdownHelper). The reset takes every element's padding away, which
   left list bullets hanging outside the text into the box's margin; here a list is indented by its
   markers' width, and its items get a little air. */
.markdown {
  :where(ul, ol) {
    padding-inline-start: 1.25em;
  }

  li + li {
    margin-block-start: var(--space-3xs);
  }
}

}
/* app/_bio-step.css */
@layer components {
/* Step four of the mentee application. Its waiting and failure messages use app/_status-line.css. */

/* A custom element is inline by default, and the card and the buttons inside it need the stack's
   spacing like on every other step. */
#bio_step {
  display: block;
}

.bio-step__header {
  --cluster-alignment: center;
}

/* Secondary to the field it fills, so smaller than the buttons that move between steps. */
.bio-step__suggest {
  min-block-size: 2.25rem;
  padding-inline: 1rem;
}

}
/* app/_button-disabled.css */
@layer components {
/* The prototype's buttons have no disabled look, so a disabled one read as ready to press. Turbo
   disables a form's submit button while it is sending, and the bio step disables every button while
   a suggestion is written. A link has no disabled state of its own, so aria-disabled stands in for
   it and pointer-events keeps it from being followed. */
.button:is(:disabled, [aria-disabled="true"]) {
  cursor: not-allowed;
  opacity: 0.5;
}

a.button[aria-disabled="true"] {
  pointer-events: none;
}

}
/* app/_user-table-badge.css */
@layer components {
/* A status is read as one unit. In a narrow actions column the prototype's badge wraps its own
   text, and "Evaluation open" broke into two lines inside its box; it keeps its width instead and
   the other columns give way. */
.user-table .badge {
  white-space: nowrap;
}

}
/* app/_stat-card-flat.css */
@layer components {
/* The prototype draws the dashboard's stat icons on a rounded tile with a colour gradient – the
   only gradient and the only rounded tile on any page. Flat and square like everything else, in
   the darker of the two colours so the white icon keeps its contrast. */
.stat-card__icon {
  border-radius: 0;
  background-color: var(--icon-gradient-end);
  background-image: none;
}

}

/* UTILS */
/* utils/_button-row.css */
@layer utils {
.button-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-s);

  > :last-child:only-child {
    margin-inline-start: auto;
  }

  &[data-justify="stretch"] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  }
}

}
/* utils/_font-sizes.css */
@layer utils {
.text-step--2 {
  font-size: var(--text-step--2);
}

.text-step--1 {
  font-size: var(--text-step--1);
}

.text-step-0 {
  font-size: var(--text-step-0);
}

.text-step-1 {
  font-size: var(--text-step-1);
}

.text-step-2 {
  font-size: var(--text-step-2);
}

.text-step-3 {
  font-size: var(--text-step-3);
}

.text-step-4 {
  font-size: var(--text-step-4);
}

.text-step-5 {
  font-size: var(--text-step-5);
}

.text-step-6 {
  font-size: var(--text-step-6);
}

}
/* utils/_font-weight.css */
@layer utils {
.weight-normal {
  font-weight: var(--weight-normal);
}

.weight-medium {
  font-weight: var(--weight-medium);
}

.weight-semibold {
  font-weight: var(--weight-semibold);
}

.weight-bold {
  font-weight: var(--weight-bold);
}

.weight-heavy {
  font-weight: var(--weight-heavy);
}

}
/* utils/_line-height.css */
@layer utils {
.leading-flat {
  line-height: 1;
}

.leading-tight {
  line-height: var(--line-height-tight);
}

.leading-snug {
  line-height: var(--line-height-snug);
}

.leading-normal {
  line-height: var(--line-height-normal);
}

.leading-relaxed {
  line-height: var(--line-height-relaxed);
}

.leading-loose {
  line-height: var(--line-height-loose);
}

}
/* utils/_prose.css */
@layer utils {
.prose {
  max-inline-size: 65ch;
}

}
/* utils/_spacing.css */
@layer utils {
.p-3xs {
  padding: var(--space-3xs);
}

.pt-3xs {
  padding-block-start: var(--space-3xs);
}

.pb-3xs {
  padding-block-end: var(--space-3xs);
}

.py-3xs {
  padding-block: var(--space-3xs);
}

.px-3xs {
  padding-inline: var(--space-3xs);
}

.p-2xs {
  padding: var(--space-2xs);
}

.pt-2xs {
  padding-block-start: var(--space-2xs);
}

.pb-2xs {
  padding-block-end: var(--space-2xs);
}

.py-2xs {
  padding-block: var(--space-2xs);
}

.px-2xs {
  padding-inline: var(--space-2xs);
}

.p-xs {
  padding: var(--space-xs);
}

.pt-xs {
  padding-block-start: var(--space-xs);
}

.pb-xs {
  padding-block-end: var(--space-xs);
}

.py-xs {
  padding-block: var(--space-xs);
}

.px-xs {
  padding-inline: var(--space-xs);
}

.p-s {
  padding: var(--space-s);
}

.pt-s {
  padding-block-start: var(--space-s);
}

.pb-s {
  padding-block-end: var(--space-s);
}

.py-s {
  padding-block: var(--space-s);
}

.px-s {
  padding-inline: var(--space-s);
}

.p-m {
  padding: var(--space-m);
}

.pt-m {
  padding-block-start: var(--space-m);
}

.pb-m {
  padding-block-end: var(--space-m);
}

.py-m {
  padding-block: var(--space-m);
}

.px-m {
  padding-inline: var(--space-m);
}

.p-l {
  padding: var(--space-l);
}

.pt-l {
  padding-block-start: var(--space-l);
}

.pb-l {
  padding-block-end: var(--space-l);
}

.py-l {
  padding-block: var(--space-l);
}

.px-l {
  padding-inline: var(--space-l);
}

.p-xl {
  padding: var(--space-xl);
}

.pt-xl {
  padding-block-start: var(--space-xl);
}

.pb-xl {
  padding-block-end: var(--space-xl);
}

.py-xl {
  padding-block: var(--space-xl);
}

.px-xl {
  padding-inline: var(--space-xl);
}

.p-2xl {
  padding: var(--space-2xl);
}

.pt-2xl {
  padding-block-start: var(--space-2xl);
}

.pb-2xl {
  padding-block-end: var(--space-2xl);
}

.py-2xl {
  padding-block: var(--space-2xl);
}

.px-2xl {
  padding-inline: var(--space-2xl);
}

.p-3xl {
  padding: var(--space-3xl);
}

.pt-3xl {
  padding-block-start: var(--space-3xl);
}

.pb-3xl {
  padding-block-end: var(--space-3xl);
}

.py-3xl {
  padding-block: var(--space-3xl);
}

.px-3xl {
  padding-inline: var(--space-3xl);
}

.p-3xs-2xs {
  padding: var(--space-3xs-2xs);
}

.pt-3xs-2xs {
  padding-block-start: var(--space-3xs-2xs);
}

.pb-3xs-2xs {
  padding-block-end: var(--space-3xs-2xs);
}

.py-3xs-2xs {
  padding-block: var(--space-3xs-2xs);
}

.px-3xs-2xs {
  padding-inline: var(--space-3xs-2xs);
}

.p-2xs-xs {
  padding: var(--space-2xs-xs);
}

.pt-2xs-xs {
  padding-block-start: var(--space-2xs-xs);
}

.pb-2xs-xs {
  padding-block-end: var(--space-2xs-xs);
}

.py-2xs-xs {
  padding-block: var(--space-2xs-xs);
}

.px-2xs-xs {
  padding-inline: var(--space-2xs-xs);
}

.p-xs-s {
  padding: var(--space-xs-s);
}

.pt-xs-s {
  padding-block-start: var(--space-xs-s);
}

.pb-xs-s {
  padding-block-end: var(--space-xs-s);
}

.py-xs-s {
  padding-block: var(--space-xs-s);
}

.px-xs-s {
  padding-inline: var(--space-xs-s);
}

.p-s-m {
  padding: var(--space-s-m);
}

.pt-s-m {
  padding-block-start: var(--space-s-m);
}

.pb-s-m {
  padding-block-end: var(--space-s-m);
}

.py-s-m {
  padding-block: var(--space-s-m);
}

.px-s-m {
  padding-inline: var(--space-s-m);
}

.p-m-l {
  padding: var(--space-m-l);
}

.pt-m-l {
  padding-block-start: var(--space-m-l);
}

.pb-m-l {
  padding-block-end: var(--space-m-l);
}

.py-m-l {
  padding-block: var(--space-m-l);
}

.px-m-l {
  padding-inline: var(--space-m-l);
}

.p-l-xl {
  padding: var(--space-l-xl);
}

.pt-l-xl {
  padding-block-start: var(--space-l-xl);
}

.pb-l-xl {
  padding-block-end: var(--space-l-xl);
}

.py-l-xl {
  padding-block: var(--space-l-xl);
}

.px-l-xl {
  padding-inline: var(--space-l-xl);
}

.p-xl-2xl {
  padding: var(--space-xl-2xl);
}

.pt-xl-2xl {
  padding-block-start: var(--space-xl-2xl);
}

.pb-xl-2xl {
  padding-block-end: var(--space-xl-2xl);
}

.py-xl-2xl {
  padding-block: var(--space-xl-2xl);
}

.px-xl-2xl {
  padding-inline: var(--space-xl-2xl);
}

.p-2xl-3xl {
  padding: var(--space-2xl-3xl);
}

.pt-2xl-3xl {
  padding-block-start: var(--space-2xl-3xl);
}

.pb-2xl-3xl {
  padding-block-end: var(--space-2xl-3xl);
}

.py-2xl-3xl {
  padding-block: var(--space-2xl-3xl);
}

.px-2xl-3xl {
  padding-inline: var(--space-2xl-3xl);
}

:where(.stack-3xs) > * + * {
  --stack-space: var(--space-3xs);
  margin-block-start: var(--stack-space, 1rem);
}

:where(.stack-2xs) > * + * {
  --stack-space: var(--space-2xs);
  margin-block-start: var(--stack-space, 1rem);
}

:where(.stack-xs) > * + * {
  --stack-space: var(--space-xs);
  margin-block-start: var(--stack-space, 1rem);
}

:where(.stack-s) > * + * {
  --stack-space: var(--space-s);
  margin-block-start: var(--stack-space, 1rem);
}

:where(.stack-m) > * + * {
  --stack-space: var(--space-m);
  margin-block-start: var(--stack-space, 1rem);
}

:where(.stack-l) > * + * {
  --stack-space: var(--space-l);
  margin-block-start: var(--stack-space, 1rem);
}

:where(.stack-xl) > * + * {
  --stack-space: var(--space-xl);
  margin-block-start: var(--stack-space, 1rem);
}

:where(.stack-2xl) > * + * {
  --stack-space: var(--space-2xl);
  margin-block-start: var(--stack-space, 1rem);
}

:where(.stack-3xl) > * + * {
  --stack-space: var(--space-3xl);
  margin-block-start: var(--stack-space, 1rem);
}

:where(.stack-3xs-2xs) > * + * {
  --stack-space: var(--space-3xs-2xs);
  margin-block-start: var(--stack-space, 1rem);
}

:where(.stack-2xs-xs) > * + * {
  --stack-space: var(--space-2xs-xs);
  margin-block-start: var(--stack-space, 1rem);
}

:where(.stack-xs-s) > * + * {
  --stack-space: var(--space-xs-s);
  margin-block-start: var(--stack-space, 1rem);
}

:where(.stack-s-m) > * + * {
  --stack-space: var(--space-s-m);
  margin-block-start: var(--stack-space, 1rem);
}

:where(.stack-m-l) > * + * {
  --stack-space: var(--space-m-l);
  margin-block-start: var(--stack-space, 1rem);
}

:where(.stack-l-xl) > * + * {
  --stack-space: var(--space-l-xl);
  margin-block-start: var(--stack-space, 1rem);
}

:where(.stack-xl-2xl) > * + * {
  --stack-space: var(--space-xl-2xl);
  margin-block-start: var(--stack-space, 1rem);
}

:where(.stack-2xl-3xl) > * + * {
  --stack-space: var(--space-2xl-3xl);
  margin-block-start: var(--stack-space, 1rem);
}

}
/* utils/_sr-only.css */
@layer utils {
.sr-only {
  position: absolute;
  overflow: hidden;
  padding: 0;
  border: 0;
  margin: 0;
  block-size: auto;
  clip-path: inset(50%);
  inline-size: 1px;
  white-space: nowrap;
}

}
/* utils/_text-color.css */
@layer utils {
.text-black {
  color: var(--color-black);
}

.text-white {
  color: var(--color-white);
}

.text-neutral-50 {
  color: var(--color-neutral-50);
}

.text-neutral-100 {
  color: var(--color-neutral-100);
}

.text-neutral-200 {
  color: var(--color-neutral-200);
}

.text-neutral-300 {
  color: var(--color-neutral-300);
}

.text-neutral-400 {
  color: var(--color-neutral-400);
}

.text-neutral-500 {
  color: var(--color-neutral-500);
}

.text-neutral-600 {
  color: var(--color-neutral-600);
}

.text-neutral-700 {
  color: var(--color-neutral-700);
}

.text-neutral-800 {
  color: var(--color-neutral-800);
}

.text-neutral-900 {
  color: var(--color-neutral-900);
}

.text-neutral-950 {
  color: var(--color-neutral-950);
}

.text-green-100 {
  color: var(--color-green-100);
}

.text-green-500 {
  color: var(--color-green-500);
}

.text-green-700 {
  color: var(--color-green-700);
}

.text-green-900 {
  color: var(--color-green-900);
}

.text-blue-100 {
  color: var(--color-blue-100);
}

.text-blue-500 {
  color: var(--color-blue-500);
}

.text-blue-700 {
  color: var(--color-blue-700);
}

.text-blue-900 {
  color: var(--color-blue-900);
}

.text-lime-100 {
  color: var(--color-lime-100);
}

.text-lime-500 {
  color: var(--color-lime-500);
}

.text-lime-700 {
  color: var(--color-lime-700);
}

.text-lime-900 {
  color: var(--color-lime-900);
}

.text-pink-100 {
  color: var(--color-pink-100);
}

.text-pink-500 {
  color: var(--color-pink-500);
}

.text-pink-700 {
  color: var(--color-pink-700);
}

.text-pink-900 {
  color: var(--color-pink-900);
}

.text-purple-100 {
  color: var(--color-purple-100);
}

.text-purple-500 {
  color: var(--color-purple-500);
}

.text-purple-700 {
  color: var(--color-purple-700);
}

.text-purple-900 {
  color: var(--color-purple-900);
}

.text-red-100 {
  color: var(--color-red-100);
}

.text-red-500 {
  color: var(--color-red-500);
}

.text-red-700 {
  color: var(--color-red-700);
}

.text-red-900 {
  color: var(--color-red-900);
}

.text-teal-100 {
  color: var(--color-teal-100);
}

.text-teal-500 {
  color: var(--color-teal-500);
}

.text-teal-700 {
  color: var(--color-teal-700);
}

.text-teal-900 {
  color: var(--color-teal-900);
}

.text-yellow-100 {
  color: var(--color-yellow-100);
}

.text-yellow-500 {
  color: var(--color-yellow-500);
}

.text-yellow-700 {
  color: var(--color-yellow-700);
}

.text-yellow-900 {
  color: var(--color-yellow-900);
}

.text-error {
  color: var(--color-error);
}

.text-error-light {
  color: var(--color-error-light);
}

.text-success {
  color: var(--color-success);
}

.text-success-light {
  color: var(--color-success-light);
}

}
/* utils/_text-wrap.css */
@layer utils {
.text-balance {
  text-wrap: balance;
}

.text-pretty {
  text-wrap: pretty;
}

}