@import "https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap";

/* app/assets/stylesheets/normalize.css */
html {
  -webkit-text-size-adjust: 100%;
  line-height: 1.15;
}

body, h1, h2, h3, p {
  margin: 0;
}

hr {
  box-sizing: content-box;
  overflow: visible;
  height: 0;
}

pre {
  font-family: monospace;
  font-size: 1em;
}

a {
  background-color: #0000;
}

abbr[title] {
  text-decoration: underline;
  text-decoration: underline dotted;
  border-bottom: none;
}

b, strong {
  font-weight: bolder;
}

code, kbd, samp {
  font-family: monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub, sup {
  position: relative;
  vertical-align: baseline;
  font-size: 75%;
  line-height: 0;
}

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}

img {
  border-style: none;
}

button, input, optgroup, select, textarea {
  margin: 0;
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
}

button, input {
  overflow: visible;
}

button {
  overflow: visible;
  color: inherit;
  font: inherit;
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  -webkit-appearance: none;
  background: none;
  border: none;
  width: auto;
  margin: 0;
  padding: 0;
  line-height: normal;
}

button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

button, select {
  text-transform: none;
}

button, [type="button"], [type="reset"], [type="submit"] {
  -webkit-appearance: button;
}

button::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

[type="button"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

[type="reset"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring {
  outline: 1px dotted buttontext;
}

[type="button"]:-moz-focusring {
  outline: 1px dotted buttontext;
}

[type="reset"]:-moz-focusring {
  outline: 1px dotted buttontext;
}

[type="submit"]:-moz-focusring {
  outline: 1px dotted buttontext;
}

fieldset {
  padding: .35em .75em .625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  white-space: normal;
  max-width: 100%;
  padding: 0;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type="checkbox"], [type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

[type="number"]::-webkit-inner-spin-button {
  height: auto;
}

[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

input[type="submit"] {
  border: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template, [hidden] {
  display: none;
}

ul:where([role="list"]) {
  list-style-type: none;
  padding: 0;
}

ol:where([role="list"]) {
  list-style-type: none;
  padding: 0;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

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

/* app/assets/stylesheets/colors.css */
:root {
  --color-deep-blue-5: #060914;
  --color-deep-blue-10: #0e1425;
  --color-deep-blue-15: #131c34;
  --color-deep-blue-20: #1b2646;
  --color-deep-blue-25: #213059;
  --color-deep-blue-30: #313f67;
  --color-deep-blue-40: #435889;
  --color-deep-blue-50: #5c6e99;
  --color-deep-blue-60: #7a8db8;
  --color-deep-blue-70: #9aacd6;
  --color-deep-blue-97: #f5f7f8;
  --color-purple-5: #080713;
  --color-purple-15: #161334;
  --color-purple-20: #2f1f51;
  --color-purple-55: #843cdd;
  --color-purple-65: #b980ff;
  --color-purple-70: #a75fff;
  --color-pink-10: #270934;
  --color-pink-20: #401254;
  --color-pink-40: #763d8f;
  --color-pink-70: #cc85eb;
  --color-lime-10: #1a2009;
  --color-lime-70: #d5f379;
  --color-turquoise-10: #0e2f2d;
  --color-turquoise-20: #214542;
  --color-turquoise-40: #38948d;
  --color-turquoise-70: #75d7d0;
  --color-blue-10: #02153b;
  --color-blue-20: #1c2e54;
  --color-blue-40: #2950a3;
  --color-blue-70: #69f;
  --color-red-10: #380506;
  --color-red-20: #4a1c1d;
  --color-red-40: #993335;
  --color-red-70: #f37274;
  --color-orange-10: #361b02;
  --color-orange-20: #523214;
  --color-orange-40: #aa6422;
  --color-orange-70: #f8b16e;
  --color-green-10: #0f2e1e;
  --color-green-20: #214532;
  --color-green-40: #389463;
  --color-green-70: #79d2a3;
  --color-primary: var(--color-purple-70);
  --color-on-primary: var(--color-purple-5);
  --color-primary-container: var(--color-purple-15);
  --color-on-primary-container: var(--color-purple-65);
  --color-secondary: var(--color-deep-blue-30);
  --color-on-secondary: var(--color-deep-blue-70);
  --color-secondary-container: var(--color-deep-blue-15);
  --color-on-secondary-container: var(--color-deep-blue-70);
  --color-tertiary: var(--color-lime-70);
  --color-on-tertiary: var(--color-deep-blue-10);
  --color-tertiary-container: var(--color-lime-10);
  --color-on-tertiary-container: var(--color-lime-70);
  --color-surface: var(--color-deep-blue-5);
  --color-on-surface: var(--color-deep-blue-97);
  --color-surface-container-low: var(--color-deep-blue-5);
  --color-surface-container: var(--color-deep-blue-10);
  --color-surface-container-high: var(--color-deep-blue-15);
  --color-surface-container-highest: var(--color-deep-blue-20);
  --color-outline: var(--color-deep-blue-25);
  --color-on-surface-highlight: var(--color-lime-70);
  --color-on-surface-variant: var(--color-deep-blue-60);
  --color-outline-variant: var(--color-deep-blue-50);
  --color-on-secondary-variant: var(--color-deep-blue-97);
  --color-outline-gradient-start: var(--color-deep-blue-25);
  --color-outline-gradient-end: var(--color-deep-blue-15);
  --color-outline-primary-start: var(--color-purple-65);
  --color-outline-primary-end: var(--color-purple-55);
  --color-outline-tertiary-start: var(--color-lime-70);
  --color-outline-tertiary-end: var(--color-deep-blue-25);
  --color-outline-secondary: var(--color-deep-blue-50);
  --color-outline-highlight: var(--color-lime-70);
  --color-primary-accent: var(--color-purple-20);
  --color-states-pending: var(--color-turquoise-20);
  --color-states-on-pending: var(--color-turquoise-70);
  --color-states-pending-container: var(--color-turquoise-10);
  --color-states-on-pending-container: var(--color-turquoise-70);
  --color-states-pending-outline: var(--color-turquoise-40);
  --color-states-draft: var(--color-pink-20);
  --color-states-on-draft: var(--color-pink-70);
  --color-states-draft-container: var(--color-pink-10);
  --color-states-on-draft-container: var(--color-pink-70);
  --color-states-draft-outline: var(--color-pink-40);
  --color-states-error: var(--color-red-20);
  --color-states-on-error: var(--color-red-70);
  --color-states-error-container: var(--color-red-10);
  --color-states-on-error-container: var(--color-red-70);
  --color-states-error-outline: var(--color-red-40);
  --color-states-attention: var(--color-orange-20);
  --color-states-on-attention: var(--color-orange-70);
  --color-states-attention-container: var(--color-orange-10);
  --color-states-on-attention-container: var(--color-orange-70);
  --color-states-attention-outline: var(--color-orange-40);
  --color-states-success: var(--color-green-20);
  --color-states-on-success: var(--color-green-70);
  --color-states-success-container: var(--color-green-10);
  --color-states-on-success-container: var(--color-green-70);
  --color-states-success-outline: var(--color-green-40);
  --color-states-info: var(--color-blue-20);
  --color-states-on-info: var(--color-blue-70);
  --color-states-info-container: var(--color-blue-10);
  --color-states-on-info-container: var(--color-blue-70);
  --color-states-info-outline: var(--color-blue-40);
}

/* app/assets/stylesheets/spacings.css */
:root {
  --spacing-3xs: .375rem;
  --spacing-2xs: clamp(.375rem, calc(.331rem + .1878vw), .5rem);
  --spacing-xs: clamp(.5rem, calc(.412rem + .3756vw), .75rem);
  --spacing-s: clamp(.75rem, calc(.662rem + .3756vw), 1rem);
  --spacing-m: clamp(1rem, calc(.8239rem + .7512vw), 1.5rem);
  --spacing-l: clamp(1.375rem, calc(1.1549rem + .939vw), 2rem);
  --spacing-xl: clamp(1.75rem, calc(1.4859rem + 1.1268vw), 2.5rem);
  --spacing-2xl: clamp(2.125rem, calc(1.8169rem + 1.3146vw), 3rem);
  --spacing-3xl: clamp(2.625rem, calc(2.3169rem + 1.3146vw), 3.5rem);
  --touch-target-s: 2.5rem;
  --touch-target-m: 3rem;
}

/* app/assets/stylesheets/typography.css */
@font-face {
  font-family: Clash Grotesk;
  src: url("/fonts/ClashGrotesk-Variable.ttf") format(truetype);
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Freight;
  src: url("/fonts/Freight-Text-Black.otf") format(opentype);
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --text-step-2xs: clamp(.75rem, calc(.706rem + .1878vw), .875rem);
  --text-step-xs: clamp(.875rem, calc(.831rem + .1878vw), 1rem);
  --text-step-s: clamp(1rem, calc(.912rem + .3756vw), 1.25rem);
  --text-step-m: clamp(1.125rem, calc(.9929rem + .5634vw), 1.5rem);
  --text-step-l: clamp(1.5rem, calc(1.3239rem + .7512vw), 2rem);
  --text-step-xl: clamp(1.875rem, calc(1.6549rem + .939vw), 2.5rem);
  --text-step-2xl: clamp(2.25rem, calc(1.9859rem + 1.1268vw), 3rem);
  --fonts-family-default: "Geist", sans-serif;
  --fonts-family-display: "Clash Grotesk", sans-serif;
  --weight-black: 900;
  --weight-bold: 600;
  --weight-default: 400;
  --weight-medium: 500;
  --line-height-default: 1.3;
  --line-height-small: 1.1;
  --line-height-display: 1;
}

.display--large {
  font-family: var(--fonts-family-display);
  font-weight: var(--weight-black);
  line-height: var(--line-height-display);
  font-size: var(--text-step-2xl);
}

.display--medium {
  font-family: var(--fonts-family-display);
  font-weight: var(--weight-black);
  line-height: var(--line-height-display);
  font-size: var(--text-step-xl);
}

.display--small {
  font-family: var(--fonts-family-display);
  font-weight: var(--weight-black);
  line-height: var(--line-height-display);
  font-size: var(--text-step-l);
}

.headline--large {
  font-weight: var(--weight-bold);
  line-height: var(--line-height-small);
  font-size: var(--text-step-l);
}

.headline--medium {
  font-weight: var(--weight-bold);
  line-height: var(--line-height-small);
  font-size: var(--text-step-m);
}

.headline--small {
  font-weight: var(--weight-bold);
  line-height: var(--line-height-small);
  font-size: var(--text-step-s);
}

.body--large {
  font-size: var(--text-step-s);
  font-weight: var(--weight-default);
  line-height: var(--line-height-default);
}

.body--medium {
  font-size: var(--text-step-xs);
  font-weight: var(--weight-default);
  line-height: var(--line-height-default);
}

.body--small {
  font-size: var(--text-step-2xs);
  font-weight: var(--weight-default);
  line-height: var(--line-height-default);
}

.body--large-bold {
  font-size: var(--text-step-s);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-default);
}

.body--medium-bold {
  font-size: var(--text-step-xs);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-default);
}

.body--small-bold {
  font-size: var(--text-step-2xs);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-default);
}

.body--large-underline {
  font-size: var(--text-step-s);
  font-weight: var(--weight-default);
  line-height: var(--line-height-default);
  text-decoration: underline;
}

.body--medium-underline {
  font-size: var(--text-step-xs);
  font-weight: var(--weight-default);
  line-height: var(--line-height-default);
  text-decoration: underline;
}

.body--small-underline {
  font-size: var(--text-step-2xs);
  font-weight: var(--weight-default);
  line-height: var(--line-height-default);
  text-decoration: underline;
}

.label--large {
  font-size: var(--text-step-s);
  font-weight: var(--weight-medium);
  line-height: var(--line-height-display);
}

.label--medium {
  font-size: var(--text-step-xs);
  font-weight: var(--weight-medium);
  line-height: var(--line-height-display);
}

.label--small {
  font-size: var(--text-step-2xs);
  font-weight: var(--weight-medium);
  line-height: var(--line-height-display);
}

.title--small {
  font-size: var(--text-step-xs);
  font-family: var(--fonts-family-display);
  font-weight: var(--weight-black);
  line-height: var(--line-height-small);
}

/* app/assets/stylesheets/border.css */
:root {
  --border-radius-small-inner: .25rem;
  --border-radius-small: .375rem;
  --border-radius-medium: .75rem;
  --border-radius-large: 1rem;
  --border-radius-xl: 1.5rem;
  --border-radius-rounded: 31.25rem;
  --border-width-default: 1px;
  --border-width-bold: 2px;
  --border-radius-state-corner: .375rem;
}

.border-gradient {
  background: linear-gradient(var(--border-gradient-bg, var(--color-surface-container)) 0 0) padding-box, linear-gradient(to var(--border-gradient-direction, right), var(--border-gradient-start, var(--color-outline-gradient-start)), var(--border-gradient-end, var(--color-outline-gradient-end))) border-box;
  border: 1px solid #0000;
}

.border-gradient--high {
  --border-gradient-bg: var(--color-surface-container-high);
}

.border-gradient--highest {
  --border-gradient-bg: var(--color-surface-container-highest);
}

.border-gradient--primary {
  --border-gradient-start: var(--color-outline-primary-start);
  --border-gradient-end: var(--color-outline-primary-end);
}

.border-gradient--tertiary {
  --border-gradient-start: var(--color-outline-tertiary-start);
  --border-gradient-end: var(--color-outline-tertiary-end);
  --border-gradient-direction: bottom right;
}

.border-gradient--draft, .border-gradient--pending, .border-gradient--attention, .border-gradient--success, .border-gradient--error, .border-gradient--info {
  --border-gradient-end: var(--color-outline-gradient-end);
  --border-gradient-direction: bottom right;
}

.border-gradient--draft {
  --border-gradient-start: var(--color-states-draft-outline);
}

.border-gradient--pending {
  --border-gradient-start: var(--color-states-pending-outline);
}

.border-gradient--attention {
  --border-gradient-start: var(--color-states-attention-outline);
}

.border-gradient--success {
  --border-gradient-start: var(--color-states-success-outline);
}

.border-gradient--error {
  --border-gradient-start: var(--color-states-error-outline);
}

.border-gradient--info {
  --border-gradient-start: var(--color-states-info-outline);
}

/* app/assets/stylesheets/icon.css */
:root {
  --icon-size-xs: 1rem;
  --icon-size-s: 1.25rem;
  --icon-size-m: 1.5rem;
  --icon-size-l: 2rem;
  --icon-size-xl: 2.5rem;
  --icon-strokewidth-xs: 1.15px;
  --icon-strokewidth-s: 1.5px;
  --icon-strokewidth-m: 2px;
}

/* app/assets/stylesheets/sizes.css */
:root {
  --avatar-size-xs: 1.5rem;
  --avatar-size-s: 2.25rem;
  --avatar-size-m: 2.5rem;
  --avatar-size-l: 3rem;
  --avatar-size-xl: 5rem;
  --button-size-xs: 1.5rem;
  --button-size-s: 2rem;
  --button-size-m: 3rem;
  --button-size-l: 3.5rem;
  --button-size-xl: 4rem;
  --button-size-2xl: 5rem;
  --dot-size-s: .75rem;
}

/* app/assets/stylesheets/viewports.css */
:root {
  --breakpoint-2xl: 114.5em;
  --breakpoint-xl: 100em;
  --breakpoint-l: 80em;
  --breakpoint-m: 50em;
  --breakpoint-s: 40em;
}

/* app/assets/stylesheets/animation.css */
:root {
  --transition-fast: .15s;
  --transition-base: .3s;
  --transition-easing: ease-in-out;
}

/* app/assets/stylesheets/utilities.css */
.u-flex {
  display: flex;
}

.u-inline-flex {
  display: inline-flex;
}

.u-flex-col {
  display: flex;
  flex-direction: column;
}

.u-flex-wrap {
  flex-wrap: wrap;
}

.u-items-center {
  align-items:  center;
}

.u-items-start {
  align-items:  flex-start;
}

.u-items-end {
  align-items:  flex-end;
}

.u-justify-between {
  justify-content: space-between;
}

.u-justify-center {
  justify-content: center;
}

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

.u-flex-1 {
  flex: 1;
}

.u-flex-shrink-0 {
  flex-shrink: 0;
}

.u-flex-grow-0 {
  flex-grow: 0;
}

.u-gap-3xs {
  gap: var(--spacing-3xs);
}

.u-gap-2xs {
  gap: var(--spacing-2xs);
}

.u-gap-xs {
  gap: var(--spacing-xs);
}

.u-gap-s {
  gap: var(--spacing-s);
}

.u-gap-m {
  gap: var(--spacing-m);
}

.u-gap-l {
  gap: var(--spacing-l);
}

.u-gap-xl {
  gap: var(--spacing-xl);
}

.u-gap-2xl {
  gap: var(--spacing-2xl);
}

.u-grid {
  display: grid;
}

.u-grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.u-grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.u-w-full {
  width: 100%;
}

.u-mt-3xs {
  margin-top: var(--spacing-3xs);
}

.u-mt-2xs {
  margin-top: var(--spacing-2xs);
}

.u-mt-xs {
  margin-top: var(--spacing-xs);
}

.u-mt-s {
  margin-top: var(--spacing-s);
}

.u-mt-m {
  margin-top: var(--spacing-m);
}

.u-mt-l {
  margin-top: var(--spacing-l);
}

.u-mt-xl {
  margin-top: var(--spacing-xl);
}

.u-mt-2xl {
  margin-top: var(--spacing-2xl);
}

.u-mb-3xs {
  margin-bottom: var(--spacing-3xs);
}

.u-mb-2xs {
  margin-bottom: var(--spacing-2xs);
}

.u-mb-xs {
  margin-bottom: var(--spacing-xs);
}

.u-mb-s {
  margin-bottom: var(--spacing-s);
}

.u-mb-m {
  margin-bottom: var(--spacing-m);
}

.u-mb-l {
  margin-bottom: var(--spacing-l);
}

.u-mb-xl {
  margin-bottom: var(--spacing-xl);
}

.u-mb-2xl {
  margin-bottom: var(--spacing-2xl);
}

.u-ml-auto {
  margin-left: auto;
}

.u-text-center {
  text-align: center;
}

.u-text-underline {
  text-decoration: underline;
}

.u-text-right {
  text-align: right;
}

.u-text-left {
  text-align: left;
}

.u-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.u-break-word {
  word-break: break-word;
}

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

.u-text-muted {
  color: var(--color-on-surface-variant);
}

.u-text-subtle {
  color: var(--color-outline-variant);
}

.u-text-primary {
  color: var(--color-primary);
}

.u-text-tertiary {
  color: var(--color-tertiary);
}

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

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

.u-hidden {
  display: none;
}

.u-block {
  display: block;
}

.u-inline {
  display: inline;
}

.u-relative {
  position: relative;
}

.u-border-b {
  border-bottom: var(--border-width-default) solid var(--color-outline);
}

/* app/assets/stylesheets/form.css */
.form {
  display: flex;
  gap: var(--spacing-m);
  flex-direction: column;
  width: 100%;
  max-width: 36rem;
}

.form button {
  align-self:  flex-start;
}

.hint {
  display: block;
  font-size: var(--text-step-2xs);
  color: var(--color-on-surface-variant);
  margin-top: var(--spacing-3xs);
}

/* app/assets/stylesheets/layout.css */
:root {
  --sidebar-width: 16.25rem;
}

.layout {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: 6rem;
  grid-template-areas: "sidebar topbar" "sidebar main";
}

.layout:before {
  content: "";
  position: fixed;
  z-index: -1;
  mask-image: linear-gradient(to left, #0000 0% 50%, #000 100%);
  background-image: url("/assets/background-pattern-e55bd35d.svg");
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: auto 100dvh;
  width: 100%;
  height: 100dvh;
  top: 0;
  left: 0;
}

.layout__topbar {
  grid-area: topbar;
  position: sticky;
  padding: var(--spacing-m);
  background: linear-gradient(to right, transparent 20%, var(--color-surface-container));
  top: 0;
}

.layout__sidebar {
  grid-area: sidebar;
  height: 100dvh;
  max-height: 100dvh;
}

.layout__logo {
  width: 100%;
  height: auto;
  max-height: 3.25rem;
}

.snake-tongue {
  opacity: 0;
  transition: transform .3s ease-in-out, opacity .3s ease-in;
  transform: translateY(-.75rem);
}

.snake-eyes {
  opacity: 0;
  transition: opacity .3s ease-in;
}

.easter-egg:hover .snake-tongue {
  opacity: 1;
  transform: translateY(-.25rem);
}

.easter-egg:hover .snake-eyes {
  opacity: 1;
}

.layout__main {
  --main-gradient-start: var(--color-outline-gradient-start);
  --main-gradient-end: var(--color-outline-gradient-end);
  --main-gradient-stop: 100%;
  grid-area: main;
  position: relative;
  padding: var(--spacing-2xl);
  border-radius: var(--border-radius-large) 0 0 0;
  background: linear-gradient(var(--color-surface-container) 0 0) padding-box, radial-gradient(circle at top left, var(--main-gradient-start) 0%, var(--main-gradient-end) var(--main-gradient-stop)) border-box;
  border-block-start: 1px solid #0000;
  border-inline-start: 1px solid #0000;
}

.l-auth {
  display: flex;
  gap: var(--spacing-m);
  padding: var(--spacing-l);
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items:  center;
  min-height: 100vh;
}

.l-sidebar {
  display: flex;
  gap: var(--spacing-xl);
  align-items:  flex-start;
}

.l-sidebar__nav {
  flex-shrink: 0;
  width: 16rem;
}

.l-sidebar__nav--hidden {
  visibility: hidden;
}

.l-sidebar__card {
  padding: var(--spacing-2xl);
  border-radius: var(--border-radius-large);
  flex: 1;
  min-width: 0;
  max-width: 64rem;
}

@media (max-width: 50em) {
  .l-sidebar {
    flex-direction: column;
  }

  .l-sidebar__nav {
    width: 100%;
  }

  .l-sidebar__nav--hidden {
    display: none;
  }
}

.l-fixed-top {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  right: 0;
}

.l-auth--branded:before {
  content: "";
  position: fixed;
  z-index: -1;
  mask-image: linear-gradient(to left, #0000 0% 50%, #000 100%);
  background-image: url("/assets/background-pattern-e55bd35d.svg");
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: auto 100dvh;
  width: 100%;
  height: 100dvh;
  top: 0;
  left: 0;
}

.l-auth__card-wrap {
  width: 100%;
  max-width: 30rem;
}

.l-auth__card-wrap--wide {
  max-width: 64rem;
}

.l-auth__logo {
  width: 9.3125rem;
  height: auto;
  margin: 0 auto;
}

.l-auth__page-footer {
  display: flex;
  gap: var(--spacing-m);
  padding: var(--spacing-l) var(--spacing-m);
  justify-content: end;
  width: 100%;
}

.l-auth__page-footer a {
  color: var(--color-on-surface-variant);
  text-decoration: underline;
}

/* app/assets/stylesheets/info-box.css */
.info-box {
  padding: var(--spacing-m);
  border-radius: var(--border-radius-small);
  border: var(--border-width-default) solid var(--color-outline);
  background: var(--color-surface-container);
}

.info-box--warning {
  border-color: var(--color-states-attention);
  background: color-mix(in srgb, var(--color-states-attention) 10%, var(--color-surface));
}

.info-box--error {
  border-color: var(--color-states-error);
  background: color-mix(in srgb, var(--color-states-error) 10%, var(--color-surface));
}

/* app/assets/stylesheets/mediadeck.css */
.mediadeck-upload {
  display: flex;
  justify-content: center;
  align-items:  center;
  gap: var(--spacing-2xs);
  padding: var(--spacing-l) var(--spacing-m);
  border-radius: var(--border-radius-medium);
  border: 1px dashed var(--color-outline);
  background: var(--color-surface-container);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
  flex-direction: column;
  min-height: 8.75rem;
}

.mediadeck-upload:hover, .mediadeck-upload:focus-within {
  border-color: var(--color-tertiary);
  background: var(--color-surface-container-high);
}

.mediadeck-upload--has-file {
  border-style: solid;
  border-color: var(--color-tertiary);
}

.mediadeck-upload__icon {
  display: inline-flex;
  color: var(--color-on-surface-variant);
  justify-content: center;
  align-items:  center;
}

.mediadeck-upload__title {
  font-weight: var(--weight-medium);
  color: var(--color-on-surface);
}

.mediadeck-upload__hint {
  font-size: var(--text-step-2xs);
  color: var(--color-on-surface-variant);
}

.mediadeck-processing {
  display: flex;
  text-align: center;
  align-items:  center;
  gap: var(--spacing-xl);
  padding: var(--spacing-l) 0;
  flex-direction: column;
}

.mediadeck-processing__header {
  display: flex;
  gap: var(--spacing-2xs);
  flex-direction: column;
}

.mediadeck-processing__title {
  color: var(--color-on-surface);
}

.mediadeck-processing__subtitle {
  color: var(--color-on-surface-variant);
}

.mediadeck-processing__logo {
  display: flex;
  animation: mediadeck-processing-pulse 2.4s ease-in-out infinite;
  justify-content: center;
  align-items:  center;
  width: 12rem;
  height: 12rem;
}

.mediadeck-processing__logo svg {
  width: 55%;
  height: auto;
}

@keyframes mediadeck-processing-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(.96);
    opacity: .85;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mediadeck-processing__logo {
    animation: none;
  }
}

.mediadeck-processing__helper {
  color: var(--color-on-surface-variant);
  max-width: 32rem;
}

.mediadeck-upload--dragover {
  border-color: var(--color-tertiary);
  background: var(--color-surface-container-high);
}

/* app/assets/stylesheets/company_show.css */
.company-show {
  position: relative;
  display: flex;
  gap: var(--spacing-2xl);
  flex-direction: column;
}

.company-show__back {
  margin-bottom: var(--spacing-s);
}

.company-show__glow-clip {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  border-radius: var(--border-radius-large) 0 0 0;
  inset: 0;
}

.company-show__glow-clip--inactive {
  --company-state-color: var(--color-states-info-outline);
}

.company-show__glow-clip--archived {
  --company-state-color: var(--color-states-draft-outline);
}

.company-show__glow-clip--locked {
  --company-state-color: var(--color-states-attention-outline);
}

.layout__main:has(.company-show__glow-clip--inactive) {
  --main-gradient-start: var(--color-states-info-outline);
  --main-gradient-stop: 50%;
}

.layout__main:has(.company-show__glow-clip--archived) {
  --main-gradient-start: var(--color-states-draft-outline);
  --main-gradient-stop: 50%;
}

.layout__main:has(.company-show__glow-clip--locked) {
  --main-gradient-start: var(--color-states-attention-outline);
  --main-gradient-stop: 50%;
}

.company-show__dimmable {
  display: flex;
  gap: var(--spacing-2xl);
  flex-direction: column;
}

.company-show--locked .company-show__dimmable {
  opacity: .5;
  pointer-events: none;
}

.company-show__status-banner .alert {
  position: static;
  width: 100%;
  bottom: auto;
  right: auto;
}

.company-show__glow {
  position: absolute;
  background: var(--company-state-color);
  filter: blur(3rem);
  opacity: .25;
  border-radius: 50%;
  width: 24rem;
  height: 16rem;
  top: -4rem;
  left: -4rem;
}

.company-show__header {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: var(--spacing-xl);
  align-items:  start;
}

.company-show__edit-profile {
  margin-top: var(--spacing-xs);
}

.company-show__metrics {
  display: flex;
  gap: var(--spacing-m);
}

.company-show__metrics > * {
  flex: 1;
  min-width: 0;
}

.company-show__contacts {
  display: flex;
  gap: var(--spacing-s);
  flex-direction: column;
}

.company-show__contacts-title {
  color: var(--color-on-surface-variant);
  margin: 0;
}

.company-show__contacts-list {
  display: flex;
  gap: var(--spacing-xs);
  flex-direction: column;
}

.company-show__section {
  display: flex;
  gap: var(--spacing-m);
  flex-direction: column;
}

.company-show__section-title {
  color: var(--color-on-surface-variant);
  margin: 0;
}

.company-show__requests {
  display: flex;
  gap: var(--spacing-xs);
  flex-direction: column;
}

.company-show__rights-grid, .company-show__partnerships-grid {
  display: grid;
  gap: var(--spacing-m);
}

.company-show__rights-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, max(16rem, calc(50% - (var(--spacing-m) / 2)))), 1fr));
}

.company-show__partnerships-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, max(20rem, calc(50% - (var(--spacing-m) / 2)))), 1fr));
}

.company-show__see-all {
  text-align: center;
  margin-top: var(--spacing-s);
  color: var(--color-on-surface);
}

/* app/assets/stylesheets/brand_show.css */
.brand-show {
  display: flex;
  gap: var(--spacing-2xl);
  flex-direction: column;
}

.brand-show__section {
  display: flex;
  gap: var(--spacing-m);
  flex-direction: column;
}

.brand-show__section-title {
  color: var(--color-on-surface-variant);
  margin: 0;
}

.brand-show__rights-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-m);
}

/* app/assets/stylesheets/registration_show.css */
.registration-show__header {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: var(--spacing-xl);
  align-items:  start;
}

/* app/assets/stylesheets/demo-card.css */
.demo-card {
  display: flex;
  padding: var(--spacing-m);
  align-items:  flex-start;
  gap: var(--spacing-s);
  border-radius: var(--border-radius-large);
  border: 1px solid var(--color-outline);
  background: var(--color-surface-container-high);
  position: absolute;
  flex-direction: column;
  max-width: 23.75rem;
  bottom: var(--spacing-m);
}

.demo-card:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
  right: var(--spacing-m);
}

.demo-card:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
  right: var(--spacing-m);
}

.demo-card:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
  right: var(--spacing-m);
}

.demo-card:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: var(--spacing-m);
}

.demo-card:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: var(--spacing-m);
}

.demo-card:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: var(--spacing-m);
}

@media (max-width: 83.75em) {
  .demo-card {
    position: static;
    max-width: 30rem;
  }
}

.demo-card__headline {
  display: flex;
  gap: var(--spacing-2xs);
  align-items:  center;
}

.demo-card__headline svg {
  width: var(--icon-size-m);
  height: var(--icon-size-m);
}

/* app/assets/stylesheets/feeds.css */
.feed-entry__logo {
  border-radius: var(--border-radius-rounded);
  object-fit: contain;
  flex-shrink: 0;
  width: auto;
  height: 1.5rem;
}

.feed-entry__actions {
  padding-top: var(--spacing-xs);
}

.feed-header {
  border: 1px solid var(--color-outline, #213059);
  padding: var(--spacing-xs, 12px) var(--spacing-s, 16px);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.feed-content {
  border-left: 1px solid var(--color-outline, #213059);
  border-right: 1px solid var(--color-outline, #213059);
  border-bottom: 1px solid var(--color-outline, #213059);
  padding: var(--spacing-xs, 12px) var(--spacing-s, 16px);
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

.feed-entry__body {
  font-size: var(--text-step-s);
  font-weight: var(--weight-default);
  line-height: var(--line-height-default);
  color: var(--color-on-surface);
  overflow-wrap: break-word;
  word-break: break-word;
}

.feed-entry__body p {
  margin-bottom: var(--spacing-xs);
}

.feed-entry__body p:last-child {
  margin-bottom: 0;
}

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

.feed-entry__body em {
  font-style: italic;
}

.feed-entry__body a {
  color: var(--color-on-surface-highlight);
  text-decoration: underline;
}

.feed-entry__body h1 {
  font-family: var(--fonts-family-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-step-l);
  line-height: var(--line-height-small);
  margin-bottom: var(--spacing-xs);
}

.feed-entry__body ul, .feed-entry__body ol {
  padding-left: var(--spacing-m);
  margin-bottom: var(--spacing-xs);
}

.feed-entry__body ul {
  list-style: disc;
}

.feed-entry__body ol {
  list-style: decimal;
}

.feed-entry__body li {
  margin-bottom: var(--spacing-3xs);
}

.feed-entry__body blockquote {
  border-left: 3px solid var(--color-outline);
  margin-left: var(--spacing-xs);
  padding-left: var(--spacing-xs);
  color: var(--color-on-surface-variant);
}

/* node_modules/rhino-editor/exports/styles/trix.css */
.trix-content {
  border: 1px solid var(--rhino-border-color);
  border-radius: 0px 0px var(--rhino-border-radius) var(--rhino-border-radius);
  outline: #0000;
  overflow-wrap: break-word;
  word-break: break-word;
  min-height: 200px;
  margin: 0;
  padding: .4em .6em;
}

.trix-content[contenteditable="true"] {
  white-space: pre-wrap;
}

.trix-content:-webkit-any(:focus, :focus-within) {
  border-color: var(--rhino-button-active-border-color);
}

.trix-content:-moz-any(:focus, :focus-within) {
  border-color: var(--rhino-button-active-border-color);
}

.trix-content:is(:focus, :focus-within) {
  border-color: var(--rhino-button-active-border-color);
}

.trix-content :-webkit-any(img, svg, figure) {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.trix-content :-moz-any(img, svg, figure) {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.trix-content :is(img, svg, figure) {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.trix-content :-webkit-any(figure, p) {
  margin: 0;
  padding: 0;
}

.trix-content :-moz-any(figure, p) {
  margin: 0;
  padding: 0;
}

.trix-content :is(figure, p) {
  margin: 0;
  padding: 0;
}

.trix-content figure {
  position: relative;
}

.trix-content figcaption {
  line-break: anywhere;
  display: inline-block;
  white-space: normal;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
  vertical-align: top;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

.trix-content[contenteditable="true"] figcaption {
  white-space: break-spaces;
}

.trix-content .rhino-upload-error {
  background-color: #ff00004d;
}

.trix-content:not([readonly]) .attachment--preview:-webkit-any(:focus-within, :focus, .has-focus) :-webkit-any(img) {
  outline: #0000;
  box-shadow: var(--rhino-focus-ring);
}

.trix-content:not([readonly]) .attachment--preview:-moz-any(:focus-within, :focus, .has-focus) :-moz-any(img) {
  outline: #0000;
  box-shadow: var(--rhino-focus-ring);
}

.trix-content:not([readonly]) .attachment--preview:is(:focus-within, :focus, .has-focus) :is(img) {
  outline: #0000;
  box-shadow: var(--rhino-focus-ring);
}

.trix-content:not([readonly]) .attachment:not(.attachment--preview):-webkit-any(:focus-within, :focus, .has-focus) {
  outline: #0000;
  box-shadow: var(--rhino-focus-ring);
}

.trix-content:not([readonly]) .attachment:not(.attachment--preview):-moz-any(:focus-within, :focus, .has-focus) {
  outline: #0000;
  box-shadow: var(--rhino-focus-ring);
}

.trix-content:not([readonly]) .attachment:not(.attachment--preview):is(:focus-within, :focus, .has-focus) {
  outline: #0000;
  box-shadow: var(--rhino-focus-ring);
}

.rhino-attachment-editor::part(delete-button) {
  display: none;
}

.rhino-attachment-editor::part(file-metadata) {
  display: none;
}

.trix-content:not([readonly]) figure:-webkit-any(:focus-within, :focus, .has-focus) .rhino-attachment-editor::part(delete-button) {
  display: flex;
}

.trix-content:not([readonly]) figure:-moz-any(:focus-within, :focus, .has-focus) .rhino-attachment-editor::part(delete-button) {
  display: flex;
}

.trix-content:not([readonly]) figure:is(:focus-within, :focus, .has-focus) .rhino-attachment-editor::part(delete-button) {
  display: flex;
}

.trix-content:not([readonly]) figure:-webkit-any(:focus-within, :focus, .has-focus) .rhino-attachment-editor::part(file-metadata) {
  display: flex;
}

.trix-content:not([readonly]) figure:-moz-any(:focus-within, :focus, .has-focus) .rhino-attachment-editor::part(file-metadata) {
  display: flex;
}

.trix-content:not([readonly]) figure:is(:focus-within, :focus, .has-focus) .rhino-attachment-editor::part(file-metadata) {
  display: flex;
}

.trix-content .placeholder {
  position: absolute;
  pointer-events: none;
  color: var(--buncss-light, var(--rhino-placeholder-text-color)) var(--buncss-dark, var(--rhino-dark-placeholder-text-color));
  cursor: text;
  content: "";
}

.trix-content figure.attachment figcaption {
  position: relative;
}

.trix-content p.is-editor-empty:first-child:before, .trix-content figure[data-trix-attachment].has-focus figcaption.is-empty:before {
  color: var(--buncss-light, var(--rhino-placeholder-text-color)) var(--buncss-dark, var(--rhino-dark-placeholder-text-color));
  content: attr(data-placeholder);
  pointer-events: none;
}

.trix-content figure[data-trix-attachment]:not(.has-focus) figcaption.is-empty:before {
  content: attr(data-default-caption);
  pointer-events: none;
}

.trix-content ul {
  list-style: disc;
}

.trix-content ol {
  list-style-type: decimal;
}

.trix-content figure[data-trix-attachment].has-focus figcaption.is-empty:before {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%);
}

.trix-content p.is-editor-empty:first-child:before {
  float: left;
  pointer-events: none;
  height: 0;
}

.trix-content {
  box-sizing: border-box;
}

.trix-content * {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

.trix-content h1 {
  font-size: 1.2em;
  line-height: 1.2;
}

.trix-content blockquote {
  border: 0 solid #ccc;
  border-inline-start-width: .3em;
  margin-inline-start: .3em;
  padding-inline-start: .6em;
}

.trix-content li {
  margin-inline-start: 1em;
}

.trix-content :not(pre) code {
  display: inline;
  background-color: #eee;
  border: 1px solid #c0c0c080;
  border-radius: 2px;
  margin: 0 1px;
  padding: 2px;
}

.trix-content code, .trix-content pre {
  box-decoration-break: clone;
}

.trix-content pre {
  display: block;
  white-space: pre;
  overflow-x: auto;
  background-color: #eee;
  width: 100%;
  padding: .5em;
  font-family: monospace;
  font-size: .9em;
}

.trix-content img {
  max-width: 100%;
  height: auto;
}

.trix-content .attachment {
  display: block;
  position: relative;
  max-width: 100%;
}

.trix-content .attachment figcaption a, .trix-content .attachment figcaption a:hover {
  color: linktext;
}

.trix-content .attachment figcaption a:visited, .trix-content .attachment figcaption a:hover:visited {
  color: visitedtext;
}

.trix-content .attachment__caption {
  text-align: center;
  margin-top: .5em;
}

.trix-content .attachment__caption .attachment__name + .attachment__size:before {
  content: " · ";
}

.trix-content .attachment--preview {
  text-align: center;
  width: 100%;
  margin: .6em 0;
}

.trix-content .attachment--preview .attachment__caption {
  color: #666;
  font-size: .9em;
  line-height: 1.2;
}

.trix-content .attachment.attachment--file {
  color: #333;
  border: 1px solid var(--rhino-border-color);
  border-radius: var(--rhino-border-radius);
  margin: 0 2px 2px;
  padding: .4em 1em;
  line-height: 1;
}

.trix-content .attachment-gallery {
  display: flex;
  position: relative;
  flex-wrap: wrap;
}

.trix-content figure.attachment {
  display: inline-block;
  position: relative;
  white-space: normal;
}

.trix-content .attachment-gallery > p {
  flex: 0;
  width: 0;
  max-width: 0%;
  padding: 0;
}

.trix-content .attachment-gallery .attachment {
  white-space: normal;
  flex: 1 0 100%;
  max-width: 100%;
  padding: 0 .5em;
}

.trix-content .attachment-gallery > :-webkit-any(.attachment--preview, action-text-attachment[previewable="true"]) {
  white-space: normal;
  flex: 1 0 33%;
  max-width: 33%;
  padding: 0 .5em;
}

.trix-content .attachment-gallery > :-moz-any(.attachment--preview, action-text-attachment[previewable="true"]) {
  white-space: normal;
  flex: 1 0 33%;
  max-width: 33%;
  padding: 0 .5em;
}

.trix-content .attachment-gallery > :is(.attachment--preview, action-text-attachment[previewable="true"]) {
  white-space: normal;
  flex: 1 0 33%;
  max-width: 33%;
  padding: 0 .5em;
}

.trix-content .attachment-gallery > :-webkit-any(.attachment, action-text-attachment):first-of-type:last-of-type ~ :-webkit-any(.attachment, action-text-attachment) {
  flex-basis: 100%;
  max-width: 100%;
  padding: 0;
}

.trix-content .attachment-gallery > :-moz-any(.attachment, action-text-attachment):first-of-type:last-of-type ~ :-moz-any(.attachment, action-text-attachment) {
  flex-basis: 100%;
  max-width: 100%;
  padding: 0;
}

.trix-content .attachment-gallery > :is(.attachment, action-text-attachment):first-of-type:last-of-type ~ :is(.attachment, action-text-attachment) {
  flex-basis: 100%;
  max-width: 100%;
  padding: 0;
}

.trix-content .attachment-gallery > :-webkit-any(.attachment, action-text-attachment):first-of-type:last-of-type {
  flex-basis: 100%;
  max-width: 100%;
  padding: 0;
}

.trix-content .attachment-gallery > :-moz-any(.attachment, action-text-attachment):first-of-type:last-of-type {
  flex-basis: 100%;
  max-width: 100%;
  padding: 0;
}

.trix-content .attachment-gallery > :is(.attachment, action-text-attachment):first-of-type:last-of-type {
  flex-basis: 100%;
  max-width: 100%;
  padding: 0;
}

.attachment-gallery > :-webkit-any(.attachment--preview, action-text-attachment[previewable="true"]):first-of-type:nth-last-of-type(2) {
  flex-basis: 50%;
  max-width: 50%;
}

.attachment-gallery > :-moz-any(.attachment--preview, action-text-attachment[previewable="true"]):first-of-type:nth-last-of-type(2) {
  flex-basis: 50%;
  max-width: 50%;
}

.attachment-gallery > :is(.attachment--preview, action-text-attachment[previewable="true"]):first-of-type:nth-last-of-type(2) {
  flex-basis: 50%;
  max-width: 50%;
}

.attachment-gallery > :-webkit-any(.attachment--preview, action-text-attachment[previewable="true"]):first-of-type:nth-last-of-type(2) ~ :-webkit-any(.attachment--preview, action-text-attachment[previewable="true"]) {
  flex-basis: 50%;
  max-width: 50%;
}

.attachment-gallery > :-moz-any(.attachment--preview, action-text-attachment[previewable="true"]):first-of-type:nth-last-of-type(2) ~ :-moz-any(.attachment--preview, action-text-attachment[previewable="true"]) {
  flex-basis: 50%;
  max-width: 50%;
}

.attachment-gallery > :is(.attachment--preview, action-text-attachment[previewable="true"]):first-of-type:nth-last-of-type(2) ~ :is(.attachment--preview, action-text-attachment[previewable="true"]) {
  flex-basis: 50%;
  max-width: 50%;
}

.attachment-gallery > :-webkit-any(.attachment--preview, action-text-attachment[previewable="true"]):first-of-type:nth-last-of-type(4) {
  flex-basis: 50%;
  max-width: 50%;
}

.attachment-gallery > :-moz-any(.attachment--preview, action-text-attachment[previewable="true"]):first-of-type:nth-last-of-type(4) {
  flex-basis: 50%;
  max-width: 50%;
}

.attachment-gallery > :is(.attachment--preview, action-text-attachment[previewable="true"]):first-of-type:nth-last-of-type(4) {
  flex-basis: 50%;
  max-width: 50%;
}

.attachment-gallery > :-webkit-any(.attachment--preview, action-text-attachment[previewable="true"]):first-of-type:nth-last-of-type(4) ~ :-webkit-any(.attachment--preview, action-text-attachment[previewable="true"]) {
  flex-basis: 50%;
  max-width: 50%;
}

.attachment-gallery > :-moz-any(.attachment--preview, action-text-attachment[previewable="true"]):first-of-type:nth-last-of-type(4) ~ :-moz-any(.attachment--preview, action-text-attachment[previewable="true"]) {
  flex-basis: 50%;
  max-width: 50%;
}

.attachment-gallery > :is(.attachment--preview, action-text-attachment[previewable="true"]):first-of-type:nth-last-of-type(4) ~ :is(.attachment--preview, action-text-attachment[previewable="true"]) {
  flex-basis: 50%;
  max-width: 50%;
}

.trix-content .attachment-gallery.attachment-gallery--2 action-text-attachment > .attachment, .trix-content .attachment-gallery.attachment-gallery--4 action-text-attachment > .attachment, .trix-content .attachment-gallery action-text-attachment > .attachment {
  max-width: 100%;
}

:host, .trix-content {
  --rhino-focus-ring: 0px 0px 1px 1px var(--rhino-button-active-border-color);
  --rhino-border-radius: 4px;
  --rhino-danger-border-color: red;
  --rhino-danger-background-color: #fdd;
  --rhino-text-color: #374151;
  --rhino-dark-text-color: white;
  --rhino-border-color: #cecece;
  --rhino-placeholder-text-color: #cecece;
  --rhino-dark-placeholder-text-color: gray;
  --rhino-button-text-color: #889;
  --rhino-button-dark-text-color: #eee;
  --rhino-button-border-color: #cecece;
  --rhino-button-disabled-text-color: #d1d5db;
  --rhino-button-disabled-border-color: #d1d5db;
  --rhino-button-disabled-background-color: #d1d5db;
  --rhino-button-active-border-color: #005a9c;
  --rhino-button-active-background-color: #e2efff;
  --rhino-toolbar-text-color: #676c74;
  --rhino-toolbar-icon-size: 1em;
  --rhino-dialog-border-color: hsl(var(--rhino-button-focus-background-color-hsl) / 50%);
  --rhino-button-focus-background-color: hsl(var(--rhino-button-focus-background-color-hsl));
  --rhino-button-focus-background-color-hsl: 219 26% 95%;
  --rhino-fake-selection-color: #dcdcdc;
  display: block;
  color: var(--buncss-light, var(--rhino-text-color)) var(--buncss-dark, var(--rhino-dark-text-color));
}

@keyframes rhino-blink {
  49% {
    border-color: unset;
  }

  50% {
    border-color: canvas;
  }

  99% {
    border-color: canvas;
  }
}

.rhino-editor .no-cursor {
  caret-color: transparent;
}

:where(.rhino-editor) .fake-cursor {
  animation: rhino-blink 1s;
  animation-iteration-count: infinite;
  position: relative;
  z-index: 1;
  border-left-style: solid;
  border-left-width: 1px;
  margin: 0 -1px 0 0;
  padding: 0;
}

:where(.rhino-editor .ProseMirror):not(:focus-within) .rhino-selection {
  background: var(--rhino-fake-selection-color);
}

.ProseMirror-separator {
  display: none !important;
}

.rhino-toolbar-button {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--rhino-border-color);
  border-radius: var(--rhino-border-radius);
  color: var(--buncss-light, var(--rhino-button-text-color)) var(--buncss-dark, var(--rhino-button-dark-text-color));
  font-size: inherit;
  display: inline-grid;
  background: canvas;
  padding: .4em;
}

.rhino-toolbar-button:-webkit-any([aria-disabled="true"], :disabled) {
  color: var(--rhino-button-disabled-text-color);
  border-color: var(--rhino-button-disabled-border-color);
}

.rhino-toolbar-button:-moz-any([aria-disabled="true"], :disabled) {
  color: var(--rhino-button-disabled-text-color);
  border-color: var(--rhino-button-disabled-border-color);
}

.rhino-toolbar-button:is([aria-disabled="true"], :disabled) {
  color: var(--rhino-button-disabled-text-color);
  border-color: var(--rhino-button-disabled-border-color);
}

.rhino-toolbar-button[aria-disabled="true"]:focus {
  border-color: var(--rhino-button-disabled-border-color);
}

.rhino-toolbar-button svg {
  min-height: var(--rhino-toolbar-icon-size);
  min-width: var(--rhino-toolbar-icon-size);
  max-height: var(--rhino-toolbar-icon-size);
  max-width: var(--rhino-toolbar-icon-size);
}

.rhino-toolbar-button:-webkit-any(:focus, :hover):not(:-webkit-any([aria-disabled="true"], :disabled)) {
  outline: #0000;
  border-color: var(--rhino-button-active-border-color);
}

.rhino-toolbar-button:-moz-any(:focus, :hover):not(:-moz-any([aria-disabled="true"], :disabled)) {
  outline: #0000;
  border-color: var(--rhino-button-active-border-color);
}

.rhino-toolbar-button:is(:focus, :hover):not(:is([aria-disabled="true"], :disabled)) {
  outline: #0000;
  border-color: var(--rhino-button-active-border-color);
}

.rhino-toolbar-button:focus:not(:-webkit-any([aria-disabled="true"], :disabled)) {
  box-shadow: var(--rhino-focus-ring);
}

.rhino-toolbar-button:focus:not(:-moz-any([aria-disabled="true"], :disabled)) {
  box-shadow: var(--rhino-focus-ring);
}

.rhino-toolbar-button:focus:not(:is([aria-disabled="true"], :disabled)) {
  box-shadow: var(--rhino-focus-ring);
}

.rhino-toolbar-button:hover:not(:-webkit-any([aria-disabled="true"], :disabled, [aria-pressed="true"], [part~="toolbar__button--active"])) {
  background-color: var(--rhino-button-focus-background-color);
  background-color: var(--buncss-light, var(--rhino-button-focus-background-color)) var(--buncss-dark, gray);
}

.rhino-toolbar-button:hover:not(:-moz-any([aria-disabled="true"], :disabled, [aria-pressed="true"], [part~="toolbar__button--active"])) {
  background-color: var(--rhino-button-focus-background-color);
  background-color: var(--buncss-light, var(--rhino-button-focus-background-color)) var(--buncss-dark, gray);
}

.rhino-toolbar-button:hover:not(:is([aria-disabled="true"], :disabled, [aria-pressed="true"], [part~="toolbar__button--active"])) {
  background-color: var(--rhino-button-focus-background-color);
  background-color: var(--buncss-light, var(--rhino-button-focus-background-color)) var(--buncss-dark, gray);
}

.rhino-toolbar-button:-webkit-any([aria-disabled="true"], :disabled):not([part~="toolbar__button--active"]) {
  color: var(--buncss-light, var(--rhino-button-disabled-text-color)) var(--buncss-dark, gray);
  border-color: var(--rhino-button-disabled-border-color);
}

.rhino-toolbar-button:-moz-any([aria-disabled="true"], :disabled):not([part~="toolbar__button--active"]) {
  color: var(--buncss-light, var(--rhino-button-disabled-text-color)) var(--buncss-dark, gray);
  border-color: var(--rhino-button-disabled-border-color);
}

.rhino-toolbar-button:is([aria-disabled="true"], :disabled):not([part~="toolbar__button--active"]) {
  color: var(--buncss-light, var(--rhino-button-disabled-text-color)) var(--buncss-dark, gray);
  border-color: var(--rhino-button-disabled-border-color);
}

.rhino-toolbar-button:-webkit-any(:focus, :hover):-webkit-any([aria-disabled="true"], :disabled):not([part~="toolbar__button--active"]) {
  outline: #0000;
  color: var(--buncss-light, var(--rhino-button-disabled-text-color)) var(--buncss-dark, gray);
  border-color: var(--rhino-button-disabled-border-color);
  box-shadow: 0 0 0 1px var(--rhino-button-disabled-border-color);
  box-shadow: 0 0 0 1px var(--buncss-light, var(--rhino-button-disabled-border-color)) var(--buncss-dark, transparent);
}

.rhino-toolbar-button:-moz-any(:focus, :hover):-moz-any([aria-disabled="true"], :disabled):not([part~="toolbar__button--active"]) {
  outline: #0000;
  color: var(--buncss-light, var(--rhino-button-disabled-text-color)) var(--buncss-dark, gray);
  border-color: var(--rhino-button-disabled-border-color);
  box-shadow: 0 0 0 1px var(--rhino-button-disabled-border-color);
  box-shadow: 0 0 0 1px var(--buncss-light, var(--rhino-button-disabled-border-color)) var(--buncss-dark, transparent);
}

.rhino-toolbar-button:is(:focus, :hover):is([aria-disabled="true"], :disabled):not([part~="toolbar__button--active"]) {
  outline: #0000;
  color: var(--buncss-light, var(--rhino-button-disabled-text-color)) var(--buncss-dark, gray);
  border-color: var(--rhino-button-disabled-border-color);
  box-shadow: 0 0 0 1px var(--rhino-button-disabled-border-color);
  box-shadow: 0 0 0 1px var(--buncss-light, var(--rhino-button-disabled-border-color)) var(--buncss-dark, transparent);
}

/* app/components/activity/list/component.css */
.activity-list__items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.activity-list__empty {
  padding-block: var(--spacing-s);
}

/* app/components/activity/list/divider/component.css */
.activity-list-divider {
  display: block;
}

.activity-list-divider__rule {
  border: none;
  border-top: 1px solid var(--color-outline-variant);
  margin: 0;
}

/* app/components/activity/list/item/component.css */
.activity-list-item {
  padding-block: var(--spacing-m);
}

.activity-list-item__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items:  flex-start;
}

.activity-list-item__right {
  flex-shrink: 0;
}

.activity-list-item__title-row {
  display: flex;
  justify-content: space-between;
  align-items:  start;
  gap: var(--spacing-m);
  margin-bottom: var(--spacing-2xs);
  width: 100%;
}

.activity-list-item__title {
  min-width: 0;
}

.activity-list-item__subtitle {
  margin: 0;
}

.activity-list-item__time {
  margin-top: var(--spacing-2xs);
  text-align: right;
}

/* app/components/app/header/component.css */
.app-header {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: var(--spacing-s);
  min-height: 6rem;
}

.app-header__actions {
  display: flex;
  align-items:  center;
  gap: var(--spacing-s);
  margin-left: auto;
}

.app-header__profile {
  display: inline-flex;
  align-items:  center;
}

/* app/components/app/header/item/component.css */
.app-header-item {
  position: relative;
  display: inline-flex;
}

.app-header-item__indicator {
  position: absolute;
  top: var(--spacing-2xs);
  right: var(--spacing-2xs);
  width: var(--dot-size-s);
  height: var(--dot-size-s);
  border-radius: var(--border-radius-rounded);
  background: var(--color-tertiary);
  border: var(--border-width-default) solid var(--color-surface);
}

/* app/components/app/settings_navigation/component.css */
.settings-navigation {
  align-self:  start;
}

.settings-navigation__list {
  display: flex;
  flex-direction: column;
}

/* app/components/app/settings_navigation/item/component.css */
.settings-navigation-item {
  display: block;
}

.settings-navigation-item__link {
  display: flex;
  align-items:  center;
  gap: var(--spacing-xs);
  padding-inline: var(--spacing-xs);
  border-radius: var(--border-radius-small);
  color: var(--color-on-surface);
  font-size: var(--text-step-s);
  line-height: var(--line-height-default);
  white-space: nowrap;
  transition: background var(--transition-base) var(--transition-easing), color var(--transition-base) var(--transition-easing);
  border: 1px solid #0000;
  height: 3rem;
}

.settings-navigation-item__link:hover {
  background: var(--color-surface-container-highest);
  color: var(--color-on-surface);
}

.settings-navigation-item__link--active {
  background: var(--color-surface-container-high);
  color: var(--color-tertiary);
  border-color: var(--color-outline);
}

.settings-navigation-item__icon {
  width: var(--icon-size-s);
  height: var(--icon-size-s);
  flex-shrink: 0;
}

.settings-navigation-item__label {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* app/components/app/sidebar/component.css */
.sidebar {
  padding-block: var(--spacing-m);
  padding-inline: var(--spacing-l);
  display: flex;
  position: sticky;
  flex-direction: column;
  justify-content: space-between;
  top: 0;
}

.sidebar .sidebar__navigation {
  display: flex;
  gap: var(--spacing-3xs);
  flex-direction: column;
}

.sidebar__footer .sidebar__footer-list {
  display: flex;
  gap: var(--spacing-s);
  flex-wrap: wrap;
}

.sidebar__footer .sidebar__footer-link {
  color: var(--color-on-surface-variant);
  padding-block: var(--spacing-s);
}

.sidebar__footer .sidebar__footer-link:hover {
  text-decoration: underline;
}

/* app/components/app/sidebar/item/component.css */
.sidebar-item {
  display: flex;
}

.sidebar-item__link {
  --transform: .25rem;
  display: flex;
  gap: var(--spacing-xs);
  position: relative;
  padding-block: var(--spacing-xs);
  font-size: var(--text-step-s);
  font-variation-settings: "wght" var(--weight-default);
  line-height: var(--line-height-default);
  transition: font-variation-settings var(--transition-base) var(--transition-easing), color var(--transition-base) var(--transition-easing), transform var(--transition-base) var(--transition-easing);
  flex-grow: 1;
  transform: translateX(0);
}

.sidebar-item__link:before {
  content: url("/assets/single-pattern-38aa7bc3.svg");
  position: absolute;
  transform: translate(calc(-50% - var(--transform)), -46%);
  z-index: -1;
  opacity: 0;
  transition: opacity var(--transition-fast) var(--transition-easing), transform var(--transition-fast) var(--transition-easing);
  top: 50%;
}

.sidebar-item__link:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
  left: 0;
}

.sidebar-item__link:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
  left: 0;
}

.sidebar-item__link:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
  left: 0;
}

.sidebar-item__link:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
  right: 0;
}

.sidebar-item__link:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
  right: 0;
}

.sidebar-item__link:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
  right: 0;
}

.sidebar-item__link:not(.sidebar-item__link--active):hover {
  font-variation-settings: "wght" var(--weight-bold);
  color: var(--color-primary);
  transform: translateX(var(--transform));
}

.sidebar-item__link:not(.sidebar-item__link--active):hover:before {
  opacity: 1;
  transform: translate(calc(-50% - var(--transform)), -46%);
  transition: opacity var(--transition-base) var(--transition-easing), transform var(--transition-base) var(--transition-easing);
}

.sidebar-item__link--small {
  align-items:  center;
  gap: var(--spacing-2xs);
  font-size: var(--text-step-xs);
}

.sidebar-item__link--active {
  font-variation-settings: "wght" var(--weight-bold);
  color: var(--color-primary);
}

.sidebar-item__link--active:before {
  opacity: 1;
  transform: translate(-50%, -46%);
}

.sidebar-item__counter {
  background-color: var(--color-tertiary);
  color: var(--color-on-tertiary);
  display: grid;
  border-radius: var(--border-radius-rounded);
  aspect-ratio: 1;
  line-height: var(--line-height-small);
  place-items:  center;
}

/* app/components/brands/campaigns/campaign_card/component.css */
.campaign-card {
  background: var(--color-surface-container-high);
  border: var(--border-width-default) solid var(--color-outline);
  border-radius: var(--border-radius-large);
  display: flex;
  overflow: clip;
  max-height: 12rem;
}

.campaign-card__content {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-s);
  padding: var(--spacing-l);
  flex-direction: column;
  width: 100%;
  min-width: 0;
}

.campaign-card__header {
  display: flex;
  gap: var(--spacing-2xs);
  flex-direction: column;
  min-width: 0;
}

.campaign-card__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-card__side {
  overflow: clip;
  width: 30%;
  min-width: 5rem;
  max-width: 15rem;
}

.campaign-card__image {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.campaign-card__header-subline {
  display: flex;
  align-items:  center;
}

.campaign-card__header-subline li {
  display: flex;
  align-items:  center;
}

.campaign-card__header-subline > li + li:before {
  content: "|" / "";
  padding-inline: var(--spacing-s);
}

.campaign-card__footer {
  display: flex;
  align-items:  center;
  gap: var(--spacing-2xs);
  margin-left: auto;
}

/* app/components/company_delete/component.css */
.company-delete {
  display: flex;
  gap: var(--spacing-xs);
  flex-direction: column;
}

.company-delete__title {
  display: flex;
  align-items:  center;
  gap: var(--spacing-2xs);
}

.company-delete__description {
  color: var(--color-on-surface-variant);
}

.company-delete__actions {
  display: flex;
  gap: var(--spacing-xs);
}

/* app/components/company_expand/component.css */
.company-expand__trigger {
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-base) var(--transition-easing);
}

.company-expand__trigger:hover {
  background: var(--color-surface-container);
}

.company-expand__chevron {
  transition: transform var(--transition-base) var(--transition-easing);
  color: var(--color-outline-variant);
}

.company-expand__trigger--open .company-expand__chevron {
  transform: rotate(180deg);
}

.company-expand__td {
  border-top: 1px solid var(--color-outline);
  background: var(--color-surface-container-low);
  padding: var(--spacing-s) var(--spacing-m);
}

.company-expand__member-list {
  display: flex;
  gap: var(--spacing-2xs);
  flex-direction: column;
}

.company-expand__member-item {
  display: flex;
  align-items:  center;
  gap: var(--spacing-s);
  padding: var(--spacing-xs) var(--spacing-s);
  background: var(--color-surface-container);
  border: 1px solid var(--color-outline);
  border-radius: var(--border-radius-small);
}

.company-expand__member-info {
  display: flex;
  align-items:  center;
  gap: var(--spacing-s);
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

.company-expand__member-email {
  font-size: var(--text-step-xs);
  font-weight: var(--weight-medium);
  color: var(--color-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.company-expand__member-meta {
  display: flex;
  align-items:  center;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}

.company-expand__member-actions {
  display: flex;
  align-items:  center;
  gap: var(--spacing-2xs);
  flex-shrink: 0;
  margin-left: auto;
}

/* app/components/company_header/component.css */
.company-header {
  display: flex;
  gap: var(--spacing-m);
  flex-direction: column;
}

.company-header__logo-row {
  display: flex;
  align-items:  center;
  gap: var(--spacing-s);
}

.company-header__tag-row {
  display: flex;
  align-items:  center;
  gap: var(--spacing-m);
  flex-wrap: wrap;
}

.company-header__description {
  color: var(--color-on-surface);
  max-width: 62ch;
}

/* app/components/contact/card/component.css */
.contact-card {
  position: relative;
  display: flex;
  gap: var(--spacing-s);
  padding: var(--spacing-s);
  background: var(--color-surface-container-high);
  border: var(--border-width-default) solid var(--color-outline);
  border-radius: var(--border-radius-medium);
  overflow: hidden;
  isolation: isolate;
  flex-direction: column;
  width: 100%;
  min-width: 15rem;
}

.contact-card__header {
  display: flex;
  align-items:  center;
  gap: var(--spacing-xs);
  position: relative;
  z-index: 1;
}

.contact-card__identity {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.contact-card__name {
  color: var(--color-on-surface);
}

.contact-card__role {
  color: var(--color-on-surface-variant);
}

.contact-card__actions {
  position: relative;
  z-index: 1;
  display: flex;
  gap: var(--spacing-2xs);
  flex-direction: column;
}

.contact-card__action {
  display: inline-flex;
  align-items:  center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-s);
  border: var(--border-width-default) solid var(--color-on-surface-variant);
  border-radius: var(--border-radius-rounded);
  color: var(--color-on-surface-variant);
  width: -moz-fit-content;
  width: fit-content;
  min-width: 0;
}

.contact-card__action-text {
  white-space: nowrap;
}

.contact-card--assignment {
  background: var(--color-primary-container);
  border-color: var(--color-purple-65);
}

.contact-card--assignment:before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
  background-image: url("/assets/contact-card-pattern-6ff8fb6b.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 12.78rem;
  height: 22.75rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)rotate(90deg)scaleY(-1);
}

.contact-card--assignment .contact-card__role {
  color: var(--color-on-primary-container);
}

.contact-card--assignment .contact-card__action {
  border-color: var(--color-purple-65);
  color: var(--color-on-primary-container);
}

.contact-card__action-button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  padding: 0 var(--spacing-s);
  background: var(--color-primary-container);
  border: var(--border-width-default) solid var(--color-purple-65);
  border-radius: var(--border-radius-rounded);
  color: var(--color-on-primary-container);
  white-space: nowrap;
  justify-content: center;
  align-items:  center;
  width: 100%;
  min-height: 2rem;
}

.contact-card__action-button:hover {
  background: var(--color-primary-accent);
}

/* app/components/gender_range_slider/component.css */
.gender-range-slider {
  display: block;
  width: 100%;
}

.gender-range-slider__value {
  color: var(--color-on-surface-highlight);
  font-weight: var(--weight-medium);
}

.gender-range-slider .range-slider__input::-webkit-slider-runnable-track {
  background: var(--color-primary);
}

.gender-range-slider .range-slider__input::-moz-range-track {
  background: var(--color-primary);
}

/* app/components/login_failure_dialog/component.css */
.login-failure-dialog__icon {
  display: block;
  width: 5rem;
  height: auto;
}

.login-failure-dialog__title-group {
  display: flex;
  align-items:  center;
  gap: var(--spacing-s);
  color: var(--color-on-surface);
  flex-direction: column;
}

.login-failure-dialog__display-title {
  color: var(--color-on-surface-highlight);
}

.login-failure-dialog__title-group-text {
  display: flex;
  align-items:  center;
  gap: var(--spacing-3xs);
  flex-direction: column;
}

.login-failure-dialog__description {
  max-width: 35.6875rem;
}

/* app/components/magic_textarea/component.css */
.magic-textarea .form-control {
  border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
  border: none;
}

.magic-textarea .form-control:has(:focus) {
  outline: none;
}

.magic-textarea__input {
  border-radius: var(--border-radius-medium);
  border: var(--border-width-default) solid var(--color-outline-variant);
  border-bottom: none;
}

.magic-textarea__input:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.magic-textarea__input:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.magic-textarea__input:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.magic-textarea__input:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.magic-textarea__input:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.magic-textarea__input:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.magic-textarea__footer {
  display: flex;
  align-items:  center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-s);
  background: var(--color-primary-container);
  border: var(--border-width-default) solid var(--color-primary);
}

.magic-textarea__footer:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
  border-bottom-right-radius: var(--border-radius-medium);
  border-bottom-left-radius: var(--border-radius-medium);
}

.magic-textarea__footer:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
  border-bottom-right-radius: var(--border-radius-medium);
  border-bottom-left-radius: var(--border-radius-medium);
}

.magic-textarea__footer:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
  border-bottom-right-radius: var(--border-radius-medium);
  border-bottom-left-radius: var(--border-radius-medium);
}

.magic-textarea__footer:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  border-bottom-left-radius: var(--border-radius-medium);
  border-bottom-right-radius: var(--border-radius-medium);
}

.magic-textarea__footer:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  border-bottom-left-radius: var(--border-radius-medium);
  border-bottom-right-radius: var(--border-radius-medium);
}

.magic-textarea__footer:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  border-bottom-left-radius: var(--border-radius-medium);
  border-bottom-right-radius: var(--border-radius-medium);
}

.magic-textarea__hint {
  font-size: var(--text-step-2xs);
  color: var(--color-on-primary-container);
  flex: 1 0 0;
  min-width: 0;
  line-height: 1.3;
}

.magic-textarea__button {
  padding-left: var(--spacing-xs);
  flex-shrink: 0;
}

.magic-textarea__button[hidden] {
  display: none;
}

.magic-textarea__button:disabled {
  opacity: .5;
  pointer-events: auto;
  cursor: not-allowed;
}

.magic-textarea__button--loading:disabled {
  opacity: 1;
}

.magic-textarea__icon {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
  flex-shrink: 0;
}

@keyframes magic-textarea-spin {
  to {
    transform: rotate(360deg);
  }
}

.magic-textarea__icon--spinning {
  animation: magic-textarea-spin 1s linear infinite;
}

/* app/components/package_card/component.css */
.package-card {
  display: flex;
  overflow: hidden;
  border: var(--border-width-default) solid var(--color-outline-variant);
  border-radius: var(--border-radius-medium);
  background: var(--color-surface-container-high);
  flex-direction: column;
  max-width: 36rem;
}

.package-card--ai {
  border-color: var(--color-primary);
  background: var(--color-primary-container);
}

.package-card--last-minute {
  border-color: var(--color-outline-highlight);
}

.package-card__header {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: var(--spacing-s);
  padding: var(--spacing-s) var(--spacing-l);
  background: var(--color-surface-container-highest);
  border-bottom: var(--border-width-default) solid var(--color-outline-variant);
}

.package-card--ai .package-card__header {
  background: var(--color-primary-accent);
  border-bottom-color: var(--color-outline-primary-start);
}

.package-card__ai-flag {
  display: inline-flex;
  align-items:  center;
  gap: var(--spacing-2xs);
  color: var(--color-on-primary-container);
}

.package-card__status {
  display: inline-flex;
  align-items:  center;
  gap: var(--spacing-2xs);
}

.package-card__status-dot {
  width: var(--spacing-2xs);
  height: var(--spacing-2xs);
  border-radius: var(--border-radius-rounded);
  background: var(--color-states-on-success-container);
  flex-shrink: 0;
}

.package-card__status-label {
  color: var(--color-states-on-success);
}

.package-card__period {
  display: inline-flex;
  align-items:  center;
  gap: var(--spacing-3xs);
  color: var(--color-on-surface-variant);
}

.package-card__period--highlight {
  color: var(--color-on-surface-highlight);
}

.package-card__body {
  display: flex;
  gap: var(--spacing-s);
  padding: var(--spacing-m) var(--spacing-l) var(--spacing-l);
  flex-direction: column;
}

.package-card__channels {
  display: flex;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}

.package-card__description {
  color: var(--color-on-surface);
}

.package-card__price {
  color: var(--color-on-surface);
  margin-top: var(--spacing-2xs);
}

.package-card__price--highlight {
  color: var(--color-on-surface-highlight);
}

.package-card__price-original {
  color: var(--color-on-surface-variant);
  text-decoration: line-through;
}

.package-card__footer {
  display: flex;
  align-items:  center;
  gap: var(--spacing-s);
  padding: 0 var(--spacing-l) var(--spacing-l);
}

.package-card__footer > * {
  flex: 1;
}

.package-card__action {
  width: 100%;
}

/* app/components/partnership/card/component.css */
.partnership-card {
  --partnership-card-min-width: 20rem;
  border: var(--border-width-default) solid var(--partnership-card-outline);
  border-radius: var(--border-radius-medium);
  overflow: clip;
  min-width: var(--partnership-card-min-width);
}

.partnership-card--active {
  --partnership-card-outline: var(--color-states-success-outline);
  --partnership-card-header-bg: var(--color-states-success-container);
  --partnership-card-dot: var(--color-states-on-success-container);
  --partnership-card-status-text: var(--color-states-on-success-container);
}

.partnership-card--completed {
  --partnership-card-outline: var(--color-states-info-outline);
  --partnership-card-header-bg: var(--color-states-info-container);
  --partnership-card-dot: var(--color-states-on-info-container);
  --partnership-card-status-text: var(--color-states-on-info-container);
}

.partnership-card__header {
  display: flex;
  padding: var(--spacing-s) var(--spacing-m);
  background: var(--partnership-card-header-bg);
  border-bottom: var(--border-width-default) solid var(--partnership-card-outline);
  justify-content: space-between;
  align-items:  center;
}

.partnership-card__status {
  display: flex;
  align-items:  center;
  gap: var(--spacing-2xs);
}

.partnership-card__dot {
  width: var(--dot-size-s);
  height: var(--dot-size-s);
  border-radius: var(--border-radius-rounded);
  background: var(--partnership-card-dot);
}

.partnership-card__status-label {
  color: var(--partnership-card-status-text);
}

.partnership-card__date {
  color: var(--color-on-surface);
}

.partnership-card__body {
  display: flex;
  gap: var(--spacing-m);
  padding: var(--spacing-m);
  flex-direction: column;
}

.partnership-card__campaign {
  display: flex;
  gap: var(--spacing-3xs);
  flex-direction: column;
}

.partnership-card__campaign-name {
  color: var(--color-on-surface);
  margin: 0;
}

.partnership-card__details {
  display: flex;
  gap: var(--spacing-m);
  flex-wrap: wrap;
}

.partnership-card__detail {
  display: flex;
  gap: var(--spacing-3xs);
  flex-direction: column;
  flex: 1 0 7.5rem;
}

.partnership-card__label {
  color: var(--color-on-surface-variant);
}

.partnership-card__value {
  color: var(--color-on-surface);
}

.partnership-card__value--truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.partnership-card__file {
  display: flex;
  align-items:  center;
  gap: var(--spacing-xs);
  color: var(--color-on-surface);
  text-decoration: none;
}

/* app/components/password_reset_dialog/component.css */
.password-reset-dialog__body {
  display: flex;
  align-items:  center;
  gap: var(--spacing-l);
  flex-direction: column;
}

.password-reset-dialog__form {
  display: flex;
  gap: var(--spacing-m);
  flex-direction: column;
  width: 100%;
}

/* app/components/request/row/component.css */
.request-row {
  border: var(--border-width-default) solid var(--color-outline);
  border-radius: var(--border-radius-large);
  overflow: hidden;
}

.request-row--open {
  border-color: var(--color-outline-variant);
}

.request-row__summary {
  display: grid;
  grid-template-columns: 2fr 3fr 1fr 13rem 2.5rem;
  align-items:  center;
  gap: var(--spacing-m);
  padding: var(--spacing-m);
  cursor: pointer;
}

.request-row--open .request-row__summary {
  background: var(--color-surface-container-high);
}

.request-row__cell {
  display: flex;
  gap: var(--spacing-3xs);
  flex-direction: column;
  min-width: 0;
}

.request-row__cell--status {
  align-items:  flex-start;
}

.request-row__primary {
  color: var(--color-on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.request-row__secondary {
  display: inline-flex;
  align-items:  center;
  gap: var(--spacing-2xs);
  color: var(--color-on-surface);
}

.request-row__company-logo {
  width: var(--icon-size-s);
  height: var(--icon-size-s);
  border-radius: var(--border-radius-small);
  object-fit: cover;
}

.request-row__toggle {
  display: inline-flex;
  min-width: var(--touch-target-s);
  min-height: var(--touch-target-s);
  cursor: pointer;
  color: var(--color-on-surface-variant);
  transition: color var(--transition-fast) var(--transition-easing);
  background: none;
  border: none;
  justify-content: center;
  align-items:  center;
}

.request-row__toggle:hover {
  color: var(--color-on-surface);
}

.request-row__chevron {
  width: var(--icon-size-s);
  height: var(--icon-size-s);
  transition: transform var(--transition-fast) var(--transition-easing);
}

.request-row--open .request-row__chevron {
  transform: rotate(180deg);
}

.request-row__details {
  display: none;
  padding: var(--spacing-m);
}

.request-row--open .request-row__details {
  display: flex;
  gap: var(--spacing-m);
  flex-direction: column;
}

.request-row__detail-grid {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  column-gap: var(--spacing-l);
}

.request-row__detail {
  display: flex;
  gap: var(--spacing-3xs);
  flex-direction: column;
}

.request-row__label {
  color: var(--color-on-surface-variant);
}

.request-row__value {
  color: var(--color-on-surface);
}

.request-row__actions {
  display: flex;
  justify-content: flex-end;
  align-items:  center;
  gap: var(--spacing-s);
}

/* app/components/request/row/header/component.css */
.request-row-header {
  display: grid;
  grid-template-columns: 2fr 3fr 1fr 13rem 2.5rem;
  column-gap: var(--spacing-m);
  padding: 0 var(--spacing-m);
  color: var(--color-on-surface);
}

/* app/components/rights/card/component.css */
.rights-card {
  display: flex;
  gap: var(--spacing-s);
  flex-direction: column;
}

.rights-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--border-radius-large);
  outline-offset: 2px;
}

.rights-card__link:focus-visible {
  outline: 2px solid var(--color-primary);
}

.rights-card__cover {
  position: relative;
}

.rights-card__bookmark {
  position: absolute;
  top: var(--spacing-s);
  right: var(--spacing-s);
  display: inline-flex;
  min-width: var(--touch-target-m);
  min-height: var(--touch-target-m);
  padding: var(--spacing-xs);
  background: var(--color-secondary-container);
  border: var(--border-width-default) solid var(--color-outline-secondary);
  border-radius: var(--border-radius-small);
  cursor: pointer;
  color: var(--color-on-secondary-container);
  transition: background var(--transition-fast) var(--transition-easing);
  justify-content: center;
  align-items:  center;
}

.rights-card__bookmark:hover {
  background: var(--color-deep-blue-30);
}

.rights-card__bookmark-icon {
  width: var(--icon-size-m);
  height: var(--icon-size-m);
  stroke-width: var(--icon-strokewidth-m);
}

.rights-card__body {
  display: flex;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-s);
  flex-direction: column;
}

.rights-card__title {
  font-family: var(--fonts-family-display);
  font-size: var(--text-step-l);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-display);
  color: var(--color-on-surface);
  margin: 0;
}

.rights-card__meta {
  display: flex;
  align-items:  center;
  gap: var(--spacing-xs);
  color: var(--color-on-surface);
  flex-wrap: wrap;
}

.rights-card__separator, .rights-card__tags {
  color: var(--color-on-surface);
}

/* app/components/search/component.css */
@property --border-grad-start {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --border-grad-end {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --gradient-stop {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

.search {
  --border-grad-start: var(--color-outline);
  --border-grad-end: var(--color-outline);
  display: flex;
  align-items:  center;
  gap: var(--spacing-xs);
  border-radius: var(--border-radius-rounded);
  border: var(--border-width-default) solid transparent;
  background: linear-gradient(var(--color-surface-container) 0 0) padding-box, linear-gradient(135deg, var(--border-grad-start) 0%, var(--border-grad-end) var(--gradient-stop)) border-box;
  position: relative;
  color: var(--color-on-surface-variant);
  transition: color var(--transition-base) var(--transition-easing), --border-grad-start var(--transition-base) var(--transition-easing), --border-grad-end var(--transition-base) var(--transition-easing), --gradient-stop var(--transition-base) var(--transition-easing);
}

.search:has(.search__input:focus) {
  color: var(--color-on-surface);
  --border-grad-start: var(--color-outline-tertiary-start);
  --border-grad-end: var(--color-outline-tertiary-end);
  --icon-color: var(--color-tertiary);
  --gradient-stop: 100%;
}

@media (any-pointer: fine) and (any-hover: hover) {
  .search:has(.search__input:hover) {
    color: var(--color-on-surface);
    --border-grad-start: var(--color-outline-tertiary-start);
    --border-grad-end: var(--color-outline-tertiary-end);
    --icon-color: var(--color-tertiary);
    --gradient-stop: 100%;
  }
}

.search__input {
  padding: var(--spacing-xs) var(--spacing-s);
  background-color: #0000;
  border: none;
  min-width: 16rem;
  padding-inline-start: calc(var(--spacing-s) * 2 + var(--icon-size-s));
}

.search__input:focus {
  outline: none;
}

.search__input::placeholder {
  color: var(--color-on-surface-variant);
}

.search__icon {
  position: absolute;
  top: 50%;
  left: var(--spacing-s);
  pointer-events: none;
  stroke: var(--icon-color, currentColor);
  transition: stroke var(--transition-base) var(--transition-easing);
  transform: translateY(-50%);
}

/* app/components/teaser/component.css */
.teaser {
  display: flex;
  align-items:  flex-start;
  gap: var(--spacing-s);
  padding: var(--spacing-m);
  background: var(--color-states-info-container);
  border: var(--border-width-bold) solid var(--color-states-info-outline);
  border-radius: var(--border-radius-medium);
  flex-direction: column;
}

.teaser__title, .teaser__description {
  color: var(--color-states-on-info-container);
  margin: 0;
}

/* app/components/todos/component.css */
.todos {
  display: flex;
  gap: var(--spacing-m);
  flex-direction: column;
}

.todos__section {
  display: flex;
  gap: var(--spacing-3xs);
  flex-direction: column;
}

.todos__section:not(:has(.todos__entries > *)) {
  display: none;
}

.todos__more-button {
  display: inline-flex;
  cursor: pointer;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  background: none;
  border: none;
  align-self:  flex-start;
  align-items:  center;
  padding: 0;
}

.todos__more-button:hover {
  opacity: .8;
}

.todos__section-label {
  color: var(--color-on-surface);
}

.todos__section-label--completed {
  color: var(--color-on-surface-variant);
}

/* app/components/todos/item/component.css */
.todos-item {
  min-height: var(--touch-target-m);
  padding: var(--spacing-xs) 0;
}

.todos-item__label {
  color: var(--color-on-surface);
  padding-top: 1px;
}

.todos-item__label--link {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.todos-item__label--link:hover {
  text-decoration: none;
}

.todos-item__label--done {
  color: var(--color-on-surface-variant);
  text-decoration: line-through;
  text-decoration-skip-ink: none;
}

/* app/components/ui/action_card/component.css */
.action-card {
  position: relative;
  padding: var(--spacing-m) var(--spacing-l);
  background-color: var(--color-primary-container);
  border: 1px solid var(--color-primary);
  border-radius: var(--border-radius-large);
}

.action-card__arrow {
  color: var(--color-primary);
}

.action-card__link {
  border-radius: inherit;
  position: absolute;
  inset: 0;
}

/* app/components/ui/alert/component.css */
.alert {
  --alert-width: 22.5rem;
  --alert-bottom: 3.75rem;
  display: flex;
  gap: var(--spacing-2xs);
  padding: var(--spacing-s);
  border: var(--border-width-default) solid var(--alert-outline);
  border-radius: var(--border-radius-small);
  background: var(--alert-container);
  width: var(--alert-width);
  position: fixed;
  bottom: var(--alert-bottom);
  right: var(--spacing-s);
  z-index: 100;
  flex-direction: column;
}

.alert--info {
  --alert-container: var(--color-states-info-container);
  --alert-outline: var(--color-states-info-outline);
  --alert-accent: var(--color-states-on-info-container);
}

.alert--pending {
  --alert-container: var(--color-states-pending-container);
  --alert-outline: var(--color-states-pending-outline);
  --alert-accent: var(--color-states-on-pending-container);
}

.alert--draft {
  --alert-container: var(--color-states-draft-container);
  --alert-outline: var(--color-states-draft-outline);
  --alert-accent: var(--color-states-on-draft-container);
}

.alert--success {
  --alert-container: var(--color-states-success-container);
  --alert-outline: var(--color-states-success-outline);
  --alert-accent: var(--color-states-on-success-container);
}

.alert--attention {
  --alert-container: var(--color-states-attention-container);
  --alert-outline: var(--color-states-attention-outline);
  --alert-accent: var(--color-states-on-attention-container);
}

.alert--error {
  --alert-container: var(--color-states-error-container);
  --alert-outline: var(--color-states-error-outline);
  --alert-accent: var(--color-states-on-error-container);
}

.alert--ai-generated {
  --alert-container: var(--color-primary-container);
  --alert-outline: var(--color-primary);
  --alert-accent: var(--color-on-primary-container);
}

.alert__header {
  display: flex;
  align-items:  center;
  gap: var(--spacing-2xs);
}

.alert__icon {
  width: var(--spacing-s);
  height: var(--spacing-s);
  color: var(--alert-accent);
  flex-shrink: 0;
}

.alert__title {
  font-size: var(--text-step-xs);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-display);
  color: var(--alert-accent);
}

.alert__body {
  font-size: var(--text-step-xs);
  font-weight: var(--weight-default);
  line-height: var(--line-height-default);
  color: var(--color-on-surface);
}

.alert__dismiss {
  display: flex;
  min-width: var(--touch-target-m);
  min-height: var(--touch-target-m);
  margin: calc(-1 * var(--spacing-xs));
  padding: var(--spacing-xs);
  cursor: pointer;
  color: var(--alert-accent);
  transition: opacity var(--transition-fast);
  background: none;
  border: none;
  justify-content: center;
  align-items:  center;
  margin-left: auto;
}

.alert__dismiss-icon {
  width: var(--spacing-s);
  height: var(--spacing-s);
}

/* app/components/ui/avatar/component.css */
.avatar {
  display: flex;
  align-items:  center;
  gap: var(--spacing-xs);
  flex: none;
}

.avatar__frame {
  width: var(--avatar-size);
  height: var(--avatar-size);
  display: flex;
  background: var(--color-surface-container-highest);
  overflow: hidden;
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
}

.avatar--xs {
  --avatar-size: var(--avatar-size-xs);
}

.avatar--s {
  --avatar-size: var(--avatar-size-s);
}

.avatar--m {
  --avatar-size: var(--avatar-size-m);
}

.avatar--l {
  --avatar-size: var(--avatar-size-l);
}

.avatar--xl {
  --avatar-size: var(--avatar-size-xl);
}

.avatar--circle .avatar__frame, .avatar--circle .avatar__image {
  border-radius: var(--border-radius-rounded);
}

.avatar--square .avatar__frame, .avatar--square .avatar__image {
  border-radius: var(--border-radius-small-inner);
}

.avatar--bordered {
  gap: var(--spacing-2xs);
  padding: var(--spacing-3xs) var(--spacing-xs) var(--spacing-3xs) var(--spacing-3xs);
  border: var(--border-width-default) solid var(--color-outline-secondary);
  border-radius: var(--border-radius-small);
}

.avatar--bordered .avatar__name {
  font-size: var(--text-step-xs);
  color: var(--color-on-surface);
}

.avatar--accent .avatar__frame {
  background: var(--color-orange-70);
}

.avatar--accent .avatar__initials {
  color: var(--color-deep-blue-10);
  font-family: var(--fonts-family-display);
  font-weight: var(--weight-black);
  font-size: var(--text-step-m);
  letter-spacing: .03em;
}

.avatar__image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.avatar__initials {
  font-weight: var(--weight-medium);
  line-height: var(--line-height-default);
  color: var(--color-on-surface-variant);
  font-size: var(--text-step-2xs);
}

.avatar--m .avatar__initials {
  font-size: var(--text-step-xs);
}

.avatar__name {
  font-size: var(--text-step-s);
  font-weight: var(--weight-default);
  line-height: var(--line-height-default);
  color: var(--color-on-surface-variant);
}

.avatar--xs .avatar__name {
  font-size: var(--text-step-xs);
}

/* app/components/ui/badge/component.css */
.badge {
  display: inline-flex;
  justify-content: center;
  align-items:  center;
  gap: var(--spacing-2xs);
  padding: var(--spacing-2xs) var(--spacing-xs);
  border: var(--border-width-default) solid var(--badge-outline);
  border-radius: var(--border-radius-small);
  background: var(--badge-bg);
  color: var(--badge-text);
  min-width: var(--spacing-xl);
  flex-shrink: 0;
}

.badge--blue {
  --badge-bg: var(--color-blue-20);
  --badge-outline: var(--color-blue-40);
  --badge-text: var(--color-blue-70);
}

.badge--pink {
  --badge-bg: var(--color-pink-20);
  --badge-outline: var(--color-pink-40);
  --badge-text: var(--color-pink-70);
}

.badge--turquoise {
  --badge-bg: var(--color-turquoise-20);
  --badge-outline: var(--color-turquoise-40);
  --badge-text: var(--color-turquoise-70);
}

.badge--red {
  --badge-bg: var(--color-red-20);
  --badge-outline: var(--color-red-40);
  --badge-text: var(--color-red-70);
}

.badge--orange {
  --badge-bg: var(--color-orange-20);
  --badge-outline: var(--color-orange-40);
  --badge-text: var(--color-orange-70);
}

.badge--green {
  --badge-bg: var(--color-green-20);
  --badge-outline: var(--color-green-40);
  --badge-text: var(--color-green-70);
}

.badge__icon {
  width: var(--icon-size-s);
  height: var(--icon-size-s);
  flex-shrink: 0;
}

.badge__text {
  font-size: var(--text-step-2xs);
  font-weight: var(--weight-medium);
  line-height: var(--line-height-display);
  white-space: nowrap;
}

.badge--corner {
  position: absolute;
  top: calc(var(--spacing-2xl) * -1 - var(--border-width-default));
  left: calc(var(--spacing-2xl) * -1 - var(--border-width-default));
  z-index: 2;
  padding: var(--spacing-2xs) var(--spacing-s);
  border-top-left-radius: var(--border-radius-small);
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: var(--border-radius-small);
}

/* app/components/ui/badge/corner/component.css */
.badge-corner {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  background: var(--corner-bg);
  border: var(--border-width-default) solid var(--corner-outline);
  border-top-left-radius: var(--border-radius-state-corner);
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: var(--border-radius-state-corner);
  align-items: stretch;
  top: 0;
  left: 0;
}

.badge-corner:has(.badge-corner__trigger) {
  border-top-right-radius: 0;
  border-bottom-right-radius: var(--border-radius-small);
}

.badge-corner .badge {
  background: none;
  border: none;
  border-radius: 0;
}

.badge-corner--state-draft {
  --corner-bg: var(--color-states-draft);
  --corner-trigger-bg: var(--color-states-draft-container);
  --corner-outline: var(--color-states-draft-outline);
  --corner-text: var(--color-states-on-draft);
}

.badge-corner--state-pending {
  --corner-bg: var(--color-states-pending);
  --corner-trigger-bg: var(--color-states-pending-container);
  --corner-outline: var(--color-states-pending-outline);
  --corner-text: var(--color-states-on-pending);
}

.badge-corner--state-attention {
  --corner-bg: var(--color-states-attention);
  --corner-trigger-bg: var(--color-states-attention-container);
  --corner-outline: var(--color-states-attention-outline);
  --corner-text: var(--color-states-on-attention);
}

.badge-corner--state-success {
  --corner-bg: var(--color-states-success);
  --corner-trigger-bg: var(--color-states-success-container);
  --corner-outline: var(--color-states-success-outline);
  --corner-text: var(--color-states-on-success);
}

.badge-corner--state-error {
  --corner-bg: var(--color-states-error);
  --corner-trigger-bg: var(--color-states-error-container);
  --corner-outline: var(--color-states-error-outline);
  --corner-text: var(--color-states-on-error);
}

.badge-corner--state-info {
  --corner-bg: var(--color-states-info);
  --corner-trigger-bg: var(--color-states-info-container);
  --corner-outline: var(--color-states-info-outline);
  --corner-text: var(--color-states-on-info);
}

.badge-corner__trigger {
  display: inline-flex;
  width: var(--spacing-2xl);
  background: var(--corner-trigger-bg);
  border: none;
  border-left: var(--border-width-default) solid var(--corner-outline);
  border-top-right-radius: 0;
  border-bottom-right-radius: var(--border-radius-small);
  cursor: pointer;
  justify-content: center;
  align-items:  center;
}

.badge-corner__menu {
  display: none;
  position: absolute;
  margin-top: var(--spacing-2xs);
  background: var(--corner-trigger-bg);
  border: var(--border-width-default) solid var(--corner-outline);
  border-radius: var(--border-radius-small);
  overflow: hidden;
  z-index: 3;
  min-width: 100%;
  top: 100%;
  left: 0;
}

.badge-corner--open .badge-corner__menu {
  display: block;
}

.badge-corner__menu-item {
  display: flex;
  align-items:  center;
  gap: var(--spacing-2xs);
  padding: var(--spacing-2xs) var(--spacing-s);
  color: var(--color-on-surface);
  font-size: var(--text-step-2xs);
  text-align: left;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
}

.badge-corner__menu-item:hover {
  background: var(--color-surface-container-high);
}

.badge-corner__menu-icon {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

.badge-corner__chevron {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
  color: var(--corner-text);
  stroke-width: var(--icon-strokewidth-xs);
}

/* app/components/ui/button/component.css */
.button {
  display: inline-flex;
  border-radius: var(--border-radius-rounded);
  border: var(--border-width-default) solid transparent;
  justify-content: center;
  align-items:  center;
  gap: var(--spacing-2xs);
  font-weight: var(--weight-medium);
  line-height: var(--line-height-display);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  --button-fill-hover: color-mix(in oklab, var(--button-fill) 85%, var(--button-on-fill));
  --button-on-fill-hover: var(--color-on-surface);
}

.button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.button--color-primary {
  --button-fill: linear-gradient(to left, var(--color-outline-primary-start), var(--color-outline-primary-end));
  --button-on-fill: var(--color-on-primary);
  --button-tint: var(--color-primary-container);
  --button-on-tint: var(--color-on-primary-container);
  --button-outline: var(--color-primary);
  --button-fill-hover: var(--color-primary);
  --button-on-fill-hover: var(--color-on-primary);
}

.button--color-secondary {
  --button-fill: var(--color-secondary);
  --button-on-fill: var(--color-on-secondary);
  --button-tint: var(--color-secondary-container);
  --button-on-tint: var(--color-on-secondary-container);
  --button-outline: var(--color-on-surface-variant);
}

.button--color-tertiary {
  --button-fill: var(--color-tertiary);
  --button-on-fill: var(--color-on-tertiary);
  --button-tint: var(--color-tertiary-container);
  --button-on-tint: var(--color-on-tertiary-container);
  --button-outline: var(--color-tertiary);
  --button-fill-hover: color-mix(in oklab, var(--color-tertiary) 80%, white);
  --button-on-fill-hover: var(--color-on-tertiary);
}

.button--color-info {
  --button-fill: var(--color-states-info);
  --button-on-fill: var(--color-states-on-info);
  --button-tint: var(--color-states-info-container);
  --button-on-tint: var(--color-states-on-info-container);
  --button-outline: var(--color-states-info-outline);
}

.button--color-success {
  --button-fill: var(--color-states-success);
  --button-on-fill: var(--color-states-on-success);
  --button-tint: var(--color-states-success-container);
  --button-on-tint: var(--color-states-on-success-container);
  --button-outline: var(--color-states-success-outline);
}

.button--color-attention {
  --button-fill: var(--color-states-attention);
  --button-on-fill: var(--color-states-on-attention);
  --button-tint: var(--color-states-attention-container);
  --button-on-tint: var(--color-states-on-attention-container);
  --button-outline: var(--color-states-attention-outline);
}

.button--color-error {
  --button-fill: var(--color-states-error);
  --button-on-fill: var(--color-states-on-error);
  --button-tint: var(--color-states-error-container);
  --button-on-tint: var(--color-states-on-error-container);
  --button-outline: var(--color-states-error-outline);
}

.button--color-pending {
  --button-fill: var(--color-states-pending);
  --button-on-fill: var(--color-states-on-pending);
  --button-tint: var(--color-states-pending-container);
  --button-on-tint: var(--color-states-on-pending-container);
  --button-outline: var(--color-states-pending-outline);
}

.button--color-draft {
  --button-fill: var(--color-states-draft);
  --button-on-fill: var(--color-states-on-draft);
  --button-tint: var(--color-states-draft-container);
  --button-on-tint: var(--color-states-on-draft-container);
  --button-outline: var(--color-states-draft-outline);
}

.button--default {
  background: var(--button-fill);
  color: var(--button-on-fill);
}

.button--outline {
  background: var(--button-tint);
  border-color: var(--button-outline);
  color: var(--button-on-tint);
}

.button--ghost {
  border-color: var(--button-outline);
  color: var(--button-on-tint);
  background: none;
}

.button--default:hover:not(:disabled) {
  background: var(--button-fill-hover);
  color: var(--button-on-fill-hover);
}

.button--outline:hover:not(:disabled) {
  background: var(--button-fill);
  color: var(--button-on-fill);
}

.button--ghost:hover:not(:disabled) {
  background: var(--button-tint);
}

.button--xs {
  height: var(--button-size-xs);
  padding-inline: var(--spacing-xs);
  font-size: var(--text-step-2xs);
}

.button--s {
  height: var(--button-size-s);
  padding-inline: var(--spacing-s);
  font-size: var(--text-step-xs);
}

.button--m {
  height: var(--button-size-m);
  padding-inline: var(--spacing-m);
  font-size: var(--text-step-s);
}

.button--l {
  height: var(--button-size-l);
  padding-inline: var(--spacing-l);
  font-size: var(--text-step-m);
}

.button--xl {
  height: var(--button-size-xl);
  padding-inline: var(--spacing-xl);
  font-size: var(--text-step-l);
}

.button--2xl {
  height: var(--button-size-2xl);
  padding-inline: var(--spacing-2xl);
  font-size: var(--text-step-xl);
}

.button__icon {
  flex-shrink: 0;
}

.button__icon--xs, .button__icon--s {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
  stroke-width: var(--icon-strokewidth-xs);
}

.button__icon--m {
  width: var(--icon-size-s);
  height: var(--icon-size-s);
  stroke-width: var(--icon-strokewidth-s);
}

.button__icon--l {
  width: var(--icon-size-m);
  height: var(--icon-size-m);
  stroke-width: var(--icon-strokewidth-m);
}

.button__icon--xl {
  width: var(--icon-size-l);
  height: var(--icon-size-l);
  stroke-width: var(--icon-strokewidth-m);
}

.button__icon--2xl {
  width: var(--icon-size-xl);
  height: var(--icon-size-xl);
  stroke-width: var(--icon-strokewidth-m);
}

.button--icon-only {
  border-radius: var(--border-radius-rounded);
  aspect-ratio: 1;
  padding: var(--spacing-2xs);
}

.button--full-width {
  width: 100%;
}

/* app/components/ui/card/component.css */
.card {
  border-radius: var(--border-radius-large);
}

.card--filled {
  background: var(--color-surface-container-high);
  border: var(--border-width-default) solid var(--color-outline);
}

.card--padding-s {
  padding: var(--spacing-m);
}

.card--padding-m {
  padding: var(--spacing-l);
}

.card--padding-l {
  padding: var(--spacing-xl);
}

.card__header--s {
  padding: var(--spacing-m) var(--spacing-m) var(--spacing-s);
}

.card__header--m {
  padding: var(--spacing-m) var(--spacing-l);
}

.card__header--l {
  padding: var(--spacing-m) var(--spacing-xl);
}

.card__body--s {
  padding: var(--spacing-m);
}

.card__body--m {
  padding: var(--spacing-l);
}

.card__body--l {
  padding: var(--spacing-xl);
}

.card__footer {
  border-top: 1px solid var(--color-outline);
  background: var(--color-surface-container);
}

.card__footer--s {
  padding: var(--spacing-s) var(--spacing-m);
}

.card__footer--m {
  padding: var(--spacing-m) var(--spacing-l);
}

.card__footer--l {
  padding: var(--spacing-m) var(--spacing-xl);
}

.card--auth {
  background: var(--color-primary-container);
  border: var(--border-width-default) solid var(--color-on-primary-container);
  overflow: hidden;
  width: 100%;
  max-width: 30rem;
}

.card--auth .card__header {
  padding: var(--spacing-l) var(--spacing-xl);
  display: flex;
  position: relative;
  border-bottom: none;
  justify-content: center;
  align-items:  center;
  padding-bottom: 0;
}

.card--auth .card__header .card__header-pattern {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
  width: 100%;
  height: auto;
  top: 0;
}

.card--auth .card__header-logo {
  z-index: 1;
  width: 10rem;
  height: auto;
}

.card--auth .card__body--l {
  position: relative;
  z-index: 1;
}

.card--state-draft, .card--state-pending, .card--state-attention, .card--state-success, .card--state-error, .card--state-info {
  position: relative;
  overflow: clip;
  overflow-clip-margin: var(--border-width-default);
  padding-top: var(--spacing-2xl);
  border-top-left-radius: var(--border-radius-state-corner);
}

.card--state-draft {
  --state-glow: var(--color-states-draft-container);
}

.card--state-pending {
  --state-glow: var(--color-states-pending-container);
}

.card--state-attention {
  --state-glow: var(--color-states-attention-container);
}

.card--state-success {
  --state-glow: var(--color-states-success-container);
}

.card--state-error {
  --state-glow: var(--color-states-error-container);
}

.card--state-info {
  --state-glow: var(--color-states-info-container);
}

.card--state-draft.border-gradient, .card--state-pending.border-gradient, .card--state-attention.border-gradient, .card--state-success.border-gradient, .card--state-error.border-gradient, .card--state-info.border-gradient {
  border: var(--border-width-default) solid transparent;
  background: linear-gradient(135deg, var(--state-glow) 0%, transparent 50%) top left / 40rem 40rem no-repeat, var(--border-gradient-bg, var(--color-surface-container));
}

.card--state-draft.border-gradient:after, .card--state-pending.border-gradient:after, .card--state-attention.border-gradient:after, .card--state-success.border-gradient:after, .card--state-error.border-gradient:after, .card--state-info.border-gradient:after {
  content: "";
  position: absolute;
  z-index: 1;
  border-radius: inherit;
  padding: var(--border-width-default);
  background: linear-gradient(to var(--border-gradient-direction, right), var(--border-gradient-start, var(--color-outline-gradient-start)), var(--border-gradient-end, var(--color-outline-gradient-end)));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  inset: 0;
}

/* app/components/ui/checkbox/component.css */
.checkbox {
  display: flex;
  align-items:  center;
  gap: var(--spacing-2xs);
  cursor: pointer;
}

.checkbox__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.checkbox__box {
  border-radius: var(--border-radius-small-inner);
  background: var(--color-secondary);
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
  width: 1.125rem;
  height: 1.125rem;
}

.checkbox__check {
  color: var(--color-on-tertiary);
  opacity: 0;
  width: 100%;
  height: 100%;
}

.checkbox:not(.checkbox--error):hover .checkbox__input:not(:checked):not(:disabled) ~ .checkbox__box {
  background: var(--color-deep-blue-40);
}

.checkbox__input:checked ~ .checkbox__box {
  background: var(--color-tertiary);
}

.checkbox__input:checked ~ .checkbox__box .checkbox__check {
  opacity: 1;
}

.checkbox__label {
  font-size: var(--text-step-xs);
  font-weight: var(--weight-default);
  line-height: var(--line-height-default);
  color: var(--color-on-surface);
}

.checkbox__input:checked ~ .checkbox__label {
  color: var(--color-tertiary);
}

.checkbox--error .checkbox__box {
  background: var(--color-states-error-container);
  border: var(--border-width-default) solid var(--color-states-on-error-container);
}

.checkbox--error .checkbox__label {
  color: var(--color-states-on-error-container);
}

.checkbox__input:disabled ~ .checkbox__box, .checkbox__input:disabled ~ .checkbox__label {
  opacity: .5;
  cursor: not-allowed;
}

/* app/components/ui/dialog/component.css */
.dialog {
  color: inherit;
  background: none;
  border: none;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
}

.dialog:open {
  display: flex;
  animation: dialog-fade-in var(--transition-base) var(--transition-easing);
  justify-content: center;
  align-items:  center;
  min-width: 100vw;
  min-height: 100vh;
}

.dialog::backdrop {
  backdrop-filter: blur(4px);
  animation: backdrop-fade-in var(--transition-base) var(--transition-easing);
  background-color: #00000080;
}

@keyframes dialog-fade-in {
  from {
    opacity: 0;
    scale: .95;
  }

  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes backdrop-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.dialog__panel {
  --dialog-width: 43.75rem;
  display: flex;
  gap: var(--spacing-m);
  width: var(--dialog-width);
  padding: var(--spacing-l);
  background: var(--color-surface-container);
  border: var(--border-width-default) solid var(--color-outline);
  border-radius: var(--border-radius-large);
  overflow: clip;
  flex-direction: column;
  max-width: 90vw;
}

.dialog__frame {
  display: contents;
}

.dialog__header {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  width: 100%;
}

.dialog__title {
  font-size: var(--text-step-l);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-small);
  color: var(--color-on-surface);
}

.dialog__close {
  display: flex;
  border-radius: var(--border-radius-rounded);
  background: var(--color-surface-container-high);
  border: var(--border-width-default) solid var(--color-on-surface-variant);
  cursor: pointer;
  color: var(--color-on-surface-variant);
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
  width: 3rem;
  height: 3rem;
}

.dialog__close-icon {
  width: var(--icon-size-m);
  height: var(--icon-size-m);
}

.dialog__body {
  width: 100%;
}

.dialog__panel--highlight {
  --dialog-width: 42.8125rem;
  position: relative;
  align-items:  center;
  gap: var(--spacing-l);
  padding: var(--spacing-3xl);
  border-color: var(--color-on-surface-highlight);
  text-align: center;
}

.dialog__panel--highlight > .dialog__close {
  position: absolute;
  top: var(--spacing-s);
  right: var(--spacing-s);
  color: var(--color-on-secondary);
  background: none;
  border-color: #0000;
}

.dialog__panel--highlight .dialog__body {
  display: flex;
  align-items:  center;
  gap: var(--spacing-l);
  flex-direction: column;
}

.dialog__panel--bare {
  overflow: visible;
  background: none;
  border: none;
  width: auto;
  padding: 0;
}

/* app/components/ui/downloads_table/component.css */
.downloads-table {
  border: 1px solid var(--color-outline);
  border-radius: var(--border-radius-medium);
  overflow: hidden;
}

.downloads-table__row {
  display: flex;
  padding: var(--spacing-xs) var(--spacing-s);
  background: var(--color-secondary-container);
  justify-content: space-between;
  align-items:  center;
  height: 2.75rem;
}

.downloads-table__row + .downloads-table__row {
  border-top: 1px solid var(--color-outline);
}

.downloads-table__name {
  display: flex;
  align-items:  center;
  gap: var(--spacing-xs);
}

/* app/components/ui/dropdown/component.css */
.dropdown {
  position: relative;
  display: inline-flex;
}

.dropdown__panel {
  display: none;
  position: fixed;
  z-index: 50;
  padding: var(--spacing-2xs);
  background: var(--color-surface-container-highest);
  border: var(--border-width-default) solid var(--color-outline-variant);
  border-radius: var(--border-radius-medium);
  flex-direction: column;
  min-width: 12rem;
}

.dropdown--open .dropdown__panel {
  display: flex;
}

.dropdown__item {
  display: flex;
  align-items:  center;
  gap: var(--spacing-2xs);
  padding: var(--spacing-2xs) var(--spacing-xs);
  border-radius: var(--border-radius-small);
  color: var(--color-on-surface);
  font-size: var(--text-step-xs);
  font-family: inherit;
  line-height: var(--line-height-default);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition-fast) var(--transition-easing);
  background: none;
  border: none;
  width: 100%;
}

.dropdown__item:hover {
  background: var(--color-surface-container-high);
}

.dropdown__icon {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
  color: var(--color-on-surface-variant);
  flex-shrink: 0;
}

/* app/components/ui/empty_state/component.css */
.empty-state {
  padding: var(--spacing-l) var(--spacing-l) var(--spacing-3xl);
  text-align: center;
}

.empty-state__icon {
  color: var(--color-deep-blue-40);
  width: 3rem;
  height: 3rem;
  margin: 0 auto;
}

.empty-state__title {
  margin-top: var(--spacing-xs);
  font-size: var(--text-step-xs);
  color: var(--color-on-surface-variant);
  font-weight: 500;
}

.empty-state__description {
  margin-top: var(--spacing-3xs);
  font-size: var(--text-step-xs);
  color: var(--color-outline-variant);
}

.empty-state__action {
  margin-top: var(--spacing-l);
}

/* app/components/ui/file_upload/component.css */
.file-upload {
  display: flex;
  gap: var(--spacing-s);
  flex-direction: column;
}

.file-upload__list {
  border: 1px solid var(--color-outline);
  border-radius: var(--border-radius-medium);
  overflow: hidden;
}

.file-upload__list:not(:has(.file-upload__item)) {
  display: none;
}

.file-upload__item {
  display: flex;
  align-items:  center;
  gap: var(--spacing-s);
  padding: var(--spacing-s) var(--spacing-m);
  font-size: var(--text-step-s);
  color: var(--color-on-surface-variant);
}

.file-upload__item + .file-upload__item {
  border-top: 1px solid var(--color-outline);
}

.file-upload__item-icon {
  display: flex;
  color: var(--color-on-surface-variant);
  align-items:  center;
}

.file-upload__item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-step-xs);
  flex: 1;
}

.file-upload__item-remove {
  display: flex;
  color: var(--color-on-surface-variant);
  cursor: pointer;
  transition: color var(--transition-fast);
  background: none;
  border: none;
  justify-content: center;
  align-items:  center;
  padding: 0;
}

.file-upload__item-remove:hover {
  color: var(--color-on-surface);
}

.file-upload__add {
  position: relative;
  display: flex;
  border: 2px solid var(--color-deep-blue-25);
  border-radius: var(--border-radius-small);
  cursor: pointer;
  color: var(--color-outline-variant);
  transition: border-color var(--transition-fast);
  flex-direction: column;
  justify-content: center;
  align-items:  center;
  min-width: 7.5rem;
  max-height: 15rem;
  padding: 1rem 2rem;
}

.file-upload__add:hover {
  border-color: var(--color-deep-blue-40);
}

.file-upload__add--dragover {
  border-color: var(--color-deep-blue-40);
  background: var(--color-primary-container);
}

.file-upload__add-icon {
  font-size: var(--text-step-xl);
  line-height: 1;
}

.file-upload__add-label {
  font-size: var(--text-step-s);
  margin-top: var(--spacing-3xs);
  text-align: center;
}

.file-upload__sub-label {
  font-size: var(--text-step-2xs);
  margin-top: var(--spacing-3xs);
  text-align: center;
}

/* app/components/ui/floating_action_button/component.css */
.floating-action-button {
  position: fixed;
  right: var(--spacing-m);
  bottom: var(--spacing-m);
  width: var(--avatar-size-l);
  height: var(--avatar-size-l);
  display: flex;
  background: var(--color-tertiary);
  color: var(--color-on-tertiary);
  border-radius: var(--border-radius-rounded);
  cursor: pointer;
  z-index: 10;
  border: none;
  justify-content: center;
  align-items:  center;
}

/* app/components/ui/form_control/component.css */
.form-control {
  position: relative;
  display: flex;
  border: var(--border-width-default) solid var(--color-outline-variant);
  border-radius: var(--border-radius-medium);
  background: var(--color-surface-container-highest);
  color: var(--color-on-surface);
  align-items:  center;
  width: 100%;
}

.form-control:focus-within {
  outline: 2px solid var(--color-outline-variant);
  outline-offset: -1px;
}

.form-control:has(:disabled) {
  background: var(--color-surface-container-high);
  color: var(--color-on-surface-variant);
  cursor: not-allowed;
}

.form-control--error {
  background: var(--color-states-error-container);
  border-color: var(--color-states-on-error-container);
  color: var(--color-states-on-error-container);
}

.form-control--ai {
  background: var(--color-primary-container);
  border-color: var(--color-on-primary-container);
}

.form-control--wysiwyg {
  display: block;
  overflow: hidden;
}

.form-control--auto-grow {
  padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-m);
}

/* app/components/ui/form_field/component.css */
.form-field {
  display: block;
}

.form-field__header {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: var(--spacing-3xs);
  margin-bottom: var(--spacing-2xs);
}

.form-field__label-wrap {
  display: inline-flex;
  align-items:  center;
  gap: var(--spacing-3xs);
}

.form-field__label {
  display: block;
  font-size: var(--text-step-xs);
  font-weight: var(--weight-medium);
  line-height: var(--line-height-display);
  color: var(--color-on-surface-variant);
}

.form-field__required {
  color: var(--color-states-on-error-container);
  font-weight: var(--weight-medium);
  line-height: 1;
}

.form-field__optional {
  font-size: var(--text-step-xs);
  color: var(--color-on-surface-variant);
  font-weight: var(--weight-medium);
  margin-right: auto;
}

.form-field__ai {
  display: inline-flex;
  align-items:  center;
  gap: var(--spacing-3xs);
  color: var(--color-on-primary-container);
}

.form-field__ai-icon {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
  stroke-width: var(--icon-strokewidth-xs);
}

.form-field__ai-text {
  font-family: var(--fonts-family-display);
  font-size: var(--text-step-xs);
  font-weight: var(--weight-black);
  line-height: 1;
  translate: 0 .1em;
}

.form-field__hint {
  display: flex;
  align-items:  center;
  gap: var(--spacing-2xs);
  font-size: var(--text-step-2xs);
  font-weight: var(--weight-default);
  line-height: var(--line-height-default);
  color: var(--color-on-surface-variant);
  margin-top: var(--spacing-2xs);
}

.form-field__hint--error {
  color: var(--color-states-on-error-container);
}

.form-field__hint-icon {
  width: var(--spacing-s);
  height: var(--spacing-s);
  flex-shrink: 0;
}

.form-field--checkbox, .form-field--inline {
  display: flex;
  align-items:  center;
  gap: var(--spacing-xs);
}

.form-field--narrow {
  max-width: 28.125rem;
}

/* app/components/ui/heading/component.css */
.heading {
  line-height: var(--line-height-small);
  font-weight: var(--weight-bold);
  font-family: var(--fonts-family-display);
}

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

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

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

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

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

/* app/components/ui/icon/component.css */
.icon {
  flex-shrink: 0;
}

.icon--xs {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

.icon--xs path {
  stroke-width: var(--icon-strokewidth-xs);
}

.icon--s {
  width: var(--icon-size-s);
  height: var(--icon-size-s);
}

.icon--s path {
  stroke-width: var(--icon-strokewidth-s);
}

.icon--m {
  width: var(--icon-size-m);
  height: var(--icon-size-m);
}

.icon--m path {
  stroke-width: var(--icon-strokewidth-m);
}

/* app/components/ui/image_card/component.css */
.image-card {
  position: relative;
  overflow: clip;
  border-radius: var(--border-radius-large);
}

.image-card__image {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 18.75rem;
}

.image-card__placeholder {
  position: relative;
  display: flex;
  background-color: var(--color-surface);
  justify-content: center;
  align-items:  center;
  width: 100%;
  height: 18.75rem;
}

.image-card__placeholder:before {
  content: "";
  position: absolute;
  opacity: .8;
  background-image: url("/assets/background-pattern-e55bd35d.svg");
  background-position: center;
  background-size: cover;
  inset: 0;
}

.image-card__placeholder-icon {
  position: relative;
  z-index: 1;
  width: 10rem;
  height: auto;
}

.image-card__badge {
  position: absolute;
  top: var(--spacing-2xs);
  left: var(--spacing-2xs);
}

.image-card.border-gradient {
  border-width: var(--border-width-bold) var(--border-width-default) var(--border-width-default) var(--border-width-bold);
}

/* app/components/ui/image_upload/component.css */
.image-upload__grid {
  display: flex;
  gap: var(--spacing-s);
  flex-wrap: wrap;
}

.image-upload__preview {
  position: relative;
  border-radius: var(--border-radius-small);
  overflow: hidden;
  border: 1px solid var(--color-outline);
  width: 7.5rem;
  height: 7.5rem;
}

.image-upload__image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.image-upload__remove {
  position: absolute;
  top: var(--spacing-3xs);
  right: var(--spacing-3xs);
  display: flex;
  border-radius: var(--border-radius-rounded);
  background: var(--color-on-surface-variant);
  color: var(--color-deep-blue-97);
  cursor: pointer;
  font-size: var(--text-step-2xs);
  justify-content: center;
  align-items:  center;
  width: 1.5rem;
  height: 1.5rem;
}

.image-upload__filename {
  position: absolute;
  padding: var(--spacing-3xs);
  color: var(--color-deep-blue-97);
  font-size: var(--text-step-2xs);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  background: #00000080;
  bottom: 0;
  left: 0;
  right: 0;
}

.image-upload--ratio .file-upload__add {
  aspect-ratio: var(--image-upload-ratio);
  width: 15rem;
  min-width: 0;
  max-width: 100%;
  max-height: none;
}

.image-upload__delete {
  position: absolute;
  top: var(--spacing-3xs);
  right: var(--spacing-3xs);
  z-index: 200;
  display: none;
  justify-content: center;
  align-items:  center;
}

.image-upload__preview-image {
  position: absolute;
  border-radius: var(--border-radius-small);
  object-fit: cover;
  width: 100%;
  height: 100%;
  inset: 0;
}

.image-upload--filled .file-upload__add {
  border-color: #0000;
}

.image-upload--filled .file-upload__add-icon, .image-upload--filled .file-upload__add-label, .image-upload--filled .file-upload__sub-label {
  display: none;
}

.file-upload__add.image-upload__border {
  border: 2px dashed var(--color-deep-blue-25);
}

.image-upload--uploading .image-upload__preview-image {
  opacity: .6;
}

/* app/components/ui/input/component.css */
.input {
  padding: var(--spacing-xs) var(--spacing-s);
  font-size: var(--text-step-s);
  color: inherit;
  background: none;
  border: none;
  flex: 1;
}

.input:focus {
  outline: none;
}

.input::placeholder {
  color: var(--color-on-surface-variant);
}

.input--error::placeholder {
  color: var(--color-states-on-error-container);
}

.input::-webkit-calendar-picker-indicator {
  width: var(--icon-size-s);
  height: var(--icon-size-s);
  background-color: var(--color-on-secondary);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: var(--icon-size-s);
  opacity: 1;
  cursor: pointer;
  background-image: none;
  padding: 0;
}

.input--error::-webkit-calendar-picker-indicator {
  background-color: var(--color-states-on-error-container);
}

.input:disabled::-webkit-calendar-picker-indicator {
  background-color: var(--color-on-surface-variant);
  cursor: not-allowed;
}

.input--with-icon {
  padding-inline-end: calc(var(--spacing-s)  + var(--icon-size-m)  + var(--spacing-2xs));
}

.input__icon {
  position: absolute;
  pointer-events: none;
  color: var(--color-outline-variant);
  top: 50%;
  translate: 0 -50%;
}

.input__icon:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
  right: var(--spacing-s);
}

.input__icon:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
  right: var(--spacing-s);
}

.input__icon:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
  right: var(--spacing-s);
}

.input__icon:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: var(--spacing-s);
}

.input__icon:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: var(--spacing-s);
}

.input__icon:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: var(--spacing-s);
}

.input__icon--error {
  color: var(--color-states-on-error-container);
}

/* app/components/ui/key_metric/component.css */
.key-metric {
  position: relative;
  display: flex;
  align-items:  flex-end;
  gap: var(--spacing-s);
  padding-block: var(--spacing-xs);
  padding-inline: var(--spacing-m);
  background: var(--color-surface-container-high);
  border: var(--border-width-default) solid var(--color-outline);
  border-radius: var(--border-radius-small-inner);
  overflow: hidden;
  isolation: isolate;
  flex-direction: column;
  width: 22.7rem;
}

.key-metric__data {
  display: flex;
  flex-direction: column;
  align-items:  flex-end;
}

.key-metric__pattern {
  position: absolute;
  color: var(--color-surface-container-highest);
  pointer-events: none;
  z-index: 0;
  display: none;
  width: 12.78rem;
  height: 22.75rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)rotate(90deg)scaleY(-1);
}

.key-metric__pattern--visible {
  display: block;
}

.key-metric--green {
  background: var(--color-green-10);
  border-color: var(--color-green-40);
  color: var(--color-green-70);
}

.key-metric--green .key-metric__value {
  color: var(--color-green-70);
}

.key-metric--red {
  background: var(--color-red-10);
  border-color: var(--color-red-40);
  color: var(--color-red-70);
}

.key-metric--red .key-metric__value {
  color: var(--color-red-70);
}

.key-metric--blue {
  background: var(--color-blue-10);
  border-color: var(--color-blue-40);
  color: var(--color-blue-70);
}

.key-metric--blue .key-metric__value {
  color: var(--color-blue-70);
}

.key-metric__previous {
  display: inline-flex;
  align-items:  center;
  gap: var(--spacing-2xs);
}

.key-metric__previous-value {
  font-size: var(--text-step-2xs);
}

.key-metric__label, .key-metric__value {
  position: relative;
  z-index: 1;
}

.key-metric__label {
  color: var(--color-on-surface);
}

.key-metric__value {
  color: var(--color-lime-70);
  font-family: var(--fonts-family-display);
}

/* app/components/ui/link_preview/component.css */
.link-preview {
  background: var(--color-surface-container-highest);
  border: var(--border-width-default) solid var(--color-outline);
  border-radius: var(--border-radius-small);
  overflow: hidden;
  margin: 0;
}

.link-preview__link {
  display: flex;
  align-items: stretch;
  gap: var(--spacing-s);
  color: inherit;
  text-decoration: none;
}

.link-preview__link:hover {
  background: var(--color-surface-container-high);
}

.link-preview__image {
  aspect-ratio: 240 / 151;
  object-fit: cover;
  display: block;
  flex: none;
  width: 15rem;
  height: auto;
}

.link-preview__image--placeholder {
  display: none;
}

.link-preview__content {
  display: flex;
  justify-content: center;
  gap: var(--spacing-3xs);
  padding: var(--spacing-s);
  flex-direction: column;
  flex: auto;
  min-width: 0;
  margin: 0;
}

.link-preview__meta {
  display: flex;
  align-items:  center;
  gap: var(--spacing-3xs);
  color: var(--color-on-surface-variant);
}

.link-preview__favicon {
  border-radius: var(--border-radius-rounded);
  object-fit: cover;
  display: block;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}

.link-preview__domain {
  font-family: var(--fonts-family-default);
  font-size: var(--text-step-2xs);
  font-weight: var(--weight-medium);
  line-height: var(--line-height-default);
  color: var(--color-on-surface-variant);
}

.link-preview__title {
  font-family: var(--fonts-family-display);
  font-size: var(--text-step-s);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-small);
  color: var(--color-on-surface);
}

.link-preview__description {
  font-family: var(--fonts-family-default);
  font-size: var(--text-step-xs);
  font-weight: var(--weight-default);
  line-height: var(--line-height-default);
  color: var(--color-on-surface);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.link-preview__external {
  background-color: var(--color-on-surface);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: var(--icon-size-m);
  flex: none;
  align-self:  center;
  width: 2.5rem;
  height: 2.5rem;
}

.link-preview__node {
  position: relative;
  margin-block: var(--spacing-s);
}

.link-preview__dismiss {
  position: absolute;
  top: var(--spacing-2xs);
  right: var(--spacing-2xs);
  display: inline-flex;
  color: var(--color-on-surface-variant);
  cursor: pointer;
  background: none;
  border: 0;
  justify-content: center;
  align-items:  center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  transition: color .12s;
}

.link-preview__dismiss:hover {
  color: var(--color-on-surface);
  outline: none;
}

.link-preview__dismiss:focus-visible {
  color: var(--color-on-surface);
  outline: none;
}

.link-preview__dismiss:before {
  content: "";
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  background-color: currentColor;
}

/* app/components/ui/multiselect/component.css */
.multiselect {
  position: relative;
}

.multiselect__trigger {
  display: flex;
  padding: var(--spacing-xs) var(--spacing-s);
  background: var(--color-surface-container-highest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--border-radius-large);
  cursor: pointer;
  text-align: left;
  justify-content: space-between;
  align-items:  center;
  gap: var(--spacing-2xs);
  width: 100%;
}

.multiselect__trigger-text {
  font-size: var(--text-step-s);
  color: var(--color-on-surface);
  line-height: 1.3;
}

.multiselect__trigger-text--empty {
  color: var(--color-on-surface-variant);
}

.multiselect__chevron {
  color: var(--color-on-surface-variant);
  transition: rotate var(--transition-fast);
  flex-shrink: 0;
}

.multiselect--open .multiselect__chevron {
  rotate: 180deg;
}

.multiselect__panel {
  display: none;
  gap: var(--spacing-m);
  margin-top: var(--spacing-xs);
  background: var(--color-surface-container-highest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--border-radius-medium);
  padding: var(--spacing-s) var(--spacing-s) var(--spacing-l);
  flex-direction: column;
}

.multiselect--open .multiselect__panel {
  display: flex;
}

.multiselect__panel-title {
  font-size: var(--text-step-s);
  color: var(--color-on-surface-variant);
  font-weight: 600;
  line-height: 1.1;
}

.multiselect__group-title {
  font-size: var(--text-step-xs);
  color: var(--color-on-surface);
  font-weight: 600;
  line-height: 1.3;
}

:where(.multiselect__group) .multiselect__items {
  padding-left: var(--spacing-m);
}

.multiselect__item {
  display: flex;
  height: var(--button-size-m);
  align-items:  center;
  gap: var(--spacing-2xs);
  border-bottom: 1px solid var(--color-outline-variant);
  cursor: pointer;
}

.multiselect__checkbox-icon {
  background: var(--color-secondary);
  border-radius: var(--border-radius-small-inner);
  position: relative;
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
  width: 1.125rem;
  height: 1.125rem;
}

.multiselect__item:has(input:checked) .multiselect__checkbox-icon {
  background: var(--color-tertiary);
}

.multiselect__item:has(input:checked) .multiselect__checkbox-icon:after {
  content: "✓";
  font-size: var(--text-step-2xs);
  color: var(--color-on-tertiary);
  line-height: 1;
}

.multiselect__item-label {
  font-size: var(--text-step-xs);
  color: var(--color-on-surface);
  line-height: 1.3;
}

.multiselect__item:has(input:checked) .multiselect__item-label {
  color: var(--color-tertiary);
}

/* app/components/ui/page_header/component.css */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: var(--spacing-s);
  margin-bottom: var(--spacing-m);
}

.page-header__title {
  display: flex;
  align-items:  center;
  gap: var(--spacing-s);
}

.page-header__actions {
  display: flex;
  align-items:  center;
  gap: var(--spacing-2xs);
}

/* app/components/ui/pagination/component.css */
.pagination {
  --pagination-radius: .5rem;
}

.pagination__list {
  display: flex;
  align-items:  flex-end;
  gap: var(--spacing-3xs);
}

.pagination__link {
  display: flex;
  padding: var(--spacing-3xs) var(--spacing-xs);
  border: var(--border-width-default) solid var(--color-outline);
  border-radius: var(--pagination-radius);
  background: var(--color-surface-container-high);
  color: var(--color-on-surface);
  font-size: var(--text-step-xs);
  line-height: var(--line-height-default);
  transition: border-color var(--transition-base) var(--transition-easing), color var(--transition-base) var(--transition-easing);
  justify-content: center;
  align-items:  center;
}

.pagination__link:hover {
  border-color: var(--color-outline-highlight);
}

.pagination__link--current {
  border-color: var(--color-outline-highlight);
  color: var(--color-on-surface-highlight);
}

.pagination__gap {
  display: flex;
  padding-inline: var(--spacing-3xs);
  color: var(--color-on-surface);
  font-size: var(--text-step-s);
  line-height: var(--line-height-default);
  align-items:  center;
}

/* app/components/ui/radio_group/component.css */
.radio-group {
  display: flex;
  gap: var(--spacing-s);
  flex-wrap: wrap;
}

.radio-group--disabled {
  cursor: not-allowed;
  opacity: .6;
}

.radio-group--disabled .radio-group__option {
  pointer-events: none;
}

.radio-group--card {
  flex-direction: column;
}

.radio-group--card .radio-group__option {
  min-width: unset;
  padding: var(--spacing-s);
  align-items:  flex-start;
  height: auto;
}

.radio-group__option-content {
  display: flex;
  gap: var(--spacing-3xs);
  flex-direction: column;
}

.radio-group__description {
  font-size: var(--text-step-xs);
  font-weight: var(--weight-default);
  line-height: var(--line-height-default);
  color: var(--color-on-surface-variant);
}

.radio-group--card .radio-group__option:has(input:checked) .radio-group__description {
  color: var(--color-on-tertiary);
}

.radio-group__option {
  display: flex;
  padding-inline: var(--spacing-s);
  background: var(--color-surface-container-highest);
  border: var(--border-width-default) solid var(--color-outline-variant);
  border-radius: var(--border-radius-medium);
  cursor: pointer;
  transition: background-color var(--transition-fast) var(--transition-easing), border-color var(--transition-fast) var(--transition-easing), color var(--transition-fast) var(--transition-easing);
  justify-content: center;
  align-items:  center;
  min-width: 3rem;
  height: 3rem;
}

.radio-group__option:has(input:checked) {
  background: var(--color-tertiary);
  border-color: var(--color-tertiary);
}

.radio-group__label {
  font-size: var(--text-step-xs);
  font-weight: var(--weight-default);
  line-height: var(--line-height-default);
  color: var(--color-on-surface-variant);
  white-space: nowrap;
}

.radio-group__option:has(input:checked) .radio-group__label {
  font-weight: var(--weight-bold);
  color: var(--color-on-tertiary);
}

/* app/components/ui/range_slider/component.css */
.range-slider {
  --range-slider-fill: 50%;
  --range-slider-track-height: .5rem;
  --range-slider-thumb-size: 1.25rem;
  --range-slider-thumb-ring: 2px;
  display: flex;
  gap: var(--spacing-2xs);
  flex-direction: column;
  width: 100%;
}

.range-slider__input {
  -webkit-appearance: none;
  appearance: none;
  height: var(--range-slider-thumb-size);
  cursor: pointer;
  background: none;
  width: 100%;
  margin: 0;
}

.range-slider__input::-webkit-slider-runnable-track {
  height: var(--range-slider-track-height);
  border-radius: var(--border-radius-rounded);
  background: linear-gradient(to right, var(--color-primary) 0%, var(--color-primary) var(--range-slider-fill), var(--color-surface-container-highest) var(--range-slider-fill), var(--color-surface-container-highest) 100%);
}

.range-slider__input::-moz-range-track {
  height: var(--range-slider-track-height);
  border-radius: var(--border-radius-rounded);
  background: var(--color-surface-container-highest);
}

.range-slider__input::-moz-range-progress {
  height: var(--range-slider-track-height);
  border-radius: var(--border-radius-rounded);
  background: var(--color-primary);
}

.range-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--range-slider-thumb-size);
  height: var(--range-slider-thumb-size);
  margin-top: calc((var(--range-slider-track-height)  - var(--range-slider-thumb-size)) / 2);
  border: var(--border-width-bold) solid var(--color-surface);
  border-radius: var(--border-radius-rounded);
  background: var(--color-primary);
  box-shadow: 0 0 0 var(--range-slider-thumb-ring) var(--color-primary);
  transition: transform var(--transition-fast) var(--transition-easing);
}

.range-slider__input:hover::-webkit-slider-thumb {
  transform: scale(1.1);
}

.range-slider__input::-moz-range-thumb {
  width: var(--range-slider-thumb-size);
  height: var(--range-slider-thumb-size);
  border: var(--border-width-bold) solid var(--color-surface);
  border-radius: var(--border-radius-rounded);
  background: var(--color-primary);
  box-shadow: 0 0 0 var(--range-slider-thumb-ring) var(--color-primary);
  transition: transform var(--transition-fast) var(--transition-easing);
}

.range-slider__input:hover::-moz-range-thumb {
  transform: scale(1.1);
}

.range-slider__input:focus-visible {
  outline: none;
}

.range-slider__input:focus-visible::-webkit-slider-thumb {
  outline: var(--border-width-bold) solid var(--color-on-surface-highlight);
  outline-offset: var(--spacing-3xs);
}

.range-slider__input:focus-visible::-moz-range-thumb {
  outline: var(--border-width-bold) solid var(--color-on-surface-highlight);
  outline-offset: var(--spacing-3xs);
}

.range-slider__labels {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-s);
  font-size: var(--text-step-2xs);
  color: var(--color-on-surface-variant);
}

.range-slider--disabled {
  opacity: .6;
}

.range-slider--disabled .range-slider__input {
  cursor: not-allowed;
}

/* app/components/ui/revealable_sections/component.css */
.revealable-sections, .revealable-sections__items {
  display: flex;
  gap: var(--spacing-m);
  flex-direction: column;
}

.revealable-sections__section {
  border: none;
  margin: 0;
  padding: 0;
}

/* app/components/ui/select/component.css */
.select {
  appearance: base-select;
}

.select::picker(select) {
  appearance: base-select;
}

.select {
  padding: var(--spacing-xs) var(--spacing-s);
  font-size: var(--text-step-s);
  color: inherit;
  background: none;
  border: none;
  flex: 1;
  padding-inline-end: calc(var(--spacing-s)  + var(--icon-size-m)  + var(--spacing-xs));
}

.select:focus {
  outline: none;
}

.select::picker-icon {
  display: none;
}

.select__chevron {
  position: absolute;
  pointer-events: none;
  color: var(--color-outline-variant);
  transition: rotate var(--transition-fast);
  top: 50%;
  translate: 0 -50%;
}

.select__chevron:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
  right: var(--spacing-xs);
}

.select__chevron:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
  right: var(--spacing-xs);
}

.select__chevron:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
  right: var(--spacing-xs);
}

.select__chevron:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: var(--spacing-xs);
}

.select__chevron:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: var(--spacing-xs);
}

.select__chevron:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: var(--spacing-xs);
}

.select:open + .select__chevron {
  rotate: 180deg;
}

.select::picker(select) {
  width: anchor-size(width);
  top: calc(anchor(bottom)  + var(--spacing-xs));
  left: anchor(left);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--border-radius-small);
  background: var(--color-surface-container-highest);
  opacity: 0;
  transition: opacity var(--transition-fast) allow-discrete;
  box-shadow: 0 4px 16px #00000040;
}

.select::picker(select):popover-open {
  opacity: 1;
}

@starting-style {
  .select::picker(select):popover-open {
    opacity: 0;
  }
}

.select option {
  display: flex;
  padding: 0 var(--spacing-s);
  border-bottom: 1px solid var(--color-outline-variant);
  font-size: var(--text-step-xs);
  color: var(--color-on-surface);
  transition: background-color var(--transition-fast);
  align-items:  center;
  height: 3rem;
}

.select option:hover {
  background: var(--color-surface-container-high);
}

.select option:checked {
  color: var(--color-tertiary);
  font-weight: 500;
}

.select option::checkmark {
  display: none;
}

.select optgroup {
  display: flex;
  margin-bottom: var(--spacing-m);
  flex-direction: column;
}

.select optgroup:last-child {
  margin-bottom: 0;
}

.select optgroup legend {
  font-weight: 600;
  font-size: var(--text-step-xs);
  color: var(--color-on-surface);
}

.select optgroup option {
  margin-left: var(--spacing-m);
}

/* app/components/ui/social_links/component.css */
.social-links {
  display: flex;
  align-items:  center;
  gap: var(--spacing-xs);
}

.social-links__link {
  display: inline-flex;
  color: var(--color-on-surface-variant);
  justify-content: center;
  align-items:  center;
  transition: color .15s;
}

.social-links__link:hover {
  color: var(--color-on-surface);
}

/* app/components/ui/stepper/component.css */
.stepper {
  display: flex;
  gap: var(--spacing-m);
  flex-direction: column;
  min-width: 16rem;
}

.stepper__title {
  font-size: var(--text-step-s);
  font-weight: var(--weight-bold);
  color: var(--color-on-surface);
  margin: 0;
}

.stepper__list {
  list-style: none;
  display: flex;
  gap: var(--spacing-m);
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.stepper__list-item {
  margin: 0;
}

.stepper__link {
  display: flex;
  align-items:  center;
  gap: var(--spacing-xs);
  font-size: var(--text-step-s);
  font-weight: var(--weight-default);
  line-height: var(--line-height-default);
  color: var(--color-on-surface);
  transition: color var(--transition-fast);
}

.stepper__link--completed {
  color: var(--color-on-surface);
  text-decoration: underline;
}

.stepper__link--active-completed, .stepper__link--active {
  color: var(--color-tertiary);
}

.stepper__link--default {
  color: var(--color-on-surface);
}

.stepper__link:hover {
  color: var(--color-tertiary);
}

.stepper__icon {
  display: flex;
  flex-shrink: 0;
  align-items:  center;
}

.stepper__diamond {
  width: 1.125rem;
  height: 1.5rem;
}

.stepper__icon--complete, .stepper__icon--active {
  color: var(--color-tertiary);
}

.stepper__icon--default {
  color: var(--color-on-surface);
  opacity: .5;
}

/* app/components/ui/switch/component.css */
.switch {
  --switch-track-width: 6.5rem;
  --switch-bubble-size: 3rem;
  display: inline-flex;
  cursor: pointer;
  flex-direction: column;
  align-items:  flex-start;
}

.switch--disabled {
  cursor: not-allowed;
  opacity: .6;
}

.switch__track {
  position: relative;
  width: var(--switch-track-width);
  height: var(--switch-bubble-size);
  padding: var(--spacing-3xs);
  border: var(--border-width-default) solid var(--color-outline-variant);
  border-radius: var(--border-radius-medium);
  transition: background-color var(--transition-fast) var(--transition-easing), border-color var(--transition-fast) var(--transition-easing);
}

.switch__bubble {
  position: absolute;
  top: var(--spacing-3xs);
  left: var(--spacing-3xs);
  width: var(--switch-bubble-size);
  height: calc(100% - var(--spacing-3xs) * 2);
  display: flex;
  border-radius: var(--border-radius-small);
  background: var(--color-secondary);
  transition: transform var(--transition-fast) var(--transition-easing), background-color var(--transition-fast) var(--transition-easing);
  justify-content: center;
  align-items:  center;
}

.switch__icon {
  width: var(--icon-size-m);
  height: var(--icon-size-m);
}

.switch__icon--check {
  display: none;
  color: var(--color-on-tertiary);
}

.switch__icon--close {
  display: block;
  color: var(--color-on-secondary);
}

.switch:has(input:checked) .switch__track {
  background: var(--color-surface-container-highest);
  border-color: var(--color-tertiary);
}

.switch:has(input:checked) .switch__bubble {
  transform: translateX(calc(var(--switch-track-width)  - var(--switch-bubble-size)  - var(--spacing-3xs) * 2 - var(--border-width-default) * 2));
  background: var(--color-tertiary);
}

.switch:has(input:checked) .switch__icon--check {
  display: block;
}

.switch:has(input:checked) .switch__icon--close {
  display: none;
}

.switch__label {
  font-size: var(--text-step-xs);
  font-weight: var(--weight-default);
  line-height: var(--line-height-default);
  color: var(--color-on-surface);
  margin-bottom: var(--spacing-xs);
}

/* app/components/ui/system_message/component.css */
.system-message {
  display: flex;
  gap: var(--spacing-2xs);
  padding: var(--spacing-s);
  border: var(--border-width-default) solid var(--system-message-outline);
  border-radius: var(--border-radius-small);
  background: var(--system-message-container);
  flex-direction: column;
}

.system-message--info {
  --system-message-container: var(--color-states-info-container);
  --system-message-outline: var(--color-states-info-outline);
  --system-message-accent: var(--color-states-on-info-container);
}

.system-message--success {
  --system-message-container: var(--color-states-success-container);
  --system-message-outline: var(--color-states-success-outline);
  --system-message-accent: var(--color-states-on-success-container);
}

.system-message--attention {
  --system-message-container: var(--color-states-attention-container);
  --system-message-outline: var(--color-states-attention-outline);
  --system-message-accent: var(--color-states-on-attention-container);
}

.system-message--error {
  --system-message-container: var(--color-states-error-container);
  --system-message-outline: var(--color-states-error-outline);
  --system-message-accent: var(--color-states-on-error-container);
}

.system-message--ai-generated {
  --system-message-container: var(--color-primary-container);
  --system-message-outline: var(--color-primary);
  --system-message-accent: var(--color-on-primary-container);
}

.system-message__header {
  display: flex;
  align-items:  center;
  gap: var(--spacing-2xs);
}

.system-message__icon {
  width: var(--spacing-s);
  height: var(--spacing-s);
  color: var(--system-message-accent);
  flex-shrink: 0;
}

.system-message__title {
  font-size: var(--text-step-xs);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-display);
  color: var(--system-message-accent);
}

.system-message__body {
  font-size: var(--text-step-xs);
  font-weight: var(--weight-default);
  line-height: var(--line-height-default);
  color: var(--color-on-surface);
}

/* app/components/ui/table/component.css */
.table {
  width: 100%;
}

.table__wrapper {
  display: flex;
  gap: var(--spacing-m);
  flex-direction: column;
}

.table__scroll {
  position: relative;
  overflow-x: auto;
}

.table__head {
  background: var(--color-surface-container);
}

.table__th {
  font-size: var(--text-step-2xs);
  font-weight: var(--weight-bold);
  color: var(--color-outline-variant);
  text-align: left;
  padding: var(--spacing-s) var(--spacing-m);
}

.table__td {
  padding: var(--spacing-s) var(--spacing-m);
  border-top: 1px solid var(--color-outline);
  font-size: var(--text-step-xs);
  font-weight: var(--weight-default);
  text-align: left;
}

.table__td--nowrap {
  white-space: nowrap;
}

.table__td--actions {
  text-align: right;
}

/* app/components/ui/table/sorter/component.css */
.table-sorter {
  display: flex;
  flex-direction: column;
  line-height: 0;
}

.table-sorter__link {
  color: var(--color-outline-variant);
  transition: color var(--transition-base) var(--transition-easing);
}

.table-sorter__link:hover {
  color: var(--color-on-surface);
}

.table-sorter__link--active {
  color: var(--color-primary);
}

.table-sorter__icon {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

/* app/components/ui/tabs/component.css */
.tabs {
  display: inline-flex;
  background: var(--color-surface-container-high);
  border: var(--border-width-default) solid var(--color-outline);
  border-radius: var(--border-radius-medium);
  overflow: clip;
}

.tabs__item:first-child {
  border-bottom-left-radius: var(--border-radius-medium);
}

.tabs__item:last-child {
  border-bottom-right-radius: var(--border-radius-medium);
}

.tabs__item {
  display: inline-flex;
  align-items:  center;
  gap: var(--spacing-3xs);
  padding: var(--spacing-xs) var(--spacing-s);
  font-size: var(--text-step-xs);
  font-weight: var(--weight-default);
  line-height: var(--line-height-default);
  color: var(--color-on-surface-variant);
  white-space: nowrap;
  border-bottom: var(--border-width-default) solid transparent;
}

.tabs__item--active {
  color: var(--color-on-surface);
  border-bottom-color: var(--color-tertiary);
  text-shadow: .4px 0, -.4px 0;
}

.tabs__icon {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
  flex-shrink: 0;
}

.tabs__counter {
  position: relative;
  display: inline-flex;
  min-width: var(--icon-size-m);
  min-height: var(--icon-size-m);
  margin-left: var(--spacing-3xs);
  padding: 0 var(--spacing-3xs);
  border: var(--border-width-default) solid var(--color-outline);
  border-radius: var(--border-radius-small);
  font-size: var(--text-step-2xs);
  font-weight: var(--weight-medium);
  background: var(--color-surface-container-highest);
  color: var(--color-on-surface-variant);
  justify-content: center;
  align-items:  center;
  line-height: 1;
}

.tabs__counter--highlight {
  color: var(--color-tertiary);
}

.tabs__counter--highlight:after {
  content: "";
  position: absolute;
  top: calc(-1 * var(--spacing-3xs) / 2);
  right: calc(-1 * var(--spacing-3xs) / 2);
  width: var(--spacing-2xs);
  height: var(--spacing-2xs);
  border-radius: var(--border-radius-rounded);
  background: var(--color-tertiary);
}

/* app/components/ui/tag/component.css */
.tag {
  display: inline-flex;
  padding: var(--spacing-3xs) var(--spacing-xs);
  background: var(--color-surface-container-high);
  border: var(--border-width-default) solid var(--color-lime-70);
  border-radius: var(--border-radius-medium);
  color: var(--color-lime-70);
  white-space: nowrap;
  align-items:  center;
}

/* app/components/ui/textarea/component.css */
.textarea {
  padding: var(--spacing-xs) var(--spacing-s);
  font-size: var(--text-step-s);
  color: inherit;
  background: none;
  border: none;
  flex: 1;
  min-height: 9rem;
}

.textarea:focus {
  outline: none;
}

.textarea::placeholder {
  color: var(--color-on-surface-variant);
}

.textarea--error::placeholder {
  color: var(--color-states-on-error-container);
}

.textarea:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.textarea--auto-grow {
  min-height: unset;
  resize: none;
  overflow: hidden;
  padding: 0;
}

/* app/components/ui/textarea/wysiwyg/component.css */
.textarea-wysiwyg {
  display: block;
  width: 100%;
}

.textarea-wysiwyg--disabled {
  opacity: .7;
}

.textarea-wysiwyg--disabled .textarea-wysiwyg__editor::part(toolbar) {
  display: none;
}

.textarea-wysiwyg--disabled .textarea-wysiwyg__editor .trix-content {
  pointer-events: none;
}

.textarea-wysiwyg__editor {
  --buncss-light: ;
  --buncss-dark: initial;
  color-scheme: dark;
  display: block;
  font-family: var(--fonts-family-default);
  font-size: var(--text-step-s);
  color: var(--color-on-surface);
  background: none;
  width: 100%;
  --rhino-border-color: transparent !important;
  --rhino-border-radius: 0 !important;
  --rhino-focus-ring: none !important;
  --rhino-text-color: var(--color-on-surface) !important;
  --rhino-dark-text-color: var(--color-on-surface) !important;
  --rhino-placeholder-text-color: var(--color-on-surface-variant) !important;
  --rhino-dark-placeholder-text-color: var(--color-on-surface-variant) !important;
  --rhino-button-text-color: var(--color-on-surface-variant) !important;
  --rhino-button-dark-text-color: var(--color-on-surface-variant) !important;
  --rhino-button-border-color: transparent !important;
  --rhino-button-active-border-color: transparent !important;
  --rhino-button-active-background-color: var(--color-primary-container) !important;
  --rhino-button-focus-background-color: var(--color-surface-container-highest) !important;
  --rhino-button-disabled-text-color: var(--color-outline-variant) !important;
  --rhino-button-disabled-border-color: transparent !important;
  --rhino-button-disabled-background-color: transparent !important;
  --rhino-toolbar-text-color: var(--color-on-surface-variant) !important;
  --rhino-toolbar-icon-size: 1.125rem !important;
  --rhino-fake-selection-color: var(--color-primary-accent) !important;
}

.textarea-wysiwyg__editor::part(toolbar) {
  background: var(--color-surface-container-high);
  padding: var(--spacing-2xs) var(--spacing-xs);
  gap: var(--spacing-3xs);
  border: 0;
}

.textarea-wysiwyg__editor::part(toolbar__button) {
  border: var(--border-width-default) solid transparent;
  border-radius: var(--border-radius-medium);
  padding: var(--spacing-3xs);
  color: var(--color-on-surface-variant);
  box-shadow: none;
  background: none;
  transition: background-color .12s, color .12s, border-color .12s;
}

.textarea-wysiwyg__editor::part(toolbar__button):hover {
  background: var(--color-surface-container-highest);
  color: var(--color-on-surface);
  box-shadow: none;
  outline: none;
  border-color: #0000;
}

.textarea-wysiwyg__editor::part(toolbar__button):focus {
  background: var(--color-surface-container-highest);
  color: var(--color-on-surface);
  box-shadow: none;
  outline: none;
  border-color: #0000;
}

.textarea-wysiwyg__editor::part(toolbar__button--active) {
  background: var(--color-primary-container);
  color: var(--color-on-primary-container);
  border-color: var(--color-primary);
}

.textarea-wysiwyg__editor::part(toolbar__button--disabled) {
  color: var(--color-outline-variant);
  opacity: .5;
  background: none;
  border-color: #0000;
}

.textarea-wysiwyg__editor::part(editor) {
  outline: none;
  background: none;
  border: 0;
}

.textarea-wysiwyg__editor::part(editor-wrapper) {
  outline: none;
  background: none;
  border: 0;
}

.textarea-wysiwyg__editor .trix-content {
  padding: var(--spacing-s);
  color: var(--color-on-surface);
  font-family: var(--fonts-family-default);
  font-size: var(--text-step-s);
  line-height: var(--line-height-default);
  outline: none;
  box-shadow: none;
  background: none;
  border: 0;
  border-radius: 0;
  min-height: 14rem;
}

.textarea-wysiwyg__editor .trix-content:-webkit-any(:focus, :focus-within) {
  box-shadow: none;
  outline: none;
  border: 0;
}

.textarea-wysiwyg__editor .trix-content:-moz-any(:focus, :focus-within) {
  box-shadow: none;
  outline: none;
  border: 0;
}

.textarea-wysiwyg__editor .trix-content:is(:focus, :focus-within) {
  box-shadow: none;
  outline: none;
  border: 0;
}

.textarea-wysiwyg__editor .trix-content p.is-editor-empty:first-child:before {
  color: var(--color-on-surface-variant);
}

.textarea-wysiwyg__editor .trix-content a:not(.link-preview__link) {
  color: var(--color-on-surface-highlight);
  text-decoration: underline;
}

.textarea-wysiwyg__editor::part(bubble-menu__popover) {
  box-shadow: none;
  background: none;
  border: 0;
  padding: 0;
}

.textarea-wysiwyg__editor::part(bubble-menu__popover-base) {
  box-shadow: none;
  background: none;
  border: 0;
  padding: 0;
}

.textarea-wysiwyg__editor::part(bubble-menu__popover--active) {
  box-shadow: none;
  background: none;
  border: 0;
  padding: 0;
}

.textarea-wysiwyg__editor::part(bubble-menu__popover--fixed) {
  box-shadow: none;
  background: none;
  border: 0;
  padding: 0;
}

.textarea-wysiwyg__editor::part(bubble-menu__popover--has-arrow) {
  box-shadow: none;
  background: none;
  border: 0;
  padding: 0;
}

.textarea-wysiwyg__editor::part(link-bubble-menu__popover) {
  box-shadow: none;
  background: none;
  border: 0;
  padding: 0;
}

.textarea-wysiwyg__editor::part(link-bubble-menu__popover-base) {
  box-shadow: none;
  background: none;
  border: 0;
  padding: 0;
}

.textarea-wysiwyg__editor::part(link-bubble-menu__popover--active) {
  box-shadow: none;
  background: none;
  border: 0;
  padding: 0;
}

.textarea-wysiwyg__editor::part(bubble-menu__toolbar) {
  box-shadow: none;
  background: none;
  border: 0;
  padding: 0;
}

.textarea-wysiwyg__editor::part(link-bubble-menu__toolbar) {
  box-shadow: none;
  background: none;
  border: 0;
  padding: 0;
}

.textarea-wysiwyg__editor::part(bubble-menu__arrow) {
  display: none;
}

.textarea-wysiwyg__editor::part(link-bubble-menu__arrow) {
  display: none;
}

.textarea-wysiwyg__editor::part(bubble-menu__toolbar__base) {
  background: var(--color-surface-container-high);
  border: var(--border-width-default) solid var(--color-outline-variant);
  border-radius: var(--border-radius-medium);
  padding: var(--spacing-3xs);
  color: var(--color-on-surface);
}

.textarea-wysiwyg__editor::part(link-dialog__container) {
  background: var(--color-surface-container-high);
  border: var(--border-width-default) solid var(--color-outline-variant);
  border-radius: var(--border-radius-medium);
  padding: var(--spacing-3xs);
  color: var(--color-on-surface);
}

.textarea-wysiwyg__editor::part(dialog) {
  background: var(--color-surface-container-high);
  border: var(--border-width-default) solid var(--color-outline-variant);
  border-radius: var(--border-radius-medium);
  color: var(--color-on-surface);
}

.textarea-wysiwyg--error .textarea-wysiwyg__editor::part(toolbar) {
  background: var(--color-states-error-container);
}

.textarea-wysiwyg--ai .textarea-wysiwyg__editor::part(toolbar) {
  background: var(--color-primary-container);
}

/* app/components/ui/timeline/component.css */
.timeline {
  --timeline-rail-width: .625rem;
}

.timeline__header {
  padding-bottom: var(--spacing-s);
  margin-bottom: var(--spacing-xs);
  border-bottom: var(--border-width-default) solid var(--color-outline);
}

.timeline__more {
  display: block;
  border: none;
  border-top: var(--border-width-default) solid var(--color-outline);
  cursor: pointer;
  padding: var(--spacing-s) 0;
  color: var(--color-primary);
  text-align: start;
  background: none;
  width: 100%;
}

.timeline__more:hover {
  color: var(--color-on-primary-container);
}

.timeline__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.timeline__list[hidden] {
  display: none;
}

.timeline__entry {
  display: grid;
  grid-template-columns: var(--timeline-rail-width) 1fr;
  gap: var(--spacing-s);
  padding: var(--spacing-s) 0;
  position: relative;
  align-items:  start;
}

.timeline__entry:not(:last-child):after {
  content: "";
  position: absolute;
  top: calc(var(--spacing-s)  + .875rem);
  bottom: 0;
  background: var(--color-outline);
  width: 1px;
}

.timeline__entry:not(:last-child):not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
  left: calc(var(--timeline-rail-width) / 2);
}

.timeline__entry:not(:last-child):not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
  left: calc(var(--timeline-rail-width) / 2);
}

.timeline__entry:not(:last-child):not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
  left: calc(var(--timeline-rail-width) / 2);
}

.timeline__entry:not(:last-child):-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
  right: calc(var(--timeline-rail-width) / 2);
}

.timeline__entry:not(:last-child):-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
  right: calc(var(--timeline-rail-width) / 2);
}

.timeline__entry:not(:last-child):is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
  right: calc(var(--timeline-rail-width) / 2);
}

.timeline__entry + .timeline__entry:before {
  content: "";
  position: absolute;
  top: 0;
  height: calc(var(--spacing-s)  + .25rem);
  background: var(--color-outline);
  width: 1px;
}

.timeline__entry + .timeline__entry:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
  left: calc(var(--timeline-rail-width) / 2);
}

.timeline__entry + .timeline__entry:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
  left: calc(var(--timeline-rail-width) / 2);
}

.timeline__entry + .timeline__entry:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
  left: calc(var(--timeline-rail-width) / 2);
}

.timeline__entry + .timeline__entry:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
  right: calc(var(--timeline-rail-width) / 2);
}

.timeline__entry + .timeline__entry:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
  right: calc(var(--timeline-rail-width) / 2);
}

.timeline__entry + .timeline__entry:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
  right: calc(var(--timeline-rail-width) / 2);
}

.timeline__dot {
  width: var(--timeline-rail-width);
  height: var(--timeline-rail-width);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: .25rem;
}

.timeline__dot--success {
  background: var(--color-states-on-success);
}

.timeline__dot--attention {
  background: var(--color-states-on-attention);
}

.timeline__dot--error {
  background: var(--color-states-on-error);
}

.timeline__dot--pending {
  background: var(--color-states-on-pending);
}

.timeline__content {
  display: flex;
  gap: var(--spacing-3xs);
  flex-direction: column;
}

.timeline__body {
  padding: var(--spacing-xs) var(--spacing-s);
  background: var(--color-surface-container-high);
  border-inline-start: var(--border-width-bold) solid var(--color-outline);
  border-radius: var(--border-radius-small);
}

.timeline__body p {
  margin-bottom: var(--spacing-xs);
}

.timeline__body p:last-child {
  margin-bottom: 0;
}

.timeline__time {
  color: var(--color-on-surface-variant);
}

/* app/components/ui/toggle_group/component.css */
.toggle-group {
  display: block;
}

.toggle-group__label {
  display: block;
  font-size: var(--text-step-2xs);
  font-weight: var(--weight-medium);
  line-height: var(--line-height-display);
  color: var(--color-on-surface-variant);
  margin-bottom: var(--spacing-xs);
}

.toggle-group__track {
  display: flex;
  align-items:  center;
  gap: var(--spacing-3xs);
  padding: var(--spacing-3xs);
  background: var(--color-surface-container-highest);
  border: var(--border-width-default) solid var(--color-outline-variant);
  border-radius: var(--border-radius-medium);
  overflow: clip;
}

.toggle-group__option {
  display: flex;
  cursor: pointer;
  padding: var(--spacing-xs) var(--spacing-s);
  font-size: var(--text-step-xs);
  line-height: var(--line-height-default);
  color: var(--color-on-surface-variant);
  border-radius: var(--border-radius-small);
  white-space: nowrap;
  transition: background-color var(--transition-fast) var(--transition-easing), color var(--transition-fast) var(--transition-easing);
  flex: 1;
  justify-content: center;
  align-items:  center;
}

.toggle-group__option:has(input:checked) {
  background: var(--color-tertiary);
  color: var(--color-on-tertiary);
  font-weight: var(--weight-bold);
}

.toggle-group__option--disabled {
  opacity: .38;
  cursor: default;
  pointer-events: none;
}

/* copra-components-css:@copra/components */


/* app/assets/stylesheets/memberships.css */
.memberships__table tr td + td, .memberships__table tr th + th {
  padding-left: var(--spacing-s);
}

.memberships__table--row {
  border-bottom: var(--border-width-default) solid var(--color-outline-secondary);
}

.memberships__table--row td {
  padding-block: var(--spacing-m);
}

/* app/assets/stylesheets/application.css */
.trix-content:not([contenteditable]) {
  min-height: unset;
  border: none;
  border-radius: 0;
  padding: 0;
}

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

html {
  -webkit-text-size-adjust: 100%;
  line-height: 1.5;
}

body {
  font-family: var(--fonts-family-default);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--color-on-surface);
  background: var(--color-surface);
  min-height: 100vh;
}

img, svg, video, canvas {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

input[data-com-onepassword-filled="light"], input[data-com-onepassword-filled="dark"], input[data-com-onepassword-filled="light-branded"], input[data-com-onepassword-filled="dark-branded"] {
  box-shadow: 0 0 0 1000px var(--color-surface-container-highest) inset !important;
  -webkit-text-fill-color: var(--color-on-surface) !important;
}

input:-internal-autofill-selected {
  box-shadow: 0 0 0 1000px var(--color-surface-container-highest) inset !important;
  -webkit-text-fill-color: var(--color-on-surface) !important;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: inherit;
}

table {
  border-collapse: collapse;
  width: 100%;
}

dialog {
  border: none;
  padding: 0;
}

ul, ol {
  list-style: none;
}

.sr-only {
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
}